/* =========================================
   index.css - トップページ専用スタイル
   （新着情報 横並び対応版）
   ========================================= */

/* --- 共通テキスト設定 --- */
.emotional-catchphrase,
.functional-subtitle,
.card-main-text,
.intro-title,
.section-title,
.trust-title {
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
}

.ib {
    display: inline-block;
    white-space: nowrap;
}

/* =========================================
   セクション共通設定
   「Wrapper」= 背景色を画面いっぱいに広げる
   「Container/Inner」= コンテンツ幅に収める
   ========================================= */
.hero-split-section,
.intro-section,
.news-section-wrapper,
.pamphlet-section-wrapper,
.bottom-trust-section,
.notice-section-wrapper {
    width: 100%;
    padding: 40px 0;
    box-sizing: border-box;
}

/* コンテンツが入る「中身」の箱。style.cssの変数と合わせる */
.hero-container,
.intro-inner,
.section-container,
.trust-container {
    width: 100%;
    /* 変数が定義されていない場合のフォールバック含む */
    max-width: var(--content-max-width, 1780px);
    margin: 0 auto;
    /* 中央揃え */
    padding: 0 var(--content-padding-side, 24px);
    /* 左右の余白 */
    box-sizing: border-box;
}

/* =========================================
   1. ヒーローセクション
   ========================================= */
.hero-split-section {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);
}

.hero-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.hero-left-column,
.hero-right-column {
    display: contents;
    /* モバイルではコンテナの役割を解除し順序制御しやすくする */
}

.mobile-order-1 {
    order: 1;
}

.mobile-order-2 {
    order: 2;
}

.mobile-order-3 {
    order: 3;
}

.mobile-order-4 {
    order: 4;
}

.mobile-order-3-5 {
    order: 5;
}

/* キャッチコピー */
.panel-header {
    text-align: center;
}

.emotional-catchphrase {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.functional-subtitle {
    font-size: 14px;
    color: var(--text-color);
    font-weight: 500;
    opacity: 0.9;
    margin: 0;
}

/* ビジュアル・スライドショー */
.hero-visual-area {
    width: 80%;
    margin: auto;
}

.slideshow-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    position: relative;
    background-color: #ffffff;
}

.hero-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 1s, transform 1s;
    opacity: 1;
}

.hero-banner-img.fade-out {
    opacity: 0;
}

/* 動画リンク */
.hero-video-area {
    text-align: center;
}

.video-link-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 30px;
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    width: fit-content;
    margin: 0 auto;
}

.video-link-item:hover {
    background-color: var(--white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    color: var(--text-color-dark);
}

.video-link-item i {
    color: #ff0000;
    font-size: 18px;
}

/* アクションボタン（カード） */
.hero-buttons-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.action-card {
    display: block;
    background-color: var(--white);
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(138, 180, 247, 0.15);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(138, 180, 247, 0.25);
    border-color: rgba(138, 180, 247, 0.3);
}

.card-label-tag {
    background-color: var(--primary-color);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px;
    display: inline-block;
    border-radius: 0 0 10px 0;
}

.tag-green {
    background-color: var(--secondary-color);
}

.tag-pink {
    background-color: var(--accent-color);
}

.card-inner {
    display: flex;
    align-items: center;
    padding: 12px 20px 20px 20px;
    gap: 16px;
}

.card-icon {
    width: 52px;
    height: 52px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f7ff;
    border-radius: 50%;
    color: var(--primary-color);
    flex-shrink: 0;
}

.secondary-card .card-icon {
    background-color: #f0fdf4;
    color: var(--secondary-color);
}

.tertiary-card .card-icon {
    background-color: #fbf0fd;
    color: var(--accent-color);
}

.card-content {
    flex: 1;
}

.card-main-text {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 4px;
}

.card-sub-text {
    display: block;
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.4;
}

.card-arrow {
    color: var(--light-gray);
    font-size: 18px;
    transition: transform 0.3s;
}

.primary-card:hover .card-arrow {
    color: var(--primary-color);
    transform: translateX(5px);
}

.secondary-card:hover .card-arrow {
    color: var(--secondary-color);
}

.tertiary-card:hover .card-arrow {
    color: var(--accent-color);
}

/* =========================================
   2. 制度紹介
   ========================================= */
.intro-section {
    background-color: #f0f7ff;
    padding: 60px 0;
}

.intro-text-area {
    text-align: center;
}

.intro-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 16px;
}

.intro-desc {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 32px;
    color: var(--text-color-dark);
}

.text-link {
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.service-icons {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    padding-top: 20px;
}

.service-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.icon-circle {
    background-color: var(--white);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

.service-icon-item span {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color-dark);
}


/* =========================================
   3. 新着情報 & パンフレット
   ========================================= */
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 12px;
}

.section-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: center;
    margin: 0;
}

.section-title::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 28px;
    background-color: var(--primary-color);
    margin-right: 12px;
    border-radius: 2px;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid #888;
    color: var(--text-color-dark);
    padding: 6px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.btn-outline:hover {
    background-color: var(--text-color-dark);
    color: var(--white);
    border-color: var(--text-color-dark);
}

/* パンフレットグリッド */
.top-pamphlet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 100%;
}

.top-pamphlet-card {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    color: var(--text-color-dark);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    border-bottom: 3px solid var(--light-gray);
    height: 100%;
}

.top-pamphlet-card:hover {
    transform: translateY(-5px);
    border-bottom-color: var(--primary-color);
}

.pamphlet-img-container {
    width: 100%;
    aspect-ratio: 1 / 1.414;
    background-color: #eee;
    overflow: hidden;
}

.top-pamphlet-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
    display: block;
}

.top-pamphlet-card:hover .top-pamphlet-img {
    transform: scale(1.05);
}

.top-pamphlet-title {
    font-size: 12px;
    font-weight: 500;
    padding: 12px 16px;
    margin: 0;
    flex-grow: 1;
    background-color: var(--white);
}

/* =========================================
   4. 信頼の証 (修正版)
   ========================================= */
.bottom-trust-section {
    background-color: #f0f4f8;
    padding: 60px 0;
    margin-top: 40px;
}

.trust-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.sticker-visual {
    width: 300px;
    max-width: 100%;
    /* 画像が画面からはみ出ないように追加 */
}

.sticker-img {
    width: 100%;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

.trust-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 16px;
    text-align: center;
}

.trust-desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-color-dark);
    margin-bottom: 24px;
}

.trust-links {
    text-align: center;
    margin-bottom: 24px;
}

/* --- アンケートボックス（点線枠）の修正 --- */
.survey-box {
    background: var(--white);
    padding: 20px;
    /* モバイル向けに余白を少し縮小 */
    border-radius: 8px;
    width: 100%;
    text-align: center;
    border: 2px dashed #b8c8e0;
    box-sizing: border-box;
    /* パディングを含めた幅計算にする */
}

.survey-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--link-blue);
    /* 変数が未定義の場合は適宜 #primary-color 等に置換 */
    color: #448aff;
    /* フォールバックとして直接色指定 */
    margin-bottom: 16px;
}

.sticker-notice {
    font-size: 10px;
    color: var(--text-color-dark);
    margin-top: 8px;
}

/* 緑色のボタン（レスポンシブ対応） */
.btn-accent {
    background-color: var(--secondary-color);
    color: var(--white);
    border: none;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    /* 垂直方向中央 */
    justify-content: center;
    /* 水平方向中央 */
    padding: 16px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    /* 行間を確保して改行時に読みやすく */
    transition: opacity 0.2s, transform 0.2s;
    box-sizing: border-box;
    /* パディングを含めた幅計算 */

    /* テキストが長すぎる場合の改行設定 */
    white-space: normal;
    text-align: center;
    gap: 8px;
    /* アイコンとテキストの間隔 */
}

.btn-accent i {
    flex-shrink: 0;
    /* アイコンが潰れないようにする */
}

.btn-accent:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* =========================================
   PC (1024px以上) レスポンシブ調整への追加
   ========================================= */
@media screen and (min-width: 1500px) {

    /* タブレット・PC以上で余白を広げる */
    .survey-box {
        padding: 40px;
    }

    .survey-title {
        font-size: 16px;
        margin-bottom: 24px;
    }
}

/* =========================================
   5. 注記セクション（Notice）
   ========================================= */
.notice-section-wrapper {
    background-color: var(--white);
    padding: 40px 0;
}

/* 中身は .section-container を使用 */

.notice-heading {
    font-size: 16px;
    color: var(--text-color);
    margin-bottom: 8px;
    padding-left: 10px;
}

.notice-text-sm {
    font-size: 12px;
    color: #777;
    line-height: 1.6;
    padding-left: 10px;
}

/* =========================================
   アニメーション
   ========================================= */
@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.emotional-catchphrase .ib {
    opacity: 0;
    animation: fadeUpAnime 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.emotional-catchphrase .ib:nth-child(1) {
    animation-delay: 0.2s;
}

.emotional-catchphrase .ib:nth-child(2) {
    animation-delay: 0.4s;
}

.emotional-catchphrase .ib:nth-child(3) {
    animation-delay: 0.6s;
}

.wait-for-intro {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s cubic-bezier(0.25, 0.8, 0.25, 1), transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.wait-for-intro.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   PC (1024px以上) レスポンシブ調整
   ========================================= */
@media screen and (min-width: 1500px) {

    /* ヒーローセクション：PCレイアウト */
    .hero-split-section {
        padding: 80px 0;
        min-height: 80vh;
        display: flex;
        align-items: center;
        width: 100vw;
        overflow: hidden;
        /* はみ出し防止 */
    }

    .hero-visual-area {
        width: 100%;
        margin: auto;
    }

    .hero-container {
        display: flex;
        flex-direction: row;
        /* 横並び */
        align-items: center;
        gap: 60px;
        width: 100%;
    }

    /* flexアイテム化 */
    .hero-left-column,
    .hero-right-column {
        display: flex;
        flex-direction: column;
    }

    .hero-left-column {
        flex: 1;
        gap: 24px;
    }

    .hero-right-column {
        flex: 1.2;
        gap: 16px;
        justify-content: center;
    }

    .panel-header {
        text-align: left;
    }

    .emotional-catchphrase {
        font-size: clamp(32px, 3.5vw, 44px);
        margin-bottom: 16px;
    }

    .functional-subtitle {
        font-size: 18px;
    }

    .hero-buttons-area {
        gap: 20px;
        margin-top: 16px;
    }

    .card-inner {
        padding: 24px 32px 32px 32px;
    }

    .card-main-text {
        font-size: 22px;
    }

    .card-sub-text {
        font-size: 14px;
    }

    .card-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .hero-video-area {
        text-align: right;
    }

    .video-link-item {
        margin: 0 0 0 auto;
        font-size: 15px;
        padding: 10px 20px;
    }

    /* パンフレットも4列に */
    .top-pamphlet-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =========================================
   レスポンシブ (PC)
   ========================================= */
@media screen and (min-width: 1500px) {
    .hero-split-section {
        padding: 40px 0;
        min-height: 80vh;
        display: flex;
        align-items: center;
    }

    .hero-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 60px;
    }

    .hero-left-column,
    .hero-right-column {
        display: flex;
        flex-direction: column;
    }

    .hero-left-column {
        flex: 1;
        gap: 24px;
    }

    .hero-right-column {
        flex: 1.2;
        gap: 16px;
        justify-content: center;
    }

    .panel-header {
        text-align: left;
    }

    .emotional-catchphrase {
        font-size: clamp(32px, 3.5vw, 44px);
        margin-bottom: 16px;
    }

    .functional-subtitle {
        font-size: 18px;
    }

    .hero-buttons-area {
        gap: 20px;
        margin-top: 16px;
    }

    .hero-video-area {
        text-align: right;
    }

    .video-link-item {
        margin: 0 0 0 auto;
    }

    .top-pamphlet-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* PC版: 新着情報 横並び */
    .news-card-link {
        flex-direction: row;
        align-items: baseline;
        gap: 24px;
    }

    .news-card-date {
        margin-bottom: 0;
        flex-shrink: 0;
        white-space: nowrap;
        min-width: 130px;
    }
}

@media screen and (min-width: 1600px) {
    .emotional-catchphrase {
        font-size: 48px;
    }
}

/* =========================================
   重要なお知らせ（ヒーローエリア内）
   ========================================= */
.hero-news-alert {
    width: 90%;
    margin: auto;
    display: flex;
}

.news-alert-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: var(--white);
    padding: 16px 24px;
    border-radius: 50px;
    /* 角丸を強くして親しみやすさを演出 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* 浮遊感 */
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-sizing: border-box;
    gap: 16px;
}

/* ホバー時の挙動 */
.news-alert-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(138, 180, 247, 0.25);
    /* 青系の影で発光感を演出 */
    border-color: rgba(138, 180, 247, 0.3);
    opacity: 1;
    /* aタグのデフォルトopacityを上書き */
}

/* コンテンツ部分 */
.news-alert-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
    /* テキスト省略のために必要 */
    width: 80%;
}

/* ラベルと日付のグループ */
.news-alert-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* バッジ（重要度に合わせて色変更可能） */
.news-badge {
    display: inline-block;
    color: white;
    /* ピンク */
    border: 1px solid var(black);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
    background-color: var(--primary-color);
    /* 薄いピンク背景 */
}

.news-date {
    font-size: 14px;
    color: var(--text-color);
    font-feature-settings: "palt";
    font-family: 'Roboto', sans-serif;
    /* 数字を綺麗に見せる */
}

/* タイトルテキスト */
.news-title {
    margin: 0;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 長すぎる場合は「...」にする */
}

/* 右側の矢印アイコン */
.news-arrow-circle {
    width: 36px;
    height: 36px;
    background-color: var(--primary-color);
    /* 緑色 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.news-alert-link:hover .news-arrow-circle {
    transform: translateX(4px) scale(1.1);
}

/* =========================================
   レスポンシブ調整
   ========================================= */

/* タブレット・スマホ (1024px未満) */
@media screen and (max-width: 1500px) {
    .news-alert-content {
        flex-direction: column;
        /* 縦並びに変更 */
        align-items: flex-start;
        gap: 8px;
    }

    .news-title {
        white-space: normal;
        /* 複数行表示を許可 */
        line-height: 1.5;
        font-size: 14px;
    }

    .news-alert-link {
        padding: 16px;
        border-radius: 12px;
        /* スマホでは少し四角くして面積確保 */
    }

    /* スマホでの表示順序調整用のクラス */
    /* 動画(3)とボタン(4)の間に入れたい場合の仮想順序 */
    .hero-left-column,
    .hero-right-column {
        display: contents;
    }

    .mobile-order-3-5 {
        order: 3;
        /* 動画の下、ボタンエリアの上に来るように調整 */
    }

    /* 既存のボタンエリアを少し後ろへずらす */
    .mobile-order-4 {
        order: 5 !important;
    }
}