@charset "utf-8";

/* ========================================================
   英語フォント OPTIBankGothic の読み込み（@font-face）
   ※フォントファイルを サーバの /tokumoto/cd/fonts/ に置いてください。
     style.css は css/ にあるので、相対パスは ../fonts/ になります。
     ファイル名が違う場合は下の url() を実ファイル名に合わせて変更してください。
   ※woff2 が最優先、無ければ woff、それも無ければ otf を使います。 ======================================================== */
/* 通常ウェイト（細め）＝Light。font-weight 300〜400 のときに使われる */
@font-face {
    font-family: "OPTIBankGothic";
    src: url("../fonts/OPTIBankGothic-Light.woff2") format("woff2");
    font-weight: 300 400;
    font-display: swap;
}
/* 太字＝Medium。font-weight 500〜700（.bold など）のときに使われる */
@font-face {
    font-family: "OPTIBankGothic";
    src: url("../fonts/OPTIBankGothic-Medium.woff2") format("woff2");
    font-weight: 500 700;
    font-display: swap;
}

/* service下層MV（mv_pattern_d）の和文タイトル用フォント。ウェイトは1種類のみ */
@font-face {
    font-family: "Makinas4Flat";
    src: url("../fonts/Makinas-4-Flat.woff2") format("woff2");
    font-display: swap;
}

/* ========================================================
   変数 (Variables)
   ======================================================== */
:root {
    /* ▼ カラー：デザインカンプ(01_index.psd)の確定値に統一 ▼
       色を変えたいときはこの右側の #xxxxxx を書き換えればサイト全体に反映されます */
    --black: #0f1418;   /* ベースの黒（ヘッダー黒背景・フッターなど）*/
    --white: #fff;      /* 白 */
    --main: #2a5194;    /* メインカラー(青)。リンク・見出し装飾など */
    --accent: #2a5194;  /* アクセント。差し色を足したくなったらここを変更 */
    --gray: #626262;    /* 本文グレー文字。デザイン新規追加 */
    --bg_gray: #f5f5f5; /* 背景グレー */
    --border: #d2d2d2;  /* 罫線・ボーダー色。デザイン新規追加 */
    --gray-mid: #898989; /* 控えめなボーダー・テキスト用の中間グレー。#aaa/#999等でバラついていたのを統一 */

    --font_base: "Noto Sans JP", sans-serif;          /* 日本語＝Noto Sans CJK JP */
    --font_en: "OPTIBankGothic", "Jost", sans-serif;  /* 英語＝OPTIBankGothic（来るまではJostで代替） */
    --font_mincho: "Noto Serif JP", serif;            /* 明朝見出し＝ヒラギノ明朝W6の代替（Noto Serif JP） */
    --font_makinas: "Makinas4Flat", var(--font_base); /* service下層MVの和文タイトル専用 */

    --shadow_primary: .3rem .3rem 1.5rem -.3rem rgba(0, 0, 0, .2);
    --text_shadow_primary: .2rem .2rem .6rem rgba(0, 0, 0, .4); /* テキスト用のシャドウ */

    --z_back: -1;
    --z_default: 1;
    --z_banner: 80;
    --z_nav_sp: 90;
    --z_header: 100;
    --z_modal: 1000;
    --z_loading: 9000;
    --z_toast: 9999;

    --js_windowWidth: 100vw;
    --js_vw: 1vw;
    --vh: 1vh;
}
@media screen and (max-width: 768px) {
    :root { --shadow_primary: .2rem .2rem 1rem -.2rem rgba(0, 0, 0, .2); }
    :root { --text_shadow_primary: .1rem .1rem .3rem rgba(0, 0, 0, .4); } /* SP用に調整 */
}

/* ========================================================
   色設定 (Color Utilities)
   ======================================================== */
.c_black { color: var(--black); }
.c_white { color: var(--white); }
.c_main  { color: var(--main); }
.c_accent{ color: var(--accent); }
.c_gray  { color: var(--gray); }  /* 本文グレー文字用。<p class="c_gray"> のように使えます */
.bg_black { background-color: var(--black); }
.bg_white { background-color: var(--white); }
.bg_main  { background-color: var(--main); }
.bg_accent{ background-color: var(--accent); }
.bg_gray  { background-color: var(--bg_gray); }

.hover_opacity { transition: opacity 0.3s; }
.hover_opacity:hover { opacity: 0.7; }

/* ========================================================
   リセット & ベース
   ======================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    font-size: 62.5%;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: auto; /* Lenis と競合するので smooth は切る */
}
body {
    font-family: var(--font_base);
    color: var(--black);
    font-size: 1.6rem;
    font-weight: 500;
    background: var(--white);
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
}
img { vertical-align: bottom; max-width: 100%; height: auto; border-style: none; }
img[src*=".svg"] { width: 100%; }
a { color: inherit; text-decoration: none; transition: opacity .3s, color .3s; cursor: pointer; }
a:hover { opacity: 0.7; }
input, button, select, textarea {
    font-family: inherit; font-size: inherit; line-height: inherit;
    background-color: transparent; border: none; outline: none;
    -webkit-appearance: none; appearance: none;
}
textarea { resize: vertical; }
ul, ol { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
button { cursor: pointer; }

/* ========================================================
   レスポンシブ文字サイズ
   ======================================================== */
@media screen and (max-width: 1200px) { html { font-size: 58.59%; } }
@media screen and (max-width: 1024px) { html { font-size: 54.69%; } }
@media screen and (max-width: 768px)  { html { font-size: 93.75%; } }
@media screen and (max-width: 530px)  { html { font-size: 78.13%; } }
@media screen and (max-width: 430px)  { html { font-size: calc(2.551 * var(--js_vw)); } }
@media screen and (max-width: 768px)  { body { font-size: 1.3rem; } } /* SP本文 13px regular */

/* ========================================================
   レイアウト
   ======================================================== */
.inner { width: 90%; max-width: 1000px; margin-inline: auto; }
.inner.is_wide { max-width: 1200px; }
.inner.is_full { width: 100%; max-width: 1440px; padding-inline: 4%; }

.flex { display: flex; flex-wrap: wrap; }
.flex.nowrap { flex-wrap: nowrap; }
.ai_c { align-items: center; } .ai_fs { align-items: flex-start; }
.ai_fe { align-items: flex-end; } .ai_s { align-items: stretch; }
.jc_c { justify-content: center; } .jc_sb { justify-content: space-between; }
.jc_sa { justify-content: space-around; } .jc_fs { justify-content: flex-start; }
.jc_fe { justify-content: flex-end; }
.fd_c { flex-direction: column; } .fd_rr { flex-direction: row-reverse; }

.gap10 { gap: 1rem; } .gap20 { gap: 2rem; } .gap30 { gap: 3rem; } .gap40 { gap: 4rem; }

.grid { display: grid; }
.place_center { display: grid; place-content: center; }

.pc_only { display: block; }
.sp_only { display: none; }
@media screen and (max-width: 768px) {
    .pc_only { display: none; }
    .sp_only { display: block; }
    .inner { width: 94%; }
}

/* ========================================================
   ユーティリティ
   ======================================================== */
.tal { text-align: left; } .tac { text-align: center; } .tar { text-align: right; }
.bold { font-weight: 700; } .fw_normal { font-weight: 400; }
.font_en { font-family: var(--font_en); }

.text_20 { font-size: 2rem; } .text_24 { font-size: 2.4rem; }
.text_30 { font-size: 3rem; }
.text_40 { font-size: clamp(2.8rem, 4vw, 4rem); }
.text_60 { font-size: clamp(4rem, 6vw, 6rem); }

.line_clamp1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.line_clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.line_clamp3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.lh_narrow { line-height: 1.2; } .lh_normal { line-height: 1.6; } .lh_wide { line-height: 2.0; }

.object_cover { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.object_contain { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.aspect_16_9 { aspect-ratio: 16 / 9; }
.aspect_4_3 { aspect-ratio: 4 / 3; }
.aspect_1_1 { aspect-ratio: 1 / 1; }

.visually_hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.mt0 { margin-top: 0 !important; } .mb0 { margin-bottom: 0 !important; }
.mt10 { margin-top: 1rem; }  .mb10 { margin-bottom: 1rem; }
.mt20 { margin-top: 2rem; }  .mb20 { margin-bottom: 2rem; }
.mt30 { margin-top: 3rem; }  .mb30 { margin-bottom: 3rem; }
.mt40 { margin-top: 4rem; }  .mb40 { margin-bottom: 4rem; }
.mt50 { margin-top: 5rem; }  .mb50 { margin-bottom: 5rem; }
.mt60 { margin-top: 6rem; }  .mb60 { margin-bottom: 6rem; }
.mt80 { margin-top: 8rem; }  .mb80 { margin-bottom: 8rem; }
.mt100 { margin-top: 10rem; } .mb100 { margin-bottom: 10rem; }
.pt10 { padding-top: 1rem; }  .pb10 { padding-bottom: 1rem; }
.pt20 { padding-top: 2rem; }  .pb20 { padding-bottom: 2rem; }
.pt30 { padding-top: 3rem; }  .pb30 { padding-bottom: 3rem; }
.pt40 { padding-top: 4rem; }  .pb40 { padding-bottom: 4rem; }
.pt50 { padding-top: 5rem; }  .pb50 { padding-bottom: 5rem; }
.pt100 { padding-top: 10rem; } .pb100 { padding-bottom: 10rem; }
.pl10 { padding-left: 1rem; }  .pr10 { padding-right: 1rem; }
.pl20 { padding-left: 2rem; }  .pr20 { padding-right: 2rem; }
.pl30 { padding-left: 3rem; }  .pr30 { padding-right: 3rem; }
.pl40 { padding-left: 4rem; }  .pr40 { padding-right: 4rem; }

@media screen and (max-width: 768px) {
    .sp_mt20 { margin-top: 2rem; } .sp_mb20 { margin-bottom: 2rem; }
}

/* ========================================================
   スクロール発火
   ======================================================== */
.trigger.fade_up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .9s ease, transform .9s ease;
}
.trigger.fade_up.animation { opacity: 1; transform: translateY(0); }

/* opacity だけのフェードイン（transform を使わない）。
   絶対配置＋transform:translateY(-50%) で中央寄せした要素（CONTACTのMORE円ボタン等）は
   fade_up を当てると translate が競合して位置が壊れるので、そういう要素にはこちらを使う。 */
.trigger.fade_op { opacity: 0; transition: opacity .9s ease; }
.trigger.fade_op.animation { opacity: 1; }

/* 登場アニメ(fade_up/fade_op)で付く .animation{opacity:1}(詳細度0,3,0) が、
   .hover_opacity:hover{opacity:.7}(0,2,0) に勝ってしまい hover の半透明が効かなくなる。
   そこでボタン側の hover を同等以上の詳細度＋後ろに置いて勝たせる（アニメと hover を併用可に）。
   hover の入りだけ .25s でキビキビ／戻りは元の transition に従う。 */
.sec_news__btn.hover_opacity:hover,
.sec_contact__btn.hover_opacity:hover { opacity: 0.7; transition: opacity 0.25s ease; }

/* ========================================================
   ローディング画面
   ======================================================== */
.l_loading {
    position: fixed; inset: 0;
    z-index: var(--z_loading);
    background: var(--black); color: var(--white);
    display: grid; place-content: center;
    transition: opacity .8s ease, visibility .8s ease;
}
.l_loading__inner { text-align: center; }
.l_loading__logo { position: relative; width: 22rem; margin: 0 auto 2.4rem; line-height: 0; }
.l_loading__logo img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); } /* 黒ロゴ→白 */
.l_loading__logo_base { opacity: .2; }                       /* 薄い下地（塗る前のシルエット） */
.l_loading__logo_fill {                                      /* 下から上へ白く塗る本体 */
    position: absolute; inset: 0;
    clip-path: inset(100% 0 0 0);                            /* 最初は下端0（隠れ） */
    animation: ldLogoFill 1.2s ease forwards .2s;            /* 速さ＝1.2s。遅らせたいなら最後の .2s を増やす */
}
@keyframes ldLogoFill { to { clip-path: inset(0 0 0 0); } }  /* 上端まで塗り上がる */
body.is_loading { overflow: hidden; }
body.is_loaded .l_loading { opacity: 0; visibility: hidden; pointer-events: none; }
@media screen and (max-width: 768px) { .l_loading__logo { width: 11rem; } } /* SPはローディングのロゴを約半分に */

/* ========================================================
   ヘッダー
   ======================================================== */
.header {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: var(--z_header);
    background: transparent;
    transition: background-color .4s ease, box-shadow .4s ease, padding .4s ease;
}
.header .g_nav__link { color: var(--white); transition: color .4s ease; }

/* ヘッダーの中身レイアウト。
   ・ロゴは画面の左上から padding 1rem の位置（下記の padding 左・上が効く）
   ・右側のメニューアイコンは画面の右端から 4rem（padding 右が効く）
   数値を変えたいとき：下の padding「上 右 下 左」の順で調整できます */
.header_inner {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 1rem 4rem 1rem 1rem;  /* 上1 / 右4 / 下1 / 左1 (rem) */
}
@media screen and (max-width: 768px) {
    .header_inner { padding: 1rem 1.5rem; } /* SPは余白を詰める */
}

/* ナビ＋メニューアイコンのまとまり（右寄せのカタマリ）。
   ※以前 .flex .pc_only を併用したら、.pc_only{display:block} が .flex{display:flex} を
     上書きして横並びが崩れたため、専用クラスで display:flex を明示しています。 */
.header_right { display: flex; align-items: center; gap: 3rem; } /* gap＝ナビとアイコンの間隔 */
@media screen and (max-width: 768px) { .header_right { display: none; } } /* SPでは隠す（ハンバーガーに切替） */

/* 子メニューを持つ項目（グループについて／事業案内）の下向き「⌄」。
   文字の「真下・中央」に配置。currentColor を使うので白→黒のスクロール切替に自動追従。
   サイズ＝width/height、文字からの距離＝bottom の値で調整できます。遷移先は未定。 */
.g_nav__link.has_child { position: relative; }
.g_nav__link.has_child::after {
    content: ""; position: absolute;
    left: 50%; bottom: -.8em;           /* 左右中央／文字の下にどれだけ離すか */
    width: .5em; height: .5em;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateX(-50%) rotate(45deg); /* 中央寄せ＋45度回転で下向き「く」 */
    transition: transform .35s ease;
}

/* PCナビ：hoverで開くドロップダウン（グループについて／事業案内）。
   grid-template-rows の 0fr→1fr トリックでJSなしに高さアニメーションさせる。 */
.g_nav__item.has_dropdown { position: relative; }

.g_nav__dropdown_wrap {
    display: grid;
    grid-template-rows: 0fr;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    transition: grid-template-rows .35s ease;
    z-index: 10;
}
.g_nav__dropdown_wrap > .g_nav__dropdown {
    overflow: hidden;
    width: max-content;   /* 中身の一番長い項目に合わせて自動で幅が決まる */
    min-width: 200px;     /* 短い方（グループについて）が細くなりすぎないよう最低幅を確保 */
    margin-top: 3rem;
}
.g_nav__item.has_dropdown:hover .g_nav__dropdown_wrap {
    grid-template-rows: 1fr;
}

.g_nav__dropdown {
    background-color: rgba(255, 255, 255, .8); /* ヘッダーが透明な状態(スクロール前)用 */
    white-space: nowrap;
}
/* ヘッダーが白背景に切り替わったら(is_scroll)、ドロップダウンも同じ色に揃える */
body.is_scroll .g_nav__dropdown {
    background-color: rgba(255, 255, 255, .96);
}
.g_nav__dropdown_link {
    display: block;
    padding: 1.5rem 2rem;
    color: var(--black);
    background-color: transparent;
    transition: background-color .3s ease, color .3s ease;
}
.g_nav__dropdown_link:hover {
    background-color: var(--black);
    color: var(--white);
    opacity: 1; /* グローバルの a:hover{opacity:.7} を打ち消す。色の切り替えのみにするため薄くしない */
}
.g_nav__dropdown li:not(:last-child) .g_nav__dropdown_link {
    border-bottom: solid 1px var(--gray-mid);
}

/* 矢印の向き：ドロップダウン展開中は上向きに回転（現状は45degで下向き「く」） */
.g_nav__item.has_dropdown:hover .g_nav__link.has_child::after {
    bottom: -1.5rem;
    transform: translateX(-50%) rotate(225deg);
}

/* ヘッダーロゴ PC/SP 出し分け（SP は横組みワードマーク logo_sp.svg） */
.logo_sp { display: none; }
@media screen and (max-width: 768px) {
    .logo_pc { display: none; }
    .logo_sp { display: block; }
}

/* フッターロゴ：PC 14rem / SP 10.5rem（共通の logo_white.svg を使用） */
.f_logo { display: inline-block; width: 14rem; line-height: 0; }
.f_logo img { width: 100%; height: auto; }
@media screen and (max-width: 768px) {
    .f_logo { width: 10.5rem; }
}
.header .logo img { filter: brightness(0) invert(1); transition: filter .4s ease; }

/* ロゴサイズの上限。グローバル img[src*=".svg"] { width: 100% } を
   食い止めるため、ここで明示的にサイズを規定する */
.logo {
    display: inline-block;
    width: 7rem;     /* PC: 70px 相当（指定により 7rem。数値で調整可） */
    line-height: 0;  /* img 周辺の余白除去 */
}
.logo a { display: block; }
.logo img {
    width: 100%;
    height: auto;
    max-width: 100%;
}
@media screen and (max-width: 768px) {
    .logo { width: 9rem; } /* SP: 横組みワードマーク(logo_sp.svg)用の幅。指定により 9rem */
}

body.is_scroll .header { background: rgba(255,255,255,.96); box-shadow: var(--shadow_primary); }
body.is_scroll .header .g_nav__link { color: var(--black); }
body.is_scroll .header .logo img { filter: none; }

/* ========================================================
   ハンバーガー / SPナビ
   ======================================================== */
.hamb {
    width: 4rem; height: 3rem; position: relative;
    background: transparent;
    z-index: calc(var(--z_header) + 1);
}
.hamb span {
    position: absolute; left: 0; right: 0; height: 2px;
    background: var(--white);
    transition: transform .35s ease, top .35s ease, opacity .2s ease, background-color .4s ease;
}
/* PCのメニューアイコンと同じ「2本線」。開くと×印に変形します */
.hamb span:nth-child(1) { top: 35%; }
.hamb span:nth-child(2) { top: 65%; }
body.is_scroll .hamb span { background: var(--black); }
/* ハンバーガーは「開く」専用（×への変形はしない）。閉じるはメニュー内の × (.g_menu__close) が担当。 */

/* PC用メニューアイコン（2本線）──今は見た目だけの飾り。
   ・線の長さ＝width / 線の太さ＝span の height / 線の間隔＝gap で調整できます
   ・MV重なり中は白、スクロールで背景が白くなったら黒に切替（ナビ文字と同じ挙動） */
.menu_btn {
    width: 2.8rem;          /* アイコン全体の横幅（＝線の長さ）。長くしたいならここを増やす */
    height: 1.4rem;         /* アイコン全体の縦幅 */
    display: flex; flex-direction: column; justify-content: space-between; /* 2本を上下に振り分け */
    background: transparent;
}
.menu_btn span {
    display: block; width: 100%; height: 2px;   /* 2px＝線の太さ */
    background: var(--white);
    transition: background-color .4s ease, transform .35s ease;
}
body.is_scroll .menu_btn span { background: var(--black); }  /* スクロール後は黒線に */
/* メニューボタンも「開く」専用（×への変形はしない）。閉じるはメニュー内の × が担当。 */

/* ========================================================
   フルスクリーンメニュー（00_menu.psd）
   動き：待機＝画面右の外(translateX 100%)に隠す／開く＝右→左へ登場(0)／
         閉じる＝さらに左へ抜けて消える(-100%)。ABOUT US と同じ右→左の流れ
         （pmo-web 右上メニューの左右反転）。アニメ時間 .6s は JS の MENU_ANIM(600) と一致させる。
   ======================================================== */
.g_menu {
    position: fixed; inset: 0;
    background: var(--black); color: var(--white);
    z-index: var(--z_modal);         /* ヘッダーより前面（最前面）に出してページを完全に覆う */
    /* ワイプ表示：中身（×・ロゴ・カラム）は動かさず clip-path で右→左に出し入れ。
       ＝×の位置がアニメ中もズレない（ハンバーガー位置と重なったまま）。 */
    -webkit-clip-path: inset(0 0 0 100%);
            clip-path: inset(0 0 0 100%);   /* 待機：右端までクリップ＝隠す */
    visibility: hidden;
    overflow-y: auto;                /* SPの長いメニューはスクロール可に */
    -webkit-overflow-scrolling: touch;
}
/* 開く時・閉じる時だけアニメ有効（待機中は無アニメで瞬時リセット）。速さは .6s（JS MENU_ANIM=600と一致） */
body.is_hamb_open .g_menu,
body.is_hamb_closing .g_menu {
    transition: clip-path .6s cubic-bezier(.76, 0, .24, 1), -webkit-clip-path .6s cubic-bezier(.76, 0, .24, 1), visibility .6s;
    visibility: visible;
}
/* 開く：右→左にワイプして「メニュー」が現れる（左インセット 100%→0） */
body.is_hamb_open    .g_menu { -webkit-clip-path: inset(0 0 0 0);    clip-path: inset(0 0 0 0); }
/* 閉じる：右→左にワイプして「元画面」が現れる（右インセット 0→100%） */
body.is_hamb_closing .g_menu { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }

/* ★メニューは最前面(z_modal)でページを完全に覆うので、ヘッダーを隠す処理は不要。
   開く＝メニューが上に乗ってヘッダーごと隠す／閉じる＝左へスライドアウトすると下から
   ヘッダーが自然に再表示される（＝以前の「ナビが消える瞬間」問題も根本的に解消）。 */

.g_menu__inner { min-height: 100%; box-sizing: border-box; }
.g_menu__logo_img { display: block; filter: brightness(0) invert(1); } /* 黒ロゴ→白 */
.g_menu__link { color: var(--white); display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.g_menu__link .g_menu__ext { width: 1em; height: 1em; filter: invert(79%); } /* 外部リンクアイコン。2段セレクタで img[src*=svg]{width:100%} の罠に勝たせる */
.g_menu__sublink { color: #c9c9c9; position: relative; }
.g_menu__sublink::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 5px; height: 5px; border-radius: 50%; background: #c9c9c9; } /* 子項目の先頭ドット */

/* メニュー右上の × 閉じるボタン（メニュー自身が持つ。ハンバーガーと同じ右上位置に重なって見える）。
   位置は top / right で微調整可。 */
/* 閉じる×：開くボタン（PC=.menu_btn／SP=.hamb）の「×変形後」と同じ見た目を再現し、同じ位置に重ねる。
   線は要素の幅いっぱい(left:0/right:0)でハンバーガーと同じ。サイズ・位置を各ボタンに合わせる。 */
.g_menu__close {
    position: absolute; z-index: 1; background: transparent;
    width: 2.8rem; height: 1.4rem; top: 3.6rem; right: 4rem;   /* PC：.menu_btn(2.8×1.4rem／上3.6rem・右4rem)に一致 */
}
.g_menu__close span {
    position: absolute; left: 0; right: 0;
    top: calc(50% - 1px); height: 2px; background: var(--white);
}
.g_menu__close span:nth-child(1) { transform: rotate(45deg); }
.g_menu__close span:nth-child(2) { transform: rotate(-45deg); }
@media screen and (max-width: 768px) {
    /* SP：.hamb(4×3rem／右1.5rem)に一致。上位置は実機で微調整可 */
    .g_menu__close { width: 4rem; height: 3rem; top: 1.1rem; right: 1.5rem; }
}

/* PC：ロゴ左＋3カラム、上下に罫線フレーム、画面中央 */
@media screen and (min-width: 769px) {
    .g_menu__inner { height: 100%; display: flex; align-items: center; justify-content: center; padding: 6rem 6%; }
    .g_menu__frame {
        display: flex; align-items: flex-start; gap: 8rem;
        width: 100%; max-width: 1200px;
        border-top: 1px solid rgba(255,255,255,.25);
        border-bottom: 1px solid rgba(255,255,255,.25);
        padding: 7rem 0 7rem 50px;   /* 左50px＝罫線(border)はフレーム端のまま、中身(ロゴ)だけ50px内側へ。
                                        画面が狭くなると flex でカラムが縮む＝ロゴと食い込まない（必要なら左50pxを詰めて調整） */
    }
    .g_menu__logo { flex-shrink: 0; align-self: flex-start; margin-top: 5rem; } /* 上端を「グループの強み」に合わせる＝Homeの高さぶん下げる。位置は margin-top で調整 */
    .g_menu__logo .g_menu__logo_img { width: 150px; } /* 2段セレクタで svg罠(width:100%)に勝たせる */
    .g_menu__cols { flex: 1; display: flex; gap: 6rem; align-items: flex-start; }
    .g_menu__col { flex: 1; }
    .g_menu__list { display: flex; flex-direction: column; gap: 1.8rem; }
    .g_menu__link { font-size: 1.8rem; font-weight: 700; letter-spacing: .05em; }
    .g_menu__sub { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 1.2rem; }
    .g_menu__sublink { font-size: 1.5rem; padding-left: 1.6rem; }
}

/* SP：縦積み。トップ項目を区切り罫線で区切り、最下部にロゴ中央 */
@media screen and (max-width: 768px) {
    .g_menu__inner { display: flex; flex-direction: column; padding: 9rem 0 3rem; }
    .g_menu__frame { display: flex; flex-direction: column; flex: 1; }
    .g_menu__logo { order: 2; display: flex; justify-content: center; padding: 4rem 0 2rem; }
    .g_menu__logo .g_menu__logo_img { width: 10rem; } /* フッターロゴと同じ幅。2段セレクタで svg罠に勝たせる */
    .g_menu__cols { order: 1; display: block; }
    .g_menu__col { display: block; }
    .g_menu__list { display: block; }
    .g_menu__item { border-top: 1px solid rgba(255,255,255,.6); margin-inline: 2.5%; } /* 罫線（白）＝幅95%（左右2.5%あけ） */
    .g_menu__link { display: flex; align-items: center; padding: 1.8rem 0.5%; font-size: 1.6rem; font-weight: 700; } /* 横0.5%＝テキストは罫線(95%)より少し内側の幅94%。アイコンは flex で文字の隣 */
    .g_menu__sub { display: block; padding: 0 0.5% 1.8rem; }
    .g_menu__sublink { display: block; padding: .6rem 0 .6rem 1.6rem; font-size: 1.4rem; }
}

/* ========================================================
   Main Visual (MV)
   ======================================================== */
.sec_mv {
    position: relative; width: 100%;
    height: 100vh; height: calc(var(--vh, 1vh) * 100);
    overflow: hidden; color: var(--white);
}
.sec_mv__bg { position: absolute; inset: 0; clip-path: inset(0 0 100% 0); will-change: clip-path; }
/* MV スライドショー：各スライドを重ねて配置。opacity と scale は GSAP が完全制御
   :first-child への CSS opacity 指定は撤廃——CSS と GSAP が同じプロパティを競合するとフェードアウトが乱れるため */
.mv_slide     { position: absolute; inset: 0; opacity: 0; }
.mv_slide img { transform-origin: center; will-change: transform; }
.sec_mv__overlay {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 100%);
}
.sec_mv__copy {
    position: relative; z-index: 2; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding-inline: 4%; text-align: center;
}
.sec_mv__title {
    font-size: 4.8rem;   /* PC: 48px。MVの英語タイトル */
    line-height: 1.1; letter-spacing: 0.05em;
    margin-bottom: 2.4rem; overflow: hidden;
    text-shadow: var(--text_shadow_primary); /* テキストシャドウを追加 */
}
.sec_mv__title .char { display: inline-block; transform: translateY(110%); opacity: 0; will-change: transform, opacity; }
.sec_mv__title_line { display: block; overflow: hidden; } /* PCは「POWERING REGIONAL」/「INFRASTRUCTURE」で確実に2行に */
.sec_mv__lead { display: block; font-family:var(--font_base); font-size: 2.4rem; opacity: 0; transform: translateY(20px); will-change: transform, opacity; padding-top: 1.6rem; text-shadow: var(--text_shadow_primary); } /* PC: 24px（SPは下のSP指定で16px） */

/* SP MV中央のロゴlockup（PCでは sp_only で非表示）。マークを上、ワードマークを下に重ねる。
   ※ width はセレクタを2段（.sec_mv__logo ...）にして、グローバルの
     img[src*=".svg"]{width:100%} に勝たせています（HANDOFF 6.3の罠回避）。 */
.sec_mv__logo { opacity: 0; text-shadow: var(--text_shadow_primary); } /* 入場アニメ前のチラ見え防止：表示はJS(GSAP)で行う。SP MVロゴのフラッシュ対策 */
.sec_mv__logo img { display: block; margin-inline: auto; filter: brightness(0) invert(1); } /* 黒→白 */
.sec_mv__logo .sec_mv__mark { width: 4.5rem; margin-bottom: 1.2rem; }  /* マーク幅 */
.sec_mv__logo .sec_mv__wordmark { width: 25rem; max-width: 86vw; }     /* ワードマーク幅 */
.sec_mv__scroll {
    position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%);
    z-index: 2; display: inline-flex; flex-direction: column; align-items: center;
    gap: 1rem; color: var(--white); opacity: 0;
    font-size: 1.2rem; letter-spacing: 0.25em; will-change: opacity;
    transition: opacity .6s ease;   /* 無操作時のフェードイン用 */
    pointer-events: none;
}
.sec_mv__scroll.is_show { opacity: 1; }   /* 一定時間スクロールが無いときだけ表示 */
.sec_mv__scroll_line {
    width: 1px; height: 6rem; background: rgba(255,255,255,.4);
    position: relative; overflow: hidden;
}
.sec_mv__scroll_line::after {
    content: ""; position: absolute; top: -100%; left: 0;
    width: 100%; height: 100%; background: var(--white);
    animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine { 0% { top: -100%; } 100% { top: 100%; } }

/* ========================================================
   OUR STRENGTHS
   ======================================================== */
.sec_strengths {
    padding: 20rem 0;   /* 上下の余白（指定により 20rem ずつ） */
    background: var(--white);
    position: relative;
}
.sec_strengths__layout {
    display: grid;
    /* minmax(0, ...) を付けないと、子（Swiper × aspect-ratio）の min-content が
       無限に膨らみグリッドが 16,777,216px まで暴走する。必須。 */
    grid-template-columns: minmax(0, 745fr) minmax(0, 500fr); /* 画像枠745px : テキスト500px の比率（1600で実寸一致、狭くなれば比例縮小） */
    gap: 5.5rem;   /* 画像枠 → テキスト の間 55px */
    align-items: center;
}

/* 左：クロスフェードスライドショー */
.strengths_visuals {
    position: relative;
}

.strengths_slideshow {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;     /* スライドの枠アスペクト。お好みで 1/1, 3/4 など */
    background: var(--white);
    overflow: hidden;
}

.strengths_slideshow .swiper-slide {
    overflow: hidden;
}
/* 2枚目以降の単一画像スライド */
.strengths_slideshow .swiper-slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== 1枚目スライドだけ：3ストリップで登場 ===== */
.strengths_strips {
    width: 100%;
    height: 100%;
    display: grid;
    /* minmax(0, 1fr) は必須（中の img が 300% 幅なので grid が暴走しないようガード） */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.4rem;            /* 登場時の隙間。.is_show で 0 に閉じる */
    transition: gap 0.9s cubic-bezier(.7, 0, .25, 1) 0.55s;
                            /* ↑ストリップが揃ったあとに隙間が閉じる順序にしたいので delay */
    background: var(--white); /* 隙間の地色（白） */
}
.strengths_visuals.is_show .strengths_strips {
    gap: 0;
}

.strengths_strip {
    position: relative;
    overflow: hidden;
    transform: translateY(110%); /* 初期：下に隠れている */
    opacity: 0;
    transition: transform 1.1s cubic-bezier(.7, 0, .25, 1),
                opacity   0.6s ease;
}
.strengths_visuals.is_show .strengths_strip {
    transform: translateY(0);
    opacity: 1;
}
/* スタガー：左から順に立ち上がる */
.strengths_visuals.is_show .strengths_strip[data-strip="1"] { transition-delay: 0s; }
.strengths_visuals.is_show .strengths_strip[data-strip="2"] { transition-delay: 0.15s; }
.strengths_visuals.is_show .strengths_strip[data-strip="3"] { transition-delay: 0.3s; }

/* 各ストリップ内の画像：1枚絵を3倍幅で表示し、left で左1/3・中1/3・右1/3 をスライス
   ※ グローバルの img { max-width: 100% } を打ち消すため max-width: none が必須 */
.strengths_strip_img {
    position: absolute;
    top: 0;
    height: 100%;
    width: 300%;
    max-width: none;
    object-fit: cover;
}
.strengths_strip[data-strip="1"] .strengths_strip_img { left: 0; }
.strengths_strip[data-strip="2"] .strengths_strip_img { left: -100%; }
.strengths_strip[data-strip="3"] .strengths_strip_img { left: -200%; }

/* Ken Burns（2枚目以降の単一画像と、ストリップ完成後の1枚目で軽く拡大→等倍） */
.strengths_slideshow .swiper-slide > img {
    transform: scale(1.06);
}
.strengths_slideshow .swiper-slide-active > img {
    animation: strengthsKenBurns 6s linear forwards;
}
@keyframes strengthsKenBurns {
    from { transform: scale(1.1); }
    to   { transform: scale(1.0); }
}

/* 番号インジケーター（01 / 04） */
.strengths_slideshow__indicator {
    /* 画像が1枚なので非表示。複数枚にするときは display:flex に戻す（下の align-items/gap は flex 用） */
    display: none;
    position: absolute;
    bottom: 1.6rem;
    left: 1.6rem;
    z-index: 2;
    align-items: center;
    gap: 1rem;
    color: var(--white);
    font-size: 1.3rem;
    letter-spacing: 0.2em;
    pointer-events: none;
}
.strengths_slideshow__divider {
    display: inline-block;
    width: 3rem;
    height: 1px;
    background: rgba(255,255,255,.6);
}
.strengths_slideshow__total {
    opacity: .7;
}

/* 縦書きスタンプ */
.strengths_visuals__stamp {
    position: absolute;
    top: 2rem;
    left: -2.4rem;
    writing-mode: vertical-rl;
    font-size: 1.2rem;
    letter-spacing: 0.3em;
    color: var(--main);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease .6s, transform .8s ease .6s;
}
.strengths_visuals.is_show .strengths_visuals__stamp { opacity: 1; transform: translateY(0); }

/* 右：テキスト */
.strengths_text__ttl {
    font-size: 5rem;      /* PC: 50px。見出しの英語 */
    line-height: 1.8;     /* 行送り90px ÷ 50px = 1.8 */
    color: var(--main);
    margin-bottom: 0;     /* 日本語サブが下がりすぎるので余白を削除（lh1.8で十分空く） */
    text-align: center;   /* PCは見出しをセンター（SPは下の媒体クエリで左揃え） */
}
.strengths_text__sub { display: block; font-family:var(--font_base); font-size: 1.8rem; color: var(--main); font-weight: 700; letter-spacing: 0.1em; text-align: center; } /* 見出しサブ 18px bold・PCセンター */
.strengths_text__body { line-height: 2; margin-bottom: 6rem; } /* 本文下〜ボタンまで60px */

/* STRENGTHS テキスト出現アニメ（strips が揃った後に段階表示）。
   ・JS が is_armed を付けている間だけ隠す＝JS無効/未到達時は表示されたまま。
   ・strips 完成後に is_text_in が付いて、見出し→サブ→本文→ボタンの順でふわっと。 */
.sec_strengths.is_armed .strengths_text__ttl,
.sec_strengths.is_armed .strengths_text__sub,
.sec_strengths.is_armed .strengths_text__body,
.sec_strengths.is_armed .strengths_text .btn_circle {
    opacity: 0; transform: translateY(2rem);
    transition: opacity .7s ease, transform .7s ease;
}
.sec_strengths.is_text_in .strengths_text__ttl  { opacity: 1; transform: none; }
.sec_strengths.is_text_in .strengths_text__sub  { opacity: 1; transform: none; transition-delay: .12s; }
.sec_strengths.is_text_in .strengths_text__body { opacity: 1; transform: none; transition-delay: .24s; }
.sec_strengths.is_text_in .strengths_text .btn_circle { opacity: 1; transform: none; transition-delay: .36s; }
/* 上のopacity:1(詳細度0,4,0)が.hover_opacity:hover(0,2,0)に勝ってhoverが効かなくなるため、
   同じ祖先を含めて詳細度を上げて勝たせる（NEWS/CONTACTボタンと同じ考え方） */
.sec_strengths.is_text_in .strengths_text .btn_circle.hover_opacity:hover {
    opacity: 0.7;
    transition: opacity 0.25s ease;
}

@media screen and (max-width: 768px) {
    .sec_strengths { padding: 7rem 0; } /* SP上下padding 7rem */
    /* SPは縦積み。display:contents で .strengths_text の中身を親フレックスに昇格させ、
       order で「見出し→サブ→画像→本文→ボタン」の順に並べ替える */
    .sec_strengths__layout { display: flex; flex-direction: column; gap: 2rem; align-items: stretch; }
    /* ↑ align-items:stretch が重要。PCグリッド時の align-items:center が残ると、
       flex縦並びで子要素が横方向に中身幅まで縮む（＝画像枠が極小になる不具合）。
       見出し・テキストの左端を SERVICE の画像ライン(6%)に揃えるため inner を88%幅に。 */
    .sec_strengths .inner { width: 88%; }
    .strengths_text { display: contents; }
    .strengths_text__ttl  { order: 1; text-align: left; }
    .strengths_text__sub  { order: 2; text-align: left; }
    .strengths_visuals    { order: 3; margin-inline: calc(50% - 50vw); } /* 見出しの下＋左右フルブリード（画面端まで） */
    .strengths_text__body { order: 4; margin-bottom: 0; } /* 本文下〜ボタンは下のflex gap(2rem=20px)で確保 */
    .btn_circle           { order: 5; }
    .sec_strengths .btn_circle { margin-top: 1.5rem; } /* gap(2rem)に+1.5rem＝本文下〜ボタンの体感余白を増やす */
    .strengths_slideshow { aspect-ratio: 4 / 3; } /* SPは横長気味のほうが収まりがいい */
    .strengths_slideshow__indicator { bottom: 1.2rem; left: 1.2rem; font-size: 1.1rem; }

    /* SPのみ：登場アニメの順番を「見出し&サブ → 画像 → 本文&ボタン」に。
       見出し・サブは早く(0/.12s)、画像(strips)はJSで0.7s後に開始、本文・ボタンはさらに後（下の遅延）。
       タイミングは下の transition-delay と JS の setTimeout(700) で微調整できる。 */
    .sec_strengths.is_text_in .strengths_text__body { transition-delay: 1.6s; }
    .sec_strengths.is_text_in .strengths_text .btn_circle { transition-delay: 1.75s; }
}

/* ========================================================
   SERVICE（縦ピン留め2列ジグザグ）
   ======================================================== */
.sec_service {
    position: relative;
    /* 背景＝写真(service_bg.jpg)＋暗めの黒オーバーレイ。
       画像をサーバの img/index/ に service_bg.jpg として置いてください。
       画像が来るまでは黒(--black)が透けて見えるだけなので問題なし。
       暗さを変えたいときは下の値(60%/70%)を調整 */
    background:
        linear-gradient(rgb(15 20 24 / 60%), rgb(15 20 24 / 70%)),
        var(--black) url("../img/index/service_bg.jpg") center/cover no-repeat;
    color: var(--white);
    overflow: hidden;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    margin-top: 20rem; /* 直上のOUR STRENGTHSとの間隔を確保 */
}
/* 見出し：トラック内に入れて一緒にスクロールさせる（以前は absolute 固定だった）。
   見出し→service01画像 の余白は margin-bottom で調整 */
.sec_service__header {
    text-align: center;
}
.sec_service__ttl { font-size: 5rem; line-height: 1.6; letter-spacing: 0.08em; } /* 見出し英語 50px */
.sec_service__sub { display: block; font-family:var(--font_base); font-size: 1.8rem; font-weight: 700; letter-spacing: 0.1em; } /* 見出しサブ 18px bold */

/* 流れるトラック */
.sec_service__track {
    position: relative;
    /* 上:セクション頭→見出し=14rem / 下:最後のカード→次セク=15rem */
    padding: 14rem 14rem 15rem 20rem; /* 上14 / 右14rem(140px) / 下15 / 左20rem(200px)。NEWSの整列基準 */
    will-change: transform;
}
/* 2列ジグザグのグリッド本体（見出しはこの外＝上に並ぶ） */
.sec_service__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4vw;
    padding-top: 11rem;
}
.service_col { display: flex; flex-direction: column; gap: 18rem; } /* カード間 180px（1rem=10px換算） */
.service_col--right { margin-top: 20rem; } /* 右列の下オフセット 200px */

.service_card { position: relative; display: block; }

/* SERVICE カード出現アニメ（下からふわっと）
   ・JS が PC でピンを有効化したときだけ body に .js_service_ready が付く。
     → SP や JS 無効時はこの隠し状態が当たらず、カードは常に表示される（消えない）。
   ・カードが画面内に入ると JS が .is_in を付与 → 表示に切り替わる。
   ・出る速さ＝transition の .6s／出る距離＝translateY の 6rem。ここの数値だけで調整可。 */
.js_service_ready .service_card {
    opacity: 0;
    transform: translateY(6rem);
    transition: opacity .6s ease, transform .6s ease;
}
.js_service_ready .service_card.is_in {
    opacity: 1;
    transform: none;
}
.service_card__num {
    writing-mode: vertical-rl;
    position: absolute;
    z-index: 2;          /* 画像より前面に */
    top: -2rem;          /* 画像の上端から少し上に出す（指定値）。上のカードとはgapがあるので重ならない */
    left: 1rem;          /* 画像の左端"内側"に */
    font-size: 3.6rem;   /* PC: 36px。画像にかかる英語（SERVICE 01 など） */
    letter-spacing: 0;   /* 字間（縦書きなので行間に効いてた）。0に */
    color: var(--white);
    text-shadow: 0 1px 6px rgba(0,0,0,.45); /* 写真の上でも読めるよう薄い影 */
}
/* 769〜1024pxは3.6rem(PC)→2.6rem(768px境界)へ線形に縮小。
   clampで下限2.6rem・上限3.6remを強制することで、端末側の誤差で計算値が
   範囲を超えても必ず2.6rem〜3.6remに収まるようにしている。 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .service_card__num {
        font-size: clamp(2.6rem, calc(2.6rem + (3.6 - 2.6) * ((100vw - 768px) / (1024 - 768))), 3.6rem);
    }
}
.service_card__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.service_card__ttl { margin-top: 1.6rem; font-size: 2.4rem; font-weight: 700; } /* PC: 24px。SERVICEの小見出し日本語 */
.service_card__desc { margin-top: .6rem; font-size: 1.6rem; line-height: 1.8; color: rgba(255,255,255,.85); } /* PC: 16px。本文尺に合わせる（SPは13px） */

/* 左の進捗バー（矢印イメージ） */
.sec_service__progress {
    position: absolute;
    top: 25vh;
    left: 3%;
    width: 1px;
    height: 50vh;
    background: rgba(255,255,255,.2);
    z-index: 2;
}
.sec_service__progress_bar {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 0%;
    background: var(--white);
}

/* SP: ピン留めをやめて素直に縦並び */
@media screen and (max-width: 768px) {
    .sec_service {
        height: auto;
        padding: 8rem 0 6rem;
        margin-top: 7rem; /* 直上のOUR STRENGTHSとの間隔を確保（SP） */
    }
    .sec_service__header { padding: 0 6%; } /* SP：左端を画像ライン(6%)に */
    .sec_service__track {
        padding: 0 6%;
        transform: none !important; /* GSAPの transform を打ち消し */
    }
    /* SPは1列＝SERVICE 01→02→03… の通し順で見せたい。
       左右colの中身を display:contents で cols 直下に昇格させ、各カードの --order で並べ替える
       （HTMLの各 article に style="--order:N" を付与済み）。 */
    .sec_service__cols { display: flex; flex-direction: column; gap: 5rem; padding-top: 4rem; }
    .service_col { display: contents; }
    .service_card { order: var(--order, 0); }
    .service_col--right { margin-top: 0; } /* 右列の下オフセットはSPでは不要 */
    .service_card__num { left: .6rem; top: -2rem; font-size: 2.4rem; } /* SP: 24px。画像上端から少し上に */
    .service_card__desc { font-size: 1.3rem; } /* SP: 13px（本文尺） */
    .sec_service__progress { display: none; }
}

/* ========================================================
   NEWS
   ======================================================== */
.sec_news { background: var(--bg_gray); padding-top: 9rem; padding-bottom: 15rem; } /* PC: 上90px / 下150px */

/* レイアウト：左（見出し＋円ボタン）／右（一覧）の2カラム。
   ★ fr に minmax(0,...) を付けないと中身でグリッドが暴走する（HANDOFF 6.1）ので必須。 */
.sec_news__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); /* 左:右 ≒ 1:2.2。左を細く一覧を広く。比率はここで調整 */
    gap: 6rem;   /* 左ブロックと一覧の間隔 60px */
    align-items: start;
}
.sec_news__ttl {
    font-size: 5rem;      /* PC: 50px。英語見出し */
    line-height: 1.6;
    letter-spacing: 0.08em;
    color: var(--main);
    margin-bottom: 1.2rem;
}
.sec_news__sub { display: block; font-family:var(--font_base); font-size: 1.8rem; font-weight: 700; color: var(--main); letter-spacing: 0.08em; } /* 18px bold 青 */
/* 円ボタンは sec_news__head 内で右揃え（.btn_circle 既定の margin-left:auto をそのまま使う） */
.sec_news .btn_circle { margin-left: auto; margin-top: 3rem; }
/* MORE文字裏の地色をセクション背景(bg_gray)に合わせて、円線をきれいに途切れさせる */
.sec_news .btn_circle > span:first-child { background: var(--bg_gray); }

/* 一覧：1行 = 日付 / カテゴリ / タイトル。行間に薄い罫線 */
.news_list { border-top: 1px solid var(--border); }
.news_item {
    position: relative;            /* hover ラインの基準 */
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr); /* 日付 / タイトル */
    align-items: center;
    gap: 2rem;
    padding: 1.9rem 1rem;          /* 1行あたり約60px（本文16px＋上下余白）。詰めたいなら数値を上下に */
    border-bottom: 1px solid var(--border);
}
.news_item__date { color: var(--gray); letter-spacing: 0.05em; font-size: 1.5rem; font-family: var(--font_base); } /* 数字も日本語フォントで */
.news_item__cat  { color: var(--gray); font-size: 1.5rem; } /* デザインは枠なしのプレーンなグレー文字 */
.news_item__ttl  {
    font-size: 1.6rem; line-height: 1.4; color: var(--black);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* 長いタイトルは1行で…省略 */
}

/* --- PC専用（SP は下の max-width:768px 側がそのまま当たる） --- */
@media screen and (min-width: 769px) {
    /* NEWS の左右フレーム：左右とも 200px。
       → 見出し左端が SERVICE の左端(左20rem)と揃い、一覧右端は SERVICE 右端(右14rem)より 60px 内側になる。 */
    .sec_news .inner.is_wide {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-left: 20rem;
        padding-right: 20rem;
    }
    /* 行 hover：下線が青く左→右に伸びる（vermicular 風）。色は var(--main)=#2a5194 */
    .news_item::after {
        content: "";
        position: absolute;
        left: 0; bottom: -1px;      /* border-bottom(1px) にぴったり重ねる */
        width: 100%; height: 1px;
        background: var(--main);
        transform: scaleX(0);
        transform-origin: left;     /* 左基点で伸ばす。右→左にしたいなら right に */
        transition: transform .4s ease;  /* 伸びる速さ */
    }
    .news_item:hover::after { transform: scaleX(1); }

    /* 左ブロックを縦フレックスにして、MOREボタンを右寄せ配置
       ※以前はmargin-top:autoでnews_listの下端に揃えていたが、
         投稿数が少ないと一覧が短くなり隙間がべたっと詰まって見えるためautoは撤去。
         投稿数が増減しても見た目が安定するよう、通常のmargin-topで固定間隔にする。 */
    .sec_news__head { display: flex; flex-direction: column; height: 100%; }
    .sec_news .btn_circle { align-self: flex-end; } /* 右寄せ（下端揃えはしない） */

    /* MV 英語タイトルの行間（PCは2行なので行間を広く） */
    .sec_mv__title { line-height: 1.8; }

    /* STRENGTHS：左100px / 右200px フレーム（右端は NEWS の一覧右端と一致） */
    .sec_strengths .inner.is_wide {
        width: 100%; max-width: none; margin-inline: 0;
        padding-left: 6.25%; padding-right: 12.5%;
    }
}

@media screen and (max-width: 768px) {
    .sec_news { padding-block: 7rem; }
    /* 見出し・サブの左端を SERVICE の画像ライン(6%)に揃える */
    .sec_news .inner { width: 88%; }
    /* SP：1カラム。左ブロックに display:contents を当てて中身を昇格させ、
       order で「見出し→サブ→一覧→MORE」に並べ替える（STRENGTHS SP と同手法／HANDOFF 6.8）。
       align-items:stretch を明示（PCグリッドの align-items:start が残ると一覧が横に伸びず罫線が端まで届かない）。 */
    .sec_news__layout { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
    .sec_news__head   { display: contents; }
    .sec_news__ttl    { order: 1; font-size: 3rem; line-height: 1.4; margin-bottom: .8rem; }
    .sec_news__sub    { order: 2; font-size: 1.3rem; font-weight: 400; margin-bottom: 2.4rem; }
    .news_list        { order: 3; }
    .sec_news .btn_circle { order: 4; margin-left: auto; margin-top: 3.5rem; } /* SPはデザイン通り右寄せ。一覧下〜ボタン20px+1.5rem */

    /* お知らせの罫線（一覧の上罫線＋各行の下罫線）を画面端〜端まで引く。
       中身は padding 6% で SERVICE 画像ラインに合わせてインデント。 */
    .news_list { margin-inline: calc(50% - 50vw); }
    /* 行は2段組み：1段目「日付 カテゴリ」を横並び（inline）、2段目にタイトル（block） */
    .news_item {
        display: block;       /* grid を解除。日付・カテゴリは inline で隣接、タイトルは下の行へ */
        padding: 2rem 6%;     /* 罫線は端まで／中身は6%インデント */
    }
    .news_item__date { font-size: 1.3rem; }
    .news_item__cat  { font-size: 1.3rem; margin-left: 1.2rem; } /* 日付との間隔。広げたいなら数値UP */
    .news_item__ttl  { margin-top: .8rem; font-size: 1.3rem; white-space: normal; } /* SPはタイトル折り返しOK */
}

/* ========================================================
   ABOUT US（横スクロール / ドラッグ）
   ======================================================== */
.sec_about { color: var(--white); overflow: hidden; background: linear-gradient(90deg, #1d3356, var(--black)); } /* 左#1d3356→右#0f1418 */
.sec_about .sec_basic__ttl { color: var(--white); } /* 見出しを白に（青背景に青文字で消えてたため明示） */
.about_marquee {
    overflow: hidden;        /* はみ出したカードは隠す */
    padding-left: 25vw;      /* 1枚目を画面の約1/4あけてスタート（PC） */
}
.about_track {
    display: flex;
    gap: 2rem;               /* カード間 20px(2rem)。JS側の GAP と必ず合わせる */
    width: max-content;      /* 中身ぶんの幅にして横に並べる */
    will-change: transform;
}
.about_card {
    width: 36rem;            /* PCカード幅 */
    flex-shrink: 0;
    position: relative;
    display: block;
    color: var(--white);
}
.about_card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}
/* 画像に重ねる黒オーバーレイ（既定20%） */
.about_card__overlay {
    position: absolute; inset: 0; z-index: 1;
    background: rgba(0,0,0,.2);
}
/* about04(拠点一覧) / about05(事業一覧) だけ濃いめ 35% */
.about_card--dark .about_card__overlay { background: rgba(0,0,0,.35); }
/* 画像中央に重ねるテキスト（英語ラベル＋日本語サブ） */
.about_card__body {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: .6rem;
    color: var(--white);
}
.about_card__label { font-size: 2.4rem; letter-spacing: 0.15em; line-height: 1.2; } /* PC: 24px */
.about_card__sub   { font-size: 1.6rem; opacity: .9; }  /* PC: 16px */

/* 両サイドの送り矢印（丸ボタン）。スライダー全体(.about_slider)基準で画像の縦中央に */
.about_slider { position: relative; }
.about_swiper__nav {
    position: absolute; top: 0; bottom: 0;
    margin-block: auto;
    width: 5.2rem; height: 5.2rem;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.6); border-radius: 50%;
    background: rgba(255,255,255,.25); color: var(--white);
    cursor: pointer; z-index: 10;
    transition: background-color .3s ease;
}
.about_swiper__nav:hover { background: rgba(255,255,255,.4); }
.about_swiper__prev { left: 8.5rem; }   /* 1600で左から85px */
.about_swiper__next { right: 8.5rem; }  /* 1600で右から85px */

@media screen and (max-width: 768px) {
    /* SPはマーキー（横スクロール）をやめ、デザイン通り6枚を2列グリッドで表示。
       JS側(initAboutMarquee)も SP では停止している（DOM並べ替えで順が崩れるのを防ぐ）。 */
    .about_marquee { padding-left: 0; overflow: visible; }
    .about_track {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 10px;        /* 行間30px／列間10px */
        width: auto;
        transform: none !important; /* JSマーキーの transform を打ち消し */
    }
    .about_card { width: auto; } /* PCの36rem固定を解除しグリッドに従わせる */
    .about_swiper__nav { display: none; } /* SPは左右ボタン廃止 */
    /* カードを SERVICE 風に1段ずつフェードアップ。body.js_about_ready は JS が SP のとき付与し、
       各カードがビューに入ると is_in が付く（2列なので1行＝2枚が同時に出る＝1段ずつ）。
       出る速さ＝transition／距離＝translateY。JS無効時は隠れたままにならないようガードしている。 */
    body.js_about_ready .about_card { opacity: 0; transform: translateY(4rem); transition: opacity .6s ease, transform .6s ease; }
    body.js_about_ready .about_card.is_in { opacity: 1; transform: none; }
}

/* ========================================================
   CONTACT
   ======================================================== */
.sec_contact { position: relative; padding-block: 10rem; }   /* 上下 100px */
.sec_contact__text { text-align: center; }     /* PCは見出し＋サブを中央 */
.sec_contact .sec_basic__ttl { line-height: 1.6; } /* ボタンに高さで負けないよう詰める */
.sec_contact .sec_basic__sub { color: var(--main); font-size: 1.2rem; font-weight: 700; } /* 青 12px（文字落ち防止で少し小さく） */
/* 円ボタンの余白リセット（.btn_circle の margin-left:auto を打ち消す）。位置はPC/SPで切替。 */
.sec_contact__btn { margin: 0 !important; }
/* PC：見出しは中央のまま、円ボタンだけ section 全幅基準で右端へ絶対配置。
   ★ 後ろの .btn_circle{position:relative} が同詳細度で後勝ちして position を奪うので、ここは
     !important で勝たせる（これを外すとボタンが通常フローに落ちて左上に“迷子”になる）。
     inner には position を付けない＝absolute の基準は sec_contact(relative) 全幅になる。 */
@media screen and (min-width: 769px) {
    /* 右余白(right)を可変に：広い時は 35rem(=1600で右端から350px)、画面が狭くなるほど小さくなり、
       最小 14rem(SERVICEの右枠相当=140px) で止まる。
       中央の見出しとボタンは右端からの距離が一定に保たれる（50vw と連動）ので、狭幅でもめり込まない。
       数値の意味：clamp(最小, 推奨=画面中央50vw−45rem, 最大35rem)。‐45rem を増やすと全体に右へ寄る。 */
    .sec_contact__btn { position: absolute !important; top: 50%; right: clamp(6rem, 50vw - 45rem, 35rem); transform: translateY(-50%); }
}
.sec_contact .btn_circle > span:first-child { background: var(--bg_gray); } /* MORE裏の地色をセクション背景に */
@media screen and (max-width: 768px) {
    .sec_contact { padding-block: 6rem; }
    /* SPは通常フローの flex 横並び（見出し左・円ボタン右）。
       flex が左右に押し合うので、見出しと円ボタンは絶対にめり込まない。 */
    .sec_contact__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.1rem; }
    .sec_contact__text  { text-align: left; }
    .sec_contact__btn   { position: static; transform: none; flex-shrink: 0; } /* 絶対配置をやめてフローへ。円は縮ませない */
}

/* ========================================================
   RECRUIT
   ======================================================== */
.sec_recruit {
    position: relative;
    min-height: 36rem;
    color: var(--white);
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 8rem 0;
}
.sec_recruit__bg { position: absolute; inset: 0; }
.sec_recruit__bg img { width: 100%; height: 100%; object-fit: cover; } /* 既定（中央）に戻し */
.sec_recruit__overlay { display: none; } /* 背景画像が暗いので暗幕はOFF。戻すなら display:block; position:absolute; inset:0; background:rgba(0,0,0,.35) */

/* unsoページ：背景 */
.page_service_unso .sec_recruit__bg img { object-position: 50% 85%; }
.page_service_unso .sec_recruit__overlay {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 24, .7);
}
.sec_recruit__inner {
    position: relative; z-index: 2;
    display: flex; justify-content: space-between; align-items: center;
    gap: 4rem; flex-wrap: wrap;
}
@media screen and (min-width: 769px) {
    /* 見出し左端を NEWS と、ボタン右端を news_list 右端と揃える（左右20rem=200pxフレーム）。
       ※ .inner.is_wide(クラス2つ) に勝つよう詳細度を上げる */
    .sec_recruit__inner.inner.is_wide { width: 100%; max-width: none; margin-inline: 0; padding-left: 20rem; padding-right: 20rem; }
}
.sec_recruit__btn.btn {
    width: 59rem; height: 10rem;          /* 1600で 横590px × 縦100px */
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem; /* 文字とアイコンを中央に。間隔はフッターと同じ .6rem */
    min-width: 0; padding: 0;             /* pt/pl 系ユーティリティの余白を打ち消す */
}
/* jump.svg を文字と同色で出すアイコン（currentColor を mask で着色） */
.btn_jump {
    display: inline-block; width: 1em; height: 1em; flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("../img/cmn/jump.svg") no-repeat center / contain;
            mask: url("../img/cmn/jump.svg") no-repeat center / contain;
}
/* RECRUIT 見出し下の日本語：16px / bold / 行間2 */
.sec_recruit__lead { display:block; font-family:var(--font_base); font-size: 1.6rem; font-weight: 700; line-height: 2; }
.sec_recruit .sec_basic__ttl { color: var(--white); } /* 見出しを白に（暗い背景用。c_white が sec_basic__ttl の青に負けてたので明示） */

@media screen and (max-width: 768px) {
    .sec_recruit__inner { flex-direction: column; text-align: center; }
    /* PCは横590px(59rem)固定だが、SPだと画面幅をはみ出すので画面に合わせる。
       max-width で大きくなりすぎを防止（横幅を変えたいならこの数値を上下に）。
       高さも100px→80pxに少し詰める。 */
    .sec_recruit__btn.btn { width: 100%; max-width: 36rem; height: 8rem; }
}

/* ========================================================
   セクション共通見出し（暫定）
   ======================================================== */
.sec_basic__ttl {
    font-size: 5rem;     /* PC: 50px。NEWS / ABOUT US / RECRUIT / CONTACT の英語見出し */
    line-height: 1.8;    /* 行送り90px ÷ 50px = 1.8 */
    letter-spacing: 0.08em;
    color: var(--main);
}
/* 英語見出しの下の日本語サブ（NEWS/ABOUT/CONTACT など）。18px bold */
.sec_basic__sub { display: block; font-family:var(--font_base); font-size: 1.8rem; font-weight: 700; }

/* 円形ゴーストボタン（OUR STRENGTHS の MORE など）。
   「MORE ■」テキストの右側に細い丸枠が重なるデザイン。色は --main。
   ・丸の大きさ＝下の width/height
   ・丸の位置（右へどれだけ）＝ ::before の right
   ・ホバーで丸が少し拡大 */
.btn_circle {
    position: relative;
    display: flex; align-items: center; gap: .7em;
    width: fit-content;        /* 中身ぶんの幅に縮める */
    margin-left: auto;         /* ← 右寄せ（PC/SP共通）。左寄せに戻すなら auto を消す */
    font-family: var(--font_en);
    color: var(--main);
    font-size: 1.6rem; letter-spacing: .15em; line-height: 1;
    padding: 4.8rem 6rem 4.8rem .5rem;  /* 丸枠(12rem)ぶんの余白 */
}
.btn_circle span { position: relative; z-index: 1; }   /* テキスト・ドットを丸枠より前面に */
/* MORE文字の後ろに地色(白)を敷いて、円の線を文字部分だけ隠す（円に食い込む見た目に） */
.btn_circle > span:first-child { background: var(--white); padding: 0 .4em; }
.btn_circle__dot { width: .7rem; height: .7rem; background: currentColor; display: inline-block; }
.btn_circle::before {
    content: ""; position: absolute; z-index: 0;
    top: 40%; right: 9%; transform: translateY(-50%);  /* 円の位置（指定値）。MOREが中心より下＆食い込む */
    width: 12rem; height: 12rem;
    border: 1px solid currentColor; border-radius: 50%;
    transition: transform .4s ease;
}
.btn_circle:hover::before { transform: translateY(-50%) scale(1.08); }
/* SP：ゴーストボタンの丸を直径90px固定に（全 .btn_circle 共通）。
   丸を小さくしたぶん、文字を収める padding も詰める。数値で微調整可。 */
@media screen and (max-width: 768px) {
    .btn_circle { padding: 3.4rem 5rem 3.4rem .5rem; }
    .btn_circle::before { width: 90px; height: 90px; }
}

/* ========================================================
   固定バナー
   ======================================================== */
.f_banner {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: var(--z_banner);
    width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity .4s ease, visibility .4s ease, transform .4s ease;
    box-shadow: var(--shadow_primary);
}
.f_banner.is_show { opacity: 1; visibility: visible; transform: translateY(0); }
.f_banner.is_hide { display: none; }
.f_banner__link { display: block; }
.f_banner__link img {
    display: block;
    width: 100%;
    height: auto;
}
.f_banner__close {
    position: absolute;
    top: -1.4rem;
    right: -1.4rem;
    width: 2.8rem;
    height: 2.8rem;
    background: var(--black);
    border-radius: 50%;
    transition: background-color .3s;
}
.f_banner__close:hover { background: var(--accent); }
.f_banner__close span {
    position: absolute;
    top: 50%; left: 50%;
    width: 1.2rem;
    height: 1px;
    background: var(--white);
}
.f_banner__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.f_banner__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

@media screen and (max-width: 768px) {
    .f_banner {
        right: 0; left: 0;
        bottom: 0;
        width: 100%;
        transform: translateY(100%);
    }
    .f_banner.is_show { transform: translateY(0); }
    .f_banner__close {
        top: -1.2rem; right: 1rem;
        width: 2.4rem; height: 2.4rem;
    }
}

/* ========================================================
   フッター
   ======================================================== */
.footer .copy { letter-spacing: 0.08em; }

/* ========================================================
   フッター（サイトマップ）
   - 大メニュー：18px 白（.footer__link）
   - 下層メニュー：16px #c9c9c9・先頭にドット（.footer__sublink）
   - SP は下の max-width:768px 側で 1カラム積み・13px
   ======================================================== */
.footer { padding-top: 8rem; }
.footer__inner {
    display: flex;
    flex-wrap: wrap; /* 幅が足りない時はnavをロゴの下に折り返し、隙間ゼロでくっつくのを防ぐ */
    row-gap: 3rem;
    align-items: flex-start;
}
.footer__logo { flex-shrink: 0; margin-top: 4vw; } /* margin-leftはゾーンごとに設定するのでここでは指定しない */
.footer__logo .f_logo { width: 14rem; filter: brightness(0) invert(1); } /* logo.svg を白に反転。幅100px */
.footer__nav {
    display: grid;
    grid-template-columns: repeat(3, max-content);   /* 各カラムは中身ぶんの幅（列幅は自然にバラつく） */
    gap: 4rem 5rem;                                  /* 縦40px / 列間50px。1025px以上では列間だけclampで上書き */
}
.footer__menu { display: flex; flex-direction: column; gap: 2rem; } /* 大メニュー同士の縦間隔 20px */
.footer__link {                                      /* 大メニュー 18px 白 */
    font-size: 1.8rem;
    color: var(--white);
    line-height: 1.4;
    display: inline-flex; align-items: center; gap: .6rem;
}
.footer__ext { height: 1em; width: 1em; filter: invert(79%); } /* 外部リンクアイコン(jump.svg)：文字と同じ高さ(ほぼ正方形)／黒を反転して #c9c9c9 相当に */
.footer__sub { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 1.8rem; } /* 下層リストの開始位置と行間 */
.footer__sublink {                                   /* 下層メニュー 16px #c9c9c9 */
    position: relative;
    padding-left: 1.6rem;
    font-size: 1.6rem;
    color: #c9c9c9;
    line-height: 1.4;
}
.footer__sublink::before {                           /* 行頭のドット */
    content: ""; position: absolute; left: 0; top: .7em;
    width: 5px; height: 5px; border-radius: 50%; background: #c9c9c9;
}
.footer__copy {                                      /* SNSアイコン＋コピーライト：上罫線・縦積み中央揃え */
    margin-top: 7rem;
    border-top: 1px solid rgba(255,255,255,.15);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 0;         /* 罫線〜アイコン：2rem、コピーライト下：2rem */
    gap: 1rem;               /* アイコン列〜コピーライト：1rem */
    box-sizing: border-box;
}
.footer__copy .copy { font-size: 1.3rem; color: rgba(255,255,255,.7); letter-spacing: .08em; }

/* SNS アイコン列 */
.footer__sns { display: flex; align-items: center; gap: 2.5rem; }
/* img[src*=".svg"]{width:100%} に勝つよう2段セレクタで指定 */
.footer__sns .footer__sns__icon        { width: 3.5rem; height: auto; } /* Instagram: 35px */
.footer__sns .footer__sns__icon--yt    { width: 3.7rem; }               /* YouTube:   37px */

@media screen and (min-width: 769px) {
    .footer__link, .footer__sublink { white-space: nowrap; } /* 長い事業名（「建設資材販売事業（総合商社）」）で内部改行させない */
}

/* 1025px以上：ロゴ左・ナビ右の横1列。余白はclamp()で最低保証しつつ画面が狭いほど圧縮する */
@media screen and (min-width: 1025px) {
    .footer__nav { margin-left: auto; }
    .footer__logo { margin-left: clamp(2rem, 7vw, 10rem); }
    .footer__col:first-child { margin-right: clamp(1rem, 3vw, 4rem); }
    .footer__nav { gap: 4rem clamp(2rem, 5vw, 5rem); }
}

/* 769〜1024px：ロゴ＋メニューを縦積み。ロゴは左ベタ付け、メニュー3列はspace-betweenで均等配置 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .footer__inner { flex-direction: column; }
    .footer__logo { margin-left: 0; }
    .footer__nav {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }
    .footer__col:first-child { margin-right: 0; }
}

@media screen and (max-width: 768px) {
    .footer { padding-top: 5rem; }
    .footer__inner { flex-direction: column; gap: 5rem; padding-bottom: 0; align-items: stretch; } /* stretch必須：基底のflex-startが残ると nav が縮んで罫線が端まで届かない。padding-bottom:0＝最後の項目とコピーライトの余白を他の行と均等に */
    /* SPは footer の inner を全幅にして、メニュー区切り罫線を画面端〜端まで素直に引く
       （中身は各 li の padding 6% でインデント）。 */
    .footer .inner.footer__inner { width: 100%; } /* 罫線は全幅（左右端まで） */
    /* ロゴを中央に */
    .footer__logo { width: 100%; margin-top: 0; margin-left: 0; display: flex; justify-content: center; }
    .footer__logo .f_logo {
        width: 11rem;
    }
    .footer__nav { grid-template-columns: 1fr; gap: 0; margin-left: 0; }
    .footer__col:first-child { margin-right: 0; }
    .footer__menu { gap: 0; }
    /* SPは各トップ項目を罫線で区切って積む。罫線は白で画面端〜端、中身は6%インデント。
       白の濃さは rgba の透明度で調整可。 */
    .footer__menu > li {
        border-top: 1px solid rgba(255,255,255,.6); /* 白の濃さは透明度で調整 */
        padding: 1.5rem 6%;                           /* 罫線は端まで／中身は6%インデント */
    }
    /* 採用情報などの大メニューが折り返さないように（外部リンクアイコンで改行されるのを防止） */
    .footer__link, .footer__sublink { white-space: nowrap; }
    .footer__link { font-size: 1.3rem; }
    .footer__sub { margin-top: 1.6rem; gap: 1.4rem; }
    .footer__sublink { font-size: 1.3rem; }
    /* コピーライト上罫線も白に */
    .footer__copy { margin-top: 0; padding: 2rem 0; border-top-color: rgba(255,255,255,.6); } /* 罫線は全幅 */
    .footer__copy .copy { font-size: 1.1rem; }
}

/* ========================================================
   SP（スマホ）専用フォントサイズまとめ
   ※このサイトは最小スマホ幅(375px)あたりで 1rem≒10px になるよう設計されているため、
     ここでも「px ÷ 10 = rem」で指定しています（例：30px → 3rem）。
   ======================================================== */
@media screen and (max-width: 768px) {
    /* MVの英語（サブ扱い）。原寸17.6px÷2=8.8pxは小さすぎるため、読みやすさ優先で10pxに。
       もっと小さく/大きくしたいなら下の数値を調整してください */
    .sec_mv__title { font-size: 1rem; padding-top: 2rem; }
    .sec_mv__title_line { display: inline; overflow: visible; } /* SPは小さいので改行せず1行に伸ばす */
    /* MV見出しサブの日本語「8つの事業…」：16px bold */
    .sec_mv__lead  { font-size: 1.6rem; font-weight: 700; padding-top: 1.4rem; line-height: 1.8; } /* PCの20px boldを少し小さくして詰める */

    /* 各セクションの英語見出し：30px */
    .strengths_text__ttl,
    .sec_service__ttl,
    .sec_basic__ttl { font-size: 3rem; }

    /* 見出しサブ／本文の日本語：13px regular（PCの18px boldを上書き） */
    .strengths_text__sub,
    .sec_service__sub,
    .sec_basic__sub { font-size: 1.3rem; }

    /* 画像にかかる英語（SERVICE 01 / GREETING など）：24px */
    .about_card__label { font-size: 2rem; }   /* service側は .service_card__num のSP指定済み */

    /* SERVICEの小見出し日本語：17px */
    .service_card__ttl { font-size: 1.7rem; }

    /* RECRUIT見出し下の日本語：13px（bold・行間2は元の指定を継承） */
    .sec_recruit__lead { font-size: 1.3rem; font-weight: 400; }

    /* ABOUTの英語下の日本語：13px（本文と同じ） */
    .about_card__sub { font-size: 1.3rem; }

    .sec_contact .sec_basic__sub { font-size: 1.2rem; font-weight: 400; letter-spacing: 0.05em;} /* 青文字のサブも12pxに */
}

/* ========================================================
   下層ページ共通 (page_lower)
   ======================================================== */
.page_lower { padding-top: 0; } /* ヘッダー高さ分の上余白 */

.lower_main {
    background: var(--white);
}

/* MV パターンA のページだけ、MV下のコンテンツ背景をグレーに（about/service トップなど） */
.lower_main:has(.mv_pattern_a) {
    background: var(--bg_gray);
}

/* ========================================================
   MV セクション（パターンA：about など／中央寄せ・縦積み）
   ※ 仮実装。数値・余白は画像を見ながら微調整する前提
   ======================================================== */
.mv_pattern_a .mv_bg {
    height: 55rem; /* 550px（PC） */
    background-size: cover;
    background-position: top;
    background-attachment: scroll;
    position: relative;
}

.mv_pattern_a .mv_bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.45) 100%);
    z-index: 1;
}

/* service トップだけオーバーレイを薄めに（body_class の page_service で絞る） */
.page_service .mv_pattern_a .mv_bg::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.mv_pattern_a .mv_content {
    position: absolute;
    inset: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white);
    z-index: 2;
}

.mv_pattern_a .mv_ttl_ja {
    font-family: var(--font_base);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.mv_pattern_a .mv_ttl_en {
    font-family: var(--font_en);
    font-size: 4rem; 
    font-weight: 400;
    letter-spacing: 0.15em;
    text-shadow: var(--text_shadow_primary);
}

@media screen and (max-width: 768px) {
    .mv_pattern_a .mv_bg {
        height: 27.5rem; 
    }
    .mv_pattern_a .mv_ttl_ja {
        font-size: 1.3rem; 
    }
    .mv_pattern_a .mv_ttl_en {
        font-size: 2.5rem; 
    }
}

/* ========================================================
   MV セクション（パターンB：service下層など／左寄せ・3段組）
   構成：英字ラベル（小）→ 日本語タイトル（大）→ 可変サブテキスト
   ※ 仮実装。数値・余白は画像を見ながら微調整する前提
   ======================================================== */
.mv_pattern_b .mv_bg {
    height: 70rem; /* 700px（PC） */
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    position: relative;
}

.mv_pattern_b .mv_bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 100%);
    z-index: 1;
}

.mv_pattern_b .mv_content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    width: 90%;
    max-width: 120rem; /* 1200px。.inner.is_wideと同じ幅に揃える */
    margin-inline: auto;
    color: var(--white);
    z-index: 2;
}

/* 英字ラベル（小さい方。例：CONSTRUCTION） */
.mv_pattern_b .mv_ttl_en {
    font-family: var(--font_en);
    font-size: 2.4rem;
    font-weight: 400;
    letter-spacing: 0.33em;
}

/* 日本語タイトル（大きい方。例：建築事業）：ヒラギノ明朝W6の代替でNoto Serif JP
   ※余白は原則「後ろの要素のmargin-top」で付ける（中見出しの有無に関わらず崩れないように） */
.mv_pattern_b .mv_ttl_ja {
    font-family: var(--font_mincho);
    font-size: 7rem; /* 70px（PC） */
    font-weight: 600;
    letter-spacing: 0.15em;
    text-shadow: var(--shadow_primary);
    margin-top: 0.8rem;
    margin-left: -0.5rem; /* 5px。inner左端からだけ日本語見出しをちょっとはみ出させる */
}

/* 中見出し */
.mv_pattern_b .mv_category {
    font-family: var(--font_base);
    font-size: 3rem;
    font-weight: 400;
    margin-top: 2rem;
}

/* サブテキスト（事業ごとに変わる可変部分。<br>で改行を制御） */
.mv_pattern_b .mv_sub {
    font-family: var(--font_base);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.6;
    margin-top: 2rem;
    margin-left: -0.5rem;
}

@media screen and (max-width: 768px) {
    .page_service_reform .mv_pattern_b .mv_bg {
        background-position: left center; 
    }
    .mv_pattern_b .mv_bg {
        height: 52rem;
    }
    .mv_pattern_b .mv_content {
        top: 0;
        justify-content: flex-end; /* SPは下寄せのまま */
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding: 0 2rem 9.5rem 1rem;
    }
    .mv_pattern_b .mv_ttl_en {
        font-size: 1.7rem; /* 17px（SP） */
    }
    .mv_pattern_b .mv_ttl_ja {
        font-size: 4rem; /* 40px（SP） */
        margin-top: 0.5rem;
        margin-left: 0; /* SPは左べたづけなのでPCのはみ出し分を打ち消す */
    }
    .mv_pattern_b .mv_category {
        font-size: 2rem; /* 20px（SP） */
        margin-top: 1.2rem;
    }
    .mv_pattern_b .mv_sub {
        font-size: 1.5rem; /* 15px（SP） */
        margin-top: 0.6rem;
        margin-left: 0;
    }
}

/* ========================================================
   MV セクション（パターンE：kensetsu.php など／パターンBと同じ左寄せ3段組＋本文段落だが、
   MVの高さがパターンBと異なるページ専用。中身の構成はパターンBと共通なので、
   ここでは mv_bg の高さと mv_text（本文段落）だけを持たせ、他の見出し系はパターンBの値をそのまま踏襲。
   ※ SP側はカンプが無いため、暫定的にパターンBのSP値をそのまま流用（カンプが来たら要調整）。
   ======================================================== */
.mv_pattern_e .mv_bg {
    height: 90rem; /* 900px（PC） */
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    position: relative;
}

.mv_pattern_e .mv_bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 100%);
    z-index: 1;
}

/* yusou.php MV 専用：暗幕フィルター濃度を個別調整可能 */
.page_service_unso .mv_pattern_e .mv_bg::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.4) 100%);
}

.mv_pattern_e .mv_content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    width: 90%;
    max-width: 120rem;
    margin-inline: auto;
    color: var(--white);
    z-index: 2;
    bottom: 15rem;
}

.mv_pattern_e .mv_ttl_en {
    font-family: var(--font_en);
    font-size: 2.4rem;
    font-weight: 400;
    letter-spacing: 0.33em;

}

.mv_pattern_e .mv_ttl_ja {
    font-family: var(--font_mincho);
    font-size: 7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-shadow: var(--shadow_primary);
    margin-top: 1rem;
    margin-left: -0.5rem;
    line-height: 1;
}

.mv_pattern_e .mv_category {
    font-family: var(--font_base);
    font-size: 3rem;
    font-weight: 400;
    margin-top: 6rem;
}

/* 本文段落 */
.mv_pattern_e .mv_text {
    max-width: 55rem;
    margin-top: 1.5rem;
    line-height: 2.25;
    text-shadow: var(--text_shadow_primary);
}

@media screen and (max-width: 768px) {
    .mv_pattern_e .mv_bg {
        height: 52rem; /* 暫定：パターンBのSP値を流用。SPカンプが来たら調整 */
    }
    .mv_pattern_e .mv_content {
        top: 0;
        bottom: 0;
        justify-content: flex-end;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding: 0 2rem 9.5rem 1rem;
    }
    .mv_pattern_e .mv_ttl_en {
        font-size: 1.7rem;
    }
    .mv_pattern_e .mv_ttl_ja {
        font-size: 4rem;
        margin-top: 0.5rem;
        margin-left: 0;
    }
    .mv_pattern_e .mv_category {
        font-size: 2rem;
        margin-top: 1.2rem;
    }
    .mv_pattern_e .mv_text {
        font-size: 1.3rem;
        margin-top: 1.6rem;
        line-height: 1.75;
    }
}

/* ========================================================
   MV セクション（パターンC：privacy など）
   ======================================================== */
.mv_section.mv_pattern_c {
    position: relative;
}

.mv_pattern_c .mv_bg {
    height: 30rem; /* 300px（PC） */
    background-size: cover;
    background-position: top;
    background-attachment: scroll;
    position: relative;
}

.mv_pattern_c .mv_bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.mv_pattern_c .mv_content {
    position: absolute;
    inset: 0;
    top: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white);
    z-index: 2;
}

.mv_pattern_c .mv_ttl_ja {
    font-family: var(--font_base);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.mv_pattern_c .mv_ttl_en {
    font-family: var(--font_en);
    font-size: 4rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-shadow: var(--text_shadow_primary);
}


@media screen and (max-width: 768px) {
    .mv_pattern_c .mv_bg {
        height: 25rem; /* 250px（SP） */
    }
    .mv_pattern_c .mv_content {
        top: 0;
    }
    .mv_pattern_c .mv_ttl_ja {
        font-size: 1.3rem;
    }
    .mv_pattern_c .mv_ttl_en {
        font-size: 2.5rem;
    }
}

/* ========================================================
   ページコンテンツセクション
   ======================================================== */
.page_section {
    margin-top: 15rem;
}

/* MV パターンA配下のページの page_section 上余白（page_section--sm_mtが付いている場合はそちらを優先） */
.lower_main:has(.mv_pattern_a) .page_section:not(.page_section--sm_mt) {
    margin-top: 12rem;
}

/* 要素同士の余白／ヒーロー(MV)直後など、大区切りより狭い上余白にしたい場合、対象にこのclassを追加 */
.page_section--sm_mt {
    margin-top: 12rem;
}

.section_ttl {
    font-size: 3rem;
    font-weight: 700;
    color: var(--black);
    border-bottom: solid 1px var(--gray-mid); /* c-border-title02(style_m.css)は#2a5194だが、カンプに忠実な既存のグレーを維持 */
    padding: 0 0 23px;
    position: relative;
    line-height: 1.2;
}

.section_ttl::after {
    content: '';
    width: 200px; /* テキスト幅に追従させず固定幅に */
    height: 5px;
    background: var(--main);
    position: absolute;
    bottom: 0;
    left: 0;
}

/* ボタン */
.contact_btn_wrap {
    margin: 4rem 0;
    display: flex;
    flex-direction: column; /* ボタンが複数ある場合に縦積みできるように */
    align-items: flex-start; /* 既定は左寄せ（privacy.php用）。センターにしたいページは.contact_btn_wrap--centerを足す */
    gap: 1.5rem;
}

/* センター寄せにしたいページ用の修飾クラス（HTML側で class="contact_btn_wrap contact_btn_wrap--center" のように追加） */
.contact_btn_wrap--center {
    align-items: center;
}

/* 右寄せにしたいページ用の修飾クラス（HTML側で class="contact_btn_wrap contact_btn_wrap--right" のように追加）。
   .page_service .contact_btn_wrap{align-items:center}（詳細度0,2,0）に勝つよう、こちらも.page_serviceでスコープして詳細度を揃えている。 */
.page_service .contact_btn_wrap.contact_btn_wrap--right {
    align-items: flex-end;
}

.contact_btn_wrap .btn {
    width: 450px;
    height: 70px;
    padding: 0;
    display: flex; /* ボタン内テキストを中央揃えにするため */
    align-items: center;
    justify-content: center;
    font-size: 1.8rem; /* 18px */
}

/* ============ 四角ボタン（.btn） ============
   色は必ず修飾クラスで指定する。サイト全体で使われているのは以下の2パターンのみ：
   ・.btn--black（優先・汎用）… 黒背景×白文字。外部リンクボタンやお問い合わせボタンなど、ほとんどの場所で使用。
   ・.btn--outline_main（RECRUIT・完了ページ等）… 白背景×メインカラー(青)文字＋枠。hoverで色反転。
   .btn単体には色を持たせず、必ずどちらかの修飾クラスを一緒に付けること。 */
.btn {
    display: inline-block;
    padding: 1.2rem 2.4rem;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 0;
    transition: opacity 0.3s, background-color 0.3s, color 0.3s;
}

.btn:hover {
    opacity: 0.85;
}

.btn--black {
    background-color: var(--black);
    color: var(--white);
    border-color: var(--black);
}

.btn--black:hover {
    opacity: 1; /* .btn:hover{opacity:.85}とa:hover{opacity:.7}を打ち消し、色の反転だけで見せる */
    background-color: var(--white);
    color: var(--black);
}

.btn--outline_main {
    background-color: var(--white);
    color: var(--main);
    border-color: var(--main);
}

.btn--outline_main:hover {
    opacity: 1;
    background-color: var(--main);
    color: var(--white);
}

/* .trigger.fade_up の transition(0,2,0) が .btn の transition を丸ごと上書きし、
   background-color/color の変化が一瞬で切り替わっていたため、詳細度を上げて両方残す */
.sec_recruit__btn.btn.trigger {
    transition: opacity .9s ease, transform .9s ease, background-color .3s ease, color .3s ease;
}

.p-service-list01__btn {
    border: 1px solid #000;
    transition: background-color .3s ease, color .3s ease;
}
.p-service-list01__btn:hover {
    opacity: 1;
    background: #fff;
    color: #000;
}

/* MV パターン A・B・C のとき、main に下余白。
   パターンE（.sec_contactを内包する前提のページ専用）はここに含めない：
   CONTACTセクション側で既に上下の余白を持っているため、含めると二重になる。 */
.lower_main:has(.mv_pattern_a),
.lower_main:has(.mv_pattern_b),
.lower_main:has(.mv_pattern_c) {
    padding-bottom: 15rem;
}

/* kentiku/leisureはmv_pattern_dへ移行済みだが、末尾が.sec_contactではなく
   .contact_btn_wrapで終わる作りのため、上記ルールから外れた分をbody_class指定で補う。 */
.page_service_reform .lower_main,
.page_service_leisure .lower_main {
    padding-bottom: 15rem;
}

/* ========================================================
   MV パターンD 共通の中見出し（.mv_category）
   現在はleisure（クラブ名一覧）のみが使用。kentiku・leisureの
   メインコピーは.mv_subに統一したため、こちらは小さめサイズで定義。
   ======================================================== */
.mv_pattern_d .mv_category {
    font-family: var(--font_base);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.6;
    margin-top: 2rem;
}

@media screen and (max-width: 768px) {
    .mv_pattern_d .mv_category {
        font-size: 1.5rem;
        margin-top: 0.6rem;
    }

    /* kentiku固有：SP時の画像トリミング位置調整（旧mv_pattern_b用ルールの移植） */
    .page_service_reform .mv_pattern_d .mv_bg::before {
        background-position: left center;
    }
}

/* unso固有：暗幕を濃いめに（旧 .mv_pattern_e .mv_bg::before の移植）。
   mv_pattern_dには基本の暗幕オーバーレイが無いため、unsoページ専用の自己完結ルールとして追加。 */
.page_service_unso .mv_pattern_d .mv_bg {
    position: relative;
}

.page_service_unso .mv_pattern_d .mv_bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .4) 100%);
}

.page_service_unso .mv_pattern_d .mv_content {
    position: relative;
    z-index: 2;
}

/* unso固有：「主な運べる資材」削除に伴い、01の直後に来た#section02の上余白（.page_sectionの基本値）を詰める */
.page_service_unso #section02 {
    margin-top: 0;
}

/* unso：01の下「車両・機材一覧」（infrastructureの施工例と同じ形式）。余白は数値調整可 */
.unso_vehicles {
    padding: 8rem 0 10rem;
}
.page_service_unso .service_contents_grid .service_contents_card__ttl {
    margin-top: 1.5rem;
}
.page_service_unso .service_contents_card__desc {
    margin-top: .5rem;
}
@media screen and (max-width: 768px) {
    .unso_vehicles {
        padding: 5rem 0 7rem;
    }
    .unso_vehicles .service_contents_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .page_service_reform .lower_main,
    .page_service_leisure .lower_main {
        padding-bottom: 9rem;
    }
}

/* ============ about トップ（グループについて6カード） ============ */
/* PC: 3列 / SP: 2列。fr には必ず minmax(0, ...) を付ける（画像の aspect-ratio で暴走するのを防ぐ） */
.about_group_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5rem 3.5rem;
    margin-top: 6rem;
}

.about_group_card {
    display: block; /* ホバーはグローバルの a:hover{opacity:.7} に任せる */
}

/* カンプ実測 377×300px（縦横比 377:300）。近い既定比率が無いため実測値をそのまま指定 */
.about_group_card__img {
    width: 100%;
    aspect-ratio: 377 / 300;
    object-fit: cover;
    display: block;
}

.about_group_card__ttl {
    margin-top: 2.5rem;
    font-size: 1.8rem;   /* PC: 18px */
    font-weight: 700;
    color: var(--black);
}

.about_group_card__desc {
    margin-top: 1.5rem;
    font-size: 1.6rem;   /* PC: 16px */
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--black);
}

@media screen and (max-width: 768px) {
    .about_group_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5rem 1.5rem; /* 行間50px／列間15px */
        margin-top: 3rem;
    }
    .about_group_card__ttl {
        margin-top: 2rem;
        font-size: 1.4rem; /* SP: 14px */
    }
    .about_group_card__desc {
        margin-top: 1rem;
        font-size: 1.3rem; /* SP: 13px */
    }
}

/* ============ service トップ（8つの事業カード） ============ */
/* PC: 3列 / SP: 2列。8枚なので最終行は余って空欄ができるが仕様通り（grid-auto-flowの調整は不要） */
.service_contents_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5rem 3.5rem; /* about と同じ間隔感 */
    margin-top: 6rem;
}

.service_contents_card {
    display: block; /* ホバーはグローバルの a:hover{opacity:.7} に任せる */
}

/* 番号（01〜08）を画像の左下に重ねるための基準 */
.service_contents_card__img_wrap {
    position: relative;
}

/* about_group_card__img と同じ比率（377:300）を流用 */
.service_contents_card__img {
    width: 100%;
    aspect-ratio: 377 / 300;
    object-fit: cover;
    display: block;
}

/* TOP page の .service_card__num と同じドロップシャドウを流用（写真の上でも読めるよう薄い影） */
.service_contents_card__num {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    font-family: var(--font_en); /* OPTIBankGothic */
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1; /* 余分な行送りを消してガタつきを防ぐ */
    color: var(--white);
    text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

.service_contents_card__ttl {
    margin-top: 3rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--black);
}

.service_contents_card__desc {
    margin-top: 1rem;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: normal;
    color: var(--black);
}

@media screen and (max-width: 768px) {
    .service_contents_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5rem 1.5rem;
        margin-top: 3rem;
    }
    .service_contents_card__num {
        left: 0.5rem;
        bottom: 0.5rem;
        font-size: 1.6rem; /* SP: 16px */
    }
    .service_contents_card__ttl {
        margin-top: 2rem;
    }
    .service_contents_card__desc {
        margin-top: 1rem;
    }
}

/* ============ companies ページ ============ */

/* 黒いナビゲーション帯 */
/* ============ about セクション共通ナビゲーション ============ */
.about_nav {
    background-color: var(--black);
}

.about_nav__list {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 3rem;
    padding: 1rem 2rem;
    overflow-x: auto;
    height: 8rem;
    align-items: center;
}

.about_nav__link {
    color: var(--white);
    font-size: 1.6rem;
    white-space: nowrap;
    position: relative;
}

.about_nav__link.is_active::after {
    content: '・';
    color: var(--white);
    position: absolute;
    bottom: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
    .page_lower { padding-top: 0; }
    .page_section { margin-top: 9rem; }
    .lower_main:has(.mv_pattern_a) .page_section:not(.page_section--sm_mt) { margin-top: 7.2rem; }
    .page_section--sm_mt { margin-top: 7.2rem; }
    .section_ttl {
        font-size: 2rem;
        padding: 0 0 1.6rem;
    }
    .section_ttl::after {
        width: 13rem;
        height: 2px;
    }
    .btn {
        padding: 1rem 2rem;
        font-size: 1.4rem;
    }

    /* about ナビゲーション SP版 */
    .about_nav__link {
        font-size: 1.3rem;
    }

    /* MV パターン A・B・C のとき、main に下余白（SP版） */
    .lower_main:has(.mv_pattern_a),
    .lower_main:has(.mv_pattern_b),
    .lower_main:has(.mv_pattern_c) {
        padding-bottom: 9rem;
    }

    /* about ナビゲーション SP版（3:3 縦 2 列） */
    .about_nav__list {
        flex-wrap: wrap;
        gap: 2rem 1rem;
        height: auto;
        padding: 1.5rem 0.5rem;
    }

    .about_nav__list li {
        flex: 0 0 calc((100% - 2rem) / 3);
        text-align: center;
    }

    .about_nav__link {
        font-size: 1.3rem;
    }

    .about_nav__link.is_active::after {
        bottom: -1.5rem;
    }

    /* お問い合わせボタン SP版 */
    .contact_btn_wrap .btn {
        width: 100%;
        height: 8rem;
        font-size: 1.4rem; /* 14px。ベース側のfont-size:1.8remと詳細度が同じ(.contact_btn_wrap .btn)なので、SP側でも明示しないと勝てない */
    }
}

/* service下層ページ専用（kentiku・leisureなど、page_serviceクラスのページ全般で共有） */
.page_service .contact_btn_wrap {
    margin-top: 6rem;
    align-items: center; /* service下層はセンター寄せのまま維持（ベース側をprivacy用に左寄せへ変更したため個別に指定） */
}

.page_service .contact_btn_wrap .btn {
    width: 500px;  /* 450px→500px */
    height: 60px;  /* 70px→60px */
    display: inline-flex; /* ボタン内テキストを中央揃えにするため（センター寄せ自体は親.contact_btn_wrapのalign-itemsで制御） */
}

@media screen and (max-width: 768px) {
    .page_service .contact_btn_wrap {
        margin-top: 4rem;
    }

    .page_service .contact_btn_wrap .btn {
        width: 100%;   /* inner基準の100%。共通のSP版ルールと同じ */
        height: 4.5rem; /* 45px */
    }
}

/* 会社情報セクション */
.company_section {
    margin-top: 3rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.company_section_ttl {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--black);
    margin-top: 0;
}

.company_section_ttl::before {
    content: '■ ';
    margin-right: 0.25rem;
}

/* 会社情報リスト */
.company_info {
    display: grid;
    grid-template-columns: 20% 1fr;
    column-gap: 0;
    row-gap: 0;
    margin-top: 1.5rem;
}

.company_info dt {
    font-weight: 700;
    color: var(--black);
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 2rem;
}

.company_info dd {
    color: var(--black);
    margin: 0;
    line-height: 1.8;
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 0;
}

/* 所在地・TELなど、拠点ごとに「ラベル：値」が複数並ぶ欄用のリスト */
.addr_list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.addr_list li {
    display: flex;
    gap: 0.5rem;
}

.addr_list li + li {
    margin-top: 0.4rem;
}

.addr_list__label {
    flex: 0 0 13rem; /* ラベル部分の幅。長い拠点名があるならここを増やす */
    white-space: nowrap;
}

/* 会社情報セクション SP版（上書き） */
@media screen and (max-width: 768px) {
    .company_section_ttl {
        font-size: 1.6rem;
    }
    .company_info {
        grid-template-columns: 10rem 1fr;
    }
    .company_info__pad {
        display: none;
    }
    /* addr_list：SPではラベルの下に値を改行して表示 */
    .addr_list li {
        flex-direction: column;
        gap: 0;
    }
    /* column方向だと flex-basis が「高さ」指定になってしまうのでリセット */
    .addr_list__label {
        flex: 0 0 auto;
    }
    /* TEL欄（addr_list--tel）はSPでも改行せず横並びのまま */
    .addr_list--tel li {
        flex-direction: row;
        gap: 0.5rem;
    }
    .addr_list--tel .addr_list__label {
        flex: 0 0 11rem;
    }
}

/* ========================================================
   プライバシーポリシーセクション
   ======================================================== */
.policy_intro {
    margin-top: 2rem;
    font-size: 1.6rem;
    line-height: 1.8;
}

.policy_intro p {
    color: var(--black);
}

.policy_section {
    margin-top: 4rem;
}

.policy_section_ttl {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--black);
    margin-top: 1.5rem;
    display: flex; /* ::beforeの■をbaselineでなく縦中央に揃えるため */
    align-items: center;
}

.policy_section_ttl::before {
    content: '■';
    font-size: 0.7em; /* ■ 単体のサイズ。小さくしたければこの数値を下げる */
    margin-right: 1rem;
}

/* 数字箇条 */
.policy_list--numbered {
    font-weight: normal;
}

/* 1階層目の数字リスト（ボールド） */
.policy_section > .policy_list--numbered {
    font-weight: 700;
}

/* 2階層目以降の数字リスト marker（黒） */
.policy_list .policy_list--numbered li::marker {
    color: var(--black);
    font-weight: normal;
}

.policy_section p {
    font-size: 1.6rem;
    color: var(--black);
    line-height: 1.8;
    margin-top: 1rem;
}

/* 箇条書き */
.policy_list {
    font-size: 1.6rem;
    color: var(--black);
    margin-left: 4rem;
    margin-top: 1.5rem;
}

/* ネストされた箇条書き（1段階） */
.policy_list .policy_list {
    margin-left: 0;
    margin-top: 2rem;
    padding-left: 4rem;
}

/* ネストされた箇条書き（2段階以上） */
.policy_list .policy_list .policy_list {
    padding-left: 4rem;
}

.policy_list li {
    line-height: 1.5;
    letter-spacing: 0.2rem;
}

/* ========================================================
   プライバシーセクション SP版（上書き）
======================================================== */
@media screen and (max-width: 768px) {
    .policy_section_ttl {
        font-size: 1.7rem;
        margin-top: 1rem;
    }
    .policy_intro p,
    .policy_section p {
        font-size: 1.3rem;
    }
    .policy_list {
        font-size: 1.3rem;
        margin-left: 1.7rem;
    }
    .policy_list .policy_list {
        padding-left: 1rem;
    }
    .policy_list .policy_list .policy_list {
        padding-left: 2rem;
    }
}

/* ネストされたリストの直後の li（override） */
.policy_list li:has(> .policy_list) + li {
    margin-top: 2rem;
}

/* ドット箇条 */
.policy_list--dot {
    list-style-type: disc;
    list-style-position: outside;
    font-weight: normal;
}

.policy_list--dot li::marker {
    color: var(--main);
    font-weight: 700;
}

/* 数字箇条（上層・太字） */
.policy_list--numbered {
    list-style-type: decimal;
    list-style-position: outside;
}

/* ============ 事業詳細ページ 共通パーツ（MVパターンB配下）============
   kentiku.php で初採用。今後の7事業ページ（kensetsu/saiseki/concrete/recycle/
   infrastructure/yusou/leisure）でもこの構成をコピーして使う想定なので、
   事業固有の名前にせず "service_detail_*" の汎用クラスにしてある。 */

/* イントロ（グレー背景・中央寄せ）
   ※ページによっては白背景にしたい場合があるため、HTML側で.bg_whiteを併用して上書きする。
   .service_detail_intro{background-color:bg_gray}と.bg_white{background-color:white}は詳細度が同じで
   CSS内の出現順（.bg_whiteが先／.service_detail_introが後）だとbg_grayが後勝ちしてしまうため、
   結合セレクタで明示的に勝たせる。 */
.service_detail_intro {
    background-color: var(--bg_gray);
    padding: 9rem 0 11rem;
    text-align: center;
}
.service_detail_intro.bg_white {
    background-color: var(--white);
}

.service_detail_intro__ttl {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--black);
}

.service_detail_intro__txt {
    margin: 3rem auto 0;
    /* max-width は指定しない：文中の<br>で改行位置を決めているので、
       幅を狭めると<br>より先に自動折り返しが入ってしまう */
    font-size: 1.6rem;
    line-height: 2;
    color: var(--black);
}

@media screen and (max-width: 768px) {
    .service_detail_intro {
        padding: 4rem 0 5rem;
    }
    .service_detail_intro__ttl {
        font-size: 2.3rem;
        text-align: center;
        letter-spacing: 0.01em;
    }
    .service_detail_intro__txt {
        margin-top: 2rem;
        font-size: 1.3rem;
        line-height: 1.9;
        text-align: left;
    }
}

/* 特徴ブロック（画像＋テキストの2カラム） */
.service_detail_feature {
    display: grid;
    grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
    gap: 0 4rem;
    align-items: start;
    margin-top: 4rem;
}

.page_service_kensetsu .service_detail_feature {
    gap: 0 3rem;
}

.service_detail_feature__img {
    width: 98%;
    aspect-ratio: 530 / 390;
    object-fit: cover;
    display: block;
}

/* kensetsuページだけ画像幅を90%に */
.page_service_kensetsu .service_detail_feature__img {
    width: 90%;
}

/* concreteページも同様に画像幅90%に */
.page_service_concrete .service_detail_feature__img {
    width: 90%;
}

/* kensetsuページ section02 の導入文（.pt50=5rem）。
   style_m.css側にも同じ5rem→SPの変換ユーティリティが無かったため、暫定で3remに設定 */
@media screen and (max-width: 768px) {
    .page_service_kensetsu .pt50 {
        padding-top: 4rem;
    }
}

.service_detail_feature__body {
    padding-top: 2rem;
}

.page_service_kensetsu .service_detail_feature__body {
    padding-top: 0;
}

.service_detail_feature__ttl {
    font-size: 2rem;
    font-weight: 700;
    color: var(--black);
}

.service_detail_feature__txt {
    margin-top: 2rem;
    font-size: 1.6rem;
    line-height: 2;
    color: var(--black);
    padding-left: 0; /* 画像の右側に余白を付ける（画像が小さい場合は padding-left が効かないので、gap ではなく body 側に余白を付ける） */
}

@media screen and (max-width: 768px) {
    .service_detail_feature {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 2rem;
    }
    .service_detail_feature__img,
    .page_service_kensetsu .service_detail_feature__img,
    .page_service_concrete .service_detail_feature__img {
        width: 100%;
    }

    .service_detail_feature__ttl {
        font-size: 1.5rem;
    }
    .service_detail_feature__txt {
        margin-top: 1rem;
        font-size: 1.3rem;
        line-height: 2;
        padding-left: 0;
    }
}

/* 特徴ブロックの中にボタン(.contact_btn_wrap)を取り込むパターン（golfセクション等）
   PCのみ：.contact_btn_wrap を service_detail_feature の grid に3つ目の子として参加させ、
   テキスト側（2列目）の下に配置する。SPは特に触らず、通常の縦積み（1カラム）のまま。 */
@media screen and (min-width: 769px) {
    .service_detail_feature--with_btn .service_detail_feature__img {
        grid-row: 1 / 3; /* 画像はテキスト＋ボタン分の高さを通しで確保 */
    }
    .service_detail_feature--with_btn .contact_btn_wrap {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        margin-top: 3rem;
    }
}

/* 「■ 幅広い施工項目」等の小見出し（company_section_ttl の■接頭辞を踏襲） */
.service_detail_works_ttl {
    margin-top: 4rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--black);
    display: flex; /* ::beforeの■をbaselineでなく縦中央に揃えるため */
    align-items: center;
}

.page_service_kensetsu .service_detail_works_ttl {
    margin-top: 0;
}

/* concreteページも同様にmargin-topを0に。letter-spacingは本文と同じ0.05emだと窮屈なのでnormalに戻す */
.page_service_concrete .service_detail_works_ttl {
    margin-top: 0;
    letter-spacing: normal;
}

.service_detail_works_ttl::before {
    content: '■';
    color: var(--black);
    font-size: 0.7em; /* ■ 単体のサイズ。小さくしたければこの数値を下げる */
    margin-right: 1rem;
}

.page_service_leisure .service_detail_works_ttl {
    margin-top: 7rem;
}

/* 施工項目グリッド。PC3列/SP2列。fr は about/service と同様 minmax(0, ...) 必須 */
.service_detail_works_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
    margin-top: 2rem;
}

.service_detail_works_grid__card {
    display: flex;
    flex-direction: column;
    height: 100%; /* グリッドの行の高さいっぱいまで広げる（グリッド項目はデフォルトで行の高さに揃う） */
}

.service_detail_works_grid__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.service_detail_works_grid__body {
    flex: 1 1 auto; /* 説明文の行数が違っても、グレー部分が行の高さまで伸びて揃うように */
    background-color: var(--bg_gray);
    padding: 2rem 1.5rem;
}

.service_detail_works_grid__ttl {
    font-size: 2rem;
    font-weight: 700;
    color: var(--black);
}

.service_detail_works_grid__desc {
    margin-top: 1rem;
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--black);
}

@media screen and (max-width: 768px) {
    .service_detail_works_ttl {
        margin-top: 7rem;
        font-size: 1.7rem;
    }

    .page_service_kensetsu .service_detail_works_ttl {
        margin-top: 2rem;
    }
    .page_service_concrete .service_detail_works_ttl {
        margin-top: 2rem;
    }
    .service_detail_works_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 1.5rem;
        margin-top: 2.5rem;
    }
    /* レジャー事業ページだけ、SPでカードを縦一列に */
    .page_service_leisure .service_detail_works_grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .service_detail_works_grid__body {
        padding: 1.5rem 1rem; /* 上下15px/左右10px */
    }
    .service_detail_works_grid__ttl {
        font-size: 1.5rem;
    }
    .service_detail_works_grid__desc {
        font-size: 1.3rem;
    }
}

/* 外部リンクボタン（株式会社ティープラス等）。黒背景は .contact_btn_wrap .btn を流用 */
.btn--ext {
    position: relative;
}

.btn--ext .btn__ext_icon {
    width: 1em;
    height: 1em;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    filter: invert(79%); /* .g_menu__link .g_menu__ext / .footer__ext と同じ外部リンクアイコンの定番 */
    transition: filter .3s ease;
}

/* 黒ボタン(.btn--black／.p-service-list02__btn)がhoverで白背景に反転する際、
   アイコンも元の黒(jump.svgの地色)に戻して文字色と揃える */
.btn--black.btn--ext:hover .btn__ext_icon,
.p-service-list02__btn.btn--ext:hover .btn__ext_icon {
    filter: none;
}

@media screen and (max-width: 768px) {
    .btn--ext .btn__ext_icon {
        right: 10px;
    }
}

/* ============ 事業詳細ページ ページ内ナビ（黒帯・番号タブ）============
   kensetsu.php で初採用。saiseki.php(style_m.css)の.p-service-navを移植。
   他事業ページで使うページだけ個別に組み込む想定（全ページ共通ではない）。 */
.service_detail_nav {
    color: var(--white);
    background: var(--black);
    padding: 3rem 0;
}
.service_detail_nav__list {
    max-width: 90rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
}
.service_detail_nav__list > li {
    width: 33.3333%;
    position: relative;
}
.service_detail_nav__list > li:first-child::before,
.service_detail_nav__list > li::after {
    content: '';
    width: 1px;
    height: 100%;
    background: var(--white);
    position: absolute;
    top: 0;
}
.service_detail_nav__list > li:first-child::before {
    left: 0;
}
.service_detail_nav__list > li::after {
    right: 0;
}
.service_detail_nav__list > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.2rem 0 1.5rem;
}
.service_detail_nav__num {
    font-family: var(--font_en);
    font-size: 2.6rem;
}
.service_detail_nav__text {
    margin-top: 0.2rem;
}
@media screen and (max-width: 768px) {
    .service_detail_nav {
        padding: 2rem 0;
    }
    .service_detail_nav__list > li {
        width: 100%;
    }
    .service_detail_nav__list > li:first-child::before,
    .service_detail_nav__list > li:last-child::after {
        content: none;
    }
    .service_detail_nav__list > li::after {
        width: 100%;
        height: 1px;
        top: inherit;
        bottom: 0;
    }
    .service_detail_nav__list > li > a {
        flex-direction: row;
        padding: 1.5rem 0;
    }
    .service_detail_nav__num,
    .service_detail_nav__text {
        font-size: 1.3rem;
    }
    .service_detail_nav__text {
        margin: 0 0 0 2rem;
    }
}

/* ============ 事業詳細ページ 番号見出し（黒帯）============
   kensetsu.php で初採用。saiseki.php(style_m.css)の.c-border-title01を移植。
   「01 高品質な土木建設資材」のような、セクション冒頭の全幅黒帯見出し。 */
.service_detail_section_ttl {
    color: var(--white);
    background: var(--black);
    padding: 4.8rem 0;
}
.service_detail_section_ttl .inner {
    display: flex;
    align-items: center;
}
.service_detail_section_ttl__num {
    font-family: var(--font_en);
    font-size: 2.6rem;
    flex-shrink: 0;
    margin-right: 4.7rem;
}
.service_detail_section_ttl__text {
    font-size: 2.4rem;
}
@media screen and (max-width: 768px) {
    .service_detail_section_ttl {
        padding: 2rem 0;
    }
    .service_detail_section_ttl__num {
        font-size: 1.8rem;
        margin-right: 2.8rem;
    }
    .service_detail_section_ttl__text {
        font-size: 1.7rem;
    }
}

/* ============ 事業詳細ページ 全幅背景写真＋テキストパネル ============
   kensetsu.php で初採用。saiseki.php(style_m.css)の.p-service-bgを移植。
   番号見出し(黒帯)の直下に置く、全幅の背景写真＋白文字テキストのセクション。 */
.service_detail_hero {
    min-height: 90rem;
    background-color: var(--bg_gray);
    overflow: hidden;
    padding: 18rem 0 0;
    position: relative;
}
.service_detail_hero__img {
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    inset: 0;
    object-fit: cover;
    z-index: 0;
}
/* 写真の上に薄い黒フィルター（白文字の可読性を確保）。濃さは rgba の数値(0〜1)で調整可 */
.service_detail_hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* yusou.php 専用：3つの hero それぞれで暗幕フィルターの濃度を個別調整可能 */
.service_detail_hero--01::before { background-color: rgba(0, 0, 0, 0.35); }
.service_detail_hero--02::before { background-color: rgba(0, 0, 0, 0.05); }
.service_detail_hero--03::before { background-color: rgba(0, 0, 0, 0.1); }
.service_detail_hero .inner {
    position: relative;
    z-index: 2;
}
.service_detail_hero__body {
    color: var(--white);
}
.service_detail_hero__ttl {
    font-size: 3.6rem;
    font-weight: 700;
}
.service_detail_hero__txt {
    max-width: 55rem;
    margin-top: 2rem;
    line-height: 2.25;
}
@media screen and (max-width: 768px) {
    .service_detail_hero {
        min-height: inherit;
        padding: 7.2rem 0;
    }
    .service_detail_hero__ttl {
        font-size: 2.3rem;
    }
    .service_detail_hero__txt {
        line-height: 1.75;
    }
}

/* ============ 事業詳細ページ 大型splitブロック ============
   kensetsu.php で初採用。saiseki.php(style_m.css)の.p-service-list01を移植。
   画像はPCのみ画面端まで全幅ブリード、テキストは右側に大きめの余白で配置。
   背景色はここでは持たせない：ページ側で__bodyに.bg_gray/.bg_whiteを付けて塗り分ける想定。 */
.service_detail_split > li {
    min-height: 70rem;
    display: flex;
}
.service_detail_split__img {
    background: var(--bg_gray);
    overflow: hidden;
    position: relative;
}
.service_detail_split__img img {
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    inset: 0;
    object-fit: cover;
}
.service_detail_split__body {
    width: 47%;
    /* 背景色(bg_gray/bg_white)は画面端までベタ塗りしたいので、あえて.inner.is_wideでは囲わない。
       その代わり右paddingだけ「.inner.is_wideの右端までの距離」と同じ計算式にして、
       文字の折り返し位置を他セクションの右端と揃える（背景は超えて画面端まで続く）。 */
    padding: 14rem max(5vw, calc((100vw - 1200px) / 2)) 8rem 6rem;
}
.service_detail_split__ttl {
    font-size: 3rem;
    font-weight: 700;
    color: var(--black);
}
.service_detail_split__txt {
    margin-top: 1.5rem;
    font-size: 1.6rem;
    line-height: 2.25;
    color: var(--black);
}
@media screen and (min-width: 1025px) {
    .service_detail_split__img {
        flex: 1 1 auto;
        margin-left: calc(50% - 50vw);
    }
}
@media screen and (max-width: 1024px) {
    .service_detail_split > li {
        min-height: inherit;
        flex-wrap: wrap;
    }
    .service_detail_split__img {
        width: 100%;
        padding-top: 60%;
    }
    .service_detail_split__body {
        width: 100%;
        padding: 4rem 5%;
    }
}
@media screen and (max-width: 768px) {
    .service_detail_split__ttl {
        font-size: 2rem;
    }
    .service_detail_split__txt {
        margin-top: 1rem;
        font-size: 1.3rem;
        line-height: 1.75;
    }
}

/* kensetsu.php section02「取り扱い製品」の仮プレースホルダー枠。
   中身が正式決定するまでのダミー表示なので、SPでは高さを大きく縮めておく。 */
.service_detail_placeholder {
    height: 50rem;
}
@media screen and (max-width: 768px) {
    .service_detail_placeholder {
        height: 10rem;
    }
}

/* concrete.php section03「所有車両」：見出し＋本文＋テーブルをまとめて上下の余白を持たせるための外枠（上下100px=10rem） */
.service_detail_table_area {
    padding: 10rem 0;
}

/* ============ 事業詳細ページ 表組みブロック（yusou.php section01で初採用） ============
   見出し(h4.service_detail_works_ttl)とテーブルの左端を揃えるための専用ラッパー。
   .inner(max-width:1000/1200/1440px)とは別枠の1160px専用クラス。
   .inner同様「width:90%＋max-width」の考え方なので、画面幅1600pxの時ちょうど1160pxになる。 */
.service_detail_table_wrap {
    width: 90%;
    max-width: 116rem;
    margin-inline: auto;
    margin-top: 4rem;
}
.service_detail_table_wrap .service_detail_works_ttl {
    margin-bottom: 2rem;
}

/* テーブル本体。style_m.css の .c-tbl01（saiseki.php用）を移植・調整。
   列比率1:3、1行目(thead)と1列目(th)を濃いグレー、残りは白。 */
.service_detail_table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.service_detail_table col.service_detail_table__col_label {
    width: 25%;
}
.service_detail_table col.service_detail_table__col_data {
    width: 75%;
}
.service_detail_table th,
.service_detail_table td {
    border: solid 1px var(--gray-mid);
    height: 8rem;
    padding: 1.5rem 2rem;
    font-size: 1.5rem;
    line-height: 1.6;
    vertical-align: middle;
}
.service_detail_table thead th,
.service_detail_table tbody th {
    background: #dcdcdc;
    text-align: center;
    font-weight: 700;
}
.service_detail_table tbody td {
    background: #fff;
}
/* concrete.php専用モディファイア：列と列の間の縦罫線を消し、行と行の間の横罫線だけ残す（1列目のグレーは既存のtbody th規則がそのまま効く） */
.service_detail_table--concrete th,
.service_detail_table--concrete td {
    border-left: none;
    border-right: none;
    height: 5rem; /* 2行×5rem=テーブル総高さ10rem（box-sizing:border-boxなのでpadding/borderも含んだ実測値） */
}
.service_detail_table--concrete td {
    text-align: center;
}

/* concrete.php「所有車両」SP専用：横スクロールを避けるため車両/台数を転置した2列テーブル（.service_detail_tableは継承せず独立クラス。表示切替は親要素のpc_only/sp_onlyが担当） */
.service_detail_table_transposed {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.service_detail_table_transposed th,
.service_detail_table_transposed td {
    border: solid 1px var(--gray-mid);
    height: 5rem;
    padding: 1rem;
    font-size: 1.3rem;
    text-align: center;
    vertical-align: middle;
}
.service_detail_table_transposed thead th {
    background: #dcdcdc;
    font-weight: 700;
}
.service_detail_table_transposed tbody td {
    background: #fff;
}

@media screen and (max-width: 768px) {
    .service_detail_table_area {
        padding: 6rem 0; /* PC10remのままだと768px以下でhtml font-sizeが93.75%に切り替わり逆に大きくなるため、明示的にSP値を指定 */
    }
    .service_detail_table_wrap {
        overflow-x: auto;
        margin-top: 2rem;
    }
    .service_detail_table {
        width: 76rem; /* 横スクロール用に固定幅を持たせる */
    }
    .service_detail_table th,
    .service_detail_table td {
        white-space: nowrap;
        height: auto;
        padding: 1.5rem 2rem;
        font-size: 1.3rem;
    }
}

.policy_list--numbered li::marker {
    color: var(--main);
    font-weight: 700;
}

/* ========================================================
   下層ページ固有スタイル（許認可・拠点一覧・CSR・お知らせ・お問い合わせ等）
   （260713畠中 追記分）
   ======================================================== */


/* 許認可・事業免許ページ */
.mv_pattern_c .mv_bg.licenses {
    background-position: top center;
}

/* ご挨拶ページ（PC・SPともセンター寄せ。縦位置を変えたいときは2つ目の値(50%)を変更） */
.mv_pattern_c .mv_bg.greeting {
    background-position: 50% 50%;
}

/* 拠点一覧ページ */
.mv_pattern_c .mv_bg.bases {
    background-position: 0 -25rem;
}
@media screen and (max-width: 768px) {
    .mv_pattern_c .mv_bg.bases {
        background-position: top;
    }
}

/* グループ沿革ページ（PCのみセンター寄せ。数値は%指定なので微調整はここの2つ目の値を変更） */
.mv_pattern_c .mv_bg.history {
    background-position: 50% 50%;
}
@media screen and (max-width: 768px) {
    .mv_pattern_c .mv_bg.history {
        background-position: 50% 70%;
    }
}
#licenses h3.company_section_ttl {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.2rem;
}

#licenses .company_info {
    grid-template-columns: 1fr;
}

#licenses .company_info dt {
    color: var(--main);
}

@media screen and (max-width: 768px) {
    #licenses .company_info {
        grid-template-columns: 1fr;
        margin-top: 0;
    }

    #licenses .company_info dt {
        padding-left: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }
}

/* 拠点一覧ページ */
#bases .company_section_ttl {
    margin-bottom: 1rem;
}

.bases_content_wrap {
    justify-content: space-between;
    padding-bottom: 5rem;
    border-bottom: 1px solid var(--border);
    margin-top: 2.2rem;
}

.bases_content_wrap:last-child {
    border-bottom: none;
}

.bases_content_wrap .bases_flexbox_txt {
    width: 55%;
}

.bases_content_wrap .bases_flexbox_txt p {
    line-height: 2.25;
}

.bases_content_wrap .bases_flexbox_map {
    width: 43%;

}

.bases_content_wrap .bases_flexbox_map iframe {
    width: 100%;
    aspect-ratio: 3/2;
}

@media screen and (max-width: 768px) {
    .bases_content_wrap {
        display: block;
    }

    .bases_content_wrap .bases_flexbox_txt {
        width: 100%;
    }

    .bases_content_wrap .bases_flexbox_map {
        width: 100%;
        margin-top: calc(100vw * (50 / 750));
    }
}

/* CSR */
.csr_read {
    padding: 9rem 0 11rem;
}

.csr_read .inner {
    text-align: center;
}

.csr_read .inner h2 {
    font-size: 3rem;
    position: relative;
    padding: 0 1.2em;
    display: inline-block;
}

.csr_read .inner h2::before,
.csr_read .inner h2::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 4px;
    background-color: #000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.csr_read .inner h2::after {
    left: auto;
    right: 0;
}

.csr_read .inner p {
    text-align: left;
    margin-top: 2.4rem;
}

#csr .company_section_ttl {
    margin-bottom: 1.2rem;
}

#csr .bases_content_wrap {
    justify-content: space-between;
}

#csr .bases_flexbox_txt {
    width: 44%;
}

#csr .bases_flexbox_map {
    width: 50%;
    aspect-ratio: 3/2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#csr .bases_flexbox_map.csr_img01 {
    background-image: url(../img/about/csr_img01.jpg);
}

#csr .bases_flexbox_map.csr_img02 {
    background-image: url(../img/about/csr_img02.jpg);
}

#csr .bases_flexbox_map.csr_img03 {
    background-image: url(../img/about/csr_img03.jpg);
}

#csr .bases_flexbox_map.csr_img04 {
    background-image: url(../img/about/csr_img04.jpg);
}

#csr .bases_flexbox_map.csr_img05 {
    background-image: url(../img/about/csr_img05.jpg);
}

@media screen and (max-width: 768px) {
    .csr_read {
        padding: 4rem 0 5rem;
    }

    #csr .bases_flexbox_txt,
    #csr .bases_flexbox_map {
        width: 100%;
    }

    .csr_read .inner h2 {
        font-size: 2rem;
    }
    .csr_read .inner h2::before,
    .csr_read .inner h2::after {
        display: none;
    }
    .csr_read .inner p {
        margin-top: 1.8rem;
    }
}

/* お知らせ一覧 */
.mv_pattern_c .mv_bg.news {
    background-position: top center;
}
#p-news .p-news_item {
    display: block;
    border-bottom: 1px solid var(--border);
}
#p-news .p-news_item dl {
    display: flex;
}

#p-news .p-news_item dt {
    padding: 2.3rem 4.4rem 2rem 5rem;
}
#p-news .p-news_item dd {
    color: var(--gray);
    padding: 2.3rem 0 2rem;
}
.wp-pagenavi {
    display: block;
    margin-top: 3.4rem;
    text-align: center;
}
.wp-pagenavi a,
.wp-pagenavi span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    width: 3rem;
    height: 3rem;
    border-radius: 5px;
    color: var(--main);    
}
.wp-pagenavi a:hover {
    opacity: 1;
    transition: .3s;
}
.wp-pagenavi a:hover,
.wp-pagenavi a.current,
.wp-pagenavi span.current {
    background-color: var(--main);
    color: #fff;
}
.wp-pagenavi a.nextpostslink,
.wp-pagenavi a.previouspostslink {
    text-indent: -999999999999px;
    width: 1rem;
    height: 1.6rem;
    background-image: url(../img/cmn/arrow_prev.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.wp-pagenavi a.previouspostslink {
    margin-right: 1.5rem;
}
.wp-pagenavi a.nextpostslink {
    background-image: url(../img/cmn/arrow_next.svg);
    margin-left: 1.5rem;
}

@media screen and (max-width: 768px) {
    #p-news .p-news_item {
        width: 100%;
        transform: translateZ(0);
    }
    #p-news .p-news_item dl {
    display: block;
}
    #p-news .p-news_item dt {
        padding: 1.6rem 0 0;
    }
    #p-news .p-news_item dd {
        padding: 6px 0 2rem;
    }
    #p-news {
        width: 100%;
    }
    #p-news dl dt,
    #p-news dl dd {
        width: 94%;
        margin: 0 auto;
    }
}

/* お知らせ　詳細ページ */
#p-news-single .section_ttl::after {
    width: 130px;
}
/* デザイン仕様：上下の区切り線は1200px幅（#p-news-singleの箱いっぱい）、
   テキスト・本文などの中身は1100px幅の範囲に収める。
   → 線を持つ箱自体は1200pxのまま、中身だけ左右50px（=(1200-1100)/2）の
     paddingで内側に寄せる。border は要素自身の幅で描かれる＝paddingの
     内側かどうかに関係なく1200px幅のまま、という性質を利用している。 */
#p-news-single .section_ttl {
    border-bottom: none; /* 下線はwrapper側（1200幅）に持たせるので、このページだけ見出し自身の下線は無効化 */
}
#p-news-single .section_ttl_wrap {
    max-width: 1200px;
    margin: 0 auto;
    border-bottom: solid 1px var(--gray-mid);
}
#p-news-single .section_ttl_wrap > h2 {
    margin-top: 1rem;
}
/* 投稿本文内の見出し階層（h1〜h6）：既存クラスからサイズ/太さ/色のみ拝借。装飾は持ち込まない（h4の●のみ例外） */
.single_txt :where(h1.wp-block-heading, h2.wp-block-heading) {
    font-size: 3rem;
    font-weight: 700;
    color: var(--black);
    margin-top: 4rem;
}
.single_txt :where(h3.wp-block-heading) {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--black);
    margin-top: 4rem;
}
.single_txt :where(h4.wp-block-heading) {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--black);
    margin-top: 4rem;
    display: list-item;
    list-style-type: disc;
    list-style-position: inside;
}
.single_txt :where(h4.wp-block-heading)::marker {
    color: var(--main);
    font-weight: 700;
}
.single_txt :where(h5.wp-block-heading, h6.wp-block-heading) {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--black);
    margin-top: 4rem;
}

.single_txt > * {
    margin: 1em 0 1em;
}
.single_txt {
    border-bottom: 1px solid var(--border);
    padding-bottom: 6rem;
    padding-left: 50px;
    padding-right: 50px;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}
.single_txt p {
    text-align: left;
}
/* 見出しは.single_txt{text-align:center}を継承して中央寄せになってしまうため、
   デフォルトは左寄せにする。ただしGutenbergで中央/右寄せを選んだ場合
   （has-text-align-center/right付与）はそちらを優先させたいので、
   その2クラスが付いていない見出しにだけ左寄せを適用する。 */
.single_txt :where(h1, h2, h3, h4, h5, h6):not(.has-text-align-center):not(.has-text-align-right) {
    text-align: left;
}
.single_btn {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 1100px;
    margin: 2rem auto 0;
}
.single_btn a {
    display: block;
}
.single_btn_prev,
.single_btn_next {
    color: var(--main);
}
/* 前へ/次へが無いとgridの自動配置でカラムがずれるため、カラム番号を明示して固定する */
.single_btn_prev { grid-column: 1; justify-self: start; }
.single_btn_archive { grid-column: 2; justify-self: center; }
.single_btn_next { grid-column: 3; justify-self: end; }
.single_btn_archive {
    background-color: var(--main);
    padding: 2px 42px;
    color: #fff;
    border-radius: 5px;
}
.single_btn_archive:hover {
    background-color: #fff;
    color: var(--main);
    opacity: 1;
    transition: .3s;
}
.single_btn_prev {
    position: relative;
    padding-left: 1.2em;
}
.single_btn_prev::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 16px;
    background-image: url(../img/cmn/arrow_prev.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
.single_btn_next {
    position: relative;
    padding-right: 1.2em;
}
.single_btn_next::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 16px;
    background-image: url(../img/cmn/arrow_next.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}
@media screen and (max-width: 768px) {
    #p-news-single .section_ttl::after {
        left: 0;
    }
}
@media screen and (max-width: 768px) {
    .single_txt :where(h1.wp-block-heading, h2.wp-block-heading) {
        font-size: 2rem;
        margin-top: 2rem;
    }
    .single_txt :where(h3.wp-block-heading) {
        font-size: 1.6rem;
        margin-top: 2rem;
    }
    .single_txt :where(h4.wp-block-heading) {
        font-size: 1.4rem;
        margin-top: 2rem;
    }
    .single_txt :where(h5.wp-block-heading, h6.wp-block-heading) {
        font-size: 1.3rem;
        margin-top: 2rem;
    }
}
@media screen and (max-width: 768px) {
    .single_btn_archive {
        padding: 6px 26px;
    }
    /* SPは「線=1200／中身=1100」の使い分けをやめ、.inner に対して全て全幅にする */
    #p-news-single .section_ttl_wrap,
    .single_txt,
    .single_btn {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
}

/* お問い合わせ */
.mv_pattern_c .mv_bg.contact {
    background-position: bottom center;
}
#p-contact p.bold {
    font-weight: bold;
    font-size: 1.8rem;
    margin: 2.6rem 0 2rem;
}
#p-contact p.red {
    font-weight: bold;
    color: #ff0000;
    margin-top: 1.2rem;
}
#p-contact a {
    color: var(--main);
    display: inline-block;
    border-bottom: 1px solid var(--main);
}

.p-contact-form__tbl {
    background-color: var(--bg_gray);
    margin-top: 4.8rem;
    display: flow-root; /* 子要素(.wpcf7-response-output等)のmargin-bottomがグレー背景の外に相殺されるのを防ぎ、背景がきちんと追従するようにする */
}
.p-contact-form__tbl table tr {
    border-bottom: 1px solid #bfbfbf;
    padding: 2rem 0;
}
.p-contact-form__required {
    color: #ff0000;
}
.p-contact-form__tbl input[type="text"],
.p-contact-form__tbl input[type="email"],
.p-contact-form__tbl input[type="tel"],
.p-contact-form__tbl select,
.p-contact-form__tbl textarea {
    width: 100%;
    height: 60px;
    background-color: #fff;
    display: block;
    padding: 12px 18px;
    border: 1px solid var(--border);
    border-radius: 5px;
}
.p-contact-form__tbl textarea {
    height: 300px;
}
.form-footer {
    text-align: center;
    padding: 4rem 0 1rem;
}
.form-footer .p-contact-form__submit-btn input {
    background-color: var(--black);
    display: flex;
    width: 400px;
    height: 70px;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin: 24px auto 0;
    font-size: 1.8rem;
    font-weight: bold;
}

/* 送信成功時にCF7標準の完了メッセージ（「送信が完了しました」等）を非表示に。
   page-contact.php側でサンクスページへ自動遷移させているため、この一瞬の表示は不要。
   ※バリデーションエラー時（.invalid）は隠さないので、必須未入力等のエラー表示はそのまま出る。 */
.wpcf7-form.sent .wpcf7-response-output {
    display: none;
}

/* CF7標準の.wpcf7-response-output（エラー/成功メッセージ）は既定でmargin-topが大きく、
   送信ボタン（turnstile）との間が間延びして見えるため詰める。
   左右2rem・下2remの余白は.p-contact-form__tbl側のdisplay:flow-rootにより
   グレー背景の内側としてきちんと確保される。 */
.wpcf7-response-output {
    margin: 0rem 2rem 2rem !important;
}

/* 送信中に出るCF7標準の回転アイコンも非表示に */
.wpcf7-spinner {
    display: none !important;
}

/* cf7-simple-turnstile：プラグインが自動付与するインラインstyle(margin-top/bottomの負値)を
   !importantで打ち消し、送信ボタンとの余白を統一する（nikka-serviceのcss/style.cssを流用） */
.cf7-cf-turnstile {
    width: fit-content;
    margin: min(4.2666vw, 16px) auto 0 !important;
}

input[type='checkbox'], input[type='radio'] {
    display: none;
}

.wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}
.wpcf7-acceptance .wpcf7-list-item-label {
	display: inline-block;
	padding: 0 0 0 5rem;
	position: relative;
    cursor: pointer;
    font-size: 1.8rem;
}
.wpcf7-acceptance .wpcf7-list-item-label::before,
.wpcf7-acceptance .wpcf7-list-item-label::after {
	content: "";
	border-radius: 1px;
	position: absolute;
	left: 0;
	transition: .5s;
}
.wpcf7-acceptance .wpcf7-list-item-label::before {
	width: 30px;
	height: 30px;
	background-color: #fff;
	border: solid 1px var(--gray-mid);
	z-index: 0;
}
.wpcf7-acceptance .wpcf7-list-item-label::after {
	width: 24px;
	height: 20px;
	background-image: url("../img/cmn/icon_check.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0;
	top: 5px;
    left: min(.2666vw, 3px);
	z-index: 1;
}
.wpcf7-radio input[type="radio"]:checked ~ .wpcf7-list-item-label::after,
.wpcf7-acceptance input[type="checkbox"]:checked ~ .wpcf7-list-item-label::after {
    opacity: 1;
}

@media screen and (max-width: 768px) {
.wpcf7-acceptance .wpcf7-list-item-label {
	padding: 0 0 0 min(6.4vw, 24px);
}
.wpcf7-acceptance .wpcf7-list-item-label::before {
	width: calc(100vw * (26 / 750));
	height: calc(100vw * (26 / 750));
    top: calc(100vw * (10 / 750));
}
.wpcf7-acceptance .wpcf7-list-item-label::after {
	width: calc(100vw * (20 / 750));
	height: calc(100vw * (20 / 750));
    top: calc(100vw * (13 / 750));
    left: calc(100vw * (3 / 750));
}
.wpcf7-acceptance .wpcf7-list-item-label,
.form-footer .p-contact-form__submit-btn input {
    font-size: calc(100vw * (26 / 750));
}
.form-footer .p-contact-form__submit-btn input {
    width: 100%;
}
.contact_txt,
.form-footer {
    width: 94%;
    margin: 0 auto;
}
.contact_txt a {
    display: inline-block;
    /* padding: .4em .3em; */
    margin: 1em 0 0 0;
}
#p-contact.inner {
    width: 100%;
}
#p-contact .section_ttl_wrap {
    width: 94%;
    margin: 0 auto;
}
span.fc_gray {
    color: var(--gray-mid);
    font-weight: normal;
}
.p-contact-form__tbl table tr.sp_only {
    padding: 2rem;
    padding-top: 0;
    padding-bottom: 6rem;
}
.p-contact-form__tbl .sp_only th {
    padding-left: 0;
    padding-bottom: 1rem;
}
.p-contact-form__tbl .sp_only td {
    display: inline-block;
    width: fit-content;
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: calc(100vw * (24 / 750));
    padding-top: 1rem;
        padding-left: 1rem;
        padding-right: 1.5rem;
        margin-top: 2rem;
        margin-right: 1rem;
}
.p-contact-form__tbl .sp_only td .sp_checkbox .wpcf7-acceptance .wpcf7-list-item-label {
    padding-left: calc(100vw * (32 / 750));
}
.p-contact-form__tbl .sp_only td .sp_checkbox .wpcf7-acceptance .wpcf7-list-item-label::before {
    width: calc(100vw * (20 / 750));
    height: calc(100vw * (20 / 750));
    top: calc(100vw * (6 / 750));
    left: 0;
}
.p-contact-form__tbl .sp_only td .sp_checkbox .wpcf7-acceptance .wpcf7-list-item-label::after {
    width: calc(100vw * (18 / 750));
    height: calc(100vw * (15 / 750));
    top: calc(100vw * (8 / 750));
    left: calc(100vw * (1 / 750));
}
.p-contact-form__tbl .sp_only td span input[name="other"] {
    background-color: var(--bg_gray);
    width: 100%;
}
/* labelとテキスト入力欄を外側から挟んで横並びにする */
.c-form-flex-row {
    display: flex;
    display: -webkit-flex;
    align-items: center;   /* 上下中央揃え */
    gap: 12px;             /* チェックボックス（文字）と入力欄の間隔 */
    width: 100%;           /* tdの横幅いっぱいに広げる */
}

/* label自体は元のサイズを維持させる */
.c-form-flex-row label {
    flex-shrink: 0;        /* 入力欄に押されて潰れないようにする */
    margin: 0;             /* 余計な余白のリセット */
}

/* テキスト入力欄を空いている右側スペースいっぱいに広げる */
.c-form-flex-row .other-input-field {
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
}
}

/* サンクスページ */
#p-contact-thanks .bg_gray {
    width: 100%;
    padding: 10rem 0;
    text-align: center;
}
#p-contact-thanks .bg_gray p.bold {
    font-weight: bold;
    font-size: 3rem;
    margin-bottom: 3rem;
}
#p-contact-thanks .bg_gray a.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 70px;
    font-size: 1.8rem;
    margin: 9rem auto 0;
    border-width: 2px; /* .btn--outline_main の1pxより太め。thanksページだけの仕様 */
}
@media screen and (max-width: 768px) {
    #p-contact-thanks .bg_gray {
        padding: 5rem 0;
    }
    #p-contact-thanks .bg_gray p.bold {
    font-size: 2rem;
}
#p-contact-thanks .bg_gray a.btn {
    margin: 6rem auto 0;
    width: calc(100vw * (400 / 750));
    height: calc(100vw * (90 / 750));
}
}

/* ========================================================
   下層ページ 余白・テーブル調整（260715変更分　畠中）
   ======================================================== */
.single_btn a span {
    display: inline-block;
}

@media screen and (max-width: 768px) {

    .single_btn a span.pc_only {
        display: none;
    }
}

#p-contact .c-tbl02 th,
#p-contact .c-tbl02 td {
    text-align: left;
    padding: 2rem;
}

#p-contact .c-tbl02 th {
    width: 220px;
    font-size: 1.8rem;
    vertical-align: top;
    padding-top: 3.6rem;
}

@media screen and (max-width: 768px) {

    #p-contact .c-tbl02 th,
    #p-contact .c-tbl02 td {
        display: block;
        width: 100%;
    }

    #p-contact .c-tbl02 th,
    .wpcf7-acceptance .wpcf7-list-item-label,
    .form-footer .p-contact-form__submit-btn input {
        font-size: calc(100vw * (26 / 750));
    }

    .form-footer .p-contact-form__submit-btn input {
        width: 100%;
    }

    #p-contact .c-tbl02 th {
        padding-bottom: 0;
        padding-top: calc(100vw * (26 / 750));
    }

    #p-contact .c-tbl02 td {
        padding-top: 1rem;
    }
}

.bases_content_wrap:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

#licenses .company_section {
    padding-bottom: 3rem;
}

#licenses .company_section:last-child {
    padding-bottom: 0;
}

#licenses .company_info {
    grid-template-columns: 1fr;
    margin-top: 0;
}

#csr .bases_flexbox_map {
    width: 47.273%;
}

@media screen and (max-width: 768px) {
    #csr .bases_content_wrap {
        margin-top: 3rem;
        padding-bottom: 3rem;
    }

    /* 変わりないけど表示上の都合で追記してます。 */
    #csr .bases_flexbox_map {
        width: 100%;
    }

    /* 変わりないけど表示上の都合で追記してます。ここまで */

}

.bases_content_wrap {
    margin-top: 5rem;
}

@media screen and (max-width: 768px) {
    .bases_content_wrap .bases_flexbox_map {
        margin-top: calc(100vw * (30 / 750));
    }

    .bases_content_wrap {
        padding-bottom: calc(100vw * (50 / 750));
        margin-top: calc(100vw * (50 / 750));
    }
}

/* ========================================================
   環境インフラ事業ページ（#infra）固有スタイル（260715〜追加分　畠中）
   ======================================================== */
#infra .service_detail_intro__txt {
    font-size: 2.4rem;
    font-weight: bold;

}

#infra .p-service-body p:not([class]) {
    line-height: 1.8;
}

#infra .service_detail_intro .bg_gray {
    padding: 2rem 0;
    text-align: left;
    margin-top: 4rem;
}

#infra .service_detail_intro .bg_gray div {
    width: fit-content;
    margin: 0 auto;
}

#infra .service_detail_intro .bg_gray div p {
    margin-top: .5em;
}

#infra .p-service-bg__textArea {
    position: relative;
    padding-right: 50%;
}

#infra .p-service-bg__textArea::after {
    content: '';
    display: inline-block;
    width: calc(100vw * (626 / 1350));
    height: calc(100vw * (627 / 1350));
    background-image: url(../img/service/infra_sec01_bg_02.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 70%;
    transform: translateY(-50%);
    right: -2%;
    max-width: 626px;
    max-height: 627px;
}


#infra .p-service-body.bg_gray,
#infra .p-service-body.bg_white {
    padding: 10rem 0;
}

.cellcrete_list {
    margin-top: 6rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.cellcrete_list li {
    padding: 2rem;
}

.cellcrete_list li.bg_blue {
    background-color: var(--main);
    color: #fff;
}

.cellcrete_list li .cellcrete_list_img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: auto;
    aspect-ratio: 360 / 233;
}

.cellcrete_list li.bg_blue .cellcrete_list_img {
    background-image: url(../img/service/infra_sec01_cellcrete_01.jpg);
}

.cellcrete_list li:nth-child(2) .cellcrete_list_img {
    background-image: url(../img/service/infra_sec01_cellcrete_02.jpg);
}

.cellcrete_list li:nth-child(3) .cellcrete_list_img {
    background-image: url(../img/service/infra_sec01_cellcrete_03.jpg);
}

.cellcrete_list li h4 {
    font-size: 2rem;
    font-weight: bold;
    margin-top: .6em;
}

.cellcrete_list li p {
    margin-top: .5em;
}

#infra .service_contents_grid .service_contents_card__ttl {
    margin-top: 1.5rem;
}

#infra .service_contents_card__desc {
    margin-top: .5rem;
}

.blue_list {
    margin-top: 3.6rem;
    color: var(--main);
}

.blue_list li {
    margin-top: .8em;
    position: relative;
    display: flex;
    /* Flexboxにして横並びにする */
    align-items: flex-start;
}

.blue_list li::before {
    content: "◎";
    /* 先頭につける記号 */
    margin-right: 4px;
    /* 「◎」とテキストの間の余白 */
    flex-shrink: 0;
}

#infra .c-tbl01 {
    max-width: 1200px;
    margin: 5.6rem auto 0;
}

@media screen and (max-width: 1350px) {
    #infra .p-service-bg__textArea::after {
        top: 60%;
    }
}
@media screen and (max-width: 1024px) {
    #infra .c-tbl01 {
        width: 90%;
    }
}

@media screen and (max-width: 768px) {
    #infra .service_detail_intro__txt {
        font-size: 1.6rem;
        text-align: center;
    }

    #infra .service_detail_intro .bg_gray {
        margin-top: 2rem;
        padding: 1.5rem;
    }
    #infra .p-service-bg__textArea {
        padding-top: 94%;
        padding-right: 0;
    }
    #infra .p-service-bg__textArea::after {
        width: calc(100vw * (626 / 750));
        height: calc(100vw * (627 / 750));
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    #infra .p-service-body.bg_gray, #infra .p-service-body.bg_white {
        padding: 6rem 0;
    }
    #infra .cellcrete_list {
        margin-top: 2rem;
        grid-template-columns: 1fr;
    }
    #infra .service_contents_grid.type02 {
        grid-template-columns: 1fr;
    }
    #infra .c-tbl01 {
        margin-top: 3rem;
        width: 100%;
    }
    #infra .c-tbl01 th,
    #infra .c-tbl01 td {
        display: block;
        padding: .6em;
    }
    #infra .c-tbl01 th {
        border: none;
        border-top: solid 1px var(--gray-mid);
        text-align: left;
    }
    #infra .c-tbl01 td {
        border: none;
        padding-bottom: 2rem;
    }
    #infra .cellcrete_list li h4 {
        font-size: 1.5rem;
    }
    .cellcrete_list li {
        padding: 2rem 1rem;
        display: flex;
        gap: calc(100vw * (35 / 750));
        justify-content: space-between;
        align-items: center;
    }
    .cellcrete_list li .cellcrete_list_txt,
    .cellcrete_list li .cellcrete_list_img {
        width: 50%;
    }
    .cellcrete_list li .cellcrete_list_img {
        aspect-ratio: 300 / 233;
    }

    #infra .p-service-bg {
        position: relative;
        /* clip-pathを設定することで、擬似要素の「fixed」をこのエリア内だけに閉じ込めます */
        clip-path: inset(0);
        -webkit-clip-path: inset(0);

    }
    #infra .p-service-bg::before {
        content: "";
        display: block;
        position: fixed; /* viewportに対して固定 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; /* テキストの裏に配置 */

        /* 背景画像の設定 */
        background-image: url("../img/service/infra_sec01_bg_01.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        /* 念のためiOSのバグ防止用におまじない */
        will-change: transform;
    }

    /* service下層MV共通：SP限定の疑似パララックス（固定背景トリック）。
       260716畠中追加分を#infra限定→.page_service全体に汎用化。
       各ページの.mv_bgインラインstyleで --mv-sp-bg にSP用画像URLを渡す想定
       （専用トリミング画像が無いページはPCと同じ画像を指定してOK）。 */
    .page_service .mv_pattern_d .mv_bg {
        position: relative;
        clip-path: inset(0);
        -webkit-clip-path: inset(0);
        background-image: none !important; /* 実際の表示は::before側の固定背景に任せる */
    }
    .page_service .mv_pattern_d .mv_bg::before {
        content: "";
        display: block;
        position: fixed; /* viewportに対して固定 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; /* テキストの裏に配置 */
        background-image: var(--mv-sp-bg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* 念のためiOSのバグ防止用におまじない */
        will-change: transform;
    }
}

/* 情報公開ページ */
a.information_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main);
    color: #fff;
    width: 50%;
    padding: 1.6rem 0;
    font-size: 1.8rem;
    position: relative;
    margin: 4rem auto 0;
    border-radius: 5px;
}
a.information_btn::before,
a.information_btn::after {
    content: '';
    display: inline-block;
    width: 2.1rem;
    height: 3rem;
    background-image: url(../img/cmn/icon_pdf.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1.8rem;
}
a.information_btn::after {
    background-image: url(../img/cmn/arrow_infobtn.svg);
    width: 2rem;
    height: 1.5rem;
    left: auto;
    right: 1.8rem;
}
.mv_pattern_c .mv_bg.information {
    background-position: bottom 22% center;
}
@media screen and (max-width: 768px) {
    a.information_btn {
        width: 94%;
    }
}

/* ご挨拶ページ */
#greeting.lower_main {
    padding-bottom: 0;
}
.section_ttl02 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--black);
    position: relative;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--gray-mid);
}
#greeting .page_section {
    background-image: url(../img/about/greeting_bg_logo.svg);
    background-repeat: no-repeat;
    background-size: 45.3%;
    background-position: bottom 0% center;
}
#greeting p {
    margin-top: 4rem;
    line-height: 2.25;
}
#greeting .greeting_name {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
#greeting .greeting_name span {
    width: 102px;
    margin-right: 1em;
}
#greeting .greeting_name p {
    margin-top: 0;
    width: 122px;
}
.greeting_sec02 {
    padding: 14rem 0;
    background-image: url(../img/about/greeting_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top 36% center;
    margin-top: 15rem;
}
.greeting_grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 9rem;
    color: #fff;
}
.greeting_grid .greeting_gridbox_wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.greeting_grid .greeting_gridbox_wrap div,
.greeting_grid .greeting_gridbox_wrap h2 {
    border-bottom: 1px solid #fff;
}
.greeting_grid .greeting_gridbox_wrap h2 {
    font-size: 3rem;
    font-weight: bold;
    padding-bottom: 1.7rem;
}
.greeting_grid .greeting_gridbox_wrap div {
    font-size: 2.4rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    line-height: 2;
}
.greeting_gridbox_wrap > div {
    flex-grow: 1;
}
#greeting .greeting_grid .greeting_gridbox_wrap div p {
    width: fit-content;
    margin: 0 auto;
}
.greeting_grid .greeting_gridbox_wrap div ul {
    width: 100%;
}
.greeting_grid .greeting_gridbox_wrap div ul li {
    padding: 2rem 0 2rem 2rem;
    border-top: 1px solid #fff;
    text-align: left;
}
.greeting_grid .greeting_gridbox_wrap div ul li:first-child {
    border-top: none;
}
.greeting_grid .greeting_gridbox_wrap div dl {
    display: flex;
    gap: 2rem;
    align-items: center;
}
.greeting_grid .greeting_gridbox_wrap div dl dt {
    font-size: 2rem;
    width: 110px;
}
.greeting_grid .greeting_gridbox_wrap div dl dd {
    font-size: 1.6rem;
    font-weight: normal;
}

@media screen and (max-width: 1024px) {
    #greeting .page_section {
        background-size: 60%;
    background-position: center;
    }
    .greeting_grid {
        grid-template-columns: 1fr;
    }
    .greeting_grid .greeting_gridbox_wrap:first-child div {
        padding: 2rem 0;
    }
    #greeting .greeting_name {
        margin-top: 4rem;
    }
}
@media screen and (max-width: 768px) {
    #greeting p {
        margin-top: 2rem;
    }
    .greeting_sec02 {
        margin-top: 7rem;
        padding: 7rem 0;
    }
    .greeting_grid .greeting_gridbox_wrap:first-child div {
        padding: 2rem 0 2rem 2rem;
    }
    .greeting_grid .greeting_gridbox_wrap div dl {
        display: block;
    }
    .greeting_grid .greeting_gridbox_wrap div dl dt {
        width: 100%;
    }
    .section_ttl02,
    .greeting_grid .greeting_gridbox_wrap h2 {
        font-size: 2rem;
    }
    .greeting_grid .greeting_gridbox_wrap div,
    .greeting_grid .greeting_gridbox_wrap div dl dt {
        font-size: 1.6rem;
        line-height: 1.6;
    }
    /* #greeting p { line-height: 2.25 }（ID指定・常時適用）に詳細度で勝つよう、
       同じ祖先を含めたセレクタで「企業原点」の p だけ上書きする */
    #greeting .greeting_grid .greeting_gridbox_wrap div p {
        line-height: 1.6;
    }
    .greeting_grid {
        gap: 6rem;
    }
    #greeting .page_section {
        background-size: 90%;
    }
    #greeting .greeting_name p {
        width: 10rem;
    }
    #greeting .greeting_name span {
        width: 8.3rem;
    }
}

/* ========================================================
   ここから style_m.css 統合分
   （旧・レガシースタイルシート。saiseki.php / infrastructure.php が使用。
   inc/head.php から style_m.css の読み込みは削除し、こちらに一本化した）
   ======================================================== */
.mt24 { margin-top: 24px; }
.mt90 { margin-top: 90px; }
@media screen and (max-width: 768px) {
.mt16_sp { margin-top: 1.6rem; }
.mt30_sp { margin-top: 3rem; }
.mt50_sp { margin-top: 5rem; }
.mt75_sp { margin-top: 7.5rem; }
}
.mb16 { margin-bottom: 16px; }
.mb24 { margin-bottom: 24px; }
.mb32 { margin-bottom: 32px; }
@media screen and (max-width: 768px) {
.mb12_sp { margin-bottom: 1.2rem; }
.mb20_sp { margin-bottom: 2rem; }
}

.pt140 { padding-top: 140px; }
.pb140 { padding-bottom: 140px; }
@media screen and (max-width: 768px) {
.pt70_sp { padding-top: 7rem; }
.pb70_sp { padding-bottom: 7rem; }
}

.inner.mw1200 {
    max-width: 1200px;
}
@media screen and (max-width: 1024px) {
.inner.is-wide.m-w1024 {
    width: 100%;
}
}

.mv_section.mv_pattern_d .mv_bg {
    padding: 21rem 0 29rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    position: relative;
}
.mv_section.mv_pattern_d .mv_content {
    color: #fff;
    max-width: 1200px;
    width: 90%;
    margin: auto;
}
.mv_section.mv_pattern_d .mv_ttl_en {
    font-family: var(--font_en);
    font-size: 2.4rem;
    letter-spacing: 0.33em;
}
.mv_section.mv_pattern_d .mv_ttl_ja {
    font-family: var(--font_makinas);
    font-weight: 500;
    font-size: 7rem;
    letter-spacing: 0.18em;
    line-height: 1;
    margin-top: 1.5rem;
    margin-left: -.5rem;
}
.mv_section.mv_pattern_d .mv_sub {
    font-size: 3rem;
    margin: 6rem 0 0;
}
.mv_section.mv_pattern_d .mv_text {
    max-width: 547px;
    margin: 1.5rem 0 0;
    line-height: 2;
}
@media screen and (max-width: 768px) {
.mv_section.mv_pattern_d .mv_bg {
    padding: 25rem 0 7rem;
}
.mv_section.mv_pattern_d .mv_ttl_en {
    font-size: 1.7rem;
}
.mv_section.mv_pattern_d .mv_ttl_ja {
    font-size: 4.5rem;
    margin-top: 1rem;
    margin-left: -.3rem;
    line-height: 1.3;
}
.mv_section.mv_pattern_d .mv_sub {
    font-size: 2rem;
    margin: 1.5rem 0 0;
}
.mv_section.mv_pattern_d .mv_text {
    font-size: 1.3rem;
    margin: 1rem 0 0;
    line-height: 1.8;
}
}

.c-title02 { font-size: 3rem; }
@media screen and (max-width: 768px) {
.c-title02 { font-size: 2rem; }
}


.c-border-title01 {
    color: #fff;
    background: var(--black);
    padding: 48px 0;
}
.c-border-title01 .inner {
	display: -webkit-box;
	display: flex;
}
.c-border-title01__num {
    font-family: var(--font_en);
    font-size: 2.6rem;
    flex-shrink: 0;
    margin: 0 47px 0 0;
}
.c-border-title01__text {
    font-size: 2.4rem;
}
@media screen and (max-width: 768px) {
.c-border-title01 {
    padding: 2rem 0;
}
.c-border-title01__num {
    font-size: 1.8rem;
    margin: 0 2.8rem 0 0;
}
.c-border-title01__text {
    font-size: 1.7rem;
}
}
.c-border-title02 {
    font-size: 3rem;
    border-bottom: solid 1px var(--main);
    padding: 0 0 16px;
    position: relative;
}
.c-border-title02::after {
    content: "";
    width: 200px;
    height: 5px;
    background: var(--main);
    position: absolute;
    bottom: 0;
    left: 0;
}
@media screen and (max-width: 768px) {
.c-border-title02 {
    font-size: 2rem;
    padding: 0 0 1.6rem;
}
.c-border-title02::after {
    width: 13rem;
    height: 2px;
}
}

.c-square-title01 {
    font-size: 2.4rem;
    padding: 0 0 0 24px;
    position: relative;
}
.c-square-title01::before {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--black);
    position: absolute;
    top: 1.5rem;
    left: 0;
}
@media screen and (max-width: 768px) {
.c-square-title01 {
    font-size: 1.7rem;
    padding: 0 0 0 1.8rem;
}
.c-square-title01::before {
    width: .6rem;
    height: .6rem;
    top: 1.2rem;
}
}

.c-tbl01 th {
    background: #dcdcdc;
}
.c-tbl01 th,
.c-tbl01 td {
    border: solid 1px var(--gray-mid);
    padding: 20px;
    line-height: 1.8;
}
.c-tbl01 th {
    text-align: center;
}
.c-tbl01 thead th:nth-child(1) {
    width: 200px;
}
.c-tbl01 tbody td {
    background: #fff;
}
@media screen and (max-width: 768px) {
    .c-scroll-tbl {
        overflow-x: auto;
    }
    .c-scroll-tbl table {
        white-space: nowrap;
    }
    .c-scroll-tbl table th,
    .c-scroll-tbl table td {
        padding: 2rem 2.4rem;
    }
}

.c-dl01 > div:not(:last-child) {
    margin: 0 0 8px;
}
.c-dl01 dt {
    font-size: 1.9rem;
    font-weight: 700;
    padding: 0 0 0 24px;
    position: relative;
}
.c-dl01 dt::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--black);
    border-radius: 50%;
    position: absolute;
    top: 12px;
    left: 0;
}
.c-dl01 dd {
    line-height: 2;
    margin: 3px 0 0;
}
@media screen and (max-width: 1024px) {
.c-dl01 dt::before {
    top: 1.3rem;
}
}
@media screen and (max-width: 768px) {
.c-dl01 dt {
    font-size: 1.5rem;
    padding: 0 0 0 1.8rem;
}
.c-dl01 dt::before {
    width: .45rem;
    height: .45rem;
    top: 1.1rem;
}
.c-dl01 dd {
    margin: .225rem 0 0;
}
}


.p-service-bg {
    min-height: 90rem;
    background-color: #eee;
    overflow: hidden;
    padding: 18rem 0 0;
    position: relative;
}
.p-service-bg > img {
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    inset: 0;
    object-fit: cover;
    z-index: 0;
}
.p-service-bg .inner {
    position: relative;
    z-index: 1;
}
.p-service-bg__textArea {
    color: #fff;
}
@media screen and (max-width: 768px) {
.p-service-bg {
    min-height: inherit;
    padding: 7.2rem 0;
}
}


.p-service-list01__btnWrap {
    margin: 11.4rem 0 0;
}
.p-service-list01__btn {
    color: #fff;
    font-size: 1.8rem;
    max-width: 285px;
    width: 100%;
    min-height: 60px;
    background: #000;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
    padding: 8px;
}
@media screen and (max-width: 768px) {
.p-service-list01__btnWrap {
    -webkit-box-pack: center;
    justify-content: center;
    margin: 2.4rem 0 0;
}
.p-service-list01__btn {
    font-size: 1.4rem;
    max-width: 21.375rem;
    min-height: 4.5rem;
    padding: .8rem;
}
}

.p-service-list02 > li {
	display: -webkit-box;
	display: flex;
    flex-wrap: wrap;
}
.p-service-list02__img {
    width: 40%;
    margin: 0 8% 0 0;
}
.p-service-list02__textArea {
    width: 52%;
}
.p-service-list02__title {
    font-size: 1.9rem;
}
.p-service-list02__btn-list {
    width: 100%;
}
.p-service-list02__btn-list > li {
    width: 48.5%;
    margin-top: 16px;
}
.p-service-list02__btn {
    color: #fff;
    font-size: 1.8rem;
    max-width: 285px;
    width: 100%;
    min-height: 60px;
    background: #000;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
    padding: 8px;
}
.p-service-list02__btn-list .p-service-list02__btn {
    max-width: inherit;
}
.p-service-list02__btn {
    border: 1px solid #000;
    transition: background-color .3s ease, color .3s ease;
}
.p-service-list02__btn:hover {
    opacity: 1;
    background: #fff;
    color: #000;
}
@media screen and (min-width: 1025px) {
.p-service-list02__btn-list > li {
    margin-right: 3%;
}
.p-service-list02__btn-list > li:nth-child(-n + 2) {
    margin-top: 0;
}
.p-service-list02__btn-list > li:nth-child(2n) {
    margin-right: 0;
}
}
@media screen and (max-width: 1024px) {
.p-service-list02__btn-list > li {
    width: 100%;
}
.p-service-list02__btn-list > li:nth-child(1) {
    margin-top: 0;
}
}
@media screen and (max-width: 768px) {
.p-service-list02__img,
.p-service-list02__textArea {
    width: 100%;
}
.p-service-list02__img {
    text-align: center;
    margin: 0 0 2.4rem;
}
.p-service-list02__title {
    font-size: 1.5rem;
}
.p-service-list02__btn-list > li {
    margin-top: 1rem;
}
.p-service-list02__btn {
    font-size: 1.4rem;
    max-width: 21.375rem;
    min-height: 4.5rem;
    padding: .8rem;
}
}

.p-saiseki-product__list {
	display: -webkit-box;
	display: flex;
    flex-wrap: wrap;
}
.p-saiseki-product__list > li {
    width: 18%;
    margin-top: 40px;
    margin-right: 2.5%;
}
.p-saiseki-product__img {
    text-align: center;
}
.p-saiseki-product__text {
    margin: 8px 0 0;
}
@media screen and (min-width: 1025px) {
.p-saiseki-product__list > li:nth-child(-n + 5) {
    margin-top: 0;
}
.p-saiseki-product__list > li:nth-child(5n) {
    margin-right: 0;
}
}
@media screen and (max-width: 1024px) {
.p-saiseki-product__list > li {
    width: 23.125%;
}
.p-saiseki-product__list > li:nth-child(-n + 4) {
    margin-top: 0;
}
.p-saiseki-product__list > li:nth-child(4n) {
    margin-right: 0;
}
}
@media screen and (max-width: 768px) {
.p-saiseki-product__list > li {
    width: 48.75%;
}
.p-saiseki-product__list > li,
.p-saiseki-product__list > li:nth-child(-n + 4) {
    margin-top: 4rem;
}
.p-saiseki-product__list > li:nth-child(-n + 2) {
    margin-top: 0;
}
.p-saiseki-product__list > li,
.p-saiseki-product__list > li:nth-child(4n) {
    margin-right: 2.5%;
}
.p-saiseki-product__list > li:nth-child(2n) {
    margin-right: 0;
}
.p-saiseki-product__text {
    margin: .8rem 0 0;
}
}

/* ========================================================
   グループの強みページ（#strengths）固有スタイル（260717畠中追記分）
   ======================================================== */
.mv_pattern_a .mv_bg.strengths {
    background-position: center;
}

#strengths {
    padding-bottom: 0;
}

#strengths .page_section {
    margin-top: 0;
    background-color: #fff;
}

#strengths .strengths_sec_top {
    padding: 9rem 0 11rem;
    text-align: center;
}

#strengths .strengths_sec_top h2 {
    font-size: 3rem;
    position: relative;
    padding: 0 1.2em;
    display: inline-block;
    margin-bottom: 3rem;
}

#strengths .strengths_sec_top h2::before,
#strengths .strengths_sec_top h2::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 4px;
    background-color: #000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

#strengths .strengths_sec_top h2::after {
    left: auto;
    right: 0;
}

#strengths h3 {
    margin-bottom: .9rem;
    font-size: 3.6rem;
    line-height: 1.75;
}

#strengths h3 span {
    line-height: 1;
}

#strengths p {
    line-height: 2.25;
}

.strengths_sec01 {
    background-image: url(../img/strengths/strengths_sec01_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 13.4rem 0;
    color: #fff;
}

.strengths_sec01 h3 {
    color: #fff;
    position: relative;

}

.strengths_sec01 h3,
.strengths_sec01 p {
    padding-left: 13.8rem;
}

.strengths_sec01 h3 span {
    color: #fff;
    position: absolute;
    top: 17px;
    left: -3px;
    display: inline-block;
    border-bottom: 2px solid #fff;
}

.strengths_sec01 .strengths_sec01_img_wrap {
    margin-top: 2.8rem;
    width: 100%;
    height: auto;
}

.strengths_sec02 {
    width: 100%;
    position: relative;
    background-color: var(--bg_gray);
    padding: 14.5rem 0;
}

.strengths_sec02::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-image: url(../img/strengths/strengths_sec02_bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.strengths_sec02 .inner.is_wide,
.strengths_sec05 .inner.is_wide {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.strengths_sec02 .txt_wrap,
.strengths_sec05 .txt_wrap {
    width: 45%;
}

.strengths_sec02 .inner.is_wide h3,
.strengths_sec03 .inner.is_wide h3,
.strengths_sec04 .inner.is_wide h3,
.strengths_sec05 .inner.is_wide h3 {
    position: relative;
    padding-top: 7.5rem;
    margin-bottom: 2.2rem;
}

#strengths h3 span {
    font-size: 5rem;
}

.strengths_sec02 .inner.is_wide h3 span,
.strengths_sec03 .inner.is_wide h3 span,
.strengths_sec04 .inner.is_wide h3 span,
.strengths_sec05 .inner.is_wide h3 span {
    display: inline-block;
    border-bottom: 2px solid #000;
    position: absolute;
    top: 0;
    left: 0;
}

.strengths_sec04 .inner.is_wide h3 span {
    border-bottom: 2px solid #fff;
}

.strengths_sec03 {
    padding: 10rem 0;
}

.strengths_sec03 .inner.is_wide {
    display: flex;
    justify-content: space-between;
    gap: 9rem;
}

.strengths_sec03 .inner.is_wide .strengths_sec03_left_wrap {
    padding-top: 9.2rem;
}

.strengths_sec03 .inner.is_wide .strengths_sec03_right_wrap ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 6.7rem;
}

.strengths_sec03 .inner.is_wide .strengths_sec03_right_wrap ul li {
    color: var(--main);
    font-size: 1.8rem;
    font-weight: bold;
    padding-top: 106%;
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(100vw * (250 / 1600));
    max-width: 250px;
    text-align: center;
}

.strengths_sec03 .inner.is_wide .strengths_sec03_right_wrap ul li.strengths_sec03_list_content01 {
    background-image: url(../img/strengths/strengths_sec03_img01.jpg);
}

.strengths_sec03 .inner.is_wide .strengths_sec03_right_wrap ul li.strengths_sec03_list_content02 {
    background-image: url(../img/strengths/strengths_sec03_img02.jpg);
}

.strengths_sec03 .inner.is_wide .strengths_sec03_right_wrap ul li.strengths_sec03_list_content03 {
    background-image: url(../img/strengths/strengths_sec03_img03.jpg);
}

.strengths_sec03 .inner.is_wide .strengths_sec03_right_wrap ul li.strengths_sec03_list_content04 {
    background-image: url(../img/strengths/strengths_sec03_img04.jpg);
}

.strengths_sec04 {
    background-image: url(../img/strengths/strengths_sec04_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10rem 0;
}

.strengths_sec04 .inner.is_wide {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 5rem;
    color: #fff;
}

.strengths_sec04 .inner.is_wide .strengths_sec04_txt_wrap {
    padding-top: 4.4rem;
    width: 45%;
}

.strengths_sec04 .inner.is_wide .strengths_sec04_img_wrap {
    width: 50%;
}

.strengths_sec05 {
    width: 100%;
    position: relative;
    padding: 14.5rem 0;
}

.strengths_sec05::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-image: url(../img/strengths/strengths_sec05_img.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
}

.strengths_sec05 .inner.is_wide {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.strengths_sec_bottom {
    background-image: url(../img/strengths/strengths_sec06_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 22.3rem 0;
    color: #fff;
    text-align: center;
}

.strengths_sec_bottom h2 {
    border-bottom: 1px solid #fff;
    padding-bottom: 2.2rem;
    max-width: 1000px;
    margin: 0 auto 1.7rem;
    font-size: 3.6rem;
}

.strengths_sec_bottom p {
    font-size: 1.8rem;
}
@media screen and (max-width: 1024px) {
    .strengths_sec01 h3, .strengths_sec01 p {
        padding-left: 0;
        
    }
    .strengths_sec01 h3 {
        padding-top: 9.5rem;
    }
}
@media screen and (max-width: 768px) {
    .mv_pattern_a .mv_bg.strengths {
        background-size: 175%;
        background-position: top 33% center;
    }

    #strengths .strengths_sec_top {
        padding: 4rem 0 5rem;
    }

    #strengths .strengths_sec_top h2 {
        font-size: 2rem;
        padding: 0;
    }

    #strengths .strengths_sec_top h2::before,
    #strengths .strengths_sec_top h2::after {
        display: none;
    }

    #strengths p {
        text-align: left;
        line-height: 1.75;
    }

    #strengths h3 {
        font-size: 2.4rem;
        padding-top: 4.5rem;
    }

    #strengths h3 span {
        font-size: 3rem;
    }

    .strengths_sec01,
    .strengths_sec03,
    .strengths_sec04 {
        padding: 7rem 0;
    }

    .strengths_sec01 h3,
    .strengths_sec01 p {
        padding-left: 0;
    }

    .strengths_sec01 h3 span {
        top: 0;
        left: 0;
    }

    .strengths_sec01 .strengths_sec01_img_wrap {
        margin-left: -3%;
    }

    .strengths_sec02::before,
    .strengths_sec05::before {
        width: 100%;
        height: auto;
        aspect-ratio: 800 / 590;
    }
    .strengths_sec05::before {
        background-position: left center;
    }

    .strengths_sec02,
    .strengths_sec05,
    .strengths_sec03 .inner.is_wide .strengths_sec03_left_wrap {
        padding: 0;
    }

    .strengths_sec02 .txt_wrap,
    .strengths_sec05 .txt_wrap {
        width: 100%;
        padding-top: 96%;
        padding-bottom: 20%;
    }

    .strengths_sec03 .inner.is_wide {
        flex-direction: column;
        gap: 4rem;
    }

    .strengths_sec03 .inner.is_wide .strengths_sec03_right_wrap ul {
        gap: 3rem;
    }

    .strengths_sec03 .inner.is_wide .strengths_sec03_right_wrap ul li {
        width: 100%;
        max-width: none;
        font-size: 1.3rem;
    }

    .strengths_sec04 .inner.is_wide {
        flex-direction: column;
        gap: 4;
    }

    .strengths_sec04 .inner.is_wide .strengths_sec04_txt_wrap {
        width: 100%;
        padding-top: 0;
    }

    .strengths_sec04 .inner.is_wide .strengths_sec04_img_wrap {
        width: 85%;
        margin: 0 auto;
    }

    .strengths_sec_bottom {
        padding: 10rem 0 30rem;
        background-size: cover;
    }

    .strengths_sec_bottom h2 {
        font-size: 1.8rem;
        padding-bottom: 1.2rem;
    }

    .strengths_sec_bottom p {
        font-size: 1.3rem;
    }
}

/* ========================================================
   グループ沿革ページ（page-history.php）年表タイムライン
   ======================================================== */
.history_timeline {
    position: relative;
    margin-top: 5rem;
    padding-bottom: 7rem; /* 最後のドットから線を7rem伸ばして白ドットで留めるための余白 */
}

/* 縦線（一番上の era_dot の中心〜一番下、白ドットまでを貫通する1本の線）
   位置は .history_timeline__era の grid-template-columns 1列目の幅（＝左端〜線の距離）と
   揃える。線から右のコンテンツまでの余白は column-gap の値。 */
.history_timeline::before {
    content: '';
    position: absolute;
    top: 1.9rem; /* era_dot（top1.2rem・高さ1.4rem）の中心に合わせる */
    bottom: 0;
    left: calc(20rem - 1px);
    width: 2px;
    background: var(--main);
}

/* 縦線の終端を留める白ドット */
.history_timeline::after {
    content: '';
    position: absolute;
    left: 20rem;
    margin-left: -0.7rem;
    bottom: 0;
    width: 1.4rem;
    height: 1.4rem;
    transform: translateY(50%);
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--main);
    z-index: 2;
}

.history_timeline__era {
    position: relative;
    display: grid;
    grid-template-columns: 20rem 1fr; /* 1列目の幅＝左端から縦線までの距離（200px） */
    column-gap: 4rem;                 /* 縦線からコンテンツまでの余白（40px） */
}

.history_timeline__era + .history_timeline__era {
    margin-top: 6rem;
}

/* 時代ブロックの丸マーカー（縦線上、見出し(era_ttl)の高さに合わせる） */
.history_timeline__era_dot {
    position: absolute;
    top: 1.2rem;
    left: 20rem;
    margin-left: -0.7rem;
    width: 1.4rem;   /* 14px */
    height: 1.4rem;  /* 14px */
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--main);
    z-index: 2;
}

.history_timeline__era_period {
    font-family: var(--font_base);
    font-size: 2.6rem;   /* PC: 26px */
    font-weight: 700;
    color: rgba(42, 81, 148, 0.5); /* --main の透明度50% */
    line-height: 1.3;
}

.history_timeline__era_ttl {
    font-family: var(--font_base);
    font-size: 2.4rem;   /* PC: 24px */
    font-weight: 700;
    color: var(--main);
    line-height: 1.4;
    margin-top: 0;
}

.history_timeline__era_desc {
    font-family: var(--font_base);
    font-size: 1.6rem;   /* PC: 16px */
    font-weight: 700;
    color: var(--black); /* 共通黒 */
    margin-top: 0.8rem;
}

.history_timeline__list {
    margin-top: 3rem;
}

.history_timeline__row {
    position: relative;
    display: grid;
    /* 1列目を固定幅にすることで、日付の文字数に関わらず row_txt の開始位置を
       常に縦線から230pxに揃える（era側のcolumn-gap40px + row自体のpadding-left15px + このcolumn幅175px） */
    grid-template-columns: 17.5rem 1fr;
    padding-bottom: 0.2rem;
    padding-left: 1.5rem; /* 15px */
}

.history_timeline__row + .history_timeline__row {
    margin-top: 2.5rem;
}

/* 行の下線：縦線の位置からコンテンツ右端まで（-4rem＝column-gapの4rem分、戻って縦線に届かせる） */
.history_timeline__row::after {
    content: '';
    position: absolute;
    left: -4rem;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--border);
}

/* 縦線と行の下線が交わる位置の塗りつぶしドット */
.history_timeline__row::before {
    content: '';
    position: absolute;
    left: -4rem;
    bottom: 0;
    width: 1rem;
    height: 1rem;
    transform: translate(-50%, 50%);
    border-radius: 50%;
    background: var(--main);
    z-index: 2;
}

.history_timeline__row_date {
    font-family: var(--font_base);
    font-size: 1.6rem;   /* PC: 16px */
    font-weight: 700;
    color: var(--main);
    white-space: nowrap;
}

.history_timeline__row_txt {
    min-width: 0; /* グリッド内でも縮小できるようにし、長文は内部で自然に折り返す */
    font-family: var(--font_base);
    font-size: 1.6rem;   /* PC: 16px */
    font-weight: 400;
    color: var(--black); /* 共通黒 */
    line-height: 1.6;
}

/* グループ沿革ページ SP版（上書き） */
@media screen and (max-width: 768px) {
    .history_timeline {
        margin-top: 3rem;
    }

    .history_timeline::before {
        top: 1.5rem; /* SP版 era_dot（top0.9rem・高さ1.2rem）の中心に合わせる */
        left: 0.85rem;
    }

    .history_timeline::after {
        left: 0.94rem;
        margin-left: -0.6rem;
        width: 1.2rem;
        height: 1.2rem;
    }

    .history_timeline__era {
        grid-template-columns: 1fr;
        padding-left: 3rem;
    }

    .history_timeline__era + .history_timeline__era {
        margin-top: 7rem;
    }

    .history_timeline__era_dot {
        top: 0.9rem;
        left: 0.94rem; /* 縦線（0.94rem）と中心を揃える */
        margin-left: -0.6rem;
        width: 1.2rem;
        height: 1.2rem;
    }

    .history_timeline__era_period {
        font-size: 1.8rem;  /* SP: 18px */
    }

    .history_timeline__era_ttl {
        font-size: 1.7rem;  /* SP: 17px */
        margin-top: 0.5rem;
    }

    .history_timeline__era_desc {
        font-size: 1.3rem;  /* SP: 13px */
        margin-top: 0;
    }

    .history_timeline__list {
        margin-top: 2.5rem;
    }

    .history_timeline__row_date,
    .history_timeline__row_txt {
        font-size: 1.3rem;  /* SP: 13px */
    }

    .history_timeline__row {
        grid-template-columns: 1fr; /* SPは日付の下にテキストを別行で表示 */
        padding-left: 0;
        padding-bottom: 0; /* 線はrow全体の下ではなくdateの下に移すため、row自体の余白は無し */
    }

    /* PC版の「row全体の下に線」を無効化し、dateの下に線を出す形に切り替える */
    .history_timeline__row::before,
    .history_timeline__row::after {
        content: none;
    }

    .history_timeline__row_date {
        position: relative;
        display: block;
        padding-bottom: 0.8rem; /* dateと線の間隔 */
        margin-bottom: 0.8rem;  /* 線とtxtの間隔 */
    }

    /* 縦線と行の下線が交わる位置の塗りつぶしドット（dateの下） */
    .history_timeline__row_date::before {
        content: '';
        position: absolute;
        left: calc(0.94rem - 3rem); /* 縦線位置(0.94rem) - eraのpadding-left(3rem) */
        bottom: 0;
        width: 1rem;
        height: 1rem;
        transform: translate(-50%, 50%);
        border-radius: 50%;
        background: var(--main);
        z-index: 2;
    }

    /* 行の下線（dateの下、縦線の位置からコンテンツ右端まで） */
    .history_timeline__row_date::after {
        content: '';
        position: absolute;
        left: calc(0.94rem - 3rem);
        right: 0;
        bottom: 0;
        height: 1px;
        background: var(--border);
    }

    .history_timeline__row_txt {
        min-width: 0;
    }
}
/* ================================================================
   公開準備で追加（2026/10）
   ================================================================ */
/* 準備中リンク（リサイクル事業）：クリック不可・薄く表示。公開後にページができたら
   class="is_disabled" と aria-disabled/tabindex を外して href を入れるだけで解除できる */
.is_disabled { pointer-events: none; cursor: default; opacity: .45; }

/* お知らせ0件のときの文言（TOP一覧・/news/ 共通）。数値を変えたいときはここ */
.news_empty { padding: 1.9rem 1rem; border-bottom: 1px solid var(--border); }
#p-news .news_empty { border-bottom: 0; padding: 3rem 0; }
@media screen and (max-width: 768px) {
    .news_empty { padding: 2rem 6%; font-size: 1.3rem; } /* TOP一覧SP：news_item のインデントに合わせる */
    #p-news .news_empty { padding: 2rem 0; }
}