:root {
    --canva-navy: #0037a3;
    --canva-light-blue: #3b5bdb;
    --canva-bg-grey: #f5f7fa;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--canva-bg-grey);
    line-height: 1.6;
}

/* ================================
   Image LP Container
   ================================ */
.lp-container {
    max-width: 1000px; /* PCでの最大幅。お好みに応じて変更可能です */
    margin: 0 auto;    /* 画面中央に配置 */
    background-color: white;
    box-shadow: 0 0 30px rgba(0,0,0,0.1); /* 全体に軽い影をつけて浮かせる */
    display: flex;
    flex-direction: column;
}

.lp-image {
    width: 100%;
    height: auto;
    display: block; /* 画像下部の不要な余白を消す */
}

/* ================================
   CTA Overlay Button
   ================================ */
.cta-image-wrapper {
    position: relative;
    width: 100%;
}
.cta-floating-btn {
    position: absolute;
    top: 47%; /* ボタンの上下位置（ほんの少し上に調整） */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; /* スマホ時のボタン横幅の割合 */
    max-width: 850px;
    display: block;
    transition: transform 0.3s;
    z-index: 10;
}
.cta-floating-btn img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 15px rgba(0, 55, 163, 0.4)); /* ボタンに影を追加 */
    transition: filter 0.3s ease; /* ホバー時の色変化を滑らかに */
}
.cta-floating-btn:hover img {
    filter: drop-shadow(0 10px 15px rgba(0, 55, 163, 0.4)) brightness(1.15); /* ホバー時に少し明るくして色が変わったように見せる */
}

@keyframes pulse-btn {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.03); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
.pulse { animation: pulse-btn 2s infinite; }

/* ================================
   New FAQ Accordion (Image Background + CSS Overlay)
   ================================ */
.faq-image-wrapper {
    display: grid;
    width: 100%;
    container-type: inline-size; /* コンテナクエリで内部を完全比率固定 */
    color: white; /* テキスト全体を白に設定 */
    background-color: #002891; /* アコーディオンが開いて画像より長くなった時に表示される背景色（必要に応じて変更） */
}
.faq-image-wrapper > img {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    align-self: start; /* 画像を常に上端に固定 */
}
.faq-accordion-overlay {
    grid-area: 1 / 1;
    margin-top: 44cqw; /* 上の余白を少し広げる（41cqw -> 44cqw） */
    padding-bottom: 15cqw; /* 一番下の余白を元に戻す（20cqw -> 15cqw） */
    width: 82cqw; /* 画像に合わせて左右の長さを少し狭める */
    justify-self: center; /* 左右中央配置 */
    z-index: 2;
}
.faq-item-new {
    border-bottom: 0.2cqw solid #ffffff; /* 完全な白の実線 */
}
.faq-q-new {
    padding: 4.5cqw 0; /* 上下の余白を少し縮小して全体の高さを抑える */
    cursor: pointer;
    display: flex;
    align-items: center;
    list-style: none;
}
.faq-q-new::-webkit-details-marker {
    display: none;
}
.faq-q-num {
    font-size: 6.5cqw; /* Q1などの文字を小さくしてバランスをとる（8.5 -> 6.5） */
    font-weight: 900;
    margin-right: 3cqw; /* テキストとの距離を少し狭める */
    line-height: 1;
    font-family: "Arial Black", Arial, sans-serif; /* 画像のような極太フォント */
    letter-spacing: 0.1cqw;
}
.faq-text-new {
    flex-grow: 1;
    font-size: 3.2cqw; /* テキストサイズを少し小さく調整（3.4 -> 3.2） */
    font-weight: bold;
    line-height: 1.6;
}
.faq-icon-plus {
    width: 6cqw;
    height: 6cqw;
    border: 0.2cqw solid white; /* 細めの丸枠 */
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    margin-left: 2cqw;
    transition: transform 0.3s;
}
.faq-icon-plus::before, .faq-icon-plus::after {
    content: '';
    position: absolute;
    background-color: white;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.faq-icon-plus::before {
    width: 3.2cqw; height: 0.2cqw;
}
.faq-icon-plus::after {
    width: 0.2cqw; height: 3.2cqw;
}
details[open] .faq-icon-plus {
    transform: rotate(45deg);
}
.faq-a-new {
    padding: 0 0 5cqw 9.5cqw; /* Q番号のサイズ縮小に合わせてインデントを調整 */
    font-size: 3cqw;
    line-height: 1.7;
    color: #e2e8f0;
}

/* ================================
   Footer & Privacy Link Overlay
   ================================ */
.footer-image-wrapper {
    position: relative;
    width: 100%;
    container-type: inline-size;
}
.privacy-link-text {
    position: absolute;
    /* cqwだと画像の高さより上にはみ出して白背景と同化して見えなくなるため、%に変更 */
    top: 15%; /* 少し上に上げる（30% -> 15%） */
    left: 50%;
    transform: translateX(-50%);
    
    /* テキストのデザイン */
    color: white; /* 文字色 */
    font-size: 2.5cqw; /* 文字サイズ（少し小さめに調整） */
    font-weight: bold;
    text-decoration: underline; /* リンクだとわかるように下線を引く */
    
    z-index: 2;
    cursor: pointer;
    transition: opacity 0.3s;
}
.privacy-link-text:hover {
    opacity: 0.7; /* ホバー時に少しだけ薄くするアニメーション */
}

/* ================================
   Inner Overlay Sliders (Point 2,3,4)
   ================================ */
.point-image-wrapper {
    position: relative;
    width: 100%;
    container-type: inline-size;
}
.point-bg {
    display: block;
    width: 100%;
    height: auto;
}
.inner-slider-overlay {
    position: absolute;
    /* ↓ この数値を変更するとスライダー全体の上下位置が変わります（仮で40cqwとしています） */
    top: 40cqw; 
    left: 50%;
    transform: translateX(-50%);
    width: 83.3cqw; /* 横幅1366pxに対する1139pxの割合でピッタリ合うように計算 */
    z-index: 2;
}
.point6-slider-overlay {
    top: 42.75cqw; /* 空白位置 Y=442〜2271 の中央にスライド（高さ1546px）を配置 */
}
.inner-swiper {
    width: 100%;
    height: 100%;
    padding-bottom: 85px; /* 下げるために余白を広げる */
}
.inner-swiper .swiper-slide {
    text-align: center;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inner-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* インジケーター（点々）のデザイン */
.inner-swiper .swiper-pagination {
    bottom: 15px !important; /* さらに少し下げる */
}
.inner-swiper .swiper-pagination-bullet {
    background: #002891; /* NEXUSカラー */
    opacity: 0.3;
    width: 14px; /* 少し大きく（8px -> 14px） */
    height: 14px;
}
.inner-swiper .swiper-pagination-bullet-active {
    opacity: 1;
}

/* 矢印（ナビゲーションボタン）のデザイン */
.inner-swiper .swiper-button-prev,
.inner-swiper .swiper-button-next {
    background-color: #2b55c6; /* 添付画像に合わせたブルー */
    color: #ffffff; /* 矢印を白に */
    border-radius: 50%; /* 丸くする */
    bottom: 0px; /* ギリギリまで下げる */
    top: auto;   /* デフォルトの中央配置を解除 */
    width: 44px; /* 丸のサイズ */
    height: 44px;
    margin: 0;
}
/* 矢印のアイコンサイズ */
.inner-swiper .swiper-button-prev::after,
.inner-swiper .swiper-button-next::after {
    font-size: 18px; /* 丸に収まるサイズに調整 */
    font-weight: bold;
}
/* 矢印の横位置（点々の左右に配置） */
.inner-swiper .swiper-button-prev {
    left: 20%;
}
.inner-swiper .swiper-button-next {
    right: 20%;
}

/* ================================
   Responsive
   ================================ */
@media (max-width: 768px) {
    .cta-floating-btn {
        width: 95%; /* スマホではボタンを少し大きく表示 */
        top: 49%;   /* スマホ版の位置を「二つ前に戻した」適切な位置に微調整 */
    }
    .cta-floating-btn img {
        filter: none; /* スマホ版のみボタンの影を消す */
    }
    .cta-floating-btn:hover img {
        filter: brightness(1.15); /* スマホ版でもタップ時に少し明るく */
    }

    /* スマホ版のスライダーボタン・インジケーターのサイズ調整 */
    .inner-swiper {
        padding-bottom: 50px; /* 余白もスマホに合わせて少し小さく */
    }
    .inner-swiper .swiper-button-prev,
    .inner-swiper .swiper-button-next {
        width: 32px;
        height: 32px;
        bottom: 5px; /* スマホ用の位置調整 */
    }
    .inner-swiper .swiper-button-prev::after,
    .inner-swiper .swiper-button-next::after {
        font-size: 14px; /* 矢印アイコンも小さく */
    }
    .inner-swiper .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }
    .inner-swiper .swiper-pagination {
        bottom: 16px !important; /* 矢印の中央と高さを合わせる */
    }
}