@charset "utf-8";
/* CSS Document */

    /* =====================
       Base & Variables
       ===================== */
    :root {
      --bg: #ffffff;
      --fg: #121212;
      --muted: #6b7280; /* gray-500 */
      --line: #e5e7eb;  /* gray-200 */
      --accent: #0f172a; /* slate-900 */
      --maxw: 1200px;
      --space: clamp(16px, 2.2vw, 28px);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
      color: var(--fg);
      background: var(--bg);
      letter-spacing: 0.01em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    img, video { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; }
    ul { margin: 0; padding: 0; list-style: none; }

    .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--space); }

    /* =====================
       Header
       ===================== */
    header.site-header {
      position: sticky; top: 0; z-index: 40;
      backdrop-filter: saturate(180%) blur(10px);
      background: color-mix(in oklab, var(--bg) 85%, transparent);
      border-bottom: 1px solid var(--line);
      transition: transform .4s ease, background .3s ease;
    }
    header.site-header.is-hidden { transform: translateY(-100%); }

    .nav {
      display: flex; align-items: center; justify-content: space-between;
      height: 64px;
    }

    .brand { display: flex; align-items: center; gap: .75rem; }
    .brand__logo { width: 28px; height: 28px; border-radius: 50%; }
    .brand__name { font-family: "Noto Serif JP", serif; font-weight: 600; letter-spacing: .04em; }

    .nav__links { display: flex; gap: 2rem; align-items: center; }
    .nav__link { font-size: .95rem; opacity: .9; }
    .nav__link:hover { opacity: 1; }

    .nav__btn { display: none; border: 1px solid var(--fg); background: transparent; padding: .5rem .75rem; border-radius: 999px; }

    /* Mobile menu */
    .drawer { display: none; border-top: 1px solid var(--line); }
    .drawer a { display: block; padding: 14px var(--space); border-bottom: 1px solid var(--line); }

    @media (max-width: 900px) {
      .nav__links { display: none; }
      .nav__btn { display: inline-flex; }
      .drawer { display: block; }
      .drawer[hidden] { display: none !important; }
    }

    /* =====================
       Hero (Image/Video)
       ===================== */
    .hero { position: relative; }
    .hero__media { aspect-ratio: 16/9; background: #f3f4f6; }
    .hero__overlay {
      position: absolute; inset: 0; display: grid; place-items: end start;
      background: linear-gradient(to top, color-mix(in oklab, var(--bg) 30%, transparent), transparent 20%);
      color: var(--fg);
    }
    .hero__inner { padding: clamp(16px, 4vw, 48px); }
    .hero__kicker { color: var(--bg); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; }
    .hero__title { margin: 6px 0 0; font-family: "Noto Serif JP", serif; font-size: clamp(28px, 5vw, 58px); line-height: 1.08; }

   /* =====================
Collections (3-up)
===================== */
.section { padding: clamp(28px, 6vw, 72px) 0; }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: clamp(16px, 2.5vw, 24px); }
.section__title { font-family: "Noto Serif JP", serif; font-size: clamp(20px, 2.4vw, 32px); }
.section__more { color: var(--muted); font-size: .95rem; }


.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 24px); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }


.card { border: 1px solid var(--line); border-radius: 12px; overflow: clip; background: #fff; }
.card__media { aspect-ratio: 4/5; background: #f9fafb; }
.card__body { padding: 14px; display: grid; gap: 6px; }
.card__title { font-weight: 600; }
.card__meta { color: var(--muted); font-size: .9rem; }


/* =====================
Product grid (BASE)
===================== */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 24px); }
@media (max-width: 900px) { .product-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .product-grid { grid-template-columns: 1fr; } }


.product-card { border: 1px solid var(--line); border-radius: 12px; overflow: clip; background: #fff; display: grid; grid-template-rows: auto 1fr auto; }
.product-card__media { position: relative; aspect-ratio: 4/5; background: #f9fafb; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.product-card:hover .product-card__media img { transform: scale(1.03); }


.product-card__body { padding: 14px; display: grid; gap: 6px; }
.product-card__title { font-weight: 600; line-height: 1.4; }
.product-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: .92rem; }
.price { color: var(--fg); font-variant-numeric: tabular-nums; font-weight: 600; }
.badge { border: 1px solid var(--line); border-radius: 999px; padding: .2rem .6rem; font-size: .8rem; color: var(--muted); }


/* Ribbon (optional) */
.ribbon { position: absolute; left: 10px; top: 10px; background: var(--fg); color: #fff; font-size: .75rem; padding: .25rem .5rem; border-radius: 6px; }

 /* =====================
Lookbook (Masonry)
===================== */
.masonry { column-count: 3; column-gap: clamp(12px, 1.8vw, 24px); }
.masonry__item { break-inside: avoid; margin-bottom: clamp(12px, 1.8vw, 24px); border-radius: 10px; overflow: clip; border: 1px solid var(--line); background: #fff; }
.masonry__item img { width: 100%; height: auto; display: block; }
@media (max-width: 900px){ .masonry { column-count: 2; } }
@media (max-width: 640px){ .masonry { column-count: 1; } }


/* =====================
Lookbook → YouTube thumbnail grid (click-to-play)
===================== */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 24px); }
@media (max-width: 900px) { .video-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .video-grid { grid-template-columns: 1fr; } }


.video-card { border: 1px solid var(--line); border-radius: 12px; overflow: clip; background: #fff; }
.video-card__frame { position: relative; aspect-ratio: 16/9; background: #000; }
.video-thumb { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.96) contrast(1.02); }


.play-btn { position: absolute; inset: 0; display: grid; place-items: center; }
.play-btn button {
appearance: none; border: 0; cursor: pointer; border-radius: 999px;
width: 64px; height: 64px;
background: rgba(255,255,255,.9); box-shadow: 0 6px 24px rgba(0,0,0,.18);
display: grid; place-items: center;
transition: transform .2s ease;
}
.play-btn button:hover { transform: scale(1.03); }
.play-btn svg { width: 26px; height: 26px; fill: var(--fg); transform: translateX(1px); }


.video-card__body { padding: 12px 14px; display: grid; gap: 4px; }
.video-card__title { font-weight: 600; }
.video-card__meta { color: var(--muted); font-size: .9rem; }

    /* =====================
       Journal / News
       ===================== */
    .list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: clip; }
    .list__row { background: #fff; display: grid; grid-template-columns: 140px 1fr auto; gap: 16px; padding: 16px; align-items: center; }
    .list__date { color: var(--muted); font-variant-numeric: tabular-nums; }
    .list__title { font-weight: 600; }
    .list__arrow { opacity: .6; }
    @media (max-width: 640px){ .list__row { grid-template-columns: 1fr; gap: 6px; } .list__arrow { display:none; } }

    /* =====================
       Footer
       ===================== */
 footer.site-footer { border-top: 1px solid var(--line); padding: 28px 0 72px; color: var(--bg);background: #b1b1b1; }
.footgrid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
.footgrid h4 { font-family: "Noto Serif JP", serif; margin: 0 0 8px; color: var(--bg); }
.footgrid a { display: block; padding: 6px 0; color: inherit; }
/* perk list for membership */
.perklist { margin: 8px 0 0; padding-left: 1.2rem; color: var(--bg); }
.perklist li { list-style: disc; margin: 2px 0; }
@media (max-width: 900px){ .footgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .footgrid { grid-template-columns: 1fr; } }
    /* =====================
Micro-interactions
===================== */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; text-align: center; }
.reveal.is-visible { opacity: 1; transform: none; }
.btn { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--bg); padding: .6rem 1rem; border-radius: 999px; font-size: .95rem; }
.btn:hover { transform: translateY(-1px); }

.hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.hero__media {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

/* PC：横長動画 */
@media (min-width: 901px) {
  .hero__media {
    aspect-ratio: 16/9;
  }
  .hero-video.pc { display: block; }
}

/* スマホ：縦いっぱい動画 */
@media (max-width: 900px) {
  .hero__media {
    height: 100vh;           /* 画面の高さを全て使う */
    width: 100%;
  }
  .hero-video.sp { display: block; }
}
/* =====================
Responsive text alignment adjustment for Journal & About sections
===================== */
@media (max-width: 640px) {
#journal .list__row,
#about p,
#about .btn {
text-align: left;
}
#journal .section__head,
#about .section__head {
text-align: left;
}
}
#about {
padding-left: 4%;
padding-right: 4%;
}
}

/* === Mobile hamburger button === */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
@media (max-width: 900px){
  .nav__btn {
    display: inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0; border-radius:12px;
  }
}
.hamburger{ position:relative; width:20px; height:16px; display:inline-block; }
.hamburger i{
  position:absolute; left:0; right:0; height:2px; background:var(--fg);
  border-radius:2px; transition:transform .25s ease, opacity .25s ease, top .25s ease;
}
.hamburger i:nth-child(1){ top:0; }
.hamburger i:nth-child(2){ top:7px; }
.hamburger i:nth-child(3){ top:14px; }

/* open -> make X */
.nav__btn.is-open .hamburger i:nth-child(1){ top:7px; transform:rotate(45deg); }
.nav__btn.is-open .hamburger i:nth-child(2){ opacity:0; }
.nav__btn.is-open .hamburger i:nth-child(3){ top:7px; transform:rotate(-45deg); }

/* =====================
   Align hamburger menu button to right edge on mobile
   ===================== */
@media (max-width: 900px) {
  .nav {
    justify-content: space-between;
  }
  .nav__btn {
    margin-left: auto;
  }
}

/* =====================
   Instagram Section Layout
   ===================== */

/* グリッド全体 */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC時は3列 */
  gap: clamp(12px, 1.8vw, 24px);
  justify-items: center;
}

/* タブレット・スマホでの列数調整 */
@media (max-width: 900px) {
  .ig-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .ig-grid {
    grid-template-columns: 1fr;
    padding-left: 4%;
    padding-right: 4%;
  }
}

/* カードの基本形 */
.ig-card {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ig-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

/* サムネイル画像 */
.ig-thumb {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  filter: saturate(0.98) contrast(1.02);
  transition: transform 0.4s ease;
}
.ig-card:hover .ig-thumb {
  transform: scale(1.05);
}

/* ホバー時のオーバーレイ */
.ig-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0.05));
  color: #fff;
  font-size: 0.95rem;
  opacity: 0;
  transition: opacity 0.25s ease;
  letter-spacing: 0.03em;
}
.ig-card:hover .ig-overlay {
  opacity: 1;
}

/* フォールバック（画像なし時） */
.ig-fallback {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  color: #999;
  font-size: 0.95rem;
  background: #f7f7f7;
  border-radius: 12px;
  border: 1px solid #ddd;
}

/* セクションのタイトルやリンク */
#instagram .section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.5rem;
}
#instagram .section__title {
  font-size: 1.5rem;
  font-weight: 600;
}
#instagram .section__more {
  font-size: 0.9rem;
  text-decoration: none;
  color: #555;
  transition: opacity 0.3s ease;
}
#instagram .section__more:hover {
  opacity: 0.7;
}

@media (max-width: 640px) {
#collections,
#lookbook,
#journal,
#about,
#instagram {
padding-left: 4%;
padding-right: 4%;
}
}

.video-card__frame {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
}
.video-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.play-btn { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.play-btn button { pointer-events: auto; }

/* ── SP時は“横スクロール1枚表示”に切替 ───────────────────── */
@media (max-width: 640px) {
  /* 横スクロールの土台 */
  .ig-grid,
  .video-grid {
    display: flex;                 /* 横並び */
    gap: 12px;
    overflow-x: auto;              /* 横スクロール可 */
    scroll-snap-type: x mandatory; /* スナップ */
    -webkit-overflow-scrolling: touch;
    padding: 0 4%;                 /* 端を4%あける（既存ポリシーに合わせる） */
  }

  /* 各カードは“ほぼ1枚ぶん”の幅で固定（スナップ対象） */
  .ig-grid .ig-card,
  .video-grid .video-card {
    flex: 0 0 92%;        /* 見切れ気味=次がチラ見え（好みで90〜100%） */
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* スクロールバーは隠す（必要なければ外してOK） */
  .ig-grid::-webkit-scrollbar,
  .video-grid::-webkit-scrollbar { display: none; }
}

/* PC/Tablet は従来どおりのグリッドでOK（既存CSS優先） */

/* =====================
BASE / Collections: SP 横スワイプ（1枚表示）
===================== */
@media (max-width: 640px) {
/* 横スクロールの土台 */
#collections .product-grid {
display: flex; /* 横並び */
gap: 12px;
overflow-x: auto; /* 横スクロール可 */
scroll-snap-type: x mandatory; /* スナップ */
-webkit-overflow-scrolling: touch;
padding-left: 4%;
padding-right: 4%;
}
/* 各カードは“ほぼ1枚ぶん”の幅で固定（スナップ対象） */
#collections .product-grid .product-card {
flex: 0 0 92%; /* 90〜100%で調整可 */
scroll-snap-align: start;
scroll-snap-stop: always;
width: 100%; /* 幅制約を明示 */
}
/* スクロールバー非表示（必要なければ削除） */
#collections .product-grid::-webkit-scrollbar { display: none; }
}

.hero__media {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero__video.active {
  opacity: 1;
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

/* ===== Gallery layout ===== */
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(12px, 1.8vw, 24px);
}
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){
/* SPは横スワイプで1枚表示 */
.gallery-grid{
display: flex; gap: 12px; overflow-x: auto;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
padding-left: 4%; padding-right: 4%;
}
.gallery-card{ flex: 0 0 92%; scroll-snap-align: start; scroll-snap-stop: always; }
}


.gallery-card{ border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background:#fff; }
.gallery-media{ position: relative; aspect-ratio: 4/5; background:#000; }
.gallery-media img, .gallery-media video{ width:100%; height:100%; object-fit:cover; display:block; }


.gallery-cap{ padding: 10px 12px; font-size:.92rem; color: var(--muted); }
.playmark{ position:absolute; right:10px; bottom:10px; border:1px solid #fff; color:#fff; background:rgba(0,0,0,.35); border-radius:999px; width:36px; height:36px; display:grid; place-items:center; font-weight:700; }


/* ===== Lightbox ===== */
.lightbox { width:min(96vw,1100px); border:none; padding:0; background:transparent; }
.lightbox::backdrop { background: rgba(0,0,0,.6); }
.lightbox__stage{ position: relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; }
.lightbox__stage img, .lightbox__stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.lightbox__close{ position:absolute; right:8px; top:8px; z-index:3; border:0; background:#fff; border-radius:10px; width:36px; height:36px; font-size:18px; cursor:pointer; }


/* =====================
Gallery: PC=3列(4:3比率) / Tablet=2列 / SP=横スワイプ1枚
===================== */
/* PC (901px~): 3カラム・サムネ比率4:3 */
@media (min-width: 901px){
#gallery .gallery-grid{
display: grid !important;
grid-template-columns: repeat(3, minmax(0,1fr)) !important;
gap: clamp(12px, 1.8vw, 24px) !important;
}
#gallery .gallery-media {
aspect-ratio: 4 / 3 !important; /* ←ここで4:3比率を強制 */
}
}
/* Tablet (641–900px): 2カラム */
@media (min-width: 641px) and (max-width: 900px){
#gallery .gallery-grid{
display: grid !important;
grid-template-columns: repeat(2, minmax(0,1fr)) !important;
gap: clamp(12px, 1.8vw, 24px) !important;
}
#gallery .gallery-media {
aspect-ratio: 4 / 3 !important;
}
}
/* SP (<=640px): 横スライドで1枚表示 */
@media (max-width: 640px){
#gallery .gallery-grid{
display: flex !important;
gap: 12px !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch;
padding-left: 4%;
padding-right: 4%;
}
#gallery .gallery-card{
flex: 0 0 92%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
#gallery .gallery-grid::-webkit-scrollbar{ display: none; }
#gallery .gallery-media {
aspect-ratio: 4 / 3 !important;
}
}


.lightbox { width:min(96vw,1100px); border:none; padding:0; background:transparent; }
.lightbox::backdrop { background: rgba(0,0,0,.6); }
.lightbox__stage{ position: relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; }
.lightbox__stage img, .lightbox__stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.lightbox__close{ position:absolute; right:8px; top:8px; z-index:3; border:0; background:#fff; border-radius:10px; width:36px; height:36px; font-size:18px; cursor:pointer; }
.lightbox__nav{ position: relative; display:flex; align-items:center; justify-content:center; gap:12px; margin-top:8px; }
.lightbox__btn{ border:1px solid var(--line); background:#fff; border-radius:10px; width:40px; height:40px; font-size:20px; cursor:pointer; }
.lightbox__counter{ color:#fff; font-size:.95rem; background:rgba(0,0,0,.35); padding:.25rem .5rem; border-radius:8px; }

/* Lightboxを画面中央に配置 */
.lightbox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央寄せ */
  width: min(96vw, 1100px);
  border: none;
  padding: 0;
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* =====================
   Gallery section – スマホで左右4%余白
   ===================== */
@media (max-width: 640px) {
  #gallery {
    padding-left: 4%;
    padding-right: 4%;
  }
}

/* スマホ時は video を非表示・img を表示（PC/タブは従来どおり） */
@media (max-width: 640px) {
  #gallery .gallery-card[data-type="video"] video { display: none; }
  #gallery .gallery-card[data-type="video"] img.video-thumb { display: block; }
}

/* サムネ画像の見た目（既存の .gallery-media と揃える） */
#gallery .gallery-media img.video-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Container / Section */
.container{ width:min(1120px, 92vw); margin:0 auto; }
.section{ padding:72px 0; border-top:1px solid var(--line);margin-top: 40px; }
@media (max-width: 640px){
.section{ padding:48px 0; }
.container{ width:100%; padding-left:4%; padding-right:4%; }
}


/* Breadcrumb */
.breadcrumb{ font-size:.9rem; color:var(--muted); margin:16px 0 8px; }
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }


/* News Head */
.news-head{ margin-bottom:24px; }
.news-title{ font-size:clamp(1.5rem, 3vw, 2.25rem); line-height:1.2; margin:0 0 12px; font-weight:700; }
.news-meta{ display:flex; gap:12px; align-items:center; color:var(--muted); font-size:.95rem; }
.news-meta time{ white-space:nowrap; }
.news-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{ display:inline-block; border:1px solid var(--line); border-radius:999px; padding:.25rem .6rem; font-size:.8rem; color:#444; }


/* Eyecatch */
.eyecatch{ margin:24px 0 32px; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#f8f8f8; }
.eyecatch img{ width:100%; height:auto; display:block; }


/* Prose */
.prose{ font-size:1.05rem; line-height:1.85; }
.prose p{ margin:1em 0; }
.prose h2{ font-size:1.25rem; margin:2em 0 0.6em; }
.prose h3{ font-size:1.1rem; margin:1.5em 0 0.5em; }
.prose a{ color:var(--link); text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--linkh); }
.prose img{ width:100%; height:auto; border-radius:12px; border:1px solid var(--line); }
.prose figure{ margin:1.5em 0; }
.prose figcaption{ text-align:center; color:var(--muted); font-size:.9rem; margin-top:.4rem; }
.prose ul, .prose ol{ padding-left:1.2em; }
.prose blockquote{ border-left:3px solid var(--line); margin:1.25em 0; padding:.5em 1em; color:#333; background:#fafafa; border-radius:8px; }


/* Responsive video (YouTube等) */
.video-wrap{ position:relative; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; border:1px solid var(--line); margin:24px 0; }
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }


/* Share */
.share{ display:flex; gap:10px; flex-wrap:wrap; margin:28px 0 8px; }
.share a{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:.5rem .75rem; color:#333; text-decoration:none; font-size:.95rem; }
.share a:hover{ background:#f5f5f5; }


/* Pager */
.pager{ display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:24px; margin-top:40px; }
.pager a{ flex:1; display:block; border:1px solid var(--line); border-radius:12px; padding:14px; text-decoration:none; color:#222; }
.pager a small{ display:block; color:var(--muted); margin-bottom:6px; }
.pager a:hover{ background:#fafafa; }


/* Related */
.related{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
.related a{ display:block; border:1px solid var(--line); border-radius:12px; overflow:hidden; text-decoration:none; color:#222; background:#fff; }
.related img{ width:100%; display:block; aspect-ratio:4/3; object-fit:cover; }
.related span{ display:block; padding:10px 12px; font-size:.95rem; }
@media (max-width:900px){ .related{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .related{ grid-template-columns:1fr; } }


/* Back to list */
.back{ margin-top:28px; }
.back a{ color:#333; text-decoration:none; border-bottom:1px solid #ddd; padding-bottom:2px; }
.back a:hover{ opacity:.8; }

/* =====================
   About 基本
   ===================== */
#about { border-top: 1px solid var(--line); }
#about .section__head { margin-bottom: 1rem; }
#about .about-copy { margin-bottom: 1.25rem; }
@media (max-width: 640px){
  #about { padding-left: 4%; padding-right: 4%; } /* 既存ポリシーに合わせる */
}

/* =====================
   プロフィールカード群
   PC=3列 / Tablet=2列 / SP=横スワイプ1枚
   ===================== */
.about-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
  margin: 20px 0 8px;
}
@media (max-width: 900px){ .about-cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){
  .about-cards{
    display: flex; gap: 12px; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 0 2px;
  }
  .about-card{ flex: 0 0 92%; scroll-snap-align: start; scroll-snap-stop: always; }
  .about-cards::-webkit-scrollbar{ display:none; }
}

.about-card{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
}
.about-card__title{
  font-weight: 700;
  margin: 2px 0 10px;
}
.about-card__list{
  margin: 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 6px;
  column-gap: 10px;
}
.about-card__list dt{ color: var(--muted); font-size: .9rem; }
.about-card__list dd{ margin: 0; }

/* =====================
   年譜＆タイトル（PCは見やすく整列）
   ===================== */
.about-timeline{ margin-top: 22px; }
.about-timeline__head{ font-size: 1.1rem; font-weight: 600; margin: 8px 0 10px; }

.timeline{
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--line); border-radius: 12px; background:#fff;
}
.timeline li{
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: start;
  gap: 16px;
  padding: 18px 20px;
  border-top: 1px dashed var(--line);
}
.timeline li:first-child{ border-top: 0; }
.timeline .time{ text-align: right; font-weight: 500; color: var(--muted); white-space: nowrap; }
.timeline .body .club{ display:block; font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; color:#111; }
.timeline .body .note{
  display:block; background: #fafafa; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: .9rem; line-height: 1.5; color: #333;
}
@media (max-width: 640px){
  .timeline li{ grid-template-columns: 1fr; gap: 10px; }
  .timeline .time{ text-align: left; order: -1; }
}

/* =====================
   問い合わせリンク（ナビと同色）
   ===================== */
.about-inquiry{
  margin-top: 16px; font-size: .98rem;
}
.about-inquiry a{
  color: var(--link); text-decoration: none; border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.about-inquiry a:hover{
  color: var(--linkh); border-bottom-color: var(--linkh);
}
/* =====================
   About セクション内の h3 見出しをシンプルに
   ===================== */
#about h3,
#about .about-card__title,
#about .about-timeline__head {
  font-weight: 600;
  font-size: 1.05rem;
  margin: 1.4em 0 0.6em;
  padding: 0;
  color: #111;
  border: none !important;
  border-bottom: none !important;
  background: none;
  text-decoration: none !important;
  letter-spacing: 0.02em;
}