/* ==============================================
    index.css：トップページ固有スタイル
    ============================================== */

    img {
    max-width: 100%;
    height: auto;
    display: block;
    }

    /* HERO セクションの文字サイズ */
    .hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    }
    /* .hero-text p {
    margin-top: 1rem;
    } */
    /* .hero-text h1 {
    font-size: clamp(2rem, 2vw, 2.4rem);
    }

    .hero-text p {
    font-size: clamp(1rem, 1vw, 1.2rem);
    } */

    /* ===== Section ===== */
    .section {
  width: 80vw; /* 必要に応じて */
    margin: 4rem auto;
    padding: 4rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #001348;
    }

    .section h2 {
    font-size: 1.6rem;
    margin-bottom: var(--gap-md);
    color: var(--primary-color);
    text-align: center;
    position: relative;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
    }

    .section h2:hover {
    color: var(--primary-color);
    }

    /* ===== Services Grid ===== */
    .services {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
    margin-top: var(--gap-lg);
    padding: 0 var(--gap-md);
    }

    /* タブレット以上では2列、PC以上では3列 */
    @media (min-width: 768px) {
    .services {
        grid-template-columns: repeat(2, 1fr);
    }
    }

    @media (min-width: 1024px) {
    .services {
        grid-template-columns: repeat(3, 1fr);
    }
    }

    /* サービスカードを正方形に */
    .service-card {
    background: var(--bg-white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    aspect-ratio: 1 / 1; /* 正方形を維持 */
    }

    /* ホバー効果 */
    .service-card:hover {
    transform: translateY(-8px);
    }

    /* 画像部分はカード幅の60%を確保 */
    .service-image {
    width: 100%;
    height: 0;
    padding-bottom: 60%;
    overflow: hidden;
    position: relative;
    }

    .service-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
    }

    /* ホバー時に画像を少し拡大 */
    .service-card:hover .service-image img {
    transform: translate(-50%, -50%) scale(1.05);
    }

    /* カード下部のコンテンツ */
    .service-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    text-align: center;
    }

    .service-content h3 {
    font-size: 1.2rem;
    position: relative;
    padding-bottom: 0.3rem;
    margin: 0.6rem 0;
    font-weight: bold;
    color: var(--text-dark);
    transition: color 0.3s ease;
    }

    .service-content h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
    }

    /* ホバーでタイトル色とアンダーラインを拡大 */
    .service-card:hover .service-content h3 {
    color: var(--primary-color);
    }

    .service-card:hover .service-content h3::after {
    transform: translateX(-50%) scaleX(1);
    }

    /* リンクスタイル */
    .service-link,
    .service-link:visited,
    .service-link:hover,
    .service-link:active {
    color: var(--text-dark);
    text-decoration: none;
    }

    .service-link:hover {
    text-decoration: underline double 2px;
    text-underline-offset: 4px;
    }

    /* ===== Blog Button ===== */
    .blog-button {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    border-radius: 30px;
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 0 0 transparent;
    }

    .blog-button:hover {
    background-color: var(--primary-color);
    color: #fff;
    box-shadow:
        0 0 8px var(--primary-color),
        0 0 16px var(--primary-color),
        0 0 32px var(--primary-color);
    transform: translateY(-2px);
    }

    .blog-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 2.5rem;
    }

    /* ===== Latest News ===== */
    #latest-news-section h2 {
    color: var(--primary-color);
    }

    #latest-news {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-md);
    margin-top: var(--gap-lg);
    padding: 0;
    justify-items: center;
    }

    #latest-news li {
    list-style: none;
    width: 40%;
    background: var(--bg-white);
    border: 1px solid #ccc;
    border-radius: var(--radius);
    padding: 1.2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    margin: 0 auto;
    text-align: center;
    }

    #latest-news li:hover {
    transform: translateY(-4px);
    }

    .news-title {
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
    margin-top: 0;
    margin-bottom: 1rem;  /* ←お好みで */
    }

    .news-title:hover {
    color: var(--primary-color);
    }

    .news-date {
    font-size: 0.9rem;
    color: #666;
    text-align: right;
    margin-bottom: 1rem;
    }

    /* モーダル */
    .modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: linear-gradient(120deg, rgba(45,140,255,0.12) 0%, rgba(0,0,0,0.64) 100%);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    animation: modalBgIn 0.38s cubic-bezier(.4,.85,.46,1.12);
    }
    @keyframes modalBgIn {
    0% { background: rgba(0,0,0,0); }
    100% { background: linear-gradient(120deg, rgba(45,140,255,0.12) 0%, rgba(0,0,0,0.64) 100%);}
    }
    .modal.show {
    display: flex;
    }
    .modal-content {
    background: #fff;
    padding: 2.3rem 2rem 2rem 2rem;
    border-radius: 20px;
    max-width: 540px;
    width: 94vw;
    box-shadow:
        0 10px 32px rgba(45,140,255,0.22),
        0 2px 16px rgba(0,0,0,0.08);
    text-align: left;
    position: relative;
    animation: modalFadeIn 0.4s cubic-bezier(.43,.31,.53,.93);
    font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    color: #162445; /* 本文色をしっかりした濃いネイビーに */
    }

    /* タイトル */
    #modal-title {
    font-size: 1.32rem;      /* さらに大きく */
    font-weight: 800;
    color: #1a1a1a;          /* くっきり黒に近い色 */
    border-left: 4px solid #2D8CFF;
    padding-left: 1rem;
    letter-spacing: 0.03em;
    margin-bottom: 0.9rem;
    background: linear-gradient(90deg,rgba(45,140,255,0.09) 0%,transparent 70%);
    border-radius: 2px;
    min-height: 2.4em;
    display: flex;
    align-items: center;
    }
    .modal-close {
    position: absolute;
    top: 0.9rem;
    right: 1.2rem;
    font-size: 1.7rem;
    font-weight: 600;
    color: #2D8CFF;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.18s, background 0.22s;
    padding: 0.3em 0.65em;
    border-radius: 50%;
    line-height: 1;
    }
    .modal-close:hover {
    background: #eaf3ff;
    color: #1765b8;
    }
    /* 日付 */
    #modal-date {
    font-size: 1.05rem;
    color: #3a5171;
    text-align: right;
    margin-bottom: 1.15rem;
    letter-spacing: 0.05em;
    }

    /* 本文 */
    #modal-content {
    font-size: 1.16rem;     /* ←本文大きめ */
    color: #162445;         /* ↑コントラストUP */
    line-height: 2.15;      /* ←行間ゆったり */
    letter-spacing: 0.06em; /* ←字間もやや広く */
    padding-top: 0.5rem;
    padding-bottom: 0.7rem;
    word-break: break-word;
    white-space: pre-line;
    font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Sawarabi Mincho', serif;
    }

    /* --- 「→ 一覧を見る」ボタンを中央揃え --- */
    .blog-link {
    display: flex;
    justify-content: center;
    align-items: center;
    }

/* ===============================
   ▼ レスポンシブ調整（index.css用）
   =============================== */

/* タブレット＆スマホ */
@media (max-width: 768px) {
  /* セクション幅を縮小 */
  .section {
    width: 95%;
    padding: 1.5rem 1rem;
  }

  /* サービスカードを1列に */
  .services {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* サービスカードの中身 */
  .service-card {
    aspect-ratio: auto; /* 高さ自動にして窮屈さを回避 */
  }
  .service-content h3 {
    font-size: 1rem;
  }

  /* お知らせ */
  #latest-news {
    gap: 1rem;
  }
  #latest-news li {
    width: 100%;
    font-size: 0.95rem;
    padding: 1rem;
    text-align: left;
  }
  .news-title {
    font-size: 1rem;
  }
  .news-date {
    font-size: 0.8rem;
  }

  /* 一覧ボタン */
  .blog-button {
    font-size: 1rem;
    padding: 0.8rem 1.2rem;
  }
}

/* スマホ小画面 */
@media (max-width: 480px) {
  .section h2 {
    font-size: 1.3rem;
  }
  .service-content h3 {
    font-size: 0.95rem;
  }
  .news-title {
    font-size: 0.95rem;
  }
  .news-date {
    font-size: 0.75rem;
  }
}
/* ===== TOPヒーロー：スマホだけ見出し1行＋サブ文非表示 ===== */
@media (max-width: 767px) {

  /* ヒーローブロックをヘッダー直下に小さめで表示 */
  .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    margin-top: 0;
  }

  /* 透明な四角（ヒーローテキストの箱）をコンパクトに */
  .hero .hero-text {
    /* 透明ボックスの見た目はそのまま、サイズだけ縮める */
    padding: 10px 14px;              /* ← 小さく */
    margin: 8px auto 0;
    border-radius: 12px;             /* 角も少しだけ小さく */
    max-width: calc(100% - 24px);    /* 端に当たらないように */
    background: rgba(255,255,255,.18);   /* お使いの値に合わせてOK */
    backdrop-filter: blur(4px);          /* ある場合は軽めに */
    -webkit-backdrop-filter: blur(4px);
  }

  /* 見出し（想いを繋ぎ、未来を拓く。）を1行固定に */
  .hero .hero-text h1 {
    white-space: nowrap;             /* 折り返さない */
    overflow: hidden;                 /* 念のため */
    text-overflow: clip;              /* はみ出しを切る（省略記号不要なら clip） */
    line-height: 1.15;
    letter-spacing: .02em;
    font-size: clamp(18px, 6.2vw, 22px); /* 端末幅に応じて自動縮小 */
  }

  /* サブ文（奨学金を通じて〜）はスマホでは非表示 */
  .hero .hero-text p {
    display: none !important;
  }
}

/* ===== 事業内容・最新のお知らせのカードを常に中央揃え（PC/モバイル両方） ===== */
.business-cards,
.news-cards,
.card-box,
.section-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center !important;  /* 常時センター */
  align-items: flex-start;
  gap: 24px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
.business-cards .card,
.news-cards .card,
.card-box .card {
  flex: 0 1 300px;
  max-width: 340px;
  text-align: center;
}
@media (max-width: 767px) {
  .business-cards,
  .news-cards,
  .card-box,
  .section-inner {
    flex-direction: column;
    align-items: center !important;
  }
  .business-cards .card,
  .news-cards .card,
  .card-box .card {
    width: 92%;
    max-width: 420px;
  }
}/* ===== HERO：モバイル時は上詰め＆サブ文非表示（PCは現状維持） ===== */
@media (max-width: 767px) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 0;
    margin-top: 0;
  }
  .hero .hero-text {
    padding: 10px 14px;
    margin: 8px auto 0;
    border-radius: 12px;
    max-width: calc(100% - 24px);
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .hero .hero-text h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    line-height: 1.15;
    letter-spacing: .02em;
    font-size: clamp(18px, 6.2vw, 22px);
  }
  .hero .hero-text p { display: none !important; }
}