/* =========================================================
   修正一覧（2026-10-24）お問い合わせ（68〜79番・12番）の修正案
   ========================================================= */

/* ---------- 68番：目次が6つ → 5つ ----------
   PC（1201px以上）：3列×2段だと2段目に空きが1つできるので、ほかのページの1段の目次と同じく横1列に並べる。
   カードが1段ぶん低くなる分だけ上の余白を減らし、カードの位置（写真の面への重なり）と、
   カードの下→「01 ご連絡の方法」の間（104px）は、いまと同じにする */
@media (min-width: 1201px) {
  .how { padding-top: 230px; }
  .pn--sub { top: -372px; }
  .pn__list--grid { display: flex; }
  .pn__list--grid > li { flex: 1 1 0; }
  .pn__list--grid > li:nth-child(3n+1)::before { display: block; }
  .pn__list--grid > li:nth-child(n+4) { box-shadow: none; }
}

/* ---------- 68番：「ご相談の流れは『ご相談と料金』をご覧ください」のリンクを「02 お約束」の中に ----------
   左の列（見出し・文）はいまのまま。右の列の5つのお約束の下に置く。
   右の列を「一覧＋リンク」の1つの箱にして、いまの一覧と同じ幅・同じ置き方にする。一覧→リンクは 40px
   （左に入れると、左だけ「見出し・文・ボタン」で重くなり、右の一覧が真ん中に浮くため） */
.promise__main { flex: none; width: 751px; max-width: 100%; }
/* 見出しは、ほかの面と同じく面の上の余白のすぐ下から。左右の列の上端をそろえる（いままでは上下中央で、見出しが一覧より下がっていた） */
@media (min-width: 1481px) {
  .promise__inner { align-items: flex-start; }
}
.promise__main .promise__list { width: 100%; }
.promise__flow { margin-top: 40px; }
.promise__flow span { word-break: keep-all; overflow-wrap: anywhere; }
.promise__closing { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 1480px) and (min-width: 751px) {
  .promise__main { width: 100%; margin-top: 70px; }
  .promise__main .promise__list { margin-top: 0; }
}
@media (max-width: 750px) {
  .promise__main { width: 100%; }
  .promise__flow { width: 100%; height: auto; min-height: 9.2rem; margin-top: 4rem; text-align: center; }
}

/* ---------- 70番：ご連絡の方法は4つを同じ大きさの枠に ----------
   直す前の不自然さ：①いちばん大事な情報（ID・約8分・電話番号・メールアドレス）の大きさ・書体・置き場所が枠ごとに違う
   ②説明の文字が枠ごとに違う（太字20px／普通19px／太字16px／灰色16px）③名前・説明・ボタンが上下中央に浮いていて、どの線にもそろわない
   直し方：
   ・4つとも同じ枠（いまのフォームの枠：白・金の上線・影）で同じ幅。2列×2段（スマホは縦に1列）
   ・どの枠も同じ4段「名前 → いちばん大事な情報 → 説明 → ボタン」、すべて左ぞろえ
   ・となりの枠と段の高さをそろえる（subgrid）。名前・大事な情報・説明の頭が、左右の枠で同じ高さに並ぶ
   ・大事な情報は4つとも同じ書体・大きさ（英数字の書体・32px・紺）。その下に線を1本
   ・説明は4つとも同じ文字（18px・普通の太さ・本文の色）
   ・ボタンは LINE とフォームだけ（電話・メールは大事な情報そのものが押す所） */
.methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.method {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-items: start;
  height: auto;
  min-height: 0;
  padding: 48px 56px 56px;
  background: #fff;
  border-top: 4px solid var(--gold);
  box-shadow:
    2px 8px 18px rgba(0, 0, 0, .1),
    8px 31px 32px rgba(0, 0, 0, .09),
    17px 70px 43px rgba(0, 0, 0, .05);
}

/* 1段め：番号＋アイコン＋名前 */
.method__title { padding-top: 16px; }

/* 2段め：いちばん大事な情報 */
.method__key { margin-top: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line-soft); }
.method__key .method__tel,
.method__key .method__mail,
.method__key .method__duration {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--navy);
}
.method__key a { color: inherit; transition: color .25s ease; }
.method__key a:hover { color: var(--gold); }
/* 「約8分」も同じ大きさ・同じ色。「でご入力いただけます」は説明と同じ文字 */
.method__key .method__duration { display: block; }
.method__key .method__duration b { margin-right: 6px; font-family: var(--f-jp); font-weight: 700; font-size: 32px; line-height: 1.3; color: var(--navy); }
.method__key .method__duration { font-family: var(--f-jp); font-weight: 400; font-size: 18px; color: var(--ink); }

/* 3段め：説明。4つとも同じ文字 */
.method__text { padding-top: 24px; }
.method__text p,
.method__text li { font-family: var(--f-jp); font-weight: 400; font-size: 18px; line-height: 1.8; color: var(--ink); }
.method__text p + p { margin-top: 12px; }
.method__text .method__lead,
.method__text .method__small,
.method__text .method__note { margin: 0; padding: 0; border: 0; }
.method__text .line-points { margin: 0; border: 0; }
.method__text .line-points li { padding: 0; border: 0; align-items: flex-start; }
.method__text .line-points li + li { margin-top: 8px; }
.method__text .line-points li svg { margin-top: 6px; }
.method__text .line-points b { font-weight: 400; }

/* 4段め：ボタン（LINE・フォーム） */
.method__act:not(:empty) { padding-top: 36px; }
.method__act .btn-line,
.method__act .method__btn { width: 280px; max-width: 100%; height: 65px; margin: 0; }
/* ボタンの文字：LINE のボタンも、フォームのボタンと同じ文字（18px・太字・字間）にそろえる（LINE だけ 20px・中太だった） */
.method__act .btn-line { font-size: 18px; font-weight: 700; line-height: 32.4px; letter-spacing: 1.08px; }

@media (max-width: 1200px) and (min-width: 751px) {
  .method { padding: 40px 32px 48px; }
  .method__key .method__tel,
  .method__key .method__mail,
  .method__key .method__duration b { font-size: 28px; }
  .method__text p,
  .method__text li,
  .method__key .method__duration { font-size: 16px; }
}
@media (max-width: 750px) {
  .methods { grid-template-columns: minmax(0, 1fr); gap: 4rem; }
  .method { padding: 5rem 3.6rem 5.6rem; }
  .method__key { margin-top: 3rem; padding-bottom: 2.4rem; }
  .method__key .method__tel,
  .method__key .method__mail,
  .method__key .method__duration b { font-size: 3.6rem; }
  .method__text { padding-top: 2.4rem; }
  .method__text p,
  .method__text li,
  .method__key .method__duration { font-size: 2.6rem; }
  .method__act:not(:empty) { padding-top: 4rem; }
  .method__act .btn-line,
  .method__act .method__btn { width: 100%; height: 9.2rem; }
  .method__act .btn-line { font-size: 2.8rem; line-height: 1.4; letter-spacing: 0; }
}

/* ---------- 12番：スマホで「お約束」の見出しの下に大きな空白ができる ----------
   原因はアニメーションではなく、PCで左の列の幅として付けた flex-basis（611px）が、
   スマホで縦並びになると「高さ 611px」として効いていたこと。スマホでは中身の高さにする */
@media (max-width: 750px) {
  .promise__side { flex: none; }
}

/* ---------- 76番：最寄駅の行が7行に増えて、右の文の側が地図より高くなる ----------
   地図を文の側と同じ高さまで伸ばす（横並びの幅のときだけ）。
   駅名の行は、言葉の途中（「徒歩すぐ」の「ぐ」だけ次の行など）で折れないよう、「駅名」「改札口より」「徒歩〜」の切れ目でだけ折る */
@media (min-width: 1101px), (max-width: 750px) {
  .access__map { height: 100%; min-height: 450px; }
}
@media (max-width: 750px) {
  .access__map { height: 42rem; min-height: 0; }
}
.access__todo li span { word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- 68番：目次5つ・幅 751〜1200px（3列のまま） ----------
   3列×2段だと2段目の右が1つ空くので、2段目の2つで横幅を分ける（1段目は3等分、2段目は2等分） */
@media (max-width: 1200px) and (min-width: 751px) {
  .pn__list--grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pn__list--grid > li:nth-child(-n+3) { grid-column: span 2; }
  .pn__list--grid > li:nth-child(n+4) { grid-column: span 3; }
}

/* ---------- 70番：LINE の枠が狭くなる幅で「平日10:00〜／18:00」と時刻の途中で折れないよう、印の所でだけ折る ---------- */
.method--line .line-points b { word-break: keep-all; overflow-wrap: anywhere; }
.method--line .nw { white-space: nowrap; }
/* 70番：説明の文は、言葉の途中（「くださ／い」など）で折れないよう、印の所でだけ折る */
.method__text p { word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- 全ページ確認で見つかった所 ----------
   ・目次の名前「場所・アクセス」は折らない（800px で「アクセ／ス」になっていた）
   ・751〜900px は、ご連絡の方法の枠を1列にする。2列だと枠が狭く、「お申し込みフォー／ム」や
     メールアドレスが途中で折れていた（1列にすると 4つの枠は同じ幅のまま）
   ・お約束の中のボタンの文字を、このページのほかのボタンと同じ太字（700）に */
.pn__what .nw { white-space: nowrap; }
@media (max-width: 900px) and (min-width: 751px) {
  .methods { grid-template-columns: minmax(0, 1fr); }
  .method { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; }
}
.promise__flow { font-weight: 700; }
.faq__a-text .nw { white-space: nowrap; }