@charset "UTF-8";
/* ==========================================================================
   Fragrance Collection - /shop/pages/fragrance.aspx
   /freepage/fragrance-new/fragrance.css
   --------------------------------------------------------------------------
   - レスポンシブ（PC/SP共通HTML）
   - ブレークポイント : 767px を境目
       PC : @media screen and (min-width: 768px)
       SP : @media screen and (max-width: 767px)
   - コンテンツ幅 : PC 1000px / SP 100%
   - フォント : Zen Kaku Gothic New（和文） / Helvetica（欧文）
   - 主要カラー : #211815 (warm black) / #726B64 / #b0a198 / #a18780 / #e1b87f
   --------------------------------------------------------------------------
   構成ルール
   - セクションごとに「共通ルール → PC(min-width:768px) → SP(max-width:767px)」の順。
   - 同じセレクタ・同じ要素の記述は1か所に集約（重複・末尾上書きを排除）。
   ========================================================================== */


/* --------------------------------------------------------------------------
   Topic path（パンくず）
   -------------------------------------------------------------------------- */
.pane-topic-path,
.pane-topic-path .block-topic-path {
  background: #fff;
  margin: 0;
}

.pane-topic-path .block-topic-path--list {
  margin: 0;
}

.block-topic-path--list li:not(:last-of-type) a {
  color: #b3b3b3;
}

@media screen and (min-width: 768px) {
  .pane-topic-path .block-topic-path {
    padding: 16px 0 20px;
  }
}

@media screen and (max-width: 767px) {
  .pane-topic-path .block-topic-path {
    padding: 16px 15px 20px;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
.fragrance {
  color: #211815;
  font-family: 'mfw-paotogothicstdn-regular', Hiragino Sans, Hiragino Kaku Gothic ProN, Yu Gothic, Meiryo, sans-serif;
  letter-spacing: 0.05em;
  line-height: 1.8;
  overflow-x: clip;
}

.fragrance img {
  display: block;
  width: 100%;
  height: auto;
}

.fragrance a {
  color: inherit;
  text-decoration: none;
}

.fragrance .inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* 欧文見出しは Helvetica */
.fragrance .en {
  font-family: avenir-next-lt-pro;
}

/* 見出し（XDに合わせ装飾の縦線は無し） */
.fragrance .line_head {
  font-weight: 500;
  padding: 0;
}

@media screen and (min-width: 768px) {
  .fragrance .line_head {
    font-size: 18px;
    margin: 0 0 16px;
    line-height: 36px;
  }

  .fragrance .line_head br.isSP {
    display: none;
  }

  br.isPC {
    display: block;
  }

  br.isSP {
    display: none;
  }
}

@media screen and (max-width: 767px) {

  /* SP追従タブ分の余白 */
  .fragrance {
    padding-bottom: 60px;
  }

  .fragrance .inner {
    padding: 0 30px;
  }

  .fragrance .line_head {
    font-size: 18px;
    margin: 0 0 25px;
    line-height: 34px;
  }

  br.isPC {
    display: none;
  }

  br.isSP {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   固定ナビ（フレグランス診断 / 香りのチャート）
   PC : 画面右に縦書きで固定 / SP : 画面下に横並びで固定
   -------------------------------------------------------------------------- */
.fragrance .fragrance_nav {
  position: fixed;
  z-index: 20;
}

.fragrance .fragrance_nav a {
  display: block;
  color: #fff;
}

.fragrance .fragrance_nav a:nth-of-type(1) {
  background: #a18780;
}

.fragrance .fragrance_nav a:nth-of-type(2) {
  background: #e1b87f;
}

.fragrance .fragrance_nav .search_en {
  font-size: 12px;
}

.fragrance .fragrance_nav .search_jp {
  font-weight: 500;
  font-size: 10px;
}

@media screen and (min-width: 768px) {
  .fragrance .fragrance_nav {
    right: 0;
    top: 200px;
  }

  .fragrance .fragrance_nav a {
    writing-mode: vertical-rl;
    padding: 16px 12px 16px 16px;
  }

  .fragrance .fragrance_nav .search_jp {
    line-height: 1.1;
    margin-right: 4px;
  }
}

@media screen and (max-width: 767px) {
  .fragrance .fragrance_nav {
    width: 100%;
    display: flex;
    bottom: 0;
    left: 0;
  }

  .fragrance .fragrance_nav a {
    padding: 15.5px 0;
    flex: 1;
    text-align: center;
  }

  .fragrance .fragrance_nav a .search_en {
    display: block;
  }

  .fragrance .fragrance_nav a .search_jp {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   キービジュアル（100svh固定 / パララックス）
   画像は固定、下のコンテンツがスクロールで覆いかぶさる
   -------------------------------------------------------------------------- */
.fragrance .kv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(100svh - 110px);
  z-index: 0;
  overflow: hidden;
  margin-top: 110px;
}

.fragrance .kv picture {
  display: block;
  width: 100%;
  height: 100%;
}

.fragrance .kv .kv_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.fragrance .kv .kv_inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
}

.fragrance .kv .kv_title {
  font-family: avenir-next-lt-pro;
  font-weight: 400;
  letter-spacing: 0.18em;
}

/* h1（キービジュアルタイトル）を画像化。サイズはデザインに合わせて調整可 */
.fragrance .kv .kv_title img {
  width: auto;
  height: auto;
  margin: 0 auto;
}

.fragrance .kv .kv_copy {
  margin-top: auto;
  font-weight: 400;
}



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

  /* タイトルは固定ヘッダー（約110px）下、kv_copy は KV 下部（margin-top:auto）に配置 */

  .fragrance .kv .kv_inner {
    padding: 0;
  }

  .fragrance .kv .kv_title {
    font-size: 28px;
    position: absolute;
    top: 6vh;
    display: block;
  }

  .fragrance .kv .kv_title img {
    width: 550px;
    max-width: 80vw;
  }

  .fragrance .kv .kv_copy {
    font-size: 20px;
    position: absolute;
    bottom: 3vh;
    line-height: 1.5;
    display: none;
  }

  p.kv_copy.isSP {
    display: none;
  }
}

@media screen and (max-width: 767px) {

  .fragrance .kv {
    height: calc(100svh - 175px);
    margin-top: 75px;
  }

  .fragrance .kv .kv_inner {
    padding: 10% 15px 15svh;
  }

  .fragrance .kv .kv_title {
    font-size: 20px;
  }

  .fragrance .kv .kv_title img {
    width: 290px;
  }

  .fragrance .kv .kv_copy {
    display: none;
  }

  p.kv_copy.isSP {
    font-size: 14px;
    line-height: 2;
    color: #000;
    text-align: center;
  }

}

/* パララックスで上に乗るメイン
   ・margin-top:100svh で KV 1画面分のスペーサー
   ・上端だけ半透明の白グラデで KV からじんわりイントロへ（XDのグラデ） */
.fragrance .fragrance_main {
  position: relative;
  z-index: 1;
  margin-top: 100svh;
  background: linear-gradient(180deg, #F8F8F800 0%, #F7F7F7F8 200px, #F5F5F5 480px);
}

.kv_title {
  display: none;
}

@media screen and (max-width: 767px) {
  .fragrance .fragrance_main {
    margin-top: 70svh;
  }

  .fragrance_main h1 {
    display: block;
    position: absolute;
    top: -67svh;
    width: 80%;
    left: 10%;
  }
}

/* --------------------------------------------------------------------------
   イントロダクション（テキスト + 正方形画像のflexが2つ）
   -------------------------------------------------------------------------- */

.fragrance .intro {
  position: relative;
}

.fragrance .intro_block {
  display: flex;
  align-items: center;
}

.fragrance .intro_text {
  flex: 1;
  z-index: 1;
}

.fragrance .intro_img {
  flex: 0 0 auto;
}

.fragrance .intro_img img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.fragrance .intro_label {
  font-family: avenir-next-lt-pro;
  font-size: 13px;
  color: #726B64;
  letter-spacing: 0.12em;
  margin: 0 0 25px;
}

.fragrance .intro_body {
  color: #211815;
}

/* イントロ reverse ブロック内の縦積み要素
   （「12種から出会う」ブロック、フレグランス診断バナー、「レイヤリングでアップデート」ブロック） */
.fragrance .intro_block--reverse .intro_text>*+* {
  margin-top: 0;
}

/* フレグランス診断バナー（テキストは画像に内包。XDのバナーサイズ 約255×63 に合わせて縮小） */
.fragrance .diagnosis_banner {
  display: block;
  max-width: 300px;
  margin-top: 24px;
}

.fragrance .diagnosis_banner img {
  width: 100%;
  height: auto;
}

img.monoimg {
  position: absolute;
  width: 170px;
}

img.monoimg.mono1 {
  top: 170px;
  left: 0px;
  display: none;
}

img.monoimg.monoset {
  width: 1280px;
  inset: 0;
  padding-top: 0;
  margin: auto;
  transform: scale(1.1);
}

/* img.monoimg.mono2 {
  top: 550px;
  right: 175px;
}

img.monoimg.mono3 {
  bottom: 202px;
  left: 225px;
} */

@media screen and (min-width: 768px) {
  .fragrance .intro {
    padding: 220px 0 150px;
  }

  .fragrance .intro_block {
    gap: 56px;
  }

  .fragrance .intro_block+.intro_block {
    margin-top: 105px;
    padding-left: 50px;
  }

  .fragrance .intro_block--reverse {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 125px;
  }

  .fragrance .intro_img {
    width: 405px;
  }

  .fragrance .intro_img.second {
    width: 290px;
  }

  .fragrance .intro_body {
    font-size: 14px;
    line-height: 25px;
  }

  .fragrance .intro_block--reverse .intro_text>*+* {
    margin-top: 45px;
  }

  .fragrance a.diagnosis_banner {
    margin: 25px 0 45px !important;
    z-index: 10;
  }
}

@media screen and (max-width: 767px) {
  .fragrance .intro {
    padding: 48px 0 0;
  }

  /* SP : 2つの intro_img を絶対配置でまとめ、テキストを縦に続ける */
  .fragrance .intro .inner {
    display: flex;
    flex-direction: column;
    padding-top: 700px;
    padding-bottom: 110px;
    text-align: center;
  }

  .fragrance .intro_block {
    display: contents;
    position: relative;
  }

  .fragrance .intro_block+.intro_block {
    margin-top: 40px;
  }

  .fragrance .intro_img {
    order: 1;
    margin: 0px;
    position: absolute;
    max-width: 230px;
    top: 290px;
    right: 30px;
  }

  .fragrance .intro_img.second {
    left: 30px;
    right: unset;
    top: 475px;
    width: 180px;
    z-index: -1;
  }

  .fragrance .intro_text {
    order: 2;
  }

  .fragrance .intro_body {
    font-size: 14px;
    margin-bottom: 80px;
    word-break: auto-phrase;
  }

  .fragrance .intro_block--reverse .intro_text>*+* {
    margin-top: 28px;
  }

  .fragrance a.diagnosis_banner {
    margin: -50px auto 80px !important;
  }

  img.monoimg.mono1 {
    bottom: 30px;
    display: block;
    top: unset;
    width: 125px;
    left: 15px;
  }

  img.monoimg.monoset {
    top: -48%;
    margin-left: 15px;
  }

  /* img.monoimg.mono2 {
    top: 550px;
    right: -10%;
  }

  img.monoimg.mono3 {
    top: 200px;
    left: 23%;
  } */
}

/* --------------------------------------------------------------------------
   香りのラインナップ（タブ）
   -------------------------------------------------------------------------- */
section#lineup {
  background: #fff;
  padding-top: 60px;
  padding-bottom: 10px;
}

.fragrance .lineup_container .lineup_head2 {
  text-align: center;
  font-weight: 500;
  margin: 0;
  padding: 0;
}

/* タブリスト（PC：各タブ上にキャッチコピー / 選択タブは塗りつぶし） */
.fragrance .lineup_container .tab_list {
  display: grid;
  text-align: center;
}

.fragrance .lineup_container .tab_item {
  position: relative;
  cursor: pointer;
  margin: 0 -0.5px;
}

/* キャッチコピー（PCのみ表示） */
.fragrance .lineup_container .tab_catch {
  color: #A29F9F;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}

/* タブ本体（セル） */
.fragrance .lineup_container .tab_item .tab_name {
  font-family: avenir-next-lt-pro;
  font-weight: 400;
  font-size: 12px;
  margin: 0;
  letter-spacing: 0.1em;
  background: #f5f4f2;
  color: #211815;
  border: 0.5px solid #707070;
  padding: 10px 4px;
  border-top: none;
  border-bottom: none;
  transition: background .2s ease, color .2s ease;
}

.fragrance .lineup_container .tab_item.active .tab_name {
  background: #9d9c9e;
  color: #fff;
  border-color: #9d9c9e;
}

/* PC : ホバーでドロップダウン */
.fragrance .lineup_container .tab_dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 15;
  background: #f5f4f2;
  border: none;
  border-top: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
  text-align: center;
}

.fragrance .lineup_container .tab_dropdown a {
  display: block;
  font-size: 13px;
  padding: 12px 16px;
  color: #211815;
  border: none;
}

.fragrance .lineup_container .tab_dropdown a+a {
  border-top: 1px solid #f0eeec;
}

.fragrance .lineup_container .tab_dropdown a:hover {
  background: #f7f6f4;
}

/* タブコンテンツ切り替え */
.fragrance .lineup_container .lineup_tab_contents {
  display: none;
}

.fragrance .lineup_container .lineup_tab_contents.isShow {
  display: block;
}

@media screen and (min-width: 768px) {
  .fragrance .lineup_container .lineup_head2 {
    font-size: 20px;
    margin-bottom: 48px;
  }

  .fragrance .lineup_container .tab_list {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
    margin-bottom: 180px;
  }

  .fragrance .lineup_container .tab_catch {
    font-size: 12px;
  }

  .fragrance .lineup_container .tab_item:hover .tab_name {
    background: #9d9c9e;
    color: #fff;
    border-color: #9d9c9e;
  }

  .fragrance .lineup_container .tab_item:hover .tab_dropdown {
    opacity: 1;
    visibility: visible;
  }
}

@media screen and (max-width: 767px) {
  .fragrance .lineup_container .lineup_head2 {
    font-size: 16px;
    margin-bottom: 24px;
  }

  .fragrance .lineup_container .tab_list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 8px;
    row-gap: 20px;
    margin-bottom: 24px;
    display: none;
  }

  .fragrance .lineup_container .tab_catch {
    display: none;
  }

  .fragrance .lineup_container .tab_dropdown {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   商品ブロック（1タブ3商品）
   -------------------------------------------------------------------------- */
.fragrance .lineup_block {
  scroll-margin-top: 80px;
  max-width: 815px;
  margin: 0 auto;
}

.fragrance .lineup_block .item_title_main {
  font-family: avenir-next-lt-pro;
  font-weight: 400;
  margin: 0 0 24px;
  letter-spacing: 0.1em;
  text-align: center;
}

/* 概要グリッド（PC : 画像左 / 情報右） */
.fragrance .item_grid {
  display: grid;
}

.fragrance .item_info .item_tag {
  display: inline-block;
  font-family: avenir-next-lt-pro;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #211815;
  background: #F5F5F5;
  border-radius: 2px;
  padding: 4px 12px;
  margin: 0 0 16px;
}

.fragrance .item_info .item_name {
  font-weight: 400;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #d9d9d9;
  align-items: center;
  display: flex;
  word-break: keep-all;
}

.fragrance .item_info .item_name .item_name_en {
  display: inline-block;
  font-family: avenir-next-lt-pro;
  letter-spacing: 0.08em;
  margin-right: 15px;
  word-break: keep-all;
}

.fragrance .item_info .item_name .item_name_jp {
  display: inline-block;
}

.fragrance .item_info .item_copy {
  font-weight: 500;
}

.fragrance .item_info .item_text {
  color: #211815;
}

/* ボタン（カート＝グレー背景＋矢印 / その下に下線のみの VIEW MORE） */
.fragrance .item_btns {
  display: block;
}

.fragrance .item_btns .btn_cart {
  display: block;
  position: relative;
  text-align: center;
  background: #626161;
  color: #fff;
  font-size: 14px;
  padding: 12px 44px;
  transition: opacity .2s ease;
  width: 100%;
}

.fragrance .item_btns .btn_cart:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

.fragrance .item_btns .btn_cart:hover {
  opacity: .7;
}

.fragrance .item_btns .btn_viewmore {
  display: inline-block;
  margin-top: 13px;
  font-size: 13px;
  color: #211815;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s ease;
  text-transform: lowercase;
}

.fragrance .item_btns .btn_viewmore:hover {
  opacity: .7;
}

/* KEY ELEMENTS（画像 + 呼称 横並び） */
.fragrance .component_block {
  margin-top: 36px;
  text-align: center;
  background: #f8f8f8;
}

.fragrance .component_block .component_head {
  font-family: avenir-next-lt-pro;
  font-size: 11px;
  letter-spacing: 0.66px;
  color: #726B64;
  margin: 0 0 10px;
  padding-top: 10px;
}

.fragrance .component_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  background: #F8F8F8;
  padding: 0 10px 10px;
}

.fragrance .component_item {
  text-align: center;
}

.fragrance .component_item img {
  width: 64px;
  margin: 0 auto;
  border-radius: 50%;
}

.fragrance .component_name {
  font-size: 10px;
}

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

  /* lineup_block 間のボーダーは削除 */
  .fragrance .lineup_block+.lineup_block {
    padding-top: 60px;
    margin-top: 60px;
  }

  .fragrance .lineup_block .item_title_main {
    font-size: 22px;
  }

  .fragrance .item_grid {
    grid-template-columns: 420px 380px;
    gap: 15px;
    align-items: start;
  }

  .fragrance .item_info .item_name .item_name_en {
    font-size: 20px;
  }

  .fragrance .item_info .item_name .item_name_jp {
    font-size: 15px;
    margin-top: 0px;
  }

  .fragrance .item_info .item_copy {
    font-size: 16px;
  }

  .fragrance .item_info .item_text {
    font-size: 13px;
    margin: 12px 0 24px;
  }

  .fragrance .component_item {
    width: 65px;
  }

  .fragrance .component_name {
    margin-top: 10px;
    letter-spacing: 0;
    word-break: keep-all;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .fragrance .lineup_block+.lineup_block {
    padding-top: 0;
    margin-top: 0;
  }

  .fragrance .lineup_block .item_title_main {
    font-size: 23px;
    padding: 0;
  }

  /* item_name を item_img の上に表示するため、item_grid を flex 縦並びにし、
     item_info を display:contents で展開して order で並べ替える。
     表示順：item_name → item_img → item_tag → item_copy … */
  .fragrance .item_grid {
    display: flex;
    flex-direction: column;
  }

  .fragrance .item_grid .item_info {
    display: contents;
  }

  .fragrance .item_info .item_tag {
    display: block;
    width: fit-content;
    margin: 0 auto 10px;
    order: -3;
  }

  .fragrance .item_grid .item_name {
    text-align: center;
    border: none;
    justify-content: center;
    flex-direction: column;
    order: -2;
    margin: 0;
    padding: 0;
  }

  .fragrance .item_info .item_name .item_name_en {
    font-size: 18px;
    margin-right: 0;
  }

  .fragrance .item_info .item_name .item_name_jp {
    font-size: 12px;
    margin-top: 2px;
  }

  .fragrance .item_grid .item_img {
    width: 100%;
    margin: 0 auto 20px;
    order: -1;
  }

  .fragrance .item_info .item_copy {
    font-size: 15px;
    text-align: center;
  }

  .fragrance .item_info .item_text {
    font-size: 13px;
    margin: 15px 0 30px;
    text-align: justify;
  }

  .fragrance .item_btns {
    width: 100%;
    margin: 0 auto;
  }

  .fragrance .item_btns .btn_cart {
    width: 100%;
  }

  .fragrance .item_btns .btn_viewmore {
    display: block;
  }

  /* KEY ELEMENTS：子要素3つを横一列に（gapを詰め、3列がちょうど収まる幅に補正） */
  .fragrance .component_list {
    gap: 12px;
  }

  .fragrance .component_item {
    width: calc((100% - 26px) / 3);
  }

  .fragrance .component_item img {
    max-width: 100%;
  }

  .fragrance .component_name {
    margin-top: 8px;
  }
}

/* --------------------------------------------------------------------------
   サブタブ（タブ切り替え）：香りの特徴 / オススメのレイヤリング / アイテム一覧
   ※ 旧アコーディオン（.item_accordion）をタブUIに変更。デフォルトは「香りの特徴」
   -------------------------------------------------------------------------- */
.fragrance .item_subtab {
  width: 815px;
  margin: 70px auto 75px;
}

.fragrance .subtab_nav {
  display: flex;
  justify-content: center;
  gap: 15px;
  width: 450px;
  margin: 0 auto;
}

.fragrance .subtab_nav .subtab_btn {
  flex: 1;
  background: #fff;
  cursor: pointer;
  position: relative;
  font-family: "Zen Kaku Gothic New", avenir-next-lt-pro;
  font-weight: 500;
  color: #726B64;
  letter-spacing: 0.05em;
  border: 1px solid #A29F9F;
  transition: background .2s ease, color .2s ease;
}

.fragrance .subtab_nav .subtab_btn:hover {
  color: #211815;
}

.fragrance .subtab_nav .subtab_btn.active {
  background: #A29F9F;
  color: #fff;
  border-color: #A29F9F;
}

.fragrance .subtab_panel {
  display: none;
  border: 1px solid #707070;
  margin-top: -1px;
}

.fragrance .subtab_panel.isShow {
  display: block;
}

@media screen and (min-width: 768px) {
  .fragrance .subtab_nav .subtab_btn {
    font-size: 11px;
    padding: 0;
    width: 130px;
    word-break: auto-phrase;
    line-height: 13px;
    height: 42px;
  }

  .fragrance .subtab_panel {
    padding: 45px 80px 45px;
  }
}

@media screen and (max-width: 767px) {
  .fragrance .item_subtab {
    width: calc(100% + 60px);
    margin-bottom: 150px;
    margin-left: -30px;
  }

  .fragrance .subtab_nav {
    width: calc(100% - 60px);
    gap: 0;
  }

  .fragrance .subtab_nav .subtab_btn {
    font-size: 12px;
    padding: 5px;
    line-height: 16px;
    margin: 0 -1px;
  }

  .fragrance .subtab_panel {
    padding: 30px;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
}

/* 香りの特徴（ピラミッド画像1枚 / 左=STORY・右=ピラミッド画像） */
.fragrance .scent_pyramid {
  max-width: 600px;
  margin: 0 auto;
}

.fragrance .scent_story_img {
  width: 100%;
  margin: 0 auto 40px;
  max-width: 212px;
}

.fragrance .scent_story_head,
.scent_pyramid_ttl,
.lineup_lead {
  font-family: avenir-next-lt-pro;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #726B64;
  margin: 0 0 12px;
  text-align: center;
}

.scent_pyramid_ttl {
  margin-bottom: -24px;
  position: relative;
  z-index: 1;
}

.fragrance .scent_story_copy {
  font-weight: 500;
  margin: 0 0 15px;
  font-size: 15px;
  text-align: center;
}

.fragrance .scent_story_text {
  color: #211815;
  font-size: 13px;
}

@media screen and (min-width: 768px) {
  .fragrance .scent_detail {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .fragrance .scent_detail .scent_story {
    flex: 1;
    max-width: 315px;
  }

  .fragrance .scent_detail .scent_pyramid {
    flex: 0 0 48%;
    max-width: 330px;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media screen and (max-width: 767px) {
  .fragrance .scent_story_text {
    text-align: center;
  }

  .fragrance .scent_detail .scent_story {
    margin-bottom: 28px;
  }
}

/* オススメのレイヤリング */
.fragrance .layering_lead {
  text-align: center;
  margin: 0 0 24px;
}

.fragrance .layering_list {
  display: grid;
}

.fragrance .layering_item .layering_thumb {
  display: block;
}

.fragrance .layering_item .layering_name {
  margin: 12px 0 12px;
  text-align: center;
  font-weight: 500;
}

/* 2商品分の「かごに入れる」ボタンを横並び（各ボタンの上に商品名） */
.fragrance .layering_carts {
  display: flex;
  gap: 8px;
}

.fragrance .layering_cart {
  flex: 1;
  min-width: 0;
}

.fragrance .layering_cart_name {
  text-align: center;
  margin: 0 0 6px;
  font-size: 11px;
  color: #211815;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fragrance .layering_item .btn_cart {
  display: inline-block;
  text-align: center;
  font-size: 11px;
  padding: 3px 11px;
  background: #626161;
  color: #fff;
  transition: opacity .2s ease;
}

.fragrance .layering_item .btn_cart:hover {
  opacity: .7;
}

/* ボタン下の説明文 */
.fragrance .layering_desc {
  margin: 12px 0 0;
}

/* レイヤリング：左右それぞれ別商品の画像（item_img共有）＋各商品にカート */
.fragrance .layering_set {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: center;
}

.fragrance .layering_set .layering_cart {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.fragrance .layering_set .layering_thumb {
  display: block;
}

/* サムネイル下のアイテム名 */
.fragrance .layering_item_name {
  margin: 10px 0;
  line-height: 1.5;
}

/* 2商品の間の掛け合わせ記号「×」 */
.fragrance .layering_set .layering_cross {
  flex: 0 0 auto;
  align-self: center;
  font-family: avenir-next-lt-pro;
  color: #211815;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
}

/* layering_set 下のキャッチコピー */
.fragrance .layering_catch {
  margin: 16px 0 0;
}

@media screen and (min-width: 768px) {
  .fragrance .layering_lead {
    font-size: 14px;
  }

  .fragrance .layering_list {
    /* grid-template-columns: repeat(2, 1fr); */
    column-gap: 40px;
    row-gap: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .layering_item {
    width: calc(50% - 20px);
  }

  .fragrance .layering_item .layering_name {
    font-size: 14px;
  }

  .fragrance .layering_desc {
    font-size: 12px;
  }

  .fragrance .layering_item_name {
    font-size: 13px;
  }

  .fragrance .layering_catch {
    font-size: 12px;
    line-height: 18px;
  }
}

@media screen and (max-width: 767px) {

  .fragrance .layering_item {
    background: #F8F8F8;
    padding: 30px;
  }

  .fragrance .layering_lead {
    font-size: 13px;
    word-break: auto-phrase;
    line-height: 22px;
  }

  .fragrance .layering_list {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .fragrance .layering_item .layering_name {
    font-size: 14px;
    margin-top: 0;
  }

  .fragrance .layering_desc {
    font-size: 11px;
  }

  .fragrance .layering_item_name {
    font-size: 12px;
  }

  .fragrance .layering_catch {
    font-size: 12px;
  }
}

/* アイテム一覧 */
.fragrance .lineup_list {
  display: flex;
}

.fragrance .lineup_list .lineup_name {
  margin: 5px 0;
  text-align: center;
  letter-spacing: -0.01rem;
}

.fragrance .lineup_list .lineup_price {
  text-align: center;
  color: #726B64;
}

@media screen and (min-width: 768px) {
  .fragrance .lineup_list {
    gap: calc((100% - 620px) / 3);
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 14px;
  }

  .fragrance .lineup_list a {
    width: 155px;
  }

  .fragrance .lineup_list .lineup_name {
    font-size: 11px;
    line-height: 16px;
    word-break: auto-phrase;
  }

  .fragrance .lineup_list .lineup_price {
    font-size: 12px;
  }
}

@media screen and (max-width: 767px) {
  #lineup {
    margin-bottom: -10px;
  }

  .fragrance .lineup_list {
    /* grid-template-columns: repeat(2, 1fr); */
    /* column-gap: 15px; */
    gap: 20px 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .fragrance .lineup_list a {

    width: calc(50% - 10px);

  }

  .fragrance .lineup_list .lineup_name {
    font-size: 12px;
    word-break: auto-phrase;
    line-height: 150%;
  }

  .fragrance .lineup_list .lineup_price {
    font-size: 10px;
  }
}

/* --------------------------------------------------------------------------
   SP用 追従タブメニュー（画面下部固定 / タップで展開）
   -------------------------------------------------------------------------- */
.fragrance .sp_tab_nav {
  display: none;
}

.fragrance .sp_tab_nav .sp_tab_panel {
  background: #fff;
  border-top: 1px solid #e6e6e6;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.fragrance .sp_tab_nav .sp_tab_panel.isOpen {
  max-height: 60vh;
  overflow-y: auto;
}

.fragrance .sp_tab_nav .sp_tab_panel a {
  display: block;
  font-size: 13px;
  padding: 14px 20px;
  border-bottom: 1px solid #f0eeec;
}

.fragrance .sp_tab_nav .sp_tab_bar {
  display: flex;
  /* z-index: 100; */
}

.fragrance .sp_tab_nav .sp_tab_bar .sp_tab_btn {
  flex: 1;
  text-align: center;
  padding: 14px 4px;
  font-size: 12px;
  font-family: avenir-next-lt-pro;
  letter-spacing: 0.08em;
  background: #454545;
  color: #fff;
  border: none;
  cursor: pointer;
}

.fragrance .sp_tab_nav .sp_tab_bar .sp_tab_btn+.sp_tab_btn {
  border-left: 1px solid rgba(255, 255, 255, .4);
  background: #464646;
}

.fragrance .sp_tab_nav .sp_tab_bar .sp_tab_btn.active {
  background: #A29F9F;
}

@media screen and (max-width: 767px) {
  .fragrance .sp_tab_nav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
  }

  /* ページトップへ */
  .block-page-totop {
    margin-bottom: 64px;
  }
}

/* --------------------------------------------------------------------------
   パララックスKV（position:fixed）対策
   固定KVがフッターの後ろからはみ出す問題の対策。フッターを前面に重ねる。
   ※ KVは .wrapper(白)内にあり z-index を下げると消えるため、フッター側を持ち上げる
   -------------------------------------------------------------------------- */
.pane-footer {
  position: relative;
  z-index: 1;
  background: #fff;
  margin-top: -60px;
  padding-top: 60px;
}

@media screen and (max-width: 767px) {
  .pane-footer {
    z-index: 0;
  }
}

/* ==========================================================================
   SP用 追従タブメニュー：展開パネル（.sp_tab_panel.isOpen）
   XD「コンポーネント 85 – 6」準拠 / 375px基準

   ▼ 適用方法
   fragrance.css 内の「SP用 追従タブメニュー（画面下部固定 / タップで展開）」
   ブロックのうち、下記3つのルールを削除し、このファイルの内容に置き換えてください。
     ・.fragrance .sp_tab_nav .sp_tab_panel
     ・.fragrance .sp_tab_nav .sp_tab_panel.isOpen
     ・.fragrance .sp_tab_nav .sp_tab_panel a
   .sp_tab_nav / .sp_tab_bar / .sp_tab_btn 系および末尾のメディアクエリは変更不要です。
   ========================================================================== */

.fragrance .sp_tab_nav .sp_tab_panel {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height .3s ease, visibility 0s linear .3s;
}

/* 背景：#EDEDED 75% ＋ 背景のぼかし36 / 明るさ15 ＋ ドロップシャドウ 0 / -3 / 15 / 23% */
.fragrance .sp_tab_nav .sp_tab_panel.isOpen {
  max-height: 200px;
  visibility: visible;
  background: #EDEDED;
  -webkit-backdrop-filter: blur(36px) brightness(1.15);
  backdrop-filter: blur(36px) brightness(1.15);
  box-shadow: 0 -3px 15px rgba(0, 0, 0, .23);
  transition: max-height .3s ease, visibility 0s linear 0s;
  margin-bottom: -3px;
}

/* backdrop-filter 非対応ブラウザ向けフォールバック */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .fragrance .sp_tab_nav .sp_tab_panel.isOpen {
    background: #ededed;
  }
}

/* 高さ内訳：13 ＋ 17（タイトル）＋ 4 ＋ 70（画像）＋ 16（名称）＋ 16 ＝ 136px */
.fragrance .sp_tab_nav .sp_tab_panel_inner {
  position: relative;
  padding: 13px 0 16px;
}

/* タイトル：Zen Kaku Gothic New Regular 12px / letter-spacing 0.36px / #2D2926 */
.fragrance .sp_tab_nav .sp_tab_panel_ttl {
  margin: 0;
  font-size: 12px;
  line-height: 17px;
  letter-spacing: .03em;
  text-align: center;
  color: #2D2926;
}

/* 横並び3リンク：画像70px / 間隔29.75px / 左右余白52.75px（375px基準を％で指定） */
.fragrance .sp_tab_nav .sp_tab_panel_list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 7.93%;
  padding-top: 4px;
}

.fragrance .sp_tab_nav .sp_tab_panel_list a {
  display: block;
  width: 18.67%;
  padding: 0;
  border: none;
  font-size: 0;
  text-align: center;
  text-decoration: none;
}

.fragrance .sp_tab_nav .sp_tab_panel_list a img {
  display: block;
  width: 100%;
  height: auto;
}

/* 名称：Zen Kaku Gothic New Regular 11px / letter-spacing -0.55px / #211815
   XDと同様に文字ボックス幅120pxを確保し、画像幅（70px）に対して中央揃えではみ出させる */
.fragrance .sp_tab_nav .sp_tab_panel_name {
  display: block;
  width: 120px;
  margin-left: calc((100% - 120px) / 2);
  margin-right: calc((100% - 120px) / 2);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: -.05em;
  color: #211815;
}

/* 閉じるボタン：アイコン13px角（線0.7px / #464646）を top:17px / right:18px に配置。
   タップ領域として40px角を確保している */
.fragrance .sp_tab_nav .sp_tab_close {
  position: absolute;
  top: 3.5px;
  right: 4.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.fragrance .sp_tab_nav .sp_tab_close svg {
  width: 13px;
  height: 13px;
  overflow: visible;
  pointer-events: none;
}

.fragrance .sp_tab_nav .sp_tab_close svg line {
  stroke: #464646;
  stroke-width: .7;
}