/* ===================================================================
   松政商店 ホームページ 共通スタイル
   全ページ（トップ／こだわり／商品紹介／松政について）が読み込む。
   ★色・フォントサイズは :root の変数で一括管理。個別のpx直書きはしない。
   =================================================================== */

  :root{
    --navy:#1A3554;
    --navy-deep:#0F2438;
    --beige:#E5DBC2;
    --paper:#FAF5EA;
    --teal:#4A8A87;
    --teal-deep:#376C69;
    --red:#CB4E46;
    --ink:#22303A;
    /* 本文色。年配の方の読みやすさ優先で紙色上コントラスト比7.9(AAA相当)を確保しつつ、
       見出しの--ink(12:1)より一段柔らかい階層は保つ(0724に#5C6B72→#48565F→#404E57と調整。ウェイトは400のまま) */
    --ink-soft:#404E57;
    --line:rgba(26,53,84,0.12);
    --card:#FFFFFF;
    --font-display:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
    --font-body:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;

    /* ===== フォントサイズ（全ページここで一括管理。個別のpx直書きはしない） =====
       年配の方の読みやすさを優先し、本文は15.5pxを基準にしている。
       clamp(最小,画面幅比,最大) は画面幅に応じて自動で伸縮する。 */
    /* 幅の制約が厳しい部品。これ以上大きくすると折り返す（実測済み）ので個別に持つ。
       上限は最長ラベル「インスタグラム」全角7文字が画面4分割の1枠に収まるかで決まる */
    --fs-tabbar:11.5px;                  /* 最下部タブ */
    --fs-caption:12.5px;                 /* タグ・ラベル・注記 */
    --fs-small:14.5px;                   /* ナビ・リンク・フッター */
    --fs-body:15.5px;                    /* 本文の基準 */
    --fs-title-sm:clamp(17px,3.6vw,20px);/* 小見出し */
    --fs-title:clamp(19px,4vw,24px);     /* セクション・カード見出し */
    --fs-lead:clamp(17px,3.8vw,22px);    /* 大見出し直下の導入行 */
    --fs-display:clamp(28px,6.6vw,44px); /* 大見出し */
    --fs-hero:clamp(30px,7.5vw,52px);    /* ヒーローのキャッチ */
    --fs-menu:26px;                      /* スマホメニューの項目 */
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;overflow-x:clip;}
  /* アンカー着地位置の余白（ヘッダーは固定しないので少しだけ空ける） */
  section[id]{scroll-margin-top:16px;}
  /* #top（ロゴ・フッターの「一番上へ」）は必ずページ最上部に着地させる。
     mainはヘッダーの下から始まるため、ヘッダー高さより大きい値で余裕を持たせる（スクロールは0で止まる） */
  main#top{scroll-margin-top:200px;}
  body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.9;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    padding-bottom:64px;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

  /* ===== header =====
     固定しない（下にスクロールしたら普通に流れて消える）。
     背景はヒーロー上端の波と同じ紙色にして、境界線（box-shadow）は入れない＝波だけが境界になる */
  header{background:var(--paper);}
  .headbar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 20px;max-width:1080px;margin:0 auto;
  }
  .brandmark{display:flex;align-items:center;flex:none;}
  .brandmark .logo-svg{height:34px;width:auto;flex:none;}
  @media(min-width:640px){.brandmark .logo-svg{height:40px;}}

  .head-actions{display:flex;align-items:center;gap:6px;}
  .htxt-btn{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    font-size:var(--fs-caption);color:var(--ink);letter-spacing:.02em;padding:6px 10px;
  }
  .htxt-btn svg{width:20px;height:20px;stroke:var(--navy);}
  /* インスタ公式グラデーションアイコン(instagram_glyph.png=公式PNGの128px縮小版。
     公式SVGは画像埋め込み型10.9MBのため公開フォルダに置かない) */
  .htxt-btn .ig-glyph{width:20px;height:20px;display:block;}
  .htxt-btn span{white-space:nowrap;}
  .hamb{display:flex;width:36px;height:36px;align-items:center;justify-content:center;cursor:pointer;color:var(--navy);}
  .hamb span{display:block;width:18px;height:1.5px;background:currentColor;position:relative;}
  .hamb span::before,.hamb span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:currentColor;}
  .hamb span::before{top:-6px;}
  .hamb span::after{top:6px;}

  nav.desknav{display:none;gap:30px;align-items:center;}
  nav.desknav a{font-size:var(--fs-small);letter-spacing:.05em;color:var(--ink);position:relative;padding:4px 0;}
  nav.desknav a::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--teal);
    transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
  }
  nav.desknav a:hover::after{transform:scaleX(1);}
  @media(min-width:900px){nav.desknav{display:flex;}}

  .mobmenu{
    /* 右からの部分幅ドロワー。幅は最長項目「松政商店について」(26px×8字)+番号+左右paddingが
       収まる値。全画面を覆わず、左側にページが見える(0731指示) */
    position:fixed;top:0;right:0;bottom:0;left:auto;
    /* 幅は「松政商店について」の「て」が×印の真下に来る値(0731実測257px) */
    width:min(78vw,257px);
    background:var(--navy);
    box-shadow:-10px 0 30px rgba(15,36,56,.35);
    transform:translateX(100%);
    /* 閉じている間は不可視にする（スマホでピンチアウト/横オーバースクロールした時に
       画面右隣の紺パネルがのぞいて「右端が黒く途切れる」ように見える問題の対策・0727） */
    visibility:hidden;
    transition:transform .4s cubic-bezier(.65,0,.35,1), visibility 0s .4s;
    z-index:70;display:flex;flex-direction:column;
  }
  .mobmenu.open{transform:translateX(0);visibility:visible;transition:transform .4s cubic-bezier(.65,0,.35,1), visibility 0s 0s;}
  .mobmenu-top{display:flex;justify-content:flex-end;padding:20px;}
  .mobmenu-close{color:var(--beige);width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
  .mobmenu-links{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:26px;padding:6px 28px 0;}
  /* 項目文字は80%(数字spanは--fs-captionのまま等倍・0731指示) */
  .mobmenu-links a{font-family:var(--font-display);font-size:calc(var(--fs-menu)*.8);color:var(--beige);display:flex;align-items:baseline;gap:12px;}
  .mobmenu-links a span{font-size:var(--fs-caption);color:var(--teal);font-family:var(--font-body);}

  /* ===== hero ===== */
  /* スマホ：縦画像(862×1100)を切らずに100%表示する。画像差し替え時はここの比率も直す */
  .hero{position:relative;aspect-ratio:862/1100;display:flex;align-items:flex-start;overflow:hidden;}
  .hero-bg{position:absolute;inset:0;background:var(--beige);}
  .hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 45%;}
  @media(min-width:860px){
    .hero{min-height:0;aspect-ratio:1672/735;}
  }
  /* 上下の波型エッジ。色はcurrentColor＝隣接する背景（上下とも紙色）に合わせる */
  .hero-wave{
    position:absolute;left:-2px;width:calc(100% + 4px);
    /* 全体ルールsvg{max-width:100%}に幅をキャップされ右端2pxが波で覆えず
       写真が見えていた(0727報告)→キャップ解除 */
    max-width:none;
    height:clamp(26px,4.5vw,64px);z-index:2;pointer-events:none;
  }
  /* 上の波の高さ(振幅)は下と同じ。ヘッダーとの距離はSVGパス側を上に寄せて詰めている(index.html参照) */
  .hero-wave.top{top:-1px;color:var(--paper);}
  .hero-wave.bottom{bottom:-1px;color:var(--paper);}
  .hero-inner{position:relative;z-index:2;width:100%;padding:64px 24px 0;max-width:1080px;margin:0 auto;}
  .hero-catch{
    font-family:var(--font-display);font-weight:700;color:var(--navy);
    font-size:var(--fs-hero);line-height:1.4;letter-spacing:.02em;
  }
  .hero-sub{margin-top:16px;color:rgba(26,53,84,0.9);font-size:var(--fs-body);letter-spacing:.03em;font-weight:500;}

  /* ===== reveal ===== */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}

  section{position:relative;}

  /* ===== お知らせ（トップのみ。月額更新サポートで<li>を差し替える欄）
     配置はindex.htmlのJSが切替：1100px以上=ヒーロー画像内(サブコピー下) / それ未満=ヒーロー下
     ※1100px未満はヒーローの高さが足りずカードが見切れるため重ねない
     背景は敷かない（紙色のまま。ベージュ帯は廃止） ===== */
  /* 枠は80%縮小時の寸法のまま・文字サイズはユーザー指定値(0723: 日付14px/本文15px) */
  .news-card{
    max-width:880px;margin:21px auto 0;background:rgba(255,250,243,0.96);border-radius:13px;
    padding:14px 19px 13px;box-shadow:0 6px 24px rgba(26,53,84,0.10);
  }
  .news-label{
    display:flex;align-items:center;gap:8px;
    font-size:12px;font-weight:700;color:var(--red);letter-spacing:.14em;
  }
  .news-label::before{content:"";width:22px;height:2px;background:var(--red);border-radius:2px;}
  .news-list{list-style:none;margin:6px 0 0;padding:0;}
  .news-list li{display:flex;align-items:baseline;gap:14px;padding:7px 0;}
  .news-list li + li{border-top:1px solid var(--line);}
  .news-date{flex:none;font-size:13px;color:var(--ink-soft);font-weight:500;letter-spacing:.04em;}
  .news-list p{font-size:14px;color:var(--ink);line-height:1.9;}
  /* PC：ヒーロー内に重ねるときの幅と余白 */
  #newsSlotHero .news-card{margin:29px 0 0;max-width:416px;}

  /* ===== 「国産天草・国産だし」バッジ（イラレ製SVG。こだわりカードの写真上・白グラデの境目あたり） ===== */
  /* 間隔4px。gapを8→4pxに詰めた際、だしの位置を固定したまま天草を寄せるため左位置を+4px補正 */
  .pbadges{
    position:absolute;left:calc(1% + 43.3px);bottom:6%;
    display:flex;gap:3.6px;z-index:1;pointer-events:none;
  }
  /* スマホ：バッジは写真の左上・完全に画像内(0728確定。右端30%乗せ案→左上に戻した) */
  @media(max-width:759px){
    .pbadges{left:16px;right:auto;top:16px;bottom:auto;}
  }
  /* PC：バッジ半個(39px)ぶん左へ＝写真の左端から本文側へはみ出させる。
     はみ出しが切れないよう写真枠のoverflowを開放（カード自体の角丸では切れる） */
  @media(min-width:760px){
    .fcard.wide-photo .fcard-photo{overflow:visible;}
    .pbadges{left:calc(1% + 4.3px);}
  }
  /* .fcard-photo img（absolute・100%）の一括指定を打ち消すため親付きセレクタで上書き */
  .fcard-photo .pbadges img{position:static;inset:auto;width:81px;height:81px;object-fit:contain;}

  /* ===== big statement ===== */
  .statement{background:var(--paper);padding:64px 0 56px;text-align:center;position:relative;}
  .statement h2{
    font-family:var(--font-display);font-weight:700;color:var(--navy);
    font-size:var(--fs-display);line-height:1.5;letter-spacing:.02em;
  }
  .statement .lead{
    margin-top:16px;max-width:none;font-family:var(--font-display);font-weight:700;
    color:var(--navy);font-size:var(--fs-lead);line-height:1.7;
  }
  .statement p{margin-top:20px;color:var(--ink-soft);font-size:var(--fs-body);line-height:2;max-width:420px;margin-left:auto;margin-right:auto;text-wrap:pretty;}
  /* スマホ：本文段落は中央揃えをやめて左揃え（h2とリードは中央のまま・0727指示） */
  @media(max-width:639px){
    .statement p:not(.lead){text-align:left;}
  }
  /* 「久礼の海から、75年。」下のまちなみ4枚：トリミングなし・ウィンドウ全幅・隙間なしの横並び
     （4枚とも同じ縦横比(1200×857)なので高さが自然に揃う。.wrapの外に置くこと） */
  .town-strip{display:flex;margin-top:44px;}
  .town-strip img{width:25%;height:auto;display:block;}
  /* スマホ：4枚横並びだと1枚が小さすぎるため、全幅のまま2列2段にして1枚あたりを大きく見せる
     （PCと同じくトリミングなし・隙間なし・角丸なしの全幅一体） */
  @media(max-width:759px){
    /* 境目に背景と同じ紙色の細ケイを入れる（gapで背景を透かす・0727指示） */
    .town-strip{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--paper);}
    .town-strip img{width:100%;}
  }
  /* PCのみ有効な改行（スマホでは自然な折り返しに任せる） */
  .pcbr{display:none;}
  @media(min-width:640px){.pcbr{display:inline;}}
  /* スマホのみ有効な改行（0727追加。ヒーローのサブコピー等で使用） */
  .spbr{display:inline;}
  @media(min-width:640px){.spbr{display:none;}}

  /* ===== feature cards ===== */
  .cards{background:var(--paper);padding:8px 0 56px;}
  .cards .wrap{max-width:880px;}
  .fcard{
    position:relative;
    background:var(--card);border-radius:20px;overflow:hidden;
    box-shadow:0 2px 18px rgba(26,53,84,0.07);margin:0 0 22px;
  }
  .fcard-grid{display:grid;grid-template-columns:1fr;}
  /* スマホは全カード「写真が上・本文が下」に統一(0727変更。旧=本文上・写真下)。
     写真は16/10の帯で上に置き、白グラデ(wide-photoの::after)はスマホでは切る */
  @media(max-width:759px){
    .fcard .fcard-photo,
    .fcard.reverse .fcard-photo{order:-1;min-height:0;aspect-ratio:16/10;}
  }
  @media(min-width:760px){
    .fcard-grid{grid-template-columns:1fr 1fr;align-items:stretch;}
    .fcard.reverse .fcard-photo{order:0;}
  }
  .fcard-body{padding:28px 26px;display:flex;flex-direction:column;justify-content:center;}
  /* h3=トップのカード見出し、h2=下層ページの見出し（同じ見た目） */
  .fcard-body h3,
  .fcard-body h2{
    font-family:var(--font-display);font-weight:700;color:var(--teal-deep);
    font-size:var(--fs-title);margin-bottom:12px;
  }
  .fcard-body p + p{margin-top:14px;}
  .fcard-body p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.9;text-wrap:pretty;}
  .fcard-link{
    display:inline-flex;align-items:center;gap:6px;margin-top:16px;
    font-size:var(--fs-small);color:var(--teal-deep);font-weight:500;
  }
  .fcard-link svg{width:14px;height:14px;stroke:var(--teal-deep);transition:transform .25s ease;}
  .fcard-link:hover svg{transform:translateX(4px);}
  /* リンク付きカードは、カードのどこをクリックしても飛べるようにする
     （.fcard-link の当たり判定をカード全面に広げる。リンクの無いカードには効かない） */
  .fcard .fcard-link::after{content:"";position:absolute;inset:0;z-index:3;}
  .fcard:has(.fcard-link):hover{box-shadow:0 6px 24px rgba(26,53,84,0.13);}
  .fcard:has(.fcard-link):hover .fcard-link svg{transform:translateX(4px);}
  .fcard-photo{position:relative;min-height:200px;overflow:hidden;}
  @media(min-width:760px){.fcard-photo{min-height:220px;}}
  .fcard-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  /* wide-photo：写真列を本文の余白まで広げ、写真の本文側の端を白グラデでカード地(白)に溶け込ませる
     （トップの こだわり・商品紹介・松政商店について の3カードで使用） */
  .fcard.wide-photo .fcard-photo::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg, var(--card) 0%, rgba(255,255,255,0) 45%);
  }
  /* reverse(写真が左・本文が右)は右端をとかす */
  .fcard.reverse.wide-photo .fcard-photo::after{
    background:linear-gradient(270deg, var(--card) 0%, rgba(255,255,255,0) 45%);
  }
  /* スマホは写真が上の帯になるため白グラデは使わない(0727。※このルールは
     上のcontent:""定義より後ろに置くこと=前に置くとcontent:""に打ち消される) */
  @media(max-width:759px){
    .fcard.wide-photo .fcard-photo::after,
    .fcard.reverse.wide-photo .fcard-photo::after{content:none;}
  }
  @media(min-width:760px){
    .fcard.wide-photo .fcard-grid{grid-template-columns:0.8fr 1.4fr;}
    .fcard.reverse.wide-photo .fcard-grid{grid-template-columns:1.4fr 0.8fr;}
    /* 商品紹介カード：本文の右側が空くため右に寄せる（PCのみ） */
    #products .fcard-body{text-align:right;align-items:flex-end;}
  }
  .fcard-photo .ph,
  .step-img .ph,
  .way-img .ph,
  .about-photo .ph{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  }
  .fcard-photo .ph::after,
  .step-img .ph::after,
  .way-img .ph::after,
  .about-photo .ph::after{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1.4px);
    background-size:18px 18px;
  }
  .fcard-photo .ph-icon,
  .step-img .ph-icon,
  .way-img .ph-icon,
  .about-photo .ph-icon{position:relative;z-index:1;width:44px;height:44px;opacity:.85;}
  .fcard-photo .ph-icon svg,
  .step-img .ph-icon svg,
  .way-img .ph-icon svg,
  .about-photo .ph-icon svg{width:100%;height:100%;stroke:rgba(255,255,255,0.9);}
  .fcard-photo .ph-tag,
  .step-img .ph-tag,
  .way-img .ph-tag,
  .about-photo .ph-tag{
    position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,0.92);
    color:var(--navy);font-size:var(--fs-caption);padding:4px 10px;border-radius:100px;
  }
  /* 工程の画像内は番号が左上にいるので、タグは左下に置く */
  .step-img .ph-tag{top:auto;bottom:10px;left:10px;}
  .ph-teal{background:linear-gradient(155deg,#4A8A87,#2E5A57);}
  .ph-wood{background:linear-gradient(155deg,#C9AD82,#A9895D);}
  .ph-harbor{background:linear-gradient(155deg,#6E8FA6,#2E4C63);}

  /* ===== instagram =====
     公開時は投稿0件のため、投稿グリッドではなく「これから発信します」の案内カード1枚。
     投稿が並ばなくても成立するデザインにしておく（グリッド化は投稿が増えてから検討） */
  .igblock{padding:8px 0 56px;background:var(--paper);}
  .igcard{
    max-width:640px;margin:0 auto;text-align:center;
    background:var(--card);border-radius:20px;
    box-shadow:0 2px 18px rgba(26,53,84,0.07);
    padding:34px 24px 36px;
  }
  /* 公式グラデーションアイコン導入に伴い、ティール角丸背景は廃止して素のアイコンを置く(0726) */
  .igcard-icon{
    margin:0 auto 14px;
    display:flex;align-items:center;justify-content:center;
  }
  .igcard-icon .ig-glyph{width:46px;height:46px;}
  .igcard h2{font-family:var(--font-display);font-size:var(--fs-title-sm);color:var(--navy);font-weight:700;}
  .igcard p{margin-top:8px;font-size:var(--fs-body);color:var(--ink-soft);line-height:1.9;}
  .igbtn{
    display:inline-flex;align-items:center;gap:8px;margin-top:18px;
    border:1.5px solid var(--teal-deep);color:var(--teal-deep);
    font-size:var(--fs-small);font-weight:500;
    padding:10px 26px;border-radius:100px;
    transition:background .25s ease,color .25s ease;
  }
  .igbtn:hover{background:var(--teal-deep);color:#fff;}
  /* アカウント開設までの非リンク版ピル(0728)。開設時は.igbtnの<a>に戻す */
  .igbtn-soon{border-color:var(--line);color:var(--ink-soft);cursor:default;pointer-events:none;}
  .igbtn svg{width:14px;height:14px;stroke:currentColor;}

  /* ===== access ===== */
  .access{padding:8px 0 56px;background:var(--paper);}
  .access .wrap{max-width:880px;} /* 上のカード群(.cards .wrap)と同じ幅に揃える */
  .access-card{
    position:relative;
    background:var(--card);border-radius:20px;overflow:hidden;
    box-shadow:0 2px 18px rgba(26,53,84,0.07);
    display:grid;grid-template-columns:1fr;
  }
  /* カードのどこをクリックしても「詳しく見る」リンク先へ飛べるようにする */
  .access-card .fcard-link::after{content:"";position:absolute;inset:0;z-index:3;}
  .access-card:hover{box-shadow:0 6px 24px rgba(26,53,84,0.13);}
  .access-card:hover .fcard-link svg{transform:translateX(4px);}
  @media(min-width:760px){.access-card{grid-template-columns:1.1fr 1fr;}}
  .access-body{padding:28px 26px;display:flex;flex-direction:column;justify-content:center;}
  .access-body h2{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:var(--fs-title);margin-bottom:12px;}
  .access-body p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.9;}
  .access-map{position:relative;min-height:180px;background:#EEF1EC;}
  .access-map svg{position:absolute;inset:0;width:100%;height:100%;}

  /* ===== bottom tab bar (mobile app-like nav) ===== */
  .tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--navy-deep);
    display:grid;grid-template-columns:repeat(4,1fr);
    box-shadow:0 -2px 14px rgba(0,0,0,0.25);
  }
  .tabbar a{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:10px 4px 12px;color:rgba(255,255,255,0.85);font-size:var(--fs-tabbar);letter-spacing:.02em;
    border-right:1px solid rgba(255,255,255,0.08);
  }
  .tabbar a:last-child{border-right:none;}
  .tabbar svg{width:19px;height:19px;stroke:currentColor;}
  .tabbar .ig-glyph{width:19px;height:19px;}
  @media(min-width:860px){.tabbar{display:none;}body{padding-bottom:0;}}

  /* ===== footer =====
     ©表記のみ・センター揃え(0727指示。ブランド文・PAGES・CONTACT・Site by は削除) */
  /* 高さは旧76px(padding26)の半分=38pxになるようpadding7px(0727指示) */
  footer{background:var(--navy-deep);color:rgba(255,255,255,0.72);padding:7px 0;}
  .foot-bottom{display:flex;justify-content:center;font-size:var(--fs-caption);color:rgba(255,255,255,0.35);}

  .d1{transition-delay:.05s;}.d2{transition-delay:.15s;}.d3{transition-delay:.25s;}

  /* ===== 印刷(校正用PDF)対応(0728) =====
     revealは未スクロールだと opacity:0 のまま印刷されるため印刷時は常時表示。
     下部タブバーは印刷に不要 */
  @media print{
    .reveal{opacity:1 !important;transform:none !important;}
    .tabbar{display:none !important;}
    body{padding-bottom:0;}
  }

  /* ===================================================================
     下層ページ（こだわり／松政について 等）
     写真＋本文のブロックは、トップの .fcard 一式をそのまま再利用する。
     =================================================================== */

  /* ページ見出し */
  .pagehead{background:var(--beige);padding:52px 0 46px;text-align:center;}
  /* 写真背景つきページ見出し（松政商店について）。写真は不透明度100%で全体表示
     （元画像=IMG_4874のコピー・2000×863にトリミング済み。セクションを同じ縦横比にしてノートリミング表示。
       幅が狭い画面で文字が収まらない時だけ伸びて、ごくわずかに上下が切れる） */
  .pagehead.has-photo{
    position:relative;background:none;overflow:hidden;
    aspect-ratio:2000/863;display:flex;align-items:center;justify-content:center;
    padding:0 0 7%;   /* モック準拠：文字ブロックを中央よりやや上（空〜山の位置）に */
  }
  /* スマホ：横長写真に3行が収まらないため、文字量に合わせた高さ＋写真はcover（左右が切れる） */
  @media(max-width:759px){
    .pagehead.has-photo{aspect-ratio:auto;padding:46px 0 42px;}
  }
  .pagehead-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  /* 文字ブロックは説明文のフォントサイズ(--fs-body)ぶんだけ上に */
  .pagehead.has-photo .wrap{position:relative;z-index:1;transform:translateY(calc(-1 * var(--fs-body)));}
  /* 空の位置に乗る見出しは白をぼかして読ませる */
  .pagehead.has-photo .pagehead-en,
  .pagehead.has-photo h1{
    text-shadow:0 0 6px rgba(255,255,255,0.95), 0 0 18px rgba(255,255,255,0.85), 0 0 36px rgba(255,255,255,0.7);
  }
  /* 山なみに乗る説明文は白文字＋濃紺をぼかして読ませる。見出しとの間隔はモック準拠で広めに */
  .pagehead.has-photo p{
    color:#fff;margin-top:clamp(28px,3.5vw,70px);
    text-shadow:0 0 4px rgba(15,36,56,0.9), 0 0 12px rgba(15,36,56,0.8), 0 0 28px rgba(15,36,56,0.6);
  }
  .pagehead-en{
    display:block;font-family:var(--font-body);font-size:var(--fs-caption);
    color:var(--teal-deep);letter-spacing:.18em;margin-bottom:10px;
  }
  .pagehead h1{
    font-family:var(--font-display);font-weight:700;color:var(--navy);
    font-size:var(--fs-display);line-height:1.5;letter-spacing:.02em;
  }
  .pagehead p{margin-top:14px;color:var(--ink-soft);font-size:var(--fs-body);}

  /* 末尾CTA（全ページ必ず出口へ、の原則） */
  .cta{background:var(--beige);padding:46px 0 50px;text-align:center;}
  .cta h2{
    font-family:var(--font-display);font-weight:700;color:var(--navy);
    font-size:var(--fs-title);margin-bottom:8px;
  }
  .cta p{font-size:var(--fs-body);color:var(--ink-soft);margin-bottom:22px;text-wrap:pretty;}
  .cta-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--navy);color:#fff;font-size:var(--fs-body);font-weight:500;
    padding:14px 32px;border-radius:100px;transition:background .25s ease;
  }
  .cta-btn:hover{background:var(--navy-deep);}
  .cta-btn svg{width:16px;height:16px;stroke:currentColor;}
  /* CTA内の工場直売・電話FAX導線（こだわり・商品紹介ページの末尾で使用。
     ピルは取扱店舗ページの.telbtn/.telfaxをそのまま流用） */
  .cta-direct{max-width:640px;margin:34px auto 0;padding:28px 24px 0;border-top:1px solid var(--line);}
  .cta-direct .fcard-link{margin-top:20px;}

  /* 補足の注記（健康の事実訴求など） */
  .note{
    max-width:640px;margin:4px auto 0;padding:0 24px;
    font-size:var(--fs-caption);color:var(--ink-soft);line-height:1.8;text-align:center;
  }

  /* ===================================================================
     こだわりページ（素材へのこだわり／製法へのこだわり）
     =================================================================== */

  /* セクションのラベル見出し */
  .sec-label{text-align:center;margin:8px 0 26px;}
  .sec-label span{
    display:inline-block;font-family:var(--font-display);font-weight:700;
    color:var(--navy);font-size:var(--fs-title);letter-spacing:.04em;position:relative;padding:0 4px;
  }
  .sec-label span::after{
    content:"";display:block;width:36px;height:2px;background:var(--teal);
    margin:10px auto 0;border-radius:2px;
  }

  /* 製法の工程（番号付きステップ。画像=左・テキスト=右、番号は画像の左上に重ねる）
     画像の列幅・比率は「素材へのこだわり」(.matter)と同一に揃える(0726指示) */
  .steps{max-width:820px;margin:0 auto;padding:0 24px;}
  .step{display:grid;grid-template-columns:46% 1fr;gap:20px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line);}
  .step:last-child{border-bottom:none;}
  @media(min-width:640px){.step{grid-template-columns:320px 1fr;gap:34px;}}
  /* スマホは本文が長いため「写真を上・全幅、文章を下」の縦積み(0726指示) */
  @media(max-width:639px){.step{grid-template-columns:1fr;gap:14px;}}
  .step-img{
    position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;
    box-shadow:0 4px 16px rgba(26,53,84,0.10);
  }
  .step-img img{width:100%;height:100%;object-fit:cover;display:block;}
  /* 番号はタイトル頭のインラインバッジ。ベタ白抜きではなく、タイトルと同色の細ケイ円+同色数字(0726最終) */
  .step-no{
    flex:none;width:30px;height:30px;border-radius:50%;
    background:none;border:1px solid var(--navy);color:var(--navy);
    font-family:var(--font-display);font-weight:500;
    display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-body);
  }
  @media(max-width:639px){
    .step-img .ph-icon{width:30px;height:30px;}
    .step-img .ph-tag{bottom:8px;left:8px;padding:2px 8px;}
  }
  .step-txt h3{
    font-family:var(--font-display);font-weight:700;color:var(--navy);
    font-size:var(--fs-title-sm);margin-bottom:5px;
    display:flex;align-items:center;gap:10px;
  }
  .step-txt p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.8;text-wrap:pretty;}
  .step-txt p + p{margin-top:14px;}

  /* こだわりページの締め文 */
  .closing{background:var(--paper);padding:8px 0 44px;text-align:center;}
  .closing p{max-width:600px;margin:0 auto;padding:0 24px;font-size:var(--fs-body);color:var(--ink);line-height:2;}

  /* ===================================================================
     素材へのこだわり（画像=左・テキスト=右で統一。白カードなし・正方形画像）
     ※フォント／サイズは .fcard-body と同じ値を踏襲する
     =================================================================== */
  .matter-list{max-width:820px;margin:0 auto;padding:0 24px;}
  /* 画像はトリミングなし(元画像4:3のまま)で見せるため、画像列を広げて文字の横幅を縮める(0726指示) */
  .matter{
    display:grid;grid-template-columns:46% 1fr;gap:20px;
    align-items:start;margin-bottom:32px;
  }
  .matter:last-child{margin-bottom:0;}
  @media(min-width:640px){
    .matter{grid-template-columns:320px 1fr;gap:34px;margin-bottom:40px;}
  }
  /* スマホ：製法(.step)と同じ「画像を上・全幅、文章を下」の縦積み(0727指示) */
  @media(max-width:639px){
    .matter{grid-template-columns:1fr;gap:14px;}
  }
  .matter-img{
    aspect-ratio:4/3;border-radius:14px;overflow:hidden;
    box-shadow:0 4px 16px rgba(26,53,84,0.10);
  }
  .matter-img img{width:100%;height:100%;object-fit:cover;display:block;}
  /* 見出し・本文は .fcard-body と同一の見た目 */
  .matter-txt h2{
    font-family:var(--font-display);font-weight:700;color:var(--teal-deep);
    font-size:var(--fs-title);margin-bottom:12px;
  }
  /* 「す。」だけの孤立行対策: balance=全行の長さを均等化(6行以下で有効)。
     非対応環境はprettyに、さらに古い環境は通常折返しにフォールバック */
  .matter-txt p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.9;text-wrap:pretty;}
  .matter-txt p + p{margin-top:14px;}

  /* 素材へのこだわり「化学調味料は極力使いません」だけの別扱い：
     写真なし・センター揃え・明朝・上下ケイで宣言文らしく見せる(0726指示) */
  .matter-note{
    max-width:640px;margin:44px auto 8px;padding:26px 24px 28px;text-align:center;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  /* スマホ：左右paddingを外し、製法(.step-txt)の文章と同じ横幅にする(0727指示) */
  @media(max-width:639px){
    .matter-note{padding-left:0;padding-right:0;}
  }
  /* 見出し=「国産のだし素材」等の素材見出しと同じ--teal-deep・全体85%(0726最終) */
  .matter-note h2{
    font-family:var(--font-display);font-weight:700;color:var(--teal-deep);
    font-size:calc(var(--fs-title)*0.85);margin-bottom:10px;
  }
  .matter-note p{
    font-family:var(--font-display);font-weight:500;
    color:var(--ink-soft);font-size:var(--fs-body);line-height:2;
  }

  /* ===================================================================
     商品紹介ページ（お知らせ／商品ラインナップ／食べ方）
     =================================================================== */

  /* オンラインショップ準備中のお知らせ */
  .shopnotice{background:var(--paper);padding:24px 0 8px;}
  .shopnotice-box{
    max-width:640px;margin:0 auto;background:var(--card);
    border:1px solid var(--line);border-radius:14px;
    padding:18px 22px;display:flex;gap:14px;align-items:flex-start;
  }
  .shopnotice-box > svg{flex:none;width:22px;height:22px;stroke:var(--red);margin-top:5px;}
  .shopnotice-box h2{font-family:var(--font-display);font-size:var(--fs-title-sm);color:var(--navy);font-weight:700;margin-bottom:4px;}
  .shopnotice-box p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.9;}
  /* 公開前の仮枠（社長確認用）：ここにECの購入導線が入ることを示すだけの枠 */
  .ec-slot{
    max-width:640px;margin:0 auto;padding:20px 22px;text-align:center;
    border:1.5px dashed var(--teal);border-radius:14px;
    background:rgba(74,138,135,0.06);
    color:var(--ink-soft);font-size:var(--fs-body);
  }

  /* 「準備中」バッジ（営業時間・受付時間などの未確定項目に使用。
     ※商品ラインナップ(.pricelist)は0725に削除済み。STORES開店時に新構成で作り直す */
  .price-tbd{
    flex:none;font-size:var(--fs-caption);color:var(--ink-soft);
    background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:2px 12px;
  }

  /* 食べ方カード */
  .ways{max-width:880px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr;gap:14px;}
  @media(min-width:700px){.ways{grid-template-columns:1fr 1fr;gap:18px;}}
  .way{background:var(--card);border-radius:16px;padding:22px 24px;box-shadow:0 2px 18px rgba(26,53,84,0.07);}
  /* 食べ方カードの写真枠（横長。写真はimg差し替えでobject-fitがトリミング） */
  .way-img{
    position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;
    margin-bottom:16px;
  }
  .way-img img{width:100%;height:100%;object-fit:cover;display:block;}
  /* 食べ方タグ：ベタ#4E9AA6・白文字・長方形(角丸なし)・5度傾けて右肩上がり・ウェイト500(0724指示) */
  .way-tag{
    display:inline-block;font-size:var(--fs-caption);font-weight:500;color:#fff;
    background:#4E9AA6;padding:2px 14px;margin:4px 0 12px 4px;
    transform:rotate(-5deg);transform-origin:left bottom;
  }
  /* 見出しは文字高さの30%ぶん上げてタグに寄せる */
  .way h3{
    font-family:var(--font-display);font-weight:700;color:var(--navy);
    font-size:var(--fs-title-sm);margin-top:-0.3em;margin-bottom:8px;
  }
  .way p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.9;}

  /* ===================================================================
     松政商店についてページ（全幅写真とテキストを縦に交互に並べる）
     =================================================================== */
  .about-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--beige);}
  @media(min-width:760px){.about-photo{aspect-ratio:16/7;}}
  .about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  /* 控えめに見せたい写真用（社屋外観など）：横幅いっぱいにせず本文(640px)の8割・角丸 */
  .about-photo.inset{
    width:80%;max-width:512px;margin:0 auto;
    border-radius:16px;aspect-ratio:16/9;
  }
  @media(min-width:760px){.about-photo.inset{aspect-ratio:16/9;}}

  .about-txt{background:var(--paper);padding:46px 0 50px;}
  .about-txt .wrap{max-width:640px;}
  .about-txt h2{
    font-family:var(--font-display);font-weight:700;color:var(--teal-deep);
    font-size:var(--fs-title);margin-bottom:14px;
  }
  .about-txt p{font-size:var(--fs-body);color:var(--ink-soft);line-height:2;}
  .about-txt p + p{margin-top:14px;}

  /* ===================================================================
     取扱店舗・アクセスページ（店舗リスト／アクセス情報／地図）
     =================================================================== */
  .shoplist{max-width:640px;margin:0 auto;padding:0 24px;}
  /* 項目間のケイは引かず、リスト末尾(工場直売の下)にだけ同じケイを1本引く(0724指示)
     ケイを無くしたぶん行間も詰める(padding 11px→5px) */
  .shoplist li{
    padding:5px 2px;
    font-size:var(--fs-body);color:var(--ink);
  }
  /* ケイは「工場直売」行と下の「この味がいい」段落のちょうど中間に来るよう、
     上下とも14pxずつ空ける(.dropbyのmargin-topと対で調整) */
  .shoplist li:last-child{border-bottom:1px solid var(--line);padding-bottom:14px;}
  .shoplist li::before{content:"・";color:var(--teal-deep);margin-right:4px;}

  /* 店頭でお求めいただける商品（商品紹介ページ。トップ取扱店舗欄のパッケージ写真3枚を0724移設）
     パッケージ写真は透過切り抜き(WebPアルファ保持)をそのまま置く。枠・背景なし・全体表示 */
  .storeitems{text-align:center;}
  .storephotos{display:flex;justify-content:center;align-items:flex-end;gap:18px;max-width:640px;margin:0 auto;padding:0 24px;}
  .storephotos figure{width:172px;max-width:30%;aspect-ratio:1/1;margin:0;}
  .storephotos img{width:100%;height:100%;object-fit:contain;display:block;}
  /* 本文のみ左頭揃え(0727指示。写真・ボタン類はセンターのまま) */
  .storeitems p{max-width:640px;margin:16px auto 0;padding:0 24px;font-size:var(--fs-body);color:var(--ink-soft);line-height:1.9;text-align:left;text-wrap:pretty;}
  .storeitems .fcard-link{margin-top:14px;}
  /* 電話ボタン下の受付時間+注意書き(0804・トップのtelblockと同文言で全ページ共通化) */
  .cta-direct .tel-hours,.storeitems .tel-hours{margin:14px auto 0;padding:0;max-width:none;font-size:var(--fs-small);color:var(--ink-soft);text-align:center;margin-bottom:0;}
  .cta-direct .tel-caution,.storeitems .tel-caution{margin:6px auto 0;padding:0 24px;max-width:640px;font-size:var(--fs-caption);color:var(--ink-soft);line-height:1.8;text-align:center;text-wrap:pretty;margin-bottom:0;}
  /* 店頭商品枠の電話・FAX：ページ末尾CTAにも同じボタンがあるため、ここは小さめのピルにする。
     縦並び・電話はFAXの130%サイズで目立たせる(0724指示) */
  .storetel{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px;padding:0 24px;}
  .storetel .telbtn,
  .storetel .telfax{
    width:auto;max-width:none;margin-top:0;gap:8px;
    font-size:var(--fs-small);font-weight:500;padding:8px 20px;
  }
  .storetel .telbtn{font-size:calc(var(--fs-small) * 1.3);padding:10px 26px;gap:10px;}
  .storetel .telbtn svg{width:21px;height:21px;}
  .storetel .telfax svg{width:16px;height:16px;}

  /* 工場直売・通販開始予定のひとこと（店舗リストの下） */
  .dropby{max-width:640px;margin:14px auto 0;padding:0 24px;}
  .dropby p{font-size:var(--fs-body);color:var(--ink-soft);line-height:2;text-wrap:pretty;}
  .dropby p + p{margin-top:12px;}
  .dropby .fcard-link{margin-top:12px;}

  .accessinfo{max-width:640px;margin:0 auto;padding:0 24px;}
  .accessinfo h2{
    font-family:var(--font-display);font-weight:700;color:var(--navy);
    font-size:var(--fs-title);margin-bottom:8px;
  }
  .mapframe{
    max-width:832px;margin:28px auto 0;padding:0;
    border-radius:20px;overflow:hidden;
    box-shadow:0 2px 18px rgba(26,53,84,0.07);
  }
  @media(max-width:880px){.mapframe{margin-left:24px;margin-right:24px;}}
  .mapframe iframe{display:block;width:100%;height:320px;border:0;}
  @media(min-width:760px){.mapframe iframe{height:400px;}}

  /* お問い合わせの電話ボタン（タップで発信。目立たせる） */
  .telblock{text-align:center;padding:0 24px;}
  .telblock-lead{font-size:var(--fs-body);color:var(--ink-soft);line-height:2;margin-bottom:18px;}
  .telbtn{
    display:inline-flex;align-items:center;justify-content:center;gap:12px;
    width:100%;max-width:400px;
    background:var(--navy);color:#fff;
    font-size:var(--fs-title);font-weight:700;letter-spacing:.05em;
    padding:16px 24px;border-radius:100px;transition:background .25s ease;
  }
  .telbtn:hover{background:var(--navy-deep);}
  .telbtn svg{width:22px;height:22px;stroke:currentColor;flex:none;}
  /* FAXは電話ボタンと同格・同幅の見た目（アウトラインのピル型・クリック不可） */
  .telfax{
    display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;
    width:100%;max-width:400px;
    border:1.5px solid var(--navy);color:var(--navy);
    font-size:var(--fs-title);font-weight:700;letter-spacing:.05em;
    padding:14.5px 24px;border-radius:100px;
  }
  .telfax svg{width:22px;height:22px;stroke:currentColor;flex:none;}
  /* PCのみTEL/FAXピルを90%縮小=トップと同サイズに全ページ統一(0801トップ→0804に全電話枠へ拡大。スマホは現状維持) */
  @media(min-width:900px){
    .telblock .telbtn,.telblock .telfax,
    .cta-direct .telbtn,.cta-direct .telfax,
    .storetel .telbtn,.storetel .telfax{width:100%;max-width:360px;font-size:calc(var(--fs-title)*.9);font-weight:700;gap:12px;}
    .telblock .telbtn,.cta-direct .telbtn,.storetel .telbtn{padding:14px 22px;}
    .telblock .telfax,.cta-direct .telfax,.storetel .telfax{padding:13px 22px;}
    .telblock .telbtn svg,.telblock .telfax svg,
    .cta-direct .telbtn svg,.cta-direct .telfax svg,
    .storetel .telbtn svg,.storetel .telfax svg{width:20px;height:20px;}
  }
  .telblock-hours{margin-top:10px;font-size:var(--fs-small);color:var(--ink-soft);}
  /* 全項目とも「ラベル｜値」の左頭揃え */
  .infolist li{
    display:flex;align-items:baseline;gap:14px;
    padding:10px 2px;border-bottom:1px solid var(--line);font-size:var(--fs-body);
  }
  .infolist li:last-child{border-bottom:none;}
  .infolist .info-label{flex:none;width:5em;color:var(--ink-soft);font-size:var(--fs-small);}
  .infolist .info-value{color:var(--ink);}
  .infolist a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px;}
  /* 「準備中」バッジは .price-tbd を共用する */