@charset "UTF-8";
/* ==========================================================================
   三浦 海の学校 — /gear/（ダイビング器材）専用の部品
   このページだけが読む（pages/gear.html の extraHead。style.css → page.css → このファイルの順）。
   page.css は変えない。色・角丸・影・文字の大きさは page.css / style.css の値にそろえてある。JSは無い。
   V2（2026-10-11 夜）：文字を減らして、絵と写真が主役のページに。
   部品: .gear-illust（絵の枠）／.gear-dive（水深の線と5つの場面・写真が主役）／.gear-models（モデルの例）
        ／.gear-range（価格の幅の帯）／.gear-with（絵つきのカード3枚）／.gear-buy（番号つきの3ステップ）
        ／.gear-must（価格の断り）／.gear-src（価格の出どころの折りたたみ）
   ========================================================================== */

/* ================================================================
   ヒーロー（このページだけ）：写真の船べりが明るい黄緑で、ちょうど文字の下に来る。
   page.css の重ね色（文字の帯で 8〜12%）では白い字が読みにくいので、一段暗くする。
   スマホは、人物が文字の右うしろに来る位置に（--pos はインラインなので、img に直接書く）。
   数字の帯（.facts）を置かないので、帯が重なるぶんの下の余白を詰める（目次は margin-top:0 で写真にじかに続く）。
   ================================================================ */
.sub .ph::before {
  background:
    linear-gradient(180deg, rgba(4, 38, 58, .66) 0%, rgba(4, 38, 58, .40) 26%, rgba(4, 38, 58, .48) 52%, rgba(4, 38, 58, .88) 100%),
    linear-gradient(90deg, rgba(4, 38, 58, .66) 0%, rgba(4, 38, 58, .30) 55%, rgba(4, 38, 58, .10) 80%);
}
.sub .ph { padding-bottom: clamp(3rem, 6vw, 4.4rem); }
@media (max-width: 767px) {
  .sub .ph { padding-bottom: 2.4rem; }
  .sub .ph__bg img { object-position: 45% 40%; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .sub .ph__bg img { object-position: 46% 40%; }
}

/* ================================================================
   画面下の固定ボタンを、このページだけ出さない
   （build.py が全ページに出す帯は「空きを聞く／予約フォーム」で、器材相談の文面にならないため）
   ================================================================ */
.sub .mobile-cta-bar { display: none !important; }
@media (max-width: 768px) { body.sub:has(.mobile-cta-bar) { padding-bottom: 0; } }

/* ================================================================
   .gear-illust — 絵の枠（Image 2.5 で作った 960×640 の絵。角丸22px・影はカードと同じ）
   .split の中（#rental・#buy）では、page.css の 4:3 の切り抜きを 3:2 に戻す。
   --wide は、節の幅いっぱいに置く見取り図（#items）。
   ================================================================ */
.gear-illust { margin: 0; }
.gear-illust img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 22px; background: #fff; border: 1px solid var(--border);
  box-shadow: 0 4px 18px rgba(6, 58, 87, .05);
}
.sec--soft .gear-illust img { border-color: transparent; }
.gear-illust--wide { max-width: 900px; margin: 0 auto; }

/* ================================================================
   #rental — 絵＋3行。3行は、このページの最初の答えなので、本文と同じ大きさで
   ================================================================ */
#rental .checks { gap: .8rem; margin: 1.3rem 0 1.5rem; }
#rental .checks li { font-size: 1rem; line-height: 1.8; padding-left: 2.1rem; }
#rental .checks li::before { top: .25rem; width: 1.45rem; height: 1.45rem; }
#rental .sec-foot { margin-top: 0; row-gap: 0; }

/* ================================================================
   .gear-must — 価格の断り（本文と同じ大きさで読ませる。.note の小さい字にしない）。#items に1つだけ
   白い節では淡い青、淡い節（.sec--soft）では白
   ================================================================ */
.gear-must {
  max-width: 860px; padding: .9rem 1.1rem; border-left: 3px solid var(--ink); border-radius: 14px;
  background: var(--bg-soft); font-size: .95rem; line-height: 1.9; color: var(--text-dark);
}
.sec--soft .gear-must { background: #fff; }
.gear-must > p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.gear-must b, .gear-must strong { color: var(--ink); }

/* ================================================================
   .gear-jump — 5つの場面へ飛ぶ札（見取り図のすぐ下。見た目は page.css の .areas）
   ================================================================ */
.gear-jump { margin: 1.2rem 0 0; }
.gear-jump a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) { .gear-jump { justify-content: center; } .gear-jump + .gear-must { margin-left: auto; margin-right: auto; } }

/* ================================================================
   .gear-dive — 水深の線と5つの場面（#items）
   左の線は、水面の青緑から下へ行くほど濃い紺。場面ごとに丸い印と札（「水面で｜0m」）。
   900px以上: 印と札は左の列で追従（読んでいるあいだ、いまの場面が見える）。
   899px以下: 線は左端に細く、札はカードの上。
   ================================================================ */
.gear-dive {
  --gd-bg: #fff;                 /* 節の地の色（印のまわりを線から抜く） */
  --gd-rail: 3px;                /* 線の太さ */
  --gd-dot: 14px;                /* 丸い印 */
  --gd-gap: 14px;                /* 線とカードのあいだ */
  --gd-pad: calc(var(--gd-dot) / 2 + var(--gd-rail) / 2 + var(--gd-gap));
  list-style: none; position: relative; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0 0 2rem;
  display: grid; gap: clamp(2.2rem, 5vw, 3.4rem);
}
.sec--soft .gear-dive { --gd-bg: var(--bg-soft); }
.gear-dive::before {             /* 水深の線 */
  content: ""; position: absolute; left: calc((var(--gd-dot) - var(--gd-rail)) / 2); top: 1.05rem; bottom: 6px;
  width: var(--gd-rail); border-radius: 999px;
  background: linear-gradient(180deg, #4ECDC4 0%, #2BB3BD 12%, #0F849E 32%, #095574 60%, #063A57 84%, #04263A 100%);
}
.gear-dive::after {              /* 線の終点 */
  content: ""; position: absolute; left: calc((var(--gd-dot) - 11px) / 2); bottom: 0;
  width: 11px; height: 11px; border-radius: 50%; background: var(--abyss);
}

.gear-dive__scene { position: relative; min-width: 0; padding-left: var(--gd-pad); --gd-c: #22B5AC; }
.gear-dive__scene:nth-child(2) { --gd-c: #1A979B; }
.gear-dive__scene:nth-child(3) { --gd-c: #137887; }
.gear-dive__scene:nth-child(4) { --gd-c: #0B5970; }
.gear-dive__scene:nth-child(n+5) { --gd-c: #063A57; }
@supports (color: color-mix(in srgb, #000 calc(1 * 25%), #fff)) {
  /* style="--d:0〜4" があれば、その深さの色に（無ければ上の並び順の色のまま） */
  .gear-dive__scene[style*="--d"] { --gd-c: color-mix(in srgb, #063A57 calc(var(--d) * 25%), #22B5AC); }
}

/* 場面の札と丸い印 */
.gear-dive__mark {
  position: relative; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .65rem;
  margin: 0 0 .65rem; padding: .38rem .95rem; border-radius: 999px; background: #fff;
  box-shadow: 0 4px 18px rgba(6, 58, 87, .05); line-height: 1.5;
}
.gear-dive__mark b { font-size: .98rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.gear-dive__mark span {
  padding-left: .65rem; border-left: 1px solid #C9DBE3; white-space: nowrap;
  font-family: var(--ff-accent); font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--deep-2);
}
.gear-dive__mark::before {       /* 線の上の丸い印 */
  content: ""; position: absolute; left: calc(-1 * var(--gd-pad)); top: 50%; box-sizing: border-box;
  width: var(--gd-dot); height: var(--gd-dot); margin-top: calc(var(--gd-dot) / -2); border-radius: 50%;
  background: #fff; border: 4px solid var(--gd-c); box-shadow: 0 0 0 4px var(--gd-bg);
}
.gear-dive__mark::after {        /* 印と札をつなぐ短い線 */
  content: ""; position: absolute; right: 100%; top: 50%; margin-top: -1px;
  width: calc(var(--gd-pad) - var(--gd-dot) + 1px); height: 2px; background: var(--gd-c);
}

/* 場面のカード（.card と同じ白・角丸22px・影）。写真が主役：カードの上（PCは左半分）いっぱいに置く */
.gear-dive__card {
  min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: 22px;
  box-shadow: 0 4px 18px rgba(6, 58, 87, .05); color: var(--text-dark);
}
.sec--soft .gear-dive__card { border-color: transparent; }
.gear-dive__photo { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-soft); }
.gear-dive__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
#item-small .gear-dive__photo img { object-position: 50% 28%; }   /* 低い枠でも、名入りのストラップカバーとスノーケルの先が入るように、上に寄せる */
.gear-dive__card :is(h3, p, li, th, td, small) { overflow-wrap: anywhere; }   /* 長い語が、狭い画面でカードからはみ出さないように */
.gear-dive__body { min-width: 0; padding: 1.25rem 1.1rem .2rem; }
.gear-dive__body h3 { font-size: clamp(1.22rem, 2.6vw, 1.5rem); line-height: 1.45; color: var(--ink); margin: 0 0 .7rem; }
.gear-dive__body h3 small { display: block; margin-top: .3rem; font-size: .78rem; font-weight: 700; line-height: 1.6; color: var(--text-sub); }
.gear-dive__body > p { font-size: .98rem; line-height: 1.95; color: var(--text-dark); }
.gear-dive__body > p b { color: var(--ink); }
.gear-dive__body > * + p { margin-top: .8rem; }
.gear-dive__tip {                /* 場面に1行だけ足すひと言（度付きレンズ・レンタルに入っていない） */
  padding: .6rem .9rem; border-radius: 12px; background: var(--bg-soft);
  font-size: .9rem !important; line-height: 1.8 !important;
}
.gear-dive__buy { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding: 1.2rem 1.1rem 1.3rem; }
.gear-dive__buy > * { min-width: 0; margin-top: 0; margin-bottom: 0; }

/* 場面の中の価格の行：種類｜金額｜下に帯。金額の列の幅をそろえる（＝帯の長さが5つの表で同じになる） */
.gear-dive .tbl td.num { width: 17.5rem; }
/* メーカー希望小売価格は紺。コーラルは「海の学校に払う金額」（ほかのページの料金）のためにとっておく */
.gear-dive .tbl td.num.hl { color: var(--ink); }

@media (max-width: 639px) {
  /* カードを線の上に重ねて、幅いっぱいに（線はカードのあいだにだけ見える） */
  .gear-dive__scene { padding-left: 0; }
  .gear-dive__mark { margin-left: var(--gd-pad); }
  .gear-dive__card { position: relative; z-index: 1; }
  /* 表を縦に積む（種類 → 金額 → 帯）。金額の列が狭くなって、種類の字が1文字ずつ折れるのを防ぐ */
  .gear-dive .tbl { display: block; min-width: 0; }
  .gear-dive .tbl thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
  .gear-dive .tbl tbody, .gear-dive .tbl tr { display: block; }
  .gear-dive .tbl tbody tr:first-child :is(th, td) { border-top: 0; }
  .gear-dive .tbl tbody th { display: block; padding: .7rem .9rem .1rem; font-size: .9rem; }
  .gear-dive .tbl tbody tr:first-child th { padding-top: .8rem; }
  .gear-dive .tbl td.num { display: block; width: auto; border-top: 0; padding: 0 .9rem .8rem; text-align: left; font-size: 1.05rem; }
}
@media (min-width: 640px) {
  .gear-dive__body { padding: 1.6rem 1.6rem .3rem; }
  .gear-dive__buy { padding: 1.4rem 1.6rem 1.7rem; gap: 1.3rem; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .gear-dive__photo { aspect-ratio: 2 / 1; }   /* 1列で幅が広いあいだは、写真を低めに */
}
@media (min-width: 900px) {
  .gear-dive {
    --gd-rail: 4px; --gd-dot: 22px; --gd-gap: 23px;   /* 印の右に14pxのつなぎ線 */
    --gd-col: 186px;             /* 左の列（印＋札） */
  }
  .gear-dive::before { top: 2rem; }
  .gear-dive__scene { padding-left: 0; display: grid; grid-template-columns: var(--gd-col) minmax(0, 1fr); align-items: start; }
  .gear-dive__mark {
    position: sticky; top: calc(var(--hdr) + var(--lnav-h) + 16px); z-index: 1;
    flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: .05rem;
    margin: 0 1.1rem 0 var(--gd-pad); padding: .6rem .85rem .65rem; border-radius: 14px; min-height: 4rem; justify-content: center;
  }
  .gear-dive__mark b { font-size: 1rem; }
  .gear-dive__mark span { padding-left: 0; border-left: 0; }
  .gear-dive__mark::before { border-width: 5px; }
  .gear-dive__mark::after { margin-top: -1.5px; height: 3px; }
  /* 上の段：写真（左50%・本文の高さまで伸びる）｜見出しと文。下の段：モデルの例・価格・札を幅いっぱいに */
  .gear-dive__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .gear-dive__photo { position: relative; aspect-ratio: auto; min-height: 320px; }
  .gear-dive__photo img { position: absolute; inset: 0; }
  .gear-dive__body { align-self: center; padding: 2rem 2.1rem; }
  .gear-dive__buy { grid-column: 1 / -1; padding: 1.8rem 2rem 2rem; gap: 1.5rem; }
}

/* ================================================================
   .gear-range — 価格の幅の帯（飾り。金額の文字が正本）
   全部の表で同じ物差し（¥3,000〜¥500,000 の対数）。--a が左端、--b が右端。
   色も物差しに沿って変わる（左＝青緑、右＝紺）。白い切れ目が ¥1万 と ¥10万。
   ================================================================ */
.gear-range {
  display: block; position: relative; height: 6px; min-width: 120px; margin-top: 6px;
  border-radius: 999px; background: var(--border); overflow: hidden;
}
.gear-range::after {   /* 目盛り：¥1万（23.5%）と ¥10万（68.5%）。全部の表で同じ位置にそろう */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent calc(23.5% - 1px), #fff 0 calc(23.5% + 1px),
    transparent 0 calc(68.5% - 1px), #fff 0 calc(68.5% + 1px), transparent 0);
}
.gear-range::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #19A99B 0%, #0F849E 45%, #095574 72%, #063A57 100%);
  clip-path: inset(0 min(calc(100% - var(--b, 100%)), calc(100% - var(--a, 0%) - 6px)) 0 var(--a, 0%) round 999px);
}

/* ================================================================
   .gear-models — モデルの例（メーカー公式の製品写真。金額は書かない＝表が正本）
   白い正方形の札＋下に「メーカー名／モデル名」。写真が主役：PC は1枚 最大180px。
   スマホは3枚ぶんの幅。4枚以上（場面3の6枚）は横スクロール（4枚目が少し見える）。
   ================================================================ */
.gear-models { min-width: 0; }
.gear-models__cap { margin: 0 0 .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--text-sub); }
.gear-models ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }
.gear-models li { flex: 0 1 180px; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.gear-models img {
  display: block; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: .4rem;
}
.gear-models li > span {
  display: block; text-align: center; font-size: .86rem; font-weight: 700; line-height: 1.45; color: var(--ink);
  word-break: normal; line-break: strict; overflow-wrap: anywhere; text-wrap: balance;   /* カタカナの長いモデル名を、きりのいい所で2行に */
}
.gear-models li small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .03em; color: var(--text-sub); }
@media (max-width: 639px) {
  .gear-models ul { gap: .6rem; }
  .gear-models li { flex: 0 0 calc((100% - 1.2rem) / 3); }
  .gear-models li > span { font-size: .8rem; }
  /* 4枚以上：横スクロール（止まる位置を札の左にそろえる）。カードの右の余白ぶんまで広げて、続きがあるのを見せる */
  .gear-models ul:has(li:nth-child(4)) {
    margin-right: -1.1rem; padding: 0 1.1rem .5rem 0; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .gear-models ul:has(li:nth-child(4)) li { flex: 0 0 calc((100% - 1.8rem) / 3.35); scroll-snap-align: start; }
  /* 1枚だけ（場面2・5）：写真を左に大きく、名前を右に */
  .gear-models li:only-child { flex: 1 1 auto; flex-direction: row; align-items: center; gap: 1rem; }
  .gear-models li:only-child img { flex: 0 0 132px; width: 132px; }
  .gear-models li:only-child > span { text-align: left; font-size: .9rem; }
}
@media (max-width: 360px) {
  .gear-models li > span { font-size: .75rem; }
  .gear-models li small { font-size: .69rem; letter-spacing: 0; }
  .gear-models li:only-child img { flex-basis: 112px; width: 112px; }
}

/* ================================================================
   .gear-src — 価格の幅の出どころ（#items の最後の折りたたみ。class は faq-item acc ＝ FAQPage に入らない）
   ================================================================ */
.gear-src { max-width: 860px; margin-top: .8rem; border-top: 1px solid var(--border); }
.sec--soft .gear-src { border-top-color: #D5E3EA; }
.sec--soft .gear-src .faq-item { border-bottom-color: #D5E3EA; }
.sub .gear-src .faq-item summary { font-size: .9rem; padding: .9rem 0; color: var(--text-dark); }
.sub .gear-src .faq-answer { font-size: .84rem; line-height: 1.85; color: var(--text-dark); }
.gear-src .faq-answer > * + * { margin-top: .7rem; }
.gear-src .faq-answer ul { list-style: none; padding: 0; display: grid; gap: .3rem; }
.gear-src .faq-answer li b { color: var(--ink); }

/* ================================================================
   .gear-with — 絵つきのカード3枚（#with）。絵は 3:2・カードの上いっぱい。PC 3列・スマホ1列
   ================================================================ */
.gear-with { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); }
.gear-with__card {
  min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: 22px;
  box-shadow: 0 4px 18px rgba(6, 58, 87, .05); color: var(--text-dark);
}
.sec--soft .gear-with__card { border-color: transparent; }
.gear-with__card figure { margin: 0; aspect-ratio: 3 / 2; background: var(--bg-soft); overflow: hidden; }
.gear-with__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gear-with__body { padding: 1.2rem 1.3rem 1.45rem; }
.gear-with__body h3 { font-size: clamp(1.06rem, 1.7vw, 1.2rem); line-height: 1.5; color: var(--ink); margin: 0 0 .45rem; }
.gear-with__body p { font-size: .93rem; line-height: 1.85; color: var(--text-dark); }
@media (max-width: 767px) {
  .gear-with { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; max-width: 520px; margin: 0 auto; }
}

/* ================================================================
   .gear-buy — 番号つきの3ステップ（#buy）。番号の丸は大きめの青緑、見出しは太字、文は1〜2行
   ================================================================ */
.gear-buy { list-style: none; margin: 1.4rem 0 1.3rem; padding: 0; counter-reset: gb; display: grid; gap: 1.25rem; position: relative; }
.gear-buy::before {              /* 丸をつなぐ線 */
  content: ""; position: absolute; left: calc(1.5rem - 1px); top: 1.5rem; bottom: 1.5rem; width: 2px;
  background: linear-gradient(180deg, #19A99B, var(--teal-ink)); opacity: .35;
}
.gear-buy li {
  counter-increment: gb; position: relative; min-height: 3rem; padding-left: 4rem;
  display: flex; flex-direction: column; justify-content: center; gap: .15rem;
}
.gear-buy li::before {
  content: counter(gb); position: absolute; left: 0; top: 0; box-sizing: border-box;
  width: 3rem; height: 3rem; border-radius: 50%; background: var(--teal-ink); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 5px var(--gb-bg, #fff);
  font-family: var(--ff-accent); font-size: 1.35rem; font-weight: 700; line-height: 1;
}
.sec--soft .gear-buy { --gb-bg: var(--bg-soft); }
.gear-buy b { font-size: 1.1rem; line-height: 1.5; color: var(--ink); }
.gear-buy li > span { font-size: .93rem; line-height: 1.8; color: var(--text-dark); }
/* .split__body > p（本文の大きさ）が .note より強いので、注記の大きさに戻す */
.split__body > p.note { font-size: .8rem; line-height: 1.8; color: var(--text-sub); margin-bottom: 0; }
#buy .sec-foot { margin-top: 1.4rem; }

/* ================================================================
   このページだけの調整（page.css の部品を、ここで上書きする。page.css は変えない）
   ================================================================ */
/* 長い文字リンクが2行に折れたとき、矢印が右端に離れないように */
.sub main .link-arrow { display: inline; }
.sub main .link-arrow::after { display: inline-block; margin-left: .35rem; }

/* 幅のせまいスマホ（〜360px）：ヒーローのボタンの字が1字だけ折れないように／代表の紹介の本文の列を広く */
@media (max-width: 360px) {
  .ph__cta .btn-line { padding-left: 1.1rem; padding-right: 1.1rem; }
  .byline { grid-template-columns: 56px minmax(0, 1fr); gap: .85rem; padding: 1rem; }
  .byline img { width: 56px; height: 56px; }
}

/* 読みやすさ・押しやすさ */
/* 取り扱い8社：名前・種類・短い紹介。説明は 11.8px → 13px。種類の字を少し小さく（2列・3列のとき、語の途中で折れないように） */
#makers .spec small { font-size: .8125rem; line-height: 1.6; }
#makers .spec span { font-size: .88rem; line-height: 1.55; }
@media (max-width: 420px) {
  #makers .spec { gap: .4rem; }
  #makers .spec li { padding: .6rem 1rem; }
}
/* 場面から「GULL」などを押して #makers に着いたとき、どれに着いたかの印 */
.spec li:target { outline: 2px solid var(--teal-ink); outline-offset: 2px; }
/* 押せる高さを 44px に：場面ごとのLINEの札／節の終わりの矢印リンク */
.sub main .linechips { margin: 0; }
.sub main .linechips a { min-height: 44px; padding-top: .55rem; padding-bottom: .55rem; }
.sub main .sec-foot > .link-arrow { padding-block: .5rem; }

/* ================================================================
   相談の帯の4つ目（文は META の ask.cancel「ダイビングのご予約は、前日17時までキャンセル無料」）。
   ほかのページより長いので、1行に入らない幅では、読点のあとで2行に折り、
   アイコンを文の左に付けたまま、かたまりごと中央に置く。
   （page.css の .ask-info span は、中の span も横並びの箱にするので、ここで文の箱に戻す）
   ================================================================ */
.sub .ask-info .gear-ask-cancel { display: block; }
.sub .ask-info .gear-ask-cancel .nw { display: inline-block; white-space: nowrap; }
@media (max-width: 419px) { .sub .ask-info .gear-ask-cancel { width: min-content; text-align: left; } }