/* =========================
   Base
   ========================= */
   :root{
    --bg:#fff;
    --ink:#0f0f10;
    --muted:rgba(15,15,16,.66);
    --line:rgba(15,15,16,.10);
  
    --max:1080px;
    --radius:14px;
  
    /* nav pill */
    --nav-pill-w: 140px;
    --nav-pill-h: 40px;
    --nav-pill-r: 2px;
  }
  
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    /* 全体は普通の日本語向けフォント */
    font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto,
                 "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    letter-spacing:.01em;
  }
  
  a{ color:inherit; text-decoration:none; }
  a:hover{ text-decoration:none; }
  
  .container{ max-width:var(--max); margin:0 auto; padding:0 22px; }
  
  /* =========================
     Fade-in (per-element duration / delay)
     ========================= */
  .fadein-text{
    opacity: 0;
    transform: translateY(12px);
    animation: fadeInUpText var(--fadein-dur, 1000ms) ease var(--fadein-delay, 0ms) forwards;
  }
  @keyframes fadeInUpText{ to{ opacity:1; transform: translateY(0);} }
  
  .fadein-hero{ --fadein-dur: 1800ms; --fadein-delay: 0ms; }
  .fadein-sub { --fadein-dur: 1800ms; --fadein-delay: 200ms; }
  
 /* =========================
   Header (Gradient boundary)
   ========================= */
   header{
    position: sticky;
    top: 0;
    z-index: 50;
  
    /* ヘッダー本体：50%透過 */
    background: rgba(255,255,255,0.50);
  
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  
    /* ★これが重要：擬似要素の重なりを確実にする */
    position: sticky;
    isolation: isolate; /* ← z-indexの混乱を止める */
  }
  
  
  /* ヘッダーの中身はグラデより前 */
  .header-inner{
    position: relative;
    z-index: 1;
  }

  .header-inner{
    height:80px;
    display:grid;
    grid-template-columns: 1fr auto 1fr; /* left logo / center nav / right spacer */
    align-items:center;
  }
  
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    justify-self:start;
  }
  .brand img{
    width: clamp(40px, 10vw, 200px);
    height: auto;
    display: block;
    transform: translateY(-8px);
  }
  
  .brand .brand-text{ font-weight:800; font-size:14px; line-height:1.1; }
  
/* Center nav */
.nav{
    justify-self:center;
    display:flex;
    gap:20px;
    align-items:center;
  }
  
  /* Link as pill */
  .nav a{
    font-family: "Space Grotesk","Montserrat",sans-serif;
    font-weight:700;
    letter-spacing:0.04em;
    line-height: 1;
    width: var(--nav-pill-w);
    height: var(--nav-pill-h);
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-items: center;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    border-radius: var(--nav-pill-r);
    transform: translateY(-10px);
    color: var(--ink);
    transition: color 250ms ease;
  }

  .nav a .nav-label{
    display: inline-block;
    transform: translateY(-1px); /* -1〜-2で微調整 */
  }
  
  /* Hover background from bottom */
  @media (hover:hover){
    .nav a::before{
      content:"";
      position:absolute;
      inset:0;
      bottom:-1px;
      background:#000;
      transform: translateY(110%);
      transition: transform 250ms ease;
      z-index:-2;
    }
    .nav a:hover{ color:#fff; }
    .nav a:hover::before{ transform: translateY(0); }
  }
  
  /* 黒い帯（本体） */
  .nav a::after{
    content:"";
    position:absolute;
    inset:0;
    background:#000;
    z-index:-1;
  
    opacity:0;
    transform: scaleX(0);
    transform-origin: center;
  }
  
  /* Current page always black */
  .nav a[aria-current="page"]{
    color:#fff;
  }
  .nav a[aria-current="page"]::after{
    opacity:1;
    transform: scaleX(1);
  }
  
  /* Click shrink */
  .nav a.is-leaving-pill{
    color:#fff;
  }
  .nav a.is-leaving-pill::after{
    opacity:1;
    transform: scaleX(1);
    animation: pillShrink var(--pill-out, 250ms) ease forwards;
  }
  
  @keyframes pillShrink{
    to { transform: scaleX(0.62); }
  }
  
  /* Enter grow */
  .nav a.is-enter-pill::after{
    opacity:1;
    transform: scaleX(0.62);
    animation: pillGrow var(--pill-in, 420ms) cubic-bezier(.2,.8,.2,1) forwards;
  }
  
  @keyframes pillGrow{
    to { transform: scaleX(1); }
  }
  
  /* クリック確定中：黒い帯を出しっぱなしにする */
.nav a.is-selected{
    color:#fff;
  }
  .nav a.is-selected::after{
    opacity: 1;
    transform: scaleX(1);
  }
  
  
  /* =========================
     Sections
     ========================= */
  
  /* 使わない（中央配置の邪魔になるので固定で0） */
  .hero-space{ height: 0 !important; }
  
  /* HERO：画面中央（縦横） */
  .hero{
    min-height: calc(100vh - 80px); /* 72px=ヘッダー高さ */
    display:flex;
    align-items:center;      /* 縦中央 */
    justify-content:center;  /* 横中央 */
    text-align:center;
    padding: 0;
  }
  
  /* HERO内のコンテンツを中央寄せ */
  .hero .container{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 10px;
  }
  
  /* HERO内の見出しだけに適用（他ページへの影響を防ぐ） */
  .hero h1{
    margin:0;
    text-align:center;
    font-weight:800;
    line-height:1.12;
  
    /* 画面幅に合わせて自動で縮む/大きくなる */
    font-size: clamp(28px, 4.6vw, 72px);
  
    /* PCでは折り返し禁止 */
    white-space: nowrap;
  }
  
  .hero .sublead{
    margin: 0;
    font-size: clamp(14px, 1.8vw, 22px); /* 最小14 / 画面に応じて / 最大22 */
    color: rgba(15,15,16,.85);
    letter-spacing:.02em;
  }
  @media (max-width: 768px){
    .hero .sublead{ font-size: 16px; }
  }
  
  
  /* Section heading under hero */
  .section{
    padding: 60px 0;
  }
  .section h2{
    margin:0 0 18px;
    text-align:center;
    font-size: clamp(18px, 2.1vw, 28px);
    font-weight:800;
  }
  
  /* Image like Squarespace card */
  .hero-media{
    margin: 26px auto 0;
    max-width: 860px;
    border-radius: var(--radius);
    overflow:hidden;
    border:1px solid var(--line);
  }
  .hero-media img{ width:100%; height:auto; display:block; }
  
  /* List */
  .list{
    max-width: 860px;
    margin: 0 auto;
    padding:0;
    list-style:none;
  }
  .list li{
    padding: 10px 0;
    border-bottom:1px solid var(--line);
    line-height:1.85;
  }
  .list li::before{
    content:"・";
    margin-right:.4em;
    color: var(--muted);
  }
  
  /* =========================
     About table
     ========================= */
  .table-wrap{
    max-width: 860px;
    margin: 50px auto 150px;
  }
  .info-table{
    width: 65%;
    margin: 0 auto;            /* ← テーブル自体を中央寄せ */
    border-collapse: collapse;
    font-size: 16px;
    table-layout: fixed;       /* ← 幅を安定させる */
  }
  .info-table th, .info-table td{
    border-bottom:1px solid #222;
    padding: 10px 10px;
    vertical-align:top;
  }
  .info-table th{
    width:140px;
    text-align:left;
    font-weight:800;
  }
  
  /* =========================
     Member cards (2 columns)
     ========================= */
  .members{
    max-width: 1100px;
    margin: 40px auto 0;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items:start;
  }
  .member{
    display:grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    align-items:start;
  }
  .member img{
    width:220px;
    height:320px;
    object-fit:cover;
    border-radius: 0px;
    border:1px solid var(--line);
    background:#f4f4f4;
  }
  .member h3{
    margin: 0 0 10px;
    font-size: clamp(26px, 2.4vw, 40px);
    line-height:1.1;
  }
  .member p{
    margin:0;
    color: var(--ink);
    line-height:1.85;
  }
  
  /* =========================
     Contact form (Squarespace-like)
     ========================= */
  .form-wrap{
    max-width: 720px;
    margin: 0 auto;
  }
  .form-item{
    margin: 22px 0;
  }
  label{
    display:block;
    font-weight:800;
    margin-bottom:8px;
  }
  .req{
    color:#d00;
    font-weight:900;
    margin-left:.5em;
  }
  
  input, textarea{
    width:100%;
    border-radius: 12px;
    border:1px solid var(--line);
    padding: 14px 12px;
    font-size:16px;
    outline:none;
    background:#eee;
  }
  textarea{ min-height: 160px; resize: vertical; }
  input:focus, textarea:focus{ border-color: rgba(0,0,0,.35); background:#f2f2f2; }
  
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 14px 22px;
    background:#000;
    color:#fff;
    border:1px solid #000;
    cursor:pointer;
    font-weight:800;
  }
  
  /* =========================
     Footer (minimal)
     ========================= */
  footer{
    padding: 60px 0 40px;
    text-align:center;
    color: var(--muted);
    font-size:13px;
  }
  
  /* =========================
     Responsive
     ========================= */
  @media (max-width: 980px){
    .members{ grid-template-columns: 1fr; }
    .member{ grid-template-columns: 180px 1fr; }
    .member img{ width:180px; height:180px; }
  }
  
  /* スマホ：ナビ縦並び＋ヒーローの折り返し許可 */
  @media (max-width: 768px){
    .hero h1{
      white-space: normal;
      font-size: clamp(26px, 7vw, 46px);
      line-height: 1.2;
    }
  }
  
  /* Squarespaceっぽいモバイルナビ */
  @media (max-width: 640px){
    :root{
      --nav-pill-w: min(86vw, 340px);
      --nav-pill-h: 64px;
    }
    .header-inner{
      grid-template-columns: 1fr;
      height:auto;
      padding: 14px 0 12px;
      gap: 10px;
    }
    .brand{ justify-self:center; }
    .nav{ justify-self:center; flex-direction:column; gap:12px; }
  
    .member{ grid-template-columns: 1fr; }
    .member img{ width:100%; height:240px; }
  }
  
/* =========================
   Page transition (fade in/out)
   ========================= */

/* 初期は透明（JSで表示に切り替える） */
.page{
    opacity: 0;
    transition: opacity 1000ms ease;
  }
  
  /* 表示状態 */
  .page.is-ready{
    opacity: 1;
  }
  
  /* 離脱（次ページへ行く直前） */
  .page.is-leaving{
    opacity: 0;
    transition: opacity 300ms ease;
  }
  
  /* 現在ページの黒帯が「消える」 */
.nav a.is-leaving-pill::after{
    opacity: 1;
    transform: scaleX(1);
    transform-origin: center;
    animation: pillDisappear var(--pill-out, 250ms) ease forwards;
  }
  
  @keyframes pillDisappear{
    to{
      transform: scaleX(0);
      opacity: 0;
    }
  }
  /* 文字も帯に合わせて消す */
.nav a .nav-label{
    display:inline-block;
    transform: scaleX(1);
    opacity: 1;
    transform-origin: center; /* 帯と同じ中心から縮む */
  }
  
  /* 離脱時：文字が縮んで消える */
  .nav a.is-leaving-pill .nav-label{
    animation: navLabelDisappear var(--pill-out, 50ms) ease forwards;
  }
  
  @keyframes navLabelDisappear{
    to{
      transform: scaleX(0);
      opacity: 0;
    }
  }
  /* さっきまで選択されていた項目の文字を「ゆっくり戻す」 */
.nav a .nav-label{
    display:inline-block;
  }
  
  .nav a.is-prev-return .nav-label{
    animation: prevLabelReturn 700ms ease forwards; /* ←ここで時間調整 */
  }
  
  @keyframes prevLabelReturn{
    from{
      opacity: 0;
      transform: translateY(2px) scaleX(0.88);
    }
    to{
      opacity: 1;
      transform: translateY(0) scaleX(1);
    }
  }
  /* =========================
   Nav lock (クリック後にhover反応を止めて固定)
   ========================= */
body.is-navigating .nav{
    pointer-events: none; /* クリック後はナビを触れない＝hoverも起きない */
  }
  
  /* hoverで出る黒帯(::before)を無効化して見た目を固定 */
  @media (hover:hover){
    body.is-navigating .nav a::before{
      display: none !important;
    }
  }
  
 /* 共通：左端を揃える */
.th-fit{
    display:inline-block;
    text-align:left;
  }
  
  /* 2文字 → 4文字分に見せる（間を2つ増やす） */
  .th-2{
    letter-spacing: 2em;   /* ←ここだけ微調整 */
  }
  
  /* 3文字 → 4文字分に見せる（間を1つ増やす） */
  .th-3{
    letter-spacing: .5em;  /* ←ここだけ微調整 */
  }
  
  /* 最後の余白でズレないように：最後の文字だけ戻す */
  .th-fit{
    margin-right: -0.5em; /* 保険。効きすぎるなら消してOK */
  }
  .th-2{ margin-right: -1em; }
  
  /* === REQUIRED（必須）見た目調整：必ず最後に置く === */
.form-wrap label{
    display:flex;          /* ラベル内を横並びにする */
    align-items:baseline;  /* 黒文字と赤文字の高さを揃える */
    gap: 0px;              /* 黒文字と赤文字の間隔（ここで詰める） */
  }
  
  /* 必須バッジ（薄ピンクの角丸） */
  .form-wrap label .req{
    display:inline-flex;
    align-items:center;      /* 縦中央 */
    justify-content:center;  /* 横中央 */
    padding: 3px 5px;       /* 上下を少し厚めに */
    border-radius: 6px;
    background: rgba(255, 105, 180, .22);
    color: #d00;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;        /* ここがポイント */
  }
  
  

  /* 姓・名を横一列に */
.form-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;            /* 2つの間隔 */
    align-items:start;
  }
  
  /* 画面が狭い時は縦並びに戻す */
  @media (max-width: 640px){
    .form-row{
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }
/* 姓・名の行だけ、余白が二重にならないよう調整 */
.form-row{
    margin-bottom: 22px;   /* 他の form-item と同じ間隔にする */
  }
  
  .form-row .form-item{
    margin: 0;             /* form-item の上下marginを消す（ここが二重の原因） */
  }


  
  /* フォーム全体をカード化して影を付ける */
.form-wrap{
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
    padding: 34px 32px;
  }
  
  /* スマホは内側余白を少し減らす */
  @media (max-width: 640px){
    .form-wrap{
      padding: 24px 18px;
    }
  }
  
  input, textarea{
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
  }
  
  /* 3D Viewer iframe */
.viewer-wrap{
  max-width: 980px;
  margin: 28px auto 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  background: #fff;
}

/* 16:10っぽい比率（800x500に近い）でレスポンシブ */
#viewer{
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  border: 0;
  display: block;
}

/* スマホで少し縦長にしたい場合（任意） */
@media (max-width: 640px){
  #viewer{ aspect-ratio: 4 / 3; }
}

/* Sketchfab 2-up grid */
.sf-grid{
  max-width: 1100px;
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.sf-card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

/* iframe をレスポンシブに（16:9） */
.sf-card iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  display: block;
}

/* クレジットの見た目（元の style を置き換え） */
.sf-credit{
  font-size: 13px;
  font-weight: normal;
  margin: 8px 10px 12px;
  color: #4A4A4A;
}
.sf-credit a{
  font-weight: bold;
  color: #1CAAD9;
  text-decoration: none;
}
.sf-credit a:hover{
  text-decoration: underline;
}

/* スマホは縦並び */
@media (max-width: 860px){
  .sf-grid{
    grid-template-columns: 1fr;
  }
}

/* TOP 背景アニメ */
#bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: block;
  pointer-events: none;
}

/* 背景を隠さない（白い面が上に乗ってる場合は透明に） */
.page{ background: transparent; }

@media (prefers-reduced-motion: reduce){
  #bg{ display:none; }
}

/* ヘッダーと本文の境界を「透けのグラデ」で溶かす */
.page{
  position: relative; /* 擬似要素の基準 */
  background: transparent; /* 背景アニメを見せる */
}

/* ===== 背景アニメ(canvas)のフェード ===== */
#bg{
  opacity: 0; /* 初期は見えない */
  transition: opacity var(--bg-in, 600ms) ease;
}

/* TOPで表示 */
body.bg-ready #bg{
  opacity: 1;
}

/* TOPから離脱するときは消す */
body.bg-leaving #bg{
  opacity: 0;
  transition: opacity var(--bg-out, 350ms) ease;
}

/* TOP以外のページでは常に非表示（保険） */
body:not([data-page="top"]) #bg{
  opacity: 0 !important;
}

.glass-block{
  position: relative;
  max-width: 1100px;       /* まとまりの幅 */
  margin: 18px auto 0;
  padding: 40px 100px;
  border-radius: 22px;

  /* 背景：透過白50%（アニメが透ける） */
  background: rgba(255,255,255,0.10);

  /* すりガラス感（いらなければ削除OK） */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* 枠線は引かない */
  border: none;
  /* 外側だけ透明にフェード（内側はベタ塗りのまま） */
-webkit-mask-image:
linear-gradient(to bottom, transparent 0, #000 24px),
linear-gradient(to top,    transparent 0, #000 24px),
linear-gradient(to right,  transparent 0, #000 24px),
linear-gradient(to left,   transparent 0, #000 24px);
-webkit-mask-composite: source-in;

mask-image:
linear-gradient(to bottom, transparent 0, #000 24px),
linear-gradient(to top,    transparent 0, #000 24px),
linear-gradient(to right,  transparent 0, #000 24px),
linear-gradient(to left,   transparent 0, #000 24px);
mask-composite: intersect;
}
  
  /* 外周を“線なしで”ふわっと消す（境界が見えないグラデ） */
  .glass-block::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    pointer-events:none;
  
    /* 端ほど透明→中央は少し濃い：境界が消える */
    background: radial-gradient(
      110% 140% at 50% 40%,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.50) 45%,
      rgba(255,255,255,0.15) 72%,
      rgba(255,255,255,0.00) 100%
    );
  }
  
  /* 中身はオーバーレイより前へ */
  .glass-block > *{
    position: relative;
    z-index: 1;
  }
  
  /* ブロック内の影が強すぎる場合に少し柔らげる（任意） */
  .glass-block .viewer-wrap,
  .glass-block .sf-card{
    box-shadow: 0 4px 34px rgba(0,0,0,.10);
  }
  
  /* スマホ調整 */
  @media (max-width: 640px){
    .glass-block{
      padding: 18px 14px;
      border-radius: 18px;
    }
  }

  .member p{
    text-align: justify;        /* 両端揃え */
    text-justify: inter-ideograph;
    line-height: 1.9;
  }