@charset "UTF-8";

:root {
    --baseColor: #F9F9F9;
    --primaryColor: #323858;
    --secondaryColor: #00B2D6;
    --textColor: #000000;
    --accentColor: #BCE4FF;
}

.container {
    overflow: hidden;
    width: 100vw;
    background-color: var(--baseColor);
}

.pc {
    display: none;
}

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

p {
    font-size: 16px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    line-height: 1.5;
}

h1 {
    width: 163px;
}

.header-inner {
    padding: 32px 22px 0 25px;
    position: absolute;
    z-index: 998;
    width: 100%;
}

.menu-trigger {
    width: 27px;
    height: 27px;
    position: fixed;
    z-index: 2;
    outline: none;
    background-color: #ffffff;
    border-radius: 4px;
    top: 36px;
    right: 22px;
}

.menu-trigger span {
    position: absolute;
    left: 50%;
    width: 14.5px;
    height: 2px;
    background-color: #222222;
    transform: translate(-50%, -50%);
    border-radius: 1px;
}

.menu-trigger span:nth-of-type(1) {
    top: 9px;
}

.menu-trigger span:nth-of-type(2) {
    top: 50%;
}

.menu-trigger span:nth-of-type(3) {
    bottom: 7px;
}

.menu-trigger.active span:nth-of-type(1) {
    top: 48%;
    transform: translate(-50%, -50%)rotate(-45deg);
}

.menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
}

.menu-trigger.active span:nth-of-type(3) {
    bottom: 45%;
    transform: translate(-50%, -50%)rotate(45deg);
}

.menu-trigger,
.menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}

#pc {
    display: none;
}

#nav-logo {
    width: 163px;
}

#global-nav {
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: var(--primaryColor);
    margin: 0;
    padding: 32.5px 22.5px;
    position: fixed;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    transform: translateX(100%);
    z-index: -1;
}

#global-nav.active {
    transform: translateX(0);
    display: block;
    z-index: 1;
    position: fixed;
}


#global-nav li {
    width: 100%;
    color: var(--baseColor);
    color: #fff;
    font-size: 20px;
    font-family: 'Poppins',
        sans-serif;
}

.nav-detail {
    font-size: 7px;
    margin-top: 5px;
    font-family: 'Noto Serif JP', serif;
    margin-left: 18px;
}

#global-nav li a {
    background: none;
}

.nav-a {
    margin-bottom: 24px;

    text-align: center;
}

.li-top {
    margin-top: 80px;
}

#global-nav figure {
    display: flex;
    justify-content: center;
    height: auto;
    margin-top: 32px;
}

#global-nav figure a {
    width: 40px;
    margin-right: 16.4px;
}

#global-nav figure a:hover {
    opacity: 0.7;
}

#global-nav figure a:last-child {
    margin-right: 0;
}

#Profile {
    background-color: #fff;
    margin-top: 94px;
}

h2 {
    font-size: 46px;
    font-family: 'Poppins', sans-serif;

}

h2 span {
    font-size: 67px;
}

.blue {
    color: var(--secondaryColor);
}

.navy {
    color: #323858;
}

.h2 {
    margin-bottom: 48px;
}

.h2 p {
    color: #6B6B6B;
    font-size: 16px;
    margin-bottom: 8px;
}

.h2-1 {
    padding-top: 41px;
    padding-right: 40px;
}

.h2-1 .h2-inner {
    padding-left: 23px;
}

.line-1 {
    height: 2px;
    background-color: #C2C2C2;
}

.profile-inner {
    padding: 0 23px 64px;
}

.kanzaki-img {
    position: relative;
    margin-bottom: 32px;
}

.kanzaki-img p {
    position: absolute;
    font-size: 20px;
    font-family: 'Noto Serif JP', serif;
    top: 62px;
    right: 18px;
}

#Service .h2 {
    padding-top: 70px;
    padding-left: 23px;
}

.line-2 {
    height: 2px;
    background-color: #C2C2C2;
}

.service-inner {
    background-color: #fff;
    border-radius: 10px;
    padding: 64px 23px;
    margin-bottom: 69px;
}

.service-inner h3 {
    font-size: 22px;
    margin-left: -10px;
    position: relative;
    z-index: 991;
}

.circle {
    background-color: var(--accentColor);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    filter: blur(4px);
    position: relative;
    z-index: 990;
}

.service-h3 {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

.service-inner p {
    margin-bottom: 32px;
}

.h2-3 {
    text-align: right;
    padding-RIGHT: 22px;
}

.line-3 {
    height: 2px;
    background-color: #C2C2C2;
}

.book-inner {
    padding: 0 23px 70px;
}

.book-inner p {
    margin-bottom: 32px;
}

.h2-4 {
    padding-left: 23px;
}

.line-4 {
    height: 2px;
    background-color: #C2C2C2;
}

.sns-inner {
    padding: 0 23px 120px;
    text-align: center;
}

.sns-inner p {
    margin-bottom: 32px;
}

.sns-inner-icon {
    display: flex;
    justify-content: center;
}

.sns-inner-icon a img {
    width: 35px;
    margin-bottom: 32px;
}

.icon-1 {
    margin-right: 18.7px;
}

.sns-img {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.sns-img-1,
.sns-img-2 {
    width: 48%;
    margin-bottom: 32px;
}

#Company {
    background-color: #fff;
}

.h2-5 {
    text-align: right;
    padding: 17px 22px 0 0;
}

.line-5 {
    height: 2px;
    background-color: #C2C2C2;
}

.company-img {
    position: relative;
}

.company-img p {
    position: absolute;
    font-family: 'Poppins', sans-serif;
    font-size: 78px;
    bottom: -31px;
    left: -6px;
}

#Company ul {
    padding: 32px 23px 64px;
}

#Company ul li {
    border-bottom: #C2C2C2 solid 2px;
    margin-bottom: 18px;
}

#Company h3 {
    font-weight: 600;
    margin-bottom: 8px;
    color: #6B6B6B;
}

#Company ul li p {
    padding-bottom: 8px;
}

#Contact {
    background-color: #C7E8F0;
    border-radius: 10px;
    padding: 0 23px 64px;
    margin-bottom: 96px;
}

.h2-6 {
    text-align: center;
    padding: 40px 23px 0;
}

.line-6 {
    height: 2px;
    background-color: #9B9EAF;
}

.contact-detail {
    text-align: center;
    margin-bottom: 32px;
}

.contact-detail span {
    color: #FF0000;
    font-size: 12px;
}

.check {
    background-color: #fff;
    border-radius: 10px;
    padding: 32px 18px;
    margin-bottom: 32px;
}

.check label {
    margin-bottom: 8px;
}

.check label:last-child {
    margin-bottom: 0px;
}


input[type=checkbox] {
    display: none;
}

.check-box__text {
    display: inline-block;
    padding: 6px 0 3px 29px;
    cursor: pointer;
    position: relative;
}

.check-box__text::before {
    content: '';
    display: inline-block;
    position: absolute;
    width: 9px;
    padding-top: 7px;
    top: 10px;
    left: 10px;
    border: 1px solid #111;
}

.check-box__text::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 10px;
    padding-top: 4px;
    top: 8px;
    left: 12px;
    border-left: 2px solid #00B2D6;
    border-bottom: 2px solid #00B2D6;
    transform: rotate(-45deg);
    opacity: 0;
}

input[type=checkbox]:checked+span::after {
    opacity: 1;
}

#form sup {
    color: #FF0000;
}

.input {
    background-color: #fff;
    width: 100%;
    height: 56px;
    margin-bottom: 24px;
    margin-top: 8px;
    padding: 16px 17px;
    border-radius: 10px;
}

#form textarea {
    background-color: #fff;
    width: 100%;
    margin-bottom: 32px;
    margin-top: 8px;
    padding: 16px 17px;
    border-radius: 10px;
}

button.cta {
    cursor: pointer;
    transition: all .2s;
    padding: 21px 50px;
    border-radius: 100px;
    background: var(--primaryColor);
    display: flex;
    align-items: center;
    color: #fff;
    margin: 0 auto;
}

button.cta:hover {
    background-color: #00B2D6;
}

button.cta img {
    width: 23px;
    height: 23px;
    margin-left: 19px;
    transition: transform .3s ease-in-out;
}

button.cta:hover img {
    transform: translateX(8px);
}

button.cta:active {
    transform: scale(0.8);
}

footer {
    background-color: var(--primaryColor);
    color: #fff;
    padding: 64px 23px 32px;

}

.footer-logo {
    width: 228px;
    margin: 0 auto 32px;
}

footer p {
    text-align: center;
    margin-bottom: 32px;
}

footer figure {
    display: flex;
    justify-content: center;
    height: auto;
    margin-bottom: 62.6px;
}

footer figure a {
    width: 40px;
    margin-right: 16.4px;
}

footer figure a:hover {
    opacity: 0.7;
}

footer figure a:last-child {
    margin-right: 0;
}

.copy-right {
    text-align: center;
}

@media screen and (min-width: 1024px) {

    .pc {
        display: block;
    }

    .sp {
        display: none;
    }

    .menu-trigger {
        display: none;
        appearance: none;
        border: none;
        background: transparent;
    }

    #global-nav {
        display: block;
        width: 692px;
        height: 50px;
        transform: translate(0);
        padding: 0;
        margin: 24px 10px 0 auto;
        background-color: transparent;
    }

    #pc {
        display: flex;
        justify-content: space-around;
        padding-top: 32px;
        padding-right: 100px;

    }

    #pc li {
        color: var(--primaryColor);

    }

    #pc li a {
        display: block;
        text-decoration: none;
        font-size: 20px;
        white-space: nowrap;
    }

    #pc li a:hover {
        color: var(--secondaryColor);
    }

    #sp-nav {
        display: none;
    }

    .header-inner {
        padding: 48px 120px;
    }

    #Profile {
        margin-top: 128px;
    }

    h2 {
        font-size: 62px;
    }

    h2 span {
        font-size: 91px;
    }

    .h2 {
        margin-bottom: 72px;
    }

    .h2 p {
        margin-bottom: 15px;
    }

    .h2-inner {
        display: flex;
        align-items: flex-end;
    }

    .h2-inner h2 {
        margin-right: 16px;
    }

    #Profile .h2-inner {
        justify-content: flex-end;
    }

    .h2-1 {
        padding: 39px 220px 0 0;
    }

    .profile-inner {
        padding: 0 220px 72px 322px;
    }


    .kanzaki-img p {
        font-size: 49px;
        top: 170px;
        right: 70px;
    }

    #Service .h2 {
        padding-top: 97px;
        padding-left: 220px;
    }

    .service-inner-1 {
        padding: 48px 100px;
        margin-left: 220px;
        margin-right: 433px;
        margin-bottom: 282px;
        position: relative;
    }

    .service-inner-1 img {
        position: absolute;
    }

    .service-img1 {
        width: 171px;
        top: 20px;
        right: -250px;
    }

    .service-img2 {
        width: 373px;
        top: 250px;
        right: -340px;
    }

    .service-inner-2 {
        padding: 48px 100px;
        margin-left: 513px;
        margin-right: 120px;
        margin-bottom: 91px;
        position: relative;
    }

    .service-inner-2 img {
        position: absolute;
    }

    .service-img3 {
        width: 363px;
        top: -125px;
        left: -290px;
    }

    .service-img4 {
        width: 229px;
        top: 300px;
        left: -200px;
    }

    .h2-3 {
        padding-right: 220px;
    }

    #Book .h2-inner {
        justify-content: flex-end;
    }

    .book-inner {
        padding: 0 220px 91px;
        display: flex;
        align-items: center;
    }

    .book-inner p {
        font-size: 24px;
    }

    .book-inner img {
        width: 55%;
        margin-left: 26px;
    }

    .h2-4 {
        padding-left: 322px;
    }

    .sns-inner {
        padding: 0 220px 128px 322px;
        text-align-last: left;
    }


    .sns-inner-icon {
        justify-content: flex-start;
    }

    .sns-img {
        flex-wrap: nowrap;
        align-items: flex-end;
        margin-top: -120px;
    }

    .sns-img-1,
    .sns-img-2 {
        width: 24%;
        height: auto;
        margin-bottom: 0;
    }

    .sns-img-3 {
        width: 50%;
    }

    .h2-5 {
        padding: 36px 220px 0 0;
    }

    #Company .h2-inner {
        justify-content: flex-end;
    }

    .company-img {
        padding: 0 220px;
    }

    .company-img p {
        font-size: 169px;
        bottom: -67px;
        left: 0px;
    }

    #Company ul {
        padding: 68px 320px 72px;
    }

    #Company ul li {
        display: flex;
    }

    #Company ul li h3 {
        width: 35%;
    }

    #Company ul li p {
        width: 65%;
    }

    #Contact {
        margin: 128px 120px;
        padding-bottom: 72px;
    }

    #Contact .h2-inner {
        justify-content: center;
    }

    .h2-6 {
        padding: 72px 177px 0;
    }

    .contact-detail {
        margin-bottom: 48px;
    }

    .check {
        width: 55%;
        margin: 0 auto 48px;
        padding: 32px 46px;
    }

    .form-item {
        display: flex;
        justify-content: space-between;
    }

    .form-item label {
        width: 30%;
    }

    .form-item input {
        width: 70%;
    }


    #form textarea {
        width: 70%;
    }

    #form {
        padding: 0 177px 16px;
    }

    .input {
        margin-top: 0;
    }

    footer {
        padding-top: 50px;
        padding-bottom: 21px;
    }

    .footer-logo {
        margin-bottom: 24px;
    }

    footer p {
        margin-bottom: 48px;
    }

    footer figure {
        margin-bottom: 48px;
    }
}