/* =========================================================
   Source: 16-softblue-morph.css
   ========================================================= */

/* =========================================================
   Soft Blue Scroll Morph
   Reiwa-style front page background animation
   ========================================================= */

/* スクロール係数（JSで 0〜1 を代入） */
body.home {
  --s: 0;              /* raw scroll progress */
  --e: 0;              /* eased scroll progress */
  --soft: 0;           /* softer eased progress */
  --tw: 0.5;           /* slow time drift */
  --tw-medium: 0.5;    /* medium time drift */
  --breathe: 0.5;      /* very slow breathing */

  background-color: #f7fbfd;

  background:
    linear-gradient(
      180deg,
      hsl(205 100% calc(99% - 3% * var(--e))) 0%,
      hsl(205 86% calc(98% - 5% * var(--soft))) 34%,
      hsl(210 62% calc(96% - 7% * var(--e))) 100%
    ),
    radial-gradient(
      980px 620px at
        calc(14% + 8% * var(--tw))
        calc(8% + 18vh * var(--soft)),
      hsl(
        187 78% calc(90% - 8% * var(--e))
        / calc(0.18 + 0.12 * var(--breathe))
      ) 0%,
      transparent 62%
    ),
    radial-gradient(
      1120px 720px at
        calc(86% - 10% * var(--tw-medium))
        calc(24% + 22vh * var(--e)),
      hsl(
        205 88% calc(91% - 9% * var(--soft))
        / calc(0.16 + 0.14 * var(--tw))
      ) 0%,
      transparent 66%
    ),
    radial-gradient(
      1500px 860px at
        calc(50% + 8% * (var(--tw) - 0.5))
        calc(72% + 18vh * var(--e)),
      hsl(
        218 76% calc(92% - 11% * var(--e))
        / calc(0.12 + 0.13 * var(--soft))
      ) 0%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(232, 244, 250, calc(0.18 + 0.16 * var(--soft))) 100%
    );

  background-attachment:
    fixed,
    fixed,
    fixed,
    fixed,
    fixed;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;

  background-size:
    cover,
    cover,
    cover,
    cover,
    cover;
}

/* 背景が見える領域に透明感を残す */
body.home .site-body,
body.home .site-body-container,
body.home .main-section {
  background: transparent;
}

/* 本文エリアの白さを少しだけ柔らかくする */
body.home .entry-body {
  position: relative;
}

/* JSが読み込まれた後だけ、背景の印象を少しなめらかに */
html.smx-softblue-ready body.home {
  transition: background-color 600ms ease;
}

/* フッターへ近づくほど背景を落ち着かせる */
body.home .site-footer {
  background:
    linear-gradient(
      180deg,
      rgba(245, 248, 251, 0.96) 0%,
      rgba(238, 246, 250, 1) 100%
    );
}

/* 背景固定が重くなりやすい端末向け */
@media (max-width: 768px) {
  body.home {
    background-attachment:
      scroll,
      scroll,
      scroll,
      scroll,
      scroll;
  }
}

/* 動きを好まないユーザーには固定背景と時間変化を抑える */
@media (prefers-reduced-motion: reduce) {
  body.home {
    --tw: 0.5;
    --tw-medium: 0.5;
    --breathe: 0.5;

    background-attachment:
      scroll,
      scroll,
      scroll,
      scroll,
      scroll;
  }

  html.smx-softblue-ready body.home {
    transition: none !important;
  }
}


/* =========================================================
   Source: 17-news-section.css / section heading moved to 02-components.css
   ========================================================= */

/* =========================================================
   News Section
   Reiwa-style お知らせカード一覧
   ========================================================= */

.news-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 20px 48px;
  position: relative;
}

/* 見出しとカード群の間隔を少し締める */
.news-section > h2,
body.home .entry-body section.news-section > h2 {
  margin-bottom: 30px !important;
}

/* セクション背景にごく薄いニュアンスを付ける */
.news-section::before {
  content: "";
  position: absolute;
  inset: 14px 0 auto 0;
  height: 190px;
  z-index: -1;
  pointer-events: none;
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 12% 24%,
      rgba(0, 194, 215, 0.10) 0%,
      rgba(0, 194, 215, 0.04) 28%,
      rgba(255, 255, 255, 0) 62%
    ),
    linear-gradient(
      135deg,
      rgba(0, 86, 179, 0.06) 0%,
      rgba(255, 255, 255, 0) 58%
    );
}

/* 09-card-layouts.css の .custom-latest-posts { display:flex; } を上書き */
.news-section .custom-latest-posts {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  padding: 0 !important;
  margin: 0;
  justify-content: stretch !important;
  align-items: stretch;
}

/* 09-card-layouts.css の .card.business-plan { flex:... } を上書き */
.news-section .custom-latest-posts > .card.business-plan {
  flex: none !important;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 268px;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  align-items: stretch;
  text-align: left;
  border-radius: 22px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(250, 253, 255, 0.96) 100%
    );
  box-shadow:
    0 10px 28px rgba(15, 45, 75, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  border: 1px solid rgba(0, 86, 179, 0.08);
  transition:
    transform var(--ease-fast),
    box-shadow var(--ease-fast),
    border-color var(--ease-fast);
}

.news-section .custom-latest-posts > .card.business-plan:hover {
  transform: translateY(-6px);
  box-shadow:
    0 18px 42px rgba(15, 45, 75, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
  border-color: rgba(0, 123, 255, 0.18);
}

.news-section .card.business-plan a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.news-section .card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 画像エリア：浅すぎる帯状表示をやめ、カード全体とのバランスを改善 */
.news-section .card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      rgba(0, 123, 255, 0.08),
      rgba(0, 194, 215, 0.08)
    );
}

.news-section .card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 42%,
      rgba(15, 45, 75, 0.10) 100%
    );
}

.news-section .card-image img,
.news-section .banner-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0;
  transform: scale(1.01);
  transition:
    transform 700ms cubic-bezier(.16, .84, .28, 1),
    filter 700ms cubic-bezier(.16, .84, .28, 1);
}

.news-section .card.business-plan:hover .card-image img,
.news-section .card.business-plan:hover .banner-img {
  transform: scale(1.055);
  filter: saturate(1.04) contrast(1.03);
}

/* 本文エリア */
.news-section .card-description {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 14px 16px 16px;
  margin: 0;
}

/* タイトル：固定の大きすぎる箱をやめ、2〜3行で自然に見せる */
.news-section .card-description h4 {
  box-sizing: border-box;
  width: 100%;
  min-height: calc(0.9rem * 1.5 * 2 + 18px);
  max-height: calc(0.9rem * 1.5 * 3 + 18px);
  margin: 0 0 9px;
  padding: 9px 11px;
  border-radius: 8px;
  background:
    linear-gradient(
      180deg,
      rgba(44, 62, 80, 0.065) 0%,
      rgba(44, 62, 80, 0.035) 100%
    );
  color: var(--color-secondary);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-break: strict;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 説明文：カード下部の大きすぎる空白を抑える */
.news-section .card-description p {
  width: 100%;
  margin: 0;
  color: rgba(51, 51, 51, 0.74);
  font-size: 0.84rem;
  line-height: 1.65;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-break: strict;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* フォーカス時 */
.news-section .card.business-plan a:focus-visible {
  outline: 3px solid rgba(0, 123, 255, 0.28);
  outline-offset: -3px;
  border-radius: 22px;
}

/* タブレット：2列 */
@media (max-width: 1024px) {
  .news-section {
    padding: 52px 20px 46px;
  }

  .news-section > h2,
  body.home .entry-body section.news-section > h2 {
    margin-bottom: 28px !important;
  }

  .news-section .custom-latest-posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-section .custom-latest-posts > .card.business-plan {
    min-height: 300px;
  }

  .news-section .card-image {
    aspect-ratio: 16 / 8.6;
  }

  .news-section .card-description h4 {
    min-height: calc(0.98rem * 1.55 * 2 + 20px);
    max-height: calc(0.98rem * 1.55 * 3 + 20px);
    font-size: 0.98rem;
    line-height: 1.55;
  }

  .news-section .card-description p {
    font-size: 0.88rem;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* スマホ：1列 */
@media (max-width: 600px) {
  .news-section {
    padding: 40px 16px 38px;
  }

  .news-section::before {
    inset: 8px 8px auto 8px;
    height: 170px;
    border-radius: 22px;
  }

  .news-section > h2,
  body.home .entry-body section.news-section > h2 {
    margin-bottom: 24px !important;
  }

  .news-section .custom-latest-posts {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .news-section .custom-latest-posts > .card.business-plan {
    min-height: auto;
    border-radius: 20px;
  }

  .news-section .card-image {
    aspect-ratio: 16 / 8.8;
  }

  .news-section .card-description {
    padding: 16px 16px 18px;
  }

  .news-section .card-description h4 {
    min-height: auto;
    max-height: calc(1rem * 1.55 * 3 + 20px);
    font-size: 1rem;
    line-height: 1.55;
  }

  .news-section .card-description p {
    font-size: 0.9rem;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce) {
  .news-section .custom-latest-posts > .card.business-plan,
  .news-section .card-image img,
  .news-section .banner-img {
    transition: none !important;
    transform: none !important;
  }

  .news-section .custom-latest-posts > .card.business-plan:hover,
  .news-section .card.business-plan:hover .card-image img,
  .news-section .card.business-plan:hover .banner-img {
    transform: none !important;
  }
}


/* =========================================================
   Source: 20-plan-section.css / section heading moved to 02-components.css
   ========================================================= */

/* =========================================================
   Plan Section
   Reiwa-style HOME plan card layout
   ========================================================= */

.plan-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 20px 60px;
  position: relative;
}

/* 背景にごく薄い青い面を置く */
.plan-section::before {
  content: "";
  position: absolute;
  inset: 22px 0 24px 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 32px;
  background:
    linear-gradient(
      135deg,
      rgba(0, 123, 255, 0.055) 0%,
      rgba(0, 194, 215, 0.035) 46%,
      rgba(255, 255, 255, 0) 100%
    );
}

/* 既存のcard-containerをセクション内で整える */
.plan-section .card-container {
  padding: 0;
  margin: 0 0 24px;
  gap: 24px;
}

/* 最後の行だけ下余白を消す */
.plan-section .card-container:last-child {
  margin-bottom: 0;
}

/* カード本体 */
.plan-section .card.business-plan {
  position: relative;
  overflow: hidden;
  align-items: stretch;
  text-align: left;
  padding: 0;
  border-radius: 22px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(250, 253, 255, 0.96) 100%
    );
  border: 1px solid rgba(0, 86, 179, 0.08);
  box-shadow:
    0 10px 28px rgba(15, 45, 75, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  transition:
    transform var(--ease-fast),
    box-shadow var(--ease-fast),
    border-color var(--ease-fast);
}

/* 右上に薄い光を入れる */
.plan-section .card.business-plan::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 170px;
  height: 170px;
  pointer-events: none;
  border-radius: 999px;
  background:
    radial-gradient(
      circle,
      rgba(0, 194, 215, 0.16) 0%,
      rgba(0, 194, 215, 0.06) 42%,
      rgba(255, 255, 255, 0) 72%
    );
}

.plan-section .card.business-plan:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 123, 255, 0.18);
  box-shadow:
    0 18px 42px rgba(15, 45, 75, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

/* 見出し */
.plan-section .card.business-plan h4 {
  width: 100%;
  margin: 0;
  padding: 18px 18px 12px;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--color-secondary);
  letter-spacing: 0.02em;
}

/* 画像リンク */
.plan-section .card.business-plan a {
  display: block;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
}

/* 画像 */
.plan-section .banner-img {
  width: 100%;
  aspect-ratio: 3 / 1;
  display: block;
  object-fit: cover;
  border-radius: 0;
  transform: scale(1.01);
  transition:
    transform 700ms cubic-bezier(.16, .84, .28, 1),
    filter 700ms cubic-bezier(.16, .84, .28, 1);
}

.plan-section .card.business-plan:hover .banner-img {
  transform: scale(1.055);
  filter: saturate(1.04) contrast(1.03);
}

/* 説明文 */
.plan-section .card.business-plan p {
  width: 100%;
  margin: 0;
  padding: 16px 18px 20px;
  font-size: 0.92rem;
  line-height: 1.78;
  color: rgba(51, 51, 51, 0.78);
}

/* WordPressが自動挿入したpで画像が包まれる場合への保険 */
.plan-section .card.business-plan > p:has(a) {
  padding: 0;
  margin: 0;
}

/* 説明文が長いカードでも高さを安定させる */
.plan-section .card.business-plan > p:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* フォーカス時 */
.plan-section .card.business-plan a:focus-visible {
  outline: 3px solid rgba(0, 123, 255, 0.28);
  outline-offset: -3px;
}

/* タブレット */
@media (max-width: 1024px) {
  .plan-section {
    padding: 56px 20px 52px;
  }

  .plan-section .card-container {
    gap: 22px;
  }

  .plan-section .banner-img {
    aspect-ratio: 3 / 1.08;
  }
}

/* スマホ */
@media (max-width: 768px) {
  .plan-section {
    padding: 44px 16px 42px;
  }

  .plan-section::before {
    inset: 10px 8px 12px 8px;
    border-radius: 24px;
  }

  .plan-section > h2,
  body.home .entry-body section.plan-section > h2 {
    margin-bottom: 24px !important;
  }

  .plan-section .card-container {
    gap: 20px;
    margin-bottom: 20px;
  }

  .plan-section .card.business-plan {
    border-radius: 20px;
  }

  .plan-section .card.business-plan h4 {
    padding: 16px 16px 10px;
    font-size: 1.02rem;
  }

  .plan-section .card.business-plan p {
    padding: 14px 16px 18px;
  }
}

/* かなり狭い画面 */
@media (max-width: 480px) {
  .plan-section .banner-img {
    aspect-ratio: 3 / 1.15;
  }
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce) {
  .plan-section .card.business-plan,
  .plan-section .banner-img {
    transition: none !important;
    transform: none !important;
  }

  .plan-section .card.business-plan:hover,
  .plan-section .card.business-plan:hover .banner-img {
    transform: none !important;
  }
}


/* =========================================================
   Source: 21-cta-section.css
   ========================================================= */

/* =========================================================
   CTA Section
   Reiwa-style bottom navigation cards
   ========================================================= */

.cta-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 20px 72px;
  position: relative;
}

/* 背景にやわらかい導線感を出す */
.cta-section::before {
  content: "";
  position: absolute;
  inset: 20px 0 28px 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 34px;
  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(0, 194, 215, 0.12) 0%,
      rgba(0, 194, 215, 0.05) 30%,
      rgba(255, 255, 255, 0) 62%
    ),
    linear-gradient(
      135deg,
      rgba(0, 123, 255, 0.06) 0%,
      rgba(255, 255, 255, 0) 68%
    );
}

.cta-section .card-container {
  padding: 0;
  gap: 24px;
}

/* CTAカード本体 */
.cta-section .card {
  position: relative;
  overflow: hidden;
  align-items: stretch;
  text-align: left;
  padding: 0;
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(250, 253, 255, 0.96) 100%
    );
  border: 1px solid rgba(0, 86, 179, 0.08);
  box-shadow:
    0 10px 28px rgba(15, 45, 75, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  transition:
    transform var(--ease-fast),
    box-shadow var(--ease-fast),
    border-color var(--ease-fast);
}

/* 右上に控えめな光 */
.cta-section .card::before {
  content: "";
  position: absolute;
  top: -76px;
  right: -76px;
  width: 168px;
  height: 168px;
  pointer-events: none;
  border-radius: 999px;
  background:
    radial-gradient(
      circle,
      rgba(0, 194, 215, 0.18) 0%,
      rgba(0, 123, 255, 0.06) 46%,
      rgba(255, 255, 255, 0) 74%
    );
}

/* 下部に薄いアクセントライン */
.cta-section .card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, #00c2d7, var(--color-primary));
  opacity: 0.62;
  transform: scaleX(0.72);
  transform-origin: left center;
  transition:
    opacity var(--ease-fast),
    transform var(--ease-fast);
}

.cta-section .card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 123, 255, 0.18);
  box-shadow:
    0 18px 42px rgba(15, 45, 75, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

.cta-section .card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* 見出し */
.cta-section .card h4 {
  width: 100%;
  margin: 0;
  padding: 18px 18px 12px;
  color: var(--color-primary);
  font-size: 1.08rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

/* リンク */
.cta-section .card a {
  color: var(--color-primary);
  text-decoration: none;
}

.cta-section .card > a {
  display: block;
  width: 100%;
  overflow: hidden;
}

/* 画像 */
.cta-section .banner-img {
  width: 100%;
  aspect-ratio: 3 / 1;
  display: block;
  object-fit: cover;
  border-radius: 0;
  transform: scale(1.01);
  transition:
    transform 700ms cubic-bezier(.16, .84, .28, 1),
    filter 700ms cubic-bezier(.16, .84, .28, 1);
}

.cta-section .card:hover .banner-img {
  transform: scale(1.055);
  filter: saturate(1.04) contrast(1.03);
}

/* 説明文 */
.cta-section .card p {
  width: 100%;
  margin: 0;
  padding: 16px 18px 22px;
  font-size: 0.92rem;
  line-height: 1.78;
  color: rgba(51, 51, 51, 0.78);
}

/* WordPressが画像リンクをpで包んだ場合の保険 */
.cta-section .card > p:has(a) {
  padding: 0;
  margin: 0;
}

/* 説明文の高さを安定させる */
.cta-section .card > p:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* フォーカス時 */
.cta-section .card a:focus-visible {
  outline: 3px solid rgba(0, 123, 255, 0.28);
  outline-offset: -3px;
  border-radius: 18px;
}

/* タブレット */
@media (max-width: 1024px) {
  .cta-section {
    padding: 56px 20px 60px;
  }

  .cta-section .card-container {
    gap: 22px;
  }

  .cta-section .banner-img {
    aspect-ratio: 3 / 1.08;
  }
}

/* スマホ */
@media (max-width: 768px) {
  .cta-section {
    padding: 44px 16px 48px;
  }

  .cta-section::before {
    inset: 10px 8px 14px 8px;
    border-radius: 24px;
  }

  .cta-section .card-container {
    gap: 20px;
  }

  .cta-section .card {
    border-radius: 20px;
  }

  .cta-section .card h4 {
    padding: 16px 16px 10px;
    font-size: 1.02rem;
  }

  .cta-section .card p {
    padding: 14px 16px 20px;
  }

  .cta-section .card::after {
    left: 16px;
    right: 16px;
  }
}

/* かなり狭い画面 */
@media (max-width: 480px) {
  .cta-section .banner-img {
    aspect-ratio: 3 / 1.15;
  }
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce) {
  .cta-section .card,
  .cta-section .card::after,
  .cta-section .banner-img {
    transition: none !important;
    transform: none !important;
  }

  .cta-section .card:hover,
  .cta-section .card:hover::after,
  .cta-section .card:hover .banner-img {
    transform: none !important;
  }
}