@charset "utf-8";
/*共通設定*/
body {
    color: #a88362;
}

.h2-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    line-height: 1.3;
}

.h2-en {
    font-size: 18px;
}

.h2-wrap h2 {
    font-size: 44px;
    font-weight: 500;
}
/*終わり*/  


/*<section class="fv">*/
.fv {
    position: relative;
    width: 100%;
    height: 100vh;
}

.fv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
    z-index: 2;
}

.fv-video {
    position: relative;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    height: 100%;
    object-fit: cover;
}

.fv-h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: calc(100% - 10vw);
    text-align: center; 
    color: #fff;
    text-shadow: 0 0 8px rgba(0,0,0,0.1);
    font-size: 40px;
    z-index: 3;
}

.btn-wrap {
    position: absolute;
    bottom: -44px;
    left: 0;
    z-index: 5;
    background-color: #f18710;
    padding: 0 64px 0 2.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #fff;
    height: 88px;
    border-radius: 0 50vh 50vh 0;
}
/*終わり*/  


/*<section class="concept">*/
.concept {
    padding: 120px 5vw 40px 5vw; 
}

.concept-area {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.concept-h2 {
    font-size: 32px;
}
/*終わり*/  


/*<div class="swiper">*/
.swiper {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 0 80px 0;
}

.swiper-wrapper {
    transition-timing-function: linear;
}

.swiper-slide {
    height: auto;
}

.swiper-box {
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-box-p {
    padding-top: 50%;
}

.concept-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
/*終わり*/  


/*<section class="intro">*/
.intro {
    position: relative;
    padding: 120px 5vw 300px 5vw;
    background-color: #ffdafa;
}

.intro .h2-wrap {
    color: #f149ab;
}

.intro-flex {
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.intro-wrap {
    background-color: #fff;
    border-radius: 32px;
    padding: 32px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.intro-img-wrap {
    width: 40%;
    height: 240px;
}

.intro-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro-txt-wrap {
    width: 55%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    font-size: 18px;
}

.intro-txt-01 {
    font-weight: 600;
    font-size: 22px;
}

.intro-btn {
    background-color: #f149ab;
    display: inline-block;
    color: #fff;
    width: 120px;
    padding: 4px 0;
    text-align: center;
}

.company-back {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
/*終わり*/  


/*<section class="company">*/
.company {
    position: relative;
    padding: 120px 5vw;
    background-color: #fef3f4;
}

.company-in {
    max-width: 880px;
}

.company-dl,
.profile-dl {
    margin-top: 64px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.company-dl dt,
.profile-dl dt {
    width: 25%;
    background-color: #fff;
    border-radius: 10px 0 0 10px;
    padding: 24px;
    margin-bottom: 24px;
}

.company-dl dd,
.profile-dl dd {
    width: 75%;
    background-color: #fff;
    border-radius: 0 10px 10px 0;
    padding: 24px;
    margin-bottom: 24px;
}

.company-shape {
    position: absolute;
    top: -10%;
    right: 0;
    width: 50%;
    z-index: 10;
}

.profile-wrap {
    margin-top: 80px;
}
/*終わり*/  


/*<section class="policy">*/
.policy {
    padding: 80px 5vw 120px 5vw;
    background-color: #fef3f4;
}

.policy-in {
    max-width: 880px;
}

.policy-txt-area {
    margin-top: 64px;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background-color: #fff;
    padding: 24px;
    border-radius: 10px;
}

.p-star-txt {
    position: relative;
    padding-left: 24px;
    font-weight: 600;
}

.p-star-txt::before {
    content: "☆";
    position: absolute;
    top: 0;
    left: 0;
}

.p-dot-txt {
    position: relative;
    padding-left: 44px;
    font-size: 18px;
}

.p-dot-txt::before {
    content: "・";
    position: absolute;
    top: 0;
    left: 24px;
}

.p-num-txt {
    position: relative;
    padding-left: 24px;
    font-weight: 600;
}

.p-num-txt::before {
    position: absolute;
    top: 0;
    left: 0;
}

.p-num-txt-01::before {
    content: "①";
}

.p-num-txt-02::before {
    content: "②";
}

.p-num-txt-03::before {
    content: "③";
}

.p-num-txt-04::before {
    content: "④";
}

.p-num-txt-05::before {
    content: "⑤";
}

.p-num-txt-06::before {
    content: "⑥";
}

.p-num-txt-07::before {
    content: "⑦";
}

.p-num-txt-08::before {
    content: "⑧";
}

.p-num-txt-09::before {
    content: "⑨";
}
/*終わり*/  


/*<section class="access">*/
.access {
    position: relative;
    padding: 0px 5vw 240px 5vw;
    background-color: #fef3f4;
}

.access-in {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.map-wrap {
    width: 55%;
}

.map-wrap iframe {
    width: 100%;
    height: 100%;
}

.access-wrap {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.access .h2-wrap {
    align-items: flex-start;
}

.contact-back {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

}
/*終わり*/  


/*<section class="contact">*/
.contact {
    padding: 0 5vw 40px 5vw;
    background-color: #f3cecf;
}

.contact .h2-wrap {
    color: #f149ab;
}

.tel-line {
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.contact-tel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 32px;
    font-weight: 600;
}

.contact-tel-icon {
    max-width: 32px;
}

.contact-line-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #73BB56;
    max-width: 300px;
    width: 100%;
    color: #fff;
    font-weight: 600;
    padding: 10px;
    border-radius: 8px;
}

.form-wrap {
    background-color: #fef3f4;
    margin-top: 64px;
    padding: 24px 5vw 48px 5vw;
    border-radius: 16px;
}

.form-wrap-in {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.form-area dt {
    margin-top: 24px;
}

.required {
    color: #e81717;
}

.input-text {
    font-family: "Noto Sans JP", sans-serif;    
    width: 100%;
    padding: 8px;
    border: solid 1px #999;
    font-size: 18px;
    color: #333;
    border-radius: 4px;
}

.message {
    font-family: "Noto Sans JP", sans-serif;    
    width: 100% !important;
    height: 160px;
    padding: 8px;
    border: solid 1px #999;
    font-size: 18px;
    color: #333;
    border-radius: 4px;
}

.privacy-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.submit-btn-area {
    text-align: center;
    margin-top: 40px;
}

.submit-button {
    font-family: "Noto Sans JP", sans-serif;
    border: none;
    background-color: #f149ab; 
    padding: 8px 40px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
}

.submit-button:hover {
    opacity: 0.8;
}

.privacy-check .wpcf7-list-item {
    margin: 0;
}
/*終わり*/  


/*タブレット*/
@media (max-width: 1024px) {  
/*共通設定*/
    .h2-wrap {
        gap: 8px;
    }

    .h2-en {
        font-size: 16px;
    }

    .h2-wrap h2 {
        font-size: clamp(calc(32px), calc(44 / 1024 * 100vw), 44px);
    }
/*終わり*/  


/*<section class="fv">*/
    .fv {
        height: 60vh;
    }

    .fv-h1 {
        font-size: clamp(calc(28px), calc(40 / 1024 * 100vw), 40px);
    }
/*終わり*/ 


/*<section class="concept">*/
    .concept-h2 {
        font-size: clamp(calc(24px), calc(32 / 1024 * 100vw), 32px);
    }
/*終わり*/ 


/*<div class="swiper">*/
    .concept-img {
        height: clamp(calc(160px), calc(200 / 1024 * 100vw), 200px);
    }
/*終わり*/  


/*<section class="intro">*/
    .intro-wrap {
        flex-direction: column;
        gap: 24px;
    }

    .intro-img-wrap {
        width: 100%;
        height: clamp(calc(280px), calc(320 / 1024 * 100vw), 320px);
    }

    .intro-txt-wrap {
        width: 100%;
    }

    .intro-btn {
        width: 160px;
    }
/*終わり*/  


/*<section class="company">*/
    .company-dl,
    .profile-dl {
        font-size: 16px;
    }

    .company-dl dt,
    .profile-dl dt {
        width: 30%;
        padding: 24px 16px;
    }

    .company-dl dd,
    .profile-dl dd {
        width: 70%;
        padding: 24px 16px;
    }
/*終わり*/ 


/*<section class="policy">*/
    .policy-txt-area {
        font-size: clamp(calc(18px), calc(20 / 1024 * 100vw), 20px);
    }

    .p-dot-txt {
        font-size: clamp(calc(16px), calc(18 / 1024 * 100vw), 18px);
    }
/*終わり*/ 


/*<section class="access">*/
    .access {
        padding: 0px 5vw 200px 5vw;
    }

    .access-in {
        flex-direction: column-reverse;
        gap: 24px;
    }

    .map-wrap {
        width: 100%;
        height: 320px;
    }

    .access-wrap {
        width: 100%;
    }

    .access .h2-wrap {
        align-items: center;
        margin-bottom: 40px;
    }
/*終わり*/ 
}
  
  
/*スマホ*/
@media (max-width: 599px) {
/*共通設定*/
    .h2-en {
        font-size: 14px;
    }

    .h2-wrap h2 {
        font-size: clamp(calc(24px), calc(32 / 599 * 100vw), 32px);
    }
/*終わり*/  


/*<section class="fv">*/
    .fv {
        height: 80vh;
    }

    .fv-h1 {
        font-size: clamp(calc(20px), calc(24 / 599 * 100vw), 24px);
    }

    .btn-wrap {
        bottom: -32px;
        padding: 0 48px 0 5vw;
        height: 64px;
    }
/*終わり*/  


/*<section class="concept">*/
    .concept {
        padding: 100px 5vw 40px 5vw; 
    }

    .concept-h2 {
        text-align: center;
    }
/*終わり*/  


/*<div class="swiper">*/
    .swiper {
        padding: 0 0 80px 0;
    }

    .concept-img {
        height: clamp(calc(160px), calc(240 / 599 * 100vw), 240px);
    }

/*終わり*/  


/*<section class="intro">*/
    .intro {
        padding: 80px 5vw 120px 5vw;
    }

    .intro-flex {
        margin-top: 40px;
    }

    .intro-wrap {
        padding: 24px;
        border-radius: 16px;
    }

    .intro-img-wrap {
        height: clamp(calc(200px), calc(280 / 599 * 100vw), 280px);
    }

    .intro-txt-wrap {
        font-size: clamp(calc(16px), calc(18 / 599 * 100vw), 18px);
    }

    .intro-txt-01 {
        font-size: clamp(calc(20px), calc(22 / 599 * 100vw), 22px);
    }

/*終わり*/  


/*<section class="company">*/
    .company {
        padding: 80px 5vw;
    }

    .company-shape {
        top: -3%;
    }

    .company-dl,
    .profile-dl {
        flex-direction: column;
        margin-top: 40px;
    }

    .company-dl dt,
    .profile-dl dt {
        width: 100%;
        border-radius: 10px 10px 0 0;
        padding: 16px 24px 8px 24px;
        margin-bottom: 0;
    }

    .company-dl dd,
    .profile-dl dd {
        width: 100%;
        border-radius: 0 0 10px 10px;
        padding: 8px 24px 16px 24px;
        border-top: solid 1px #fef3f4;
        margin-bottom: 16px;
    }
/*終わり*/  


/*<section class="policy">*/
    .policy {
        padding: 40px 5vw 80px 5vw;
    }

    .policy-txt-area {
        margin-top: 40px;
        padding: 16px;
        font-size: clamp(calc(16px), calc(18 / 599 * 100vw), 18px);
    }

    .p-star-txt {
        padding-left: 20px;
    }

    .p-dot-txt {
        font-size: clamp(calc(14px), calc(16 / 599 * 100vw), 16px);
        padding-left: 16px;
    }

    .p-dot-txt::before {
        left: 0;
    }

    .p-num-txt {
        padding-left: 20px;
    }

/*終わり*/ 


/*<section class="access">*/
    .access {
        padding: 0px 5vw 120px 5vw;
    }
/*終わり*/ 


/*<section class="contact">*/
    .tel-line {
        margin-top: 40px;
    }

    .contact-tel-btn {
        font-size: clamp(calc(24px), calc(32 / 599 * 100vw), 32px);
    }

    .contact-tel-icon {
        max-width: clamp(calc(24px), calc(32 / 599 * 100vw), 32px);
    }

    .contact-line-btn {
        max-width: clamp(calc(240px), calc(300 / 599 * 100vw), 300px);
    }

    .form-wrap {
        margin-top: 40px;
    }
/*終わり*/ 

}