/* ============================================================
   home.css — TOPページ専用（front-page.php / is_front_page() でのみ読み込み）
   他ページには読み込まれないため、グローバルなリセットを使っても干渉しない。
   変数とヘッダー/フッターのデザインは chrome.css 側。
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);color:var(--ink);background:var(--milk);line-height:1.7;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
/* TOPのリンク：GeneratePress標準の a:hover / a:visited（青色・下線）を確実に打ち消す
   ※ class付きセレクタで優先度を上げ、未訪問/訪問済/ホバー/フォーカス全状態をカバー */
a.concern, a.concern:link, a.concern:visited, a.concern:hover, a.concern:focus,
a.acard,   a.acard:link,   a.acard:visited,   a.acard:hover,   a.acard:focus{
  color:inherit; text-decoration:none;
}
a.rdetail, a.rdetail:link, a.rdetail:visited, a.rdetail:focus{ color:var(--sub); text-decoration:none; }
a.rdetail:hover{ color:var(--plum); text-decoration:none; }
::selection{background:var(--champ-lt);}

/* signature: sheen line */
.sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.sheen:before{content:"";position:absolute;top:-40%;left:-30%;width:55%;height:200%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(8deg);filter:blur(6px);
  animation:sweep 7s ease-in-out infinite;}
@keyframes sweep{0%,100%{left:-35%;opacity:.5;}50%{left:75%;opacity:.9;}}

/* hero */
.hero{position:relative;background:
    radial-gradient(120% 120% at 88% 8%, #4a2a40 0%, var(--plum) 42%, #2b1726 100%);
  color:#F4ECF1;overflow:hidden;}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;min-height:430px;padding:56px 28px;}
.eyebrow{font-family:var(--fr);font-style:italic;font-size:15px;color:var(--champ-lt);letter-spacing:.04em;margin-bottom:18px;display:flex;align-items:center;gap:10px;}
.eyebrow:before{content:"";width:30px;height:1px;background:var(--champ);}
.hero h1{font-family:var(--serif);font-size:44px;line-height:1.5;font-weight:500;letter-spacing:.05em;}
.hero h1 .hl{position:relative;color:#fff;}
.hero h1 .hl:after{content:"";position:absolute;left:0;right:0;bottom:6px;height:9px;background:linear-gradient(90deg,var(--champ),var(--champ-lt));opacity:.45;z-index:-1;border-radius:4px;}
.hero p{margin-top:22px;font-size:14.5px;color:#D8C9D3;max-width:430px;}
.cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.btn{font-family:var(--sans);font-weight:700;border:none;cursor:pointer;border-radius:32px;font-size:14px;display:inline-flex;align-items:center;gap:9px;transition:transform .2s,box-shadow .2s,background .2s;}
.btn:focus-visible{outline:2px solid var(--champ-lt);outline-offset:3px;}
.btn-gold{background:linear-gradient(135deg,var(--champ-lt),var(--champ));color:var(--plum);padding:15px 30px;box-shadow:0 10px 26px rgba(201,162,75,.35);}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(201,162,75,.45);}
.btn-line{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.35);padding:15px 26px;}
.btn-line:hover{background:rgba(255,255,255,.16);}

/* hero shelf of glossy bottles */
.shelf{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:18px;height:300px;}
.bottle{position:relative;border-radius:16px 16px 10px 10px;box-shadow:0 22px 40px rgba(0,0,0,.35);}
.bottle:before{content:"";position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:26px;height:18px;background:#241019;border-radius:5px 5px 0 0;}
.bottle:after{content:"";position:absolute;top:12px;left:14%;width:16%;height:74%;background:linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,0));border-radius:8px;filter:blur(.5px);}
.bottle .lbl{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:72%;height:38%;background:rgba(255,255,255,.9);border-radius:5px;display:flex;align-items:center;justify-content:center;}
.bottle .lbl i{display:block;width:60%;height:3px;background:var(--plum-soft);border-radius:2px;box-shadow:0 7px 0 rgba(122,86,112,.4),0 -7px 0 rgba(122,86,112,.25);}
.ba{height:200px;width:80px;background:linear-gradient(150deg,#7a5670,var(--plum-2));}
.bb{height:250px;width:84px;background:linear-gradient(150deg,#e0c283,var(--champ));}
.bc{height:175px;width:76px;background:linear-gradient(150deg,#d8c8df,var(--lilac));}

/* section scaffold */
section{padding:64px 0;}
.shead{text-align:center;margin-bottom:40px;}
.shead .en{font-family:var(--fr);font-style:italic;font-size:16px;color:var(--champ);}
.shead h2{font-family:var(--serif);font-size:29px;font-weight:500;margin-top:6px;letter-spacing:.06em;}
.shead p{color:var(--sub);font-size:13px;margin-top:10px;}

/* concerns */
.concerns{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.concern{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px 10px;text-align:center;transition:transform .22s,box-shadow .22s,border-color .22s;}
.concern:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(58,34,51,.1);border-color:var(--lilac);}
.concern .ic{width:50px;height:50px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:23px;background:linear-gradient(135deg,#f3ecf1,#e8dde8);}
.concern b{font-size:13px;font-weight:700;}

/* ranking */
.rank{background:linear-gradient(var(--milk),#F0E8EC);}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:end;}
.rcard{position:relative;background:var(--paper);border-radius:20px;border:1px solid var(--line);overflow:hidden;transition:transform .22s,box-shadow .22s;}
.rcard:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(58,34,51,.16);}
.rcard.no1{border:1.5px solid var(--champ);box-shadow:0 18px 38px rgba(201,162,75,.22);}
.rank-tag{position:absolute;top:0;left:0;background:var(--plum);color:#fff;font-family:var(--fr);font-style:italic;font-size:13px;padding:6px 18px 8px;border-radius:0 0 16px 0;z-index:3;}
.no1 .rank-tag{background:linear-gradient(135deg,var(--champ),#a87f2c);}
.rthumb{position:relative;height:180px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;overflow:hidden;}
.rt-a{background:radial-gradient(circle at 50% 30%,#f7f1f5,#ece1e9);}
.rt-b{background:radial-gradient(circle at 50% 30%,#fbf6ec,#f1e7cf);}
.rt-c{background:radial-gradient(circle at 50% 30%,#f6f2f8,#e9e0ef);}
.mbot{position:relative;width:58px;height:120px;border-radius:12px 12px 7px 7px;box-shadow:0 12px 22px rgba(58,34,51,.22);}
.mbot:before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:20px;height:13px;background:#241019;border-radius:4px 4px 0 0;}
.mbot:after{content:"";position:absolute;top:9px;left:14%;width:15%;height:72%;background:linear-gradient(rgba(255,255,255,.7),transparent);border-radius:6px;}
.rbody{padding:18px 20px 22px;}
.rname{font-family:var(--serif);font-size:17px;font-weight:600;}
.rmaker{font-size:11.5px;color:var(--sub);margin-bottom:10px;}
.stars{font-size:13px;color:var(--champ);letter-spacing:1.5px;}
.stars b{color:var(--ink);font-size:13px;margin-left:7px;font-family:var(--fr);font-style:italic;}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:13px 0 15px;}
.tag{font-size:10.5px;background:#F4EEF2;border:1px solid var(--line);color:var(--plum-soft);padding:4px 11px;border-radius:14px;}
.price{display:flex;align-items:baseline;gap:7px;margin-bottom:15px;}
.price b{font-family:var(--serif);font-size:23px;color:var(--plum);}
.price s{font-size:12px;color:#b5adb1;}
.price em{font-style:normal;font-size:11px;color:var(--sub);}
.btn-buy{width:100%;justify-content:center;background:var(--plum);color:#fff;padding:14px;border-radius:12px;font-size:14px;font-weight:700;}
.btn-buy:hover{background:var(--plum-2);}
.no1 .btn-buy{background:linear-gradient(135deg,var(--champ),#a87f2c);color:#fff;}
.rdetail{display:block;text-align:center;margin-top:11px;font-size:12px;color:var(--sub);}
.rdetail:hover{color:var(--plum);}

/* compare feature */
.compare .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;}
.cpanel{position:relative;background:linear-gradient(150deg,var(--plum-2),var(--plum));border-radius:22px;height:280px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.cpanel .chip{position:relative;z-index:2;background:rgba(255,255,255,.92);color:var(--plum);font-family:var(--serif);font-weight:600;font-size:15px;padding:12px 24px;border-radius:30px;box-shadow:0 10px 24px rgba(0,0,0,.25);}
.compare h3{font-family:var(--serif);font-size:25px;line-height:1.6;font-weight:500;margin-bottom:16px;letter-spacing:.04em;}
.compare h3 mark{background:linear-gradient(transparent 62%,var(--champ-lt) 62%);color:inherit;}
.compare .lead{font-size:14px;color:#5e5560;margin-bottom:22px;}
.clist{list-style:none;margin-bottom:26px;}
.clist li{font-size:13.5px;padding:11px 0 11px 30px;position:relative;border-bottom:1px solid var(--line);}
.clist li:before{content:"";position:absolute;left:2px;top:15px;width:14px;height:14px;border-radius:50%;background:var(--champ);box-shadow:0 0 0 4px rgba(201,162,75,.18);}

/* columns */
.columns{background:#F0E8EC;}
.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.acard{background:var(--paper);border-radius:16px;overflow:hidden;border:1px solid var(--line);transition:transform .22s,box-shadow .22s;}
.acard:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(58,34,51,.13);}
.athumb{height:128px;position:relative;overflow:hidden;}
/* 記事サムネイル画像：src を入れると写真が表示され、未設定／読み込み失敗時は下のグラデーションがプレースホルダーになります */
.athumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;}
.athumb:after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(120deg,rgba(255,255,255,.35),transparent 45%);}
.at1{background:linear-gradient(135deg,#dcc8d6,#b990ac);}
.at2{background:linear-gradient(135deg,#e7dcc1,#cdb072);}
.at3{background:linear-gradient(135deg,#d4cad9,#a892b8);}
.at4{background:linear-gradient(135deg,#e3d2cf,#c79c98);}
.abody{padding:15px 16px 19px;}
.acat{display:inline-block;font-size:10.5px;color:#fff;background:var(--plum-soft);padding:3px 11px;border-radius:12px;margin-bottom:10px;}
.acard h4{font-size:14px;line-height:1.55;font-weight:700;}
.adate{font-family:var(--fr);font-style:italic;font-size:12px;color:var(--sub);margin-top:12px;}

/* trust */
.trust{background:var(--plum);color:#EEE3EB;}
.trust .shead h2{color:#fff;}
.trust .shead .en{color:var(--champ-lt);}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;text-align:center;}
.tcell .ic{width:62px;height:62px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:26px;background:rgba(255,255,255,.07);border:1px solid rgba(201,162,75,.4);}
.tcell h4{font-family:var(--serif);font-size:18px;color:#fff;margin-bottom:9px;}
.tcell p{font-size:13px;color:#C9BAC4;}

/* responsive */
@media(max-width:880px){
  .hero .wrap{grid-template-columns:1fr;}
  .shelf{height:240px;margin-top:10px;}
  .hero h1{font-size:36px;}
  .concerns{grid-template-columns:repeat(3,1fr);}
  .rgrid{grid-template-columns:1fr;}
  .compare .wrap{grid-template-columns:1fr;gap:26px;}
  .agrid{grid-template-columns:repeat(2,1fr);}
  .tgrid{grid-template-columns:1fr;gap:26px;}
}
@media(prefers-reduced-motion:reduce){
  .sheen:before{animation:none;}
  *{transition:none!important;}
}