/* =========================================================
   雛ふろしき（taxonomy-product_category-hinafuroshiki.php）専用 CSS
   ※ 銀座のつばめ（test-tsubame.css/js）とは独立したファイル。
   ※ 全セレクタを .hinafuroshiki-page 配下にスコープし、他ページの
     同名クラス（.grid / .card / .modal 等）と衝突しないようにする。
   ========================================================= */

.hinafuroshiki-page,
.hinafuroshiki-modal {
  --paper-2:    #ffffff;
  --paper-blue: #edf3f4;
  --ink:        #000000;
  --ink-soft:   #5a5a5a;
  --vermillion: #e95454;
  --vermillion-lite: #ee7f7f;
  --icon-blue:  #3156a5;
  --rule-light: #ececec;

  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

.hinafuroshiki-page {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper-2);
  line-height: 1.9;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

.hinafuroshiki-page img { max-width: 100%; display: block; }
.hinafuroshiki-page a { color: inherit; text-decoration: none; }
.hinafuroshiki-page ul,
.hinafuroshiki-page ol { list-style: none; margin: 0; padding: 0; }
.hinafuroshiki-page section { position: relative; }

.hinafuroshiki-page .sec-title {
  text-align: center;
  font-family: var(--serif);
  font-weight: 700;
  /* ユーザー指示: 画面幅768〜1920pxで現行サイズ(26px)→1920px時42pxへ線形スケール。
     768px以下は26pxのまま、1920px以上は42pxで頭打ち。 */
  font-size: clamp(26px, calc(15.33px + 1.389vw), 42px);
  letter-spacing: .1em;
  margin: 0 0 40px;
  /* ユーザー指示: 折り返す時は必ず「松屋プロデュース」の直後（HTML側の<wbr>）
     で改行させる。word-break:keep-allでCJK文字間の任意改行を抑止し、
     <wbr>だけを改行位置にする（幅に関わらず有効、SP限定だったbr.spから変更）。 */
  word-break: keep-all;
}

/* ---------- ヒーロー＋誕生（イントロ） ---------- */
/* ユーザー指示: hero-bg（背景写真）を画面幅で4段階に切り替える。
   1920px以上=hero-1920.png / 1100〜1919px=hero-1100.png /
   700〜1099px=hero-700.png / 699px以下=hero-under700.png。
   各画像はタイトル「雛ふろしき」と紹介文（従来の.hero-title/.hero-lead
   と同内容）を焼き込み済みのため、二重表示を避けるため.hero-head
   （.hero-title/.hero-leadの親）はユーザー確認の上で非表示にする。
   aspect-ratioは各画像の実寸比率に厳密に合わせ、object-fit:coverで
   隙間なく敷き詰める（比率が一致するためcover/containどちらでも
   見た目は同じだが、丸め誤差での隙間を避けるためcoverにする）。 */
.hinafuroshiki-page .hero-intro {
  position: relative;
  z-index: 0;
  text-align: center;
  aspect-ratio: 3338 / 3800; /* 1920px以上: hero-1920.png の実寸比率 */
  background: #D7E4E4;
  /* .hero-headが非表示になったことで.hero-fadeが実質的な最初の子要素になり、
     hero-intro自身にpadding-top/border-topが無いため.hero-fadeの巨大な
     margin-top（画像下部の余白位置に合わせた60%超）がhero-introを突き抜けて
     親の.hero-introごと下に押し出されるマージン相殺（margin collapsing）が
     発生していた。flow-rootで新しいブロック整形コンテキストを作り防止する。 */
  display: flow-root;
}
.hinafuroshiki-page .hero-intro .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: -1;
}
@media (min-width: 1100px) and (max-width: 1919px) {
  .hinafuroshiki-page .hero-intro { aspect-ratio: 2167 / 2458; }
  .hinafuroshiki-page .hero-intro .hero-bg {
    content: url(../../assets/images/hinafuroshiki/photos/hero-1100.png);
  }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .hinafuroshiki-page .hero-intro { aspect-ratio: 1430 / 1000; }
  .hinafuroshiki-page .hero-intro .hero-bg {
    content: url(../../assets/images/hinafuroshiki/photos/hero-700.png);
  }
}

@media (max-width: 699px) {
  .hinafuroshiki-page .hero-intro { aspect-ratio: 786 / 1653; }
  .hinafuroshiki-page .hero-intro .hero-bg {
    content: url(../../assets/images/hinafuroshiki/photos/hero-700.png);
  }
}
/* タイトル・紹介文は各hero-bg画像に焼き込み済みのため、ライブ要素
   （.hero-title/.hero-lead の親）は非表示にする（ユーザー確認済み）。 */
.hinafuroshiki-page .hero-head { display: none; }
/* Figma実データ確認: 「雛ふろしき」の文字はライブテキストではなく、
   アウトライン化されたベクターパス（フォント依存なしのロゴ的な扱い）だったため、
   Figmaから書き出したSVGを画像として表示する */
.hinafuroshiki-page .hero-title {
  margin: 0 0 26px;
  line-height: 0;
}
.hinafuroshiki-page .hero-title img {
  display: block;
  margin: 0 auto;
  width: 647px;
  height: auto;
}
/* ユーザー指示: 768〜1300px幅ではhero-titleも相対的に縮小し、背景画像
   （aspect-ratioで幅に比例して縮む）の風呂敷部分に被らないようにする。
   hero-title側はpadding-top:64px等が固定pxのままなので、768px幅側で
   380px、1300px幅側でPC基準の647pxに一致するようclamp()で連続的に
   スケールさせる（1300pxの境界でPC設定と段差なく繋がる）。
   380pxはFigma実測未確認の暫定値。要目視確認。 */
@media (min-width: 769px) and (max-width: 1300px) {
  .hinafuroshiki-page .hero-title img {
    width: 50vw;
  }
}

.hinafuroshiki-page .hero-lead {
  margin: 0 auto;
  font-family: var(--serif);
  /* ユーザー指示: 現行デスクトップサイズ(16.32px)を最低、1920px時24pxを最大として
     768〜1920pxで線形スケール（768px以下のSPは既存どおり14.4px固定のため
     ここでは変更しない）。 */
  font-size: clamp(16.32px, calc(11.2px + 0.6667vw), 24px);
  line-height: 1.6;
  letter-spacing: 0;
}

/* Figma実データ確認: 「誕生」見出し〜本文の背後には柄写真を白くフェードさせる
   グラデーション層があり、それによって可読性を確保している（text-shadowだけでは
   柄の上に文字がそのまま乗ってしまい不十分）。hero-introの直接の子として配置し、
   bottom:0を使うことで「hero-fadeから何pxか」という推測をやめ、
   確実にセクション最下端・画面幅いっぱいまで届くようにする。 */
.hinafuroshiki-page .hero-fade,
.hinafuroshiki-page .hero-head {
  position: relative;
  z-index: 1;
}
/* margin-top/padding-topを%指定にする。CSSでは縦方向のmargin/paddingの%は
   要素の高さではなく「包含ブロックの幅」基準になる仕様のため、hero-introの
   幅を基準とした比率になる。hero-introはaspect-ratioで幅から高さが決まる
   （＝画像サイズも幅に比例）ため、結果として画像サイズに連動して伸縮する。
   ユーザー指示によりhero-bgが4段階の縦長画像に変更され、各画像は実写部分の
   下に余白（フェード用の余白）が焼き込み済み。margin-top+padding-top(50%)の
   合計が実写の終わる位置（画像を解析し実測: 1100px以上グループは高さの
   約71%、699px以下グループは高さの約52%）に一致するよう、画像比率ごとに
   margin-topを再計算した（padding-topの50%は据え置き）。 */
.hinafuroshiki-page .hero-fade {
  margin-top: 18%; /* 1920px以上・1100〜1919px共通（同一比率グループ） */
  padding: 50% 20px 50px;
}
@media (max-width: 1099px) {
  .hinafuroshiki-page .hero-fade { margin-top: 44%; }
}
@media (max-width: 699px) {
  .hinafuroshiki-page .hero-fade { margin-top: 94%; }
  .hinafuroshiki-page .hero-intro::before {display: none;}
}
.hinafuroshiki-page .hero-intro::before {
  content: "";
  position: absolute;
  top: 40%;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
background: linear-gradient(180deg, rgba(237, 243, 244, 0) 0%, rgba(237, 243, 244, 0.09) 1%, rgba(237, 243, 244, 0.3) 5%, rgba(237, 243, 244, 0.49) 8%, rgba(237, 243, 244, 0.65) 12%, rgba(237, 243, 244, 0.78) 16%, rgba(237, 243, 244, 0.87) 20%, rgba(237, 243, 244, 0.94) 24%, rgba(237, 243, 244, 0.99) 28%, #EDF3F4 33%, #D7E4E4 100%);
opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 1099px) {
  .hinafuroshiki-page .hero-intro::before { top: 30%; }
}
.hinafuroshiki-page .hero-fade > * {
  position: relative;
  z-index: 1;
}
.hinafuroshiki-page .intro-body {
  max-width: 760px;
  margin: 0 auto;
}
.hinafuroshiki-page .intro-body p {
  margin: 0 0 30px;
  font-family: var(--serif);
  /* ユーザー指示: 768〜1920pxで現行14px→1920px時21pxへ線形スケール */
  font-size: clamp(14px, calc(9.33px + 0.6076vw), 21px);
  line-height: 1.5;
}

/* ---------- 製法ストーリー ---------- */
.hinafuroshiki-page .craft {
  background: var(--paper-blue);
  overflow: hidden;
  position: relative;
}
.hinafuroshiki-page .craft-inner {
  /* ユーザー指示: craft-inner自体の上下余白は広く、中身同士の間隔は狭くする */
  padding: 120px 40px;
  max-width: 1164px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
/* ユーザー指示: PCはテキスト側を大きく、写真側を小さくする。
   grid-template-columnsは「列位置」でサイズが決まるため、reverse行で
   order入れ替えを行うと写真とテキストの列（＝サイズ）も入れ替わってしまい、
   通常行とreverse行でサイズ関係が逆転していた。flexにしてcraft-text/
   craft-photoそれぞれにflex-basis比率を持たせ、orderによる表示位置の
   入れ替えに影響されないようにする。 */
.hinafuroshiki-page .craft-row {
  display: flex;
  gap: 52px;
  align-items: center;
  margin-bottom: 64px;
}
.hinafuroshiki-page .craft-row:last-child { margin-bottom: 0; }
.hinafuroshiki-page .craft-row.reverse .craft-text { order: 2; }
.hinafuroshiki-page .craft-row.reverse .craft-photo { order: 1; }

.hinafuroshiki-page .craft-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 20px;
  font-family: var(--serif);
}
.hinafuroshiki-page .craft-cat {
  font-size: 18px;
  letter-spacing: 0;
  color: var(--ink);
  font-weight: 400;
}
.hinafuroshiki-page .craft-title .bar { color: #a1a0a0; }
.hinafuroshiki-page .craft-name {
  font-family: var(--serif);
  font-size: 21.6px;
  letter-spacing: .1em;
  font-weight: 700;
}
.hinafuroshiki-page .craft-text {
  flex: 1.15 1 0;
  min-width: 0;
}
.hinafuroshiki-page .craft-text p {
  margin: 0;
  /* ユーザー指示: 768〜1920pxで現行13.44px→1920px時16pxへ線形スケール */
  font-size: clamp(13.44px, calc(11.73px + 0.2222vw), 16px);
  line-height: 1.6;
  color: var(--ink);
}
.hinafuroshiki-page .craft-photo {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* 装飾ウォーターマーク
   重要: position:stickyは使わない。.craft/.products/.tyingはいずれも
   overflow:hiddenを持ち（カード罫線やフェード演出のため必要）、sticky要素の
   祖先にoverflow:hidden/scroll/autoが挟まると、そのSECTION自体は実際には
   スクロールしていない（ページ全体がhtml/documentElementでスクロールする）
   ため、stickyの「固定」判定が一切効かず単なるstatic配置と同じ挙動になる
   （実機検証で確認済みのбрラウザの既知挙動）。そのためJS
   （hinafuroshiki.js内のupdateWatermarks）でscroll毎にgetBoundingClientRect
   を見て、position:fixed（画面固定）とposition:absolute（セクション上端/
   下端に留め置き）を動的に切り替える方式に変更した。 */
/* ユーザー指示によりテキスト(span+CSSフォント)からFigma書き出し画像に差替え。
   wm-hina.pngは#edf3f4(--paper-blue)、wm-furoshiki.pngは#ffffffの不透明PNG
   （元画像自体の色をそのまま使う。透明部分はtransparent）。 */
.hinafuroshiki-page .wm {
  position: fixed;
  display: block;
  user-select: none;
  z-index: 1;
  pointer-events: none;
  width: auto;
}
/* leftはJS(updateWatermarks)が.l-header(幅245pxの固定サイドバー)の右端に
   合わせて上書きするため、ここでの245pxはJS実行前の暫定値 */
.hinafuroshiki-page .wm-hina { top: 0; left: 245px; height: 200px; opacity: .85; }
/* ユーザー指示: 背景装飾「ふろしき」を右に詰める（右端の余白をなくす） */
.hinafuroshiki-page .wm-furoshiki { bottom: 24px; right: 0; height: 500px; }
/* ユーザー提供のwm-hina-blue.png/wm-furoshiki-blue.png（#EDF3F4で焼き込み済み）
   をproducts（背景白）専用に使うことで、フィルターに頼らず正しい色で
   表示する（craft/tyingは背景が薄い青緑のため白版wm-hina-white.png/
   wm-furoshiki-white.pngを使用、PHP側で使い分け済み）。 */
.hinafuroshiki-page .products .wm { filter: none; opacity: .85; }

/* ---------- 商品グリッド（登録商品） ---------- */
.hinafuroshiki-page .products { padding: 100px 40px 130px; overflow: hidden; position: relative; }
.hinafuroshiki-page .products-head {
  text-align: center;
  margin-bottom: 56px;
  font-family: var(--serif);
  font-size: 16.32px;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}
/* ユーザー指示: 768〜1920pxで現行16.32px(親.products-headから継承していた値)
   →1920px時24pxへ線形スケール */
.hinafuroshiki-page .products-head p { margin: 0; font-size: clamp(16.32px, calc(11.2px + 0.6667vw), 24px); }
.hinafuroshiki-page .products-empty {
  text-align: center;
  color: var(--ink-soft);
  font-size: 14.72px;
}

.hinafuroshiki-page .grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  row-gap: 0;
  column-gap: 0;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
/* Figma実データ確認: カードを区切る罫線は格子状で、縦線と横線が交差する部分
   （カードとカードの隙間の角）では線が途切れて消えている。
   縦・横とも罫線を「カード自身の範囲」に閉じることで、隙間（gap）部分では
   どちらの線も存在しなくなり、交差部分が自然に空く格子を再現する。 */
.hinafuroshiki-page .card {
  position: relative;
  padding:3.5rem;
  padding-left: 5rem;
}
/* ユーザー指示: 768〜968px幅ではgridが3列になり(1400px以下の設定)カード自体が
   狭くなるのに、.cardのpaddingがPC基準の3.5rem/5remのまま変わらず、
   中身(画像・card-label)が相対的に圧迫されて小さく見えていた。
   このレンジだけpaddingを狭めて中身の見た目のサイズを確保する。 */
@media (min-width: 769px) and (max-width: 968px) {
  .hinafuroshiki-page .card {
    padding: 2.25rem;
    padding-left: 3.25rem;
  }
  /* card-labelのleftは.cardのpaddingに連動しない固定値のため、
     padding-leftを縮めたぶん画像との隙間が狭まり被っていた。
     ここでも合わせて縮小し、画像(padding-left:3.25rem=32.5px始点)との
     隙間を確保する。ユーザー指示により1rem→0.5remでさらに隙間を広げる
     （label右端〜画像左端の隙間: 約8px→約13px）。 */
  .hinafuroshiki-page .card-label { left: 0.5rem; }
}
.hinafuroshiki-page .card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #edf3f4;
  width: 90%;
  margin: 0 auto;
}
/* ユーザー指示: グリッド最下段のカードには下罫線は不要。
   商品数は可変で列数もブレークポイントごとに変わる（5列/3列等）ため、
   nth-childの倍数計算では最下段を正しく特定できない。
   JS(hinafuroshiki.js)側で実際のoffsetTopから最下段を判定し
   .is-last-rowを付与する（リサイズ・画像読込後も再判定）。 */
.hinafuroshiki-page .card.is-last-row::after { content: none; }
.hinafuroshiki-page .card:not(:nth-child(5n+1))::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0;
  width: 2px;
  background: #edf3f4;
  height: 90%;
  margin: auto 0;
}
.hinafuroshiki-page .card-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
/* Figma実測（貝合わせラベル）: 文字上端〜上罫線 約11.8px、文字下端〜下罫線 約12.5px
   （ほぼ左右対称）。line-height由来の余白のブレを避けるため line-height:1 にし、
   paddingで直接ギャップを再現する */
/* Figma実測: 「貝合わせ」の文字（貝）の高さは約14px。以前の10.88pxは
   小さすぎたため引き上げる。罫線もborderではなく::before/::after
   （テキストのすぐ前後に位置する擬似要素）に変更し、見た目は変えずに実装する */
.hinafuroshiki-page .card-label {
  writing-mode: vertical-rl;
  font-size: 14.4px;
  line-height: 1;
  letter-spacing: .18em;
  color: var(--ink);
  padding: 9px 0;
  position: absolute;
  left: 2rem;
}
.hinafuroshiki-page .card-label::before,
.hinafuroshiki-page .card-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
}
.hinafuroshiki-page .card-label::before { top: 0; }
.hinafuroshiki-page .card-label::after { bottom: 0; }
/* ユーザー指示: card-figをホバーで1.1倍に拡大するが、カード全体の最大サイズ
   （レイアウト上の見た目のサイズ）は変えたくない。そのためサイズ・
   aspect-ratioを持つ枠（.card-fig-wrap）と、実際に拡大されるimg（.card-fig）
   を分離し、枠側にoverflow:hiddenを付けて拡大分を内側にクリップする。 */
.hinafuroshiki-page .card-fig-wrap {
  flex: 1;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border-radius: 1px;
  width: 100%;
  margin: 0;
  overflow: hidden;
  display: block;
}
.hinafuroshiki-page .card-fig {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .2s, transform .4s;
}
.hinafuroshiki-page .card-inner:hover .card-fig,
.hinafuroshiki-page .card-inner:focus-visible .card-fig {
  opacity: .82;
  transform: scale(1.1);
}

/* ---------- ライフスタイル ---------- */
/* ユーザー指示によりlifestyle.png（3332×1432、余白なしのフルサイズ写真）に
   差し替え。今回は画像全体が写真のため、aspect-ratioを実画像比率に
   そのまま合わせ、object-positionはcenterに戻す。 */
.hinafuroshiki-page .lifestyle {
  position: relative;
  background: var(--paper-blue);
  aspect-ratio: 3332 / 1432;
  height: auto;
  overflow: hidden;
}
.hinafuroshiki-page .lifestyle-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  object-position: center;
}
.hinafuroshiki-page .lifestyle-title {
  position: absolute;
  top: 2.2vw;
  right: 2.2vw;
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.4vw;
  letter-spacing: .18em;
  line-height: 1.7;
  margin: 0;
}

/* ---------- ふろしきの結び方 ---------- */
/* overflow:hidden だと#howtowrapや#step-*へのアンカースクロールが
   効かなくなる（ブラウザがこの要素を「最寄りのスクロールコンテナ」とみなし、
   実際にはスクロールできないこの要素内で処理を止めてしまうため）。
   透かし文字の水平方向のはみ出しだけ隠せればよいので overflow-x のみに限定する。 */
/* ユーザー指示によりtying-bg.png（3332×1648）に差し替え。以前のCSSグラデーションの
   代わりに背景画像をbackground-size:coverで敷く（.tyingは手順数などで高さが
   可変のためaspect-ratioではなくcoverで常に隙間なく埋める）。#E0EDEEは
   画像読み込み前後の色ずれを避けるフォールバックとして残す。 */
.hinafuroshiki-page .tying { padding: 96px 80px 120px; background: url(../../assets/images/hinafuroshiki/photos/tying-bg.png);    background-repeat: no-repeat;
    /* background-size: cover; */
    background-position: top center;
    background-size: contain;
    background-color: #E0EDEE; }
/* ユーザー指示: tyingのmax-widthを1164pxにする。craft/craft-innerと同じ構造にし、
   .tying自体（背景グラデーションを持つセクション本体）は全幅のまま、
   中身だけを.tying-innerでmax-width:1164pxに中央寄せする
   （直接.tyingにmax-widthを付けると背景も1164px幅に収まってしまうため）。 */
.hinafuroshiki-page .tying-inner {
  max-width: 1164px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
/* ユーザー指示によりCSS装飾（罫線+枠+CSSフォント）からFigma書き出し
   画像に差替え。当初はtying-lead（「包み方の一例をご紹介！」の書体画像）と
   tying-title-group（罫線・枠・「ふろしきの結び方」）を別画像にしていたが、
   ユーザー指示により1枚の画像（tying-lead側の文言を内包）に統合したため、
   tying-lead要素自体をHTML側から削除した（このCSSも不要になり削除）。 */
.hinafuroshiki-page .tying-title-group {
  margin: 0 auto 64px;
  max-width: 1160px;
  line-height: 0;
}
.hinafuroshiki-page .tying-title-group img {
  display: block;
  width: 100%;
  height: auto;
}

/* ユーザー指示によりテキストから画像(swipe-hint.png, 478x63)に差替え */
.hinafuroshiki-page .swipe-hint {
  display: none;
  width: 239px;
  height: auto;
  margin: 0 auto 24px;
}

.hinafuroshiki-page .tying-ornament-row,
.hinafuroshiki-page .tying-title-row,
.hinafuroshiki-page .tying-title-group,
.hinafuroshiki-page .tie-icons,
.hinafuroshiki-page .swipe-hint,
.hinafuroshiki-page #tying-steps {
  position: relative;
  z-index: 2;
}
.hinafuroshiki-page .tie-icons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 56px 24px;
  max-width: 1200px;
  margin: 0 auto 80px;
}
.hinafuroshiki-page .tie-icons li { text-align: center; }
/* ユーザー指示: PC(マウスホバー可能な環境)では、tie-iconsにマウスオーバーで
   少し拡大+右へ傾ける演出を付ける。タッチ端末での擬似hover残留を避けるため
   hover:hover/pointer:fineで判定する。
   SP(タッチ端末)では:hoverの代わりに、liを指でホールドしている間だけ
   hinafuroshiki.js（pointerdown〜pointerup/cancel）が付け外しする
   .is-touch-activeクラスで同じtransformを発火させる（下記）。
   transitionはどちらの入力方式でも滑らかに動くよう、hover限定にせず
   常時有効にしておく。 */
.hinafuroshiki-page .tie-icons li a img {
  transition: transform .3s;
}
@media (hover: hover) and (pointer: fine) {
  .hinafuroshiki-page .tie-icons li:hover a img {
    transform: scale(1.05) rotate(5deg) translate(0px, -11px);
  }
}
.hinafuroshiki-page .tie-icons li.is-touch-active a img {
  transform: scale(1.05) rotate(5deg) translate(0px, -11px);
}
/* .row-breakはSP専用の改行用スペーサー（2-3-3-2列にするため）。
   PCの5列グリッドではセルを1つ消費して並びが崩れるため、既定では非表示にし
   SPのブレークポイント内でのみ改行用に働かせる。 */
.hinafuroshiki-page .tie-icons .row-break { display: none; }
.hinafuroshiki-page .tie-icons li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  /* バグ修正: <a href>をSPで指ホールドすると、iOS Safari等がリンクの
     長押しメニュー（プレビュー/コピー等）を出そうとして途中でpointercancel
     が発火し、hinafuroshiki.jsが付けたis-touch-activeが即座に外れて
     拡大演出が動いているように見えなかった。-webkit-touch-calloutを
     無効化してこの長押しメニューの発生自体を止める。 */
  -webkit-touch-callout: none;
}
.hinafuroshiki-page .ph-icon {
  height: 110px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* word-break:keep-allでCJK文字間の任意改行を抑止し、HTML側に入れた
   <wbr>（「包み」の直前）だけを改行位置にする */
/* ユーザー指示: 768〜1920pxで現行サイズ→1920px時の下記サイズへ線形スケール
   （b: 12→24px, small: 10.88→15px） */
.hinafuroshiki-page .tie-icons b { font-family: var(--serif); font-weight: 600; font-size: clamp(12px, calc(4px + 1.0417vw), 24px); word-break: keep-all; }
.hinafuroshiki-page .tie-icons small { font-size: clamp(10.88px, calc(8.13px + 0.3576vw), 15px); color: var(--ink); line-height: 1.5; }

/* ユーザー指示: SP版steps-blockの上下罫線がスライドすると動く不具合を修正。
   罫線(border/::before/::after)を持つ.steps-blockと、実際に横スクロールする
   要素を分離する。.steps-block-scroll（内側、overflow-xを持つ）がドラッグ/
   スワイプで動く一方、.steps-block（外側、[label|scroll-wrapper]のgridを
   組む）はスクロールしない静止した箱として罫線を保持するため、罫線が
   スクロール位置に連動しなくなる。 */
.hinafuroshiki-page .steps-block {
  position: relative;
  max-width: 1264px;
  margin: 0 auto 32px;
  /* ユーザー指示: li i↔ph-step間を16px広げた分(.ph-stepのmargin-top参照)を
     ここで16px減らして相殺し、罫線位置・ブロック全体の高さを変えない */
  padding-bottom: 32px;
  border-bottom: 1px solid var(--icon-blue);
  /* ユーザー指示: steps-labelをsteps-block-scroll（横スクロールする箱）の外に
     出したため、[label | scroll-wrapper]の2カラムgridはスクロールしない
     この.steps-block側で組む（以前は.steps-block-scroll側が持っていた）。
     steps-block-scroll側で写真背景（.tying-bg.png）がラベル文字の下に
     透けて見える問題があったため、そもそもラベルをスクロール領域の外に
     置くことで解決する。 */
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 24px;
  align-items: start;
}
.hinafuroshiki-page .steps-block-scroll {
  /* grid track(1fr)がcontentのmin-content幅を下限に広がってoverflow-x:autoが
     効かなくなるのを防ぐ（.steps-block-scrollは.steps-blockのgridアイテム）。 */
  min-width: 0;
}
/* ユーザー指示: steps-blockは左右とも画面はじいっぱいまで伸ばす。ただし
   上下の罫線(border-top/bottom)は親.tyingのpadding分(20px)だけ左右に
   余白を取る（罫線だけ元の位置に留める）。SPのみに適用しPCには適用しない。
   --side-gapは元のmax-width:1264px+margin:0 autoが生む左右の余白と同じ計算式
   （SP幅では実質0になる）。marginを左右とも.tyingのSP時のpadding(20px、
   768px用ブロックの.tying{padding:72px 20px 90px}に対応)ぶんだけ外側へ
   伸ばし、widthもその2倍(40px)を足して.tyingの左右端（画面端と一致）まで
   届かせる。罫線は::before/::afterに切り出し、left/rightを20pxにして
   ブロック自体の全幅ではなく元のパディング基準の幅に収める。 */
@media (max-width: 768px) {
  .hinafuroshiki-page .steps-block {
    --side-gap: max(0px, (100% - 1264px) / 2);
    max-width: none;
    margin-left: calc(var(--side-gap) - 20px);
    margin-right: 0;
    width: calc(100% + 40px - var(--side-gap));
    position: relative;
    border-bottom: none;
    /* SPの狭い横幅に合わせて[label|scroll-wrapper]列幅とgapを縮小する
       （元は.steps-block-scroll側で指定していたが、gridの主が.steps-block
       に移ったためこちらへ移動）。 */
    grid-template-columns: 44px 1fr;
    gap: 12px;
  }
  .hinafuroshiki-page .steps-block::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    border-bottom: 1px solid var(--icon-blue);
  }
}
/* Figma確認: 最初のsteps-blockは他ブロックと違い上側にも罫線が入る
   （2番目以降は前ブロックのborder-bottomが実質「上の罫線」を兼ねるが、
   先頭ブロックの上にはそれが無いため個別に補う）。 */
.hinafuroshiki-page #tying-steps .steps-block:first-child {
  padding-top: 32px;
  border-top: 1px solid var(--icon-blue);
}
/* SP(≤768)では左右フルブリードに伴い、first-childのborder-topも
   親.tyingのpadding分(20px)だけ内側に収める::beforeに切り替える。
   ベース側のborder-topルールより後ろに置き、同じ詳細度で確実に上書きする
   （以前は順序が逆で、基本ルールのborder-topが勝ってしまい罫線が二重に
   見えていた）。
   さらに::beforeは.steps-block:first-child自身ではなく親の#tying-steps
   に付ける。.steps-block自身はSPでoverflow-x:autoのスクロールコンテナに
   なっており、その子（position:absoluteの::before含む）はスクロール量に
   応じて一緒に動いてしまうため、スクロールしない親側に置くことで罫線が
   スライド操作で動かないようにする。 */
@media (max-width: 768px) {
  .hinafuroshiki-page #tying-steps .steps-block:first-child {
    border-top: none;
  }
  /* バグ修正: .steps-block::afterと長さが揃っていなかった。.steps-blockは
     SPで--side-gap計算により画面端まで伸びるedge-to-edge要素になっており、
     その上でleft:20px/right:20pxを指定しているため、実際は画面端から20px
     の位置に線が来る。一方#tying-stepsは親.tying-innerの通常フロー内に
     あり、さらにその親.tyingが20pxの左右paddingを持つため、#tying-steps
     自体が既に画面端から20px内側にある。ここでさらにleft:20px/right:20px
     を指定すると合計40px内側になってしまい、.steps-block::afterより
     短くなっていた。#tying-steps自身の左右端（＝画面端から20px）に
     揃えれば.steps-block::afterと同じ「画面端から20px」の位置になるため、
     left/rightは0にする。 */
  .hinafuroshiki-page #tying-steps::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 1px solid var(--icon-blue);
  }
}
.hinafuroshiki-page .steps-label {
  writing-mode: vertical-rl;
  /* ユーザー指示: ラベル内の英数字（例: お弁当包みA/B）が既定(mixed)だと
     横倒しに回転して読みにくいため、upright指定で回転させず縦書きの
     まま1文字ずつ積む表示にする。 */
  text-orientation: upright;
  margin: 0;
  font-family: var(--serif);
  /* ユーザー指示: 768〜1920pxで現行16.32px→1920px時24pxへ線形スケール */
  font-size: clamp(16.32px, calc(11.2px + 0.6667vw), 24px);
  letter-spacing: .2em;
  justify-self: center;
  align-self: center;
  position: relative;
  padding: 14px 0;
  /* ユーザー指示: steps-labelは.steps-block-scroll（横スクロールする箱）の
     外にHTML構造ごと出したため、スクロールに巻き込まれず常に左端に留まる。
     以前はsteps-block-scroll内でposition:stickyを使っていたが、その方式だと
     背後を通過するsteps側の写真背景（.tying-bg.png）がラベル文字の下に
     透けて見えてしまっていた。構造分離により、そもそも重なりが起きない。 */
}
.hinafuroshiki-page .steps-label::before,
.hinafuroshiki-page .steps-label::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 1px;
  background: var(--ink-soft);
}
.hinafuroshiki-page .steps-label::before { top: 0; }
.hinafuroshiki-page .steps-label::after { bottom: 0; }

/* ユーザー指示: 手順の説明文（.tie-icons smallと同内容）をsteps-block内にも
   表示する。PCではま結びブロックのみ、スライダーの下に1行表示する
   （他ブロックは今回対象外のため既定で非表示にしておく）。SPでは全ブロックで
   表示する（下のSP用@media内でdisplayを上書き）。 */
.hinafuroshiki-page .steps-desc {
  display: none;
  margin: 0;
  /* ユーザー指示: 文字サイズを.steps li pと同じにする */
  font-size: clamp(12.48px, calc(10.8px + 0.2188vw), 15px);
  color: var(--ink);
  line-height: 1.5;
}
.hinafuroshiki-page .steps-block:has(#step-mamusubi) .steps-desc {
  display: block;
  /* バグ修正: grid-rowを明示せずgrid-column:2だけ指定すると、DOM順で
     steps-block-scrollより先に置かれているこの要素がauto配置の row1
     col2（本来scrollが入る位置）を先取りしてしまい、scrollが行き場を
     失って幅40pxの列1側に押し込まれてしまっていた（overflow-x:visible
     でたまたま見た目は崩れなかっただけ）。grid-rowも明示してscroll行
     （row1）と衝突しない次の行に固定する。 */
  grid-column: 2;
  grid-row: 2;
  margin-top: -8px;
  padding-left: 27px;
}

.hinafuroshiki-page .steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 100%;
  /* min-width:0でgridの1frトラックが子の内容量に応じて広がるのを防ぐ
     （既定だとトラックはcontentのmin-content幅を下限に広がってしまう）。
     .steps自体はoverflow-x:visibleにして、はみ出た分は親.steps-block-scroll
     のoverflow-xで受け止める（steps-labelは構造上ここに含まれないため
     一緒にスライドしない）。 */
  min-width: 0;
}
/* 手順が5個以上のブロック（お弁当包み①5手順版）は4カラムグリッドに収まらず
   崩れるため、SP版と同じ横スライド（スワイプ）表示にする。
   スクロール自体は.steps-block-scroll側（:has()で検出）が担う。 */
.hinafuroshiki-page .steps.steps-scroll {
  display: flex;
  overflow-x: visible;
  gap: 18px;
}
.hinafuroshiki-page .steps-block-scroll:has(.steps.steps-scroll) {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
/* ユーザー指示: 「手順5個以上」という固定条件をやめ、実際に横スクロール
   できるブロックであれば手順数に関わらず対象にする（PC）。CSSだけでは
   「スクロール可能かどうか」を判定できないため、全ブロックに
   .steps-more-hint要素自体は用意しておき（taxonomy-...php側で全10ブロック
   に付与済み）、表示のON/OFFはJS側のIntersectionObserverに一任する：
   最後の手順が既に十分見えている＝スクロールできない/し切った状態では
   .is-hiddenが付いてopacity:0になるため、スクロール不要なブロックでは
   自然に非表示のままになる。矢印そのものの実画像は未確定のため、暫定で
   CSS三角形（border trick、::before）を仮表示している。実画像が確定したら
   .steps-more-hint::beforeをbackground-image方式に差し替える想定。
   .steps-blockはposition:relativeを持つのでその基準でright端に絶対配置する
   （.steps-block-scrollのoverflow-xには影響されないよう、スクロールしない
   .steps-block側の子にしている）。 */
.hinafuroshiki-page .steps-more-hint {
  display: block;
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s;
}
.hinafuroshiki-page .steps-more-hint.is-hidden {
  opacity: 0;
}
.hinafuroshiki-page .steps-more-hint::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 20px solid var(--icon-blue);
  opacity: .6;
}
/* バグ修正: .steps-block-scroll:has(.steps.steps-scroll)（手順5個以上の
   ブロック）は scroll-snap-type: x mandatory の詳細度が(0,4,0)あり、
   単純な .steps-block-scroll.is-dragging（(0,3,0)）のscroll-snap-type:none
   はそれより低いため負けて上書きできていなかった（＝5個以上のブロックだけ、
   ドラッグ操作やホイール操作でscrollLeftを直接動かしてもmandatoryスナップに
   押し戻されて全く動いて見えない不具合があった。手順4個以下のブロックは
   別ルール（詳細度(0,2,0)）でスナップが掛かるため、そちらは元々.is-draggingで
   正しく解除できていた）。:has()を含む同等のセレクタを併記して詳細度を
   (0,5,0)まで上げ、確実にこちらが勝つようにする。 */
.hinafuroshiki-page .steps-block-scroll.is-dragging,
.hinafuroshiki-page .steps-block-scroll:has(.steps.steps-scroll).is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.hinafuroshiki-page .steps.steps-scroll li {
  flex: 0 0 calc(25% - 13.5px);
  scroll-snap-align: start;
}
.hinafuroshiki-page .steps li {
  padding: 0 9px 0 27px;
  position: relative;
}
/* var(--rule-light)は#e0edee背景の.tying上ではほぼ同色化して見えなかったため、
   icon-blueを薄めた色に差し替えて視認できるようにする。 */
.hinafuroshiki-page .steps li:not(:first-child) { border-left: 2px solid rgba(49, 86, 165, .25); }
.hinafuroshiki-page .steps li i {
  font-style: normal;
  font-weight: 700;
  color: var(--icon-blue);
  opacity: .55;
  font-size: 20.8px;
}
/* ユーザー指示: li i(手順番号)とph-step(挿絵)の間を広げ(8px→24px)、
   代わりにph-step(挿絵)とli p(説明文)の間を詰める(16px→8px)。
   前者で増えた16pxは.steps-blockのpadding-bottomを16px減らして相殺し、
   罫線(border-bottom)の位置・ブロック全体の高さは変えない。 */
.hinafuroshiki-page .ph-step {
  display: block;
  height: 160px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 12px auto 8px;
}
/* ユーザー指示: ま結びブロックのみ手順画像を150pxにする */
.hinafuroshiki-page .steps-block:has(#step-mamusubi) .ph-step {
  height: 150px;
}
.hinafuroshiki-page .steps li p {
  margin: 0;
  /* ユーザー指示: 768〜1920pxで現行12.48px→1920px時15pxへ線形スケール */
  font-size: clamp(12.48px, calc(10.8px + 0.2188vw), 15px);
  line-height: 1.7;
  color: var(--ink);
  text-align: center;
}

/* ユーザー指示: 1300px以下ではtying-stepsを（手順数に関わらず）全て
   右方向の横スライダーにする。4カラムグリッドの折り返しではなく、
   1項目を固定px幅にすることで表示個数が画面幅なりに変わるようにする
   （820pxの2カラムグリッド化はここで役目を終えるため撤去）。
   768px以下は既にFigma検証済みの2項目固定スライダーのため対象外にする。 */
@media (min-width: 769px) and (max-width: 1300px) {
  /* スクロールは.steps-block-scroll側で行う（steps-labelは構造上その外に
     あるため巻き込まれない。.stepsはoverflow-x:visibleにしてはみ出しを
     親に受け渡す）。 */
  .hinafuroshiki-page .steps-block-scroll {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
  }
  .hinafuroshiki-page .steps {
    display: flex;
    overflow-x: visible;
    gap: 18px;
  }
  /* .steps.steps-scroll li（詳細度[0,2,1]）はcalc(25% - 13.5px)を指定しており、
     ここでの.steps li（[0,1,1]）より詳細度が高く負けてしまうため、
     同じ詳細度で明示的に上書きする。 */
  .hinafuroshiki-page .steps li,
  .hinafuroshiki-page .steps.steps-scroll li {
    flex: 0 0 220px;
    scroll-snap-align: start;
  }
}

/* ---------- 上へ戻る ---------- */
/* テーマ共通の.page-topと同じ「スクロール100px超で表示」挙動をback-to-top専用に実装。
   （.back-to-topに.page-topを重複付与する方式は、直下のグローバルpage-top非表示ルールが
   詳細度の関係でback-to-top自身も巻き込んで常時非表示にしてしまうため廃止した） */
.hinafuroshiki-page .back-to-top {
  position: fixed;
  right: 2rem;
  bottom: -8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 11;
  opacity: 0;
  transition: bottom .4s, opacity .4s;
}
.hinafuroshiki-page .back-to-top.active {
  bottom: 2rem;
  opacity: 1;
}
/* テーマ共通のpage-topはこのページ専用のback-to-topと重複するため非表示にする */
body.term-hinafuroshiki .page-top { display: none; }
.hinafuroshiki-page .back-to-top-label {
  font-size: 11.52px;
  letter-spacing: .18em;
  color: var(--vermillion);
}
.hinafuroshiki-page .back-to-top-icon {
  width: 64px;
  height: auto;
  transition: opacity .2s;
}
.hinafuroshiki-page .back-to-top:hover .back-to-top-icon { opacity: .75; }

/* ---------- 柄拡大モーダル（商品ごとに生成） ---------- */
body.hinafuroshiki-modal-open { overflow: hidden; }

.hinafuroshiki-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ユーザー指示: PCは6vw、SPは36px */
  padding: 6vw;
  /* .hinafuroshiki-modal は</main>の外（DOM上は兄弟要素）にあるため、
     .hinafuroshiki-page の font-family: var(--sans) が継承されず、
     ブラウザ既定フォント（YuGothic等）のまま表示されていた。ここで明示指定する。 */
  font-family: var(--sans);
  color: var(--ink);
}
.hinafuroshiki-modal[hidden] { display: none; }

.hinafuroshiki-modal .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(81, 91, 90, .77);
}

/* .modal-panelはoverflow:autoでスクロール可能にする必要があるため、
   閉じるボタン（パネル角に外側へはみ出す配置）をpanelの中に置くと
   overflowでクリップされて見えなくなってしまう。panelの外側にある
   このラッパーに閉じるボタンを置くことでクリップされないようにする。 */
.hinafuroshiki-modal .modal-frame {
  position: relative;
  width: 100%;
  max-width: 850px;
      margin: 48px auto 0;
}

.hinafuroshiki-modal .modal-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  max-width: 850px;
  width: 100%;
  max-height: calc(100vh - 95px);
  /* overflow-x:hiddenにすると.modal-slide-dots（.modal-mediaの右にright:-50px
     で意図的にはみ出す配置）までクリップされてモーダルの外に消えてしまうため
     autoに戻す。長文でmodal-bodyが広がる問題は.modal-desc側のmax-widthで
     解決済みのため、ここは元のoverflow:autoで十分。 */
  overflow: auto;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

/* SPタップ時の青いハイライトエフェクトを抑制（モーダル内の全ボタン/リンク共通） */
.hinafuroshiki-modal button,
.hinafuroshiki-modal a {
  -webkit-tap-highlight-color: transparent;
}

/* Figma実測: 閉じるボタンは丸背景のない、白い太線（4px）2本を交差させただけの
   ×アイコンで、モーダル右上の角に外側へはみ出す形で重なる（パネル内に収まらない）。 */
.hinafuroshiki-modal .modal-close {
  position: absolute;
    top: -38px;
    right: 0px;
    z-index: 2;
    width: 36px;
    height: 36px;
  border: none;
  background: none;
  padding: 0;
  font-size: 0;
  cursor: pointer;
}
.hinafuroshiki-modal .modal-close::before,
.hinafuroshiki-modal .modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 2px;
  background: #fff;
}
.hinafuroshiki-modal .modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.hinafuroshiki-modal .modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.hinafuroshiki-modal .modal-close:hover { opacity: .75; }

/* Figma実データ確認（node 604:5667）: 情報列（タイトル/説明/価格）は
   画像の左側に縦書き（vertical-rl）で並ぶ。DOM順は価格→説明→タイトルとし、
   通常のflex行で左から「価格・説明・タイトル・画像」の順に配置されるようにする
   （タイトル列が画像に隣接＝Figma実測の並びと一致）。 */
/* 購入ボタンはmodal-body全幅を基準に左右中央配置とする
   （ユーザー指示。以前は画像列基準だったが、modal-body全体で中央寄せに変更）。 */
.hinafuroshiki-modal .modal-body {
  display: grid;
  /* 列1(テキスト)はmax-width:850px時の残り幅、列2(画像)は実寸612pxを
     上限に伸縮する。テキストが少ない時は列1の右端(justify-self:end)に
     常に寄るため画像と隙間ができず、逆に長文で列1が狭くなる場面では
     最低200px（価格+タイトル+説明max-width:140pxの合計が収まる幅）を
     確保し、その分は画像側が先に縮んで画面外へのはみ出しを防ぐ。 */
  grid-template-columns: minmax(200px, 1fr) minmax(0, 612px);
  /* 購入リンクが未設定の商品ではボタン行が生成されないが、それによって
     モーダル全体の高さが変わってしまわないよう、2行目の高さを常に確保する */
  grid-template-rows: auto minmax(64px, auto);
  column-gap: 44px;
  row-gap: 28px;
  align-items: start;
  padding: 50px 62px 27px 42px;
  /* ユーザー指示: modal-bodyの幅は最大850px、中央寄せ。
     box-sizing既定のcontent-boxのままだとmax-widthはpadding抜きの内側
     幅を指すため、実際の見た目の幅がpadding分(104px)広い954pxになって
     しまっていた。border-boxにしてmax-width:850pxがpadding込みの
     見た目の幅そのものになるようにする。 */
  box-sizing: border-box;
  max-width: 850px;
  margin: 0 auto;
}

.hinafuroshiki-modal .modal-media {
  grid-column: 2;
  grid-row: 1;
  /* 列2はminmax(0,612px)で自身の実寸(612px)を上限に伸縮するため、
     widthは100%にしてその列幅にそのまま追従させる。
     grid/flexアイテムはデフォルトでmin-width:auto（内容の最小サイズが
     床になり、明示したminmax(0,...)より縮まなくなる）ため、min-width:0で
     無効化する。これが無いとmodal-body全体がmax-width:850pxを超えて
     はみ出す不具合が起きていた。 */
  width: 100%;
  min-width: 0;
  max-width: 612px;
  aspect-ratio: 612 / 679;
  position: relative;
}
.hinafuroshiki-modal .modal-slider { position: relative; width: 100%; height: 100%; touch-action: none; }
.hinafuroshiki-modal .modal-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.hinafuroshiki-modal .modal-image.is-active { opacity: 1; pointer-events: auto; }

/* gallery（柄の画像）が2枚以上ある場合のスライダー用UI。
   Figma実データ確認: モーダル画像に矢印ボタンは無く、画像右端に枚数を示す
   ドットが縦に並ぶのみ（ナビゲーションは主にドラッグ/スワイプで行う想定）。
   ユーザー指示: 上下・左右どちらのドラッグ/スワイプでもスライドできるようにする */
.hinafuroshiki-modal .modal-slide-dots {
  position: absolute;
  top: 50%;
  /* ユーザー指示によりmodal-mediaをjustify-self:endで右詰めにしたことで、
     right:-50pxのはみ出しがmodal-bodyのpadding(32px)を18px超えて
     modal-panelの外に出てしまっていた。paddingの範囲内(-28px)に収める。 */
  right: -19px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.hinafuroshiki-modal .modal-slide-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
background: #CCDBDD;
  cursor: pointer;
}
.hinafuroshiki-modal .modal-slide-dot.is-active { background: #E95454;
; }

.hinafuroshiki-modal .modal-info {
  grid-column: 1;
  /* ユーザー指示: PC時、modal-infoの高さは右の画像(modal-media)と揃える。
     以前はgrid-row:1/span 2で購入ボタンの行まで含めていたため画像より
     高くなっていた。行を1のみにし、align-self:stretchで
     その行の高さ（＝画像の高さ）いっぱいに揃える。 */
  grid-row: 1;
  align-self: stretch;
  /* grid item(modal-info自身)にもmin-height:0が必要。無いと中の
     modal-descが長文の時、grid行の自動最小サイズの計算にmodal-desc
     （flexの子）の自然な高さがそのまま伝播し、align-self:stretchで
     揃えたはずのmodal-info自体がその高さまで押し広げられてしまう
     （modal-media側で使ったmin-width:0の高さ版）。 */
  min-height: 0;
  /* ユーザー指示: テキストが少ない時も常に画像側（列の右端）に寄せる */
  justify-self: end;
  display: flex;
  /* ユーザー指示: 全要素をstretchすると modal-label のborder-bottom位置が
     ずれてデザインが崩れるため、flex-startに戻す。高さを画像に揃えたいのは
     modal-info自身(上のalign-self:stretch)とmodal-price個別（下記
     .modal-priceのalign-self:stretchで対応）のみとする。 */
  align-items: flex-start;
  /* ユーザー指示: modal-priceとmodal-descの間の余白をなくす。
     DOM順は価格→説明→タイトル(price→desc→label)で、gapは全ての隣接要素間
     に一律にかかるため、gap自体は0にし、desc-label間の間隔だけ
     .modal-labelのmargin-leftで個別に持たせる。 */
  gap: 0;
}

/* Figma実測(node 604:8056): タイトル文字1文字分の幅(block軸)が約34.6px
   あり、フォントサイズが約34pxであるべきところ19.2pxと小さすぎたため修正。
   ユーザー指示によりPC時は28pxに変更（SP時は下のSP用ブロックで34pxに戻す）。 */
/* ユーザー指示: 商品名ふりがな(.modal-furigana)をタイトルの下に表示するため、
   タイトルとふりがなを1つの箱にまとめてmodal-infoの1フレックスアイテムにする。
   desc-title間の間隔（旧.modal-labelのmargin-left）はこのグループ側に移す。 */
.hinafuroshiki-modal .modal-title-group {
  margin: 0 0 0 14px;
  /* バグ修正: 単純にブロック要素として積むだけだと、縦書き(vertical-rl)の
     auto幅（文字の折り返し列数で決まる横幅）の解決方法がブラウザによって
     異なり、Safariではタイトルとふりがなの横幅が揃わず中央が揃って見えない
     不具合があった。flex(column)+align-itemsで明示的に揃えることで、
     各ブラウザの縦書きauto幅の実装差に依存せず確実に左右中央揃えにする。 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hinafuroshiki-modal .modal-label {
  writing-mode: vertical-rl;
  margin: 0;
  padding: 10px 0;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .12em;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  line-height: 1;
  /* ユーザー指示: 商品名が長くても画像(modal-media)と同じ高さまでに収める。
     white-space:nowrapのままだと縦書き1列のまま際限なく縦に伸びてしまうため
     折り返しを許可し、hinafuroshiki.js（syncModalHeights）が設定する
     max-heightに達した分は次の列（縦書きなので左側）へ折り返させる。
     これにより高さは常に画像以下に収まり、増えた文字数は横方向（列数）に
     吸収される。 */
  max-height: 560px;
  overflow: hidden;
}
/* ユーザー指示: 商品名ふりがなは色・サイズ・フォントファミリー等をタイトル
   (.modal-label)と全て同じにする。ただし上下の罫線(border-top/bottom)という
   「装飾」だけは不要なため、.modal-labelから罫線を除いた内容をそのまま複製する
   （colorは両者とも指定せず継承させることで自動的に同じ色になる）。 */
.hinafuroshiki-modal .modal-furigana {
  writing-mode: vertical-rl;
  padding: 10px 0;
  font-family: var(--serif);
  font-size: 20px;
  margin: 0 auto;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  max-height: 560px;
  overflow: hidden;
}

.hinafuroshiki-modal .modal-desc {
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin: 0;
  font-family: var(--sans);
  font-size: 11.84px;
  line-height: 1.5;
  color: var(--ink);
  /* ユーザー指示: modal-descの高さも画像(modal-media)に揃える。
     align-self:stretch + min-height:0 だけでは、grid行(auto)の自動サイズ
     計算がdesc自身の（長文で伸びうる）自然な高さを row1 に伝播させてしまい、
     結果としてmodal-info/modal-body全体が画像より高く広がってしまう
     （行の高さが「画像」ではなく「一番背の高い自然サイズの子」で決まるため）。
     このためmax-heightで実際の上限を明示する必要があり、その値は
     hinafuroshiki.js（openModal内）でmodal-mediaの実測高さを都度
     インラインstyleとして設定している。ここでのmax-heightはJS未実行時の
     保険的フォールバック値。 */
  align-self: stretch;
  /* flexアイテムは既定でmin-height:auto（縦書きテキストを1列に収めようとした
     場合の自然な高さが下限になり、align-self:stretchで縮められない）ため、
     min-height:0で無効化する。 */
  min-height: 0;
  max-height: 560px;
  max-width: 140px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hinafuroshiki-modal .modal-desc p { margin: 0 0 .8em;line-height: 1.6; }
.hinafuroshiki-modal .modal-desc p:last-child { margin-bottom: 0; }

/* ユーザー指示: 「(綿/W50×H52cm)」等の素材・サイズ表記を縦書きにする専用クラス。
   WYSIWYGの「テキスト」タブで <p class="spec">(綿/W50×H52cm)</p> のように
   直接HTMLを打って使う。modal-desc内で使う想定だが、親に依存せず単体でも
   縦書き＋英数字の向きが成立するよう独立して指定する
   （word-break:keep-allで半角記号列(W50×H52cm)が任意の位置で
   折り返されるのを防ぐ）。 */
/* 詳細度注意: .modal-desc p { margin: 0 0 .8em; } (2class+1type=0,2,1)が
   <p class="spec">にもマッチし、.spec単体(2class=0,2,0)より詳細度が高く
   margin-rightを打ち消してしまう。.modal-descを含めて3class(0,3,0)にし
   確実に上書きする。 */
.hinafuroshiki-modal .modal-desc .spec {
  writing-mode: vertical-rl;
  text-orientation: upright;
  word-break: keep-all;
  color: var(--ink-soft);
  /* ユーザー指示: PC時はmargin-right:2rem（SP時は下のSP用ブロックで上書き） */
  margin-right: 2rem;
}
/* .spec内の数字部分を縦中横にする。例: (綿/W<span class="tcy">50</span>×H<span
   class="tcy">52</span>cm)。text-combine-uprightはブラウザによって4文字までしか
   結合しない実装があるため、対象は2〜4桁程度の数字に留めるのが安全。 */
.hinafuroshiki-modal .tcy {
  text-combine-upright: all;
}
/* .spec親のtext-orientation:uprightは英数字を回転させないためのものだが、
   括弧「(」「)」も一緒に回転しなくなり不自然に見える。括弧はmixedに戻して
   縦書き本来の回転（横倒し）をさせる。例: <span class="yoko">(</span>綿/... */
.hinafuroshiki-modal .yoko {
  text-orientation: mixed;
}

/* Figma実測: 価格「3300」は各桁が個別のベクターとして縦に積まれており、
   横向きにまとめられて（縦中横）はいない。各文字が回転せず縦積みで
   並ぶ text-orientation: upright が正しい（以前のtext-combine-uprightは誤り）。 */
.hinafuroshiki-modal .modal-price {
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin: 0;
  font-family: var(--sans);
  font-size: 18.4px;
  color: var(--ink);
  white-space: nowrap;
  /* ユーザー指示: modal-labelはborder-bottom位置が崩れるためstretch対象外にし、
     代わりにmodal-price側を個別にstretchして画像の高さに揃える */
  align-self: stretch;
  line-height: 1;
}
.hinafuroshiki-modal .modal-price .tax { font-size: 11.2px; font-weight: 400; }

.hinafuroshiki-modal .modal-buy-wrap {
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: center;
}

.hinafuroshiki-modal .modal-buy {
  display: inline-block;
  padding: 7px 82px;
  background: none;
  border: 2px solid var(--ink);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0;
  transition: background .2s, color .2s;
}
.hinafuroshiki-modal .modal-buy:hover { background: var(--ink); color: #fff; }

@media (max-width: 768px) {
  /* 縦書き多列テキストは幅の狭い画面では可読性が大きく落ちるため、
     スマホ幅では横書き・中央寄せの簡易レイアウトに切り替える
     （実用性を優先した意図的な調整。PC幅ではFigma通りの縦書きを維持） */
  /* ユーザー指示: SPは36px固定 */
  .hinafuroshiki-modal { padding: 28px; }
  .hinafuroshiki-modal .modal-body { display: flex; flex-direction: column; align-items: center; padding: 32px 24px 24px; }
  .hinafuroshiki-modal .modal-media { width: 100%; order:1;}
  .hinafuroshiki-modal .modal-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    /* ユーザー指示: price-desc間の余白をSPでもなくす。gap自体は0にし、
       desc-label間の間隔だけ.modal-labelのmargin-topで個別に持たせる
       （PC版のgap:0+margin-leftと同じ考え方、SPは縦積みなのでmargin-top）。 */
    gap: 0;
    order:2;
    /* ユーザー指示: 上(画像)との余白を4px詰める(15px→11px) */
    margin-top: 11px;
  }
  /* ユーザー指示: SPではmodal-priceのみ左寄せにする。上にmargin-top:12pxも追加 */
  .hinafuroshiki-modal .modal-price {
    align-self: flex-start;
    text-align: left;
    margin-top: 12px;
  }
  .hinafuroshiki-modal .modal-buy-wrap {
    order:3;
  }
  .hinafuroshiki-modal .modal-label,
  .hinafuroshiki-modal .modal-desc,
  .hinafuroshiki-modal .modal-price,
  .hinafuroshiki-modal .modal-furigana {
    writing-mode: horizontal-tb;
    white-space: normal;
    max-height: none;
  }
  /* ユーザー指示: modal-labelのfont-size変更(34→28px)はPC限定のため、SPは元の34pxを維持。
     margin-leftはPC(横並び)でdesc-title間の間隔を作るためのものなので、
     SP(縦積み+中央寄せ)では中央からずれて見えないよう.modal-title-group側を0に戻す。
     SPでの視覚順はorder指定によりtitle-group→desc→priceのため（下の
     .modal-title-group/.modal-desc/.modal-price のorder参照）、group-desc間の
     間隔は.modal-desc側のmargin-topで持たせる（下記）。 */
  .hinafuroshiki-modal .modal-label,
  .hinafuroshiki-modal .modal-furigana { font-size: 34px; }
  .hinafuroshiki-modal .modal-furigana { font-size: 20px; }
  .hinafuroshiki-modal .modal-title-group { margin-left: 0; }
  /* ユーザー指示: specとその関連クラス(tcy/yoko)もSPでは通常の横書きに戻す。
     text-combine-upright/text-orientationは横書きでは実質no-opだが、
     writing-modeだけは親(.modal-desc)と揃えて明示的にhorizontal-tbにする。 */
  /* ユーザー指示: SP時はmargin-right(PC用)を打ち消しmargin-top:2remにする。
     .modal-desc pの詳細度(0,2,1)に負けないよう.modal-descを含めて(0,3,0)にする。 */
  .hinafuroshiki-modal .modal-desc .spec {
    writing-mode: horizontal-tb;
    word-break: normal;
    margin-right: 0;
    margin-top: 2rem;
  }
}

@media (max-width: 768px) {
  .hinafuroshiki-modal .modal-media { aspect-ratio: 219 / 243; }
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 1400px) {
  .hinafuroshiki-page .grid { grid-template-columns: repeat(3, 1fr); row-gap: 0; column-gap: 0; }
  /* カラム数が3に変わるため、縦罫線を出す対象を3n+1基準に切り替える。
     :not(:nth-child(3n+1))側でcontent等の全プロパティを自己完結させる。
     content/position/width/height/backgroundを再宣言しないと、5n+1にも
     該当する位置（6, 11, 21, 26番目等）はPC基準ルール(:not(:nth-child(5n+1)))
     が適用されずposition:static; height:0のまま実体化せず罫線が消える
     （実機のgetComputedStyleで確認済みの不具合）。 */
  .hinafuroshiki-page .card:not(:nth-child(5n+1))::before { content: none; }
  .hinafuroshiki-page .card:not(:nth-child(3n+1))::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -0;
    width: 2px;
    background: #edf3f4;
    height: 90%;
    margin: auto 0;
    display: block;
  }
}
/* ユーザー指示: 1050px以下はtie-iconsを2-3-3-2列にする
   （旧1024pxの4列中央寄せは1050pxに包含されるため撤去し、
   768px用に実装済みの2-3-3-2のrow-break機構をこちらへ統合）。 */
@media (max-width: 1050px) {
  .hinafuroshiki-page .tie-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 14px;
    max-width: 100%;
  }
  .hinafuroshiki-page .tie-icons small { display: none; }
  /* liを固定104px幅にすると、3個並ぶ行はgap込みで最低340px必要になり、
     コンテナが狭いと3個目が入りきらず崩れる。行ごとの割合幅にしたうえで
     max-width:104pxで上限を付けることで、通常幅では104px固定（元の見た目）、
     コンテナが狭い時だけ縮んで必ず2-3-3-2を維持する。 */
  .hinafuroshiki-page .tie-icons li:nth-child(n+1):nth-child(-n+2),
  .hinafuroshiki-page .tie-icons li:nth-child(n+12):nth-child(-n+13) {
    flex: 0 1 calc(50% - 7px);
    max-width: 104px;
  }
  .hinafuroshiki-page .tie-icons li:nth-child(n+4):nth-child(-n+6),
  .hinafuroshiki-page .tie-icons li:nth-child(n+8):nth-child(-n+10) {
    flex: 0 1 calc(33.333% - 9.334px);
    max-width: 104px;
  }
  .hinafuroshiki-page .tie-icons .row-break {
    display: block;
    flex-basis: 100%;
    width: 0;
    height: 0;
    margin: 0;
  }
}

/* ユーザー指示: Craftセクションのみ900px以下でSPレイアウトに切り替える
   （他セクションのSP境界値768pxとは独立の専用ブレークポイント） */
@media (max-width: 900px) {
  /* .craft-rowはPC側でflexに変更したため、SPで縦積みにするには
     flex-direction:columnが必要（旧grid-template-columns:minmax(0,1fr)の
     単一カラムグリッドが担っていた縦積みの代替）。
     align-items:centerはPC横並び時の縦中央揃え用のため、縦積みでは
     flex-startに上書きしてタイトル等を左寄せに戻す（centerのままだと
     craft-titleが横中央寄せになってしまう）。 */
  .hinafuroshiki-page .craft-row { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 60px; }
  /* Figma実データ確認（SPフレーム）: モバイルでは「見出し→写真→本文」の順になる
     （デスクトップの「見出し+本文」ひとまとまり→写真、とは異なる）。
     .craft-text を display:contents にして craft-title と p を .craft-row の
     直接の子として扱えるようにし、それぞれに order を指定する。 */
  .hinafuroshiki-page .craft-text { display: contents; }
  /* ユーザー指示: SPではCraftのタイトルは左寄せ */
  .hinafuroshiki-page .craft-title { order: 1; margin-bottom: 0; text-align: left; }
  .hinafuroshiki-page .craft-photo { order: 2; }
  .hinafuroshiki-page .craft-text p { order: 3; }
  /* ユーザー指示: CraftセクションはSPの見た目を768pxではなく900px以下から適用する。
     元は768px側にあった値（padding/margin-bottom）をここに統合。 */
  .hinafuroshiki-page .craft-inner { padding: 40px 20px 60px; }
}

@media (max-width: 768px) {
  /* tie-iconsのレイアウトは1050px用ブロックで完結済み（displayがflexのため
     ここでのgrid-template-columns指定は無効・不要だった） */
  /* Figma実データ確認（SPフレーム）: lifestyle-photoもhero-introと同様、
     SP専用の縦長構図の写真（ユーザー指示によりlifestyle-sp.png、778×1156に差替え）
     が用意されている。aspect-ratio/gap等の値は下の768pxブロック（旧520px、
     SPデザイン一本化後の基準値）で指定するため、ここでの重複指定はしない。 */
  .hinafuroshiki-page .lifestyle { height: auto; }
  .hinafuroshiki-page .lifestyle-photo { content: url(../../assets/images/hinafuroshiki/photos/lifestyle-sp.png); }
  .hinafuroshiki-page .lifestyle-title { top: 16px; right: 16px; }
  /* .stepsの2カラムグリッド化は1300px以下の横スライダー化で不要になったため削除 */
}

@media (max-width: 768px) {
  /* lifestyle-sp.png（778×492、余白なしのフルサイズ写真）の実比率に合わせる */
  .hinafuroshiki-page .lifestyle {aspect-ratio:778 / 492;}
  /* ユーザー指示: SPのフォントサイズは現行値を最低として画面幅が広がるほど
     相対的に大きくする。375px(現行値)〜768px(この上のPC/タブレット向け
     ルールが引き継ぐ値)の間で線形スケールし、768px到達時に次のルールの
     値と連続的に繋がるようにする。 */
  .hinafuroshiki-page .lifestyle-title {font-size: clamp(15px, calc(9.47px + 1.4758vw), 20.8px);}
  .hinafuroshiki-page .products { padding: 40px 0px 90px; }
  .hinafuroshiki-page .grid { grid-template-columns: repeat(3, 1fr); gap: 0; padding:1rem;}
  .hinafuroshiki-page .card {padding: 1rem; padding-left: 2rem;}
  /* 罫線は1400pxブロックの.card:not(:nth-child(3n+1))::beforeで完結済み
     （カラム数はここでも同じ3のため重複指定は不要） */
  /* card-label: 商品名を画像の上ではなく左に、罫線もPCと同様に表示する */
  /* ユーザー指示: 375px(現行10px)〜768px(この上のルールの14.4pxに接続)で線形スケール */
  .hinafuroshiki-page .card-label { font-size: clamp(10px, calc(5.8px + 1.1196vw), 14.4px); left: 0.5rem; padding:6px 0;}
  /* ユーザー指示によりSP背景をtying-bg-sp.png（778×310）に差し替え */
  .hinafuroshiki-page .tying { padding: 72px 20px 90px; background: url(../../assets/images/hinafuroshiki/photos/tying-bg-sp.png) center / cover no-repeat; }
  /* ユーザー指示によりtying-leadをtying-title-groupの画像に統合したため、
     SP専用のtying-lead-sp.png差替えルールは不要になり削除。
     SP専用の書き出し画像（tying-title-group-sp.png: 647x170、
     「包み方の一例をご紹介！」の文言を内包）に差替え。 */
  .hinafuroshiki-page .tying-title-group {
    margin: 0 auto 32px;
    max-width: 323px;
  }
  .hinafuroshiki-page .tying-title-group img {
    content: url(../../assets/images/hinafuroshiki/ties/tying-title-group-sp.png);
  }
  /* tie-iconsのレイアウト(2-3-3-2)は1050px用ブロックに統合済み */
  /* 基本ルールのheight:110px固定 + object-fit:containのままにする。
     widthをautoにすると画像ごとの縦横比差でliの高さが揃わなくなるため、
     高さは常に110pxで統一し、幅はmax-width:100%で各liの幅（104px、
     または極端に狭い画面での縮小後の幅）に収める。 */
  .hinafuroshiki-page .swipe-hint { display: block; }
  /* br.spはSP専用の改行位置として意図的に追加したものなので、
     通常のbrだけを消してbr.spは残す */
  /* hero-title/hero-head/hero-intro/hero-bgのSP専用切替は、hero-bgが
     4段階の画面幅切替（1920/1100/700px）に一本化されたため撤去済み。
     .hero-headはユーザー確認の上で常時非表示（画像にタイトル・紹介文が
     焼き込み済みのため）。 */
  .hinafuroshiki-page .intro-body { text-align: left; }
  .hinafuroshiki-page .intro-body p { line-height: 1.9; }
  /* ユーザー指示: SPでも透かしを消さず、PCと同じ画面固定表示のまま
     サイズのみ狭い画面向けに縮小する（挙動はJS側のupdateWatermarksと共通）。
     具体的な縮小率はFigmaのSP実測値が未確認のため暫定値。要確認。 */
  /* ユーザー指示: SPではwm-hina/wm-furoshikiとも画面端に配置する。
     wm-hinaのtopはJS(updateWatermarks)がヘッダー(上部バー)を避けて
     h.bottom基準に上書きするため、ここでのtop:0はJS実行前の暫定値。 */
  .hinafuroshiki-page .wm-hina { top: 0; left: 0; height: 75px; }
  .hinafuroshiki-page .wm-furoshiki { bottom: 0; right: 0; height: 220px; }
  /* Figma実データ確認: SPでもsteps-labelはPCと同じく縦書きで左側に配置する
     （横並びで上に置くのは誤りだったため、PCと同じgrid+vertical-rl構成に戻す）。 */
  /* スクロールは.steps-block-scroll側で行う（steps-labelは構造上その外にあり
     巻き込まれない。列幅・gapは親.steps-block側のSPルールで縮小済み）。 */
  .hinafuroshiki-page .steps-block-scroll {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  /* ユーザー指示: SPではsteps-labelを横書きに変え、スライダーの上に
     （その右にsteps-desc＝手順の説明文を並べて）配置する。
     [label|scroll]の横並びgridから、[label desc]の行 → [scroll]の行、
     という縦積み2行のgridに組み替える。
     ユーザー指示: labelは中の文字数に合わせて可変（auto）、descは残り幅
     （1fr）で可変にする。 */
  .hinafuroshiki-page .steps-block {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  /* ユーザー指示: label・desc行全体の横幅は.steps-block::after（罫線、
     left:20px/right:20pxで.steps-blockから20px内側に入っている）と揃える。
     labelは列の左端(0px)から始まるため左に20pxのmargin、descは列の右端
     まで伸びるため右に20pxのmarginを付け、行全体をその分だけ内側に収める。 */
  /* ユーザー指示: 375px(現行14.4px)〜768px(この上のルールの16.32pxに接続)で線形スケール */
  .hinafuroshiki-page .steps-label {
    grid-column: 1;
    grid-row: 1;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: clamp(14.4px, calc(12.57px + 0.4886vw), 16.32px);
    justify-self: start;
    align-self: center;
    margin-left: 21px;
    /* ユーザー指示: PCのsteps-label（縦書き、上下に短い罫線）と同じ考え方で、
       SP(横書き)では文字の最初と終わり＝左端・右端に短い縦線を装飾として
       入れる。線と文字が詰まらないよう左右に少し余白を持たせる。 */
    padding: 0 10px;
  }
  /* 縦書き用の上下の短い罫線(top/bottom)を、横書き用の左右の短い縦線
     (left/right)に描き直す（PCのtop:0/bottom:0の横線と対になる装飾）。 */
  .hinafuroshiki-page .steps-label::before,
  .hinafuroshiki-page .steps-label::after {
    top: 50%;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
  }
  .hinafuroshiki-page .steps-label::before { left: 0; }
  .hinafuroshiki-page .steps-label::after { right: 0; }
  .hinafuroshiki-page .steps-desc {
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-right: 20px;
  }
  /* バグ修正: PC用の.steps-block:has(#step-mamusubi) .steps-descルールは
     :has()の引数にIDセレクタ(#step-mamusubi)を含むため、詳細度がID相当
     (1,3,0)まで跳ね上がり、このSP用ルール（クラスのみ、0,2,0）より
     メディアクエリの記述順に関係なく常に勝ってしまう。そのままだと
     ま結びだけSPでも「スライダー下」というPC側の配置が残ってしまうため、
     同じ詳細度(:has(#step-mamusubi)を含む)の上書きルールをここに置いて
     明示的にSP用の配置（ラベルの右・スライダーの上）へ戻す。 */
  .hinafuroshiki-page .steps-block:has(#step-mamusubi) .steps-desc {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
  .hinafuroshiki-page .steps-block-scroll {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .hinafuroshiki-page .steps {
    display: flex;
    overflow-x: visible;
    gap: 0;
    max-width: 100%;
  }
  .hinafuroshiki-page .steps li {
    padding: 0 18px 0 22px;
  }
  /* ユーザー指示: 中央寄せは563px以下のみに限定し、564〜768pxの範囲は
     従来通り（startスナップ・先頭liが左端に来る配置）に戻す。 */
  .hinafuroshiki-page .steps li,
  .hinafuroshiki-page .steps.steps-scroll li {
    flex: 0 0 50%;
    scroll-snap-align: start;
    border-left: none;
    margin:0 10px;
  }
  /* PC側 .steps li:not(:first-child) の詳細度([0,3,1])がborder-left:noneの
     詳細度([0,2,1])を上回るため、SPでも罫線が消えず残っていた。
     同じセレクタで明示的に打ち消す。 */
  .hinafuroshiki-page .steps li:not(:first-child) { border-left: none; }
  /* Figma実測(SP/モーダル): 手順画像の間の「▶」はテキストではなく
     29×25pxのポリゴンを-90度回転させた三角形、色#88B1BC・不透明度50%。
     border trickで再現し、画像の縦中央（li上端から約120px）に重ねて配置する。 */
  .hinafuroshiki-page .steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 120px;
    right: -26.5px;
    width: 0;
    height: 0;
        border-top: 12.5px solid transparent;
        border-bottom: 12.5px solid transparent;
        border-left: 20px solid rgba(136, 177, 188, .5);
    z-index: 1;
  }
  /* ユーザー指示: 続き矢印(.steps-more-hint)の三角形はSPでは非表示にする */
  .hinafuroshiki-page .steps-more-hint::before {
    display: none;
  }
  .hinafuroshiki-modal .modal-title-group {
    order:1;
  }
  .hinafuroshiki-modal .modal-desc {
    text-align: left;
    max-width: none;
    order:2;
    /* ユーザー指示: SPでの視覚順はlabel→desc→price。label-desc間の間隔は
       ここで持たせ、desc-price間はmodal-info側のgap:0のまま余白なしにする。 */
    margin-top: 16px;
    /* ユーザー指示: SPではmodal-desc内をスクロールさせず全文表示する。
       PC用のoverflow-x:auto（縦書き文章の横スクロール対策）はSPでは
       横書きに変わり不要なため打ち消す。 */
    overflow: visible;
  }
  .hinafuroshiki-modal .modal-price {
    order:3;
  }
  .hinafuroshiki-modal .modal-slide-dots {
    position: absolute;
    top: auto;
    bottom: -23px;
     right: 50%;
    transform: translateX(50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    z-index: 2;
  }
}
@media (max-width: 563px) {
  .hinafuroshiki-page .steps li {
    padding: 0 18px;
  }
  .hinafuroshiki-page .steps-block {
    gap: 16px;
margin-bottom: 24px;
  }
  .hinafuroshiki-page .steps li, .hinafuroshiki-page .steps.steps-scroll li {
    flex: 0 0 60%;
    /* ユーザー指示: 563px以下ではsteps-block-scroll内のliが常に画面中央に
       来るようにする。768px用ブロックのstartのままだとliの左端が画面左端に
       揃う位置で止まっていたため、中心が揃うcenterに上書きする（このブロックは
       768px用ブロックより後ろにあるため、同じ詳細度でもこちらが勝つ）。
       バグ修正: 以前はここに:first-child/:last-childだけflex-basisと
       左右非対称のpaddingを広げる指定があったが、左右のpaddingが揃わない
       ため画像自体はliの箱の中心からずれて見えてしまっていた（特に1枚目は
       padding-leftだけ13%と大きく、画像が右に寄って見える不具合があった）。
       全liを同じflex-basis・左右対称paddingに統一し、scroll-snap-alignの
       centerと合わせて画像自体も画面中央に来るようにする。 */
    scroll-snap-align: center;
  }
  /* ユーザー指示: 初期表示（scrollLeft:0）でも1枚目が画面中央に来るように
     する。scroll-snap-align:centerだけでは、mandatoryスナップが
     ページ読み込み時にscrollLeft:0を自動補正してくれるとは限らず、
     1枚目が中央からずれたまま止まって見えることがあった。flex-basis60%の
     liを中央に置くために必要な左右の余白(100%-60%)/2=20%を1枚目の
     margin-leftに持たせることで、scrollLeft:0の状態がそのまま
     「1枚目の中心がビューポート中心に来る」snap点と一致するようにする
     （768px用ブロックの.steps li:first-childと同じ考え方）。 */
  .hinafuroshiki-page .steps li:first-child, .hinafuroshiki-page .steps.steps-scroll li:first-child {
    margin-left: 20%;
  }
  /* ユーザー指示: 最後のliも画面中央に来るようにする。1枚目と同じ理由で、
     末尾に余白が無いと最大scrollLeft（scrollWidth-clientWidth）が
     「最後のliの中心をビューポート中心に持っていくのに必要な位置」まで
     届かず、スクロールし切っても最後のliが中央からずれた（画面右寄りの）
     位置で止まってしまう。
     バグ修正の試行錯誤: (1)liの:last-childにmargin-rightを付ける方式は、
     Chromeが末尾の子要素のtrailing marginをスクロール可能領域(scrollWidth)
     の計算に含めない既知の挙動があり効かなかった。(2).steps-block-scroll
     自身にpadding-rightを付ける方式も、.steps-block-scrollはgridアイテムで
     幅がtrack幅に固定されているため、paddingを足すと逆にcontent幅（＝子の
     .stepsのauto幅、liのflex-basis%の基準）が縮んでしまい、liの実寸そのもの
     が変わってしまう不具合があった。
     最終的に、.steps（flexコンテナ）自身の::afterを幅20%のダミーflex
     アイテムとして追加する方式にした。実在するflexアイテムなのでscrollWidth
     に確実に反映され、かつ.steps-block-scroll側の幅计算には一切影響しない。 */
  .hinafuroshiki-page .steps::after {
    content: "";
    flex: 0 0 20%;
  }
  .hinafuroshiki-page .steps-label {
    font-size: 15.5px;
    letter-spacing: 1px;
  }
}
.step-supervision {
  text-align: right;
  font-size: clamp(12.48px, calc(10.8px + 0.2188vw), 15px);
}



/* ユーザー指示: 768px以下のSPは既存ルールでhero-title imgがwidth:200px固定
   になっているため、769px側のclamp下限(380px)との間で段差ができ、
   768px手前ほどhero-headが小さく見えていた。500px側で既存の200pxに、
   768px側で769pxのclampと一致する380pxに繋がるよう滑らかにスケールさせる。
   後続の768pxブロック(width:200px)より詳細度が同じでも後勝ちさせるため、
   このブロックはそれより後ろに置く。 */
@media (min-width: 500px) and (max-width: 768px) {
  .hinafuroshiki-page .hero-title img {
    width: clamp(200px, 67.16vw - 135.8px, 600px);
    width: 600px;
  }
}
@media (min-width: 500px) {

}
.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }
  .hinafuroshiki-page .back-to-top {
  position: fixed;
  right: 1rem;
  bottom: -8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 11;
  opacity: 0;
  transition: bottom .4s, opacity .4s;
}
.hinafuroshiki-page .back-to-top.active {
  bottom: 1rem;
  opacity: 1;
}
.hinafuroshiki-page .sec-title {
margin: 0 0 24px;
}
.hinafuroshiki-page .hero-title { margin: 0 0 13px;}
.hinafuroshiki-page .lifestyle-title {
font-size: 3.8vw; line-height: 1.4;
}
}
@media (min-width: 769px) and (max-width: 968px) {
  .hinafuroshiki-page .card {
    padding: 2.25rem;
    padding-left: 3.25rem;
  }
  /* card-labelのleftは.cardのpaddingに連動しない固定値のため、
     padding-leftを縮めたぶん画像との隙間が狭まり被っていた。
     ここでも合わせて縮小し、画像(padding-left:3.25rem=32.5px始点)との
     隙間を確保する。ユーザー指示により1rem→0.5remでさらに隙間を広げる
     （label右端〜画像左端の隙間: 約8px→約13px）。 */
  .hinafuroshiki-page .card-label { left: 1rem; }
}



/* aspect-ratio:1600/900だったオーバーライドは旧lifestyle.jpg用の調整値で、
   新lifestyle.png（上部約29.5%のみ写真）には合わず余白が写り込むため撤去。
   基本ルールの1665/650（写真部分にほぼ一致）をこのレンジでも使う。 */
@media (min-width: 769px) and (max-width: 1550px) {
  .hinafuroshiki-page .lifestyle-title {top:3vw;right: 3vw;}
}