*{
  margin: 0;
  padding: 0;
}

body{
       font-family: Arial, 'M PLUS 1p', Source Sans Variable;
       color:#1f2529;
}

.col-text{
  font-size:9px;
}

.fadein {
	opacity : 0;
	transform : translate(-150px, 0px);
	transition : all 500ms;
	}

  .fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}

  .fadeinr {
  	opacity : 0;
  	transform : translate(150px, 0px);
  	transition : all 500ms;
  	}

    .fadeinr.scrollin {
  	opacity : 1;
  	transform : translate(0, 0);
  	}

.fadeinu {
    	opacity : 0;
    	transform : translate(0px, 100px);
    	transition : all 500ms;
    	}

      .fadeinu.scrollin {
    	opacity : 1;
    	transform : translate(0, 0);
    	}

      .header-img-pc{
        display:none;
      }

h3{
  font-weight:normal;
  font-size:20px;
  line-height:60px;
  letter-spacing:5px;
  padding-top:30px;
  padding-bottom:30px;

}

header{
  position:relative;
  height:95vh;
  width:100%;
  overflow: hidden;
  background-color:#fff;
}

.white-back{
  background-color:#fff;
}

.header-back{
  position:absolute;
  top:8vh;
  left:0px;
  height:40vh;
  width:80vw;
  background-size: cover;
  background-position: right;
  background-image: url('img/header/header-back.png');
  opacity:0.8;
  z-index:1;
}

.header-center{
  position: absolute;   /* 親を基準に配置 */
  top: 50%;             /* 親の高さのちょうど半分の位置に設置 */
  left: 0;              /* 横は全幅にしたいので 0 から */
  width: 100%;          /* 指定通り横幅いっぱい */
  transform: translateY(-40%); /* 50% 上に戻して上下中央に揃える */
}
.header-center img{
  width:100%;
}

.img1{
  z-index:20;
}
.img2{
  z-index:3;
}
.img3{
  z-index:1;
}

.awa01{
  position:absolute;
  z-index:8;
  width:30vw;
  top:10%;
  right:6vw;
}

.awa02{
  position:absolute;
  z-index:9;
  width:10vw;
  top:6%;
  right:50vw;
}

.awa03{
  position:absolute;
  width:70vw;
  top:42%;
  left:-20vw;
  z-index:5;
}

/* ===== シャボン玉共通スタイル ===== */
.awa01,
.awa02,
.awa03 {
  will-change: transform;          /* 描画最適化 */
  pointer-events: none;            /* クリックを透過させたい場合 */
  animation-name: bubbleFloat;     /* キーフレーム名 */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* ===== 基本の軌道（ゆったりと上→下→上）===== */
@keyframes bubbleFloat {
  0%   { transform: translate(  0px,   0px)   scale(1);   }
  25%  { transform: translate( 12px, -18px)   scale(1.05);}
  50%  { transform: translate(-10px, -32px)   scale(1);   }
  75%  { transform: translate(-15px, -18px)   scale(1.05);}
  100% { transform: translate(  0px,   0px)   scale(1);   }
}

.img1 img {
  animation: img1Float 12s ease-in-out infinite;
  will-change: transform;
}

/* 2) ±3px だけふわふわさせるキーフレーム */
@keyframes img1Float {
  0%   { transform: translate( 0px,   0px); }
  20%  { transform: translate( 4px,  -3px); }
  50%  { transform: translate( 0px,  -3px); }
  80%  { transform: translate(-3px,   4px); }
  100% { transform: translate( 0px,   0px); }
}


/* 画像は最初は透明にしておく */
.img2,
.img3 {
  opacity: 0;
}

/* フェードイン共通キーフレーム */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* img2 ─ ページ読込み直後から 2 s かけてフェードイン */
.img2 {
  animation: fadeIn 4s ease-out forwards;
}

/* img3 ─ 2 s 待ってから 3 s かけてフェードイン */
.img3 {
  animation: fadeIn 3s ease-out forwards;
  animation-delay: 1s;       /* ここで「待ち時間」を指定 */
}




/* ───────────────────
   1) 親セクション
─────────────────── */
.hero{
  position: relative;
  display: grid;          /* 1×1 の重ね合わせレイヤー */
  grid-template: 1fr / 1fr;

  overflow: hidden;       /* はみ出しを隠す（任意） */
}

/* ───────────────────
   2) 2 枚を同じセルに重ねる
─────────────────── */
.hero__bg,
.hero-content{
  grid-area: 1 / 1;       /* 行 1 / 列 1（= 同じセル） */
}

/* ───────────────────
   3) 背景レイヤー
─────────────────── */
.hero__bg{
  position: sticky;       /* スクロールでピン留め */
  top: 0;                 /* ビューポート上端に吸着 */

  /* 幅・高さは書かない！
     → Grid の “stretch” が働き、親 .hero と同じサイズになる */
  background: url('img/hero/back.png') left/cover no-repeat fixed;
  z-index: -1;            /* コンテンツより背面へ */
  pointer-events: none;   /* 万一クリック遮りを防ぐなら */
}

/* ───────────────────
   4) コンテンツ
─────────────────── */
.hero-content{
  /* 通常フローで上から順に積める */
  padding: 8vh 8vw;
  box-sizing: border-box;
  color: #fff;
  font-size: clamp(1.2rem, 4vw, 2.4rem);
  line-height: 1.5;
  z-index: 1;             /* 背景より手前 */
}

@supports (-webkit-touch-callout: none) {  /* Safari を簡易検出 */
  .hero{
    display: block;          /* Grid → Block */
    position: relative;
  }
  .hero__bg{
    position: fixed;
    left: 0;
    top: 0;                 /* 既に効いているはずですが念のため */
    width: 100%;
    height: 100vh;          /* ←★ これを追加 ★*/
    background-attachment: scroll;
  }
}



.split-3-7 {
  display: flex;          /* 横並びの基本 */
  align-items: flex-end;
  margin-bottom:30px;
  margin-top:50px;
}

.split-3-7 > .left  { flex: 3; }   /* 3 つぶんの比率 */
.split-3-7 > .right { flex: 7; }   /* 7 つぶんの比率 */

/* 例：装飾 */
.left  { padding:10px; }
.right {  padding:10px; }

.left-img img{
  width:100%;
}

.left-p{
  text-align:center;
  font-size:14px;
  line-height:12px;
}
.mini{
  font-size:10px;
  line-height:10px;
}

.right-top{
  display:inline-block;
  background:#dce17e;
  color:#0a1e0c;
  padding:3px 15px;
  font-size:11px;
  font-weight:bold;
  border-radius:999px;
  margin-bottom:5px;
}

.right-middle{
  font-size:16px;
  letter-spacing:2px;
}

.right-bottom{
  line-height:22px;
  margin-top:5px;
}

.right-bottom li{
  list-style:none;
  display:inline;
  font-size:9px;
  padding:3px 15px;
  border:0.2px solid #fff;
}

.shampoo-description{
  background-color: rgba(255, 255, 255, 0.3);
  padding:30px;
  border-radius:10px;
}

.shampoo-description-top-img img{
  width:100%;
}


.split-3 {
  display: flex;           /* 横並び */
}

.split-3 > .col {
  flex: 1 1 0;             /* 伸縮 OK・基準幅 0 → 全部同じ幅になる */
  /* ↓お好みで装飾 */
  padding: 10px;
  box-sizing: border-box;
}

.col{
  text-align:center;
}

.col-img img{
  width:100%;
}

.split-3{
  font-size:12px;
}

.description-c{
  font-size:15px;
  line-height:40px;
  margin-top:30px;
  margin-bottom:30px;
  letter-spacing: 3px;
}

.split-3-description{
  font-size:12px;
  line-height:30px;
}

.split-3-7-under{
  margin-top:120px;
}


/*note*/
.note{
  padding:8vh 8vw;
}

.note-img img{
width:100%;
}

.description-c-mini{
  font-size:10px;
}

.description-c-note{
  line-height: 25px;
}

.note h2, .product h2, .store h2{
  font-weight:normal;
  font-size:20px;
  line-height:33px;
  letter-spacing:5px;
}

.note-japan{
  font-size:15px;
}

.note-div{
  padding:0px 20px;
}

/*product*/

.product, .store{
  padding:8vh 8vw;
}

.split-2 {
  display: flex;           /* 横並び */
  margin-top:30px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.split-2 > .col2 {
  flex: 0 0 50%;
  /* ↓お好みで装飾 */
  padding: 10px;
  box-sizing: border-box;
}

.col2{
  text-align:center;
}

.col2 img{
  height:200px;
}

.split-2-text{
  font-size:15px;
  line-height: 15px;
}

.split-2-text-j{
  font-size:11px;
}

.split-2-g{
  margin-top:10px;
  font-size:10px;
  margin-bottom:8px;
}

.split-2-m{
  font-size:10px;
}


/*footer*/
footer{
  background: linear-gradient(
    60deg,
    #b0dbcd 0%,
    #cbd8b4 22%,
    #dedaaa 48%,
    #d8dc97 76%,
    #ccde6f 100%
  );
  color: #fff;
  padding:8vh 8vw 1vh 8vw;
}

footer li{
  line-height: 37px;
    letter-spacing: 5px;
    font-size:13px;
    list-style:none;
}

footer li a{
  text-decoration: none;
  color:#fff;
}

.footer-logo{
  margin-top:50px;
  margin-bottom:40px;
  width:25vw;
  max-width:200px;
}

.footer-logo img{
  width:100%;
}

.footer-p{
  font-size:10px;
}

.store-button{
  border:1px solid #1f2529;
  padding:10px 50px;
  text-align:center;
  margin-top:20px;
}

.store-button img{
  max-width:100px;
}

.store-button:hover{
  opacity:0.7;
}

.header-pc-center, .pc-br{
  display:none;
}


@media screen and (min-width: 600px){

  .pc-br{
    display:inline;
  }

  .header-center{
    display:none;
  }
  header{
    height:800px;
  }
  .header-pc-center{
    display:block;
    position: absolute;   /* 親を基準に配置 */
    top: 50%;             /* 親の高さのちょうど半分の位置に設置 */
    left: 50%;             /* 横は全幅にしたいので 0 から */
    width: 80%;           /* 指定通り横幅いっぱい */
    transform: translate(-50%, -50%); /* 上下左右中央に揃える */
  }

  .header-pc-center img{
    width:100%;
  }

  .awa01{
    top:auto;
    bottom:10%;
    right:-50px;
    width:35vh;
  }

  .awa02{
    right:23vw;
    top:100px;
    width:10vh;
  }

  .awa03{
    width:40vw;
    left:-10px;
    bottom:10px;
    top:auto;
  }

  .hero-content{
    width:800px;
    margin:0 auto;
  }

   .pc-div{
     width:800px;
     box-sizing: border-box;
     margin:0 auto;
     padding: 8vh 8vw;
   }

   .footer-p{
     width:800px;
     box-sizing: border-box;
     margin:0 auto;
     padding: 0vh 8vw;
   }



  h3{
    font-size:25px;
    line-height:100px;
  }

  .right-top {
    font-size: 15px;
  }

  .right-middle {
    font-size: 25px;
    line-height:50px;
  }

  .left-p{
    font-size:20px;
    line-height:27px;
  }

  .shampoo-description{
    padding:70px;
  }

  .description-c {
    font-size:20px;
    line-height:70px;
  }

  .split-3-description{
    margin-top:50px;
    font-size:17px;
    line-height:40px;
  }

  .right-bottom {
    line-height:30px;
  }

  .right-bottom li{
    font-size:17px;
  }

.pc-div h2{
  font-size:30px;
      line-height: 45px;
}
.note-japan{
  font-size:19px;
}

.description-c{
  font-size:20px;
  line-height: 80px;
}

.split-3-description{
  font-size: 17px;
        line-height: 40px;
}

.col2 img {
  height:400px;
}

.split-2-img{
  padding-bottom:30px;
}

.split-2-text{
  font-size:25px;
  line-height: 40px;
}

.split-2-text-j{
  font-size:18px;
}

.split-2-g, .split-2-m{
  font-size:15px;
}

.store-button{
  margin-top:60px;
}

.store-button img {
    max-width: 140px;
}

.note-img{
  text-align: center;
}

.note-img img{
  max-width:410px;
}


.split-3{
  margin-top:30px;
}


}
@media screen and (min-width: 1024px){



}