@charset "UTF-8";

/* ==========================================================================
   作業用スタイルシート

   このファイルはサーバー上で直接編集してよい。
   デプロイ（git push production）で上書き・削除されないよう、
   post-receive フックの rsync から除外してある。

   ・読み込み順は style.css のあと
   ・ただし SWELL 本体（main.css）には詳細度で負けることがある。
     本文内の要素を触るときは `.post_content` を頭に付けると確実
   ・管理画面から編集する場合
       外観 → テーマファイルエディター → SWELL CHILD → custom.css
   ・サーバー上の場所
       ~/ken-inc.jp/public_html/dev/wp-content/themes/swell_child/custom.css

   ローカルへ取り込む（Git に残す）とき
       scp xserver-ken:~/ken-inc.jp/public_html/dev/wp-content/themes/swell_child/custom.css \
           D:/Claude/m-kankou-en/themes/swell_child/custom.css

   ローカルからサーバーへ送るとき（上書きに注意）
       scp D:/Claude/m-kankou-en/themes/swell_child/custom.css \
           xserver-ken:~/ken-inc.jp/public_html/dev/wp-content/themes/swell_child/custom.css
   ========================================================================== */


/* ==========================================================================
   1. 本文全体にかかる指定
   ========================================================================== */

/* --------------------------------------------------------------------------
   段落
   -------------------------------------------------------------------------- */

.post_content p {
  font-size: 0.94rem; /* = 15.04px。16px なら 1rem */
  line-height: 1.95; /* 英文は 1.7〜2.0 が読みやすい */
  letter-spacing: 0.01em; /* 英文は入れすぎると散漫になる */
  margin-bottom: 1.6em; /* 段落間 */
}


/* --------------------------------------------------------------------------
   見出しの書体

   見出しは明朝、本文はゴシック。書体で役割を分けることで、
   大きさが近くても「見出しである」と一目で分かるようにしている。
   ロゴ・ヒーローの Cormorant Garamond と同じガラモン系なので、
   ページ全体で書体の系統がつながる。

   ※ Cormorant Garamond は線が細く小さい字では潰れるため、
      見出しには EB Garamond を使う（本文サイズでも読める）。

   ※ 字間について
      全て大文字の見出しは字が詰まって見えるので 0.08em 開けている。
      通常の大文字小文字混じり（Sentence case）の見出しが主になったら、
      0.02em 程度まで詰めた方が自然に見える。
   -------------------------------------------------------------------------- */

#content h1,
.post_content h2,
.post_content h3,
.post_content h4,
.post_content h5,
.post_content h6 {
  font-family: "EB Garamond", "Shippori Mincho", "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN", serif;
  letter-spacing: 0.08em;
	font-weight: 400;
}


/* --------------------------------------------------------------------------
   見出しの色

   カスタマイザーの「基本カラー > メインカラー」に連動させる。
     カスタマイズ → サイト全体設定 → 基本カラー → メインカラー

   ※ SWELL の「見出しのキーカラー」（--color_htag）は使わない。
      あれは見出し装飾（背景・罫線）専用の色で、デザインを
      「装飾なし」にしていると別の値を持てるため、
      サイトの基調色とずれる余地がある。

   濃い背景に置くときは mk-onDark を付ける。白抜きになる（下の項）。
   -------------------------------------------------------------------------- */

#content h1,
.post_content h2,
.post_content h3,
.post_content h4,
.post_content h5,
.post_content h6 {
  color: var(--color_main);
}

/*
 * SWELL の見出しスタイル（ブロック設定の「スタイル」）対策。
 *   .post_content .is-style-section_ttl { color: inherit }   詳細度 0-2-0
 * が上の指定（0-1-1）に勝ってしまい、本文の文字色を継承していた。
 *
 * `h2[class]` は属性セレクタがクラス1個分に数えられるので 0-2-1 になり、
 * スタイル名を1つずつ並べなくても、どの is-style-* にも先回りできる。
 * ブロックの見出しには必ず wp-block-heading が付くため取りこぼさない。
 */
#content h1[class],
.post_content h2[class],
.post_content h3[class],
.post_content h4[class],
.post_content h5[class],
.post_content h6[class] {
  color: var(--color_main);
}


/* --------------------------------------------------------------------------
   見出しの文字サイズ

   ページ内の見出しは h2 から始める（h1 はページタイトルが使う）。
   SWELL 既定は h3〜h6 が 16.5 / 15.75 / 15 / 15px とほぼ同じで、
   階層が見た目に出ていなかった。段差をはっきりさせる。

     h2  セクション見出し
     h3  小見出し
     h4  さらに下の区切り
     h5  補助的なラベル
     h6  最小の見出し（本文とほぼ同じ大きさ）
   -------------------------------------------------------------------------- */

.post_content h2 {
  font-size: 30px;
}

.post_content h3 {
  font-size: 22px;
}

.post_content h4 {
  font-size: 19px;
}

.post_content h5 {
  font-size: 17px;
}

.post_content h6 {
  font-size: 16px;
}


/* --------------------------------------------------------------------------
   見出しの余白

   SWELL 既定は h3 の上余白が 62px ある一方 h5/h6 は 0 で、
   サイズの階層と余白の階層が対応していない。
   単位は em なので、文字サイズを変えれば余白も追従する。
   -------------------------------------------------------------------------- */

.post_content h2 {
  margin-top: 1em;
  margin-bottom: 0.7em;
  margin-left: 0;
}

.post_content h3 {
  margin-top: 1em;
  margin-bottom: 0.7em;
}

.post_content h4 {
  margin-top: 1em;
  margin-bottom: 0.6em;
}

.post_content h5,
.post_content h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

/* セクションの先頭に来た見出しは、上の余白を打ち消す */
.post_content h2:first-child,
.post_content h3:first-child,
.post_content h4:first-child,
.post_content h5:first-child,
.post_content h6:first-child {
  margin-top: 0;
}


/* --------------------------------------------------------------------------
   画像のホバー拡大

   本文中の画像にカーソルを載せると、ゆっくり拡大する。
   既定の対象は「リンクの張られた画像」だけ。
   クリックできない画像が動くと、押せると誤解させるため。
   リンクが無くても拡大させたいときは mk-zoom、
   リンクがあっても拡大させたくないときは mk-nozoom（下のユーティリティ参照）。
   -------------------------------------------------------------------------- */

.post_content figure.wp-block-image {
  overflow: hidden; /* 拡大した画像を枠内に収める。必須 */
}

.post_content figure.wp-block-image img {
  transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
}

/* 既定。`a:hover` で受けるので、リンクの無い画像には最初から当たらない */
.post_content figure.wp-block-image a:hover img {
  transform: scale(1.08);
}

/*
 * mk-zoom … リンクが無い画像も拡大させる
 *
 * 画像ブロックに直接付けた場合（1本目）と、
 * グループやカラムに付けて範囲ごと対象にする場合（2本目）。
 */
.post_content figure.wp-block-image.mk-zoom:hover img,
.post_content .mk-zoom:hover figure.wp-block-image img {
  transform: scale(1.08);
}

/*
 * mk-nozoom … リンクがあっても拡大させない
 *
 * 打ち消す相手は上の2本（詳細度 0-3-3 と 0-4-2）。
 * 画像ブロックに直接クラスを付けると figure に付くので、
 * `figure.wp-block-image.mk-nozoom:hover img`（0-4-2）で受ける。
 * 要素数では負けるが、クラス数が多いほうが先に効くので両方に勝つ。
 * グループやカラムに付けた場合は祖先側で当たる（2本目・3本目）。
 */
.post_content figure.wp-block-image.mk-nozoom:hover img,
.post_content .mk-nozoom figure.wp-block-image:hover img,
.post_content .mk-nozoom:hover figure.wp-block-image img {
  transform: none;
}

/* 動きを抑える設定の環境では拡大しない */
@media (prefers-reduced-motion: reduce) {
  .post_content figure.wp-block-image img {
    transition: none;
  }

  .post_content figure.wp-block-image a:hover img,
  .post_content figure.wp-block-image.mk-zoom:hover img,
  .post_content .mk-zoom:hover figure.wp-block-image img {
    transform: none;
  }
}


/* ==========================================================================
   2. ユーティリティクラス

   ブロックの「高度な設定 > 追加CSSクラス」に入力して使う。
   特定のパーツに紐づかない、どのページでも使えるものだけを置く。

     mk-go        見出しをゴシックに戻す（見出しの既定は明朝）
     mk-nospace   余白をゼロに
     mk-lead      大きめのリード文
     mk-linkText  小さな大文字リンク
     mk-eyebrow   見出しの上に置く小さな大文字ラベル
     mk-badge     見出しの上に置く小さな枠のラベル（日数・定員など）
     mk-sampleNotice 「これは見本」と分かるようにする帯（ページ最上部）
     mk-sdgIcons  SDGsのアイコンを並べる（フレックスのグループに付ける）
     mk-zoom      リンクの無い画像もホバーで拡大させる
     mk-nozoom    リンクがあっても拡大させない
     mk-step      ステップブロックをPCで横並びに
   ========================================================================== */

/* --------------------------------------------------------------------------
   mk-go … ゴシックに切り替える

   見出しは既定で明朝、本文は既定でゴシック。
   このクラスは「見出しをゴシックに戻したい」ときに使う。
   グループやカラムに付ければ、その中の見出しもまとめて変わる。
   SWELL の `.post_content h2`（詳細度 0-1-1）に勝つため、
   セレクタに .post_content を重ねてある。
   -------------------------------------------------------------------------- */

.mk-go,
.post_content .mk-go,
.mk-go h1,
.mk-go h2,
.mk-go h3,
.mk-go h4,
.mk-go h5,
.mk-go h6,
.post_content .mk-go h1,
.post_content .mk-go h2,
.post_content .mk-go h3,
.post_content .mk-go h4,
.post_content .mk-go h5,
.post_content .mk-go h6 {
  font-family: var(--mk-sans);
}


/* --------------------------------------------------------------------------
   mk-nospace … 余白をゼロにする

   SWELL が見出しに与えている上下マージン・左右パディングを打ち消す。
   グループやカラムに付ければ、その中の要素もまとめて 0 になる。
   -------------------------------------------------------------------------- */

.mk-nospace,
.post_content .mk-nospace,
.post_content h1.mk-nospace,
.post_content h2.mk-nospace,
.post_content h3.mk-nospace,
.post_content h4.mk-nospace,
.post_content h5.mk-nospace,
.post_content h6.mk-nospace,
.post_content .mk-nospace h1,
.post_content .mk-nospace h2,
.post_content .mk-nospace h3,
.post_content .mk-nospace h4,
.post_content .mk-nospace h5,
.post_content .mk-nospace h6,
.post_content .mk-nospace p,
.post_content .mk-nospace figure {
  margin: 0;
  padding: 0;
}


/* --------------------------------------------------------------------------
   mk-eyebrow … 見出しの上に置く小さな大文字ラベル

   「何のセクションか」を一語で示すための小さな文字。
   見出しを大きくせずに区切りを作れるので、CTAやセクションの頭に使う。
   パンくず・MENU・mk-linkText と同じ書式（小さな大文字＋広い字間）。
   -------------------------------------------------------------------------- */

.post_content .mk-eyebrow {
  margin-bottom: 1.2em;
  color: var(--mk-ink-soft);
  font-family: var(--mk-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   mk-sdgIcons … SDGsのアイコンを並べる

   フレックスのグループブロックに付けて使う。
   アイコンは中身が細かいので、小さくしすぎない（88px）。
   -------------------------------------------------------------------------- */

/* 表側ではフレックスの gap が効かず、アイコン同士がくっついてしまう。
   編集画面（WordPress既定の 0.5em ＝ 8px）に合わせる */
.post_content .mk-sdgIcons {
  gap: 8px;
}

.post_content .mk-sdgIcons figure {
  margin: 0;
}

.post_content .mk-sdgIcons img {
  width: 88px;
  height: auto;
  border-radius: 4px;
}


/* --------------------------------------------------------------------------
   mk-sampleNotice … 「これは見本」と分かるようにする帯

   本番と並べても取り違えないように、ページの一番上に置く。
   段落ブロックにクラスを付けるだけで、SAMPLE の札は CSS 側で出す。
   -------------------------------------------------------------------------- */

.post_content .mk-sampleNotice {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  padding: 12px 18px;
  border: dashed 1px #c8873c;
  border-radius: 6px;
  background: rgba(200, 135, 60, 0.07);
  color: var(--color_text);
  font-family: var(--mk-sans);
  font-size: 13px;
  line-height: 1.7;
}

.post_content .mk-sampleNotice::before {
  content: "SAMPLE";
  flex: none;
  padding: 3px 10px;
  border-radius: 3px;
  background: #c8873c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
   mk-badge … 見出しの上に置く小さな枠のラベル

   mk-eyebrow が「文字だけ」なのに対し、こちらは枠で囲む。
   日数・定員・季節など、値そのものを見せたいときに使う。
   段落ブロックに付けて使う（インラインなので幅は中身に合う）。
   -------------------------------------------------------------------------- */

.post_content .mk-badge {
  display: inline-block;
  padding: 3px 12px;
  border: solid 1px var(--color_main);
  border-radius: 999px;
  color: var(--color_main);
  font-family: var(--mk-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.7;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   mk-lead … 大きめのリード文
   -------------------------------------------------------------------------- */

.post_content .mk-lead {
  font-family: "EB Garamond", "Shippori Mincho", "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN", serif;
  /* px 指定。スマホで rem が縮む影響を受けないようにする */
  font-size: clamp(15px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
}


/* --------------------------------------------------------------------------
   mk-linkText … 小さな大文字リンク。下線がホバーで伸びる

   色はカスタマイザー（基本カラー > リンクカラー）で指定する。
   下線は currentColor なので、リンクカラーを変えれば線も追従する。
   -------------------------------------------------------------------------- */

.post_content .mk-linkText a {
  position: relative;
  display: inline-block;
  padding-bottom: 7px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}

.post_content .mk-linkText a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0.3); /* 通常時は短い線 */
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.2, 0, 0.2, 1);
}

/* ホバーで左端を起点に全幅まで伸びる */
.post_content .mk-linkText a:hover::after {
  transform: scaleX(1);
}


/* ==========================================================================
   mk-step … ステップブロックをPCで横並びにする

   PC     … 横並び。つなぎ線は丸の中心を通る横線
   スマホ … SWELL 既定の縦並びのまま、ブロックだけ中央に寄せる
            （縦の線がそのまま残るので、順序が分かりやすい）

   クラスはどちらに付けてもよい。
     ・ステップブロック自体（「高度な設定 > 追加CSSクラス」）… 基本はこちら
     ・囲っているグループやカラム … その中のステップがまとめて横並びになる

   ステップブロック自身を指す指定だけ、2つの形を並べて書いてある。
     .mk-step.swell-block-step   ブロックに直接付けた場合
     .mk-step .swell-block-step  親に付けた場合
   子要素（__item など）は必ずブロックの中にあるので
   `.mk-step .swell-block-step__item` の1本で両方に効く。

   ※ クラスを付けなければ SWELL 既定の縦並びのまま。本体の挙動は変えていない。
   ========================================================================== */

/* --- 見出しをサイトの設計に合わせる（既定は Jost の 700 で太い） ----------- */

/*
 * セレクタに __item を挟んでいるのは、ファイル末尾の
 * 「太字を一律500に落とす」の `.swell-block-step__item .swell-block-step__title`
 * （詳細度 0-2-0）に勝って、ここだけ 400 を保つため。
 */
.mk-step .swell-block-step__item .swell-block-step__title {
  font-family: "EB Garamond", "Shippori Mincho", "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN", serif;
  /* rem はエディタとフロントで基準が違うため px で固定する */
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: var(--color_htag);
}

/* 見出しと説明文の距離を詰める */
.mk-step .swell-block-step__body {
  margin-top: 0;
}

/* --- PC（960px以上）：横並び ------------------------------------------------
   区切りは SWELL 本体と同じ 960px に合わせる。
   独自の値（781px など）にすると、中間幅で SWELL の指定と混ざって崩れる。
   -------------------------------------------------------------------------- */

@media (min-width: 960px) {
  .mk-step.swell-block-step,
  .mk-step .swell-block-step {
    display: flex;
  }

  .mk-step .swell-block-step__item {
    flex: 1 1 0;
    padding: 0 1.5em 0 0;
    text-align: center;
  }

  /* 番号を中央へ。SWELL は絶対配置で左端に固定しているので流れに戻す */
  .mk-step .swell-block-step__number {
    position: static;
    margin: 0 auto 1.2em;
  }

  /*
   * SWELL は本文に margin-left:-48px を当てている。
   * `:not()` を重ねた詳細度 0-4-3 の強いセレクタなので、
   * 同じ構造で受けないと打ち消せない。
   */
  .mk-step.swell-block-step:not(.is-style-big):not(.is-style-small)
    > .swell-block-step__item
    > .swell-block-step__body,
  .mk-step .swell-block-step:not(.is-style-big):not(.is-style-small)
    > .swell-block-step__item
    > .swell-block-step__body {
    margin-left: 0;
    margin-top: 0;
  }

  .mk-step .swell-block-step__title {
    padding-left: 0;
  }

  /* つなぎ線を横向きに。top の 23px は番号の丸（48px）の半径 */
  .mk-step .swell-block-step__item::before {
    top: 23px;
    left: calc(50% + 30px);
    width: calc(100% - 60px);
    height: 0;
    border-left: none;
    border-top: 1px dashed var(--color_border);
  }

  .mk-step .swell-block-step__item:last-child::before {
    content: none;
  }

  .mk-step .swell-block-step__item:last-child {
    padding-right: 0;
  }
}

/* --- スマホ・タブレット（959px以下）：SWELL 既定のまま中央寄せ -------------- */

@media (max-width: 959px) {
  .mk-step.swell-block-step,
  .mk-step .swell-block-step {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 本文が丸の下に回り込んで線と重なるので、見出しと同じ位置に揃える */
  .mk-step.swell-block-step:not(.is-style-big):not(.is-style-small)
    > .swell-block-step__item
    > .swell-block-step__body,
  .mk-step .swell-block-step:not(.is-style-big):not(.is-style-small)
    > .swell-block-step__item
    > .swell-block-step__body {
    margin-left: 0;
  }
}

/* --- 600px未満でも線を出す --------------------------------------------------
   SWELL は 600px 未満で
     .swell-block-step__item:before { display: none }
     .swell-block-step__body { margin-left: -48px }
   として、線を消し本文を丸の下に回り込ませる設計になっている。
   このサイトでは線を残したいので、同じ詳細度（0-4-3）で打ち消す。
   -------------------------------------------------------------------------- */

@media (max-width: 599px) {
  .mk-step.swell-block-step:not(.is-style-big):not(.is-style-small)
    > .swell-block-step__item::before,
  .mk-step .swell-block-step:not(.is-style-big):not(.is-style-small)
    > .swell-block-step__item::before {
    display: block;
  }

  .mk-step.swell-block-step:not(.is-style-big):not(.is-style-small)
    > .swell-block-step__item
    > .swell-block-step__body,
  .mk-step .swell-block-step:not(.is-style-big):not(.is-style-small)
    > .swell-block-step__item
    > .swell-block-step__body {
    margin-left: 0;
  }
}

/* --- つなぎ線の色 ------------------------------------------------------------
   SWELL 既定は薄いグレーの50%で、明るい背景の上ではほぼ見えない。
   -------------------------------------------------------------------------- */

.mk-step .swell-block-step__item::before {
  border-color: rgba(43, 41, 38, 0.3);
}


/* ==========================================================================
   ボタン

   SWELL の塗りボタン（is-style-btn_normal）だけ weight 700 で、
   線のボタン（btn_line）や本文の 400 と揃っていない。
   サイト全体の設計に合わせて 400 に落とし、字間を少し開けて品を保つ。
   ========================================================================== */

.post_content .swell-block-button__link {
  font-weight: 400;
  letter-spacing: 0.08em;
}


/* ==========================================================================
   フッター直前の余白

   SWELL は .l-content に margin-bottom（約81px）を入れている。
   このサイトの固定ページはセクションが自前で余白を持ち、最後のブロックが
   背景色を敷いていることが多いため、ここに余白があると背景が途切れて見える。

   .page はトップページと固定ページの両方に付く（投稿・アーカイブには付かない）。
   ========================================================================== */

.page .l-content {
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   mk-onDark … 濃い背景の上で使う

   文字・見出し・リンク・下線をすべて白系にする。
   背景色はブロック側で設定し、このクラスは文字色だけを担当する。
   グループやカラムの「追加CSSクラス」に入力して使う。
   -------------------------------------------------------------------------- */

.post_content .mk-onDark,
.post_content .mk-onDark p,
.post_content .mk-onDark li,
.post_content .mk-onDark h1,
.post_content .mk-onDark h2,
.post_content .mk-onDark h3,
.post_content .mk-onDark h4,
.post_content .mk-onDark h5,
.post_content .mk-onDark h6,
/* 見出しの色（上の項）で 0-2-1 を使っているので、こちらも 0-3-1 で受ける */
.post_content .mk-onDark h1[class],
.post_content .mk-onDark h2[class],
.post_content .mk-onDark h3[class],
.post_content .mk-onDark h4[class],
.post_content .mk-onDark h5[class],
.post_content .mk-onDark h6[class] {
  color: #fff;
}

/* リンクも白に。下線は currentColor なので自動で追従する */
.post_content .mk-onDark a,
.post_content .mk-onDark .mk-linkText a {
  color: #fff;
}

/* 本文中のリンクは、白のままだと本文と区別がつかないので下線を残す */
.post_content .mk-onDark p a:not(.swell-block-button__link) {
  text-decoration-color: rgba(255, 255, 255, 0.5);
}


/* ==========================================================================
   フッター直前の余白（最後のフルワイドブロック）

   SWELL はフルワイドブロックに margin-bottom（約42px）を与える。
   最後のブロックは背景色を敷いているため、この余白があると
   背景が途切れてフッターとの間に隙間ができる。
   ========================================================================== */

.home .post_content > .swell-block-fullWide:last-of-type {
  margin-bottom: 0;
}


/* ==========================================================================
   下層ページのヘッダー

   SWELL 既定ではヘッダーバー（上段）が濃紺、ロゴ行（下段）が白で
   分断されて見える。トップページと同じ静けさを保つため、
   下層ページでは全体を白基調に統一する。
   （トップページはヒーローに重ねる透過ヘッダーなので対象外）

   ※ SWELL は body ではなく body 直下のラッパー div に home クラスを付ける。
      body:not(.home) では常に成立してしまうので body > div:not(.home) を使う。
   ========================================================================== */

body > div:not(.home) .l-header__bar {
  background-color: transparent;
  color: var(--mk-ink);
}

/* ボタン。既定のリンクカラー（青）をやめ、細い線に */
body > div:not(.home) .mk-headBar .widget_nav_menu a {
  color: var(--mk-ink);
  border-color: rgba(43, 41, 38, 0.28);
}

body > div:not(.home) .mk-headBar .widget_nav_menu a:hover {
  background-color: var(--color_main);
  border-color: var(--color_main);
  color: #fff;
}

/* Instagram・検索アイコン */
body > div:not(.home) .l-header__bar .c-iconList__link,
body > div:not(.home) .l-header .mk-headIcon {
  color: var(--mk-ink);
}

/* ロゴ上の地名ラベル。本文と同じ濃さだと主張が強いので落とす */
body > div:not(.home) .l-header .c-headLogo::before {
  color: var(--mk-ink-soft);
}

/* 下端に細い境界線を入れて、コンテンツとの境目をつくる */
body > div:not(.home) .l-header {
  border-bottom: 1px solid rgba(43, 41, 38, 0.1);
  box-shadow: none;
}


/* ==========================================================================
   カスタマイザーのメインカラーに連動させる

   SWELL は「基本カラー > メインカラー」を --color_main として出力する。
   固定値ではなくこの変数を参照することで、カスタマイザーで色を変えれば
   ヘッダー・ナビ・ボタンがまとめて追従する。
   ========================================================================== */

/*
 * ナビゲーション。現在地と下線をメインカラーに。
 * トップページはヒーローに重なる透過ヘッダーで白文字なので対象外にする。
 *
 * ※ セレクタには必ず .l-header を挟むこと。
 *    追従ヘッダー（.l-fixHeader）も同じラッパー div の中にあるため、
 *    省くと下層ページだけ追従ヘッダーの色が変わってしまう。
 */
body > div:not(.home) .l-header .c-gnav > li > a::after {
  background-color: var(--color_main);
}

body > div:not(.home) .l-header .c-gnav > .-current > a,
body > div:not(.home) .l-header .c-gnav > li > a:hover {
  color: var(--color_main);
}

/* ヘッダーのボタン（下層ページ） */
body > div:not(.home) .mk-headBar .widget_nav_menu a {
  color: var(--color_main);
  border-color: var(--color_main);
}

/* Instagram・検索アイコン */
body > div:not(.home) .l-header__bar .c-iconList__link,
body > div:not(.home) .l-header .mk-headIcon {
  color: var(--color_main);
}

/* ロゴ */
body > div:not(.home) .l-header .c-headLogo__link {
  color: var(--color_main);
}

/* パンくず */
body > div:not(.home) .p-breadcrumb a {
  color: var(--color_main);
}


/* ==========================================================================
   下層ページのヘッダーの余白とパンくず
   ========================================================================== */

/* --- ヘッダーに上下の余白を持たせる ---------------------------------------- */

body > div:not(.home) .l-header__inner {
  padding-top: 14px;
  padding-bottom: 22px;
}

/* --- 下層ページのロゴ・地名 --------------------------------------------------
   トップは写真の上に白抜きで乗るため細字（300）が映えるが、
   下層は白背景に濃色で乗るので、同じ太さだと弱く見える。
   一段上げて 400 にする。

   ※ 下層ページは追従前と追従中で見た目を変えない。
      追従ヘッダー側の指定は下の「追従ヘッダーのロゴ」を参照。
   -------------------------------------------------------------------------- */

body > div:not(.home) .l-header .c-headLogo.-txt .c-headLogo__link,
body > div:not(.home) .l-header .c-headLogo .c-headLogo__link {
  font-weight: 400;
}

body > div:not(.home) .l-header .c-headLogo::before {
  font-weight: 500;
  opacity: 0.8;
}

/* --- パンくず ---------------------------------------------------------------
   背景の帯をやめる。本文背景と色が近く、区切りとして機能していないため。
   小さな大文字＋広めの字間で、ページの位置を静かに示す。

   ※ HOME はアイコンとテキストが同じ要素（span.icon-home）に入っている。
      要素ごと消すとテキストまで消えるので、アイコンの擬似要素だけ隠す。
   -------------------------------------------------------------------------- */

body > div:not(.home) .p-breadcrumb {
  background-color: transparent;
  padding: 13px 0; /* 上下同じ。境界に張り付かせない */
}

body > div:not(.home) .p-breadcrumb__list {
  gap: 0.9em;
}

body > div:not(.home) .p-breadcrumb__text {
  font-family: var(--mk-sans);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body > div:not(.home) .p-breadcrumb a .p-breadcrumb__text,
body > div:not(.home) .p-breadcrumb a {
  color: var(--mk-ink-soft);
  transition: opacity 0.25s;
}

body > div:not(.home) .p-breadcrumb a:hover {
  opacity: 0.6;
}

/* 現在地はメインカラーで少し濃く */
body > div:not(.home) .p-breadcrumb__item:last-child .p-breadcrumb__text {
  color: var(--color_main);
}

/* 家のアイコンだけ消す。テキスト（HOME）は残す */
body > div:not(.home) .p-breadcrumb .icon-home::before {
  content: none;
}

/*
 * 項目間の区切り。SWELL 既定の山括弧（項目の ::after で描かれる）を消し、
 * 細い横線に置き換える。両方出ると二重になるので既定側を必ず消すこと。
 */
body > div:not(.home) .p-breadcrumb__item::after {
  content: none;
}

body > div:not(.home) .p-breadcrumb__item + .p-breadcrumb__item::before {
  content: "";
  display: block;
  width: 14px;
  height: 1px;
  margin-right: 0.9em;
  background-color: rgba(43, 41, 38, 0.25);
}


/* ==========================================================================
   タブレット・スマホのヘッダー（959px以下）

   PC ではヘッダーバー（上段）が余白を作っているが、
   959px 以下ではそれが非表示になるためロゴが画面上端に張り付く。
   上下に余白を入れ、アイコンは一段小さくして軽さを出す。
   ========================================================================== */

@media (max-width: 959px) {
  .l-header__inner {
    padding-top: 12px;
    padding-bottom: 10px;
  }

  /* ロゴ上の地名ラベルも詰まって見えるので間隔を広げる */
  .c-headLogo::before {
    margin-bottom: 9px;
  }

  /* 枠は SWELL 既定（--logo_size_sp = 48px）から少し詰める */
  .l-header__customBtn.sp_,
  .l-header__menuBtn.sp_ {
    width: 42px;
  }

  /* --------------------------------------------------------------------------
     アイコンの大きさと位置

     ※ 大きさは必ずアイコン自身（.c-iconBtn__icon）に指定すること。
        SWELL は `.c-iconBtn__icon { font-size: 24px }` と直接当てているため、
        親（.l-header__customBtn）に font-size を書いても継承されず効かない。

     margin は画面の端から内側に寄せるためのもの。
     枠が 42px・text-align:center なので、入れた分の半分だけ内側へ動く。
     -------------------------------------------------------------------------- */

  /* 虫眼鏡（右） */
  .l-header__customBtn.sp_ .icon-search {
    font-size: 20px;
    margin-right: 15px;
  }

  /* ハンバーガー（左）。大きさは SWELL 既定の 24px のまま */
  .l-header__menuBtn.sp_ .icon-menu-thin {
    margin-left: 15px;
  }
}


/* ==========================================================================
   タブレット・スマホの追従ヘッダー（959px以下）

   959px 以下では SWELL は .l-fixHeader を display:none にし、
   代わりにヘッダー自体（.l-header）を position:fixed で追従させる。
   つまり PC のようにスクロール後だけ現れる別の要素は存在しない。

   トップページのヘッダーはヒーローに重ねるため透過＋白文字にしてある。
   そのまま追従すると、スクロール後は本文の上に背景なしの白文字が乗り、
   ロゴもアイコンも読めなくなる。

   SWELL は画面上端を通過すると html に data-scrolled="true" を付ける
   （.l-scrollObserver を IntersectionObserver で監視している）。
   これを使って、スクロール後は PC の追従ヘッダーと同じ見た目に切り替える。
   下層ページにも同じ指定を当てて、トップと下層で追従後の見た目を揃える。
   ========================================================================== */

@media (max-width: 959px) {
  html[data-scrolled="true"] .l-header {
    /*
     * 濃さはカスタマイザーの
     * 「ヘッダーの追従設定 > 追従ヘッダー（PC）の背景不透明度」に連動する。
     * SWELL はこの設定を .l-fixHeader::before にしか出力しないので、
     * 値を --mk-fix_header_opacity として functions.php から渡している。
     *
     * 1行目は color-mix に対応しない環境用の保険（不透明で表示）。
     */
    background-color: var(--mk-base);
    background-color: color-mix(
      in srgb,
      var(--mk-base) calc(var(--mk-fix_header_opacity, 1) * 100%),
      transparent
    );
    border-bottom: 1px solid rgba(43, 41, 38, 0.09);
    box-shadow: none;
  }

  /*
   * アイコン類の色。トップの白文字（style.css の `.home .l-header …`／
   * 詳細度 0-3-0）を打ち消す必要があるので、html を足した 0-3-1 で受ける。
   * .home で絞らないのは、下層ページも同じ見た目に揃えるため。
   * ロゴと地名ラベルは下の「追従ヘッダーのロゴ」でまとめて指定している。
   */
  html[data-scrolled="true"] .l-header .c-iconBtn,
  html[data-scrolled="true"] .l-header .c-iconList__link,
  html[data-scrolled="true"] .l-header .mk-headIcon,
  html[data-scrolled="true"] .l-header .w-header {
    color: var(--mk-ink);
    text-shadow: none;
  }
}


/* ==========================================================================
   追従ヘッダーのロゴ（PC・SP、トップ・下層 すべて共通）

     MIYAGI, TOHOKU  … weight 500 / --mk-ink-soft（グレー）
     MINAMISANRIKU   … weight 400 / --color_main（ネイビー）

   下層ページのヘッダー（追従前）と同じ仕様。
   下層は追従前後で見た目が変わらず、トップは追従を始めた時点で
   下層のヘッダーと同じ見た目になる。

   対象は2つ。
     .l-fixHeader                        … 960px以上で現れる追従ヘッダー
     [data-scrolled="true"] .l-header    … 959px以下。ヘッダー自体が追従する

   色は変数なので、カスタマイザーのメインカラーを変えれば追従する。
   ========================================================================== */

.l-fixHeader .c-headLogo .c-headLogo__link,
html[data-scrolled="true"] .l-header .c-headLogo .c-headLogo__link {
  color: var(--color_main);
  font-weight: 400;
  text-shadow: none;
}

.l-fixHeader .c-headLogo::before,
html[data-scrolled="true"] .l-header .c-headLogo::before {
  color: var(--mk-ink-soft);
  font-weight: 500;
  opacity: 0.8;
  text-shadow: none;
}


/* ==========================================================================
   スマホ・タブレットのメニュー（.p-spMenu）

   SWELL 既定は「MENU」が濃紺の塗り帯、項目は小さめのゴシックに
   矢印アイコン付き、という管理画面寄りの見た目。
   サイトの他の面（細い罫線・広い字間・明朝の見出し）に揃える。

   色はすべてカスタマイザー連動。ここには固定値を書かない。
     カスタマイズ → サイト全体設定 → スマホ開閉メニュー
       文字色     → .p-spMenu に出力される。inherit で拾う
       背景色     → .p-spMenu__inner::before
       背景の不透明度 → 同上
       オーバーレイ  → .p-spMenu__overlay
     カスタマイズ → サイト全体設定 → 基本カラー
       メインカラー → 現在地・タップ時の色（--color_main）

   罫線は currentColor（＝文字色）を薄めて使うので、
   文字色を変えれば罫線も一緒に追従する。
   ========================================================================== */

/* --------------------------------------------------------------------------
   「MENU」の見出し

   ここだけ明朝。塗りの帯をやめ、細い罫線の見出しにする。
   下のメニュー項目はゴシックなので、書体の違いで役割が分かれる。
   -------------------------------------------------------------------------- */

.p-spMenu .c-widget__title.-spmenu {
  /*
   * 下線は引かない。
   * サイトの他の小見出し（mk-eyebrow）も線を持たない。
   * ここに線があると「MENUの下線」と「項目の区切り線」が混在して、
   * 線の意味が読み取りにくくなる。線は項目の区切りだけに使う。
   */
  margin: 0;
  padding: 0 24px;
  background: transparent;
  border-radius: 0;
  border-bottom: none;
  color: var(--color_main); /* カスタマイザーの「メインカラー」 */
  font-family: "EB Garamond", "Shippori Mincho", "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN", serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/*
 * 「MENU」とメニュー本体を離す
 *
 * SWELL は .p-spMenu__nav に margin-top:-1em を当てていて、
 * 1つ目の項目が MENU に持ち上がって重なっている。
 * 打ち消したうえで、見出しとして読める間隔を取る。
 */
.p-spMenu__nav {
  margin-top: 22px;
}

/* --------------------------------------------------------------------------
   メニュー項目

   PC のグローバルナビと同じ書式（Jost / 400 / 字間 0.2em / 全て大文字）。
   文字サイズだけ PC の 12px より上げてある。指で押す前提のため。
   -------------------------------------------------------------------------- */

.p-spMenu .c-listMenu a {
  padding: 17px 24px;
  border-bottom: 1px solid currentColor; /* 下の色指定で薄める */
  border-bottom-color: color-mix(in srgb, currentColor 13%, transparent);
  color: inherit; /* カスタマイザーの「文字色」 */
  font-family: var(--mk-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* 既定の矢印アイコン（icomoon）は出さない */
.p-spMenu .c-listMenu a::before {
  content: none;
}

/* 押したときに少しだけ右へ送る（SWELL 既定の余白アニメを踏襲） */
.p-spMenu .c-listMenu a:hover,
.p-spMenu .c-listMenu a:focus {
  padding-left: 30px;
  padding-right: 18px;
  color: var(--color_main);
}

/* 現在地 */
.p-spMenu .c-listMenu .current-menu-item > a,
.p-spMenu .c-listMenu .current_page_item > a {
  color: var(--color_main);
}

/* 一番下の罫線は不要 */
.p-spMenu .c-listMenu > li:last-child > a {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   閉じるボタン
   -------------------------------------------------------------------------- */

.p-spMenu__closeBtn .c-iconBtn__icon {
  font-size: 16px;
  color: inherit; /* カスタマイザーの「文字色」 */
}


/* ==========================================================================
   記事一覧のタイトル

   SWELL 本体が `.p-postList .p-postList__title`（詳細度 0-2-0）に
   font-weight: 700 を当てている。子テーマの `h2 { font-weight: 500 }` は
   詳細度で負けるため、一覧だけ太いままだった。
   同じ形で受けてサイト全体の見出しの太さに揃える。

   アーカイブ・関連記事・Voice & News の一覧すべてが対象。
   ========================================================================== */

.p-postList .p-postList__title {
  font-weight: 500;
  /*
   * 色。SWELL には記事一覧のタイトル色という設定項目が無く、
   * 既定は `color: inherit` で本文の文字色をそのまま受け継ぐ。
   * メインカラーを引き当てて、カスタマイザーだけで変えられるようにする。
   *   カスタマイズ → サイト全体設定 → 基本カラー → メインカラー
   */
  color: var(--color_main);
}


/* ==========================================================================
   太字（700）を一律 500 に落とす

   SWELL 本体は見出し・表のヘッダ・FAQ・強調などに font-weight: 700 を
   当てている。本文が Jost の 400 なので 700 は差が開きすぎて重い。
   一段落として 500 に揃える。

   セレクタは SWELL 本体と同じ形にしてある。詳細度が同じなら
   あとから読まれる custom.css が勝つ。

   ※ ここに含めていないもの（意図的に別の太さにしている）
       ロゴ                     300  style.css
       本文の見出し h2〜h6      400  このファイル上部
       ボタン                   400  下のボタンの項
       ステップの見出し         400  mk-step の項
   ========================================================================== */

b,
strong {
  /*
   * ここだけ 600。本文が 400 なので 500 では強調が弱かった。
   * 日本語（Zen Kaku Gothic New）には 600 のウエイトが無いため、
   * CSSのフォントマッチングで 700 が使われる。
   * どちらのウエイトも functions.php で読み込んでいる。
   */
  font-weight: 600;
}

.u-fw-bold {
  font-weight: 500;
}

.c-widget__title {
  font-weight: 500;
}

.post_content dt,
.post_content th {
  font-weight: 500;
}

.wp-block-accordion-heading.wp-block-accordion-heading {
  font-weight: 500;
}

.wp-calendar-table thead th,
.wp-calendar-table tbody a {
  font-weight: 500;
}

.wp-block-search__label {
  font-weight: 500;
}

:where(.td_to_th_ tbody tr) > :first-child:not(.-no1) {
  font-weight: 500;
}

.p-adBox__title,
.p-adBox__name {
  font-weight: 500;
}

.-cap-ctr_simple .c-bannerLink__label {
  font-weight: 500;
}

.swell-block-dl__dt {
  font-weight: 500;
}

.swell-block-faq .faq_q {
  font-weight: 500;
}

.swell-block-review__title {
  font-weight: 500;
}

.swell-block-step__item .swell-block-step__title {
  font-weight: 500;
}

.is-style-bb > .c-tabList .c-tabList__button:hover,
.is-style-bb > .c-tabList .c-tabList__button[aria-selected="true"] {
  font-weight: 500;
}


/* ==========================================================================
   テーブル：スマホ縦並び時に1列目の幅指定を解除する

   ブロック設定の「テーブル1列目の横幅」は --swl-cell1-width として
   width / max-width / min-width の3つに当たる。
   一方「スマホで縦並びに表示する」（.sp_block_）が戻しているのは
   width だけなので、max-width が残って見出しセルが全幅にならない。

     blocks.css  .wp-block-table > table tr > :first-child:not(.-no1)
                   width / max-width / min-width: var(--swl-cell1-width)
     blocks.css  @media …959px  .sp_block_ th { width: 100% !important }
                   ← max-width が残る

   3つとも打ち消す。区切りは SWELL 本体と同じ 959px。
   ========================================================================== */

@media (max-width: 959px) {
  .post_content .sp_block_ > table tr > :first-child:not(.-no1) {
    width: 100%;
    max-width: none;
    /* min-width だけ SWELL 側が !important なので、こちらも付ける */
    min-width: 0 !important;
  }
}


/* ==========================================================================
   パンくず：個別ページで現在地のタイトルも出す

   SWELL は個別ページ（.single）だけ最後の項目のテキストを隠している。
     main.css  .single .p-breadcrumb__item:last-child > span.p-breadcrumb__text
                 { display: none }
   ただし <li> は残るので、区切り線だけが末尾に浮いてしまう。
   表示に戻して、長いタイトルは末尾を「…」で省略する。
   ========================================================================== */

body .single .p-breadcrumb__item:last-child {
  min-width: 0; /* flex アイテムが縮めるようにする。省略表示に必須 */
}

body .single .p-breadcrumb__item:last-child > span.p-breadcrumb__text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ==========================================================================
   ページ見出し（.c-pageTitle）の文字サイズ

   固定ページ・アーカイブ・記事タイトルの共通見出し。
   SWELL 既定は 1.3em / 600px以上で 1.5em（基準16px なので 20.8px / 24px）。
   本文の h2 が 22.4px なので、既定だとページ見出しとの差がほとんどない。
   一段上げて、ページの顔として見えるようにする。

   ここの数字だけで全ページまとめて変わる。
     1.8em ≒ 29px   2.2em ≒ 35px   2.6em ≒ 42px
   ========================================================================== */

.c-pageTitle {
  font-size: 1.8em;
}

@media (min-width: 600px) {
  .c-pageTitle {
    font-size: 2.2em;
  }
}


/* ==========================================================================
   フッター直前の余白（トップページ・固定ページ）

   SWELL のフルワイドブロックは margin-bottom: 32px を持つ。
   最後のブロックに背景色を敷いていると、この余白のぶんだけ
   フッターとの間に地の色が覗いてしまう。

   ※ `:last-child` や `:last-of-type` では拾えない。
      本文の末尾に非表示のブロックが残っていると、そちらが最後になるため。
      「後ろにフルワイドが無いフルワイド」を :has() で拾う。

   対象は .page（トップページ・固定ページ）だけ。
   投稿やアーカイブはフッターとの間に余白があった方が読みやすいので触らない。
   ========================================================================== */

.page .post_content > .swell-block-fullWide:not(:has(~ .swell-block-fullWide)) {
  margin-bottom: 0;
}


/* ==========================================================================
   ページ内リンクの着地点（scroll-margin-top）

   SWELL は scroll-margin / scroll-padding を一切指定していないため、
   #by-car のようなページ内リンクで飛ぶと、着地点が画面の一番上に来る。
   そこには追従ヘッダーが被さっているので、見出しが隠れてしまう。

   飛び先の要素そのものに余白を持たせて、ヘッダーの下から始まるようにする。
   scroll-margin はスクロール位置の計算にしか使われないので、
   通常表示のレイアウトには一切影響しない。

   ※ 対象は本文中の id を持つ要素だけ。
      ヘッダー・フッターの id には効かせない。
   ========================================================================== */

.post_content [id] {
  scroll-margin-top: 70px;
}

@media (min-width: 960px) {
  .post_content [id] {
    scroll-margin-top: 90px;
  }
}


/* ==========================================================================
   mk-note … 補足・注意書き

   SWELL の is-style-big_icon_caution（黄色い枠＋赤文字）は
   このサイトの色調から浮くため、静かな見た目のものを用意した。
   ========================================================================== */

.post_content .mk-note {
  padding: 16px 20px;
  border-left: 2px solid var(--mk-amber);
  background-color: color-mix(in srgb, var(--mk-amber) 6%, transparent);
  font-size: 14px;
  color: var(--mk-ink-soft);
}


/* ==========================================================================
   お問い合わせフォーム（外部サービス MyASP の埋め込み）

   .content_form の中身は mkankou.jp から読み込む JS が生成する。
   サービス側の CSS も一緒に読み込まれ、
     ・必須項目がピンク（#ffdddd）
     ・角丸10px の入力欄
     ・ラベルと入力欄が table-cell の2列組み
   といった、このサイトとは無関係の見た目になる。ここで上書きする。

   ※ HTML はサービス側が出力するので、こちらから構造は変えられない。
      クラス名が変わると当たらなくなるため、フォームを差し替えたら要確認。
   ========================================================================== */

/* フォーム側の見出し（「Individual Inquiry Form」など）はページの h2 と重複する。
   .content_title は .content_form の中ではなく手前に並ぶ兄弟なので、
   子孫セレクタでは当たらない。 */
.post_content .content_title {
  display: none;
}

/* --- 2列組みを解除して、ラベルを上・入力欄を下に積む -----------------------
      既定はラベル列に326px割かれていて、横に間延びして見える。
      1カラムにすると PC でもスマホでも同じ見え方になる。            */

.post_content .content_form .input_unit,
.post_content .content_form .my_column {
  display: block !important;
  width: auto !important;
}

/* table-cell 用の padding が残っていると、ラベルと入力欄のあいだに 35px 空き、
   左端も 10px ずれて見出しと揃わない。間隔は .label_frame の margin で持つ。 */
.post_content .content_form .my_left,
.post_content .content_form .my_right {
  padding: 0 !important;
}

.post_content .content_form .input_unit {
  margin-bottom: 26px;
}

/* 1カラムにしたぶん、入力欄が本文幅（約1050px）いっぱいまで伸びる。
   1行の入力欄としては間延びするので、読みやすい幅で止める。

   幅を絞ると右に余白が寄って見えるので、中央に置く。 */
.post_content .content_form {
  max-width: 680px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- ラベル --------------------------------------------------------------- */

/* margin-bottom の !important は SWELL 対策。
   .label_frame は .my_left の最後の子なので、テーマの
   「.post_content div > :last-child { margin-bottom: 0 !important }」に潰される。 */
.post_content .content_form .label_frame {
  margin-bottom: 7px !important;
  font-family: var(--mk-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--mk-ink-soft);
}

/* --- 入力欄 --------------------------------------------------------------- */

.post_content .content_form input[type="text"],
.post_content .content_form input[type="email"],
.post_content .content_form input[type="tel"],
.post_content .content_form select,
.post_content .content_form textarea {
  width: 100% !important;
  max-width: none !important;
  padding: 13px 14px !important;
  border: 1px solid color-mix(in srgb, var(--mk-ink) 22%, transparent) !important;
  border-radius: 2px !important;
  background-color: #fff !important;
  font-family: var(--mk-sans);
  font-size: 15px !important;
  line-height: 1.6;
  color: var(--mk-ink);
  box-shadow: none !important;
}

/* 必須項目のピンク地をやめる。必須の印はラベル側の「*」で足りる。
   ※ .required_color は入力欄だけでなく囲みの div にも付いている。
      div まで白くすると、チェックボックス群だけ白い箱に見えてしまう。 */
.post_content .content_form input.required_color,
.post_content .content_form select.required_color,
.post_content .content_form textarea.required_color {
  background-color: #fff !important;
}

.post_content .content_form div.required_color {
  padding: 0 !important;
  background-color: transparent !important;
}

.post_content .content_form textarea {
  min-height: 190px;
}

.post_content .content_form input[type="text"]:focus,
.post_content .content_form select:focus,
.post_content .content_form textarea:focus {
  border-color: var(--mk-accent) !important;
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mk-accent) 15%, transparent) !important;
}

/* 都道府県のセレクトだけ幅が106pxで窮屈だった */
.post_content .content_form .select_frame select {
  width: auto !important;
  min-width: 220px;
}

/* --- チェックボックス（お問い合わせ項目）----------------------------------- */

.post_content .content_form .checkbox_frame {
  display: inline-block;
  margin: 0 22px 10px 0;
  font-size: 15px;
}

.post_content .content_form .checkbox_frame input {
  margin-right: 6px;
}

/* --- 個人情報の同意欄 ------------------------------------------------------ */

.post_content .content_form .privacy_consent_area {
  margin: 34px 0 0;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--mk-ink) 15%, transparent);
  background-color: color-mix(in srgb, var(--mk-base) 60%, transparent);
  font-size: 13px;
  line-height: 1.9;
  color: var(--mk-ink-soft);
}

.post_content .content_form .privacy_consent_area p {
  margin-bottom: 0.6em;
}

/* --- 送信ボタン ------------------------------------------------------------
      サイトの他のボタンと同じ「塗り→ホバーで白抜き」に揃える。 */

.post_content .content_form .form_input_submit {
  margin-top: 34px;
  text-align: center;
}

.post_content .content_form .form_input_submit input {
  min-width: 280px;
  padding: 17px 40px !important;
  border: 1px solid var(--mk-ink) !important;
  border-radius: 0 !important;
  background-color: var(--mk-ink) !important;
  font-family: var(--mk-sans);
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--mk-base) !important;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.post_content .content_form .form_input_submit input:hover {
  background-color: transparent !important;
  color: var(--mk-ink) !important;
}

@media (max-width: 599px) {
  .post_content .content_form .form_input_submit input {
    min-width: 0;
    width: 100%;
  }
}

/* --- 必須の印 --------------------------------------------------------------
      サービス側は赤い塗り（#e32）の四角いバッジを出す。このサイトの色調から
      浮くので、文字だけの静かな印にする。

      ※ 文言はページ本文の <style> が :lang(en) で 'Required' に差し替えている。
         そちらより詳細度を上げないと勝てないので、.post_content .content_form
         まで含めて書く。content は触らない（文言は本文側が正）。          */

.post_content .content_form form.myForm .required .my_column.my_left label:first-child::after,
.post_content .content_form form.myForm span.required::after {
  width: auto !important;
  height: auto !important;
  margin-left: 8px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  font-size: 10px !important;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 赤。CTA の差し色 --mk-amber (#c8873c) と同じ明度・彩度に合わせてあるので、
     並べても浮かない。サービス既定の #e32 はこのサイトには強すぎる。 */
  color: #c84a3c !important;
  vertical-align: 1px;
}

/* --- 日付（年 - 月 - 日 の3連セレクト）--------------------------------------
      サービス側は table-cell 前提で横に並べている。上で2列組みを解いた影響で
      中身の div が縦積みになるため、ここで横並びに戻す。               */

.post_content .content_form .date_time1 .my_right {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* セレクトが3つ並ぶので、上の min-width: 220px は効かせない */
.post_content .content_form .date_time1 .select_frame select {
  width: auto !important;
  min-width: 0 !important;
}

/* ブラウザ既定の矢印は枠のすぐ内側に出るため、入力欄の padding（14px）だと
   右端にくっついて見える。矢印を自前で描いて、そのぶんの余白を右に取る。 */
.post_content .content_form select {
  padding-right: 38px !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6459' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
}

.post_content .content_form .datetime_year_unit,
.post_content .content_form .datetime_month_unit,
.post_content .content_form .datetime_day_unit {
  color: var(--mk-ink-soft);
}

/* 日の後ろの単位は本文の JS が空にしている。gap のぶんだけ空きが残る */
.post_content .content_form .datetime_day_unit:empty {
  display: none;
}

/* --- チェックボックス -------------------------------------------------------
      input と label が別々の div に入っているので、そのままだと縦に割れる。
      項目の並びは、行ごとの間隔を揃えるため親側の gap で持つ。       */

.post_content .content_form .input_unit.checkbox .my_right {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.post_content .content_form .checkbox_frame {
  display: inline-flex;
  align-items: center; /* baseline だと □ が文字より上に浮く */
  gap: 8px;
  margin: 0; /* 間隔は親の gap に任せる */
}

/* サービス側が padding-bottom: 10px を持っていて、□ と文字が同じ高さの箱の中で
   別々の位置に来る。これを消さないと align-items: center が効かない。 */
.post_content .content_form .checkbox_input,
.post_content .content_form .checkbox_label {
  padding: 0 !important;
}

/* □ は inline-block なので行のベースラインに乗り、文字の中心より 3px 上に来る。
   囲みを flex にすると □ そのものが中央に来て、文字と高さが揃う。 */
.post_content .content_form .checkbox_input {
  display: flex;
  align-items: center;
}

.post_content .content_form .checkbox_frame input[type="checkbox"] {
  flex: none;
  width: 15px !important;
  height: 15px;
  margin: 0 !important;
  accent-color: var(--mk-accent);
  cursor: pointer;
}

.post_content .content_form .checkbox_label label {
  cursor: pointer;
}

/* --- 入力エラーの吹き出し --------------------------------------------------
      サービス側は「入力欄の上端に置いて、自分の高さぶん margin-top で持ち上げる」
      をインラインで指定する。ところが吹き出しは親の最初の子として差し込まれるので、
      SWELL の「.post_content div > :first-child { margin-top: 0 !important }」に
      持ち上げが潰され、入力欄や選択肢の上に被っていた。

      margin-top は吹き出しごとに違う（1行 42px・2行 63px）うえ、チェックボックスは
      基準位置も 6px 下にずれているので、計算値は使わず「入力欄の段の上端に下端を
      揃える」で置き直す。横位置はサービス既定の左端のまま（右寄せは本人判断で不採用）。 */

.post_content .content_form .formError {
  top: auto !important;
  bottom: 100%;
  margin-top: 0 !important;
}

/* 行間は本文の 1.8 を継いでいて、メール欄の2行（必須＋形式）だと 63px になり、
   1つ上の入力欄に 9px 被る。項目のあいだに置ける高さは 55px なので詰める。 */
.post_content .content_form .formError .formErrorContent {
  padding: 3px 10px;
  line-height: 1.4;
}


/* ==========================================================================
   スマホ開閉メニューの下（DOWNLOADS / CONTACT）

   PC ではヘッダーバーにピルボタンで出している2項目を、
   スマホでは開閉メニューの下に置く。
     カスタマイズ → ウィジェット → スマホ開閉メニュー下
     入っているメニューは「Header Buttons」。PC のヘッダーバーと同じもの。
     → 項目を足せば PC・スマホの両方に反映される。

   見た目は PC のヘッダーボタン（style.css の .mk-headBar）に合わせる。
   指で押す前提なので、そちらより一回り大きくしている。
   ========================================================================== */

.p-spMenu__bottom {
  margin-top: 34px;
  padding: 0 24px;
}

.p-spMenu__bottom .widget_nav_menu ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-spMenu__bottom .widget_nav_menu li::before {
  content: none; /* SWELL 既定のマーカーを消す */
}

.p-spMenu__bottom .widget_nav_menu a {
  display: block;
  padding: 13px 16px;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px;
  color: inherit; /* カスタマイザーの「文字色」 */
  font-family: var(--mk-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  transition:
    background-color 0.25s,
    border-color 0.25s,
    color 0.25s;
}

.p-spMenu__bottom .widget_nav_menu a:hover,
.p-spMenu__bottom .widget_nav_menu a:focus {
  background-color: var(--color_main);
  border-color: var(--color_main);
  color: #fff;
}

/* --------------------------------------------------------------------------
   SNSアイコン（ボタンの下・横一列）

   SWELL 純正の「[SWELL] SNSリンク」ウィジェット。
   URL はカスタマイザーの SNS情報 から読まれるので、
   そこを直せばヘッダー・フッター・ここが同時に変わる。
     カスタマイズ → SNS情報

   アイコンの追加・削除もカスタマイザー側だけで完結する。
   -------------------------------------------------------------------------- */

.p-spMenu__bottom .widget_swell_sns_links {
  margin-top: 28px;
}

/*
 * 当たり判定（44px角）どうしを隙間なく並べる。
 * アイコンは 21px なので、箱を詰めても見た目には
 * 左右の余白ぶん（約27px）が空いて見える。
 */
.p-spMenu__bottom .c-iconList {
  display: flex;
  justify-content: center;
  gap: 0;
}

.p-spMenu__bottom .c-iconList__item {
  margin: 0;
  padding: 0;
}

/*
 * 指で押せる大きさを確保する。
 * アイコン自体は 21px しかなく、そのままではタップ範囲が小さい。
 * 見た目は変えずに、リンクの当たり判定だけ 44px 角にする。
 */
.p-spMenu__bottom .c-iconList__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; /* SWELL 既定の padding を 44px の内側に収める */
  width: 44px;
  height: 44px;
  margin: 0; /* 既定の左右 3px を消す */
  color: inherit; /* カスタマイザーの「文字色」 */
  font-size: 17px;
  opacity: 0.75;
  transition: opacity 0.25s, color 0.25s;
}

.p-spMenu__bottom .c-iconList__link:hover,
.p-spMenu__bottom .c-iconList__link:focus {
  color: var(--color_main);
  opacity: 1;
}


/* ==========================================================================
   STAY（宿泊施設）— 移行元サイトから引き継いだ指定

   移行元（www.m-kankou.jp）の customize.css / style-ky.css から、
   **取り込んだ本文で実際に使われているクラスだけ**を移した。

   移さなかったもの（と理由）
     ヘッダー・グローバルナビ・フッター・メインビジュアル・パンくず
       … このサイトは独自デザイン。持ち込むと壊れる
     検索フォーム（VK Filter）・アコーディオン・DearFlip・PDFアイコン
       … 該当プラグインを入れていない
     MyAspフォーム … Contactページ側で別途調整済み
     Material Symbols アイコン … 本文での使用 0件。アイコンフォントの追加読込が要る
     タブの意匠（濃色ベタ塗り・ホバーで傾く）
       … SWELL既定のままでサイトの色を拾えている。移行元の意匠はこの
         サイトの調子と合わないので採らなかった
     a:hover{opacity:.8} … 全ページに影響するため見送り

   使用状況（20件の本文を走査して確認）
     feature-table 114 / sp_adj 152 / sp-rev 40 / swell-block-dl 186
     swl-inline-icon 86 / swl-inline-btn 17 / custom-style-pd-lr-2em-pc 2
   ========================================================================== */

/* --------------------------------------------------------------------------
   アメニティ表（.feature-table）

   「項目名｜○」を横に並べる表。普通の table のままだと
   PCで2組しか入らず間延びするので、グリッドに組み替えて
   PCは4組・スマホは2組を1行に収める。

   tr を display:contents にして、セルを直接グリッドに並べる。
   空セル（項目数が奇数のときの余り）は消す。
   -------------------------------------------------------------------------- */

.post_content .feature-table table {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr) 40px);
  border-top: 1px solid var(--color_border);
  border-left: 1px solid var(--color_border);
  border-right: none;
  border-bottom: none;
  border-collapse: collapse;
  border-spacing: 0;
}

.post_content .feature-table tbody,
.post_content .feature-table tr {
  display: contents;
}

.post_content .feature-table td {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  /* 罫線は右と下だけ。四辺に引くと二重になる */
  border: none;
  border-right: 1px solid var(--color_border);
  border-bottom: 1px solid var(--color_border);
  /* 上の「1列目の幅指定を解除」がグリッドと競合しないよう明示的に戻す */
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

.post_content .feature-table td:empty {
  display: none;
}

/* ○×の列は中央寄せ */
.post_content .feature-table td:nth-child(even) {
  justify-content: center;
}

@media (max-width: 959px) {
  .post_content .feature-table table {
    grid-template-columns: repeat(2, minmax(0, 1fr) 40px);
  }
}

/* --------------------------------------------------------------------------
   表のスマホ調整（.sp_adj）

   スマホでは罫線を落として余白で区切る。移行元と同じ扱い。
   -------------------------------------------------------------------------- */

/* 英語サイトはデザインが異なるためコメントアウト */

/* @media (max-width: 959px) {
  .post_content .sp_adj td,
  .post_content .sp_adj th {
    border: none;
  }

  .post_content .sp_adj th {
    padding-block: 8px;
  }
}

@media (min-width: 960px) {
  .post_content .is-style-default .sp_adj table th {
    width: 230px;
  }
} */

/* --------------------------------------------------------------------------
   スマホで画像と文章の順序を入れ替える（.sp-rev）

   PCは「画像 → 文章」の並び。スマホで縦に積むと画像が先に来て
   何の話か分からないまま画像が続くので、文章を先に出す。
   -------------------------------------------------------------------------- */

@media (max-width: 959px) {
  .post_content .wp-block-columns.sp-rev {
    flex-direction: column-reverse;
  }
}

/* --------------------------------------------------------------------------
   細かい調整（移行元と同じ）
   -------------------------------------------------------------------------- */

/* 説明リストの説明側が字下げされていた */
.post_content .swell-block-dl__dd {
  margin-left: 0;
}

/* 表の中のインラインボタンが詰まる */
.post_content .wp-block-table .swl-inline-btn a {
  line-height: 210%;
}

/* 本文で使われている余白調整用のクラス */
@media (min-width: 960px) {
  .post_content .custom-style-pd-lr-2em-pc {
    padding-left: 1em;
    padding-right: 1em;
  }
}


/* --------------------------------------------------------------------------
   タブ（.mk-tab）

   宿泊施設の本文で使っているタブ。19件すべてのタブブロックに
   `mk-tab` を付けてある。SWELL 既定のタブには一切影響しない。

   ※ クラスの役割を分けている
       mk-tab     … 見た目（このファイルと editor-style.css）
       divide-tab … 挙動（stay-tabs.js がスマホで2組に分ける）
     どちらか片方だけ付けることもできる。

   横一列の等幅。選択中を濃く、未選択を薄くして、塗りの濃淡だけで示す。
     ・タブに枠線は引かない（塗りで分かるので線は足さない）
     ・タブ同士は 2px の隙間で切る

   ※ SWELL の指定は `.is-style-default > .c-tabList …`（0-4-1）。
      同じ強さだと読み込み順まかせになるので、こちらは
      `.c-tabList` を挟んで 0-5-1 で確実に上回るようにしている。
   -------------------------------------------------------------------------- */

.post_content .mk-tab > .c-tabList {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 2px;
  border-bottom: none;
}

/* 等幅に割る */
.post_content .mk-tab > .c-tabList .c-tabList__item {
  flex: 1 1 0;
}

.post_content .mk-tab > .c-tabList .c-tabList__item + .c-tabList__item {
  margin-left: 0;
}

/* 未選択。メインカラーを薄く敷いて、文字は白 */
.post_content .mk-tab > .c-tabList .c-tabList__button {
  padding: 15px 12px;
  background-color: color-mix(in srgb, var(--color_main) 30%, #fff);
  border: none;
  border-radius: 0;
  font-family: var(--mk-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: #fff;
  /* 長いラベルでも高さを揃える */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.25s, color 0.25s;
}

/* SWELL 既定のポインタ（吹き出しの三角）は使わない */
.post_content .mk-tab > .c-tabList .c-tabList__button::before,
.post_content .mk-tab > .c-tabList .c-tabList__button::after {
  content: none;
}

.post_content .mk-tab > .c-tabList .c-tabList__button:hover {
  background-color: color-mix(in srgb, var(--color_main) 55%, #fff);
}

/* 選択中。メインカラーで塗る */
.post_content .mk-tab > .c-tabList .c-tabList__button[aria-selected="true"] {
  background-color: var(--color_main);
  color: #fff;
}

/*
 * 本文の箱。
 * 罫線を1本だけ回して、どこまでがそのタブの内容かを示す。
 * タブの真下に接するので、上辺だけ線を持たせない
 * （タブの塗りと線が重なって見えるため）。
 */
.post_content .mk-tab .c-tabBody {
  margin-top: 0;
  padding: 30px 32px;
  border: 1px solid color-mix(in srgb, var(--mk-ink) 8%, transparent);
  border-top: none;
  background-color: #fff;
}

@media (max-width: 599px) {
  .post_content .mk-tab > .c-tabList .c-tabList__button {
    padding: 13px 8px;
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  .post_content .mk-tab .c-tabBody {
    padding: 22px 16px;
  }
}


/* --------------------------------------------------------------------------
   宿泊施設の表：1列目の見た目を揃える

   移行元の入稿が th と td で混在していて、同じ「見出し列」なのに
   背景の有無・太さがバラバラだった（住所=th／お問い合わせ=td など）。
   1列目は種類にかかわらず同じ見た目にする。

   ※ アメニティ表（.feature-table）は1列目という概念が無いので外す。
   -------------------------------------------------------------------------- */

/* 英語サイトはデザインが異なるためコメントアウト */

/* .post_content .sp_adj:not(.feature-table) table tr > :first-child {
  background-color: color-mix(in srgb, var(--mk-ink) 4%, transparent);
  font-weight: 500;
  color: var(--mk-ink);
} */

/* セル内で strong を使っている行があり、そこだけ太くなる */
/* .post_content .sp_adj:not(.feature-table) table tr > :first-child strong {
  font-weight: 500;
} */

/* --------------------------------------------------------------------------
   タブのスマホ表示（2組に分かれたとき）

   assets/js/stay-tabs.js が、スマホでは先頭2つとそれ以降で
   タブを2組に分ける。分けた側は本文中の
   `.sp-tab-secondary-wrapper` に差し込まれる。

   幅は1組目・2組目とも「1行に2つ」で揃える。
   内容依存の幅にすると、組ごとにタブの大きさが変わって不揃いに見える。
   -------------------------------------------------------------------------- */

@media (max-width: 959px) {
  /*
   * 1行に2つ。
   * 基準を 50% ちょうどにすると、タブ間の余白のぶんだけ
   * 100% を超えて3行に折り返してしまう。gap を引いておく。
   */
  .post_content .mk-tab > .c-tabList {
    /* PCは横一列（nowrap）。スマホは幅が足りないので折り返す */
    flex-wrap: wrap;
    gap: 2px;
  }

  .post_content .mk-tab > .c-tabList .c-tabList__item {
    flex: 1 1 calc(50% - 2px);
  }

  /* gap で空けるので、こちらの余白は消す */
  .post_content .mk-tab > .c-tabList .c-tabList__item + .c-tabList__item {
    margin-left: 0;
  }

  /* 分かれた2組目は、1組目の内容との間に余白を取る */
  .post_content .sp-tab-secondary-wrapper .swell-block-tab {
    margin-top: 40px;
  }
}

/* PCでは受け皿は空なので、余計な余白を作らない */
.post_content .sp-tab-secondary-wrapper:empty {
  display: none;
}


/* ==========================================================================
   FOR EDUCATORS（教育旅行）ページ群
   m-kankou.jp/educational-travel/ から移植したページで使うクラス。
   元サイトのカスタムCSSを移したもので、色はSWELL変数を通しているため
   英語版のパレット（ネイビー）に自動で揃う。
   ========================================================================== */

/* モデルコースの見出し帯 --------------------------------------------------
   もとは薄いネイビーの面＋4pxの下線。面で塗ると重く、
   線のほうが見出しより目立っていた。
   面をやめ、左のアクセント罫と細い下罫で受ける。
   Access ページと同じ「余白で見せる」作りに寄せてある。 */
.post_content .wp-block-columns.bottom-borderline,
.post_content .mk-courseHead {
  position: relative;
  background: none !important;
  border-bottom: solid 1px var(--color_border);
  border-radius: 0;
  margin-bottom: 40px;
  padding: 2px 0 20px 24px;
}

.post_content .wp-block-columns.bottom-borderline::before,
.post_content .mk-courseHead::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 26px;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--color_main);
}

.post_content .wp-block-columns.bottom-borderline h2,
.post_content .mk-courseHead h2 {
  margin: 0;
  color: var(--color_main);
  line-height: 1.5;
}

/* 見出しの上に置く小さなバッジ（日数など）。
   段落ブロックに mk-badge を付けるだけで使える */
.post_content .mk-courseHead .mk-badge {
  margin: 0 0 12px;
}

/* カード下の分類リンク（Experience のカテゴリー一覧へ） ------------------
   段落ブロックに mk-catLinks を付け、中に <a> を並べるだけで使える。
   先頭の「関連する体験：」は本文側に置く（翻訳する人がCSSを触れないため） */
.post_content .mk-catLinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  color: var(--color_text_thin);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.post_content .mk-catLinks a {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border: solid 1px var(--color_border);
  border-radius: 999px;
  color: var(--color_main);
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.post_content .mk-catLinks a:hover {
  border-color: var(--color_main);
  background: var(--color_main_thin);
}

/* モデルコースの日程表 ----------------------------------------------------
   もとはセルを罫で囲んだ「表」。面と罫を減らし、
   日付を打つ縦のタイムラインに置き換える。
   区分ラベルは左の余白に小さく置き、スクロールに追従させる。 */
.post_content .column_table-model_course .wp-block-columns {
  --wp-column-gap: 0;
  gap: 0;
}

/* 区分ラベル（現地学習など）。塗りつぶしの帯をやめ、余白に置く小見出しにする。
   `is-vertically-aligned-stretch`（0-2-0）の align-self を上書きするので、
   セレクタを 0-4-0 にしてある。stretch のままだと sticky が効かない。 */
.post_content .column_table-model_course .wp-block-column.has-background-model_course {
  position: sticky;
  top: 100px;
  align-self: flex-start;
  padding: 22px 16px 22px 0 !important;
  background: none !important;
  border-radius: 0;
  color: var(--color_main) !important;
  font-size: 12px !important; /* has-large-font-size を打ち消す */
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-align: left;
}

/* 区分ラベルの文字。余白に置くだけだと左が寂しく、何の列か伝わらない。
   薄い面のタグにして拾えるようにする。列ごと塗ると帯（作り直す前の姿）に戻るので、
   段落だけを包んで文字の幅にとどめる。
   【重要】 文字の指定は列ではなくこの p に置くこと。列側に書いても SWELL の
   `.post_content p` が font-size / letter-spacing を直接指定しているため継承で負ける
   （列に 12px と書いてあるのに実際は 15px で出ていた）。字面は mk-badge に揃える */
.post_content .column_table-model_course .wp-block-column.has-background-model_course p {
  display: inline-block;
  margin: 0;
  padding: 5px 10px;
  border-radius: 3px;
  background: rgba(4, 56, 76, 0.07);
  color: var(--color_main);
  font-family: var(--mk-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.7;
}

/* 日付列。面をやめてタイムラインの目盛りにする */
.post_content .has-background-thin-model_course {
  background: none !important;
  border-radius: 0;
  color: var(--color_main) !important;
}

.post_content .column_table-model_course-days {
  position: relative;
  border: 0;
  margin-bottom: 0 !important;
}

/* 日付列の右端を通る縦線。行の下余白を 0 にしてあるので上下でつながる */
.post_content .column_table-model_course-days::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 110px; /* 日付列の flex-basis と同じ */
  width: 1px;
  background: var(--color_border);
}

/* 最終行は線を途中で止める。まだ続くように見せない */
.post_content .column_table-model_course-days:last-child::before {
  bottom: auto;
  height: 40px;
}

.post_content .column_table-model_course .wp-block-column.has-background-thin-model_course {
  position: relative;
  padding: 22px 20px 22px 0 !important;
  font-size: 15px !important; /* has-large-font-size を打ち消す */
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: right;
}

/* 縦線の上に打つ点。背景色を敷いた節でも浮かないよう、塗りつぶしにする。
   right は「縦線の中心」に合わせる。線は left:110px / width:1px なので中心は 110.5px。
   そこから translateX(50%) で自分の半分だけ戻すと、
   点の大きさを変えても中心がずれない（サイズ直打ちだと毎回 right を計算し直すことになる）。
   【重要】 ::after ではなく ::before を使うこと。編集画面ではブロックの選択枠が ::after を使っていて、
   inset:0 を !important で当ててくるため、::after だと top / right が無視されて左上に貼り付く */
.post_content .column_table-model_course .wp-block-column.has-background-thin-model_course::before {
  content: "";
  position: absolute;
  top: 28px;
  right: -0.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color_main);
  transform: translateX(50%);
}

.post_content .column_table-model_course-days-list {
  margin: 0 !important;
  padding: 22px 0 22px 28px !important;
}

.post_content .column_table-model_course-days-list > li {
  margin: 0;
  padding: 4px 0;
  line-height: 1.8;
}

/* 日ごとの区切りは内容側だけに引く。日付列まで引くと表に戻ってしまう */
.post_content .column_table-model_course-days + .column_table-model_course-days .column_table-model_course-days-list {
  border-top: solid 1px var(--color_border);
}

/* 連番の丸。既定は 29px のベタ塗りで、9日分並ぶと点が主役になる。
   線の丸に変えて番号を読ませる */
.post_content .column_table-model_course-days-list.is-style-num_circle > li {
  padding-left: 30px;
}

.post_content .column_table-model_course-days-list.is-style-num_circle > li::before {
  top: 5px;
  left: 0;
  width: 21px;
  height: 21px;
  border: solid 1px rgba(4, 56, 76, 0.3);
  background: none;
  color: var(--color_main);
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
}

/* 参考リンクの「Link」。蛍光ペンをやめ、小さな枠に収める。
   項目名そのものにリンクを張った場合（英語版はこちら）は
   ふつうのテキストリンクのままにしたいので、マーカー配下だけを対象にする */
.post_content .column_table-model_course-days-list .swl-marker {
  padding: 0;
  background: none !important;
}

.post_content .column_table-model_course-days-list .swl-marker a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 10px;
  border: solid 1px var(--color_border);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-decoration: none;
  vertical-align: 1px;
  transition: border-color 0.2s, background-color 0.2s;
}

.post_content .column_table-model_course-days-list .swl-marker a:hover {
  border-color: var(--color_main);
  background: var(--color_main_thin);
}

/* スマホ。カラムが縦積みになるので、タイムラインは畳んで日付を頭に出す */
@media (max-width: 781px) {
  .post_content .column_table-model_course-days::before,
  .post_content .column_table-model_course .wp-block-column.has-background-thin-model_course::before {
    content: none;
  }

  .post_content .column_table-model_course .wp-block-column.has-background-model_course {
    position: static;
    padding: 0 0 10px !important;
  }

  .post_content .column_table-model_course .wp-block-column.has-background-thin-model_course {
    padding: 16px 0 0 !important;
    text-align: left;
  }

  .post_content .column_table-model_course-days-list {
    padding: 10px 0 18px !important;
  }

  .post_content .column_table-model_course-days + .column_table-model_course-days {
    border-top: solid 1px var(--color_border);
  }

  .post_content .column_table-model_course-days + .column_table-model_course-days .column_table-model_course-days-list {
    border-top: 0;
  }
}
.post_content .cta-contact { background-color: var(--color_main_thin); }

/* SWELL本体が該当ページで読み込まない分の補完 ---------------------------- */
.post_content .shadow_on > .wp-block-column {
  background: #fff;
  box-shadow: var(--swl-box_shadow);
  color: #333;
  padding: 1.5em;
}
.post_content .mark_green  { background: linear-gradient(transparent 64%, var(--color_mark_green) 0%); }
.post_content .mark_orange { background: linear-gradient(transparent 64%, var(--color_mark_orange) 0%); }
.post_content .red_ {
  --the-btn-color: #f74a4a;
  --the-btn-color2: #ffbc49;
  --the-solid-shadow: rgba(185, 56, 56, 1);
}

/* ==========================================================================
   教育旅行ページをサイトのトーンに合わせる（body.mk-edu）

   移植元サイトの配色（赤・黄緑・ピンク・黄色）がそのまま入ってくるので、
   このサイトのパレット（ネイビー＋アンバー＋オフホワイト）に寄せる。
   対象は /for-educators/ とその子ページだけ。他のページには影響しない。
   body クラスの付与は functions.php の body_class フィルター。
   ========================================================================== */

/* マーカーの色は SWELL設定 → エディター設定 → マーカー で決める。
   （黄緑・橙とも、サイトのアンバーに合わせた値を入れてある） */


/* --------------------------------------------------------------------------
   FAQ の Q / A バッジ

   元サイトは赤。Q をメインカラー、A をアンバーにして、
   色で「問い」と「答え」を describe し分ける。
   -------------------------------------------------------------------------- */

/* Q / A バッジの色は SWELL設定 → エディター設定 → FAQ で決める。
   ここから下は、設定に項目が無いものだけ。 */

/* 開閉の目印。閉じているときだけ濃くする必要はないので、常に控えめに */
.mk-edu .post_content .swell-block-faq .faq_q::after {
  color: var(--mk-ink-soft);
  font-weight: 400;
}

/* 質問の行。押せることが分かる程度の変化にとどめる */
.mk-edu .post_content .swell-block-faq .faq_q {
  background-color: transparent;
  border-bottom: 1px solid var(--color_border);
  transition: background-color 0.25s ease;
}

.mk-edu .post_content .swell-block-faq .faq_q:hover {
  background-color: color-mix(in srgb, var(--mk-base-deep) 45%, transparent);
}

.mk-edu .post_content .swell-block-faq .active .faq_q {
  background-color: transparent;
}


/* --------------------------------------------------------------------------
   注意書き・ふきだし

   ※ CSSでは触らない。色はすべて SWELL 側に設定項目がある。

     アイコンボックス（インフォ・アナウンス・ブック）
       … SWELL設定 → エディター設定 → アイコンボックス（小）
     ふきだし
       … SWELL設定 → エディター設定 → ふきだし

   元サイトのピンク・黄色は、そちらでサイトのアンバー系に変更済み。
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   バナーリンク（子ページへのカード）

   中のテキストが既定のリンク色（青）を拾って、暗い写真の上で読みにくい。
   カード全体が1つのリンクなので、文字は白で固定してよい。
   -------------------------------------------------------------------------- */

.mk-edu .post_content .c-bannerLink,
.mk-edu .post_content .c-bannerLink * {
  color: #fff;
}

/* 書体や字間はここでは変えない。
   変えると Home のバナーリンクと揃わなくなるうえ、
   編集画面（.mk-edu が付かない）と表側で見え方がズレる。 */


/* --------------------------------------------------------------------------
   区切り線

   ※ 表示・非表示はCSSで決めない。
     以前、セクション末尾の1本を display:none で隠していたが、
     それだとエディタで区切り線を置いても出てこない。
     不要な区切り線は、ブロックごと消すこと。

   色だけ既定値を寄せている。SWELL の既定はグレー(#808080)で、
   このサイトの罫線の色から浮くため。エディタで色を選べば
   そちらが勝つ（!important を付けていない）。
   -------------------------------------------------------------------------- */




/* --------------------------------------------------------------------------
   文字色の「赤」

   ※ CSSでは触らない。SWELL設定 → エディター設定 → 文字色 で
     赤（deep01）をサイトのアンバーに変更済み。
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   サポート体制の4カラム

   見出しは中央揃えなのにアイコンと本文が左揃えで、列ごとの軸がずれている。
   アイコンを見出しの上に、中央で置き直す。
   -------------------------------------------------------------------------- */

.mk-edu .post_content .lead-list-wrap-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mk-edu .post_content .lead-list-wrap-v2 > * {
  width: 100%;
}

/* アイコンは SWELL のインラインアイコン（.swl-inline-icon）を
   段落に入れて置いている。order で見出しより前に出す。
   ※ 以前は core/html に <i class="fa-..."> を直接書いていたが、
     編集画面ではコード表示になり、表側と見え方が食い違っていた。 */
.mk-edu .post_content .lead-list-wrap-v2 > .mk-lead-icon {
  order: -1;
  margin-bottom: 0.55em;
  font-size: 26px;
  line-height: 1;
  color: var(--mk-amber);
  text-align: center;
}

/* 【重要】 単独で置いたときは高さを持たせる。
   SWELL のインラインアイコンは <span> の中身が半角スペース1つだけで、
   アイコン自体は ::after に height:100% で描かれる。
   文字と並んでいれば行の高さが付くが、段落に単独で置くと
   スペースが潰れて span の高さが 0 になり、アイコンが消える。 */
.mk-edu .post_content .mk-lead-icon .swl-inline-icon {
  height: 1em;
}

/* 説明文は読みやすさを優先して左揃えのまま */
.mk-edu .post_content .lead-list-wrap-v2 > p:not(.mk-lead-icon) {
  text-align: left;
}


/* --------------------------------------------------------------------------
   表：1列目を固定したときの地の色

   ブロック設定「1列目を固定」を使うと、SWELL は横スクロール時に
   下の内容が透けないよう、固定した列に地の色を敷く。
   その色が `var(--color_content_bg)` ＝ カスタマイザーの背景色なので、
   背景色を変えると表の1列目まで一緒に変わってしまう。

   ここでは、その表に限って変数を白に差し替える。
   SWELL の仕組みはそのまま使うので !important は要らない。
   -------------------------------------------------------------------------- */

.post_content .wp-block-table[data-cell1-fixed] {
  --color_content_bg: #fff;
}

/* ただしセルに色を指定してあるときは、その色を優先する。

   SWELL はセルの色を、セルの中の `.swl-cell-bg` の ::before（z-index:-1）で
   敷いている。固定列にはセル自身の背景が入るので、そのままだと
   下にある色の層が隠れてしまう（2段目のサブ見出しだけ白く抜ける）。
   色を指定したセルに限って、セル自身の背景を透明に戻す。
   色の層は不透明なので、横スクロールで下の内容が透けることもない。 */
.post_content .wp-block-table[data-cell1-fixed] tbody tr > :first-child:has(.swl-cell-bg) {
  background-color: transparent !important;
}


/* --------------------------------------------------------------------------
   表

   ※ 上の1列目固定を除き、表の見た目は CSS では触らない。余白も指定しない。

     色（見出し行・セル・縞模様）も、文字の中央揃えも、文字サイズも、
     すべてブロックエディタ側で設定できる。
     ここで指定すると編集画面の設定が効かなくなるうえ、
     編集画面と表側で見え方がズレる。

       ・色       … ブロック設定「色」／セルを選んで背景色
       ・中央揃え … ブロック設定「テーブル全体の中央揃え設定」（垂直・水平）
       ・縞模様   … ブロックのスタイル「ストライプ」
       ・文字サイズ … ブロック設定「タイポグラフィ」
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   リード（ページ冒頭）

   本文の1行が短く中央寄せで並ぶ作りなので、行間だけ本文に合わせる。
   -------------------------------------------------------------------------- */

.mk-edu .post_content .has-text-align-center {
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   セクションの下余白

   移植元のブロックは u-mb-* で下余白を持っていた。背景を白／オフホワイトの
   交互にしたので、その余白が「セクションの境目に白い帯が入る」形で見えてしまう。

   これは CSS では直していない。SWELL の .u-mb-* は !important 付きで、
   ここで打ち消すと編集画面の「下の余白」設定と実際の表示がズレるため、
   ブロック側のクラスを u-mb-0 に書き換えてある。
   縦のリズムはセクションの padding（PC 96px / SP 約53px）が受け持つ。

   下は、余白クラスを持たないブロックが末尾に来たとき用の保険。
   -------------------------------------------------------------------------- */

.mk-edu .post_content .swell-block-fullWide__inner > :last-child {
  margin-bottom: 0;
}