/* ============== Reset / Base ============== */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* 1) スムーススクロール */
body {
  margin: 0;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  color: #1f2937;
  line-height: 1.75;
  background: #fff;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }
table { border-collapse: collapse; width: 100%; }
ul,ol { margin: 0; padding: 0; list-style: none; } /* 箇条書き丸消し */

:root{
  --navy-900:#0b1a3c; /* R9寄りの濃紺 */
  --navy-800:#132656;
  --navy-700:#1c3474;
  --accent:#0ea5e9;
  --muted:#6b7280;
  --line:#e5e7eb;
  --container:1200px;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}
.container{ max-width: var(--container); margin:0 auto; padding:0 16px; }
.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus{ left:16px; top:16px; background:#fff; padding:8px 12px; border-radius:8px; z-index:1000; }

/* 固定ヘッダー分のオフセット（1)） */
.section{ padding:64px 0; scroll-margin-top: 88px; } 

/* ============== Topbar ============== */
.topbar{ background: linear-gradient(90deg,var(--navy-900),var(--navy-700)); color:#cbd5e1; font-size:14px; }
.topbar__in{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:8px 0; }
.topbar__in a{ color:#fff; font-weight:700; }

/* ============== Header ============== */
.header{ position:sticky; top:0; z-index:20; background:var(--navy-900); color:#fff; transition: box-shadow .25s ease; }
.header.is-scrolled{ box-shadow: 0 6px 20px rgba(0,0,0,.15); } /* 2) 影 */

.header__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; }
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand__main{ font-size:28px; font-weight:800; letter-spacing:.06em; }
.brand__sub{ font-size:12px; opacity:.75; margin-top:6px; }

/* Nav */
.nav-toggle{ display:none; width:44px; height:44px; position:relative; border:0; background:transparent; cursor:pointer; }
.nav-toggle span{ position:absolute; left:10px; right:10px; height:2px; background:#fff; border-radius:2px; transition:.25s; }
.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:21px; }
.nav-toggle span:nth-child(3){ top:28px; }

.nav{ display:flex; }
.nav__list{ display:flex; gap:20px; }
.nav__list a{ display:block; padding:10px 10px; border-radius:10px; color:#e5e7eb; font-weight:500; }
.nav__list a:hover{ background:rgba(255,255,255,.08); color:#fff; text-decoration:none; }
.nav__list .line a{ background:#06c755; color:#fff; border-radius:999px; padding:10px 14px; }
.nav__list .line a:hover{ filter:brightness(1.05); }

/* 3) 現在位置ハイライト */
.nav__list a[aria-current="page"]{
  background: rgba(255,255,255,.14);
  color:#fff;
  text-decoration: none;
}

/* ============== Hero ============== */
.hero{
  color:#fff;
  background:
    linear-gradient(180deg, rgba(11,26,60,.86), rgba(11,26,60,.55)),
    url("../img/hero.jpg") center/cover no-repeat,           /* css/ から見た相対パス */
    radial-gradient(circle at 20% 0%, #172554, var(--navy-900));
}
.hero__in{ padding:80px 0 90px; }
.hero h1{ margin:0 0 10px; font-size:40px; line-height:1.3; font-weight:800; letter-spacing:.02em; }
.hero p{ margin:0 0 22px; color:#e5e7eb; }
.cta{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-block; padding:12px 18px; border:1px solid rgba(255,255,255,.6); border-radius:12px; color:#fff; background:transparent; font-weight:700; text-decoration:none; }
.btn:hover{ background:rgba(255,255,255,.12); text-decoration:none; }
.btn--primary{ background:var(--accent); border-color:var(--accent); }

/* ============== Sections / Blocks ============== */
.alt{ background:#f8fafc; }
.sec-head{ margin-bottom:24px; }
.sec-head h2{ margin:0; font-size:28px; color:var(--navy-900); letter-spacing:.02em; }
.sec-head .sub{ margin:6px 0 0; font-size:14px; color:var(--muted); }

/* Profile */
.profile{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; }
.profile__table{ background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.profile__table th, .profile__table td{ padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.profile__table th{ width:28%; background:#f3f4f6; color:#374151; font-weight:700; }
.profile__image{ align-self:start; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }

/* Cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{ background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.card__body{ padding:14px 16px; }
.card__body h3{ margin:0 0 6px; font-size:18px; }

/* Features */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature{ background:#fff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.feature__icon{ font-size:28px; }
.feature h3{ margin:6px 0 6px; font-size:18px; }

/* Maintenance menu */
.menu{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.menu__item{ background:#fff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }

/* Map */
.map{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#e5e7eb; }
.map iframe{ width:100%; height:60vh; min-height:380px; border:0; display:block; }

/* Contact */
.contact{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.contact__block{ background:#fff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.tel{ font-size:22px; font-weight:800; color:var(--navy-900); }

/* Footer */
.footer{ background:var(--navy-900); color:#cbd5e1; margin-top:32px; }
.footer__in{ display:flex; justify-content:space-between; gap:24px; padding:28px 0; }
.brand--footer .brand__main{ font-size:22px; }
.footer__nav ul{ display:grid; gap:8px; }
.footer__nav a{ color:#e5e7eb; }
.footer__nav a:hover{ color:#fff; text-decoration:none; }
.pagetop{ text-align:center; padding:10px 0; background:var(--navy-800); }
.pagetop a{ color:#fff; font-size:12px; }
.copy{ text-align:center; font-size:12px; padding:10px 0 18px; color:#a7b0c3; border-top:1px solid rgba(255,255,255,.08); }

/* ============== Responsive ============== */
@media (max-width: 1024px){
  .cards, .features, .menu, .contact { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px){
  .nav-toggle{ display:inline-block; }
  .nav{ position:absolute; inset:64px 0 auto 0; background:var(--navy-900); display:none; }
  .nav.is-open{ display:block; }
  .nav__list{ flex-direction:column; padding:12px 16px 18px; gap:6px; }
  .nav__list a{ padding:10px 12px; }
}
@media (max-width: 720px){
  .hero__in{ padding:56px 0 64px; }
  .hero h1{ font-size:28px; }
  .profile{ grid-template-columns:1fr; }
  .cards, .features, .menu, .contact { grid-template-columns:1fr; }
}

/* ===== Feature Page ===== */
.page-hero{
  color:#fff;
  background:
    linear-gradient(180deg, rgba(11,26,60,.86), rgba(11,26,60,.55)),
    url("../img/page-hero.jpg") center/cover no-repeat,   /* 任意。なければ濃紺グラデのみ */
    radial-gradient(circle at 20% 0%, #172554, var(--navy-900));
}
.page-hero__in{ padding:48px 0; }
.page-hero h1{ margin:0 0 4px; font-size:36px; font-weight:800; letter-spacing:.02em; }
.page-hero .sub{ margin:0; color:#e5e7eb; }

.breadcrumb{ font-size:12px; color:var(--muted); margin:12px 0 24px; }
.breadcrumb a{ color:var(--navy-700); }
.breadcrumb .sep{ margin:0 6px; color:#9ca3af; }

.feature-wrap{ display:flex; flex-direction:column; gap:32px; }

/* サンプル風の濃紺帯＋本文レイアウト */
.band{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.band__title{
  background:var(--navy-900); color:#fff;
  padding:10px 16px; font-weight:700; letter-spacing:.01em;
}
.band__body{
  padding:16px;
  display:grid; grid-template-columns:1fr 360px; gap:24px; align-items:start;
}
.band__body--single{ grid-template-columns:1fr; }
.band__img img{ width:100%; height:auto; border-radius:12px; }
.badge-box{ display:flex; justify-content:center; align-items:center; padding:8px; }
.badge-box img{ max-width:320px; height:auto; border-radius:10px; }

.inline-links{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.inline-links a{ color:#0b67c2; text-decoration:underline; }

/* 赤文字の強調（サンプルの赤見出し風） */
.em{ color:#c62828; font-weight:700; }

@media (max-width: 960px){
  .band__body{ grid-template-columns:1fr; }
}

/* ---- features cards fix ---- */
.features{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 1frで均等 & はみ出し防止 */
  gap: 18px;
  margin: 0;           /* ULのデフォルト余白を消す */
  padding: 0;
}
.feature{
  list-style: none;
  background: #fff;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feature__icon{
  font-size: 28px;
  line-height: 1;      /* 絵文字のはみ出しを防ぐ */
  display: inline-block;
}

/* レスポンシブで崩れないよう段数を落とす */
@media (max-width: 1024px){
  .features{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .features{ grid-template-columns: 1fr; }
}



/* 会社概要：左右の高さ揃え */
@media (min-width: 721px){
  .profile{            /* 左右2カラムの親 */
    align-items: stretch;              /* 子を同じ高さに伸ばす */
  }
  .profile__image{                     /* 右側の写真コンテナ */
    height: 100%;
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  .profile__image > img{
    width: 100%;
    height: 100%;                      /* ← ここがポイント */
    object-fit: cover;                 /* はみ出しは中央トリミング */
    object-position: center;
    display: block;
  }
  /* 左のカードが「auto高さ」だと均等にならないケースの保険 */
  .profile__table{
    height: 100%;
  }
}



/* === ぱんくず部分のズレ直し === */
/* container と breadcrumb を同時に持つ要素を確実に中央揃え＋同ガターに */
.container.breadcrumb{
  max-width: var(--container);
  margin-inline: auto;        /* ← 中央寄せ（.containerの上書きを防ぐ） */
  padding-inline: 16px;       /* ← ヘッダー/本文と同じ左右ガター */
  box-sizing: border-box;
  width: auto !important;     /* もし過去の幅指定があっても打ち消す */
}

/* 既存で margin を上書きしている場合の保険（左右は auto を維持） */
.container.breadcrumb{
  margin-block: 12px 24px;    /* 上下だけ指定、左右は auto のまま */
}

/* 見た目の調整（任意） */
.breadcrumb{ font-size: 12.5px; color:#6b7280; }
.breadcrumb a{ color:#1c3474; text-decoration: none; }
.breadcrumb a:hover{ text-decoration: underline; }
.breadcrumb .sep{ margin: 0 6px; color:#9ca3af; }



/* === Hero Emblem (element-based, strong) === */
.hero, .page-hero { position: relative; overflow: hidden; }

.hero .hero-emblem,
.page-hero .hero-emblem{
  position: absolute;
  z-index: 40;                         /* オーバーレイより上、テキスト(30未満なら)の下 */
  top: 50%;
  transform: translateY(-50%);

  /* 本文コンテナの右端＋ガター16pxに合わせる（はみ出し防止） */
  right: max(16px, calc((100vw - var(--container)) / 2 + 16px));

  /* 1080×1080の正方形想定。ヒーロー高さ比で収め、上限/下限を設定 */
  height: clamp(160px, 72%, 380px);
  width: auto;                         /* 比率維持 */
  object-fit: contain;

  /* “薄い”と感じる場合は 0.7〜1.0 で調整 */
  opacity: 0.9;
  mix-blend-mode: normal;              /* ブレンドで薄くならないように固定 */
  pointer-events: none;
}

/* ===== Header always on top ===== */
.topbar,
.header{
  position: relative;     /* static の場合でもスタック文脈を作る */
  z-index: 5000;          /* 充分に大きな値で最前面に固定 */
}

/* グローバルナビ（PC/モバイルどちらでも上に来るように） */
#globalnav,
.header .nav,
.header .nav__list,
.header .nav-toggle{
  position: relative;
  z-index: 5100;
}

/* モバイルで開くパネル型ナビがある場合の保険 */
#globalnav.is-open{
  z-index: 5200;          /* 開いたときも確実に最前面 */
}

/* エンブレムは必ずヘッダーより下（見た目の安全策） */
.hero .hero-emblem,
.page-hero .hero-emblem{
  z-index: 400 !important; /* ヘッダー(5000)より十分小さく */
  pointer-events: none;     /* クリックは下の要素（ヘッダー等）に通す */
  mix-blend-mode: normal;   /* ブレンドで薄くならないように固定 */
}

/* ===== band の画像を“右端ピタッ”にして、サイズはCSSで管理 ===== */
:root{ --band-img-max: 280px; }    /* 画像の上限：好みで 240〜320px などに */

.page-features .band__body,
.page-maintenance .band__body{
  display: grid;
  grid-template-columns: 1fr max-content; /* 左=本文 / 右=画像の実幅 */
  gap: 24px;
  align-items: center;
}

.page-features .band__img,
.page-maintenance .band__img,
.page-features .badge-box,
.page-maintenance .badge-box{
  justify-self: end;               /* 右端にピタッ */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.page-features .band__img img,
.page-maintenance .band__img img,
.page-features .badge-box img,
.page-maintenance .badge-box img{
  width: auto;                     /* 画像は実寸ベース */
  max-width: var(--band-img-max);  /* ここで「ほどほどサイズ」を統一 */
  height: auto;
  display: block;
}