@charset "utf-8";

/***************************************************************************
*
* INDEX STYLE
*
***************************************************************************/

/*.areaBrand*/
.areaBrand {
    padding: 80px 0;
    margin-bottom: 59px;
}
.areaBrand .brandWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: calc((100% - 1106px)/2);
}
.areaBrand.areaMille .brandWrap {
    flex-direction: row-reverse;
} 
.areaBrand .brandBox {
    width: calc(100%/2 - 98px);
} 
.areaBrand .brandPhoto {
    width: 53.15%;
} 
.areaBrand .brandBox .brandTitle {
    position: relative;
    margin: 0 auto 48px;
}
.areaBrand .brandBox .brandTitle:before {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 99px;
    height: 2px;
    background-color: #000000;
}
.areaBrand .brandBox .brandSub {
    margin-bottom: 50px;
}
.areaBrand .brandBox .brandBtn {
    text-align: center;
}
.areaBrand .brandBox .brandBtn a{
    display: inline-block;
    background: url(../images/index/icon-arrow.png)no-repeat center right 25px/40px 6px,#C86466;
    color: #fff;
    padding: 6px 73px 5px 25px;
    letter-spacing: 1px;
    transition: all .3s;
}
/*.areaBrand*/

/*areaMille*/
.areaMille {
    background: url(../images/index/area-brand-photo-02.png)no-repeat top right/79.3%;
}
.areaMille .brandWrap {
    padding-right: calc((100% - 1106px)/2);
    padding-left: 0;
}
.areaMille .brandBox .brandTitle {
    width: 253px;
}
/*areaMille*/

/*.areaEmery*/
.areaEmery {
    background: url(../images/index/area-brand-photo-05.png)no-repeat top left/79.3%;
    margin-bottom: 0;
}
.areaEmery .brandBox .brandTitle {
    width: 323px;
}
/*.areaEmery*/


.areaTitle {
    position: relative;
    text-align: center;
    padding-bottom: 21px;
}

.areaTitle .titleJp {
    position: absolute;
    bottom: 0;
    left: 50.1%;
    transform: translateX(-50%);
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 3.7px;
}

/*AREAABOUT*/

.areaAbout {
    padding: 100px 0 99px;
}

.areaAbout .aboutWrap {
    background: #F8F8F8;
    padding: 81px 0 89px;
}

.areaAbout .areaTitle {
    margin-bottom: 58px;
}

.areaAbout .aboutDetail {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.areaAbout .aboutDetail li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.areaAbout .aboutDetail li .aboutTitle {
    background: #C86466;
    color: #fff;
    width: 166px;
    padding: 18px 20px;
    letter-spacing: 0.8px;
}

.areaAbout .aboutDetail li .aboutTxt {
    width: calc(100% - 181px);
    border: 1px solid #C86466;
    background: #fff;
    padding: 16px 19px 15px;
    letter-spacing: 0.8px;
    line-height: 1.63;
}

/*END-AREAABOUT*/

/*AREACONTACT*/

.areaContact {
    margin-bottom: 80px;
}
.areaContact .titleJp {
    bottom: -6px;
}

.areaContact .contactBanner {
    margin-bottom: -120px;
}

.areaContact .contactWrap {
    position: relative;
    background: #F7F3ED;
    padding: 80px 0 101px;
}

.areaContact .contactWrap .areaTitle {
    margin-bottom: 39px;
}

.areaContact .contactWrap .contactInfo {
    text-align: center;
    margin-bottom: 73px;
    letter-spacing: 1px;
}

.areaContact .contactWrap .contactForm {
    width: 100%;
    max-width: 800px;
    margin: auto;
}
.areaContact .contactWrap .contactForm .contactThank {
    display: none;
    text-align: center;
    margin-top: 30px;
    font-size: 18px;
/*    color: #20bc0f;*/
}

.areaContact .contactForm .formItem {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 9px;
}

.areaContact .contactForm .formName {
    width: 100%;
    padding-top: 21px;
    margin-bottom: 20px;
}

.areaContact .contactForm .formItem .formName .name {
    display: inline-block;
    font-weight: bold;
    letter-spacing: 1px;
    margin-right: 17px;
}

.areaContact .contactForm .formItem .formName .required {
    display: inline-block;
    font-size: 12px;
    color: #fff;
    background: #C40606;
    padding: 1px 3px;
    transform: translateY(-2px);
}

.areaContact .contactForm .formInput {
    width: 100%;
}

.areaContact .contactForm .formInput .styleInput {
    width: 100%;
    border: 1px solid #C86466;
    font-size: 16px;
    background: #fff;
    height: 65px;
    padding: 10px;
    font-weight: 500;
    font-family: 'Noto Sans JP', sans-serif;
}

.areaContact .contactForm .formItem.textarea {
    margin-bottom: 55px;
}

.areaContact .contactForm .formItem.textarea .styleInput {
    height: 150px;
    resize: none;
}

.areaContact .contactForm .btnSubmit {
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
}

.areaContact .contactForm .btnSubmit .formSubmit {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: #C86466;
    border-radius: 40px;
    border: none;
    padding: 20px 0;
    font-family: 'Noto Sans JP', sans-serif;
}

/*END-AREACONTACT*/

@media(max-width: 1366px) and (min-width: 769px) {
    .areaBrand {
        background-size: auto;
    }
}
@media(max-width: 1250px) and (min-width: 769px) {
    .areaContact .contactBanner {
        margin-bottom: -80px;
    }
}
@media(max-width: 1200px) and (min-width: 769px) {
    .areaBrand {
        background-size: 85% 100%;
        padding: 50px 0;
    }
}
@media(max-width: 1150px) and (min-width: 769px) {
    .areaBrand .brandBox {
        padding: 0 20px;
    }
}
@media(max-width: 1100px) and (min-width: 769px) {
    .areaBrand .brandBox {
        width: 45%;
    }
}
@media(max-width: 1000px) and (min-width: 769px) {
    .areaContact .contactBanner {
        margin-bottom: -30px;
    }
}
@media(max-width: 900px) and (min-width: 769px) {
    .areaContact .contactWrap .contactForm {
        padding: 20px;
    }
}
@media(max-width: 890px) and (min-width: 769px) {
    .areaBrand {
        padding: 30px 0;
    }
    .areaAbout .aboutDetail {
        padding: 0 20px;
    }
}
@media(max-width: 850px) and (min-width: 769px) {
    .areaMille .brandBox .brandTitle {
        width: 210px;
    }
    .areaBrand .brandBox .brandSub {
        font-size: 14px;
        margin-bottom: 30px;
    }
    .areaEmery .brandBox .brandTitle {
        width: 260px;
    }
}
@media (min-width: 769px) {
    .areaBrand .brandBox .brandBtn a:hover {
        background-position: center right 15px;
    }
    .areaContact .contactForm .btnSubmit .formSubmit:hover {
        background: #D8B58F;
    }
}

@media(max-width: 768px) {
    /*areaBrand*/
    .areaBrand {
        padding: 40px 0 0;
        margin-bottom: 49px;
    }
    .areaBrand .brandWrap {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 4%;
    }
    .areaBrand .brandBox {
        width: 100%;
        margin-bottom: 31px;
    }
    .areaBrand .brandBox .brandTitle {
        margin-bottom: 34px;
    }
    .areaBrand .brandBox .brandTitle:before {
        bottom: -11px;
        width: 50px;
    }
    .areaBrand .brandBox .brandSub {
        line-height: 1.7;
        margin-bottom: 28px;
        text-align: justify;
    }
    .areaBrand .brandBox .brandBtn a {
        padding: 5px 49px 4px 16px;
        background: url(../images/index/icon-arrow-sp.png) no-repeat center right 15px/28px 5px,#C86466;
    }
    .areaBrand .brandPhoto {
        width: 100%;
    }
    /*areaBrand*/

    /*areaMille*/
    .areaMille {
        background: url(../images/index/area-brand-photo-02-sp.png) no-repeat top center/100% 77.5%;
    }
    .areaMille .brandBox .brandTitle {
        width: 157px;
    }
    /*areaMille*/

    /*areaEmery*/
    .areaEmery {
        background: url(../images/index/area-brand-photo-05-sp.png) no-repeat top center/100% 77.5%;
    }
    .areaEmery .brandBox .brandTitle {
        width: 173px;
    }
    /*areaEmery*/

    .areaTitle {
        padding-bottom: 16px;
    }

    .areaTitle .titleEng {
        width: 180px;
        display: block;
        margin: auto;
    }

    .areaTitle .titleJp {
        left: 50.7%;
        font-size: 24px;
        letter-spacing: 2.7px;
    }

    /*AREAABOUT*/
    .areaAbout {
        padding: 40px 0 36px;
        margin: 50px 0;
        background: #F8F8F8;
    }

    .areaAbout .aboutWrap {
        padding: 0;
    }

    .areaAbout .areaTitle {
        margin-bottom: 33px;
    }

    .areaAbout .aboutDetail li {
        flex-direction: column;
    }

    .areaAbout .aboutDetail li .aboutTitle {
        width: 100%;
        padding: 10px 10px 9px;
    }

    .areaAbout .aboutDetail li .aboutTxt {
        width: 100%;
        padding: 9px;
        letter-spacing: 0.7px;
        line-height: 1.43;
    }

    /*END-AREAABOUT*/

    /*AREACONTACT*/
    .areaContact {
        background: #F7F3ED;
        margin-bottom: 50px;
    }
    .areaContact .titleJp {
        bottom: 0px;
    }

    .areaContact .contactBanner {
        margin-bottom: 0;
    }

    .areaContact .contactBanner img {
        width: 100%;
        height: 30.7vw;
        object-fit: cover;
        object-position: center;
    }

    .areaContact .contactWrap {
        padding: 40px 0 50px;
    }

    .areaContact .contactWrap .areaTitle {
        margin-bottom: 49px;
        padding-bottom: 20px;
    }

    .areaContact .contactWrap .areaTitle .titleEng {
        width: 191px;
    }

    .areaContact .contactWrap .contactInfo {
        margin-bottom: 47px;
        line-height: 1.7;
        letter-spacing: 0.7px;
    }

    .areaContact .contactForm .formItem {
        flex-direction: column;
        margin-bottom: 25px;
    }

    .areaContact .contactForm .formName {
        padding-top: 0;
        margin-right: 0;
        margin-bottom: 9px;
        width: 100%;
    }

    .areaContact .contactForm .formItem .formName .name {
        width: auto;
        margin-right: 12px;
    }

    .areaContact .contactForm .formItem .formName .required {
        font-size: 10px;
        padding: 3px;
        line-height: 1;
        transform: none;
        vertical-align: text-top;
        margin-top: 3px;
    }

    .areaContact .contactForm .formInput {
        width: 100%;
        max-width: 100%;
    }

    .areaContact .contactForm .formInput .styleInput {
        height: 50px;
        padding: 6px;
        font-size: 14px;
    }
    .areaContact .contactForm .formItem.textarea {
        margin-bottom: 51px;
    }
    .areaContact .contactForm .formItem.textarea .styleInput {
        height: 110px;
    }
    .areaContact .contactForm .btnSubmit {
        width: 49.3%;
    }
    .areaContact .contactForm .btnSubmit .formSubmit {
        font-size: 16px;
        padding: 13px 0;
    }
    .areaContact .contactWrap .contactForm .contactThank {
        font-size: 16px;
        margin-top: 20px;
    }

    /*END-AREACONTACT*

}