/* =========================================================
リハビリ健康相談所 — WordPress 追加CSS
静的サイトの assets/css/style.css を、すべて .style 配下に
スコープしたものです。各ページ最上位のグループブロックに
className "style" を付けてあります。
※ 変更は原則このファイルだけで完結します。
セレクタの先頭に必ず .style が付いている点にご注意ください。
========================================================= */
/* =========================================================
リハビリ健康相談所 — 共通スタイル
design.md のルールに準拠（配色 / タイポ / 余白 / A11y）
========================================================= */
/* ---------- 1. デザイントークン ---------- */
:root{
--brand: #2B5C87;
--brand-hover: #234C6F;
--dark: #1C3E5A;
--accent: #2F6FA3;
--bg: #FFFFFF;
--bg-alt: #F3F6FA;
--text: #222222;
--muted: #5C6673;
--line: #DCE3EC;
--danger: #B3261E;
--wrap: 1200px;
--prose: 800px;
--space-section: clamp(56px, 8vw, 104px);
--space-block: clamp(24px, 4vw, 40px);
--radius: 3px;
--header-h: 72px;
/* Cocoon 既定（テーマの style.css）と同じ並びに揃えている。
ヘッダー・メニューは Cocoon 側、本文はこの変数で決まるため、
片方だけ変えると字面がずれる。変更するときは両方そろえること。
Web フォントは読み込まない方針（表示速度優先）。 */
--font: "Yu Gothic Medium", YuGothic, "Yu Gothic", Meiryo,
"Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
/* ---------- 2. リセット / ベース ---------- */
/* .style そのものと、その中のすべての要素。
※以前 ".style*"（スペースなし）と書いていたが、これは CSS として不正で、
セレクタ一覧に1つでも不正なものがあるとルール全体が無効になる。
Cocoon 側の指定に助けられて見た目は保たれていたが、2026-09-06 に修正した。 */
.style, .style *, .style *::before, .style *::after { box-sizing: border-box; }
.style {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 16px);
-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
.style { scroll-behavior: auto; }
.style *, .style*, .style *::before, .style*::before, .style *::after, .style*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.style {
margin: 0;
font-family: var(--font);
font-size: 18px;
line-height: 1.8;
color: var(--text);
background: var(--bg);
overflow-wrap: anywhere;
line-break: strict;
}
.style img, .style svg { max-width: 100%; }
.style img { height: auto; display: block; }
.style h1, .style h2, .style h3, .style h4 { line-height: 1.45; margin: 0 0 .6em; font-weight: 700; }
.style p { margin: 0 0 1.2em; }
.style p:last-child { margin-bottom: 0; }
.style ul, .style ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.style a { color: var(--brand); }
.style a:hover { color: var(--accent); }
/* フォーカスは常に見えるようにする（design.md 8章） */
.style :focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
border-radius: 2px;
}
/* ---------- 3. ユーティリティ ---------- */
.style .wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
@media (max-width: 600px){ .style .wrap { width: calc(100% - 32px); } }
.style .prose { max-width: var(--prose); }
.style .section { padding-block: var(--space-section); }
.style .section--alt { background: var(--bg-alt); }
.style .visually-hidden {
position: absolute !important; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.style .skip-link {
position: absolute; left: 8px; top: -60px; z-index: 200;
background: var(--dark); color: #fff; padding: 10px 16px;
text-decoration: none; transition: top .15s;
}
.style .skip-link:focus { top: 8px; color: #fff; }
/* ---------- 4. 見出し ---------- */
.style .section-head { margin-bottom: var(--space-block); }
.style .section-title {
font-size: clamp(22px, 3.4vw, 34px);
color: var(--brand);
margin: 0 0 .4em;
padding-left: 14px;
border-left: 5px solid var(--brand);
}
.style .section-lead { color: var(--muted); max-width: var(--prose); margin: 0; }
/* 小見出し。Cocoon の既定は h3 に border-left:7px を付けるが
padding-left が 0 のため、線と文字が密着して詰まって見える。
線の太さと余白を .section-title（5px + 14px）にそろえ、
色もグレーからブランドカラーに変えて、同じサイトの見出しに見えるようにした。
（2026-09-08） */
.style .h3 {
font-size: clamp(18px, 2.2vw, 22px);
border-left: 5px solid var(--brand);
padding-left: 14px;
color: var(--brand);
}
/* ---------- 5. ボタン ---------- */
.style .btn {
display: inline-flex; align-items: center; justify-content: center;
gap: .5em;
min-height: 48px; padding: 12px 24px;
font-size: 18px; font-weight: 700; font-family: inherit;
border-radius: var(--radius);
border: 2px solid var(--brand);
background: var(--brand); color: #fff;
text-decoration: none; cursor: pointer;
transition: background-color .15s, border-color .15s, color .15s;
}
.style .btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.style .btn[disabled] {
background: #78828F; border-color: #78828F; color: #fff;
cursor: not-allowed;
}
.style .btn--ghost { background: #fff; color: var(--brand); }
.style .btn--ghost:hover { background: var(--bg-alt); color: var(--brand-hover); }
.style .btn--lg { min-height: 56px; padding: 14px 32px; font-size: 17px; }
.style .btn__arrow { font-weight: 400; }
/* テキストリンク（色だけに頼らない） */
.style .link-arrow {
display: inline-flex; align-items: center; gap: .35em;
font-weight: 700; text-decoration: underline;
text-underline-offset: 3px;
min-height: 44px;
}
/* ---------- 6. 画像プレースホルダ ---------- */
/* 画像未投入でも比率が保たれ、「何の画像か」が読める枠 */
.style .ph {
position: relative;
display: block;
margin: 0;
overflow: hidden;
background: var(--bg-alt);
border: 1px dashed #B4C2D3;
border-radius: var(--radius);
}
.style .ph::before {
content: "";
display: block;
padding-top: var(--ph-ratio, 56.25%);
}
.style .ph--16x9 { --ph-ratio: 56.25%; }
.style .ph--4x3 { --ph-ratio: 75%; }
.style .ph--21x9 { --ph-ratio: 42.85%; }
.style .ph--1x1 { --ph-ratio: 100%; }
.style .ph > img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 2;
}
.style .ph > img.is-missing { display: none; }
.style .ph__label {
position: absolute; inset: 0; z-index: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; padding: 12px;
text-align: center;
font-size: 16px; line-height: 1.6; color: var(--muted);
}
.style .ph__label b {
display: block; font-size: 16px; color: var(--brand);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
overflow-wrap: anywhere;
}
.style .ph__label i { font-style: normal; font-size: 15px; }
.style .ph__icon { width: 26px; height: 26px; color: #8393A8; }
/* 画像が入ったらラベルは消す */
.style .ph.is-loaded .ph__label { display: none; }
.style .ph.is-loaded { border-style: solid; border-color: transparent; }
/* ---------- 7. ヘッダー（仮） ---------- */
.style .site-header {
position: sticky; top: 0; z-index: 100;
background: #fff;
border-bottom: 1px solid var(--line);
}
.style .site-header__util {
background: var(--bg-alt);
border-bottom: 1px solid var(--line);
font-size: 16px;
}
.style .site-header__util .wrap {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; min-height: 34px;
}
.style .site-header__util p { margin: 0; color: var(--muted); }
.style .util-nav { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.style .util-nav a { color: var(--muted); text-decoration: none; }
.style .util-nav a:hover { text-decoration: underline; }
@media (max-width: 620px){ .style .site-header__util p { display: none; } }
.style .site-header__bar {
position: relative;
display: flex; align-items: center; justify-content: space-between;
gap: 16px; min-height: var(--header-h);
}
.style .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.style .brand__mark {
width: 40px; height: 40px; flex: none;
display: grid; place-items: center;
background: var(--brand); color: #fff; border-radius: 50%;
}
.style .brand__mark svg { width: 22px; height: 22px; }
.style .brand__name { font-size: 19px; font-weight: 700; color: var(--brand); line-height: 1.3; }
.style .brand__note { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
.style .nav-toggle {
display: none;
align-items: center; gap: 8px;
min-height: 44px; min-width: 44px; padding: 8px 12px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
font-family: inherit; font-size: 15px; font-weight: 700; color: var(--brand); cursor: pointer;
}
.style .nav-toggle__bars { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.style .nav-toggle__bars::before, .style .nav-toggle__bars::after {
content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.style .nav-toggle__bars::before { top: -6px; }
.style .nav-toggle__bars::after { top: 6px; }
.style .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.style .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.style .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }
.style .gnav ul { display: flex; list-style: none; margin: 0; padding: 0; }
.style .gnav a {
display: flex; align-items: center;
min-height: 44px; padding: 8px 10px;
font-size: 17px; font-weight: 700; color: var(--text); text-decoration: none;
border-bottom: 3px solid transparent;
}
.style .gnav a:hover { color: var(--brand); border-bottom-color: var(--accent); }
.style .gnav a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }
@media (max-width: 1240px){
.style .nav-toggle { display: inline-flex; }
.style .gnav {
display: none;
position: absolute; left: 0; right: 0; top: 100%;
background: #fff; border-top: 1px solid var(--line);
border-bottom: 3px solid var(--brand);
box-shadow: 0 8px 20px rgba(0,0,0,.08);
max-height: 70vh; overflow-y: auto;
}
.style .gnav.is-open { display: block; }
.style .gnav ul { display: block; }
.style .gnav li { border-bottom: 1px solid var(--line); }
.style .gnav a { padding: 14px 20px; border-bottom: none; }
}
/* ---------- 8. ヒーロー ---------- */
.style .hero { position: relative; background: var(--dark); overflow: hidden; }
/* 写真は全面に敷かず、専用の枠に入れる。
全面（横長）に敷くと横方向に切る余地がなく、二人を左へ寄せられないため。
枠を縦長にすることで横方向にトリミングでき、かつ縦は一切切れないので
人物の頭から脚まで見切れない。
スマホ・タブレットは写真を上、文字を下に積む。枠の比率は
「縦が切れない下限（1 ÷ 1.79 ≒ 56%）」より少しだけ縦長にしている。 */
.style .hero__media {
position: relative; z-index: 0;
width: min(100%, 720px); margin-inline: auto;
border: none; border-radius: 0;
--ph-ratio: 57%;
}
/* 切り取り位置。写真ごとに構図が違うため、img 側で
style="--pos:50% 20%; --pos-pc:30% center" のように個別に上書きできる。
（page-health-qa.jpg などと同じ考え方。引き継ぎメモ 5-3） */
.style .hero__media img { object-position: var(--pos, 50% center); }
/* ヒーローのスライドショー（2026-09-06）
.ph > img が position:absolute; inset:0 で重なる作りをそのまま使い、
opacity だけで切り替える。JS が動いたときだけ is-slideshow が付くので、
JS 無効・読み込み前は1枚目がそのまま見える（最後の1枚が勝たない）。 */
.style .hero__media.is-slideshow img {
opacity: 0;
transition: opacity 1.2s ease;
}
.style .hero__media.is-slideshow img.is-active { opacity: 1; z-index: 3; }
@media (prefers-reduced-motion: reduce){
.style .hero__media.is-slideshow img { transition: none; }
}
/* オーバーレイに隠れないよう、ラベルは右下に浮かせて前面に出す */
.style .hero__media .ph__label, .style .pagehead__media .ph__label {
z-index: 5;
inset: auto 16px 12px auto;
align-items: flex-end; justify-content: flex-end;
padding: 8px 12px; text-align: right;
background: rgba(20, 44, 66, .55);
border: 1px dashed rgba(255,255,255,.45);
border-radius: var(--radius);
color: #DCE8F4;
}
.style .hero__media .ph__label b, .style .pagehead__media .ph__label b { color: #9DC2E4; }
.style .hero__media .ph__icon, .style .pagehead__media .ph__icon { display: none; }
/* 写真の上に文字を置くための十分な暗さのオーバーレイ（design.md 3章）
hero.jpg は人物が画面左・右側が空きスペースという構図のため、
スマホでは上を暗く、PC では右を暗くして、人物に暗幕がかからないようにする。 */
/* 写真の上に文字を置かなくなったので暗幕は不要（コントラストも確実になる） */
.style .hero__overlay { display: none; }
.style .hero__inner { position: relative; z-index: 4; padding-block: clamp(28px, 6vw, 88px); }
.style .hero__body { max-width: 660px; color: #fff; }
/* PC は写真を左、文字を右に並べる */
@media (min-width: 1100px){
.style .hero__media {
position: absolute; top: 0; bottom: 0;
left: max(20px, calc(50% - 600px));
width: min(624px, calc((100% - 40px) * .56));
margin-inline: 0;
--ph-ratio: 0;
}
.style .hero__media::before { content: none; }
.style .hero__media img { object-position: var(--pos-pc, var(--pos, 27% center)); }
.style .hero__body {
max-width: none;
width: calc(44% - 40px);
margin-left: auto;
}
}
.style .hero__eyebrow {
display: inline-block; margin-bottom: 16px; padding: 4px 12px;
background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.45);
border-radius: 999px; font-size: 16px; font-weight: 700;
}
/* 見出しは2行（句読点を含めて各12文字）で収まる大きさに上限を設けている。
上限を上げると3行に折り返して間延びするので注意。 */
.style .hero__title {
font-size: clamp(23px, 7.2vw, 40px);
line-height: 1.45;
margin: 0 0 24px; color: #fff;
}
/* PC は文字の段が狭くなるので、幅に合わせて少し控えめにする。
※このブロックは必ず上の .hero__title より後に置くこと（後勝ちのため） */
@media (min-width: 1100px){
.style .hero__title { font-size: clamp(29px, 3vw, 40px); }
}
.style .hero__lead { font-size: clamp(17px, 1.8vw, 19px); margin-bottom: 28px; color: #E8EFF7; }
.style .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.style .hero__actions .btn--ghost { background: #fff; border-color: #fff; }
.style .hero__note { margin-top: 20px; font-size: 16px; color: #CFDDEC; }
/* ---------- 9. ページヘッダー帯（下層ページ） ---------- */
.style .pagehead { position: relative; background: var(--dark); overflow: hidden; }
.style .pagehead__media { position: absolute; inset: 0; border: none; border-radius: 0; }
.style .pagehead__media::before { content: none; }
/* page-health-qa.jpg は人物の顔が画像の上寄り（縦13〜35%）にあるため、
中央で切り出すと顔が切れる。切り出し位置を上へずらして顔を必ず入れる。
※スマホでは縦のトリミングが起きないので、この指定は効かない（＝影響なし）。 */
.style .pagehead__media img[src$="page-health-qa.jpg"] { object-position: 50% 15%; }
/* page-mypage.jpg も人物の顔が上寄り（縦13〜40%）にあるため同様に上へずらす */
.style .pagehead__media img[src$="page-mypage.jpg"] { object-position: 50% 15%; }
.style .pagehead__overlay {
position: absolute; inset: 0; z-index: 3;
background: linear-gradient(90deg, rgba(20,44,66,.92) 0%, rgba(20,44,66,.74) 60%, rgba(20,44,66,.5) 100%);
}
.style .pagehead__inner { position: relative; z-index: 4; padding-block: clamp(36px, 6vw, 76px); color: #fff; }
/* 質問ページでは ではなく
に付く。h1,h2,h3,h4 のルール（60行目）が効かないため、
行送りと太さをここで明示する。指定しないと帯が16px高くなり、文字も細くなる。 */
.style .pagehead__title {
font-size: clamp(26px, 4.6vw, 46px); line-height: 1.45; font-weight: 700;
margin: 0 0 12px; color: #fff;
}
.style .pagehead__lead {
min-height: 3.6em;
}
/* 右下のプレースホルダラベルが本文と重ならないよう余白を足す（画像投入後は元に戻る） */
@media (max-width: 780px){
.style .pagehead__inner { padding-bottom: 84px; }
.style .ph.is-loaded ~ .pagehead__inner { padding-bottom: clamp(36px, 6vw, 76px); }
}
/* パンくず */
.style .breadcrumb { background: var(--bg-alt); border-bottom: 1px solid var(--line); font-size: 16px; }
.style .breadcrumb ol {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
list-style: none; margin: 0; padding: 10px 0; color: var(--muted);
}
.style .breadcrumb li + li::before { content: "›"; margin-right: 8px; color: var(--muted); }
.style .breadcrumb a { color: var(--brand); }
/* ---------- 10. カード ---------- */
.style .cards { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.style .cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .style .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .style .cards, .style .cards--2 { grid-template-columns: 1fr; gap: 20px; } }
.style .card {
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(0,0,0,.04);
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.style .card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.style .card .ph { border: none; border-bottom: 1px dashed #B4C2D3; border-radius: 0; }
.style .card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.style .card__cat {
display: inline-flex; align-self: flex-start; margin-bottom: 10px;
padding: 2px 10px; font-size: 15px; font-weight: 700;
color: var(--brand); background: var(--bg-alt); border: 1px solid var(--line);
border-radius: 999px;
}
/* カードの見出し。Cocoon は h3 に四方の枠線と左7pxの線を付けるが、
これはカードの中のタイトルであってセクションの見出しではない。
カード自体に枠があるので、中の見出しにも枠が付くと二重になる。
（2026-09-08。商品カード13件とトップの入口カードが該当していた） */
.style .card__title {
font-size: clamp(18px, 2vw, 22px);
margin: 0 0 10px;
border: 0;
padding: 0;
background: none;
}
.style .card__title a { color: var(--text); text-decoration: none; }
.style .card:hover .card__title a { color: var(--brand); text-decoration: underline; }
.style .card__text { font-size: 17px; color: var(--muted); margin: 0 0 16px; }
.style .card__foot { margin-top: auto; }
/* ---------- 11. カテゴリ（アイコン一覧） ---------- */
.style .cat-grid {
display: grid; gap: 12px; list-style: none; margin: 0; padding: 0;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.style .cat-grid a {
display: flex; align-items: center; gap: 12px;
height: 100%; min-height: 66px; padding: 12px 14px;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
color: var(--text); text-decoration: none; font-weight: 700; font-size: 17px;
transition: border-color .15s, background-color .15s;
}
.style .cat-grid a:hover { border-color: var(--brand); background: var(--bg-alt); color: var(--brand); }
.style .cat-grid .cat-icon { flex: none; color: var(--brand); }
.style .cat-grid .cat-arrow { margin-left: auto; color: var(--brand); font-weight: 400; }
.style .cat-icon { width: 38px; height: 38px; }
.style .cat-icon svg { width: 100%; height: 100%; display: block; }
/* ---------- 12. Q&A 検索 / 一覧 ---------- */
.style .qa-tools {
background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius);
padding: clamp(16px, 3vw, 28px);
}
.style .qa-search { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.style .qa-search__field { flex: 1 1 280px; }
.style .qa-search input[type="search"] {
width: 100%; min-height: 50px; padding: 10px 14px;
font-size: 18px; font-family: inherit; color: var(--text);
background: #fff; border: 1px solid #8894A6; border-radius: var(--radius);
}
.style .qa-search input[type="search"]::placeholder { color: #6E7783; }
.style .field-label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 17px; }
.style .chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.style .chip {
display: inline-flex; align-items: center; gap: 6px;
min-height: 44px; padding: 8px 16px;
font-family: inherit; font-size: 17px; font-weight: 700;
color: var(--brand); background: #fff;
border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
transition: background-color .15s, color .15s, border-color .15s;
}
.style .chip:hover { border-color: var(--brand); background: #EDF2F9; }
.style .chip[aria-pressed="true"] {
background: var(--brand); border-color: var(--brand); color: #fff;
}
/* 色だけに頼らないよう、選択中はチェック記号を出す */
.style .chip[aria-pressed="true"]::before { content: "✓"; font-size: 16px; }
.style .qa-status {
margin: 32px 0 8px; font-size: 17px; color: var(--muted);
padding-bottom: 12px; border-bottom: 2px solid var(--brand);
}
.style .qa-status strong { color: var(--text); font-size: 17px; }
.style .qa-list { list-style: none; margin: 0; padding: 0; }
.style .qa-list > li { border-bottom: 1px solid var(--line); }
.style .qa-item summary {
display: flex; align-items: flex-start; gap: 12px;
padding: 18px 8px; cursor: pointer; list-style: none;
font-weight: 700; font-size: clamp(17px, 2vw, 19px); line-height: 1.6;
}
.style .qa-item summary::-webkit-details-marker { display: none; }
.style .qa-item summary:hover { color: var(--brand); background: var(--bg-alt); }
.style .qa-item .qa-q {
flex: none; width: 30px; height: 30px; border-radius: 50%;
display: grid; place-items: center;
background: var(--brand); color: #fff; font-size: 17px;
}
.style .qa-item summary .qa-mark { margin-left: auto; flex: none; color: var(--brand); font-size: 20px; line-height: 1; }
.style .qa-item[open] summary .qa-mark { transform: rotate(45deg); }
/* 投稿された長文の質問。一覧では2行に省略し、開くと全文を表示する */
.style .qa-item--long summary .qa-text { flex: 1 1 auto; min-width: 0; }
.style .qa-item--long:not([open]) summary .qa-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.style .qa-item--long[open] summary { align-items: flex-start; }
.style .qa-item--long[open] summary .qa-text { font-weight: 400; }
/* 相談日・相談者。回答（.qa-answer）は未ログインだと隠れるため、その外に置く */
/* padding-left は summary の 8px + Qの丸 30px + gap 12px = 50px に合わせる */
.style .qa-asked {
display: flex; flex-wrap: wrap; gap: 2px 18px;
margin: 0; padding: 0 8px 16px 50px;
font-size: 16px; color: var(--muted);
}
.style .qa-answer { display: flex; gap: 12px; padding: 0 8px 24px 8px; }
.style .qa-answer .qa-a {
flex: none; width: 30px; height: 30px; border-radius: 50%;
display: grid; place-items: center;
background: #fff; color: var(--brand); border: 1px solid var(--brand); font-size: 17px;
}
/* Q&Aの回答はこのサイトで最も読まれる文章。高齢の方の閲覧を想定して
本文（16px）より大きくし、行送りも広めに取る。
1行の長さは --prose（800px）で抑えているので、18pxでも1行あたり
40字程度に収まり長くなりすぎない。 */
.style .qa-answer__body {
flex: 1; max-width: var(--prose);
font-size: 19px; line-height: 1.95;
}
.style .qa-meta {
display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
margin-top: 14px; font-size: 16px; color: var(--muted);
}
.style .qa-meta .tag {
padding: 2px 10px; background: var(--bg-alt);
border: 1px solid var(--line); border-radius: 999px; color: var(--brand); font-weight: 700;
}
.style .qa-empty {
padding: 40px 20px; text-align: center; color: var(--muted);
background: var(--bg-alt); border: 1px dashed #B4C2D3; border-radius: var(--radius);
}
/* ---------- 13. 注意書き / 補足ボックス ---------- */
.style .notice {
border: 1px solid var(--line); border-left: 5px solid var(--brand);
background: var(--bg-alt); border-radius: var(--radius);
padding: clamp(16px, 3vw, 24px);
}
.style .notice__title {
display: flex; align-items: center; gap: 8px;
font-size: 17px; margin: 0 0 10px; color: var(--brand);
}
.style .notice__title svg { width: 22px; height: 22px; flex: none; }
.style .notice p, .style .notice li { font-size: 17px; }
.style .notice ul { margin-bottom: 0; }
.style .notice--warn { border-left-color: var(--danger); }
.style .notice--warn .notice__title { color: var(--danger); }
.style .inline-note { font-size: 16px; color: var(--muted); }
/* ---------- 14. CTA バンド ---------- */
.style .cta-band { background: var(--brand); color: #fff; }
.style .cta-band .wrap {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 24px; padding-block: clamp(32px, 5vw, 56px);
}
.style .cta-band__title { font-size: clamp(20px, 3vw, 30px); margin: 0 0 8px; color: #fff; }
.style .cta-band__text { margin: 0; color: #DCE8F4; font-size: 17px; }
.style .cta-band .btn { background: #fff; color: var(--brand); border-color: #fff; }
.style .cta-band .btn:hover { background: var(--bg-alt); color: var(--brand-hover); border-color: var(--bg-alt); }
/* ---------- 15. フォーム ---------- */
.style .form { max-width: var(--prose); }
.style .form__group { margin-bottom: 32px; }
.style .form__label {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-weight: 700; font-size: 18px; margin-bottom: 8px;
}
.style .badge {
font-size: 15px; font-weight: 700; padding: 2px 8px; border-radius: 3px;
border: 1px solid; line-height: 1.7;
}
.style .badge--req { color: #fff; background: var(--danger); border-color: var(--danger); }
.style .badge--opt { color: var(--muted); background: #fff; border-color: var(--line); }
.style .form__help { font-size: 17px; color: var(--muted); margin: 0 0 10px; }
.style .form input[type="text"], .style .form input[type="email"], .style .form input[type="tel"], .style .form select, .style .form textarea {
width: 100%; padding: 12px 14px;
font-family: inherit; font-size: 18px; line-height: 1.7; color: var(--text);
background: #fff; border: 1px solid #8894A6; border-radius: var(--radius);
}
.style .form input:focus, .style .form select:focus, .style .form textarea:focus { border-color: var(--brand); }
.style .form input, .style .form select { min-height: 50px; }
.style .form textarea { min-height: 200px; resize: vertical; }
.style .form select {
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%),
linear-gradient(135deg, var(--brand) 50%, transparent 50%);
background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 44px;
}
.style .counter { display: flex; justify-content: flex-end; gap: 6px; font-size: 16px; color: var(--muted); margin-top: 6px; }
.style .counter.is-limit strong { color: var(--danger); }
.style .counter strong { font-size: 17px; color: var(--text); }
.style .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.style .check {
display: flex; gap: 12px; align-items: flex-start;
padding: 14px 16px; background: var(--bg-alt);
border: 1px solid var(--line); border-radius: var(--radius);
font-size: 17px; cursor: pointer;
}
.style .check:hover { border-color: var(--brand); }
.style .check input[type="checkbox"] {
flex: none; width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--brand); cursor: pointer;
}
.style .check span { flex: 1; }
.style .form__submit { margin-top: 8px; }
.style .form__hint { margin-top: 12px; font-size: 17px; color: var(--muted); }
.style .form__hint.is-ready { color: var(--brand); font-weight: 700; }
.style fieldset { border: 0; margin: 0; padding: 0; }
.style legend { padding: 0; font-weight: 700; font-size: 18px; margin-bottom: 8px; }
/* お問い合わせフォーム（Contact Form 7）の幅。
CF7 が出力する .wpcf7 は、このサイトの .form の外にあるため
15章のフォーム幅（--prose）が効かず、そのままだと入力欄だけが
.wrap いっぱい（1200px）まで広がり、上の注意書き（.prose = 800px）と
横幅がずれる。ここでそろえている。
※ フォームを広げるのではなく注意書きに合わせているのは、
1200px の入力欄は横に長すぎて書きにくいため。 */
.style .wpcf7 { max-width: var(--prose); }
/* 送信完了パネル */
.style .done {
max-width: var(--prose);
border: 2px solid var(--brand); border-radius: var(--radius);
background: var(--bg-alt); padding: clamp(24px, 5vw, 48px); text-align: center;
}
.style .done__icon {
width: 64px; height: 64px; margin: 0 auto 20px;
display: grid; place-items: center; border-radius: 50%;
background: var(--brand); color: #fff;
}
.style .done__icon svg { width: 34px; height: 34px; }
.style .done__title { font-size: clamp(20px, 3vw, 28px); color: var(--brand); margin: 0 0 14px; }
.style .done__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
/* ---------- 16. サイト運営ページ ---------- */
.style .toc {
background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius);
padding: 20px 24px; max-width: var(--prose);
}
.style .toc h2 { font-size: 18px; margin: 0 0 10px; color: var(--brand); }
.style .toc ul { margin: 0; padding-left: 1.2em; }
.style .toc li { margin-bottom: 4px; }
.style .profile { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
@media (max-width: 620px){ .style .profile { grid-template-columns: 1fr; gap: 20px; } .style .profile__photo { max-width: 240px; } }
.style .def-list { margin: 0; }
.style .def-list div {
display: grid; grid-template-columns: 180px 1fr; gap: 16px;
padding: 14px 0; border-bottom: 1px solid var(--line);
}
.style .def-list dt { font-weight: 700; color: var(--brand); }
.style .def-list dd { margin: 0; }
@media (max-width: 620px){
.style .def-list div { grid-template-columns: 1fr; gap: 4px; }
}
.style .policy h3 { margin-top: 2em; font-size: clamp(18px, 2.2vw, 21px); color: var(--brand); }
.style .policy h3:first-child { margin-top: 0; }
/* 未確定コンテンツの目印 */
.style .tbd {
display: inline-block; margin-left: 6px; padding: 1px 8px;
font-size: 14px; font-weight: 700; color: #7a5000;
background: #FFF4DB; border: 1px solid #E8C87A; border-radius: 3px;
vertical-align: middle;
}
/* ---------- 17. フッター（仮） ---------- */
.style .site-footer { background: var(--dark); color: #D8E2EE; }
.style .site-footer a { color: #fff; }
.style .site-footer__main {
display: grid; gap: 32px; grid-template-columns: 1.2fr 1.1fr 1fr;
padding-block: clamp(40px, 6vw, 64px);
align-items: start;
}
@media (max-width: 860px){ .style .site-footer__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .style .site-footer__main { grid-template-columns: 1fr; gap: 24px; } }
.style .site-footer h2 { font-size: 17px; color: #fff; margin: 0 0 14px; }
.style .site-footer p { font-size: 17px; margin: 0 0 10px; color: #CBD9E8; }
.style .site-footer ul { list-style: none; margin: 0; padding: 0; }
/* サイトマップは8項目あり、1列だと他の列より200px以上高くなって余白が目立つ。
4行×2列にして、隣の「このサイトについて」（4項目）と高さを揃える。 */
.style .site-footer__sitemap {
display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto);
column-gap: 24px;
}
/* 561〜620px は2列レイアウトでサイトマップ列が狭くなるため1列に戻す */
@media (max-width: 620px){
.style .site-footer__sitemap { grid-auto-flow: row; grid-template-rows: none; }
}
/* 560px 以下はフッター自体が1列＝サイトマップが全幅を使えるので、また2列に戻す */
@media (max-width: 560px){
.style .site-footer__sitemap { grid-auto-flow: column; grid-template-rows: repeat(4, auto); column-gap: 16px; }
}
.style .site-footer li { border-bottom: 1px solid rgba(255,255,255,.14); }
.style .site-footer li a {
display: flex; align-items: center; min-height: 44px;
font-size: 17px; text-decoration: none;
}
.style .site-footer li a:hover { text-decoration: underline; }
.style .site-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.style .site-footer__brand .brand__mark { background: #fff; color: var(--dark); }
.style .site-footer__brand .brand__name { color: #fff; }
.style .site-footer__brand .brand__note { color: #BCCBDC; }
.style .site-footer__bottom {
border-top: 1px solid rgba(255,255,255,.18);
font-size: 16px; color: #BCCBDC;
}
.style .site-footer__bottom .wrap {
display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
padding-block: 18px;
}
.style .site-footer__bottom p { margin: 0; font-size: 16px; color: #BCCBDC; }
/* 仮であることを示す帯 */
.style .provisional {
background: #FFF4DB; border-bottom: 1px solid #E8C87A;
color: #6b4700; font-size: 15px;
}
.style .provisional .wrap { padding-block: 6px; }
.style .provisional p { margin: 0; }
/* =========================================================
18. 会員機能（ログイン / 無料会員登録 / マイページ）
※ 静的サイトではデモ動作。WordPress 化時に実認証へ差し替え。
========================================================= */
/* ---------- ヘッダーの会員エリア ---------- */
.style .auth-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.style .auth-bar__name { font-size: 16px; font-weight: 700; color: var(--brand); }
.style .auth-btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 36px; padding: 4px 14px;
font-family: inherit; font-size: 15px; font-weight: 700;
color: var(--brand); background: #fff;
border: 1px solid var(--brand); border-radius: 999px;
text-decoration: none; cursor: pointer; white-space: nowrap;
}
.style .auth-btn:hover { background: var(--bg-alt); color: var(--brand-hover); }
.style .auth-btn--primary { background: var(--brand); color: #fff; }
.style .auth-btn--primary:hover { background: var(--brand-hover); color: #fff; }
@media (max-width: 620px){
.style .site-header__util .wrap { flex-wrap: wrap; justify-content: flex-start; padding-block: 6px; }
.style .auth-btn { min-height: 44px; font-size: 16px; padding: 6px 16px; }
}
/* ---------- ログイン / 登録ダイアログ ---------- */
.style .authdlg {
width: min(92vw, 520px);
max-height: 88vh;
padding: 0; border: none; border-radius: 6px;
color: var(--text); background: #fff;
box-shadow: 0 24px 60px rgba(14, 32, 48, .32);
}
.style .authdlg::backdrop { background: rgba(14, 32, 48, .62); }
/*