@charset "utf-8";

:root {
    --main-color: #277CC4;
    --sub-color: #64C726;
    --under-bg: #EFF2F4;
    --Montserrat: 'Montserrat';
    --ZenOldMincho: 'ZenOldMincho';
    --gradient: linear-gradient(to bottom, transparent, #277CC4 50%, #277CC4 100%);
    --border-glay: #D3D3D3;
}

body {
    font-family: 'ZenKakuGothicNew', 'Noto Sans', 'メイリオ';
}

body .under-page {
    color: #262626;
}

.cont-area,
.cont-w {
    width: calc((1240 / 1366) * 100%);
    margin: auto;
}

.w13 {
    width: calc((1300 / 1366) * 100%);
    margin: auto;
}

@media (min-width:2000px) {

    .cont-area,
    .cont-w,
    .w13 {
        max-width: 1920px;
    }
}

/*sp*/
@media (max-width:599px) {

    .cont-area,
    .cont-w,
    .sp-w {
        width: calc((335 / 375) * 100%);
    }

    .sp-w {
        margin: auto;
    }
}

/*animation*/
.animation {
    opacity: 0;
    translate: var(--offsetX, 0) var(--offsetY, 0);
}

.animation.active {
    animation: common-animation var(--duration, 0.5s) var(--delay, 0s) ease-in-out forwards;
}

.under-page .animation.active {
    animation-delay: var(--delay, 0.3s);
}

@keyframes common-animation {
    to {
        translate: 0 0;
        opacity: 1.0;
    }
}

/*sp*/
@media (max-width:767px) {
    .animation {
        translate: var(--spOffsetX, var(--offsetX, 0)) var(--spOffsetY, var(--offsetY, 0));
    }

    .animation.active {
        animation-delay: var(--spDelay, var(--delay));
    }

    .under-page .animation.active {
        animation-delay: var(--spDelay, 0.2s);
    }
}


/*======================
見出し
=======================*/
.top_hd {
    font-size: 22px;
    color: #FFF;
    line-height: 1.0;
}

.top_hd h2 {
    font-size: 1.0em;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.top_hd .hd-deco p {
    font-family: var(--Montserrat);
    font-size: calc((80 / 22) * 1.0em);
    font-weight: 500;
    margin-top: 17px;
    margin-bottom: -17px;
}

.top_hd+.text-cont p {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 2.0;
    letter-spacing: 0.12em;
    margin-top: 32px;
}

@media (max-width:1365px) {
    .top_hd {
        font-size: clamp(16px, 1.61vw, 22px);
    }

    .top_hd+.text-cont p {
        font-size: 14px;
    }
}

/*tb*/
@media (max-width:1024px) {
    .top_hd {
        width: 100%;
        font-size: 16px;
        text-align: center;
    }

    .top_hd .hd-deco p {
        font-size: calc((48 / 16) * 1.0em);
        margin-top: 13px;
        margin-bottom: -13px;
    }

    .top_hd+.text-cont p {
        font-size: 14px;
        text-align: center;
        margin-top: 32px;
    }
}

.hd02 {
    color: var(--main-color);
}

.hd02 :is(h2, h3, h4, h5) {
    font-size: 20px;
    font-family: var(--ZenOldMincho);
    font-weight: 400;
    letter-spacing: 0.06em;
    margin-top: -3px;
}

.hd02 .hd-deco {
    font-family: var(--Montserrat);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.hd-area .hd02+.read-text {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 2.0;
    color: #53565C;
    margin-top: 32px;
}

/*sp*/
@media (max-width:767px) {
    .hd02 :is(h2, h3, h4, h5) {
        font-size: 16px;
    }

    .hd02 .hd-deco {
        font-size: 24px;
    }

    .hd-area .hd02+.read-text {
        font-size: 14px;
        margin-top: 20px;
    }
}

/*======================
ボタン
=======================*/
.text-btn {
    position: relative;
    display: block;
    width: fit-content;
    font-family: var(--Montserrat);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1.0;
    margin-top: 49px;
}

.text-btn.blue {
    color: var(--main-color);
}

.text-btn span {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: -50px;
    display: block;
    width: 38px;
    aspect-ratio: 1 / 1;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.3s ease-in-out;
}

.text-btn.blue span {
    background-color: var(--main-color);
}

.text-btn span::after {
    content: "";
    position: absolute;
    transform: translate(-50%, -50%) rotate(-45deg);
    top: 50%;
    left: calc(50% - 1px);
    width: 9px;
    aspect-ratio: 1 / 1;
    border: solid 2px var(--main-color);
    border-top: 0;
    border-left: 0;
}

.text-btn span.green::after {
    border-color: var(--sub-color);
}

.text-btn.blue span::after {
    border-color: #FFF;
}

@media (any-hover: hover) {
    .text-btn:hover span {
        transform: translate(5px, -50%);
    }
}

/*tb*/
@media (max-width:1024px) {
    .text-btn {
        margin-top: 34px;
    }

    #top .text-btn {
        margin-left: auto;
        margin-right: auto;
        transform: translateX(-13px);
    }
}

/*under text-btn*/
.under-page .text-btn {
    margin-top: 0;
}

.under-page .text-btn a {
    display: flex;
    align-items: center;
    gap: 13px;
}

.under-page .text-btn a::after {
    content: "";
    display: block;
    width: 38px;
    aspect-ratio: 1 / 1;
    background: url(images/common/arrow-b.webp) no-repeat #FFF calc(50% + 1.5px) 50%/ 8.5px;
    border-radius: 50%;
    transition: 0.3s ease-in-out;
}

.under-page .text-btn.blue a::after {
    background-image: url(images/common/arrow-w.webp);
    background-color: var(--main-color);
}

.under-page .text-btn.green a::after {
    background-image: url(images/common/arrow-g.webp);
}

@media (any-hover: hover) {
    .under-page .text-btn:hover a::after {
        translate: 5px 0;
    }
}

/*anker-link*/
.under-page .anchor-link {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--main-color);
    letter-spacing: 0.12em;
    line-height: 2.0;
}

.under-page .anchor-link::before {
    content: "";
    display: block;
    rotate: 90deg;
    width: 19px;
    aspect-ratio: 1 / 1;
    background: url(images/common/arrow-w.webp) no-repeat var(--main-color) calc(50% + 1px) 50% / 6px;
    border-radius: 50%;
}

/*TOPへのボタン*/
a.top_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #FFF;
    letter-spacing: 0.12em;
    width: 384px;
    height: 80px;
    margin: 64px auto 0;
    border-radius: 50px;
    border: solid 1.5px var(--main-color);
    background-color: var(--main-color);
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

@media (any-hover:hover) {
    a.top_btn:hover {
        color: var(--main-color);
        background-color: #FFF;
    }
}

/*sp*/
@media (max-width:767px) {
    a.top_btn {
        font-size: 14px;
        width: 280px;
        height: 60px;
        margin-top: 32px;
    }
}