
/* 基本スタイル */
:root{
  --brand-bg:#0a2a43;
  --text:#333;
  --link:#0066cc;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  color:var(--text);
  line-height:1.6;
}

/* ヘッダー */
header{
  background-color:var(--brand-bg);
  color:#fff;
  padding:20px 0;
  position:sticky;
  top:0;
  z-index:1000;
}
.header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.site-logo{font-size:1.5rem;font-weight:bold}

nav ul{list-style:none;margin:0;padding:0;display:flex}
nav ul li{margin-left:20px}
nav ul li a{color:#fff;text-decoration:none;font-weight:500;transition:color .3s,border-bottom .3s;border-bottom:2px solid transparent}
nav ul li a:hover{color:#00aaff;border-bottom:2px solid #00aaff}

/* ハンバーガーボタン（PCでは非表示） */
.menu-btn{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:30px;height:24px;
  background:none;border:none;cursor:pointer;
}
.menu-btn span{display:block;width:100%;height:3px;background-color:#fff;border-radius:2px}
.nav{display:flex}

/* スマホ用 */
@media (max-width:1024px){
  .menu-btn{display:flex}
  .nav{display:none;position:absolute;top:70px;right:0;background-color:var(--brand-bg);padding:20px;width:200px;border-radius:5px}
  .nav.open{display:block}
  .nav ul{display:flex;flex-direction:column;gap:15px}
  .nav li{list-style:none}
  .nav a{color:#fff;text-decoration:none}
}

/* TOPヒーロー */
.hero{
  position:relative;width:100%;height:500px;
  background-image:url('../images/top.jpg');
  background-size:cover;background-position:center center;
}
.hero::before{content:"";position:absolute;inset:0;background-color:rgba(0,0,0,.4)}
.hero-text{position:relative;color:#fff;text-align:center;top:50%;transform:translateY(-50%);font-size:2rem;font-weight:bold}

/* 共通レイアウト */
.container{max-width:1100px;margin:0 auto;padding:40px 20px}
section{margin-bottom:60px}
section h2{font-size:1.7rem;color:var(--brand-bg);margin-bottom:20px}

/* 会社概要テーブル */
.company-table{width:100%;border-collapse:collapse}
.company-table th,.company-table td{padding:10px;border:1px solid #ddd;text-align:left}
.company-table th{background-color:#f5f5f5;width:30%}

/* アクセス */
.map-wrap{width:100%;height:450px;border:1px solid #ddd;overflow:hidden}

/* フッター */
footer{background:var(--brand-bg);color:#fff;text-align:center;padding:20px 0}

/* レスポンシブ */
@media (max-width:768px){
  .hero{height:250px}
  .hero-text{font-size:1.4rem}
  nav ul{flex-direction:column;gap:10px}
  nav ul li{margin-left:0}
}

/* アコーディオン */
.accordion-box{border:2px solid #333;border-radius:8px;margin-bottom:30px;overflow:hidden}
/* チェックボックス非表示 */
.accordion-box input{display:none}
/* タイトル */
.accordion-box label{display:flex;justify-content:space-between;align-items:center;padding:15px;background:var(--brand-bg);color:#fff;cursor:pointer;font-size:18px;font-weight:bold;border-bottom:1px solid rgba(255,255,255,.2);position:relative}
/* 右側の矢印 */
.accordion-box label::after{content:"\25BC";position:absolute;right:15px;top:50%;transform:translateY(-50%);transition:.3s}
/* 開いた時の矢印回転 */
.accordion-box input:checked + label::after{transform:rotate(180deg)}
/* 内容エリア（初期は非表示） */
.accordion-box .content{max-height:0;overflow:hidden;transition:max-height .35s ease, padding .35s ease;background:#fff;padding:0 15px}
/* 開いたとき */
.accordion-box input:checked ~ .content{padding:15px;max-height:1000px;margin-bottom:15px}
/* 文書整え */
.accordion-box .content table{width:100%;border-collapse:collapse}
.accordion-box .content th,.accordion-box .content td{border:1px solid #ccc;padding:8px;text-align:left}

/* 見出しのアンカー余白 */
h2{scroll-margin-top:80px}

/* リンクスタイル（インライン排除） */
.link-external{color:var(--link);text-decoration:underline}
.link-external:focus-visible{outline:2px solid #ffbf47;outline-offset:2px}

/* フォーカス可視化 */
:focus-visible{outline:2px solid #ffbf47;outline-offset:2px}

/* 右寄せユーティリティ */
.align-right{text-align:right}
