/*
Theme Name: Ecstatic Liquor
Description: Ecstatic-liquor 専用テーマ(黒基調のクラフトジンサイト)
Version: 1.0.0
Author: Ecstatic-liquor
Text Domain: ecstatic-liquor
*/

:root{
  --bg:#0e0c0b; --bg2:#1a1715; --text:#f2ece4; --muted:rgba(242,236,228,.72);
  --line:rgba(242,236,228,.18); --accent:#CD4121; --accent-l:#E0603F; --gold:#c9a86a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Noto Sans JP',sans-serif; font-weight:300; line-height:1.9; letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
a{color:var(--text); text-decoration:none; transition:color .3s, background .3s, border-color .3s}
a:hover{color:var(--accent-l)}
h1,h2,h3,h4{margin:0; font-family:'Shippori Mincho',serif; font-weight:400; letter-spacing:.12em; line-height:1.5}
p{margin:0}
.serif{font-family:'Shippori Mincho',serif; font-weight:400}
.en{font-family:'Cormorant Garamond',serif}
.wrap{padding-left:80px; padding-right:80px}
.screen-reader-text{position:absolute; left:-9999px}

/* header */
.hd{height:96px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:10; background:var(--bg)}
.logo{font-family:'Cormorant Garamond',serif; font-size:30px; letter-spacing:.14em; font-weight:600; white-space:nowrap}
.nav{display:flex; gap:44px; align-items:center; font-size:13px; letter-spacing:.2em}
.nav a{white-space:nowrap}
.nav ul{list-style:none; margin:0; padding:0; display:flex; gap:44px}
.nav .cart{border:1px solid rgba(242,236,228,.5); padding:10px 24px}
.nav .cart:hover{border-color:var(--accent-l)}
.mnav{display:none}

/* buttons */
.btn{display:inline-block; padding:18px 44px; font-size:14px; letter-spacing:.25em; line-height:1.4; text-align:center}
.btn-fill{background:var(--accent); color:#fff}
.btn-fill:hover{background:var(--accent-l); color:#fff}
.btn-line{border:1px solid var(--text)}
.btn-line:hover{border-color:var(--accent-l)}
.btn-sm{padding:14px 36px; font-size:13px}

/* hero */
.hero{min-height:760px; display:flex; align-items:center; gap:clamp(40px,5vw,80px); padding-top:40px; padding-bottom:40px}
.hero-txt{flex:1 1 0; display:flex; flex-direction:column; gap:32px}
.eyebrow{font-family:'Cormorant Garamond',serif; font-size:16px; letter-spacing:.4em; color:var(--gold)}
.hero h1{font-size:clamp(38px,4.3vw,76px); line-height:1.35; letter-spacing:.1em}
.ph{display:inline-block}
.hero p{font-size:17px; line-height:2; max-width:520px; color:var(--muted)}
.hero-btns{display:flex; gap:20px; margin-top:16px; flex-wrap:wrap}
.hero-vis{width:clamp(380px,44vw,600px); height:clamp(460px,48vw,620px); flex-shrink:0; border:1px solid var(--line); display:flex; align-items:flex-end; justify-content:center; gap:8px; padding-bottom:72px}
.hero-vis svg,.hero-vis img{display:block; max-width:32%; height:auto; max-height:460px; object-fit:contain}

/* award */
.award{height:96px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:40px; font-family:'Cormorant Garamond',serif; letter-spacing:.3em; font-size:20px}
.award .g{color:var(--gold)}
.award .ja{font-family:'Shippori Mincho',serif; font-size:18px; letter-spacing:.2em}

/* products */
.sel{padding-top:112px; padding-bottom:112px}
.sec-head{text-align:center; margin-bottom:56px}
.sec-head h2{font-size:44px; letter-spacing:.14em; margin-top:12px}
.cards{display:flex; flex-wrap:wrap; gap:40px}
.card{flex:1 1 280px; border:1px solid var(--line); padding:36px 32px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; transition:border-color .3s}
.card:hover{border-color:var(--accent)}
.card .tag{font-size:12px; letter-spacing:.3em; color:var(--gold)}
.card svg,.card img{width:110px; height:300px; object-fit:contain; display:block}
.card .nm{font-size:32px; letter-spacing:.16em; line-height:1.4}
.card .ds{font-size:14px; color:var(--muted)}
.card .sp{font-size:13px; color:rgba(242,236,228,.6)}
.card .btn{margin-top:8px}

/* カードのボタン */
.card .btns{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px}
.card .btns .btn{margin-top:0}

/* 商品の専用ページ */
.pd{padding-top:32px; padding-bottom:100px}
.crumb{font-size:12px; letter-spacing:.12em; color:rgba(242,236,228,.6); display:flex; gap:10px; flex-wrap:wrap; padding:24px 0}
.crumb a{color:rgba(242,236,228,.75)}
.pd-top{display:flex; align-items:center; gap:clamp(40px,6vw,96px); padding:32px 0 72px}
.pd-img{flex:0 0 min(44%,520px)}
.pd-img.is-photo img.photo{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block}
.pd-img.is-ill{border:1px solid var(--line); height:520px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:48px}
.pd-img.is-ill svg{width:200px; height:auto}
.pd-info{flex:1 1 0; display:flex; flex-direction:column; gap:20px}
.pd-info .tag{font-size:12px; letter-spacing:.3em; color:var(--gold)}
.pd-info .nm{font-size:clamp(34px,4vw,56px); letter-spacing:.14em}
.pd-info .lead{font-size:18px; line-height:2; color:var(--muted)}
.pd-info .sp{font-size:14px; color:rgba(242,236,228,.65)}
.pd-info .btns{display:flex; gap:16px; flex-wrap:wrap; margin-top:12px}
.pd-body{max-width:820px; margin:0 auto; padding:56px 0; border-top:1px solid var(--line)}
.pd-body h2{font-size:30px; margin:0 0 24px; border-bottom:0; padding-bottom:0}
.pd-body ul{padding-left:1.4em}
.pd-buy{text-align:center; padding:24px 0 72px}
.pd-more{border-top:1px solid var(--line); padding-top:64px}
.pd-more h2{font-size:28px; letter-spacing:.2em; margin-bottom:32px}

/* 商品写真 */
.card img.photo{width:100%; max-width:320px; height:auto; aspect-ratio:1/1; object-fit:cover}
.hero-vis img.photo{width:auto; max-width:32%; height:auto; aspect-ratio:auto; object-fit:contain; max-height:460px}
/* ヒーロー:写真が入っているときは、3枚を並べたタイル表示にする */
.hero-vis.has-photo{display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:12px; align-items:center; width:clamp(440px,52vw,720px); height:auto; padding:0; border:0}
.hero-vis.has-photo img.photo{width:100%; max-width:none; max-height:none; height:auto; aspect-ratio:4/5; object-fit:cover}
/* 見せ方:3枚を同じ大きさで縦長に */
.hero-vis.has-photo.hv-equal{grid-template-columns:repeat(3,1fr); gap:10px}
.hero-vis.has-photo.hv-equal img.photo{aspect-ratio:3/4}
/* 見せ方:1本だけ大きく */
.hero-vis.has-photo.hv-single{grid-template-columns:1fr; width:clamp(360px,40vw,560px)}
.hero-vis.has-photo.hv-single img.photo{aspect-ratio:4/5}
.item-img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; margin:-4px 0 4px; background:var(--bg2)}
.item{overflow:hidden}

/* story */
.story{min-height:700px; display:flex; align-items:center; gap:96px; border-top:1px solid var(--line); padding-top:60px; padding-bottom:60px}
.story-img{width:560px; height:460px; flex-shrink:0; border:1px solid var(--line); background:var(--bg2); display:flex; align-items:center; justify-content:center; font-size:12px; letter-spacing:.2em; color:rgba(242,236,228,.45); overflow:hidden}
.story-img img{width:100%; height:100%; object-fit:cover; display:block}
.story-txt{flex:1 1 0; display:flex; flex-direction:column; gap:28px}
.story h2{font-size:42px; letter-spacing:.12em}
.story p{font-size:16px; line-height:2.1; color:rgba(242,236,228,.8)}
.more{align-self:flex-start; border-bottom:1px solid var(--text); padding-bottom:6px; font-size:13px; letter-spacing:.25em}

/* lineup */
.line{border-top:1px solid var(--line); padding-top:88px; padding-bottom:88px}
.line-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:40px}
.line-head h2{font-family:'Cormorant Garamond',serif; font-size:36px; letter-spacing:.2em}
.line-head a{font-size:13px; letter-spacing:.25em}
.grid{display:flex; gap:24px}
.item{flex:1 1 0; min-height:240px; min-width:0; border:1px solid var(--line); padding:28px 22px; display:flex; flex-direction:column; justify-content:space-between; gap:16px}
.item:hover{border-color:var(--accent)}
.item .n{font-size:22px; letter-spacing:.08em; line-height:1.4}
.item .d{font-size:12px; color:rgba(242,236,228,.65); line-height:1.8}
.item .p{font-size:14px}

/* footer */
.ft{border-top:1px solid var(--line); padding-top:72px; padding-bottom:48px; display:flex; flex-direction:column; gap:36px}
.ft-top{display:flex; justify-content:space-between; align-items:flex-start; gap:24px}
.ft-links{display:flex; gap:40px; font-size:13px; letter-spacing:.15em; flex-wrap:wrap}
.ft p{font-size:12px; line-height:2; color:rgba(242,236,228,.62); max-width:760px}
.copy{font-size:12px; color:rgba(242,236,228,.5)}

/* 固定ページ・投稿 */
.page-wrap{max-width:900px; margin:0 auto; padding:96px 24px 120px}
.page-wrap.is-elementor{max-width:none; padding:0; margin:0}
.page-title{font-size:40px; margin-bottom:56px; text-align:center; letter-spacing:.16em}
.entry-content{font-size:16px; line-height:2.1; color:rgba(242,236,228,.88)}
.entry-content h2{font-size:30px; margin:64px 0 24px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.entry-content h3{font-size:22px; margin:40px 0 16px}
.entry-content p{margin-bottom:1.6em}
.entry-content a{border-bottom:1px solid rgba(242,236,228,.4)}
.entry-content table{width:100%; border-collapse:collapse}
.entry-content th,.entry-content td{border:1px solid var(--line); padding:14px 18px; text-align:left; vertical-align:top}
.entry-content th{color:var(--gold); font-weight:400; white-space:nowrap}
.entry-content input[type=text],.entry-content input[type=email],.entry-content input[type=tel],.entry-content textarea,.entry-content select{
  width:100%; background:transparent; border:1px solid var(--line); color:var(--text); padding:14px 16px; font:inherit; border-radius:0}
.entry-content input:focus,.entry-content textarea:focus{outline:none; border-color:var(--accent-l)}
.entry-content input[type=submit],.entry-content button[type=submit]{
  background:transparent; color:var(--text); border:1px solid var(--text); padding:16px 48px; letter-spacing:.25em; cursor:pointer; font:inherit; border-radius:0}
.entry-content input[type=submit]:hover,.entry-content button[type=submit]:hover{background:var(--accent); border-color:var(--accent)}
.post-list article{border-bottom:1px solid var(--line); padding:32px 0}
.post-list h2{font-size:24px}
.nf{text-align:center; padding:160px 24px}
.nf h1{font-size:64px; margin-bottom:24px}

/* キーボード操作時のフォーカス */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold); outline-offset:4px}

/* ---- ノートPC ---- */
@media (max-width:1300px){
  .wrap{padding-left:48px; padding-right:48px}
  .nav{gap:28px}
  .card{padding:32px 20px}
  .card .nm{font-size:26px}
}
/* ---- タブレット ---- */
@media (max-width:1100px){
  .hero{gap:48px}
  .hero h1{font-size:56px}
  .hero-vis{width:440px; height:520px}
  .hero-vis.has-photo{width:clamp(360px,46vw,520px); height:auto}
  .cards{gap:20px}
  .grid{flex-wrap:wrap}
  .item{flex:1 1 30%}
}
/* ---- スマホ ---- */
@media (max-width:820px){
  .wrap{padding-left:24px; padding-right:24px}
  .hd{height:72px}
  .logo{font-size:22px}
  .nav{display:none}
  .mnav{display:block; position:relative}
  .mnav summary{list-style:none; cursor:pointer; border:1px solid rgba(242,236,228,.5); padding:8px 18px; font-size:12px; letter-spacing:.2em}
  .mnav summary::-webkit-details-marker{display:none}
  .mnav .panel{position:absolute; right:0; top:52px; width:260px; background:var(--bg); border:1px solid var(--line); padding:12px 24px; display:flex; flex-direction:column}
  .mnav .panel a{padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; letter-spacing:.15em}
  .mnav .panel a:last-child{border-bottom:none}
  .hero{flex-direction:column; align-items:stretch; min-height:0; gap:40px; padding-top:48px; padding-bottom:48px}
  .hero h1{font-size:40px}
  .hero p{font-size:15px}
  .hero-btns .btn{flex:1 1 100%}
  .hero-vis{width:100%; height:380px; padding-bottom:40px}
  .hero-vis.has-photo,.hero-vis.has-photo.hv-single{width:100%; height:auto; padding-bottom:0; gap:8px}
  .award{height:auto; padding:24px 16px; gap:14px; flex-wrap:wrap; font-size:16px; letter-spacing:.2em}
  .sel{padding-top:72px; padding-bottom:72px}
  .sec-head{margin-bottom:36px}
  .sec-head h2{font-size:32px}
  .cards{flex-direction:column}
  .story{flex-direction:column; gap:40px; min-height:0; padding-top:56px; padding-bottom:56px}
  .story-img{width:100%; height:280px}
  .story h2{font-size:30px}
  .line{padding-top:56px; padding-bottom:56px}
  .item{flex:1 1 calc(50% - 12px); min-height:200px}
  .ft{padding-top:48px}
  .ft-top{flex-direction:column}
  .ft-links{gap:20px}
  .page-wrap{padding:56px 20px 80px}
  .pd-top{flex-direction:column; align-items:stretch; padding-bottom:48px}
  .pd-img{flex:none; width:100%}
  .pd-img.is-ill{height:400px}
  .pd-info .lead{font-size:16px}
  .pd-info .btns .btn{flex:1 1 100%}
  .page-title{font-size:28px; margin-bottom:36px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}