@charset "UTF-8";

/* ===========================
main
============================*/
/* sectionContact*/
.topic {
    text-align: center;
    font-family: Marcellus;
    font-size: 2.2rem;
    letter-spacing: 4.4px;
    text-transform: uppercase;
    margin: 80px auto 100px;
}

.topic span {
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.8; /* 30.6px */
    letter-spacing: 3.4px;
    margin-top: 10px;
    display: inline-block;
}

/* タブメニューのスタイル */
/*tabの形状*/
.tab-menu{
	display: flex;
    justify-content: center;
    gap: 2px;
    z-index: 3;
    position: relative;
}

.tab-menu li a{
	background: var(--primary-beige);
    display: flex;
    width: 140px;
    height: 67.5px;
    justify-content: center;
    align-items: center;
    border-radius: 1px 1px 0px 0px;
    border-top: 1px solid var(--primary-black);
    border-right: 1px solid var(--primary-black);
    border-left: 1px solid var(--primary-black);
    border-bottom: 1px solid var(--primary-black);
    font-family: "Noto Serif JP";
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.8; /* 30.6px */
    letter-spacing: 3.4px;
    margin-bottom: -1px;
}

/*liにactiveクラスがついた時の形状*/
.tab-menu li.active a{
    background: rgba(196, 130, 119, 0.40);
    border-bottom: 0.6px solid var(--primary-beigeSchool);
}

.tab-menu li:nth-of-type(2).active a{
	background: rgba(53, 101, 104, 0.50);
    border-bottom: 0.6px solid var(--primary-beigeSchool);
}

/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	width: 91.4%;
    margin: 0 auto;
    border-radius: 1px;
    border-right: 1px solid var(--primary-black);
    border-top: 1px solid var(--primary-black);
    border-left: 1px solid var(--primary-black);
    border-bottom: 1px solid var(--primary-black);
    background-color: var(--primary-beigeSchool);
    z-index: 1;
    position: relative;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.contents {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contents__title {
    font-family: "Noto Serif JP";
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.8; /* 30.6px */
    letter-spacing: 3.4px;
    margin-top: 70px;
}

.contents__title--salon {
        margin-top: 85px;
}

.contents p:nth-of-type(2) {
    margin-top: 16px;
}

.contents p {
    width: 290px;
    font-family: "Noto Serif JP";
    font-size: 1.7rem;
    letter-spacing: 1.02px;
    margin-top: 40px;
    text-align: start;
}

.contactInfo__list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}

.contactInfo__item {
    display: flex;
    width: 250px;
    height: 52px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-radius: 10px;
    background: rgba(47, 47, 47, 0.08);
}

.contactInfo__item:first-of-type {
    margin-top: 60px;
}

.contactInfo__item:nth-of-type(3),
.contactInfo__item:nth-of-type(4) {
    display: inline-flex;
    height: 123px;
    justify-content: center;
    align-items: center;
    width: 190px;
}

.contactInfo__item:nth-of-type(3) {
    padding: 10px 30px 10px 10px;
}

.contactInfo__item:nth-of-type(4) {
    padding: 10px 10px 10px 0px;
}

.item__outer p {
    margin-top: 0;
    display: flex;
    justify-content: center;
    width: 60px;
}

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

.item__outer02 {
    display: flex;
    flex-direction: column;
}

.item__outer--mail {
    align-items: normal;
}

.icon__school {
    fill: var(--primary-green);
}

.item__outerBrandIcon01 {
    gap: 10px;
}

.item__outerBrandIcon02 {
    gap: 18px;
}

.contactInfo__address--sns .brand__icon01 {
    width: 40px;
    height: 40px;
}

.sns__item--contact01 {
    width: 80px;
    height: 80px;
    padding: 20px;
}

.qr {
    width: 60px;
}

.contactInfo__address {
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 1.7rem;
    letter-spacing: 1.02px;
    margin-left: 10px;
}

.contactInfo__address--sns {
    margin-left: 0;
}

.contactInfo__address:hover {
    color: rgba(47, 47, 47, 0.60);
}

/* sectionPrecaution */
.section--precaution {
    width: 88.3%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 auto 80px;
}

.precaution__title {
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 1.02px;
    margin-top: 80px;
    position: relative;
    width: 100%;
    text-align: start;
}

.precaution__title::after {
    content: "";
    width: 100%;
    height: 0.6px;
    background-color: var(--primary-black);
    position: absolute;
    bottom: -3px;
    left: 0;
}

.precaution__list {
    margin-top: 14px;
}

.precaution__list--01,
.precaution__list--02 {
    padding-left: 9px;
}

.precaution__list--01 li,
.precaution__list--02 li {
    text-indent: -9px;
}

.precaution__item {
    font-family: "Noto Serif JP";
    font-size: 1.5rem;
    line-height: 1.6; /* 24px */
    letter-spacing: 0.9px;
    margin-top: 16px;
}

.precaution__item div {
    border-radius: 1px;
    background: var(--primary-blackLow);
    display: inline-flex;
    padding: 2px 4px;
    justify-content: center;
    align-items: center;
}

.precaution__item h5 {
    color: #FFF;
    line-height: 2; /* 30px */
}

.note {
    font-size: 1.3rem;
    margin-top: 10px; 
    font-family: "Noto Serif JP";
    color: var(--primary-blackLow );
}

.schedule__link {
    color: var(--primary-blackLow);
    font-family: "Noto Serif JP";
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0.9px;
}

.schedule__link:hover {
    color: var(--primary-pink);
    border-bottom: 0.6px solid var(--primary-pink);
}

.caution {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 8%; /* 1.2px */
    text-underline-offset: 19.5%; /* 2.925px */
    text-underline-position: from-font;
}

.xxl__txt01 {
    margin-top: 18px;
    margin-bottom: 32px;
}

.xxl__txt02 {
    margin-top: 18px;
    margin-bottom: 16px;
}

.precaution__item--xxl div:nth-of-type(2) {
    border-radius: 0;
    background: none;
    display: inline;
    padding: 0;
    justify-content: center;
    align-items: center;
}

.xxlTitle {
    font-family: "Noto Serif JP";
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2; /* 30px */
    letter-spacing: 0.9px;
    margin-top: 30px;
}

.xxlFee {
    text-align: start;
    display: inline-block;
    margin-top: 0;
    text-indent: 0;
    padding-left: 16px;
}
    
.xxlFee02 {
    text-align: end;
    display: inline-block;
    margin-top: 0;
    text-indent: 0;
    padding-left: 0;
    width: 97.6%;
}

/* sectionContact 350以下*/
@media screen and (max-width:350px) {
            .contents p {
                font-size: 1.6rem;
                width: 84.9%;
            }

            .minBr, 
            .spBr--min,
            .tb-br  {
                display: none;
            }

            .tab-menu li a {
                width: 120px;
            } 
}

/* sectionContact pc*/
@media screen and (min-width:1025px) {
    .topic {
        font-size: 3.2rem;
        letter-spacing: 4.4px;
        margin: 136px auto 150px;
    }
    
    .topic span {
        font-size: 2rem;
        line-height: 1.5; /* 30px */
        letter-spacing: 2px;
        margin-top: 16px;
    }
    
    .tab-menu{
        gap: 2px;
    }
    
    .tab-menu li a{
        width: 400px;
        height: 75px;
        font-size: 2rem;
        letter-spacing: 4px;
    }
    
    .area {
        width: 75.7%;
        min-width: 940px;
        max-width: 1600px;
    }
    
    .contents__title {
        font-size: 2rem;
        line-height: 1.5; /* 30px */
        letter-spacing: 3.4px;
        margin-top: 120px;
    }

    .contents__title--salon {
        margin-top: 135px;
    }

    .contents p:nth-of-type(2) {
        margin-top: 26px;
    }
    
    .contents p {
        width: 670px;
        margin-top: 70px;
        text-align: center;
    }
    
    /* grid layout */
    .contactInfo__list {
        gap: 30px;
        flex-direction: row;
        margin-top: 85px;
        display: grid;
        align-items: start;
    }

    .contactInfo__item:first-of-type {
        margin-top: 0;
        grid-row: 1/3;
        grid-column: 1/2;
    }
    
    .contactInfo__item:nth-of-type(2) {
        grid-row: 2/3;
        grid-column: 1/2;
    }

    .contactInfo__item:nth-of-type(3) {
        grid-row: 1/3;
        grid-column: 2/3;
    }

    .contactInfo__item:nth-of-type(4) {
        grid-row: 1/3;
        grid-column: 3/4;
    }

    .contactInfo__item:nth-of-type(3),
    .contactInfo__item:nth-of-type(4) {
        height: 123px;
        padding: 10px 25px 10px 10px;
    }

    .item__outer p {
        margin-top: 0;
        width: 60px;
    }
     
    .contactInfo__address--sns .brand__icon01 {
        width: 32px;
        height: 32px;
    }

    .item__outerBrandIcon02 {
        gap: 10px;
    }
    
    .sns__item--contact01 {
        width: 64px;
        height: 64px;
        padding: 16px;
    }
    
    .qr {
        width: 85px;
    }

    .contactInfo__address--sns {
        margin-left: 0;
    }
    
    /* sectionPrecaution */
    .section--precaution {
        width: 84.9%;
        margin: 0 auto 120px;
    }
    
    .precaution__title {
        margin-top: 60px;
        display: flex;
        align-items: center;
        gap: 30px;
    }

    .precaution__title:first-of-type {
        margin-top: 110px;
    }
    
    .precaution__title::after {
        flex-grow: 1;
        margin-right: 0;
        position: static;
        width: auto;
    }
    
    .precaution__list {
        margin-top: 50px;
    }

    .precaution__list:nth-of-type(2),
    .precaution__list:nth-of-type(3) {
        margin-top: 30px;
    }
    
    .precaution__item {
        line-height: 2; /* 30px */
        margin-top: 0;
    }
    
    .note {
        font-size: 1.5rem;
        margin-top: -10px;
        width: 100%;
        text-align: right;
    }
    
    .schedule__link {
        line-height: 2;
    }

    .xxl__txt01,
    .xxl__txt02 {
        margin-right: 4px;
    }
    
    .xxl__txt01 {
        margin-top: 10px;
        margin-bottom: 46px;
    }
    
    .xxl__txt02 {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .xxl p:nth-of-type(2) {
        padding-left: 16px;
    }

    .xxlFee02 {
        width: auto;
    }
    
    .caution {
        text-decoration-line: none;
        margin-left: 20px;
    }
}
/* pc 1025px */

/* sectionContact tb*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
        .tab-menu{
            gap: 8px;
        }
        
        .tab-menu li a{
            width: 282px;
            height: 65px;
        }
        
        .area {
            width: 88.7%;
        }
        
        .contents__title {
            margin-top: 80px;
        }

        .contents__title--salon {
            margin-top: 95px;
        }
        
        .contents p {
            width: 456px;
            margin-top: 50px;
            text-align: center;
        }

        .tb-br {
            display: none;
        }
        
        .contents p:nth-of-type(2) {
            margin-top: 20px;
        }

        /* grid layout */
        .contactInfo__list {
            display: grid;
            justify-items: center;
        }

        .contactInfo__item:first-of-type {
            margin-top: 80px;
            grid-row: 1/2;
            grid-column: 1/3;
        }
    
        .contactInfo__item:nth-of-type(2) {
            grid-row: 2/3;
            grid-column: 1/3;
        }

        .contactInfo__item:nth-of-type(3) {
            grid-row: 3/4;
            grid-column: 1/2;
        }

        .contactInfo__item:nth-of-type(4) {
            grid-row: 3/4;
            grid-column: 2/3;
        }

        .contactInfo__list02 {
            align-items: end;
        }

        .contactInfo__item02:first-of-type {
            grid-row: 1/2;
            grid-column: 1/2;
        }
    
        .contactInfo__item02:nth-of-type(2) {
            grid-row: 2/3;
            grid-column: 1/2;
        }

        .contactInfo__item02:nth-of-type(3) {
            grid-row: 1/3;
            grid-column: 2/3;
        }
    
        .contactInfo__item:nth-of-type(3),
        .contactInfo__item:nth-of-type(4) {
            height: 123px;
            padding: 10px 25px 10px 10px;
        }

        .item__outer p {
            margin-top: 0;
            width: 60px;
        }
        
        .contactInfo__address--sns .brand__icon01 {
            width: 34px;
            height: 34px;
        }

        .item__outerBrandIcon02 {
            gap: 10px;
        }
        
        .sns__item--contact01 {
            width: 64px;
            height: 64px;
            padding: 16px;
        }
        
        .qr {
            width: 85px;
        }

        .contactInfo__address--sns {
            margin-left: 0;
        }
    
        /* sectionPrecaution */
        .section--precaution {
            width: 86.9%;
            margin: 0 auto 80px;
        }
        
        .precaution__title {
            display: flex;
            align-items: center;
            gap: 30px;
        }
    
        .precaution__title::after {
            flex-grow: 1;
            margin-right: 0;
            position: static;
            width: auto;
        }

        .precaution__title:first-of-type {
            margin-top: 90px;
        }
    
        .precaution__list {
            margin-top: 32px;
        }

        .precaution__list:nth-of-type(2),
        .precaution__list:nth-of-type(3) {
            margin-top: 20px;
        }
        
        .precaution__item {
            margin-top: 8px;
        }

        .spBr--tb {
            display: block;
        }
        
        .note {
            font-size: 1.5rem;
            margin-top: -10px;
            width: 100%;
            text-align: right;
        }

        .xxl__txt01,
        .xxl__txt02 {
            margin-right: 4px;
        }
    
        .xxl__txt01 {
            margin-top: 18px;
            margin-bottom: 32px;
        }
        
        .xxl__txt02 {
            margin-top: 18px;
            margin-bottom: 18px;
        }

        .xxl p {
            padding-left: 4px;
        }

        .xxlFee02 {
            width: auto;
        }
}
/* tb 768px-1024px */

/* sectionSchedule */
.section--schedule h3 {
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.8; /* 30.6px */
    letter-spacing: 3.4px;
    margin-top: 85px;
}

.section--schedule p {
    font-family: "Noto Serif JP";
    font-size: 1.6rem;
    letter-spacing: 0.96px;
    width: 81.6%;
    max-width: 408px;
    margin: 50px auto 40px;
}

.google__schedule {
    display: flex;
}

.google__schedule iframe {
    width: 343px;
    height: 279px;
    margin: 0 auto;
}

.footer__logo {
    margin-top: 180px;
}

/* sectionSchedule pc*/
@media screen and (min-width:1025px) {
    .section--schedule h3 {
        font-size: 2rem;
        letter-spacing: 4px;
        margin-top: 200px;
    }
    
    .section--schedule p {
        font-size: 1.7rem;
        letter-spacing: 1.02px;
        width: 435px;
        max-width: none;
        margin: 40px auto;
    }
    
    .google__schedule iframe {
        width: 580px;
        height: 394px;
    }
    
    .footer__logo {
        margin-top: 300px;
    }
}
/* pc 1025px */

/* sectionSchedule tb*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .google__schedule iframe {
        width: 500px;
        height: 340px;
    }

    .footer__logo {
        margin-top: 190px;
    }
}
/* tb 768px-1024px */

/* else カスタムブレイクポイント */
@media (max-width: 350px) {
    .xxlFee {
        font-size: 1.4rem;
        letter-spacing: 0;
        padding-left: 10px;
    }

    .google__schedule iframe {
        width: 300px;
    }

    .precaution__title {
        font-size: 1.6rem;
    }
}