/*
Theme Name: YOLUCA
Theme URI: https://panificio.yoluca.com
Author: YOLUCA
Description: 左に固定されたロゴとメニュー、広い余白で読ませる、美術書のような構成のテーマ。
Version: 1.9.17
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: yoluca
*/

:root{
  --paper:#EEF1EF;
  --ink:#1E2A2E;
  --quiet:#5C6C6C;
  --plate:#DCE3E1;
  --crust:#84592A;
  --side:11rem;
  --serif-jp:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --serif-en:"Cormorant Garamond","Times New Roman",serif;
}

*{box-sizing:border-box}
body{overflow-x:hidden}
html{scroll-behavior:smooth}
/* 広い画面では、全体を拡大して見せる（横に引き伸ばさず、幅1140pxで見たときの配置と比率のまま、大きくする）。基準の幅を変えるときは 1.4vw の数値を調整 */
@media (min-width:1141px){html{font-size:min(1.4vw,21px)}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif-jp);font-weight:400;font-size:1rem;line-height:2;
  font-feature-settings:"palt";-webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--crust);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem 1rem;z-index:100}
.skip:focus{left:0}

/* 固定メニュー（既定は右。写真に少し重なる） */
:root{--pad-l:1rem;--overlap:4rem;--mono:"IBM Plex Mono","Courier New",monospace;--mark:3.5rem}
.side{position:fixed;top:0;right:0;bottom:0;width:var(--side);padding:2.5rem 2rem 2rem 0;z-index:50;display:flex;flex-direction:column;pointer-events:none}
.side>*{pointer-events:auto}
.menu-left .side{left:0;right:auto;padding:2.5rem 0 2rem 2rem}
.wordmark{display:block;text-decoration:none;color:var(--ink);font-family:var(--serif-en);font-size:1.9rem;letter-spacing:.12em;line-height:1}
.wordmark small{display:block;margin-top:.7rem;font-family:var(--serif-jp);font-size:.7rem;letter-spacing:.3em;color:var(--quiet)}
.menu-toggle{display:none}
.site-nav{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto;scrollbar-width:none}
.site-nav::-webkit-scrollbar{display:none}
.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav .primary{margin-top:4rem}
.site-nav .primary a{display:inline-block;padding:.3rem 0;text-decoration:none;font-family:var(--menu-font,var(--serif-en));font-size:1.6rem;letter-spacing:.04em;line-height:1.5;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.site-nav .primary a:hover,
.site-nav .primary .current-menu-item>a,
.site-nav .primary .current_page_item>a{color:var(--crust);border-bottom-color:var(--crust)}
.site-nav .secondary{margin-top:auto}
.site-nav .secondary a{display:inline-block;padding:.25rem 0;text-decoration:none;font-family:var(--sub-font,var(--mono));font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.site-nav .secondary a:hover{color:var(--crust)}

/* メニューのロゴ画像 */
.wordmark.has-img img{display:block;max-width:100%;height:auto}

/* メニュー: 英語を表示し、パソコンではカーソルを合わせると日本語に切り替わる */
.site-nav a .jp{display:none;font-family:var(--serif-jp);font-size:.62em;letter-spacing:.06em;white-space:nowrap}
.site-nav .secondary a .jp{font-size:1em;letter-spacing:.05em;text-transform:none}
@media (min-width:861px){
  .site-nav .primary a,.site-nav .secondary a{display:inline-grid}
  .site-nav a .en,.site-nav a .jp{grid-area:1/1;transition:opacity .25s}
  .site-nav a .jp{display:block;opacity:0;align-self:center}
  .site-nav a:hover .en,.site-nav a:focus-visible .en{opacity:0}
  .site-nav a:hover .jp,.site-nav a:focus-visible .jp{opacity:1}
}

/* 写真に重なったメニューの文字色を自動で反転する（パソコン表示のみ） */
.brand{display:none}
.nav-brand{display:none}
@media (min-width:861px){
  .menu-invert .side{mix-blend-mode:difference;color:var(--menu-ink,#D0C7C1)}
  .menu-invert .side .wordmark{color:inherit}
  .menu-invert .site-nav a,
  .menu-invert .site-nav .primary a:hover,
  .menu-invert .site-nav .secondary a:hover,
  .menu-invert .site-nav .primary .current-menu-item>a,
  .menu-invert .site-nav .primary .current_page_item>a{color:inherit}
  .menu-invert .site-nav .primary a:hover,
  .menu-invert .site-nav .primary .current-menu-item>a,
  .menu-invert .site-nav .primary .current_page_item>a{border-bottom-color:currentColor}
  .menu-invert .site-nav .secondary a:hover{opacity:.7}
  /* ロゴ画像は色を変えたくないので、メニューの外に置いた.brandを表示し、中の画像は場所取りだけにする */
  .menu-invert .side .wordmark.has-img{visibility:hidden}
  .menu-invert .brand{display:block;position:fixed;top:2.5rem;left:calc(100% - var(--side));z-index:51}
  .menu-invert.menu-left .brand{left:2rem}
}

/* 透けて固定されるロゴマーク（外観 > カスタマイズ > サイト基本情報 > ロゴ） */
.fixed-mark{position:fixed;top:var(--mark-top,3vh);left:50%;transform:translateX(-50%);width:var(--mark-d,6rem);z-index:45;opacity:1;mix-blend-mode:normal;pointer-events:none}
.fixed-mark img{display:block;width:100%;height:auto}
/* 上中央のロゴ: ふだんは、ロゴの元の色（セピア）。写真に重なったときだけ、メニューと同じように、背景に合わせて色が反転する（光の縁取りは付けない） */
.mark-invert .fixed-mark::after{content:"";position:absolute;inset:0;opacity:0;background:var(--menu-ink,#D0C7C1);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.mark-invert.mark-over-photo .fixed-mark{mix-blend-mode:difference}
.mark-invert.mark-over-photo .fixed-mark img{visibility:hidden}
.mark-invert.mark-over-photo .fixed-mark::after{opacity:1}


/* 本文エリア */
.main{margin-right:calc(var(--side) - 3rem);padding:7rem clamp(1.5rem,6vw,6rem) 5rem 1rem}
.menu-left .main{margin-right:0;margin-left:calc(var(--side) - var(--overlap))}
.menu-left .main :is(.lede,.refrain,.domains,.profile,.order,.entry,.forno-text){padding-left:var(--overlap)}
/* トップの冒頭文は、写真の左端より、さらに少し右から始める（数値 1.5rem を変えると、右への動きが変わる） */
@media (min-width:861px){
  /* トップの冒頭文: 写真と同じ幅の箱に収める。左は「ABOUT」のTのあたりから（余白1.5rem。数値を変えると左端が動く）、右端は写真の右端にそろえる（文字の大きさは、その幅に合わせて自動で決まる） */
  .menu-left .main .lede{box-sizing:border-box;width:calc((100% - .6rem) * 2 / 3);max-width:none;margin-left:0;margin-right:0;padding-left:1.5rem;container-type:inline-size}
  .menu-left .main .lede h1{font-size:3.78cqw;max-width:none}
  .menu-left .main .lede .en{font-size:2.5cqw;max-width:none}
}
.wrap{max-width:60rem}


.lede h1{font-weight:400;font-size:clamp(1.3rem,2.1vw,1.85rem);line-height:1.95;letter-spacing:.06em;margin:0 0 1.5rem;max-width:30em}
.lede .br-wide{display:inline}
.lede .en{font-family:var(--serif-en);font-size:1.25rem;line-height:1.6;color:var(--quiet);margin:0;max-width:34em}

/* 大きさの違う3枚。下端をそろえる */
.triptych{display:flex;align-items:flex-end;gap:clamp(.75rem,2vw,1.75rem);margin:5rem 0 4rem}
.triptych figure{margin:0}
.triptych figure:nth-child(1){flex:0 1 42%}
.triptych figure:nth-child(2){flex:0 1 34%}
.triptych figure:nth-child(3){flex:0 1 18%}
.triptych img,.triptych .plate{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;height:auto}
.plate{background:var(--plate)}

.refrain{margin:0 0 3rem}
.refrain .jp{font-size:clamp(1.1rem,1.6vw,1.4rem);letter-spacing:.08em;line-height:1.9;margin:0 0 .6rem;max-width:30em}
.refrain .en{font-family:var(--serif-en);font-size:1.2rem;line-height:1.6;color:var(--quiet);margin:0;max-width:34em}

.domains{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin:0 0 5rem}
.domains h2{font-family:var(--serif-en);font-weight:500;font-size:1.4rem;letter-spacing:.05em;line-height:1.3;margin:0}
.domains .jp{display:block;font-family:var(--serif-jp);font-size:.8rem;letter-spacing:.2em;color:var(--quiet);margin:.2rem 0 1rem}
.domains p{margin:0 0 .75rem;font-size:.9rem;line-height:1.95}
.domain-photo{display:none;margin:1.5rem 0 0}
.domain-media{position:relative}
.domain-text{display:none}
.domains .en{font-family:var(--serif-en);font-size:1.05rem;line-height:1.55;color:var(--quiet)}

.profile{max-width:34em;margin:0 0 4rem}
.profile h2{font-family:var(--serif-en);font-style:italic;font-weight:400;font-size:1rem;color:var(--quiet);margin:0 0 .5rem}
.profile p{margin:0 0 .75rem;font-size:.9rem}
.profile .en{font-family:var(--serif-en);font-size:1.05rem;line-height:1.55;color:var(--quiet)}
.order a{border-bottom:1px solid var(--crust);text-decoration:none;padding-bottom:.1rem}
.order a:hover{color:var(--crust)}

/* 固定ページ・投稿 */
.entry h1{font-weight:400;font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:.08em;line-height:1.7;margin:0 0 3rem}
.entry-content{max-width:60rem}
.entry-content p{margin:0 0 1.5em;max-width:36em}
.entry-content img{max-width:100%;height:auto}
.entry-content figure{margin:3rem 0}

.entry-content h2,.entry-content h3{font-weight:500;letter-spacing:.06em;line-height:1.7;margin:3rem 0 1rem}
.entry-list{list-style:none;margin:0;padding:0}
.entry-list li{margin:0 0 1.5rem}
.entry-list a{text-decoration:none}
.entry-list a:hover{color:var(--crust)}


/* 阿蘇の景色（横長1枚）。カスタマイズで設定したときだけ表示 */
.landscape{width:100vw;margin:0 0 5rem calc(-1 * var(--pad-l))}
.landscape img{display:block;width:100%;height:100vh;height:100svh;min-height:24rem;object-fit:cover}
.menu-left .landscape{margin-left:calc(-1 * (var(--pad-l) + var(--side) - var(--overlap)))}
.landscape figcaption{padding:.6rem var(--pad-l) 0}
/* 阿蘇の景色: スクロールに合わせて、中央から上下に開くように現れる（JSが動くときだけ） */
.landscape-media{overflow:hidden}
/* 阿蘇の景色: 写真が画面の中ほどに来たら、透けた状態から、色がつきながら現れる（約1.5秒）。外れると、透けた状態に戻る。大きさは変えない。JSが動くときだけ */
.js .landscape-media{opacity:0;filter:saturate(.15);transition:opacity .6s ease,filter .6s ease}
.js .landscape.is-visible .landscape-media{opacity:1;filter:none;transition:opacity 1.5s ease,filter 1.8s ease}
@media (prefers-reduced-motion:reduce){
  .js .landscape-media{opacity:1;filter:none;transition:none}
}



/* 固定ページの英文（段落のクラスに「en」を付ける） */
.entry-content .en{font-family:var(--serif-en);font-size:1.1rem;line-height:1.65;letter-spacing:.02em;color:var(--quiet)}

/* 写真の注釈: 美術書の図版のように、小さく、写真の下に添える */
figcaption,.entry-content figcaption{font-family:var(--serif-en);font-size:.8rem;line-height:1.55;letter-spacing:.01em;color:var(--quiet)}
figcaption em{font-style:italic}
.triptych figcaption,.domain-photo figcaption{margin-top:.55rem}
.triptych figcaption{min-height:2.7rem}

/* 2列組み（グループブロックの「追加CSSクラス」に two-col と入れる） */
.entry-content .two-col{column-count:2;column-gap:3.5rem;margin:0 0 3rem}
.entry-content .two-col>*{break-inside:avoid}
.entry-content .two-col h3,.entry-content .two-col h4{font-size:.8rem;font-weight:500;letter-spacing:.14em;line-height:1.8;margin:1.8rem 0 .2rem}
.entry-content .two-col>:first-child{margin-top:0}
.entry-content .two-col p{max-width:none;margin:0 0 .4rem;font-size:.92rem;line-height:1.9}
/* 長い文章の2列組み（美術書の索引のように）。見出しは小さく、文章は途中で次の列へ流れる。写真は、1列の幅で入り、注釈は写真の下に小さく出る */
.entry-content .two-col h2{font-size:.82rem;font-weight:500;letter-spacing:.14em;line-height:1.8;margin:2.2rem 0 .3rem;break-after:avoid}
.entry-content .two-col h3{break-after:avoid}
.entry-content .two-col p{break-inside:auto;orphans:2;widows:2}
.entry-content .two-col .two-col{column-count:1;column-gap:0;margin:0}
/* グループの中の「内側の箱」が1つだけあると、文章が全部その中に入って、2列に分かれない。箱を、ないものとして扱う */
.entry-content .two-col>.wp-block-group__inner-container{display:contents}
.entry-content .two-col p.en{font-size:1.02rem;line-height:1.65;margin-bottom:1rem}
.entry-content .two-col .wp-block-image,.entry-content .two-col figure{break-inside:avoid;margin:0 0 1.6rem}
.entry-content .two-col .wp-block-image img{display:block;width:100%;height:auto}


/* FAQ（ブロックの「詳細」）: 背景色は付けず、細い線で区切る */
.entry-content details{border-top:1px solid rgba(92,108,108,.45);padding:1.1rem 0}
.entry-content details:last-of-type{border-bottom:1px solid rgba(92,108,108,.45)}
.entry-content summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-weight:500;letter-spacing:.06em;line-height:1.8}
.entry-content summary::-webkit-details-marker{display:none}
/* FAQ: 質問が長いとき、英語は、途中で折り返さず、まとめて次の行に送る */
.entry-content summary .q{display:block}
.entry-content summary .q-en{display:inline-block;margin-left:.6em;font-family:var(--serif-en);font-size:.95em;color:var(--quiet);letter-spacing:.02em}

.entry-content summary::after{content:"+";font-family:var(--serif-en);font-size:1.5rem;line-height:1.3;color:var(--crust)}
.entry-content details[open] summary::after{content:"\2013"}
.entry-content details>*:not(summary){margin:.9rem 0 0}

/* FAQ: 2列組みのとき、「col-break」を付けた項目から右の列に移る（左=注文・発送、右=パンの内容） */
.entry-content details.col-break,.entry-content .faq-section.col-break{break-before:column}
/* FAQ: 大項目の見出し（列の先頭に置く） */
.entry-content .faq-section{margin:0 0 .5rem;padding:0 0 .2rem;border-bottom:0;color:var(--crust);font-size:.82rem;font-weight:500;letter-spacing:.1em;white-space:nowrap;break-inside:avoid;break-after:avoid}
.entry-content .faq-section.col-break{margin-top:0}
/* FAQ: 目に留めたい2項目（イタリアパン／おすすめの食べ方）。少し大きく、色と線で印象を変える */
.entry-content details.faq-feature summary .q-jp{font-weight:700;color:#3A4648}
.entry-content details.faq-feature summary .q-en{font-style:italic;font-weight:500;color:#3A4648}
.entry-content details.faq-feature summary::after{color:var(--crust)}


.entry-content details a,.entry-content .two-col a{text-decoration:underline;text-decoration-color:rgba(132,89,42,.5);text-underline-offset:.22em}
.entry-content details a:hover,.entry-content .two-col a:hover{color:var(--crust)}

/* FAQ: 左に日本語、右に英語（質問も答えも）。スマホでは縦に並ぶ */
.entry-content summary{position:relative;display:block;padding-right:2rem}
.entry-content summary::after{position:absolute;right:0;top:0}
.entry-content summary .q-en{margin-left:0}
.entry-content details>.qa{margin:.9rem 0 0}
.entry-content .qa p,.entry-content .qa ul{margin:0 0 .6rem;font-size:.92rem;line-height:1.9}
.entry-content .qa .en,.entry-content .qa .qa-en{font-family:var(--serif-en);font-size:1.02rem;line-height:1.65;color:var(--quiet)}
.entry-content .qa-head{color:var(--quiet);font-weight:500;letter-spacing:.08em}
.entry-content .qa-row-head{margin-top:1.3rem}
.entry-content .qa-row-head:first-child{margin-top:0}
.entry-content .qa-row-head p{margin-bottom:.3rem}
.entry-content .qa-head,.entry-content .qa-head.qa-en{font-style:italic}
.entry-content details[id]{scroll-margin-top:5rem}
.entry-content details{scroll-margin-top:4rem}
.entry-content .two-col,.entry-content .two-col details{overflow-anchor:none}
.entry-content .qa-head strong{font-weight:500;color:inherit}
.entry-content details strong{font-weight:500;color:var(--quiet)}
@media (min-width:701px){
  .entry-content summary .q{display:grid;grid-template-columns:1fr 1fr;column-gap:3rem;align-items:baseline}
  .entry-content summary .q-en{display:block;font-size:.95em}
  .entry-content details>.qa{padding-right:2rem}
  .entry-content .qa-row{display:grid;grid-template-columns:1fr 1fr;column-gap:3rem;align-items:start}
}

/* FAQ: タブレット（と、せまい画面）では、項目の列を1列にする（日本語と英語の左右は、そのまま） */
@media (max-width:1100px){
  .entry-content .two-col:has(>details){column-count:1;column-gap:0}
  .entry-content .two-col.faq-cols{column-count:1;column-gap:0}
  .entry-content details.col-break,.entry-content .faq-section.col-break{break-before:auto}
  .entry-content .faq-section.col-break{margin-top:2.2rem}
}

/* VISIT: 営業時間の表と、縦長の2枚の写真（大きい写真に、小さい写真が少し重なる） */
.entry-content .two-col.keep p{break-inside:avoid}
.entry-content .hours{margin:1.2rem 0 2.4rem}
.entry-content .hours table{border-collapse:collapse;width:100%;max-width:34rem}
.entry-content .hours td{padding:.55rem 1rem .55rem 0;border-top:1px solid rgba(92,108,108,.35);border-bottom:0;font-size:.95rem;line-height:1.7;vertical-align:top}
.entry-content .hours tr:last-child td{border-bottom:1px solid rgba(92,108,108,.35)}
.entry-content .hours td:first-child{white-space:nowrap;letter-spacing:.06em}
.entry-content .visit-photos{position:relative;display:grid;grid-template-columns:repeat(12,1fr);margin:3rem 0 4rem}
.entry-content .visit-photos>.wp-block-group__inner-container{display:contents}
.entry-content .visit-photos figure{margin:0}
.entry-content .visit-photos img{display:block;width:100%;height:auto;filter:sepia(.4) saturate(.55) brightness(1.08) contrast(.86)}
.entry-content .visit-photos .visit-photo-lg{grid-column:1/8;grid-row:1}
.entry-content .visit-photos .visit-photo-sm{grid-column:6/12;grid-row:1;align-self:end;margin-bottom:-2.5rem;margin-top:8rem;position:relative;z-index:1}
.entry-content .visit-photos figcaption{font-size:.8rem;line-height:1.7;letter-spacing:.06em;color:var(--quiet);margin-top:.5rem}
@media (max-width:700px){
  .entry-content .visit-photos .visit-photo-lg{grid-column:1/11}
  .entry-content .visit-photos .visit-photo-sm{grid-column:4/13;margin-top:-3rem;margin-bottom:0}
}

/* ボタン（LINEの友だち追加など）: 塗りなしの細い枠線 */
.entry-content .wp-block-button__link{display:inline-block;background:none;color:var(--ink);border:1px solid var(--ink);border-radius:0;padding:.7rem 1.8rem;font-family:var(--serif-en);font-size:1.05rem;letter-spacing:.1em;text-decoration:none;transition:color .2s,border-color .2s}
.entry-content .wp-block-button__link:hover{color:var(--crust);border-color:var(--crust)}

/* 薪窯: 大きな写真のあとに文章 */
.forno{margin:0 0 5rem}
.forno-photo{margin:0 0 1.75rem}
.forno-photo img,.forno-photo .plate{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;height:auto}
.forno-photo figcaption{margin-top:.55rem}
.forno-text{max-width:36em}
.forno-text h2{font-family:var(--serif-en);font-weight:500;font-size:1.4rem;letter-spacing:.05em;line-height:1.3;margin:0}
.forno-text .jp{display:block;font-family:var(--serif-jp);font-size:.8rem;letter-spacing:.2em;color:var(--quiet);margin:.2rem 0 1rem}
.forno-text p{margin:0 0 .75rem;font-size:.9rem;line-height:1.95}
.forno-text .en{font-family:var(--serif-en);font-size:1.05rem;line-height:1.55;color:var(--quiet)}

.order{margin:0 0 .3rem}
.order.en{font-family:var(--serif-en);font-size:1.05rem;color:var(--quiet)}

/* お問い合わせフォーム（Contact Form 7など）: 細い線のフォーム */
.entry-content label{display:block;margin:0 0 1.4rem;font-size:.85rem;letter-spacing:.06em}
.entry-content input[type=text],.entry-content input[type=email],.entry-content input[type=tel],.entry-content select,.entry-content textarea{display:block;width:100%;max-width:36em;margin-top:.4rem;padding:.7rem .8rem;background:transparent;color:var(--ink);border:1px solid rgba(92,108,108,.55);border-radius:0;font:inherit;font-size:1rem}
.entry-content textarea{min-height:9rem}
.entry-content input:focus,.entry-content select:focus,.entry-content textarea:focus{outline:none;border-color:var(--crust)}
.entry-content input[type=submit]{background:none;color:var(--ink);border:1px solid var(--ink);border-radius:0;padding:.7rem 2rem;font-family:var(--serif-en);font-size:1.05rem;letter-spacing:.1em;cursor:pointer;transition:color .2s,border-color .2s}
.entry-content input[type=submit]:hover{color:var(--crust);border-color:var(--crust)}
.wpcf7-not-valid-tip,.wpcf7-response-output{font-size:.85rem;color:var(--crust)}

/* トップの写真: 美術書の図版のように（薪窯の大きな1枚＋縦に並ぶ大きな3枚。写真は右・左・右に寄せ、説明は右）。パソコン */
.plates{display:none}
@media (min-width:861px){
  .layout-plates .plates{display:block;margin:3rem 0 5rem}
  .layout-plates .triptych,.layout-plates .domains,.layout-plates .forno{display:none}
  .plate-row{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:.6rem;align-items:end;margin:0 0 4rem}
  .plate-row:last-child{margin-bottom:2.5rem}
  .plate-big,.plate-item{margin:0;position:relative}
  .plate-big img,.plate-big .plate{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;height:auto}
  .plate-item{width:68%}
  .plate-row:nth-child(2) .plate-item,.plate-row:nth-child(4) .plate-item{justify-self:end}
  .plate-row:nth-child(3) .plate-item{justify-self:start}
  .plate-item .domain-media{aspect-ratio:4/5;overflow:hidden}
  .plate-item .domain-media>img,.plate-item .domain-media>.plate{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
  .plate-big figcaption,.plate-item figcaption{position:absolute;top:100%;left:0;right:0;margin-top:.5rem}
  .plate-text{padding:0 0 0 1.4rem}
  .plate-text h2{font-family:var(--serif-en);font-weight:500;font-size:1.4rem;letter-spacing:.05em;line-height:1.3;margin:0}
  .plate-text .jp{display:block;font-family:var(--serif-jp);font-size:.8rem;letter-spacing:.2em;color:var(--quiet);margin:.2rem 0 .8rem}
  .plate-text p{margin:0 0 .6rem;font-size:.9rem;line-height:1.95}
  .plate-text .en{font-family:var(--serif-en);font-size:1.05rem;line-height:1.55;color:var(--quiet)}
}
@media (min-width:861px){
  .home .wrap{max-width:none}
  .home .main{padding-right:1.2rem}
}

/* お知らせ（開いたときに出る）: 阿蘇の写真の壁紙で固定。白い大きめの四角。中央に、小さめの文章 */
.notice{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem;background-color:var(--paper);background-size:cover;background-position:center;background-repeat:no-repeat;animation:noticeIn .8s ease both}
.notice.is-closed,.notice-closed .notice{display:none}
body.notice-open{overflow:hidden}
.notice-closed body.notice-open{overflow:visible;overflow-x:hidden}
.notice-box{position:relative;box-sizing:border-box;width:min(42rem,100%);min-height:min(30rem,80vh);min-height:min(30rem,80svh);max-height:90vh;max-height:90svh;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3.5rem 2.5rem;background:#fff;text-align:center;color:var(--ink);outline:none;box-shadow:0 .6rem 2.2rem rgba(30,42,46,.12)}
.notice-logo{margin:0 0 1.8rem}
.notice-logo img{display:block;width:4.8rem;height:auto;margin:0 auto}
.notice-photo{margin:0 0 1.8rem;width:100%}
.notice-photo img{display:block;width:100%;max-height:34vh;object-fit:cover;margin:0 auto}
.notice-jp{margin:0 0 1.2rem;font-size:.9rem;line-height:2.1;letter-spacing:.08em}
.notice-en{margin:0 0 2.2rem;font-family:var(--serif-en);font-size:1rem;line-height:1.7;color:var(--quiet)}
.notice-sign{margin:0;font-family:var(--serif-en);font-size:.8rem;letter-spacing:.3em;color:var(--menu-color,#806028)}
.notice-close{position:absolute;top:.9rem;right:1.1rem;background:none;border:0;padding:.2rem .5rem;font-family:var(--serif-en);font-size:1.8rem;line-height:1;color:var(--ink);cursor:pointer}
.notice-close:hover{color:var(--crust)}
.notice-admin{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);background:var(--ink);color:var(--paper);border:0;padding:.55rem 1rem;font-size:.75rem;letter-spacing:.06em;cursor:pointer}
@keyframes noticeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.notice{animation:none}}
@media (max-width:600px){
  .notice{padding:1rem}
  .notice-box{padding:3rem 1.5rem 2.6rem;min-height:min(26rem,76vh);min-height:min(26rem,76svh)}
  .notice-logo img{width:4.2rem}
  .notice-jp{font-size:.86rem}
  .notice-en{font-size:.95rem}
}

/* 2列組みは、幅が700pxを超える画面（パソコン、タブレット）で。スマホは1列 */
@media (max-width:700px){
  .entry-content .two-col{column-count:1}
}

/* フッター */
.foot{margin-right:calc(var(--side) - 3rem);padding:0 clamp(1.5rem,6vw,6rem) 3rem 1rem;font-size:.8rem;color:var(--quiet)}
.menu-left .foot{margin-right:0;margin-left:calc(var(--side) - var(--overlap));padding-left:calc(1rem + var(--overlap))}
.foot ul{list-style:none;display:flex;gap:1.75rem;flex-wrap:wrap;margin:0 0 1rem;padding:0}
.foot a{text-decoration:none;font-family:var(--serif-en);font-size:1rem;letter-spacing:.06em;color:var(--ink)}
.foot a:hover{color:var(--crust)}
.foot p{margin:0}


/* スマホ: ロゴマークは縮めず、ヘッダーは透明のまま上に固定 */
@media (max-width:860px){
  :root{--side:0rem}
  .side,.menu-left .side{inset:0 0 auto 0;width:auto;height:4.5rem;padding:0 1.25rem;flex-direction:row;align-items:center;justify-content:space-between;pointer-events:none}
  .side>*{pointer-events:auto}
  .has-mark .wordmark:not(.has-img){visibility:hidden}
  .wordmark{font-size:1.5rem}
  .wordmark small{display:none}
  .fixed-mark{top:2.25rem;left:50%;transform:translate(-50%,-50%);width:var(--mark-m,9rem)}
  .menu-toggle{display:block;position:relative;z-index:2;width:2.75rem;height:2.75rem;background:none;border:0;cursor:pointer}
  .menu-toggle span{position:absolute;left:.35rem;right:.35rem;height:2px;background:var(--ink);transition:transform .2s,opacity .2s,top .2s}
  .menu-toggle span:nth-child(1){top:.85rem}
  .menu-toggle span:nth-child(2){top:1.3rem}
  .menu-toggle span:nth-child(3){top:1.75rem}
  .side.is-open .menu-toggle span:nth-child(1){top:1.3rem;transform:rotate(45deg)}
  .side.is-open .menu-toggle span:nth-child(2){opacity:0}
  .side.is-open .menu-toggle span:nth-child(3){top:1.3rem;transform:rotate(-45deg)}
  .site-nav{display:none;position:fixed;inset:0;z-index:1;background:rgba(var(--paper-rgb,238,241,239),.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:0 1.5rem;flex-direction:column;align-items:center;overflow-y:auto}
  .site-nav::before{display:none}
  .site-nav ul{position:static;margin:0;width:auto;padding:0;text-align:center}
  .side.is-open .site-nav{display:flex}
  .nav-brand{display:block;margin:5rem 0 0}
  .nav-brand img{display:block;width:4.6rem;height:auto}
  .site-nav .primary{margin-top:2rem}
  .site-nav .secondary{margin-top:2.2rem;padding-bottom:3rem}
  .site-nav .primary a{font-size:1.1rem;padding:.3rem 0;letter-spacing:.1em;color:var(--menu-color,#806028)}
  .site-nav .secondary a{font-size:.72rem;padding:.35rem 0;color:var(--menu-color,#806028)}
  .site-nav a .en,.site-nav a .jp{display:block}
  .site-nav .primary a .jp{font-size:.66rem;color:var(--menu-color,#806028);opacity:.78;margin-top:-.05rem;padding-bottom:.45rem}
  .wordmark.has-img img{max-width:3.4rem}
  .main,.menu-left .main{margin:0;padding:6.5rem 1.25rem 4rem}
  .foot,.menu-left .foot{margin:0;padding:0 1.25rem 2.5rem}
  .triptych{display:none}
  .entry-content .two-col{column-gap:2rem}
  :root{--pad-l:1.25rem;--overlap:0rem}
  .landscape{margin-bottom:3.5rem}
  .landscape img{height:80vh;height:80svh;min-height:20rem}
  .domains{grid-template-columns:1fr;gap:4rem}
  .domain-photo{display:block;width:100%;max-width:none;margin:1.75rem 0 0}
  .domain-media{aspect-ratio:4/5;overflow:hidden}
  .domain-media>img,.domain-media>.plate{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
  .lede .br-wide{display:none}
  .lede{margin-bottom:3.5rem}
  .domain-photo figcaption{margin:.5rem 0 0}
  figcaption,.entry-content figcaption{font-size:.7rem}
}
/* タブレット: 同じ大きさの正方形の写真を縦に、文章を横に（写真／文章、文章／写真…の交互）。余白は小さく */
@media (min-width:601px) and (max-width:860px){
  .lede{margin-bottom:2.5rem}
  .layout-plates .domains{display:block}
  .layout-plates .domains article{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:1.2rem;grid-template-rows:1fr repeat(4,auto) 1fr;margin:0 0 1rem}
  .layout-plates .domains article>.domain-photo{grid-column:1;grid-row:1 / span 6;margin:0}
  .layout-plates .domains article .domain-media{aspect-ratio:1/1}
  .layout-plates .domains article>h2{grid-column:2;grid-row:2;margin:0}
  .layout-plates .domains article>.jp{grid-column:2;grid-row:3;margin:.2rem 0 .6rem}
  .layout-plates .domains article>p{grid-column:2;grid-row:4;margin:0 0 .5rem;font-size:.85rem;line-height:1.85}
  .layout-plates .domains article>p.en{grid-column:2;grid-row:5;margin:0}
  .layout-plates .domains article:nth-child(even){grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  .layout-plates .domains article:nth-child(even)>.domain-photo{grid-column:2}
  .layout-plates .domains article:nth-child(even)>h2,
  .layout-plates .domains article:nth-child(even)>.jp,
  .layout-plates .domains article:nth-child(even)>p,
  .layout-plates .domains article:nth-child(even)>p.en{grid-column:1}
  .forno{margin-bottom:2rem}
  .forno-photo .domain-media{aspect-ratio:3/2}
}

/* スマホ: 同じ大きさの大きな写真。スクロールで画面の中ほどに来ると、文章が写真に重なって現れる（タップでも開閉） */
@media (max-width:600px){
  .domains{gap:2.4rem}
  .domains article>h2,.domains article>.jp,.domains article>p{display:none}
  .forno-text{display:none}
  .forno{margin-bottom:2.4rem}
  .forno-photo{margin:0}
  .domains{margin-bottom:3.5rem}
  .domain-photo{width:100%;margin:0}
  .domain-text{display:block;position:absolute;inset:0;overflow-y:auto;padding:1.1rem 1.1rem 1.2rem;background:rgba(var(--paper-rgb,238,241,239),.86);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .3s}
  .domain-photo.is-open .domain-text,.forno-photo.is-open .domain-text{opacity:1;pointer-events:auto}
  .domain-text .t{font-family:var(--serif-en);font-weight:500;font-size:1.35rem;letter-spacing:.05em;line-height:1.3;margin:0}
  .domain-text .jp{display:block;font-family:var(--serif-jp);font-size:.8rem;letter-spacing:.2em;color:var(--quiet);margin:.2rem 0 .7rem}
  .domain-text p{margin:0 0 .6rem;font-size:.92rem;line-height:1.8}
  .domain-text .en{font-family:var(--serif-en);font-size:1.05rem;line-height:1.5;color:var(--quiet)}
  .refrain{margin-top:1.5rem}
}
@media (max-width:600px) and (hover:hover){
  .domain-photo:hover .domain-text,.forno-photo:hover .domain-text{opacity:1;pointer-events:auto}
}

@media (max-width:860px) and (hover:hover){
  .site-nav .primary a,.site-nav .secondary a{display:inline-grid;justify-items:center}
  .site-nav a .en,.site-nav a .jp{grid-area:1/1;transition:opacity .25s}
  .site-nav a .jp{display:block;opacity:0;align-self:center}
  .site-nav .primary a .jp{margin-top:0;padding-bottom:0;font-size:.7rem;opacity:0}
  .site-nav a:hover .en,.site-nav a:focus-visible .en{opacity:0}
  .site-nav a:hover .jp,.site-nav a:focus-visible .jp{opacity:.9}
}


/* ゆっくり現れる（スクロールで画面に入ると、1秒ほどかけて浮かぶ）。JSが動くときだけ有効 */
.js :is(.lede h1,.lede .en,.triptych figure,.refrain,.domains article,.domain-photo,.plate-big,.plate-item,.plate-text,.forno-photo,.forno-text,.profile,.order,.entry h1,.entry-content>*,.entry-list li){opacity:0;transform:translateY(.5rem);transition:opacity 1.1s ease,transform 1.1s ease}
.js :is(.lede h1,.lede .en,.triptych figure,.refrain,.domains article,.domain-photo,.plate-big,.plate-item,.plate-text,.forno-photo,.forno-text,.profile,.order,.entry h1,.entry-content>*,.entry-list li).is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js :is(.lede h1,.lede .en,.triptych figure,.refrain,.domains article,.domain-photo,.plate-big,.plate-item,.plate-text,.forno-photo,.forno-text,.profile,.order,.entry h1,.entry-content>*,.entry-list li){opacity:1;transform:none;transition:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}


/* FAQ: タブレット・スマホでは、先頭に大項目へのジャンプ見出しを2つ並べる */
.faq-jump{display:none}
@media (max-width:1100px){
  .entry-content .faq-jump{display:flex;gap:1.6rem;flex-wrap:wrap;margin:0 0 1.6rem;padding:0 0 .7rem;border-bottom:1px solid var(--crust);column-span:all}
  .entry-content .faq-jump a{color:var(--crust);font-size:.88rem;font-weight:500;letter-spacing:.1em;text-decoration:none;border-bottom:1px solid transparent}
  .entry-content .faq-jump a:hover{border-bottom-color:var(--crust)}
  .entry-content .faq-section{scroll-margin-top:5rem}
  .entry-content .faq-jump+.faq-section{display:none}
  .entry-content .faq-jump a{white-space:nowrap}
}