@charset "utf-8";
/* CSS Document */

/* 親（section）が中身の高さをちゃんと持つように */
.top-visuals{
  display: block;
  padding: 100px 0 10px;
}

/* figureのデフォルト余白を消す（意外と効く） */
.top-visual{
  margin: 0;
  display: flex;
  justify-content: center;
}

/* 画像は基本：横幅に合わせて縮む */
.top-visual img{
  display: block;
  max-width: 100%;
  height: auto;
}





/* 1枚目（キャッチ画像） */
.top-visual--hero img{
  width: min(680px, 92vw); /* SP〜PCでほどよく */
  height: auto;
}

.top-visual--hero:nth-of-type(2) img{
 width: min(680px, 92vw); /* SP〜PCでほどよく */
	height: auto;
}

/* PCはもう少し大きくしてOK */
@media (min-width: 768px){
  .top-visual--hero img{
    width: 500px; /* 好みで調整 */
  }
}
/* 2枚目（正方形） */
.top-visuals figure:nth-of-type(2) img{
  width: min(520px, 86vw); /* SPでも大きすぎない */
  height: auto;
  margin-top: 24px;
}

/* PCでも上限決める */
@media (min-width: 768px){
  .top-visuals figure:nth-of-type(2) img{
    width: 520px; /* ここを小さくすると一気に解決する */
  }
}

/* 文字ブロック全体 */
.top-text{
  padding: 26px 16px 40px;
  font-family: "07LogoTypeGothic7",suns-serif; 
}

.top-text__inner{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}



/* 見出し */


/* SP微調整 */
@media (max-width: 768px){
  .top-text{
    padding: 20px 14px 34px;
  }
  .top-text__tag{
    font-size: 13px;
    padding: 9px 14px;
  }
  .top-text__lead{
    font-size: 12px;
  }
}

/* セクション余白は好みで */
.note-sec{
  padding: 40px 16px;
  background: #ffffff; /* 1枚目みたいに白地なら */
}

/* PC：2カラム */
.note-wrap{
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* 左を少し大きめ */
  gap: 28px;
  align-items: center;
}

/* 左：画像 */
.note-visual{
  margin: 0;
  display: flex;
  justify-content: center;
}
.note-visual img{
  display: block;
  width: 100%;
  max-width: 640px; /* デカすぎ防止：ここで調整 */
  height: auto;
}

/* 右：テキスト brand井よって色変えてね*/


.note-block + .note-block{
  margin-top: 18px;
}

.note-label{
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
}

.note-body{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.9;
}

/* SP：縦並び（画像の下に文字） */
@media (max-width: 768px){
  .note-wrap{
    grid-template-columns: 1fr;
    gap: 16px;
  }

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

  .note-text{
    text-align: left;
  }

  .note-body{
    font-size: 12px;
  }
}

.p-lineup__inner{
  max-width: 520px;      /* ここで全体の横幅（画像の雰囲気に近い） */
  margin: 0 auto;
  padding: 40px 20px 30px; /* 白フチがあるなら、必要に応じて調整 */
}

/* 行：左画像 / 右テキスト */
.p-lineup__row{
  display: inline-grid;                 /* ←ここ超重要 */
  grid-template-columns: 120px max-content; /* autoじゃなく max-content */
  column-gap: 40px;
  align-items: center;
}

.p-lineup__row + .p-lineup__row{
  margin-top: 42px;                /* 各段の間隔 */
}

/* 左画像 */
.p-lineup__img{
  margin: 0;
  display: flex;
  justify-content: center;
}
.p-lineup__img img{
  width: 110px;                     /* 画像サイズ（必要なら調整） */
  height: auto;
  display: block;
}

/* 右テキスト */
.p-lineup__text{
  color: #fff;                     /* 画像の白文字に合わせる */
  font-size: 12px;                 /* 全体の基準サイズ */
  line-height: 1.6;
  width: fit-content;
}


.p-lineup__link:hover{
  text-decoration: underline;
}

/* BACKボタン：下中央 */
.p-lineup__back{
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.p-back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.6);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
}

/* SP：画像→文字の縦並びにしたい時 */
@media (max-width: 767px){
  .p-lineup__row{
    grid-template-columns: 84px max-content;
    column-gap: 18px;
  }
  .p-lineup__img img{
    width: 90px;
    height: auto;
  }

  /* 画面からはみ出す時の保険（長文でも安全） */
  .p-lineup__text{
    max-width: calc(100vw - 84px - 18px - 40px);
    min-width: 0;
  }
}

.p-lineup__name,
.p-lineup__link{
  font-family: "07LogoTypeGothic7", sans-serif;
}
.p-lineup__link{
  position: relative;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-family: "07LogoTypeGothic7", sans-serif;

  transition: transform .35s ease;
}

/* 擬似要素でアニメ用コピーを作る */
p-lineup__link{
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-family: "07LogoTypeGothic7", sans-serif;

  transition: transform .3s ease, letter-spacing .3s ease;
}

/* ホバー：ほんのり大きく */
.p-lineup__link:hover{
  transform: scale(1.08);
  letter-spacing: .05em;
}

.p-lineup__list{
  padding-left: 0;
  margin: 0;
  list-style: none;
   display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px; /* 行間（好みで） */
}
/* 2枚目 figure をスライダーに */
.top-slider{
  position: relative;
}

/* 表示窓 */
.top-slider__viewport{
  overflow: hidden;
  width: 100%;
  touch-action: pan-y; /* 縦スクロールを邪魔しにくく */
}

/* 横並びトラック */
.top-slider__track{
  display: flex;
  transform: translateX(0);
  transition: transform 0.45s ease;
  will-change: transform;
}

/* スライド画像：1枚=表示窓の幅 */
.top-slider__track img{
  flex: 0 0 100%;
}

/* 既存の「2枚目のサイズ指定」を、スライダーのviewport基準に寄せる */
.top-visuals figure:nth-of-type(2) .top-slider__viewport{
  width: min(520px, 86vw);
  margin-top: 24px;
}

@media (min-width: 768px){
  .top-visuals figure:nth-of-type(2) .top-slider__viewport{
    width: 520px;
  }
}

/* 矢印ボタン（スマホは邪魔なら消す） */
.top-slider__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(0,0,0,.35);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 24px;
}

.top-slider__btn--prev{ left: 8px; }
.top-slider__btn--next{ right: 8px; }

@media (max-width: 767px){
  .top-slider__btn{ display: none; } /* スマホはスワイプだけに */
}

/* ===== ドット位置 ===== */
.top-slider__dots{
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  
  display: flex;
  gap: 8px;
  z-index: 5;
}

/* ===== ドット本体 ===== */
.top-slider__dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;

  background: rgba(255,255,255,.45);
  backdrop-filter: blur(2px);

  border: none;
  padding: 0;

  transition: .3s ease;
  cursor: pointer;
}

/* ===== アクティブ ===== */
.top-slider__dot.is-active{
  background: rgba(255,255,255,.9);
  transform: scale(1.3);
}


.top-slider{
  position: relative;
}

.next-fragrance{
  text-align:center;
  padding:40px 0 60px;
}

/* 情報テキスト */


.nf-grid{
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 8分割がコツ */
  gap: 18px 10px;
  max-width: 420px;
  margin: 0 auto;
}

.nf-link{
  display: block;
  text-align: center;
  grid-column: span 2; /* 8分割のうち2つ使う＝4列になる */
}

.nf-bottle{
  height: 100px;
  width: 100%;
  max-width: 92px;
  object-fit: contain;   /* ←これ重要 */
  display: block;
  margin: 0 auto;
}

/* 下段3つを「2,4,6列目」に置いて中央寄せ */
.nf-link:nth-child(5){ grid-column: 2 / span 2; }
.nf-link:nth-child(6){ grid-column: 4 / span 2; }
.nf-link:nth-child(7){ grid-column: 6 / span 2; }

.top-visual--kv img{
  width: min(1000px, 92vw);
  height: auto;
  display: block;
  margin: 0 auto;
}

.top-visual.top-slider .top-slider__viewport{
  width: min(520px, 86vw);
  margin: 24px auto 0;  /* 真ん中寄せ */
}

@media (min-width: 768px){
  .top-visual.top-slider .top-slider__viewport{
    width: 520px;        /* PC上限 */
  }
}

/* 念のため：画像は高さauto */
.top-slider__track img{
  width: 100%;
  height: auto;
  flex: 0 0 100%;
}
.chamu {
	display: block;
  max-width: 600px;
  width: 100%;
  margin: 20px auto;
  padding: 0 20px;
}