@charset "UTF-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * ■ テーマ（サイト固有の色・フォント・基準値）
 * :root 変数 / body / a          - main.css は共通デフォルト値（オレンジ系）でコンパイル済みのため、
 *                                  サイトの配色・フォント・基準文字サイズはここで上書きする
 *
 * ■ レイアウト
 * .mt-container                  - コンテナ（max-width 1200px + 左右padding 40px）
 * .mt-sec-a / -b / -c / -d / -e  - セクション上下padding（デザイン実数値）
 * .mt-sec-hero                   - ページヒーロー帯（padding 92/70 + ベージュ背景）
 * .mt-sec-cta                    - お問い合わせCTA帯（padding 72px）
 * .mt-sec-b--beige-tr            - ベージュ背景＋右マージン140px＋右上角丸180px
 * .mt-bg-beige                   - ベージュ背景（#FCFAF8）
 * .mt-gap-48 / .mt-gap-56        - grid gap（48px / 56px）
 * .mt-mb-26 / -60 / -64 / -66    - margin-bottom（共通utilityに無い刻み）
 * .mt-anchor / --gap             - 固定ヘッダー分のアンカー着地位置調整（scroll-margin-top）
 *
 * ■ 見出し
 * .mt-heading                    - セクション見出し（heading-big--overlap の見た目差分）
 * .mt-heading__en / __ja         - Meddon 英字（薄グレー）＋ 日本語（ピンク・字間.4em）
 * .mt-heading--hero              - ページヒーロー用（英字84px / 左寄せ / 左padding56px）
 *
 * ■ メインビジュアル
 * .mt-mv / __slideshow / __catch / __catch-ttl
 *   ※ __slideshow に z-index:0（重なり順の閉じ込め）、__catch に z-index:2 +
 *      pointer-events:none。CMSスライダー（Swiper）の z-index:1 に
 *      キャッチコピーが潜るのを防ぎ、かつスワイプ操作を妨げないため。
 *      CMS出力の .swiper / .swiper-wrapper / .swiper-slide / img にも
 *      高さ100% + object-fit:cover を当てて外枠700pxに追従させている。
 *
 * ■ 共通パーツ
 * .mt-header / __inner / __logo / __nav / __nav-item / __nav-en / __nav-ja
 * .mt-header--plain               - 下層ページ用（背景グラデーションなし）
 * .mt-sp-nav                     - SPナビ背景色のサイト色化
 * .mt-btn / --solid / --outline / --header / --cta / --submit / __icon / __arrow
 * .mt-footer / .mt-footer-body* / .mt-footer-bottom*
 * .mt-cta / __bg / __veil / __inner / __card / __lead
 *
 * ■ TOP
 * .mt-lead / __text / __deco / __deco--right / __deco--left / __btn / __sign
 * .mt-feature / __num / __ttl / __text
 * .mt-svc-card / __img / __img--r1 / __img--r2 / __head / __num / __ttl / __text / __more
 *
 * ■ 会社概要
 * .mt-strength / __item / __ttl / __text
 * .mt-table                      - 罫線のみ（th背景なし）の会社概要テーブル
 *
 * ■ 事業内容
 * .mt-svc-row / --text-left / --text-right / __num / __ttl / __line / __text / __img
 * .mt-flow-wrap / .mt-flow-label / .mt-flow / __item / __num / __ttl / __text
 *
 * ■ お問い合わせ
 * .mt-contact / __lead
 * .mt-form / __row / __row--top / __label / __label--top / __req / __submit
 * .mt-input / --area
 * .mt-side / __box / __box--beige / __box--plain / __label / __ttl / __tel / __note / __hr / __text
 *
 * ■ 送信完了ページ（thanks.php）
 * .mt-thanks / __text / __text--sub / __tel / __btn
 *
 * ■ CMSフォーム（cms_ajax）出力の見た目調整 ※この節のみ !important 使用
 * .form-pattern-1 dl dt span.required::before  - 赤バッジ「必須」→ ピンクの「＊」
 * .form-pattern-1 .submit-btn / .mt-contact button[type=submit]
 *                                - サイト共通のピル型ボタン＋中央配置
 * .form-pattern-1 .submit-area / .btn-area     - 中央配置の保険
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 *
 * ・値の粒度不足
 *   - fz-* に 11 / 15 / 19 / 21 / 26 / 30 / 34 / 74 / 84 の刻みが無い
 *   - mb-* / gap-* に 26 / 48 / 56 / 64 / 66 の刻みが無い
 *   - ls-* が 0.2em(widest) 止まりで 0.22em / 0.24em / 0.4em が出せない
 *   - lh-* が 2 止まりで 2.1 / 2.3 が出せない
 *   - fw-300（Outfit Light）が無い
 *   - .section の padding が 120px 固定で、130/110/92/72 等の実数指定ができない
 *
 * ・構造不足
 *   - .container に左右 gutter（padding 0 40px）を持つ版が無い
 *   - grid-N が「1fr + 固定px」「固定px + 1fr」の非等幅2カラムに対応していない
 *     （column2 は % 比率のみ。480px / 320px / 260px / 200px の固定列が組めない）
 *   - heading-big--overlap の英字が $font_en 固定で、装飾書体（Meddon）に差し替えられない
 *   - 行間ヘアラインのみのテーブル（th背景なし・縦罫なし・th固定px幅）が無い
 *     （table-border--light は th 下線が base_color 2px で designと不一致）
 *   - 1px gap + 親背景色で行間ヘアラインを作るリスト（.mt-strength）が無い
 *
 * ・装飾パターン不足
 *   - セクションの片側だけを角丸にし、反対側に余白を残す形（margin-right + 角丸180px）が無い
 *     （bg-solid--offset-* は疑似要素方式で角丸半径・余白量が固定）
 *   - 画像の四隅で半径を交互に変える角丸（100px 24px 100px 24px）が無い
 *   - 背景写真をぼかして白ベールを重ねたCTA帯（blur + rgba白28%）が無い
 *   - 文字画像を白グロー（多重 drop-shadow）で浮かせる指定が無い
 *
 * ・指定方向不足
 *   - 装飾画像をコンテンツ枠の外側（right:-190px 等）へ任意量はみ出させる指定が無い
 *     （deco-item--offset-* は -10px / -60px の2段階のみ）
 *
 * ・状態不足
 *   - hover-bg-* が変数色のみで、ボタンごとに異なる濃淡（#8d4b4b / #c07b7b）を出せない
 *
 * ======================================
 * claude-design-output からの意図的な差分（2点のみ）
 * ======================================
 *
 * 1. viewport を width=1280 にした（implementation-guide §14 の既定値は 1200）
 *    claude-design-output のラッパーが min-width:1280px で組まれており、
 *    1200 固定だと「特徴」セクション（margin-right:140px）の内容幅が
 *    元データより80px狭くなるため。1200に戻す場合は includes/head.php の1行のみ変更。
 *
 * 2. input / textarea に font-family:inherit + font-size:15px を指定した
 *    元データは input に font 指定が無く、UAデフォルト（Arial 13.33px）で
 *    和文が代替フォント表示になるため。
 *    ボックスの実高は padding で調整し、元データと同一（input 47px / textarea 272px）。
 *
 */

/* ==========================================================================
   Theme（サイト固有の色・フォント・基準値）
   main.css は共通デフォルト変数でコンパイルされているため、ここで上書きする
   ========================================================================== */
:root {
  --mt-txt: #23283c;
  --mt-txt-sub: #3c4256;
  --mt-pink: #a35c5c;
  --mt-pink-dark: #8d4b4b;
  --mt-pink-light: #c07b7b;
  --mt-green: #CCE46E;
  --mt-beige: #FCFAF8;
  --mt-border: #e3ded9;
  --mt-border-light: #ece7e4;
  --mt-deco: #e2ddda;
  --mt-gray: #9a918c;
  --mt-font-ja: "Zen Kaku Gothic New", sans-serif;
  --mt-font-en: "Outfit", sans-serif;
  --mt-font-deco: "Meddon", cursive;
}

body {
  /* レスポンシブ非対応。claude-design-output と同じく最小幅を1280pxで固定する */
  position: relative;
  min-width: 1280px;
  background: #ffffff;
  color: var(--mt-txt);
  font-family: var(--mt-font-ja);
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.04em;
}

a {
  color: var(--mt-txt);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
a:hover {
  color: var(--mt-pink);
  opacity: 1;
}

.font-en {
  font-family: var(--mt-font-en);
}

/* ==========================================================================
   Layout
   ========================================================================== */
.mt-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.mt-sec-a,
.mt-sec-b,
.mt-sec-c,
.mt-sec-d,
.mt-sec-e,
.mt-sec-hero,
.mt-sec-cta {
  position: relative;
  overflow: hidden;
}

.mt-sec-a { padding: 130px 0 120px; }
.mt-sec-b { padding: 110px 0; }
.mt-sec-c { padding: 120px 0 110px; }
.mt-sec-d { padding: 120px 0; }
.mt-sec-e { padding: 110px 0 120px; }
.mt-sec-cta { padding: 72px 0; }

.mt-sec-hero {
  padding: 92px 0 70px;
  background: var(--mt-beige);
}

.mt-bg-beige { background: var(--mt-beige); }

.mt-sec-b--beige-tr {
  background: var(--mt-beige);
  margin-right: 140px;
  border-top-right-radius: 180px;
}

.mt-gap-48 { gap: 48px; }
.mt-gap-56 { gap: 56px; }

/* アンカーリンクの着地位置調整
   ヘッダーが position:fixed（高さ92px）で上に載るため、その分ずらして隠れないようにする */
.mt-anchor { scroll-margin-top: 92px; }
.mt-anchor--gap { scroll-margin-top: 130px; }  /* セクション途中を指すアンカー用（余白を足す） */

.mt-mb-26 { margin-bottom: 26px; }
.mt-mb-60 { margin-bottom: 60px; }
.mt-mb-64 { margin-bottom: 64px; }
.mt-mb-66 { margin-bottom: 66px; }

/* ==========================================================================
   Heading（セクション見出し / ページヒーロー見出し）
   ========================================================================== */
.mt-heading {
  position: relative;
}

.mt-heading__en {
  display: block;
  font-family: var(--mt-font-deco);
  font-size: 7.4rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: inherit;
  color: var(--mt-deco);
  white-space: nowrap;
}

.mt-heading__ja {
  display: block;
  position: relative;
  z-index: 1;
  margin: -24px 0 0;
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.4em;
  color: var(--mt-pink);
}

.mt-heading--hero {
  display: inline-block;
  text-align: left;
  padding-left: 56px;
}
.mt-heading--hero .mt-heading__en { font-size: 8.4rem; }
.mt-heading--hero .mt-heading__ja {
  margin-top: -26px;
  font-size: 2.4rem;
}

/* ==========================================================================
   Header
   ========================================================================== */
/* スクロール追従（position:fixed）。
   スクロール量0の時点の見え方は元デザインどおり（TOPはグラデーション／下層は透過）で、
   スクロール開始後に .is-fixed（JSで付与）で白背景＋影に切り替わる。 */
.mt-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-width: 1280px;
  z-index: 50;
  padding-bottom: 26px;
  background: linear-gradient(180deg,
    rgba(253, 246, 246, 0.97) 0%,
    rgba(252, 242, 242, 0.88) 42%,
    rgba(251, 238, 238, 0.5) 74%,
    rgba(251, 238, 238, 0) 100%);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding-bottom 0.3s ease;
}

/* 下層ページ：背景グラデーションなし（ページヒーローの地色をそのまま見せる） */
.mt-header--plain {
  background: none;
}

/* スクロール後の追従状態：白背景＋やわらかい影（影は黒ではなくメインカラーの低透過） */
.mt-header.is-fixed {
  padding-bottom: 0;
  background: #ffffff;
  background-image: none;
  box-shadow: 0 2px 12px rgba(163, 92, 92, 0.08);
}

.mt-header__inner {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 40px;
  height: 92px;
  align-items: center;
}

.mt-header__logo img {
  height: 52px;
  width: auto;
  display: block;
}

.mt-header__nav {
  display: flex;
  align-items: flex-end;
  gap: 44px;
  margin: 0;
}

.mt-header__nav-item a {
  display: grid;
  gap: 4px;
  padding: 0;
  text-align: center;
}
.mt-header__nav-item a::after { display: none; }

.mt-header__nav-en {
  font-family: var(--mt-font-en);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 2;
  color: var(--mt-pink);
}

.mt-header__nav-ja {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  margin-top: 0;
  color: inherit;
}

.header__nav-item--current a { color: var(--mt-pink); }

/* SPナビ（1100px以下用。ベーシックプランでは表示されないが色は揃えておく） */
.mt-sp-nav {
  background: linear-gradient(135deg, rgba(163, 92, 92, 0.97), rgba(125, 68, 68, 0.98));
}

/* ==========================================================================
   Button
   ========================================================================== */
.mt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  padding: 14px 28px;
  border: 0;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.12em;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.mt-btn--solid {
  background: var(--mt-pink);
  color: #ffffff;
}
.mt-btn--solid:hover {
  background: var(--mt-pink-light);
  color: #ffffff;
  opacity: 1;
}

.mt-btn--outline {
  gap: 14px;
  padding: 16px 36px;
  background: transparent;
  border: 1px solid var(--mt-pink);
  color: var(--mt-pink);
}
.mt-btn--outline:hover {
  background: var(--mt-pink);
  color: #ffffff;
  opacity: 1;
}

.mt-btn--header {
  gap: 10px;
  padding: 14px 28px;
  letter-spacing: 0.1em;
}
.mt-btn--header:hover {
  background: var(--mt-pink-dark);
}

.mt-btn--cta {
  padding: 19px 64px;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
}

.mt-btn--submit {
  padding: 20px 88px;
  border: 0;
  font-size: 1.5rem;
  line-height: normal;
  letter-spacing: 0.16em;
  cursor: pointer;
}

.mt-btn__icon {
  font-size: 19px;
  font-variation-settings: "wght" 300;
  line-height: 1;
}

.mt-btn__arrow {
  font-family: var(--mt-font-en);
  font-size: 1.2rem;
}

/* ==========================================================================
   メインビジュアル
   ========================================================================== */
.mt-mv {
  position: relative;
  height: 700px;
  overflow: hidden;
  background: var(--mt-beige);
  border-bottom-left-radius: 200px;
}

/* CMSスライダー（内部でSwiperを使用）が z-index:1 を持つため、
   #slideshow 側に z-index:0 を与えて重なり順をこのブロック内に閉じ込める。
   これがないとキャッチコピーがスライダーの下に潜って見えなくなる。 */
.mt-mv__slideshow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

/* CMSスライダー差し替え後の内側構造（CMSが出力するSwiperのクラス）
   ─ 外枠(#slideshow)の高さ700pxに追従させ、写真をcoverで敷く */
.mt-mv__slideshow [id^="cms-slider-"],
.mt-mv__slideshow .swiper,
.mt-mv__slideshow .swiper-wrapper {
  width: 100%;
  height: 100%;
}
.mt-mv__slideshow .swiper-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.mt-mv__slideshow .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* キャッチコピーはスライダーより前面に。
   MV全面を覆うため pointer-events:none でスライダーのスワイプ操作を妨げない。 */
.mt-mv__catch {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 0 64px 74px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  pointer-events: none;
}

.mt-mv__catch-ttl {
  margin: 0;
  filter:
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 34px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 60px rgba(255, 255, 255, 0.7));
}
.mt-mv__catch-ttl img {
  display: block;
  width: 620px;
  max-width: none;
  height: auto;
}

/* ==========================================================================
   リード文ブロック（TOP 私たちについて / 会社概要 ご挨拶）
   ========================================================================== */
.mt-lead {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}

.mt-lead__text {
  position: relative;
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.3;
  text-align: left;
  text-wrap: pretty;
}

.mt-lead__deco {
  position: absolute;
  width: 300px;
  max-width: none;
  height: auto;
  pointer-events: none;
}
.mt-lead__deco--right {
  right: -190px;
  bottom: 44px;
  transform: rotate(-9deg);
}
.mt-lead__deco--left {
  left: -200px;
  bottom: -40px;
  transform: rotate(8deg);
}

.mt-lead__btn { margin-top: 48px; }

.mt-lead__sign {
  margin: 34px 0 0;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  text-align: right;
}

/* ==========================================================================
   TOP：特徴
   ========================================================================== */
.mt-feature {
  border-top: 1px solid var(--mt-border);
  padding-top: 28px;
}

.mt-feature__num {
  font-family: var(--mt-font-en);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--mt-pink);
}

.mt-feature__ttl {
  margin: 14px 0 16px;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

.mt-feature__text {
  margin: 0;
  line-height: 2.1;
  color: var(--mt-txt-sub);
}

/* ==========================================================================
   TOP：事業内容カード
   ========================================================================== */
.mt-svc-card {
  display: block;
  color: var(--mt-txt);
}

.mt-svc-card__img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
}
.mt-svc-card__img--r1 { border-radius: 100px 24px 100px 24px; }
.mt-svc-card__img--r2 { border-radius: 24px 100px 24px 100px; }

.mt-svc-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
}

.mt-svc-card__num {
  font-family: var(--mt-font-en);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--mt-pink);
}

.mt-svc-card__ttl {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.mt-svc-card__text {
  margin: 16px 0 0;
  color: var(--mt-txt-sub);
}

.mt-svc-card__more {
  display: inline-block;
  margin-top: 20px;
  padding-bottom: 4px;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  color: var(--mt-pink);
  border-bottom: 1px solid var(--mt-green);
}

/* ==========================================================================
   お問い合わせCTA帯
   ========================================================================== */
.mt-cta__bg {
  position: absolute;
  top: -24px;
  left: -24px;
  width: calc(100% + 48px);
  max-width: none;
  height: calc(100% + 48px);
  object-fit: cover;
  filter: blur(4px);
}

.mt-cta__veil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.28);
}

.mt-cta__inner {
  display: flex;
  justify-content: center;
}

.mt-cta__card {
  max-width: 760px;
  padding: 40px 64px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 28px;
  text-align: center;
}

.mt-cta__lead {
  margin: 0 0 30px;
  color: var(--mt-txt-sub);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.mt-footer {
  background: #ffffff;
  border-top: 1px solid var(--mt-border-light);
  padding: 64px 0 30px;
}

.mt-footer-body { padding: 0; }

.mt-footer-body__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 60px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.mt-footer-body__left,
.mt-footer-body__right { width: auto; }

.mt-footer-body__logo { margin: 0; }
.mt-footer-body__logo img {
  height: 34px;
  width: auto;
  display: block;
}

.mt-footer-body__info {
  margin: 22px 0 0;
  font-size: 1.4rem;
  line-height: 2.1;
  color: var(--mt-txt-sub);
}

.mt-footer-body__nav {
  display: grid;
  gap: 14px;
  justify-items: end;
  font-size: 1.4rem;
}

.mt-footer-body__nav-item a {
  display: block;
  font-size: 1.4rem;
  color: var(--mt-txt);
}
.mt-footer-body__nav-item a:hover {
  color: var(--mt-pink);
  opacity: 1;
}

.mt-footer-bottom {
  padding: 52px 0 0;
  text-align: left;
}

.mt-footer-bottom__copyright {
  margin: 0;
  font-family: var(--mt-font-en);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  color: var(--mt-gray);
}

/* ==========================================================================
   会社概要：強み・こだわり
   ========================================================================== */
.mt-strength {
  display: grid;
  gap: 1px;
  background: var(--mt-border);
}

.mt-strength__item {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px;
  padding: 34px 0;
  background: var(--mt-beige);
}

.mt-strength__ttl {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.mt-strength__text {
  margin: 0;
  color: var(--mt-txt-sub);
}

/* ==========================================================================
   会社概要：会社情報テーブル
   ========================================================================== */
.mt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.5rem;
}

.mt-table tr { border-top: 1px solid var(--mt-border); }
.mt-table tr:last-child { border-bottom: 1px solid var(--mt-border); }

.mt-table th {
  width: 240px;
  padding: 26px 20px 26px 0;
  border: 0;
  background: transparent;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.08em;
  vertical-align: top;
  white-space: normal;
}

.mt-table td {
  padding: 26px 0;
  border: 0;
  color: var(--mt-txt-sub);
  vertical-align: top;
}

/* ==========================================================================
   事業内容：事業ブロック
   ========================================================================== */
.mt-svc-row {
  display: grid;
  gap: 70px;
  align-items: center;
}
.mt-svc-row--text-left  { grid-template-columns: minmax(0, 1fr) 480px; }
.mt-svc-row--text-right { grid-template-columns: 480px minmax(0, 1fr); }

.mt-svc-row__num {
  font-family: var(--mt-font-en);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--mt-pink);
}

.mt-svc-row__ttl {
  margin: 14px 0 26px;
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.mt-svc-row__line {
  display: block;
  width: 48px;
  height: 1px;
  margin: 0 0 30px;
  background: var(--mt-green);
}

.mt-svc-row__text {
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.3;
  text-wrap: pretty;
}

.mt-svc-row__img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
}
.mt-svc-row__img--r1 { border-radius: 120px 28px 120px 28px; }
.mt-svc-row__img--r2 { border-radius: 28px 120px 28px 120px; }

/* ==========================================================================
   事業内容：開発の流れ
   ========================================================================== */
.mt-flow-wrap {
  margin-top: 80px;
  padding-top: 56px;
  border-top: 1px solid var(--mt-border);
}

.mt-flow-label {
  margin: 0 0 40px;
  font-family: var(--mt-font-en);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--mt-pink);
}

.mt-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: start;
}

.mt-flow__item {
  position: relative;
  padding-right: 40px;
}
.mt-flow__item:last-child { padding-right: 0; }
.mt-flow__item:not(:last-child)::after {
  content: "";
  display: block;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 1px;
  background: var(--mt-pink);
}

.mt-flow__num {
  font-family: var(--mt-font-en);
  font-size: 3.4rem;
  font-weight: 300;
  line-height: 1;
  color: var(--mt-pink);
}

.mt-flow__ttl {
  margin: 16px 0 12px;
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.mt-flow__text {
  margin: 0;
  color: var(--mt-txt-sub);
}

/* ==========================================================================
   お問い合わせ
   ========================================================================== */
.mt-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 80px;
  align-items: start;
}

.mt-contact__lead {
  margin: 0 0 48px;
  font-size: 1.6rem;
  line-height: 2.3;
  text-wrap: pretty;
}

.mt-form {
  display: grid;
  gap: 34px;
}

.mt-form__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.mt-form__row--top { align-items: start; }

.mt-form__label {
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.08em;
}
.mt-form__label--top { padding-top: 14px; }

.mt-form__req {
  color: var(--mt-pink);
  font-size: 1.6rem;
  line-height: 1;
}

.mt-form__submit {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.mt-input {
  width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--mt-border);
  border-radius: 0;
  background: #ffffff;
  font-family: inherit;
  font-size: 1.5rem;
  color: var(--mt-txt);
}
.mt-input:focus { border-color: var(--mt-pink); }
.mt-input--area {
  padding: 15px 18px;
  line-height: 2;
  resize: vertical;
}

.mt-side {
  display: grid;
  gap: 34px;
}

.mt-side__box {
  border: 1px solid var(--mt-border);
  padding: 32px 30px;
}
.mt-side__box--beige {
  border: 0;
  padding: 28px 30px;
  background: var(--mt-beige);
}
.mt-side__box--plain {
  border: 0;
  padding: 0 4px;
}

.mt-side__label {
  margin: 0 0 6px;
  font-family: var(--mt-font-en);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--mt-pink);
}

.mt-side__ttl {
  margin: 0 0 16px;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.mt-side__tel {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mt-font-en);
  font-size: 2.8rem;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--mt-txt);
}
.mt-side__tel .material-symbols-outlined {
  font-size: 26px;
  font-variation-settings: "wght" 300;
  line-height: 1;
  color: var(--mt-pink);
}

.mt-side__note,
.mt-side__text {
  margin: 0;
  font-size: 1.4rem;
  color: var(--mt-txt-sub);
}
.mt-side__note { line-height: 2; }
.mt-side__text { line-height: 2.1; }

.mt-side__hr {
  display: block;
  width: 100%;
  height: 1px;
  margin: 24px 0;
  background: var(--mt-green);
}

/* ==========================================================================
   送信完了ページ（thanks.php）
   ========================================================================== */
.mt-thanks {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.mt-thanks__text {
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.3;
}
.mt-thanks__text--sub {
  margin-top: 26px;
  color: var(--mt-txt-sub);
}

.mt-thanks__tel {
  /* 内容幅に縮めつつ中央寄せ。ブロックレベルなので下のボタンが次の行に落ちる */
  display: table;
  margin: 48px auto 0;
  padding: 32px 48px;
  border: 1px solid var(--mt-border);
  text-align: left;
}
.mt-thanks__tel .mt-side__tel { margin: 6px 0 10px; }

.mt-thanks__btn { margin-top: 48px; }

/* ==========================================================================
   CMSフォーム（cdn.rs-sys.jp / cms_ajax）の見た目調整
   --------------------------------------------------------------------------
   CMS側のCSSがページに後から読み込まれるため、!important でなければ上書き
   できない。この節に限り !important の使用を許容する（implementation-guide
   §6 の「!important は使わない」に対する例外。対象はCMS出力要素のみ）。
   ========================================================================== */

/* -- 必須マーク：CMS標準の赤バッジ「必須」→ サイト配色の「＊」に変更 -- */
.form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before {
  content: "＊" !important;
  color: var(--mt-pink) !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--mt-font-ja) !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
}
/* CMSは ::before（＝ラベルの前）に必須マークを出すため、
   row-reverse で「ラベル ＊」の順（デザイン準拠）に並べ替える */
.form-pattern-1 dl dt:not(.pattern-exclusion) span.required {
  display: inline-flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  gap: 10px !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.08em !important;
}

/* -- 送信ボタン：サイト共通のピル型ボタンに揃え、中央配置 -- */
.form-pattern-1 .submit-btn,
.mt-contact .submit-btn,
.mt-contact button[type="submit"] {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 14px auto 0 !important;
  padding: 20px 88px !important;
  background: var(--mt-pink) !important;
  border: 0 !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: var(--mt-font-ja) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: 0.16em !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
}
.form-pattern-1 .submit-btn:hover,
.mt-contact .submit-btn:hover,
.mt-contact button[type="submit"]:hover {
  background: var(--mt-pink-light) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* 送信ボタンの親要素が text-align / flex 指定を持っていても中央に来るよう保険 */
.form-pattern-1 .submit-area,
.form-pattern-1 .btn-area {
  text-align: center !important;
  justify-content: center !important;
}