/* Enso Garden Studio — 共通スタイル */

:root{
  --navy:      #113789;   /* Kaicolon の空の色 */
  --navy-deep: #0c2a69;
  --navy-soft: #1b47a3;
  --cream:     #FBF7EF;   /* 庭の色 */
  --cream-2:   #F3EDE1;
  --ink:       #2A2E3A;
  --ink-soft:  #5A6070;
  --white:     #FFFFFF;
  --shin:      #EC5340;   /* 真 */
  --soe:       #3F8EE8;   /* 副 */
  --tai:       #57A832;   /* 体 */
  --maxw:      1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Yu Gothic',sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.95;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{width:min(100% - 2.5rem, var(--maxw));margin-inline:auto}
.narrow{width:min(100% - 2.5rem, 720px);margin-inline:auto}

/* ---- 藍のセクション ---- */
.night{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% 0%, #1b47a3 0%, var(--navy) 45%, #0c2a69 100%);
  color:#EAF0FF;
  overflow:hidden;
}
.night::after{ /* 布のような細かいノイズ（軽さのためタイル画像で描く） */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
  background-image:url(assets/noise.png);
  background-size:64px 64px;
}
.night .sub,.night p{color:#C9D6F5}

/* ---- 気持ち玉（装飾） ---- */
.tama{position:absolute;z-index:0;border-radius:50%;pointer-events:none;opacity:.9;
  background-image:radial-gradient(rgba(255,255,255,.5) .6px, transparent .6px);
  background-size:5px 5px;}
.tama.shin{background-color:var(--shin)}
.tama.soe{background-color:var(--soe)}
.tama.tai{background-color:var(--tai)}
.tama.white{background-color:#F4F7FF}
@media (prefers-reduced-motion:no-preference){
  .tama{animation:drift 14s ease-in-out infinite alternate}
  .tama:nth-child(2n){animation-duration:19s}
  .tama:nth-child(3n){animation-duration:23s}
}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-18px)}}

/* ---- カイコロンの散歩みち ---- */
.walkway{position:relative;z-index:1;height:clamp(96px,12vw,132px);overflow:hidden}
.kaiko{position:absolute;left:0;bottom:8%;width:clamp(72px,9.4vw,104px);transform:translateX(-26vw)}
.kaiko img{display:block;width:100%;transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .kaiko{animation:tekuteku 30s linear -4s infinite}   /* 開いた時点でもう歩いている */
  .kaiko img{animation:step .66s ease-in-out infinite}
}
@keyframes tekuteku{from{transform:translateX(-26vw)}to{transform:translateX(112vw)}}
@keyframes step{
  0%,100%{transform:scale(1,1)}
  45%    {transform:scale(.90,1.09) translateY(-3%)}
}

/* ---- ヒーロー ---- */
.hero{padding:clamp(5rem,14vh,9rem) 0 clamp(4.5rem,10vh,7rem);text-align:center;position:relative;z-index:1}
.enso{width:clamp(80px,13.3vw,120px);margin:0 auto clamp(1.8rem,4vw,2.6rem);opacity:.95}
@media (prefers-reduced-motion:no-preference){
  .enso{animation:breathe 9s ease-in-out infinite}
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.035);opacity:1}}
.hero h1{
  font-family:'Quicksand','Zen Maru Gothic',sans-serif;
  font-weight:500;font-size:clamp(1.7rem,5.2vw,3rem);
  letter-spacing:.16em;margin:0;color:#fff;line-height:1.4;
}
.hero .jp{margin:.9rem 0 0;font-size:clamp(.85rem,2.6vw,1rem);letter-spacing:.34em;color:#A9BEEC}
.hero .lead{
  margin:clamp(2rem,5vw,2.8rem) auto 0;max-width:30em;
  font-size:clamp(1rem,2.9vw,1.2rem);color:#DCE5FA;
}

/* ---- セクション共通 ---- */
section{padding:clamp(4.5rem,11vw,7.5rem) 0;position:relative;z-index:1}
.eyebrow{
  font-family:'Quicksand',sans-serif;font-size:.72rem;letter-spacing:.34em;
  text-transform:uppercase;color:#8FA6DC;margin:0 0 .9rem;
}
.light .eyebrow{color:#B0A98F}
h2{
  font-size:clamp(1.35rem,4.2vw,1.9rem);font-weight:700;margin:0 0 1.6rem;
  line-height:1.6;letter-spacing:.04em;
}
.night h2{color:#fff}
h3{font-size:1.05rem;font-weight:700;margin:0 0 .5rem;letter-spacing:.04em}
p{margin:0 0 1.3rem}
p:last-child{margin-bottom:0}
.center{text-align:center}

/* ---- 生成りのセクション ---- */
.light{background:var(--cream);color:var(--ink)}
.light h2{color:#1F2433}
.light p{color:#4A5060}

/* ---- 数字 ---- */
.facts{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,6vw,4.5rem);justify-content:center;
  margin-top:clamp(2.5rem,6vw,3.5rem);text-align:center}
.facts div{min-width:6.5rem}
.facts b{display:block;font-family:'Quicksand',sans-serif;font-size:clamp(1.6rem,5vw,2.2rem);
  font-weight:600;color:#fff;letter-spacing:.05em;line-height:1.3}
.facts span{font-size:.8rem;color:#A9BEEC;letter-spacing:.14em}

/* ---- Kaicolon ---- */
.yarn-logo{width:min(320px,72%);margin:0 auto clamp(1.4rem,4vw,2rem)}
.steps{display:grid;gap:clamp(1.4rem,3vw,2rem);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-top:clamp(2.6rem,6vw,3.6rem)}
.step{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:1.7rem 1.5rem;text-align:left}
.step .n{font-family:'Quicksand',sans-serif;font-size:.75rem;letter-spacing:.3em;color:#8FA6DC;display:block;margin-bottom:.6rem}
.step h3{color:#fff}
.step p{font-size:.92rem;margin:0;color:#C4D2F1}

.shots{display:grid;gap:clamp(1rem,3vw,1.8rem);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin-top:clamp(2.8rem,6vw,4rem)}
.shot{border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 40px rgba(5,18,50,.35);background:#0d2a68}
.light .shot{border-color:rgba(0,0,0,.08);box-shadow:0 16px 36px rgba(60,50,30,.13)}

.btn{
  display:inline-block;margin-top:clamp(2.4rem,6vw,3.2rem);
  padding:.95rem 2.4rem;border-radius:999px;
  background:#fff;color:var(--navy);text-decoration:none;font-weight:700;
  letter-spacing:.08em;transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.note-sm{margin-top:1.4rem;font-size:.8rem;color:#93A9DC;line-height:1.9}

/* ---- 約束 ---- */
.promises{display:grid;gap:clamp(1.4rem,3vw,2rem);grid-template-columns:repeat(auto-fit,minmax(185px,1fr));margin-top:2.6rem}
.promise{border-left:2px solid var(--cream-2);padding:.2rem 0 .2rem 1.4rem}
.promise h3{color:#1F2433}
.promise p{font-size:.93rem;margin:0}

/* ---- 庭 ---- */
.flowers{display:flex;justify-content:center;align-items:flex-end;gap:clamp(1.2rem,5vw,3rem);margin:0 0 clamp(2rem,5vw,3rem)}
.flowers img{width:clamp(66px,13vw,110px)}
.garden{display:grid;gap:clamp(1.6rem,5vw,3.4rem);grid-template-columns:1fr;align-items:center}
@media (min-width:760px){.garden{grid-template-columns:1fr 1fr}}
.garden .shot{max-width:330px;margin-inline:auto;width:100%}

/* ---- 物語 ---- */
.story{display:grid;gap:clamp(1.2rem,3vw,1.6rem);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:2.6rem}
.story img{border-radius:18px;box-shadow:0 14px 30px rgba(60,50,30,.14);
  aspect-ratio:4/3;object-fit:cover;width:100%}

/* ---- リンクカード ---- */
.links{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:2.4rem}
.link-card{
  display:block;text-decoration:none;padding:1.6rem 1.7rem;border-radius:20px;
  background:#fff;border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 22px rgba(60,50,30,.07);
  transition:transform .2s ease, box-shadow .2s ease;
}
.link-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(60,50,30,.12)}
.link-card b{display:block;font-size:1.02rem;margin-bottom:.3rem}
.link-card span{font-size:.86rem;color:var(--ink-soft)}

/* ---- フッター ---- */
footer{background:#0c2a69;color:#B9C8EA;padding:clamp(3.5rem,8vw,5rem) 0 3rem;font-size:.88rem}
footer h2{font-size:1.1rem;color:#fff;margin-bottom:1.4rem}
.info{border-top:1px solid rgba(255,255,255,.14);margin-top:.5rem}
.info div{display:flex;gap:1.2rem;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.14);flex-wrap:wrap}
.info dt,.info b{flex:0 0 8.5rem;color:#8FA6DC;font-weight:400;font-size:.82rem;letter-spacing:.08em}
.info span{flex:1 1 14rem;color:#DCE5FA}
.info a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(220,229,250,.38);padding-bottom:1px}
.info a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.8)}
.doc .mail{font-size:1.02rem;font-weight:700;margin:.2rem 0 1.4rem}
.foot-links{margin-top:2.2rem;display:flex;gap:1.6rem;flex-wrap:wrap}
.foot-links a{color:#B9C8EA;text-decoration:none;border-bottom:1px solid rgba(185,200,234,.4);padding-bottom:2px}
.foot-links a:hover{color:#fff}
.copy{margin-top:2.4rem;font-size:.76rem;color:#7B90C4;letter-spacing:.08em}

/* ---- 下層ページ ---- */
.page-head{padding:clamp(3.5rem,10vw,5.5rem) 0 clamp(2rem,5vw,3rem);text-align:center}
.page-head .enso-sm{width:64px;margin:0 auto 1.4rem;opacity:.9}
.page-head h1{font-size:clamp(1.4rem,4.4vw,1.9rem);color:#fff;margin:0;letter-spacing:.08em}
.page-head .jp{color:#A9BEEC;font-size:.8rem;letter-spacing:.3em;margin-top:.8rem}
.doc{background:var(--cream);padding:clamp(3rem,8vw,4.5rem) 0 clamp(4rem,10vw,6rem)}
.doc h2{font-size:1.15rem;margin:2.8rem 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--cream-2)}
.doc h2:first-child{margin-top:0}
.doc h3{margin:1.8rem 0 .5rem;font-size:1rem}
.doc p,.doc li{font-size:.95rem;color:#4A5060}
.doc ul{padding-left:1.3em;margin:0 0 1.3rem}
.doc li{margin-bottom:.5rem}
.doc a{color:#1b47a3}
.back{display:inline-block;margin-top:3rem;font-size:.88rem;text-decoration:none;color:#1b47a3;
  border-bottom:1px solid rgba(27,71,163,.35);padding-bottom:2px}
.qa{border-top:1px solid var(--cream-2)}
.qa details{border-bottom:1px solid var(--cream-2);padding:.4rem 0}
.qa summary{cursor:pointer;padding:1rem .2rem;font-weight:700;list-style:none;font-size:.98rem;
  display:flex;gap:.7rem;align-items:flex-start;line-height:1.7}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"＋";color:#8B93A8;font-weight:400;flex:0 0 auto}
.qa details[open] summary::before{content:"−"}
.qa .a{padding:0 .2rem 1.2rem 1.9rem}
.qa .a p{font-size:.93rem;margin-bottom:.8rem}