/* ============================================================
   home.css — TOP（front-page.php）
   ============================================================ */
.sec{padding:56px 0}
.sec--mint{background:var(--mint)}
.sec--ice{background:var(--ice)}
.sec--mint .sec__line{background:#D2E6E8}

/* 02 メインビジュアル */
.mv{padding:40px 0 56px}
.mv__in{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:22px;align-items:start}
.mv__main{color:inherit;text-decoration:none}
.mv__main:hover{text-decoration:none}
.mv__media{aspect-ratio:16/9}
.mv__body{padding:20px}
.mv__title{font-size:20px;line-height:1.6}
.mv__body .btn{margin-top:16px;font-size:14px;padding:12px 28px}
.mv__side{display:flex;flex-direction:column;gap:22px}
.mv__side .card__media{aspect-ratio:16/9}

/* 03 商品カテゴリ */
.cats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;list-style:none}
.cats a{display:block;text-align:center;color:inherit;text-decoration:none}
.cats a:hover{text-decoration:none}
.cats a:hover .cats__ico{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.cats__ico{width:62px;height:62px;margin:0 auto;border-radius:50%;background:#fff;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;color:var(--teal);transition:.18s}
.cats__name{display:block;margin-top:11px;font-size:12px;font-weight:500;line-height:1.6}
.cats .n{display:block;margin-top:2px}

/* 05 新着 */
.rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.row{display:flex;background:#fff;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow);color:inherit;text-decoration:none}
.row:hover{text-decoration:none;box-shadow:var(--shadow-md)}
.row__media{width:116px;flex:none;background:var(--mint)}
.row__media img{width:100%;height:100%;object-fit:cover}
.row__body{padding:14px 16px}
.row__title{font-size:13.5px;line-height:1.8;font-weight:500;margin-top:9px}

/* 06 ランキング */
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.tab{font-family:var(--round);font-size:13px;padding:9px 22px;border-radius:999px;border:1px solid #D5E6E9;background:#fff;color:#5B6F76;cursor:pointer}
.tab:hover{border-color:var(--teal);color:var(--teal-ink)}
.tab.is-on{background:var(--teal);border-color:var(--teal);color:#fff}
.panel .center{margin-top:28px}
.card--rank .card__body .btn--ghost{width:100%;margin-top:11px}

/* 08 悩み */
.concerns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none}
.concerns a{display:flex;align-items:center;gap:15px;background:#fff;border-radius:var(--r-m);padding:16px;box-shadow:var(--shadow);color:inherit;text-decoration:none}
.concerns a:hover{text-decoration:none;box-shadow:var(--shadow-md)}
.concerns__ico{width:46px;height:46px;border-radius:50%;background:var(--mint);flex:none;display:flex;align-items:center;justify-content:center;color:var(--teal)}
.concerns__body{flex:1}
.concerns__name{display:block;font-size:14px;font-weight:700;font-family:var(--round)}
.concerns .n{display:block;margin-top:3px}
.concerns .ico{color:var(--mute)}

/* 10 編集方針 */
.policy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;margin:36px 0 34px}
.policy__ico{width:66px;height:66px;margin:0 auto;border-radius:50%;background:#fff;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;color:var(--teal)}
.policy__h{margin:14px 0 0;font-size:15px;font-weight:700;font-family:var(--round)}
.policy__t{margin:8px 0 0;font-size:12.5px;color:var(--sub);line-height:1.9}
.policy__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media (max-width:980px){
  .mv__in{grid-template-columns:1fr}
  .mv__side{flex-direction:row}
  .mv__side>*{flex:1}
  .cats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .concerns,.policy{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .sec{padding:40px 0}
  .mv__side{flex-direction:column}
  .cats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rows{grid-template-columns:1fr}
  .concerns,.policy{grid-template-columns:1fr}
}