@charset "UTF-8";
/*
 * ======================================
 * site.css — 株式会社SATPAT サイト固有スタイル
 * 共通 main.css のクラスで再現できない、参考デザインの装飾・レイアウトのみ追加。
 * 配色・フォント・角丸の基本トークンは site-main.scss で main.css に焼き込み済み。
 * ======================================
 *
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ------------------------------------------------------------------
 *  .st-eyebrow            - 英字ラベル（Cormorant・字間広め）。eyebrow+JAタイトルの見出し構造
 *  .st-shead / .st-stitle / .st-slead - セクション見出し（eyebrow+和文タイトル+リード）
 *  .st-header-map         - ヘッダー右のMAPリンク
 *  .st-mv                 - フルスクリーンMV（#slideshow連携・中央コピー・スクロール表示）
 *  .st-greeting           - 代表挨拶（画像40%+本文の重ねレイアウト）
 *  .st-svc                - 事業内容3カード（hoverで「詳しく見る」overlay）
 *  .st-feature            - 強み（リード+ナンバー付き縦リスト）
 *  .st-band               - 採用/帯（背景写真+暗幕+金ボタン）
 *  .st-partner            - 協力会社募集（本文+チェックリスト）
 *  .st-cta                - フッター直前CTA帯（グラデ+山シルエット）
 *  .st-footer             - フッター（ダーク3カラム）
 *  .st-btn                - 細身の矢印付きCTAボタン（primary/gold/white）
 *  .st-link-arrow         - テキストリンク+矢印
 *  .st-intro              - 下層導入リード
 *  .st-svc-block / .st-svc-list - 事業詳細ブロック（番号+2カラム+項目グリッド）
 *  .st-info-table         - 会社概要テーブル（罫線下線型）
 *  .st-ph-square / .st-mapcard - 会社概要サイド画像・地図カード
 *  .st-strength           - 採用「働く強み」カード
 *  .st-jobx / .st-cspec   - 募集要項カード・共通項目
 *  .st-recflow            - 選考フロー（円形画像3ステップ+矢印）
 *  .st-works-filter / .st-work-card / .st-pager - 施工事例 一覧
 *  .st-contact / .st-form - お問い合わせ（2カラム・フォーム）
 *  .st-entry / .st-side   - 施工事例詳細（本文+サイドバー）
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ------------------------------------------------------------------
 *  構造不足   : eyebrow+和文タイトル+リードの見出し構造 / 画像と本文が密着する代表挨拶レイアウト /
 *               hover時に全面overlayが出る事業カード / 募集要項カード(jobx) / 施工事例詳細サイドバー
 *  装飾パターン不足 : 山シルエットのCTA帯 / 矢印が滑る細身ボタン / 円形画像のフローステップ
 *  指定方向不足 : ヒーロー上で透過ヘッダーのナビ/電話を白抜きにする状態切替
 * ======================================
 */

/* ============================================================
   デザイントークン（参考デザイン :root を踏襲）
   ※ 色・フォントの基準は main.css に焼き込み済み。ここでは site 専用の補助値。
   ============================================================ */
:root {
  --st-blue: #0090d2;
  --st-blue-deep: #006fa6;
  --st-blue-mist: #eaf4fb;
  --st-gold: #e5c055;
  --st-gold-deep: #bf982f;
  --st-ink: #16242e;
  --st-ink-soft: #50616d;
  --st-ink-faint: #8a99a3;
  --st-mist: #f3f7fa;
  --st-mist2: #ecf1f5;
  --st-line: #e0e7ec;
  --st-line-soft: #edf1f4;
  --st-r: 3px;
  --st-r-lg: 5px;
  --st-shadow: 0 18px 50px -28px rgba(16, 40, 60, .45);
  --st-shadow-sm: 0 10px 30px -22px rgba(16, 40, 60, .5);
  --st-ease: cubic-bezier(.21, .6, .35, 1);
  --st-serif-jp: "Shippori Mincho", "Noto Serif JP", serif;
  --st-serif-en: "Shippori Mincho", "Noto Serif JP", serif; /* 旧Cormorant Garamond。英字も通常の明朝体に統一 */
  --st-serif-body: "Noto Serif JP", serif;
}

/* 本文フォント・行間を参考デザインに合わせる（見出しはShippori、本文はNoto Serif） */
body {
  font-family: var(--st-serif-body);
  font-size: 1.3rem;
  line-height: 1.95;
  letter-spacing: 0;
  font-feature-settings: "palt" 1;
}
@media (max-width: 640px) { body { font-size: 1.4rem; } }
/* 余白ユーティリティ補完（共通の .mt-N に無い値） */
.mt-44 { margin-top: 44px; }

.container { padding-left: 32px; padding-right: 32px; }
@media (max-width: 860px) { .container { padding-left: 22px; padding-right: 22px; } }
@media (max-width: 640px) { .container { padding-left: 15px; padding-right: 15px; } }
@media (max-width: 640px) { .page-top { display: none; } }

/* スクロールフェードイン（common.js が .in を付与） */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--st-ease), transform 1s var(--st-ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   英字ラベル / セクション見出し
   ============================================================ */
.st-eyebrow {
  font-family: var(--st-serif-en);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--st-blue);
  display: inline-flex;
  align-items: center;
}
.st-eyebrow--center { justify-content: center; display: flex; }
.st-eyebrow--gold { color: var(--st-gold); }
.st-eyebrow--light { color: #fff; }

.st-shead { margin-bottom: 56px; }
.st-shead--center { text-align: center; }
.st-stitle {
  font-family: var(--st-serif-jp);
  font-weight: 700;
  font-size: clamp(2.5rem, 2.8vw, 3.5rem);
  line-height: 1.5;
  color: var(--st-ink);
  margin-top: 1.8rem;
}
@media (max-width: 640px) { .st-stitle { font-size: 2.3rem; } }
.st-stitle .small { font-size: .8em; color: var(--st-ink-soft); }
.st-slead {
  margin-top: 2.6rem;
  color: var(--st-ink-soft);
  font-size: 1.65rem;
  line-height: 2.05;
  max-width: 46em;
}
.st-shead--center .st-slead { margin-inline: auto; }
.st-slead--wide { max-width: none; }
@media (max-width: 640px) { .st-slead { text-align: left; } }
@media (max-width: 860px) { .st-shead { margin-bottom: 40px; } }

/* ============================================================
   細身の矢印付きボタン / リンク矢印
   ============================================================ */
.st-btn {
  display: inline-flex;
  align-items: center;
  gap: .85em;
  font-family: var(--st-serif-jp);
  font-weight: 600;
  font-size: 1.55rem;
  padding: 1.7rem 3.4rem;
  border: 1px solid transparent;
  border-radius: var(--st-r);
  transition: all .4s var(--st-ease);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.st-btn svg { transition: transform .4s var(--st-ease); }
.st-btn:hover svg { transform: translateX(5px); }
.st-btn--primary { background: var(--st-blue); color: #fff; }
.st-btn--primary:hover { background: var(--st-blue-deep); box-shadow: var(--st-shadow-sm); opacity: 1; }
.st-btn--gold { background: var(--st-gold); color: var(--st-ink); }
.st-btn--gold:hover { background: var(--st-gold-deep); color: #fff; opacity: 1; }
.st-btn--white { background: #fff; color: var(--st-blue-deep); }
.st-btn--white:hover { box-shadow: var(--st-shadow-sm); opacity: 1; }
.st-btn--lg { padding: 2rem 4.6rem; font-size: 1.7rem; }

.st-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--st-serif-jp);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--st-blue);
  margin-top: 3rem;
  text-decoration: none;
}
.st-link-arrow svg { transition: transform .35s var(--st-ease); }
.st-link-arrow:hover { opacity: 1; }
.st-link-arrow:hover svg { transform: translateX(5px); }

/* ============================================================
   ヘッダー：ヒーロー上での透過状態（白抜き）
   header-sticky が is-fixed でない間（＝ヒーロー上）は白文字にする
   ============================================================ */
.header-sticky {
  z-index: 100;
  transition: background .45s var(--st-ease), box-shadow .45s var(--st-ease);
}
.header-sticky .header__inner { transition: height .3s var(--st-ease); }
.header-sticky:not(.is-fixed) {
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
}
.header-sticky.is-fixed {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(150%) blur(10px);
  box-shadow: 0 6px 26px -22px rgba(16, 40, 60, .6);
}
.header__logo img { height: 50px; }
.header__inner { max-width: none; height: 84px; }

/* ナビ：和文を主役（明朝・大きめ）＋英字を小さく下に。項目間隔30px */
.header__nav { gap: 30px; margin-right: 0; }
/* ナビを中央配置：ロゴと右グループを左右均等幅にしてナビを中央に、MAP/TELは右端寄せ */
.header__inner--spread .header__logo { flex: 1 1 0; }
.header__inner--spread .header__right { flex: 1 1 0; justify-content: flex-end; }
.header__nav-item a { padding: 6px 0; flex-direction: column; }
.header__nav-ja {
  font-family: var(--st-serif-jp); font-size: 1.7rem; font-weight: 500;
  color: var(--st-ink); margin-top: 0; line-height: 1.25; letter-spacing: 0;
}
.header__nav-en {
  font-family: var(--st-serif-en); font-size: 1.35rem; font-weight: 600;
  color: var(--st-blue); letter-spacing: 0; text-transform: uppercase;
  margin-top: 1px; opacity: .85; line-height: 1;
}
/* 透過時は白抜きのナビ・電話・MAP */
.header-sticky:not(.is-fixed) .header__nav-en { color: #fff; opacity: .85; }
.header-sticky:not(.is-fixed) .header__nav-ja { color: #fff; }
.header-sticky:not(.is-fixed) .header__tel,
.header-sticky:not(.is-fixed) .header__tel::before { color: #fff; }
.header-sticky:not(.is-fixed) .st-header-map { color: #fff; }
.header-sticky:not(.is-fixed) .st-header-map { border-color: rgba(255, 255, 255, .3); }
/* ナビ下の下線バーは非表示（ホバー・現在地とも） */
.header__nav-item a::after { display: none; }
/* fixed時：ナビ英字=ブルー / 和文=ink / 電話=ブルー（共通CSS既定のまま） */

.st-header-map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--st-serif-jp);
  font-size: 1.6rem;
  color: var(--st-ink-soft);
  text-decoration: none;
  transition: color .3s;
  padding-left: 24px;
  border-left: 1px solid var(--st-line);
}
.st-header-map:hover { color: var(--st-blue); opacity: 1; }
.header__right { gap: 18px; }
.header__tel { font-size: 2rem; gap: 7px; color: var(--st-ink); }
/* 電話アイコンをデザイン版のアウトラインSVGに統一（既定のFontAwesome ::before を無効化） */
.header__right .header__tel::before { content: none; margin: 0; }
.header__tel-ic { flex-shrink: 0; width: 19px; height: 19px; }

/* SPナビ下部：電話（ラベル付き）＋ Google マップボタン（青グラデ背景のため白抜き） */
.sp-nav__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* マップボタンは小さめに */
.sp-nav__bottom .st-btn { padding: 1.1rem 2.4rem; font-size: 1.3rem; }
.sp-nav__tel {
  font-family: var(--st-serif-jp);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  transition: opacity .3s;
}
.sp-nav__tel:hover { opacity: .7; }
.sp-nav__tel small {
  display: block;
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 4px;
}

/* ============================================================
   メインビジュアル（#slideshow連携・静止画＋CMS差し替え対応）
   ============================================================ */
.st-mv { height: 100vh; min-height: 640px; max-height: 920px; }
.st-mv .slideshow__item,
.st-mv .swiper-slide { width: 100%; height: 100%; }
.st-mv .slideshow__item img { width: 100%; height: 100%; object-fit: cover; }
.st-mv .slideshow__overlay {
  background: linear-gradient(180deg, rgba(8, 26, 40, .3) 0%, rgba(8, 26, 40, .4) 100%);
}
/* コピーを画面中央に・テキストも中央揃え */
.st-mv .slideshow__text {
  top: 0; bottom: 0; left: 0; right: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  max-width: var(--maxw, 1200px);
  width: 100%;
  margin: 0 auto;
  padding-inline: 32px;
  text-align: center;
}
.st-mv .slideshow__text-sub {
  font-family: var(--st-serif-en);
  color: var(--st-gold);
  letter-spacing: 0.14em;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1.6rem;
}
.st-mv .slideshow__text-main {
  font-family: var(--st-serif-jp);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.8vw, 6rem);
  line-height: 1.32;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
}
/* 見出しを1文字ずつ滑らかに表示 */
.st-mv .slideshow__text-main .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em);
  animation: stCharIn .9s var(--st-ease) both;
  animation-delay: calc(var(--i) * .1s + .15s);
}
@keyframes stCharIn {
  from { opacity: 0; transform: translateY(.5em); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .st-mv .slideshow__text-main .char { animation: none; opacity: 1; transform: none; }
}
.st-mv .slideshow__text-lead {
  font-family: var(--st-serif-body);
  font-weight: 600;
  font-size: clamp(1.7rem, 2vw, 2.2rem);
  line-height: 1.95;
  margin-top: 2.8rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.st-mv__scroll {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 4;
}
.st-mv__scroll span {
  font-family: var(--st-serif-en);
  font-size: 1.3rem; letter-spacing: 0.16em; color: rgba(255, 255, 255, .85);
  position: relative; padding-bottom: 30px; display: block;
}
.st-mv__scroll span::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 22px; background: rgba(255, 255, 255, .6);
  animation: stScrollLine 2.4s ease-in-out infinite; transform-origin: top;
}
@keyframes stScrollLine {
  0% { transform: scaleY(0); }
  40% { transform: scaleY(1); }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 860px) { .st-mv { height: 88vh; min-height: 560px; } }
@media (max-width: 600px) { .st-mv .slideshow__text { padding-inline: 22px; } }
/* スマホ用改行（PCは非表示＝1行のまま） */
.mv-br-sp { display: none; }
/* スマホ：キャッチを大きく＋「、」の後で改行（2行） */
@media (max-width: 640px) {
  .st-mv .slideshow__text-main { font-size: clamp(2.8rem, 8.5vw, 4rem); white-space: normal; }
  .mv-br-sp { display: inline; }
}

/* ============================================================
   代表挨拶
   ============================================================ */
.st-greeting { padding-block: 108px; }
.st-greeting__layout { display: grid; grid-template-columns: 42% 1fr; align-items: stretch; }
.st-greeting__img { position: relative; min-height: 420px; overflow: hidden; margin-block: clamp(32px, 4vw, 64px); }
/* Message横の画像：左から横スライドで表示（reveal連動） */
.st-greeting__img.reveal { transform: translateX(-70px); }
.st-greeting__img.reveal.in { transform: none; }
.st-greeting__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 画像左下に会社名を英語でうっすら */
.st-greeting__img::after {
  content: "SATPAT";
  position: absolute;
  left: clamp(16px, 2vw, 28px);
  bottom: clamp(14px, 1.8vw, 24px);
  z-index: 2;
  font-family: var(--st-serif-en);
  font-weight: 600;
  font-size: clamp(2.6rem, 4vw, 4.6rem);
  letter-spacing: .12em;
  line-height: 1;
  color: rgba(255, 255, 255, .22);
  pointer-events: none;
}
.st-greeting__content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(32px, 5vw, 72px); max-width: 800px;
  justify-self: center; /* 右列内でテキストブロックを中央配置し左右余白を均等に */
}
.st-greeting__text { margin-top: 3rem; }
.st-greeting__text p { margin-bottom: 2rem; color: var(--st-ink-soft); line-height: 2.15; }
.st-greeting__text strong { color: var(--st-ink); font-weight: 700; }
.st-rep-sign { margin-top: 1rem; padding-top: 2.6rem; border-top: 1px solid var(--st-line); text-align: right; }
.st-rep-sign .role { display: block; font-size: 1.4rem; color: var(--st-ink-soft); }
.st-rep-sign .name { display: block; font-family: var(--st-serif-jp); font-weight: 700; font-size: 2.4rem; letter-spacing: .04em; margin-top: 6px; }
@media (max-width: 980px) {
  .st-greeting__layout { grid-template-columns: 1fr; }
  .st-greeting__img { min-height: 300px; }
  .st-greeting__content { padding: 50px 22px 0; max-width: none; }
}

/* ============================================================
   事業内容 3カード
   ============================================================ */
.st-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.st-svc-card {
  background: #fff; border: 1px solid var(--st-line); border-radius: var(--st-r-lg);
  overflow: hidden; position: relative; display: flex; flex-direction: column;
  text-decoration: none; color: var(--st-ink);
  transition: transform .5s var(--st-ease), box-shadow .5s var(--st-ease), border-color .5s;
}
.st-svc-card:hover { transform: translateY(-7px); box-shadow: var(--st-shadow); border-color: transparent; opacity: 1; }
.st-svc-card__art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.st-svc-card__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--st-ease); }
.st-svc-card:hover .st-svc-card__art img { transform: scale(1.07); }
.st-svc-card__more {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: .7em;
  background: rgba(14, 58, 84, .62); color: #fff;
  font-family: var(--st-serif-jp); font-weight: 600; font-size: 1.6rem;
  opacity: 0; transition: opacity .45s var(--st-ease);
}
.st-svc-card:hover .st-svc-card__more { opacity: 1; }
.st-svc-card__more svg { transition: transform .4s var(--st-ease); }
.st-svc-card:hover .st-svc-card__more svg { transform: translateX(5px); }
.st-svc-card__body { padding: 3rem 2.8rem 3.2rem; flex: 1; display: flex; flex-direction: column; }
.st-svc-card__body h3 {
  font-family: var(--st-serif-jp); font-weight: 700; font-size: 2.2rem;
  display: flex; align-items: baseline; gap: .7em;
}
.st-svc-card__body h3 .en {
  font-family: var(--st-serif-en); font-weight: 500; font-size: 1rem;
  color: var(--st-blue); text-transform: uppercase;
}
.st-svc-card__body p { margin-top: 1.4rem; color: var(--st-ink-soft); font-size: 1.5rem; line-height: 1.95; flex: 1; }
@media (max-width: 640px) { .st-svc-card__body p { font-size: 1.4rem; } }
@media (max-width: 980px) {
  .st-svc-grid { grid-template-columns: 1fr; gap: 24px; max-width: 480px; margin-inline: auto; }
}

/* ============================================================
   強み feature
   ============================================================ */
.st-feature { position: relative; overflow: hidden; }
.st-feature__bg {
  position: absolute; left: -60px; bottom: -50px; z-index: 0;
  width: min(46vw, 620px); height: min(46vw, 620px);
  background: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28272/bg-why.png") left bottom / contain no-repeat;
  opacity: .5; /* filter: grayscale(1); */ pointer-events: none;
  -webkit-mask-image: linear-gradient(135deg, #000 30%, transparent 78%);
  mask-image: linear-gradient(135deg, #000 30%, transparent 78%);
}
/* スマホ：背景あしらいを右上へ＋サイズアップ */
@media (max-width: 640px) {
  .st-feature__bg {
    left: auto; bottom: auto; right: -30px; top: -20px;
    width: min(68vw, 360px); height: min(68vw, 360px);
    background-position: right top;
    -webkit-mask-image: linear-gradient(225deg, #000 30%, transparent 78%);
    mask-image: linear-gradient(225deg, #000 30%, transparent 78%);
  }
}
.st-feature__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start;
}
.st-feature__list { display: flex; flex-direction: column; }
.st-feature__list li {
  display: flex; gap: 24px; padding: 2.8rem 0;
  border-bottom: 1px solid var(--st-line); align-items: flex-start;
}
.st-feature__list li:first-child { border-top: 1px solid var(--st-line); }
.st-feature__num {
  font-family: var(--st-serif-jp); font-weight: 600; color: var(--st-gold-deep);
  font-size: 2.8rem; line-height: 1; flex-shrink: 0; padding-top: 0;
}
.st-feature__list h4 { font-family: var(--st-serif-jp); font-weight: 700; font-size: 1.95rem; }
.st-feature__list p { margin-top: 8px; color: var(--st-ink-soft); font-size: 1.5rem; line-height: 1.95; }
@media (max-width: 980px) {
  .st-feature__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   帯（採用 Recruit）
   ============================================================ */
.st-band { position: relative; color: #fff; overflow: hidden; }
.st-band__bg { position: absolute; inset: 0; z-index: 0; }
.st-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.st-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(8, 28, 42, .6), rgba(8, 28, 42, .25));
}
.st-band__inner { position: relative; z-index: 2; padding-block: 128px; }
.st-band__text { max-width: 38em; }
.st-band__title {
  font-family: var(--st-serif-jp); font-weight: 700;
  font-size: clamp(2.5rem, 3.6vw, 4rem); line-height: 1.45; margin: 1.8rem 0 2.6rem;
}
.st-band__lead { font-size: 1.6rem; line-height: 2.1; color: rgba(255, 255, 255, .9); margin-bottom: 3.8rem; max-width: 36em; }
@media (max-width: 860px) { .st-band__inner { padding-block: 88px; } }

/* ============================================================
   協力会社募集 partner
   ============================================================ */
.st-partner__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 64px; align-items: center; }
.st-partner__points {
  display: flex; flex-direction: column; gap: 18px; background: #fff;
  padding: 42px 40px; border-radius: var(--st-r-lg); border: 1px solid var(--st-line);
  box-shadow: var(--st-shadow-sm);
}
.st-partner__points li {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--st-serif-jp); font-weight: 600; font-size: 1.55rem;
  padding-bottom: 18px; border-bottom: 1px dashed var(--st-line);
}
.st-partner__points li:last-child { padding-bottom: 0; border-bottom: none; }
.st-partner__points svg { flex-shrink: 0; }
@media (max-width: 980px) {
  .st-partner__grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 640px) {
  .st-partner__points { padding: 24px 20px; gap: 13px; }
  .st-partner__points li { padding-bottom: 13px; gap: 12px; font-size: 1.4rem; }
}

/* ============================================================
   フッター直前CTA帯
   ============================================================ */
.st-cta { position: relative; color: #fff; overflow: hidden; }
.st-cta__bg { position: absolute; inset: 0; z-index: 0; }
.st-cta__bg svg { width: 100%; height: 100%; }
.st-cta__inner { position: relative; z-index: 2; text-align: center; padding-block: 96px; }
.st-cta__title {
  font-family: var(--st-serif-jp); font-weight: 700;
  font-size: clamp(2.6rem, 3.2vw, 4rem); line-height: 1.5; margin: 1.8rem 0;
}
.st-cta__lead { color: rgba(255, 255, 255, .9); font-size: 1.6rem; line-height: 1.9; margin-bottom: 4rem; }
.st-cta__row { display: flex; align-items: center; justify-content: center; gap: 44px; flex-wrap: wrap; }
.st-cta__tel { text-align: left; }
.st-cta__tel .lbl { font-size: 1.3rem; color: rgba(255, 255, 255, .8); display: block; }
.st-cta__tel a { font-family: var(--st-serif-jp); font-weight: 700; font-size: 3.5rem; display: block; line-height: 1.2; text-decoration: none; color: #fff; }
.st-cta__tel .hours { font-size: 1.3rem; color: rgba(255, 255, 255, .8); }
.st-cta__btn {
  display: inline-flex; align-items: center; gap: .85em;
  background: #fff; color: var(--st-blue-deep);
  font-family: var(--st-serif-jp); font-weight: 600; font-size: 1.7rem;
  padding: 2rem 4.6rem; border-radius: var(--st-r); text-decoration: none;
  transition: all .4s var(--st-ease);
}
.st-cta__btn svg { transition: transform .4s var(--st-ease); }
.st-cta__btn:hover { box-shadow: var(--st-shadow-sm); opacity: 1; }
.st-cta__btn:hover svg { transform: translateX(5px); }
@media (max-width: 860px) {
  .st-cta__tel { text-align: center; }
  .st-cta__tel a { font-size: 3rem; }
}

/* ============================================================
   フッター（ダーク3カラム）
   ============================================================ */
.st-footer { background: var(--st-ink); color: #cdd8e0; padding-top: 84px; }
.st-footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; padding-bottom: 64px; }
.st-footer__logo { display: inline-block; margin-bottom: 22px; }
.st-footer__logo img { height: 56px; width: auto; filter: brightness(0) invert(1); }
.st-footer__address { display: flex; flex-direction: column; gap: 13px; }
.st-footer__address div { display: flex; gap: 14px; font-size: 1.35rem; line-height: 1.75; }
.st-footer__address dt { flex-shrink: 0; width: 5.6em; color: var(--st-gold); font-family: var(--st-serif-jp); font-weight: 700; font-size: 1.3rem; }
.st-footer__address dd { color: #aebcc6; }
.st-footer__map { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 1.35rem; color: #aebcc6; text-decoration: none; transition: color .3s; }
.st-footer__map:hover { color: #fff; opacity: 1; }
.st-footer__col h4 { font-family: var(--st-serif-en); font-size: 1.3rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--st-gold); margin-bottom: 20px; font-weight: 600; }
.st-footer__col li { margin-bottom: 13px; }
.st-footer__col a { font-size: 1.45rem; color: #bcc9d2; text-decoration: none; transition: color .3s; }
.st-footer__col a:hover { color: #fff; opacity: 1; }
.st-footer__contact .meta { font-size: 1.35rem; color: #9fb0bc; margin-top: 4px; }
.st-footer__contact .tel { font-family: var(--st-serif-jp); font-size: 2.6rem; font-weight: 700; color: var(--st-gold); text-decoration: none; }
.st-footer__formbtn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 20px; padding: 1.3rem 2.6rem;
  background: transparent; border: 1px solid rgba(255, 255, 255, .55); color: #fff;
  border-radius: var(--st-r); font-family: var(--st-serif-jp); font-weight: 600; font-size: 1.5rem;
  text-decoration: none; transition: all .35s var(--st-ease);
}
.st-footer__formbtn:hover { background: rgba(255, 255, 255, .16); border-color: #fff; opacity: 1; }
.st-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .08); padding: 26px 0;
  text-align: center; font-size: 1.3rem; color: #7d8e9a;
}
.st-footer__bottom .copy { font-family: var(--st-serif-en); }
@media (max-width: 860px) {
  .st-footer__top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 48px; }
}
/* スマホ：フッターのサイトマップ・Contact列を非表示 */
@media (max-width: 640px) { .st-footer__col { display: none; } }
/* スマホ専用改行（PCは1行） */
.sp-br { display: none; }
@media (max-width: 640px) { .sp-br { display: inline; } }

/* ============================================================
   下層共通：ページヒーロー（写真+暗幕+白文字、下寄せ）
   共通 .page-hero の骨組みにサイズ・配置・タイポを付与
   ============================================================ */
.page-hero {
  min-height: 380px; display: flex; align-items: flex-end;
  color: #fff; padding-top: 120px; padding-bottom: 62px;
}
.page-hero__overlay {
  background: linear-gradient(180deg, rgba(16, 36, 52, .32), rgba(16, 36, 52, .6));
}
.page-hero .container { position: relative; z-index: 2; text-align: center; }
.page-hero .st-eyebrow { color: #fff; }
.page-hero h1 {
  font-family: var(--st-serif-jp); font-weight: 700;
  font-size: clamp(3.2rem, 4.4vw, 5rem); line-height: 1.4; margin-top: 1.6rem; color: #fff;
}
@media (max-width: 860px) { .page-hero { min-height: 300px; padding-bottom: 46px; } }

/* パンくず */
.breadcrumb { background: #fff; }
.breadcrumb .container { padding-block: 18px; }
.breadcrumb__list { font-size: 1.3rem; color: var(--st-ink-faint); font-family: var(--st-serif-jp); }
.breadcrumb__link { color: var(--st-ink-soft); }
.breadcrumb__link:hover { color: var(--st-blue); }

/* ============================================================
   下層：導入リード
   ============================================================ */
.st-intro { max-width: 52em; margin-inline: auto; text-align: center; }
.st-intro .big { font-family: var(--st-serif-jp); font-weight: 700; line-height: 1.7; font-size: clamp(2.2rem, 2.8vw, 3.2rem); color: var(--st-ink); }
.st-intro p { margin-top: 2.4rem; color: var(--st-ink-soft); line-height: 2.15; font-size: 1.6rem; }
.st-intro p:not(.big) { text-align: left; }
@media (max-width: 640px) { .st-intro { text-align: left; } }

/* ============================================================
   事業内容 詳細ブロック
   ============================================================ */
.st-svc-block {
  padding: 48px; background: #fff; border: 1px solid var(--st-line);
  border-radius: var(--st-r-lg); margin-bottom: 30px;
}
.st-svc-block:last-child { margin-bottom: 0; }
.st-svc-block__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 3.4rem; padding-bottom: 2.2rem; border-bottom: 1px solid var(--st-line-soft); }
@media (max-width: 640px) { .st-svc-block__head { flex-direction: column; align-items: flex-start; gap: 6px; } }
.st-svc-block__head h2 { font-family: var(--st-serif-jp); font-weight: 700; font-size: clamp(2.4rem, 3vw, 3.2rem); line-height: 1.45; }
.st-svc-block__head .en-cap { font-family: var(--st-serif-en); color: var(--st-blue); font-size: 1.6rem; text-transform: uppercase; white-space: nowrap; }
.st-svc-block__cols { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: start; }
.st-svc-block__lead { color: var(--st-ink-soft); line-height: 2.1; font-size: 1.55rem; }
.st-svc-block__media .ph { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--st-r-lg); overflow: hidden; }
.st-svc-block__media .ph img { width: 100%; height: 100%; object-fit: cover; }
.st-svc-list { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.st-svc-list li { padding: 20px 22px 21px; background: var(--st-mist); border-radius: var(--st-r-lg); border: 1px solid var(--st-line-soft); }
.st-svc-list b { display: block; font-family: var(--st-serif-jp); font-weight: 700; color: var(--st-ink); font-size: 1.5rem; line-height: 1.5; margin-bottom: 8px; padding-left: 17px; position: relative; }
.st-svc-list b::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--st-gold); transform: rotate(45deg); }
.st-svc-list .d { display: block; color: var(--st-ink-soft); font-size: 1.35rem; line-height: 1.85; }
@media (max-width: 980px) {
  .st-svc-block { padding: 32px 24px; }
  .st-svc-block__cols { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) { .st-svc-list { grid-template-columns: 1fr; } }

/* ============================================================
   会社概要
   ============================================================ */
.st-company-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 60px; align-items: start; }
.st-info-table { width: 100%; border-collapse: collapse; }
.st-info-yard { display: inline-block; margin-top: 8px; color: var(--st-ink); font-family: var(--st-serif-jp); font-weight: 700; }
.st-info-table th, .st-info-table td { text-align: left; padding: 26px 8px; border-bottom: 1px solid var(--st-line); vertical-align: top; line-height: 1.9; font-size: 1.55rem; }
.st-info-table th { width: 230px; font-family: var(--st-serif-jp); font-weight: 700; color: var(--st-ink); }
.st-info-table td { color: var(--st-ink-soft); }
.st-ph-square { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--st-r-lg); overflow: hidden; }
.st-ph-square img { width: 100%; height: 100%; object-fit: cover; }
.st-mapcard { margin-top: 20px; border: 1px solid var(--st-line); border-radius: var(--st-r-lg); overflow: hidden; display: block; }
.st-mapcard .embed { border-radius: 0; height: 170px; }
.st-mapcard .mtag { display: flex; align-items: center; gap: 8px; padding: 14px 18px; font-family: var(--st-serif-jp); font-size: 1.4rem; color: var(--st-ink); }
.st-mapcard:hover .mtag { color: var(--st-blue); }
@media (max-width: 980px) {
  .st-company-grid { grid-template-columns: 1fr; gap: 40px; }
  .st-info-table th { width: 130px; font-size: 1.45rem; }
}
@media (max-width: 640px) { .st-info-table th { width: 105px; } }

/* ============================================================
   採用：メッセージ・強み・募集要項・フロー
   ============================================================ */
.st-rec-msg { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.st-rec-msg__media .ph { width: 100%; aspect-ratio: 5 / 4; border-radius: var(--st-r-lg); overflow: hidden; }
.st-rec-msg__media .ph img { width: 100%; height: 100%; object-fit: cover; }
.st-rec-msg__body p { margin-top: 1.8rem; color: var(--st-ink-soft); line-height: 2.15; font-size: 1.55rem; }

.st-strengths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.st-strength { background: #fff; border: 1px solid var(--st-line); border-radius: var(--st-r-lg); overflow: hidden; transition: transform .5s var(--st-ease), box-shadow .5s; }
.st-strength:hover { transform: translateY(-6px); box-shadow: var(--st-shadow-sm); }
.st-strength__img { aspect-ratio: 16 / 10; overflow: hidden; }
.st-strength__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--st-ease); }
.st-strength:hover .st-strength__img img { transform: scale(1.06); }
.st-strength__body { padding: 30px 30px 34px; }
.st-strength__body .no { font-family: var(--st-serif-jp); font-weight: 600; color: var(--st-gold-deep); font-size: 2.6rem; line-height: 1; letter-spacing: 0.04em; }
.st-strength__body h3 { font-family: var(--st-serif-jp); font-weight: 700; font-size: 2rem; margin: 1.4rem 0; line-height: 1.5; }
.st-strength__body p { color: var(--st-ink-soft); font-size: 1.5rem; line-height: 1.95; }

.st-rec-tags { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
.st-rec-tags span { font-family: var(--st-serif-jp); font-weight: 700; font-size: 1.4rem; color: var(--st-blue-deep); background: var(--st-blue-mist); padding: 8px 20px; border-radius: 999px; }
.st-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.st-jobx { background: #fff; border: 1px solid var(--st-line); border-radius: var(--st-r-lg); overflow: hidden; display: flex; flex-direction: column; }
.st-jobx__head { display: flex; align-items: center; gap: 16px; padding: 24px 32px; border-bottom: 1px solid var(--st-line-soft); }
.st-jobx__badge { flex-shrink: 0; font-family: var(--st-serif-jp); font-weight: 700; font-size: 1.4rem; color: #fff; background: var(--st-blue); padding: 6px 16px; border-radius: var(--st-r); }
.st-jobx__title { font-family: var(--st-serif-jp); font-weight: 700; font-size: 1.9rem; line-height: 1.4; }
.st-jobx__title small { display: block; font-size: 1.3rem; color: var(--st-ink-soft); font-weight: 500; margin-top: 3px; }
.st-jobx__pay { padding: 24px 32px; background: var(--st-mist); border-bottom: 1px solid var(--st-line-soft); }
.st-jobx__pay .lbl { font-family: var(--st-serif-jp); font-weight: 700; font-size: 1.3rem; color: var(--st-ink); }
.st-jobx__pay .big { font-family: var(--st-serif-jp); font-weight: 700; font-size: 3rem; color: var(--st-ink); margin-top: 4px; }
@media (max-width: 640px) { .st-jobx__pay .big { font-size: 2.5rem; } }
.st-jobx__pay .big small { font-size: 1.4rem; margin-left: 5px; color: var(--st-ink-soft); font-weight: 700; }
.st-jobx__pay .ex { color: var(--st-ink); font-size: 1.5rem; margin-top: 8px; }
.st-jobx__pay .notes { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.st-jobx__pay .notes li { font-size: 1.3rem; color: var(--st-ink-soft); padding-left: 15px; position: relative; line-height: 1.7; }
.st-jobx__pay .notes li::before { content: "※"; position: absolute; left: 0; }
.st-jobx__spec { padding: 6px 32px; }
.st-jobx__spec > div { padding: 17px 0; border-bottom: 1px dashed var(--st-line); }
.st-jobx__spec > div:last-child { border-bottom: none; }
.st-jobx__spec dt { font-family: var(--st-serif-jp); font-weight: 700; font-size: 1.4rem; color: var(--st-ink); margin-bottom: 7px; display: flex; align-items: center; gap: 9px; }
.st-jobx__spec .must { font-size: 1.3rem; color: #fff; background: var(--st-gold-deep); padding: 2px 8px; border-radius: var(--st-r); font-weight: 700; }
.st-jobx__spec dd { color: var(--st-ink-soft); font-size: 1.45rem; line-height: 1.8; }
.st-muted { color: var(--st-ink-faint); font-size: 1.35rem; }
.st-jobx__welcome { padding: 22px 32px 30px; margin-top: auto; }
.st-jobx__welcome .wlbl { font-family: var(--st-serif-jp); font-weight: 700; font-size: 1.4rem; color: var(--st-ink); display: block; margin-bottom: 13px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chips span { font-size: 1.3rem; color: var(--st-ink-soft); background: var(--st-mist); border: 1px solid var(--st-line); padding: 5px 12px; border-radius: var(--st-r); }
.st-chips--soft span { background: #fff; }
.st-common-spec { margin-top: 34px; border: 1px solid var(--st-line); border-radius: var(--st-r-lg); overflow: hidden; }
.st-common-spec__title { font-family: var(--st-serif-jp); font-weight: 700; font-size: 1.8rem; padding: 22px 32px; background: var(--st-ink); color: #fff; }
.st-common-spec__title small { font-size: 1.3rem; color: #aebcc6; font-weight: 500; margin-left: 12px; }
.st-cspec > div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 32px; border-bottom: 1px solid var(--st-line-soft); }
.st-cspec > div:last-child { border-bottom: none; }
.st-cspec dt { font-family: var(--st-serif-jp); font-weight: 700; color: var(--st-ink); font-size: 1.5rem; }
.st-cspec dd { color: var(--st-ink-soft); line-height: 1.9; font-size: 1.5rem; }
.st-maplink { color: var(--st-blue); text-decoration: underline; font-size: 1.4rem; }

.st-recflow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; max-width: 1040px; margin: 0 auto; }
.st-recflow__card { background: #fff; border: 1px solid var(--st-line); border-radius: var(--st-r-lg); padding: 46px 30px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.st-recflow__img { width: 150px; height: 150px; margin-bottom: 18px; border-radius: 50%; background: var(--st-blue-mist); display: flex; align-items: center; justify-content: center; padding: 14px; }
.st-recflow__img img { width: 100%; height: 100%; object-fit: contain; }
.st-recflow__card h3 { font-family: var(--st-serif-jp); font-weight: 700; font-size: 1.9rem; margin-bottom: 13px; }
.st-recflow__card p { color: var(--st-ink-soft); font-size: 1.45rem; line-height: 1.9; text-align: left; }
.st-recflow__arrow { color: var(--st-gold); font-size: 3rem; display: flex; align-items: center; justify-content: center; padding: 0 14px; }
@media (max-width: 980px) {
  .st-rec-msg, .st-jobs { grid-template-columns: 1fr; gap: 40px; }
  .st-strengths { grid-template-columns: 1fr; gap: 20px; }
  .st-cspec > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 680px) {
  .st-recflow { grid-template-columns: 1fr; max-width: 440px; }
  .st-recflow__arrow { transform: rotate(90deg); padding: 16px 0; }
}

/* FAQ（accordion--qa）の本文タイポ微調整 */
.st-faq { max-width: 820px; margin-inline: auto; }
.st-faq .accordion__head { font-family: var(--st-serif-jp); font-size: 1.5rem; }
.st-faq .accordion__body { line-height: 2.05; color: var(--st-ink-soft); font-size: 1.5rem; }

/* ============================================================
   施工事例 works
   ============================================================ */
.st-works-filter { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 52px; }
.st-works-filter button { font-family: var(--st-serif-jp); font-weight: 600; font-size: 1.45rem; padding: 11px 26px; border: 1px solid var(--st-line); background: #fff; border-radius: var(--st-r); cursor: pointer; transition: .35s var(--st-ease); color: var(--st-ink-soft); }
.st-works-filter button:hover { border-color: var(--st-blue); color: var(--st-blue); }
.st-works-filter button.is-active { background: var(--st-ink); color: #fff; border-color: var(--st-ink); }
.st-works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.st-work-card { background: #fff; border: 1px solid var(--st-line); border-radius: var(--st-r-lg); overflow: hidden; transition: transform .5s var(--st-ease), box-shadow .5s; display: flex; flex-direction: column; text-decoration: none; color: var(--st-ink); }
.st-work-card:hover { transform: translateY(-6px); box-shadow: var(--st-shadow); opacity: 1; }
.st-work-card__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.st-work-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--st-ease); }
.st-work-card:hover .st-work-card__img img { transform: scale(1.07); }
.st-work-card__cat { position: absolute; top: 14px; left: 14px; background: rgba(22, 36, 46, .82); color: #fff; font-family: var(--st-serif-jp); font-size: 1.3rem; padding: 5px 13px; border-radius: var(--st-r); }
.st-work-card__body { padding: 18px 22px 20px; flex: 1; display: flex; flex-direction: column; }
.st-work-card__date { font-family: var(--st-serif-en); color: var(--st-ink-faint); font-size: 1.3rem; }
.st-work-card__body h3 { font-family: var(--st-serif-jp); font-weight: 700; font-size: 1.75rem; line-height: 1.55; margin: 0; }
.st-work-card__body p { color: var(--st-ink-soft); font-size: 1.4rem; line-height: 1.85; flex: 1; }
.st-work-card__loc { margin-top: 14px; font-size: 1.3rem; color: var(--st-ink-faint); display: flex; align-items: center; gap: 6px; }
/* 施工事例カード：説明文と所在地は非表示（日付＋タイトルのみ） */
.st-work-card__body p, .st-work-card__loc { display: none; }
.st-pager { display: flex; justify-content: center; gap: 10px; margin-top: 56px; }
.st-pager a { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--st-line); font-family: var(--st-serif-en); font-size: 1.5rem; color: var(--st-ink); border-radius: var(--st-r); transition: .3s; text-decoration: none; }
.st-pager a:hover, .st-pager a.is-active { background: var(--st-blue); color: #fff; border-color: var(--st-blue); opacity: 1; }
@media (max-width: 980px) { .st-works-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .st-works-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* ============================================================
   お問い合わせ contact
   ============================================================ */
.st-contact { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: start; max-width: 1080px; margin: 0 auto; }
.st-contact__info { position: sticky; top: 108px; }
.st-contact__info .lead { font-family: var(--st-serif-jp); font-weight: 700; font-size: 2.2rem; line-height: 1.6; }
.st-contact-tel { margin-top: 3rem; padding: 30px 34px; background: var(--st-ink); color: #fff; border-radius: var(--st-r-lg); text-align: center; }
.st-contact-tel .lbl { font-size: 1.3rem; color: rgba(255, 255, 255, .8); }
.st-contact-tel .num { display: block; font-family: var(--st-serif-jp); font-weight: 700; font-size: 3.2rem; margin: 6px 0 4px; color: #fff; text-decoration: none; }
.st-contact-tel .hours { font-size: 1.35rem; color: rgba(255, 255, 255, .78); }
.st-form-intro { color: var(--st-ink-soft); line-height: 1.9; margin-bottom: 22px; font-size: 1.5rem; }
.st-form, #cms-contact-1-1-area { background: #fff; border: 1px solid var(--st-line); border-radius: var(--st-r-lg); padding: 46px 44px; }
/* CMSフォーム：横並び(ラベル左280px)レイアウトと size/cols 固定幅による
   はみ出しを防ぎ、常に縦積み・全幅で枠内に収める */
#cms-contact-1-1-area { overflow-x: hidden; }
#cms-contact-1-1-area * { box-sizing: border-box; max-width: 100%; }
#cms-contact-1-1-area .form-contents { padding: 0; }
#cms-contact-1-1-area .form-contents form dl dt:not(.pattern-exclusion),
#cms-contact-1-1-area .form-contents form dl dd:not(.pattern-exclusion) {
  float: none; width: 100%; padding-left: 0; margin-left: 0;
}
#cms-contact-1-1-area .textarea,
#cms-contact-1-1-area input,
#cms-contact-1-1-area textarea,
#cms-contact-1-1-area select { width: 100%; }
.st-form .field { margin-bottom: 26px; }
.st-form label { display: block; font-family: var(--st-serif-jp); font-weight: 700; font-size: 1.5rem; margin-bottom: 10px; }
.st-form label .req { color: #c0492f; font-size: 1.3rem; margin-left: 8px; font-family: var(--st-serif-en); }
.st-form label .opt { color: var(--st-ink-faint); font-size: 1.3rem; margin-left: 8px; }
.st-form input, .st-form textarea, .st-form select { width: 100%; font-family: var(--st-serif-body); font-size: 1.6rem; padding: 14px 16px; border: 1px solid var(--st-line); border-radius: var(--st-r); background: #fcfdfe; color: var(--st-ink); transition: border-color .3s, box-shadow .3s; }
.st-form input:focus, .st-form textarea:focus, .st-form select:focus { outline: none; border-color: var(--st-blue); box-shadow: 0 0 0 3px rgba(0, 144, 210, .12); }
.st-form textarea { min-height: 150px; resize: vertical; line-height: 1.8; }
.st-form .radio-row { display: flex; gap: 14px; flex-wrap: wrap; }
.st-form .radio-chip { position: relative; }
.st-form .radio-chip input { position: absolute; opacity: 0; }
.st-form .radio-chip label { margin: 0; cursor: pointer; padding: 13px 26px; border: 1px solid var(--st-line); border-radius: var(--st-r); font-weight: 600; color: var(--st-ink-soft); transition: .3s; }
.st-form .radio-chip input:checked + label { background: var(--st-blue); color: #fff; border-color: var(--st-blue); }
.st-form .privacy { font-size: 1.35rem; color: var(--st-ink-soft); text-align: center; margin-bottom: 22px; line-height: 1.8; }
.st-form .privacy a { color: var(--st-blue); text-decoration: underline; }
.st-form .submit-row { text-align: center; margin-top: 36px; }
.st-form-done { display: none; text-align: center; padding: 60px 20px; }
.st-form-done.show { display: block; }
.st-form-done .ic { width: 72px; height: 72px; margin: 0 auto 24px; border-radius: 50%; background: var(--st-blue-mist); display: flex; align-items: center; justify-content: center; }
.st-form-done h3 { font-family: var(--st-serif-jp); font-weight: 700; font-size: 2.2rem; margin-bottom: 14px; }
.st-form-done p { color: var(--st-ink-soft); line-height: 2; font-size: 1.5rem; }
@media (max-width: 980px) {
  .st-contact { grid-template-columns: 1fr; gap: 40px; }
  .st-contact__info { position: static; }
}
@media (max-width: 640px) { .st-form, #cms-contact-1-1-area { padding: 30px 24px; } }

/* ============================================================
   施工事例 詳細 entry（本文 + サイドバー）
   ============================================================ */
.st-entry-layout { max-width: 880px; margin-inline: auto; }
.st-entry .cat { display: inline-block; background: var(--st-blue); color: #fff; font-family: var(--st-serif-jp); font-size: 1.3rem; padding: 5px 14px; border-radius: var(--st-r); }
.st-entry .date { font-family: var(--st-serif-en); color: var(--st-ink-faint); margin-left: 14px; font-size: 1.4rem; }
.st-entry h1 { font-family: var(--st-serif-jp); font-weight: 700; font-size: clamp(2.4rem, 3vw, 3.2rem); line-height: 1.5; margin: 1.8rem 0 2.8rem; padding-bottom: 2rem; border-bottom: 1px solid var(--st-line); }
.st-entry__hero { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--st-r-lg); overflow: hidden; margin-bottom: 40px; }
.st-entry__hero img { width: 100%; height: 100%; object-fit: cover; }
.st-entry__body h2 { font-family: var(--st-serif-jp); font-weight: 700; font-size: 2rem; margin: 4.4rem 0 1.8rem; padding-left: 16px; border-left: 3px solid var(--st-gold); line-height: 1.5; }
.st-entry__body p { color: var(--st-ink-soft); line-height: 2.15; margin-bottom: 2rem; font-size: 1.55rem; }
.st-entry__figrow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0; }
.st-entry__figrow .ph { aspect-ratio: 4 / 3; border-radius: var(--st-r); overflow: hidden; }
.st-entry__figrow .ph img { width: 100%; height: 100%; object-fit: cover; }
.st-entry__spec { width: 100%; border-collapse: collapse; margin: 28px 0; }
.st-entry__spec th, .st-entry__spec td { text-align: left; padding: 14px 18px; border: 1px solid var(--st-line); font-size: 1.45rem; }
.st-entry__spec th { background: var(--st-mist); font-family: var(--st-serif-jp); font-weight: 700; width: 34%; color: var(--st-ink); }
.st-entry__spec td { color: var(--st-ink-soft); }
.st-entry__nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--st-line); }
.st-entry__nav a { font-family: var(--st-serif-jp); font-weight: 600; color: var(--st-ink-soft); font-size: 1.45rem; text-decoration: none; }
.st-entry__nav a:hover { color: var(--st-blue); opacity: 1; }
.st-entry__nav .back { font-family: var(--st-serif-en); color: var(--st-blue); }
/* ブログ詳細ページャ（CMS .pages 出力：中央・前次ボタン横並び） */
.st-entry__pager { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--st-line); }
.st-entry__pager .pages { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 14px; }
.st-entry__pager .pages > div { margin: 0; }
.st-entry__pager .pages a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--st-serif-jp); font-weight: 600; font-size: 1.45rem;
  color: var(--st-ink); text-decoration: none;
  padding: 1.3rem 2.6rem; border: 1px solid var(--st-line); border-radius: var(--st-r);
  background: #fff; transition: all .3s var(--st-ease);
}
.st-entry__pager .pages a:hover { background: var(--st-blue); color: #fff; border-color: var(--st-blue); opacity: 1; }
/* 一覧に戻るボタン（中央） */
.st-entry__back { text-align: center; margin-top: 40px; }
.st-side { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 34px; }
.st-side__block h4 { font-family: var(--st-serif-jp); font-weight: 700; font-size: 1.65rem; padding-bottom: 14px; border-bottom: 2px solid var(--st-ink); margin-bottom: 18px; display: flex; align-items: baseline; gap: 10px; }
.st-side__block h4 .en { font-family: var(--st-serif-en); font-size: 1.3rem; color: var(--st-blue); }
.st-side__cat li { border-bottom: 1px solid var(--st-line-soft); }
.st-side__cat a { display: flex; justify-content: space-between; padding: 12px 0; font-size: 1.45rem; color: var(--st-ink-soft); text-decoration: none; transition: color .3s; }
.st-side__cat a:hover { color: var(--st-blue); opacity: 1; }
.st-side__cat .n { font-family: var(--st-serif-en); color: var(--st-ink-faint); }
.st-side__recent a { display: flex; gap: 14px; padding: 14px 0; align-items: center; text-decoration: none; }
.st-side__recent .th { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--st-r); overflow: hidden; }
.st-side__recent .th img { width: 100%; height: 100%; object-fit: cover; }
.st-side__recent .tx { font-size: 1.35rem; line-height: 1.6; color: var(--st-ink-soft); transition: color .3s; }
.st-side__recent a:hover .tx { color: var(--st-blue); }
.st-side__archive a { display: block; padding: 10px 0; font-family: var(--st-serif-en); color: var(--st-ink-soft); border-bottom: 1px solid var(--st-line-soft); text-decoration: none; }
.st-side__archive a:hover { color: var(--st-blue); opacity: 1; }
@media (max-width: 980px) {
  .st-entry-layout { grid-template-columns: 1fr; gap: 40px; }
  .st-side { position: static; }
  .st-entry__figrow { grid-template-columns: 1fr; }
}