/* front-page.css — mibilog.com v3 */

/* SWELL レイアウト上書き */
body.home .l-sidebar,
body.home #sidebar             { display: none !important; }
body.home .l-wrap,
body.home .l-contents,
body.home .l-main              { max-width: 100% !important; padding: 0 !important; }
body.home .p-pageTitle,
body.home .c-pageTitle         { display: none !important; }

/* 変数 */
:root {
  --g:   #6aaa78;
  --b:   #5a9ec8;
  --bg:  #f4f8f5;
  --r:   14px;
  --max: 800px;
}

/* ラッパー */
#fp {
  max-width: var(--max);
  margin: 0 auto;
  background: var(--bg);
}

/* 共通 */
.fp-ttl      { font-size: 1rem; font-weight: 700; color: #333; margin: 0; }
.fp-more     { font-size: .8rem; color: var(--g); font-weight: 600; text-decoration: none; }
.fp-sec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.fp-tag {
  display: inline-block;
  background: var(--g);
  color: #fff;
  font-size: .65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

/* ① ヒーロー */
.fp-hero {
  background: var(--g);
  padding: 48px 24px 52px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.fp-hero-deco {
  position: absolute;
  right: -8px; bottom: -8px;
  width: 160px; height: 160px;
  object-fit: contain;
  opacity: .15;
  pointer-events: none;
}
.fp-hero-body { position: relative; z-index: 1; }
.fp-hero-label {
  display: inline-block;
  color: rgba(255,255,255,.8);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  border: 1px solid rgba(255,255,255,.5);
  padding: 2px 10px;
  border-radius: 4px;
  margin: 0 0 12px;
}
.fp-hero-text {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.8;
  margin: 0 0 22px;
}
.fp-hero-btn {
  display: inline-block;
  background: #fff;
  color: var(--g);
  font-weight: 700;
  font-size: .9rem;
  padding: 10px 30px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: opacity .2s;
}
.fp-hero-btn:hover { opacity: .85; }

/* ② カテゴリピル */
.fp-pills { background: #fff; padding: 14px 0; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.fp-pills-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 16px;
  scrollbar-width: none;
}
.fp-pills-row::-webkit-scrollbar { display: none; }
.fp-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: var(--bg);
  border: 1.5px solid #c8e0cc;
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  text-decoration: none;
  color: var(--g);
  font-weight: 700;
  font-size: .85rem;
  transition: background .2s;
}
.fp-pill:hover { background: #d2ecd4; }
.fp-pill-ico { width: 28px; height: 28px; object-fit: contain; border-radius: 50%; flex-shrink: 0; }

/* ③ カテゴリカード */
.fp-catcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px;
  background: var(--bg);
}
.fp-catcard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px 12px;
  border-radius: var(--r);
  text-decoration: none;
  color: #333;
  border: 1.5px solid;
  transition: transform .2s, box-shadow .2s;
}
.fp-catcard:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.fp-catcard--ca { background: #e0f0e4; border-color: #b8d8bc; }
.fp-catcard--cb { background: #daeef6; border-color: #9eccd8; }
.fp-catcard--cc { background: #e4f2e6; border-color: #bcdabe; }
.fp-catcard--cd { background: #d6ecf4; border-color: #98c8d6; }
.fp-catcard-top { display: flex; justify-content: space-between; align-items: center; }
.fp-catcard-ico { width: 32px; height: 32px; object-fit: contain; }
.fp-catcard-arrow {
  width: 26px; height: 26px;
  background: var(--g);
  color: #fff;
  font-size: .82rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fp-catcard-name { font-size: .88rem; font-weight: 700; margin: 0; }
.fp-catcard-sub  { font-size: .72rem; color: #666; margin: 0; }

/* ④ 診断バナー */
.fp-diag {
  background: linear-gradient(135deg, var(--g) 0%, var(--b) 100%);
  margin: 0 16px;
  border-radius: var(--r);
  padding: 24px 120px 28px 20px;
  position: relative;
  overflow: hidden;
}
.fp-diag-deco {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 110px; height: 110px;
  object-fit: contain;
  opacity: .5;
  pointer-events: none;
}
.fp-diag-body { position: relative; z-index: 1; }
.fp-diag-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: rgba(255,255,255,.75);
  margin: 0 0 6px;
}
.fp-diag-badge {
  display: inline-block;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.fp-diag-ttl {
  color: #fff;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 16px;
}
.fp-diag-btn {
  display: inline-block;
  background: #fff;
  color: var(--g);
  font-weight: 700;
  font-size: .85rem;
  padding: 9px 20px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  transition: opacity .2s;
}
.fp-diag-btn:hover { opacity: .85; }

/* ⑤ おすすめ記事 */
.fp-featured { padding: 20px 16px; background: #fff; }
.fp-feat-card { display: block; text-decoration: none; color: #333; }
.fp-feat-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--g);
  margin-bottom: 10px;
}
.fp-feat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fp-feat-noimg { width: 100%; height: 100%; background: #b8d8bc; }
.fp-feat-thumb .fp-tag { position: absolute; top: 10px; left: 10px; }
.fp-feat-ttl {
  font-size: .92rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ⑥ 新着記事 */
.fp-latest { padding: 20px 16px; background: var(--bg); }
.fp-latest-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #dde9dd;
  text-decoration: none;
  color: #333;
  transition: opacity .2s;
}
.fp-latest-item:hover { opacity: .75; }
.fp-latest-item:last-child { border-bottom: none; }
.fp-latest-thumb { width: 72px; height: 54px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #c8dfc8; }
.fp-latest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fp-latest-noimg { width: 100%; height: 100%; background: #c8dfc8; }
.fp-latest-body { flex: 1; min-width: 0; }
.fp-latest-body .fp-tag { margin-bottom: 4px; }
.fp-latest-ttl {
  font-size: .82rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ⑦ プロフィール */
.fp-prof { padding: 20px 16px 52px; background: #fff; }
.fp-prof-inner {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--bg);
  border-radius: var(--r);
  padding: 20px 18px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.fp-prof-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2.5px solid var(--g); }
.fp-prof-name { font-size: .95rem; font-weight: 700; margin: 0 0 4px; }
.fp-prof-text { font-size: .78rem; color: #555; line-height: 1.65; margin: 0 0 8px; }
.fp-prof-link { color: var(--g); font-size: .78rem; font-weight: 700; text-decoration: none; }

/* PC */
@media (min-width: 600px) {
  .fp-hero { padding: 64px 40px 60px; }
  .fp-hero-text { font-size: 1.2rem; }
  .fp-catcards { grid-template-columns: repeat(4, 1fr); padding: 20px; }
  .fp-diag { padding: 28px 150px 32px 28px; }
  .fp-diag-deco { width: 130px; height: 130px; }
}
.fp-pills { display: none !important; }