@font-face{font-family:'NotoSansJP';src:url('assets/NotoSansJP.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
:root{--navy:#152B46;--teal:#168DB0;--teal-d:#096B88;--sub:#496173;--bg:#fff;--bg2:#f2f6f7;--line:#d7e1e6;--wrap:1180px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--navy);font-family:'NotoSansJP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',sans-serif;font-size:16px;line-height:1.9;letter-spacing:.01em;line-break:strict;word-break:normal;overflow-wrap:normal}
img{display:block;max-width:100%;height:auto}
p{text-wrap:pretty}
a{color:var(--teal-d)}
:focus-visible{outline:3px solid var(--teal-d);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{position:static;display:inline-block;padding:10px 20px;background:#fff}

.preview-bar{margin:0;padding:7px 20px;background:var(--navy);color:#fff;font-size:12px;line-height:1.6;letter-spacing:.08em}
.site-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:#fff;border-bottom:1px solid var(--line)}
.logo{display:inline-flex;align-items:center;min-height:44px}
.logo img{width:200px;height:40px}
.nav-pc{display:none}
.nav-pc ul{display:flex;gap:2px;margin:0;padding:0;list-style:none}
.nav-pc a{display:flex;align-items:center;min-height:44px;padding:0 12px;color:var(--navy);text-decoration:none;font-size:15px}
.nav-pc a:hover{color:var(--teal-d);text-decoration:underline;text-underline-offset:4px}
.nav-pc a[aria-current='page']{color:var(--teal-d);box-shadow:inset 0 -2px 0 var(--teal)}
.menu{position:static}
.menu summary{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:76px;padding:0 12px;border:1px solid var(--line);border-radius:2px;color:var(--navy);font-size:14px;cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;left:0;right:0;top:100%;z-index:20;padding:4px 20px 12px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 10px 24px rgba(21,43,70,.1)}
.menu-panel ul{margin:0;padding:0;list-style:none}
.menu-panel a{display:flex;align-items:center;min-height:52px;color:var(--navy);text-decoration:none;border-top:1px solid var(--line)}
.menu-panel a[aria-current='page']{color:var(--teal-d)}

.hero{padding:34px 0 0}
.hero-title{margin:0 0 20px;font-size:clamp(30px,8.6vw,64px);line-height:1.28;font-weight:700;letter-spacing:.005em}
.hero-title .l{display:block}
.hero-title .u,.sec-title .u,.page-title .u{display:inline-block}
.hero-lead{margin:0 0 24px;max-width:34em;color:var(--sub)}
.hero-lead span{display:block}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:2px;text-decoration:none;font-size:16px}
.btn-main{background:var(--teal-d);border:1px solid var(--teal-d);color:#fff}
.btn-main:hover{background:#075a73}
.btn-sub{background:#fff;border:1px solid var(--navy);color:var(--navy)}
.hero-connect{width:1px;height:40px;margin:14px 0 0 1px;background:var(--line)}
.hero-figure{margin:0}
.hero-media{overflow:hidden;background:var(--bg2)}
.hero-media img{width:100%;height:clamp(200px,42vw,520px);object-fit:cover;transform-origin:50% 55%;animation:slowzoom 24s ease-out both}
.hero-cap{max-width:var(--wrap);margin:0 auto;padding:8px 20px 0;font-size:12px;color:var(--sub)}
.hero-head>*{animation:rise .6s ease-out both}
.hero-head>*:nth-child(2){animation-delay:.09s}
.hero-head>*:nth-child(3){animation-delay:.16s}
.hero-head>*:nth-child(4){animation-delay:.22s}
@keyframes rise{from{transform:translateY(8px)}to{transform:none}}
@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.06)}}

.sec{padding:52px 0;border-top:1px solid var(--line)}
.sec-alt{background:var(--bg2)}
.page-head{padding-block:32px 10px}
.page-title{margin:0 0 16px;font-size:clamp(23px,6.2vw,42px);line-height:1.38;font-weight:700}
.sec-title{margin:0 0 16px;font-size:clamp(24px,5.6vw,38px);line-height:1.42;font-weight:700;text-wrap:balance}
.lede{margin:0 0 20px;max-width:38em;color:var(--sub)}
.rows{margin:26px 0 22px;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.rows>li{padding:20px 0;border-top:1px solid var(--line)}
.rows h3{margin:0 0 6px;font-size:18px;line-height:1.6}
.rows p{margin:0 0 6px;color:var(--sub);max-width:38em}
.rows p:last-child{margin-bottom:0}
.note{margin:24px 0;padding:14px 16px;background:#fff;border:1px solid var(--line)}
.note p{margin:0;color:var(--sub)}
.linkrow{display:flex;flex-wrap:wrap;gap:4px 24px;margin:20px 0 0;padding:0;list-style:none}
.alink{display:inline-flex;align-items:center;min-height:44px;color:var(--teal-d);text-decoration:underline;text-underline-offset:3px}
.spec{margin:24px 0 0;border-bottom:1px solid var(--line)}
.spec>div{padding:16px 0;border-top:1px solid var(--line)}
.spec dt{margin:0 0 2px;font-size:14px;color:var(--sub)}
.spec dd{margin:0}
.mails{margin:26px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.mails>li{padding:22px 0;border-top:1px solid var(--line)}
.mails h2{margin:0 0 6px;font-size:18px;line-height:1.6}
.mail-info p{margin:0 0 8px;color:var(--sub);max-width:36em}
.addr{font-size:14px;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
.mail-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;background:var(--teal-d);border:1px solid var(--teal-d);color:#fff;text-decoration:none}
.mail-btn:hover{background:#075a73}
.site-footer{padding:34px 0 42px;background:var(--bg2);border-top:1px solid var(--line);font-size:14px}
.f-name{margin:0}
.f-nav{display:flex;flex-wrap:wrap;gap:0 18px;margin:10px 0 14px;padding:0;list-style:none}
.f-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--navy)}
.f-note{margin:2px 0;color:var(--sub)}

@media (max-width:359px){
.logo img{width:168px;height:34px}
.menu summary{min-width:66px;padding:0 8px}
.wrap{padding-inline:16px}
.preview-bar{padding-left:16px}
.site-header{padding:12px 16px}
}
@media (min-width:768px){
.wrap{padding:0 32px}
.site-header{padding:16px 32px}
.menu-panel{padding:4px 32px 12px}
.hero{padding-top:56px}
.hero-connect{height:64px}
.hero-cap{padding:10px 32px 0}
.sec{padding:72px 0}
.page-head{padding-block:44px 12px}
.rows>li{display:grid;grid-template-columns:15em 1fr;gap:28px;padding:26px 0}
.rows h3{margin:0}
.spec>div{display:grid;grid-template-columns:12em 1fr;gap:24px;align-items:baseline}
.spec dt{margin:0}
.mails>li{display:grid;grid-template-columns:1fr 17em;gap:28px;align-items:start;padding:28px 0}
}
@media (min-width:1000px){
.nav-pc{display:block}
.menu{display:none}
}
@media (min-width:1080px){
.wrap{padding:0 56px}
.hero{padding-top:88px}
.hero-cap{padding:12px 56px 0}
.sec{padding:104px 0}
.page-head{padding-block:64px 16px}
.hero-lead{font-size:18px}
.lede{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
.hero-head>*{animation:none}
.hero-media img{animation:none;transform:none}
}
@media print{
.preview-bar,.nav-pc,.menu,.skip,.hero-connect{display:none}
body{background:#fff;color:#000;font-size:11pt;line-height:1.7}
a{color:#000;text-decoration:underline}
.sec,.site-footer,.sec-alt{background:#fff;border-top:1px solid #999}
.sec{padding:14px 0;break-inside:avoid}
.hero{padding:10px 0 0;break-inside:avoid}
.hero-head>*{animation:none}
.hero-media img{animation:none;transform:none;height:auto;max-height:70mm;object-fit:contain}
.btn,.mail-btn{background:#fff;color:#000;border:1px solid #666}
}

/* ===== page-head : full-bleed navy band (既存CSS末尾に追記) ===== */
/* 適用範囲は .page-head 内のみ。:root / .wrap / body などの既存宣言は書き換えません */

.page-head{
  /* .wrap の幅制限と中央寄せを打ち消して全幅化 */
  max-width:none;
  width:auto;
  margin-inline:0;
  background:var(--navy);
  color:#fff;
  /* 左右余白は .wrap の本文開始位置に一致（基準: 20px / 32px / 56px） */
  padding-block:40px;
  padding-inline:20px;
}

@media (max-width:359px){
  .page-head{padding-inline:16px}
}

@media (min-width:768px){
  .page-head{padding-block:76px;padding-inline:32px}
}

@media (min-width:1080px){
  /* viewport > 1180px では (100% - 1180px)/2 + 56px、1080〜1180px では 56px に収束 */
  .page-head{padding-inline:max(56px,calc((100% - var(--wrap)) / 2 + 56px))}
}

/* 見出し */
.page-head .page-title{
  margin:0;
  color:#fff;
  font-size:clamp(28px,4.8vw,56px);
  line-height:1.4;
  overflow-wrap:break-word;
}

/* mobile: 長い .u は折返し可 */
.page-head .page-title .u{
  color:inherit;
  white-space:normal;
}

/* PC: 意味単位（.u 内）は分割しない */
@media (min-width:768px){
  .page-head .page-title .u{white-space:nowrap}
}

/* リード文：紺背景に対して明るい色（#cfe0ea / #152b46 のコントラスト比は約10.6:1） */
.page-head .lede{
  margin:16px 0 0;
  max-width:38em;
  color:#cfe0ea;
}

@media (min-width:768px){
  .page-head .lede{margin-top:20px}
}

/* 印刷：白背景・黒文字 */
@media print{
  .page-head{
    background:#fff;
    color:#000;
    padding-block:0 16px;
    padding-inline:0;
  }
  .page-head .page-title,
  .page-head .page-title .u,
  .page-head .lede{color:#000}
}

/* ===== 下層ページ（main:has(> .page-head)）編集的レイアウト：末尾追記 ここから ===== */

/* 長い語・長い社名の自然折返し（表示形式は変えない） */
main:has(> .page-head) .sec-title .u,
main:has(> .page-head) .rows > li > h3 .u{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  line-break:strict;
}

/* rows：上余白なし・行padding28px・h3は縦並び見出し */
main:has(> .page-head) .sec .rows{ margin-top:0; }
main:has(> .page-head) .sec .rows > li{ padding:28px 0; }
main:has(> .page-head) .sec .rows > li:first-child{ padding-top:0; }
main:has(> .page-head) .sec .rows > li > h3{
  font-size:21px;
  line-height:1.55;
  overflow-wrap:anywhere;
  word-break:normal;
  line-break:strict;
}

/* 1000px以上：左見出し25% / 右内容70%（同じ開始行） */
@media (min-width:1000px){
  main:has(> .page-head) .sec > .wrap{
    display:grid;
    grid-template-columns:25% 70%;
    column-gap:5%;
    align-items:start;
  }
  main:has(> .page-head) .sec > .wrap > *{ grid-column:2; }
  main:has(> .page-head) .sec > .wrap > .sec-title{
    grid-column:1;
    grid-row:1;
    font-size:30px;
    line-height:1.45;
    margin-bottom:0;
    max-width:100%;
  }
}

/* 768px以上：h3+pは縦並び、3つ目のp（リンク）は行の右端へ */
@media (min-width:768px){
  main:has(> .page-head) .sec .rows > li{ display:block; }
  main:has(> .page-head) .sec .rows > li > h3{ font-size:24px; }
  main:has(> .page-head) .sec .rows > li:has(> p + p){
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:28px;
    row-gap:6px;
    align-items:start;
  }
  main:has(> .page-head) .sec .rows > li:has(> p + p) > h3{ grid-column:1; grid-row:1; }
  main:has(> .page-head) .sec .rows > li:has(> p + p) > p:first-of-type{
    grid-column:1; grid-row:2; margin:0;
  }
  main:has(> .page-head) .sec .rows > li:has(> p + p) > p:last-child{
    grid-column:2;
    grid-row:1 / span 2;
    align-self:center;
    justify-self:end;
    margin:0;
    white-space:nowrap;
  }
}

/* 767px以下：リンクは行の下に白地枠線ボタン（44px・CSS線chevron） */
@media (max-width:767px){
  main:has(> .page-head) .sec .rows > li:has(> p + p) > p:last-child{ margin:14px 0 0; }
  main:has(> .page-head) .sec .rows > li:has(> p + p) > p:last-child > .alink{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:44px;
    padding:10px 16px;
    background:#fff;
    border:1px solid #d7e1e6;
    border-radius:2px;
    color:#096B88;
    text-decoration:none;
    font-weight:700;
  }
  main:has(> .page-head) .sec .rows > li:has(> p + p) > p:last-child > .alink::after{
    content:"";
    flex:0 0 auto;
    width:8px;
    height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(-45deg);
  }
}
@media (max-width:767px) and (hover:hover){
  main:has(> .page-head) .sec .rows > li:has(> p + p) > p:last-child > .alink:hover{
    background:#152B46;
    border-color:#152B46;
    color:#fff;
  }
}
main:has(> .page-head) .sec .rows > li:has(> p + p) > p:last-child > .alink:focus-visible{
  outline:3px solid #096B88;
  outline-offset:2px;
}

/* linkrow：contact宛のみ主ボタン（48px・濃青緑背景＋白文字） */
main:has(> .page-head) .sec .linkrow{ row-gap:12px; align-items:center; }
main:has(> .page-head) .sec .linkrow .alink[href*="contact.html"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 24px;
  max-width:100%;
  background:#096B88;
  border:1px solid #096B88;
  border-radius:2px;
  color:#fff;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  overflow-wrap:anywhere;
  word-break:normal;
  line-break:strict;
}
@media (hover:hover){
  main:has(> .page-head) .sec .linkrow .alink[href*="contact.html"]:hover{
    background:#152B46;
    border-color:#152B46;
    color:#fff;
  }
}
main:has(> .page-head) .sec .linkrow .alink[href*="contact.html"]:focus-visible{
  outline:3px solid #152B46;
  outline-offset:3px;
}

/* 印刷：一列・白背景・黒文字 */
@media print{
  main:has(> .page-head){ background:#fff; color:#000; }
  main:has(> .page-head) .sec-alt{ background:#fff; }
  main:has(> .page-head) .sec > .wrap{ display:block; }
  main:has(> .page-head) .sec > .wrap > .sec-title{ margin-bottom:12px; }
  main:has(> .page-head) .sec .rows > li,
  main:has(> .page-head) .sec .rows > li:has(> p + p){ display:block; }
  main:has(> .page-head) .sec .rows > li:has(> p + p) > p:last-child{
    margin-top:8px;
    white-space:normal;
  }
  main:has(> .page-head) .sec .alink,
  main:has(> .page-head) .sec .linkrow .alink[href*="contact.html"]{
    display:inline;
    min-height:0;
    padding:0;
    background:#fff;
    border:0;
    color:#000;
    font-weight:400;
    text-decoration:underline;
  }
  main:has(> .page-head) .sec .alink::after{ content:none; }
}

/* ===== 下層ページ編集的レイアウト ここまで ===== */
/* ============================================================
   hero : PC(1080px以上) 2カラム化 — 文字左 / 写真右
   既存CSSの末尾に「追記のみ」。1079px以下と print は無改変。
   screen 限定にすることで既存の print 縦配置指定を温存する。
   ============================================================ */
@media screen and (min-width: 1080px) {

  /* 親をグリッド化：左=テキスト(.wrap.hero-head) / 右=写真(figure.hero-figure) */
  .hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 40px;
    max-width: 1440px;
    margin-inline: auto;
    padding: 64px 56px; /* desktop の padding-top:88px を上書き */
  }

  /* .wrap の max-width:1180 / margin:auto / padding:0 56px をグリッド内で解除 */
  .hero > .hero-head {
    max-width: none;
    margin: 0;
    padding: 0;
    min-width: 0;          /* グリッドアイテムのはみ出し防止 */
    text-align: left;
  }

  /* 文字カラム幅 約675px(1440時)/約486px(1080時) に対し 48px×8字=384px で2行維持 */
  .hero-title { font-size: 48px; }

  .cta-row { justify-content: flex-start; }  /* flex-wrap / gap:12px / min-height:48px は既存のまま */

  .hero-connect { display: none; }           /* PC2カラムでは非表示 */

  .hero-figure {
    margin: 0;
    min-width: 0;
  }

  /* 高さのみ上書き。width:100% / object-fit:cover / slow-zoom は既存を継承 */
  .hero-media img { height: clamp(420px, 32vw, 500px); }

  /* 出所表記は保持したまま左揃え・余白のみ最小化（12px 56px → 少量） */
  .hero-cap {
    text-align: left;
    margin: 0;
    padding: 10px 2px 0;
  }
}

/* ------------------------------------------------------------
   Codex 検収メモ（追記）
   - 追加は screen and (min-width:1080px) の1ブロックのみ。色・字種・
     hover・HTML・依存は未変更。@media print への追記も無し。
   - 要確認: figure.hero-figure が .hero の直下であること（grid前提）。
   - 要確認: 実機 1080 / 1280 / 1440 / 1920px で h1 が2行維持されるか。
   ------------------------------------------------------------ */
/* ===== 検収修正 2点（末尾追記・既存ルールは変更しない） ===== */

/* 修正1: 問い合わせページ対策。h2.sec-title を直下に持たない .wrap は
   1000px以上でも1カラム（block）に戻し、左25%の空白を解消する。
   :not(:has(> .sec-title)) により .sec-title を持つ他ページは既存グリッドを維持。
   block 化により直下要素の grid-column:2 は不活性になるため打ち消し不要。 */
@media (min-width: 1000px) {
  main:has(> .page-head) .sec > .wrap:not(:has(> .sec-title)) {
    display: block;
  }
}

/* 修正2: .rows の先頭 li が上罫線と近接していた点を調整。
   既存の padding-top:0 を同一詳細度・後方記述で上書きし 16px を確保。
   ブレークポイント内外の指定差がないため全幅共通で適用。 */
main:has(> .page-head) .sec .rows > li:first-child {
  padding-top: 16px;
}