/* 体験の詳しいページ・英語版（3つの体験で同じ形） */
.hero{position:relative;height:82vh;height:82svh;min-height:520px;overflow:hidden;color:#fff;background:var(--dark)}
.hero img{animation:hero-zoom 14s ease-out both}
@keyframes hero-zoom{from{transform:scale(1.06)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero img{animation:none}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,12,.4) 0%,rgba(20,16,12,0) 24%,rgba(20,16,12,0) 42%,rgba(20,16,12,.72) 100%)}
.hero .copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(48px,10vh,104px);z-index:1;text-shadow:0 1px 18px rgba(20,16,12,.35)}
.hero .eyebrow{color:#e6d6bb}
.hero h1{font-family:var(--serif-en);font-weight:300;font-size:clamp(44px,6.4vw,88px);letter-spacing:.06em;line-height:1.1;margin:14px 0 10px}
.hero .jp{font-size:18px;letter-spacing:.08em;font-style:italic}

.intro{padding:clamp(96px,12vw,160px) 0 clamp(64px,8vw,100px);text-align:center}
.intro h2{font-weight:400;font-size:clamp(26px,2.8vw,36px);letter-spacing:.04em;line-height:1.5;margin:18px 0 28px}
.intro p{color:var(--sub);max-width:34em;margin:0 auto}
.intro .tm{font-size:14px;margin-top:20px}

/* 名前の意味（玉手箱など） */
.meaning{padding:0 0 clamp(80px,10vw,120px)}
.meaning .box{border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);padding:clamp(36px,4vw,52px) clamp(8px,3vw,40px);text-align:center}
.meaning h3{font-weight:400;font-size:24px;letter-spacing:.04em;margin:10px 0 18px}
.meaning p{color:var(--sub);font-size:17px;line-height:1.95;max-width:34em;margin:0 auto}

.thought{padding:0 0 clamp(96px,12vw,150px)}
.thought .grid{display:grid;grid-template-columns:4fr 7fr;gap:clamp(32px,6vw,96px);border-top:1px solid var(--line);padding-top:clamp(48px,6vw,72px)}
.thought h3{font-weight:400;font-size:24px;letter-spacing:.04em;margin-top:12px;line-height:1.5}
.thought .poem p{color:var(--sub);font-size:18px;line-height:1.9}
.thought .poem p + p{margin-top:8px}
.thought .poem p:last-child{color:var(--ink);margin-top:24px}

/* 横長の写真（作品の様子など） */
.wide{padding-bottom:clamp(96px,12vw,150px)}
.wide figure{margin:0}
.wide .ph{aspect-ratio:16/9;overflow:hidden;background:var(--beige)}
.wide figcaption{text-align:center;color:var(--sub);font-size:15.5px;font-style:italic;letter-spacing:.04em;margin-top:16px}

.flow{background:var(--beige);padding:clamp(96px,12vw,150px) 0}
.flow .head{text-align:center;margin-bottom:clamp(48px,6vw,72px)}
.flow .head h2{font-weight:400;font-size:clamp(24px,2.4vw,30px);letter-spacing:.04em;margin-top:12px}
.flow ol{list-style:none;max-width:760px;margin:0 auto}
.flow li{display:grid;grid-template-columns:96px 1fr;align-items:baseline;padding:26px 0;border-top:1px solid #d9cfc0}
.flow li:last-child{border-bottom:1px solid #d9cfc0}
.flow li b{font-family:var(--serif-en);font-weight:300;font-style:italic;font-size:44px;line-height:1;color:var(--gold)}
.flow li span{font-size:19px;letter-spacing:.02em;line-height:1.7}

.only{padding:clamp(96px,12vw,150px) 0}
.only .grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,7vw,110px);align-items:center}
.only .pic{aspect-ratio:4/5;overflow:hidden;background:var(--beige)}
.only h2{font-weight:400;font-size:clamp(22px,2.2vw,28px);letter-spacing:.04em;line-height:1.5;margin:14px 0 28px}
.only ul{list-style:none}
.only li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid var(--line);font-size:17px;line-height:1.7}
.only li::before{content:"";position:absolute;left:0;top:27px;width:14px;height:1px;background:var(--gold)}

.details{padding:0 0 clamp(96px,12vw,150px)}
.details .head{text-align:center;margin-bottom:40px}
.details .head h2{font-weight:400;font-size:clamp(24px,2.4vw,30px);letter-spacing:.04em;margin-top:12px}
.details dl{border-top:1px solid var(--line)}
.details dl div{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:20px 4px;border-bottom:1px solid var(--line);font-size:17px;line-height:1.8}
.details dt{color:var(--gold);letter-spacing:.06em}
.details dd small{display:block;color:var(--sub);font-size:15px;margin-top:4px}

.quote{background:var(--dark);color:var(--on-dark);text-align:center;padding:clamp(88px,11vw,140px) 24px}
.quote .q-en{font-family:var(--serif-en);font-style:italic;font-weight:300;font-size:clamp(26px,3.4vw,44px);letter-spacing:.04em;line-height:1.5}
.quote .q-ja{font-family:var(--serif-ja);margin-top:18px;color:#c9b391;letter-spacing:.2em;font-size:15px}
.quote .actions{margin-top:clamp(48px,6vw,72px)}
.quote .btn{border-color:var(--on-dark);color:var(--on-dark)}
.quote .btn:hover{background:var(--on-dark);color:var(--dark)}
.quote .via{margin-top:24px;font-size:15px;color:#a59c90;line-height:1.8}

.others{padding:clamp(96px,12vw,140px) 0}
.others .head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:40px}
.others .head h2{font-weight:400;font-size:clamp(22px,2.2vw,28px);letter-spacing:.04em;margin-top:10px}
.others .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
.others a.card{display:block}
.others .pic{aspect-ratio:3/2;overflow:hidden;background:var(--beige)}
.others .pic img{transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.others a.card:hover .pic img{transform:scale(1.04)}
.others .n{font-family:var(--serif-en);font-style:italic;color:var(--gold);font-size:20px;margin-top:20px}
.others .name{font-family:var(--serif-en);font-size:28px;letter-spacing:.06em;line-height:1.3}
.others .jp{font-size:14px;color:var(--sub);letter-spacing:.12em;text-transform:uppercase}

@media (max-width:860px){
  .thought .grid,.only .grid{grid-template-columns:1fr}
  .flow li{grid-template-columns:64px 1fr;padding:20px 0}
  .flow li b{font-size:34px}
  .flow li span{font-size:17px}
  .details dl div{grid-template-columns:1fr;gap:2px}
  .others .head{flex-direction:column;align-items:flex-start}
  .others .grid{grid-template-columns:1fr;gap:48px}
}