@charset "UTF-8";

/* ==========================================================================
   トップページ ─ ヒーロー / ハイライト / 年表 / スキル / 学歴職歴 / これから
   ========================================================================== */

/* --------------------------------------------------------------------------
   ヒーロー
   -------------------------------------------------------------------------- */
.hero{background:var(--paper); padding-block:80px 0; position:relative; overflow:hidden}
.hero__inner{display:grid; gap:40px; align-items:center; grid-template-columns:1.15fr .85fr}

.hero__name{font-size:clamp(34px,5.6vw,56px); line-height:1.25; letter-spacing:.01em}
.hero__name .en{
  display:block; font-family:var(--font-num); font-size:.36em; font-weight:500;
  letter-spacing:.22em; color:var(--faint); text-transform:uppercase; margin-top:10px;
}
.hero__lead{margin-top:24px; font-size:17px; line-height:2; color:var(--ink-2); max-width:34ch}
.hero__lead b{
  font-weight:700;
  background:linear-gradient(transparent 62%, rgba(240,160,60,.35) 62%);
}
.hero__meta{margin-top:22px; color:var(--muted); font-size:14px}

.hero__stats{display:grid; gap:14px}
.stat{
  display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:0 16px;
  padding:16px 20px; background:var(--ground); border-radius:var(--radius);
  border-left:5px solid var(--sc,var(--c8));
}
.stat__fig{font-family:var(--font-num); font-size:34px; font-weight:600; line-height:1; color:var(--sci,var(--c8-ink))}
.stat__fig small{font-size:.5em; font-weight:500; margin-left:3px}
.stat__label{font-size:13.5px; font-weight:700; line-height:1.6}
.stat__note{grid-column:2; font-size:12.5px; color:var(--muted); line-height:1.7}

@media (max-width:860px){
  .hero{padding-block:52px 0}
  .hero__inner{grid-template-columns:1fr; gap:32px}
  .hero__lead{max-width:none}
}

/* --------------------------------------------------------------------------
   ハイライト
   -------------------------------------------------------------------------- */
/* ハイライトは7枚。4列＋3列で並べ、最後の行は左寄せにする */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.pillar{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:22px 20px 19px; background:var(--paper); border:1px solid var(--rule);
  border-radius:var(--radius); text-decoration:none;
  border-top:4px solid var(--pc,var(--c8));
  transition:transform .2s ease, box-shadow .2s ease;
}
.pillar:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.pillar__idx{font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:14px; font-weight:600; letter-spacing:.06em; color:var(--pci,var(--c8-ink))}
.pillar h3{font-size:16px; line-height:1.6}
.pillar p{font-size:13px; color:var(--muted); line-height:1.85; flex:1}
.pillar__go{font-size:12.5px; font-weight:700; color:var(--pci,var(--c8-ink))}

/* 3列が窮屈になる幅からは、1列の横長カードに切り替える */
@media (max-width:860px){
  .pillars{grid-template-columns:1fr; gap:10px}
  .pillar{
    display:grid; grid-template-columns:auto 1fr; gap:2px 16px;
    padding:15px 18px; border-top:1px solid var(--rule);
    border-left:4px solid var(--pc,var(--c8));
  }
  .pillar:hover{transform:none; box-shadow:var(--shadow-sm)}
  .pillar__idx{grid-row:1/4; padding-top:3px}
  .pillar p{flex:none}
}

/* --------------------------------------------------------------------------
   年表
   -------------------------------------------------------------------------- */
.timeline{padding-bottom:0}
.tl{position:relative}

/* スパインの起点（ペン先） */
.tl-start{display:grid; justify-items:center; margin-top:8px}
.tl-start .tip{
  width:0; height:0;
  border-left:11px solid transparent; border-right:11px solid transparent;
  border-bottom:22px solid var(--c1);
}
.tl-start .stem{width:14px; height:40px; background:var(--c1)}

.tl-item{
  position:relative;
  display:grid;
  grid-template-columns:1fr 132px 1fr;
  grid-template-areas:"year node card";
  align-items:center;
  column-gap:26px;
  padding-block:30px;
}
.tl-item:nth-child(even){grid-template-areas:"card node year"}

/* スパイン：各エントリが自分の色の帯を描き、次の色へグラデーションで繋ぐ */
.tl-item::before{
  content:""; position:absolute; z-index:0;
  left:50%; transform:translateX(-50%); top:0; bottom:0; width:14px;
  background:linear-gradient(180deg, var(--c) 0%, var(--c-next,var(--c)) 100%);
}
/* 段の切り替わりに置く小さな上向きシェブロン */
.tl-item + .tl-item::after{
  content:""; position:absolute; z-index:1; left:50%; top:0;
  transform:translate(-50%,-50%) rotate(45deg);
  width:9px; height:9px;
  border-top:2.5px solid rgba(255,255,255,.75);
  border-left:2.5px solid rgba(255,255,255,.75);
}

/* 円形ノード */
.tl-node{
  grid-area:node; justify-self:center; position:relative; z-index:2;
  width:92px; height:92px; border-radius:50%;
  background:var(--c); display:grid; place-items:center;
  box-shadow:0 0 0 9px var(--ground), 0 8px 20px -8px rgba(27,32,41,.4);
}
.tl-node svg{width:42px; height:42px; color:#fff}
/* 左右の装飾アーク */
.tl-node::before,.tl-node::after{
  content:""; position:absolute; width:114px; height:114px;
  border-radius:50%; border:3px solid var(--c); opacity:.5;
}
.tl-node::before{clip-path:inset(14% 58% 14% 0)}
.tl-node::after{clip-path:inset(14% 0 14% 58%)}

/* 年号 */
.tl-year{grid-area:year; position:relative}
.tl-item:nth-child(odd) .tl-year{text-align:right; padding-right:8px}
.tl-item:nth-child(even) .tl-year{text-align:left; padding-left:8px}
.tl-year b{
  display:block; font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:clamp(38px,5vw,54px); font-weight:600; line-height:1; color:var(--ink);
}
.tl-year span{display:block; font-size:12.5px; font-weight:500; color:var(--faint); margin-top:5px; letter-spacing:.06em}
/* ノードへ向かう矢印 */
.tl-year::after{
  content:""; position:absolute; top:50%; width:26px; height:1.5px; background:var(--rule-2);
}
.tl-item:nth-child(odd) .tl-year::after{right:-26px}
.tl-item:nth-child(even) .tl-year::after{left:-26px}

/* カード */
.tl-card{grid-area:card; position:relative}
.tl-card h3{font-size:19px; line-height:1.6; color:var(--c-ink)}
.tl-card p{margin-top:9px; font-size:14px; line-height:1.95; color:var(--ink-2)}
.tl-card .tags{margin-top:13px}
.tl-card__link{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-size:13px; font-weight:700; color:var(--c-ink); text-decoration:none;
  border-bottom:1.5px solid currentColor; padding-bottom:1px;
}
.tl-card__link:hover{gap:11px}
.tl-card__link .arw{font-family:var(--font-num); transition:transform .18s ease}
/* カード側の小さなドット */
.tl-card::before{
  content:""; position:absolute; top:50%; width:9px; height:9px; border-radius:50%;
  background:var(--paper); border:2.5px solid var(--c); transform:translateY(-50%);
}
.tl-item:nth-child(odd) .tl-card::before{left:-30px}
.tl-item:nth-child(even) .tl-card::before{right:-30px}

/* 詳細ページのあるエントリは一段強く見せる */
.tl-item--major .tl-card{
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
  padding:22px 24px; box-shadow:var(--shadow-sm);
}
.tl-item--major .tl-card::before{display:none}

/* 写真つきカード */
.tl-card figure{margin-top:14px; border-radius:8px; overflow:hidden; background:var(--ground-2)}
.tl-card figure img{width:100%; aspect-ratio:16/9; object-fit:cover}
.tl-card figcaption{font-size:11.5px; color:var(--muted); padding:7px 2px 0; line-height:1.7}

/* 末尾のリボンテール */
.tl-tail{display:grid; justify-items:center; position:relative}
.tl-tail i{
  display:block; width:14px; height:64px; background:var(--c14);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%);
}

@media (max-width:860px){
  .tl-item{
    grid-template-columns:64px 1fr;
    grid-template-areas:"node year" ". card";
    column-gap:18px; row-gap:8px; align-items:start; padding-block:22px;
  }
  .tl-item:nth-child(even){grid-template-areas:"node year" ". card"}
  .tl-item::before{left:32px}
  .tl-item + .tl-item::after{left:32px}
  .tl-node{width:52px; height:52px; box-shadow:0 0 0 7px var(--ground)}
  .tl-node svg{width:26px; height:26px}
  .tl-node::before,.tl-node::after{width:66px; height:66px; border-width:2.5px}
  .tl-item:nth-child(odd) .tl-year,
  .tl-item:nth-child(even) .tl-year{text-align:left; padding:0}
  .tl-year{display:flex; align-items:baseline; gap:10px; min-height:52px}
  .tl-year b{font-size:31px}
  .tl-year span{margin-top:0}
  .tl-year::after{display:none}
  .tl-card::before{display:none !important}
  .tl-item--major .tl-card{padding:18px 18px}

  /* スパインが左に寄るので、起点のペン先と末尾のリボンも同じ軸に合わせる。
     .wrap の内側で 25px ＝ 幅14pxの帯の中心が32px、モバイルの .tl-item::before と一致する。 */
  .tl-start,.tl-tail{justify-items:start}
  .tl-start .stem,.tl-tail i{margin-left:25px}
  .tl-start .tip{margin-left:21px}
}

/* --------------------------------------------------------------------------
   スキル
   -------------------------------------------------------------------------- */
/* 6グループなので3列（3+3）でちょうど埋まる */
.skills{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){ .skills{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .skills{grid-template-columns:1fr} }
.skill{background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); padding:20px 22px}
.skill h3{
  font-size:14px; letter-spacing:.03em; padding-bottom:10px; margin-bottom:13px;
  border-bottom:2px solid var(--sk,var(--c8)); color:var(--ski,var(--c8-ink));
}
.skill .tags{gap:6px}

/* --------------------------------------------------------------------------
   学歴・職歴
   -------------------------------------------------------------------------- */
.record{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:32px}
.record h3{font-size:16px; margin-bottom:14px; padding-bottom:9px; border-bottom:2px solid var(--ink)}
.record dl{display:grid; grid-template-columns:auto 1fr; gap:0 20px; margin:0}
.record dt{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:16px; font-weight:500; color:var(--muted); padding:11px 0;
  border-top:1px solid var(--rule); white-space:nowrap;
}
.record dd{margin:0; padding:11px 0; font-size:14px; line-height:1.8; border-top:1px solid var(--rule)}
.record dd small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}

/* --------------------------------------------------------------------------
   これから
   -------------------------------------------------------------------------- */
.future{background:var(--ink); color:#EEF1F6}
.future .eyebrow{color:rgba(255,255,255,.45)}
.future h2{color:#fff}
.future__lead{font-size:17px; line-height:2.05; max-width:60ch; color:#DDE3EC}
.future__lead b{color:#fff; font-weight:700}
.future__flow{display:flex; flex-wrap:wrap; gap:8px; margin-top:32px}
.future__flow li{
  font-size:13px; font-weight:500; padding:7px 15px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22); color:#E8EDF4;
}
.future__flow li.on{background:#fff; color:var(--ink); border-color:#fff; font-weight:700}

/* --------------------------------------------------------------------------
   連絡先
   -------------------------------------------------------------------------- */
.contact{text-align:center; padding-block:76px}
.contact h2{font-size:clamp(22px,3vw,30px)}
.contact p{margin-top:14px; color:var(--muted); font-size:15px}
.contact__links{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px}