@charset "UTF-8";/*コードの文字化けを防ぐ*/
/*共通部分
-------------------------------*/
html{ /*文字サイズを正しく反映*/
    font-size: 100%;
}
body{ /*書体の指定と文字色の指定*/
    font-family: "Hiragino kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",sans-serif;line-height: 1.7;
    color: rgb(82, 114, 74);
}
a{ /*共通上部のメニュー*/
    text-decoration: none;
}
img{ /*画像の大きさの指定*/
    max-width: 100%;
}
/*レイアウト*/
.wrapper{
    max-width: 1120px;
    margin: auto;
    padding: 0 1.5rem;
}
.align-center{
    text-align: center;
}
/*見出し*/
.font-english{
    font-family: 'Philosopher',sans-serif;
    font-weight: normal;
}
.page-title{
    font-size: 1.5rem;
    text-align: center;
    margin-top: 2rem;
    line-height: 1.4;
}
.heading-large{
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1rem;
}
/*ボタン*/
.btn{
    display: inline-block;
    font-size: 1rem;
    background-color: #390;
    color: rgb(225, 253, 200);
    border-radius: 8px;
    padding: .75rem 1.5rem;

}
.btn:hover{
    background-color: #adcc33;
}
/*iframe*/
iframe{
    width: 100%;
}
/*ヘッダー
-------------------------------*/
.page-header{
    padding-top: .5rem;
}
@keyframes open-keyanime1{  /* アニメーションの動き */
    0% { 
      opacity:0; /* 完全に透明 */
   } 
    100% {
      opacity:1; /* 透明度無し、通常表示 */
    }
  }
  
  .animation1{
    animation-name: open-keyanime1 ; 
    animation-duration: 10s; /* 10秒間で表示 */ 
    animation-fill-mode: both;  
    animation-iteration-count: 1; /* 1回実行させています */
  } 
.logo{ /*ロゴの大きさ*/
    width: 210px;
}
.main-nav{ /*メインナビを横並び*/
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    font-size: 1.5rem;
    list-style: none;
}
.main-nav a{ /*上部の共通メニューの文字色*/
    color: #390;
}
.main-nav a:hover{ /*上部の共通メニューの文字色*/
    color: #adcc33;    
}
.cover{
    background-size: contain;
    background-position: center bottom;
    height: 600px;
}
.sub-cover{
    background-size: cover;
    background-position: center bottom;
    height: 528px;
    margin-bottom: 4rem;
}
.sub-cover h2{
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.cover-home{ /*共通部分の上部の背景色*/
    background-color: rgb(216, 247, 202);

}
.about{
    max-width: 736px;
    text-align: center;
    padding: 0 1.5rem;
    margin: 3rem auto 4rem;
    
}
.about h3{
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.about p{
    margin-bottom: 1rem;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.animation1  p { /*アニメーションの文字*/
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/*staff
-------------------------------*/
.cover-staff{
    background-color: rgb(216, 247, 202);
}
/*staff紹介部分*/
.post{
    margin-bottom: 3rem;
}
.post-title{
    font-weight: normal;
    margin-top: 1.25rem;
}
.post-thumbnail{
    border-radius: 10px;
    margin-top: 1.5rem;
}
.post p{
    margin-bottom: 1.5rem;
    line-height: 2;
}
/*contact
-------------------------------*/
.cover-contact{
    background-color:rgb(216, 247, 202) ;
}
/*店舗情報*/
.location{
    margin-bottom: 3.5rem;
}
.location-info{
    margin-bottom: 2rem;
}
.location-info.info{
    padding: 0;
}
/*お問い合わせ*/
.line{
    max-width: 916px;
    text-align: center;
    background-color: #e4f797;
    border-radius: 48px;
    padding: 1.5rem 2.5rem 2.5rem;
    margin: 0 auto 2rem;

}
.line h3{
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
}
.line p{
    margin: 1rem 0 2rem;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}
/*SNS*/
.sns-item{
    margin-top: 2rem;
    text-align: center;
}
.sns-item .heading-midium{
    margin-top: .5rem;
}
/*MENU
-------------------------------*/
.cover-menu{
    background-color:rgb(216, 247, 202) ;
}
.hair-menu table{
    border-collapse:  collapse;
}
.hair-menu th{
    padding: 10px 20px;
    background-color: #e4f797;
}
.hair-menu tr{
    border:1px solid #390;
    padding: 10px 20px;
}
.hair-menu td{
    border:1px solid #390;
    padding: 10px 20px;
}
.マッサージメニュー table{
    border-collapse:  collapse;
}
.マッサージメニュー th{
    padding: 10px 20px;
    background-color: #e4f797;
}
.マッサージメニュー tr{
    border:1px solid #390;
    padding: 10px 20px;
}
.マッサージメニュー td{
    border:1px solid #390;
    padding: 10px 20px;
}

/*フッター
-------------------------------*/
.page-footer{
    background-color:rgb(216, 247, 202) ;
    background-size: cover;
    background-position: center;
    padding-top: 12rem;
}
.info{
    width: 100%;
    max-width: 544px;
    margin: auto;
    padding: 0 1.5rem;
    border-spacing: 0;
}
.info th,
.info td{
    border-bottom: 1px solid #390;
}
.info th{
    text-align: left;
    font-weight: normal;
    padding: 1rem;
}
.info td{
    padding: 1rem 0;
}
.copyright{
    background-color: #390;
    text-align: center;
    padding: 2rem 0;
    margin-top: 6rem;
    color: #fff;
}

/*デスクトップ版
-------------------------------*/
@media(min-width:800px){
   /*見出し*/
   .page-title{
    font-size: 3rem;
    }
    /*ヘッダー*/
    .page-header{
        display: flex;
        justify-content: space-between;
        padding-top: 1.5rem;
    }
    .main-nav{
        font-size: 2rem;
    }
    /*ヘッダーカバー画像*/
    .sub-cover{
        height: 400px;
        margin-bottom: 6rem;
    }
    /*staff*/
    .staff-contents{
        display: flex;
        justify-content: space-between;
    }
    .post{
        width: 70%;
    }
    /*contact*/
    .cover-contact{
        background-image: url(../images/cover-contact-l.webp);
    }
    .location{
        display: flex;
        gap: 2rem;
    }
    .location-info{
        width: 32%;
    }
    .location-info .info th{
        padding-left: 2rem;
    }
    .location-map{
        width: 64%;
    }
    /*メニュー*/
.menu{
    display: flex;
}
}