@charset "UTF-8";
/* ==========================================================
   飛騨ほおのき平スキー場 TOP — howto セクション
   HOW TO ENJOY（特徴3カード） y=5104-7050 / 高さ1946px
   ========================================================== */

.howto {
  position: relative;
  width: 100%;
  padding-bottom: 112px;
  overflow: hidden; /* マーキー左右見切れ */
}

/* ---- 見出しブロック（マーキー＋中央タイトル） 高さ165px ---- */
.howto__head {
  position: relative;
  height: 165px;
  overflow: hidden;
}

/* 巨大Bebasマーキー（白・横一列・左右見切れ） */
.howto__marquee {
  position: absolute;
  top: -14px; /* 【2026-09-02 A-1c】146.87px化でインク上端が8px高くなったぶんを戻す */
  left: 0;
  width: 100%;
  text-align: center;
  overflow: hidden;
  line-height: 1;
  pointer-events: none;
}
.howto__marquee-text {
  display: inline-block;
  white-space: nowrap;
  font-size: 146.87px;      /* 【2026-09-02 A-1c】spec実値（旧129.6px） */
  line-height: 1;
  color: #fff;
  letter-spacing: -0.015em; /* spec実値（旧-0.012em） */
  transform: translateX(-82px);
}

/* 中央の日本語タイトル（墨・マーキーの上に重なる） */
.howto__lead {
  font-weight: 400;
  position: absolute;
  top: 63px; /* 【2026-09-02 A-1c】30px化に伴う実測補正（カンプ ink y5159） */
  left: 0;
  right: 0;
  text-align: center;
  font-size: 30px;        /* 【2026-09-02 A-1c】spec実値（旧27px） */
  line-height: 1;
  letter-spacing: 0.07em; /* spec実値（旧0.02em） */
  color: var(--color-text);
  z-index: 2;
}

/* ---- カード群 ---- */
.howto__cards {
  max-width: 1200px;
  margin: 0 auto;
}

.howto__card {
  position: relative;
  height: 529px;
  border-radius: 16px;
  overflow: hidden;
  /* 【2026-09-02 A-1c/top R2】カード面の青は spec 図形の #1673e2（PC=左半分のグラデ stop色／
     SP=y6433.5・6883.5・7333.5 の 380×241.8 PathItem の塗り）。--color-primary(#165ce2) は
     hero CTA・NEWS/ACCESS ボタン・EXPERIENCE 帯の spec 値なのでトークンは触らず、
     カード面だけ別値にする。カンプ実測 comp(23,115,226) vs 旧実装(22,92,226)＝ΔG23で許容12超。 */
  background: #1673e2;
}
.howto__card + .howto__card {
  margin-top: 41px;
}

/* テキスト列（左） */
.howto__card-body {
  position: relative;
  z-index: 2;
  height: 100%;
  padding-left: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.howto__card-title {
  /* palt入りサブセットで本物の文字詰め（カンプと同じ詰めロジック） */
  font-family: var(--font-jp-palt);
  font-weight: 400;
  color: #fff;
  font-size: 67px;          /* 【2026-09-02 A-1c】spec実値（旧61.2px） */
  line-height: 73px;        /* spec 行送り73px（旧1.08=66.1px） */
  letter-spacing: -0.01em;  /* spec実値（旧0） */
}

/* 【2026-09-01 A-1/T-18・系統①】PCの本文の改行位置がカンプと全く違っていた。
   .howto__desc-line はSPだけ display:block（＝手組み改行）で、PCはインライン＝自然改行。
   つまりPCの改行位置は font-size と width で決まる。カンプ実測:
     行ピッチ 27px（旧実装 24.3）／ink高 12px（旧実装 10）／1行 21〜22文字・ink幅 317px
     （旧実装は 24文字・324px）→ font-size 13.5 × 12/10 ≒ 15px
   句読点はカンプが約物半角なので、SPと同じ yakuhan サブセットをPCにも適用する。
   width は「21〜22文字で折り返す」ように 320px（旧 330px）。
   ※SPは棚卸しで一致確認済みのため下の @media 側の値を維持（変更なし）。 */
/* 【2026-09-02 A-1c/top】旧・手組み改行（.br-pc / SPの行ブロック化）は撤去。
   spec の字送りが 0.01em→0.07em に変わり、手組み位置が全部ずれるため。
   spec の枠幅（PC 320 / SP 334）＋均等割付で、カンプと同じ greedy 改行を再現する。 */
.br-pc { display: none; }

.howto__card-desc {
  /* spec 枠幅は320だが、カンプ1行目（21字＝20em）の advance は 20×15×1.07＝321.0px。
     CSSは均等割付で「詰める」ことができず320では入り切らず7行に割れるため、
     カンプと同じ6行・同じ改行位置になる最小幅 323px を採る（右端は実測+6px）。 */
  width: 323px;
  margin-top: 34px;       /* カンプ実測: 見出しboxと本文boxの間隔253.2 = 見出し219 + 34 */
  margin-left: 8px;
  color: #fff;
  font-family: var(--font-jp-yakuhan);
  font-size: 15px;        /* spec実値 */
  line-height: 27px;      /* spec 行送り27px */
  letter-spacing: 0.07em; /* spec実値（旧0.01em） */
  text-align: justify;    /* spec just=FULLJUSTIFY（最終行はカンプ同様ナチュラル） */
}

/* 写真（右・カード右半分・左端は青へソフトに溶ける＝焼き込み済み） */
.howto__card-media {
  position: absolute;
  top: 0;
  right: 0;
  width: 732px;
  height: 529px;
  z-index: 1;
}
.howto__card-media img {
  width: 732px;
  height: 529px;
  object-fit: cover;
  object-position: center;
}
/* 【2026-09-09b 市岡さん指摘】青面→写真の境目が硬い。カンプ（top_pc y5536）は x592 から約200px かけて
   青が写真へ溶ける（(22,116,226)→(37,98,163)…）。実装はグラデが無く写真の左端で切れていた。
   下層 .cx-photocard と同じイージング付き多段グラデを写真の上に敷く（両端に段差を作らない）。 */
.howto__card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(22, 115, 226, 1.000) 0.0px, rgba(22, 115, 226, 0.985) 24.0px, rgba(22, 115, 226, 0.941) 48.0px, rgba(22, 115, 226, 0.861) 75.0px, rgba(22, 115, 226, 0.760) 102.0px, rgba(22, 115, 226, 0.640) 129.0px, rgba(22, 115, 226, 0.530) 150.0px, rgba(22, 115, 226, 0.404) 174.0px, rgba(22, 115, 226, 0.278) 201.0px, rgba(22, 115, 226, 0.166) 228.0px, rgba(22, 115, 226, 0.078) 255.0px, rgba(22, 115, 226, 0.022) 279.0px, rgba(22, 115, 226, 0.000) 300.0px);
}

/* ==========================================================
   SP（〜768px）— SPカンプ実測 spec_sp_howto.json 準拠
   セクションDOM上端 = カンプy6487（experience側 padding-bottom 84 で確定）
   ========================================================== */
@media (max-width: 768px) {
  /* 【2026-09-02 A-1c/top】旧・グラデ近似は撤去。ウォッシュは main::before の画像タイル。 */
  .bg-band-howto { background: transparent; }
  .howto {
    /* 【2026-09-02 A-1c/top R2】32→29。カンプはカード3下端(7741)→ACCESS見出しインク(7807)が66px、
       実装は69pxだった（comp/top_sp.png と実装撮影の findcolor 実測）。 */
    padding-bottom: 29px; /* card3下端→セクション末 */
  }
  .howto__head {
    height: 80px; /* セクション上端→card1上端 実測80 */
  }
  .howto__marquee {
    top: -19px; /* インク上端≈セクション上端（track padding-top8 + キャップ差込0.15em補正） */
  }
  .howto__marquee-text {
    /* カンプのキャップ高実測44.5 ÷ Bebas Kai capHeight 0.700
       （spec値54はキャップ比0.818仮定＝実フォントと不一致のため実測合わせ） */
    font-size: 61.56px; /* 【2026-09-02 A-1c】spec実値（旧63px） */
  }
  .howto__lead {
    top: 33.5px; /* インク上端 = セクション上端+36 */
    font-size: 19.01px; /* 【2026-09-02 A-1c】spec実値（旧19.2px） */
  }
  .howto__cards {
    max-width: none;
    padding: 0 6.5px; /* カード幅380センタリング（flag8） */
  }
  .howto__card {
    height: 430px; /* 3枚均一 実測430 */
    border-radius: 16px;
  }
  .howto__card + .howto__card {
    /* 【2026-09-02 A-1c/top R2】20→18.5。カンプのカードピッチ実測 448.5
       （青面上端 6414 / 6862 / 7311）＝カード高430 + 18.5。旧20だとピッチ450で1枚ごとに1.5px積み上がった。 */
    margin-top: 18.5px;
  }
  .howto__card-body {
    padding: 38px 21px 0; /* 見出しL1インク = カード上端+46 / 左インセット実測≈21（flag6） */
    justify-content: flex-start;
  }
  .howto__card-title {
    /* カンプインク実測 h27-28×各行幅 → palt組で30.6px（spec値28ではインク高25と不足）。
       行ピッチ実測38 → lh 1.242 */
    font-size: 31px;     /* 【2026-09-02 A-1c】spec実値（旧30.6px） */
    line-height: 37.3px; /* spec 行送り37.3px（旧1.242=38.0px） */
  }
  /* card1見出し: SPカンプは2行組「圧倒的な/スケールと開放感。」（flag1）
     js-lines分割後の.line 2,3をinline化して1行に結合（マスクは.line単位で維持） */
  .howto__card:nth-of-type(1) .howto__card-title .line:nth-child(n + 2) {
    display: inline-block;
    vertical-align: top; /* 行ボックス高をstrutと一致させ余剰レディングを防ぐ */
  }
  /* no-jsフォールバック（js無効時はbrが残るため2つ目を無効化） */
  .howto__card:nth-of-type(1) .howto__card-title br:nth-of-type(2) {
    display: none;
  }
  .br-pc { display: none; } /* SPではPC用の手組み改行を殺す */

  .howto__card-desc {
    /* SPカンプは句読点半角の組（、。が半角幅）＝既存yakuhanトークンで一致させる */
    font-family: var(--font-jp-yakuhan);
    /* 【2026-09-02 A-1c/top R2】334→335。カンプ1行目は26字
       「北アルプス直下に広がる、圧倒的なスケール。視界いっぱ」。
       実測（実フォント・palt＋約物焼き込み）で26字の advance = 334.3px。
       うち末尾1字ぶんの letter-spacing 0.07em×13px = 0.91px は CSS だけが足す分で、
       イラレは行末に字送りを置かない（334.3-0.91=333.4 が本来の行長＝枠334に収まる）。
       CSS は行分割で末尾の字送りも数えるため 0.3px 足りず25字で折り返していた。
       枠を1px広げてカンプと同じ26字で折り返させる（カード内寸338 − margin-left3 = 335 が上限）。 */
    width: 335px;
    max-width: 100%;
    margin-top: 16px;
    margin-left: 3px;
    font-size: 13px;   /* spec実値（旧12px） */
    line-height: 22px; /* spec 行送り22px */
    text-align: justify;
  }
  /* 【2026-09-02 A-1c/top】旧・行ブロック化（手組み改行）は撤去。
     spec の 13px/0.07em/枠334px なら自然改行でカンプと同じ位置に落ちる。 */
  /* 写真: カード下端に全幅フラッシュ。スロット172+上端フェード帯12（flag9: _sp再クロップ資産前提） */
  .howto__card-media {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 184px;
  }
  .howto__card-media img {
    width: 100%;
    height: 184px;
    object-position: center;
  }
  .howto__card-media::after { background: linear-gradient(180deg, rgba(22, 115, 226, 1.000) 0.0px, rgba(22, 115, 226, 0.985) 3.8px, rgba(22, 115, 226, 0.941) 7.7px, rgba(22, 115, 226, 0.861) 12.0px, rgba(22, 115, 226, 0.760) 16.3px, rgba(22, 115, 226, 0.640) 20.6px, rgba(22, 115, 226, 0.530) 24.0px, rgba(22, 115, 226, 0.404) 27.8px, rgba(22, 115, 226, 0.278) 32.2px, rgba(22, 115, 226, 0.166) 36.5px, rgba(22, 115, 226, 0.078) 40.8px, rgba(22, 115, 226, 0.022) 44.6px, rgba(22, 115, 226, 0.000) 48.0px); }
}