/* 女性向けWebデザインスクール 4校の比較ランキング
   見た目は案B（白とピンクと紺）。6問の箱だけ案A の作り（白い箱・太い枠・大きな Q・濃いボタン）。本人 2026-10-30
   1版目（ベージュとオレンジ）は「ダサい・AI感・おばあちゃんぽい」で作り直した。避けること：丸い小札をたくさん並べる・ベージュの地・水玉・手書き風の字・全部同じ大きさ
   使う型：白地に色1つ（ピンク）＋紺の文字、巨大な数字、人物の絵が主役、丸や斜めの形を重ねて境目をまたぐ（works\_catalog\essence の「かっこいいサイトの型」）
   骨組みの参考は README 4章の参考サイト A・D（開いてすぐ1位・並べ替えとしぼりこみ）、カードは C・E。考え方だけを借りる */

:root{
  --white:#FFFFFF;
  --navy:#1E2A4A;
  --navy-2:#2B3A63;
  /* 赤っぽいピンクは「申し込み」のボタンと文字のリンクだけに使う。押せる所が一目で分かるように（本人 2026-10-30）
     ページの中の操作（6問・タブ・しぼりこみ）は紺。飾りは --pink-d */
  --rose:#B02E48;        /* 申し込みのボタン・リンク（白地で 6.3・薄いピンク地で 5.3） */
  --pink-d:#E8899A;      /* 飾り（チェックの印・点・大きな Q）。文字には使わない */
  --pink:#F8D3D6;        /* 面・丸 */
  --pink-l:#FCECEE;      /* 薄い面（カードの中の箱） */
  --mist:#EEF1F6;        /* 紺を薄めた背景（ランキング・運営者より）。中のピンクの箱と同じ色だとのっぺり見えるため（本人 2026-10-30 案A） */
  --text:#1E2A4A;
  --sub:#5A6378;
  --line:#E9DADD;
  --nf:#646B7C;          /* 公式ページで見つけられなかった所 */
  --radius:18px;
  --side:16px;
  --max:720px;
  --num:"Montserrat","Noto Sans JP",sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:16px;line-height:1.8;letter-spacing:.02em;overflow-wrap:anywhere;line-break:strict;
}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
a{color:var(--rose)}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none !important}
.nw{white-space:nowrap}

/* 見出し・答え・ボタンは <budoux-ja> が言葉の切れ目に印を入れ、balance で行の長さをそろえる（AI スクールのページと同じ） */
.q-title,.opt,.sec-h,.catch,.btn-cta,.asks li,.other{text-wrap:balance}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--side)}
.band{padding:64px 0;position:relative}
.band-mist{background:var(--mist)}
/* 紺の帯。上の辺を斜めに切って、前のセクションに食い込ませる */
.band-navy{background:var(--navy);color:#fff;margin-top:24px}
.band-navy::before{content:"";position:absolute;left:0;right:0;top:-26px;height:28px;background:var(--navy);clip-path:polygon(0 100%,100% 0,100% 100%)}

/* ---------- PR ---------- */
.pr-bar{display:flex;align-items:center;gap:8px;padding:6px var(--side);background:var(--white);border-bottom:1px solid #EEE;font-size:12px;color:var(--sub)}
.pr{display:inline-block;border:1px solid var(--sub);border-radius:3px;padding:0 5px;font-size:10px;font-weight:700;line-height:1.6}

/* ---------- 最初の画面 ---------- */
.fv{overflow:hidden}
.fv-inner{position:relative;max-width:var(--max);margin:0 auto;padding:14px var(--side) 16px;min-height:290px}
.fv-circle{position:absolute;right:-78px;top:-24px;width:300px;height:300px;border-radius:50%;background:var(--pink)}
.fv-ring{position:absolute;left:-46px;bottom:-70px;width:150px;height:150px;border-radius:50%;border:18px solid var(--pink-l)}
.fv-art{position:absolute;right:8px;top:28px;width:164px}
.fv-art img{width:100%;border-radius:50%}
.fv-vert{position:absolute;right:10px;top:198px;writing-mode:vertical-rl;font-family:var(--num);font-weight:600;font-size:10px;letter-spacing:.25em;line-height:1;color:var(--navy)}
.fv-txt{position:relative}
.fv-date{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--navy)}
.fv-title{display:flex;flex-direction:column;margin-top:30px;line-height:1.15;font-weight:900}
.t-sub{align-self:flex-start;font-size:14px;font-weight:700;color:var(--navy);background:var(--pink);padding:1px 10px}
.t-main{font-size:34px;letter-spacing:.01em;margin-top:4px;text-shadow:0 0 6px #fff,0 0 2px #fff}
.t-end{display:flex;align-items:center;gap:8px;margin-top:12px}
.t-n{flex:0 0 66px;height:66px;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--num);font-weight:900;font-size:42px;display:flex;align-items:center;justify-content:center;line-height:1}
.t-w{font-size:22px;line-height:1.3}
.t-w small{display:block;font-size:13px;font-weight:700;color:var(--sub)}
.fv-catch{font-size:13px;font-weight:500;margin-top:14px}

/* ---------- 6問（案A の作り：白い箱・太い枠・大きな Q・濃いボタン） ---------- */
.quiz-band{padding:6px 0 10px;position:relative;z-index:1}
.quiz{border:2px solid var(--navy);background:var(--white);padding:10px 10px 10px 12px}
.quiz-closed{display:flex;align-items:center;gap:10px}
.q-mark{font-family:var(--num);font-weight:900;font-size:32px;line-height:1;color:#D9667A} /* 大きな文字なので白地で 3 以上（3.4）。申し込みの赤っぽいピンクより明るくして分ける */
.quiz-lead{flex:1;font-size:14px;font-weight:700;line-height:1.5}
.quiz-note{display:block;font-size:11px;font-weight:400;color:var(--sub);margin-top:1px}
.btn-small{flex:0 0 auto;background:var(--navy);color:#fff;border:0;padding:11px 12px;font-size:14px;font-weight:700;line-height:1.3;cursor:pointer}
.btn-small:active{transform:translateY(1px)}
.q-head{display:flex;justify-content:space-between;align-items:center}
.q-no{font-family:var(--num);font-size:26px;font-weight:900;color:var(--navy);line-height:1.2}
.q-step{font-family:var(--num);font-size:13px;font-weight:600;color:var(--sub)}
.q-title{font-size:18px;font-weight:900;margin:6px 0 12px;line-height:1.5}
.opts{display:grid;gap:8px}
.opt{display:block;width:100%;text-align:left;background:var(--white);border:2px solid var(--line);padding:12px 14px;font-weight:700;line-height:1.5;cursor:pointer}
.opt{transition:background-color .15s,border-color .15s}
.opt:hover{border-color:var(--navy)}
.opt.is-on{border-color:var(--navy);background:var(--pink-l)}
.q-back{margin-top:10px;text-align:center}
.quiz-done{display:grid;gap:4px;text-align:center}
.quiz-done .quiz-lead{font-size:15px}
.quiz-done .quiz-note{display:flex;gap:16px;justify-content:center}
.link-btn{background:none;border:0;padding:0;color:var(--rose);text-decoration:underline;cursor:pointer;font-size:13px}

/* ---------- 見出し ---------- */
/* のっぺり対策（本人 2026-10-30「その方向でページ全体に」）
   ①地の色で白い箱を浮かせる ②大きさの差を大きく（巨大な英字・巨大な順位）③同じ形の繰り返しを色の帯で区切る ④画像が境目をまたぐ
   見出しの後ろの大きな英字は飾り（aria-hidden）。地より少しだけ濃い・薄い色にして、文字の邪魔をしない */
.en-label{font-family:var(--num);font-weight:900;font-size:min(16vw,72px);letter-spacing:.03em;line-height:1;color:var(--pink-l);text-align:center;margin-bottom:-.32em;white-space:nowrap;user-select:none} /* 下の見出しは、英字の下の端にだけ少しかかる */
.en-label~*{position:relative}
.band-mist .en-label,#ranking .en-label{color:var(--white)}
.band-navy .en-label{color:var(--navy-2)}
.owner .en-label{color:var(--pink-l)}
.sec-label{font-size:14px;font-weight:700;color:var(--sub);text-align:center}
.sec-h{font-size:22px;line-height:1.5;font-weight:900;text-align:center;margin-top:4px}
.sec-h em{font-style:normal;background:linear-gradient(transparent 62%,var(--pink) 62%)}
.band-navy .sec-label{color:#C9D0E2}
.band-navy .sec-h em{color:var(--pink);background:none}

/* ---------- ランキング ---------- */
#ranking.band{padding-top:36px;background:var(--mist)}
.rank-head{text-align:center;position:relative}
#ranking .en-label{position:absolute;left:50%;top:-34px;transform:translateX(-50%);margin:0;font-size:min(13vw,60px)}
.rank-head .rank-h,.rank-head .rank-pr{position:relative}
.rank-h{font-size:20px;font-weight:900;line-height:1.4}
.rank-pr{font-size:11px;color:var(--sub);margin-top:2px;line-height:1.5}
.tabs{display:grid;grid-template-columns:1fr 1fr;margin-top:12px;border:2px solid var(--navy);border-radius:999px;padding:3px;gap:3px}
.tab{background:none;border:0;border-radius:999px;padding:6px 6px;font-weight:700;font-size:14px;color:var(--navy);cursor:pointer}
.tab{transition:background-color .2s,color .2s}
.tab[aria-selected="true"]{background:var(--navy);color:#fff}
.filters{margin-top:12px}
.filters-h{font-size:13px;font-weight:700;color:var(--navy);cursor:pointer;padding:2px 0}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
/* しぼりこみは四角いチェックの形（丸い小札にしない） */
.chip{display:flex;align-items:center;gap:6px;text-align:left;background:var(--white);border:1.5px solid var(--line);padding:7px 8px;font-size:13px;font-weight:700;line-height:1.35;cursor:pointer}
.chip::before{content:"";flex:0 0 16px;height:16px;border:2px solid var(--navy);background:#fff}
.chip[aria-pressed="true"]{border-color:var(--navy);background:var(--pink-l)}
.chip[aria-pressed="true"]::before{background:var(--navy);border-color:var(--navy);box-shadow:inset 0 0 0 2px #fff}
.filters-result{margin-top:8px;font-size:13px;font-weight:700;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.cards{display:grid;gap:30px;margin-top:18px}
.card{background:var(--white);border-radius:var(--radius);padding:18px 18px 24px;position:relative;overflow:hidden}
.card.rank-1{outline:3px solid var(--navy);outline-offset:-3px}
.card-top{display:flex;align-items:flex-start;margin:-18px -18px 0;padding:16px 18px 18px;min-height:118px;position:relative;background:var(--pink);color:var(--navy)}
.card.rank-1 .card-top{background:var(--navy);color:#fff}
/* 順位は帯の右に大きく */
.badge{position:absolute;right:14px;top:10px;color:var(--navy);font-family:var(--num);display:flex;align-items:baseline;line-height:.9}
.card.rank-1 .badge{color:var(--pink)}
.badge-n{font-size:96px;font-weight:900;letter-spacing:-.04em}
.badge-u{font-size:18px;font-weight:900;margin-left:2px;font-family:"Noto Sans JP",sans-serif}
.card-name{padding-right:86px}
.type{font-size:12px;font-weight:700;color:var(--navy)}
.card.rank-1 .type{color:var(--pink)}
.card h3{font-size:26px;line-height:1.25;font-weight:900}
.card h3 small{display:block;font-size:11px;font-weight:500;color:var(--navy-2);letter-spacing:.05em}
.card.rank-1 h3 small{color:#C9D0E2}
.catch{font-size:18px;font-weight:900;line-height:1.5}
/* スマホはバナー→紹介文の縦並び。幅 600 から横並び（下の @media） */
.card-body{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:center;padding-top:16px}
/* バナー（app.js の BANNERS）。300×250 の枠。届くまでは同じ大きさの空の枠（本人 2026-10-31） */
.bn{display:block;width:100%;max-width:300px;margin:0 auto;aspect-ratio:300/250}
.bn img{width:100%;height:100%;object-fit:contain}
.bn-empty{display:flex;align-items:center;justify-content:center;background:var(--mist);border:2px dashed #B9C1D3;border-radius:6px}
.bn-empty span{font-size:14px;font-weight:700;color:var(--sub);text-align:center;line-height:1.5}
.bn-empty small{display:block;font-family:var(--num);font-size:12px;font-weight:600}
/* 特徴は、四角や丸の札にせず、チェックの付いた文字で並べる */
.tags{display:grid;gap:6px;margin-top:12px}
.tags li{font-size:13px;font-weight:700;color:var(--navy);padding-left:18px;position:relative}
.tags li::before{content:"";position:absolute;left:2px;top:.45em;width:9px;height:5px;border-left:2.5px solid var(--pink-d);border-bottom:2.5px solid var(--pink-d);transform:rotate(-45deg)}

/* 値段は段で見せる（参考サイト E） */
.price{margin-top:20px;border-radius:12px;overflow:hidden;background:var(--white);border:2px solid var(--navy)}
.pr-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 10px;padding:12px 14px}
.pr-row+.pr-row{border-top:1px dashed var(--line)}
.pr-row:nth-child(2){background:var(--pink-l)}
.pr-l{font-size:12px;color:var(--sub);font-weight:700}
.pr-v{font-family:var(--num);font-weight:800;font-size:21px;text-align:right;color:var(--navy);white-space:nowrap}
.pr-n{grid-column:1 / -1;font-size:12px;color:var(--sub);text-align:right;line-height:1.4}
.pr-row.is-nf{grid-template-columns:auto minmax(0,1fr)}
.pr-row.is-nf .pr-v{font-family:inherit;font-size:13px;color:var(--nf);font-weight:500;white-space:normal}

.match{margin-top:20px;border:2px solid var(--navy);border-radius:12px;padding:10px 12px}
.match-h{font-size:13px;font-weight:900;color:var(--navy)}
.match li,.reasons li{position:relative;padding-left:18px;font-size:14px;line-height:1.7;margin-top:8px}
.match li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:5px;border-left:2.5px solid var(--pink-d);border-bottom:2.5px solid var(--pink-d);transform:rotate(-45deg)}
/* 受講生の声：横に動かして切りかえる。次の人が少しのぞくので、動かせると分かる */
.voices{margin-top:24px}
.v-head-row{display:flex;justify-content:space-between;align-items:baseline}
.v-title{font-size:13px;font-weight:900;color:var(--navy);border-bottom:2px solid var(--pink);padding-bottom:1px}
.v-count{font-family:var(--num);font-size:12px;font-weight:700;color:var(--sub)}
.v-hint{font-family:"Noto Sans JP",sans-serif;font-weight:500;font-size:11px;margin-left:8px}
/* 左右のボタンは、マウスで見る時だけ出す（指で見る時は「横に動かせます」） */
.v-ctl{display:flex;align-items:center;gap:10px}
.v-nav{display:none;gap:6px}
.v-btn{width:32px;height:32px;padding:0;border-radius:50%;border:1.5px solid var(--navy);background:var(--white);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.v-btn .ms{font-size:22px}
.v-btn:disabled{opacity:.3;cursor:default}
@media (hover:hover) and (pointer:fine){
  .v-head-row{align-items:center}
  .v-hint{display:none}
  .v-nav{display:inline-flex}
  .v-btn:not(:disabled):hover{background:var(--navy);color:var(--white)}
}
.v-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:10px -18px 0;padding:2px 18px 6px;scrollbar-width:none;scroll-padding:0 18px}
.v-track::-webkit-scrollbar{display:none}
.v-slide{flex:0 0 86%;scroll-snap-align:start;background:var(--white);border:1.5px solid var(--navy);border-radius:14px;padding:20px 18px 18px;position:relative}
/* 引用の印は、枠から離して置く（本人 2026-10-30「窮屈。パディングをもう少し」） */
.v-slide::before{content:"“";position:absolute;right:18px;top:12px;font-family:Georgia,serif;font-size:44px;line-height:1;color:var(--pink)}
.v-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding-right:44px}
.v-name{font-size:16px;font-weight:900}
.v-tag,.v-time{font-size:11px;color:var(--sub);font-weight:700}
.v-time{color:var(--navy);background:var(--pink-l);padding:0 6px}
/* 前と後をアイコンで見せる（本人 2026-10-30「文字ばっかりできつい」→ 案A） */
.ms{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";-webkit-font-smoothing:antialiased}
.v-pic{display:flex;align-items:flex-start;justify-content:center;gap:2px;background:var(--pink-l);border-radius:12px;padding:14px 4px 12px;margin-top:12px}
.v-ic{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:120px}
.v-c{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--white);border:1.5px solid var(--navy)}
.v-c .ms{font-size:30px;color:var(--navy)}
.v-ic.is-after .v-c{background:var(--navy)}
.v-ic.is-after .v-c .ms{color:#fff}
/* 短い言葉は BudouX の切れ目（ゼロ幅の空白）でだけ折り返す。「ワーケーショ／ン」のような折れ方を防ぐ */
.v-ic p{font-size:11px;font-weight:700;text-align:center;line-height:1.4;letter-spacing:0;text-wrap:balance;word-break:keep-all;overflow-wrap:normal}
.v-arr{font-size:22px;color:var(--navy);margin-top:17px} /* 前→後の向きを伝える印なので、地と 3 以上の濃さにする */
.v-head{font-size:14px;font-weight:900;line-height:1.6;margin-top:10px}
.v-text{font-size:14px;line-height:1.75;margin-top:8px}
.v-ba{display:grid;gap:6px;margin-top:10px}
.v-ba p{display:grid;grid-template-columns:28px 1fr;gap:8px;font-size:13px;line-height:1.65}
.v-ba span{align-self:start;text-align:center;font-size:11px;font-weight:900;border-radius:4px;padding:1px 0;background:var(--pink-l);color:var(--navy)}
.v-ba p+p span{background:var(--navy);color:#fff}
.v-dots{display:flex;justify-content:center;gap:6px;margin-top:6px}
.v-dots span{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background-color .2s,width .2s}
.v-dots span.is-on{background:var(--navy);width:18px;border-radius:4px}
.v-src{font-size:11px;color:var(--sub);line-height:1.6;margin-top:8px}
.reasons{margin-top:24px}
.reasons-h{font-size:13px;font-weight:900;color:var(--navy);border-bottom:2px solid var(--pink);display:inline-block;padding-bottom:1px}
.reasons li::before{content:"";position:absolute;left:4px;top:.65em;width:7px;height:7px;border-radius:50%;background:var(--pink-d)}
.other{margin-top:20px;font-size:14px;line-height:1.7;background:var(--pink-l);border-radius:12px;padding:14px 14px}
.other-h{display:block;font-size:12px;font-weight:900;color:var(--navy)}
.other-link{font-size:13px;font-weight:700;white-space:nowrap}
.trial{margin-top:18px;font-size:14px;line-height:1.6}
.trial-h{display:inline-block;background:var(--navy);color:#fff;font-size:11px;font-weight:700;padding:0 6px;margin-right:6px;vertical-align:1px}
.btn-cta{display:block;margin-top:20px;text-align:center;background:var(--rose);color:#fff;text-decoration:none;border-radius:999px;padding:12px 16px 10px;font-weight:900;font-size:16px;line-height:1.4;box-shadow:0 4px 0 #7E1F33}
.btn-cta:active{transform:translateY(2px);box-shadow:0 2px 0 #7E1F33}
.btn-sub{display:block;font-size:11px;font-weight:500}

/* ---------- 比べる表 ---------- */
.scroll-hint{font-size:12px;color:var(--sub);text-align:center;margin-top:8px}
.cmp-box{margin-top:14px}
.cmp-head{position:sticky;top:0;z-index:5}
.cmp-head-in{overflow:hidden;max-width:var(--max);margin:0 auto;padding:0 var(--side)}
.table-wrap{overflow-x:auto;margin:0 auto;max-width:var(--max);padding:0 var(--side) 8px;-webkit-overflow-scrolling:touch}
.cmp{border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:13px;line-height:1.6;width:640px;min-width:100%;background:var(--white)}
.cmp col{width:136px}
.cmp col.c-h{width:96px}
/* 角丸はセルに付ける。表に overflow:hidden を付けると、左の列が横に動かしても付いてこなくなる（2026-10-30 実測） */
.cmp-top,#cmp{border:2px solid var(--navy)}
.cmp-top{border-bottom:0;border-radius:14px 14px 0 0}
#cmp{border-top:0;border-radius:0 0 14px 14px}
.cmp-top th:first-child{border-top-left-radius:12px}
.cmp-top th:last-child{border-top-right-radius:12px}
#cmp tr:last-child th{border-bottom-left-radius:12px}
#cmp tr:last-child td:last-child{border-bottom-right-radius:12px}
.cmp th,.cmp td{border-bottom:1px solid var(--line);padding:12px 8px;vertical-align:top;text-align:left}
.cmp thead th{background:var(--navy);color:#fff;font-size:14px;font-weight:900;text-align:center;vertical-align:middle;padding:8px 6px 10px}
.cmp-name{display:block;line-height:1.3}
.cmp-btn{display:inline-block;margin-top:6px;background:var(--rose);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;text-decoration:none;line-height:1.4}
.cmp-rank{display:block;font-family:var(--num);font-size:11px;font-weight:600;color:var(--pink)}
/* 左の「項目」の列は、横に動かすと画面の左端にぴったり付く（本人 2026-10-30「左側に白いのが見えている」）
   入れ物の左の余白（--side）の分だけ外へ出して止める */
.cmp tbody th{position:sticky;left:calc(-1 * var(--side));background:var(--pink-l);font-weight:700;z-index:1;border-right:1px solid var(--line)}
.cmp thead .cmp-corner{position:sticky;left:calc(-1 * var(--side));z-index:2}
.cmp td{background:var(--white)}
.cmp-cta td{vertical-align:middle}
.cmp-btn-big{display:block;background:var(--rose);color:#fff;text-align:center;border-radius:10px;padding:8px 6px;font-size:12px;font-weight:700;line-height:1.4;text-decoration:none}
.cmp td.is-nf{color:var(--nf);text-align:center;vertical-align:middle;font-size:15px}
.src{font-size:12px;color:var(--sub);margin-top:10px;line-height:1.7}

/* ---------- 聞くこと・比べ方・運営者 ---------- */
.asks{counter-reset:a;display:grid;gap:12px;margin-top:24px}
.asks li{counter-increment:a;background:var(--navy-2);border-radius:14px;padding:14px 14px 14px 58px;position:relative;font-weight:700;line-height:1.6;color:#fff}
.asks li::before{content:"0" counter(a);position:absolute;left:14px;top:50%;transform:translateY(-50%);font-family:var(--num);font-weight:900;font-size:24px;color:var(--pink)}
.about{display:grid;gap:14px;margin-top:22px}
.about li{position:relative;padding-left:18px;font-size:15px}
.about li::before{content:"";position:absolute;left:3px;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--pink-d)}
.owner{background:var(--white);border-radius:var(--radius);padding:20px 18px}
.owner-title{font-size:20px;margin-top:6px}
.owner-body{margin-top:16px;display:grid;gap:12px;font-size:15px;line-height:1.85}
.hl{font-weight:700;background:linear-gradient(transparent 60%,var(--pink) 60%)}
/* 3つの良さは番号と見出しで区切る（文字だけが続かないように） */
.owner-steps{counter-reset:o;display:grid;gap:12px;margin-top:18px}
.owner-steps li{counter-increment:o;background:var(--pink-l);border-radius:14px;padding:14px 14px 14px 58px;position:relative}
.owner-steps li::before{content:"0" counter(o);position:absolute;left:14px;top:12px;font-family:var(--num);font-weight:900;font-size:26px;line-height:1;color:var(--navy)}
.owner-h{font-size:16px;font-weight:900;line-height:1.5}
.owner-steps p{font-size:14px;line-height:1.8;margin-top:4px}
.owner-end{margin-top:22px;text-align:center;font-weight:900;font-size:16px;line-height:1.8;text-wrap:balance}
/* ランキングへ戻る。申し込みのボタンと張り合わないよう、ローズではなく紺の線だけ */
.owner-back{margin-top:16px;text-align:center}
.btn-back{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--navy);border-radius:999px;padding:9px 22px;background:#fff;color:var(--navy);font-weight:700;font-size:14px;line-height:1.3;text-decoration:none}
.btn-back .ms{font-size:18px}
.btn-back:active{transform:translateY(1px)}

/* ---------- ページの下 ---------- */
.foot{background:var(--navy);color:#E3E7F1;padding:24px var(--side) 32px;text-align:center;font-size:12px}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px}
.foot-links a{color:var(--pink)}
.foot-note{margin-top:6px}

@media (min-width:600px){
  .fv-inner{min-height:360px}
  .t-main{font-size:44px}
  /* 絵と丸と縦の英字は、文字の塊（右端 291px）から 69px あけた所に左から置く。
     右から置いていた時は、幅 720 で隙間が 169px 開いていた（本人 2026-10-31「もうちょっと狭めて」） */
  .fv-circle{width:380px;height:380px;right:auto;left:280px}
  .fv-art{width:220px;right:auto;left:360px}
  .fv-vert{top:270px;right:auto;left:min(580px,calc(100% - 34px))} /* 幅 600 付近で右端に切れないように */
  .chips{grid-template-columns:repeat(3,1fr)}
  .card-body{grid-template-columns:300px minmax(0,1fr);gap:20px}
  .bn{margin:0}
}

/* 中身の幅が 720 にそろう幅から：見出しを大きくし、丸の右端を下の6問の箱の右端（704px）にそろえる。
   左右の余白が同じになる。隙間を詰めただけの時は、右が 44px 空いて見えた（本人 2026-10-31「左右のバランス」→ 案1） */
@media (min-width:720px){
  .t-main{font-size:52px}
  .fv-circle{left:324px}
  .fv-art{left:404px}
  .fv-vert{left:624px}
}

/* 幅の狭いスマホ（360 など）でも、1位のカードの頭を最初の画面に入れる */
@media (max-width:374px){
  .fv-inner{min-height:270px}
  .fv-title{margin-top:24px}
  .t-main{font-size:31px}
  .fv-circle{width:270px;height:270px}
  .fv-art{width:146px}
  .fv-vert{top:178px}
  .v-ic p{font-size:10px}
  .v-arr{font-size:16px;margin-top:20px}
  .v-pic{padding-left:2px;padding-right:2px}
}