@charset "utf-8";
/*
 * ======================================
 * 株式会社 丸将 サイト固有CSS
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * ---- 共通クラスの調整（デザイン実測値に寄せた上書き） ----
 * .container / .container-narrow  - 左右 padding を clamp(20px,5vw,40px) に
 * .btn / .btn--solid / --outline / --white - 自動幅・枠線1px（塗り/白は枠線なし）・hover差分
 * .sp-nav / .nav-toggle           - SPナビの背景をサイト配色で不透明化
 *
 * ---- ヘッダー・フッター ----
 * .mrs-header            - stickyヘッダー（半透明白＋blur＋下ボーダー）
 * .mrs-header-contact    - ヘッダー右の「営業時間＋TEL」縦積み
 * .mrs-header-hours      - 営業時間・定休日の小テキスト（--sp はSPナビ下部用）
 * .mrs-header-sns        - ヘッダー右のSNSアイコン枠（30px角・枠線）
 * .mrs-footer            - フッター本体（3カラム・#0E2F4F／ロゴは白抜き透過版を使用）
 * .mrs-footer-sitemap    - フッターのサイトマップ2列
 * .mrs-footer-contact    - フッターの TEL / MAIL リンク
 * .mrs-related           - 関連サイト（宇堅ビーチ）カード
 * .mrs-footer-bottom     - コピーライト行（上ボーダーのみ）
 * .mrs-cta               - フッター上のCTA帯（中央揃え・電話ボタン）
 * .mrs-btn-lg / .mrs-btn-ghost / .mrs-btn-arrow / .mrs-btn__num - ボタン差分
 *
 * ---- 共通パーツ ----
 * .mrs-sec / --sub       - セクション余白の流体版（clamp）
 * .mrs-inner-1040        - 幅1040pxの内側コンテナ（施工の流れ）
 * .mrs-label / --pale / --pale-blue / --foot - 英字ラベル（Barlow・字間広め）
 * .mrs-h2 / --sm         - セクション見出し（流体サイズ）
 * .mrs-line              - 見出し下の 48×2px ライン
 * .mrs-sentence          - 本文段落（15px / line-height 2.05 / #33475B）
 * .mrs-mb-28 / .mrs-mb-32 - utility に無い刻みの下余白
 * .mrs-border-top        - #E3EAF1 の上ボーダー
 * .mrs-bg-section        - #F5F9FC のセクション背景
 * .mrs-photo-ph          - 写真プレースホルダ（PHOTO ／ …）
 * .mrs-photo-grid        - 写真プレースホルダ3枚のグリッド
 * .mrs-map               - Google Map の埋め込み高さ（420px）
 * .mrs-table / __row / __th / __td / --recruit / --gap-lg / --gap-md - dl定義テーブル
 * .mrs-tel-link          - テーブル内の電話番号リンク（Barlow）
 * .mrs-note              - 「※営業確認中」等の未確定テキスト
 *
 * ---- TOP ----
 * .mrs-mv                - メインビュー（#slideshow＋グラデ暗幕＋中央コピー）
 * .mrs-about             - 「私たちについて」左右非対称ブリードレイアウト
 * .mrs-tiles / .mrs-tile - コンテンツリンク3枚（写真＋番号＋VIEW MORE）
 * .mrs-recruit-bnr       - 採用バナー（左テキスト＋右写真）
 *
 * ---- 下層 ----
 * .mrs-page-head         - 下層ページ共通の濃紺見出し帯（左揃え）
 * .mrs-message           - 会社概要のごあいさつ本文（__sign / __name）
 * .mrs-works-lead / -list / -case / -side / -main / -tag - 施工実績のCASEカード
 * .mrs-thumb / __bar     - 施工実績のサムネイル（.is-current でバー表示）
 * .mrs-voice-card        - お客様の声カード（左写真＋右本文）
 * .mrs-flow / .mrs-flow-row - 施工の流れ（画像左右交互）
 * .mrs-tag               - 施工工程のタグ
 * .mrs-recruit-lead      - 採用情報のリード文
 * .mrs-heading-tick      - 縦棒付き見出し（募集要項①②）
 * .mrs-apply-box         - 応募先ボックス
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * ・値の粒度不足：デザインが全面 clamp() の流体指定（セクション余白・見出しサイズ・
 *   コンテナ左右余白・カード内padding）。共通CSSは固定px＋ブレイクポイント切替の
 *   ため一致しない。余白 utility にも 28px / 32px / 44px / 48px / 56px の刻みがない。
 * ・指定方向不足：page-hero--solid は中央揃え固定で、左揃えの見出し帯が作れない。
 * ・状態不足：btn--outline / --white の hover が「色反転」固定。デザインは
 *   「淡い青背景に変わるだけ（文字色は据え置き）」のため上書きが必要。
 *   btn 系に「枠線なし・自動幅」のバリエーションがない。
 * ・構造不足：ヘッダー右の「営業時間＋TEL＋SNS」3ブロック、TOPの左右非対称
 *   ブリードレイアウト（片側だけ画面端まで抜ける）、写真プレースホルダ、
 *   施工実績のBEFORE/AFTER＋サムネ切替、dlベースの2カラム定義テーブル
 *   （table-basic は table 要素前提）は共通コンポーネントに該当なし。
 * ・装飾パターン不足：カード最下部の「区切り線＋VIEW MORE」あしらい、
 *   見出し左の 4×22px 縦棒（heading-bar は 6px 固定＋padding-left が異なる）。
 *
 */
/* ==========================================================================
   共通の土台（デザイン実測値に合わせた共通クラスの調整）
   ========================================================================== */

/* デザインの内側コンテナは max-width:1200px + padding:0 clamp(20px,5vw,40px) */
.container,
.container-narrow {
  padding-left: clamp(20px, 5vw, 40px);
  padding-right: clamp(20px, 5vw, 40px);
}
@media (max-width: 1320px) {
  .container {
    max-width: 1200px;
    padding-left: clamp(20px, 5vw, 40px);
    padding-right: clamp(20px, 5vw, 40px);
  }
}
@media (max-width: 639px) {
  .container-narrow { max-width: 100%; }
}

/* デザイン：a { color:#1B5E9E } / a:hover { color:#5BAEDC }（opacity は変えない） */
a:hover { opacity: 1; }
a:not([class]):hover { color: #5BAEDC; }

/* 未確定テキスト（※営業確認中） */
.mrs-note { color: #8C9BAA; }

/* ==========================================================================
   ボタン（デザイン：角丸なし・1px枠・自動幅）
   ========================================================================== */
.btn {
  width: auto;
  max-width: none;
  padding: 14px 24px;
  border-width: 1px;
  font-size: 1.4rem;
  font-weight: 500;
  gap: 10px;
}
@media (max-width: 639px) {
  .btn { max-width: none; font-size: 1.4rem; }
}
/* デザインの塗り/白ボタンは枠線なし（枠線ありは outline / ghost のみ） */
.btn--solid { border: none; }
.btn--solid:hover { background: #12395F; color: #fff; }
.btn--outline:hover { background: #EAF2F8; color: #1B5E9E; border-color: #1B5E9E; }
.btn--white {
  color: #12395F;
  border: none;
  font-weight: 700;
  font-size: 1.5rem;
}
.btn--white:hover { background: #EAF2F8; color: #12395F; }

.mrs-btn-lg { padding: 16px 30px; font-size: 1.5rem; }
.mrs-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .65);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
}
.mrs-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.mrs-btn-ghost .btn__icon { margin-right: 0; font-size: 20px; }
.mrs-btn__num {
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.mrs-btn__arrow { font-family: "Barlow", "Noto Sans JP", sans-serif; }

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.mrs-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #E3EAF1;
  box-shadow: none;
}
/* ナビを大きくした分、ヘッダーは内容量に合わせて1300pxまで広げる */
.mrs-header .header__inner {
  max-width: 1300px;
  height: auto;
  padding: 14px clamp(16px, 4vw, 40px);
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
}
.mrs-header .header__logo { display: flex; align-items: center; }
.mrs-header .header__logo img {
  display: block;
  height: clamp(38px, 4.4vw, 52px);
  width: auto;
}
.mrs-header .header__nav {
  margin: 0;
  gap: 2px 4px;
  flex-wrap: wrap;
  align-items: stretch;
}
.mrs-header .header__nav-item a {
  padding: 8px 12px;
  text-align: center;
  align-items: stretch;
  justify-content: center;
}
.mrs-header .header__nav-item a::after { display: none; }
.mrs-header .header__nav-item a:hover { background: #F5F9FC; }
.mrs-header .header__nav-en {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .14em;
  color: #5BAEDC;
  line-height: normal;
}
.mrs-header .header__nav-ja {
  font-size: 1.5rem;
  font-weight: 500;
  color: #1A2B3C;
  margin-top: 0;
  line-height: normal;
}
.mrs-header .header__right {
  gap: 18px;
  height: auto;
  padding-left: 8px;
  border-left: 1px solid #E3EAF1;
}
.mrs-header-contact { display: flex; flex-direction: column; gap: 2px; }
.mrs-header-hours {
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: #5A6B7C;
  line-height: normal;
}
.mrs-header .header__tel {
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.1;
  color: #1B5E9E;
}
.mrs-header .header__tel::before {
  font-size: 15px;
  margin-right: 7px;
  color: #1B5E9E;
}
.mrs-header .header__tel:hover { color: #12395F; }
.mrs-header-sns { display: flex; align-items: center; gap: 6px; }
.mrs-header-sns__item {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #DCE7F0;
  opacity: .5;
  color: #1B5E9E;
  font-size: 15px;
}

/* SPナビ下部の電話番号 */
.sp-nav__bottom .mrs-tel-sp {
  display: flex;
  justify-content: center;
  font-size: 2.4rem;
  color: #fff;
}
.sp-nav__bottom .mrs-tel-sp::before { color: #fff; }
.mrs-header-hours--sp {
  display: block;
  margin-top: 8px;
  text-align: center;
  color: rgba(255, 255, 255, .75);
}

/* ==========================================================================
   セクション余白・見出しパーツ
   ========================================================================== */
.mrs-sec { padding: clamp(56px, 7vw, 100px) 0; }
.mrs-sec--sub { padding: clamp(48px, 6vw, 88px) 0; }

.mrs-label {
  display: block;
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: .24em;
  line-height: normal;
  color: #5BAEDC;
  margin-bottom: 10px;
}
.mrs-label--pale { color: #BCE0F5; letter-spacing: .26em; margin-bottom: 12px; }
.mrs-label--pale-blue { color: #8FCBEC; }
.mrs-label--foot {
  font-size: 1.05rem;
  letter-spacing: .2em;
  color: #8FCBEC;
  margin-bottom: 16px;
}

.mrs-h2 {
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  color: #1A2B3C;
}
.mrs-h2--sm {
  font-size: clamp(20px, 2.8vw, 28px);
  line-height: normal;
}
.mrs-line {
  display: block;
  width: 48px;
  height: 2px;
  background: #1B5E9E;
}

.mrs-sentence p {
  font-size: 1.5rem;
  line-height: 2.05;
  color: #33475B;
  text-wrap: pretty;
}
.mrs-sentence--lg p { line-height: 2.1; }

/* 写真プレースホルダ（提供待ちの箇所） */
.mrs-photo-ph {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
  background: #EAF2F8;
  border: 1px solid #DCE7F0;
  color: #93A9BC;
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 10.5px;
  letter-spacing: .16em;
  line-height: normal;
}

/* ==========================================================================
   TOP：メインビュー
   ========================================================================== */
.mrs-mv { position: relative; background: #12395F; }
/* 中身はCMSスライダー（#main_slider）が生成する。高さはCMSの CSS変数を上書きして制御する */
.mrs-mv #slideshow { position: relative; overflow: hidden; }
.mrs-mv #main_slider.slider_wrapper { --swiper-wrapper-height: 98vh; }
.mrs-mv #main_slider .main_slider .swiper-wrapper .swiper-slide { background-color: #1B5E9E; }
.mrs-mv__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 32, 54, .52) 0%, rgba(10, 32, 54, .28) 55%, rgba(10, 32, 54, .08) 100%);
}
.mrs-mv__body {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.mrs-mv__body .container { width: 100%; }
.mrs-mv__title {
  margin: 0;
  font-size: clamp(28px, 5.4vw, 60px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
  color: #fff;
  text-align: center;
  text-wrap: pretty;
}
@media (max-width: 896px) {
  .mrs-mv #main_slider.slider_wrapper { --swiper-wrapper-height: 80vh; }
}
@media (max-width: 639px) {
  .mrs-mv #main_slider.slider_wrapper { --swiper-wrapper-height: 70vh; }
}

/* ==========================================================================
   TOP：私たちについて
   ========================================================================== */
.mrs-about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: stretch;
  background: #fff;
}
.mrs-about__body {
  min-width: 0;
  padding: clamp(56px, 7vw, 100px) 0 clamp(56px, 7vw, 100px) max(clamp(20px, 5vw, 40px), calc((100vw - 1200px) / 2));
}
.mrs-about__body .mrs-h2 { margin: 0 0 28px; }
.mrs-about__body .mrs-line { margin-bottom: 28px; }
.mrs-about__body .btn { margin-top: 32px; }
.mrs-about__img {
  min-width: 0;
  align-self: center;
  height: clamp(260px, 30vw, 420px);
  background-color: #EAF2F8;
  background-size: cover;
  background-position: center;
}
@media (max-width: 896px) {
  .mrs-about__body { padding-right: clamp(20px, 5vw, 40px); }
}

/* ==========================================================================
   TOP：コンテンツリンク3枚
   ========================================================================== */
.mrs-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  background: #fff;
}
.mrs-tile {
  position: relative;
  display: block;
  min-height: clamp(300px, 32vw, 420px);
  background-color: #12395F;
  overflow: hidden;
}
.mrs-tile__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.mrs-tile:hover .mrs-tile__img { transform: scale(1.07); }
.mrs-tile__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 32, 54, .88) 0%, rgba(10, 32, 54, .35) 55%, rgba(10, 32, 54, .1) 100%);
}
.mrs-tile__body {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 3vw, 36px);
}
.mrs-tile__num {
  display: block;
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 4.4rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, .35);
}
.mrs-tile__title {
  display: block;
  margin-top: 16px;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
}
.mrs-tile__text {
  display: block;
  margin-top: 12px;
  font-size: 1.3rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, .8);
}
.mrs-tile__more {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .28);
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 1.1rem;
  letter-spacing: .16em;
  color: #fff;
}

/* ==========================================================================
   TOP：採用バナー
   ========================================================================== */
.mrs-recruit-bnr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: center;
  background: #12395F;
  color: #fff;
  transition: background .3s ease;
}
.mrs-recruit-bnr:hover { background: #0E2F4F; color: #fff; }
.mrs-recruit-bnr__body { display: block; padding: clamp(28px, 4vw, 48px); }
.mrs-recruit-bnr__body .mrs-label { margin-bottom: 0; }
.mrs-recruit-bnr__title {
  display: block;
  margin-top: 12px;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: .04em;
}
.mrs-recruit-bnr__text {
  display: block;
  margin-top: 14px;
  font-size: 1.4rem;
  line-height: 1.95;
  color: rgba(255, 255, 255, .85);
}
.mrs-recruit-bnr__btn {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, .6);
  font-size: 1.3rem;
}
.mrs-recruit-bnr__img {
  display: block;
  min-height: 240px;
  height: 100%;
  background-color: #fff;
  background-size: cover;
  background-position: center;
}

/* ==========================================================================
   下層ページ共通：見出し帯
   ========================================================================== */
.mrs-page-head {
  padding: clamp(40px, 6vw, 72px) 0;
  text-align: left;
}
.mrs-page-head .container { width: 100%; }
.mrs-page-head .heading__en {
  display: block;
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .26em;
  line-height: normal;
  color: #8FCBEC;
  margin-bottom: 10px;
}
.mrs-page-head .heading__ja {
  margin: 0;
  font-size: clamp(24px, 3.6vw, 38px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: normal;
  color: #fff;
}

/* ==========================================================================
   フッター上：CTA帯
   ========================================================================== */
.mrs-cta { padding: clamp(48px, 6vw, 88px) 0; color: #fff; }
.mrs-cta::before { background: #1B5E9E; }
.mrs-cta .footer-cta__inner {
  display: block;
  max-width: 1000px;
  padding: 0 clamp(20px, 5vw, 40px);
  text-align: center;
}
.mrs-cta__title {
  margin: 0 0 16px;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: normal;
  color: #fff;
}
.mrs-cta__lead {
  margin: 0 0 32px;
  font-size: 1.4rem;
  line-height: 1.95;
  color: rgba(255, 255, 255, .86);
}
.mrs-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ==========================================================================
   フッター
   ========================================================================== */
.mrs-footer .footer-body { padding: 0; }
.mrs-footer .footer-body--dark { background: #0E2F4F; }
.mrs-footer .footer-body__inner {
  max-width: 1200px;
  padding: clamp(40px, 5vw, 64px) clamp(20px, 5vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.mrs-footer .footer-body__logo { display: inline-block; margin-bottom: 0; }
/* フッターは白抜き版ロゴ（透過PNG）をそのまま使う。共通の brightness/invert は解除 */
.mrs-footer .footer-body__logo img { display: block; height: 44px; width: auto; filter: none; }
.mrs-footer .footer-body__info {
  margin: 20px 0 0;
  font-size: 1.3rem;
  line-height: 2;
  color: rgba(255, 255, 255, .8);
}
.mrs-footer-contact { color: #fff; }
.mrs-footer-contact:hover { color: #8FCBEC; }
.mrs-footer-sitemap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  font-size: 1.3rem;
}
.mrs-footer-sitemap__link { color: rgba(255, 255, 255, .82); }
.mrs-footer-sitemap__link:hover { color: #8FCBEC; }
.mrs-related {
  display: block;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
}
.mrs-related:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.mrs-related__name { display: block; font-size: 1.4rem; font-weight: 500; }
.mrs-related__url {
  display: block;
  margin-top: 6px;
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 1.1rem;
  letter-spacing: .1em;
  color: #8FCBEC;
}
.mrs-related__note {
  margin: 16px 0 0;
  font-size: 1.2rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, .55);
}
.mrs-footer-bottom {
  padding: 0;
  text-align: left;
  background: #0E2F4F;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.mrs-footer-bottom .container { padding: 18px clamp(20px, 5vw, 40px); }
.mrs-footer-bottom .footer-bottom__copyright {
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 1.1rem;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .5);
}
@media (max-width: 639px) {
  .mrs-footer-bottom { padding-bottom: 0; }
}

/* ==========================================================================
   下層共通パーツ（余白の刻み・区切り線・写真枠・地図）
   ========================================================================== */
.mrs-mb-28 { margin-bottom: 28px; }
.mrs-mb-32 { margin-bottom: 32px; }
.mrs-border-top { border-top: 1px solid #E3EAF1; }

.mrs-photo-grid {
  margin-top: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.mrs-map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* dl ベースの2カラム定義テーブル（会社概要・募集要項） */
.mrs-table {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
  border: 1px solid #DCE7F0;
}
.mrs-table__row {
  display: grid;
  grid-template-columns: minmax(120px, 150px) 1fr;
  border-bottom: 1px solid #E3EAF1;
}
.mrs-table__row:last-child { border-bottom: none; }
.mrs-table__th {
  padding: 18px 20px;
  background: #F7FAFD;
  font-size: 1.35rem;
  font-weight: 500;
  color: #1A2B3C;
  line-height: normal;
}
.mrs-table__td {
  margin: 0;
  padding: 18px 20px;
  font-size: 1.35rem;
  line-height: 1.9;
  color: #33475B;
}
.mrs-table__td.mrs-note { color: #8C9BAA; }
.mrs-tel-link {
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ==========================================================================
   会社概要：ごあいさつ
   ========================================================================== */
.mrs-message p {
  font-size: 1.5rem;
  line-height: 2.1;
  color: #33475B;
  text-wrap: pretty;
}
.mrs-message p + p { margin-top: 22px; }
.mrs-message .mrs-message__sign {
  margin-top: 32px;
  font-size: 1.4rem;
  line-height: 1.9;
  color: #1A2B3C;
}
.mrs-message__name {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .08em;
}

/* ==========================================================================
   施工実績（CASEごとに BEFORE / AFTER ＋サムネ切替）
   ========================================================================== */
.mrs-works-lead {
  margin: 0 0 40px;
  font-size: 1.4rem;
  line-height: 1.9;
  color: #5A6B7C;
}
.mrs-works-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
}
.mrs-works-case {
  background: #fff;
  border: 1px solid #DCE7F0;
}
.mrs-works-case__no {
  padding: 16px 16px 0;
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  letter-spacing: .16em;
  color: #1B5E9E;
  line-height: normal;
}
.mrs-works-case__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}
.mrs-works-side {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}
.mrs-works-main {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: #EAF2F8;
  background-size: cover;
  background-position: center;
  color: #93A9BC;
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 10.5px;
  letter-spacing: .18em;
  line-height: normal;
}
.mrs-works-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px 12px;
  color: #fff;
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 10.5px;
  letter-spacing: .16em;
  line-height: normal;
}
.mrs-works-tag--before { background: rgba(26, 43, 60, .82); }
.mrs-works-tag--after { background: #1B5E9E; }
.mrs-works-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.mrs-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: #EAF2F8;
  background-size: cover;
  background-position: center;
  border: 1px solid #DCE7F0;
  cursor: pointer;
  color: #A8B8C6;
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 9px;
  letter-spacing: .12em;
  line-height: normal;
  transition: background .3s ease;
}
.mrs-thumb:hover { background: #DDE9F2; }
.mrs-thumb__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #1B5E9E;
  opacity: 0;
}
.mrs-thumb.is-current .mrs-thumb__bar { opacity: 1; }

/* ==========================================================================
   お客様の声
   ========================================================================== */
.mrs-bg-section { background: #F5F9FC; }

.mrs-voice-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.5vw, 32px);
}
.mrs-voice-card {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: stretch;
  background: #fff;
  border: 1px solid #DCE7F0;
}
.mrs-voice-card__photo {
  position: relative;
  min-height: 220px;
  display: grid;
  place-items: center;
  background: #EAF2F8;
  color: #93A9BC;
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 10.5px;
  letter-spacing: .18em;
  line-height: normal;
}
.mrs-voice-card__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.mrs-voice-card__body {
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
}
.mrs-voice-card__area {
  display: inline-block;
  padding: 4px 10px;
  background: #EAF2F8;
  color: #1B5E9E;
  font-size: 1.1rem;
  letter-spacing: .08em;
  line-height: normal;
}
.mrs-voice-card__name {
  margin: 12px 0 14px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: normal;
}
.mrs-voice-card__text {
  margin: 0;
  font-size: 1.35rem;
  line-height: 2;
  color: #5A6B7C;
  text-wrap: pretty;
}

/* ==========================================================================
   施工の流れ（画像左右交互）
   ========================================================================== */
.mrs-inner-1040 {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
}
.mrs-flow {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}
.mrs-flow-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.mrs-flow-row__body { min-width: 0; }
.mrs-flow-row__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
}
.mrs-flow-row__num {
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 4.4rem;
  font-weight: 600;
  line-height: 1;
  color: #5BAEDC;
}
.mrs-flow-row__title {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: normal;
}
.mrs-flow-row__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 2.05;
  color: #33475B;
  text-wrap: pretty;
}
.mrs-flow-row__text--has-tags { margin-bottom: 16px; text-wrap: wrap; }
.mrs-flow-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mrs-tag {
  padding: 7px 14px;
  background: #F5F9FC;
  border: 1px solid #DCE7F0;
  font-size: 12.5px;
  line-height: normal;
}
.mrs-flow-row__photo { min-width: 0; }

/* ==========================================================================
   採用情報
   ========================================================================== */
.mrs-recruit-lead {
  margin: 0 0 44px;
  font-size: 1.5rem;
  line-height: 2.05;
  color: #33475B;
  text-wrap: pretty;
}
.mrs-heading-tick {
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: normal;
}
.mrs-heading-tick::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 4px;
  height: 22px;
  background: #1B5E9E;
}
.mrs-table--recruit .mrs-table__row { grid-template-columns: minmax(110px, 160px) 1fr; }
.mrs-table--gap-lg { margin-bottom: 56px; }
.mrs-table--gap-md { margin-bottom: 48px; }

.mrs-apply-box {
  padding: clamp(28px, 4vw, 40px);
  background: #F5F9FC;
  border: 1px solid #DCE7F0;
}
.mrs-apply-box__title {
  margin: 0 0 12px;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: normal;
}
.mrs-apply-box__text {
  margin: 0 0 20px;
  font-size: 1.35rem;
  line-height: 1.95;
  color: #5A6B7C;
}
.mrs-apply-box__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.mrs-btn__num--sm { font-size: 1em; letter-spacing: normal; }

/* ==========================================================================
   SPナビ（デザインにSP専用ナビはないため、配色だけサイトに合わせて不透明化）
   ========================================================================== */
.sp-nav { background: linear-gradient(135deg, #1B5E9E 0%, #12395F 100%); }
.nav-toggle { background: rgba(255, 255, 255, .9); }

/* ==========================================================================
   レスポンシブ調整
   （デザインは固定grid指定のため狭幅で破綻する箇所だけ、PC表示を変えずに補正）
   ========================================================================== */
@media (max-width: 896px) {
  .mrs-voice-card { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .mrs-voice-card { grid-template-columns: 1fr; }
  .mrs-voice-card__photo { min-height: 200px; }
  .mrs-table__row { grid-template-columns: minmax(100px, 120px) 1fr; }
  .mrs-table--recruit .mrs-table__row { grid-template-columns: minmax(100px, 120px) 1fr; }
  .mrs-table__th,
  .mrs-table__td { padding: 14px 14px; }
  .mrs-works-case__body { gap: 10px; padding: 10px; }
  .mrs-apply-box__btns .btn { width: 100%; justify-content: center; }
  .mrs-btn-row .btn { width: 100%; justify-content: center; }
}


/* ---- 施工実績：実写真の差し込み ---- */
.mrs-works-case__head {
  padding: 16px 16px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}
.mrs-works-case__no {
  padding: 0;
  flex-shrink: 0;
}
.mrs-works-case__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
  color: #1A2B3C;
}
.mrs-works-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mrs-works-main__ph { position: relative; z-index: 1; }
.mrs-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mrs-thumb.is-current { outline: 2px solid #1B5E9E; outline-offset: -2px; }

/* ---- 施工実績：カテゴリのアンカーリンクと見出し帯 ---- */
.mrs-works-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 clamp(28px, 3.5vw, 44px);
}
.mrs-works-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid #1B5E9E;
  color: #1B5E9E;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  transition: background .3s ease, color .3s ease;
}
.mrs-works-nav__link:hover { background: #EAF2F8; color: #1B5E9E; }
.mrs-works-nav__en {
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 1.1rem;
  letter-spacing: .16em;
  color: #5BAEDC;
}
.mrs-works-nav__count {
  font-size: 1.2rem;
  color: #5A6B7C;
}
.mrs-works-nav__link i { font-size: .8em; }

.mrs-works-cat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: clamp(20px, 2.5vw, 32px) 0 0;
  padding: 16px clamp(18px, 2.2vw, 26px);
  background: #12395F;
  scroll-margin-top: 96px;
}
.mrs-works-list > .mrs-works-cat:first-child { margin-top: 0; }
.mrs-works-cat .mrs-label { margin-bottom: 0; }
.mrs-works-cat__title {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  color: #fff;
}
.mrs-works-cat__count {
  margin-left: auto;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, .75);
}
@media (max-width: 639px) {
  .mrs-works-nav__link { width: 100%; justify-content: center; }
  .mrs-works-cat__count { margin-left: 0; }
}

/* ---- 施工実績：ケース見出し（縦棒付き・大きめ）／BEFORE・AFTERラベル ---- */
.mrs-works-case__head {
  padding: 18px clamp(16px, 2vw, 20px) 0;
  display: block;
}
.mrs-works-case__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
  color: #1A2B3C;
}
.mrs-works-case__title::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  align-self: stretch;
  width: 4px;
  min-height: 22px;
  background: #1B5E9E;
}
.mrs-works-tag {
  padding: 7px 16px;
  font-size: 19.5px;
  font-weight: 600;
}

/* ---- ヘッダー：SNSアイコンにブランドカラーの背景 ---- */
.mrs-header-sns__item {
  border: none;
  opacity: 1;
  color: #fff;
  font-size: 16px;
}
.mrs-header-sns__item--instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* ==========================================================================
   レスポンシブ調整（表示確認して詰めた分）
   ========================================================================== */

/* タブレット〜小型PC（640〜1100px）：ナビは畳んだまま、電話とSNSは出す
   （共通CSSは1100px以下で header__right ごと隠すため、ここで戻す）
   ハンバーガーは position:fixed なので右に余白を確保して重なりを防ぐ */
@media (min-width: 640px) and (max-width: 1100px) {
  .mrs-header .header__right { display: flex; }
  .mrs-header .header__inner { padding-right: 64px; }
}

/* SP：施工実績を少しでも大きく見せる */
@media (max-width: 639px) {
  .mrs-works-case__body { gap: 8px; padding: 8px; }
  .mrs-works-case__head { padding: 14px 10px 0; }
  .mrs-works-case__title { gap: 9px; font-size: 15px; line-height: 1.55; }
  .mrs-works-thumbs { gap: 5px; }
  .mrs-works-side { gap: 5px; }
  /* BEFORE / AFTER は写真幅を占領しない大きさに落とす */
  .mrs-works-tag { padding: 4px 9px; font-size: 12px; letter-spacing: .1em; }
  .mrs-works-cat { padding: 13px 14px; }
  .mrs-works-lead { margin-bottom: 28px; }
}

/* 極小幅：ロゴと余白をさらに詰める */
@media (max-width: 374px) {
  .mrs-header .header__inner { padding: 12px 14px; }
  .mrs-works-case__title { font-size: 14px; }
}

/* ---- フッターロゴ：ヘッダーと同じロゴ（背景透過）を白抜きで使う ---- */
.mrs-footer .footer-body__logo img {
  filter: brightness(0) invert(1);
  height: 40px;
}

/* ---- SPナビ：英字を大きく、日本語と矢印の間に余白 ---- */
.sp-nav__en {
  font-size: 1.2rem;
  letter-spacing: .12em;
  opacity: .7;
}
.sp-nav__link::after { margin-left: 16px; }

/* ---- 施工実績：メイン写真の Lightbox（クリックで拡大） ---- */
a.mrs-works-main { display: grid; cursor: zoom-in; }
.mrs-works-zoom {
  position: absolute;
  right: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: rgba(18, 57, 95, .82);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transition: opacity .3s ease;
}
a.mrs-works-main:hover .mrs-works-zoom { opacity: 1; }
a.mrs-works-main img { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
a.mrs-works-main:hover img { transform: scale(1.04); }
.mrs-works-main { overflow: hidden; }
@media (hover: none) {
  .mrs-works-zoom { opacity: 1; }
}

/* ==========================================================================
   施工の流れ：ステップ縦並びレイアウト（.mrs-flow2）
   左＝STEPバッジと縦の導線 ／ 右＝カード（中に写真＋本文を左右で並べる）
   ========================================================================== */
.mrs-flow-lead {
  margin: 0 0 clamp(32px, 4vw, 52px);
  font-size: 1.5rem;
  line-height: 2.05;
  color: #33475B;
  text-wrap: pretty;
}
.mrs-flow2 {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mrs-flow2__item {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
  align-items: start;
  padding-bottom: clamp(28px, 3.4vw, 44px);
}
/* ステップ同士をつなぐ縦線（最後の項目は引かない） */
.mrs-flow2__item::before {
  content: "";
  position: absolute;
  left: 45px;
  top: 92px;
  bottom: 0;
  width: 2px;
  background: #DCE7F0;
}
.mrs-flow2__item:last-child { padding-bottom: 0; }
.mrs-flow2__item:last-child::before { display: none; }

.mrs-flow2__mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 92px;
  height: 92px;
  background: #12395F;
  color: #fff;
}
.mrs-flow2__step {
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .22em;
  line-height: 1;
  color: #8FCBEC;
}
.mrs-flow2__num {
  margin-top: 6px;
  font-family: "Barlow", "Noto Sans JP", sans-serif;
  font-size: 3.4rem;
  font-weight: 600;
  line-height: 1;
}

/* カード：中で「写真（控えめ）＋本文」を左右に並べる */
.mrs-flow2__card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 208px) minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
  align-items: start;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 30px);
  background: #F5F9FC;
  border-left: 4px solid #1B5E9E;
}
.mrs-flow2__photo {
  min-width: 0;
  aspect-ratio: 4 / 3;
  background: #EAF2F8;
}
.mrs-flow2__body { min-width: 0; }
.mrs-flow2__title {
  margin: 0 0 12px;
  font-size: clamp(18px, 2.1vw, 23px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  color: #1A2B3C;
}
.mrs-flow2__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 2.05;
  color: #33475B;
  text-wrap: pretty;
}
.mrs-flow2__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}


@media (max-width: 896px) {
  .mrs-flow2__item {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 16px 20px;
  }
  .mrs-flow2__item::before { left: 36px; top: 74px; }
  .mrs-flow2__mark { width: 74px; height: 74px; }
  .mrs-flow2__num { font-size: 2.8rem; }
  .mrs-flow2__card { grid-template-columns: minmax(0, 176px) minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .mrs-flow2__item { grid-template-columns: 60px minmax(0, 1fr); gap: 12px 14px; }
  .mrs-flow2__item::before { left: 29px; top: 60px; }
  .mrs-flow2__mark { width: 60px; height: 60px; }
  .mrs-flow2__step { font-size: .9rem; letter-spacing: .16em; }
  .mrs-flow2__num { font-size: 2.2rem; margin-top: 4px; }
  .mrs-flow2__card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }
  .mrs-flow2__photo { max-width: 240px; }
}

/* ---- ヘッダーSNSアイコンを一回り大きく ---- */
.mrs-header-sns__item {
  width: 33px;
  height: 33px;
  font-size: 18px;
}

/* ---- 施工の流れ：工程タグの間に矢印（着工 → 足場設置 → …） ---- */
.mrs-flow2__tags { gap: 10px 24px; }
.mrs-flow2__tags .mrs-tag { position: relative; }
.mrs-flow2__tags .mrs-tag:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -17px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #5BAEDC;
  border-right: 2px solid #5BAEDC;
  transform: translateY(-50%) rotate(45deg);
}

/* ---- 施工の流れ：工程タグを配色付きチップに（お客様の声のエリアバッジと同じトーン） ---- */
.mrs-flow2__tags .mrs-tag {
  background: #EAF2F8;
  border-color: #CFE1EF;
  color: #1B5E9E;
  font-size: 13.5px;
  font-weight: 500;
}

/* ---- 施工の流れ：写真が入った場合 ---- */
.mrs-flow2__photo { overflow: hidden; }
.mrs-flow2__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 施工の流れ：SPでは工程タグを小さく（矢印の位置も詰める） ---- */
@media (max-width: 639px) {
  .mrs-flow2__tags { gap: 8px 17px; margin-top: 14px; }
  .mrs-flow2__tags .mrs-tag {
    padding: 5px 10px;
    font-size: 11.5px;
  }
  .mrs-flow2__tags .mrs-tag:not(:last-child)::after {
    right: -12px;
    width: 5px;
    height: 5px;
    border-width: 1.5px;
  }
}

/* ---- TOP「私たちについて」：1カラムに折り返す幅（実測716px以下）では写真も左右に余白をとる ---- */
@media (max-width: 716px) {
  .mrs-about__img {
    margin-left: clamp(20px, 5vw, 40px);
    margin-right: clamp(20px, 5vw, 40px);
  }
}

/* ---- メインビュー：キャッチコピーのフェードアップ（2行を少しずらして表示） ---- */
.mrs-mv__line {
  display: block;
  opacity: 0;
  transform: translateY(26px);
  animation: mrsMvLineIn 1.1s cubic-bezier(.22, .61, .36, 1) forwards;
}
.mrs-mv__line:nth-child(1) { animation-delay: .35s; }
.mrs-mv__line:nth-child(2) { animation-delay: .58s; }
@keyframes mrsMvLineIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mrs-mv__line { animation: none; opacity: 1; transform: none; }
}

/* ---- TOP「私たちについて」：SPでは写真の下にも余白をとる ---- */
@media (max-width: 716px) {
  .mrs-about__img { margin-bottom: clamp(32px, 6vw, 48px); }
}

/* ---- ヘッダーSNSボタン：もう少し大きく・角丸2px ---- */
.mrs-header-sns__item {
  width: 38px;
  height: 38px;
  font-size: 20px;
  border-radius: 2px;
}

/* 暗幕を薄くした分、キャッチは影で写真から浮かせて可読性を確保する */
.mrs-mv__title { text-shadow: 0 2px 14px rgba(10, 32, 54, .5); }