/* Sessyu Renewal (LP) - PROMOTE
   - Static HTML / minimal CSS
   - A11y + CWV minded (no heavy JS, no web fonts)
*/

:root{
  --bg:#faf7f2;          /* 背景（指定色） */
  --panel:#ffffff;       /* 面 */
  --ink:#121212;
  --muted:#5b5b5b;
  --line:#e7e1dc;

  /* “あずき色”を主役ではなく「構造の芯」に使う */
  --azuki:#6b2a1a;        /* sampled & tuned from old site */
  --azuki2:#8a3b2a;
  --azuki-soft: rgba(107,42,26,.10);
  --azuki-faint: rgba(107,42,26,.05);

  --radius:18px;
  --shadow: 0 14px 34px rgba(0,0,0,.06);
  --max: 1160px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  color:var(--ink);
  background:
    /* 上部は白→紙へ。全体は極薄の“紙の繊維”で寂しさを消す（装飾にしない） */
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0) 260px),
    linear-gradient(180deg, var(--azuki-faint), rgba(0,0,0,0) 260px),
    radial-gradient(1200px 400px at 10% 0%, rgba(107,42,26,.06), rgba(0,0,0,0) 55%),
    repeating-linear-gradient(135deg, rgba(107,42,26,.018) 0 1px, rgba(0,0,0,0) 1px 20px),
    var(--bg);
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  line-height:1.85;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration-thickness:.08em; text-underline-offset:.18em; }
a:focus-visible{ outline:3px solid var(--azuki); outline-offset:3px; border-radius:12px; }

.wrap{ width:min(var(--max), calc(100% - 44px)); margin-inline:auto; }

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  padding:10px 14px;
  background:var(--azuki);
  color:#fff;
  border-radius:12px;
  z-index:9999;
}
.skip:focus{ left:16px; top:16px; }

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--bg);
  backdrop-filter:saturate(170%) blur(10px);
  border-bottom:1px solid rgba(107,42,26,.22);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
  position: relative;
}

.brand{
  padding:6px 10px;
  border-radius:14px;
  background:var(--bg); /* ヘッダー背景と完全一致：枠が見えない */
}

.brand-logo{
  width:280px; /* ロゴを少し大きく */
  height:auto;
  background:transparent;
  border:0;
  outline:0;
  display:block;
}


.site-nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.site-nav a{
  font-size:14px;
  color:var(--muted);
  text-decoration:none;
  padding:8px 10px;
  border-radius:14px;
}
.site-nav a:hover{
  background:var(--azuki-faint);
  color:var(--azuki);
}

/*
  Mobile nav
  - Desktop: show normal nav, hide hamburger
  - Mobile: hide nav by default, show hamburger, expand dropdown when .is-open
*/

.nav-toggle{
  display:none;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(79, 44, 45, 0.18);
  background:rgba(250, 247, 242, 0.75);
  border-radius:14px;
  width:44px;
  height:44px;
  padding:0;
  align-items:center;
  justify-content:center;
	  /* Stack hamburger bars vertically (fix: previously they lined up horizontally and
	     looked like a single line). */
	  flex-direction:column;
	  /* 3本線の間隔を詰めて、一般的なハンバーガーに */
  gap:4px;
  cursor:pointer;
}

.nav-toggle:focus-visible{
  outline:2px solid rgba(125, 43, 43, 0.35);
  outline-offset:2px;
}

.nav-icon{
  position:relative;
  width:20px;
  height:2px;
  background:var(--azuki);
  border-radius:2px;
}

.nav-icon::before,
.nav-icon::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:var(--azuki);
  border-radius:2px;
}

/* hamburger icon (for current HTML: 3 spans) */
.nav-toggle-bar{
  display:block;
  width:20px;
  height:2px;
  background:var(--azuki);
  border-radius:2px;
}
.nav-toggle-bar + .nav-toggle-bar{
  
  /* gapで管理するので余計なマージンは持たせない */
  margin-top:0;
}

.nav-icon::before{ top:-6px; }
.nav-icon::after{ top:6px; }

@media (max-width: 820px){
  .header-inner{ position:relative; }

  .nav-toggle{
    display:inline-flex;
    flex:0 0 auto;
  }

  /* collapse the links into a dropdown */
  .site-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin-top:10px;
    padding:10px 10px 12px;
    background:rgba(250, 247, 242, 0.96);
    backdrop-filter: blur(10px);
    border:1px solid rgba(79, 44, 45, 0.12);
    border-radius:18px;
    flex-direction:column;
    gap:6px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    z-index:20;
  }

  .site-nav.is-open{ display:flex; }

  .site-nav a{
    width:100%;
    justify-content:space-between;
    padding:12px 14px;
    font-size:15px;
  }

  /* keep header tidy on small screens */
  .header-inner{
    align-items:center;
    gap:10px;
  }

  .logo img{
    max-width:220px;
    height:auto;
  }
}

@media (min-width: 821px){
  .nav-toggle{ display:none; }
  .site-nav{ display:flex; }
}

.section{ padding:48px 0; }
.section-hero{ padding-top:28px; }
.section-intro{ padding-top:22px; }

.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.section-head.azuki{
  border-bottom:1px solid rgba(107,42,26,.35);
}
.section-head h2{
  margin:0;
  font-size:22px;
  letter-spacing:.02em;
}
.section-head .sub{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}

/* HERO: 1枚を“切り替える”（スクロールで複数並ばない） */
.hero-stage{
  position:relative;
  aspect-ratio: 2 / 1;
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--panel);
  border:1px solid rgba(107,42,26,.12);
}
.hero-stage .hero-main{
  position:absolute;
  inset:0;
  margin:0;
  display:none;
}
.hero-stage .hero-main:first-child{ display:block; }
.hero-stage .hero-main:target{ display:block; }

.hero-stage img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-main{ scroll-margin-top: 90px; }

.hero-main:target{ display:block; }
.hero-main:first-of-type{ display:block; }

.hero-thumbs{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  align-items:start;
  justify-content:start;
}
.thumb{
  aspect-ratio: 2 / 1;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(107,42,26,.14);
  background:var(--panel);
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}
.thumb:hover{ transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce){
  .thumb:hover{ transform:none; }
}

.hero-note{
  grid-column: 1 / -1;
  padding-top:4px;
}
.meta{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.intro-inner{
  display:grid;
  gap:18px;
}
.sign{ margin:0; }
.copy{
  border-left:3px solid rgba(107,42,26,.28);
  padding-left:14px;
}
.lead{ margin:0; font-size:16px; }

.timeline{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
  border-top:1px solid rgba(107,42,26,.20);
  padding-top:14px;
}
.timeline li{
  display:flex;
  align-items:baseline;
  gap:12px;
}
.timeline .t{
  width:92px;
  font-size:13px;
  color:var(--muted);
}
.timeline .d{
  font-size:14px;
}

/* 代表銘菓 */
.meika-list{
  display:grid;
  gap:16px;
}
.meika-item{
  border:1px solid rgba(107,42,26,.18);
  border-radius:calc(var(--radius) + 2px);
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.meika-face{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:14px;
  padding:18px;
  align-items:center;
}
.meika-item.reverse .meika-face{
  grid-template-columns: 1.1fr 1fr;
}
.meika-item.reverse .meika-title{ order:2; }
.meika-item.reverse .meika-photo{ order:1; }

@media (max-width: 980px){
  .meika-face{ grid-template-columns: 1fr !important; }
  .meika-item.reverse .meika-title,
  .meika-item.reverse .meika-photo{ order:unset; }
}

.meika-title{
  padding:4px 4px 4px 8px;
  border-left:3px solid rgba(107,42,26,.26);
}
.meika-logo{
  width:min(360px, 100%);
  height:auto;
  margin-bottom:10px;
  filter: saturate(0.96);
}
.meika-kicker{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.meika-photo{
  margin:0;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(107,42,26,.12);
  background:var(--bg);
}
.meika-photo img{
  width:100%;
  height:auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* 物語（details） */
.meika-details{
  border-top:1px dashed rgba(107,42,26,.22);
  background:linear-gradient(180deg, rgba(107,42,26,.04), rgba(0,0,0,0) 120px);
}
.meika-details summary{
  cursor:pointer;
  padding:14px 18px;
  font-size:14px;
  color:var(--azuki);
  list-style:none;
}
.meika-details summary::-webkit-details-marker{ display:none; }
.meika-details summary::after{
  content:"＋";
  float:right;
  color:var(--azuki);
}
.meika-details[open] summary::after{ content:"－"; }

.meika-body{
  padding:0 18px 18px;
  color:var(--ink);
}
.meika-body p{
  margin:0;
  font-size:15px;
}

/* 共通 */
.prose{
  border:1px solid rgba(107,42,26,.16);
  border-radius:var(--radius);
  padding:18px 18px 8px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.statement-title{
  margin:0 0 12px;
  font-weight:700;
  font-size:18px;
}
.sig{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin:0 0 12px;
  color:var(--muted);
}
.sig strong{ color:var(--ink); }

.two-col{
  display:grid;
  /* Text : Image（少しだけ画像を大きめにして“厚み”を出す） */
  grid-template-columns: 1.05fr .95fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .two-col{ grid-template-columns: 1fr; }
}
.media{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(107,42,26,.14);
  box-shadow:var(--shadow);
  background:var(--panel);
}

.shop-grid{
  display:grid;
  grid-template-columns: 1fr .9fr;
  gap:14px;
}
@media (max-width: 980px){
  .shop-grid{ grid-template-columns: 1fr; }
}
.shop-card{
  border:1px solid rgba(107,42,26,.16);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  background:var(--panel);
}
.shop-name{
  margin:0 0 10px;
  font-size:18px;
  font-weight:700;
}
.dl{
  margin:0;
  display:grid;
  gap:10px;
}
.dl > div{
  display:grid;
  grid-template-columns: 96px 1fr;
  gap:12px;
  align-items:baseline;
  padding-top:8px;
  border-top:1px dashed rgba(107,42,26,.18);
}
.dl dt{ color:var(--muted); font-size:13px; }
.dl dd{ margin:0; }

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--azuki);
  background:var(--azuki);
  color:#fff;
  text-decoration:none;
  font-size:14px;
}
.btn.ghost{
  background:transparent;
  color:var(--azuki);
}
.btn:hover{ opacity:.92; }

.shop-note{
  border:1px solid rgba(107,42,26,.14);
  border-radius:var(--radius);
  padding:18px;
  background:rgba(107,42,26,.05);
}

.section-end{
  padding:22px 0 60px;
  display:flex;
  justify-content:flex-end;
}
.to-top{
  color:var(--muted);
  font-size:14px;
}

.site-footer{
  border-top:1px solid rgba(107,42,26,.20);
  padding:18px 0 28px;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
}
.footer-inner a{ color:inherit; }

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


@media (max-width: 520px){
  .brand{ padding:6px 8px; }
  .brand-logo{ width:250px; }
}

/* アクセス（shop.htmlの内容を統合） */
.access-grid{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .access-grid{ grid-template-columns: 1fr; }
}
.access-prose .access-title{
  margin:0 0 10px;
  font-size:16px;
  color:var(--azuki);
  letter-spacing:.02em;
}
.access-prose p{ margin:0 0 12px; }
.access-media{
  display:grid;
  gap:14px;
}
.media-link{ display:block; }
.shop-card.compact{ margin-top:14px; }


/* 厚み1箇所：見出しの“掛け軸の縁”のような二重の線＋小さな印（装飾ではなく構造） */
.section-head.azuki{
  position:relative;
  border-bottom:0;
  padding-bottom:16px;
}
.section-head.azuki::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:6px;
  height:2px;
  background:linear-gradient(90deg, var(--azuki), rgba(107,42,26,0));
}
.section-head.azuki::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(107,42,26,.18);
}
.section-head.azuki h2{
  display:flex;
  align-items:center;
  gap:10px;
}
.section-head.azuki h2::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--azuki);
  box-shadow:0 0 0 7px var(--azuki-soft);
}

/* イントロの店情報（響く短文） */
.about{
  margin:14px 0 0;
  color:var(--ink);
  font-size:15px;
}

.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* こだわり：絵を“余白の設計”として扱う（右寄せトリミング） */
#kodawari .media{
  /* 文章量が多いので、右のビジュアルを少し大きく見せてバランスを取る */
  aspect-ratio: 1 / 1;
  position: relative;
}
#kodawari .media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 少しだけ持ち上げて、重さを抜く */
  filter: brightness(1.10) contrast(0.98) saturate(0.92);
}
#kodawari .media img.crop-right{
  object-position: right center;
}

/* 右側の余白になじませる、薄い和紙トーン（1箇所だけの“厚み”） */
#kodawari .media::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(250, 247, 242, 0.20) 0%,
    rgba(250, 247, 242, 0.10) 40%,
    rgba(250, 247, 242, 0.00) 100%
  );
}


/* News */
/* 他セクションのカード感（白・やわらかい影）に寄せる */
.news .news-box{
  border: 1px solid rgba(140, 80, 70, 0.18);
  border-radius: var(--radius);
  /* 下側を少し厚めにして、複数件のときに末尾が詰まって見えないように */
  padding: 18px 18px 26px;
  background: rgba(255, 255, 255, 0.70);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.04);
}
.news-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.news-status{
  padding: 10px 12px;
  color: var(--muted);
  font-size: 14px;
}
.news-item{ display:grid; grid-template-columns: 110px 1fr; gap:12px 14px; align-items:start; padding: 16px 0; }
.news-item:first-child{ padding-top: 0; }
.news-item:last-child{ padding-bottom: 12px; }
.news-item + .news-item{ border-top: 1px solid rgba(140, 80, 70, 0.12); }
.news-date{ font-variant-numeric: tabular-nums; color: var(--muted); letter-spacing:.02em; }
.news-main{ display:grid; gap:6px; }
.news-title{ font-weight: 600; }
.news-body{ color: var(--text); opacity:.92; line-height:1.7; }
.news-link{ display:inline-block; margin-top:2px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.news-note{ margin:10px 0 0; color: var(--muted); font-size:.9rem; }
@media (max-width: 640px){
  .news-item{ grid-template-columns: 1fr; gap:6px; }
  .news-date{ font-size:.9rem; }
}