/* ★画像の指定は「../../uploads/」の形（相対指定）にすること★
   2026-08-21：本番 royal-sphere-drone.com へ引っ越したときに決めた決まり。
   このCSSは wp-content/themes/arkhe-child/ に置かれる。そこから2つ上が
   wp-content なので、../../uploads/… でどちらのサイトでも同じ画像に届く。
   「/royal-sphere-drone/wp-content/…」のようにサイトの根元から書くと、
   仮サイト（フォルダの中）と本番（ドメイン直下）で場所がずれて画像が消える。
   ※HTMLの <img src> は相対指定にできない（ページのURLが階層ごとに変わるため）。
     そちらは送信時にサイトに合わせて書き換える。 */

/* ===========================================================
   行政書士法人Royal Sphere ドローンサイト 共通デザイン
   子テーマから読み込み（functions.php で enqueue 済み）
   承認済みデザイン案（260713_2版）のインラインstyle実測値に全面準拠
   ※色・文字・余白の変更はこのファイルの「1. 設計値」だけ直せば全ページ反映される
   =========================================================== */

/* -----------------------------------------------------------
   1. 設計値（ここだけ直せば全体が変わる）
   ----------------------------------------------------------- */
:root {
  /* 色（デザイン案から実測） */
  --rs-navy:        #0068B7; /* 見出し。2026-08-30 に濃紺 #12294E から変更 */
  --rs-navy-deep:   #005192; /* 主色の濃い版。ボタンのホバー・グラデーションの片側 */
  /* 2026-08-30：色は青 #0068B7、地色は白と #BADAF3 の組み合わせで、というご指示。
     ベンチマークのバウンダリ行政書士法人（boundary.or.jp）を実測したところ、
     まったく同じ2色だった（主色 #0068B7 ／ セクションの地色は #BADAF3 を8割の濃さで）。
     白ヌキ文字は #0068B7 の上でしか読めない
     （#BADAF3 の上に白を置くとコントラスト1.5で消える）ので、次の分担にしてある。
       ・文字と、白ヌキ文字が乗る帯・ボタン・丸バッジ … --rs-blue（#0068B7）
       ・セクションの地色・面・飾り … --rs-sky / --rs-pale / --rs-blue-pale
     もとの濃紺に戻すときは --rs-navy と --rs-blue を 12294E に戻せば全体が戻る。 */
  --rs-sky:         #BADAF3; /* ご指定の水色。地色・面・飾りに使う */
  --rs-blue:        #0068B7; /* 主色。リンク・アイコン・強調・白ヌキ文字が乗る面 */
  --rs-blue-pale:   #E5F1FA; /* 主色を1割だけ敷いた面（カードの中の小さな面） */
  --rs-pale:        #DCECF9; /* 水色を白で半分に薄めた地色。白と水色の中間の段 */
  --rs-orange:      #F5820A; /* ボタン・CTA */
  --rs-orange-dark: #E8890C;
  /* 2026-09-01：外国人雇用支援の実績帯を、本郷様の金色のデザイン案に合わせるため追加。
     サイト全体の青系配色とは役割を分け、この帯の装飾と淡い地色だけに使う。 */
  --rs-gold:        #B8963F; /* 王冠・月桂樹・線画アイコン・順位の「1」 */
  --rs-gold-light:  #D9C08A; /* 円の二重枠・区切り線・菱形 */
  --rs-crown-bg:    #FFFDF8; /* 実績帯の明るいベージュ */
  --rs-crown-shade: #F7F2EA; /* 布の陰影をつくる淡いベージュ */
  /* 電話の導線だけ赤にする（2026-08-30ご指示）。白ヌキ文字とのコントラストは5.1で読める */
  --rs-red:         #D0342C;
  --rs-red-dark:    #B02A23;
  /* 2026-08-30：地色は白と #BADAF3 の組み合わせにする、というご指示。
     それまではクリーム（#FFF7EA）を混ぜて「白 → 薄い青 → クリーム」の3段で
     セクションを交互に敷いていた。クリームをやめて全部白にすると、
     白が3つ4つ続いて区切りが消えてしまうので、水色の濃さで3段を作り直した。
       白 → --rs-pale（#DCECF9・水色を半分に薄めた色） → --rs-cream（#BADAF3）
     クラス名（rs-sec--cream など）は各ページのHTMLに散っているので、
     名前はそのままにして中身の色だけ入れ替えている。
     クリームに戻したいときは --rs-cream / --rs-cream-2 を FFF7EA / FFF1DE に戻す。 */
  --rs-white:       #FFFFFF; /* 白抜き文字と白い面 */
  --rs-cream:       #BADAF3; /* 旧クリーム。いまは水色いちばん濃い段 */
  --rs-cream-2:     #E5F1FA;
  --rs-bg:          #DCECF9; /* rs-sec--light の地色。--rs-pale と同じ中間の段 */
  --rs-bg-2:        #EEF6FC; /* 表のしま模様など、ごく薄く敷くとき */
  /* 本文の文字色
     2026-07-30：本文 #3A4C6B・補足文 #5B6B87・注記 #636F89 と3段階の青みがかった
     グレーを使い分けていたが、地色が白 / #F4F7FB / クリームと変わるページでは
     同じ文章でも濃さが違って見えて読みにくい、というご指摘（本郷様）。
     ご指示どおり、リンク・見出し・強調の青を除いた「ふつうの文章」は全部 #000000 にそろえた。
     3つとも同じ値なのは、どこかで色が戻っても他につられないようにするため。
     ※濃紺の帯の上だけは別に明るい色を当てている（.rs-sec--navy / .rs-contact / .rs-spot）。 */
  /* 2026-09-01：真っ黒の硬さを和らげつつ、水色地でも4.5:1以上を保つ濃いグレーへ分けた。 */
  --rs-text:        #1F2328; /* 本文 */
  --rs-muted:       #454C55; /* 補足文 */
  --rs-muted-2:     #565E68; /* #5A626Cでは#BADAF3上が4.24:1のため、4.5:1を満たす最小限の濃さへ補正 */
  --rs-line:        #E3EBF5; /* 罫線 rgb(227,235,245) */
  --rs-line-2:      #E0E9F4; /* カード枠 rgb(224,233,244) */

  /* 文字 */
  --rs-font:    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --rs-font-en: Montserrat, var(--rs-font);
  /* 実績の数字だけ明朝にする（2026-08-30・ご指示）。読み込みは functions.php */
  --rs-font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* 幅・余白 */
  /* コンテンツの幅
     2026-07-29：本文820px・カード1160px・その他1000pxと3種類あり、
     同じページの中で左右の端がそろっていないのが気になる、というご指摘（本郷様）。
     さらに個別指定で 780/840/860/880/940/980px も混ざっていて、全部で10種類近くあった。
     ベンチマークのバウンダリ行政書士法人（boundary.or.jp）を実測したところ、
     本文も見出しも表も同じ 957px で、コンテンツの幅は1種類だけだった。
     これにならって当サイトも1000pxの1種類に統一する。
     広くしたい／狭くしたいときは、この --rs-w の数字ひとつを変えれば全ページに効く。
     ※例外は3つだけ。ヒーローと実績ボックスと写真の帯（1240px・画面いっぱいの見せ場のため）、
       お問い合わせフォームの入力欄（640px・横に長い入力欄は打ちにくいため）、
       代表の写真（620px・引き伸ばすと粗くなるため）。 */
  --rs-w:        1000px;
  --rs-w-narrow: var(--rs-w); /* 旧「標準の内側幅」。統一後も class 名は残してある */
  --rs-w-text:   var(--rs-w); /* 旧「文章主体の内側幅」。同上 */
  --rs-pad:      130px;  /* セクション上下の余白（PC） */
  --rs-pad-sm:   112px;
  /* セクションの左右の余白
     2026-07-29：セクションの帯は画面いっぱい（1440pxの画面で1392px）に広がっていて、
     その中身は「max-width:1000px を持つ要素」と「持たない要素」が混ざっていた。
     持たない .rs-note（注意書き）だけが1392pxまで伸びて、
     すぐ上のカード1000pxと左右の端がそろっていなかった（本郷様ご指摘・実測）。
     要素ひとつずつに max-width を足すやり方は書き忘れがまた出るので、
     セクション側の左右の余白で内側を1000pxに絞る形にした。
     こうすると中の要素は何も指定しなくても1000pxで頭打ちになる。
     計算の中身：画面が1000pxより広ければ余った分を左右に半分ずつ、
     狭ければ最低24pxだけ空ける（スマホで文字が画面の端に触れないように）。
     ※ 100% ではなく 100vw（画面の幅）を使っている。
        余白の % は「自分の幅」ではなく「親の幅」を基準に計算される決まりで、
        ここはセクションを画面いっぱいに広げているぶん親より広いため、
        100% だと内側が1240pxになってしまった（実測して気づいた）。 */
  --rs-gutter:   max(24px, calc((100vw - var(--rs-w)) / 2));

  /* 角丸 */
  --rs-r:      16px;
  --rs-r-sm:   14px;
  --rs-r-pill: 999px;

  --rs-shadow:    0 4px 14px rgba(8, 44, 100, .04);
  --rs-shadow-md: 0 6px 18px rgba(8, 44, 100, .05);
  --rs-shadow-lg: 0 8px 24px rgba(8, 44, 100, .05);
}

/* -----------------------------------------------------------
   2. 土台
   ----------------------------------------------------------- */
body {
  font-family: var(--rs-font);
  color: var(--rs-text);
  font-size: 17.5px;
  line-height: 1.95;
  /* セクションを画面幅いっぱいに広げるため、はみ出しはここで止める */
  overflow-x: clip;
}
.rs h1, .rs h2, .rs h3, .rs h4 { color: var(--rs-navy); line-height: 1.6; }
.rs a { color: var(--rs-blue); }

/* 日本語の改行位置
   ブラウザは既定だと、日本語をほぼどの文字と文字の間でも折り返してよいことになっている。
   そのままだと「1回の包／括申請で」のように語の途中で切れることがある。
   これを防ぐのが word-break: auto-phrase（文節＝意味のかたまりの切れ目で折る）。

   2026-07-29 朝：語の途中で切れているとのご指摘を受け、サイト全体（.rs 以下すべて）に掛けた。
   2026-07-29 夜：今度は「行末の空きがバラバラで改行位置がおかしい」とのご指摘（本郷様）。
     1文字ずつ画面上の座標を測って行を復元したところ、同じ段落の中で
     「50字 / 58字 / 35字」「48字 / 16字」のように1行の文字数が最大10字も違っていた。
     原因は auto-phrase そのもので、長い文節が行末に入りきらないと丸ごと次の行へ送られるため。
     auto-phrase はもともと見出しやキャッチコピーなど数行で終わる短い文のための指定で、
     長い本文に掛けるものではない（Chromeの解説とCSS Text Level 4での位置づけ。Codexにも確認した）。
   2026-07-30：リード文・注記に残していた auto-phrase も、同じ理由でご指摘（本郷様）。
     ここで最後まで外し、文章はすべて文字単位の折り返しにそろえた。
     auto-phrase を残すのは見出しとカードのタイトルだけ（1〜2行で終わる短いもの）。
   → 本文は日本語のサイトの標準どおり、禁則処理だけを効かせて文字単位で折り返し、
     右端をそろえる。本文の中でここだけは切りたくない語は .rs-nb で個別に守る。
     ただし .rs-nb も長くすると同じことが起きるので、7字を超える語には付けない。

   3つとも「対応していないブラウザでは、これまでどおりの改行になるだけ」の指定なので、
   古いブラウザで崩れることはない。 */

/* サイト全体：禁則処理だけ。「っ ゃ ゅ ょ ー」などが行頭に来ないようにする */
.rs, .rs * { line-break: strict; }

/* 「行の長さをそろえる」（text-wrap: balance）を掛けてよいのは見出しだけ。

   2026-07-29 深夜：リード文で「該当しそうな飛行がある場合は、こちらのページもあわせて／
   ご覧ください。…」のように、1行目を半分ほどで切って2行に均していたのがおかしい、
   というご指摘（本郷様）。原因はこの balance で、
   「2行になるなら2行とも同じ長さにしよう」と働いて1行目を途中で切っていた。
   見出しやキャッチコピーなら見栄えが良くなるが、
   文章では「1行目は端まで使い、入らない分を次の行に送る」のが読み手の期待。
   → 文章（リード文・注記・カードの説明・箇条書き）からは全部外し、見出しだけに限定した。 */
.rs .rs-h2, .rs .rs-pagehead__title, .rs .rs-worryhead,
.rs .rs-creed-quote, .rs .rs-reason-catch, .rs .rs-plan__for {
  word-break: auto-phrase;
  text-wrap: balance;
}

/* リード文・注記・箇条書きも、本文と同じ扱いにする。
   ここに word-break: auto-phrase を残していたため、
   「…返信が届かない場合は、／迷惑メールフォルダを…」のように
   行末に大きな空きができて、文章の幅が他とそろっていないように見えていた。
   文節の切れ目で折るのをやめ、右端をそろえる。
   最後の行に数文字だけ残るのを避ける pretty だけ残す。 */
.rs .rs-lead, .rs .rs-note, .rs .rs-check li, .rs .rs-linklist__desc {
  text-wrap: pretty;
}
/* カードの中の説明文は、文節で折らない。
   カードは幅が266〜440pxしかなく、1行に15〜25字しか入らない。
   そこで文節（5〜7字）の切れ目で折ると、入りきらなかった分がまるごと次の行へ送られて
   行末に大きな空きができる（実測で266pxの行に96pxの空き＝4割近く）。
   文字単位で折って右端をそろえたほうが読みやすい。
   最後の行に数文字だけ残るのを避ける pretty だけ残してある。 */
.rs .rs-card__text, .rs .rs-colcard__text,
.rs .rs-plan__list li, .rs .rs-staffcard__text, .rs .rs-deflist dd {
  text-wrap: pretty;
}
/* カードや見出しのタイトルは「行の長さそろえ」を掛けない。
   「①ドローン・無人航空機飛行許可申請（DIPS2.0対応）」のように長い専門用語が入ると、
   行の長さをそろえるほうが優先されて「…無人航空機飛／行許可申請…」と
   語の途中で折れてしまう（実測）。
   語を切らないほうが大事なので、こちらは文節で折るだけにしてある。
   ※一覧の見出し（.rs-deflist dt）は外してある。列の幅が210pxしかなく、
     文節で折ると1行に123pxも空いた（実測）。表のセルも同じ理由で外した。 */
.rs .rs-card__title, .rs .rs-reason__title, .rs .rs-colcard__title,
.rs .rs-flow__title, .rs .rs-linklist__name, .rs .rs-plan__name {
  word-break: auto-phrase;
  text-wrap: pretty;
}
.rs .rs-deflist dt { text-wrap: pretty; }
/* スマホは1行が14〜20字しかなく、文節（5〜7字）で折ると
   入りきらなかった分がまるごと次の行へ送られて行末が大きく空く。
   幅の広い画面でしか文節折りは効かせない。 */
@media (max-width: 700px) {
  .rs .rs-card__title, .rs .rs-reason__title, .rs .rs-colcard__title,
  .rs .rs-flow__title, .rs .rs-linklist__name, .rs .rs-plan__name,
  .rs .rs-h2, .rs .rs-pagehead__title, .rs .rs-worryhead,
  .rs .rs-creed-quote, .rs .rs-reason-catch, .rs .rs-plan__for {
    word-break: normal;
  }
}
/* ここだけは絶対に切りたくない、という語に付ける（<span class="rs-nb">…</span>）。
   本文は文字単位で折り返す（＝右端をそろえる）ので、
   「レベル3・3.5」のようにサイトの中心になる用語だけ、この class で切れないようにしている。 */
.rs-nb { white-space: nowrap; }

/* セクション：Arkheのコンテンツ枠の内側でも画面幅いっぱいに広げる。
   上下は0にして帯同士をぴったり接続（WPがブロック間に入れる自動マージンを消す） */
.rs-hero, .rs-pagehead, .rs-svcintro, .rs-sec, .rs-creed, .rs-stats, .rs-ctaband, .rs-contact, .rs-spot, .rs-crown {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* セクション：地色のバリエーションを class で切り替える */
.rs-sec { padding: var(--rs-pad) var(--rs-gutter); }
.rs-sec--white  { background: #fff; }
.rs-sec--pale   { background: var(--rs-pale); }
.rs-sec--light  { background: var(--rs-bg); }
.rs-sec--light2 { background: var(--rs-bg-2); }
.rs-sec--cream  { background: var(--rs-cream); }
.rs-sec--navy   { background: var(--rs-navy-deep); color: #fff; padding: var(--rs-pad-sm) var(--rs-gutter); }
.rs-sec--navy h2, .rs-sec--navy h3 { color: #fff; }
.rs-sec--sm { padding: var(--rs-pad-sm) var(--rs-gutter); }

/* 内側の幅 */
.rs-inner        { max-width: var(--rs-w); margin-inline: auto; }
.rs-inner--narrow{ max-width: var(--rs-w-narrow); margin-inline: auto; }
.rs-inner--text  { max-width: var(--rs-w-text); margin-inline: auto; }

/* 蛍光ペン風の下線（デザイン案の強調表現） */
.rs-hl {
  font-weight: 800; color: var(--rs-navy);
  background: linear-gradient(transparent 62%, #FFE3BB 62%);
  padding: 0 2px;
}
.rs-hl--blue {
  font-weight: 700; color: var(--rs-navy); padding: 0 2px;
  background: linear-gradient(transparent 64%, #D8E7F8 64%);
}

/* -----------------------------------------------------------
   2-1b. ヘッダー右の連絡先（functions.phpのフックから出力）
   ----------------------------------------------------------- */
/* グローバルナビ。項目が9つ＋「対応サービス」の子メニュー8つになり、
   Arkhe初期設定の文字14.4px・左右余白12pxのままだと横幅が足りず、
   ヘッダーのグリッドでロゴの列が潰れてロゴが消えてしまう（実際に消えた）。
   文字と余白を詰めてロゴの幅221pxを確保している。
   これ以上メニューを増やすときは、ここの数値を下げるか項目を減らすこと */
/* ※セレクタは Arkhe と同じ「.c-gnav__li > .c-gnav__a」で書くこと。
     「.c-gnav > li > a」と書くと、Arkheの .c-gnav__li > .c-gnav__a { padding:16px 12px }
     の方が指定が強く、余白だけ効かない（文字サイズは効くので気づきにくい） */
/* 2026-07-28 ヘッダーを2段組み（1段目＝ロゴ＋連絡先／2段目＝メニュー）にしたので、
   ロゴと取り合いにならなくなった。詰めていた文字と余白を通常の大きさに戻している。 */
/* 2026-09-01：メニューが12項目になったので、画面幅に合わせて自動で詰まるようにした。
   固定値だと 1151px の画面で 1176px になり 25px はみ出していた（実測）。
   clamp( 最小, 可変, 最大 ) は「狭い画面では小さく、広い画面では最大で止まる」書き方。
   同日「コラム」が増えて13項目になり、幅1000pxで左右10pxずつはみ出したので
   下限をさらに下げた（実測：1000pxで1020px → 975px）。
   ★横並びのメニューはここが限界。これ以上増やすなら、項目を減らすか、
     ハンバーガーに切り替える幅（いまは999px以下）を広げること★ */
.c-gnav__li > .c-gnav__a {
  font-size: clamp(13px, 1.18vw, 17px);
  padding-left: clamp(5px, .5vw, 16px);
  padding-right: clamp(5px, .5vw, 16px);
}

/* ===== ヘッダー2段組み（PCのみ） =====
   ご要望「ロゴを大きく／メニューはロゴの下」への対応。
   Arkheのヘッダーは grid で「menu / left / center(ロゴ) / right(ナビ＋連絡先) / search」の
   横1列。ここでは行をもう1本足して、ナビだけを2段目へ落としている。
   肝は .l-header__right の display:contents で、これを入れると
   「ナビ」と「連絡先」が入れ物を素通りして直接グリッドの升目に置けるようになる。
   （入れ物のままだと、中の2つを別々の行に分けられない）
   スマホはArkheのドロワー（三本線メニュー）のままなので、この指定は1000px以上だけ。 */
@media (min-width: 1000px) {
  /* !important を付けている理由：Arkheが同じプロパティを後から指定していて、
     付けないと1段組みのまま（ナビが2段目に落ちない）。実際に一度そうなった。 */
  .l-header .l-header__body {
    grid-template-areas: "menu left center right search" "nav nav nav nav nav" !important;
    grid-template-columns: auto auto auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    padding-top: 14px;
    padding-bottom: 0;
  }
  .l-header .l-header__right { display: contents !important; }
  .l-header .rs-headctas { grid-area: right !important; justify-self: end; align-self: center; }
  /* 2026-07-29：連絡先ブロックを消したので、両脇（left / right）を同じ 1fr にして
     真ん中の升目（＝ロゴ）が画面の中央にくるようにしている。
     連絡先を戻すときは、この2行を消せば元の「ロゴ左・連絡先右」に戻る */
  .l-header .l-header__body { grid-template-columns: auto 1fr auto 1fr auto !important; }
  /* 2026-07-29：ロゴ下の薄い罫線は不要とのことで削除（山角様ご指示）。
     戻したいときは border-top: 1px solid var(--rs-line); を足す */
  .l-header .c-gnavWrap {
    grid-area: nav !important; width: 100%;
    margin-top: 12px;
  }
  .l-header .c-gnav { justify-content: center; }
  /* 2026-07-29：連絡先を消したのでロゴを中央へ（山角様ご指示）。左に戻すなら start */
  .l-header .l-header__center { justify-self: center; }
  /* ロゴ。元データが2048×375あるので、この大きさでも粗くならない */
  .l-header .l-header__logo.has-image img { height: 66px; width: auto; max-width: none; }
}
@media (min-width: 1000px) and (max-width: 1180px) {
  /* 文字と余白は上の clamp( ) で自動的に詰まるので、ここではロゴだけ小さくする */
  .l-header .l-header__logo.has-image img { height: 58px; }
}

/* マウスを乗せると出る子メニュー。
   開閉の仕組み（Arkheの :hover で visibility を切り替える指定）はそのまま使い、
   見た目だけ濃紺ベタから白いカードに変えている */
.c-gnav .sub-menu {
  background: #fff; color: var(--rs-navy);
  border: 1px solid var(--rs-line-2); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(8,44,100,.14); padding: 6px 0; min-width: 236px;
  --ark-color--border: var(--rs-line);
}
.c-gnav .sub-menu > li > a {
  font-size: 13.5px; padding: 11px 18px; color: var(--rs-navy);
  line-height: 1.5; white-space: nowrap;
}
/* Arkheは項目の上に半透明の白を重ねてホバーを表現している（白背景では見えない）ので、
   代わりに文字と地色を変える */
.c-gnav .sub-menu > li > a:hover { background: var(--rs-blue-pale); color: var(--rs-blue); }
.c-gnav .sub-menu > .menu-item:not(:last-child) { border-bottom: 1px solid #F0F4FA; }
/* 吹き出しの三角も白に */
.c-gnav__depth1::before { background-color: #fff; }

/* 親の「対応サービス」に、子があることを示す小さな下向き三角を付ける。
   ※リンク(a)の ::after はArkheがホバー時の下線に使っているので触らないこと。
     ここを奪うと下線が74px幅の変な線になる（実際そうなった）。li 側に付ける */
.c-gnav__li.menu-item-has-children > .c-gnav__a { padding-right: 18px; }
.c-gnav__li.menu-item-has-children::after {
  content: ""; position: absolute; right: 6px; top: 50%; margin-top: -2px;
  border: 4px solid transparent; border-top-color: currentColor;
  opacity: .55; pointer-events: none;
}

/* 2026-07-29：ヘッダーの電話番号と「無料相談」ボタンは非表示に（山角様ご指示）。
   HTMLからは消していないので、戻したくなったら display の行を消すだけでよい。
   ★消したことでロゴが中央に来る指定（上のヘッダー2段組みの中）と対になっている★ */
.rs-headctas { display: none; align-items: center; gap: 12px; flex-shrink: 0; margin-left: 10px; }
.rs-headctas__tel { text-decoration: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.rs-headctas__num {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--rs-font-en); font-weight: 800; font-size: 17.5px;
  color: var(--rs-navy); letter-spacing: .02em;
}
.rs-headctas__hours { font-size: 11.5px; color: var(--rs-muted); }
a.rs-headctas__btn, a.rs-headctas__btn:visited {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rs-orange); color: #fff;
  font-size: 13.5px; font-weight: 700; padding: 10px 18px;
  border-radius: var(--rs-r-pill); text-decoration: none;
  box-shadow: 0 4px 12px rgba(232,125,10,.14); transition: .25s;
}
a.rs-headctas__btn:hover { background: var(--rs-orange-dark); transform: translateY(-1px); }
/* 画面幅が狭くなるほどナビが場所を取り、ヘッダーのグリッドでロゴが潰れる
   （1120〜1280pxでロゴがほぼ消えていた）。段階的に詰めて、
   ロゴが最低でも170px前後の幅を保てるようにしている。
   電話番号はドロワーと本文の相談導線にもあるため、狭いときは隠してよい */
/* 2段組みにしたことで1240px前後でも電話番号を出せるようになったため、
   隠すのはドロワーに切り替わる1000px未満だけにした */
@media (max-width: 999px) {
  .rs-headctas__tel { display: none; }
}
@media (max-width: 600px) { .rs-headctas { margin-left: 8px; } a.rs-headctas__btn { padding: 9px 16px; font-size: 13px; } }

/* -----------------------------------------------------------
   2-2. ヒーロー（最上部）
   2026-07-28 全面的に作り替え。
   これまで：写真を画面いっぱいに敷き、青いグラデーションで覆って、左側に白い文字を置く形。
   これから：ベンチマークのバウンダリLPと同じ「角丸の写真パネルを1枚置き、
             文字はパネルの下中央にオレンジの帯で乗せる」形。
   ・写真は全面ではなく、左右に余白を残した角丸パネル（写真そのものを見せるため）
   ・写真を暗く覆うのをやめ、文字の背後だけ帯を敷く（＝どんな写真でも文字が読める）
   ・パネルの背後、画面の左右に薄いオレンジの丸を置く（バウンダリの淡い黄色の模様と同じ役割）
   ・説明文とボタンはパネルの外（白地）に出して、写真を隠さないようにした
   8月の撮影後は、下の --rs-hero-photo を実際の集合写真のURLに差し替えるだけでよい。
   ----------------------------------------------------------- */
.rs-hero {
  /* 2026-08-21：山角様ご指示で新しい集合写真（DSCF1156）に差し替え */
  --rs-hero-photo: url('../../uploads/2026/08/hero-staff-260821.jpg');
  position: relative;
  background: #fff;
  color: var(--rs-text);
  /* 2026-08-17：写真を画面幅いっぱいにしたので左右の余白をゼロに。
     上も、ヘッダーを写真の上に重ねるようになったのでゼロ。
     下の118pxは実績ボックスが食い込むぶん（2026-07-29 ボタン削除で18px詰めた） */
  padding: 0 0 118px;
  text-align: center;
  overflow: hidden; /* 写真が画面外にはみ出しても横スクロールが出ないように */
}
/* 2026-08-17：背後の薄いオレンジの丸2つは非表示にした。
   写真を全幅にしたことで丸を置く左右の余白が無くなり、写真の裏に完全に隠れるため。
   角丸パネルの形に戻すときは display を消せばそのまま復活する */
.rs-hero::before, .rs-hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  display: none;
}
.rs-hero::before { top: 90px;  left: -180px;  width: 340px; height: 340px; background: rgba(245,166,35,.16); }
.rs-hero::after  { bottom: 40px; right: -200px; width: 400px; height: 400px; background: rgba(245,166,35,.12); }
/* 2026-08-17：max-width を外して写真を画面幅いっぱいに。
   中の説明文は .rs-hero__lead 側で 780px に収まるので、ここを外しても文章は広がらない */
.rs-hero > .wp-block-group__inner-container { max-width: none; margin-inline: auto; position: relative; z-index: 1; }

/* 写真本体。2026-08-17に角丸パネル → 画面幅いっぱいの1枚に変更。

   高さの決め方：min(56.25vw, 画面の高さ-20px) で、ふだんは16:9（横幅の56.25%が9/16）、
   ただし画面が横長のときは1画面に収まる高さで頭打ちにする。
   20px残しているのは、次のセクションが下にちらっと見えて「まだ続きがある」と分かるため。
   svh（小さいほうの画面の高さ）を使うのは、スマホでアドレスバーが出入りしても
   写真の高さがガクガク変わらないようにするため。
   min-height は、縦に極端に短い画面でも人物が潰れないようにする下限。

   ★ aspect-ratio ではなく height で書いている理由（2026-08-17に踏んだ）：
   aspect-ratio と max-height を両方書くと、高さが頭打ちになったぶん
   「比率を保つために横幅のほうが縮む」。実際、1600pxの画面で写真が1564pxになり、
   左右に18pxずつ白い隙間ができた。全幅にしたい要素に aspect-ratio は使わないこと。

   padding-top が大きいのは、上に重なるヘッダーのぶんを空けておくため
   （文字は下寄せなので普段は効かないが、文章が伸びたときにロゴの下へ潜らない） */
.rs-hero__photo {
  position: relative;
  border-radius: 0; overflow: hidden;
  background-image: var(--rs-hero-photo);
  /* 2026-08-17：写真の差し替えに合わせて 26% → top。
     新しい写真は人物が大きく写っていて、中寄せにすると顔の位置が上がり、
     ヘッダーの白いレイヤーと重なってしまう。top にすると人物が最も下に来る。
     引き換えに足元が切れるが、顔が見えることを優先した。 */
  background-size: cover; background-position: center top;
  width: 100%; height: min(56.25vw, calc(100svh - 20px)); min-height: 520px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 150px 32px 44px;
}
/* 写真の下側だけをうっすら暗くする。帯と帯のすき間に写真の明るい部分が入っても
   文字のまわりが白飛びして見えないようにするための保険 */
.rs-hero__photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,22,48,0) 42%, rgba(6,22,48,.42) 100%);
}
/* width:100% が要る理由：写真パネルは縦並びのflexで、align-items:center だと
   中の見出しが「文字の長さぶん」に膨らみ、スマホで帯が画面からはみ出す（実際そうなった）。
   幅を親いっぱいに固定しておけば、長い行は普通に折り返す。 */
.rs-hero__photo > * { position: relative; z-index: 1; width: 100%; }

/* 文字に敷く帯。
   display:inline と box-decoration-break:clone の組み合わせが肝で、
   これが無いと改行した2行目に帯の左右の余白が付かず不格好になる。 */
.rs-hero__eyebrow, .rs-hero .rs-hero__title, .rs-hero__creed { margin: 0; }
.rs-hero__eyebrow > span, .rs-hero .rs-hero__title > span, .rs-hero__creed > span {
  display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* 肩書き：濃紺の細い帯
   2026-08-21：山角様ご指示でPCの文字を約1.5倍に（15.5px → 23px） */
.rs-hero__eyebrow { margin-bottom: 16px; }
.rs-hero__eyebrow > span {
  background: rgba(6, 30, 66, .82); color: #fff;
  font-size: 23px; font-weight: 700; letter-spacing: .04em;
  padding: .34em .8em; line-height: 2.2;
}
/* 見出し：オレンジの帯。1行ごとに帯が切れる
   2026-08-21：山角様ご指示でPCの文字を約1.5倍に（38px → 57px）。
   clamp(下限, 画面幅に連動, 上限) にしているのは、1440pxで57pxにすると
   1024pxのノートパソコンでは1行に収まらなくなるため。
   ★上限を上げないこと★ 「空を飛ぶドローンも、大手航空会社も。」は18文字で、
   1行に収めるには「画面幅 ÷ 19」が上限。1440pxなら72pxまで、1024pxなら50pxまで。
   3.7vw は 1440px でちょうど53px（＝38pxの1.4倍）になる値。
   ※2026-08-21：いったん1.5倍(57px)にしたが、山角様のご指示で1.4倍に下げた。
     肩書きは1.5倍(23px)のまま。 */
.rs-hero .rs-hero__title > span {
  background: var(--rs-orange); color: #fff;
  font-size: clamp(38px, 3.7vw, 53px); font-weight: 900; letter-spacing: .02em;
  padding: .16em .34em; line-height: 1.9;
}
/* 信条：白い帯に濃紺。帯の色を変えて、見出しとの主従をはっきりさせる */
.rs-hero__creed { margin-top: 16px; }
.rs-hero__creed > span {
  background: rgba(255,255,255,.94); color: var(--rs-navy);
  font-size: 20px; font-weight: 800; letter-spacing: .02em;
  padding: .3em .7em; line-height: 2;
}

/* 写真パネルの外（白地）に置く説明文とボタン
   2026-08-21：左右の余白（padding）が無く、スマホで文字が画面の端に付いていた
   （山角様ご指摘「テキスト幅がスマホの枠ギリギリすぎる」）。 */
.rs-hero .rs-hero__lead {
  font-size: 16.5px; color: var(--rs-text); line-height: 2.1; font-weight: 500;
  margin: 34px auto 26px; max-width: 780px; padding: 0 20px;
}
.rs-hero .rs-btns.rs-btns { margin-top: 0; justify-content: center; }
/* ヒーローの地が白になったので、2つ目のボタンは白抜き(--ghost)ではなく
   白地用の青い線ボタン(--outline)を使う。クラスの入れ替えは page-top.html 側で対応済み。 */

@media (max-width: 900px) {
  .rs-hero { padding: 0 0 120px; }
  /* ★2026-08-21：スマホで集合写真の両端が切れる件を直した★
     それまでは高さを先に決めて cover で敷いていたため、横長の写真（3:2）を
     縦長の画面に当てることになり、幅390pxの端末では写真の横43%しか見えず、
     11人のうち両端の人が体の途中で切れていた。数式でいうと
     「見える横幅の割合＝面の比率÷写真の比率」なので、面が縦長になるほど必ず切れる。

     直し方：狭い画面では写真を「背景として敷き詰める」のをやめ、
     横幅ぴったり（background-size: 100% auto）で上に置き、
     文字の帯はその下の濃紺の面に降ろした。これで写真は一切切れない。

     --rs-hero-top …… ヘッダー（56px）に頭がかからないよう写真を下げる量
     --rs-hero-imgh … 写真の高さ。いまの集合写真 1800×1199 の比率から 1199÷1800＝66.61%。
                       ★写真を差し替えたら、この数字も新しい比率に直すこと★ */
  /* ★2026-08-21（3回目）：山角様ご指示★
     「スマホ版のヒーローはスマホ用に作って。集合写真に重ならないように
       下に文字を大きく表示して。背景はオレンジ一色で良い」

     2回目までは写真に文字を食い込ませていた（--rs-hero-over）が、その指定はやめた。
     いまの組み立ては上から順に
       ① 写真 …… 画面の横幅ぴったり。切らないので11人全員が写る
       ② すき間 30px
       ③ 肩書き・見出し …… オレンジ一色の面に白抜き。文字は写真にかからない

     地がオレンジになったので、文字に敷いていた帯（オレンジ・濃紺）はやめた。
     オレンジの上にオレンジの帯を置いても見えないうえ、帯の左右の余白ぶん
     1行に入る文字数が減って、文字を大きくできなくなるため。

     --rs-hero-top …… ヘッダー（56px）に頭がかからないよう写真を下げる量
     --rs-hero-imgh … 写真の高さ。いまの集合写真 1800×1199 の比率から 1199÷1800＝66.61%。
                       ★写真を差し替えたら、この数字も新しい比率に直すこと★ */
  .rs-hero__photo {
    --rs-hero-top: 40px;
    --rs-hero-imgh: 66.61vw;
    background-size: 100% auto; background-position: center var(--rs-hero-top);
    background-repeat: no-repeat; background-color: var(--rs-orange);
    height: auto;
    /* 中身を上から順に置く（PCは下寄せ） */
    justify-content: flex-start;
    /* 写真が切れないための保険。padding-top だけでも足りているが、
       あとで余白を詰めたときに写真の下が欠けないよう下限を決めておく */
    min-height: calc(var(--rs-hero-top) + var(--rs-hero-imgh) + 34px);
    /* 2026-08-21：山角様ご指示「帯を狭くして。マージンが空きすぎ。今の半分でOK」。
       写真の下のすき間 30→15px、下の余白 42→21px。
       この2つと下の .rs-hero__eyebrow の margin-bottom（18→9px）で
       オレンジの帯の高さが決まる（390pxで約173px→約128px） */
    padding: calc(var(--rs-hero-top) + var(--rs-hero-imgh) + 15px) 20px 21px;
  }
  /* 文字が写真に重ならなくなったので、写真を暗くする膜は要らない */
  .rs-hero__photo::before { content: none; }
  /* ★行の高さは「入れ物のタグ」側でも決まる★
     文字の大きさは中の <span> に書いているが、行と行の間隔は
     h1・p そのものの文字サイズ（このテーマでは35px前後）から決まってしまう。
     入れ物側にも同じ値を書かないと、25pxの文字なのに行間が56px空く（実際そうなった）。 */
  .rs-hero .rs-hero__title { font-size: clamp(15px, 4.7vw, 34px); line-height: 1.7; }
  .rs-hero__eyebrow { font-size: clamp(11px, 3.0vw, 15px); line-height: 1.75; }
  /* 肩書き：オレンジの面に白抜き。帯をやめたぶん字間を広げて締める */
  .rs-hero__eyebrow { margin-bottom: 9px; }
  .rs-hero__eyebrow > span {
    background: none; color: #fff; padding: 0;
    font-size: clamp(12px, 3.4vw, 17px); line-height: 1.75; letter-spacing: .06em;
  }
  /* 見出し：オレンジの面に白抜きの極太。
     ★大きさの決め方★（2026-08-21・山角様ご指示「2行に納めて」）
     「空を飛ぶドローンも、大手航空会社も。」は18文字。これを1行に収めるので、
     上限は「（画面幅 − 左右の余白40px）÷ 18」。
       320px → 15.5px ／ 390px → 19.4px ／ 430px → 21.6px ／ 600px → 31px
     4.7vw は 320px で15.0px、390px で18.3px。どの幅でも上限の内側に入る。
     ★ここを上げると3行・4行に増える★ 字間（letter-spacing）を0にしているのも、
     18文字ぶんの幅を1文字でも稼ぐため。 */
  .rs-hero .rs-hero__title > span {
    background: none; color: #fff; padding: 0;
    font-size: clamp(15px, 4.7vw, 34px); font-weight: 900;
    line-height: 1.7; letter-spacing: 0;
  }
  .rs-hero__creed > span { font-size: 16px; }
}
@media (max-width: 600px) {
  /* 左右の余白は20px（2026-08-21・山角様ご指摘「テキスト幅がスマホの枠ギリギリすぎる」）。
     大きさは上の900px以下のブロックで画面幅に連動させているので、ここでは指定しない */
  .rs-hero { padding: 0 0 112px; }
  .rs-hero__creed > span { font-size: 12.5px; }
  .rs-hero .rs-hero__lead { font-size: 14.5px; }
}
/* iPhone SE のような幅320〜360pxの端末。
   見出しは上の 4.7vw で 320px→15.0px、360px→16.9px と、どちらも1行に収まるので
   ここでの上書きは不要（以前は固定値を入れていたが外した）。
   肩書きは23文字あり、字間を詰めないと1行に入らない */
@media (max-width: 360px) {
  .rs-hero__eyebrow, .rs-hero__eyebrow > span { font-size: 11px; }
  .rs-hero__eyebrow > span { letter-spacing: .02em; }
}

/* -----------------------------------------------------------
   2-2b. トップだけ、ロゴとメニューをヒーロー写真の上に重ねる（2026-08-17）
   ----------------------------------------------------------- */
/* 仕組み：
   ふだんのヘッダーは position:sticky で「場所を取る」ので、その下からページが始まる。
   トップだけ position:fixed に変えると場所を取らなくなり、
   ヒーロー写真がページの一番上（＝ヘッダーの裏）まで自動でせり上がる。
   高さの数値をどこにも書かずに済むのが利点で、ロゴの大きさやメニューの行数を変えても
   ズレない。stickyと同じく、スクロールしても画面の上に残る。

   背景は2枚重ねで切り替えている。::before が白のグラデーション（写真の上にいるとき）、
   ::after が白ベタ（スクロールしたあと）。透明度だけを行き来させているのは、
   背景色と背景グラデーションの間では「ふわっと切り替わる」動きが作れないため。
   rs-scrolled が付くかどうかは functions.php の小さなスクリプトが決めている。
   角丸パネルの形に戻すときは、このブロックごと消せば元のヘッダーに戻る。 */
body.home .l-header {
  position: fixed; left: 0; right: 0; width: 100%;
  background: transparent;
}
body.home .l-header::before,
body.home .l-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  pointer-events: none; z-index: -1;
  transition: opacity .35s ease;
}
/* 白のグラデーション。ヘッダーより少し下まで伸ばしているのは、
   ヘッダーの中で終わらせると下端が線に見えて「白い帯」になってしまうため。

   色の止め位置は目分量ではなく、メニュー文字（#333）と写真のコントラスト比を
   実測して決めている。写真を差し替えたら必ず測り直すこと。

   2026-08-17①（旧写真）：ヘッダー+70px＝207px。42%を.80、74%を.34 にしたら
     メニュー文字が 4.14:1 で目安の4.5を下回った。66%で.62 を保つ形に変えて 5.72:1。
   2026-08-17②（今の写真に差し替え）：本郷様から
     「白のレイヤーが一番左の人の顔に重なる」とのご指摘。
     その人の顔は写真の上端から163pxの位置にあり、207pxのレイヤーが顔の上半分を
     覆っていた。155px（ヘッダー+18px）まで詰めると顔にかからない。
     ただ短くしたぶんメニュー文字の裏が薄くなるので、濃さの配分を上げて補った。
     実測：この配分で 7.45:1（詰める前は 8.08:1、配分を変えずに詰めると 4.58:1）。 */
body.home .l-header::before {
  height: calc(100% + 18px);
  background: linear-gradient(180deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.93) 45%,
    rgba(255,255,255,.72) 75%,
    rgba(255,255,255,.30) 90%,
    rgba(255,255,255,0) 100%);
  opacity: 1;
}
/* スクロールしたあとの白ベタ */
body.home .l-header::after {
  height: 100%;
  background: #fff;
  box-shadow: 0 2px 14px rgba(8,44,100,.10);
  opacity: 0;
}
body.home.rs-scrolled .l-header::before { opacity: 0; }
body.home.rs-scrolled .l-header::after  { opacity: 1; }
/* スマホのドロワー（三本線メニュー）を開いている間は、Arkheがボタンの色を白に変える。
   白のグラデーションが残っているとボタンが見えなくなるので、両方とも消す */
[data-drawer="opened"] .l-header::before,
[data-drawer="opened"] .l-header::after { opacity: 0 !important; }

/* -----------------------------------------------------------
   2-3. 下層ページの見出し帯（全下層ページの先頭に置く）
   ----------------------------------------------------------- */
/* Arkheが固定ページの先頭に出す独自のタイトル帯を隠す。
   各ページの先頭に下の .rs-pagehead を置いているため、そのままだと二重になり、
   画像未設定の大きなグレーの帯が出てしまう。投稿(コラム・お知らせ)側では残す */
body.page:has(.rs-pagehead) .l-content__top.p-topArea { display: none; }
/* 2026-08-20：山角様ご指摘「せっかく写真があるのに、かぶせた膜が強すぎて写真が見えない。
   写真をもっとメインに」への対応で、中央寄せの帯から「写真が主役のヒーロー」に作り替えた。

   仕組みは背景に2枚を重ねるだけ（上に書いたほうが手前に来る）。
     --rs-ph-veil  … 文字を読ませるための紺の膜。左が濃く、右へ行くほど薄くなる横グラデーション
     --rs-ph-photo … ページごとの写真。下の 24. で1ページ1行ずつ指定している
   左に文字・右に写真、と役割を分けたので、写真の右半分ははっきり見える。
   膜はここ1か所だけなので、ページを増やすときは 24. に写真の行を足すだけでよい。

   ★他のAIにも相談したうえでこの形にした★
   案は3つあった。(A)横グラデーションで左に文字（採用）／(B)膜を全体に薄くして中央寄せのまま／
   (C)左右2カラムで右半分に写真。(B)は写真ごとに白文字の読みやすさが変わって8ページ分の
   保証ができない。(C)は「包括申請」のような4文字の見出ししか置けないため左側が空いてしまう。 */
.rs-pagehead {
  /* 2026-08-21：山角様ご指示で、膜の色を紺から黒・グレーに変えた。
     同時に「シャドーが暗すぎる」とのご指摘を受けて、いちばん濃いところを
     93%→78%に下げている。文字の読みやすさは実測で確認済み（下の覚え書き参照）。 */
  --rs-ph-veil: linear-gradient(96deg,
      rgba(10, 12, 16, .78) 0%, rgba(15, 17, 22, .66) 26%,
      rgba(20, 23, 28, .32) 58%, rgba(20, 23, 28, .10) 100%);
  background-color: #14171C;
  /* 写真を指定していないページ（プライバシーポリシー）は、var() の2つめ＝紺の地色が使われる。
     2026-08-20：写真の指定を 24. で body 側に移したので、既定値もここ（変数の宣言）ではなく
     使う側のフォールバックに置いている。宣言のまま残すと body の指定より強く、写真が出なくなる */
  background-image: var(--rs-ph-veil), var(--rs-ph-photo, linear-gradient(150deg, #005192 0%, #0068B7 100%));
  /* 写真だけページ別の位置を渡せるようにし、手前の膜は今までどおり中央に固定する */
  background-size: cover; background-position: center, var(--rs-ph-pos, center); background-repeat: no-repeat;
  /* アイコンを外したぶん帯が低くなるので、高さは min-height で確保する。
     写真（1600×620）は画面幅いっぱいに広げると必ずこれより高くなるので、上下は切れても破綻しない */
  min-height: 380px;
  display: flex; align-items: center;
  padding: 56px var(--rs-gutter); text-align: left;
}
/* 帯そのものは画面幅いっぱい、中の文字だけ本文と同じ1000pxの位置にそろえる */
.rs-pagehead > .wp-block-group__inner-container { width: 100%; max-width: var(--rs-w); margin-inline: auto; }
/* .rs h1 に負けないよう、クラスを2つ重ねて指定している */
.rs-pagehead .rs-pagehead__title {
  color: #fff; font-size: clamp(28px, 4.2vw, 52px); font-weight: 800; line-height: 1.4; margin: 0;
  /* 空や雲、花火の光など明るい部分に文字が重なっても輪郭が消えないよう影を落とす。
     2026-08-21：膜を薄くしたので、近くの小さい影＋遠くの大きい影の2枚重ねに変えた。
     実測では文字の面のうち3%ほどが「白とのコントラスト3未満」になる位置に当たるため、
     膜を濃くする代わりにこちらで補っている（膜を濃くすると「暗すぎる」のご指摘に逆行するため）。 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 22px rgba(0, 0, 0, .72);
}
/* 見出しの下のオレンジ棒。形は本文の見出し（.rs-h2::after）と同じで、位置だけ左端 */
.rs-pagehead .rs-pagehead__title::after {
  content: ""; display: block; width: 52px; height: 3px; border-radius: 2px;
  background: var(--rs-orange); margin: 22px 0 0;
}
.rs-pagehead .rs-pagehead__lead { color: #D9E7F9; font-size: 17.5px; margin: 18px 0 0; max-width: min(var(--rs-w-text), 100%);
  text-align: left; }
@media (max-width: 900px) {
  .rs-pagehead {
    --rs-ph-veil: linear-gradient(120deg,
        rgba(10, 12, 16, .78) 0%, rgba(15, 17, 22, .64) 42%, rgba(20, 23, 28, .30) 100%);
    min-height: 300px; padding: 48px var(--rs-gutter);
  }
}
@media (max-width: 600px) {
  /* スマホは横幅が狭いので、横グラデーションだと写真がほとんど見えない。
     上を薄く・下を濃くする縦のグラデーションに切り替えて、写真の上半分を見せ、文字は下に置く */
  .rs-pagehead {
    --rs-ph-veil: linear-gradient(180deg,
        rgba(12, 14, 18, .34) 0%, rgba(12, 14, 18, .60) 52%, rgba(12, 14, 18, .78) 100%);
    min-height: 250px; padding: 40px 18px 30px; align-items: flex-end;
  }
  .rs-pagehead .rs-pagehead__title { font-size: 26px; }
  .rs-pagehead .rs-pagehead__title::after { margin-top: 16px; }
  .rs-pagehead .rs-pagehead__lead { font-size: 15px; }
}

/* 2026-09-01：「投稿ページ」に設定したコラム一覧と、将来のコラム記事用。
   この2種類はHTML内に .rs-pagehead を置けないため、Arkhe標準の見出し帯だけを
   写真未設定時の .rs-pagehead と同じ寸法・色・文字にそろえる。
   固定ページの帯を隠す body.page:has(.rs-pagehead) とは別の指定にし、
   そちらの対象を広げない。 */
body.blog .l-content__top.p-topArea,
body.single-post .l-content__top.p-topArea {
  background: linear-gradient(150deg, #005192 0%, #0068B7 100%);
  min-height: 380px;
  display: flex; align-items: center;
  padding: 56px var(--rs-gutter); text-align: left;
}
body.blog .l-content__top.p-topArea .p-topArea__body.l-container,
body.single-post .l-content__top.p-topArea .p-topArea__body.l-container {
  width: 100%; max-width: var(--rs-w); margin-inline: auto; padding: 0;
}
body.blog .l-content__top.p-topArea .p-topArea__title.c-pageTitle,
body.single-post .l-content__top.p-topArea .p-topArea__title.c-pageTitle { text-align: left; }
body.blog .l-content__top.p-topArea .c-pageTitle__main,
body.single-post .l-content__top.p-topArea .c-pageTitle__main {
  color: #fff; font-size: clamp(28px, 4.2vw, 52px); font-weight: 800; line-height: 1.4;
  letter-spacing: normal; margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 22px rgba(0, 0, 0, .72);
}
body.blog .l-content__top.p-topArea .c-pageTitle__main::after,
body.single-post .l-content__top.p-topArea .c-pageTitle__main::after {
  content: ""; display: block; width: 52px; height: 3px; border-radius: 2px;
  background: var(--rs-orange); margin: 22px 0 0;
}
/* 記事が1本も無いときの一文（functions.php で文言を差し替えている）。
   左端に置くと広い画面で迷子になるので中央に寄せる。記事が入れば表示されなくなる。 */
body.blog .p-postList--notfound {
  text-align: center; font-size: 17.5px; color: var(--rs-muted);
  padding: 20px 0 40px;
}
/* パンくずの下から記事一覧／記事本文までが詰まらないよう、
   本文の外枠に .rs-sec と同じ上下余白を使う。左右はArkheの本文幅を保つ。 */
body.blog .l-content__body.l-container,
body.single-post .l-content__body.l-container {
  padding-top: var(--rs-pad); padding-bottom: var(--rs-pad);
}
@media (max-width: 900px) {
  body.blog .l-content__top.p-topArea,
  body.single-post .l-content__top.p-topArea {
    min-height: 300px; padding: 48px var(--rs-gutter);
  }
}
@media (max-width: 600px) {
  body.blog .l-content__top.p-topArea,
  body.single-post .l-content__top.p-topArea {
    min-height: 250px; padding: 40px 18px 30px; align-items: flex-end;
  }
  body.blog .l-content__top.p-topArea .c-pageTitle__main,
  body.single-post .l-content__top.p-topArea .c-pageTitle__main { font-size: 26px; }
  body.blog .l-content__top.p-topArea .c-pageTitle__main::after,
  body.single-post .l-content__top.p-topArea .c-pageTitle__main::after { margin-top: 16px; }
}

/* 下層ページの本文（文章が主体のブロック） */
.rs-body { max-width: var(--rs-w-text); margin-inline: auto; line-height: 1.95; }
.rs-body:not(:last-child) { margin-bottom: 24px; }
.rs-body > .wp-block-group__inner-container { max-width: var(--rs-w-text); margin-inline: auto; }
/* ここも2クラスにすること。短く書くとArkheに負けて、
   小見出しの上の余白42pxが16pxに、段落の下余白18pxが0になる */
.rs-body.rs-body h3 { font-size: 22px; margin: 44px 0 16px; }
.rs-body.rs-body p { margin: 0 0 26px; }
.rs-body.rs-body > .wp-block-group__inner-container > :first-child { margin-top: 0; }

/* チェックリスト（「こんな方におすすめ」など） */
.rs-check { max-width: var(--rs-w-text); margin-inline: auto; display: grid; gap: 12px; list-style: none; padding: 0; }
.rs-check li {
  background: #fff; border: 1px solid var(--rs-line); border-radius: var(--rs-r-sm);
  padding: 14px 18px 14px 58px; position: relative; font-size: 17px;
  box-shadow: var(--rs-shadow-md);
}
.rs-check li::before {
  content: "✓"; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--rs-sky); color: var(--rs-blue); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

/* 写真付き一覧（左に正方形の写真、右に文章） */
.rs-photolist {
  max-width: var(--rs-w-text); margin-inline: auto; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.rs-photolist__item {
  display: flex; align-items: center; gap: 16px;
  padding: 14px; background: var(--rs-white); border: 1px solid var(--rs-line-2);
  border-radius: 14px; box-shadow: var(--rs-shadow-md);
}
.rs-photolist__photo {
  display: block; width: 96px; height: 96px; flex-shrink: 0;
  border-radius: 12px; overflow: hidden;
}
.rs-photolist__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rs-photolist__text {
  min-width: 0; color: var(--rs-text); font-size: 16px; line-height: 1.85; text-wrap: pretty;
}
@media (max-width: 900px) {
  .rs-photolist { grid-template-columns: 1fr; }
  .rs-photolist__photo { width: 76px; height: 76px; }
}

/* 2026-08-20：対応サービスの個別ページだけ、ページ冒頭のチェックリストをPCで2列にした
   （山角様ご要望「全体的にデザインを工夫して」への対応）。
   7項目が1列に並ぶと最初の画面が縦に長くなり、読み始めが単調に見えるため。
   他のページ（料金表・実績・プライバシーポリシーなど）のチェックリストは
   項目数も文の長さもまちまちなので、今までどおり1列のまま。
   2列にすると「✓」を上下中央に置く指定（上の translateY）だと行数の違う隣どうしで
   高さがずれて見えるので、この形のときだけ丸を上端ぞろえにしている。 */
@media (min-width: 820px) {
  .rs-check--2col { grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: stretch; }
  .rs-check--2col li { padding: 16px 20px 16px 56px; }
  .rs-check--2col li::before { top: 17px; transform: none; }
}

/* 関連するサービスへのリンク一覧
   2026-07-29：カードの箱を4つ並べていたのを、行のリストに変えた（本郷様指示）。
   「サービス名＋ひとこと」しか入っていないのに箱にすると、中身に対して余白が大きく、
   間延びして見えるため。罫線で区切るだけにして、リンクであることは右の矢印で示す。
   箱に戻したいときは、HTML側を <div class="rs-inner rs-grid rs-grid--4"> ＋ .rs-card に戻す。 */
.rs-linklist {
  max-width: var(--rs-w); margin: 0 auto; padding: 0; list-style: none;
  border-top: 1px solid var(--rs-line);
}
.rs-linklist li { border-bottom: 1px solid var(--rs-line); }
.rs-linklist a {
  display: flex; align-items: baseline; gap: 4px 20px; flex-wrap: wrap;
  padding: 17px 36px 17px 4px; text-decoration: none; color: var(--rs-text);
  position: relative; transition: background-color .2s;
}
.rs-linklist a:hover { background: rgba(10, 77, 163, .05); }
.rs-linklist__name { font-weight: 700; color: var(--rs-blue); flex: 0 0 auto; min-width: 15em; }
.rs-linklist__desc { color: var(--rs-muted); font-size: 16px; flex: 1 1 auto; }
/* 右端の「＞」。線を2本引いた四角を45度傾けて作っている（画像を使わずに済む） */
.rs-linklist a::after {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--rs-blue); border-bottom: 2px solid var(--rs-blue);
  transform: translateY(-50%) rotate(-45deg);
}
@media (max-width: 700px) {
  /* 狭い画面ではサービス名とひとことを上下に分ける */
  .rs-linklist__name { min-width: 0; flex: 1 1 100%; }
}

/* 「名前＋その説明」を並べる一覧（リンクではないもの）
   2026-07-29：包括申請ページの「包括申請でカバーできない飛行」4つを、
   カードの箱から罫線区切りの行に変えた（本郷様指示）。
   箱にすると中身に対して余白が大きく間延びして見えるため、上の .rs-linklist と同じ見た目に揃えた。
   dl / dt / dd は「用語とその説明」を表すHTMLの書き方で、
   目で見て分かるだけでなく、読み上げソフトにも「この名前の説明はこれ」と正しく伝わる。
   箱に戻したいときは、HTML側を <div class="rs-inner--narrow rs-grid rs-grid--2"> ＋ .rs-card に戻す。 */
.rs-deflist {
  max-width: var(--rs-w); margin: 0 auto; padding: 0;
  border-top: 1px solid var(--rs-line);
  /* 左（名前）の列幅は、いちばん長い名前が折り返さない幅に自動で合わせる。
     ただし上限を全体の40%までとし、それより長い名前は折り返させる
     （事務所概要の「①ドローン・無人航空機飛行許可申請（DIPS2.0対応）」だけで
      左の列が477pxになり、他の短い項目の右が空きすぎていたため） */
  display: grid; grid-template-columns: fit-content(40%) 1fr;
}
.rs-deflist dt, .rs-deflist dd {
  margin: 0; padding: 17px 4px; border-bottom: 1px solid var(--rs-line);
}
/* 名前と説明の間の余白。gap ではなく padding で空けているのは、
   gap を使うと罫線がその分だけ途切れてしまうため */
.rs-deflist dt { padding-right: 28px; font-weight: 700; color: var(--rs-navy); }
.rs-deflist dd { color: var(--rs-muted); font-size: 16px; }
/* 水色の地では罫線だけだと一覧のまとまりが弱いため、白い面に載せる。
   白地のセクションと、すでに白い面を持つ rs-sec--panel には重ねない。
   --light と --pale は同じ色（#DCECF9）なので、両方を対象にする
   （flow.html の「カテゴリーⅠ〜Ⅲ」だけ --pale で、片方だけ白くなると不ぞろいになる） */
.rs-sec--light:not(.rs-sec--panel) .rs-deflist,
.rs-sec--pale:not(.rs-sec--panel) .rs-deflist {
  padding: 0 28px; border-top: 0; border-radius: var(--rs-r);
  background: var(--rs-white); box-shadow: var(--rs-shadow-md);
}
.rs-sec--light:not(.rs-sec--panel) .rs-deflist > :nth-last-child(-n + 2),
.rs-sec--pale:not(.rs-sec--panel) .rs-deflist > :nth-last-child(-n + 2) { border-bottom: 0; }
/* 申請の流れの「許可・承認」は、同じ内容の図と一覧を重ねず、
   見出しと写真を左、説明を右にまとめる。操作できない見出しは札で囲まない */
.rs-deflist--photo { display: block; }
.rs-deflist--photo .rs-deflist__row {
  display: grid; grid-template-columns: 42% 58%;
  border-bottom: 1px solid var(--rs-line);
}
.rs-deflist--photo dt,
.rs-deflist--photo dd { border-bottom: 0; }
.rs-deflist--photo dt {
  padding: 28px 32px 30px 4px; color: var(--rs-blue); font-weight: 700;
}
.rs-deflist--photo dd { padding: 28px 4px 30px 32px; line-height: 2; }
.rs-deflist__photo {
  display: block; width: 100%; margin-top: 16px; overflow: hidden; border-radius: 12px;
}
.rs-deflist__photo img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
}
@media (max-width: 900px) {
  .rs-deflist--photo .rs-deflist__row { grid-template-columns: 1fr; }
  .rs-deflist.rs-deflist--photo dt { padding: 24px 4px 0; border-bottom: 0; }
  .rs-deflist.rs-deflist--photo dd { padding: 18px 4px 26px; }
}
@media (max-width: 700px) {
  /* 狭い画面では名前と説明を上下に分ける（罫線は説明の下だけ） */
  .rs-deflist { grid-template-columns: 1fr; }
  .rs-deflist dt { padding: 16px 4px 0; border-bottom: none; }
  .rs-deflist dd { padding-top: 5px; }
  /* 白い面は残しつつ、本文幅を確保するため左右の余白だけ詰める */
  .rs-sec--light:not(.rs-sec--panel) .rs-deflist,
  .rs-sec--pale:not(.rs-sec--panel) .rs-deflist { padding-inline: 16px; }
}

/* 注意書き（できないこと・条件など）
   経緯：クリーム地＋オレンジの縦線 →（2026-07-29 午前）ほぼ白の面＋細い罫線
        →（2026-07-29 夕方）囲みそのものを廃止。
   囲む意味が分からない、地の色が変わるのが不自然、というご指摘（本郷様）を
   対応サービス・機体登録・イベントの3ページでいただいたため、15ページ分まとめて外した。
   前後の本文と同じ幅で流れる普通の文章にして、文字色だけ少し薄くして補足だと分かるようにしている。
   囲みに戻したいときは background / border / border-radius / padding の4行を足す。 */
.rs-caution {
  max-width: var(--rs-w-text); margin-inline: auto;
  color: var(--rs-muted); font-size: 16.5px;
}
/* 段落どうしがくっついて読みにくかったため、1行分の間隔を空ける */
.rs-caution p { margin: 0 0 24px; }
.rs-caution p:last-child { margin-bottom: 0; }

/* Googleマップの埋め込み（2026-07-22 住所があるので地図をというご要望）
   2026-07-29：お問い合わせページ → 事務所概要ページの最下部へ移動。
   あわせて幅を 820px（文章の幅）→ 1160px に広げ、
   同じページの「主な取扱業務」のカード（.rs-inner ＝ --rs-w）と左右をそろえた（本郷様指示）。 */
.rs-map {
  max-width: var(--rs-w); margin-inline: auto;
  border-radius: var(--rs-r-sm); overflow: hidden;
}
.rs-map iframe { display: block; width: 100%; }

/* -----------------------------------------------------------
   3. セクション見出し（英字ラベル＋日本語見出し＋オレンジの棒）
   ----------------------------------------------------------- */
/* 2026-07-29：SERVICE / REASON などの英字ラベルは不要とのことで非表示にした。
   HTMLからは消していないので、戻したくなったら display の行を消すだけでよい。
   消したぶん、日本語の見出し(.rs-h2)を44→54pxに大きくしている。 */
.rs-label {
  display: none;
  font-family: var(--rs-font-en);
  font-size: 13.5px; font-weight: 700; letter-spacing: .26em;
  color: var(--rs-blue); text-align: center; margin: 0 0 12px;
}
.rs-sec--navy .rs-label { color: #9DB6D8; }
/* 見出しの大きさ（2026-07-29 拡大）
   34px→44pxに。ベンチマークのバウンダリLPが51.6pxで、山角様から
   「向こうは大きくて見やすい」とご指摘をいただいたため。
   ただし当サイトは4列グリッドのカードを使う通常のサイト構成なので、
   51pxそのままだと見出しだけが浮く。44pxで頭打ちにしている。
   clamp(最小, 可変, 最大) は「画面が狭いと縮み、広いと44pxで止まる」指定。
   3.3vw は画面幅の3.3%。1334px以上で44pxに達する。
   ※文字を大きくする以上に効くのが「見出しまわりの余白」。
     下余白を18→32px（オレンジ棒がある見出しは実質52px）に広げている。 */
.rs-h2.rs-h2 {
  font-size: clamp(28px, 4vw, 54px); font-weight: 800; text-align: center;
  margin: 0 0 34px; letter-spacing: .01em; line-height: 1.42;
}
/* ★見出しの改行位置をそろえるための道具（2026-08-21・山角様ご指摘）★
   日本語は英語と違って単語の切れ目が無いので、ブラウザは文字と文字の間なら
   どこでも改行してしまう。そのため狭い画面では
   「航空法の専門家がド／ローン飛行をサポート」のように語の途中で割れていた。

   直し方：意味のかたまりを <span class="rs-wb"> で包む。
   inline-block にすると、そのかたまりの中では改行が起きなくなるので、
   改行は必ずかたまりとかたまりの間で起きる。幅が変わっても崩れない。
   ★1つのかたまりは9文字以内にすること★
     見出しは狭い画面で28px。iPhone SE（幅320px）だと見出しの枠が272pxしかなく、
     10文字（280px）を超えるかたまりは枠からはみ出してしまう。 */
.rs-wb { display: inline-block; }
/* スマホのときだけ改行する（<br class="rs-brsp">）。
   PCでは display:none にしてあるので改行そのものが起きない。
   .rs-wb だけでは行の長さが揃わず、最後の一言だけが行に落ちてしまう箇所で使う */
.rs-brsp { display: none; }
@media (max-width: 600px) { .rs-brsp { display: inline; } }
/* 一段小さい見出し
   2026-07-29：各サービスページの一番上に置く「こんなときにご相談ください」用（本郷様指示）。
   ページの主役は見出し帯のH1なので、その直後に来るこの見出しだけ小さくして competing させない。
   クラスを2つ重ねているのは、上の .rs-h2.rs-h2 と同じ強さにして後勝ちさせるため。 */
.rs-h2.rs-h2--sm {
  font-size: clamp(21px, 2.4vw, 30px); margin-bottom: 26px;
}
/* クラス2つ重ね＝この下の .rs-h2::after と、狭い画面用の指定の両方より強くするため */
.rs-h2.rs-h2--sm::after { width: 40px; margin-top: 14px; }

/* 見出しの上に小さく乗せるプラン名（顧問プランページの「プレミアムプラン」）
   2026-07-29：「プレミアムプラン｜ドローンと外国人材の法務を、ひとつの窓口で」を
   2段に分けた（本郷様指示）。プラン名を小さく、ひとことは見出しの大きさのまま。
   書き方は上の .rs-worryhead と同じで、見出しの中の <span> を block にして改行している。 */
.rs-premiumhead > span {
  display: block; font-size: clamp(15px, 1.6vw, 22px); font-weight: 700;
  color: var(--rs-blue); letter-spacing: .06em; margin-bottom: 12px;
}
/* 2026-07-30：「ドローンと外国人材の法務を、一つの窓口で」を1行で見せたい（本郷様指示）。
   この文は20文字。見出しの標準は最大54pxで、それだと1134px必要になり、
   本文の幅1000pxに収まらず2行に折れていた。
   画面幅の4.3%を1文字分の目安にすると、520px以上の画面では1行に収まる（上限46px）。
   下限を24pxにしているのは、スマホ（390px）だと1文字16.8pxまで縮んで、
   本文とほぼ同じ大きさになり見出しに見えなくなるため（実測）。
   そのぶん狭い画面では2行になるが、読点の後で折れるので不自然ではない。
   スマホでも1行にしたい場合は、下限の24pxを外す。 */
.rs-h2.rs-premiumhead { font-size: clamp(24px, 4.3vw, 46px); }

/* 見出し下のオレンジの棒（デザイン案の全セクション共通） */
.rs-h2::after {
  content: ""; display: block; width: 52px; height: 3px; border-radius: 2px;
  background: var(--rs-orange); margin: 20px auto 0;
}
/* オレンジ棒を出さない見出し（お悩み・相談導線など、デザイン案で棒が無い箇所） */
.rs-h2--plain::after, .rs-contact .rs-h2::after { content: none; }
/* お悩みの見出しだけは2行の問いかけで、ページの中でいちばん大きく見せる（山角様ご指示）。
   1行目の <span> を block にして改行している */
/* 下限29px＝「ドローンの申請は複雑！」11文字が390px幅で1行に収まる上限。
   31pxにすると1行目まで折れて4行になる（実測した）

   2026-07-30：上限を75px→70pxへ。2行目「こんなお悩み、ありませんか？」が
   75pxだと1058px必要で、見出しの幅1000pxに入らず3行になっていた（本郷様ご指摘・実測）。
   1文字あたり75px時で75.6pxなので、14文字が1000pxに収まる上限は70.9px。
   ここを上げると2行目がまた折れるので、70pxより大きくしないこと。

   ★2026-08-21：PCでも3行のままだった本当の原因★
   下の「.rs-worryhead > span」は、見出しの直下の <span> を全部 block（＝1行ずつ）にする。
   ところが2行目は「こんなお悩み、」「ありませんか？」という2つの <span> が
   見出しの直下に並んでいたため、この指定を受けて別々の行に置かれていた。
   幅が足りなくて折れていたのではない（実測：1行に必要なのは989.8px、入れ物は1000px）。
   HTML側で2行目のふたつを <span> ひとつで包んで直した。
   ★見出しの中に <span> を足すときは、必ず「1行＝1つの <span>」で包むこと★ */
.rs-h2.rs-worryhead { font-size: clamp(29px, 5.5vw, 70px); line-height: 1.4; }
.rs-worryhead > span { display: block; }
/* 見出し下のリード文。本文16pxより小さいと弱く見えるので同じ16pxに揃えた。
   ★左寄せの仕組み★ text-align:left と width:max-content を組み合わせている。
   max-content は「改行しなかった場合の文の長さ」。それを max-width で頭打ちにする。
     ・1行に収まる短い文 … 箱が文の長さまで縮み、margin autoで中央に来る＝中央揃えに見える
     ・2行以上になる長い文 … 箱が最大幅(820px)で頭打ちになり、文字が左端から始まる
   これで「長い文だけ左寄せ」がクラスを増やさずに実現できる。
   max-width の min(…, 100%) は、スマホで箱が画面からはみ出さないようにするため。
   中央揃えに戻したいときは width の行を消して text-align:center にする */
.rs-lead.rs-lead {
  text-align: left;
  color: var(--rs-muted); font-size: 17.5px; line-height: 2.1;
  max-width: var(--rs-w-text); margin: 0 auto 64px;
}
.rs-sec--navy .rs-lead { color: #C9DAF0; }
/* 濃紺の上では注記が沈んで読めなくなるので、明るい色に差し替える */
.rs-sec--navy .rs-note.rs-note { color: #AFC6E8; }

/* -----------------------------------------------------------
   4. ボタン
   ----------------------------------------------------------- */
/* ブロックエディタのボタンは
     <div class="wp-block-button rs-btn"><a class="wp-block-button__link">…</a></div>
   という入れ子になる。クラスは外側の div に付くため、中の <a> を狙って指定する。
   併せて、生のHTMLで書いた <a class="rs-btn"> にも同じ見た目が当たるようにしている。

   ★最重要★ セレクタは必ず「.rs-btn.rs-btn」とクラスを2つ重ねて書くこと。
   Arkhe(親テーマ)は
     .wp-block-button.wp-block-button .wp-block-button__link { font-size:inherit; padding:.75em 1.5em }
   という、わざとクラスを2つ重ねた強い指定で文字サイズと余白を決めている。
   こちらを「.rs-btn > …」と1つで書くと負けて、
   サイト中のボタンが全部テーマ既定の16px・上下12px左右24pxに戻る。
   色は !important を付けているので効くが、大きさだけ戻るため
   「色は合っているのにボタンが全部同じ大きさで小さい」という状態になる（実際そうなっていた）。 */

/* 主要CTA（オレンジ）。無料相談など、最終的に押してほしいボタン */
.rs-btn.rs-btn > .wp-block-button__link,
a.rs-btn, a.rs-btn:visited,
a.rs-btn--outline, a.rs-btn--outline:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  /* 文言の長さに関係なく、ボタンの幅は560pxでそろえる。
     2026-08-30：258pxでは細いというご指摘。いただいたスクリーンショットの
     指定幅を実測して約565pxだったので、560pxにしている。
     ★min(560px, 100%) と書いてはいけない★ ボタンを包む .wp-block-button は
     中身の幅で決まる（flex: 0 1 auto）ので、100% がその中身の幅そのものになり、
     min() が常に中身の幅を選んで指定が効かない。実測で確認済み（2026-08-30）。
     620px以下の画面では下の @media で幅いっぱいに切り替える（560pxが入らないため）。
     電話・メール・LINEの3つ並び（.rs-btns--icon）と中間CTA帯（.rs-ctaband）は
     それぞれ専用の指定が後に来るので、この560pxは当たらない。 */
  min-width: 560px; max-width: 100%; box-sizing: border-box;
  /* !important はテーマ(Arkhe)側のボタン色指定を上書きするため。外すと黒に戻る */
  background-color: var(--rs-orange) !important; background-image: none; color: #fff !important;
  font-weight: 700; font-size: 17.5px; text-decoration: none; line-height: 1.5;
  padding: 19px 46px; border: none; border-radius: var(--rs-r-pill);
  box-shadow: 0 6px 16px rgba(10, 30, 70, .14);
  transition: transform .2s, box-shadow .2s, background-color .2s;
}
.rs-btn.rs-btn > .wp-block-button__link:hover,
a.rs-btn:hover {
  background-color: var(--rs-orange-dark) !important; transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(184,77,0,.20);
}
/* 小さい版。現在どのページからも使っていないが、
   カード内などに小さめのボタンが要るときのために残してある */
.rs-btn--sm.rs-btn--sm > .wp-block-button__link, a.rs-btn--sm { font-size: 15px; padding: 12px 28px; }

/* 白抜き（濃紺・写真の上で使う） */
.rs-btn--ghost.rs-btn--ghost > .wp-block-button__link,
a.rs-btn--ghost, a.rs-btn--ghost:visited {
  background-color: rgba(255,255,255,.04) !important; color: #fff !important;
  border: 2px solid rgba(255,255,255,.7) !important; box-shadow: none;
  padding: 15px 38px; font-size: 16px;
}
.rs-btn--ghost.rs-btn--ghost > .wp-block-button__link:hover,
a.rs-btn--ghost:hover { background-color: rgba(255,255,255,.14) !important; }

/* LINE。色はLINE公式のブランドカラー #06C755 をそのまま使う（山角様ご指定）。
   濃紺の帯の上に置くので、白抜きの隣でも埋もれないよう塗りボタンにしている */
.rs-btn--line.rs-btn--line > .wp-block-button__link,
a.rs-btn--line, a.rs-btn--line:visited {
  background-color: #06C755 !important; color: #fff !important;
  border: none !important; box-shadow: 0 6px 16px rgba(6,199,85,.14);
  font-size: 16px; padding: 17px 40px;
}
.rs-btn--line.rs-btn--line > .wp-block-button__link:hover,
a.rs-btn--line:hover { background-color: #05A948 !important; }

/* 白地の上で使う青の線ボタン（ページ間の回遊リンク）。
   デザイン案では14pxだったが、本文16pxより小さく弱々しかったため本文と同じ16pxに上げた */
.rs-btn--outline.rs-btn--outline > .wp-block-button__link,
a.rs-btn--outline, a.rs-btn--outline:visited {
  background-color: #fff !important; color: var(--rs-blue) !important;
  border: 2px solid var(--rs-blue) !important; box-shadow: none;
  font-size: 16px; padding: 15px 38px;
}
.rs-btn--outline.rs-btn--outline > .wp-block-button__link:hover,
a.rs-btn--outline:hover { background-color: var(--rs-blue-pale) !important; }

/* 電話だけは枠線のボタンではなく赤の塗りにする（2026-08-30ご指示）。
   同じ列に並ぶメール（オレンジ）・LINE（緑）と同じ「塗りのボタン」の見た目にそろえ、
   電話の導線は全ページ赤で統一している。href が tel: のものだけを狙い撃ちしているので、
   同じ .rs-btn--outline を使う「料金表をくわしく見る」などには効かない */
a.rs-btn--outline[href^="tel:"], a.rs-btn--outline[href^="tel:"]:visited {
  background-color: var(--rs-red) !important; color: #fff !important;
  border-color: var(--rs-red) !important;
}
a.rs-btn--outline[href^="tel:"]:hover { background-color: var(--rs-red-dark) !important; }

/* 濃い青の塗りボタン（サービス→顧問プラン誘導など） */
.rs-btn--navy.rs-btn--navy > .wp-block-button__link,
a.rs-btn--navy, a.rs-btn--navy:visited {
  background-color: var(--rs-blue) !important; color: #fff !important;
  font-size: 17px; padding: 18px 46px;
  box-shadow: 0 6px 16px rgba(10,77,163,.14);
}
.rs-btn--navy.rs-btn--navy > .wp-block-button__link:hover,
a.rs-btn--navy:hover { background-color: var(--rs-navy-deep) !important; }

/* 締めのボタン列。ここも2つ重ねること。
   1つで書くとArkheに負けて上余白が16pxになり、
   表やカードの直後にボタンが貼り付いて窮屈に見える（全ページで起きていた） */
.rs-btns.rs-btns { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 48px; }

/* アイコン付きのボタン列（電話・メール・LINE）
   2026-07-30：3つの横幅がばらばらというご指摘（本郷様）。いちばん広い電話番号に合わせてそろえ、
   それぞれにアイコンを付けた。
   .rs-btn はもともと inline-flex ＋ gap: .5em なので、<a> の中にアイコンを置くだけで文字の左に並ぶ。
   幅は min-width でそろえている（中身の文字数が違っても同じ幅になる）。 */
.rs-btns--icon .rs-btn.rs-btn { min-width: 258px; }
.rs-btn__ico { width: 22px; height: 22px; flex: 0 0 auto; }
/* LINEだけはアイコン画像。いただいた画像は緑の下地つきだったが、
   下地の緑 rgb(0,195,0) がボタンのLINEグリーン #06C755 と違い、
   重ねると色の違う四角が浮いて見えた（実測）。
   下地を抜いて白いロゴだけにしてある（緑地に白ロゴはLINE公式の見せ方でもある）。
   元画像は Downloads/icons8-line-color/icons8-line-96.png。 */
.rs-btn__ico--img { width: 28px; height: 28px; }
@media (max-width: 700px) {
  /* スマホは3つとも画面幅いっぱいに伸ばす */
  .rs-btns--icon .rs-btn.rs-btn { min-width: 0; width: 100%; }
}
/* 幅620px以下では560pxが本文の枠（画面幅−48px）に入らないので、幅いっぱいに切り替える。
   ボタンを包む .wp-block-button も伸ばさないと、<a> の 100% が中身の幅のままになる。 */
@media (max-width: 620px) {
  .rs-btns .wp-block-button { width: 100%; }
  .rs-btn.rs-btn > .wp-block-button__link,
  a.rs-btn, a.rs-btn:visited,
  a.rs-btn--outline, a.rs-btn--outline:visited { min-width: 0; width: 100%; }
}

/* 生のHTMLで文章のすぐ後ろに置いたボタン（ドローンショー等）は、
   間隔の指定がどこにも無く0pxで貼り付いていたので、ここでまとめて空ける */
p + a.rs-btn, p + .rs-btns { margin-top: 28px; }

/* -----------------------------------------------------------
   5. カード（サービス・理由・メンバー・コラム）
   ----------------------------------------------------------- */
/* 重要：グループブロックは中にもう1枚 wp-block-group__inner-container を作る。
   カードが並ぶのはその内側なので、並べる指定は内側のdivに当てる必要がある。
   （外側に当てると「中身1枚だけが1列目に入る」形になり、カードが縦積みになる） */
.rs-grid:not(:has(> .wp-block-group__inner-container)),
.rs-grid > .wp-block-group__inner-container { display: grid; gap: 20px; }

/* カードの1枚目だけ上にずれる問題の対策。
   Arkheがブロックの2枚目以降に付ける margin-top:16px が、
   グリッドの各マスの中でも効いてしまい、1枚目だけ16px高い位置に並んでいた。
   すき間は gap で作っているので、中の子要素の上余白はすべて0にする。
   （FAQも同じで、14pxのつもりのすき間が実際は30pxになっていた） */
.rs-grid.rs-grid > .wp-block-group__inner-container > *,
.rs-faq.rs-faq > .wp-block-group__inner-container > * { margin-top: 0; }

/* 2026-07-29：1fr → minmax(0, 1fr) に変更。
   1fr は「中身が入りきる幅は最低限確保する」という意味も持つため、長い語が入ったカードだけ
   列が広がり、4枚の幅が 212 / 212 / 277 / 239px とバラバラになっていた（実測）。
   コンテンツ幅を1160→1000pxに詰めたことで、この差が出るようになった。
   minmax(0, 1fr) にすると「中身に関係なく4等分」になり、幅がそろう。 */
.rs-grid--4:not(:has(> .wp-block-group__inner-container)),
.rs-grid--4 > .wp-block-group__inner-container { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.rs-grid--3:not(:has(> .wp-block-group__inner-container)),
.rs-grid--3 > .wp-block-group__inner-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.rs-grid--2:not(:has(> .wp-block-group__inner-container)),
.rs-grid--2 > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

.rs-grid--1:not(:has(> .wp-block-group__inner-container)),
.rs-grid--1 > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); gap: 22px; }

.rs-card {
  background: #fff; border: 1px solid var(--rs-line-2);
  border-radius: var(--rs-r); padding: 24px 24px;
  box-shadow: var(--rs-shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
a.rs-card { display: block; text-decoration: none; color: inherit; }
a.rs-card:hover { transform: translateY(-3px); box-shadow: var(--rs-shadow-lg); border-color: var(--rs-sky); }
.rs-card__title { font-size: 18.5px; font-weight: 700; color: var(--rs-navy); line-height: 1.55; margin: 0 0 10px; }
.rs-card__text  { font-size: 16.5px; color: var(--rs-muted); margin: 0; line-height: 1.85; }

/* 対応サービス（2026-07-29：4列→3列→1列と変更。最終形は1列の横並びカード）
   1列＝カードが1160pxの幅いっぱいになるため、アイコンを上に置く縦積みだと
   右側がぽっかり空いてしまう。そこで
   「左：アイコン ／ 中央：見出し＋説明 ／ 右：詳しく見る」の横並びに組み替えた。
   ★HTMLに入れ物のdivを足さずに3分割するため、カードをグリッドにして
     grid-template-areas で置き場所を指定している（アイコンと「詳しく見る」は
     2行ぶんを縦にまたぐ）★ */
.rs-svcgrid.rs-svcgrid > .wp-block-group__inner-container {
  display: flex; flex-wrap: wrap; gap: 18px;
}
.rs-svcgrid.rs-svcgrid > .wp-block-group__inner-container > * {
  flex: 0 0 100%; max-width: 100%; min-width: 0;
}
/* ★display は a.rs-card{display:block}（詳細度0,1,1）に負けるので、
   クラスを2つ重ねて0,2,0にしてある。ここを .rs-card--svc だけに戻すと
   カードがグリッドにならず、横並びが崩れる（実測で確認済み） */
.rs-card.rs-card--svc {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon title more" "icon text more";
  align-items: center; column-gap: 30px; row-gap: 6px;
  padding: 26px 34px; border-radius: var(--rs-r);
  border: 1px solid var(--rs-line-2); background: #fff;
  box-shadow: 0 8px 22px rgba(8,44,100,.06);
  overflow: hidden;
}
/* 2026-07-29：カード上端にあった青いラインは不要とのことで削除（山角様ご指示）。
   ホバーの合図はカードが浮くこと・アイコンが青く反転すること・矢印が動くことで足りている */
a.rs-card--svc:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(8,44,100,.13); border-color: var(--rs-line-2); }
.rs-card__icon {
  grid-area: icon;
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--rs-r); flex: 0 0 auto;
  background: var(--rs-blue-pale); color: var(--rs-blue);
  margin: 0; transition: background .2s, color .2s;
}
a.rs-card--svc:hover .rs-card__icon { background: var(--rs-blue); color: #fff; }
/* 見出しは下寄せ、説明は上寄せ。こうすると2つがくっついて1かたまりに見える */
.rs-card--svc .rs-card__title { grid-area: title; align-self: end; font-size: 22px; font-weight: 800; margin: 0; line-height: 1.5; }
.rs-card--svc .rs-card__text { grid-area: text; align-self: start; font-size: 16.5px; line-height: 1.75; margin: 0; }
.rs-card__more {
  grid-area: more;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  margin: 0; font-size: 15.5px; font-weight: 700; color: var(--rs-blue);
}
.rs-card__more svg { transition: transform .2s; }
a.rs-card--svc:hover .rs-card__more svg { transform: translateX(4px); }

/* 理由カード（2026-08-20 再設計：写真つきの1列カード。左に文章・右に写真）
   ご要望は「デザインを大きく変える／アイコンは不要／理由ごとに写真を1枚／番号は左上の角」。

   これまで … 薄い青の横長カードを縦1列に4枚。左端に巨大な番号、その右に白丸アイコン＋見出し
   これから … 1枚を「左＝番号・見出し・説明／右＝写真」の左右2分割にして、それを縦1列に4枚

   ★写真の切り抜きを5:4にしている理由★
   右の写真はカードの高さいっぱいまで伸びる（object-fit:cover）。カードの高さは
   左の文章の量で決まるので、01（約190字）と03（約100字）で写真の枠の形が変わる。
   実測で枠の形はおよそ 幅420px × 高さ330〜410px ＝ 縦横比 1.02〜1.27 の間を動く。
   写真をこれより横長（16:9など）にすると、縦長寄りの枠に収めるとき左右が大きく切れて
   飛行機の翼が落ちる。5:4（1.25）にしておくと切れ幅が最大でも左右各1割ほどで済む。

   ★番号01〜04の扱い★
   カードの左上の角に、これまでどおり「薄い青の地に沈む白い数字」として置いている。
   ・本文の上余白を番号の高さぶん空けてあるので、見出しと番号は重ならない
     （一度、番号の上に見出しが乗る作りにしたら、見出しの長さで隠れ方が変わって
       03の番号がほぼ消え、デザインではなく事故に見えた。余白で逃がすのが正解）
   ・z-index:-1 は、カードに isolation:isolate があって初めて背景より前に出る（触らないこと） */
.rs-reason.rs-reason {
  position: relative; isolation: isolate; overflow: hidden;
  /* 写真の列。カードの幅に合わせて 360〜480px の間で伸び縮みさせる。
     カードが1200pxのときは480px、画面が狭くてカードが縮んだときも
     文章側が細くなりすぎないよう360pxで止める（1行の字数を確保するため） */
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 40%, 480px);
  grid-template-areas: "body photo";
  background: var(--rs-blue-pale); border: none;
  border-radius: var(--rs-r); padding: 0; box-shadow: none;
  /* 文章の量だけでカードの高さを決めると4枚がばらつく（実測282〜378px）ので下限を付ける。
     写真の高さもこれで揃う。900px以下は縦積みで必ずこれより高くなるため打ち消し不要 */
  min-height: 360px;
}
/* 写真はカードの右端・上下いっぱい。中身は絶対配置にして、枠の形が変わっても崩れないようにする */
.rs-reason__photo { grid-area: photo; position: relative; display: block; align-self: stretch; }
.rs-reason__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 本文。上の92pxは左上の番号を置くための余白 */
.rs-reason__body { grid-area: body; position: relative; padding: 92px 44px 44px; }
.wp-block-group__inner-container:has(> .rs-reason) { row-gap: 24px; }
.rs-reason__no {
  position: absolute; left: 26px; top: -2px;
  font-family: var(--rs-font-en); font-size: 96px; font-weight: 800;
  color: #fff; line-height: 1; letter-spacing: -.03em;
  margin: 0; z-index: -1; pointer-events: none;
}
.rs-reason__title { font-size: 24px; font-weight: 800; color: #000000; margin: 0 0 12px; line-height: 1.55; }
/* このサイトで一番読ませたい説明文。薄い青の地なので、文字は黒寄りにして読みやすくしている */
.rs-reason p:not(.rs-reason__title) { font-size: 16.5px; line-height: 1.95; color: #000000; margin: 0; }

/* 理由セクションのキャッチ（見出し下の大きめ2行）。
   下の余白が16pxしかなくカードとくっついて見えたため広げた */
/* 1239px以下：左右2分割をやめ、写真が上・文章が下の縦積みに切り替える。

   ★切り替え幅を 900 → 1239px に引き上げた（2026-08-20）★
   カードを1200pxに広げたあと、1240px未満の画面だと文章側が細くなって
   1枚目（01）の文章が1行増える。するとカードが縦に伸びて右の写真の枠が
   ほぼ正方形になり、写真の左右が1割以上切り落とされる。
   実測：画面1024px → 写真の枠は 390×378（ほぼ正方形）になり、
   01の飛行機は両翼と機首が枠の外に出てしまっていた。
   カードがちょうど1200pxに収まる幅（＝画面1240px以上）でだけ2分割にする。 */
@media (max-width: 1239px) {
  .rs-reason.rs-reason {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "body";
    max-width: 880px; width: 100%; margin-inline: auto;
  }
  /* ★2026-08-21：iPhone（Safari）で写真が29×19pxまで潰れる不具合を直した★
     原因は「入れ物に比率（aspect-ratio）を書き、中の画像を絶対配置で浮かせていた」こと。
     絶対配置の画像は入れ物の中身として数えられないので、入れ物の中身は空っぽ扱いになる。
     Chromeは横幅から高さを決めるので正常に出るが、Safariは先に高さを0と決めてしまい、
     そこから比率で横幅を逆算するため、写真が点のように縮む。
     直し方は、比率を入れ物ではなく画像そのものに持たせ、画像を普通の並びに戻すこと。
     この書き方はスタッフ写真（上の 1263行あたり）で既に使っていて、実績がある。 */
  .rs-reason__photo { aspect-ratio: auto; width: 100%; }
  .rs-reason__photo img {
    position: static; display: block;
    width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  }
  .wp-block-group__inner-container:has(> .rs-reason) { row-gap: 18px; }
}

.rs-reason-catch.rs-reason-catch {
  text-align: center; font-size: 21px; font-weight: 700; line-height: 2;
  color: var(--rs-navy); max-width: var(--rs-w); margin: 0 auto 44px;
}

/* メンバー（下層ページ用の簡易版） */
.rs-member { text-align: center; }
.rs-member img { border-radius: var(--rs-r); width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.rs-member__name { font-size: 19.5px; font-weight: 700; color: var(--rs-navy); margin: 14px 0 4px; }
.rs-member__role { font-size: 13px; color: var(--rs-muted-2); margin: 0 0 10px; }

/* メンバー（トップの写真つきプロフィール・デザイン案準拠） */
.rs-member-row.rs-member-row {
  display: flex; flex-wrap: wrap; gap: 48px; align-items: center; justify-content: center;
  max-width: var(--rs-w-narrow); margin: 48px auto 0;
}
.rs-member-row--rev.rs-member-row--rev { flex-wrap: wrap-reverse; margin-top: 52px; }
/* 2026-08-17：山角様300px・岡川様240pxで大きさが揃っていなかったので統一（本郷様指示）。
   小さい側に使っていた .rs-member-row__photo--sm は削除し、HTML側のクラスも外した */
.rs-member-row__photo { flex: 0 1 300px; min-width: 240px; }
.rs-member-row__photo img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  border-radius: var(--rs-r); border: 1px solid var(--rs-line-2);
  box-shadow: 0 14px 32px rgba(8,44,100,.12);
}
.rs-member-row__body { flex: 1 1 380px; max-width: 600px; }
/* 肩書き（代表行政書士・顧問）
   2026-07-29：青い枠のピル型バッジ → 黒文字のフラットなテキストに変更（本郷様指示）。
   戻したいときは下の3行を
   color: var(--rs-blue); border: 1px solid var(--rs-blue);
   border-radius: var(--rs-r-pill); padding: 4px 16px;
   に差し替える。事務所概要ページの .rs-profile__role も同じ扱いにしてある。
   2026-08-17：13px は小さすぎるとのことで18pxへ（本郷様指示）。
   氏名30pxの4割強で、肩書きとして読ませつつ氏名を食わない大きさ。 */
.rs-badge {
  display: inline-block; font-size: 18px; font-weight: 700;
  color: var(--rs-navy); border: none;
  border-radius: 0; padding: 0; letter-spacing: .1em;
}
.rs-member-row__name { font-size: 30px; font-weight: 700; color: var(--rs-navy); letter-spacing: .06em; margin: 14px 0 0; }
.rs-member-row__name--sm { font-size: 26px; }
.rs-member-row__text { margin: 18px 0 0; font-size: 17px; line-height: 2.1; color: var(--rs-text); }
/* プロフィール内のボタンは、単独で置く回遊ボタン(16px)よりひと回り小さく */
.rs-member-row__body .rs-btn--outline { margin-top: 24px; font-size: 15px; padding: 13px 32px; }

/* スタッフ紹介（写真は後日差し替えのプレースホルダ） */
.rs-staff.rs-staff { margin-top: 60px; }
.rs-staff__title { text-align: center; font-size: 15px; font-weight: 700; color: var(--rs-blue); letter-spacing: .14em; margin: 0; }
.rs-staff__grid {
  margin: 24px auto 0; max-width: var(--rs-w);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.rs-staff__item { text-align: center; }
.rs-staff__ph {
  aspect-ratio: 1 / 1; border-radius: 16px; border: 1px solid var(--rs-line-2);
  background: repeating-linear-gradient(45deg, #EDF2F9 0 14px, #F7FAFD 14px 28px);
  display: flex; align-items: center; justify-content: center;
  color: #7C8BA5; font-size: 11.5px;
}
.rs-staff__role { margin: 14px 0 0; font-size: 16px; font-weight: 700; color: var(--rs-navy); }
.rs-staff__quote { margin: 7px 0 0; font-size: 15.5px; line-height: 1.9; color: var(--rs-muted); }

/* -----------------------------------------------------------
   5-2. 事務所概要ページ（代表挨拶・プロフィール・経歴・スタッフ）
   ----------------------------------------------------------- */
/* 代表挨拶：左に顔写真、右に挨拶文 */
.rs-greeting {
  display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start;
  max-width: var(--rs-w-narrow); margin-inline: auto;
}
.rs-greeting__photo { flex: 0 0 290px; }
.rs-greeting__photo img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  border-radius: var(--rs-r); border: 1px solid var(--rs-line-2);
  box-shadow: 0 14px 32px rgba(8,44,100,.12);
}
.rs-greeting__body { flex: 1 1 400px; }
.rs-greeting__body p { font-size: 17px; line-height: 2.15; margin: 0 0 20px; }
.rs-greeting__body p:last-child { margin-bottom: 0; }

/* 代表の名前まわり（肩書きバッジ＋大きな名前＋ふりがな）。
   2026-07-22 山角様の名前が3か所に出て「くどい」との指摘を受け、
   単独の代表プロフィールセクションを代表挨拶に統合。
   名前の単独表示は写真の下の、このブロック1か所だけにする */
.rs-profile { text-align: center; }
/* 写真の下に置くときは、290pxの列幅に収まるよう少しだけ小さくする */
.rs-greeting__photo .rs-profile { margin-top: 18px; }
.rs-greeting__photo .rs-profile__name { font-size: 26px; }

/* 経歴の小見出し。セクション見出し(h2)より一段控えめに、中央に置く */
.rs-career-head.rs-career-head {
  text-align: center; font-size: 22px; color: var(--rs-navy);
  margin: 64px 0 0; letter-spacing: .06em;
}
/* 2026-07-29：トップの .rs-badge と同じく、青枠のバッジ → 黒文字フラットに（本郷様指示） */
.rs-profile__role {
  display: inline-block; font-size: 13px; font-weight: 700;
  color: var(--rs-navy); border: none;
  border-radius: 0; padding: 0; letter-spacing: .1em;
}
.rs-profile__name { font-size: 32px; font-weight: 700; color: var(--rs-navy); letter-spacing: .08em; margin: 16px 0 0; }
.rs-profile__read { font-size: 15px; color: var(--rs-muted); margin: 8px 0 0; letter-spacing: .08em; }

/* 経歴の年表。
   ※ここに .rs-check（青い丸のチェックマーク）を使ってはいけない。
     チェックマークは「ご提供できること」の意味になり、経歴に付けると意味が合わない
     （山角様ご指摘）。順番のある出来事なので、縦線と点でつなぐ */
.rs-career { max-width: var(--rs-w-text); margin: 36px auto 0; padding: 0; list-style: none; }

.rs-career li {
  position: relative; padding: 0 0 26px 36px;
  font-size: 17px; line-height: 1.95; color: var(--rs-text);
}
.rs-career li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--rs-blue); box-shadow: 0 0 0 4px var(--rs-blue-pale);
}
.rs-career li::after {
  content: ""; position: absolute; left: 9px; top: 26px; bottom: 0; width: 1px;
  background: var(--rs-line);
}
.rs-career li:last-child { padding-bottom: 0; }
.rs-career li:last-child::after { display: none; }

/* 信条の2文の大型表示（紺セクション用）。
   2026-07-22「100回同じことを…」の2文を大きく見せたいというご要望。
   ※「客観的な順位ではありません」の注記はAIっぽいという指摘で削除済み。復活させないこと

   ★主役はここ（100回…の1文）★
   はじめ h2=34px / この行=30px で作ったところ「どれが大事なメッセージか分からない」と
   指摘を受けた。差が4pxしかなく、どちらも白の太字だったため。
   直し方は3つを同時に効かせている（1つだけでは弱い）：
     1. 大きさ … 40px。h2(34px)より約2割大きくして、画面内で一番大きい文字にする
     2. 太さと色 … 主役だけ白の700。補足(--sub)は500で薄青に落とし、本文はさらに薄く
     3. 余白 … h2との間を72px空けて「見出しが2つ続いている」ように見えるのを防ぐ
   ※h2側は他セクションと同じ34pxのまま触らないこと。ここだけ見出しの大きさを変えると
     サイト全体の見出しルールが崩れる（Geminiにも相談してこの方針にした）
   ※大きさに clamp(画面幅に応じて伸縮) を使わないこと。h2 は600px以下で34px→24pxと
     段階的に切り替わるのに対し、clampは連続的に縮むため、途中の画面幅で主役がh2より
     小さくなって逆転する（実際スマホで h2:24px / 主役:23px になっていた）。
     h2と同じ切り替え幅(600px)で、同じように段階で指定すること */
.rs-creed-quote.rs-creed-quote {
  text-align: center; color: #fff; font-weight: 700;
  font-size: clamp(30px, 3.6vw, 47px); line-height: 1.7; letter-spacing: .04em;
  margin: 72px auto 0; max-width: var(--rs-w); word-break: auto-phrase;
}
.rs-creed-quote--sub.rs-creed-quote--sub {
  font-size: 19.5px; color: #BDD3EF; font-weight: 500;
  margin-top: 26px; line-height: 2.1; letter-spacing: .02em;
}
/* 主役のすぐ下に続く説明文。真っ白のままだと主役と張り合うので、少し落として離す。
   ※「.rs-sec--navy .rs-body」と書くと料金表・顧問プラン・選ばれる理由の紺セクションにも
     かかってしまうので、信条の2文の直後(隣接セレクタ)に限定している */
.rs-creed-quote--sub + .rs-body.rs-body { margin-top: 64px; }
.rs-creed-quote--sub + .rs-body.rs-body p { color: #D3E0F2; }

/* スタッフ紹介
   2026-08-17：仮の斜線プレースホルダ3枚 → 実写真8枚の4カラム×2段に作り替え（本郷様指示）。
   内側の幅は1000px、すき間20pxなので、カード1枚は (1000-60)/4 ＝ 235px。
   写真はメンバー欄・代表挨拶と同じ3:4にそろえた（元写真が縦2:3のバストショットのため、
   4:3の横長にすると顔だけの窮屈な切り抜きになる）。 */
.rs-staffcards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  max-width: var(--rs-w-narrow); margin-inline: auto;
}
.rs-staffcard {
  background: #fff; border: 1px solid var(--rs-line-2); border-radius: 16px;
  overflow: hidden; box-shadow: var(--rs-shadow); display: flex; flex-direction: column;
}
/* ★ 比率は「入れ物」ではなく img 側に書くこと（2026-08-17に踏んだ）。
   入れ物に aspect-ratio、img に height:100% と書いたら、8枚のうち1枚だけ
   写真の高さが317pxになり（他は351px）、氏名の行がずれた。
   カードが display:flex の縦並びなので、入れ物は flex アイテムになる。
   flex アイテムは既定で「中身より小さくならない」ため、中の img の元の比率が
   入れ物の aspect-ratio に勝ってしまう。1枚だけ元画像が 1106×1500（他は998×1500）で、
   その比率の差がそのまま高さの差になっていた。
   img に直接 aspect-ratio を書けば、元画像の比率に関係なく必ず3:4に切り抜かれる。
   メンバー欄(.rs-member-row__photo img)・代表挨拶(.rs-greeting__photo img)も同じ書き方。 */
.rs-staffcard__photo { border-bottom: 1px solid #E9F0F8; }
.rs-staffcard__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.rs-staffcard__body { padding: 16px 16px 20px; }
/* 氏名。カード幅235pxに収まるよう、メンバー欄の氏名(30px)より小さくしている */
.rs-staffcard__name { font-size: 18px; font-weight: 700; color: var(--rs-navy); margin: 0 0 8px; letter-spacing: .02em; }
.rs-staffcard__text { font-size: 14.5px; color: var(--rs-muted); line-height: 1.85; margin: 0; }

/* 事務所の様子を3枚横並びで見せる帯（2026-08-17・本郷様指示で事務所概要の信条セクションに追加）。
   置き場所が濃紺の地なので、影は黒寄りにして浮かせている。
   class2重書きはArkheの「グループの2つ目以降の子は上16px・下0」に負けないため。 */
.rs-photorow.rs-photorow {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: var(--rs-w); margin: 44px auto 0;
}
/* 比率は img に直接書く（入れ物に書くと元画像の比率に負ける。詳しくは上のスタッフカードの覚え書き） */
.rs-photorow img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.24);
}

@media (max-width: 900px) {
  .rs-greeting { gap: 32px; justify-content: center; }
  .rs-greeting__photo { flex: 0 1 260px; }
  /* 2026-08-17：8枚あるので1列にすると縦に長くなりすぎる。タブレット以下は2列で止める */
  .rs-staffcards { grid-template-columns: repeat(2, 1fr); max-width: 560px; gap: 18px; }
}
@media (max-width: 600px) {
  .rs-profile__name { font-size: 25px; }
  .rs-creed-quote.rs-creed-quote { font-size: 30px; margin-top: 48px; letter-spacing: .02em; }
  .rs-creed-quote--sub.rs-creed-quote--sub { font-size: 15.5px; margin-top: 20px; }
  .rs-creed-quote--sub + .rs-body.rs-body { margin-top: 44px; }
  .rs-greeting__body p { font-size: 15.5px; }
  .rs-career li { font-size: 15.5px; padding-left: 30px; }
  /* スマホは2列のままカード幅が約155pxまで縮むので、中の文字も1段下げる */
  .rs-staffcards { gap: 12px; }
  .rs-staffcard__body { padding: 12px 12px 16px; }
  .rs-staffcard__name { font-size: 16px; margin-bottom: 6px; }
  .rs-staffcard__text { font-size: 13.5px; line-height: 1.8; }
  /* 3枚を横に並べたままだと1枚110pxほどになり何が写っているか分からない。縦積みにする */
  .rs-photorow.rs-photorow { grid-template-columns: 1fr; gap: 12px; max-width: 420px; margin-top: 32px; }
  .rs-photorow img { border-radius: 10px; }
}

/* -----------------------------------------------------------
   6. 実績ボックス（ヒーローに重ねる角丸ボックス×4）
   下層（reason）では見出し帯(.rs-pagehead)の直下に置く。
   ボックスが帯に食い込むぶん、帯側の下余白を広げて文字と重ならないようにする。

   ★2026-07-29 白い円→角丸ボックスに変更★
   山角様から「バウンダリの黄色いボックスの方が見やすい」とご指摘。
   円がぼんやり見えていた原因は2つ：
     ・白い背景の上に白い円で、ふんわりした影しかなく面の境目が見えない
     ・円は四隅が使えないので、中の4行が窮屈で文字を小さくせざるを得ない
   そこで矩形にして文字を大きくし、輪郭を濃紺の線＋「ずらしたベタ影」で立てた。
   ベタ影＝ぼかし0の box-shadow。バウンダリが黄色ボックスで使っている手法で、
   紙を重ねたような立体感が出る。色は黄色のベタ塗りではなく、
   当サイトの配色（白地＋濃紺）で同じ「くっきり感」だけを移している。
   ----------------------------------------------------------- */
/* 左右の余白28pxは .rs-hero と同じ値。ここを揃えることで、
   実績ボックスの両端がヒーロー写真の両端とぴったり重なる（山角様ご指示） */
.rs-stats { background: #fff; padding: 0 28px 30px; }
/* 「上にはみ出させて重ねる」ための負の余白。
   ここも .rs-stats を重ねて2クラスで書くこと。
   Arkheがブロックの1つ目の子に付ける
   「:is(…) > :first-child { margin-top: 0 }」の方が指定が強く、
   短く .rs-stats__grid と書くと重なりが消えて真下に並んでしまう */
.rs-stats .rs-stats__grid {
  max-width: 1240px; margin: -104px auto 0; position: relative; z-index: 5;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: stretch;
}
.rs-pagehead:has(+ .rs-stats) { padding-bottom: 164px; }
.rs-stat {
  width: 100%; border-radius: var(--rs-r);
  /* 2026-07-29 山角様が5案から選択：白地に、ラベルだけオレンジの帯。
     オレンジ地＋白文字も作ったが、白文字のコントラストが2.6:1しかなくて注記が薄いのと、
     ヘッダー・CTAのボタンと同じオレンジになって「押せるもの」との区別が付きにくいため不採用。
     帯の色は2026-07-29に山角様のご指示でオレンジ→青（--rs-blue）に変更。
     白文字とのコントラストは8.1:1で、オレンジ帯（3.4:1）より読みやすい。
     ★帯を角丸に沿って切るために overflow:hidden が要る。外すと帯の角が四角く飛び出す。 */
  background: #fff; border: 1.5px solid var(--rs-line);
  box-shadow: 0 6px 18px rgba(8,44,100,.07);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  overflow: hidden;
  /* 高さは中身なり（同じ行のボックスはgridのstretchで自動的に揃う）。
     min-height を決め打ちすると上下の余白だけが間延びする */
  gap: 0; text-align: center; padding: 0 0 24px;
}
/* ラベルは箱の上端いっぱいに敷くオレンジの帯。
   帯を必ず上端に貼り付けるため、箱は justify-content:flex-start にしてある。
   そのぶん高さが余ると下がスカスカになるので、帯より下の要素を
   margin auto で縦中央に寄せている（下の2行がその仕掛け）。 */
/* 2026-07-29：帯の文字（許認可申請実績・顧問契約先など）を14→17.5pxに（山角様ご指示）。
   4文字ぶん大きくなるので、字間を .08→.04em に詰めて「顧問契約先」が折れないようにしている */
.rs-stat__label {
  background: var(--rs-sky); color: var(--rs-blue); width: 100%;
  font-size: 17.5px; font-weight: 700; letter-spacing: .04em;
  padding: 12px 8px; margin: 0 0 16px; line-height: 1.5;
}
.rs-stat > .rs-stat__label + * { margin-top: auto; }
.rs-stat > :last-child         { margin-bottom: auto; }
/* nowrap は「10,000件超」の「超」だけが次の行に落ちるのを防ぐため */
.rs-stat__num { font-family: var(--rs-font-en); font-size: 50px; font-weight: 800; color: var(--rs-navy); line-height: 1; margin: 0; white-space: nowrap; }
.rs-stat__num small { font-size: 19px; font-weight: 800; font-family: var(--rs-font); }
.rs-stat__strong { font-size: 21px; font-weight: 800; color: var(--rs-navy); line-height: 1.45; margin: 0; }
.rs-stat__note { font-size: 13px; color: var(--rs-muted); margin: 6px 0 0; line-height: 1.6; }

/* 実績セクションの白カード×3（トップRESULTS用） */
.rs-rescards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: var(--rs-w-narrow); margin-inline: auto; }
.rs-rescard {
  background: #fff; border: 1px solid var(--rs-line); border-radius: var(--rs-r-sm);
  padding: 24px 26px; text-align: center; flex: 1 1 260px; max-width: 320px;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.rs-rescard__label { font-size: 13px; font-weight: 700; color: var(--rs-blue); letter-spacing: .08em; margin: 0; }
.rs-rescard__num { font-family: var(--rs-font-en); font-weight: 800; font-size: 31px; color: var(--rs-navy); line-height: 1.2; margin: 0; }
.rs-rescard__num small { font-size: 15px; font-weight: 800; font-family: var(--rs-font); }
.rs-rescard__num--txt { font-size: 25px; font-family: var(--rs-font); }
.rs-rescard__note { font-size: 13px; color: var(--rs-muted); margin: 0; }
.rs-results-lead.rs-results-lead { margin: 40px auto 0; text-align: left; width: max-content; font-size: 19px; line-height: 2.2; color: var(--rs-text); max-width: min(760px, 100%); }
.rs-results-sub.rs-results-sub { margin: 10px auto 0; text-align: left; width: max-content; font-size: 15.5px; line-height: 2.1; color: var(--rs-muted); max-width: min(720px, 100%); }

/* -----------------------------------------------------------
   7. お悩みリスト（青い丸チェック・デザイン案準拠）
   ----------------------------------------------------------- */
/* 2026-08-17：ここに一度 .rs-sec--photo（セクションの地に写真を敷く指定）を作って
   「こんなお悩み、ありませんか？」の地を浜辺のドローン写真にしたが、
   白いお悩みカードでドローンが隠れてしまうため取りやめ、薄青に戻した。
   浜辺の写真は下のドローンショーの帯（.rs-spot）へ移した。
   経緯は 01.Project(進行中)/260629_行政書士法人Royal Sphere/Log/260817_トップページ写真差し替え.md */
.rs-worry { max-width: var(--rs-w); margin-inline: auto; display: grid; gap: 16px; padding: 0; }
.rs-worry li {
  list-style: none; background: #fff; border: 1px solid var(--rs-line);
  border-radius: var(--rs-r-sm);
  padding: 22px 26px 22px 74px; position: relative;
  box-shadow: var(--rs-shadow-md); font-size: 18.5px; font-weight: 600; color: #000000; line-height: 1.75;
}
.rs-worry li::before {
  content: "✓"; position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--rs-sky); color: var(--rs-blue); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
/* 締めの一文＋オレンジの下向き三角 */
.rs-worry-close.rs-worry-close { text-align: center; margin-top: 44px; }
.rs-worry-close__text { font-size: 30px; font-weight: 800; color: var(--rs-blue); line-height: 1.8; margin: 0; }
.rs-worry-close svg { display: block; margin: 26px auto 0; }

/* -----------------------------------------------------------
   7-2. お悩みセクションの左に浮かべるドローンのイラスト
   ----------------------------------------------------------- */
/* 2026-08-21：「このセクションの左にドローンのイラストをふわふわ動かしたい」（本郷様ご指示）。
   写真ではなく図（SVG）で描いてある。図なので拡大しても粗くならず、
   画像ファイルを増やさずに済む（HTMLの中に丸と線の指定として入っている）。

   置き場所は本文（1000px）のすぐ左どなりの余白。
   計算：画面の幅から1000pxを引いた残りの半分が片側の余白。
   そこからイラストの幅と24pxのすき間を引いた位置に、イラストの左端を合わせている。

   ★1339px以下では消している★
   この見出しの2行目「こんなお悩み、ありませんか？」は70pxのとき989.8px必要で、
   本文の枠1000pxをほぼ使い切る（実測）。つまり本文の中に空きは無く、
   イラストは左どなりの余白に置くしかない。余白がイラスト＋すき間より狭くなる
   1340px未満では、置けば必ず文字に重なるので出さないことにした。
   ★出す幅を広げたいときは、この数字だけでなく見出しの上限70pxも下げること★

   ★位置の基準について★
   WordPressはグループの中身を .wp-block-group__inner-container という箱で
   もう一重くるむ。この箱に position を付けると、イラストの位置がそこから
   数えられてしまい、本文の幅ぶん（片側の余白）だけ右にずれる（実際にずれた）。
   そのため下では文字の要素だけを名指しして position を付けている。 */
.rs-worrysec {
  position: relative; isolation: isolate; overflow: hidden;
  /* 実際に色がある街の高さ248px＋矢印との間隔を下余白に含め、文字との重なりを防ぐ */
  padding-bottom: calc(clamp(49px, 12.917vw, 248px) + clamp(48px, 6vw, 96px));
}
/* 1920×385pxの街を元の縦横比で敷き、1920px超では繰り返して引き伸ばしを防ぐ。
   最下部の透明余白16pxぶん下へずらして地面線をセクション下端に合わせる。
   背景画像なので読み上げ対象にならず、文字とドローンより後ろに表示される。 */
.rs-worrysec::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; bottom: 0; width: 100%; height: clamp(76px, 20.052vw, 385px);
  /* ★CSSの url( ) は相対指定で書くこと★ HTMLの src とは違い、反映スクリプトは
     CSSのパスを書き換えない。/royal-sphere-drone/ と絶対で書くと開発用サイトでは404になる
     （2026-08-30に実際そうなって街が出なかった）。ここはCSSファイルからの相対で書く。 */
  background-image: url(../../uploads/2026/08/city-260830.png);
  background-repeat: repeat-x;
  background-position: center calc(100% + clamp(3px, .833vw, 16px));
  background-size: auto 100%;
}
/* イラストを文字より後ろに回す。★くるみの箱には position を付けないこと★ */
.rs-worrysec .rs-worryhead,
.rs-worrysec .rs-worry,
.rs-worrysec .rs-worry-close { position: relative; z-index: 1; }
.rs-drone {
  /* 大きさ。2026-08-21：1.1倍にした（本郷様ご指示）。前は clamp(140px, 11vw, 190px)。
     ★後半の min( ) は「左どなりの余白より大きくしない」ための頭打ち★
       画面が1409pxより狭いと、1.1倍の大きさが余白に入りきらず見出しの文字に触れる。
       そこで「余白から20px引いた値」と比べて小さいほうを使う。
       1340〜1408pxでは1.1倍より少し小さく出るが、消さずに済む。
       （1.1倍をどの幅でも守るなら、下の 1339px を 1379px に上げて狭い画面では消すこと） */
  --rs-drone-w: min(clamp(154px, 12.1vw, 209px), calc((100vw - var(--rs-w)) / 2 - 20px));
  position: absolute; z-index: 0; pointer-events: none;
  width: var(--rs-drone-w);
  left: max(10px, calc((100vw - var(--rs-w)) / 2 - var(--rs-drone-w) - 24px));
  top: 88px;
}
/* overflow: visible ＝ 傾いたときに羽根の先が枠から出ても切らない */
.rs-drone svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 1339px) { .rs-drone { display: none; } }

/* 上下に流れる動き。3秒で1往復。
   2026-08-21の経緯（本郷様ご指示・3段階）：
     ① 5.5秒・上へ14 → 遅すぎ・小さすぎ
     ② 3秒・上へ42   → 範囲をもっと広く
     ③ 3秒・下へ120px → 2行目「こんなお悩み」の高さまで下りるようにしたら、今度は動きすぎ
     ④ 3秒・下へ80px … ③の3分の2。1行目と2行目のあいだあたりまで下りて戻る。いまここ

   ★上下の動きは絵（SVG）の中ではなく、外側の <div> に付けている★
     理由：絵の中に書いた数字は「絵の中の目盛り」で数えられ、画面上の動く量は
     絵の表示幅によって変わってしまう。この絵は横260目盛りで、画面幅1340pxでは147px、
     1600pxでは176pxに縮めて表示している。同じ「42」と書いても24pxだったり28pxだったりする。
     外側の <div> に付ければ普通の画面pxで数えられ、どの画面幅でも同じだけ動く。
     （傾きだけは絵の中＝.rs-drone__craft に残してある。角度は目盛りと関係ないため）

   ★高さの目安（セクションの上端からの高さ・実測）★
     止まっているときの機体の中央 … 142〜167px（画面幅で少し変わる）
     見出し1行目の中央            … 165px
     見出し2行目の中央            … 263px（どの画面幅でも同じ。文字が70pxで頭打ちのため）
     120pxだと2行目とちょうど並ぶ。いまは80pxなので、1行目と2行目のあいだで折り返す。
   ★これ以上下げないこと★ お悩みカードの上端が334px。 */
@keyframes rs-drone-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(80px); }
}
/* 機体の傾き。上下と同じ3秒でゆっくり傾く */
@keyframes rs-drone-tilt {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
/* 影。機体と一緒に動くので、地面の影ではなく「機体に付いてくる影」。
   わずかに縮む・薄くなるだけにして、動きの邪魔をしないようにしている */
@keyframes rs-drone-shadow {
  0%, 100% { transform: scale(1);   opacity: .13; }
  50%      { transform: scale(.92); opacity: .09; }
}
/* プロペラ。ぐるぐる回す代わりに横幅をわずかに縮めて濃さを変えている
   （速く回る羽根は、実際こういう見え方になる） */
@keyframes rs-drone-prop {
  0%, 100% { transform: scaleX(1);  opacity: .5; }
  50%      { transform: scaleX(.9); opacity: .78; }
}
.rs-drone        { animation: rs-drone-float  3s ease-in-out infinite; }
.rs-drone__craft { animation: rs-drone-tilt   3s ease-in-out infinite; }
.rs-drone__shadow{ animation: rs-drone-shadow 3s ease-in-out infinite; opacity: .13; }
.rs-drone__prop  { animation: rs-drone-prop   1.1s ease-in-out infinite; opacity: .5; }
/* transform-box: fill-box ＝「図形自身の大きさを基準に動かす」。
   これが無いと絵全体の枠が基準になり、傾きも縮みも大きく出てしまう。
   ※外側の <div>（.rs-drone）はふつうの箱なので、この指定は要らない */
.rs-drone__craft, .rs-drone__shadow, .rs-drone__prop {
  transform-box: fill-box; transform-origin: center;
}
/* 4枚の羽根の呼吸をずらす（そろっていると機械的に見えるため） */
.rs-drone__prop--2 { animation-delay: -.35s; }
.rs-drone__prop--3 { animation-delay: -.70s; }
.rs-drone__prop--4 { animation-delay: -.15s; }
/* OSで「視差効果を減らす」を選んでいる人には止めて見せる */
@media (prefers-reduced-motion: reduce) {
  .rs-drone, .rs-drone__craft, .rs-drone__shadow, .rs-drone__prop { animation: none; }
}

/* -----------------------------------------------------------
   8. 信条（クリーム地に白い点線ボックス・デザイン案準拠）
   ----------------------------------------------------------- */
.rs-philosophy { background: var(--rs-cream); position: relative; overflow: hidden; }
.rs-philosophy::before, .rs-philosophy::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.rs-philosophy::before { top: -90px; left: -70px; width: 280px; height: 280px; background: rgba(245,166,35,.10); }
.rs-philosophy::after { bottom: -110px; right: -80px; width: 320px; height: 320px; background: rgba(245,166,35,.08); }
/* ★2026-08-21：山角様ご指摘「スマホだと背景にオレンジの円が写っている」★
   上の飾りの円は280〜320px。PCではセクションが広いので隅にわずかに覗くだけだが、
   幅390pxのスマホでは画面の大半を占めてしまい、はっきりした円として見えていた。
   狭い画面では出さない（PCはそのまま） */
@media (max-width: 900px) {
  .rs-philosophy::before, .rs-philosophy::after { display: none; }
}
/* 白い点線ボックス（.rs-philosophy__box）は 2026-08-17④ で廃止した。
   本郷様指示で中の文章を写真の上に移したので、入れ物そのものが要らなくなった。
   見出しの色 #F5A623 は白地だとコントラストが2.0:1しかなく目安を下回っていたが、
   いまは暗いベールの上の白抜きなので、その心配もなくなっている。
   戻すときは _backup_260817b_信条写真全幅前/rs-design.css を見ること。 */
.rs-philosophy__wave { display: block; margin: 8px auto 0; }
.rs-philosophy__copy {
  font-size: 20px; font-weight: 700; color: #B4690E;
  line-height: 1.9; text-align: center; margin: 20px 0 0;
}
.rs-philosophy__body { margin: 24px 0 0; font-size: 17.5px; line-height: 2.2; color: var(--rs-text); text-align: left; }
/* 写真の大きさの変遷（どちらも本郷様指示）
   2026-08-17①：620px → 箱の内側いっぱい（PCで888px）。同時にこの下にあった
     「無料で相談する」ボタンを削除（.rs-philosophy__box .rs-btns も消してある）。
   2026-08-17②：撮影した写真をもっと活かしたい、とのことで画面幅いっぱいへ。
     HTML側で白い点線ボックスの外に出し、ここで左右に負のマージンを掛けて全幅にする。
     下は負のマージンでセクションの余白を打ち消し、次の青いCTA帯に直結させている。
     ★高さは height で指定する。aspect-ratio + max-height だと横幅まで縮んで
       左右に隙間ができる（ヒーローで実際に踏んだ）。
     ★object-position の 15% は、頭の上に余白を残しつつノートPCの下端まで入る位置。
       横長のウィンドウ（2560×900など）で帯が細くなっても顔が切れないことを確認済み。 */
/* class2重書きは詳細度を上げるため。Arkheのmain.cssに
   「グループの2つ目以降の子は上16px・下0」という指定があり、1つでは負ける。 */
/* 上下の負のマージンは、セクションの余白（クリーム色の帯）を打ち消すため。
   2026-08-17⑥に本郷様指示で上も打ち消した。写真だけになったセクションで、
   上にクリームの帯が残っていると「何もない色帯」に見えてしまうため。
   これで写真は前の白いセクションと、次の青いCTA帯に直接つながる。 */
.rs-philosophy__photo.rs-philosophy__photo {
  position: relative; z-index: 1;
  margin: calc(-1 * var(--rs-pad-sm)) calc(50% - 50vw) calc(-1 * var(--rs-pad-sm));
  max-width: none;
}
.rs-philosophy__photo img {
  width: 100%;
  height: min(56.25vw, calc(100svh - 80px));
  object-fit: cover; object-position: center 15%;
  border-radius: 0; box-shadow: none; display: block;
}
/* 文章を写真の左側に重ねる（2026-08-17④・本郷様指示）。
   写真の左3〜4割はボケたオフィスで人物がいないので、そこに置いている。
   ベールは左だけを暗くする横方向のグラデーション。右（人物の顔）は素のまま残す。
   ★重ねるのは1101px以上だけ。それより狭いと文字の行数が増えて写真からはみ出すので、
     下のメディアクエリで写真の下へ流している。 */
/* ★ベールは「文章の右端で濃さを保ち、人物の顔の手前で切る」形にしてある。
   38%までを .76 で保ち、52%（顔の左端の手前）でゼロになる。
   なだらかに右まで伸ばすと、文章の右端が薄くなって読めなくなるうえ、
   顔まで暗くなる。実測でその両方を確かめた：
   ・右へ長く伸ばす形（80%でゼロ）… 文章は読めるが顔の明るさが 0.164→0.055 に落ちる
   ・この形 … 文章のコントラストはコピー5.7/本文7.5前後、顔の明るさは 0.164 のまま無傷
   文章を左端寄り（コンテンツ幅ではなく写真の左端から80px）に置いているのも、
   ベールを顔の手前で切れるようにするため。 */
/* 写真とその上に載るもの（ベール・見出し）は __pic にまとめてある。
   狭い画面では文章が写真の下に流れるので、__photo を基準にすると
   下端に置いた見出しが文章のところまで降りてきてしまう。 */
.rs-philosophy__pic { position: relative; display: block; }
/* 2026-08-17⑦：本郷様指示で境目をなだらかに。
   止め位置を9つに増やし、左半分はほぼ一定 → 48%あたりからゆるく落ち始め →
   最後だけ一気に抜ける、という減衰カーブにしてある。
   3〜4点だと変わり目が折れ線として見えてしまう。
   58%（835px）で完全に0。人物の髪の左端は805px（写真の56%・拡大して実測）なので、
   顔にかかるのは .1未満のところだけ。実測でも顔の明るさは 0.193→0.189 でほぼ変わらない。 */
.rs-philosophy__pic::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(6,20,45,.88) 0%,
    rgba(6,20,45,.86) 30%,
    rgba(6,20,45,.83) 44%,
    rgba(6,20,45,.77) 48%,
    rgba(6,20,45,.64) 51%,
    rgba(6,20,45,.46) 53.5%,
    rgba(6,20,45,.26) 55%,
    rgba(6,20,45,.11) 56.5%,
    rgba(6,20,45,0) 58%);
}
/* 幅600pxは「100回同じことを…」（22pxで536px）が1行に収まる幅から決めた（本郷様指示）。
   見出しも52pxで584pxなので同じ幅に収まる。
   文字サイズを vw と組み合わせているのは、1101〜1400pxの中途半端な幅でも
   この2行が折り返さないようにするため（幅が縮むぶん文字も縮む）。 */
.rs-philosophy__onphoto {
  position: absolute; z-index: 2;
  left: max(28px, calc(50% - 672px));
  top: 50%; transform: translateY(-50%);
  /* 46%＝1200pxくらいの画面でも文章の右端が写真の48%までに収まる値。
     48%にすると右端が50%を越え、ベールが薄くなり始める場所に文字が入って
     コピーのコントラストが4.49まで落ちた（実測）。 */
  width: min(46%, 660px);
  text-align: left;
}
.rs-philosophy__onphoto .rs-philosophy__copy {
  margin: 0; text-align: left;
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.85; color: #FFD69A;
}
.rs-philosophy__onphoto .rs-philosophy__body {
  margin: 20px 0 0; font-size: 16.5px; line-height: 2.05; color: #E8F0FB;
}
/* 蛍光ペン風の下線は、暗い地の上では色を入れ替える（濃紺→白、薄橙→半透明の橙） */
.rs-philosophy__onphoto .rs-hl {
  color: #fff;
  background: linear-gradient(transparent 62%, rgba(245,166,35,.5) 62%);
}
/* 見出しを写真の下部に重ねる（2026-08-17③・本郷様案）。
   顔にかからないよう下端に寄せ、その高さだけ暗いベールを掛けて白抜きにしている。
   ベールの濃さは実測で決めた。文字が乗る帯の中でいちばん明るいピクセル
   （ノートPCの天板）に対してもコントラスト4.45:1あり、大きい文字の目安3.0を上回る。
   ※白いベール＋オレンジ文字も試したが2.43しか出ず、基準に届かせるには
     写真の下部をほぼ真っ白にする必要があった（それでは重ねる意味がない）ので見送り。 */
/* ↑この下ベールは見出しを写真の下部に置いていたときのもの。
   2026-08-17⑤で見出しを左の文章の先頭に移したため、役目を終えて削除した。
   写真の下端と青いCTA帯のつながりが硬いと感じたら、これを戻すと馴染む。 */
/* 2026-08-17⑤：本郷様指示で、写真の下部中央から文章の先頭（左）へ移動。
   2026-08-17⑦：もう少し大きく、とのことで 52px → 58px（エリアも600→660pxに拡大）。
   58px・字間.01em で「「世界一優しい事務所」」が645px。エリア660pxに15px残る。
   これ以上大きくすると文章の右端が人物の顔（写真の56%の位置）に近づき、
   ベールを顔の手前で終わらせられなくなる。 */
.rs-philosophy__photocopy.rs-philosophy__photocopy {
  position: static; z-index: 2;
  margin: 0 0 20px; padding: 0; text-align: left;
  font-size: clamp(26px, 4.0vw, 58px); font-weight: 900; line-height: 1.35;
  color: #fff; letter-spacing: .01em;
  text-shadow: 0 2px 18px rgba(3,12,30,.45);
}
/* ヒーロー直下に置く信条の一文（山角様7/20ご要望） */
.rs-creed {
  background: var(--rs-cream-2); text-align: center; padding: 26px 24px;
  font-size: 22px; font-weight: 700; color: var(--rs-navy); letter-spacing: .01em;
}

/* -----------------------------------------------------------
   9. 料金表
   ----------------------------------------------------------- */
/* 下層ページ用のtable版 */
.rs-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--rs-r); overflow: hidden; box-shadow: 0 10px 30px rgba(8,44,100,.06); }
/* 2026-07-30：word-break: auto-phrase を外した。セルの幅が189pxしかない列で
   文節ごと次の行へ送られ、行末に60pxの空きができていた（実測）。 */
/* ★セルの余白は「padding」で書いても効かない★
   Arkhe の main.css が td, th に
     padding: var(--ark-padding--cell, .5em .75em) !important;
   と !important 付きで書いているため、こちらの padding は常に負ける。
   2026-08-30 に実測して分かった（19px 22px と書いてあるのに実際は 8.5px 12.75px だった）。
   Arkhe が変数で受け取ってくれているので、padding ではなく変数の側を渡す。
   ここを直したことで、サイト内すべての表のセルがゆったりする。 */
.rs-table th, .rs-table td {
  --ark-padding--cell: 19px 22px;
  padding: 19px 22px; /* Arkhe を使わない環境のための保険 */
  border-bottom: 1px solid #EDF2F9; text-align: left; font-size: 17px;
}
.rs-table thead th { background: var(--rs-blue); color: var(--rs-white); font-weight: 700; font-size: 18px; letter-spacing: .06em; }
/* 最終列を「金額の列」として右寄せ・青字にするのは、金額表(--price)だけ。
   これを全ての .rs-table に当てていたため、顧問プランの比較表では
   4列目の見出し「プレミアム 月額55,000円」が青地に青字になって見えなくなっていた。
   見出し(th)は色を変えず、右寄せだけにすること */
.rs-table--price td:last-child { text-align: right; white-space: nowrap; font-weight: 700; color: var(--rs-blue); }
.rs-table--price th:last-child { text-align: right; }
.rs-table--price {
  border-collapse: separate; border-spacing: 0;
  border: 2px solid var(--rs-blue); border-radius: var(--rs-r);
  box-shadow: 0 12px 28px rgba(8,44,100,.07);
}
/* 2026-08-30：バウンダリ行政書士法人の実測値に寄せ、
   料金表の帯は主色に白文字、外枠は主色の2pxにする */
.rs-table--price thead th {
  --ark-padding--cell: 20px 22px 22px;
  padding: 20px 22px 22px;
  background: var(--rs-blue); color: var(--rs-white);
}
.rs-table--price tbody td {
  --ark-padding--cell: 30px 22px;
  padding: 30px 22px;
  border-bottom-color: var(--rs-line); line-height: 1.8;
}
.rs-table--price tbody td:last-child {
  font-family: var(--rs-font-en); font-size: 22px; font-weight: 800;
}
/* 外枠の共通角丸から2pxの枠線分を引いてセル自身も丸め、四角いセルとの白いすき間を防ぐ */
.rs-table--price thead th:first-child { border-top-left-radius: calc(var(--rs-r) - 2px); }
.rs-table--price thead th:last-child { border-top-right-radius: calc(var(--rs-r) - 2px); }
.rs-table--price tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--rs-r) - 2px); }
.rs-table--price tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--rs-r) - 2px); }
/* 比較表（○・−の一覧）は、記号を中央に揃えたほうが縦に読みやすい */
.rs-table--compare td:not(:first-child), .rs-table--compare th:not(:first-child) { text-align: center; }
.rs-table tbody tr:nth-child(even) { background: var(--rs-bg-2); }
/* 料金表は下端セルの角丸が背景にも効くよう、しま模様を行ではなくセルに載せる */
.rs-table--price tbody tr:nth-child(even) { background: transparent; }
.rs-table--price tbody td { background: var(--rs-white); }
.rs-table--price tbody tr:nth-child(even) td { background: var(--rs-bg-2); }
.rs-table tbody tr:last-child td { border-bottom: none; }
/* 2026-07-30：見出し以外のテキストは左そろえに統一。
   注記は中央そろえにしていたが、2行以上になると行の始まりが行ごとにずれて読みにくいため。
   中央そろえのままにしているのは、見出し（.rs-h2）と英字ラベル（.rs-label）、
   それと相談導線の帯（.rs-contact）だけ。 */
.rs-note.rs-note { font-size: 15.5px; color: var(--rs-muted); margin-top: 18px; line-height: 1.9;
  text-align: left; max-width: var(--rs-w); margin-inline: auto; }
.rs-contact .rs-note.rs-note { text-align: center; }
.rs-note + .rs-note.rs-note { margin-top: 6px; }

/* トップの料金ボックス（デザイン案準拠・行ごとのflex） */
.rs-pricebox {
  max-width: var(--rs-w); margin: 0 auto;
  border: 1px solid var(--rs-line); border-radius: var(--rs-r); overflow: hidden;
  background: #fff; box-shadow: 0 10px 30px rgba(8,44,100,.06);
}
.rs-pricebox__head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--rs-sky); color: var(--rs-blue); padding: 14px 28px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
}
.rs-pricebox__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 18px; padding: 21px 28px; border-top: 1px solid #EDF2F9;
}
.rs-pricebox__row:first-of-type { border-top: none; }
.rs-pricebox__row:nth-of-type(even) { background: var(--rs-bg-2); }
.rs-pricebox__svc { font-size: 17.5px; font-weight: 600; color: var(--rs-navy); flex: 1 1 220px; }
.rs-pricebox__val { text-align: right; margin-left: auto; color: var(--rs-blue); }
.rs-pricebox__num { font-family: var(--rs-font-en); font-weight: 800; font-size: 25px; }
.rs-pricebox__unit { font-size: 14px; font-weight: 700; }
/* 金額の条件は読み落とせない情報なので、注記のなかでは大きめに */
.rs-pricebox__cap { display: block; font-size: 13px; color: var(--rs-muted-2); line-height: 1.6; font-weight: 400; }

/* -----------------------------------------------------------
   10. 流れ（ステップ）
   ----------------------------------------------------------- */
/* 縦積み版（下層ページ用） */
.rs-flow { display: grid; gap: 16px; max-width: var(--rs-w-narrow); margin-inline: auto; counter-reset: step; }
.rs-flow__item { background: #fff; border: 1px solid var(--rs-line); border-radius: var(--rs-r); padding: 22px 24px 22px 76px; position: relative; box-shadow: var(--rs-shadow-md); }
.rs-flow__item::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 24px; top: 22px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--rs-sky); color: var(--rs-blue);
  font-family: var(--rs-font-en); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.rs-flow__title { font-size: 19px; font-weight: 700; color: var(--rs-navy); margin: 0 0 7px; }

/* 2026-08-20：縦並びの流れが白いカードの繰り返しで単調だったので、2つだけ手を入れた
   （山角様ご要望「全体的にデザインを工夫して」への対応）。
   ① 番号の丸どうしを薄い線でつなぎ、上から下へ進む道筋に見せる
   ② 最後の1枚（許可取得のご報告）だけオレンジで縁取り、ゴールだと分かるようにする
   ②は横並び版（.rs-flow--h）で前からやっていた見せ方を、縦並びにもそろえたもの。
   線はカードとカードの隙間（gap の16px）と、番号の丸の下側ぶんを足した長さで引く。 */
.rs-flow:not(.rs-flow--h) .rs-flow__item:not(:last-child)::after {
  content: ""; position: absolute; left: 41px; top: 58px; bottom: -17px;
  width: 2px; background: var(--rs-line-2); z-index: 0;
}
.rs-flow:not(.rs-flow--h) .rs-flow__item:last-child {
  border: 2px solid var(--rs-orange); box-shadow: 0 10px 24px rgba(232,125,10,.12);
  /* 枠が1px→2pxになるぶん、中身が動かないように余白を1pxずつ詰める */
  padding: 21px 23px 21px 75px;
}
.rs-flow:not(.rs-flow--h) .rs-flow__item:last-child::before {
  background: var(--rs-sky); color: var(--rs-blue); left: 23px; top: 21px;
}

/* 横並び版（トップ用・デザイン案準拠。5枚目はオレンジ枠で強調） */
/* 2026-08-21：山角様ご指示「各カードの幅を広く」。
   1000px→1200pxに広げ、1枚あたり約180px→約220pxにした。
   セクション側にも .rs-sec--wide が要る（--rs-gutter が1000px基準のため）。 */
.rs-flow--h { display: flex; align-items: stretch; gap: 0; max-width: 1200px; }
.rs-flow--h .rs-flow__item {
  flex: 1 1 0; padding: 28px 16px; text-align: center;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  border-radius: 16px;
}
.rs-flow--h .rs-flow__item::before {
  position: static; width: 44px; height: 44px; font-size: 19px; margin: 0;
}
.rs-flow--h .rs-flow__item:last-child { border: 2px solid var(--rs-orange); box-shadow: 0 10px 24px rgba(232,125,10,.12); }
.rs-flow--h .rs-flow__item:last-child::before { background: var(--rs-orange); }
.rs-flow--h .rs-flow__title { font-size: 17.5px; margin: 0; line-height: 1.55; }
.rs-flow--h .rs-card__text { font-size: 15.5px; line-height: 1.85; }
.rs-flow__arrow { align-self: center; flex: 0 0 24px; display: flex; justify-content: center; color: #9DB6D8; }
/* 締めの一文（2〜4週間） */
.rs-flow-close.rs-flow-close { text-align: center; font-size: 18.5px; font-weight: 600; color: var(--rs-navy); line-height: 2; margin-top: 40px; }
.rs-flow-close .rs-flow-close__em { color: var(--rs-blue); font-weight: 800; font-size: 1.18em; }

/* -----------------------------------------------------------
   11. 顧問プラン（濃紺の目玉ブロック・山角様7/20ご要望で格上げ）
   ----------------------------------------------------------- */
.rs-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--rs-w-narrow); margin: 0 auto; }
/* 2026-07-29：3枚とも白地・黒文字に統一（本郷様指示）。
   もともとスタンダードだけ白くして「おすすめ」を示していたが、山角様からいただいた
   資料（ドローンサイト用情報）にスタンダードを勧める記載が無かったため、
   白の差と「おすすめ」の札の両方をやめた。
   ※資料で「おすすめ」と明記されているのはプレミアム（外国人材ビジネスに関心がある方向け）だけ。
   1枚だけ強調したくなったら .rs-plan--pick と .rs-plan__pick を復活させる（旧版のCSSはバックアップに残してある）。 */
.rs-plan {
  position: relative; background: #fff; border: 1px solid #fff;
  border-radius: var(--rs-r); padding: 32px 26px; text-align: center;
}
.rs-plan__name  { font-size: 19px; font-weight: 700; color: var(--rs-navy); margin: 0 0 12px; }
.rs-plan__price { font-family: var(--rs-font-en); font-size: 30px; font-weight: 800; color: var(--rs-navy); line-height: 1.2; }
.rs-plan__price small { font-size: 14px; font-weight: 700; margin-left: 2px; }
/* 名前と金額は中央のまま、説明文だけ左寄せ（読みやすさ優先・山角様ご要望） */
.rs-plan__desc  { font-size: 16.5px; color: var(--rs-navy); margin: 14px 0 0; text-align: left; }

/* 2026-07-29：プランの中身を、下の比較表と同じ項目の箇条書きに差し替えた（山角様ご指示）。
   ふわっとした紹介文だと表と食い違って見えるため、表の○が付いている項目をそのまま並べている。
   ★表を直したら、この箇条書きも必ず同じ内容に直すこと★ */
/* word-break:auto-phrase ＝ 日本語の語の切れ目で折り返す指定。
   これが無いと「…会社様／に」のように1文字だけ次の行に落ちる */
.rs-plan__for {
  font-size: 14.5px; font-weight: 700; color: var(--rs-blue);
  margin: 12px 0 0; line-height: 1.6; word-break: auto-phrase;
}
.rs-plan__list {
  list-style: none; padding: 0; margin: 18px 0 0;
  text-align: left; display: grid; gap: 10px;
  border-top: 1px solid var(--rs-line); padding-top: 18px;
}
.rs-plan__list li {
  position: relative; padding-left: 27px;
  font-size: 15.5px; line-height: 1.7; color: #1F2937;
}
/* チェックマークは「左と下の枠線だけ引いた四角を45度傾ける」という書き方。
   画像を使わずに済むので、色もサイズも数値だけで変えられる */
.rs-plan__list li::before {
  content: ""; position: absolute; left: 3px; top: 7px;
  width: 13px; height: 7px;
  border-left: 2.2px solid var(--rs-orange); border-bottom: 2.2px solid var(--rs-orange);
  transform: rotate(-45deg);
}

/* -----------------------------------------------------------
   12. ドローンショー・イベント（目玉スポットライト・山角様7/20ご要望で新設）
   ----------------------------------------------------------- */
/* 2026-07-29 山角様ご指定で、青のグラデ背景 → 夜のドローンショーの写真に変更。
   「DRONE SHOW & EVENT」の英字バッジは不要とのことで削除（HTML側からも外した）。
   写真は光跡が明るく、そのままだと白文字が読めないので、上に濃紺の膜を重ねている。
   膜の濃さ（.60〜.82）は、光跡が透けて見えつつ文字が読める境目で決めた。
   ※写真の差し替えは --rs-spot-photo の1行だけ直せばよい。

   2026-08-17：本郷様のご指示で、夜のドローンショー（drone-show-night.jpg）→
   浜辺を飛ぶドローン（bg-drone-beach-260817.jpg）に差し替えた。
   膜は夜の写真に合わせて決めた値だが、明るい写真でも足りることを実測で確認済み
   （見出しの白 6.84:1／本文 7.56:1。どちらも目安4.5を上回る）。
   浜辺をもっと明るく見せたい場合は、下の ::before の3つの数値を下げる。
   旧写真 drone-show-night.jpg はメディアに残してある（差し戻すならURLを戻すだけ）。

   2026-08-20：山角様ご指示で、浜辺の写真（bg-drone-beach-260817.jpg）→
   ご提供いただいた花火の写真（bg-fireworks-260820.jpg）に差し替えた。
   浜辺の写真は下の .rs-advisory-spot（顧問プランへの誘導帯）へ回した。
   見出し「夜空を彩るドローンショーも、」と写真の内容が合うようになった。 */
.rs-spot {
  --rs-spot-photo: url('../../uploads/2026/08/bg-fireworks-260820.jpg');
  position: relative; isolation: isolate;
  background: #061631 var(--rs-spot-photo) center / cover no-repeat;
  /* 2026-07-29：角丸パネル → 画面幅いっぱいの帯に（山角様ご指示）。
     全幅は上の「margin-left: calc(50% - 50vw)」の一覧に .rs-spot を足して効かせている。
     中身の幅は下の inner-container で1000pxに絞る */
  color: #fff; padding: 104px 24px 100px;
  overflow: hidden; text-align: center;
}
/* 2026-07-29：見出しを75pxまで上げたので、内側を1000→1240pxに広げた。
   1000pxのままだと「夜空を彩るドローンショーも、」14文字×75px＝約1050pxが入りきらない */
.rs-spot > .wp-block-group__inner-container { max-width: 1240px; margin-inline: auto; }
/* 文字を読ませるための膜。写真の上・文字の下に敷く */
.rs-spot::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4,14,38,.60) 0%, rgba(4,14,38,.76) 60%, rgba(4,14,38,.82) 100%);
}
.rs-spot h2, .rs-spot h3 { color: #fff; }
.rs-spot h2::after { content: none; }
.rs-spot h2 {
  /* 2026-07-29：お悩みの見出し「ドローンの申請は複雑！」と同じ大きさに揃えた（山角様ご指示）。
     倍率も上限も .rs-worryhead と同じ 5.5vw / 75px。
     下限だけ24pxで、あちら（29px）より小さい。390px幅で1行目14文字が収まる上限がここだから。
     どこで折れるかを機械任せにすると「…まとめて／お任せください。」と半端な位置で切れるので、
     HTML側の <br> で読点の後に折っている */
  font-size: clamp(24px, 5.5vw, 75px); font-weight: 800; line-height: 1.5;
  margin: 0 0 28px; letter-spacing: .01em; word-break: auto-phrase;
  /* 光跡の明るい点に文字が重なっても輪郭が消えないよう、わずかに影を落とす */
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
/* 本文は .rs-lead と同じ仕掛け。1行に収まる短い文は中央に見え、
   2行以上になる長い文は左端が揃って読みやすくなる（中央寄せの長文は読みにくいため） */
.rs-spot p {
  color: #D9E7F9; font-size: 17.5px; line-height: 2.05;
  /* 2026-07-29：表示エリアをもう少し広く（山角様ご指示）720→880px */
  text-align: left; width: max-content; max-width: min(880px, 100%);
  margin: 0 auto 18px;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.rs-spot p:last-of-type { margin-bottom: 0; }
.rs-spot a.rs-btn { margin-top: 32px; }

/* 顧問プランへの誘導帯（ADVISORY・「機体も現場も増えていく会社には顧問という選び方も」）の地色。
   2026-08-20（同日中の変更）：本郷様ご指示で背景の浜辺の写真をやめ、単純な青のグラデーションに。
   外した浜辺の写真は、下の .rs-contact（全ページの相談導線）へ回した。
   .rs-sec--navy は他ページ（about・price）でも使う共通クラスなので、
   そちらに影響しないよう、この帯だけに付けた .rs-advisory-spot 側に書く。 */
.rs-advisory-spot {
  background: linear-gradient(150deg, #0068B7 0%, #005192 100%);
}

/* 写真を使わない帯（濃紺・中央寄せ）
   ※2026-07-29 夕方の時点で、この帯を使っているページは無くなった。
     包括申請・スクールの「顧問という選び方も」の帯が、すぐ下の
     「まずはお気軽にご相談ください」と見た目が重なるためセクションごと削除したため。
     同じ形の帯をまた使いたくなったとき用に指定だけ残してある（<div class="rs-spot rs-spot--plain">）。
   見出しは写真の上でないぶん、本文の見出しに近づけて 44px 上限に抑えている。 */
.rs-spot--plain { background: var(--rs-navy-deep); }
.rs-spot--plain::before { content: none; }
.rs-spot--plain h2 { font-size: clamp(23px, 3.4vw, 44px); text-shadow: none; }
.rs-spot--plain p { text-shadow: none; }

/* -----------------------------------------------------------
   13. FAQ（Q/Aの丸バッジ・デザイン案準拠）
   ----------------------------------------------------------- */
.rs-faq { max-width: var(--rs-w-text); margin-inline: auto; }
.rs-faq:not(:has(> .wp-block-group__inner-container)),
.rs-faq > .wp-block-group__inner-container { display: grid; gap: 14px; }
/* 質問1件は「詳細」ブロック＝<details class="rs-faq__item"><summary>質問</summary>…</details> */
.rs-faq__item {
  background: #fff; border: 1px solid var(--rs-line-2);
  border-radius: var(--rs-r-sm); padding: 20px 22px;
  box-shadow: var(--rs-shadow);
}
.rs-faq__item > summary {
  font-weight: 700; color: var(--rs-navy); cursor: pointer; line-height: 1.7;
  list-style: none; position: relative; padding: 0 30px 0 44px;
}
.rs-faq__item > summary::-webkit-details-marker { display: none; }
.rs-faq__item > summary::before {
  content: "Q"; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--rs-sky); color: var(--rs-blue);
  font-family: var(--rs-font-en); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.rs-faq__item > summary::after {
  content: "＋"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  color: var(--rs-blue); font-weight: 700;
}
.rs-faq__item[open] > summary::after { content: "−"; }
.rs-faq__item p { color: var(--rs-text); font-size: 17px; line-height: 2; margin: 16px 0 0; padding-left: 44px; position: relative; }
.rs-faq__item > summary + p::before,
.rs-faq__item p:first-of-type::before {
  content: "A"; position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  /* 2026-08-30：クリームの地色にオレンジの「A」だったが、地色を水色に変えたので
     オレンジだとコントラスト2.4で読みにくい。Qは「水色の地に青文字」、
     Aは「青の地に白文字」と、濃さで見分けがつくようにした */
  background: var(--rs-blue); color: #fff;
  font-family: var(--rs-font-en); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}

/* -----------------------------------------------------------
   13-2. お問い合わせフォーム（Contact Form 7）
   ----------------------------------------------------------- */
/* 2026-07-30：フォームの幅が狭いというご指摘（本郷様）。640px → 他のセクションと同じ1000px。
   ただし1000pxの入力欄が縦に6つ並ぶと間延びするので、
   短い項目（お名前・ふりがな・会社名・メール・電話）は2列に並べている。 */
.rs-cf7 { max-width: var(--rs-w); margin-inline: auto; }
/* 2026-07-30：2列に並べていたのを1列に戻した。項目を上から順に1つずつ見せる形。 */
.rs-cf7 p { margin: 0 0 20px; }
.rs-cf7 label { font-size: 14.5px; font-weight: 700; color: var(--rs-navy); }
.rs-cf7__req {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  font-size: 11px; font-weight: 700; color: #fff;
  background: var(--rs-orange); border-radius: var(--rs-r-pill); vertical-align: 2px;
}
/* 2026-07-29：ふりがな・会社名・電話番号を足したので「任意」の札を新設（本郷様指示）。
   必須のオレンジと違い、目立たせる必要はないのでグレーの枠線だけにしてある。 */
.rs-cf7__opt {
  display: inline-block; margin-left: 8px; padding: 0 8px;
  font-size: 11px; font-weight: 700; color: var(--rs-muted);
  background: transparent; border: 1px solid var(--rs-line);
  border-radius: var(--rs-r-pill); vertical-align: 2px;
}
.rs-cf7 input[type="text"], .rs-cf7 input[type="email"], .rs-cf7 input[type="tel"], .rs-cf7 textarea {
  width: 100%; margin-top: 8px; padding: 13px 16px;
  font-size: 16px; font-family: var(--rs-font); color: var(--rs-text);
  background: #fff; border: 1px solid var(--rs-line-2); border-radius: 10px;
}
.rs-cf7 input:focus, .rs-cf7 textarea:focus { outline: 2px solid var(--rs-blue); border-color: var(--rs-blue); }
.rs-cf7 textarea { min-height: 160px; }
.rs-cf7__submit { text-align: center; margin-top: 28px; }
.rs-cf7 input[type="submit"] {
  display: inline-block; background: var(--rs-orange); color: #fff;
  font-family: var(--rs-font); font-size: 16.5px; font-weight: 700;
  padding: 17px 56px; border: none; border-radius: var(--rs-r-pill);
  box-shadow: 0 14px 30px rgba(10,30,70,.25); cursor: pointer; transition: .2s;
}
.rs-cf7 input[type="submit"]:hover { background: var(--rs-orange-dark); transform: translateY(-2px); }
.rs-cf7 .wpcf7-not-valid-tip { font-size: 12.5px; color: #D63638; margin-top: 4px; }
.wpcf7 form .wpcf7-response-output { border-radius: 10px; padding: 14px 18px; font-size: 14px; }

/* -----------------------------------------------------------
   13-3. お知らせ・コラム（実記事ができるまでの仮表示。
   運用開始時はクエリーループで同じクラス構造を出力する）
   ----------------------------------------------------------- */
.rs-newslist { max-width: var(--rs-w-text); margin-inline: auto; border-top: 1px solid #DCE6F2; }
.rs-newslist__row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px;
  padding: 20px 8px; border-bottom: 1px solid #DCE6F2; text-decoration: none;
}
.rs-newslist__row time { font-family: var(--rs-font-en); font-weight: 600; font-size: 13.5px; color: var(--rs-muted-2); letter-spacing: .05em; }
.rs-newslist__row span { flex: 1 1 300px; font-size: 17px; font-weight: 600; color: var(--rs-navy); line-height: 1.8; }

.rs-colcards { max-width: var(--rs-w-narrow); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rs-colcard {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--rs-line-2); border-radius: 16px; overflow: hidden;
  text-decoration: none; box-shadow: var(--rs-shadow);
}
.rs-colcard__thumb {
  aspect-ratio: 16 / 10;
  background: repeating-linear-gradient(45deg, #EDF2F9 0 14px, #F7FAFD 14px 28px);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid #E9F0F8; color: #7C8BA5; font-size: 11.5px;
}
.rs-colcard__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 11px; }
.rs-colcard__meta { display: flex; align-items: center; gap: 10px; }
.rs-colcard__meta time { font-family: var(--rs-font-en); font-weight: 600; font-size: 13px; color: var(--rs-muted-2); letter-spacing: .05em; }
.rs-colcard__cat { font-size: 12px; font-weight: 700; color: var(--rs-blue); background: var(--rs-blue-pale); border-radius: var(--rs-r-pill); padding: 3px 12px; }
.rs-colcard__title { font-size: 17px; font-weight: 700; color: var(--rs-navy); line-height: 1.8; }

/* -----------------------------------------------------------
   14. 中間CTA帯・CONTACT
   ----------------------------------------------------------- */
/* 中間の無料相談帯（青グラデ）
   2026-07-29：山角様ご指示でバウンダリの「初回無料相談受付中!!」の見せ方に寄せた。
   見出しを21px→46pxに拡大し、電話をテキストからボタンに変えて2つのボタンを横並びに。
   受付時間はボタンの中から下の注記へ移した（ボタンの中は電話番号だけにして大きく見せるため）。 */
.rs-ctaband {
  background: linear-gradient(120deg, #005192, #0068B7);
  color: #fff; padding: 92px 28px 84px; text-align: center;
}
.rs-ctaband__title {
  font-size: clamp(25px, 3.5vw, 46px); font-weight: 800; color: #fff;
  line-height: 1.5; margin: 0 0 38px; letter-spacing: .01em;
  /* 折り返すときは2行の長さが揃うようにする。これが無いと、スマホで
     「ご相談・お見積りは無料で／す。」と最後の1文字だけが行に落ちる */
  text-wrap: balance;
}
/* スマホでは1行に収まるぎりぎりまで小さくする（幅390pxで実測350px＝ちょうど溢れる） */
@media (max-width: 600px) {
  .rs-ctaband__title { font-size: 23.5px; }
}
/* align-items:stretch で、行数の違う2つのボタンの高さを揃える */
.rs-ctaband__row { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 20px 24px; }
/* 電話のボタンは赤（2026-08-30ご指示「電話のボタンの背景を赤系にして」）。
   もとは青いグラデの上の白地のボタンだったが、電話の導線は全ページ赤（--rs-red）でそろえた。
   白ヌキ文字とのコントラストは5.1あるので読める。
   「.rs a」の青リンク色より強くするため a を重ねて指定している */
.rs a.rs-ctaband__tel, .rs-ctaband__tel {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rs-red); color: #fff;
  font-family: var(--rs-font-en); font-size: 32px; font-weight: 800;
  text-decoration: none; letter-spacing: .02em; line-height: 1.3;
  padding: 20px 44px; border-radius: var(--rs-r-pill);
  min-width: min(330px, 100%); box-shadow: 0 6px 16px rgba(4,20,50,.14);
  transition: transform .2s, box-shadow .2s;
}
.rs a.rs-ctaband__tel:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(4,20,50,.34); }
.rs-ctaband__num { display: inline-flex; align-items: center; gap: 10px; }
.rs-ctaband__num svg { flex-shrink: 0; }
/* 相談ボタンも電話ボタンと同じ大きさに揃える */
.rs-ctaband a.rs-btn { font-size: 21px; padding: 24px 46px; min-width: min(330px, 100%); }
.rs-ctaband__note { font-size: 14px; color: #B7CDEB; margin: 28px 0 0; line-height: 1.9; }

/* 2026-07-30：上下の余白が空きすぎというご指摘（本郷様）。116px → 72px。
   左右も他のセクションと同じ指定にして、内側の幅を1000pxにそろえた。 */
/* 相談導線の背景に浜辺の写真を敷く。
   上の顧問プラン帯から外した写真をここへ回したもの。
   仕組みは .rs-spot と同じ。写真の上に濃紺の膜（::before）を敷いて白文字を読ませる。
   膜の濃さは実測で決めた（見出しの白 8.2:1／本文 6.9:1。どちらも目安4.5を上回る）。

   2026-08-20：はじめはトップページだけに rs-contact--photo を付けて切り分けていたが、
   山角様ご指示「各ページの下部の『まずはお気軽にご相談ください』の背景を
   トップページのものにして」を受けて、全ページ共通の .rs-contact に統合した。
   （モディファイア rs-contact--photo は廃止。HTML側からも外してある） */
.rs-contact {
  position: relative; isolation: isolate;
  background: var(--rs-navy-deep) url('../../uploads/2026/08/bg-drone-beach-260817.jpg') center / cover no-repeat;
  color: #fff; padding: 72px var(--rs-gutter); text-align: center;
}
.rs-contact::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* 2026-08-21：山角様ご指示「シャドーが暗すぎる」。72/80/86% → 52/58/64% に下げた。
     白い見出しのコントラストは実測で 4.5 を上回ることを確認している。 */
  background: linear-gradient(180deg, rgba(6,10,20,.52) 0%, rgba(6,10,20,.58) 60%, rgba(6,10,20,.64) 100%);
}
/* サイトの最終到達点。ここのボタンだけは他より大きくして視線を止める
   （デザイン案でもこのボタンだけ26px相当で作られていた）。
   2026-07-30：電話・メール・LINEの3つを横に並べる形にしたので、LINEも同じ大きさにそろえる。 */
.rs-contact .rs-btn.rs-btn > .wp-block-button__link,
.rs-contact a.rs-btn,
.rs-contact .rs-btn--line.rs-btn--line > .wp-block-button__link,
.rs-contact a.rs-btn--line { font-size: 19px; padding: 21px 44px; }
/* 見出し→説明→ボタン→受付時間、と続くので、ボタンの上を少し詰める */
.rs-contact .rs-btns.rs-btns { margin-top: 34px; }
.rs-contact .rs-btns + .rs-contact__hours { margin-top: 22px; }
/* 白抜きボタンは2pxの枠線があるぶん背が高くなるので、内側を2px詰めて高さを揃える */
.rs-contact .rs-btn--ghost.rs-btn--ghost > .wp-block-button__link,
.rs-contact a.rs-btn--ghost { padding: 19px 50px; }
/* 2026-07-30：3つのボタンを色で見分けられるようにした。
   電話＝白地に青文字、メール＝オレンジ（いちばん押してほしい導線）、LINE＝LINEの緑。
   白地のボタンも枠線2pxぶん背が高くなるので、内側を2px詰めてある。 */
.rs-contact a.rs-btn--outline { font-size: 19px; padding: 19px 42px; }
/* お問い合わせページの上部に置く電話・LINEのボタン。
   2026-07-30：ボタンが小さい・上下が空きすぎ・白地なので下の「メールでのお問い合わせ」と
   切り離されて見える、というご指摘（本郷様）。
   地色を下のセクションとそろえ、余白を詰め、ボタンを濃紺の帯と同じ大きさにした。 */
.rs-telline.rs-telline { padding-top: 60px; padding-bottom: 54px; }
.rs-telline .rs-btn.rs-btn > .wp-block-button__link,
.rs-telline .rs-btn--line.rs-btn--line > .wp-block-button__link { font-size: 19px; padding: 21px 44px; }
.rs-telline .rs-btns.rs-btns { margin-top: 0; }
.rs-telline .rs-note.rs-note { margin-top: 22px; }

/* 2026-08-21：膜を薄くしたぶん、浜辺の明るい部分に重なる文字を影で補う。
   実測では本文（#C9DAF0）の面の35%が「コントラスト4.5未満」に当たっていた。
   .rs-spot（花火の帯）で以前から使っているのと同じ考え方。 */
.rs-contact .rs-label { color: #FFB35C; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.rs-contact h2 { color: #fff; line-height: 1.7; text-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 2px 18px rgba(0, 0, 0, .6); }
.rs-contact p { color: #D8E4F5; text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 12px rgba(0, 0, 0, .55); }
.rs a.rs-contact__tel, .rs-contact__tel { font-family: var(--rs-font-en); font-size: 46px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: .02em; }
.rs-contact p.rs-contact__hours, .rs-contact__hours { font-size: 14px; color: #AFC6E8; }

/* -----------------------------------------------------------
   14-b. 信条の文章：狭い画面では写真の上をやめて下に流す

   1100px を境にしているのは、これより狭いと文章の1行が短くなって行数が増え、
   写真（高さ 56.25vw）の中に収まらなくなるため。
   1101pxのとき文章は約453px、写真は619pxで収まる。
   ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .rs-philosophy__pic::before { display: none; }            /* 左の暗いベールは不要 */
  .rs-philosophy__photo.rs-philosophy__photo { margin-bottom: 0; }  /* 文章が下に来るぶん、青い帯との直結をやめる */
  .rs-philosophy__onphoto {
    position: static; width: auto; transform: none;
    max-width: 800px; margin: 36px auto 0; padding: 0 24px;   /* 1行が長くなりすぎないよう800pxで止める */
  }
  /* クリーム地に戻るので、見出しは元のオレンジ・中央寄せに */
  .rs-philosophy__photocopy.rs-philosophy__photocopy {
    text-align: center; color: #F5A623; text-shadow: none;
    font-size: clamp(26px, 5.4vw, 48px); margin-bottom: 16px;
  }
  .rs-philosophy__onphoto .rs-philosophy__copy {
    text-align: center; font-size: 20px; color: #B4690E;
  }
  .rs-philosophy__onphoto .rs-philosophy__body { font-size: 17px; color: var(--rs-text); }
  .rs-philosophy__onphoto .rs-hl {
    color: var(--rs-navy);
    background: linear-gradient(transparent 62%, #FFE3BB 62%);
  }
}

/* -----------------------------------------------------------
   15. スマホ
   ----------------------------------------------------------- */
@media (max-width: 900px) {
  .rs-grid--4:not(:has(> .wp-block-group__inner-container)),
  .rs-grid--4 > .wp-block-group__inner-container { grid-template-columns: repeat(2, 1fr); }
  .rs-grid--3:not(:has(> .wp-block-group__inner-container)),
  .rs-grid--3 > .wp-block-group__inner-container,
  .rs-grid--2:not(:has(> .wp-block-group__inner-container)),
  .rs-grid--2 > .wp-block-group__inner-container { grid-template-columns: 1fr; }
  /* 対応サービスは1列のまま。左右の余白だけ詰める */
  .rs-card.rs-card--svc { padding: 22px 24px; column-gap: 22px; }
  .rs-plans, .rs-colcards { grid-template-columns: 1fr; }
  /* 理由カードの縦積みへの切り替えは 1239px 以下のブロック（上）で済ませてある。
     ここでは、画面が狭いときの文字と余白の詰めだけ */
  .rs-reason.rs-reason { max-width: 720px; }
  .rs-reason__body { padding: 84px 30px 32px; }
  .rs-reason__no { font-size: 88px; left: 22px; }
  /* 左右の余白は .rs-hero と同じ値にする（実績ボックスの端をヒーロー写真の端に重ねるため）。
     900px以下＝20px、600px以下＝12px。ヒーロー側を変えたらここも直すこと */
  .rs-stats { padding: 0 20px 26px; }
  .rs-stats .rs-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -70px; max-width: 540px; gap: 18px; }
  .rs-staff__grid { grid-template-columns: 1fr; max-width: 340px; }
  .rs-member-row, .rs-member-row--rev { gap: 28px; }
  /* 流れ：縦に切り替え、矢印は下向きに */
  .rs-flow--h { flex-direction: column; gap: 0; }
  .rs-flow__arrow { transform: rotate(90deg); flex: 0 0 34px; align-self: center; }
}
@media (max-width: 600px) {
  :root { --rs-pad: 82px; --rs-pad-sm: 72px; }
  /* スマホは clamp の下限(26px)で止まる。下余白はPCの32pxだと空きすぎるので詰める */
  .rs-h2.rs-h2 { margin-bottom: 26px; }
  .rs-h2::after { margin-top: 16px; }
  .rs-lead.rs-lead { margin-bottom: 44px; font-size: 16px; line-height: 2.05; }
  .rs-btn.rs-btn > .wp-block-button__link, a.rs-btn { font-size: 16.5px; padding: 17px 26px; width: 100%; }
  .rs-btn--outline.rs-btn--outline > .wp-block-button__link, a.rs-btn--outline,
  .rs-btn--ghost.rs-btn--ghost > .wp-block-button__link, a.rs-btn--ghost { font-size: 15.5px; padding: 14px 24px; }
  .rs-btn--navy.rs-btn--navy > .wp-block-button__link, a.rs-btn--navy { font-size: 16.5px; padding: 17px 26px; }
  .rs-contact .rs-btn.rs-btn > .wp-block-button__link, .rs-contact a.rs-btn { font-size: 17px; padding: 18px 26px; }
  .rs-btns { flex-direction: column; }
  .rs-btns .wp-block-button { width: 100%; }
  .rs-grid--4,
  .rs-grid--4:not(:has(> .wp-block-group__inner-container)),
  .rs-grid--4 > .wp-block-group__inner-container { grid-template-columns: 1fr; }
  /* 対応サービス：スマホは横並びにする幅がないので、上から順の縦積みに戻す。
     置き場所（grid-template-areas）を1列に書き換えるだけで並びが変わる */
  .rs-card.rs-card--svc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "icon" "title" "text" "more";
    justify-items: start; row-gap: 0;
    padding: 26px 22px 22px; border-radius: 16px;
  }
  .rs-card__icon { width: 50px; height: 50px; border-radius: var(--rs-r-sm); margin: 0 0 16px; }
  .rs-card--svc .rs-card__title { align-self: auto; font-size: 19px; margin-bottom: 8px; }
  .rs-card--svc .rs-card__text { align-self: auto; font-size: 15.5px; line-height: 1.85; }
  .rs-card__more { font-size: 14.5px; margin-top: 18px; }
  .rs-creed { font-size: 17px; padding: 20px 16px; }
  .rs-philosophy__onphoto { margin-top: 28px; padding: 0 20px; }
  .rs-philosophy__onphoto .rs-philosophy__copy { font-size: 17px; }
  .rs-philosophy__onphoto .rs-philosophy__body { font-size: 15px; line-height: 2.0; }
  /* スマホは横幅そのものが狭く、16:9（375pxなら211px）だと帯が薄すぎる。
     縦を厚めに取って、人物が大きく見えるようにする */
  .rs-philosophy__photo img { height: min(78vw, 52svh); }
  /* 2026-08-21：山角様ご指摘「背景の四隅を四角にして」。
     画面幅いっぱいの帯なので、角を丸めると左右の端で下地が三角に覗いてしまう */
  .rs-spot { padding: 44px 20px 40px; border-radius: 0; }
  .rs-spot p { font-size: 15px; line-height: 1.95; }
  .rs-spot a.rs-btn { margin-top: 26px; }
  /* 実績ボックス：スマホは2列のままサイズだけ落とす。
     影も8pxのままだと画面端に迫るので6pxへ */
  .rs-stats { padding: 0 12px 24px; }
  .rs-stat { min-height: 124px; padding: 0 0 12px; border-radius: 14px; gap: 0; box-shadow: 0 5px 14px rgba(8,44,100,.07); }
  .rs-stat__label { font-size: 14.5px; letter-spacing: .01em; padding: 7px 4px; margin-bottom: 9px; }
  .rs-stat__num { font-size: 30px; }
  .rs-stat__num small { font-size: 13.5px; }
  .rs-stat__strong { font-size: 16.5px; }
  .rs-stat__note { font-size: 12px; }
  .rs-worry li { font-size: 14px; padding: 15px 16px 15px 58px; }
  .rs-worry li::before { left: 16px; }
  .rs-worry-close__text { font-size: 20px; }
  /* 理由カード：縦積みのまま、本文の余白と文字だけ一段落とす */
  .rs-reason.rs-reason { border-radius: 16px; }
  .rs-reason__body { padding: 68px 22px 28px; }
  .rs-reason__no { font-size: 72px; left: 18px; }
  .rs-reason__title { font-size: 20px; }
  .rs-reason p:not(.rs-reason__title) { font-size: 15.5px; }
  .rs-reason-catch { font-size: 16px; }
  .rs-member-row__name { font-size: 24px; }
  .rs-ctaband { padding: 62px 20px 58px; }
  .rs a.rs-ctaband__tel, .rs-ctaband .rs-ctaband__tel { font-size: 26px; padding: 17px 18px; width: 100%; min-width: 0; }
  .rs-ctaband a.rs-btn { font-size: 18px; padding: 19px 18px; width: 100%; min-width: 0; }
  .rs-ctaband__note { font-size: 13px; margin-top: 22px; }
  .rs a.rs-contact__tel, .rs-contact .rs-contact__tel { font-size: 32px; }
  /* 折り返し禁止のままだと表が画面幅を超え、ページ全体が横にはみ出す */
  .rs-table th, .rs-table td { --ark-padding--cell: 12px 14px; padding: 12px 14px; font-size: 14px; }
  .rs-table--price thead th { --ark-padding--cell: 14px 14px; padding: 14px 14px; }
  .rs-table--price tbody td { --ark-padding--cell: 18px 14px; padding: 18px 14px; }
  .rs-table th:last-child, .rs-table td:last-child { white-space: normal; }
  /* 2026-07-29：顧問プランの比較表は4列あり、スマホでは幅が足りずに右端の
     プレミアム列が画面の外に切れていた（body の overflow-x: clip で
     ページごと横スクロールもできず、見る手段が無くなっていた）。
     表だけ横にスワイプできるようにして、全部の列に手が届くようにする。
     .rs-tablescroll は advisory.html の比較表を包んでいる入れ物。 */
  /* ★2026-08-21：表の1列目が細くなりすぎて、文字が縦1列に並んでいた★
     （個別申請の比較表・イベントの手続き表・料金表）。
     ブラウザは列の幅を中身の長さの比で決めるので、右の列に長い文章が入っていると
     左の見出し列が1文字ぶんまで削られてしまう。最低幅を決めて止める。
     6.4em＝約90px。「比べるところ」「申請のタイミング」が2行に収まる幅 */
  .rs-table th:first-child, .rs-table td:first-child { min-width: 6.4em; }
  .rs-tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .rs-tablescroll > .rs-table--compare { min-width: 520px; }
  .rs-tablescroll + .rs-note { margin-top: 12px; }
  .rs-pricebox__head, .rs-pricebox__row { padding-left: 18px; padding-right: 18px; }
  .rs-pricebox__num { font-size: 19px; }
  /* ★2026-08-21：山角様ご指摘「無料相談の線がおかしい」★
     スマホでは番号の丸をカードの中（左上）へ移している。
     ところが丸どうしをつなぐ縦線は、丸がカードの外にあった頃の位置
     （左から41px・カードの上から58px）のままだったので、
     線が本文の上を突き抜けて走っていた。
     番号が中に入った以上、線はカードとカードのすき間（16px）だけに引けばよい。 */
  .rs-flow__item { padding: 20px; }
  .rs-flow__item::before { position: static; margin-bottom: 10px; }
  /* 最後の1枚は枠が2pxぶん太いぶんだけ余白を詰める（左76pxのままだと1枚だけ字下げされる） */
  .rs-flow:not(.rs-flow--h) .rs-flow__item:last-child { padding: 19px; }
  .rs-flow:not(.rs-flow--h) .rs-flow__item:last-child::before { left: auto; top: auto; }
  /* 線は番号の丸の中心（左20px＋丸36pxの半分＝38px）にそろえ、すき間だけを埋める */
  .rs-flow:not(.rs-flow--h) .rs-flow__item:not(:last-child)::after {
    left: 38px; top: auto; bottom: -16px; height: 16px;
  }
}

/* -----------------------------------------------------------
   20. 追従お問い合わせボタン（2026-08-20・山角様ご要望）
   「お問い合わせのLINE・メール・電話をスクロールしても追っかけて来るようにして欲しい」
   中身（HTML）は子テーマの functions.php が出している。

   出す位置は画面の広さで変える。
     PC     … 右端の中央に縦3つ。本文（最大1000px）にはかからない位置
     スマホ … 下端に横3つ。親指が届く場所に置くのが定石
   出し入れは body に付くクラスで切り替える。
     .rs-fixcta-on   … 420px以上スクロールした（＝出す）
     .rs-fixcta-hide … ページ下部の相談セクションが見えている（＝引っ込める）
   ----------------------------------------------------------- */
.rs-fixcta {
  position: fixed; z-index: 90;
  display: flex; pointer-events: none;
  /* 出る前の位置。右の外に逃がしておく */
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.rs-fixcta__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; text-decoration: none; color: #fff; line-height: 1.2;
  transition: filter .2s;
}
.rs-fixcta__item:hover { filter: brightness(1.08); }
.rs-fixcta__ico { width: 25px; height: 25px; flex-shrink: 0; }
.rs-fixcta__ico--img { object-fit: contain; }
.rs-fixcta__label { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
/* 地色。電話は赤、メールは青、LINEは緑に分け、文字はすべて白でそろえる（2026-09-01ご指示）。 */
.rs-fixcta__item--tel  { background: var(--rs-red); }
.rs-fixcta__item--mail { background: var(--rs-blue); }
.rs-fixcta__item--line { background: #06C755; }
/* 「.rs a」より後ろに書いても色が負けないよう、リンク色を打ち消しておく */
.rs-fixcta a, .rs-fixcta a:hover, .rs-fixcta a:visited { color: #fff; text-decoration: none; }

/* 出ている状態 */
.rs-fixcta-on .rs-fixcta { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
/* 相談セクションが見えている間は引っ込める（同じボタンが二重に出るのを防ぐ） */
.rs-fixcta-on.rs-fixcta-hide .rs-fixcta { opacity: 0; visibility: hidden; pointer-events: none; }

/* PC：右端の中央に縦3つ */
@media (min-width: 901px) {
  .rs-fixcta {
    right: 0; top: 50%; flex-direction: column;
    transform: translate(100%, -50%);
    border-radius: 14px 0 0 14px; overflow: hidden;
    box-shadow: -3px 6px 20px rgba(6, 30, 70, .22);
  }
  .rs-fixcta-on .rs-fixcta { transform: translate(0, -50%); }
  .rs-fixcta-on.rs-fixcta-hide .rs-fixcta { transform: translate(100%, -50%); }
  /* 2026-08-20：本郷様ご指示で一回り大きく（78→94px）。
     ただし画面が狭いノートPCでは本文にかぶるので、1150px以下では今までの78pxに戻す */
  .rs-fixcta__item { width: 94px; height: 94px; }
  .rs-fixcta__ico { width: 29px; height: 29px; }
  .rs-fixcta__label { font-size: 12.5px; }
}
@media (min-width: 901px) and (max-width: 1150px) {
  .rs-fixcta__item { width: 78px; height: 78px; }
  .rs-fixcta__ico { width: 25px; height: 25px; }
  .rs-fixcta__label { font-size: 12px; }
}

/* スマホ・タブレット：画面の下端に横3つ */
@media (max-width: 900px) {
  .rs-fixcta {
    left: 0; right: 0; bottom: 0; transform: translateY(100%);
    box-shadow: 0 -3px 14px rgba(6, 30, 70, .18);
    /* iPhoneのホームバーに重ならないよう、機種が持っている下の逃げ幅を足す */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .rs-fixcta-on .rs-fixcta { transform: translateY(0); }
  .rs-fixcta-on.rs-fixcta-hide .rs-fixcta { transform: translateY(100%); }
  .rs-fixcta__item { flex: 1 1 0; min-width: 0; height: 62px; }
  .rs-fixcta__ico { width: 23px; height: 23px; }
  .rs-fixcta__label { font-size: 11.5px; }
  /* バーがフッターの最後の行に被らないよう、その分だけ下に余白を足す */
  .rs-fixcta-on .l-footer { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}

/* 印刷には出さない */
@media print { .rs-fixcta { display: none; } }

/* -----------------------------------------------------------
   21. ピクトグラム（2026-08-20・山角様ご要望「画像や図を配置してほしい」）

   線画のアイコンを1枚ずつSVGファイルにして、子テーマの
   assets/pict/ に置いてある（例：assets/pict/reason-aviation.svg）。
   本文からは <img src=".../assets/pict/○○.svg"> で読むだけ。
   ・元の線画は Tabler Icons（MITライセンス／https://tabler.io/icons）
   ・それを「淡い青の丸＋濃い青の線画」に作り直したもの。作り直しの
     スクリプトは WP制作/assets/ピクトグラム生成.py。
     SVGの元も WP制作/assets/pict/ に同じものを置いてある
   ・色を変えたい／新しい絵柄を足したいときは、そのスクリプトの
     ICONS 一覧に1行足して作り直し、assets/pict/ へ上げる

   SVGは拡大しても粗くならず、1ファイルが400バイト前後と軽い。
   ページ本文には <img> の1行しか増えないので、あとから
   ブロックエディタで見ても中身が読める。
   ----------------------------------------------------------- */

/* 21-1. 選ばれる理由：2026-08-20に写真つきカードへ作り替えたため、
   白丸アイコン（.rs-reason__ico／.rs-reason__head）の指定は削除した。
   写真つきカードの指定は「理由カード（2026-08-20 再設計…）」のブロックにある。 */

/* 21-2. お手続きの流れ：番号の丸の下に置く
   .rs-flow__item は上から「番号（CSSのcounter）→アイコン→見出し→説明」の縦並び。
   横に5枚並ぶトップ用（.rs-flow--h）は1枚が185pxほどしかないので小さめに。 */
.rs-flow__ico { display: block; width: 74px; height: 74px; align-self: center; }
/* 2026-08-21：山角様ご指示「各アイコンを大きく」。66→96px（カードを1200px幅に広げたぶんの余裕を使う） */
.rs-flow--h .rs-flow__ico { width: 96px; height: 96px; margin: 2px 0 -2px; }
/* 縦積みの下層ページ用は、番号が左上にあるので左そろえで置く */
.rs-flow:not(.rs-flow--h) .rs-flow__ico { align-self: flex-start; margin-bottom: 4px; }

/* 21-3. 顧問プラン：プラン名の上に置く */
.rs-plan__ico { width: 78px; height: 78px; margin: 0 auto 10px; display: block; }

/* 21-4. コラムのサムネイル
   実記事ができるまでの仮表示。斜線の模様 → 線画アイコン と変えてきたが、
   2026-08-20のご指示で写真に変更した。実記事のアイキャッチが入ったら、
   この <img> ごと差し替える。 */
.rs-colcard__thumb {
  background: linear-gradient(135deg, #F2F7FC 0%, #E4EEF9 100%);
  font-size: 0; /* 中の余分な空白文字が高さを作らないように */
}
/* 写真は16:10の枠いっぱいに敷く。枠の比率は上の .rs-colcard__thumb で決めている */
.rs-colcard__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 21-5. ページ見出し帯のアイコンは 2026-08-20 に全ページから外した（山角様ご指示「アイコンは不要」）。
   同日に見出し帯を「写真が主役のヒーロー」へ作り替えたため、白い丸のアイコンが写真の邪魔にもなっていた。
   本文の中で使っている線画（.rs-seclead__ico など）はそのまま残してある。 */

/* -----------------------------------------------------------
   22. 事務所の写真（OFFICEセクション・2026-08-20 新設）
   山角様からご提供いただいた事務所写真を、左に大きく1枚・
   右に縦2枚で並べる。スマホでは上から順の1列。
   ----------------------------------------------------------- */
.rs-officegrid {
  max-width: var(--rs-w); margin-inline: auto;
  display: grid; grid-template-columns: 1.42fr 1fr; gap: 16px;
}
.rs-officegrid__item {
  margin: 0; border-radius: var(--rs-r); overflow: hidden;
  box-shadow: var(--rs-shadow-md); background: var(--rs-blue-pale);
}
.rs-officegrid__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 左の1枚だけ、右の2枚ぶんの高さにまたがらせる */
.rs-officegrid__item--main { grid-row: span 2; }
.rs-officegrid__item:not(.rs-officegrid__item--main) { aspect-ratio: 3 / 2; }

/* 2026-08-21：山角様ご指示で写真を受付の1枚だけにした（以前は左に受付・右に執務2枚）。
   1枚のときはグリッドをやめて横いっぱいに置く。比率は元データと同じ3:2。 */
.rs-officegrid--one { grid-template-columns: 1fr; }
.rs-officegrid--one .rs-officegrid__item--main { grid-row: auto; aspect-ratio: 3 / 2; }

/* OFFICEとPRICEの境目だけ、下の地色を2回の緩い波で上へせり上げる。
   SVGはWordPressの本文幅1000pxの箱に入るため、その箱を位置基準にせず、
   全幅のPRICEセクションを基準にする。下へ2px重ねて拡大時の細いすき間も防ぐ。 */
.rs-price-sec { position: relative; z-index: 1; }
/* ★:not(.rs-sec--drone) を外さないこと★
   上に .rs-price-sec > :not(.rs-section-drone) { position: relative } があり、
   料金表ページのドローンはこの「くるみの箱」を位置の基準にしている。
   条件なしで static に戻すと、料金表ページのドローンが画面の外へ飛んで消える。
   波を置くのはドローンのいないトップページだけなので、そこだけ static にする。 */
.rs-price-sec:not(.rs-sec--drone) > .wp-block-group__inner-container { position: static; }
.rs-price-wave {
  position: absolute; z-index: 0; pointer-events: none;
  left: 0; top: -44px; display: block; width: 100%; height: 46px;
  color: var(--rs-cream);
}
.rs-price-wave path { fill: currentColor; }

@media (max-width: 780px) {
  .rs-officegrid { grid-template-columns: 1fr; }
  .rs-officegrid__item--main { grid-row: auto; }
  .rs-officegrid__item { aspect-ratio: 3 / 2 !important; }
}

@media (max-width: 900px) {
  .rs-flow--h .rs-flow__ico { width: 76px; height: 76px; }
}

/* -----------------------------------------------------------
   23. 図解の部品（2026-08-20・山角様ご要望「画像や図を配置してほしい」）

   下層ページは文章だけのページが多く、そこが今回のご指摘の中心だった。
   ページごとに絵を1枚ずつ描くのではなく、使い回しの効く「型」を
   4つ用意して、各ページの内容をその型に流し込む形にしている。

     23-1 .rs-pictrow  … アイコン＋短い言葉を3〜6個ならべる（いちばん出番が多い）
     23-2 .rs-vs       … 左右に並べて違いを見せる
     23-3 .rs-timeline … 日付や日数の流れ。PCは横、スマホは縦に切り替わる
     23-4 .rs-levels   … 段階を低い順に並べ、該当する段だけ色を変える

   ★どれも日本語の文字はHTMLに書いてある（画像に焼き込んでいない）。
     文言の修正はブロックエディタでそのままできるし、
     スマホで縦積みに組み替えても文字が潰れない。
     絵は 21. のピクトグラム（assets/pict/*.svg）を <img> で読むだけ。
   ----------------------------------------------------------- */

/* 23-0. 図解の共通枠。見出しを付けたいときに使う */
.rs-fig { max-width: var(--rs-w); margin: 0 auto 8px; }
.rs-fig__cap {
  text-align: center; font-size: 15px; font-weight: 700; color: var(--rs-blue);
  letter-spacing: .04em; margin: 0 0 18px;
}

/* 23-1. アイコン＋ラベルの並び
   3〜6個を想定。画面が狭くなると自動で折り返して2列・1列になる */
.rs-pictrow {
  max-width: var(--rs-w); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 16px;
}
.rs-pictrow__item {
  background: #fff; border: 1px solid var(--rs-line-2); border-radius: var(--rs-r-sm);
  padding: 22px 14px 20px; text-align: center; box-shadow: var(--rs-shadow);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.rs-pictrow__ico { display: block; width: 78px; height: 78px; margin-bottom: 6px; }
.rs-pictrow__label { font-size: 16px; font-weight: 700; color: var(--rs-navy); margin: 0; line-height: 1.6; }
.rs-pictrow__note { font-size: 13.5px; color: var(--rs-text); margin: 0; line-height: 1.75; }
/* 薄い青の地の上に置くときは、カードの枠を消して白を強く見せる */
.rs-sec--light .rs-pictrow__item { border-color: #fff; }
/* 濃紺の地の上に置くときは、文字を明るく */
.rs-sec--navy .rs-pictrow__item { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); box-shadow: none; }
.rs-sec--navy .rs-pictrow__label { color: #fff; }
.rs-sec--navy .rs-pictrow__note { color: #C9DCF3; }

/* 23-2. 左右の比較図
   まん中の「＋」や「vs」は .rs-vs__mark。文字はHTMLに書く */
.rs-vs {
  max-width: var(--rs-w); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 14px;
}
.rs-vs__side {
  background: #fff; border: 2px solid var(--rs-line-2); border-radius: var(--rs-r);
  padding: 26px 24px 24px; text-align: center; box-shadow: var(--rs-shadow-md);
}
.rs-vs__side--accent { border-color: var(--rs-orange); }
.rs-vs__ico { display: block; width: 92px; height: 92px; margin: 0 auto 12px; }
.rs-vs__cap {
  display: block; font-size: 13.5px; font-weight: 800; color: var(--rs-blue);
  background: transparent; border-radius: 0;
  padding: 0; margin: 0 0 12px;
}
.rs-vs__side--accent .rs-vs__cap { color: var(--rs-orange-dark); background: transparent; }
.rs-vs__title { font-size: 22px; font-weight: 800; color: var(--rs-navy); margin: 0 0 10px; line-height: 1.5; }
.rs-vs__text { font-size: 15.5px; color: var(--rs-text); margin: 0; line-height: 1.9; text-align: left; }
.rs-vs__mark {
  align-self: center; font-family: var(--rs-font-en); font-size: 26px; font-weight: 800;
  color: #9DB6D8; padding: 0 2px;
  /* 2026-08-21：山角様ご指摘「＋マークが左に寄っている」。
     スマホでは上下2段に組み替わり、この「＋」が横幅いっぱいの1段になる。
     中の文字をそろえる指定が無かったので左端に貼り付いていた */
  justify-self: center; text-align: center;
}

/* 23-3. タイムライン
   PCは横一列。スマホは縦（左に線と丸、右に文字）に組み替える。
   横のまま縮めると1枚90pxほどになって字が潰れるため。 */
.rs-timeline {
  max-width: var(--rs-w); margin-inline: auto; padding: 0; list-style: none;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; position: relative;
}
/* 丸をつなぐ横線。丸の中心（上から30px）に合わせている */
.rs-timeline::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 29px;
  height: 3px; background: var(--rs-line); border-radius: 2px;
}
.rs-timeline__item { position: relative; padding: 0 10px; text-align: center; }
.rs-timeline__item::before {
  content: ""; display: block; width: 18px; height: 18px; border-radius: 50%;
  background: var(--rs-sky); border: 5px solid #fff;
  box-shadow: 0 0 0 3px var(--rs-blue-pale);
  margin: 20px auto 18px; position: relative; z-index: 1;
}
.rs-timeline__item--goal::before { background: var(--rs-orange); box-shadow: 0 0 0 3px #FFE7C7; }
.rs-timeline__when {
  display: block; font-size: 13.5px; font-weight: 800; color: var(--rs-blue);
  letter-spacing: .02em; margin-bottom: 6px;
}
.rs-timeline__item--goal .rs-timeline__when { color: var(--rs-orange-dark); }
.rs-timeline__title { font-size: 16.5px; font-weight: 700; color: var(--rs-navy); margin: 0 0 6px; line-height: 1.6; }
.rs-timeline__text { font-size: 14px; color: var(--rs-text); margin: 0; line-height: 1.8; }

/* 23-4. 段階図（レベル1〜4、カテゴリーⅠ〜Ⅲ など）
   左から右へ上がっていく階段に見せる。該当する段だけオレンジで立てる */
.rs-levels {
  max-width: var(--rs-w); margin-inline: auto;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: end; gap: 12px;
}
.rs-levels__item {
  border-radius: 14px 14px 0 0;
  padding: 20px 14px 18px; text-align: center;
  border-bottom: 5px solid;
}
/* 段の高さを1段ずつ上げる。中身の量ではなく順番で決まるようにしている */
.rs-levels__item:nth-child(1) { padding-top: 20px; }
.rs-levels__item:nth-child(2) { padding-top: 36px; }
.rs-levels__item:nth-child(3) { padding-top: 52px; }
.rs-levels__item:nth-child(4) { padding-top: 68px; }

/* 2026-08-20：山角様ご指摘「青・オレンジ・青と色の使い方がおかしい。
   黄色→オレンジ→赤という感じで、だんだん赤くなるように」への対応。

   もともとは「該当する段だけオレンジ、他は青」という塗り分けだった。
   これだと色が『リスクの高さ』ではなく『いま説明している段』を指してしまい、
   図の見出し（右へいくほどリスクが大きく…）と食い違って見える。
   色そのものを段階の目盛りにして、右へ行くほど赤に近づける形に変えた。

   段の数はページによって違う（カテゴリーⅠ〜Ⅲ＝3段／レベル1・2〜4＝4段）。
   最後の1段は :last-child であとから赤に上書きしているので、
   3段なら「黄・オレンジ・赤」、4段なら「黄・オレンジ・濃いオレンジ・赤」になる。 */
.rs-levels__item:nth-child(1) { background: #FFF3CE; border-bottom-color: #E5A600; }
.rs-levels__item:nth-child(2) { background: #FFE5C2; border-bottom-color: #F5820A; }
.rs-levels__item:nth-child(3) { background: #FBD9BC; border-bottom-color: #E2650A; }
.rs-levels__item:nth-child(4) { background: #F8D5CF; border-bottom-color: #CE3B27; }
.rs-levels__item:last-child   { background: #F8D5CF; border-bottom-color: #CE3B27; }

.rs-levels__no {
  display: block; font-size: 17px; font-weight: 800; margin-bottom: 8px;
}
.rs-levels__item:nth-child(1) .rs-levels__no { color: #85590A; }
.rs-levels__item:nth-child(2) .rs-levels__no { color: #9E4C07; }
.rs-levels__item:nth-child(3) .rs-levels__no { color: #913B06; }
.rs-levels__item:nth-child(4) .rs-levels__no { color: #962616; }
.rs-levels__item:last-child   .rs-levels__no { color: #962616; }

/* 「業務利用の多くがここ」のように、そのページで話題にしている段の強調。
   色は段階を表すのに使い切ったので、ここでは影と枠だけで浮かせる */
/* 「当事務所が対応するのはここ」「業務利用の多くがここ」を指す印。
   2026-08-21：段の色を黄→オレンジ→赤の目盛りに使ったため、色では強調を示せなくなった。
   薄い影だけでは印だと分からないので、紺の実線で囲む形に変えた（山角様ご指摘への対応）。 */
/* 2026-08-30：ここを濃紺の太い線と影で囲っていたが「黒の背景で囲むのをやめて」
   というご指示。線と影をやめ、地色を水色にするだけで「業務利用はここ」を示す */
/* ★クラスを2つ重ねているのは、上の目盛りの指定に勝つため★
   目盛りは .rs-levels__item:nth-child(2) のように「クラス＋擬似クラス」で書かれていて、
   クラス1つの .rs-levels__item--on では詳細度で負ける。
   実測で確認済み（数字が赤茶 #9E4C07 のままで、水色地とのコントラストが4.13しかなかった）。 */
.rs-levels__item--on.rs-levels__item--on {
  background: var(--rs-sky) !important;
  /* 下線も赤茶のままだと水色から浮くので、文字と同じ青にそろえる */
  border-bottom-color: var(--rs-navy-deep);
}
.rs-levels__text { font-size: 14px; color: var(--rs-text); margin: 0; line-height: 1.8; }
/* 水色（#BADAF3）に #005192 でコントラスト比5.56。4.5以上を確保している */
.rs-levels__item--on.rs-levels__item--on .rs-levels__no,
.rs-levels__item--on.rs-levels__item--on .rs-levels__text { color: var(--rs-navy-deep); }

@media (max-width: 820px) {
  /* 比較図：左右 → 上下。まん中の記号は横棒のまま真ん中に置く */
  .rs-vs { grid-template-columns: 1fr; }
  .rs-vs__mark { padding: 2px 0; }
  /* 段階図：階段 → 縦の積み上げ。padding-topでの段差はやめる */
  .rs-levels { grid-auto-flow: row; gap: 10px; }
  .rs-levels__item { border-radius: 12px; border-bottom-width: 3px; }
  .rs-levels__item:nth-child(n) { padding: 16px 16px 14px; }
  /* タイムライン：横 → 縦。線を左端に立てて、丸を左に寄せる */
  .rs-timeline { grid-auto-flow: row; gap: 6px; }
  .rs-timeline::before { left: 8px; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; }
  .rs-timeline__item { text-align: left; padding: 8px 0 8px 40px; }
  .rs-timeline__item::before { position: absolute; left: 0; top: 10px; margin: 0; }
  .rs-pictrow { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; }
  .rs-pictrow__ico { width: 64px; height: 64px; }
  .rs-pictrow__label { font-size: 15px; }
}

/* 23-5. セクション見出しの上に置くアイコン（reason.html / results.html）
   見出しだけが続いて単調になっていたページで、章の頭に絵を1つ置くためのもの */
.rs-seclead__ico { display: block; width: 118px; height: 118px; margin: 0 auto 4px; }
@media (max-width: 900px) { .rs-seclead__ico { width: 92px; height: 92px; } }

/* 2026-08-20：「選ばれる理由」ページの各セクションの頭を、線画アイコンから
   トップページと同じ写真に差し替えた（山角様ご要望「トップページと画像を合わせて。
   アイコンは不要です」）。写真はトップページの理由カードと同一のもの。

   幅を1000px（本文の幅）ではなく800pxにしているのは、04の写真の元データが
   533×427と小さく、1000pxまで伸ばすと1.9倍に拡大されて粗くなるため。
   800pxなら拡大は1.25倍までで収まる。 */
.rs-seclead__photo {
  display: block; width: min(100%, 800px); margin: 0 auto 30px;
  aspect-ratio: 16 / 7; border-radius: var(--rs-r); overflow: hidden;
  box-shadow: 0 14px 34px rgba(12, 34, 68, .12);
}
.rs-seclead__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) {
  .rs-seclead__photo { aspect-ratio: 16 / 9; border-radius: 14px; margin-bottom: 24px; }
}

/* -----------------------------------------------------------
   24. 下層ページ見出し帯の背景写真（2026-08-20・山角様ご要望）

   「画像や図がない」というご指摘に対して、アイコンと図解だけでは
   実写の写真がないままになる。下層ページの見出し帯（濃紺の帯）に
   ページの内容に合った写真を1枚ずつ敷いて、その上に元の紺色を
   半透明でかぶせる。文字の読みやすさは今までどおりのまま、
   全ページに写真が入る。

   ★どのページにどの写真を出すかは、ここだけで決まる★
   ページ本文（pages/*.html）は触っていない。
   WordPressが <body> に付ける page-id-○○ で見分けている。
   ページを増やしたときは、下に1行足すだけでよい。

     id= 7 対応サービス          青空とドローン
     id= 8 包括申請              広い空と郊外の俯瞰
     id= 9 個別申請              市街地の俯瞰（2026-08-20 山角様ご指定で差し替え）
     id=10 夜間・目視外の承認     夜の街の上空
     id=11 レベル3・3.5          山あいの谷を飛ぶ
     id=12 イベント・ドローンショー 花火（2026-08-20 山角様ご指定で差し替え）
     id=13 農薬散布              水田の上を飛ぶ散布ドローン
     id=14 機体登録              机の上のドローンとPC
     id=15 登録講習機関          屋内の練習場
     id=16 顧問プラン            事務所の執務風景
     id=17 選ばれる理由          青空とドローン
     id=18 実績                  事務所の執務風景
     id=19 料金表                机の上の書類とPC
     id=20 申請の流れ            机の上のドローンとPC
     id=21 よくある質問          事務所の机
     id=22 事務所概要            事務所の受付
     id=23 お問い合わせ          窓辺の机とノートPC
     id=24 プライバシーポリシー   写真なし（法的な文章のページなので装飾しない）

   2026-08-20 追記：山角様ご指摘「膜が強すぎて写真が見えない」を受けて、
   ページごとにバラバラだった膜（86%〜74%）をやめ、8. の .rs-pagehead で
   「左が濃く、右へ行くほど薄い」1本の横グラデーションに統一した。
   写真は右半分がはっきり見え、文字が乗る左半分だけ濃い、という分担になっている。

   2026-08-20 追記2：写真の指定を .page-id-○○ .rs-pagehead から body 側に移した。
   下の 24-2.（サービス個別ページの導入部）で、見出し帯を包む箱の疑似要素からも
   同じ写真を読む必要があるため。子の .rs-pagehead に書いたままだと、
   親である箱からはその値が見えない（CSS変数は親から子へしか伝わらない）。

   id= 9（個別申請）と id=12（イベント）の2枚は、ご指定いただいた画像が
   カード用の800×450しかなく、見出し帯に敷くと1.5倍まで拡大されてぼやける。
   元データから見出し帯の実寸（1600×620）で切り直したものを使っている
   （ph-kobetsu-260820b.jpg／ph-event-260820.jpg。絵柄はご指定のものと同じ）。
   ----------------------------------------------------------- */
/* 膜のかけ方・帯の高さは 8. の .rs-pagehead にまとめてある。
   ここでは「どのページにどの写真を出すか」だけを1行ずつ決める（2026-08-20 に整理）。 */
body.page-id-7,
body.page-id-17 {
  --rs-ph-photo: url(../../uploads/2026/08/ph-service-260820.jpg);
  /* 横長画面でも写真上部のドローンを切らないため、この写真だけ上寄りにする */
  --rs-ph-pos: center 22%;
}
body.page-id-8 { --rs-ph-photo: url(../../uploads/2026/08/ph-houkatsu-260820.jpg); }
body.page-id-9 { --rs-ph-photo: url(../../uploads/2026/08/ph-kobetsu-260820b.jpg); }
body.page-id-10 { --rs-ph-photo: url(../../uploads/2026/08/ph-shonin-260820.jpg); }
body.page-id-11 { --rs-ph-photo: url(../../uploads/2026/08/ph-level3-260820.jpg); }
body.page-id-12 { --rs-ph-photo: url(../../uploads/2026/08/ph-event-260820.jpg); }
body.page-id-13 { --rs-ph-photo: url(../../uploads/2026/08/ph-nouyaku-260820.jpg); }
body.page-id-14,
body.page-id-20 { --rs-ph-photo: url(../../uploads/2026/08/ph-kitai-260820.jpg); }
body.page-id-15 { --rs-ph-photo: url(../../uploads/2026/08/ph-school-260820.jpg); }
/* 2026-08-21：山角様ご指示で、実績・顧問プラン・よくある質問の3ページを
   事務所概要と同じ「事務所の受付」の写真にそろえた（office-entrance-260820.jpg のご指定）。
   もとの ph-office-work / ph-office-desk はどのページからも呼ばれなくなった。 */
body.page-id-16,
body.page-id-18 { --rs-ph-photo: url(../../uploads/2026/08/ph-office-entrance-260820.jpg); }
body.page-id-19 { --rs-ph-photo: url(../../uploads/2026/08/ph-price-260820.jpg); }
body.page-id-21 { --rs-ph-photo: url(../../uploads/2026/08/ph-office-entrance-260820.jpg); }
body.page-id-22 { --rs-ph-photo: url(../../uploads/2026/08/ph-office-entrance-260820.jpg); }
body.page-id-23 { --rs-ph-photo: url(../../uploads/2026/08/ph-contact-260820.jpg); }
/* メンバー紹介ページ（2026-09-01 新設）。見出し帯はスタッフの集合写真。
   ★固定ページのIDはサイトごとに違う★ 開発用=711 / 仮=727 / 本番=708。
   3つとも書いておけば、どのサイトでも同じ写真が出る。 */
/* 2026-09-01：集合写真（hero-staff）は横長の帯だと人物が見切れるとのご指摘（本郷様）。
   事務所概要（page-id-22）と同じ、事務所の入口の写真にそろえた。 */
body.page-id-711,
body.page-id-727,
body.page-id-708 { --rs-ph-photo: url(../../uploads/2026/08/ph-office-entrance-260820.jpg); }

/* -----------------------------------------------------------
   24-2. 対応サービスの個別8ページ「導入部」
         見出し帯と「こんな場合にご相談ください」を1枚の背景でつなぐ
         （2026-08-20・山角様ご要望
          「タイトルの背景画像を下に引き伸ばして、こんな場合にご相談ください
            のセクションの背景にもつなげて」
          「タイトル下部のオレンジの下線は不要」
          「膜を青ではなく黒やグレーに」）

   ■なぜ写真を「引き伸ばさない」のか（実測してこの形にした）
   見出し帯（380px）と「こんな場合に…」（712px＝項目7つのとき）を足すと高さは約1090px。
   写真は1600×620なので、この面をまるごと写真で埋めようとすると 1.76倍まで拡大され、
   左右は合計1500px以上が切れて構図が変わり、輪郭もぼやける。
   そこで「写真は上から620pxまで。そこから下は暗いグレーへ溶かす」形にした。
   溶かす色（--rs-ph-fade の終点）とラッパーの地色を同じ値にしてあるので、
   写真の下端に境目は出ず、2つのセクションは1枚の背景としてつながって見える。
   写真は拡大も左右カットもされない（1600px幅の画面でちょうど原寸）。

   ■ここでの指定はすべて .rs-svcintro の内側だけに効く
   見出し帯（.rs-pagehead）は事務所概要・料金・お問い合わせなど下層18ページの共通部品で、
   そちらは今までどおり紺の膜・オレンジの下線のまま。
   黒い膜と下線の削除をサービス8ページに限定しているのはこのため。

   ★他のAIにも相談したうえでこの形にした★
   写真の扱いは3案（(a)元データから縦長に切り直す (b)上部だけに置いて下へ溶かす
   (c)拡大を許容してそのまま敷く）を検討。8ページのうち3ページは元データが横長すぎて
   (a)の縦長が取れないため、どの写真でも同じ結果になる(b)を採用した。
   ----------------------------------------------------------- */
.rs-svcintro {
  --rs-ink-deep: #14171C;   /* 写真の下に敷く地色。黒よりわずかに青みのあるチャコール */
  /* 2026-08-21（2回目）：山角様ご指示「上部のシャドーが強い。シャドーは上部だけで良い」。
     左半分を濃くする横グラデーションをやめ、上から下へ消える縦グラデーションにした。
     px で指定しているのは、ページによって導入部の高さが違うため。%だと長いページほど
     膜が下まで伸びてしまう。タイトル（上から132〜205px）にはしっかりかけ、
     「こんな場合にご相談ください」（330px〜）ではほぼ消え、
     カードが始まる420px以降は写真がそのまま見える。 */
  --rs-ph-veil: linear-gradient(180deg,
      rgba(9, 11, 14, .58) 0px, rgba(12, 15, 19, .46) 160px,
      rgba(16, 19, 24, .24) 290px, rgba(20, 23, 28, .07) 390px,
      rgba(20, 23, 28, 0) 470px);
  /* PCでは使わない（下half は写真をそのまま見せるため）。
     狭い画面だけ、下の @media で写真の下端を地色へ溶かす役目として復活させている */
  --rs-ph-fade: linear-gradient(rgba(20, 23, 28, 0), rgba(20, 23, 28, 0));
  position: relative;
  isolation: isolate;       /* 下の z-index:-1 を、この箱の中だけの前後関係にとどめる */
  background-color: var(--rs-ink-deep);
}
/* 写真・膜・落としの3枚を、導入部（見出し帯＋こんな場合にご相談ください）の全面に敷く。
   2026-08-21：山角様ご指示「トップ画像の表示を『こんな場合にご相談ください』の項目全体を
   覆うようにして」。以前は上から620pxだけに敷いて、そこから下は地色へ溶かしていた。
   写真は1600×620なので、全面を覆うと縦に1.5倍ほど引き伸ばされて左右が切れる。
   そこで background-position を center top にして、構図の上側（空・主題のある側）を残している。
   合わせて下の「余白を詰める」指定で導入部の高さ自体を約1090→約930pxに下げ、拡大の度合いを抑えた。 */
.rs-svcintro::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image: var(--rs-ph-fade), var(--rs-ph-veil), var(--rs-ph-photo);
  background-size: cover; background-position: center top; background-repeat: no-repeat;
}
/* 2026-08-21：山角様ご指示「タイトルとその下の『こんな場合にご相談ください』の間の空白が
   大きいので狭めて」。実測で241pxあった空きを約130pxにした。
   内訳は 見出し帯の下余白56→20px、帯の高さ380→300px、次のセクションの上余白88→30px。 */
.rs-svcintro .rs-pagehead { min-height: 300px; padding-bottom: 20px; }
.rs-svcintro .rs-sec { padding-top: 30px; }
/* 中の2つは、ラッパーがすでに画面いっぱいなので、全幅化（2-2.）の指定を打ち消す */
.rs-svcintro .rs-pagehead,
.rs-svcintro .rs-sec { margin-left: 0; margin-right: 0; }
/* 背景はラッパーが持つので、中の2つは透明にして写真を透かす */
.rs-svcintro .rs-pagehead { background: none; }
.rs-svcintro .rs-sec--light { background: transparent; }
/* タイトル下のオレンジの下線を消す（ご要望） */
.rs-svcintro .rs-pagehead__title::after { content: none; }
/* 「こんな場合にご相談ください」は暗い背景の上に来るので白字に。
   花火や市街地の空など、写真の明るい部分に重なるページがあるので、
   H1（8. の .rs-pagehead__title）と同じ考え方でわずかに影を落として輪郭を残す */
/* 膜を上部だけにしたぶん、文字の輪郭は影で持たせる。
   3枚重ねているのは役割が違うため。1枚目（3px）は文字のフチ、2枚目（14px）はその外側の
   にじみ、3枚目（40px）は文字のまわりをふわっと沈める雲。
   コントラストを測ると、白い空の写真では地の色との比が3を切るページがあるが、
   この雲があると文字の周囲だけが暗くなるので、写真は明るいまま輪郭が残る。 */
.rs-svcintro .rs-pagehead__title {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 14px rgba(0, 0, 0, .72), 0 0 40px rgba(0, 0, 0, .85);
}
.rs-svcintro .rs-h2 {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 12px rgba(0, 0, 0, .72), 0 0 34px rgba(0, 0, 0, .85);
}
/* 個別申請（霞んだ都市の空）とレベル3（霞んだ山）は写真が白っぽく、
   上の影だけではタイトルが沈む。実測でこの2枚だけ地とのコントラストが3前後だった。
   裾を消す位置（470px）は他と同じままにして、上のほうだけ濃くしている。 */
body.page-id-9 .rs-svcintro,
body.page-id-11 .rs-svcintro {
  --rs-ph-veil: linear-gradient(180deg,
      rgba(9, 11, 14, .66) 0px, rgba(12, 15, 19, .60) 160px,
      rgba(16, 19, 24, .34) 290px, rgba(20, 23, 28, .12) 390px,
      rgba(20, 23, 28, 0) 470px);
}
/* チェックリストのあとに補足の文章が入るページ（機体登録）用。
   本文の文字色は黒なので、そのままだと暗い地の上で読めなくなる */
.rs-svcintro .rs-sec p { color: #D9DEE7; }
/* 白いカードは、暗い地の上だと薄い影が見えなくなる。落ち影を深くして浮かせる */
.rs-svcintro .rs-check li {
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .30);
}
@media (max-width: 900px) {
  .rs-svcintro {
    --rs-ph-veil: linear-gradient(120deg,
        rgba(9, 11, 14, .72) 0%, rgba(15, 17, 22, .58) 42%, rgba(20, 23, 28, .26) 100%);
    /* 上から何pxまで写真を敷くか。狭い画面だけで使う（下の ::before 参照） */
    --rs-svcintro-h: 500px;
    /* 写真の下端を地色へ溶かして、そこから下の地色とつなぐ */
    --rs-ph-fade: linear-gradient(180deg,
        rgba(20, 23, 28, 0) 0%, rgba(20, 23, 28, 0) 54%,
        rgba(20, 23, 28, .55) 80%, var(--rs-ink-deep) 100%);
  }
  /* ★狭い画面では写真を全面に敷かない★
     タブレットより下は「こんな場合に…」の項目が1列に積まれて縦に長くなり、
     実測でスマホ（375px幅）では導入部が1326pxになる。
     そこへ1600×620の写真を全面に敷くと2.14倍まで拡大され、横は11%しか映らない。
     PCでは1.5倍・53%に収まるのでご要望どおり全面に敷き、
     狭い画面だけは上から500px（スマホは430px）にとどめて、そこから下は地色へ溶かす。 */
  .rs-svcintro::before { bottom: auto; height: var(--rs-svcintro-h); }
  .rs-svcintro .rs-pagehead { min-height: 260px; padding-bottom: 16px; }
  .rs-svcintro .rs-sec { padding-top: 26px; }
}
@media (max-width: 600px) {
  /* スマホは 8. と同じ考え方で、上を薄く・下を濃くする縦のグラデーションに切り替える */
  /* スマホは横幅が狭く、写真の上に文字が直接重なるので、膜は縦グラデーションのまま。
     PCより少しだけ濃く残している（横に逃げ場がないため） */
  .rs-svcintro {
    --rs-svcintro-h: 430px;
    --rs-ph-veil: linear-gradient(180deg,
        rgba(20, 23, 28, .34) 0%, rgba(16, 19, 24, .58) 52%, rgba(12, 14, 18, .72) 100%);
    --rs-ph-fade: linear-gradient(180deg,
        rgba(20, 23, 28, 0) 0%, rgba(20, 23, 28, 0) 58%,
        rgba(20, 23, 28, .50) 82%, var(--rs-ink-deep) 100%);
  }
}
/* 印刷は背景画像が出ない設定のブラウザが多く、そのままだと白い紙に白い文字だけが残る */
@media print {
  .rs-svcintro { background: #fff !important; }
  .rs-svcintro::before { display: none; }
  .rs-svcintro .rs-pagehead { min-height: auto; }
  .rs-svcintro .rs-pagehead__title { color: var(--rs-navy); text-shadow: none; }
  .rs-svcintro .rs-h2 { color: var(--rs-navy); }
}

/* -----------------------------------------------------------
   25. 対応サービスのカードを「写真つき」に作り替え
       （2026-08-20・山角様ご要望「アイコンが小さい。バウンダリのように
        写真やアイコンを大きく映えるようにしてほしい」）
       （同日追記・ご指摘②「4カラムにして、アイコンは不要」で
        3列→4列、白丸アイコンは削除して写真だけに変更）

   これまで … 横長のカードを1列ずつ8枚。左端に50〜64pxの小さいアイコン
   これから … 縦のカードを4列。上半分がサービスごとの写真のみ（アイコンなし）

   ベンチマークにしたのはバウンダリの個別申請ページ
   （https://boundary.or.jp/individualapplication/ ）。
   あちらも「ケースごとに大きな写真」で見せていて、アイコンは添え物。

   ※HTMLは <a> の直後に <span class="rs-card__photo"><img></span> を
     足しただけ。見出し・説明・「詳しく見る」はそのまま
     （アイコンの <span class="rs-card__icon">…</span> は削除した）。

   2026-08-20 追記：4列にした分カードが細くなり、見出しが3行に折れたり
   「ドローンスクール」のような単語の途中で改行されたりして読みにくかった
   （山角様ご指摘）。カードの列数はそのままに、枠だけ 1000→1200px に広げて
   1枚あたりの幅を約234→約284pxにした。
   ★ハマった点★ .rs-svcgrid の max-width だけ1200pxにしても効かなかった。
   セクションの左右余白（.rs-sec の padding）が --rs-gutter という変数から
   「画面幅1000pxぶんだけ中身が入るように」計算されていて、.rs-svcgrid の
   親（.rs-sec）自体が常にちょうど1000px幅に収まっているため。
   そこで、このセクションだけ --rs-gutter を1200px基準に上書きする
   .rs-sec--svc-wide をSERVICEセクションに追加した（HTML側）。
   これで親の中身が1200pxまで広がり、.rs-svcgrid の max-width:1200px が効く。
   （.rs-inner の max-width を .rs-svcgrid.rs-svcgrid で上書きしている部分は
   詳細度を .rs-inner と同じ0,1,0にしないよう2つ重ねている＝他のクラスと同じやり方） */
.rs-sec--svc-wide { --rs-gutter: max(24px, calc((100vw - 1200px) / 2)); }
/* 2026-08-21：同じ仕掛けを他のセクションでも使えるよう、名前だけ汎用にしたもの。
   いまはトップページのFLOW（ご依頼から許可取得まで）で使っている。 */
.rs-sec--wide { --rs-gutter: max(24px, calc((100vw - 1200px) / 2)); }

/* 選ばれる理由の4枚も、上の対応サービスと同じ1200pxの幅にそろえる
   （2026-08-20・本郷様ご指示「もう少し横幅広く。対応サービスと同じくらいのエリア幅で」）。
   仕掛けは .rs-sec--svc-wide とまったく同じ。セクションの左右余白（--rs-gutter）を
   1200px基準に上書きし、中のカード置き場（.rs-inner）の上限も1200pxに広げる。
   見出し・キャッチ・リード文は中央ぞろえか自前の上限幅を持っているので、
   セクションが広がってもそのままの見え方になる。 */
.rs-sec--reason-wide { --rs-gutter: max(24px, calc((100vw - 1200px) / 2)); }
.rs-sec--reason-wide .rs-inner { max-width: 1200px; }
.rs-svcgrid.rs-svcgrid { max-width: 1200px; }

.rs-svcgrid.rs-svcgrid > .wp-block-group__inner-container,
.rs-svcgrid.rs-svcgrid:not(:has(> .wp-block-group__inner-container)) {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 22px; flex-wrap: initial;
}
/* 旧レイアウトで1枚を全幅にしていた指定を打ち消す */
.rs-svcgrid.rs-svcgrid > .wp-block-group__inner-container > * {
  flex: initial; max-width: none; min-width: 0;
}

.rs-card.rs-card--svc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "photo" "title" "text" "more";
  align-content: start; align-items: start; justify-items: stretch;
  column-gap: 0; row-gap: 0;
  padding: 0 0 26px; border-radius: var(--rs-r); text-align: left;
  overflow: hidden; /* 写真の上の角を丸く切る */
}

.rs-card__photo {
  grid-area: photo; position: relative; display: block;
  aspect-ratio: 16 / 9; overflow: hidden;
  margin: 0; background: var(--rs-blue-pale);
}
.rs-card__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
a.rs-card--svc:hover .rs-card__photo img { transform: scale(1.06); }

.rs-card--svc .rs-card__title {
  grid-area: title; align-self: auto; padding: 0 24px;
  font-size: 20px; font-weight: 800; line-height: 1.55; margin: 22px 0 9px;
}
.rs-card--svc .rs-card__text {
  grid-area: text; align-self: auto; padding: 0 24px;
  font-size: 15.5px; line-height: 1.85; margin: 0;
}
.rs-card--svc .rs-card__more {
  grid-area: more; padding: 0 24px; margin: 18px 0 0; font-size: 15px;
}

/* 2列（タブレット）→ 1列（スマホ）へ */
@media (max-width: 980px) {
  .rs-svcgrid.rs-svcgrid > .wp-block-group__inner-container,
  .rs-svcgrid.rs-svcgrid:not(:has(> .wp-block-group__inner-container)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .rs-svcgrid.rs-svcgrid > .wp-block-group__inner-container,
  .rs-svcgrid.rs-svcgrid:not(:has(> .wp-block-group__inner-container)) {
    grid-template-columns: minmax(0, 1fr); gap: 20px;
  }
  .rs-card.rs-card--svc { padding: 0 0 24px; border-radius: 16px; }
  .rs-card--svc .rs-card__title { margin-top: 20px; padding: 0 20px; font-size: 19px; }
  .rs-card--svc .rs-card__text { padding: 0 20px; font-size: 15px; }
  .rs-card--svc .rs-card__more { padding: 0 20px; font-size: 14.5px; }
}

/* -----------------------------------------------------------
   26. 「選ばれる理由」のアイコン拡大 → 撤去済み
   いったん116pxまで大きくしたが、同日中に「アイコン不要・写真に置き換え」の
   ご指示があり、アイコンそのものを廃止した。指定はすべて削除してある。
   ----------------------------------------------------------- */

/* 2026-08-20：山角様より「アイコンが小さい。バウンダリのように写真やアイコンを
   大きく映えるように」とのご指摘。21.〜23. のアイコンの寸法を一段ずつ上げてある
   （ピクトグラム62→78px／流れ60→74px／プラン62→78px／コラム78→94px／
     見出し帯92→108px／比較図72→92px／章頭96→118px）。
   元に戻したいときは、この数字を下げるだけでよい。絵柄の差し替えは不要。 */

/* -----------------------------------------------------------
   27. ケースを大きな写真で見せる帯（.rs-casegrid）
       2026-08-20・山角様ご要望。ベンチマークはバウンダリの個別申請ページ
       （https://boundary.or.jp/individualapplication/ ）。
       あちらは「こんな飛行は許可が必要」を4枚の大きな写真で見せていて、
       写真の脇に白い小さな札で場所の名前を置いている。同じ作りにした。

   使いどころは「該当するケースが3〜4個あって、どれも写真で示せる」場面。
   アイコンで足りるもの（手続きの種類など）は 23-1 の .rs-pictrow のままでよい。
   ----------------------------------------------------------- */
.rs-casegrid {
  max-width: var(--rs-w); margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;
}
.rs-case {
  position: relative; margin: 0; border-radius: var(--rs-r); overflow: hidden;
  box-shadow: var(--rs-shadow-md); background: var(--rs-blue-pale);
}
.rs-case img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* 写真の下端に、白い札で場所の名前を置く */
.rs-case__label {
  position: absolute; left: 0; bottom: 0;
  background: #fff; color: var(--rs-navy);
  font-size: 16px; font-weight: 700; line-height: 1.5;
  padding: 12px 22px 12px 20px; border-radius: 0 12px 0 0;
  max-width: calc(100% - 24px);
}
.rs-case__note {
  display: block; font-size: 13px; font-weight: 500; color: var(--rs-muted-2);
  margin-top: 3px;
}
@media (max-width: 700px) {
  .rs-casegrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rs-case__label { font-size: 15px; padding: 10px 18px 10px 16px; }
  .rs-case__note { font-size: 12.5px; }
}

/* -----------------------------------------------------------
   26. スクロールに合わせて要素をふわっと表示する
       （2026-08-20・山角様ご要望「各ページにアニメーションをつけてほしい」）

   隠す指定はここには無い。子テーマの functions.php が <head> で出している。
   理由は functions.php 側のコメントに書いたとおりで、
   「JSの準備ができたときだけ隠す」ようにして、JSが動かない環境で
   中身が見えなくなる事故を防ぐため。ここには動きの中身だけを置く。

   動きの内容：下から16px、0.56秒、最後にすっと減速するイージング。
   派手にしないのは士業サイトのため（Geminiにも相談して決めた数値）。
   ----------------------------------------------------------- */
@keyframes rs-reveal-in {
  to { opacity: 1; translate: none; }
}
/* transform ではなく translate プロパティを使う。
   カードのホバー（transform: translateY）と取り合いにならないため */
html.rs-reveal-ready .rs-reveal-on {
  animation: rs-reveal-in .56s cubic-bezier(.22, 1, .36, 1) var(--rs-reveal-d, 0s) both;
}
/* ページを開いた時点ですでに見えていたものは動かさず、そのまま出す。
   読み始めた瞬間に画面が動くと落ち着かないため */
html.rs-reveal-ready .rs-reveal-instant {
  opacity: 1 !important; translate: none !important; animation: none !important;
}
/* 画面いっぱいの写真は、上下に動かすと前後の帯とのあいだに一瞬すき間が見える。
   ここだけ移動をやめて、うっすら現れるだけにする */
html.rs-reveal-ready .rs-philosophy__photo { --rs-reveal-y: 0px; }

/* -----------------------------------------------------------
   27. 写真と文章を左右に並べる行（2026-08-21・山角様ご要望）

   「選ばれる理由」ページへの
   「各ページの画像の配置が小さい気がする。レイアウトそのものが不自然」
   というご指摘への対応。実績ページの「大手航空支援会社の顧問」でも同じ形を使う。

   ■何が「不自然」だったか
   これまでは 写真（中央・800px）→ 見出し（中央）→ 本文（左ぞろえ・1000px）
   という縦積みだった。問題は3つ。
   　① 主題（見出し）より先に写真が来るので、何の話か分からないまま絵を見ることになる
   　② 見出しまで中央ぞろえ、本文から左ぞろえ、と目の動きが途中で変わる
   　③ 画面が広いと左右が大きく余り、中央に小さく固まって見える＝「画像が小さい」

   ■どう直したか
   PCでは写真と文章を左右に置き、01は写真左・02は写真右…と交互にする。
   文章は見出しから本文まで左ぞろえでそろえ、写真は列の幅いっぱいまで大きくする。
   スマホでは1列に戻り、見出し → 写真 → 本文 の順（何の話かが先に分かる順）になる。

   ★他のAIにも相談したうえでこの形にした★
   案は3つあった。(A)写真を画面幅いっぱいの帯にして見出しを重ねる
   (B)左右2カラムで交互 (C)写真を大きくするだけ。
   (A)と(C)は、理由04の写真の元データが533×427と小さく、拡大に耐えないため見送り。
   (B)なら列の幅が545px前後に収まり、いちばん小さい写真もほぼ原寸で使える。
   ----------------------------------------------------------- */
.rs-splitrow {
  max-width: 1200px; margin-inline: auto;
  display: grid;
  grid-template-columns: 5fr 6fr;
  /* 上の行に見出し、下の行に本文。写真は左の列で2行ぶんにまたがる */
  grid-template-areas: "photo head" "photo text";
  grid-template-rows: auto 1fr;
  column-gap: clamp(30px, 3.6vw, 54px);
  align-items: start;
}
.rs-splitrow__head  { grid-area: head; }
.rs-splitrow__photo { grid-area: photo; }
.rs-splitrow__text  { grid-area: text; }
/* 交互に並べるための裏返し。写真が右へ、文章が左へ移る */
.rs-splitrow--rev {
  grid-template-columns: 6fr 5fr;
  grid-template-areas: "head photo" "text photo";
}
.rs-splitrow__photo {
  border-radius: var(--rs-r); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--rs-blue-pale);
  box-shadow: 0 16px 38px rgba(12, 34, 68, .14);
}
.rs-splitrow__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 見出しは左ぞろえに。オレンジの棒も中央から左端へ寄せる。
   大きさは、1カラムのときの54pxのままだと列の幅に対して大きすぎるので抑えている */
.rs-splitrow .rs-h2.rs-h2 {
  text-align: left; font-size: clamp(24px, 2.7vw, 36px);
  margin: 0 0 24px; line-height: 1.5;
}
.rs-splitrow .rs-h2::after { margin: 18px auto 0 0; }
.rs-splitrow__text p { font-size: 16.5px; line-height: 2.05; margin: 0 0 20px; }
.rs-splitrow__text p:last-child { margin-bottom: 0; }
/* 濃紺の帯の上に置いたとき用 */
.rs-sec--navy .rs-splitrow__text p, .rs-spot .rs-splitrow__text p { color: #D9E7F9; }

@media (max-width: 900px) {
  /* 1列に戻す。順番は 見出し → 写真 → 本文。
     何の話かを先に伝えてから絵を見せる、という並びはPCと同じ */
  .rs-splitrow, .rs-splitrow--rev {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "photo" "text";
  }
  .rs-splitrow__photo { margin-bottom: 28px; aspect-ratio: 16 / 10; }
  .rs-splitrow .rs-h2.rs-h2 { margin-bottom: 20px; }
}
@media (max-width: 600px) {
  .rs-splitrow__photo { border-radius: 14px; margin-bottom: 24px; aspect-ratio: 16 / 11; }
}

/* -----------------------------------------------------------
   28. 顧問の紹介（2026-08-21・山角様ご要望「代表のプロフィールの下に顧問の項目を」）

   代表挨拶（5-2. の .rs-greeting）と同じ形をそのまま使い、
   写真の枠だけ少し小さくして、代表より一段控えめに見えるようにしている。
   ----------------------------------------------------------- */
.rs-advisorbox .rs-greeting__photo { flex: 0 0 240px; }
.rs-advisorbox .rs-greeting__photo .rs-profile__name { font-size: 23px; }
/* 名前の下に読み方（ローマ字・カタカナ）を出すための行 */
.rs-profile__alt { margin: 4px 0 0; font-size: 14px; color: var(--rs-muted); letter-spacing: .04em; }
/* 2026-08-30：顧問2名を一人ずつ白い面で囲い、薄い水色の地から読み取りやすくする。
   代表挨拶には付けず、顧問カードだけをひとかたまりとして見せる。 */
.rs-advisorbox {
  /* 2026-09-01：先方のご指示で、顧問2名の紹介文の開始位置を写真の上端にそろえる。
     2026-08-30 に入れた上下中央寄せは、本文の長さによって開始位置がずれるため取りやめた。 */
  align-items: flex-start;
  padding: 36px 38px; border-radius: var(--rs-r);
  background: var(--rs-white); box-shadow: var(--rs-shadow-lg);
}
.rs-advisorbox + .rs-advisorbox { margin-top: 28px; }
/* 顧問の経歴欄が空の間だけ写真と名前を中央に置き、空欄自体は幅を取らせない。
   原稿が届いて経歴文（<p>）が入れば条件から外れ、自動で元の左右レイアウトに戻る。
   ★空タグは about.html 側で1行に閉じてあること★
   <div class="rs-greeting__body">改行</div> のように改行を挟むと、その改行が
   中身（テキストノード）と数えられて :empty に当たらない。実測で確認済み（2026-08-30）。
   ※ :has( ) の中に :has( ) は書けない（無効になって指定ごと捨てられる）ので、
     ここは素直に :empty で判定する。 */
.rs-advisorbox:has(.rs-greeting__body:empty) { justify-content: center; }
.rs-advisorbox .rs-greeting__body:empty { display: none; }
/* 顧問の肩書き・名前・読み方は、写真の下で3行が離れて見えないよう間隔を詰める。 */
.rs-advisorbox .rs-greeting__photo .rs-profile { margin-top: 14px; }
.rs-advisorbox .rs-profile__role { line-height: 1.35; }
.rs-advisorbox .rs-greeting__photo .rs-profile__name { margin-top: 6px; line-height: 1.35; }
.rs-advisorbox .rs-profile__alt,
.rs-advisorbox .rs-profile__read { margin-top: 4px; line-height: 1.4; }

@media (max-width: 600px) {
  .rs-advisorbox { padding: 24px 22px; border-radius: 16px; }
  .rs-advisorbox + .rs-advisorbox { margin-top: 20px; }
}

/* -----------------------------------------------------------
   29. 金色の王冠と月桂樹で囲む外国人雇用支援の実績帯
       （2026-08-21・山角様ご要望／2026-09-01・本郷様デザイン案へ改修）

   2026-09-01：旧版は外部PNGを背景に敷いていたが、王冠・月桂樹・3つの線画を
   HTML内のSVGへ置き換えた。画面幅が変わっても輪郭を保ち、トップと事務所概要で
   同じ部品を使えるようにするため。フォントはサイト共通のNoto Sans JPのまま。
   ----------------------------------------------------------- */
.rs-crown {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 72px var(--rs-gutter) 76px;
  background-color: var(--rs-crown-bg);
  background-image:
    radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.98) 0, rgba(255,253,248,.78) 36%, rgba(247,242,234,.34) 72%, rgba(247,242,234,.70) 100%),
    linear-gradient(128deg, var(--rs-crown-shade) 0%, var(--rs-crown-bg) 24%, #F9F2E7 48%, var(--rs-crown-bg) 69%, var(--rs-crown-shade) 100%);
  color: var(--rs-text); font-family: var(--rs-font); text-align: center;
}
/* 旧版の外部PNGは使わない。装飾はHTML内のインラインSVGへ一本化した。 */
.rs-crown::before { content: none; }
.rs-crown__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rs-crown__inner { position: relative; z-index: 1; max-width: var(--rs-w); margin-inline: auto; min-width: 0; }

/* 王冠〜No.1までを、左右の大きな月桂樹で包む。枝は文字の幅を奪わないよう絶対配置。
   2026-09-01：デザイン案より枝が離れて小さく見えたため、左右を内側へ寄せて縦にも広げた。
   2026-09-01：1151px幅で枝が見出しへ左右35px重なったため、葉と枝の形は保ったまま
   位置だけを各60px外側へ戻し、文字との間に25px以上の余白を確保した。 */
.rs-crown__heading {
  position: relative; max-width: var(--rs-w); min-width: 0;
  margin-inline: auto; padding-inline: clamp(90px, 14vw, 165px);
}
.rs-crown__heading-inner { position: relative; z-index: 1; min-width: 0; }
.rs-crown__mark {
  display: block; width: clamp(46px, 5vw, 62px); height: auto;
  margin: 0 auto 10px; color: var(--rs-gold);
}
/* サイト共通の .rs-label は通常非表示なので、この帯だけ表示を戻す。 */
.rs-crown__label.rs-label {
  display: block; color: var(--rs-gold); margin: 0 0 12px;
}
.rs-crown__laurel {
  position: absolute; z-index: 0; top: -14%; height: 128%; width: auto;
  max-width: none; color: var(--rs-gold); pointer-events: none;
}
.rs-crown__laurel--left { left: clamp(0px, calc(20vw - 120px), 65px); }
.rs-crown__laurel--right { right: clamp(0px, calc(20vw - 120px), 65px); transform: scaleX(-1); }
.rs-crown__lead {
  margin: 0; color: var(--rs-blue); font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700; line-height: 1.6;
}
.rs-crown__main.rs-crown__main {
  margin: 4px auto 0; max-width: none; color: var(--rs-blue);
  font-size: clamp(29px, 4vw, 48px); font-weight: 800; line-height: 1.45;
  word-break: normal; text-wrap: balance;
}
.rs-crown__no1 { display: inline-flex; align-items: baseline; white-space: nowrap; }
/* 2026-09-01：見出し内で「1」だけ色が変わらないよう、全文をブランドブルーへ統一。
   数字の大きさと位置による強調は残す。 */
.rs-crown__main .rs-crown__no1 > strong {
  position: relative; top: -.05em; margin-left: .02em;
  color: var(--rs-blue) !important; font-size: 1.4em; line-height: .68;
}

/* 長い区切り線の中央だけ、薄い金の小さな菱形にする。 */
.rs-crown__divider {
  display: grid; grid-template-columns: minmax(0, 1fr) 9px minmax(0, 1fr);
  align-items: center; gap: 13px; width: min(620px, 100%);
  margin: 28px auto; color: var(--rs-gold-light);
}
.rs-crown__divider::before,
.rs-crown__divider::after { content: ""; height: 1px; background: currentColor; }
.rs-crown__divider > span {
  width: 9px; height: 9px; background: currentColor; transform: rotate(45deg);
}
.rs-crown__count {
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap;
  column-gap: .28em; margin: 0; color: var(--rs-blue);
  font-size: clamp(20px, 2.3vw, 30px); font-weight: 700; line-height: 1.35;
}
.rs-crown__count strong {
  display: inline-block; margin-right: .08em; color: var(--rs-blue);
  font-size: clamp(56px, 7vw, 82px); line-height: .85; font-weight: 800;
}

/* 2026-09-01：実績の3分類を、金属リングと月桂樹を持つバッジへ変更。
   抽象アイコンと外側の名称帯は使わず、円内を「王冠＋分類名」だけに整理。 */
.rs-crown__medals {
  display: grid; grid-template-columns: repeat(3, minmax(0, 220px));
  justify-content: center; gap: clamp(22px, 3.5vw, 48px);
  max-width: 850px; margin: 40px auto 42px; padding: 0; list-style: none;
}
.rs-crown__medal {
  position: relative; isolation: isolate; box-sizing: border-box;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; width: 100%; aspect-ratio: 1;
  padding: 52px 32px 42px; border: 4px solid #b78b32; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.98) 0 7%, rgba(255,255,255,0) 30%),
    radial-gradient(circle at 50% 48%, #fffef9 0 42%, #fbf1d6 70%, #e2c77f 100%);
  box-shadow:
    inset 0 0 0 3px #fff7dc,
    inset 0 0 0 7px #d6ae50,
    inset 0 0 0 10px #fff9e7,
    inset 0 -16px 30px rgba(153,107,22,.10),
    0 14px 26px rgba(82,58,15,.18),
    0 3px 7px rgba(82,58,15,.14);
}
.rs-crown__medal::before {
  content: none;
}
.rs-crown__medal::after {
  content: ""; position: absolute; z-index: 1; inset: 14px;
  border: 1px solid rgba(151,108,29,.48); border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.82);
  pointer-events: none;
}
.rs-crown__icon {
  display: none;
}
.rs-crown__medal-rule {
  position: relative; z-index: 2; top: auto; left: auto;
  display: block; width: 52px; height: 29px; margin: 0 0 17px;
  color: #9b7124; transform: none;
}
.rs-crown__medal-rule::before,
.rs-crown__medal-rule::after { content: ""; position: absolute; left: 0; background: currentColor; }
.rs-crown__medal-rule::before {
  top: 0; width: 52px; height: 24px;
  clip-path: polygon(0 18%,18% 57%,32% 0,50% 53%,68% 0,82% 57%,100% 18%,90% 84%,10% 84%);
}
.rs-crown__medal-rule::after { bottom: 0; width: 52px; height: 4px; border-radius: 2px; }
.rs-crown__medal-rule > span { display: none; }
.rs-crown__medal p {
  position: relative; z-index: 3; left: auto; bottom: auto;
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: #7d5a1c; font-size: 18px; font-weight: 800; line-height: 1.35;
  letter-spacing: .02em; white-space: nowrap; transform: none;
}
.rs-crown__medal p::before,
.rs-crown__medal p::after {
  content: none;
}
.rs-crown__medal p > span { position: relative; z-index: 1; }
.rs-crown__text.rs-crown__text {
  max-width: 820px; margin: 0 auto; color: var(--rs-text);
  font-size: 16.5px; line-height: 2.05; text-align: center; text-wrap: pretty;
}
.rs-crown__btnwrap { margin: 30px 0 0; text-align: center; }
.rs-crown a.rs-crown__btn { position: relative; padding-right: 58px; padding-left: 58px; }
.rs-crown__btn svg {
  position: absolute; right: 24px; width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.rs-crown__note.rs-crown__note {
  max-width: 760px; margin: 18px auto 0; color: var(--rs-muted);
  font-size: 13.5px; line-height: 1.8; text-align: center; text-wrap: pretty;
}
@media (max-width: 600px) {
  .rs-crown { padding: 54px var(--rs-gutter) 58px; }
  .rs-crown__heading { padding-inline: 0; }
  .rs-crown__laurel { top: 2%; height: 96%; max-width: 18%; opacity: .42; }
  /* 2026-09-01：375px幅でも見出しへ触れないよう、枝の形と大きさは変えず左右へ16px逃がした。 */
  .rs-crown__laurel--left { left: -16px; }
  .rs-crown__laurel--right { right: -16px; }
  .rs-crown__divider { margin: 22px auto; }
  .rs-crown__medals {
    grid-template-columns: minmax(0, 200px); gap: 24px;
    margin-top: 30px; margin-bottom: 34px;
  }
  .rs-crown__medal { padding: 48px 28px 38px; }
  .rs-crown__medal::before { inset: 20px; }
  .rs-crown__medal-rule { transform: scale(.9); margin-bottom: 15px; }
  .rs-crown__medal p {
    width: 100%; min-height: 0; padding: 0; font-size: 16.5px;
  }
  .rs-crown a.rs-crown__btn { padding-right: 48px; padding-left: 48px; }
  .rs-crown__btn svg { right: 18px; }
}

/* -----------------------------------------------------------
   29-b. 本郷様ご支給の月桂冠素材へ差し替え（2026-09-01）

   ・見出し左右：行政書士事務所として.ai
   ・3分類：27581999.png
   形は描き足さず、ブランド金色 #B8963F に統一して使用する。
   ----------------------------------------------------------- */
.rs-crown__laurel { display: none; }
.rs-crown__heading {
  padding-inline: clamp(92px, 13vw, 150px);
}
.rs-crown__heading::before,
.rs-crown__heading::after {
  content: ""; position: absolute; z-index: 0; top: 50%;
  width: clamp(58px, 7.5vw, 76px); height: clamp(168px, 19vw, 214px);
  background-position: center; background-repeat: no-repeat; background-size: contain;
  transform: translateY(-48%); pointer-events: none;
}
.rs-crown__heading::before {
  left: clamp(8px, 3vw, 36px);
  background-image: url("../../uploads/2026/09/heading-laurel-left.png");
}
.rs-crown__heading::after {
  right: clamp(8px, 3vw, 36px);
  background-image: url("../../uploads/2026/09/heading-laurel-right.png");
}
.rs-crown__heading-inner { z-index: 1; }

.rs-crown__medals {
  grid-template-columns: repeat(3, minmax(0, 240px));
  gap: clamp(18px, 3vw, 42px); max-width: 850px;
}
.rs-crown__medal {
  aspect-ratio: 480 / 380; padding: 0 24px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.rs-crown__medal::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background: url("../../uploads/2026/09/medal-laurel-gold.png") center / contain no-repeat;
  pointer-events: none;
}
.rs-crown__medal::after { content: none; }
.rs-crown__medal-rule { display: none; }
.rs-crown__medal p {
  color: #7D5A1C; font-size: clamp(16px, 1.6vw, 18px);
  transform: translateY(12%);
}

@media (max-width: 600px) {
  .rs-crown__heading { padding-inline: 46px; }
  .rs-crown__heading::before,
  .rs-crown__heading::after {
    top: 57%; width: 44px; height: 132px; opacity: .72;
    transform: translateY(-50%);
  }
  .rs-crown__heading::before { left: -2px; }
  .rs-crown__heading::after { right: -2px; }
  .rs-crown__medals {
    grid-template-columns: minmax(0, 220px); gap: 18px;
    margin-top: 30px; margin-bottom: 36px;
  }
  .rs-crown__medal { padding: 0 18px; }
  .rs-crown__medal p { font-size: 16.5px; }
}

/* 1200px幅のセクション（.rs-sec--wide）の中でも、2カラムの行より下に置く
   補足の一覧・チェックリスト・ボタンは、これまでどおり1000pxで中央に置く。
   セクションを広げたぶん一緒に広がってしまい、上の本文とのつながりが切れて見えるため。
   （2026-08-21・選ばれる理由ページを2カラムにしたときに気づいた） */
.rs-sec--wide .rs-deflist,
.rs-sec--wide .rs-check,
.rs-sec--wide .rs-btns { max-width: var(--rs-w); margin-inline: auto; }

/* -----------------------------------------------------------
   ヒーロー2026-08-29版（rs-hero2）
   クライアントのラフ準拠。水色一面・縦書き・集合写真・白い曲線＋ドローン。
   数値は1920px幅の設計値をvwにしたもの（1vw＝19.2px）。全幅なので画面と比例で伸縮する。
   旧 .rs-hero のスタイルは残してあるが、トップページからは使っていない。
   ----------------------------------------------------------- */
.rs-hero2 {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #fff;
}
.rs-hero2 > .wp-block-group__inner-container { max-width: none; }

.rs-hero2__band { position: relative; height: calc(58vw + var(--rs-h2-top)); }
.rs-hero2 { --rs-h2-top: calc(var(--rs-hd-h) + var(--rs-gnav-h)); } /* ヘッダーの高さぶん中身を下げる。上段（--rs-hd-h）＋メニュー帯。
     2026-08-30：ヘッダーを作り替えて高さが画面幅で変わるようになったため、固定値137pxをやめた */
.rs-hero2__bg,
.rs-hero2__curve { position: absolute; left: 0; width: 100%; pointer-events: none; }
.rs-hero2__bg    { z-index: 0; top: 0; height: 100%; }
.rs-hero2__curve { z-index: 4; top: calc(-12.85vw + var(--rs-h2-top)); height: 72.9167vw; }

.rs-hero2__copy {
  position: absolute; z-index: 6;
  top: calc(4.5vw + var(--rs-h2-top)); left: 4.6875vw;
  display: flex; flex-direction: row-reverse; align-items: flex-start;
  gap: 0.9375vw; white-space: nowrap;
}
.rs-hero2__copy h1,
.rs-hero2__copy p {
  margin: 0;
  writing-mode: vertical-rl; text-orientation: upright;
  line-height: 1.28; letter-spacing: 0.08em;
}
/* クラス名を2つ重ねているのは、共通の見出し指定「.rs h1, .rs h2 …｛color: var(--rs-navy)｝」の
   ほうが指定が強く、クラス1つ（.rs-hero2__main）だと色が濃紺に負けるため。
   実際、ここが白ではなく濃紺で表示されていた（2026-08-30に発見） */
/* ★白ヌキなので細くしすぎないこと★ 見出しの下は水色 #A2D1EA で、白文字とのコントラストは
   1.63 しかない（実測）。太さで見せている文字なので、400 まで細くすると背景に沈んで読めない。
   実機で見比べて 700 にした（2026-09-01）。色を濃紺 #0B2E4E にすれば 8.48 まで上がるが、
   白は先方のラフどおりなので、色を変えるかどうかは先方に確認してから。 */
.rs-hero2 .rs-hero2__main {
  color: #fff; font-family: var(--rs-font-serif); font-size: 3.3333vw;
  font-weight: 700; letter-spacing: .14em;
}
/* 先方のご指示（2026-09-01）で、ヒーローの3行だけ明朝。ほかは全部ゴシックに戻した。
   ★クラスを2つ重ねること★ 下のスマホ用（@media 999px以下）も同じ2クラスで書いてある。
   片方だけ2クラスにすると、もう片方が詳細度で負けて指定が消える（8/30に同じ事故あり）。 */
.rs-hero2 .rs-hero2__sub {
  color: #525252; font-family: var(--rs-font-serif);
  font-size: 1.875vw; font-weight: 400; letter-spacing: .06em;
}

.rs-hero2__photo {
  position: absolute; z-index: 2;
  top: calc(4.5vw + var(--rs-h2-top)); left: 17.5vw;
  width: 74vw; height: 45.8vw;
  overflow: hidden;
  border: 0.3125vw solid #fff; border-radius: 1.25vw;
}
.rs-hero2__photo img { width: 100%; height: 100%; object-fit: cover; }

.rs-hero2__drone {
  position: absolute; z-index: 5;
  top: calc(47.2vw + var(--rs-h2-top)); left: 2vw; width: 13.5vw; height: auto;
}

.rs-hero2__scroll {
  position: absolute; z-index: 6;
  top: calc(30.5vw + var(--rs-h2-top)); left: 94.5vw;
  display: flex; flex-direction: column; align-items: center;
  color: #fff; pointer-events: none;
}
.rs-hero2__scroll span {
  writing-mode: vertical-rl;
  font-size: 1.1458vw; font-weight: 500; letter-spacing: 0.08em; line-height: 1;
}
.rs-hero2__scroll i {
  display: block; width: 1px; height: 6.77vw; margin-top: 1.04vw; background: #fff;
}

.rs-hero2 .rs-hero2__lead {
  max-width: var(--rs-w-text);
  margin: clamp(48px, 3.9vw, 64px) auto clamp(64px, 5vw, 82px); padding: 0 20px;
  text-align: center; font-size: 19px; line-height: 2.1;
}

@media (max-width: 999px) {
  /* スマホは縦積み・横書き。ドローンは波の手前・左下 */
  .rs-hero2 { --rs-h2-top: 56px; } /* スマホのfixedヘッダーは56px */
  .rs-hero2__band { height: auto; min-height: 620px; padding: calc(30px + var(--rs-h2-top)) 0 120px; }
  .rs-hero2__curve { top: 0; height: 100%; }
  .rs-hero2__copy {
    position: relative; top: auto; left: auto;
    flex-direction: column; gap: 8px;
    margin: 12px 24px 24px; white-space: normal;
  }
  .rs-hero2__copy h1,
  .rs-hero2__copy p { writing-mode: horizontal-tb; text-orientation: mixed; letter-spacing: 0.04em; }
  /* ★クラスを2つ重ねること★ PC用の指定が .rs-hero2 .rs-hero2__main（クラス2つ）なので、
     クラス1つで書くと詳細度で負けて、スマホでも 3.3333vw のまま＝375pxの画面で12.5pxになる。
     実測で確認済み（2026-08-30。見出しが本文より小さくなっていた）。 */
  .rs-hero2 .rs-hero2__main {
    font-family: var(--rs-font-serif); font-size: clamp(32px, 7vw, 48px);
    font-weight: 700; letter-spacing: .14em; line-height: 1.35;
  }
  .rs-hero2 .rs-hero2__sub {
    font-family: var(--rs-font-serif); font-weight: 400;
    font-size: clamp(15px, 3.1vw, 22px); line-height: 1.7; letter-spacing: .06em;
  }
  .rs-hero2__photo {
    position: relative; top: auto; left: auto;
    width: calc(100% - 32px); height: auto; aspect-ratio: 1.5 / 1;
    margin: 0 auto; border-width: 4px; border-radius: 16px;
  }
  /* ドローンは写真下の余白120pxの中に収める（高さ＋bottomが120を超えると写真に食い込む） */
  .rs-hero2__drone { top: auto; bottom: 44px; left: 18px; width: clamp(135px, 22vw, 170px); }
  .rs-hero2__scroll { top: auto; right: 15px; bottom: 34px; left: auto; }
  .rs-hero2__scroll span { font-size: 13px; }
  .rs-hero2__scroll i { height: 58px; margin-top: 10px; }
  .rs-hero2 .rs-hero2__lead { margin-top: 44px; margin-bottom: 64px; font-size: 17px; }
}

/* 新ヒーロー（rs-hero2）の後ろでは、実績カードを重ねずに下へ並べる
   （旧ヒーロー用の -104px / スマホ -70px の食い込みを打ち消す） */
.rs-hero2 + .rs-stats .rs-stats__grid { margin-top: 34px; }

/* -----------------------------------------------------------
   33. ヘッダーをデザイン案の形にする（2026-08-30）

   ご指示は「ロゴは左端／タイトルは中央（かなり大きく）」。
   デザイン案（260829_RoyalSphere.png）どおり、上段は白地に
   「左端に丸いロゴマーク・中央に法人名」、下段はメニューを淡い水色の帯にする。

   大きさはデザイン案の実測値をそのまま比率で持ってきている（案は幅1920pxで作画）。
     白帯の高さ 255px → 13.28vw ／ 丸マーク 225px → 11.72vw ／ 左からの位置 85px → 4.43vw
     法人名の幅 990px → 51.56vw
   min( ) で1920px相当を上限にしているのは、これより広い画面で無駄に大きくならないため。

   メニューは水色の帯に濃紺文字を置き、8.9:1のコントラストを確保する。
   ホバー時だけ白へ切り替える。
   ----------------------------------------------------------- */
:root {
  --rs-hd-h:     min(9.4vw, 180px);   /* 上段（白帯）の高さ */
  --rs-hd-mark:  min(8.3vw, 159px);   /* 丸いロゴマークの幅 */
  --rs-hd-markx: min(4.43vw, 85px);   /* 丸いロゴマークの左からの位置 */
  --rs-hd-name:  min(36.5vw, 700px);  /* 法人名ロゴの幅 */
  --rs-gnav-h:   56px;                /* 下段メニュー帯の高さ */
}

/* 丸いロゴマーク（functions.php の arkhe_header_left_content から出力） */
.rs-headmark { display: none; }
.rs-headmark img { display: block; width: 100%; height: auto; }

@media (min-width: 1000px) {
  /* 帯を画面いっぱいに使う。上段の白・下段の水色を端まで届かせるため、
     Arkhe の l-container が持つ最大幅と左右余白をここで外している */
  .l-header .l-header__body {
    max-width: none !important;
    padding-left: 0; padding-right: 0;
    padding-top: 0; padding-bottom: 0;
  }
  .l-header .l-header__left { justify-self: start; align-self: center; padding-left: var(--rs-hd-markx); }
  .l-header .l-header__center { justify-self: center; align-self: center; }
  /* 上段の高さ。マークと法人名のどちらが高くても、この高さで揃う */
  .l-header .l-header__left,
  .l-header .l-header__center { min-height: var(--rs-hd-h); display: flex; align-items: center; }

  .rs-headmark { display: block; width: var(--rs-hd-mark); }
  /* ロゴ（法人名）。案の比率どおりの幅で置く。高さ指定は外す */
  .l-header .l-header__logo.has-image img {
    width: var(--rs-hd-name); height: auto; max-width: none;
  }

  /* 下段のメニュー帯 */
  /* 2026-08-30：メニュー帯を白に（ご指示）。水色を外すと帯の境目が消えるので、
     上下に1本ずつ細い線を引いて「法人名の下の段」に見えるようにしている */
  .l-header .c-gnavWrap {
    margin-top: 0; background: #fff;
    border-top: 1px solid var(--rs-line); border-bottom: 1px solid var(--rs-line);
  }
  .l-header .c-gnav { justify-content: center; }
  .l-header .c-gnav__li > .c-gnav__a {
    min-height: var(--rs-gnav-h); color: var(--rs-blue);
  }
  /* 帯が白になったので、ホバーは「白文字」ではなく「水色の面を敷く」形にする */
  .l-header .c-gnav__li > .c-gnav__a:hover { color: var(--rs-blue); background: var(--rs-sky); }
  .l-header .c-gnav__li.menu-item-has-children::after { border-top-color: var(--rs-blue); }
}
/* 1000〜1180pxでは項目が1行に収まらないので、文字と余白を少し詰める（従来どおり） */
@media (min-width: 1000px) and (max-width: 1180px) {
  .l-header .l-header__logo.has-image img { width: min(48vw, 990px); }
}
/* スマホ。メニューはドロワーなので、上段の法人名ロゴだけを大きめに置く */
@media (max-width: 999px) {
  .l-header .l-header__logo.has-image img { width: min(58vw, 340px); height: auto; max-width: none; }
}

/* トップページはヘッダーを写真の上に重ねていた（白のグラデーション＋スクロールで白ベタ）。
   上段が白・下段が水色のはっきりした帯になったので、重ねる仕掛けは使わない。
   戻すときは、この2つの指定を消せば 2-2b の切り替えが復活する。 */
body.home .l-header { background: #fff; }
body.home .l-header::before,
body.home .l-header::after { content: none; }

/* -----------------------------------------------------------
   34. ヒーローの手直し（2026-08-30）
   ・ドローンを白い飛行曲線の先端に乗せる（ご指示「線の軌道上・軌道の一番先端」）
   ・Scroll の線の下端に矢じりを足す（ご指示「矢印は尖らせて」）
   ----------------------------------------------------------- */
/* 曲線の先端は SVG座標(120,1115)。SVGは left:0/width:100%/top:-12.85vw/height:72.9167vw で
   置いてあるので、画面上の位置は X=6.25vw、Y=-12.85+1115×(72.9167/1400)=45.22vw。
   そこにドローンの機体中心（画像の上から46.3%）が重なるように置いている。 */
@media (min-width: 1000px) {
  .rs-hero2__drone { top: calc(42.87vw + var(--rs-h2-top)); left: 0.25vw; width: 12vw; }
}
/* スマホ・タブレットはドローンを曲線の先端に合わせていない。
   縦積みになると写真が帯の大半を占め、曲線の先端（帯の高さの79.64%の位置）が
   写真の裏に入って見えなくなるため。見えない点に機体を合わせても意味がなく、
   むしろ写真の左下に重なってしまう（実測：768pxで写真に19px食い込む）。
   ここは写真の下の余白に置く、これまでの形のままにしてある。
   指定は上の 2-2c（.rs-hero2 の @media 内）にあるので、ここでは何も上書きしない。 */

/* Scroll の矢じり。「く」の字を45度回した細い線で作る。ベタ塗りの三角にはしない */
.rs-hero2__scroll i { position: relative; }
.rs-hero2__scroll i::after {
  content: ""; position: absolute; bottom: 0; left: 50%;
  width: max(7px, 0.4167vw); height: max(7px, 0.4167vw);
  border: solid #fff; border-width: 0 1px 1px 0;
  transform: translateX(-50%) rotate(45deg);
}

/* -----------------------------------------------------------
   35. 実績ボックスの「安心の実績」に顧問数の実績を足す（2026-08-30）
   ----------------------------------------------------------- */
/* 4枚のうち1枚だけ中身が増えるので、そのカードは上下の余白を詰めて背を抑える */
.rs-stat--wide { padding-bottom: 16px; }
.rs-stat--wide .rs-stat__strong { font-size: 17px; }
/* 2つの実績を分ける細い線 */
.rs-stat__sep {
  width: 46px; height: 1px; background: var(--rs-line); margin: 12px auto; padding: 0;
}
.rs-stat__lead {
  font-size: 12.5px; font-weight: 700; color: var(--rs-navy);
  line-height: 1.5; margin: 0 0 4px;
}
.rs-stat__no1 {
  font-style: normal; color: var(--rs-orange); font-size: 1.28em; margin-left: .1em;
}
/* 中身が増えたぶん、カードが縦に伸びる。4枚とも同じ高さになるので上の余白を足しておく */
.rs-stats .rs-stats__grid:has(.rs-stat--wide) { align-items: stretch; }

/* -----------------------------------------------------------
   36. 実績の数字は、画面に入ったら数え上げる（2026-08-30）
   ----------------------------------------------------------- */
/* 2026-08-30 に明朝（Noto Serif JP）にしていたが、先方のご指示（2026-09-01）で
   ゴシックに戻した。明朝を使うのはヒーローの3行だけ。数字は英数字なので Montserrat。 */
.rs-stat__num {
  font-family: var(--rs-font-en);
  font-weight: 800; font-size: 58px; letter-spacing: .01em;
  /* 数え上げ中に桁が増えても幅が動かないよう、等幅の数字を使う */
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.rs-stat__num small { font-family: var(--rs-font); font-size: 19px; font-weight: 800; }
/* 数字そのものを包む入れ物。数え上げのときにJSがここの文字だけを書き換える */
.rs-stat__figure { display: inline; }
/* 数え上げ。html に rs-anim が付いたときだけ隠す。
   JSが動かない環境ではこのクラスが付かないので、数字は最初から見えたまま。 */
.rs-anim .rs-stat__num[data-count] { opacity: 0; transform: translateY(10px); }
.rs-anim .rs-stat__num[data-count].is-in {
  opacity: 1; transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .rs-anim .rs-stat__num[data-count] { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 767px) {
  .rs-stat__num { font-size: 34px; }
  .rs-stat__num small { font-size: 13.5px; }
  .rs-stat--wide .rs-stat__strong { font-size: 14.5px; }
  .rs-stat__lead { font-size: 11.5px; }
  .rs-stat__sep { margin: 9px auto; }
}

/* -----------------------------------------------------------
   37. 顧問実績の帯から、外国人業務のサイトへ渡すボタン（2026-08-30）
   2026-09-01：矢印を含む見た目は 29. の .rs-crown 節へまとめた。
   ----------------------------------------------------------- */

/* -----------------------------------------------------------
   38. トップページの共通部品
   ----------------------------------------------------------- */
/* セクション見出しの背後に置く英字の透かし */
.rs-label.rs-label--watermark {
  display: block; width: 100%; height: .78em; overflow: hidden;
  margin: -.18em 0 -.34em;
  color: var(--rs-sky); opacity: .22;
  font-family: var(--rs-font-en); font-size: clamp(96px, 9vw, 140px);
  font-weight: 800; line-height: .82; letter-spacing: .08em;
  text-align: center; white-space: nowrap; pointer-events: none;
}
.rs-label--watermark + .rs-h2 { position: relative; z-index: 1; }
.rs-sec--navy .rs-label.rs-label--watermark,
.rs-contact .rs-label.rs-label--watermark { color: var(--rs-sky); opacity: .18; }
/* 2026-08-30：水色の地では同系色の透かしが消えるため、白に替えて輪郭を残す。
   白地と濃紺の帯は従来の配色のままにする。 */
.rs-sec--pale .rs-label.rs-label--watermark,
.rs-sec--light .rs-label.rs-label--watermark,
.rs-sec--cream .rs-label.rs-label--watermark {
  color: var(--rs-white); opacity: .55;
}
/* 地色が濃いセクションで、中身ぜんぶを白い角丸の面に載せる。
   水色の上に長い文章を直接置くと読みにくい、というご指摘（2026-08-30）への対応。
   地色は面のふちとして残し、読む部分は白にする。 */
.rs-sec.rs-sec--panel { padding-top: 36px; padding-bottom: 36px; }
.rs-sec--panel > .wp-block-group__inner-container {
  background: var(--rs-white); border-radius: var(--rs-r);
  padding: 64px clamp(20px, 4vw, 56px); box-shadow: var(--rs-shadow-lg);
}
/* 白い面の上では白い透かしが消えるため、従来の水色に戻す。 */
.rs-sec--panel .rs-label.rs-label--watermark { color: var(--rs-sky); opacity: .22; }
.rs-stats--white { background: #fff; }

/* ヒーロー写真のクロスフェード */
.rs-hero2__photo { background: var(--rs-navy); isolation: isolate; }
.rs-hero2__slide {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1s ease-in-out, visibility 0s linear 1s;
}
.rs-hero2__slide.is-active {
  z-index: 1; opacity: 1; visibility: visible;
  transition: opacity 1s ease-in-out, visibility 0s linear 0s;
}
.rs-hero2__slide img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* 2026-08-30：スライドの操作ボタンをHTMLから削除したため、関連する見た目の指定も削除した */

/* 汎用料金カード */
.rs-pricecard {
  max-width: var(--rs-w); margin: 0 auto;
  overflow: hidden; border: 2px solid var(--rs-blue); border-radius: var(--rs-r);
  background: #fff; box-shadow: 0 12px 28px rgba(8,44,100,.07);
}
.rs-pricecard__head {
  display: flex; align-items: center; justify-content: center;
  min-height: 0; padding: 34px 28px 40px;
  background: var(--rs-blue); color: var(--rs-white);
  font-size: 32px; font-weight: 700; letter-spacing: .08em; text-align: center;
}
.rs-pricecard__body { background: #fff; }
.rs-pricecard__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 30px 34px; border-top: 1px solid var(--rs-line);
}
.rs-pricecard__row:first-child { border-top: 0; }
.rs-pricecard__service { color: var(--rs-blue); font-size: 18px; font-weight: 500; line-height: 1.8; text-align: left; }
.rs-pricecard__amount { color: var(--rs-blue); text-align: right; white-space: nowrap; }
.rs-pricecard__number {
  font-family: var(--rs-font-en); font-size: 40px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.rs-pricecard__unit { font-size: 15px; font-weight: 700; }
/* 注記は金額のすぐ下に置く。2026-08-30に金額を「行の右端」から「行の中央」に
   組み替えたので、左そろえのままだと注記だけカードの左端まで飛んでいた。
   金額と同じ中央そろえにする */
/* 2026-08-30d：料金をPCで左右2列へ戻したため、注記も金額と同じ右端に戻す。 */
.rs-pricecard__caption {
  display: block; color: var(--rs-muted-2); text-align: right; white-space: normal;
  font-family: var(--rs-font); font-size: 12.5px; font-weight: 400; line-height: 1.6;
  margin-top: 4px;
}
/* トップ料金表の下へ移した総額案内は、注記と続けて読める間隔にする。 */
.rs-price-sec .rs-pricecard + .rs-lead.rs-lead {
  margin: 30px auto 0; font-size: 17px; line-height: 1.9;
}
.rs-price-sec .rs-pricecard + .rs-lead + .rs-note.rs-note { margin-top: 6px; }
/* 2列比較用。中の行を左右2組に並べ、狭い画面では1列へ戻す */
.rs-pricecard--cols .rs-pricecard__body {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 同じ段の右側だけ上線を外し、代わりに2pxの縦線で左右を分ける */
.rs-pricecard--cols .rs-pricecard__row:nth-child(2) { border-top: 0; }
.rs-pricecard--cols .rs-pricecard__row:nth-child(2n) { border-left: 2px solid var(--rs-blue); }

/* PRICEとFLOWの見出し脇に置く小さなドローン */
.rs-sec--drone { position: relative; overflow: hidden; }
.rs-price-sec > :not(.rs-section-drone),
.rs-flow-sec > :not(.rs-section-drone) { position: relative; z-index: 1; }
.rs-section-drone {
  position: absolute; z-index: 0; top: clamp(32px, 4vw, 58px);
  display: block; width: clamp(84px, 7vw, 108px); height: auto;
  color: var(--rs-blue); opacity: .76; pointer-events: none;
  animation: rs-section-drone-hover 3s ease-in-out infinite;
}
/* ★位置の基準は「画面」ではなく「本文の列」★（2026-08-30 実測で判明）
   ドローンの入れ物は .wp-block-group__inner-container（本文の列＝1000px）で、
   これに position: relative が付いているため、right/left は画面の端ではなく
   本文の列の端からの距離になる。そのため 100vw を使った式では、画面をいくら広げても
   ドローンは列の内側に入り込み、見出しに重なっていた（幅1600pxで290px食い込み）。
   → 列の外へ出すにはマイナスの値を渡す。「ドローンの幅＋14px」だけ外へずらす。 */
.rs-section-drone--price { right: calc(-1 * (clamp(84px, 7vw, 108px) + 14px)); }
.rs-section-drone--flow { left: calc(-1 * (clamp(84px, 7vw, 108px) + 14px)); animation-delay: -1.2s; }
.rs-section-drone .rs-drone__craft { animation-duration: 3s; }
.rs-drone__accent { fill: var(--rs-orange); }
@keyframes rs-section-drone-hover {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 12px; }
}

/* 読み上げ専用の完成値や補助ラベル */
.rs-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

@media (max-width: 768px) {
  .rs-label.rs-label--watermark {
    height: .8em; margin-top: -.1em; margin-bottom: -.32em;
    font-size: clamp(68px, 17vw, 96px); letter-spacing: .04em;
  }
  .rs-pricecard__row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 24px; }
  .rs-pricecard__head { padding: 24px 20px 28px; font-size: 24px; }
  .rs-pricecard__service { text-align: center; }
  .rs-pricecard__amount { text-align: center; }
  .rs-pricecard__caption { text-align: center; }
  .rs-pricecard--cols .rs-pricecard__body { grid-template-columns: minmax(0, 1fr); }
  .rs-pricecard--cols .rs-pricecard__row:nth-child(2) { border-top: 1px solid var(--rs-line); }
  .rs-pricecard--cols .rs-pricecard__row:nth-child(2n) { border-left: 0; }
  .rs-pricecard__number { font-size: 30px; }
  .rs-table thead th { font-size: 16px; }
  .rs-table--price thead th { --ark-padding--cell: 12px 14px; padding: 12px 14px; }
  .rs-table--price tbody td:last-child { font-size: 20px; }
  .rs-section-drone { top: 22px; width: 76px; opacity: .64; }
  .rs-section-drone--price { right: 10px; }
  .rs-section-drone--flow { left: 10px; }
}
@media (max-width: 1319px) {
  /* 本文の外側に幅108pxのドローンを置けない画面では、見出しとの重なりを避けて隠す。 */
  .rs-section-drone { display: none; }
}
@media (max-width: 768px) {
  .rs-sec.rs-sec--panel { padding-top: 18px; padding-bottom: 18px; }
  .rs-sec--panel > .wp-block-group__inner-container {
    border-radius: var(--rs-r); padding: 44px clamp(18px, 5vw, 28px);
  }
}
@media (max-width: 375px) {
  .rs-label.rs-label--watermark { font-size: 64px; }
  .rs-pricecard { border-radius: var(--rs-r); }
  .rs-pricecard__head { min-height: 0; padding: 22px 18px 24px; font-size: 21px; }
  .rs-pricecard__row { padding: 20px 18px; }
  .rs-pricecard__service { font-size: 16px; }
  .rs-pricecard__number { font-size: 30px; }
  .rs-section-drone { width: 62px; top: 18px; }
}

/* -----------------------------------------------------------
   39. サイト全体の追加モーション（標準）
   ----------------------------------------------------------- */
:root {
  --rs-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --rs-motion-distance: 20px;
  --rs-motion-word-distance: 12px;
  --rs-motion-duration: 680ms;
  --rs-motion-word-duration: 560ms;
  --rs-motion-line-duration: 480ms;
  --rs-motion-image-duration: 1200ms;
  --rs-motion-stagger: 70ms;
  --rs-motion-image-scale: 1.055;
}

/* .rs-motion-words に position は書かない：.rs-hero2__copy（絶対配置の縦書き）と同じ要素に付くため、後勝ちで absolute を潰してしまう（2026-08-30に実際に起きた） */
.rs-motion-word--accent { color: var(--rs-orange); }
[data-rs-motion~="words"] .rs-wb { white-space: nowrap; }
html.rs-motion-ready [data-rs-motion~="words"] .rs-wb {
  transition:
    opacity var(--rs-motion-word-duration) var(--rs-motion-ease) var(--rs-motion-delay, 0ms),
    translate var(--rs-motion-word-duration) var(--rs-motion-ease) var(--rs-motion-delay, 0ms),
    color var(--rs-motion-word-duration) ease var(--rs-motion-delay, 0ms);
}
html.rs-motion-ready [data-rs-motion~="words"]:not(.rs-motion-visible) .rs-wb {
  opacity: 0; translate: 0 var(--rs-motion-word-distance);
}
html.rs-motion-ready [data-rs-motion~="words"]:not(.rs-motion-visible) .rs-motion-word--accent { color: inherit; }
html.rs-motion-ready [data-rs-motion~="words"].rs-motion-visible .rs-wb { opacity: 1; translate: none; }

.rs-h2.rs-motion-line::after {
  transform-origin: left center;
  transition: transform var(--rs-motion-line-duration) var(--rs-motion-ease) 80ms;
}
html.rs-motion-ready .rs-h2.rs-motion-line:not(.rs-motion-visible)::after { transform: scaleX(0); }
html.rs-motion-ready .rs-h2.rs-motion-line.rs-motion-visible::after { transform: scaleX(1); }

.rs-motion-media { overflow: hidden; }
.rs-motion-media > .rs-motion-image {
  scale: 1; transform-origin: center;
  transition: scale var(--rs-motion-image-duration) var(--rs-motion-ease), transform .5s ease;
}
html.rs-motion-ready .rs-motion-media:not(.rs-motion-visible) > .rs-motion-image { scale: var(--rs-motion-image-scale); }
html.rs-motion-ready .rs-motion-media.rs-motion-visible > .rs-motion-image { scale: 1; }

.rs-motion-stagger-item {
  transition:
    opacity 520ms var(--rs-motion-ease) var(--rs-motion-delay, 0ms),
    translate 520ms var(--rs-motion-ease) var(--rs-motion-delay, 0ms);
}
html.rs-motion-ready [data-rs-motion~="stagger"]:not(.rs-motion-visible) > .rs-motion-stagger-item {
  opacity: 0; translate: -16px 0;
}
html.rs-motion-ready [data-rs-motion~="stagger"].rs-motion-visible > .rs-motion-stagger-item {
  opacity: 1; translate: none;
}

@media (prefers-reduced-motion: reduce) {
  .rs-hero2__slide,
  [data-rs-motion~="words"] .rs-wb,
  .rs-h2.rs-motion-line::after,
  .rs-motion-media > .rs-motion-image,
  .rs-motion-stagger-item,
  .rs-section-drone,
  .rs-section-drone .rs-drone__craft,
  .rs-section-drone .rs-drone__shadow,
  .rs-section-drone .rs-drone__prop {
    opacity: 1 !important; visibility: visible;
    translate: none !important; scale: 1 !important; transform: none !important;
    transition: none !important; animation: none !important;
  }
  .rs-hero2__slide:not(.is-active) { opacity: 0 !important; visibility: hidden; }
  a.rs-card:hover, a.rs-btn:hover { transform: none !important; }
}

@media print {
  html.rs-motion-ready [data-rs-motion] .rs-wb,
  html.rs-motion-ready .rs-motion-stagger-item { opacity: 1 !important; translate: none !important; }
  .rs-motion-image,
  .rs-h2.rs-motion-line::after { scale: 1 !important; transform: none !important; transition: none !important; }
  .rs-section-drone { display: none !important; }
}

/* 38. 社名ロゴの縦位置（2026-08-30 本郷様指示）
   Arkhe親テーマがロゴのリンクを高さ48px固定にしており、大きくした画像が
   枠から下へはみ出して約40px低く見えていた。枠を中身に合わせて解除し、
   丸ロゴと同じ「白帯の中央」にそろえる。画像自体の下余白17pxも削除済み。 */
@media (min-width: 1000px) {
  .l-header .l-header__logo,
  .l-header .l-header__logo a { height: auto; line-height: 0; }
}

/* -----------------------------------------------------------
   40. 下層の料金表をバウンダリ流の枠に統一（2026-08-30）
   ヘッダー帯は主色に白文字。外枠と金額を強くし、
   行の罫線は薄いまま残して内容を追いやすくする。
   ----------------------------------------------------------- */
/* 区分別の料金カードを縦に並べる */
.rs-pricecards {
  display: grid; gap: 28px;
  max-width: var(--rs-w); margin: 0 auto;
}
.rs-pricecards .rs-pricecard { width: 100%; }
.rs-pricecard__service a { color: inherit; }
.rs-pricecard__word { font-size: 19px; font-weight: 800; }

/* 「そのほかの手続き」の説明文は、長文でも追いやすい行間にする */
.rs-optioncopy.rs-body p { line-height: 2.15; }

/* 顧問プランの3枚ミニカード。全プランを同じ強さで表示する */
.rs-advisoryplans {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  max-width: var(--rs-w); margin: 38px auto 0;
}
.rs-pricecard--plan { width: 100%; border-radius: var(--rs-r); }
.rs-pricecard--plan .rs-pricecard__head {
  min-height: 0; padding: 22px 18px 24px; font-size: 21.6px; font-weight: 500;
}
.rs-pricecard--plan .rs-pricecard__head a { color: inherit; text-decoration: none; }
.rs-pricecard--plan .rs-pricecard__row {
  display: flex; justify-content: center; min-height: 108px; padding: 24px 16px;
}
.rs-pricecard--plan .rs-pricecard__amount { text-align: center; }
.rs-pricecard--plan .rs-pricecard__number { font-size: 40px; }

/* 写真の下にラベルと注記を置く共通タイル。
   従来の事務所写真帯（.rs-photorow）は変えず、修飾クラスで分ける。 */
.rs-photorow.rs-photorow--tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
  margin: 0 auto 42px;
}
.rs-photorow--tiles .rs-photorow__item {
  overflow: hidden; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--rs-line); border-radius: var(--rs-r);
  box-shadow: 0 12px 30px rgba(8,44,100,.07);
}
.rs-photorow--tiles .rs-photorow__item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 0; box-shadow: none;
}
.rs-photorow__body { padding: 18px 16px 20px; text-align: center; }
.rs-photorow__label {
  margin: 0 0 5px; color: var(--rs-navy);
  font-size: 17px; font-weight: 800; line-height: 1.6;
}
.rs-photorow__note { margin: 0; color: var(--rs-muted-2); font-size: 14px; line-height: 1.7; }

@media (max-width: 768px) {
  .rs-pricecard--plan .rs-pricecard__number { font-size: 30px; }
  .rs-photorow.rs-photorow--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 600px) {
  .rs-advisoryplans { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 420px; }
  .rs-pricecard--plan .rs-pricecard__row { min-height: 94px; }
  .rs-photorow.rs-photorow--tiles { grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 16px; }
}
@media (max-width: 375px) {
  .rs-pricecards { gap: 22px; }
  .rs-advisoryplans { margin-top: 32px; }
  .rs-pricecard--plan .rs-pricecard__number { font-size: 28px; }
  .rs-photorow__body { padding: 16px 14px 18px; }
}

/* -----------------------------------------------------------
   41. 申請の流れ・対応サービスの軽量化（2026-08-30）
       写真を主役にし、本文とタイムラインの間隔を広げる。
   ----------------------------------------------------------- */

/* RULE・CATEGORY・DIPS2.0など、文章量の多い章だけをゆったり読ませる */
.rs-copy-sec .rs-body { line-height: 2.15; }
.rs-copy-sec .rs-body.rs-body p { margin-bottom: 34px; }
.rs-copy-sec .rs-body.rs-body p:last-child { margin-bottom: 0; }
.rs-copy-sec .rs-lead.rs-lead { line-height: 2.2; margin-bottom: 72px; }
.rs-copy-sec .rs-deflist dd { line-height: 2; }

/* 「許可」と「承認」の比較。上部を線画から写真へ差し替える修飾クラス */
.rs-vs--photo .rs-vs__side { padding: 18px 18px 26px; }
.rs-vs--photo .rs-vs__photo {
  display: block; margin: 0 0 22px; overflow: hidden;
  border-radius: 14px; background: var(--rs-blue-pale);
}
.rs-vs--photo .rs-vs__photo img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
}

/* 所要日数の流れ。ラベルを大きくし、各項目の息継ぎを広げる */
.rs-timeline--airy { gap: 14px; margin-bottom: 44px; }
.rs-timeline--airy::before { top: 33px; }
.rs-timeline--airy .rs-timeline__item { padding: 0 8px 10px; }
.rs-timeline--airy .rs-timeline__item::before { margin: 24px auto 24px; }
.rs-timeline--airy .rs-timeline__when {
  display: block; min-height: 0; padding: 4px 0 4px 12px; margin: 0 0 14px;
  border-left: 3px solid var(--rs-blue); border-radius: 0;
  background: transparent; color: var(--rs-blue); text-align: left;
  font-size: 14.5px; font-weight: 800; line-height: 1.6; letter-spacing: .02em;
}
.rs-timeline--airy .rs-timeline__item--goal .rs-timeline__when { color: var(--rs-blue); }
.rs-timeline--airy .rs-timeline__title { margin-bottom: 9px; line-height: 1.75; }
.rs-timeline--airy .rs-timeline__text { line-height: 1.95; }

/* 所要日数の図は水色の地に線と点だけだと輪郭が埋もれるため、
   見出しごと白い面に載せる。直後の表との間隔は従来の52pxを保つ */
.rs-schedule-sec .rs-fig {
  box-sizing: border-box; padding: 32px 30px; margin-bottom: 52px;
  border-radius: var(--rs-r); background: var(--rs-white); box-shadow: var(--rs-shadow-md);
}
.rs-schedule-sec .rs-fig > .rs-timeline--airy { margin-bottom: 0; }

/* 下層ページの見出し脇に置くドローン */
.rs-schedule-sec > :not(.rs-section-drone),
.rs-guide-sec > :not(.rs-section-drone) { position: relative; z-index: 1; }
/* 2026-08-30d：この2つはもともと右側。左に動かす指示ではなかったので右のまま。
   位置の基準が本文の列であることは上の .rs-section-drone--price の説明を参照。 */
.rs-section-drone--schedule,
.rs-section-drone--guide { right: calc(-1 * (clamp(84px, 7vw, 108px) + 14px)); }
.rs-section-drone--guide { animation-delay: -1.2s; }

/* 状況から個別サービスへ誘導する、小さな正方形写真つきカード */
.rs-guidegrid {
  max-width: var(--rs-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;
}
.rs-guidecard {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: stretch;
  min-width: 0; overflow: hidden; background: #fff;
  border: 1px solid var(--rs-line); border-radius: var(--rs-r);
  box-shadow: 0 10px 26px rgba(8,44,100,.07);
  color: inherit; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rs-guidecard:hover {
  transform: translateY(-3px); border-color: var(--rs-sky);
  box-shadow: 0 16px 34px rgba(8,44,100,.12);
}
.rs-guidecard:focus-visible { outline: 3px solid var(--rs-orange); outline-offset: 3px; }
.rs-guidecard__photo {
  align-self: center; display: block; width: 112px; height: 112px;
  margin: 16px 0 16px 16px; overflow: hidden; border-radius: 14px;
  background: var(--rs-blue-pale);
}
.rs-guidecard__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rs-guidecard__body {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-width: 0; padding: 22px 22px 22px 18px;
}
.rs-guidecard__situation {
  color: var(--rs-text); font-size: 15.5px; font-weight: 500; line-height: 1.85;
}
.rs-guidecard__link {
  display: inline-flex; align-items: center; min-height: 38px;
  margin-top: 12px; padding: 8px 14px; border-radius: 10px;
  background: var(--rs-navy); color: #fff;
  font-size: 14.5px; font-weight: 700; line-height: 1.5;
  transition: background-color .2s ease;
}
.rs-guidecard:hover .rs-guidecard__link { background: var(--rs-orange-dark); }

/* 事業者向けサポートの2枚を、写真から始まるカードにする */
.rs-card.rs-businesscard { padding: 0; overflow: hidden; border-radius: var(--rs-r); }
.rs-businesscard .rs-card__photo { aspect-ratio: 16 / 9; }
.rs-businesscard .rs-card__photo img { transition: transform .5s ease; }
.rs-businesscard:hover .rs-card__photo img { transform: scale(1.045); }
.rs-businesscard__body { padding: 24px 26px 28px; }
.rs-businesscard .rs-card__title { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.rs-businesscard .rs-card__text { line-height: 2; }

@media (max-width: 900px) {
  .rs-guidecard { grid-template-columns: 92px minmax(0, 1fr); }
  .rs-guidecard__photo { width: 92px; height: 92px; margin: 14px 0 14px 14px; border-radius: 12px; }
  .rs-guidecard__body { padding: 18px 16px 18px 14px; }
  .rs-guidecard__situation { font-size: 14.5px; }
  .rs-guidecard__link { font-size: 13.5px; }
}

@media (max-width: 820px) {
  .rs-timeline--airy { gap: 10px; margin-bottom: 38px; }
  .rs-timeline--airy::before { top: 12px; }
  .rs-timeline--airy .rs-timeline__item { padding: 12px 0 18px 42px; }
  .rs-timeline--airy .rs-timeline__item::before { top: 18px; margin: 0; }
  .rs-timeline--airy .rs-timeline__when { min-height: 0; margin-bottom: 12px; }
  /* 縦並びでも白い面と次の表の間隔を保ち、本文幅を狭めすぎない */
  .rs-schedule-sec .rs-fig { padding: 26px 22px; margin-bottom: 46px; }
  .rs-schedule-sec .rs-fig > .rs-timeline--airy { margin-bottom: 0; }
}

@media (max-width: 768px) {
  .rs-copy-sec .rs-body { line-height: 2.05; }
  .rs-copy-sec .rs-body.rs-body p { margin-bottom: 30px; }
  .rs-copy-sec .rs-lead.rs-lead { line-height: 2.1; margin-bottom: 58px; }
  .rs-section-drone--schedule,
  .rs-section-drone--guide { right: 10px; }
  .rs-businesscard__body { padding: 22px 22px 25px; }
}

@media (max-width: 600px) {
  .rs-vs--photo .rs-vs__side { padding: 14px 14px 22px; }
  .rs-vs--photo .rs-vs__photo { margin-bottom: 18px; border-radius: 12px; }
  .rs-guidegrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rs-guidecard { grid-template-columns: 96px minmax(0, 1fr); }
  .rs-guidecard__photo { width: 96px; height: 96px; }
  .rs-guidecard__situation { font-size: 15px; }
  .rs-guidecard__link { font-size: 14px; }
}

@media (max-width: 375px) {
  .rs-schedule-sec .rs-fig { padding: 24px 16px; }
  .rs-guidecard { grid-template-columns: 84px minmax(0, 1fr); border-radius: 16px; }
  .rs-guidecard__photo { width: 84px; height: 84px; margin: 12px 0 12px 12px; }
  .rs-guidecard__body { padding: 16px 13px 16px 12px; }
  .rs-guidecard__situation { font-size: 14px; line-height: 1.8; }
  .rs-guidecard__link { min-height: 36px; margin-top: 10px; padding: 7px 11px; font-size: 13px; }
  .rs-businesscard__body { padding: 20px 18px 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-guidecard,
  .rs-guidecard__link,
  .rs-businesscard .rs-card__photo img { transition: none !important; transform: none !important; }
}

/* -----------------------------------------------------------
   42. 事務所概要ページ（2026-08-30）
   写真の拡大戻し・3色のセクション背景・メンバー紹介を共通部品に合わせる。
   ----------------------------------------------------------- */
/* 代表・顧問写真は、影を残したまま写真だけを枠内で拡大戻しする */
.rs-greeting__image {
  border: 1px solid var(--rs-line-2); border-radius: var(--rs-r);
  box-shadow: 0 14px 32px rgba(8,44,100,.12);
}
.rs-greeting__image > img,
.rs-greeting__photo .rs-greeting__image > img {
  border: 0; border-radius: 0; box-shadow: none;
}

/* 集合写真は本文幅いっぱいのワイド表示 */
.rs-memberphoto {
  max-width: var(--rs-w); margin: 0 auto;
  border: 1px solid var(--rs-line-2); border-radius: var(--rs-r);
  background: var(--rs-blue-pale); box-shadow: 0 16px 38px rgba(8,44,100,.10);
}
.rs-memberphoto img {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: center; border-radius: 0;
}

/* 個別原稿の到着後に有効化する6枚のメンバーカード */
.rs-membercards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
  max-width: var(--rs-w); margin: 42px auto 0;
}
.rs-membercard {
  min-width: 0; overflow: hidden; background: #fff;
  border: 1px solid var(--rs-line-2); border-radius: var(--rs-r);
  box-shadow: var(--rs-shadow); display: flex; flex-direction: column;
}
/* 写真のないカードは本文を上下中央に置き、写真ありと同じ高さの行でも
   余白が下側だけに偏らず、意図したレイアウトに見えるようにする */
.rs-membercard:not(.rs-membercard--photo) { justify-content: center; }
.rs-membercard__photo { overflow: hidden; background: var(--rs-blue-pale); }
.rs-membercard__photo img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
}
.rs-membercard__body { padding: 20px 20px 24px; }
.rs-membercard__role {
  margin: 0 0 7px; color: var(--rs-blue);
  font-size: 14px; font-weight: 700; line-height: 1.7; letter-spacing: .08em;
}
.rs-membercard__name {
  margin: 0 0 12px; color: var(--rs-navy);
  font-size: 21px; font-weight: 800; line-height: 1.65; letter-spacing: .04em;
}
.rs-membercard__message { margin: 0; color: var(--rs-text); font-size: 15px; line-height: 2; }

/* 白背景にした信条セクションの文字色と写真の影を調整 */
.rs-about-philosophy .rs-creed-quote { color: var(--rs-navy); }
.rs-about-philosophy .rs-creed-quote--sub { color: var(--rs-blue); }
.rs-about-philosophy .rs-creed-quote--sub + .rs-body.rs-body p { color: var(--rs-text); }
.rs-about-philosophy .rs-photorow img { box-shadow: 0 10px 24px rgba(8,44,100,.12); }

/* 法人概要の表と主な取扱業務は、長文を追いやすい行間にする */
.rs-about-outline .rs-table th,
.rs-about-outline .rs-table td { line-height: 2.05; }
.rs-about-field .rs-deflist dt,
.rs-about-field .rs-deflist dd { line-height: 2.1; }

/* 2026-09-01：class名は既存ブロックを壊さないため残し、色だけ金色デザイン用の地へ変更。 */
.rs-crown.rs-crown--white { background-color: var(--rs-crown-bg); }

/* 2026-09-01：もとは 768px だったが、サイト全体で使っている区切りは 900px（15箇所）。
   メンバーカードだけ別の幅で折り返す理由がないのでそろえた。
   写真ありと無しが混ざる行を早めに2列にして、1枚あたりの幅を稼ぐ狙いもある。 */
@media (max-width: 900px) {
  .rs-memberphoto { border-radius: var(--rs-r); }
  .rs-membercards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
  .rs-membercard__body { padding: 18px 17px 21px; }
}

@media (max-width: 600px) {
  /* 1列では写真の有無が異なるカード同士を同じ高さにする必要がないため、読みやすい横幅を確保する */
  .rs-membercards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 375px) {
  .rs-memberphoto { border-radius: 14px; }
  .rs-membercards { gap: 12px; margin-top: 30px; }
  .rs-membercard { border-radius: 14px; }
  .rs-membercard__body { padding: 14px 12px 17px; }
  .rs-membercard__role { font-size: 12px; }
  .rs-membercard__name { font-size: 17px; margin-bottom: 8px; }
  .rs-membercard__message { font-size: 13px; line-height: 1.85; }
  .rs-about-outline .rs-table th,
  .rs-about-outline .rs-table td { line-height: 1.95; }
  .rs-about-field .rs-deflist dt,
  .rs-about-field .rs-deflist dd { line-height: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-greeting__image > .rs-motion-image,
  .rs-memberphoto > .rs-motion-image {
    scale: 1 !important; transform: none !important; transition: none !important;
  }
}

/* 事務所メンバー区画の目印クラス。見た目は rs-sec--cream 任せで、
   スタッフ個別カードを有効化するときの指定に使う（検品対策の登録を兼ねる） */
.rs-about-member { display: block; }


/* -----------------------------------------------------------
   スクロールするとヘッダーを小さくする（2026-08-30・ご指示）
   「ロゴとメニューが大きすぎて、スクロール中の画面が狭い」というご指摘への対応。
   ヘッダーの寸法は上の4つの変数で決まっているので、60px以上スクロールしたときに
   付く body.rs-scrolled（functions.php）で、その変数だけを小さい値に差し替える。
   1440pxの画面で約193px → 約110px。戻したいときはこのブロックごと消せば元に戻る。
   ※ヒーローだけは元の高さを前提に中身を下げているので、中で変数を元に戻している。
   ----------------------------------------------------------- */
@media (min-width: 1000px) {
  .l-header .l-header__left,
  .l-header .l-header__center { transition: min-height .45s cubic-bezier(.4, 0, .2, 1); }
  .l-header .l-header__logo.has-image img,
  .rs-headmark { transition: width .45s cubic-bezier(.4, 0, .2, 1); }
  .l-header .c-gnav__li > .c-gnav__a { transition: min-height .45s cubic-bezier(.4, 0, .2, 1); }

  body.rs-scrolled {
    --rs-hd-h:     64px;
    --rs-hd-mark:  46px;
    --rs-hd-markx: 24px;
    --rs-hd-name:  min(26vw, 300px);
    --rs-gnav-h:   44px;
  }
  /* ヒーローは「ヘッダーの高さぶん中身を下げる」計算をしているので、
     縮んだ値をそのまま使うと、スクロールした瞬間に文字が上へ飛ぶ。ここで元に戻す */
  body.rs-scrolled .rs-hero2 {
    --rs-hd-h:   min(9.4vw, 180px);
    --rs-gnav-h: 56px;
  }
}
@media (min-width: 1000px) and (max-width: 1180px) {
  body.rs-scrolled .l-header .l-header__logo.has-image img { width: min(26vw, 300px); }
}
/* 動きを減らす設定では、ヘッダーの4要素も途中の変化を見せず即座に切り替える */
@media (min-width: 1000px) and (prefers-reduced-motion: reduce) {
  .l-header .l-header__left,
  .l-header .l-header__center,
  .l-header .l-header__logo.has-image img,
  .rs-headmark,
  .l-header .c-gnav__li > .c-gnav__a { transition: none !important; }
}
/* -----------------------------------------------------------
   43. 最終ブラッシュアップ（2026-08-30）
   文言とHTML構造は変えず、下層ページの奥行き・選択導線・
   ボタンの可読性・追従CTAの重なりをCSSだけで整える。
   ----------------------------------------------------------- */
:root {
  --rs-cta-orange: #B84D00;
  --rs-cta-orange-dark: #943E00;
  --rs-polish-line: rgba(0, 104, 183, .14);
  --rs-polish-shadow: 0 16px 42px rgba(8, 44, 100, .10);
}

/* 色付きの地をベタ塗りで終わらせず、写真を邪魔しない薄い光の層を足す。 */
body:not(.home) .rs-sec--pale,
body:not(.home) .rs-sec--light,
body:not(.home) .rs-sec--cream {
  background-image:
    radial-gradient(circle at 92% 8%, rgba(255,255,255,.72) 0, rgba(255,255,255,0) 31%),
    radial-gradient(circle at 7% 92%, rgba(0,104,183,.08) 0, rgba(0,104,183,0) 27%);
  background-repeat: no-repeat;
}
body:not(.home) .rs-sec--white,
body:not(.home) .rs-sec:not(.rs-sec--pale):not(.rs-sec--light):not(.rs-sec--light2):not(.rs-sec--cream):not(.rs-sec--navy):not(.rs-sec--panel) {
  background-image: radial-gradient(circle at 94% 5%, rgba(186,218,243,.28) 0, rgba(186,218,243,0) 28%);
  background-repeat: no-repeat;
}

/* 水色の外周＋白い面を、細いアクセントと奥行きのある面に仕上げる。 */
.rs-sec--panel > .wp-block-group__inner-container {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rs-polish-line);
  background: linear-gradient(180deg, #fff 0%, #fff 74%, #F7FBFE 100%);
  box-shadow: 0 10px 28px rgba(8,44,100,.07);
}
.rs-sec--panel > .wp-block-group__inner-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(24px, 5vw, 56px);
  right: clamp(24px, 5vw, 56px);
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: var(--rs-blue);
}

/* 共通の白い部品は、色と影の強さをそろえてページ間の品質を統一する。 */
.rs-card:not(.rs-businesscard),
.rs-pictrow__item,
.rs-photolist__item,
.rs-plan,
.rs-membercard {
  border-color: var(--rs-polish-line);
  background-image: linear-gradient(155deg, #fff 0%, #fff 76%, rgba(229,241,250,.68) 100%);
  box-shadow: var(--rs-polish-shadow);
}
.rs-linklist a {
  border-left: 3px solid transparent;
  padding-left: 18px;
  transition: background-color .2s ease, border-color .2s ease, padding-left .2s ease;
}
.rs-linklist a:hover,
.rs-linklist a:focus-visible {
  border-left-color: var(--rs-blue);
  padding-left: 24px;
  background: linear-gradient(90deg, rgba(229,241,250,.9), rgba(229,241,250,.2));
}

/* 「どれを選べばよいか迷ったら」
   2列の小さな横カードから、写真と文章にゆとりを持たせた3列の選択ガイドへ。 */
.rs-guidegrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 20px;
  align-items: stretch;
}
.rs-guidecard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid var(--rs-polish-line);
  border-radius: var(--rs-r);
  background: #fff;
  box-shadow: none;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.rs-guidecard:nth-child(7) { grid-column: 2; }
.rs-guidecard__photo {
  align-self: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0;
  border-radius: 0;
  background: var(--rs-blue-pale);
}
.rs-guidecard__photo img {
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.rs-guidecard__body {
  flex: 1 1 auto;
  justify-content: flex-start;
  width: 100%;
  padding: 20px 20px 18px;
}
.rs-guidecard__situation {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.8;
  text-wrap: pretty;
}
.rs-guidecard__situation::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--rs-blue-pale);
  color: var(--rs-blue);
  font-size: 14px;
  line-height: 1;
}
.rs-guidecard__link {
  width: 100%;
  min-height: 0;
  margin-top: auto;
  padding: 15px 0 0;
  border-top: 1px solid rgba(0,104,183,.18);
  border-radius: 0;
  background: transparent;
  color: var(--rs-navy-deep);
  font-size: 14px;
  line-height: 1.65;
  transition: color .2s ease, border-color .2s ease;
}
.rs-guidecard:hover {
  transform: translateY(-4px);
  border-color: rgba(0,104,183,.34);
  box-shadow: 0 14px 32px rgba(8,44,100,.10);
}
.rs-guidecard:hover .rs-guidecard__photo img { transform: scale(1.055); }
.rs-guidecard:hover .rs-guidecard__link {
  border-top-color: rgba(184,77,0,.34);
  background: transparent;
  color: var(--rs-cta-orange);
}

/* オレンジの装飾色は維持し、白文字が乗るボタン面だけ濃くする。 */
.rs-headctas__btn,
.rs-fixcta__item--mail,
a.rs-btn[href*="/contact/"]:not(.rs-btn--outline):not(.rs-btn--ghost),
.rs-btn:not(.rs-btn--outline):not(.rs-btn--ghost) > .wp-block-button__link[href*="/contact/"] {
  background-color: var(--rs-cta-orange) !important;
  color: #fff !important;
}
.rs-headctas__btn:hover,
.rs-fixcta__item--mail:hover,
a.rs-btn[href*="/contact/"]:not(.rs-btn--outline):not(.rs-btn--ghost):hover,
.rs-btn:not(.rs-btn--outline):not(.rs-btn--ghost) > .wp-block-button__link[href*="/contact/"]:hover {
  background-color: var(--rs-cta-orange-dark) !important;
}

/* 2026-09-01・本郷様ご指示。電話（赤）・メール（青）・LINE（緑）は白文字でそろえる。
   /contact/ 宛の大きな「無料で相談する」はオレンジのまま残すため、
   追従CTAのメールと3つ並びのメールだけを、上の !important より詳細な選択子で上書きする。 */
.rs-fixcta a.rs-fixcta__item--mail,
.rs-fixcta a.rs-fixcta__item--mail:visited,
.rs-btns.rs-btns--icon a.rs-btn[href*="/contact/"]:not(.rs-btn--outline):not(.rs-btn--line) {
  background-color: var(--rs-blue) !important;
  background-image: none !important;
  color: #fff !important;
}
.rs-fixcta a.rs-fixcta__item--mail:hover,
.rs-btns.rs-btns--icon a.rs-btn[href*="/contact/"]:not(.rs-btn--outline):not(.rs-btn--line):hover {
  background-color: var(--rs-navy-deep) !important;
  color: #fff !important;
}
/* 追従CTA共通の brightness で、指定したホバー色が変わらないようにする。 */
.rs-fixcta a.rs-fixcta__item--mail:hover { filter: none; }

/* 2026-09-01・本郷様ご指示。トップの小さな実績カードでも受賞マークだと伝わり、
   ボタンには見えないよう、青い No.1 をオレンジの月桂樹と王冠で囲む徽章にした。
   21.8pxでも葉が潰れにくいよう左右6枚ずつに絞り、全寸法を em にして文字と同率で伸縮させる。
   スマホで装飾ぶんだけ折り返さないよう、行末側の余白は同量の負マージンで相殺する。
   顧問実績帯の大きなNo.1は別デザインなので、ここでは .rs-stat__no1 だけを対象にする。 */
.rs-stat__no1 {
  position: relative; z-index: 0; isolation: isolate; display: inline-block;
  padding: 0 .68em .05em;
  margin: .48em -.68em .08em .06em;
  background: transparent;
  color: var(--rs-blue); line-height: 1; white-space: nowrap; vertical-align: baseline;
}
.rs-stat__no1::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; top: -.48em; width: 100%; height: 1.53em;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100'%3E%3Cpath d='M33 91C27 82 22 72 18 61C15 52 14 43 16 34C17 30 18 27 20 24' fill='none' stroke='%23F5820A' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='%23F5820A'%3E%3Cpath d='M0 0C4-2 9-2 12 0C9 2 4 2 0 0Z' transform='translate(29 82) rotate(-145)'/%3E%3Cpath d='M0 0C4-2 9-2 12 0C9 2 4 2 0 0Z' transform='translate(25 73) rotate(-35)'/%3E%3Cpath d='M0 0C4-2 9-2 12 0C9 2 4 2 0 0Z' transform='translate(21 64) rotate(-150)'/%3E%3Cpath d='M0 0C4-2 9-2 12 0C9 2 4 2 0 0Z' transform='translate(18 54) rotate(-38)'/%3E%3Cpath d='M0 0C4-2 9-2 12 0C9 2 4 2 0 0Z' transform='translate(16 44) rotate(-155)'/%3E%3Cpath d='M0 0C4-2 9-2 12 0C9 2 4 2 0 0Z' transform='translate(17 34) rotate(-48)'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100'%3E%3Cg transform='translate(40 0) scale(-1 1)'%3E%3Cpath d='M33 91C27 82 22 72 18 61C15 52 14 43 16 34C17 30 18 27 20 24' fill='none' stroke='%23F5820A' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='%23F5820A'%3E%3Cpath d='M0 0C4-2 9-2 12 0C9 2 4 2 0 0Z' transform='translate(29 82) rotate(-145)'/%3E%3Cpath d='M0 0C4-2 9-2 12 0C9 2 4 2 0 0Z' transform='translate(25 73) rotate(-35)'/%3E%3Cpath d='M0 0C4-2 9-2 12 0C9 2 4 2 0 0Z' transform='translate(21 64) rotate(-150)'/%3E%3Cpath d='M0 0C4-2 9-2 12 0C9 2 4 2 0 0Z' transform='translate(18 54) rotate(-38)'/%3E%3Cpath d='M0 0C4-2 9-2 12 0C9 2 4 2 0 0Z' transform='translate(16 44) rotate(-155)'/%3E%3Cpath d='M0 0C4-2 9-2 12 0C9 2 4 2 0 0Z' transform='translate(17 34) rotate(-48)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 27'%3E%3Cpath fill='%23F5820A' d='M0 19V6l14 8L21 0l7 14L42 6v13zm0 3h42v5H0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left center, right center, center .077em;
  background-size: .58em 1.45em, .58em 1.45em, .64em .411em;
}

/* 縦の流れと同じく、横の流れも最終番号は水色地＋濃い青文字にする。 */
.rs-flow--h .rs-flow__item:last-child::before {
  background: var(--rs-sky);
  color: var(--rs-navy-deep);
}

/* 1151〜1200pxでも94px幅の追従CTAが本文へ重ならないよう小型版を延長。 */
@media (min-width: 901px) and (max-width: 1200px) {
  .rs-fixcta__item { width: 78px; height: 78px; }
  .rs-fixcta__ico { width: 25px; height: 25px; }
  .rs-fixcta__label { font-size: 12px; }
}

@media (max-width: 900px) {
  .rs-guidegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-guidecard { grid-column: auto; }
  .rs-guidecard:nth-child(7) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 9px);
  }
  .rs-guidecard__body { padding: 18px 18px 17px; }
}

@media (max-width: 600px) {
  .rs-sec--panel > .wp-block-group__inner-container::before {
    left: 20px;
    right: 20px;
    height: 3px;
  }
  .rs-guidegrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rs-guidecard,
  .rs-guidecard:nth-child(7) {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }
  .rs-guidecard {
    display: flex;
    min-height: 0;
    border-radius: var(--rs-r);
  }
  .rs-guidecard__photo {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .rs-guidecard__body { padding: 18px 18px 17px; }
  .rs-guidecard__situation { font-size: 14.5px; line-height: 1.75; }
  .rs-guidecard__link { padding-top: 12px; font-size: 13.5px; }
}

@media (max-width: 375px) {
  .rs-guidecard__body { padding: 16px 15px; }
  .rs-guidecard__situation { font-size: 13.5px; }
  .rs-guidecard__link { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-guidecard,
  .rs-guidecard__photo img,
  .rs-linklist a { transition: none !important; }
  .rs-guidecard:hover,
  .rs-guidecard:hover .rs-guidecard__photo img { transform: none !important; }
}

/* -----------------------------------------------------------
   44. リスト表現の意味整理とサービス一覧の統合（2026-08-30）
       同じチェックマークを使い回さず、相談事例・手順・ケース別回答・
       準備物を、それぞれ内容に合う見せ方へ分ける。
   ----------------------------------------------------------- */

/* サービス詳細の「このようなご相談に対応しています」。
   選択欄ではないためチェックを外し、相談事例のカードとして見せる。 */
.rs-situationlist {
  max-width: var(--rs-w);
  margin: 34px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.rs-situationlist li {
  position: relative;
  min-height: 100%;
  padding: 18px 22px 18px 38px;
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-r-sm);
  background: #fff;
  box-shadow: 0 8px 22px rgba(8,44,100,.055);
  color: var(--rs-text);
  font-size: 16px;
  line-height: 1.85;
}
.rs-situationlist li::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rs-blue);
  box-shadow: 0 0 0 5px var(--rs-sky);
}

/* 補足情報は、白い箱を増やさず細いラインで読み分ける。 */
.rs-infolist {
  max-width: var(--rs-w-text);
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rs-line);
}
.rs-infolist li {
  position: relative;
  padding: 16px 18px 16px 30px;
  border-bottom: 1px solid var(--rs-line);
  font-size: 16px;
  line-height: 1.85;
}
.rs-infolist li::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 8px;
  width: 10px;
  height: 2px;
  background: var(--rs-blue);
}

/* 規約文の箇条書きは標準の黒丸に戻し、装飾より可読性を優先する。 */
.rs-plainlist {
  max-width: var(--rs-w-text);
  margin: 20px auto 28px;
  padding-left: 1.45em;
}
.rs-plainlist li {
  margin: 0 0 10px;
  padding-left: .2em;
  line-height: 1.9;
}
.rs-plainlist li::marker { color: var(--rs-blue); }

/* reason：実際に順序がある5項目は、番号付きの工程として見せる。 */
.rs-steplist {
  max-width: var(--rs-w);
  margin: 38px auto 0;
  padding: 0;
  list-style: none;
  counter-reset: rs-step;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.rs-steplist li {
  counter-increment: rs-step;
  position: relative;
  box-sizing: border-box;
  min-height: 100%;
  padding: 70px 18px 22px;
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-r);
  background: linear-gradient(180deg, var(--rs-blue-pale) 0 54px, #fff 54px 100%);
  box-shadow: 0 10px 26px rgba(8,44,100,.06);
  font-size: 15px;
  line-height: 1.8;
}
.rs-steplist li::before {
  content: counter(rs-step, decimal-leading-zero);
  position: absolute;
  top: 14px;
  left: 18px;
  color: var(--rs-blue);
  font-family: var(--rs-font-en);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1;
}

/* reason：質問と対応を一組にし、チェックリストではなくQ&Aとして示す。 */
.rs-casepairs {
  max-width: var(--rs-w);
  margin: 38px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.rs-casepairs__item {
  overflow: hidden;
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-r);
  background: #fff;
  box-shadow: 0 10px 26px rgba(8,44,100,.06);
}
.rs-casepairs dt,
.rs-casepairs dd { margin: 0; }
.rs-casepairs dt {
  position: relative;
  min-height: 100px;
  padding: 22px 22px 22px 56px;
  background: var(--rs-blue-pale);
  color: var(--rs-navy);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.75;
}
.rs-casepairs dt::before {
  content: "";
  position: absolute;
  top: 31px;
  left: 24px;
  width: 15px;
  height: 15px;
  border-top: 2px solid var(--rs-blue);
  border-right: 2px solid var(--rs-blue);
  transform: rotate(45deg);
}
.rs-casepairs dd {
  padding: 20px 22px 22px;
  color: var(--rs-text);
  font-size: 15.5px;
  line-height: 1.9;
}

/* flow：画像・品名・補足文を一枚の準備物カードへ統合する。 */
.rs-photorow.rs-photorow--tiles.rs-preparegrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.rs-preparegrid .rs-photorow__item { box-sizing: border-box; height: 100%; }
.rs-preparegrid .rs-photorow__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
}
.rs-preparegrid .rs-photorow__detail {
  width: 100%;
  margin: 15px 0 0;
  padding: 15px 3px 0;
  border-top: 1px solid var(--rs-line);
  color: var(--rs-text);
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
}
.rs-preparegrid > .rs-photorow__item:nth-child(7) {
  grid-column: 2;
}

/* service：7つの「利用場面」を既存カードへ収め、画像とリンクの重複を解消する。 */
.rs-service-guide-label {
  margin-top: 62px;
  text-align: center;
}
.rs-service-guide-title {
  max-width: 760px;
  margin-right: auto;
  margin-bottom: 34px;
  margin-left: auto;
  text-align: center;
}
.rs-copy-sec .rs-svcgrid.rs-svcgrid > .wp-block-group__inner-container,
.rs-copy-sec .rs-svcgrid.rs-svcgrid:not(:has(> .wp-block-group__inner-container)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rs-copy-sec .rs-card.rs-card--svc {
  box-sizing: border-box;
  grid-template-areas: "photo" "title" "situation" "text" "more";
  grid-template-rows: auto auto auto 1fr auto;
}
.rs-card--svc .rs-card__situation {
  grid-area: situation;
  position: relative;
  margin: 0 24px 16px;
  padding: 13px 15px 13px 34px;
  border: 1px solid rgba(10,77,163,.14);
  border-radius: 11px;
  background: var(--rs-blue-pale);
  color: var(--rs-navy);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.75;
}
.rs-card--svc .rs-card__situation::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rs-blue);
}
.rs-copy-sec .rs-svcgrid .rs-card--svc:nth-child(7) {
  grid-column: 2;
}
.rs-service-guide-lead {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 1050px) {
  .rs-steplist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-steplist li:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 7px);
  }
}

@media (max-width: 980px) {
  .rs-copy-sec .rs-svcgrid.rs-svcgrid > .wp-block-group__inner-container,
  .rs-copy-sec .rs-svcgrid.rs-svcgrid:not(:has(> .wp-block-group__inner-container)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rs-copy-sec .rs-svcgrid .rs-card--svc:nth-child(7) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 11px);
  }
}

@media (max-width: 768px) {
  .rs-situationlist { grid-template-columns: minmax(0, 1fr); }
  .rs-casepairs { grid-template-columns: minmax(0, 1fr); }
  .rs-photorow.rs-photorow--tiles.rs-preparegrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rs-preparegrid > .rs-photorow__item:nth-child(7) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 8px);
  }
}

@media (max-width: 600px) {
  .rs-steplist { grid-template-columns: minmax(0, 1fr); }
  .rs-steplist li,
  .rs-steplist li:nth-child(5) {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }
  .rs-photorow.rs-photorow--tiles.rs-preparegrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rs-preparegrid > .rs-photorow__item:nth-child(7) {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }
  .rs-copy-sec .rs-svcgrid.rs-svcgrid > .wp-block-group__inner-container,
  .rs-copy-sec .rs-svcgrid.rs-svcgrid:not(:has(> .wp-block-group__inner-container)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .rs-copy-sec .rs-svcgrid .rs-card--svc:nth-child(7) {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }
  .rs-card--svc .rs-card__situation { margin-right: 20px; margin-left: 20px; }
  .rs-casepairs dt { min-height: 0; padding: 19px 18px 19px 50px; }
  .rs-casepairs dt::before { top: 28px; left: 21px; }
  .rs-casepairs dd { padding: 18px; }
}

.rs-worry-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 12px;
  width: min(100%, 560px);
  margin: 22px auto 0;
}
a.rs-worry-contact__tel,
a.rs-worry-contact__mail {
  box-sizing: border-box;
  min-width: 0;
  min-height: 64px;
  padding: 10px 18px;
  border-radius: var(--rs-r-sm);
  box-shadow: var(--rs-shadow);
  color: var(--rs-white);
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
a.rs-worry-contact__tel,
a.rs-worry-contact__tel:visited {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--rs-red);
  color: var(--rs-white);
}
.rs-worry-contact__number {
  font-family: var(--rs-font-en);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .03em;
}
.rs-worry-contact__hours {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
}
a.rs-worry-contact__mail,
a.rs-worry-contact__mail:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rs-blue);
  color: var(--rs-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
@media (hover: hover) {
  a.rs-worry-contact__tel:hover {
    background: var(--rs-red-dark);
    color: var(--rs-white);
    transform: translateY(-1px);
  }
  a.rs-worry-contact__mail:hover {
    background: var(--rs-navy-deep);
    color: var(--rs-white);
    transform: translateY(-1px);
  }
}
@media (max-width: 600px) {
  .rs-worry-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 18px;
  }
  a.rs-worry-contact__tel,
  a.rs-worry-contact__mail {
    min-height: 58px;
    padding: 9px 16px;
  }
}