@charset "utf-8";

/* =========================================================
   home.css — MONNALI TOP専用スタイル
   header-home.php / front-page.php / footer-home.php でのみ読み込み。
   下層ページ・既存CSSには影響しない。

   レスポンシブ方針（project-top-responsive-spec）:
   - ブレイクポイント 750px
   - PC(>750px): メインコンテンツ幅 1240px。FVは1920px基準で等比スケール（最大1920、以降白背景）。
   - SP(≤750px): フルリキッド。font等は min(calc(px/750*100vw), px)、余白は calc(px/750*100%)。
   - 見出し明朝はA1明朝の代替(Zen Old Mincho)。CSS変数で後から差し替え可。
   ========================================================= */

:root {
  --c-gold: #a48b4a;
  --c-gold-dark: #73643f;
  --c-ink: #000;
  --c-bg: #fff;
  --font-en: 'Josefin Sans', sans-serif;  /* ラテン(ナビ/ラベル) */
  --font-jp: 'YakuHanMP', 'Zen Old Mincho', 'A-OTF A1 Mincho Std', serif;  /* 見出し明朝(A1明朝の代替)＋約物半角 */
  --font-gothic: 'YakuHanJP', 'Noto Sans JP', sans-serif;  /* 本文ゴシック＋約物半角 */
  --pc-w: 1240px;  /* PCメインコンテンツ幅 */
  --fv-w: 1920px;  /* FVタイル基準幅 */
  --gh-h: 130px;  /* ヘッダー高(PC) */
  --vw: 1vw;  /* 実コンテンツ幅(=スクロールバー除外)。js/home.js が clientWidth/100 で上書き。未実行時は 1vw にフォールバック */
}

body {
  margin: 0;
}

/* テキスト選択色（TOPのみ）。共有CSSの赤(#AE2116)を上書き。home.cssはTOPだけ読込＆style.cssより後段のため有効 */
::selection {
  background: #f2efe9;
  color: var(--c-ink);
}

::-moz-selection {
  background: #f2efe9;
  color: var(--c-ink);
}

/* 背景が warm 系のセクション（story #f2efe9 / walk #f5f1ea / creationカード #f6f2ea）では
   #f2efe9 の選択色が同化して見えないため、少し濃い warm 色に上書き */
.story ::selection,
.walk ::selection,
.creation__card ::selection {
  background: #e6ddcc;
  color: var(--c-ink);
}

.story ::-moz-selection,
.walk ::-moz-selection,
.creation__card ::-moz-selection {
  background: #e6ddcc;
  color: var(--c-ink);
}

/* SP(≤834px)専用改行。PCでは無効化し1行で流す */
.br-sp {
  display: none;
}

.gh, .gh *, .gnav-sp, .gnav-sp *, .fv, .fv * {
  box-sizing: border-box;
}

.gh a, .gnav-sp a {
  text-decoration: none;
  color: inherit;
}

.gh ul, .gnav-sp ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fv h2, .fv p {
  margin: 0;
}

/* =========================================================
   グローバルヘッダー（PC）
   ========================================================= */
.gh {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: var(--gh-h);
  background: rgba(255, 255, 255, .5);  /* 白 opacity 0.5（中身は透けさせないため rgba 背景） */
  font-family: var(--font-en);
}

.gh__inner {
  max-width: var(--fv-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 100px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.gh__logo {
  flex: 0 0 auto;
  display: block;
}

.gh__logo img {
  display: block;
  width: 231px;
  height: auto;
}

.gh__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 36px;
}

.gh__menu {
  display: flex;
  align-items: center;
  gap: 40px;
}

.gh__menu a {
  font-size: 22px;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: opacity .2s;
}

.gh__menu a:hover {
  opacity: .55;
}

.gh__btns {
  display: flex;
  gap: 40px;
}

.gh__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 4px 6px 0;  /* 上4px=Josefin Sansのグリフ上寄りの視覚補正（flex中央でも上に見えるため） */
  color: #fff;
  font-size: 18px;
  white-space: nowrap;
  letter-spacing: .04em;
  transition: opacity .2s;
  line-height: 1;
}

.gh__btn:hover {
  opacity: .85;
}

.gh__btn--pro {
  background: var(--c-gold);
  color: #FFF!important;
}

.gh__btn--shop {
  background: var(--c-gold-dark);
  color: #FFF!important;
}

.gh__toggle {
  display: none;
}

.gnav-sp {
  display: none;
}

/* =========================================================
   TOPラッパ（FVは最大1920で中央、はみ出しはクリップ）
   ========================================================= */
#home {
  overflow-x: hidden;
}

/* =========================================================
   FV（ファーストビュー）
   PC: 1920px基準を --u で等比スケール（min(100vw,1920) 幅、以降白背景）
   SP: 750px基準のフルリキッド（vw換算 = px/7.5）
   ========================================================= */
.fv {
  position: relative;
  width: 100%;
  background: var(--c-bg);
  /* overflow: hidden; */
}

.fv__inner {
  --u: min(calc(100 * var(--vw) / 1920), 1px);  /* 100vw→スクロールバー除外の実幅基準 */
  position: relative;
  width: calc(1920 * var(--u));
  height: calc(922 * var(--u));
  margin: 0 auto;
}

.fv__img {
  position: absolute;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fv__main {
  left: calc(-13 * var(--u));
  top: calc(200 * var(--u));
  width: calc(557 * var(--u));
  height: calc(712 * var(--u));
  background-image: url(../images/home/fv_main_pc@2x.png);
}

.fv__c01 {
  left: calc(550 * var(--u));
  top: calc(137 * var(--u));
  width: calc(390 * var(--u));
  height: calc(354 * var(--u));
  background-image: url(../images/home/promise_product_src.jpg);
}

.fv__c02 {
  left: calc(948 * var(--u));
  top: calc(137 * var(--u));
  width: calc(353 * var(--u));
  height: calc(354 * var(--u));
  background-image: url(../images/home/fv_collage-01_pc@2x.png);
}

.fv__c03 {
  left: calc(1310 * var(--u));
  top: calc(137 * var(--u));
  width: calc(334 * var(--u));
  height: calc(354 * var(--u));
  background-image: url(../images/home/fv_collage-02_pc@2x.png);
}

.fv__c04 {
  left: calc(1201 * var(--u));
  top: calc(498 * var(--u));
  width: calc(300 * var(--u));
  height: calc(414 * var(--u));
  background-image: url(../images/home/fv_collage-03_pc@2x.png);
}

.fv__c05 {
  left: calc(1508 * var(--u));
  top: calc(498 * var(--u));
  width: calc(358 * var(--u));
  height: calc(238 * var(--u));
  background-image: url(../images/home/fv_collage-04_pc@2x.png);
}

.fv__c06 {
  left: calc(1652 * var(--u));
  top: calc(334 * var(--u));
  width: calc(285 * var(--u));
  height: calc(157 * var(--u));
  background-image: url(../images/home/creation_bhachi_src.jpg);
}

.fv__badge1 {
  left: calc(1652 * var(--u));
  top: calc(200 * var(--u));
  width: calc(110 * var(--u));
  height: calc(127 * var(--u));
  background-image: url(../images/home/fv_badge-01_pc@2x.png);
}

.fv__badge2 {
  left: calc(1508 * var(--u));
  top: calc(743 * var(--u));
  width: calc(148 * var(--u));
  height: calc(148 * var(--u));
  background-image: url(../images/home/fv_badge-02_pc@2x.png);
}

.fv__lead {
  position: absolute;
  left: calc(887 * var(--u));
  top: calc(500 * var(--u));
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-jp);
  font-weight: 500;
  color: var(--c-ink);
}

.fv__lead span {
  display: block;
}

.fv__lead .l1 {
  font-size: calc(28 * var(--u));
  line-height: calc(80 * var(--u));
}

.fv__lead .l2 {
  font-size: calc(60 * var(--u));
  line-height: calc(80 * var(--u));
}

.fv__lead .l3 {
  font-size: calc(60 * var(--u));
  line-height: calc(90 * var(--u));
}

.fv__divider {
  position: absolute;
  left: calc(887 * var(--u));
  top: calc(780 * var(--u));
  transform: translateX(-50%);
  width: calc(40 * var(--u));
  height: 1px;
  background: var(--c-ink);
}

.fv__sub {
  position: absolute;
  left: calc(887 * var(--u));
  top: calc(794 * var(--u));
  transform: translateX(-50%);
  width: calc(560 * var(--u));
  text-align: center;
  font-family: var(--font-jp);
  font-weight: 500;
  color: var(--c-ink);
  font-size: calc(22 * var(--u));
  line-height: calc(45 * var(--u));
  letter-spacing: calc(2.2 * var(--u));
}

/* =========================================================
   story（ブランドストーリー）
   ========================================================= */
.story {
  position: relative;
  background: #FBFAF7;
  padding: 150px 0 120px;
}

.story__logo {
  position: absolute;
  top: 27px;
  left: 10px;  /* デザイン(1920)基準の左端154px。狭い画面では左端に寄せてクランプ */
  z-index: 0;
  width: 154px;
  height: auto;
  pointer-events: none;
}

.story__lead {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

.story__lead-txt {
  padding-top: 124px;
}

.story__lead-ttl {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 48px;
  line-height: 80px;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.story__lead-desc {
  margin: 25px 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 40px;
  letter-spacing: .1em;
}

.story__lead-author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 56px 0 0;
}

.story__lead-role {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .1em;
}

.story__sign {
  display: block;
  width: 228px;
  height: auto;
}

.story__lead-img {
  flex: 0 0 592px;
  height: 676px;
  background: url(../images/home/story_lead_pc@2x.png) center/cover no-repeat;
}

.story__box {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 190px auto 0;
  padding: 150px 100px 140px;
  background: #fff;
  box-sizing: border-box;
}

.story__label {
  margin: 0;
  text-align: center;
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--c-gold);
}

.story__box-ttl {
  margin: 22px 0 70px;
  text-align: center;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 40px;
  line-height: 70px;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.story__ch {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 374px;
  margin-bottom: 90px;
}

.story__ch:last-child {
  margin-bottom: 0;
}

.story__ch-img {
  position: absolute;
  top: 50%;
  left: -160px;
  transform: translateY(-50%);
  width: 600px;
  aspect-ratio: 610 / 380;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.story__ch--rev .story__ch-img {
  left: auto;
  right: -160px;
}

.story__ch-img--01 {
  background-image: url(../images/home/story_chapter01_pc@2x.png);
}

.story__ch-img--02 {
  background-image: url(../images/home/story_chapter02_pc@2x.png);
}

.story__ch-img--03 {
  background-image: url(../images/home/story_chapter03_pc@2x.png);
}

.story__ch-txt {
  width: 530px;
  margin-left: auto;
}

.story__ch--rev .story__ch-txt {
  margin-left: 0;
  margin-right: auto;
}

.story__ch-no {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-en);
  color: var(--c-gold);
}

.story__ch-no .c, .story__ch-no .en {
  font-size: 14px;
  letter-spacing: .05em;
}

.story__ch-no b {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .05em;
}

.story__ch-no i {
  display: block;
  width: 44px;
  height: 1px;
  margin-left: -8px;
  margin-bottom: 5px;
  background: var(--c-gold);
}

.story__ch-ttl {
  margin: 0 0 20px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.6;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.story__ch-body {
  margin: 0;
  font-family: var(--font-gothic);
  font-size: 14px;
  line-height: 30px;
  letter-spacing: .1em;
  text-align: justify;
  color: var(--c-ink);
}

/* =========================================================
   philosophy（信念）— 全面背景＋円形ロゴ透かし＋中央テキスト
   ========================================================= */
.philosophy {
  background: #fff url(../images/home/philosophy_bg_pc.png) center / cover no-repeat;
  padding: 250px 0 250px;
}

.philosophy__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.philosophy__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 631px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

.philosophy__txt {
  position: relative;
  z-index: 1;
  text-align: center;
}

.philosophy__label {
  margin: 0;
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--c-gold);
}

.philosophy__ttl {
  margin: 26px 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 40px;
  line-height: 80px;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.philosophy__note {
  margin: 34px 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 45px;
  letter-spacing: .1em;
  color: var(--c-ink);
}

/* =========================================================
   3 PRINCIPLES（信念スライダー / 01〜03 クロスフェード）
   ========================================================= */
.principles {
  background: #fff;
  padding: 110px 0 60px;
}

.principles__head {
  text-align: center;
  margin-bottom: 60px;
}

.principles__label {
  margin: 0;
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--c-gold);
}

.principles__ttl {
  margin: 40px 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.principles__slides {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 40px;
  display: grid;
  cursor: pointer;  /* クリックで次スライドへ */
}

.principles__slide {
  grid-area: 1 / 1;
  display: flex;
  gap: 60px;
  align-items: flex-start;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fade, .8s) ease;  /* --fade はJSがトリガー別に切替（クリック=速い/自動=ゆっくり） */
}

.principles__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.principles__fig {
  position: relative;
  flex: 0 0 570px;
}

.principles__no {
  position: absolute;
  top: -72px;
  left: -42px;
  z-index: 3;
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  font-size: 150px;
  line-height: 1;
  color: rgba(164, 139, 74, .2);
}

.principles__img {
  width: 570px;
  height: 460px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.principles__img--principle01 {
  background-image: url(../images/home/principle01_pc@2x.png);
}

.principles__img--principle02 {
  background-image: url(../images/home/principle02@2x.png);
}

.principles__img--principle03 {
  background-image: url(../images/home/principle03@2x.png);
}

.principles__vtext {
  position: absolute;
  top: 94px;
  left: 38px;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;  /* 縦書きの列を右→左に読ませる */
  align-items: flex-start;      /* 各列の白背景をその列のテキスト長に合わせる（stretch回避） */
  gap: 14px;
}

.principles__vtext span {
  writing-mode: vertical-rl;
  background: #fff;
  padding: 6px 4px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.principles__body {
  flex: 1 1 auto;
  padding-top: 34px;
}

.principles__pno {
  margin: 0;
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.principles__name {
  margin: 8px 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.principles__bubble {
  position: relative;
  margin: 26px 0 0 130px;
  max-width: 564px;
  background: var(--c-gold);
  border-radius: 20px;
  padding: 20px 26px;
}

.principles__bubble p {
  margin: 0;
  font-family: var(--font-gothic);
  font-size: 14px;
  line-height: 25px;
  letter-spacing: .1em;
  color: #fff;
}

.principles__bubble::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 55px;  /* アバター(top:0/h:110)の中心に合わせる */
  transform: translateY(-50%);
  border-style: solid;
  border-width: 8px 14px 8px 0;  /* 左向き三角（右辺=着色）小さめ＆尖らせ：12px高 × 14px張り出し */
  border-color: transparent var(--c-gold) transparent transparent;
}

.principles__avatar {
  position: absolute;
  left: -132px;
  top: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: url(../images/home/principles-01_pc@2x.png) center no-repeat;
  background-size: cover;
}

.principles__dp {
  margin: 40px 0 20px;
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.principles__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 30px;
}

.principles__item {
  padding-left: 14px;
  border-left: 1px solid var(--c-gold);
}

.principles__item h5 {
  margin: 0 0 8px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .1em;
  color: var(--c-gold);
}

.principles__item p {
  margin: 0;
  font-family: var(--font-gothic);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.principles__pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 54px 0 0;
  /* カレント表示のみ（クリック機能なし） */
}

.principles__pager-no {
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: .1em;
  color: var(--c-gold);
}

.principles__pager-track {
  position: relative;
  width: 150px;
  height: 1px;
  background: #e3ddd0;
}

.principles__pager-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  width: 33.33%;
  background: var(--c-gold);
  transition: width .6s ease;
}

/* =========================================================
   PROVEN BY THE FIELD（実績）
   ========================================================= */
.proven {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 190px 0 70px;
}

.proven::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/home/proven_bg_pc.png) center / cover no-repeat;
  opacity: .7;
  z-index: 0;
}

.proven__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0px;
  text-align: center;
}

.proven__eyebrow {
  margin: 0;
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--c-gold);
}

.proven__ttl {
  margin: 40px 0 90px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.proven__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 0px;
  width: 820px;
  margin: 0 auto;
}

.proven__stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.proven__wreath {
  flex: 0 0 auto;
  width: 100px;
  height: 168px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.proven__wreath--l {
  background-image: url(../images/home/wreath_l.svg);
}

.proven__wreath--r {
  background-image: url(../images/home/wreath_r.svg);
}

.proven__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;  /* 幅固定：左右の月桂冠を全statで同じ位置に、幅を揃える */
}

.proven__label {
  font-family: var(--font-gothic);
  font-size: 15px;
  letter-spacing: .05em;
  color: var(--c-gold);
}

.proven__value {
  display: inline-flex;
  align-items: baseline;
  color: var(--c-gold);
}

.proven__value b {
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  font-size: 110px;
  line-height: 1;
}

.proven__value em {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 42px;
  font-style: normal;
  margin-left: 3px;
}

.proven__value em.proven__unit--sm {
  font-size: 36px;  /* 「店舗」は「年」より小さく（ユーザー指定・PC/SP共通方針） */
}

.proven__value--sm {
  align-items: center;  /* 3000＋/5000＋ の ＋ を中央揃え（下寄せ回避） */
}

.proven__value--sm b {
  font-size: 82px;
}

.proven__value--sm em {
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  font-size: 40px;
  margin-top: 5px;
}

.proven__link {
  margin: 48px 0 0;
  font-family: var(--font-gothic);
  font-size: 14px;
  letter-spacing: .05em;
  color: var(--c-ink);
}
.proven__link span {
  font-size: 10px;
  margin: 0 2px 4px;
  padding-bottom: 4px;
}

.proven__link a {
  color: var(--c-gold);
  border-bottom: 1px solid currentColor;

}

.proven__note {
  margin: 60px 0 0;
  font-family: var(--font-gothic);
  font-size: 12px;
  letter-spacing: .05em;
  color: #000;
  text-align: left;
}

/* =========================================================
   PROMISE（製品への想い）
   ========================================================= */
.promise {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 200px 0 150px;
}

.promise__wm {
  position: absolute;
  top: 24px;
  left: -8px;
  z-index: 0;
  width: 857px;  /* promise_logo.svg のネイティブ幅 */
  height: auto;
  pointer-events: none;
}

.promise__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  gap: 70px;
  align-items: center;
}

.promise__img {
  flex: 0 0 653px;
  height: 550px;
  background: url(../images/home/promise_product_src.jpg) center / cover no-repeat;
}

.promise__txt {
  flex: 1 1 auto;
}

.promise__eyebrow {
  margin: 0;
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--c-gold);
}

.promise__ttl {
  margin: 14px 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 40px;
  line-height: 70px;
  letter-spacing: .05em;
  color: var(--c-ink);
}

.promise__body {
  margin: 28px 0 0;
  max-width: 479px;
  font-family: var(--font-gothic);
  font-size: 14px;
  line-height: 30px;
  letter-spacing: .1em;
  text-align: justify;
  color: var(--c-ink);
}

.promise__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 256px;
  height: 53px;
  margin-top: 36px;
  background: var(--c-gold);
  color: #fff;
  font-family: var(--font-gothic);
  font-size: 14px;
  letter-spacing: .1em;
}

/* =========================================================
   CREATION（製品ラインナップ）
   ========================================================= */
.creation {
  background: #fff;
  padding: 40px 0 110px;
}

.creation__head {
  text-align: center;
  margin-bottom:80px;
}

.creation__eyebrow {
  margin: 0;
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--c-gold);
}

.creation__ttl {
  margin: 50px 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: .05em;
  color: var(--c-ink);
}

.creation__cards {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.creation__card {
  display: flex;
  flex-direction: column;
  background: #FBFAF7;
}

.creation__card-img {
  width: 100%;
  aspect-ratio: 390 / 250;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.creation__card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 26px 30px 30px;
}

.creation__card-name {
  margin: 0;
  text-align: center;
  font-family: var(--font-en);
  font-size: 20px;
  letter-spacing: .1em;
  color: var(--c-gold);
}

.creation__card-desc {
  margin: 20px 0 0;
  font-family: var(--font-gothic);
  font-size: 14px;
  line-height: 30px;
  letter-spacing: .1em;
  text-align: justify;
  color: var(--c-ink);
}

.creation__card-link {
  margin: 14px 0 0;
  margin-top: auto;  /* 詳細リンクをカード下端へ（説明文の長短に依らず下揃え） */
  text-align: right;
  font-family: var(--font-gothic);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.creation__card-link a {
  color: var(--c-gold);
  border-bottom: 1px solid var(--c-gold);
  padding-bottom: 1px;
}

.creation__card-link a::after {
  content: "▶";
  font-size: 8px;
}

.creation__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 53px;
  margin: 60px auto 0;
  background: var(--c-gold);
  color: #fff;
  font-family: var(--font-gothic);
  font-size: 14px;
  letter-spacing: .1em;
}

/* =========================================================
   WALK WITH US（パートナー導線）
   ========================================================= */
.walk {
  background: #FBFAF7;
  padding: 100px 0 140px;
}

.walk__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.walk__eyebrow {
  margin: 0;
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--c-gold);
}

.walk__ttl {
  margin: 50px 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.walk__lead {
  /* max-width: 620px; */
  margin: 24px auto 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 45px;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.walk__cards {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin: 56px 0 0;
}

.walk__card {
  width: 418px;
  box-sizing: border-box;
  background: #fff;
  padding: 44px 30px 40px;
}

.walk__card-label {
  margin: 0;
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: .08em;
}

.walk__card-label--pro {
  color: var(--c-gold);
}

.walk__card-label--shop {
  color: var(--c-gold-dark);
}

.walk__card-txt {
  margin: 16px 0 0;
  font-family: var(--font-gothic);
  font-size: 14px;
  line-height: 30px;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.walk__card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 53px;
  margin-top: 26px;
  color: #fff;
  font-family: var(--font-gothic);
  font-size: 14px;
  letter-spacing: .1em;
}

.walk__card-btn--pro {
  background: var(--c-gold);
}

.walk__card-btn--shop {
  background: var(--c-gold-dark);
}

.walk__contact {
  margin: 44px 0 0;
  font-family: var(--font-gothic);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.walk__contact a {
  color: var(--c-gold);
  border-bottom: 1px solid var(--c-gold);
}

.walk__contact a::after {
  content: "▶";
  font-size: 8px;
}

/* =========================================================
   CORPORATE（会社概要）
   ========================================================= */
.corporate {
  background: #fff;
  padding: 100px 0;
}

.corporate__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  gap: 60px;
  align-items: center;
}

.corporate__txt {
  flex: 1 1 auto;
}

.corporate__eyebrow {
  margin: 0;
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--c-gold);
}

.corporate__ttl {
  margin: 30px 0 40px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.corporate__list {
  margin: 0;
  font-family: var(--font-gothic);
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--c-ink);
}

.corporate__list > div {
  display: flex;
}

.corporate__list dt {
  flex: 0 0 155px;
  margin: 0;
  line-height: 40px;
}

.corporate__list dd {
  flex: 1 1 auto;
  margin: 0;
  line-height: 40px;
}

.corporate__img {
  flex: 0 0 620px;
  height: 422px;
  background: url(../images/home/corporate_office_pc@2x.png) center / cover no-repeat;
}

/* =========================================================
   footer（TOP専用）
   ========================================================= */
.gf {
  background: #fff;
  border-top: 1px solid #000;
  padding: 28px 0;
}

.gf__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gf__copy {
  margin: 0;
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--c-ink);
}

.gf__right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.gf__logo {
  display: block;
  width: 40px;
  height: 40px;
  background: url(../images/home/footer_logo.svg) center / contain no-repeat;
  transition: opacity .2s;
}

.gf__logo:hover {
  opacity: .6;
}

.gf__right a {
  font-family: var(--font-en);
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--c-ink);
  text-decoration: none;
  transition: opacity .2s;
}

.gf__right a:hover {
  opacity: .55;
}

/* =========================================================
   SP（≤834px フルリキッド）※iPad Air縦(820)/Pro10.5・Pro11・Air3(834)まで
   値は750基準のまま（834では約111%表示）。835–1240は末尾のLiquidブロックで等比縮小。
   ========================================================= */
@media screen and (max-width: 834px) {
  :root {
    --gh-h: 55px;  /* SP固定。実機414px時の高さ(100×414/750≈55) */
  }

  .gh__inner {
    padding: 0 calc(30 / 750 * 100%);
    gap: 0;
  }

  .gh__logo img {
    width: min(calc(231 / 750 * 100vw), 231px);
  }

  .gh__nav {
    display: none;
  }

  .gh__toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    color: #000;  /* ラベル(OPEN/CLOSE)も #000 */
    cursor: pointer;
  }

  .gh__toggle-bars {
    display: flex;  /* マージン相殺を避け、gapで正確なバー間隔を出す */
    flex-direction: column;
    gap: 7px;  /* バー間隔（広め） */
    width: 25px;  /* 固定（414実機サイズ 46×0.552） */
  }

  .gh__toggle-bars span {
    display: block;
    height: 2px;
    background: #000;
    margin: 0;
    transition: transform .3s, opacity .3s, width .3s;
  }

  .gh__toggle-bars span:nth-child(2) {
    width: 74%;  /* 3本の真ん中を少し短く */
    margin-left: auto;
    margin-right: auto;
  }
  .gh__toggle-label {
    font-family: var(--font-en);
    font-weight: 500;
    font-size: 8px;
    letter-spacing: .06em;
    line-height: 1;
  }

  .gh__toggle.is-open .gh__toggle-bars span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);  /* 中央バー位置(バー2px+gap7px=9px)まで移動して45°クロス */
  }

  .gh__toggle.is-open .gh__toggle-bars span:nth-child(2) {
    opacity: 0;
  }

  .gh__toggle.is-open .gh__toggle-bars span:nth-child(3) {
    width: 100%;
    margin-left: 0;
    transform: translateY(-9px) rotate(-45deg);
  }

  .gnav-sp {
    display: block;  /* 均等配置は不自然だったため、デザインの固定余白に戻した */
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(255, 255, 255, .98);
    padding: min(calc(140 / 750 * 100vw), 140px) calc(60 / 750 * 100%) 8vw;
    font-family: var(--font-en);
    transform: translateY(-100%);
    transition: transform .35s ease, visibility .35s;
    visibility: hidden;
    overflow-y: auto;
  }

  .gnav-sp.is-open {
    transform: translateY(0);
    visibility: visible;
  }

  .gnav-sp__menu a {
    display: block;
    padding: min(calc(40 / 750 * 100vw), 40px) 0;  /* デザイン: 行ピッチ約114px */
    text-align: center;  /* メニューは中央寄せ */
    color: #000;
    font-size: min(calc(28 / 750 * 100vw), 28px);
    letter-spacing: .06em;
  }

  .gnav-sp__btns {
    display: flex;
    flex-direction: column;
    align-items: center;  /* ボタンを中央寄せ（幅は内容基準に） */
    gap: min(calc(46 / 750 * 100vw), 46px);  /* デザイン: ボタン間46px */
    margin-top: min(calc(50 / 750 * 100vw), 50px);  /* デザイン: メニュー下〜ボタン約50px */
  }

  .gnav-sp__btns a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;  /* デザイン: 文字に沿った幅（各ボタン別幅） */
    padding: min(calc(4 / 750 * 100vw), 4px) min(calc(12 / 750 * 100vw), 12px) 0;  /* 上=Josefin視覚補正 */
    height: min(calc(49 / 750 * 100vw), 49px);
    color: #fff;
    font-size: min(calc(30 / 750 * 100vw), 30px);
    letter-spacing: .04em;
  }

  .gnav-sp__btns .gh__btn--pro {
    background: var(--c-gold);
  }

  .gnav-sp__btns .gh__btn--shop {
    background: var(--c-gold-dark);
  }

  .fv__inner {
    width: 100%;
    height: calc(152.53 * var(--vw));
  }

  .fv__main {
    left: 0;
    top: calc(46.67 * var(--vw));
    width: calc(35.00 * var(--vw));  /* 画面内に見える実寸(262.5px)。書き出し画像 525x886(0.593) に合わせトリミング解消 */
    height: calc(59.04 * var(--vw));
    background-image: url(../images/home/fv_main_sp.png);
  }

  .fv__c01 {
    left: calc(0.13 * var(--vw));
    top: calc(13.33 * var(--vw));
    width: calc(34.93 * var(--vw));
    height: calc(31.73 * var(--vw));
    background-image: url(../images/home/promise_product_src.jpg);
  }

  .fv__c02 {
    left: calc(36.67 * var(--vw));
    top: calc(13.33 * var(--vw));
    width: calc(31.60 * var(--vw));
    height: calc(31.73 * var(--vw));
    background-image: url(../images/home/fv_collage-02_sp.png);
  }

  .fv__c03 {
    left: calc(69.89 * var(--vw));
    top: calc(13.33 * var(--vw));
    width: calc(29.87 * var(--vw));
    height: calc(31.73 * var(--vw));
    background-image: url(../images/home/fv_collage-01_sp.png);
  }

  .fv__c04 {
    left: calc(0 * var(--vw));
    top: calc(107.33 * var(--vw));
    width: calc(35.01 * var(--vw));
    height: calc(45.20 * var(--vw));
    background-image: url(../images/home/fv_collage-03_sp.png);
  }

  .fv__c05 {
    left: calc(36.67 * var(--vw));
    top: calc(107.33 * var(--vw));
    width: calc(34.93 * var(--vw));
    height: calc(23.20 * var(--vw));
    background-image: url(../images/home/fv_collage-04_sp.png);
  }

  .fv__c06 {
    left: calc(36.67 * var(--vw));
    top: calc(132.40 * var(--vw));
    width: calc(34.93 * var(--vw));
    height: calc(20.13 * var(--vw));
    background-image: url(../images/home/creation_bhachi_src.jpg);
  }

  .fv__badge1 {
    left: calc(73.20 * var(--vw));
    top: calc(123.33 * var(--vw));
    width: calc(15.73 * var(--vw));
    height: calc(18.13 * var(--vw));
    background-image: url(../images/home/fv_badge-01_sp.png);
  }

  .fv__badge2 {
    left: calc(85.6 * var(--vw));
    top: calc(107.33 * var(--vw));
    width: calc(14.40 * var(--vw));
    height: calc(14.40 * var(--vw));
    background-image: url(../images/home/fv_badge-02_sp.png);
  }

  .fv__lead {
    left: calc(67.73 * var(--vw));
    top: calc(47.87 * var(--vw));
  }

  .fv__lead .l1 {
    font-size: calc(3.73 * var(--vw));
    line-height: calc(10.67 * var(--vw));
  }

  .fv__lead .l2 {
    font-size: calc(8.00 * var(--vw));
    line-height: calc(10.67 * var(--vw));
  }

  .fv__lead .l3 {
    font-size: calc(8.00 * var(--vw));
    line-height: calc(12.00 * var(--vw));
  }

  .fv__divider {
    left: calc(66.13 * var(--vw));
    top: calc(83.20 * var(--vw));
    width: calc(3.28 * var(--vw));
  }

  .fv__sub {
    left: calc(67.75 * var(--vw));
    top: calc(85.53 * var(--vw));  /* サブは中央寄せコンテナ基準で実上端≈641.5px(85.53vw)。約40px引き上げ */
    width: calc(46.40 * var(--vw));
    font-size: calc(2.93 * var(--vw));
    line-height: calc(6.00 * var(--vw));
    letter-spacing: calc(0.29 * var(--vw));
  }

  /* story founder-lead：デザイン(750)通りの絶対配置。ロゴ左／画像右／テキスト重ね。
     位置・サイズはスクロールバー除外の実幅基準(var(--vw))。 */
  .story {
    padding: 0;
  }

  .story__logo {
    display: block;  /* SPも表示：左のMONNALI縦ロゴ */
    top: calc(3.6 * var(--vw));
    left: calc(2 * var(--vw));
    width: calc(20.51 * var(--vw));
    height: auto;
  }

  .story__lead {
    position: relative;
    display: block;
    height: calc(132.8 * var(--vw));  /* founder領域（3つの物語boxが始まる996pxまで） */
    padding: 0;
  }

  .story__lead-txt {
    position: absolute;
    z-index: 1;  /* テキストは画像・ロゴの前面（かぶせ） */
    left: calc(7.73 * var(--vw));
    top: calc(38.87 * var(--vw));
    width: calc(77.2 * var(--vw));
    padding: 0;
  }

  .story__lead-ttl {
    font-size: calc(6.03 * var(--vw));
    line-height: calc(10.04 * var(--vw));
  }

  .story__lead-desc {
    margin-top: calc(3.51 * var(--vw));
    font-size: calc(3.20 * var(--vw));
    line-height: calc(5.60 * var(--vw));
  }

  .story__lead-author {
    gap: calc(2.4 * var(--vw));
    margin-top: calc(6.07 * var(--vw));
  }

  .story__lead-role {
    font-size: calc(2.93 * var(--vw));
  }

  .story__sign {
    width: calc(28.63 * var(--vw));
  }

  .story__lead-img {
    position: absolute;
    z-index: 0;
    left: calc(54.67 * var(--vw));
    top: calc(8.93 * var(--vw));
    width: calc(45.32 * var(--vw));
    height: calc(51.75 * var(--vw));
    flex: none;
    margin: 0;
    aspect-ratio: auto;
    background-image: url(../images/home/story_lead_sp.png);
  }

  .br-sp {
    display: inline;  /* SP専用改行を有効化 */
  }

  /* story 3つの物語（Figma実測: txtbox y2154基準）:
     ラベル/見出しはベージュ背景上・白は .story__chapters 1枚（x50〜700）。
     画像は各章の白ボックス外へ左右ブリード（01/03=右, 02=左）し、その横に no+ttl。本文は全幅 */
  .story__box {
    max-width: none;
    margin: 0;  /* founder-lead(story__lead)の高さで位置決めするため上マージン0 */
    padding: 0 0 calc(15.07 * var(--vw));  /* 白ボックス下のベージュ余白113px */
    background: transparent;
  }

  .story__label {
    font-size: 2.93vw;
  }

  .story__box-ttl {
    margin: 3.73vw 0 4.40vw;
    font-size: 5.33vw;
    line-height: 9.33vw;
  }

  .story__chapters {
    position: relative;
    margin: 0 calc(6.67 * var(--vw));
    padding-bottom: calc(9.47 * var(--vw));  /* ch03本文下〜白ボックス下端71px */
    background: #fff;
  }

  .story__ch, .story__ch--rev {
    display: block;
    position: relative;
    min-height: 0;
    margin: 0;  /* 白を連続させるため章間は各章のpadding-topで確保 */
    padding: 0 calc(7.33 * var(--vw));  /* 白ボックス端〜コンテンツ55px */
  }

  .story__chapters .story__ch:nth-child(1) {
    padding-top: calc(9.73 * var(--vw));
  }

  .story__chapters .story__ch:nth-child(2) {
    padding-top: calc(20.93 * var(--vw));
  }

  .story__chapters .story__ch:nth-child(3) {
    padding-top: calc(22.53 * var(--vw));
  }

  .story__ch-img, .story__ch--rev .story__ch-img {
    position: absolute;
    transform: none;
    width: calc(46.70 * var(--vw));  /* 350/750 */
    height: auto;
    aspect-ratio: 350 / 218;
  }

  .story__ch-img {
    left: auto;
    right: calc(-6.67 * var(--vw));  /* 01/03: 画面右端までブリード */
  }

  .story__ch--rev .story__ch-img {
    left: calc(-6.67 * var(--vw));  /* 02: 画面左端までブリード */
    right: auto;
    top: calc(8.13 * var(--vw));
  }

  .story__ch-img--01 {
    top: calc(-3.87 * var(--vw));  /* 白ボックス上端から29pxはみ出し */
    background-image: url(../images/home/story_chapter01_sp.png);
  }

  .story__ch-img--02 {
    background-image: url(../images/home/story_chapter02_sp.png);
  }

  .story__ch-img--03 {
    top: calc(8.00 * var(--vw));
    background-image: url(../images/home/story_chapter03_sp.png);
  }

  .story__ch-txt, .story__ch--rev .story__ch-txt {
    width: auto;
    margin: 0;
  }

  .story__ch-no {
    gap: 2.00vw;
    margin-bottom: 1.50vw;
  }

  .story__ch-no .c, .story__ch-no .en {
    font-size: 1.82vw;
  }

  .story__ch-no b {
    font-size: 2.08vw;
  }

  .story__ch-no i {
    width: 5.77vw;
  }

  .story__ch-ttl {
    margin-bottom: 4.00vw;
    font-size: 3.37vw;
    line-height: 6.67vw;
  }

  /* 02: 見出し(no+ttl)は左画像の右横（コンテンツ左端から271px） */
  .story__ch--rev .story__ch-no,
  .story__ch--rev .story__ch-ttl {
    margin-left: calc(36.13 * var(--vw));
  }

  .story__ch-body {
    font-size: 2.40vw;
    line-height: 4.80vw;
  }

  .philosophy {
    background-image: url(../images/home/philosophy_bg_sp.png);
    padding: 22.53vw 0 15.60vw;  /* Figma実測: ラベル上169px / 注釈下117px */
  }

  .philosophy__logo {
    width: 76.13vw;
  }

  .philosophy__label {
    font-size: 2.93vw;
  }

  .philosophy__ttl {
    margin-top: 5.33vw;  /* ラベル下40px */
    font-size: 4.27vw;
    line-height: 8.00vw;
  }

  .philosophy__note {
    margin-top: 7.87vw;  /* 見出し下59px */
    font-size: 2.67vw;
    line-height: 3.60vw;
  }

  .principles {
    padding: 15vw 0 10vw;
  }

  .principles__head {
    margin-bottom: 8vw;
  }

  .principles__label {
    font-size: 2.93vw;
  }

  .principles__ttl {
    margin-top: 2vw;
    font-size: 5.33vw;
  }

  .principles__slides {
    padding: 0 calc(75/750*100%);  /* デザイン: 画像=x91〜661（幅570） */
  }

  .principles__slide {
    flex-direction: column;
    gap: 9vw;
  }

  .principles__fig {
    flex: none;
    width: 100%;
  }

  .principles__no {
    top: -9.73vw;
    left: -5.6vw;  /* デザイン: 数字x=48（画像左端91の43px外側） */
    font-size: 20vw;
  }

  .principles__img {
    width: 100%;
    height: auto;
    aspect-ratio: 570 / 460;
  }

  .principles__img--principle01 {
    background-image: url(../images/home/principle01_sp.png);
  }

  .principles__vtext {
    top: 12.53vw;  /* デザイン: 画像上端+94px / 左端+38px */
    left: 5.07vw;
    gap: 2vw;
  }

  .principles__vtext span {
    font-size: 2.2vw;
    padding: 1.4vw .8vw;
  }

  .principles__body {
    padding-top: 0;
  }

  .principles__pno {
    font-size: 1.87vw;
  }

  .principles__name {
    margin-top: 1.5vw;
    font-size: 5.33vw;
  }

  .principles__bubble {
    margin: 5vw 0 0 18.8vw;  /* デザイン: 吹き出し左端=コンテンツ左+126px */
    max-width: none;
    border-radius: 2.7vw;
    padding: 3vw 3vw;
  }

  .principles__bubble p {
    font-size: 1.87vw;
    line-height: 3.4vw;
  }

  .principles__bubble::before {
    left: -1.5vw;
    top: 8.5vw;  /* SPアバター(top:0/h:14.53vw)の中心 */
    border-width: 0.9vw 1.5vw 0.9vw 0;
  }

  .principles__avatar {
    left: -19vw;  /* デザイン: アバターx=86（吹き出し左端216の130px外側）・109px角 */
    top: 0;
    width: 16.53vw;
    height: 16.53vw;
  }

  .principles__dp {
    margin: 7vw 0 3vw;
    font-size: 1.87vw;
  }

  .principles__grid {
    gap: 5vw;
  }

  .principles__item h5 {
    margin-bottom: 1vw;
    font-size: 2.4vw;
  }

  .principles__item p {
    font-size: 1.87vw;
    line-height: 1.6;
  }

  .principles__pager {
    width: 20vw;  /* トラック幅に合わせ中央配置しつつ中身は左揃え */
    margin: 9vw auto 0;
    gap: 0.5vw;
    align-items: flex-start;  /* デザイン: 数字と下線の左端を揃える */
  }

  .principles__pager-no {
    font-size: 3.2vw;
  }

  .principles__pager-track {
    width: 20vw;  /* デザイン: 150px */
  }

  .proven {
    padding: 25.87vw 0 8.53vw;  /* Figma実測: ラベル上194px / note下19px */
  }

  .proven::before {
    background-image: url(../images/home/proven_bg_sp.png);
  }

  .proven__inner {
    max-width: none;
    padding: 0 calc(40/750*100%);  /* デザイン: 見出しx=40 */
  }

  .proven__eyebrow {
    font-size: 2.93vw;
  }

  .proven__ttl {
    margin: 4vw 0 8vw;
    font-size: 5.07vw;  /* デザイン38px。40pxだと「た」だけ折り返すため */
  }

  .proven__stats {
    gap: 4vw 5.43vw;  /* デザイン: 行間15px / 列間41px */
    width: auto;  /* PCの固定820pxを解除（右列が画面外に出るため） */
  }

  .proven__stat {
    gap: 0;
  }

  .proven__num {
    width: 14.77vw;  /* PC同様の固定幅で月桂冠位置を全stat統一（デザイン: 月桂冠間110.8px）。数字ははみ出して重なる */
  }

  .proven__wreath {
    width: 12.67vw;
    height: 20vw;
  }

  .proven__value {
    white-space: nowrap;  /* 「店舗」の途中折返し防止。numからのはみ出しは中央揃えで左右均等 */
  }

  .proven__label {
    font-size: 2.04vw;
  }

  .proven__value b {
    font-size: 12vw;  /* 36/29 はデザイン(≈13.7vw)より少し小さく（ユーザー指定） */
  }

  .proven__value em {
    font-size: 5.2vw;  /* デザイン: 年≈39px */
  }

  .proven__value em.proven__unit--sm {
    font-size: 4.53vw;  /* デザイン: 店舗≈34px */
  }

  .proven__value--sm b {
    font-size: 10.19vw;
  }

  .proven__value--sm em {
    font-size: 3.53vw;
  }

  .proven__link {
    margin-top: 14vw;
    font-size: 2.13vw;
    text-align: left;  /* デザイン: 左寄せ（inner の center を解除） */
  }

  .proven__note {
    margin-top: 2vw;
    font-size: 2.13vw;
  }

  .promise {
    padding: 16.8vw 0 14vw;  /* デザイン: 画像上端=セクション+126px（透かしは上端0基準） */
  }

  .promise__wm {
    top: 0;
    left: 0;
    width: 79.47vw;  /* デザイン: x=0/y=0・幅596px */
  }

  .promise__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 0 15.47vw;  /* デザイン: 左116px・右paddingなし（画像を画面右端までブリード） */
    gap: 7.6vw;  /* 画像下〜ラベル57px */
  }

  .promise__img {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 634 / 550;  /* デザイン: 表示部634×550（元フレーム653の右19pxは画面外） */
  }

  .promise__txt {
    width: 66.67vw;  /* デザイン: テキスト幅500px */
  }

  .promise__eyebrow {
    font-size: 2.93vw;
  }

  .promise__ttl {
    margin-top: 2vw;
    font-size: 5.33vw;
    line-height: 9.33vw;
  }

  .promise__body {
    margin-top: 2.93vw;  /* デザイン: 見出し下22px */
    max-width: none;
    font-size: 2.4vw;
    line-height: 4.8vw;
  }

  .promise__btn {
    display: flex;
    width: 66.27vw;
    height: 13.73vw;
    margin: 9vw auto 0;  /* センタリング（テキスト幅500内＝デザイン位置） */
    font-size: 3.62vw;
  }

  .creation {
    padding: 4vw 0 16vw;
  }

  .creation__head {
    margin-bottom: 8vw;
  }

  .creation__eyebrow {
    font-size: 2.93vw;
  }

  .creation__ttl {
    margin-top: 2vw;
    font-size: 5.33vw;
    line-height: 9.33vw;  /* デザイン: 2行 lh70 */
  }

  .creation__cards {
    padding: 0 18.11vw 0 15.95vw;  /* デザイン: カード x119.6〜614.2（幅494.6） */
    grid-template-columns: 1fr;
    gap: 4.8vw;  /* デザイン: カード間36px */
  }

  .creation__card-body {
    padding: 4.53vw 5.24vw 8.24vw;  /* デザイン: パネル上34px・左右39px */
  }

  .creation__card-name {
    font-size: 3vw;  /* デザイン: 30px */
    font-weight: 400;
  }

  .creation__card-desc {
    margin-top: 3vw;
    font-size: 2.36vw;
    line-height: 5.07vw;
  }

  .creation__card-link {
    margin-top: 2vw;
    font-size: 1.69vw;
  }

  .creation__btn {
    width: 65.95vw;  /* カードと同幅（デザイン: 494.6px） */
    height: 11.73vw;
    margin: 9vw 18.11vw 0 15.95vw;  /* カードと左右位置を揃える（PCのauto中央を解除） */
    font-size: 3.07vw;
  }

  .walk {
    padding: 15vw 0 12vw;
  }

  .walk__inner {
    max-width: none;
    padding: 0 calc(60/750*100%);
  }

  .walk__eyebrow {
    font-size: 2.93vw;
  }

  .walk__ttl {
    margin-top: 5vw;
    font-size: 5.33vw;
  }

  .walk__lead {
    margin-top: 4vw;
    font-size: 2.4vw;
    line-height: 6vw;
  }

  .walk__cards {
    flex-direction: column;
    align-items: center;
    gap: 4.45vw;  /* デザイン: カード間33px */
    margin-top: 6vw;
  }

  .walk__card {
    width: 66.27vw;  /* デザイン: カード幅497px（x119〜616） */
    padding: 10.93vw 6vw 11.28vw;  /* デザイン: 上82px / 下85px */
  }

  .walk__card-label {
    font-size: 2.93vw;
  }

  .walk__card-txt {
    margin-top: 2.5vw;
    font-size: 1.87vw;
    line-height: 4vw;
  }

  .walk__card-btn {
    width: 47.5vw;
    height: 8.4vw;
    margin-top: 4vw;
    font-size: 1.87vw;
  }

  .walk__contact {
    margin-top: 8vw;
    font-size: 2.19vw;
  }

  .corporate {
    padding: 15vw 0;
  }

  .corporate__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 0 13.33vw 0 14.13vw;  /* デザイン: テキスト・画像とも x106〜650（幅544） */
    gap: 3.5vw;  /* デザイン: リスト下端〜画像26px */
  }

  .corporate__txt {
    padding-top: 0;
  }

  .corporate__eyebrow {
    font-size: 2.93vw;
  }

  .corporate__ttl {
    margin: 5vw 0 5vw;
    font-size: 5.33vw;
  }

  .corporate__list {
    font-size: 1.87vw;
  }

  .corporate__list dt {
    flex: 0 0 20.67vw;
    line-height: 5.33vw;
  }

  .corporate__list dd {
    line-height: 5.33vw;
  }

  .corporate__img {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 544 / 370;
    background-image: url(../images/home/corporate_office_sp.png);
  }

  .gf {
    padding: 8vw 0;
  }

  .gf__inner {
    flex-direction: column;
    gap: 4vw;
    padding: 0 calc(60/750*100%);
  }

  .gf__right {
    gap: 5vw;
    order: 1;
  }

  .gf__logo {
    width: 7.8vw;
    height: 7.8vw;
  }

  .gf__right a {
    font-size: 2.92vw;
  }

  .gf__copy {
    order: 2;
    font-size: 2.27vw;
  }

}

/* =========================================================
   Liquid（835–1240px）— コンテンツ(1240基準)を等比フルリキッド化
   min(calc(N/1240*100vw), Npx)（負値max）＝ビューポート基準で一律スケール。
   ※ヘッダー(.gh)は1920基準のため下の専用MQで別途スケール（この中には含めない）。
   max-widthは据え置き。FVは1920基準--u。境界: ≤834=SP / 835–1240 / ≥1240=原寸。
   ========================================================= */
@media screen and (min-width: 835px) and (max-width: 1240px) {
  .story {
    padding: min(calc(150/1240*100vw), 150px) 0 min(calc(120/1240*100vw), 120px);
  }

  .story__logo {
    top: min(calc(27/1240*100vw), 27px);
    left: min(calc(10/1240*100vw), 10px);
    width: min(calc(154/1240*100vw), 154px);
  }

  .story__lead {
    padding: 0 20px;
    gap: min(calc(60/1240*100vw), 60px);
  }

  .story__lead-txt {
    padding-top: min(calc(124/1240*100vw), 124px);
  }

  .story__lead-ttl {
    font-size: min(calc(48/1240*100vw), 48px);
    line-height: min(calc(80/1240*100vw), 80px);
  }

  .story__lead-desc {
    margin: min(calc(25/1240*100vw), 25px) 0 0;
    font-size: min(calc(18/1240*100vw), 18px);
    line-height: min(calc(40/1240*100vw), 40px);
  }

  .story__lead-author {
    gap: min(calc(16/1240*100vw), 16px);
    margin: min(calc(56/1240*100vw), 56px) 0 0;
  }

  .story__lead-role {
    font-size: min(calc(14/1240*100vw), 14px);
  }

  .story__sign {
    width: min(calc(228/1240*100vw), 228px);
  }

  .story__lead-img {
    flex: 0 0 min(calc(592/1240*100vw), 592px);
    height: min(calc(676/1240*100vw), 676px);
  }

  .story__box {
    margin: min(calc(190/1240*100vw), 190px) auto 0;
    padding: min(calc(150/1240*100vw), 150px) min(calc(100/1240*100vw), 100px) min(calc(140/1240*100vw), 140px);
  }

  .story__label {
    font-size: min(calc(22/1240*100vw), 22px);
  }

  .story__box-ttl {
    margin: min(calc(22/1240*100vw), 22px) 0 min(calc(70/1240*100vw), 70px);
    font-size: min(calc(40/1240*100vw), 40px);
    line-height: min(calc(70/1240*100vw), 70px);
  }

  .story__ch {
    min-height: min(calc(374/1240*100vw), 374px);
    margin-bottom: min(calc(90/1240*100vw), 90px);
  }

  .story__ch-img {
    left: max(calc(-160/1240*100vw), -160px);
    width: min(calc(600/1240*100vw), 600px);
  }

  .story__ch--rev .story__ch-img {
    right: max(calc(-160/1240*100vw), -160px);
  }

  .story__ch-txt {
    width: min(calc(530/1240*100vw), 530px);
  }

  .story__ch-no {
    gap: min(calc(10/1240*100vw), 10px);
    margin: 0 0 min(calc(18/1240*100vw), 18px);
  }

  .story__ch-no .c, .story__ch-no .en {
    font-size: min(calc(14/1240*100vw), 14px);
  }

  .story__ch-no b {
    font-size: min(calc(16/1240*100vw), 16px);
  }

  .story__ch-no i {
    width: min(calc(44/1240*100vw), 44px);
    margin-left: max(calc(-8/1240*100vw), -8px);
    margin-bottom: min(calc(5/1240*100vw), 5px);
  }

  .story__ch-ttl {
    margin: 0 0 min(calc(20/1240*100vw), 20px);
    font-size: min(calc(26/1240*100vw), 26px);
  }

  .story__ch-body {
    font-size: min(calc(14/1240*100vw), 14px);
    line-height: min(calc(30/1240*100vw), 30px);
  }

  .philosophy {
    padding: min(calc(250/1240*100vw), 250px) 0 min(calc(250/1240*100vw), 250px);
  }

  .philosophy__logo {
    width: min(calc(631/1240*100vw), 631px);
  }

  .philosophy__label {
    font-size: min(calc(22/1240*100vw), 22px);
  }

  .philosophy__ttl {
    margin: min(calc(26/1240*100vw), 26px) 0 0;
    font-size: min(calc(40/1240*100vw), 40px);
    line-height: min(calc(80/1240*100vw), 80px);
  }

  .philosophy__note {
    margin: min(calc(34/1240*100vw), 34px) 0 0;
    font-size: min(calc(18/1240*100vw), 18px);
    line-height: min(calc(45/1240*100vw), 45px);
  }

  .principles {
    padding: min(calc(110/1240*100vw), 110px) 0 min(calc(60/1240*100vw), 60px);
  }

  .principles__head {
    margin-bottom: min(calc(60/1240*100vw), 60px);
  }

  .principles__label {
    font-size: min(calc(22/1240*100vw), 22px);
  }

  .principles__ttl {
    margin: min(calc(40/1240*100vw), 40px) 0 0;
    font-size: min(calc(40/1240*100vw), 40px);
  }

  .principles__slides {
    padding: 0 6%;
  }

  .principles__slide {
    gap: min(calc(60/1240*100vw), 60px);
  }

  .principles__fig {
    flex: 0 0 min(calc(570/1240*100vw), 570px);
  }

  .principles__no {
    top: max(calc(-72/1240*100vw), -72px);
    left: max(calc(-42/1240*100vw), -42px);
    font-size: min(calc(150/1240*100vw), 150px);
  }

  .principles__img {
    width: min(calc(570/1240*100vw), 570px);
    height: min(calc(460/1240*100vw), 460px);
  }

  .principles__vtext {
    top: min(calc(94/1240*100vw), 94px);
    left: min(calc(38/1240*100vw), 38px);
    gap: min(calc(14/1240*100vw), 14px);
  }

  .principles__vtext span {
    padding: min(calc(6/1240*100vw), 6px) min(calc(4/1240*100vw), 4px);
    font-size: min(calc(18/1240*100vw), 18px);
  }

  .principles__body {
    padding-top:0;
  }

  .principles__pno {
    font-size: min(calc(14/1240*100vw), 14px);
  }

  .principles__name {
    margin: min(calc(8/1240*100vw), 8px) 0 0;
    font-size: min(calc(40/1240*100vw), 40px);
  }

  .principles__bubble {
    margin: min(calc(26/1240*100vw), 26px) 0 0 min(calc(130/1240*100vw), 130px);
    border-radius: min(calc(20/1240*100vw), 20px);
    padding: min(calc(20/1240*100vw), 20px) min(calc(26/1240*100vw), 26px);
  }

  .principles__bubble p {
    font-size: min(calc(14/1240*100vw), 14px);
    line-height: min(calc(25/1240*100vw), 25px);
  }

  .principles__bubble::before {
    left: max(calc(-11/1240*100vw), -11px);
    top: min(calc(55/1240*100vw), 55px);
  }

  .principles__avatar {
    left: max(calc(-132/1240*100vw), -132px);
    width: min(calc(110/1240*100vw), 110px);
    height: min(calc(110/1240*100vw), 110px);
  }

  .principles__dp {
    margin: min(calc(20/1240*100vw), 20px) 0 min(calc(20/1240*100vw), 20px);
    font-size: min(calc(14/1240*100vw), 14px);
  }

  .principles__grid {
    gap: min(calc(40/1240*100vw), 40px) min(calc(30/1240*100vw), 30px);
  }

  .principles__item {
    padding-left: min(calc(14/1240*100vw), 14px);
  }

  .principles__item h5 {
    margin: 0 0 min(calc(8/1240*100vw), 8px);
    font-size: min(calc(18/1240*100vw), 18px);
  }

  .principles__item p {
    font-size: min(calc(14/1240*100vw), 14px);
  }

  .principles__pager {
    gap: min(calc(12/1240*100vw), 12px);
    margin: min(calc(54/1240*100vw), 54px) 0 0;
  }

  .principles__pager-no {
    font-size: min(calc(24/1240*100vw), 24px);
  }

  .principles__pager-track {
    width: min(calc(150/1240*100vw), 150px);
  }

  .proven {
    padding: min(calc(190/1240*100vw), 190px) 0 min(calc(70/1240*100vw), 70px);
  }

  .proven__eyebrow {
    font-size: min(calc(22/1240*100vw), 22px);
  }

  .proven__ttl {
    margin: min(calc(40/1240*100vw), 40px) 0 min(calc(90/1240*100vw), 90px);
    font-size: min(calc(40/1240*100vw), 40px);
  }

  .proven__stats {
    gap: min(calc(40/1240*100vw), 40px) 0px;
    width: min(calc(820/1240*100vw), 820px);
  }

  .proven__stat {
    gap: min(calc(4/1240*100vw), 4px);
  }

  .proven__wreath {
    width: min(calc(100/1240*100vw), 100px);
    height: min(calc(168/1240*100vw), 168px);
  }

  .proven__num {
    width: min(calc(200/1240*100vw), 200px);
  }

  .proven__label {
    font-size: min(calc(15/1240*100vw), 15px);
  }

  .proven__value b {
    font-size: min(calc(110/1240*100vw), 110px);
  }

  .proven__value em {
    font-size: min(calc(42/1240*100vw), 42px);
    margin-left: min(calc(3/1240*100vw), 3px);
  }

  .proven__value--sm b {
    font-size: min(calc(82/1240*100vw), 82px);
  }

  .proven__value--sm em {
    font-size: min(calc(40/1240*100vw), 40px);
    margin-top: min(calc(5/1240*100vw), 5px);
  }

  .proven__link {
    margin: min(calc(48/1240*100vw), 48px) 0 0;
    font-size: min(calc(14/1240*100vw), 14px);
  }

  .proven__link span {
    font-size: min(calc(10/1240*100vw), 10px);
    margin: 0 2px min(calc(4/1240*100vw), 4px);
    padding-bottom: min(calc(4/1240*100vw), 4px);
  }

  .proven__note {
    margin: min(calc(60/1240*100vw), 60px) 0 0;
    font-size: min(calc(12/1240*100vw), 12px);
  }

  .promise {
    padding: min(calc(200/1240*100vw), 200px) 0 min(calc(150/1240*100vw), 150px);
  }

  .promise__wm {
    top: min(calc(24/1240*100vw), 24px);
    left: max(calc(-8/1240*100vw), -8px);
    width: min(calc(857/1240*100vw), 857px);
  }

  .promise__inner {
    padding: 0 20px;
    gap: min(calc(70/1240*100vw), 70px);
  }

  .promise__img {
    flex: 0 0 min(calc(653/1240*100vw), 653px);
    height: min(calc(550/1240*100vw), 550px);
  }

  .promise__eyebrow {
    font-size: min(calc(22/1240*100vw), 22px);
  }

  .promise__ttl {
    margin: min(calc(14/1240*100vw), 14px) 0 0;
    font-size: min(calc(40/1240*100vw), 40px);
    line-height: min(calc(70/1240*100vw), 70px);
  }

  .promise__body {
    margin: min(calc(28/1240*100vw), 28px) 0 0;
    font-size: min(calc(14/1240*100vw), 14px);
    line-height: min(calc(30/1240*100vw), 30px);
  }

  .promise__btn {
    width: min(calc(256/1240*100vw), 256px);
    height: min(calc(53/1240*100vw), 53px);
    margin-top: min(calc(36/1240*100vw), 36px);
    font-size: min(calc(14/1240*100vw), 14px);
  }

  .creation {
    padding: min(calc(40/1240*100vw), 40px) 0 min(calc(110/1240*100vw), 110px);
  }

  .creation__head {
    margin-bottom: min(calc(80/1240*100vw), 80px);
  }

  .creation__eyebrow {
    font-size: min(calc(22/1240*100vw), 22px);
  }

  .creation__ttl {
    margin: min(calc(50/1240*100vw), 50px) 0 0;
    font-size: min(calc(40/1240*100vw), 40px);
  }

  .creation__cards {
    padding: 0 20px;
    gap: min(calc(40/1240*100vw), 40px);
  }

  .creation__card-body {
    padding: min(calc(26/1240*100vw), 26px) min(calc(30/1240*100vw), 30px) min(calc(30/1240*100vw), 30px);
  }

  .creation__card-name {
    font-size: min(calc(20/1240*100vw), 20px);
  }

  .creation__card-desc {
    margin: min(calc(20/1240*100vw), 20px) 0 0;
    font-size: min(calc(14/1240*100vw), 14px);
    line-height: min(calc(30/1240*100vw), 30px);
  }

  .creation__card-link {
    margin: min(calc(14/1240*100vw), 14px) 0 0;
    font-size: min(calc(10/1240*100vw), 10px);
  }

  .creation__card-link a::after {
    font-size: min(calc(8/1240*100vw), 8px);
  }

  .creation__btn {
    width: min(calc(300/1240*100vw), 300px);
    height: min(calc(53/1240*100vw), 53px);
    margin: min(calc(60/1240*100vw), 60px) auto 0;
    font-size: min(calc(14/1240*100vw), 14px);
  }

  .walk {
    padding: min(calc(100/1240*100vw), 100px) 0 min(calc(140/1240*100vw), 140px);
  }

  .walk__inner {
    padding: 0 20px;
  }

  .walk__eyebrow {
    font-size: min(calc(22/1240*100vw), 22px);
  }

  .walk__ttl {
    margin: min(calc(50/1240*100vw), 50px) 0 0;
    font-size: min(calc(40/1240*100vw), 40px);
  }

  .walk__lead {
    margin: min(calc(24/1240*100vw), 24px) auto 0;
    font-size: min(calc(18/1240*100vw), 18px);
    line-height: min(calc(45/1240*100vw), 45px);
  }

  .walk__cards {
    gap: min(calc(60/1240*100vw), 60px);
    margin: min(calc(56/1240*100vw), 56px) 0 0;
  }

  .walk__card {
    width: min(calc(418/1240*100vw), 418px);
    padding: min(calc(44/1240*100vw), 44px) min(calc(30/1240*100vw), 30px) min(calc(40/1240*100vw), 40px);
  }

  .walk__card-label {
    font-size: min(calc(22/1240*100vw), 22px);
  }

  .walk__card-txt {
    margin: min(calc(16/1240*100vw), 16px) 0 0;
    font-size: min(calc(14/1240*100vw), 14px);
    line-height: min(calc(30/1240*100vw), 30px);
  }

  .walk__card-btn {
    width: min(calc(300/1240*100vw), 300px);
    height: min(calc(53/1240*100vw), 53px);
    margin-top: min(calc(26/1240*100vw), 26px);
    font-size: min(calc(14/1240*100vw), 14px);
  }

  .walk__contact {
    margin: min(calc(44/1240*100vw), 44px) 0 0;
    font-size: min(calc(10/1240*100vw), 10px);
  }

  .walk__contact a::after {
    font-size: min(calc(8/1240*100vw), 8px);
  }

  .corporate {
    padding: min(calc(100/1240*100vw), 100px) 0;
  }

  .corporate__inner {
    padding: 0 20px;
    gap: min(calc(60/1240*100vw), 60px);
  }

  .corporate__eyebrow {
    font-size: min(calc(22/1240*100vw), 22px);
  }

  .corporate__ttl {
    margin: min(calc(30/1240*100vw), 30px) 0 min(calc(40/1240*100vw), 40px);
    font-size: min(calc(40/1240*100vw), 40px);
  }

  .corporate__list {
    font-size: min(calc(14/1240*100vw), 14px);
  }

  .corporate__list dt {
    flex: 0 0 min(calc(155/1240*100vw), 155px);
    line-height: min(calc(40/1240*100vw), 40px);
  }

  .corporate__list dd {
    line-height: min(calc(40/1240*100vw), 40px);
  }

  .corporate__img {
    flex: 0 0 min(calc(620/1240*100vw), 620px);
    height: min(calc(422/1240*100vw), 422px);
  }

  .gf {
    padding: min(calc(28/1240*100vw), 28px) 0;
  }

  .gf__inner {
    padding: 0 20px;
  }

  .gf__copy {
    font-size: min(calc(14/1240*100vw), 14px);
  }

  .gf__right {
    gap: min(calc(32/1240*100vw), 32px);
  }

  .gf__logo {
    width: min(calc(40/1240*100vw), 40px);
    height: min(calc(40/1240*100vw), 40px);
  }

  .gf__right a {
    font-size: min(calc(18/1240*100vw), 18px);
  }

  /* story__ch: リキッド域は左右ブリードを解除し通常フローの2カラムに（重なり防止） */
  .story__ch {
    gap: min(calc(60/1240*100vw), 60px);
  }

  .story__ch-img {
    position: static;
    flex: 1 1 auto;
    width: auto;
    height: auto;
    transform: none;  /* base の translateY(-50%)（絶対配置用）を解除 */
  }

  .story__ch--rev {
    flex-direction: row-reverse;
  }

  .story__ch-txt {
    flex: 0 0 min(calc(530/1240*100vw), 530px);
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  /* 1240未満で左右に余白が無い全幅要素へ一律20pxガター */
  .philosophy__inner,
  .proven__inner,
  .principles__head,
  .creation__head {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* =========================================================
   ヘッダー（1920基準デザイン専用スケール）
   .gh は max-width:1920 のフルブリード系のため 1240 ではなく 1920 基準で縮小する。
   835–1920: min(calc(N/1920*100vw), Npx) / ≥1920: 原寸 / ≤834: SPハンバーガー。
   ========================================================= */
@media screen and (min-width: 835px) and (max-width: 1920px) {
  .gh {
    height: min(calc(130/1920*100vw), 130px);
  }

  .gh__inner {
    padding: 0 min(calc(30/1920*100vw), 30px);
    gap: min(calc(40/1920*100vw), 40px);
  }

  .gh__logo img {
    width: min(calc(231/1920*100vw), 231px);
  }

  .gh__nav {
    gap: min(calc(36/1920*100vw), 36px);
  }

  .gh__menu {
    gap: min(calc(40/1920*100vw), 40px);
  }

  .gh__menu a {
    font-size: min(calc(22/1920*100vw), 22px);
  }

  .gh__btns {
    gap: min(calc(40/1920*100vw), 40px);
  }

  .gh__btn {
    height: min(calc(34/1920*100vw), 34px);
    padding: min(calc(4/1920*100vw), 4px) min(calc(6/1920*100vw), 6px) 0;  /* 上=Josefin視覚補正・左右=ベース6pxに同期 */
    font-size: min(calc(18/1920*100vw), 18px);
  }
}

/* =========================================================
   FVアニメーション（状態クラス駆動 / タイムラインは js/home.js）
   - html.fv-anim   … header-home.php の head インラインJSで即付与（JS無効時は付かず静的表示）
   - html.fv-settle … fv__main を拡大表示→本来サイズへ縮小
   - .fv__img.is-in … タイルをランダム順で出現（少し右・縮小 → 本来位置）
   - html.fv-done   … リード文と FV 以降のセクションをフェードイン
   ========================================================= */
html.fv-anim .fv__main {
  z-index: 4;  /* 拡大中は他タイルより手前 */
  transform: scale(1.45);
  transform-origin: center top;  /* 上端基準で下方向に拡大（centerだと上に伸びてヘッダーロゴに被る） */
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}

html.fv-anim.fv-settle .fv__main {
  transform: scale(1);
}

html.fv-anim .fv__img:not(.fv__main) {
  opacity: 0;
  transform: translateX(min(6vw, 60px)) scale(.72);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}

html.fv-anim .fv__img.is-in {
  opacity: 1;
  transform: none;
}

html.fv-anim .fv__lead,
html.fv-anim .fv__divider,
html.fv-anim .fv__sub {
  opacity: 0;
  transition: opacity .8s ease;
}

/* FV以降のセクション（#home 内の .fv 後続）＋ #home 外のフッター */
html.fv-anim .fv ~ *,
html.fv-anim .gf {
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility 0s .8s;
}

html.fv-anim.fv-done .fv__lead,
html.fv-anim.fv-done .fv__divider,
html.fv-anim.fv-done .fv__sub {
  opacity: 1;
}

html.fv-anim.fv-done .fv ~ *,
html.fv-anim.fv-done .gf {
  opacity: 1;
  visibility: visible;
  transition: opacity .8s ease;
}

/* =========================================================
   スクロール連動リベール（story以降の左右配置画像）
   js/home.js がブレイクポイントに応じて .reveal--left / .reveal--right を付与し、
   画面に入ったら .is-reveal で開く。
   左配置=左端基準で右へ、右配置=右端基準で左へ横に広がる（clip-pathワイプ）。
   ========================================================= */
html.fv-anim .reveal--left,
html.fv-anim .reveal--right {
  transition: clip-path 1.1s cubic-bezier(.22, .61, .36, 1);
}

html.fv-anim .reveal--left {
  clip-path: inset(0 100% 0 0);
}

html.fv-anim .reveal--right {
  clip-path: inset(0 0 0 100%);
}

html.fv-anim .reveal--left.is-reveal,
html.fv-anim .reveal--right.is-reveal {
  clip-path: inset(0 0 0 0);
}

/* =========================================================
   story__box 等比スケール（835–1600px）
   フル表示＝白箱1240＋左右ブリード各160（計1560）＋余白40 → 基準1600。
   ブラウザ幅を縮めても「箱の外へ画像がはみ出す」見え方を等比で維持する。
   1240Liquid生成分と旧パッチ（ブリード解除の2カラム化）を後勝ちで上書き。
   係数は N/16（=N/1600*100）。スクロールバー対策で var(--vw) 基準。
   ========================================================= */
@media screen and (min-width: 835px) and (max-width: 1600px) {
  .story__box {
    max-width: none;
    width: min(calc(77.5 * var(--vw)), 1240px);
    margin: min(calc(11.875 * var(--vw)), 190px) auto 0;
    padding: min(calc(9.375 * var(--vw)), 150px) min(calc(6.25 * var(--vw)), 100px) min(calc(8.75 * var(--vw)), 140px);
  }

  .story__label {
    font-size: min(calc(1.375 * var(--vw)), 22px);
  }

  .story__box-ttl {
    margin: min(calc(1.375 * var(--vw)), 22px) 0 min(calc(4.375 * var(--vw)), 70px);
    font-size: min(calc(2.5 * var(--vw)), 40px);
    line-height: min(calc(4.375 * var(--vw)), 70px);
  }

  .story__ch, .story__ch--rev {
    flex-direction: row;  /* 旧パッチの2カラム化を解除 */
    gap: 0;
    min-height: min(calc(23.375 * var(--vw)), 374px);
    margin-bottom: min(calc(5.625 * var(--vw)), 90px);
  }

  .story__ch:last-child {
    margin-bottom: 0;
  }

  .story__ch-img, .story__ch--rev .story__ch-img {
    position: absolute;  /* 箱外ブリード復活 */
    flex: none;
    top: 50%;
    transform: translateY(-50%);
    width: min(calc(37.5 * var(--vw)), 600px);
    height: auto;
  }

  .story__ch-img {
    left: calc(-10 * var(--vw));  /* -160/1600 */
    right: auto;
  }

  .story__ch--rev .story__ch-img {
    left: auto;
    right: calc(-10 * var(--vw));
  }

  .story__ch-txt, .story__ch--rev .story__ch-txt {
    flex: none;
    width: min(calc(33.125 * var(--vw)), 530px);
  }

  .story__ch-txt {
    margin-left: auto;
    margin-right: 0;
  }

  .story__ch--rev .story__ch-txt {
    margin-left: 0;
    margin-right: auto;
  }

  .story__ch-no {
    gap: min(calc(0.625 * var(--vw)), 10px);
    margin-bottom: min(calc(1.125 * var(--vw)), 18px);
  }

  .story__ch-no .c, .story__ch-no .en {
    font-size: min(calc(0.875 * var(--vw)), 14px);
  }

  .story__ch-no b {
    font-size: min(calc(1 * var(--vw)), 16px);
  }

  .story__ch-no i {
    width: min(calc(2.75 * var(--vw)), 44px);
  }

  .story__ch-ttl {
    margin-bottom: min(calc(1.25 * var(--vw)), 20px);
    font-size: min(calc(1.625 * var(--vw)), 26px);
  }

  .story__ch-body {
    font-size: min(calc(0.875 * var(--vw)), 14px);
    line-height: min(calc(1.875 * var(--vw)), 30px);
  }
}