@charset "utf-8";
/* ============================================================
   MGA24h 画像ヒーロー  hero.css  （v4.41）
   ============================================================ */
/* 差し替え行（?kw= があるときだけ描画） */
.kwband{background:#101d36;border-bottom:1px solid rgba(201,168,76,.45);}
.kwband__text{max-width:1536px;margin:0 auto;padding:10px 20px 10px 34px;position:relative;font-size:15px;line-height:1.6;letter-spacing:.02em;color:#e3d3a4;}
.kwband__text::before{content:"";position:absolute;left:20px;top:50%;width:8px;height:1px;background:#c9a84c;}
@media (max-width:767px){.kwband__text{font-size:13px;padding:9px 16px 9px 28px;}.kwband__text::before{left:16px;}}

/* ヒーロー本体 */
.hero{position:relative;background:#0d1b33;line-height:0;max-width:1536px;margin:0 auto;padding:0 !important;}
.hero__img{display:block;width:100%;height:auto;}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* 固定ヘッダー：ヒーロー表示中は隠す（画像にヘッダーが入っているため） */
body.has-imghero header{transform:translateY(-110%);transition:transform .25s ease;}
body.has-imghero.hdr-show header{transform:none;}

/* 画像上のクリック領域（%）。位置合わせ時は .hot に outline を付けて確認 */
.hero__hot{position:absolute;inset:0;}
.hot{position:absolute;display:block;border-radius:6px;background:transparent;border:0;padding:0;cursor:pointer;}
.hot:focus-visible{outline:3px solid #c9a84c;outline-offset:2px;}
.hero__hot--sp{display:none;}
/* PC（1536x1024 基準） */
.hot--pc-logo{left:2.2%;top:1.8%;width:14.0%;height:4.8%;}
.hot--pc-svc {left:36.0%;top:2.9%;width:6.8%;height:3.4%;}
.hot--pc-case{left:44.3%;top:2.9%;width:4.0%;height:3.4%;}
.hot--pc-faq {left:49.9%;top:2.9%;width:6.6%;height:3.4%;}
.hot--pc-col {left:58.1%;top:2.9%;width:3.0%;height:3.4%;}
.hot--pc-co  {left:62.9%;top:2.9%;width:4.0%;height:3.4%;}
.hot--pc-head{left:75.4%;top:1.7%;width:22.6%;height:5.2%;}
.hot--pc-cta {left:2.8%;top:79.2%;width:28.3%;height:8.3%;}
.hot--pc-tel {left:32.6%;top:79.2%;width:21.8%;height:8.3%;}
/* SP（971x1619 基準） */
@media (max-width:767px){
  .hero__hot--pc{display:none;}
  .hero__hot--sp{display:block;}
  .hot--sp-head   {left:54.3%;top:1.0%;width:31.2%;height:5.0%;}
  .hot--sp-menu   {left:88.5%;top:1.4%;width:9.5%;height:4.0%;}
  .hot--sp-bigtel {left:17.5%;top:82.2%;width:65.5%;height:5.6%;}
  .hot--sp-tel    {left:3.2%;top:90.7%;width:51.4%;height:7.6%;}
  .hot--sp-contact{left:55.4%;top:90.7%;width:41.6%;height:7.6%;}
}

/* スマホ用メニュー */
.spnav{position:fixed;inset:0;z-index:200;background:rgba(13,27,51,.97);display:flex;flex-direction:column;align-items:stretch;gap:0;padding:72px 28px 32px;overflow-y:auto;line-height:1.5;}
.spnav[hidden]{display:none;}
.spnav a{display:block;padding:16px 4px;color:#fff;font-size:17px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.14);}
.spnav .spnav__cta{margin-top:24px;border:0;border-radius:6px;background:#c9a84c;color:#17233d;text-align:center;font-weight:700;}
.spnav .spnav__tel{margin-top:12px;border:1px solid rgba(255,255,255,.5);border-radius:6px;text-align:center;font-size:20px;font-weight:700;}
.spnav__close{position:absolute;top:14px;right:16px;width:44px;height:44px;border:0;background:transparent;color:#fff;font-size:30px;line-height:1;cursor:pointer;}

/* ============================================================
   v4.42 文字ヒーロー（写真は文字なし・見出しはHTML）
   ============================================================ */
.kwband{margin-top:73px}          /* 共通バー（固定）の下に出す */
.kwband + .th{margin-top:0}
.th{position:relative;margin-top:73px;background:#0d1b33;color:#fff;overflow:hidden;line-height:1.5;padding:0!important}
.th__media{position:absolute;inset:0}
.th__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.th__inner{position:relative;max-width:1240px;margin:0 auto;padding:clamp(56px,7vw,96px) 40px;min-height:clamp(520px,44vw,680px);display:flex;align-items:center}
.th__copy{max-width:600px}
.th__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.th__chips span{font-size:.82rem;padding:6px 12px;border:1px solid rgba(201,168,76,.7);border-radius:999px;color:#efe3bd;background:rgba(13,27,51,.35)}
.th__h1{margin:0;font-family:"Noto Serif JP",serif;font-weight:700;font-size:clamp(34px,3.9vw,56px);line-height:1.32;letter-spacing:.01em;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.th__lead{margin:22px 0 0;font-size:clamp(15px,1.15vw,18px);line-height:1.95;color:#dbe3f0}
.th__lead b{color:#e6c86e;font-weight:600}
.th__lead .mga-mark{display:inline-block;width:3.6em;height:.75em;vertical-align:-.06em;margin:0 .1em;color:#fff;fill:currentColor}
.th__cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:30px}
.th__btn{display:inline-block;padding:17px 32px;background:#c9a84c;color:#17233d;font-weight:700;font-size:17px;border-radius:4px;text-decoration:none}
.th__btn:hover{background:#dcbf66}
.th__tel{text-decoration:none;color:#fff;display:flex;flex-direction:column;line-height:1.2}
.th__tel .n{font-family:"Noto Serif JP",serif;font-size:27px;font-weight:700;letter-spacing:.02em}
.th__tel .c{font-size:12.5px;color:#b9c6dc;margin-top:4px}

/* a：写真全面。左だけ紺のグラデで文字を読ませる */
.th--a .th__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,22,44,.92) 0%,rgba(10,22,44,.78) 42%,rgba(10,22,44,.25) 68%,rgba(10,22,44,0) 100%)}
.th--a.th--img1 .th__media img{object-position:70% 30%}
.th--a.th--img1 .th__media::after{background:linear-gradient(90deg,rgba(10,22,44,.93) 0%,rgba(10,22,44,.8) 40%,rgba(10,22,44,.2) 66%,rgba(10,22,44,0) 100%)}
.th--a.th--img2 .th__media img,.th--a.th--img3 .th__media img{object-position:right center}
.th--a.th--img2 .th__media::after,.th--a.th--img3 .th__media::after{background:linear-gradient(90deg,rgba(10,22,44,.55) 0%,rgba(10,22,44,.35) 40%,rgba(10,22,44,0) 62%)}

/* b：左が紺パネル、右が写真（分割） */
.th--b .th__media{left:46%}
.th--b .th__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d1b33 0%,rgba(13,27,51,0) 22%)}
.th--b .th__copy{max-width:520px}
.th--b.th--img1 .th__media img{object-position:center 30%}

@media (max-width:767px){
  .kwband{margin-top:60px}
  .th{margin-top:60px}
  .th__media{position:relative;inset:auto;aspect-ratio:4/3;left:0!important}
  .th__media img{position:absolute;inset:0}
  .th__media::after{display:none!important}
  .th--img1 .th__media{aspect-ratio:1/1}
  .th__inner{padding:26px 18px 30px;min-height:0;display:block}
  .th__copy{max-width:none}
  .th__h1{font-size:30px}
  .th__lead{font-size:15px}
  .th__lead .pc{display:none}
  .th__cta{flex-direction:column;align-items:stretch;gap:12px;margin-top:22px}
  .th__btn{text-align:center}
  .th__tel{align-items:center;padding:14px;border:1px solid rgba(255,255,255,.4);border-radius:4px}
}

/* 共通バー：スマホのメニューボタン */
.hdr-menu{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;margin-left:6px}
.hdr-menu span{display:block;width:22px;height:2px;background:#1a3260}
@media (max-width:767px){.hdr-menu{display:flex}}

/* 会社概要 */
.c-company{background:#f7f8fb}
.company-dl{display:grid;grid-template-columns:160px 1fr;gap:0;max-width:820px;margin:28px auto 0;border-top:1px solid #dfe3ec;font-size:.98rem}
.company-dl dt,.company-dl dd{margin:0;padding:14px 12px;border-bottom:1px solid #dfe3ec;line-height:1.7}
.company-dl dt{font-weight:700;color:#1a3260;background:#eef1f7}
.company-dl a{color:#1a3260}
@media (max-width:767px){.company-dl{grid-template-columns:1fr}.company-dl dt{padding-bottom:4px;border-bottom:0}.company-dl dd{padding-top:4px}}

/* ============================================================
   v4.44 ヒーローを1画面に収める／リードの改行／ナビを軽く
   ============================================================ */
:root{--hdr-h:73px;--band-h:0px}
.kwband{margin-top:var(--hdr-h)}
.th{margin-top:var(--hdr-h)}
.kwband + .th{margin-top:0}
.th__inner{
  min-height:clamp(460px, calc(100svh - var(--hdr-h) - var(--band-h)), 720px);
  padding-top:clamp(22px, 4.5vh, 72px);
  padding-bottom:clamp(22px, 4.5vh, 72px);
}
.th__chips{margin-bottom:clamp(12px,2.2vh,22px)}
.th__h1{font-size:clamp(32px, min(3.6vw, 6.4vh), 56px)}
.th__lead{margin-top:clamp(12px,2.2vh,22px)}
.th__cta{margin-top:clamp(16px,3vh,30px)}
/* リード：PCは1行ずつ（折り返さない）、狭い画面では自然に折り返す */
.th__copy{max-width:720px}
.th__lead .ln{display:block}
@media (min-width:1100px){ .th__lead .ln{white-space:nowrap} }
.th--b .th__copy{max-width:640px}
@media (min-width:1100px) and (max-width:1439px){ .th--b .th__lead{font-size:15.5px} }

/* ナビ：太字をやめて軽く、間隔を広く。コラムは区切りの右 */
.d-nav{gap:26px}
.d-nav a{font-weight:500;font-size:.86rem;letter-spacing:.06em}
.d-nav a:hover{color:#b08d2e}
.d-nav .d-nav-col{padding-left:22px;border-left:1px solid #d6dbe6}
/* ヘッダー：電話番号はヒーローと下部バーにあるので、ナビがある幅では出さない。春風〜とナビの間に余白 */
.d-nav ~ .header-right .header-tel{display:none!important}
.motto{margin-right:30px}
@media (max-width:767px){
  .hdr-long{display:none}
  .btn-header{padding:9px 14px!important;font-size:.8rem!important}
  .header-inner{padding:0 10px 0 14px!important;gap:8px}
  .header-right{gap:4px!important}
}
@media (max-width:767px){.th__lead{font-size:14px;letter-spacing:0}}

/* v4.45 1b：オペレーターを写真の中央へ（元画像では左寄り 約42%）。
   左端を基点に拡大して右へ寄せる。右端のモニター（24/7 の文字）は画面外へ出る */
.th--b.th--img1 .th__media{overflow:hidden}
.th--b.th--img1 .th__media img{object-position:center 30%;transform:scale(1.4);transform-origin:0% 38%}
@media (max-width:767px){
  .th--b.th--img1 .th__media img{transform:scale(1.2);transform-origin:0% 45%}
}
@media (max-width:767px){.th__lead .ln{display:inline}.th__lead .ln:last-child{display:block;margin-top:6px}}