@charset "UTF-8";
:root{--paper:#f5efdf;--ink:#2a231b;--gold:#9b6d29;--red:#7c241e;--line:#d9cbb3;--serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;--sans:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.95;background-image:url('../images/paper.svg')}a{color:inherit;text-decoration:none}button{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}a,button,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #b47a29;outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:600}h2{font-size:clamp(27px,3.1vw,40px);line-height:1.7;letter-spacing:.12em}p+p{margin-top:24px}.wrap{width:min(1100px,calc(100% - 96px));margin-inline:auto}.section{padding-block:100px}.eyebrow{color:var(--gold);font-size:12px;letter-spacing:.16em;margin-bottom:22px;font-weight:600}.header{height:100px;padding:0 4.3%;display:flex;align-items:center;gap:32px;position:relative;z-index:20;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}.seal{border:2px solid currentColor;border-radius:50%;width:49px;height:49px;display:grid;place-items:center;font-family:var(--serif);font-size:31px;transform:rotate(-10deg);line-height:1;outline:1px solid currentColor;outline-offset:3px}.brand-name{font-family:var(--serif);font-size:31px;font-weight:700;letter-spacing:.1em;line-height:1.25}.brand-name small{display:block;font-size:11px;letter-spacing:.3em;margin-top:8px}.header-location{margin-left:auto;font-size:11px;letter-spacing:.15em}.menu-toggle{width:58px;background:none;border:0;cursor:pointer;padding:9px 0}.menu-lines{display:block;width:30px;height:16px;border-top:1px solid;border-bottom:1px solid;margin:0 auto 5px;position:relative}.menu-lines:after{content:"";position:absolute;top:6px;left:0;width:22px;border-top:1px solid}.menu-label{font-size:9px;letter-spacing:.12em}#navigation{position:absolute;right:4%;top:88px;background:var(--ink);color:var(--paper);padding:30px 38px;width:320px;box-shadow:0 12px 30px #241c1526}#navigation:not([hidden]){display:grid}#navigation a{padding:12px 0;border-bottom:1px solid #ffffff20}#navigation a:hover{color:#d5b373}.opening{display:flex;align-items:center;gap:22px;margin-top:30px}.opening>span{font-size:10px;letter-spacing:.13em;writing-mode:vertical-rl;border-right:1px solid var(--gold);padding-right:12px;color:var(--gold)}.opening p{font-family:var(--serif);font-size:24px;letter-spacing:.05em;line-height:1.5}.opening small{font-family:var(--sans);font-size:11px;margin-left:9px}.opening .opening-name{font-family:var(--sans);font-size:12px;margin-top:5px;letter-spacing:.15em}.hero-actions{display:flex;gap:12px;margin-top:28px}.button{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:15px 24px;font-family:var(--serif);font-size:17px;letter-spacing:.12em;border:1px solid transparent;transition:background .2s,transform .2s}.button:hover{transform:translateY(-2px)}.red{background:var(--red);color:#fff5e8}.red:hover{background:#651b17}.outline{border-color:#a9987e}.outline:hover{background:#e8ddc8}.hero-art:after,.taste-photo:after{content:"";position:absolute;inset:0;background:url('../images/paper.svg');opacity:.5;pointer-events:none}.photo-caption{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.12em;color:#c6b18f}.scroll-note span{margin-left:35px}.story{display:grid;grid-template-columns:1fr 1.25fr;gap:70px}.section-heading{position:relative}.chapter{display:block;font-family:var(--serif);font-size:100px;line-height:1;color:#d8c7aa;margin-top:40px}.story-body{line-height:2.3;padding-top:9px}.story-body strong{font-weight:500;color:#80501d}.taste{background:#eae0ce80;border-block:1px solid #d9cbb366}.taste-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:75px;align-items:center}.taste-photo{min-height:420px;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;background:#d9c7a6;color:#5f462b}.photo-corner{position:absolute;left:24px;top:22px;font-size:11px;letter-spacing:.2em}.taste-photo .photo-caption{color:#6e583a}.placeholder-title{font-family:var(--serif);font-size:27px;writing-mode:vertical-rl;letter-spacing:.2em;z-index:1}.ripple{width:300px;height:300px;border:1px solid #b0926370;border-radius:50%;position:absolute;box-shadow:0 0 0 24px #b0926310,0 0 0 25px #b0926330,0 0 0 50px #b0926310,0 0 0 51px #b0926320}.taste-copy p:not(.eyebrow){margin-top:26px;line-height:2.2}.center-heading{text-align:center}.menu-pending{text-align:center;padding:40px 20px 16px;max-width:700px;margin:28px auto 0;border-top:1px solid var(--line)}.small-seal{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--gold);color:var(--gold);font-family:var(--serif);margin-bottom:20px}.menu-pending h3{font-size:21px;letter-spacing:.07em}.menu-pending p{font-size:13px;color:#766b59;margin-top:18px}.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.menu-grid:empty{display:none}.menu-card{background:#fff8e9;margin-top:32px}.menu-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}.menu-card>div{padding:22px}.menu-tag{font-size:11px;color:var(--red)}.menu-price{color:var(--gold)}.history{background:#282119;color:#efe5d1;background-image:url('../images/paper.svg')}.history-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:90px}.history .eyebrow{color:#c7a465}.history-note{margin-top:35px;color:#b9aa91;font-family:var(--serif);letter-spacing:.12em}.timeline{list-style:none;padding:0 0 0 29px;margin:0;border-left:1px solid #89734e}.timeline li{position:relative;padding-bottom:30px}.timeline li:last-child{padding-bottom:0}.timeline li:before{content:"";position:absolute;left:-34px;top:17px;width:9px;height:9px;border-radius:50%;background:#c09a57}.year{font-family:var(--serif);font-size:36px;color:#d1af71;line-height:1.4;display:block;margin-bottom:8px}.year small{font-size:12px;margin-left:10px}.text-year{font-size:17px;line-height:2.4}.timeline h3{font-size:18px;letter-spacing:.05em}.timeline p{font-size:13px;color:#cfc3ae;margin-top:7px}.relationship{max-width:900px}.relationship h2{font-size:28px}.relationship-content{border-left:2px solid var(--gold);padding-left:30px;margin-top:30px;line-height:2.2}.relationship-content strong{font-weight:600}.trademark{font-size:12px;color:#77694f;border-top:1px solid var(--line);padding-top:22px}.faq{background:#eae0ce70;border-block:1px solid var(--line)}.faq-grid{display:grid;grid-template-columns:1fr 1.7fr;gap:60px}.faq h2{font-size:28px}.faq-list{border-top:1px solid #c6b89e}details{border-bottom:1px solid #c6b89e}summary{list-style:none;cursor:pointer;padding:24px 35px 24px 27px;position:relative;font-size:14px}summary::-webkit-details-marker{display:none}summary:before{content:"Q";position:absolute;left:0;color:var(--gold);font-family:Georgia,serif}summary:after{content:"+";position:absolute;right:5px;color:var(--gold);font-size:22px;top:17px}details[open] summary:after{content:"−"}details p{padding:0 30px 25px 27px;font-size:13px;color:#655943;line-height:2}.shop>h2{margin-bottom:44px}.shop-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px}.shop h3{font-size:23px;letter-spacing:.08em}.shop-data{margin:22px 0 0}.shop-data>div{display:grid;grid-template-columns:100px 1fr;border-bottom:1px solid var(--line);padding:13px 0;font-size:13px;gap:16px}.shop-data dt{color:#7b684c}.shop-data dd{margin:0}.shop-data small{display:block;font-size:11px;color:#7b6e59}.map-placeholder{background:#e8ddc5;border:1px solid #c9b68f;min-height:365px;text-align:center;padding:30px 20px;position:relative;outline:1px solid #c9b68f;outline-offset:-10px}.map-mark{font-size:44px;line-height:1;color:var(--gold)}.map-placeholder .eyebrow{margin-top:15px;margin-bottom:10px}.map-placeholder h3{font-size:28px}.map-placeholder p:not(.eyebrow){font-size:13px;margin-top:18px}.map-note{display:block;font-size:10px;color:#78684e;margin-top:20px}.gold{background:#916524;color:#fff7e9;margin-top:16px;font-size:15px}.access-note{font-size:11px;color:#7a6d58;margin-top:20px}footer{padding:52px 0 24px;background:#241e17;color:#e2d5bc}.footer-top{display:flex;gap:45px;align-items:center}.footer-info{font-size:11px;line-height:2}.footer-info p+p{margin-top:6px}.instagram{margin-left:auto;font-size:12px;white-space:nowrap}.instagram small{display:block;color:#a6987e;font-size:10px}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid #ffffff1c;margin-top:35px;padding-top:20px;font-size:10px;color:#a99a82}.mobile-nav{display:none}.skip{position:fixed;top:-80px;left:10px;z-index:100;background:white;padding:12px}.skip:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}img{max-width:100%;display:block}iframe{width:100%;min-height:365px;border:0}

@media(max-width:1000px){.wrap{width:calc(100% - 64px)}.hero-actions .button{padding:13px 18px;font-size:15px}.story,.taste-grid,.history-grid{gap:40px}.faq-grid{grid-template-columns:1fr;gap:32px}.shop-grid{gap:30px}.footer-top{flex-wrap:wrap}.instagram{margin-left:0}}
@media(max-width:700px){html{scroll-padding-top:24px}.header{height:82px;padding:0 23px}.brand-name{font-size:25px}.brand-name small{font-size:10px}.seal{width:37px;height:37px;font-size:25px}.header-location{display:none}.menu-toggle{margin-left:auto}.wrap{width:calc(100% - 44px)}.section{padding-block:64px}.opening{margin-top:23px}.opening p{font-size:24px}.hero-actions{margin-top:24px}.hero-actions .button{flex:1;font-size:15px;padding:14px 18px}.photo-caption{bottom:15px;font-size:9px}.story{grid-template-columns:1fr;gap:28px}.story h2 br{display:none}.chapter{display:none}.story-body{font-size:14px;line-height:2.2}.desktop{display:none}.eyebrow{font-size:10px;margin-bottom:15px}h2{font-size:29px;letter-spacing:.08em}.taste-grid{grid-template-columns:1fr;gap:34px}.taste-photo{min-height:300px;order:2}.taste-copy p:not(.eyebrow){font-size:14px;margin-top:20px}.placeholder-title{font-size:24px}.menu-pending{padding:30px 0 0;margin-top:25px}.menu-pending h3{font-size:18px;letter-spacing:0}.menu-pending p{font-size:12px}.menu-grid{grid-template-columns:1fr}.history-grid{grid-template-columns:1fr;gap:36px}.history h2 br{display:none}.history-note{display:none}.timeline{margin-left:5px}.year{font-size:32px}.text-year{font-size:16px}.relationship h2{font-size:24px}.relationship-content{padding-left:19px;font-size:14px}.trademark{font-size:11px}.faq h2{font-size:28px}.faq-grid{gap:24px}summary{font-size:13px;padding-top:21px;padding-bottom:21px}.shop-grid{grid-template-columns:1fr;gap:35px}.shop>h2{margin-bottom:27px}.shop h3{font-size:21px}.shop-data>div{grid-template-columns:88px 1fr;font-size:12px;gap:12px}.footer-top{display:block}.footer-info{margin-top:29px}.instagram{display:block;margin-top:22px}.footer-bottom{gap:10px;font-size:9px}footer{padding-bottom:88px}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;padding-bottom:env(safe-area-inset-bottom);background:#241e17;color:#fff3de;box-shadow:0 -2px 10px #0002}.mobile-nav a{flex:1;text-align:center;padding:16px 4px;font-family:var(--serif);font-size:14px;letter-spacing:.08em;border-right:1px solid #ffffff30}.mobile-nav a:first-child{background:var(--red)}.mobile-nav a:last-child{background:#916524;border:0}#navigation{top:74px;right:18px;width:min(320px,calc(100vw - 36px));padding:22px 28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* 商標は透過画像として、人物写真とつながる生成りの上に自然に配置。 */
header.header {
  position: fixed;
  inset: 0 0 auto;
  height: 100px;
  color: #3d2b1e;
  border: 0;
  background: transparent;
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.header .brand-mark {
  width: 72px;
  height: auto;
  flex-shrink: 0;
}
.header .menu-toggle {
  width: 64px;
  margin-left: auto;
  padding: 13px 0 9px;
  color: #4b3323;
  background: #f8f0e1e6;
  border: 1px solid #70513847;
  border-radius: 3px;
  flex-shrink: 0;
}
header.header.is-scrolled {
  background: #493121f5;
  color: #fff8e9;
  box-shadow: 0 2px 12px #39221426;
}
header.header.is-scrolled .brand-mark { filter: brightness(0) invert(1); }
header.header.is-scrolled .menu-toggle { background: #fff5e812; color: #fff8e9; border-color: #fff0da55; }
#navigation { top: 100%; right: 4.3%; }

/* 写真を右端まで広げ、生成りのグラデーションでコピーと一体化する。 */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(600px, 46vw, 880px);
  isolation: isolate;
  background: #f5eddf url('../images/paper.svg');
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #f5eddf 0%, #f5eddf 31%, #f5eddfef 36%, #f5eddfbb 41%, #f5eddf00 47%);
  pointer-events: none;
}
.hero-copy {
  position: relative;
  width: 49%;
  max-width: 660px;
  padding: 126px 30px 38px clamp(36px, 5.5vw, 106px);
  color: #3a291e;
}
.hero .eyebrow {
  margin-bottom: 16px;
  color: #916039;
}
.hero h1 {
  font-size: clamp(36px, 3.35vw, 60px);
  line-height: 1.5;
  letter-spacing: .035em;
}
.hero h1 span { color: #9b642c; }
.hero-sub {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.9;
  letter-spacing: .04em;
}
.hero .opening { margin-top: 24px; gap: 18px; }
.hero .opening>span { color: #916039; border-color: #b88b5b; }
.hero .opening p:first-child { font-size: clamp(22px, 1.7vw, 28px); }
.hero .opening .opening-name { font-size: 12px; }
.hero-actions { margin-top: 22px; gap: 10px; }
.hero-actions .button { flex: 1; padding: 12px 17px; gap: 14px; font-size: 16px; }
.hero-actions .red { background: #8b342a; }
.hero-actions .red:hover { background: #763026; }
.hero-actions .outline { background: #f8f1e44d; border-color: #aa8a6b; }
.hero-actions .outline:hover { background: #e9dbc6; }
.story-link {
  display: inline-flex;
  gap: 28px;
  margin-top: 17px;
  font-size: 11px;
  letter-spacing: .1em;
  border-bottom: 1px solid #c9b698;
}
.hero-photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 74%;
  z-index: -2;
}
.hero-picture {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 75%;
}
.hero + .story { padding-top: 62px; padding-bottom: 76px; }
@media (min-width: 901px) and (max-width: 1100px) {
  .hero-copy { width: 49%; padding: 121px 21px 34px 32px; }
  .hero h1 { font-size: 36px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .1em; }
  .hero-sub { font-size: 14px; letter-spacing: 0; }
  .hero .opening { gap: 12px; }
  .hero .opening p:first-child { font-size: 22px; }
  .hero-actions { gap: 8px; }
  .hero-actions .button { padding: 12px; font-size: 14px; gap: 8px; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 92px; }
  header.header {
    height: 76px;
    padding: 0 18px;
    gap: 12px;
    background: #f5eddf url('../images/paper.svg');
    border-bottom: 1px solid #ded0b96b;
  }
  .header .brand { gap: 10px; }
  .header .brand-mark { width: 50px; }
  .header .brand-name { font-size: 23px; }
  .header .menu-toggle { width: 48px; padding: 10px 0 7px; }
  header.header.is-scrolled { background: #493121f5; border-bottom-color: transparent; }
  #navigation { right: 18px; }
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 76px;
  }
  .hero::after { display: none; }
  /* 写真 → コピー → NEW OPEN → CTA。写真の上にヘッダーを重ねません。 */
  .hero-photo {
    position: relative;
    inset: auto;
    order: -1;
    width: 100%;
    z-index: 0;
  }
  .hero-photo::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 30px;
    background: linear-gradient(0deg, #f5eddf, #f5eddf00);
    pointer-events: none;
  }
  .hero-picture { aspect-ratio: 6 / 5; height: auto; }
  .hero-picture img { aspect-ratio: 6 / 5; object-position: 55% 60%; }
  .hero-copy { align-self: stretch; width: 100%; max-width: 660px; margin-inline: auto; padding: 24px 26px 36px; }
  .hero .eyebrow { font-size: 10px; margin-bottom: 13px; }
  .hero h1 { font-size: clamp(30px, 8vw, 48px); letter-spacing: .035em; }
  .hero-sub { font-size: 15px; margin-top: 16px; }
  .hero .opening { margin-top: 23px; }
  .hero .opening p:first-child { font-size: 24px; }
  .hero-actions { margin-top: 20px; }
  .hero-actions .button { padding: 13px 17px; font-size: 15px; }
  .hero + .story { padding-top: 44px; padding-bottom: 58px; }
}
@media (max-width: 360px) {
  .header .brand-name { font-size: 20px; }
  .header .brand { gap: 8px; }
  .hero-copy { padding-inline: 22px; }
  .hero .opening { gap: 14px; }
  .hero .opening p:first-child { font-size: 22px; }
  .hero-actions .button { padding-inline: 13px; gap: 10px; }
}