/* 上平養鶏場 サイト共通スタイル */
:root{
  --ink:#20211e;
  --paper:#f5f3ed;
  --sage:#dfe3d7;
  --line:#d8d7d0;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--paper);font:14px/1.9 'Zen Kaku Gothic New',sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* header */
.header{height:94px;display:flex;align-items:center;gap:42px;padding:0 5.5%;background:#fff;border-bottom:1px solid #ecebe7;position:sticky;top:0;z-index:10;transition:height .35s ease}
.header.is-scrolled{height:64px}
.brand{font:22px/1.25 'Noto Serif JP',serif;letter-spacing:.08em;display:flex;flex-direction:column}
.brand small,.eyebrow{font:10px/1.7 'DM Mono',monospace;letter-spacing:.11em}
.brand-kicker{display:block;font:11px/1.6 'Zen Kaku Gothic New',sans-serif;letter-spacing:.14em;color:#8b897f;margin-bottom:4px;transition:font-size .35s ease,margin .35s ease,opacity .35s ease}
.brand-name{display:block;font:22px/1.25 'Noto Serif JP',serif;letter-spacing:.08em;transition:font-size .35s ease}
.header.is-scrolled .brand-kicker{font-size:0;margin-bottom:0;opacity:0}
.header.is-scrolled .brand-name{font-size:18px}
.header nav{display:flex;gap:26px;margin-left:auto;font-size:12px}
.header nav a{position:relative;padding:4px 0;transition:opacity .3s ease}
.header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.header nav a:hover{opacity:.62}
.header nav a:hover::after{transform:scaleX(1)}
.header nav a[aria-current="page"]{opacity:1}
.header nav a[aria-current="page"]::after{transform:scaleX(1)}
.button{border:0;background:var(--ink);color:#fff;padding:13px 18px;font:11px inherit;cursor:pointer;transition:background-color .3s ease,transform .3s ease}
.button:hover{background:#3c3d37;transform:translateY(-2px)}
.button:active{transform:translateY(0)}

/* soft wave section edge instead of a flat boundary line — each boundary gets its own amplitude/period/phase so the waves don't repeat identically.
   bottom:-1px: section heights are often fractional, which left a hairline of the section's own color (or photo) under the wave on 2x screens */
.hero,.rich,.simple,.wave-edge,.mekkemon,.media,.products,.product-detail,.order-section{position:relative}
.hero::after,.rich::after,.simple::after,.wave-edge::after,.mekkemon::after,.media::after,.products::after,.product-detail::after,.order-section::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:44px;pointer-events:none}
.hero::after{background:var(--paper);
  clip-path:polygon(0.00% 50.00%,2.50% 53.75%,5.00% 57.42%,7.50% 60.90%,10.00% 64.11%,12.50% 66.97%,15.00% 69.42%,17.50% 71.38%,20.00% 72.83%,22.50% 73.70%,25.00% 74.00%,27.50% 73.70%,30.00% 72.83%,32.50% 71.38%,35.00% 69.42%,37.50% 66.97%,40.00% 64.11%,42.50% 60.90%,45.00% 57.42%,47.50% 53.75%,50.00% 50.00%,52.50% 46.25%,55.00% 42.58%,57.50% 39.10%,60.00% 35.89%,62.50% 33.03%,65.00% 30.58%,67.50% 28.62%,70.00% 27.17%,72.50% 26.30%,75.00% 26.00%,77.50% 26.30%,80.00% 27.17%,82.50% 28.62%,85.00% 30.58%,87.50% 33.03%,90.00% 35.89%,92.50% 39.10%,95.00% 42.58%,97.50% 46.25%,100.00% 50.00%,100% 100%,0% 100%)}
.rich::after{background:#fff;
  clip-path:polygon(0.00% 66.46%,2.50% 63.49%,5.00% 60.31%,7.50% 56.96%,10.00% 53.51%,12.50% 50.00%,15.00% 46.49%,17.50% 43.04%,20.00% 39.69%,22.50% 36.51%,25.00% 33.54%,27.50% 30.83%,30.00% 28.43%,32.50% 26.36%,35.00% 24.66%,37.50% 23.37%,40.00% 22.50%,42.50% 22.06%,45.00% 22.06%,47.50% 22.50%,50.00% 23.37%,52.50% 24.66%,55.00% 26.36%,57.50% 28.43%,60.00% 30.83%,62.50% 33.54%,65.00% 36.51%,67.50% 39.69%,70.00% 43.04%,72.50% 46.49%,75.00% 50.00%,77.50% 53.51%,80.00% 56.96%,82.50% 60.31%,85.00% 63.49%,87.50% 66.46%,90.00% 69.17%,92.50% 71.57%,95.00% 73.64%,97.50% 75.34%,100.00% 76.63%,100% 100%,0% 100%)}
.simple::after{background:var(--paper);
  clip-path:polygon(0.00% 67.80%,2.50% 69.98%,5.00% 71.39%,7.50% 71.98%,10.00% 71.73%,12.50% 70.64%,15.00% 68.76%,17.50% 66.16%,20.00% 62.93%,22.50% 59.21%,25.00% 55.14%,27.50% 50.86%,30.00% 46.56%,32.50% 42.39%,35.00% 38.51%,37.50% 35.07%,40.00% 32.20%,42.50% 30.02%,45.00% 28.61%,47.50% 28.02%,50.00% 28.27%,52.50% 29.36%,55.00% 31.24%,57.50% 33.84%,60.00% 37.07%,62.50% 40.79%,65.00% 44.86%,67.50% 49.14%,70.00% 53.44%,72.50% 57.61%,75.00% 61.49%,77.50% 64.93%,80.00% 67.80%,82.50% 69.98%,85.00% 71.39%,87.50% 71.98%,90.00% 71.73%,92.50% 70.64%,95.00% 68.76%,97.50% 66.16%,100.00% 62.93%,100% 100%,0% 100%)}
.wave-edge::after{background:#fff;
  clip-path:polygon(0.00% 36.31%,2.50% 39.28%,5.00% 42.64%,7.50% 46.25%,10.00% 50.00%,12.50% 53.75%,15.00% 57.36%,17.50% 60.72%,20.00% 63.69%,22.50% 66.18%,25.00% 68.10%,27.50% 69.37%,30.00% 69.96%,32.50% 69.84%,35.00% 69.02%,37.50% 67.53%,40.00% 65.41%,42.50% 62.75%,45.00% 59.64%,47.50% 56.18%,50.00% 52.51%,52.50% 48.74%,55.00% 45.03%,57.50% 41.48%,60.00% 38.24%,62.50% 35.42%,65.00% 33.11%,67.50% 31.40%,70.00% 30.35%,72.50% 30.00%,75.00% 30.35%,77.50% 31.40%,80.00% 33.11%,82.50% 35.42%,85.00% 38.24%,87.50% 41.48%,90.00% 45.03%,92.50% 48.74%,95.00% 52.51%,97.50% 56.18%,100.00% 59.64%,100% 100%,0% 100%)}
.mekkemon::after{background:#edebe4;
  clip-path:polygon(0.00% 61.08%,2.50% 64.52%,5.00% 67.49%,7.50% 69.89%,10.00% 71.64%,12.50% 72.69%,15.00% 73.00%,17.50% 72.56%,20.00% 71.38%,22.50% 69.52%,25.00% 67.01%,27.50% 63.95%,30.00% 60.44%,32.50% 56.59%,35.00% 52.52%,37.50% 48.38%,40.00% 44.28%,42.50% 40.37%,45.00% 36.77%,47.50% 33.61%,50.00% 30.98%,52.50% 28.96%,55.00% 27.64%,57.50% 27.03%,60.00% 27.18%,62.50% 28.07%,65.00% 29.67%,67.50% 31.94%,70.00% 34.79%,72.50% 38.14%,75.00% 41.87%,77.50% 45.87%,80.00% 50.00%,82.50% 54.13%,85.00% 58.13%,87.50% 61.86%,90.00% 65.21%,92.50% 68.06%,95.00% 70.33%,97.50% 71.93%,100.00% 72.82%,100% 100%,0% 100%)}
.media::after{background:#f7f6f2;
  clip-path:polygon(0.00% 46.74%,2.50% 43.14%,5.00% 39.67%,7.50% 36.42%,10.00% 33.43%,12.50% 30.77%,15.00% 28.50%,17.50% 26.65%,20.00% 25.27%,22.50% 24.39%,25.00% 24.01%,27.50% 24.16%,30.00% 24.82%,32.50% 25.98%,35.00% 27.62%,37.50% 29.71%,40.00% 32.20%,42.50% 35.05%,45.00% 38.20%,47.50% 41.58%,50.00% 45.13%,52.50% 48.78%,55.00% 52.45%,57.50% 56.07%,60.00% 59.57%,62.50% 62.88%,65.00% 65.94%,67.50% 68.67%,70.00% 71.03%,72.50% 72.98%,75.00% 74.46%,77.50% 75.46%,80.00% 75.95%,82.50% 75.92%,85.00% 75.37%,87.50% 74.32%,90.00% 72.78%,92.50% 70.79%,95.00% 68.38%,97.50% 65.61%,100.00% 62.53%,100% 100%,0% 100%)}

/* tamago.html chain: products(paper) → product-detail(white) → order-section(sage) → footer */
.products::after{background:#fff;
  clip-path:polygon(0.00% 69.28%,2.50% 67.59%,5.00% 65.56%,7.50% 63.21%,10.00% 60.60%,12.50% 57.78%,15.00% 54.80%,17.50% 51.73%,20.00% 48.62%,22.50% 45.54%,25.00% 42.55%,27.50% 39.71%,30.00% 37.07%,32.50% 34.69%,35.00% 32.62%,37.50% 30.89%,40.00% 29.54%,42.50% 28.61%,45.00% 28.10%,47.50% 28.02%,50.00% 28.39%,52.50% 29.19%,55.00% 30.40%,57.50% 32.00%,60.00% 33.96%,62.50% 36.24%,65.00% 38.80%,67.50% 41.58%,70.00% 44.53%,72.50% 47.59%,75.00% 50.69%,77.50% 53.78%,80.00% 56.80%,82.50% 59.68%,85.00% 62.37%,87.50% 64.81%,90.00% 66.95%,92.50% 68.76%,95.00% 70.19%,97.50% 71.22%,100.00% 71.83%,100% 100%,0% 100%)}
.product-detail::after{background:var(--sage);
  clip-path:polygon(0.00% 30.63%,2.50% 30.02%,5.00% 30.25%,7.50% 31.29%,10.00% 33.11%,12.50% 35.64%,15.00% 38.76%,17.50% 42.35%,20.00% 46.25%,22.50% 50.31%,25.00% 54.36%,27.50% 58.23%,30.00% 61.76%,32.50% 64.79%,35.00% 67.21%,37.50% 68.92%,40.00% 69.84%,42.50% 69.94%,45.00% 69.21%,47.50% 67.68%,50.00% 65.41%,52.50% 62.50%,55.00% 59.08%,57.50% 55.28%,60.00% 51.26%,62.50% 47.18%,65.00% 43.23%,67.50% 39.55%,70.00% 36.31%,72.50% 33.64%,75.00% 31.64%,77.50% 30.42%,80.00% 30.00%,82.50% 30.42%,85.00% 31.64%,87.50% 33.64%,90.00% 36.31%,92.50% 39.55%,95.00% 43.23%,97.50% 47.18%,100.00% 51.26%,100% 100%,0% 100%)}
.order-section::after{background:#f7f6f2;
  clip-path:polygon(0.00% 69.42%,2.50% 70.85%,5.00% 72.03%,7.50% 72.94%,10.00% 73.57%,12.50% 73.93%,15.00% 73.99%,17.50% 73.76%,20.00% 73.25%,22.50% 72.45%,25.00% 71.38%,27.50% 70.06%,30.00% 68.49%,32.50% 66.70%,35.00% 64.71%,37.50% 62.54%,40.00% 60.22%,42.50% 57.77%,45.00% 55.24%,47.50% 52.63%,50.00% 50.00%,52.50% 47.37%,55.00% 44.76%,57.50% 42.23%,60.00% 39.78%,62.50% 37.46%,65.00% 35.29%,67.50% 33.30%,70.00% 31.51%,72.50% 29.94%,75.00% 28.62%,77.50% 27.55%,80.00% 26.75%,82.50% 26.24%,85.00% 26.01%,87.50% 26.07%,90.00% 26.43%,92.50% 27.06%,95.00% 27.97%,97.50% 29.15%,100.00% 30.58%,100% 100%,0% 100%)}

/* top page: hero / section / banner / simple / media */
.hero{background:#d9ddcf}
h2,footer h3{font:500 clamp(30px,4vw,57px)/1.5 'Noto Serif JP',serif;letter-spacing:.06em}
/* slideshow: 3 banners (1920x650, copy baked into the image) cross-fade; main.js moves .is-active */
.hero-slides{margin:0;position:relative;aspect-ratio:1920/650;overflow:hidden}
.hero-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.hero-slides img.is-active{opacity:1;z-index:2}
.hero-slides img.is-prev{opacity:1;z-index:1;transition:none}
.hero::after{z-index:3} /* above the slides */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* intro: product picker directly below the hero */
.intro{padding:100px 13% 120px;background:var(--paper);text-align:center}
.intro h2{font-size:clamp(27px,3vw,42px);margin:0 0 60px}
/* single card: same size as one column of the former 2-column grid, centered */
.intro-grid{display:grid;grid-template-columns:minmax(0,calc((100% - 44px)/2));justify-content:center;text-align:left}
.intro-card{display:block;transition:transform .4s ease}
.intro-card figure{margin:0;height:300px;overflow:hidden;background:#e3e2db}
.intro-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.intro-card.ume img{object-position:60% 45%}
.intro-card:hover img{transform:scale(1.06)}
.intro-card-copy{padding:26px 2px 0}
.intro-card h3{font:500 24px/1.4 'Noto Serif JP',serif;letter-spacing:.04em;margin:0 0 14px}
.intro-card p{font-size:13px;margin:0 0 18px;color:#48473f}
.intro-card-cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:11px 'DM Mono',monospace;letter-spacing:.09em;overflow:hidden;transition:color .3s ease .08s}
.intro-card-cta::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.65,0,.35,1);z-index:-1}
.intro-card-cta .arrow{transition:transform .35s ease}
.intro-card:hover .intro-card-cta{color:#fff}
.intro-card:hover .intro-card-cta::before{transform:scaleX(1)}
.intro-card:hover .intro-card-cta .arrow{transform:translateX(4px)}
.intro-card-cta:hover{color:#fff}
.intro-card-cta:hover::before{transform:scaleX(1)}
.intro-card-cta:hover .arrow{transform:translateX(4px)}

/* 01/FIRST,RAW and 02/RICH&GENTLE: full-bleed photo half + copy half, order flips via DOM order */
.section{display:grid;grid-template-columns:1fr 1fr;background:#fff}
.section figure{margin:0;min-height:460px}
.section img{width:100%;height:100%;object-fit:cover}
.section>div{padding:90px 12%;align-self:center}
.section h2{font-size:clamp(27px,3vw,42px);margin:0 0 22px}

.section p{font-size:13px;line-height:1.9;margin:0}

/* raw (01 まずは生でどうぞ): TOP edge is a wave cut by clip-path on the section itself (same technique as .mekkemon), so the photo follows the wave from .intro */
.section.raw{--wave:44px;margin-top:calc(var(--wave)*-1);
  clip-path:polygon(0.00% calc(var(--wave)*0.2741),2.50% calc(var(--wave)*0.2701),5.00% calc(var(--wave)*0.2723),7.50% calc(var(--wave)*0.2807),10.00% calc(var(--wave)*0.2951),12.50% calc(var(--wave)*0.3150),15.00% calc(var(--wave)*0.3399),17.50% calc(var(--wave)*0.3692),20.00% calc(var(--wave)*0.4021),22.50% calc(var(--wave)*0.4376),25.00% calc(var(--wave)*0.4748),27.50% calc(var(--wave)*0.5126),30.00% calc(var(--wave)*0.5502),32.50% calc(var(--wave)*0.5863),35.00% calc(var(--wave)*0.6202),37.50% calc(var(--wave)*0.6507),40.00% calc(var(--wave)*0.6772),42.50% calc(var(--wave)*0.6989),45.00% calc(var(--wave)*0.7152),47.50% calc(var(--wave)*0.7256),50.00% calc(var(--wave)*0.7299),52.50% calc(var(--wave)*0.7280),55.00% calc(var(--wave)*0.7198),57.50% calc(var(--wave)*0.7057),60.00% calc(var(--wave)*0.6861),62.50% calc(var(--wave)*0.6614),65.00% calc(var(--wave)*0.6323),67.50% calc(var(--wave)*0.5996),70.00% calc(var(--wave)*0.5642),72.50% calc(var(--wave)*0.5270),75.00% calc(var(--wave)*0.4892),77.50% calc(var(--wave)*0.4516),80.00% calc(var(--wave)*0.4153),82.50% calc(var(--wave)*0.3814),85.00% calc(var(--wave)*0.3506),87.50% calc(var(--wave)*0.3239),90.00% calc(var(--wave)*0.3020),92.50% calc(var(--wave)*0.2855),95.00% calc(var(--wave)*0.2748),97.50% calc(var(--wave)*0.2702),100.00% calc(var(--wave)*0.2718),100% 100%,0% 100%)}

/* cutout modifier: 卵かけご飯って、こんなに美味しかったの！？ — printed-photo look: white border + soft drop shadow */
.section.cutout{background:var(--paper);padding:110px 13%;grid-template-columns:1.3fr 1fr;gap:50px}
.section.cutout>div{padding:0}
.section.cutout figure{min-height:0;padding:0;display:flex;align-items:center;justify-content:center}
.section.cutout img{width:100%;max-width:480px;height:auto;border:3mm solid #fff;box-shadow:0 16px 34px -16px rgba(32,33,30,.4)}
.section.cutout h2{font-size:clamp(22px,2.6vw,32px);line-height:1.7;margin:0 0 26px}
.section.cutout p+p{margin-top:12px}

/* simple: centered text-only block (栄養価もバツグン) — a deliberate pause between photo-heavy sections */
.simple{text-align:center;padding:120px 13%;background:#fff}
.simple h2{font-size:clamp(27px,3vw,42px);margin:0 0 22px}
.simple p{max-width:560px;margin:0 auto;font-size:13px;line-height:1.9}

/* kodawari: 3 commitments with circular photos + ghost CTA (reuses .intro-card-cta) */
.kodawari{padding:110px 13% 130px;background:#fff;text-align:center}
.kodawari h2{font-size:clamp(27px,3vw,42px);margin:0 0 60px}
.kodawari-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-bottom:64px}
.kodawari-item figure{margin:0 auto 28px;width:min(100%,240px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#e3e2db}
.kodawari-item img{width:100%;height:100%;object-fit:cover}
.kodawari-item h3{font:500 20px/1.5 'Noto Serif JP',serif;letter-spacing:.04em;margin:0 0 12px}
.kodawari-item p{font-size:13px;line-height:1.9;margin:0;color:#48473f}

/* mekkemon: めっけもん広場 — same half/half layout as .section, on sage. Its TOP edge is a wave cut by clip-path on the section itself (pulled up under .kodawari by --wave), so the photo follows the wave instead of meeting it with a square edge */
.section.mekkemon{background:var(--sage);--wave:44px;margin-top:calc(var(--wave)*-1);
  clip-path:polygon(0.00% calc(var(--wave)*0.3562),2.50% calc(var(--wave)*0.3382),5.00% calc(var(--wave)*0.3227),7.50% calc(var(--wave)*0.3100),10.00% calc(var(--wave)*0.3003),12.50% calc(var(--wave)*0.2937),15.00% calc(var(--wave)*0.2904),17.50% calc(var(--wave)*0.2904),20.00% calc(var(--wave)*0.2937),22.50% calc(var(--wave)*0.3003),25.00% calc(var(--wave)*0.3100),27.50% calc(var(--wave)*0.3227),30.00% calc(var(--wave)*0.3382),32.50% calc(var(--wave)*0.3562),35.00% calc(var(--wave)*0.3766),37.50% calc(var(--wave)*0.3988),40.00% calc(var(--wave)*0.4227),42.50% calc(var(--wave)*0.4478),45.00% calc(var(--wave)*0.4737),47.50% calc(var(--wave)*0.5000),50.00% calc(var(--wave)*0.5263),52.50% calc(var(--wave)*0.5522),55.00% calc(var(--wave)*0.5773),57.50% calc(var(--wave)*0.6012),60.00% calc(var(--wave)*0.6234),62.50% calc(var(--wave)*0.6438),65.00% calc(var(--wave)*0.6618),67.50% calc(var(--wave)*0.6773),70.00% calc(var(--wave)*0.6900),72.50% calc(var(--wave)*0.6997),75.00% calc(var(--wave)*0.7063),77.50% calc(var(--wave)*0.7096),80.00% calc(var(--wave)*0.7096),82.50% calc(var(--wave)*0.7063),85.00% calc(var(--wave)*0.6997),87.50% calc(var(--wave)*0.6900),90.00% calc(var(--wave)*0.6773),92.50% calc(var(--wave)*0.6618),95.00% calc(var(--wave)*0.6438),97.50% calc(var(--wave)*0.6234),100.00% calc(var(--wave)*0.6012),100% 100%,0% 100%)}
.section.mekkemon p+p{margin-top:12px}
.section.mekkemon .spec{margin-top:30px;border-color:#c9cec0}
.section.mekkemon .spec div{grid-template-columns:90px 1fr;border-color:#c9cec0}
.spec a{text-decoration:underline;text-underline-offset:3px}

.banner{height:245px;position:relative;overflow:hidden;background:#e3e2db}
.banner img{width:100%;height:100%;object-fit:cover}
.banner span{position:absolute;left:24px;bottom:18px;color:#fff;font:22px 'Noto Serif JP',serif;text-shadow:0 1px 5px #333}
.rich{background:#edebe4}
.rich .banner{background:#d7ddd3}
.rich .banner img{filter:hue-rotate(12deg) saturate(.7)}
.media{padding:100px 13%;background:#edebe4}
.media h2{font-size:38px;margin:0 0 28px}
.media-item{display:grid;grid-template-columns:240px 1fr;gap:40px;padding:36px 0;border-top:1px solid var(--line)}
.media-item figure{margin:0}
.media-item img{width:100%;height:auto;object-fit:cover}
.media-item time{font:11px 'DM Mono',monospace}
.media-item h3{font:500 20px/1.6 'Noto Serif JP',serif;letter-spacing:.04em;margin:0 0 16px}
.media-item p{font-size:13px;line-height:1.9;margin:0}
.media-item p+p{margin-top:12px}

/* tamago.html: products (reuses .intro card styles, 2 columns) */
.products h1{font:500 clamp(27px,3vw,42px)/1.5 'Noto Serif JP',serif;letter-spacing:.06em;margin:0 0 60px}
.intro-grid.pair{grid-template-columns:1fr 1fr;justify-content:normal;gap:44px}
.intro-card .catch{font:500 16px/1.7 'Noto Serif JP',serif;letter-spacing:.04em;color:var(--ink);margin:0 0 10px}
.products .intro-card{scroll-margin-top:90px}

/* tamago.html: product detail (content from the e-egg.net shop product page) */
.product-detail{padding:110px 13% 130px;background:#fff}
.product-detail h2{font-size:clamp(27px,3vw,42px);margin:0 0 40px}
.detail-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.detail-gallery figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:#e3e2db}
.detail-gallery img{width:100%;height:100%;object-fit:cover}
.detail-body{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:50px}
.detail-body p{font-size:13px;line-height:1.9;margin:0}
.detail-body .note{font-size:12px;color:#6f6d63;margin-top:18px}
.detail-body h3{font:500 20px/1.5 'Noto Serif JP',serif;letter-spacing:.04em;margin:0 0 6px}
.detail-body .spec{margin:14px 0 36px}
.detail-body .spec:last-child{margin-bottom:0}
.detail-body .spec-lead{font-size:12px;color:#6f6d63}

/* tamago.html: order form (entry inline on the page, confirm/done in #order-confirm modal) */
.order-section{padding:110px 13% 130px;background:var(--sage)}
.order-section h2{font-size:clamp(27px,3vw,42px);margin:0 0 12px;text-align:center}
.order-lead{font-size:13px;text-align:center;margin:0 0 44px}
.order-form{max-width:760px;margin:0 auto;background:#fff;padding:56px}
.order-form fieldset{border:0;margin:0 0 48px;padding:0}
.order-form legend{font:500 20px/1.5 'Noto Serif JP',serif;letter-spacing:.04em;padding:0 0 12px;margin-bottom:8px;width:100%;border-bottom:1px solid var(--line)}
.order-form label{display:block;font-size:14px;letter-spacing:.05em;margin:26px 0 10px}
.order-form .req{font-size:11px;letter-spacing:.02em;color:#8b897f;margin-left:6px}
.order-form input,.order-form select,.order-form textarea{width:100%;padding:13px;margin:0 0 6px;border:1px solid var(--line);font:15px/1.8 'Zen Kaku Gothic New',sans-serif;background:#fff;color:var(--ink)}
.order-form .note{font-size:12px;line-height:1.9;color:#8b897f;margin:8px 0 0}
.order-form .field-error{font-size:12px;line-height:1.8;color:#9a4c3f;margin:8px 0 0}
.order-items{margin-top:20px}
.order-item{display:grid;grid-template-columns:1fr 96px 88px 56px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.order-item select,.order-item input{margin:0}
.order-qty{display:flex;align-items:center;gap:6px;font-size:13px}
.order-qty input{text-align:right;padding:13px 8px}
.order-subtotal{font:13px 'DM Mono',monospace;text-align:right}
.order-remove{border:1px solid var(--line);background:transparent;color:#6f6d63;font:11px 'Zen Kaku Gothic New',sans-serif;padding:8px 0;cursor:pointer;transition:background-color .3s ease,color .3s ease}
.order-remove:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.order-remove[hidden]{display:block;visibility:hidden}
.order-add{margin-top:18px;border:1px solid var(--ink)}
.button.ghost{background:transparent;color:var(--ink)}
.button.ghost:hover{background:var(--ink);color:#fff}
.order-total{display:flex;align-items:baseline;justify-content:flex-end;gap:14px;font-size:13px;margin:24px 0 0}
.order-total strong{font:500 24px 'DM Mono',monospace;letter-spacing:.02em}
.order-total span{font-size:11px;color:#8b897f}
.order-total.sub{margin-top:6px;color:#55534b}
.order-total.sub strong{font-size:16px}
.order-form .order-estimate-note{text-align:right}
.order-form .radio-row{display:flex;gap:28px;flex-wrap:wrap}
.order-form .radio-row label{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;cursor:pointer}
.order-form .radio-row input{width:auto;margin:0;accent-color:var(--ink)}
.order-submit{display:block;width:100%;padding:18px;font-size:13px}
/* フォーム共通：同意チェック・ボット対策の隠し欄（注文フォーム・お問い合わせ） */
.order-form .agree,.box .agree{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 24px;font-size:14px;cursor:pointer}
.box .agree{justify-content:flex-start;margin:28px 0 0}
.order-form .agree input,.box .agree input{width:auto;margin:0;accent-color:var(--ink)}
.agree a{text-decoration:underline;text-underline-offset:3px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.button:disabled{opacity:.5;cursor:default;transform:none}
.confirm-items{width:100%;border-collapse:collapse;font-size:14px;margin:18px 0 0}
.confirm-items th,.confirm-items td{padding:10px 4px;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.confirm-items thead th{font:11px 'DM Mono',monospace;letter-spacing:.06em;color:#8b897f}
.confirm-items td:nth-child(n+2),.confirm-items thead th:nth-child(n+2),.confirm-items tfoot td{text-align:right;white-space:nowrap}
.confirm-items tfoot th,.confirm-items tfoot td{border-bottom:0;font-weight:500;padding-top:14px}
#order-confirm .confirm-list{margin-top:28px}

/* sub page: page-hero / content / grid / spec / order */
.page-hero{padding:110px 12%;background:var(--sage)}
.page-hero h1,.content h2{font:500 clamp(30px,4vw,57px)/1.5 'Noto Serif JP',serif;letter-spacing:.06em}
.page-hero h1{margin:25px 0 0}
.page-hero.photo{position:relative;overflow:hidden;isolation:isolate;background:#f3ead9}
.page-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.page-hero.photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#f3ead9 0%,rgba(243,234,217,.96) 26%,rgba(243,234,217,.6) 52%,rgba(243,234,217,0) 86%)}
.content{padding:110px 12%}
.content+.content{padding-top:0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.grid figure{margin:0;min-height:420px}
.grid img{width:100%;height:100%;object-fit:cover}
.grid figure.wide{min-height:0;aspect-ratio:4/3}
.content h2{font-size:38px;margin:0 0 22px}
.content p{font-size:13px}
.content h3{font:500 20px/1.6 'Noto Serif JP',serif;letter-spacing:.04em;margin:34px 0 10px}
.points{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.points li{padding:11px 0;border-bottom:1px solid var(--line);font-size:12px}
.spec{border-top:1px solid var(--line);margin-top:38px}
.spec div{display:grid;grid-template-columns:110px 1fr;padding:14px 0;border-bottom:1px solid var(--line);font-size:12px}
.spec dd{margin:0}
.spec dd.pending{color:#8b897f;font-style:italic}
.map{margin:38px 0 0;border:1px solid var(--line);background:var(--sage);aspect-ratio:16/9}
.map iframe{display:block;width:100%;height:100%;border:0}
.order{margin-top:42px;background:var(--sage);padding:28px;display:flex;justify-content:space-between;align-items:center}
.order h3{font:500 24px 'Noto Serif JP',serif;margin:0}

/* 未撮影セクション用プレースホルダー（撮影リストを兼ねる） */
.placeholder{background:var(--line);display:flex;align-items:center;justify-content:center;text-align:center;color:#6f6d63;min-height:420px}
.placeholder span{font:10px 'DM Mono',monospace;letter-spacing:.08em;padding:0 20px}

/* steps (出荷までの流れ 等) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px;margin-top:20px}
.steps div{border-top:1px solid var(--line);padding-top:20px}
.steps h3{font:500 20px 'Noto Serif JP',serif;margin:12px 0 10px;letter-spacing:.04em}
.steps p{font-size:13px;margin:0}
.step-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px}
.step-photos figure{margin:0}
.step-photos img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#e3e2db}
.step-photos figcaption{font:10px/1.7 'DM Mono','Zen Kaku Gothic New',monospace;letter-spacing:.11em;margin-top:12px}

/* faq */
.faq-item{border-top:1px solid var(--line);padding:28px 0}
.faq-item .q{display:flex;gap:14px;align-items:baseline;font:500 18px 'Noto Serif JP',serif;margin:0 0 12px}
.faq-item .q span{font:11px 'DM Mono',monospace;color:#8b897f}
.faq-item .a{display:flex;gap:14px;font-size:13px;margin:0}
.faq-item .a span{font:11px 'DM Mono',monospace;color:#8b897f}

/* notice (法的ページの確認中バナー等) */
.notice{background:var(--sage);padding:20px 24px;font-size:12px;margin-bottom:40px}

/* cta links (page bottom navigation to related pages) */
.cta-links{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:60px}

footer{padding:72px 5.5% 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:54px;background:#f7f6f2}
footer>div{border-top:2px solid #8e958e;padding-top:25px;min-height:184px}
footer h3{font-size:22px;margin:0 0 22px}
footer h4{font:500 22px/1.5 'Noto Serif JP',serif;letter-spacing:.06em;margin:0 0 10px}
footer p{font-size:13px;margin:0}
footer p+p{margin-top:14px}
footer p+h4{margin-top:20px}
footer .note{font-size:11px;line-height:1.8;color:#8b897f;margin-top:10px}

.footer-bottom{background:var(--ink);padding:24px 5.5%;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-bottom nav{display:flex;gap:28px;font-size:11px}
.footer-bottom nav a{position:relative;padding:4px 0;color:#f7f6f2;transition:opacity .3s ease}
.footer-bottom nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:#f7f6f2;transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.footer-bottom nav a:hover{opacity:.62}
.footer-bottom nav a:hover::after{transform:scaleX(1)}
.footer-bottom .copyright{font:10px 'DM Mono',monospace;letter-spacing:.06em;color:#f7f6f2;margin:0}
.time-slots{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.time-slot{display:flex;flex-direction:column;align-items:center;gap:6px;width:44px;font:11px 'DM Mono',monospace;text-align:center;color:#5a5c53}
.time-slot svg{width:44px;height:44px}
.time-slot svg circle{fill:var(--sage)}
.time-slot svg path{fill:var(--ink)}

/* contact / order modal */
.modal{position:fixed;inset:0;background:#0008;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.modal.open{opacity:1;visibility:visible;transition:opacity .4s ease}
.box{width:min(680px,100%);max-height:88vh;overflow-y:auto;padding:44px;background:#fff;transform:translateY(18px) scale(.97);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.modal.open .box{transform:translateY(0) scale(1)}
.box h2{font-size:24px;margin:20px 0 22px}
.box>p{font-size:15px;line-height:2;margin:0 0 14px}
.box .note{font-size:12px;line-height:1.9;color:#8b897f;margin:8px 0 0}
.box label{display:block;font-size:14px;letter-spacing:.05em;margin:26px 0 10px}
.box label:first-of-type{margin-top:32px}
.box .req{font-size:11px;letter-spacing:.02em;color:#8b897f;margin-left:6px}
.box input,.box select,.box textarea{width:100%;padding:13px;margin:0 0 6px;border:1px solid var(--line);font:15px/1.8 'Zen Kaku Gothic New',sans-serif;background:#fff}
.box .field-error{font-size:12px;line-height:1.8;color:#9a4c3f;margin:8px 0 0}
.box .form-step>.button{margin-top:32px}
.confirm-list{margin:0}
.confirm-list dt{font:11px 'DM Mono',monospace;letter-spacing:.06em;color:#8b897f;margin-top:20px}
.confirm-list dt:first-child{margin-top:0}
.confirm-list dd{font-size:15px;line-height:1.9;margin:6px 0 0;white-space:pre-wrap}
.confirm-actions{display:flex;gap:16px;margin-top:32px}
.confirm-actions .button{flex:1;margin-top:0}

@media(max-width:760px){
  .hero::after,.rich::after,.simple::after,.wave-edge::after,.mekkemon::after,.media::after,.products::after,.product-detail::after,.order-section::after{height:26px}
  .section.raw,.section.mekkemon{--wave:26px}
  .header{height:70px;padding:0 6%}
  .header.is-scrolled{height:54px}
  .header nav{display:none}
  .button{margin-left:auto}
  .section{display:block}
  .section figure{min-height:260px}
  .section>div{padding:50px 8% 60px}
  .section.cutout{padding:70px 8%}
  .section.cutout>div{padding:0}
  .section.cutout figure{padding:40px 0 0}
  .section.cutout img{max-width:330px}
  .banner{height:260px}
  .simple{padding:75px 9%}
  .intro{padding:70px 8% 80px}
  .intro h2{margin:12px 0 40px}
  .intro-grid{display:block}
  .intro-card figure{height:240px}
  .kodawari{padding:75px 9% 90px}
  .kodawari h2{margin:0 0 40px}
  .kodawari-grid{display:block;margin-bottom:44px}
  .kodawari-item{margin-bottom:44px}
  .kodawari-item:last-child{margin-bottom:0}
  .kodawari-item figure{width:200px;margin-bottom:22px}
  .intro-grid.pair{display:block}
  .intro-grid.pair .intro-card{margin-bottom:44px}
  .intro-grid.pair .intro-card:last-child{margin-bottom:0}
  .product-detail,.order-section{padding:75px 6% 90px}
  .detail-gallery{grid-template-columns:1fr 1fr;gap:12px}
  .detail-gallery figure:first-child{grid-column:1/-1}
  .detail-body{display:block;margin-top:36px}
  .detail-body>div+div{margin-top:40px}
  .order-form{padding:32px 20px}
  .order-item{grid-template-columns:1fr 56px;grid-template-areas:"sel sel" "qty rm" "sub sub"}
  .order-item select{grid-area:sel}
  .order-qty{grid-area:qty}
  .order-remove{grid-area:rm}
  .order-subtotal{grid-area:sub}
  .media{padding:75px 9%}
  .media-item{display:block;padding:28px 0}
  .media-item figure{max-width:200px;margin-bottom:20px}
  .page-hero{padding:75px 9%}
  .page-hero.photo::before{background:linear-gradient(90deg,#f3ead9 0%,rgba(243,234,217,.92) 40%,rgba(243,234,217,.35) 100%)}
  .content{padding:75px 9%}
  .map{aspect-ratio:4/3}
  .grid{display:block}
  .grid figure{min-height:300px;margin-bottom:34px}
  .order{display:block}
  .order .button{margin:18px 0 0}
  .steps{display:block}
  .steps div{margin-bottom:28px}
  .step-photos{display:block;margin-top:40px}
  .step-photos figure{margin-bottom:24px}
  .cta-links{display:block}
  .cta-links a{margin-bottom:16px}
  footer{display:block;padding:52px 8%}
  footer>div{min-height:0;margin-bottom:32px}
  .footer-bottom{display:block;padding:28px 8%}
  .footer-bottom nav{gap:16px;flex-wrap:wrap;margin-bottom:18px}
  .box{padding:32px 24px;max-height:85vh}
}