html{
    font-size: 62.5%;
  }

  body {
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    color: #333333;
  }
/* --------------------------------------------- */
/* ▼スマホ (全環境に共通のデザイン) */
/* --------------------------------------------- */
.header{
    display: none;
}

/* --- ▼メインビジュアル --- */
.main-visual{
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    position: relative;
}

.main-visual-img-wrapper{
    width: 100vw;
    height: 100vh;
    max-height: 800px;
}

.main-visual-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-visual-title-wrapper{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: auto;
    text-align: center;
    position: absolute;
    top: 0;
}

.main-visual-title{
    font-size: 4.4rem;
    font-weight: 500;
    color: #fff;
    padding:3em 0 0;
    text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.8);
}

.main-visual-logo-wrapper{
    width: 30%;
    height: auto;
    display: flex;
    justify-content: center;
    margin: auto;
}

.main-visual-logo{
    width: 100%;
    height: 100%;
    max-width: 300px;
    min-width: 160px;
}

.main-visual-sub-title{
    font-size: 3rem;
    color: #fff;
    padding:0 0 4em;
    text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.4);
}



/* --- ▼メインリード --- */
.main-lead{
    max-width: 90%;
    margin: 6em auto 0;
    font-size: 2.8rem;
    line-height: 1.8;
}


/* --- ▼Aboutセクション --- */
.about-section{
    max-width: 90%;
    margin: 10em auto 0;
    font-size: 1.6rem;
}

.about-heading{
    font-size: 2.8rem;
    font-weight: 500;
}

.about-heading::after{
    content: "プロフィール";
    font-size: 1.6rem;
    color: #bf8581;
    margin-left: 1em;
}

.about-container{
    margin-top: 3.6em;
}

.about-name{
    font-size: 2rem;
    line-height: 1.5;
}

.about-name::after{
    content: "Uchiyama Miho";
    font-size: 1.4rem;
    color: #c4c7cc;
    display: block;
}

.about-text-inner{
    margin-top: 2.5em;
    line-height: 1.5;
}

.about-img-area{
    background-image: url(../img/about_image.jpg);
    aspect-ratio: 16 / 9;
    background-size: cover;
    margin-top: 1.75em;
    border-radius: 10px;
    max-height: 400px;
}


/* --- ▼Serviceセクション --- */
.service-section{
    max-width: 90%;
    margin: 6em auto 0;
    font-size: 1.6rem;
}

.service-heading{
    font-size: 2.8rem;
    max-width: 100%;
    margin: auto;
    font-weight: 500;
}

.service-heading::after{
    content: "サービス";
    font-size: 1.6rem;
    color: #bf8581;
    margin-left: 1em;
}


/* - ▼調律 - */
.service-tuning-text-area{
    margin-top: 3.6em;
}

.service-tuning-heading{
    font-size: 2rem;
    line-height: 1.5;
    max-width: 100%;
    margin: auto;
}

.service-tuning-heading::after{
    content: "Piano Tuning";
    font-size: 1.4rem;
    color: #c4c7cc;
    display: block;
}

.service-tuning-category-area{
    max-width: 100%;
    margin: 2.75em auto 0;
    line-height: 1.8;
}

.service-tuning-category-title{
    font-size: 1.8rem;
}

.service-tuning-category-price{
    text-align: right;
}

.service-tuning-category-title-gp{
    margin-top: 2.5em;
}

.service-tuning-lead-text{
    margin-top: 1.5em;
}

.service-tuning-img-area{
    background-image: url(../img/service_image01.jpg);
    aspect-ratio: 16 / 9;
    background-size: cover;
    margin: 1.75em auto 0;
    border-radius: 10px;
    max-height: 400px;
    background-position: bottom;
}

/* - ▼修理 - */
.service-repair-text-area{
    margin-top: 4.2em;
}

.service-repair-heading{
    font-size: 2rem;
    line-height: 1.5;
    max-width: 100%;
    margin: auto;
}

.service-repair-heading::after{
    content: "Repair";
    font-size: 1.4rem;
    color: #c4c7cc;
    display: block;
}

.service-repair-lead-area{
    max-width: 100%;
    margin: 2.75em auto 0;
    line-height: 1.8;
}

.service-repair-img-area{
    background-image: url(../img/service_image02.jpg);
    aspect-ratio: 16 / 9;
    background-size: cover;
    margin: 1.75em auto 0;
    border-radius: 10px;
    max-height: 400px;
    background-position: center;
}

/* --- ▼SNSセクション --- */
.sns-section{
    max-width: 100%;
    margin: 10em auto 0;
    font-size: 1.6rem;
    position: relative;
}

.sns-heading{
    font-size: 2.8rem;
    max-width: 90%;
    margin: auto;
    font-weight: 500;
}

.sns-heading::after{
    content: "調律師の日々";
    font-size: 1.6rem;
    color: #bf8581;
    margin-left: 1em;
    max-width: 90%;
}

.sns-text{
    margin: 2.75em auto 0;
    line-height: 1.8;
    max-width: 90%;
}


.sns-gallery{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    max-width: 100%;
    margin: 2.4em auto 0;
    }

.sns-gallery-img01, .sns-gallery-img02, .sns-gallery-img03, .sns-gallery-img04, .sns-gallery-img05, .sns-gallery-img06{
    width: 100%;
    height: auto;
}
.zoom{
    width: 100%;
    height: 100%;
}


#zoomback{
    position: fixed;
    inset: 0;
    margin: auto;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

#zoomimg{
    width: 80%;
}

.sns-instagram-link-wrapper{
    margin: 2.75em auto 0;
    line-height: 1.8;
    max-width: 90%;
    display: flex;
    justify-content: flex-end;
}


.sns-instagram-link{
    display: flex;
    align-items: center;
}

.sns-instagram-link-btn{
    position: relative;
    display: inline-block;
    width: 7.7px;
    height: 13.3px;
    margin-left: 14px;
  }

.sns-instagram-link-btn::before,
.sns-instagram-link-btn::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    width: 10px;
    height: 2px;
    border-radius: 9999px;
    background-color: #333;
    transform-origin: calc(100% - 1px) 50%;
}

.sns-instagram-link-btn::before {
  transform: rotate(45deg);
}

.sns-instagram-link-btn::after {
  transform: rotate(-45deg);
}

.deka {

    animation:deka 0.3s ease-out;
    }
    
    @keyframes deka {
    
    from {
    
    transform:scale(0);
    }
    
    }
    




/* --- ▼Flowセクション --- */
.flow-section{
    max-width: 100%;
    margin: 7em auto 0;
    font-size: 1.6rem;
}

.flow-heading{
    font-size: 2.8rem;
    max-width: 90%;
    margin: auto;
    font-weight: 500;
}


.flow-heading::after{
    content: "ご予約からのながれ";
    font-size: 1.6rem;
    color: #bf8581;
    margin-left: 1em;
}


.flow-list{
    margin: 2.75em auto 0;
    line-height: 1.8;
    max-width: 90%;
}

.flow-item-heading{
    position: relative;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 3rem auto 0;
}
.flow-item-heading::after{
    position: absolute;
    left: 0;
    top: -8px;
    content: "";
    width: 18px;
    height: 28px;
    background-color: #46b99c;
    z-index: -1;
}

.flow02::after{
    background-color: #35b4c5;
}

.flow03::after{
    background-color: #48aad1;
}

.flow04::after{
    background-color: #469ccd;
}


.flow-item-text{
    margin: 1em auto 0;
    max-width: 100%;
}

/* --- ▼contact --- */

.contact-section{
    max-width: 90%;
    margin: 12em auto 0;
}

.contact-heading{
    font-size: 2.8rem;
    font-weight: 500;
}


.contact-heading::after{
    font-size: 1.6rem;
    content: "お問い合わせ";
    color: #bf8581;
    display: inline-block;
    margin-left: 1em;
}

.contact-text{
    max-width: 100%;
    margin: 2.75em auto 0;
    line-height: 1.8;
    font-size: 1.6rem;
}

.contact-link-wrapper{
    max-width: 100%;
    margin: 2.75em auto 0;
    line-height: 2;
    font-size: 1.6rem;
    text-align: center;
}



/* --- ▼footer --- */
.footer{
    max-width: 100%;
    margin: 12em auto 0;
    background-color: #6a6e77;
}

.footer-logo-wrapper{
    max-width: 90%;
    margin: 2.78em auto;
    padding-top: 4em;
}

.footer-logo{
    width: 200px;
    height: auto;
    padding-top: 3em;
}

.footer-logo-img{
    width: 100%;
    height: 100%;
}

.footer-title{
    max-width: 90%;
    margin: 1.5em auto 0;
    font-size: 1.8rem;
    color: #fff;
}

.footer-nav-list{
    max-width: 90%;
    margin: 5em auto 0;
    text-align: left;
    color: #fff;
    line-height: 2.5;
    font-size: 1.8rem;
}

.footer-instagram-wrapper{
    max-width: 90%;
    margin: 2em auto 14em;
}

.footer-instagram-link-wrapper{
    width: 60px;
    height:auto;
}
.footer-instagram-icon{
    width: 100%;
    height: 100%;
}

.copyright-wrapper{
    max-width: 90%;
    margin: 2em auto 0;
    padding: 0 0 2em 0;
}

.copyright{
    color: #fff;
    font-size: 1.4rem;
    display: inline-block;
}

/* -------------------------------------------- 
   タブレット 
  -------------------------------------------- */
@media (min-width: 768px) {

}







/* ------------------------------------ 
  PC    
------------------------------------ */
@media (min-width: 1024px) {
/* header */
.header{
    display: block;
}

.header-nav{
    max-width: 1000px;
    width: 70%;
    margin: 3.6em auto;
}
.header-nav-list{
    display: flex;
    justify-content: space-between;
    font-size: 1.8rem;
}



/* --- ▼メインビジュアル --- */
.main-visual{
    max-width: 80%;
    max-height: 100%;
    margin: auto;
    position: relative;
}
.main-visual-img-wrapper{
    margin: auto;
    width: 100%;
    height: 100vh;
    max-height: 800px;
    max-width: 1200px;
}
.main-visual-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* --- ▼メインリード --- */
.main-lead{
    max-width: 1200px;
    width: 80%;
    margin: 6em auto 0;
    font-size: 2.8rem;
    line-height: 1.8;
}




/* --- ▼Aboutセクション --- */
.about-section{
    max-width: 1200px;
    width: 80%;
    margin: 12em auto 0;
    font-size: 1.6rem;
}

.about-container{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 2.5em auto 0;
}

.about-text-area{
    width: 50%;
}

.about-heading{
    font-size: 3.6rem;
    font-weight: 500;
}

.about-text-inner{
    margin-top: 2.5em;
    margin-right: 2em;
    line-height: 2;
}


.about-img-area{
    background-image: url(../img/about_image.jpg);
    aspect-ratio: 16 / 9;
    background-size: cover;
    margin-top: 0;
    border-radius: 10px;
    max-height: 400px;
    width: 60%;

}


/* --- ▼Serviceセクション ---  */
.service-section{
    max-width: 1200px;
    width: 80%;
    margin: 12em auto 0;
    font-size: 1.6rem;
}

.service-heading{
    font-size: 3.6rem;
    font-weight: 500;
    max-width: 100%;
    margin: auto;
}

.service-heading::after{
    content: "サービス";
    font-size: 1.6rem;
    color: #bf8581;
    margin-left: 1em;
}



/* - ▼調律 - */
.service-tuning-container{
    display: flex;
    justify-content: space-between;
    margin: 4em auto 0;
}
.service-tuning-text-wrapper{
    width: 60%;
    margin-right: 3em;
}
.service-tuning-heading{
    font-size: 2rem;
    line-height: 1.5;
    max-width: 100%;
    margin: auto;
}

.service-tuning-img-container{
    width: 40%;
    display: flex;
    align-items: flex-end;
}
.service-repair-heading{
    font-size: 2rem;
    line-height: 1.5;
    max-width: 100%;
    margin: auto;
}

.service-tuning-img-area{
    background-image: url(../img/service_image01.jpg);
    width: 100%;
    height: auto;
    background-position: bottom;
}




/* -▼修理- */
.service-repair-text-area{
    margin-top: 0;
}
.service-repair-container {
    display: flex;
    justify-content: space-between;
    margin-top: 10em;
    flex-direction: row-reverse;
}

.service-repair-text-wrapper{
    width: 60%;
    margin-left: 4em;
}

.service-repair-img-container{
    width: 40%;
    display: flex;
    align-items: flex-end;
}

.service-repair-img-area{
    background-image: url(../img/service_image02.jpg);
    width: 40%;
    height: auto;
    background-position: center;
}




/* --- ▼SNSセクション --- */
.sns-section{
    max-width: 1200px;
    width: 90%;
    margin: 12em auto 0;
    font-size: 1.6rem;
    position: relative;
}

.sns-heading{
    font-size: 3.6rem;
    font-weight: 500;
    max-width: 100%;
    margin: auto;
}

.sns-heading::after{
    content: "調律師の日々";
    font-size: 1.6rem;
    color: #bf8581;
    margin-left: 1em;
    max-width: 100%;
}

.sns-text{
    margin: 2.75em auto 0;
    line-height: 1.8;
    max-width: 100%;
}


.sns-gallery{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    max-width: 100%;
    }


#zoomimg{
    width: 45%;
}



/* --- ▼Flowセクション --- */
.flow-section{
    max-width: 1200px;
    width: 90%;
    margin: 16em auto 0;
    font-size: 1.6rem;
}

.flow-heading{
    font-size: 3.6rem;
    font-weight: 500;
    max-width: 100%;
    margin: auto;
}


.flow-heading::after{
    content: "ご予約からのながれ";
    font-size: 1.6rem;
    color: #bf8581;
    margin-left: 1em;
}


.flow-list{
    margin: 2.75em auto 0;
    line-height: 1.8;
    max-width: 100%;
}

.flow-item-heading{
    position: relative;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 3rem auto 0;
}
.flow-item-heading::after{
    position: absolute;
    left: 0;
    top: -8px;
    content: "";
    width: 18px;
    height: 28px;
    background-color: #46b99c;
    z-index: -1;
}

.flow02::after{
    background-color: #35b4c5;
}

.flow03::after{
    background-color: #48aad1;
}

.flow04::after{
    background-color: #469ccd;
}


.flow-item-text{
    margin: 1em auto 0;
    max-width: 100%;
}



/* --- ▼contact --- */
.contact-section{
    max-width: 1200px;
    width: 90%;
    margin: 16em auto 0;
}

.contact-heading{
    font-size: 3.6rem;
    font-weight: 500;
}


.contact-heading::after{
    font-size: 1.6rem;
    content: "お問い合わせ";
    color: #bf8581;
    display: inline-block;
}

.contact-text{
    max-width: 100%;
    margin: 2.75em auto 0;
    line-height: 1.8;
    font-size: 1.6rem;
}

.contact-link-wrapper{
    max-width: 100%;
    margin: 2.75em auto 0;
    line-height: 2;
    font-size: 1.6rem;
    text-align: center;
    font-weight: 600;
}


/* --- ▼footer --- */
.footer-logo-wrapper{
    max-width: 1200px;
    margin: 2.78em auto;
    width: 90%;
}

.footer-title{
    max-width: 1200px;
    margin: 1.5em auto 0;
    font-size: 1.8rem;
    color: #fff;
    width: 90%;
}
.footer-nav-list{
    max-width: 1200px;
    width: 90%;
    margin: 5em auto 0;
    text-align: left;
    color: #fff;
    line-height: 2.5;
    font-size: 1.8rem;
}
.footer-instagram-wrapper{
    max-width: 1200px;
    margin: 2em auto 14em;
    width: 90%;
}
.copyright-wrapper{
    max-width: 1200px;
    margin: 2em auto 0;
    width: 90%;
}


}