/* ===== Hapilab 共通デザイン（工房の静けさ × 深緑） ===== */
:root{
  --paper:#F8F5EE;
  --paper-deep:#EFE9DC;
  --ink:#2B2B26;
  --ink-soft:#6B675C;
  --green:#2E4F3E;
  --green-mid:#4C7A5E;
  --spark:#E8A23A;
  --line:#DDD5C4;
  --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:2.2;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ---- ナビ ---- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 4vw;
  background:rgba(248,245,238,.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .brand img{height:22px;}
.nav ul{display:flex;gap:clamp(12px,2.4vw,30px);list-style:none;}
.nav a{
  text-decoration:none;font-size:11.5px;letter-spacing:.22em;
  color:var(--ink-soft);text-transform:uppercase;font-weight:600;
  transition:color .2s;
}
.nav a:hover,.nav a.current{color:var(--green);}
@media (max-width:720px){
  .nav{flex-direction:column;gap:8px;padding:12px 4vw;}
  .nav ul{flex-wrap:wrap;justify-content:center;gap:14px;}
}

/* ---- 汎用 ---- */
.label{
  font-size:11px;letter-spacing:.36em;color:var(--green-mid);
  text-transform:uppercase;font-weight:700;
  display:flex;align-items:center;gap:14px;margin-bottom:28px;
}
.label::after{content:"";flex:0 0 46px;height:1px;background:var(--green-mid);opacity:.5;}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--ink);}
.headline{
  font-size:clamp(26px,4.6vw,44px);
  line-height:1.9;letter-spacing:.08em;
}
.lead{
  margin-top:30px;font-size:15px;line-height:2.5;color:var(--ink-soft);
  max-width:34em;
}
.lead strong{color:var(--green);font-weight:700;}
.btn{
  display:inline-block;margin-top:38px;
  font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;
  text-decoration:none;color:var(--green);
  border:1px solid var(--green-mid);border-radius:999px;
  padding:14px 36px;transition:background .25s,color .25s;
}
.btn:hover{background:var(--green);color:var(--paper);}
.btn.solid{background:var(--green);color:var(--paper);}
.btn.solid:hover{background:var(--green-mid);}

/* ---- セクション骨格 ---- */
.scene{
  min-height:88vh;display:grid;align-items:center;
  grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);
  padding:110px 6vw;
}
.scene.rev .photo{order:-1;}
.scene .photo img{
  width:100%;height:min(72vh,640px);object-fit:cover;
  border-radius:2px;
}
.scene .photo figcaption{
  margin-top:12px;font-size:11px;letter-spacing:.2em;color:var(--ink-soft);
}
.scene.alt{background:var(--paper-deep);}
@media (max-width:860px){
  .scene{grid-template-columns:1fr;min-height:auto;padding:80px 6vw;}
  .scene.rev .photo{order:0;}
  .scene .photo img{height:56vw;max-height:480px;}
}

/* ---- ヒーロー ---- */
.hero{
  min-height:96vh;display:grid;align-items:center;
  grid-template-columns:1.05fr .95fr;gap:clamp(28px,6vw,80px);
  padding:150px 6vw 90px;
}
.hero h1{
  font-size:clamp(34px,6vw,60px);line-height:1.8;letter-spacing:.1em;
}
.hero h1 .accent{color:var(--spark);}
.hero .mission{
  margin-top:34px;font-size:15.5px;line-height:2.6;color:var(--ink-soft);
}
.hero .photo img{
  width:100%;height:min(78vh,700px);object-fit:cover;border-radius:2px;
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:130px;min-height:auto;}
  .hero .photo img{height:60vw;max-height:480px;}
}

/* ---- スイッチ図鑑（switch.html） ---- */
.pair-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(20px,3vw,40px);margin-top:50px;
}
.pair{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.pair .imgs{display:grid;grid-template-columns:1fr 1fr;}
.pair .imgs img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.pair .txt{padding:22px 24px 26px;}
.pair h3{font-size:18px;letter-spacing:.12em;margin-bottom:8px;}
.pair p{font-size:13.5px;line-height:2;color:var(--ink-soft);}
.pair .verb{
  display:inline-block;font-size:11px;letter-spacing:.3em;color:var(--spark);
  font-weight:700;margin-bottom:10px;text-transform:uppercase;
}

/* ---- 1日のタイムライン ---- */
.oneday{max-width:720px;margin:50px auto 0;}
.oneday .item{
  display:grid;grid-template-columns:110px 1fr;gap:24px;
  padding:26px 0;border-top:1px solid var(--line);
}
.oneday .item:last-child{border-bottom:1px solid var(--line);}
.oneday .time{
  font-family:var(--serif);font-size:17px;color:var(--green);letter-spacing:.1em;
}
.oneday h3{font-size:15.5px;margin-bottom:4px;font-family:var(--sans);font-weight:700;}
.oneday p{font-size:13.5px;color:var(--ink-soft);line-height:2;}
@media (max-width:560px){.oneday .item{grid-template-columns:1fr;gap:6px;}}

/* ---- センター文 ---- */
.center-state{
  padding:130px 6vw;text-align:center;
}
.center-state .headline{margin-bottom:26px;}
.center-state .lead{margin-left:auto;margin-right:auto;}

/* ---- プロフィール ---- */
.profile-box{
  display:flex;gap:40px;align-items:center;max-width:820px;
}
.profile-box img{
  width:150px;height:150px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);flex:0 0 auto;
}
.profile-box .who h3{font-size:22px;letter-spacing:.14em;margin:4px 0 14px;}
.profile-box .who .role{font-size:11px;letter-spacing:.3em;color:var(--green-mid);text-transform:uppercase;font-weight:700;}
.profile-box .who p{font-size:14px;color:var(--ink-soft);line-height:2.2;}
@media (max-width:640px){.profile-box{flex-direction:column;align-items:flex-start;}}

/* ---- フッター ---- */
footer{
  background:var(--green);color:#D8E4D8;
  padding:90px 6vw 40px;text-align:center;
}
footer .f-catch{font-family:var(--serif);font-size:clamp(20px,3.4vw,30px);letter-spacing:.14em;color:var(--paper);margin-bottom:26px;}
footer .f-mail{font-size:15px;letter-spacing:.06em;}
footer .f-mail a{color:var(--spark);text-decoration:none;font-weight:700;}
footer .f-mail a:hover{text-decoration:underline;}
footer .f-links{margin-top:26px;font-size:12px;letter-spacing:.2em;}
footer .f-links a{color:#AFC6B2;text-decoration:none;margin:0 14px;}
footer .f-links a:hover{color:var(--paper);}
footer .copy{margin-top:60px;font-size:11px;letter-spacing:.2em;color:#87A38C;}

/* ---- ふわっと表示 ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease;}
.reveal.on{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
}