
:root{
  --bg:#fffdf9; --panel:#f6f2ea; --line:#e7e0d3;
  --ink:#33302b; --ink-soft:#7a746a; --head:#2a2620;
  --gold:#9c7c46; --gold-deep:#7c6035;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--ink); background:var(--bg);
  font-family:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  font-size:17px; line-height:2.0; letter-spacing:.02em;}
a{color:var(--gold-deep)}

nav.site{position:sticky; top:0; z-index:20; display:flex; align-items:center;
  gap:14px; padding:13px 22px; background:rgba(255,253,249,.95);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
nav.site .brand{font-family:"Shippori Mincho",serif; color:var(--head); font-size:18px;
  letter-spacing:.1em; margin-right:auto; text-decoration:none; font-weight:600}
nav.site a.book{color:#fff; background:var(--gold); padding:8px 18px; border-radius:30px;
  text-decoration:none; font-size:13.5px; letter-spacing:.04em}
nav.site a.book:hover{background:var(--gold-deep); color:#fff}
.nav-toggle{display:none}
.nav-burger{display:inline-flex; flex-direction:column; justify-content:center; gap:6px;
  width:30px; height:24px; cursor:pointer}
.nav-burger span{display:block; width:24px; height:2px; border-radius:2px; background:var(--head); transition:.25s}
.nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
.nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-links{position:absolute; top:100%; left:0; right:0; background:rgba(255,253,249,.99);
  border-bottom:1px solid var(--line); box-shadow:0 10px 24px rgba(0,0,0,.06);
  display:flex; flex-direction:column; max-height:0; overflow:hidden; transition:max-height .35s ease}
.nav-toggle:checked ~ .nav-links{max-height:80vh; overflow-y:auto}
nav.site .nav-links a{padding:13px 26px; border-top:1px solid var(--line);
  color:var(--ink); text-decoration:none; font-size:15px; letter-spacing:.03em}
nav.site .nav-links a:hover{background:var(--panel); color:var(--gold-deep)}
nav.site .nav-links .nav-group{padding:15px 26px 5px; border-top:1px solid var(--line);
  font-family:"Shippori Mincho",serif; color:var(--gold-deep); font-size:12.5px; letter-spacing:.1em}
nav.site .nav-links a.sub{padding-left:42px; font-size:13.5px; color:var(--ink-soft); border-top:1px dashed var(--line)}

main{max-width:740px; margin:0 auto; padding:50px 24px 20px}
.article main{max-width:720px}

h1,h2,h3{font-family:"Shippori Mincho",serif; color:var(--head); font-weight:600; line-height:1.55}
h1{font-size:28px; margin:.2em 0 .9em; text-align:center; letter-spacing:.04em}
h2{font-size:22px; margin:2.4em 0 .9em; padding-bottom:.35em; border-bottom:1px solid var(--line)}
h3{font-size:18px; margin:1.8em 0 .6em; color:var(--gold-deep)}
p{margin:1.05em 0}
strong{color:var(--head); font-weight:700}
hr{border:none; height:1px; margin:2.6em 0; background:var(--line)}

blockquote{margin:1.6em 0; padding:18px 22px; background:var(--panel);
  border-left:3px solid var(--gold); border-radius:6px;
  font-family:"Shippori Mincho",serif; color:#4a4339; line-height:1.95}
ul,ol{margin:1.05em 0; padding-left:1.4em}
li{margin:.45em 0}
ul li::marker,ol li::marker{color:var(--gold)}

.hero{text-align:center; padding:46px 16px 30px; margin-bottom:14px; border-bottom:1px solid var(--line)}
.hero h3{font-size:34px; color:var(--head); margin:.1em 0 .4em; letter-spacing:.04em}
.hero p{color:var(--ink-soft)}
.hero p:first-of-type{color:var(--gold-deep); font-family:"Shippori Mincho",serif; font-size:18px; letter-spacing:.06em}

.cta-wrap{text-align:center; margin:2em 0}
a.cta{display:inline-block; padding:15px 42px; border-radius:34px; text-decoration:none;
  font-family:"Shippori Mincho",serif; letter-spacing:.1em; color:#fff; font-weight:600;
  background:var(--gold); box-shadow:0 6px 18px rgba(156,124,70,.25); transition:.25s}
a.cta:hover{background:var(--gold-deep); transform:translateY(-2px)}
a.cta-soft{display:inline-block; padding:12px 26px; border-radius:34px; text-decoration:none;
  color:var(--gold-deep); border:1px solid var(--gold); background:#fff; transition:.25s}
a.cta-soft:hover{background:var(--panel)}

table.pricing{width:100%; border-collapse:collapse; margin:1.4em 0; border:1px solid var(--line)}
table.pricing th,table.pricing td{padding:13px 16px; border-bottom:1px solid var(--line); text-align:left}
table.pricing th{font-family:"Shippori Mincho",serif; color:var(--gold-deep); background:var(--panel)}
table.pricing tr:last-child td{border-bottom:none}

.author{margin:2.4em 0 0; padding:18px 20px; background:var(--panel);
  border:1px solid var(--line); border-radius:8px; font-size:14.5px; line-height:1.85; color:var(--ink-soft)}
.author strong{color:var(--head)}

footer.site{max-width:740px; margin:46px auto 0; padding:28px 24px 56px;
  border-top:1px solid var(--line); color:var(--ink-soft); font-size:13px; text-align:center}
footer.site a{color:var(--ink-soft); text-decoration:none; margin:0 6px}
footer.site a:hover{color:var(--gold-deep)}
footer.site .legal{margin-top:10px; font-size:12.5px}
.disclaim{font-size:12px; color:#a59e90; margin-top:14px; line-height:1.7}

@media(max-width:560px){
  nav.site{gap:6px 13px; padding:11px 16px}
  nav.site a{font-size:12.5px}
  .hero h3{font-size:27px}
}


/* shared refinements */
body {
  background:
    radial-gradient(circle at 50% -120px, rgba(156,124,70,.08), transparent 360px),
    var(--bg);
}
nav.site {
  padding: 15px clamp(18px, 4vw, 44px);
}
nav.site .brand {
  font-size: 19px;
}
.nav-links {
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
nav.site .nav-links a {
  white-space: nowrap;
}
main {
  max-width: 860px;
  padding-top: clamp(42px, 6vw, 76px);
}
.article main {
  max-width: 760px;
}
.hero {
  display: grid;
  gap: 26px;
  border-bottom: 0;
  padding-top: clamp(34px, 6vw, 72px);
}
.hero-copy {
  max-width: 720px;
  margin: 0 auto;
}
.hero h1 {
  font-size: clamp(30px, 5vw, 46px);
}
.visual-placeholder {
  display: grid;
  place-items: center;
  min-height: 220px;
  margin: 2em auto;
  padding: 24px;
  color: var(--ink-soft);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 48%, rgba(156,124,70,.17), transparent 25%),
    linear-gradient(135deg, rgba(246,242,234,.88), rgba(255,253,249,.75));
}
.visual-hero {
  min-height: 300px;
  max-width: 760px;
  background:
    radial-gradient(circle at 50% 50%, rgba(156,124,70,.22), transparent 18%),
    linear-gradient(108deg, transparent 0 39%, rgba(156,124,70,.13) 40%, transparent 41% 58%, rgba(124,96,53,.12) 59%, transparent 60%),
    linear-gradient(135deg, #fffdf9, #f6f2ea);
}
.visual-trinity {
  background:
    radial-gradient(circle at 43% 40%, rgba(156,124,70,.18), transparent 18%),
    radial-gradient(circle at 57% 40%, rgba(124,96,53,.14), transparent 18%),
    radial-gradient(circle at 50% 58%, rgba(231,224,211,.95), transparent 22%),
    #fffdf9;
}
.visual-small {
  min-height: 132px;
  margin: 0 0 14px;
}
.page-lead {
  color: var(--ink-soft);
  text-align: center;
}
.section-band {
  margin: 3em calc(50% - 50vw);
  padding: clamp(42px, 6vw, 76px) max(24px, calc((100vw - 860px) / 2));
  border-top: 1px solid rgba(231,224,211,.72);
  border-bottom: 1px solid rgba(231,224,211,.72);
}
.columns-grid,
.reserve-grid,
.menu-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.column-card,
.reserve-card,
.quiet-cta {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.64);
  box-shadow: 0 12px 28px rgba(42,38,32,.035);
}
.column-card h3,
.reserve-card h2 {
  margin-top: .4em;
}
.category-label,
.article-category {
  display: inline-flex;
  width: fit-content;
  padding: 2px 12px;
  border: 1px solid rgba(156,124,70,.35);
  border-radius: 999px;
  color: var(--gold-deep);
  font-size: 13px;
  line-height: 1.7;
}
.article-category {
  margin: 0 auto 1.2em;
}
.article-title-wrap {
  text-align: center;
}
.quiet-cta {
  margin: 2.6em 0 1.4em;
  background: var(--panel);
}
.quiet-cta .cta-wrap {
  margin-bottom: 0;
}
a.cta,
a.cta-soft {
  border-radius: 8px;
  box-shadow: none;
}
nav.site a.book {
  color: #fff;
}
@media (min-width: 821px) {
  .nav-burger,
  .nav-toggle {
    display: none;
  }
  .nav-links {
    position: static;
    display: flex;
    flex-direction: row;
    max-height: none;
    overflow: visible;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  nav.site .nav-links a {
    padding: 0;
    border: 0;
    font-size: 14px;
    color: var(--ink-soft);
  }
  nav.site .nav-links a:hover {
    background: transparent;
  }
}
@media (max-width: 820px) {
  nav.site {
    align-items: center;
  }
  .nav-links {
    align-items: stretch;
    gap: 0;
  }
}
@media (max-width: 560px) {
  body {
    font-size: 16px;
    line-height: 1.95;
  }
  main,
  .article main {
    padding-left: 20px;
    padding-right: 20px;
  }
  .columns-grid,
  .reserve-grid,
  .menu-card-grid {
    grid-template-columns: 1fr;
  }
  .visual-hero {
    min-height: 210px;
  }
  a.cta,
  a.cta-soft {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* === WT v16: inline-safe top hero + unified illustrations ===
   重要な表示制御はindex.html内の<style>と各要素のinline styleにも入れています。
   style.cssが古い/キャッシュされても、トップ画像と本文挿絵が崩れにくい構成です。
*/
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
.site-illustration-v16 {
  box-sizing: border-box;
}
.site-illustration-v16 img,
.site-illustration-v16 picture {
  max-width: 100%;
}

/* wt v17: fixed global header only
   画像・本文・CTA文言・見出し構造には触れず、
   PC/スマホ共通で上部ナビを常時固定するための上書き。 */
:root{--wt-fixed-header-height:64px;}
html{scroll-padding-top:calc(var(--wt-fixed-header-height) + 16px);}
body{padding-top:var(--wt-fixed-header-height);}
nav.site{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  min-height:var(--wt-fixed-header-height);
  z-index:9999;
  background:rgba(255,253,249,.96);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
@media (max-width:820px){
  :root{--wt-fixed-header-height:58px;}
  .nav-toggle:checked ~ .nav-links{
    max-height:calc(100dvh - var(--wt-fixed-header-height));
    overflow-y:auto;
  }
}

/* Top hero background safeguard: image dimensions must not affect layout. */
.hero--v16-inline-safe > picture[aria-hidden="true"]{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.hero--v16-inline-safe > picture[aria-hidden="true"] > img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center center!important;
}
@media (max-width:768px){
  .hero--v16-inline-safe > picture[aria-hidden="true"] > img{
    object-position:center top!important;
  }
}


/* WT SEO category hubs (2026-06): category structure and internal-link presentation */
a.column-card.category-card{
  display:block;
  color:var(--ink);
  text-decoration:none;
}
a.column-card.category-card:hover{
  border-color:rgba(156,124,70,.62);
}
a.column-card.category-card:hover h2,
a.column-card.category-card:hover h3,
a.column-card.category-card:hover .category-card-link{
  color:var(--gold-deep);
}
.category-card-link,
.category-read-link{
  display:inline-block;
  margin-top:.35em;
  color:var(--gold-deep);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
}
.category-intro{
  max-width:720px;
  margin:0 auto 3em;
  text-align:center;
}
.category-intro h1{
  margin-top:.65em;
}
.category-articles{
  max-width:760px;
  margin:0 auto;
}
.category-article-list{
  border-top:1px solid var(--line);
}
.category-article-item{
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.category-article-item h3{
  margin:.1em 0 .45em;
  font-size:20px;
}
.category-article-item h3 a{
  color:var(--head);
  text-decoration:none;
}
.category-article-item h3 a:hover{
  color:var(--gold-deep);
}
.category-article-item p{
  margin:.4em 0 .35em;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.8;
}
.topic-navigation{
  max-width:760px;
  margin:3.2em auto 0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
}
.topic-navigation h2{
  margin:.1em 0 .65em;
  font-size:20px;
}
.topic-navigation p{
  color:var(--ink-soft);
  font-size:15px;
}
.topic-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:1em;
}
.topic-chip{
  display:inline-block;
  padding:7px 11px;
  border:1px solid rgba(156,124,70,.35);
  border-radius:999px;
  color:var(--gold-deep);
  background:rgba(255,255,255,.55);
  font-size:13px;
  line-height:1.55;
  text-decoration:none;
}
.topic-chip:hover{
  border-color:var(--gold-deep);
}
.columns-page .lead-center{
  text-align:center;
  color:var(--ink-soft);
  margin-bottom:.6em;
}
.columns-page .page-lead{
  max-width:700px;
  margin:0 auto 2.6em;
}
@media(min-width:821px){
  nav.site .nav-links .nav-group,
  nav.site .nav-links a.sub{display:none;}
}
@media(max-width:560px){
  .category-article-item h3{font-size:18px;}
  .topic-navigation{padding:18px;}
}


/* WT columns archive safeguard (2026-06): retain all article links on desktop and mobile. */
.columns-archive{max-width:860px;}
.columns-archive .column-topic{
  margin:2.8em 0 0;
  padding:2.6em 0 0;
  border-top:1px solid var(--line);
}
.columns-archive .column-topic:first-of-type{margin-top:2.2em;}
.columns-archive .column-topic h2{margin:0 0 .5em;}
.columns-archive .column-topic h2 a{
  color:var(--head);
  text-decoration:none;
}
.columns-archive .column-topic h2 a:hover{color:var(--gold-deep);}
.columns-archive .column-topic-description{
  margin:.4em 0 1.15em;
  color:var(--ink-soft);
}
.columns-archive .article-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
}
.columns-archive .article-list li{
  margin:0;
  border-bottom:1px solid var(--line);
}
.columns-archive .article-list a{
  display:block;
  padding:13px 4px;
  color:var(--ink);
  line-height:1.75;
  text-decoration:none;
}
.columns-archive .article-list a:hover{color:var(--gold-deep);}
.columns-archive .column-topic-more{margin:.9em 0 0; text-align:right;}
.columns-archive .column-topic-more a{font-size:14px; font-weight:700; text-decoration:none;}
.category-card{min-width:0;}
.category-card h3,.category-card p,.visual-placeholder span{overflow-wrap:anywhere;}
@media(max-width:560px){
  .columns-archive .column-topic{margin-top:2.2em; padding-top:2em;}
  .columns-archive .article-list a{padding:12px 2px;}
  .columns-archive .column-topic-more{text-align:left;}
}

/* WT fix 2026-06-25: top column category cards should not duplicate the category name. */
.home-category-grid{
  align-items:stretch;
}
.home-category-grid .category-card{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.home-category-grid .visual-placeholder{
  display:none!important;
}
.home-category-grid .category-card h3{
  margin:0 0 .55em;
  font-size:18px;
  line-height:1.55;
}
.home-category-grid .category-card p{
  margin:.2em 0 0;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.85;
}
@media(min-width:821px){
  .home-category-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:560px){
  .home-category-grid .category-card{
    padding:18px;
  }
}


/* WT 2026-07-12: robust header layout repair */
nav.site,
nav.site *{
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
}
nav.site{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  min-height:var(--wt-fixed-header-height,64px)!important;
  height:auto!important;
  z-index:9999!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:14px!important;
  padding:15px clamp(18px,4vw,44px)!important;
  background:rgba(255,253,249,.96)!important;
  border-bottom:1px solid var(--line)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  backdrop-filter:blur(8px)!important;
}
nav.site a{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  line-height:1.5!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}
nav.site .brand{
  margin-right:auto!important;
  color:var(--head)!important;
  font-family:"Shippori Mincho",serif!important;
  font-size:19px!important;
  font-weight:600!important;
  letter-spacing:.1em!important;
}
nav.site a.book{
  flex:0 0 auto!important;
  padding:8px 18px!important;
  border-radius:30px!important;
  color:#fff!important;
  background:var(--gold)!important;
  font-size:13.5px!important;
  letter-spacing:.04em!important;
}
nav.site .nav-toggle{
  display:none!important;
}
@media (min-width:821px){
  nav.site .nav-burger{
    display:none!important;
  }
  nav.site .nav-links{
    position:static!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:20px!important;
    width:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  nav.site .nav-links a{
    display:inline-flex!important;
    padding:0!important;
    border:0!important;
    color:var(--ink-soft)!important;
    font-size:14px!important;
  }
  nav.site .nav-links .nav-group,
  nav.site .nav-links a.sub{
    display:none!important;
  }
}
@media (max-width:820px){
  nav.site{
    min-height:var(--wt-fixed-header-height,58px)!important;
    padding:11px 16px!important;
  }
  nav.site .brand{
    font-size:17px!important;
  }
  nav.site .nav-burger{
    display:inline-flex!important;
    flex:0 0 auto!important;
  }
  nav.site .nav-links{
    position:absolute!important;
    top:100%!important;
    left:0!important;
    right:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    max-height:0!important;
    overflow:hidden!important;
    background:rgba(255,253,249,.99)!important;
    border-bottom:1px solid var(--line)!important;
    box-shadow:0 10px 24px rgba(0,0,0,.06)!important;
  }
  nav.site .nav-toggle:checked ~ .nav-links{
    max-height:calc(100dvh - var(--wt-fixed-header-height,58px))!important;
    overflow-y:auto!important;
  }
  nav.site .nav-links a{
    display:flex!important;
    padding:13px 26px!important;
    border-top:1px solid var(--line)!important;
    color:var(--ink)!important;
    font-size:15px!important;
  }
}
