/*!
 * okanemaru top page
 * Mobile First：基本スタイルはスマホ幅を基準に書き、
 * min-width のメディアクエリで段階的にデスクトップへ広げる。
 */

.okm-top { background: var(--okm-color-bg); }

/* ===================================================
 * HERO
 * =================================================== */
.okm-hero {
  padding-block: var(--okm-space-7);
  background: linear-gradient(180deg, var(--okm-color-primary-light) 0%, var(--okm-color-bg) 100%);
  text-align: center;
}
.okm-hero__inner {
  max-width: var(--okm-page-max-width);
  margin-inline: auto;
  padding-inline: var(--okm-container-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--okm-space-4);
}
.okm-hero__mascot {
  width: 148px;
  height: 148px;
}
.okm-hero__mascot img { width: 100%; height: 100%; object-fit: contain; }
.okm-hero__catch {
  font-size: var(--okm-font-size-2xl);
  font-weight: var(--okm-font-weight-black);
  color: var(--okm-color-text);
  line-height: var(--okm-line-height-tight);
  margin: 0;
}
.okm-hero__catch em {
  font-style: normal;
  color: var(--okm-color-accent);
}
.okm-hero__sub {
  font-size: var(--okm-font-size-base);
  color: var(--okm-color-text-muted);
  max-width: 32em;
  margin: 0;
}
.okm-hero__cta { margin-top: var(--okm-space-2); }

@media (min-width: 768px) {
  .okm-hero { padding-block: var(--okm-space-9); }
  .okm-hero__mascot { width: 180px; height: 180px; }
  .okm-hero__catch { font-size: var(--okm-font-size-3xl); }
}

/* ===================================================
 * はじめての人向け
 * =================================================== */
.okm-beginner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--okm-space-4);
}
.okm-beginner-card {
  display: flex;
  align-items: center;
  gap: var(--okm-space-3);
  padding: var(--okm-space-4);
  min-height: 64px;
}
.okm-beginner-card__index {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: var(--okm-radius-full);
  background: var(--okm-color-primary);
  color: var(--okm-color-primary-contrast);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--okm-font-weight-bold);
  font-size: var(--okm-font-size-sm);
}
.okm-beginner-card__title { font-weight: var(--okm-font-weight-bold); font-size: var(--okm-font-size-base); margin: 0; }
.okm-beginner-card__excerpt { font-size: var(--okm-font-size-xs); color: var(--okm-color-text-muted); margin: 2px 0 0; }

@media (min-width: 640px) {
  .okm-beginner-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .okm-beginner-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===================================================
 * 4大カテゴリ タイル
 * =================================================== */
.okm-category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--okm-space-4);
}
.okm-category-tile {
  display: block;
  padding: var(--okm-space-5) var(--okm-space-4);
  text-align: center;
  background: var(--okm-color-surface);
}
.okm-category-tile__icon { font-size: 2rem; display: block; margin-bottom: var(--okm-space-2); }
.okm-category-tile__label {
  font-size: var(--okm-font-size-lg);
  font-weight: var(--okm-font-weight-black);
  color: var(--okm-color-text);
  margin: 0 0 4px;
}
.okm-category-tile__desc { font-size: var(--okm-font-size-xs); color: var(--okm-color-text-muted); margin: 0; }
.okm-category-tile:hover { text-decoration: none; }

@media (min-width: 768px) {
  .okm-category-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===================================================
 * おすすめ記事 / 新着記事（共通カード）
 * =================================================== */
.okm-post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--okm-space-5);
}
.okm-post-card { display: flex; flex-direction: column; }
.okm-post-card__thumb {
  aspect-ratio: 16 / 9;
  background: var(--okm-color-bg-alt);
  overflow: hidden;
}
.okm-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.okm-post-card__body { padding: var(--okm-space-4); display: flex; flex-direction: column; gap: var(--okm-space-2); flex: 1; }
.okm-post-card__cat {
  align-self: flex-start;
  font-size: var(--okm-font-size-xs);
  font-weight: var(--okm-font-weight-bold);
  color: var(--okm-color-primary-contrast);
  background: var(--okm-color-primary-light);
  border-radius: var(--okm-radius-sm);
  padding: 2px 8px;
}
.okm-post-card__title {
  font-size: var(--okm-font-size-base);
  font-weight: var(--okm-font-weight-bold);
  color: var(--okm-color-text);
  margin: 0;
  line-height: var(--okm-line-height-tight);
}
.okm-post-card__excerpt {
  font-size: var(--okm-font-size-sm);
  color: var(--okm-color-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.okm-post-card__date { font-size: var(--okm-font-size-xs); color: var(--okm-color-text-muted); margin-top: auto; }
.okm-post-card:hover .okm-post-card__title { text-decoration: underline; }

@media (min-width: 640px) {
  .okm-post-grid--2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .okm-post-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .okm-post-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ===================================================
 * お金丸の運用日誌（専用デザイン）
 * =================================================== */
.okm-diary {
  background: var(--okm-color-primary-contrast);
  color: var(--okm-color-text-inverse);
  border-radius: var(--okm-radius-lg);
  padding: var(--okm-space-6) var(--okm-space-5);
}
.okm-diary .okm-section-title,
.okm-diary .okm-section-lead { color: var(--okm-color-text-inverse); }
.okm-diary .okm-section-lead { color: #D9CFC0; }
.okm-diary__mascot { width: 56px; height: 56px; margin-inline: auto var(--okm-space-2); }
.okm-diary .okm-post-card {
  background: rgba(255, 251, 242, 0.06);
  border: 1px solid rgba(255, 251, 242, 0.16);
  border-radius: var(--okm-radius-md);
}
.okm-diary .okm-post-card__title,
.okm-diary .okm-post-card__excerpt,
.okm-diary .okm-post-card__date { color: var(--okm-color-text-inverse); }
.okm-diary .okm-post-card__excerpt { color: #D9CFC0; }
.okm-diary-empty {
  text-align: center;
  padding: var(--okm-space-7) var(--okm-space-4);
  border: 1px dashed rgba(255, 251, 242, 0.3);
  border-radius: var(--okm-radius-md);
  color: #D9CFC0;
}

/* ===================================================
 * サービス紹介導線（広告感を抑えた比較導線）
 * =================================================== */
.okm-service-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--okm-space-4);
}
@media (min-width: 768px) {
  .okm-service-intro { grid-template-columns: repeat(3, 1fr); }
}