body{
  background-color: #d5eeff;
}

/* =========================================
   スライド全体の枠（共通）
========================================= */
.img-frame{
  width: 100%;
  overflow: hidden;
  position: relative;
}


/* =========================================
   スライド背景（共通）
========================================= */
.img-01, .img-02, .img-03{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* =========================================
   各画像の指定
========================================= */
.img-01{
  background-image: url("img/honzoji01.png");
  animation: slide-animation-01 24s infinite;
}

.img-02{
  background-image: url("img/honzoji02.png");
  animation: slide-animation-02 24s infinite;
}

.img-03{
  background-image: url("img/honzoji03.png");
  animation: slide-animation-03 24s infinite;
}


/* =========================================
   スライドアニメーション
========================================= */
@keyframes slide-animation-01{
  0%   {opacity: 1; transform: scale(1.0);}
  30%  {opacity: 1;}
  40%  {opacity: 0; transform: scale(1.15);}
  90%  {opacity: 0;}
  100% {opacity: 1; transform: scale(1.0);}
}

@keyframes slide-animation-02{
  0%   {opacity: 0;}
  30%  {opacity: 0; transform: scale(1.1);}
  40%  {opacity: 1;}
  60%  {opacity: 1;}
  70%  {opacity: 0; transform: scale(1.0);}
  100% {opacity: 0;}
}

@keyframes slide-animation-03{
  0%   {opacity: 0;}
  60%  {opacity: 0; transform: scale(1.0);}
  70%  {opacity: 1;}
  90%  {opacity: 1;}
  100% {opacity: 0; transform: scale(1.1);}
}


/* =========================================
   スライド文字（共通）
========================================= */
.msg{
  font-size: 30px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 2px 2px 3px #000;
  z-index: 5;
}



/* =====================================
   共通：重なり順を最優先で整理
===================================== */

/* navが最上位 */
nav{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
}

/* maskはnavのすぐ下 */
.open #mask{
  position: fixed;
  inset: 0;
  z-index: 1500;
}

/* ハンバーガーは常に見える */
.toggle-btn{
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 2500;
}

/* スマホロゴも常に見える */
.sp-logo{
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2500;
}

.sp-logo img{
  height: 35px;
  width: auto;
}


/* =====================================
   PC（960以上）
===================================== */
@media screen and (min-width: 960px){

  /* スマホヘッダーを消す */
  .sp-header{
    display: none;
  }

  /* PCヘッダーは表示 */
  .main-header{
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    height: 120px;
    width: 100%;
    z-index: 100;
  }

  /* PCスライドはヘッダー直下 */
  .pc-slide{
    margin-top: 120px;   /* ヘッダー分だけ */
  }

  .pc-slide .img-frame{
    width: 100%;
    height: 25vh;
    overflow: hidden;
    position: relative;           /* 余計なmarginは禁止 */
  }

  /* top-textはスライド直下 */
  .top-text{
    width: 40%;
    max-width: 600px;
    margin: 20px auto;
    line-height: 1.8;
  }

}


/* =====================================
   スマホ（960未満）
===================================== */
@media screen and (max-width: 959px){

  /* PCヘッダーとPCスライドを消す */
  .main-header{
    display: none;
  }

  .pc-slide .img-frame{
    width: 100%;
    height: 25vh;
    margin-top: 30px;
    overflow: hidden;
    position: relative;           /* 余計なmarginは禁止 */
  }

  /* スマホヘッダーを表示 */
  .sp-header{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 90%;
    height: 50vh;
    overflow: hidden;
    z-index: 200;
  }

.msg{
    font-size: 16px;      /* スマホ文字小さめ */
  }


  /* top-textは幅を少し狭める */
  .top-text{
    width: 90%;
    margin: 20px auto;
  }

}