/*
 * MD留学.com の見た目（このファイルは plugin/dev/build-css.py が自動で作ったもの）。
 * 承認済みデザイン design/final の CSS をそのまま写し、最後に WordPress で使うための追加をつなげている。
 * 直すときは design/final（または plugin/dev/css/wp-additions.css）を直して、build-css.py を実行し直す。
 */

/* ################ 共通（design/final/tokens.css） ################ */
/* =========================================================
   MD留学.com デザイントークンと共通部品（統合版）
   - 色・書体・ボタン・見出し・ヘッダー・フッターは、社団トップ
     （tadashiiiryou.or.jp の corporate.css）の実測値をそのまま使う
   - 参考サイト（マイナビ）から借りるのは「並べ方」と、
     「記事の枠だけ角を丸め、マウスを乗せると浮き出す」柔らかさだけ
   - 使わないもの：カード左端の色線／英語の小見出し／引用符のアイコン／
     色を塗った分類のピル／社団にない色（ピンク・紫・オレンジ・緑など）
   - WordPress では、このファイルをそのままテーマ（専用プラグイン）の CSS にする想定
   ========================================================= */
/* =========================================================
   1. デザイントークン
   ========================================================= */
:root{/* ---- 色（社団トップの実測値） ---- */
  --ink:#122c43;          /* 本文・見出し・塗りボタン */
  --ink-hover:#21465c;    /* 塗りボタンのホバー */
  --soft:#43596b;         /* 説明文 */
  --muted:#526678;        /* 日付・ラベル・注記（白地で5.9:1） */
  --pale:#f0f5f5;         /* 薄い面：記事中の案内・先輩の声・目次の横の案内 */
  --frame:#f1f4f5;        /* 薄い帯：おすすめ・テーマの列（白いカードを浮かせる地） */
  --blue:#376f95;         /* 青い面：コミュニティ参加ブロック（白文字で5.4:1） */
  --line:#d7e0e5;         /* 区切り線 */
  --line-frame:#e1e7eb;   /* カード・画像の1px枠 */
  --line-header:#eef1f3;  /* ヘッダー・メディア帯の下線 */
  --line-dash:rgb(18 44 67 / 30%); /* 「寄稿募集」の点線の枠 */
  --teal:#326e68;         /* テーマ名・募集のラベル・ボタンのフォーカス枠（白地で5.9:1） */
  --gold:#a89447;         /* 文字リンクのフォーカス枠・王冠（文字色には使わない） */
  --logo-blue:#2d5aa7;    /* ロゴの青（医療・保険の線画の差し色だけ） */

  /* ---- 書体（Webフォントは読まない。社団と同じ端末のゴシック体） ---- */
  --font:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  /* 題字「MD留学.com」だけに使う書体（ユーザー選定 2026-10-19）。読み込めないときは本文と同じゴシック */
  --font-title:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;

  /* ---- 文字の大きさ（見出しはすべて日本語のみ・左揃え・太さ650・飾りなし） ---- */
  --fs-hero:clamp(44px,5vw,66px);     /* トップの題字「MD留学.com」 */
  --fs-h1-list:clamp(34px,3.9vw,54px);/* 一覧ページのタイトル（社団の見出しと同じ） */
  --fs-h1-post:clamp(26px,2.7vw,36px);/* 記事タイトル */
  --fs-sec:clamp(32px,3.6vw,46px);    /* セクション見出し（社団は約50px） */
  --fs-row:clamp(20px,1.9vw,24px);    /* テーマの列の見出し */
  --fs-body:16px;                     /* 説明文 */
  --fs-prose:17px;                    /* 記事本文 */
  --fs-meta:12px;                     /* 日付・国・テーマ */
  --fs-min:11px;                      /* これより小さい文字は使わない */
  --lh-body:2.05;
  --lh-head:1.45;

  /* ---- 余白・幅 ---- */
  --container:1280px;     /* 社団と同じ最大幅（左右の余白込み） */
  --content:1192px;       /* 1280 - 44 × 2 */
  --gutter:44px;
  --sec-y:96px;           /* セクションの上下の余白 */
  --gap:24px;             /* カードの間隔 */
  --header-h:106px;

  /* ---- 角丸：社団の 0・50%・999px に「記事の枠」の12pxだけを足す ---- */
  --r-card:12px;          /* 記事カード・スライド・先輩の声・寄稿募集の枠 */
  --r-thumb:8px;          /* 枠の内側に置く小さな画像（ランキング・関連記事の小） */
  --r-pill:999px;         /* ボタン・絞り込み */
  /* 青い面・薄い帯・記事本文の画像・キービジュアルは角なし */

  /* ---- 影：常に出すのはスライドのパネルだけ。ほかはホバーで浮かせたときだけ ---- */
  --sh-slide:0 26px 48px -34px rgb(18 44 67 / 45%),0 0 0 1px rgb(18 44 67 / 6%);
  --sh-lift:0 22px 36px -22px rgb(18 44 67 / 38%);
  --lift:-4px;            /* 社団のボタンと同じ4pxの浮き上がり */
  --ease:cubic-bezier(.2,.7,.2,1);}
@media (max-width:1150px){
  :root{--gutter:40px;--header-h:92px}
}
@media (max-width:850px){
  :root{--gutter:30px;--sec-y:76px;--header-h:80px;--gap:20px}
}
@media (max-width:560px){
  :root{--gutter:24px;--sec-y:60px;--header-h:72px;--gap:14px}
}
/* ---- テーマごとの色（自動サムネイル・テーマのアイコン）。社団の青・金・ティール系の淡い色だけ ---- */
[data-t=prep]{--tint:#e1eaf1;--accent:#376f95}
/* 渡航準備・手続き：パスポート＋青いスタンプ */
[data-t=housing]{--tint:#eeeadd;--accent:#a89447}
/* 住まい：家＋金色のドア */
[data-t=life]{--tint:#dde9e6;--accent:#326e68}
/* 暮らし・車：車＋ティールのタイヤ */
[data-t=medical]{--tint:#e4eaf3;--accent:#2d5aa7}
/* 医療・保険：保険証＋ロゴの青の十字 */
[data-t=kids]{--tint:#f0e7df;--accent:#326e68}
/* 子育て・教育：ティールの青りんご＋鉛筆 */
[data-t=career]{--tint:#e2e7ec;--accent:#526678}
/* キャリア・研究：フラスコ＋灰青の液 */
/* =========================================================
   2. 初期化
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 24px)}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);font-size:16px;line-height:normal;font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:clip;line-break:strict}
/* line-break:strict … 「キ／ャリア」のように、小さい「ャ・ュ・ッ」や「ー」が行の頭に来る改行を防ぐ（日本語の禁則） */
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
button{font:inherit;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;top:10px;left:10px;z-index:100;padding:15px;background:#fff;transform:translateY(-150%)}
.skip:focus{transform:none}
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
/* 日本語の改行を文節で区切る（「行く、と／いうこと」のような泣き別れを防ぐ）。
   対応していないブラウザでは通常の改行になるだけで、崩れはしない */
h1,h2,h3,h4,.card__title,.slide__title,.slide__quote,.rank-card__title,.voice__q,.recruit__title,.news-item p,.toc a,.tile__name,.join__title,.lead,.ask,.recruit__lead,.recruit-wide__text,.inline-join__text,.side-join__text,.author__bio{word-break:auto-phrase;text-wrap:pretty}
.nb{display:inline-block}
/* 文節のかたまり（見出しの手動の改行位置） */
/* =========================================================
   3. 社団と共通のヘッダー（corporate.css と同じ寸法）
   ========================================================= */
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:35px;height:var(--header-h);padding:0 4.5%;background:#fff;border-bottom:1px solid var(--line-header)}
.brand{flex-shrink:0;width:300px}
.brand img{width:100%}
.site-header nav{display:flex;align-items:center;gap:32px;font-size:13px;font-weight:600;letter-spacing:.025em}
.menu-toggle{display:none}
.site-header nav a.action-button{gap:18px;min-height:48px;padding:8px 10px 8px 20px;font-size:12px}
.site-header nav .action-button__arrow{flex-basis:26px;width:26px;height:26px}
@media (max-width:1150px){
  .site-header{padding:0 30px;gap:22px}
  .brand{width:250px}
  .site-header nav{gap:20px;font-size:12px}
}
@media (max-width:850px){
  .site-header{padding:0 24px}
  .brand{width:255px}
  .menu-toggle{display:block;min-height:44px;padding:8px 0;border:0;background:none;font-size:12px;cursor:pointer}
  .menu-toggle span{padding-bottom:6px;border-bottom:1px solid var(--ink)}
  .site-header nav{display:none;position:absolute;top:var(--header-h);left:0;right:0;padding:14px 24px 26px;background:#fff;box-shadow:0 12px 16px #142d430a}
  .site-header nav.is-open{display:grid;gap:0}
  .site-header nav>a{padding:18px 0;border-bottom:1px solid var(--line);font-size:14px}
  .site-header nav a.action-button{margin-top:16px}
}
@media (max-width:560px){
  .site-header{padding:0 20px;gap:14px}
  .brand{width:min(245px,70%)}
  .menu-toggle{flex-shrink:0;font-size:12px}
}
/* =========================================================
   4. MD留学.com の帯（全ページ・社団ヘッダーの直下）
   - 「MD留学.com」は紺1色の文字。ブランドの絵柄（茶色のロゴ）はキービジュアルだけ
   - 参加ボタンは紺の塗り・小さめ。社団ヘッダーの白い「お問い合わせ」と区別する
   ========================================================= */
.media-bar{border-bottom:1px solid var(--line-header);background:#fff}
.media-bar__inner{display:flex;align-items:center;gap:28px;max-width:var(--container);min-height:64px;margin:0 auto;padding:0 var(--gutter)}
.media-bar__name{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-title);font-size:19px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.media-bar__desc{font-size:12px;color:var(--muted);white-space:nowrap}
.media-bar__nav{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:13px;font-weight:600;letter-spacing:.025em;white-space:nowrap}
.media-bar__nav a{display:inline-flex;align-items:center;min-height:44px}
.media-bar__nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
@media (max-width:1150px){
  .media-bar__desc{display:none}
}
/* スマホ・タブレット：1段目に名前とボタン、2段目にメニューを横スクロールで */
@media (max-width:850px){
  .media-bar__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name btn" "nav nav";gap:0 12px;min-height:0;padding-top:8px}
  .media-bar__name{grid-area:name;font-size:17px}
  .media-bar a.action-button{grid-area:btn}
  .media-bar__nav{grid-area:nav;gap:22px;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);overflow-x:auto;scrollbar-width:none}
  .media-bar__nav::-webkit-scrollbar{display:none}
}
/* =========================================================
   5. ボタン（社団 buttons-v19 と同じ：カプセル＋右端の丸の中に→）
   ========================================================= */
a.action-button{--bg:#fff;--fg:var(--ink);--bd:var(--ink);--hover:#f0f5f5;
  --sh:0 3px 8px rgb(18 44 67/5%);--sh-h:0 12px 24px -8px rgb(18 44 67/30%);
  --ar-bg:var(--ink);--ar-bd:transparent;
  display:inline-flex;align-items:center;justify-content:space-between;gap:24px;
  width:fit-content;max-width:100%;min-height:54px;padding:10px 12px 10px 24px;
  border:1px solid var(--bd);border-radius:var(--r-pill);background:var(--bg);color:var(--fg);box-shadow:var(--sh);
  font-size:14px;font-weight:600;line-height:1.65;letter-spacing:.01em;text-align:left;text-decoration:none;
  cursor:pointer;touch-action:manipulation;
  transition:transform 220ms var(--ease),box-shadow 220ms ease,background-color 220ms ease;}
a.action-button.action-button--primary{--bg:var(--ink);--fg:#fff;--hover:var(--ink-hover);--sh:0 4px 12px rgb(18 44 67/14%);--ar-bg:transparent;--ar-bd:rgb(255 255 255/75%)}
a.action-button.action-button--light{--bd:#fff;--sh-h:0 12px 24px -8px rgb(0 0 0/40%)}
a.action-button.action-button--s{gap:14px;min-height:40px;padding:5px 6px 5px 18px;font-size:12px;box-shadow:none}
.action-button--s .action-button__arrow{flex-basis:26px;width:26px;height:26px}
.action-button__label{min-width:0;overflow-wrap:anywhere}
.action-button--s .action-button__label{white-space:nowrap}
.action-button__arrow{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid var(--ar-bd);border-radius:50%;background:var(--ar-bg);color:#fff}
.action-button__arrow svg{width:18px;height:18px;transition:transform 220ms var(--ease)}
.action-button--s .action-button__arrow svg{width:16px;height:16px}
a.action-button:focus-visible{outline:3px solid var(--teal);outline-offset:5px}
.join a.action-button:focus-visible{outline-color:#fff}
@media (hover:hover) and (pointer:fine){
  a.action-button:hover{background:var(--hover);box-shadow:var(--sh-h);transform:translateY(var(--lift));text-decoration:none}
  a.action-button.action-button--s:hover{transform:translateY(-2px)}
  a.action-button:hover .action-button__arrow svg{transform:translateX(2px)}
}
a.action-button:active{transform:translateY(1px) scale(.98);box-shadow:inset 0 2px 4px rgb(0 0 0/12%);transition-duration:70ms}
@media (max-width:560px){
  a.action-button{gap:16px;padding-left:20px;font-size:14px}
  a.action-button.action-button--s{min-height:44px;padding:6px 7px 6px 16px;font-size:12px}
}
/* 社団の「テキストリンク」：下線＋右に記号（「一覧を見る」「記事一覧」など）。
   上下に余白を取り、指で押せる高さ（44px）を確保する */
.text-link{display:inline-flex;align-items:center;gap:40px;padding:10px 0;border-bottom:1px solid currentColor;font-size:14px;font-weight:500;line-height:1.8;white-space:nowrap}
.text-link>span{font-size:18px;line-height:1}
.text-link:hover{text-decoration:none;opacity:.7}
@media (max-width:560px){
  .text-link{gap:24px;font-size:13px;padding:11px 0}
}
/* =========================================================
   6. 見出し・セクション
   ========================================================= */
.sec{padding-block:var(--sec-y)}
.h-sec{font-size:var(--fs-sec);font-weight:650;line-height:var(--lh-head);letter-spacing:.02em}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.sec-head .text-link{flex-shrink:0}
.lead{max-width:46em;margin-top:18px;font-size:var(--fs-body);line-height:var(--lh-body)}
.fine{margin-top:14px;font-size:12px;line-height:1.8;color:var(--muted)}
.band{background:var(--frame)}
/* 白いカードを浮かせる薄い帯 */
@media (max-width:560px){
  .h-sec{font-size:29px;line-height:1.5}
  .sec-head{flex-wrap:wrap;gap:4px 24px;margin-bottom:26px}
  .lead{font-size:15px;line-height:2}
}
/* ---- 国・テーマの小さな表記（社団ニュースの「種別」と同じ素の文字。塗りのピルにはしない） ---- */
.meta{display:flex;flex-wrap:wrap;align-items:center;font-size:var(--fs-meta);line-height:1.6;letter-spacing:.04em;color:var(--muted)}
.meta>span+span::before{content:"／";margin:0 .4em;color:var(--muted)}
.meta__theme{color:var(--teal)}
/* =========================================================
   7. 書き手のアバター（顔写真の代わり）
   - 書き手の頭文字1字の丸。地の色は留学先の国で決める（アメリカ＝淡い青、フランス＝淡い金）
   - 画像の作業はいらず、書き手が増えても自動で作れる
   ========================================================= */
.avatar{display:inline-grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--av,#e1eaf1);color:var(--ink);font-size:17px;font-weight:650;line-height:1}
.avatar[data-c=usa]{--av:#e1eaf1}
.avatar[data-c=fra]{--av:#eeeadd}
.avatar--s{width:30px;height:30px;font-size:13px}
.avatar--l{width:72px;height:72px;font-size:28px}
/* =========================================================
   8. 自動サムネイル（写真がない記事）
   - 16:9。テーマの淡い色の面＋右にテーマの線画（紺の細線＋差し色1か所）
   - 左上に国名、左下に「サムネ見出し」（任意・14字まで）、上の中ほどに補助アイコン（任意）
   - 文字はサムネイル自身の幅に比例（cqw）。幅240px以下では絵だけにする
   ========================================================= */
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--tint,var(--frame));container-type:inline-size;isolation:isolate;color:var(--ink)}
.thumb__art{position:absolute;inset:0;width:100%;height:100%;color:var(--accent)}
.thumb__sub{position:absolute;left:49cqw;top:5.6cqw;display:grid;place-items:center;width:13cqw;height:13cqw;border:1px solid rgb(18 44 67/14%);border-radius:50%;background:#fff;color:var(--ink)}
.thumb__sub svg{width:54%;height:54%}
.thumb__country{position:absolute;left:6cqw;top:6.2cqw;font-size:max(11px,3.4cqw);font-weight:650;line-height:1;letter-spacing:.1em}
.thumb__word{position:absolute;left:6cqw;bottom:7cqw;max-width:50%;font-size:max(14px,6.5cqw);font-weight:650;line-height:1.42;letter-spacing:.02em}
@container (max-width:240px){
  .thumb__word,.thumb__country,.thumb__sub{display:none}
}
/* 写真がある記事：写真をそのまま使う */
.thumb--photo{background:var(--frame)}
.thumb--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* テーマのアイコン（線画を丸く切り抜いたもの。列の見出し・テーマ一覧・一覧ページ） */
.theme-icon{display:inline-block;flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--tint);color:var(--accent);overflow:hidden}
.theme-icon svg{width:100%;height:100%}
/* =========================================================
   9. 記事カード（参考サイトの柔らかさ：角丸12px・白いカード・ホバーで4px浮く）
   - 常には影を出さない。薄い帯（.band）の上に置くと白いカードが浮いて見える
   ========================================================= */
.card{min-width:0}
.card__link{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid var(--line-frame);border-radius:var(--r-card);background:#fff;color:inherit;transition:transform 260ms var(--ease),box-shadow 260ms ease}
.card__link:hover{text-decoration:none}
.card__body{display:flex;flex:1;flex-direction:column;padding:18px 20px 18px}
.card__title{margin-top:8px;font-size:16px;font-weight:650;line-height:1.72;letter-spacing:.01em;overflow-wrap:anywhere}
.card__foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:18px}
.card__who{display:flex;flex-direction:column;min-width:0;font-size:12px;line-height:1.55}
.card__name{font-weight:600;white-space:nowrap}
.card__date{color:var(--muted);letter-spacing:.04em}
.more{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;margin-left:auto;border:1px solid var(--ink);border-radius:50%;color:var(--ink);transition:background-color 180ms ease,color 180ms ease}
.more svg{width:16px;height:16px;transition:transform 180ms ease}
.card__link:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .card__link:hover{transform:translateY(var(--lift));box-shadow:var(--sh-lift)}
  .card__link:hover .card__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
  .card__link:hover .more{background:var(--ink);color:#fff}
  .card__link:hover .more svg{transform:translateX(2px)}
}
/* 3列の一覧（関連記事・テーマ一覧） */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px var(--gap)}
.grid3>li{display:flex;min-width:0}
.grid3>li>*{flex:1;min-width:0}
@media (max-width:850px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* スマホ：横長の小さいカードに切り替える（縦に長くなりすぎないように） */
@media (max-width:640px){
  .grid3{grid-template-columns:minmax(0,1fr);gap:12px}
  .grid3--compact .card__link{flex-direction:row;align-items:center;gap:14px;padding:12px}
  .grid3--compact .thumb{flex:0 0 118px;border-radius:var(--r-thumb)}
  .grid3--compact .card__body{padding:0}
  .grid3--compact .card__title{margin-top:2px;font-size:14px;line-height:1.65}
  .grid3--compact .card__foot{display:none}
}
/* =========================================================
   10. 横スクロールの列（テーマの列・ランキング・先輩の声で共通）
   - PCは4枚（または3枚・2枚）が見え、5枚目の端が少しのぞく。スマホは1枚と少し
   ========================================================= */
.track{display:flex;gap:var(--gap);overflow-x:auto;padding:8px max(var(--gutter),calc((100% - var(--content)) / 2)) 28px;scroll-padding-inline:max(var(--gutter),calc((100% - var(--content)) / 2));scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.track>li{display:flex;flex:0 0 calc((100% - 3 * var(--gap)) / 4);min-width:0;scroll-snap-align:start}
.track>li>*{flex:1;min-width:0}
.track>li.is-x2{flex-basis:calc((100% - 3 * var(--gap)) / 2 + var(--gap))}
.track>li.is-x3{flex-basis:calc((100% - 3 * var(--gap)) / 4 * 3 + 2 * var(--gap))}
.track:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
@media (max-width:850px){
  .track>li,.track>li.is-x2,.track>li.is-x3{flex-basis:calc((100% - 2 * var(--gap)) / 2.5)}
}
@media (max-width:560px){
  .track{padding-bottom:22px}
  .track>li,.track>li.is-x2,.track>li.is-x3{flex-basis:76%}
}
/* =========================================================
   11. 寄稿募集の枠（記事が足りない場所を「意味のある空き」にする）
   - 点線の枠で「まだ記事がない」ことを示す。文字色は補助文字の #526678 以上の濃さ
   ========================================================= */
.recruit{display:flex;flex-direction:column;height:100%;padding:24px 22px 20px;border:1px dashed var(--line-dash);border-radius:var(--r-card);background:rgb(255 255 255/45%)}
.recruit__label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:650;letter-spacing:.04em;color:var(--teal)}
.recruit__label svg{flex:0 0 18px;width:18px;height:18px}
.recruit__title{margin-top:14px;font-size:17px;font-weight:650;line-height:1.7}
.recruit__lead{margin-top:10px;font-size:13px;line-height:1.9;color:var(--soft)}
.recruit__topics{display:grid;align-content:start;gap:8px;margin:16px 0 22px;font-size:13px;line-height:1.7;color:var(--soft)}
.recruit__topics li{position:relative;padding-left:14px}
.recruit__topics li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--teal)}
.recruit .text-link{align-self:flex-start;margin-top:auto;font-size:13px;gap:28px}
.recruit .action-button{margin-top:auto}
/* 横長の寄稿募集（2〜3枠ぶん。トップのテーマの列とテーマ一覧で同じ部品を使う）
   左に呼びかけとボタン、右に「たとえば、こんな話を聞かせてください」 */
.recruit--wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:40px;align-content:start;padding:34px 36px 30px}
.recruit--wide .recruit__label,.recruit--wide .recruit__title,.recruit--wide .recruit__lead,.recruit--wide .recruit__actions{grid-column:1}
.recruit--wide .recruit__title{font-size:21px;line-height:1.6}
.recruit--wide .recruit__lead{font-size:14px}
.recruit__asks{grid-column:2;grid-row:1/5;display:grid;align-content:start}
.recruit__asks-label{padding-bottom:4px;font-size:12px;font-weight:650;letter-spacing:.04em;color:var(--muted)}
/* 押せない文なので、ボタンに見える枠や白い地は付けず、罫線で区切った行にする */
.ask{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--line);font-size:14px;font-weight:600;line-height:1.75}
.ask:last-child{border-bottom:1px solid var(--line)}
.ask::before{content:"";position:absolute;left:2px;top:calc(12px + .62em);width:8px;height:8px;border:1.5px solid var(--teal);border-radius:50%}
.recruit__actions{grid-row:4;align-self:end;margin-top:26px}
@media (max-width:850px){
  .recruit--wide{display:flex;padding:26px 22px 22px}
  .recruit__asks{margin-top:18px}
  .recruit--wide .recruit__title{font-size:18px}
  /* 横スクロールの列の中では、隣のカードと高さをそろえるため、説明文を省き、行を詰める */
  .track .recruit--wide .recruit__lead,.track .recruit--wide .recruit__asks-label{display:none}
  .track .recruit--wide .ask{padding:3px 0 3px 14px;border:0;font-size:13px;font-weight:500;line-height:1.7;color:var(--soft)}
  .track .recruit--wide .ask::before{left:0;top:.72em;width:5px;height:5px;border:0;background:var(--teal)}
}
@media (max-width:640px){
  .recruit__actions .action-button{width:100%}
}
/* =========================================================
   12. コミュニティ参加ブロック（社団の「お問い合わせ」欄と同じ作法）
   - 全幅・角なしの青い面 #376f95、白文字（不透明）、区切りは白35%の線、白いカプセル
   ========================================================= */
.join{background:var(--blue);color:#fff}
.join__inner{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"title visual" "body visual" "more more";column-gap:72px;padding-block:96px}
.join__title{grid-area:title;align-self:end;font-size:clamp(28px,3.1vw,40px);font-weight:650;line-height:1.55;letter-spacing:.02em}
.join__body{grid-area:body;align-self:start;margin-top:28px}
.join__lead{max-width:34em;font-size:16px;line-height:2.05}
.join__visual{grid-area:visual;align-self:center}
.join__visual img{width:100%;aspect-ratio:16/9;object-fit:cover}
.join__credit{margin-top:14px;font-size:12px;line-height:1.9}
.join__credit span{display:inline-block}
.join__more{grid-area:more;margin-top:56px}
.join__label{font-size:13px;font-weight:650;letter-spacing:.06em}
.join__who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px;margin-top:12px;border-top:1px solid rgb(255 255 255/35%)}
.join__who li{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid rgb(255 255 255/35%);font-size:14px;line-height:1.65}
.join__who svg{flex:0 0 40px;width:40px;height:40px;padding:9px;border:1px solid rgb(255 255 255/60%);border-radius:50%}
.join__note{margin-top:16px;font-size:13px;line-height:1.9}
.join__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:32px}
.join a.action-button{min-height:62px;padding:12px 14px 12px 28px;font-size:15px}
.join__small{font-size:12px;line-height:1.8}
@media (max-width:1150px){
  .join__who{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .join__inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"visual" "title" "body" "more";padding-block:64px}
  .join__visual{max-width:640px;margin-bottom:32px}
  .join__more{margin-top:40px}
}
@media (max-width:560px){
  .join__inner{padding-block:0 56px}
  .join__visual{margin:0 calc(var(--gutter) * -1) 26px;max-width:none}
  .join__credit{padding-inline:var(--gutter);margin-top:12px}
  .join__title{font-size:25px;line-height:1.6}
  .join__body{margin-top:20px}
  .join__lead{font-size:15px;line-height:2}
  .join__more{margin-top:32px}
  .join__who{grid-template-columns:minmax(0,1fr)}
  .join__who li{padding:12px 0}
  .join a.action-button{width:100%;min-height:58px;padding:10px 12px 10px 24px;font-size:15px}
}
/* =========================================================
   13. 記事の途中の小さな案内（1記事に1回だけ。薄い面・角なし）
   ========================================================= */
.inline-join{display:grid;grid-template-columns:88px minmax(0,1fr);gap:24px;align-items:center;padding:26px 28px;background:var(--pale)}
.inline-join__icon{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:#fff;color:var(--ink)}
.inline-join__icon svg{width:36px;height:36px}
.inline-join__title{font-size:17px;font-weight:650;line-height:1.6;letter-spacing:.02em}
.inline-join__text{margin-top:6px;font-size:14px;line-height:1.9;color:var(--soft)}
.inline-join .text-link{margin-top:6px;font-size:13px;gap:28px}
@media (max-width:560px){
  .inline-join{grid-template-columns:64px minmax(0,1fr);gap:16px;padding:20px 18px;align-items:start}
  .inline-join__icon{width:64px;height:64px}
  .inline-join__icon svg{width:28px;height:28px}
  .inline-join__title{font-size:16px}
  .inline-join__text{font-size:13px;line-height:1.85}
}
/* PC の記事ページで、目次の下に追従する小さな案内（薄い面・角なし） */
.side-join{padding:20px 20px 22px;background:var(--pale)}
.side-join__img{width:100%;aspect-ratio:16/10;object-fit:cover}
.side-join__title--first{margin-top:0}
.side-join__title{margin-top:16px;font-size:15px;font-weight:650;line-height:1.6}
.side-join__text{margin-top:6px;font-size:13px;line-height:1.85;color:var(--soft)}
.side-join .action-button{margin-top:16px}
/* =========================================================
   14. 記事本文（ブロックエディターが出力する形にそのまま当てる）
   段落 p／見出し h2.wp-block-heading・h3／リスト ul.wp-block-list・ol.wp-block-list／
   画像 figure.wp-block-image＋figcaption.wp-element-caption／引用 blockquote.wp-block-quote＋cite／
   表 figure.wp-block-table／太字 strong／リンク a
   ========================================================= */
.prose{font-size:var(--fs-prose);line-height:2.05;letter-spacing:.02em;overflow-wrap:anywhere}
.prose>*+*{margin-top:1.55em}
.prose h2{margin-top:84px;padding-top:28px;border-top:1px solid var(--ink);font-size:26px;font-weight:650;line-height:1.6;letter-spacing:.02em;scroll-margin-top:calc(var(--header-h) + 24px)}
.prose>h2:first-child{margin-top:0}
.prose h2+*{margin-top:28px}
.prose h3{margin-top:56px;font-size:20px;font-weight:650;line-height:1.7;letter-spacing:.02em}
.prose h3+*{margin-top:14px}
.prose ul li,.prose ol li{position:relative}
.prose ul li{padding-left:1.3em}
.prose ul li::before{content:"";position:absolute;left:.25em;top:.86em;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.prose ol{counter-reset:ol}
.prose ol li{padding-left:2.1em;counter-increment:ol}
.prose ol li::before{content:counter(ol);position:absolute;left:0;top:.42em;display:grid;place-items:center;width:1.5em;height:1.5em;border:1px solid var(--ink);border-radius:50%;font-size:.72em;font-weight:650;line-height:1}
.prose li+li{margin-top:.45em}
.prose strong{font-weight:700}
.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.prose a:hover{text-decoration-thickness:2px}
.prose blockquote{padding:28px 32px;background:var(--pale);font-size:16px;line-height:2}
.prose blockquote p+p{margin-top:.8em}
.prose blockquote cite{display:block;margin-top:12px;font-size:12px;font-style:normal;line-height:1.8;color:var(--muted)}
.prose .wp-block-image img{width:100%;height:auto}
.prose figcaption{margin-top:12px;font-size:12px;line-height:1.8;color:var(--muted)}
.prose .wp-block-table{overflow-x:auto}
.prose table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;line-height:1.75;letter-spacing:.01em}
.prose th,.prose td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose thead th{border-bottom:1px solid var(--ink);background:var(--pale);font-size:12px;font-weight:650;letter-spacing:.04em}
.prose td:first-child{font-weight:600;white-space:nowrap}
/* スマホ：表が横にはみ出すときは、端に影を出して「横に動かせる」ことを伝える */
@media (max-width:640px){
  .prose .wp-block-table{background:
    linear-gradient(to right,#fff 30%,rgb(255 255 255/0)) left center/28px 100% no-repeat local,
    linear-gradient(to left,#fff 30%,rgb(255 255 255/0)) right center/28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgb(18 44 67/18%),transparent) left center/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgb(18 44 67/18%),transparent) right center/12px 100% no-repeat scroll}
}
@media (max-width:560px){
  .prose{font-size:16px;line-height:1.95}
  .prose h2{margin-top:64px;padding-top:22px;font-size:21px;line-height:1.6}
  .prose h2+*{margin-top:22px}
  .prose h3{margin-top:44px;font-size:18px}
  .prose blockquote{padding:22px 20px;font-size:15px}
}
/* =========================================================
   15. ページ下の帯（パンくず＋メディア内リンク）と社団共通フッター
   ========================================================= */
.media-foot{border-top:1px solid var(--line)}
.media-foot__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding-block:16px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;column-gap:.7em;font-size:12px;line-height:1.8;color:var(--muted)}
/* 間隔を gap で取り、折り返した行の頭が字下げされないようにする */
.crumbs li{display:flex;align-items:center}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.crumbs li+li::before{content:"›";margin-right:.7em;color:var(--muted)}
.crumbs [aria-current]{color:var(--ink)}
.media-foot__nav{display:flex;flex-wrap:wrap;gap:0 24px;font-size:12px;font-weight:600}
.media-foot__nav a{display:inline-flex;align-items:center;min-height:44px}
.media-foot__nav .media-foot__name{font-family:var(--font-title);font-weight:700;letter-spacing:.02em}
.site-footer{position:relative;max-width:var(--container);margin:0 auto;padding:48px var(--gutter) 36px}
.footer-brand{display:block;width:310px;max-width:100%;margin-bottom:34px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:0 30px;font-size:12px}
.site-footer nav a{display:inline-flex;align-items:center;min-height:40px}
.site-footer>p{margin-top:40px;font-size:11px;color:var(--muted)}
.back-top{position:absolute;right:var(--gutter);bottom:30px;display:inline-flex;align-items:center;min-height:44px;font-size:11px}
@media (max-width:560px){
  .site-footer{padding-top:34px;padding-bottom:24px}
  .footer-brand{width:260px;margin-bottom:22px}
  .site-footer nav{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;font-size:12px}
  .site-footer nav a{min-height:44px}
  .site-footer>p{margin-top:26px;padding-right:28px}
  .back-top{position:static;margin-top:6px}
  .media-foot__inner{flex-direction:column;align-items:flex-start;gap:0}
  .media-foot__nav{gap:0 20px}
  .crumbs a{min-width:44px}
  /* スマホ：「住まい」など短い語も、指で押せる幅にする */
}
/* ---- 動きを減らす設定への配慮 ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
  a.action-button:hover,.card__link:hover,.slide__link:hover,.rank-card:hover,.voice:hover,.writer:hover{transform:none!important}
}

/* ################ メディアのトップ（design/final/_src/top.src.html） ################ */
/* =========================================================
   メディアトップ（/mdryugaku/）だけで使うスタイル
   並び順：題字 → おすすめ → 先輩の声 → よく読まれている記事（見本） → 新着 →
           テーマの列 → テーマ・国から探す → 参加ブロック → MD留学.comとは
   ========================================================= */
/* ---- ファーストビュー：紺の文字の題字から始める（英語の小見出し・上のリード文なし） ---- */
/* ---- ファーストビュー：横長の線画を幅いっぱいに置き、左上の白い余白に題字と案内を重ねる（PC）。
   画像の左上は白い余白なので、画像を少し下げて置くと、題字の下に絵の線がかからない ---- */
.hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"stack";padding-top:28px;padding-bottom:64px}
.hero__copy{grid-area:stack;align-self:start;position:relative;z-index:1;max-width:46%;padding-top:clamp(12px,2vw,28px)}
.hero__title{font-family:var(--font-title);font-size:var(--fs-hero);font-weight:700;line-height:1.15;letter-spacing:.02em}
.hero__lead{max-width:25em;margin-top:24px;font-size:17px;line-height:2;letter-spacing:.02em}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__credit{margin-top:26px;font-size:12px;line-height:1.9;color:var(--soft)}
.hero__credit b{margin-right:1em;font-weight:650;color:var(--muted)}
.hero__credit span{display:inline-block}
.hero__credit a{display:inline-block;padding-block:12px;margin-block:-12px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.hero__visual{grid-area:stack;margin-top:clamp(80px,8vw,104px)}
.hero__visual img{display:block;width:100%;height:auto;aspect-ratio:1672/941}
/* 幅1150px以下：重ねると題字が絵にかかるので、題字 → 絵 → 案内 の縦並びにする */
@media (max-width:1150px){
  .hero{grid-template-areas:"title" "visual" "text";padding-top:32px;padding-bottom:56px}
  .hero__copy{display:contents}
  .hero__title{grid-area:title}
  .hero__text{grid-area:text}
  .hero__visual{grid-area:visual;margin-top:8px}
  .hero__lead{max-width:34em}
}
/* スマホ：絵は画面の端まで広げ、人物が小さくなりすぎないよう右側（人物と木）を中心に4:3で見せる */
@media (max-width:560px){
  .hero{padding-top:26px;padding-bottom:48px}
  .hero__title{font-size:44px}
  .hero__visual{margin:4px calc(var(--gutter) * -1) 0}
  .hero__visual img{aspect-ratio:4/3;object-fit:cover;object-position:85% 100%}
  .hero__lead{margin-top:22px;font-size:16px;line-height:2}
  .hero__actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:26px}
  .hero__actions a.action-button{width:100%}
  .hero__credit{margin-top:20px}
}
/* ---- おすすめの記事：手で動かすスライド（自動再生なし）。白いパネルが浮き出すカード ---- */
.pick{padding-top:80px}
.pick .sec-head{margin-bottom:30px}
.slider-ctrl{display:flex;align-items:center;gap:12px}
.slider-ctrl--foot{display:none}
.slider-count{margin-right:8px;font-size:13px;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums}
.slider-count b{font-weight:650;color:var(--ink)}
.circle-btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;transition:background-color 180ms ease,color 180ms ease,opacity 180ms ease}
.circle-btn svg{width:18px;height:18px}
.circle-btn[data-dir="-1"] svg{transform:rotate(180deg)}
.circle-btn[aria-disabled=true]{border-color:#b9c6ce;color:#8a9aa6;cursor:default}
/* 両端では押せない見た目にする */
.circle-btn:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .circle-btn:not([aria-disabled=true]):hover{background:var(--ink);color:#fff}
}
.slider__track{display:flex;gap:28px;overflow-x:auto;padding:8px max(var(--gutter),calc((100% - var(--content)) / 2)) 72px;scroll-padding-inline:max(var(--gutter),calc((100% - var(--content)) / 2));scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.slider__track::-webkit-scrollbar{display:none}
.slider__track:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
.slide{flex:0 0 88%;display:flex;scroll-snap-align:start}
.slide__link{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);width:100%;overflow:hidden;border-radius:var(--r-card);background:#fff;color:inherit;box-shadow:var(--sh-slide);transition:transform 260ms var(--ease),box-shadow 260ms ease}
.slide__link:hover{text-decoration:none}
.slide .thumb{height:100%;min-height:100%;aspect-ratio:auto}
.slide .thumb__word{max-width:46%}
.slide__text{display:flex;flex-direction:column;padding:44px 46px 34px}
.slide__title{margin-top:12px;font-size:clamp(21px,2vw,26px);font-weight:650;line-height:1.62;letter-spacing:.01em}
.slide__quote{margin-top:22px;font-size:16px;line-height:2;color:var(--soft)}
.slide__foot{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:32px}
.slide__who{display:flex;flex-direction:column;min-width:0}
.slide__name{font-size:13px;font-weight:650;line-height:1.6}
.slide__role{font-size:12px;line-height:1.6;color:var(--muted)}
.slide__date{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;font-size:12px;line-height:1.7;letter-spacing:.05em;color:var(--muted)}
.slide .more{width:40px;height:40px;flex-basis:40px;margin-left:4px}
@media (hover:hover) and (pointer:fine){
  .slide__link:hover{transform:translateY(var(--lift));box-shadow:0 34px 56px -34px rgb(18 44 67/52%),0 0 0 1px rgb(18 44 67/6%)}
  .slide__link:hover .slide__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
  .slide__link:hover .more{background:var(--ink);color:#fff}
}
@media (max-width:850px){
  .slide{flex-basis:86%}
  .slide__link{grid-template-columns:minmax(0,1fr)}
  .slide .thumb{height:auto;min-height:0;aspect-ratio:16/9}
  .slide__text{padding:24px 24px 22px}
}
@media (max-width:560px){
  .pick{padding-top:56px}
  .pick .sec-head .slider-ctrl{display:none}
  .slider-ctrl--foot{display:flex;justify-content:center;padding:0 var(--gutter) 52px}
  .slider__track{gap:14px;padding-bottom:22px}
  .slide__title{font-size:18px;line-height:1.7}
  .slide__quote{margin-top:12px;font-size:14px;line-height:1.95}
  .slide__foot{gap:10px;padding-top:20px}
  .slide__foot .avatar{width:36px;height:36px;font-size:15px}
  .slide__role{display:none}
  .slide .more{display:none}
  .slide__text{padding:20px 20px 22px}
}
/* ---- よく読まれている記事：王冠つきのカードを横に3枚（スマホは横スクロール） ---- */
.voices-sec{padding-bottom:0}
.ranking{padding-bottom:72px}
.ranking .sec-head{margin-bottom:28px}
.rank-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.rank-list>li{display:flex}
.latest{padding-bottom:var(--sec-y)}
@media (max-width:850px){
  .rank-list{display:flex;overflow-x:auto;padding:4px 0 16px;scroll-snap-type:x proximity;scrollbar-width:none}
  .rank-list::-webkit-scrollbar{display:none}
  .rank-list>li{flex:0 0 72%;scroll-snap-align:start}
}
@media (max-width:560px){
  .rank-list>li{flex-basis:86%}
}
.rank-card{position:relative;display:grid;grid-template-columns:32px 100px minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:18px 18px 18px 14px;border:1px solid var(--line-frame);border-radius:var(--r-card);background:#fff;color:inherit;transition:transform 260ms var(--ease),box-shadow 260ms ease}
.rank-card:hover{text-decoration:none}
.rank-card__no{display:flex;flex-direction:column;align-items:center;gap:4px}
.rank-card__crown{width:22px;height:22px;color:var(--gold)}
.rank-card__no b{font-size:28px;font-weight:650;line-height:1;font-variant-numeric:tabular-nums}
.rank-card__thumb .thumb{border-radius:var(--r-thumb)}
.rank-card__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.rank-card .meta{flex-wrap:nowrap;white-space:nowrap}
.rank-card__title{font-size:14px;font-weight:650;line-height:1.7}
.rank-card:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .rank-card:hover{transform:translateY(var(--lift));box-shadow:var(--sh-lift)}
  .rank-card:hover .rank-card__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
}
@media (max-width:1150px){
  .rank-card{grid-template-columns:32px minmax(0,1fr)}
  .rank-card__thumb{display:none}
}
/* ---- 新着の記事：社団の「ニュース」欄と同じ形（左に見出し、右に文字だけの行） ---- */
.latest{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.85fr);gap:40px 64px}
.latest__head .text-link{margin-top:26px}
.news-item{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:8px 24px;padding:24px 0 26px;border-bottom:1px solid var(--line);color:inherit}
.news-list li:first-child .news-item{padding-top:6px}
.news-item:hover{text-decoration:none}
.news-item:hover p{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.news-meta{display:flex;align-items:center;gap:24px;font-size:12px;letter-spacing:.05em}
.news-meta span{font-size:11px;color:var(--muted)}
.news-item p{font-size:16px;font-weight:500;line-height:1.85}
.row-arrow{grid-column:2;grid-row:1/3;align-self:center;font-size:20px}
@media (max-width:850px){
  .latest{grid-template-columns:minmax(0,1fr);gap:20px}
  .latest__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
  .latest__head .text-link{margin-top:0}
}
@media (max-width:560px){
  .news-item{padding:18px 0 20px;gap:8px 14px}
  .news-item p{font-size:15px;line-height:1.8}
  .news-meta{gap:16px}
}
/* ---- 先輩の声：記事の本文からそのまま引いた一言（引用符のアイコンは使わない） ---- */
.voices.track{padding-bottom:8px}
.voice{position:relative;display:flex;flex-direction:column;width:100%;padding:34px 36px 26px;border-radius:var(--r-card);background:var(--pale);transition:transform 260ms var(--ease),box-shadow 260ms ease}
.voice__q{margin-bottom:26px}
.voice__q p{font-size:clamp(17px,1.5vw,19px);font-weight:600;line-height:1.95;letter-spacing:.02em}
.voice__cap{display:grid;gap:12px;margin-top:auto;padding-top:20px;border-top:1px solid rgb(18 44 67/12%)}
.voice__by{display:flex;align-items:center;gap:12px}
.voice__who{display:flex;flex-direction:column;min-width:0}
.voice__name{font-size:13px;font-weight:650;line-height:1.6}
.voice__role{font-size:12px;line-height:1.6;color:var(--muted)}
.voice__src{display:block;padding-block:4px;font-size:12px;line-height:1.8;color:var(--soft)}
/* 上下の余白は、指で押せる高さ（44px）を確保するため */
.voice__src::after{content:"";position:absolute;inset:0;border-radius:inherit}
.voice__src:hover{text-decoration:none}
.voice:focus-within{outline:3px solid var(--teal);outline-offset:4px}
.voice__src:focus-visible{outline:none}
@media (hover:hover) and (pointer:fine){
  .voice:hover{transform:translateY(var(--lift));box-shadow:var(--sh-lift)}
  .voice:hover .voice__src{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
}
/* PC：2×2で全部見せる。タブレット以下：横スクロール */
@media (min-width:851px){
  .voices.track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
}
@media (max-width:560px){
  .voice{padding:26px 22px 20px}
  .voice__q p{font-size:16px;line-height:1.9}
  .voice__q{margin-bottom:20px}
}
/* ---- テーマで読む：テーマごとの横並びの列＋右上に「一覧を見る」 ---- */
.rows__intro{margin-bottom:8px}
.row{margin-top:44px}
.row__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.row__title{display:flex;align-items:center;gap:14px;font-size:var(--fs-row);font-weight:650;line-height:1.5;letter-spacing:.02em}
.row__state{font-size:12px;font-weight:650;letter-spacing:.04em;color:var(--teal)}
/* 列の途中の大きい寄稿募集は、テーマ一覧と同じ共通部品（tokens.css の .recruit--wide） */
@media (max-width:560px){
  .row{margin-top:40px}
  .row__head{gap:10px;margin-bottom:6px}
  .row__title{gap:10px;font-size:18px;white-space:nowrap}
  .row__title .theme-icon{width:36px;height:36px}
  .row__head .text-link{font-size:13px;gap:16px}
}
/* 記事が0本のテーマ（キャリア・研究）は、列の代わりに横長の募集枠にする */
.recruit-wide{display:grid;grid-template-columns:minmax(0,264px) minmax(0,1fr) auto;gap:40px;align-items:center;padding:24px 32px 24px 24px;border:1px dashed var(--line-dash);border-radius:var(--r-card);background:rgb(255 255 255/45%)}
.recruit-wide .thumb{border-radius:var(--r-thumb)}
.recruit-wide__title{margin-top:10px;font-size:21px;font-weight:650;line-height:1.6}
.recruit-wide__text{margin-top:8px;font-size:14px;line-height:1.95;color:var(--soft)}
.recruit-wide__topics{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:12px;font-size:13px;line-height:1.8;color:var(--soft)}
.recruit-wide__topics li{position:relative;padding-left:13px}
.recruit-wide__topics li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--teal)}
@media (max-width:1150px){
  .recruit-wide{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
  .recruit-wide>a.action-button{grid-column:2}
}
@media (max-width:640px){
  .recruit-wide{grid-template-columns:minmax(0,1fr);gap:20px;padding:24px 20px}
  .recruit-wide>.thumb{display:none}
  .recruit-wide>a.action-button{grid-column:1;width:100%}
  .recruit-wide__title{font-size:18px}
}
/* ---- テーマ・国から探す ---- */
.find__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:52px}
.find__h{padding-bottom:14px;border-bottom:1px solid var(--ink);font-size:15px;font-weight:650;letter-spacing:.06em}
.tiles,.country-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
.find__fine{align-self:center;margin:0;padding:18px 0}
.tile{display:grid;grid-template-columns:56px minmax(0,1fr) 16px;grid-template-rows:auto auto;gap:2px 14px;align-items:center;height:100%;padding:18px 0;border-bottom:1px solid var(--line);color:inherit}
.tile:hover{text-decoration:none}
.tile:hover .tile__name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.tile__art{grid-row:1/3;width:56px;height:56px}
.tile__name{align-self:end;font-size:16px;font-weight:650;line-height:1.5}
.tile__state{margin-left:10px;font-size:12px;font-weight:650;letter-spacing:.04em;color:var(--teal)}
.tile__desc{grid-column:2;align-self:start;font-size:12px;line-height:1.7;color:var(--muted)}
.tile__arrow{grid-column:3;grid-row:1/3;font-size:16px}
.country-list a{display:grid;grid-template-columns:56px minmax(0,1fr) 16px;gap:14px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);color:inherit}
.country-list a:hover{text-decoration:none}
.country-list a:hover .country__name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.country__badge{display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--ink);border-radius:50%;font-size:19px;font-weight:650;line-height:1}
.country__name{font-size:17px;font-weight:650;line-height:1.5}
.country__name small{display:block;font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--muted)}
@media (max-width:1150px){
  .tiles,.country-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:850px){
  .find__grid{grid-template-columns:minmax(0,1fr);gap:44px}
}
@media (max-width:560px){
  .tiles,.country-list{grid-template-columns:minmax(0,1fr)}
  .tile,.country-list a{grid-template-columns:48px minmax(0,1fr) 16px;padding:14px 0}
  .tile__art,.country__badge{width:48px;height:48px}
}
/* ---- MD留学.comとは／書いている人 ---- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px 56px}
.about__text{font-size:17px;line-height:2.1}
.dl{margin-top:32px;border-top:1px solid var(--line)}
.dl>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;padding:20px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.9}
.dl dt{padding-top:2px;font-size:13px;font-weight:600;color:var(--muted)}
.dl dd a{display:inline-block;padding-block:9px;margin-block:-9px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
/* 法人名を途中で折り返さず、押せる高さも取る */
.about__h{margin-top:44px;font-size:19px;font-weight:650;line-height:1.5;letter-spacing:.02em}
.writers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:18px}
.writers>li{display:flex}
.writer{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;align-items:center;width:100%;padding:20px 22px;border:1px solid var(--line-frame);border-radius:var(--r-card);background:#fff;color:inherit;transition:transform 260ms var(--ease),box-shadow 260ms ease}
.writer:hover{text-decoration:none}
.writer .avatar{grid-row:1/3}
.writer__text{display:flex;flex-direction:column;min-width:0}
.writer__name{font-size:15px;font-weight:650;line-height:1.5}
.writer__role{font-size:12px;line-height:1.7;color:var(--muted)}
.writer__count{grid-column:2;font-size:12px;font-weight:600;line-height:1.8}
.writer:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .writer:hover{transform:translateY(var(--lift));box-shadow:var(--sh-lift)}
  .writer:hover .writer__count{text-decoration:underline;text-underline-offset:4px}
}
.about__contrib{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:20px;font-size:14px;line-height:1.9;color:var(--soft)}
@media (max-width:850px){
  .about{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .about__text{font-size:15px;line-height:2}
  .dl>div{grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 0;font-size:14px}
  .writers{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* ################ 記事ページ（design/final/_src/article.src.html） ################ */
/* =========================================================
   記事ページ（/mdryugaku/{スラッグ}/）だけで使うスタイル
   ========================================================= */
/* ---- タイトルまわり：タイトルから始め、国・テーマ・日付・書き手はその下へ ---- */
.post-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:56px;align-items:center;padding-top:44px;padding-bottom:64px}
.post-title{font-size:var(--fs-h1-post);font-weight:650;line-height:1.6;letter-spacing:.02em}
.post-terms{display:flex;flex-wrap:wrap;align-items:center;margin-top:20px;font-size:13px;line-height:1.6;letter-spacing:.04em;color:var(--muted)}
.post-terms a{display:inline-flex;align-items:center;min-height:32px;padding-inline:2px}
.post-terms a+a::before{content:"／";margin:0 .45em;color:var(--muted)}
.post-terms .is-main{color:var(--teal);font-weight:600}
.post-meta{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:6px;font-size:12px;line-height:1.8;letter-spacing:.05em;color:var(--muted)}
.byline{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.byline__name{font-size:14px;font-weight:650;line-height:1.5}
.byline__role{margin-top:2px;font-size:12px;line-height:1.6;color:var(--muted)}
.post-cover .thumb{border:1px solid var(--line-frame)}
.post-cover .thumb__word{max-width:46%}
@media (max-width:850px){
  .post-head{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:36px;padding-bottom:44px}
}
@media (max-width:560px){
  .post-head{padding-top:28px;gap:24px}
  .post-title{font-size:24px;line-height:1.6}
  .post-terms{margin-top:14px;font-size:12px}
  .post-terms a{min-height:44px;min-width:44px;justify-content:center}
  /* 「住まい」など短い語も、指で押せる幅にする */
  .post-meta{margin-top:0}
  .post-cover{margin-inline:calc(var(--gutter) * -1)}
  .post-cover .thumb{border-width:1px 0}
}
/* ---- 2段組：本文720px＋右に追従する目次と参加の案内 ---- */
.post-layout{display:grid;grid-template-columns:minmax(0,720px) 288px;justify-content:space-between;gap:64px;padding-bottom:96px}
.side-sticky{position:sticky;top:calc(var(--header-h) + 32px)}
.toc{padding:22px 0 16px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.toc__title{font-size:14px;font-weight:650;letter-spacing:.06em}
.toc ol{margin-top:8px;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;padding:8px 0;font-size:14px;line-height:1.7;color:var(--soft)}
.toc a::before{content:counter(toc);padding-top:1px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.toc a:hover{text-decoration:none;color:var(--ink)}
.toc a.is-active{font-weight:650;color:var(--ink)}
.toc a.is-active::before{color:var(--ink)}
.toc--inline{display:none;margin-bottom:44px}
.side-join{margin-top:28px}
@media (max-width:1000px){
  .post-layout{grid-template-columns:minmax(0,1fr);gap:0;max-width:calc(720px + 2 * var(--gutter));margin-inline:auto}
  .post-side{display:none}
  .toc--inline{display:block}
}
@media (max-width:560px){
  .toc a{min-height:44px;align-content:center;padding:10px 0}
}
/* 記事中の案内の上下の余白（本文の流れから少し離す） */
.prose .inline-join{margin-block:3.4em}
/* ---- 記事の終わり：免責・書き手 ---- */
.disclaimer{display:flex;gap:12px;margin-top:64px;padding:20px 22px;background:var(--frame);font-size:13px;line-height:1.9;color:var(--soft)}
.disclaimer svg{flex:0 0 20px;width:20px;height:20px;margin-top:2px;color:var(--muted)}
.author{display:grid;grid-template-columns:72px minmax(0,1fr);gap:24px;margin-top:48px;padding:32px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.author__label{font-size:12px;font-weight:650;letter-spacing:.06em;color:var(--muted)}
.author__name{margin-top:6px;font-size:18px;font-weight:650;line-height:1.6}
.author__name span{margin-left:12px;font-size:12px;font-weight:500;color:var(--muted)}
.author__bio{margin-top:10px;font-size:14px;line-height:2}
/* モックの仮の文であることの注記 */
.author__links{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:14px}
@media (max-width:560px){
  .author{grid-template-columns:52px minmax(0,1fr);gap:16px}
  .author .avatar--l{width:52px;height:52px;font-size:21px}
  .author__name span{display:block;margin:2px 0 0}
}
/* ---- 関連記事（薄い帯の上に白いカード） ---- */
.related .sec-head{margin-bottom:36px}
.related__back{margin-top:52px}
@media (max-width:560px){
  .related__back{margin-top:32px}
  .related__back a.action-button{width:100%}
}

/* ################ 一覧ページ（design/final/_src/theme.src.html） ################ */
/* =========================================================
   テーマ別一覧（/mdryugaku/theme/housing/）だけで使うスタイル
   記事が1本しかない今の状態を、そのまま見せている
   ========================================================= */
.list-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:64px;align-items:center;padding-top:44px;padding-bottom:48px}
.list-title{font-size:var(--fs-h1-list);font-weight:650;line-height:1.4;letter-spacing:.02em}
.list-lead{max-width:32em;margin-top:18px;font-size:16px;line-height:2.05}
.list-cover{position:relative;aspect-ratio:16/9;background:var(--tint);color:var(--accent);overflow:hidden}
.list-cover svg{position:absolute;inset:0;width:100%;height:100%}
.list-head .list-icon{display:none}
@media (max-width:850px){
  .list-head{grid-template-columns:minmax(0,1fr) 220px;gap:32px}
}
/* スマホ：大きな絵は出さず、タイトルの右に丸いテーマアイコンを置く */
@media (max-width:560px){
  .list-head{position:relative;grid-template-columns:minmax(0,1fr);gap:0;padding-top:28px;padding-bottom:30px}
  .list-title{padding-right:76px;font-size:34px}
  .list-lead{font-size:15px;line-height:2}
  .list-head .list-cover{display:none}
  .list-head .list-icon{display:block;position:absolute;top:22px;right:var(--gutter);width:60px;height:60px}
}
/* 絞り込み（テーマ・国）。いまの一覧で1本以上ある選択肢だけを出す。ピルは操作の部品にだけ使う */
.filter{display:grid;gap:12px;padding-block:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filter__row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center}
.filter__label{font-size:12px;font-weight:650;letter-spacing:.06em;color:var(--muted)}
.filter__chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:6px 18px;border:1px solid #b9c6ce;border-radius:var(--r-pill);background:#fff;font-size:13px;font-weight:600;line-height:1.5;color:var(--ink)}
a.chip:hover{text-decoration:none;border-color:var(--ink)}
.chip[aria-current]{border-color:var(--ink);background:var(--ink);color:#fff}
.chip:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
@media (max-width:560px){
  .filter__row{grid-template-columns:minmax(0,1fr);gap:8px}
  .filter__chips{flex-wrap:nowrap;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);overflow-x:auto;scrollbar-width:none}
  .filter__chips::-webkit-scrollbar{display:none}
  .chip{flex-shrink:0;min-height:44px;padding:6px 16px}
}
/* 一覧：3列。記事が3本に満たないうちは、残りの枠を寄稿募集に使う */
.list{padding-block:44px 80px}
.grid3>li.is-x2{grid-column:span 2}
/* 横長の寄稿募集（.recruit--wide）は tokens.css の共通部品 */
@media (max-width:850px){
  .grid3>li.is-x2{grid-column:span 1}
}
@media (max-width:640px){
  .list .grid3{gap:20px}
  .list .grid3>li.is-x2{grid-column:1}
}
/* ページ送り（13本以上で出す。いまは見本） */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pager a,.pager span{display:grid;place-items:center;min-width:44px;height:44px;padding:0 6px;border:1px solid #b9c6ce;border-radius:50%;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.pager [aria-current]{border-color:var(--ink);background:var(--ink);color:#fff}
.pager .pager__gap{border:0;min-width:24px}
.pager .pager__next{display:inline-flex;gap:12px;margin-left:12px;padding:0 10px 0 20px;border-color:var(--ink);border-radius:var(--r-pill)}
.pager .pager__next svg{width:16px;height:16px}
.pager a:hover{text-decoration:none;border-color:var(--ink)}
/* 近いテーマの記事 */
.others .sec-head{margin-bottom:36px}

/* ################ WordPress で使うための追加（plugin/dev/css/wp-additions.css） ################ */
/* =========================================================
   WordPress で使うための追加（モックにない部分）
   - モックの CSS（tokens.css と各ページの style）はそのまま上に写している
   - ここは「WordPress の管理バー」「記事が少ないとき・写真がないときの組み方」
     「書き手が本文で使うブロック」など、本番でだけ必要になる部分
   ========================================================= */

/* ---- ログイン中に出る管理バーの分だけ、追従するヘッダーと目次を下げる ---- */
.admin-bar .site-header{top:32px}
.admin-bar .side-sticky{top:calc(var(--header-h) + 64px)}
:root:has(body.admin-bar){scroll-padding-top:calc(var(--header-h) + 56px)}
.admin-bar .prose h2{scroll-margin-top:calc(var(--header-h) + 56px)}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
@media (max-width:600px){.admin-bar .site-header{top:0}}
/* 管理バーのアカウント画像（class="avatar"）に、このページのアバターの見た目がかからないようにする */
#wpadminbar .avatar{border-radius:0;background:none}

/* WordPress の標準の「画面には出さず、読み上げだけする文字」 */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- 管理者にだけ出す「参加フォームのURLが未設定です（設定画面へ）」 ---- */
.mdr-admin-note{display:inline-block;max-width:100%;padding:10px 14px;border:1px dashed var(--gold);background:#fffdf3;font-size:13px;line-height:1.7;color:var(--ink)}
.mdr-admin-note a{text-decoration:underline;text-underline-offset:3px}
.mdr-admin-note__sub{display:block;font-size:11px;color:var(--muted)}
.mdr-admin-note--s{padding:4px 10px;font-size:11px;white-space:nowrap}
.join .mdr-admin-note{background:rgb(255 255 255/12%);border-color:#fff;color:#fff}
.join .mdr-admin-note__sub{color:#fff}
.media-bar .mdr-admin-note{grid-area:btn;margin:0}
.side-join .mdr-admin-note{margin-top:16px}

/* ---- ファーストビュー：設定で別の絵を選んだとき、縦横の比率が違っても絵がゆがまないようにする ---- */
.hero__visual img{object-fit:cover}

/* ---- ファーストビュー：絵が無いとき（同梱の絵も読み込めないときの予備） ---- */
.hero.hero--noimg .hero__copy{max-width:none}
.hero.hero--noimg .hero__lead{max-width:34em}

/* ---- おすすめが1本だけのとき：スライドを横幅いっぱいにする ---- */
.pick--single .slide{flex-basis:100%}

/* ---- 新着の上の余白（「よく読まれている記事」を出さないときも、上の欄との間をあける） ---- */
.latest{padding-top:var(--sec-y)}
.ranking + .latest{padding-top:0}

/* ---- テーマで読む：記事0本のテーマの横長の募集枠（モックの style 属性を移したもの） ---- */
.row__recruit{padding-top:8px}

/* ---- 参加ブロック：写真がないときは、見出し・説明・参加できる方を縦に並べる ---- */
.join__inner.join__inner--noimg{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "body" "more"}
.join__inner--noimg .join__title{align-self:start}
.join__inner--noimg .join__credit{margin-top:18px}
@media (max-width:1000px){.join__inner.join__inner--noimg{grid-template-areas:"title" "body" "more"}}
@media (max-width:560px){
  .join__inner.join__inner--noimg{padding-block:56px}
  /* 運営の表記は、写真があるときは端まで広げた写真の下に置くので左右に余白を付けているが、
     写真がないときは説明文のすぐ下なので、説明文と左端をそろえる */
  .join__inner--noimg .join__credit{padding-inline:0}
}

/* ---- とても幅の狭いスマホ（374px以下。iPhone SE 第1世代など）で、はみ出しを防ぐ ----
   デザインは幅390pxで確かめたもの。幅320pxでは次の2か所が画面の右端からはみ出すので、ここだけ詰める
   （375px以上の見た目は変えない） */
@media (max-width:374px){
  /* 記事途中の案内：丸いアイコンを外して文字の幅を広げる（「コミュニティについて見る ↓」が枠の外にはみ出すため） */
  .inline-join{grid-template-columns:minmax(0,1fr)}
  .inline-join__icon{display:none}
  /* トップの「テーマで読む」の列の見出し：「渡航準備・手続き」と「一覧を見る ↗」が1行に収まるように少し小さくする */
  .row__title{font-size:16px}
  .row__head .text-link{gap:10px}
}

/* ---- 「MD留学.comとは」の本文（設定画面で入れた文章。段落・リンク・箇条書きなど） ---- */
.about__text>*+*{margin-top:1em}
.about__text a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.about__text strong{font-weight:700}
.about__text ul{list-style:disc;padding-left:1.4em}
.about__text ol{list-style:decimal;padding-left:1.6em}
.about__text h2,.about__text h3,.about__text h4{margin-top:1.6em;font-size:19px;font-weight:650;line-height:1.6}

/* ---- 一覧ページ：絵のない見出し（記事一覧）と、国・書き手の丸い印 ---- */
.list-head.list-head--plain{grid-template-columns:minmax(0,1fr)}
.list-role{margin-top:12px;font-size:13px;line-height:1.7;color:var(--muted)}
.list-cover--badge{display:grid;place-items:center;background:var(--frame)}
.list-cover--badge>span:not(.avatar){display:grid;place-items:center;width:34%;aspect-ratio:1;border:1px solid var(--ink);border-radius:50%;background:#fff;font-size:clamp(40px,5vw,72px);font-weight:650;line-height:1}
.avatar.avatar--xl{width:34%;height:auto;aspect-ratio:1;font-size:clamp(40px,5vw,72px)}
.list-icon--badge{border:1px solid var(--ink);border-radius:50%;background:#fff;font-weight:650;line-height:1}
@media (max-width:560px){
  .list-head .list-icon.avatar,.list-head .list-icon--badge{display:grid;place-items:center;font-size:24px}
}

/* ---- 一覧ページ：ページ送り（モックの見本の位置） ---- */
.list .pager{margin-top:72px}
.pager .pager__prev{display:inline-flex;gap:12px;margin-right:12px;padding:0 20px 0 10px;border-color:var(--ink);border-radius:var(--r-pill)}
.pager .pager__prev svg{width:16px;height:16px;transform:rotate(180deg)}
@media (max-width:560px){.list .pager{margin-top:48px}}

/* ---- 記事本文：書き手が使うことのあるブロックの見た目（モックにない部分） ---- */
.prose h4{margin-top:40px;font-size:17px;font-weight:650;line-height:1.7}
.prose h4+*{margin-top:10px}
.prose hr,.prose .wp-block-separator{height:0;margin-block:2.6em;border:0;border-top:1px solid var(--line)}
.prose .has-text-align-center{text-align:center}
.prose .has-text-align-right{text-align:right}
.prose .wp-block-image.aligncenter,.prose .aligncenter{margin-inline:auto}
.prose iframe,.prose video{max-width:100%}
.prose .wp-block-embed iframe{width:100%;height:auto;aspect-ratio:16/9}
/* 書き手が自分で組んだ「mdr-inline-join」のブロック（段落の目印以外）は、記事途中の案内と同じ薄い面にする */
.prose div.mdr-inline-join{padding:26px 28px;background:var(--pale)}

/* =========================================================
   検証で見つかった崩れの直し（モックにない幅・記事数の組み合わせ）
   ========================================================= */

/* ---- 日本語の改行を文節で区切る対象を広げる（モックの指定に入っていなかった説明文・注記・募集の文など） ----
   「集めてい／ます。」「待ち時／間」のように、単語の途中や1〜2字だけで行が折れるのを防ぐ */
.list-lead,.list-role,.join__lead,.join__note,.about__text,.about__contrib,.find__fine,.tile__desc,.disclaimer p,
.recruit__label,.recruit__asks-label,.recruit__topics,.recruit-wide__title,.recruit-wide__topics{word-break:auto-phrase;text-wrap:pretty}

/* ---- 一覧ページ：記事0本のとき、横長の寄稿募集を1行ぶん全部に広げる ----
   テンプレートは is-x3 を出すが、モックには記事1本（is-x2）の例しかなく、is-x3 の指定がなかった。
   指定がないと左の1枠に押し込まれ、ボタンや文字が1〜2字ずつ縦に折れる（2列になる幅でも1行全部を使う） */
.grid3>li.is-x3{grid-column:1/-1}

/* ---- 横長の寄稿募集（.recruit--wide）：置かれた枠の幅で組み方を変える ----
   枠が540px未満のときは、左右2段をやめて縦に並べる（スマホ・タブレットと同じ組み方）。
   画面の幅ではなく枠の幅で決めるのは、同じ部品がトップの列（1〜3枠ぶん）と一覧（2〜3枠ぶん）に置かれ、
   画面の幅が同じでも枠の幅が違うため（例：一覧の860px、トップの1151px付近で2段だと文字が細切れになる） */
.grid3>li.is-x2,.grid3>li.is-x3,.track>li.is-x2,.track>li.is-x3{container:mdr-recruit/inline-size}
@container mdr-recruit (max-width:539px){
  .recruit--wide{display:flex;padding:26px 22px 22px}
  .recruit__asks{margin-top:18px}
  .recruit--wide .recruit__title{font-size:18px}
  /* トップの列の中では、隣のカードと高さをそろえるため、説明文を省いて行を詰める（モックの850px以下と同じ） */
  .track .recruit--wide .recruit__lead,.track .recruit--wide .recruit__asks-label{display:none}
  .track .recruit--wide .ask{padding:3px 0 3px 14px;border:0;font-size:13px;font-weight:500;line-height:1.7;color:var(--soft)}
  .track .recruit--wide .ask::before{left:0;top:.72em;width:5px;height:5px;border:0;background:var(--teal)}
  /* 列の中では、ボタンを枠の下端・左にそろえる（隣のカードの「→」の高さに合わせる） */
  .track .recruit--wide .recruit__actions{align-self:flex-start;margin-top:auto;padding-top:22px}
}
@container mdr-recruit (max-width:399px){
  /* さらに細い枠（スマホ・タブレットの列）では、ボタンを枠の幅いっぱいにする
     （右寄せの小さいボタンのまま2行に折れると窮屈に見えるため。スマホの横長の募集枠と同じ形） */
  .track .recruit--wide .recruit__actions{align-self:stretch}
  /* 左右の余白を少し詰めて、幅360pxのスマホでも「体験記を寄稿する」が1行に収まるようにする */
  .track .recruit--wide .recruit__actions .action-button{width:100%;gap:12px;padding-left:18px}
}

/* ---- トップの「テーマで読む」の列：幅851〜1150px（iPad の横向き、幅を狭めたパソコンなど）では3枚ずつ見せる ----
   4枚並べるとカード1枚が約200〜240pxになり、題名が単語の途中で折れたり、書き手名が「→」の丸に重なったりするため、
   カード1枚の幅を約240px以上に保つ。記事2本の列の募集枠は1枠ぶん、記事1本の列の募集枠は2枠ぶんにして、3枠でちょうど収める
   （記事3本の列は、4枚目の募集枠を横にずらすと見える。右端に少しのぞく） */
@media (min-width:851px) and (max-width:1150px){
  .track>li,.track>li.is-x2{flex-basis:calc((100% - 2 * var(--gap)) / 3)}
  .track>li.is-x3{flex-basis:calc((100% - 2 * var(--gap)) / 3 * 2 + var(--gap))}
}

/* ---- 記事カードの下：書き手名が長い・カードが細いときも、右の「→」の丸に重ならないよう、末尾を「…」にする ---- */
.card__who{flex:0 1 auto}
.card__name{overflow:hidden;text-overflow:ellipsis}

/* ---- 「アメリカ ／ 住まい」の区切りの斜線：折り返したときに行の頭に来ないよう、前の語の後ろに付ける ---- */
.meta>span+span::before{content:none}
.meta>span:not(:last-child)::after{content:"／";margin:0 .4em;color:var(--muted)}

/* ---- おすすめのスライドの下（書き手・公開日・「→」）：スライドの文字の欄が細い幅（851〜1100pxなど） ----
   書き手の欄が26〜80pxに押し込まれて「執／筆／者A」のように縦に折れていたので、
   公開日・読了の目安と「→」の丸（slide__end）をまとめて次の段（右寄せ）に回す。名前と立場は折り返さず、長ければ「…」 */
.slide__foot{flex-wrap:wrap;row-gap:14px}
.slide__who{flex:0 1 auto}
.slide__name,.slide__role{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.slide__end{display:flex;align-items:center;gap:14px;margin-left:auto}

/* ---- ファーストビュー：設定で写真を選んだとき（hero--photo）は、パソコンでも「題字 → 写真 → 案内」の縦並び ----
   重ねる組み方は、同梱の線画の左上が白い余白であることが前提。普通の写真に重ねると、リード文・ボタン・運営の行が読めなくなるため。
   （モックの1150px以下と同じ指定。1150px以下と560px以下は、モックの指定がそのまま効く） */
@media (min-width:1151px){
  .hero.hero--photo{grid-template-areas:"title" "visual" "text";padding-top:32px;padding-bottom:56px}
  .hero--photo .hero__copy{display:contents}
  .hero--photo .hero__title{grid-area:title}
  .hero--photo .hero__text{grid-area:text}
  .hero--photo .hero__visual{grid-area:visual;margin-top:8px}
  .hero--photo .hero__lead{max-width:34em}
}
/* スマホで4:3に切り抜くときの中心：モックの「右下（人物と木）」は同梱の線画に合わせた位置なので、写真は真ん中を見せる */
@media (max-width:560px){
  .hero--photo .hero__visual img{object-position:50% 50%}
}

/* ---- 記事ページ：右の目次が消える幅（1000px以下）では、本文の列をタイトルと同じ左端にそろえる ----
   モックは本文の列（720px）を中央に寄せていたため、タイトルの左端（40px）と本文の左端（1000pxで140px）がずれて、字下げのように見えた */
@media (max-width:1000px){
  .post-layout{margin-inline:0}
}

/* ---- 記事本文：見出し2のすぐ下に見出し3が来るとき、間が空きすぎないようにする（見出し3の上の余白56pxを詰める） ---- */
.prose h2+h3{margin-top:20px}
@media (max-width:560px){.prose h2+h3{margin-top:16px}}

/* ---- 記事途中の案内のリンク：本文のリンクの下線（.prose a）が効いて、テキストリンクの下罫と二重線になるのを防ぐ ---- */
.prose .inline-join a{text-decoration:none}