/* assets/css/history.css */
/* =====================================================
   history.css（Page-only / site.css+site.js compatible）
   - 共通（font / header / nav / reveal / underline / footer）は site.css に完全委譲
   - ここには「ページ固有」＝ hero背景 / timeline / glass modal のみ
   - ガラスモーダルは維持
===================================================== */

:root{
  --ink:#163a5c;
  --ink2:#244e7a;

  --paper1:#faf7ef;
  --paper2:#f5f1e8;

  /* timeline */
  --tl-line-from:#7fb6ff;
  --tl-line-to:#195aa6;
}

/* services系ページの配色：site.css のCSS変数で差し替える（正攻法） */
body.services-page{
  --page-bg:
    radial-gradient(1200px 800px at 10% -10%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--paper1) 0%, var(--paper2) 100%);
  --page-fg: var(--ink);
  color: var(--page-fg);
}

/* footer下の帯が出る場合の保険（ページ内のみで完結） */
body.history-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body.history-page .sub-main{
  flex:1;
}

/* ===== Hero（背景画像だけページ固有） ===== */
.sub-hero{
  position:relative;
  min-height:220px;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  margin-top:64px; /* fixed header offset */
}
.sub-hero--history{
  background:url("../images/history01.jpg") center/cover no-repeat;
}
.sub-hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(22,58,92,.78) 0%, rgba(22,58,92,.72) 100%);
}
.sub-hero__inner{ position:relative; z-index:1; }
.sub-hero__title{
  margin:0;
  font-size:clamp(26px,3vw,36px);
  font-weight:900;
  letter-spacing:.02em;
  color:#eaf4ff;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.sub-hero__lead{
  margin:6px 0 0;
  font-size:14px;
  letter-spacing:.14em;
  color:#bfe2ff;
  text-transform:uppercase;
  text-shadow:
    0 0 14px rgba(174,227,255,.55),
    0 2px 10px rgba(0,0,0,.28);
}

/* ===== Layout（ページ固有の余白だけ） ===== */
.history-section{ padding:0 0 28px; }
.sub-container{
  max-width:1100px;
  margin:0 auto;
  padding:40px 20px;
}

/* ===== Intro ===== */
.history-intro{ padding:10px 0 4px; }
.history-intro__label{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.18em;
  color:#195aa6;
  font-weight:800;
  text-transform:uppercase;
}
.history-intro__lead{
  margin:8px 0 0;
  font-size:16px;
  line-height:1.95;
  color: var(--ink2);
}

/* ===== Timeline ===== */
.history-wrap{ padding-top:10px; }

.history-timeline{
  position:relative;
  list-style:none;
  margin:0;
  padding:10px 0 10px 24px;
}
.history-timeline::before{
  content:"";
  position:absolute;
  left:10px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg, var(--tl-line-from), var(--tl-line-to));
  opacity:.45;
}

.history-item{
  position:relative;
  padding:14px 0 14px 14px;
}
.history-item::before{
  content:"";
  position:absolute;
  left:-2px;
  top:22px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#195aa6;
  box-shadow:0 0 0 4px rgba(25,90,166,.15);
}

.history-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  align-items:baseline;
  margin:0 0 6px;
}
.history-date{
  font-weight:900;
  color:#195aa6;
  letter-spacing:.02em;
}
.history-title{
  margin:0;
  font-weight:900;
  color: var(--ink);
  letter-spacing:.01em;
}

.history-summary{
  margin:0;
  color: var(--ink2);
  font-size:15px;
  line-height:1.9;
}

/* ===== CHECK button ===== */
.history-more{
  margin-top:10px;
  padding:0;
  border:0;
  background:transparent;
  color:#195aa6;
  font-weight:900;
  letter-spacing:.04em;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  position:relative;
}
.history-more::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  height:2px;
  width:0;
  background: linear-gradient(to right, #195aa6, #7fb6ff);
  border-radius:2px;
  transition: width .35s ease;
}
.history-more:hover::after{ width:100%; }
.history-more:focus-visible{
  outline:2px solid rgba(127,182,255,.9);
  outline-offset:4px;
  border-radius:10px;
}

/* ===== Modal（ガラス維持） ===== */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:60000;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.modal-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}

.modal{
  position:fixed;
  inset:0;
  z-index:61000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.modal.is-open{
  opacity:1;
  pointer-events:auto;
}

.modal-panel{
  width:min(920px, 92vw);
  max-height:min(82vh, 760px);
  overflow:auto;

  border-radius:18px;
  border:1px solid rgba(255,255,255,.38);

  background: rgba(255,255,255,.18);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);

  box-shadow:
    0 26px 60px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.55);

  position:relative;
}

.modal-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 42%);
}

.modal-head{
  position:sticky;
  top:0;
  z-index:2;
  padding:18px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,.22);
  background: rgba(15,23,42,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal-title{
  margin:0;
  font-size:18px;
  font-weight:900;
  letter-spacing:.02em;
  color:#eaf4ff;
  text-shadow:
    0 0 18px rgba(174,227,255,.55),
    0 2px 14px rgba(0,0,0,.35);
}

.modal-date{
  margin:8px 0 0;
  color:#bfe2ff;
  font-weight:900;
  letter-spacing:.02em;
}

.modal-close{
  position:absolute;
  right:12px;
  top:12px;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  color:#ffffff;
  cursor:pointer;
  display:grid;
  place-items:center;
  z-index:3;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.modal-close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.38);
}

.modal-body{ padding:16px 18px 18px; }

.modal-body-card{
  border-radius:16px;
  padding:16px 16px;

  background: rgba(255,255,255,.62);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  border:1px solid rgba(255,255,255,.70);
  box-shadow:
    0 18px 40px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.modal-text{
  margin:0;
  color:#1d3e63;
  font-size:15px;
  line-height:1.95;
  white-space:pre-wrap;
}
.modal-text + .modal-text{ margin-top:12px; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .history-meta{ gap:8px 10px; }
  .modal-panel{ width:min(960px, 94vw); }
}
@media (max-width: 640px){
  .sub-container{ padding:34px 14px; }
  .history-title{ font-size:15px; }
  .history-summary{ font-size:14px; }
  .modal-title{ font-size:16px; }
}