@charset "UTF-8";
/* ==========================================================================
   株式会社ロングファーマシー コーポレートサイト
   style.scss — エントリーポイント
   ※ビルドは VS Code 拡張「Live Sass Compiler」（Glenn Marks版 / Dart Sass）
     出力先: assets/css/style.css
   ※CSSは直接編集せず、必ずSCSSを編集すること
   ========================================================================== */
/* foundation ------------------------------------------------------------- */
/* ==========================================================================
   リセットCSS
   ※ここで初期化した値（色・font-family・margin等）は
     個別のパーシャルで再指定しないこと
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
dt,
ul,
ol,
li,
fieldset,
legend {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

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

img,
picture,
video,
svg,
iframe {
  display: block;
  max-width: 100%;
  height: auto;
  border-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background-color: transparent;
  border: none;
  border-radius: 0;
  appearance: none;
}

button {
  cursor: pointer;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 0;
  text-align: left;
  vertical-align: top;
  font-weight: inherit;
}

address {
  font-style: normal;
}

dfn,
cite,
em,
i {
  font-style: normal;
}

main {
  display: block;
}

/* 動きを減らす設定のユーザーにはアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ==========================================================================
   global 一括読み込み用
   各パーシャルの先頭で @use "../global" as *; と書けば
   変数・関数・mixin がすべて使えるようになる
   ========================================================================== */
/* ==========================================================================
   関数
   ========================================================================== */
/* --------------------------------------------------------------
   rem()
   px値をremに変換する。単位はremを使用するルールのため、
   数値はデザインデータのpxのまま rem(24) の形で記述する。
   基準は html { font-size: 100%; }（= 16px）

   単位なし（24）・px付き（24px）のどちらを渡しても正しく変換する。
   rem・em・% など変換不要な単位はそのまま返す。
   -------------------------------------------------------------- */
/* --------------------------------------------------------------
   lh()
   デザインデータの「フォントサイズ / 行送り」から line-height を算出する
   例: lh(16, 28) → 1.75
   -------------------------------------------------------------- */
/* --------------------------------------------------------------
   ls()
   デザインデータのトラッキング（1/1000em）を em に変換する
   例: ls(40) → 0.04em
   -------------------------------------------------------------- */
/* ==========================================================================
   変数定義
   ※色・フォント・余白・幅はすべてここで管理する。
     個別ファイルに直接値を書かないこと（修正時に複数箇所を触らないため）
   ========================================================================== */
/* --------------------------------------------------------------
   カラー

   【重要】色は「ブランド色」と「濃色（AA版）」の2種を使い分ける。
   仕様書のブランド色は明度が高く、白文字を載せると
   コントラスト比が WCAG AA（通常文字 4.5:1／大文字 3:1）に届かないため、
   文字がのる面・文字そのものには "-strong" / "-dark" を使う。
     例）#F0A143 に白文字 = 2.12:1（AA未達）
         #A7610D に白文字 = 4.82:1（AA達成）
   ブランド色は装飾シェイプ・淡い面・細い罫線に使用する。
   -------------------------------------------------------------- */
/* プライマリ（空色ブルー） */
/* アクセント（陽だまりオレンジ｜CTA・電話番号） */
/* ロゴの実色（提供ロゴから抽出）。
   現状のパレット（空色ブルー）は仕様書どおりのままにしてあります。
   ロゴのグリーンを配色に取り込む場合はここを起点に展開できます */
/* 事業カラー（各事業ページ・カードのアクセントに一貫適用）
   -dark は文字・チップ背景・見出し帯など文字がのる箇所に使う。
   白・生成り(#FAF7F2)・各事業の淡い面のいずれに載せても
   コントラスト比 4.5:1 以上になる濃さに調整済み */
/* 事業カラーをmapで保持（CSS変数の一括生成に使用） */
/* --------------------------------------------------------------
   フォント
   -------------------------------------------------------------- */
/* --------------------------------------------------------------
   レイアウト
   -------------------------------------------------------------- */
/* ヘッダーの高さ
   ユーティリティ行（文字サイズ変更）は全画面幅で常に表示するので、
   固定ヘッダーの高さは「ユーティリティ行＋ヘッダー本体」になる。
   ページ上端の余白（.mv / .page-head の padding-top）はこの合計に合わせる */
/* セクション余白（装飾に関係のない余白は上側に付けるため padding-top / margin-top で使用） */
/* 角丸・シャドウ */
/* 写真用。写真の中の白い部分（カーテン・壁・テーブル）が白背景に溶けて
   アーチや円の形が見えなくなるため、輪郭に淡い影と極細のリングを重ねる */
/* トランジション */
/* --------------------------------------------------------------
   ブレイクポイント（375px〜対応 / 分岐は 768px・1024px）
   -------------------------------------------------------------- */
/* ==========================================================================
   global 一括読み込み用
   各パーシャルの先頭で @use "../global" as *; と書けば
   変数・関数・mixin がすべて使えるようになる
   ========================================================================== */
/* ==========================================================================
   mixin
   ========================================================================== */
/* --------------------------------------------------------------
   mq() メディアクエリ
   使用例:
   .block {
     font-size: rem(18);

     @include mq(sp) {
       font-size: rem(15);
     }
   }
   -------------------------------------------------------------- */
/* --------------------------------------------------------------
   inner() コンテンツ幅
   要素は必ず .inner の中に入れ、幅はこのmixinで指定する
   -------------------------------------------------------------- */
/* --------------------------------------------------------------
   section-space() セクション上下余白
   -------------------------------------------------------------- */
/* --------------------------------------------------------------
   img-wrap() 画像ラッパー
   imgに直接サイズ指定をしないため、必ずラッパー側で比率と幅を制御する
   -------------------------------------------------------------- */
/* --------------------------------------------------------------
   hover() マウス操作可能な環境のみhoverを適用（SPのタップ残り防止）
   -------------------------------------------------------------- */
/* --------------------------------------------------------------
   heading-en() セクションの英字ラベル
   -------------------------------------------------------------- */
/* --------------------------------------------------------------
   line-clamp() 指定行数でテキストを省略
   -------------------------------------------------------------- */
/* --------------------------------------------------------------
   focus-visible() フォーカスリング（アクセシビリティ）
   -------------------------------------------------------------- */
/* ==========================================================================
   ベース設定
   ※基準となる文字色・フォント・行間はここで一括指定する
   ========================================================================== */
body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8125;
  letter-spacing: 0.02em;
  color: #333a40;
  background-color: #ffffff;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}
@media screen and (max-width: 767px) {
  body {
    font-size: 0.9375rem;
  }
}
body {
  /* SP下部固定バーの高さ分だけコンテンツ末尾に余白を確保 */
}
@media screen and (max-width: 767px) {
  body {
    padding-bottom: 3.75rem;
  }
}

/* ドロワー展開中のスクロールロック */
body.is-fixed {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  line-height: 1.625;
  color: #1f4e6e;
}

a {
  transition: color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
a:focus-visible {
  outline: 0.1875rem solid #f0a143;
  outline-offset: 0.1875rem;
}

button:focus-visible {
  outline: 0.1875rem solid #f0a143;
  outline-offset: 0.1875rem;
}

/* 画像はラッパー側で幅を制御するため、img自体は流し込みのみ */
img {
  width: 100%;
}

/* スクリーンリーダー専用テキスト */
.sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  margin: -0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------
   文字サイズ変更（標準 / 大 / 特大）
   html のフォントサイズを切り替えることで、rem指定の文字が一括で拡大する。
   .inner の max-width だけは px で持っているため、
   レイアウト幅は広がらず「文字だけが大きくなる」挙動になる。
   JSが動かない環境では標準サイズのまま表示される。
   -------------------------------------------------------------- */
html.is-font-lg {
  font-size: 112.5%;
}

/* layout ---------------------------------------------------------------- */
/* ==========================================================================
   共通コンポーネント
   ========================================================================== */
/* --------------------------------------------------------------
   .inner コンテンツ幅
   すべての要素は .inner の中に入れる
   -------------------------------------------------------------- */
.inner {
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.inner--wide {
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .inner--wide {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.inner--narrow {
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 880px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .inner--narrow {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

/* --------------------------------------------------------------
   .section セクション共通
   背景色・帯・装飾シェイプはsection側、幅は.inner側で持つ
   -------------------------------------------------------------- */
.section {
  position: relative;
  overflow: hidden;
  padding-top: 8.75rem;
  padding-bottom: 8.75rem;
}
@media screen and (max-width: 767px) {
  .section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

.section--sm {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .section--sm {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

.section--base {
  background-color: #faf7f2;
}

/* --------------------------------------------------------------
   .deco 装飾シェイプ（白い余白に置く色のついたシェイプ）
   コンテンツではないので aria-hidden / alt="" 相当の扱い
   -------------------------------------------------------------- */
.deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.deco__circle {
  border-radius: 50%;
}

.deco__blob {
  border-radius: 58% 42% 47% 53%/44% 51% 49% 56%;
}

.deco--primary {
  background-color: rgba(62, 143, 196, 0.1);
}

.deco--accent {
  background-color: rgba(240, 161, 67, 0.14);
}

.deco--nikasa {
  background-color: rgba(111, 174, 143, 0.14);
}

.deco--nichigetsu {
  background-color: rgba(232, 193, 90, 0.18);
}

.deco--sansan {
  background-color: rgba(229, 138, 122, 0.14);
}

.deco--line {
  border: 0.0625rem solid rgba(62, 143, 196, 0.22);
  background-color: transparent;
}

/* --------------------------------------------------------------
   .deco-wave セクション境界の淡い曲線（空・雲のモチーフ）
   セクションの上端／下端に置き、fill修飾子で「隣のセクションの背景色」を指定する。
   例）白セクションの下端に生成りのセクションが続く場合
       → 白セクション側に .deco-wave--bottom.deco-wave--base を置く
   -------------------------------------------------------------- */
.deco-wave {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  height: 3.5rem;
  line-height: 0;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .deco-wave {
    height: 2rem;
  }
}
.deco-wave > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.deco-wave--top {
  top: -0.0625rem;
}

.deco-wave--bottom {
  bottom: -0.0625rem;
}

/* 上端に置く場合は上下反転させる */
.deco-wave--top > svg {
  transform: scaleY(-1);
}

/* 塗り色＝隣接するセクションの背景色 */
.deco-wave--white > svg {
  color: #ffffff;
}

.deco-wave--base > svg {
  color: #faf7f2;
}

.deco-wave--pale > svg {
  color: #e8f2f9;
}

.deco-wave--dark > svg {
  color: #1f4e6e;
}

/* 事業ページのページヘッダー（事業カラーの淡い面）から続く区切り。
   is-◯◯ クラスを同じ要素に付けて色を受け取る */
.deco-wave--business > svg {
  color: var(--business-color-pale, #e8f2f9);
}

/* --------------------------------------------------------------
   .sec-head セクション見出し
   -------------------------------------------------------------- */
.sec-head {
  position: relative;
  z-index: 1;
}

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

.sec-head__en {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: "Poppins", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #30719b;
}
@media screen and (max-width: 767px) {
  .sec-head__en {
    font-size: 0.75rem;
  }
}
.sec-head__en::before {
  flex-shrink: 0;
  width: 1.75rem;
  height: 0.125rem;
  background-color: currentColor;
  border-radius: 62.4375rem;
  content: "";
}

.sec-head--center .sec-head__en::after {
  flex-shrink: 0;
  width: 1.75rem;
  height: 0.125rem;
  background-color: currentColor;
  border-radius: 62.4375rem;
  content: "";
}

.sec-head__title {
  margin-top: 1.125rem;
  font-size: 2.5rem;
  line-height: 1.55;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 1024px) {
  .sec-head__title {
    font-size: 2.125rem;
  }
}
@media screen and (max-width: 767px) {
  .sec-head__title {
    margin-top: 0.75rem;
    font-size: 1.5625rem;
    line-height: 1.6;
  }
}

.sec-head__lead {
  margin-top: 1.75rem;
  font-size: 1.0625rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .sec-head__lead {
    margin-top: 1.125rem;
    font-size: 0.9375rem;
    line-height: 1.8666666667;
  }
}

.sec-head--center .sec-head__lead {
  margin-right: auto;
  margin-left: auto;
  max-width: 48.75rem;
}

/* --------------------------------------------------------------
   .btn ボタン
   -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 17.5rem;
  min-height: 4.25rem;
  padding: 0.875rem 2rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  border-radius: 62.4375rem;
  transition: background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media screen and (max-width: 767px) {
  .btn {
    min-width: 100%;
    min-height: 3.75rem;
    font-size: 1rem;
  }
}

.btn__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn--accent {
  color: #ffffff;
  background-color: #a7610d;
  box-shadow: 0 0.375rem 1.125rem rgba(167, 97, 13, 0.32);
}
@media (hover: hover) {
  .btn--accent:hover {
    background-color: #8a4f09;
    transform: translateY(-0.1875rem);
  }
  .btn--accent:hover .btn__icon {
    transform: translateX(0.25rem);
  }
}

.btn--primary {
  color: #ffffff;
  background-color: #30719b;
  box-shadow: 0 0.375rem 1.125rem rgba(31, 78, 110, 0.28);
}
@media (hover: hover) {
  .btn--primary:hover {
    background-color: #1f4e6e;
    transform: translateY(-0.1875rem);
  }
  .btn--primary:hover .btn__icon {
    transform: translateX(0.25rem);
  }
}

.btn--outline {
  color: #1f4e6e;
  background-color: #ffffff;
  box-shadow: inset 0 0 0 0.125rem #3e8fc4;
}
@media (hover: hover) {
  .btn--outline:hover {
    color: #ffffff;
    background-color: #3e8fc4;
  }
  .btn--outline:hover .btn__icon {
    transform: translateX(0.25rem);
  }
}

.btn--white {
  color: #1f4e6e;
  background-color: #ffffff;
}
@media (hover: hover) {
  .btn--white:hover {
    color: #a7610d;
    transform: translateY(-0.1875rem);
  }
  .btn--white:hover .btn__icon {
    transform: translateX(0.25rem);
  }
}

/* ボタン横並び */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
@media screen and (max-width: 767px) {
  .btn-group {
    flex-direction: column;
    gap: 0.75rem;
  }
}

.btn-group--center {
  justify-content: center;
}

/* --------------------------------------------------------------
   .link-text テキストリンク（矢印付き）
   -------------------------------------------------------------- */
.link-text {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #30719b;
}
@media (hover: hover) {
  .link-text:hover {
    color: #1f4e6e;
  }
  .link-text:hover .link-text__icon {
    transform: translateX(0.25rem);
  }
}

.link-text__icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------
   .tel 電話番号（20px以上の太字＋tel:リンク）
   -------------------------------------------------------------- */
.tel {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: "Poppins", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #a7610d;
}
@media screen and (max-width: 767px) {
  .tel {
    font-size: 1.6875rem;
  }
}
@media (hover: hover) {
  .tel:hover {
    opacity: 0.75;
  }
}

.tel__icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  fill: currentColor;
}
@media screen and (max-width: 767px) {
  .tel__icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.tel__note {
  margin-top: 0.375rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  color: #636c74;
}

/* --------------------------------------------------------------
   事業カラーのユーティリティ（事業ごとの色を1か所で生成）
   -------------------------------------------------------------- */
.is-soranoiro {
  /* --business-color … 装飾・細い罫線・ドット用（ブランド色） */
  --business-color: #3e8fc4;
  /* --business-color-dark … 文字／文字がのる面用（コントラストAA） */
  --business-color-dark: #30729c;
  --business-color-light: rgba(62, 143, 196, 0.12);
  /* --business-pale … カテゴリ表示などの淡い面（白と混色した不透明色） */
  --business-pale: rgb(92.431372549%, 95.6078431373%, 97.6862745098%);
}

.is-nikasa {
  /* --business-color … 装飾・細い罫線・ドット用（ブランド色） */
  --business-color: #6fae8f;
  /* --business-color-dark … 文字／文字がのる面用（コントラストAA） */
  --business-color-dark: #44785f;
  --business-color-light: rgba(111, 174, 143, 0.12);
  /* --business-pale … カテゴリ表示などの淡い面（白と混色した不透明色） */
  --business-pale: rgb(94.3529411765%, 96.8235294118%, 95.6078431373%);
}

.is-nichigetsu {
  /* --business-color … 装飾・細い罫線・ドット用（ブランド色） */
  --business-color: #e8c15a;
  /* --business-color-dark … 文字／文字がのる面用（コントラストAA） */
  --business-color-dark: #8d6b14;
  --business-color-light: rgba(232, 193, 90, 0.12);
  /* --business-pale … カテゴリ表示などの淡い面（白と混色した不透明色） */
  --business-pale: rgb(99.0980392157%, 97.568627451%, 93.5294117647%);
}

.is-sansan {
  /* --business-color … 装飾・細い罫線・ドット用（ブランド色） */
  --business-color: #e58a7a;
  /* --business-color-dark … 文字／文字がのる面用（コントラストAA） */
  --business-color-dark: #c63e27;
  --business-color-light: rgba(229, 138, 122, 0.12);
  /* --business-pale … カテゴリ表示などの淡い面（白と混色した不透明色） */
  --business-pale: rgb(98.9803921569%, 95.4117647059%, 94.7843137255%);
}

/* --------------------------------------------------------------
   表示切り替えユーティリティ
   -------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .u-pc-only {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .u-sp-only {
    display: none;
  }
}

/* --------------------------------------------------------------
   スクロール出現アニメーション
   JSで .is-inview を付与する（IntersectionObserver）
   -------------------------------------------------------------- */
[data-anim] {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--anim-delay, 0s);
  will-change: opacity, transform;
}

[data-anim=up] {
  transform: translateY(3rem);
}

[data-anim=fade] {
  transform: none;
}

/* 左右スライドはSPでは縦方向に切り替える
   （画面幅が狭いと横移動がはみ出して見えるため） */
[data-anim=left] {
  transform: translateX(-3rem);
}
@media screen and (max-width: 767px) {
  [data-anim=left] {
    transform: translateY(2.5rem);
  }
}

[data-anim=right] {
  transform: translateX(3rem);
}
@media screen and (max-width: 767px) {
  [data-anim=right] {
    transform: translateY(2.5rem);
  }
}

[data-anim=scale] {
  transform: scale(0.92);
}

/* clipのみ clip-path を使う（他のtypeに clip-path を掛けると
   はみ出した装飾バッジ等が切れてしまうため、ここだけに限定する） */
[data-anim=clip] {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--anim-delay, 0s);
}

[data-anim].is-inview {
  opacity: 1;
  transform: none;
}

[data-anim=clip].is-inview {
  clip-path: inset(0 0 0 0);
}

/* --------------------------------------------------------------
   .logo-lockup ロゴ（マーク＋社名）
   社名は画像ではなくテキストで出しているので、
   文字サイズ変更にも追従し、拡大しても文字がぼけない
   -------------------------------------------------------------- */
.logo-lockup {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.logo-lockup__mark {
  flex-shrink: 0;
  display: block;
  width: 2.5rem;
}
@media screen and (max-width: 1024px) {
  .logo-lockup__mark {
    width: 2.125rem;
  }
}
@media screen and (max-width: 767px) {
  .logo-lockup__mark {
    width: 1.875rem;
  }
}

.logo-lockup__mark > img {
  display: block;
  width: 100%;
  height: auto;
}

/* いただいたロゴと同じ組み方（「株式会社」を上に小さく、社名を大きく）。
   横幅が短くなるので、SPでもハンバーガーとぶつからない */
.logo-lockup__text {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #493d35;
}
@media screen and (max-width: 1024px) {
  .logo-lockup__text {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 767px) {
  .logo-lockup__text {
    font-size: 1rem;
    letter-spacing: 0;
  }
}

.logo-lockup__corp {
  display: block;
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* フッターなど濃色の面にのせる場合 */
.logo-lockup--white .logo-lockup__text {
  color: #ffffff;
}

/* --------------------------------------------------------------
   .phrase 文節（意味のかたまり）で折り返す

   長い一文を <span class="phrase"> で区切っておくと、
   その内側では改行されなくなり、「仕事」を／しませんか。のような
   読みにくい折り返しを防げる。<br> と違って画面幅に自動で追従する。

   .phrase--pc … SPでは通常の折り返しに戻す（1行の文字数が少ない本文向け）

   ※ span どうしの間に改行や空白を入れると余分な隙間が出るので、
     HTMLでは必ず続けて書く（1行で書く）
   -------------------------------------------------------------- */
.phrase {
  display: inline-block;
}

@media screen and (max-width: 767px) {
  .phrase--pc {
    display: inline;
  }
}

/* ==========================================================================
   下層ページ共通パーツ
   ※複数の下層ページで使い回す部品はすべてここに置く。
     ページ固有の見た目だけを page/_*.scss に書く
   ========================================================================== */
/* --------------------------------------------------------------
   .page-head 下層ページのヒーロー
   事業ページでは .is-{事業名} を付けると帯色が事業カラーになる
   -------------------------------------------------------------- */
.page-head {
  position: relative;
  overflow: hidden;
  padding-top: 10.5rem;
  padding-bottom: 3.5rem;
  background-color: #e8f2f9;
}
@media screen and (max-width: 1024px) {
  .page-head {
    padding-top: 9rem;
  }
}
@media screen and (max-width: 767px) {
  .page-head {
    padding-top: 8rem;
    padding-bottom: 2rem;
  }
}

.page-head--business {
  background-color: var(--business-color-pale, #e8f2f9);
}

.page-head__deco-1 {
  top: -10rem;
  right: -7.5rem;
  width: 26.25rem;
  height: 26.25rem;
  background-color: rgba(255, 255, 255, 0.5);
}
@media screen and (max-width: 767px) {
  .page-head__deco-1 {
    top: -7.5rem;
    right: -8.75rem;
    width: 17.5rem;
    height: 17.5rem;
  }
}

.page-head__deco-2 {
  bottom: -8.75rem;
  left: -5.625rem;
  width: 16.25rem;
  height: 16.25rem;
  background-color: rgba(255, 255, 255, 0.34);
}
@media screen and (max-width: 767px) {
  .page-head__deco-2 {
    display: none;
  }
}

.page-head__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .page-head__inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.page-head__en {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: "Poppins", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #30719b;
}
@media screen and (max-width: 767px) {
  .page-head__en {
    font-size: 0.75rem;
  }
}
.page-head__en {
  color: var(--business-color-dark, #30719b);
}
.page-head__en::before {
  flex-shrink: 0;
  width: 1.75rem;
  height: 0.125rem;
  background-color: currentColor;
  border-radius: 62.4375rem;
  content: "";
}

.page-head__title {
  margin-top: 1rem;
  font-size: 2.625rem;
  line-height: 1.5238095238;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 1024px) {
  .page-head__title {
    font-size: 2.125rem;
  }
}
@media screen and (max-width: 767px) {
  .page-head__title {
    margin-top: 0.625rem;
    font-size: 1.625rem;
    line-height: 1.6153846154;
  }
}

.page-head__sub {
  margin-top: 0.75rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--business-color-dark, #30719b);
}
@media screen and (max-width: 767px) {
  .page-head__sub {
    font-size: 0.875rem;
  }
}

/* --------------------------------------------------------------
   .breadcrumb パンくず
   -------------------------------------------------------------- */
.breadcrumb {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #ffffff;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  font-size: 0.8125rem;
  color: #636c74;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .breadcrumb__list {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.breadcrumb__item:not(:first-child)::before {
  width: 0.375rem;
  height: 0.375rem;
  border-top: 0.0625rem solid currentColor;
  border-right: 0.0625rem solid currentColor;
  content: "";
  transform: rotate(45deg);
}

@media (hover: hover) {
  .breadcrumb__link:hover {
    color: #30719b;
    text-decoration: underline;
  }
}

/* --------------------------------------------------------------
   .sec 下層ページのセクション
   -------------------------------------------------------------- */
.sec {
  position: relative;
  overflow: hidden;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .sec {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

.sec--base {
  background-color: #faf7f2;
}

.sec--pale {
  background-color: #e8f2f9;
}

.sec__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .sec__inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.sec__inner--narrow {
  position: relative;
  z-index: 1;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 880px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .sec__inner--narrow {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.sec__deco-1 {
  top: -7.5rem;
  right: -8.75rem;
  width: 22.5rem;
  height: 22.5rem;
}

.sec__deco-2 {
  bottom: -8.75rem;
  left: -7.5rem;
  width: 18.75rem;
  height: 18.75rem;
}

/* 見出し（h2） */
.sec__title {
  font-size: 2rem;
  line-height: 1.625;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
  .sec__title {
    font-size: 1.4375rem;
    line-height: 1.652173913;
  }
}

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

/* 見出し（h3） */
.sec__subtitle {
  font-size: 1.4375rem;
  line-height: 1.652173913;
}
@media screen and (max-width: 767px) {
  .sec__subtitle {
    font-size: 1.1875rem;
    line-height: 1.6842105263;
  }
}

.sec__lead {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .sec__lead {
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.8666666667;
  }
}

.sec__body {
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .sec__body {
    margin-top: 1.75rem;
  }
}

/* --------------------------------------------------------------
   .wysiwyg 本文（プライバシーポリシー・お知らせ詳細など）
   クライアントがWordPressで入力する領域の想定
   -------------------------------------------------------------- */
.wysiwyg {
  font-size: 1rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .wysiwyg {
    font-size: 0.9375rem;
    line-height: 1.8666666667;
  }
}
.wysiwyg > * + * {
  margin-top: 1.5rem;
}
.wysiwyg h2 {
  margin-top: 3.5rem;
  padding-bottom: 0.75rem;
  font-size: 1.5625rem;
  line-height: 1.6;
  border-bottom: 0.125rem solid #e8f2f9;
}
@media screen and (max-width: 767px) {
  .wysiwyg h2 {
    margin-top: 2.25rem;
    font-size: 1.25rem;
  }
}
.wysiwyg h3 {
  margin-top: 2.5rem;
  font-size: 1.1875rem;
  line-height: 1.6842105263;
}
@media screen and (max-width: 767px) {
  .wysiwyg h3 {
    margin-top: 1.75rem;
    font-size: 1.0625rem;
  }
}
.wysiwyg a {
  color: #30719b;
  text-decoration: underline;
}
@media (hover: hover) {
  .wysiwyg a:hover {
    color: #1f4e6e;
  }
}
.wysiwyg strong {
  font-weight: 700;
  color: #1f4e6e;
}
.wysiwyg ul,
.wysiwyg ol {
  padding-left: 0.25rem;
}
.wysiwyg li {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin-top: 0.625rem;
}
.wysiwyg ul > li::before {
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  background-color: #3e8fc4;
  border-radius: 50%;
  content: "";
  transform: translateY(-0.1875rem);
}
.wysiwyg ol {
  counter-reset: wysiwyg-ol;
}
.wysiwyg ol > li {
  counter-increment: wysiwyg-ol;
}
.wysiwyg ol > li::before {
  flex-shrink: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #30719b;
  content: counter(wysiwyg-ol) ".";
}

/* --------------------------------------------------------------
   .def-table 定義表（会社概要・事業所情報・募集要項など）
   -------------------------------------------------------------- */
.def-table {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  border-top: 0.0625rem solid #e2ded7;
}
@media screen and (max-width: 767px) {
  .def-table {
    grid-template-columns: minmax(0, 1fr);
  }
}

.def-table__title {
  padding: 1.25rem 1.5rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: #1f4e6e;
  background-color: #e8f2f9;
  border-bottom: 0.0625rem solid #ffffff;
}
@media screen and (max-width: 767px) {
  .def-table__title {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
  }
}

.def-table__body {
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
  line-height: 1.75;
  border-bottom: 0.0625rem solid #e2ded7;
}
@media screen and (max-width: 767px) {
  .def-table__body {
    padding: 0.875rem 1rem 1.125rem;
    font-size: 0.9375rem;
  }
}

.def-table__note {
  display: inline-block;
  margin-top: 0.375rem;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #8a4f09;
  background-color: #fdf1e2;
  border-radius: 62.4375rem;
}

.def-table__tel {
  font-family: "Poppins", sans-serif;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
  color: #a7610d;
}
@media (hover: hover) {
  .def-table__tel:hover {
    opacity: 0.75;
  }
}

/* --------------------------------------------------------------
   .content-list 見出し＋本文の繰り返し（サービス内容など）
   -------------------------------------------------------------- */
.content-list__item {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 0.0625rem solid #e2ded7;
}
.content-list__item:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
@media screen and (max-width: 767px) {
  .content-list__item {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
  }
}

.content-list__title {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  font-size: 1.3125rem;
  line-height: 1.619047619;
}
@media screen and (max-width: 767px) {
  .content-list__title {
    gap: 0.625rem;
    font-size: 1.125rem;
    line-height: 1.6666666667;
  }
}

.content-list__title::before {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--business-color, #3e8fc4);
  border-radius: 50%;
  content: "";
  transform: translateY(-0.25rem);
}

.content-list__text {
  margin-top: 0.875rem;
  font-size: 1rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .content-list__text {
    margin-top: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.8666666667;
  }
}

/* --------------------------------------------------------------
   .step ステップ（ご利用の流れ）
   -------------------------------------------------------------- */
.step__item {
  position: relative;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  padding-bottom: 3rem;
}
.step__item:first-child {
  margin-top: 0;
}
.step__item:last-child {
  padding-bottom: 0;
}
@media screen and (max-width: 767px) {
  .step__item {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
}

/* ステップをつなぐ縦線 */
.step__item:not(:last-child)::before {
  position: absolute;
  top: 7rem;
  bottom: 1rem;
  left: 3.4375rem;
  width: 0.125rem;
  background-color: #e8f2f9;
  content: "";
}
@media screen and (max-width: 767px) {
  .step__item:not(:last-child)::before {
    top: 4.5rem;
    bottom: 0.5rem;
    left: 2.1875rem;
  }
}

.step__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  font-family: "Poppins", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
  background-color: #30719b;
  border-radius: 50%;
}
@media screen and (max-width: 767px) {
  .step__num {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 0.6875rem;
  }
}

.step__num-value {
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .step__num-value {
    font-size: 1.3125rem;
  }
}

.step__body {
  padding-top: 1rem;
}
@media screen and (max-width: 767px) {
  .step__body {
    padding-top: 0.375rem;
  }
}

.step__title {
  font-size: 1.4375rem;
  line-height: 1.5652173913;
}
@media screen and (max-width: 767px) {
  .step__title {
    font-size: 1.125rem;
    line-height: 1.6666666667;
  }
}

.step__text {
  margin-top: 0.875rem;
  font-size: 1rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .step__text {
    margin-top: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.8666666667;
  }
}

/* --------------------------------------------------------------
   .faq アコーディオン（details / summary で実装。JS不要）
   -------------------------------------------------------------- */
.faq__cat {
  margin-top: 3.5rem;
}
.faq__cat:first-child {
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  .faq__cat {
    margin-top: 2.25rem;
  }
}

.faq__cat-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.3125rem;
  line-height: 1.619047619;
}
@media screen and (max-width: 767px) {
  .faq__cat-title {
    font-size: 1.125rem;
  }
}

.faq__cat-title::before {
  flex-shrink: 0;
  width: 0.375rem;
  height: 1.5rem;
  background-color: #3e8fc4;
  border-radius: 62.4375rem;
  content: "";
}

.faq__list {
  margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  .faq__list {
    margin-top: 1rem;
  }
}

.faq__item {
  margin-top: 1rem;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 1.5rem rgba(31, 78, 110, 0.08);
}
.faq__item:first-child {
  margin-top: 0;
}

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 4rem 1.5rem 1.75rem;
  position: relative;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.7647058824;
  color: #1f4e6e;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media screen and (max-width: 767px) {
  .faq__q {
    gap: 0.75rem;
    padding: 1rem 3rem 1rem 1rem;
    font-size: 1rem;
  }
}
@media (hover: hover) {
  .faq__q:hover {
    background-color: #e8f2f9;
  }
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q:focus-visible {
  outline: 0.1875rem solid #f0a143;
  outline-offset: 0.1875rem;
}

.faq__q-mark {
  flex-shrink: 0;
  font-family: "Poppins", sans-serif;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.4;
  color: #30719b;
}
@media screen and (max-width: 767px) {
  .faq__q-mark {
    font-size: 1.125rem;
  }
}

/* 開閉アイコン */
.faq__q::after {
  position: absolute;
  top: 1.875rem;
  right: 1.75rem;
  width: 0.875rem;
  height: 0.875rem;
  border-bottom: 0.125rem solid #30719b;
  border-right: 0.125rem solid #30719b;
  content: "";
  transform: rotate(45deg);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media screen and (max-width: 767px) {
  .faq__q::after {
    top: 1.375rem;
    right: 1.125rem;
  }
}

.faq__item[open] .faq__q::after {
  transform: rotate(-135deg);
}

.faq__a {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.25rem 1.75rem 1.75rem;
  font-size: 1rem;
  line-height: 1.875;
}
@media screen and (max-width: 767px) {
  .faq__a {
    gap: 0.75rem;
    padding: 0.25rem 1rem 1.125rem;
    font-size: 0.9375rem;
    line-height: 1.8666666667;
  }
}

.faq__a-mark {
  flex-shrink: 0;
  font-family: "Poppins", sans-serif;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.4;
  color: #a7610d;
}
@media screen and (max-width: 767px) {
  .faq__a-mark {
    font-size: 1.125rem;
  }
}

/* --------------------------------------------------------------
   .local-nav 事業ページの相互リンク
   -------------------------------------------------------------- */
.local-nav__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
@media screen and (max-width: 1024px) {
  .local-nav__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .local-nav__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
}

.local-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  height: 100%;
  padding: 1.25rem 1.5rem;
  background-color: #ffffff;
  border-radius: 0.75rem;
  border-left: 0.25rem solid var(--business-color, #3e8fc4);
  box-shadow: 0 0.25rem 1.5rem rgba(31, 78, 110, 0.08);
  transition: box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media screen and (max-width: 767px) {
  .local-nav__link {
    padding: 1rem 1.125rem;
  }
}
@media (hover: hover) {
  .local-nav__link:hover {
    box-shadow: 0 0.75rem 2rem rgba(31, 78, 110, 0.14);
    transform: translateY(-0.25rem);
  }
}

.local-nav__item--current .local-nav__link {
  background-color: #e8f2f9;
  box-shadow: none;
  pointer-events: none;
}

/* 現在のページは事業カラーではなく濃紺で表示する
   （淡い青の面に事業カラーを載せるとコントラストが不足するため） */
.local-nav__item--current .local-nav__cat {
  color: #1f4e6e;
}

.local-nav__cat {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--business-color-dark, #30719b);
}

.local-nav__name {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.625;
  color: #1f4e6e;
}

/* --------------------------------------------------------------
   .info-card 事業所情報カード（住所・電話・時間・地図のセット）
   -------------------------------------------------------------- */
.info-card {
  overflow: hidden;
  background-color: #ffffff;
  border: 0.0625rem solid #e2ded7;
  border-radius: 1.5rem;
}

.info-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.125rem 1.75rem;
  background-color: var(--business-color-dark, #30719b);
}
@media screen and (max-width: 767px) {
  .info-card__head {
    padding: 0.875rem 1.125rem;
  }
}

.info-card__name {
  font-size: 1.1875rem;
  line-height: 1.5789473684;
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .info-card__name {
    font-size: 1.0625rem;
  }
}

.info-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 2rem;
  padding: 1.75rem;
}
@media screen and (max-width: 767px) {
  .info-card__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.125rem;
  }
}

.info-card__map {
  overflow: hidden;
  border-radius: 0.75rem;
}
.info-card__map > iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 15rem;
  border: none;
}
@media screen and (max-width: 767px) {
  .info-card__map > iframe {
    min-height: 12.5rem;
  }
}

/* --------------------------------------------------------------
   .cta-band 全下層共通のお問い合わせバンド
   -------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background-color: #1f4e6e;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .cta-band {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

.cta-band__deco-1 {
  top: -8.75rem;
  right: -6.25rem;
  width: 22.5rem;
  height: 22.5rem;
  background-color: rgba(255, 255, 255, 0.06);
}

.cta-band__deco-2 {
  bottom: -10rem;
  left: -6.875rem;
  width: 18.75rem;
  height: 18.75rem;
  background-color: rgba(240, 161, 67, 0.12);
}

.cta-band__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .cta-band__inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.cta-band__en {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: "Poppins", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #30719b;
}
@media screen and (max-width: 767px) {
  .cta-band__en {
    font-size: 0.75rem;
  }
}
.cta-band__en {
  justify-content: center;
  color: #ffffff;
}
.cta-band__en::before, .cta-band__en::after {
  flex-shrink: 0;
  width: 1.75rem;
  height: 0.125rem;
  background-color: currentColor;
  border-radius: 62.4375rem;
  content: "";
}

.cta-band__title {
  margin-top: 1.125rem;
  font-size: 2rem;
  line-height: 1.625;
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .cta-band__title {
    margin-top: 0.75rem;
    font-size: 1.375rem;
    line-height: 1.6363636364;
  }
}

.cta-band__text {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.875;
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .cta-band__text {
    margin-top: 0.875rem;
    font-size: 0.9375rem;
  }
}

.cta-band__tel {
  margin-top: 1.75rem;
}
@media screen and (max-width: 767px) {
  .cta-band__tel {
    margin-top: 1.25rem;
  }
}

.cta-band__tel .tel {
  font-size: 2.75rem;
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .cta-band__tel .tel {
    font-size: 1.875rem;
  }
}

.cta-band__tel .tel__note {
  color: rgba(255, 255, 255, 0.82);
}

.cta-band__btns {
  margin-top: 1.75rem;
}
@media screen and (max-width: 767px) {
  .cta-band__btns {
    margin-top: 1.25rem;
  }
}

/* --------------------------------------------------------------
   .form お問い合わせフォーム
   -------------------------------------------------------------- */
.form__list {
  border-top: 0.0625rem solid #e2ded7;
}

.form__row {
  display: grid;
  grid-template-columns: 16.25rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 0.0625rem solid #e2ded7;
}
@media screen and (max-width: 767px) {
  .form__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

.form__label {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  padding-top: 0.875rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: #1f4e6e;
}
@media screen and (max-width: 767px) {
  .form__label {
    padding-top: 0;
    font-size: 0.9375rem;
  }
}

.form__required {
  flex-shrink: 0;
  padding: 0.125rem 0.625rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  color: #ffffff;
  background-color: #a7610d;
  border-radius: 62.4375rem;
}

.form__optional {
  flex-shrink: 0;
  padding: 0.125rem 0.625rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  color: #636c74;
  background-color: #faf7f2;
  border-radius: 62.4375rem;
}

.form__input,
.form__textarea,
.form__select {
  width: 100%;
  padding: 0.875rem 1.125rem;
  font-size: 1rem;
  line-height: 1.75;
  background-color: #ffffff;
  border: 0.0625rem solid #e2ded7;
  border-radius: 0.75rem;
  transition: border-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.form__input::placeholder,
.form__textarea::placeholder,
.form__select::placeholder {
  color: #636c74;
}
.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  border-color: #30719b;
  box-shadow: 0 0 0 0.1875rem rgba(62, 143, 196, 0.2);
  outline: none;
}

.form__textarea {
  min-height: 12.5rem;
  resize: vertical;
}

/* selectの矢印 */
.form__select-wrap {
  position: relative;
}

.form__select-wrap::after {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 0.625rem;
  height: 0.625rem;
  border-bottom: 0.125rem solid #30719b;
  border-right: 0.125rem solid #30719b;
  content: "";
  transform: translateY(-0.25rem) rotate(45deg);
  pointer-events: none;
}

.form__select {
  padding-right: 3rem;
  cursor: pointer;
}

.form__note {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.6923076923;
  color: #636c74;
}

.form__radio-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding-top: 0.875rem;
}
@media screen and (max-width: 767px) {
  .form__radio-list {
    gap: 0.625rem;
    padding-top: 0.25rem;
  }
}

.form__radio {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  line-height: 1.6;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .form__radio {
    font-size: 0.9375rem;
  }
}

.form__radio-input {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  background-color: #ffffff;
  border: 0.0625rem solid #e2ded7;
  border-radius: 50%;
  transition: border-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.form__radio-input:checked {
  border-color: #30719b;
  border-width: 0.4375rem;
}
.form__radio-input:focus-visible {
  outline: 0.1875rem solid #f0a143;
  outline-offset: 0.1875rem;
}

/* 個人情報の取り扱い */
.form__privacy {
  margin-top: 2.5rem;
  padding: 1.75rem 2rem;
  background-color: #faf7f2;
  border-radius: 0.75rem;
}
@media screen and (max-width: 767px) {
  .form__privacy {
    margin-top: 1.75rem;
    padding: 1.125rem;
  }
}

.form__privacy-title {
  font-size: 1.0625rem;
  line-height: 1.6470588235;
}
@media screen and (max-width: 767px) {
  .form__privacy-title {
    font-size: 1rem;
  }
}

.form__privacy-text {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.8571428571;
}

.form__check {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.25rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.625;
  color: #1f4e6e;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .form__check {
    font-size: 0.9375rem;
  }
}

.form__check-input {
  flex-shrink: 0;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #ffffff;
  border: 0.0625rem solid #e2ded7;
  border-radius: 0.25rem;
  transition: background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.form__check-input:checked {
  background-color: #30719b;
  border-color: #30719b;
}
.form__check-input:checked::after {
  position: absolute;
  top: 0.25rem;
  left: 0.4375rem;
  width: 0.4375rem;
  height: 0.8125rem;
  border-bottom: 0.125rem solid #ffffff;
  border-right: 0.125rem solid #ffffff;
  content: "";
  transform: rotate(45deg);
}
.form__check-input:focus-visible {
  outline: 0.1875rem solid #f0a143;
  outline-offset: 0.1875rem;
}

.form__submit {
  margin-top: 2.5rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .form__submit {
    margin-top: 1.75rem;
  }
}

.form__submit-note {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: #636c74;
}

/* --------------------------------------------------------------
   .post お知らせ一覧
   -------------------------------------------------------------- */
/* 絞り込みチップ
   ベタ塗りの帯だと重く見えるため、白地＋事業カラーのドットで軽くする。
   選択中は事業カラーの淡い面＋濃色文字＋太い枠線で示す */
.post__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.post__cat-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5625rem 1.125rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
  color: #1f4e6e;
  background-color: #ffffff;
  border: 0.125rem solid #e2ded7;
  border-radius: 62.4375rem;
  transition: color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
  .post__cat-link:hover {
    background-color: var(--business-pale, #e8f2f9);
    border-color: var(--business-color, #3e8fc4);
  }
}

/* 事業カラーのドット */
.post__cat-link::before {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--business-color, #3e8fc4);
  border-radius: 50%;
  content: "";
}

/* 「すべて」はドットの代わりに4色のグラデーションにする */
.post__cat-item--all .post__cat-link::before {
  background: conic-gradient(#3e8fc4 0deg 90deg, #6fae8f 90deg 180deg, #e8c15a 180deg 270deg, #e58a7a 270deg 360deg);
}

.post__cat-item--current .post__cat-link {
  color: var(--business-color-dark, #1f4e6e);
  background-color: var(--business-pale, #e8f2f9);
  border-color: var(--business-color, #3e8fc4);
  pointer-events: none;
}

.post__cat-item--all.post__cat-item--current .post__cat-link {
  color: #1f4e6e;
}

/* 件数バッジ */
.post__cat-count {
  font-family: "Poppins", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #636c74;
}

.post__cat-item--current .post__cat-count {
  color: inherit;
}

.post__list {
  margin-top: 2.5rem;
  background-color: #ffffff;
  border-radius: 1.5rem;
  box-shadow: 0 0.25rem 1.5rem rgba(31, 78, 110, 0.08);
}
@media screen and (max-width: 767px) {
  .post__list {
    margin-top: 1.5rem;
  }
}

.post__item {
  border-top: 0.0625rem solid #e2ded7;
}
.post__item:first-child {
  border-top: none;
}

.post__link {
  display: grid;
  grid-template-columns: 7.5rem 8.75rem minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 2rem;
}
@media screen and (max-width: 767px) {
  .post__link {
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    padding: 1.125rem;
  }
}
@media (hover: hover) {
  .post__link:hover {
    background-color: #e8f2f9;
  }
  .post__link:hover .post__title {
    color: #30719b;
  }
}

.post__date {
  font-family: "Poppins", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #636c74;
}

/* カテゴリ表示
   一覧・カード・詳細で共通。ベタ塗りをやめ、
   事業カラーのドット＋濃色文字＋淡い面の軽い表現に統一する */
.post__cat {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.75rem 0.1875rem 0.625rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--business-color-dark, #30719b);
  background-color: var(--business-pale, #e8f2f9);
  border-radius: 62.4375rem;
}

.post__cat::before {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--business-color, #3e8fc4);
  border-radius: 50%;
  content: "";
}

.post__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.625;
  color: #1f4e6e;
  transition: color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media screen and (max-width: 767px) {
  .post__title {
    grid-column: 1/-1;
    font-size: 0.9375rem;
  }
}

/* ページネーション */
.pager {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .pager {
    margin-top: 2rem;
  }
}

.pager__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: 3rem;
  padding: 0.25rem 0.75rem;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1f4e6e;
  background-color: #ffffff;
  border: 0.0625rem solid #e2ded7;
  border-radius: 0.75rem;
  transition: color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
  .pager__link:hover {
    color: #ffffff;
    background-color: #30719b;
    border-color: #30719b;
  }
}

.pager__item--current .pager__link {
  color: #ffffff;
  background-color: #30719b;
  border-color: #30719b;
  pointer-events: none;
}

/* --------------------------------------------------------------
   .article お知らせ詳細
   -------------------------------------------------------------- */
.article__head {
  padding-bottom: 1.75rem;
  border-bottom: 0.125rem solid #e8f2f9;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.article__title {
  margin-top: 1.125rem;
  font-size: 2rem;
  line-height: 1.625;
}
@media screen and (max-width: 767px) {
  .article__title {
    margin-top: 0.75rem;
    font-size: 1.375rem;
    line-height: 1.6363636364;
  }
}

.article__body {
  margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
  .article__body {
    margin-top: 1.75rem;
  }
}

.article__back {
  margin-top: 3.5rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .article__back {
    margin-top: 2.25rem;
  }
}

/* --------------------------------------------------------------
   .sitemap サイトマップ
   -------------------------------------------------------------- */
.sitemap__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}
@media screen and (max-width: 1024px) {
  .sitemap__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .sitemap__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
}

.sitemap__title {
  padding-bottom: 0.75rem;
  font-size: 1.1875rem;
  line-height: 1.5789473684;
  border-bottom: 0.125rem solid #e8f2f9;
}
@media screen and (max-width: 767px) {
  .sitemap__title {
    font-size: 1.0625rem;
  }
}

.sitemap__child {
  margin-top: 1rem;
}

.sitemap__child-item {
  margin-top: 0.75rem;
}
.sitemap__child-item:first-child {
  margin-top: 0;
}

.sitemap__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.7333333333;
}
@media (hover: hover) {
  .sitemap__link:hover {
    color: #30719b;
    text-decoration: underline;
  }
}

.sitemap__link::before {
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-top: 0.0625rem solid #3e8fc4;
  border-right: 0.0625rem solid #3e8fc4;
  content: "";
  transform: translateY(-0.1875rem) rotate(45deg);
}

/* --------------------------------------------------------------
   .thanks サンクスページ
   -------------------------------------------------------------- */
.thanks {
  text-align: center;
}

.thanks__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  margin-right: auto;
  margin-left: auto;
  color: #ffffff;
  background-color: #30719b;
  border-radius: 50%;
}
@media screen and (max-width: 767px) {
  .thanks__icon {
    width: 4.5rem;
    height: 4.5rem;
  }
}

.thanks__icon > svg {
  width: 2.75rem;
  height: 2.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}
@media screen and (max-width: 767px) {
  .thanks__icon > svg {
    width: 2rem;
    height: 2rem;
  }
}

.thanks__title {
  margin-top: 1.75rem;
  font-size: 1.875rem;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .thanks__title {
    margin-top: 1.25rem;
    font-size: 1.375rem;
    line-height: 1.6363636364;
  }
}

.thanks__text {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 2;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .thanks__text {
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.8666666667;
  }
}

.thanks__btn {
  margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
  .thanks__btn {
    margin-top: 1.75rem;
  }
}

/* --------------------------------------------------------------
   事業カラーの淡い面（page-head の背景に使用）
   -------------------------------------------------------------- */
.is-soranoiro {
  --business-color-pale: rgb(90.9176470588%, 94.7294117647%, 97.2235294118%);
}

.is-nikasa {
  --business-color-pale: rgb(93.2235294118%, 96.1882352941%, 94.7294117647%);
}

.is-nichigetsu {
  --business-color-pale: rgb(98.9176470588%, 97.0823529412%, 92.2352941176%);
}

.is-sansan {
  --business-color-pale: rgb(98.7764705882%, 94.4941176471%, 93.7411764706%);
}

/* --------------------------------------------------------------
   .check 要確認・要取材マーカー
   クライアント確認前の箇所を目視で分かるようにする一時的な装飾。
   確定後は class="check" ごと削除する（"check" で全文検索すれば洗い出せる）
   -------------------------------------------------------------- */
.check {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.7;
  color: #8a4f09;
  background-color: #fdf1e2;
  border: 0.0625rem dashed #f0a143;
  border-radius: 0.25rem;
}

/* --------------------------------------------------------------
   .article__eyecatch アイキャッチ画像
   -------------------------------------------------------------- */
.article__eyecatch {
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  border-radius: 1.5rem;
}
.article__eyecatch > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .article__eyecatch {
    margin-top: 1.25rem;
  }
}

/* --------------------------------------------------------------
   .wysiwyg 内の画像
   WordPressのエディタから挿入される画像を想定したパターン。
   ・単体          → figure.wysiwyg__figure
   ・幅いっぱい    → figure.wysiwyg__figure--wide
   ・2枚並び       → div.wysiwyg__figures > figure
   キャプションは figcaption に入れる（省略可）
   -------------------------------------------------------------- */
.wysiwyg__figure {
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .wysiwyg__figure {
    margin-top: 1.5rem;
  }
}

.wysiwyg__figure-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/2;
  border-radius: 0.75rem;
}
.wysiwyg__figure-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wysiwyg__figure-img--square {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  border-radius: 0.75rem;
}
.wysiwyg__figure-img--square > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wysiwyg__figure-img--wide {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  border-radius: 0.75rem;
}
.wysiwyg__figure-img--wide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 本文幅より少し広く見せる（PCのみ） */
@media screen and (min-width: 1025px) {
  .wysiwyg__figure--wide {
    margin-right: -3.75rem;
    margin-left: -3.75rem;
  }
}

.wysiwyg__caption {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.6923076923;
  color: #636c74;
}

/* 2枚並び */
.wysiwyg__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .wysiwyg__figures {
    gap: 0.75rem;
    margin-top: 1.5rem;
  }
}

.wysiwyg__figures > .wysiwyg__figure {
  margin-top: 0;
}

/* ==========================================================================
   ヘッダー

   【ナビの出し方】
   ベースはドロワー（ハンバーガーメニュー）。
   文字サイズ「標準」で、横一列が収まる幅（下記 $bp-nav）を超えたときだけ
   ロゴ＋グロナビ＋CTAの横並びにする。
   横並びに必要な実幅（ロゴ＋ナビ＋CTA＋左右余白）は実測で 1254px なので、
   少し余裕を足した値をしきい値にしている。
   ナビ項目やCTAの文言を増やしたときは、この数値も見直すこと。

   文字サイズ「大」（html.is-font-lg）は、幅にかかわらず**常にドロワー**。
   ナビもCTAも一緒に大きくなり、横一列にすると窮屈になるため。

   文字サイズ切替のボタン（.utility）は、
   ドロワー／横並びのどちらでも、またSPでも**常に表示**する。 */
/* 横並びナビに切り替えるしきい値（文字サイズ「標準」のみ） */
.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  background-color: #ffffff;
  transition: box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* backdrop-filter は position: fixed の子要素の基準（包含ブロック）に
     なってしまい、ドロワー（.header__nav）が画面全高に広がらなくなるため、
     ドロワーを使わない横並びナビ時のみ適用する（下部の nav-horizontal 参照） */
}

.header.is-scrolled {
  box-shadow: 0 0.125rem 1rem rgba(31, 78, 110, 0.08);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4rem;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .header__inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

/* --------------------------------------------------------------
   ロゴ
   -------------------------------------------------------------- */
.header__logo {
  flex-shrink: 0;
}

.header__logo-link {
  /* マーク＋テキストのロックアップなので、幅は中身に合わせる
     （画像ロゴだったときの固定幅指定は外した） */
  display: inline-block;
}
@media (hover: hover) {
  .header__logo-link:hover {
    opacity: 0.7;
  }
}

/* --------------------------------------------------------------
   ナビゲーション
   ベースはドロワー（画面いっぱいに開くパネル）
   -------------------------------------------------------------- */
.header__nav {
  position: fixed;
  top: 6rem;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  padding-top: 2rem;
  padding-bottom: 3rem;
  background-color: #ffffff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.75rem);
  transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* ユーティリティ行の分だけ下げる（PCとSPで行の高さが違う） */
}
@media screen and (min-width: 1025px) {
  .header__nav {
    top: 6.25rem;
  }
}

.header__nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.header__nav-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .header__nav-list {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.header__nav-item {
  border-bottom: 0.0625rem solid #e2ded7;
}

.header__nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1f4e6e;
}
@media (hover: hover) {
  .header__nav-link:hover {
    color: #30719b;
  }
}

.header__nav-link::before {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #30719b;
  border-radius: 50%;
  content: "";
}

.header__nav-link.is-current {
  color: #30719b;
  pointer-events: none;
}

/* --------------------------------------------------------------
   ヘッダーCTA（横並びナビ時のみ表示）
   -------------------------------------------------------------- */
.header__cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.header__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 3rem;
  padding: 0.5rem 1.125rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 62.4375rem;
  transition: background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.header__cta-btn--contact {
  color: #ffffff;
  background-color: #a7610d;
}
@media (hover: hover) {
  .header__cta-btn--contact:hover {
    background-color: #8a4f09;
    transform: translateY(-0.125rem);
  }
}

.header__cta-btn--recruit {
  color: #1f4e6e;
  background-color: #e8f2f9;
}
@media (hover: hover) {
  .header__cta-btn--recruit:hover {
    color: #ffffff;
    background-color: #30719b;
    transform: translateY(-0.125rem);
  }
}

.header__cta-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* ドロワー内のCTA・電話・文字サイズ */
.header__nav-cta {
  margin-top: 2rem;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .header__nav-cta {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.header__nav-tel {
  margin-top: 1.75rem;
  text-align: center;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .header__nav-tel {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

/* --------------------------------------------------------------
   ハンバーガーボタン
   -------------------------------------------------------------- */
.header__burger {
  position: relative;
  z-index: 1;
  display: block;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
}

.header__burger-bar {
  position: absolute;
  right: 0.5625rem;
  left: 0.5625rem;
  height: 0.125rem;
  background-color: #1f4e6e;
  border-radius: 62.4375rem;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.header__burger-bar:nth-of-type(1) {
  top: 0.875rem;
}
.header__burger-bar:nth-of-type(2) {
  top: 1.3125rem;
}
.header__burger-bar:nth-of-type(3) {
  top: 1.75rem;
}

.header__burger.is-open .header__burger-bar:nth-of-type(1) {
  transform: translateY(0.4375rem) rotate(37deg);
}
.header__burger.is-open .header__burger-bar:nth-of-type(2) {
  opacity: 0;
}
.header__burger.is-open .header__burger-bar:nth-of-type(3) {
  transform: translateY(-0.4375rem) rotate(-37deg);
}

.header__burger-text {
  position: absolute;
  right: 0;
  bottom: -0.125rem;
  left: 0;
  font-family: "Poppins", sans-serif;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.06em;
  color: #1f4e6e;
}

/* --------------------------------------------------------------
   SP下部固定バー
   -------------------------------------------------------------- */
.fixedbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  display: none;
  background-color: #ffffff;
  box-shadow: 0 -0.125rem 1rem rgba(31, 78, 110, 0.12);
}
@media screen and (max-width: 767px) {
  .fixedbar {
    display: block;
  }
}

.fixedbar__list {
  display: flex;
}

.fixedbar__item {
  flex: 1 1 0;
}
.fixedbar__item + .fixedbar__item {
  border-left: 0.0625rem solid #e2ded7;
}

.fixedbar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 3.75rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1f4e6e;
}

.fixedbar__link--tel {
  color: #ffffff;
  background-color: #a7610d;
}

.fixedbar__link--recruit {
  color: #ffffff;
  background-color: #30719b;
}

.fixedbar__icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* ==========================================================================
   ヘッダー上部のユーティリティ行（文字サイズ変更）
   横並びナビ時のみ表示。ドロワー時はドロワー内に同じ部品を置いている
   ========================================================================== */
/* 文字サイズ切替は「いつでも押せる」ことが大事なので、
   ドロワー／横並び、PC／SPを問わず常に表示する */
.utility {
  background-color: #e8f2f9;
}

.utility__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 2.25rem;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .utility__inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}
@media screen and (max-width: 1024px) {
  .utility__inner {
    height: 2rem;
  }
}

/* --------------------------------------------------------------
   .fontsize 文字サイズ切り替え
   -------------------------------------------------------------- */
.fontsize {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
@media screen and (max-width: 1024px) {
  .fontsize {
    gap: 0.5rem;
  }
}

.fontsize__label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1f4e6e;
}
@media screen and (max-width: 1024px) {
  .fontsize__label {
    gap: 0.25rem;
    font-size: 0.75rem;
  }
}

.fontsize__label-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
@media screen and (max-width: 1024px) {
  .fontsize__label-icon {
    width: 0.875rem;
    height: 0.875rem;
  }
}

.fontsize__list {
  display: flex;
  gap: 0.25rem;
}

.fontsize__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  min-height: 1.625rem;
  padding: 0.125rem 0.625rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1f4e6e;
  background-color: #ffffff;
  border: 0.0625rem solid rgba(31, 78, 110, 0.2);
  border-radius: 62.4375rem;
  transition: color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* SPでも押しやすい高さは確保しつつ、行の高さに収まるサイズにする */
}
@media screen and (max-width: 1024px) {
  .fontsize__btn {
    min-width: 2.875rem;
    min-height: 1.5rem;
    padding: 0.125rem 0.5rem;
  }
}
@media (hover: hover) {
  .fontsize__btn:hover {
    color: #ffffff;
    background-color: #30719b;
    border-color: #30719b;
  }
}

/* 選択中（aria-pressed="true"） */
.fontsize__btn[aria-pressed=true] {
  color: #ffffff;
  background-color: #30719b;
  border-color: #30719b;
  cursor: default;
}

/* 段階が上がるほどボタンの文字も大きく見せる */
.fontsize__btn--lg {
  font-size: 0.9375rem;
}

/* ==========================================================================
   横並びナビ（PC・文字サイズ「標準」のみ）
   「大」のときは常にドロワーにするので、
   html:not(.is-font-lg) をスコープにしている
   ========================================================================== */
@media screen and (min-width: 1280px) {
  html:not(.is-font-lg) .header {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(0.625rem);
  }
  html:not(.is-font-lg) {
    /* ヘッダーの最大幅だけは rem で持つ。
       .inner() の max-width は px 固定（文字サイズを上げても
       本文の段組みが広がらないようにするため）だが、
       ヘッダーは中身（ナビ・CTA）が文字サイズと一緒に大きくなるので、
       器も同じ比率で広がらないと横一列が収まらなくなる */
  }
  html:not(.is-font-lg) .header__inner,
  html:not(.is-font-lg) .utility__inner {
    max-width: 87.5rem;
  }
  html:not(.is-font-lg) .header__inner {
    gap: 1.75rem;
    height: 3.75rem;
  }
  html:not(.is-font-lg) {
    /* ドロワーを解除して通常フローに戻す。
       margin-left: auto で余白を左に集めて、
       ナビとCTAを右側にまとめる（ロゴは左端に残る） */
  }
  html:not(.is-font-lg) .header__nav {
    position: static;
    overflow: visible;
    margin-left: auto;
    padding-top: 0;
    padding-bottom: 0;
    background-color: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  html:not(.is-font-lg) .header__nav-list {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: auto;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
  }
  html:not(.is-font-lg) .header__nav-item {
    border-bottom: none;
  }
  html:not(.is-font-lg) .header__nav-link {
    display: block;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  html:not(.is-font-lg) .header__nav-link::before {
    display: none;
  }
  html:not(.is-font-lg) .header__nav-link.is-current {
    position: relative;
  }
  html:not(.is-font-lg) .header__nav-link.is-current::after {
    position: absolute;
    right: 0;
    bottom: -0.5rem;
    left: 0;
    height: 0.125rem;
    background-color: currentColor;
    border-radius: 62.4375rem;
    content: "";
  }
  html:not(.is-font-lg) {
    /* ドロワー専用の部品を隠す */
  }
  html:not(.is-font-lg) .header__nav-cta,
  html:not(.is-font-lg) .header__nav-tel {
    display: none;
  }
  html:not(.is-font-lg) {
    /* ヘッダーCTAとハンバーガーの出し分け */
  }
  html:not(.is-font-lg) .header__cta {
    display: flex;
  }
  html:not(.is-font-lg) .header__burger {
    display: none;
  }
}
/* ==========================================================================
   フッター
   ========================================================================== */
.footer {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  background-color: #1f4e6e;
}

.footer__deco-1 {
  top: -8.75rem;
  right: -7.5rem;
  width: 26.25rem;
  height: 26.25rem;
  background-color: rgba(255, 255, 255, 0.04);
}

.footer__deco-2 {
  bottom: -11.25rem;
  left: -8.75rem;
  width: 22.5rem;
  height: 22.5rem;
  background-color: rgba(240, 161, 67, 0.1);
}

.footer__inner {
  position: relative;
  z-index: 1;
  padding-top: 5.5rem;
  padding-bottom: 2.5rem;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .footer__inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}
@media screen and (max-width: 767px) {
  .footer__inner {
    padding-top: 3.5rem;
    padding-bottom: 1.75rem;
  }
}

/* --------------------------------------------------------------
   フッター上段（会社情報＋ナビ）
   -------------------------------------------------------------- */
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 4rem;
}
@media screen and (max-width: 1024px) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.75rem;
  }
}

.footer__logo-link {
  /* マーク＋テキストのロックアップなので幅は中身に合わせる */
  display: inline-block;
}
@media (hover: hover) {
  .footer__logo-link:hover {
    opacity: 0.7;
  }
}

.footer__company {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.8666666667;
}

.footer__company-name {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
}

.footer__company-address {
  margin-top: 0.625rem;
}

.footer__company-tel {
  margin-top: 0.875rem;
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
}
@media (hover: hover) {
  .footer__company-tel:hover {
    opacity: 0.75;
  }
}

.footer__company-note {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------
   フッターナビ
   -------------------------------------------------------------- */
.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  .footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.footer__nav-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

.footer__nav-list {
  margin-top: 0.875rem;
}

.footer__nav-item {
  margin-top: 0.625rem;
}
.footer__nav-item:first-child {
  margin-top: 0;
}

.footer__nav-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}
@media (hover: hover) {
  .footer__nav-link:hover {
    color: #f7c489;
  }
}

.footer__nav-link::before {
  flex-shrink: 0;
  width: 0.3125rem;
  height: 0.3125rem;
  background-color: #f0a143;
  border-radius: 50%;
  content: "";
  transform: translateY(-0.1875rem);
}

/* --------------------------------------------------------------
   事業所一覧（4事業所）
   -------------------------------------------------------------- */
.footer__offices {
  margin-top: 4.5rem;
}
@media screen and (max-width: 767px) {
  .footer__offices {
    margin-top: 3rem;
  }
}

.footer__offices-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

.footer__offices-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.25rem;
}
@media screen and (max-width: 1024px) {
  .footer__offices-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .footer__offices-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}

.footer__office {
  padding-top: 1.25rem;
  border-top: 0.1875rem solid var(--business-color, #f0a143);
}

.footer__office-name {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.625;
  color: #ffffff;
}

.footer__office-data {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.7142857143;
  color: rgba(255, 255, 255, 0.82);
}

.footer__office-tel {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: #ffffff;
}
@media (hover: hover) {
  .footer__office-tel:hover {
    color: #f7c489;
  }
}

/* --------------------------------------------------------------
   フッター下段
   -------------------------------------------------------------- */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.2);
}
@media screen and (max-width: 767px) {
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 2.5rem;
  }
}

.footer__sub-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer__sub-link {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.82);
}
@media (hover: hover) {
  .footer__sub-link:hover {
    color: #f7c489;
  }
}

.footer__copyright {
  font-family: "Poppins", sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
}

/* --------------------------------------------------------------
   ページトップボタン
   -------------------------------------------------------------- */
.pagetop {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  color: #ffffff;
  background-color: #30719b;
  border-radius: 50%;
  box-shadow: 0 0.375rem 1.125rem rgba(31, 78, 110, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media screen and (max-width: 767px) {
  .pagetop {
    right: 0.875rem;
    bottom: 4.625rem;
    width: 2.875rem;
    height: 2.875rem;
  }
}
@media (hover: hover) {
  .pagetop:hover {
    background-color: #1f4e6e;
    transform: translateY(-0.25rem);
  }
}

.pagetop.is-visible {
  opacity: 1;
  visibility: visible;
}

.pagetop__icon {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* page ------------------------------------------------------------------ */
/* ==========================================================================
   TOPページ
   ========================================================================== */
/* --------------------------------------------------------------
   メインビジュアル
   -------------------------------------------------------------- */
.mv {
  position: relative;
  overflow: hidden;
  padding-top: 10.5rem;
  padding-bottom: 5.5rem;
  background-color: #ffffff;
}
@media screen and (max-width: 1024px) {
  .mv {
    padding-top: 9rem;
  }
}
@media screen and (max-width: 767px) {
  .mv {
    padding-top: 8rem;
    padding-bottom: 4rem;
  }
}

/* 色のついたシェイプ（白い余白の中に置く） */
.mv__deco-1 {
  top: -11.25rem;
  right: -10rem;
  width: 38.75rem;
  height: 38.75rem;
}
@media screen and (max-width: 767px) {
  .mv__deco-1 {
    top: -7.5rem;
    right: -11.25rem;
    width: 23.75rem;
    height: 23.75rem;
  }
}

.mv__deco-2 {
  right: 38%;
  bottom: 2.5rem;
  width: 11.25rem;
  height: 11.25rem;
}
@media screen and (max-width: 1024px) {
  .mv__deco-2 {
    display: none;
  }
}

.mv__deco-3 {
  top: 12.5rem;
  left: -5.625rem;
  width: 16.25rem;
  height: 16.25rem;
}
@media screen and (max-width: 767px) {
  .mv__deco-3 {
    top: auto;
    bottom: -3.75rem;
    left: -4.375rem;
    width: 10.625rem;
    height: 10.625rem;
  }
}

.mv__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: 4rem;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .mv__inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}
.mv__inner {
  /* 1カラムになる幅では「見出し → 説明 → 写真 → ボタン」の順にする。
     .mv__text-area を display: contents にして中身を直接グリッドの
     項目にし、order で並べ替えている（HTMLの構造はPCのまま） */
}
@media screen and (max-width: 1024px) {
  .mv__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
}

@media screen and (max-width: 1024px) {
  .mv__text-area {
    display: contents;
  }
  .mv__catch {
    order: 1;
  }
  .mv__sub {
    order: 2;
  }
  .mv__visual {
    order: 3;
    margin-top: 2.25rem;
  }
  .mv__btns {
    order: 4;
  }
}
.mv__catch {
  font-size: 3.5rem;
  line-height: 1.5714285714;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 1025px) {
  .mv__catch {
    font-size: clamp(2.5rem, 3.6vw, 3.5rem);
  }
}
@media screen and (max-width: 1024px) {
  .mv__catch {
    font-size: 2.625rem;
    line-height: 1.619047619;
  }
}
@media screen and (max-width: 767px) {
  .mv__catch {
    font-size: 1.8125rem;
    line-height: 1.6551724138;
  }
}

.mv__catch-mark {
  position: relative;
  display: inline-block;
  z-index: 1;
  color: #3e8fc4;
}

.mv__catch-mark::after {
  position: absolute;
  right: -0.25rem;
  bottom: 0.25rem;
  left: -0.25rem;
  z-index: -1;
  height: 0.875rem;
  background-color: rgba(240, 161, 67, 0.32);
  border-radius: 62.4375rem;
  content: "";
}
@media screen and (max-width: 767px) {
  .mv__catch-mark::after {
    height: 0.625rem;
  }
}

.mv__sub {
  margin-top: 2rem;
  font-size: 1.0625rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .mv__sub {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.8666666667;
  }
}

.mv__btns {
  margin-top: 2.75rem;
}
@media screen and (max-width: 767px) {
  .mv__btns {
    margin-top: 1.75rem;
  }
}

/* MV画像（アーチ型マスク＋重ね合わせ） */
.mv__visual {
  position: relative;
}

.mv__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3.4;
  border-radius: 17.5rem 17.5rem 1.5rem 1.5rem;
}
.mv__img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv__img {
  /* 写真の明るい部分（カーテン・テーブル）が白背景に溶けてしまい、
     アーチの輪郭が途切れて見えるため、淡い影で形を出す */
  box-shadow: 0 0 0 0.0625rem rgba(31, 78, 110, 0.08), 0 0.625rem 2.25rem rgba(31, 78, 110, 0.13);
}
@media screen and (max-width: 767px) {
  .mv__img {
    border-radius: 11.25rem 11.25rem 1rem 1rem;
  }
}

.mv__img-sub {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
.mv__img-sub > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv__img-sub {
  /* img-wrap の position: relative を上書きしてメイン画像に重ねる */
  position: absolute;
  right: -1.5rem;
  bottom: -2.5rem;
  z-index: 1;
  width: 14.5rem;
  border: 0.5rem solid #ffffff;
  /* 白いリングが白背景と同化しないよう、リングの外にも影を落とす */
  box-shadow: 0 0 0 0.0625rem rgba(31, 78, 110, 0.08), 0 0.625rem 2.25rem rgba(31, 78, 110, 0.13);
}
@media screen and (max-width: 1024px) {
  .mv__img-sub {
    right: 0.5rem;
    bottom: -2rem;
    width: 11.25rem;
  }
}
@media screen and (max-width: 767px) {
  .mv__img-sub {
    width: 7.75rem;
    border-width: 0.3125rem;
  }
}

/* MV下の帯（電話番号を常に見える位置に） */
.mv__band {
  position: relative;
  z-index: 1;
  margin-top: 4.5rem;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .mv__band {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}
@media screen and (max-width: 767px) {
  .mv__band {
    margin-top: 3.5rem;
  }
}

.mv__band-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.75rem 3rem;
  background-color: #e8f2f9;
  border-radius: 1.5rem;
}
@media screen and (max-width: 1024px) {
  .mv__band-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
  }
}

.mv__band-text {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.6842105263;
  color: #1f4e6e;
}
@media screen and (max-width: 767px) {
  .mv__band-text {
    font-size: 1rem;
  }
}

.mv__band-tel {
  flex-shrink: 0;
}

/* --------------------------------------------------------------
   リード文（ヒーロー直下）
   -------------------------------------------------------------- */
.intro {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  padding-top: 8.75rem;
  padding-bottom: 8.75rem;
}
@media screen and (max-width: 767px) {
  .intro {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

.intro__deco-1 {
  top: 3.75rem;
  left: -7.5rem;
  width: 18.75rem;
  height: 18.75rem;
}
@media screen and (max-width: 767px) {
  .intro__deco-1 {
    display: none;
  }
}

.intro__deco-2 {
  right: -6.25rem;
  bottom: -5rem;
  width: 15rem;
  height: 15rem;
}
@media screen and (max-width: 767px) {
  .intro__deco-2 {
    display: none;
  }
}

.intro__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 880px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .intro__inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.intro__title {
  margin-top: 1.25rem;
  font-size: 1.875rem;
  line-height: 1.7333333333;
}
@media screen and (max-width: 767px) {
  .intro__title {
    font-size: 1.3125rem;
    line-height: 1.7142857143;
  }
}

.intro__text {
  margin-top: 2rem;
  font-size: 1rem;
  line-height: 2.125;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .intro__text {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.8666666667;
  }
}

.intro__btn {
  margin-top: 2.75rem;
}
@media screen and (max-width: 767px) {
  .intro__btn {
    margin-top: 1.75rem;
  }
}

/* --------------------------------------------------------------
   私たちにできること（4事業カード）
   -------------------------------------------------------------- */
.content {
  position: relative;
  overflow: hidden;
  background-color: #faf7f2;
  padding-top: 8.75rem;
  padding-bottom: 8.75rem;
}
@media screen and (max-width: 767px) {
  .content {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

.content__deco-1 {
  top: -7.5rem;
  right: -8.75rem;
  width: 26.25rem;
  height: 26.25rem;
}

.content__deco-2 {
  bottom: -10rem;
  left: -7.5rem;
  width: 21.25rem;
  height: 21.25rem;
}

.content__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .content__inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.content__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .content__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 2.25rem;
  }
}

.content__item {
  display: flex;
}

/* 事業カード */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 1.5rem;
  box-shadow: 0 0.25rem 1.5rem rgba(31, 78, 110, 0.08);
  transition: box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media screen and (max-width: 767px) {
  .service-card {
    padding: 1.25rem;
  }
}
@media (hover: hover) {
  .service-card:hover {
    box-shadow: 0 0.75rem 2rem rgba(31, 78, 110, 0.14);
    transform: translateY(-0.375rem);
  }
  .service-card:hover .service-card__img > img {
    transform: scale(1.06);
  }
}

.service-card__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  border-radius: 0.75rem;
}
.service-card__img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-card__img > img {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.service-card__label {
  position: absolute;
  top: 3rem;
  left: 3rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 1rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
  background-color: var(--business-color-dark, #30719b);
  border-radius: 62.4375rem;
}
@media screen and (max-width: 767px) {
  .service-card__label {
    top: 2rem;
    left: 2rem;
    font-size: 0.75rem;
  }
}

.service-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  .service-card__body {
    margin-top: 1.125rem;
  }
}

.service-card__title {
  font-size: 1.4375rem;
  line-height: 1.5652173913;
}
@media screen and (max-width: 767px) {
  .service-card__title {
    font-size: 1.1875rem;
    line-height: 1.5789473684;
  }
}

.service-card__area {
  margin-top: 0.5rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--business-color-dark, #30719b);
}

.service-card__text {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.8666666667;
}

/* カードの高さが揃うよう、リンクは常に下端に配置する */
.service-card__link {
  margin-top: auto;
  padding-top: 1.5rem;
}

.service-card__link-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-top: 1.25rem;
  border-top: 0.0625rem solid #e2ded7;
  width: 100%;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--business-color-dark, #30719b);
}

.service-card__link-icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.service-card:hover .service-card__link-icon {
  transform: translateX(0.25rem);
}

/* --------------------------------------------------------------
   選ばれる理由
   -------------------------------------------------------------- */
.reason {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  padding-top: 8.75rem;
  padding-bottom: 8.75rem;
}
@media screen and (max-width: 767px) {
  .reason {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

.reason__deco-1 {
  top: 7.5rem;
  right: -10rem;
  width: 25rem;
  height: 25rem;
}

.reason__deco-2 {
  top: 56%;
  left: -6.875rem;
  width: 13.75rem;
  height: 13.75rem;
}
@media screen and (max-width: 767px) {
  .reason__deco-2 {
    display: none;
  }
}

.reason__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .reason__inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.reason__list {
  margin-top: 4.5rem;
}
@media screen and (max-width: 767px) {
  .reason__list {
    margin-top: 2.25rem;
  }
}

.reason__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 4.5rem;
  margin-top: 6rem;
}
.reason__item:first-child {
  margin-top: 0;
}
@media screen and (max-width: 1024px) {
  .reason__item {
    gap: 2.5rem;
  }
}
@media screen and (max-width: 767px) {
  .reason__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
  }
}

/* 偶数番は画像を左に */
.reason__item:nth-child(even) .reason__visual {
  order: -1;
}
@media screen and (max-width: 767px) {
  .reason__item:nth-child(even) .reason__visual {
    order: 0;
  }
}

.reason__visual {
  position: relative;
}

.reason__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  border-radius: 1.5rem;
}
.reason__img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reason__num {
  position: absolute;
  top: -2rem;
  left: -1.5rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  font-family: "Poppins", sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background-color: #a7610d;
  border-radius: 50%;
  box-shadow: 0 0.5rem 1.25rem rgba(167, 97, 13, 0.34);
}
@media screen and (max-width: 767px) {
  .reason__num {
    top: -1.125rem;
    left: -0.5rem;
    width: 4rem;
    height: 4rem;
    font-size: 1.3125rem;
  }
}

.reason__title {
  font-size: 1.875rem;
  line-height: 1.6;
}
@media screen and (max-width: 1024px) {
  .reason__title {
    font-size: 1.5625rem;
  }
}
@media screen and (max-width: 767px) {
  .reason__title {
    font-size: 1.3125rem;
    line-height: 1.619047619;
  }
}

.reason__text {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .reason__text {
    margin-top: 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.8666666667;
  }
}

/* --------------------------------------------------------------
   こんなときはご相談ください
   -------------------------------------------------------------- */
.case {
  position: relative;
  overflow: hidden;
  background-color: #faf7f2;
  padding-top: 8.75rem;
  padding-bottom: 8.75rem;
}
@media screen and (max-width: 767px) {
  .case {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

.case__deco-1 {
  top: -6.25rem;
  left: -7.5rem;
  width: 22.5rem;
  height: 22.5rem;
}

.case__deco-2 {
  right: -8.125rem;
  bottom: -8.75rem;
  width: 20rem;
  height: 20rem;
}

.case__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .case__inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.case__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
  .case__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-top: 2rem;
  }
}

.case__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  font-size: 1rem;
  line-height: 1.75;
  background-color: #ffffff;
  border-radius: 0.75rem;
}
@media screen and (max-width: 767px) {
  .case__item {
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    font-size: 0.9375rem;
  }
}

.case__item-icon {
  flex-shrink: 0;
  width: 1.625rem;
  height: 1.625rem;
  margin-top: 0.125rem;
  fill: none;
  stroke: #f0a143;
  stroke-width: 2.4;
}
@media screen and (max-width: 767px) {
  .case__item-icon {
    width: 1.375rem;
    height: 1.375rem;
  }
}

/* 相談CTA */
.case__cta {
  margin-top: 3.5rem;
  padding: 3rem 3.5rem;
  text-align: center;
  background-color: #1f4e6e;
  border-radius: 1.5rem;
}
@media screen and (max-width: 767px) {
  .case__cta {
    margin-top: 2rem;
    padding: 1.75rem 1.25rem;
  }
}

.case__cta-text {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.7272727273;
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .case__cta-text {
    font-size: 1.125rem;
    line-height: 1.6666666667;
  }
}

.case__cta-tel {
  margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  .case__cta-tel {
    margin-top: 1rem;
  }
}

.case__cta-tel .tel {
  font-size: 2.75rem;
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .case__cta-tel .tel {
    font-size: 1.875rem;
  }
}

.case__cta-tel .tel__note {
  color: rgba(255, 255, 255, 0.78);
}

.case__cta-btn {
  margin-top: 1.75rem;
}
@media screen and (max-width: 767px) {
  .case__cta-btn {
    margin-top: 1.25rem;
  }
}

/* --------------------------------------------------------------
   ご利用の流れ（ダイジェスト）
   -------------------------------------------------------------- */
.flow {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  padding-top: 8.75rem;
  padding-bottom: 8.75rem;
}
@media screen and (max-width: 767px) {
  .flow {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

.flow__deco-1 {
  top: 5rem;
  right: -7.5rem;
  width: 18.75rem;
  height: 18.75rem;
}
@media screen and (max-width: 767px) {
  .flow__deco-1 {
    display: none;
  }
}

.flow__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .flow__inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.flow__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.5rem;
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .flow__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    margin-top: 2.25rem;
  }
}

.flow__item {
  position: relative;
  text-align: center;
}

/* ステップ間の矢印 */
.flow__item:not(:last-child)::after {
  position: absolute;
  top: 2.875rem;
  right: -2.25rem;
  width: 1rem;
  height: 1rem;
  border-top: 0.1875rem solid rgba(62, 143, 196, 0.4);
  border-right: 0.1875rem solid rgba(62, 143, 196, 0.4);
  content: "";
  transform: rotate(45deg);
}
@media screen and (max-width: 767px) {
  .flow__item:not(:last-child)::after {
    top: auto;
    right: 0;
    bottom: -1.75rem;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    transform: rotate(135deg);
  }
}

.flow__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  margin-right: auto;
  margin-left: auto;
  font-family: "Poppins", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  color: #1f4e6e;
  background-color: #e8f2f9;
  border-radius: 50%;
}
@media screen and (max-width: 767px) {
  .flow__num {
    width: 5rem;
    height: 5rem;
  }
}

.flow__num-value {
  font-size: 1.875rem;
}
@media screen and (max-width: 767px) {
  .flow__num-value {
    font-size: 1.5625rem;
  }
}

.flow__title {
  margin-top: 1.5rem;
  font-size: 1.3125rem;
  line-height: 1.619047619;
}
@media screen and (max-width: 767px) {
  .flow__title {
    margin-top: 1rem;
    font-size: 1.1875rem;
  }
}

.flow__text {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.8666666667;
  text-align: left;
}

.flow__btn {
  margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
  .flow__btn {
    margin-top: 2.5rem;
  }
}

/* --------------------------------------------------------------
   お知らせ
   -------------------------------------------------------------- */
.news {
  position: relative;
  overflow: hidden;
  background-color: #faf7f2;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .news {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

.news__deco-1 {
  top: -5.625rem;
  right: 10%;
  width: 15rem;
  height: 15rem;
}
@media screen and (max-width: 767px) {
  .news__deco-1 {
    display: none;
  }
}

.news__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 18.75rem minmax(0, 1fr);
  gap: 3.5rem;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .news__inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}
@media screen and (max-width: 1024px) {
  .news__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

@media screen and (max-width: 1024px) {
  .news__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
  }
}

.news__list {
  background-color: #ffffff;
  border-radius: 1.5rem;
  box-shadow: 0 0.25rem 1.5rem rgba(31, 78, 110, 0.08);
}

.news__item {
  border-top: 0.0625rem solid #e2ded7;
}
.news__item:first-child {
  border-top: none;
}

.news__link {
  display: grid;
  grid-template-columns: 6.875rem 7.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.75rem;
}
@media screen and (max-width: 767px) {
  .news__link {
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    padding: 1rem;
  }
}
@media (hover: hover) {
  .news__link:hover {
    background-color: #e8f2f9;
  }
  .news__link:hover .news__title {
    color: #30719b;
  }
}

.news__date {
  font-family: "Poppins", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #636c74;
}

/* カテゴリ表示は一覧ページ（.post__cat）と同じ、
   事業カラーのドット＋濃色文字＋淡い面に揃える */
.news__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.75rem 0.1875rem 0.625rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--business-color-dark, #30719b);
  background-color: var(--business-pale, #e8f2f9);
  border-radius: 62.4375rem;
}
@media screen and (max-width: 767px) {
  .news__cat {
    justify-self: start;
  }
}

.news__cat::before {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--business-color, #3e8fc4);
  border-radius: 50%;
  content: "";
}

.news__title {
  font-size: 1rem;
  line-height: 1.625;
  transition: color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media screen and (max-width: 767px) {
  .news__title {
    grid-column: 1/-1;
    font-size: 0.9375rem;
  }
}

.news__btn {
  margin-top: 2rem;
}
@media screen and (max-width: 1024px) {
  .news__btn {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------
   事業所一覧・アクセス
   -------------------------------------------------------------- */
.office {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  padding-top: 8.75rem;
  padding-bottom: 8.75rem;
}
@media screen and (max-width: 767px) {
  .office {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

.office__deco-1 {
  bottom: -8.75rem;
  left: -7.5rem;
  width: 22.5rem;
  height: 22.5rem;
}

.office__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .office__inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.office__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
  .office__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
  }
}

.office__item {
  overflow: hidden;
  border: 0.0625rem solid #e2ded7;
  border-radius: 1.5rem;
}

.office__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.125rem 1.75rem;
  background-color: var(--business-color-dark, #30719b);
}
@media screen and (max-width: 767px) {
  .office__head {
    padding: 0.875rem 1.125rem;
  }
}

.office__name {
  font-size: 1.1875rem;
  line-height: 1.5789473684;
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .office__name {
    font-size: 1.0625rem;
  }
}

.office__body {
  padding: 1.5rem 1.75rem 1.75rem;
}
@media screen and (max-width: 767px) {
  .office__body {
    padding: 1.125rem;
  }
}

.office__data {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.75rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.7333333333;
}
@media screen and (max-width: 767px) {
  .office__data {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.625rem 0.75rem;
    font-size: 0.875rem;
  }
}

.office__data-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  color: #1f4e6e;
}

.office__data-tel {
  font-family: "Poppins", sans-serif;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
  color: #a7610d;
}
@media (hover: hover) {
  .office__data-tel:hover {
    opacity: 0.75;
  }
}

.office__map {
  margin-top: 1.25rem;
  overflow: hidden;
  border-radius: 0.75rem;
}
.office__map > iframe {
  display: block;
  width: 100%;
  height: 12.5rem;
  border: none;
}
@media screen and (max-width: 767px) {
  .office__map > iframe {
    height: 11.25rem;
  }
}

/* --------------------------------------------------------------
   採用バナー
   -------------------------------------------------------------- */
.recruit-bnr {
  position: relative;
  overflow: hidden;
  background-color: #faf7f2;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .recruit-bnr {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

.recruit-bnr__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* max-width だけは px で持つ。
     文字サイズ変更（html のフォントサイズを拡大）を行うため、
     ここを rem にするとレイアウト幅まで一緒に広がり
     「文字が大きくなった感じ」が出なくなってしまう */
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}
@media screen and (max-width: 767px) {
  .recruit-bnr__inner {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

.recruit-bnr__body {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr);
  align-items: center;
  gap: 3.5rem;
  padding: 3.5rem 4rem;
  background-color: #30719b;
  border-radius: 1.5rem;
}
@media screen and (max-width: 1024px) {
  .recruit-bnr__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding: 2.5rem;
  }
}
@media screen and (max-width: 767px) {
  .recruit-bnr__body {
    padding: 1.75rem 1.25rem;
  }
}

.recruit-bnr__deco-1 {
  top: -7.5rem;
  right: -5rem;
  width: 18.75rem;
  height: 18.75rem;
  background-color: rgba(255, 255, 255, 0.12);
}

.recruit-bnr__deco-2 {
  bottom: -6.875rem;
  left: 44%;
  width: 13.75rem;
  height: 13.75rem;
  background-color: rgba(255, 255, 255, 0.1);
}
@media screen and (max-width: 1024px) {
  .recruit-bnr__deco-2 {
    display: none;
  }
}

.recruit-bnr__text-area {
  position: relative;
  z-index: 1;
}

.recruit-bnr__en {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: "Poppins", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #30719b;
}
@media screen and (max-width: 767px) {
  .recruit-bnr__en {
    font-size: 0.75rem;
  }
}
.recruit-bnr__en {
  color: #ffffff;
}
.recruit-bnr__en::before {
  flex-shrink: 0;
  width: 1.75rem;
  height: 0.125rem;
  background-color: currentColor;
  border-radius: 62.4375rem;
  content: "";
}

.recruit-bnr__title {
  margin-top: 1.125rem;
  font-size: 1.875rem;
  line-height: 1.6666666667;
  color: #ffffff;
}
@media screen and (max-width: 1024px) {
  .recruit-bnr__title {
    font-size: 1.6875rem;
  }
}
.recruit-bnr__title {
  /* 「「誰かのためになる仕事」を、」が1行に収まるサイズ。
     320px幅でも収まるよう画面幅に応じて縮める。
     文言を変えるときはここも確認する */
}
@media screen and (max-width: 767px) {
  .recruit-bnr__title {
    margin-top: 0.75rem;
    font-size: clamp(1rem, 5.3vw, 1.25rem);
    line-height: 1.7;
  }
}

.recruit-bnr__text {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.875;
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .recruit-bnr__text {
    margin-top: 0.875rem;
    font-size: 0.9375rem;
  }
}

.recruit-bnr__btn {
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .recruit-bnr__btn {
    margin-top: 1.5rem;
  }
}

.recruit-bnr__visual {
  position: relative;
  z-index: 1;
}

.recruit-bnr__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  border-radius: 0.75rem;
}
.recruit-bnr__img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* お知らせ行のサムネイル（画像未登録でも枠が崩れないようにする） */
/* ==========================================================================
   私たちについて
   ========================================================================== */
/* --------------------------------------------------------------
   代表挨拶
   -------------------------------------------------------------- */
.message {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  align-items: start;
  gap: 4rem;
}
@media screen and (max-width: 1024px) {
  .message {
    gap: 2.5rem;
  }
}
@media screen and (max-width: 767px) {
  .message {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

.message__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
  border-radius: 1.5rem;
}
.message__img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message__en {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: "Poppins", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #30719b;
}
@media screen and (max-width: 767px) {
  .message__en {
    font-size: 0.75rem;
  }
}
.message__en::before {
  flex-shrink: 0;
  width: 1.75rem;
  height: 0.125rem;
  background-color: currentColor;
  border-radius: 62.4375rem;
  content: "";
}

.message__title {
  margin-top: 0.875rem;
  font-size: 2rem;
  line-height: 1.625;
}
@media screen and (max-width: 767px) {
  .message__title {
    margin-top: 0.625rem;
    font-size: 1.4375rem;
    line-height: 1.652173913;
  }
}

.message__text {
  margin-top: 1.75rem;
  font-size: 1rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .message__text {
    margin-top: 1.125rem;
    font-size: 0.9375rem;
    line-height: 1.8666666667;
  }
}
.message__text > p + p {
  margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  .message__text > p + p {
    margin-top: 1rem;
  }
}

.message__sign {
  margin-top: 2rem;
  font-size: 0.9375rem;
  line-height: 1.8666666667;
}
@media screen and (max-width: 767px) {
  .message__sign {
    margin-top: 1.25rem;
  }
}

.message__sign-name {
  display: inline-block;
  margin-top: 0.25rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  color: #1f4e6e;
}

.message__note {
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------
   理念（3か条）
   -------------------------------------------------------------- */
.philosophy__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  .philosophy__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}

.philosophy__item {
  position: relative;
  padding: 3rem 2rem 2.25rem;
  background-color: #faf7f2;
  border-radius: 1.5rem;
}
@media screen and (max-width: 767px) {
  .philosophy__item {
    padding: 2.25rem 1.25rem 1.5rem;
  }
}

.philosophy__num {
  position: absolute;
  top: -1.25rem;
  left: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  font-family: "Poppins", sans-serif;
  font-size: 1.4375rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background-color: #30719b;
  border-radius: 50%;
  box-shadow: 0 0.375rem 1rem rgba(31, 78, 110, 0.24);
}
@media screen and (max-width: 767px) {
  .philosophy__num {
    top: -1rem;
    left: 1.25rem;
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.1875rem;
  }
}

.philosophy__title {
  font-size: 1.4375rem;
  line-height: 1.5652173913;
}
@media screen and (max-width: 767px) {
  .philosophy__title {
    font-size: 1.1875rem;
  }
}

.philosophy__text {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.8666666667;
}
@media screen and (max-width: 767px) {
  .philosophy__text {
    margin-top: 0.625rem;
  }
}

/* --------------------------------------------------------------
   沿革
   -------------------------------------------------------------- */
.history__list {
  border-top: 0.0625rem solid #e2ded7;
}

.history__item {
  display: grid;
  grid-template-columns: 11.25rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 0.0625rem solid #e2ded7;
}
@media screen and (max-width: 767px) {
  .history__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.history__date {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: #1f4e6e;
}

.history__text {
  font-size: 1rem;
  line-height: 1.75;
}
@media screen and (max-width: 767px) {
  .history__text {
    font-size: 0.9375rem;
  }
}

.history__note {
  margin-top: 1.25rem;
}

/* ==========================================================================
   事業案内（一覧・詳細）
   ========================================================================== */
/* --------------------------------------------------------------
   4つの役割
   -------------------------------------------------------------- */
.role__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
@media screen and (max-width: 1024px) {
  .role__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .role__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}

.role__item {
  padding: 1.75rem 1.5rem 2rem;
  background-color: #ffffff;
  border-radius: 1.5rem;
  border-top: 0.3125rem solid var(--business-color, #3e8fc4);
  box-shadow: 0 0.25rem 1.5rem rgba(31, 78, 110, 0.08);
}
@media screen and (max-width: 767px) {
  .role__item {
    padding: 1.25rem 1.125rem 1.375rem;
  }
}

.role__label {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.875rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.6;
  color: #ffffff;
  background-color: var(--business-color-dark, #30719b);
  border-radius: 62.4375rem;
}

.role__name {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.6666666667;
}
@media screen and (max-width: 767px) {
  .role__name {
    margin-top: 0.75rem;
    font-size: 1.0625rem;
  }
}

.role__text {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.8666666667;
}
@media screen and (max-width: 767px) {
  .role__text {
    margin-top: 0.5rem;
  }
}

/* --------------------------------------------------------------
   事業詳細ページのヒーロー
   -------------------------------------------------------------- */
.detail-hero__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  border-radius: 1.5rem;
}
.detail-hero__img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-hero__lead {
  max-width: 50rem;
  margin-top: 2.5rem;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .detail-hero__lead {
    margin-top: 1.5rem;
  }
}

/* --------------------------------------------------------------
   中央寄せのリード（役割セクションなど）
   -------------------------------------------------------------- */
.sec__lead--center {
  max-width: 48.75rem;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

/* ==========================================================================
   4つの役割（インフォグラフィック）
   中央に「在宅での暮らし」、その周りに4事業を配置したハブ＆スポーク図。
   文字はHTMLのまま持たせているので、文字サイズ変更・検索エンジンにも対応する。
   SPでは中央→縦一列に組み替える。
   ========================================================================== */
.rolemap {
  position: relative;
}

.rolemap__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem minmax(0, 1fr);
  grid-template-areas: "a hub b" "c hub d";
  align-items: center;
  gap: 1.75rem 3.5rem;
}
@media screen and (max-width: 1024px) {
  .rolemap__grid {
    grid-template-columns: minmax(0, 1fr) 12.5rem minmax(0, 1fr);
    gap: 1.25rem 1.75rem;
  }
}
@media screen and (max-width: 767px) {
  .rolemap__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hub" "a" "b" "c" "d";
    gap: 0.875rem;
  }
}

/* --------------------------------------------------------------
   接続線（PCのみ）
   カードの内側から中央のハブへ向かう破線。
   ハブの円を上に重ねて余分な線を隠すため、
   線は「余白＋α」の長さで引いて調整不要にしている
   -------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  .rolemap__item::after {
    position: absolute;
    top: 50%;
    z-index: -1;
    width: 7.5rem;
    border-top: 0.125rem dashed rgba(62, 143, 196, 0.4);
    content: "";
  }
}

@media screen and (min-width: 768px) {
  .rolemap__item--a::after,
  .rolemap__item--c::after {
    left: 100%;
  }
}

@media screen and (min-width: 768px) {
  .rolemap__item--b::after,
  .rolemap__item--d::after {
    right: 100%;
  }
}

/* --------------------------------------------------------------
   中央のハブ
   -------------------------------------------------------------- */
.rolemap__hub {
  position: relative;
  z-index: 2;
  grid-area: hub;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  padding: 1.5rem;
  text-align: center;
  background-color: #1f4e6e;
  border: 0.5rem solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0.25rem 1.5rem rgba(31, 78, 110, 0.08);
}
@media screen and (max-width: 767px) {
  .rolemap__hub {
    aspect-ratio: auto;
    max-width: 20rem;
    margin-right: auto;
    margin-left: auto;
    padding: 1.25rem 1.5rem;
    border-width: 0.375rem;
    border-radius: 1.5rem;
  }
}

.rolemap__hub-en {
  font-family: "Poppins", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.82);
}

.rolemap__hub-title {
  margin-top: 0.625rem;
  font-size: 1.4375rem;
  line-height: 1.4782608696;
  color: #ffffff;
}
@media screen and (max-width: 1024px) {
  .rolemap__hub-title {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 767px) {
  .rolemap__hub-title {
    font-size: 1.1875rem;
  }
}

.rolemap__hub-text {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.6923076923;
  color: rgba(255, 255, 255, 0.88);
}

/* --------------------------------------------------------------
   4つのスポーク（事業）
   -------------------------------------------------------------- */
.rolemap__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 0.125rem solid var(--business-color, #3e8fc4);
  box-shadow: 0 0.25rem 1.5rem rgba(31, 78, 110, 0.08);
}
@media screen and (max-width: 1024px) {
  .rolemap__item {
    gap: 0.75rem;
    padding: 1rem 1.125rem;
  }
}
@media screen and (max-width: 767px) {
  .rolemap__item {
    padding: 1rem;
  }
}

.rolemap__item--a {
  grid-area: a;
}

.rolemap__item--b {
  grid-area: b;
}

.rolemap__item--c {
  grid-area: c;
}

.rolemap__item--d {
  grid-area: d;
}

/* 左列はアイコンを内側（中央のハブ側）に置いて、図として中央を向かせる。
   本文は読みやすさを優先して左揃えのまま（右揃えにすると
   日本語の折り返しが読みにくくなる） */
@media screen and (min-width: 768px) {
  .rolemap__item--a,
  .rolemap__item--c {
    flex-direction: row-reverse;
  }
}

.rolemap__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  background-color: var(--business-pale, #e8f2f9);
  border-radius: 50%;
}
@media screen and (max-width: 1024px) {
  .rolemap__icon {
    width: 2.75rem;
    height: 2.75rem;
  }
}

.rolemap__icon > svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: var(--business-color-dark, #30719b);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media screen and (max-width: 1024px) {
  .rolemap__icon > svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.rolemap__role {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  color: #ffffff;
  background-color: var(--business-color-dark, #30719b);
  border-radius: 62.4375rem;
}

.rolemap__name {
  margin-top: 0.5rem;
  font-size: 1.0625rem;
  line-height: 1.5294117647;
}
@media screen and (max-width: 1024px) {
  .rolemap__name {
    font-size: 1rem;
  }
}

.rolemap__text {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.7142857143;
}

/* 「こんなとき」の一言 */
.rolemap__case {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.6923076923;
  color: var(--business-color-dark, #30719b);
}

.rolemap__case::before {
  flex-shrink: 0;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  content: "例）";
}

/* 図の下の補足 */
.rolemap__note {
  margin-top: 2.5rem;
  padding: 1.25rem 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.8666666667;
  text-align: center;
  background-color: #ffffff;
  border-radius: 0.75rem;
}
@media screen and (max-width: 767px) {
  .rolemap__note {
    margin-top: 1.5rem;
    padding: 1rem;
    font-size: 0.875rem;
    text-align: left;
  }
}

/* ==========================================================================
   下層ページの個別パーツ
   （ご利用の流れ／医療・介護関係者の方へ／お知らせ／お問い合わせ）
   ========================================================================== */
/* --------------------------------------------------------------
   画像＋テキストの2カラム（flow / partner）
   -------------------------------------------------------------- */
.flow-partner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  gap: 3.5rem;
}
@media screen and (max-width: 1024px) {
  .flow-partner {
    gap: 2.25rem;
  }
}
@media screen and (max-width: 767px) {
  .flow-partner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* SPでは画像を先に出す */
@media screen and (max-width: 767px) {
  .flow-partner__visual {
    order: -1;
  }
}

.flow-partner__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  border-radius: 1.5rem;
}
.flow-partner__img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------
   ステップ番号内のラベル位置調整
   -------------------------------------------------------------- */
.step__num-value {
  display: block;
}

/* 電話番号リンク（本文中） */
.flow-link {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: #a7610d;
  text-decoration: underline;
}
@media (hover: hover) {
  .flow-link:hover {
    opacity: 0.75;
  }
}

/* --------------------------------------------------------------
   チェックリスト（ご用意いただくもの）
   -------------------------------------------------------------- */
.check-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-top: 0.875rem;
  padding: 1.125rem 1.5rem;
  font-size: 1rem;
  line-height: 1.75;
  background-color: #ffffff;
  border-radius: 0.75rem;
}
.check-list__item:first-child {
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  .check-list__item {
    gap: 0.625rem;
    margin-top: 0.625rem;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
  }
}

.check-list__item::before {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.25rem;
  background-color: #30719b;
  border-radius: 50%;
  content: "";
  /* チェックマーク */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.8125rem 0.8125rem;
}

/* --------------------------------------------------------------
   連携窓口一覧（partner / contact）
   -------------------------------------------------------------- */
.partner-tel__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
@media screen and (max-width: 1024px) {
  .partner-tel__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .partner-tel__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}

.partner-tel__item {
  padding: 1.5rem;
  background-color: #ffffff;
  border-radius: 1.5rem;
  border-top: 0.3125rem solid var(--business-color, #3e8fc4);
  box-shadow: 0 0.25rem 1.5rem rgba(31, 78, 110, 0.08);
}
@media screen and (max-width: 767px) {
  .partner-tel__item {
    padding: 1.125rem;
  }
}

.partner-tel__cat {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.75rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  color: #ffffff;
  background-color: var(--business-color-dark, #30719b);
  border-radius: 62.4375rem;
}

.partner-tel__name {
  margin-top: 0.75rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.625;
  color: #1f4e6e;
}

.partner-tel__num {
  margin-top: 0.625rem;
  font-family: "Poppins", sans-serif;
  font-size: 1.4375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #a7610d;
}
@media (hover: hover) {
  .partner-tel__num > a:hover {
    opacity: 0.75;
  }
}

.partner-tel__sub {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.6923076923;
  color: #636c74;
}

/* --------------------------------------------------------------
   お問い合わせページの電話案内
   -------------------------------------------------------------- */
.contact-tel {
  margin-top: 2.5rem;
  padding: 2rem 2.5rem;
  text-align: center;
  background-color: #e8f2f9;
  border-radius: 1.5rem;
}
@media screen and (max-width: 767px) {
  .contact-tel {
    margin-top: 1.5rem;
    padding: 1.25rem;
  }
}

.contact-tel__label {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6470588235;
  color: #1f4e6e;
}
@media screen and (max-width: 767px) {
  .contact-tel__label {
    font-size: 0.9375rem;
  }
}

.contact-tel__body {
  margin-top: 0.75rem;
}

.contact-tel__body .tel {
  font-size: 2.5rem;
}
@media screen and (max-width: 767px) {
  .contact-tel__body .tel {
    font-size: 1.75rem;
  }
}

/* --------------------------------------------------------------
   お知らせ詳細
   -------------------------------------------------------------- */
.sec--article {
  padding-top: 4.5rem;
}
@media screen and (max-width: 767px) {
  .sec--article {
    padding-top: 2.5rem;
  }
}

/* 詳細ページはページヘッダーを持たないため、
   固定ヘッダーの高さ分をパンくずで確保する */
.breadcrumb--offset {
  padding-top: 7.5rem;
}
@media screen and (max-width: 1024px) {
  .breadcrumb--offset {
    padding-top: 7.25rem;
  }
}