@charset "utf-8";

.title27 span {
    font-size: 122.22%;
}

.title30 span {
    font-size: 116.67%;
}

.first-text-mt10 {
    margin: 1rem 0 0;
}

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

.first01 {
    padding: 0 0 10rem;
}

.first01-illust01 {
    position: absolute;
    bottom: 30%;
    left: 0;
    max-width: 10.5rem;
    width: 21%;
    z-index: 1;
}

.first01-illust02 {
    position: absolute;
    top: 34%;
    right: 0;
    max-width: 10.1rem;
    width: 21%;
    z-index: 1;
}

.first01-text-area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 2;
}

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

.first01-title-box.deco-primary-title-box:after {
    right: 0;
    margin: auto;
    background: url(../../../../uploads/title-deco01-blue02.svg) no-repeat center / contain;
}

.first01-text-block {}

.first01-text-box {
    margin: 4rem auto 0;
    text-align: center;
    line-height: 1.82
}

.first01-bg-img-box figure {
    width: 100%;
    height: 73.5rem;
}

.first01-bg-img-box figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.first01-bg-img-pc {
    display: block;
}

.first01-bg-img-sp {
    display: none;
}

.first01-anchor-contents {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 9rem;
}

/* ==========================================
Aqua viewが選ばれる理由
========================================== */

.first02 {
    padding: 12rem 0;
}

.first02-main {
    width: 91.9%;
    margin: 0 auto;
}

.first02-item {
    margin: 10rem auto 0;
    width: 91.85%;
}

.first02-title-box {
    display: flex;
    align-items: center;
    padding: 0 0 2rem;
    gap: 2rem;
    border-bottom: 1px solid var(--base-font-color);
}

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

.first02-img-box {
    width: 40.2%;
    aspect-ratio: 450 / 340;
}

.first02-text-block {
    width: 54.5%;
}

.first02-text-box {
    line-height: 1.85;
}

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

.first02-item:nth-of-type(2n) .first02-item-row {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.first02-btn01 {
    margin: 6rem 0 0;
}

/* ==========================================
スタッフ紹介
========================================== */

.first03 {
    padding: 13rem 0 18rem;
}

.first03-main {
    margin: 7rem auto 0;
}

.first03-item {
    padding: 1rem;
    background: #44B4D1;
    background: linear-gradient(60deg, rgba(68, 180, 209, 0.45) 0%, rgba(143, 208, 225, 0.45) 60%, rgba(143, 225, 222, 0.45) 100%);
}

.first03-item-in {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: .8rem;
    gap: 3rem;
    padding: 3rem;
}

.first03-img-box {
    width: 39.4%;
    aspect-ratio: 1/1;
}

.first03-text-block {
    width: 56.5%;
}

.staff-name {
    font-family: var(--font-family01);
    font-size: clamp(2rem, 1.830rem + 0.725vw, 2.7rem);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.staff-row {
    display: flex;
    gap: 1.5rem;
    margin: 2.5rem 0 0;
    ;
}

.staff-th {
    width: 12rem;
}

.staff-td {
    flex: 1;
}

.message-box {
    margin: 4rem 0 0;
    padding: 2rem 2rem 3rem 2rem;
    background: var(--quaternary);
}

.message-text {
    margin: 1.5rem 0 0;
}

.first03-staff-area-row {
    margin: 5rem auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 3rem;
}

.first03-staff-area-row .first03-text-block {
    width: 100%;
}

/* ==========================================
Space
========================================== */

.first04-contents {
    max-width: 186rem;
    width: 100%;
    margin: 0 auto;
}

.first04-img-box {
    position: relative;
    aspect-ratio: 186 / 62;
    width: 100%;
    height: 62rem;
}

.first04-img-box.pc {
    display: block;
}

.first04-img-box.sp {
    display: none;
}

.first04-img-box:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #44B4D1;
    background: linear-gradient(90deg, rgba(68, 180, 209, 0.78) 0%, rgba(68, 180, 209, 0.78) 50%, rgba(68, 180, 209, 0) 70%, rgba(68, 180, 209, 0) 100%);
    z-index: 1;
}

.first04-text-block {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 3rem 2.5rem;
    z-index: 2;
}

.first04-en-title-box {
    position: relative;
    max-width: 37rem;
    width: 100%;
    opacity: .7;
}

.first04-en-title-box:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 5.7rem;
    height: .7rem;
    margin: auto;
    background: url(../../../../uploads/title-deco01-white.svg) no-repeat center / contain;
    transform: translateY(-50%);
    z-index: 2;
}

.first04-jp-title-box {
    margin: 4rem 0 0;
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.35);
}

.first04-text-box {
    max-width: 53rem;
    width: 100%;
    margin: 4rem 0 0;
    line-height: 1.96;
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.35);
}

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

.first05 {
    padding: 15rem 0 11rem;
}

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

.first05-img-box {
    width: 37%;
    aspect-ratio: 45 / 50;
}

.first05-text-block {
    width: 54.9%;
}

.first05-text-list {
    display: flex;
    padding: 0 0 1.5rem;
    border-bottom: 1px solid #535252;
}

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

.first05-text-th {
    width: 14.5rem;
}

.first05-text-td {
    flex: 1;
}

.map-box {
    width: 100%;
    height: 38rem;
    margin: 5rem auto 0;
}

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

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

.first06 {
    padding: 8rem 0 13rem;
    background: #44B4D1;
    background: linear-gradient(60deg, rgba(68, 180, 209, 0.5) 0%, rgba(143, 208, 225, 0.5) 60%, rgba(143, 225, 222, 0.5) 100%);
}

.first06-title-box {
    max-width: 43rem;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 4rem 2.6rem;
    border-radius: 100vmax;
    text-align: center;
}

.first06-main {
    margin: 7rem auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem 7.3rem;
    overflow: hidden;
}

.first06-item {
    position: relative;
}

.first06-item:after {
    content: "";
    position: absolute;
    top: 43%;
    right: -4.5rem;
    width: 1.5rem;
    height: 3rem;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    background: var(--primary);
    z-index: 1;
}

.first06-num {
    text-align: center;
}

.first06-img-box {
    margin: .9rem 0 0;
}

.first06-text {
    margin: 2rem 0 0;
}


/* ==========================================
よくあるご質問
========================================== */

.first07 {
    padding: 12.7rem 0 15rem;
}

.first07-main {
    margin: 10rem 0 0;
}

.faq-accordion-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: .3s;
}

.faq-accordion-btn-inner {
    display: flex;
    gap: 1rem;
    align-items: baseline;
}

.faq-accordion-icon-batch {
    margin: .2rem 0 0;
}

.faq-accordion-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 2.3rem;
    background: var(--tertiary);
    border-radius: 100vmax;
}

.faq-accordion-arrow>img {
    width: 1.1rem;
    aspect-ratio: 11/7;
    transition: all .3s;
    transform: scale(1, -1);
}

.faq-accordion-arrow.is-active>img {
    transform: scale(1, 1);
}

.faq-accordion-content {
    display: none;
}

.faq-accordion-content-inner {
    display: flex;
    /* margin: 2.5rem 0 0; */
    padding: 0 0 2.5rem;
    gap: 1rem;
}

.faq-accordion-list {
    border-bottom: 1px solid #535252;
}

.faq-accordion-btn {
    padding: 3rem 0;
    cursor: pointer;
}

.faq-accordion-list:first-child .faq-accordion-btn {
    padding: 0 0 3rem;
}

.faq-accordion-btn:hover {
    opacity: .3;
    transition: .3s;
}

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

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

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

    .first01-anchor-contents {
        gap: 2.5rem 5rem;
    }


    /* ==========================================
    Aqua viewが選ばれる理由
    ========================================== */

    .first02-item {
        margin: 10rem auto 0;
        width: 100%;
    }

    /* ==========================================
    スタッフ紹介
    ========================================== */

    .first03-main {
        width: 88%;
    }

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

    .first05-row {
        width: 90%;
    }

    .map-box {
        width: 90%;
    }

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

    .first06-main {
        width: 95%;
    }

}

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

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

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


    /* ==========================================
	スタッフ紹介
	========================================== */

    .first03-main {
        width: 92%;
    }

    .staff-row {
        flex-direction: column;
        gap: .8rem;
    }

    .staff-th {
        width: 100%;
    }

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


}

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

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

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

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

    .first01-anchor-contents {
        gap: 2rem;
    }

    /* ==========================================
	Aqua viewが選ばれる理由
	========================================== */

    .first02-main {
        margin: 0 auto;
    }


    /* ==========================================
	スタッフ紹介
	========================================== */

    .first03-item-in {
        align-items: flex-start;
    }

    .first03-main {
        width: 85%;
    }


    /* ==========================================
	Space
	========================================== */


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

    .first06-main {
        gap: 2.5rem 4rem;
    }

    .first06-item:after {
        right: -2.8rem;
        width: 1.2rem;
        height: 2.2rem;
    }

    /* ==========================================
	top03
	========================================== */

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


}

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


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

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

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

    .first01-bg-img-box figure {
        width: 100%;
        height: 63.5rem;
    }

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


    .first04-img-box.sp img {
        object-position: center 30%;
    }

}

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

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

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

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

    .first01 {
        padding: 0 0 8rem;
    }

    .first01-illust01 {
        top: 30%;
        bottom: auto;
        width: 13%;
    }

    .first01-illust02 {
        top: 16%;
        width: 12%;
    }

    .first01-text-area {
        position: relative;
    }

    .first01-bg-img-box figure {
        height: auto;
    }

    .first01-anchor-contents {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 3rem;
        max-width: 63rem;
        width: 100%;
        margin: 0 auto;
    }

    .first01-bg-img-pc {
        display: none;
    }

    .first01-bg-img-sp {
        display: block;
    }

    /* ==========================================
    Aqua viewが選ばれる理由
    ========================================== */

    .first02 {
        padding: 10rem 0;
    }

    .first02-main {
        width: 100%;
    }

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

    .first02-img-box,
    .first02-text-block {
        width: 100%;
    }

    .first02-img-box {
        aspect-ratio: 450 / 300;
    }

    .first02-btn01 {
        margin: 3rem auto 0;
    }

    /* ==========================================
	スタッフ紹介
	========================================== */

    .first03 {
        padding: 10rem 0 12rem;
    }

    .first03-main {
        width: 100%;
        margin: 5rem auto 0;
    }

    .first03-item-in {
        flex-direction: column;
    }

    .first03-img-box,
    .first03-text-block {
        width: 100%;
    }

    .first03-staff-area-row {
        margin: 3.5rem auto 0;
        grid-template-columns: repeat(1, 1fr);
        gap: 3.5rem;
    }



    /* ==========================================
    Space
    ========================================== */


    .first04-img-box.pc {
        display: none;
    }

    .first04-img-box.sp {
        display: block;
    }

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

    .first05-row {
        flex-direction: column;
        width: 100%;
    }

    .map-box {
        width: 100%;
    }

    .first05-img-box,
    .first05-text-block {
        width: 100%;
    }


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

    .first06-main {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 5rem;
    }

    .first06-item:after {
        top: 45%;
        right: -3.2rem;
        width: 1.2rem;
        height: 2.2rem;
    }

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




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


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

}

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

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

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

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

    .first01-anchor-contents {
        gap: 3rem 1.5rem;
    }

    .first01-anchor-contents .anchor-btn01 {
        width: 100%;
        margin: 0 auto;
        padding: 2rem 3rem 2rem 2rem;
        font-size: 1.6rem;
    }

    .first01-anchor-contents .anchor-btn01:after {
        right: 2rem;
    }

    .first01-illust01 {
        top: 22%;
    }

    /* ==========================================
    Aqua viewが選ばれる理由
    ========================================== */

    .first02 {
        padding: 8rem 0;
    }

    /* ==========================================
    スタッフ紹介
    ========================================== */

    .first03 {
        padding: 8rem 0 10rem;
    }

    .first03-main {
        margin: 4rem auto 0;
    }

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

    .first05-text-list {
        flex-direction: column;
    }

    .first05-text-td {
        margin: .5rem 0 0;
    }

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

    .first06-main {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 3rem;
    }

    .first06-item:after {
        top: 39%;
        right: -2.2rem;
        width: 1.2rem;
        height: 2.2rem;
    }

    /* ==========================================
    top03
    ========================================== */



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


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

    /* ==========================================
    top06
    ========================================== */



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



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



}

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

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

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

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