/*
  路地珈琲 Roji（デモ・カフェ）
  サロン(ゴールド×カードグリッド)・パン屋(セージ×パララックスLP)・整体(オリーブ×エディトリアル)とは
  配色・タイポグラフィ・レイアウトすべて別系統＝テラコッタ×マスタードの「雑誌・zine風」。
  見出しはセリフではなく太いゴシック（他3デモがセリフ見出しなのに対する差別化）。
*/
:root{
  --cream:#f6efe4;
  --paper:#fbf7ee;
  --terracotta:#b5502e;
  --terracotta-d:#8f3d21;
  --mustard:#d9a441;
  --charcoal:#2b2620;
  --ink:#3a3327;
  --gray:#948a76;
  --line:#e2d5bf;
  --shadow:0 14px 34px rgba(43,38,32,.14);
  --maxw:1160px;
  --sans:"Zen Maru Gothic","Hiragino Sans","Yu Gothic",-apple-system,"Noto Sans JP",sans-serif;
  --serif:Georgia,"Hiragino Mincho ProN","Yu Mincho",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--cream);font-family:var(--sans);
  line-height:1.85;font-size:16px;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
@media(max-width:900px){.wrap{padding-right:64px}}

/* ヘッダー：常時同じ簡易バー・ピル無し（他3デモと違いホバー下線のみ） */
header.site{padding:24px 0;border-bottom:3px solid var(--charcoal)}
.nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--charcoal)}
.brand b{font-family:var(--sans);font-weight:700;font-size:24px;letter-spacing:-.02em}
.brand small{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--terracotta-d);letter-spacing:.04em}
.nav-links{display:flex;gap:22px;font-size:13.5px;font-weight:600}
.nav-links a{text-decoration:none;color:var(--ink);padding-bottom:3px;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a.active{border-color:var(--terracotta)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);
  font-weight:700;font-size:13.5px;padding:14px 26px;text-decoration:none;border:2px solid var(--charcoal);
  transition:background .18s ease,color .18s ease}
.btn-solid{background:var(--charcoal);color:var(--paper)}
.btn-solid:hover{background:var(--terracotta);border-color:var(--terracotta)}
.btn-line{background:transparent;color:var(--charcoal)}
.btn-line:hover{background:var(--charcoal);color:var(--paper)}

section{padding:88px 0}
.eyebrow{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--terracotta-d);display:block;margin-bottom:10px}
h1,h2{font-family:var(--sans);font-weight:700;color:var(--charcoal);margin:0;letter-spacing:-.02em;line-height:1.3}
h2{font-size:clamp(26px,4vw,38px)}
.lead{margin:16px 0 0;color:var(--ink);font-size:14.5px;max-width:32em}
.center{text-align:center}

/* 1) ヒーロー：見出し＋写真モザイク（1枚物ではない） */
.hero{padding:64px 0 0}
.hero-grid{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1fr 1fr}}
.hero h1{font-size:clamp(36px,6.4vw,64px)}
.hero .sub{font-size:15px;color:var(--ink);max-width:26em;margin:18px 0 28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.mosaic{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr 1fr;gap:10px;height:380px}
.mosaic div{background:linear-gradient(155deg,#caa06a,#b5502e) center/cover no-repeat}
.mosaic div:nth-child(1){grid-row:1/3}
.mosaic div:nth-child(2){background:linear-gradient(155deg,#e3c07f,#d9a441) center/cover no-repeat}
.mosaic div:nth-child(3){background:linear-gradient(155deg,#5c4a37,#2b2620) center/cover no-repeat}

/* コンセプト帯（付箋風の見出し） */
.tape-head{display:inline-block;background:var(--mustard);color:var(--charcoal);font-weight:700;
  padding:6px 16px;transform:rotate(-2deg);font-size:13px;letter-spacing:.06em;margin-bottom:18px}

/* 2) メニュー導線（チョーク風ダークパネル・点線リーダー） */
.menu-teaser{background:var(--charcoal);color:var(--paper)}
.menu-teaser h2{color:var(--paper)}
.menu-teaser .eyebrow{color:var(--mustard)}
.chalk-list{list-style:none;margin:30px 0 0;padding:0;max-width:640px}
.chalk-list li{display:flex;align-items:baseline;gap:8px;padding:12px 0;font-size:15px;
  border-bottom:1px dashed rgba(246,239,228,.25)}
.chalk-list .name{white-space:nowrap;font-weight:700}
.chalk-list .fill{flex:1;border-bottom:1px dotted rgba(246,239,228,.35);transform:translateY(-4px)}
.chalk-list .price{font-family:var(--serif);font-style:italic;color:var(--mustard);white-space:nowrap}

/* 3) 選ばれる理由：斜めタグカード */
.why-grid{display:grid;gap:18px;margin-top:36px}
@media(min-width:760px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-card{background:var(--paper);border:2px solid var(--charcoal);padding:26px 22px;position:relative}
.why-card .num{position:absolute;top:-14px;left:20px;background:var(--terracotta);color:#fff;
  font-weight:700;font-size:12px;padding:4px 10px;transform:rotate(-3deg)}
.why-card h3{margin:10px 0 8px;font-size:16.5px;font-weight:700}
.why-card p{margin:0;font-size:13.5px;color:var(--ink)}

/* 4) ポラロイド風ギャラリー（他デモの丸型・角丸グリッドと差別化） */
.polaroid-strip{background:var(--cream)}
.polaroid-grid{display:flex;flex-wrap:wrap;gap:26px 20px;justify-content:center;padding-top:20px}
.polaroid{background:#fff;padding:12px 12px 34px;box-shadow:var(--shadow);width:190px;
  transform:rotate(var(--r,0deg))}
.polaroid:nth-child(odd){--r:-4deg}
.polaroid:nth-child(even){--r:3deg}
.polaroid:nth-child(3n){--r:-2deg}
.polaroid .ph{aspect-ratio:1/1;background:linear-gradient(155deg,#caa06a,#8f3d21) center/cover no-repeat}
.polaroid:nth-child(2n) .ph{background:linear-gradient(155deg,#e3c07f,#b5502e) center/cover no-repeat}
.polaroid:nth-child(3n) .ph{background:linear-gradient(155deg,#5c4a37,#2b2620) center/cover no-repeat}
.polaroid .cap{font-family:var(--serif);font-style:italic;font-size:12px;text-align:center;margin-top:10px;color:var(--ink)}

/* お客様の声：付箋メモ風 */
.voices{background:var(--paper);border-top:3px solid var(--charcoal);border-bottom:3px solid var(--charcoal)}
.voice-grid{display:grid;gap:18px;margin-top:30px}
@media(min-width:760px){.voice-grid{grid-template-columns:repeat(3,1fr)}}
.voice-note{background:#fdf1c8;padding:22px 20px;box-shadow:var(--shadow);transform:rotate(-1.4deg)}
.voice-note:nth-child(2n){transform:rotate(1.4deg);background:#f3e2c9}
.voice-note p{margin:0 0 12px;font-size:13.5px;font-family:var(--serif);font-style:italic;line-height:1.8}
.voice-note .who{font-size:11.5px;color:var(--gray);font-weight:700}

/* メニューページ：カテゴリ別チョークボード */
.menu-page-board{background:var(--charcoal);color:var(--paper);padding:64px 0}
.board-cat{font-family:var(--serif);font-style:italic;color:var(--mustard);font-size:20px;margin:44px 0 6px}
.board-cat:first-child{margin-top:0}

/* アクセスページ */
.access-grid{display:grid;gap:28px}
@media(min-width:900px){.access-grid{grid-template-columns:1fr 1fr}}
.info-block .row{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:14px}
.info-block .row b{min-width:80px;color:var(--terracotta-d)}
.map-box{border:2px solid var(--charcoal);overflow:hidden}
.map-box iframe{width:100%;height:260px;border:0;display:block}
.access-photo{aspect-ratio:4/3;background:linear-gradient(155deg,#caa06a,#b5502e) center/cover no-repeat;border-radius:6px}

/* Aboutページ */
.about-split{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.about-split{grid-template-columns:1fr 1fr}}
.about-photo{aspect-ratio:4/5;background:linear-gradient(155deg,#5c4a37,#2b2620) center/cover no-repeat;border-radius:6px}
.about-copy p{font-size:14.5px}

/* フッター */
footer.site{background:var(--charcoal);color:#cfc4ab;padding:44px 0;font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:center}
footer a{color:#e2d5bf;text-decoration:none}
footer .fnav{display:flex;gap:16px;flex-wrap:wrap}
.sample-note{background:#fdf1c8;border:2px dashed var(--terracotta);color:#5a3a1f;font-size:12.5px;
  padding:10px 14px;margin:0 auto;max-width:var(--maxw);text-align:center}
.sample-note-wrap{padding:16px 28px}

/* 縦回転タブ（固定CTAの代わり・右端に貼りつくInstagramタブ＝他3デモと機構が異なる） */
.side-tab{position:fixed;right:0;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  z-index:50;background:var(--terracotta);color:#fff;text-decoration:none;font-weight:700;font-size:12.5px;
  letter-spacing:.1em;padding:16px 8px;border-radius:6px 0 0 6px;box-shadow:var(--shadow)}
.side-tab:hover{background:var(--terracotta-d)}

a:focus-visible,button:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}