/* 鮨処しし 共通スタイル（日本語・英語ページで共用） */
:root{
  --ink:#1c1a17;        /* 墨 */
  --ink-soft:#4a4540;
  --paper:#f6f2ea;      /* 生成り */
  --paper-2:#ece6da;
  --line:#d6cdbd;
  --accent:#8a3b2a;     /* 弁柄 */
  --on-dark:#efe9de;
  --on-dark-soft:#b9b0a2;
  --max:1080px;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Hiragino Sans","Noto Sans JP","Yu Gothic",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--gothic);font-size:16px;line-height:1.95;letter-spacing:.04em}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* ヘッダー */
.hd{position:sticky;top:0;z-index:20;background:rgba(28,26,23,.94);color:var(--on-dark);backdrop-filter:blur(6px)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{font-family:var(--mincho);font-size:20px;letter-spacing:.2em;text-decoration:none}
.logo small{font-size:12px;letter-spacing:.15em;margin-right:.4em;color:var(--on-dark-soft)}
.nav{display:flex;gap:22px;font-size:13px}
.nav a{text-decoration:none;color:var(--on-dark-soft)}
.nav a:hover{color:var(--on-dark)}
.btn{display:inline-block;font-family:var(--gothic);font-size:14px;letter-spacing:.12em;text-decoration:none;padding:12px 26px;border:1px solid currentColor;transition:background .2s,color .2s}
.btn-fill{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-fill:hover{background:#6f2e20}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.hd .btn{padding:7px 16px;font-size:13px}

/* 最初の画面 */
.hero{background:var(--ink);color:var(--on-dark)}
.hero .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:80px}
.hero-copy{display:flex;gap:36px;align-items:flex-start}
.hero h1{font-family:var(--mincho);font-weight:400;writing-mode:vertical-rl;font-size:clamp(28px,3.4vw,40px);letter-spacing:.28em;line-height:1.9;height:13.5em}
.hero-side{writing-mode:vertical-rl;font-family:var(--mincho);font-size:14px;color:var(--on-dark-soft);letter-spacing:.3em;line-height:2.2}
.hero-photo img{width:100%;max-width:640px;margin-left:auto}
.badge{margin-top:28px;font-size:13px;letter-spacing:.14em;color:var(--on-dark-soft);border-top:1px solid #3a3631;padding-top:18px}
.badge strong{color:var(--on-dark);font-weight:400}

/* 見出し */
section{padding:96px 0;scroll-margin-top:56px}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:44px}
.sec-head h2{font-family:var(--mincho);font-weight:400;font-size:clamp(24px,3vw,30px);letter-spacing:.24em}
.sec-head span{font-size:12px;letter-spacing:.3em;color:var(--ink-soft);text-transform:uppercase}
.lead{font-family:var(--mincho);font-size:clamp(19px,2.2vw,23px);line-height:1.9;letter-spacing:.12em;margin-bottom:22px}
.body p+p{margin-top:1em}
.body{color:var(--ink-soft)}

/* 写真と文章の2段組 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev .split-photo{order:2}
.split-photo img{width:100%;max-width:560px}
.split.rev .split-photo img{margin-left:auto}
.cap{font-size:12px;color:var(--ink-soft);margin-top:10px;letter-spacing:.1em}

/* 掲載情報 */
.media{background:var(--paper-2);padding:72px 0}
.media-list{list-style:none;border-top:1px solid var(--line)}
.media-list li{display:grid;grid-template-columns:11em 1fr;gap:8px 32px;padding:24px 0;border-bottom:1px solid var(--line)}
.media-list time{font-size:13px;letter-spacing:.12em;color:var(--ink-soft);padding-top:4px}
.media-name{font-family:var(--mincho);font-size:19px;letter-spacing:.12em}
.media-title{font-size:15px;color:var(--ink)}
.media-credit{font-size:12px;color:var(--ink-soft);margin-top:4px}
@media (max-width:860px){.media{padding:56px 0}.media-list li{grid-template-columns:1fr}}

/* おまかせ */
.dark{background:var(--ink);color:var(--on-dark)}
.dark .sec-head span,.dark .body,.dark .cap,.dark .route p,.dark .info th{color:var(--on-dark-soft)}
.dark .info th,.dark .info td{border-color:#3a3631}
.lead,.course-item h3,.sec-head h2,.hero h1{word-break:auto-phrase}
.course{border-top:1px solid #3a3631;margin-top:40px}
.course-item{display:grid;grid-template-columns:1fr auto;gap:8px 32px;padding:28px 0;border-bottom:1px solid #3a3631}
.course-item h3{font-family:var(--mincho);font-weight:400;font-size:20px;letter-spacing:.14em}
.course-item .price{font-family:var(--mincho);font-size:22px;letter-spacing:.06em;white-space:nowrap}
.course-item .price small{font-size:12px;margin-left:.3em;color:var(--on-dark-soft)}
.course-item p{grid-column:1/-1;font-size:14px;color:var(--on-dark-soft)}
.note{font-size:13px;color:var(--on-dark-soft);margin-top:18px}

/* 手仕事の写真 */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:48px}
.gallery figure{overflow:hidden;background:var(--paper-2)}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* ご予約 */
.reserve{background:var(--paper-2);text-align:center}
.reserve .lead{margin-bottom:10px}
.reserve-btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:34px 0 18px}
.reserve small{display:block;font-size:13px;color:var(--ink-soft)}

/* ご来店の前に */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 36px 20px 0;position:relative;font-family:var(--mincho);font-size:17px;letter-spacing:.1em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;font-family:var(--gothic);font-size:20px;color:var(--ink-soft)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 22px;color:var(--ink-soft);font-size:15px}

/* アクセス */
.info{width:100%;border-collapse:collapse;font-size:15px}
.info th,.info td{text-align:left;vertical-align:top;padding:14px 0;border-bottom:1px solid var(--line)}
.info th{width:7.5em;font-weight:400;color:var(--ink-soft);font-size:13px;letter-spacing:.14em;padding-top:16px}
.info tr:first-child th,.info tr:first-child td{border-top:1px solid var(--line)}
.map{margin-top:40px;aspect-ratio:16/7;width:100%;border:0;filter:grayscale(.35)}
.route{display:grid;grid-template-columns:240px 1fr;gap:24px;margin-top:28px;align-items:start}
.route p{font-size:14px;color:var(--ink-soft)}

/* フッター */
.ft{background:var(--ink);color:var(--on-dark-soft);font-size:13px;padding:56px 0 110px}
.ft .logo{color:var(--on-dark);display:inline-block;margin-bottom:14px}
.ft a{color:var(--on-dark-soft)}
.ft-links{display:flex;gap:20px;margin-top:18px;flex-wrap:wrap}

/* スマホ下部の予約バー */
.bar{display:none}

/* スマホのメニューボタン（三本線） */
.nav .nav-sp{display:none}
.menu-btn{display:none;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--on-dark);transition:transform .25s,opacity .2s}
.menu-btn span:nth-child(1){top:15px}
.menu-btn span:nth-child(2){top:21px}
.menu-btn span:nth-child(3){top:27px}
.hd.open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd.open .menu-btn span:nth-child(2){opacity:0}
.hd.open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:860px){
  .menu-btn{display:block}
  .hd{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--ink)}
  .nav{display:none;position:fixed;top:56px;left:0;right:0;bottom:0;flex-direction:column;gap:0;padding:12px 28px 96px;background:rgba(28,26,23,.98);overflow-y:auto}
  .hd.open .nav{display:flex}
  .nav a{font-family:var(--mincho);font-size:18px;letter-spacing:.2em;color:var(--on-dark);padding:18px 0;border-bottom:1px solid #3a3631}
  .nav .nav-sp{display:block;color:#e8b8a8}
  body.menu-open{overflow:hidden}
  section{padding:68px 0}
  .hero .wrap{grid-template-columns:1fr;gap:36px;padding-top:44px;padding-bottom:56px}
  .hero-copy{justify-content:center}
  .hero h1{height:auto;max-height:12em}
  .hero-photo{order:-1;margin:0 -20px}
  .hero-photo img{max-width:none}
  .badge{text-align:center}
  .badge .sep{display:none}
  .badge .nw{display:block}
  .split{grid-template-columns:1fr;gap:28px}
  .split.rev .split-photo{order:0}
  .split-photo img,.split.rev .split-photo img{max-width:none;margin:0}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .course-item{grid-template-columns:1fr}
  .lead{font-size:18px}
  .route{grid-template-columns:1fr}
  .map{aspect-ratio:4/3}
  .bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--ink);border-top:1px solid #3a3631}
  .bar a{display:flex;align-items:center;justify-content:center;height:56px;color:var(--on-dark);text-decoration:none;font-size:14px;letter-spacing:.14em}
  .bar a+a{background:var(--accent)}
  .hd .btn{display:none}
}

/* 右上：言語の切り替え・ご予約・メニューボタン */
.hd-right{display:flex;align-items:center;gap:18px}
.lang{display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.12em;color:var(--on-dark-soft)}
.lang a{text-decoration:none;color:var(--on-dark-soft);padding:6px 2px}
.lang a:hover{color:var(--on-dark)}
.lang [aria-current]{color:var(--on-dark);border-bottom:1px solid var(--on-dark);padding:2px 2px 1px}
.lang-sep{opacity:.5}
@media (max-width:860px){.hd-right{gap:10px}}

/* 英語ページ：最初の画面の見出しは横書き */
.hero-en h1{writing-mode:horizontal-tb;height:auto;font-size:clamp(28px,3.6vw,42px);letter-spacing:.02em;line-height:1.35}
.hero-en .hero-copy{flex-direction:column;gap:18px}
.hero-en .hero-side{writing-mode:horizontal-tb;letter-spacing:.14em;line-height:1.8}
html[lang="en"] body{letter-spacing:.01em;line-height:1.8}
html[lang="en"] .sec-head h2,html[lang="en"] .nav a{letter-spacing:.08em}
html[lang="en"] .lead{letter-spacing:.02em}
.jp-addr{font-size:13px;color:var(--on-dark-soft)}
@media (max-width:860px){.hero-en .hero-copy{text-align:left}}

/* 細かな調整 */
.badge .nw{white-space:nowrap}
@media (max-width:860px){.hero .wrap{padding-top:0}}