@charset "UTF-8";
/* トップページのヒーロー下のセクション（サービス・カテゴリー・注目記事）。hero.css の後に読み込む。
   トップは Bootstrap 4 と temp.css の構成なので、すべて home- のクラスに限定する。
   カードの持ち上げは translate で行い、スクロール表示（transform）と干渉させない。
   reduced-motion ではアニメーション・トランジション・持ち上げをすべて止める。 */

.home-section {
  --home-navy: #2B4B65;
  --home-deep: #183244;
  --home-aqua: #86d3dc;
  --home-aqua-strong: #2f9aa8;
  --home-aqua-soft: rgba(134, 211, 220, .18);
  --home-ink: #1d3446;
  --home-ink-soft: #5b7383;
  --home-line: #e3ebef;
  --home-radius: 14px;
  position: relative;
  margin: 0;
  padding: 4.5rem 16px;
  color: var(--home-ink);
  line-height: 1.8;
  scroll-margin-top: 72px;
}
.home-section *, .home-section *::before, .home-section *::after { box-sizing: border-box; }
.home-inner { max-width: 1080px; margin: 0 auto; }

/* ---------- 背景 ---------- */
.home-services {
  /* ヒーローの下余白（2rem）を詰め、上端の薄いウェーブでヒーローからつなぐ */
  margin-top: -2rem;
  padding-top: 5.5rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v26c-160 30-330 44-520 30S560 12 360 22 110 58 0 44z' fill='%232B4B65' fill-opacity='.07'/%3E%3Cpath d='M0 0h1440v12c-190 26-380 40-560 26S520 4 330 14 90 40 0 30z' fill='%2386d3dc' fill-opacity='.16'/%3E%3C/svg%3E") top center / 100% 80px no-repeat,
    #fff;
}
.home-categories {
  background:
    radial-gradient(ellipse 50% 60% at 100% 0%, rgba(134, 211, 220, .14), transparent 70%),
    #f2f7f8;
}
.home-journal { background: #fff; }

/* ---------- 見出し ---------- */
.home-eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .6rem;
  color: var(--home-aqua-strong);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .28em;
}
.home-eyebrow::before { content: ""; width: 32px; height: 2px; border-radius: 2px; background: var(--home-aqua); }
.home-section .home-title {
  margin: 0 0 2rem;
  color: var(--home-navy);
  font-size: clamp(1.4rem, 3vw, 1.875rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .06em;
}

/* ---------- グリッド ---------- */
.home-grid { display: grid; gap: 1rem; }
.home-grid-services { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.home-grid-cats, .home-grid-journal { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- カード共通 ---------- */
.home-section a.home-svc,
.home-section a.home-cat,
.home-section a.home-article {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(24, 50, 68, .04), 0 4px 14px -8px rgba(24, 50, 68, .12);
  color: var(--home-ink);
  text-decoration: none;
  overflow: hidden;
  transition: translate .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.home-section a.home-svc:hover, .home-section a.home-svc:focus-visible,
.home-section a.home-cat:hover, .home-section a.home-cat:focus-visible,
.home-section a.home-article:hover, .home-section a.home-article:focus-visible {
  border-color: rgba(134, 211, 220, .8);
  box-shadow: 0 14px 30px -14px rgba(24, 50, 68, .35);
  color: var(--home-ink);
  text-decoration: none;
  translate: 0 -3px;
}
.home-section a.home-svc:focus-visible,
.home-section a.home-cat:focus-visible,
.home-section a.home-article:focus-visible { outline: 2px solid var(--home-aqua-strong); outline-offset: 2px; }

/* スクロール表示の transition を上書きするので、表示の遅延はここで引き継ぐ */
.js-reveal .home-svc[data-reveal],
.js-reveal .home-cat[data-reveal],
.js-reveal .home-article[data-reveal] {
  transition: opacity .6s ease, transform .6s ease, translate .25s ease, box-shadow .25s ease, border-color .25s ease;
  transition-delay: calc(var(--reveal-i, 0) * 60ms), calc(var(--reveal-i, 0) * 60ms), 0s, 0s, 0s;
}

/* ---------- サービス ---------- */
.home-section a.home-svc {
  align-items: flex-start;
  gap: .35rem;
  padding: 1.35rem 1.2rem 1.3rem;
}
.home-svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: .5rem;
  border-radius: 12px;
  background: linear-gradient(160deg, #2B4B65, #183244);
  color: var(--home-aqua);
  box-shadow: 0 6px 14px -8px rgba(24, 50, 68, .6);
}
.home-svc-icon svg { display: block; }
.home-svc strong {
  color: var(--home-navy);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .03em;
}
.home-svc span:last-child {
  color: var(--home-ink-soft);
  font-size: .8125rem;
  line-height: 1.65;
}

/* ---------- カテゴリー ---------- */
.home-section a.home-cat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label count" "desc count";
  align-items: center;
  column-gap: 1rem;
  padding: 1.25rem 1.35rem 1.25rem 1.5rem;
}
.home-cat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--home-aqua), var(--home-aqua-strong));
}
.home-cat-label {
  grid-area: label;
  color: var(--home-navy);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .03em;
}
.home-cat-desc {
  grid-area: desc;
  margin-top: .2rem;
  color: var(--home-ink-soft);
  font-size: .8125rem;
  line-height: 1.6;
}
.home-cat-count {
  grid-area: count;
  color: var(--home-aqua-strong);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.home-cat-count small {
  margin-left: .2rem;
  color: var(--home-ink-soft);
  font-family: 'Helvetica', 'Arial', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  font-size: .75rem;
  letter-spacing: .05em;
}

/* ---------- 注目記事 ---------- */
/* テーマの色は css/journal.css の [data-theme] と同じ値 */
.home-article { --home-accent: #7fd3dc; --home-accent-ink: #2f8f9c; }
.home-article[data-theme=basics] { --home-accent: #7fd3dc; --home-accent-ink: #2f8f9c; }
.home-article[data-theme=myths] { --home-accent: #f3b27a; --home-accent-ink: #b0652a; }

.home-section a.home-article {
  gap: .45rem;
  padding: 1.2rem 2.6rem 1.3rem 1.4rem;
}
.home-article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--home-accent);
}
.home-article::after {
  /* 右下の矢印 */
  content: "";
  position: absolute;
  right: 1.1rem;
  bottom: 1.3rem;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--home-ink-soft);
  border-right: 2px solid var(--home-ink-soft);
  transform: rotate(45deg);
  opacity: .45;
  transition: transform .25s ease, opacity .25s ease, border-color .25s ease;
}
.home-section a.home-article:hover::after, .home-section a.home-article:focus-visible::after {
  opacity: 1;
  border-color: var(--home-navy);
  transform: translateX(3px) rotate(45deg);
}
.home-article-theme {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--home-accent-ink);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .12em;
}
.home-article-theme::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--home-accent);
}
.home-article strong {
  color: var(--home-navy);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.home-article span:last-child {
  color: var(--home-ink-soft);
  font-size: .8125rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.home-section .home-more { margin: 2.25rem 0 0; text-align: center; }
.home-section a.home-more-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.9rem;
  border-radius: 999px;
  background: linear-gradient(160deg, #2B4B65, #183244);
  box-shadow: 0 8px 20px -10px rgba(24, 50, 68, .6);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.home-section a.home-more-btn::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.home-section a.home-more-btn:hover, .home-section a.home-more-btn:focus-visible {
  background: var(--home-aqua);
  box-shadow: 0 10px 24px -10px rgba(47, 154, 168, .7);
  color: var(--home-deep);
  text-decoration: none;
}
.home-section a.home-more-btn:focus-visible { outline: 2px solid var(--home-aqua-strong); outline-offset: 3px; }

/* ---------- 中くらいの画面 ---------- */
@media (max-width: 991.98px) {
  .home-grid-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-grid-cats, .home-grid-journal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- スマートフォン ---------- */
@media (max-width: 575.98px) {
  .home-section { padding: 3.25rem 16px; }
  .home-services { padding-top: 4rem; }
  .home-section .home-title { margin-bottom: 1.5rem; }
  .home-grid { gap: .75rem; }
  .home-grid-services, .home-grid-cats, .home-grid-journal { grid-template-columns: minmax(0, 1fr); }
  /* サービスは横並び（アイコンの右に文字） */
  .home-section a.home-svc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon title" "icon text";
    align-items: center;
    column-gap: 1rem;
    row-gap: .1rem;
    padding: 1rem 1.1rem;
  }
  .home-svc-icon { grid-area: icon; margin-bottom: 0; }
  .home-svc strong { grid-area: title; }
  .home-svc span:last-child { grid-area: text; }
  .home-cat-count { font-size: 2rem; }
}

/* ---------- スクロール表示（css/site.css と同じ。トップでは site.css を読み込まない） ---------- */
.js-reveal [data-reveal]:not(.is-in){opacity:0;transform:translateY(18px)}
.js-reveal [data-reveal]{transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--reveal-i,0) * 60ms)}
@media (prefers-reduced-motion: reduce){.js-reveal [data-reveal]{opacity:1!important;transform:none!important;transition:none}}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .home-section a.home-svc, .home-section a.home-cat, .home-section a.home-article,
  .home-section a.home-article::after,
  .home-section a.home-more-btn {
    animation: none !important;
    transition: none !important;
  }
  .home-section a.home-svc:hover, .home-section a.home-svc:focus-visible,
  .home-section a.home-cat:hover, .home-section a.home-cat:focus-visible,
  .home-section a.home-article:hover, .home-section a.home-article:focus-visible { translate: none; }
  .home-section a.home-article:hover::after, .home-section a.home-article:focus-visible::after { transform: rotate(45deg); }
}