@charset "UTF-8";

/* =========================== */
/* ページ内共通設定 */
/* =========================== */
body {
    background-color: #fff;
}



@media screen and (min-width: 750px) {
    main {
        padding-top: calc(90/var(--device-width) *var(--main-width));
        box-sizing: border-box;
    }
}

/* =========================== */
/*  top */
/* =========================== */
div.blue {
    background-color: #006BC6;
    width: 100%;
    height: calc(80/var(--device-width) *var(--main-width));
}

div.red {
    background-color: #F04E6E;
    width: 100%;
    height: calc(80/var(--device-width) *var(--main-width));
}

#fv figure {
    width: 95%;
    margin: 0 0 calc(60/var(--device-width) *var(--main-width)) auto;
}

#fv h2 {
    box-sizing: border-box;
    border-bottom: solid 1px #c0c0c0;
    margin: 0 calc(40 / var(--device-width) * var(--main-width));
    padding-bottom: calc(60 / var(--device-width) * var(--main-width));
    margin-bottom: calc(160 / var(--device-width) * var(--main-width));
}

#fv h2 span {
    display: block;
}

#fv h2 span:first-of-type {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: calc(26/var(--device-width) *var(--main-width));
    font-weight: bold;
    color: #000;
    margin-bottom: 1em;
}

#fv h2 span:last-of-type {
    font-family: "Boldonse", system-ui;
    font-size: calc(60 / var(--device-width) * var(--main-width));
    color: #006BC6;
    font-weight: bold;
}


@media screen and (min-width: 750px) {
    div.blue {
        display: none;
    }

    div.red {
        background-color: #F04E6E;
        width: 88%;
        height: calc(95 / var(--device-width) * var(--main-width));
    }

    #fv figure {
        width: 92%;
        margin: calc(-65 / var(--device-width) * var(--main-width)) 0 calc(50 / var(--device-width) * var(--main-width)) auto;
    }

    #fv h2 {
        margin: 0 calc(100 / var(--device-width) * var(--main-width));
        padding-bottom: calc(35 / var(--device-width) * var(--main-width));
        margin-bottom: calc(120 / var(--device-width) * var(--main-width));
    }

    #fv h2 span:first-of-type {
        font-size: calc(20 / var(--device-width) * var(--main-width));
        margin-bottom: 1.4em;
    }

    #fv h2 span:last-of-type {
        font-size: calc(50 / var(--device-width) * var(--main-width));
    }

}

/* =========================== */
/*  company*/
/* =========================== */
#company {
    position: relative;
    padding: 0 calc(40 / var(--device-width) * var(--main-width));
    box-sizing: border-box;
    margin-bottom: calc(75 / var(--device-width) * var(--main-width));
}

#company h3 {
    font-size: calc(42 / var(--device-width) * var(--main-width));
    font-weight: bold;
    letter-spacing: 0.08em;
    line-height: 1.6;
    margin-bottom: calc(48 / var(--device-width) * var(--main-width));
}

#company dl>div {
    position: relative;
    padding: calc(33 / var(--device-width) * var(--main-width)) calc(20 / var(--device-width) * var(--main-width)) calc(58 / var(--device-width) * var(--main-width));
}

#company dl>div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 7.7%;
    height: 1px;
    background-color: #0090D0;
}

#company dl>div::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 92.3%;
    height: 1px;
    background-color: #CCCCCC;
}

#company dl dt {
    color: #0090D0;
    font-weight: bold;
    font-size: calc(30 / var(--device-width) * var(--main-width));
    margin-bottom: 0.45em;
}

#company dl dd {
    font-size: calc(28 / var(--device-width) * var(--main-width));
    line-height: 1.6;
}

#company .item_inner li {
        position: relative;
    padding-left: 1em;
}

#company .item_inner li::before {
    content: "・";
    position: absolute;
    top: 0;
    left: -1em;
    padding-left: 1em;
}

#company .item_inner li span {
 padding-left: 0.5em;
}

#company .note {
    font-size: calc(22 / var(--device-width) * var(--main-width));
    font-weight: 400;
}


@media screen and (min-width: 750px) {
    #company {
        padding: 0 calc(100 / var(--device-width) * var(--main-width));
        margin-bottom: calc(64 / var(--device-width) * var(--main-width));

    }

    #company h3 {
        font-size: calc(42 / var(--device-width) * var(--main-width));
        margin-bottom: calc(56 / var(--device-width) * var(--main-width));
    }

    #company dl>div {
        padding: calc(13 / var(--device-width) * var(--main-width)) calc(0 / var(--device-width) * var(--main-width)) calc(26 / var(--device-width) * var(--main-width));
        display: flex;
    }

    #company dl>div::before {
        width: 14.7%;
    }

    #company dl>div::after {
        width: 82.9%;
    }

    #company dl dt {
        font-size: calc(20 / var(--device-width) * var(--main-width));
        margin-bottom: 0;
        width: 17%;
        line-height: 1.6;
    }

    #company dl dd {
        font-size: calc(16 / var(--device-width) * var(--main-width));
        flex: 1;
    }

    #company .note {
    font-size: calc(13 / var(--device-width) * var(--main-width));
}
}


/* =========================== */
/*  access*/
/* =========================== */
#access {
    position: relative;
    padding: 0 calc(42 / var(--device-width) * var(--main-width)) calc(160 / var(--device-width) * var(--main-width));
}

#access::after {
    position: absolute;
    top: calc(30 / var(--device-width) * var(--main-width));
    left: 0;
    content: "";
    background-color: #FAFAFA;
    border-top-right-radius: calc(30 / var(--device-width) * var(--main-width));
    border-bottom-right-radius: calc(30 / var(--device-width) * var(--main-width));
    width: calc(710 / var(--device-width) * var(--main-width));
    height: calc(965 / var(--device-width) * var(--main-width));
    z-index: -1;
}

#access h3 {
    font-size: calc(42 / var(--device-width) * var(--main-width));
    font-weight: bold;
    letter-spacing: 0.08em;
    line-height: 1.6;
    margin-bottom: calc(38 / var(--device-width) * var(--main-width));
}

#access dl {
    display: flex;
    flex-direction: column;
    gap: calc(60 / var(--device-width) * var(--main-width));
    margin-bottom: calc(60 / var(--device-width) * var(--main-width));
}


#access dl>div {
    position: relative;
    padding-left: calc(125 / var(--device-width) * var(--main-width));
}

#access dl>div::before {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(105 / var(--device-width) * var(--main-width));
    height: calc(102 / var(--device-width) * var(--main-width));
}

#access dl>div:first-of-type::before {
    top: calc(-14 / var(--device-width) * var(--main-width));
    left: 0;
    background-image: url(../images/icon01.png);
}

#access dl>div:last-of-type::before {
    top: calc(-14 / var(--device-width) * var(--main-width));
    left: 0;
    background-image: url(../images/icon02.png);

}

#access dl dt {
    color: #0090D0;
    font-weight: bold;
    font-size: calc(30 / var(--device-width) * var(--main-width));
    margin-bottom: 0.45em;
}

#access dl dd {
    font-size: calc(28 / var(--device-width) * var(--main-width));
    font-weight: 500;
    line-height: 1.6;
}

#access .ggmap {
    position: relative;
    padding-bottom: 65.25%;
    height: 0;
    overflow: hidden;
}

#access .ggmap iframe {
    width: 100%;
    height: 58vw;
}

@media screen and (min-width: 750px) {
    #access {
        position: relative;
        padding: 0 calc(100 / var(--device-width) * var(--main-width)) calc(160 / var(--device-width) * var(--main-width));
    }

    #access::after {
        width: calc(880 / var(--device-width) * var(--main-width));
        height: calc(685 / var(--device-width) * var(--main-width));
    }


    #access h3 {
        margin-bottom: calc(63 / var(--device-width) * var(--main-width));
    }

    #access dl {
        flex-direction: row;
        gap: calc(87 / var(--device-width) * var(--main-width));
        margin-bottom: calc(45 / var(--device-width) * var(--main-width));
    }

    #access dl>div {
        padding-left: calc(0 / var(--device-width) * var(--main-width));
    }

    #access dl dt {
        font-size: calc(24 / var(--device-width) * var(--main-width));
        margin-bottom: calc(40 / var(--device-width) * var(--main-width));
        padding-left: calc(85 / var(--device-width) * var(--main-width));

    }

    #access dl dd {
        font-size: calc(16 / var(--device-width) * var(--main-width));
        font-weight: 500;
    }

    #access dl>div::before {
        width: calc(71 / var(--device-width) * var(--main-width));
        height: calc(71 / var(--device-width) * var(--main-width));
    }

    #access dl>div:first-of-type::before,
    #access dl>div:last-of-type::before {
        top: calc(-21 / var(--device-width) * var(--main-width));
    }

    #access .ggmap {
        width: 81%;
        margin: auto;
        padding-bottom: 33.75%;
    }

    #access .ggmap iframe {
    width: 100%;
    height: 28vw;
}

}