@charset "utf-8";


html {
    -webkit-appearance: none;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    word-break: break-all;
    font-size: 10px;
    scroll-padding-top: 5rem;
    /* padding-top: 5rem; */
}


body {
    font-family: 'Yu Gothic', '游ゴシック', YuGothic, '游ゴシック体', sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: #505050;
    /* line-height: 1.5; */
    margin: 0 auto;
}

img {
    width: 100%;
    height: auto;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    vertical-align: middle;
}


#container {
    width: 100%;
    overflow: hidden;
}

/* PC, SP の非表示 */
@media (max-width: 767px) {
    .pc {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .sp {
        display: none !important;
    }
}


/* HEADER */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 5.5rem;
    margin-left: 9.9rem;
}

@media (max-width: 767px) {
    header {
        margin: 1rem 0 0.6rem 2rem;
    }
}


.header__left {
    display: flex;
    align-items: center;
}

.header__left img {
    width: 3.5rem;
    height: 3.5rem;
    padding-right: 1rem;
}

.header__left h1 {
    font-size: 1.8rem;
    font-weight: 700;
}

@media (max-width: 767px) {
    .header__left h1 {
        font-size: 2rem;
    }
}

/* HEADER RIGHT */
.header__right {
    display: flex;
    justify-content: center;
}

@media (max-width: 767px) {
    .header__right {
        position: relative;
        margin-right: 0;
    }
}


@media (max-width: 767px) {
    .sp_menu span {
    display: block;
    width: 100%;
    height: 0.4rem;
    color: #FFFFFF;
    }
}

.pc_menu ul {
    display: flex;
}

.pc_menu li {
    font-size: 1.4rem;
    font-weight: 700;
    padding: 1.8rem 0;
}

.pc_menu a {
    transition: 0.4s;
}

.pc_menu a :hover {
    opacity: 0.7;

}

@media (max-width: 767px) {
    .pc_menu {
        display: none;
    }
}

.pc_menu a {
    padding: 0 0.5rem;
    font-size: 1.4rem;
}

@media (min-width: 768px) {
    .sp_menu {
        display: none;
    }
}



@media (max-width: 767px) {
    .menu_box {
        position: relative;
        width: 3.272rem;
        height: 2.418rem;
        background: #0D96A0;
    }
}

@media (max-width: 767px) {
.menu_box li {
    font-size: 1.2rem;
    text-align: center;
}
}


/* MAIN */

.fv__image {
    position: relative;
}

.fv__paragraph {
    position: absolute;
    padding: 3rem 3.5rem 1.3rem 9.9rem;
    background-color: #FFFFFFB3;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 767px) {
    .fv__paragraph {
        padding: 0.5rem 2.2rem 0rem;
        top: 100%;
        transform: translateY(-100%);
    }
}



.fv__text1 {
    font-size: 2.5rem;
    font-weight: 700;
    padding-bottom: 0.1rem;
}

@media (max-width: 767px) {
    .fv__text1 {
        font-size: 2rem;
        padding-top: 1.3rem;
        padding-bottom: 0.2rem;
    }
}

.fv__text2 {
    font-size: 4rem;
    font-weight: 700;
    color: #0D96A0;
    line-height: 1.5;
    padding-top: 1rem;
    padding-bottom: 0.2rem;
}

@media (max-width: 767px) {
    .fv__text2 {
        font-size: 3rem;
        padding-top: 0.6rem;
        padding-bottom: 0.3em;
    }
}

.concept {
    padding: 6.4rem 6rem;
    position: relative;
}

@media (max-width: 767px) {
    .concept {
        padding: 4.3rem 2rem 4.3rem;
    }
}

.con__title h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #0D96A0;
    text-align: center;
    padding-bottom: 1.9rem;
}

.con__title h2 span {
    display: inline-block;
}

@media (max-width: 767px) {
    .con__title h2 {
        font-size: 2.5rem;
        line-height: 1.4;
        padding-bottom: 1.7rem;
    }
}

.con__text p {
    font-size: 1.8rem;
    line-height: 1.83;
    text-align: center;
}


@media (max-width: 767px) {
    .con__text p {
        font-size: 1.6rem;
        font-weight: 500;
        text-align: left;
        line-height: 1.88;

    }
}

.con__logo {
    position: absolute;
    width: 8.375rem;
    height: 7.982rem;
    top: 52%;
    left: 83.5%;
}

@media (max-width: 767px) {
    .con__logo {
        width: 6.835rem;
        height: 6.514rem;
        top: 70%;
        left: 70%;
        font-weight: 400;
    }
}


/* ABOUT */
#about {
    margin: 0 calc(50% - 50vw);
    padding: 2.4rem 0 6.6rem 0;
    background-color: #0D96A01A;
}

@media (max-width: 767px) {
    #about {
        padding: 4.9rem 0 0;
        width: 100%;

    }
}

@media (max-width: 767px) {
    .about__area {
        padding: 0;
    }
}

/* ABOUT BOX */
.about__box {
    display: flex;
    align-items: center;
    max-width: 100%;
    margin-top: 4.7rem;
}
/* Safari
_::-webkit-full-page-media, :future, :root .about__box {
    display: flex;
    align-items: center;
    max-width: 100%;
    margin-top: 4.7rem;
} */

@media (max-width: 767px) {
    .about__box {
        flex-direction: column-reverse;
        margin-bottom: 0;
        margin-top: 0;
    }
}


.about__box2 {
    display: flex;
    align-items: center;
    width: 880px;
    max-width: 100%;
    margin-top: 5.1rem;
}

@media (max-width: 767px) {
    .about__box2 {
        flex-direction: column;
        margin-bottom: 0;
        margin-top: 4.6rem;
    }
}


/* ABOUT TEXT1 */
.about__text1 {
    width: 50%;
    text-align: left;
    padding-right: 4.6rem;
}

_::-webkit-full-page-media, _:future, :root .about__text1 h3  {
    white-space: nowrap;
    display: inline-block;
    }

@media screen and (-webkit-min-device-pixel-ratio:0){
    .about__text1 h3 {
        display: inline-block;
        white-space: nowrap;
        overflow-wrap: anywhere;

    }
}


@media (max-width: 767px) {
    .about__text1 {
        width: 100%;
        padding-right: 0;
    }
}

.about__text1 h3 {
    font-size: 2.2rem;
    text-align: left;
    font-weight: 700;
    margin-bottom: 2.2rem;
}

@media (max-width: 767px) {
    .about__text1 h3 {
        font-size: 2rem;
        text-align: center;
        line-height: 1.5;
        margin: 2.1rem 0 0.6rem;
    }
}

@media (max-width: 767px) {
    .about__text1 h3 span {
        display: inline-block;
    }
}

.about__text1 p {
    font-size: 1.8rem;
    line-height: 1.83;
    text-align: left;
}

@media (max-width: 767px) {
    .about__text1 p {
        font-size: 1.6rem;
        line-height: 1.88;
        text-align: left;
    }
}


/* ABOUT IMAGE1 */
.about__image1 {
    width: 50%;
}

@media (max-width: 767px) {
    .about__image1 {
        width: 100%;
        text-align: center;
    }
}


/* ABOUT TEXT2 */
.about__text2 {
    width: 50%;
    text-align: left;
    padding-left: 4.4rem;
}

@media (max-width: 767px) {
    .about__text2 {
        width: 100%;
        padding-left: 0;
    }
}

.about__text2 h3 {
    font-size: 2.2rem;
    text-align: left;
    font-weight: 700;
    margin-bottom: 2rem;
}

@media (max-width: 767px) {
    .about__text2 h3 {
        font-size: 2rem;
        text-align: center;
        line-height: 1.5rem;
        margin: 2.9rem 0 1.5rem;
    }
}


.about__text2 p {
    font-size: 1.8rem;
    line-height: 1.83;
    text-align: left;
}

@media (max-width: 767px) {
    .about__text2 p {
        font-size: 1.6rem;
        line-height: 1.87;
        text-align: left;
        margin-bottom: 4.3rem;
    }
}


/* ABOUT TEXT3 */
.about__text3 {
    width: 50%;
    text-align: left;
    padding-right: 4.4rem;
}

@media (max-width: 767px) {
    .about__text3 {
        width: 100%;
        padding-right: 0;
    }
}

.about__text3 h3 {
    font-size: 2.2rem;
    text-align: left;
    font-weight: 700;
    margin-bottom: 2.1rem;
}

@media (max-width: 767px) {
    .about__text3 h3 {
        font-size: 2rem;
        text-align: center;
        line-height: 1.5rem;
        margin: 3.6rem 0 1.6rem;
    }
}

.about__text3 p {
    font-size: 1.8rem;
    line-height: 1.83;
    text-align: left;
}


@media (max-width: 767px) {
    .about__text3 p {
        font-size: 1.6rem;
        line-height: 1.88;
        text-align: left;
    }
}


/* ABOUT IMAGE2 */
.about__image2 {
    width: 50%;
}

@media (max-width: 767px) {
    .about__image2 {
        width: 100%;
        text-align: center;
    }
}


/* SERVICE */
#service {
    padding: 7rem 0;
}

@media (max-width: 767px) {
    #service {
        padding: 0;
    }
}

.inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 6rem;
}

@media (max-width: 767px) {
    .inner {
        padding: 0 2rem 5rem;
    }
}

.ser__logo img {
    width: 2.5rem;
    height: 2.5rem;
}

.title1 {
    display: flex;
    justify-content: center;
    padding-bottom: 4.5rem;
}


@media (max-width: 767px) {
    .title1 {
        padding: 4.1rem 0;
    }
}


.title1 h2 {
    font-size: 2.5rem;
    font-weight: 700;
    padding-right: 1.8rem;
    padding-left: 2.4rem;
}

@media (max-width: 767px) {
    .title1 h2 {
        padding-bottom: 0;
    }
}

.title1 h2::before {
    padding-left: 2rem;
}

.title2 {
    display: flex;
    justify-content: center;
    padding-bottom: 2.1rem;
}


@media (max-width: 767px) {
    .title2 {
        padding: 4.5rem 0;
    }
}


.title2 h2 {
    font-size: 2.5rem;
    font-weight: 700;
    padding-right: 1.8rem;
    padding-left: 2rem;
}

@media (max-width: 767px) {
    .title2 h2 {
        padding-bottom: 0;
    }
}

.title2 h2::before {
    padding-left: 2rem;
}

.service__area {
    display: flex;
    justify-content: space-between;
    width: 100%;
    column-gap: calc(50 / 880 * 100%);
}

@media (max-width: 767px) {
    .service__area {
        flex-direction: column;
        width: 100%;
    }
}

.service__box {
    max-width: 26rem;
}

@media (max-width: 767px) {
    .service__box {
        max-width: 100%;
        padding-bottom: 4.2rem;
    }
}

.ser__image img {
    width: 100%;
}

.ser__text dt {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-top: 2.2rem;
    margin-bottom: 0.9rem;
}

@media (max-width: 767px) {
    .ser__text dt {
        margin-top: 3rem;
        margin-bottom: 1.2rem;
    }
}

.ser__text dd {
    font-size: 1.7rem;
    line-height: 1.76;
    text-align: center;
}

@media (max-width: 767px) {
    .ser__text dd {
        font-size: 1.6rem;
        line-height: 1.87;
    }
}

@media (max-width: 767px) {
    .service__box:nth-of-type(3) {
    content: '';
    padding-bottom: 0;
    }
}

/* INFORMATION */

#information {
margin: 0 calc(50% - 50vw);
padding: 6.3rem 0 7rem;
background-color: #0D96A01A;
}

@media (max-width: 767px) {
    #information {
    padding: 0;
    }
}

.info__list {
    border-bottom: 1px solid #707070;
}

.list__box {
    display: flex;
    padding: 1.8rem 0;
    border-top: 1px solid #707070;
    z-index: 99;
    /* column-gap: 3rem; */
    }

@media (max-width: 767px) {
    .list__box {
        flex-direction: column;
        padding: 0 0 1.5rem;
        width: 100%;
    }
}

.list__box h6 {
    font-size: 1.7rem;
    font-weight: 700;
    width: 8.8rem;
    white-space: nowrap;
    margin-right: 3rem;
    margin-left: 2rem;
}

@media (max-width: 767px) {
    .list__box h6 {
        padding: 3rem 1rem 0;
        margin-right: 0;
        margin-left: 0;
        white-space: none;
    }
}

.list__box h3 {
    font-size: 2rem;
    color: #0D96A0;
    font-weight: 700;
    width: 18rem;
    white-space: nowrap;
    margin-right: 2.9rem;
}

@media (max-width: 767px) {
    .list__box h3 {
        padding: 0.7rem 1rem 0.1rem;
        margin-right: 0;
    }
}


.list__box p {
    font-size: 1.7rem;
    width: calc( 515 / 840 * 100%);
}

@media (max-width: 767px) {
    .list__box p {
        font-size: 1.6rem;
        width: 100%;
        line-height: 1.88;
        padding: 0 1rem 0.7rem;
    }
}

@media (max-width: 767px) {
    .about__box p {
        font-size: 1.6rem;
    }
}

/* ACCESS */

#access {
    padding: 7rem 0;
}

@media (max-width: 767px) {
    #access {
        padding: 0;
    }
}

.title1 {
    display: flex;
    justify-content: center;
    padding-bottom: 4.6rem;
}

.access__area {
    display: flex;
    width: 100%;
    font-size: 1.8rem;
}

@media (max-width: 767px) {
    .access__area {
        flex-direction: column;
    }
}
.map {
    width: 50%;
    aspect-ratio: 440 / 300;
}

@media (max-width: 767px) {
.map {
    width: 100%;
    aspect-ratio: 335 / 222;
    padding-top: 1rem;
    }
}

iframe {
    width: 100%;
    height: 100%;
}

.access__info1 {
    padding-left: 5rem;
}

@media (max-width: 767px) {
    .access__info1 {
        padding-left: 0;
    }
}

.access__info1 h1 {
    font-size: 2.2rem;
    color: #505050;
    font-weight: 700;
}

@media (max-width: 767px) {
    .access__info1 h1 {
        padding-top: 3.5rem;
        text-align: left;
    }
}

.access__info1 h6 {
    font-size: 1.8rem;
    padding-top: 2rem;
    padding-bottom: 1.6rem;
}

@media (max-width: 767px) {
    .access__info1 h6 {
        font-size: 1.6rem;
    }
}


.access__info1 span {
    font-size: 2.5rem;
    color: #0D96A0;
}

.mail {
    padding: 1.8rem 0 3.7rem;
    font-size: 1.8rem;
}

@media (max-width: 767px) {
    .mail {
        font-size: 1.6rem;
        padding: 1.6rem 0 2rem ;
    }
}
.tel {
    vertical-align: middle;
}

.hours {
    width: calc(390 / 349.9 * 100%);
    font-size: 1.8rem;
    padding-top: 1.5rem;
    padding-bottom: 1.1rem;
    line-height: 2.22;
    border-top: 1px solid #707070;
    border-bottom: 1px solid #707070;
}

@media (max-width: 767px) {
    .hours {
        width: 100%;
        font-size: 1.6rem;
        padding-top: 0.9rem;
        padding-bottom: 0.6rem;
    }
}


/* CONTACT */


#contact {
    padding: 7rem 0rem 7.7rem;
    background-color: #0D96A01A;
}

@media (max-width: 767px) {
    #contact {
        padding: 0 1rem 0 0;
    }
}

.ser__logo img {
    width: 2.5rem;
    height: 2.5rem;
}

.con__phrase h3 {
    font-size: 1.7rem;
    text-align: center;
    line-height: 1.77;
    padding: 0 0 4.5rem;
}

@media (max-width: 767px) {
    .con__phrase h3 {
        font-size: 1.6rem;
        text-align: left;
        padding: 0 0 3.8rem;
    }
}

.form1 {
    display: flex;
    justify-content: space-between;
    padding-bottom: 3rem;
}

@media (max-width: 767px) {
    .form1 {
        flex-direction: column;
        padding-bottom: 1.4rem;
    }
}

.form2 {
display: flex;
    justify-content: space-between;
    padding-bottom: 4.4rem;
}

@media (max-width: 767px) {
    .form2 {
        padding-bottom: 5rem;
    }
}

.contact__form label {
    display: block;
    width: 16rem;
    font-size: 2rem;
    font-weight: 700;
    padding: 0.5rem 0;
}

@media (max-width: 767px) {
    .contact__form label {
        font-size: 1.8rem;
        padding-top: 0.7rem;
        padding-bottom: 1.1rem;
    }
}
.contact__form input {
    width: calc(710 / 880 * 100%);
    max-width: 100%;
    height: 4rem;
}

@media (max-width: 767px) {
    .contact__form input {
    width: 100%;
    height: 5rem;
    }
}

.input {
    color: #FFFFFF;
}


.content {
    width: calc(710 / 880 * 100%);
    height: 30rem;
    padding-top: 1.2rem;
}

@media (max-width: 767px) {
    .content {
        width: 100%;
        padding-top: 0;
    }
}


@media (max-width: 767px) {
    .form2 {
        flex-direction: column;
    }
}


.form3 {
    text-align: center;
}


.form3 input {
    font-size: 2.5rem;
    font-weight: 700;
    color: #FFFFFF;
    width: 20rem;
    height: 5rem;
    background-color: #0D96A0;
    border-radius: 1rem;
}

@media (max-width: 767px) {
    .form3  input {
        font-size: 2rem;
        width: 32.1rem ;
        height: 4.1rem;
    }
}

/* FOOTER */

footer {
    padding: 7rem 0;
    background: #505050;
}

@media (max-width: 767px) {
    footer {
        padding: 4.4rem 0 0;
        justify-content: center;
    }
}

.footer__menu {
    width: 100%;
    max-width: 740px;
    border-bottom: 1px solid #FFFFFF ;
    margin: 0 auto;
    /* padding: 0 3.8rem; */
}

@media (max-width: 767px) {
    .footer__menu {
        text-align: center;
        display: inline-block;
        margin-bottom: 2.3rem;
}
    }

.footer__menu ul {
    display: flex;
    justify-content: center;
    color: #FFFFFF;
    padding-bottom: 2.7rem;
}

@media (max-width: 767px) {
    .footer__menu ul {
        display:inline-block;
        line-height: 1.8;
        padding-bottom: 1.78rem;
    }
}

.footer__menu li {
    font-size: 2rem;
    font-weight: 700;
    padding: 0 0.7rem;
}

@media (max-width: 767px) {
    .footer__menu li {
        font-size: 1.8rem;
        display: inline-block;
    }
}


.footer__name h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    padding-top: 2.8rem;
    padding-bottom: 1.7rem;
    text-align: center;
}

@media (max-width: 767px) {
    .footer__name h2 {
        font-size: 1.6rem;
        padding-top: 0;
        padding-bottom: 3.6rem;
    }
}

.footer__icons ul {
    display: flex;
    justify-content: center;
}

.footer__icons img {
    width: 1.8rem;
    height: 2.2rem;
    width: 100%;
    color: #FFFFFF;
    padding-right: 0.6rem;
    padding-left: 0.6rem;
    opacity: 1;
}