@charset "utf-8";
/* ===========================================================
   古民家喫茶 あおき — base.css（デザイン憲法の実装／親CCが確定・子CCは編集禁止）
   正本：_rough/references/sources.md v2
   =========================================================== */

/* ---------- 1. トークン ---------- */
:root{
  font-size:62.5%;                    /* 1rem = 10px */

  /* 配色 */
  --paper:#EFEBE5;
  --ink:#1B1917;
  --olive:#5F5C45;
  --willow:#C0C3A6;
  --paper2:#E2DAC9;
  --white:#FFFFFF;
  --diamond:#98A272;
  --timber:#8C6B5F;
  --rule:rgba(53,51,47,.15);
  --faint:rgba(27,25,23,.6);
  --hover:rgba(176,165,143,.2);
  --hover-rail:rgba(207,199,181,.7);

  /* 級数（PC＝1280基準の calc をそのまま／上限を min() で締める） */
  --fs-display:min(calc(1rem + 4vw), 8.8rem);
  --fs-chapter:min(calc(3rem + 2.2vw), 7.6rem);
  --fs-pagetitle:min(calc(3rem + 2vw), 7.2rem);
  --fs-item:min(calc(1rem + 2.5vw), 5.6rem);
  --fs-sub:min(calc(1rem + 1.3vw), 3.4rem);
  --fs-tel:min(4vw, 6.4rem);
  --fs-kanji:min(calc(2rem + 6vw), 11rem);
  --fs-call:2.5rem;
  --fs-btn:2rem;
  --fs-lead:1.7rem;
  --fs-body:1.6rem;
  --fs-body-s:1.5rem;
  --fs-desc:1.4rem;
  --fs-small:1.3rem;
  --fs-price:1.92rem;

  /* 余白 */
  --sec:24rem;          /* セクション間 */
  --sec-end:12rem;
  --rail:11.7647%;      /* 4/34 */

  /* モーション */
  --e-out:cubic-bezier(.23,1,.32,1);          /* Power4.easeOut 相当 */
  --e-circ:cubic-bezier(.075,.82,.165,1);     /* Circ.easeOut */
  --e-quint:cubic-bezier(.86,0,.07,1);        /* Quint.easeInOut */
}

/* ---------- 2. リセット ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Quattrocento","Noto Serif JP",serif;
  font-weight:400;
  font-size:var(--fs-body);
  line-height:2;
  letter-spacing:.01em;
  overflow-x:clip;                    /* sticky を壊さない横あふれ止め */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol,dl,dd{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,p,figure,blockquote{margin:0;font-weight:400;font-size:inherit;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
table{border-collapse:collapse;}
hr{border:0;height:1px;background:var(--rule);margin:0;}
hr.hr-v{width:1px;height:100%;}
::selection{background:var(--willow);color:var(--ink);}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px;}

/* 紙のテクスチャ（アクセント①） */
body::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
}

/* ---------- 3. 骨格＝34分割（レール4u ＋ 内容30u） ---------- */
.site{display:flex;align-items:flex-start;position:relative;z-index:1;}
.rail{
  flex:0 0 var(--rail);
  position:sticky;top:0;
  height:100vh;height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  padding:0 0 2vh;
  z-index:7;
}
.window{flex:1 1 auto;min-width:0;}

/* 30分割の器。中身は .cell で列を指定する */
.g{display:grid;grid-template-columns:repeat(30,1fr);}
.cell{grid-column:var(--c,3)/span var(--s,24);min-width:0;}
.cell--full{grid-column:1/-1;}

/* よく使う列（--c は1始まり＝2u左寄せなら3） */
.c-main{--c:3;--s:24;}     /* 2u..26u */
.c-wide{--c:1;--s:30;}
.c-text{--c:3;--s:11;}
.c-textR{--c:17;--s:11;}
.c-half{--c:3;--s:14;}
.c-halfR{--c:17;--s:14;}

/* セクション間 */
.sec{margin-bottom:var(--sec);position:relative;}
.sec:last-of-type{margin-bottom:var(--sec-end);}

/* ---------- 4. タイポ ---------- */
.display{font-size:var(--fs-display);line-height:1.4;}
.chapter{
  font-size:var(--fs-chapter);line-height:1.4;letter-spacing:.15em;
  writing-mode:vertical-rl;text-align:center;
  margin-block-end:-.15em;                       /* iOS：縦組み末尾の字間を詰める */
}
.pagetitle{
  font-size:var(--fs-pagetitle);line-height:1.4;letter-spacing:.1em;
  writing-mode:vertical-rl;margin-block-end:-.1em;
}
.item-name{font-size:var(--fs-item);line-height:1.4;}
.sub-h{font-size:var(--fs-sub);line-height:1.8;margin-bottom:1.5em;}
.lead{font-size:var(--fs-lead);line-height:2;letter-spacing:.05em;}
.body{font-size:var(--fs-body);line-height:2.2;}
.body-s{font-size:var(--fs-body-s);line-height:2;}
.desc{font-size:var(--fs-desc);line-height:2;color:var(--faint);}
.label{font-size:var(--fs-small);letter-spacing:.1em;color:var(--olive);}
.num{font-family:"Cardo","Noto Serif JP",serif;}
.price{font-family:"Cardo","Noto Serif JP",serif;font-size:var(--fs-price);line-height:2;}
.call{font-size:var(--fs-call);line-height:2;}
.tel{font-family:"Cardo","Noto Serif JP",serif;font-size:var(--fs-tel);letter-spacing:.11em;line-height:1.4;}

/* 一文字副題（アクセント③） */
.kanji{display:flex;align-items:baseline;gap:.6rem;color:var(--olive);opacity:.9;}
.kanji__c{font-size:var(--fs-kanji);line-height:1;}
.kanji__r{font-size:var(--fs-small);letter-spacing:.1em;}

/* 漢数字の番号 */
.jnum{color:var(--timber);font-size:2rem;line-height:2;flex:0 0 8rem;}

/* ---------- 5. 色面・写真 ---------- */
.panel{background:var(--willow);}
.panel--paper2{background:var(--paper2);}
.panel--white{background:var(--white);}
.panel--dark{background:var(--olive);color:var(--white);}

.fig{position:relative;overflow:hidden;background:var(--paper2);margin:0;}
.fig img{width:100%;height:100%;object-fit:cover;}
.fig--v{aspect-ratio:376/531;}      /* 縦 √2 */
.fig--sq{aspect-ratio:1/1;}
.fig--wide{aspect-ratio:902/760;}   /* 6:5 */
.fig--band{aspect-ratio:1278/895;}  /* 全幅 10:7 */
.fig--menu{aspect-ratio:5/4;}

/* 全幅パネル（レールの内側15pxまで食む＝当方は window 幅いっぱい） */
.band{grid-column:1/-1;}

/* ツイン写真（2uのずらし） */
.twin{display:grid;grid-template-columns:repeat(24,1fr);align-items:start;}
.twin__a{grid-column:1/span 10;margin-top:6.6%;}
.twin__b{grid-column:13/span 10;}

/* 短罫（右上の飾り） */
.tick{height:1px;background:var(--rule);width:32px;}

/* ---------- 5.5 下層ヒーロー（全下層ページ共通・子CCは触らない） ---------- */
.subhero{position:relative;margin-bottom:14rem;}
.subhero__panel{grid-column:11/span 20;grid-row:1;aspect-ratio:751/743;background:var(--willow);}
.subhero__fig{grid-column:7/span 24;grid-row:1;margin-top:150px;z-index:1;}
.subhero__head{
  grid-column:2/span 10;grid-row:1;z-index:2;
  margin-top:75px;padding:4rem;
  display:flex;align-items:flex-start;gap:3rem;
}
.subhero__tick{grid-column:28/span 2;grid-row:1;margin-top:63px;height:1px;width:32px;align-self:start;}

@media screen and (max-width:1024px){
  .subhero{margin-bottom:8rem;padding:0;}
  .subhero__panel{display:none;}
  .subhero__fig{margin:0 0 0 0;}
  .subhero__head{
    margin:0;padding:10% 0 8%;
    display:flex;align-items:flex-start;gap:2rem;
  }
  .subhero__tick{display:none;}
}

/* ---------- 6. ボタン（菱形マーク） ---------- */
.btn{display:inline-flex;align-items:center;font-size:var(--fs-btn);line-height:1.6;transition:color .2s ease;}
.btn__mark{position:relative;width:90px;height:60px;flex:0 0 90px;}
.btn__mark::before{
  content:"";position:absolute;left:50%;top:50%;width:60px;height:60px;
  background:var(--diamond);
  transform:translate(-50%,-50%) scale3d(1,.65,1) rotate(45deg);
}
.btn__mark::after{
  content:"";position:absolute;left:50%;top:50%;height:1px;width:0;background:var(--white);
  transform:translate(-50%,-50%) scaleY(1.5);
  transition:width .3s ease-in-out;
}
.btn__text{margin-left:2rem;}
.btn:hover{color:var(--timber);}
.btn:hover .btn__mark::after{width:16px;}
.panel--dark .btn:hover{color:var(--paper2);}

/* ---------- 7. レール（PC＝縦組みナビ） ---------- */
.rail__logo{
  padding-top:3.5vh;font-size:var(--fs-small);letter-spacing:.2em;
  writing-mode:vertical-rl;text-orientation:upright;
  word-break:keep-all;               /* 店名を語の途中で折らない（ここだけに限定して当てる） */
}
.rail__nav{flex:1 1 auto;display:flex;align-items:center;min-height:0;}
.rail__list{writing-mode:vertical-rl;display:flex;justify-content:space-around;align-items:center;height:100%;}
.rail__item{width:3.1em;position:relative;}
.rail__link{
  display:block;position:relative;padding:.5em .6em;
  color:var(--olive);
  font-size:calc(1rem + .7vh);letter-spacing:.2em;
  text-orientation:upright;
}
.rail__link::before{
  content:"";position:absolute;inset:0 0 0 50%;background:var(--hover-rail);
  opacity:0;transition:opacity .3s ease;
}
.rail__link:hover::before{opacity:1;}
.rail__link span{position:relative;}
.rail__item.is-current .rail__link::before{opacity:0;}
.rail__item.is-current .rail__link::after{
  content:"";position:absolute;right:2px;top:.4em;width:2px;height:calc(100% - 1em);
  background:var(--olive);
}
.rail__sns{font-size:var(--fs-small);letter-spacing:.1em;writing-mode:vertical-rl;text-orientation:upright;color:var(--olive);}

/* SPのトグル（PCでは隠す） */
.rail__toggle,.mnav{display:none;}

/* ---------- 8. フッター ---------- */
.foot{padding:12rem 0 6rem;position:relative;}
.foot__deco{position:absolute;left:0;right:0;bottom:0;pointer-events:none;opacity:.5;}
.foot__deco svg{width:100%;height:auto;display:block;}
.foot__stamp{position:absolute;right:8%;bottom:6rem;width:64px;opacity:.8;}
.foot__sitemap{display:grid;grid-template-columns:repeat(2,minmax(0,190px));gap:3.3rem 3rem;}
.foot__link{position:relative;display:inline-block;font-size:2.1rem;}
.foot__link::before{
  content:"";position:absolute;left:0;right:0;top:40%;height:70%;background:var(--hover);
  opacity:0;transition:opacity .3s ease;
}
.foot__link:hover::before{opacity:1;}
.foot__item.is-current .foot__link::after{
  content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;background:var(--olive);
  transition:width .4s ease-out .8s;
}
.is-in .foot__item.is-current .foot__link::after{width:100%;}
.foot__info{font-size:var(--fs-desc);}
.foot__large{font-family:"Cardo","Noto Serif JP",serif;font-size:2.8rem;}
.foot__small{font-size:var(--fs-small);color:var(--olive);}
.foot__copy{font-size:var(--fs-small);color:var(--olive);}

/* ---------- 9. モーション ---------- */
/* 行マスク */
.ln{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em;white-space:nowrap;}
.ln__i{display:block;transform:translateY(110%);transition:transform .6s var(--e-out) var(--d,0s);}
.is-in .ln__i{transform:translateY(0);}

/* 1文字ずつ（ページ題・章見出し） */
.ch{display:inline-block;overflow:hidden;}
.ch__i{display:inline-block;transform:translateY(110%) rotate(10deg);transition:transform .8s var(--e-circ) var(--d,.5s);}
.is-in .ch__i{transform:translateY(0) rotate(0);}

/* 罫 */
.js-hr{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e-out) .2s;}
.is-in .js-hr{transform:scaleX(1);}
.js-hr-v{transform:scaleY(0);transform-origin:top;transition:transform .8s var(--e-out) .2s;}
.is-in .js-hr-v{transform:scaleY(1);}

/* 色面（写真より0.2秒先） */
.js-panel{transform:scaleY(0);transform-origin:top;transition:transform .8s ease-in-out;}
.is-in .js-panel{transform:scaleY(1);}

/* 写真 */
.js-fig img{transform:scale(1.06);opacity:0;transition:transform 1.2s var(--e-out) .2s,opacity 1.2s var(--e-out) .2s;}
.is-in.js-fig img,.is-in .js-fig img{transform:scale(1);opacity:1;}

/* ブロック（行マスクのフォールバック） */
.js-rise{opacity:0;transform:translateY(16px);transition:opacity 1s var(--e-out) var(--d,0s),transform 1s var(--e-out) var(--d,0s);}
.is-in .js-rise,.is-in.js-rise{opacity:1;transform:none;}

/* イントロの幕 */
.splash{
  position:fixed;inset:0;z-index:100;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  transition:transform 1.6s var(--e-quint);
}
.splash__logo{font-size:var(--fs-sub);letter-spacing:.3em;overflow:hidden;}
.splash__logo span{display:block;transition:transform .6s var(--e-circ) .8s;}
.splash.is-out{transform:translateY(-100%);}
.splash.is-out .splash__logo span{transform:translateY(-110%);}
body.is-loading{overflow:hidden;}

/* ---------- 10. FAQ（details） ---------- */
.faq__item{border-bottom:1px solid var(--rule);}
.faq__q{display:flex;align-items:flex-start;gap:2rem;padding:2.4rem 0;cursor:pointer;list-style:none;font-size:var(--fs-body);}
.faq__q::-webkit-details-marker{display:none;}
.faq__q::after{content:"";flex:0 0 12px;height:1px;background:var(--ink);margin-top:1.6em;transition:transform .4s ease-in-out;}
details[open] .faq__q::after{transform:rotate(90deg);}
.faq__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-in-out;}
details[open] .faq__body{grid-template-rows:1fr;}
.faq__body>div{overflow:hidden;}
.faq__a{font-size:var(--fs-desc);color:var(--faint);padding:0 0 2.4rem 4rem;}

/* ---------- 11. フォーム ---------- */
.form__row{margin-bottom:4rem;}
.form__label{display:block;font-size:var(--fs-small);letter-spacing:.1em;color:var(--olive);margin-bottom:1rem;}
.form__label .req{margin-left:.8em;}
.field{
  width:100%;font:inherit;font-size:16px;                 /* iOSのズーム防止 */
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:.8em 0;color:var(--ink);border-radius:0;
}
select.field{-webkit-appearance:none;appearance:none;background-image:none;}
textarea.field{min-height:12em;resize:vertical;}
.field:focus{outline:none;border-bottom-color:var(--olive);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form__note{font-size:var(--fs-small);color:var(--faint);}
.form__done{display:none;font-size:var(--fs-lead);line-height:2;}
.form.is-sent .form__done{display:block;}
.form.is-sent .form__body{display:none;}

/* ---------- 12. 表・定義リスト ---------- */
.dl{font-size:var(--fs-desc);}
.dl__row{display:grid;grid-template-columns:7em 1fr;padding:.6em 0;}
.dl__row dt{color:var(--olive);}

/* お知らせの行（罫なし） */
.news__item{display:block;padding:2.4rem 0 3.2rem;position:relative;}
.news__date{font-family:"Cardo","Noto Serif JP",serif;font-size:var(--fs-desc);letter-spacing:.1em;color:var(--olive);display:block;margin-bottom:1rem;}
.news__title{font-size:2rem;line-height:1.8;}
.news__cat{writing-mode:vertical-rl;font-size:var(--fs-small);letter-spacing:.2em;color:var(--olive);}

/* 縦組みの品目リスト（アクセント②） */
.vlist{display:flex;flex-direction:row-reverse;justify-content:flex-end;margin-top:1.5rem;}
.vlist__ttl{writing-mode:vertical-rl;font-size:var(--fs-desc);letter-spacing:.4em;margin-left:1rem;}
.vlist__items{writing-mode:vertical-rl;font-size:1.2rem;line-height:1.4;letter-spacing:.25em;}
.vlist__items li+li{margin-right:.2rem;}

/* リンクのホバー帯 */
.uline{position:relative;display:inline-block;}
.uline::before{content:"";position:absolute;left:0;right:0;top:40%;height:60%;background:var(--hover);opacity:0;transition:opacity .3s ease;}
.uline:hover::before{opacity:1;}

/* ---------- 13. タブレット・SP（≤1024） ---------- */
@media screen and (max-width:1024px){
  :root{
    --fs-display:calc(2rem + 4vw);
    --fs-chapter:calc(2.5rem + 2.2vw);
    --fs-pagetitle:calc(1rem + 5vw);
    --fs-item:calc(1.4rem + 2vw);
    --fs-sub:calc(1.4rem + 2vw);
    --fs-tel:calc(2.5rem + 3vw);
    --fs-kanji:calc(2rem + 9vw);
    --fs-lead:1.6rem;
    --fs-body:1.4rem;
    --fs-body-s:1.4rem;
    --fs-desc:1.3rem;
    --sec:12rem;
    --sec-end:8rem;
  }
  .site{display:block;}
  .rail{
    position:fixed;left:0;right:0;top:0;
    width:100%;height:100px;
    flex:none;
    flex-direction:row;align-items:center;justify-content:space-between;
    padding:0 5%;
    background:var(--paper);
    transition:transform .4s ease;
  }
  body.is-down:not(.is-navi-open) .rail{transform:translateY(-100px);}
  .rail__logo{padding:0;writing-mode:horizontal-tb;text-orientation:mixed;letter-spacing:.2em;}
  .rail__nav,.rail__sns{display:none;}
  .window{padding-top:100px;}
  .lead{letter-spacing:.01em;}

  /* 30分割を捨てて1カラム＋左右ガター10% */
  .g{display:block;padding:0 10%;}
  .cell{width:auto;}
  .band,.g>.band{margin:0 -12.5%;}      /* 10%ガターの外へ出す */
  .twin{display:block;}
  .twin__a{margin-top:0;margin-bottom:10%;}

  /* ハンバーガー */
  .rail__toggle{display:block;width:44px;height:44px;position:relative;z-index:12;}
  .rail__toggle span{position:absolute;left:10px;right:10px;height:1px;background:var(--ink);transition:transform .4s ease,opacity .3s ease;}
  .rail__toggle span:nth-child(1){top:18px;}
  .rail__toggle span:nth-child(2){bottom:18px;}
  body.is-navi-open .rail__toggle span{background:var(--paper);}
  body.is-navi-open .rail__toggle span:nth-child(1){transform:translateY(4px) rotate(45deg);}
  body.is-navi-open .rail__toggle span:nth-child(2){transform:translateY(-4px) rotate(-45deg);}

  .mnav{
    display:block;position:fixed;inset:0;z-index:11;background:var(--olive);
    opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
  }
  body.is-navi-open .mnav{opacity:1;visibility:visible;}
  .mnav__list{
    height:100%;display:flex;align-items:center;justify-content:center;gap:5vw;
    writing-mode:vertical-rl;
  }
  .mnav__link{
    color:var(--paper);opacity:.6;
    font-size:calc(1rem + 2vw);letter-spacing:.2em;text-orientation:upright;
    position:relative;padding:.4em;
  }
  .mnav__item.is-current .mnav__link{opacity:1;}
  .mnav__item.is-current .mnav__link::after{
    content:"";position:absolute;right:0;top:0;width:2px;height:100%;background:var(--paper);
  }
  .foot__sitemap{grid-template-columns:repeat(2,minmax(0,1fr));}
  .foot__stamp{width:48px;right:10%;}
  .dl__row{grid-template-columns:6em 1fr;}
}

@media screen and (max-width:736px){
  :root{
    --fs-pagetitle:calc(1rem + 6vw);
    --fs-item:calc(2rem + 2vw);
    --fs-call:calc(1rem + 5vw);
    --fs-body:1.4rem;
    --fs-desc:1.3rem;
    --fs-small:1.2rem;
    --fs-btn:1.8rem;
  }
  .rail{height:70px;}
  body.is-down:not(.is-navi-open) .rail{transform:translateY(-70px);}
  .window{padding-top:70px;}
  .foot__large{font-size:2.2rem;}
  .foot__info{font-size:1.2rem;}
  .jnum{flex:0 0 4.5em;}
  .faq__a{padding-left:0;}
}

/* ---------- 14. 動きを減らす設定 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .ln__i,.ch__i{transform:none !important;}
  .js-hr,.js-hr-v,.js-panel{transform:none !important;}
  .js-fig img{transform:none !important;opacity:1 !important;}
  .js-rise{opacity:1 !important;transform:none !important;}
  .splash{display:none !important;}
}

/* ---------- 15. 印刷 ---------- */
@media print{
  .rail,.mnav,.splash,.foot__deco{display:none !important;}
  body{background:#fff;}
  .ln__i,.ch__i,.js-rise{transform:none !important;opacity:1 !important;}
}