@charset "utf-8";

/* CSS Document */

body {
    line-height: 1.75 !important;
}

/* ------------------------------------------
  mv
--------------------------------------------- */

.mv {
    width: 100%;
    height: 400px;
    position: relative;
    background: url(../images/mv.webp) no-repeat center center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mv p {
    font-family: 'Hind', sans-serif;
}

@media screen and (max-width: 1280px) {
    .mv {
        background: url(../images/mv-1280.webp) no-repeat center center;
    }
}

.mv-sp{
    width: 100%;
    height: 78vw;
    background: url(../images/mv-768.webp) no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------------------------
  main
--------------------------------------------- */
.cmn-text-blue {
    color: #3f7393;
}

.head-lv2 {
    font-size: 24px;
    letter-spacing: 0.5px;
    text-align: center;
    position: relative;
    padding-bottom: 45px;
}

.head-lv2 .head-lv2-num {
    font-size: 24px;
    font-family: 'Hind', sans-serif;
    color: #3f7393;
    display: inline-block;
    position: relative;
    margin-bottom: 15px;
}

.head-lv2 .head-lv2-num:after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    background: #3f7393;
    position: absolute;
    bottom: 0;
}

.head-lv2 .head-lv2-main {
    font-size: 28px;
    letter-spacing: 3px;
    display: block;
}

.head-lv2 small {
    font-size: 16px;
    letter-spacing: 1px;
    display: block;
    font-family: 'Hind', sans-serif;
}

.head-lv2-black .head-lv2-main,
.head-lv2-black small {
    color: #070707;
}

.head-lv2-above-lead-text {
    padding-bottom: 30px;
}

.head-lv2-pb-large {
    padding-bottom: 60px;
}

.head-lv3 {
    font-size: 20px;
    font-weight: 500;
    padding-bottom: 50px;
    padding-left: 20px;
    letter-spacing: 1px;
    position: relative;
}

.head-lv3:before {
    content: "";
    display: block;
    position: absolute;
    background: #aa1b49;
    width: 8px;
    height: 20px;
    top: 9px;
    left: 0;
}

.head-lv3.include-span {
    padding-right: 100px;
}

.head-lv3 span {
    top: 8px;
}


.common-sec-title {
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: 2px;
    padding-bottom: 20px;
}


.block {
    width: 100%;
    padding: 40px 0 60px;
}

.block-top-overlay {
    margin-top: -250px;
    padding-top: 300px;
}

.block-above-top-overlay {
    padding-bottom: 0;
    position: relative;
}

.bg-gray {
    background: #f3f3f3;
}

.bg-white {
    background: #fff;
}

.inner {
    width: 100%;
    padding: 50px 0;
    max-width: 1000px;
    margin: 0 auto;
}

.inner.mw-800 {
    max-width: 800px !important;
}

.block .inner:last-child {
    padding: 50px 0 90px;
}

.block .inner + .inner {
    margin-top: -50px;
}

.border-top {
    border-top: 1px solid #656565;
}

.text-notice {
    padding-bottom: 40px;
    text-align: center;
}

.common-lead-text {
    text-align: center;
    padding-bottom: 50px;
}

.sub-top-cmnBlock-title-lv2 {
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: 3px;
    text-align: center;
    padding-bottom: 30px;
}

.sub-top-cmnBlock-title-lv2 span {
    font-size: 24px;
    font-weight: 500;
}

.sub-top-cmnBlock-title-lv3 {
    font-size: 20px;
    color: #3f7393;
    text-align: center;
    padding-bottom: 30px;
}

.sub-top-cmnBlock-title-lv3 span {
    border-bottom: 1px solid;
    padding-bottom: 5px;
}

.sub-top-cmnBlock-img {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub-top-cmnBlock-text-title {
    font-size: 22px;
    line-height: 1.5;
    font-weight: 500;
    padding-bottom: 15px;
}

.sub-top-cmnBlock-blue {
    background: #d9ebf6;
    padding: 45px 60px 70px;
}

.sub-top-cmnBlock-blue-lead {
    text-align: center;
}

.cmn-two-column-gap-txt {
    padding: 30px 45px 35px;
    position: relative;
}

.cmn-two-column-gap-img img {
    width: 100%;
    height: auto;
}

.cmn-two-column-gap-tag {
    background: #3f7393;
    color: #fff;
    padding: 0px 15px;
    position: absolute;
    top: -13px;
    left: 45px;
    border-radius: 100px;
}

.slick-about-fd-step img {
    width: 100%;
    height: auto;
}


/*--------------------------------------------------------
animmtion
--------------------------------------------------------*/
.js-underline-animate {
    /* アンダーライン用にrelative必須 */
    position: relative;
}

.js-underline-animate::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 8px;
    background: #fde047;
    /* Tailwindのyellow-200に近い色 */
    width: 0;
    /* 最初は0、アニメで伸ばす */
    transition: width .7s cubic-bezier(.8, .3, .1, 1) .2s;
    z-index: 0;
}

.js-underline-animate.is-active::after {
    width: 100%;
}

/*scroll-anime*/
.fadein {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 1500ms;
}

.fadein.fadein-active {
    opacity: 1;
    transform: translate(0, 0);
}

.fadein-jikansa {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 1500ms;
}

.fadein-jikansa-active {
    opacity: 1;
    transform: translate(0, 0);
}

.fadein-jikansa-active:nth-of-type(2) {
    -moz-transition-delay: 200ms;
    -webkit-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
}

.fadein-jikansa-active:nth-of-type(3) {
    -moz-transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    -o-transition-delay: 400ms;
    -ms-transition-delay: 400ms;
}

.fadein-jikansa-active:nth-of-type(4) {
    -moz-transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
    -o-transition-delay: 600ms;
    -ms-transition-delay: 600ms;
}

/* ========================================================
   for SP
===========================================================*/

@media screen and (max-width: 768px) {
    a:hover {
        opacity: 1;
    }

    .btn {
        width: 200px;
        height: 50px;
        font-size: 12px;
        padding-bottom: 0;
    }

    .btn:before {
        content: none;
    }

    .btn:after {
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        width: 7px;
        height: 7px;
        top: 23px;
    }

    .btn-large:after {
        right: 20px;
    }

    .pc-hide {
        display: block !important;
    }

    .sp-hide {
        display: none !important;
    }

    .block {
        padding: 30px 0 40px;
    }

    .block-top-overlay {
        margin-top: 0;
        padding-top: 30px;
    }

    .inner {
        width: 100%;
        padding: 30px 0;
    }

    .block .inner:last-child {
        padding: 30px 0;
    }

    .block .inner + .inner {
        margin-top: -30px;
    }

    .btn-wrap {
        padding-top: 40px;
    }

    .link-more {
        padding-top: 30px;
    }

    #page-top img {
        width: 60px;
        height: 60px;
    }

    .sp-mb20 {
        margin-bottom: 20px;
    }

    .common-lead-text {
        padding: 0 20px 20px;
        letter-spacing: 1px;
        text-align: left;
    }

    .common-lead-text big {
        font-size: 14px;
    }

    .cmn-text-small {
        font-size: 10px;
    }

    /*sub-mv*/
    .sub-mv {
        height: 150px;
    }

    .page-title span {
        font-size: 20px;
    }

    .page-title small {
        font-size: 14px;
        padding-top: 10px;
    }

    /*head*/
    .head-lv1 {
        font-size: 16px;
    }

    .head-lv1 span {
        font-size: 10px;
        padding-top: 8px;
        display: inline-block;
    }

    .head-lv2 {
        font-size: 14px;
        padding-bottom: 30px;
        line-height: 1.75;
    }

    .head-lv2 .head-lv2-num {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .head-lv2 .head-lv2-num:after {
        height: 2px;
    }

    .head-lv2 .head-lv2-main {
        font-size: 18px;
        letter-spacing: 3px;
    }

    .head-lv2 small {
        font-size: 12px;
        letter-spacing: 1px;
    }

    .head-lv2-above-lead-text {
        padding-bottom: 10px;
    }

    .head-lv3 {
        font-size: 14px;
        padding-bottom: 10px;
        padding-left: 15px;
    }

    .head-lv3:before {
        width: 5px;
        height: 16px;
        top: 2px;
        left: 0;
    }

    .head-lv3 span {
        top: 2px;
    }

    .head-lv4 {
        font-size: 12px;
        font-weight: 500;
        padding-bottom: 10px;
        color: #aa1b49;
    }

    .head-border {
        margin-bottom: 15px;
    }

    .common-sec-title {
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: 2px;
        padding-bottom: 10px;
    }

    .sub-top-cmnBlock-blue {
        padding: 25px 20px 30px;
    }

    .sub-top-cmnBlock-blue-lead {
        text-align: left;
    }

    .sub-top-cmnBlock-text-title {
        font-size: 16px;
        padding-bottom: 15px;
    }

    .sub-top-cmnBlock-title-lv2 {
        font-size: 16px;
        letter-spacing: 1px;
        padding-bottom: 15px;
    }

    .sub-top-cmnBlock-title-lv2 span {
        font-size: 18px;
    }

    .sub-top-cmnBlock-title-lv3 {
        font-size: 14px;
        padding-bottom: 30px;
    }

    .cmn-two-column-gap-txt {
        padding: 30px 25px 35px;
        position: relative;
    }

    .cmn-two-column-gap-tag {
        left: 20px;
    }

    .slick-dots {
        bottom: 10px;
    }

    .slick-dotted.slick-slider {
        margin-bottom: 0;
    }

    .js-underline-animate {
        background: linear-gradient(transparent 70%, #fde047 0%);
    }

    .js-underline-animate::after {
        content: none;
    }

}