/* 麦と灯（制作見本）の見た目。sample01_wp/build.py で作成 */
  :root{
    --green:#3E5B3A;
    --green-soft:#5f7a59;
    --green-line:rgba(62,91,58,.28);
    --brown:#8B5A2B;
    --cream:#F7F3EA;
    --cream-deep:#efe8d9;
    --paper:#fbf9f4;
    --ink:#2d2a24;
    --mute:#6c655a;
    --serif:'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    --en:'Cormorant Garamond', serif;
    --col:640px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--serif);color:var(--ink);background:var(--cream);line-height:2.05;letter-spacing:.06em;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  img{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}

  /* ---------- 制作見本の帯（細い1行。スマホで収まらない時は2行） ---------- */
  .notice{
    position:relative;z-index:60;background:var(--green);color:#f3efe4;
    font-size:12px;line-height:1.6;text-align:center;padding:5px 16px;letter-spacing:.06em;
  }

  /* ---------- 開いた瞬間の演出 ---------- */
  .opening{
    position:fixed;inset:0;z-index:100;background:var(--cream);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
    transition:opacity .9s ease .1s, visibility 0s linear 1s;
  }
  .opening.done{opacity:0;visibility:hidden;}
  .opening .lattice-draw{display:flex;gap:9px;height:120px;}
  .opening .lattice-draw i{width:2px;background:var(--green);transform:scaleY(0);transform-origin:top;animation:drawDown .9s cubic-bezier(.7,0,.2,1) forwards;}
  .opening .lattice-draw i:nth-child(n){animation-delay:calc(var(--n) * 60ms);}
  @keyframes drawDown{to{transform:scaleY(1);}}
  .opening .mark{font-size:34px;letter-spacing:.5em;padding-left:.5em;color:var(--green);opacity:0;animation:fadeUp 1s ease .9s forwards;}
  .opening .mark-en{font-family:var(--en);font-size:14px;letter-spacing:.5em;color:var(--brown);opacity:0;animation:fadeUp 1s ease 1.2s forwards;}
  @keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

  /* ---------- 両側の格子の帯（町家の格子） ---------- */
  .lattice{
    position:fixed;top:0;bottom:0;width:calc((100vw - var(--col)) / 2 - 150px);max-width:110px;z-index:5;pointer-events:none;
    background:repeating-linear-gradient(90deg, var(--green-line) 0 1.5px, transparent 1.5px 12px);
    -webkit-mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
            mask-image:linear-gradient(transparent, #000 12%, #000 88%, transparent);
    opacity:0;transition:opacity 1s ease;
  }
  body.scrolled .lattice{opacity:1;}
  .lattice.l{left:calc((100vw - var(--col)) / 2 - 150px);transform:translateX(-100%);}
  .lattice.r{right:calc((100vw - var(--col)) / 2 - 150px);transform:translateX(100%);}

  /* ---------- 両側の余白の演出（トップ・広い画面だけ） ---------- */
  :root:has(.side-deco){--col:600px;}   /* 中央の列を少し狭め、両側の余白を広げる */
  .side-deco{--S:calc((100vw - var(--col)) / 2);position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity 1.2s ease;}
  body.scrolled .side-deco{opacity:1;}
  .footer-visible .side-deco{opacity:0;}
  .side-r{position:absolute;top:0;bottom:0;right:0;width:var(--S);}
  /* 格子：町家の格子戸のように、中央の列の近くへ寄せ、横の桟がスクロールでゆっくり動く */
  :root:has(.side-deco) .lattice{width:min(90px, calc((100vw - var(--col)) / 2 * .26));
    background:
      repeating-linear-gradient(0deg, transparent 0 176px, var(--green-line) 176px 178px),
      repeating-linear-gradient(90deg, var(--green-line) 0 1.5px, transparent 1.5px 12px);
    background-position:0 var(--latY,0px), 0 0;}
  :root:has(.side-deco) .lattice.l{left:calc((100vw - var(--col)) / 2 - 56px);}
  :root:has(.side-deco) .lattice.r{display:none;}
  /* 左は、流れ落ちる光と、触れると揺れる格子をまとめて描く（CSSの格子の代わり） */
  :root:has(.side-canvas) .lattice.l{display:none;}
  .side-canvas{position:absolute;left:0;top:0;}   /* 右は麦と店名の場所にするため、格子は左だけ */

  /* 右：今の章の名前と、スクロールで育つ麦 */
  .sec-mark{position:absolute;top:13vh;right:40px;display:flex;flex-direction:column;align-items:center;gap:14px;}
  .sec-no{font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--brown);}
  .sec-word{writing-mode:vertical-rl;font-family:var(--en);font-size:min(30px, 3.6vh);letter-spacing:.42em;color:var(--green);opacity:.55;transition:opacity .45s ease, transform .45s ease;}
  .sec-word.swap{opacity:0;transform:translateY(12px);}
  .wheat{position:absolute;bottom:0;right:104px;width:min(170px, calc(var(--S) - 150px));height:64vh;overflow:visible;}
  .wheat .stalk,.wheat .breeze{transform-box:fill-box;transform-origin:50% 100%;}
  .wheat .stalk{transform:rotate(calc(var(--sw,0) * var(--k) * 1deg));}
  .wheat .breeze{animation:breeze 7s ease-in-out infinite;}
  .wheat .stalk:nth-child(2) .breeze{animation-duration:8.5s;animation-delay:-2s;}
  .wheat .stalk:nth-child(3) .breeze{animation-duration:6.2s;animation-delay:-4s;}
  @keyframes breeze{0%,100%{transform:rotate(-1deg);}50%{transform:rotate(1.2deg);}}
  .wheat .stem,.wheat .leaf{fill:none;stroke:var(--green-soft);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:1;opacity:.7;}
  .wheat .stem{stroke-dashoffset:calc(1 - min(1, var(--g,0) * 1.9));}
  .wheat .leaf{stroke-width:1.1;stroke-dashoffset:calc(1 - min(1, max(0, var(--g,0) * 2.4 - .5)));}
  .wheat .grain{fill:rgba(214,176,112,.55);stroke:var(--brown);stroke-width:.8;transform-box:fill-box;transform-origin:50% 100%;
    opacity:clamp(0, calc((var(--g,0) - var(--t)) * 9), 1);transform:scale(clamp(.2, calc(.2 + (var(--g,0) - var(--t)) * 7), 1));}
  .wheat .awn{stroke:var(--brown);stroke-width:.55;stroke-linecap:round;opacity:clamp(0, calc((var(--g,0) - var(--t)) * 6 * .6), .6);}

  /* ---------- 右側の縦書きの店名 ---------- */
  .v-name{
    position:fixed;right:34px;bottom:40px;z-index:40;writing-mode:vertical-rl;
    font-size:46px;line-height:1.1;letter-spacing:.18em;color:var(--green);
    text-shadow:0 0 18px var(--cream), 0 0 2px var(--cream);
  }
  .v-name small{display:block;font-family:var(--en);font-size:12px;letter-spacing:.4em;color:var(--brown);margin-top:14px;}
  .v-name{transition:opacity .5s,color .5s;}
  .footer-visible .v-name{opacity:0;}
  .hero-visible .v-name{color:#f7f3ea;text-shadow:0 2px 20px rgba(0,0,0,.55);}
  .hero-visible .v-name small{color:#efe3cf;}

  /* ---------- 左下のお知らせボタン ---------- */
  .float-news{
    position:fixed;left:22px;bottom:22px;z-index:40;display:flex;align-items:center;gap:14px;
    background:var(--paper);border:1px solid var(--green);border-radius:40px;padding:11px 22px 11px 24px;
    font-size:13px;color:var(--green);box-shadow:0 8px 24px rgba(45,42,36,.12);
    opacity:0;transform:translateY(14px);pointer-events:none;
    transition:background .3s,color .3s,opacity .6s,transform .6s;
  }
  body.scrolled .float-news{opacity:1;transform:none;pointer-events:auto;}
  .float-news:hover{background:var(--green);color:var(--cream);}
  .float-news .arrow{width:22px;height:1px;background:currentColor;position:relative;}
  .float-news .arrow::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);}

  /* ---------- メインビジュアル（写真が切り替わる） ---------- */
  .hero{position:relative;height:calc(100vh - 38px);min-height:560px;overflow:hidden;background:#2b271f;}
  .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease;}
  .slide.on{opacity:1;}
  .slide .ph{position:absolute;inset:0;}
  .slide img{width:100%;height:100%;object-fit:cover;}
  /* Ken Burns：写真が見えている間（消えていく間も）ゆっくり動き続ける。写真ごとに向きを変える */
  .slide img, .slide .ph-fallback{will-change:transform;}
  .slide.kb img, .slide.kb .ph-fallback{animation:var(--kb) 8.6s linear forwards;}
  .slide[data-kb="in-right"]{--kb:kbInRight;}
  .slide[data-kb="out-left"]{--kb:kbOutLeft;}
  .slide[data-kb="in-up"]{--kb:kbInUp;}
  @keyframes kbInRight{from{transform:scale(1.02) translate(0,0);}to{transform:scale(1.2) translate(-3%,-1.5%);}}
  @keyframes kbOutLeft{from{transform:scale(1.22) translate(2.5%,1.5%);}to{transform:scale(1.03) translate(0,0);}}
  @keyframes kbInUp{from{transform:scale(1.04) translate(-1%,2%);}to{transform:scale(1.2) translate(1.5%,-2%);}}
  .ph-fallback{
    position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 110px 48px 0;
    font-size:12px;letter-spacing:.2em;color:rgba(247,243,234,.55);
  }
  .ph-fallback.a{background:radial-gradient(120% 90% at 80% 30%, #b7925f 0%, #6d4d2d 45%, #2e2419 100%);}
  .ph-fallback.b{background:radial-gradient(120% 90% at 60% 60%, #a7b387 0%, #5b6b45 45%, #232a1d 100%);}
  .hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, rgba(20,17,12,.62) 0%, rgba(20,17,12,.25) 45%, rgba(20,17,12,0) 70%);pointer-events:none;}
  .hero-copy{position:absolute;left:clamp(24px,7vw,110px);top:50%;transform:translateY(-50%);z-index:3;color:#f7f3ea;display:flex;gap:44px;align-items:flex-start;}
  .hero-catch{writing-mode:vertical-rl;font-size:clamp(30px,4vw,48px);font-weight:500;letter-spacing:.22em;line-height:1.7;text-shadow:0 2px 24px rgba(0,0,0,.45);}
  .tcy{text-combine-upright:all;}
  .hero-tags{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
  .hero-tags span{align-self:flex-start;font-size:13.5px;letter-spacing:.14em;padding:3px 12px;border:1px solid rgba(247,243,234,.7);background:rgba(20,17,12,.25);}
  .hero-dots{position:absolute;left:clamp(24px,7vw,110px);bottom:62px;z-index:3;display:flex;gap:10px;}
  .hero-dots i{width:28px;height:2px;background:rgba(247,243,234,.35);overflow:hidden;position:relative;}
  .hero-dots i.on::after{content:'';position:absolute;inset:0;background:#f7f3ea;transform-origin:left;animation:dotBar 6s linear forwards;}
  @keyframes dotBar{from{transform:scaleX(0);}to{transform:scaleX(1);}}
  .hero-arch{position:absolute;left:0;right:0;bottom:-2px;height:70px;z-index:2;}
  .hero-arch svg{width:100%;height:100%;display:block;}

  /* ---------- 中央の列 ---------- */
  main{position:relative;z-index:10;}
  .col{max-width:var(--col);margin:0 auto;padding:0 28px;}
  section{padding:110px 0;}
  .label{display:block;text-align:center;font-family:var(--en);font-size:15px;letter-spacing:.55em;padding-left:.55em;color:var(--brown);margin-bottom:10px;}
  .h2{text-align:center;font-size:clamp(22px,3vw,28px);font-weight:500;letter-spacing:.2em;padding-left:.2em;color:var(--green);margin-bottom:46px;}
  p{font-size:15.5px;}

  /* はじめに */
  .intro{text-align:center;}
  .intro .v-lead{
    writing-mode:vertical-rl;margin:0 auto 56px;height:15em;font-size:24px;letter-spacing:.24em;line-height:2.2;color:var(--green);
  }
  .intro p + p{margin-top:1.3em;}
  .rule{width:1px;height:70px;background:var(--green-line);margin:60px auto 0;}

  /* D：写真2枚を少しずらして重ねる */
  .duo{position:relative;margin:64px 0 10px;height:clamp(300px,58vw,440px);}
  .duo figure{position:absolute;overflow:hidden;border-radius:3px;box-shadow:0 22px 44px rgba(45,42,36,.18);}
  .duo img{width:100%;height:100%;object-fit:cover;}
  .duo-a{left:0;top:0;width:70%;height:74%;}
  .duo-a img{object-position:70% 50%;}
  .duo-b{right:0;bottom:0;width:50%;height:60%;border:6px solid var(--cream);}
  .duo-b img{object-position:78% 60%;}
  .duo-cap{position:absolute;left:0;bottom:4px;width:46%;text-align:left;font-size:13px;line-height:1.9;color:var(--mute);}
  .rv-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1);}
  .rv-clip.in{clip-path:inset(0 0 0 0);}
  .rv-clip img{transform:scale(1.12);transition:transform 2s cubic-bezier(.16,.8,.2,1);}
  .rv-clip.in img{transform:none;}
  .duo-b.rv-clip{transition-delay:.25s;}
  .duo-b.rv-clip img{transition-delay:.25s;}

  /* A：店主のひと言 */
  .quote{margin:0 auto 54px;max-width:520px;padding:30px 0 26px;border-top:1px solid var(--green-line);border-bottom:1px solid var(--green-line);text-align:center;}
  .quote p{font-size:clamp(19px,2.6vw,25px);font-weight:500;letter-spacing:.14em;color:var(--green);line-height:1.8;}
  .quote cite{display:block;margin-top:10px;font-style:normal;font-size:12.5px;letter-spacing:.3em;color:var(--brown);}

  /* B：3つの数字 */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);margin:66px 0 0;}
  .stat{padding:10px 8px 4px;border-left:1px solid var(--green-line);text-align:center;}
  .stat:first-child{border-left:none;}
  .stat .num{font-family:var(--en);font-size:clamp(44px,7vw,62px);line-height:1;color:var(--green);font-variant-numeric:tabular-nums;}
  .stat .unit{font-size:15px;color:var(--green);margin-left:4px;letter-spacing:.1em;}
  .stat .cap{margin-top:14px;font-size:12.5px;line-height:1.8;color:var(--mute);letter-spacing:.06em;}

  /* C：麦と灯の一日 */
  .day{margin-top:90px;text-align:left;}
  .day-head{text-align:center;margin-bottom:34px;}
  .day-head .label{margin-bottom:6px;}
  .day-head h3{font-size:21px;font-weight:500;letter-spacing:.22em;padding-left:.22em;color:var(--green);}
  .day-list{list-style:none;position:relative;padding-left:0;}
  .day-list::before,.day-list::after{content:'';position:absolute;left:118px;top:14px;width:1px;}
  .day-list::before{bottom:14px;background:var(--green-line);}
  .day-list::after{height:var(--draw,0%);max-height:calc(100% - 28px);background:linear-gradient(var(--brown),var(--green));transition:height .15s linear;}
  .day-list li{display:grid;grid-template-columns:118px 1fr;gap:0 30px;padding:0 0 30px;position:relative;}
  .day-list li:last-child{padding-bottom:0;}
  .day-list time{font-size:13.5px;letter-spacing:.08em;color:var(--mute);text-align:right;padding-right:22px;line-height:2;transition:color .5s;}
  .day-list li::before{content:'';position:absolute;left:113px;top:9px;width:11px;height:11px;border-radius:50%;background:var(--cream);border:1px solid var(--green-line);z-index:2;transition:background .5s,border-color .5s,transform .5s;}
  .day-list li.lit::before{background:var(--brown);border-color:var(--brown);transform:scale(1.15);}
  .day-list li.lit time{color:var(--brown);}
  .day-list p{font-size:14.5px;line-height:2;}

  /* アーチ型の写真＋見出し */
  .arch{position:relative;aspect-ratio:4/3.1;border-radius:220px 220px 6px 6px;overflow:hidden;margin-bottom:44px;background:var(--cream-deep);}
  .arch img,.arch .ph-box{width:100%;height:100%;object-fit:cover;}
  .arch .ph-box{display:flex;align-items:flex-end;justify-content:center;padding-bottom:22px;font-size:12px;letter-spacing:.18em;color:var(--mute);
    background:
      repeating-linear-gradient(90deg, rgba(62,91,58,.08) 0 1px, transparent 1px 18px),
      radial-gradient(90% 80% at 50% 35%, #efe4cc 0%, #e2d3b4 60%, #d3c09a 100%);}
  .arch::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.18), transparent 40%);pointer-events:none;}
  .arch .over{position:absolute;left:0;right:0;top:34px;z-index:2;text-align:center;font-family:var(--en);font-size:clamp(20px,5vw,40px);letter-spacing:.6em;padding-left:.6em;white-space:nowrap;color:#fbf8f1;text-shadow:0 2px 16px rgba(0,0,0,.35);}

  /* こだわり */
  .kodawari-list{display:grid;gap:34px;margin-bottom:44px;}
  .k-item{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;padding-top:28px;border-top:1px solid var(--green-line);}
  .k-num{font-family:var(--en);font-size:34px;line-height:1;color:var(--brown);}
  .k-item h3{font-size:18px;font-weight:600;letter-spacing:.12em;color:var(--green);margin-bottom:8px;line-height:1.7;}

  /* メニューのカード */
  .menu-lead{text-align:center;margin-bottom:40px;}
  .cards{display:grid;grid-template-columns:1fr 1fr;gap:34px 24px;margin-bottom:22px;}
  .card{position:relative;}
  .card .pic{position:relative;aspect-ratio:1/1;border-radius:4px;overflow:hidden;background:var(--cream-deep);}
  .card .pic img,.card .pic .ph-box{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,.8,.2,1);}
  .card:hover .pic img,.card:hover .pic .ph-box{transform:scale(1.05);}
  .card .ph-box{display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;font-size:11.5px;letter-spacing:.12em;line-height:1.8;color:var(--mute);
    background:radial-gradient(80% 70% at 50% 45%, #f1e6cf 0%, #e3d2ae 70%, #d6c196 100%);}
  .card .ph-box.green{background:radial-gradient(80% 70% at 50% 45%, #e3e7cf 0%, #c9d1a8 70%, #b0bc88 100%);}
  .pic-wrap{position:relative;}
  .badge{
    position:absolute;right:10px;bottom:-18px;z-index:2;width:62px;height:62px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.35;
    font-size:11.5px;letter-spacing:.08em;color:var(--cream);background:var(--green);border:3px solid var(--cream);
  }
  .badge.brown{background:var(--brown);}
  .card h3{margin-top:22px;font-size:16.5px;font-weight:600;letter-spacing:.1em;color:var(--green);line-height:1.6;}
  .card .price{font-size:14px;color:var(--brown);letter-spacing:.08em;margin:2px 0 6px;}
  .card p{font-size:13.5px;line-height:1.95;color:var(--mute);}
  .tax{text-align:right;font-size:12px;color:var(--mute);margin-bottom:40px;}

  /* 定番のパン：横にスライドする列（画面の幅いっぱい） */
  .rail-wrap{width:100vw;margin-left:calc(50% - 50vw);position:relative;}
  .rail{
    --pad:max(28px, calc((100vw - var(--col)) / 2 + 28px));
    display:flex;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-padding-inline:var(--pad);
    padding:4px var(--pad) 34px;scrollbar-width:none;cursor:grab;
  }
  .rail::-webkit-scrollbar{display:none;}
  .rail.dragging{cursor:grabbing;}
  .rail.dragging .card{pointer-events:none;}
  .rail .card{flex:0 0 min(270px,74vw);background:var(--cream);}   /* 両側の演出の上を、パンの列が通り過ぎるように */
  .rail:focus-visible{outline:2px solid var(--green);outline-offset:4px;}
  .rail-ui{display:flex;align-items:center;gap:18px;max-width:var(--col);margin:0 auto 14px;padding:0 28px;}
  .rail-btn{
    flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--green);background:transparent;color:var(--green);
    display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,color .3s;
  }
  .rail-btn:hover{background:var(--green);color:var(--cream);}
  .rail-btn svg{width:18px;height:18px;}
  .rail-bar{flex:1;height:1px;background:var(--green-line);position:relative;overflow:hidden;}
  .rail-bar i{position:absolute;left:0;top:-1px;height:3px;width:25%;background:var(--green);transition:transform .5s ease, width .5s ease;}
  .rail-toggle{
    flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:0 4px;border:none;background:none;cursor:pointer;
    font-family:var(--serif);font-size:12px;letter-spacing:.1em;color:var(--mute);
  }
  .rail-toggle:hover{color:var(--green);}
  .rail-toggle .ico{width:22px;height:22px;border-radius:50%;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;}
  .rail-toggle svg{width:10px;height:10px;}
  .rail-toggle .play{display:none;}
  .rail-toggle.paused .play{display:block;}
  .rail-toggle.paused .pause{display:none;}
  .rail .card{cursor:pointer;}
  .rail .card:focus-visible{outline:2px solid var(--green);outline-offset:6px;border-radius:4px;}

  /* カードを大きく表示する */
  .zoom{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;visibility:hidden;}
  .zoom.open{visibility:visible;}
  .zoom-bg{position:absolute;inset:0;background:rgba(30,42,28,.62);opacity:0;transition:opacity .45s ease;}
  .zoom.open .zoom-bg{opacity:1;}
  .zoom-panel{
    cursor:pointer;
    position:relative;width:min(560px,100%);max-height:calc(100vh - 48px);overflow:auto;background:var(--paper);border-radius:6px;
    box-shadow:0 30px 70px rgba(0,0,0,.35);transform-origin:top left;
    transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
  }
  .zoom-panel .pic{aspect-ratio:4/3;border-radius:6px 6px 0 0;}
  .zoom-panel .ph-box{font-size:13px;}
  .zoom-body{padding:28px 32px 32px;}
  .zoom-body .badge{position:static;display:inline-flex;margin-bottom:10px;border:none;width:54px;height:54px;font-size:11px;}
  .zoom-body h3{font-size:22px;font-weight:600;letter-spacing:.12em;color:var(--green);line-height:1.6;}
  .zoom-body .price{font-size:16px;color:var(--brown);margin:4px 0 16px;letter-spacing:.08em;}
  .zoom-body .price small{font-size:12px;color:var(--mute);margin-left:6px;}
  .zoom-body p.desc{font-size:15px;line-height:2.05;margin-bottom:14px;}
  .zoom-body p.note{font-size:13px;color:var(--mute);margin-bottom:24px;}
  .zoom-close{
    position:absolute;right:12px;top:12px;z-index:3;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(251,249,244,.92);color:var(--green);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.15);
  }
  .zoom-close svg{width:18px;height:18px;}
  body.zoom-lock{overflow:hidden;}
  .rail-hint{text-align:center;font-size:12px;color:var(--mute);letter-spacing:.12em;margin-bottom:26px;}

  /* お知らせ */
  .news{background:var(--paper);border-top:1px solid var(--green-line);border-bottom:1px solid var(--green-line);}
  .news-list{list-style:none;margin-bottom:40px;}
  .news-list li{border-bottom:1px solid var(--green-line);}
  .news-list a{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:20px 4px;font-size:14.5px;transition:color .3s;}
  .news-list a:hover{color:var(--green);}
  .news-list time{font-family:var(--en);font-size:15px;letter-spacing:.12em;color:var(--brown);}

  /* 店の案内 */
  .info{display:grid;grid-template-columns:120px 1fr;border-top:1px solid var(--green-line);margin:10px 0 36px;}
  .info dt,.info dd{padding:16px 4px;border-bottom:1px solid var(--green-line);font-size:14.5px;line-height:1.8;}
  .info dt{color:var(--green);font-weight:600;letter-spacing:.12em;}
  .info dd{color:var(--ink);}
  .info dd small{display:block;font-size:12px;color:var(--mute);}
  .soldout{font-size:14px;text-align:center;margin-bottom:40px;color:var(--mute);}

  /* 丸い枠線ボタン */
  .pill{
    display:flex;align-items:center;justify-content:space-between;gap:18px;width:min(320px,100%);margin:0 auto;
    padding:15px 26px 15px 32px;border:1px solid var(--green);border-radius:40px;font-size:14.5px;letter-spacing:.14em;color:var(--green);
    transition:background .35s,color .35s;
  }
  .pill:hover{background:var(--green);color:var(--cream);}
  .pill .arrow{width:30px;height:1px;background:currentColor;position:relative;transition:width .35s;}
  .pill:hover .arrow{width:40px;}
  .pill .arrow::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);}

  /* フッター */
  footer{background:var(--green);color:#eae4d6;text-align:center;padding:70px 20px 90px;position:relative;z-index:10;}
  footer .f-name{font-size:26px;letter-spacing:.4em;padding-left:.4em;margin-bottom:6px;}
  footer .f-en{font-family:var(--en);font-size:13px;letter-spacing:.45em;color:#d9c9a6;margin-bottom:28px;}
  footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;font-size:13.5px;margin-bottom:34px;}
  footer .f-note{font-size:11.5px;line-height:1.9;color:#cfd6c8;max-width:560px;margin:0 auto 14px;}
  footer .f-credit{font-size:11px;letter-spacing:.14em;color:#b9c3b2;}

  /* スクロールで現れる */
  /* 言葉のまとまりの途中で折り返さない（中央そろえの文が、変な所で改行されないように） */
  .nb{display:inline-block;}
  .intro p,.quote p,.menu-lead,.rail-hint,.stat .cap,footer .f-note,.notice,.soldout{text-wrap:balance;word-break:auto-phrase;}

  .rv{opacity:0;transform:translateY(34px);transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.16,.8,.2,1);}
  .rv.in{opacity:1;transform:none;}
  .rv-arch{clip-path:inset(100% 0 0 0 round 220px 220px 6px 6px);transition:clip-path 1.5s cubic-bezier(.7,0,.2,1);}
  .rv-arch.in{clip-path:inset(0 0 0 0 round 220px 220px 6px 6px);}
  .rv-arch img,.rv-arch .ph-box{transform:scale(1.15);transition:transform 2s cubic-bezier(.16,.8,.2,1);}
  .rv-arch.in img,.rv-arch.in .ph-box{transform:none;}
  /* 定番のパンの入り口：アーチの写真が、透明から少しずつ濃く、少し大きくなりながら現れ、遅れて「MENU」も同じように現れる */
  .rv-bloom{opacity:0;transform:scale(.88);transition:opacity 2.4s ease, transform 3s cubic-bezier(.16,.8,.2,1);}
  .rv-bloom.in{opacity:1;transform:none;}
  .rv-bloom .over{opacity:0;transform:scale(.8);transition:opacity 2.2s ease .9s, transform 2.8s cubic-bezier(.16,.8,.2,1) .9s;}
  .rv-bloom.in .over{opacity:1;transform:none;}
  .rv-v{opacity:0;clip-path:inset(0 0 100% 0);transition:clip-path 1.6s cubic-bezier(.7,0,.2,1), opacity .4s;}
  .rv-v.in{opacity:1;clip-path:inset(0 0 0 0);}

  @media (max-width:1100px){ .lattice,.side-deco{display:none;} }
  @media (max-width:760px){
    .v-name{display:none;}
    .slide img{object-position:72% 50%;}
    .hero{height:min(64svh, 560px);min-height:480px;}   /* 画面いっぱいにせず、少し低く */
    .hero-copy{gap:22px;top:44%;}
    .hero-tags span{font-size:12px;}
    .hero-dots{left:14px;right:auto;bottom:34px;}
    .ph-fallback{align-items:flex-start;padding:110px 20px 0 0;}
    section{padding:84px 0;}
    .cards{grid-template-columns:1fr;}
    .intro .v-lead{font-size:21px;}
    .stat .cap{font-size:11.5px;}
    .day-list::before,.day-list::after{left:84px;}
    .day-list li{grid-template-columns:84px 1fr;gap:0 22px;}
    .day-list li::before{left:79px;}
    .day-list time{font-size:12.5px;padding-right:16px;}
    .float-news{left:12px;bottom:12px;font-size:12px;padding:9px 16px 9px 18px;}
    .notice{font-size:11px;padding:4px 12px;}
    /* 写真を画面いっぱいにせず、少し小さめに */
    .arch{aspect-ratio:4/2.9;width:88%;margin-left:auto;margin-right:auto;margin-bottom:36px;border-radius:160px 160px 6px 6px;}
    .rv-arch{clip-path:inset(100% 0 0 0 round 160px 160px 6px 6px);}
    .rv-arch.in{clip-path:inset(0 0 0 0 round 160px 160px 6px 6px);}
    /* こだわり・お店の案内のアーチも、スマホでは定番のパン（MENU）と同じく、ふわっと濃く、少し大きくなりながら現れる */
    .rv-arch.rv-bloom-sp{clip-path:none;opacity:0;transform:scale(.88);transition:opacity 2.4s ease, transform 3s cubic-bezier(.16,.8,.2,1);}
    .rv-arch.rv-bloom-sp.in{clip-path:none;opacity:1;transform:none;}
    .rv-arch.rv-bloom-sp img{transform:none;transition:none;}
    .rv-bloom-sp .over{opacity:0;transform:scale(.8);transition:opacity 2.2s ease .9s, transform 2.8s cubic-bezier(.16,.8,.2,1) .9s;}
    .rv-bloom-sp.in .over{opacity:1;transform:none;}
    .arch .over{top:36%;font-size:min(21px, 5.4vw);letter-spacing:.4em;padding-left:.4em;}   /* アーチの丸い上端にかからない高さへ */
    .rail .card{flex-basis:62vw;}
    .duo{height:250px;margin:48px 0 96px;}
    .duo-cap{top:100%;bottom:auto;width:100%;margin-top:14px;}
    .intro .v-lead{height:12em;margin-bottom:40px;}
    .stat{padding:10px 4px 4px;}
    .stat .cap{font-size:11px;letter-spacing:.02em;}
  }
  @media (prefers-reduced-motion:reduce){
    .zoom-panel,.zoom-bg{transition:none;}
    .opening{display:none;}
    .rv,.rv-arch,.rv-v,.rv-clip,.rv-bloom,.rv-bloom .over,.rv-arch.rv-bloom-sp,.rv-bloom-sp .over{opacity:1;transform:none;clip-path:none;transition:none;}
    .rv-clip img{transform:none;transition:none;}
    .rv-arch img,.rv-arch .ph-box{transform:none;}
    .slide.kb img,.slide.kb .ph-fallback{animation:none;}
    .wheat .breeze{animation:none;}
  }
  /* ================= 下層ページ（こだわり・パンの紹介・お店の案内・お知らせ） ================= */

  /* 上の写真（トップより低くする） */
  .hero.sub{height:min(66vh,620px);min-height:440px;}
  .hero.sub::after{background:
    linear-gradient(90deg, rgba(20,17,12,.6) 0%, rgba(20,17,12,.25) 50%, rgba(20,17,12,.05) 80%),
    linear-gradient(180deg, rgba(20,17,12,.55) 0%, rgba(20,17,12,0) 30%, rgba(20,17,12,0) 60%, rgba(20,17,12,.35) 100%);}

  /* 店名とページの案内 */
  .sub-head{
    position:absolute;left:0;right:0;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:24px clamp(22px,5vw,60px);color:#f7f3ea;text-shadow:0 1px 12px rgba(0,0,0,.4);
  }
  .sub-logo{display:flex;align-items:baseline;gap:14px;font-size:22px;letter-spacing:.38em;line-height:1.4;}
  .sub-logo small{font-family:var(--en);font-size:11.5px;letter-spacing:.4em;color:#efe3cf;}
  .sub-nav{display:flex;flex-wrap:wrap;gap:6px 28px;font-size:13.5px;letter-spacing:.14em;}
  .sub-nav a{padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color .3s;}
  .sub-nav a:hover,.sub-nav a[aria-current="page"]{border-bottom-color:rgba(247,243,234,.85);}

  /* ページの題名 */
  .page-title{position:absolute;left:clamp(24px,7vw,110px);bottom:104px;z-index:3;color:#f7f3ea;text-shadow:0 2px 20px rgba(0,0,0,.45);}
  .page-title .en{display:block;font-family:var(--en);font-size:15px;letter-spacing:.55em;color:#efe3cf;margin-bottom:8px;}
  .page-title h1{font-size:clamp(28px,4.2vw,42px);font-weight:500;letter-spacing:.26em;line-height:1.5;}
  .page-title h1 small{display:block;font-size:14px;letter-spacing:.14em;margin-top:6px;}

  /* はじめの文 */
  .lead{text-align:center;}
  .lead p + p{margin-top:1.3em;}
  .lead .quote{margin-top:52px;margin-bottom:0;}
  .lead .quote{max-width:560px;}
  .lead .quote p{font-size:clamp(18px,2.6vw,24px);}

  /* 見出しのかたまり */
  .block{margin-top:80px;}
  .block:first-child{margin-top:0;}
  .block-head{margin-bottom:30px;}
  .block-head .label{margin-bottom:4px;}
  .block-head h2{text-align:center;font-size:clamp(20px,2.8vw,25px);font-weight:500;letter-spacing:.2em;padding-left:.2em;color:var(--green);line-height:1.7;}
  .block p + p{margin-top:1.2em;}
  .block .pill{margin-top:44px;}
  .rule-s{width:1px;height:56px;background:var(--green-line);margin:70px auto 0;}

  /* こだわり：章 */
  .chapter{margin-top:90px;}
  .chapter-head{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:baseline;padding-top:30px;border-top:1px solid var(--green-line);margin-bottom:26px;}
  .chapter-head h2{font-size:clamp(20px,2.8vw,24px);font-weight:500;letter-spacing:.16em;color:var(--green);line-height:1.7;}
  .chapter p + p{margin-top:1.2em;}
  .say{margin:36px 0;padding:4px 0 4px 24px;border-left:2px solid var(--brown);font-size:clamp(17px,2.4vw,20px);letter-spacing:.1em;line-height:1.9;color:var(--green);}
  .photo{margin:48px 0 0;}
  .photo .frame{aspect-ratio:4/3;border-radius:3px;overflow:hidden;box-shadow:0 22px 44px rgba(45,42,36,.16);background:var(--cream-deep);}
  .photo img{width:100%;height:100%;object-fit:cover;}
  .photo figcaption{margin-top:12px;font-size:12.5px;line-height:1.8;color:var(--mute);text-align:right;}

  /* パンの紹介：カードの一覧 */
  .cards.solo{grid-template-columns:minmax(0,300px);justify-content:center;}
  .cards .card{scroll-margin-top:60px;}
  .cards .card:target .pic{animation:mtFound 1.6s ease .5s 2;}
  @keyframes mtFound{0%{box-shadow:0 0 0 0 rgba(139,90,43,.55);}100%{box-shadow:0 0 0 22px rgba(139,90,43,0);}}
  .cards .card:target h3{color:var(--brown);}
  .drinks{list-style:none;max-width:420px;margin:0 auto;}
  .drinks li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 4px;border-bottom:1px dotted var(--green-line);font-size:15px;}
  .drinks li b{font-weight:600;color:var(--green);letter-spacing:.1em;}
  .drinks li span{color:var(--brown);letter-spacing:.08em;}
  .small-note{margin-top:24px;text-align:center;font-size:14px;color:var(--mute);}
  .tax.center{text-align:center;margin:18px 0 0;}

  /* お店の案内 */
  .info.full{margin-top:0;}
  .map-box{
    margin-top:28px;aspect-ratio:16/9;border-radius:4px;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
    font-size:13px;letter-spacing:.12em;color:var(--mute);border:1px solid var(--green-line);
    background:repeating-linear-gradient(90deg, rgba(62,91,58,.07) 0 1px, transparent 1px 18px), var(--paper);
  }

  /* お知らせ */
  .news-all{margin-bottom:0;}
  .post-head{text-align:center;margin-bottom:44px;}
  .post-head time{display:block;font-family:var(--en);font-size:16px;letter-spacing:.16em;color:var(--brown);margin-bottom:10px;}
  .post-head h2{font-size:clamp(18px,2.4vw,23px);font-weight:500;letter-spacing:.1em;color:var(--green);line-height:1.8;}
  .post-photo{margin:0 0 40px;}
  .post-photo .frame{aspect-ratio:4/3;}
  .entry p{margin-bottom:1.2em;}
  .entry h2,.entry h3{font-weight:600;letter-spacing:.12em;color:var(--green);line-height:1.7;margin:2em 0 .8em;}
  .entry h2{font-size:20px;}
  .entry h3{font-size:18px;}
  .entry img{height:auto;border-radius:4px;margin:0 auto;}
  .entry figure{margin:32px 0;}
  .entry ul,.entry ol{padding-left:1.4em;margin-bottom:1.2em;font-size:15.5px;}
  .entry a{color:var(--green);border-bottom:1px solid var(--green-line);}
  .entry .wp-block-dbp-frame.is-frame-style-warning{display:none;}   /* ご注意は、上の緑の帯で出しているため */
  .post-back{margin-top:60px;}

  /* トップに戻る（本文の最後） */
  .back-top{display:flex;justify-content:center;margin-top:-30px;padding:0 20px 96px;}
  .back-top a{
    display:inline-flex;align-items:center;gap:16px;padding:10px 6px;font-size:14px;letter-spacing:.16em;color:var(--green);
    border-bottom:1px solid var(--green-line);transition:border-color .3s,gap .35s;
  }
  .back-top a:hover{border-bottom-color:var(--green);gap:22px;}
  .back-top .arrow-l{width:30px;height:1px;background:currentColor;position:relative;}
  .back-top .arrow-l::before{content:'';position:absolute;left:0;top:-3px;width:7px;height:7px;border-left:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);}

  /* 中央そろえの文：言葉のまとまりで折り返し、行の長さもそろえる */
  .lead p,.block-head h2,.small-note,.tax.center,.post-head h2,.map-box,.page-title h1{text-wrap:balance;word-break:auto-phrase;}

  /* パンの紹介：トップの「定番のパン」へすぐ戻るボタン（画面の下に浮かせる） */
  .back-rail{
    position:fixed;left:50%;bottom:18px;z-index:45;display:flex;align-items:center;gap:12px;transform:translate(-50%, 16px);
    background:var(--green);color:var(--cream);border-radius:40px;padding:12px 24px 12px 20px;font-size:13.5px;letter-spacing:.12em;white-space:nowrap;
    box-shadow:0 10px 26px rgba(45,42,36,.22);opacity:0;pointer-events:none;transition:opacity .5s,transform .5s,background .3s;
  }
  .back-rail.show{opacity:1;transform:translate(-50%, 0);pointer-events:auto;}
  .back-rail:hover{background:var(--green-soft);}
  .back-rail .arrow-l{width:24px;height:1px;background:currentColor;position:relative;}
  .back-rail .arrow-l::before{content:'';position:absolute;left:0;top:-3px;width:7px;height:7px;border-left:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);}
  body.has-back-rail .float-news{display:none;}   /* 同じ場所に重ならないよう、お知らせのボタンは隠す */

  @media (max-width:760px){
    .hero.sub{height:min(62svh,520px);min-height:400px;}
    .sub-head{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 18px;}
    .sub-logo{font-size:19px;}
    .sub-nav{gap:4px 18px;font-size:12.5px;}
    .page-title{left:18px;bottom:78px;}
    .chapter-head{grid-template-columns:48px 1fr;gap:14px;}
    .chapter-head .k-num{font-size:28px;}
  }

  /* WordPress版で追加：お知らせがまだ無い時の表示 */
  .news-empty{display:block;padding:20px 4px;font-size:14.5px;color:var(--mute);}