/* お庭ばん 統合スタイルシート (Phase C リデザイン版)
 * モバイルファースト: ~999px は素朴感維持、1000px+ はモダン化 (max-width中央寄せ・Grid・Flexbox)
 * フォント: Google Fonts (Sawarabi Gothic / Sawarabi Mincho / Noto Sans JP) + システムフォントfallback
 * Sakura webfont 依存撤廃済 (旧 'カクミン R' 'トーキング' 'UD新ゴ' 'リュウミン' 'A1明朝' は廃止)
 */

/* Tsukushi Mincho M (Fontworks) — used only for top-hero catchphrase.
   Subset to the 10 catchphrase characters (あなたのお庭守ります) to keep
   the WOFF2 small (~4 KB instead of the full 4.3 MB). Source OTF kept
   under frontend/fonts/_src/ (gitignored), regen via the convert
   script there. 2026-05-02 Phase 1 polish. */
@font-face {
    font-family: 'Tsukushi Mincho';
    src: url('../fonts/FOT-TsukuMinPro-M.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Sawarabi Gothic', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;
}

/* Phase A polish グループA (2026-05-01): 本文系の基準値を 17px に統一。
   各セクションで個別に font-size を持っていた要素のうち、本文相当の小さめ値
   (.s2 の 0.9em 等) はこの基準に合わせて調整。見出し (h1〜h3, .section-title)
   と CTA (.inf_tel2 等) は em 指定で相対拡大。 */
body {
    font-size: 17px;
    line-height: 1.85;
}

/* スキップリンク (アクセシビリティ) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #316745;
    color: #d6e9ca;
    padding: 8px 16px;
    z-index: 10000;
}
.skip-link:focus {
    left: 0;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Phase A polish グループB (2026-05-01): 70px → 80px に拡大。グループ A の
       img.timg1 margin-bottom は box-sizing: border-box 環境で固定 height 内に
       吸収されて視覚余白にならなかったため、ヘッダ全高そのものを 10px 拡張。
       連動: main padding-top + section scroll-margin-top も 80px に揃える。 */
    height: 80px;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.4);
}

h1 {
    /* Phase A polish (2026-05-02): 旧 1.3em + nowrap だと 390px viewport で
       中央寄せ text がはみ出して左右端と接する見た目に。clamp で narrow
       viewport は font 縮小、wide ではしっかり 1.3em。nowrap 撤去で安全側 */
    font-size: clamp(1.0em, 4.4vw, 1.3em);
    text-align: center;
}
h2 {
    position: relative;
    text-align: center;
    font-size: 3em;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    margin-top: 15px;
    white-space: nowrap;
    font-family: 'Sawarabi Mincho', 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
}
h3 {
    font-size: 1.7em;
    text-align: center;
    margin-bottom: 5px;
    margin-top: 10px;
    white-space: nowrap;
}
hr {
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #fdeff2;
}

a { text-decoration: none; }
nav a:link, nav a:visited, nav a:hover, nav a:active { color: #180614; }
a:link, a:visited, a:hover, a:active { color: #eaf4fc; }

/* セクション (旧 #cont の代替、複数箇所で使うため class化) */
.cont {
    margin-left: 20px;
    margin-right: 20px;
}

/* セクション要素自体: スクロール先オフセット (旧 a.anchor ハック置換) */
section {
    /* Phase A polish グループB (2026-05-01): header 70px → 80px 連動 */
    scroll-margin-top: 80px;
}

#wrap {
    overflow: hidden;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    position: relative;
}

/* モバイル時 header の高さぶん main を下げる (TOP画像が header に潜る問題の正攻法対処) */
main {
    /* Phase A polish グループB (2026-05-01): header 70px → 80px 連動 */
    padding-top: 80px;
    min-height: 100vh;
    transition: all .5s;
}

.info_head {
    display: none;
    text-align: center;
    margin: 15px;
    font-size: 1.4em;
}

img.timg {
    width: 100%;
    height: auto;
    background: #d6e9ca;   /* subtle placeholder visible briefly before JS sets src (top image flicker fix 2026-05-02) */
    display: block;
}
img.timg-pc {
    width: 100%;
    height: auto;
    display: none;
}

/* Top hero overlay (Phase 1, 2026-05-02): replaces baked-in text + logo
   stamp on top images with CSS layers. Phase 1 wires January only; other
   months keep using the legacy baked t_${N}.jpg where catchphrase + stamp
   are already in the JPEG, so the overlay for those months is hidden via
   .top-hero[data-layered="true"] gating set by JS. Phase 2 will roll out
   to all 12 months and remove the legacy bakes. */
.top-hero {
    position: relative;
    width: 100%;
    margin: 0;
}
/* Phase 2 (2026-05-02): all 12 months use layered material now, so the
   catchphrase + stamp are always shown. The JS still writes
   data-layered="true" on .top-hero as a debug signal but it no longer
   gates display. */

/* Catchphrase: right side, vertical writing. Two lines stack right-to-left
   (writing-mode: vertical-rl) so 「あなたのお庭」 is the rightmost column,
   「守ります」 to its left, matching the bake reference.
   2026-05-02 polish: Tsukushi Mincho M (Fontworks) for brand voice,
   white text + black multi-layer drop-shadow so legibility holds on both
   bright (tsutsuji, sakura) and dark (matsu) photo backgrounds. */
.top-hero__catchphrase {
    position: absolute;
    top: 6%;
    right: 4%;
    bottom: 16%;     /* leave room for stamp at bottom-right */
    writing-mode: vertical-rl;
    font-family: 'Tsukushi Mincho', 'Sawarabi Mincho', 'Noto Serif JP',
                 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    font-size: clamp(1.9rem, 7vw, 3.2rem);
    font-weight: 500;       /* matches @font-face declared weight */
    line-height: 1.6;
    letter-spacing: 0.08em;
    color: #ffffff;
    /* Hybrid weight: thin dark stroke + layered shadow. Stroke alone
       crushes mincho's hairlines; shadow alone doesn't add presence.
       Together they produce the perceived weight of a bolder cut
       without using faux-bold (which mangles mincho counters).
       0.6px is the sweet spot — 1px started filling in 庭/守 counters
       in test renders. Stroke alpha 0.85 = dark grey, not harsh black. */
    -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.85);
    text-shadow:
        0 0 1px  rgba(0, 0, 0, 1.0),
        0 0 3px  rgba(0, 0, 0, 0.95),
        0 1px 4px rgba(0, 0, 0, 0.85),
        0 2px 8px rgba(0, 0, 0, 0.6),
        0 4px 16px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
.top-hero__catch-line {
    display: inline-block;
}
.top-hero__catch-line + .top-hero__catch-line {
    margin-right: 0.4em;
    /* gap between the two vertical columns */
}

/* Logo stamp: bottom-right, reddish wash via sepia + hue rotate.
   blogo.png is dark/black, so sepia(1) + saturate(3) + hue-rotate(-25deg)
   pushes it into the brand reddish-brown tone seen on the SP bakes.
   2026-05-02 polish: opacity 0.92 → 0.5 for a watermark/seal feel
   instead of "sticker glued on". */
.top-hero__stamp {
    position: absolute;
    bottom: 3%;
    right: 4%;
    width: 18%;
    max-width: 140px;
    height: auto;
    opacity: 0.5;
    filter: sepia(1) saturate(3) hue-rotate(-25deg)
            drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    pointer-events: none;
}
img.timg1 {
    width: 80%;
    /* Phase A polish グループA (2026-05-01): bottom margin 0.5em を追加して
       ロゴと下のヒーロー画像の間に余白を確保 (実機 iPhone Pro Max で確認の指摘) */
    margin: 0.5em 0 0.5em 0.5em;
    float: left;
}
img.msimg {
    /* 2026-05-02 polish: 65% → 50%。元画像 1251×1251 だが SP で 65% は
       高 DPR スマホで解像度限界が気になるサイズ感、50% に縮小してカバー。 */
    width: 50%;
    margin-top: 20px;
    height: auto;
}

.s1 {
    width: 100%;
    margin-top: 15px;
    /* Phase A polish グループA (2026-05-01): 電球画像 (denkyu.png) を廃止、
       代わりに HTML 側の <p> テキストに 🌿 絵文字を置く方針。
       Phase A polish (2026-05-02): nowrap 撤去 — 390px viewport で
       div.s1 p (1.7em font) がはみ出すため、子の clamp() font-size と
       併せて narrow でも 1 行収まりを確保 */
}
.s2 {
    width: 100%;
    margin: 10px 20px;
    /* Phase A polish グループA (2026-05-01): 0.9em → body 基準継承 (本文統一) */
}

/* Phase A polish グループA (2026-05-01): サービス内容セクションの項目見出し
   を h3 全体ルール (1.7em) より大きくして目立たせる。項目間マージンも mobile
   で確保 (desktop は .service-grid の gap で別途) */
.service-item h3 {
    font-size: 2em;
    margin-bottom: 0.5em;
}
.service-item:not(:last-child) {
    margin-bottom: 2.5em;
}

.s3 {
    text-align: right;
    width: 100%;
    color: #43676b;
    margin: 0 0 0 auto;
    font-size: 0.9em;
}
.s4 {
    width: 100%;
    color: #53727d;
    margin: 0 0 0 auto;
    font-size: 0.9em;
}

div.info {
    background-color: beige;
    border-radius: 9px;
    padding: 8px;
}

/* インライン導線 (2026-05-02 redo): ハンバーガーUIに不慣れな高齢層向けに、
   悩み箱の直後・前田挨拶の直前に大きめの3ボタンを配置。前回 v3.2 で
   `<nav class="quicknav">` として実装した結果、既存 bare `nav` ルール
   (line 572〜) が position:fixed の slide-in panel として捕まえてしまい
   レイアウトが破綻。再実装では `<div class="quicknav">` で本文 flow に
   留める。深緑/淡緑の既存パレット (#316745 / #d6e9ca) をそのまま流用、
   3つ目のお問い合わせは CTA 用に色を反転 (深緑bg + 白text)。 */
.quicknav {
    display: flex;
    flex-direction: column;
    gap: 0.7em;
    margin: 1.5em auto;
    padding: 0 1em;
    max-width: 28em;
}
.quicknav-btn {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 1em 1.2em;
    background: #d6e9ca;
    color: #316745;
    border: 2px solid #316745;
    border-radius: 0.4em;
    font-size: 1.15em;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.3;
    transition: background-color 0.15s ease, transform 0.05s ease;
}
.quicknav-btn:link,
.quicknav-btn:visited { color: #316745; }
.quicknav-btn:hover,
.quicknav-btn:focus { background: #c2dcb1; }
.quicknav-btn:active { transform: scale(0.98); }
.quicknav-btn--cta {
    background: #316745;
    color: #ffffff;
    border-color: #316745;
}
.quicknav-btn--cta:link,
.quicknav-btn--cta:visited { color: #ffffff; }
.quicknav-btn--cta:hover,
.quicknav-btn--cta:focus { background: #245138; }
.quicknav-icon {
    font-size: 1.4em;
    flex-shrink: 0;
}
.quicknav-label {
    flex: 1;
}

.maeshot {
    /* 2026-05-02 polish: 旧 #e0ebaf 単色 + tex_wasi.jpg テクスチャから、
       薄緑 (#d6e9ca) + ベージュ (#f5e8d0) の二重 radial gradient + 軽い
       shadow + 大きめ border-radius でカード風の柔らかい印象に。
       人物紹介セクションに和紙テクスチャの硬さは合わないという判断。 */
    text-align: center;
    width: 100%;
    margin: 1.5em 0;
    padding: 1.5em 1.2em;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    background:
        radial-gradient(circle at top left,     rgba(214, 233, 202, 0.55) 0%, transparent 60%),
        radial-gradient(circle at bottom right, rgba(245, 232, 208, 0.55) 0%, transparent 55%),
        #ffffff;
}
.maeshot p {
    font-size: 1.2em;
    letter-spacing: 0.1em;
    text-align: left;
    color: #595857;
    margin: 10px 10px 10px 20px;
    font-family: 'Sawarabi Mincho', 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
}
/* 暮らしのマーケット ★4.93 リンク行 (2026-05-02 追加)。
   .maeshot p の text-align: left を上書きする specificity 確保のため
   p.maeshot-rating で記述 (0,2,1 vs .maeshot p の 0,1,1)。 */
.maeshot p.maeshot-rating {
    margin-top: 1em;
    text-align: center;
    font-size: 0.95em;
    letter-spacing: normal;
}
.maeshot-rating a {
    display: inline-block;
    color: #316745;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px dotted #316745;
    padding-bottom: 1px;
}
.maeshot-rating a:link,
.maeshot-rating a:visited { color: #316745; }
.maeshot-rating a:hover,
.maeshot-rating a:focus { border-bottom-style: solid; }
.maeshot-rating-meta {
    display: block;
    margin-top: 0.3em;
    font-size: 0.8em;
    color: #666;
}

/* セクション内の小タイトル (旧 div.ser_tt) */
.section-subtitle {
    font-size: 1em;
    color: #316745;
    text-align: center;
    margin: 10px 10px auto;
}

img.simg1 {
    width: 100%;
    height: auto;
    margin: 10px 0 0 0;
    /* 2026-05-02 polish: 6 サービス写真を「整った写真」感に。
       角を 8px で丸め、近接 0.08 + 遠方 0.04 の 2 層 box-shadow で
       軽くフロート感。raw 素材っぽい印象から curated photo 感へ。 */
    border-radius: 8px;
    box-shadow:
        0 2px 4px  rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.04);
}

div.price {
    width: 100%;
    margin-top: 10px;
}

/* 料金表 (2026-05-02 リファクタ): 旧2列 (品目 / 条件+価格+注釈混在) を
   3列 (品目 / 条件 / 価格) に分離。注釈は条件列の下にサブ行として
   インデント表示。価格列は右寄せ・太字で一覧性向上。
   サブ行ボーダー処理: クラスベース (.has-note) で、注釈付きの data 行は
   下ボーダー無しにし、続く .price-row--note にボーダーを移譲。
   :has() を避けてクラスで実現することで古いブラウザでも安全。 */
.price-table {
    font-family: 'Noto Sans JP', sans-serif;
    width: 100%;
    border-collapse: collapse;
}
.price-table tr {
    background-color: #fff;
    border-bottom: 1px dotted #8BC34A;
}
.price-table .price-row--data.has-note {
    border-bottom: none;       /* 注釈サブ行に境界を譲る */
}
.price-table tr:last-child {
    border-bottom: 2px solid #18521b;
}
.price-table th,
.price-table td {
    padding: 1em 0 1em 5px;
    vertical-align: top;
}
.price-table tbody th {
    color: #006e54;
    font-size: 1.1em;
    white-space: nowrap;
    text-align: left;
    width: 1%;                 /* 品目列は中身に合わせて最小幅 */
}
.price-table .price-cond {
    /* 条件列 — 残りの幅を吸収 */
}
.price-table .price-amt {
    text-align: right;
    white-space: nowrap;
    font-weight: bold;
    padding-right: 0.5em;
    padding-left: 1em;
}
.price-table .price-row--note td {
    padding-top: 0;
    padding-bottom: 0.5em;
}
/* data 行 (注釈付き) の下余白を圧縮して note 行と密着させる。
   通常 td は 1em padding-bottom (≒17px) → 0.3em (≒5px) に。
   .has-note クラスは既に注釈付き data 行に付いているので、
   :has() 不要で同じ意味を表現できる。注釈無し data 行は影響なし。 */
.price-table .price-row--data.has-note th,
.price-table .price-row--data.has-note td {
    padding-bottom: 0.3em;
}
.price-table .price-note {
    font-size: 0.9em;
    color: #555;
    /* 2026-05-02 polish v2: padding-left 2em は条件列データ ("1.5mまで 1本"
       等) の x 開始位置より右にズレる原因だった。base td の 5px padding
       がそのまま効くようにし、条件列データと x が一致するアライメント。
       品目列との境界は empty <td> がカラム幅を確保するので不要。 */
}

.txt {
    text-align: left;
    font-size: .85em;
}

/* メールで気軽に質問する CTA (Phase A 公開フォーム) — .inf_tel2 (ピンク) と並ぶ
   3 チャネル目の深緑バナーボタン。.inf_tel2 のサイズ感を踏襲。 */
.inf_form_cta {
    display: block;
    /* Phase A polish (2026-05-01): スマホで「メールで気軽に質問する」が折り返さない
       ように clamp() でサイズ可変。380px viewport で約 17px、desktop は 1.6em 維持。 */
    font-size: clamp(1.0em, 4.5vw, 1.6em);
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border: 1px solid #316745;
    border-radius: 10px;
    background-color: #316745;
    padding: 0.55em 0.4em;
    margin: 14px 0 6px;
    letter-spacing: 0.06em;
    filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.2));
    font-family: 'Sawarabi Gothic', 'Noto Sans JP', sans-serif;
}
.inf_form_cta:link, .inf_form_cta:visited { color: #ffffff; }
.inf_form_cta:hover { background-color: #285738; border-color: #285738; text-decoration: none; }

.inf_tel1 {
    font-size: 1.3em;
    color: #316745;
    margin-top: 10px;
    text-align: center;
}
.inf_tel2 {
    font-size: 2.3em;
    color: #eaf4fc;
    text-align: center;
    border: 1px solid #f09199;
    border-radius: 10px;
    background-color: #f09199;
}
.inf_tel22 {
    color: #eaf4fc;
    text-align: center;
    border: 1px solid #f09199;
    border-radius: 10px;
    background-color: #f09199;
}
.inf_fax {
    /* Phase A polish グループB (2026-05-01): 1.8em → 0.95em に控えめ化。
       FAX は年配層向けの補助情報で、電話 (.inf_tel2) ほど目立つ必要がない。 */
    font-size: 0.95em;
    color: #666;
    text-align: center;
    margin: 4px 0 8px;
}
.inf_fax22 {
    color: #316745;
    text-align: center;
    font-size: 0.8em;
}

/* Phase A polish グループB (2026-05-01): LINE バナー再構成。
   旧 display: table のレイアウトを廃止し、Flexbox でアイコン左 + テキスト/QR 右の
   横並びに変更。文言「気軽に〜」(メール CTA と被る) を撤回、新文言「お庭のことを
   LINE でご相談」を採用。アイコン画像 frontend/images/ui/line_icon.png を採用。 */
.line_info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid #00B900;
    border-radius: 10px;
    background-color: #fff;
    margin: 12px 0;
    text-align: left;
}
.line_icon {
    flex-shrink: 0;
    width: 80px;
}
.line_icon img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
}
.line_body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.line_title {
    font-size: 1.15em;
    font-weight: 700;
    color: #00B900;
    margin: 0;
    background: none;
    border-radius: 0;
    display: block;
}
.line_qr {
    display: block;
    margin: 4px 0;
}
.line_qr img {
    width: 120px;
    height: auto;
    display: block;
}
.line_txt {
    font-size: 0.9em;
    color: #444;
    margin: 0;
    line-height: 1.5;
    display: block;
}
.line_txt a {
    color: #00B900;
    text-decoration: underline;
    font-weight: 700;
}
div.free_sou {
    font-size: 1.5em;
    text-align: center;
    color: #f09199;
}

.inf p {
    margin: 7px 0 0 0;
}

/* セクションタイトル共通 (旧 .ser_t/.pri_t/.inf_t/.area_t/.ques_t を統一) */
.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Phase A polish (2026-05-01): スマホでの 2 行折返し回避。380px viewport で
       約 26px (clamp の min)、768px 以降は 3em (=48px) で従来 desktop 見た目と同一。 */
    font-size: clamp(1.6em, 6.5vw, 3em);
    font-weight: bold;
    height: 10vh;
    background-color: #316745;
    /* Phase A polish グループB (2026-05-01): 和紙風ランダムノイズテクスチャを
       SVG <feTurbulence> で生成、data URI で埋め込み (外部ファイル不要)。
       baseFrequency=0.85 で長繊維っぽい質感、feColorMatrix の alpha 0.08 で 8%
       のごく薄いダーク粒子を bg-color (深緑) の上に重ねる。 */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
    background-repeat: repeat;
    color: #d6e9ca;
    text-shadow: 1px 1px 1px #d6e9ca;
    filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.3));
    margin-top: 20px;
    font-family: 'Sawarabi Mincho', 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
    /* h2 ベースになるので nowrap 解除 (タイトル長対応) */
    white-space: normal;
    letter-spacing: 0.05em;
}
.section-title.--first {
    /* サービス内容 (最初のセクション)、z-index で header より下に潜らないように */
    z-index: 999;
}
.section-title.--with-margin-bottom {
    /* 対応エリア用 */
    margin-bottom: 15px;
}
/* /contact/ 3 ページ用 (Phase A polish 2026-05-01)。色を反転 (淡緑bg + 深緑text)。
   font-size の clamp / drop-shadow / margin / フォントは基底クラスから継承。 */
.section-title.--light {
    background-color: #d6e9ca;
    color: #316745;
    /* 反転に伴い text-shadow も微調整: 元 (深緑地に淡緑 text + 淡緑 shadow) は cohesion
       重視だったが、淡緑地に深緑 text の場合は shadow を白光に振って読みやすさ確保 */
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6);
}

.area_img {
    text-align: center;
    width: 100%;
    margin-top: 1.5em;
}
.area_img img {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto;
    /* Smooth subtle border to separate from background */
    border-radius: 6px;
}

.qanda {
    width: 100%;
    font-family: 'Noto Sans JP', sans-serif;
}
.qq {
    font-size: 1.2em;
    margin-top: 10px;
    color: #2e2930;
}
.qa {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1em;
    color: #316745;
}

footer {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.2em;
    padding-bottom: 10px;
    /* background-color はJSで月別配色を適用するため指定しない (oniwa.js が
       el.style.backgroundColor を月色で設定)。
       2026-05-02 polish: その上に CSS で background-image を重ねて
       上→下の薄いダークオーバーレイ。background-color (JS) と
       background-image (CSS) は別プロパティなので競合せず層を成す。
       0.12 の不透明度は data/colors の 12 ヶ月分すべてが pastel 系で
       あることを踏まえた値 (どの月でも muddy にならない閾値)。 */
    background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0)    0%,
        rgba(0, 0, 0, 0.12) 100%
    );
}
.flogo {
    text-align: center;
    margin-bottom: 30px;
}
.fprof {
    margin: 10px 5px 5px 20px;
    color: #d6e9ca;
    text-align: center;
}
img.fimg3 {
    width: 40%;
    margin: 8em 0 0 3px;
    opacity: 0.7;
    height: auto;
}

div.s1 p {
    /* Phase A polish (2026-05-02): 1.7em 固定だと 390px で「お庭のお悩み解決します」
       (12 字 + 絵文字) がはみ出していた。clamp で narrow 縮小、wide 時は 1.7em 維持。
       PC 1000px+ は別ルール (line 883 付近 div.s1 p { font-size: 3em }) で上書き */
    font-size: clamp(1.2em, 5.5vw, 1.7em);
    margin: 5px 0 8px 1em;
    color: #006e54;
}

.fprof p {
    font-size: 1.4em;
    font-family: 'Sawarabi Mincho', 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
    text-align: center;
    color: #1e1d17;
    text-shadow: 1px 2px 3px #808080;
}

.footTable {
    margin: 40px auto 15px;
    font-style: normal; /* address 内なので reset */
    /* 2026-05-02 polish v3.1 (案B 切替+色明示): カード装飾 (bg/角丸/padding/shadow)
       は完全撤去で plain text 化。色は #1a1a1a で明示。
       理由: 親 .fprof に color: #d6e9ca (薄緑) が指定されているため、color を
       未指定にすると .footTable は .fprof から薄緑を継承して文字が読めなく
       なる。#footer の JS-set color (#1a1a1a) は .fprof で遮られて footTable
       まで届かない。data/colors の全 12 月が pastel bg なので #1a1a1a は
       全月で高コントラスト。
       legal/contact では body.legal .footTable / contact.css .footTable
       (#316745) が specificity / cascade で勝って深緑が出る。 */
    color: #1a1a1a;
}
.footTable tr { padding: 0; }
.footTable th { white-space: nowrap; }
.footTable th,
.footTable td {
    text-align: left;
    padding: 0;
}

footer small {
    color: #69821b;
    font-size: 0.7em;
    white-space: nowrap;
}

/* ハンバーガーメニュー */
.overlay {
    display: block;
    width: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    /* Phase A polish (2026-05-01): .section-title.--first の z-index: 999 + filter
       stacking context に勝つため引き上げ (2 → 5000)。header (9999) より下を維持。 */
    z-index: 5000;
    opacity: 0;
    transition: opacity .5s;
}
.overlay.open {
    width: 100%;
    height: 100%;
    opacity: 1;
}

.menu-trigger {
    display: inline-block;
    width: 36px;
    height: 28px;
    vertical-align: middle;
    cursor: pointer;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    background: transparent;
    border: 0;
    transform: translateX(0);
    transition: transform .5s;
}
.menu-trigger.active {
    transform: translateX(-250px);
}
.menu-trigger span {
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    left: 10px;
    width: 90%;
    height: 4px;
    background-color: #595857;
}
.menu-trigger.active span {
    background-color: #fff;
}
.menu-trigger span:nth-of-type(1) { top: 0; }
.menu-trigger.active span:nth-of-type(1) {
    transform: translateY(12px) rotate(-45deg);
}
.menu-trigger span:nth-of-type(2) { top: 12px; }
.menu-trigger.active span:nth-of-type(2) { opacity: 0; }
.menu-trigger span:nth-of-type(3) { bottom: 0; }
.menu-trigger.active span:nth-of-type(3) {
    transform: translateY(-12px) rotate(45deg);
}

/* Hide the trigger entirely when the nav is open. The × icon was
   redundant (overlay click already closes the menu) and floated
   outside the panel boundary which looked stray. visibility (not
   display:none) keeps the layout slot reserved so close→reopen
   doesn't shift surrounding header content. 2026-05-02. */
.menu-trigger.active {
    visibility: hidden;
}

nav {
    width: 250px;
    height: 100%;
    padding-top: 100px;
    background-color: rgb(255, 255, 255, 0.9);
    position: fixed;
    top: 0;
    right: 0;
    /* Phase A polish (2026-05-01): .overlay (5000) より上、header (9999) より下。
       メニュー項目が overlay の暗幕の上に visible である必要がある。 */
    z-index: 5100;
    transform: translate(250px);
    transition: all .5s;
}
/* background-image is set dynamically by JS (applyMonthlyBranchImage)
   to one of b_1.png 〜 b_6.png based on the current 2-month period
   (period 1=梅, 2=桜, 3=藤, 4=百日紅, 5=金木犀, 6=山茶花). */
nav.open {
    transform: translateZ(0);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
}
nav li {
    color: #fff;
    font-size: 1.3em;
    text-align: center;
    padding: 10px 0;
}
nav ul {
    list-style: none;
}

.menu_info {
    text-align: center;
    margin: 15px;
    font-size: 1.4em;
}

/* お問い合わせページ (pp.html 等で使用) */
.contactF {
    margin-top: 20px;
    margin-bottom: 30px;
    width: 85vw;
}
.topAdjust {
    height: 70px;
}

/* Phase A polish (2026-05-01): 法務ページ (pp.html, terms.html) 用スタイル。
   LP の section-title (深緑bg + テクスチャ) を h1 に流用、条文 h2 は控えめな
   左ボーダー + 深緑文字。本文 / リスト / address / intro / date は読み心地優先 */
.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 1em 1.2em 3em;
}
.legal-page p {
    line-height: 1.85;
    margin: 0.5em 0 1em;
}
.legal-page ul,
.legal-page ol {
    line-height: 1.85;
    margin: 0.5em 0 1.2em;
    padding-left: 1.5em;
}
.legal-page ul li,
.legal-page ol li {
    margin: 0.4em 0;
}
.legal-h2 {
    font-size: clamp(1.15em, 4.5vw, 1.5em);
    font-weight: 700;
    color: #316745;
    border-left: 4px solid #316745;
    padding: 0.3em 0 0.3em 0.7em;
    margin: 1.8em 0 0.6em;
    letter-spacing: 0.03em;
}
.legal-intro {
    font-size: 1em;
    margin: 1em 0 2em;
    padding: 0.8em 1em;
    background-color: #f5f5f0;
    border-left: 4px solid #d6e9ca;
    line-height: 1.85;
}
.legal-address {
    font-style: normal;
    background-color: #f5f5f0;
    padding: 0.8em 1em;
    margin: 1em 0;
    border-radius: 4px;
}
.legal-address p {
    margin: 0.3em 0;
}
.legal-date {
    text-align: right;
    margin: 2em 0 1em;
    font-size: 0.9em;
    color: #666;
}
.ppF-sep {
    color: #999;
    margin: 0 0.3em;
}

/* Phase A polish (2026-05-01): 料金表の警告ボックス。`/contact/` 系で
   使用中の .contact-notice (contact.css 内、LP からは読み込まれない) と
   同等トーンで揃え、サイト一貫の淡黄 + 黄左ボーダー。core message
   「標準的な参考価格」を <strong> で太字 + 朱で強調、terms.html 第3条
   2項と表記統一。 */
.price-warning {
    background-color: #fff8df;
    border-left: 5px solid #f0c040;
    padding: 12px 14px;
    margin: 18px 0;
    color: #595857;
    font-size: 0.95em;
    border-radius: 0 6px 6px 0;
}
.price-warning p {
    margin: 0;
    line-height: 1.85;
}
.price-warning strong {
    color: #c14d2c;
    font-weight: 700;
}

/* Phase A polish (2026-05-01): 法務ページ (body.legal) のフッタ静的配色。
   LP のフッタ bg は oniwa.js が data/colors を読んで月別動的配色を当てるが、
   pp.html / terms.html では info_msg 等の LP 専用 element が無く JS が abort
   して footer が透明 (= 白) のままになる。/contact/ で contact.css に同等
   ルールを当てたのと同じパターン (decisions v2.13 参照)。 */
body.legal footer {
    background-color: #d6e9ca;
}
body.legal .fprof,
body.legal .footTable,
body.legal footer small {
    color: #316745;
}

p.ppF {
    /* Phase A polish (2026-05-01): 旧 0.7em + a 0.4em の二重縮小で実質
       4.7px の極小サイズになっていた。container を 0.85em (約 14.5px) に
       引き上げ、a 側の二重縮小を撤廃 (1em = container 継承)。 */
    font-size: 0.85em;
}
p.ppF a {
    text-decoration: underline;
    color: #888888;
    font-size: 1em;
}

/* タブレット幅 */
@media screen and (min-width: 631px) {
    .topAdjust {
        height: 15vh;
    }
}

/* PC幅 (Phase C リデザイン: max-width中央寄せ + Grid + Flexbox) */
@media screen and (min-width: 1000px) {
    /* PC では header は scroll とともに流れる (固定解除) → main の padding-top も不要 */
    header {
        position: relative;
    }
    main {
        padding-top: 0;
    }

    /* メインコンテンツ全幅中央寄せ */
    main {
        max-width: 1200px;
        margin: 0 auto;
    }
    /* セクションタイトル帯は max-width に収まらず横全幅で表示する場合、
       main 外側の background-color で帯を演出するなど工夫が必要。
       今回は main 内に収めて max-width 1200px 内で帯表示 (両端に余白) */

    ul {
        line-height: 1.8em;
    }

    .info_head {
        display: inline-block;
        text-align: center;
        margin: 0.5em 0 0 0;
        font-size: 3em;
    }
    .info_head_w {
        text-align: right;
        margin-right: 0.5em;
    }

    img.timg { display: none; }
    img.timg-pc { display: block; }
    img.timg1 {
        width: 50%;
        margin: 1em 0 1em 1em;
    }

    /* Top hero on PC: Phase 1 (2026-05-02) — same vertical material as SP,
       cropped to a horizontal aspect via object-fit. Non-layered months
       still load the legacy bake (set by JS) which is already shaped
       horizontally so object-fit:cover is harmless there. */
    .top-hero__photo,
    .top-hero {
        max-height: 520px;
        overflow: hidden;
    }
    img.timg-pc {
        max-height: 520px;
        object-fit: cover;
        /* Crop ~65% from the top, ~5% from the bottom — show the
           lower band of the source image (where the flowers sit) but
           leave a small breather above the bottom edge so we don't
           land on ground / pavement. For tsutsuji (800×1200 → scaled
           1200×1800 in a 520-tall box) this leaves rows ~1175..1695
           visible. `center bottom` was flush against the very bottom;
           `center center` showed too much sky/blur. 90% threads it. */
        object-position: center 90%;
    }
    .top-hero__catchphrase {
        font-size: clamp(2.4rem, 3.4vw, 4rem);
        top: 5%;
        right: 3%;
    }
    .top-hero__stamp {
        width: 12%;
        max-width: 180px;
    }

    /* マエショ (前田氏) 画像+テキスト: Flexbox化 (画像左/テキスト右、垂直中央)
       2026-05-02 update: テキスト側を .maeshot-text wrapper にまとめたので
       flex: 1 は wrapper に移譲。複数 <p> を直接 flex item にすると row で
       並んで崩れるためのリファクタ。 */
    .maeshot {
        display: flex;
        align-items: center;
        gap: 2em;
        padding: 2em;
        height: auto;
    }
    .maeshot img.msimg {
        width: 25%;
        max-width: 240px;        /* 旧 300px → 240px (解像度カバー連動) */
        margin: 0;
        flex-shrink: 0;
    }
    .maeshot-text {
        flex: 1;
    }
    .maeshot p {
        margin: 0 0 1em 0;
        padding: 0;
    }
    .maeshot p:last-child {
        margin-bottom: 0;
    }

    .s1 {
        margin-left: 20%;
        /* background-size: 電球廃止に伴い削除 (Phase A polish グループA) */
    }
    .s2 { font-size: 1.3em; }

    /* サービス3カラム: Grid化 (旧 float:left ハック撤廃) */
    .service-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .service-item {
        display: flex;
        flex-direction: column;
    }

    /* 旧 .ser_t は font-size 2.8em だったが、統合して 3em のまま (PC 整え直しの判断) */

    .price-table tbody th {
        font-size: 2em;
    }
    .price-table .price-amt {
        font-size: 1.5em;
    }

    .inf_tel2 {
        font-size: 2.5em;
        width: 30%;
        margin: auto;
    }

    img.fimg3 {
        width: 20%;
        margin: 3em auto auto auto;
    }
    div.s1 p { font-size: 3em; }

    /* LINE 公式QRコード: デスクトップで巨大化を抑制 */
    .line_info {
        max-width: 600px;
        margin: 0 auto;
    }
    .line_info img {
        max-width: 180px;
        width: 100%;
    }

    .fprof p { text-shadow: none; }

    main h1 { font-size: 3em; }

    .menu-trigger { display: none; }

    .contactFlink {
        width: 30%;
        margin: 0 auto 20px;
    }
}