/* Pain de Bois 共通スタイル（見た目のルール：案B 夜のベーカリー） */
:root{
  --bg:#1d1814;--panel:#29221c;--panel2:#3a3029;--ink:#efe6d8;--sub:#b5a690;--gold:#c9a46a;--foot:#141110;
  --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --sans:"Yu Gothic","YuGothic","Hiragino Sans","Noto Sans JP",sans-serif;
  --wrap:1160px;--sec:120px;--side:32px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}
.min{font-family:var(--serif);font-weight:500}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--side)}
.sec{padding:var(--sec) 0}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:var(--gold);color:#000;padding:8px}

/* 仮の値・仮の画像の印 */
.kari{display:inline-block;font-size:12px;line-height:1;padding:3px 6px;border:1px solid var(--gold);color:var(--gold);border-radius:2px;margin-left:6px;vertical-align:middle;font-family:var(--sans)}
.pic{position:relative;overflow:hidden;background:var(--panel2)}
.pic .temp{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:3px 8px;border-radius:2px;line-height:1.5}
.slant{clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
.slant .temp{right:12%}
.cut .temp{top:10px;bottom:auto}

/* ヘッダー */
.head{position:sticky;top:0;z-index:40;background:rgba(29,24,20,.94);border-bottom:1px solid var(--panel2)}
.head .wrap{display:flex;justify-content:space-between;align-items:center;height:72px;max-width:none;padding:0 40px}
.logo{font-family:var(--serif);font-size:24px;letter-spacing:.1em;text-decoration:none;color:var(--gold)}
.gnav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:30px}
.gnav a{font-size:13px;letter-spacing:.16em;text-decoration:none;color:var(--sub);display:inline-flex;flex-direction:column;align-items:center;line-height:1.4;min-height:44px;justify-content:center}
.gnav a small{font-size:12px;letter-spacing:.08em;opacity:.8}
.gnav a:hover,.gnav a[aria-current=page]{color:var(--gold)}
.gnav .ig{width:22px;height:22px}
.menu-btn{display:none;background:none;border:1px solid var(--panel2);color:var(--ink);width:48px;height:48px;border-radius:2px;cursor:pointer}
.menu-btn span{display:block;width:20px;height:1px;background:currentColor;margin:5px auto}

/* 右下の丸いボタン */
.round{position:fixed;right:28px;bottom:36px;z-index:30;width:96px;height:96px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:.14em;text-decoration:none;background:rgba(29,24,20,.88)}

/* 見出し */
.en{font-family:var(--serif);font-weight:400;letter-spacing:.2em;font-size:clamp(26px,3vw,36px);line-height:1.2;margin:0;color:var(--gold)}
.ja{display:block;color:var(--sub);font-size:13px;margin-top:10px;letter-spacing:.14em;font-family:var(--sans)}
.lead{font-size:16px;line-height:2.4;margin:30px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gold);color:var(--gold);padding:12px 34px;min-height:46px;text-decoration:none;font-size:14px;letter-spacing:.14em;margin:8px 10px 0 0;transition:background .3s,color .3s}
.btn:hover{background:var(--gold);color:var(--bg)}
.btn.fill{background:var(--gold);color:var(--bg)}

/* トップの最初の画面 */
.hero{display:grid;grid-template-columns:1fr 1.35fr;min-height:calc(100vh - 72px)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:60px 6vw}
.hero-copy .tag{color:var(--gold);letter-spacing:.3em;font-size:12px;margin-bottom:28px}
.hero-copy h1{font-size:clamp(28px,3.4vw,44px);line-height:1.75;margin:0 0 20px;letter-spacing:.08em;font-weight:500}
.hero-copy p{color:var(--sub);font-size:14px;letter-spacing:.1em;margin:0}
.hero-pic{position:relative;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 2s ease}.slide.on{opacity:1}
.slide img{animation:zoom 14s ease-out infinite alternate}
@keyframes zoom{from{transform:scale(1.1)}to{transform:scale(1)}}

/* 下層ページの見出し */
.page-head{position:relative;height:56vh;min-height:360px;overflow:hidden}
.page-head::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,16,13,.85) 0%,rgba(20,16,13,.35) 60%,rgba(20,16,13,.1) 100%)}
.page-head .txt{position:absolute;left:0;right:0;bottom:12%;z-index:2}
.page-head h1{margin:0}

/* 2列（文章と写真） */
.two{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.two .pic{height:440px}
.row{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;margin:80px 0}
.row.rev{grid-template-columns:1fr 1.1fr}.row.rev .pic{order:2}
.row .pic{height:400px}
.row h3{font-size:30px;margin:0;font-family:var(--serif);font-weight:500}
.row small.enl{color:var(--gold);letter-spacing:.14em;font-size:13px}
.row p,.row dd{color:var(--sub)}
dl.spec{margin:16px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px}
dl.spec dt{color:var(--gold);font-size:13px;letter-spacing:.1em}dl.spec dd{margin:0}

/* 3列 */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:60px}
.three .pic{height:300px}
.three .num{color:var(--gold);font-family:var(--serif);font-size:14px;letter-spacing:.2em;margin-top:24px}
.three h3{margin:6px 0 10px;font-size:22px;font-family:var(--serif);font-weight:500}
.three p{color:var(--sub);font-size:15px;margin:0}
.cut{clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}

/* 帯（面） */
.band{background:var(--panel)}
.notice{border:1px solid var(--panel2);padding:28px 32px;color:var(--sub)}
.notice strong{color:var(--ink);font-family:var(--serif);font-weight:500;font-size:18px;display:block;margin-bottom:6px}

/* 食べ方 */
.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:50px}
.tip{border-top:1px solid var(--gold);padding-top:22px}
.tip svg{width:44px;height:44px;stroke:var(--gold);fill:none;stroke-width:1.4}
.tip h3{font-family:var(--serif);font-weight:500;font-size:20px;margin:12px 0 8px}
.tip p,.tip li{color:var(--sub);font-size:15px}
.tip ul{padding-left:1.2em;margin:0}

/* 情報の表 */
table.info{width:100%;border-collapse:collapse}
table.info th,table.info td{border-bottom:1px solid var(--panel2);padding:18px 8px;text-align:left;vertical-align:top}
table.info th{width:9em;color:var(--gold);font-weight:400;letter-spacing:.1em;font-size:14px}
.map{width:100%;height:420px;border:0;filter:grayscale(.4) brightness(.85)}

/* 写真リンク */
.links{display:grid;grid-template-columns:repeat(3,1fr)}
.links a{position:relative;height:300px;overflow:hidden;text-decoration:none;display:block}
.links a::after{content:"";position:absolute;inset:0;background:rgba(20,16,13,.55);transition:background .4s}
.links a:hover::after{background:rgba(20,16,13,.3)}
.links span{position:absolute;left:28px;bottom:26px;z-index:2;font-family:var(--serif);color:var(--ink);font-size:26px;letter-spacing:.16em;line-height:1.3}
.links span small{display:block;font-family:var(--sans);font-size:13px;color:var(--sub);letter-spacing:.1em}

/* フッター */
.foot{background:var(--foot);color:var(--sub);padding:80px 0 60px;font-size:14px;border-top:1px solid var(--panel2)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px}
.foot .logo{display:inline-block;margin-bottom:16px}
.foot .btn{color:var(--ink);border-color:#5a4c3e}
.foot nav ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.foot nav a{text-decoration:none;display:inline-block;min-height:44px;line-height:44px}
.copy{margin-top:40px;font-size:12px}

/* スマホ下の固定ボタン */
.spbar{display:none}

/* 動き：ふわっと出る */
.fade{opacity:0;transform:translateY(24px);transition:opacity 1.1s ease,transform 1.1s ease}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.slide img{animation:none}.fade{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media (max-width:900px){
  :root{--sec:80px;--side:20px}
  .head .wrap{height:64px;padding:0 20px}
  .menu-btn{display:block}
  .gnav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--panel2)}
  .gnav.open{display:block}
  .gnav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px}
  .gnav a{flex-direction:row;justify-content:space-between;width:100%;padding:10px 0;border-bottom:1px solid var(--panel2);font-size:15px}
  .round{display:none}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-pic{height:56vh;order:-1}
  .hero-copy{padding:40px 20px}
  .two,.row,.row.rev{grid-template-columns:1fr;gap:24px}
  .row{margin:50px 0}.row.rev .pic{order:0}
  .two .pic,.row .pic{height:260px}
  .three,.tips{grid-template-columns:1fr}
  .three .pic{height:230px}
  .links{grid-template-columns:1fr}.links a{height:200px}
  .foot-grid{grid-template-columns:1fr}
  .foot{padding-bottom:110px}
  .page-head{height:46vh}
  .map{height:300px}
  table.info th{width:6.5em}
  .spbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--foot);border-top:1px solid var(--gold)}
  .spbar a{flex:1;text-align:center;padding:16px 0;text-decoration:none;color:var(--gold);font-size:15px;letter-spacing:.1em}
  .spbar a+a{border-left:1px solid var(--panel2)}
}

/* Instagramのマークのボタン */
.ig-btn{padding:0;width:46px;min-width:46px}
.ig-btn .ig{width:22px;height:22px}

/* ===== 分かりやすい動き（2026-10-16 追加） ===== */
/* 1. 最初の画面：一言が下から順に現れる */
.hero-copy>*{opacity:0;transform:translateY(30px);animation:rise 1.2s cubic-bezier(.2,.7,.2,1) forwards}
.hero-copy .tag{animation-delay:.2s}.hero-copy h1{animation-delay:.5s}.hero-copy p{animation-delay:.9s}
@keyframes rise{to{opacity:1;transform:none}}
/* 2. 英字の見出し：下に金色の線がすっと伸びる */
.en{position:relative}
.en::after{content:"";display:block;width:0;height:1px;background:var(--gold);margin-top:14px;transition:width 1.2s .3s ease}
.fade.in .en::after,.en.fade.in::after{width:64px}
/* 3. 看板のパンなどの写真：左右から滑り込む */
.row.fade{opacity:1;transform:none}
.row.fade .pic{opacity:0;transform:translateX(-90px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.row.rev.fade .pic{transform:translateX(90px)}
.row.fade>div:not(.pic){opacity:0;transform:translateY(24px);transition:opacity 1s .35s ease,transform 1s .35s ease}
.row.fade.in .pic,.row.fade.in>div:not(.pic){opacity:1;transform:none}
/* 4. 2列の写真：幕が開くように現れる */
.two>.pic.fade{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1)}
.two>.pic.fade.in{clip-path:inset(0 0 0 0)}
.two>.pic.slant.fade{clip-path:polygon(8% 0,8% 0,0 100%,0 100%)}
.two>.pic.slant.fade.in{clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
/* 5. 3つのこだわり：順番に現れる */
.three>.fade:nth-child(2){transition-delay:.2s}.three>.fade:nth-child(3){transition-delay:.4s}
/* 写真リンク：近づくと写真が少し大きくなる */
.links img{transition:transform .8s ease}.links a:hover img{transform:scale(1.06)}

@media (prefers-reduced-motion:reduce){
  .hero-copy>*{animation:none;opacity:1;transform:none}
  .en::after{width:64px;transition:none}
  .row.fade .pic,.row.fade>div:not(.pic){opacity:1;transform:none;transition:none}
  .two>.pic.fade{clip-path:none;transition:none}
}
main{overflow-x:clip} /* 滑り込む前の写真で横にはみ出さないように */
/* ボタンの高さと縦位置をそろえる（文字のボタンとInstagramのマーク） */
.btn{height:48px;padding:0 34px;vertical-align:top;line-height:1}
.ig-btn{width:48px;padding:0}


/* ===== 改行と文の切り方（日本語の折り返しを整える） ===== */
body {
  word-break: auto-phrase;      /* 言葉のかたまりで折り返し、言葉の途中で切らない（対応ブラウザー） */
  line-break: strict;           /* 句読点や「ー」を行の頭に置かない */
}
h1, h2, h3, h4 { text-wrap: balance; }   /* 複数行のとき行の長さをそろえる */
p, li, dd, td, figcaption, blockquote { text-wrap: pretty; }   /* 最後の行に1〜2文字だけ残るのを防ぐ */
.nobr { display: inline-block; }
@media (max-width: 767px) { .pc-only { display: none; } }