/* ============================================================
   home.css — handcarelab TOPページ本体（front-page.php 専用）
   元の1枚HTMLの <style> から、hero〜trust の本体セクションを抽出。
   色・フォント変数は chrome-home.css 側で定義済み（全ページ共通で先に読み込まれる）。
   ============================================================ */

/* TOPページの背景（chrome-home.css では body 背景を指定しないため、ここで担保） */
body{background:var(--milk);}

/* リンクの既定（親テーマの青下線を打ち消す）。
   TOP本体のセクション内リンク（悩み別カード・ランキング詳細・コラム等）が対象。
   領域スコープで詳細度を上げ、GeneratePress 親テーマの a 指定に確実に勝たせる。 */
section a,
.hero a{color:inherit;text-decoration:none;}
section a:hover,
.hero a:hover{text-decoration:none;}

/* hero (全幅背景画像 + テキスト重ね) */
.hero{position:relative;overflow:hidden;color:var(--ink);
  background:linear-gradient(135deg,#cfeaf3,#a9d8ea);background-size:cover;background-position:center;
  /* 例) background:url('hero.jpg') center/cover no-repeat; */}
.hero:before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 40%,rgba(255,255,255,.2) 72%,rgba(255,255,255,0) 100%);}
.hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:480px;padding:64px 28px;}
.hero-copy{max-width:540px;}
.eyebrow{font-family:var(--fr);font-style:italic;font-size:15px;color:var(--plum);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:var(--ink);}
.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:#4F6B77;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(31,182,198,.35);}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(31,182,198,.45);}
.btn-line{background:#fff;color:var(--plum);border:1px solid var(--plum-soft);padding:15px 26px;}
.btn-line:hover{background:#E9F4F8;}

/* 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(40,70,95,.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,#eef5f9,#dcebf2);}
.concern b{font-size:13px;font-weight:700;}

/* ranking */
.rank{background:linear-gradient(var(--milk),#E6F1F6);}
.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(40,70,95,.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),#0f97a8);}
.rthumb{position:relative;height:180px;overflow:hidden;background-size:cover;background-position:center;}
.rt-a{background:radial-gradient(circle at 50% 30%,#eef5f9,#dcebf2);}
.rt-b{background:radial-gradient(circle at 50% 30%,#ecf7f9,#d2eef2);}
.rt-c{background:radial-gradient(circle at 50% 30%,#eef5fa,#dcebf3);}
/* 画像スロット: <img class="cover" src="..."> を入れると写真表示、無ければラベルが見える */
.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;}
.slot{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;letter-spacing:.08em;color:#2d7596;background:rgba(255,255,255,.72);padding:5px 12px;border-radius:14px;white-space:nowrap;}
.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:#E8F1F6;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),#0f97a8);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(31,182,198,.22);}

/* columns */
.columns{background:#E6F1F6;}
.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(40,70,95,.13);}
.athumb{height:128px;position:relative;background-size:cover;background-position:center;}
.athumb:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.35),transparent 45%);}
.at1{background:linear-gradient(135deg,#cfe6f0,#84bcd8);}
.at2{background:linear-gradient(135deg,#cfecef,#74cdd6);}
.at3{background:linear-gradient(135deg,#cde4f0,#86b8d6);}
.at4{background:linear-gradient(135deg,#d3eaf0,#8fcdd6);}
.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:#D4EDEF;color:var(--ink);border-top:1px solid #C2E3E6;}
.trust .shead h2{color:var(--ink);}
.trust .shead .en{color:var(--plum);}
.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:#FFFFFF;border:1px solid var(--champ-lt);}
.tcell h4{font-family:var(--serif);font-size:18px;color:var(--plum);margin-bottom:9px;}
.tcell p{font-size:13px;color:var(--sub);}

@media(max-width:880px){
  .hero .wrap{min-height:360px;padding:48px 28px;}
  .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;}
}