/* ============================================================
   home.css — トップページ（占いing / 水色フェミニン）
   is_front_page 時のみ読み込み。変数は tokens.css。
   ============================================================ */
.home, .home * { box-sizing: border-box; }
.home { color: var(--c-text); font-family: var(--font-main); line-height: 1.8; background: var(--c-bg); }
.home a { text-decoration: none; }
.home img { max-width: 100%; height: auto; display: block; }

/* ---- 共通ボタン ---- */
.home-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; padding: 0.85em 2em; border-radius: 2rem; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; }
.home-btn--primary { background: var(--c-cta); color: #fff; box-shadow: 0 4px 0 rgba(210,76,123,0.30); }
.home-btn--primary:hover { transform: translateY(2px); box-shadow: 0 2px 0 rgba(210,76,123,0.30); }
.home-btn--ghost { background: #fff; color: var(--c-main); box-shadow: 0 4px 0 rgba(23,149,189,0.15); }
.home-btn--ghost:hover { transform: translateY(2px); box-shadow: 0 2px 0 rgba(23,149,189,0.15); }
.home-btn--outline { background: transparent; color: var(--c-cta); border: 2px solid var(--c-cta); }
.home-btn--outline:hover { background: var(--c-pink-light); }

/* ---- ヒーロー ---- */
.home-hero { background: linear-gradient(135deg, var(--c-main-light) 0%, #fff 55%, var(--c-pink-light) 100%); padding: 3.5rem 1.5rem 3rem; text-align: center; }
.home-hero__inner { max-width: 760px; margin: 0 auto; }
.home-hero__lead { font-size: 0.9rem; font-weight: 700; color: var(--c-main); letter-spacing: 0.05em; margin: 0 0 0.6rem; }
.home-hero__title { font-size: 2.1rem; font-weight: 700; line-height: 1.35; color: var(--c-text); margin: 0 0 0.9rem; }
.home-hero__title br { display: block; }
.home-hero__sub { font-size: 0.95rem; color: var(--c-text-muted); margin: 0 0 1.6rem; }
.home-hero__btns { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* ---- セクション枠 ---- */
.home-section { max-width: 1040px; margin: 0 auto; padding: 2.6rem 1.5rem 0; }
.home-section:last-child { padding-bottom: 3rem; }
.home-sec-head { text-align: center; margin-bottom: 1.6rem; }
.home-sec-head__en { display: block; font-family: var(--font-deco); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; color: var(--c-main); }
.home-sec-head__ja { font-size: 1.35rem; font-weight: 700; color: var(--c-text); margin: 0.2rem 0 0; position: relative; display: inline-block; }
.home-sec-head__ja::after { content: ''; display: block; width: 42px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--c-main), var(--c-pink)); margin: 0.5rem auto 0; }

/* ---- お悩みチップ ---- */
.home-worries { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.home-worries a { display: inline-block; background: #fff; border: 1.5px solid var(--c-border); color: var(--c-text); font-size: 0.86rem; font-weight: 500; padding: 0.55em 1.2em; border-radius: 2rem; transition: all 0.15s; box-shadow: var(--shadow); }
.home-worries a:hover { border-color: var(--c-main); color: var(--c-main); background: var(--c-main-light); }

/* ---- ランキング ---- */
.home-rank { display: flex; flex-direction: column; gap: 1.2rem; }
.rank-card { position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 1rem; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1.5px solid var(--c-border); padding: 1.3rem 1.4rem 1.4rem; }
.rank-card--1 { border-color: var(--c-main); }
.rank-card__badge span { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-family: var(--font-deco); font-weight: 800; font-size: 1.2rem; color: #fff; background: var(--c-main); }
.rank-card--1 .rank-card__badge span { background: #f4b740; }
.rank-card--2 .rank-card__badge span { background: #b9c4cb; }
.rank-card--3 .rank-card__badge span { background: #d9a877; }
.rank-card__name { font-size: 1.15rem; font-weight: 700; color: var(--c-text); margin: 0 0 0.7rem; }
.rank-card__specs { list-style: none; margin: 0 0 0.7rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; }
.rank-card__specs li { display: flex; align-items: center; gap: 0.35rem; background: var(--c-main-light); border-radius: 2rem; padding: 0.25em 0.8em; font-size: 0.78rem; }
.rank-card__specs li span { color: var(--c-text-muted); }
.rank-card__specs li strong { color: var(--c-main); font-weight: 700; }
.rank-card__point { font-size: 0.86rem; color: var(--c-text-muted); line-height: 1.75; margin: 0 0 0.5rem; }
.rank-card__for { font-size: 0.82rem; color: var(--c-text); margin: 0 0 1rem; }
.rank-card__for b { color: var(--c-main); }
.rank-card__cta { width: 100%; }
.home-more { text-align: center; margin-top: 1.6rem; }

/* ---- 選び方 ---- */
.home-howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.howto-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.5rem 1.3rem; text-align: center; }
.howto-card__no { width: 40px; height: 40px; margin: 0 auto 0.7rem; border-radius: 50%; background: linear-gradient(135deg, var(--c-main), var(--c-cta)); color: #fff; font-family: var(--font-deco); font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.howto-card h3 { font-size: 1rem; font-weight: 700; color: var(--c-text); margin: 0 0 0.4rem; }
.howto-card p { font-size: 0.84rem; color: var(--c-text-muted); line-height: 1.75; margin: 0; }

/* ---- 新着（post-grid は bloom-base.css を併読） ---- */
.home-section .post-grid { margin: 0; }

/* ---- 運営 about ---- */
.home-about { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); border-left: 5px solid var(--c-main); padding: 1.5rem 1.7rem; }
.home-about__title { font-size: 1rem; font-weight: 700; color: var(--c-main); margin: 0 0 0.5rem; }
.home-about__text { font-size: 0.88rem; color: var(--c-text-muted); line-height: 1.85; margin: 0; }

/* ---- レスポンシブ ---- */
@media (max-width: 720px) {
	.home-hero__title { font-size: 1.65rem; }
	.home-howto { grid-template-columns: 1fr; }
}

/* パステル多色：選び方カードを水色/桃/ラベンダーに出し分け */
.home-howto .howto-card:nth-child(1) { background: var(--c-main-light); }
.home-howto .howto-card:nth-child(2) { background: var(--c-pink-light); }
.home-howto .howto-card:nth-child(3) { background: var(--c-lav-light); }
.home-howto .howto-card:nth-child(1) .howto-card__no { background: var(--c-main); }
.home-howto .howto-card:nth-child(2) .howto-card__no { background: var(--c-cta); }
.home-howto .howto-card:nth-child(3) .howto-card__no { background: var(--c-lav); }
/* お悩みチップも淡いパステルで */
.home-worries a { background: var(--c-main-pale); }