@charset "utf-8";

/* ==========================================
イントロ
========================================== */

.hair01 {
    width: 100%;
    padding: 15rem 0 0;
}

.hair01-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 1.5rem;
    margin: 0 0 0 auto;
    max-width: 162.6rem;
    width: 90%;
}

.hair01-text-box {
    margin: 4rem 0 0;
    line-height: 2.1875em;
}

.hair01-btn01 {
    margin: 5rem 0 0;
}

.hair01-right {
    position: relative;
    max-width: 97.8rem;
    width: 61%;
    padding: 1.8rem 0 0;
}

.hair01-deco-img {
    position: absolute;
    width: 40%;
    aspect-ratio: 617/174;
    top: 0;
    left: 0;
    z-index: 1;
}

.hair01-img {
    width: 92.02%;
    aspect-ratio: 9/4;
    margin: 0 0 0 auto;
}

.hair01-left {
    max-width: 48rem;
    width: 39%;
    margin: 1rem 0 0;
}

/* ==========================================
お客様へのお約束
========================================== */

.hair02 {
    padding: 15.6rem 0 0;
}

.hair02-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8.5rem;
    width: 100%;
    margin: 4.2rem auto 0;
}

.hair02-item {
    position: relative;
    padding: 4.8rem 0 0;
    width: 100%;
}

.hair02-title-block {
    text-align: center;
}

.hair02-deco-img {
    position: absolute;
    width: 25%;
    top: 0;
    left: 27%;
    z-index: 1;
}

.promise-title {
    font-size: clamp(1.6rem, 1.132rem + 0.973vw, 2.3rem);
    font-weight: 500;
    margin: 1rem 0 0;
}

.hair02-img-box {
    margin: 2.3rem auto 0;
    width: 100%;
    aspect-ratio: 350/233;
}

.hair02-text-block {
    margin: 3rem 0 0;
}

.hair02-text-box {
    line-height: 1.96;
}

.hair02-text-box:nth-child(n+2) {
    margin: 2rem 0 0;
}

/* ==========================================
おすすめメニュー
========================================== */

.hair03 {
    position: relative;
    padding:  15rem 0 12rem;
}

.hair03::after {
    content: "";
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 85.1%;
    box-shadow: 0 3px 6px rgba(0,0,0, 16%);
    background: #44B4D1;
    background: linear-gradient(60deg, rgba(68, 180, 209, 0.65) 0%, rgba(143, 208, 225, 0.65) 60%, rgba(143, 225, 222, 0.65) 100%);
    z-index: 1;
}

.hair03-contents01,.hair03-contents02 {
    position: relative;
    z-index: 2;
}

.hair03-row01 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8rem auto 0;
}

.hair03-row01-right {
    max-width: 91rem;
    width: 64.08%;
    padding: 4.9rem 3rem 6.6rem 15.17%;
    background: rgba(245, 253, 255, .7);
}

.hair03-title-block {
    max-width: 61rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.hair03-title-block .deco-ribbon-title-box {
    margin: 1.3rem auto 0;
}

.hair03-row01-title-box {
    font-weight: 500;
}

.hair03-row01-title-box .in-text-deco-box01:after {
    z-index: 1;
}

.title27 .hair03-row01-title-box.in-text-deco-box01 span {
    font-size: 129.63%;
}

.hair03-row01-text-box {
    margin: 4rem 0 0;
    line-height: 1.96em;
}

.hair03-row01-img01 {
    max-width: 57rem;
    width: 42%;
    margin: 0 -6rem 0 0;
    position: relative;
    z-index: 1;
}

.hair03-contents02 {
    margin: 8rem auto 0;
    padding: 0 0 6.6rem;
    position: relative;
}

.hair03-contents02::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90%;
    border: 1px solid var(--white);
    z-index: 2;
}

.hair03-contents02 .deco-bg-white-title-box {
    display: block;
    padding: 1.4rem 1.5rem 1.3rem;
    max-width: 67rem;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

.hair03-row02 {
    max-width: 124rem;
    width: 95%;
    margin: 5.3rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.hair03-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.7rem 4.2rem;
    flex: 1;
    position: relative;
    z-index: 3;
}

.hair03-item-text-box01 {
    display: flex;
    gap: 2rem;
    margin: 0 0 1rem;
}

.hair03-item-text-box02 {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1rem;
}

.check-icon {
    width: 2.3rem;
    display: flex;
    align-items: center;
}

.arrow-right-icon {
    width: 2.8rem;
    display: flex;
    align-items: center;
}

.hair03-item-text-box01 .text18 {
    flex: 1;
}

.hair03-illust {
    max-width: 13.6rem;
    width: 20%;
}

/* ==========================================
Aqua viewのこだわり
========================================== */

.hair04 {
    padding: 18rem 0;
}

.hair04-main {
    margin: 10rem auto 0;
}

.hair04-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    margin: 0 auto;
}

.hair04-row:nth-of-type(2n) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 3rem;
}

.hair04-row:nth-child(n+2) {
    margin: 3rem auto 0;
}

.hair04-text-block {
    width: 46.7%;
}

.hair04-en-title {
    font-family: var(--font-family02);
    font-size: 5.2rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    opacity: .5;
}

.hair04-title-box .title30 {
    margin: -4rem 0 0;
    position: relative;
}

.hair04-text-box {
    margin: 4rem 0 0;
    line-height: 1.96;
}

.hair04-img-box {
    width: 46.8%;
}

/* ==========================================
料金表
========================================== */

.hair05 {
    padding: 0 0 15rem;
    font-size: clamp(1.3rem, 1.227rem + 0.311vw, 1.6rem);
}

.hair05 .contents142 {
    padding: 0 1.5rem;
}

.hair05-contents {
    padding: 9rem 0 10rem;
}

.tax-text {
    font-size: 1.4rem;
    margin: 1rem 0 0;
    text-align: right;
}

.menu-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 7rem auto 0;
    gap: 3rem;
}

.menu-block {
    width: 44%;
}

.menu-box:nth-child(n+2) {
    margin: 6.6rem 0 0;
}

.menu-title-box {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.menu-title-box p {
   flex: 1;
}

.menu-icon01 {
    max-width: 3rem;
    width: 10%;
}

.menu-list-box {
    padding: 0 0 1.8rem;
    border-bottom: 1px solid;
}

.menu-list-box:nth-child(n+2) {
    margin: 2.2rem 0 0;
}

.menu-list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.menu-list-text-box {
    margin: .5rem 0 0;
}

.fukidashi-box {
    position: relative;
    border-radius: 100vmax;
    text-align: center;
    padding: .6rem 1rem;
}

.fukidashi-box:after {
    content: "";
    position: absolute;
    bottom: -1rem;
    left: 3rem;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--tertiary);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.fukidashi-box + .menu-list {
    margin: 1.5rem 0 0;
}

.menu-list-th {
    flex: 1;
}

.menu-list-td {
    width: auto;
    text-align: right;
}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=1550px) {

    /* ==========================================
    お客様へのお約束
    ========================================== */

    .hair02-row {
        gap: 5.5rem;
        width: 90%;
    }

    /* ==========================================
    おすすめメニュー
    ========================================== */

    .hair03-row01 {
        width: 90%;
    }

    .hair03-row01-right {
        padding: 4.9rem 6rem 6.6rem 10%;
    }

    .hair03-contents02 {
        width: 90%;
    }

    .hair03-row02 {
        gap: 0;
    }

    .hair03-grid {
        gap: 1.5rem;
    }

    .hair03-item-text-box01 {
        gap: 1rem;
    }

    .check-icon {
        width: 1.8rem;
    }

    .arrow-right-icon {
        width: 2.3rem;
    }

    /* ==========================================
    料金表
    ========================================== */

    .menu-row {
        width: 95%;
    }

    /* ==========================================
    店舗情報
    ========================================== */


        
    /* ==========================================
    駅からのアクセス
    ========================================== */

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1200px) {


    .hair01-left {
        max-width: 60rem;
        width: 45%;
    }


}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=1024px) {

    /* ==========================================
    イントロ
    ========================================== */

    .hair01 {
        padding: 13rem 0 0;
    }

        .hair01-row {
        align-items: center;
        flex-direction: column-reverse;
        gap: 3rem;
        margin: 0 auto;
        width: 100%;
    }

    .hair01-left, .hair01-right {
        width: 100%;
    }

    .hair01-left {
        padding: 0 2rem;
    }

    .hair01-right {
        width: 98%;
        margin: 0 0 0 auto;
    }

    .hair01-title-box {
        text-align: center;
    }

    .hair01-title-box.deco-primary-title-box:after {
        right: 0; 
    }

    .hair01-text-box {
        margin: 4rem auto 0;
        text-align: center;
    }

    .hair01-btn01 {
        margin: 3.5rem auto 0;
    }

    /* ==========================================
    お客様へのお約束
    ========================================== */

    .hair02 {
        padding: 13.5rem 0 0;
    }

    .hair02-row {
        gap: 4rem;
    }


    /* ==========================================
	おすすめメニュー
	========================================== */

    .hair03 {
        padding:  13rem 0 12rem;
    }

    .hair03::after {
        height: 88.2%;
    }

    .hair03-contents02 {
        width: 100%;
    }

    .hair03-row02 {
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .hair03-grid-item .text18 {
        font-size: 1.6rem;
    }

    .hair03-illust {
        width: 12%;
    }

    /* ==========================================
	Aqua viewのこだわり
	========================================== */

    .hair04 {
        padding: 15rem 0;
    }

    .title30 {
        font-size: 2.5rem;
    }

    .hair04-main {
        width: 90%;
    }

    .hair04-title-box .title30 {
        margin: -3rem 0 0;
    }

    .hair04-en-title {
        font-size: 3.8rem;
    }

    /* ==========================================
	料金表
	========================================== */

    .hair05 {
        padding: 0 0 13rem;
    }
    
    .menu-block {
        width: 46%;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=820px) {

    /* ==========================================
    イントロ
    ========================================== */

    /* .hair01-left {
        width: 45%;
    }

    .hair01-right {
        width: 54%;
        padding: 1rem 0 0;
    } */

    /* ==========================================
    お客様へのお約束
    ========================================== */

    .hair02-row {
        gap: 3rem;
    }


}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=768px) {

    /* ==========================================
    イントロ
    ========================================== */

    .hair01 {
        padding: 11rem 0 0;
    }


    /* ==========================================
    お客様へのお約束
    ========================================== */

    .hair02 {
        padding: 11rem 0 0;
    }

    .hair02-row {
        flex-direction: column;
        gap: 5rem;
    }

    .hair02-deco-img {
        width: 13%;
        left: 36%;
    }

    .promise-title {
        font-size: clamp(1.6rem, 0.932rem + 2.85vw, 2.3rem);
    }

    /* ==========================================
	おすすめメニュー
	========================================== */

    .hair03 {
        padding: 11rem 0 10rem;
    }

    .hair03::after {
        height: 92%;
    }

    .hair03-row01 {
        width: 100%;
        flex-direction: column;
    }

    .hair03-row01-img01 {
        max-width: 80rem;
        width: 100%;
        margin: 0 auto;
    }

    .hair03-row01-right {
        width: 100%;
        padding: 4rem 2rem;
    }

    .hair03-contents02 {
        width: 78%;
    }

    .hair03-contents02 .deco-bg-white-title-box {
        width: 93%;
    }

    .hair03-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem;
    }

    .hair03-item-text-box01 .text18 {
        font-size: clamp(1.3rem, 1.014rem + 1.221vw, 1.6rem);
    }

    .hair03-illust {
        width: 20%;
    }

    /* ==========================================
	Aqua viewのこだわり
	========================================== */

    .hair04 {
        padding: 12rem 0;
    }

    .hair04-main {
        margin: 8rem auto 0;
    }

    .hair04-row,.hair04-row:nth-of-type(2n) {
        flex-direction: column;
    }

    .hair04-img-box {
        width: 100%;
    }

    .hair04-text-block {
        width: 100%;
    }

    .hair04-row:nth-child(n+2) {
        margin: 6rem auto 0;
    }
    
    .hair04-text-box {
        margin: 3rem 0 0;
    }

    /* ==========================================
    料金表
    ========================================== */

    .hair05-contents {
        padding: 7rem 0 9rem;
    }

    .menu-block {
        width: 100%;
    }

    .menu-row {
        flex-direction: column;
        gap: 5rem;
        width: 85%;
    }

    .menu-box:nth-child(n+2) {
        margin: 5rem auto 0;
    }

    .tax-text {
        text-align: center;
    }

    /* ==========================================
    top04
    ========================================== */


	/* ==========================================
	top05
	========================================== */




    /* ==========================================
    top07
    ========================================== */


	/* ==========================================
	top08
	========================================== */

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=576px) {

    /* ==========================================
    イントロ
    ========================================== */

    .hair01 {
        width: 100%;
        padding: 8rem 0 0;
    }

	.hair01-text-box {
		text-align: left;
	}

    /* ==========================================
    花園町の "かかりつけサロン" へようこそ
    ========================================== */

    .hair02 {
        padding: 8rem 0 0;
    }

    .hair02-row {
        width: 100%;
    }

    .hair02-item {
        width: 100%;
        padding: 3rem 0 0;
    }

    /* ==========================================
	おすすめメニュー
	========================================== */

    .hair03 {
        padding: 9rem 0 8rem;
    }

    .hair03::after {
        height: 91.7%;
    }

    .hair03-contents02 {
        width: 100%;
        margin: 6rem auto 0;
    }

    .hair03-row01 {
        margin: 4.5rem auto 0;
    }

    .hair03-row02 {
        margin: 3rem auto 0;
    }

    .hair03-item-text-box01 .text18 {
        font-size: 1.5rem
    }
    
    .hair03-item-text-box02 .title20 {
        font-size: 1.6rem;
    }

    /* ==========================================
    Aqua viewのこだわり
    ========================================== */

    .title30 {
        font-size: 2.2rem;
    }

    .hair04 {
        padding: 8rem 0;
    }
    
    .hair04-main {
        width: 100%;
        margin: 6rem auto 0;
    }

    .hair04-en-title {
        font-size: 3.5rem;
    }
    
    .hair04-title-box .title30 {
        margin: -3rem 0 0;
    }

    .hair04-text-box {
        margin: 2.5rem 0 0;
    }

    /* ==========================================
    料金表
    ========================================== */

    .hair05 {
        padding: 0 0 8rem;
    }

    .hair05-contents {
        padding: 5rem 0 6rem;
    }

    .menu-row {
        width: 95%;
        margin: 4.5rem auto 0;
    }

    .menu-list-td {
        width: auto;
    }

    .hair03-title-block .title25 {
        font-size: 2.4rem;
    }


}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=414px) {

    .hair03::after {
        height: 92.1%;
    }
    
    .hair04-en-title {
        font-size: 3.3rem;
    }

    .hair03-title-block .title25 {
        font-size: 2.2rem;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */