@charset "utf-8";


/**
 * スマホ用設定
 */
@media ( width < 768px ) {

    main {
        margin: calc( 100vw * 157 / 780 ) auto 0;
        padding: 0;
        width: 100%;
    }

    #mv {
        margin: 0 auto;
        width: 100%;
        height: calc( 100vh - 100vw * 157 / 780 );
        height: calc( 100dvh - 100vw * 157 / 780 );
    }
    #mv .mv-bg {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    #mv .mv-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-position: 60% 50%;
        object-fit: cover;
    }
    #mv .mv-box {
        position: absolute;
        left: 5%;
        bottom: 30%;
        margin: 0;
        padding: 0;
        width: 90%;
        height: auto;
    }
    #mv .mv-box .mv-icon {
        margin: 0;
        width: 80%;
        height: auto;
    }
    #mv .mv-box .mv-txt1 {
        margin: 1.0em 0 0;
        color: #fff;
        font-size: 5.2vw;
        font-weight: 500;
        font-family: var(--font-mincho);
    }
    #mv .mv-box .mv-txt2 {
        margin: 0;
        color: #fff;
        font-size: 8.0vw;
        font-weight: 500;
        font-family: var(--font-mincho);
    }
    #mv .mv-box .mv-txt3 {
        margin: 1.0em 0 0;
        color: #fff;
        font-size: 4.0vw;
        font-weight: 600;
        font-family: var(--font-alphabet);
        line-height: calc( 30 / 16 );
        letter-spacing: 0.1em;
    }

    #mv-btm {
        margin: 0;
        padding: 12.0vw 5%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8.0vw 0;
    }
    #mv-btm .pic {
        margin: 0;
        padding: 0;
        width: 49%;
        height: auto;
        aspect-ratio: 440 / 490; 
        order: 2;
    }
    #mv-btm .pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #mv-btm .pic:nth-of-type(1) {
        translate: 0 2.0vw;
    }
    #mv-btm .pic:nth-of-type(2) {
        translate: 0 -2.0vw;
    }
    #mv-btm .mv-btm-info {
        margin: 0;
        padding: 0;
        width: 100%;
        order: 1;
    }
    #mv-btm .mv-btm-info h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 4.0vw 0;
    }
    #mv-btm .mv-btm-info h2 span:nth-of-type(1) {
        color: #07273e;
        font-size: 8.0vw;
        font-weight: 600;
        font-family: var(--font-mincho);
        line-height: calc( 68 / 53 );
    }
    #mv-btm .mv-btm-info h2 span:nth-of-type(2) {
        color: #1165c7;
        font-size: 3.6vw;
        font-weight: 600;
        font-family: var(--font-alphabet);
        line-height: calc( 30 / 16 );
        letter-spacing: 0.1em;
    }
    #mv-btm .mv-btm-info p {
        position: relative;
        margin: 1.5em 0 0;
        padding: 0 0 0 2.0em;
        width: 100%;
        font-size: 3.6vw;
        font-weight: 400;
        line-height: calc( 41 / 16 );
    }
    #mv-btm .mv-btm-info p::before {
        position: absolute;
        content: "";
        top: 0.5em;
        left: 0;
        width: 1px;
        height: calc( 100% - 1.0em );
        background: linear-gradient( to bottom, #1065c7 50%, #c1cdd3 50% );
    }

    #service {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #service .service-head {
        margin: 0;
        padding: 12.0vw 5%;
        width: 100%;
        background: url(../images/top-bg1.png) no-repeat center / cover;
    }
    #service .service-head h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 4.0vw 0;
    }
    #service .service-head h2 span:nth-of-type(1) {
        color: #fff;
        font-size: 8.0vw;
        font-weight: 600;
        font-family: var(--font-mincho);
        line-height: calc( 68 / 53 );
    }
    #service .service-head h2 span:nth-of-type(2) {
        color: #fff;
        font-size: 3.6vw;
        font-weight: 600;
        font-family: var(--font-alphabet);
        line-height: calc( 30 / 16 );
        letter-spacing: 0.1em;
    }
    #service .service-info {
        margin: 0;
        padding: 12.0vw 5%;
        width: 100%;
        background: url(../images/top-bg2.png) no-repeat center / cover;
    }
    #service .service-info div + div {
        margin-top: 12.0vw;
    }
    #service .service-info .no {
        margin: 0;
        padding: 0;
        color: #619de5;
        font-size: 3.6vw;
        font-weight: 600;
        font-family: var(--font-alphabet);
        letter-spacing: 0.1em;
    }
    #service .service-info .no:not(:first-child) {
        margin-top: 16.0vw;
    }
    #service .service-info h3 {
        margin: 1.0em 0;
        padding: 0;
        color: #fff;
        font-size: 6.0vw;
        font-weight: 600;
        font-family: var(--font-mincho);
    }
    #service .service-info p {
        margin: 1.0em 0;
        padding: 0;
        color: #fff;
        font-size: 3.2vw;
        font-weight: 400;
        line-height: calc( 29 / 15 );
    }
    #service .service-info p.font-18 {
        font-size: 3.6vw;
        font-weight: 500;
    }
    #service .service-info .btn-common {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 2.0em 0 0;
        padding: 0 1.5em;
        width: 100%;
        height: auto;
        aspect-ratio: 400 / 60;
        color: #fff;
        font-size: 4.0vw;
        font-weight: 500;
        font-family: var(--font-mincho);
        line-height: 1.0;
        border: 1px solid #fff;
        border-radius: 8px;
    }
    #service .service-info .btn-common::after {
        content: "";
        width: 0.6em;
        height: auto;
        aspect-ratio: 1 / 1;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        rotate: -45deg;
    }

    #links {
        margin: 0 auto;
        padding: 12.0vw 0;
        width: 100%;
    }
    #links .link-flex {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4.0vw 0;
    }
    #links .link-flex .link-item {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 684 / 474;
        background: #f5f5f5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2.0vw 0;
    }
    #links .link-flex .link-item :nth-child(1) {
        font-size: 6.0vw;
        font-weight: 600;
        font-family: var(--font-mincho);
    }
    #links .link-flex .link-item :nth-child(2) {
        color: #1165c7;
        font-size: 3.6vw;
        font-weight: 600;
        font-family: var(--font-alphabet);
        letter-spacing: 0.1em;
    }
    #links .link-flex .link-item .btn-common {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0.8em 0 0;
        padding: 0 1.5em;
        width: 80%;
        height: auto;
        aspect-ratio: 360 / 60;
        color: #1065c7;
        font-size: 4.0vw;
        font-weight: 500;
        font-family: var(--font-mincho);
        line-height: 1.0;
        border: 1px solid #1065c7;
        border-radius: 1.0vw;
    }
    #links .link-flex .link-item .btn-common::after {
        content: "";
        width: 0.6em;
        height: auto;
        aspect-ratio: 1 / 1;
        border-right: 2px solid #1065c7;
        border-bottom: 2px solid #1065c7;
        rotate: -45deg;
    }

}


/**
 * PC用設定
 */
@media ( width >= 768px ) {

    main {
        margin: 0 auto 0 0;
        padding: 0;
        width: calc( 100% - 160px );
    }

    #mv {
        margin: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
    }
    #mv .mv-bg {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    #mv .mv-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #mv .mv-box {
        position: absolute;
        left: 10%;
        bottom: 10%;
        margin: 0;
        padding: 0;
        width: 80%;
        height: auto;
    }
    #mv .mv-box .mv-icon {
        margin: 0;
        width: 346px;
        height: auto;
    }
    #mv .mv-box .mv-txt1 {
        margin: 1.0em 0 0;
        color: #fff;
        font-size: calc( 32 * min( 100vw, 1200px ) / 1200 );
        font-weight: 500;
        font-family: var(--font-mincho);
    }
    #mv .mv-box .mv-txt2 {
        margin: 0;
        color: #fff;
        font-size: calc( 53 * min( 100vw, 1200px ) / 1200 );
        font-weight: 500;
        font-family: var(--font-mincho);
    }
    #mv .mv-box .mv-txt3 {
        margin: 1.0em 0 0;
        color: #fff;
        font-size: calc( 16 * min( 100vw, 1200px ) / 1200 );
        font-weight: 600;
        font-family: var(--font-alphabet);
        line-height: calc( 30 / 16 );
        letter-spacing: 0.1em;
    }

    #mv-btm {
        margin: 0;
        padding: 80px 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0 1%;
    }
    #mv-btm .pic {
        margin: 0;
        padding: 0;
        width: 24%;
        height: auto;
        aspect-ratio: 440 / 490; 
    }
    #mv-btm .pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #mv-btm .pic:nth-of-type(1) {
        translate: 0 20px;
    }
    #mv-btm .pic:nth-of-type(2) {
        translate: 0 -20px;
    }
    #mv-btm .mv-btm-info {
        margin: 0;
        padding: 0 80px;
        width: 50%;
    }
    #mv-btm .mv-btm-info h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 24px 0;
    }
    #mv-btm .mv-btm-info h2 span:nth-of-type(1) {
        color: #07273e;
        font-size: 53px;
        font-weight: 600;
        font-family: var(--font-mincho);
        line-height: calc( 68 / 53 );
    }
    #mv-btm .mv-btm-info h2 span:nth-of-type(2) {
        color: #1165c7;
        font-size: 16px;
        font-weight: 600;
        font-family: var(--font-alphabet);
        line-height: calc( 30 / 16 );
        letter-spacing: 0.1em;
    }
    #mv-btm .mv-btm-info p {
        position: relative;
        margin: 1.5em 0 0;
        padding: 0 0 0 2.0em;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        line-height: calc( 41 / 16 );
    }
    #mv-btm .mv-btm-info p::before {
        position: absolute;
        content: "";
        top: 0.5em;
        left: 0;
        width: 1px;
        height: calc( 100% - 1.0em );
        background: linear-gradient( to bottom, #1065c7 50%, #c1cdd3 50% );
    }

    #service {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
    }
    #service .service-head {
        margin: 0;
        padding: 112px 112px 0 0;
        width: 34.3%;
        background: url(../images/top-bg1.png) no-repeat center / cover;
    }
    #service .service-head h2 {
        margin: 0 0 0 auto;
        padding: 0;
        width: max-content;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 24px 0;
    }
    #service .service-head h2 span:nth-of-type(1) {
        color: #fff;
        font-size: 53px;
        font-weight: 600;
        font-family: var(--font-mincho);
        line-height: calc( 68 / 53 );
    }
    #service .service-head h2 span:nth-of-type(2) {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        font-family: var(--font-alphabet);
        line-height: calc( 30 / 16 );
        letter-spacing: 0.1em;
    }
    #service .service-info {
        margin: 0;
        padding: 112px max( 112px, calc( 50.0vw - 80px - 880px ) ) 112px 112px;
        width: 65.7%;
        background: url(../images/top-bg2.png) no-repeat center / cover;
    }
    #service .service-info div + div {
        margin-top: 80px;
    }
    #service .service-info .no {
        margin: 0;
        padding: 0;
        color: #619de5;
        font-size: 16px;
        font-weight: 600;
        font-family: var(--font-alphabet);
        letter-spacing: 0.1em;
    }
    #service .service-info .no:not(:first-child) {
        margin-top: 112px;
    }
    #service .service-info h3 {
        margin: 1.0em 0;
        padding: 0;
        color: #fff;
        font-size: 36px;
        font-weight: 600;
        font-family: var(--font-mincho);
    }
    #service .service-info p {
        margin: 1.0em 0;
        padding: 0;
        color: #fff;
        font-size: 15px;
        font-weight: 400;
        line-height: calc( 29 / 15 );
    }
    #service .service-info p.font-18 {
        font-size: 18px;
        font-weight: 500;
    }
    #service .service-info .btn-common {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 2.0em 0 0;
        padding: 0 1.5em;
        width: 376px;
        height: auto;
        aspect-ratio: 376 / 64;
        color: #fff;
        font-size: 20px;
        font-weight: 500;
        font-family: var(--font-mincho);
        line-height: 1.0;
        border: 1px solid #fff;
        border-radius: 8px;
    }
    #service .service-info .btn-common::after {
        content: "";
        width: 0.6em;
        height: auto;
        aspect-ratio: 1 / 1;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        rotate: -45deg;
    }

    #links {
        margin: 0 auto;
        padding: 128px 0;
        width: 100%;
    }
    #links .link-flex {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        max-width: 1200px;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: 0 32px;
    }
    #links .link-flex .link-item {
        position: relative;
        display: block;
        margin: 0;
        padding: 0;
        width: 50%;
        height: auto;
        aspect-ratio: 584 / 474;
        background: #f5f5f5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px 0;
        cursor: pointer;
        transition: background 0.3s ease-out;
    }
    #links .link-flex .link-item::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #1165c7;
        z-index: -1;
    }
    #links .link-flex .link-item::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.4;
        z-index: -1;
    }
    #links .link-flex .link-item:nth-child(1)::after {
        background: url(../images/top-pic3.jpg) no-repeat center / cover;
    }
    #links .link-flex .link-item:nth-child(2)::after {
        background: url(../images/top-pic4.jpg) no-repeat center / cover;
    }
    #links .link-flex .link-item :nth-child(1) {
        color: var(--fg-color);
        font-size: 38px;
        font-weight: 600;
        font-family: var(--font-mincho);
        transition: color 0.3s ease-out;
    }
    #links .link-flex .link-item :nth-child(2) {
        color: #1165c7;
        font-size: 16px;
        font-weight: 600;
        font-family: var(--font-alphabet);
        letter-spacing: 0.1em;
        transition: color 0.3s ease-out;
    }
    #links .link-flex .link-item .btn-common {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 1.0em 0 0;
        padding: 0 1.5em;
        width: 312px;
        max-width: 90%;
        height: auto;
        aspect-ratio: 312 / 64;
        color: #1065c7;
        font-size: 20px;
        font-weight: 500;
        font-family: var(--font-mincho);
        line-height: 1.0;
        border: 1px solid #1065c7;
        border-radius: 8px;
        transition: color 0.3s ease-out, border 0.3s ease-out;
    }
    #links .link-flex .link-item .btn-common::after {
        content: "";
        width: 0.6em;
        height: auto;
        aspect-ratio: 1 / 1;
        border-right: 2px solid #1065c7;
        border-bottom: 2px solid #1065c7;
        rotate: -45deg;
        transition: border 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #links .link-flex .link-item:hover {
            background: transparent;
        }
        #links .link-flex .link-item:hover :nth-child(1) {
            color: #fff;
        }
        #links .link-flex .link-item:hover :nth-child(2) {
            color: #fff;
        }
        #links .link-flex .link-item:hover .btn-common {
            color: #fff;
            border: 1px solid #fff;
        }
        #links .link-flex .link-item:hover .btn-common::after {
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
        }
    }

}