@charset "UTF-8";
/*
 * esience 2026 / Global Layer
 * 全 2026 ページ共通のヘッダー / フッター / フローティング LINE / SP 非表示宣言。
 *
 * 旧: これらは front-page.css に閉じ込められており TOP のみ enqueue されていたため、
 *     商品詳細(single-shohin-2026)ではヘッダ/フッタ PC スタイルが当たらない潜在バグがあった。
 *     front-page.css から切り出し、functions.php で全 2026 ページ共通 enqueue する。
 *
 * Downloads(brand_pc.html) デザインに合わせた差分:
 *   - .site-header__inner の横 padding を 80px（Downloads: padding 40px 80px）
 *   - .site-header__actions の gap を 30px（Downloads: header-icons gap 30px）
 *   - .site-header.is-scrolled に backdrop-filter: blur(6px)（Downloads: header.scrolled）
 *   - 旧 body:not(.home) の「赤固定 + padding-top 110px」は移設しない
 *     → home/商品/BRAND を統一して「透明初期ヘッダ + FV がヘッダ下に潜る + scroll で赤」に。
 *       _global.css は $is_any_2026 時のみ enqueue されるため旧併存ページには影響しない。
 *
 * 依存: _base.css（トークン）。読込順: _base → _global → [page css] → _sp（最後）
 */

/* =========================================================
   Site Header（fixed・スクロール時に背景切替）
   Figma node: 7451:6967
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  height: var(--header-height);
  background: transparent;        /* スクロール前後とも赤固定（フッターと同色） */
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  pointer-events: none;                   /* 中身要素だけ pointer-events 戻す */
}

/* スクロールした瞬間に赤塗り＋影＋blur（Downloads: header.scrolled） */
.site-header.is-scrolled {
  background: rgb(186 0 22);
}

.has-2026-template .site-header.is-scrolled {
  background: rgb(186 0 22);
}

/* ---------------------------------------------------------
   商品詳細（single-shohin-2026）専用のヘッダー扱い
   TOP/BRAND は赤 FV がヘッダー下に潜る「透明初期→scroll赤」デザイン。
   一方 商品詳細は FV/パンくずが白背景のため、透明ヘッダーだとナビが白地に
   溶け、さらに body padding-top が無いと固定ヘッダーが本文（白パンくず）に
   重なる。よってこのページだけ:
     - スクロール前から赤背景固定（旧 body:not(.home) の意図を商品限定で再現）
     - 本文を header 高さ分オフセット
   body.is-shohin-2026 は functions.php の body_class フィルタが付与。
   TOP/BRAND には付かないので影響しない。
   --------------------------------------------------------- */
body.is-shohin-2026,
body.is-voice-posts-2026,
body.is-news-archive-2026,
body.is-news-single-2026,
body.is-info-2026 {
  padding-top: var(--header-height);
}

body.is-shohin-2026 .site-header,
body.is-voice-posts-2026 .site-header,
body.is-news-archive-2026 .site-header,
body.is-news-single-2026 .site-header,
body.is-info-2026 .site-header {
  background: var(--color-accent);
}

/* ---------------------------------------------------------
   SPECIAL INTERVIEW（page-interview.php）のヘッダー扱い
   ユーザー指示（2026-05-19）により BRAND ページと同一挙動に統一:
     「最初は背景なし（透明）→ スクロールで赤背景」。
   = 上記 .site-header / .site-header.is-scrolled のデフォルト挙動そのもの
     （header-scroll.js が全2026ページで is-scrolled をトグル）。
   よって商品詳細(is-shohin-2026)のような赤固定・本文オフセットは
   INTERVIEW には適用しない（旧 body.is-interview-2026 の上書きは撤去）。
   FV は BRAND の hero と同様、透明ヘッダーの下に潜る（本文オフセット無し）。
   is-interview-2026 クラス自体は _sp.css の SP スコープ用に残置。
   tasks/decisions/2026-05-19.md 判断C（撤回）参照。
   --------------------------------------------------------- */

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;                                /* site-nav の gap と同値: ロゴ→TOP の間隔とメニュー項目間を揃える（ユーザー指示 2026-05-25） */
  width: 100%;
  max-width: var(--frame-pc);
  height: 100%;
  margin: 0 auto;
  padding: 0 80px;                        /* Downloads: header .inner padding 40px 80px（縦は flex 中央で吸収） */
  pointer-events: auto;
  box-sizing: border-box;
}

/* 1400 を超えるビューポートでは中央寄せで余白、それ以下では viewport いっぱい */
@media (min-width: 798px) {
  .site-header__inner {
    width: min(100%, var(--frame-pc));
  }
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.site-header__logo img {
  display: block;
  width: 129px;
  height: 22px;
}

.site-header__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-start;              /* 中央寄せ → 左寄せ、ロゴ側に寄せる（ユーザー指示 2026-05-25） */
}

.site-nav {
  display: flex;
  gap: 56px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__item a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-en-product);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 3.2px;
  color: var(--color-text-on-accent);     /* FV赤 / scroll赤 どちらの背景でも可視 */
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.site-nav__item a:hover,
.site-nav__item a:focus-visible {
  opacity: 0.7;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 30px;                              /* Downloads: header-icons gap 30px（旧 16px） */
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.site-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-text-on-accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.site-header__action:hover,
.site-header__action:focus-visible {
  opacity: 0.7;
}

.site-header__action-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
}

.site-header__action-icon--cart {
  width: 24px;
  height: 26px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26' fill='none'><path d='M7.25 26c-.58 0-1.06-.2-1.46-.6-.39-.41-.59-.9-.59-1.49 0-.59.2-1.09.59-1.49.4-.4.88-.6 1.46-.6.58 0 1.06.2 1.46.6.39.41.59.9.59 1.49 0 .59-.2 1.09-.59 1.49-.4.4-.88.6-1.46.6zm12.82 0c-.58 0-1.06-.2-1.46-.6-.39-.41-.59-.9-.59-1.49 0-.59.2-1.09.59-1.49.4-.4.88-.6 1.46-.6.58 0 1.06.2 1.46.6.39.41.59.9.59 1.49 0 .59-.2 1.09-.59 1.49-.4.4-.88.6-1.46.6zM5.3 4.19l3.65 7.84h9.06c.16 0 .3-.04.42-.12.12-.08.23-.19.32-.34l3.57-6.63c.1-.2.11-.37.02-.52-.09-.15-.24-.23-.45-.23H5.3zm-.67-1.4h17.79c.59 0 1.04.25 1.34.74.3.5.32 1.01.05 1.53l-3.9 7.27c-.2.34-.46.61-.77.8-.32.19-.67.29-1.05.29H8.33l-1.66 3.12c-.14.21-.14.45.01.7.13.25.33.38.59.38h14.87v1.4H7.25c-.8 0-1.39-.34-1.78-1.03-.39-.69-.4-1.38-.03-2.07l2.05-3.74L2.47 1.4H0V0h3.34l1.3 2.79z' fill='black'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26' fill='none'><path d='M7.25 26c-.58 0-1.06-.2-1.46-.6-.39-.41-.59-.9-.59-1.49 0-.59.2-1.09.59-1.49.4-.4.88-.6 1.46-.6.58 0 1.06.2 1.46.6.39.41.59.9.59 1.49 0 .59-.2 1.09-.59 1.49-.4.4-.88.6-1.46.6zm12.82 0c-.58 0-1.06-.2-1.46-.6-.39-.41-.59-.9-.59-1.49 0-.59.2-1.09.59-1.49.4-.4.88-.6 1.46-.6.58 0 1.06.2 1.46.6.39.41.59.9.59 1.49 0 .59-.2 1.09-.59 1.49-.4.4-.88.6-1.46.6zM5.3 4.19l3.65 7.84h9.06c.16 0 .3-.04.42-.12.12-.08.23-.19.32-.34l3.57-6.63c.1-.2.11-.37.02-.52-.09-.15-.24-.23-.45-.23H5.3zm-.67-1.4h17.79c.59 0 1.04.25 1.34.74.3.5.32 1.01.05 1.53l-3.9 7.27c-.2.34-.46.61-.77.8-.32.19-.67.29-1.05.29H8.33l-1.66 3.12c-.14.21-.14.45.01.7.13.25.33.38.59.38h14.87v1.4H7.25c-.8 0-1.39-.34-1.78-1.03-.39-.69-.4-1.38-.03-2.07l2.05-3.74L2.47 1.4H0V0h3.34l1.3 2.79z' fill='black'/></svg>") center/contain no-repeat;
}

.site-header__action-icon--user {
  width: 20px;
  height: 24px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24' fill='none'><circle cx='10' cy='6' r='6' fill='black'/><path d='M0 23c0-5.52 4.48-10 10-10s10 4.48 10 10v1H0v-1z' fill='black'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24' fill='none'><circle cx='10' cy='6' r='6' fill='black'/><path d='M0 23c0-5.52 4.48-10 10-10s10 4.48 10 10v1H0v-1z' fill='black'/></svg>") center/contain no-repeat;
}

/* =========================================================
   Site Footer（共通: footer.php → site-footer.php）
   Figma node: 7142:739
   ※ site-footer__top が SUPPORT「お困りの方はこちら」も兼ねる（全ページ共通）
   ========================================================= */
.site-footer {
  width: 100%;
  background: var(--color-white);
  z-index: 9960;
  display: block;
  position: sticky;
}

/* （PC 個別指定はファイル末尾のフッター定義の後に移動。
    元の `.site-footer__xxx` 定義の後ろに置くことで、余計な scope なしで上書きが効く） */

.site-footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  /* SUPPORT「お困りの方はこちら」の内側も全ページ共通の 1280px 枠に中央寄せ
     （パンくず/本文と同じ --content-max。背景の白は .site-footer 側で全幅）。
     ユーザー指示 2026-05-19。
     box-sizing:border-box: footer は <main> 外で .site-main * リセットが効かず
     default content-box → max-width:1280 + padding が外に乗り実 width 1400 に
     なる事象を修正（ユーザー指摘 2026-05-24）。 */
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding: 120px 0px 120px;   /* 上下 120 / 左右 0（ユーザー指示 2026-05-31）*/
  box-sizing: border-box;
}

.site-footer__heading {
  margin: 0;
  font-family: var(--font-jp-base);
  font-weight: 700;
  font-size: 24.3px;
  letter-spacing: 0.09em;
  color: var(--color-text);
  text-align: center;
}

.site-footer__cta-grid {
  display: flex;
  gap: 32.4px;
  justify-content: center;
}

.site-footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 21.6px;
  width: 320.4px;
  height: 144px;
  border: var(--border-cta);
  border-radius: var(--radius-card);
  background: var(--color-white);
  color: var(--color-accent);
  font-family: var(--font-jp-base);
  font-weight: 700;
  font-size: 28.8px;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.site-footer-cta:hover,
.site-footer-cta:focus-visible {
  opacity: 0.8;
}

.site-footer-cta__icon {
  width: 36px;
  height: 36px;
  background-color: currentColor;
}

.site-footer-cta__icon--phone {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.05-.24 11.36 11.36 0 003.55.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.55 1 1 0 01-.25 1.05z' fill='black'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.05-.24 11.36 11.36 0 003.55.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.55 1 1 0 01-.25 1.05z' fill='black'/></svg>") center/contain no-repeat;
}

.site-footer-cta__icon--user {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z' fill='black'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z' fill='black'/></svg>") center/contain no-repeat;
}

.site-footer-cta__arrow {
  width: 18px;
  height: 9px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' fill='none'><path d='M0 5h18M14 1l5 4-5 4' stroke='black' stroke-width='1.5'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' fill='none'><path d='M0 5h18M14 1l5 4-5 4' stroke='black' stroke-width='1.5'/></svg>") center/contain no-repeat;
}

/* お問い合わせボタン: PC は Frame 803.svg のデザインをそのまま画像表示。
   SP（<=797px）は従来の icon/label/arrow を使う（_sp.css の .site-footer-cta SP 専用
   スタイルが効く）。ユーザー指示 2026-05-22。 */
.site-footer-cta__svg {
  display: none;          /* 既定（SP含む）は非表示。PC のみ下の media で表示 */
}

@media (min-width: 798px) {
  .site-footer-cta--svg {
    border: none;         /* SVG 自体が赤枠を持つので二重枠を避ける */
    padding: 0;
    gap: 0;
    height: auto;         /* SVG の 460:160 比に追従 */
  }
  /* PC では HTML の icon/label/arrow は隠し、SVG だけ表示 */
  .site-footer-cta--svg .site-footer-cta__icon,
  .site-footer-cta--svg .site-footer-cta__label,
  .site-footer-cta--svg .site-footer-cta__arrow {
    display: none;
  }
  .site-footer-cta--svg .site-footer-cta__svg {
    display: block;
    width: 100%;
    height: auto;
  }
}

.site-footer__bottom {
  width: 100%;
  background: var(--color-accent);
  color: var(--color-base);
  padding: 0;
}

.site-footer__bottom-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "logo sns"
    "links links"
    "copy copy";
  column-gap: 100px;
  row-gap: 40px;
  align-items: center;
  /* フッター下部(ロゴ/SNS/リンク/コピー)も共通 1280px 枠に統一
     （旧 --frame-pc(1400)+--side-pad → --content-max/--content-gutter）。
     ユーザー指示 2026-05-19。背景の赤は .site-footer__bottom 側で全幅。
     box-sizing:border-box: ユーザー指摘 2026-05-24（.site-footer__top と同根）。 */
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 96px var(--content-gutter) 80px;
  box-sizing: border-box;
}

.site-footer__logo { grid-area: logo; }
.site-footer__sns { grid-area: sns; }
.site-footer__links { grid-area: links; }
.site-footer__copy { grid-area: copy; }

/* SP フッター: フリーダイヤル混雑時間帯グラフ（ユーザー指示 2026-06-01）。
   ロゴと SNS の間に全幅・中央寄せで表示。PC は非表示。 */
.site-footer__graph {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 8px auto 16px;
  justify-self: center;
}
@media (min-width: 798px) {
  .site-footer__graph { display: none; }
}

.site-footer__logo img {
  display: block;
  width: 130px;
  filter: brightness(0) invert(1);
}

.site-footer__sns {
  display: flex;
  gap: 28.8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__sns a {
  display: inline-flex;
  width: 31px;
  height: 31px;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

.site-footer__sns-icon {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.site-footer__sns-icon--x {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z' fill='black'/></svg>");
}

.site-footer__sns-icon--instagram {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2a5 5 0 00-5 5v10a5 5 0 005 5h10a5 5 0 005-5V7a5 5 0 00-5-5H7zm10 2a3 3 0 013 3v10a3 3 0 01-3 3H7a3 3 0 01-3-3V7a3 3 0 013-3h10zm-5 3a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6zm5.5-3a1 1 0 100 2 1 1 0 000-2z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2a5 5 0 00-5 5v10a5 5 0 005 5h10a5 5 0 005-5V7a5 5 0 00-5-5H7zm10 2a3 3 0 013 3v10a3 3 0 01-3 3H7a3 3 0 01-3-3V7a3 3 0 013-3h10zm-5 3a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6zm5.5-3a1 1 0 100 2 1 1 0 000-2z' fill='black'/></svg>");
}

.site-footer__sns-icon--line {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314' fill='black'/></svg>");
}

.site-footer__links {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__links a {
  font-family: var(--font-jp-base);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--color-base);
  text-decoration: none;
}

.site-footer__copy {
  margin: 0;
  font-family: var(--font-jp-special);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--color-base);
}

/* =========================================================
   Floating LINE button
   Figma node: 7451:6961
   ========================================================= */
.floating-line {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9970;
}


.floating-line__link {
  display: block;
  width: 96px;
  height: 96px;
  line-height: 0;
  transition: transform 0.2s ease;
}

.floating-line__link:hover,
.floating-line__link:focus-visible {
  transform: translateY(-2px);
}

.floating-line__img {
  display: block;
  width: 100%;
  height: 100%;
}

/* =========================================================
   SP 用の要素を PC では完全非表示（HTML 上は維持）
   SP(<=797px) では _sp.css が display:flex !important で復活させる
   ========================================================= */
.site-header__sp-left,
.site-mobile-nav,
.site-header__hamburger {
  display: none;
}

/* PC/SP 共通: BANNER セクションを一旦非表示 (ユーザー指示 2026-05-24) */
.section-banner { display: none !important; }

/* PC/SP 共通: MEDIA / CONTENTS セクションを一旦非表示 (ユーザー指示 2026-05-24) */
.section-media, .section-contents { display: none !important; }

/* =========================================================
   Fade-in（BRAND / INTERVIEW / TOP 共通: IntersectionObserver で .visible 付与）
   旧: page-brand.css にあったため TOP に届かなかった (ユーザー指示 2026-05-24)
   ========================================================= */
.has-2026-template .fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.has-2026-template .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   LINE UP セクション（TOP / INTERVIEW 共通テンプレ）
   ユーザー指示 2026-05-25: INTERVIEW の現状を共通として採用。
   SP は _sp.css の .has-2026-template .lineup-card 系で既に共通適用済。
   ========================================================= */
.has-2026-template .section-lineup {
  display: flex;
  flex-direction: column;
  gap: 52px;
  padding: 0;
  width: 100%;
}
.has-2026-template .lineup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.has-2026-template .lineup-card {
  position: relative;
  width: 100%;
  aspect-ratio: 424 / 380;
  height: auto;
  background: var(--color-base);
  border: var(--border-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.has-2026-template .lineup-card .tag {
  display: none;                              /* PC/SP どちらでも非表示（ユーザー指示 2026-05-26）*/
  position: absolute;
  top: 18%;
  left: 34%;
  z-index: 2;
}
.has-2026-template .lineup-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
.has-2026-template .lineup-card__link {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 100%;
  padding: 16px 16px 16px 0;
  color: inherit;
  text-decoration: none;
}
.has-2026-template .lineup-card__visual {
  flex: 0 0 120px;
  width: 120px;
  height: 240px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.has-2026-template .lineup-card__visual img {
  width: auto;
  height: 100%;
  object-fit: contain;
  filter: none;                       /* 影を消す（ユーザー指示 2026-05-28、PC/SP 共通） */
  margin-top: 0px;
}
.has-2026-template .lineup-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-sm);
  min-width: 0;
}
.has-2026-template .lineup-card__body .container-list {
  margin-top: 0;
}
.has-2026-template .lineup-card__name-en {
  margin: 0;
  font-family: var(--font-en-product);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 2.88px;
  color: var(--color-text);
  word-break: break-word;
}
.has-2026-template .lineup-card__name-jp {
  margin: 0;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 1.92px;
  color: var(--color-text-sub);
}
.has-2026-template .lineup-card__volume {
  margin: 0;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 1.92px;
  color: var(--color-text-sub);
}

/* PC 用フッターサイズ調整は各 `.site-footer__xxx` の元定義（上のブロック）に直接反映済
   （SP 用は _sp.css の `.has-2026-template .site-footer__xxx` で別途上書きされるため、
    元定義を変えても SP には影響しない）。ユーザー指示 2026-05-28。 */

/* PC: LINEUP カードのサイズ・余白。全 2026 ページ共通（TOP / INTERVIEW / 商品詳細）。
   ユーザー指示 2026-05-29。 */
@media (min-width: 798px) {
  .has-2026-template .lineup-card {
    width: 398px;
    height: 356px;
  }
  .has-2026-template .lineup-card__link {
    padding: 20px;
  }
  .has-2026-template .lineup-card__visual {
    flex: 13 0 120px;
  }
  .has-2026-template .lineup-card__visual img {
    width: 117px;
    height: 236px;
    max-width: none;
    object-fit: contain;
  }
  .has-2026-template .lineup-card__body {
    width: 187px;
  }
}