@charset "utf-8";

:root {
    --yellow: #FFED1A;
    --navy: #2F4D76;
    --green: #38828D;
    --lightgreen: #06BE15;
    --white: #EFEFEF;
    --blue: #2A80CB;
    --blue2: #007BE5;
    --black: #191919;
    --lightblue: #F0F8FA;
    --NotoSansJP: 'NotoSansJP', 'Noto Sans', 'メイリオ';
    --Cabin: 'Cabin', 'メイリオ';
    --border-color: #2C476C;
    --border-color2: #2A456A;
    --header: 0px;
    --duration: 0.5s;
    --delay: 0s;
}

body {
    font-family: 'NotoSerifJP', 'Noto Sans', 'メイリオ';
    color: #191919;
    background-color: var(--lightblue);
}

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

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

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

.under-page .animation.active {
    --delay: 0.2s;
}

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

.flex-cont {
    display: flex;
}

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

@media (min-width:2000px) {
    .w108 {
        max-width: 1920px;
    }
}

/*tb*/
@media (max-width:1024px) {
    .w108 {
        width: 96%;
    }
}

/*sp*/
@media (max-width:767px) {
    .w108 {
        width: calc((327 / 375) * 100%);
    }
}

/*======================
見出し
=======================*/
:is(h2, h3, h4, h5, h6).hd01 {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-family: var(--NotoSansJP);
    font-size: 15px;
    color: var(--white);
    padding-bottom: 24px;
    border-bottom: 1px solid var(--lineColor);
}

:is(h2, h3, h4, h5, h6).hd01.has-img {
    flex-wrap: wrap;
    gap: 14px;
}

:is(h2, h3, h4, h5, h6).hd01.has-img .hd-img {
    display: block;
    width: 100%;
}

:is(h2, h3, h4, h5, h6).hd01.noborder {
    border: none;
}

:is(h2, h3, h4, h5, h6).hd01.has-img span.inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

:is(h2, h3, h4, h5, h6).hd01 span.hd-deco {
    display: block;
    width: 4px;
    aspect-ratio: 1/ 1;
    background-color: var(--white);
    border-radius: 50%;
}

:is(h2, h3, h4, h5, h6).hd02 {
    font-size: 48px;
    color: var(--white);
    line-height: calc(56 / 48);
}

@media (max-width:1300px) {
    :is(h2, h3, h4, h5, h6).hd02 {
        font-size: 30px;
    }
}

.hd03 {
    position: relative;
    z-index: 1;
    width: fit-content;
    font-size: 40px;
    margin: 0 auto 64px;
}

.hd03 :is(h2, h3, h4, h5, h6) {
    font-size: 1.0em;
    font-weight: 900;
}

.hd03 .hd-deco {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: -1;
    font-family: var(--Cabin);
    font-size: calc((120 / 40) * 1.0em);
    font-weight: 700;
    color: #FFF;
    line-height: 1.0;
}

/*sp*/
@media (max-width:767px) {
    .hd03 {
        font-size: 30px;
        margin: 0 auto 36px;
    }

    .hd03 .hd-deco {
        top: calc(50% - 23px);
        min-width: 100vw;
        font-size: calc((52 / 30) * 1.0em);
        white-space: nowrap;
        text-align: center;
    }
}

.hd04 {
    width: fit-content;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin: 0 auto 32px;
}

.hd04.white {
    color: #FFF;
}

.hd04 :is(h2, h3, h4, h5, h6) {
    font-size: 1.0em;
    margin-bottom: 12px;
}

.hd04 .hd-deco {
    font-family: var(--Cabin);
    font-size: calc((12 / 28) * 1.0em);
    text-align: center;
}

/*pc*/
@media (min-width:1025px) {
    .hd04.flex {
        margin-left: 0;
    }

    .hd04.flex>* {
        display: flex;
        align-items: center;
        gap: 58px;
    }

    .hd04.flex :is(h2, h3, h4, h5, h6) {
        margin-bottom: 0;
    }
}

/*sp*/
@media (max-width:767px) {
    .hd04 {
        font-size: 22px;
    }

    .hd04 :is(h2, h3, h4, h5, h6) {
        margin-bottom: 7px;
    }

    .hd04 .hd-deco {
        font-size: calc((12 / 22) * 1.0em);
    }

}

.hd05:is(h2, h3, h4, h5, h6) {
    font-size: 20px;
    padding-bottom: 18px;
    margin-bottom: 21px;
    border-bottom: 1px solid #FFF;
}

/*tb*/
@media (max-width:1024px) {
    .hd05:is(h2, h3, h4, h5, h6) {
        font-size: 18px;
    }
}

/*sp*/
@media (max-width:767px) {
    .hd05:is(h2, h3, h4, h5, h6) {
        padding-bottom: 16px;
    }
}

/*======================
btn
=======================*/
:is(a.btn01, .btn01 a) {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 300px;
    height: 60px;
    font-family: var(--NotoSansJP);
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
    padding-left: 32px;
    background-color: var(--green);
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    overflow: hidden;
    transition: 0.3s ease-in-out;
}

:is(a.btn01.white, .btn01.white a) {
    color: #191919;
    background-color: #FFF;
}

:is(a.btn01.blue, .btn01.blue a) {
    background-color: #007BE5;
}

:is(a.btn01.small, .btn01.small a) {
    width: 240px;
    clip-path: polygon(0 0, 100% 0, 81.25% 100%, 0 100%);
}

:is(a.btn01, .btn01 a)::before {
    content: "";
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 50px;
    z-index: 4;
    width: 6px;
    aspect-ratio: 6 / 9;
    background: url("img/common/arrow-w.webp") no-repeat center / 100%;
    transition: 0.3s ease-in-out;
}

:is(a.btn01.white, .btn01.white a)::before {
    background: url("img/common/arrow-b.webp") no-repeat center / 100%;
}

:is(a.btn01, .btn01 a)::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    width: 105px;
    height: 100%;
    background-image: linear-gradient(90deg, #000000 0%, #00000000 100%);
    opacity: 0.1;
    clip-path: polygon(calc((45 / 105) * 100%) 0, 100% 0, calc(100% - ((45 / 105) * 100%)) 100%, 0 100%);
}

@media (any-hover:hover) {
    :is(a.btn01, .btn01 a):hover {
        opacity: 0.75;
    }
}