:root{
  --color-primary: #F2C14A;
  --color-primary-deep: #D9A02E;
  --color-secondary: #8C6A3A;
  --color-accent: #6FA85C;
  --color-bg: #FDFAF1;
  --color-text: #3A3028;
  --color-light: #FFF6DC;
  --c-banana:#F2C14A;
  --c-banana-light:#F8DD8A;
  --c-banana-green:#C7CC58;
  --c-leaf:#6FA85C;
  --c-leaf-deep:#3F6E2C;
  --c-stem:#8C6A3A;
  --c-spot:#7A5630;
  --serif: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
  --sans:  "Noto Sans JP", "Yu Gothic", "游ゴシック", system-ui, sans-serif;
  --en:    "Cormorant Garamond", serif;
  --maxw: 1180px;
  --pad-x: clamp(20px, 5vw, 56px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--sans); font-weight:400; line-height:1.95;
  font-size:14px; letter-spacing:.06em; -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x);}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.confetti i{position:absolute;border-radius:50%;opacity:.8;display:block;}
.mark{ position:relative; display:inline-block; width:64px; height:80px; }
.mark svg{width:100%;height:100%;display:block}
.side-pagetop{
  position:fixed; left:24px; bottom:24px; z-index:60;
  width:74px; height:74px; display:grid; place-items:center;
  color:#3A3028; font-family:var(--en); font-size:11px; letter-spacing:.22em;
  opacity:0; transform:translateY(20px); pointer-events:none;
  transition:opacity .4s ease, transform .4s ease;
}
.side-pagetop.is-on{opacity:1;transform:none;pointer-events:auto;}
.side-pagetop svg{position:absolute;inset:0;width:100%;height:100%}
.side-pagetop span{position:relative;z-index:1; font-weight:600;}
.side-links{
  position:fixed; right:18px; bottom:24px; z-index:60;
  display:flex; gap:22px; font-size:12px; letter-spacing:.18em;
  background:rgba(253,250,241,.78); backdrop-filter: blur(6px);
  padding:8px 18px; border-radius:100px;
}
.side-links a{position:relative;padding:6px 0;}
.side-links a.active{color:var(--color-primary-deep)}
@media (max-width:720px){.side-links{display:none}}
.topbar{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px var(--pad-x); z-index:5;
  font-size:12px; letter-spacing:.2em; color:var(--color-text);
}
.topbar__en{ font-family:var(--en); font-style:italic; font-size:11px;
  letter-spacing:.32em; color:var(--color-secondary); }
.hero{ position:relative; padding-top:120px; padding-bottom:80px; overflow:hidden; }
.hero__title{ display:flex; justify-content:center; align-items:flex-start; gap:18px; position:relative; z-index:2;}
.hero__title .vt{
  writing-mode: vertical-rl; font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px); letter-spacing: .35em; line-height: 1.4;
  color: var(--color-text);
}
.hero__title .vt-en{
  writing-mode: vertical-rl; font-family: var(--en); font-style: italic;
  font-size: 11px; letter-spacing: .35em; color: var(--color-secondary);
  align-self:flex-start; margin-top: 6px;
}
.mascots{
  display:flex; justify-content:center; align-items:flex-end;
  gap: clamp(10px, 1.6vw, 22px);
  margin: 60px 0 80px; position:relative; z-index:2;
}
.mascots .m{ display:flex; flex-direction:column; align-items:center; gap:8px; transition: transform .4s ease;}
.mascots .m:hover{ transform: translateY(-6px); }
.banana-svg{ width:30px; height:24px; }
.hero__photo{
  position:relative; z-index:2; max-width:880px; margin:0 auto;
  aspect-ratio: 16 / 9; border-radius:6px; overflow:hidden;
  background: linear-gradient(135deg, #FFE9A3 0%, #F2C14A 50%, #B7872A 100%);
}
.hero__photo .ph-inner{
  position:absolute; inset:0; display:grid; place-items:center;
  color:rgba(255,255,255,.85); font-family:var(--en); font-style:italic;
  letter-spacing:.32em; font-size:13px;
}
.hero__photo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(380px 280px at 22% 65%, rgba(255,235,170,.6), transparent 60%),
    radial-gradient(420px 320px at 70% 40%, rgba(255,250,210,.5), transparent 60%),
    radial-gradient(260px 200px at 85% 70%, rgba(220,255,180,.35), transparent 60%);
}
.lede{ text-align:center; padding: 100px var(--pad-x) 120px; position:relative;}
.lede h1{
  font-family:var(--serif); font-weight:500;
  font-size: clamp(26px, 3.2vw, 38px); line-height:1.9; letter-spacing:.08em;
  margin:0 auto 36px; text-wrap: balance;
}
.lede p{ max-width:560px; margin:0 auto; font-size:13px; line-height:2.1; color:#5a4a3e; }
.wave{ display:block; width:100%; height:34px; color:#F4ECCF; }
.wave svg{width:100%;height:100%;display:block}
.duo{ display:flex; justify-content:center; gap: 32px; padding: 40px var(--pad-x) 80px; flex-wrap:wrap;}
.duo .card{ background:#fff; padding:14px 14px 28px; box-shadow: 0 18px 40px -28px rgba(58,48,40,.25); position:relative;}
.duo .card .tape{ position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-2deg); width:60px; height:14px; background:rgba(242,193,74,.45);}
.duo .card .ph{ width: clamp(180px, 22vw, 280px); aspect-ratio: 4/3; background: linear-gradient(135deg, #FFEFB8, #C49A3E);}
.duo .card.b .ph{ width: clamp(220px, 28vw, 360px); aspect-ratio: 4/3; background: linear-gradient(135deg, #E5E5A8, #6FA85C);}
.two-jobs{ position:relative; padding: 90px 0 120px; text-align:center;}
.two-jobs__verbs{ display:flex; justify-content:center; gap:28px; font-family:var(--serif); font-size:18px; letter-spacing:.4em;}
.two-jobs__verbs span{ writing-mode:vertical-rl; }
.two-jobs__row{
  display:grid; grid-template-columns: 80px 1fr; align-items:flex-start;
  max-width:760px; margin:60px auto 0; gap:20px; padding:0 var(--pad-x);
}
.two-jobs__sub{
  writing-mode:vertical-rl; font-family:var(--serif);
  font-size:14px; letter-spacing:.4em; color:var(--color-text);
  justify-self:end; padding-top:8px;
}
.two-jobs__sub small{
  display:block; font-family:var(--en); font-style:italic;
  font-size:10px; letter-spacing:.3em; opacity:.7; margin-top:18px;
  writing-mode:horizontal-tb;
}
.job-card{
  background:#fff; border-radius:6px; padding:36px 28px 22px;
  position:relative; box-shadow: 0 22px 44px -28px rgba(58,48,40,.2);
  margin-bottom:32px;
}
.job-card__badge{
  position:absolute; top:-22px; right:24px;
  width:46px; height:46px; border-radius:50%;
  background: var(--color-primary); color:#3A3028;
  display:grid; place-items:center;
  font-family:var(--en); font-style:italic; font-size:14px; letter-spacing:.1em; font-weight:600;
}
.job-card__title{
  text-align:center; font-family:var(--serif); font-weight:500; font-size:18px;
  letter-spacing:.18em; padding-bottom:18px;
  border-bottom:1px dashed #E8DFC2; margin-bottom:18px;
}
.job-card__photo{
  aspect-ratio: 16/9; background: linear-gradient(135deg, #FFE9A3, #C49A3E);
  border-radius:4px; margin-bottom:22px;
}
.job-card.b .job-card__photo{ background: linear-gradient(135deg, #DCEAB8, #5E8B3D);}
.job-card.b .job-card__badge{ background: var(--color-accent); color:#fff;}
.job-card__body{ font-size:13px; color:#5a4a3e; line-height:2.1; text-align:center; padding: 0 8px 18px;}
.job-card__more{
  display:block; text-align:center; border-top:1px solid #EFE7CB;
  padding:14px 0 4px; font-size:12px; letter-spacing:.3em;
  color:var(--color-primary-deep); font-family:var(--en); font-style:italic; font-weight:500;
}
.job-card__more::after{ content:" ▾"; }
.banana-detail{ padding: 100px 0 60px; text-align:center; position:relative;}
.banana-detail h3{ font-family:var(--serif); font-weight:500; font-size:24px; letter-spacing:.24em; margin: 28px 0 18px;}
.banana-detail p{ max-width:520px; margin:0 auto 36px; color:#5a4a3e; font-size:13px; line-height:2.1;}
.banana-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:880px; margin: 30px auto 0;}
@media (max-width:820px){ .banana-grid{ grid-template-columns:repeat(2,1fr);} }
.banana-card{ background:#fff; border-radius:4px; padding:14px; text-align:left;}
.banana-card__photo{
  aspect-ratio:1/1; border-radius:3px; margin-bottom:12px;
  display:grid; place-items:center;
  background: radial-gradient(circle at 50% 50%, #FFE48E, #B98520 90%);
}
.banana-card:nth-child(2) .banana-card__photo{ background: radial-gradient(circle at 50% 50%, #DBE89A, #6FA85C 90%);}
.banana-card:nth-child(3) .banana-card__photo{ background: radial-gradient(circle at 50% 50%, #FFD46A, #9A6C18 90%);}
.banana-card:nth-child(4) .banana-card__photo{ background: radial-gradient(circle at 50% 50%, #FCE6A8, #C28A2C 90%);}
.banana-card__name{ font-family:var(--serif); font-size:13px; font-weight:500; letter-spacing:.16em; margin-bottom:6px;}
.banana-card__body{ font-size:11px; line-height:1.9; color:#7a6a5e;}
.dots{ display:flex; justify-content:center; gap:8px; margin-top:30px;}
.dots i{ width:6px; height:6px; border-radius:50%; background:#E5DCB6; display:block;}
.dots i.on{ background: var(--color-primary-deep); }
.crafted{ padding: 100px var(--pad-x) 100px; text-align:center; position:relative;}
.crafted__head{ display:inline-flex; align-items:center; gap:18px; margin-bottom:18px;}
.crafted__head .ic{
  width:84px; height:84px; border-radius:50%;
  background: linear-gradient(135deg, #FFEFB8, #B98520);
}
.crafted__head h2{ font-family:var(--serif); font-weight:500; font-size:26px; letter-spacing:.3em; margin:0;}
.crafted p.lead{ max-width:520px; margin:0 auto 50px; font-size:13px; line-height:2.1; color:#5a4a3e;}
.crafted__item{
  max-width: 760px; margin: 0 auto; background:#fff;
  border-radius:6px; padding: 28px;
  display:grid; grid-template-columns: 1fr 240px; gap:28px; align-items:center;
  text-align:left; box-shadow: 0 22px 44px -28px rgba(58,48,40,.2); position:relative;
}
@media (max-width:680px){ .crafted__item{ grid-template-columns:1fr;} }
.crafted__item h4{ font-family:var(--serif); font-weight:500; font-size:16px; letter-spacing:.2em; margin:0 0 14px;}
.crafted__item p{ font-size:12px; line-height:2.0; color:#5a4a3e; margin-bottom:18px;}
.crafted__pill{
  display:inline-block; padding:10px 22px; background: var(--color-primary); color:#3A3028;
  border-radius:100px; font-size:11px; letter-spacing:.22em; font-weight:600;
  transition: transform .3s ease, box-shadow .3s ease;
}
.crafted__pill:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -10px rgba(242,193,74,.6);}
.crafted__photo{ aspect-ratio: 1/1; background: linear-gradient(135deg, #FFE9A3, #8C6A3A); border-radius:4px;}
.greenband{
  position:relative;
  background: linear-gradient(180deg, #5E8A3C 0%, #345A22 100%);
  color:#fff; padding: 110px var(--pad-x); text-align:center; overflow:hidden;
}
.greenband::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(700px 340px at 70% 60%, rgba(245,235,150,.18), transparent 60%),
    radial-gradient(500px 240px at 20% 30%, rgba(170,210,100,.22), transparent 60%);
}
.greenband__inner{ position:relative; z-index:2; display:flex; justify-content:center; align-items:center; gap:60px;}
.greenband__title{
  writing-mode: vertical-rl; font-family: var(--serif); font-weight:500;
  font-size: clamp(22px, 3vw, 34px); letter-spacing: .4em; line-height: 1.6;
}
.foot{ position:relative; padding: 100px 0 60px; text-align:center; background: var(--color-bg);}
.foot p.body{ max-width:560px; margin:0 auto 28px; font-size:13px; line-height:2.1; color:#5a4a3e;}
.foot .email{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--en); font-style:italic;
  font-size:14px; color:var(--color-primary-deep); letter-spacing:.1em;
  border-bottom:1px solid currentColor; padding-bottom:2px;
}
.foot .email::before{ content:""; width:10px; height:10px; border-radius:50%; background: currentColor;}
.foot__circles{ display:flex; justify-content:center; gap:24px; margin-top:80px; flex-wrap:wrap;}
.foot__circle{
  width:130px; height:130px; border-radius:50%; border:8px solid #fff;
  background-size:cover; background-position:center;
  transform: translateY(50px); box-shadow: 0 12px 32px -16px rgba(58,48,40,.3);
}
.foot__circle.c1{ background: radial-gradient(circle at 50% 60%, #DCEAB8, #3F6E2C);}
.foot__circle.c2{ background: radial-gradient(circle at 50% 60%, #FFE9A3, #B7872A);}
.foot__circle.c3{ background: radial-gradient(circle at 50% 60%, #E2D2A4, #8C6A3A);}
.foot__circle.c4{ background: radial-gradient(circle at 50% 60%, #FFEFB8, #C49A3E);}
.coral{
  background: var(--color-primary); color:#3A3028;
  padding: 130px var(--pad-x) 80px; position:relative;
}
.coral__grid{ max-width: var(--maxw); margin:0 auto; display:grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items:center;}
@media (max-width:820px){ .coral__grid{ grid-template-columns:1fr; gap:50px;} }
.coral__brand{ display:flex; align-items:flex-start; gap:18px; }
.coral__brand .vt{ writing-mode: vertical-rl; font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing:.32em; line-height:1.5;}
.coral__brand .vt-en{ writing-mode: vertical-rl; font-family: var(--en); font-style:italic; font-size: 10px; letter-spacing:.3em; opacity:.85;}
.coral__corp{ margin-top:36px; font-size:12px; letter-spacing:.1em; line-height:2.1;}
.coral__corp h5{
  font-family:var(--serif); font-size:13px; font-weight:500; letter-spacing:.3em;
  margin: 0 0 14px; padding-bottom:8px;
  border-bottom:1px solid rgba(58,48,40,.3); display:inline-block; padding-right:30px;
}
.coral__corp dl{ display:grid; grid-template-columns: 64px 1fr; row-gap:6px; column-gap:14px; margin:0;}
.coral__corp dt{font-family:var(--en); font-style:italic; font-size:11px; letter-spacing:.18em; opacity:.8;}
.coral__corp dd{ margin:0; }
.coral__map{ position:relative; min-height:240px; background:rgba(58,48,40,.12); border-radius:8px; }
.coral__contact h5{
  font-family:var(--serif); font-size:13px; font-weight:500; letter-spacing:.3em;
  margin: 28px 0 12px; padding-bottom:8px;
  border-bottom:1px solid rgba(58,48,40,.3); display:inline-block; padding-right:30px;
}
.coral__contact .email{ color:#3A3028; }
.outro{ text-align:center; padding: 110px var(--pad-x); background: var(--color-bg); position:relative;}
.outro__title{ display:inline-flex; gap:14px; align-items:flex-start;}
.outro__title .vt{ writing-mode: vertical-rl; font-family: var(--serif); font-weight:500; font-size: clamp(22px, 2.4vw, 30px); letter-spacing:.36em; line-height:1.5;}
.outro__title .vt-en{ writing-mode: vertical-rl; font-family: var(--en); font-style:italic; font-size:10px; letter-spacing:.34em; color:var(--color-secondary); margin-top:6px;}
.outro__bottom-nav{
  margin-top: 50px; display:inline-flex; flex-wrap:wrap; justify-content:center;
  gap: 28px; font-size:12px; letter-spacing:.18em; background:#fff;
  padding:18px 32px; border-radius:100px;
  box-shadow: 0 14px 30px -22px rgba(58,48,40,.25);
}
.outro__bottom-nav a:hover{ color: var(--color-primary-deep); }
.copyright{ text-align:center; padding: 30px var(--pad-x);
  font-family:var(--en); font-style:italic; font-size:11px;
  letter-spacing:.3em; color:#9A8A7E; background: var(--color-bg);
}
.reveal{ opacity:0; transform:translateY(24px); transition: opacity .9s ease, transform .9s ease;}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s;}
.reveal[data-d="2"]{ transition-delay:.16s;}
.reveal[data-d="3"]{ transition-delay:.24s;}
.reveal[data-d="4"]{ transition-delay:.32s;}
.reveal[data-d="5"]{ transition-delay:.4s;}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  .reveal{opacity:1;transform:none;}
}