:root{
--sumi:#241f1b; /* 墨 */
--sumi-usu:#5c544c; /* 薄墨 */
--nezumi:#8d857b; /* 鼠 */
--kin:#9a7b43; /* 抑えた金 */
--kin-usu:#c0a877; /* 淡金 */
--ji:#faf8f5; /* 地 */
--ji-fuka:#f3eee5; /* 深い地 */
--keisen:rgba(36,31,27,.13);
--keisen-usu:rgba(36,31,27,.07);
--maxw:1080px;
--mincho:"Shippori Mincho",serif;
--gothic:"Zen Kaku Gothic New",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:var(--gothic);
font-weight:400;
color:var(--sumi);
background:var(--ji);
line-height:2.05;
font-size:15.5px;
letter-spacing:.04em;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--mincho);font-weight:500;line-height:1.75;margin:0}
p{margin:0 0 1.1em}
.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.narrow{width:min(100% - 2.5rem,720px);margin-inline:auto}
/* ============ ヘッダー ============ */
header{
position:sticky;top:0;z-index:100;
background:rgba(250,248,245,.94);
backdrop-filter:blur(8px);
border-bottom:1px solid var(--keisen-usu);
}
.headin{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
.logo{display:flex;align-items:baseline;gap:.75rem;text-decoration:none}
.logo b{font-family:var(--mincho);font-size:1.3rem;font-weight:500;letter-spacing:.3em}
.logo small{font-size:.58rem;letter-spacing:.38em;color:var(--nezumi)}
nav ul{display:flex;gap:2.1rem;list-style:none;margin:0;padding:0}
nav a{
text-decoration:none;font-size:.8rem;letter-spacing:.14em;color:var(--sumi-usu);
padding:.3rem 0;position:relative;transition:color .3s;
}
nav a::after{
content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
background:var(--kin-usu);transition:width .35s ease;
}
nav a:hover{color:var(--kin)}
nav a:hover::after{width:100%}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;width:44px;height:44px}
.burger span{display:block;width:20px;height:1px;background:var(--sumi);margin:6px auto;transition:.3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ============ ボタン ============ */
.btn{
display:inline-flex;align-items:center;gap:.7rem;
padding:1.05rem 2.7rem;border-radius:1px;text-decoration:none;
font-size:.78rem;letter-spacing:.22em;
border:1px solid var(--sumi);color:var(--sumi);
transition:background .4s,color .4s,border-color .4s;
/* button要素にも使うため、ブラウザ既定の地色と書体を打ち消す */
background:transparent;font-family:inherit;line-height:1.6;
-webkit-appearance:none;appearance:none;cursor:pointer;
}
.btn:disabled{opacity:.5;cursor:default}
.btn:hover{background:var(--sumi);color:var(--ji)}
.btn-kin{border-color:var(--kin);color:var(--kin)}
.btn-kin:hover{background:var(--kin);color:var(--ji);border-color:var(--kin)}
.btn-light{border-color:rgba(250,248,245,.5);color:var(--ji)}
.btn-light:hover{background:var(--ji);color:var(--sumi);border-color:var(--ji)}
/* ============ ヒーロー ============ */
.hero{border-bottom:1px solid var(--keisen-usu)}
.hero-inner{
display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:4.5rem;
width:min(100% - 2.5rem,var(--maxw));margin-inline:auto;
padding:6.5rem 0 7rem;
}
.hero-inner>*{min-width:0}
.tate{
font-family:var(--mincho);writing-mode:vertical-rl;
font-size:.7rem;letter-spacing:.5em;color:var(--kin);
margin-bottom:2rem;height:7.5em;
}
.hero h1{
font-size:clamp(1.85rem,3.9vw,2.7rem);letter-spacing:.17em;line-height:2;
margin-bottom:2rem;
}
.hero .lead{color:var(--sumi-usu);font-size:.93rem;max-width:26em}
.hero-btns{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:3rem}
.hero-photo{position:relative;padding:14px}
.hero-photo::before{
content:"";position:absolute;inset:0;border:1px solid var(--keisen);
}
.hero-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;position:relative}
/* ============ セクション ============ */
section{padding:7rem 0}
.fuka{background:var(--ji-fuka)}
.sec-head{text-align:center;margin-bottom:4.5rem}
.sec-head .no{
font-family:var(--mincho);font-size:.66rem;letter-spacing:.38em;color:var(--kin);
display:block;margin-bottom:1.5rem;
}
.sec-head .ja{
font-family:var(--mincho);font-size:clamp(1.35rem,2.7vw,1.75rem);
letter-spacing:.26em;display:block;font-weight:500;
}
.sec-head .sub{
display:block;font-size:.82rem;color:var(--nezumi);margin-top:1.4rem;letter-spacing:.1em;
}
/* ============ リード ============ */
.intro{text-align:center}
.intro h2{font-size:clamp(1.25rem,2.5vw,1.6rem);letter-spacing:.2em;line-height:2.2;margin-bottom:2.2rem}
.intro p{color:var(--sumi-usu);font-size:.92rem}
.assure{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
margin-top:4.5rem;border-top:1px solid var(--keisen);border-bottom:1px solid var(--keisen);
}
.assure>*{min-width:0}
.assure div{padding:2.6rem 1.6rem;text-align:center;border-left:1px solid var(--keisen-usu)}
.assure div:first-child{border-left:0}
.assure dt{font-family:var(--mincho);font-size:.98rem;letter-spacing:.16em;margin-bottom:.7rem}
.assure dd{margin:0;font-size:.8rem;color:var(--nezumi);line-height:1.95}
/* ============ 折詰 ============ */
.gifts{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem}
.gifts>*{min-width:0}
.gift{
background:var(--ji);border:1px solid var(--keisen-usu);
transition:border-color .45s;display:flex;flex-direction:column;
}
.gift:hover{border-color:var(--kin-usu)}
.gift .visual{aspect-ratio:4/3;position:relative;overflow:hidden;background:#efe9de;display:grid;place-items:center}
.gift .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 右端に写り込んだ洋食器を外し、饅頭を中心に寄せる */
.gift .visual img.mid{transform:scale(1.56) translate(-5%,17%)}
.gift .body{padding:2.2rem 2rem 2.4rem;display:flex;flex-direction:column;flex:1}
.gift .yo{font-size:.68rem;letter-spacing:.24em;color:var(--kin)}
.gift h3{font-size:1.2rem;letter-spacing:.2em;margin:.9rem 0 1.1rem}
.gift p{font-size:.83rem;color:var(--sumi-usu);line-height:1.95;flex:1}
.gift .meta{
font-size:.74rem;color:var(--nezumi);letter-spacing:.06em;
padding-top:1.2rem;margin-top:.4rem;border-top:1px solid var(--keisen-usu);line-height:1.9;
}
.gift .kakaku{
font-family:var(--mincho);font-size:1.15rem;color:var(--sumi);
display:block;margin-top:.9rem;letter-spacing:.08em;
}
.gift .kakaku span{font-size:.7rem;color:var(--nezumi);margin-left:.6rem;font-family:var(--gothic);letter-spacing:.1em}
/* ============ 単品のお菓子 ============ */
.kashi{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.kashi>*{min-width:0}
.kashi article .visual{aspect-ratio:1/1;position:relative;overflow:hidden;background:#efe9de;display:grid;place-items:center}
.kashi article .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 正方形の枠でも右端の洋食器が入らないよう、わずかに左へ寄せる */
.kashi article .visual img.mid{object-position:45% center}
.kashi h3{font-size:1rem;letter-spacing:.14em;margin:1.4rem 0 .6rem}
.kashi p{font-size:.79rem;color:var(--nezumi);line-height:1.9;margin-bottom:.7rem}
.kashi .hi{font-size:.72rem;color:var(--kin);letter-spacing:.08em}
/* ============ 添えるもの ============ */
.soeru{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--keisen)}
.soeru>*{min-width:0}
.soeru article{
padding:3rem 3.2rem;border-bottom:1px solid var(--keisen);
display:flex;gap:1.8rem;align-items:flex-start;
}
.soeru article:nth-child(odd){border-right:1px solid var(--keisen)}
.soeru .ic{flex:0 0 auto;margin-top:.35rem}
.soeru h3{font-size:1.02rem;letter-spacing:.16em;margin-bottom:.8rem}
.soeru p{font-size:.82rem;color:var(--sumi-usu);margin:0;line-height:1.95}
/* ============ 流れ ============ */
.nagare{display:grid;grid-template-columns:repeat(4,1fr);gap:2.2rem;counter-reset:step}
.nagare>*{min-width:0}
.nagare li{list-style:none;position:relative;padding-top:2.6rem;border-top:1px solid var(--keisen)}
.nagare li::before{
counter-increment:step;content:"0" counter(step);
position:absolute;top:1.1rem;left:0;
font-family:var(--mincho);font-size:.7rem;letter-spacing:.2em;color:var(--kin);
}
.nagare h3{font-size:.98rem;letter-spacing:.14em;margin-bottom:.7rem}
.nagare p{font-size:.79rem;color:var(--nezumi);margin:0;line-height:1.9}
/* ============ 本店のひととき ============ */
.hitotoki{display:grid;grid-template-columns:.85fr 1.15fr;gap:5rem;align-items:center}
.hitotoki>*{min-width:0}
.hitotoki .photo{position:relative;padding:12px}
.hitotoki .photo::before{content:"";position:absolute;inset:0;border:1px solid var(--keisen)}
.hitotoki .photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 46%;position:relative}
.hitotoki h2{font-size:clamp(1.25rem,2.4vw,1.6rem);letter-spacing:.2em;line-height:2.1;margin-bottom:1.8rem}
.hitotoki p{font-size:.88rem;color:var(--sumi-usu)}
.hitotoki .chui{font-size:.76rem;color:var(--nezumi);margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--keisen-usu)}
/* ============ 由緒 ============ */
.yuisho{text-align:center}
.yuisho p{color:var(--sumi-usu);font-size:.9rem}
.yuisho .sign{font-family:var(--mincho);letter-spacing:.24em;margin-top:2.6rem;font-size:.88rem}
.kamon{
width:58px;height:58px;margin:0 auto 3rem;
border:1px solid var(--kin-usu);border-radius:50%;
display:grid;place-items:center;
font-family:var(--mincho);font-size:1.15rem;color:var(--kin);
}
/* ============ 店舗 ============ */
.shop{display:grid;grid-template-columns:1.1fr .9fr;gap:4.5rem;align-items:start}
.shop>*{min-width:0}
.info{width:100%;border-collapse:collapse;font-size:.85rem}
.info th,.info td{padding:1.15rem .2rem;border-bottom:1px solid var(--keisen-usu);text-align:left;vertical-align:top}
.info th{width:7em;font-family:var(--mincho);font-weight:500;letter-spacing:.18em;white-space:nowrap}
.info td{color:var(--sumi-usu)}
.info .note{font-size:.76rem;color:var(--nezumi)}
.info a{text-decoration:none;border-bottom:1px solid var(--keisen)}
.access{border:1px solid var(--keisen);padding:2.8rem 2.4rem}
.access h3{font-size:1rem;letter-spacing:.18em;margin-bottom:1.3rem}
.access p{font-size:.82rem;color:var(--sumi-usu)}
.access .btn{margin-top:1.4rem;padding:.85rem 2rem}
/* ============ CTA ============ */
.cta{background:var(--sumi);color:var(--ji);text-align:center}
.cta h2{font-size:clamp(1.25rem,2.6vw,1.65rem);letter-spacing:.22em;line-height:2.1;margin-bottom:1.8rem}
.cta p{color:rgba(250,248,245,.66);font-size:.86rem;max-width:32em;margin-inline:auto}
.cta .tel{
font-family:var(--mincho);font-size:clamp(1.5rem,3.4vw,2rem);letter-spacing:.14em;
display:inline-block;margin:2.6rem 0 .5rem;text-decoration:none;
}
.cta .jikan{font-size:.76rem;color:rgba(250,248,245,.5);letter-spacing:.12em}
.cta .btn{margin-top:2.4rem}
/* ============ フッター ============ */
footer{background:var(--ji-fuka);padding:4rem 0 2.2rem;font-size:.78rem;color:var(--sumi-usu)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2.2rem;align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:1.8rem;list-style:none;margin:0;padding:0}
.foot-links a{text-decoration:none;transition:color .3s}
.foot-links a:hover{color:var(--kin)}
.copy{
margin-top:3.4rem;padding-top:1.6rem;border-top:1px solid var(--keisen-usu);
font-size:.7rem;letter-spacing:.12em;color:var(--nezumi);text-align:center;
}
/* ============ 演出 ============ */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1s ease}
.js .reveal.on{opacity:1;transform:none}
/* ============ レスポンシブ ============ */
@media (max-width:920px){
.hero-inner,.hitotoki,.shop{grid-template-columns:1fr;gap:3rem}
.hero-inner{padding:4rem 0 4.5rem}
.tate{writing-mode:horizontal-tb;height:auto;margin-bottom:1.4rem;letter-spacing:.4em}
.gifts{grid-template-columns:1fr;gap:2rem}
.kashi{grid-template-columns:repeat(2,1fr);gap:2rem 1.6rem}
.nagare{grid-template-columns:repeat(2,1fr);gap:2.4rem}
.hitotoki .photo img{aspect-ratio:4/3}
.soeru article{padding:2.4rem 2rem}
}
@media (max-width:640px){
section{padding:4.5rem 0}
.sec-head{margin-bottom:3rem}
.burger{display:block}
nav{
position:absolute;left:0;right:0;top:100%;background:var(--ji);
border-bottom:1px solid var(--keisen-usu);
max-height:0;overflow:hidden;transition:max-height .4s ease;
}
nav.open{max-height:400px}
nav ul{flex-direction:column;gap:0;padding:.4rem 1.25rem 1.2rem}
nav li{border-bottom:1px solid var(--keisen-usu)}
nav li:last-child{border-bottom:0}
nav a{display:block;padding:1rem 0;font-size:.9rem}
.assure{grid-template-columns:1fr}
.assure div{border-left:0;border-top:1px solid var(--keisen-usu);padding:2rem 1rem}
.assure div:first-child{border-top:0}
.soeru{grid-template-columns:1fr}
.soeru article{border-right:0!important;padding:2.2rem .2rem}
.nagare{grid-template-columns:1fr;gap:1.8rem}
.btn{width:100%;justify-content:center;padding:1rem 1.5rem}
.access .btn{width:auto}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.js .reveal{opacity:1;transform:none}
}
/* ============================================================
お問い合わせページ
============================================================ */
.page-head{background:var(--ji-fuka);border-bottom:1px solid var(--keisen-usu);text-align:center;padding:5rem 0 4.5rem}
.page-head .no{font-family:var(--mincho);font-size:.66rem;letter-spacing:.38em;color:var(--kin);display:block;margin-bottom:1.5rem}
.page-head h1{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:.26em;margin-bottom:1.6rem}
.page-head p{color:var(--sumi-usu);font-size:.88rem;max-width:34em;margin-inline:auto}
/* 連絡手段の三択 */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--keisen)}
.routes>*{min-width:0}
.routes article{padding:3rem 2rem;text-align:center;border-left:1px solid var(--keisen-usu)}
.routes article:first-child{border-left:0}
.routes .ji{font-family:var(--mincho);font-size:.66rem;letter-spacing:.3em;color:var(--kin);display:block;margin-bottom:1.4rem}
.routes h2{font-size:1.05rem;letter-spacing:.18em;margin-bottom:1rem}
.routes p{font-size:.8rem;color:var(--nezumi);line-height:1.95;margin-bottom:1.4rem}
.routes .oote{font-family:var(--mincho);font-size:1.35rem;letter-spacing:.1em;text-decoration:none;display:inline-block;word-break:break-all}
.routes .oote:hover{color:var(--kin)}
.routes .hosoku{font-size:.72rem;color:var(--nezumi);letter-spacing:.08em;margin:.6rem 0 0}
.routes .osusume{border-top:2px solid var(--kin)}
/* フォーム */
.form-wrap{max-width:720px;margin-inline:auto}
.form-note{
border:1px solid var(--keisen);padding:1.6rem 1.8rem;margin-bottom:3.5rem;
font-size:.8rem;color:var(--sumi-usu);line-height:1.95;
}
.form-note b{font-family:var(--mincho);font-weight:500;letter-spacing:.1em}
.fld{margin-bottom:2.4rem}
.fld>label,.fld>.lbl{
display:block;font-family:var(--mincho);font-size:.92rem;letter-spacing:.16em;
margin-bottom:.9rem;
}
.hissu,.nin{
font-family:var(--gothic);font-size:.62rem;letter-spacing:.14em;
padding:.2rem .6rem;margin-left:.9rem;vertical-align:.12em;
}
.hissu{background:var(--kin);color:var(--ji)}
.nin{border:1px solid var(--keisen);color:var(--nezumi)}
.tebiki{font-size:.76rem;color:var(--nezumi);margin:-.4rem 0 .9rem;line-height:1.9}
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=number],select,textarea{
width:100%;font-family:var(--gothic);font-size:.92rem;color:var(--sumi);
background:#fff;border:1px solid var(--keisen);border-radius:1px;
padding:.95rem 1.1rem;line-height:1.8;
transition:border-color .3s;-webkit-appearance:none;appearance:none;
}
select{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 1.1rem center;padding-right:2.8rem;
}
textarea{resize:vertical;min-height:9.5em}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--kin)}
input::placeholder,textarea::placeholder{color:#b9b2a8}
.futatsu{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.futatsu>*{min-width:0}
/* ラジオ・チェックボックス */
.erabu{display:grid;gap:.1rem}
.erabu label{
display:flex;align-items:flex-start;gap:.9rem;cursor:pointer;
padding:.85rem 1.1rem;border:1px solid var(--keisen);margin-top:-1px;
font-size:.88rem;transition:border-color .3s,background .3s;
}
.erabu label:hover{background:#fff}
.erabu input{
appearance:none;-webkit-appearance:none;flex:0 0 auto;
width:15px;height:15px;margin:.42rem 0 0;border:1px solid var(--nezumi);
background:#fff;transition:border-color .25s;
}
.erabu input[type=radio]{border-radius:50%}
.erabu input:checked{border:4px solid var(--kin)}
.erabu input[type=checkbox]:checked{
border:1px solid var(--kin);background:var(--kin);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:center;
}
.erabu label:has(input:checked){border-color:var(--kin);background:#fff;position:relative;z-index:1}
.err{display:block;font-size:.74rem;color:#9c4a3c;margin-top:.55rem;letter-spacing:.04em}
.fld.ng input,.fld.ng select,.fld.ng textarea{border-color:#9c4a3c}
.fld.ng .erabu label{border-color:#9c4a3c}
.soushin{margin-top:3.5rem;text-align:center}
.soushin .btn{min-width:16rem;justify-content:center}
.soushin .kojin{font-size:.74rem;color:var(--nezumi);margin-top:1.6rem;line-height:1.9}
.soushin .kojin a{color:var(--sumi-usu)}
/* 送信後 */
.kanryo{border:1px solid var(--kin);padding:3.5rem 2.5rem;text-align:center}
.kanryo h2{font-size:1.25rem;letter-spacing:.2em;margin-bottom:1.4rem}
.kanryo p{font-size:.86rem;color:var(--sumi-usu)}
.kanryo .btn{margin-top:1.6rem}
/* honeypot */
.tsubo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* よくあるお問い合わせ */
.faq{max-width:760px;margin-inline:auto;border-top:1px solid var(--keisen)}
.faq details{border-bottom:1px solid var(--keisen-usu)}
.faq summary{
list-style:none;cursor:pointer;padding:1.6rem 2.5rem 1.6rem 2rem;position:relative;
font-family:var(--mincho);font-size:.95rem;letter-spacing:.12em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
content:"問";position:absolute;left:0;top:1.6rem;
font-size:.7rem;color:var(--kin);letter-spacing:0;
}
.faq summary::after{
content:"";position:absolute;right:.4rem;top:2.25rem;
width:9px;height:9px;border-right:1px solid var(--nezumi);border-bottom:1px solid var(--nezumi);
transform:rotate(45deg);transition:transform .3s;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .kotae{
padding:0 2.5rem 1.8rem 2rem;font-size:.84rem;color:var(--sumi-usu);
line-height:2;position:relative;margin:0;
}
.faq .kotae::before{
content:"答";position:absolute;left:0;top:.05rem;
font-family:var(--mincho);font-size:.7rem;color:var(--nezumi);
}
@media (max-width:920px){
.routes{grid-template-columns:1fr}
.routes article{border-left:0;border-top:1px solid var(--keisen-usu);padding:2.6rem 1.6rem}
.routes article:first-child{border-top:0}
.routes .osusume{border-top:2px solid var(--kin)}
}
@media (max-width:640px){
.page-head{padding:3.2rem 0 3rem}
.futatsu{grid-template-columns:1fr;gap:0}
.futatsu>*{margin-bottom:1.2rem}
.futatsu>*:last-child{margin-bottom:0}
.form-note{padding:1.3rem 1.2rem}
.soushin .btn{width:100%}
.faq summary{padding:1.3rem 2rem 1.3rem 1.7rem;font-size:.9rem}
.faq .kotae{padding:0 .2rem 1.5rem 1.7rem}
}