@charset "UTF-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .se-logo              - バーマーク付きテキストロゴ（ヘッダー/フッター）
 * .se-header            - ヘッダー高さ・電話/CTA周りの調整
 * .se-eyebrow           - 英字ラベル（Arial 700 / letter-spacing大）
 * .se-title             - 英日セクション見出し（M PLUS 1p + 下線バー）
 * .se-text-link / .se-arrow - 丸矢印付きテキストリンク（詳しく見る系）
 * .se-hero              - 全面写真＋キャッチのメインビジュアル
 * .se-intro             - 会社紹介（写真＋淡色オフセット背景＋許可バッジ）
 * .se-specialty         - 米軍工事専門（ディープブルー全面＋番号リスト）
 * .se-service-grid      - 対応工事4カラム（1px区切りグリッド）
 * .se-works-teaser / .se-years - 工事実績導線＋年レンジ帯
 * .se-gateway           - 会社概要/事業内容への2分割ゲートウェイ
 * .se-contact-band / .se-contact-tile - 共通CTA帯（電話/フォームタイル）
 * .se-footer            - フッター本体（3カラム＋地図）
 * .se-page-hero         - 下層ページのヒーロー（淡グラデ＋斜めリング装飾）
 * .se-message           - 代表挨拶（写真＋テキスト＋署名）
 * .se-profile           - 会社情報テーブル（dl）
 * .se-skills            - 資格・スキルグリッド
 * .se-main-services     - メイン事業（写真＋テキスト交互）
 * .se-service-list      - 対応工事一覧（番号付き3カラム）
 * .se-process           - ご相談から施工までの流れ（4ステップ）
 * .se-timeline          - 工事実績タイムライン（年別）
 * .se-contact-form / .se-direct-contact / .se-thanks - お問い合わせ
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 * ・構造不足：全面写真MV＋キャッチ、淡色オフセット背景＋許可バッジ重ね、
 *   1px区切りの均等分割グリッド、年レンジ帯、2分割ゲートウェイ、
 *   斜めボーダーリングの装飾ページヒーロー
 * ・装飾パターン不足：見出し直下の短い色バー（44x4px）、ディープブルー全面帯
 * ・値の粒度不足：見出しフォント（M PLUS 1p）の切替口が共通に無い
 */

/* ==========================================================================
   0. パレット / フォント
   ========================================================================== */
:root {
  --se-blue: #0180b5;
  --se-deep: #006590;
  --se-green: #bad344;
  --se-red: #b80012;
  --se-ink: #173443;
  --se-muted: #53707e;
  --se-muted2: #617a86;
  --se-pale: #edf8fb;
  --se-line: #d8e6eb;
  --se-section: #f4f5f6;
  --se-white: #fff;
  --se-copyright: #143d4e;
  --se-font-heading: "M PLUS 1p", "Noto Sans JP", "Yu Gothic", sans-serif;
  --se-font-en: Arial, "Helvetica Neue", sans-serif;
}

/* 見出しフォント（M PLUS 1p）を主要見出しに適用 */
.heading .heading__ja,
.se-title__main,
.se-specialty__title,
.se-hero__copy h1,
.se-page-hero__title,
.se-message__title,
.se-main-services__title,
.se-contact-band__title {
  font-family: var(--se-font-heading);
}

/* Font Awesome v6 互換（共通CSSは FA5 の family 名で参照しているため上書き） */
.header__tel::before,
.btn-cta-tel::before,
.btn-cta-mail::before {
  font-family: "Font Awesome 6 Free";
}

/* ==========================================================================
   1. 共通見出し / パーツ
   ========================================================================== */
/* セクション余白（デザインの .section: padding 120px max(6vw,30px) を踏襲） */
.se-section { padding: 120px max(6vw, 30px); }
.se-section--pt0 { padding-top: 0; }

.se-eyebrow {
  margin: 0 0 10px;
  font-family: var(--se-font-en);
  font-weight: 700;
  font-size: clamp(2.8rem, 4.4vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: 0.06em;
  background: linear-gradient(90deg, var(--se-blue) 0%, #35a8c4 45%, var(--se-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.se-eyebrow--light {
  background: linear-gradient(90deg, #8fe0f5 0%, #b5ecd0 50%, var(--se-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.se-title { margin-bottom: 0; }
.se-title__main {
  margin: 0;
  font-weight: 700;
  font-size: clamp(3rem, 3.1vw, 4.7rem);
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--se-ink);
}
.se-title__main::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-top: 22px;
  background: var(--se-green);
}
.se-title--center { text-align: center; }
.se-title--center .se-title__main::after { margin-left: auto; margin-right: auto; }

/* 丸矢印付きテキストリンク */
.se-text-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-weight: 700;
  color: var(--se-ink);
}
.se-text-link:hover { opacity: 1; }
.se-arrow {
  display: inline-grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: var(--se-blue);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  transition: transform 0.25s ease, background 0.25s ease;
  flex-shrink: 0;
}
.se-text-link:hover .se-arrow { transform: translateX(6px); background: var(--se-green); }

/* 下線型ボタン（… ＋ 丸矢印） */
.se-main-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 295px;
  max-width: 100%;
  margin: 50px auto 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--se-ink);
  font-weight: 700;
  color: var(--se-ink);
}
.se-main-btn:hover { opacity: 1; }
.se-main-btn:hover .se-arrow { transform: translateX(6px); background: var(--se-green); }

/* ==========================================================================
   2. ヘッダー
   ========================================================================== */
.se-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 2px 10px rgba(23, 52, 67, 0.08);
}
.se-header .header__inner {
  height: 96px;
  max-width: 100%;
  padding-left: 4vw;
}
.se-logo { display: flex; align-items: center; gap: 13px; }
.se-logo__mark {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  width: 38px;
  height: 42px;
  flex-shrink: 0;
}
.se-logo__mark i {
  display: block;
  width: 10px;
  background: var(--se-blue);
  transform: skewY(-35deg);
}
.se-logo__mark i:nth-child(1) { height: 22px; }
.se-logo__mark i:nth-child(2) { height: 32px; }
.se-logo__mark i:nth-child(3) { height: 42px; background: var(--se-green); }
.se-logo__text { display: flex; flex-direction: column; line-height: 1.2; }
.se-logo__text b {
  font-family: var(--se-font-en);
  font-size: 1.8rem;
  letter-spacing: 0.07em;
  color: var(--se-ink);
}
.se-logo__text small {
  margin-top: 5px;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--se-muted);
}

/* PCナビ：日本語を主・英語を従に */
.se-header .header__nav-item a { padding: 8px 14px; }
.se-header .header__nav-ja {
  order: 0;
  margin-top: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--se-ink);
}
.se-header .header__nav-en {
  order: 1;
  margin-top: 3px;
  font-size: 0.85rem;
  color: #79a2b2;
  letter-spacing: 0.12em;
}
.se-header .header__nav-item a::after { background: var(--se-green); height: 3px; }
/* アクティブ項目はtransformで中央寄せしているため、ホバー時も同方式で中央を保つ
   （theme.cssのホバーは left:10% でtransformが残りズレるのを打ち消す） */
.se-header .header__nav-item--current a:hover::after {
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
}

/* 電話（ラベル＋番号 縦積み） */
.se-header .header__right { gap: 0; }
.se-header .header__tel {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 22px;
  border-left: 1px solid var(--se-line);
  line-height: 1.2;
}
.se-header .header__tel::before { display: none; }
.se-header__tel small {
  font-family: var(--se-font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  color: #79a2b2;
  letter-spacing: 0.04em;
}
.se-header__tel b {
  font-family: var(--se-font-en);
  font-size: 2rem;
  color: var(--se-blue);
}
/* CTA（お問い合わせ ＋ 矢印 縦積み） */
.se-header__cta {
  min-width: 160px;
  gap: 2px;
  flex-direction: column;
  font-size: 1.4rem;
  font-weight: 700;
}
.se-header__cta-arrow { font-family: var(--se-font-en); font-size: 2rem; line-height: 1; }

/* ==========================================================================
   3. TOP：メインビジュアル
   ========================================================================== */
.se-hero {
  position: relative;
  /* 高さは「viewport高さ」と「幅基準(52vw)」の小さい方。
     ベーシックプラン(viewport=width=1200)のスマホでも100vhで縦長化せず、
     PCと同様の横長比率を保つ。 */
  height: min(calc(100vh - 96px), 52vw);
  min-height: 560px;
  overflow: hidden;
  background: #0c5671;
}
/* メインビュー：CMSスライダー差し替え枠（#slideshow）
   本番は #slideshow の中身をCMSスライダー（内部Swiper）に差し替える。
   生成時は .swiper-slide 内に静止画1枚。Swiperの初期化JSは書かない（CMS側が行う）。
   高さは #slideshow を100%とし、外枠 .se-hero のレスポンシブ高さに追従させる。 */
#slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}
/* CMSスライダー(Swiper)のラッパー階層すべてに高さを通す */
#slideshow .swiper,
#slideshow .swiper-container,
#slideshow .swiper-wrapper,
#slideshow .swiper-slide,
#slideshow .main_slider__inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* #slideshow内の画像は階層に関わらずコンテナに収める（はみ出し防止） */
#slideshow img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  animation: se-hero-zoom 15s ease-out both;
}
/* テキスト可読性のためのグラデ暗幕。CMS差し替え後も残るよう .se-hero 側に付与 */
.se-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(1, 42, 63, 0.8) 0%, rgba(0, 69, 94, 0.35) 48%, rgba(0, 37, 53, 0.06) 100%);
}
@keyframes se-hero-zoom {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}
.se-hero__copy {
  position: absolute;
  left: 8vw;
  top: 47%;
  transform: translateY(-50%);
  color: #fff;
  z-index: 2;
  max-width: 760px;
}
.se-hero__eyebrow {
  margin: 0;
  font-family: var(--se-font-en);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.28em;
  color: #bfe6f3;
}
.se-hero__copy h1 {
  margin: 14px 0;
  font-size: clamp(4.2rem, 5vw, 7.5rem);
  line-height: 1.35;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.se-hero__copy h1 em {
  font-style: normal;
  color: #cce55c;
}
.se-hero__lead {
  display: inline-block;
  padding-left: 18px;
  border-left: 4px solid var(--se-green);
  font-size: 1.7rem;
  letter-spacing: 0.12em;
}
.se-hero__note {
  position: absolute;
  right: 4vw;
  bottom: 7%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 170px;
  height: 90px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
}
.se-hero__note b { font-family: var(--se-font-en); font-weight: 700; font-size: 3.6rem; }
.se-hero__note span { font-family: var(--se-font-en); font-weight: 700; font-size: 0.9rem; line-height: 1.5; }
.se-hero__scroll {
  position: absolute;
  left: 2vw;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-family: var(--se-font-en);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
}
.se-hero__scroll i { width: 1px; height: 70px; background: #fff; }

/* ==========================================================================
   4. TOP：会社紹介（intro）
   ========================================================================== */
.se-intro__inner {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 9vw;
  align-items: center;
}
.se-intro__image { position: relative; }
.se-intro__image img { width: 100%; height: 570px; object-fit: cover; }
.se-intro__image::before {
  content: "";
  position: absolute;
  left: -6vw;
  top: -45px;
  width: 55%;
  height: 80%;
  background: var(--se-pale);
  z-index: -1;
}
.se-permit {
  position: absolute;
  right: -45px;
  bottom: -35px;
  display: flex;
  flex-direction: column;
  padding: 22px 28px;
  background: var(--se-blue);
  color: #fff;
}
.se-permit small { font-family: var(--se-font-en); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.15em; }
.se-permit b { font-size: 2rem; }
.se-permit span { font-size: 1rem; }
.se-intro__text p { margin: 28px 0; color: var(--se-muted); }
.se-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; }
.se-badges span {
  padding: 8px 15px;
  background: #eef7d1;
  color: #556a00;
  font-weight: 700;
  font-size: 1.2rem;
}

/* ==========================================================================
   5. TOP：米軍工事専門（specialty）
   ========================================================================== */
.se-specialty {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 7vw;
  align-items: center;
  padding: 120px 0 120px max(6vw, 30px);
  background: var(--se-deep);
  color: #fff;
  overflow: hidden;
}
.se-specialty__title {
  margin: 0 0 26px;
  font-size: clamp(3.4rem, 4vw, 5.5rem);
  line-height: 1.45;
  font-weight: 700;
}
.se-specialty__copy p { color: #d3e7ed; }
.se-specialty__list { margin: 35px 0 0; padding: 0; list-style: none; font-size: 2.3rem; }
.se-specialty__list li {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-weight: 700;
}
.se-specialty__list li b {
  margin-right: 22px;
  color: var(--se-green);
  font-family: var(--se-font-en);
  font-weight: 700;
  font-size: 3rem;
}
.se-specialty__img { height: 650px; width: 100%; object-fit: cover; }

/* ==========================================================================
   6. TOP：対応工事（service grid）
   ========================================================================== */
.se-service { background: var(--se-section); }
.se-lead {
  max-width: 720px;
  margin: 22px auto 55px;
  text-align: center;
  color: var(--se-muted2);
}
.se-lead--wide { max-width: 820px; }
.se-service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1500px;
  margin: 0 auto;
}
.se-service-grid__item {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(23, 52, 67, 0.08);
}
/* 写真ヘッダー＋赤い斜めリボン */
.se-service-grid__photo {
  position: relative;
  height: 200px;
  background-size: cover;
  background-position: center;
}
.se-service-grid__photo--01 { background-image: url('https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28423/setubi_01.png'); }
.se-service-grid__photo--02 { background-image: url('https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28423/setubi_02.png'); }
.se-service-grid__photo--03 { background-image: url('https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28423/setubi_03.png'); }
.se-service-grid__photo--04 { background-image: url('https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28423/setubi_04.png'); }
.se-service-grid__ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 16px;
  color: #fff;
  background: linear-gradient(100deg, #d40016 0%, #b80012 55%, #7c000f 100%);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%);
}
.se-service-grid__title {
  font-family: var(--se-font-heading);
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.se-service-grid__num {
  font-family: var(--se-font-en);
  font-weight: 700;
  font-size: 3.3rem;
  line-height: 1;
  margin-bottom: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* 本文エリア */
.se-service-grid__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
}
.se-service-grid__en { font-family: var(--se-font-en); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.12em; color: var(--se-blue); margin: 0 0 8px; }
.se-service-grid__text { flex: 1; font-size: 1.5rem; line-height: 1.9; color: #647d89; margin: 0 0 20px; }
/* 詳しくはこちらボタン（濃グレー） */
.se-service-grid__btn {
  display: block;
  padding: 13px 10px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  background: #3f4448;
  transition: background 0.25s ease;
}
.se-service-grid__btn:hover { background: var(--se-blue); }

/* ==========================================================================
   7. TOP：工事実績導線（works teaser）
   ========================================================================== */
.se-works-teaser__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
  align-items: center;
}
.se-works-teaser__text p { max-width: 570px; margin: 28px 0; color: var(--se-muted2); }
.se-years {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 80px 50px;
  background: var(--se-pale);
}
.se-years b { color: var(--se-blue); font-family: var(--se-font-en); font-weight: 700; font-size: 4.4rem; }
.se-years i { height: 1px; background: var(--se-blue); }
.se-years small { grid-column: 1 / -1; text-align: center; letter-spacing: 0.2em; color: var(--se-muted); }

/* ==========================================================================
   8. TOP：ゲートウェイ
   ========================================================================== */
.se-gateway { display: grid; grid-template-columns: 1fr 1fr; }
.se-gateway > a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 55px 7vw;
  background: #f0f7f9;
  color: var(--se-ink);
}
.se-gateway > a:hover { opacity: 1; }
.se-gateway > a:nth-child(2) { background: #e9f4bd; }
.se-gateway__en { grid-column: 1; font-family: var(--se-font-en); font-weight: 700; font-size: 1rem; letter-spacing: 0.2em; color: var(--se-blue); }
.se-gateway__ja { grid-column: 1; font-size: 2.5rem; font-weight: 700; }
.se-gateway .se-arrow { grid-column: 2; grid-row: 1 / 3; }
.se-gateway > a:hover .se-arrow { transform: translateX(6px); background: var(--se-green); }

/* ==========================================================================
   9. 共通CTA帯（contact-cta.php）
   ========================================================================== */
.se-contact-band {
  position: relative;
  padding: 75px 8vw 150px;
  background: var(--se-blue);
  color: #fff;
  overflow: hidden;
}
/* フッター上のイラストライン（街並み） */
.se-contact-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 95px;
  background: url('https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28423/line.png') repeat-x bottom center;
  background-size: auto 100%;
  pointer-events: none;
}
.se-contact-band__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  align-items: center;
  max-width: 1300px;
  margin: 0 auto;
}
.se-contact-band__title { margin: 8px 0; font-size: 3rem; line-height: 1.5; font-weight: 700; }
.se-contact-band__desc { font-size: 1.2rem; }
.se-contact-band__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.se-contact-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 110px;
  background: #fff;
  color: var(--se-ink);
}
.se-contact-tile:hover { opacity: 0.92; }
.se-contact-tile small { font-size: 1.3rem; }
.se-contact-tile b { font-size: 2.5rem; color: var(--se-blue); font-family: var(--se-font-en); }
.se-contact-tile b i { margin-right: 10px; }
.se-contact-tile--form { gap: 5px; background: var(--se-green); color: var(--se-ink); font-weight: 700; }
.se-contact-tile--form b, .se-contact-tile__arrow { font-family: var(--se-font-en); }

/* ==========================================================================
   10. フッター
   ========================================================================== */
.se-footer { background: #fff; }
.se-footer__main {
  display: grid;
  grid-template-columns: 1fr 0.7fr 1.3fr;
  gap: 60px;
  align-items: center;
  padding: 65px 7vw;
}
.se-logo--footer { margin-bottom: 25px; }
.se-footer__address { font-size: 1.2rem; line-height: 1.8; color: var(--se-muted); }
.se-footer__tel { margin-top: 12px; }
.se-footer__tel a { font-family: var(--se-font-en); font-weight: 700; font-size: 1.6rem; color: var(--se-blue); }
.se-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 1.3rem; font-weight: 700; }
.se-footer__nav-title {
  grid-column: 1 / -1;
  margin: 0 0 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--se-line);
  font-family: var(--se-font-en);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.18em;
  color: var(--se-blue);
}
.se-footer__nav a { color: var(--se-ink); }
.se-footer__nav a:hover { color: var(--se-blue); opacity: 1; }
.se-footer__map .embed { height: 220px; }
.se-footer__copyright {
  padding: 18px;
  background: var(--se-copyright);
  color: #a7c0ca;
  text-align: center;
}
.se-footer__copyright small { font-family: var(--se-font-en); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.15em; }

/* ==========================================================================
   11. 下層ページヒーロー
   ========================================================================== */
.se-page-hero {
  position: relative;
  height: 330px;
  overflow: hidden;
  background: linear-gradient(105deg, #eaf7fa 0%, #eaf7fa 55%, #d9eff4 55%);
}
.se-page-hero::after {
  content: "";
  position: absolute;
  right: 5%;
  top: -80px;
  width: 360px;
  height: 500px;
  border: 70px solid rgba(1, 128, 181, 0.07);
  transform: skew(-18deg);
}
.se-page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 75px 35px;
}
.se-page-hero__en { margin: 0; font-family: var(--se-font-en); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.25em; color: var(--se-blue); }
.se-page-hero__title { margin: 5px 0; font-size: 4.5rem; font-weight: 700; color: var(--se-ink); }
.se-page-hero__desc { font-size: 1.3rem; color: #6e8a95; }

/* ==========================================================================
   12. 会社概要
   ========================================================================== */
.se-message__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9vw;
  align-items: center;
}
.se-message__img { width: 100%; height: 570px; object-fit: cover; }
.se-message__title { margin-bottom: 22px; }
.se-message__body p { color: var(--se-muted2); }
.se-message__body p + p { margin-top: 20px; }
.se-signature { margin-top: 35px; text-align: right; }
.se-signature b { margin-left: 15px; font-size: 2.2rem; }

.se-profile { background: var(--se-section); }
.se-profile__dl { max-width: 950px; margin: 55px auto 0; background: #fff; }
.se-profile__dl > div {
  display: grid;
  grid-template-columns: 220px 1fr;
  padding: 22px 30px;
  border-bottom: 1px solid var(--se-line);
}
.se-profile__dl dt { font-weight: 700; color: var(--se-blue); }
.se-profile__dl dd { margin: 0; }

.se-skills { max-width: 1200px; margin: 0 auto; }
.se-skills__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 45px; }
.se-skills__grid span {
  padding: 20px;
  border: 1px solid var(--se-line);
  text-align: center;
  font-weight: 700;
  font-size: 1.5rem;
}

/* ==========================================================================
   13. 事業内容
   ========================================================================== */
.se-main-services { margin-top: 75px; }
.se-main-services__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin-bottom: 70px;
}
.se-main-services__item:nth-child(even) .se-main-services__img { order: 2; }
.se-main-services__body { padding: 50px; }
.se-main-services__img { height: 440px; background-position: center; background-size: cover; }
.se-main-services__img--01 { background-image: url('https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28423/service_01.png'); }
.se-main-services__img--02 { background-image: url('https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28423/service_02.png'); }
.se-main-services__num { color: var(--se-blue); font-family: var(--se-font-en); font-weight: 700; font-size: 2rem; letter-spacing: 0.18em; }
.se-main-services__title { margin: 6px 0 14px; font-size: 3rem; font-weight: 700; }
.se-main-services__body p { color: var(--se-muted2); }

.se-service-list { background: var(--se-pale); }
.se-service-list__head { max-width: 1200px; margin: 0 auto; }
.se-service-list__grid {
  max-width: 1200px;
  margin: 50px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.se-service-list__item { background: #fff; padding: 30px; }
.se-service-list__num { color: var(--se-green); font-family: var(--se-font-en); font-weight: 700; font-size: 2.8rem; }
.se-service-list__item h3 { font-size: 2rem; margin: 4px 0 8px; }
.se-service-list__item p { font-size: 1.3rem; color: #657d87; }

.se-process__row {
  max-width: 1100px;
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.se-process__item {
  position: relative;
  padding: 35px 20px;
  border-top: 3px solid var(--se-blue);
  text-align: center;
}
.se-process__item::after {
  content: "→";
  position: absolute;
  right: -8px;
  /* 番号行(2.5rem×line-height1.8)＋アイコン上マージン(14px)＋アイコン高さの半分 = アイコンの垂直中央 */
  top: calc(35px + (2.5rem * 1.8) + 14px + (3.2rem / 2));
  transform: translateY(-50%);
  color: var(--se-blue);
  font-size: 3.2rem;
  line-height: 1;
}
.se-process__item:last-child::after { display: none; }
.se-process__num { display: block; color: var(--se-green); font-family: var(--se-font-en); font-weight: 700; font-size: 2.5rem; }
.se-process__icon { display: block; margin: 14px 0 10px; color: var(--se-blue); font-size: 3.2rem; line-height: 1; }

/* ==========================================================================
   14. 工事実績タイムライン
   ========================================================================== */
.se-timeline { max-width: 1000px; margin: 70px auto 0; }
.se-timeline__year {
  display: grid;
  grid-template-columns: 180px 1fr;
  padding: 38px 0;
  border-top: 1px solid var(--se-line);
}
.se-timeline__year h2 { margin: 0; color: var(--se-blue); font-family: var(--se-font-en); font-weight: 700; font-size: 3.8rem; }
.se-timeline__year h2 small { display: block; font-size: 1.8rem; letter-spacing: 0.18em; }
.se-timeline__item {
  display: flex;
  gap: 20px;
  padding: 10px;
  border-bottom: 1px dashed var(--se-line);
}
.se-timeline__item i {
  width: 8px;
  height: 8px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--se-green);
  flex: none;
}
.se-timeline__item p { margin: 0; }

/* ==========================================================================
   15. お問い合わせ
   ========================================================================== */
.se-direct-contact {
  max-width: 850px;
  margin: 50px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.se-direct-contact--single { grid-template-columns: 1fr; }
.se-direct-contact a {
  display: flex;
  flex-direction: column;
  padding: 25px;
  border: 1px solid var(--se-line);
  text-align: center;
  color: var(--se-ink);
}
.se-direct-contact a:hover { opacity: 1; border-color: var(--se-blue); }
.se-direct-contact small { font-size: 2.1rem; }
.se-direct-contact b { color: var(--se-blue); font-size: 2.9rem; }
.se-direct-contact b i { margin-right: 10px; }

.se-contact-form { max-width: 850px; margin: 0 auto; padding: 60px; background: var(--se-section); }
/* フォームCMS（cms_ajax）出力の幅を制限 */
.se-form-cms { max-width: 850px; margin: 0 auto; }
.se-form-cms img { max-width: 100%; height: auto; }

/* フォームCMS出力：送信ボタンをサイトのボタンデザインに揃える（中央配置） */
.se-form-cms .submit-btn,
.form-pattern-1 .submit-btn {
  display: block !important;
  width: 320px !important;
  max-width: 100% !important;
  margin: 40px auto 0 !important;
  padding: 18px 25px !important;
  background: var(--se-blue) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background 0.25s ease !important;
}
.se-form-cms .submit-btn:hover,
.form-pattern-1 .submit-btn:hover { background: var(--se-deep) !important; }

/* フォームCMS出力：必須バッジをサイトの色に揃える */
.form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before {
  color: #fff !important;
  background: var(--se-red) !important;
}
.se-contact-form__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: start;
  margin-bottom: 28px;
}
.se-contact-form__label { font-weight: 700; }
.se-contact-form__req {
  margin-left: 5px;
  padding: 3px 6px;
  background: var(--se-red);
  color: #fff;
  font-style: normal;
  font-size: 0.9rem;
}
.se-contact-form input,
.se-contact-form textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--se-line);
  background: #fff;
  font: inherit;
  outline: none;
}
.se-contact-form input:focus,
.se-contact-form textarea:focus { border-color: var(--se-blue); }
.se-submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 320px;
  max-width: 100%;
  margin: 40px auto 0;
  padding: 18px 25px;
  background: var(--se-blue);
  color: #fff;
  border: 0;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease;
}
.se-submit:hover { background: var(--se-deep); }
.se-submit b { font-family: var(--se-font-en); }
.se-form-note { display: block; margin-top: 15px; text-align: center; color: #8aa0aa; }
.se-thanks { max-width: 850px; margin: 0 auto; padding: 70px; background: var(--se-pale); text-align: center; }
.se-thanks b { font-size: 2.5rem; }
.se-thanks p { margin: 15px 0 30px; }

/* ==========================================================================
   16. レスポンシブ
   ========================================================================== */
@media (max-width: 1100px) {
  .se-header .header__inner { height: 76px; padding: 0 20px; }
  .se-hero { height: 720px; min-height: 0; }
}

@media (max-width: 896px) {
  .se-section { padding: 80px 24px; }
  .se-intro__inner,
  .se-specialty,
  .se-message__inner,
  .se-works-teaser__inner { grid-template-columns: 1fr; }
  .se-specialty { padding: 60px 24px; }
  .se-specialty__img { height: 420px; }
  .se-service-grid { grid-template-columns: 1fr 1fr; }
  .se-footer__main { grid-template-columns: 1fr 1fr; }
  .se-footer__map { grid-column: 1 / -1; }
  .se-contact-band__inner { grid-template-columns: 1fr; gap: 30px; }
  .se-main-services__item { grid-template-columns: 1fr; }
  .se-main-services__item:nth-child(even) .se-main-services__img { order: 0; }
  .se-service-list__grid { grid-template-columns: 1fr 1fr; }
  .se-skills__grid { grid-template-columns: 1fr 1fr; }
  .se-intro__image::before { display: none; }
}

@media (max-width: 640px) {
  .se-header .header__inner { padding: 0 16px; }
  .se-logo__text small { display: none; }
  .se-logo__mark { transform: scale(0.85); }
  .se-hero { height: 620px; }
  .se-hero__copy { left: 24px; right: 24px; }
  .se-hero__copy h1 { font-size: 3.6rem; }
  .se-hero__lead { font-size: 1.3rem; }
  .se-hero__note { width: 130px; height: 68px; }
  .se-intro__image img, .se-message__img { height: 340px; }
  .se-permit { right: 0; bottom: -40px; padding: 16px 20px; }
  .se-intro__text { margin-top: 40px; }
  .se-specialty__img { height: 300px; }
  .se-service-grid { grid-template-columns: 1fr; }
  .se-service-grid__item { min-height: 0; }
  .se-years { padding: 40px 20px; }
  .se-years b { font-size: 3rem; }
  .se-gateway { grid-template-columns: 1fr; }
  .se-contact-band { padding: 55px 24px 110px; }
  .se-contact-band::after { height: 70px; }
  .se-contact-band__actions { grid-template-columns: 1fr; }
  .se-footer__main { grid-template-columns: 1fr; padding: 50px 24px; }
  .se-footer__nav { grid-template-columns: 1fr 1fr; }
  .se-page-hero { height: 240px; }
  .se-page-hero__inner { padding: 55px 24px; }
  .se-page-hero__title { font-size: 3.2rem; }
  .se-profile__dl > div { grid-template-columns: 1fr; padding: 18px; gap: 4px; }
  .se-skills__grid,
  .se-service-list__grid,
  .se-process__row,
  .se-direct-contact { grid-template-columns: 1fr; }
  .se-main-services__body { padding: 30px 0; }
  .se-main-services__img { height: 300px; }
  .se-process__item::after { display: none; }
  .se-timeline__year { grid-template-columns: 1fr; gap: 8px; }
  .se-contact-form { padding: 30px 20px; }
  .se-contact-form__row { grid-template-columns: 1fr; gap: 8px; }
  .se-submit { width: 100%; }
  .se-specialty { padding: 55px 24px; }
}