/* =========================================================
   haru coffee — 共有スタイル（オリウェブ 制作例・複数ページ版）
   1ページ版 samples/cafe/index.html の <style> を土台に抽出・流用
   手書きコラージュ＋黒板メニュー（スクラップブック・温かみ）
   ========================================================= */

:root{
  --craft:#cbb18f;
  --cream:#f6efe3;
  --cream-d:#efe5d2;
  --brown:#4a3526;
  --brown-soft:#6b5240;
  --pop:#e2603f;
  --pop-d:#c84d2e;
  --board:#33302a;
  --chalk:#f3ecdd;
  --tape:rgba(226,96,63,.22);
  --script:"Caveat",cursive;
  --hand:"Yomogi",cursive;
  --body:"Zen Maru Gothic","Noto Sans JP",sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--brown);line-height:1.9;
  background:var(--cream);
  background-image:
    radial-gradient(circle at 12% 20%, rgba(203,177,143,.18), transparent 38%),
    radial-gradient(circle at 88% 72%, rgba(226,96,63,.07), transparent 42%);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ===== handwriting + type scale ===== */
.script{font-family:var(--script);line-height:.95}
.hand{font-family:var(--hand)}
.ey{font-family:var(--hand);font-size:clamp(.8rem,2.2vw,.95rem);color:var(--pop);letter-spacing:.04em}

/* ===== sticker tag ===== */
.sticker{
  display:inline-block;font-family:var(--hand);font-size:.78rem;line-height:1.3;
  background:var(--pop);color:#fff7f0;padding:.34em .9em;border-radius:999px;
  box-shadow:0 4px 0 rgba(0,0,0,.10);transform:rotate(-3deg);
  border:2px dashed rgba(255,255,255,.55);
}
.sticker.cream{background:var(--chalk);color:var(--brown);border-color:rgba(74,53,38,.35)}
.sticker.craft{background:var(--craft);color:var(--brown);border-color:rgba(74,53,38,.3)}

/* ===== photo frame (taped polaroid) ===== */
.photo{position:relative;background:#fff;padding:9px 9px 14px;border-radius:3px;
  box-shadow:0 14px 30px rgba(74,53,38,.18),0 3px 8px rgba(74,53,38,.12)}
.photo img{border-radius:2px;width:100%;object-fit:cover}
.photo figcaption{font-family:var(--hand);font-size:.8rem;color:var(--brown-soft);
  text-align:center;padding-top:7px;letter-spacing:.02em}
.photo::before{ /* washi tape */
  content:"";position:absolute;top:-13px;left:50%;width:92px;height:26px;
  transform:translateX(-50%) rotate(-2deg);
  background:var(--tape);border-left:1px dashed rgba(226,96,63,.5);border-right:1px dashed rgba(226,96,63,.5);
}
.photo.tl::before{left:18px;transform:rotate(-24deg)}
.photo.tr::before{left:auto;right:18px;transform:rotate(22deg)}

/* =========================================================
   共有ヘッダー（サイト名＋5ページナビ・aria-current）
   ========================================================= */
.site-head{
  position:sticky;top:0;z-index:60;background:rgba(246,239,227,.9);
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(74,53,38,.1);
  padding:12px 0;
}
.site-head .bar{max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{width:38px;height:38px;flex:none}
.brand b{font-family:var(--script);font-size:1.9rem;font-weight:700;color:var(--brown);line-height:.8}
.brand span{font-family:var(--hand);font-size:.6rem;letter-spacing:.2em;color:var(--brown-soft);text-transform:uppercase;display:block}
.site-nav{margin-left:auto}
.site-nav ul{list-style:none;display:flex;gap:clamp(12px,2vw,22px);align-items:center;flex-wrap:wrap;
  font-family:var(--hand);font-size:.86rem}
.site-nav a{color:var(--brown-soft);position:relative;padding:2px 0;white-space:nowrap}
.site-nav a:hover{color:var(--pop)}
.site-nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--pop);transition:width .25s;border-radius:2px}
.site-nav a:hover::after{width:100%}
.site-nav a[aria-current="page"]{color:var(--pop)}
.site-nav a[aria-current="page"]::after{width:100%}
.site-nav a.nav-cta{background:var(--pop);color:#fff7f0;padding:.34em 1em;border-radius:999px;
  box-shadow:0 4px 0 var(--pop-d)}
.site-nav a.nav-cta:hover{color:#fff7f0;transform:translateY(-1px)}
.site-nav a.nav-cta::after{display:none}

/* ===== buttons ===== */
.btn{font-family:var(--hand);font-size:.95rem;padding:.7em 1.5em;border-radius:999px;
  display:inline-flex;align-items:center;gap:.5em;transition:transform .2s,box-shadow .2s}
.btn.fill{background:var(--pop);color:#fff7f0;box-shadow:0 6px 0 var(--pop-d)}
.btn.fill:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--pop-d)}
.btn.line{color:var(--brown);border:2px solid var(--brown)}
.btn.line:hover{background:var(--brown);color:var(--cream)}

/* =========================================================
   ページ・ヒーロー（下層ページの開幕：写真コラージュ小型）
   ========================================================= */
.hero{padding:36px 0 30px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.hero-words{position:relative;z-index:3}
.hero-words .kicker{display:inline-block;transform:rotate(-2deg);margin-bottom:10px}
.hero h1{font-family:var(--script);font-weight:700;color:var(--brown);
  font-size:clamp(3rem,9vw,6rem);line-height:.86;letter-spacing:.01em}
.hero h1 .pop{color:var(--pop);display:inline-block;transform:rotate(-3deg)}
.hero h1 small{display:block;font-family:var(--hand);font-size:clamp(1rem,3vw,1.5rem);
  color:var(--brown-soft);letter-spacing:.06em;margin-top:14px;line-height:1.6}
.hero p.lead{font-size:1rem;max-width:32ch;margin:20px 0 26px;color:var(--brown-soft)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* collage cluster */
.cluster{position:relative;min-height:440px}
.cluster .photo{position:absolute}
.c1{width:60%;top:0;left:6%;transform:rotate(-5deg);z-index:2}
.c2{width:46%;top:32%;right:0;transform:rotate(6deg);z-index:3}
.c3{width:42%;bottom:0;left:0;transform:rotate(3deg);z-index:4}
.blob{position:absolute;z-index:1;width:78%;height:78%;top:10%;left:11%;
  background:var(--craft);border-radius:46% 54% 60% 40%/52% 44% 56% 48%;opacity:.5;filter:blur(2px)}
.cluster .ster{position:absolute;z-index:6}
.ster.s1{top:-6px;right:14%}
.ster.s2{bottom:6%;right:-6px}
.scribble{position:absolute;z-index:5;width:90px;height:auto;color:var(--pop)}
.scribble.a1{top:42%;left:-6%;transform:rotate(-10deg)}

.beans{margin:26px 0 0;display:flex;gap:18px;flex-wrap:wrap;font-family:var(--hand);font-size:.84rem;color:var(--brown-soft)}
.beans span{display:inline-flex;align-items:center;gap:7px}
.beans svg{color:var(--pop)}

/* ===== compact page hero (下層ページの帯状ヒーロー) ===== */
.page-hero{padding:30px 0 14px}
.page-hero .in{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative}
.page-hero .kicker{display:inline-block;transform:rotate(-2deg);margin-bottom:12px}
.page-hero h1{font-family:var(--script);font-weight:700;color:var(--brown);
  font-size:clamp(2.8rem,8vw,5rem);line-height:.86}
.page-hero h1 .pop{color:var(--pop);display:inline-block;transform:rotate(-2deg)}
.page-hero .sub{font-family:var(--hand);font-size:clamp(.95rem,2.5vw,1.2rem);
  color:var(--brown-soft);margin-top:14px;max-width:40ch}
.page-hero .ph-rule{height:3px;margin-top:22px;border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--craft) 0 16px,transparent 16px 26px)}

/* =========================================================
   TORN NOTE (torn paper quote)
   ========================================================= */
.note-strip{margin:14px 0 6px}
.torn{background:var(--chalk);position:relative;padding:34px clamp(24px,5vw,60px);
  box-shadow:0 12px 28px rgba(74,53,38,.12);transform:rotate(-.6deg);
  border-radius:4px}
.torn::before,.torn::after{content:"";position:absolute;left:0;right:0;height:12px;
  background-size:22px 12px}
.torn::before{top:-11px;background-image:repeating-linear-gradient(135deg,transparent 0 9px,var(--chalk) 9px 18px)}
.torn::after{bottom:-11px;background-image:repeating-linear-gradient(45deg,transparent 0 9px,var(--chalk) 9px 18px)}
.torn .q{font-family:var(--script);font-size:clamp(1.7rem,5vw,2.9rem);color:var(--brown);line-height:1.1}
.torn .q b{color:var(--pop)}
.torn .by{font-family:var(--hand);font-size:.85rem;color:var(--brown-soft);margin-top:10px}

/* =========================================================
   SECTION TITLES
   ========================================================= */
.sec{padding:54px 0}
.sec-head{margin-bottom:30px;position:relative}
.sec-head .num{font-family:var(--script);font-size:3rem;color:var(--craft);line-height:.7}
.sec-head h2{font-family:var(--script);font-size:clamp(2.4rem,7vw,3.8rem);color:var(--brown);line-height:.9;margin-top:-6px}
.sec-head h2 em{font-style:normal;color:var(--pop)}
.sec-head .sub{font-family:var(--hand);font-size:.9rem;color:var(--brown-soft);margin-top:4px}

/* =========================================================
   BLACKBOARD MENU
   ========================================================= */
.board-wrap{position:relative}
.board{
  background:var(--board);
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.05), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(255,255,255,.04), transparent 50%);
  border:14px solid #6b4a30;border-radius:8px;
  box-shadow:0 22px 50px rgba(74,53,38,.4),inset 0 0 0 2px #2a2722,inset 0 0 60px rgba(0,0,0,.5);
  padding:clamp(30px,5vw,58px);color:var(--chalk);position:relative;overflow:hidden}
.board::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 40px,rgba(255,255,255,.012) 40px 41px)}
.board .bhead{text-align:center;margin-bottom:34px}
.board .bhead .script{font-family:var(--script);font-size:clamp(2.6rem,7vw,4.2rem);color:#fff;line-height:.9}
.board .bhead .script em{font-style:normal;color:var(--pop);}
.board .bhead p{font-family:var(--hand);font-size:.85rem;color:var(--craft);margin-top:6px;letter-spacing:.1em}
.board .bhead svg{margin:10px auto 0;display:block;color:var(--craft)}
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);position:relative;z-index:1}
.mgroup{margin-bottom:8px}
.mgroup h3{font-family:var(--script);font-size:1.9rem;color:var(--pop);margin-bottom:6px;margin-top:18px;display:flex;align-items:center;gap:10px}
.mgroup:first-child h3:first-child,.mgroup h3.first{margin-top:0}
.mgroup h3 svg{color:var(--craft);flex:none}
.mitem{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px dotted rgba(243,236,221,.28)}
.mitem .nm{font-weight:500;white-space:nowrap}
.mitem .nm small{display:block;font-family:var(--hand);font-weight:400;font-size:.72rem;color:var(--craft);white-space:normal}
.mitem .dots{flex:1;border-bottom:1px dotted rgba(243,236,221,.3);transform:translateY(-4px)}
.mitem .pr{font-family:var(--hand);color:#fff;white-space:nowrap}
.mitem .pr::before{content:"¥";font-size:.78em;color:var(--craft);margin-right:1px}
.board .footnote{font-family:var(--hand);font-size:.78rem;color:var(--craft);text-align:center;margin-top:30px;letter-spacing:.06em}
.board-tag{position:absolute;z-index:4;top:-18px;right:24px}

/* =========================================================
   GALLERY SCRAPBOOK
   ========================================================= */
.scrap{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;align-items:start}
.scrap .photo{grid-column:span 4}
.scrap .g1{grid-column:1/6;transform:rotate(-3deg);margin-top:8px}
.scrap .g2{grid-column:6/10;transform:rotate(2deg);margin-top:40px}
.scrap .g3{grid-column:10/13;transform:rotate(-2deg)}
.scrap .g4{grid-column:2/7;transform:rotate(2.5deg);margin-top:6px}
.scrap .g5{grid-column:7/11;transform:rotate(-2.5deg);margin-top:30px}
.scrap .note-card{grid-column:7/13;align-self:center;transform:rotate(-1deg)}
.note-card{background:var(--craft);color:var(--brown);padding:26px 28px;border-radius:4px;
  box-shadow:0 12px 26px rgba(74,53,38,.18);position:relative}
.note-card::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(3deg);
  width:80px;height:24px;background:var(--tape)}
.note-card .script{font-family:var(--script);font-size:2.1rem;color:var(--brown);line-height:.95;margin-bottom:8px}
.note-card p{font-size:.92rem}
.note-card .pin{font-family:var(--hand);font-size:.8rem;color:var(--pop-d);margin-top:10px}

/* =========================================================
   DIARY / STORY
   ========================================================= */
.diary{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.diary-photo{position:relative}
.diary-photo .photo{transform:rotate(-4deg)}
.diary-photo .ster{position:absolute;bottom:-12px;left:-10px;z-index:5}
.diary-text .script{font-family:var(--script);font-size:clamp(2.2rem,6vw,3.4rem);color:var(--brown);line-height:.9;margin-bottom:14px}
.diary-text .script em{font-style:normal;color:var(--pop)}
.diary-text p{margin-bottom:16px}
.diary-text .sig{font-family:var(--script);font-size:2rem;color:var(--pop);margin-top:6px}
.diary-text .sigsub{font-family:var(--hand);font-size:.78rem;color:var(--brown-soft);letter-spacing:.1em}

/* ===== story timeline (はるのこと) ===== */
.timeline{max-width:760px;margin:0 auto;position:relative;padding-left:30px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;
  background:repeating-linear-gradient(var(--craft) 0 8px,transparent 8px 16px)}
.tl-item{position:relative;padding:0 0 30px 6px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-30px;top:6px;width:16px;height:16px;
  border-radius:50%;background:var(--pop);border:3px solid var(--cream);box-shadow:0 0 0 2px var(--craft)}
.tl-item .yr{font-family:var(--script);font-size:1.7rem;color:var(--pop);line-height:.9}
.tl-item h3{font-family:var(--hand);font-size:1.05rem;color:var(--brown);margin:4px 0 6px}
.tl-item p{font-size:.92rem;color:var(--brown-soft)}

/* ===== creed / こだわり cards ===== */
.creed{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.creed .card{background:#fffdf8;border:2px dashed var(--craft);border-radius:8px;
  padding:26px 22px;position:relative;box-shadow:0 8px 22px rgba(74,53,38,.08)}
.creed .card .ic{width:46px;height:46px;border-radius:12px;background:var(--tape);
  display:grid;place-items:center;color:var(--pop-d);margin-bottom:14px}
.creed .card .ic svg{width:24px;height:24px}
.creed .card h3{font-family:var(--script);font-size:1.7rem;color:var(--brown);line-height:.9;margin-bottom:8px}
.creed .card p{font-size:.9rem;color:var(--brown-soft)}

/* =========================================================
   INFO CARD (dark brown panel)
   ========================================================= */
.info-wrap{position:relative;background:var(--brown);color:var(--cream);border-radius:10px;
  padding:clamp(34px,5vw,56px);box-shadow:0 22px 50px rgba(74,53,38,.35);overflow:hidden}
.info-wrap::before{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle,rgba(226,96,63,.4),transparent 70%)}
.info-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;position:relative;z-index:1}
.info-grid h2{font-family:var(--script);font-size:clamp(2.4rem,6vw,3.6rem);color:#fff;line-height:.9;margin-bottom:10px}
.info-grid h2 em{font-style:normal;color:var(--pop)}
.info-grid .lead{font-family:var(--hand);font-size:.95rem;color:var(--craft);max-width:34ch}
.info-list{display:grid;gap:14px;margin-top:6px}
.info-row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding-bottom:13px;border-bottom:1px dashed rgba(203,177,143,.35)}
.info-row .ic{width:30px;height:30px;flex:none;color:var(--pop);background:rgba(246,239,227,.08);
  border-radius:8px;display:grid;place-items:center}
.info-row .ic svg{width:17px;height:17px}
.info-row dt{font-family:var(--hand);font-size:.74rem;color:var(--craft);letter-spacing:.14em}
.info-row dd{font-size:.96rem;color:var(--cream);line-height:1.6}
.info-cta{margin-top:24px}
.info-cta .btn.fill{box-shadow:0 6px 0 var(--pop-d)}

/* ===== map placeholder (架空・地図説明) ===== */
.mapbox{position:relative;border-radius:10px;overflow:hidden;border:3px dashed var(--craft);
  background:
    repeating-linear-gradient(0deg,rgba(203,177,143,.18) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(203,177,143,.18) 0 1px,transparent 1px 34px),
    var(--cream-d);
  min-height:300px;display:grid;place-items:center;text-align:center;padding:30px}
.mapbox .pin{font-family:var(--hand);color:var(--brown);font-size:.95rem;line-height:1.9}
.mapbox .pin .dot{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--pop);color:#fff7f0;margin-bottom:12px;box-shadow:0 6px 0 var(--pop-d)}
.mapbox .pin .dot svg{width:24px;height:24px}
.mapbox .note{font-size:.78rem;color:var(--brown-soft);margin-top:10px}

/* ===== access steps ===== */
.steps{display:grid;gap:16px;counter-reset:step}
.steps li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  background:#fffdf8;border:2px dashed var(--craft);border-radius:8px;padding:18px 20px}
.steps li::before{counter-increment:step;content:counter(step);
  font-family:var(--script);font-size:1.6rem;color:#fff7f0;background:var(--pop);
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;line-height:1;
  box-shadow:0 4px 0 var(--pop-d)}
.steps li h3{font-family:var(--hand);font-size:1rem;color:var(--brown);margin-bottom:2px}
.steps li p{font-size:.9rem;color:var(--brown-soft)}

/* ===== generic prose intro ===== */
.intro-lead{max-width:48ch;font-size:1.02rem;color:var(--brown-soft);margin-bottom:8px}

/* ===== cross-link cards (ページ末の回遊) ===== */
.next{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:10px}
.next a{display:block;background:#fffdf8;border:2px dashed var(--craft);border-radius:8px;
  padding:24px 26px;transition:transform .2s,box-shadow .2s}
.next a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(74,53,38,.12)}
.next a .en{font-family:var(--hand);font-size:.72rem;color:var(--pop);letter-spacing:.1em}
.next a .ti{font-family:var(--script);font-size:2rem;color:var(--brown);line-height:.9;display:block;margin-top:4px}
.next a .d{font-size:.86rem;color:var(--brown-soft);margin-top:8px}

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-foot{margin-top:20px;background:var(--cream-d);border-top:3px dashed var(--craft);padding:48px 0 40px}
.site-foot .in{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-end;margin-bottom:30px}
.foot-logo .script{font-family:var(--script);font-size:2.6rem;color:var(--brown);line-height:.8}
.foot-logo span{font-family:var(--hand);font-size:.74rem;letter-spacing:.2em;color:var(--brown-soft)}
.foot-links{display:flex;gap:18px;font-family:var(--hand);font-size:.86rem;color:var(--brown-soft);flex-wrap:wrap}
.foot-links a:hover{color:var(--pop)}
.sample-badge{display:inline-flex;align-items:center;gap:8px;background:var(--pop);color:#fff7f0;
  font-family:var(--hand);font-size:.76rem;padding:.45em 1em;border-radius:999px;transform:rotate(-1.5deg);
  box-shadow:0 4px 0 var(--pop-d)}
.foot-meta{border-top:1px solid rgba(74,53,38,.16);padding-top:22px;font-size:.78rem;color:var(--brown-soft);line-height:1.9}
.foot-meta .by{font-family:var(--hand);color:var(--brown);font-size:.9rem;margin-bottom:6px}
.foot-meta .cp{margin-top:12px;font-family:var(--hand);color:var(--brown-soft)}
.foot-meta a{border-bottom:1px dotted var(--brown-soft)}
.foot-meta a:hover{color:var(--pop)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .cluster{min-height:380px;max-width:420px;margin:6px auto 0}
  .diary{grid-template-columns:1fr;gap:30px}
  .diary-photo{max-width:340px;margin:0 auto}
  .info-grid{grid-template-columns:1fr;gap:26px}
  .menu-cols{grid-template-columns:1fr;gap:30px}
  .creed{grid-template-columns:1fr;gap:18px}
  .next{grid-template-columns:1fr}
}
@media(max-width:620px){
  .wrap,.page-hero .in,.site-foot .in,.site-head .bar{padding-left:18px;padding-right:18px}
  .site-nav{margin-left:0;width:100%}
  .site-nav ul{justify-content:center;gap:12px 14px;font-size:.8rem}
  .brand{margin:0 auto}
  .site-head .bar{justify-content:center}
  .scrap{grid-template-columns:1fr;gap:30px}
  .scrap .photo,.scrap .note-card{grid-column:1/-1 !important;transform:rotate(-1.5deg) !important;margin-top:0 !important;max-width:340px}
  .scrap .g2,.scrap .g4{margin-left:auto !important;transform:rotate(2deg) !important}
  .scrap .note-card{transform:rotate(-1deg) !important}
  .torn{transform:rotate(0)}
  .cluster{min-height:340px}
  .c1{width:62%}.c2{width:50%}.c3{width:48%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}