@charset "UTF-8";
/*==================================================
 * _module.scss — 変数・関数・mixin（住友税理士）
 * 検証BP: 390 / 768 / 1280（基準） / 2560
*================================================*/
/* ----------------------------------
 * カラー（:root が唯一の出どころ / 値はFigma MCP取得）
 * #081C2E 濃紺(テキスト基調) / #22389B ロイヤルブルー / #01B9FF シアンアクセント
---------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@600&text=0123456789-&display=swap");
:root {
  --mainColor: #081C2E;
  --subColor: #22389B;
  --accentColor: #01B9FF;
  --fontColor: #081C2E;
  --bgColor: #F4F4F4; /* TODO: グレー統一先 確認中（Q10-4）暫定 */
  --grayColor: #F4F4F4; /* テンプレ共通スタイル後方互換 */
  --whiteColor: #FFFFFF;
  /* FV白グラデ（上→下で透過） */
  --gradeWhite: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  /* サービス下層の料金CTAボックス（写真に重ねる青グラデ・Figma 765:5821。トークン外の生値のため変数化） */
  --gradePriceCta: linear-gradient(112.26deg, rgba(7, 136, 201, 0.9) 9.74%, rgba(17, 91, 164, 0.9) 99.28%);
}

.mainColor {
  color: var(--mainColor);
}

.subColor {
  color: var(--subColor);
}

.accentColor {
  color: var(--accentColor);
}

.bgMainColor {
  background-color: var(--mainColor);
}

.bgSubColor {
  background-color: var(--subColor);
}

.bgAccentColor {
  background-color: var(--accentColor);
}

/* ----------------------------------
 * フォント
 * 見出し/縦書き=Noto Serif JP（Google・可変） / 本文・UI=YuGothic（デバイス） / 英字=Cormorant Infant（Google）
 *
 * 明朝をWebフォント化した理由（2026-09-18 赤入れ C-05）:
 *   Figmaの指定は YuMincho だが、YuMincho は macOS 標準同梱ではなく未インストール端末が多い。
 *   実機（CDP実測）では Hiragino Mincho ProN にフォールバックしており、字幅が
 *   Figma 31.5px/桁 に対し 37px/桁 と広く、閲覧環境で見た目が変わる状態だった。
 *   → 全閲覧者で揃えるため Noto Serif JP（可変フォント1本＝ウェイト増でも追加DLなし）を先頭に置く。
 * 電話番号は Figma header 97:1947 が Inter Semi Bold 指定のため Inter（数字のみサブセット）。
---------------------------------- */
:root {
  --fontJp: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --fontMincho: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "游明朝", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  --fontEn: "Cormorant Infant", serif;
  --fontNum: "Cormorant Infant", serif;
  --fontTel: "Inter", var(--fontJp); /* ヘッダー電話番号のみ（Figma: Inter Semi Bold） */
}

/* 青背景の粒子ノイズ（Figma: ノイズ モノ / サイズ0.5 / 密度100% / #000000 25%）
   bgNoise.png = 各ピクセル黒・不透明度0〜25%ランダム。1px→0.5px表示でノイズサイズ0.5を再現。
   背景レイヤーの先頭に重ねて使う: background: $bgNoise, <元の背景>; */
.fontJp {
  font-family: var(--fontJp);
}

.fontMincho {
  font-family: var(--fontMincho);
}

.fontEn {
  font-family: var(--fontEn);
}

.fontNum {
  font-family: var(--fontNum);
}

/* ----------------------------------
 * フルイドスケーリング関数（規約§3）
 * Figma取得px値は既定で fluid($min, 取得値) に包む。$max=1280での取得値
 * $min=SP390での値（比率維持・下限12px。大見出しは個別指定）
---------------------------------- */
/* ----------------------------------
 * ブレイクポイント mixin（規約§3）
---------------------------------- */
/* ヘッダー専用BP: PCナビ一式（ロゴ+7項目+電話+CTA）は約1200px必要なため、
   1199px以下はハンバーガー（SPオーバーレイ）に切り替える */
/* ----------------------------------
 * 埋め込み動画などのアスペクト比フレーム
---------------------------------- */
/*==================================================
 * リセットcss
 *================================================*/
/* a modern css reset*/
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input,
select {
  vertical-align: middle;
}

li {
  list-style-type: none;
}

/*==================================================
 * フォント
 *================================================*/
.italic {
  font-style: italic;
}

html {
  font-size: 10px;
}

html,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.8;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div {
  line-height: 1.6;
  font-weight: 400;
}

.lh_xxl {
  line-height: 2.5;
}
.lh_xxl * {
  line-height: 2.5;
}

.lh_xl {
  line-height: 2;
}
.lh_xl * {
  line-height: 2;
}
@media only screen and (max-width: 767px) {
  .lh_xl {
    line-height: 1.8;
  }
  .lh_xl * {
    line-height: 1.8;
  }
}

.lh_l {
  line-height: 1.8;
}
.lh_l * {
  line-height: 1.8;
}

.lh_m {
  line-height: 1.5;
}
.lh_m * {
  line-height: 1.5;
}

.lh_s {
  line-height: 1.1;
}
.lh_s * {
  line-height: 1.1;
}

.lh_xs {
  line-height: 0.7;
}
.lh_xs * {
  line-height: 0.7;
}

.ls_xl {
  letter-spacing: 0.2em;
}

.ls_l {
  letter-spacing: 0.15em;
}

.ls_m {
  letter-spacing: 0.1em;
}

.ls_s {
  letter-spacing: 0.05em;
}

.ls_xs {
  letter-spacing: 0.01em;
}

.ls_0 {
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.thin {
  font-weight: 100;
}

.normal {
  font-weight: 400;
}

.ave {
  font-weight: 500 !important;
}

.bold {
  font-weight: 600 !important;
}

.bold800 {
  font-weight: 800 !important;
}

.bold900 {
  font-weight: 900 !important;
}

.nowrap {
  white-space: nowrap;
}

.white {
  color: #fff;
}

.black {
  color: #333;
}

.gray {
  color: #686868;
}

.red {
  color: #EC462F !important;
}

.fsL {
  font-size: 100px;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsL {
    font-size: 64px;
  }
}
@media only screen and (max-width: 767px) {
  .fsL {
    font-size: 42px;
  }
}

.fsL2 {
  font-size: 64px;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsL2 {
    font-size: 42px;
  }
}
@media only screen and (max-width: 767px) {
  .fsL2 {
    font-size: 36px;
  }
}

.fsL3 {
  font-size: 56px;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsL3 {
    font-size: 42px;
  }
}
@media only screen and (max-width: 767px) {
  .fsL3 {
    font-size: 36px;
  }
}

.fsL4 {
  font-size: 42px;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsL4 {
    font-size: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .fsL4 {
    font-size: 24px;
  }
}

.fsM {
  font-size: 34px;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsM {
    font-size: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .fsM {
    font-size: 21px;
  }
}

.fsM2 {
  font-size: 28px;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsM2 {
    font-size: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .fsM2 {
    font-size: 20px;
  }
}

.fsM3 {
  font-size: 24px;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsM3 {
    font-size: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .fsM3 {
    font-size: 17px;
  }
}

.fsM35 {
  font-size: 21px;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsM35 {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .fsM35 {
    font-size: 16px;
  }
}

.fsM4 {
  font-size: 18px;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsM4 {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .fsM4 {
    font-size: 14px;
  }
}

.fsM5 {
  font-size: 16px;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsM5 {
    font-size: 14px;
  }
}
@media only screen and (max-width: 767px) {
  .fsM5 {
    font-size: 14px;
  }
}

.fsS {
  font-size: 14px;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsS {
    font-size: 13px;
  }
}
@media only screen and (max-width: 767px) {
  .fsS {
    font-size: 12px !important;
  }
}

.fsS2 {
  font-size: 13px;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsS2 {
    font-size: 12px;
  }
}
@media only screen and (max-width: 767px) {
  .fsS2 {
    font-size: 12px;
  }
}

.fsS3 {
  font-size: 12px;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsS3 {
    font-size: 11px;
  }
}
@media only screen and (max-width: 767px) {
  .fsS3 {
    font-size: 11px;
  }
}

.fsS4 {
  font-size: 10px;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsS4 {
    font-size: 9px;
  }
}
@media only screen and (max-width: 767px) {
  .fsS4 {
    font-size: 9px;
  }
}

@media only screen and (max-width: 767px) {
  .fsSpM5 {
    font-size: 14px;
  }
}

@media only screen and (max-width: 767px) {
  .fsSpS {
    font-size: 12px;
  }
}

.h000 {
  font-size: 100px;
}

.h00 {
  font-size: 64px;
}

.h0 {
  font-size: 42px;
}

.h1 {
  font-size: 32px;
}

.h2 {
  font-size: 28px;
}

.h3 {
  font-size: 24px;
}

.h4 {
  font-size: 18px;
}

.h5 {
  font-size: 16px;
}

.text_m {
  font-size: 14px;
}

.text_sm {
  font-size: 13px;
}

.text_s {
  font-size: 12px;
}

.text_ss {
  font-size: 10px;
}

@media screen and (min-width: 768px) and (max-width: 959px) {
  body {
    font-size: 14px;
  }
  .h000 {
    font-size: 64px;
  }
  .h00 {
    font-size: 36px;
  }
  .h0 {
    font-size: 25px;
  }
  .h1 {
    font-size: 24px;
  }
  .h2 {
    font-size: 24px;
  }
  .h3 {
    font-size: 20px;
  }
  .h4 {
    font-size: 15px;
  }
  .h5 {
    font-size: 14px;
  }
  .text_m {
    font-size: 13px;
  }
  .text_s {
    font-size: 11px;
  }
}
@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }
  .h000 {
    font-size: 42px;
  }
  .h00 {
    font-size: 36px;
  }
  .h0 {
    font-size: 24px;
  }
  .h1 {
    font-size: 22px;
  }
  .h2 {
    font-size: 20px;
  }
  .h3 {
    font-size: 17px;
  }
  .h4 {
    font-size: 15px;
  }
  .h5 {
    font-size: 15px;
  }
  .text_m {
    font-size: 13px;
  }
  .text_s {
    font-size: 11px;
  }
}
/*==================================================
 * 独自リセット
 *================================================*/
/*リセット関係*/
*,
*:before,
*:after {
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body {
  width: 100%;
  /* 横スクロール防止（clipはsticky等に副作用なし）。右端ブリード演出の保険 */
  overflow-x: clip;
}

ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 0;
  font-weight: 100;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

hr {
  margin: 10px auto;
}

a:hover {
  text-decoration: none;
  /* 赤入れ C-04:
     テンプレ由来の `color: inherit` は詳細度 (0,1,1) で、Blockクラスの color (0,1,0) に勝つ。
     そのため白抜きボタン類がホバーした瞬間だけ親の色（濃紺）に落ち、紺地に紺文字で
     読めなくなっていた。全13ページ・約20要素（Header__CtaBtn / Header__MegaLink /
     各ページの __Btn 類）で同じ症状。素の a の色は上の `a { color: inherit }` が担うため、
     ここでの再指定は不要。 */
}

/*==================================================
 * 独自クラス（どのサイトでも）
 *================================================*/
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.remove {
  text-indent: -9999px;
  overflow: hidden;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  height: 0;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relapadding {
  padding-right: 80px;
}

.inline {
  display: inline;
}

.block {
  display: block;
}

.inlineBlock {
  display: inline-block;
}

.inlineFlex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.inlineBlockUl li {
  display: inline-block;
}

.disNone {
  display: none !important;
}

.bgCenter {
  background-position: center center;
  background-size: cover;
}

.opa {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 1;
}

a:hover .opa {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 0.7;
}

.overHidden {
  overflow: hidden;
}

.tra,
.tra:hover {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.verticalMiddle {
  vertical-align: middle;
}

.verticalBottom {
  vertical-align: bottom;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-justify {
  text-align: justify;
}

@media only screen and (max-width: 767px) {
  .text-center-sp {
    text-align: center;
  }
}

@media only screen and (max-width: 767px) {
  .text-right-sp {
    text-align: right;
  }
}

@media only screen and (max-width: 767px) {
  .text-left-sp {
    text-align: left;
  }
}

.linkA {
  text-decoration: underline;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: var(--mainColor);
}
.linkA:hover {
  color: var(--mainColor);
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
  .notTab {
    display: none !important;
  }
}
@media screen and (min-width: 960px) {
  .tab {
    display: none !important;
  }
}
/*余白*/
.m0 {
  margin: 0;
}

.p0 {
  padding: 0;
}

.mtAuto {
  margin-top: auto;
}

.mrAuto {
  margin-right: auto;
}

.mbAuto {
  margin-bottom: auto;
}

.mlAuto {
  margin-left: auto;
}

.mt0 {
  margin-top: 0 !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb5 {
  margin-bottom: 5px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
  .mb30 {
    margin-bottom: 20px;
  }
}

.mb40 {
  margin-bottom: 40px;
}
@media only screen and (max-width: 767px) {
  .mb40 {
    margin-bottom: 30px;
  }
}

.mb50 {
  margin-bottom: 50px;
}
@media only screen and (max-width: 767px) {
  .mb50 {
    margin-bottom: 30px;
  }
}

.mb60 {
  margin-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .mb60 {
    margin-bottom: 40px;
  }
}

.mb70 {
  margin-bottom: 70px;
}
@media only screen and (max-width: 767px) {
  .mb70 {
    margin-bottom: 40px;
  }
}

.mb80 {
  margin-bottom: 80px;
}
@media only screen and (max-width: 767px) {
  .mb80 {
    margin-bottom: 40px;
  }
}

.mb90 {
  margin-bottom: 90px;
}
@media only screen and (max-width: 767px) {
  .mb90 {
    margin-bottom: 50px;
  }
}

.mb100 {
  margin-bottom: 100px;
}
@media only screen and (max-width: 767px) {
  .mb100 {
    margin-bottom: 50px;
  }
}

.mb200 {
  margin-bottom: 200px;
}
@media only screen and (max-width: 767px) {
  .mb200 {
    margin-bottom: 70px;
  }
}

.ml0 {
  margin-left: 0 !important;
}

.ml05 {
  margin-left: 0.5em;
}

.ml1 {
  margin-left: 1em;
}

.ml2 {
  margin-left: 2em;
}

.ml3 {
  margin-left: 3em;
}

@media only screen and (max-width: 767px) {
  .mlSp0 {
    margin-left: 0;
  }
  .mlSp1 {
    margin-left: 1em;
  }
  .mlSp2 {
    margin-left: 2em;
  }
  .mlSp3 {
    margin-left: 3em;
  }
}
.mtL {
  margin-top: 30%;
}

.mtL2 {
  margin-top: 25%;
}

.mtL3 {
  margin-top: 20%;
}

.mtL4 {
  margin-top: 15%;
}

.mtM {
  margin-top: 10%;
}

.mtM2 {
  margin-top: 7.5%;
}

.mtM3 {
  margin-top: 5%;
}

.mtS {
  margin-top: 3.5%;
}

.mtS2 {
  margin-top: 2%;
}

.mtS3 {
  margin-top: 1%;
}

@media only screen and (max-width: 767px) {
  .mtSpL {
    margin-top: 30%;
  }
  .mtSpL2 {
    margin-top: 25%;
  }
  .mtSpL3 {
    margin-top: 20%;
  }
  .mtSpL4 {
    margin-top: 15%;
  }
  .mtSpM {
    margin-top: 10%;
  }
  .mtSpM2 {
    margin-top: 7.5%;
  }
  .mtSpM3 {
    margin-top: 5%;
  }
  .mtSpS {
    margin-top: 3.5%;
  }
  .mtSpS2 {
    margin-top: 2%;
  }
  .mtSpS3 {
    margin-top: 1%;
  }
}
.mbL {
  margin-bottom: 30%;
}

.mbL2 {
  margin-bottom: 25%;
}

.mbL3 {
  margin-bottom: 20%;
}

.mbL4 {
  margin-bottom: 15%;
}

.mbM {
  margin-bottom: 10%;
}

.mbM2 {
  margin-bottom: 7.5%;
}

.mbM3 {
  margin-bottom: 5%;
}

.mbS {
  margin-bottom: 3.5%;
}

.mbS2 {
  margin-bottom: 2%;
}

.mbS3 {
  margin-bottom: 1%;
}

@media only screen and (max-width: 767px) {
  .mbSpL {
    margin-bottom: 30%;
  }
  .mbSpL2 {
    margin-bottom: 25%;
  }
  .mbSpL3 {
    margin-bottom: 20%;
  }
  .mbSpL4 {
    margin-bottom: 15%;
  }
  .mbSpM {
    margin-bottom: 10%;
  }
  .mbSpM2 {
    margin-bottom: 7.5%;
  }
  .mbSpM3 {
    margin-bottom: 5%;
  }
  .mbSpS {
    margin-bottom: 3.5%;
  }
  .mbSpS2 {
    margin-bottom: 2%;
  }
  .mbSpS3 {
    margin-bottom: 1%;
  }
}
.pt0 {
  padding-top: 0 !important;
}

.pt5 {
  padding-top: 5px;
}

.pt10 {
  padding-top: 10px;
}

.pt20 {
  padding-top: 20px;
}

.pt30 {
  padding-top: 30px;
}
@media only screen and (max-width: 767px) {
  .pt30 {
    padding-top: 20px;
  }
}

.pt40 {
  padding-top: 40px;
}
@media only screen and (max-width: 767px) {
  .pt40 {
    padding-top: 30px;
  }
}

.pt50 {
  padding-top: 50px;
}
@media only screen and (max-width: 767px) {
  .pt50 {
    padding-top: 30px;
  }
}

.pt60 {
  padding-top: 60px;
}
@media only screen and (max-width: 767px) {
  .pt60 {
    padding-top: 40px;
  }
}

.pt70 {
  padding-top: 70px;
}
@media only screen and (max-width: 767px) {
  .pt70 {
    padding-top: 40px;
  }
}

.pt80 {
  padding-top: 80px;
}
@media only screen and (max-width: 767px) {
  .pt80 {
    padding-top: 40px;
  }
}

.pt90 {
  padding-top: 90px;
}
@media only screen and (max-width: 767px) {
  .pt90 {
    padding-top: 50px;
  }
}

.pt100 {
  padding-top: 100px;
}
@media only screen and (max-width: 767px) {
  .pt100 {
    padding-top: 50px;
  }
}

.pt200 {
  padding-top: 200px;
}
@media only screen and (max-width: 767px) {
  .pt200 {
    padding-top: 70px;
  }
}

.pb0 {
  padding-bottom: 0 !important;
}

.pb5 {
  padding-bottom: 5px;
}

.pb10 {
  padding-bottom: 10px;
}

.pb20 {
  padding-bottom: 20px;
}

.pb30 {
  padding-bottom: 30px;
}
@media only screen and (max-width: 767px) {
  .pb30 {
    padding-bottom: 20px;
  }
}

.pb40 {
  padding-bottom: 40px;
}
@media only screen and (max-width: 767px) {
  .pb40 {
    padding-bottom: 30px;
  }
}

.pb50 {
  padding-bottom: 50px;
}
@media only screen and (max-width: 767px) {
  .pb50 {
    padding-bottom: 30px;
  }
}

.pb60 {
  padding-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .pb60 {
    padding-bottom: 40px;
  }
}

.pb70 {
  padding-bottom: 70px;
}
@media only screen and (max-width: 767px) {
  .pb70 {
    padding-bottom: 40px;
  }
}

.pb80 {
  padding-bottom: 80px;
}
@media only screen and (max-width: 767px) {
  .pb80 {
    padding-bottom: 40px;
  }
}

.pb90 {
  padding-bottom: 90px;
}
@media only screen and (max-width: 767px) {
  .pb90 {
    padding-bottom: 50px;
  }
}

.pb100 {
  padding-bottom: 100px;
}
@media only screen and (max-width: 767px) {
  .pb100 {
    padding-bottom: 50px;
  }
}

.pb200 {
  padding-bottom: 200px;
}
@media only screen and (max-width: 767px) {
  .pb200 {
    padding-bottom: 70px;
  }
}

.pl0 {
  padding-left: 0 !important;
}

.pl1 {
  padding-left: 1em;
}

.pl2 {
  padding-left: 2em;
}

.pl3 {
  padding-left: 3em;
}

@media only screen and (max-width: 767px) {
  .plSp0 {
    padding-left: 0;
  }
  .plSp1 {
    padding-left: 1em;
  }
  .plSp2 {
    padding-left: 2em;
  }
  .plSp3 {
    padding-left: 3em;
  }
}
.pbL {
  padding-bottom: 30%;
}

.pbL2 {
  padding-bottom: 25%;
}

.pbL3 {
  padding-bottom: 20%;
}

.pbL4 {
  padding-bottom: 15%;
}

.pbM {
  padding-bottom: 10%;
}

.pbM2 {
  padding-bottom: 7.5%;
}

.pbM3 {
  padding-bottom: 5%;
}

.pbS {
  padding-bottom: 3.5%;
}

.pbS2 {
  padding-bottom: 2%;
}

.pbS3 {
  padding-bottom: 1%;
}

@media only screen and (max-width: 767px) {
  .pbSpL {
    padding-bottom: 30%;
  }
  .pbSpL2 {
    padding-bottom: 25%;
  }
  .pbSpL3 {
    padding-bottom: 20%;
  }
  .pbSpL4 {
    padding-bottom: 15%;
  }
  .pbSpM {
    padding-bottom: 10%;
  }
  .pbSpM2 {
    padding-bottom: 7.5%;
  }
  .pbSpM3 {
    padding-bottom: 5%;
  }
  .pbSpS {
    padding-bottom: 3.5%;
  }
  .pbSpS2 {
    padding-bottom: 2%;
  }
  .pbSpS3 {
    padding-bottom: 1%;
  }
}
/*flex・グリッド系*/
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.justCenter {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.justEnd {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.justBetween {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media only screen and (max-width: 767px) {
  .justBetweenSp {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.alignCenter {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.alignStart {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.alignEnd {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.flexReverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-flow: row-reverse;
          flex-flow: row-reverse;
}

.flexWrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.col {
  padding-left: 15px;
  padding-right: 15px;
}

.flexCol {
  width: 100%;
}

.col1 {
  width: 100%;
}

.col2 {
  width: 50%;
}

.col3 {
  width: 33.3333%;
}

.col-3 {
  width: 66.6666%;
}

.col4 {
  width: 25%;
}

.col-4 {
  width: 75%;
}

.col5 {
  width: 20%;
}

.col-5 {
  width: 80%;
}

.col6 {
  width: 16.666%;
}

.col-6 {
  width: 83.333%;
}

.col3-2 {
  width: 60%;
}

.col-3-2 {
  width: 40%;
}

@media screen and (max-width: 767px) {
  .flexSplit {
    width: 100%;
  }
  .flexPc {
    display: block;
  }
  .flexWrapSp {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .bgFixed {
    background-attachment: unset;
  }
  .flexReverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row;
            flex-flow: row;
  }
  .flexSp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .colSp1 {
    width: 100%;
  }
  .colSp2 {
    width: 50%;
  }
  .colSp3 {
    width: 33.3333%;
  }
  .colSp-3 {
    width: 66.6666%;
  }
  .colSp4 {
    width: 25%;
  }
  .colSp-4 {
    width: 75%;
  }
  .colSp5 {
    width: 20%;
  }
  .colSp-5 {
    width: 80%;
  }
  .colSp6 {
    width: 16.666%;
  }
  .colSp-6 {
    width: 83.333%;
  }
  .colSp3-2 {
    width: 60%;
  }
  .colSp-3-2 {
    width: 40%;
  }
}
@media screen and (min-width: 768px) and (max-width: 959px) {
  .colMd1 {
    width: 100%;
  }
  .colMd2 {
    width: 50%;
  }
  .colMd3 {
    width: 33.3333%;
  }
  .colMd-3 {
    width: 66.6666%;
  }
  .colMd4 {
    width: 25%;
  }
  .colMd-4 {
    width: 75%;
  }
  .colMd5 {
    width: 20%;
  }
  .colMd-5 {
    width: 80%;
  }
  .colMd6 {
    width: 16.666%;
  }
  .colMd-6 {
    width: 83.333%;
  }
  .colMd3-2 {
    width: 60%;
  }
  .colMd-3-2 {
    width: 40%;
  }
}
.grid {
  display: grid;
}

.grid-colum-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-colum-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-colum-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 767px) {
  .grid-colum-1s-sp {
    grid-template-columns: 0.85fr;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .grid-colum-1-sp {
    grid-template-columns: 1fr;
  }
  .grid-colum-2-sp {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-colum-3-sp {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-colum-4-sp {
    grid-template-columns: repeat(4, 1fr);
  }
}
.gap-5 {
  gap: 5px;
}

.gap-10 {
  gap: 10px;
}

.gap-x-10 {
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
}

.gap-y-10 {
  row-gap: 10px;
}

@media only screen and (max-width: 959px) {
  .gap-10 {
    gap: 5px;
  }
  .gap-x-10 {
    -webkit-column-gap: 5px;
       -moz-column-gap: 5px;
            column-gap: 5px;
  }
  .gap-y-10 {
    row-gap: 5px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-20 {
  gap: 20px;
}

.gap-x-20 {
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
}

.gap-y-20 {
  row-gap: 20px;
}

@media only screen and (max-width: 959px) {
  .gap-20 {
    gap: 10px;
  }
  .gap-x-20 {
    -webkit-column-gap: 10px;
       -moz-column-gap: 10px;
            column-gap: 10px;
  }
  .gap-y-20 {
    row-gap: 10px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-30 {
  gap: 30px;
}

.gap-x-30 {
  -webkit-column-gap: 30px;
     -moz-column-gap: 30px;
          column-gap: 30px;
}

.gap-y-30 {
  row-gap: 30px;
}

@media only screen and (max-width: 959px) {
  .gap-30 {
    gap: 15px;
  }
  .gap-x-30 {
    -webkit-column-gap: 15px;
       -moz-column-gap: 15px;
            column-gap: 15px;
  }
  .gap-y-30 {
    row-gap: 15px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-40 {
  gap: 40px;
}

.gap-x-40 {
  -webkit-column-gap: 40px;
     -moz-column-gap: 40px;
          column-gap: 40px;
}

.gap-y-40 {
  row-gap: 40px;
}

@media only screen and (max-width: 959px) {
  .gap-40 {
    gap: 20px;
  }
  .gap-x-40 {
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
  }
  .gap-y-40 {
    row-gap: 20px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-50 {
  gap: 50px;
}

.gap-x-50 {
  -webkit-column-gap: 50px;
     -moz-column-gap: 50px;
          column-gap: 50px;
}

.gap-y-50 {
  row-gap: 50px;
}

@media only screen and (max-width: 959px) {
  .gap-50 {
    gap: 25px;
  }
  .gap-x-50 {
    -webkit-column-gap: 25px;
       -moz-column-gap: 25px;
            column-gap: 25px;
  }
  .gap-y-50 {
    row-gap: 25px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-60 {
  gap: 60px;
}

.gap-x-60 {
  -webkit-column-gap: 60px;
     -moz-column-gap: 60px;
          column-gap: 60px;
}

.gap-y-60 {
  row-gap: 60px;
}

@media only screen and (max-width: 959px) {
  .gap-60 {
    gap: 30px;
  }
  .gap-x-60 {
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
  }
  .gap-y-60 {
    row-gap: 30px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-70 {
  gap: 70px;
}

.gap-x-70 {
  -webkit-column-gap: 70px;
     -moz-column-gap: 70px;
          column-gap: 70px;
}

.gap-y-70 {
  row-gap: 70px;
}

@media only screen and (max-width: 959px) {
  .gap-70 {
    gap: 35px;
  }
  .gap-x-70 {
    -webkit-column-gap: 35px;
       -moz-column-gap: 35px;
            column-gap: 35px;
  }
  .gap-y-70 {
    row-gap: 35px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-80 {
  gap: 80px;
}

.gap-x-80 {
  -webkit-column-gap: 80px;
     -moz-column-gap: 80px;
          column-gap: 80px;
}

.gap-y-80 {
  row-gap: 80px;
}

@media only screen and (max-width: 959px) {
  .gap-80 {
    gap: 40px;
  }
  .gap-x-80 {
    -webkit-column-gap: 40px;
       -moz-column-gap: 40px;
            column-gap: 40px;
  }
  .gap-y-80 {
    row-gap: 40px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-90 {
  gap: 90px;
}

.gap-x-90 {
  -webkit-column-gap: 90px;
     -moz-column-gap: 90px;
          column-gap: 90px;
}

.gap-y-90 {
  row-gap: 90px;
}

@media only screen and (max-width: 959px) {
  .gap-90 {
    gap: 45px;
  }
  .gap-x-90 {
    -webkit-column-gap: 45px;
       -moz-column-gap: 45px;
            column-gap: 45px;
  }
  .gap-y-90 {
    row-gap: 45px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-100 {
  gap: 100px;
}

.gap-x-100 {
  -webkit-column-gap: 100px;
     -moz-column-gap: 100px;
          column-gap: 100px;
}

.gap-y-100 {
  row-gap: 100px;
}

@media only screen and (max-width: 959px) {
  .gap-100 {
    gap: 50px;
  }
  .gap-x-100 {
    -webkit-column-gap: 50px;
       -moz-column-gap: 50px;
            column-gap: 50px;
  }
  .gap-y-100 {
    row-gap: 50px;
  }
}
/*横幅*/
@media only screen and (max-width: 767px) {
  .spPadding {
    padding-inline: 15px;
  }
}

.w100 {
  width: 100%;
}

:root {
  --cnt: 1280px;
  --interval: 60px;
}

.cnt {
  width: 100%;
  max-width: calc(var(--cnt) - var(--interval) * 2);
  padding-inline: 15px;
  margin-inline: auto;
}

.cntS {
  max-width: calc(var(--cnt) - var(--interval) * 8);
  margin-inline: auto;
  padding-inline: 15px;
}
@media only screen and (max-width: 767px) {
  .cntS.spPadding {
    padding-inline: 30px;
  }
  .cnt .cntS {
    padding-inline: 0;
  }
  .cntL .cntS {
    padding-inline: 0;
  }
}

.cntM {
  max-width: calc(var(--cnt) - var(--interval) * 6);
  margin-inline: auto;
  padding-inline: 15px;
}

.cntL {
  max-width: calc(var(--cnt) - var(--interval) * 4);
  margin-inline: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.cntML {
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: 15px;
}

.cntXl {
  max-width: 1280px;
  margin-right: 2%;
  margin-left: 2%;
}
@media screen and (min-width: 1740px) {
  .cntXl {
    margin-inline: auto;
  }
}

.cntWide {
  max-width: 1280px;
  margin-inline: auto;
}

.cntWideL {
  max-width: 1920px;
  margin-inline: auto;
}

.paNone {
  padding: 0;
}

.rw {
  margin-inline: -15px;
}

:root {
  --spaceSizeS: clamp(25px, 10vw, 50px);
  --spaceSize: clamp(50px, 10vw, 100px);
  --spaceSizeWide: clamp(90px, 15vw, 180px);
}

.padding {
  padding-top: var(--spaceSize);
  padding-bottom: var(--spaceSize);
}

.paddingS {
  padding-top: var(--spaceSizeS);
  padding-bottom: var(--spaceSizeS);
}

.paddingW {
  padding-top: var(--spaceSizeWide);
  padding-bottom: var(--spaceSizeWide);
}

.margin {
  margin-top: var(--spaceSize);
  margin-bottom: var(--spaceSize);
}

.marginS {
  margin-top: var(--spaceSizeS);
  margin-bottom: var(--spaceSizeS);
}

.marginW {
  margin-top: var(--spaceSizeWide);
  margin-bottom: var(--spaceSizeWide);
}

.marginInlineNone {
  margin-inline: 0 !important;
}

.marginCenter {
  margin-inline: auto;
}

@media only screen and (max-width: 767px) {
  .spMargin {
    margin-block: 100px;
  }
}

/*背景系*/
.bgImg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.bgImgHeight {
  padding-bottom: 67%;
}

.bgImgParallax {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.bgFixed {
  background-attachment: fixed;
}
@media only screen and (max-width: 767px) {
  .bgFixed {
    background-attachment: inherit;
  }
}

.bgImgCircle {
  border-radius: 50%;
  padding-bottom: 100%;
}

.bgBlur {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.bgBlur:before {
  content: "";
  background: inherit;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
}

.bgWhite {
  background-color: #ffffff;
}

.bgZoom {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.bgZoomImg {
  position: absolute;
  width: 100%;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
          transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  will-change: transform;
  height: 100%;
  top: 0;
  left: 0;
}

a:hover .bgZoomImg {
  -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.9);
          transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.9);
}

.bgZoomText {
  position: relative;
  pointer-events: none;
  width: 100%;
  z-index: 1;
}

/*テーブルboostrap*/
table {
  border-collapse: collapse;
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}
.table th {
  text-align: inherit;
  font-weight: normal;
}
.table td,
.table th {
  padding: 1.2rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #e8edf0;
}

.table-bordered {
  border: 1px solid #dee2e6;
}
.table-bordered td,
.table-bordered th {
  border: 1px solid #dee2e6;
}

/*マスクアニメーション*/
.maskCenter .maskWrap {
  margin-left: auto;
  margin-right: auto;
}

.maskWrap {
  display: table;
  overflow: hidden;
}

.maskWrap .mask {
  display: table;
  position: relative;
  margin-bottom: 0.25em;
  left: -100%;
  overflow: hidden;
}

.maskWrap .maskBg {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #ae9373;
}

/*角丸*/
.radiusS {
  border-radius: 10px;
}

.radiusM {
  border-radius: 16px;
}
@media only screen and (max-width: 767px) {
  .radiusM {
    border-radius: 8px;
  }
}

.radiusL {
  border-radius: 20px;
}

.radiusXl {
  border-radius: 30px;
}

.radiusCircle {
  border-radius: 50%;
}

/*影*/
.shadowS {
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}
@media only screen and (max-width: 767px) {
  .shadowS {
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
  }
}

.shadowM {
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
          box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
}
@media only screen and (max-width: 767px) {
  .shadowM {
    -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
            box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  }
}

.shadowL {
  -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
          box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
@media only screen and (max-width: 767px) {
  .shadowL {
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 30px 90px;
            box-shadow: rgba(0, 0, 0, 0.2) 0px 30px 90px;
  }
}

.shadowLL {
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
          box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
}

/*マウスストーカー*/
/*==================================================
 * 独自クラス（このサイトだけ）
 *================================================*/
.zIndex-1 {
  z-index: 1;
}

.zIndex-2 {
  z-index: 2;
}

.zIndex-3 {
  z-index: 3;
}

.zIndex-4 {
  z-index: 4;
}

.zIndex-5 {
  z-index: 5;
}

.zIndex-6 {
  z-index: 6;
}

.zIndex-7 {
  z-index: 7;
}

.zIndex-8 {
  z-index: 8;
}

.zIndex-9 {
  z-index: 9;
}

.zIndex-10 {
  z-index: 10;
}

@media only screen and (max-width: 767px) {
  .zIndex-1_sp {
    z-index: 1;
  }
  .zIndex-2_sp {
    z-index: 2;
  }
  .zIndex-3_sp {
    z-index: 3;
  }
  .zIndex-4_sp {
    z-index: 4;
  }
  .zIndex-5_sp {
    z-index: 5;
  }
  .zIndex-6_sp {
    z-index: 6;
  }
  .zIndex-7_sp {
    z-index: 7;
  }
  .zIndex-8_sp {
    z-index: 8;
  }
  .zIndex-9_sp {
    z-index: 9;
  }
  .zIndex-10_sp {
    z-index: 10;
  }
}
/*==================================================
 * header
 *================================================*/
html.open {
  overflow-y: hidden;
}

:root {
  --menuTrigeHeight: 22px;
}

@-webkit-keyframes active-menu-bar02 {
  100% {
    height: 0;
  }
}
@keyframes active-menu-bar02 {
  100% {
    height: 0;
  }
}
/*==================================================
 * footer
 *================================================*/
/*==================================================
 * トップページ
 *================================================*/
/*==================================================
 * 下層ページ
 *================================================*/
/*共通部分------------------------------------*/
/*パンくず*/
.breadcrumbs {
  margin-block: 10px;
}
@media only screen and (max-width: 767px) {
  .breadcrumbs {
    margin-block: 3px;
  }
}

.breadcrumbsInner span {
  font-size: 14px;
  font-family: var(--fontJp);
}
@media only screen and (max-width: 767px) {
  .breadcrumbsInner span {
    font-size: 11px;
  }
}

/*パンくず終わり*/
/*新着情報------------------------------------*/
.topicsItemBox > div {
  gap: 5px 10px;
}

.topicsItemImgBox {
  overflow: hidden;
}
.topicsItemImgBox img {
  aspect-ratio: 2/1.32;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.topicsCard:hover .topicsItemImgBox img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.topTopicsItemTitle {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.topicsCard:hover .topTopicsItemTitle {
  color: var(--subColor);
}

/*お問い合わせページ（Snow Monkey Forms のフォーム本文に .cform が付く）------------------------------------*/
.cform {
  width: 100%;
  margin-inline: auto;
}
.cform tr {
  margin-bottom: 2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.cform tr th,
.cform tr td {
  letter-spacing: 0.01em;
  display: block;
  width: 100%;
  text-align: left;
}
.cform tr th {
  margin-bottom: 0.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-right: 15px;
  width: 230px;
}
.cform tr td {
  width: calc(100% - 230px);
}
.cform tr td + td {
  margin-top: 3%;
}
@media only screen and (max-width: 767px) {
  .cform tr {
    display: block;
  }
  .cform tr th {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    width: 100%;
  }
  .cform tr td {
    width: 100%;
  }
}
.cform label {
  cursor: pointer;
  margin-right: 1.5em;
}
.cform label span {
  vertical-align: middle;
  line-height: 1;
  display: inline-block;
}
.cform select {
  cursor: pointer;
}
.cform option,
.cform textarea,
.cform select,
.cform input[type=text],
.cform input[type=email],
.cform input[type=search],
.cform input[type=url] {
  background-color: #F9F9F9;
  width: 100%;
  border: none;
  border-radius: 2px;
  padding: 1em;
  font-size: 15px;
  letter-spacing: 0.07em;
  line-height: 1.4;
  border-radius: 7px;
}
.cform option::-webkit-input-placeholder,
.cform textarea::-webkit-input-placeholder,
.cform select::-webkit-input-placeholder,
.cform input[type=text]::-webkit-input-placeholder,
.cform input[type=email]::-webkit-input-placeholder,
.cform input[type=search]::-webkit-input-placeholder,
.cform input[type=url]::-webkit-input-placeholder {
  color: #c1c1c1;
}
.cform option::-moz-placeholder,
.cform textarea::-moz-placeholder,
.cform select::-moz-placeholder,
.cform input[type=text]::-moz-placeholder,
.cform input[type=email]::-moz-placeholder,
.cform input[type=search]::-moz-placeholder,
.cform input[type=url]::-moz-placeholder {
  color: #c1c1c1;
}
.cform option:-ms-input-placeholder,
.cform textarea:-ms-input-placeholder,
.cform select:-ms-input-placeholder,
.cform input[type=text]:-ms-input-placeholder,
.cform input[type=email]:-ms-input-placeholder,
.cform input[type=search]:-ms-input-placeholder,
.cform input[type=url]:-ms-input-placeholder {
  color: #c1c1c1;
}
.cform option::-ms-input-placeholder,
.cform textarea::-ms-input-placeholder,
.cform select::-ms-input-placeholder,
.cform input[type=text]::-ms-input-placeholder,
.cform input[type=email]::-ms-input-placeholder,
.cform input[type=search]::-ms-input-placeholder,
.cform input[type=url]::-ms-input-placeholder {
  color: #c1c1c1;
}
.cform option::-webkit-input-placeholder, .cform textarea::-webkit-input-placeholder, .cform select::-webkit-input-placeholder, .cform input[type=text]::-webkit-input-placeholder, .cform input[type=email]::-webkit-input-placeholder, .cform input[type=search]::-webkit-input-placeholder, .cform input[type=url]::-webkit-input-placeholder {
  color: #c1c1c1;
}
.cform option::-moz-placeholder, .cform textarea::-moz-placeholder, .cform select::-moz-placeholder, .cform input[type=text]::-moz-placeholder, .cform input[type=email]::-moz-placeholder, .cform input[type=search]::-moz-placeholder, .cform input[type=url]::-moz-placeholder {
  color: #c1c1c1;
}
.cform option:-ms-input-placeholder, .cform textarea:-ms-input-placeholder, .cform select:-ms-input-placeholder, .cform input[type=text]:-ms-input-placeholder, .cform input[type=email]:-ms-input-placeholder, .cform input[type=search]:-ms-input-placeholder, .cform input[type=url]:-ms-input-placeholder {
  color: #c1c1c1;
}
.cform option::-ms-input-placeholder, .cform textarea::-ms-input-placeholder, .cform select::-ms-input-placeholder, .cform input[type=text]::-ms-input-placeholder, .cform input[type=email]::-ms-input-placeholder, .cform input[type=search]::-ms-input-placeholder, .cform input[type=url]::-ms-input-placeholder {
  color: #c1c1c1;
}
.cform option::placeholder,
.cform textarea::placeholder,
.cform select::placeholder,
.cform input[type=text]::placeholder,
.cform input[type=email]::placeholder,
.cform input[type=search]::placeholder,
.cform input[type=url]::placeholder {
  color: #c1c1c1;
}
.cform .zip {
  max-width: 200px;
}
.cform .title {
  font-weight: 600;
  letter-spacing: 0.1em;
}
.cform input[type=radio] {
  display: none;
}
.cform input[type=radio] + span {
  padding-left: 2em;
  position: relative;
  font-size: 15px;
  letter-spacing: 0.08em;
}
.cform input[type=radio] + span::before {
  content: "";
  position: absolute;
  border: 1px solid #333;
  background-color: #fff;
  top: -1px;
  left: 0;
  border-radius: 50%;
  height: 16px;
  width: 16px;
}
.cform input[type=radio] + span::after {
  content: "";
  position: absolute;
  background-color: var(--mainColor);
  border-radius: 50%;
  top: 45%;
  left: 4px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 8px;
  width: 8px;
  display: none;
}
@media only screen and (max-width: 767px) {
  .cform input[type=radio] + span::after {
    top: 47%;
  }
}
.cform input[type=radio]:checked + span::after {
  display: block;
}
.cform input[type=checkbox] {
  display: none;
}
.cform input[type=checkbox] + span {
  cursor: pointer;
  padding-left: 1.7em;
  position: relative;
}
.cform input[type=checkbox] + span::before {
  content: "";
  position: absolute;
  border: 1px solid #333;
  background-color: #fff;
  top: 0;
  left: 0;
  height: 1em;
  width: 1em;
}
.cform input[type=checkbox] + span::after {
  content: "";
  position: absolute;
  border-left: 2px solid var(--mainColor);
  border-bottom: 2px solid var(--mainColor);
  top: 2px;
  left: 2px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  height: 8px;
  width: 14px;
  display: none;
}
.cform input[type=checkbox]:checked + span::after {
  display: block;
}
@media only screen and (max-width: 767px) {
  .cform tr {
    margin-bottom: 2em;
  }
  .cform .title {
    font-size: 14px;
  }
}

.cform [type=submit] {
  display: inline-block;
  font-size: 20px;
  padding: 10px 30px;
  text-decoration: none;
  background: #ff8f00;
  color: #fff;
  border-bottom: solid 4px #b17c00;
  border-radius: 3px;
}

/*下層ページ共通------------------------------------*/
/*投稿詳細ページ------------------------------------*/
.entry {
  line-height: 1.8;
  letter-spacing: 0.15em;
  float: none;
  margin-inline: auto;
}
.entry figcaption {
  font-size: 13px;
  color: gray;
}
.entry a {
  display: inline;
  text-decoration: underline;
  word-break: break-all;
  word-wrap: break-word;
  color: var(--mainColor);
}
.entry blockquote {
  padding: 2em 4em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #e6e6e6;
  color: #7b7b7b;
  background-color: #f6f7f9;
  font-style: italic;
  margin-bottom: 1.5em;
}
.entry blockquote p {
  font-size: 14px;
}
.entry strong {
  font-style: normal;
  font-weight: 500;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, rgba(64, 27, 23, 0.1)));
  background: linear-gradient(transparent 50%, rgba(64, 27, 23, 0.1) 50%);
}
.entry p {
  margin: 0.5em 0 1em 0;
  line-height: 1.8;
  letter-spacing: 0.2em;
  font-size: 16px;
}
@media only screen and (max-width: 767px) {
  .entry p {
    font-size: 14px;
    line-height: 1.6;
  }
}
.entry h1 span,
.entry h2 span,
.entry h3 span,
.entry h4 span,
.entry h5 span {
  font-weight: bold;
}
.entry h1 {
  background-color: var(--subColor); /* 記事見出し1: 黒(main)→メインカラー#22389B(sub)（column-single #2） */
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin: 8% auto 3%;
  padding: 0.5em 1.3em;
}
@media only screen and (max-width: 767px) {
  .entry h1 {
    font-size: 20px;
    padding: 0.6em 1.2em;
  }
}
.entry h2 {
  background-color: #F9F9F9;
  position: relative;
  font-size: 22px;
  font-weight: 600;
  padding-left: 1.3em;
  padding-block: 0.3em;
  margin-bottom: 3%;
}
.entry h2::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  content: "";
  width: 8px;
  height: 100%;
  background-color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .entry h2 {
    font-size: 20px;
    margin: 12% auto 6%;
    padding-block: 0.3em;
  }
}
.entry h3 {
  position: relative;
  font-size: 22px;
  font-weight: 600;
  padding-left: 1.3em;
  padding-block: 0.3em;
  margin-bottom: 3%;
}
.entry h3::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  content: "";
  width: 8px;
  height: 100%;
  background-color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .entry h3 {
    font-size: 20px;
    margin: 12% auto 6%;
    padding-block: 0.3em;
  }
}
.entry h4 {
  position: relative;
  border-bottom: 2px solid #b8b8b8;
  font-size: 22px;
  font-weight: 600;
  padding-left: 0.3em;
  padding-bottom: 0.3em;
  margin-bottom: 2%;
}
.entry h4::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  z-index: 2;
  content: "";
  width: 15%;
  height: 3px;
  background-color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .entry h4 {
    font-size: 20px;
    margin: 10% auto 6%;
  }
  .entry h4::after {
    width: 35%;
  }
}
.entry h5 {
  font-size: 21px;
  font-weight: 600;
  padding-left: 0.3em;
  padding-block: 0.3em;
  margin-block: 3%;
  border-block: 1px solid var(--subColor);
}
@media only screen and (max-width: 767px) {
  .entry h5 {
    font-size: 20px;
    margin: 5% auto 3%;
  }
}
.entry h6 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 1%;
}
@media only screen and (max-width: 767px) {
  .entry h6 {
    font-size: 18px;
  }
}
.entry table {
  margin-bottom: 2%;
}
.entry table tr:nth-child(2n) td {
  background-color: #f7f6f9;
  color: #515151;
}
.entry table th,
.entry table td {
  padding: 1rem 2rem;
  letter-spacing: 0.01em;
}
@media only screen and (max-width: 767px) {
  .entry table th,
  .entry table td {
    padding: 0.5em 0.5em;
    border-bottom: 1px solid var(--mainColor);
  }
}
.entry table tr {
  border-bottom: 1px solid var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .entry table tr {
    border-bottom: none;
  }
}
.entry table tr:first-child {
  border-top: 1px solid var(--mainColor);
}
.entry table td {
  border: 1px solid var(--mainColor);
  background-color: #fff;
}
@media only screen and (max-width: 767px) {
  .entry table {
    width: 500px;
  }
}
.entry ul {
  margin-bottom: 2%;
  background-color: var(--grayColor);
  padding: 3% 5%;
}
.entry li {
  list-style-type: none;
  line-height: 1.8;
  font-weight: normal;
  margin-bottom: 0.3em;
  position: relative;
  padding-left: 1.5em;
}
.entry li:before {
  font-family: "Font Awesome 6 Pro";
  content: "\f14a";
  color: var(--subColor);
  position: absolute;
  left: 0;
  font-weight: 400;
}

.wp-caption {
  max-width: 100% !important;
  padding: 2%;
  margin: auto auto 3% auto;
}

.wp-caption-text {
  background: rgba(195, 184, 177, 0.67);
  width: 100%;
  text-align: left;
  padding: 1% 3%;
  word-wrap: break-word;
  font-size: 10px;
  color: white !important;
  position: relative !important;
  z-index: 1;
  top: -35px;
  display: block;
  left: 5%;
}

.wp-caption-text a {
  color: white;
}

@media screen and (max-width: 767px) {
  .wp-caption-text {
    background: hsla(330, 50%, 60%, 0.48);
    width: 100%;
    text-align: left;
    padding: 1% 3%;
    word-wrap: break-word;
    font-size: 10px;
    color: white !important;
    position: relative !important;
    z-index: 1;
    top: -50px;
    display: block;
    left: 5%;
  }
}
.entry img {
  margin: 2% auto 3%;
}

/*記事詳細-----------------------------------*/
.cateCss {
  display: inline-block;
  font-size: 14px;
  background-color: var(--mainColor);
  font-family: var(--fontJp);
  color: #fff;
  padding: 0.3em 0.6em;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .cateCss {
    font-size: 11px;
  }
}

/*==================================================
 * サイドバー
 *================================================*/
/*==================================================
 * 住友サイト共通ベース（旧 _style.scss から移設 2026-08-27）
*================================================*/
body {
  font-family: var(--fontJp);
  color: var(--fontColor);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  /* Figmaは palt 不使用。palt を効かせると全文言が約8%詰まり、
     折返し位置・セクション高がデザインとズレるため normal に揃える（2026-09-16） */
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
}
@media only screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

main {
  /* overflow-y:auto / overflow:hidden は不可。<main> がスクロールコンテナになり、
     内部の position:sticky（.TopReason__Left）が画面基準で固定されなくなる。
     contain:paint も不可。fixed の包含ブロックを作るため GSAP pin（TOP Service の
     横スクロール）が固定されずに流れる。clip は「クリップするがスクロールコンテナを
     作らない」ため両立する（2026-09-17 検証） */
  overflow-x: clip;
}

.telLink {
  text-decoration: none !important;
}
@media print, screen and (min-width: 768px) {
  .telLink {
    pointer-events: none;
  }
}
.telLink:hover {
  text-decoration: none !important;
}

.vertical {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

@media only screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media print, screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: opacity 0.3s, color 0.3s;
  transition: opacity 0.3s, color 0.3s;
}

@media print, screen and (min-width: 768px) {
  a:hover {
    opacity: 0.7;
  }
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/*==================================================
 * Header（共通）
*================================================*/
:root {
  --headerH: 79px;
}
@media only screen and (max-width: 959px) {
  :root {
    --headerH: 56px;
  }
}

@media only screen and (max-width: 1199px) {
  .hdPc {
    display: none !important;
  }
}

@media print, screen and (min-width: 1200px) {
  .hdSp {
    display: none !important;
  }
}

.Header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: var(--whiteColor);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
@media only screen and (max-width: 767px) {
  .Header {
    --headerH: 56px;
  }
}

body:not(.home) main {
  padding-top: var(--headerH);
}

.Header__Inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: var(--headerH);
  padding-left: clamp(5px, -0.6966292135px + 1.4606741573vw, 18px);
}

.Header__Logo {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.Header__LogoImg {
  /* 赤入れ C-12「デザインデータより小さい」→ 200px 指定（旧: Figma 20260827 実寸 196px） */
  width: clamp(170px, 156.8539325843px + 3.3707865169vw, 200px);
  margin: 0;
}
.Header__LogoImg img {
  width: 100%;
  margin: 0;
}

@media print, screen and (min-width: 1200px) {
  .Header__Nav {
    margin-left: clamp(16px, 11.1797752809px + 1.2359550562vw, 27px);
  }
}
@media only screen and (min-width: 1280px) {
  .Header__Nav {
    /* 1280超では余りをロゴ側に寄せ、ナビ〜電話〜CTAを右のかたまりとして保つ
       （padding-left はロゴと詰まらないための最低間隔。1280時の見えは従来どおり） */
    margin-left: auto;
    padding-left: 27px;
  }
}

.Header__NavList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1.1875; /* Figma: ナビ行高19 */
  /* 1200〜1280でも収まるよう gap は1200起点で詰める（1280時は従来どおり24px） */
  gap: clamp(14px, -136px + 12.5vw, 24px);
}
@media print, screen and (min-width: 1200px) {
  .Header__NavList {
    margin: 0;
  }
}

.Header__NavItem {
  position: relative;
}

.Header__NavLink {
  display: inline-block;
  font-family: var(--fontJp);
  font-weight: bold;
  color: var(--mainColor);
  letter-spacing: 0.05em;
  white-space: nowrap;
  line-height: 1.1875; /* Figma: 16px / 高さ19 */
}
@media print, screen and (min-width: 1200px) {
  .Header__NavLink {
    font-size: clamp(13px, 4px + 0.9375vw, 16px);
  }
}

.Header__NavItem--Recruit .Header__NavLink {
  position: relative;
}

.Header__Badge {
  /* 支給デザイン（2026-09-17・吹き出し型）: 角丸=高さの半分のピル + 下向きのしっぽ。
     比率は支給画像の実測（幅:高さ=2.6:1 / 左右余白=高さの0.44 / 文字=高さの0.6） */
  --badgeRed: #EA3323;
  /* Figma: 採用情報リンクの左端に揃える（中央寄せではない） */
  position: absolute;
  left: 0;
  /* しっぽ3pxぶん持ち上げ、しっぽの先がリンクの1.5px上に来るようにする */
  bottom: calc(100% + 4.5px);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 50px;
  height: 19.5px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  background-color: var(--badgeRed);
  border-radius: 999px;
  white-space: nowrap;
}

/* しっぽ（支給画像実測: 幅4px・高さ3px・左端から24%の位置） */
.Header__Badge::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 24%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-style: solid;
  border-width: 3px 2px 0;
  border-color: var(--badgeRed) transparent transparent;
}

/* メガメニュー（PC=hover / サービスのみ） */
@media print, screen and (min-width: 1200px) {
  .Header__Mega {
    /* left は auto のまま＝横位置は「サービス」項目の位置に追従する（fixed の静的位置）。
       旧: left:0 + 固定マージンだと、1280超でナビが右へ寄ってもパネルが左端（ロゴ下）に残っていた */
    position: fixed;
    top: var(--headerH);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(6px);
            transform: translateY(6px);
    -webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, -webkit-transform 0.3s;
    pointer-events: none;
  }
}
@media only screen and (max-width: 1199px) {
  .Header__Mega {
    display: none;
  }
}

/* ホバーブリッジ（赤入れ C-01）
   ナビ項目の下端(y=49)とパネル上端(=--headerH 79)の間に30pxの空白があり、
   マウスを下へ動かすと :hover が外れてパネルが消え、項目をクリックできなかった。
   ホバー中だけ現れる透明な帯でこの隙間を埋める（閉じるときは即座に高さ0へ戻す）。 */
@media print, screen and (min-width: 1200px) {
  .Header__NavItem--HasMega::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -12px; /* 隣接項目との gap(14〜24px) の内側まで広げて取りこぼしを防ぐ */
    width: calc(100% + 24px);
    height: 0;
  }
}

@media print, screen and (min-width: 1200px) {
  .Header__NavItem--HasMega:hover::after {
    height: 40px; /* 隙間30px + パネル上端への余裕 */
  }
}

@media print, screen and (min-width: 1200px) {
  .Header__NavItem--HasMega:hover .Header__Mega,
  .Header__NavItem--HasMega.isMegaOpen .Header__Mega {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    pointer-events: auto;
  }
}

.Header__MegaInner {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  /* パネル内見出し「サービス」の文字頭をナビの「サービス」に揃える（= padding ぶん左へ） */
  margin-left: -30px;
  padding: 30px;
  background-color: rgba(34, 56, 155, 0.92);
  border-radius: 0 0 8px 8px;
  -webkit-box-shadow: 0 12px 24px rgba(8, 28, 46, 0.18);
          box-shadow: 0 12px 24px rgba(8, 28, 46, 0.18);
}

.Header__MegaHeading {
  margin: 0 0 10px;
  font-family: var(--fontMincho);
  font-size: clamp(18px, 12px + 0.625vw, 20px);
  color: var(--whiteColor);
  letter-spacing: 0.05em;
}

/* リスト形式（2026-10-07 本人指示。旧: 画像カード3枚の横並び → 縦並びのテキストリスト） */
.Header__MegaList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 280px;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.Header__MegaLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 24px;
  padding: 9px 4px;
  color: var(--whiteColor);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.Header__MegaLink::after {
  /* 右向きシェブロン */
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.Header__MegaLink:hover {
  opacity: 0.7;
}
.Header__MegaLink:hover::after {
  -webkit-transform: translateX(4px) rotate(45deg);
          transform: translateX(4px) rotate(45deg);
}

/* サムネイル（現在は header.php でコメントアウト中。戻すときのため残置） */
.Header__MegaThumb {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 195/112;
}
.Header__MegaThumb img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.Header__MegaName {
  display: block;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* 電話 + CTA（PC） */
.Header__Contact {
  /* Figma: x=821 w=228 h=49 */
  width: clamp(180px, 36px + 15vw, 228px);
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 1280px) {
  .Header__Contact {
    /* Figma 1280 のナビ右端→電話ブロック間隔。auto のままだと広い画面でナビだけ左に取り残される */
    margin-left: 22px;
  }
}

.Header__TelLink,
.Header__Tel .Header__TelLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  color: var(--mainColor);
}

.Header__TelIcon {
  display: block;
  width: clamp(20px, 2px + 1.875vw, 26px);
}
.Header__TelIcon img {
  width: 100%;
  margin: 0;
}

.Header__TelNum {
  /* Figma header 97:1947 = Inter Semi Bold 24px / tracking 1.2px（赤入れ C-13。
     以前 Cormorant Infant に変更していたが、デザインの指定はサンセリフのため差し戻し） */
  font-family: var(--fontTel);
  font-weight: 600;
  font-size: clamp(19px, 4px + 1.5625vw, 24px);
  letter-spacing: 0.05em;
  line-height: 1.208; /* Figma: 24px / 高さ29 */
}

.Header__TelNote {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.5; /* Figma: 12px / 高さ18 */
  color: var(--mainColor);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
@media print, screen and (min-width: 768px) {
  .Header__TelNote {
    font-size: clamp(10px, 4px + 0.625vw, 12px);
  }
}

.Header__CtaBtn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  font-weight: bold;
  color: var(--whiteColor);
  letter-spacing: 0.05em;
  background-color: var(--accentColor);
}

.Header__CtaBtn--Fixed {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: clamp(180px, 51px + 13.4375vw, 223px);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: clamp(6px, -3px + 0.9375vw, 9px);
  padding-inline: 13px;
  font-size: clamp(14px, 11px + 0.3125vw, 15px);
}

.Header__CtaIcon {
  display: block;
  width: 23px;
}
.Header__CtaIcon img {
  width: 100%;
  margin: 0;
}

/* SPハンバーガー
   2026-09-20 本人指示: 「開いた後のデザインを開く前にも適用」
   → 閉=紺丸33px+白3本線 / 開=紺丸33px+白× （どちらも同じ紺丸・同じ線の幾何）
   紺丸の中心 = ボタン右端から26.5px（右10px + 直径33px の半分）/ ボタンの上下中央22px
   線は 17×1px・right:18px → 中心 x = 26.5px で紺丸中心と一致
   線の中心 y は 中央=22px、上下=±7px（top: calc(50% ∓ 7.5px) / calc(50% - .5px)） */
.Header__Burger {
  position: relative;
  z-index: 1001;
  width: 44px; /* a11y: タップ領域44px以上 */
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.Header__Burger span {
  position: absolute;
  left: auto;
  right: 18px;
  width: 17px;
  height: 1px;
  background-color: var(--whiteColor);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
}
.Header__Burger span:nth-of-type(1) {
  top: calc(50% - 7.5px);
}
.Header__Burger span { /* 中心 15px = 22 - 7 */ }
.Header__Burger span:nth-of-type(2) {
  top: calc(50% - 0.5px);
}
.Header__Burger span { /* 中心 22px = 紺丸中心 */ }
.Header__Burger span:nth-of-type(3) {
  top: calc(50% + 6.5px);
}
.Header__Burger span { /* 中心 29px = 22 + 7 */ }

/* 紺丸は開閉にかかわらず常時表示 */
.Header__Burger::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 33px;
  height: 33px;
  margin-top: -16.5px;
  border-radius: 50%;
  background-color: var(--subColor);
}

/* 開いたとき = ×（Figma原寸実測 662:15660: 対角bbox 約12px / ストローク約1px
   → バー長17px（17/√2 = 12.02px）・太さ1px。閉と同じ寸法なので transform だけで足りる。
   交点が紺丸の中心(22px)に来るよう 15px → +7px / 29px → -7px） */
.Header.open .Header__Burger span:nth-of-type(1) {
  -webkit-transform: translateY(7px) rotate(45deg);
          transform: translateY(7px) rotate(45deg);
}
.Header.open .Header__Burger span:nth-of-type(2) {
  opacity: 0;
}
.Header.open .Header__Burger span:nth-of-type(3) {
  -webkit-transform: translateY(-7px) rotate(-45deg);
          transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------
 * SPナビ オーバーレイ（Figma 662:15604「SP_menu」390×1280）
 * 上部バー = 既存 .Header（--headerH:56px）。オーバーレイは inset: var(--headerH) 0 0
 * ------------------------------------------------ */
.Header__NavScroll {
  /* PCではラッパを無かったことにしてレイアウトを一切変えない（PC凍結） */
}
@media print, screen and (min-width: 1200px) {
  .Header__NavScroll {
    display: contents;
  }
}

@media only screen and (max-width: 1199px) {
  .Header__Nav {
    position: fixed;
    inset: var(--headerH) 0 0;
    /* 下48px = 常駐する .Header__SpBottom のぶん。スクロール領域がバーに被らない */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: var(--whiteColor);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.4s, visibility 0.4s;
    transition: opacity 0.4s, visibility 0.4s;
  }
}
@media only screen and (max-width: 1199px) and (max-width: 767px) {
  .Header__Nav {
    bottom: 48px;
  }
}
@media only screen and (max-width: 1199px) {
  .Header.open .Header__Nav {
    opacity: 1;
    visibility: visible;
  }
  .Header__NavScroll {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media only screen and (max-width: 1199px) {
  /* メニュー行 */
  .Header__NavList {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 4px;
    margin: 0;
    line-height: 1.5;
  }
  .Header__NavItem {
    width: 100%;
  }
  .Header__NavLink {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 55px;
    padding: 0 50px 0 30px;
    font-family: var(--fontMincho);
    font-weight: normal;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--mainColor);
    background-color: #E5E8EE;
  }
  /* 募集中バッジはSP_menuデザインに無い → SPでは非表示 */
  .Header__Badge {
    display: none;
  }
  /* 子メニュー開閉トグル = 行全体（2026-09-20 本人指示。v2の「矢印のみトグル」から変更）。
     行ボックス（height55 / padding 0 50px 0 30px / #E5E8EE）は .Header__NavLink を併用して継承する */
  .Header__SpSubToggle {
    width: 100%;
    text-align: left;
    background-color: #E5E8EE;
    border: none;
    border-radius: 0;
    cursor: pointer;
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
  }
  /* 行右の矢印（見た目のみ。トグルは行全体なのでクリックは受けない） */
  .Header__SpSubArrow {
    position: absolute;
    top: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    /* Figma通りの右端19px（x=349） */
    width: 60px;
    height: 100%;
    padding-right: 19px;
    pointer-events: none;
  }
  .Header__SpSubArrow img {
    display: block;
    width: 22px;
    margin: 0;
    /* 素材は右向き。既定（閉）= 上向き∧ */
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }
  .Header__SpSubToggle[aria-expanded=true] .Header__SpSubArrow img {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg); /* 開 = 下向き∨ */
  }
  /* 子メニューを持つ3項目（事業所紹介 / サービス / 採用情報） */
  .Header__NavItem--HasSub {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  /* サービス子メニュー */
  .Header__SpSub {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 9px;
    margin: 0 0 0 30px;
    /* 開閉は main.js が height を数値指定して遷移させる（0 ⇔ scrollHeight） */
    overflow: hidden;
    -webkit-transition: height 0.3s ease;
    transition: height 0.3s ease;
  }
  .Header__SpSub[hidden] {
    display: none;
  }
  .Header__SpSubItem {
    line-height: 1;
    /* Figma: メニュー群1の下端から12px / 下は 8px + 行間gap4px = 12px。
       height アニメーションと一緒に潰れるよう、上下余白は外側marginではなく子のpaddingで持つ */
  }
  .Header__SpSubItem:first-child {
    padding-top: 12px;
  }
  .Header__SpSubItem:last-child {
    padding-bottom: 8px;
  }
  .Header__SpSubLink {
    position: relative;
    display: block;
    padding-left: 15px;
    font-family: var(--fontJp);
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.05em;
    color: var(--mainColor);
  }
  .Header__SpSubLink::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 1px;
    margin-top: -0.5px;
    background-color: #005491;
  }
  /* プライバシーポリシー */
  .Header__NavItem--SpPrivacy {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* li の行ボックス（strut）で2pxずれるのを防ぐ */
    margin-top: 8px; /* 行間gap4px + 8px = Figma 12px */
  }
  .Header__SpPrivacyLink {
    display: inline-block;
    /* a11y(WCAG 2.5.8): 表示は12px/lh1.5=18pxのまま、当たり判定だけ26pxへ。
       負のmargin-blockで相殺し、見た目のY座標は1pxも動かさない */
    padding-block: 4px;
    margin-block: -4px;
    margin-left: 30px;
    font-family: var(--fontJp);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #1E1F3B;
    text-decoration: underline;
  }
  /* 連絡ブロック */
  .Header__SpFoot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 32px;
    margin-top: 56px;
    /* 下16px = 常駐バーとの最低余白。アコーディオンを全部開いて最下部まで
       スクロールしたとき団体ロゴがバーに接触しないようにする。
       （.Header__NavScroll 側に padding-bottom は入れない＝初期状態で余剰スクロールが出るため） */
    padding: 0 30px 16px;
  }
  .Header__SpFootContact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 6px;
  }
  .Header__SpFootNote {
    margin: 0;
    font-size: 12px;
    line-height: 21px;
    text-align: center;
    letter-spacing: 0.05em;
    color: var(--mainColor);
  }
  .Header__SpTel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 2px;
    height: 86px;
    background-color: var(--subColor);
    color: var(--whiteColor);
  }
  .Header__SpTelLabel {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }
  .Header__SpTelBody {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
  }
  .Header__SpTelIcon {
    display: block;
    width: 26px;
  }
  .Header__SpTelIcon img {
    width: 100%;
    margin: 0;
  }
  .Header__SpTelNum {
    font-family: var(--fontTel);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.208;
    letter-spacing: 0.1em;
  }
  .Header__SpCta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 27px;
    height: 86px;
    font-family: var(--fontJp);
    font-weight: bold;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--whiteColor);
    background-color: var(--accentColor);
  }
  .Header__SpCtaIcon {
    display: block;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 23px;
  }
  .Header__SpCtaIcon img {
    width: 100%;
    margin: 0;
  }
  .Header__SpFootLine {
    width: 100%;
    height: 1px;
    margin: 0;
    border: none;
    background-color: #DADADA;
  }
  .Header__SpFootInfo {
    text-align: center;
  }
  .Header__SpFootLogo {
    /* Figma: 表示枠228×47。素材の余白をトリミングして使う（Footer__Logo と同じ処理） */
    position: relative;
    width: 228px;
    height: 47px;
    margin: 0 auto;
    overflow: hidden;
  }
  .Header__SpFootLogo img {
    position: absolute;
    top: -29.47%;
    left: 0;
    width: 100%;
    height: 153.49%;
    margin: 0;
  }
  .Header__SpFootName {
    margin: 18px 0 0;
    font-family: var(--fontMincho);
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0.05em;
    color: var(--mainColor);
  }
  .Header__SpFootAddress {
    margin-top: 16px;
    font-family: var(--fontJp);
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 0.05em;
    color: var(--mainColor);
    /* グローバルの p{line-height} に負けるので p へ直接指定する */
  }
  .Header__SpFootAddress p {
    margin: 0;
    line-height: 26px;
  }
  .Header__SpFootOrgs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 16px;
    margin-top: 16px;
  }
  .Header__SpFootOrgs a {
    display: block;
  }
  .Header__SpFootOrgs img {
    height: auto;
    margin: 0;
  }
  .Header__SpFootOrgs {
    /* Figma: 近畿税理士会140 / 国税庁90 / 中小企業庁60 */
  }
  .Header__SpFootOrgs a:nth-child(1) img {
    width: 140px;
  }
  .Header__SpFootOrgs a:nth-child(2) img {
    width: 90px;
  }
  .Header__SpFootOrgs a:nth-child(3) img {
    width: 60px;
  }
}
@media only screen and (max-width: 767px) {
  /* 全ページ常駐の下部固定2分割バー
     2026-09-20 本人指示。CLAUDE.md §4「追従CTA・フローティングCTAは設置しない」の例外
     ※DOM上は `</header>` の外（body直下・.Header の兄弟）に置いているが、
       ヘッダー由来のパーツなのでBEMブロック名は `Header__` のまま据え置いている */
  .Header__SpBottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000; /* .Header(999) より上。メニューを開いていても隠れない */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 48px;
  }
  /* 本文・フッターがバーに隠れないよう下げ底する */
  body {
    padding-bottom: 48px;
  }
  .Header__SpBottomItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 50%;
    font-family: var(--fontMincho);
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #FFFEFA;
  }
  .Header__SpBottomItem--Contact {
    background-color: var(--accentColor);
  }
  .Header__SpBottomItem--Tel {
    background-color: var(--subColor);
  }
}
/*==================================================
 * FotterCta（フッター手前CTA・共通）
*================================================*/
.FotterCta__Service {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 767px) {
  .FotterCta__Service {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.FotterCta__ServiceItem {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: clamp(90px, 54.9438202247px + 8.9887640449vw, 170px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}
.FotterCta__ServiceItem img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.FotterCta__ServiceItem::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--mainColor);
  opacity: 0.5;
  mix-blend-mode: multiply;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .FotterCta__ServiceItem {
    height: auto;
    padding-block: 50px;
  }
}

.FotterCta__ServiceLabel {
  position: relative;
  z-index: 2;
  font-family: var(--fontMincho);
  font-size: clamp(16px, 13.3707865169px + 0.6741573034vw, 22px);
  color: var(--whiteColor);
  letter-spacing: 0.05em;
  text-align: center;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.FotterCta__Band {
  position: relative;
  /* Figma: 帯h472 = pt41 + content359 + pb72 */
  padding: clamp(28px, 22.3033707865px + 1.4606741573vw, 41px) 20px clamp(48px, 37.4831460674px + 2.6966292135vw, 72px);
  background-color: var(--subColor);
  /* Figma: 背景画像は 144.22% × 164.83% を上端基準・中央寄せで配置 */
  background-image: url(../img/bgNoise.png), url(../img/ctaBg.png); /* 先頭=粒子ノイズ（_module.scss $bgNoise 参照） */
  background-size: 120px 120px, 144.22% 164.83%;
  background-position: left top, center top;
  background-repeat: repeat, no-repeat;
  overflow: hidden;
}

/* 波打ち線あしらい（Figma 214:379 書き出し・帯に対する相対位置） */
.FotterCta__Band::after {
  content: "";
  position: absolute;
  left: 2.11%; /* 27 / 1280 */
  top: -155.93%; /* -736 / 472 */
  width: 98.05%; /* 1255 / 1280 */
  height: 354.45%; /* 1673 / 472 */
  background: url(../img/ctaWave.png) no-repeat 0 0/100% 100%;
  pointer-events: none;
}
@media only screen and (max-width: 767px) {
  .FotterCta__Band::after {
    background: url(../img/ctaWave.png) no-repeat 90% 100%/cover;
    left: 0;
    width: 100%;
  }
}

.FotterCta__Inner {
  position: relative;
  z-index: 1;
  max-width: 912px;
  margin: 0 auto;
  text-align: center;
  color: var(--whiteColor);
}

.FotterCta__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 9px;
}

.FotterCta__En {
  font-family: var(--fontEn);
  font-size: clamp(42px, 28.8539325843px + 3.3707865169vw, 72px);
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.FotterCta__Sub {
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.FotterCta__Title {
  margin-top: clamp(24px, 19.6179775281px + 1.1235955056vw, 34px);
  font-family: var(--fontMincho);
  font-size: clamp(19px, 16.808988764px + 0.5617977528vw, 24px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.FotterCta__Text {
  margin-top: 14px;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.625;
  letter-spacing: 0.05em;
}

.FotterCta__Actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(20px, 9.0449438202px + 2.808988764vw, 45px);
  margin-top: clamp(28px, 22.7415730337px + 1.3483146067vw, 40px);
}
@media only screen and (max-width: 767px) {
  .FotterCta__Actions {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.FotterCta__Btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(20px, 11.6741573034px + 2.1348314607vw, 39px);
  padding: 20px 21px 20px 79px;
  font-size: clamp(16px, 15.1235955056px + 0.2247191011vw, 18px);
  line-height: 1.5; /* Figma: 18px / 高さ27 */
  font-weight: bold;
  color: var(--whiteColor);
  letter-spacing: 0.05em;
  background-color: var(--accentColor);
}
@media only screen and (max-width: 767px) {
  .FotterCta__Btn {
    width: 100%;
    gap: 16px;
    padding: 18px 20px;
  }
}

.FotterCta__BtnIcon {
  display: block;
  width: 23px;
}
.FotterCta__BtnIcon img {
  width: 100%;
  margin: 0;
}

.FotterCta__TelNote {
  font-size: 12px;
  letter-spacing: 0.05em;
}

.FotterCta__TelLink {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: var(--whiteColor);
}

.FotterCta__TelIcon {
  display: block;
  width: 26px;
  /* Figma: ヘッダ同様「青円+白電話」で表示。全白化フィルタを外す（#31） */
}
.FotterCta__TelIcon img {
  width: 100%;
  margin: 0;
}

.FotterCta__TelNum {
  font-family: var(--fontJp);
  font-weight: bold;
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  line-height: 1;
  letter-spacing: 0.05em;
}

.FotterCta__Info {
  margin-top: 14px;
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.78;
  letter-spacing: 0.05em;
}

/*==================================================
 * Footer（共通）
*================================================*/
.Footer {
  background-color: var(--whiteColor);
}

.Footer__Inner {
  max-width: 1280px;
  margin: 0 auto;
  /* Figma: pt52 / px60 / pb36（全体h466） */
  padding: clamp(40px, 34.7415730337px + 1.3483146067vw, 52px) clamp(24px, 8.2247191011px + 4.0449438202vw, 60px) clamp(20px, 15.1797752809px + 1.2359550562vw, 31px);
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .Footer__Company {
    float: left;
    width: clamp(180px, 158.0898876404px + 5.6179775281vw, 230px);
  }
}
@media only screen and (max-width: 767px) {
  .Footer__Company {
    margin-bottom: 40px;
  }
}

.Footer__Logo {
  /* Figma: 表示枠228×47（素材 456×94 = 2倍・余白なし） */
  width: clamp(180px, 158.9662921348px + 5.393258427vw, 228px);
  margin: 0;
}
.Footer__Logo img {
  width: 100%;
  height: auto;
  margin: 0;
}

.Footer__Name {
  margin-top: 12px;
  font-family: var(--fontMincho);
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.Footer__Address {
  margin-top: 10px;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--mainColor);
  /* Figma: テキストブロック幅335（親カラム230より広く右へせり出す） */
}
@media print, screen and (min-width: 768px) {
  .Footer__Address {
    width: clamp(240px, 198.3707865169px + 10.6741573034vw, 335px);
  }
}
.Footer__Address p {
  margin: 0;
}

.Footer__Nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(20px, 9.0449438202px + 2.808988764vw, 45px);
}
@media print, screen and (min-width: 768px) {
  .Footer__Nav {
    overflow: hidden; /* フロート(Company)隣接のBFCを作り残り幅に収める */
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    /* Figma: ナビ帯 w698 をコンテンツ右端(1220)に揃える（1列目拡張に伴い770） */
    width: clamp(420px, 266.6292134831px + 39.3258426966vw, 770px);
    margin-left: auto;
  }
}
@media only screen and (max-width: 767px) {
  .Footer__Nav {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 32px 24px;
  }
}

.Footer__NavCol {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(20px, 15.6179775281px + 1.1235955056vw, 30px);
}
@media only screen and (max-width: 767px) {
  .Footer__NavCol {
    width: calc(50% - 12px);
  }
}

/* Figma: 列幅 100 / 146 / 166 / 残り
   1列目は「ー認定・実績・取り組み」（2026-10-09 差し替え・約162px）が1行で収まる幅に拡張、ナビ帯もその分広げる */
@media print, screen and (min-width: 768px) {
  .Footer__NavCol:nth-child(1) {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 clamp(64px, 18.4269662921px + 11.6853932584vw, 168px);
            flex: 0 0 clamp(64px, 18.4269662921px + 11.6853932584vw, 168px);
  }
  .Footer__NavCol:nth-child(2) {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 clamp(92px, 66.5842696629px + 6.5168539326vw, 150px);
            flex: 0 0 clamp(92px, 66.5842696629px + 6.5168539326vw, 150px);
  }
  .Footer__NavCol:nth-child(3) {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 clamp(104px, 76.8314606742px + 6.9662921348vw, 166px);
            flex: 0 0 clamp(104px, 76.8314606742px + 6.9662921348vw, 166px);
  }
  .Footer__NavCol:nth-child(4) {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-width: 0;
  }
}
.Footer__NavGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}

.Footer__NavHead {
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.Footer__NavSub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* 折り返し時に行が詰まらないよう line-height 1.4。1行時の見た目の間隔(14px)は gap で相殺 */
  gap: 8px;
  margin: 0;
}
.Footer__NavSub li {
  line-height: 1.4;
}
.Footer__NavSub a {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.Footer__Orgs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}
@media print, screen and (min-width: 768px) {
  .Footer__Orgs {
    /* Figma: 左897 / 上358（会社ブロックと下端を揃えて横並び） */
    position: absolute;
    right: clamp(24px, 8.2247191011px + 4.0449438202vw, 60px);
    bottom: clamp(56px, 47.6741573034px + 2.1348314607vw, 75px);
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}
@media only screen and (max-width: 767px) {
  .Footer__Orgs {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-top: 32px;
  }
}
.Footer__Orgs a {
  display: block;
}
.Footer__Orgs img {
  height: auto;
  margin: 0;
}
.Footer__Orgs {
  /* Figma: 近畿税理士会140.5 / 国税庁90.1 / 中小企業庁60.0
     日本税理士会連合会（2026-10-07 先頭に追加・デザインなし）は近畿税理士会と高さを揃えた幅 */
}
.Footer__Orgs a:nth-child(1) img {
  width: clamp(137px, 120.3483146067px + 4.2696629213vw, 175px);
}
.Footer__Orgs a:nth-child(2) img {
  width: clamp(110px, 96.6348314607px + 3.4269662921vw, 140.5px);
}
.Footer__Orgs a:nth-child(3) img {
  width: clamp(85px, 82.808988764px + 0.5617977528vw, 90px);
}
.Footer__Orgs a:nth-child(4) img {
  width: clamp(50px, 45.6179775281px + 1.1235955056vw, 60px);
}

.Footer__Copyright {
  clear: both;
  /* Figma: 罫線は footer 上端から404px（ナビ下端291.7 + 112.3） */
  margin-top: clamp(48px, 27.8426966292px + 5.1685393258vw, 94px);
  padding-top: clamp(10px, 9.1235955056px + 0.2247191011vw, 12px);
}
@media only screen and (max-width: 767px) {
  .Footer__Copyright {
    margin-top: 32px;
  }
}
.Footer__Copyright {
  border-top: 1px solid rgba(8, 28, 46, 0.15);
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .Footer__Copyright {
    font-size: 10px;
  }
}

/* 768〜1279: 会社情報(float)＋ナビ4列の横並びでは幅が足りず、採用情報の列が画面外で切れる／
   住所が「3-2-/10」で折れるため、会社情報を上・ナビを下(全幅)に積み、団体ロゴも通常フローに戻す */
@media only screen and (min-width: 768px) and (max-width: 1279px) {
  .Footer__Company {
    float: none;
    width: auto;
    margin-bottom: 40px;
  }
  .Footer__Address {
    width: auto;
  }
  .Footer__Nav {
    overflow: visible;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    margin-left: 0;
  }
  .Footer__NavCol:nth-child(n) {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
  }
  .Footer__Orgs {
    position: static;
    margin-top: 40px;
  }
  .Footer__Copyright {
    margin-top: 24px;
  }
}
/*==================================================
 * 事例カルーセル 共通（TOP / 各サービス / 事例詳細）
 * 赤入れ C-07「記事が3枚以下の場合はスライド無し／2枚まではセンター揃え」
 * 枚数の判定と矢印の出し分けは js/main.js 側。ここは配置だけを担う。
*================================================*/
.jsCaseSwiper.isCaseCentered .swiper-wrapper {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/*==================================================
 * _style.scss — ページ実装スタイルの集約
 * ---------------------------------------------------------------------------
 * 以前は css/pages/ 配下に14ファイルへ分かれており、import.scss が
 * それぞれを個別に読み込んでいた。読み込みを style / print / main / module の
 * 4本に絞るため、ページ別スタイルをこの1ファイルへ集約する。
 * ★ 連結順は旧 import.scss の順序をそのまま保持している。
 *   同詳細度のルールは後勝ちで効くため、順序を入れ替えると見た目が変わる。
*================================================*/
/*==================================================
 * 共通パーツ: PageHeader（下層共通見出し帯）
 * 全下層ページで parts/page-header.php が出力する。
 * 旧構成では同一のベース定義が _case.scss と _column.scss に重複しており、
 * import 順の後勝ちで実質 _column.scss 版が効いていた。その版を正として一本化。
 * 各ページの実寸差は下のページ別スコープ（.Case / .Column / .page-about …）で上書きする。
*================================================*/
.PageHeader {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* main の padding-top を打ち消して固定ヘッダーの下へ潜り込ませる。
     Figmaの帯は 1280×353 で上79pxをヘッダーが覆う＝可視の青帯は274。 */
  margin-top: calc(-1 * var(--headerH));
  background: url("../img/pageHeaderTexture.jpg") center top/cover no-repeat, var(--subColor);
}

.PageHeader__Inner {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  min-height: clamp(240px, 190.4831460674px + 12.6966292135vw, 353px);
  padding: calc(var(--headerH) + clamp(40px, 30.797752809px + 2.3595505618vw, 61px)) clamp(24px, 8.2247191011px + 4.0449438202vw, 60px) clamp(12px, 11.5617977528px + 0.1123595506vw, 13px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.PageHeader__En {
  font-family: var(--fontEn);
  font-weight: 400;
  font-size: clamp(40px, 30.3595505618px + 2.4719101124vw, 62px);
  line-height: 0.903; /* Figma 56 / 62 */
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

.PageHeader__Ja {
  margin: clamp(8px, 6.2471910112px + 0.4494382022vw, 12px) 0 0;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  font-weight: 500;
  line-height: 1; /* Figma: 16px の行ボックス */
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

/* パンくず。
   2026-09-20 本人指示: 事例詳細のように現在地が長いページでは1行に収まらず
   各項目が折り返して2行になっていたため、折り返さずに横スクロールさせる。
   スクロールバーは見た目のため隠す（タッチ/トラックパッドでスクロール可）。 */
.PageHeader__Breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-top: clamp(28px, 13.9775280899px + 3.595505618vw, 60px);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

.PageHeader__Breadcrumb::-webkit-scrollbar {
  display: none;
}

.PageHeader__Breadcrumb a {
  color: var(--whiteColor);
  opacity: 0.8;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.PageHeader__Breadcrumb a:hover {
  opacity: 1;
}

/* 区切りのシェブロン。
   Breadcrumb NavXT は項目の <span> だけを出力し区切り要素を持たないため、
   最後以外の項目の ::after で描く（サービス下層FVの li::after と同じ方式）。
   gap:8px + margin-left:8px で、区切り要素があった頃と同じ字間になる。 */
.PageHeader__Breadcrumb > span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  white-space: nowrap;
}

.PageHeader__Breadcrumb > span:not(:last-child)::after {
  content: "";
  display: inline-block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-left: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.PageHeader__Photo {
  position: absolute;
  top: var(--headerH);
  right: 0;
  width: 43.32%; /* Figma 554.5 / 1280 */
  height: calc(100% - var(--headerH)); /* Figma 274 */
  z-index: 1;
  /* PC: 幅を画面幅比例にすると、1280超で枠が横長になり cover が上下を切る。
     すると画像に焼き込まれた斜辺の白が下端で clip-path の外へはみ出し、白いクサビが出る。
     枠を書き出し画像（1109×548）と同比率にして、幅は高さから決める（1280で 554.5 = Figma実寸）。 */
}
@media print, screen and (min-width: 768px) {
  .PageHeader__Photo {
    width: auto;
    aspect-ratio: 1109/548;
  }
}

.PageHeader__Photo img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
  /* 赤入れ C-08: 書き出し画像の斜辺の左は不透明の白（実測 294/1109 = 26.51%）。
     アンチエイリアスのフチごと落とすため 26.9% で切る。 */
  clip-path: polygon(26.9% 0, 100% 0, 100% 100%, 0 100%);
}

@media only screen and (max-width: 767px) {
  .PageHeader__Photo {
    width: 56%;
    opacity: 0.55;
  }
}
/* ページ固有の差は「背景テクスチャ」だけ。それ以外をページ側で上書きしないこと
   （about / staff / case / column / contact / privacy / 404 は全部この共通定義で出る）。 */
.page-about .PageHeader {
  /* Figma pageHeader背景(551:11168)の実寸書き出し */
  background: url("../img/aboutHeaderBg.webp") center top/cover no-repeat, var(--subColor);
}

.page-staff .PageHeader {
  /* Figma Group2629 の実寸書き出し */
  background: url("../img/staffHeaderBg.webp") center center/cover no-repeat, var(--subColor);
}

/* サービス一覧の写真（serviceHeader.png）だけ、書き出し時の角の丸みで
   上端15行ほど白が 30.5% までせり出している。頂点を1つ足して落とす。 */
.page-service .PageHeader__Photo img {
  clip-path: polygon(30.8% 0, 100% 0, 100% 100%, 0 100%, 26.9% 4%);
}

/*==================================================
 * 共通パーツ: Qa（よくあるご質問・アコーディオン）
 * サービス下層3ページ（法人顧問 / 事業承継 / 相続）はデザインが同一で中身だけが違う。
 * parts/qa.php が出力する。調整済みの advisory 版を正として集約（2026-09-20）。
 * 旧 .AdvisoryQa* / .InheritanceQa* / .SuccessionQa* は本ブロックへ統合し削除済み。
*================================================*/
.Qa {
  /* ページ側の section 共通マージン（.Advisory > section 等）を打ち消し、
     上下の余白をこのパーツ内で完結させる（3ページで同じ見えになるように） */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  padding-bottom: clamp(50px, 32.4719101124px + 4.4943820225vw, 90px); /* Figma: Q&A下端 → FotterCta上端 90px */
}

.Qa__Inner {
  /* Figma: サービス下層のコンテンツ幅は 1280 - 60*2 = 1160。
     共通 .cnt は実質1130で、advisory だけ `.Advisory .cnt` で1160へ広げていた。
     3ページで同じ位置に出すため、パーツ側で実寸を確定させる（.cnt には依存しない） */
  width: 100%;
  max-width: 1190px;
  padding-inline: 15px;
  margin-inline: auto;
}

/* 見出し（旧 .Advisory__HeadTop--Stack 相当。英字の下に日本語） */
.Qa__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
  margin-bottom: clamp(40px, 32.9887640449px + 1.797752809vw, 56px);
}

.Qa__En {
  line-height: 0.84; /* Figma: 56px の実bboxは47px */
  background: linear-gradient(156deg, #01B9FF 1%, #22389B 97%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: clamp(38px, 30.1123595506px + 2.0224719101vw, 56px);
  letter-spacing: 0.05em;
}

.Qa__EnSub {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.15; /* Figma 16/14 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.Qa__List {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  /* Figma: アコーディオンは本文1040px幅（セクション1160より内側） */
  max-width: 1040px;
  margin-inline: auto;
}

.Qa__Item {
  background-color: #E5E8EE;
  border-radius: 4px;
}

.Qa__Q {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(14px, 11.808988764px + 0.5617977528vw, 19px);
  width: 100%;
  padding: 20px clamp(20px, 12.9887640449px + 1.797752809vw, 36px) 20px 19px;
  background-color: transparent;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: left;
  cursor: pointer;
}

.Qa__Icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: clamp(32px, 28.0561797753px + 1.0112359551vw, 41px);
  height: clamp(32px, 28.0561797753px + 1.0112359551vw, 41px);
  border-radius: 50%;
  font-size: clamp(16px, 12.4943820225px + 0.8988764045vw, 24px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
}

.Qa__Icon--Q {
  background-color: var(--whiteColor);
  color: var(--subColor);
}

.Qa__Icon--A {
  background-color: var(--subColor);
  color: var(--whiteColor);
}

.Qa__Question {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  font-weight: 500;
  line-height: 1.2; /* Figma 24/20 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

/* 開閉アイコン: 閉=プラス / 開=マイナス（規約§4 確定仕様） */
.Qa__Toggle {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 17px;
  height: 17px;
}

.Qa__Toggle::before,
.Qa__Toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: var(--subColor);
}

.Qa__Toggle::before {
  width: 17px;
  height: 1.5px;
}

.Qa__Toggle::after {
  width: 1.5px;
  height: 17px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.Qa__Item.is-open .Qa__Toggle::after {
  -webkit-transform: translate(-50%, -50%) scaleY(0);
          transform: translate(-50%, -50%) scaleY(0);
}

/* 高さautoのアニメーション: grid 0fr→1fr（JSでmaxHeightを測らない） */
.Qa__A {
  display: grid;
  grid-template-rows: 0fr;
  -webkit-transition: grid-template-rows 0.3s ease;
  transition: grid-template-rows 0.3s ease;
  transition: grid-template-rows 0.3s ease, -ms-grid-rows 0.3s ease;
}

.Qa__Item.is-open .Qa__A {
  grid-template-rows: 1fr;
}

/* 高さをクリップするだけの層。余白を持たせないので、閉じたとき高さ0になる */
.Qa__AClip {
  overflow: hidden;
  min-height: 0;
}

/* 余白と点線は「開いたときだけ」付けると、開閉の瞬間に中身の高さが跳ねて
   grid のアニメーションがカクつく（サービス下層で発生していた不具合）。
   採用FAQ（.RecruitQa__AInner）と同じく常時持たせ、動かすのは行高だけにする。 */
.Qa__AInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(14px, 11.808988764px + 0.5617977528vw, 19px);
  padding: 17px clamp(20px, 12.9887640449px + 1.797752809vw, 36px) 28px 19px;
  background-image: repeating-linear-gradient(to right, rgba(34, 56, 155, 0.5) 0 3px, transparent 3px 6px);
  background-repeat: no-repeat;
  background-size: calc(100% - clamp(40px, 33.4269662921px + 1.6853932584vw, 55px)) 1px;
  background-position: 19px 0;
}

.Qa__Answer {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 825px; /* Figma: 回答テキスト幅 */
  padding-top: 8px; /* Figma 26/16 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

/*==================================================
 * 共通パーツ: ServiceDetailFv（サービス下層ページのFV／見出し帯）
 * 法人顧問 / 事業承継 / 相続 の3ページで同一デザイン。parts/service-detail-fv.php が出力する。
 * 調整済みの advisory 版を正として集約（2026-09-20）。
 * 旧 .AdvisoryFv* / .SuccessionFv* / .InheritanceFv* は本ブロックへ統合し削除済み。
 * ※ サービス一覧の .ServiceFv（Figma 551:16098・高さ353のpageHeader型）は別デザインのため対象外。
*================================================*/
.ServiceDetailFv {
  position: relative;
  overflow: hidden;
  color: var(--whiteColor);
  /* Figma pageHeader の背景をそのまま書き出した実寸テクスチャ（画像はページ別） */
  background-color: var(--subColor);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.ServiceDetailFv--advisory {
  background-image: url("../img/advisoryFvBg.jpg");
}

.ServiceDetailFv--succession {
  background-image: url("../img/successionFvBg.jpg");
}

.ServiceDetailFv--inheritance {
  /* 相続だけ書き出しが 1280×527（上79px＝固定ヘッダーぶんを含む）なので下端合わせ */
  background-image: url("../img/inheritanceFvBg.webp");
  background-position: center bottom;
}

/* 写真：Figmaは 640×448 の左辺が斜めにカットされたベクター（上辺 x=810 → 下辺 x=640） */
.ServiceDetailFv__Img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 50%;
  max-width: 640px;
  clip-path: polygon(26.5625% 0, 100% 0, 100% 100%, 0 100%);
}
.ServiceDetailFv__Img img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.ServiceDetailFv__Inner {
  position: relative;
  z-index: 2;
  /* Figmaは 1280 - 60*2 = 1160 の実寸。共通 .cnt（実質1130）より広い */
  max-width: 1190px;
  margin-inline: auto;
  padding-inline: 15px;
  /* Figma: pageHeader 527 のうち上79pxは固定ヘッダー分。可視バンドは448 */
  padding-block: clamp(48px, 32.2247191011px + 4.0449438202vw, 84px) clamp(16px, 15.5617977528px + 0.1123595506vw, 17px);
  min-height: clamp(320px, 263.9101123596px + 14.3820224719vw, 448px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.ServiceDetailFv__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
  max-width: 460px;
}

.ServiceDetailFv__Label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
}

.ServiceDetailFv__En {
  font-size: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.ServiceDetailFv__Jp {
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(19px, 17.6853932584px + 0.3370786517vw, 22px);
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.ServiceDetailFv__Copy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}

.ServiceDetailFv__Title {
  font-size: clamp(20px, 14.7415730337px + 1.3483146067vw, 32px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.ServiceDetailFv__Text {
  font-size: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  line-height: 1.85;
  letter-spacing: 0.05em;
}

.ServiceDetailFv__Breadcrumb {
  margin-top: auto;
  padding-top: clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
}

.ServiceDetailFv__BreadcrumbList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  list-style: none;
}
.ServiceDetailFv__BreadcrumbList li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 12px;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.ServiceDetailFv__BreadcrumbList li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.ServiceDetailFv__BreadcrumbList a {
  color: inherit;
}

/* SP: 斜めクリップをやめ、写真を薄く敷いた上に文字を載せる（advisory の実装が正） */
@media only screen and (max-width: 767px) {
  .ServiceDetailFv__Img {
    width: 100%;
    max-width: none;
    clip-path: none;
    opacity: 0.35;
  }
}
/*==================================================
 * 共通パーツ: 料金表まわり（PriceGroup / PriceTable / PriceLead / PriceText / PriceList）
 * 法人顧問・相続の料金セクションで使用。表は parts/price-table.php が出力する。
 * 2026-10-13 料金表｜清書ver20261013 反映時に新設。Figmaデザインなし（本人指示: 既存の料金表の見た目に合わせる）
 * → 見出しセル=$subColor×白文字 / 値セル=白背景 / 罫線#E5E8EE / 注記#5F5F5F を踏襲。
*================================================*/
/* 大見出し（法人のお客様（顧問契約）／相続税申告／生前のご相談）＋税抜・税込の表示 */
.PriceGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 8px 24px;
  margin-bottom: clamp(24px, 20.4943820225px + 0.8988764045vw, 32px);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--subColor);
}

[class*=Price__Block] + .PriceGroup {
  margin-top: clamp(48px, 37.4831460674px + 2.6966292135vw, 72px);
}

.PriceGroup__Ttl {
  font-size: clamp(20px, 17.3707865169px + 0.6741573034vw, 26px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.PriceGroup__Tax {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

/* 表 */
.PriceTable__Table {
  width: 100%;
  border-collapse: collapse;
}
.PriceTable__Table th,
.PriceTable__Table td {
  padding: clamp(12px, 9.3707865169px + 0.6741573034vw, 18px) clamp(10px, 5.6179775281px + 1.1235955056vw, 20px);
  border: 1px solid #E5E8EE;
  line-height: 1.5;
  letter-spacing: 0.05em;
  vertical-align: middle;
}
.PriceTable__Table thead th {
  background-color: var(--subColor);
  font-size: clamp(14px, 12.2471910112px + 0.4494382022vw, 18px);
  font-weight: 600;
  color: var(--whiteColor);
  text-align: center;
}
.PriceTable__Table tbody th {
  background-color: #F2F4F9;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  font-weight: 600;
  color: var(--fontColor);
  text-align: left;
}
.PriceTable__Table tbody td {
  background-color: var(--whiteColor);
  font-size: clamp(14px, 12.6853932584px + 0.3370786517vw, 17px);
  font-weight: 500;
  color: var(--fontColor);
  text-align: center;
}

.PriceTable--TdLeft tbody td {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  text-align: left;
}

/* 金額セルは「円」だけ折り返さないよう改行させない（補足の内訳は折り返す）。
   横スクロールしない表はSPで幅が足りなくなるためPCのみ */
.PriceTable--Scroll tbody td {
  white-space: nowrap;
}

@media print, screen and (min-width: 768px) {
  .PriceTable:not(.PriceTable--TdLeft) tbody td {
    white-space: nowrap;
  }
}
.PriceTable__Table tbody td .PriceTable__Sub {
  white-space: normal;
}

/* 報酬の目安: 例の文章が長いため小さめに */
.PriceTable--Example tbody th {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  font-weight: 500;
}

/* セル内の補足（内訳・カッコ書き） */
.PriceTable__Sub {
  display: block;
  margin-top: 4px;
  font-size: clamp(12px, 11.5617977528px + 0.1123595506vw, 13px);
  font-weight: 400;
  color: #5F5F5F;
}

/* 列が多い・文章の長い表はSPで横スクロール（ページ自体は横にはみ出さない） */
@media only screen and (max-width: 767px) {
  .PriceTable--Scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .PriceTable--Scroll .PriceTable__Table {
    min-width: 640px;
  }
}
/* 表の前の説明文 / 表の後の注記 / ご注意リスト */
.PriceLead {
  margin-bottom: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.PriceText {
  margin-top: clamp(14px, 11.3707865169px + 0.6741573034vw, 20px);
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #5F5F5F;
}

.PriceList li {
  position: relative;
  padding-left: 1.2em;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}
.PriceList li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}
.PriceList li + li {
  margin-top: 6px;
}

/*==================================================
 * 共通パーツ: PriceCta（料金セクション下の相談CTAボックス）
 * 法人顧問 / 事業承継 / 相続 の3ページで同一デザイン。parts/price-cta.php が出力する。
 * Figma 765:5820（919×351・写真背景＋青グラデ）。旧 ○○Price__Btns（2ボタン）を置換・集約。
 * 写真=priceCtaBg.jpg / バッジ吹き出し=priceCtaBadge.svg / 主ボタン矢印=iconArrowCircle.svg（白円+シアン）
 * / 副リンク矢印=caseViewArrow.svg（14.44px・紺円+白）。
*================================================*/
.PriceCta {
  position: relative;
  width: 100%;
  max-width: 919px;
  margin-top: clamp(28px, 22.7415730337px + 1.3483146067vw, 40px);
  margin-inline: auto;
  overflow: hidden;
  /* 写真に青グラデ(--gradePriceCta)を重ねる。先頭レイヤー=グラデ */
  background: var(--gradePriceCta), url(../img/priceCtaBg.jpg) center/cover no-repeat;
}

.PriceCta__Inner {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: clamp(28px, 24.4943820225px + 0.8988764045vw, 36px) clamp(15px, 2.7303370787px + 3.1460674157vw, 43px) clamp(26px, 23.3707865169px + 0.6741573034vw, 32px);
  text-align: center;
  color: var(--whiteColor);
}

.PriceCta__Badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: clamp(134px, 125.6741573034px + 2.1348314607vw, 153px);
  aspect-ratio: 153/48;
  padding-bottom: 10px; /* 吹き出し下の三角ノッチ分だけ文字を本体側へ寄せる */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: url(../img/priceCtaBadge.svg) no-repeat center/contain;
  font-size: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.07em; /* Figma: tracking 1.4 / 20px */
  color: var(--mainColor);
}

.PriceCta__BadgeEm {
  /* _main.scss の span{font-weight:400} を打ち消し、バッジ全体を bold で揃える */
  font-weight: bold;
  text-emphasis: filled dot var(--mainColor);
  text-emphasis-position: over;
  -webkit-text-emphasis: filled dot var(--mainColor);
  -webkit-text-emphasis-position: over;
}

.PriceCta__Title {
  margin-top: clamp(12px, 11.5617977528px + 0.1123595506vw, 13px);
  font-size: clamp(20px, 14.7415730337px + 1.3483146067vw, 32px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  /* Figma見出しフレーム834pxに対しボックス内幅833px（1px不足）で末尾が折れるため、
     フォント・ボックスとも最大値で固定される1280以上のみ1行固定（SP・tabは折返し可） */
}
@media only screen and (min-width: 1280px) {
  .PriceCta__Title {
    white-space: nowrap;
  }
}

.PriceCta__Label {
  display: inline-block;
  margin-right: 6px;
  padding: 0 clamp(8px, 6.2471910112px + 0.4494382022vw, 12px);
  border: 1px solid var(--whiteColor);
  line-height: 1.6;
}

.PriceCta__Lead {
  margin-top: clamp(8px, 7.1235955056px + 0.2247191011vw, 10px);
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

.PriceCta__Btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  margin-top: clamp(24px, 19.1797752809px + 1.2359550562vw, 35px);
  padding: 14px 18px 14px 22px;
  background-color: var(--subColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
  font-size: clamp(15px, 13.6853932584px + 0.3370786517vw, 18px);
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media only screen and (max-width: 767px) {
  .PriceCta__Btn {
    padding: 14px;
  }
}

.PriceCta__Btn:hover {
  opacity: 0.85;
}

.PriceCta__BtnIcon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
  width: 23px;
}
.PriceCta__BtnIcon img {
  width: 100%;
  margin: 0;
}

.PriceCta__Links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(20px, 16.4943820225px + 0.8988764045vw, 28px);
  margin-top: clamp(22px, 18.4943820225px + 0.8988764045vw, 30px);
}

.PriceCta__Link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--whiteColor);
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.PriceCta__Link:hover {
  opacity: 0.8;
}

.PriceCta__LinkIcon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
  width: 14.44px; /* 非スケール小アイコン */
}
.PriceCta__LinkIcon img {
  width: 100%;
  margin: 0;
}

@media only screen and (max-width: 767px) {
  .PriceCta__Btn {
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .PriceCta__BtnTxt {
    text-align: center;
  }
  .PriceCta__Links {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
  }
}
/* ============================================================
   _top.scss
   ============================================================ */
/*==================================================
 * TOPページ（front-page.php）
 * Y座標昇順のセクション順に記述。⚠️=アニメ付き（§4.5）
*================================================*/
/*==================================================
 * TopHeroArea（FV〜Message 青背景ゾーン）
 * heroBg(青背景写真＋波線)は未書き出しのため青グラデ＋シアン光で近似
*================================================*/
.TopHeroArea {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Figma heroBg（551:10273）のグラデーションを実寸書き出し */
  background: url(../img/bgNoise.png) left top/120px 120px repeat, var(--subColor) url(../img/bgHeroArea.jpg) no-repeat center/100% 100%;
}

/* 波打ち線あしらい（Figma bgItem 551:10286 / AB y=346 に配置） */
.TopHeroArea::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  margin-top: clamp(105px, -0.606741573px + 27.0786516854vw, 346px);
  aspect-ratio: 1280/2029;
  background: url(../img/bgWaveTop.png) no-repeat center top/100% auto;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/*==================================================
 * Hero（FV）⚠️
*================================================*/
.Hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@media print, screen and (min-width: 768px) {
  .Hero {
    /* 中央カラム幅と、左右カラムとの間隔。左写真・右2カラムはここから均等に算出する
       （1280: 中央313 / 間隔37.5 → 左446 / 右446 = Figma） */
    --heroCenterW: clamp(280px, 230.5px + 6.4453125vw, 313px);
    --heroGap: clamp(16px, -16.25px + 4.19921875vw, 37.5px);
    --heroSideW: calc((100% - var(--heroCenterW)) / 2 - var(--heroGap));
    /* 下限は 中央の縦書き見出し＋CTA が収まる高さ（768で約590px） */
    height: clamp(610px, 325px + 37.109375vw, 800px);
  }
}
@media only screen and (max-width: 767px) {
  .Hero {
    /* --headerH の SP値(56px)は .Header 内でしか上書きされないため、ここでも宣言。
       .Hero__SpPhotos の inset もこの値を参照する */
    --headerH: 56px;
    height: auto;
    /* Figma SP_FV: ヘッダー(51)下から573までの522pxを、上40 / 下38 の余白で構成 */
    padding: calc(var(--headerH) + 40px) 0 38px;
  }
}

/* 波打ち線あしらい（Figma hero内 bgItem 551:10277 / AB y=0〜900） */
.Hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1280/900;
  background: url(../img/bgWaveHero.png) no-repeat center top/100% auto;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/* 【2026-09-29 本人指示】波打ち線あしらいを「パララックス＋ゆらゆら」（TOPで試作→下層へ展開）
   対象: TOP  FV(.Hero::before) / 青背景全体(.TopHeroArea::before) / サービス(.TopService::before)
              / 代表挨拶(.TopGreeting::after)
         下層 事業所紹介(.AboutBg) / 採用FV(.RecruitHero__Wave)
         共通 お問い合わせ帯(.FotterCta__Band::after)
   ・パララックス: main.js が各セクションに --waveY を入れ、独立プロパティ translate で上下させる
     （セクションが画面中央に来たとき 0 = Figma どおりの位置）
   ・ゆらゆら: 下の @keyframes waveSway を transform で（揺れ幅は初版の小さい値。大きい版は本人判断で不採用）。translate と別プロパティなので両立する
     周期・位相・向きを波ごとにずらして揃わないようにする。画像は透過PNGなので回転しても端は見えない
   ・動きを減らす設定では両方とも無効（静止配置に戻る）
   ※当初の「背景固定」案は本人判断で不採用 */
@media (prefers-reduced-motion: no-preference) {
  .Hero::before,
  .TopHeroArea::before,
  .TopService::before,
  .TopGreeting::after,
  .FotterCta__Band::after,
  .AboutBg,
  .RecruitHero__Wave {
    translate: 0 var(--waveY, 0px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-animation: waveSway 14s ease-in-out infinite;
            animation: waveSway 14s ease-in-out infinite;
    will-change: transform, translate;
  }
  .TopHeroArea::before {
    -webkit-transform-origin: 50% 20%;
            transform-origin: 50% 20%;
    -webkit-animation-duration: 17s;
            animation-duration: 17s;
    -webkit-animation-delay: -4s;
            animation-delay: -4s;
    animation-direction: reverse;
  }
  .TopService::before {
    -webkit-animation-duration: 15s;
            animation-duration: 15s;
    -webkit-animation-delay: -2s;
            animation-delay: -2s;
  }
  .TopGreeting::after {
    -webkit-animation-duration: 16s;
            animation-duration: 16s;
    -webkit-animation-delay: -6s;
            animation-delay: -6s;
    animation-direction: reverse;
  }
  .FotterCta__Band::after {
    -webkit-animation-duration: 18s;
            animation-duration: 18s;
    -webkit-animation-delay: -3s;
            animation-delay: -3s;
  }
  /* 事業所紹介の波は縦4700px超の1枚絵。回転・縦伸縮を同じ値で掛けると上下端が大きく振れるため、
     平行移動とごく小さい回転だけの waveSwaySoft にする */
  .AboutBg {
    -webkit-animation-name: waveSwaySoft;
            animation-name: waveSwaySoft;
    -webkit-animation-duration: 16s;
            animation-duration: 16s;
    -webkit-animation-delay: -5s;
            animation-delay: -5s;
  }
  .RecruitHero__Wave {
    -webkit-animation-duration: 15s;
            animation-duration: 15s;
    -webkit-animation-delay: -7s;
            animation-delay: -7s;
    animation-direction: reverse;
  }
}
@-webkit-keyframes waveSway {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg) scale(1, 1);
            transform: translate(0, 0) rotate(0deg) scale(1, 1);
  }
  33% {
    -webkit-transform: translate(-1.5%, 10px) rotate(-1.2deg) scale(1.03, 1.08);
            transform: translate(-1.5%, 10px) rotate(-1.2deg) scale(1.03, 1.08);
  }
  66% {
    -webkit-transform: translate(1%, -8px) rotate(0.8deg) scale(1.02, 0.95);
            transform: translate(1%, -8px) rotate(0.8deg) scale(1.02, 0.95);
  }
}
@keyframes waveSway {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg) scale(1, 1);
            transform: translate(0, 0) rotate(0deg) scale(1, 1);
  }
  33% {
    -webkit-transform: translate(-1.5%, 10px) rotate(-1.2deg) scale(1.03, 1.08);
            transform: translate(-1.5%, 10px) rotate(-1.2deg) scale(1.03, 1.08);
  }
  66% {
    -webkit-transform: translate(1%, -8px) rotate(0.8deg) scale(1.02, 0.95);
            transform: translate(1%, -8px) rotate(0.8deg) scale(1.02, 0.95);
  }
}
@-webkit-keyframes waveSwaySoft {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  33% {
    -webkit-transform: translate(-1.5%, 10px) rotate(-0.2deg);
            transform: translate(-1.5%, 10px) rotate(-0.2deg);
  }
  66% {
    -webkit-transform: translate(1%, -8px) rotate(0.15deg);
            transform: translate(1%, -8px) rotate(0.15deg);
  }
}
@keyframes waveSwaySoft {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  33% {
    -webkit-transform: translate(-1.5%, 10px) rotate(-0.2deg);
            transform: translate(-1.5%, 10px) rotate(-0.2deg);
  }
  66% {
    -webkit-transform: translate(1%, -8px) rotate(0.15deg);
            transform: translate(1%, -8px) rotate(0.15deg);
  }
}
/* 左: 大写真（固定1枚） + テキスト */
@media print, screen and (min-width: 768px) {
  .Hero__Left {
    position: absolute;
    left: 0;
    top: var(--headerH);
    bottom: 0;
    width: var(--heroSideW);
    z-index: 2;
  }
}
@media only screen and (max-width: 767px) {
  .Hero__Left {
    display: none;
  }
}

/* SP: 左右2カラムの写真モザイク（Figma SP_FV 555:42101）
   カラム幅 124.066/390 = 31.81%、写真は 124.066x134.263、間隔3.4px。
   写真はPC右カラムと共通（左列4枚/右列3枚）。1周期分を3セット並べ、-33.333% までの移動で継ぎ目なくループ */
.Hero__SpPhotos {
  display: none;
}
@media only screen and (max-width: 767px) {
  .Hero__SpPhotos {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: absolute;
    /* 固定ヘッダーに隠れる領域を除いた可視レンジ（=Figmaの51〜573）に敷く */
    inset: var(--headerH) 0 0;
    z-index: 1;
    pointer-events: none;
  }
}

.Hero__SpCol {
  width: 31.81%;
  overflow: hidden;
}

.Hero__SpTrack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3.4px;
  /* 末尾にも gap 分を足して、1周期 = 4枚+4gap = track高の1/3 に揃える */
  padding-bottom: 3.4px;
  will-change: transform;
}
.Hero__SpTrack img {
  width: 100%;
  margin: 0;
  aspect-ratio: 124/134;
  -o-object-fit: cover;
     object-fit: cover;
}

.jsFvSpColDown {
  -webkit-animation: fvSpScrollDown 36s linear infinite;
          animation: fvSpScrollDown 36s linear infinite;
}

.jsFvSpColUp {
  -webkit-animation: fvSpScrollUp 27s linear infinite;
          animation: fvSpScrollUp 27s linear infinite; /* 右列は3枚=1周期が3/4のため、速さを左列に揃えて 36s×3/4 */
}

@-webkit-keyframes fvSpScrollDown {
  from {
    -webkit-transform: translateY(-33.3333%);
            transform: translateY(-33.3333%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fvSpScrollDown {
  from {
    -webkit-transform: translateY(-33.3333%);
            transform: translateY(-33.3333%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes fvSpScrollUp {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-33.3333%);
            transform: translateY(-33.3333%);
  }
}
@keyframes fvSpScrollUp {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-33.3333%);
            transform: translateY(-33.3333%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .jsFvSpColDown, .jsFvSpColUp {
    -webkit-animation: none;
            animation: none;
  }
}
.Hero__LeftImg {
  width: 100%;
  height: 100%;
}
.Hero__LeftImg img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.Hero__LeftText {
  position: absolute;
  left: clamp(20px, -2.5px + 2.9296875vw, 35px);
  bottom: clamp(20px, 9.5px + 1.3671875vw, 27px);
  z-index: 2;
  margin: 0;
  color: var(--whiteColor);
  font-size: clamp(13px, 8.5px + 0.5859375vw, 16px);
  line-height: 2;
  letter-spacing: 0.1em;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  /* 768〜1199: 左カラムが狭く、固定の3行改行だと「て、」等が1文字だけ次行に落ちるため、
     強制改行を外して文節単位で自然に折り返す */
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .Hero__LeftText {
    right: clamp(20px, -2.5px + 2.9296875vw, 35px);
    word-break: auto-phrase;
  }
  .Hero__LeftText br {
    display: none;
  }
}

/* 中央: ラベル + 縦書き見出し + CTA */
.Hero__Center {
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(16px, 10px + 0.78125vw, 20px);
}
@media print, screen and (min-width: 768px) {
  .Hero__Center {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: clamp(100px, 55px + 5.859375vw, 130px);
    width: var(--heroCenterW);
  }
}
@media only screen and (max-width: 767px) {
  .Hero__Center {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    /* SPは各要素の margin で Figma の間隔を再現するため gap は使わない */
    gap: 0;
  }
}

.Hero__Label {
  margin: 0;
  font-family: var(--fontMincho);
  font-size: clamp(15px, 13.6853932584px + 0.3370786517vw, 18px);
  color: var(--whiteColor);
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 767px) {
  .Hero__Label {
    /* Figma SP: 14px / 「住友泰輔」「税理士事務所」の2行（改行はHTML側のbr.sp）/ 行送り21 */
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
  }
}

.Hero__Vertical {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  /* Figma: 1文字の行ボックス73(=49x1.49)の半行送り分、文字開始を下げる */
  padding-top: clamp(8px, 2px + 0.78125vw, 12px);
  margin: 0 0 calc(-1 * clamp(8px, 2px + 0.78125vw, 12px));
  font-family: var(--fontMincho);
  font-weight: 500;
  font-size: clamp(34px, 11.5px + 2.9296875vw, 49px);
  line-height: 1;
  /* Figma: 字送り69.9px（49px + 20.9px）= 0.426em */
  letter-spacing: 0.426em;
  color: var(--whiteColor);
}
.Hero__Vertical span {
  display: block;
  white-space: nowrap;
  /* 列幅=font-size（_main.scssのspan既定1.6を打ち消す） */
  line-height: 1;
  /* Figma: 列間 24.75px（列幅49 / 列ピッチ73.75） */
  margin-left: clamp(14px, -2.5px + 2.1484375vw, 25px);
}
.Hero__Vertical span:last-child {
  margin-left: 0;
}
@media only screen and (max-width: 767px) {
  .Hero__Vertical {
    /* Figma SP: 32px / 字送り45.313（=0.416em）/ 列間21.455。
       最終文字の後にも字送りが1回分付くぶん（5.3px）を margin で詰め、
       Figma実寸の間隔17.79px に合わせる */
    margin-bottom: 12.5px;
    font-size: 32px;
    letter-spacing: 0.416em;
  }
  .Hero__Vertical span {
    margin-left: 21.5px;
  }
}

.Hero__Cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px;
  width: 100%;
  /* Figma 313x64・テキスト1行（折返し禁止） */
  white-space: nowrap;
  padding: 20px 14px;
  background-color: var(--accentColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
  color: var(--whiteColor);
  font-weight: 600;
  font-size: clamp(14px, 11px + 0.390625vw, 16px);
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
  .Hero__Cta {
    /* Figma SP: 304.878/390 = 78.17%、左右padding 13.87 = 4.55% */
    width: 78.17%;
    margin: 0 auto;
    padding: 17.3px 4.55%;
    border-radius: 3.5px;
    /* Figma: 行ボックス24px（58.674 = 17.337*2 + 24） */
    line-height: 1.5;
    /* 390px未満でも1行に収まるよう、狭い端末では文字も縮める */
    font-size: min(16px, 4.1vw);
  }
}

.Hero__CtaIcon {
  display: block;
  width: 23px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.Hero__CtaIcon img {
  width: 100%;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .Hero__CtaIcon {
    width: min(20px, 5.13vw);
  }
}

/* 右: 縦スクロール2カラム（カラムごとに逆方向・無限ループ） */
.Hero__Right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 7px;
  width: var(--heroSideW);
  z-index: 1;
}

.Hero__Col {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  overflow: hidden;
}

.Hero__ColInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
}
.Hero__ColInner img {
  width: 100%;
  margin: 0;
  aspect-ratio: 219/237;
  -o-object-fit: cover;
     object-fit: cover;
}

.jsFvColDown {
  -webkit-animation: fvScrollDown 40s linear infinite;
          animation: fvScrollDown 40s linear infinite;
}

.jsFvColUp {
  -webkit-animation: fvScrollUp 40s linear infinite;
          animation: fvScrollUp 40s linear infinite;
}

@-webkit-keyframes fvScrollDown {
  from {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fvScrollDown {
  from {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes fvScrollUp {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@keyframes fvScrollUp {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .jsFvColDown, .jsFvColUp {
    -webkit-animation: none;
            animation: none;
  }
}
/*==================================================
 * HeroBottom（FV下 5カード）
*================================================*/
.HeroBottom {
  position: relative;
  z-index: 2;
  padding-top: clamp(24px, 19.1797752809px + 1.2359550562vw, 35px);
}
@media only screen and (max-width: 767px) {
  .HeroBottom {
    /* Figma SP: FV下端573 → heroBottom上端604 */
    padding-top: 31px;
    /* 5枚を1列に並べて画面外へはみ出させる（横マーキー） */
    overflow: hidden;
  }
}

.HeroBottom__List {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(8px, 6.6853932584px + 0.3370786517vw, 11px);
  /* Figma: x=60 / w=1159（paddingで二重に内側へ寄せない） */
  width: min(100% - 32px, 1159px);
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .HeroBottom__List {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin: 0;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    gap: 9.8px;
    /* 末尾にも gap 分を足し、1周期 = 5枚+5gap = track幅の1/2 に揃える */
    padding-right: 9.8px;
    will-change: transform;
    -webkit-animation: heroBottomMarquee 30s linear infinite;
            animation: heroBottomMarquee 30s linear infinite;
  }
}

@-webkit-keyframes heroBottomMarquee {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

@keyframes heroBottomMarquee {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .HeroBottom__List {
    -webkit-animation: none;
            animation: none;
  }
}
.HeroBottom__Card {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0;
  min-height: clamp(104px, 96.9887640449px + 1.797752809vw, 120px);
  /* Figma: 内枠 201x96 / padding 12-11。サブ文が201を超えるため左右は8で確保 */
  padding: 12px 8px;
  text-align: center;
  background-color: var(--whiteColor);
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
          box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
}
@media only screen and (max-width: 767px) {
  .HeroBottom__Card {
    /* Figma SP: 198.541x107.993 / padding 10.684-9.794 */
    -webkit-box-flex: 0;
        -ms-flex: 0 0 198.5px;
            flex: 0 0 198.5px;
    /* 折返し禁止のサブ文（最大183px）が min-width:auto でカード幅を押し広げるのを防ぐ */
    min-width: 0;
    min-height: 108px;
    padding: 10.7px 9.8px;
    border-radius: 3.5px;
    -webkit-box-shadow: inset 0 0 8.9px 0 rgba(34, 56, 155, 0.34);
            box-shadow: inset 0 0 8.9px 0 rgba(34, 56, 155, 0.34);
  }
}

/* SP横マーキーのループ用複製 */
@media print, screen and (min-width: 768px) {
  .HeroBottom__Card--Dup {
    display: none;
  }
}

.HeroBottom__Icon {
  display: block;
  width: clamp(30px, 27.3707865169px + 0.6741573034vw, 36px);
}
.HeroBottom__Icon img {
  width: 100%;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .HeroBottom__Icon {
    width: 32px;
  }
}

.HeroBottom__Title {
  margin: 9px 0 0;
  font-family: var(--fontMincho);
  font-weight: 500;
  font-size: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .HeroBottom__Title {
    margin-top: 8px;
    font-size: 17.8px;
  }
}

.HeroBottom__Sub {
  margin: 4px 0 0;
  font-size: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .HeroBottom__Sub {
    margin-top: 3.5px;
    font-size: 12.4px;
    line-height: 1.64;
    /* 「銀行とのやり取りがスムーズに」等が内枠をわずかに超えるため折返し禁止（Figma同様） */
    white-space: nowrap;
  }
}

/*==================================================
 * TopMessage
*================================================*/
.TopMessage {
  position: relative;
  z-index: 2;
  /* Figma: heroBottom下端955→1052 / 下端1701→topApproach 1847 */
  padding-block: clamp(56px, 38.0337078652px + 4.606741573vw, 97px) clamp(56px, 16.5617977528px + 10.1123595506vw, 146px);
}

.TopMessage__Inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  /* Figma: topMessage は x=0〜1212 */
  max-width: 1280px;
  margin: 0 auto;
  padding-right: clamp(0px, -29.797752809px + 7.6404494382vw, 68px);
}
@media only screen and (max-width: 767px) {
  .TopMessage__Inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-inline: 20px;
    padding-top: 100px;
    gap: 28px;
  }
}

.TopMessage__Photo {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(280px, 40px + 31.25vw, 440px);
  margin-top: 3px;
}
@media only screen and (max-width: 767px) {
  .TopMessage__Photo {
    margin-left: -20px;
    width: calc(100% + 40px);
  }
}
.TopMessage__Photo img {
  width: 100%;
  margin: 0;
  aspect-ratio: 440/599;
  -o-object-fit: cover;
     object-fit: cover;
}

.TopMessage__Body {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* Figma: x=482 / w=489（写真440 + 42） */
  width: clamp(300px, 16.5px + 36.9140625vw, 489px);
  padding-top: clamp(40px, -29px + 8.984375vw, 86px);
  padding-left: clamp(24px, -3px + 3.515625vw, 42px);
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  color: var(--whiteColor);
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
}
@media print, screen and (min-width: 768px) {
  .TopMessage__Body {
    /* 1024〜1279: 本文幅が詰まり「活かし、」の「し、」が1文字だけ落ちるため、文字も1024起点で縮める */
    font-size: clamp(14px, 6px + 0.78125vw, 16px);
  }
}
@media only screen and (max-width: 767px) {
  .TopMessage__Body {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0;
  }
}
.TopMessage__Body p {
  margin: 0 0 1.94em;
  line-height: 1.94;
}
.TopMessage__Body p:last-child {
  margin-bottom: 0;
}

.TopMessage__Heads {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(18px, 1.5px + 2.1484375vw, 29px);
  margin-left: auto;
}
@media only screen and (max-width: 767px) {
  .TopMessage__Heads {
    text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.08);
    position: absolute;
    top: 0;
    right: 10px;
  }
}

.TopMessage__Vertical {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  margin: 0;
  font-family: var(--fontMincho);
  font-weight: 500;
  font-size: clamp(30px, 9px + 2.734375vw, 44px);
  line-height: 1;
  /* Figma: 字送り54px（44px + 10px）= 0.227em */
  letter-spacing: 0.227em;
  color: var(--whiteColor);
}
.TopMessage__Vertical span {
  position: relative;
  display: block;
  white-space: nowrap;
  /* 列幅=font-size（_main.scssのspan既定1.6を打ち消す） */
  line-height: 1;
  --colOffset: 0px;
  /* Figma: 2列目（経営者の判断に向き合う）は59px下げの段差 */
  padding-top: var(--colOffset);
  padding-right: clamp(7px, 2.5px + 0.5859375vw, 10px);
  text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6);
}
.TopMessage__Vertical {
  /* Figma Vector 1/2: 各列の右側に縦線（列頭から約5px下げ） */
}
.TopMessage__Vertical span::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(var(--colOffset) + 5px);
  bottom: 0;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.4);
}
.TopMessage__Vertical span:not(:last-child) {
  margin-left: clamp(16px, 4px + 1.5625vw, 24px);
}
.TopMessage__Vertical span:last-child {
  --colOffset: clamp(40px, 11.5px + 3.7109375vw, 59px);
}

.TopMessage__Label {
  -ms-flex-item-align: start;
      align-self: flex-start;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: sideways;
  font-family: var(--fontEn);
  font-size: clamp(24px, 12px + 1.5625vw, 32px);
  letter-spacing: 0.1em;
  color: var(--whiteColor);
  /* Figma: セクション上端から9px下 */
  margin-top: clamp(6px, 1.5px + 0.5859375vw, 9px);
  text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6);
}

/* 768〜1023: 写真・本文・縦書き見出しの3カラムが入りきらず本文と見出しが重なるため、
   上段=写真＋縦書き見出し / 下段=本文 に組み替える（本文の改行はPCと同じ位置のまま） */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .TopMessage__Inner {
    display: grid;
    grid-template-columns: clamp(380px, 78.8235294118px + 39.2156862745vw, 480px) 1fr;
    grid-template-areas: "photo heads" "body  body";
    padding-right: 0;
  }
  .TopMessage__Photo {
    grid-area: photo;
    width: 100%;
  }
  .TopMessage__Heads {
    grid-area: heads;
    justify-self: center;
    margin-left: 0;
  }
  .TopMessage__Body {
    grid-area: body;
    justify-self: center;
    width: auto;
    padding: 56px 40px 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}
/*==================================================
 * TopApproach（アプローチ図解）
*================================================*/
.TopApproach {
  --approachSecBg: #E8ECEF;
  --approachCardL: #D2EEF9;
  --approachCardR: #E0E5F8;
  position: relative;
  /* 透かし文字はセクション上端より上（青ゾーン）へはみ出す（Figma準拠）ため overflow は切らない */
  /* Figma: 1847〜2998（上133 / 下99） */
  padding: clamp(80px, 56.7752808989px + 5.9550561798vw, 133px) 15px clamp(48px, 34.4157303371px + 3.4831460674vw, 79px);
  background-color: var(--approachSecBg);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(232, 236, 239, 0.95)), to(rgba(232, 236, 239, 0.95))), url(../img/topApproachBg.jpg);
  background-image: linear-gradient(rgba(232, 236, 239, 0.95), rgba(232, 236, 239, 0.95)), url(../img/topApproachBg.jpg);
  background-size: cover;
  background-position: center;
}

/* 透かし文字: セクション上へはみ出しつつ左右はビューポート幅でクリップ */
.TopApproach__WatermarkWrap {
  position: absolute;
  top: calc(-1 * clamp(41px, 15.1460674157px + 6.6292134831vw, 100px));
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* 2本のセグメントを並べ、track を -50%（＝1セグメント分）動かして継ぎ目なく無限ループ */
.TopApproach__WatermarkTrack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: watermarkMarquee 60s linear infinite;
          animation: watermarkMarquee 60s linear infinite;
}

.TopApproach__Watermark {
  margin: 0;
  font-size: clamp(64px, 26.3146067416px + 9.6629213483vw, 150px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  text-shadow: 2px 2px 20px rgba(8, 15, 44, 0.05);
  white-space: nowrap;
}

/* 透かし文字マーキー共通（TopApproach / TopRecruit） */
@-webkit-keyframes watermarkMarquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes watermarkMarquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.TopApproach__Head {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 18px;
  text-align: center;
  color: var(--fontColor);
}

.TopApproach__Title {
  margin: 0;
  font-family: var(--fontMincho);
  font-weight: 500;
  font-size: clamp(23px, 15.5505617978px + 1.9101123596vw, 40px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-decoration-color: var(--subColor);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.TopApproach__Lead {
  margin: 0;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.TopApproach__Diagram {
  position: relative;
  z-index: 1;
  /* Figma 485:5106 Frame 1406 = 1107.5x601（2026-09-17 書き出し直し。帯は含まない） */
  width: min(100% - 40px, 1108px);
  margin: clamp(32px, 24.9887640449px + 1.797752809vw, 48px) auto 0;
}

.TopApproach__DiagramImg {
  display: block;
  width: 100%;
  margin: 0;
  /* PC図版 = Figma 485:5106（1107.5x601） */
  aspect-ratio: 1108/601;
  /* SP図版 = topApproachDiagramSp.png（338x1249・2026-09-20 SP専用書き出し） */
}
@media only screen and (max-width: 767px) {
  .TopApproach__DiagramImg {
    aspect-ratio: 338/1249;
  }
}

/* 図版下の帯（Figma 485:5227 Frame 1404）。白箱1108x110・角丸24・内側シャドウ */
.TopApproach__Summary {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 1108px);
  /* Figma: 図版下端601 → 白箱上端639 */
  margin: clamp(24px, 17.8651685393px + 1.5730337079vw, 38px) auto 0;
  padding: clamp(20px, 19.1235955056px + 0.2247191011vw, 22px) clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
  background-color: var(--whiteColor);
  border-radius: clamp(12px, 6.7415730337px + 1.3483146067vw, 24px);
  -webkit-box-shadow: inset 0 0 6px 0 rgba(48, 51, 64, 0.15);
          box-shadow: inset 0 0 6px 0 rgba(48, 51, 64, 0.15);
  text-align: center;
}

.TopApproach__SummaryTxt {
  margin: 0;
  /* Figma: YuMincho Medium 22 / 行高1.5 / 字送り0.05em */
  font-size: clamp(17px, 14.808988764px + 0.5617977528vw, 22px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

/* マーカー（#01B9FF 20%・高さ28px） */
.TopApproach__Marker {
  display: inline;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  background-color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(1, 185, 255, 0.2)), to(rgba(1, 185, 255, 0.2)));
  background-image: linear-gradient(rgba(1, 185, 255, 0.2), rgba(1, 185, 255, 0.2));
  background-repeat: no-repeat;
  background-size: 100% clamp(22px, 19.3707865169px + 0.6741573034vw, 28px);
  /* 帯の上端が字面の3px上に来る位置（游明朝のインラインボックス基準で実測調整） */
  background-position: 0 clamp(6px, 5.1235955056px + 0.2247191011vw, 8px);
}

/* あしらい（引用符）: Figma 69.25x54・白箱上端から14px上・右端から6.3% */
.TopApproach__SummaryQuote {
  position: absolute;
  right: 6.3%;
  top: calc(-1 * clamp(10px, 8.2471910112px + 0.4494382022vw, 14px));
  width: clamp(26px, 7.1573033708px + 4.8314606742vw, 69px);
  line-height: 0;
  pointer-events: none;
}
.TopApproach__SummaryQuote img {
  width: 100%;
  margin: 0;
}

/*==================================================
 * TopService ⚠️（横スクロールカルーセル）
*================================================*/
.TopService {
  /* pinスペーサー部がブルー面と地続きに見えるよう、グラデ下端色を敷く */
  --serviceSpacerBg: #0F64AB;
  position: relative;
  overflow: hidden;
  background: url(../img/bgNoise.png) left top/120px 120px repeat, var(--serviceSpacerBg);
}

/* 波打ち線あしらい（Figma topService内 Group 2628） */
.TopService::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  margin-top: calc(-1 * clamp(6px, 0.7415730337px + 1.3483146067vw, 18px));
  aspect-ratio: 1280/640;
  background: url(../img/bgWaveService.png) no-repeat center top/100% auto;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.TopService__Top {
  position: relative;
  z-index: 1;
  width: 100%;
  line-height: 0;
}
.TopService__Top img {
  width: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom;
     object-position: bottom;
}

.TopService__Blue {
  position: relative;
  z-index: 1;
}
@media print, screen and (min-width: 768px) {
  .TopService__Blue {
    padding-block: clamp(40px, 32.9887640449px + 1.797752809vw, 56px) 0;
  }
}
@media only screen and (max-width: 767px) {
  .TopService__Blue {
    padding-block: clamp(40px, 32.9887640449px + 1.797752809vw, 56px) clamp(60px, 46.8539325843px + 3.3707865169vw, 90px);
  }
}

.TopService__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* Figma: Service(100) → サービス案内 は 6px */
  gap: 6px;
  padding: 0 20px;
  text-align: center;
  color: var(--whiteColor);
}
@media print, screen and (min-width: 768px) {
  .TopService__Head {
    padding-bottom: clamp(32px, 21.4831460674px + 2.6966292135vw, 56px);
  }
}
@media only screen and (max-width: 767px) {
  .TopService__Head {
    padding-block: clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
  }
}

.TopService__En {
  font-size: clamp(38px, 10.8314606742px + 6.9662921348vw, 100px);
  line-height: 1;
  letter-spacing: 0.05em;
}

.TopService__Label {
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.TopService__Lead {
  /* Figma: 見出し下端122 → 178（56px）。PCは1画面化のため詰める */
  margin-top: clamp(32px, 21.4831460674px + 2.6966292135vw, 56px);
  font-family: var(--fontMincho);
  font-size: clamp(17px, 13.9325842697px + 0.7865168539vw, 24px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media print, screen and (min-width: 768px) {
  .TopService__Lead {
    white-space: nowrap;
  }
}

.TopService__TrackWrap {
  /* ピン対象。1画面（100svh）を丸ごとカード列に使う。
     画面が低い環境では JS がカードを等倍縮小して切れないようにする */
}
@media print, screen and (min-width: 768px) {
  .TopService__TrackWrap {
    height: 100vh;
    height: 100svh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden;
    /* 固定ヘッダーに潜らせない（項目の多い02のカード上端がヘッダーに接しないよう余白を足す） */
    padding-top: calc(var(--headerH) + clamp(16px, 4px + 1.5625vw, 24px));
    padding-bottom: clamp(16px, 12.4943820225px + 0.8988764045vw, 24px);
  }
}
@media only screen and (max-width: 767px) {
  .TopService__TrackWrap {
    padding-inline: 20px;
  }
}

.TopService__Track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* Figmaはカード（写真444+50+本文450=944）が隙間なしで連続していたが、
     前のサービスの本文と次のサービスの写真が1組に見えてしまうため間隔を空ける（2026-09-29 本人指示） */
  gap: clamp(96px, 0px + 12.5vw, 160px);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: clamp(24px, -123px + 19.140625vw, 122px);
  /* スクロール終端で3枚目の右にも左端と同じ余白を残す（2026-10-07 本人指示） */
  padding-right: clamp(24px, -123px + 19.140625vw, 122px);
  will-change: transform;
}
@media only screen and (max-width: 767px) {
  .TopService__Track {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 40px;
    padding: 0;
  }
}

/* 横スクロールの案内（丸＋矢印＋Scroll）。SPはカードが縦積みなので出さない
   左端（トラックの左余白の位置）に置き、すぐ右に1枚目が続く位置関係にする。
   1枚目は全部見せ、2枚目の頭が右端で少し見切れるのが理想（2026-10-09 本人指示）。
   トラックは低い画面でJSが等倍縮小する（--serviceScale）ので、vw は縮小率で割り戻す */
.TopService__ScrollHint {
  --hintVw: calc(1vw / var(--serviceScale, 1));
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(64px, 40px + 3.125vw, 80px);
  /* 2枚目の左端が画面幅の90%より右に出てしまう画面だけ、案内＋1枚目を左へ寄せる（左端24pxまで）。
     幅に余裕のある画面では寄せない（=左余白の位置のまま） */
  margin-left: clamp(24px - clamp(24px, -123px + 19.140625vw, 122px), var(--hintVw) * 90 - clamp(24px, -123px + 19.140625vw, 122px) - clamp(64px, 40px + 3.125vw, 80px) - clamp(28px, -2px + 3.90625vw, 48px) - calc(clamp(300px, 84px + 28.125vw, 444px) + clamp(24px, -15px + 5.078125vw, 50px) + 450px) - clamp(96px, 0px + 12.5vw, 160px), 0px);
  /* 1枚目との間はカード間より狭くして、案内が1枚目に付いて見えるようにする */
  margin-right: calc(clamp(28px, -2px + 3.90625vw, 48px) - clamp(96px, 0px + 12.5vw, 160px));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(12px, 6px + 0.78125vw, 16px);
  color: var(--whiteColor);
}
@media only screen and (max-width: 767px) {
  .TopService__ScrollHint {
    display: none;
  }
}

.TopService__ScrollHintCircle {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(64px, 40px + 3.125vw, 80px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  overflow: hidden;
}

.TopService__ScrollHintArrow {
  width: 12%;
  height: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .TopService__ScrollHintArrow {
    -webkit-animation: serviceScrollHint 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
            animation: serviceScrollHint 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }
}

/* 右へ抜けて、左から戻ってくる */
@-webkit-keyframes serviceScrollHint {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  45% {
    -webkit-transform: translateX(120%);
            transform: translateX(120%);
    opacity: 0;
  }
  46% {
    -webkit-transform: translateX(-120%);
            transform: translateX(-120%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes serviceScrollHint {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  45% {
    -webkit-transform: translateX(120%);
            transform: translateX(120%);
    opacity: 0;
  }
  46% {
    -webkit-transform: translateX(-120%);
            transform: translateX(-120%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
.TopService__ScrollHintText {
  font-size: clamp(16px, 10px + 0.78125vw, 20px);
  line-height: 1;
  letter-spacing: 0.1em;
}

/* サービスカード */
.ServiceCard {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(24px, -15px + 5.078125vw, 50px);
}
@media only screen and (max-width: 767px) {
  .ServiceCard {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 20px;
  }
}

.ServiceCard__Photo {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(300px, 84px + 28.125vw, 444px);
  aspect-ratio: 444/596;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .ServiceCard__Photo {
    width: 100%;
    aspect-ratio: 16/10;
  }
}
.ServiceCard__Photo img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.ServiceCard__Body {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(16px, 4px + 1.5625vw, 24px);
  /* 本文幅はFigma実寸で固定（横スクロールなので幅を縮める必要がなく、縮めると
     「まで。」「したい」等の1〜2文字だけが次行に落ちる）。画面が低い場合はJSがカードごと等倍縮小する */
  width: 450px;
  padding-right: 0;
  color: var(--whiteColor);
}
@media only screen and (max-width: 767px) {
  .ServiceCard__Body {
    width: 100%;
  }
}

.ServiceCard__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 379px;
  max-width: 100%;
}
@media only screen and (max-width: 767px) {
  .ServiceCard__Head {
    width: 100%;
  }
}

.ServiceCard__Badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 4px 22px;
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  color: var(--subColor);
  background-color: var(--whiteColor);
  border-radius: 50px;
}
@media only screen and (max-width: 767px) {
  .ServiceCard__Badge {
    padding: 1px 16px;
  }
}

.ServiceCard__Pager {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  font-size: 14px;
  letter-spacing: 0.05em;
}

.ServiceCard__PagerLine {
  display: block;
  width: 66px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.6);
}

.ServiceCard__PagerTotal {
  opacity: 0.5;
}

.ServiceCard__Title {
  margin: 0;
  font-family: var(--fontMincho);
  font-size: clamp(26px, 11px + 1.953125vw, 36px);
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.ServiceCard__Sub {
  margin: 0;
  font-weight: 600;
  font-size: clamp(17px, 14.808988764px + 0.5617977528vw, 22px);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ServiceCard__Desc {
  margin: 0;
  font-size: clamp(13px, 11.6853932584px + 0.3370786517vw, 16px);
  letter-spacing: 0.05em;
}

.ServiceCard__Box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 373px;
  max-width: 100%;
  padding: 12px 18px;
  background-color: var(--whiteColor);
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
          box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
}
@media only screen and (max-width: 767px) {
  .ServiceCard__Box {
    padding-inline: 10px;
    width: 100%;
  }
}

.ServiceCard__BoxLabel {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  color: var(--whiteColor);
  background-color: var(--subColor);
  border-radius: 50px;
}

.ServiceCard__List {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
  margin: 0;
}
.ServiceCard__List li {
  position: relative;
  padding-left: 13px;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}
.ServiceCard__List li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--accentColor);
}
@media only screen and (max-width: 767px) {
  .ServiceCard__List {
    gap: 5px;
  }
  .ServiceCard__List li {
    font-size: 14px;
  }
}

.ServiceCard__Btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  -ms-flex-item-align: start;
      align-self: flex-start;
  padding: 14px 18px 14px 22px;
  font-weight: 600;
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  color: var(--whiteColor);
  letter-spacing: 0.05em;
  background-color: var(--subColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
}
@media only screen and (max-width: 767px) {
  .ServiceCard__Btn {
    margin-left: auto;
  }
}

.ServiceCard__BtnIcon {
  display: block;
  width: 23px;
}
.ServiceCard__BtnIcon img {
  width: 100%;
  margin: 0;
}

/*==================================================
 * TopReason ⚠️（左sticky / 右3カードスクロール）
*================================================*/
.TopReason {
  background-color: var(--whiteColor);
  /* Figma: 4449〜6247（上99 / 下94） */
  padding: clamp(60px, 42.9101123596px + 4.3820224719vw, 99px) 0 clamp(60px, 45.1011235955px + 3.8202247191vw, 94px);
}

.TopReason__Inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
  /* Figma: x=59 / w=1161 */
  width: min(100% - 48px, 1161px);
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .TopReason__Inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 40px;
  }
}

.TopReason__Left {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* Figma: 引用ボックス幅444（見出しは361） */
  width: clamp(280px, -212px + 51.25vw, 444px);
}
@media print, screen and (min-width: 768px) {
  .TopReason__Left {
    position: sticky;
    top: calc(var(--headerH) + 40px);
  }
}
@media only screen and (max-width: 767px) {
  .TopReason__Left {
    width: 100%;
  }
}

.TopReason__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
}

.TopReason__En {
  font-size: clamp(42px, 16.5842696629px + 6.5168539326vw, 100px);
  line-height: 1;
  letter-spacing: 0.05em;
  background: linear-gradient(149deg, var(--accentColor) 0%, var(--subColor) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  color: transparent;
}

.TopReason__Label {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--mainColor);
  line-height: 1.2;
}

.TopReason__Lead {
  margin-top: clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
  font-family: var(--fontMincho);
  font-size: clamp(16px, 15.1235955056px + 0.2247191011vw, 18px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.TopReason__Box {
  position: relative;
  /* Figma: リード下端189 → ボックス上端422 */
  margin-top: clamp(40px, -44.5730337079px + 21.6853932584vw, 233px);
  padding: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px) clamp(18px, 15.808988764px + 0.5617977528vw, 23px) clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  background-color: var(--whiteColor);
  border-radius: clamp(12px, 6.7415730337px + 1.3483146067vw, 24px);
  -webkit-box-shadow: inset 0 0 6px 0 rgba(48, 51, 64, 0.15);
          box-shadow: inset 0 0 6px 0 rgba(48, 51, 64, 0.15);
}

.TopReason__Quote {
  position: absolute;
  top: calc(-1 * clamp(10px, 8.2471910112px + 0.4494382022vw, 14px));
  right: clamp(16px, 12.4943820225px + 0.8988764045vw, 24px);
  width: clamp(26px, 7.1573033708px + 4.8314606742vw, 69px);
}
.TopReason__Quote img {
  width: 100%;
  margin: 0;
}

.TopReason__BoxText {
  margin: 0;
  font-family: var(--fontMincho);
  font-size: clamp(18px, 16.2471910112px + 0.4494382022vw, 22px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.TopReason__Mark {
  /* Figma Rectangle 215: 行高33に対し28のマーカー */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(15%, transparent), color-stop(15%, rgba(1, 185, 255, 0.22)));
  background: linear-gradient(transparent 15%, rgba(1, 185, 255, 0.22) 15%);
}

.TopReason__Right {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* Figma: x=640 / w=580 / セクション上端+18 */
  width: clamp(320px, -460px + 81.25vw, 580px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* Figma: カード実体507 + 間隔30（フレーム513 + 24） */
  gap: 30px;
  padding-top: 18px;
}
@media only screen and (max-width: 767px) {
  .TopReason__Right {
    width: 100%;
    padding-top: 0;
  }
}

.ReasonCard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(16px, 12.4943820225px + 0.8988764045vw, 24px);
}

.ReasonCard__Photo {
  position: relative;
  aspect-ratio: 580/351;
  /* 番号(01〜03)が写真下へはみ出すため clip しない（Figma準拠）。
     画像は絶対配置にして aspect-ratio の高さを確定させる */
}
.ReasonCard__Photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.ReasonCard__Num {
  position: absolute;
  right: clamp(4px, 2.2471910112px + 0.4494382022vw, 8px);
  bottom: calc(-1 * clamp(38px, 28.3595505618px + 2.4719101124vw, 60px));
  font-style: italic;
  font-size: clamp(42px, 16.5842696629px + 6.5168539326vw, 100px);
  line-height: 1;
  letter-spacing: 0.05em;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, var(--accentColor)), to(var(--subColor)));
  background: linear-gradient(180deg, var(--accentColor) 10%, var(--subColor) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  color: transparent;
  pointer-events: none;
}

.ReasonCard__Body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.ReasonCard__Badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 4px 16px;
  font-family: var(--fontMincho);
  font-size: 14px;
  line-height: 20px;
  color: var(--whiteColor);
  background-color: var(--subColor);
  border-radius: 50px;
}

.ReasonCard__Title {
  /* Figma: バッジ下端28 → タイトル40（12px） */
  margin: 12px 0 0;
  font-family: var(--fontMincho);
  font-weight: 500;
  font-size: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px);
  line-height: 1.333;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.ReasonCard__Desc {
  /* Figma: タイトル下端32 → 本文40（8px） */
  margin: 8px 0 0;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

/*==================================================
 * TopGreeting（代表挨拶）
*================================================*/
.TopGreeting {
  position: relative;
  overflow: hidden;
  /* Figma: 6247〜7315（上101 / 下50） */
  padding-block: clamp(72px, 59.2921348315px + 3.2584269663vw, 101px) clamp(40px, 35.6179775281px + 1.1235955056vw, 50px);
  /* Figma Group 2630 のグラデーション */
  background: url(../img/bgNoise.png) left top/120px 120px repeat, var(--subColor) url(../img/bgGreeting.jpg) no-repeat center/100% 100%;
}

/* 波打ち線あしらい（Figma topGreeting内 Frame 1419） */
.TopGreeting::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  margin-top: clamp(9px, 0.2359550562px + 2.2471910112vw, 29px);
  aspect-ratio: 1280/1020;
  background: url(../img/bgWaveGreeting.png) no-repeat center top/100% auto;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.TopGreeting__Inner {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  /* Figma: 縦見出し x=120 / 本文 x=319 / Greeting右端 1215 */
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(24px, -18.0674157303px + 10.7865168539vw, 120px);
  padding-right: clamp(24px, 19.1797752809px + 1.2359550562vw, 35px);
}
@media only screen and (max-width: 767px) {
  .TopGreeting__Inner {
    /* SP: 横書きで Greeting/代表挨拶 → 見出し → 写真・本文 の縦積み */
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas: "label" "vertical" "center";
    justify-items: center;
    gap: 24px;
  }
}

.TopGreeting__Vertical {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  margin: 0 clamp(40px, -44px + 8.75vw, 68px) 0 0;
  padding-top: clamp(20px, -82px + 10.625vw, 54px);
  font-family: var(--fontMincho);
  font-weight: 500;
  font-size: clamp(28px, -20px + 5vw, 44px);
  line-height: 1;
  /* Figma: 字送り54px（44 + 10）= 0.227em */
  letter-spacing: 0.227em;
  color: var(--whiteColor);
}
.TopGreeting__Vertical span {
  position: relative;
  display: block;
  white-space: nowrap;
  line-height: 1;
  --colOffset: 0px;
  padding-top: var(--colOffset);
  padding-right: clamp(7px, -2px + 0.9375vw, 10px);
}
.TopGreeting__Vertical {
  /* Figma Vector 1/2: 各列の右に縦線 */
}
.TopGreeting__Vertical span::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(var(--colOffset) + 5px);
  bottom: 0;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.4);
}
.TopGreeting__Vertical span:not(:last-child) {
  margin-left: clamp(16px, -8px + 2.5vw, 24px);
}
.TopGreeting__Vertical span:last-child {
  --colOffset: clamp(40px, -17px + 5.9375vw, 59px);
}
@media only screen and (max-width: 767px) {
  .TopGreeting__Vertical {
    grid-area: vertical;
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
    margin: 0 0 8px;
    padding-top: 0;
    font-size: 22px;
    letter-spacing: 0.05em;
    text-align: center;
  }
  .TopGreeting__Vertical span,
  .TopGreeting__Vertical span:not(:last-child) {
    margin: 0;
    padding: 0;
    line-height: 1.6;
  }
  .TopGreeting__Vertical span:last-child {
    --colOffset: 0px;
  }
  .TopGreeting__Vertical span::after {
    display: none;
  }
}

.TopGreeting__Center {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: clamp(420px, -249px + 69.6875vw, 643px);
  max-width: 100%;
  color: var(--whiteColor);
}
@media only screen and (max-width: 767px) {
  .TopGreeting__Center {
    grid-area: center;
    justify-self: center;
    width: 100%;
    max-width: 460px;
  }
}

.TopGreeting__Photo {
  aspect-ratio: 643/345;
  overflow: hidden;
}
.TopGreeting__Photo img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (max-width: 767px) {
  .TopGreeting__Photo {
    margin-left: -25px;
    width: calc(100% + 50px);
  }
}

.TopGreeting__Text {
  margin-top: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
}
.TopGreeting__Text p {
  /* Figma: 行送り20px / 段落間40px */
  margin: 0 0 1.25em;
}
.TopGreeting__Text p:last-child {
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  .TopGreeting__Text p {
    line-height: 1.6;
  }
}

.TopGreeting__Name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 20px;
  padding-right: clamp(0px, -81px + 8.4375vw, 27px);
  margin: clamp(12px, 12px + 0vw, 12px) 0 0;
  font-family: var(--fontMincho);
}

.TopGreeting__NameRole {
  letter-spacing: 0.05em;
}

.TopGreeting__NameMain {
  font-weight: 500;
  font-size: clamp(18px, 16.2471910112px + 0.4494382022vw, 22px);
  letter-spacing: 0.05em;
}

.TopGreeting__Career {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-top: clamp(16px, 18.6292134831px + -0.6741573034vw, 10px);
  padding: 12px 18px;
  background-color: var(--whiteColor);
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
          box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
}

.TopGreeting__CareerLabel {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  color: var(--whiteColor);
  background-color: var(--subColor);
  border-radius: 50px;
}

.TopGreeting__CareerList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 11px; /* Figma: 行高14 / ピッチ25 */
  margin: 0;
}
.TopGreeting__CareerList li {
  position: relative;
  padding-left: 13px;
  font-size: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}
.TopGreeting__CareerList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--accentColor);
}

.TopGreeting__Btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  -ms-flex-item-align: center;
      align-self: center;
  margin-top: clamp(20px, 18.6853932584px + 0.3370786517vw, 23px);
  padding: 14px 18px 14px 22px;
  font-weight: 600;
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  color: var(--whiteColor);
  letter-spacing: 0.05em;
  background-color: var(--subColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
}

.TopGreeting__BtnIcon {
  display: block;
  width: 23px;
}
.TopGreeting__BtnIcon img {
  width: 100%;
  margin: 0;
}

.TopGreeting__Label {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(14px, -7px + 2.1875vw, 21px);
  margin-left: auto;
}
@media only screen and (max-width: 767px) {
  .TopGreeting__Label {
    grid-area: label;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse; /* DOMは 代表挨拶→Greeting。横書きでは英字を上に */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    margin-left: 0;
  }
}

.TopGreeting__En {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: sideways;
  font-size: clamp(56px, -76px + 13.75vw, 100px);
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .TopGreeting__En {
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
    font-size: 42px;
  }
}
.TopGreeting__En {
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

.TopGreeting__LabelJp {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  /* Figma: 字送り23px（14 + 9） */
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.64em;
  color: var(--whiteColor);
}
@media only screen and (max-width: 767px) {
  .TopGreeting__LabelJp {
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
    letter-spacing: 0.05em;
  }
}

/*==================================================
 * StaffAboutSec ⚠️（TopStaff + TopAbout）
*================================================*/
.StaffAboutSec {
  --staffBg: #ECEEF5;
  background-color: var(--staffBg);
  /* Figma: 7315〜9048（上95 / 下40） */
  padding: clamp(60px, 44.6629213483px + 3.9325842697vw, 95px) 0 clamp(32px, 28.4943820225px + 0.8988764045vw, 40px);
  overflow: hidden;
}

/* ---- Staff ---- */
.TopStaff {
  max-width: 1280px;
  margin: 0 auto;
  /* Figma: コンテンツ左端 x=60 */
  padding-inline: clamp(20px, 2.4719101124px + 4.4943820225vw, 60px);
}

.TopStaff__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(24px, -120px + 15vw, 72px);
}
@media only screen and (max-width: 767px) {
  .TopStaff__Head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
  }
}

.TopStaff__En {
  font-size: clamp(42px, 16.5842696629px + 6.5168539326vw, 100px);
  line-height: 1;
  letter-spacing: 0.05em;
  background: linear-gradient(149deg, var(--accentColor) 0%, var(--subColor) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  color: transparent;
}

.TopStaff__Label {
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--mainColor);
  line-height: 1.2;
}

.TopStaff__HeadTitle {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(160px, -29px + 19.6875vw, 223px);
}

.TopStaff__Intro {
  /* Figma: リードは1行 / サブは527幅で2行に折返す */
  width: clamp(300px, -420px + 75vw, 540px);
}
@media only screen and (max-width: 767px) {
  .TopStaff__Intro {
    width: 100%;
  }
}

.TopStaff__Lead {
  margin: 0;
  font-family: var(--fontMincho);
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
  line-height: 1.333; /* Figma: 24px / 高さ32 */
}

.TopStaff__Sub {
  max-width: 527px;
  margin: 8px 0 0;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.TopStaff__Body {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(16px, 19px + -0.3125vw, 15px);
  margin-top: clamp(32px, 28.4943820225px + 0.8988764045vw, 40px);
}
@media only screen and (max-width: 767px) {
  .TopStaff__Body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 24px;
  }
}

.TopStaff__Side {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  /* Figma: ページャ円 x=60 / 情報ブロック x=215（+155） */
  width: clamp(260px, -259px + 54.0625vw, 433px);
}
@media only screen and (max-width: 767px) {
  .TopStaff__Side {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    gap: 30px;
    margin-top: -100px;
    position: relative;
    width: 100%;
    z-index: 2;
  }
}

.TopStaff__Info {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  width: clamp(240px, 126px + 11.875vw, 278px);
  margin-top: clamp(0px, -405px + 42.1875vw, 135px);
  margin-left: clamp(0px, -315px + 32.8125vw, 105px);
}
@media only screen and (max-width: 767px) {
  .TopStaff__Info {
    width: 100%;
  }
}

.TopStaff__Catch {
  margin: 0;
  font-family: var(--fontMincho);
  font-size: clamp(23px, 19.0561797753px + 1.0112359551vw, 32px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.TopStaff__InfoLine {
  display: block;
  width: 22px;
  height: 1px;
  margin: 18px 0;
  background-color: var(--subColor);
}

.TopStaff__Tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
}
.TopStaff__Tags span {
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  color: var(--whiteColor);
  background-color: var(--subColor);
  border-radius: 50px;
}

.TopStaff__Name {
  margin: 14px 0 0;
  font-family: var(--fontMincho);
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

/* 肩書き・資格（CLAUDE.md §2 の追加要件。デザイン未支給のため氏名に準じた控えめな指定） */
.TopStaff__Role {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.TopStaff__Role:empty {
  display: none;
}

.TopStaff__Pager {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  /* 円の中で「現在 / 総数」を斜めの分数組みにする。
     位置はデザイン実測（円126pxに対する比率・字面の光学中心で合わせ込み済み） */
  position: relative;
  width: clamp(100px, 88.606741573px + 2.9213483146vw, 126px);
  aspect-ratio: 1;
  margin-top: 10px; /* Figma: 情報ブロック下端338.5 → 円348 */
  border: 1px solid rgba(8, 28, 46, 0.3);
  border-radius: 50%;
  font-family: var(--fontEn);
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  line-height: 1;
  color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .TopStaff__Pager {
    -ms-flex-item-align: start;
        align-self: flex-start;
  }
}

.TopStaff__PagerCur,
.TopStaff__PagerTotal {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.TopStaff__PagerCur {
  left: 36.5%;
  top: 36.5%;
}

.TopStaff__PagerSlash {
  position: absolute;
  left: 48.5%;
  top: 50%;
  display: block;
  width: 1px;
  /* 斜線: 長さ=円の33%(126→41.6px)・垂直から32°倒す */
  height: 33%;
  margin: 0;
  background-color: rgba(8, 28, 46, 0.5);
  -webkit-transform: translate(-50%, -50%) rotate(32deg);
          transform: translate(-50%, -50%) rotate(32deg);
}

.TopStaff__PagerTotal {
  left: 62.8%;
  top: 60.3%;
  opacity: 0.5;
}

.TopStaff__SliderWrap {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.TopStaff__Nav {
  position: absolute;
  top: 0;
  right: -32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 23px;
  z-index: 2;
}
@media only screen and (max-width: 767px) {
  .TopStaff__Nav {
    position: relative;
    right: auto;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    margin-top: 16px;
    z-index: 3;
  }
}

.TopStaff__Arrow {
  width: 37px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.TopStaff__Arrow img {
  width: 100%;
  margin: 0;
}

.jsStaffSwiper {
  overflow: visible;
}
.jsStaffSwiper .swiper-slide {
  width: clamp(240px, -87px + 34.0625vw, 349px);
  /* Figma: 非アクティブは 239x318（= 349x474 の 0.685）。
     縮小で生じる余白ぶん後続を左へ寄せる transform は main.js が付与する */
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
  transition: opacity 0.4s, -webkit-transform 0.4s;
  transition: transform 0.4s, opacity 0.4s;
  transition: transform 0.4s, opacity 0.4s, -webkit-transform 0.4s;
}
.jsStaffSwiper .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.5;
}
.jsStaffSwiper {
  /* 通り過ぎた（左へ流れた）スライドは情報テキストに重なるため消す */
}
.jsStaffSwiper .swiper-slide.isPast {
  opacity: 0;
  pointer-events: none;
}

.TopStaff__SlideLink {
  display: block;
  text-decoration: none;
}

.StaffPhoto {
  aspect-ratio: 349/474;
  overflow: hidden;
}
.swiper-slide-active .StaffPhoto {
  border: 1px solid var(--accentColor);
}
.StaffPhoto img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.TopStaff__Btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: clamp(32px, 28.4943820225px + 0.8988764045vw, 40px) auto 0;
  padding: 14px 18px 14px 22px;
  font-weight: 600;
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  color: var(--whiteColor);
  letter-spacing: 0.05em;
  background-color: var(--subColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
}

.TopStaff__BtnIcon {
  display: block;
  width: 23px;
}
.TopStaff__BtnIcon img {
  width: 100%;
  margin: 0;
}

/* ---- About ---- */
.TopAbout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* Figma: テキスト 60〜589 / 写真 741〜1280 */
  gap: clamp(32px, -328px + 37.5vw, 152px);
  max-width: 1280px;
  margin: clamp(60px, 42.4719101124px + 4.4943820225vw, 100px) auto 0;
  padding-left: clamp(20px, 2.4719101124px + 4.4943820225vw, 60px);
  padding-right: 0;
}
@media only screen and (max-width: 767px) {
  .TopAbout {
    padding-inline: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 32px;
  }
}

.TopAbout__Text {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(400px, 13px + 40.3125vw, 529px);
}
@media only screen and (max-width: 767px) {
  .TopAbout__Text {
    width: 100%;
  }
}

.TopAbout__En {
  font-size: clamp(42px, 16.5842696629px + 6.5168539326vw, 100px);
  line-height: 1;
  letter-spacing: 0.05em;
  background: linear-gradient(149deg, var(--accentColor) 0%, var(--subColor) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  color: transparent;
}

.TopAbout__Label {
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--mainColor);
  line-height: 1.2;
}

.TopAbout__Title {
  margin: clamp(24px, 16.9887640449px + 1.797752809vw, 40px) 0 14px;
  font-family: var(--fontMincho);
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.TopAbout__Body {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
}
.TopAbout__Body p {
  margin: 0 0 1.5em;
  line-height: 1.5;
}
.TopAbout__Body p:last-child {
  margin-bottom: 0;
}

.TopAbout__Links {
  margin: clamp(28px, 24.4943820225px + 0.8988764045vw, 36px) 0 0;
}

.TopAbout__LinkItem {
  border-bottom: 1px solid rgba(8, 28, 46, 0.15);
}

.TopAbout__LinkItem:last-child {
  border-bottom: none;
}

.TopAbout__LinkItem:first-child .TopAbout__Link {
  padding-top: 0;
}

.TopAbout__LinkItem:last-child .TopAbout__Link {
  padding-bottom: 0;
}

.TopAbout__Link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(20px, -40px + 6.25vw, 40px);
  padding: 12px 0;
}

.TopAbout__LinkThumb {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 86px;
  height: 55px;
  overflow: hidden;
}
.TopAbout__LinkThumb img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.TopAbout__LinkLabel {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-family: var(--fontMincho);
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.TopAbout__LinkArrow {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 19px;
}
.TopAbout__LinkArrow img {
  width: 100%;
  margin: 0;
}

.TopAbout__Btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  margin-top: clamp(28px, 22.7415730337px + 1.3483146067vw, 40px);
  padding: 14px 18px 14px 22px;
  font-weight: 600;
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  color: var(--whiteColor);
  letter-spacing: 0.05em;
  background-color: var(--subColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
}

.TopAbout__BtnIcon {
  display: block;
  width: 23px;
}
.TopAbout__BtnIcon img {
  width: 100%;
  margin: 0;
}

.TopAbout__Visual {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  aspect-ratio: 539/710;
  max-height: 710px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .TopAbout__Visual {
    width: 100%;
    aspect-ratio: 4/3;
  }
}
.TopAbout__Visual img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

/*==================================================
 * TopCase（事例紹介カルーセル）
*================================================*/
.TopCase {
  background-color: var(--whiteColor);
  /* Figma: staffAboutSec下端9048→9131 / 下端9834→9884 */
  padding: clamp(56px, 44.1685393258px + 3.0337078652vw, 83px) 0 clamp(40px, 35.6179775281px + 1.1235955056vw, 50px);
  overflow: hidden;
}

.TopCase__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(24px, -120px + 15vw, 72px);
  /* Figma: x=60 / w=1161 */
  width: min(100% - 48px, 1161px);
  margin: 0 auto;
}
@media only screen and (max-width: 767px) {
  .TopCase__Head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
  }
}

.TopCase__En {
  font-size: clamp(42px, 16.5842696629px + 6.5168539326vw, 100px);
  line-height: 1;
  letter-spacing: 0.05em;
  background: linear-gradient(149deg, var(--accentColor) 0%, var(--subColor) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  color: transparent;
}

.TopCase__Label {
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--mainColor);
  line-height: 1.2;
}

.TopCase__HeadTitle {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(150px, -24px + 18.125vw, 208px);
}

.TopCase__Intro {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.TopCase__Lead {
  margin: 0;
  font-family: var(--fontMincho);
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
  line-height: 1.333; /* Figma: 24px / 高さ32 */
}

.TopCase__Sub {
  margin: 8px 0 0;
  font-size: clamp(13px, 11.6853932584px + 0.3370786517vw, 16px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.TopCase__CarouselWrap {
  position: relative;
  /* Figma: カード列 x=60 / w=1159.5（3列 380.5 + 間隔9） */
  width: min(100% - 48px, 1160px);
  margin: clamp(40px, 32.9887640449px + 1.797752809vw, 56px) auto 0;
}

.jsCaseSwiper {
  overflow: visible;
}
@media print, screen and (min-width: 768px) {
  .jsCaseSwiper {
    overflow: hidden;
  }
}

.TopCase__Arrow {
  position: absolute;
  /* Figma: カード上端から201px（写真下端に掛かる位置） */
  top: clamp(90px, 41.3595505618px + 12.4719101124vw, 201px);
  z-index: 3;
  width: 32px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.TopCase__Arrow img {
  width: 100%;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .TopCase__Arrow {
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

.TopCase__Arrow--Prev {
  left: -16px;
}

.TopCase__Arrow--Next {
  right: -16px;
}

/* 共通CaseCard（TopCase/archive/サービス下層で共有・単一定義） */
.CaseCard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: auto;
  background-color: #F4F4F4;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.CaseCard:hover {
  opacity: 0.85;
}

/* スワイパー内（front/advisory等）のみSP固定幅。archiveのグリッドには適用しない */
@media only screen and (max-width: 767px) {
  .CaseCard.swiper-slide {
    width: 280px;
  }
}

.CaseCard__Photo {
  aspect-ratio: 380/210;
  overflow: hidden;
}
.CaseCard__Photo img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.CaseCard__Body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 8px;
  padding: 20px; /* Figma: カード本文 padding20（枠380.5×433.44 / 本文223.44） */
}

.CaseCard__Meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

.CaseCard__Cat {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 4px 12px;
  font-size: 14px;
  line-height: 16px;
  color: var(--whiteColor);
  background-color: var(--subColor);
  border-radius: 40px;
  white-space: nowrap;
}
@media only screen and (max-width: 767px) {
  .CaseCard__Cat {
    font-size: 12px;
  }
}

.CaseCard__Company {
  letter-spacing: 0.05em;
  color: #000;
}
@media only screen and (max-width: 767px) {
  .CaseCard__Company {
    font-size: 13px;
  }
}

.CaseCard__Title {
  margin: 0;
  font-family: var(--fontMincho);
  font-size: clamp(18px, 17.1235955056px + 0.2247191011vw, 20px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.CaseCard__Line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--subColor);
}

.CaseCard__Industry {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .CaseCard__Industry {
    font-size: 13px;
  }
}

.CaseCard__Tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
}
.CaseCard__Tags span {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #595959; /* a11y: 白背景上 AA達成（旧#888は未達） */
}

.CaseCard__More {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  -ms-flex-item-align: end;
      align-self: flex-end;
  margin-top: auto;
  font-size: 12px;
  line-height: 1.204; /* Figma: 行 高さ14.44 */
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.CaseCard__MoreIcon {
  display: block;
  width: 14.45px; /* Figma: 14.4448 */
}
.CaseCard__MoreIcon img {
  width: 100%;
  margin: 0;
}

.TopCase__Btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: clamp(32px, 28.4943820225px + 0.8988764045vw, 40px) auto 0;
  padding: 14px 18px 14px 22px;
  font-weight: 600;
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  color: var(--whiteColor);
  letter-spacing: 0.05em;
  background-color: var(--subColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
}

.TopCase__BtnIcon {
  display: block;
  width: 23px;
}
.TopCase__BtnIcon img {
  width: 100%;
  margin: 0;
}

/*==================================================
 * TopFlow（ご相談の流れ）
*================================================*/
.TopFlow {
  --flow1: #01B9FF;
  --flow2: #069ED8;
  --flow3: #2E67D9;
  --flow4: #22389B;
  background-color: var(--whiteColor);
  /* Figma: 9884〜9934 / 下端10419→topRecruit 10519 */
  padding: clamp(40px, 35.6179775281px + 1.1235955056vw, 50px) 0 clamp(60px, 42.4719101124px + 4.4943820225vw, 100px);
  overflow: hidden;
}

.TopFlow__Inner {
  /* Figma: x=60 / w=1160 */
  width: min(100% - 48px, 1160px);
  margin: 0 auto;
}

.TopFlow__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(24px, -120px + 15vw, 72px);
}
@media only screen and (max-width: 767px) {
  .TopFlow__Head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
  }
}

.TopFlow__En {
  font-size: clamp(42px, 16.5842696629px + 6.5168539326vw, 100px);
  line-height: 1;
  letter-spacing: 0.05em;
  background: linear-gradient(149deg, var(--accentColor) 0%, var(--subColor) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  color: transparent;
}

.TopFlow__Label {
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--mainColor);
  line-height: 1.2;
}

.TopFlow__HeadTitle {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(160px, -29px + 19.6875vw, 223px);
}

.TopFlow__Intro {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.TopFlow__Lead {
  margin: 0;
  font-family: var(--fontMincho);
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
  line-height: 1.333; /* Figma: 24px / 高さ32 */
}

.TopFlow__Sub {
  margin: 8px 0 0;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.TopFlow__Steps {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
  margin: clamp(40px, 32.9887640449px + 1.797752809vw, 56px) 0 0;
}
@media only screen and (max-width: 767px) {
  .TopFlow__Steps {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
  }
}

/* ステップを結ぶ横線（番号円の中心 top ~14.5px） */
.TopFlow__Steps::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 12%;
  right: 12%;
  height: 1px;
  background-color: rgba(8, 28, 46, 0.2);
}
@media only screen and (max-width: 767px) {
  .TopFlow__Steps::before {
    display: none;
  }
}

.TopFlow__Step {
  position: relative;
  z-index: 1;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

.TopFlow__Num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 33px;
  height: 33px;
  font-size: 14px;
  line-height: 1;
  color: var(--whiteColor);
  border-radius: 50%;
}

.TopFlow__Step--1 .TopFlow__Num {
  background-color: var(--flow1);
}

.TopFlow__Step--2 .TopFlow__Num {
  background-color: var(--flow2);
}

.TopFlow__Step--3 .TopFlow__Num {
  background-color: var(--flow3);
}

.TopFlow__Step--4 .TopFlow__Num {
  background-color: var(--flow4);
}

.TopFlow__Card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  width: 100%;
  /* 4枚の高さを揃える（2026-09-18 指摘）。
     .TopFlow__Steps は flex の既定 align-items:stretch で li の高さが揃っているが、
     カード自体は中身なりの高さだったため、本文が短い02〜04だけ下が余っていた。 */
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 20px 14px;
  border-radius: 4px;
  text-align: center;
  color: var(--whiteColor);
}

.TopFlow__Step--1 .TopFlow__Card {
  background-color: var(--flow1);
}

.TopFlow__Step--2 .TopFlow__Card {
  background-color: var(--flow2);
}

.TopFlow__Step--3 .TopFlow__Card {
  background-color: var(--flow3);
}

.TopFlow__Step--4 .TopFlow__Card {
  background-color: var(--flow4);
}

.TopFlow__Icon {
  display: block;
  width: clamp(60px, 55.1797752809px + 1.2359550562vw, 71px);
}
.TopFlow__Icon img {
  width: 100%;
  margin: 0;
}

.TopFlow__StepTitle {
  margin: 0;
  font-weight: 600;
  font-size: clamp(18px, 17.1235955056px + 0.2247191011vw, 20px);
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.TopFlow__StepDesc {
  margin: 0;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: left;
}

/*==================================================
 * TopRecruit ⚠️（infobahn演出。最終静止状態=集合写真+明瞭文字）
*================================================*/
.TopRecruit {
  position: relative;
  overflow: hidden;
  padding-block: clamp(130px, 125.1797752809px + 1.2359550562vw, 141px) clamp(48px, 37.4831460674px + 2.6966292135vw, 72px);
  padding-inline: clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
  --recruitScrim: 0;
}
@media print, screen and (min-width: 768px) {
  .TopRecruit {
    min-height: 100vh;
    min-height: 100svh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.TopRecruit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 28, 46, 0.5)), to(rgba(8, 28, 46, 0.5))), url(../img/recruitGroupImg.jpg) center top/cover;
  background: linear-gradient(rgba(8, 28, 46, 0.5), rgba(8, 28, 46, 0.5)), url(../img/recruitGroupImg.jpg) center top/cover;
  pointer-events: none;
}

@media print, screen and (min-width: 768px) {
  .TopRecruit.isRecruitPinned::before {
    /* top だけ下げると箱が低くなり cover の倍率が変わって写真が拡大されてしまう。
       bottom を同じだけ外へ出して**高さを維持したまま平行移動**させる
       （はみ出しは .TopRecruit の overflow:hidden が切る）。 */
    top: var(--headerH);
    bottom: calc(-1 * var(--headerH));
  }
}

/* 演出の開始色（写真が出てくるまでの背景）。JSが --recruitScrim を 1→0 にして集合写真へ切り替える */
.TopRecruit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../img/bgNoise.png) left top/120px 120px repeat, var(--accentColor);
  opacity: var(--recruitScrim);
  pointer-events: none;
}

/* 透かし文字: 左右はビューポート幅でクリップし、中身を無限マーキーさせる */
.TopRecruit__WatermarkWrap {
  position: absolute;
  /* Figma: 文字インクがセクション上端+3px（テキスト枠は-41） */
  top: calc(-1 * clamp(8px, 1.8651685393px + 1.5730337079vw, 22px));
  /* ピン中は上端が画面上端に来るため、固定ヘッダーに隠れないよう下げる */
}
@media print, screen and (min-width: 768px) {
  .TopRecruit__WatermarkWrap {
    top: calc(var(--headerH) - clamp(8px, 1.8651685393px + 1.5730337079vw, 22px));
  }
}
.TopRecruit__WatermarkWrap {
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.TopRecruit__WatermarkTrack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: watermarkMarquee 60s linear infinite;
          animation: watermarkMarquee 60s linear infinite;
}

/* 両トラックの animation 宣言より後に置く（同一詳細度のため後勝ちにする必要がある） */
@media (prefers-reduced-motion: reduce) {
  .TopApproach__WatermarkTrack,
  .TopRecruit__WatermarkTrack {
    -webkit-animation: none;
            animation: none;
  }
}
.TopRecruit__Watermark {
  margin: 0;
  font-size: clamp(56px, 14.808988764px + 10.5617977528vw, 150px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  opacity: 0.3;
  text-shadow: 2px 2px 20px rgba(8, 15, 44, 0.05);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

/* 散らばり写真（GSAP演出レイヤー。JS未読込時は非表示）
   参考サイト同様、写真は不透明のままテキストの上を通過するので z は Detail より上 */
.TopRecruit__Images {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  will-change: transform;
}
@media only screen and (max-width: 767px) {
  .TopRecruit__Images {
    display: none;
  }
}

.TopRecruit__Img {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  -webkit-box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.TopRecruit__Img img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.TopRecruit__Img--1 {
  left: 59.5%;
  top: 8%;
  width: 29.5%;
  aspect-ratio: 378/251;
}

.TopRecruit__Img--2 {
  left: 80%;
  top: 42%;
  width: 20%;
  aspect-ratio: 257/173;
}

.TopRecruit__Img--3 {
  left: 9%;
  top: 30%;
  width: 20%;
  aspect-ratio: 257/173;
}

.TopRecruit__Img--4 {
  left: -2.5%;
  top: 68%;
  width: 20%;
  aspect-ratio: 257/173;
}

.TopRecruit__Img--5 {
  left: 65%;
  top: 58%;
  width: 29.7%;
  aspect-ratio: 381/260;
}

.TopRecruit__Img--6 {
  left: 16.5%;
  top: 45%;
  width: 29.7%;
  aspect-ratio: 381/260;
}

.TopRecruit__Detail {
  position: relative;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
  max-width: 912px;
  margin: 0 auto;
  text-align: center;
  color: var(--whiteColor);
}

.TopRecruit__Title {
  margin: 0;
  font-family: var(--fontMincho);
  font-size: clamp(22px, 18.4943820225px + 0.8988764045vw, 30px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.TopRecruit__DetailInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  max-width: 449px;
}

.TopRecruit__Lead {
  margin: 0;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
}

.TopRecruit__Check {
  padding: 10px 18px;
  border: 1px dashed var(--whiteColor);
  border-radius: 4px;
}
.TopRecruit__Check ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 11px;
  margin: 0;
}
.TopRecruit__Check li {
  position: relative;
  padding-left: 13px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: left;
}
.TopRecruit__Check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--whiteColor);
}

.TopRecruit__Text {
  margin: 0;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
}

.TopRecruit__Btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 14px 18px 14px 22px;
  font-weight: 600;
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  color: var(--whiteColor);
  letter-spacing: 0.05em;
  background-color: var(--subColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
}

.TopRecruit__BtnIcon {
  display: block;
  width: 23px;
}
.TopRecruit__BtnIcon img {
  width: 100%;
  margin: 0;
}

.TopRecruit__Benefits {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(20px, 14.7415730337px + 1.3483146067vw, 32px);
  width: 100%;
  max-width: 794px;
  padding: 22px 36px;
  background-color: var(--whiteColor);
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
          box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
}
@media only screen and (max-width: 767px) {
  .TopRecruit__Benefits {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 16px;
  }
}

.TopRecruit__Benefit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* Figma: アイコン18 → テキスト x=40（22px） */
  gap: 22px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.TopRecruit__BenefitIcon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 18px;
}
.TopRecruit__BenefitIcon img {
  width: 100%;
  margin: 0;
}

.TopRecruit__BenefitBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
  text-align: left;
}

.TopRecruit__BenefitTitle {
  font-family: var(--fontMincho);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--subColor);
  white-space: nowrap;
}

.TopRecruit__BenefitSub {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

/*==================================================
 * TopColumn（コラム新着）
*================================================*/
.TopColumn {
  background-color: var(--whiteColor);
  /* Figma: topRecruit下端12187→12288 / 下端12852→FotterCta 12953 */
  padding: clamp(64px, 47.7865168539px + 4.1573033708vw, 101px) 0 clamp(64px, 48.2247191011px + 4.0449438202vw, 100px);
}

.TopColumn__Inner {
  /* Figma: x=60 / w=1161 */
  width: min(100% - 48px, 1161px);
  margin: 0 auto;
}

.TopColumn__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(24px, -120px + 15vw, 72px);
}
@media only screen and (max-width: 767px) {
  .TopColumn__Head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
  }
}

.TopColumn__En {
  font-size: clamp(42px, 16.5842696629px + 6.5168539326vw, 100px);
  line-height: 1;
  letter-spacing: 0.05em;
  background: linear-gradient(149deg, var(--accentColor) 0%, var(--subColor) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  color: transparent;
}

.TopColumn__Label {
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--mainColor);
  line-height: 1.2;
}

.TopColumn__HeadTitle {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(220px, -152px + 38.75vw, 344px);
}

.TopColumn__Intro {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.TopColumn__Lead {
  margin: 0;
  font-family: var(--fontMincho);
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
  line-height: 1.333; /* Figma: 24px / 高さ32 */
}

.TopColumn__Sub {
  margin: 8px 0 0;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.TopColumn__Body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: clamp(32px, 28.4943820225px + 0.8988764045vw, 40px);
  /* Figma: 本体は1100幅（inner 1161 の右を61空ける） */
  padding-right: clamp(0px, -183px + 19.0625vw, 61px);
  margin-top: clamp(40px, 32.9887640449px + 1.797752809vw, 56px);
}
@media only screen and (max-width: 767px) {
  .TopColumn__Body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    gap: 32px;
  }
}

.TopColumn__Btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  -ms-flex-item-align: start;
      align-self: flex-start;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 14px 18px 14px 22px;
  font-weight: 600;
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  color: var(--whiteColor);
  letter-spacing: 0.05em;
  background-color: var(--subColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
}
@media only screen and (max-width: 767px) {
  .TopColumn__Btn {
    -ms-flex-item-align: center;
        align-self: center;
  }
}

.TopColumn__BtnIcon {
  display: block;
  width: 23px;
}
.TopColumn__BtnIcon img {
  width: 100%;
  margin: 0;
}

.TopColumn__List {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(400px, -401px + 83.4375vw, 667px);
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .TopColumn__List {
    width: 100%;
  }
}

.TopColumn__Item {
  border-bottom: 1px solid rgba(8, 28, 46, 0.15);
}

/* Figma: 1件目は上の罫線・上余白なし */
.TopColumn__Item:first-child .ColumnPost {
  padding-top: 0;
}

.ColumnPost {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(20px, -37px + 5.9375vw, 39px);
  padding: 18px 0;
}

.ColumnPost__Thumb {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(120px, 21px + 10.3125vw, 153px);
  aspect-ratio: 153/99;
  overflow: hidden;
  background-color: #F4F4F4;
}
.ColumnPost__Thumb img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.ColumnPost__Thumb--NoImg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.ColumnPost__Thumb--NoImg img {
  width: 70%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.ColumnPost__Body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}

.ColumnPost__Meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 14px;
}
@media only screen and (max-width: 767px) {
  .ColumnPost__Meta {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 3px;
  }
}

.ColumnPost__Cat {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 4px 12px;
  font-size: 14px;
  line-height: 16px;
  color: var(--whiteColor);
  background-color: var(--subColor);
  border-radius: 40px;
  white-space: nowrap;
}
@media only screen and (max-width: 767px) {
  .ColumnPost__Cat {
    font-size: 12px;
  }
}

.ColumnPost__Date {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .ColumnPost__Date {
    font-size: 12px;
  }
}

.ColumnPost__Title {
  margin: 0;
  font-family: var(--fontMincho);
  font-size: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.ColumnPost__Arrow {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 29px;
}
.ColumnPost__Arrow img {
  width: 100%;
  margin: 0;
}

/* ============================================================
   _about.scss
   ============================================================ */
/*==================================================
 * 事業所紹介（About）ページ
 * AB: 551-11143「02_事業紹介」1280×6871
 * コンテンツ幅=1160（左右60ガター/1280）。inner: max-width1280 + padding-inline fluid(20,60)
 * ※Figma実寸再照合 2026-09-16
*================================================*/
/* PageHeader はファイル冒頭の「共通パーツ: PageHeader」に一本化済み（2026-09-20）。
   以前ここにあった上書きは全ページで同値だったため削除した。ページ固有の背景テクスチャも
   共通ブロック側にまとめてある。差分を足したくなったら、まず共通側を直せるか検討すること。 */
/*==================================================
 * About 本文ゾーン
*================================================*/
.About {
  position: relative;
  padding-top: clamp(56px, 41.5393258427px + 3.7078651685vw, 89px);
  padding-bottom: clamp(64px, 48.2247191011px + 4.0449438202vw, 100px);
}

/* 波打ち線あしらい（Figma bgItems 553:40881 / アートボード矩形 x0,y141,w1280,h4705 を書き出し） */
.AboutBg {
  position: absolute;
  left: 0;
  /* .About上端 = PageHeader下端。そこから bgItems上端(Figma y=141) まで戻す */
  top: calc(clamp(110px, 96.4157303371px + 3.4831460674vw, 141px) - clamp(280px, 248.0112359551px + 8.202247191vw, 353px));
  width: 100%;
  height: calc(min(100vw, 1280px) * 3.6758); /* 4705 / 1280 */
  background: url("../img/aboutBgItems.webp") center top/100% 100% no-repeat;
  /* Figmaアートボード上の見え（白地に対する偏差）を実測して合わせた不透明度 */
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

/* 各Aboutセクション共通の内側幅（コンテンツ1160/1280） */
.AboutGreeting,
.AboutExperience,
.AboutOverview,
.AboutCertification,
.AboutOffice {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 2.4719101124px + 4.4943820225vw, 60px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* TOP About のリンク（/about/#outline 等）で飛んできたとき固定ヘッダーに隠れないように */
  scroll-margin-top: var(--headerH);
}

.AboutExperience,
.AboutOverview,
.AboutCertification,
.AboutOffice {
  margin-top: clamp(64px, 48.2247191011px + 4.0449438202vw, 100px);
}

/*==================================================
 * 共通見出し（英グラデ + 日本語ラベル）※Aboutセクションで反復→共通化候補
 * Figma: フレーム高47 / En=Cormorant Infant 56px・行送り56px / ラベル=YuGothic Medium 14px・行送り16px / gap12・下端揃え
*================================================*/
.AboutSecHead {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: clamp(10px, 9.1235955056px + 0.2247191011vw, 12px);
  min-height: clamp(34px, 28.3033707865px + 1.4606741573vw, 47px);
}

.AboutSecHead__En {
  font-family: var(--fontEn);
  font-weight: 400;
  font-size: clamp(32px, 21.4831460674px + 2.6966292135vw, 56px);
  line-height: 1;
  letter-spacing: 0.05em;
  /* background-clip:text の塗り範囲は padding box。行送り1emだと g/y のディセンダが塗られず欠ける */
  /* 文字ボックス(56)がフレーム高(47)より高いFigma実装を再現（下へ9pxはみ出す） */
  background: linear-gradient(156.29deg, var(--accentColor) 1.25%, var(--subColor) 97.36%);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  color: transparent;
}

.AboutSecHead__Label {
  /* 横並びの見出し（Overview等）が詰まったとき「事務所概/要」のように折れないようにする */
  -ms-flex-negative: 0;
      flex-shrink: 0;
  white-space: nowrap;
  font-size: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}
@media only screen and (max-width: 767px) {
  .AboutSecHead__Label {
    line-height: 1.8;
  }
}

/* --Sm: Career & license（Figma フレーム高37 / En 20px） */
.AboutSecHead--Sm {
  min-height: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.AboutSecHead--Sm .AboutSecHead__En {
  font-size: clamp(18px, 17.1235955056px + 0.2247191011vw, 20px);
}
@media only screen and (max-width: 767px) {
  .AboutSecHead--Sm .AboutSecHead__En {
    line-height: 1.2;
  }
}

/* --Stack: Office（Figma 縦積み・gap12・全高75） */
.AboutSecHead--Stack {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  min-height: clamp(54px, 44.797752809px + 2.3595505618vw, 75px);
}

/*==================================================
 * AboutGreeting（代表挨拶）
*================================================*/
.AboutGreeting__Lead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(10px, 8.2471910112px + 0.4494382022vw, 14px);
  padding-bottom: clamp(32px, 24.9887640449px + 1.797752809vw, 48px);
  border-bottom: 1px solid rgba(8, 28, 46, 0.14);
  text-align: center;
}

.AboutGreeting__LeadTtl {
  font-family: var(--fontMincho);
  font-weight: 500;
  font-size: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px);
  line-height: 1.9166666667;
  letter-spacing: 0.05em;
}

.AboutGreeting__LeadSub {
  font-weight: 500;
  line-height: 2.0625;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
  .AboutGreeting__LeadSub {
    font-size: 13px;
  }
}

.AboutGreeting__Main {
  margin-top: clamp(28px, 22.3033707865px + 1.4606741573vw, 41px);
}

.AboutGreeting__Body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-top: clamp(36px, 27.2359550562px + 2.2471910112vw, 56px);
  /* 768〜1023 も写真＋本文の横並びでは本文幅が足りないため、SPと同じ縦積みにする */
}
@media only screen and (max-width: 1023px) {
  .AboutGreeting__Body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: clamp(28px, 22.7415730337px + 1.3483146067vw, 40px);
  }
}

.AboutGreeting__Photo {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* Figma 1280: 本体1160 のうち写真513 / 本文579。1024〜1279は同じ比率で縮める */
  width: 44.224137931%;
  aspect-ratio: 513/680;
}
@media only screen and (max-width: 1023px) {
  .AboutGreeting__Photo {
    max-width: 460px;
    margin-inline: auto;
    width: 80%;
  }
}
.AboutGreeting__Photo img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.AboutGreeting__Quote {
  position: absolute;
  top: clamp(56px, 45.0449438202px + 2.808988764vw, 81px);
  /* Figma: 写真右端から18.25px外へ。fluid()は負値だとclampが反転するため正値で算出して反転 */
  right: calc(-1 * clamp(8px, 3.6179775281px + 1.1235955056vw, 18px));
  width: clamp(26px, 7.1573033708px + 4.8314606742vw, 69px);
}
.AboutGreeting__Quote img {
  width: 100%;
  height: auto;
  margin: 0;
}

.AboutGreeting__Text {
  width: 49.9137931034%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media only screen and (max-width: 1023px) {
  .AboutGreeting__Text {
    width: 100%;
  }
}

.AboutGreeting__Catch {
  font-family: var(--fontMincho);
  font-weight: 500;
  font-size: clamp(22px, 17.6179775281px + 1.1235955056vw, 32px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.AboutGreeting__Message {
  margin-top: clamp(14px, 12.2471910112px + 0.4494382022vw, 18px);
  /* Figma: テキストノードは枠(579)より外へ出て586幅で折返している。
     ブラウザは行末にもletter-spacingが乗るぶん1文字ぶん狭くなるので実測で13px外へ出す */
  margin-right: calc(-1 * clamp(9px, 7.2471910112px + 0.4494382022vw, 13px));
}
@media only screen and (max-width: 1023px) {
  .AboutGreeting__Message {
    margin-right: 0;
  }
}
.AboutGreeting__Message p {
  font-weight: 500;
  line-height: 1.375;
  letter-spacing: 0.05em;
}
.AboutGreeting__Message p + p {
  margin-top: clamp(16px, 13.3707865169px + 0.6741573034vw, 22px);
}
.AboutGreeting__Message {
  /* 1024〜1279: 本文幅が縮み、PC用の強制改行の手前で「よって、」「のか。」だけ落ちるため、
     強制改行を外して文節単位で折り返す */
}
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .AboutGreeting__Message p {
    word-break: auto-phrase;
  }
  .AboutGreeting__Message br.pc {
    display: none;
  }
}

.AboutGreeting__Sign {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: clamp(12px, 8.4943820225px + 0.8988764045vw, 20px);
  height: clamp(30px, 24.7415730337px + 1.3483146067vw, 42px);
  margin-top: clamp(20px, 17.3707865169px + 0.6741573034vw, 26px);
}

.AboutGreeting__SignRole {
  font-family: var(--fontMincho);
  font-weight: 500;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.AboutGreeting__SignName {
  font-family: var(--fontMincho);
  font-weight: 600;
  font-size: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/*==================================================
 * AboutExperience（これまでの歩み・経歴/資格）
*================================================*/
.AboutExperience__Head {
  max-width: 622px;
}

.AboutExperience__HeadBody {
  min-height: clamp(105px, 86.595505618px + 4.7191011236vw, 147px); /* Figma Frame1411 h=147（本文下に余白を持つ固定高） */
  margin-top: clamp(32px, 21.4831460674px + 2.6966292135vw, 56px);
}

.AboutExperience__HeadTtl {
  font-family: var(--fontMincho);
  font-weight: 500;
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.AboutExperience__HeadText {
  margin-top: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
  font-weight: 500;
  line-height: 1.625;
  letter-spacing: 0.05em;
}

/* 3カード */
.AboutExperience__Cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(6px, 5.1235955056px + 0.2247191011vw, 8px);
  margin-top: clamp(40px, 32.9887640449px + 1.797752809vw, 56px);
  /* 768〜1023 は3列だとカードが狭く見出しと番号が重なるため、SPと同じ縦積み */
}
@media only screen and (max-width: 1023px) {
  .AboutExperience__Cards {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24px;
  }
}

.AboutExperience__Card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  /* 番号の位置・サイズをカード幅(cqw)に比例させる */
  container-type: inline-size;
}
@media only screen and (max-width: 1023px) {
  .AboutExperience__Card {
    max-width: 460px;
    width: 100%;
    margin-inline: auto;
  }
}

.AboutExperience__CardImg {
  aspect-ratio: 381/210;
  overflow: hidden;
}
.AboutExperience__CardImg img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.AboutExperience__CardNum {
  position: absolute;
  /* Figma 1280（カード幅381）: top143 / 100px。狭い画面では写真の縮小に合わせて同率で縮める
     （固定値のままだと写真下端より下に落ち、見出しに重なっていた） */
  top: 37.532808399cqw;
  right: clamp(6px, 4.2471910112px + 0.4494382022vw, 10px);
  z-index: 2;
  font-style: italic;
  font-weight: 400;
  font-size: 26.2467191601cqw;
  line-height: normal;
  letter-spacing: 0.05em;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(17%, var(--accentColor)), to(var(--subColor)));
  background: linear-gradient(180deg, var(--accentColor) 17%, var(--subColor) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  color: transparent;
}
@media only screen and (max-width: 767px) {
  .AboutExperience__CardNum {
    top: 150px;
    font-size: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  }
}

.AboutExperience__CardBody {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px) clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
  background: #F5F5F5;
}

.AboutExperience__CardLabel {
  font-weight: 600;
  font-size: clamp(18px, 16.2471910112px + 0.4494382022vw, 22px);
}
@media only screen and (min-width: 1024px) {
  .AboutExperience__CardLabel {
    /* 3列時はカード幅に比例（1280で22px）。「本部・事業承継部署で」が番号に重ならないようにする */
    font-size: min(22px, 5.7742782152cqw);
  }
}
.AboutExperience__CardLabel {
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.AboutExperience__CardLine {
  display: block;
  width: 22px;
  height: 1px;
  margin: clamp(10px, 8.2471910112px + 0.4494382022vw, 14px) 0;
  background: var(--subColor);
}

.AboutExperience__CardCatch {
  margin-bottom: clamp(6px, 5.1235955056px + 0.2247191011vw, 8px);
  font-family: var(--fontMincho);
  font-weight: 500;
  font-size: clamp(18px, 17.1235955056px + 0.2247191011vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.AboutExperience__CardText p {
  font-size: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  line-height: 1.7;
  letter-spacing: 0.05em;
}

.AboutExperience__CardText p + p {
  margin-top: clamp(12px, 6.7415730337px + 1.3483146067vw, 24px); /* Figma: 空行1本(行送り24px) */
}

/* 経歴・資格 */
.AboutExperience__Career {
  margin-top: clamp(36px, 27.2359550562px + 2.2471910112vw, 56px);
}

.AboutExperience__CareerCard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-top: clamp(16px, 12.4943820225px + 0.8988764045vw, 24px);
  /* Figma: padding 30/50・内側コンテンツ1009（右に50の余白が残る） */
  padding: clamp(20px, 15.6179775281px + 1.1235955056vw, 30px) clamp(20px, 6.8539325843px + 3.3707865169vw, 50px);
  background: var(--whiteColor);
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 10px rgba(48, 51, 64, 0.32);
          box-shadow: inset 0 0 10px rgba(48, 51, 64, 0.32);
}
@media only screen and (max-width: 767px) {
  .AboutExperience__CareerCard {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 28px;
  }
}

/* Figma実寸(内側1059px基準): 経歴419 / gap77 / 罫線 / gap77 / 資格436 */
.AboutExperience__CareerCol {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 0;
}

.AboutExperience__CareerCol:first-child {
  width: 39.57%;
  margin-right: 7.27%;
}

.AboutExperience__CareerCol:last-child {
  width: 41.17%;
  margin-left: 7.27%;
}

@media only screen and (max-width: 767px) {
  .AboutExperience__CareerCol:first-child,
  .AboutExperience__CareerCol:last-child {
    width: 100%;
    margin-inline: 0;
  }
}
.AboutExperience__Badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
  padding: 2px 6px;
  border-radius: 50px;
  background: var(--subColor);
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

.AboutExperience__Timeline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(14px, 12.2471910112px + 0.4494382022vw, 18px); /* Figma 18px */
}

.AboutExperience__Timeline li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(16px, 9.8651685393px + 1.5730337079vw, 30px);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 767px) {
  .AboutExperience__Timeline li {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.AboutExperience__TlDate {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(60px, 56.0561797753px + 1.0112359551vw, 69px); /* Figma 69px */
  font-weight: 600;
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
@media only screen and (max-width: 767px) {
  .AboutExperience__TlDate {
    width: auto;
    line-height: 1.5;
  }
}

.AboutExperience__TlText {
  font-weight: 500;
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
  .AboutExperience__TlText {
    line-height: 1.5;
  }
}

.AboutExperience__CareerDivider {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1px;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  background: rgba(8, 28, 46, 0.14);
}
@media only screen and (max-width: 767px) {
  .AboutExperience__CareerDivider {
    width: auto;
    height: 1px;
  }
}

.AboutExperience__License {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
}

.AboutExperience__LicTtl {
  position: relative;
  padding-left: 13px; /* dot5 + gap8 */
  font-weight: 600;
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  line-height: 0.875;
  letter-spacing: 0.05em;
}

.AboutExperience__LicTtl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--subColor);
}

.AboutExperience__LicText {
  /* Figma: 本文はドット分のインデントを持たずカラム全幅(436)。行末letter-spacing分だけ外へ出す */
  margin-top: clamp(8px, 7.1235955056px + 0.2247191011vw, 10px); /* Figma gap 10px */
  margin-right: calc(-1 * clamp(14px, 11.3707865169px + 0.6741573034vw, 20px));
  font-weight: 500;
}
@media only screen and (max-width: 959px) {
  .AboutExperience__LicText {
    margin-right: 0;
  }
}
.AboutExperience__LicText {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.4;
  letter-spacing: 0.05em;
}

/*==================================================
 * AboutOverview（事務所概要）
*================================================*/
.AboutOverview {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  /* 768〜1023 は見出し＋表の横並びでは表が画面外にはみ出すため、SPと同じ縦積み */
}
@media only screen and (max-width: 1023px) {
  .AboutOverview {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 28px;
  }
}

.AboutOverview__List {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(480px, 376.5842696629px + 26.5168539326vw, 716px);
}
@media only screen and (max-width: 1023px) {
  .AboutOverview__List {
    width: 100%;
  }
}

.AboutOverview__Row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.AboutOverview__Dt {
  border-top: 1px dashed rgba(8, 28, 46, 0.28);
  padding-block: clamp(12px, 9.808988764px + 0.5617977528vw, 17px) clamp(13px, 10.808988764px + 0.5617977528vw, 18px);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(96px, 28.5168539326px + 17.3033707865vw, 250px); /* Figma: dd開始が290 */
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.AboutOverview__Row:last-child .AboutOverview__Dt {
  border-bottom: 1px dashed rgba(8, 28, 46, 0.28);
}

.AboutOverview__Dd {
  padding-block: clamp(12px, 9.808988764px + 0.5617977528vw, 17px) clamp(13px, 10.808988764px + 0.5617977528vw, 18px);
  padding-inline: 2em 0;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  width: calc(100% - clamp(96px, 28.5168539326px + 17.3033707865vw, 250px));
}

.AboutOverview__Addr {
  /* Figmaは住所に半角スペースが無く1行427pxで収まる。info('address')側は半角スペースありのため
     折返し位置を合わせる分だけ外へ出す（functions.php は本窓の所有外のため原稿は変更しない） */
  margin-right: calc(-1 * clamp(8px, 6.2471910112px + 0.4494382022vw, 12px));
  line-height: 1.5;
}
@media only screen and (max-width: 1023px) {
  .AboutOverview__Addr {
    margin-right: 0;
  }
}

.AboutOverview__Map {
  width: clamp(300px, 244.3483146067px + 14.2696629213vw, 427px);
  margin-top: clamp(16px, 13.808988764px + 0.5617977528vw, 21px);
  aspect-ratio: 427/242;
}
@media only screen and (max-width: 1023px) {
  .AboutOverview__Map {
    width: 100%;
  }
}

.AboutOverview__Map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/*==================================================
 * AboutCertification（認定・実績・取り組み）
*================================================*/
.AboutCertification__Grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 10.0561797753px + 1.0112359551vw, 23px);
  margin-top: clamp(36px, 27.2359550562px + 2.2471910112vw, 56px);
}
@media only screen and (max-width: 767px) {
  .AboutCertification__Grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.AboutCertification__Item {
  position: relative;
  padding-top: clamp(24px, 18.3033707865px + 1.4606741573vw, 37px);
}

.AboutCertification__Badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: clamp(54px, 48.7415730337px + 1.3483146067vw, 66px);
  height: clamp(54px, 48.7415730337px + 1.3483146067vw, 66px);
  border-radius: 50%;
  background: var(--accentColor); /* Figma意匠のシアン。白文字コントラスト(AA未達)はTOP F2と同一事案→藤井さん配色確定待ちで保留(2026-08-27) */
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  text-align: center;
}

.AboutCertification__Card {
  height: 100%;
  padding: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px) clamp(20px, 16.0561797753px + 1.0112359551vw, 29px);
  background: #F5F5F5;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.AboutCertification__CardImg {
  aspect-ratio: 316/164;
  overflow: hidden;
}
.AboutCertification__CardImg img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.AboutCertification__CardImg--Logo {
  background: var(--whiteColor);
}
.AboutCertification__CardImg--Logo img {
  -o-object-fit: contain;
     object-fit: contain;
}

.AboutCertification__CardBody {
  margin-top: clamp(8px, 7.1235955056px + 0.2247191011vw, 10px);
  text-align: center;
}

.AboutCertification__CardTtl {
  font-family: var(--fontMincho);
  font-weight: 500;
  font-size: clamp(16px, 15.1235955056px + 0.2247191011vw, 18px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.AboutCertification__CardText {
  margin-top: clamp(11px, 9.2471910112px + 0.4494382022vw, 15px); /* Figma: タイトルボックス下端から本文まで42-27 */
  font-weight: 500;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.625;
  letter-spacing: 0.05em;
  text-align: left;
}

/*==================================================
 * AboutOffice（オフィス紹介・スライダー）
*================================================*/
.AboutOffice__Body {
  margin-top: clamp(36px, 27.2359550562px + 2.2471910112vw, 56px);
}

.AboutOffice__Text {
  font-weight: 500;
  line-height: 1.625;
  letter-spacing: 0.05em;
}

.AboutOffice__SliderWrap {
  margin-top: clamp(24px, 20.4943820225px + 0.8988764045vw, 32px);
  margin-right: -60px;
}

.AboutOffice__Slider {
  width: 100%;
  overflow: hidden;
}

.AboutOffice__Slider .swiper-slide {
  width: clamp(300px, 202.7191011236px + 24.9438202247vw, 522px);
  height: auto;
}

.AboutOffice__Slider .swiper-slide img {
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 522/322;
  -o-object-fit: cover;
     object-fit: cover;
}

.AboutOffice__Controls {
  /* Figma(551:11391)はドット左／矢印右の1行。CLAUDE.md §5「矢印はドットの下に配置で確定」に従い縦積み */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(14px, 12.2471910112px + 0.4494382022vw, 18px);
  width: clamp(300px, 202.7191011236px + 24.9438202247vw, 522px);
  margin-top: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px);
}

.AboutOffice__Dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 9px;
}

.AboutOffice__Dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  background: rgba(8, 28, 46, 0.2);
  opacity: 1;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

.AboutOffice__Dots .swiper-pagination-bullet-active {
  background: var(--subColor);
}

.AboutOffice__Arrows {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(16px, 12.9325842697px + 0.7865168539vw, 23px);
  margin-left: 0;
}

.AboutOffice__Arrow {
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: var(--subColor);
  color: var(--whiteColor);
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.AboutOffice__Arrow:hover {
  opacity: 0.75;
}

/* ============================================================
   _service.scss
   ============================================================ */
/*==================================================
 * service（サービス一覧 / page-service.php）
 * AB: 551-15947「03_サービス一覧」（1280×4007）
 * 2026-09-16 デザイン再照合バッチでFigma実寸へ全面再調整
*================================================*/
/* ServiceFv（サービス一覧の独自FV）は 2026-09-20 に廃止。
   .PageHeader と同型（Figma側も同じ pageHeader）だったため、page-service.php を
   共通の parts/page-header.php へ寄せ、スタイルはファイル冒頭の共通ブロックへ統合した。
   serviceHeader.png だけ斜辺の形が違うぶんは `.page-service .PageHeader__Photo img` で吸収。 */
/* ----------------------------------
 * ServiceSec（サービス3カード / Figma 553:41787）
 * Figma: pageHeader下端353 → serviceSec上端437.4（＝上余白84）／
 *        セクション下端2833 → FotterCta 2919（＝下余白86）
---------------------------------- */
.ServiceSec {
  padding-top: clamp(48px, 32.2247191011px + 4.0449438202vw, 84px);
  padding-bottom: clamp(48px, 31.3483146067px + 4.2696629213vw, 86px);
  background-color: var(--whiteColor);
}

/* Figma: カード行の実寸幅944（画像444 + gap50 + 本文450）。
   serviceSecフレーム(920)をはみ出す作図のため、944を中央寄せに正規化した。 */
.ServiceSec__Inner {
  width: min(944px, 100% - 40px);
  margin-inline: auto;
}

/* --- セクション見出し（Figma 551:15957 / w912・gap56） --- */
.ServiceSec__Head {
  /* Figma上の見出しフレームは912幅だがリード文（37字×24px）が1行に収まる実寸は
     serviceSecフレーム幅920相当。Inner(944)いっぱいで中央寄せし1行を維持する */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(36px, 27.2359550562px + 2.2471910112vw, 56px);
  text-align: center;
}

.ServiceSec__HeadTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}

.ServiceSec__En {
  /* Figma: Cormorant Infant Regular 100 / lh100 / ls5 / 148.54degグラデ */
  font-size: clamp(42px, 16.5842696629px + 6.5168539326vw, 100px);
  line-height: 1;
  letter-spacing: 0.05em;
  font-weight: 400;
  background: linear-gradient(148.54deg, var(--accentColor) 1.25%, var(--subColor) 97.36%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  color: transparent;
}

.ServiceSec__Sub {
  /* Figma: YuGothic Medium 14 / lh16 / ls0.7 */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: var(--fontColor);
}

.ServiceSec__Lead {
  /* Figma: YuMincho Medium 24 / lh normal(=36) / ls1.2 / 912px1行 */
  font-size: clamp(17px, 13.9325842697px + 0.7865168539vw, 24px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--fontColor);
  text-align: center;
}

/* --- カードリスト（Figma 551:15962 / gap100） --- */
.ServiceSec__List {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(64px, 48.2247191011px + 4.0449438202vw, 100px);
  margin-top: clamp(60px, 45.1011235955px + 3.8202247191vw, 94px);
}

.ServiceSec__Card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(28px, 18.3595505618px + 2.4719101124vw, 50px);
}
@media only screen and (max-width: 767px) {
  .ServiceSec__Card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.ServiceSec__Img {
  /* Figma: 444 / 944 = 47.034% ・ 444×596 */
  -webkit-box-flex: 0;
      -ms-flex: 0 0 47.034%;
          flex: 0 0 47.034%;
  aspect-ratio: 444/596;
  border-radius: 4px;
  overflow: hidden;
}
.ServiceSec__Img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .ServiceSec__Img {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    margin-inline: auto;
    width: 80%;
  }
}

.ServiceSec__Body {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(20px, 16.9325842697px + 0.7865168539vw, 27px);
}

.ServiceSec__Header {
  /* Figma上の見出し〜キャッチ間は24だが、計測元のタイトル枠(92)がテキストノード(54)を
     8px食っているため、実装では 24−8＝16 を採用するとFigmaの文字位置と完全一致する */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
}

.ServiceSec__TitleBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(8px, 3.6179775281px + 1.1235955056vw, 18px);
}

.ServiceSec__Num {
  /* Figma: bg #22389B / px22 py4 / Cormorant Infant Medium 18・lh20・ls0.9 → h28 */
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 4px 22px;
  border-radius: 50px;
  background-color: var(--subColor);
  color: var(--whiteColor);
  font-size: clamp(16px, 15.1235955056px + 0.2247191011vw, 18px);
  line-height: 1.111;
  letter-spacing: 0.05em;
  font-weight: 500;
}
@media only screen and (max-width: 767px) {
  .ServiceSec__Num {
    padding: 3px 14px 2px;
  }
}

.ServiceSec__Title {
  /* Figma: YuMincho Medium 36 / lh normal(=54) / ls1.8 / #22389B */
  font-size: clamp(24px, 18.7415730337px + 1.3483146067vw, 36px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: var(--subColor);
}

.ServiceSec__CatchBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}

.ServiceSec__Catch {
  /* Figma: YuGothic Bold 22 / lh normal(=33) / ls2.2 / underline */
  font-size: clamp(17px, 14.808988764px + 0.5617977528vw, 22px);
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--fontColor);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ServiceSec__Desc {
  /* Figma: YuGothic Medium 16 / lh26 / ls0.8 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

/* --- 白ボックス（こんなご相談に / 対応内容） --- */
.ServiceSec__Boxes {
  width: 82.9%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}
@media only screen and (max-width: 767px) {
  .ServiceSec__Boxes {
    width: 100%;
  }
}

.ServiceSec__Box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
  padding: clamp(10px, 9.1235955056px + 0.2247191011vw, 12px) clamp(14px, 12.2471910112px + 0.4494382022vw, 18px);
  border-radius: 4px;
  background-color: var(--whiteColor);
  -webkit-box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
          box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
}

.ServiceSec__BoxLabel {
  /* Figma: bg #22389B / px8 py2 / YuGothic Bold 12・lh20・ls0.6 → h24 */
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2px 8px;
  border-radius: 50px;
  background-color: var(--subColor);
  color: var(--whiteColor);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.ServiceSec__BoxList {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 11px; /* Figma: 項目ピッチ25 − 行高14 */
}

.ServiceSec__BoxItem {
  /* Figma: YuGothic Medium 14 / lh14 / ls0.7 ・ ●5px + gap8 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}
.ServiceSec__BoxItem::before {
  content: "";
  -webkit-box-flex: 0;
      -ms-flex: 0 0 5px;
          flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--subColor);
}

/* --- 詳しく見るボタン（Figma 551:16004 / 153×52） --- */
.ServiceSec__Btn {
  -ms-flex-item-align: start;
      align-self: flex-start;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 14px 18px 14px 22px;
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
  background-color: var(--subColor);
  color: var(--whiteColor);
  font-weight: 600;
  line-height: 1; /* 行ボックスをアイコン23pxより小さくして全高52px（Figma実寸）にする */
  letter-spacing: 0.05em; /* Figma ls0.8px。旧0.1em（主観赤入れ#5）はFigma実寸へ戻した */
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.ServiceSec__Btn:hover {
  opacity: 0.85;
}
@media only screen and (max-width: 767px) {
  .ServiceSec__Btn {
    margin-left: auto;
  }
}

.ServiceSec__BtnIcon {
  display: block;
  width: 23px;
  height: 23px;
}
.ServiceSec__BtnIcon img {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* ============================================================
   _advisory.scss
   ============================================================ */
/*==================================================
 * advisory（法人顧問・財務支援）
*================================================*/
.Advisory {
  overflow: hidden;
}

/* セクション共通の縦間隔（Figma: セクション間 90 / FV下 100 / FotterCta手前 76） */
.Advisory > section {
  margin-top: clamp(56px, 41.1011235955px + 3.8202247191vw, 90px);
}

.Advisory > section:first-child {
  margin-top: clamp(60px, 42.4719101124px + 4.4943820225vw, 100px);
}

/* #22 最終セクションとFotterCtaの間に余白を確保 */
.Advisory > section:last-child {
  margin-bottom: clamp(48px, 35.7303370787px + 3.1460674157vw, 76px);
}

/* コンテンツ幅：Figmaは 1280 - 60*2 = 1160 の実寸。共通 .cnt（実質1130）より広い */
.Advisory .cnt {
  max-width: 1190px;
}

/*--------------------------------------------------
 * advisoryAbout（お悩み → 目指したい姿）
--------------------------------------------------*/
.AdvisoryAbout__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: clamp(32px, 24.9887640449px + 1.797752809vw, 48px);
}

.AdvisoryAbout__Question {
  display: block;
  width: clamp(44px, 38.7415730337px + 1.3483146067vw, 56px);
  margin-bottom: clamp(16px, 12.9325842697px + 0.7865168539vw, 23px);
}

.AdvisoryAbout__HeadTtl {
  font-size: clamp(18px, 11.8651685393px + 1.5730337079vw, 32px);
  font-weight: 500;
  font-style: normal; /* #2 明朝見出しのイタリック禁止 */
  line-height: 1.4375; /* Figma 46/32 */
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--fontColor);
}

/* #2 マーカーは背景色のみ（斜体・太字にしない）。Figma: #01B9FF 20% / 帯高28px */
.AdvisoryAbout__Marker {
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  display: inline-block;
  padding-inline: 0.45em;
  background-color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(1, 185, 255, 0.2)), to(rgba(1, 185, 255, 0.2)));
  background-image: linear-gradient(rgba(1, 185, 255, 0.2), rgba(1, 185, 255, 0.2));
  background-repeat: no-repeat;
  background-size: 100% clamp(20px, 16.4943820225px + 0.8988764045vw, 28px);
  background-position: 0 clamp(6px, 4.6853932584px + 0.3370786517vw, 9px);
}

.AdvisoryAbout__Body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.AdvisoryAbout__Block {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* ラベル（よくあるお悩み / 目指したい） */
.AdvisoryAbout__Label {
  position: relative;
  z-index: 2;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 40px;
  padding: 8px clamp(24px, 13.4831460674px + 2.6966292135vw, 48px);
  border-radius: 4px;
  font-size: clamp(15px, 11.0561797753px + 1.0112359551vw, 24px);
  font-weight: 600;
  line-height: 1; /* Figma: h40 = padding8 + 24 + 8 */
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--whiteColor);
}

.AdvisoryAbout__Label--Dark {
  background-color: var(--mainColor);
}

.AdvisoryAbout__Label--Accent {
  background-color: var(--accentColor);
}

/* カード共通 */
.AdvisoryAbout__Card {
  width: 100%;
  margin-top: -20px;
  border-radius: clamp(12px, 6.7415730337px + 1.3483146067vw, 24px);
}

.AdvisoryAbout__Card--Trouble {
  padding: clamp(32px, 28.4943820225px + 0.8988764045vw, 40px) clamp(20px, -28.6404494382px + 12.4719101124vw, 131px);
  background-color: #F5F5F5;
  -webkit-box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.14);
          box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.14);
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .AdvisoryAbout__Card--Trouble {
    padding-inline: 20px;
  }
}

.AdvisoryAbout__Card--Goal {
  padding: clamp(40px, 35.6179775281px + 1.1235955056vw, 50px) clamp(13px, 3.3595505618px + 2.4719101124vw, 35px) clamp(32px, 28.4943820225px + 0.8988764045vw, 40px);
  background-color: #CEEAF5;
  -webkit-box-shadow: inset 0 0 20px 0 rgba(2, 75, 95, 0.14);
          box-shadow: inset 0 0 20px 0 rgba(2, 75, 95, 0.14);
}

/* お悩みカード：2カラム */
.AdvisoryAbout__Card--Trouble {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(24px, 13.4831460674px + 2.6966292135vw, 48px);
}

.AdvisoryAbout__Col {
  width: 100%;
  max-width: 426px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}

.AdvisoryAbout__ColHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 13px;
}

/* #5 区切り線はドット（Figma: stroke #B2B2B2 / dasharray 3 3） */
.AdvisoryAbout__ColLine {
  display: block;
  height: 1px;
  background-image: repeating-linear-gradient(to right, #B2B2B2 0 3px, transparent 3px 6px);
}

.AdvisoryAbout__ColIcon {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 24px;
}

.AdvisoryAbout__ColTtl {
  font-size: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .AdvisoryAbout__ColTtl {
    line-height: 1.2;
  }
}

.AdvisoryAbout__List {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(12px, 12.8764044944px + -0.2247191011vw, 10px);
}

.AdvisoryAbout__Item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

.AdvisoryAbout__ItemIcon {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 18px;
}

.AdvisoryAbout__ItemTxt {
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}
@media only screen and (max-width: 767px) {
  .AdvisoryAbout__ItemTxt {
    font-size: 13px;
  }
}

.AdvisoryAbout__ItemTxt b {
  font-weight: 600;
}

/* 矢印（#3 お悩みカードに少し被せる。Figma: カード下端に16px被り） */
.AdvisoryAbout__Arrow {
  position: relative;
  z-index: 3;
  display: block;
  width: clamp(44px, 39.6179775281px + 1.1235955056vw, 54px);
  margin: calc(-1 * clamp(12px, 10.2471910112px + 0.4494382022vw, 16px)) 0 clamp(8px, 6.6853932584px + 0.3370786517vw, 11px);
}

/* 目指したいカード：4カラム写真 */
.AdvisoryAbout__Card--Goal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(16px, 8.9887640449px + 1.797752809vw, 32px);
}

.AdvisoryAbout__Goal {
  width: 100%;
  max-width: 248px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}

.AdvisoryAbout__GoalImg {
  width: 100%;
  aspect-ratio: 248/146;
  border-radius: 8px;
  overflow: hidden;
}

.AdvisoryAbout__GoalImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.AdvisoryAbout__GoalTxt {
  font-size: clamp(15px, 13.6853932584px + 0.3370786517vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--fontColor);
}
.AdvisoryAbout__GoalTxt span {
  font-weight: 600;
}

@media only screen and (max-width: 767px) {
  /* お悩み2カラム → 1カラム縦積み */
  .AdvisoryAbout__Card--Trouble {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .AdvisoryAbout__Col {
    max-width: 480px;
  }
  /* 目指したい4カラム → 2カラム */
  .AdvisoryAbout__Card--Goal {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .AdvisoryAbout__Goal {
    width: calc(50% - 10px);
    max-width: none;
  }
}
/*--------------------------------------------------
 * advisoryApproach（サービス案内 / 強み / 5つの視点）
--------------------------------------------------*/
/* 見出し */
.AdvisoryApproach__Head {
  margin-bottom: clamp(32px, 26.7415730337px + 1.3483146067vw, 44px);
}

.AdvisoryApproach__HeadTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 12px;
}
@media only screen and (max-width: 767px) {
  .AdvisoryApproach__HeadTop {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.AdvisoryApproach__En {
  line-height: 0.84; /* Figma: 56px の実bboxは47px */
  background: linear-gradient(156deg, #01B9FF 1%, #22389B 97%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: clamp(38px, 30.1123595506px + 2.0224719101vw, 56px);
  letter-spacing: 0.05em;
}

.AdvisoryApproach__EnSub {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--fontColor);
  padding-bottom: clamp(4px, 3.1235955056px + 0.2247191011vw, 6px);
}
@media only screen and (max-width: 767px) {
  .AdvisoryApproach__EnSub {
    text-align: center;
    width: 100%;
  }
}

.AdvisoryApproach__Ttl {
  margin-top: clamp(36px, 27.2359550562px + 2.2471910112vw, 56px);
  font-size: clamp(19px, 16.808988764px + 0.5617977528vw, 24px);
  font-weight: 600; /* Figma: YuMincho Demibold（#13/#21 太すぎ対応） */
  line-height: 1.48; /* Figma 35.5/24 */
  letter-spacing: 0.05em;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .AdvisoryApproach__Ttl {
    text-align: center;
  }
}

.AdvisoryApproach__Lead {
  margin-top: 8px; /* Figma 26/16 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}
@media only screen and (max-width: 767px) {
  .AdvisoryApproach__Lead {
    text-align: center;
  }
}

/* 強み */
.AdvisoryApproach__Strength {
  position: relative;
  margin-bottom: clamp(40px, 36.4943820225px + 0.8988764045vw, 48px);
  padding-block: clamp(28px, 27.1235955056px + 0.2247191011vw, 30px);
  padding-inline: clamp(24px, 8.2247191011px + 4.0449438202vw, 60px);
  background-color: #DBE0F3;
  border-radius: clamp(12px, 6.7415730337px + 1.3483146067vw, 24px);
  -webkit-box-shadow: inset 0 0 20px 0 rgba(2, 75, 95, 0.14);
          box-shadow: inset 0 0 20px 0 rgba(2, 75, 95, 0.14);
}
@media only screen and (max-width: 767px) {
  .AdvisoryApproach__Strength {
    padding-top: 40px;
  }
}

.AdvisoryApproach__StrengthLabel {
  position: absolute;
  top: -18px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 40px;
  padding: 8px clamp(24px, 13.4831460674px + 2.6966292135vw, 48px);
  border-radius: 4px;
  background-color: var(--subColor);
  font-size: clamp(17px, 13.9325842697px + 0.7865168539vw, 24px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  white-space: nowrap;
}

.AdvisoryApproach__StrengthInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
}

.AdvisoryApproach__StrengthList {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 520px;
          flex: 0 1 520px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.AdvisoryApproach__StrengthItem {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(14px, 11.808988764px + 0.5617977528vw, 19px);
  padding: 18px 0;
}

/* #5 区切り線はドット（Figma: dasharray 3 3 / ロイヤルブルー50%） */
.AdvisoryApproach__StrengthItem::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(to right, rgba(34, 56, 155, 0.5) 0 3px, transparent 3px 6px);
}

.AdvisoryApproach__StrengthItem:first-child {
  padding-top: 0;
}

.AdvisoryApproach__StrengthIcon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: clamp(56px, 50.7415730337px + 1.3483146067vw, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--whiteColor);
}

.AdvisoryApproach__StrengthIcon img {
  width: 50%;
}

.AdvisoryApproach__StrengthBody {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.AdvisoryApproach__StrengthTtl {
  font-size: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  font-weight: 600;
  line-height: 1.65; /* Figma 33/20 */
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.AdvisoryApproach__StrengthDesc {
  margin-top: 5px;
  line-height: 1.5; /* Figma 24/16 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.AdvisoryApproach__Graph {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(300px, 242.595505618px + 14.7191011236vw, 431px);
}

/* サブ見出し（縦バー）Figma: バー 9x50 / テキスト 22px を縦中央 */
.AdvisoryApproach__Block {
  margin-bottom: clamp(40px, 36.4943820225px + 0.8988764045vw, 48px);
}

.AdvisoryApproach__SubTtl {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: clamp(40px, 35.6179775281px + 1.1235955056vw, 50px);
  margin-bottom: clamp(28px, 22.7415730337px + 1.3483146067vw, 40px);
  padding-left: 23px;
  font-size: clamp(18px, 16.2471910112px + 0.4494382022vw, 22px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.AdvisoryApproach__SubTtl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 9px;
  background-color: var(--subColor);
}

/* できること（3カード） */
.AdvisoryApproach__Cans {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(9px, 9px + 0vw, 9px);
}

.AdvisoryApproach__Can {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.AdvisoryApproach__CanImg {
  width: 100%;
  aspect-ratio: 381/211;
  overflow: hidden;
}

.AdvisoryApproach__CanImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.AdvisoryApproach__CanTxt {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; /* #6 3カードのテキストボックス高さを揃え底ズレ解消 */
  width: 100%;
  padding: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px) 16px;
  background-color: #F5F5F5;
}

.AdvisoryApproach__CanTtl {
  font-size: clamp(18px, 16.2471910112px + 0.4494382022vw, 22px);
  font-weight: 600; /* Figma: YuMincho Demibold */
  line-height: 1.545; /* Figma 34/22 */
  letter-spacing: 0.05em;
  color: var(--subColor);
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .AdvisoryApproach__CanTtl {
    font-size: 18px;
  }
}

.AdvisoryApproach__CanDesc {
  margin-top: 8px; /* Figma 26/16 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

/* 5つのステップ */
.AdvisoryApproach__Steps {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(12px, 7.1797752809px + 1.2359550562vw, 23px);
}

@media only screen and (min-width: 1280px) {
  .AdvisoryApproach__Steps::before {
    content: "";
    position: absolute;
    top: 16px;
    left: calc((100% - 92px) / 10);
    right: calc((100% - 92px) / 10);
    height: 1px;
    background: -webkit-gradient(linear, left top, right top, from(#C1E8FB), to(#C4DAF0));
    background: linear-gradient(90deg, #C1E8FB, #C4DAF0);
    z-index: 0;
  }
}

.AdvisoryApproach__Step {
  position: relative;
  z-index: 1;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 160px;
          flex: 1 1 160px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

.AdvisoryApproach__StepNum {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

.AdvisoryApproach__StepCard {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; /* #7 5カードの高さを揃える */
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 11px;
  padding: 20px clamp(8px, 6.2471910112px + 0.4494382022vw, 12px);
  border-radius: 8px;
  text-align: center;
}

.AdvisoryApproach__StepIcon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 77px;
  height: 77px;
  border-radius: 50%;
  /* Figma: 77枠の中に白円65（padding 6 + content-box塗り）＋ステップ色のアイコン */
  padding: 6px;
  background-color: var(--whiteColor);
  background-clip: content-box;
}

.AdvisoryApproach__StepIcon img {
  width: auto;
}

.AdvisoryApproach__StepTtl {
  font-size: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

.AdvisoryApproach__StepDesc {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.5; /* Figma 24/16 */
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  text-align: left;
}

.AdvisoryApproach__Step--01 .AdvisoryApproach__StepNum {
  background-color: #01B9FF;
}

.AdvisoryApproach__Step--01 .AdvisoryApproach__StepCard {
  background-color: #01B9FF;
}

.AdvisoryApproach__Step--02 .AdvisoryApproach__StepNum {
  background-color: #069ED8;
}

.AdvisoryApproach__Step--02 .AdvisoryApproach__StepCard {
  background-color: #069ED8;
}

.AdvisoryApproach__Step--03 .AdvisoryApproach__StepNum {
  background-color: #238DF1;
}

.AdvisoryApproach__Step--03 .AdvisoryApproach__StepCard {
  background-color: #238DF1;
}

.AdvisoryApproach__Step--04 .AdvisoryApproach__StepNum {
  background-color: #2E67D9;
}

.AdvisoryApproach__Step--04 .AdvisoryApproach__StepCard {
  background-color: #2E67D9;
}

.AdvisoryApproach__Step--05 .AdvisoryApproach__StepNum {
  background-color: #22389B;
}

.AdvisoryApproach__Step--05 .AdvisoryApproach__StepCard {
  background-color: #22389B;
}

/* まとめカード */
.AdvisoryApproach__Summary {
  position: relative;
  padding: clamp(20px, 19.1235955056px + 0.2247191011vw, 22px) clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
  background-color: var(--whiteColor);
  border-radius: clamp(12px, 6.7415730337px + 1.3483146067vw, 24px);
  -webkit-box-shadow: inset 0 0 6px 0 rgba(48, 51, 64, 0.15);
          box-shadow: inset 0 0 6px 0 rgba(48, 51, 64, 0.15);
  text-align: center;
}

.AdvisoryApproach__SummaryTxt {
  font-size: clamp(17px, 14.808988764px + 0.5617977528vw, 22px);
  font-weight: 500;
  line-height: 1.5; /* Figma 33/22 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

/* #9 あしらい（引用符）：Figma 69.25x54・ボックス上端から14px上・右98.7px */
.AdvisoryApproach__SummaryQuote {
  position: absolute;
  right: 8.51%;
  top: calc(-1 * clamp(10px, 8.2471910112px + 0.4494382022vw, 14px));
  bottom: auto;
  width: clamp(26px, 7.1573033708px + 4.8314606742vw, 69px);
}

/* #2 マーカーは背景色のみ（斜体・太字にしない） */
.AdvisoryApproach__Marker {
  display: inline-block;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  padding-inline: 0.2em;
  background-color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(1, 185, 255, 0.2)), to(rgba(1, 185, 255, 0.2)));
  background-image: linear-gradient(rgba(1, 185, 255, 0.2), rgba(1, 185, 255, 0.2));
  background-repeat: no-repeat;
  background-size: 100% clamp(22px, 19.3707865169px + 0.6741573034vw, 28px);
  background-position: 0 clamp(2px, 1.5617977528px + 0.1123595506vw, 3px);
}

@media only screen and (max-width: 959px) {
  .AdvisoryApproach__StrengthInner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
  }
  .AdvisoryApproach__StrengthList {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .AdvisoryApproach__Graph {
    width: clamp(280px, 135.1724137931px + 37.1352785146vw, 420px);
    max-width: 420px;
  }
}
@media only screen and (max-width: 767px) {
  .AdvisoryApproach__Cans {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 40px;
  }
  .AdvisoryApproach__Steps {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .AdvisoryApproach__Step {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 calc(50% - 12px);
            flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}
/*--------------------------------------------------
 * 共通：セクション英日見出し（Service以降で使用）
--------------------------------------------------*/
.Advisory__HeadTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 12px;
  margin-bottom: clamp(40px, 32.9887640449px + 1.797752809vw, 56px);
}

/* Figma: Reason / Case / Price / Q&A は英字の下に日本語（Service・Approach のみ横並び） */
.Advisory__HeadTop--Stack {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
}

.Advisory__HeadTop--Stack .Advisory__EnSub {
  padding-bottom: 0;
  line-height: 1.15; /* Figma 16/14 */
}

.Advisory__En {
  line-height: 0.84; /* Figma: 56px の実bboxは47px */
  background: linear-gradient(156deg, #01B9FF 1%, #22389B 97%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: clamp(38px, 30.1123595506px + 2.0224719101vw, 56px);
  letter-spacing: 0.05em;
}

.Advisory__EnSub {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--fontColor);
  padding-bottom: clamp(4px, 3.1235955056px + 0.2247191011vw, 6px);
}

/*--------------------------------------------------
 * advisoryService（法人顧問の支援内容）
--------------------------------------------------*/
.AdvisoryService {
  padding-block: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  background-color: #E5E8EE;
}

.AdvisoryService__Grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 23px;
}

.AdvisoryService__Card {
  position: relative;
  width: calc((100% - 46px) / 3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 20px clamp(20px, 16.0561797753px + 1.0112359551vw, 29px);
  background-color: #F5F5F5;
  border-radius: 4px;
}

.AdvisoryService__CardTag {
  position: absolute;
  top: -12px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: var(--subColor);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  white-space: nowrap;
}

.AdvisoryService__CardTtl {
  font-size: clamp(19px, 17.6853932584px + 0.3370786517vw, 22px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--fontColor);
}

.AdvisoryService__CardImg {
  width: 100%;
  aspect-ratio: 316/164;
  overflow: hidden;
  border-radius: 2px;
}

.AdvisoryService__CardImg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.AdvisoryService__CardDesc {
  width: 100%;
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.AdvisoryService__CardBox {
  position: relative;
  width: 100%;
  /* #10/#11 対応内容Boxを下揃え(margin-top:auto)から上揃え(説明文直下)へ */
  margin-top: 0;
  padding: 14px 18px;
  background-color: var(--whiteColor);
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
          box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
}

.AdvisoryService__CardBoxLabel {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 12px;
  padding: 2px 8px;
  border-radius: 50px;
  background-color: var(--subColor);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

.AdvisoryService__CardList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 7px; /* Figma: 行ピッチ25px（14px行 + 11px） */
}

.AdvisoryService__CardListItem {
  position: relative;
  padding-left: 13px;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.AdvisoryService__CardListItem::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--subColor);
}

.AdvisoryService__Note {
  margin-top: 24px;
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #5F5F5F;
}

/* 下部2枠 */
.AdvisoryService__Extras {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
  margin-top: clamp(48px, 44.4943820225px + 0.8988764045vw, 56px);
}

.AdvisoryService__Extra {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  /* 中身（折返し禁止のアイコン列）に押されて画面外へ広がらないようにする */
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 12px;
  padding: clamp(28px, 22.7415730337px + 1.3483146067vw, 40px) clamp(15px, 5.3595505618px + 2.4719101124vw, 37px) clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  background-color: var(--whiteColor);
  border: 1px solid var(--accentColor);
  border-radius: 4px;
}

.AdvisoryService__ExtraLabel {
  position: absolute;
  top: -12px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 4px 8px;
  border-radius: 4px;
  background: linear-gradient(165deg, #01B9FF 1%, #22389B 97%);
  font-size: clamp(16px, 15.1235955056px + 0.2247191011vw, 18px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  white-space: nowrap;
}

.AdvisoryService__ExtraLogos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(16px, 12.9325842697px + 0.7865168539vw, 23px);
  width: 100%;
  /* 2ボックス横並び時: 1024付近で Google Meet だけ2行目に落ちるため間隔を詰める（1280は23のまま） */
}
@media only screen and (min-width: 1024px) {
  .AdvisoryService__ExtraLogos {
    gap: clamp(8px, -52px + 5.859375vw, 23px);
  }
}

.AdvisoryService__ExtraLogo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.AdvisoryService__ExtraLogo img {
  width: 100%;
  height: auto;
  margin: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

/* #12 ロゴ幅はFigma実寸（freee113 / 弥生68 / Chatwork108 / GoogleMeet126） */
.AdvisoryService__ExtraLogo:nth-child(1) {
  width: clamp(78px, 62.6629213483px + 3.9325842697vw, 113px);
}

.AdvisoryService__ExtraLogo:nth-child(2) {
  width: clamp(37px, 23.4157303371px + 3.4831460674vw, 68px);
}

.AdvisoryService__ExtraLogo:nth-child(3) {
  width: clamp(75px, 60.5393258427px + 3.7078651685vw, 108px);
}

.AdvisoryService__ExtraLogo:nth-child(4) {
  width: clamp(87px, 69.9101123596px + 4.3820224719vw, 126px);
}

.AdvisoryService__ExtraNetwork {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(16px, 9.8651685393px + 1.5730337079vw, 30px);
  width: 100%;
  /* 2ボックス横並び時: Figmaの間隔30のままでは5個が1行に入らず（1280でボックスが11px画面外へ）、
     間隔を詰めて1行に収める */
}
@media only screen and (min-width: 1024px) {
  .AdvisoryService__ExtraNetwork {
    gap: clamp(12px, -44px + 5.46875vw, 26px);
  }
}

.AdvisoryService__ExtraNetItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}

.AdvisoryService__ExtraNetIcon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: clamp(46px, 33.2921348315px + 3.2584269663vw, 75px);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--subColor);
}

.AdvisoryService__ExtraNetIcon img {
  width: 57%;
}

.AdvisoryService__ExtraNetLabel {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--fontColor);
  white-space: nowrap;
}

.AdvisoryService__ExtraDivider {
  width: 100%;
  height: 1px;
  margin: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px) 0;
  background-image: repeating-linear-gradient(to right, #B2B2B2 0 3px, transparent 3px 6px);
}

.AdvisoryService__ExtraTxt {
  width: 100%;
  /* 1024〜1279: ボックスが狭く、PC用の強制改行の手前で「強く、」等だけ落ちるため文節折返しに切替 */
}
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .AdvisoryService__ExtraTxt {
    word-break: auto-phrase;
  }
  .AdvisoryService__ExtraTxt br.pc {
    display: none;
  }
}

.AdvisoryService__ExtraTtl {
  margin-bottom: 8px;
  font-size: clamp(17px, 15.6853932584px + 0.3370786517vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--subColor);
}

.AdvisoryService__ExtraDesc {
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--fontColor);
}

.AdvisoryService__ExtraDesc--Center {
  text-align: center;
}

@media only screen and (min-width: 960px) and (max-width: 1279px) {
  .AdvisoryService__Card {
    width: calc((100% - 46px) / 3);
  }
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .AdvisoryService__Card {
    width: calc((100% - 23px) / 2);
  }
}
@media only screen and (max-width: 767px) {
  .AdvisoryService__Card {
    width: 100%;
  }
}
/* 768〜1023 も2ボックス横並びでは幅が足りない（専門家アイコン5個が1行に入らない）ためSPと同じ縦積み */
@media only screen and (max-width: 1023px) {
  .AdvisoryService__Extras {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
/*--------------------------------------------------
 * advisoryReason（選ばれる3つの理由）
--------------------------------------------------*/
.AdvisoryReason__Cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}

.AdvisoryReason__Card {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.AdvisoryReason__CardImg {
  position: relative;
  width: 100%;
  aspect-ratio: 381/210;
  overflow: visible;
}

.AdvisoryReason__CardImg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.AdvisoryReason__CardNum {
  position: absolute;
  right: 2.62%;
  /* Figma: 数字は画像下端をまたぐ（Cormorantのディセンダ分を em で吸収） */
  bottom: -0.65em;
  z-index: 2;
  font-style: italic;
  font-size: clamp(70px, 56.8539325843px + 3.3707865169vw, 100px);
  line-height: 1;
  letter-spacing: 0.05em;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(17%, #01B9FF), color-stop(120%, #22389B));
  background: linear-gradient(180deg, #01B9FF 17%, #22389B 120%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  -webkit-text-fill-color: transparent;
  color: transparent;
  pointer-events: none;
}

.AdvisoryReason__CardTxt {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px) clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  background-color: #F5F5F5;
}

.AdvisoryReason__CardLabel {
  font-size: clamp(16px, 15.1235955056px + 0.2247191011vw, 18px);
  font-weight: 600;
  line-height: 1.5; /* Figma 27/18 */
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.AdvisoryReason__CardLine {
  display: block;
  width: 22px;
  height: 1px;
  margin: 14px 0;
  background-color: var(--subColor);
}

.AdvisoryReason__CardTtl {
  font-size: clamp(19px, 17.6853932584px + 0.3370786517vw, 22px);
  font-weight: 600; /* Figma: YuMincho Demibold */
  line-height: 1.545; /* Figma 34/22 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.AdvisoryReason__CardDesc {
  margin-top: 12px; /* Figma 26/16 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

@media only screen and (max-width: 767px) {
  .AdvisoryReason__Cards {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 40px;
  }
  .AdvisoryReason__Card {
    max-width: 480px;
    margin-inline: auto;
    width: 100%;
  }
}
/*--------------------------------------------------
 * advisoryPrice（料金目安）
--------------------------------------------------*/
.AdvisoryPrice {
  padding-block: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  background-color: #E5E8EE;
}

.AdvisoryPrice__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(32px, 14.4719101124px + 4.4943820225vw, 72px);
  margin-bottom: clamp(36px, 30.3033707865px + 1.4606741573vw, 49px);
}

.AdvisoryPrice__Head .Advisory__HeadTop {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-bottom: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
}

.AdvisoryPrice__HeadTtl {
  font-size: clamp(19px, 16.808988764px + 0.5617977528vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.AdvisoryPrice__HeadDesc {
  margin-top: 8px;
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}
@media only screen and (max-width: 767px) {
  .AdvisoryPrice__HeadDesc {
    margin-top: 15px;
  }
}

.AdvisoryPrice__Block {
  margin-bottom: clamp(32px, 28.4943820225px + 0.8988764045vw, 40px);
}

/* Figma: バー 9x50・テキスト22pxを縦中央 */
.AdvisoryPrice__SubTtl {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: clamp(40px, 35.6179775281px + 1.1235955056vw, 50px);
  margin-bottom: clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
  padding-left: 23px;
  font-size: clamp(18px, 16.2471910112px + 0.4494382022vw, 22px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.AdvisoryPrice__SubTtl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 9px;
  background-color: var(--subColor);
}

/* ご相談範囲ボックス */
.AdvisoryPrice__Info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(20px, 15.6179775281px + 1.1235955056vw, 30px);
  padding: 27px 25px 27px 30px;
  background-color: var(--whiteColor);
  border: 1px solid var(--accentColor);
  border-radius: 4px;
}
@media only screen and (max-width: 767px) {
  .AdvisoryPrice__Info {
    padding-block: 15px 20px;
    padding-inline: 20px;
  }
}

.AdvisoryPrice__InfoIcon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(60px, 52.9887640449px + 1.797752809vw, 76px);
}

.AdvisoryPrice__InfoTtl {
  margin-bottom: 8px;
  font-size: clamp(18px, 17.1235955056px + 0.2247191011vw, 20px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.AdvisoryPrice__InfoDesc {
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.AdvisoryPrice__InfoDesc--Mt {
  margin-top: 1.2em;
}

/* フッター（CTAボックスを中央寄せ）。間隔は .PriceCta の margin-top に一本化
   ※2026-10-13 料金表清書ver反映: 旧 FootTxt（別サービス案内）は「ご相談範囲について」へ統合したため削除 */
.AdvisoryPrice__Foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* 料金CTAボックスは共通化 → .PriceCta（本ファイル末尾付近）。旧 .AdvisoryPrice__Btns は廃止 */
@media only screen and (max-width: 767px) {
  .AdvisoryPrice__Head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24px;
  }
  .AdvisoryPrice__Info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
/*--------------------------------------------------
 * advisoryCase（ご相談事例・CaseCard共通コンポーネント再利用）
--------------------------------------------------*/
.AdvisoryCase__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(32px, 14.4719101124px + 4.4943820225vw, 72px);
  margin-bottom: clamp(40px, 32.9887640449px + 1.797752809vw, 56px);
}

.AdvisoryCase__Head .Advisory__HeadTop {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
  margin-bottom: 0;
}

.AdvisoryCase__HeadTtl {
  font-size: clamp(19px, 16.808988764px + 0.5617977528vw, 24px);
  font-weight: 500;
  line-height: 1.5; /* Figma 36/24 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.AdvisoryCase__HeadDesc {
  margin-top: 8px; /* Figma 26/16 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.AdvisoryCase__CarouselWrap {
  position: relative;
}

.AdvisoryCase__CarouselWrap .swiper {
  overflow: hidden;
}

.AdvisoryCase__Arrow {
  position: absolute;
  top: clamp(130px, 98.8876404494px + 7.9775280899vw, 201px);
  z-index: 3;
  width: 32px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.AdvisoryCase__Arrow img {
  width: 100%;
  margin: 0;
}

.AdvisoryCase__Arrow:hover {
  opacity: 0.7;
}

.AdvisoryCase__Arrow--Prev {
  left: calc(-1 * clamp(8px, 4.4943820225px + 0.8988764045vw, 16px));
}

.AdvisoryCase__Arrow--Next {
  right: calc(-1 * clamp(8px, 4.4943820225px + 0.8988764045vw, 16px));
}

.AdvisoryCase__Btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  margin: clamp(32px, 28.4943820225px + 0.8988764045vw, 40px) auto 0;
  padding: 14px 18px 14px 22px;
  background-color: var(--subColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.AdvisoryCase__Btn:hover {
  opacity: 0.85;
}

.AdvisoryCase__BtnIcon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 23px;
}

.AdvisoryCase .cnt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.AdvisoryCase__Btn {
  -ms-flex-item-align: center;
      align-self: center;
}

@media only screen and (max-width: 767px) {
  .AdvisoryCase__Head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
  }
  .AdvisoryCase__Btn {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
  }
}
/* ============================================================
   _succession.scss
   ============================================================ */
/*==================================================
 * succession（事業承継・組織再編）
*================================================*/
.Succession {
  color: var(--fontColor);
}

/* _main.scss のグローバル `h1..h6, p, span, div { line-height: 1.6 }` が
   インライン要素の行ボックスまで上書きしてFigmaとズレるため、ページ内は継承に戻す */
/* :where() で詳細度を type 相当に落とし、個別のクラス指定を上書きしないようにする */
:where(.Succession) span,
:where(.Succession) b,
:where(.Succession) em,
:where(.Succession) small {
  line-height: inherit;
}

/* Figma: successionSec 直下セクションの内容幅は一律 1160px（x=60〜1220） */
.SuccessionAbout__Inner,
.SuccessionApproach__Inner,
.SuccessionAnswer__Inner,
.SuccessionService__Inner,
.SuccessionReason__Inner,
.SuccessionCase__Inner,
.SuccessionPrice__Inner {
  width: min(1160px, 100% - 30px);
  margin-inline: auto;
}

/*==================================================
 * successionAbout（よくあるお悩み）
*================================================*/
.SuccessionAbout {
  /* Figma: 直前セクションとの間隔は 100px（セクション自体に上下paddingは持たせない） */
  margin-top: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  /* ↓ページローカル変数（統合フェーズで:root集約候補） */
  --sAboutStartBg: #ceeaf5;
  --sAboutMarker: rgba(1, 185, 255, 0.2);
  --sAboutInsetShadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.14);
  --sAboutInsetShadowStart: inset 0 0 20px 0 rgba(2, 75, 95, 0.14);
}

.SuccessionAbout__Heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(14px, 10.0561797753px + 1.0112359551vw, 23px);
  margin-bottom: clamp(32px, 24.9887640449px + 1.797752809vw, 48px);
}

.SuccessionAbout__Q {
  display: block;
  width: clamp(44px, 38.7415730337px + 1.3483146067vw, 56px);
}
.SuccessionAbout__Q img {
  width: 100%;
  margin: 0;
}

.SuccessionAbout__Title {
  width: 100%;
  font-size: clamp(18px, 11.8651685393px + 1.5730337079vw, 32px);
  line-height: 1.4375;
  letter-spacing: 0.05em;
  text-align: center;
  font-weight: 500;
}

.SuccessionAbout__Marker {
  /* Figma: #01B9FF 20%・高さ28px（=0.875em）を行の中央に敷く。文字送りは変えない */
  padding: 0;
  line-height: inherit;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--sAboutMarker)), to(var(--sAboutMarker)));
  background-image: linear-gradient(var(--sAboutMarker), var(--sAboutMarker));
  background-repeat: no-repeat;
  background-size: 100% 0.875em;
  background-position: 0 50%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.SuccessionAbout__Cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0;
}

.SuccessionAbout__Card {
  position: relative;
  width: 100%;
  max-width: 1160px;
  padding-top: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
}

.SuccessionAbout__Badge {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: clamp(34px, 31.3707865169px + 0.6741573034vw, 40px);
  padding-inline: clamp(24px, 13.4831460674px + 2.6966292135vw, 48px);
  border-radius: 4px;
  color: var(--whiteColor);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(15px, 11.0561797753px + 1.0112359551vw, 24px);
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.SuccessionAbout__Badge--Dark {
  background: var(--mainColor);
}

.SuccessionAbout__Badge--Cyan {
  background: var(--accentColor);
}

.SuccessionAbout__CardBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(32px, 14.4719101124px + 4.4943820225vw, 72px);
  padding: clamp(40px, 34.7415730337px + 1.3483146067vw, 52px) clamp(24px, 6.9101123596px + 4.3820224719vw, 63px) clamp(32px, 28.4943820225px + 0.8988764045vw, 40px);
  border-radius: clamp(12px, 6.7415730337px + 1.3483146067vw, 24px);
  background: var(--grayColor);
  -webkit-box-shadow: var(--sAboutInsetShadow);
          box-shadow: var(--sAboutInsetShadow);
}

.SuccessionAbout__List {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  list-style: none;
  width: 100%;
  max-width: 481px;
}

.SuccessionAbout__Item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  min-height: 18px;
}

.SuccessionAbout__Check {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
}

.SuccessionAbout__ItemText {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  font-size: clamp(13px, 11.6853932584px + 0.3370786517vw, 16px);
  line-height: 1;
  letter-spacing: 0.05em;
  /* Figma は1行固定（whitespace-nowrap）。1280未満は折返し許容 */
  white-space: nowrap;
}
.SuccessionAbout__ItemText b {
  font-weight: 600;
}

.SuccessionAbout__Arrow {
  position: relative;
  z-index: 2;
  /* Figma: 矢印 y=983（上カード下端998に15px被る） */
  margin-top: -15px;
  width: clamp(40px, 33.8651685393px + 1.5730337079vw, 54px);
}
.SuccessionAbout__Arrow img {
  width: 100%;
  margin: 0;
}

.SuccessionAbout__Card--Start {
  /* Figma: 矢印下端1030 → バッジ上端1043 */
  margin-top: 13px;
}

.SuccessionAbout__CardBody--Start {
  display: block;
  padding: clamp(40px, 35.6179775281px + 1.1235955056vw, 50px) clamp(16px, 7.6741573034px + 2.1348314607vw, 35px) clamp(32px, 28.4943820225px + 0.8988764045vw, 40px);
  background: var(--sAboutStartBg);
  -webkit-box-shadow: var(--sAboutInsetShadowStart);
          box-shadow: var(--sAboutInsetShadowStart);
}

.SuccessionAbout__StartText {
  max-width: 1090px;
  margin-inline: auto;
  font-size: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  line-height: 1.75;
  letter-spacing: 0;
  text-align: center;
}
.SuccessionAbout__StartText .SuccessionAbout__Em {
  font-weight: 600;
  color: var(--subColor);
}

@media screen and (max-width: 1279px) {
  .SuccessionAbout__Item {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .SuccessionAbout__ItemText {
    white-space: normal;
    line-height: 1.5;
  }
}
@media only screen and (max-width: 767px) {
  .SuccessionAbout__CardBody {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 16px;
  }
  .SuccessionAbout__List {
    max-width: none;
  }
  .SuccessionAbout__Item {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .SuccessionAbout__ItemText {
    line-height: 1.5;
  }
}
/*==================================================
 * SuccessionSecHead（各セクション共通見出し） ※共通化候補：ServiceSecHead
*================================================*/
.SuccessionSecHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(32px, 21.4831460674px + 2.6966292135vw, 56px);
  margin-bottom: clamp(32px, 24.1123595506px + 2.0224719101vw, 50px);
}

.SuccessionSecHead__Top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  /* Figma: 英字見出しのテキストボックス幅(263px)＋12px。実グリフ右端からは34px */
  gap: clamp(23px, 18.1797752809px + 1.2359550562vw, 34px);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  .SuccessionSecHead__Top {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.SuccessionSecHead__En {
  font-size: clamp(38px, 30.1123595506px + 2.0224719101vw, 56px);
  /* Figma: 見出しボックス高47px（56pxフォント） */
  line-height: 0.84;
  letter-spacing: 0.05em;
  background: linear-gradient(156.29deg, var(--accentColor) 1.25%, var(--subColor) 97.36%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  color: transparent;
}

.SuccessionSecHead__EnSub {
  font-family: var(--fontJp);
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.2;
  letter-spacing: 0.05em;
}

/* Figma: Reason など、英字見出しと和文サブを縦積みにするパターン */
.SuccessionSecHead--Stack {
  margin-bottom: clamp(36px, 27.2359550562px + 2.2471910112vw, 56px);
}

.SuccessionSecHead--Stack .SuccessionSecHead__Top {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(8px, 6.2471910112px + 0.4494382022vw, 12px);
}

.SuccessionSecHead__Body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(10px, 9.1235955056px + 0.2247191011vw, 12px);
}

.SuccessionSecHead__Title {
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  line-height: 1.48;
  letter-spacing: 0.05em;
  font-weight: 500;
}
@media only screen and (max-width: 767px) {
  .SuccessionSecHead__Title {
    text-align: center;
  }
}

.SuccessionSecHead__Accent {
  color: var(--subColor);
  font-weight: 500;
}

.SuccessionSecHead__Text {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
  .SuccessionSecHead__Text {
    text-align: center;
  }
}

/*==================================================
 * successionApproach（アプローチ／承継フロー）
*================================================*/
.SuccessionApproach {
  margin-top: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  --sApproachCardBg: var(--grayColor);
  --sApproachInset: inset 0 0 20px 0 rgba(2, 75, 95, 0.14);
  --sApproachOverlay: rgba(8, 28, 46, 0.5);
  --sApproachDivider: rgba(8, 28, 46, 0.25);
  /* フローリボンのグラデ中間色（ブランド色の階調・統合フェーズで:root候補） */
  --sFlowCyan2: #1e9fe6;
  --sFlowMid: #238df1;
}

.SuccessionApproach__Main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(24px, 20.4943820225px + 0.8988764045vw, 32px);
}

.SuccessionApproach__Band {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  max-width: 1040px;
  min-height: clamp(34px, 31.3707865169px + 0.6741573034vw, 40px);
  padding: 8px 24px;
  border-radius: 4px;
  background: var(--subColor);
  color: var(--whiteColor);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px);
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-align: center;
}

/*----- 3承継タイプ -----*/
.SuccessionApproach__Types {
  /* Figma: カラム299px・カラム間92px（=gap46 × 罫線の左右） */
  --sTypeGap: clamp(40px, 17.2134831461px + 5.8426966292vw, 92px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--sTypeGap);
  width: 100%;
  padding-block: 7px 6px;
}

.SuccessionApproach__Type {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  max-width: 299px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

.SuccessionApproach__Type:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: calc(var(--sTypeGap) / -2);
  height: clamp(180px, 150.6404494382px + 7.5280898876vw, 247px);
  border-right: 1px dashed var(--sApproachDivider);
}

.SuccessionApproach__TypeImg {
  width: clamp(104px, 88.2247191011px + 4.0449438202vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}
.SuccessionApproach__TypeImg img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.SuccessionApproach__TypeTitle {
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(18px, 17.1235955056px + 0.2247191011vw, 20px);
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.SuccessionApproach__TypeTitleSmall {
  font-size: 0.75em;
}

.SuccessionApproach__TypeText {
  /* Figma: 見出し→本文の間隔は5px（親gap10pxの差分を戻す） */
  margin-top: -5px;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

/*----- ステップカード -----*/
.SuccessionApproach__Steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
  width: 100%;
  max-width: 1040px;
}

.SuccessionApproach__Step {
  width: 100%;
  padding: clamp(28px, 24.9325842697px + 0.7865168539vw, 35px) clamp(20px, 7.2921348315px + 3.2584269663vw, 49px) clamp(36px, 32.0561797753px + 1.0112359551vw, 45px);
  border-radius: clamp(12px, 6.7415730337px + 1.3483146067vw, 24px);
  background: var(--sApproachCardBg);
  -webkit-box-shadow: var(--sApproachInset);
          box-shadow: var(--sApproachInset);
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .SuccessionApproach__Step {
    padding-inline: 15px;
    padding-block: 30px;
  }
}

.SuccessionApproach__StepHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 16px;
}

.SuccessionApproach__Step--02 {
  padding-bottom: clamp(30px, 26.9325842697px + 0.7865168539vw, 37px);
}

.SuccessionApproach__StepNum {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  /* Figma: グラデではなくベタ塗り単色（#22389B） */
  background: var(--subColor);
  color: var(--whiteColor);
  font-style: italic;
  font-size: 19px;
  line-height: 1;
  padding-left: 2px;
}

.SuccessionApproach__StepTitle {
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.SuccessionApproach__StepLead {
  margin-top: 10px;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

/*----- Step01：5つの視点 -----*/
.SuccessionApproach__Points {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 5.6179775281px + 1.1235955056vw, 20px);
  margin-top: clamp(24px, 20.4943820225px + 0.8988764045vw, 32px);
  list-style: none;
}

.SuccessionApproach__Point {
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}

.SuccessionApproach__PointImg {
  width: 100%;
  aspect-ratio: 172/107;
  border-radius: 4px;
  overflow: hidden;
}
.SuccessionApproach__PointImg img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.SuccessionApproach__PointTitle {
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(16px, 15.1235955056px + 0.2247191011vw, 18px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.SuccessionApproach__PointText {
  /* Figma: 見出し→本文は隙間なし（親gap6pxの差分を戻す） */
  margin-top: -6px;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

/*----- Step02：4つの手法 -----*/
.SuccessionApproach__Methods {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(16px, 10.7415730337px + 1.3483146067vw, 28px);
  margin-top: clamp(22px, 18.9325842697px + 0.7865168539vw, 29px);
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .SuccessionApproach__Methods {
    gap: 10px;
  }
}

.SuccessionApproach__Method {
  position: relative;
  width: clamp(150px, 22vw, 206px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 10px;
}

.SuccessionApproach__Method::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sApproachOverlay);
}

.SuccessionApproach__MethodImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.SuccessionApproach__MethodText {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 13px;
  color: var(--whiteColor);
  text-align: center;
}

.SuccessionApproach__MethodTitle {
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(16px, 14.6853932584px + 0.3370786517vw, 19px);
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.SuccessionApproach__MethodDesc {
  font-size: clamp(13px, 11.6853932584px + 0.3370786517vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/*----- ステップ間の矢印 -----*/
.SuccessionApproach__Arrow {
  position: relative;
  z-index: 2;
  /* 上ステップカードに約16px被せる（Stepsのgapを打ち消し overlap。Figma: 矢印がカード下端に重なる） */
  /* Figma: 矢印はカード下端に16px重なる（Stepsのgap16pxを相殺して-16） */
  margin-top: -32px;
  width: clamp(40px, 33.8651685393px + 1.5730337079vw, 54px);
}
.SuccessionApproach__Arrow img {
  width: 100%;
  margin: 0;
}

/*----- Step03：フロー図（Figma: ベタ塗り3色のシェブロン） -----*/
.SuccessionApproach__Flow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  /* Figma: 幅953px（カード内容943pxより左右5pxずつ外へ） */
  width: calc(100% + 10px);
  margin-inline: -5px;
  margin-top: clamp(22px, 19.3707865169px + 0.6741573034vw, 28px);
}

.SuccessionApproach__FlowStep {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: clamp(96px, 80.6629213483px + 3.9325842697vw, 131px);
  padding-top: clamp(20px, 15.1797752809px + 1.2359550562vw, 31px);
  /* ％パディングは「フレックスコンテナ幅(953px)」基準で解決される点に注意 */
  padding-right: 5.04%;
  color: var(--whiteColor);
  /* 右端の三角（48px相当） */
  clip-path: polygon(0 0, calc(100% - clamp(24px, 13.4831460674px + 2.6966292135vw, 48px)) 0, 100% 50%, calc(100% - clamp(24px, 13.4831460674px + 2.6966292135vw, 48px)) 100%, 0 100%);
}

.SuccessionApproach__FlowStep--01 {
  z-index: 3;
  width: 33.26%;
  padding-left: 2.68%;
  background: var(--accentColor);
}

.SuccessionApproach__FlowStep--02 {
  z-index: 2;
  width: 39.03%;
  margin-left: -5.67%;
  padding-left: 8.4%;
  background: var(--sFlowMid);
}

.SuccessionApproach__FlowStep--03 {
  z-index: 1;
  width: 41.45%;
  margin-left: -8.08%;
  padding-left: 10.87%;
  background: var(--subColor);
}

.SuccessionApproach__FlowTitle {
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(15px, 12.808988764px + 0.5617977528vw, 20px);
  line-height: 1.35;
  letter-spacing: 0.05em;
}

.SuccessionApproach__FlowDesc {
  font-size: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
  line-height: 1.5;
  /* Figma: 本文238px/15文字＝字送り0 */
  letter-spacing: 0;
  margin-top: 5px;
}

@media only screen and (max-width: 767px) {
  .SuccessionApproach__Types {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 32px;
  }
  .SuccessionApproach__Type {
    max-width: 320px;
  }
  .SuccessionApproach__Type:not(:last-child)::after {
    display: none;
  }
  .SuccessionApproach__Points {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 340px;
    margin-inline: auto;
  }
  /* Step03 フロー：SPは下向き矢印で縦積み */
  .SuccessionApproach__Flow {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .SuccessionApproach__FlowStep {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: min(320px, 100%);
    margin-left: 0;
    padding-right: 24px;
    margin-top: -34px;
    padding: 60px 16px 41px;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), 50% 100%, 0 calc(100% - 32px));
  }
  .SuccessionApproach__FlowStep--01 {
    margin-top: 0;
    padding-top: 36px;
  }
  .SuccessionApproach__FlowStep--01,
  .SuccessionApproach__FlowStep--02,
  .SuccessionApproach__FlowStep--03 {
    padding-left: 24px;
  }
  .SuccessionApproach__FlowDesc br {
    display: none;
  }
}
/*==================================================
 * successionAnswer（なぜ組織再編まで考えるのか）
*================================================*/
.SuccessionAnswer {
  /* Figma: 直前セクション(successionApproach)の下端から111px */
  margin-top: clamp(62px, 40.5280898876px + 5.5056179775vw, 111px);
  --sAnswerMarker: rgba(1, 185, 255, 0.2);
  --sAnswerCardBg: var(--grayColor);
  --sAnswerMeritInset: inset 0 0 19px 0 rgba(0, 0, 0, 0.14);
  --sAnswerSummaryInset: inset 0 0 6px 0 rgba(48, 51, 64, 0.15);
}

.SuccessionAnswer__Heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(16px, 13.3707865169px + 0.6741573034vw, 22px);
  margin-bottom: clamp(40px, 32.9887640449px + 1.797752809vw, 56px);
}

.SuccessionAnswer__Icon {
  position: relative;
  display: block;
  width: clamp(48px, 44.4943820225px + 0.8988764045vw, 56px);
  aspect-ratio: 1;
}

.SuccessionAnswer__IconCircle {
  width: 100%;
  margin: 0;
}

.SuccessionAnswer__IconBulb {
  position: absolute;
  top: 21%;
  left: 23%;
  width: 55%;
  margin: 0;
}

.SuccessionAnswer__Title {
  font-size: clamp(20px, 14.7415730337px + 1.3483146067vw, 32px);
  line-height: 1.4375;
  letter-spacing: 0.05em;
  text-align: center;
  font-weight: 500;
}

.SuccessionAnswer__Marker {
  /* Figma: #01B9FF 20%・行の中央に高さ28px（=0.875em）。文字送りは変えない */
  padding: 0;
  line-height: inherit;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--sAnswerMarker)), to(var(--sAnswerMarker)));
  background-image: linear-gradient(var(--sAnswerMarker), var(--sAnswerMarker));
  background-repeat: no-repeat;
  background-size: 100% 0.875em;
  background-position: 0 50%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.SuccessionAnswer__Lead {
  /* Figma: 見出し→リード間は16px（親gap22pxの差分を戻す） */
  margin-top: -6px;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 2.2;
  letter-spacing: 0.05em;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .SuccessionAnswer__Lead {
    line-height: 1.8;
  }
}

.SuccessionAnswer__BarLabel {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: clamp(38px, 32.7415730337px + 1.3483146067vw, 50px);
  padding-left: 28px;
  margin-bottom: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(19px, 17.6853932584px + 0.3370786517vw, 22px);
  line-height: 1;
  letter-spacing: 0.05em;
}

.SuccessionAnswer__BarLabel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 9px;
  height: 100%;
  background: var(--subColor);
}

/*----- 3ケースカード -----*/
.SuccessionAnswer__Cases {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 12px;
}

.SuccessionAnswer__Case {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  max-width: 380px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  background: var(--sAnswerCardBg);
}

.SuccessionAnswer__CaseHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 6px 16px;
  background: var(--subColor);
  color: var(--whiteColor);
}

.SuccessionAnswer__CaseNo {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.SuccessionAnswer__CaseNo em {
  font-style: normal;
  font-size: 18px;
}

.SuccessionAnswer__CaseTitle {
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(18px, 17.1235955056px + 0.2247191011vw, 20px);
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.SuccessionAnswer__CaseSub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 28px;
  padding: 4px 8px;
  background: var(--accentColor);
  color: var(--whiteColor);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}

.SuccessionAnswer__CaseBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: clamp(10px, 9.5617977528px + 0.1123595506vw, 11px) clamp(14px, 11.808988764px + 0.5617977528vw, 19px) clamp(10px, 8.2471910112px + 0.4494382022vw, 14px);
}

.SuccessionAnswer__State {
  margin-bottom: 0;
}

.SuccessionAnswer__State--Fix {
  /* Figma: 改善策の本文下端4126 → メリットボックス上端4157 */
  margin-bottom: clamp(20px, 15.1797752809px + 1.2359550562vw, 31px);
}

.SuccessionAnswer__StateLabel {
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.333;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
  .SuccessionAnswer__StateLabel {
    font-size: 14px;
  }
}

.SuccessionAnswer__StateLabel--Now {
  color: var(--subColor);
}

.SuccessionAnswer__StateLabel--Fix {
  color: var(--accentColor);
}

.SuccessionAnswer__StateArrow {
  /* Figma: 見出し下の22px罫線（ラベル下7px／本文まで7px） */
  display: block;
  width: 22px;
  margin: 7px 0 6px;
}

.SuccessionAnswer__StateText {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
}

.SuccessionAnswer__CaseImg {
  /* Figma: 図版スロットは 350.86 × 304。左右5pxずつカード内側パディングの外へ出る */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: clamp(210px, 168.808988764px + 10.5617977528vw, 304px);
  margin: clamp(18px, 14.9325842697px + 0.7865168539vw, 25px) -5px clamp(16px, 12.9325842697px + 0.7865168539vw, 23px);
}
.SuccessionAnswer__CaseImg img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

.SuccessionAnswer__Merit {
  position: relative;
  margin-top: auto;
  margin-inline: -5px;
  padding: 25px 20px 26px;
  border-radius: 23px;
  background: var(--whiteColor);
  -webkit-box-shadow: var(--sAnswerMeritInset);
          box-shadow: var(--sAnswerMeritInset);
}

.SuccessionAnswer__MeritBadge {
  position: absolute;
  top: -11px;
  left: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 23px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--accentColor);
  color: var(--whiteColor);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.SuccessionAnswer__MeritList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 11px;
  list-style: none;
}

.SuccessionAnswer__MeritItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 11px;
  font-size: clamp(14px, 13.5617977528px + 0.1123595506vw, 15px);
  line-height: 1.133;
  letter-spacing: 0.05em;
  /* Figma正色：チェックアイコンはシアン円(#01B9FF)＋白チェック。
     元アセット(successionCheckIcon.svg)は円が濃紺#081C2Eのため、
     共有SVGを触らずCSS内data-URIでシアン版を描画（imgは非表示）。 */
}
.SuccessionAnswer__MeritItem img {
  display: none;
}
.SuccessionAnswer__MeritItem::before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 17px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%2301B9FF'/%3E%3Cpath d='M5 8.5L8 11.5L14 6' stroke='white' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/*----- まとめカード -----*/
.SuccessionAnswer__Summary {
  position: relative;
  margin-top: clamp(30px, 19.4831460674px + 2.6966292135vw, 54px);
  padding: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px) clamp(16px, 5.4831460674px + 2.6966292135vw, 40px) clamp(16px, 13.3707865169px + 0.6741573034vw, 22px);
  border-radius: clamp(12px, 6.7415730337px + 1.3483146067vw, 24px);
  background: var(--whiteColor);
  -webkit-box-shadow: var(--sAnswerSummaryInset);
          box-shadow: var(--sAnswerSummaryInset);
}

.SuccessionAnswer__Quote {
  position: absolute;
  top: -14px;
  right: 8.36%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* Figma: 2マーク+gapで総幅約69px（各マーク約27px / gap約15px）に縮小 */
  gap: clamp(10px, 7.808988764px + 0.5617977528vw, 15px);
}
.SuccessionAnswer__Quote img {
  width: clamp(12px, 5.4269662921px + 1.6853932584vw, 27px);
  margin: 0;
}

.SuccessionAnswer__SummaryText {
  font-size: clamp(16px, 13.3707865169px + 0.6741573034vw, 22px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  font-weight: 500;
}

@media only screen and (max-width: 767px) {
  .SuccessionAnswer__Cases {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .SuccessionAnswer__Case {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 100%;
    max-width: 380px;
  }
  .SuccessionAnswer__CaseImg img {
    width: 100%;
  }
}
/*==================================================
 * successionService（サービス内容）
*================================================*/
.SuccessionService {
  margin-top: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  padding-block: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  background: var(--sServiceBg);
  --sServiceBg: #e5e8ee;
  --sServiceCardBg: var(--grayColor);
  --sServiceSupportInset: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
  --sServiceNoteInset: inset 0 0 6px 0 rgba(48, 51, 64, 0.15);
  --sServiceMarker: rgba(1, 185, 255, 0.2);
}

/* Figma: このセクションのSecHeadは英字行のみ → 直下までの間隔は56px */
.SuccessionService .SuccessionSecHead {
  margin-bottom: clamp(36px, 27.2359550562px + 2.2471910112vw, 56px);
}

/*----- 6サービスカード -----*/
.SuccessionService__Cards {
  display: grid;
  /* 見出しがnowrapでカード幅を押し広げないよう minmax(0,1fr) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  -webkit-column-gap: clamp(16px, 12.9325842697px + 0.7865168539vw, 23px);
     -moz-column-gap: clamp(16px, 12.9325842697px + 0.7865168539vw, 23px);
          column-gap: clamp(16px, 12.9325842697px + 0.7865168539vw, 23px);
  row-gap: clamp(14px, 11.3707865169px + 0.6741573034vw, 20px);
}

.SuccessionService__Card {
  position: relative;
  padding-top: 12px;
}

.SuccessionService__CardTab {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--subColor);
  color: var(--whiteColor);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.SuccessionService__CardInner {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 20px clamp(18px, 13.1797752809px + 1.2359550562vw, 29px);
  border-radius: 4px;
  background: var(--sServiceCardBg);
}

.SuccessionService__CardTitle {
  font-size: clamp(19px, 17.6853932584px + 0.3370786517vw, 22px);
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-align: center;
  font-weight: 500;
}

.SuccessionService__CardImg {
  width: 100%;
  aspect-ratio: 316/164;
  border-radius: 2px;
  overflow: hidden;
}
.SuccessionService__CardImg img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.SuccessionService__CardDesc {
  width: 100%;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
}

.SuccessionService__Support {
  margin-top: auto;
  width: 100%;
  padding: 14px 18px;
  border-radius: 4px;
  background: var(--whiteColor);
  -webkit-box-shadow: var(--sServiceSupportInset);
          box-shadow: var(--sServiceSupportInset);
}

.SuccessionService__SupportBadge {
  line-height: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2px 8px;
  border-radius: 50px;
  background: var(--subColor);
  color: var(--whiteColor);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.SuccessionService__SupportList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 11px;
  margin-top: 12px;
  list-style: none;
}

.SuccessionService__SupportItem {
  position: relative;
  padding-left: 13px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.SuccessionService__SupportItem::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--subColor);
}

/* Figma: 1280では見出しは1行固定（カード内側パディングをはみ出して配置） */
/*----- まとめ（注記） -----*/
.SuccessionService__Note {
  position: relative;
  margin-top: clamp(28px, 21.8651685393px + 1.5730337079vw, 42px);
  padding: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px) clamp(24px, 16.9887640449px + 1.797752809vw, 40px) clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  border-radius: clamp(12px, 6.7415730337px + 1.3483146067vw, 24px);
  background: var(--whiteColor);
  -webkit-box-shadow: var(--sServiceNoteInset);
          box-shadow: var(--sServiceNoteInset);
}

.SuccessionService__NoteQuote {
  position: absolute;
  top: -14px;
  right: 8.36%;
  /* Figma: あしらい幅約69pxに拡大（元52pxが小さい） */
  width: clamp(26px, 7.1573033708px + 4.8314606742vw, 69px);
}
.SuccessionService__NoteQuote img {
  width: 100%;
  margin: 0;
}

.SuccessionService__NoteText {
  font-size: clamp(17px, 14.808988764px + 0.5617977528vw, 22px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  font-weight: 500;
}

.SuccessionService__Marker {
  /* Figma: #01B9FF 20%・行中央に高さ28px（=文字の1.273倍…22px基準） */
  padding: 0;
  line-height: inherit;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--sServiceMarker)), to(var(--sServiceMarker)));
  background-image: linear-gradient(var(--sServiceMarker), var(--sServiceMarker));
  background-repeat: no-repeat;
  background-size: 100% 1.273em;
  background-position: 0 50%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/*----- 専門家連携 -----*/
.SuccessionService__Collab {
  margin-top: clamp(20px, 16.4943820225px + 0.8988764045vw, 28px);
  padding: clamp(28px, 27.1235955056px + 0.2247191011vw, 30px) clamp(20px, 3.3483146067px + 4.2696629213vw, 58px);
  border: 1px solid var(--accentColor);
  border-radius: 4px;
  background: var(--whiteColor);
}

.SuccessionService__CollabTitle {
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  font-weight: 500;
  color: var(--subColor);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.SuccessionService__CollabText {
  margin-top: 12px;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .SuccessionService__CollabText {
    margin-top: 20px;
  }
}

.SuccessionService__Experts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 9.9213483146px + 2.5842696629vw, 43px);
  margin-top: clamp(28px, 26.2471910112px + 0.4494382022vw, 32px);
}

.SuccessionService__Expert {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  text-align: center;
}

.SuccessionService__ExpertIcon {
  display: block;
  width: 75px;
}

.SuccessionService__ExpertIcon > img {
  width: 100%;
  margin: 0;
}

.SuccessionService__ExpertIconBg {
  position: relative;
  display: block;
  width: 75px;
  aspect-ratio: 1;
}

.SuccessionService__ExpertIconBg > img:first-child {
  width: 100%;
  margin: 0;
}

.SuccessionService__ExpertIconFront {
  position: absolute;
  top: 24%;
  left: 32%;
  width: 39%;
  margin: 0;
}

.SuccessionService__ExpertTitle {
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(18px, 17.1235955056px + 0.2247191011vw, 20px);
  line-height: 1.35;
  letter-spacing: 0.05em;
}

.SuccessionService__ExpertDesc {
  font-size: clamp(13px, 11.6853932584px + 0.3370786517vw, 16px);
  letter-spacing: 0.05em;
}

/*----- 関連ページリンク -----*/
.SuccessionService__Links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
  margin-top: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px);
}

.SuccessionService__LinksText {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 2.5;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: var(--subColor);
  text-underline-offset: 4px;
}
@media only screen and (max-width: 767px) {
  .SuccessionService__LinksText {
    line-height: 1.8;
  }
}

.SuccessionService__LinksBtns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(10px, -6.6516853933px + 4.2696629213vw, 48px);
}

.SuccessionService__LinkBtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 14px 18px 14px 22px;
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
  background: var(--subColor);
  color: var(--whiteColor);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  letter-spacing: 0.05em;
}
.SuccessionService__LinkBtn img {
  width: 23px;
  margin: 0;
}

@media only screen and (min-width: 767px) and (max-width: 959px) {
  .SuccessionService__Cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .SuccessionService__Experts {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .SuccessionService__Cards {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin-inline: auto;
  }
  .SuccessionService__Experts {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
    -webkit-column-gap: 10px;
       -moz-column-gap: 10px;
            column-gap: 10px;
  }
  .SuccessionService__LinkBtn {
    width: 100%;
    max-width: 360px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
/*==================================================
 * successionReason（選ばれる3つの理由）
*================================================*/
.SuccessionReason {
  margin-top: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
}

.SuccessionReason__Items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.SuccessionReason__Item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.SuccessionReason__Img {
  width: 100%;
  aspect-ratio: 381/210;
  overflow: hidden;
}
.SuccessionReason__Img img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.SuccessionReason__Box {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: clamp(20px, 16.9325842697px + 0.7865168539vw, 27px) 16px clamp(18px, 16.6853932584px + 0.3370786517vw, 21px);
  background: var(--grayColor);
}

.SuccessionReason__Num {
  position: absolute;
  top: calc(-1 * clamp(53px, 39.4157303371px + 3.4831460674vw, 84px));
  right: 0;
  z-index: 2;
  font-style: italic;
  font-size: clamp(76px, 56.7191011236px + 4.9438202247vw, 120px);
  line-height: 1;
  letter-spacing: 0.05em;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(17%, var(--accentColor)), color-stop(115%, var(--subColor)));
  background: linear-gradient(180deg, var(--accentColor) 17%, var(--subColor) 115%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  color: transparent;
  pointer-events: none;
}

.SuccessionReason__Label {
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(16px, 15.1235955056px + 0.2247191011vw, 18px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.SuccessionReason__Divider {
  display: block;
  width: 22px;
  height: 1px;
  margin: clamp(14px, 11.808988764px + 0.5617977528vw, 19px) 0 clamp(9px, 7.6853932584px + 0.3370786517vw, 12px);
  background: var(--accentColor);
}

.SuccessionReason__Title {
  font-size: clamp(19px, 17.6853932584px + 0.3370786517vw, 22px);
  line-height: 1.5455;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.SuccessionReason__Text {
  margin-top: clamp(10px, 8.2471910112px + 0.4494382022vw, 14px);
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
}

@media only screen and (max-width: 767px) {
  .SuccessionReason__Items {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin-inline: auto;
    gap: 24px;
  }
}
/*==================================================
 * successionCase（ご相談事例）※CMS化(CPT case)＋Swiperは後続
*================================================*/
.SuccessionCase {
  margin-top: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  --sCaseCardBg: var(--grayColor);
  --sCaseTag: #888888;
}

.SuccessionCase__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: clamp(24px, 2.9662921348px + 5.393258427vw, 72px);
  margin-bottom: clamp(32px, 21.4831460674px + 2.6966292135vw, 56px);
}

.SuccessionCase__HeadEn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.SuccessionCase__HeadBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  padding-bottom: 4px;
}
@media only screen and (max-width: 767px) {
  .SuccessionCase__HeadBody {
    gap: 15px;
  }
}

.SuccessionCase__HeadTitle {
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.SuccessionCase__HeadText {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
}

.SuccessionCase__Carousel {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .SuccessionCase__Carousel {
    width: calc(100% + 15px);
  }
}

/* Swiper（main.js の .jsCaseSwiper = PC3枚/tab2枚/SP1.15枚・gap9px）で制御する */
.SuccessionCase__Cards {
  width: 100%;
  /* _top.scss側の `.jsCaseSwiper { overflow: visible }` がSPでも効いてしまい、
     カードが枠外へ溢れて「横スクロール」に見えていた（旧scroll-snap実装の名残）。
     法人顧問・相続と同じく、Swiperのスライドとして枠内でクリップする */
  overflow: hidden;
}

.SuccessionCase__Arrow {
  position: absolute;
  /* Figma: カード上端から201px（サムネイル下端付近） */
  top: clamp(120px, 84.5056179775px + 9.1011235955vw, 201px);
  z-index: 3;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.SuccessionCase__Arrow img {
  width: 100%;
  margin: 0;
}

.SuccessionCase__Arrow--Prev {
  left: -16px;
  /* SPは .cnt の左右余白が16pxしかなく、-16pxだと矢印が画面外へ1pxはみ出す。
     TOP（.TopCase__Arrow）と同じ位置に合わせる */
}
@media only screen and (max-width: 767px) {
  .SuccessionCase__Arrow--Prev {
    left: -8px;
  }
}

.SuccessionCase__Arrow--Next {
  right: -16px;
}
@media only screen and (max-width: 767px) {
  .SuccessionCase__Arrow--Next {
    right: 32px;
  }
}

.SuccessionCase__Card {
  height: auto; /* Swiper の slide 高(100%)を解除し、原稿量が違っても高さを揃える */
  background: var(--sCaseCardBg);
}

.SuccessionCase__CardLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

.SuccessionCase__CardImg {
  width: 100%;
  aspect-ratio: 380/210;
  overflow: hidden;
}
.SuccessionCase__CardImg img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.SuccessionCase__CardBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 20px;
}

.SuccessionCase__CardMetaTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.SuccessionCase__Tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 150px;
  height: 24px;
  padding: 0 12px;
  border-radius: 40px;
  background: var(--subColor);
  color: var(--whiteColor);
  font-size: 14px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.SuccessionCase__Company {
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  letter-spacing: 0.05em;
}

.SuccessionCase__CardTitle {
  font-size: clamp(18px, 17.1235955056px + 0.2247191011vw, 20px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.SuccessionCase__CardDivider {
  display: block;
  width: 22px;
  height: 1px;
  margin: 8px 0;
  background: var(--accentColor);
}

.SuccessionCase__CardInfo {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.SuccessionCase__CardTags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.SuccessionCase__CardTags span {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--sCaseTag);
}

.SuccessionCase__More {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--subColor);
}
.SuccessionCase__More img {
  width: 14px;
  margin: 0;
}

.SuccessionCase__Btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: clamp(28px, 22.7415730337px + 1.3483146067vw, 40px);
}

.SuccessionCase__BtnLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 14px 18px 14px 22px;
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
  background: var(--subColor);
  color: var(--whiteColor);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  letter-spacing: 0.05em;
}
.SuccessionCase__BtnLink img {
  width: 23px;
  margin: 0;
}

@media only screen and (max-width: 767px) {
  .SuccessionCase__Head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 16px;
  }
}
/*==================================================
 * successionPrice（料金目安）
*================================================*/
.SuccessionPrice {
  margin-top: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  padding-block: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  background: var(--sServiceBg, #e5e8ee);
  --sPriceBorder: #e5e8ee;
  --sPriceNote: #5f5f5f;
}

.SuccessionPrice__Block {
  margin-top: clamp(32px, 28.4943820225px + 0.8988764045vw, 40px);
}

.SuccessionPrice__BarLabel {
  position: relative;
  padding-left: 23px;
  margin-bottom: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(19px, 17.6853932584px + 0.3370786517vw, 22px);
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.SuccessionPrice__BarLabel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 9px;
  height: 50px;
  background: var(--subColor);
}

.SuccessionPrice__Plan {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}

.SuccessionPrice__PlanCard {
  width: 100%;
  max-width: 386px;
}

.SuccessionPrice__PlanName {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 20px;
  border: 1px solid var(--sPriceBorder);
  background: var(--subColor);
  color: var(--whiteColor);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(16px, 12.4943820225px + 0.8988764045vw, 24px);
  letter-spacing: 0.05em;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .SuccessionPrice__PlanName {
    padding-block: 10px;
  }
}

.SuccessionPrice__PlanPrice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 4px;
  padding: 20px;
  border: 1px solid var(--sPriceBorder);
  border-top: none;
  background: var(--whiteColor);
  color: var(--fontColor);
  font-family: var(--fontJp);
  font-weight: 600;
}

.SuccessionPrice__PlanNum {
  font-weight: 600;
  font-size: clamp(21px, 19.6853932584px + 0.3370786517vw, 24px);
  line-height: 1;
  letter-spacing: 0.05em;
}

.SuccessionPrice__PlanUnit {
  font-size: clamp(15px, 14.1235955056px + 0.2247191011vw, 17px);
  line-height: 1.1;
  letter-spacing: 0.05em;
}

.SuccessionPrice__PlanNote {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  letter-spacing: 0.05em;
}

/*----- 個別見積もりテーブル -----*/
.SuccessionPrice__Table {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.SuccessionPrice__Row {
  display: grid;
  grid-template-columns: 368px 1fr;
}

.SuccessionPrice__Row + .SuccessionPrice__Row {
  margin-top: -1px;
}

.SuccessionPrice__RowLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  /* Figma: ラベル列368px内に1行で収める */
  padding: 18px 16px;
  border: 1px solid var(--sPriceBorder);
  background: var(--subColor);
  color: var(--whiteColor);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(16px, 15.1235955056px + 0.2247191011vw, 18px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .SuccessionPrice__RowLabel {
    padding-block: 10px;
  }
}

.SuccessionPrice__RowDesc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 18px 24px;
  margin-left: -1px;
  border: 1px solid var(--sPriceBorder);
  background: var(--whiteColor);
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/*----- ご相談内容カード -----*/
.SuccessionPrice__Note {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(16px, 9.8651685393px + 1.5730337079vw, 30px);
  margin-top: clamp(32px, 28.4943820225px + 0.8988764045vw, 40px);
  padding: clamp(24px, 20.4943820225px + 0.8988764045vw, 32px) clamp(16px, 8.9887640449px + 1.797752809vw, 32px);
  border: 1px solid var(--accentColor);
  border-radius: 4px;
  background: var(--whiteColor);
}

.SuccessionPrice__NoteIcon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
  width: clamp(60px, 52.9887640449px + 1.797752809vw, 76px);
}
.SuccessionPrice__NoteIcon img {
  width: 100%;
  margin: 0;
}

.SuccessionPrice__NoteTitle {
  font-size: clamp(18px, 17.1235955056px + 0.2247191011vw, 20px);
  letter-spacing: 0.05em;
  color: var(--subColor);
  font-weight: 500;
}

.SuccessionPrice__NoteText {
  margin-top: 8px;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
  .SuccessionPrice__NoteText {
    text-align: left;
  }
}

.SuccessionPrice__Notes {
  margin-top: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--sPriceNote);
}

/* 料金CTAボックスは共通化 → .PriceCta（本ファイル末尾付近）。旧 .SuccessionPrice__Btns は廃止 */
@media only screen and (max-width: 767px) {
  .SuccessionPrice__PlanCard {
    max-width: none;
  }
  .SuccessionPrice__Row {
    grid-template-columns: 1fr;
  }
  .SuccessionPrice__RowDesc {
    margin-left: 0;
    margin-top: -1px;
  }
  .SuccessionPrice__Note {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  }
}
/* ============================================================
   _inheritance.scss
   ============================================================ */
/*==================================================
 * inheritance（相続・生前対策 / page-inheritance.php）
 * Y座標昇順のセクション順に記述。
 * 共通部(Header/FotterCta/Footer)は header.php/footer.php 側。
*================================================*/
/*==================================================
 * 共通レイアウト（Figma実寸: コンテンツ幅1160 / 1280時 左右余白60）
 * .cnt は max-width1160 + padding-inline15 のため 1280以上でpaddingを解除して 1160 を実寸で出す。
 * セクション間は Figmaアートボード実測どおり一律100px（各セクションの padding-top で確保）。
*================================================*/
/* _main.scss の span/div { line-height: 1.6 } が行内spanの行ボックスを膨らませるのを打ち消す */
.InheritanceSecHead__Accent,
.InheritanceAbout__Marker,
.InheritanceApproach__Marker {
  line-height: inherit;
}

/* 画像のみを内包するspanは行ボックス分の余白が付くため潰す */
.InheritanceAbout__Q,
.InheritanceService__ExpertIcon,
.InheritanceService__LinkIcon,
.InheritanceCase__BtnIcon,
.InheritancePrice__InfoIcon,
.InheritanceApproach__Quote {
  display: block;
  line-height: 0;
}

@media only screen and (min-width: 1280px) {
  .InheritanceAbout__Inner,
  .InheritanceApproach__Inner,
  .InheritanceService__Inner,
  .InheritanceReason__Inner,
  .InheritanceCase__Inner,
  .InheritancePrice__Inner {
    padding-inline: 0;
  }
}
/*==================================================
 * inheritanceAbout（よくあるお悩み）※共通化候補：兄弟SuccessionAbout/Advisoryと同型
*================================================*/
.InheritanceAbout {
  padding-top: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  /* ↓ページローカル変数（統合フェーズで:root集約候補） */
  --iAboutStartBg: #ceeaf5;
  --iAboutMarker: rgba(1, 185, 255, 0.2);
  --iAboutInsetShadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.14);
  --iAboutInsetShadowStart: inset 0 0 20px 0 rgba(2, 75, 95, 0.14);
}

.InheritanceAbout__Heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(16px, 12.9325842697px + 0.7865168539vw, 23px);
  margin-bottom: clamp(32px, 24.9887640449px + 1.797752809vw, 48px);
}

.InheritanceAbout__Q {
  display: block;
  width: clamp(44px, 38.7415730337px + 1.3483146067vw, 56px);
}
.InheritanceAbout__Q img {
  width: 100%;
  margin: 0;
}

.InheritanceAbout__Title {
  width: 100%;
  font-size: clamp(18px, 11.8651685393px + 1.5730337079vw, 32px);
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-align: center;
  font-weight: 500;
}

.InheritanceAbout__Marker {
  /* Figma: rgba(1,185,255,.2) の高さ28px矩形（font-size32px→0.875em）。左右paddingなし */
  padding: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--iAboutMarker)), to(var(--iAboutMarker)));
  background-image: linear-gradient(var(--iAboutMarker), var(--iAboutMarker));
  background-repeat: no-repeat;
  background-size: 100% 0.875em;
  background-position: left center;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.InheritanceAbout__Cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0; /* 被せ量は矢印のmarginで制御（旧: fluid(28,40)） */
}

.InheritanceAbout__Card {
  position: relative;
  width: 100%;
  max-width: 1160px;
  padding-top: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
}

.InheritanceAbout__Badge {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: clamp(34px, 31.3707865169px + 0.6741573034vw, 40px);
  padding-inline: clamp(24px, 13.4831460674px + 2.6966292135vw, 48px);
  border-radius: 4px;
  color: var(--whiteColor);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(15px, 11.0561797753px + 1.0112359551vw, 24px);
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.InheritanceAbout__Badge--Dark {
  background: var(--mainColor);
}

.InheritanceAbout__Badge--Cyan {
  background: var(--accentColor);
}

.InheritanceAbout__CardBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(32px, 14.4719101124px + 4.4943820225vw, 72px);
  padding: clamp(40px, 34.7415730337px + 1.3483146067vw, 52px) clamp(16px, 12.4943820225px + 0.8988764045vw, 24px) clamp(32px, 28.4943820225px + 0.8988764045vw, 40px);
  border-radius: clamp(12px, 6.7415730337px + 1.3483146067vw, 24px);
  background: var(--grayColor);
  -webkit-box-shadow: var(--iAboutInsetShadow);
          box-shadow: var(--iAboutInsetShadow);
}

.InheritanceAbout__List {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  list-style: none;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 481px;
          flex: 0 1 481px;
  min-width: 0;
  max-width: 481px;
}

.InheritanceAbout__Item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

.InheritanceAbout__Check {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
}

.InheritanceAbout__ItemText {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  font-size: clamp(13px, 11.6853932584px + 0.3370786517vw, 16px);
  line-height: 1;
  letter-spacing: 0.05em;
}
.InheritanceAbout__ItemText b {
  font-weight: 600;
}

.InheritanceAbout__Arrow {
  /* 悩みカード下端に矢印を被せる（Figma: 上カードに約15px重ね） */
  position: relative;
  z-index: 2;
  width: clamp(40px, 33.8651685393px + 1.5730337079vw, 54px);
  margin-top: -15px;
  margin-bottom: clamp(10px, 8.6853932584px + 0.3370786517vw, 13px);
}
.InheritanceAbout__Arrow img {
  width: 100%;
  margin: 0;
}

.InheritanceAbout__CardBody--Start {
  display: block;
  padding: clamp(40px, 35.6179775281px + 1.1235955056vw, 50px) clamp(16px, 7.6741573034px + 2.1348314607vw, 35px) clamp(32px, 28.4943820225px + 0.8988764045vw, 40px);
  background: var(--iAboutStartBg);
  -webkit-box-shadow: var(--iAboutInsetShadowStart);
          box-shadow: var(--iAboutInsetShadowStart);
}

.InheritanceAbout__StartText {
  max-width: 1090px;
  margin-inline: auto;
  font-size: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  line-height: 1.75;
  letter-spacing: 0.05em;
  text-align: center;
}
.InheritanceAbout__StartText .InheritanceAbout__Em {
  font-weight: 600;
  color: var(--subColor);
}

@media only screen and (max-width: 767px) {
  .InheritanceAbout__CardBody {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 16px;
  }
  .InheritanceAbout__List {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto; /* 縦積み時にflex-basisが高さ扱いになるのを解除 */
    max-width: none;
    width: 100%;
  }
}
/*==================================================
 * InheritanceSecHead（各セクション共通見出し）※共通化候補：ServiceSecHead
 * En(グラデ大英字)+EnSub(JP small) / Title(明朝)+Text
*================================================*/
.InheritanceSecHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(28px, 19.6741573034px + 2.1348314607vw, 47px); /* Figma auto-layout 56 − Cormorantのline-box余白9 */
  margin-bottom: clamp(30px, 21.6741573034px + 2.1348314607vw, 49px);
}

.InheritanceSecHead__Top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 12px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  .InheritanceSecHead__Top {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.InheritanceSecHead__En {
  font-size: clamp(38px, 30.1123595506px + 2.0224719101vw, 56px);
  line-height: 1;
  letter-spacing: 0.05em;
  background: linear-gradient(156.29deg, var(--accentColor) 1.25%, var(--subColor) 97.36%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  color: transparent;
}

.InheritanceSecHead__EnSub {
  font-family: var(--fontJp);
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.2;
  letter-spacing: 0.05em;
  padding-bottom: 1em;
}
@media only screen and (max-width: 767px) {
  .InheritanceSecHead__EnSub {
    padding-bottom: 0;
  }
}

/* 縦積みパターン（Figma Frame2898: 英字の下に日本語。Reason/Case/Price/Q&A） */
.InheritanceSecHead--Stack {
  margin-bottom: clamp(32px, 21.4831460674px + 2.6966292135vw, 56px);
}

.InheritanceSecHead--Stack .InheritanceSecHead__Top {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 4px;
}
@media print, screen and (min-width: 768px) {
  .InheritanceSecHead--Stack .InheritanceSecHead__Top {
    width: 144px;
  }
}

.InheritanceSecHead--Stack .InheritanceSecHead__EnSub {
  padding-bottom: 0;
}

.InheritanceSecHead__Body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(10px, 9.1235955056px + 0.2247191011vw, 12px);
}

.InheritanceSecHead__Title {
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  line-height: 1.48;
  letter-spacing: 0.05em;
  font-weight: 500;
}
@media only screen and (max-width: 767px) {
  .InheritanceSecHead__Title {
    text-align: center;
  }
}

.InheritanceSecHead__Accent {
  color: var(--subColor);
}

.InheritanceSecHead__Text {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
  .InheritanceSecHead__Text {
    text-align: center;
  }
}

/*==================================================
 * inheritanceApproach（進め方：3ステップカード）
*================================================*/
.InheritanceApproach {
  padding-top: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
}

/* Approachのみ見出しに本文ブロックがあり、その下は24px（Figma実測） */
.InheritanceApproach .InheritanceSecHead {
  margin-bottom: clamp(16px, 12.4943820225px + 0.8988764045vw, 24px);
}

.InheritanceApproach__Main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(24px, 17.8651685393px + 1.5730337079vw, 38px); /* Figma: ステップ下端→締め白箱上端 38px */
}

.InheritanceApproach__Steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(6px, 5.1235955056px + 0.2247191011vw, 8px);
  width: 100%;
  max-width: 1040px;
}

.InheritanceApproach__Step {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0; /* 被せ量は矢印marginで制御。ステップ間隔は__Stepsのgapが担保 */
}

.InheritanceApproach__StepBody {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(24px, 19.6179775281px + 1.1235955056vw, 34px);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: clamp(28px, 22.3033707865px + 1.4606741573vw, 41px) clamp(24px, 15.2359550562px + 2.2471910112vw, 44px) clamp(28px, 22.7415730337px + 1.3483146067vw, 40px);
  border-radius: clamp(12px, 6.7415730337px + 1.3483146067vw, 24px);
  background: var(--grayColor);
  -webkit-box-shadow: inset 0 0 20px 0 rgba(2, 75, 95, 0.14);
          box-shadow: inset 0 0 20px 0 rgba(2, 75, 95, 0.14);
}
@media only screen and (max-width: 767px) {
  .InheritanceApproach__StepBody {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}

.InheritanceApproach__StepImg {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-height: 0;
  width: clamp(240px, 109.5px + 16.9921875vw, 327px);
  aspect-ratio: 327/267;
  border-radius: 4px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .InheritanceApproach__StepImg {
    width: 100%;
    aspect-ratio: 327/200;
  }
}
.InheritanceApproach__StepImg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
}

.InheritanceApproach__StepContent {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(20px, 16.0561797753px + 1.0112359551vw, 29px);
}

.InheritanceApproach__StepHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}

.InheritanceApproach__StepHeadTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}

.InheritanceApproach__StepNum {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--subColor);
  color: var(--whiteColor);
  font-style: italic;
  font-size: 19px;
  letter-spacing: 0.05em;
  line-height: 1;
}

.InheritanceApproach__StepTitle {
  font-weight: 500;
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.InheritanceApproach__StepDesc {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.InheritanceApproach__StepList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(12px, 10.6853932584px + 0.3370786517vw, 15px);
  list-style: none;
}

.InheritanceApproach__StepItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  .InheritanceApproach__StepItem {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.InheritanceApproach__StepTermWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.InheritanceApproach__StepCheck {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
}

.InheritanceApproach__StepTerm {
  font-weight: 600;
  font-size: clamp(16px, 15.1235955056px + 0.2247191011vw, 18px);
  letter-spacing: 0.05em;
  line-height: 1;
}

.InheritanceApproach__StepItemDesc {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  line-height: 1;
}

.InheritanceApproach__StepArrow {
  /* ステップカード下端に矢印を被せる（Figma: 上カードに約16px重ね） */
  position: relative;
  z-index: 2;
  width: clamp(40px, 33.8651685393px + 1.5730337079vw, 54px);
  margin-top: -16px;
}
.InheritanceApproach__StepArrow img {
  width: 100%;
  margin: 0;
}

.InheritanceApproach__Note {
  position: relative;
  width: 100%;
  max-width: 1160px;
  padding: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px) clamp(24px, 13.4831460674px + 2.6966292135vw, 48px) clamp(18px, 17.1235955056px + 0.2247191011vw, 20px);
  border-radius: clamp(12px, 6.7415730337px + 1.3483146067vw, 24px);
  background: var(--whiteColor);
  -webkit-box-shadow: inset 0 0 6px 0 rgba(48, 51, 64, 0.15);
          box-shadow: inset 0 0 6px 0 rgba(48, 51, 64, 0.15);
}

.InheritanceApproach__Quote {
  /* Figma Group2624（approachQuote.svg 69.25×54）を白箱右上に14px被せて配置 */
  position: absolute;
  top: -10px;
}
@media only screen and (min-width: 1280px) {
  .InheritanceApproach__Quote {
    top: -14px;
  }
}
.InheritanceApproach__Quote {
  right: clamp(24px, -7.5505617978px + 8.0898876404vw, 96px);
  width: clamp(24px, 4.2808988764px + 5.0561797753vw, 69px);
  line-height: 0;
}
.InheritanceApproach__Quote img {
  width: 100%;
  margin: 0;
}

.InheritanceApproach__NoteText {
  font-size: clamp(17px, 14.808988764px + 0.5617977528vw, 22px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

.InheritanceApproach__Marker {
  /* Figma: rgba(1,185,255,.2) の高さ28px矩形（font-size22px→1.273em） */
  padding: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--iAboutMarker, rgba(1, 185, 255, 0.2))), to(var(--iAboutMarker, rgba(1, 185, 255, 0.2))));
  background-image: linear-gradient(var(--iAboutMarker, rgba(1, 185, 255, 0.2)), var(--iAboutMarker, rgba(1, 185, 255, 0.2)));
  background-repeat: no-repeat;
  background-size: 100% 1.273em;
  background-position: left center;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/*==================================================
 * inheritanceService（支援内容）※カードは兄弟AdvisoryServiceと同型
*================================================*/
.InheritanceService {
  /* Figma: 背景帯は前セクションから100px空けて始まり、内側に上下100pxのpadding */
  margin-top: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  padding-block: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  background-color: #E5E8EE;
}

.InheritanceService__Grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(24px, 18.3033707865px + 1.4606741573vw, 37px) 23px; /* Figma: 行ピッチ497 = カード448 + ラベル12 + 37 */
}
@media only screen and (max-width: 767px) {
  .InheritanceService__Grid {
    gap: 32px 16px;
  }
}

.InheritanceService__Card {
  position: relative;
  width: calc((100% - 46px) / 3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 20px clamp(20px, 16.7134831461px + 0.8426966292vw, 27.5px);
  background-color: #F5F5F5;
  border-radius: 4px;
}
@media only screen and (max-width: 959px) {
  .InheritanceService__Card {
    width: calc((100% - 23px) / 2);
  }
}
@media only screen and (max-width: 767px) {
  .InheritanceService__Card {
    width: 100%;
  }
}

.InheritanceService__CardTag {
  position: absolute;
  top: -12px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: var(--subColor);
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  font-weight: 600;
  line-height: 1.43;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  white-space: nowrap;
}

@media only screen and (min-width: 1280px) {
  .InheritanceService__CardTtl {
    white-space: nowrap; /* Figma: タイトルは1行（カードのpaddingをはみ出す） */
  }
}
.InheritanceService__CardTtl {
  font-size: clamp(19px, 17.6853932584px + 0.3370786517vw, 22px);
  font-weight: 500;
  line-height: 1.545;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--fontColor);
}

.InheritanceService__CardImg {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 316/164;
  overflow: hidden;
  border-radius: 2px;
}
.InheritanceService__CardImg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
}

.InheritanceService__CardDesc {
  width: 100%;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.InheritanceService__CardBox {
  position: relative;
  width: 100%;
  margin-top: auto;
  padding: 14px 18px;
  background-color: var(--whiteColor);
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
          box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
}

.InheritanceService__CardBoxLabel {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 12px;
  padding: 2px 8px;
  border-radius: 50px;
  background-color: var(--subColor);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.667;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

.InheritanceService__CardList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 11px;
}

.InheritanceService__CardListItem {
  position: relative;
  padding-left: 13px;
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.InheritanceService__CardListItem::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--subColor);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/* 専門家連携ボックス */
.InheritanceService__Expert {
  margin-top: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: clamp(24px, 21.3707865169px + 0.6741573034vw, 30px) clamp(8px, -13.4719101124px + 5.5056179775vw, 57px) clamp(24px, 21.808988764px + 0.5617977528vw, 29px) clamp(8px, -13.9101123596px + 5.6179775281vw, 58px);
  background-color: var(--whiteColor);
  border: 1px solid var(--accentColor);
  border-radius: 4px;
}

.InheritanceService__ExpertTtl {
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--subColor);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.InheritanceService__ExpertDesc {
  margin-top: clamp(10px, 9.1235955056px + 0.2247191011vw, 12px);
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.75;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--fontColor);
}
@media only screen and (max-width: 767px) {
  .InheritanceService__ExpertDesc {
    margin-top: 15px;
  }
}

.InheritanceService__ExpertList {
  margin-top: clamp(24px, 20.4943820225px + 0.8988764045vw, 32px);
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: clamp(12px, 8.0561797753px + 1.0112359551vw, 21px);
}
@media only screen and (max-width: 767px) {
  .InheritanceService__ExpertList {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 28px 5px;
  }
}

.InheritanceService__ExpertItem {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 195px;
          flex: 0 1 195px;
  min-width: 0;
}
@media only screen and (min-width: 1280px) {
  .InheritanceService__ExpertItem {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 195px;
            flex: 0 0 195px; /* Figma: 195px固定・合計1059pxが右paddingに少しはみ出す */
  }
}
.InheritanceService__ExpertItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 767px) {
  .InheritanceService__ExpertItem {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 16px) / 2);
            flex: 0 0 calc((100% - 16px) / 2);
    max-width: none;
  }
}

.InheritanceService__ExpertIcon {
  width: clamp(60px, 53.4269662921px + 1.6853932584vw, 75px);
}
.InheritanceService__ExpertIcon img {
  width: 100%;
  margin: 0;
}

.InheritanceService__ExpertName {
  margin-top: clamp(8px, 7.1235955056px + 0.2247191011vw, 10px);
  font-size: clamp(17px, 15.6853932584px + 0.3370786517vw, 20px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--fontColor);
}

@media only screen and (min-width: 1280px) {
  .InheritanceService__ExpertItemDesc {
    white-space: nowrap; /* Figma: 説明は2行固定（アイテム幅195pxを微妙にはみ出す） */
  }
}
.InheritanceService__ExpertItemDesc {
  margin-top: clamp(6px, 6px + 0vw, 6px);
  font-size: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--fontColor);
}

/* 誘導ボタン */
.InheritanceService__Links {
  margin-top: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}

.InheritanceService__LinksNote {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 2.5;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--fontColor);
  text-decoration: underline;
  text-decoration-color: var(--subColor);
  text-underline-offset: 4px;
}
@media only screen and (max-width: 767px) {
  .InheritanceService__LinksNote {
    line-height: 1.8;
  }
}

.InheritanceService__LinksBtns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(8px, -9.5280898876px + 4.4943820225vw, 48px);
}
@media only screen and (max-width: 767px) {
  .InheritanceService__LinksBtns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    max-width: 340px;
  }
}

.InheritanceService__LinkBtn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px;
  padding: 14px 18px 14px 22px;
  background-color: var(--subColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
  color: var(--whiteColor);
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.4;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media only screen and (max-width: 767px) {
  .InheritanceService__LinkBtn {
    width: 100%;
  }
}
.InheritanceService__LinkBtn:hover {
  opacity: 0.85;
}

.InheritanceService__LinkIcon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 23px;
}
.InheritanceService__LinkIcon img {
  width: 100%;
  margin: 0;
}

/*==================================================
 * inheritanceReason（選ばれる3つの理由）※兄弟AdvisoryReasonと同型
*================================================*/
.InheritanceReason {
  padding-top: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
}

.InheritanceReason__Cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}
@media only screen and (max-width: 767px) {
  .InheritanceReason__Cards {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 40px;
  }
}

.InheritanceReason__Card {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media only screen and (max-width: 767px) {
  .InheritanceReason__Card {
    max-width: 480px;
    margin-inline: auto;
    width: 100%;
  }
}

.InheritanceReason__CardImg {
  position: relative;
  width: 100%;
  min-height: 0; /* flexアイテムのmin-height:autoでaspect-ratioが無効化されるのを防ぐ */
  aspect-ratio: 381/210;
}
.InheritanceReason__CardImg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
}

.InheritanceReason__CardNum {
  position: absolute;
  right: 2%;
  bottom: -34px;
  z-index: 2;
  font-style: italic;
  font-size: clamp(70px, 56.8539325843px + 3.3707865169vw, 100px);
  line-height: 1;
  letter-spacing: 0.05em;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(17%, #01B9FF), color-stop(120%, #22389B));
  background: linear-gradient(180deg, #01B9FF 17%, #22389B 120%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  -webkit-text-fill-color: transparent;
  color: transparent;
  pointer-events: none;
}

.InheritanceReason__CardTxt {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px) clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  background-color: #F5F5F5;
}

.InheritanceReason__CardLabel {
  font-size: clamp(16px, 15.1235955056px + 0.2247191011vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.InheritanceReason__CardLine {
  display: block;
  width: 22px;
  height: 1px;
  margin: 14px 0;
  background-color: var(--subColor);
}

.InheritanceReason__CardTtl {
  font-size: clamp(19px, 17.6853932584px + 0.3370786517vw, 22px);
  font-weight: 500;
  line-height: 1.545;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.InheritanceReason__CardDesc {
  margin-top: 8px;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

/*==================================================
 * inheritanceCase（ご相談事例カルーセル）※CaseCardは_case/_topと構造衝突のためページscope
*================================================*/
.InheritanceCase {
  padding-top: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
}

.InheritanceCase__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(32px, 14.4719101124px + 4.4943820225vw, 72px);
  margin-bottom: clamp(32px, 21.4831460674px + 2.6966292135vw, 56px);
}
@media only screen and (max-width: 767px) {
  .InheritanceCase__Head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
  }
}

.InheritanceCase__Head .InheritanceSecHead {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-bottom: 0;
}

.InheritanceCase__HeadTxt {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  max-width: 527px; /* Figma Frame1411 */
}

.InheritanceCase__HeadTtl {
  font-size: clamp(19px, 16.808988764px + 0.5617977528vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.InheritanceCase__HeadDesc {
  margin-top: 8px;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.InheritanceCase__CarouselWrap {
  position: relative;
}

.InheritanceCase__CarouselWrap .swiper {
  overflow: hidden;
}

.InheritanceCase__Arrow {
  position: absolute;
  top: clamp(120px, 87.1348314607px + 8.4269662921vw, 195px);
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  width: 32px;
  height: 32px;
  padding: 6px; /* 32+12=44 タップ領域確保(検収IF-F2) */
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.InheritanceCase__Arrow img {
  width: 32px;
  height: 32px;
  margin: 0;
}
.InheritanceCase__Arrow:hover {
  opacity: 0.7;
}
.InheritanceCase__Arrow {
  /* display:flex が hidden 属性に勝つため明示（件数が少なくスライドしない時に矢印を隠す） */
}
.InheritanceCase__Arrow[hidden] {
  display: none;
}

.InheritanceCase__Arrow--Prev {
  left: -4px;
}
@media only screen and (min-width: 1280px) {
  .InheritanceCase__Arrow--Prev {
    left: -18px;
  }
}

.InheritanceCase__Arrow--Next {
  right: -4px;
}
@media only screen and (min-width: 1280px) {
  .InheritanceCase__Arrow--Next {
    right: -22px;
  }
}

.InheritanceCase__Btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: clamp(32px, 28.4943820225px + 0.8988764045vw, 40px) auto 0;
  padding: 14px 18px 14px 22px;
  background-color: var(--subColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.InheritanceCase__Btn:hover {
  opacity: 0.85;
}

.InheritanceCase__BtnIcon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 23px;
}
.InheritanceCase__BtnIcon img {
  width: 100%;
  margin: 0;
}

/*==================================================
 * inheritancePrice（料金目安）
*================================================*/
.InheritancePrice {
  /* Figma: 背景帯は前セクションから100px空けて始まり、内側に上下100pxのpadding */
  margin-top: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  padding-block: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
  background-color: #E5E8EE;
}

.InheritancePrice__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(32px, 14.4719101124px + 4.4943820225vw, 72px);
  margin-bottom: clamp(24px, 20.0561797753px + 1.0112359551vw, 33px);
}
@media only screen and (max-width: 767px) {
  .InheritancePrice__Head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
  }
}

.InheritancePrice__Head .InheritanceSecHead {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-bottom: 0;
}

.InheritancePrice__HeadTxt {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  max-width: 883px; /* Figma Frame1411 */
}

.InheritancePrice__HeadTtl {
  font-size: clamp(19px, 16.808988764px + 0.5617977528vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.InheritancePrice__HeadDesc {
  margin-top: 8px;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  color: var(--fontColor);
}
@media only screen and (max-width: 767px) {
  .InheritancePrice__HeadDesc {
    margin-top: 15px;
  }
}

.InheritancePrice__Block {
  margin-bottom: clamp(28px, 22.7415730337px + 1.3483146067vw, 40px);
}

.InheritancePrice__SubTtl {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: clamp(40px, 35.6179775281px + 1.1235955056vw, 50px);
  margin-bottom: clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
  padding-left: 23px;
  font-size: clamp(18px, 16.2471910112px + 0.4494382022vw, 22px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.InheritancePrice__SubTtl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 100%;
  background-color: var(--subColor);
}

/* ご相談内容ボックス */
.InheritancePrice__Info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(20px, 15.6179775281px + 1.1235955056vw, 30px);
  padding: clamp(24px, 20.4943820225px + 0.8988764045vw, 32px);
  background-color: var(--whiteColor);
  border: 1px solid var(--accentColor);
  border-radius: 4px;
}
@media only screen and (max-width: 767px) {
  .InheritancePrice__Info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.InheritancePrice__InfoIcon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(60px, 52.9887640449px + 1.797752809vw, 76px);
}
.InheritancePrice__InfoIcon img {
  width: 100%;
  margin: 0;
}

.InheritancePrice__InfoTtl {
  margin-bottom: 8px;
  font-size: clamp(17px, 15.6853932584px + 0.3370786517vw, 20px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.InheritancePrice__InfoDesc {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.InheritancePrice__InfoDesc--Mt {
  margin-top: 15px;
}

/* 料金CTAボックスは共通化 → .PriceCta（本ファイル末尾付近）。旧 .InheritancePrice__Btns は廃止 */
/* ============================================================
   _case.scss
   ============================================================ */
/*==================================================
 * case（事例紹介一覧 / archive-case.php）
 * AB: 551-11861「06_事例紹介一覧」
 * 構成: PageHeader（下層共通・共通化候補）/ CaseSec（絞り込み+3列カード+ページネーション）
*================================================*/
/* PageHeader はファイル冒頭の「共通パーツ: PageHeader」に一本化済み（2026-09-20）。
   以前ここにあった上書きは全ページで同値だったため削除した。ページ固有の背景テクスチャも
   共通ブロック側にまとめてある。差分を足したくなったら、まず共通側を直せるか検討すること。 */
/* --------------------------------------------------
 * CaseSec（事例一覧本体）Figma 551:11881 / inner 1178（x=51.5〜1229.5）
 * -------------------------------------------------- */
.CaseSec {
  /* ページローカル色（近似グレー・淡ボーダー・タグ色。統一先はQ10-4） */
  --caseBorder: #A8BED4;
  --caseTagColor: #595959; /* 検収F2: #888はAA未達のため濃色化 */
  padding: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px) 0 clamp(60px, 48.606741573px + 2.9213483146vw, 86px);
  background: var(--whiteColor);
}

.CaseSec__Inner {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(20px, 6.4157303371px + 3.4831460674vw, 51px);
}

/* --- 絞り込みブロック（フィルタバー + 見出し）Figma h=136 --- */
.CaseFilterBlock {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
}

.CaseFilter {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: clamp(16px, 8.9887640449px + 1.797752809vw, 32px);
  background: var(--bgColor);
}

.CaseFilter__Label {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 clamp(28px, 15.7303370787px + 3.1460674157vw, 56px);
  background: var(--subColor);
  color: var(--whiteColor);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.CaseFilter__Tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(5px, 0.1797752809px + 1.2359550562vw, 16px);
  padding: clamp(14px, 11.3707865169px + 0.6741573034vw, 20px) 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.CaseFilter__Tab {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: clamp(9px, 8.1235955056px + 0.2247191011vw, 11px) clamp(20px, 15.1797752809px + 1.2359550562vw, 31px);
  border: 1px solid var(--caseBorder);
  border-radius: 100px;
  background: var(--whiteColor);
  color: var(--mainColor);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  -webkit-transition: background 0.3s, color 0.3s;
  transition: background 0.3s, color 0.3s;
}
.CaseFilter__Tab:hover {
  background: var(--subColor);
  color: var(--whiteColor);
  border-color: var(--subColor);
}

.CaseFilter__Tab--Active {
  background: var(--subColor);
  color: var(--whiteColor);
  border-color: var(--subColor);
}

.CaseSec__Heading {
  margin: 0;
  font-size: clamp(16px, 15.1235955056px + 0.2247191011vw, 18px);
  line-height: 0.89;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

/* --- カードグリッド（Figma: 3列 / カード380.5 / gap18 / 見出しブロックから72） --- */
.CaseList {
  width: 100%;
  margin-top: clamp(40px, 25.9775280899px + 3.595505618vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 9.3707865169px + 0.6741573034vw, 18px);
}

/* 共通.CaseCard（_top.scss 単一定義）への一覧ページscope上書き
   → 統合フェーズで .CaseCard 本体に反映（台帳#7/#13）
   Figma 551:11899 実寸: カード380.5×433.44 / 写真210 / 本文223.44 */
.CaseSec .CaseCard__Cat {
  letter-spacing: 0; /* Figma: バッジ文字は字送りなし（w=150に収まる） */
}

.CaseSec .CaseCard__Company {
  line-height: 16px; /* Figma leading-[16px]：メタ行の高さをバッジ24pxに揃える */
}

.CaseSec .CaseCard__Line {
  height: 1px; /* Figma: 1pxストローク（2pxではない） */
}

.CaseSec .CaseCard__Industry {
  line-height: 20px; /* Figma leading-[normal] */
}

.CaseSec .CaseCard__Tags {
  margin-top: -2px; /* Figma: 業種メタ→タグの間隔だけ6（他は8） */
}

.CaseSec .CaseCard__Tags span {
  line-height: 1.5; /* Figma: タグ1行18px */
}

.CaseSec .CaseCard__More {
  padding-top: 4px; /* Figma: テキスト群とVIEW MORE行の間隔=12（gap8+4） */
  line-height: 12px;
}

.CaseSec .CaseCard__MoreIcon {
  width: 14.5px; /* Figma 14.445 */
}

/* 0件時（絞り込み結果なし） */
.CaseSec__Empty {
  padding: clamp(40px, 31.2359550562px + 2.2471910112vw, 60px) 0;
  text-align: center;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

/* --- ページネーション（Figma: gap32 / 矢印9.87×17.2 / 数字32×32・24px） --- */
.CasePager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(20px, 14.7415730337px + 1.3483146067vw, 32px);
  margin-top: clamp(28px, 22.7415730337px + 1.3483146067vw, 40px);
}

.CasePager__Arrow {
  width: clamp(8px, 7.1805617978px + 0.2101123596vw, 9.87px);
  height: clamp(14px, 12.597752809px + 0.3595505618vw, 17.2px);
  background-color: var(--subColor);
  -webkit-mask: url("../img/pagerArrowNext.svg") center/contain no-repeat;
  mask: url("../img/pagerArrowNext.svg") center/contain no-repeat;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.CasePager__Arrow:hover {
  opacity: 0.5;
}

.CasePager__Arrow--Prev {
  -webkit-mask-image: url("../img/pagerArrowPrev.svg");
  mask-image: url("../img/pagerArrowPrev.svg");
}

/* 先頭/末尾ページで送り先が無い状態（Figmaは1ページ目＝Prevが淡色） */
.CasePager__Arrow--Disabled {
  background-color: var(--caseBorder);
  pointer-events: none;
}

.CasePager__Nums {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(10px, 7.3707865169px + 0.6741573034vw, 16px);
}

.CasePager__Num {
  width: clamp(28px, 26.2471910112px + 0.4494382022vw, 32px);
  height: clamp(28px, 26.2471910112px + 0.4494382022vw, 32px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: var(--fontNum);
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--mainColor);
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

.CasePager__Num:hover {
  background: var(--bgColor);
}

.CasePager__Num--Current {
  background: var(--bgColor);
}

/* --------------------------------------------------
 * レスポンシブ（§3変換表）
 * -------------------------------------------------- */
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .CaseList {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .CaseFilter {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 0;
  }
  .CaseFilter__Label {
    padding: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px) 0;
  }
  .CaseFilter__Tabs {
    padding: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .CaseFilter__Tab {
    min-height: auto;
    padding: 8px 16px;
  }
  .CaseList {
    grid-template-columns: 1fr;
  }
  /* 検収6-2: SPタップ領域44px確保 */
  .CasePager__Num {
    min-width: 44px;
    min-height: 44px;
  }
  .CasePager__Arrow {
    padding: 0;
  }
}
/* ============================================================
   _single-case.scss
   ============================================================ */
/*==================================================
 * single-case（事例紹介詳細 / single-case.php）
 * AB: 551-11934「07_事例紹介詳細」
 * 構成: PageHeader（_case.scss のグローバル定義を再利用）
 *       / CaseDetail（記事本体） / CaseOther（関連事例カルーセル）
 * ※ローカルトークン（グレー/罫線/タグ色）は :root 統一まで暫定
*================================================*/
/* PageHeader はファイル冒頭の「共通パーツ: PageHeader」に一本化済み（2026-09-20）。
   以前ここにあった上書きは全ページで同値だったため削除した。ページ固有の背景テクスチャも
   共通ブロック側にまとめてある。差分を足したくなったら、まず共通側を直せるか検討すること。 */
/* --------------------------------------------------
 * CaseDetail（記事本体）
 * -------------------------------------------------- */
.CaseDetail {
  margin-top: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
}

.CaseDetail__Inner {
  width: 100%;
  max-width: 1092px; /* 1044 + 左右padding48 */
  margin: 0 auto;
  padding-inline: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(32px, 28.4943820225px + 0.8988764045vw, 40px);
  /* ローカルトークン（Figma意匠色。統合フェーズで :root 統一） */
  --tableLabelBg: #F1F1F1;
  --tableBorder: #D5D5D5;
  --caseRuleGrey: #A8BED4;
  --caseRuleBlue: #0054A6;
  --caseTagColor: #595959; /* #888はAA未達のため濃色化（archiveと統一） */
}

/* 見出し（バッジ/会社/タグ + タイトル） */
.CaseDetail__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
}

.CaseDetail__HeadTop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(8px, 6.2471910112px + 0.4494382022vw, 12px);
}

.CaseDetail__Badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 4px 12px;
  border-radius: 40px;
  background: var(--subColor);
  color: var(--whiteColor);
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.15;
  white-space: nowrap;
}

.CaseDetail__Company {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.CaseDetail__Tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
}

.CaseDetail__Tag {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--caseTagColor);
}

.CaseDetail__Title {
  font-size: clamp(22px, 17.6179775281px + 1.1235955056vw, 32px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

/* メイン画像 */
.CaseDetail__Image {
  width: 100%;
  aspect-ratio: 1044/501;
  overflow: hidden;
}

.CaseDetail__Image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
}

/* 情報表 */
.CaseDetail__Table {
  width: 100%;
}

.CaseDetail__TableRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.CaseDetail__TableRow + .CaseDetail__TableRow {
  margin-top: -1px; /* 罫線を重ねる */
}

.CaseDetail__TableLabel {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 clamp(110px, 61.3595505618px + 12.4719101124vw, 221px);
          flex: 0 0 clamp(110px, 61.3595505618px + 12.4719101124vw, 221px);
  width: clamp(110px, 61.3595505618px + 12.4719101124vw, 221px);
  min-height: clamp(44px, 43.5617977528px + 0.1123595506vw, 45px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: clamp(10px, 9.5617977528px + 0.1123595506vw, 11px) clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: var(--tableLabelBg);
  border: 1px solid var(--tableBorder);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.CaseDetail__TableValue {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  min-height: clamp(44px, 43.5617977528px + 0.1123595506vw, 45px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: clamp(10px, 10px + 0vw, 10px) clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: var(--whiteColor);
  border: 1px solid var(--tableBorder);
  border-left: none; /* ラベルとの二重罫線回避 */
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

/* 本文ブロック */
.CaseDetail__Body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(28px, 26.2471910112px + 0.4494382022vw, 32px);
}

/* .entry（_main.scss）が持つ汎用の見出し意匠を一旦リセットしてから事例意匠を載せる。
   リセットしないと h1 の青背景・h2 のグレー地・h5 の上下罫線が混ざり、
   さらに `.entry h1 { margin: 8% auto 3% }` の auto マージンが
   flexアイテムの余白を食って見出しが右に寄る。
   `.entry hN` と詳細度が同値なので、後に置くことで後勝ちさせる。 */
.CaseDetail__Entry h1,
.CaseDetail__Entry h2,
.CaseDetail__Entry h3,
.CaseDetail__Entry h4,
.CaseDetail__Entry h5,
.CaseDetail__Entry h6 {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

/* .entry h3::after（8px の縦バー）/ h4::after（15% の下線）も消す。
   h1・h2 の ::before / ::after は事例意匠で上書きするのでここでは触らない。 */
.CaseDetail__Entry h3::after,
.CaseDetail__Entry h4::after,
.CaseDetail__Entry h5::after,
.CaseDetail__Entry h6::after {
  content: none;
}

.CaseDetail__Entry h1,
.CaseDetail__Entry h2 {
  position: relative;
  padding-bottom: clamp(9px, 8.1235955056px + 0.2247191011vw, 11px);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(19px, 17.6853932584px + 0.3370786517vw, 22px);
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.CaseDetail__Entry h1::before,
.CaseDetail__Entry h2::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  height: 1px;
  background: var(--caseRuleGrey);
}

.CaseDetail__Entry h1::after,
.CaseDetail__Entry h2::after {
  content: "";
  position: absolute;
  left: 0;
  /* `.entry h2::after { top: 0 }` が残ると top と height が優先されて
     bottom:0 が効かず、青アクセントが見出しの上端に出る。明示的に解除する。 */
  top: auto;
  bottom: 0;
  width: clamp(90px, 74.2247191011px + 4.0449438202vw, 126px);
  height: 2px;
  background: var(--caseRuleBlue);
}

.CaseDetail__Entry p {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

/* --------------------------------------------------
 * 本文（the_content）
 * マークアップは編集者が自由に組めるため、Figmaサンプルの h2+p だけでなく
 * h1〜h6 / ul / ol / table / blockquote / figure / pre なども流し込まれる前提で組む。
 * 併記した `.entry`（_main.scss）を土台にし、事例意匠に合わせて上書きする。
 * `.entry X` と `.CaseDetail__Entry X` は詳細度が同値のため、
 * import.scss で _main.scss → _style.scss の順に読ませることで後勝ちさせている。
 * -------------------------------------------------- */
.CaseDetail__Entry {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  /* .entry の line-height:1.8 / letter-spacing:0.15em を事例本文の値に戻す */
  line-height: 1.75;
  letter-spacing: 0.05em;
  /* `.entry { margin-inline: auto }` を解除する。
     .CaseDetail__Body は column flex なので、auto の左右マージンが
     クロス軸の余白を吸って本文全体が内容幅まで縮む（短文ほど細くなる）。 */
  width: 100%;
  margin-inline: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 長いURLや英単語で横スクロールを出さない */
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* flexのgapだけで律動を作るため、直下要素の既定マージンは殺す */
.CaseDetail__Entry > * {
  margin-top: 0;
  margin-bottom: 0;
}

.CaseDetail__Entry > *:first-child {
  margin-top: 0;
}

/* --- 見出し ---------------------------------------------------- */
/* h1・h2 は上の `.CaseDetail__Entry h1, h2` グループで意匠済み。
   h3以降は階層が下がるほど装飾を弱め、h2との混在時も序列が読めるようにする。 */
.CaseDetail__Entry h3 {
  position: relative;
  padding-left: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(17px, 15.6853932584px + 0.3370786517vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.CaseDetail__Entry h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  bottom: 0.25em;
  width: 3px;
  background: var(--caseRuleBlue);
}

.CaseDetail__Entry h4 {
  padding-bottom: clamp(6px, 5.1235955056px + 0.2247191011vw, 8px);
  border-bottom: 1px solid var(--caseRuleGrey);
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(16px, 15.1235955056px + 0.2247191011vw, 18px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.CaseDetail__Entry h5 {
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(15px, 14.1235955056px + 0.2247191011vw, 17px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.CaseDetail__Entry h6 {
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--caseRuleBlue);
}

/* 見出しが続く場合は塊の切れ目を作る（gap + margin） */
.CaseDetail__Entry > h1:not(:first-child),
.CaseDetail__Entry > h2:not(:first-child),
.CaseDetail__Entry > h3:not(:first-child),
.CaseDetail__Entry > h4:not(:first-child),
.CaseDetail__Entry > h5:not(:first-child),
.CaseDetail__Entry > h6:not(:first-child) {
  margin-top: clamp(12px, 12px + 0vw, 12px);
}

/* --- 本文・インライン ------------------------------------------- */
.CaseDetail__Entry p {
  margin: 0;
}

.CaseDetail__Entry a {
  display: inline;
  color: var(--caseRuleBlue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.CaseDetail__Entry a:hover {
  opacity: 0.7;
}

.CaseDetail__Entry strong,
.CaseDetail__Entry b {
  font-weight: 600;
  /* .entry の茶系ハイライトは事例の配色に合わないため解除 */
  background: none;
}

.CaseDetail__Entry em {
  font-style: italic;
}

.CaseDetail__Entry small {
  font-size: clamp(12px, 11.5617977528px + 0.1123595506vw, 13px);
  color: var(--caseTagColor);
}

.CaseDetail__Entry code {
  padding: 0.1em 0.4em;
  background: var(--tableLabelBg);
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.92em;
}

.CaseDetail__Entry pre {
  padding: clamp(14px, 12.2471910112px + 0.4494382022vw, 18px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: var(--tableLabelBg);
  border-radius: 4px;
  overflow-x: auto;
  font-family: monospace;
  font-size: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  line-height: 1.7;
}

.CaseDetail__Entry pre code {
  padding: 0;
  background: none;
}

.CaseDetail__Entry hr {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--caseRuleGrey);
}

/* --- リスト ---------------------------------------------------- */
/* .entry の ul はグレー地+FontAwesomeのマーカー。本テーマはFont Awesomeを
   読み込んでいないため豆腐文字になる。事例意匠のマーカーで置き換える。 */
.CaseDetail__Entry ul,
.CaseDetail__Entry ol {
  margin: 0;
  padding: 0;
  background: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(6px, 5.1235955056px + 0.2247191011vw, 8px);
}

.CaseDetail__Entry li {
  position: relative;
  margin: 0;
  padding-left: 1.4em;
  list-style: none;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.75;
  letter-spacing: 0.05em;
  font-weight: 400;
  color: var(--mainColor);
}

.CaseDetail__Entry ul > li::before {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--caseRuleBlue);
  font-family: inherit;
}

.CaseDetail__Entry ol {
  counter-reset: caseOl;
}

.CaseDetail__Entry ol > li {
  counter-increment: caseOl;
}

.CaseDetail__Entry ol > li::before {
  content: counter(caseOl) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--fontJp);
  font-weight: 600;
  color: var(--caseRuleBlue);
}

/* 入れ子リスト */
.CaseDetail__Entry li > ul,
.CaseDetail__Entry li > ol {
  margin-top: clamp(6px, 5.1235955056px + 0.2247191011vw, 8px);
}

.CaseDetail__Entry li > ul > li::before {
  width: 5px;
  height: 5px;
  border-radius: 0;
  background: var(--caseRuleGrey);
}

/* 定義リスト */
.CaseDetail__Entry dl {
  margin: 0;
}

.CaseDetail__Entry dt {
  font-weight: 600;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  color: var(--mainColor);
}

.CaseDetail__Entry dd {
  margin: 0 0 clamp(8px, 7.1235955056px + 0.2247191011vw, 10px);
  padding-left: 1em;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  color: var(--mainColor);
}

/* --- 引用 ------------------------------------------------------ */
.CaseDetail__Entry blockquote {
  margin: 0;
  padding: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px) clamp(18px, 15.3707865169px + 0.6741573034vw, 24px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: var(--tableLabelBg);
  border: 0;
  border-left: 3px solid var(--caseRuleBlue);
  border-radius: 0 4px 4px 0;
  font-style: normal;
  color: var(--mainColor);
}

.CaseDetail__Entry blockquote p {
  font-size: clamp(13px, 12.1235955056px + 0.2247191011vw, 15px);
  line-height: 1.8;
  color: var(--mainColor);
}

.CaseDetail__Entry blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-size: clamp(12px, 11.5617977528px + 0.1123595506vw, 13px);
  font-style: normal;
  color: var(--caseTagColor);
}

/* --- 表 -------------------------------------------------------- */
/* .entry の table は SP で width:500px 固定。事例本文では横溢れの原因になるので上書き。 */
.CaseDetail__Entry table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: clamp(13px, 12.1235955056px + 0.2247191011vw, 15px);
}

.CaseDetail__Entry table th,
.CaseDetail__Entry table td {
  padding: clamp(10px, 8.2471910112px + 0.4494382022vw, 14px) clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
  border: 1px solid var(--tableBorder);
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-align: left;
  vertical-align: top;
  color: var(--mainColor);
  background: var(--whiteColor);
}

.CaseDetail__Entry table th {
  background: var(--tableLabelBg);
  font-weight: 600;
  white-space: nowrap;
}

.CaseDetail__Entry table tr,
.CaseDetail__Entry table tr:first-child {
  border: 0;
}

.CaseDetail__Entry table tr:nth-child(2n) td {
  background: var(--whiteColor);
  color: var(--mainColor);
}

/* --- 画像・図版 ------------------------------------------------- */
.CaseDetail__Entry img {
  width: 100%;
  height: auto;
  margin: 0;
}

.CaseDetail__Entry figure {
  margin: 0;
}

.CaseDetail__Entry figcaption {
  margin-top: clamp(6px, 5.1235955056px + 0.2247191011vw, 8px);
  font-size: clamp(12px, 11.5617977528px + 0.1123595506vw, 13px);
  line-height: 1.6;
  color: var(--caseTagColor);
  text-align: left;
}

/* 幅を指定した画像（WPのサイズ指定）は原寸を尊重しつつはみ出させない */
.CaseDetail__Entry img[width] {
  width: auto;
  max-width: 100%;
}

/* --- WordPressブロック ----------------------------------------- */
.CaseDetail__Entry .wp-block-image,
.CaseDetail__Entry .wp-block-quote,
.CaseDetail__Entry .wp-block-table,
.CaseDetail__Entry .wp-block-embed {
  margin: 0;
}

.CaseDetail__Entry .wp-block-table {
  overflow-x: auto;
}

.CaseDetail__Entry .wp-block-embed__wrapper,
.CaseDetail__Entry .wp-block-embed iframe,
.CaseDetail__Entry iframe {
  max-width: 100%;
}

.CaseDetail__Entry .aligncenter {
  margin-inline: auto;
  text-align: center;
}

.CaseDetail__Entry .alignright {
  margin-left: auto;
}

.CaseDetail__Entry .alignleft {
  margin-right: auto;
}

.CaseDetail__Entry .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media only screen and (max-width: 767px) {
  /* 素の<table>が列数過多のとき、ページ全体に横スクロールを出さず表内で送る */
  .CaseDetail__Entry > table {
    display: block;
    overflow-x: auto;
  }
  .CaseDetail__Entry table th {
    white-space: normal;
  }
  /* .entry table th/td のSP指定（padding 0.5em / border-bottom）を打ち消す */
  .CaseDetail__Entry table th,
  .CaseDetail__Entry table td {
    padding: clamp(10px, 8.2471910112px + 0.4494382022vw, 14px) clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
    border: 1px solid var(--tableBorder);
  }
  .CaseDetail__Entry table tr {
    border: 0;
  }
}
/* 担当税理士コメント */
.CaseDetail__Comment {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(20px, 12.5505617978px + 1.9101123596vw, 37px);
  padding: clamp(20px, 14.7415730337px + 1.3483146067vw, 32px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: var(--whiteColor);
  border: 1px solid var(--accentColor);
  border-radius: 4px;
}

.CaseDetail__CommentProfile {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
}

.CaseDetail__CommentAvatar {
  width: clamp(84px, 70.8539325843px + 3.3707865169vw, 114px);
  height: clamp(84px, 70.8539325843px + 3.3707865169vw, 114px);
  border-radius: 50%;
  overflow: hidden;
}

.CaseDetail__CommentAvatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
  margin: 0;
}

.CaseDetail__CommentName {
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(16px, 15.1235955056px + 0.2247191011vw, 18px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
  text-align: center;
}

.CaseDetail__CommentBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}

.CaseDetail__CommentTitle {
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(19px, 17.6853932584px + 0.3370786517vw, 22px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.CaseDetail__CommentText {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

@media only screen and (max-width: 767px) {
  .CaseDetail__Comment {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
/* --------------------------------------------------
 * CaseOther（Other case: 関連事例カルーセル）
 * -------------------------------------------------- */
.CaseOther {
  margin-top: clamp(64px, 48.2247191011px + 4.0449438202vw, 100px);
  margin-bottom: clamp(56px, 41.1011235955px + 3.8202247191vw, 90px); /* FotterCtaとの余白を持たせる（case-single #2） */
}

.CaseOther__Inner {
  width: 100%;
  max-width: 1209px; /* 1161 + 左右padding48 */
  margin: 0 auto;
  padding-inline: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  --caseTagColor: #595959;
}

.CaseOther__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(8px, 6.2471910112px + 0.4494382022vw, 12px);
}

.CaseOther__En {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  font-family: var(--fontEn);
  font-size: clamp(40px, 32.9887640449px + 1.797752809vw, 56px);
  line-height: 1;
  letter-spacing: 0.05em;
  background: linear-gradient(156deg, var(--accentColor) 1%, var(--subColor) 97%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  color: transparent;
}

.CaseOther__Sub {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

/* スライダー */
.CaseOther__Slider {
  position: relative;
  margin-top: clamp(32px, 21.4831460674px + 2.6966292135vw, 56px);
}
@media only screen and (max-width: 767px) {
  .CaseOther__Slider {
    width: calc(100% + 20px);
  }
}

.CaseOther__Slider .swiper {
  overflow: hidden;
}

/* Swiper の slide 高(100%)を解除してスライド間で高さを揃える（原稿量が違っても揃う） */
.CaseOther__Slider .swiper-slide {
  height: auto;
}

.CaseOther__Card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

.CaseOther__CardImage {
  width: 100%;
  aspect-ratio: 381/210;
  overflow: hidden;
}

.CaseOther__CardImage img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
}

.CaseOther__CardBody {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(10px, 9.1235955056px + 0.2247191011vw, 12px);
  padding: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  background: var(--bgColor);
}

.CaseOther__CardMain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(6px, 5.1235955056px + 0.2247191011vw, 8px);
}

.CaseOther__CardHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(8px, 6.2471910112px + 0.4494382022vw, 12px);
}

.CaseOther__CardBadge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 4px 12px;
  border-radius: 40px;
  background: var(--subColor);
  color: var(--whiteColor);
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.15;
  white-space: nowrap;
}

.CaseOther__CardCompany {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.CaseOther__CardTitle {
  font-size: clamp(18px, 17.1235955056px + 0.2247191011vw, 20px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.CaseOther__CardDivider {
  width: 22px;
  height: 1px;
  background: var(--mainColor);
}

.CaseOther__CardMeta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
}

.CaseOther__CardMetaText {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.CaseOther__CardTags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
}

.CaseOther__CardTag {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--caseTagColor);
}

.CaseOther__CardMore {
  margin-top: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 6px;
}

.CaseOther__CardMoreText {
  font-family: var(--fontEn);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.CaseOther__CardMoreIcon {
  width: 14.445px;
  height: 14.445px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.CaseOther__CardMoreIcon img {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* 前後矢印（カード全高センター。jsCasePrev/jsCaseNext = main.js初期化） */
/* タップ域44px確保（検収6-2）: ボタン=透明44×44ヒット域／アイコンはimgでfluid(28,32) */
.CaseOther__Arrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 5;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.CaseOther__Arrow[hidden] {
  /* display:flex が hidden 属性に勝つため明示（件数が少なくスライドしない時に矢印を隠す） */
  display: none;
}

.CaseOther__Arrow img {
  width: clamp(28px, 26.2471910112px + 0.4494382022vw, 32px);
  height: clamp(28px, 26.2471910112px + 0.4494382022vw, 32px);
  margin: 0;
}

/* アイコン中心を旧位置(スライダー端+8px内側)に維持（ボタン44化に合わせcalc） */
.CaseOther__Arrow--Prev {
  left: -14px;
}
@media only screen and (max-width: 767px) {
  .CaseOther__Arrow--Prev {
    left: -22px;
  }
}

.CaseOther__Arrow--Next {
  right: -14px;
}
@media only screen and (max-width: 767px) {
  .CaseOther__Arrow--Next {
    right: 28px;
  }
}

/* 一覧ボタン */
.CaseOther__Btn {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin: clamp(32px, 28.4943820225px + 0.8988764045vw, 40px) auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px;
  padding: 14px 18px 14px 22px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: var(--subColor);
  color: var(--whiteColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  letter-spacing: 0.05em;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.CaseOther__Btn:hover {
  opacity: 0.8;
}

.CaseOther__BtnIcon {
  width: 23px;
  height: 23px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.CaseOther__BtnIcon img {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* ============================================================
   _staff.scss
   ============================================================ */
/*==================================================
 * staff（スタッフ紹介一覧 / page-staff.php）
 * AB: 551-15630「08_スタッフ紹介一覧」1280×7048
 * 構成: PageHeader（下層共通見出し帯）/ StaffSec（リード + スタッフカード5枚 + スタッフ体制）
*================================================*/
/* PageHeader はファイル冒頭の「共通パーツ: PageHeader」に一本化済み（2026-09-20）。
   以前ここにあった上書きは全ページで同値だったため削除した。ページ固有の背景テクスチャも
   共通ブロック側にまとめてある。差分を足したくなったら、まず共通側を直せるか検討すること。 */
/*==================================================
 * StaffSec
 * Figma: StaffSec y453 h5407（リード134 + 51 + カード4919 + 114 + 体制箱189）
*================================================*/
.StaffSec {
  padding-top: clamp(45px, 38.4269662921px + 1.6853932584vw, 60px);
  padding-bottom: clamp(64px, 48.2247191011px + 4.0449438202vw, 100px);
}

.StaffSec__Inner {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 2.4719101124px + 4.4943820225vw, 60px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* --------------------------------------------------
 * リード文（中央・下線）Figma 551:15652
 * -------------------------------------------------- */
.StaffSec__Lead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* Figma gap14 は「高さ39px固定のテキストボックス」基準。leading46 実装との差分7pxを引いた実効値 */
  gap: 7px;
  padding-bottom: clamp(22px, 11.9213483146px + 2.5842696629vw, 45px);
  border-bottom: 1px solid #D9D9D9; /* Figma Vector25: 0.5px の極薄グレー罫（:root未定義のローカル値） */
  text-align: center;
}

.StaffSec__LeadTtl {
  font-weight: 500;
  font-size: clamp(22px, 17.6179775281px + 1.1235955056vw, 32px);
  line-height: 1.9167; /* Figma 46 / 24 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}
@media only screen and (max-width: 767px) {
  .StaffSec__LeadTtl {
    line-height: 1.4;
  }
}

.StaffSec__LeadSub {
  font-weight: 500;
  line-height: 2.0625; /* Figma 33 / 16 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

/* --------------------------------------------------
 * カードリスト Figma 551:15657（カードは密着縦積み・白/#F5F5F5 交互）
 * -------------------------------------------------- */
.StaffSec__List {
  margin-top: clamp(32px, 23.6741573034px + 2.1348314607vw, 51px);
}

.StaffCard {
  background: var(--whiteColor);
  border-radius: 4px;
  /* TOPのスタッフスライダーから #staff-{ID} で飛んできたとき固定ヘッダーに隠れないように */
  scroll-margin-top: calc(var(--headerH) + clamp(16px, 8.9887640449px + 1.797752809vw, 32px));
  /* Figma: 上下49 / 左45 / 右36（右カラム実寸677pxを確保するための非対称パディング） */
  padding: clamp(32px, 24.5505617978px + 1.9101123596vw, 49px) clamp(16px, 7.2359550562px + 2.2471910112vw, 36px) clamp(32px, 24.5505617978px + 1.9101123596vw, 49px) clamp(20px, 9.0449438202px + 2.808988764vw, 45px);
}

.StaffCard:nth-child(even) {
  background: #F5F5F5; /* 近似グレー・Q10-4で統一先確定後に差替 */
}

.StaffCard__Inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
}
@media only screen and (max-width: 767px) {
  .StaffCard__Inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.StaffCard__Photo {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(240px, 186.5393258427px + 13.7078651685vw, 362px);
  aspect-ratio: 362/492;
}
.StaffCard__Photo img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (max-width: 767px) {
  .StaffCard__Photo {
    width: 100%;
    max-width: clamp(280px, 244.0674157303px + 9.2134831461vw, 362px);
    margin-inline: auto;
  }
}

.StaffCard__Body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(32px, 23.6741573034px + 2.1348314607vw, 51px);
}

/* 氏名ブロック */
.StaffCard__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(14px, 11.3707865169px + 0.6741573034vw, 20px);
}

.StaffCard__NameBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(10px, 8.2471910112px + 0.4494382022vw, 14px);
}

.StaffCard__Role {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  font-weight: 500;
  line-height: 0.857; /* Figma 12 / 14 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.StaffCard__Name {
  font-weight: 600; /* Figma: YuMincho Demibold */
  font-size: clamp(24px, 22.2471910112px + 0.4494382022vw, 28px);
  line-height: 0.893; /* Figma 25 / 28 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.StaffCard__Divider {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--subColor);
}

/* 担当領域・経歴 */
.StaffCard__Info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
}

.StaffCard__InfoRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}

.StaffCard__InfoLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  font-weight: 600;
  line-height: 1.25; /* Figma 20 / 16 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.StaffCard__Dot {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--subColor);
}

.StaffCard__Tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
}

.StaffCard__Tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2px 8px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6667; /* Figma 20 / 12（バッジ高24px） */
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  background: var(--subColor);
}

.StaffCard__Career {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  font-weight: 500;
  line-height: 1.3929; /* Figma 19.5 / 14 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.StaffCard__Sns {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  font-weight: 500;
  line-height: 1.3929;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.StaffCard__SnsLink {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  word-break: break-all;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.StaffCard__SnsLink:hover {
  opacity: 0.7;
}

/* My style / Vision ブロック */
.StaffCard__Detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(24px, 20.4943820225px + 0.8988764045vw, 32px);
}

.StaffCard__Marker {
  position: relative;
  display: block;
  margin-bottom: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  padding-bottom: 10px; /* Figma: lh24 + pb10 + 罫1 = 35px */
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.7143; /* Figma 24 / 14 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
  border-bottom: 1px solid #D9D9D9; /* Figma Group2774 薄罫（:root未定義のローカル値） */
}

.StaffCard__Marker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: clamp(60px, 50.3595505618px + 2.4719101124vw, 82px); /* Figma: 677px幅に対して82px */
  height: 2px;
  background: var(--subColor);
}

.StaffCard__MarkerEn {
  font-family: var(--fontJp); /* Figma: My style/Vision はゴシック太字（Cormorantではない） */
  font-weight: 600;
}

.StaffCard__MarkerJp {
  font-weight: 500;
}

.StaffCard__BlockTtl {
  margin-bottom: clamp(10px, 9.1235955056px + 0.2247191011vw, 12px);
  font-weight: 500;
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  line-height: 1.4583; /* Figma 35 / 24 */
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.StaffCard__BlockText {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  font-weight: 500;
  line-height: 1.75; /* Figma 28 / 16 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

/* --------------------------------------------------
 * スタッフ体制（末尾ボックス）Figma 551:15888
 * -------------------------------------------------- */
.StaffSec__Outro {
  position: relative;
  margin-top: clamp(72px, 53.595505618px + 4.7191011236vw, 114px); /* Figma: カード列下端 → 箱上端 */
  padding: clamp(28px, 26.6853932584px + 0.3370786517vw, 31px) clamp(24px, 9.9775280899px + 3.595505618vw, 56px) clamp(28px, 26.6853932584px + 0.3370786517vw, 31px) clamp(24px, 14.3595505618px + 2.4719101124vw, 46px);
  background: var(--whiteColor);
  border-radius: clamp(16px, 12.4943820225px + 0.8988764045vw, 24px);
  -webkit-box-shadow: inset 0 0 6px rgba(48, 51, 64, 0.15);
          box-shadow: inset 0 0 6px rgba(48, 51, 64, 0.15);
  text-align: center;
}

.StaffSec__OutroQuote {
  position: absolute;
  top: -14px;
  right: clamp(24px, -7.5505617978px + 8.0898876404vw, 96px);
  width: clamp(24px, 4.2808988764px + 5.0561797753vw, 69px);
  line-height: 0;
}
.StaffSec__OutroQuote svg {
  width: 100%;
  height: auto;
}

.StaffSec__OutroTtl {
  font-weight: 600; /* Figma: YuMincho Demibold */
  font-size: clamp(18px, 17.1235955056px + 0.2247191011vw, 20px);
  line-height: 1.65; /* Figma 33 / 20 */
  letter-spacing: 0.05em;
  color: var(--subColor);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.StaffSec__OutroText {
  margin-top: clamp(16px, 12.4943820225px + 0.8988764045vw, 24px);
  font-weight: 500;
  font-size: clamp(17px, 14.808988764px + 0.5617977528vw, 22px);
  line-height: 1.5909; /* Figma 35 / 22 */
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

/* ============================================================
   _recruit.scss
   ============================================================ */
/*==================================================
 * recruit
*================================================*/
/* ページ内リンク（ヘッダーのSPメニュー /recruit/#message 等・募集要項ボタン #requirements）の
   着地先が固定ヘッダーに隠れないように */
.RecruitMessage,
.RecruitNumber,
.RecruitBenefits,
.RecruitWork,
.RecruitPerson,
.RecruitInfo,
.RecruitFlow,
.RecruitQa {
  scroll-margin-top: var(--headerH);
}

/*==================================================
 * FV（RecruitHero）§4.5 浮遊パララックスコラージュ
*================================================*/
.RecruitHero {
  position: relative;
  height: clamp(600px, 513.6741573034px + 22.1348314607vw, 797px);
  background: url(../img/bgNoise.png) left top/120px 120px repeat, var(--accentColor);
  overflow: hidden;
}

/* 波打ち線レイヤー（Figma 551:12053 実寸・実transform値） */
.RecruitHero__Wave {
  position: absolute;
  left: -568px;
  top: -757px;
  width: 2676px;
  height: 2028px;
  opacity: 0.5;
  pointer-events: none;
}
.RecruitHero__Wave .RecruitHero__WaveItem {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.RecruitHero__Wave .RecruitHero__WaveBody {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  overflow: hidden;
}
.RecruitHero__Wave .RecruitHero__WaveBody img {
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
}

.RecruitHero__WaveItem--R1 {
  left: 226.1px;
  top: 283.35px;
  width: 2229.084px;
  height: 1744.982px;
}
.RecruitHero__WaveItem--R1 .RecruitHero__WaveBody {
  width: 3222.314px;
  height: 809.947px;
  -webkit-transform: rotate(147.79deg) skewX(-2.88deg) scale(0.71, -0.75);
          transform: rotate(147.79deg) skewX(-2.88deg) scale(0.71, -0.75);
}

.RecruitHero__WaveItem--R2 {
  left: 118.2px;
  top: 630.7px;
  width: 1950.398px;
  height: 1277.299px;
}
.RecruitHero__WaveItem--R2 .RecruitHero__WaveBody {
  width: 3051.186px;
  height: 330.434px;
  -webkit-transform: rotate(149.56deg) skewX(1.03deg) scale(0.69, -0.73);
          transform: rotate(149.56deg) skewX(1.03deg) scale(0.69, -0.73);
}

.RecruitHero__WaveItem--V1 {
  left: 152.3px;
  top: 164.31px;
  width: 2289.135px;
  height: 1664.874px;
  mix-blend-mode: soft-light;
}
.RecruitHero__WaveItem--V1 .RecruitHero__WaveBody {
  width: 3428.401px;
  height: 633.192px;
  -webkit-transform: rotate(148.47deg) skewX(-1.4deg) scale(0.7, -0.74);
          transform: rotate(148.47deg) skewX(-1.4deg) scale(0.7, -0.74);
}

.RecruitHero__WaveItem--V2 {
  left: 0;
  top: 276.21px;
  width: 2267.192px;
  height: 1582.247px;
  mix-blend-mode: soft-light;
}
.RecruitHero__WaveItem--V2 .RecruitHero__WaveBody {
  width: 3457.281px;
  height: 526.547px;
  -webkit-transform: rotate(148.88deg) skewX(-0.49deg) scale(0.7, -0.73);
          transform: rotate(148.88deg) skewX(-0.49deg) scale(0.7, -0.73);
}

.RecruitHero__WaveItem--V3 {
  left: 72.64px;
  top: 0;
  width: 2603.844px;
  height: 1879.817px;
  mix-blend-mode: soft-light;
}
.RecruitHero__WaveItem--V3 .RecruitHero__WaveBody {
  width: 3912.691px;
  height: 698.994px;
  -webkit-transform: rotate(148.54deg) skewX(-1.24deg) scale(0.7, -0.74);
          transform: rotate(148.54deg) skewX(-1.24deg) scale(0.7, -0.74);
}

.RecruitHero__WaveItem--V4 {
  left: 394.61px;
  top: 613.57px;
  width: 1677.89px;
  height: 1150.993px;
  mix-blend-mode: soft-light;
}
.RecruitHero__WaveItem--V4 .RecruitHero__WaveBody {
  width: 2577.055px;
  height: 360.067px;
  -webkit-transform: rotate(149.06deg) skewX(-0.09deg) scale(0.7, -0.73);
          transform: rotate(149.06deg) skewX(-0.09deg) scale(0.7, -0.73);
}

/* 背景大文字（無限マーキー） */
.RecruitHero__BgTextWrap {
  position: absolute;
  left: 0;
  top: 66.5%;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
@media only screen and (max-width: 767px) {
  .RecruitHero__BgTextWrap {
    top: 78.5%;
  }
}

/* キーフレームは下部の recruitSlideMarquee（0 → -50%）を共用 */
.RecruitHero__BgTextTrack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: recruitSlideMarquee 60s linear infinite;
          animation: recruitSlideMarquee 60s linear infinite;
}

.RecruitHero__BgText {
  margin: 0;
  font-size: clamp(80px, 27.4157303371px + 13.4831460674vw, 200px);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: normal;
  color: var(--whiteColor);
  opacity: 0.3;
  white-space: nowrap;
  text-shadow: 2px 2px 20px rgba(8, 15, 44, 0.05);
  pointer-events: none;
}

/* 浮遊写真コラージュ */
.RecruitHero__Photos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 写真の大きさは「ヒーロー幅に対する%」。SPは幅が1/3になるぶん写真も1/3になり、
     PCのコラージュに比べて小さく散ってしまうため、配置はPCのまま一回り大きくする。
     右端ぞろえの3枚（P02/P05/P09）はSPだけ right 基準にして、内側（左）へ伸ばす。 */
  --rhScale: 1;
}
@media only screen and (max-width: 767px) {
  .RecruitHero__Photos {
    --rhScale: 1.55;
  }
}
.RecruitHero__Photos {
  /* 430pxを超えると写真だけが先に大きくなってコピーに掛かるため、タブレット帯は控えめに */
}
@media only screen and (min-width: 431px) and (max-width: 767px) {
  .RecruitHero__Photos {
    --rhScale: 1.3;
  }
}

.RecruitHero__Photo {
  position: absolute;
  -webkit-animation: recruitHeroFloat 6s ease-in-out infinite;
          animation: recruitHeroFloat 6s ease-in-out infinite;
}
.RecruitHero__Photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
}

.RecruitHero__Photo--Blur {
  -webkit-filter: blur(3px);
          filter: blur(3px);
  opacity: 0.8;
}

@-webkit-keyframes recruitHeroFloat {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
  }
}

@keyframes recruitHeroFloat {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
  }
}
/* 写真はランダムな順でフェードイン（2026-09-29 本人指示）
   親 .RecruitHero__Photo は浮遊アニメ(transform)とぼかし(opacity .8)を持つため、中の img だけを動かす。
   --rhDelay は main.js が写真ごとにランダムで入れる。JSが動かなくても 3s 後には全部出る。 */
.RecruitHero__Photo img {
  -webkit-animation: recruitHeroPhotoIn 1s ease var(--rhDelay, 3s) both;
          animation: recruitHeroPhotoIn 1s ease var(--rhDelay, 3s) both;
}

@-webkit-keyframes recruitHeroPhotoIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes recruitHeroPhotoIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .RecruitHero__Photo img {
    -webkit-animation: none;
            animation: none;
  }
}
/* 位置・サイズ（Figma実寸→%換算 / 基準1280×797）。幅は --rhScale 倍（SPのみ1.55） */
.RecruitHero__Photo--P01 {
  left: 8.44%;
  top: 0;
  width: calc(21.88% * var(--rhScale));
  aspect-ratio: 280/162;
}

.RecruitHero__Photo--P02 {
  left: 70.23%;
  top: 0;
  width: calc(25.63% * var(--rhScale));
  aspect-ratio: 328/164;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
@media only screen and (max-width: 767px) {
  .RecruitHero__Photo--P02 {
    left: auto;
    right: 4.14%;
  }
}
.RecruitHero__Photo--P02 { /* PCの右端位置（70.23+25.63=95.86%）を保つ */ }

.RecruitHero__Photo--P03 {
  left: 63.13%;
  top: 7.65%;
  width: calc(8.13% * var(--rhScale));
  aspect-ratio: 104/139;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.RecruitHero__Photo--P04 {
  left: 4.92%;
  top: 13.43%;
  width: calc(7.73% * var(--rhScale));
  aspect-ratio: 99/76;
  -webkit-animation-duration: 7.5s;
          animation-duration: 7.5s;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.RecruitHero__Photo--P05 {
  left: 83.13%;
  top: 26.6%;
  width: calc(16.88% * var(--rhScale));
  aspect-ratio: 216/264;
  -webkit-animation-duration: 6.5s;
          animation-duration: 6.5s;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  /* PCはコピーの右横。SPは横に余地が無いのでコピーの下へ回す（検収F1の踏襲） */
}
@media only screen and (max-width: 767px) {
  .RecruitHero__Photo--P05 {
    left: auto;
    right: 0;
    top: 45%;
  }
}
@media only screen and (min-width: 431px) and (max-width: 767px) {
  .RecruitHero__Photo--P05 {
    top: 50%;
  }
}

.RecruitHero__Photo--P06 {
  left: 0;
  top: 28.36%;
  width: calc(17.03% * var(--rhScale));
  aspect-ratio: 218/220;
  -webkit-animation-duration: 7.2s;
          animation-duration: 7.2s;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
@media only screen and (max-width: 767px) {
  .RecruitHero__Photo--P06 {
    top: 45%;
  }
}
@media only screen and (min-width: 431px) and (max-width: 767px) {
  .RecruitHero__Photo--P06 {
    top: 50%;
  }
}

.RecruitHero__Photo--P07 {
  left: 64.06%;
  top: 59.35%;
  width: calc(8.67% * var(--rhScale));
  aspect-ratio: 111/149;
  -webkit-animation-duration: 8.4s;
          animation-duration: 8.4s;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

.RecruitHero__Photo--P08 {
  left: 3.28%;
  top: 61.23%;
  width: calc(25.63% * var(--rhScale));
  aspect-ratio: 328/233;
  -webkit-animation-duration: 6.8s;
          animation-duration: 6.8s;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

.RecruitHero__Photo--P09 {
  left: 70.23%;
  top: 65.75%;
  width: calc(29.77% * var(--rhScale));
  aspect-ratio: 381/273;
  -webkit-animation-duration: 7.8s;
          animation-duration: 7.8s;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
@media only screen and (max-width: 767px) {
  .RecruitHero__Photo--P09 {
    left: auto;
    right: 0;
  }
}
.RecruitHero__Photo--P09 { /* PCの右端位置（70.23+29.77=100%）を保つ */ }

.RecruitHero__Photo--P10 {
  left: 27.27%;
  top: 73.78%;
  width: calc(7.34% * var(--rhScale));
  aspect-ratio: 94/94;
  -webkit-animation-duration: 6.2s;
          animation-duration: 6.2s;
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}

/* 中央コピー */
.RecruitHero__Copy {
  position: absolute;
  left: 0;
  right: 0;
  top: 27.7%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(14px, 10.0561797753px + 1.0112359551vw, 23px);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  color: var(--whiteColor);
}

.RecruitHero__Label {
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--whiteColor);
}

.RecruitHero__Title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: var(--whiteColor);
  font-weight: 500;
}

.RecruitHero__TitleSub {
  font-size: clamp(16px, 8.9887640449px + 1.797752809vw, 32px);
  letter-spacing: 0.1em;
  line-height: normal;
}

.RecruitHero__TitleMain {
  font-size: clamp(40px, 12.8314606742px + 6.9662921348vw, 102px);
  letter-spacing: 0.1em;
  line-height: 1.245;
  -webkit-transform: skewX(-17deg) scaleY(0.96);
          transform: skewX(-17deg) scaleY(0.96);
}

/* 【2026-09-29 本人指示】SPのFVは Figma「SP_FV」(721:5354・390×523) に合わせる
   ・390基準の比率をそのまま保つため、高さ・文字は vw、写真の位置・幅は %（ヒーロー基準）で指定
   ・PC用の --rhScale や P02/P05/P06/P09 の SP個別位置は、ここで Figma の実寸に置き換える
   ・波は PC と同じ 2676×2028 のレイヤーを縮小(0.3138)＋回転(-9.84deg)したもの。
     transform はゆらゆら(waveSway)が使うので、独立プロパティ rotate / scale で重ねる */
@media only screen and (max-width: 767px) {
  .RecruitHero {
    height: 134.1vw; /* 523 / 390 */
  }
  .RecruitHero__Wave {
    left: calc(60.28% - 1338px); /* 中心 x235.1 / 390 */
    top: calc(38.3% - 1014px); /* 中心 y200.3 / 523 */
    rotate: -9.84deg;
    scale: 0.3138;
  }
  .RecruitHero__BgTextWrap {
    top: 82.6%;
  }
  .RecruitHero__BgText {
    font-size: 25.04vw; /* 97.64px */
  }
  .RecruitHero__Photos {
    --rhScale: 1;
  }
  .RecruitHero__Photo--Blur {
    -webkit-filter: blur(1.34px);
            filter: blur(1.34px);
  }
  .RecruitHero__Photo--P01 {
    left: 7.18%;
    top: 0.28%;
    right: auto;
    width: 37.18%;
    aspect-ratio: 145/83.893;
  }
  .RecruitHero__Photo--P02 {
    left: 63.08%;
    top: 6.5%;
    right: auto;
    width: 33.33%;
    aspect-ratio: 130/73;
  }
  .RecruitHero__Photo--P03 {
    left: 54.36%;
    top: 15.49%;
    right: auto;
    width: 11.91%;
    aspect-ratio: 46.454/62.088;
  }
  .RecruitHero__Photo--P04 {
    left: 1.03%;
    top: 15.49%;
    right: auto;
    width: 11.34%;
    aspect-ratio: 44.221/33.947;
  }
  .RecruitHero__Photo--P05 {
    left: 77.95%;
    top: 36.71%;
    right: auto;
    width: 22.31%;
    aspect-ratio: 87/107;
  }
  .RecruitHero__Photo--P06 {
    left: 0;
    top: 28.68%;
    right: auto;
    width: 23.08%;
    aspect-ratio: 90/91;
  }
  .RecruitHero__Photo--P07 {
    left: 58.72%;
    top: 62.72%;
    right: auto;
    width: 12.71%;
    aspect-ratio: 49.581/66.555;
  }
  .RecruitHero__Photo--P08 {
    left: 0;
    top: 64.82%;
    right: auto;
    width: 37.57%;
    aspect-ratio: 146.509/104.075;
  }
  .RecruitHero__Photo--P09 {
    left: 66.15%;
    top: 70.36%;
    right: auto;
    width: 34.74%;
    aspect-ratio: 135.47/97.069;
  }
  .RecruitHero__Photo--P10 {
    left: 34.1%;
    top: 82.6%;
    right: auto;
    width: 10.77%;
    aspect-ratio: 41.987/41.541;
  }
  .RecruitHero__Copy {
    top: 32.31%; /* 169 / 523 */
    gap: 4.01vw; /* 15.65px */
  }
  .RecruitHero__Label {
    font-size: 3.08vw; /* 12px */
  }
  .RecruitHero__Title {
    gap: 2.82vw; /* 11px */
  }
  .RecruitHero__TitleSub {
    font-size: 4.1vw; /* 16px */
    line-height: 1.5;
  }
  .RecruitHero__TitleMain {
    font-size: 13.59vw; /* 53px */
    line-height: 1.005;
  }
}
/*==================================================
 * Concept（RecruitConcept）
*================================================*/
.RecruitConcept {
  position: relative;
  overflow: hidden;
  padding: clamp(70px, 39.3258426966px + 7.8651685393vw, 140px) 20px clamp(54px, 30.3370786517px + 6.0674157303vw, 108px);
  color: var(--whiteColor);
}

.RecruitConcept__Bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.RecruitConcept__Bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* 赤入れ C-09「社長の顔がみきれてる」:
     下端寄せ(50% 100%)だったため、セクションより写真のほうが縦に長くなる幅
     （1280超）で上側だけが切り落とされ、中央の人物の頭が消えていた。
     上端寄せに変えて頭は必ず残し、余るときは足元側を切る（Figma 551:12080 と同じ考え方）。 */
  -o-object-position: 50% 0;
     object-position: 50% 0;
  margin: 0;
}
.RecruitConcept__Bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--mainColor);
  opacity: 0.5;
  mix-blend-mode: multiply;
}

.RecruitConcept__Inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.RecruitConcept__En {
  font-size: clamp(17px, 15.6853932584px + 0.3370786517vw, 20px);
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--whiteColor);
}

.RecruitConcept__Title {
  margin-top: clamp(14px, 10.9325842697px + 0.7865168539vw, 21px);
  font-size: clamp(22px, 18.4943820225px + 0.8988764045vw, 30px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5; /* Figma: 30px / 高さ45 */
  color: var(--whiteColor);
}

.RecruitConcept__Text {
  margin-top: clamp(24px, 16.9887640449px + 1.797752809vw, 40px);
  max-width: 698px;
  letter-spacing: 0.05em;
}
.RecruitConcept__Text p {
  line-height: 2; /* Figma: 16px / 行高32 */
}
.RecruitConcept__Text p + p {
  margin-top: 2em;
}

/*==================================================
 * Message（RecruitMessage）
*================================================*/
.RecruitMessage {
  position: relative;
  /* blobはセクション下へ132pxはみ出す（Figma 551:12044）。左右は切る＝横スクロール防止 */
  clip-path: inset(0 0 -290px 0);
  padding: clamp(60px, 42.4719101124px + 4.4943820225vw, 100px) clamp(20px, -23.8202247191px + 11.2359550562vw, 120px) clamp(60px, 42.4719101124px + 4.4943820225vw, 100px) clamp(20px, 2.4719101124px + 4.4943820225vw, 60px);
}

/* グレー背景レイヤー（blobより前面＝Figmaのz順を再現） */
.RecruitMessage__Bg {
  position: absolute;
  inset: 0;
  background-color: #F5F5F5; /* TODO: グレー統一先 確認中（Q10-4）Figma実値 */
  pointer-events: none;
}

.RecruitMessage__Item {
  position: absolute;
  /* Figma 551:12044: x997 y1004 / 329×329（セクション下端から-132px） */
  right: -46px;
  bottom: -132px;
  width: 329px;
  height: 329px;
  pointer-events: none;
}
.RecruitMessage__Item img {
  position: absolute;
  left: -150px;
  top: -150px;
  width: 629px;
  height: 629px;
  max-width: none;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .RecruitMessage__Item {
    display: none;
  }
}

.RecruitMessage__Inner {
  position: relative;
  max-width: 1100px;
  margin-inline: auto;
}

.RecruitMessage__Head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
  height: clamp(33px, 26.8651685393px + 1.5730337079vw, 47px); /* Figma: 見出しブロック高47（英字は下にはみ出す） */
}

.RecruitMessage__En {
  margin-right: -0.05em; /* 末尾letter-spacingを打ち消す（Figmaのボックス幅に合わせる） */
  font-size: clamp(40px, 32.9887640449px + 1.797752809vw, 56px);
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--accentColor);
}

.RecruitMessage__Sub {
  margin-top: clamp(22px, 18.0561797753px + 1.0112359551vw, 31px); /* Figma: 見出し上端から31px */
  font-size: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  letter-spacing: 0.05em;
  line-height: 1.15;
  color: var(--fontColor);
}

.RecruitMessage__Body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(37px, 22.9775280899px + 3.595505618vw, 69px);
  margin-top: clamp(36px, 26.3595505618px + 2.4719101124vw, 58px); /* Figma: 見出し下端から58px */
}
@media only screen and (max-width: 767px) {
  .RecruitMessage__Body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.RecruitMessage__Img {
  width: clamp(300px, 237.3370786517px + 16.0674157303vw, 443px);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .RecruitMessage__Img {
    width: 270px;
  }
}
@media only screen and (max-width: 767px) {
  .RecruitMessage__Img {
    margin-inline: auto;
    width: 80%;
  }
}
.RecruitMessage__Img img {
  width: 100%;
  /* 赤入れ C-11「代表が見えないので、修正」:
     横長443×316で cover ＋下端寄せにしていたため頭部が完全に切れていた。
     原版 886×1072 と同じ比率（443×536）にして、トリミングそのものを無くす。 */
  aspect-ratio: 443/536;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
}

.RecruitMessage__Content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.RecruitMessage__Title {
  font-size: clamp(22px, 17.6179775281px + 1.1235955056vw, 32px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--fontColor);
}

.RecruitMessage__Text {
  margin-top: 18px;
  letter-spacing: 0.05em;
}
.RecruitMessage__Text p {
  line-height: 1.5625; /* Figma: 16px / 行高25 */
}
.RecruitMessage__Text p + p {
  margin-top: 0.9375em; /* Figma: 段落間40px（行送り25 + 15） */
}

.RecruitMessage__Name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  margin-top: clamp(14px, 11.808988764px + 0.5617977528vw, 19px); /* Figma: 署名ブロック上端 y2542 */
}

.RecruitMessage__NamePost {
  font-weight: 500;
  letter-spacing: 0.05em;
}

.RecruitMessage__NameText {
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* X 丸アイコン（2026-10-07 本人指示・デザインなし。濃紺の丸に白ロゴ） */
.RecruitMessage__Sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: -8px; /* gap20 を名前との間だけ12pxに詰める */
  border-radius: 50%;
  color: var(--whiteColor);
  background: var(--mainColor);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.RecruitMessage__Sns svg {
  width: 14px;
  height: 14px;
}
.RecruitMessage__Sns:hover {
  opacity: 0.7;
}

/*==================================================
 * セクション見出し（RecruitSecHead）※台帳A2 CommonSecTitle候補のrecruitローカル版
*================================================*/
.RecruitSecHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
  height: clamp(33px, 26.8651685393px + 1.5730337079vw, 47px); /* Figma: 見出しブロック高47（英字は下にはみ出す） */
}
@media only screen and (max-width: 767px) {
  .RecruitSecHead {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

.RecruitSecHead__En {
  margin-right: -0.05em; /* 末尾letter-spacingを打ち消す（Figmaのボックス幅に合わせる） */
  font-size: clamp(28px, 15.7303370787px + 3.1460674157vw, 56px);
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--accentColor);
  white-space: nowrap;
}

.RecruitSecHead__Sub {
  margin-top: clamp(22px, 18.0561797753px + 1.0112359551vw, 31px); /* Figma: 見出し上端から31px */
  font-size: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  letter-spacing: 0.05em;
  line-height: 1.15;
  color: var(--fontColor);
  white-space: nowrap;
}
@media only screen and (max-width: 767px) {
  .RecruitSecHead__Sub {
    margin-top: 0;
  }
}

/*==================================================
 * Numbers（RecruitNumber）※CMS化は直列フェーズ
*================================================*/
.RecruitNumber {
  position: relative;
  isolation: isolate;
  margin-top: clamp(60px, 42.4719101124px + 4.4943820225vw, 100px);
  padding: 0 20px;
}

.RecruitNumber__Item {
  position: absolute;
  left: -14px;
  top: 326px;
  width: 457px;
  height: 457px;
  z-index: -1;
  pointer-events: none;
}
.RecruitNumber__Item img {
  position: absolute;
  left: -150px;
  top: -150px;
  width: 757px;
  height: 757px;
  max-width: none;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .RecruitNumber__Item {
    display: none;
  }
}

.RecruitNumber__Inner {
  max-width: 1161px;
  margin: 0 auto;
}

.RecruitNumber__List {
  display: grid;
  /* minmax(0,1fr): nowrap数値+shrink:0画像によるmin-content膨張ではみ出さないように（検収F2） */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 14.3033707865px + 1.4606741573vw, 33px);
  margin-top: clamp(36px, 26.3595505618px + 2.4719101124vw, 58px);
  list-style: none;
  padding: 0;
}
@media only screen and (max-width: 767px) {
  .RecruitNumber__List {
    grid-template-columns: minmax(0, 1fr);
  }
}

.RecruitNumber__Card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: clamp(180px, 159.8426966292px + 5.1685393258vw, 226px);
  padding: 12px 19px 18px;
  background-color: #F5F5F5; /* TODO: グレー統一先 確認中（Q10-4）Figma実値 */
  border-radius: 4px;
}

.RecruitNumber__CardTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  font-size: clamp(17px, 15.6853932584px + 0.3370786517vw, 20px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--fontColor);
}
.RecruitNumber__CardTitle::before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--accentColor);
}

.RecruitNumber__CardBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(6px, 3.3707865169px + 0.6741573034vw, 12px);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.RecruitNumber__CardValue {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline; /* Figma: 数値と単位はベースライン揃え */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2px;
  white-space: nowrap;
}

.RecruitNumber__CardNum {
  font-size: clamp(44px, 35.6741573034px + 2.1348314607vw, 63px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--accentColor);
  /* tab幅は列が狭くイラストが潰れるため数値を縮小（RC-R8・Work tab対応と同型） */
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .RecruitNumber__CardNum {
    font-size: 34px;
  }
}

.RecruitNumber__CardUnit {
  font-size: clamp(24px, 20.4943820225px + 0.8988764045vw, 32px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 0.9375; /* Figma: 32px / 行高30 */
  color: var(--fontColor);
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .RecruitNumber__CardUnit {
    font-size: 20px;
  }
}

.RecruitNumber__CardImg {
  /* あふれ時のみ縮む（通常はFigma実寸のwidth属性を維持・検収F2） */
  -ms-flex-negative: 1;
      flex-shrink: 1;
  min-width: 0;
  height: auto;
  margin: 0;
}

.RecruitNumber__CardText {
  margin-top: auto;
  font-size: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  letter-spacing: 0; /* Figma: キャプションは字間なし */
  line-height: 1.5;
  text-align: center;
  color: var(--fontColor);
}

/*==================================================
 * Benefits（RecruitBenefits）SP2列維持・縦線装飾SP非表示
*================================================*/
.RecruitBenefits {
  --recruitBenefitsBg: #E5E8EE; /* TODO: グレー統一先 確認中（Q10-4）Figma実値 */
  --recruitLineColor: #B2B2B2; /* Figma罫線実値 */
  position: relative; /* Numbersのblobを背面に隠す（Figmaのz順） */
  margin-top: clamp(60px, 42.4719101124px + 4.4943820225vw, 100px);
  padding: clamp(60px, 42.4719101124px + 4.4943820225vw, 100px) 20px;
  background-color: var(--recruitBenefitsBg);
}

.RecruitBenefits__Inner {
  max-width: 1160px;
  margin: 0 auto;
}

.RecruitBenefits__Body {
  position: relative;
  margin-top: clamp(22px, 15.4269662921px + 1.6853932584vw, 37px); /* Figma: 見出し下端から罫線まで36.5 */
  border-top: 1px solid var(--recruitLineColor);
  padding-top: clamp(20px, 14.3033707865px + 1.4606741573vw, 33px);
}
.RecruitBenefits__Body::before {
  content: "";
  position: absolute;
  left: 60px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--recruitLineColor);
}
@media only screen and (max-width: 767px) {
  .RecruitBenefits__Body::before {
    display: none;
  }
}

.RecruitBenefits__Vertical {
  position: absolute;
  left: 44px; /* Figma 551:12436: x104（縦罫線120の左56） */
  top: 44px;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--accentColor);
}
@media only screen and (max-width: 767px) {
  .RecruitBenefits__Vertical {
    display: none;
  }
}

.RecruitBenefits__Content {
  margin-left: 120px;
}
@media only screen and (max-width: 767px) {
  .RecruitBenefits__Content {
    margin-left: 0;
  }
}

.RecruitBenefits__LeadTitle {
  font-size: clamp(17px, 13.9325842697px + 0.7865168539vw, 24px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: var(--fontColor);
}

.RecruitBenefits__LeadText {
  margin-top: 12px;
  letter-spacing: 0.05em;
}

.RecruitBenefits__List {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 2.3595505618px + 2.4719101124vw, 34px);
  margin-top: clamp(24px, 18.3033707865px + 1.4606741573vw, 37px);
  list-style: none;
  padding: 0;
  max-width: 1040px;
}
@media only screen and (max-width: 767px) {
  .RecruitBenefits__List {
    grid-template-columns: 1fr;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.RecruitBenefits__Card {
  background-color: var(--whiteColor);
  border-radius: 10px;
  padding: clamp(10px, 4.7415730337px + 1.3483146067vw, 22px) clamp(12px, 6.3033707865px + 1.4606741573vw, 25px) clamp(14px, 10.4943820225px + 0.8988764045vw, 22px);
}

.RecruitBenefits__CardImg {
  position: relative;
  border-radius: 8px;
}
.RecruitBenefits__CardImg img {
  width: 100%;
  aspect-ratio: 453/255;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  margin: 0;
}

.RecruitBenefits__CardNum {
  position: absolute;
  left: 1.3%;
  top: 67.8%;
  font-size: clamp(40px, 13.7078651685px + 6.7415730337vw, 100px);
  font-style: italic;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--accentColor);
}
@media only screen and (max-width: 767px) {
  .RecruitBenefits__CardNum {
    top: 81.8%;
  }
}

.RecruitBenefits__CardTitle {
  margin-top: 12px;
  font-size: clamp(16px, 13.3707865169px + 0.6741573034vw, 22px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.36;
  color: var(--fontColor);
}

.RecruitBenefits__CardText {
  margin-top: 6px;
  font-size: clamp(13px, 11.6853932584px + 0.3370786517vw, 16px);
  letter-spacing: 0.05em;
}

/*==================================================
 * Work environment（RecruitWork）
*================================================*/
.RecruitWork {
  margin-top: clamp(60px, 42.4719101124px + 4.4943820225vw, 100px);
  padding: 0 20px;
}

.RecruitWork__Inner {
  max-width: 1160px;
  margin: 0 auto;
}

.RecruitWork__Top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(24px, 10.8539325843px + 3.3707865169vw, 54px);
}
@media only screen and (max-width: 767px) {
  .RecruitWork__Top {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

.RecruitWork__TopText {
  width: clamp(280px, 153.3595505618px + 32.4719101124vw, 569px); /* Figma 551:12439: 569 */
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
  .RecruitWork__TopText {
    width: 100%;
  }
}
.RecruitWork__TopText {
  /* tab幅では列が狭まるためEn見出しを縮小して重なりを防ぐ */
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .RecruitWork__TopText .RecruitSecHead__En {
    font-size: 36px;
  }
}

.RecruitWork__Lead {
  margin-top: clamp(32px, 21.4831460674px + 2.6966292135vw, 56px);
}

.RecruitWork__LeadTitle {
  font-size: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.45;
  color: var(--fontColor);
}

.RecruitWork__LeadText {
  margin-top: 12px;
  letter-spacing: 0.05em;
}

.RecruitWork__TopImg {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  /* Figma 551:12446: 画像右端はアートボード右端まで（1280基準で597px・右へブリード） */
  margin-right: min(-20px, 580px - 50vw);
}
@media only screen and (max-width: 767px) {
  .RecruitWork__TopImg {
    width: 100%;
    margin-right: 0;
  }
}
.RecruitWork__TopImg img {
  width: 100%;
  aspect-ratio: 597/398;
  /* 1280超では横だけ伸ばし高さは398で頭打ち（規約§3 間延び防止） */
  max-height: 398px;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
}

.RecruitWork__List {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 11.1797752809px + 1.2359550562vw, 27px);
  margin-top: clamp(20px, 16.4943820225px + 0.8988764045vw, 28px);
  list-style: none;
  padding: 0;
}
@media only screen and (max-width: 767px) {
  .RecruitWork__List {
    grid-template-columns: 1fr;
  }
}

.RecruitWork__Card img {
  width: 100%;
  aspect-ratio: 369/261;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
}

.RecruitWork__CardText {
  margin-top: 9px;
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.RecruitWork__CardText b {
  font-weight: 600;
}

/*==================================================
 * Person（RecruitPerson）Swiper矢印送り
*================================================*/
.RecruitPerson {
  position: relative;
  isolation: isolate;
  margin-top: clamp(60px, 42.4719101124px + 4.4943820225vw, 100px);
  padding: 0 20px;
  /* 上のblobはセクション外へ抜ける（Figma 551:12046 y=-148）。左右のみクリップ＝横スクロール防止 */
}

.RecruitPerson__Deco {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.RecruitPerson__Deco img {
  position: absolute;
  left: -150px;
  top: -150px;
  max-width: none;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .RecruitPerson__Deco {
    display: none;
  }
}

/* Figma 551:12046: x918 y-148 / 428×428（ぼかし分150pxはimg側でブリード） */
.RecruitPerson__Deco--Top {
  right: -66px;
  top: -148px;
  width: 428px;
  height: 428px;
}
.RecruitPerson__Deco--Top img {
  width: 728px;
  height: 728px;
}

/* Figma 551:12047: x36 y579 / 321×321 */
.RecruitPerson__Deco--Bottom {
  left: 36px;
  top: 579px;
  width: 321px;
  height: 321px;
}
.RecruitPerson__Deco--Bottom img {
  width: 621px;
  height: 621px;
}

.RecruitPerson__Inner {
  max-width: 1160px;
  margin: 0 auto;
}

.RecruitPerson__Lead {
  margin-top: clamp(32px, 21.4831460674px + 2.6966292135vw, 56px);
}

.RecruitPerson__LeadTitle {
  font-size: clamp(15px, 11.0561797753px + 1.0112359551vw, 24px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: var(--fontColor);
}

.RecruitPerson__LeadText {
  margin-top: 12px;
  letter-spacing: 0.05em;
}

.RecruitPerson__Slider {
  position: relative;
  margin-top: clamp(41px, 30.0449438202px + 2.808988764vw, 66px); /* Figma: スライダー上端 セクション+264 */
}
.RecruitPerson__Slider .swiper {
  overflow: visible;
}

.RecruitPerson__Card {
  width: clamp(280px, 240.5617977528px + 10.1123595506vw, 370px);
  padding: clamp(18px, 13.6179775281px + 1.1235955056vw, 28px) clamp(14px, 10.9325842697px + 0.7865168539vw, 21px);
  background-color: #F5F5F5; /* TODO: グレー統一先 確認中（Q10-4）Figma実値 */
  border-radius: 4px;
  height: auto;
}

.RecruitPerson__CardImg img {
  width: 100%;
  aspect-ratio: 328/246;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .RecruitPerson__CardImg img {
    margin-inline: auto;
    width: 80%;
  }
}

.RecruitPerson__CardTitle {
  margin-top: 15px;
  font-size: clamp(18px, 16.2471910112px + 0.4494382022vw, 22px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.36;
  color: var(--fontColor);
}

.RecruitPerson__CardText {
  margin-top: 4px;
  font-size: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
  letter-spacing: 0.05em;
}

.RecruitPerson__Arrow {
  position: absolute;
  top: 42%;
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 6px; /* タップ領域44×44確保（content-box） */
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  margin: -6px;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.RecruitPerson__Arrow img {
  margin: 0;
  display: block;
}
.RecruitPerson__Arrow:hover {
  opacity: 0.7;
}
.RecruitPerson__Arrow:disabled {
  cursor: default;
}
.RecruitPerson__Arrow { /* Figmaは両矢印とも通常表示 */ }

.RecruitPerson__Arrow--Prev {
  left: -16px;
  /* 書き出しsvgがNextと同一パスのため左向きに反転 */
}
.RecruitPerson__Arrow--Prev img {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

.RecruitPerson__Arrow--Next {
  right: -16px;
}

/*==================================================
 * Slide（RecruitSlide）CSS自動マーキー無限ループ
*================================================*/
.RecruitSlide {
  margin-top: clamp(54px, 34.2808988764px + 5.0561797753vw, 99px); /* Figma: Person下端→Slide上端 99 */
  overflow: hidden;
}

.RecruitSlide__Track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: recruitSlideMarquee 60s linear infinite;
          animation: recruitSlideMarquee 60s linear infinite;
}

@-webkit-keyframes recruitSlideMarquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

@keyframes recruitSlideMarquee {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .RecruitSlide__Track {
    -webkit-animation: none;
            animation: none;
  }
}
.RecruitSlide__Group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(10px, 6.4943820225px + 0.8988764045vw, 18px);
  padding: 0 clamp(5px, 3.2471910112px + 0.4494382022vw, 9px);
  list-style: none;
  margin: 0;
}

.RecruitSlide__Item img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
}

.RecruitSlide__Item--S01 {
  width: clamp(178px, 100px + 20vw, 356px);
  aspect-ratio: 356/559;
}

.RecruitSlide__Item--S02 {
  width: clamp(281px, 157.8651685393px + 31.5730337079vw, 562px);
  aspect-ratio: 562/416;
}

.RecruitSlide__Item--S03 {
  width: clamp(212px, 119.5393258427px + 23.7078651685vw, 423px);
  aspect-ratio: 423/559;
}

.RecruitSlide__Item--S04 {
  width: clamp(223px, 125.7191011236px + 24.9438202247vw, 445px);
  aspect-ratio: 445/320;
}

.RecruitSlide__Item--S05 {
  width: clamp(178px, 100px + 20vw, 356px);
  aspect-ratio: 356/559;
}

.RecruitSlide__Item--S06 {
  width: clamp(223px, 125.7191011236px + 24.9438202247vw, 445px);
  aspect-ratio: 445/320;
}

/*==================================================
 * Detail（RecruitDetail = 募集要項 RecruitInfo + 選考の流れ RecruitFlow + FAQ RecruitQa）
*================================================*/
.RecruitDetail {
  --recruitFlowColor02: #069ED8; /* Figma選考フローStep02実値 */
  --recruitFlowColor03: #2E67D9; /* Figma選考フローStep03実値 */
  --recruitBenefitsBg: #E5E8EE; /* TODO: グレー統一先 確認中（Q10-4）Figma実値 */
  --recruitLineColor: #B2B2B2; /* Figma罫線実値（#B8B8B8はB2B2B2へ正規化・規約§1誤差ゼロ扱い） */
  position: relative;
  isolation: isolate;
  margin-top: clamp(61px, 39.0898876404px + 5.6179775281vw, 111px); /* Figma: Slide下端→Detail上端 111 */
  padding: 0 20px;
}

.RecruitDetail__Deco {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.RecruitDetail__Deco img {
  position: absolute;
  left: -150px;
  top: -150px;
  width: calc(100% + 300px);
  height: calc(100% + 300px);
  max-width: none;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .RecruitDetail__Deco {
    display: none;
  }
}

.RecruitDetail__Deco--I01 {
  right: -31px;
  top: 830px;
  width: 360px;
  height: 360px;
}

.RecruitDetail__Deco--I02 {
  right: 12px;
  top: 1759px;
  width: 264px;
  height: 264px;
}

.RecruitDetail__Deco--I03 {
  left: -33px;
  top: 2332px;
  width: 459px;
  height: 459px;
}

.RecruitDetail__Inner {
  max-width: 1161px;
  margin: 0 auto;
}

/* --- 募集要項（RecruitInfo） --- */
/* 募集要項が0件のとき（Figma 531:19016「カミングスーン」）
   Figma実寸: 1160×233 / 写真に rgba(8,28,46,0.4) のオーバーレイ / Cormorant Infant 72px・字送り3.6px */
.RecruitInfo__ComingSoon {
  position: relative;
  width: 100%;
  max-width: 1160px;
  margin: clamp(28px, 19.6741573034px + 2.1348314607vw, 47px) auto 0;
  aspect-ratio: 1160/233;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.RecruitInfo__ComingSoonBg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.RecruitInfo__ComingSoon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(8, 28, 46, 0.4);
}

.RecruitInfo__ComingSoonText {
  position: relative;
  z-index: 1;
  font-size: clamp(36px, 20.2247191011px + 4.0449438202vw, 72px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

/* 募集状況ラベル（CLAUDE.md §2「募集中等のラベルを募集状況に応じて表示」）
   ※バッジのデザインは藤井さん作成待ち（確認事項 CMS22）。暫定で白フチのピル */
.RecruitInfo__JobStatus {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: auto;
  margin-left: 12px;
  padding: 4px 12px;
  border: 1px solid var(--whiteColor);
  border-radius: 999px;
  font-size: clamp(11px, 10.1235955056px + 0.2247191011vw, 13px);
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

.RecruitInfo__JobStatus--closed {
  opacity: 0.6;
}

.RecruitInfo__Job {
  max-width: 1040px;
  margin: clamp(28px, 19.6741573034px + 2.1348314607vw, 47px) auto 0;
}

.RecruitInfo__JobBar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  min-height: clamp(48px, 42.3033707865px + 1.4606741573vw, 61px);
  padding: 10px 27px 10px 18px;
  background-color: var(--accentColor);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.RecruitInfo__JobName {
  font-size: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--whiteColor);
}

.RecruitInfo__JobIcon {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.RecruitInfo__JobIcon::before, .RecruitInfo__JobIcon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 2px;
  margin-top: -1px;
  background-color: var(--whiteColor);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.RecruitInfo__JobIcon::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.RecruitInfo__JobBar[aria-expanded=true] .RecruitInfo__JobIcon::after {
  -webkit-transform: rotate(90deg) scaleX(0);
          transform: rotate(90deg) scaleX(0);
}

.RecruitInfo__JobBody {
  display: grid;
  grid-template-rows: 0fr;
  -webkit-transition: grid-template-rows 0.3s ease;
  transition: grid-template-rows 0.3s ease;
  transition: grid-template-rows 0.3s ease, -ms-grid-rows 0.3s ease;
}

.RecruitInfo__JobBar[aria-expanded=true] + .RecruitInfo__JobBody {
  grid-template-rows: 1fr;
}

.RecruitInfo__JobBodyInner {
  overflow: hidden;
}

.RecruitInfo__Table {
  margin-top: 5px;
}

.RecruitInfo__Row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  /* Figma: 行ピッチ56（本文28 + 上下14）。1pxの罫線分を下paddingから引く */
  padding: 14px 0 13px;
  border-bottom: 1px solid var(--recruitLineColor, #B2B2B2);
}
@media only screen and (max-width: 767px) {
  .RecruitInfo__Row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
  }
}

.RecruitInfo__RowLabel {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 225px;
  padding-left: clamp(8px, 0.5505617978px + 1.9101123596vw, 25px); /* Figma: 表左端から見出しまで27 */
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.75;
  color: var(--fontColor);
}
@media only screen and (max-width: 767px) {
  .RecruitInfo__RowLabel {
    width: 100%;
    padding-left: 0;
  }
}

.RecruitInfo__RowValue {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  letter-spacing: 0.05em;
  line-height: 1.75;
  color: var(--fontColor);
}

.RecruitInfo__ApplyWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* Figma: ボタンはrecruitInfo（1100幅）基準で中央＝Inner中央より左 */
  max-width: 1100px;
  margin-top: clamp(28px, 22.3033707865px + 1.4606741573vw, 41px);
}

.RecruitInfo__Apply {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  padding: clamp(18px, 13.6179775281px + 1.1235955056vw, 28px) clamp(24px, 18.7415730337px + 1.3483146067vw, 36px) clamp(18px, 13.6179775281px + 1.1235955056vw, 28px) clamp(28px, 20.9887640449px + 1.797752809vw, 44px);
  background-color: var(--accentColor);
  border: 1px solid var(--whiteColor);
  border-radius: 8px;
  text-decoration: none;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.RecruitInfo__Apply:hover {
  opacity: 0.85;
}

.RecruitInfo__ApplyText {
  font-size: clamp(20px, 14.7415730337px + 1.3483146067vw, 32px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--whiteColor);
}

.RecruitInfo__ApplyArrow {
  width: clamp(34px, 28.7415730337px + 1.3483146067vw, 46px);
  margin: 0;
}

/* --- 選考の流れ（RecruitFlow） --- */
.RecruitFlow {
  margin-top: clamp(60px, 42.4719101124px + 4.4943820225vw, 100px);
}

.RecruitFlow__Lead {
  margin-top: clamp(32px, 21.4831460674px + 2.6966292135vw, 56px);
  letter-spacing: 0.05em;
  line-height: 1.75;
}

.RecruitFlow__Steps {
  position: relative;
  margin-top: clamp(56px, 34.9662921348px + 5.393258427vw, 104px);
}

.RecruitFlow__Line {
  position: absolute;
  left: 12.5%;
  top: 15px;
  width: 75%;
  height: 1px;
  margin: 0;
  max-width: none;
}
@media only screen and (max-width: 767px) {
  .RecruitFlow__Line {
    display: none;
  }
}

.RecruitFlow__List {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 7.3707865169px + 0.6741573034vw, 16px);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media only screen and (max-width: 767px) {
  .RecruitFlow__List {
    grid-template-columns: repeat(2, 1fr);
  }
}

.RecruitFlow__Step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

.RecruitFlow__StepNum {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

.RecruitFlow__StepCard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  /* Figma左右paddingは14だが、説明文1行（15字）が収まらないため12に調整 */
  padding: clamp(14px, 11.3707865169px + 0.6741573034vw, 20px) clamp(9px, 7.6853932584px + 0.3370786517vw, 12px);
  border-radius: 4px;
  text-align: center;
}

.RecruitFlow__Step--S01 .RecruitFlow__StepNum,
.RecruitFlow__Step--S01 .RecruitFlow__StepCard {
  background-color: var(--accentColor);
}

.RecruitFlow__Step--S02 .RecruitFlow__StepNum,
.RecruitFlow__Step--S02 .RecruitFlow__StepCard {
  background-color: var(--recruitFlowColor02);
}

.RecruitFlow__Step--S03 .RecruitFlow__StepNum,
.RecruitFlow__Step--S03 .RecruitFlow__StepCard {
  background-color: var(--recruitFlowColor03);
}

.RecruitFlow__Step--S04 .RecruitFlow__StepNum,
.RecruitFlow__Step--S04 .RecruitFlow__StepCard {
  background-color: var(--subColor);
}

.RecruitFlow__StepIcon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: clamp(60px, 52.5505617978px + 1.9101123596vw, 77px);
  height: clamp(60px, 52.5505617978px + 1.9101123596vw, 77px);
  border-radius: 50%;
  /* Figma 485:6890: 77枠の中に白円65（padding + content-box塗り）＋ステップ色のアイコン */
  padding: clamp(5px, 4.5617977528px + 0.1123595506vw, 6px);
  background-color: var(--whiteColor);
  background-clip: content-box;
}
.RecruitFlow__StepIcon img {
  width: auto;
  max-width: 70%;
  margin: 0;
}

.RecruitFlow__StepTitle {
  margin-top: 11px;
  font-size: clamp(15px, 12.808988764px + 0.5617977528vw, 20px);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

.RecruitFlow__StepText {
  margin-top: 5px;
  font-size: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: left; /* Figma 551:12194: 説明文は左揃え（見出しのみ中央） */
  -ms-flex-item-align: stretch;
      align-self: stretch; /* 親が align-items:center のため、幅を広げないと短文(03)が中央に寄る */
  color: var(--whiteColor);
}

/* --- よくあるご質問（RecruitQa）±トグル: 開→マイナス --- */
.RecruitQa {
  margin-top: clamp(80px, 49.3258426966px + 7.8651685393vw, 150px);
}

.RecruitSecHead--Column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
  height: auto;
}
.RecruitSecHead--Column .RecruitSecHead__Sub {
  margin-top: 0;
}

.RecruitQa__List {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  max-width: 1040px;
  margin: clamp(32px, 21.4831460674px + 2.6966292135vw, 56px) auto 0;
}

.RecruitQa__Item {
  background-color: var(--recruitBenefitsBg, #E5E8EE);
  border-radius: 4px;
}

.RecruitQa__Q {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(12px, 8.9325842697px + 0.7865168539vw, 19px);
  width: 100%;
  padding: clamp(14px, 11.3707865169px + 0.6741573034vw, 20px) clamp(24px, 17.4269662921px + 1.6853932584vw, 39px) clamp(14px, 11.3707865169px + 0.6741573034vw, 20px) clamp(12px, 8.9325842697px + 0.7865168539vw, 19px);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.RecruitQa__QIcon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(34px, 30.9325842697px + 0.7865168539vw, 41px);
  height: clamp(34px, 30.9325842697px + 0.7865168539vw, 41px);
  background-color: var(--whiteColor);
  border-radius: 50%;
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  font-weight: 600;
  color: var(--accentColor);
}

.RecruitQa__QText {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  font-size: clamp(15px, 12.808988764px + 0.5617977528vw, 20px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: var(--fontColor);
}

.RecruitQa__Toggle {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 17px;
  height: 17px;
}
.RecruitQa__Toggle::before, .RecruitQa__Toggle::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 17px;
  height: 2px;
  margin-top: -1px;
  background-color: var(--accentColor);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.RecruitQa__Toggle::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.RecruitQa__Item.isOpen .RecruitQa__Toggle::after {
  -webkit-transform: rotate(90deg) scaleX(0);
          transform: rotate(90deg) scaleX(0);
}

.RecruitQa__A {
  display: grid;
  grid-template-rows: 0fr;
  -webkit-transition: grid-template-rows 0.3s ease;
  transition: grid-template-rows 0.3s ease;
  transition: grid-template-rows 0.3s ease, -ms-grid-rows 0.3s ease;
}

.RecruitQa__Item.isOpen .RecruitQa__A {
  grid-template-rows: 1fr;
}

.RecruitQa__AClip {
  overflow: hidden;
}

.RecruitQa__AInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(12px, 8.9325842697px + 0.7865168539vw, 19px);
  margin: 0 clamp(12px, 8.9325842697px + 0.7865168539vw, 19px);
  padding: clamp(12px, 9.808988764px + 0.5617977528vw, 17px) clamp(12px, 8.4943820225px + 0.8988764045vw, 20px) clamp(14px, 11.3707865169px + 0.6741573034vw, 20px) 0;
  border-top: 1px dashed var(--accentColor);
}

.RecruitQa__AIcon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: clamp(34px, 30.9325842697px + 0.7865168539vw, 41px);
  height: clamp(34px, 30.9325842697px + 0.7865168539vw, 41px);
  background-color: var(--accentColor);
  border-radius: 50%;
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  font-weight: 600;
  color: var(--whiteColor);
}

.RecruitQa__AText {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  letter-spacing: 0.05em;
  line-height: 1.75;
  padding-top: 6px;
}

/*==================================================
 * Entry（RecruitEntry）
*================================================*/
.RecruitEntry {
  --recruitEntryNoteColor: #5F5F5F; /* Figma電話注記実値 */
  position: relative;
  overflow: hidden;
  padding-top: 52px;
  color: var(--whiteColor);
  z-index: 2;
}

.RecruitEntry__Bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  bottom: 0;
  z-index: -1;
}
.RecruitEntry__Bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
}
.RecruitEntry__Bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--mainColor);
  opacity: 0.5;
  mix-blend-mode: multiply;
}

/* 背景大文字（無限マーキー） */
.RecruitEntry__BgTextWrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}

.RecruitEntry__BgTextTrack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: recruitSlideMarquee 60s linear infinite;
          animation: recruitSlideMarquee 60s linear infinite;
}

.RecruitEntry__BgText {
  margin: 0;
  font-size: clamp(80px, 27.4157303371px + 13.4831460674vw, 200px);
  letter-spacing: 0.05em;
  line-height: normal;
  color: var(--whiteColor);
  opacity: 0.3;
  white-space: nowrap;
  text-shadow: 2px 2px 20px rgba(8, 15, 44, 0.05);
}

/* 打ち消しは各トラックの animation 宣言より後に置く（同一詳細度のため後勝ち） */
@media (prefers-reduced-motion: reduce) {
  .RecruitHero__BgTextTrack,
  .RecruitEntry__BgTextTrack {
    -webkit-animation: none;
            animation: none;
  }
}
.RecruitEntry__Inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(48px, 29.1573033708px + 4.8314606742vw, 91px) 20px clamp(55px, 44.9213483146px + 2.5842696629vw, 78px); /* Figma: 下余白78（画像帯571に対して） */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.RecruitEntry__En {
  padding-top: 14px; /* Figma: 72px / 行高100（上下14のハーフレディング分） */
  font-size: clamp(48px, 37.4831460674px + 2.6966292135vw, 72px);
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--whiteColor);
}

.RecruitEntry__Sub {
  margin-top: clamp(8px, 6.6853932584px + 0.3370786517vw, 11px);
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: var(--whiteColor);
}

.RecruitEntry__Title {
  margin-top: clamp(16px, 13.808988764px + 0.5617977528vw, 21px);
  font-size: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5; /* Figma: 24px / 高さ36 */
  color: var(--whiteColor);
}

.RecruitEntry__Text {
  margin-top: 14px;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

.RecruitEntry__Contact {
  width: min(608px, 100%);
  margin-top: clamp(18px, 14.4943820225px + 0.8988764045vw, 26px); /* Figma: 連絡ブロック上端 y379 */
}

.RecruitEntry__Tel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  padding-block: 17px;
  padding-inline: clamp(16px, 7.2359550562px + 2.2471910112vw, 36px) clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  background-color: var(--whiteColor);
  opacity: 0.85;
}
@media only screen and (max-width: 767px) {
  .RecruitEntry__Tel {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
  }
}

.RecruitEntry__TelLabel {
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 1.5; /* Figma: 高さ18 */
  color: var(--fontColor);
}

.RecruitEntry__TelNum {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  margin-top: 2px;
  text-decoration: none;
}
.RecruitEntry__TelNum img {
  width: 26px;
  margin: 0;
}
.RecruitEntry__TelNum span {
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.2083; /* Figma: 24px / 高さ29 */
  color: var(--fontColor);
}

.RecruitEntry__TelNote {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: left;
  color: var(--recruitEntryNoteColor);
}
@media only screen and (max-width: 767px) {
  .RecruitEntry__TelNote {
    text-align: center;
  }
}

.RecruitEntry__Btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(12px, 5.8651685393px + 1.5730337079vw, 26px);
  margin-top: 16px;
}
@media only screen and (max-width: 767px) {
  .RecruitEntry__Btns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.RecruitEntry__Btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: clamp(14px, 11.3707865169px + 0.6741573034vw, 20px);
  background-color: var(--accentColor);
  border: 1px solid var(--whiteColor);
  text-decoration: none;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.RecruitEntry__Btn:hover {
  opacity: 0.85;
}
.RecruitEntry__Btn span {
  font-size: clamp(14px, 12.2471910112px + 0.4494382022vw, 18px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5; /* Figma: 18px / 高さ27 */
  color: var(--whiteColor);
}
.RecruitEntry__Btn img {
  width: 23px;
  margin: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* パンくず */
.RecruitHero__Breadcrumb {
  position: absolute;
  left: clamp(20px, 2.4719101124px + 4.4943820225vw, 60px);
  bottom: clamp(16px, 8.9887640449px + 1.797752809vw, 32px);
}

.RecruitHero__BreadcrumbList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.RecruitHero__BreadcrumbList li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--whiteColor);
}
.RecruitHero__BreadcrumbList li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--whiteColor);
  border-right: 1px solid var(--whiteColor);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  opacity: 0.8;
}

.RecruitHero__BreadcrumbList a {
  color: var(--whiteColor);
  opacity: 0.8;
  text-decoration: none;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.RecruitHero__BreadcrumbList a:hover {
  opacity: 1;
}

/* 採用ページのみ共通CTA(FotterCta)を非表示（recruit #16・RecruitEntryと重複のため） */
body.page-recruit .FotterCta {
  display: none;
}

/* ============================================================
   _column.scss
   ============================================================ */
/*==================================================
 * column（コラム一覧 / home.php）
 * AB: 551-11477「10_お知らせ一覧」
 * 構成: PageHeader（下層共通・共通化候補#6）/ ColumnSec（リード+2カラム[カード/サイドバー]+ページャ）
*================================================*/
/* PageHeader はファイル冒頭の「共通パーツ: PageHeader」に一本化済み（2026-09-20）。
   以前ここにあった上書きは全ページで同値だったため削除した。ページ固有の背景テクスチャも
   共通ブロック側にまとめてある。差分を足したくなったら、まず共通側を直せるか検討すること。 */
/* --------------------------------------------------
 * ColumnSec（コラム一覧本体）
 * -------------------------------------------------- */
.ColumnSec {
  /* ページローカル色（罫線・リンク色。統一先はQ10-4） */
  --columnLine: #A8BED4; /* variable: middole blue */
  --columnAccent: #005491; /* カード日付/VIEW MORE */
  padding: clamp(60px, 42.4719101124px + 4.4943820225vw, 100px) 0 clamp(72px, 59.7303370787px + 3.1460674157vw, 100px);
  background: var(--whiteColor);
}

.ColumnSec__Inner {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4.2247191011px + 4.0449438202vw, 56px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
}

/* --- リード文 --- */
.ColumnIntro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(28px, 19.2359550562px + 2.2471910112vw, 48px);
  width: 100%;
}

.ColumnIntro__Body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(4px, 3.5617977528px + 0.1123595506vw, 5px);
  text-align: center;
}

.ColumnIntro__Title {
  font-family: var(--fontMincho);
  font-size: clamp(19px, 16.808988764px + 0.5617977528vw, 24px);
  line-height: 1.92; /* Figma leading-[46px] */
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.ColumnIntro__Text {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 2.06; /* Figma leading-[33px] */
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.ColumnIntro__Line {
  width: 100%;
  height: 1px;
  background: var(--columnLine);
}

/* --- 2カラム本体 --- */
.ColumnSec__Main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(40px, 24.6629213483px + 3.9325842697vw, 75px);
}

.ColumnMain {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(40px, 32.9887640449px + 1.797752809vw, 56px);
}

/* --- カードグリッド --- */
.ColumnList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 12.4943820225px + 0.8988764045vw, 24px);
}

.ColumnCard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: var(--bgColor);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ColumnCard:hover {
  opacity: 0.85;
}

.ColumnCard__Image {
  width: 100%;
  aspect-ratio: 380/240;
  overflow: hidden;
}

.ColumnCard__Image img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.ColumnCard__Body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
}

.ColumnCard__Title {
  font-family: var(--fontMincho);
  font-size: clamp(17px, 15.6853932584px + 0.3370786517vw, 20px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.ColumnCard__Meta {
  margin-top: auto;
  padding-top: clamp(16px, 13.3707865169px + 0.6741573034vw, 22px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(8px, 6.2471910112px + 0.4494382022vw, 12px);
}

.ColumnCard__Badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 4px 12px;
  border-radius: 40px;
  background: var(--subColor);
  color: var(--whiteColor);
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 16px; /* Figma: バッジ高さ24 */
  letter-spacing: 0;
  white-space: nowrap;
}

.ColumnCard__Date {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--columnAccent);
  white-space: nowrap;
}

.ColumnCard__More {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 6px;
}

.ColumnCard__MoreText {
  font-family: var(--fontEn);
  font-size: clamp(12px, 12px + 0vw, 12px);
  line-height: 12px;
  letter-spacing: 0.05em;
  color: var(--columnAccent);
  white-space: nowrap;
}

.ColumnCard__MoreIcon {
  width: 14.445px;
  height: 14.445px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.ColumnCard__MoreIcon img {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* --- ページネーション --- */
/* 0件時（コラム未公開・絞り込み結果なし）
   ※Figmaの「カミングスーン」は募集要項(job)用のため、コラムは文言のみ */
.ColumnMain__Empty {
  padding: clamp(40px, 31.2359550562px + 2.2471910112vw, 60px) 0;
  text-align: center;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.ColumnPager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(16px, 8.9887640449px + 1.797752809vw, 32px);
}

.ColumnPager__Arrow {
  width: clamp(8px, 7.1805617978px + 0.2101123596vw, 9.87px);
  height: clamp(14px, 12.597752809px + 0.3595505618vw, 17.2px);
  background-color: var(--subColor);
  -webkit-mask: url("../img/pagerArrowNext.svg") center/contain no-repeat;
  mask: url("../img/pagerArrowNext.svg") center/contain no-repeat;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ColumnPager__Arrow:hover {
  opacity: 0.5;
}

.ColumnPager__Arrow--Prev {
  -webkit-mask-image: url("../img/pagerArrowPrev.svg");
  mask-image: url("../img/pagerArrowPrev.svg");
}

/* 先頭/末尾ページで送り先が無い状態（Figmaは1ページ目＝Prevが淡色） */
.ColumnPager__Arrow--Disabled {
  background-color: var(--columnLine);
  pointer-events: none;
}

.ColumnPager__Nums {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(10px, 7.3707865169px + 0.6741573034vw, 16px);
}

.ColumnPager__Num {
  width: clamp(28px, 26.2471910112px + 0.4494382022vw, 32px);
  height: clamp(28px, 26.2471910112px + 0.4494382022vw, 32px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: var(--fontNum);
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--mainColor);
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

.ColumnPager__Num:hover {
  background: var(--bgColor);
}

.ColumnPager__Num--Current {
  background: var(--bgColor);
}

/* --- サイドバー --- */
.ColumnSide {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(240px, 209.7640449438px + 7.7528089888vw, 309px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(40px, 32.9887640449px + 1.797752809vw, 56px);
}

.ColumnSide__Block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(16px, 12.4943820225px + 0.8988764045vw, 24px);
}

.ColumnSide__Head {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  padding-bottom: clamp(12px, 12px + 0vw, 12px);
}

.ColumnSide__En {
  font-family: var(--fontEn);
  font-size: clamp(32px, 28.4943820225px + 0.8988764045vw, 40px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.ColumnSide__Ja {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 16px; /* Figma leading-[16px]：見出しブロック高さ60 */
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.ColumnSide__Line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--columnLine);
}

.ColumnSide__Line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 61px;
  height: 1px;
  background: var(--subColor);
}

/* 最新のコラム */
.ColumnSide__Latest {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
}

.ColumnSide__Item {
  /* Figma: 列幅309に対しアイテム幅300（タイトルが2行に折り返す） */
  width: 97.1%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ColumnSide__Item:hover {
  opacity: 0.7;
}

.ColumnSide__ItemTitle {
  font-family: var(--fontMincho);
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.ColumnSide__ItemMeta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(8px, 6.2471910112px + 0.4494382022vw, 12px);
}

.ColumnSide__ItemBadge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 4px 12px;
  border-radius: 40px;
  background: var(--subColor);
  color: var(--whiteColor);
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 16px; /* Figma: バッジ高さ24 */
  letter-spacing: 0;
  white-space: nowrap;
}

.ColumnSide__ItemDate {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--subColor);
  white-space: nowrap;
}

/* カテゴリー / アーカイブ 共通リスト */
.ColumnSide__List {
  width: 97.1%; /* Figma: 列幅309に対しリスト幅300 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(10px, 9.1235955056px + 0.2247191011vw, 12px);
  list-style: none;
}

.ColumnSide__ListItem {
  line-height: 1.5; /* Figma: 1行24px */
}

.ColumnSide__Link {
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--mainColor);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ColumnSide__Link:hover {
  opacity: 0.6;
}

.ColumnSide__Link--Active {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------
 * レスポンシブ（§3変換表）
 * -------------------------------------------------- */
@media only screen and (max-width: 959px) {
  /* 2カラム → 縦積み（カード → サイドバー） */
  .ColumnSec__Main {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: clamp(48px, 40.9887640449px + 1.797752809vw, 64px);
  }
  .ColumnSide {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .ColumnList {
    grid-template-columns: 1fr;
  }
  /* 検収: SPタップ領域44px確保 */
  .ColumnPager__Num {
    min-width: 44px;
    min-height: 44px;
  }
  .ColumnIntro__Text {
    line-height: 1.7;
  }
}
/*==================================================
 * コラム詳細（single.php / AB: 551-11738「11_お知らせ詳細」）
 * ※ PageHeader は上記コラム一覧と共通（再利用）。ここは詳細ページ固有ブロック
 * 構成: ColumnDetail（記事本文＋サイドバー＋PREV/NEXT）/ ColumnOther（他コラム3カード＋ボタン）
*================================================*/
/* ページローカル色（統一先はQ10-4） */
.ColumnDetail,
.ColumnOther {
  --columnInk: #1E1E1E; /* 本文・タイトルの黒（Figma 黒#1E1E1E） */
  --columnLineD: #D9DEE6; /* 罫線グレー */
  --columnLinkBlue: #005491; /* カード日付/VIEW MORE/PREV NEXT の青 */
  --columnLabelBg: #EEF0F3; /* PREV/NEXT ラベル背景（薄い青） */
}

/* --------------------------------------------------
 * カテゴリーバッジ（ネイビーピル）※詳細ページ内共通
 * -------------------------------------------------- */
.ColumnBadge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 24px;
  padding: 4px 12px;
  background-color: var(--subColor);
  border-radius: 40px;
  font-family: var(--fontJp);
  font-size: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--whiteColor);
  white-space: nowrap;
}

.ColumnBadge--Link {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ColumnBadge--Link:hover {
  opacity: 0.85;
}

/* --------------------------------------------------
 * ColumnDetail（記事本文＋サイドバー 2カラム）
 * -------------------------------------------------- */
.ColumnDetail {
  padding: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px) 0 clamp(56px, 41.1011235955px + 3.8202247191vw, 90px); /* 本文下に余白を持たせFotterCtaと分離（column-single #3） */
  background-color: var(--whiteColor);
}

.ColumnDetail__Inner {
  max-width: 1281px;
  margin: 0 auto;
  padding-inline: clamp(20px, 2.4719101124px + 4.4943820225vw, 60px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: clamp(32px, 18.8539325843px + 3.3707865169vw, 62px);
}
@media only screen and (max-width: 767px) {
  .ColumnDetail__Inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: clamp(48px, 44.4943820225px + 0.8988764045vw, 56px);
  }
}

.ColumnDetail__Main {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  max-width: 799px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(56px, 24.4494382022px + 8.0898876404vw, 128px);
}
@media only screen and (max-width: 767px) {
  .ColumnDetail__Main {
    max-width: none;
    width: 100%;
  }
}

/* ---- 記事本文 ---- */
.ColumnArticle__MetaRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

.ColumnArticle__Date {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.ColumnArticle__Title {
  margin-top: clamp(12px, 8.4943820225px + 0.8988764045vw, 20px);
  font-family: var(--fontMincho);
  font-size: clamp(22px, 17.6179775281px + 1.1235955056vw, 32px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--columnInk);
}

.ColumnArticle__Divider {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
  background-color: var(--columnLineD);
}

.ColumnArticle__Body {
  margin-top: clamp(24px, 20.4943820225px + 0.8988764045vw, 32px);
}

.ColumnArticle__Thumb {
  width: 100%;
  aspect-ratio: 799/469;
  margin-bottom: clamp(24px, 20.4943820225px + 0.8988764045vw, 32px);
  overflow: hidden;
}

.ColumnArticle__Thumb img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.ColumnArticle__Entry {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--columnInk);
}

.ColumnArticle__Entry p {
  margin-bottom: 1.7em;
}

.ColumnArticle__Entry p:last-child {
  margin-bottom: 0;
}

.ColumnArticle__Entry h2,
.ColumnArticle__Entry h3,
.ColumnArticle__Entry h4 {
  margin: 2em 0 0.8em;
  font-family: var(--fontMincho);
  font-weight: 500;
  line-height: 1.5;
  color: var(--columnInk);
}

.ColumnArticle__Entry h2 {
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
}

.ColumnArticle__Entry h3 {
  font-size: clamp(18px, 17.1235955056px + 0.2247191011vw, 20px);
}

.ColumnArticle__Entry ul,
.ColumnArticle__Entry ol {
  margin: 0 0 1.7em 1.5em;
}

.ColumnArticle__Entry li {
  margin-bottom: 0.5em;
  list-style: revert;
}

.ColumnArticle__Entry a {
  color: var(--subColor);
  text-decoration: underline;
}

.ColumnArticle__Entry img {
  max-width: 100%;
  height: auto;
}

.ColumnArticle__TagRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(24px, 20.4943820225px + 0.8988764045vw, 32px);
}

.ColumnArticle__TagLabel {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--columnInk);
}

.ColumnArticle__Tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
}

/* ---- PREV / NEXT ナビ ---- */
.ColumnNav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(12px, 8.4943820225px + 0.8988764045vw, 20px);
}

.ColumnNav__Item {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  height: clamp(120px, 102.4719101124px + 4.4943820225vw, 160px);
  padding: clamp(14px, 11.3707865169px + 0.6741573034vw, 20px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  overflow: hidden;
}

/* 前後の記事が無い側。トップページへのリンクになる。
   背景は singleTop.jpg（single.php が ColumnNav__Bg に指定）。
   Prev/Next と同じ紺のオーバーレイが乗るため、文字色は白のまま。 */
.ColumnNav__Item--Empty {
  background-color: var(--columnLabelBg);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ColumnNav__Item--Empty:hover {
  opacity: 0.7;
}

.ColumnNav__Bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.ColumnNav__Item--Prev .ColumnNav__Bg::after,
.ColumnNav__Item--Next .ColumnNav__Bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(7, 47, 86, 0.45);
}

.ColumnNav__Label {
  position: absolute;
  top: 0;
  z-index: 2;
  padding: 8px 16px;
  background-color: var(--columnLabelBg);
  font-family: var(--fontEn);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--columnLinkBlue);
}

.ColumnNav__Item--Prev .ColumnNav__Label {
  left: 0;
}

.ColumnNav__Item--Next .ColumnNav__Label {
  right: 0;
}

.ColumnNav__Body {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
}

.ColumnNav__Date {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

.ColumnNav__Ttl {
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
}

/* --------------------------------------------------
 * ColumnAside（サイドバー）
 * -------------------------------------------------- */
.ColumnAside {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 300px;
          flex: 0 0 300px;
  width: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(40px, 32.9887640449px + 1.797752809vw, 56px);
}
@media only screen and (max-width: 767px) {
  .ColumnAside {
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    width: 100%;
  }
}

.ColumnAside__Head {
  position: relative;
  padding-bottom: clamp(10px, 9.1235955056px + 0.2247191011vw, 12px);
  margin-bottom: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  border-bottom: 1px solid var(--columnLineD);
}

.ColumnAside__Head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 60px;
  height: 2px;
  background-color: var(--subColor);
}

.ColumnAside__En {
  font-family: var(--fontEn);
  font-size: clamp(32px, 28.4943820225px + 0.8988764045vw, 40px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

.ColumnAside__Ja {
  margin-top: 4px;
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

/* 最新のコラム */
.ColumnAside__Posts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
}

.ColumnAside__PostLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}

.ColumnAside__PostTtl {
  font-family: var(--fontMincho);
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--mainColor);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ColumnAside__PostLink:hover .ColumnAside__PostTtl {
  opacity: 0.7;
}

.ColumnAside__PostMeta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

.ColumnAside__PostDate {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--subColor);
}

/* カテゴリー */
.ColumnAside__Cats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(10px, 9.1235955056px + 0.2247191011vw, 12px);
}

.ColumnAside__CatLink {
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--mainColor);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ColumnAside__CatLink:hover {
  opacity: 0.7;
}

.ColumnAside__CatLink--Current {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* タグ */
.ColumnAside__Tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
}

/* アーカイブ */
.ColumnAside__Archives {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(10px, 9.1235955056px + 0.2247191011vw, 12px);
}

.ColumnAside__Archives li a {
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--mainColor);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ColumnAside__Archives li a:hover {
  opacity: 0.7;
}

/* --------------------------------------------------
 * ColumnOther（他のコラム 3カード＋ボタン）
 * -------------------------------------------------- */
.ColumnOther {
  padding: clamp(64px, 48.2247191011px + 4.0449438202vw, 100px) 0 clamp(72px, 59.7303370787px + 3.1460674157vw, 100px);
  background-color: var(--whiteColor);
}

.ColumnOther__Inner {
  max-width: 1281px;
  margin: 0 auto;
  padding-inline: clamp(20px, 2.4719101124px + 4.4943820225vw, 60px);
}

.ColumnOther__Head {
  margin-bottom: clamp(32px, 21.4831460674px + 2.6966292135vw, 56px);
}

.ColumnOther__En {
  font-family: var(--fontEn);
  font-size: clamp(36px, 27.2359550562px + 2.2471910112vw, 56px);
  line-height: 1;
  letter-spacing: 0.05em;
  background: linear-gradient(156deg, var(--accentColor) 1%, var(--subColor) 97%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-bottom: 0.2em; /* clip:text は padding box までしか塗られず g・p 等のディセンダが欠けるため */
  margin-bottom: -0.2em;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.ColumnOther__Ja {
  margin-top: clamp(8px, 6.2471910112px + 0.4494382022vw, 12px);
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.05em;
  color: var(--mainColor);
}

.ColumnOther__List {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media only screen and (max-width: 767px) {
  .ColumnOther__List {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.ColumnOther__Card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: var(--bgColor);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ColumnOther__Card:hover {
  opacity: 0.9;
}

.ColumnOther__CardImg {
  display: block;
  width: 100%;
  aspect-ratio: 380/240;
  overflow: hidden;
}

.ColumnOther__CardImg img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.ColumnOther__CardBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
}

.ColumnOther__CardTtl {
  font-family: var(--fontMincho);
  font-size: clamp(17px, 15.6853932584px + 0.3370786517vw, 20px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--mainColor);
  margin-bottom: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
}

.ColumnOther__CardMeta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  margin-top: auto;
}

.ColumnOther__CardDate {
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--columnLinkBlue);
}

.ColumnOther__CardMore {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}

.ColumnOther__CardMoreTx {
  font-family: var(--fontEn);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--columnLinkBlue);
}

.ColumnOther__CardMoreIcon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 14.4px;
  line-height: 0;
}

.ColumnOther__CardMoreIcon img {
  width: 100%;
  margin: 0;
}

.ColumnOther__Btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: clamp(24px, 16.9887640449px + 1.797752809vw, 40px) auto 0;
  padding: 14px 18px 14px 22px;
  background-color: var(--subColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
  font-size: clamp(14px, 13.1235955056px + 0.2247191011vw, 16px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--whiteColor);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ColumnOther__Btn:hover {
  opacity: 0.85;
}

.ColumnOther__BtnIcon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 23px;
  line-height: 0;
}

.ColumnOther__BtnIcon img {
  width: 100%;
  margin: 0;
}

/* ============================================================
   _contact.scss
   ============================================================ */
/*==================================================
 * contact（お問い合わせ / AB: 551-11585）
 * 構成: PageHeader（下層共通・_case/_column のグローバル定義 + 当ページ分の実寸上書き）
 *       / ContactSec（リード+電話+フォーム）
 * ※フォームは静的マークアップ（Figma 1:1）。実配線はSnow Monkey Forms（別フェーズ）
 * 2026-09-16 デザイン再照合バッチでFigma実寸へ全面再調整
*================================================*/
/* PageHeader はファイル冒頭の「共通パーツ: PageHeader」に一本化済み（2026-09-20）。
   以前ここにあった上書きは全ページで同値だったため削除した。ページ固有の背景テクスチャも
   共通ブロック側にまとめてある。差分を足したくなったら、まず共通側を直せるか検討すること。 */
body.page-contact .PageHeader__Photo img {
  /* contactHeader.png は斜辺の左に白が焼き込まれているため fill で伸ばす（他ページは cover） */
  -o-object-fit: fill;
     object-fit: fill;
  /* 赤入れ C-08: contactHeader.png の斜めカットは「透過」ではなく**不透明の白**が
     焼き込まれていた（実測: 左上の画素が rgba(255,255,255,255)）。そのため clip-path を
     外していた旧実装では斜辺の左に白いクサビが残り、Figma（551:11871 ほか）の
     「紺地が斜辺まで回り込む」状態にならなかった。
     画素走査で白の境界を実測 → (294/1109)=26.51% 0 → 0 100% の直線。
     アンチエイリアスのフチを食わせるため 26.9% で切る。 */
  clip-path: polygon(26.9% 0, 100% 0, 100% 100%, 0 100%);
}

/* --------------------------------------------------
 * ContactSec（本体 / Figma 551:11605）
 * Figma: pageHeader下端353 → contactSec上端453（上余白100）／
 *        本文下端1934 → Footer 2034（下余白100）
 * -------------------------------------------------- */
.ContactSec {
  /* ローカルカラー（Figma実測。グレー/白の統一先はQ10-4） */
  --inputBg: #FFFEFA; /* 入力欄背景（オフホワイト） */
  --requiredBg: #D44C4C; /* 必須バッジ赤（Figma実測値） */
  --placeholderColor: #A4A4A4; /* プレースホルダー */
  --checkBorder: #A8BED4; /* ラジオ/チェック枠 */
  --radioDot: #0054A6; /* ラジオ選択時の中ドット */
  --invalidBg: #FFF5F5; /* 入力エラー中の入力欄背景（EFO） */
  --lineColor: #E8E8E8; /* フォーム罫線（Figma実測） */
  --noteColor: #888888; /* 補足テキスト（Figma実測） */
  --phoneNoteColor: #1E1F3B; /* 電話下の注記（Figma variable: 1e1f3b_文字） */
  background-color: var(--whiteColor);
  padding-block: var(--spaceSize); /* clamp(50,10vw,100) → 1280で100 */
}

.ContactSec__Inner {
  /* Figma: Frame 4202 x60 / w1161 */
  width: min(1161px, 100% - 40px);
  margin-inline: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px);
}

/* ---- リード（テキスト + 電話ボックス群 / Figma 551:11607） ---- */
.ContactSec__Lead {
  /* Figma上のフレームは802幅だがリード2行目(49字×16px)は832pxに達するため幅制限しない */
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* Figma gap56 はテキストノード実高(33)基準。実描画の2行(66)基準では46 */
  gap: clamp(32px, 25.8651685393px + 1.5730337079vw, 46px);
}

.ContactSec__LeadText {
  /* Figma: YuGothic Medium 16 / lh33 / ls0.8 */
  line-height: 2.0625;
  letter-spacing: 0.05em;
  color: var(--fontColor);
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .ContactSec__LeadText {
    line-height: 1.8;
  }
}

.ContactSec__PhoneBlock {
  width: 100%;
  max-width: 633px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
}

.ContactSec__Notice {
  /* Figma実測: 破線は rgba(34,56,155,0.31) 相当（白地に #BCC1E0） */
  border: 1px dashed rgba(34, 56, 155, 0.31);
  border-radius: 4px;
  padding: clamp(8px, 7.1235955056px + 0.2247191011vw, 10px) clamp(14px, 12.2471910112px + 0.4494382022vw, 18px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.ContactSec__NoticeText {
  /* Figma: YuGothic Medium 14 / 2行で39px → lh19.5 / ls0.7 */
  font-size: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  line-height: 1.393;
  letter-spacing: 0.05em;
  color: var(--fontColor);
  text-align: center;
}

.ContactSec__Phone {
  /* Figma: py10 + 内側py14 = 24 / px18 / 白 + inset shadow */
  background-color: var(--whiteColor);
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
          box-shadow: inset 0 0 10px 0 rgba(34, 56, 155, 0.32);
  padding: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px) clamp(14px, 12.2471910112px + 0.4494382022vw, 18px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}

.ContactSec__PhoneLabel {
  /* Figma: YuMincho Medium 18 / lh18 / ls0.9 */
  font-size: clamp(16px, 15.1235955056px + 0.2247191011vw, 18px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--fontColor);
  text-align: center;
}

.ContactSec__PhoneNum {
  /* Figma: YuMincho Medium 35 / lh normal / ls1.75 / #22389B */
  font-size: clamp(24px, 19.1797752809px + 1.2359550562vw, 35px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--subColor);
  letter-spacing: 0.05em;
  text-align: center;
}

.ContactSec__PhoneNum a {
  color: var(--subColor);
}

.ContactSec__PhoneTime {
  /* Figma: YuGothic Medium 16 / lh normal */
  line-height: 1.5;
  color: var(--fontColor);
  text-align: center;
}

.ContactSec__PhoneNote {
  /* Figma: YuGothic Medium 14 / lh24 / ls0.7 / #1E1F3B */
  font-size: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  line-height: 1.714;
  letter-spacing: 0.05em;
  color: var(--phoneNoteColor);
  text-align: center;
}

/* ---- フォーム見出し（Figma 551:11627） ---- */
.ContactSec__FormBlock {
  width: 100%;
}

.ContactSec__FormHead {
  /* Figma: 見出し下端35 → 罫線51（=16）。
     Figmaの罫線は高さ0のベクター（レイアウトを押し下げない）ため、
     border-bottom ではなく ::after の絶対配置で描く */
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.ContactSec__FormHead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--lineColor);
}

.ContactSec__FormTitle {
  /* Figma: 明朝 Medium 24 / lh normal / ls1.2 / #22389B
     ※Figmaの指定は Shippori Mincho。本案件はYuMincho統一のため差し替え（Q10-5） */
  font-size: clamp(20px, 18.2471910112px + 0.4494382022vw, 24px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--subColor);
  letter-spacing: 0.05em;
}

.ContactSec__FormFoot {
  /* Figma: 送信ボタン下端928 → 注記954（=26） */
  margin-top: 26px;
  font-size: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  line-height: 1.5;
  color: var(--noteColor);
  text-align: center;
}

/* --------------------------------------------------
 * ContactForm（入力行 / Figma 551:11630）
 * 行構成: [12px] 行 [12px] 罫線 …（ラベル列240 / gap12 / 入力列 残り）
 * -------------------------------------------------- */
.ContactForm {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.ContactForm__Row {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* Figma: ラジオ/テキストエリア/個人情報行もラベルは上下中央 */
  gap: 12px;
  padding-block: 12px;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .ContactForm__Row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 8px;
  }
}

.ContactForm__Row::after {
  /* Figmaの罫線は高さ0のベクター。border-bottomだと1行ごとに1pxずつ下へずれる */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--lineColor);
}

.ContactForm__Label {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-preferred-size: clamp(180px, 153.7078651685px + 6.7415730337vw, 240px);
      flex-basis: clamp(180px, 153.7078651685px + 6.7415730337vw, 240px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}
@media only screen and (max-width: 767px) {
  .ContactForm__Label {
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
  }
}

.ContactForm__LabelText {
  /* Figma: YuGothic Bold 16 / leading-none / ls0.8 */
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--fontColor);
  white-space: nowrap;
}

.ContactForm__Required {
  /* Figma: 33×20 / 文字12を4pxパディング */
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-color: var(--requiredBg);
  border-radius: 2px;
  padding: 4px;
  font-size: 12px;
  line-height: 1;
  color: var(--whiteColor);
  letter-spacing: 0.05em;
}

.ContactForm__Field {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  min-width: 0;
}
@media only screen and (max-width: 767px) {
  .ContactForm__Field {
    width: 100%;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
}

/* input / textarea（Figma: bg#FFFEFA / px16 py12 / 14px lh1.5 → 行高45） */
.ContactForm__Input,
.ContactForm__Textarea {
  width: 100%;
  background-color: var(--inputBg);
  border: none;
  border-radius: 4px;
  padding: 12px 16px;
  font-family: var(--fontJp);
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.5;
  color: var(--fontColor);
  letter-spacing: 0.05em;
}

.ContactForm__Textarea {
  /* Figma: 入力枠の総高120 */
  display: block;
  min-height: clamp(96px, 85.4831460674px + 2.6966292135vw, 120px);
  resize: vertical;
}

.ContactForm__Input::-webkit-input-placeholder, .ContactForm__Textarea::-webkit-input-placeholder {
  color: var(--placeholderColor);
}

.ContactForm__Input::-moz-placeholder, .ContactForm__Textarea::-moz-placeholder {
  color: var(--placeholderColor);
}

.ContactForm__Input:-ms-input-placeholder, .ContactForm__Textarea:-ms-input-placeholder {
  color: var(--placeholderColor);
}

.ContactForm__Input::-ms-input-placeholder, .ContactForm__Textarea::-ms-input-placeholder {
  color: var(--placeholderColor);
}

.ContactForm__Input::placeholder,
.ContactForm__Textarea::placeholder {
  color: var(--placeholderColor);
}

/* ラジオ（相談内容 / Figma 551:11636） */
.ContactForm__Radios {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}

.ContactForm__Radio {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  cursor: pointer;
}

.ContactForm__Radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ContactForm__RadioMark {
  /* Figma実測: 外周20px・枠1px #A8BED4 */
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: var(--whiteColor);
  border: 1px solid var(--checkBorder);
  border-radius: 50%;
  position: relative;
}

.ContactForm__Radio input:checked ~ .ContactForm__RadioMark::after {
  /* Figma実測: 中ドット14px #0054A6（枠色は選択時も変わらない） */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background-color: var(--radioDot);
  border-radius: 50%;
}

.ContactForm__RadioText {
  /* Figma: YuGothic Medium 16 / leading-none / ls0.8 */
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

/* 個人情報テキスト + 同意チェック（Figma 551:11710） */
.ContactForm__PrivacyText {
  /* Figma: 14 / lh22 / 3行66px。チェックボックスまで16px */
  font-size: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  line-height: 1.571;
  letter-spacing: 0.05em;
  color: var(--fontColor);
  margin-bottom: 16px;
}

.ContactForm__PrivacyText p {
  line-height: inherit; /* _main.scss の p 要素セレクタに勝たせる（Figma: 3行66px） */
}

.ContactForm__PrivacyLink {
  color: var(--subColor);
  text-decoration: underline;
}

.ContactForm__Agree {
  /* inline-flex だと親の行ボックス（lh25.6）分の余白が付き行が10px高くなる */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  cursor: pointer;
}

.ContactForm__Agree input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ContactForm__AgreeMark {
  /* Figma: 18×18 / 枠1px #A8BED4 / radius2 */
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: var(--whiteColor);
  border: 1px solid var(--checkBorder);
  border-radius: 2px;
  position: relative;
  -webkit-transition: background-color 0.2s, border-color 0.2s;
  transition: background-color 0.2s, border-color 0.2s;
}

.ContactForm__Agree input:checked ~ .ContactForm__AgreeMark {
  background-color: var(--subColor);
  border-color: var(--subColor);
}

.ContactForm__Agree input:checked ~ .ContactForm__AgreeMark::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 5px;
  height: 9px;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  border: solid var(--whiteColor);
  border-width: 0 2px 2px 0;
}

.ContactForm__AgreeText {
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

/* 送信ボタン（Figma 551:11716 / 135×52・最終行罫線から40px下） */
.ContactForm__Submit {
  margin-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.ContactForm__SubmitBtn {
  font-family: var(--fontJp);
  font-size: 16px; /* button要素はフォントを継承しないため明示（Figma:16） */
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  background-color: var(--subColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
  padding: 14px 18px 14px 22px;
  color: var(--whiteColor);
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ContactForm__SubmitBtn:hover {
  opacity: 0.85;
}

.ContactForm__SubmitText {
  font-weight: 600;
  line-height: 1; /* 行ボックスをアイコン23pxより小さくして全高52px（Figma実寸）にする */
  color: var(--whiteColor);
  letter-spacing: 0.05em;
}

.ContactForm__SubmitIcon {
  /* Figma: 白丸＋#22389Bの矢印（サービス「詳しく見る」と同一コンポーネント） */
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 23px;
  height: 23px;
}
.ContactForm__SubmitIcon img {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* --------------------------------------------------
 * Snow Monkey Forms（2026-09-20 実フォームへ差し替え）
 * 静的マークアップ（上の .ContactForm*）と同じ見た目になるよう、SMFが出力する
 * クラスへ読み替える。SMFのCSSはテーマより前に読まれるので、同詳細度ならこちらが後勝ち。
 * 変換表: .smf-item=行 / .smf-item__col--label=ラベル列 / .smf-item__col--controls=入力列
 *         .smf-text-control__control=input / .smf-textarea-control__control=textarea
 *         .smf-radio-button-control__control=ラジオ / .smf-checkbox-control__control=チェック
 *         .smf-action .smf-button-control__control=送信ボタン
 * -------------------------------------------------- */
.ContactSec .snow-monkey-form {
  width: 100%;
}

.ContactSec .smf-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* SMFが末尾に出す空段落（ブロックエディタの改行）を消す */
.ContactSec .smf-form > p:empty {
  display: none;
}

/* 行（= .ContactForm__Row）。business スタイルの枠線・グレー背景は打ち消す */
.ContactSec .smf-item,
.ContactSec .smf-form--business .smf-item {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  margin: 0;
  padding-block: 12px;
  border: none;
}
@media only screen and (max-width: 767px) {
  .ContactSec .smf-item,
  .ContactSec .smf-form--business .smf-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 8px;
  }
}

.ContactSec .smf-item::after {
  /* Figmaの罫線は高さ0のベクター。border-bottomだと1行ごとに1pxずつ下へずれる */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--lineColor);
}

/* ラベル列（= .ContactForm__Label / __LabelText） */
.ContactSec .smf-item__col,
.ContactSec .smf-form--business .smf-item__col {
  padding: 0;
  border: none;
  background: none;
}

.ContactSec .smf-item__col--label,
.ContactSec .smf-form--business .smf-item__col--label {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 clamp(180px, 153.7078651685px + 6.7415730337vw, 240px);
          flex: 0 0 clamp(180px, 153.7078651685px + 6.7415730337vw, 240px);
  max-width: none;
}
@media only screen and (max-width: 767px) {
  .ContactSec .smf-item__col--label,
  .ContactSec .smf-form--business .smf-item__col--label {
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
  }
}

.ContactSec .smf-item__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

.ContactSec .smf-item__label__text {
  /* Figma: YuGothic Bold 16 / leading-none / ls0.8 */
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--fontColor);
  white-space: nowrap;
}

/* 必須バッジ。SMFはバッジを出さないので、その項目に必須バリデーションが
   設定されていればラベルの後ろに描く（＝プラグイン設定と表示が必ず一致する）。 */
.ContactSec .smf-item:has([data-validations*=required]) .smf-item__label::after {
  content: "必須";
  /* Figma: 33×20 / 文字12を4pxパディング */
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-color: var(--requiredBg);
  border-radius: 2px;
  padding: 4px;
  font-size: 12px;
  font-weight: normal;
  line-height: 1;
  color: var(--whiteColor);
  letter-spacing: 0.05em;
}

/* 入力列（= .ContactForm__Field） */
.ContactSec .smf-item__col--controls,
.ContactSec .smf-form--business .smf-item__col--controls {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  min-width: 0;
  max-width: none;
}
@media only screen and (max-width: 767px) {
  .ContactSec .smf-item__col--controls,
  .ContactSec .smf-form--business .smf-item__col--controls {
    width: 100%;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
}

/* 個人情報行のように「入力 + 補足文」が並ぶ場合、Figmaは補足文が先 */
.ContactSec .smf-item__controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.ContactSec .smf-item__controls > p {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
  margin: 0 0 16px;
  font-size: clamp(12px, 11.1235955056px + 0.2247191011vw, 14px);
  line-height: 1.571;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

.ContactSec .smf-item__controls > p:empty {
  display: none;
}

.ContactSec .smf-item__controls a {
  color: var(--subColor);
  text-decoration: underline;
}

/* input / textarea（Figma: bg#FFFEFA / px16 py12 / 14px lh1.5 → 行高45） */
/* セレクタに .smf-form を噛ませているのは、テンプレ由来の旧スタイル
   `.cform input[type=text]`（詳細度0,2,1）に勝たせるため */
.ContactSec .smf-form .smf-text-control__control,
.ContactSec .smf-form .smf-textarea-control__control,
.ContactSec .smf-form .smf-select-control__control {
  width: 100%;
  max-width: 100%;
  background-color: var(--inputBg);
  background-image: none;
  border: none;
  border-radius: 4px;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 12px 16px;
  font-family: var(--fontJp);
  font-size: clamp(13px, 12.5617977528px + 0.1123595506vw, 14px);
  line-height: 1.5;
  color: var(--fontColor);
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
  .ContactSec .smf-form .smf-text-control__control,
  .ContactSec .smf-form .smf-textarea-control__control,
  .ContactSec .smf-form .smf-select-control__control {
    font-size: 16px;
  }
}

.ContactSec .smf-form .smf-textarea-control__control {
  /* Figma: 入力枠の総高120 */
  display: block;
  min-height: clamp(96px, 85.4831460674px + 2.6966292135vw, 120px);
  resize: vertical;
}

.ContactSec .smf-form .smf-text-control__control::-webkit-input-placeholder, .ContactSec .smf-form .smf-textarea-control__control::-webkit-input-placeholder {
  color: var(--placeholderColor);
}

.ContactSec .smf-form .smf-text-control__control::-moz-placeholder, .ContactSec .smf-form .smf-textarea-control__control::-moz-placeholder {
  color: var(--placeholderColor);
}

.ContactSec .smf-form .smf-text-control__control:-ms-input-placeholder, .ContactSec .smf-form .smf-textarea-control__control:-ms-input-placeholder {
  color: var(--placeholderColor);
}

.ContactSec .smf-form .smf-text-control__control::-ms-input-placeholder, .ContactSec .smf-form .smf-textarea-control__control::-ms-input-placeholder {
  color: var(--placeholderColor);
}

.ContactSec .smf-form .smf-text-control__control::placeholder,
.ContactSec .smf-form .smf-textarea-control__control::placeholder {
  color: var(--placeholderColor);
}

/* ラジオ・チェックの土台 */
.ContactSec .smf-radio-buttons-control__control,
.ContactSec .smf-checkboxes-control__control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}

.ContactSec .smf-label {
  margin: 0;
}

.ContactSec .smf-label > label {
  display: block;
  margin: 0;
  cursor: pointer;
}

.ContactSec .smf-radio-button-control,
.ContactSec .smf-checkbox-control {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  cursor: pointer;
}

/* テンプレ由来の旧 `.cform` は「input を display:none で隠し、隣の span の
   ::before / ::after に丸・四角を描く」方式。詳細度が (0,2,3)〜(0,3,3) と高く、
   16px・枠#333・濃紺ドット（＝Figmaと別物）で上書きされていた。
   その擬似要素を消して、Figma通り input 自体を装飾する方式に戻す。
   `.smf-form` と `[type=…]` を噛ませて詳細度を (0,4,1)〜(0,5,2) へ上げている。 */
.ContactSec .smf-form input[type=radio] + .smf-radio-button-control__label::before,
.ContactSec .smf-form input[type=radio] + .smf-radio-button-control__label::after,
.ContactSec .smf-form input[type=radio]:checked + .smf-radio-button-control__label::after,
.ContactSec .smf-form input[type=checkbox] + .smf-checkbox-control__label::before,
.ContactSec .smf-form input[type=checkbox] + .smf-checkbox-control__label::after,
.ContactSec .smf-form input[type=checkbox]:checked + .smf-checkbox-control__label::after {
  content: none;
}

.ContactSec .smf-form input[type=radio] + .smf-radio-button-control__label,
.ContactSec .smf-form input[type=checkbox] + .smf-checkbox-control__label {
  /* Figma: YuGothic Medium 16 / leading-none / ls0.8 */
  position: static;
  padding-left: 0;
  font-size: inherit;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--fontColor);
}

/* ラジオ（Figma Group 2975 のSVG実測: 外周20px・枠1px #A8BED4 / 中ドット径13.33px #0054A6） */
.ContactSec .smf-form input[type=radio].smf-radio-button-control__control {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  background-color: var(--whiteColor);
  background-image: none;
  border: 1px solid var(--checkBorder);
  border-radius: 50%;
}

.ContactSec .smf-form input[type=radio].smf-radio-button-control__control:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 13.33px;
  height: 13.33px;
  background-color: var(--radioDot);
  border-radius: 50%;
}

/* チェック（Figma: 18×18 / 枠1px #A8BED4 / radius2、選択時は紺地＋白チェック） */
.ContactSec .smf-form input[type=checkbox].smf-checkbox-control__control {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  background-color: var(--whiteColor);
  background-image: none;
  border: 1px solid var(--checkBorder);
  border-radius: 2px;
  -webkit-transition: background-color 0.2s, border-color 0.2s;
  transition: background-color 0.2s, border-color 0.2s;
}

.ContactSec .smf-form input[type=checkbox].smf-checkbox-control__control:checked {
  background-color: var(--subColor);
  border-color: var(--subColor);
}

.ContactSec .smf-form input[type=checkbox].smf-checkbox-control__control:checked::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 5px;
  height: 9px;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  border: solid var(--whiteColor);
  border-width: 0 2px 2px 0;
}

/* 送信ボタン（Figma 551:11716 / 135×52・最終行罫線から40px下） */
.ContactSec .smf-action,
.ContactSec .smf-form--business + .smf-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 40px 0 0;
}

.ContactSec .smf-action .smf-button-control {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.ContactSec .smf-action .smf-button-control__control {
  font-family: var(--fontJp);
  font-size: 16px; /* button要素はフォントを継承しないため明示（Figma:16） */
  font-weight: 600;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  background-color: var(--subColor);
  background-image: none;
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
  padding: 14px 18px 14px 22px;
  line-height: 1; /* 行ボックスをアイコン23pxより小さくして全高52px（Figma実寸）にする */
  color: var(--whiteColor);
  letter-spacing: 0.05em;
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ContactSec .smf-action .smf-button-control__control::after {
  /* Figma: 白丸＋#22389Bの矢印（サービス「詳しく見る」と同一コンポーネント） */
  content: "";
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 23px;
  height: 23px;
  background: url("../img/iconArrowCircleNavy.svg") no-repeat center/contain;
}

.ContactSec .smf-action .smf-button-control__control:hover {
  opacity: 0.85;
}

/* --------------------------------------------------
 * EFO（入力フォーム最適化）— 2026-09-20 本人指示
 * 判定と自動入力は js/main.js 側。ここは状態の見た目だけを持つ。
 * -------------------------------------------------- */
/* エラー表示（Figmaに指定なし。必須バッジと同じ赤で揃える） */
.ContactSec .smf-item__controls .smf-error-messages {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--requiredBg);
}

/* 入力中のフォーカス。キーボード操作でも「いまどこか」が分かるように枠を出す */
.ContactSec .smf-form .smf-text-control__control:focus,
.ContactSec .smf-form .smf-textarea-control__control:focus,
.ContactSec .smf-form .smf-select-control__control:focus {
  outline: 2px solid var(--subColor);
  outline-offset: 1px;
}

.ContactSec .smf-form input[type=radio].smf-radio-button-control__control:focus-visible,
.ContactSec .smf-form input[type=checkbox].smf-checkbox-control__control:focus-visible {
  outline: 2px solid var(--subColor);
  outline-offset: 2px;
}

/* エラー中の入力欄（SMFのサーバー検証も、EFOのリアルタイム検証も data-invalid="1" を付ける） */
.ContactSec .smf-form .smf-text-control__control[data-invalid="1"],
.ContactSec .smf-form .smf-textarea-control__control[data-invalid="1"],
.ContactSec .smf-form .smf-select-control__control[data-invalid="1"] {
  background-color: var(--invalidBg);
  -webkit-box-shadow: inset 0 0 0 1px var(--requiredBg);
          box-shadow: inset 0 0 0 1px var(--requiredBg);
}

.ContactSec .smf-form input[type=radio].smf-radio-button-control__control[data-invalid="1"],
.ContactSec .smf-form input[type=checkbox].smf-checkbox-control__control[data-invalid="1"] {
  border-color: var(--requiredBg);
}

/* 送信中（二重送信防止で disabled にしている間） */
.ContactSec .smf-action .smf-button-control__control[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* --------------------------------------------------
 * お問い合わせページでは共通CTA(.FotterCta)を非表示
 * （Figmaアートボード 551:11585 に FotterCta が存在しない／赤入れ#6）
 * functions.php で固定ページに .page-{slug} を付与済み → body.page-contact で限定。
 * -------------------------------------------------- */
body.page-contact .FotterCta {
  display: none;
}

/* ============================================================
   _privacy.scss
   ============================================================ */
/*==================================================
 * privacy（プライバシーポリシー）
 * 構成: PageHeader（_case.scss グローバル再利用）/ PrivacySec（本文）
*================================================*/
/* privacy はデザインなしのため contactHeader.png を流用。画像の縦横比がFigmaと違うので
   contact と同じく cover ではなく fill で伸ばす。それ以外は共通の .PageHeader のまま。 */
body.page-privacy .PageHeader__Photo img {
  -o-object-fit: fill;
     object-fit: fill;
}

.PrivacySec {
  padding: clamp(56px, 36.7191011236px + 4.9438202247vw, 100px) 0 clamp(80px, 62.4719101124px + 4.4943820225vw, 120px);
  background: var(--whiteColor);
}

.PrivacySec__Inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(24px, 34.5168539326px + -2.6966292135vw, 0px);
  color: var(--mainColor);
}

.PrivacySec__Lead {
  font-size: clamp(14px, 13.5617977528px + 0.1123595506vw, 15px);
  line-height: 2;
  letter-spacing: 0.04em;
}

.PrivacySec__Block {
  margin-top: clamp(36px, 27.2359550562px + 2.2471910112vw, 56px);
}

.PrivacySec__Ttl {
  position: relative;
  padding-left: 14px;
  margin-bottom: clamp(12px, 10.2471910112px + 0.4494382022vw, 16px);
  font-size: clamp(18px, 16.2471910112px + 0.4494382022vw, 22px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.PrivacySec__Ttl::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 4px;
  height: 1.1em;
  background: var(--subColor);
  border-radius: 2px;
}

.PrivacySec__Text {
  font-size: clamp(14px, 13.5617977528px + 0.1123595506vw, 15px);
  line-height: 2;
  letter-spacing: 0.04em;
}

.PrivacySec__List {
  margin-top: clamp(10px, 8.2471910112px + 0.4494382022vw, 14px);
  padding: 0;
  list-style: none;
}

.PrivacySec__List li {
  position: relative;
  padding-left: 1.2em;
  font-size: clamp(14px, 13.5617977528px + 0.1123595506vw, 15px);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.PrivacySec__List li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--accentColor);
  border-radius: 50%;
}

.PrivacySec__Contact {
  margin-top: clamp(14px, 12.2471910112px + 0.4494382022vw, 18px);
  padding: clamp(20px, 16.4943820225px + 0.8988764045vw, 28px) clamp(20px, 14.7415730337px + 1.3483146067vw, 32px);
  background: #F5F5F5;
  border-radius: 6px;
  font-size: clamp(14px, 13.5617977528px + 0.1123595506vw, 15px);
  line-height: 2;
  letter-spacing: 0.04em;
}

/* ============================================================
   _404.scss
   ============================================================ */
/*==================================================
 * 404（Not Found）
 * 構成: PageHeader（_case.scss グローバル再利用）/ NotFoundSec（本文）
*================================================*/
/* --------------------------------------------------
 * PageHeader（赤入れ C-08）— privacy と同じ理由・同じ値で /contact/ に揃える
 * -------------------------------------------------- */
body.error404 .PageHeader {
  margin-top: calc(-1 * var(--headerH));
  background: url("../img/pageHeaderTexture.jpg") center top/cover no-repeat, var(--subColor);
}

body.error404 .PageHeader__Inner {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: var(--cnt);
  min-height: clamp(240px, 190.4831460674px + 12.6966292135vw, 353px);
  padding: calc(var(--headerH) + clamp(42px, 32.797752809px + 2.3595505618vw, 63px)) clamp(20px, 2.4719101124px + 4.4943820225vw, 60px) clamp(12px, 12px + 0vw, 12px);
}

body.error404 .PageHeader__Photo {
  top: var(--headerH);
  height: calc(100% - var(--headerH));
}
@media only screen and (max-width: 767px) {
  body.error404 .PageHeader__Photo {
    width: 46%;
  }
}

body.error404 .PageHeader__Photo img {
  -o-object-fit: fill;
     object-fit: fill;
  clip-path: polygon(26.9% 0, 100% 0, 100% 100%, 0 100%);
}

.NotFoundSec {
  padding: clamp(64px, 39.4606741573px + 6.2921348315vw, 120px) 0 clamp(80px, 58.0898876404px + 5.6179775281vw, 130px);
  background: var(--whiteColor);
  text-align: center;
}

.NotFoundSec__Inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(24px, 24px + 0vw, 24px);
  color: var(--mainColor);
}

.NotFoundSec__Code {
  font-family: var(--fontEn);
  font-size: clamp(72px, 50.9662921348px + 5.393258427vw, 120px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--subColor);
}

.NotFoundSec__Ttl {
  margin-top: clamp(16px, 12.4943820225px + 0.8988764045vw, 24px);
  font-size: clamp(18px, 15.3707865169px + 0.6741573034vw, 24px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.NotFoundSec__Text {
  margin-top: clamp(16px, 14.2471910112px + 0.4494382022vw, 20px);
  font-size: clamp(14px, 13.5617977528px + 0.1123595506vw, 15px);
  line-height: 2;
  letter-spacing: 0.04em;
}

.NotFoundSec__Btn {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin: clamp(36px, 30.7415730337px + 1.3483146067vw, 48px) auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px;
  padding: 14px 18px 14px 22px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: var(--subColor);
  color: var(--whiteColor);
  border: 0.5px solid var(--whiteColor);
  border-radius: 4px;
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: clamp(15px, 14.5617977528px + 0.1123595506vw, 16px);
  letter-spacing: 0.05em;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.NotFoundSec__Btn:hover {
  opacity: 0.8;
}

.NotFoundSec__BtnIcon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.NotFoundSec__BtnIcon img {
  width: 100%;
  height: 100%;
  margin: 0;
}

/*==================================================
 * _motion.scss — スクロールでフェードイン（AOS の fade-in 相当）
 * 2026-09-29 本人指示: AOS程度に留める → 動かさずゆっくりフェードインに変更。
 * .fadeIn は main.js が付与し、画面に入ると .isIn → 終了後に両方外す（main.js の 1100ms と揃える）。
*================================================*/
.fadeIn {
  opacity: 0;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
}
.fadeIn.isIn {
  opacity: 1;
}

/* ----------------------------------
 * スクロール制御（Lenis）推奨CSS（main.js「スクロール制御」）
---------------------------------- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* ----------------------------------
 * ローディング画面（2026-09-29 本人指示）
 * TOPの初回訪問のみ（head のインラインJSが html.isLoading を付けたときだけ出る）
 *  1. FVと同じ青背景（ノイズ＋--subColor＋グラデ）に「loading」＋直線のゲージ（読み込み進捗）
 *  2. ゲージが消え、FVの波（bgWaveHero.png）が上から下へ描かれるように現れる
 *  3. 全体がフェードアウトし、同じ背景・同じ波のFVへそのまま繋がる
 * 動きは main.js「ローディング画面」（GSAP）
---------------------------------- */
.Loading {
  display: none;
}

.isLoading .Loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  background: url(../img/bgNoise.png) left top/120px 120px repeat, var(--subColor) url(../img/bgHeroArea.jpg) no-repeat center/cover;
  /* 保険: JSが動かなかったら9秒で消す */
  -webkit-animation: loadingFailsafe 0.5s 9s forwards;
          animation: loadingFailsafe 0.5s 9s forwards;
}

@-webkit-keyframes loadingFailsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes loadingFailsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
/* 波: FVの .Hero::before と同じ画像・同じ置き方。上から下へ clip-path で描き出す（JS）
   ※左からの描き出しは、斜め（左下→右上）の波だと下から上へ現れて見えるため不採用 */
.Loading__Wave {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1280/900;
  background: url(../img/bgWaveHero.png) no-repeat center top/100% auto;
  opacity: 0.6;
  clip-path: inset(0% 0% 100% 0%);
  pointer-events: none;
  -webkit-animation: waveSway 14s ease-in-out infinite;
          animation: waveSway 14s ease-in-out infinite;
}

.Loading__Wave--Sub {
  top: 18%;
  opacity: 0.3;
  -webkit-animation-duration: 17s;
          animation-duration: 17s;
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
  animation-direction: reverse;
}

@media only screen and (max-width: 767px) {
  .Loading__Wave {
    width: 260%;
    left: -80%;
  }
}
.Loading__Progress {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.Loading__Label {
  margin-bottom: 12px;
  font-family: var(--fontEn);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--whiteColor);
}

.Loading__Gauge {
  position: relative;
  width: 160px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.25);
}

.Loading__Bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--accentColor);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

/* ==========================================================================
   印刷用
   ========================================================================== */
/* -------------------------------------------------------------- 
 
 Hartija CSS Print Framework -MIT License
   * Version:   1.0
 
-------------------------------------------------------------- */
@media print {
  body {
    -webkit-print-color-adjust: exact;
    /*chrome用*/
    zoom: 0.8;
    border-top: none;
  }
  header {
    display: none;
  }
  footer {
    display: none;
  }
}