@charset "UTF-8";

/* Client-specific Styles */

#outlook a {
    padding: 0;
}

/* Force Outlook to provide a "view in browser" button. */

/* ルートの文字サイズを10pxに設定 */
html {
    font-size: 62.5%;
}

:root {
    --bg-color: #F8F3F1;
}

body {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: #FFF;
    font-family: "Shippori Mincho", serif;
    font-size: 3.3vw;
    font-weight: normal;
    color:rgba(98, 74, 67, 0.9);
    line-height: 1.4;
    letter-spacing: -0.2rem;

    /* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
    /* Reset Styles */
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

.ReadMsgBody {
    width: 100%;
}

.ExternalClass {
    width: 100%;
}

a:link,
a:visited {
    text-decoration: none;
}

a:hover {
    opacity: 0.75;
}

img {
    border: 0 none;
    outline: 0 none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
}

section {
    position: relative;
}

.section {
    opacity: 0;
}

.section-title {
    font-family: "Merriweather", serif;
    font-size: 6.8vw;
    font-weight: 900;
    color: #8A6272;
    line-height: 1.2;
    letter-spacing: 0.3rem;
    text-align: center;
    margin: 0 auto;

    & span {
        display: block;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 3.4vw;
        font-weight: 400;
        letter-spacing: -0.2rem;
    }
}

.woman {
    position: absolute;
}

.pc {
    display: none;
}

.header {
    background: url(../img/top.jpg) no-repeat top / cover;
    padding: 1.5% 6% 46.5%;
}

.header-logo {
    width: 54.5%;
    margin-left: auto;
} 

.main-content {
    background: url(../img/back_sp.jpg) no-repeat top / contain;
    background-color: var(--bg-color);
    padding-bottom: 20%;
    margin: 0 auto;
}

/* intro */
.intro {
    padding: 6% 0 0 6%;

    & .woman {
        width: 46%;
        top: -11%;
        right: 0;
    }
}

.intro-title {
    width: 68%;
    position: relative;
    z-index: 10;
}

.intro-text {
    margin-top: 6%;
}

.intro-text:nth-of-type(3) {
    letter-spacing: -0.1rem;
}

/* service */
.section-service {
    margin-top: 23%;

    & .photo {
        width: 100%;
        position: absolute;
        top: 0;
        left: -9%;
    }
    
    & .guide {
        display: flex;
        justify-content: flex-end;
        margin: 10% 8% 0 0;

        & p {
            letter-spacing: 0;
        }
    }
}

.section-service__list {
    display: flex;
    justify-content: center;
    margin-top: 30%;
}

.section-service__item {
    width: 45%;
    font-family: "Noto Sans JP", sans-serif;
    
    & .section-service__title {
        font-size: 3.2vw;
        font-weight: 600;
        margin: -50% 0 0 10%;
    }
    
    & .section-service__text {
        font-size: 3vw;
        font-weight: normal;
        margin: 2% 0 0 10%;
    }
}

.section-service__item:nth-of-type(2) {
    margin: 0.3% 0 0 2%;

    & .section-service__title {
        margin: -50% 0 0 14%;
    }

    & .section-service__text {
        margin: 2% 0 0 14%;
    }
}

/* product */
.section-product {
    padding: 0 6.5%;
    margin-top: 27%;

    & .section-title {
        letter-spacing: -0.05rem;
    }

    & .woman {
        width: 55%;
        bottom: 14%;
        right: 0;
    }
}

.section-product__list {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-product__item {
    background: url(../img/sec_02_back.png) no-repeat bottom / contain;
    color: #8A6272;
    padding: 0 2% 6% 0;
}

.section-product__list:first-of-type {
    flex-wrap: wrap;
    margin-top: 4%;

    & .section-product__item {
        width: 48%;
        margin-bottom: 8%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }

    .section-product__item:first-of-type {
        & .photo {
            width: 95%;
        }

        & p {
            margin-top: -8%;
        }
    }

    .section-product__item:nth-of-type(2) {
        & .photo {
            width: 100%;
            margin-top: -8%;
        }

        & p {
            margin-top: -6%;
        }
    }

    .section-product__item:nth-of-type(3) {
        /* margin-top: 3%; */

        & .photo {
            width: 86%;
        }
    }
}

.section-product__list:nth-of-type(2) {
    & .section-product__item:first-of-type {
        width: 27%;
        padding: 2% 0;
    }

    & .section-product__item:nth-of-type(2) {
        text-align: center;
        width: 20%;
        padding: 4.5% 0;
    }

    & .section-product__item:nth-of-type(3) {
        width: 20%;
        padding: 4.8% 1%;
    }

    & .section-product__item:nth-of-type(4) {
        width: 25.5%;
        padding: 4.8% 0;
    }
}

/* faq */
.section-faq {
    padding: 0 6.5%;
    margin-top: 25%;

    & .woman {
        width: 70%;
        top: -7.5%;
        left: -13%;
    }
}

.section-faq__list {
    background-color: #FFEEEE;
    border-radius: 15px;
    filter: drop-shadow(5px 5px 5px rgb(189, 189, 189));
    padding: 8% 8.2% 8%;
    margin-top: 6.5%;
}

.section-faq__question {
    color: #CFB4AE;
    font-size: 4vw;
    letter-spacing: -0.1rem;
    text-indent: -1em;
    padding-left: 1em;

    & span {
        font-family: "Merriweather", serif;
        font-weight: 400;
        font-size: 3.6vw;
        letter-spacing: 0.8rem;
        margin-right: -0.3rem;
    }
}

.section-faq__item:nth-of-type(n+2) {
    margin-top: 8.5%;
}

.section-faq__item:nth-of-type(4) {
    & .section-faq__question {
        letter-spacing: -0.15rem;
    }
}

.section-faq__answer {
    font-size: 2.8vw;
    letter-spacing: -0.12rem;
    margin-top: 2.5%;

    & span {
        font-family: "Merriweather", serif;
        font-weight: 400;
        font-size: 2.6vw;
        letter-spacing: 0.5rem;
    }

    & span.notes {
        font-size: 2.3vw;
        letter-spacing: -0.05rem;
    }
}

/* access */
.section-access {
    margin-top: 25%;
}

.map {
    width: 70%;
    margin: 5% auto 0;
    text-align: center;

    & iframe {
        aspect-ratio: 4 / 3.5;
    }
}

.info {
    margin: 2% 0 0 15.5%;
}

.shop {
    font-size: 4.6vw;
    margin-top: 4%;
    line-height: 1.6;

    & span {
        display: block;
        font-size: 6vw;
        font-weight: 700;
    }
}

.address {
    margin-top: 5.5%;
    font-size: 3.1vw;
    letter-spacing: 0;

    & span {
        display: block;
        font-family: "Merriweather", serif;
        font-size: 3vw;
    }
}

.tel {
    margin-top: 5.5%;
    font-family: "Merriweather", serif;
    font-size: 3.5vw;
}

.open {
    margin-top: -0.5%;
    font-size: 3vw;

    & span {
        margin: 0 1.5%;
    }
}

.btn_area {
    text-align: center;
    margin-top: 10%;

    & a {
        display: inline-block;
        width: 70%;
    }
}

.footer {
    background-color: #FFF;
    text-align: center;
    filter: drop-shadow(0 -15px 10px #FFF);

    & .logo {
        width: 37%;
    }
}

/* ページトップボタン */
.page-top {
    position: fixed;
    bottom: 1%;
    right: 2%;
    z-index: 99;
}

.page-top a {
    border-radius: 50px;
    background-color: #8A6272;
    width: 9vw;
    height: 9vw;
    padding-bottom: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-top a img {
    width: 60%;
}

/* アニメーション */
.fade-up {
    opacity: 1;
    animation: fade-up 0.7s ease;
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@media  (750px < width) {
    body {
        max-width: 1240px;
        width: 100%;
        font-size: min(2.7vw, 34px);
    }

    .sp {
        display: none;
    }

    .pc {
        display: block;
    }

    .main-content {
        background: url(../img/back_pc.jpg) no-repeat top / cover;
        padding-bottom: 18%;
    }

    .section-title {
        font-size: min(6.1vw, 76px);

        & span {
            font-size: min(3.4vw, 42px);
        }

    }

    /* intro */
    .intro {
        padding-top: 5.5%;

        & .woman {
            width: 45%;
            top: -15.5%;
            right: 0;
        }
    }

    .intro-title {
        width: 63%;
    }

    /* service */
    .section-service {
        margin-top: 15%;

        & .photo {
            width: 88%;
            top: -26%;
            left: -11%;
        }
        
        & .guide {
            margin: 9% 5% 0 0;
    
        }

        & .section-title {
            text-shadow:
            4px 4px 2px #FFF, -4px -4px 2px #FFF,
            -4px 4px 2px #FFF,  4px -4px 2px #FFF,
            4px 0 2px #FFF, -4px  0 2px #FFF,
            0 4px 2px #FFF,  0 -4px 2px #FFF;
            position: relative;
            z-index: 10;
        }
    }

    .section-service__list {
        margin-top: 5%;
    }

    .section-service__item {
        width: 44%;

        & .section-service__title {
            font-size: min(2.6vw, 32px);
            margin: -36% 0 0 9%;
        }
        
        & .section-service__text {
            font-size: 2.1vw;
            font-size: min(2.1vw, 26px);
            margin: 2% 0 0 9%;
        }
    }

    .section-service__item:nth-of-type(2) {
        & .section-service__title {
            margin: -35% 0 0 13.5%;
        }
    
        & .section-service__text {
            margin: 2% 0 0 13.5%;
        }
    }

    /* product */
    .section-product {
        padding: 0 5.5%;
        margin-top: 27%;
    
        & .section-title {
            text-shadow:
            4px 4px 2px var(--bg-color), -4px -4px 2px var(--bg-color),
            -4px 4px 2px var(--bg-color),  4px -4px 2px var(--bg-color),
            4px 0 2px var(--bg-color), -4px  0 2px var(--bg-color),
            0 4px 2px var(--bg-color),  0 -4px 2px var(--bg-color);
            position: relative;
            z-index: 10;
        }
    
        & .woman {
            width: 36.5%;
            bottom: initial;
            top: -20%;
            right: 0;
        }
    }

    .section-product__list:first-of-type {
        margin-top: 5.5%;
    
        & .section-product__item {
            width: 33%;
            margin-bottom: 4%;
        }
    }

    .section-product__list:nth-of-type(2) {
        & .section-product__item:first-of-type {
            padding: 4% 0 4% 3%;
        }
    
        & .section-product__item:nth-of-type(2) {
            padding: 5.5% 0;
        }
    
        & .section-product__item:nth-of-type(3) {
            padding: 5.5% 2.5%;
        }
    
        & .section-product__item:nth-of-type(4) {
            text-align: right;
            padding: 5.6% 1% 5.6% 0;
        }
    }

    /* faq */
    .section-faq {
        padding: 0 10.5%;
        margin-top: 18%;

        & .woman {
            width: 52%;
            top: -5.5%;
            left: -3.5%;
        }
    }

    .section-faq__list  {
        padding: 8.5% 8.5% 10%;
        margin-top: 6%;
    }

    .section-faq__item:nth-of-type(n+2) {
        margin-top: 10%;
    }

    .section-faq__question {
        font-size: min(2.8vw, 35px);

        & span {
            font-size: min(2.8vw, 31px);
        }
    }

    .section-faq__answer {
        font-size: min(2vw, 24.8px);
        margin-top: 1%;

        & span {
            font-size: min(1.7vw, 23px);
        }

        & span.notes {
            font-size: min(1.6vw, 20px);
        }
    }

    /* access */
    .section-access  {
        margin-top: 23%;
    }

    .map {
        & iframe {
            aspect-ratio: 4 / 3;
        }
    }

    .shop {
        font-size: min(4.1vw, 51px);
        line-height: 1.5;

        & span {
            font-size: min(5.6vw, 70px);
        }
    }

    .address {
        margin-top: 4%;
        font-size: min(2.5vw, 31px);

        & span {
            font-size: min(2.5vw, 31px);
        }
    }

    .tel {
        margin-top: 4%;
        font-size: min(3.1vw, 38px);
    }

    .open {
        font-size: min(3.3vw, 40px);
    }

    .btn_area {
        margin-top: 6%;
    }

    /* ページトップボタン */
    .page-top {
        bottom: 2%;
    }

    .page-top a {
        width: min(7vw, 60px);
        height: min(7vw, 60px);
    }
}


@media  (1200px < width)  {
    .main-content {
        padding-bottom: 14%;
    }
}