で実装。JSなしで開閉でき、キーボード操作にも対応する。
1問目だけ開いた状態にして、開閉できることを示す。
■ Q. / A. のラベルは position:absolute で配置すること。
display:flex を使うと、本文中の が別のカラムとして扱われ、
文章が縦に分断される。
========================================================================== */
.faq-list {
display: grid;
gap: 10px;
}
.faq-item {
background: var(--white);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
/* --- 質問（クリックで開閉） --- */
.faq-item__q {
position: relative;
list-style: none;
cursor: pointer;
padding: 18px 54px 18px 52px;
font-size: clamp(.94rem, 1.5vw, 1rem);
font-weight: var(--fw-bold);
line-height: 1.65;
}
.faq-item__q::-webkit-details-marker {
display: none;
}
.faq-item__q::before {
content: "Q.";
position: absolute;
left: 24px;
top: 18px;
color: var(--pink-text);
font-weight: var(--fw-black);
}
/* 開閉の矢印 */
.faq-item__q::after {
content: "";
position: absolute;
right: 24px;
top: calc(50% - 6px);
width: 10px;
height: 10px;
border-right: 2px solid var(--mint);
border-bottom: 2px solid var(--mint);
transform: rotate(45deg);
transition: transform .25s ease;
}
.faq-item[open] .faq-item__q::after {
transform: rotate(-135deg);
}
/* --- 回答 --- */
.faq-item__body {
padding: 0 24px 22px 52px;
}
.faq-item__a {
font-size: var(--fs-body);
line-height: 1.95;
}
.faq-item__a strong {
color: var(--text);
font-weight: var(--fw-bold);
}
/* 答えが2段落以上になるときの行間。
▼ 症状ページの答えは1段落なので、この指定は効かない。
よくある質問ページ（49問）で、答えが複数の段落やリストに
分かれるものがあるために置いている。
段落ごとに余白のクラスを付けて回ると、付け忘れが必ず出る */
.faq-item__body > * + * {
margin-top: 14px;
}
@media (max-width: 560px) {
.faq-item__q {
padding: 16px 44px 16px 44px;
}
.faq-item__q::before {
left: 18px;
top: 16px;
}
.faq-item__q::after {
right: 18px;
}
.faq-item__body {
padding: 0 18px 20px 44px;
}
}
/* ==========================================================================
8-3. Photo Row（実写真・図＋説明の2カラム）
--------------------------------------------------------------------------
サイトの絵柄は水彩イラストで統一しているため、実写真は例外的な要素。
全幅で置くとページの主役になり、刺激も強く出るため、
隣に説明テキストを並べて幅を抑える。
■ 図中のラベルは、右側の本文でも同じ順に列挙すること。
写真を見なくても内容が伝わり、読み上げや通信環境の悪い場合にも対応できる。
■ 縦横比は CSS の aspect-ratio で確保する（CLS防止）。
HTML に width / height 属性は書かない。
画像を差し替えても HTML を触らずに済むようにするため。
既定は 16:9。正方形など別の比率が必要な場合は、
.photo-fig に修飾子を足して --ph-ratio を上書きする。
イラストの --il と同じ考え方で、HTML に数値は書かない。
…
========================================================================== */
.photo-row {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(20px, 2.6vw, 34px);
align-items: start;
}
.photo-fig {
margin: 0;
}
.photo-fig img {
display: block;
width: 100%;
height: auto;
aspect-ratio: var(--ph-ratio, 16 / 9);
object-fit: contain;
border-radius: var(--r-md);
}
/* 3:2 の図（川崎病の症状シェーマなど） */
.photo-fig--3x2 {
--ph-ratio: 3 / 2;
}
/* 正方形の図（腸重積症の仕組みなど） */
.photo-fig--square {
--ph-ratio: 1 / 1;
}
/* ==========================================================================
8-4. Gallery（院内紹介の写真）
--------------------------------------------------------------------------
■ すぐ上の .photo-fig とは別物。使い分けを間違えないこと。
.photo-fig … 症状ページの医学図。object-fit: contain（切り抜かない）
.gallery__img … 院内写真。object-fit: cover（3:2にそろえる）
図は情報なので切ってはいけないが、院内写真は縦横比をそろえたい。
目的が逆なので、クラスを分けている。
■ 比率を 3:2 にしている理由
支給された院内写真が5点とも 3:2 だったため。
3:2 のまま並べれば1ミリも切り抜かれず、撮影時の構図がそのまま出る。
▼ 差し替える写真も 3:2 で用意すること。
別の比率を混ぜると、その写真だけ左右（または上下）が切れる。
■ マウスオーバーでの拡大は使わない（サイト全体の方針）。
代わりに、最初から十分な大きさで並べる。
■ ライトボックス（クリックで全画面）も入れていない。JSを増やさない。
■■ 1グループの枚数は 2枚 か 3枚 にすること。■■
PCは自動で3列まで並ぶ。
3枚 → 3列にぴったり収まる
2枚 → 2列に広がる（写真が大きくなる。見せたい場所に使う）
4枚 → 3＋1 になり、最後の1枚だけ取り残されて見える
写真を足すときは、グループの枚数が2か3になるように分け直すこと。
========================================================================== */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
gap: clamp(20px, 2.6vw, 32px);
}
.gallery__item {
margin: 0;
}
.gallery__img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
background: var(--cream); /* 読み込み前の下地 */
}
.gallery__ttl {
margin-top: 14px;
font-size: clamp(1rem, 1.6vw, 1.125rem);
font-weight: var(--fw-bold);
color: var(--heading);
text-align: center; /* 写真のタイトルは中央揃え */
}
.gallery__txt {
margin-top: 6px;
font-size: var(--fs-note);
line-height: 1.9;
}
/* 説明を横に置かず、1カラムで図だけを見せるときの器。
幅を絞って中央に置く。全幅にすると図がページの主役になり、
下の本文まで視線が届かなくなるため */
.photo-solo {
max-width: 720px;
margin-inline: auto;
}
/* 正方形の図は、720px だと高さも 720px になって大きすぎる。
.photo-solo と併用して幅を絞る */
.photo-solo--narrow {
max-width: 520px;
}
.photo-row__body > * + * {
margin-top: 12px;
}
@media (max-width: 860px) {
.photo-row {
grid-template-columns: 1fr;
}
}
/* カード内で、上の内容と区切って置くときの仕切り。
.note-list と同じ引き方にそろえている */
.card__divider {
margin-top: clamp(26px, 3vw, 34px);
padding-top: clamp(26px, 3vw, 34px);
border-top: 1px solid var(--line);
}
/* ==========================================================================
9. Related Tiles（関連するページ）
--------------------------------------------------------------------------
28ページ分を手で書くため、1枚を1行で書けることを最優先にしている。
説明文はページタイトルと内容が重複するため置かない。
熱性けいれん
■ 矢印は ::before（丸）と ::after（矢印）を重ねて描く。
"›" の文字を使うと左右の余白が不均等で中心がずれるため、SVGマスクを使う。
========================================================================== */
/* ▼ 診療案内の「症状から探す」も、以前は .sym-card という別クラスで
一段大きく（116px・文字22px）見せていたが、これに統合した。
同じ形のものが違う大きさで並ぶと、大きいほうが重要に見える。
優先順位は「上にあること」で足りている */
.rel-grid {
display: grid;
/* 250px = 1枚あたり約268px、文字が入る幅は約176px（左右パディング92pxを引いた値）。
全角11字まで1行に収まる。200pxだと約7字で「RSウイルス感染症」が折り返す */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: clamp(12px, 1.4vw, 16px);
}
/* ▼ 公開リストの書き出しで、未公開ページのタイルを外した一覧にだけ付く（build.py が付ける）。
auto-fit のままだと、残ったタイルが1〜2枚のとき横幅いっぱいに伸び、
ほかのページのタイルより大きく（＝重要そうに）見えてしまう。
auto-fill にして、1枚の幅をふだんの一覧と同じに保つ（左から詰める） */
.rel-grid--few {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.rel-tile {
position: relative;
display: flex;
align-items: center; /* 文字を上下中央に */
min-height: 96px;
padding: 20px 68px 20px 24px; /* 右は矢印のぶんを空ける */
border: 1.5px solid var(--line);
border-radius: var(--r-lg);
background: var(--white);
color: var(--text);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
line-height: 1.55;
}
/* 丸 */
.rel-tile::before {
content: "";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%); /* 矢印も上下中央に */
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--pink);
}
/* 矢印（丸の上に重ねる） */
.rel-tile::after {
content: "";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background: var(--white);
-webkit-mask: var(--arrow-mark) center / 12px 12px no-repeat;
mask: var(--arrow-mark) center / 12px 12px no-repeat;
}
/* --------------------------------------------------------------------------
SP：一覧の高さを詰める（PCは触らない）
PCは横に並ぶので高さは問題にならないが、SPでは1列に積まれるため、
件数が多い一覧ほど余白だけが積み上がる。
■ .rel-tile（カード型の一覧すべて）
96px のカードに「発熱」の2文字しか入らず、余白ばかりが目立っていた。
SPでは 58px に詰める。
■ .rel-grid--list（病名から探す／14件）
カードで積むと 1300px を超える。カードをやめ、
1枚の白い箱を罫線で区切るリストにする。
■ 修飾子にしているのは、各ページ末尾の「関連するページ」（2〜4件）は
カードのままのほうが収まりがよいため。件数の多い一覧にだけ付ける。
■ 丸を消して矢印だけを残す。1行の高さでは32pxの丸が入らないうえ、
14個の丸が縦に並ぶと、目が矢印ではなく丸の列を追ってしまう。
-------------------------------------------------------------------------- */
@media (max-width: 700px) {
.rel-grid {
gap: 10px;
}
.rel-tile {
min-height: 58px;
padding: 12px 52px 12px 18px;
}
.rel-tile::before,
.rel-tile::after {
width: 26px;
height: 26px;
right: 16px;
}
.rel-tile::after {
-webkit-mask-size: 10px 10px;
mask-size: 10px 10px;
}
/* --- 病名から探す：罫線リスト --- */
.rel-grid--list {
gap: 0;
background: var(--white);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
padding: 0 18px;
}
.rel-grid--list .rel-tile {
min-height: 0;
padding: 16px 44px 16px 0;
border: 0;
border-radius: 0;
border-bottom: 1px solid var(--line);
background: none;
box-shadow: none;
}
.rel-grid--list .rel-tile:last-child {
border-bottom: 0;
}
/* 丸は出さず、矢印だけをピンクで置く */
.rel-grid--list .rel-tile::before {
display: none;
}
.rel-grid--list .rel-tile::after {
right: 4px;
width: 22px;
height: 22px;
background: var(--pink);
-webkit-mask-size: 11px 11px;
mask-size: 11px 11px;
}
}
/* ==========================================================================
9-2. Data List（2列の一覧）
--------------------------------------------------------------------------
「左に項目名、右に内容」を何行も並べるとき用。
予防接種スケジュール（月齢｜ワクチン）、料金表（ワクチン｜料金）など。
■ 1件だけ料金を示すときは .fee-row を使う。
こちらは複数行を一覧で見せるための器で、役割が違う。
■ 表組み（table）は使わない。SPで横スクロールが発生するため、
グリッドで組み、狭い画面でも2列を保てる幅にしている。
2か月
肺炎球菌、B型肝炎、ロタ、5種混合
========================================================================== */
.data-list {
background: var(--white);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
padding: 0 clamp(20px, 2.6vw, 32px);
}
/* 枠を出さない版。白い背景のセクションで、そのまま並べたいときに使う */
.data-list--plain {
background: none;
border-radius: 0;
box-shadow: none;
padding: 0;
}
.data-row {
display: grid;
grid-template-columns: clamp(84px, 22vw, 150px) 1fr;
gap: 4px 20px;
align-items: baseline;
padding: clamp(15px, 1.8vw, 19px) 0;
border-bottom: 1px solid var(--line);
}
.data-row:last-child {
border-bottom: 0;
}
.data-row__label {
font-size: clamp(1rem, 1.6vw, 1.1875rem);
font-weight: var(--fw-bold);
color: var(--mint-text);
line-height: 1.5;
}
.data-row__value {
font-size: var(--fs-body);
line-height: 1.7;
}
/* 料金表など、右端に値をそろえたいとき */
.data-list--right .data-row {
grid-template-columns: 1fr auto;
}
.data-list--right .data-row__label {
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--text);
}
.data-list--right .data-row__value {
font-weight: var(--fw-bold);
color: var(--pink-text);
white-space: nowrap;
}
/* SPでは2列に収まらない。
390px幅だと内容の列が約224pxしかなく、ほとんどの行が折り返していた。
縦積みにすると内容が約350px使えるようになり、多くの行が1行で収まる。
高さはほぼ変わらない（折り返していた分がなくなるため）。
■ 料金表（--right）は値が短く、右端にそろっている方が比べやすいので2列のまま */
@media (max-width: 600px) {
.data-row {
grid-template-columns: 1fr;
gap: 5px;
}
.data-list--right .data-row {
grid-template-columns: 1fr auto;
gap: 4px 16px;
}
}
/* --------------------------------------------------------------------------
ワクチン名のタグ。.data-row の中に並べて使う。
読点区切りの文字列にしないのは、本数を数えられるようにするため。
同じページに「同時接種は最大4〜5種類」と書いているので、
タグの数がそのまま同時接種の本数として読める。
自費のワクチンはピンク（--pink-light）で区別する。
-------------------------------------------------------------------------- */
.vac-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.vac-tag {
display: inline-block;
padding: 5px 13px;
border-radius: var(--r-pill);
background: var(--mint-light);
color: var(--mint-text);
font-size: var(--fs-note);
font-weight: var(--fw-medium);
line-height: 1.5;
}
.vac-tag--self {
background: var(--pink-light);
color: var(--pink-text);
}
/* ==========================================================================
9-3. Schedule Table（予防接種スケジュール表）
--------------------------------------------------------------------------
ワクチン（行）× 時期（列）のマトリクス。
月齢順のリスト（.data-list）だけでは「そのワクチンを何回打つか」が
分からないため、併用する。
■ サイト内で唯一、横スクロールするブロック。
11行 × 12列あり、縦積みにすると意味をなさないため例外として認めている。
スクロールできると気づかない人のために、上に案内文を必ず添えること。
■ ワクチン名の列は position: sticky で固定する。
固定しないと、スクロール後に何の行を見ているか分からなくなる。
========================================================================== */
.sched-hint {
font-size: var(--fs-note);
color: var(--text-sub);
margin-bottom: 10px;
}
.sched-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background: var(--white);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.sched {
border-collapse: separate;
border-spacing: 0;
min-width: 1020px;
}
.sched th,
.sched td {
padding: 0;
text-align: center;
vertical-align: middle;
}
.sched thead th {
background: var(--cream);
font-size: var(--fs-note);
font-weight: var(--fw-bold);
color: var(--mint-text);
line-height: 1.4;
padding: 13px 6px;
white-space: nowrap;
border-bottom: 1px solid var(--line);
}
.sched thead th:first-child,
.sched tbody th {
position: sticky;
left: 0;
z-index: 1;
text-align: left;
padding: 12px 16px;
min-width: 158px;
border-right: 1px solid var(--line);
}
.sched tbody th {
background: var(--white);
border-bottom: 1px solid var(--line);
}
.sched tbody td {
border-bottom: 1px solid var(--line);
min-width: 72px;
height: 58px;
}
.sched tbody tr:last-child th,
.sched tbody tr:last-child td {
border-bottom: 0;
}
.sched__name {
display: block;
font-size: var(--fs-body);
font-weight: var(--fw-bold);
line-height: 1.4;
}
.sched__kind {
display: inline-block;
margin-top: 5px;
padding: 2px 9px;
border-radius: var(--r-pill);
background: var(--mint-light);
color: var(--mint-text);
font-size: .75rem;
font-weight: var(--fw-medium);
}
.sched__kind--self {
background: var(--pink-light);
color: var(--pink-text);
}
/* 接種回数。1マスに2回入る場合（日本脳炎の3歳）は横に並べる */
.dose-cell {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.dose {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--mint);
color: var(--white);
font-size: .875rem;
font-weight: var(--fw-bold);
}
/* 回数が年齢によって変わる場合（HPV）は、丸ではなく横長で示す */
.dose--range {
width: auto;
padding: 0 12px;
border-radius: var(--r-pill);
font-size: .8125rem;
white-space: nowrap;
}
.dose--self {
background: var(--pink);
}
.sched td.is-on {
background: var(--mint-light);
}
.sched td.is-on-self {
background: var(--pink-light);
}
/* ==========================================================================
10. Reserve Box（受診導線）
--------------------------------------------------------------------------
ページ末尾のCTA。左にイラスト、右に見出し・本文・ボタン。
配色はブランドのピンク。セマンティック色（safe / caution / urgent /
emergency / info）は受診の緊急度に予約されているため、CTAには使わない。
ヘッダーとSP下部の予約ボタンと同じピンクにすることで、
「ピンクのボタン＝予約」という対応が全ページで一貫する。
========================================================================== */
.reserve-box {
display: grid;
grid-template-columns: clamp(120px, 15vw, 180px) 1fr;
gap: clamp(22px, 3vw, 40px);
align-items: center;
border-radius: var(--r-xl);
padding: clamp(28px, 3.6vw, 44px);
/* 淡いドット柄。面がのっぺりしないよう質感を足す */
background-color: var(--pink-light);
background-image: radial-gradient(circle, var(--dot-color) 1.6px, transparent 1.6px);
background-size: var(--dot-size) var(--dot-size);
}
.reserve-box__fig {
width: 100%;
aspect-ratio: 1 / 1;
background: var(--il) center / contain no-repeat;
}
.reserve-box__body {
min-width: 0;
}
.reserve-box__ttl {
font-size: clamp(1.1rem, 2.1vw, 1.4rem);
font-weight: var(--fw-bold);
line-height: 1.5;
margin-bottom: 12px;
}
.reserve-box__txt {
font-size: var(--fs-body);
line-height: 1.95;
}
@media (max-width: 700px) {
.reserve-box {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
}
.reserve-box__fig {
width: 120px;
}
/* SP本文の左揃え（サイト共通ルール） */
.reserve-box__txt {
text-align: left;
justify-self: stretch;
}
}
/* ==========================================================================
10-2. Sign List（受診サインを分類して並べる）
--------------------------------------------------------------------------
項目数が多いリストを、名前の付いた分類にまとめる。
12項目をそのまま並べるより、4つの分類のほうが深夜でも保持できる。
分類名には医学用語をカッコで添える。受診時に「陥没呼吸がありました」と
伝えられるようにするため。
呼吸の音（喘鳴）
- …
■ 罫線は使わない。分類の区切りは淡い面（--urgent-light）と隙間で示す。
枠線を持つのは 119番ブロックのみ、というルールを守る。
■ 現在はクループ症候群ページの「夜間・休日」のみで使用。
提供資料が表形式だったページに合わせたもの
========================================================================== */
.sign-list {
display: grid;
gap: 10px;
}
.sign-row {
display: grid;
grid-template-columns: clamp(128px, 15vw, 190px) 1fr;
align-items: start;
background: var(--white);
border-radius: var(--r-md);
overflow: hidden;
}
.sign-row__label {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* 横も中央に */
text-align: center;
padding: 18px clamp(16px, 1.8vw, 22px);
background: var(--urgent-light);
color: var(--urgent-text);
font-size: var(--fs-note);
font-weight: var(--fw-bold);
line-height: 1.6;
}
/* 医学用語。分類名より一段落として添える */
.sign-row__label span {
font-size: 0.8125rem;
font-weight: var(--fw-medium);
}
.sign-row__body {
display: grid;
gap: 8px;
align-content: start;
padding: 18px clamp(18px, 2vw, 26px);
}
.sign-row__body li {
position: relative;
padding-left: 20px;
font-size: var(--fs-body);
line-height: 1.8;
}
.sign-row__body li::before {
content: "";
position: absolute;
left: 0;
top: .72em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--urgent);
}
@media (max-width: 640px) {
.sign-row {
grid-template-columns: 1fr;
}
.sign-row__label {
flex-direction: row;
align-items: baseline;
justify-content: center;
gap: 4px;
padding: 12px 18px;
}
.sign-row__body {
padding: 16px 18px;
}
}
/* ==========================================================================
11. Triage Row（受診の目安・縦積みカード）
--------------------------------------------------------------------------
3カラム横並びだと情報量が収まらないため、横長カードを縦に積む形式。
左に段階ラベル、右に該当する状態を並べる。
緊急度クラス： .is-safe / .is-caution / .is-urgent
========================================================================== */
.triage-list {
display: grid;
gap: clamp(30px, 3.6vw, 44px); /* はみ出したイラストのぶん広げる */
padding-top: clamp(20px, 2.4vw, 30px);
}
.triage-row {
background: var(--white);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
/* 上の帯。イラストと見出しを横並びにして中央に置く。
イラストを帯の上に出すため overflow は切らず、角丸を帯と本文に持たせる */
.triage-row__head {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 1.4vw, 16px);
padding: clamp(8px, 1vw, 11px) clamp(20px, 2.6vw, 30px);
background: var(--safe-light);
border-radius: var(--r-lg) var(--r-lg) 0 0;
text-align: center;
}
/* 帯の上端から出すイラスト */
.triage-row__ico {
width: clamp(58px, 6.6vw, 82px);
aspect-ratio: 1 / 1;
flex: none;
background: var(--il) center / contain no-repeat;
margin-top: clamp(-32px, -3.4vw, -20px);
filter: drop-shadow(0 5px 10px rgba(85, 64, 58, .18));
}
.triage-row__ttl {
font-size: clamp(1rem, 1.9vw, 1.25rem);
font-weight: var(--fw-bold);
line-height: 1.5;
color: var(--safe-text);
}
.triage-row__body {
padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.6vw, 30px) clamp(24px, 2.8vw, 32px);
border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.triage-row__note {
margin-top: 18px;
padding-top: 15px;
border-top: 1px dashed var(--line);
font-size: var(--fs-note);
line-height: 1.9;
color: var(--text);
}
/* --- caution --- */
.triage-row.is-caution .triage-row__head {
background: var(--caution-light);
}
.triage-row.is-caution .triage-row__ttl {
color: var(--caution-text);
}
/* --- urgent --- */
.triage-row.is-urgent .triage-row__head {
background: var(--urgent-light);
}
.triage-row.is-urgent .triage-row__ttl {
color: var(--urgent-text);
}
/* ==========================================================================
12. Branch（条件で読み分けるカード／月齢・年齢の分岐など）
--------------------------------------------------------------------------
「比較」ではなく「分岐」のためのブロック。読者は自分に該当する側だけ読む。
左に条件ラベル、右に内容。縦に積むので高さの差は発生しない。
イラストはカード上端から出す。カード間の余白を広めに取ること。
緊急度クラス： .is-safe / .is-caution / .is-urgent / .is-emergency / .is-info
========================================================================== */
.branch-list {
display: grid;
gap: clamp(34px, 4.4vw, 52px);
padding-top: clamp(30px, 4vw, 46px); /* はみ出したイラストのぶん */
}
.branch {
display: grid;
grid-template-columns: clamp(178px, 22vw, 238px) 1fr;
background: var(--white);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.branch__head {
padding: 24px 18px 26px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
text-align: center;
background: var(--info-light);
border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.branch__fig {
width: clamp(92px, 11.5vw, 130px);
aspect-ratio: 1 / 1;
background: var(--il) center / contain no-repeat;
margin-top: clamp(-42px, -4.6vw, -30px);
margin-bottom: 8px;
filter: drop-shadow(0 6px 12px rgba(85, 64, 58, .14));
}
.branch__age {
font-size: clamp(0.84375rem, 1.5vw, 0.96875rem);
font-weight: var(--fw-bold);
line-height: 1.55;
color: var(--info-text);
}
/* --------------------------------------------------------------------------
費用の条件（公費クーポン／自費）。分岐カードのラベル欄に、月齢の下へ添える。
本文ではなくラベル側に置くのは、読者が「自分はどれか」を判断する材料が
月齢と費用の2つだからで、判断に使う情報を1か所にまとめている。
配色は .vac-tag / .sched__kind と同じルールにそろえる。
ミント … 公費（定期接種・クーポン利用可）
ピンク … 自費（.branch__cost--self）
サイト全体で「ピンク＝自己負担」が一貫して読めるようにするため。
生後1か月ごろ
クーポン利用可
-------------------------------------------------------------------------- */
.branch__cost {
display: inline-block;
margin-top: 8px;
padding: 3px 12px;
border-radius: var(--r-pill);
background: var(--mint-light);
color: var(--mint-text);
font-size: .8125rem;
font-weight: var(--fw-medium);
line-height: 1.6;
}
.branch__cost--self {
background: var(--pink-light);
color: var(--pink-text);
}
/* --------------------------------------------------------------------------
分岐カードが3枚以上のときの上下中央そろえ。
.branch__head は既定で justify-content: flex-end（下そろえ）。
2枚組（発熱ページ）では本文量が近いのでイラストの高さがそろうが、
3枚に増えて本文量の差が開くと、カードごとに上の余白がばらつく。
既定（下そろえ） 上 38 / 80 / 26px、下 26px 固定
上そろえ 上 -18px 固定、下 83 / 124 / 71px ← 下が大きく余る
この修飾子（中央） 上 31 / 52 / 25px、下 33 / 54 / 27px
■ .branch__fig の負マージンも打ち消している。
あの負マージンは「上そろえのときにイラストをカード上端から出す」ための値で、
既定の下そろえでは効いていない。中央そろえで残すと上に寄りすぎる。
■ 既存の2枚組には影響しない。付けたときだけ効く。
-------------------------------------------------------------------------- */
.branch-list--center .branch__head {
justify-content: center;
}
.branch-list--center .branch__fig {
margin-top: 0;
}
.branch__body {
padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 30px) clamp(26px, 3vw, 32px);
}
.branch__ttl {
font-size: clamp(1rem, 1.9vw, 1.3125rem);
font-weight: var(--fw-bold);
line-height: 1.55;
margin-bottom: 14px;
}
.branch__txt {
font-size: var(--fs-body);
line-height: 1.95;
}
.branch__txt + .branch__txt {
margin-top: 12px;
}
.branch__txt strong {
color: var(--info-text);
font-weight: var(--fw-bold);
}
/* --- 緊急度バリエーション --- */
.branch.is-safe .branch__head { background: var(--safe-light); }
.branch.is-safe .branch__age,
.branch.is-safe .branch__txt strong { color: var(--safe-text); }
.branch.is-caution .branch__head { background: var(--caution-light); }
.branch.is-caution .branch__age,
.branch.is-caution .branch__txt strong { color: var(--caution-text); }
.branch.is-urgent .branch__head { background: var(--urgent-light); }
.branch.is-urgent .branch__age,
.branch.is-urgent .branch__txt strong { color: var(--urgent-text); }
.branch.is-emergency .branch__head { background: var(--emergency-light); }
.branch.is-emergency .branch__age,
.branch.is-emergency .branch__txt strong { color: var(--emergency-text); }
@media (max-width: 640px) {
.branch {
grid-template-columns: 1fr;
}
.branch__head {
border-radius: var(--r-lg) var(--r-lg) 0 0;
padding-bottom: 20px;
}
.branch__fig {
margin-top: -34px;
}
}
/* ==========================================================================
13. セクションの土台
========================================================================== */
.sec {
overflow: hidden;
}
.sec > .wrap,
.sec > .wrap-narrow {
position: relative;
z-index: 2;
}
.sec > .wrap,
.sec > .wrap-narrow {
position: relative;
z-index: 2;
}
/* ==========================================================================
9. 医師紹介（/doctor/）
--------------------------------------------------------------------------
写真と文章を左右に並べたカード。SPでは1列になり、写真が上に来る。
========================================================================== */
.doc-card {
display: grid;
grid-template-columns: 300px 1fr;
gap: clamp(20px, 3vw, 40px);
align-items: center;
}
/* 写真を右に置く版。列の幅も入れ替える
（これを忘れると、写真が広いほうの列に入って大きくなりすぎる） */
.doc-card--rev {
grid-template-columns: 1fr 300px;
}
.doc-card--rev .doc-card__fig {
order: 2;
}
.doc-card__fig img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.doc-card__role {
display: inline-block;
padding: 4px 14px;
border-radius: var(--r-pill);
background: var(--pink-light);
color: var(--pink-text);
font-size: var(--fs-note);
font-weight: var(--fw-bold);
}
.doc-card__name {
margin-top: 10px;
font-size: clamp(1.375rem, 2.4vw, 1.75rem);
font-weight: var(--fw-black);
color: var(--heading);
line-height: 1.4;
}
.doc-card__name span {
display: block;
margin-top: 4px;
font-size: var(--fs-note);
font-weight: var(--fw-bold);
letter-spacing: .08em;
color: var(--text-sub);
}
@media (max-width: 700px) {
.doc-card {
grid-template-columns: 1fr;
gap: 18px;
justify-items: center;
text-align: center;
}
.doc-card--rev .doc-card__fig {
order: 0;
}
.doc-card__fig {
max-width: 240px;
}
.doc-card__body {
text-align: left;
}
}
…
2か月
肺炎球菌、B型肝炎、ロタ、5種混合
呼吸の音（喘鳴）
- …