@charset "utf-8";
/*
 * ======================================
 * 株式会社みやこクリーンサービス サイト固有CSS
 * ======================================
 *
 * 共通CSS（main.css）のクラス・utilityで再現できなかった差分のみを定義する。
 * 値の出典は claude-design-output/（完成デザイン）から読み取った実数値。
 *
 * --- 元データの実数値（目視推定禁止・この値を基準に再現） ---
 *   コンテナ最大幅      : 1320px（フッターのみ 1200px）
 *   コンテナ左右padding : clamp(20px, 4vw, 48px)（フッター clamp(20px, 5vw, 40px)
 *                         / ヘッダー・MV clamp(16px, 2.5vw, 36px)）
 *   セクション上下padding: clamp(64px, 8vw, 120px)
 *                         （斜めカット時は +4vw / ブログ clamp(56px,7vw,100px)
 *                           / TOPお知らせ帯 clamp(36px,4vw,56px)）
 *   基準gap             : カラム clamp(28px,4vw,64px) / カード clamp(14px,2vw,20px)
 *                         / 見出し内 clamp(16px,3vw,40px)
 *   カラム比率          : grid auto-fit minmax(300px,1fr)（PC2等分→SP1列）
 *                         ブログ本文:サイド = flex 3 1 460px : 1 1 260px
 *   文字色              : 見出し #16283d / 本文 #3d5468・#293f52 / 日付 #7c93a7
 *   斜めカット角度      : 4vw（clip-path polygon）
 *
 * --- 追加クラス一覧（共通SCSS取り込み検討用） ---
 * .mcs-container / --foot / --narrow / --flush  - 1320px＋流動左右paddingのコンテナ
 * .mcs-section / --* / .mcs-clip-*              - 流動セクション余白・斜めカット区画
 * .mcs-cols2 / --tight / --stretch              - auto-fit 2カラム
 * .mcs-header--overlay / --solid                - 透過ヘッダー / 白地stickyヘッダー
 * .mcs-logo__name / __sub                       - テキストロゴ（社名＋英語表記）
 * .mcs-nav__en / __ja                           - EN上／JA下の2段ナビ
 * .mcs-nav-toggle / .mcs-spnav__*               - ヘッダー直下ドロップ型SPナビ
 * .mcs-mv__*                                    - メインビュー（静止画＋グラデ暗幕）
 * .mcs-hd__* / .mcs-hd-center__*                - 大型英字＋2px罫線＋日本語ラベル見出し
 * .mcs-lead / .mcs-text / .mcs-h2               - 本文（line-height 2.05〜2.15）
 * .mcs-why__*                                   - 丸アイコン＋番号＋罫線の理由カード
 * .mcs-svc__*                                   - ホバー連動で写真が切り替わる一覧
 * .mcs-menu__*                                  - 写真に白ボックスが重なるメニューカード
 * .mcs-bnr-row / .mcs-bnr / .mcs-cta            - 横長バナー・CTA区画
 * .mcs-dl__*                                    - dlベースの定義テーブル（dt固定120px）
 * .mcs-svc-main / .mcs-svc-card / .mcs-notebox  - 事業内容の主役ブロック・カード
 * .mcs-stat__*                                  - 数値インパクトカード（グラデ文字）
 * .mcs-appeal__* / .mcs-strength__*             - アピールカード・強みカード
 * .mcs-entry__* / .mcs-entry-card               - 応募バナー
 * .mcs-faq                                      - accordion--qa の角型Q/Aバッジ版
 * .mcs-form__* / .mcs-formhead__*               - フォーム（必須バッジ・中央見出し）
 * .mcs-newsrow__* / .mcs-widget__* / .mcs-pager - サムネ付き記事一覧・サイドバー
 * .mcs-article__*                               - 記事詳細本文
 * .mcs-footer__*                                - フッター（2カラム＋サイトマップ）
 * [data-reveal]                                 - スクロールフェードイン（20px）
 *
 * --- 共通SCSSに不足していたもの（5分類） ---
 * 1. 値の粒度不足
 *    デザインは余白・文字サイズが全面 clamp()（流動値）で設計されている。
 *    共通の utility は固定px（mt-40 / fz-16 等）のみで clamp の刻みが無い。
 *    → 共通側に「流動セクション余白」「流動コンテナ」の追加を検討したい。
 * 2. 指定方向不足
 *    .container は 1320px 以下で max-width:95% + padding:0 10px に切り替わるため
 *    「最大幅1320px＋左右paddingだけ流動」という指定ができない。
 * 3. 状態不足
 *    hover で「背景=白／文字=濃紺／枠線=濃紺」を同時に反転するパターンが無い
 *    （hover-bg-* と hover-color-* は個別指定で、border-color の反転が伴わない）。
 * 4. 構造不足
 *    (a) 大型英字＋2px罫線＋日本語ラベルを1行に並べる見出し（heading-big 系は
 *        英日の重なり・中央揃えのみで、罫線を挟む横並び構造が無い）。
 *    (b) dl（dt/dd）ベースの定義テーブル。table-* は table 要素専用。
 *    (c) 写真の上に白ボックスが -58px 重なるメニューカード。
 *    (d) セクション境界の 4vw 斜めカット（wave-divider は波型のみ）。
 *    (e) ヘッダー直下にドロップする白パネル型SPナビ（sp-nav は全画面グラデ型）。
 * 5. 装飾パターン不足
 *    (a) グラデーションで文字を塗る数値表示（background-clip:text）。
 *    (b) 白のテキストシャドウを多重に重ね、写真上の濃色文字を可読にする処理。
 *    (c) 角型のQ/Aバッジ（accordion--qa は円形バッジ固定）。
 *
 */

/* ==========================================================================
   0. ベース補正（共通CSSの既定値をデザインの実数値に合わせる）
   ========================================================================== */
/* デザインは body に line-height / letter-spacing を持たず、行間は各要素側で
   持たせている。共通CSSの既定（1.8 / 0.05em）のままだと、行間指定を持たない
   要素（ボタン・バッジ・ナビ・一覧の行など）の高さが一律で数px〜10px増え、
   行の高さ・ボタンの高さがデザインとずれるため、基準をデザインに合わせる。
   本文・見出しの行間は .mcs-lead / .mcs-text 等で個別に指定している。 */
body {
  line-height: normal;
  letter-spacing: 0;
  -webkit-text-size-adjust: 100%;
}
/* 追従ヘッダーの下にアンカー先が隠れないようにする */
html { scroll-padding-top: var(--mcs-header-h, 78px); }
@media (max-width: 896px) {
  body { font-size: 1.4rem; }
}
@media (max-width: 639px) {
  body { font-size: 1.4rem; }
}
/* デザインはリンクのホバーを個別指定しているため、共通の一律 opacity を解除 */
a:hover { opacity: 1; }

body.is-nav-open { overflow: hidden; }

p { text-wrap: pretty; }

/* ==========================================================================
   1. レイアウト（コンテナ / セクション余白 / 斜めカット）
   ========================================================================== */
.mcs-container {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}
.mcs-container--foot {
  max-width: 1200px;
  padding-left: clamp(20px, 5vw, 40px);
  padding-right: clamp(20px, 5vw, 40px);
}
.mcs-container--narrow { max-width: 780px; }
.mcs-container--flush {
  max-width: 100%;
  padding-left: clamp(16px, 2.5vw, 36px);
  padding-right: clamp(16px, 2.5vw, 36px);
}

.mcs-section        { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
.mcs-section--pb-lg { padding-bottom: clamp(72px, 9vw, 130px); }
.mcs-section--pt0   { padding-top: 0; }
.mcs-section--blog  { padding-top: clamp(56px, 7vw, 100px); padding-bottom: clamp(56px, 7vw, 100px); }
.mcs-section--strip { padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(36px, 4vw, 56px); }
.mcs-section--pb0   { padding-bottom: 0; }

/* 斜めカット区画（境界を 4vw の角度でカットする） */
.mcs-clip-down      { clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 calc(100% - 4vw)); margin-top: -2vw; }
.mcs-clip-down-both { clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 calc(100% - 4vw)); margin: -2vw 0; }
.mcs-clip-up-both   { clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%); margin: -2vw 0; }
.mcs-clip-up-flat   { clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); margin-top: -2vw; }
.mcs-clip-up-down   { clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 calc(100% - 4vw)); margin: -2vw 0; }

/* 斜めカット区画の内側余白（カット量 4vw を加算する） */
.mcs-section--clip     { padding-top: calc(clamp(64px, 8vw, 120px) + 4vw); padding-bottom: calc(clamp(64px, 8vw, 120px) + 4vw); }
.mcs-section--clip-top { padding-top: calc(clamp(64px, 8vw, 120px) + 4vw); padding-bottom: clamp(64px, 8vw, 120px); }
.mcs-section--clip-sm  { padding-top: calc(clamp(64px, 8vw, 110px) + 4vw); padding-bottom: calc(clamp(64px, 8vw, 110px) + 4vw); }

/* 2カラム（PCで2等分、幅が足りなくなった時点で1列） */
.mcs-cols2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.mcs-cols2--stretch { align-items: stretch; }
.mcs-cols2--tight   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(24px, 3vw, 44px); }
.mcs-cols2--mid     { gap: clamp(28px, 4vw, 52px); }

.mcs-photo { aspect-ratio: 4 / 3; background: #d6ebf4; overflow: hidden; }
.mcs-photo img { width: 100%; height: 100%; object-fit: cover; }

.mcs-bg-pale { background: #eef7fb; }

/* 余白の刻み
   共通 utility（mt-*）は 5px刻み＋tablet以下で自動半減のため、デザインの
   実数値（18px / 22px / 26px 等）と流動値（clamp）を再現できない。
   ここではデザインで実際に使われている刻みだけを定義する。 */
.mcs-mt-8  { margin-top: 8px; }
.mcs-mt-12 { margin-top: 12px; }
.mcs-mt-14 { margin-top: 14px; }
.mcs-mt-16 { margin-top: 16px; }
.mcs-mt-18 { margin-top: 18px; }
.mcs-mt-20 { margin-top: 20px; }
.mcs-mt-22 { margin-top: 22px; }
.mcs-mt-24 { margin-top: 24px; }
.mcs-mt-26 { margin-top: 26px; }
.mcs-mt-28 { margin-top: 28px; }
.mcs-mt-32 { margin-top: 32px; }
.mcs-mt-f1 { margin-top: clamp(30px, 3.5vw, 44px); }
.mcs-mt-f2 { margin-top: clamp(36px, 4vw, 56px); }
.mcs-mt-f3 { margin-top: clamp(40px, 5vw, 72px); }
.mcs-mt-f4 { margin-top: clamp(32px, 4vw, 48px); }
.mcs-mt-f5 { margin-top: clamp(36px, 4.5vw, 60px); }
.mcs-mt-f6 { margin-top: clamp(24px, 3vw, 36px); }
.mcs-mb-f1 { margin-bottom: clamp(28px, 3.5vw, 48px); }

/* 写真ホバーでゆっくり拡大 */
.mcs-zoom { transition: transform .8s cubic-bezier(.22, .8, .3, 1); }
.mcs-zoom:hover { transform: scale(1.06); }

/* ==========================================================================
   2. スクロールフェードイン（移動距離20px・控えめ）
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .8, .3, 1);
}
[data-reveal].is-shown { opacity: 1; transform: none; }

/* ==========================================================================
   3. ヘッダー
   ========================================================================== */
.mcs-header { z-index: 50; }
.mcs-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
}
.mcs-header--solid {
  position: sticky;
  top: 0;
  background: #ffffff;
  border-bottom: 1px solid #d8e6ee;
}

/* -- スクロール連動（TOPの透過ヘッダー → 白背景の固定バー）
      共通CSSの .header-sticky / .is-fixed に乗せ、配色だけ下層ヘッダーと
      揃える。高さが変わると本文がズラつくため padding は据え置き。 */
.mcs-header--overlay.is-fixed {
  border-bottom: 1px solid #d8e6ee;
  box-shadow: none;
  animation: mcsHeaderSlideIn .35s ease both;
}
@keyframes mcsHeaderSlideIn {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
.mcs-header--overlay.is-fixed .mcs-header__inner {
  padding: 16px clamp(16px, 2.5vw, 36px);
}
.mcs-header--overlay.is-fixed .mcs-logo__name {
  color: #16283d;
  text-shadow: none;
}
.mcs-header--overlay.is-fixed .mcs-logo__sub {
  color: #1599c5;
  text-shadow: none;
}
.mcs-header--overlay.is-fixed .mcs-nav__ja {
  color: #16283d;
  text-shadow: none;
}
.mcs-header--overlay.is-fixed .mcs-nav__en {
  color: #1599c5;
  text-shadow: none;
}
.mcs-header--overlay.is-fixed .header__nav-item--current a { background: #eef7fb; }
.mcs-header--overlay.is-fixed .header__nav-item--current .mcs-nav__ja { color: #1599c5; }
/* 白い固定バーになったら、下層ページと同じ淡い水色のホバーに戻す */
.mcs-header--overlay.is-fixed .mcs-nav__item a:hover { background: #eef7fb; }
.mcs-header--overlay.is-fixed .mcs-header__tel,
.mcs-header--overlay.is-fixed .mcs-header__tel::before { color: #1599c5; }

.mcs-header__inner {
  max-width: 100%;
  height: auto;
  padding: 16px clamp(16px, 2.5vw, 36px);
  gap: 12px 24px;
  align-items: center;
}
@media (max-width: 1039px) {
  .mcs-header__inner { height: auto; padding: 16px clamp(16px, 2.5vw, 36px); }
}

/* -- ロゴ（テキストロゴ） */
.mcs-logo {
  gap: 11px;
  min-width: 0;
  text-decoration: none;
}
.mcs-logo__name {
  display: block;
  font-size: clamp(16px, 1.9vw, 22px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
  color: #16283d;
}
.mcs-logo__sub {
  display: block;
  font-family: "Barlow", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  margin-top: 3px;
  color: #1599c5;
}
.mcs-header--overlay .mcs-logo__name,
.mcs-header--overlay .mcs-logo__sub {
  text-shadow: 0 1px 8px rgba(9, 28, 48, .55);
}
.mcs-header--overlay .mcs-logo__name { color: #ffffff; }
.mcs-header--overlay .mcs-logo__sub  { color: #9ed4e8; }

/* -- PCナビ */
.mcs-nav { gap: 4px; margin-right: 0; align-items: stretch; }
.mcs-nav__item a {
  padding: 7px 14px 6px;
  border-radius: 5px;
  text-align: center;
  white-space: nowrap;
}
.mcs-nav__en {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1;
  color: #1599c5;
}
.mcs-nav__ja {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 3px;
  color: #16283d;
}
/* 共通CSSはナビ項目のホバーとカレント表示に下線（疑似要素）を使うが、
   このサイトでは下線を出さない。カレントは淡い水色の背景で示す。 */
.mcs-nav .header__nav-item a::after { display: none; }
.mcs-header--solid .header__nav-item--current a { background: #eef7fb; }
.mcs-header--solid .header__nav-item--current .mcs-nav__ja { color: #1599c5; }

/* ホバー：カレント表示と同じ淡い水色の背景を敷く（文字色は変えないので
   カレント（背景＋水色文字）との区別は付く） */
.mcs-header--solid .mcs-nav__item a:hover { background: #eef7fb; }

.mcs-header--overlay .mcs-nav__ja { color: #ffffff; text-shadow: 0 1px 8px rgba(9, 28, 48, .55); }
.mcs-header--overlay .mcs-nav__en { color: #9ed4e8; text-shadow: 0 1px 8px rgba(9, 28, 48, .55); }
.mcs-header--overlay .header__nav-item--current .mcs-nav__ja { color: #9ed4e8; }
/* 透過ヘッダー（メインビュー上）は文字が白のため、淡い水色では文字が
   見えなくなる。同じ「背景が付く」表現を半透明の白で行う。 */
.mcs-header--overlay .mcs-nav__item a:hover { background: rgba(255, 255, 255, .16); }

.mcs-header__tel { font-size: 1.8rem; }
.mcs-header--overlay .mcs-header__tel,
.mcs-header--overlay .mcs-header__tel::before { color: #ffffff; }

/* -- ハンバーガーボタン */
.mcs-nav-toggle {
  top: 16px;
  right: clamp(16px, 2.5vw, 36px);
  width: 46px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #d8e6ee;
  background: #ffffff;
  backdrop-filter: none;
}
.mcs-nav-toggle .nav-toggle__line {
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: #24487a;
}
.mcs-nav-toggle .nav-toggle__line:nth-child(1) { top: 15px; }
.mcs-nav-toggle .nav-toggle__line:nth-child(2) { top: 22px; }
.mcs-nav-toggle .nav-toggle__line:nth-child(3) { top: 29px; }
.mcs-nav-toggle.is-active .nav-toggle__line:nth-child(1),
.mcs-nav-toggle.is-active .nav-toggle__line:nth-child(3) { top: 22px; }

.mcs-nav-toggle--overlay {
  border-color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .12);
}
.mcs-nav-toggle--overlay .nav-toggle__line { background: #ffffff; }
/* 固定バーに切り替わったら白地の上に乗るため、枠線と3本線を濃色に戻す */
.mcs-nav-toggle--overlay.is-fixed {
  border-color: #d8e6ee;
  background: #ffffff;
}
.mcs-nav-toggle--overlay.is-fixed .nav-toggle__line { background: #24487a; }
.mcs-nav-toggle--overlay.is-active {
  background: #ffffff;
  border-color: #d8e6ee;
}
.mcs-nav-toggle--overlay.is-active .nav-toggle__line { background: #24487a; }

/* -- SPナビ（ヘッダー直下にドロップする白パネル） */
.mcs-spnav {
  top: var(--mcs-header-h, 78px);
  bottom: auto;
  max-height: calc(100vh - var(--mcs-header-h, 78px));
  overflow-y: auto;
  display: block;
  padding: 8px clamp(16px, 2.5vw, 36px) 20px;
  background: #ffffff;
  border-top: 1px solid #d8e6ee;
  box-shadow: 0 14px 24px rgba(9, 28, 48, .10);
}
.mcs-spnav__list {
  max-width: none;
  width: 100%;
  text-align: left;
}
.mcs-spnav__item {
  border-bottom: 1px solid #e6f0f6;
  transform: none;
  opacity: 1;
}
.mcs-spnav__item:first-child { border-top: none; }
.mcs-spnav__link {
  padding: 15px 4px;
  min-height: 44px;
  color: #16283d;
  gap: 12px;
}
.mcs-spnav__link::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .8em;
  color: #1599c5;
  opacity: 1;
}
.mcs-spnav__link:hover { background: #f6fbfd; }
.mcs-spnav__link.is-current .mcs-spnav__ja { color: #1599c5; }
.mcs-spnav__text { display: block; }
.mcs-spnav__en {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #1599c5;
  opacity: 1;
  margin-right: 0;
  padding-left: 0;
}
.mcs-spnav__ja {
  display: block;
  margin-top: 3px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.4;
}
.mcs-spnav__bottom {
  margin-top: 16px;
  max-width: none;
  text-align: left;
}
.mcs-spnav__tel {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 2rem;
}
.mcs-spnav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px;
  background: #1599c5;
  color: #ffffff;
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 700;
  transition: background .3s ease;
}
.mcs-spnav__cta:hover { background: #24487a; color: #ffffff; }

/* ==========================================================================
   4. ボタン（共通 .btn に対するサイズ・状態の差分）
   ========================================================================== */
.mcs-btn-auto {
  width: auto;
  max-width: none;
  gap: 10px;
  border-width: 1px;
  font-weight: 700;
}
@media (max-width: 639px) {
  .mcs-btn-auto { max-width: none; font-size: 1.5rem; }
}
.mcs-btn-sm    { gap: 5px; padding: 11px 22px; font-size: 14px; }
.mcs-btn-md    { padding: 16px 32px; }
.mcs-btn-bnr   { padding: 17px 36px; font-size: 15.5px; }
.mcs-btn-entry { padding: 14px 26px; font-size: 14.5px; }
.mcs-btn-lg {
  gap: 12px;
  padding: 19px 44px;
  font-size: clamp(15px, 1.6vw, 17px);
}
.mcs-btn__arrow { font-family: "Barlow", sans-serif; font-weight: 700; }

/* 白背景＋水色枠 → hover で濃紺の文字・枠線 */
.mcs-btn-outline {
  background: #ffffff;
  border-color: #1599c5;
  color: #1599c5;
}
.mcs-btn-outline:hover {
  background: #ffffff;
  border-color: #24487a;
  color: #24487a;
}
/* 透過＋白枠 → hover で白背景・濃紺文字（写真／濃色背景の上） */
.mcs-btn-ghost {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
.mcs-btn-ghost:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #24487a;
}
.mcs-btn-ghost--dim { border-color: rgba(255, 255, 255, .6); }
/* ベタ塗り（水色）→ hover で白背景・濃紺文字 */
.mcs-btn-solid-invert:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #24487a;
}

/* ==========================================================================
   5. メインビュー
   ========================================================================== */
.mcs-mv {
  position: relative;
  overflow: hidden;
  background: #16283d;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
}
/* CMSスライダーの高さは外枠追従（height:100%）仕様のため、外枠に明示指定する。
   z-index:0 で独自の重なり文脈を作り、CMSが出力するSwiperの内部z-index
   （.swiper=1 / pagination=10 等）がMVのコピーより前に出ないよう閉じ込める。 */
#slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/* CMSが #slideshow 内に差し込むラッパー（表示エリアのdiv → CMSの外枠 →
   .swiper → .swiper-wrapper）は高さを持たないため、スライダーの
   height:100% が解決できるよう高さを下まで通す。
   ラッパーのid・class名は案件で変わるので、構造（> div）でも受けておく。 */
#slideshow > div,
#slideshow > div > div,
#slideshow .swiper,
#slideshow .swiper-container,
#slideshow .swiper-wrapper,
#slideshow .swiper-slide {
  height: 100%;
}
/* スライドは Swiper が transform で並べるため、position は触らない */
#slideshow .main_slider__inner {
  width: 100%;
  height: 100%;
}
#slideshow .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 完成デザインのMVにはページネーション・矢印が無いため非表示にする。
   スライドのインジケーターを出したい場合はこのブロックを削除する。 */
#slideshow .swiper-pagination,
#slideshow .swiper-button-next,
#slideshow .swiper-button-prev {
  display: none;
}

.mcs-mv__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(9, 28, 48, .86) 0%, rgba(9, 28, 48, .72) 42%, rgba(9, 28, 48, .28) 78%, rgba(9, 28, 48, .18) 100%);
}
.mcs-mv__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(120px, 14vw, 180px) clamp(16px, 2.5vw, 36px) clamp(28px, 3.5vw, 44px);
}
.mcs-mv__title {
  font-size: clamp(31px, 5vw, 58px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: .01em;
  color: #ffffff;
}
.mcs-mv__accent { color: #9ed4e8; }
.mcs-mv__lead {
  margin-top: 20px;
  max-width: min(100%, 64em);
  font-size: clamp(13.5px, 1.25vw, 16px);
  line-height: 2.05;
  color: #ffffff;
}

/* ==========================================================================
   6. セクション見出し（大型英字 ＋ 2px罫線 ＋ 日本語ラベル）
   ========================================================================== */
.mcs-hd {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
}
.mcs-hd--reverse { flex-wrap: wrap-reverse; }
.mcs-hd--msg     { gap: clamp(14px, 2vw, 28px); }
.mcs-hd__en {
  font-family: "Barlow", sans-serif;
  font-size: clamp(38px, 6vw, 84px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: #24487a;
}
.mcs-hd__en--md { font-size: clamp(34px, 5.4vw, 76px); }
.mcs-hd__en--sm { font-size: clamp(34px, 5vw, 72px); }
.mcs-hd__en--xs { font-size: clamp(26px, 3.2vw, 44px); }
.mcs-hd__side { flex: 1 1 180px; min-width: 120px; }
.mcs-hd__side--md  { flex: 1 1 200px; min-width: 140px; }
.mcs-hd__side--sm  { flex: 1 1 120px; min-width: 90px; }
.mcs-hd__side--cap { flex: 1 1 140px; min-width: 110px; max-width: 320px; }
.mcs-hd__rule { height: 2px; background: #24487a; }
.mcs-hd__ja {
  margin-top: 10px;
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 700;
  letter-spacing: .3em;
  color: #1599c5;
  text-align: right;
}
.mcs-hd__ja--left { text-align: left; }
.mcs-hd__ja--md   { font-size: clamp(12.5px, 1.25vw, 15px); }
.mcs-hd__ja--sm   { margin-top: 9px; font-size: clamp(12px, 1.2vw, 14px); letter-spacing: .28em; }
.mcs-hd__ja--navy { color: #24487a; text-shadow: 0 0 14px rgba(255, 255, 255, .95), 0 0 32px rgba(255, 255, 255, .9); }
/* 写真背景のセクションで、水色のラベルを白の光彩で読めるようにする
   （色は他セクションと揃えたまま可読性だけ上げる） */
.mcs-hd__ja--onphoto { text-shadow: 0 0 12px rgba(255, 255, 255, .98), 0 0 28px rgba(255, 255, 255, .92); }

/* 中央揃えの見出し（濃色背景・写真の上） */
.mcs-hd-center { text-align: center; }
.mcs-hd-center__en {
  font-family: "Barlow", sans-serif;
  font-size: clamp(38px, 6vw, 84px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: #ffffff;
}
.mcs-hd-center__en--md { font-size: clamp(34px, 5.4vw, 76px); }
.mcs-hd-center__ja {
  margin-top: 12px;
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 700;
  letter-spacing: .3em;
  color: #9ed4e8;
}

/* ==========================================================================
   7. 本文テキスト・ラベル
   ========================================================================== */
.mcs-lead {
  font-size: clamp(14.5px, 1.4vw, 16px);
  line-height: 2.15;
  color: #293f52;
}
.mcs-lead--narrow { max-width: 46em; }

/* 指定位置で改行させたい <br>。幅に余裕がある画面でのみ有効にする。
   カラムが狭くなると指定行がどうせ折り返してしまい、かえって行が
   不揃いになるため、収まらない幅では改行そのものを無効化する。 */
.mcs-br-pc { display: none; }
@media (min-width: 1280px) {
  .mcs-br-pc { display: inline; }
}
/* スマホでのみ有効にする改行 */
.mcs-br-sp { display: none; }
@media (max-width: 639px) {
  .mcs-br-sp { display: inline; }
}
.mcs-lead--mid    { max-width: 44em; }
.mcs-text {
  font-size: 15px;
  line-height: 2.15;
  color: #3d5468;
}
.mcs-text--recruit { line-height: 2.1; }
.mcs-text > p + p { margin-top: 18px; }
.mcs-text__sign {
  margin-top: 24px;
  font-size: 14.5px;
  font-weight: 700;
  color: #24487a;
}
.mcs-h2 {
  font-size: clamp(25px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}
.mcs-h2--md { font-size: clamp(23px, 3vw, 34px); line-height: 1.5; }
.mcs-h2--sm { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.5; }

.mcs-tag {
  display: inline-block;
  padding: 7px 16px;
  background: #1599c5;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
}
.mcs-badge {
  display: inline-block;
  padding: 5px 13px;
  background: #1599c5;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
}

/* ==========================================================================
   8. TOP：お知らせ帯
   ========================================================================== */
.mcs-news__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 28px);
}
.mcs-news__head { flex: 0 1 200px; }
.mcs-news__label {
  font-family: "Barlow", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  color: #1599c5;
}
.mcs-news__title {
  margin-top: 8px;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
}
.mcs-news__body { flex: 1 1 560px; min-width: 0; }
.mcs-news .blog-list { border-top: none; }
.mcs-news .blog-list__item {
  border-top: 1px solid #d8e6ee;
  border-bottom: none;
}
.mcs-news .blog-list__item:last-child { border-bottom: 1px solid #d8e6ee; }
.mcs-news .blog-list__link {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 16px 4px;
}
.mcs-news .blog-list__link:hover { background: transparent; color: #1599c5; }
.mcs-news .blog-list__date {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #7c93a7;
}
.mcs-news .blog-list__title {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}
.mcs-news__bar {
  height: 6px;
  background: linear-gradient(90deg, #1599c5 0%, #24487a 100%);
}

/* ==========================================================================
   9. TOP：選ばれている理由
   ========================================================================== */
.mcs-why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(32px, 4vw, 52px);
  align-items: start;
}
.mcs-why__icon {
  display: grid;
  place-items: center;
  width: clamp(160px, 15vw, 210px);
  height: clamp(160px, 15vw, 210px);
  margin: 0 auto;
  border-radius: 50%;
  background: #eef7fb;
  opacity: 0;
  transform: translateY(24px) scale(.94);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .8, .3, 1);
}
.mcs-why__icon img { width: 62%; height: 62%; object-fit: contain; }
.mcs-why.is-shown .mcs-why__icon { opacity: 1; transform: translateY(0) scale(1); }
.mcs-why__item:nth-child(2) .mcs-why__icon { transition-delay: .18s; }
.mcs-why__item:nth-child(3) .mcs-why__icon { transition-delay: .36s; }
.mcs-why__num {
  margin-top: 5px;
  font-family: "Barlow", sans-serif;
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1;
  color: #1599c5;
}
.mcs-why__rule { margin-top: 16px; height: 2px; background: #24487a; }
.mcs-why__title {
  margin-top: 20px;
  font-size: clamp(18px, 1.9vw, 21px);
  font-weight: 700;
  line-height: 1.55;
  color: #16283d;
}
.mcs-why__text {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 2.05;
  color: #3d5468;
}

/* ==========================================================================
   10. TOP：事業内容（濃紺・ホバー連動で写真が切り替わる）
   ========================================================================== */
.mcs-svc {
  position: relative;
  overflow: hidden;
  background: #24487a;
}
.mcs-svc__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(21, 153, 197, .45) 0%, rgba(36, 72, 122, .9) 55%, rgba(22, 40, 61, .95) 100%);
}
.mcs-svc__inner { position: relative; z-index: 1; }
.mcs-svc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(40px, 5vw, 72px);
  align-items: center;
}
.mcs-svc__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .35);
  overflow: hidden;
}
.mcs-svc__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
.mcs-svc__visual img.is-on { opacity: 1; }
.mcs-svc__list > li { border-top: 1px solid rgba(255, 255, 255, .45); }
.mcs-svc__list > li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .45); }
.mcs-svc__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  color: #ffffff;
  text-decoration: none;
  transition: color .3s ease;
}
.mcs-svc__link:hover { color: #9ed4e8; }
.mcs-svc__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.mcs-svc__label--baseline { align-items: baseline; gap: 6px 14px; }
.mcs-svc__name {
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 700;
  letter-spacing: .08em;
}
.mcs-svc__badge {
  padding: 3px 11px;
  background: #ffffff;
  color: #24487a;
  font-size: 11.5px;
  font-weight: 700;
}
.mcs-svc__note { font-size: 13px; color: #c6e4f1; }
.mcs-svc__text {
  margin-top: 22px;
  font-size: 14.5px;
  line-height: 2;
  color: #ffffff;
}

/* ==========================================================================
   11. TOP：企業の方へ（チェックリスト）
   ========================================================================== */
.mcs-check {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 32px);
}
.mcs-check > li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.8;
}
.mcs-check__icon {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 3px;
  color: #1599c5;
}
.mcs-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 3vw, 36px);
}
/* -- modifier: 並んだボタンの幅を「広い方」に揃える
      240px は広い方（「よくあるご質問を見る →」＝日本語10文字 150px ＋
      左右padding 60px ＋ 矢印と間隔 約27px＝実測237px）に対する下限値。
      両方に同じ下限を与えるだけなので、幅が足りない画面では元どおり
      flex-wrap で下に折り返る（gridで横並びを維持すると列幅が足りない
      帯で文字が2行に折り返してしまうため、この方式を採る）。
      ラベルの文字数を増やす場合はこの値も見直すこと。 */
.mcs-btns--even > .btn {
  min-width: 240px;
}
/* バナー内の並列ボタンも同様に幅を揃える。
   184px は広い方（「お問い合わせ →」＝実測181px）に対する下限値。 */
.mcs-bnr__btns--even > .btn {
  min-width: 184px;
}

/* ==========================================================================
   12. TOP：採用バナー区画
   ========================================================================== */
.mcs-recruit { position: relative; overflow: hidden; background: #eef7fb; }
.mcs-recruit__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mcs-recruit__inner { position: relative; z-index: 1; }
.mcs-recruit__box { max-width: min(100%, 760px); }
/* デザインどおり2行（<br>位置）で固定するため nowrap。ただし最小幅の端末で
   はみ出さないよう、1行15文字が左右padding内に収まる上限を min() で掛ける。 */
.mcs-recruit__catch {
  margin-top: clamp(26px, 3vw, 38px);
  font-size: min(clamp(24px, 3.4vw, 44px), calc(6.3vw - 2px));
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
  color: #16283d;
  text-shadow: 0 0 18px rgba(255, 255, 255, .95), 0 0 44px rgba(255, 255, 255, .85), 0 1px 2px rgba(255, 255, 255, .9);
}
.mcs-recruit__text {
  margin-top: clamp(24px, 3vw, 34px);
  max-width: 34em;
  font-size: clamp(14px, 1.35vw, 15.5px);
  line-height: 2.1;
  color: #293f52;
  text-shadow: 0 0 14px rgba(255, 255, 255, .98), 0 0 30px rgba(255, 255, 255, .95), 0 1px 2px rgba(255, 255, 255, .9);
}

/* 横長バナー（2段テキスト＋矢印） */
.mcs-bnr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 480px;
  padding: 20px clamp(22px, 2.6vw, 30px);
  text-decoration: none;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.mcs-bnr-row--navy {
  margin-top: clamp(26px, 3vw, 36px);
  background: #24487a;
  color: #ffffff;
}
.mcs-bnr-row--navy:hover { background: #1599c5; color: #ffffff; }
.mcs-bnr-row--outline {
  margin-top: 14px;
  background: #ffffff;
  border: 1px solid #1599c5;
  color: #1599c5;
}
.mcs-bnr-row--outline:hover { background: #1599c5; border-color: #1599c5; color: #ffffff; }
.mcs-bnr-row__title {
  display: block;
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 700;
  letter-spacing: .04em;
}
.mcs-bnr-row__sub {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 500;
}
.mcs-bnr-row--navy .mcs-bnr-row__sub { color: #cfe4f3; }
.mcs-bnr-row__arrow {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: 20px;
}

/* ==========================================================================
   13. TOP：下層ページメニューカード
   ========================================================================== */
.mcs-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.mcs-menu__link {
  display: block;
  color: #16283d;
  text-decoration: none;
  transition: color .3s ease;
}
.mcs-menu__link:hover { color: #1599c5; }
.mcs-menu__img {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #d6ebf4;
}
.mcs-menu__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, .8, .3, 1);
}
.mcs-menu__link:hover .mcs-menu__img img { transform: scale(1.08); }
.mcs-menu__body {
  display: block;
  position: relative;
  z-index: 1;
  margin: -58px 34% 0 0;
  padding: 22px 24px 0 0;
  background: #ffffff;
}
.mcs-menu__en {
  display: block;
  font-family: "Barlow", sans-serif;
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 700;
  letter-spacing: .06em;
  color: #1599c5;
}
.mcs-menu__ja {
  display: block;
  margin-top: 8px;
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 700;
  letter-spacing: .14em;
}

/* ==========================================================================
   14. お問い合わせCTA / バナー区画
   ========================================================================== */
.mcs-cta { position: relative; overflow: hidden; }
.mcs-cta__bg,
.mcs-bnr__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mcs-cta__overlay,
.mcs-bnr__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(36, 72, 122, .92) 0%, rgba(36, 72, 122, .8) 45%, rgba(21, 153, 197, .72) 100%);
}
.mcs-cta__inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(64px, 8vw, 116px);
  padding-bottom: clamp(64px, 8vw, 116px);
  text-align: center;
  color: #ffffff;
}
.mcs-cta__en {
  font-family: "Barlow", sans-serif;
  font-size: clamp(38px, 6vw, 76px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}
.mcs-cta__ja {
  margin-top: 16px;
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 700;
  letter-spacing: .3em;
}
.mcs-cta__lead {
  margin: clamp(26px, 3vw, 38px) auto 0;
  max-width: 44em;
  font-size: clamp(14.5px, 1.4vw, 16px);
  line-height: 2.1;
}
.mcs-cta__tel-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 18px;
  margin-top: clamp(22px, 2.6vw, 30px);
}
.mcs-cta__tel {
  font-family: "Barlow", sans-serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
}
.mcs-cta__hours { font-size: 14px; color: #dce6f2; }
.mcs-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: clamp(28px, 3.5vw, 44px);
}

.mcs-bnr {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: #24487a;
  color: #ffffff;
}
.mcs-bnr__inner {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 5vw, 68px) clamp(20px, 4vw, 40px);
}
.mcs-bnr__title {
  font-size: clamp(21px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.6;
}
.mcs-bnr__text {
  margin: 18px auto 0;
  max-width: 36em;
  font-size: 14.5px;
  line-height: 2;
  color: #dce6f2;
}
/* スマホでは中央揃えの長文が読みにくいため左寄せにする */
@media (max-width: 639px) {
  .mcs-bnr__text { text-align: left; }
}
.mcs-bnr__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

/* ==========================================================================
   15. 下層ページヒーロー
   ========================================================================== */
.mcs-hero { background: #24487a; }
.mcs-hero__overlay {
  background: linear-gradient(105deg, rgba(21, 40, 61, .82) 0%, rgba(36, 72, 122, .7) 55%, rgba(21, 153, 197, .55) 100%);
}
.mcs-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: clamp(44px, 5vw, 76px);
  padding-bottom: clamp(48px, 5.5vw, 84px);
}
.mcs-hero__inner--entry {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.mcs-hero__en {
  margin-top: 22px;
  font-family: "Barlow", sans-serif;
  font-size: clamp(11.5px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: .22em;
  color: #bfe6f5;
}
.mcs-hero__title {
  margin-top: 10px;
  font-size: clamp(27px, 3.6vw, 42px);
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
}
.mcs-hero .breadcrumb {
  padding: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .9);
}
.mcs-hero .breadcrumb__link {
  color: #ffffff;
  opacity: .9;
  text-decoration: none;
}
.mcs-hero .breadcrumb__link:hover { opacity: 1; text-decoration: none; }
.mcs-hero .breadcrumb__item:not(:last-child)::after { color: rgba(255, 255, 255, .6); }
.mcs-hero .breadcrumb__current { color: rgba(255, 255, 255, .9); }

/* ==========================================================================
   16. 定義テーブル（dl）
   ========================================================================== */
.mcs-dl {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  background: #ffffff;
  border-top: 2px solid #24487a;
  overflow: hidden;
}
.mcs-dl--bordered {
  border: 1px solid #d8e6ee;
  border-top: 2px solid #24487a;
}
.mcs-dl__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding: 22px clamp(20px, 3vw, 36px);
  border-bottom: 1px solid #e6f0f6;
}
.mcs-dl__row:last-child { border-bottom: none; }
.mcs-dl__dt {
  width: 120px;
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #24487a;
}
.mcs-dl__dd {
  flex: 1 1 220px;
  font-size: 15.5px;
  line-height: 1.9;
}

/* ==========================================================================
   17. 会社概要：ごあいさつ
   ========================================================================== */
.mcs-greet__catch {
  padding: 22px 26px;
  background: #24487a;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
  color: #ffffff;
}
.mcs-greet__text { margin-top: 26px; }
.mcs-greet__photos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
}
.mcs-greet__photo-main {
  flex: 2 1 0;
  min-height: 200px;
  background: #d6ebf4;
  overflow: hidden;
}
.mcs-greet__photo-row {
  flex: 1 1 0;
  min-height: 140px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mcs-greet__photo { background: #d6ebf4; overflow: hidden; }
.mcs-greet__photos img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   18. 事業内容
   ========================================================================== */
.mcs-svc-lead { max-width: 900px; }

/* TOPの事業内容一覧からのアンカー着地位置。
   html の scroll-padding-top（追従ヘッダー分）に加えて、見出しの上に
   少し余白を残して着地させる。 */
#service-guestroom,
#service-bedmaking,
#service-washroom,
#service-bath,
#service-common {
  scroll-margin-top: 24px;
}
.mcs-svc-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: stretch;
  margin-top: clamp(36px, 4.5vw, 64px);
  background: #ffffff;
  border-top: 2px solid #24487a;
}
.mcs-svc-main__img {
  min-height: clamp(240px, 28vw, 380px);
  background: #d6ebf4;
  overflow: hidden;
}
.mcs-svc-main__img img { width: 100%; height: 100%; object-fit: cover; }
.mcs-svc-main__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 3.5vw, 52px) clamp(22px, 3vw, 48px);
}
.mcs-svc-main__title {
  margin-top: clamp(16px, 2vw, 22px);
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
}
.mcs-svc-main__text {
  margin-top: clamp(16px, 2vw, 22px);
  font-size: clamp(14.5px, 1.4vw, 16px);
  line-height: 2.15;
  color: #293f52;
}

.mcs-svc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 46%), 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  margin-top: clamp(20px, 2.6vw, 32px);
}
/* スマホでは2列だとカードが小さくなるため、客室清掃（主役ブロック）と
   同じ幅の1カラムにする */
@media (max-width: 639px) {
  .mcs-svc-cards { grid-template-columns: 1fr; }
}
.mcs-svc-card { background: #ffffff; border-top: 2px solid #24487a; }
.mcs-svc-card__img {
  aspect-ratio: 16 / 10;
  background: #d6ebf4;
  overflow: hidden;
}
.mcs-svc-card__img img { width: 100%; height: 100%; object-fit: cover; }
.mcs-svc-card__body { padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.2vw, 28px); }
.mcs-svc-card__title {
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: .04em;
}
.mcs-svc-card__note {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1599c5;
}
.mcs-svc-card__text {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 2.05;
  color: #3d5468;
}
.mcs-notebox {
  margin-top: clamp(24px, 3vw, 32px);
  padding: 22px 26px;
  background: #eef7fb;
  border-top: 2px solid #24487a;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.95;
  color: #24487a;
}

/* 年間契約（写真背景＋数値カード） */
.mcs-contract { position: relative; overflow: hidden; background: #eef7fb; }
.mcs-contract__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mcs-contract__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(238, 247, 251, .12) 0%, rgba(238, 247, 251, 0) 40%);
}
.mcs-contract__inner { position: relative; z-index: 1; }
.mcs-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 46%), 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.mcs-stat {
  padding: clamp(26px, 3vw, 34px) 22px;
  background: #ffffff;
  text-align: center;
}
.mcs-stat__icon { display: grid; place-items: center; color: #1599c5; }
.mcs-stat__value {
  margin-top: 16px;
  font-family: "Barlow", sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 700;
  line-height: 1;
  color: #1599c5;
  background: linear-gradient(120deg, #1599c5 0%, #24487a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 時間帯表記（9:00〜17:00）を1行に収める */
.mcs-stat__value--range {
  font-size: clamp(20px, 3.2vw, 44px);
  white-space: nowrap;
}
.mcs-stat__label {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #16283d;
}
.mcs-stat__note {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.8;
  color: #3d5468;
}

/* ==========================================================================
   19. 採用情報
   ========================================================================== */
.mcs-appeal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin-top: clamp(30px, 4vw, 44px);
}
.mcs-appeal__item {
  padding: clamp(26px, 3vw, 32px) clamp(22px, 2.5vw, 28px);
  background: #ffffff;
  border-top: 2px solid #24487a;
}
.mcs-appeal__icon {
  display: block;
  width: clamp(78px, 8vw, 96px);
  height: auto;
  margin: 0 auto;
}
.mcs-appeal__title {
  margin-top: 18px;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.mcs-appeal__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 2;
  color: #3d5468;
  text-align: center;
}

.mcs-entry { position: relative; overflow: hidden; background: #24487a; color: #ffffff; }
.mcs-entry__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mcs-entry__inner { position: relative; z-index: 1; text-align: center; }
.mcs-entry__catch {
  margin-top: clamp(26px, 3vw, 38px);
  font-size: clamp(23px, 2.8vw, 32px);
  font-weight: 700;
  line-height: 1.5;
}
.mcs-entry__text {
  margin: 16px auto 0;
  max-width: 34em;
  font-size: 14.5px;
  line-height: 2;
  color: #dce6f2;
}
.mcs-entry-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 620px;
  margin: 32px auto 0;
  padding: 26px 32px;
  background: #ffffff;
  color: #24487a;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(9, 28, 48, .3);
  transition: background .3s ease, color .3s ease;
}
.mcs-entry-card:hover { background: #16283d; color: #ffffff; }
.mcs-entry-card__label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #1599c5;
  transition: color .3s ease;
}
.mcs-entry-card:hover .mcs-entry-card__label { color: #9ed4e8; }
.mcs-entry-card__title {
  display: block;
  margin-top: 8px;
  font-size: clamp(19px, 2.3vw, 24px);
  font-weight: 700;
}
.mcs-entry-card__arrow {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: 22px;
}

/* ==========================================================================
   20. 企業の方へ：強み3カード / よくあるご質問
   ========================================================================== */
.mcs-strength-wrap { position: relative; overflow: hidden; background: #eef7fb; }
.mcs-strength-wrap__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mcs-strength-wrap__inner { position: relative; z-index: 1; }
.mcs-strength {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(14px, 2vw, 20px);
}
.mcs-strength__item {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.5vw, 28px);
  background: #ffffff;
}
.mcs-strength__leaf {
  position: absolute;
  right: clamp(12px, 2.5vw, 34px);
  bottom: -14px;
  width: clamp(96px, 11vw, 136px);
  opacity: .55;
  pointer-events: none;
}
.mcs-strength__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mcs-strength__numwrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}
.mcs-strength__num {
  font-family: "Barlow", sans-serif;
  font-size: clamp(40px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: #1599c5;
}
.mcs-strength__line { flex: 1 1 auto; height: 1px; background: #bcdcea; }
.mcs-strength__icon {
  display: grid;
  place-items: center;
  width: clamp(102px, 10.5vw, 130px);
  height: clamp(102px, 10.5vw, 130px);
  border-radius: 50%;
  background: #eef7fb;
  flex-shrink: 0;
}
.mcs-strength__icon img { width: 88%; height: 92%; object-fit: contain; }
.mcs-strength__title {
  position: relative;
  margin-top: 16px;
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.55;
}
.mcs-strength__text {
  position: relative;
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 2;
  color: #3d5468;
}

/* -- よくあるご質問（accordion / accordion--qa の角型バッジ版） */
.mcs-faq {
  max-width: 960px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 16px);
}
.mcs-faq .accordion {
  border: none;
  border-top: 2px solid #24487a;
  border-radius: 0;
  background: #ffffff;
  overflow: hidden;
}
.mcs-faq .accordion:first-child { border-top: 2px solid #24487a; }
.mcs-faq .accordion__head {
  padding: 22px clamp(18px, 2.4vw, 28px);
  padding-left: calc(clamp(18px, 2.4vw, 28px) + 50px);
  padding-right: calc(clamp(18px, 2.4vw, 28px) + 32px);
  background: #eef7fb;
  font-size: clamp(16px, 1.7vw, 18.5px);
  font-weight: 700;
  line-height: 1.6;
  color: #16283d;
}
.mcs-faq .accordion__head:hover { background: #e3f2f9; }
.mcs-faq .accordion__head::before {
  content: "Q";
  top: 50%;
  left: clamp(18px, 2.4vw, 28px);
  width: 36px;
  height: 36px;
  border-radius: 0;
  transform: translateY(-50%);
  background: #1599c5;
  color: #ffffff;
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
/* ＋／−アイコンを 16px の十字で描く（開いている間は横棒のみ） */
.mcs-faq .accordion__head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(18px, 2.4vw, 28px);
  width: 16px;
  height: 16px;
  margin: 0;
  transform: translateY(-50%);
  color: #1599c5;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 16px 2px, 2px 16px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: background-size .2s ease;
}
.mcs-faq .accordion.is-open .accordion__head::after {
  content: "";
  background-size: 16px 2px, 2px 0;
}
.mcs-faq .accordion__body {
  display: block;
  max-height: 0;
  overflow: hidden;
  border-top: none;
  background: #ffffff;
  padding: 0 clamp(18px, 2.4vw, 28px);
  padding-left: calc(clamp(18px, 2.4vw, 28px) + 50px);
  transition: max-height .3s ease, padding .3s ease;
}
.mcs-faq .accordion.is-open .accordion__body {
  padding-top: 24px;
  padding-bottom: 24px;
}
.mcs-faq .accordion__body::before {
  content: "A";
  top: 24px;
  left: clamp(18px, 2.4vw, 28px);
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: #eef7fb;
  color: #1599c5;
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.mcs-faq__text {
  font-size: 15px;
  line-height: 2.1;
  color: #293f52;
}

/* ==========================================================================
   21. お問い合わせフォーム
   ========================================================================== */
.mcs-formwrap {
  max-width: 780px;
  margin: 0 auto;
}
.mcs-formhead { text-align: center; }
.mcs-formhead__en {
  font-family: "Barlow", sans-serif;
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: #24487a;
}
.mcs-formhead__ja {
  margin-top: 14px;
  font-size: clamp(12.5px, 1.25vw, 15px);
  font-weight: 700;
  letter-spacing: .3em;
  color: #1599c5;
}
.mcs-formhead__lead {
  margin-top: clamp(22px, 2.6vw, 32px);
  font-size: 15px;
  line-height: 2.05;
  color: #3d5468;
}
.mcs-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: clamp(28px, 3.4vw, 44px);
  background: #ffffff;
  border-top: 2px solid #24487a;
}
.mcs-form__label { display: block; }
.mcs-form__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #24487a;
}
.mcs-form__req {
  padding: 2px 8px;
  background: #1599c5;
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
}
.mcs-form .form-input {
  margin-top: 10px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #cddfea;
  border-radius: 0;
  font-size: 15px;
  color: #16283d;
}
.mcs-form textarea.form-input { line-height: 1.9; resize: vertical; }
.mcs-form .form-input:focus {
  border-color: #1599c5;
  outline: 2px solid #1599c5;
  outline-offset: 1px;
}
.mcs-form .form-input::placeholder { color: #9db3c4; }
.mcs-form__note {
  font-size: 13px;
  line-height: 1.9;
  color: #4a6b85;
}
.mcs-btn-submit {
  width: 100%;
  max-width: none;
  margin-top: 2px;
  padding: 18px 24px;
  font-size: 16px;
  font-weight: 700;
  border-width: 1px;
}

/* ==========================================================================
   22. お知らせ一覧 / 記事詳細
   ========================================================================== */
.mcs-blog {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 56px);
  align-items: flex-start;
}
.mcs-blog__main { flex: 3 1 460px; min-width: 0; }
.mcs-blog__side {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
}

.mcs-newsrow {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.4vw, 28px);
  padding: 22px 0;
  border-top: 1px solid #d8e6ee;
  color: #16283d;
  text-decoration: none;
  transition: color .3s ease;
}
.mcs-newsrow:hover { color: #1599c5; }
.mcs-newsrow__thumb {
  display: block;
  width: 190px;
  flex: 0 0 190px;
  aspect-ratio: 4 / 3;
  background: #d6ebf4;
  overflow: hidden;
}
/* スマホでは画像を全幅にし、テキストをその下に回す */
@media (max-width: 639px) {
  .mcs-newsrow__thumb {
    width: 100%;
    flex: 0 0 100%;
  }
}
.mcs-newsrow__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mcs-newsrow__body { flex: 1 1 220px; min-width: 0; }
.mcs-newsrow__date {
  display: block;
  font-family: "Barlow", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #7c93a7;
}
.mcs-newsrow__title {
  display: block;
  margin-top: 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}
.mcs-newsrow__excerpt {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.9;
  color: #3d5468;
}

.mcs-pager { margin: clamp(32px, 4vw, 44px) 0 0; }
.mcs-pager .pagination__link {
  min-width: 42px;
  height: 42px;
  border-radius: 0;
  border-color: #d8e6ee;
  font-family: "Barlow", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #24487a;
}
.mcs-pager .pagination__link:hover { border-color: #1599c5; color: #1599c5; }
.mcs-pager .pagination__link.is-current {
  border-color: #1599c5;
  background: #1599c5;
  color: #ffffff;
}
.mcs-pager .pagination__link--text {
  padding: 0 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
}

.mcs-widget { border-top: 2px solid #24487a; padding-top: 22px; }
.mcs-widget--boxed {
  border: 1px solid #d8e6ee;
  padding: 24px;
}
.mcs-widget__en {
  font-family: "Barlow", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #1599c5;
}
.mcs-widget--boxed .mcs-widget__en { font-size: 10.5px; font-weight: 600; }
.mcs-widget__title {
  margin-top: 8px;
  font-size: 16.5px;
  font-weight: 700;
}
.mcs-widget__list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mcs-widget__link {
  display: block;
  color: #16283d;
  text-decoration: none;
  transition: color .3s ease;
}
.mcs-widget__link:hover { color: #1599c5; }
.mcs-widget__date {
  display: block;
  font-family: "Barlow", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #7c93a7;
}
.mcs-widget__text {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.7;
}
/* 月別アーカイブ。アーカイブCMSはクラスを持たない <ul><li> を
   表示エリアの <span> に注入するため、直下セレクタではなく子孫セレクタで
   当てる（DOMは .mcs-archive > span > ul > li になる）。 */
.mcs-archive { margin-top: 16px; }
.mcs-archive ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mcs-archive li { border-top: 1px solid #e6f0f6; }
.mcs-archive li:last-child { border-bottom: 1px solid #e6f0f6; }
.mcs-archive a {
  display: block;
  padding: 12px 2px;
  font-size: 14.5px;
  color: #16283d;
  text-decoration: none;
  transition: color .3s ease;
}
.mcs-archive a:hover { color: #1599c5; }
.mcs-side-cta {
  display: block;
  padding: 26px;
  background: #24487a;
  color: #ffffff;
  text-decoration: none;
  transition: background .3s ease;
}
.mcs-side-cta:hover { background: #1599c5; color: #ffffff; }
.mcs-side-cta__title {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.6;
}
.mcs-side-cta__text {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.8;
  color: #dce6f2;
}

.mcs-article__date {
  font-family: "Barlow", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #7c93a7;
}
.mcs-article__title {
  margin-top: 18px;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.55;
}
.mcs-article__thumb {
  margin-top: clamp(24px, 3vw, 36px);
  aspect-ratio: 16 / 9;
  background: #d6ebf4;
  overflow: hidden;
}
.mcs-article__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mcs-article__body {
  margin-top: clamp(26px, 3vw, 36px);
  font-size: 15.5px;
  line-height: 2.15;
  color: #293f52;
}
.mcs-article__body > p + p { margin-top: 20px; }
.mcs-article__h2 {
  margin-top: 36px;
  padding-bottom: 12px;
  border-bottom: 2px solid #1599c5;
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 700;
  line-height: 1.6;
}
.mcs-article__h2 + p { margin-top: 20px; }
.mcs-article__list {
  margin-top: 20px;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: disc;
}
.mcs-article__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(36px, 4vw, 52px);
  padding-top: 24px;
  border-top: 1px solid #d8e6ee;
}
.mcs-article__back {
  font-size: 14.5px;
  font-weight: 500;
  color: #24487a;
  text-decoration: none;
  transition: color .3s ease;
}
.mcs-article__back:hover { color: #1599c5; }

/* ==========================================================================
   23. フッター
   ========================================================================== */
.mcs-footer__body {
  background: #24487a;
  padding: 0;
}
.mcs-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(44px, 5vw, 68px) clamp(20px, 5vw, 40px) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 36px 56px;
  justify-content: space-between;
}
.mcs-footer__left {
  width: auto;
  min-width: min(100%, 300px);
  max-width: 420px;
}
.mcs-footer__right {
  width: auto;
  flex: 1 1 340px;
}
.mcs-footer__logo { display: block; }
.mcs-footer__name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
}
.mcs-footer__name-en {
  display: block;
  margin-top: 2px;
  font-family: "Barlow", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  color: #9ed4e8;
}
.mcs-footer__info {
  margin-top: 22px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 2;
  color: #dce6f2;
}
.mcs-footer__sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 24px 48px;
}
.mcs-footer__sitemap-title {
  margin: 0 0 12px;
  padding-bottom: 0;
  border-bottom: none;
  font-family: "Barlow", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  color: #9ed4e8;
}
.mcs-footer__list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.mcs-footer__list .footer-sitemap__item { margin-bottom: 0; }
.mcs-footer__list .footer-sitemap__item a {
  font-size: 14px;
  color: #ffffff;
}
.mcs-footer__list .footer-sitemap__item a::before { content: none; }
.mcs-footer__list .footer-sitemap__item a:hover { color: #9ed4e8; }
.mcs-footer__bottom {
  max-width: 1200px;
  margin: clamp(36px, 4vw, 52px) auto 0;
  padding: 18px clamp(20px, 5vw, 40px) 24px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}
.mcs-footer__copyright {
  font-size: 12px;
  letter-spacing: .08em;
  color: #c3d4e6;
}
@media (max-width: 639px) {
  .mcs-footer__bottom { padding-bottom: 24px; }
  /* スマホではフッターナビを非表示（同じリンクはハンバーガーメニューにある） */
  .mcs-footer__right { display: none; }
}

/* ==========================================================================
   24. ページトップに戻るボタン（共通 .page-top の見た目差分）
   丸ボタン・配色・表示切替（.is-visible）は共通CSSの .page-top を使う。
   アイコンだけサイト側で指定する。
   ========================================================================== */
.mcs-pagetop__link::before {
  content: "\f077"; /* Font Awesome: chevron-up */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}

/* ==========================================================================
   25. 送信完了ページ（thanks.php）
   ========================================================================== */
.mcs-thanks {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: clamp(28px, 3.4vw, 44px);
  border-top: 2px solid #24487a;
}
.mcs-thanks__text {
  font-size: 15px;
  line-height: 2.05;
  color: #3d5468;
}

/* ==========================================================================
   26. フォームCMS（cms_ajax）出力の上書き
   CMSは実行時に body 内へ https://cdn.rs-sys.jp/css/cms/mail-form.css を
   読み込むため、site.css より後に適用される。同じ詳細度では勝てないため、
   この節だけ !important を使う（指示書§6「!important禁止」に対する例外。
   対象はCMSが出力する要素のみで、サイト側のクラスには使わない）。
   ========================================================================== */

/* -- 送信ボタン：サイトのボタン（.btn btn--solid 相当）に合わせて中央配置
      CMS既定 → width:300px / padding:15px 0 / #acacac / radius:4px */
.form-contents .submit-btn,
.form-pattern-1 .submit-btn {
  display: block !important;
  width: 100% !important;
  max-width: 320px !important;
  margin: clamp(16px, 2vw, 24px) auto 0 !important;
  padding: 18px 24px !important;
  background: #1599c5 !important;
  border: 1px solid #1599c5 !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  transition: background .3s ease, border-color .3s ease !important;
}
/* hover はサイトの .btn--solid と同じく濃紺へ（他のCMSボタンには影響させない） */
.form-pattern-1 .submit-btn:hover {
  background: #24487a !important;
  border-color: #24487a !important;
}
/* ボタン内の封筒アイコン（CMSのmask画像）は白のまま維持する */
.form-contents .submit-btn::before,
.form-pattern-1 .submit-btn::before {
  background-color: #ffffff !important;
}

/* -- 必須バッジ：CMS既定の赤（#ff4f4f）→ サイトのメインカラー */
.form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before {
  content: '必須' !important;
  color: #ffffff !important;
  background: #1599c5 !important;
}

/* -- 入力欄：サイトのフォーム（.mcs-form .form-input）に合わせる
      CMS既定 → border:1px solid #ddd / radius:5px */
.form-pattern-1 dd:not(.pattern-exclusion) .textarea {
  border: 1px solid #cddfea !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
}

/* ==========================================================================
   27. アニメーション抑制（OS設定に従う）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mcs-header--overlay.is-fixed { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .mcs-why__icon { opacity: 1; transform: none; transition: none; }
  .mcs-zoom,
  .mcs-menu__img img { transition: none; }
}