@charset "utf-8";

/* ============================================
   common.css
   共通CSS（変数定義・リセット・共通パーツ・header・footer）を
   1ファイルに結合したもの。サイト全ページで読み込む。
   ============================================ */

/* ===== global/_variable.css ===== */
:root {

  /* color */
  /* ============================================ */
  --main_c: #2c893a;
  --sub_c: #2b883a;
  --point_c: #58ffbc;
  --font_c: #2c2c2c;
  --bg_c: #f7f7f7;
  --cv_c: #ff552a;
  --line_c: #cccccc;

  /* font */
  /* ============================================ */
  --font_normal: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font_display: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font_en: 'Plus Jakarta Sans', 'Noto Sans JP', sans-serif;

  /* font-size scale */
  /* 原則このスケールから使用する。.width内=1664~896基準 / フルワイド要素は個別に1920~896で算出 */
  /* ============================================ */
  --fs_xxxl: clamp(2.5rem, 0.75rem + 3.125vw, 4rem); /* 64~40(1664~896) 超特大見出し */
  --fs_xxl: clamp(2rem, 0.8333rem + 2.0833vw, 3rem); /* 48~32(1664~896) 特大見出し（大きなJP見出し等） */
  --fs_xl: clamp(1.75rem, 0.875rem + 1.5625vw, 2.5rem); /* 40~28(1664~896) 大見出し */
  --fs_l: clamp(1.5rem, 0.9167rem + 1.0417vw, 2rem); /* 32~24(1664~896) 中見出し */
  --fs_ml: clamp(1.25rem, 0.9583rem + 0.5208vw, 1.5rem); /* 24~20(1664~896) 小見出し */
  --fs_mm: clamp(1rem, 0.7083rem + 0.5208vw, 1.25rem); /* 20~16(1664~896) リード文・強調テキスト */
  --fs_ms: clamp(1rem, 0.8542rem + 0.2604vw, 1.125rem); /* 18~16(1664~896) 本文 */
  --fs_m: clamp(0.875rem, 0.7292rem + 0.2604vw, 1rem); /* 16~14(1664~896) 本文 */
  --fs_s: clamp(0.75rem, 0.6042rem + 0.2604vw, 0.875rem); /* 14~12(1664~896) 注釈 */

}

/* ===== layout/_reset.css ===== */

/* ボックスモデルをリセットし、ボーダーを設定 */
/* ============================================ */

*,
::before,
::after {
  box-sizing: border-box; /* パディングとボーダーを要素の合計幅と高さに含める */
  border-style: solid;   /* ボーダーのスタイルを実線に設定 */
  border-width: 0;       /* ボーダーの幅を0に設定 */
  min-width: 0;          /* 最小幅を0に設定 */
}

/* ドキュメント */
/* ============================================ */

/**
 * 1. 全てのブラウザでline-heightを調整
 * 2. iOSでの方向変更後のフォントサイズ調整を抑制
 * 3. iOSでのリンクのグレーのハイライト表示を削除
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; /* 3 */
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  line-break: strict; /* 禁則処理を厳格に適用 */
}

/* セクション */
/* ============================================ */

/**
 * 全てのブラウザでmarginを削除
 */

body {
  margin: 0;
}

/**
 * IEでのmain要素の表示を一貫させる
 */

main {
  display: block;
}

/* 垂直方向の余白 */
/* ============================================ */

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* 見出し */
/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;   /* フォントサイズを親から継承 */
  font-weight: inherit; /* フォントウェイトを親から継承 */
  margin: 0;            /* マージンを削除 */
}

[tabindex='-1']:focus-visible {
  outline: none !important; /* tabindex="-1"でフォーカス可能になった要素のアウトラインを削除 */
}

/* リスト（列挙） */
/* ============================================ */

ul,
ol {
  margin: 0;       /* マージンを削除 */
  padding: 0;      /* パディングを削除 */
  list-style: none; /* リストのスタイルを削除 */
}

/* リスト（定義） */
/* ============================================ */

dd {
  margin-left: 0; /* 左マージンを削除 */
}

/* グループ化されたコンテンツ */
/* ============================================ */

/**
 * 1. Firefoxで正しいボックスサイジングを追加
 * 2. EdgeとIEでoverflowを表示
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px; /* 上ボーダーの幅を設定 */
  margin: 0;             /* マージンを削除 */
  clear: both;           /* 両側のフロートをクリア */
  color: inherit;        /* 色を親から継承 */
}

/**
 * 1. 全てのブラウザでフォントサイズの継承とスケーリングを調整
 * 2. 全てのブラウザで"em"フォントサイジングを調整
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit; /* フォントスタイルを親から継承 */
}

/* テキストレベルの意味付け要素 */
/* ============================================ */

/**
 * IE 10以上でアクティブなリンクのグレーの背景を削除
 */

a {
  background-color: transparent; /* 背景色を透明に設定 */
  text-decoration: none;         /* テキスト装飾を削除 */
  color: inherit;                /* 色を親から継承 */
}

/**
 * 1. Chrome 57-で下ボーダーを削除
 * 2. Chrome, Edge, IE, Opera, Safariで正しいテキスト装飾を追加
 */

abbr[title] {
  text-decoration: underline dotted; /* 2: 点線のアンダーラインを追加 */
}

/**
 * Chrome, Edge, Safariで正しいフォントウェイトを追加
 */

b,
strong {
  font-weight: 700; /* フォントウェイトを太字に設定 */
}

u {
  text-underline-offset: 0.2em;
}

em {
  font-style: italic;
}

/**
 * 1. 全てのブラウザでフォントサイズの継承とスケーリングを調整
 * 2. 全てのブラウザで"em"フォントサイジングを調整
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * "small"のフォントサイズを追加
 * 取り消し線のために"del"を追加
 */
small {
  font-size: inherit;
}

del {
  text-decoration: line-through;
}

/**
 * "sub"と"sup"を垂直方向に揃える
 */
sub {
  vertical-align: bottom;
  font-size: 72%;
}

sup {
  vertical-align: top;
  font-size: 72%;
}

/* 置換コンテンツ */
/* ============================================ */

/**
 * 垂直方向の配置問題を防止
 */

svg,
img,
embed,
object,
iframe {
  vertical-align: middle; /* 垂直方向中央揃え */
}

/* フォーム */
/* ============================================ */

/**
 * フォームフィールドをスタイル可能にするためにリセット
 * 1. 特にiOSで、システム全体でフォーム要素をスタイル可能にする
 * 2. 親からtext-transformを継承する
 */

button,
input,
optgroup,
select,
textarea {
  vertical-align: middle;  /* 垂直方向中央揃え */
  color: inherit;          /* 色を親から継承 */
  font: inherit;           /* フォントを親から継承 */
  background: none;        /* 背景を削除 */
  border: none;            /* ボーダーを削除 */
  padding: 0;              /* パディングを削除 */
  margin: 0;               /* マージンを削除 */
  border-radius: 0;        /* ボーダーの角丸を削除 */
  text-align: inherit;     /* テキストの配置を親から継承 */
  text-transform: inherit; /* 2 */
  white-space: normal;     /* ホワイトスペースを標準に設定 */
}

button{
  outline: none;     /* アウトラインを削除 */
  appearance: none;  /* ネイティブの外観を削除 */
}

/**
 * クリック可能な要素のカーソルを調整
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer; /* カーソルをポインターに設定 */
}

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
  cursor: default; /* 無効な要素のカーソルをデフォルトに設定 */
}

/**
 * Firefoxのアウトラインを改善し、入力要素やボタンのスタイルと統一
 */

:-moz-focusring {
  outline: auto; /* Firefoxのフォーカスリングを自動に設定 */
}

select:disabled {
  opacity: inherit; /* 無効なselect要素の透明度を継承 */
}

/**
 * パディングを削除
 */

option {
  padding: 0;
}

/**
 * fieldsetを非表示にリセット
 */

fieldset {
  margin: 0;     /* マージンを削除 */
  padding: 0;    /* パディングを削除 */
  min-width: 0;  /* 最小幅を0に設定 */
}

legend {
  padding: 0; /* パディングを削除 */
}

/**
 * Chrome, Firefox, Operaで正しい垂直方向の配置を追加
 */

progress {
  vertical-align: baseline; /* 垂直方向をベースラインに設定 */
}

/**
 * IE 10以上でデフォルトの垂直スクロールバーを削除
 */

textarea {
  overflow: auto; /* テキストエリアのオーバーフローを自動に設定 */
}

/**
 * Chromeでインクリメント/デクリメントボタンのカーソルスタイルを調整
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; /* 高さ自動 */
}

/**
 * Safariでアウトラインスタイルを調整
 */

[type="search"] {
  outline-offset: -2px; /* 1: アウトラインオフセットを調整 */
}

/**
 * macOSのChromeとSafariで内部パディングを削除
 */

[type="submit"] {
  -webkit-appearance: none; /* ネイティブの外観を削除 */
  border-radius: 0;         /* ボーダーの角丸を削除 */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; /* 検索フィールドの装飾を削除 */
}

/**
 * 1. iOSとSafariでクリック可能な型のスタイル設定不能を修正
 * 2. フォントの継承を修正
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Firefoxの外観を修正
 */
[type="number"] {
  -moz-appearance: textfield; /* Firefoxでナンバー入力フィールドの外観をテキストフィールドに設定 */
}

/**
 * クリック可能なラベル
 */

label[for] {
  cursor: pointer; /* for属性を持つラベルのカーソルをポインターに設定 */
}

/* インタラクティブ要素 */
/* ============================================ */

/*
 * Edge, IE 10+, Firefoxで正しいdisplayを追加
 */

details {
  display: block; /* details要素をブロックレベル要素として表示 */
}

/*
 * 全てのブラウザで正しいdisplayを追加
 */

summary {
  display: list-item; /* summary要素をリストアイテムとして表示 */
}

/*
 * 編集可能なコンテンツのアウトラインを削除
 */

[contenteditable]:focus {
  outline: auto; /* contenteditable要素のフォーカス時にアウトラインを自動表示 */
}

/* テーブル */
/* ============================================ */

/**
 * 1. ChromeとSafariでテーブルのボーダー色の継承を修正
 */

table {
  width: 100%;
  border-color: inherit; /* 1 */
  border-collapse: collapse; /* ボーダーを結合 */
}

caption {
  text-align: left; /* キャプションを左揃え */
}

td,
th {
  vertical-align: top; /* 垂直方向を上揃え */
  padding: 0;          /* パディングを削除 */
}

th {
  text-align: left;    /* テキストを左揃え */
  font-weight: 700;    /* フォントウェイトを太字に設定 */
}

/* Firefox: ネストされた順序付きリストが親から番号付けを続ける問題を解決 */
ol {
  counter-reset: revert; /* カウンターをリセットして、リストの番号付けをデフォルトの動作に戻す */
}

/* 画像がコンテナを超えないように */
img {
  max-inline-size: 100%; /* インライン方向（幅）の最大サイズを100%に設定 */
  max-block-size: 100%;  /* ブロック方向（高さ）の最大サイズを100%に設定 */
}

/* Safari: <body>に`user-select:none`が設定されている場合にテキスト入力が機能しない問題を解決 */
input, textarea {
  -webkit-user-select: auto; /* Safariでユーザー選択を自動に設定 */
}

/* Safariのtextarea要素の'white-space'プロパティを元に戻す */
textarea {
  white-space: revert; /* white-spaceプロパティをデフォルトの動作に戻す */
}

/* meter要素をスタイル可能にするための最小限のスタイル */
meter {
  -webkit-appearance: revert; /* Webkitブラウザでのネイティブの外観を元に戻す */
  appearance: revert;         /* ネイティブの外観を元に戻す */
}

/* inputplaceholderのデフォルトのテキスト不透明度をリセット */
::placeholder {
  color: unset; /* 色を未設定状態（継承またはデフォルト）にする */
}

/* 'hidden'属性の機能を修正。
  display:revert; は属性値ではなく要素のデフォルト表示に戻します。
  :where()は特異度を下げるためにここで使用されていますが、[hidden]のデフォルトはdisplay: none;です。 */
:where([hidden]) {
    display: none; /* hidden属性を持つ要素を非表示にする */
}

/* Chromiumブラウザのバグに対するリセット
  - contenteditable属性が正しく機能するように修正。
  - webkit-user-select: auto; は、ラッパー要素でuser-select:noneを使用している場合にSafari用に追加 */
:where([contenteditable]:not([contenteditable="false"])) {
  -moz-user-modify: read-write;      /* Firefoxでコンテンツ編集を許可 */
  -webkit-user-modify: read-write;   /* Webkitブラウザでコンテンツ編集を許可 */
  overflow-wrap: break-word;         /* 長い単語を任意の場所で折り返す */
  -webkit-line-break: after-white-space; /* Safariでホワイトスペース後の改行を許可 */
  -webkit-user-select: auto;         /* Webkitブラウザでユーザー選択を自動に設定 */
}

/* ドラッグ機能を再度適用 - ChromiumとSafariにのみ存在する */
:where([draggable="true"]) {
  -webkit-user-drag: element; /* Webkitブラウザで要素のドラッグを許可 */
}

/* Modalのネイティブな挙動をリセット */
:where(dialog:modal) {
  all: revert;         /* 全てのプロパティを元に戻す */
  box-sizing: border-box; /* ボックスサイジングをボーダーボックスに設定 */
}

/* Safariのdetails summaryの三角形アイコンを削除 */
::-webkit-details-marker {
  display: none;
}

/* ===== layout/_common.css ===== */

/* 共通部分 */
/* ============================================ */

body {
  background: var(--bg_c);
  overflow-x: clip;
  color: var(--font_c);
  font-family: var(--font_normal);
  font-optical-sizing: auto;
  font-style: normal;
  font-size: var(--fs_m); /* 16~14 */
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
  &.--fixed {
    height: 100%;
    overflow: hidden;
  }
}

a {
  color: currentColor;
  transition: all .3s ease-out;
  &:hover {
    @media(hover:hover) {
      opacity: .7;
    }
  }
  &[href^="tel:"] {
    @media(hover:hover) {
      pointer-events: none;
      opacity: 1;
    }
  }
}

/* 外部リンクアイコン: 付与したいリンクにのみ .--blank クラスを追加する（デフォルトでは付与しない） */
a.--blank::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-left: .3em;
  vertical-align: -.1em;
  background: url(../images/common/icon_blank.svg) no-repeat center / contain;
}

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

/* アクセシビリティ上設置しており非表示にするもの */
.reading {
  display: block;
  overflow: hidden;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
}

.pconly {
  @media (width <= 896px) {
    display: none;
  }
}
.sponly {
  display: none;
  @media (width <= 896px) {
    display: block;
  }
}
.tabonly {
  display: none;
  @media (width <= 1025px) {
    display: block;
  }
}
.tabnone {
  @media (width <= 1025px) {
    display: none;
  }
}
.mdonly {
  display: none;
  @media (width <= 600px) {
    display: block;
  }
}
.mdnone {
  @media (width <= 600px) {
    display: none;
  }
}
.portraitonly {
  display: none;
  @media (width <= 480px) {
    display: block;
  }
}
.portraitnone {
  @media (width <= 480px) {
    display: none;
  }
}

.span_br {
  display: inline-block;
}

/* margin-top, margin-bottomの絶対値指定 */
/* 記載例（.mt0,.mb0,.mt0-s,.mb0-s） */
.mt0  { margin-top: 0 !important; }
.mb0  { margin-bottom: 0 !important; }
.mt5  { margin-top: 5px !important; }
.mb5  { margin-bottom: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mb10 { margin-bottom: 10px !important; }
.mt16 { margin-top: 16px !important; }
.mb16 { margin-bottom: 16px !important; }
.mt24 { margin-top: 24px !important; }
.mb24 { margin-bottom: 24px !important; }
.mt32 { margin-top: 32px !important; }
.mb32 { margin-bottom: 32px !important; }
.mt40 { margin-top: 40px !important; }
.mb40 { margin-bottom: 40px !important; }
.mt48 { margin-top: 48px !important; }
.mb48 { margin-bottom: 48px !important; }
.mt56 { margin-top: 56px !important; }
.mb56 { margin-bottom: 56px !important; }
.mt64 { margin-top: 64px !important; }
.mb64 { margin-bottom: 64px !important; }
.mt72 { margin-top: 72px !important; }
.mb72 { margin-bottom: 72px !important; }
.mt80 { margin-top: 80px !important; }
.mb80 { margin-bottom: 80px !important; }
.mt88 { margin-top: 88px !important; }
.mb88 { margin-bottom: 88px !important; }
.mt96 { margin-top: 96px !important; }
.mb96 { margin-bottom: 96px !important; }
.mt104 { margin-top: 104px !important; }
.mb104 { margin-bottom: 104px !important; }
.mt112 { margin-top: 112px !important; }
.mb112 { margin-bottom: 112px !important; }
.mt120 { margin-top: 120px !important; }
.mb120 { margin-bottom: 120px !important; }

@media (width <= 896px) {
  .mt0-s  { margin-top: 0 !important; }
  .mb0-s  { margin-bottom: 0 !important; }
  .mt5-s  { margin-top: 5px !important; }
  .mb5-s  { margin-bottom: 5px !important; }
  .mt10-s { margin-top: 10px !important; }
  .mb10-s { margin-bottom: 10px !important; }
  .mt16-s { margin-top: 16px !important; }
  .mb16-s { margin-bottom: 16px !important; }
  .mt24-s { margin-top: 24px !important; }
  .mb24-s { margin-bottom: 24px !important; }
  .mt32-s { margin-top: 32px !important; }
  .mb32-s { margin-bottom: 32px !important; }
  .mt40-s { margin-top: 40px !important; }
  .mb40-s { margin-bottom: 40px !important; }
  .mt48-s { margin-top: 48px !important; }
  .mb48-s { margin-bottom: 48px !important; }
  .mt56-s { margin-top: 56px !important; }
  .mb56-s { margin-bottom: 56px !important; }
  .mt64-s { margin-top: 64px !important; }
  .mb64-s { margin-bottom: 64px !important; }
  .mt72-s { margin-top: 72px !important; }
  .mb72-s { margin-bottom: 72px !important; }
  .mt80-s { margin-top: 80px !important; }
  .mb80-s { margin-bottom: 80px !important; }
  .mt88-s { margin-top: 88px !important; }
  .mb88-s { margin-bottom: 88px !important; }
  .mt96-s { margin-top: 96px !important; }
  .mb96-s { margin-bottom: 96px !important; }
  .mt104-s { margin-top: 104px !important; }
  .mb104-s { margin-bottom: 104px !important; }
  .mt112-s { margin-top: 112px !important; }
  .mb112-s { margin-bottom: 112px !important; }
  .mt120-s { margin-top: 120px !important; }
  .mb120-s { margin-bottom: 120px !important; }
}

.width {
  container-type: inline-size;
  max-width: 1664px;
  width: calc(100% - 96px);
  margin: 0 auto;
  @media (width <= 896px) {
    width: calc(100% - 40px);
  }
  &.width--all {
    max-width: inherit;
    width: calc(100% - 64px);
    @media (width <= 896px) {
      width: calc(100% - 20px);
    }
  }
}

.outer {
  overflow: clip;
}

/* 共通パーツ */
/* ============================================ */

/* テキスト＋緑丸矢印の共通ボタン（main_btn_m） */
.common-arrow__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 16px;
  color: var(--font_c);
  overflow: hidden;
  transition: color .3s ease-out;
  @media (width <= 896px) {
    padding-bottom: 8px;
  }
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--main_c);
    transition: translate .3s ease-out;
  }
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      color: var(--main_c);
      &::after {
        translate: 100% 0;
      }
      .common-arrow__btn-circle {
        background-color: #2c2c2c;
      }
      .common-arrow__btn-circle::after {
        translate: 3px 0;
      }
    }
  }
  /* target="_blank"時は循環アイコン（→）ではなく外部リンクアイコンに差し替え、hoverでの平行移動もさせない */
  &[target="_blank"] {
    .common-arrow__btn-circle::after {
      -webkit-mask-image: url(../images/common/icon_blank_white.svg);
      mask-image: url(../images/common/icon_blank_white.svg);
    }
    &:hover {
      @media (hover: hover) {
        .common-arrow__btn-circle::after {
          translate: 0 0;
        }
      }
    }
  }
}
.common-arrow__btn-txt {
  text-align: left;
  font-size: calc((20 / 16) * 1rem); /* 20px */
  font-weight: 600;
  @media (width <= 896px) {
    font-size: calc((16 / 16) * 1rem); /* 18px */
  }
}
.common-arrow__btn-circle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background-color: var(--main_c);
  -webkit-mask-image: url(../images/common/btn_mark.svg);
  mask-image: url(../images/common/btn_mark.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: background-color .3s ease-out;
  @media (width <= 896px) {
    width: 40px;
    height: 40px;
  }
  /* 矢印/外部リンクアイコンは画像ではなくmaskで表示し、色はbackground-colorで指定する */
  &::after {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background-color: #fff;
    -webkit-mask-image: url(../images/common/arrow_right_white.svg);
    mask-image: url(../images/common/arrow_right_white.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transition: translate .3s ease-out;
    @media (width <= 896px) {
      width: 18px;
      height: 18px;
    }
  }
}
/* 緑背景など濃色の背景上で使う白ベースの配色バリエーション（circle側は白背景+緑矢印を組み合わせて使用） */
.common-arrow__btn--white {
  color: #fff;
  &::after {
    background-color: #fff;
  }
  &:hover {
    @media (hover: hover) {
      color: #fff;
    }
  }
}
.common-arrow__btn--white .common-arrow__btn-circle {
  background-color: #fff;
  &::after {
    background-color: var(--main_c);
  }
}

/* CVボタン（オレンジのピル・お問い合わせ / CV_btn_l） */
.common-cv__btn {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: calc((24 / 20) * 1em) calc((48 / 20) * 1em);
  background: var(--cv_c);
  color: #fff;
  border-radius: 9999px;
  font-size: var(--fs_mm); /* 20~16 */
  font-weight: 600;
  transition: opacity .3s ease-out;
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 9999px;
    background: var(--font_c);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease-out;
  }
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      &::before {
        transform: scaleX(1);
      }
    }
  }
}
.common-cv__btn-icon {
  display: inline-flex;
  width: calc((24 / 20) * 1em);
  height: calc((24 / 20) * 1em);
  flex-shrink: 0;
  svg {
    width: 100%;
    height: 100%;
  }
}
.common-cv__btn--lg {
  width: 100%;
  justify-content: space-between;
  font-size: clamp(1.125rem, 0.688rem + 0.781vw, 1.5rem); /* 24~18(1664~896) */
}
.common-cv__btn--lg .common-cv__btn-icon {
  width: 32px;
  height: 32px;
}
.common-cv__btn--lg .common-cv__btn-txt {
  flex: 1;
  text-align: center;
}

/* 下層ページ共通 お問い合わせ（Contact）
/* ============================================ */

.second-contact {
  position: relative;
  padding-bottom: 120px;
  @media (width <= 896px) {
    padding-bottom: 80px;
  }
}
.second-contact__circle--green { /* 1777/2250 */
  width: max(1777px, ((1777 / 1920) * 100vw));
  height: max(2250px, ((2250 / 1920) * 100vw));
  background: radial-gradient(49.34% 31.15% at 49.55% -0.1%, #D7FFEF 0%, #2B883A 100%);
  -webkit-mask-image: url(../images/common/contact_circle_green.svg);
  mask-image: url(../images/common/contact_circle_green.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  position: absolute;
  top: 128px;
  right: calc((600 / 1920) * 100vw);
  z-index: 0;
  @media (width <= 896px) { /* 598/710 */
    width: max(598px, ((598 / 375) * 100vw));
    height: max(710px, ((710 / 375) * 100vw));
    -webkit-mask-image: url(../images/common/contact_circle_green_sp.svg);
    mask-image: url(../images/common/contact_circle_green_sp.svg);
    top: 140px;
    right: calc((-20 / 375) * 100vw);
  }
}
.second-contact__circle--white { /* 3494/3011 */
  width: max(3494px, ((3494 / 1920) * 100vw));
  height: max(3011px, ((3011 / 1920) * 100vw));
  background: #fff;
  -webkit-mask-image: url(../images/common/contact_circle_white.svg);
  mask-image: url(../images/common/contact_circle_white.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  position: absolute;
  top: 168px;
  right: calc((-320 / 1920) * 100vw);
  z-index: 1;
  @media (width <= 896px) { /* 1176/950 */
    width: max(1176px, ((1176 / 375) * 100vw));
    height: max(950px, ((950 / 375) * 100vw));
    -webkit-mask-image: url(../images/common/contact_circle_white_sp.svg);
    mask-image: url(../images/common/contact_circle_white_sp.svg);
    top: 154px;
    right: max(-310px, ((-310 / 375) * 100vw));
  }
}
.second-contact__blur {
  position: absolute;
  z-index: 2;
  img {
    width: 100%;
    max-width: none;
  }
}
.second-contact__blur--01 {
  width: min(390px, (390 / 1920) * 100vw);
  top: 340px;
  right: calc((640 / 1920) * 100vw);
  @media (width <= 896px) {
    width: 158px;
    top: 150px;
    right: calc((96 / 375) * 100vw);
  }
}
.second-contact__blur--02 {
  width: min(270px, (270 / 1920) * 100vw);
  top: 468px;
  right: calc((300 / 1920) * 100vw);
  @media (width <= 896px) {
    width: 106px;
    top: 280px;
    right: calc((-28 / 375) * 100vw);
  }
}
.second-contact__blur--03 {
  width: min(547px, (547 / 1920) * 100vw);
  top: 640px;
  right: calc((660 / 1920) * 100vw);
  @media (width <= 896px) {
    width: 280px;
    top: 320px;
    right: calc((-56 / 375) * 100vw);
  }
}
.second-contact__img {
  width: min(591px, 45%);
  container-type: inline-size;
  aspect-ratio: 591 / 430;
  position: absolute;
  top: 168px;
  right: calc((214 / 1920) * 100vw);
  z-index: 5;
  @media (width <= 896px) {
    width: min(296px, 85%);
    top: 108px;
    right: max(-96px, ((-96 / 375) * 100vw));
  }
  img {
    width: 100%;
    max-width: none;
  }
}
.second-contact__bean {
  width: calc((591 / 591) * 100cqw);
  height: calc((393 / 591) * 100cqw);
  position: absolute;
  bottom: 0;
  left: 0;
}
.second-contact__photo {
  width: calc((314 / 591) * 100cqw);
  height: calc((304 / 591) * 100cqw);
  position: absolute;
  top: 0;
  left: calc((100 / 591) * 100cqw);
}
.second-contact__inner {
  position: relative;
  z-index: 10;
  padding-top: 520px;
  @media (width <= 896px) {
    padding-top: 318px;
  }
}
.second-contact__body {
  display: flex;
  justify-content: space-between;
  gap: clamp(2rem, 0.833rem + 2.083vw, 3rem); /* 48~32(1664~896) */
  margin-top: 64px;
  @media (width <= 1025px) {
    flex-direction: column;
    align-items: center;
  }
  @media (width <= 896px) {
    margin-top: 40px;
  }
}
.second-contact__dl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  @media (width <= 896px) {
    gap: 16px;
  }
}
.second-contact__ttl {
  word-break: keep-all;
  font-family: var(--font_display);
  font-weight: 900;
  font-size: clamp(2.25rem, 0.9615rem + 3.4188vw, 4rem); /* 64~36(1664~896) */
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--font_c);
  text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff;
  @media (width <= 896px) {
    font-size: min(36px, ((36 / 375) * 100vw));
  }
}
.second-contact__txt {
  margin-top: 40px;
  font-size: var(--fs_mm); /* 20~16 */
  line-height: 1.8;
  color: var(--font_c);
}
.second-contact__actions {
  flex-shrink: 0;
  width: 498px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  @media (width <= 896px) {
    width: 100%;
    max-width: 315px;
  }
}
.second-contact__more .common-arrow__btn {
  justify-content: center;
}

/* 下層共通部分 */
/* ============================================ */
.second-main {
  padding: 48px 0;
  background: var(--main_c);
  color: #fff;
  @media (width <= 896px) {
    padding: 24px 0;
  }
}
.second-main__ttl {
  word-break: keep-all;
  text-align: center;
  font-size: clamp(1.5rem, 0.625rem + 1.5625vw, 2.5rem); /* 40~24(1920~896) */
  font-weight: 700;
}

.second-outer {
  position: relative;
}

.second-bg {
  width: min(2434px, ((2434 / 1920) * 100vw));
  height: min(2098px, ((2098 / 1920) * 100vw));
  background: #fff;
  -webkit-mask-image: url(../images/common/second_bg_circle.svg);
  mask-image: url(../images/common/second_bg_circle.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  position: absolute;
  top: min(220px, ((220 / 1920) * 100vw));
  right: max(-248px, ((-248 / 1920) * 100vw));
  z-index: -1;
  @media (width <= 896px) {
    width: min(819px, ((819 / 375) * 100vw));
    height: min(706px, ((706 / 375) * 100vw));
    -webkit-mask-image: url(../images/common/second_bg_circle_sp.svg);
    mask-image: url(../images/common/second_bg_circle_sp.svg);
    top: max(-48px, ((-48 / 375) * 100vw));
    right: max(-232px, ((-232 / 375) * 100vw));
  }
}

.third-bg {
  width: min(2434px, ((2434 / 1920) * 100vw));
  height: min(2098px, ((2098 / 1920) * 100vw));
  background: #fff;
  -webkit-mask-image: url(../images/common/second_bg_circle.svg);
  mask-image: url(../images/common/second_bg_circle.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  position: absolute;
  top: max(-1036px, ((-1036 / 1920) * 100vw));
  right: max(-324px, ((-324 / 1920) * 100vw));
  @media (width <= 896px) {
    width: min(819px, ((819 / 375) * 100vw));
    height: min(706px, ((706 / 375) * 100vw));
    -webkit-mask-image: url(../images/common/second_bg_circle_sp.svg);
    mask-image: url(../images/common/second_bg_circle_sp.svg);
    top: max(-318px, ((-318 / 375) * 100vw));
    right: max(-182px, ((-182 / 375) * 100vw));
  }
}

/* 英語見出しの共通ヘッドライン（下層ページ用。top-headlineと同一デザイン） */
.second-headline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  @media (width <= 896px) {
    gap: 8px;
  }
}
.second-headline__jp {
  position: relative;
  display: inline-block;
  font-size: calc((16 / 16) * 1rem); /* 16px */
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--main_c);
  @media (width <= 896px) {
    font-size: calc((12 / 16) * 1rem); /* 12px */
    margin-left: .8em;
  }
}
.second-headline__jp-icon {
  display: block;
  position: absolute;
  top: -10px;
  left: -28px;
  width: 52px;
  height: 52px;
  pointer-events: none;
  clip-path: polygon(
    101.85% 16.68%,
    89.81% 16.68%,
    54.63% 16.68%,
    54.63% 77.79%,
    101.85% 77.79%,
    101.85% 107.42%,
    -2.78% 107.42%,
    -2.78% -10.17%,
    101.85% -10.17%
  );
  @media (width <= 896px) {
    top: -15px;
    left: -10px;
    width: 40px;
    height: 40px;
    clip-path: polygon(
      103.19% 41.44%,
      91.01% 41.44%,
      55.36% 41.44%,
      55.36% 88.63%,
      103.19% 88.63%,
      103.19% 108.83%,
      -2.81% 108.83%,
      -2.81% -10.31%,
      103.19% -10.31%
    );
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.second-headline__en {
  font-family: var(--font_en);
  font-weight: 800;
  font-size: clamp(3.5rem, -0.4375rem + 7.0313vw, 6.875rem); /* 110~56(1664~896) */
  line-height: 1;
  letter-spacing: .02em;
  color: var(--font_c);
  text-shadow: 0 0 12px #fff, 0 0 12px #fff, 0 0 12px #fff;
  @media (width <= 896px) {
    font-size: min(56px, ((56 / 375) * 100vw));
  }
}

/* 下層ページ共通セクション見出し（EN大文字＋JP太字。second-headlineより一段小さいH2相当。companyページで初出、複数ページで使用のため共通化） */
.second-heading2 {
  position: relative;
  padding-left: 48px;
  display: flex;
  flex-direction: column;
  @media (width <= 896px) {
    padding-left: 0;
  }
  &.second-heading2--white {
    .second-heading2__en {
      color: #fff;
    }
    .second-heading2__jp {
      color: #fff;
    }
  }
  &.second-heading2--sp-c {
    @media (width <= 896px) {
      text-align: center;
      align-items: center;
    }
  }
}
.second-heading2__icon {
  display: inline-flex;
  width: clamp(1.125rem, 0.1042rem + 1.8229vw, 2rem); /* 32~18(1664~896) */
  aspect-ratio: 32 / 31;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  @media (width <= 896px) {
    position: static;
    margin-bottom: 4px;
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.second-heading2__en {
  font-family: var(--font_en);
  font-weight: 800;
  font-size: clamp(3rem, -0.0625rem + 5.4688vw, 5.625rem); /* 90~48(1664~896) */
  line-height: 1.05;
  letter-spacing: .02em;
  color: var(--main_c);
  @media (width <= 896px) {
    font-size: min(48px, (48 / 375) * 100vw);
  }
}
.second-heading2__jp {
  word-break: keep-all;
  font-family: var(--font_display);
  font-weight: 900;
  font-size: clamp(1.25rem, -0.7917rem + 3.6458vw, 3rem); /* 48~20(1664~896) */
  line-height: 1.2;
  color: var(--font_c);
  margin-top: 16px;
}

/* ブロックエディタで作成した投稿本文（news-detail__main, works-detail-body等で使用） */

/* 段落ブロック（基本） */
.common-block-content p {
  font-family: var(--font_normal);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--font_c);
}

/* 区切り線ブロック（破線 / is-style-dashed）。WordPress標準（wp-includes/blocks/separator/theme.css）が非wide/非dotsスタイルにwidth:100pxを指定しているため、全幅の区切り線として上書きする */
.common-block-content .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  width: 100%;
}

.common-block-content hr.is-style-dashed {
  border-top: 1px dashed var(--main_c);
}

/* 段落ブロック（英数強調 / is-style-en）。font_en（Plus Jakarta Sans）を指定 */
.common-block-content p.is-style-en {
  font-family: var(--font_en);
  font-weight: 800;
  line-height: 1.2;
}

/* 段落ブロック（タグラベル / is-style-label-tag）。main_c薄背景の丸ピル型英字ラベル */
.common-block-content p.is-style-label-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 10px 12px;
  background-color: #e8f4ea;
  border-radius: 999px;
  font-family: var(--font_en);
  font-weight: 700;
  font-size: 9px;
  line-height: 1.95;
  letter-spacing: 1.44px;
  color: var(--main_c);
}

/* 段落ブロック（タグラベル（ドット） / is-style-label-tag-dot）。白背景＋main_c薄ボーダー＋緑ドット付きの日本語タグ */
.common-block-content p.is-style-label-tag-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 8px 16px;
  background-color: #fff;
  border: 1px solid #e8f4ea;
  border-radius: 999px;
  font-family: var(--font_normal);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.95;
  letter-spacing: 0.3px;
  color: var(--font_c);
}

.common-block-content p.is-style-label-tag-dot::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--main_c);
}

/* 本文中のタグ装飾（ハイライト機能を流用）。背景色はハイライト選択色（インラインstyle）が優先される */
.common-block-content mark {
  background-color: #e8f4ea;
  border-radius: 4px;
  padding: 2px 6px;
  color: inherit;
}

.common-block-content mark.has-inline-color {
  padding: 0;
}

/* 本文中のインラインリンク。外部リンク（http/https）は外部リンクアイコン、PDFリンクはPDFアイコンを末尾に自動付与。サイト内リンク（相対パス等）はアイコンなし */
.common-block-content p a,
.common-block-content li a {
  color: var(--main_c);
  text-decoration: underline;
}

.common-block-content p a[href^="http"]:not([href$=".pdf"])::after,
.common-block-content li a[href^="http"]:not([href$=".pdf"])::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: middle;
  background: url(../images/common/icon_blank.svg) no-repeat center / contain;
}

.common-block-content p a[href$=".pdf"]::after,
.common-block-content li a[href$=".pdf"]::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: middle;
  background: url(../images/common/icon_pdf.svg) no-repeat center / contain;
}

/* ボタン一覧。スマホではサブボタンを含めボタンを中央寄せにする */
.common-block-content .wp-block-buttons {
  @media (width <= 896px) {
    justify-content: center;
  }
}

.common-block-content .wp-block-buttons > .wp-block-button {
  display: block;
  @media (width <= 896px) {
    width: 100%;
    text-align: center;
  }
}

/* ボタンブロック（基本レイアウト）。矢印アイコンは右端に固定表示し、テキストはボタン内で中央表示にする。target="_blank"時は外部リンクアイコンに切替 */
.common-block-content .wp-block-button__link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 262px;
  padding: 16px 48px;
  border-radius: 100px;
  background-color: var(--main_c);
  font-family: var(--font_normal);
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: opacity .3s ease-out;
  @media (width <= 896px) {
    min-width: inherit;
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
    padding: 16px 40px;
  }
  &:hover {
    @media (hover: hover) {
      opacity: 1;
    }
  }
  &:hover::before {
    @media (hover: hover) {
      transform: scaleX(1);
    }
  }
}

.common-block-content .wp-block-button__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 100px;
  background: var(--font_c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease-out;
}

.common-block-content .wp-block-button__link::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 24px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  translate: 0 -50%;
  background: url(../images/common/arrow_right_white.svg) no-repeat center / contain;
  @media (width <= 896px) {
    right: 16px;
  }
}

.common-block-content .wp-block-button__link[target="_blank"]::after {
  background-image: url(../images/common/icon_blank_white.svg);
}

/* ボタンブロック（CVボタン / is-style-cv）。common-cv__btnを踏襲し、オレンジ背景＋左メールアイコン、ホバーで黒背景がスライドイン */
.common-block-content .wp-block-button.is-style-cv .wp-block-button__link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  justify-content: center;
  gap: 12px;
  background-color: var(--cv_c);
  transition: opacity .3s ease-out;
  &:hover {
    @media (hover: hover) {
      opacity: 1;
    }
  }
  &:hover::before {
    @media (hover: hover) {
      transform: scaleX(1);
    }
  }
}

.common-block-content .wp-block-button.is-style-cv .wp-block-button__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 100px;
  background: var(--font_c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease-out;
}

.common-block-content .wp-block-button.is-style-cv .wp-block-button__link::after {
  right: auto;
  left: 24px;
  background-image: url(../images/common/icon_mail_white.svg);
  @media (width <= 896px) {
    left: 16px;
  }
}

.common-block-content .wp-block-button.is-style-cv .wp-block-button__link[target="_blank"]::after {
  background-image: url(../images/common/icon_mail_white.svg);
}

/* ボタンブロック（サブボタン / is-style-sub）。common-arrow__btnと同じ丸背景mask+矢印mask、ホバーで丸が緑→黒＋アイコンが右にスライド */
/* スマホでの中央寄せは親.wp-block-buttonsのjustify-content:centerで行うため、基本ボタンのwidth:100%;max-width:400px;はここで打ち消す */
.common-block-content .wp-block-button.is-style-sub .wp-block-button__link {
  position: relative;
  display: inline-block;
  min-width: inherit;
  padding: 0 56px 0 0;
  background: none;
  border-radius: 0;
  font-size: 16px;
  line-height: 40px;
  color: var(--font_c);
  text-align: left;
  transition: color .3s ease-out;
  @media (width <= 896px) {
    width: auto;
    max-width: none;
  }
  &:hover {
    @media (hover: hover) {
      color: var(--main_c);
      opacity: 1;
    }
  }
  &:hover::before {
    @media (hover: hover) {
      background-color: #2c2c2c;
    }
  }
  &:hover::after {
    @media (hover: hover) {
      translate: 3px -50%;
    }
  }
  &[target="_blank"]:hover::after {
    @media (hover: hover) {
      translate: 0 -50%;
    }
  }
}

.common-block-content .wp-block-button.is-style-sub .wp-block-button__link::before {
  content: '';
  position: absolute;
  inset: auto 0 auto auto;
  z-index: auto;
  top: 50%;
  right: 0;
  width: 40px;
  height: 40px;
  translate: 0 -50%;
  transform: none;
  border-radius: 0;
  background-color: var(--main_c);
  -webkit-mask-image: url(../images/common/btn_mark.svg);
  mask-image: url(../images/common/btn_mark.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: background-color .3s ease-out;
}

.common-block-content .wp-block-button.is-style-sub .wp-block-button__link::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 11px;
  width: 18px;
  height: 18px;
  translate: 0 -50%;
  background-image: none;
  background-color: #fff;
  -webkit-mask-image: url(../images/common/arrow_right_white.svg);
  mask-image: url(../images/common/arrow_right_white.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: translate .3s ease-out;
}

.common-block-content .wp-block-button.is-style-sub .wp-block-button__link[target="_blank"]::after {
  background-image: none;
  -webkit-mask-image: url(../images/common/icon_blank_white.svg);
  mask-image: url(../images/common/icon_blank_white.svg);
}

/* カラムブロック。デフォルトgapをFigma値の8pxに */
.common-block-content .wp-block-columns {
  gap: 8px;
  width: 100%;
}

/* カラム/グループブロックの「カード」スタイル（is-style-card）。白背景＋角丸16px＋padding32px。背景色はブロックの「色」設定から個別に上書き可能（インラインstyleが優先される） */
.common-block-content .wp-block-column.is-style-card,
.common-block-content .wp-block-group.is-style-card {
  padding: 32px;
  background-color: #fff;
  border-radius: 16px;
}

.common-block-content .wp-block-column.is-style-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.common-block-content .wp-block-column.is-style-card > *:first-child {
  margin-top: 0;
}

/* グループブロックの「タグ横並び」スタイル（is-style-tag-row）。タグラベル等をgap32pxで横並びに */
.common-block-content .wp-block-group.is-style-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.common-block-content .wp-block-group.is-style-tag-row-between {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
}

/* 画像ブロック（一枚画像）。角丸＋キャプションは12px中央揃え */
.common-block-content .wp-block-image {
  width: 100%;
  margin: 0;
}

.common-block-content .wp-block-image img {
  display: block;
  width: 100%;
  border-radius: 16px;
  @media (width <= 896px) {
    border-radius: 8px;
  }
}

.common-block-content .wp-block-image .wp-element-caption {
  margin-top: 8px;
  font-family: var(--font_normal);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--font_c);
  text-align: center;
}

/* 動画ブロック。角丸＋キャプションは12px中央揃え、width:100%; max-width:1000px; */
.common-block-content .wp-block-video {
  width: 100%;
  max-width: 1000px;
}

.common-block-content .wp-block-video video {
  display: block;
  width: 100%;
  border-radius: 16px;
}

.common-block-content .wp-block-video .wp-element-caption {
  margin-top: 8px;
  font-family: var(--font_normal);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--font_c);
  text-align: center;
}

/* 埋め込みブロック（YouTube等 / wp-block-embed） */
.common-block-content .wp-block-embed__wrapper {
  max-width: 1000px;
}

/* 画像ブロック（左寄せ・中央寄せ・右寄せ）。回り込みなしでmax-width:1005px、スマホでは自然に100%表示 */
/* テーマがtheme.jsonを持たないクラシックテーマのため、WordPress core（wp_restore_image_outer_container）がalignleft/center/right時に<figure>を<div class="wp-block-image">でラップし、align系クラスは内側のfigureに残る。そのため.wp-block-image自身にalign系クラスが付く場合（theme.json採用テーマ相当）と、子孫のfigureに付く場合の両方に対応する */
.common-block-content .wp-block-image.alignleft,
.common-block-content .wp-block-image .alignleft,
.common-block-content .wp-block-image.aligncenter,
.common-block-content .wp-block-image .aligncenter,
.common-block-content .wp-block-image.alignright,
.common-block-content .wp-block-image .alignright {
  max-width: 1005px;
  width: calc(100% - 40px);
  float: none;
  @media (width <= 480px) {
    width: 100%;
  }
}

.common-block-content .wp-block-image.alignleft,
.common-block-content .wp-block-image .alignleft {
  margin-left: 0;
  margin-right: auto;
}

.common-block-content .wp-block-image.aligncenter,
.common-block-content .wp-block-image .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

.common-block-content .wp-block-image.alignright,
.common-block-content .wp-block-image .alignright {
  margin-left: auto;
  margin-right: 0;
}

.common-block-content .wp-block-image.alignleft .wp-element-caption,
.common-block-content .wp-block-image .alignleft .wp-element-caption {
  text-align: left;
}

.common-block-content .wp-block-image.alignright .wp-element-caption,
.common-block-content .wp-block-image .alignright .wp-element-caption {
  text-align: right;
}

/* ギャラリーブロック（カラム表示）。角丸16px＋16:9トリミング、gap8px。スマホでは1カラム */
.common-block-content .wp-block-gallery.has-nested-images {
  --wp--style--unstable-gallery-gap: 8px;
  gap: 8px;
  width: 100%;
  &:not(.columns-3):not(.columns-4):not(.columns-5) {
    @media (width <= 896px) {
      figure.wp-block-image:not(#individual-image) {
        width: 100%;
      }
    }
  }
  &.columns-3 {
    @media (width <= 600px) {
      figure.wp-block-image:not(#individual-image) {
        width: 100%;
      }
    }
  }
  &.columns-4 {
    @media (width <= 896px) {
      figure.wp-block-image:not(#individual-image) {
        width: calc(50% - var(--wp--style--unstable-gallery-gap, 8px) / 2);
      }
    }
  }
  &.columns-5 {
    @media (width <= 600px) {
      figure.wp-block-image:not(#individual-image) {
        width: calc(50% - var(--wp--style--unstable-gallery-gap, 8px) / 2);
      }
    }
  }
}

.common-block-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
  aspect-ratio: 16 / 9;
}

/* ギャラリーブロック（3カラム）。画面幅600px以下で1カラム */

/* ギャラリーブロック（4カラム）。画面幅896px以下で2カラム */

/* ギャラリーブロック（5カラム）。画面幅600px以下で2カラム */

/* ファイルブロック（wp-block-file）。カード全体をクリック可能にするstretched-link + ダウンロードボタンはz-indexで手前に */
.common-block-content .wp-block-file {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(69, 179, 179, .4);
  cursor: pointer;
  @media (width <= 896px) {
    flex-direction: column;
    gap: 16px;
  }
  &:hover {
    @media (hover: hover) {
      a {
        opacity: 1;
      }
      > a:not(.wp-block-file__button) {
        color: var(--main_c);
      }
      .wp-block-file__button {
        color: var(--main_c);
      }
      .wp-block-file__button::before {
        background-color: var(--font_c);
      }
    }
  }
}

.common-block-content .wp-block-file * + .wp-block-file__button {
  margin-left: 0;
}

.common-block-content .wp-block-file__embed {
  display: none;
}

.common-block-content .wp-block-file > a:not(.wp-block-file__button) {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--font_normal);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.8;
  color: var(--font_c);
  text-decoration: none;
  @media (width <= 896px) {
    gap: 16px;
  }
}

.common-block-content .wp-block-file > a:not(.wp-block-file__button)::before {
  content: '';
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: url(../images/common/icon_pdf.svg) no-repeat center / contain;
  @media (width <= 896px) {
    width: 24px;
    height: 24px;
  }
}

.common-block-content .wp-block-file > a:not(.wp-block-file__button)::after {
  content: '';
  position: absolute;
  inset: 0;
}

.common-block-content .wp-block-file__button {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0 56px 0 0;
  background: none;
  font-family: var(--font_normal);
  font-weight: 600;
  font-size: 16px;
  line-height: 40px;
  letter-spacing: 1px;
  color: var(--font_c);
  text-decoration: none;
  @media (width <= 896px) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    font-size: 14px;
    line-height: 1.8;
  }
}

.common-block-content .wp-block-file__button::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 40px;
  height: 40px;
  translate: 0 -50%;
  background-color: var(--main_c);
  -webkit-mask-image: url(../images/common/btn_mark.svg);
  mask-image: url(../images/common/btn_mark.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: background-color .3s ease-out;
  @media (width <= 896px) {
    position: static;
    order: 1;
    width: 32px;
    height: 32px;
    translate: none;
    -webkit-mask-image: url(../images/common/btn_mark.svg), url(../images/common/icon_download.svg);
    mask-image: url(../images/common/btn_mark.svg), url(../images/common/icon_download.svg);
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
    -webkit-mask-position: center, center;
    mask-position: center, center;
    -webkit-mask-size: 100% 100%, 14px 14px;
    mask-size: 100% 100%, 14px 14px;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

.common-block-content .wp-block-file__button::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 11px;
  width: 18px;
  height: 18px;
  translate: 0 -50%;
  background-color: #fff;
  -webkit-mask-image: url(../images/common/icon_download.svg);
  mask-image: url(../images/common/icon_download.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  @media (width <= 896px) {
    content: none;
  }
}

/* メディアとテキスト（2カラムレイアウト / wp-block-media-text）。スマホでは1カラム */
.common-block-content .wp-block-media-text {
  gap: 32px;
  width: 100%;
  &.is-stacked-on-mobile {
    @media (width <= 896px) {
      grid-template-columns: 100% !important;
      gap: 24px;
    }
  }
  &.is-stacked-on-mobile:not(.has-media-on-the-right) {
    @media (width <= 896px) {
      > .wp-block-media-text__content {
        grid-column: 1;
        grid-row: 1;
      }
      > .wp-block-media-text__media {
        grid-column: 1;
        grid-row: 2;
      }
    }
  }
  &.is-stacked-on-mobile.has-media-on-the-right {
    @media (width <= 896px) {
      > .wp-block-media-text__media {
        grid-column: 1;
        grid-row: 1;
      }
      > .wp-block-media-text__content {
        grid-column: 1;
        grid-row: 2;
      }
    }
  }
}

.common-block-content .wp-block-media-text > .wp-block-media-text__content {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.common-block-content .wp-block-media-text__media img,
.common-block-content .wp-block-media-text__media video {
  border-radius: 16px;
}

.common-block-content .wp-block-media-text__media .wp-element-caption {
  margin-top: 10px;
  font-family: var(--font_normal);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--font_c);
  inline-size: fit-content;
  margin-left: auto;
}

.common-block-content h2 {
  position: relative;
  width: 100%;
  padding-left: 48px;
  margin: 64px 0 24px;
  font-family: var(--font_display);
  font-weight: 900;
  font-size: clamp(1.25rem, -0.7917rem + 3.6458vw, 3rem); /* 48~20(1664~896) */
  line-height: 1.2;
  color: var(--main_c);
  word-break: keep-all;
  @media (width <= 896px) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0;
    margin: 64px 0 8px;
    font-size: 28px;
  }
}
.common-block-content h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(1.125rem, 0.1042rem + 1.8229vw, 2rem); /* 32~18(1664~896) */
  aspect-ratio: 32 / 31;
  background-image: url(../images/common/heading_bean.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  @media (width <= 896px) {
    position: static;
    width: 18px;
    margin-bottom: 6px;
  }
}

/* ブロックエディタで作成した投稿本文のh3見出し（左に太めのボーダーを添える） */
.common-block-content h3 {
  width: 100%;
  padding: 16px 0 16px 24px;
  margin: 64px 0 24px;
  border-left: 2px solid var(--main_c);
  font-family: var(--font_normal);
  font-weight: 700;
  font-size: var(--fs_l);
  line-height: 1.375;
  color: var(--font_c);
  @media (width <= 896px) {
    padding: 4px 0 4px 24px;
    margin: 32px 0 8px;
    line-height: 44px;
  }
}

/* h3見出し（CVカラー / is-style-cv）。左ボーダーをcv_c色に */
.common-block-content h3.is-style-cv {
  border-left-color: var(--cv_c);
}

/* ブロックエディタで作成した投稿本文のh4見出し（装飾なしのシンプルなカラー見出し） */
.common-block-content h4 {
  width: 100%;
  margin: 48px 0 16px;
  font-family: var(--font_normal);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.2292rem + 0.2604vw, 1.5rem); /* 24~22(1664~896) */
  line-height: 1.5;
  color: var(--main_c);
  @media (width <= 896px) {
    margin: 16px 0 4px;
    line-height: 36px;
  }
}

/* ブロックエディタで作成した投稿本文のh5見出し（装飾なしのシンプルな見出し） */
.common-block-content h5 {
  width: 100%;
  margin: 32px 0 8px;
  font-family: var(--font_normal);
  font-weight: 700;
  font-size: var(--fs_mm);
  line-height: 1.7;
  color: var(--font_c);
  @media (width <= 896px) {
    margin: 16px 0 4px;
    font-size: 20px;
  }
}

/* ブロックエディタで作成した投稿本文のh6見出し（装飾なしのシンプルな見出し） */
.common-block-content h6 {
  width: 100%;
  margin: 24px 0 8px;
  font-family: var(--font_normal);
  font-weight: 700;
  font-size: var(--fs_ms);
  line-height: 2.125;
  color: var(--font_c);
  @media (width <= 896px) {
    margin: 16px 0 4px;
  }
}

/* ブロックエディタで作成した投稿本文のul（丸マーカー、ネストは中抜き丸） */
.common-block-content ul {
  width: 100%;
}

.common-block-content ul li {
  position: relative;
  padding-left: 17px;
  font-family: var(--font_normal);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--font_c);
}

.common-block-content ul li:not(:first-child) {
  margin-top: 8px;
}

.common-block-content ul li::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 3.5px;
  background: var(--main_c);
}

.common-block-content ul ul {
  margin-top: 8px;
}

.common-block-content ul ul li:not(:first-child) {
  margin-top: 4px;
}

.common-block-content ul ul li::before {
  background: transparent;
  border: 2px solid #8fcfa6;
  box-sizing: border-box;
}

/* ブロックエディタのリストブロック「注意書き（※）」スタイル（Figma: caution） */
.common-block-content ul.is-style-caution li {
  padding-left: 16px;
  font-size: 12px;
  color: #6b7269;
}

.common-block-content ul.is-style-caution li:not(:first-child) {
  margin-top: 4px;
}

.common-block-content ul.is-style-caution li::before {
  content: '※';
  top: 0;
  width: 12px;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 1px;
  text-align: center;
  color: #6b7269;
}

/* ブロックエディタで作成した投稿本文の脚注参照（WordPress標準の脚注機能 / sup.fn）。白背景の丸角バッジで番号を表示 */
.common-block-content sup.fn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  background: #fff;
  border-radius: 4px;
  font-family: var(--font_en);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--main_c);
  text-decoration: none;
  cursor: pointer;
}

/* ブロックエディタで作成した投稿本文の脚注一覧（WordPress標準の脚注機能 / .wp-block-footnotes）。番号バッジ＋下線テキスト＋外部リンク風の戻りアイコン */
.common-block-content .wp-block-footnotes {
  width: 100%;
  padding: 24px;
  border-top: 1px solid #e8f4ea;
  list-style: none;
  counter-reset: footnote-counter;
  @media (width <= 896px) {
    padding: 16px;
  }
}

.common-block-content .wp-block-footnotes li {
  counter-increment: footnote-counter;
  font-family: var(--font_normal);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--font_c);
}

.common-block-content .wp-block-footnotes li::before {
  content: counter(footnote-counter);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  background: #fff;
  border-radius: 4px;
  font-family: var(--font_en);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--main_c);
  text-decoration: none;
}

/* liタグ内の本文中に直接付けたaタグの色・アイコンは、汎用ルール（.common-block-content li a、本ファイル上部）が既にhref^="http"/href$=".pdf"に応じて付与するため、ここでは重複定義しない。liのafterには何も付けない */

/* WordPress標準の脚注機能が各liの末尾に自動生成する「本文へ戻る」リンク（wp-includes/blocks/footnotes.phpのrender_block_core_footnotesが出力、常にliの最後のaタグ）は非表示にする */
.common-block-content .wp-block-footnotes li a:last-child {
  display: none;
}

/* ブロックエディタで作成した投稿本文のol（番号はPlus Jakarta Sans ExtraBoldでカラー表示） */
.common-block-content ol {
  width: 100%;
  counter-reset: ol-counter;
}

.common-block-content ol li {
  counter-increment: ol-counter;
  position: relative;
  padding-left: 32px;
  font-family: var(--font_normal);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--font_c);
}

.common-block-content ol li:not(:first-child) {
  margin-top: 8px;
}

.common-block-content ol li::before {
  content: counter(ol-counter) '.';
  position: absolute;
  top: 7px;
  left: 0;
  width: 24px;
  font-family: var(--font_en);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--main_c);
}

/* ol（ステップリスト / is-style-step）。01,02...の自動連番＋上下ボーダーの縦積み行 */
.common-block-content ol.is-style-step {
  counter-reset: step-counter;
}

.common-block-content ol.is-style-step li {
  counter-increment: step-counter;
  position: relative;
  padding: 24px 24px 24px 66px;
  margin: 0;
  border-top: 1px solid var(--line_c);
  border-bottom: 1px solid var(--line_c);
}

.common-block-content ol.is-style-step li:not(:first-child) {
  margin-top: -1px;
  border-top: 0;
}

.common-block-content ol.is-style-step li::before {
  content: counter(step-counter, decimal-leading-zero);
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  font-weight: 800;
}

/* ステップリストの連番をCVカラーにする（ブロックの文字色設定で「CVカラー」を選択した場合） */
.common-block-content ol.is-style-step.has-cv-c-color li::before {
  color: var(--cv_c);
}

/* ブロックエディタで作成した投稿本文の引用ブロック（カード状の吹き出し引用符アイコン付き） */
.common-block-content blockquote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 96px 64px 64px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
  text-align: center;
  color: var(--font_c);
  @media (width <= 896px) {
    padding: 40px 32px;
    text-align: left;
  }
}

.common-block-content blockquote::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 40px;
  width: 64px;
  height: 64px;
  background: url(../images/common/quote_icon.svg) no-repeat center / contain;
  @media (width <= 896px) {
    top: 20px;
    left: 18px;
    width: 48px;
    height: 48px;
  }
}

.common-block-content blockquote p {
  font-family: var(--font_normal);
  font-weight: 400;
  font-size: var(--fs_mm); /* 20~16(1664~896) */
  line-height: 2.6;
  color: var(--font_c);
}

.common-block-content blockquote cite {
  display: block;
  font-family: var(--font_normal);
  font-weight: 600;
  font-style: normal;
  font-size: var(--fs_m); /* 16~14(1664~896) */
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--main_c);
}

.common-block-content blockquote cite::before {
  content: '— ';
}

/* ブロックエディタで作成した投稿本文のプルクオート（wp-block-pullquote）。通常の引用ブロックとは別デザインで上書き */
.common-block-content .wp-block-pullquote {
  width: 100%;
  padding: 0 0 34px;
  margin: 0;
  position: relative;
  @media (width <= 896px) {
    padding: 0 0 24px;
  }
}

.common-block-content .wp-block-pullquote blockquote {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 64px 48px;
  background: #fff;
  border-radius: 16px;
  box-shadow: none;
  text-align: center;
  @media (width <= 896px) {
    gap: 12px;
    padding: 32px 16px;
  }
}

.common-block-content .wp-block-pullquote blockquote::before {
  content: none;
}

.common-block-content .wp-block-pullquote blockquote p {
  margin: 0;
  font-family: var(--font_display);
  font-weight: 900;
  font-size: clamp(1.375rem, 0.0625rem + 2.34375vw, 2.5rem); /* 40~22(1664~896) */
  line-height: 1.6;
  letter-spacing: 4px;
  color: var(--main_c);
  word-break: keep-all;
  @media (width <= 896px) {
    letter-spacing: 0;
  }
}

.common-block-content .wp-block-pullquote blockquote cite {
  display: block;
  font-family: var(--font_normal);
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--font_c);
  text-transform: none;
}

.common-block-content .wp-block-pullquote blockquote cite::before {
  content: none;
}

.common-block-content .wp-block-pullquote::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 64px;
  background: var(--main_c);
  transform: translateX(-50%);
  @media (width <= 896px) {
    height: 40px;
  }
}

/* ブロックエディタで作成した投稿本文のアコーディオン（詳細ブロック / details・summary）。開閉は+/-アイコンで表現 */
.common-block-content details {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 32px;
  border-top: 1px solid var(--line_c);
  border-bottom: 1px solid var(--line_c);
  @media (width <= 896px) {
    padding: 32px 24px;
  }
}

/* gapはsummaryと詳細本文の間の余白のため、閉じている間（詳細本文が非表示の間）は付与しない */
.common-block-content details[open] {
  gap: 16px;
}

.common-block-content details + details {
  margin-top: -1px;
  border-top: 0;
}

/* news-detail__main は display:flex; gap:24px; のため、上記のmargin-top:-1pxだけでは隣接details間にgap分の余白が残ってしまう。gap分を打ち消して隙間なく連結させる */
.news-detail__main.common-block-content details + details {
  margin-top: calc(-24px - 1px);
}

.common-block-content summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font_normal);
  font-weight: 700;
  font-size: var(--fs_mm); /* 20~16(1664~896) */
  color: var(--main_c);
}

.common-block-content summary::-webkit-details-marker {
  display: none;
}

.common-block-content summary::marker {
  content: '';
}

.common-block-content summary::after {
  content: '';
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: url(../images/common/accordion_add.svg) no-repeat center / contain;
}

.common-block-content details[open] summary::after {
  background-image: url(../images/common/accordion_remove.svg);
}

.common-block-content details p {
  margin: 0;
  font-family: var(--font_normal);
  font-weight: 400;
  font-size: var(--fs_m); /* 16~14(1664~896) */
  line-height: 1.8;
  color: #2e3438;
}

/* ブロックエディタで作成した投稿本文のテーブル（横並び=標準のthead+tbody構造、縦並び=is-style-verticalで各行の1列目をth風に） */
/* WordPress標準のブロックCSS（wp-includes/blocks/table/style.css・theme.css）がthead/tfootに3pxの太いボーダー、figure自体にmarginを付与するため、先にリセットする */
.common-block-content .wp-block-table {
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line_c);
  border-radius: 16px;
  overflow: hidden;
  @media (width <= 896px) {
    border-radius: 8px;
  }
  &:not(.is-style-vertical) {
    @media (width <= 896px) {
      overflow-x: auto;
      border: 0;
      border-radius: 0;
      table {
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid var(--line_c);
        border-radius: 8px;
        overflow: hidden;
      }
      table th:not(:first-child) {
        border-left: 0;
      }
      table td:not(:first-child) {
        border-left: 0;
      }
      table th {
        white-space: nowrap;
      }
      table td {
        white-space: nowrap;
      }
    }
  }
}

.common-block-content .wp-block-table thead,
.common-block-content .wp-block-table tfoot {
  border: 0;
}

.common-block-content table {
  border-collapse: collapse;
  width: 100%;
  @media (width <= 896px) {
    th {
      padding: 8px 16px;
    }
    td {
      padding: 8px 16px;
    }
  }
}

.common-block-content table th,
.common-block-content table td {
  padding: 16px 28px;
  font-family: var(--font_normal);
  font-weight: 600;
  font-size: var(--fs_m); /* 16~14(1664~896) */
  line-height: 1.8;
  letter-spacing: 1px;
  word-break: break-word;
  border: 1px solid var(--line_c);
}

.common-block-content table thead th {
  background: #e8f4ea;
  color: var(--main_c);
}

.common-block-content table tbody td {
  background: #fff;
  color: var(--font_c);
}

/* is-style-verticalクラスは<table>ではなく外側の<figure class="wp-block-table">に付与されるため、.wp-block-table.is-style-vertical table のように子孫セレクタで指定する */
.common-block-content .wp-block-table.is-style-vertical table th,
.common-block-content .wp-block-table.is-style-vertical table td {
  border-left: 0;
  border-right: 0;
}

.common-block-content .wp-block-table.is-style-vertical table tr:first-child > * {
  border-top: 0;
}

.common-block-content .wp-block-table.is-style-vertical table tr:last-child > * {
  border-bottom: 0;
}

.common-block-content .wp-block-table.is-style-vertical table tr > *:first-child {
  background: #e8f4ea;
  color: var(--main_c);
  width: 220px;
  min-height: 54px;
  @media (width <= 896px) {
    min-height: auto;
    width: auto;
    min-width: 110px;
  }
}

.common-block-content .wp-block-table.is-style-vertical table tr > *:not(:first-child) {
  background: #fff;
  color: var(--font_c);
}

/* 縦並びテーブル：既存のworks-detail-meta__tableと同一デザインに合わせる（行のpadding4px分をセルの上下paddingに加算、フォントサイズはPC16px/SP14pxの固定2段階）。ブロックエディタのテーブルはthを使えないためtr > *（nth-of-type相当）で全セルを指定 */
.common-block-content .wp-block-table.is-style-vertical table tr > * {
  padding-top: 20px;
  padding-bottom: 20px;
  @media (width <= 896px) {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

.common-block-content .wp-block-table.is-style-vertical table a {
  word-break: break-all;
  color: var(--main_c);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.common-block-content .wp-block-table.is-style-vertical table td a[target="_blank"]:not([href$=".pdf"])::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  vertical-align: middle;
  background: url(../images/common/icon_blank.svg) no-repeat center / contain;
  @media (width <= 896px) {
    width: 14px;
    height: 14px;
  }
}

.common-block-content .wp-block-table.is-style-vertical table td a[href$=".pdf"]::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  vertical-align: middle;
  background: url(../images/common/icon_pdf.svg) no-repeat center / contain;
  @media (width <= 896px) {
    width: 14px;
    height: 14px;
  }
}

/* 横並びテーブル：Figma（node-id=54288-4086）通り、列の区切りはborder-collapse:collapseによる1本線のみ（列間に余白は入れない）。tbody側は行区切りの横線のみ表示する */
.common-block-content .wp-block-table:not(.is-style-vertical) table th,
.common-block-content .wp-block-table:not(.is-style-vertical) table td {
  border-top: 0;
  border-bottom: 0;
}

.common-block-content .wp-block-table:not(.is-style-vertical) table thead th {
  min-height: 54px;
}

.common-block-content .wp-block-table:not(.is-style-vertical) table tbody td {
  border-bottom: 1px solid var(--line_c);
}

.common-block-content .wp-block-table:not(.is-style-vertical) table tbody tr:last-child td {
  border-bottom: 0;
}

.common-block-content .wp-block-table:not(.is-style-vertical) table th:first-child,
.common-block-content .wp-block-table:not(.is-style-vertical) table td:first-child {
  border-left: 0;
}

.common-block-content .wp-block-table:not(.is-style-vertical) table th:last-child,
.common-block-content .wp-block-table:not(.is-style-vertical) table td:last-child {
  border-right: 0;
}

.common-block-content .wp-block-table:not(.is-style-vertical) table a {
  word-break: break-all;
  color: var(--main_c);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.common-block-content .wp-block-table:not(.is-style-vertical) table td a[target="_blank"]:not([href$=".pdf"])::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  vertical-align: middle;
  background: url(../images/common/icon_blank.svg) no-repeat center / contain;
  @media (width <= 896px) {
    width: 14px;
    height: 14px;
  }
}

.common-block-content .wp-block-table:not(.is-style-vertical) table td a[href$=".pdf"]::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  vertical-align: middle;
  background: url(../images/common/icon_pdf.svg) no-repeat center / contain;
  @media (width <= 896px) {
    width: 14px;
    height: 14px;
  }
}

/* 下層ページ共通パンくず */
.second-breadcrumb {
  margin-top: 120px;
  font-size: clamp(0.75rem, 0.4583rem + 0.5208vw, 1rem); /* 16~12(1664~896) */
  @media (width <= 896px) {
    margin-top: 64px;
  }
}
.second-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc((8 / 16) * 1em);
  list-style: none;
  font-size: clamp(0.75rem, 0.4583rem + 0.5208vw, 1rem); /* 16~12(1664~896) */
  color: var(--font_c);
}
.second-breadcrumb__link {
  position: relative;
  display: inline-block;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: var(--main_c);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease-out;
  }
  @media (hover: hover) {
    &:hover {
      opacity: 1;
      color: var(--main_c);
      &::before {
        transform: scaleX(1);
      }
    }
  }
}
.second-breadcrumb__sep {
  display: flex;
  width: 1em;
  height: 1em;
}
.second-breadcrumb__sep::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../images/common/breadcrumb_arrow.svg") no-repeat center / contain;
}

/* 濃色背景のヒーロー上にパンくずを置く場合の白配色（service/system/ 実装で追加） */
.second-breadcrumb--white {
  .second-breadcrumb__list {
    color: #fff;
  }
  .second-breadcrumb__link {
    color: #fff;
    &::before {
      background: #fff;
    }
    @media (hover: hover) {
      &:hover {
        color: #fff;
        opacity: .7;
      }
    }
  }
  .second-breadcrumb__sep::before {
    filter: brightness(0) invert(1);
  }
}

/* 下層ページ共通ヒーロー（見出し・パンくず・ビジュアルの土台。装飾はページ側で追加） */
.second-hero {
  position: relative;
}
.second-hero__wrap {
  /* position: staticのままだとposition: absoluteの.second-hero__bgより後にDOM上にあっても
     背面に回り込んでしまうため、positioned要素にしてDOM順で前面に出す */
  position: relative;
}
.second-hero__bg {
  container-type: inline-size;
  width: min(1760px, ((1760 / 1920) * 100vw));
  height: min(1010px, ((1010 / 1920) * 100vw));
  position: absolute;
  top: max(-152px, ((-152 / 1920) * 100vw));
  right: max(-350px, ((-350 / 1920) * 100vw));
  @media (width <= 896px) {
    width: min(387px * 1.5, ((387 / 375) * 100vw));
    height: min(221px * 1.5, ((221 / 375) * 100vw));
    top: min(7px * 1.5, ((7 / 375) * 100vw));
    right: max(-104px * 1.5, ((-104 / 375) * 100vw));
  }
  img {
    width: 100%;
    max-width: none;
  }
}
.second-hero__blur {
  position: absolute;
  &.second-hero__blur--01 {
    width: calc((442 / 1760) * 100cqw);
    top: 0;
    left: 0;
    @media (width <= 896px) {
      width: calc((100 / 387) * 100cqw);
      top: auto;
      left: auto;
      right: calc((96 / 387) * 100cqw);
      bottom: 0;
    }
  }
  &.second-hero__blur--02 {
    width: calc((155 / 1760) * 100cqw);
    top: calc((265 / 1760) * 100cqw);
    left: calc((560 / 1760) * 100cqw);
    @media (width <= 896px) {
      width: calc((64 / 387) * 100cqw);
      top: calc((40 / 387) * 100cqw);
      left: calc((86 / 387) * 100cqw);
    }
  }
  &.second-hero__blur--03 {
    width: calc((341 / 1760) * 100cqw);
    top: calc((360 / 1760) * 100cqw);
    left: calc((338 / 1760) * 100cqw);
    @media (width <= 896px) {
      width: calc((64 / 387) * 100cqw);
      top: calc((18 / 387) * 100cqw);
      left: calc((64 / 387) * 100cqw);
    }
  }
  &.second-hero__blur--04 {
    width: calc((313 / 1760) * 100cqw);
    top: calc((570 / 1760) * 100cqw);
    left: calc((150 / 1760) * 100cqw);
    @media (width <= 896px) {
      width: calc((64 / 387) * 100cqw);
      top: calc((58 / 387) * 100cqw);
      left: 0;
    }
  }
  &.second-hero__blur--05 {
    width: calc((313 / 1760) * 100cqw);
    top: calc((610 / 1760) * 100cqw);
    left: calc((536 / 1760) * 100cqw);
    @media (width <= 896px) {
      width: calc((64 / 387) * 100cqw);
      top: calc((90 / 387) * 100cqw);
      left: calc((130 / 387) * 100cqw);
    }
  }
}
.second-hero__visual {
  container-type: inline-size;
  width: calc((1101.5 / 1760) * 100cqw);
  position: absolute;
  right: 0;
  bottom: 0;
  @media (width <= 896px) {
    width: calc((235 / 387) * 100cqw);
    bottom: auto;
    top: 0;
  }
}
.second-hero__sprout {
  width: calc((1153 / 2003) * 100cqw);
  position: absolute;
  top: calc((16 / 1101.5) * 100cqw);
  left: calc((132 / 1101.5) * 100cqw);
}

/* hero ビジュアル：常時ふわふわ動くループ演出（JSで.is-floating付与後に発火） */
.second-hero__bean,
.second-hero__sprout {
  will-change: transform;
}
.second-hero__visual.is-floating .second-hero__bean { animation: hero-sway 6.5s ease-in-out infinite;   @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}
.second-hero__visual.is-floating .second-hero__sprout { animation: hero-float 7.5s ease-in-out .4s infinite;   @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc((-10 / 1101.5) * 100cqw)); }
}
@keyframes hero-sway {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(calc((6 / 1101.5) * 100cqw), calc((-8 / 1101.5) * 100cqw)); }
  66% { transform: translate(calc((-4 / 1101.5) * 100cqw), calc((-4 / 1101.5) * 100cqw)); }
}

.second-hero__body {
  position: relative;
}
.second-hero__lead {
  font-size: var(--fs_mm); /* 20~16 */
  line-height: 2.6;
  color: var(--font_c);
  text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
  margin-top: 40px;
  @media (width <= 896px) {
    line-height: 1.8;
    margin-top: 24px;
  }
}

.third-hero__bg {
  width: min(826px, (826 / 1920) * 100vw);
  height: min(482px, (482 / 1920) * 100vw);
  top: max(-88px, (-88 / 1920) * 100vw);
  right: min(70px, (70 / 1920) * 100vw);
  @media (width <= 896px) {
    width: min(387px * 1.2, ((387 / 375) * 100vw));
    height: min(221px * 1.2, ((221 / 375) * 100vw));
    top: min(7px * 1.2, ((7 / 375) * 100vw));
    right: max(-104px * 1.2, ((-104 / 375) * 100vw));
  }
}

/* 下層ページ共通 ページ内メニュー（Content Menu）
/* ============================================ */

/* ヒーロー内 Content Menu カード（PCのみ。SPは画面下部の Content Menu ボタンに切り替え） */
.second-hero__menu {
  flex-shrink: 0;
  width: 468px;
  max-width: 100%;
  padding: 40px;
  background: color-mix(in srgb, #fff 80%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: 16px;
}
.second-hero__menu-ttl {
  font-family: var(--font_en);
  font-weight: 800;
  font-size: var(--fs_s); /* 14~12 */
  letter-spacing: .08em;
  text-transform: capitalize;
  color: var(--main_c);
}
.second-hero__menu-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px dashed var(--main_c);
}
.second-hero__menu-item {
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--main_c);
  &:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
}
.second-hero__menu-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--font_c);
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      color: var(--main_c);
      .second-hero__menu-icon {
        translate: 0 3px;
      }
    }
  }
  /* ページ外リンク（右矢印）はhover時に矢印を右へ動かす */
  &:not([href^="#"]):hover {
    @media (hover: hover) {
      .second-hero__menu-icon {
        translate: 3px 0;
      }
    }
  }
}
.second-hero__menu-txt {
  word-break: keep-all;
  font-size: var(--fs_mm); /* 20~16 */
  font-weight: 600;
}
.second-hero__menu-icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 24px;
  height: 24px;
  transition: translate .3s ease-out;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .second-hero__menu-link {
    &:hover {
      @media(hover:hover) {
        translate: 0 3px;
      }
    }
  }
}

/* Content Menu 内アコーディオン項目（サブカテゴリ一覧を持つ項目のみ）
   見出し行は「ページ内リンク（テキスト）」と「開閉トグル（+/-アイコン）」を別要素に分け、
   アコーディオンの開閉操作がジャンプリンクのクリックを邪魔しないようにする */
.second-hero__menu-acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.second-hero__menu-acc-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.second-hero__menu-acc-icon {
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 24px;
}
.second-hero__menu-acc-icon-bar {
  display: block;
  width: 12px;
  height: 2px;
  background: var(--main_c);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transition: rotate .3s ease-out;
  &:nth-child(2) {
    rotate: 90deg;
  }
  .second-hero__menu-item--acc.is-open & {
    &:nth-child(2) {
      rotate: 0deg;
    }
  }
}
.second-hero__menu-sub {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s ease-out, opacity .3s ease-out, margin-top .3s ease-out;
  .second-hero__menu-item--acc.is-open & {
    max-height: 640px;
    margin-top: 16px;
    opacity: 1;
  }
}
.second-hero__menu-sub-item {
  &:not(:first-child) {
    margin-top: 16px;
  }
}
.second-hero__menu-sub-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc((12 / 16) * 1rem); /* 12px */
  letter-spacing: .04em;
  color: var(--font_c);
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      color: var(--main_c);
    }
  }
  &::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--main_c);
  }
}

/* Content Menu フローティングボタン＋パネル（SP: 画面下からのボトムシート表示 / PC: 右下カードの展開表示） */
.second-content-menu {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 208px;
  /* 左右のpaddingは持たず、__btn／__panelそれぞれに持たせる。
     __panelの右端をカード自体の右端まで広げ、スクロールバーが右端に表示されるようにするため */
  padding: 24px 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px color-mix(in srgb, #1c3420 6%, transparent);
  overflow: hidden;
  transition: opacity .3s ease-out, visibility 0s linear 0s, width .4s cubic-bezier(.4, 0, .2, 1);
  &.is-open {
    width: 468px;
    background: color-mix(in srgb, #fff 80%, transparent);
  }
  @media (width <= 896px) {
    display: block;
    width: auto;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transition: opacity .3s ease-out, visibility 0s linear 0s;
    &.is-open {
      width: auto;
      background: none;
    }
  }
  /* フッターが画面内に入ったら、フッターと重ならないようボタンごと非表示にする */
  &.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* is-open解除によるwidth収縮とフェードアウトが重なり、閉じかけの細い状態が一瞬見えてしまうのを防ぐため、非表示時はwidthを即座にスナップさせる */
    transition: width 0s, opacity .3s ease-out, visibility 0s linear .3s;
  }
}
.second-content-menu__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, #2c2c2c 60%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease-out, visibility 0s linear .3s;
  @media (width <= 896px) {
    display: block;
    .second-content-menu.is-open & {
      opacity: 1;
      visibility: visible;
      transition: opacity .3s ease-out;
    }
  }
}
.second-content-menu__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--main_c);
  flex-shrink: 0;
  padding: 0 40px;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
  /* PC: 親.second-content-menuのpadding分だけクリック範囲を拡張し、カード全体を
     クリック可能にする（見た目は変更しない）。左右は親のoverflow:hiddenで
     実際の幅にクリップされるよう大きめの値を指定し、開閉どちらの幅でも
     隙間なくカバーする。開いた状態は下方向だけパネルの手前で止める */
  &::before {
    content: '';
    position: absolute;
    top: -24px;
    right: -9999px;
    bottom: -24px;
    left: -9999px;
  }
  .second-content-menu.is-open &::before {
    bottom: -16px;
  }
  @media (width <= 896px) {
    padding: 8px 24px;
    background: #fff;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 8px;
    box-shadow: 0 8px 20px color-mix(in srgb, #2c2c2c 25%, transparent);
    &::before {
      content: none;
    }
    .second-content-menu.is-open & {
      display: none;
    }
  }
}
.second-content-menu__btn-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  svg {
    width: 100%;
    height: 100%;
  }
}
.second-content-menu__btn-txt {
  font-family: var(--font_en);
  font-weight: 800;
  font-size: calc((12 / 16) * 1rem); /* 12px */
  letter-spacing: .08em;
  text-transform: capitalize;
}
/* SP専用：ボトムシート上部のヘッダー行（アイコン＋テキスト＋閉じるボタン）。
   パネル自体をスクロールコンテナに戻し、ヘッダーは position: sticky で常に上部に留まるようにする
   （flexのmin-height:0による高さ分配はブラウザ・状況によって崩れやすいため、より確実なstickyに変更） */
.second-content-menu__panel-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  @media (width <= 896px) {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1;
    padding-top: 24px;
    background: #fff;
  }
}
.second-content-menu__panel-head-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.second-content-menu__panel-head-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--main_c);
  svg {
    width: 100%;
    height: 100%;
  }
}
.second-content-menu__panel-head-txt {
  font-family: var(--font_en);
  font-weight: 800;
  font-size: var(--fs_s); /* 14~12 */
  letter-spacing: .08em;
  text-transform: capitalize;
  color: var(--main_c);
}
.second-content-menu__close {
  display: none;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 30px;
  background: #fff;
  border-radius: 9999px;
  @media (width <= 896px) {
    display: flex;
  }
}
.second-content-menu__close-bar {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--font_c);
  transition: rotate .3s ease-out;
  position: absolute;
  inset: 0;
  margin: auto;
  &:nth-of-type(1) {
    rotate: 30deg;
  }
  &:nth-of-type(2) {
    rotate: -30deg;
  }
}
.second-content-menu__panel {
  display: flex;
  flex-direction: column;
  position: static;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  /* 左右paddingは自身が持つ（親.second-content-menuは横paddingなし）。
     スクロールバーがこのpaddingの外側＝カードの右端付近に表示されるようにするため */
  padding: 0 40px;
  background: none;
  border-radius: 0;
  box-shadow: none;
  translate: none;
  visibility: visible;
  opacity: 0;
  transition: max-height .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease-out, margin-top .4s cubic-bezier(.4, 0, .2, 1);
  .second-content-menu.is-open & {
    /* 画面高さが低い場合、640px固定だと外側の.second-content-menu（position: fixed; bottom: 15px）ごと
       画面上端からはみ出してしまう（はみ出した分は内部スクロールがあっても画面外で操作できない）ため、
       ビューポート高さに応じて可変にする（140pxは外側のpadding・ボタン行・bottom余白分の目安） */
    max-height: min(640px, calc(100vh - 140px));
    margin-top: 16px;
    opacity: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* second-content-menu自体がis-hiddenで消える際、パネル側のmax-height/opacityのアニメーションが
     取り残されて中途半端な状態のまま見えてしまわないよう、パネルも即座にスナップさせる */
  .second-content-menu.is-hidden & {
    transition: none;
  }
  @media (width <= 896px) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: calc(100vh - 16px);
    /* パネル自体をスクロールコンテナにする（__panel-headはposition: stickyで常に上部に留まる） */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 24px 24px;
    background: #fff;
    border-radius: 16px 16px 0 0;
    translate: 0 100%;
    visibility: hidden;
    opacity: 1;
    transition: translate .35s ease-out, visibility 0s linear .35s;
    .second-content-menu.is-open & {
      /* 上のPC用ルール（max-height: 640px）は詳細度が同じ .second-content-menu.is-open & のため、
         ソース順が後ろのこちらが優先される。画面高さが低い端末でも100vh内に収まるよう明示的に上書きする */
      max-height: calc(100vh - 16px);
      translate: 0 0;
      visibility: visible;
      transition: translate .35s ease-out;
    }
  }
}
.second-content-menu__list {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 24px;
  width: 388px;
  max-width: 100%;
  padding-top: 24px;
  border-top: 1px dashed var(--main_c);
  @media (width <= 896px) {
    gap: 16px;
    width: auto;
    padding-top: 16px;
  }
}
.second-content-menu__item {
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--main_c);
}
.second-content-menu__link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--font_c);
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      color: var(--main_c);
      .second-content-menu__link-icon {
        translate: 0 3px;
      }
    }
  }
  /* ページ外リンク（右矢印）はhover時に矢印を右へ動かす */
  &:not([href^="#"]):hover {
    @media (hover: hover) {
      .second-content-menu__link-icon {
        translate: 3px 0;
      }
    }
  }
}
.second-content-menu__link-txt {
  word-break: keep-all;
  font-weight: 600;
  font-size: clamp(0.875rem, 0.5833rem + 0.5208vw, 1.125rem); /* 18~14(1664~896) */
}
.second-content-menu__link-icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 24px;
  height: 24px;
  transition: translate .3s ease-out;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/* Content Menu 内アコーディオン項目（サブカテゴリ一覧を持つ項目のみ）
   見出し行は「ページ内リンク（テキスト）」と「開閉トグル（+/-アイコン）」を別要素に分け、
   アコーディオンの開閉操作がジャンプリンクのクリックを邪魔しないようにする */
.second-content-menu__acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.second-content-menu__acc-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.second-content-menu__acc-icon {
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 24px;
}
.second-content-menu__acc-icon-bar {
  display: block;
  width: 12px;
  height: 2px;
  background: var(--main_c);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transition: rotate .3s ease-out;
  &:nth-child(2) {
    rotate: 90deg;
  }
  .second-content-menu__item--acc.is-open & {
    &:nth-child(2) {
      rotate: 0deg;
    }
  }
}
.second-content-menu__sub {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s ease-out, opacity .3s ease-out, margin-top .3s ease-out;
  .second-content-menu__item--acc.is-open & {
    max-height: 640px;
    margin-top: 16px;
    opacity: 1;
  }
}
.second-content-menu__sub-item {
  &:not(:first-child) {
    margin-top: 16px;
  }
}
.second-content-menu__sub-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc((12 / 16) * 1rem); /* 12px */
  letter-spacing: .04em;
  color: var(--font_c);
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      color: var(--main_c);
    }
  }
  &::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--main_c);
  }
}

/* ===== layout/_header.css ===== */

/* blockskip */
/* ============================================ */
#blockskip {
  overflow: hidden;
  height: 0;
  background: #ddd;
  text-align: center;
}

/* header */
/* ============================================ */
.header {
  --header-h: 140px;
  width: 100%;
  height: var(--header-h);
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 600;
  transition: all .3s ease-out;
  @media (width <= 1367px) {
    --header-h: 100px;
  }
  @media (width <= 896px) {
    --header-h: 80px;
  }
  &.--scrolled {
    --header-h: 100px;
    @media (width <= 1367px) {
      --header-h: 80px;
    }
    @media (width <= 896px) {
      --header-h: 64px;
    }
  }
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #F7F8F3 0%, transparent 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 450;
    pointer-events: none;
  }
}
.header-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 24px;
  padding: 0 60px;
  position: relative;
  z-index: 500;
  @media (width <= 1367px) {
    padding: 0 32px;
  }
  @media (width <= 896px) {
    gap: 0 8px;
    padding: 0 16px;
  }
}
.header-logo {
  margin-right: auto;
  line-height: 0;
  > a {
    display: block;
  }
  img {
    width: clamp(160px, 12vw, 230px);
    @media (width <= 896px) {
      width: 120px;
    }
  }
}
.header-contents {
  display: flex;
  align-items: center;
  gap: 32px;
  @media (width <= 1100px) {
    gap: 20px;
  }
  @media (width <= 896px) {
    display: none;
  }
}
.header-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  @media (width <= 1100px) {
    gap: 18px;
  }
}
.header-menu__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font_normal);
  font-size: clamp(0.875rem, 0.6563rem + 0.3906vw, 1.125rem); /* 18~14(1920~896) */
  font-weight: 600;
  color: var(--font_c);
  letter-spacing: .02em;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: var(--main_c);
    scale: 0 1;
    transform-origin: left;
    transition: scale .3s ease-out;
  }
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      &::before {
        scale: 1 1;
      }
    }
  }
  /* 閲覧中のページ（下層含む）の項目に下線を常時表示 */
  &[aria-current="page"]::before {
    scale: 1 1;
  }
}
.header-cv {
  flex-shrink: 0;
  @media (width <= 896px) {
    .header:has(.header-nav.--open) & {
      display: none;
    }
  }
}
.header-cv__link {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: calc((262 / 18) * 1em);
  padding: calc((24 / 18) * 1em) calc((32 / 18) * 1em);
  background: var(--cv_c);
  color: #fff;
  border-radius: 9999px;
  font-family: var(--font_normal);
  font-size: clamp(0.875rem, 0.6563rem + 0.3906vw, 1.125rem); /* 18~14(1920~896) */
  font-weight: 600;
  line-height: 1;
  transition: opacity .3s ease-out;
  @media (width <= 896px) {
    width: calc((108 / 10) * 1em);
    height: 40px;
    padding: calc((9 / 10) * 1em) calc((12 / 10) * 1em);
    font-size: calc((10 / 16) * 1rem); /* 10px */
  }
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 9999px;
    background: var(--font_c);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease-out;
  }
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      &::before {
        transform: scaleX(1);
      }
    }
  }
}
.header-cv__txt {
  flex: 1 0 0;
  text-align: center;
}
.header-cv__icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  svg {
    width: 100%;
    height: 100%;
  }
}

/* hamburger（SPのみ表示・濃色角丸） */
/* ============================================ */
.header-hamburger {
  display: none;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: var(--font_c);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  @media (width <= 896px) {
    display: block;
    width: 66px;
    height: 40px;
    border-radius: 100px;
  }
  &.--active {
    background: #e6e6e6;
    border-radius: 100px;
    z-index: 500;
    .header-hamburger__line {
      background: var(--font_c);
      &:nth-of-type(1) {
        translate: 0 0;
        rotate: -30deg;
      }
      &:nth-of-type(2) {
        opacity: 0;
      }
      &:nth-of-type(3) {
        translate: 0 0;
        rotate: 30deg;
      }
    }
  }
}
.header-hamburger__line {
  display: block;
  width: 24px;
  height: 1px;
  background: #fff;
  transition: rotate .3s ease-out, opacity .1s ease-out;
  position: absolute;
  inset: 0;
  margin: auto;
  &:nth-of-type(1) {
    translate: 0 -5px;
  }
  &:nth-of-type(3) {
    translate: 0 5px;
  }
}
/* ハンバーガーメニュー（SP・フルスクリーンオーバーレイ） */
.header-nav {
  width: 100%;
  height: 100dvh;
  background: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 400;
  visibility: hidden;
  translate: 0 -100%;
  transition: translate .4s ease-out, visibility 0s linear .4s;
  overflow: hidden;
  @media (width > 896px) {
    display: none;
  }
  &.--open {
    visibility: visible;
    translate: 0 0;
    transition: translate .4s ease-out, visibility 0s linear 0s;
  }
}
.header-nav__inner {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--header-h) + 24px) 30px 80px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.header-nav__list {
  width: 100%;
}
.header-nav__item {
  border-top: 1px dashed var(--line_c);
}
.header-nav__item--last {
  border-bottom: 1px dashed var(--line_c);
}
.header-nav__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 10px;
  color: var(--font_c);
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      .header-nav__en { color: var(--main_c); }
    }
  }
  /* 閲覧中のページ（下層含む）の項目を強調 */
  &[aria-current="page"] .header-nav__en { color: var(--main_c); }
}
.header-nav__en {
  min-width: 110px;
  font-family: var(--font_en);
  font-size: calc((20 / 16) * 1rem); /* 20px */
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  transition: color .3s ease-out;
}
.header-nav__jp {
  flex: 1;
  font-size: calc((14 / 16) * 1rem); /* 14px */
  font-weight: 400;
}
.header-nav__arrow {
  flex-shrink: 0;
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--main_c);
  svg {
    width: 100%;
    height: 100%;
  }
}
.header-nav__sub {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 24px;
}
.header-nav__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  background: #f7f8f3;
  border-radius: 2px;
  color: var(--font_c);
  font-size: calc((12 / 16) * 1rem); /* 12px */
  letter-spacing: .06em;
  line-height: 1.8;
}
.header-nav__subarrow {
  flex-shrink: 0;
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--main_c);
  svg {
    width: 100%;
    height: 100%;
  }
}
.header-nav__ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}
.header-nav__contact {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 70px;
  padding: 0 32px;
  background: var(--cv_c);
  border-radius: 100px;
  color: #fff;
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      background: color-mix(in srgb, var(--cv_c) 85%, #000);
    }
  }
}
.header-nav__contact-icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 22px;
  height: 22px;
  svg {
    width: 100%;
    height: 100%;
  }
}
.header-nav__contact-txt {
  flex: 1;
  text-align: center;
  font-size: calc((18 / 16) * 1rem); /* 18px */
  font-weight: 600;
}
.header-nav__recruit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 70px;
  padding: 0 32px;
  border-radius: 100px;
  overflow: clip;
  color: #fff;
  background: var(--font_c);
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../images/common/menu_recruit.webp) top center / cover;
  }
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: color-mix(in srgb, #000 40%, transparent);
  }
  &:hover {
    @media (hover: hover) {
      opacity: 1;
    }
  }
}
.header-nav__recruit-txt {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
  font-family: var(--font_en);
  font-size: calc((20 / 16) * 1rem); /* 20px */
  font-weight: 800;
  letter-spacing: .1em;
}
.header-nav__recruit-icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  width: 16px;
  height: 16px;
  svg {
    width: 100%;
    height: 100%;
  }
}
.header-nav__privacy {
  align-self: center;
  font-size: calc((14 / 16) * 1rem); /* 14px */
  color: var(--font_c);
}
.header-nav__bottom {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.overlay {
  display: block;
  width: 0;
  height: 0;
  background: color-mix(in srgb, #000 50%, transparent);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  opacity: 0;
  transition: opacity .3s ease-out;
  &.--open {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  /* SPはフルスクリーンメニュー（半透明）のため暗幕は不要 */
  @media (width <= 896px) {
    display: none;
  }
}

/* ===== layout/_footer.css ===== */

/* footer */
/* ============================================ */
.footer {
  background: #fff;
  position: relative;
  z-index: 200;
}
.footer__inner {
  padding: 80px 0 32px;
  @media (width <= 896px) {
    padding: 56px 0 64px;
  }
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 96px;
  @media (width <= 1025px) {
    flex-direction: column;
    gap: 48px;
    padding-bottom: 64px;
  }
}

/* footer 会社情報 */
.footer-company {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: 691px;
  @media (width <= 896px) {
    gap: 24px;
  }
}
.footer-company__logo {
  line-height: 0;
  img {
    width: 230px;
    @media (width <= 896px) {
      width: 190px;
    }
  }
}
.footer-company__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--font_c);
}
.footer-company__name {
  font-size: calc((18 / 16) * 1rem); /* 18px */
  font-weight: 600;
}
.footer-company__tel {
  font-size: var(--fs_s); /* 14~12 */
  line-height: 1.8;
  letter-spacing: .06em;
}
.footer-company__address {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-company__addr {
  font-size: var(--fs_s); /* 14~12 */
  line-height: 1.8;
  letter-spacing: .06em;
}
.footer-company__mark {
  line-height: 0;
  img {
    width: 90px;
  }
}

/* footer ナビ */
.footer-nav {
  display: flex;
  justify-content: flex-end;
  gap: 60px;
  @media (width <= 1367px) {
    gap: 40px;
  }
  @media (width <= 896px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 16px calc((64 / 375) * 100vw);
  }
  @media (width <= 480px) {
    gap: 16px;
  }
}
.footer-nav__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: clamp(8.75rem, 5.833rem + 5.208vw, 11.25rem); /* 180~140(1664~896) */
  @media (width <= 896px) {
    width: auto;
    gap: 16px;
  }
  &:nth-child(1) {
    @media (width <= 896px) {
      grid-column: 1;
      grid-row: 1 / span 2;
    }
  }
  &:nth-child(2) {
    @media (width <= 896px) {
      grid-column: 2;
      grid-row: 1;
    }
  }
  &:nth-child(3) {
    @media (width <= 896px) {
      grid-column: 2;
      grid-row: 2;
    }
  }
}
.footer-nav__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-nav__head {
  word-break: keep-all;
  font-size: clamp(0.875rem, 0.5833rem + 0.5208vw, 1.125rem); /* 18~14(1664~896) */
  font-weight: 600;
}
.footer-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--font_c);
  &::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: var(--main_c);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease-out;
  }
  @media (hover: hover) {
    &:hover {
      opacity: 1;
      color: var(--main_c);
      &::before {
        transform: scaleX(1);
      }
    }
  }
}
.footer-nav__sub {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-nav__subitem {
  word-break: keep-all;
  font-size: var(--fs_s);
  line-height: 1.8;
  letter-spacing: .06em;
  > a {
    position: relative;
    display: inline-block;
    color: var(--font_c);
    &::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 100%;
      height: 1px;
      background: var(--main_c);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s ease-out;
    }
    @media (hover: hover) {
      &:hover {
        opacity: 1;
        color: var(--main_c);
        &::before {
          transform: scaleX(1);
        }
      }
    }
  }
}

/* footer 下部バー */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line_c);
  @media (width <= 896px) {
    flex-wrap: wrap;
    gap: 16px 12px;
  }
}
.footer-bottom__logos {
  display: flex;
  align-items: center;
  gap: 24px;
  @media (width <= 896px) {
    flex-basis: 100%;
    justify-content: center;
    margin-bottom: 8px;
  }
}
.footer-bottom__aap {
  width: 70px;
  height: auto;
  @media (width <= 896px) {
    width: 52px;
  }
}
.footer-bottom__ryoken {
  width: 180px;
  height: auto;
  @media (width <= 896px) {
    width: 135px;
  }
}
.footer-copyright {
  font-family: var(--font_en);
  font-size: clamp(0.625rem, 0.4792rem + 0.2604vw, 0.75rem); /* 12~10(1664~896) */
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: capitalize;
  color: color-mix(in srgb, var(--font_c) 50%, transparent);
}
.footer-pagetop {
  font-family: var(--font_en);
  font-size: calc((14 / 16) * 1rem); /* 14px */
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: capitalize;
  > a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--font_c);
    &:hover {
      @media (hover: hover) {
        opacity: 1;
        color: var(--main_c);
        .footer-pagetop__circle {
          background-color: var(--font_c);
          &::after {
            translate: 0 -3px;
          }
        }
      }
    }
  }
  @media (width <= 896px) {
    font-size: 0; /* SPは「page top」テキストを隠し、円のみ表示 */
  }
}
.footer-pagetop__circle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  @media (width <= 896px) {
    width: 40px;
    height: 40px;
  }
  background-color: var(--main_c);
  -webkit-mask-image: url(../images/common/btn_mark.svg);
  mask-image: url(../images/common/btn_mark.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: background-color .3s ease-out;
  &::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    rotate: -90deg;
    background-color: #fff;
    -webkit-mask-image: url(../images/common/arrow_right_white.svg);
    mask-image: url(../images/common/arrow_right_white.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transition: translate .3s ease-out;
    @media (width <= 896px) {
      width: 18px;
      height: 18px;
    }
  }
}

/* notfound (404) */
/* ============================================ */

/* ヒーロー（privacyページの.privacy-heroと同じ構成） */
.notfound-hero {
  padding: 200px 0 64px;
  @media (width <= 896px) {
    padding: 120px 0 32px;
  }
}

/* 本文エリア */
.notfound-main {
  padding-top: 48px;
  position: relative;
  @media (width <= 896px) {
    padding-top: 24px;
  }
}
.notfound-main__link {
  text-align: center;
}

/* GSAP導入アニメーション：初期表示のちらつき防止 */
/* ============================================ */
/* JS実行前後で見た目が変わらないよう、GSAPが gsap.from() で
   アニメーションさせる要素をあらかじめ非表示にしておく。
   .js は head.php 内の同期スクリプトで <html> に付与される
   （no-js環境・JS実行前に一瞬素の状態が見えるのを防ぐため）。
   reduced-motionやGSAP読み込み失敗時は各JS側でopacityを戻す。 */
.js .second-headline__jp,
.js .second-headline__en,
.js .second-heading2__en,
.js .second-heading2__jp,
.js .second-contact .second-headline__en,
.js .second-contact .second-headline__jp,
.js .second-contact__ttl {
  opacity: 0;
}