@charset "utf-8";
/* -----------------------------------------------------------------------------
   1. base
   -------------------------------------------------------------------------- */
html {
    /* 和文ゴシックのシステムフォントスタック（Webフォント指定なし） */
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
        "Yu Gothic Medium", "Yu Gothic", Meiryo, system-ui, -apple-system, sans-serif;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background: #fff;
    color: #272727;
    overflow-x: hidden;
}

img {
    width: 100%;
}

.l-wrap {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    overflow: hidden;
}

/* 視覚的に隠す（見出し階層・操作ラベル用） */
.u-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   2. CTAボタン共通（通常CTA・追従CTA）
   -------------------------------------------------------------------------- */
.c-btn {
    position: relative;
    display: block;
    width: calc(100% * 755 / 800);
    margin: 0 auto;
    animation: cta-bounce 4s ease-in-out infinite;
}

.c-btn__shine {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: url(../img/btn.png);
    mask-image: url(../img/btn.png);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.c-btn__shine::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.72) 50%,
        rgba(255, 255, 255, 0) 100%);
    animation: cta-shine 3.4s ease-in-out infinite;
}

/* 左 → 右 */
@keyframes cta-shine {
    0% {
        transform: translateX(-130%);
    }
    55%,
    100% {
        transform: translateX(260%);
    }
}

@keyframes cta-bounce {
    0%,
    82%,
    100% {
        transform: translateY(0);
    }
    87% {
        transform: translateY(-3px);
    }
    92% {
        transform: translateY(0);
    }
    96% {
        transform: translateY(-1px);
    }
}

/* -----------------------------------------------------------------------------
   3. header 
   -------------------------------------------------------------------------- */
.l-header {
    position: relative;
    z-index: 2;
    padding-top: calc(100% * 130 / 800);
    background: #fff;
    box-shadow: 0 4px 14px rgba(90, 194, 247, 0.22);
}

/* header_logo.png 403x51 @ (28,36) */
.l-header__logo {
    position: absolute;
    top: 0;
    left: calc(100% * 28 / 800);
    width: calc(100% * 403 / 800);
    transform: translateY(calc(100% * 36 / 51));
}

.l-header__logo a {
    display: block;
    transition: opacity 0.2s ease;
}

/* header_badge.png 244x61 @ (519,33) */
.l-header__badge {
    position: absolute;
    top: 0;
    left: calc(100% * 519 / 800);
    width: calc(100% * 244 / 800);
    transform: translateY(calc(100% * 33 / 61));
}

/* -----------------------------------------------------------------------------
   4. FV 
   -------------------------------------------------------------------------- */
.p-fv {
    position: relative;
}

/* -----------------------------------------------------------------------------
   5. CTAエリア 
   -------------------------------------------------------------------------- */
.p-cta {
    padding: calc(100% * 40 / 800) 0;
    background: #fff;
}

/* -----------------------------------------------------------------------------
   6. お悩み 
   -------------------------------------------------------------------------- */
.p-problem {
    position: relative;
    padding: calc(100% * 0 / 800) 0 calc(100% * 0 / 800);
}

/* title.png は bg画像の上に position で重ねる（margin / padding なし） */
.p-problem__title {
    position: absolute;
    top: -3%;
    left: 0;
    width: 100%;
    transform: translateY(calc(100% * 97 / 274));
}

/* -----------------------------------------------------------------------------
   7. 要注意  
   -------------------------------------------------------------------------- */
.p-warning {
    position: relative;
}

/* -----------------------------------------------------------------------------
   8. 解決  
   -------------------------------------------------------------------------- */
.p-solution {
    position: relative;
}

/* -----------------------------------------------------------------------------
   9. POINT 
   -------------------------------------------------------------------------- */
.p-point {
    position: relative;
}

/* -----------------------------------------------------------------------------
   10. スライダー共通（Swiper）
   -------------------------------------------------------------------------- */
.c-slider {
    position: relative;
}

.c-slider .swiper {
    width: 100%;
}

.c-slider .swiper-slide {
    width: 90%;
    height: auto;
}

/* 矢印 */
.c-slider__arrow {
    position: absolute;
    top: 0;
    z-index: 3;
    display: block;
    width: calc(100% * 95 / 800);
    transition: opacity 0.2s ease;
}

.c-slider__arrow--prev {
    left: calc(100% * 7.5 / 800);
}

.c-slider__arrow--next {
    right: calc(100% * 7.5 / 800);
}

.c-slider__arrow--next img {
    transform: scaleX(-1);
}

.c-slider__arrow.swiper-button-disabled {
    opacity: 0.45;
}

/* ドットページネーション（gap でドット間を均等に） */
.c-slider__pagination.swiper-pagination {
    position: absolute;
    top: 0;
    bottom: auto;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 800 / 21;
    gap: calc(100% * 34 / 800);
    --swiper-pagination-bullet-horizontal-gap: 0;
}

.c-slider__pagination .swiper-pagination-bullet {
    flex: 0 0 auto;
    width: calc(100% * 21 / 800);
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
    background: #c6e9fd;
    opacity: 1;
    transition: background-color 0.3s ease;
}

.c-slider__pagination .swiper-pagination-bullet-active {
    background: #5cc6fa;
}

/* -----------------------------------------------------------------------------
   11. サポーター紹介 
   -------------------------------------------------------------------------- */
.p-agent {
    position: relative;
}

.c-slider--agent {
    /* タイトル下端400 → カード上端391（9px 引き上げ） */
    margin-top: calc(100% * -9 / 800);
    padding-bottom: calc(100% * 125 / 800);
}

.c-slider--agent .c-slider__arrow {
    margin-top: calc(100% * 563.625 / 800); /* 501 x 1.125 */
}

.c-slider--agent .c-slider__pagination.swiper-pagination {
    margin-top: calc(100% * 1238.75 / 800); /* カード下端1203.75 + 35 */
}

/* -----------------------------------------------------------------------------
   12. 生の声  
   -------------------------------------------------------------------------- */
.p-voice {
    position: relative;
}

.c-slider--voice {
    /* タイトル下端508 → カード上端390（118px 引き上げ） */
    margin-top: calc(100% * -118 / 800);
    padding-bottom: calc(100% * 100 / 800);
}

.c-slider--voice .c-slider__arrow {
    margin-top: calc(100% * 447 / 800); /* 397 x 1.125 */
}

.c-slider--voice .c-slider__pagination.swiper-pagination {
    margin-top: calc(100% * 1103 / 800); /* カード下端1080 + 23 */
}

/* -----------------------------------------------------------------------------
   13. 業界に対応  
   -------------------------------------------------------------------------- */
.p-company {
    position: relative;
}

.p-company__title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(calc(100% * 84 / 195));
}

/* -----------------------------------------------------------------------------
   14. 流れ
   -------------------------------------------------------------------------- */
.p-flow {
    position: relative;
}

/* -----------------------------------------------------------------------------
   15. よくあるご質問
   -------------------------------------------------------------------------- */
.p-qa {
    position: relative;
    padding-bottom: calc(100% * 53 / 800);
}

.p-qa__title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(calc(100% * 89 / 217));
}

/* -----------------------------------------------------------------------------
   16. footer 
   -------------------------------------------------------------------------- */
.l-footer {
    position: relative;
}

.l-footer__links {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 800 / 70;
    background: #5ac2f7;
    transform: translateY(calc(100% * 138 / 70));
}

.l-footer__link {
    /* 丸ゴシック。Apple系はローカルのヒラギノ丸ゴ、それ以外はWebフォントで担保 */
    font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN",
        "Hiragino Maru Gothic Pro", "M PLUS Rounded 1c", sans-serif;
    color: #fff;
    font-weight: 700;
    /* 40 / 800 = 5vw（600px時 30px） */
    font-size: min(5vw, 30px);
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 0.06em;
    transition: opacity 0.2s ease;
}

/* 一度クリックしたら薄黄色に */
.l-footer__link:visited {
    color: #fdf3ab;
}

.l-footer__logo {
    position: absolute;
    top: 0;
    left: calc(100% * 102 / 800);
    z-index: 2;
    width: calc(100% * 597 / 800);
    transform: translateY(calc(100% * 267 / 136));
    transition: opacity 0.2s ease;
}

/* -----------------------------------------------------------------------------
   17. 追従CTA
   -------------------------------------------------------------------------- */
.p-float {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: calc(100% * 24 / 800);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}

.p-float.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* -----------------------------------------------------------------------------
   18. PC（769px以上）
       レイアウト・画像はSPと共通。ホバー演出のみ付与。
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    .c-btn:hover,
    .l-header__logo a:hover,
    .l-footer__logo:hover,
    .l-footer__link:hover {
        opacity: 0.85;
    }

    .c-slider__arrow:hover {
        opacity: 0.75;
    }
    /* 矢印 */
    .c-slider__arrow {
    width: calc(100% * 70 / 800);
    }
    .c-slider .swiper-slide {
        width: 76%;
    }
    .c-slider__arrow--prev {
        left: calc(100% * 45.5 / 800);
    }
    .c-slider__arrow--next {
        right: calc(100% * 45.5 / 800);
    }
    .c-slider--agent .c-slider__pagination.swiper-pagination {
        margin-top: calc(100% * 1045.75 / 800);
    }
    .c-slider--voice .c-slider__pagination.swiper-pagination {
        margin-top: calc(100% * 941 / 800);
    }

    .p-float{
        bottom: -20px;
    }
    .p-float img{
        width: 90%;
        margin: 0 auto;
        display: block;
    }
}

/* -----------------------------------------------------------------------------
   19. アクセシビリティ
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid #f08300;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .c-btn,
    .c-btn__shine::after {
        animation: none;
    }

    .c-btn__shine {
        display: none;
    }

    .p-float,
    .c-slider__arrow,
    .c-slider__pagination .swiper-pagination-bullet {
        transition: none;
    }
}