/* =============================================================
POOLO Design System — components.css
再利用コンポーネント（トークン参照・単一ソース）
・色・書体・幅・角丸はすべて tokens.css の var(--…) を参照。
・読み込み順は tokens.css → components.css（tokens が先）。
・脱AI原則：グラデ／blur影／角丸乱発なし。フラットなベタ面＋ヘアライン。
・レスポンシブは各コンポーネント末尾の @media にまとめて同居させる。
・ページ固有の一回きり装飾やスクロールJSは含めない（JSは README 参照）。
============================================================= */
/* ============ ベース（reset / body / shell / 汎用） ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
background: var(--bg);
padding-top: calc(var(--header-h) + 1px); /* 固定ヘッダー分のオフセット */
color: var(--ink-soft);
font-family: var(--body);
font-size: 15px;
font-weight: 400;
line-height: 2.05;
letter-spacing: 0.05em;
line-break: strict;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.nb { white-space: nowrap; } /* 泣き別れ（行末禁則）対策の折り返し禁止 */
/* ---- 日本語の改行則 ----------------------------------------------------
word-break:auto-phrase … 文節単位で改行する（「消費ではな／く」のような
語の途中での泣き別れを防ぐ）。 が必須。
非対応ブラウザでは従来どおりの改行に戻るだけなので安全。
text-wrap:pretty … 最終行が1〜2文字だけ残る「取り残し」を減らす。
ピンポイントで改行位置を固定したいときは、従来どおり .nb を併用する。 */
.hero-title, .hero-lead, .hero-foot-ja,
.sec-title, .sec-lead, .intro-body p,
.flow-title, .flow-desc, .q-text, .q-helper,
.notice-text, .summary-value,
.voice-quote, .about-title, .about-text p,
.faq-q, .faq-a p,
.date-what, .date-note, .fit-items li, .fit-head,
.apply-step-title, .apply-step-desc, .terms-v,
.cta-title, .cta-lead, .cta-note, .fa-main, .fa-sub,
.ps-title, .ps-desc, .ps-meta,
.person-name, .person-bio, .person-role,
.point-title, .point-desc, .ba-items li, .ba-label,
.fee-note, .fee-add-desc, .fee-foot,
.step-band-head .ja, .step-title, .step-desc,
.gallery-head-text, .gallery-note {
word-break: auto-phrase;
text-wrap: pretty;
}
/* ※ text-wrap:balance は和文見出しだと1行目が極端に短くなりやすく、
意味の切れ目より行長を優先してしまうため使わない。
意図した位置で改行したいときは
と .nb で明示する。 */
/* 版面（シェル）：全セクション共通の中央寄せ＋左右パディング */
.shell {
max-width: var(--shell-max);
margin-inline: auto;
padding-inline: var(--shell-pad);
}
/* ============ 固定ヘッダー（.brand-row） ============ */
.brand-row {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-header);
background: var(--bg); /* 不透明・フラット */
border-bottom: 1px solid var(--line); /* 影の代わりの1本ヘアライン */
}
.brand-row .shell {
display: flex;
justify-content: space-between;
align-items: center;
height: var(--header-h);
padding-top: 0;
padding-bottom: 0;
}
/* ロゴは画像の高さだけだとタップ領域が30px弱になる。
ヘッダー高（64px / 狭幅54px）の中で最低44pxの当たり判定を確保する。 */
.brand-logo {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.brand-logo img { height: 30px; width: auto; }
.header-nav {
display: flex;
align-items: center;
gap: clamp(18px, 3vw, 32px);
}
.header-link {
font-family: var(--head);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--ink-66);
border-bottom: 1px solid var(--line); /* ヘアラインの下線 */
padding-bottom: 2px;
white-space: nowrap;
transition: color var(--trans-fast), border-color var(--trans-fast);
}
/* 外部リンクの矢印（↗）。U+2197 は iOS / Android では既定が絵文字表示になり、
カラー絵文字として出てしまう。マークアップ側では異体字セレクタ U+FE0E を付け（↗︎）、
CSS 側でもテキスト表示を指定して、両方で押さえる。 */
.arrow {
font-family: var(--en);
font-variant-emoji: text;
margin-left: 0.4em;
}
.header-link .arrow {
font-family: var(--en);
font-size: 0.85em;
margin-left: 0.4em;
color: var(--brand);
}
.header-link:hover { color: var(--brand-deep); border-bottom-color: var(--brand); }
.header-cta {
/* タップ領域を44px確保する（inline-block＋paddingだけだと42pxで届かない） */
display: inline-flex;
align-items: center;
min-height: 44px;
background: var(--brand);
color: var(--on-brand);
font-family: var(--head);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.22em;
text-indent: 0.22em;
padding: 11px 28px;
border-radius: var(--radius);
white-space: nowrap;
transition: background var(--trans-fast);
}
.header-cta:hover { background: var(--brand-deep); }
@media (max-width: 640px) {
.brand-logo img { height: 22px; }
.header-nav { gap: 14px; }
.header-link { display: none; } /* モバイルは申込ボタンを優先 */
.header-cta { font-size: 11.5px; padding: 9px 20px; letter-spacing: 0.16em; text-indent: 0.16em; min-height: 44px; }
}
/* ============ 家紋モノグラム（.mon） ============ */
.mon { display: block; color: var(--brand); flex: 0 0 auto; }
.mon svg { width: 100%; height: 100%; display: block; }
/* ============ HERO（写真ドリブン） ============ */
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 46%) minmax(0, 54%);
}
.hero-copy {
padding-top: clamp(44px, 7vh, 84px);
padding-bottom: clamp(44px, 7vh, 84px);
padding-right: clamp(26px, 4vw, 64px);
padding-left: max(var(--shell-pad), calc((100vw - var(--shell-max)) / 2 + 72px));
display: flex;
flex-direction: column;
justify-content: center;
}
.hero-eyebrow {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: clamp(26px, 4.4vh, 46px);
}
.hero-eyebrow-rule { width: 44px; height: 1px; background: var(--brand); flex: 0 0 auto; }
.hero-eyebrow-ja {
font-family: var(--mincho);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.26em;
color: var(--ink);
}
.hero-eyebrow-en {
font-family: var(--en);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--brand);
margin-left: auto;
}
.hero-title {
font-family: var(--mincho); /* 大見出しの"顔"は明朝 */
font-feature-settings: 'palt';
color: var(--ink);
}
.hero-title .t-sm {
display: block;
font-size: clamp(16px, 1.9vw, 24px);
font-weight: 700;
letter-spacing: 0.24em;
line-height: 1.5;
margin-bottom: clamp(12px, 2vh, 22px);
}
.hero-title .t-lg {
display: block;
font-size: clamp(38px, 4.8vw, 66px);
font-weight: 900;
letter-spacing: 0.04em;
line-height: 1.34;
}
.hero-title .t-lg .em { color: var(--brand); }
.hero-lead {
margin-top: clamp(24px, 4vh, 40px);
font-size: 13px;
line-height: 2.15;
letter-spacing: 0.07em;
color: var(--ink-72);
max-width: 27em;
}
/* 家紋＋添え書きで結ぶ水平フッター */
.hero-foot {
margin-top: clamp(30px, 5vh, 54px);
display: flex;
align-items: center;
gap: 20px;
border-top: 1px solid var(--line);
padding-top: 24px;
}
.hero-foot .mon { width: 58px; height: 58px; }
.hero-foot-texts { display: flex; flex-direction: column; }
.hero-foot-ja {
font-family: var(--mincho);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.3em;
color: var(--ink-66);
}
.hero-foot-en {
font-family: var(--en);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.38em;
text-transform: uppercase;
color: var(--brand);
margin-top: 2px;
}
.hero-photo {
position: relative;
border-left: var(--bw-frame) solid var(--brand); /* ブランドブルーの罫で額装 */
}
.hero-photo img {
width: 100%;
height: 100%;
min-height: min(64vh, 620px);
object-fit: cover;
}
.hero-chip {
position: absolute;
left: 0;
bottom: clamp(24px, 5vh, 44px);
background: var(--brand); /* フラットなベタ帯 */
color: var(--on-brand);
display: flex;
align-items: baseline;
gap: 1.2em;
padding: 10px 22px 10px 26px;
}
.hero-chip .en {
font-family: var(--en);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
}
.hero-chip .ja {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
}
/* 長い和文タイトル用のヒーロー（.hero に付ける・オプトイン）
既定のコピー欄は 46%、右パディング最大64px、t-lg 最大66px。和文6文字を1行に
置くと版面から溢れ、裁ち落とし写真に重なる。この変種はコピー欄を 51% に広げ、
写真との間の余白を確保したうえで、t-lg を一段落として収める。
※既定のヒーローはコピー欄が 46% のため、ビューポートが広がるほど内容幅が
やせる（padding-left が (100vw - shell-max)/2 に追従するため）。51% にすると
内容幅がビューポートとともに広がるので、大画面でも溢れない。 */
/* ▼2カラムのときだけ効かせる。min-width で囲まないと、下の
@media (max-width: 860px) の 1カラム化を後勝ちで打ち消してしまう。 */
@media (min-width: 861px) {
.hero--long-title .hero-grid { grid-template-columns: minmax(0, 51%) minmax(0, 49%); }
.hero--long-title .hero-copy { padding-right: clamp(36px, 4.8vw, 80px); }
.hero--long-title .hero-title .t-lg { font-size: clamp(34px, 4.4vw, 58px); }
}
/* 広い画面ほどコピー欄が痩せる問題の補正（2026-09-02）。
.hero-copy の左パディングは版面のセンタリング由来で 0.5×vw で増えるのに、
カラム幅は 0.46×vw でしか増えないため、1600px を超えると
「画面を広げるほど本文が狭くなる」状態になっていた。
1500px 以上でカラム比を広げ、パディングより速く伸びるようにする。 */
@media (min-width: 1500px) {
.hero-grid { grid-template-columns: minmax(0, 54%) minmax(0, 46%); }
}
@media (max-width: 860px) {
.hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero-copy {
padding-left: var(--shell-pad);
padding-right: var(--shell-pad);
padding-bottom: 40px;
}
.hero-photo { border-left: none; border-top: 6px solid var(--brand); }
.hero-photo img { min-height: 0; height: clamp(280px, 82vw, 420px); }
.hero-chip { bottom: 0; padding: 8px 18px 8px 22px; }
.hero-chip .ja { display: none; }
.hero-lead { font-size: 12.5px; max-width: none; }
.hero-foot .mon { width: 46px; height: 46px; }
}
@media (max-width: 640px) {
.hero-eyebrow { gap: 14px; margin-bottom: 26px; }
.hero-eyebrow-rule { width: 30px; }
.hero-eyebrow-ja { font-size: 11.5px; letter-spacing: 0.22em; }
.hero-eyebrow-en { display: none; }
}
/* ============ ブルーの日付帯（全幅・.hero-band） ============ */
.hero-band {
background: var(--brand);
color: var(--on-brand);
}
.hero-band-inner {
display: flex;
align-items: baseline;
flex-wrap: wrap;
column-gap: clamp(20px, 3.4vw, 48px);
row-gap: 10px;
padding-top: clamp(26px, 4.2vh, 44px);
padding-bottom: clamp(28px, 4.6vh, 48px);
}
.hero-band-num {
font-family: var(--en);
font-weight: 600;
font-size: clamp(44px, 6.6vw, 76px);
letter-spacing: 0.02em;
line-height: 1;
}
.hero-band-num .dow {
font-family: var(--head);
font-size: 0.3em;
font-weight: 700;
letter-spacing: 0.1em;
margin-left: 0.34em;
}
.hero-band-time {
font-family: var(--en);
font-weight: 500;
font-size: clamp(17px, 2.2vw, 24px);
letter-spacing: 0.08em;
}
.hero-band-meta {
margin-left: auto;
display: flex;
align-items: baseline;
gap: 1.8em;
font-family: var(--body);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.22em;
}
.hero-band-meta .en {
font-family: var(--en);
font-size: 11px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--on-brand-92);
}
@media (max-width: 640px) {
.hero-band-inner {
flex-direction: column;
align-items: flex-start;
row-gap: 8px;
padding-top: 24px;
padding-bottom: 26px;
}
.hero-band-meta { margin-left: 0; flex-wrap: wrap; row-gap: 2px; column-gap: 1.4em; }
}
/* ============ プログラム要約帯（.step-band） ============ */
/* 日付帯の直下に置く、3ステップの横並び要約。ファーストビューのうちに
「単発イベントではない」ことを見せる。詳細は .program-steps で展開する。 */
.step-band { border-bottom: 1px solid var(--line); background: var(--bg); }
.step-band-inner {
display: grid;
grid-template-columns: minmax(0, 0.68fr) repeat(3, minmax(0, 1fr));
padding-top: clamp(24px, 3.8vh, 38px);
padding-bottom: clamp(26px, 4.2vh, 42px);
}
.step-band-head { padding-right: clamp(14px, 2vw, 26px); }
.step-band-head .en {
display: block;
font-family: var(--en);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--brand);
}
.step-band-head .ja {
display: block;
font-family: var(--mincho);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1.7;
color: var(--ink);
margin-top: 6px;
}
.step-cell {
border-left: 1px solid var(--line);
padding-left: clamp(16px, 2.4vw, 30px);
padding-right: clamp(12px, 1.8vw, 24px);
}
.step-no {
font-family: var(--en);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.3em;
color: var(--brand);
}
.step-no .ja {
font-family: var(--body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--ink-50);
margin-left: 0.9em;
}
.step-title {
font-family: var(--head);
font-size: 14.5px;
font-weight: 700;
font-feature-settings: "palt";
letter-spacing: 0.05em;
line-height: 1.6;
color: var(--ink);
margin-top: 7px;
}
.step-desc {
font-family: var(--body);
font-size: 11px;
letter-spacing: 0.06em;
line-height: 1.9;
color: var(--ink-55);
margin-top: 4px;
}
@media (max-width: 860px) {
.step-band-inner { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.step-band-head { padding-right: 0; padding-bottom: 14px; }
.step-cell { border-left: none; border-top: 1px solid var(--line); padding: 13px 0 14px; }
}
/* ============ イベント要点（.summary） ============ */
.summary {
border-bottom: 1px solid var(--line);
background: var(--bg-off);
}
.summary-grid {
display: grid;
/* minmax(0,…)：長い値が入っても列がはみ出さないようにする */
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.summary-cell {
padding: 26px clamp(18px, 2.6vw, 34px) 28px;
border-left: 1px solid var(--line);
}
.summary-cell:first-child { border-left: none; padding-left: 0; }
.summary-label {
display: flex;
align-items: baseline;
gap: 0.9em;
margin-bottom: 10px;
}
.summary-label .en {
font-family: var(--en);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--brand);
}
.summary-label .ja {
font-family: var(--body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--ink-55);
}
.summary-value {
font-family: var(--head);
font-weight: 700;
font-feature-settings: "palt";
font-size: 16.5px;
letter-spacing: 0.06em;
line-height: 1.7;
color: var(--ink);
}
.summary-value small {
display: block;
font-family: var(--body);
font-weight: 400;
font-size: 11px;
letter-spacing: 0.08em;
color: var(--ink-55);
margin-top: 2px;
}
@media (max-width: 860px) {
.summary-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.summary-cell { padding: 20px 22px 22px; }
.summary-cell:nth-child(odd) { border-left: none; padding-left: 0; }
.summary-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
.summary-value { font-size: 15px; }
}
/* ============ お知らせバンド（.notice-bar） ============ */
.notice-bar {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg-off);
}
.notice-bar a {
display: flex;
align-items: center;
gap: clamp(14px, 2.4vw, 26px);
padding: 17px 0;
flex-wrap: wrap;
}
.notice-tag {
font-family: var(--head);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--on-brand);
background: var(--brand);
padding: 5px 12px;
border-radius: var(--radius);
flex: 0 0 auto;
}
.notice-text {
font-family: var(--body);
font-size: 14px;
font-weight: 500;
color: var(--ink);
letter-spacing: 0.04em;
flex: 1 1 auto;
min-width: 0;
}
.notice-link {
font-family: var(--head);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--brand-deep);
white-space: nowrap;
border-bottom: 1px solid var(--brand);
padding-bottom: 2px;
flex: 0 0 auto;
transition: color var(--trans-fast);
}
.notice-link .arrow { font-family: var(--en); margin-left: 0.4em; }
.notice-bar a:hover .notice-link { color: var(--brand); }
@media (max-width: 560px) {
.notice-bar a { gap: 12px; padding: 15px 0; }
.notice-text { font-size: 13px; width: 100%; order: 3; }
.notice-link { font-size: 12.5px; }
}
/* ============ セクション枠＋非対称スパイン（.sec） ============ */
.sec {
border-bottom: 1px solid var(--line);
}
.sec-inner {
display: grid;
grid-template-columns: clamp(140px, 19vw, 220px) minmax(0, 1fr);
column-gap: clamp(28px, 5vw, 76px);
padding-top: clamp(72px, 11vh, 128px);
padding-bottom: clamp(72px, 11vh, 128px);
}
.sec-spine {
border-right: 1px solid var(--line);
padding-right: clamp(18px, 2.4vw, 34px);
}
.sec-num {
font-family: var(--en); /* 数字は Jost */
font-weight: 400;
font-size: clamp(38px, 4.6vw, 56px);
letter-spacing: 0.06em;
line-height: 1;
color: var(--brand);
}
.sec-num.ja { font-family: var(--mincho); font-weight: 900; letter-spacing: 0; } /* 和文ラベル様式（問／声 等） */
.sec-num.ja.small {
font-size: clamp(19px, 2.3vw, 25px);
line-height: 1.6;
letter-spacing: 0.12em;
}
.sec-num::after {
content: '';
display: block;
width: 30px;
height: 1px;
background: var(--brand);
margin-top: 18px;
}
/* 【使用しない・2026-09-02】セクション見出しの英字ラベル（Concept / Program 等）。
和文の見出しの隣に、同じ意味の英字を飾りで置くと「AIが作った感じ」が出る。
新しいページでは .sec-spine に .sec-num（連番 or 和文ラベル）だけを置くこと。
定義は過去ページの表示を壊さないために残してあるだけ。 */
.sec-en {
display: block;
margin-top: 16px;
font-family: var(--en);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.38em;
text-transform: uppercase;
color: var(--ink-55);
}
.sec-title {
font-family: var(--mincho); /* セクション見出しも明朝の顔 */
font-weight: 700;
font-feature-settings: "palt";
font-size: clamp(25px, 4vw, 42px);
letter-spacing: 0.08em;
line-height: 1.65;
color: var(--ink);
margin-bottom: clamp(30px, 5vh, 52px);
}
.sec-lead {
font-size: 13.5px;
line-height: 2.15;
letter-spacing: 0.07em;
color: var(--ink-66);
max-width: 36em;
margin-bottom: clamp(32px, 5vh, 56px);
}
@media (max-width: 860px) {
.sec-inner {
grid-template-columns: minmax(0, 1fr);
row-gap: 34px;
padding-top: 64px;
padding-bottom: 64px;
}
.sec-spine {
border-right: none;
border-bottom: 1px solid var(--line);
padding-right: 0;
padding-bottom: 22px;
display: flex;
align-items: baseline;
gap: 20px;
}
.sec-num { font-size: 34px; }
.sec-num::after { display: none; }
.sec-en { margin-top: 0; }
.sec-title { margin-bottom: 26px; }
.sec-lead { margin-bottom: 30px; }
}
/* ============ 導入（.intro-body / .quoted） ============ */
/* 2026-09-01：.intro-break（「ただ、しかし。」のような転換の一言を明朝・大きめ・
左に青い罫で独立させる装置）は廃止した。導入本文の途中で一文だけを強調すると、
読み手には転換ではなく小見出しとして届く。転換は組版ではなく文章で示す。 */
.intro-body {
max-width: 37em;
}
.intro-body p { margin-bottom: 2.1em; }
.intro-body p:last-child { margin-bottom: 0; }
.intro-body strong {
font-weight: 700;
color: var(--ink);
}
.quoted {
font-family: var(--head);
font-weight: 700;
color: var(--brand-deep);
letter-spacing: 0.04em;
}
/* ============ 番号ラベルを和文で出す（.ja / .is-ja） ============ */
/* 英字の飾りラベルを使わない方針（2026-09-02）に伴い、Jost 前提だった
番号ラベルを和文でも組めるようにした変種。書体だけ Zen Kaku に寄せる。 */
.day-num.ja { font-family: var(--head); font-weight: 700; letter-spacing: 0.1em; }
.ps-num.ja { font-family: var(--head); font-weight: 700; letter-spacing: 0.16em; }
.step-no.is-ja { font-family: var(--head); letter-spacing: 0.16em; }
/* ============ 写真ブレイク（.photo-break） ============ */
.photo-break {
position: relative;
border-bottom: 1px solid var(--line);
padding-top: clamp(56px, 8vh, 96px);
}
.photo-break::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: clamp(110px, 18vh, 180px);
background: var(--brand-pale); /* 裁ち落とし写真の足元にブルー淡面 */
}
/* キャプションを置かない写真ブレイク。既定は下端＝写真の下端なので、
足元のブルー淡面が写真の裏に隠れてしまう。下に余白を残して面を見せる。 */
.photo-break:not(:has(.pb-caption)) { padding-bottom: clamp(48px, 7vh, 84px); }
.pb-frame {
position: relative;
z-index: 1;
}
.photo-break--right .pb-frame { padding-left: clamp(22px, 10vw, 160px); }
.photo-break--left .pb-frame { padding-right: clamp(22px, 10vw, 160px); }
.pb-frame img {
width: 100%;
height: clamp(280px, 56vh, 560px);
object-fit: cover;
}
.pb-caption {
position: relative;
z-index: 1;
display: flex;
align-items: baseline;
gap: 18px;
padding-top: 16px;
padding-bottom: 20px;
}
/* キャプションは写真と同じ側にインデントを合わせる。
これが無いと画面端に張り付き、版面から飛び出して見える。 */
.photo-break--right .pb-caption {
padding-left: clamp(22px, 10vw, 160px);
padding-right: var(--shell-pad);
}
.photo-break--left .pb-caption {
padding-left: var(--shell-pad);
padding-right: clamp(22px, 10vw, 160px);
}
.pb-caption-en {
font-family: var(--en);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.38em;
text-transform: uppercase;
color: var(--brand-deep);
white-space: nowrap;
}
.pb-caption-rule {
width: 30px;
height: 1px;
background: var(--brand-deep);
flex: 0 0 auto;
align-self: center;
}
.pb-caption-text {
font-family: var(--body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--ink-soft);
}
@media (max-width: 640px) {
.photo-break { padding-top: 44px; }
.photo-break::before { height: 96px; }
.photo-break--right .pb-frame { padding-left: 22px; }
.photo-break--left .pb-frame { padding-right: 22px; }
.photo-break--right .pb-caption { padding-left: 22px; padding-right: 22px; }
.photo-break--left .pb-caption { padding-left: 22px; padding-right: 22px; }
.pb-frame img { height: clamp(220px, 42vh, 320px); }
.pb-caption { flex-wrap: wrap; gap: 10px; padding-top: 12px; padding-bottom: 16px; }
.pb-caption-text { font-size: 11px; letter-spacing: 0.08em; }
}
/* ============ 当日の流れ（.flow-list / 4フェーズ） ============ */
.flow-list {
list-style: none;
max-width: 640px;
border-top: 1px solid var(--ink);
}
.flow-item {
display: grid;
grid-template-columns: clamp(120px, 16vw, 176px) 1fr;
column-gap: clamp(20px, 3vw, 44px);
align-items: baseline;
padding: clamp(24px, 3.6vh, 34px) 0;
border-bottom: 1px solid var(--line);
}
.flow-time {
font-family: var(--en);
font-weight: 500;
font-size: clamp(19px, 2.4vw, 25px);
letter-spacing: 0.04em;
color: var(--brand);
white-space: nowrap;
}
.flow-time small {
font-family: var(--head);
font-size: 0.56em;
font-weight: 700;
letter-spacing: 0.12em;
margin-left: 0.24em;
color: var(--ink-66);
}
.flow-title {
font-family: var(--head);
font-size: 14.5px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--ink);
}
.flow-desc {
margin-top: 8px;
font-size: 12.5px;
line-height: 2;
letter-spacing: 0.06em;
color: var(--ink-62);
max-width: 26em;
}
@media (max-width: 640px) {
.flow-item { grid-template-columns: 96px 1fr; column-gap: 16px; padding: 20px 0; }
.flow-time { font-size: 17px; }
.flow-title { font-size: 13.5px; letter-spacing: 0.07em; }
.flow-desc { font-size: 12px; margin-top: 6px; }
}
/* スマホ実寸（〜480px）では時刻を上に積んで、本文に全幅を渡す。
96pxの時刻カラムを残すと説明文が1行4〜5語まで痩せて読めなくなるため。 */
@media (max-width: 480px) {
.flow-item { grid-template-columns: 1fr; row-gap: 2px; padding: 18px 0; }
.flow-time { font-size: 16px; letter-spacing: 0.06em; }
.flow-desc { max-width: none; line-height: 1.95; }
}
/* ============ 当日の問い（.sec-questions / .q-list） ============ */
.sec-questions { background: var(--brand-pale); }
.sec-questions .sec-spine { border-right-color: var(--line-pale); }
.sec-questions .sec-en { color: var(--ink-50); }
.q-list {
list-style: none;
max-width: 660px;
}
.q-item {
padding: clamp(34px, 5vh, 52px) 0;
border-top: 1px solid var(--line-pale);
display: grid;
grid-template-columns: clamp(64px, 8vw, 96px) 1fr;
column-gap: clamp(20px, 3vw, 40px);
align-items: start;
}
.q-item:first-child { border-top: 1px solid var(--ink); }
.q-item:last-child { padding-bottom: 0; }
.q-no {
font-family: var(--en);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.3em;
color: var(--brand-deep);
line-height: 2.3;
white-space: nowrap;
}
.q-no .kanji { font-family: var(--mincho); font-weight: 700; } /* 漢数字番号（一・二・三） */
.q-text {
font-family: var(--mincho);
font-weight: 700;
font-feature-settings: "palt";
font-size: clamp(17px, 2.3vw, 21px);
letter-spacing: 0.06em;
line-height: 1.95;
color: var(--ink);
}
.q-helper {
margin-top: 14px;
font-size: 12.5px;
line-height: 2;
letter-spacing: 0.06em;
color: var(--ink-60);
max-width: 33em;
}
@media (max-width: 640px) {
.q-item { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 28px 0; }
.q-no { line-height: 1.6; }
.sec-questions .sec-spine { border-bottom-color: var(--line-pale); }
}
/* ============ 参加者の声（.voice-list） ============ */
.voice-list {
list-style: none;
max-width: 640px;
border-top: 1px solid var(--ink);
}
.voice-item {
padding: clamp(32px, 5vh, 48px) 0;
border-bottom: 1px solid var(--line);
}
.voice-quote {
font-family: var(--mincho); /* 引用は明朝で情緒を持たせる */
font-weight: 500;
font-feature-settings: "palt";
font-size: clamp(14.5px, 1.7vw, 16px);
line-height: 2.25;
letter-spacing: 0.05em;
color: var(--ink);
text-indent: -0.5em; /* 「 のぶら下げで行頭を揃える */
}
.voice-quote .vq-mark { color: var(--brand-deep); }
.voice-attr {
margin-top: 16px;
display: flex;
align-items: center;
gap: 14px;
font-family: var(--body); /* 属性は Noto（明朝の引用と質感差） */
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
color: var(--ink-55);
}
.voice-attr::before {
content: '';
width: 22px;
height: 1px;
background: var(--brand);
flex: 0 0 auto;
}
.voice-note {
margin-top: 24px;
font-size: 11px;
line-height: 1.95;
letter-spacing: 0.1em;
color: var(--ink-50);
max-width: 34em;
}
@media (max-width: 640px) {
.voice-item { padding: 28px 0; }
.voice-quote { line-height: 2.15; }
.voice-attr { font-size: 10.5px; letter-spacing: 0.12em; }
}
/* ============ FAQ（.faq-list） ============ */
.faq-list {
list-style: none;
max-width: 640px;
border-top: 1px solid var(--ink);
}
.faq-item {
padding: clamp(26px, 4vh, 38px) 0;
border-bottom: 1px solid var(--line);
}
.faq-q {
display: grid;
grid-template-columns: 2.1em 1fr;
column-gap: 0;
align-items: baseline;
font-family: var(--head);
font-weight: 700;
font-feature-settings: "palt";
font-size: 14.5px;
letter-spacing: 0.06em;
line-height: 1.85;
color: var(--ink);
}
.faq-q .m {
font-family: var(--en);
font-weight: 500;
letter-spacing: 0.06em;
color: var(--brand);
}
.faq-a {
margin-top: 10px;
display: grid;
grid-template-columns: 2.1em 1fr;
column-gap: 0;
align-items: baseline;
font-size: 13px;
line-height: 2.05;
letter-spacing: 0.06em;
color: var(--ink-66);
}
.faq-a .m {
font-family: var(--en);
font-weight: 500;
font-size: 13.5px;
letter-spacing: 0.06em;
color: var(--ink-40);
}
.faq-a p { max-width: 32em; }
@media (max-width: 640px) {
.faq-item { padding: 22px 0; }
.faq-q { font-size: 13.5px; }
.faq-a { font-size: 12.5px; }
}
/* ============ About POOLO（.about） ============ */
.about {
border-bottom: 1px solid var(--line);
}
.about-inner {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
column-gap: clamp(32px, 5vw, 80px);
padding-top: clamp(64px, 9vh, 104px);
padding-bottom: clamp(64px, 9vh, 104px);
}
.about-en {
display: block;
font-family: var(--en);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--brand);
margin-bottom: 22px;
}
.about-title {
font-family: var(--mincho);
font-weight: 700;
font-feature-settings: "palt";
font-size: clamp(20px, 2.8vw, 28px);
letter-spacing: 0.09em;
line-height: 1.75;
color: var(--ink);
margin-bottom: 26px;
}
.about-text p {
font-size: 13.5px;
line-height: 2.15;
letter-spacing: 0.06em;
color: var(--ink-72);
max-width: 36em;
margin-bottom: 1.8em;
}
.about-text p:last-child { margin-bottom: 0; }
.about-text strong { font-weight: 700; color: var(--ink); }
.about-figs { display: flex; flex-direction: column; gap: 28px; }
.about-fig img { width: 100%; height: auto; }
.about-fig figcaption {
display: flex;
align-items: baseline;
gap: 14px;
padding-top: 10px;
border-top: 1px solid var(--line);
margin-top: 12px;
font-family: var(--body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--ink-60);
}
.about-fig figcaption .en {
font-family: var(--en);
font-size: 9.5px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--brand-deep);
white-space: nowrap;
}
@media (max-width: 860px) {
.about-inner {
grid-template-columns: minmax(0, 1fr);
row-gap: 40px;
padding-top: 60px;
padding-bottom: 60px;
}
.about-figs { flex-direction: row; gap: 18px; }
.about-fig { flex: 1 1 0; }
}
@media (max-width: 640px) {
.about-figs { flex-direction: column; gap: 24px; }
}
/* ============ 中間CTA（.cta / ブルーの面） ============ */
.cta {
background: var(--brand);
color: var(--on-brand);
position: relative;
}
.cta::before {
content: '';
position: absolute;
top: 10px;
left: 0;
right: 0;
height: 1px;
background: var(--on-brand-40); /* 上辺のヘアライン */
}
.cta-inner {
padding-top: clamp(72px, 11vh, 120px);
padding-bottom: clamp(72px, 11vh, 120px);
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
column-gap: clamp(32px, 5vw, 80px);
align-items: end;
}
.cta-en {
display: block;
font-family: var(--en);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--on-brand-88);
margin-bottom: 26px;
}
.cta-title {
font-family: var(--mincho);
font-weight: 700;
font-feature-settings: "palt";
font-size: clamp(24px, 3.6vw, 38px);
letter-spacing: 0.09em;
line-height: 1.8;
color: var(--on-brand);
}
.cta-lead {
font-family: var(--body);
font-size: 13.5px;
line-height: 2.05;
letter-spacing: 0.06em;
color: var(--on-brand-88);
max-width: 40em;
margin-top: clamp(20px, 2.6vw, 28px);
}
.cta-action { text-align: left; }
.cta-btn {
display: block;
background: var(--on-brand);
color: var(--brand-deep);
font-family: var(--head);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.3em;
text-indent: 0.3em;
text-align: center;
padding: 21px 20px;
border: 1px solid var(--on-brand);
transition: background var(--trans-base), color var(--trans-base);
}
.cta-btn:hover {
background: var(--brand-deep);
color: var(--on-brand);
}
.cta-note {
margin-top: 16px;
font-size: 11px;
letter-spacing: 0.14em;
color: var(--on-brand-75);
}
@media (max-width: 860px) {
.cta-inner {
grid-template-columns: minmax(0, 1fr);
row-gap: 44px;
align-items: start;
padding-top: 68px;
padding-bottom: 68px;
}
.cta-action { max-width: 420px; }
}
/* ============ 追従CTA（.float-apply／スクロールで出現） ============ */
/* ※ 表示切替の JS は README「追従CTAのJS」を参照（HTML側に置く） */
.float-apply {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-float);
background: var(--bg); /* フラットな白地 */
border-top: 1px solid var(--line); /* 上辺の1本ヘアラインのみ */
transform: translateY(102%);
pointer-events: none;
transition: transform var(--trans-slow);
}
.float-apply.is-visible {
transform: translateY(0);
pointer-events: auto;
}
.fa-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(16px, 3vw, 40px);
padding-top: 12px;
padding-bottom: 12px;
}
.fa-texts {
display: flex;
align-items: baseline;
gap: 18px;
min-width: 0;
}
/* 主文・副文は nowrap のまま、狭幅では溢れずに末尾を省略する。
320px 端末でテキストが画面外へ飛び出すのを防ぐ。 */
.fa-main {
font-family: var(--head);
font-weight: 700;
font-feature-settings: "palt";
font-size: 13.5px;
letter-spacing: 0.08em;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.fa-sub {
font-family: var(--body);
font-size: 11.5px;
letter-spacing: 0.1em;
color: var(--ink-60);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.fa-btn {
flex: 0 0 auto;
background: var(--brand);
color: var(--on-brand);
font-family: var(--head);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.22em;
text-indent: 0.22em;
padding: 12px 36px;
border-radius: var(--radius);
white-space: nowrap;
transition: background var(--trans-fast);
}
.fa-btn:hover { background: var(--brand-deep); }
@media (max-width: 640px) {
.fa-inner { padding-top: 10px; padding-bottom: 10px; gap: 12px; }
.fa-texts { flex-direction: column; gap: 1px; align-items: flex-start; }
.fa-main { font-size: 12px; letter-spacing: 0.06em; }
.fa-sub { font-size: 10px; letter-spacing: 0.06em; }
.fa-btn { font-size: 12px; padding: 11px 22px; letter-spacing: 0.14em; text-indent: 0.14em; }
}
@media (max-width: 360px) {
/* 極小端末では副文を落とし、主文と申込ボタンだけを残す */
.fa-sub { display: none; }
.fa-btn { padding: 11px 16px; letter-spacing: 0.1em; text-indent: 0.1em; }
}
/* 追従CTA表示中はヘッダー右上の申込ボタンを隠す（重複回避）
※ DOM順：.float-apply → .brand-row（後続兄弟セレクタが効く並びにする） */
.float-apply.is-visible ~ .brand-row .header-cta { visibility: hidden; }
/* ============ 開催日程一覧（.date-list） ============ */
/* 複数回にわたる講座・ゼミの日程を、回数＋日付＋内容の3列で並べる。 */
.date-list {
list-style: none;
border-top: 1px solid var(--ink);
max-width: 760px;
}
.date-item {
display: grid;
grid-template-columns: 4.6em minmax(0, 13em) minmax(0, 1fr);
column-gap: clamp(14px, 2vw, 26px);
align-items: baseline;
padding: 17px 0;
border-bottom: 1px solid var(--line);
}
.date-no {
font-family: var(--en);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
color: var(--brand);
white-space: nowrap;
}
.date-when {
font-family: var(--head);
font-weight: 700;
font-feature-settings: "palt";
font-size: 14px;
letter-spacing: 0.06em;
line-height: 1.7;
color: var(--ink);
}
.date-when .dow { font-family: var(--en); font-weight: 500; letter-spacing: 0.06em; }
.date-when .time {
display: block;
font-family: var(--en);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--ink-50);
margin-top: 2px;
}
.date-what {
font-size: 13px;
line-height: 1.95;
letter-spacing: 0.06em;
color: var(--ink-72);
}
.date-item.is-special { background: var(--brand-pale); }
.date-item.is-special .date-no { color: var(--brand-deep); }
.date-note {
margin-top: 18px;
font-size: 11.5px;
line-height: 1.95;
letter-spacing: 0.1em;
color: var(--ink-50);
max-width: 40em;
}
@media (max-width: 640px) {
.date-item {
grid-template-columns: 4.2em minmax(0, 1fr);
row-gap: 6px;
padding: 15px 0;
}
.date-what { grid-column: 2 / 3; font-size: 12.5px; }
}
/* ============ 向き・不向き（.fit-grid） ============ */
/* 「こんな人へ」「今回は向かないかも」を並置し、ミスマッチ申込を減らす。 */
.fit-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(18px, 2.6vw, 32px);
}
.fit-col {
border-top: 1px solid var(--line);
padding-top: 20px;
}
.fit-col--yes { border-top-color: var(--brand); }
.fit-head {
display: flex;
align-items: baseline;
gap: 10px;
font-family: var(--head);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.08em;
color: var(--ink);
margin-bottom: 16px;
}
.fit-head .en {
font-family: var(--en);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--brand);
}
.fit-col--no .fit-head .en { color: var(--ink-40); }
.fit-items { list-style: none; display: grid; gap: 12px; }
/* ※ li は display:grid にしない。grid にすると li 内の 等の
インライン要素が「独立したグリッドアイテム」に昇格し、1.5em のダッシュ列に
落ちて本文と重なる。ぶら下げインデントは padding-left ＋ 絶対配置で作る。 */
.fit-items li {
position: relative;
padding-left: 1.5em;
font-size: 13px;
line-height: 1.95;
letter-spacing: 0.06em;
color: var(--ink-72);
}
.fit-items li::before {
content: '―';
position: absolute;
left: 0;
top: 0;
font-family: var(--en);
color: var(--brand);
}
.fit-col--no .fit-items li::before { content: '―'; color: var(--ink-40); }
@media (max-width: 640px) {
.fit-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
/* ============ 申込ステップ（.apply-steps） ============ */
/* 申込から受講開始までの手順。番号は Jost、区切りはヘアラインのみ。 */
.apply-steps {
list-style: none;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--ink);
}
.apply-step {
padding: 22px clamp(14px, 1.8vw, 22px) 24px;
border-left: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.apply-step:first-child { border-left: none; padding-left: 0; }
.apply-step-num {
display: block;
font-family: var(--en);
font-size: 21px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 1;
color: var(--brand);
margin-bottom: 14px;
}
.apply-step-title {
font-family: var(--head);
font-weight: 700;
font-feature-settings: "palt";
font-size: 13.5px;
letter-spacing: 0.06em;
line-height: 1.75;
color: var(--ink);
margin-bottom: 8px;
}
.apply-step-desc {
font-size: 12.5px;
line-height: 1.95;
letter-spacing: 0.06em;
color: var(--ink-66);
}
@media (max-width: 860px) {
.apply-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.apply-step:nth-child(odd) { border-left: none; padding-left: 0; }
.apply-step:nth-child(even) { padding-right: 0; }
}
@media (max-width: 560px) {
.apply-steps { grid-template-columns: minmax(0, 1fr); }
.apply-step { border-left: none; padding-left: 0; padding-right: 0; }
.apply-step-num { margin-bottom: 10px; }
}
/* ============ 募集要項（.terms-list） ============ */
/* 締切・支払い・キャンセルなど、契約に関わる情報を定義リストで明示する。 */
.terms-list {
border-top: 1px solid var(--ink);
max-width: 760px;
}
.terms-row {
display: grid;
grid-template-columns: minmax(0, 9em) minmax(0, 1fr);
column-gap: clamp(16px, 2.4vw, 32px);
padding: 18px 0;
border-bottom: 1px solid var(--line);
}
.terms-k {
font-family: var(--head);
font-weight: 700;
font-size: 12.5px;
letter-spacing: 0.1em;
line-height: 2;
color: var(--brand-deep);
}
.terms-v {
font-size: 13px;
line-height: 2;
letter-spacing: 0.06em;
color: var(--ink-72);
}
.terms-v strong { font-weight: 700; color: var(--ink); }
.terms-v ul { list-style: none; display: grid; gap: 4px; }
.terms-v ul li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); align-items: baseline; }
.terms-v ul li::before { content: '・'; color: var(--ink-40); }
@media (max-width: 640px) {
.terms-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 15px 0; }
.terms-k { line-height: 1.8; }
.terms-v { font-size: 12.5px; }
}
/* ============ プログラムの3ステップ（.program-steps） ============ */
/* 「事前 → 現地 → 事後」のように、単発イベントではなく前後を含む一連の
プログラムであることを見せる縦フロー。主役の回は .is-main で淡面にする。 */
.program-steps {
list-style: none;
display: grid;
gap: 0;
max-width: 860px;
}
.program-step {
position: relative;
border-top: 1px solid var(--line);
padding: 26px 0 30px;
}
.program-step:first-child { border-top: 1px solid var(--ink); }
.program-step:last-child { border-bottom: 1px solid var(--line); }
/* ステップ間の矢印（最後の項目には出さない） */
.program-step:not(:last-child)::after {
content: '↓';
position: absolute;
left: 50%;
bottom: -11px;
transform: translateX(-50%);
z-index: 1;
font-family: var(--en);
font-size: 15px;
line-height: 1;
color: var(--brand);
background: var(--bg);
padding: 3px 8px;
}
.program-step.is-main {
background: var(--brand-pale);
padding-inline: clamp(18px, 2.6vw, 30px);
}
.program-step.is-main:not(:last-child)::after { background: var(--brand-pale); }
.ps-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 12px;
}
.ps-num {
font-family: var(--en);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--brand);
}
.ps-tag {
font-family: var(--head);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--on-brand);
background: var(--brand);
border-radius: var(--radius);
padding: 4px 10px;
}
.ps-tag.is-quiet {
color: var(--brand-deep);
background: transparent;
border: 1px solid var(--brand-mid);
}
.ps-title {
font-family: var(--mincho);
font-weight: 700;
font-feature-settings: "palt";
font-size: clamp(18px, 2.4vw, 23px);
letter-spacing: 0.06em;
line-height: 1.75;
color: var(--ink);
margin-bottom: 12px;
}
.ps-desc {
font-size: 13.5px;
line-height: 2;
letter-spacing: 0.06em;
color: var(--ink-72);
max-width: 46em;
}
.ps-desc + .ps-desc { margin-top: 10px; }
.ps-meta {
font-family: var(--head);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--ink-55);
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--line);
max-width: 46em;
}
.program-step.is-main .ps-meta { border-top-color: var(--line-pale); }
@media (max-width: 560px) {
.program-step { padding: 22px 0 26px; }
.ps-desc { font-size: 13px; }
}
/* ============ 登壇者・出会う人（.people-list） ============ */
/* 「誰に会えるのか」を人単位で見せる。写真＋肩書＋名前＋略歴＋外部リンク。 */
.people-list {
list-style: none;
display: grid;
gap: clamp(30px, 4.4vw, 48px);
}
.person {
display: grid;
grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
gap: clamp(22px, 3.4vw, 40px);
align-items: start;
border-top: 1px solid var(--line);
padding-top: clamp(24px, 3.4vw, 34px);
}
.people-list > .person:first-child { border-top: 1px solid var(--ink); }
.person-photo {
border-top: 3px solid var(--brand); /* ブルーの額装（上辺だけの細い罫） */
background: var(--bg-off);
}
.person-photo img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}
/* 写真が未入稿のときのプレースホルダ */
.person-photo.is-empty {
aspect-ratio: 4 / 5;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-top: 3px solid var(--brand-mid);
font-family: var(--head);
font-size: 11.5px;
letter-spacing: 0.12em;
color: var(--ink-40);
text-align: center;
padding: 12px;
}
.person-role {
font-family: var(--head);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--brand-deep);
margin-bottom: 8px;
}
.person-name {
font-family: var(--mincho);
font-weight: 700;
font-feature-settings: "palt";
font-size: clamp(21px, 2.8vw, 27px);
letter-spacing: 0.08em;
line-height: 1.5;
color: var(--ink);
margin-bottom: 16px;
}
.person-name .ruby {
display: block;
font-family: var(--en);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.24em;
color: var(--ink-50);
margin-top: 7px;
}
.person-bio {
font-size: 13px;
line-height: 2.05;
letter-spacing: 0.06em;
color: var(--ink-72);
}
.person-bio + .person-bio { margin-top: 10px; }
/* 外部サイトへの小さな導線。人物カードの下（.person-links）と、
散文セクションの末尾（.link-out）で同じ見え方にする。 */
.link-out,
.person-links {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 16px;
}
.link-out a,
.person-links a {
font-family: var(--head);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--brand-deep);
border-bottom: 1px solid var(--brand);
padding-bottom: 2px;
transition: color var(--trans-fast);
}
.link-out a:hover,
.person-links a:hover { color: var(--brand); }
.link-out .arrow,
.person-links .arrow { font-family: var(--en); margin-left: 0.4em; }
@media (max-width: 640px) {
.person { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.person-photo { max-width: 260px; }
.person-photo.is-empty { max-width: 260px; }
}
/* ============ 体験の要点（.point-list） ============ */
/* 「この旅で体験する4つのこと」のような、番号付きの価値訴求を2列で並べる。 */
.point-list {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--ink);
}
.point-item {
padding: clamp(22px, 2.8vw, 30px) clamp(18px, 2.4vw, 30px) clamp(26px, 3.2vw, 34px);
border-bottom: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.point-item:nth-child(odd) { border-left: none; padding-left: 0; }
.point-item:nth-child(even) { padding-right: 0; }
.point-num {
display: block;
font-family: var(--en);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--brand);
margin-bottom: 14px;
}
.point-num .no {
display: inline-block;
font-size: 22px;
letter-spacing: 0.08em;
margin-left: 0; /* 英字ラベル「Point」を廃したので、番号だけを左端に置く */
vertical-align: -2px;
}
.point-title {
font-family: var(--mincho);
font-weight: 700;
font-feature-settings: "palt";
font-size: clamp(17px, 2.1vw, 20px);
letter-spacing: 0.06em;
line-height: 1.8;
color: var(--ink);
margin-bottom: 12px;
}
.point-desc {
font-size: 13px;
line-height: 2;
letter-spacing: 0.06em;
color: var(--ink-72);
}
.point-desc .quoted { color: var(--brand-deep); font-weight: 500; }
@media (max-width: 640px) {
.point-list { grid-template-columns: minmax(0, 1fr); }
.point-item { border-left: none; padding-left: 0; padding-right: 0; }
}
/* ============ 旅の前と後（.ba-flow） ============ */
/* Before → After。約束ではなく「変化の幅」を静かに示すための対比。 */
.ba-flow {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: stretch;
gap: clamp(16px, 2.4vw, 28px);
}
.ba-col { padding-top: 20px; border-top: 1px solid var(--line); }
.ba-col--after {
border-top-color: var(--brand);
background: var(--brand-pale);
padding: 20px clamp(16px, 2.2vw, 24px) clamp(18px, 2.2vw, 24px);
}
.ba-label {
display: flex;
align-items: baseline;
gap: 10px;
font-family: var(--head);
font-weight: 700;
font-size: 13.5px;
letter-spacing: 0.08em;
color: var(--ink);
margin-bottom: 16px;
}
.ba-label .en {
font-family: var(--en);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-40);
}
.ba-col--after .ba-label .en { color: var(--brand); }
.ba-items { list-style: none; display: grid; gap: 12px; }
.ba-items li {
position: relative;
padding-left: 1.5em;
font-size: 13px;
line-height: 1.95;
letter-spacing: 0.06em;
color: var(--ink-72);
}
.ba-items li::before {
content: '―';
position: absolute;
left: 0;
top: 0;
font-family: var(--en);
color: var(--ink-40);
}
.ba-col--after .ba-items li::before { color: var(--brand); }
.ba-arrow {
align-self: center;
font-family: var(--en);
font-size: 20px;
line-height: 1;
color: var(--brand);
}
@media (max-width: 720px) {
.ba-flow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ba-arrow { justify-self: center; transform: rotate(90deg); padding: 6px 0; }
}
/* ============ 日別の見出し（.day-head） ============ */
/* 複数日程のスケジュールで、.flow-list の直前に置く日の見出し。 */
.day-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 16px;
border-bottom: 1px solid var(--ink);
padding-bottom: 10px;
margin-bottom: 4px;
}
.day-head + .flow-list { margin-top: 0; }
.day-num {
font-family: var(--en);
font-size: clamp(20px, 2.6vw, 26px);
font-weight: 600;
letter-spacing: 0.14em;
line-height: 1;
color: var(--brand);
}
.day-date {
font-family: var(--head);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--ink);
}
.day-note {
font-size: 12.5px;
letter-spacing: 0.06em;
color: var(--ink-55);
margin-left: auto;
}
.day-block + .day-block { margin-top: clamp(38px, 5vw, 56px); }
@media (max-width: 560px) {
.day-note { margin-left: 0; width: 100%; }
}
/* ============ 参加費（.fee-grid / .fee-add） ============ */
/* 「プログラム参加費」と「現地で支払う実費」を明確に分けて示す。
合算した金額を主役にしない（旅行商品に見せないため）。 */
.fee-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(16px, 2.4vw, 26px);
}
.fee-card {
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
padding: clamp(20px, 2.6vw, 26px);
}
.fee-card--sub { border-top-color: var(--brand-mid); }
.fee-label {
display: block;
font-family: var(--head);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--ink);
margin-bottom: 12px;
}
.fee-price {
display: block;
font-family: var(--en);
font-size: clamp(32px, 4.6vw, 42px);
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.1;
color: var(--brand);
}
.fee-price small {
font-family: var(--head);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.06em;
margin-left: 0.2em;
}
.fee-note {
font-size: 12.5px;
line-height: 1.9;
letter-spacing: 0.06em;
color: var(--ink-66);
margin-top: 12px;
}
.fee-add {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: clamp(16px, 2.4vw, 30px);
background: var(--brand-pale);
padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.6vw, 28px);
margin-top: clamp(16px, 2.2vw, 22px);
}
.fee-add-label {
display: block;
font-family: var(--head);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--brand-deep);
margin-bottom: 8px;
}
.fee-add-desc {
font-size: 12.5px;
line-height: 1.9;
letter-spacing: 0.06em;
color: var(--ink-72);
}
.fee-add-price {
font-family: var(--en);
font-size: clamp(26px, 3.4vw, 32px);
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.1;
color: var(--brand-deep);
white-space: nowrap;
}
.fee-add-price small {
font-family: var(--head);
font-size: 13px;
font-weight: 700;
margin-left: 0.2em;
}
.fee-foot {
font-size: 12.5px;
line-height: 1.95;
letter-spacing: 0.06em;
color: var(--ink-60);
margin-top: 16px;
}
@media (max-width: 640px) {
.fee-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.fee-add { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
/* ============ フッター（.footer） ============ */
/* フッターのロゴもタップ領域を44px確保する */
.footer-marks a { display: inline-flex; align-items: center; min-height: 44px; }
.footer {
background: var(--bg-off);
color: var(--ink-66);
}
.footer-inner {
padding-top: clamp(56px, 8vh, 88px);
padding-bottom: 40px;
}
.footer-top {
display: flex;
align-items: center;
gap: clamp(24px, 4vw, 48px);
padding-bottom: 36px;
border-bottom: 1px solid var(--line);
}
.footer .mon { width: 42px; height: 42px; }
.footer-marks {
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 36px);
}
.footer-marks img { width: auto; }
.footer-marks img[src*="poolo_logo"] { height: 36px; }
.footer-marks img[src*="tabippo_logo"] { height: 72px; }
.footer-marks a { display: inline-flex; align-items: center; transition: opacity var(--trans-fast); }
.footer-marks a:hover { opacity: 0.7; }
.footer-divider {
width: 1px;
height: 34px;
background: var(--line);
align-self: center;
}
.footer-bottom {
padding-top: 28px;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
flex-wrap: wrap;
}
.footer-text {
font-size: 11px;
letter-spacing: 0.12em;
line-height: 2;
}
.footer-copy {
font-family: var(--en);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--brand-deep);
}
@media (max-width: 640px) {
.footer-top { flex-wrap: wrap; gap: 22px; }
.footer-marks img[src*="poolo_logo"] { height: 26px; }
.footer-marks img[src*="tabippo_logo"] { height: 52px; }
.footer-divider { height: 26px; }
.footer-bottom { flex-direction: column; gap: 12px; }
}
/* ============ 写真ギャラリー（.gallery / .g-grid / .g-strip） ============ */
/* 写真点数が多い旅・現地プログラムのページ用。目地は1pxのヘアラインだけで、
影も角丸もつけない（脱AI原則）。.g-grid＝モザイク、.g-strip＝全幅の横スクロール帯。 */
.gallery {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg-off);
}
.gallery-head {
display: flex;
align-items: baseline;
gap: 18px;
padding: clamp(22px, 3.4vw, 34px) var(--shell-pad) clamp(16px, 2.4vw, 22px);
}
.gallery-head-en {
font-family: var(--en);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.38em;
text-transform: uppercase;
color: var(--brand-deep);
white-space: nowrap;
}
.gallery-head-rule {
width: 30px;
height: 1px;
background: var(--brand-deep);
flex: 0 0 auto;
align-self: center;
}
.gallery-head-text {
font-family: var(--body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--ink-soft);
}
.gallery-note {
font-family: var(--body);
font-size: 11px;
line-height: 1.9;
letter-spacing: 0.08em;
color: var(--ink-50);
padding: 14px var(--shell-pad) clamp(22px, 3.4vw, 32px);
}
/* モザイク（6カラム基準） */
.g-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: clamp(112px, 14.6vw, 210px);
gap: 1px;
background: var(--line); /* 目地＝ヘアライン */
border-top: 1px solid var(--line);
}
.g-item {
position: relative;
overflow: hidden;
background: var(--bg);
grid-column: span 2;
grid-row: span 1;
}
.g-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.g-item.is-wide { grid-column: span 3; }
.g-item.is-tall { grid-row: span 2; }
.g-item.is-big { grid-column: span 3; grid-row: span 2; }
/* 全幅の横スクロール帯 */
.g-strip {
display: flex;
gap: 1px;
background: var(--line);
border-top: 1px solid var(--line);
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.g-strip .g-item {
flex: 0 0 clamp(196px, 24vw, 300px);
height: clamp(196px, 24vw, 280px);
scroll-snap-align: start;
grid-column: auto;
grid-row: auto;
}
.g-strip::-webkit-scrollbar { height: 5px; }
.g-strip::-webkit-scrollbar-track { background: var(--bg-off); }
.g-strip::-webkit-scrollbar-thumb { background: var(--brand-mid); }
@media (max-width: 860px) {
.g-grid { grid-template-columns: repeat(4, 1fr); }
.g-item.is-wide, .g-item.is-big { grid-column: span 2; }
}
@media (max-width: 560px) {
.g-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: clamp(130px, 40vw, 200px); /* スマホでタイルが小さくなりすぎないように */
}
.g-item, .g-item.is-wide { grid-column: span 1; }
.g-item.is-big { grid-column: span 2; grid-row: span 2; }
.gallery-head { gap: 10px; flex-wrap: wrap; }
}