:root{
  --blue:#0080C0; --blue-d:#0067a0; --navy:#003080; --gray:#505050;
  --ink:#1f2733; --muted:#6b7480; --line:#e6eaf0; --bg:#ffffff; --soft:#f5f8fb;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.sec{padding:84px 0}
.eyebrow{font-size:12.5px;letter-spacing:.12em;font-weight:700;color:var(--blue)}
/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav .logo img{height:32px;display:block}
.nav nav ul{display:flex;gap:34px;list-style:none;align-items:center}
.nav nav a{font-size:14px;color:var(--gray);font-weight:600}
.nav nav a:hover{color:var(--blue)}
.nav .cta-head{background:var(--blue);color:#fff!important;padding:10px 20px;border-radius:8px;font-size:13.5px}
.nav .cta-head:hover{background:var(--blue-d)}
/* hero */
.hero{background:linear-gradient(180deg,#f3f8fc 0%,#ffffff 100%);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1.1fr;gap:48px;align-items:center;padding-top:72px;padding-bottom:80px}
.hero h1{font-size:42px;line-height:1.4;font-weight:800;letter-spacing:.01em;color:#10243d}
.hero h1 .em{color:var(--blue)}
.hero .lead{margin-top:24px;font-size:16px;color:var(--gray);line-height:1.95}
.hero .ctas{margin-top:34px;display:flex;flex-direction:column;gap:12px;max-width:430px}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:700;padding:15px 22px;border-radius:10px;transition:.15s;line-height:1.45}
.hero .ctas .btn{min-height:74px}
.btn .arw{font-size:16px;opacity:.8}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-d)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#04246b}
.btn-outline{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.hero .art{border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(15,40,80,.12);border:1px solid var(--line)}
.hero .art img{display:block;width:100%}
/* trust strip */
.strip{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .wrap{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;padding:26px 28px}
.strip .item{font-size:14px;color:var(--gray);font-weight:600;display:flex;align-items:center;gap:9px}
.strip .item b{color:var(--blue)}
/* services */
.svc-head{text-align:center;max-width:720px;margin:0 auto 52px}
.svc-head h2{font-size:30px;font-weight:800;margin-top:12px;color:#12263f}
.svc-head p{margin-top:14px;color:var(--muted);font-size:15px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:1px solid var(--line);border-radius:14px;padding:30px 26px;background:#fff;transition:.18s;display:flex;flex-direction:column}
.card:hover{box-shadow:0 14px 34px rgba(15,40,80,.09);transform:translateY(-3px);border-color:#d6e3f0}
.card .ic{width:46px;height:46px;border-radius:11px;background:linear-gradient(135deg,#e8f3fb,#d4e8f7);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.card .ic svg{width:24px;height:24px;stroke:var(--blue)}
.card h3{font-size:17.5px;font-weight:800;color:#16293f}
.card p{font-size:14px;color:var(--muted);margin-top:10px;flex:1}
.card .more{margin-top:18px;font-size:13.5px;font-weight:700;color:var(--blue)}
/* news */
.news{background:var(--soft);border-top:1px solid var(--line)}
.news-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px}
.news-top h2{font-size:28px;font-weight:800;color:#12263f}
.news-top a{font-size:14px;font-weight:700;color:var(--blue)}
.news-list{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.news-item{display:flex;gap:22px;align-items:center;padding:20px 26px;border-bottom:1px solid var(--line);transition:.15s}
.news-item:last-child{border-bottom:none}
.news-item:hover{background:#f7fafd}
.news-item time{font-size:13px;color:var(--muted);min-width:96px;font-variant-numeric:tabular-nums}
.news-item .badge{font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:999px;white-space:nowrap}
.badge.press{background:#e6f1fb;color:var(--blue)}
.badge.info{background:#eef0f3;color:var(--gray)}
.badge.prod{background:#e9f7ee;color:#1f9d57}
.news-item .ttl{font-size:14.5px;font-weight:600;color:var(--ink)}
.news-item:hover .ttl{color:var(--blue)}
/* bottom cta */
.bcta{background:linear-gradient(135deg,#003080,#0067a8);color:#fff;text-align:center}
.bcta h2{font-size:30px;font-weight:800}
.bcta p{margin-top:14px;color:#d4e2f5;font-size:15px}
.bcta .row{margin-top:30px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.bcta .row a{font-size:15px;font-weight:700;padding:15px 30px;border-radius:10px}
.bcta .w{background:#fff;color:var(--navy)}
.bcta .g{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4)}
/* footer */
footer.site{background:#0c1118;color:#aeb6c2;padding:50px 0 34px;font-size:13.5px}
footer.site .ftop{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.08)}
footer.site .fb img{height:30px;filter:brightness(0) invert(1);opacity:.92}
footer.site .fb p{margin-top:14px;color:#7e8794;max-width:340px;line-height:1.8}
footer.site .fcol h4{font-size:12px;letter-spacing:.08em;color:#7e8794;margin-bottom:12px}
footer.site .fcol a{display:block;color:#c4ccd6;margin-bottom:9px}
footer.site .fcol a:hover{color:#fff}
footer.site .fbot{padding-top:22px;color:#6b7480;font-size:12.5px}
/* page header (sub pages) */
.phead{background:linear-gradient(180deg,#f3f8fc,#fff);border-bottom:1px solid var(--line);padding:54px 0 44px}
.phead .eyebrow{color:var(--blue)}
.phead h1{font-size:34px;font-weight:800;margin-top:10px;color:#12263f}
.phead .crumb{font-size:13px;color:var(--muted);margin-top:14px}
.phead .crumb a{color:var(--blue)}
/* company table */
.profile{max-width:860px;margin:0 auto}
.profile table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.profile th,.profile td{text-align:left;padding:18px 24px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:top}
.profile th{width:200px;background:var(--soft);color:var(--gray);font-weight:700}
.profile tr:last-child th,.profile tr:last-child td{border-bottom:none}
/* news page list */
.newspage{max-width:900px;margin:0 auto}
.newspage .yr{font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.06em;margin:0 0 6px}
@media(max-width:880px){
  .hero .wrap{grid-template-columns:1fr;padding-top:48px;padding-bottom:54px}
  .hero h1{font-size:31px}
  .cards{grid-template-columns:1fr}
  






/* --- PC用の基本設定（既存のスタイルがある場合は調整してください） --- */
.hamburger-btn {
  display: none; /* PCでは非表示 */
}

/* --- 📱 スマホサイズ（768px以下）の設定 --- */
@media screen and (max-width: 768px) {
  .wrap.nav {
    position: relative; /* ボタンの絶対配置の基準にする */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* ハンバーガーボタンの見た目（三本線） */
  .hamburger-btn {
    display: block; /* スマホで表示 */
    position: relative;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 100; /* メニューより上に表示 */
  }

  .hamburger-btn span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #333; /* 三本線の色（サイトに合わせて変更してください） */
    transition: all 0.3s ease;
  }

  /* 三本線の配置 */
  .hamburger-btn span:nth-child(1) { top: 0; }
  .hamburger-btn span:nth-child(2) { top: 11px; }
  .hamburger-btn span:nth-child(3) { bottom: 0; }

  /* ✖ ボタンに変化させるアニメーション（アクティブ時） */
  .hamburger-btn.active span:nth-child(1) { transform: translateY(11px) rotate(-45deg); }
  .hamburger-btn.active span:nth-child(2) { opacity: 0; }
  .hamburger-btn.active span:nth-child(3) { transform: translateY(-11px) rotate(45deg); }

  /* スマホ時のナビゲーションメニュー（初期状態は非表示） */
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%; /* 画面の右外に隠しておく */
    width: 80%;    /* メニューの幅 */
    height: 100vh;
    background-color: #fff; /* メニューの背景色 */
    padding-top: 80px; /* ロゴやボタンと被らないように */
    transition: all 0.3s ease;
    z-index: 99;
    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
  }

  /* メニューが開いたとき（アクティブ時） */
  .nav-menu.active {
    right: 0; /* 画面内にスライドイン */
  }

  /* スマホメニュー内のリストを縦並びにする */
  .nav-menu ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
  }

  .nav-menu ul li {
    list-style: none;
  }

  .nav-menu ul li a {
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
  }
}