/* ==========================================================================
   関口美奈子 公式サイト
   Theme : 銀座の静寂  ─  和紙 × 瑠璃 × 燻し金
   ========================================================================== */

:root{
  /* Surfaces */
  --bg:        #f5efe2;   /* 和紙クリーム */
  --bg-2:      #ede4cd;   /* 一段濃い和紙 */
  --bg-3:      #faf6ee;   /* 明るい和紙 */

  /* Ink (kimono indigo) */
  --ink:       #14223c;   /* 深い瑠璃墨 */
  --ink-2:     #1f2e4d;
  --ink-3:     #0a1326;   /* ほぼ漆黒 */

  /* Gold (smoky) */
  --gold:      #a08552;   /* 燻し金 */
  --gold-2:    #c4a76b;   /* 中間金 */
  --gold-3:    #ddc999;   /* 淡金 */

  /* Text */
  --text:      #2a2418;
  --text-2:    #5a4f3d;
  --muted:     #8a7e63;
  --line:      #d6c9aa;

  --font-jp:   "Shippori Mincho","Noto Serif JP","Hiragino Mincho ProN",serif;
  --font-sans: "Noto Sans JP","Hiragino Sans",sans-serif;
  --font-en:   "Cormorant Garamond","Times New Roman",serif;

  --ease:      cubic-bezier(.22,1,.36,1);

  --w-max:     1080px;
  --pad-x:     clamp(20px, 5vw, 56px);
  --header-h:  68px;
}

/* ===== Reset ===== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.85;
  font-size:14.5px;
  font-weight:400;
  letter-spacing:.04em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; transition:color .3s var(--ease), opacity .3s; }
button{ background:none; border:none; cursor:pointer; font:inherit; color:inherit; }
ul,ol{ list-style:none; }
input,select,textarea{ font:inherit; color:inherit; outline:none; border-radius:0; }
hr{ border:none; }
.sp-only{ display:none; }
@media (max-width:768px){ .sp-only{ display:inline; } }
::selection{ background:var(--ink); color:var(--bg); }

/* ===== Loader ===== */
.loader{
  position:fixed; inset:0;
  background:var(--bg);
  z-index:9999;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__bar{
  display:block; width:84px; height:1px;
  background:var(--gold);
  transform-origin:left;
  animation:loader-bar 1.4s var(--ease) infinite;
}
@keyframes loader-bar{
  0%{ transform:scaleX(0); transform-origin:left; }
  50%{ transform:scaleX(1); transform-origin:left; }
  51%{ transform-origin:right; }
  100%{ transform:scaleX(0); transform-origin:right; }
}

/* ==========================================================================
   TOP — full-screen hero
   ========================================================================== */
.is-top{ background:#05080f; overflow:hidden; }

.hero{
  position:relative;
  width:100%;
  height:100vh; height:100svh;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(118% 82% at 50% 30%,
      #243756 0%, #18253f 34%, #0d1628 64%, #070c16 100%),
    #070c16;
}

/* --- Background photo --- */
.hero__bg{
  position:absolute; inset:0;
  z-index:0;
  animation:hero-zoom 18s var(--ease) forwards;
}
.hero__bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 18%;
  /* Dissolve the photo's bright studio backdrop into the dark gradient
     so there is no hard seam at the edges. */
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 50% 42%, #000 52%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(ellipse 80% 100% at 50% 42%, #000 52%, rgba(0,0,0,0) 100%);
}
@keyframes hero-zoom{
  from{ transform:scale(1.05); }
  to{ transform:scale(1); }
}

/* Landscape / desktop: show the full portrait centred, emerging from the
   dark gradient. The radial mask blends the studio backdrop into the margins. */
@media (min-aspect-ratio: 2/3){
  .hero__bg img{
    object-fit:contain; object-position:center bottom;
    -webkit-mask-image:radial-gradient(ellipse 72% 96% at 50% 44%, #000 50%, rgba(0,0,0,0) 100%);
            mask-image:radial-gradient(ellipse 72% 96% at 50% 44%, #000 50%, rgba(0,0,0,0) 100%);
  }
}

/* --- Legibility scrim --- */
.hero__scrim{
  position:absolute; inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,
      rgba(7,12,22,.55) 0%,
      rgba(7,12,22,.10) 26%,
      rgba(7,12,22,.12) 52%,
      rgba(7,12,22,.54) 84%,
      rgba(7,12,22,.82) 100%),
    radial-gradient(ellipse 88% 62% at 50% 46%, transparent 40%, rgba(7,12,22,.62) 100%);
  pointer-events:none;
}

/* --- Center title block --- */
.hero__center{
  position:absolute;
  left:0; right:0; top:50%;
  transform:translateY(-50%);
  z-index:2;
  text-align:center;
  padding:0 24px;
}
.hero__name{
  font-family:var(--font-jp);
  font-weight:500;
  font-size:clamp(38px, 6vw, 76px);
  letter-spacing:.34em;
  line-height:1.15;
  text-indent:.34em;
  color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.30);
  opacity:0;
  animation:hero-rise 1.4s var(--ease) .5s forwards;
}
.hero__en{
  margin-top:clamp(14px, 1.6vw, 22px);
  font-family:var(--font-en);
  font-size:clamp(13px, 1.15vw, 17px);
  font-weight:500;
  letter-spacing:.36em;
  text-indent:.36em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 18px rgba(0,0,0,.3);
  opacity:0;
  animation:hero-rise 1.4s var(--ease) .8s forwards;
}
.hero__en span{
  text-transform:none;
  font-weight:400;
  font-style:italic;
  letter-spacing:.18em;
}
@keyframes hero-rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* --- Bottom nav + SNS --- */
.hero__bottom{
  position:absolute;
  left:0; right:0; bottom:clamp(34px, 5vh, 64px);
  z-index:2;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(20px, 3vh, 34px);
}
.hero__nav{
  display:flex; flex-wrap:wrap;
  justify-content:center;
  width:100%; max-width:100%;
  gap:clamp(18px, 3vw, 52px);
  padding:0 20px;
  opacity:0;
  animation:hero-rise 1.4s var(--ease) 1.1s forwards;
}
.hero__nav a{
  position:relative;
  font-family:var(--font-jp);
  font-size:clamp(14px, 1.05vw, 16px);
  font-weight:500;
  letter-spacing:.18em;
  color:rgba(255,255,255,.94);
  padding:4px 2px;
  text-shadow:0 1px 14px rgba(0,0,0,.35);
}
.hero__nav a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-2px;
  height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.hero__nav a:hover{ color:#fff; }
.hero__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.hero__sns{
  display:flex; align-items:center;
  gap:clamp(20px, 2.4vw, 30px);
  opacity:0;
  animation:hero-rise 1.4s var(--ease) 1.35s forwards;
}
.hero__sns a{
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.85);
  filter:drop-shadow(0 1px 10px rgba(0,0,0,.35));
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.hero__sns a:hover{ color:#fff; transform:translateY(-2px); }

/* --- TOP responsive --- */
@media (max-width:768px){
  .hero__center{ top:54%; padding:0 20px; }
  .hero__name{ font-size:clamp(30px, 11vw, 50px); letter-spacing:.24em; text-indent:.24em; }
  .hero__en{ letter-spacing:.22em; text-indent:.22em; font-size:11.5px; }
  .hero__bg img{ object-position:center 16%; }
  .hero__nav{ gap:13px 20px; }
  .hero__nav a{ font-size:14px; letter-spacing:.14em; }
}

@media (max-width:400px){
  .hero__center{ padding:0 26px; }
  .hero__name{ font-size:clamp(26px, 9.6vw, 42px); letter-spacing:.16em; text-indent:.16em; }
  .hero__en{ letter-spacing:.13em; text-indent:.13em; font-size:10px; }
  .hero__nav{ gap:11px 16px; }
  .hero__nav a{ font-size:12.5px; letter-spacing:.08em; }
}

/* ==========================================================================
   Subpage header / nav
   ========================================================================== */
.header{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad-x);
  background:rgba(245,239,226,.9);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(160,133,82,.14);
  color:var(--ink);
  transition:padding .35s var(--ease);
}
.header.is-scrolled{ padding:12px var(--pad-x); }
.header__logo{
  font-family:var(--font-jp);
  font-weight:500;
  font-size:16px;
  letter-spacing:.18em;
  white-space:nowrap;
  color:inherit;
}

.nav-pc ul{ display:flex; align-items:center; gap:28px; }
.nav-pc a{
  position:relative;
  font-family:var(--font-jp);
  font-size:13px;
  letter-spacing:.2em;
  color:inherit;
  padding:6px 0;
}
.nav-pc a::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-pc a:hover{ color:var(--gold); }
.nav-pc a:hover::after{ transform:scaleX(1); transform-origin:left; }
@media (max-width:1024px){ .nav-pc{ display:none; } }

.hamburger{
  display:none;
  width:34px; height:34px;
  position:relative; z-index:200;
  color:var(--ink);
}
.hamburger span{
  display:block; position:absolute; left:5px; right:5px;
  height:1px; background:currentColor;
  transition:transform .4s var(--ease), top .4s var(--ease);
}
.hamburger span:nth-child(1){ top:13px; }
.hamburger span:nth-child(2){ top:20px; }
.hamburger.is-open{ color:#fff; }
.hamburger.is-open span:nth-child(1){ top:16px; transform:rotate(45deg); }
.hamburger.is-open span:nth-child(2){ top:16px; transform:rotate(-45deg); }
@media (max-width:1024px){ .hamburger{ display:block; } }

/* Mobile nav overlay */
.nav-sp{
  position:fixed; inset:0;
  background:var(--ink);
  color:#fff;
  z-index:150;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.nav-sp.is-open{ opacity:1; visibility:visible; }
.nav-sp__inner{ width:90%; max-width:440px; padding:60px 16px; }
.nav-sp ul li{ border-bottom:1px solid rgba(196,167,107,.18); }
.nav-sp ul li a{
  display:flex; align-items:baseline;
  padding:18px 4px;
  font-family:var(--font-jp);
  font-size:16px;
  letter-spacing:.18em;
  transition:padding-left .4s var(--ease), color .3s;
}
.nav-sp ul li a em{
  font-style:normal;
  font-family:var(--font-jp);
  font-size:13px;
  color:var(--gold-2);
  margin-right:22px;
  min-width:14px;
}
.nav-sp ul li a:hover{ color:var(--gold-2); padding-left:10px; }
.nav-sp__sns{
  display:flex; gap:20px; margin-top:32px; justify-content:center;
  font-size:12px; letter-spacing:.18em; color:var(--gold-2);
}

/* ==========================================================================
   Subpage section / container
   ========================================================================== */
.container{
  width:100%; max-width:var(--w-max);
  margin:0 auto;
  padding:0 var(--pad-x);
}
.section{
  position:relative;
  padding:100px 0;
}
.section--cream{ background:var(--bg-2); }
.section--dark{ background:linear-gradient(180deg, var(--ink-2) 0%, var(--ink-3) 100%); color:#fff; }

.section__head{ text-align:center; margin-bottom:60px; }
.section__title{
  display:inline-block;
  font-family:var(--font-jp);
  font-weight:500;
  font-size:clamp(20px, 2.2vw, 26px);
  letter-spacing:.3em;
  color:var(--ink);
  padding-bottom:14px;
  position:relative;
}
.section--dark .section__title{ color:#fff; }
.section__title::after{
  content:''; position:absolute; left:50%; bottom:0;
  width:28px; height:1px; background:var(--gold);
  transform:translateX(-50%);
}
.section__lead{
  margin-top:22px;
  font-family:var(--font-jp);
  font-size:14px;
  line-height:2;
  letter-spacing:.06em;
  color:var(--text-2);
}
.section--dark .section__lead{ color:rgba(255,255,255,.72); }
.section__action{ text-align:center; margin-top:50px; }

/* ==========================================================================
   Page hero (subpages) — 漢数字章扉
   ========================================================================== */
.page-hero{
  padding:calc(var(--header-h) + 90px) 0 70px;
  background:var(--bg-2);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.page-hero::after{
  content:'';
  position:absolute;
  left:50%; bottom:36px;
  width:1px; height:36px;
  background:var(--gold);
  transform:translateX(-50%);
  opacity:.6;
}
.page-hero__num{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -42%);
  font-family:var(--font-jp);
  font-weight:400;
  font-size:clamp(110px, 18vw, 220px);
  color:rgba(160,133,82,.10);
  line-height:1;
  pointer-events:none;
  z-index:0;
}
.page-hero__title{
  display:inline-block;
  position:relative;
  z-index:1;
  font-family:var(--font-jp);
  font-weight:500;
  font-size:clamp(26px, 3.4vw, 36px);
  letter-spacing:.32em;
  color:var(--ink);
  padding-bottom:18px;
}
.page-hero__title::after{
  content:''; position:absolute; left:50%; bottom:0;
  width:32px; height:1px;
  background:var(--gold);
  transform:translateX(-50%);
}
.page-hero__lead{
  position:relative; z-index:1;
  margin-top:24px;
  font-family:var(--font-jp);
  font-size:13.5px;
  line-height:2;
  letter-spacing:.08em;
  color:var(--text-2);
}

/* ==========================================================================
   Buttons / link
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 36px;
  font-family:var(--font-jp);
  font-size:13.5px;
  letter-spacing:.2em;
  position:relative;
  border:1px solid var(--ink);
  min-width:240px;
  transition:color .35s var(--ease), background .35s, border-color .35s;
}
.btn--outline{ color:var(--ink); background:transparent; }
.btn--outline:hover{ background:var(--ink); color:#fff; }
.btn--fill{ background:var(--ink); color:#fff; }
.btn--fill:hover{ background:var(--gold); border-color:var(--gold); }
.btn--gold{ background:var(--gold); color:#fff; border-color:var(--gold); }
.btn--gold:hover{ background:var(--ink); border-color:var(--ink); }

.link-more{
  display:inline-flex; align-items:center;
  font-family:var(--font-jp);
  font-size:13px;
  letter-spacing:.14em;
  color:var(--ink);
  padding:6px 0;
}
.link-more::after{
  content:''; display:inline-block; margin-left:14px;
  width:30px; height:1px; background:var(--gold);
  transition:width .4s var(--ease);
}
.link-more:hover::after{ width:50px; }
.section--dark .link-more{ color:var(--gold-2); }

/* ==========================================================================
   Introduction
   ========================================================================== */
.intro__grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:64px;
  align-items:center;
}
.intro__image{
  position:relative;
}
.intro__image img{ width:100%; aspect-ratio:3 / 4; object-fit:cover; }
.intro__image::before{
  content:'';
  position:absolute;
  top:-10px; left:-10px;
  width:50px; height:1px;
  background:var(--gold);
}
.intro__image::after{
  content:'';
  position:absolute;
  top:-10px; left:-10px;
  width:1px; height:50px;
  background:var(--gold);
}
.intro__greeting{
  font-family:var(--font-jp);
  font-weight:500;
  font-size:clamp(20px, 2.4vw, 26px);
  line-height:1.7;
  letter-spacing:.1em;
  color:var(--ink);
  margin-bottom:28px;
}
.intro__body p{
  font-family:var(--font-jp);
  margin-bottom:18px;
  line-height:2.1;
}
.intro__pillars{
  margin:26px 0;
  padding:24px 28px;
  background:rgba(160,133,82,.06);
  border-left:2px solid var(--gold);
}
.intro__pillars li{
  font-family:var(--font-jp);
  font-size:14.5px;
  line-height:2;
  color:var(--ink);
  letter-spacing:.06em;
}
.intro__pillars li::before{ content:'｜ '; color:var(--gold); }
.intro__closing{ font-size:13px; color:var(--text-2); margin-top:24px !important; }
@media (max-width:1024px){
  .intro__grid{ grid-template-columns:1fr; gap:42px; }
  .intro__image{ max-width:320px; margin:0 auto; }
}

/* ==========================================================================
   Profile
   ========================================================================== */
.profile__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.profile__name{
  font-family:var(--font-jp);
  font-weight:500;
  font-size:clamp(22px, 2.6vw, 28px);
  letter-spacing:.28em;
  margin-bottom:10px;
  color:#fff;
}
.profile__role{
  font-family:var(--font-jp);
  font-size:12.5px;
  letter-spacing:.24em;
  color:var(--gold-2);
  margin-bottom:32px;
}
.profile__info > div{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:18px;
  padding:14px 0;
  border-bottom:1px solid rgba(196,167,107,.16);
}
.profile__info dt{
  font-family:var(--font-jp);
  font-size:12.5px;
  color:var(--gold-2);
  letter-spacing:.14em;
  padding-top:2px;
}
.profile__info dd{
  font-family:var(--font-jp);
  font-size:14px;
  line-height:1.95;
  color:rgba(255,255,255,.9);
}
.profile__numbers{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  column-gap:22px;
  row-gap:22px;
  align-self:start;
}
.profile__numbers > li{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0 6px;
  padding:0;
  border:none;
  background:none;
  min-height:auto;
}
.profile__numbers .num{
  font-family:var(--font-en);
  font-weight:500;
  font-size:30px;
  letter-spacing:.01em;
  color:var(--gold-2);
  line-height:1;
  margin:0;
}
.profile__numbers em{
  font-style:normal;
  font-family:var(--font-jp);
  font-size:11.5px;
  color:rgba(255,255,255,.82);
  letter-spacing:.06em;
  margin:0;
}
.profile__numbers .label{
  flex-basis:100%;
  font-family:var(--font-jp);
  font-size:11.5px;
  color:rgba(255,255,255,.5);
  letter-spacing:.08em;
  line-height:1.6;
  margin:5px 0 0;
  text-align:left;
}
.profile__numbers--note{
  grid-column:1 / -1;
  display:block;
  background:none;
  padding:6px 0 0;
  border:none;
  font-family:var(--font-jp);
  font-size:11px;
  color:rgba(255,255,255,.45);
  line-height:1.85;
  letter-spacing:.06em;
  text-align:left;
}
@media (max-width:1024px){
  .profile__grid{ grid-template-columns:1fr; gap:40px; }
}

/* ==========================================================================
   Page feature photo (subpage hero photo strip)
   ========================================================================== */
.page-feature{
  position:relative;
  overflow:hidden;
  aspect-ratio:21 / 9;
  background:var(--ink-3);
  margin:0;
}
.page-feature img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 22%;
}
.page-feature::after{
  content:'';
  position:absolute; inset:0;
  /* キャプションの可読性のための下部グラデーションのみ（写真は素のまま） */
  background:linear-gradient(180deg, transparent 50%, rgba(10,19,38,.52) 100%);
  pointer-events:none;
}
.page-feature figcaption{
  position:absolute;
  left:clamp(20px, 5vw, 56px);
  bottom:22px;
  z-index:1;
  font-family:var(--font-jp);
  font-size:12px;
  letter-spacing:.2em;
  color:rgba(255,255,255,.85);
}
.page-feature figcaption::before{
  content:'';
  display:inline-block;
  width:24px; height:1px;
  background:var(--gold-2);
  margin-right:14px;
  vertical-align:middle;
}
@media (max-width:768px){
  .page-feature{ aspect-ratio:16 / 10; }
  .page-feature img{ object-position:center 25%; }
  .page-feature figcaption{ font-size:11px; bottom:14px; letter-spacing:.16em; }
  .page-feature figcaption::before{ width:16px; margin-right:10px; }
}

/* ==========================================================================
   Media strip (works.html)
   ========================================================================== */
.media-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.media-strip figure{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 11;
  background:var(--bg-2);
  border:1px solid var(--line);
}
.media-strip img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .9s var(--ease);
}
.media-strip figure:hover img{ transform:scale(1.05); }
.media-strip figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:32px 14px 12px;
  background:linear-gradient(0deg, rgba(10,19,38,.88) 0%, rgba(10,19,38,.0) 100%);
  color:#fff;
  font-family:var(--font-jp);
  font-size:12px;
  letter-spacing:.12em;
  line-height:1.5;
}
@media (max-width:768px){
  .media-strip{ grid-template-columns:1fr; gap:10px; }
  .media-strip figcaption{ font-size:12px; padding:24px 12px 12px; }
}

/* ==========================================================================
   Works
   ========================================================================== */
.works__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.work-card{
  background:#fff;
  padding:30px 26px;
  border:1px solid var(--line);
  transition:border-color .4s, transform .4s var(--ease);
  position:relative;
}
.work-card::before{
  content:'';
  position:absolute; top:0; left:0;
  width:0; height:2px;
  background:var(--gold);
  transition:width .5s var(--ease);
}
.work-card:hover{ border-color:transparent; transform:translateY(-3px); }
.work-card:hover::before{ width:100%; }
.work-card h3{
  font-family:var(--font-jp);
  font-weight:500;
  font-size:16.5px;
  letter-spacing:.14em;
  color:var(--ink);
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.work-card ul li{
  font-family:var(--font-jp);
  font-size:13.5px;
  line-height:1.9;
  color:var(--text-2);
  padding:4px 0 4px 14px;
  position:relative;
}
.work-card ul li::before{
  content:''; position:absolute; left:0; top:14px;
  width:6px; height:1px; background:var(--gold);
}
@media (max-width:1024px){ .works__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .works__grid{ grid-template-columns:1fr; } }

/* Books */
.books{ text-align:center; }
.books__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:42px;
  align-items:end;
}
.book img{
  max-width:220px;
  margin:0 auto 18px;
  box-shadow:0 24px 50px -20px rgba(20,34,60,.3);
}
.book figcaption{
  font-family:var(--font-jp);
  font-size:13px;
  line-height:1.85;
  color:var(--ink);
  letter-spacing:.04em;
}
/* Amazonリンク付きの著書 */
.book--link{
  display:block; text-align:center; color:inherit;
  transition:transform .35s var(--ease);
}
.book--link img{ transition:box-shadow .35s; }
.book--link:hover{ transform:translateY(-5px); }
.book--link:hover img{ box-shadow:0 30px 56px -18px rgba(20,34,60,.42); }
.book--link:hover figcaption{ color:var(--gold-2); }
@media (max-width:768px){
  .books__grid{ grid-template-columns:1fr; gap:36px; max-width:240px; margin:0 auto; }
  .book img{ max-width:190px; }
}

/* プロフィールページ：余白を詰めて密度を上げ、スクロール量を抑える */
.profile-page .section{ padding:60px 0; }
.profile-page .page-hero{ padding-bottom:40px; }
.profile-page .section__head{ margin-bottom:34px; }
.profile-page .intro__grid{ gap:48px; align-items:start; }
.profile-page .intro__body p{ margin-bottom:12px; }
.profile-page .books__grid{ gap:34px; }
.profile-page .book img{ max-width:190px; margin-bottom:14px; }
.profile-page .profile__grid{ gap:48px; }
.profile-page .media-strip{ gap:18px; }
.profile-page .works__grid{ gap:18px; }
.profile-page .work-card{ padding:20px 24px; }
.profile-page .work-card h3{ margin-bottom:13px; padding-bottom:11px; }
.profile-page .work-card ul li{ padding:2px 0 2px 14px; line-height:1.7; }
.profile-page .work-card ul li::before{ top:11px; }
@media (max-width:768px){
  .profile-page .section{ padding:44px 0; }
  .profile-page .section__head{ margin-bottom:26px; }
  .profile-page .intro__grid{ gap:32px; }
}

/* ごあいさつをプロフィール（ダーク背景）に統合 */
.section--dark .intro__greeting{ color:#fff; }
.section--dark .intro__body{ color:rgba(255,255,255,.78); }
.section--dark .intro__body p{ color:rgba(255,255,255,.78); }
.section--dark .intro__pillars{ background:rgba(255,255,255,.05); border-left-color:var(--gold-2, var(--gold)); }
.section--dark .intro__pillars li{ color:#fff; }
.section--dark .intro__closing{ color:rgba(255,255,255,.6); }
.profile__divider{ height:1px; background:rgba(255,255,255,.14); margin:48px 0; }
@media (max-width:768px){ .profile__divider{ margin:36px 0; } }

/* ==========================================================================
   Speaking
   ========================================================================== */
.speaking__inner{ max-width:820px; margin:0 auto; text-align:center; }
.speaking__lead{
  font-family:var(--font-jp);
  font-size:14.5px;
  line-height:2.2;
  letter-spacing:.06em;
  color:rgba(255,255,255,.85);
  margin-bottom:46px;
}
.speaking__themes{
  text-align:left;
  background:rgba(255,255,255,.04);
  padding:34px 38px;
  border:1px solid rgba(196,167,107,.18);
  margin-bottom:44px;
}
.speaking__themes-label{
  font-family:var(--font-jp); font-size:13px;
  letter-spacing:.32em; color:var(--gold-2);
  margin-bottom:22px; text-align:center;
}
.speaking__themes ul{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px 28px;
}
.speaking__themes li{
  font-family:var(--font-jp); font-size:14px;
  color:#fff;
  padding-left:16px; position:relative;
  letter-spacing:.04em;
}
.speaking__themes li::before{
  content:''; position:absolute; left:0; top:11px;
  width:6px; height:6px; background:var(--gold);
  transform:rotate(45deg);
}
.speaking__media{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  align-items:start;
  max-width:1000px;
  margin:48px auto 0;
}
.speaking__media figure{ margin:0; }
.speaking__media img{
  width:100%;
  height:auto;
  display:block;
  box-shadow:0 18px 40px -22px rgba(20,34,60,.32);
}
.speaking__shot figcaption{
  font-family:var(--font-jp);
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--text-2);
  margin-top:14px;
  text-align:center;
}
.speaking__shot figcaption::before{
  content:''; display:inline-block;
  width:20px; height:1px; background:var(--gold);
  margin-right:10px; vertical-align:middle;
}

/* 講演ページ：各画像を控えめなサイズに */
.speaking-page .page-feature{ aspect-ratio:auto; height:clamp(240px, 28vw, 380px); }
.speaking-page .intro__image{ max-width:300px; }

@media (max-width:768px){
  .speaking__themes{ padding:26px 20px; }
  .speaking__themes ul{ grid-template-columns:1fr; gap:10px; }
  .speaking__media{ grid-template-columns:1fr; gap:26px; margin-top:32px; max-width:340px; }
  .speaking-page .intro__image{ max-width:260px; }
}

/* ==========================================================================
   Column
   ========================================================================== */
.column__cats{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center;
  margin-bottom:44px;
}
.column__cats li{
  font-family:var(--font-jp); font-size:12.5px;
  padding:6px 16px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink);
  letter-spacing:.06em;
  transition:background .3s, color .3s, border-color .3s;
  cursor:pointer;
}
.column__cats li:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.column__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.col-card{
  background:#fff;
  padding:30px 26px;
  border:1px solid var(--line);
  transition:transform .4s var(--ease), border-color .4s;
  cursor:pointer;
  position:relative;
}
.col-card::before{
  content:'';
  position:absolute; left:0; top:0;
  width:2px; height:0;
  background:var(--gold);
  transition:height .4s var(--ease);
}
.col-card:hover{ transform:translateY(-3px); border-color:transparent; }
.col-card:hover::before{ height:100%; }
.col-card__cat{
  display:inline-block;
  font-family:var(--font-jp); font-size:11px;
  color:var(--gold); letter-spacing:.22em;
  margin-bottom:14px;
}
.col-card h3{
  font-family:var(--font-jp); font-size:16px;
  font-weight:500; line-height:1.7;
  color:var(--ink); margin-bottom:14px;
  letter-spacing:.04em;
}
.col-card p{
  font-family:var(--font-jp); font-size:13px;
  line-height:1.85; color:var(--text-2);
}
@media (max-width:1024px){ .column__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .column__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   News
   ========================================================================== */
.news__list li{
  display:grid;
  grid-template-columns:110px 100px 1fr;
  gap:24px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
  transition:padding-left .3s var(--ease);
}
.news__list li:first-child{ border-top:1px solid var(--line); }
.news__list li:hover{ padding-left:8px; }
.news__list time{
  font-family:var(--font-jp); font-size:13.5px;
  letter-spacing:.1em; color:var(--ink); padding-top:2px;
}
.news__tag{
  font-family:var(--font-jp); font-size:11px;
  letter-spacing:.18em; color:var(--gold);
  border:1px solid var(--gold);
  padding:3px 0; text-align:center; align-self:start;
}
.news__list p{
  font-family:var(--font-jp); font-size:14px;
  line-height:1.85;
}
@media (max-width:600px){
  .news__list li{
    grid-template-columns:auto auto;
    grid-template-areas:"time tag" "body body";
    column-gap:12px; row-gap:8px;
  }
  .news__list time{ grid-area:time; }
  .news__tag{ grid-area:tag; padding:3px 8px; }
  .news__list p{ grid-area:body; font-size:13.5px; }
}

/* ==========================================================================
   Business
   ========================================================================== */
.biz{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}
.biz__item{
  background:#fff;
  padding:0;
  border:1px solid var(--line);
  display:flex; flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s;
}
.biz__item::before{
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:2px;
  background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
  z-index:2;
}
.biz__item:hover{ transform:translateY(-4px); border-color:transparent; }
.biz__item:hover::before{ transform:scaleX(1); }
.biz__media{
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#f3ece3;
}
.biz__media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s var(--ease);
}
.biz__item:hover .biz__media img{ transform:scale(1.04); }
.biz__media--contain{
  background:linear-gradient(160deg, #fbeef0 0%, #f6e2e6 100%);
}
.biz__media--contain img{
  object-fit:contain;
  padding:26px;
  transition:none;
}
.biz__item:hover .biz__media--contain img{ transform:none; }
.biz__media--banner{ background:#0a1426; }
.biz__media--banner img{ object-fit:contain; transition:none; }
.biz__item:hover .biz__media--banner img{ transform:none; }
.biz__body{
  padding:28px 28px 30px;
  display:flex; flex-direction:column;
  flex:1;
}
.biz__name{
  font-family:var(--font-jp); font-size:19px;
  font-weight:500; letter-spacing:.1em;
  color:var(--ink); margin-bottom:6px;
}
.biz__cat{
  font-family:var(--font-jp); font-size:12px;
  letter-spacing:.2em; color:var(--gold);
  margin-bottom:20px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.biz__desc{
  font-family:var(--font-jp); font-size:13.5px;
  line-height:2;
  color:var(--text-2);
  margin-bottom:22px;
  flex-grow:1;
}
@media (max-width:1024px){ .biz{ grid-template-columns:1fr; max-width:520px; margin:0 auto; } }

/* ==========================================================================
   Download
   ========================================================================== */
.download__list{ max-width:560px; margin:0 auto; }
.download__list li{
  font-family:var(--font-jp); font-size:14px;
  padding:14px 0;
  border-bottom:1px dashed var(--line);
  text-align:center;
  letter-spacing:.04em;
}
.download__list li:first-child{ border-top:1px dashed var(--line); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact__lead{
  font-family:var(--font-jp);
  text-align:center;
  font-size:13.5px;
  line-height:2.1;
  color:rgba(255,255,255,.78);
  margin-bottom:50px;
}
.contact__cta{ text-align:center; }
.contact__form{ max-width:720px; margin:0 auto; text-align:left; }
.form-row{ margin-bottom:22px; }
.form-row--2col{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-row label{
  display:block;
  font-family:var(--font-jp); font-size:12.5px;
  letter-spacing:.14em; color:var(--gold-2);
  margin-bottom:10px;
}
.form-row label em{ color:var(--gold); font-style:normal; }
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(196,167,107,.3);
  color:#fff;
  padding:12px 0;
  font-family:var(--font-jp); font-size:14px;
  transition:border-color .3s;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{ border-color:var(--gold); }
.form-row select{
  appearance:none; -webkit-appearance:none;
  background:var(--ink-3); cursor:pointer; padding-right:24px;
  background-image:linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                   linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:calc(100% - 12px) center, calc(100% - 6px) center;
  background-size:6px 6px;
  background-repeat:no-repeat;
}
.form-row select option{ background:var(--ink-3); color:#fff; }
.form-row textarea{ resize:vertical; min-height:140px; }
.form-check{ text-align:center; margin:34px 0; }
.check{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-jp); font-size:13px;
  color:rgba(255,255,255,.85);
  cursor:pointer;
}
.check input{ display:none; }
.check span{
  display:block; width:16px; height:16px;
  border:1px solid var(--gold-2);
  position:relative; flex-shrink:0;
}
.check input:checked + span::after{
  content:''; position:absolute; left:4px; top:0;
  width:5px; height:10px;
  border-right:1px solid var(--gold);
  border-bottom:1px solid var(--gold);
  transform:rotate(45deg);
}
.form-submit{ text-align:center; }
.form-submit .btn{ min-width:280px; }
.contact__direct{
  text-align:center; margin-top:60px;
  padding-top:38px;
  border-top:1px solid rgba(196,167,107,.18);
}
.contact__direct p{
  font-family:var(--font-jp); font-size:12px;
  letter-spacing:.2em; color:rgba(255,255,255,.6);
  margin-bottom:10px;
}
.contact__direct a{
  font-family:var(--font-jp);
  font-size:clamp(17px, 2vw, 22px);
  letter-spacing:.06em; color:var(--gold-2);
  border-bottom:1px solid rgba(196,167,107,.3);
  padding-bottom:4px;
}
.contact__direct a:hover{ color:var(--gold); border-color:var(--gold); }
@media (max-width:600px){
  .form-row--2col{ grid-template-columns:1fr; }
  .form-submit .btn{ min-width:0; width:100%; }
  .contact__direct a{ font-size:15px; word-break:break-all; }
}

/* ==========================================================================
   SNS
   ========================================================================== */
.sns__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  max-width:690px; margin:0 auto;
}
.sns-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 18px;
  background:#fff;
  border:1px solid var(--line);
  text-align:center;
  transition:transform .4s var(--ease), background .3s, color .3s, border-color .3s;
  aspect-ratio:1;
}
.sns-card:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-4px); }
.sns-card__name{
  font-family:var(--font-jp); font-size:14.5px;
  letter-spacing:.16em;
}
.sns-card__sub{
  font-family:var(--font-jp); font-size:11px;
  color:var(--muted); letter-spacing:.06em;
}
.sns-card:hover .sns-card__sub{ color:var(--gold-2); }
@media (max-width:768px){ .sns__grid{ grid-template-columns:1fr 1fr; } }

/* 公式SNS（控えめ・小サイズ：プロフィール下部） */
.sns-mini{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:10px;
  margin:0 auto 88px;
}
.sns-mini__link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-jp);
  font-size:12.5px; letter-spacing:.1em;
  color:var(--ink);
  padding:9px 20px;
  border:1px solid var(--line);
  border-radius:999px;
  transition:color .3s, background .3s, border-color .3s;
}
.sns-mini__icon{ width:17px; height:17px; flex:0 0 auto; transition:color .3s; }
/* 既定：アイコンをブランドカラーで表示し、ひと目で識別できるように */
.sns-mini__link--youtube   .sns-mini__icon{ color:#FF0000; }
.sns-mini__link--x         .sns-mini__icon{ color:#000000; }
.sns-mini__link--instagram .sns-mini__icon{ color:#E1306C; }
/* ホバー：ブランドカラーで塗りつぶし */
.sns-mini__link--youtube:hover{ background:#FF0000; border-color:#FF0000; color:#fff; }
.sns-mini__link--x:hover{ background:#000000; border-color:#000000; color:#fff; }
.sns-mini__link--instagram:hover{
  background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);
  border-color:transparent; color:#fff;
}
.sns-mini__link:hover .sns-mini__icon{ color:#fff; }
@media (max-width:768px){ .sns-mini{ margin-bottom:60px; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  background:var(--ink-3);
  color:rgba(255,255,255,.7);
  padding:60px var(--pad-x) 24px;
}
.footer__inner{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  gap:40px;
  max-width:var(--w-max); margin:0 auto;
  padding-bottom:36px;
  border-bottom:1px solid rgba(196,167,107,.14);
}
.footer__logo{
  font-family:var(--font-jp); font-size:17px;
  color:#fff; letter-spacing:.28em;
  margin-bottom:12px;
}
.footer__company{ font-family:var(--font-jp); font-size:12.5px; }
.footer__nav{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; }
.footer__nav a{
  font-family:var(--font-jp); font-size:13px;
  letter-spacing:.08em; color:rgba(255,255,255,.72);
  display:inline-block; padding:4px 0;
}
.footer__nav a:hover{ color:var(--gold-2); }
.footer__sns{ display:flex; flex-direction:column; gap:8px; }
.footer__sns a{
  font-family:var(--font-jp); font-size:13px;
  letter-spacing:.1em; color:rgba(255,255,255,.72);
}
.footer__sns a:hover{ color:var(--gold-2); }
.footer__copy{
  text-align:center; margin-top:20px;
  font-family:var(--font-jp); font-size:11px;
  letter-spacing:.08em; color:rgba(255,255,255,.4);
}
@media (max-width:1024px){
  .footer__inner{ grid-template-columns:1fr; gap:28px; }
  .footer__sns{ flex-direction:row; flex-wrap:wrap; gap:18px; }
}

/* ==========================================================================
   To-Top
   ========================================================================== */
.to-top{
  position:fixed; right:20px; bottom:20px;
  width:40px; height:40px;
  background:var(--ink); color:#fff;
  border:1px solid var(--gold);
  z-index:80;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s, background .3s;
}
.to-top.is-visible{ opacity:1; visibility:visible; }
.to-top:hover{ background:var(--gold); }
.to-top i{
  display:block; width:7px; height:7px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(-45deg) translate(2px, 2px);
}

/* ==========================================================================
   Reveal
   ========================================================================== */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   SP comprehensive
   ========================================================================== */
@media (max-width:768px){
  body{ font-size:13.5px; }
  :root{ --pad-x: 20px; --header-h:58px; }

  .header{ padding:13px 20px; }
  .header.is-scrolled{ padding:10px 20px; }
  .header__logo{ font-size:12.5px; letter-spacing:.08em; }
  .nav-sp__inner{ padding:80px 20px 40px; }
  .nav-sp ul li a{ padding:16px 4px; font-size:15px; }
  .nav-sp ul li a em{ font-size:12.5px; margin-right:18px; }

  .section{ padding:70px 0; }
  .section__head{ margin-bottom:40px; }
  .section__title{ font-size:19px; letter-spacing:.24em; padding-bottom:12px; }
  .section__title::after{ width:24px; }
  .section__lead{ font-size:13px; margin-top:16px; line-height:1.9; }
  .section__action{ margin-top:36px; }

  .page-hero{ padding:calc(var(--header-h) + 56px) 20px 56px; }
  .page-hero__num{ font-size:32vw; transform:translate(-50%, -45%); }
  .page-hero__title{ font-size:23px; letter-spacing:.26em; padding-bottom:14px; }
  .page-hero__lead{ font-size:13px; margin-top:18px; }
  .page-hero::after{ height:28px; bottom:26px; }

  .btn{ min-width:0; width:100%; padding:14px 20px; font-size:13px; }

  .intro__greeting{ font-size:20px; text-align:center; }
  .intro__pillars{ padding:20px 18px; }
  .intro__pillars li{ font-size:13.5px; }

  .profile__name{ font-size:22px; letter-spacing:.22em; }
  .profile__role{ font-size:12px; letter-spacing:.22em; margin-bottom:26px; }
  .profile__info > div{ grid-template-columns:1fr; gap:6px; padding:12px 0; }
  .profile__info dt{ font-size:11.5px; padding-top:0; }
  .profile__info dd{ font-size:13.5px; }
  .profile__numbers{ grid-template-columns:1fr; column-gap:24px; row-gap:16px; }
  .profile__numbers .num{ font-size:26px; }
  .profile__numbers em{ font-size:11px; }
  .profile__numbers .label{ font-size:11px; margin-top:4px; }
  .profile__numbers--note{ font-size:11px; padding:6px 0 0; }

  .works__grid{ gap:12px; }
  .work-card{ padding:24px 20px; }
  .work-card h3{ font-size:15px; margin-bottom:14px; padding-bottom:12px; }
  .work-card ul li{ font-size:12.5px; padding:3px 0 3px 12px; }
  .work-card ul li::before{ top:13px; }
  .books__grid{ gap:36px; }

  .speaking__lead{ font-size:13px; line-height:2; margin-bottom:32px; }
  .speaking__themes{ padding:22px 18px; margin-bottom:32px; }
  .speaking__themes-label{ font-size:12px; margin-bottom:18px; }
  .speaking__themes li{ font-size:13px; }

  .column__cats{ gap:6px; margin-bottom:30px; }
  .column__cats li{ font-size:11.5px; padding:5px 12px; }
  .column__grid{ gap:12px; }
  .col-card{ padding:24px 20px; }
  .col-card h3{ font-size:14.5px; }
  .col-card p{ font-size:12.5px; }

  .biz__item{ padding:26px 22px; }
  .biz__name{ font-size:17.5px; }
  .biz__cat{ font-size:11.5px; margin-bottom:16px; padding-bottom:12px; }
  .biz__desc{ font-size:13px; }

  .download__list li{ font-size:13px; padding:12px 0; }

  .contact__lead{ font-size:13px; margin-bottom:38px; }
  .form-row{ margin-bottom:18px; }
  .form-row label{ font-size:12px; margin-bottom:8px; }
  .form-row input, .form-row select, .form-row textarea{ font-size:14px; padding:10px 0; }
  .contact__direct{ margin-top:40px; padding-top:28px; }

  .sns-card{ padding:24px 14px; }
  .sns-card__name{ font-size:13.5px; }
  .sns-card__sub{ font-size:10.5px; }

  .footer{ padding:48px 20px 20px; }
  .footer__inner{ padding-bottom:26px; }
  .footer__logo{ font-size:16px; }
  .footer__nav{ gap:10px 16px; }
  .footer__nav a{ font-size:12.5px; padding:3px 0; }
  .footer__sns a{ font-size:12.5px; }
  .footer__copy{ font-size:11px; }

  .to-top{ right:14px; bottom:14px; width:36px; height:36px; }
}