:root {
    --Default-FontSize: 16px;
    --Default-FontWeight: 400;
    --Default-FontColor: #333333;
    --Color-HeartsBlue: #017ac2;
    --Color-HeartsOrange: #f79328;
    --Color-White: #ffffff;
    --MainPosi-SP: 54px;
    --MainPosi-PC: 100px;
    font-family: "Noto Sans JP";
    font-weight: var(--Default-FontWeight);
    font-size: var(--Default-FontSize);
    color: var(--Default-FontColor);
    line-height: 1.5;
    letter-spacing: 0.1em;
}

/* フォント定義 */
@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Noto Sans JP";
    font-style: bold;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Noto Sans JP";
    font-style: black;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/NotoSansJP-Black.woff2") format("woff2");
}

body {
    background-color: #fcfcfc;
}

a {
    text-decoration: none;
    color: var(--Default-FontColor);
}

main {
    margin-top: var(--MainPosi-SP);
}

@media (min-width: 768px) {
    main {
        margin-top: var(--MainPosi-PC);
    }
}

.mainContainer {
    display: flex;
    flex-direction: column;
    gap: 100px;
    margin-bottom: 100px;
    align-items: center;
}

@media (max-width: 767px) {
    .mainContainer {
        gap: 48px;
    }

        .mainContainer section {
            gap: 20px;
        }
}

@media (min-width: 1920px) {
    .mainContainer {
        align-items: center;
    }
}

.pageTitle {
    width: 100%;
    height: 250px;
    position: relative;
}

@media (min-width: 768px) {
    .pageTitle {
        height: 400px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
}

.pageTitle h1 {
    display: flex;
    flex-direction: column;
    color: var(--Color-HeartsBlue);
    font-size: 24px;
    font-weight: 900;
    padding: 12px 36px;
    position: absolute;
    bottom: -42px;
    background-color: #dce9f1;
}

@media (min-width: 768px) {
    .pageTitle h1 {
        width: 350px;
        align-items: flex-end;
        justify-content: center;
        font-size: 36px;
        text-align: right;
        bottom: auto;
        background-color: transparent;
        z-index: 0;
    }

        .pageTitle h1.small {
            font-size: 30px;
        }

        .pageTitle h1::after {
            width: 450px;
            height: 450px;
            content: "";
            position: absolute;
            left: -150px;
            background: #dce9f1;
            transform: rotate(45deg);
            z-index: -1;
        }
}

.pageTitle h1 span {
    color: var(--Default-FontColor);
    font-size: 16px;
    font-weight: var(--Default-FontWeight);
}

.mainContainer section {
    width: 100%;
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 0 16px;
}

    .mainContainer section h2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        font-size: 36px;
        font-weight: 900;
        color: #0E3B89;
        text-align: center;
    }

        .mainContainer section h2::before {
            width: 35px;
            height: 5px;
            content: "";
            display: block;
            background-color: var(--Color-HeartsOrange);
        }

        .mainContainer section h2 span {
            color: var(--Default-FontColor);
            font-size: var(--Default-FontSize);
            font-weight: var(--Default-FontWeight);
        }

    .mainContainer section .content {
        width: 100%;
    }

/* フェードイン/アウト */
[class^="fadeInContent"] {
    opacity: 0;
    visibility: hidden;
}

.fadeInAnimeToTop {
    animation: fadeInToTop 1s ease 0s 1 normal forwards running;
    visibility: visible !important;
}

.fadeInAnimeToRight {
    animation: fadeInToRight 1s ease 0s 1 normal forwards running;
    visibility: visible !important;
}

.fadeInAnimeToBottom {
    animation: fadeInToBottom 1s ease 0s 1 normal forwards running;
    visibility: visible !important;
}

.fadeInAnimeToLeft {
    animation: fadeInToLeft 1s ease 0s 1 normal forwards running;
    visibility: visible !important;
}

.fadeInAnimeOnTheSpot {
    animation: fadeInOnTheSpot 1s ease 0s 1 normal forwards running;
    visibility: visible !important;
}

.fadeOutAnimeToTop {
    animation: fadeOutToTop 1s ease 0s 1 normal forwards running;
    visibility: hidden !important;
}

.fadeOutAnimeOnTheSpot {
    animation: fadeOutOnTheSpot 1s ease 0s 1 normal forwards running;
    visibility: hidden !important;
}

@keyframes fadeInToTop {
    0% {
        transform: translateY(80px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes fadeInToRight {
    0% {
        transform: translateX(-80px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes fadeInToBottom {
    0% {
        transform: translateY(-80px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes fadeInToLeft {
    0% {
        transform: translateX(80px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes fadeInOnTheSpot {
    0% {
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOutToTop {
    0% {
        opacity: 1;
        transform: translateY(80px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes fadeOutOnTheSpot {
    0% {
        opacity: 1;
    }

    100% {
    }
}

.hide {
    display: none;
}

html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 100px;
}