/* refinement layer — 黒×金路線の磨き込み（既存スタイルへの上書き・追加） */

/* film grain：全体に微細な粒状感で上質な奥行き */
body::after{content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

/* 暗いセクションに金のやわらかな発光＋余白の奥行き */
.dark{position:relative;overflow:hidden;}
.dark>.wrap{position:relative;z-index:2;}
.dark::before{content:"";position:absolute;top:-15%;left:50%;width:78%;height:120%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 38%,rgba(201,162,74,.11),transparent 60%);pointer-events:none;z-index:0;}

/* ヒーロー：ゆっくりズーム・細い金額縁・大きな見出し */
.hero .bg{animation:kenburns 24s ease-in-out infinite alternate;will-change:transform;}
@keyframes kenburns{from{transform:scale(1.015)}to{transform:scale(1.1)}}
.hero::after{content:"";position:absolute;inset:22px;border:1px solid rgba(230,201,126,.20);pointer-events:none;z-index:1;}
.hero-in{z-index:3;}
.hero h1{font-size:clamp(54px,8.6vw,112px);letter-spacing:.06em;line-height:1.07;}
.hero .sub{letter-spacing:.05em;}
.hero .lead{line-height:2.05;}
.scrollcue{letter-spacing:.42em;}

/* 見出し・キッカーの精緻化 */
.kicker{font-size:11px;letter-spacing:.5em;}
.eyebrow .ln{width:56px;}
.htitle{letter-spacing:.02em;line-height:1.34;}
.num{font-size:82px;}

/* セクションの余白を広く（リズム） */
.sec{padding:148px 0;}

/* 写真：細い金フレーム＋ホバーでそっと拡大 */
.story-img,.feat-img{position:relative;}
.story-img::after,.feat-img::after{content:"";position:absolute;inset:0;border:1px solid rgba(201,162,74,.22);border-radius:inherit;pointer-events:none;z-index:2;}
.story-img img,.feat-img img{transition:transform 1.5s cubic-bezier(.2,.7,.2,1);}
.story-img:hover img,.feat-img:hover img{transform:scale(1.05);}

/* ボタン：金の光沢が走る */
.btn{letter-spacing:.1em;}
.btn-gold{position:relative;overflow:hidden;}
.btn-gold::after{content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .75s ease;}
.btn-gold:hover::after{left:150%;}

/* カード・要素の陰影を精緻化 */
.card.feature{box-shadow:0 34px 64px -32px rgba(201,162,74,.28);}
.eat{transition:transform .4s,background .35s,border-color .35s;}
.eat:hover{transform:translateY(-4px);}
.faq summary{padding:26px 4px;}

/* スクロール演出のイージングを上品に */
.reveal{transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);}

@media(max-width:900px){
  .sec{padding:88px 0;}
  .hero h1{font-size:clamp(42px,12vw,66px);}
  .hero::after{inset:14px;}
}

/* 商品カードのサムネイル写真（見やすさ向上） */
.card .thumb{display:block;width:calc(100% + 52px);height:152px;object-fit:cover;margin:-30px -26px 20px;border-radius:6px 6px 0 0;transition:transform 1s cubic-bezier(.2,.7,.2,1);}
.card:hover .thumb{transform:scale(1.05);}

/* トップ「3つのこだわり」写真セクション */
.kgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:46px;}
.kimg{border-radius:6px;overflow:hidden;position:relative;box-shadow:0 24px 50px -30px rgba(40,30,10,.4);}
.kimg img{width:100%;height:230px;object-fit:cover;display:block;transition:transform 1.3s cubic-bezier(.2,.7,.2,1);}
.kcard:hover .kimg img{transform:scale(1.05);}
.kimg::after{content:"";position:absolute;inset:0;border:1px solid rgba(201,162,74,.22);border-radius:inherit;pointer-events:none;}
.kcard h3{font-family:'Shippori Mincho',serif;font-size:21px;color:#26201a;margin:20px 0 8px;}
.kcard p{font-size:14.5px;color:#6E6553;line-height:1.85;}
@media(max-width:900px){.kgrid{grid-template-columns:1fr;gap:24px;}}

/* ヒーロー：商品写真（蜜の断面）を主役に差し替え */
.hero .bg{background-image:url(../images/hero-aso.jpg);background-position:center;background-size:cover;}

/* ヒーロー：合成画像(干し芋＋阿蘇)を主役に・左だけ暗く文字を載せる */
.hero .bg{background-image:url(../images/hero-aso.jpg);}
.hero .grad{background:linear-gradient(90deg,rgba(8,7,5,.86) 0%,rgba(8,7,5,.5) 26%,rgba(8,7,5,.1) 50%,rgba(8,7,5,0) 100%);}

/* ヒーロー直下のバリューバー（価値を一瞬で伝える） */
.valuebar{background:#100D0A;border-top:1px solid rgba(201,162,74,.18);border-bottom:1px solid rgba(201,162,74,.18);padding:24px 0;}
.vb{display:flex;justify-content:center;gap:52px;flex-wrap:wrap;}
.vbi{display:flex;align-items:center;gap:14px;}
.vbi i{width:26px;height:26px;color:#C9A24A;flex-shrink:0;}
.vbi b{display:block;color:#F0E8D6;font-size:15.5px;font-family:'Shippori Mincho',serif;letter-spacing:.02em;}
.vbi span{color:#9a9078;font-size:12px;}
@media(max-width:760px){.vb{gap:18px;}.vbi{flex:1 1 100%;justify-content:flex-start;padding-left:8%;}}

/* 食べ方カードに写真 */
.eat{overflow:hidden;}
.eat .ethumb{display:block;width:calc(100% + 48px);height:144px;object-fit:cover;margin:-40px -24px 22px;border-radius:6px 6px 0 0;transition:transform 1s cubic-bezier(.2,.7,.2,1);}
.eat:hover .ethumb{transform:scale(1.05);}

/* ===== スマホ：ヘッダーのドロップダウンメニュー ===== */
@media(max-width:900px){
  .hbuy{margin-left:auto;padding:9px 12px;font-size:0;gap:0;}
  .hbuy i{width:18px;height:18px;}
  .hbuy span{display:none;}
  .burger{margin-left:14px;}
  .menu{position:absolute;top:calc(100% + 10px);right:14px;left:14px;margin:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(14,12,10,.98);backdrop-filter:blur(12px);
    border:1px solid rgba(230,201,126,.22);border-radius:14px;padding:10px;
    box-shadow:0 20px 54px rgba(0,0,0,.55);display:none;}
  .menu.open{display:flex;}
  .menu a{display:block;padding:14px 16px;font-size:16px;opacity:1;border-radius:9px;letter-spacing:.04em;}
  .menu a:active{background:rgba(201,162,74,.14);}
}

/* ===== スマホ：ヒーローを「上=写真／下=濃色＋文字」に ===== */
@media(max-width:760px){
  .hero{min-height:0;display:block;background:var(--ink);}
  .hero .bg{height:52vh;bottom:auto;background-image:url(../images/hero-aso.jpg);background-position:82% center;background-size:cover;}
  .hero .grad{height:52vh;bottom:auto;
    background:linear-gradient(to bottom,rgba(8,7,5,.45) 0%,rgba(8,7,5,.05) 32%,rgba(8,7,5,.1) 62%,rgba(8,7,5,.78) 100%);}
  .hero::after{display:none;}
  .hero-in{margin-top:52vh;background:var(--ink);padding:30px 26px 42px;}
  .hero h1{font-size:clamp(40px,11vw,60px);color:var(--gold-bright);margin:14px 0 6px;}
  .hero .sub{color:var(--gold-bright);font-size:19px;margin-top:4px;}
  .hero .lead{max-width:none;color:#EBE0C8;font-size:16px;line-height:1.95;margin:18px 0 28px;}
  .hero .cta{gap:12px;}
  .hero .cta .btn{flex:1 1 100%;justify-content:center;}
  .scrollcue{display:none;}
}