@charset "UTF-8";
/*
 * esience-2026 / front-page styles
 * 各セクションのスタイルは D-4 以降で順次追記する（Hero → PRODUCT → LINE UP → ...）
 */

/* =========================================================
   1. Hero
   Figma node: 7451:6796
   Spec: 30.product/esience-redesign/figma-spec/setsuko-pc.md
   ========================================================= */
.section-hero {
  position: relative;
  width: 100%;
  height: 923px;
  padding: 0 var(--section-pad-x);
  overflow: hidden;
  background-color: transparent;
}

/* PC: SP 用の要素を完全非表示（HTML上は維持）
   ※ .site-header__sp-left / .site-mobile-nav / .site-header__hamburger は
     _global.css へ移設。ここは front 固有の .section-hero__btn-below のみ */
.section-hero__btn-below {
  display: none;
}

.section-hero__bg {
  position: fixed;
  top: 0;
  left: 0;
  /* 旧: 固定 1672x1015 + left:-160px。画面幅がこれを超えると画像が伸びず
     右側に余白/赤地（環境により繰り返しに見える）。hero 全体に 100% で
     cover 表示するよう変更（ユーザー指示 2026-05-22: PCトップ画像を100%表示）。 */
  /* inset removed: fixed + top/left/width/height */
  width: 100%;
  height: 923px;
  background-image: url("../img/front/2026/top1.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
  z-index: 0;
  pointer-events: none;
}

.section-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
}

.section-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  width: 388px;
  padding: 40px;
  box-sizing: content-box;
}

/* Logo block
   Figma: ESIENCE eyebrow → 24px → 最新を、最深へ → tight → 美しさに、妥協はいらない */
.hero-logo {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 388px;
}

.hero-logo__mark {
  width: 148px;
  height: 22px;
  display: block;
}

.hero-logo__title {
  margin: 0;
  font-family: var(--font-jp-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.2;                       /* 旧 16px は破綻していたため修正 */
  letter-spacing: 7.68px;
  color: var(--color-base);
  font-feature-settings: "pwid", "halt";
}

.hero-logo__sub {
  margin: 0;
  font-family: var(--font-jp-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;                       /* 旧 40px は overshoot だったため修正 */
  letter-spacing: 1.6px;
  color: var(--color-base);
  margin-top: -8px;                        /* タイトルとサブを近接させる Figma 通り */
}

/* Btn (white) — special page
   Figma: 白枠（細線）/ 白文字 / 文字は中央、矢印 `›` は右側に絶対配置
   ※ _base.css の .site-main a { color: inherit } に勝つため specificity を上げる */
.site-main a.btn--white,
.btn--white {
  position: relative;                  /* 矢印 absolute 配置の基点 */
  display: inline-flex;
  align-items: center;
  justify-content: center;             /* 文字をセンタリング */
  width: 280px;
  height: 80px;
  padding: 0 28px;
  border: 1px solid var(--color-white);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-en-btn);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 3.6px;
  text-align: center;
  text-transform: lowercase;
  text-decoration: none;
  transition: opacity 0.2s ease;
  box-sizing: border-box;
}

.site-main a.btn--white .btn__label,
.btn--white .btn__label {
  color: var(--color-white);
}

.btn--white .btn__arrow {
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 12px;
  height: 20px;
  background-color: var(--color-white);
  /* Figma: chevron `›` のみ（水平線なし） */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20' fill='none'><path d='M2 2l8 8-8 8' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20' fill='none'><path d='M2 2l8 8-8 8' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

.btn--white:hover,
.btn--white:focus-visible {
  opacity: 0.75;
}

/* =========================================================
   Common: section eyebrow heading
   全セクション共通の英字見出し
   ========================================================= */
.section-eyebrow {
  margin: 0;
  font-family: var(--font-en-heading);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 5.12px;
  text-transform: uppercase;
  color: var(--color-accent);
  text-align: left;
  align-self: flex-start;             /* flex 親が center 寄せでも左端固定 */
  width: 100%;
}

/* =========================================================
   Common: Container（カテゴリラベル）
   Figma node: 7254:6925〜7254:6936
   ========================================================= */
.container-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.container {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 3px 16px;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.1504px;
}

.container--white {
  background: var(--color-gray-base);
  color: var(--color-text-sub);
  border: 0.5px solid #f2f2f2;;
}

.container--red {
  background: var(--color-base-dark);
  color: var(--color-accent);
  border: 0.5px solid var(--color-accent);
}

/* =========================================================
   Common: Btn (clear)
   Figma node: 7142:859
   ========================================================= */
/* Btn (clear / outlined) — view more 等
   Figma: 白背景・赤枠・赤文字 / 文字は中央、矢印 `›` は右側に絶対配置
   ※ _base.css の .site-main a { color: inherit } に勝つため specificity を上げる */
.site-main a.btn--clear,
.btn--clear {
  position: relative;                       /* 矢印 absolute 配置の基点 */
  display: inline-flex;
  align-items: center;
  justify-content: center;                  /* 文字をセンタリング */
  width: 240px;
  height: 60px;
  padding: 0 24px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--color-accent);
  font-family: var(--font-en-btn);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 2.56px;
  text-align: center;
  text-transform: lowercase;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  box-sizing: border-box;
}

.site-main a.btn--clear .btn__label,
.btn--clear .btn__label {
  color: var(--color-accent);
}

.btn--clear .btn__arrow {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: 10px;
  height: 16px;
  background-color: var(--color-accent);
  /* Figma: chevron `›` のみ（水平線なし） */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' fill='none'><path d='M1.5 1.5L8 8l-6.5 6.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' fill='none'><path d='M1.5 1.5L8 8l-6.5 6.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

.site-main a.btn--clear:hover,
.site-main a.btn--clear:focus-visible,
.btn--clear:hover,
.btn--clear:focus-visible {
  background: var(--color-accent);
  color: var(--color-white);
}

.site-main a.btn--clear:hover .btn__label,
.site-main a.btn--clear:focus-visible .btn__label,
.btn--clear:hover .btn__label,
.btn--clear:focus-visible .btn__label {
  color: var(--color-white);
}

.site-main a.btn--clear:hover .btn__arrow,
.site-main a.btn--clear:focus-visible .btn__arrow,
.btn--clear:hover .btn__arrow,
.btn--clear:focus-visible .btn__arrow {
  background-color: var(--color-white);
}

/* =========================================================
   2. PRODUCT
   Figma node: 7451:6802
   ========================================================= */
.section-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
}

/* view more ボタンを SVG 画像に置き換え（ユーザー指示 2026-05-28）
   すべての .btn--clear（TOP の section-hero / concept / contents / news / product）が対象。
   既存の label/arrow は visibility:hidden で残し、ボタン自体を背景画像化。 */
.btn--clear {
  background-image: url('../img/hero/view-more-red.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  background-color: transparent !important;
  border: none !important;
  width: 201px;
  height: 62px;
  padding: 0 !important;
}
.btn--clear .btn__label,
.btn--clear .btn__arrow {
  visibility: hidden;
  font-size: 0;
}
/* PC hover: view more ボタンを色反転（赤枠/赤文字 → 赤地/白文字）。
   SVG に文字が焼き込まれているため、反転版 SVG に差し替える。
   transition で背景画像のクロスフェードは効かないので瞬時切替（必要なら別途調整）。
   ユーザー指示 2026-05-29。 */
@media (hover: hover) and (pointer: fine) {
  .btn--clear:hover,
  .btn--clear:focus-visible {
    background-image: url('../img/hero/view-more-white.svg') !important;
  }
}

/* HERO の Special Page ボタンを一時的に非表示（ユーザー指示 2026-05-28）。
   復活時はこのルールごと削除。HTML は section-hero.php に残置済。
   注: `.site-main a.btn--white` (specificity 0,2,1) が display:inline-flex を当てるので、
       こちらも `a.btn--special-page` で specificity を揃え後勝ちで上書きする。 */
.section-hero a.btn--special-page {
  display: none;
}

/* PC: TOP PRODUCT セクションを 1260px 中央寄せ＋上下 padding 100px
   ユーザー指示 2026-05-27（SP は変更しない）
   2026-05-28: 他CSSとの競合があるため padding に !important 追加。 */
@media (min-width: 798px) {
  .section-product {
    width: 1260px;
    margin: auto;
    padding: 100px 0px !important;
  }
}

/* PC: TOP LINE UP セクションを 1260px 中央寄せ（padding/gap は _global.css に集約済）。
   ユーザー指示 2026-05-29。 */
@media (min-width: 798px) {
  .has-2026-template .section-lineup {
    width: 1260px;
    margin: auto;
  }
  /* .lineup-card の PC width/height は _global.css に集約済（全 2026 ページ共通）。
     ユーザー指示 2026-05-29。 */
  /* .container タグバッジを PC で font 11px / padding 1px 10px（ユーザー指示 2026-05-28） */
  .container {
    font-size: 11px;
    padding: 1px 10px;
  }
  /* lineup-card 英語商品名を PC で 20px に（ユーザー指示 2026-05-28） */
  .has-2026-template .lineup-card__name-en {
    font-size: 20px;
  }
  /* .lineup-card__visual の PC flex は _global.css に集約済。ユーザー指示 2026-05-29。 */
  /* .lineup-card__link の PC padding は _global.css に集約済。ユーザー指示 2026-05-29。 */
  /* .lineup-card__visual img の PC サイズは _global.css に集約済。ユーザー指示 2026-05-29。 */
  /* .lineup-card__body の PC width は _global.css に集約済。ユーザー指示 2026-05-29。 */
}

.product-body {
  display: flex;
  align-items: center;
  gap: var(--gap-2xl);
  width: 100%;
  max-width: 1273px;
  margin: 0 auto;
}

.product-body__visual {
  flex: 0 0 594px;
  width: 594px;
  height: 481px;
  margin: 0;
  background-color: var(--color-gray-base);
  overflow: hidden;
}

.product-body__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-body__text {
  width: 598px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xl);
  align-items: flex-end;
}

.product-text-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  align-items: flex-start;
}

.product-text-block .container-list {
  margin-bottom: var(--gap-2xs);
}

.product-name-jp {
  margin: 0;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: 0.64px;
  color: var(--color-text);
  font-feature-settings: "palt", "pwid", "kern" 0;
}

.product-name-en {
  margin: 0;
  font-family: var(--font-en-product);
  font-weight: 400;
  font-size: 38px;
  line-height: 30px;
  letter-spacing: 3.8px;
  color: var(--color-text);
}

.product-desc {
  margin: 0;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: 0.64px;
  color: var(--color-text);
}

.product-note {
  margin: 0;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: 0.64px;
  color: var(--color-text-sub);
}

.product-asterisk {
  font-size: 0.75em;
  vertical-align: super;
}

/* =========================================================
   Common: Tag（バッジ：人気No.1 等）
   Figma node: 7269:6959 / 7269:6973 / 7269:6983
   ========================================================= */
.tag {
  display: inline-block;
  padding: 3px 8px;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 1.85px;
  border-top-left-radius: var(--radius-tag-tl);
}

.tag--red {
  background: var(--color-accent);
  color: var(--color-base-dark);
}

/* section-eyebrow の左寄せバリエーション（LINE UP, NEWS, MEDIA など） */
.section-eyebrow--left {
  text-align: left;
  align-self: flex-start;
}

/* =========================================================
   3. LINE UP
   Figma node: 7451:6821
   ========================================================= */
/* LINE UP のスタイルは _global.css に共通化（ユーザー指示 2026-05-25）。
   個別ページの上書きが必要になった場合のみここに追加する。 */

/* =========================================================
   4. CONCEPT
   Figma node: 7451:6822
   ========================================================= */
.concept-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* 1:1 比率に変更（1280 コンテンツ幅対応） */
  gap: 80px;                                            /* 168 → 80（コンテンツ幅に収まる量） */
  width: 100%;
  margin: 0;
  align-items: center;
}

.concept-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ※ _base.css の `.site-main p { margin: 0 }` に勝つため、`.site-main` を含めて specificity を上げる */
.site-main .concept-heading-jp {
  margin: 80px 0 0;                        /* eyebrow から 80px（LINE UP の eyebrow→grid gap と統一） */
  font-family: var(--font-jp-heading);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.2;
  letter-spacing: 0.32em;
  color: var(--color-text);
  white-space: nowrap;
}

.site-main .concept-sub-en {
  margin: 12px 0 0;
  font-family: var(--font-en-product);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  color: var(--color-text);
  white-space: nowrap;
}

.concept-body {
  display: flex;
  flex-direction: column;
}

.concept-body p {
  margin: 0;
  font-family: var(--font-jp-base);
  font-weight: 400;                       /* 300 → 400（標準ウェイトで読みやすく） */
  font-size: 14px;                         /* 15 → 14（本文として控えめ）*/
  line-height: 2.0;                        /* 1.9 → 2.0（行送り広めで上品さを出す）*/
  letter-spacing: 0.04em;                  /* 0.4px → 0.04em（フォントサイズに比例） */
  color: var(--color-text);
}

.concept-body--top {
  margin-top: 48px;                        /* 56 → 48 */
}

.concept-body--bottom {
  margin-top: 40px;                        /* 48 → 40 */
  white-space: nowrap;
}

.concept-cta {
  align-self: center;
  margin-top: 48px;                       /* 80 → 48（適度な間隔）*/
  padding-right: 0;
}

.concept-visual {
  /* grid セル + 右側の section padding 分まで広げて、画面右端まで貼り付く */
  width: calc(100% + var(--side-pad));
  max-width: none;
  aspect-ratio: 748 / 673;
  margin: 0;
  background: var(--color-gray-base);
  overflow: hidden;
  border-radius: 0;
}

.concept-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   5. NEWS
   Figma node: 7451:6836
   ========================================================= */
.news-inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  width: 100%;
  max-width: var(--content-max);   /* 1260px に統一 (ユーザー指示 2026-05-24) */
  margin: 0 auto;
}

.news-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-item {
  border-bottom: 1px solid rgb(76 76 76);
  padding: 30px 0;
}

.news-item:first-child {
  border-top: 0;                              /* 最初のニュースの上線を消す（ユーザー指示 2026-05-25） */
}

.news-item__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  height: auto;
  padding-right: 32px;                       /* 矢印分の確保 */
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* タグと日付は head ラッパー内で横並び。並び順: head → タイトル → 矢印 */
.news-item__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  order: 1;
}
.news-item__title { order: 2; }
.news-item__arrow { order: 3; }

.news-item__link:hover,
.news-item__link:focus-visible {
  opacity: 0.7;
}

.news-item__date {
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: 0.64px;
  color: var(--color-text);
}

.news-item__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 97px;
  height: 25px;
  background: var(--color-white) !important;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 2.56px;
  color: var(--color-text-sub);
  text-align: center;
}

.news-item__title {
  display: block;
  margin-top: 0 !important;                  /* 縦並び化に伴い、旧 10px は不要 */
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: 0.64px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.news-item__arrow {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 10px;
  height: 20px;
  background-color: var(--color-accent);     /* 矢印を赤に（ユーザー指示 2026-05-25） */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20' fill='none'><path d='M1.5 1.5L8 10l-6.5 8.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20' fill='none'><path d='M1.5 1.5L8 10l-6.5 8.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

.news-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--gap-lg);
}

:root {
  --color-line: rgba(76, 76, 76, 0.18);
}

/* =========================================================
   6. MEDIA
   Figma node: 7451:6886
   ========================================================= */
.media-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2xl);
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.media-card {
  display: flex;
  flex-direction: column;
}

.media-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.media-card__link:hover,
.media-card__link:focus-visible {
  opacity: 0.8;
}

.media-card__visual {
  margin: 0;
  width: 100%;
  height: 330px;
  background: var(--color-gray-base);
  overflow: hidden;
}

.media-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.media-card__title,
.media-card__subtitle {
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 2px;
  color: var(--color-text);
}

/* =========================================================
   7. Banner（初めてガイド / バナー遷移）
   Figma node: 7451:6903
   ========================================================= */
.banner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.banner-card {
  position: relative;
}

.banner-card__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 248px;
  background: var(--color-gray-base);
  overflow: hidden;
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.banner-card__link:hover,
.banner-card__link:focus-visible {
  opacity: 0.85;
}

.banner-card__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}

.banner-card__heading {
  position: relative;
  z-index: 1;
  font-family: var(--font-jp-base);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: 7.6px;
  color: var(--color-text);
}

/* =========================================================
   8. CONTENTS
   Figma node: 7451:6908
   ========================================================= */
.contents-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2xl);
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.contents-grid {
  display: grid;
  grid-template-columns: repeat(3, 403px);
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.contents-card {
  width: 403px;
  height: 575px;
  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;
}

.contents-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.contents-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 49px 45px 40px;
  color: inherit;
  text-decoration: none;
}

.contents-card__visual {
  position: relative;
  width: 313px;
  height: 199px;
  margin: 0 0 56px;
  background: var(--color-gray-base);
  overflow: hidden;
}

.contents-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contents-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 77.5px;
  height: 31px;
  font-family: var(--font-jp-base);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--color-text);
  text-align: center;
}

.contents-card__badge--dummy {
  background: #0DDFFF;
}

.contents-card__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 0 24px;
}

.contents-card__heading-line {
  font-family: var(--font-jp-base);
  font-weight: 700;
  font-size: 26px;
  line-height: 35px;
  letter-spacing: 5.2px;
  color: var(--color-text);
}

.contents-card__body {
  width: 301px;
  margin: 0 auto;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: 0.64px;
  color: var(--color-text);
}

.contents-cta {
  align-self: flex-end;
  margin-top: 0;
}







/* PC: front-topback ラッパー (hero + product + lineup + concept を包む) に head-back.jpg を背景。
   3セクション通じて 1 枚の画像が scroll で流れる効果 (ユーザー指示 2026-05-24)。
   SP では _sp.css で打ち消し。 */
body.has-2026-template .front-topback {
  background-color: var(--color-white);
  background-image: url('../img/front/2026/head-back.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 各セクションは透明にしてラッパーの背景を透けさせる */
body.has-2026-template .front-topback .section-product,
body.has-2026-template .front-topback .section-lineup,
body.has-2026-template .front-topback .section-concept {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
}

body.has-2026-template .section-news {
  position: relative !important;
  z-index: 2 !important;
  background-color: #F2F2F2 !important;
}

/* =========================================================
   TOP LINEUP カードの hover「キラン」= yunth.jp 忠実再現（案A）
   カード地色をグレー(#F2F2F2)にし、hover でホロのグラデ(グレー→白)を
   斜めに1直線スイープ(150%→-50%)＋brightness 微揺らし。yunth の実装そのまま。
   グラデの端＝地色 #F2F2F2 なのでタイル継ぎ目（四角）は出ない。
   ＝ 地色グレーの上を白ハイライトが斜めに1回流れる（白が映える）。
   ユーザー指示 2026-05-29（案A）。
   解析メモ: 00.wiki/raw/2026-05-29_yunth-holo-gradient-hover-effect.md
   front-page.css は TOP のみ enqueue されるため TOP 限定。
   ========================================================= */
.has-2026-template .section-lineup .lineup-card {
  position: relative;
  overflow: hidden;
  background-color: #FFFFFF;   /* 静止時は白（ユーザー指示 2026-05-30）*/
  transition: background-color 0.15s ease;  /* 触った瞬間に白→薄グレーへ（高速化 2026-05-31）*/
}
@media (hover: hover) and (pointer: fine) {
  .has-2026-template .section-lineup .lineup-card:hover {
    /* hover で薄グレー地色に変え、その上を白ハイライトが斜め1スイープ。
       グラデ端を透明フェード＝地色グレーに溶け込み「最初と最後の色の境目」が出ない。
       no-repeat でタイル継ぎ目（四角）も無し。白(#FFFFFF)がグレー地で映える。 */
    background-color: #F2F2F2;   /* hover で薄いグレー地色に */
    background-image: linear-gradient(125deg,
        rgba(242, 242, 242, 0) 15%,
        rgba(234, 234, 234, 0.65) 32%,   /* グレーの肩（ホロ感）*/
        rgba(255, 255, 255, 0.96) 52%,   /* 白ハイライト */
        rgba(242, 242, 242, 0) 90%);
    background-size: 250% 250%;
    background-position: 150% 150%;
    background-repeat: no-repeat;
    animation: holoGradient 1.2s cubic-bezier(0.11, 0, 0.5, 0) 0.15s forwards;  /* 0.15s 遅延＝白→グレー後にキラン（高速化 2026-05-31）*/
  }
}
@keyframes holoGradient {
  0%   { background-position: 150% 150%; filter: brightness(1); }
  10%  { background-position: 120% 120%; }
  20%  { background-position: 100% 100%; filter: brightness(1.01); }
  30%  { background-position: 80% 80%; }
  40%  { background-position: 60% 60%; }
  50%  { background-position: 40% 40%; filter: brightness(0.98); }
  60%  { background-position: 20% 20%; }
  70%  { background-position: 0% 0%; filter: brightness(1.01); }
  80%  { background-position: -10% -10%; }
  90%  { background-position: -30% -30%; }
  100% { background-position: -50% -50%; filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .has-2026-template .section-lineup .lineup-card:hover,
  .has-2026-template .section-lineup .lineup-card:active { animation: none; }
}
/* SP（タッチ）: hover が無いので :active（タップ）でキランを出す（ユーザー指示 2026-05-30）。 */
@media (hover: none) {
  .has-2026-template .section-lineup .lineup-card:active {
    background-color: #F2F2F2;
    background-image: linear-gradient(125deg,
        rgba(242, 242, 242, 0) 15%,
        rgba(234, 234, 234, 0.65) 32%,
        rgba(255, 255, 255, 0.96) 52%,
        rgba(242, 242, 242, 0) 90%);
    background-size: 250% 250%;
    background-position: 150% 150%;
    background-repeat: no-repeat;
    animation: holoGradient 1.2s cubic-bezier(0.11, 0, 0.5, 0) 0.15s forwards;  /* 0.15s 遅延＝白→グレー後にキラン（高速化 2026-05-31）*/
  }
}