/* Phase 3.21 — 問い合わせフォーム・会社概要・プライバシーポリシー用の追加スタイル。 Design Lock対象のstyles.css(V12参照実装のbyte-identicalコピー)は一切変更しない。 このファイルは新規ページ専用の補助スタイルとして、既存のdesign tokens(--brand等)を 再利用しつつ別ファイルで追加する。 */ .form-page-hero{padding:56px 0 8px} .form-section{padding:24px 0 78px} .contact-form{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:28px;max-width:680px} .form-field{margin-bottom:22px} .form-field label{display:block;font-weight:700;font-size:14px;margin-bottom:8px;color:var(--ink)} .form-field .required{color:#c0392b;font-size:12px;font-weight:700;margin-left:6px} .form-field .optional{color:var(--muted);font-size:12px;font-weight:600;margin-left:6px} .form-field input[type="text"], .form-field input[type="tel"], .form-field input[type="email"], .form-field select, .form-field textarea{ width:100%;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:16px; color:var(--ink);background:#fff;min-height:50px; } .form-field textarea{min-height:140px;resize:vertical;line-height:1.6} .form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)} .form-hint{margin-top:6px;font-size:13px;color:var(--muted)} .form-error{margin-top:6px;font-size:13px;color:#c0392b;font-weight:700} .form-field.has-error input,.form-field.has-error select,.form-field.has-error textarea{border-color:#c0392b} .consent-row{display:flex;align-items:flex-start;gap:10px;margin:26px 0} .consent-row input[type="checkbox"]{width:20px;height:20px;margin-top:2px;flex:0 0 auto} .consent-row label{font-size:14px;color:var(--ink-2);line-height:1.6} .consent-row a{color:var(--brand);font-weight:700;text-decoration:underline} /* honeypot: 目視でも支援技術でも触れさせない(display:noneはスクリーンリーダーにも隠れる)。 */ .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-submit-row{margin-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .form-status{font-size:14px;font-weight:700} .form-status.success{color:var(--brand-d)} .form-status.error{color:#c0392b} .form-success-panel{background:var(--mint);border:1px solid var(--brand);border-radius:var(--r);padding:28px;max-width:680px} .form-success-panel h2{font-size:22px;margin-bottom:10px} .config-required-note{background:var(--warm);border:1px dashed #c9a227;border-radius:12px;padding:16px 18px;font-size:13px;color:var(--ink-2);margin:18px 0} .company-table{width:100%;max-width:680px;border-collapse:collapse;margin-top:18px} .company-table th,.company-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px} .company-table th{width:35%;color:var(--muted);font-weight:700} .legal-review-note{background:#fdeeee;border:1px solid #e8b4b4;border-radius:12px;padding:16px 18px;font-size:13px;color:#7a2323;margin:18px 0} @media(max-width:640px){ .contact-form{padding:20px;border-radius:16px} .company-table th,.company-table td{padding:10px 12px;font-size:13px} } /* 共通ヘッダーのモバイルメニュー(☰)。Design Lock参照実装にはnav-open時のCSSが無く、押しても何も起きなかった。 既存のデザイントークンだけで、開いたときにリンクをヘッダー直下へ縦に並べる。 */ @media(max-width:1000px){ body.nav-open .nav{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;margin:0;padding:6px 16px 12px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)} body.nav-open .nav a{display:block;padding:15px 4px;font-size:15px;border-bottom:1px solid var(--line)} body.nav-open .nav a:last-child{border-bottom:0} } /* 見出しの不自然な改行(「比/較」「判断基/準」「…シー/」のように、1〜2文字だけが次の行へ落ちる)を防ぐ。 日本語を文節で折り返し(auto-phrase)、行の長さを均等にする(balance)。未対応のブラウザでは従来どおり。 */ h1,h2,h3{word-break:auto-phrase;text-wrap:balance} /* 内容の短いページ(guides・404等)で、フッターが画面下端に届かず白帯が出るのを防ぐ。 */ body{min-height:100vh;display:flex;flex-direction:column} body>main{flex:1 0 auto} /* ===== V1 Final Visual QA ===== */ /* 見えない見出し(見出し階層を h1→h2→h3 に保つ) */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* コントラストをWCAG AA(4.5:1)以上へ: ブランド色と補助文字色をほぼ同色のまま少し濃くする */ :root{--brand:#0a7a67;--muted:#5a6f76} /* 地域ガイドの地図: 空の枠ではなくイラストを表示する */ .region-box > *{min-width:0} .map-shape{display:block;width:100%;height:auto;aspect-ratio:2/1;overflow:hidden;padding:0;background:#f1f0c5;font-size:0} .map-shape img{width:100%;height:100%;object-fit:cover;display:block} /* 地域ガイドの右カードを中身の高さに(下半分が空白にならない) */ .region-box{align-items:center} /* スマホ/タブレットの2列カードで、最後の1枚が取り残されないよう横いっぱいに */ @media (max-width:1000px){ .quick-grid > .quick-card:last-child:nth-child(odd){grid-column:1 / -1} .quick-grid > .quick-card:last-child:nth-child(odd) img{height:150px;aspect-ratio:auto;object-fit:cover;object-position:center 45%} } /* タップしやすさ: フッターリンクとメニューボタンの当たり判定を広げる */ @media (max-width:1000px){ .footer-links a{display:inline-block;padding:11px 4px} .footer-links{gap:2px 14px} .menu{min-width:44px;min-height:44px} } /* 1文字だけの折り返しを避ける */ p,li,.section-lead{text-wrap:pretty} /* 害獣ページHeroの小見出し: 薄緑の背景でもAAを満たす濃さに */ .page-hero[style*="--pest-hero"] .eyebrow{color:#07685a} /* V1 TOP: 読みもの欄(旧・地域検索欄)。ボタンを縦に並べる */ .guide-links{display:grid;gap:10px;margin-top:16px} .guide-links .btn{width:100%;justify-content:center} /* ===== 広告・PRの表示(V1は広告リンクなし。掲載時に AdDisclosure 部品で使う) ===== */ .ad-badge{display:inline-block;margin-right:6px;padding:1px 7px;border:1px solid #6b7e85;border-radius:4px;color:#46585e;font-size:11px;font-weight:700;line-height:1.6;letter-spacing:.04em;vertical-align:middle} .ad-link{display:inline-flex;align-items:center;gap:2px} .ad-notice{margin:0 0 18px;padding:10px 14px;border-left:3px solid #6b7e85;background:#f3f7f7;color:#3d4f55;font-size:13px;line-height:1.7} .ad-notice a{margin-left:8px;text-decoration:underline} /* V1 LIMITED REGION: 地域の入口(/area)。既存のトークン(--line/--shadow-sm/--muted)のみ使用。 */ .area-index-search{margin-top:28px;max-width:640px} .area-pref{margin-top:36px} .area-pref h2{font-size:24px;margin:0 0 14px} .area-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .area-card{display:block;height:100%;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);min-height:44px} .area-card:hover{border-color:var(--brand)} .area-card strong{display:block;font-size:18px;line-height:1.5;overflow-wrap:anywhere} .area-card span{display:block;color:var(--muted);font-size:13px;margin-top:4px;line-height:1.6} @media(max-width:1000px){.area-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.area-cards{grid-template-columns:1fr}} /* 地域検索の選択欄: 長い選択肢で枠を押し広げない。中間幅(パネルが狭い)では縦に並べる。 */ .region-search select{min-width:0;width:100%;text-overflow:ellipsis} @media(max-width:1180px){.region-search .row{flex-direction:column}} /* Phase L1 — 利用者向けの仕上げ(利用しやすさ・アクセシビリティ)。 Design Lock対象のstyles.css・styles-contact.cssは変更せず、別ファイルとして最後に読み込む(既存のデザイントークンのみ)。 ブランドの方向性(承認済みのヒーロー写真・配色・文言)は変えない。 */ /* ---- アクセシビリティ: キーボード操作 ---- */ .skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:12px 18px;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;font-size:14px} .skip-link:focus{top:10px} a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px} .footer a:focus-visible{outline-color:#fff} /* ---- タップ・クリック領域(WCAG 2.5.8 の24px以上を満たし、主要な操作は44px以上) ---- */ @media(min-width:1001px){ .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px} } .footer-links{gap:0 18px} .footer-links a{display:inline-flex;align-items:center;min-height:44px} .consent-row input[type="checkbox"]{width:24px;height:24px;margin-top:0} .consent-row a{display:inline-block;padding:2px 0} /* ---- ヘッダーのスマホメニュー: 主要ボタンを入れる ---- */ body .nav a.nav-cta,body.nav-open .nav a.nav-cta{display:none} @media(max-width:640px){ body.nav-open .nav a.nav-cta{display:block;margin-top:10px;padding:15px 16px;border-bottom:0;border-radius:12px;background:var(--brand);color:#fff;text-align:center;font-weight:800} } @media(max-width:1000px){ body.nav-open .nav a{min-height:48px;display:flex;align-items:center} } /* ---- スマホのサブページ(地域・お問い合わせ・運営方針・読みもの・プライバシー): 写真は上部の帯にとどめ、本文を最初の画面から出す ---- */ @media(max-width:640px){ .page-hero:not([style*="--pest-hero"]){min-height:0} .page-hero:not([style*="--pest-hero"])::before{inset:0 0 auto 0;height:60vw;background-size:100% auto;background-position:50% 4%} .page-hero:not([style*="--pest-hero"])::after{background:linear-gradient(180deg,rgba(249,253,253,0) 0,rgba(249,253,253,0) 22vw,rgba(249,253,253,.93) 40vw,rgba(249,253,253,1) 48vw)} /* 小見出し(eyebrow)の文字がWCAG AAのコントラスト(4.5:1)を満たすよう、写真の淡い覆いを早めに濃くする(Phase L3の実測で、スマホの小見出しが3.9〜4.3:1だった) */ .page-hero:not([style*="--pest-hero"]) .container{padding-top:calc(44vw + 8px);padding-bottom:26px} .page-hero:not([style*="--pest-hero"]) h1{font-size:clamp(28px,8.4vw,40px)} .page-hero:not([style*="--pest-hero"]) p{margin-top:12px} .page-hero:not([style*="--pest-hero"])+.section{padding-top:28px} } /* ---- スマホのTOP: 縦に長くなる一覧をコンパクトに ---- */ @media(max-width:640px){ .pest-icon-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .pest-icon-card{flex-direction:column;align-items:flex-start;gap:8px;padding:14px} .feature-card{padding:20px} .section{padding:48px 0} } /* ---- 地域検索(自治体名で探す) ---- */ .area-query{margin-top:14px} .area-query-label{display:block;font-weight:700;font-size:14px;margin-bottom:8px;color:var(--ink)} .area-query input[type="search"]{width:100%;min-height:50px;border:1px solid var(--line);border-radius:12px;padding:0 16px;font-size:16px;color:var(--ink);background:#fff} .area-query-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px} .area-query-list a{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;border:1px solid var(--brand);border-radius:12px;background:var(--mint);color:var(--ink)} .area-query-list a strong{font-size:16px} .area-query-list a span:nth-of-type(1){flex:1;color:var(--muted);font-size:13px} .area-query-none{margin:10px 0 0;padding:12px 14px;border-radius:12px;background:#fff7e6;border:1px solid #f0d9a8;color:var(--ink-2);font-size:14px;line-height:1.7} .area-or{margin:18px 0 0;font-size:13px;color:var(--muted);font-weight:700} .area-or+.row{margin-top:8px} /* ---- 404 ---- */ .notfound-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin-top:22px} .notfound-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--brand-d);font-weight:700;text-decoration:underline} /* ---- 自治体ページ: ページ内ジャンプ(長い本文から探している項目へ移動する) ---- */ .jump-nav{border-bottom:1px solid var(--line);background:rgba(255,255,255,.96)} .jump-nav ul{list-style:none;margin:0;padding:10px 0;display:flex;flex-wrap:wrap;gap:8px} .jump-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:700;white-space:nowrap} .jump-nav a:hover{border-color:var(--brand);color:var(--brand-d)} .content-panel{scroll-margin-top:84px} @media(max-width:1000px){ .jump-nav{position:sticky;top:var(--header);z-index:40} .jump-nav ul{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:8px 0} .jump-nav ul::-webkit-scrollbar{display:none} .content-panel{scroll-margin-top:140px} } /* 動きを減らす設定の人には、ページ内移動(アンカー)のスムーズスクロールをやめる(styles.css の html{scroll-behavior:smooth} を上書き)。 */ @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* 出典の公式ページへのリンク(長いURLが折り返す1行ごとに高さ16pxしかない)。見た目・折り返しは変えず、押せる範囲だけを24px以上にする(WCAG 2.2 の対象サイズ)。 */ .source-citation dd a{padding-block:5px} /*