@cherset "UTF-8";

/* 共通部分
----------------------------------*/
html {
      font-size: 100%;
}
h2 {
      font-size: 1.5rem;
      font-family: 'philosopher', serif;
      text-transform: uppercase;
      font-weight: normal;
      color: #AD8D53;
}
h3 {
      font-size: 7rem;
      font-family: 'Tangerine', serif;
      text-transform: none;
      font-weight: bold;
      color: #AD8D53;
}
h4 {
      font-size: 1.5rem;
      font-family: 'philosopher', serif;
      text-transform: uppercase;
      font-weight: normal;
}
h5 {
      font-size: 1.5rem;
      font-family: 'philosopher', serif;
      text-transform: uppercase;
      font-weight: normal;
      display: inline-block;
      border-bottom: 2px #87befd solid;
}
p {
      font-size: 1rem;
}
body{
      font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ　Pro W3", sans-serif;
      line-height: 1.7;
      color: #432;
      background-color: #EEEEED;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}


/* HEADER
-----------------------------------------------------*/
.page-header {
    background-color: #FFFFFF;
    padding-left: 5%;
    padding-right: 5%;

}
.logo {
    width: 250px;
    margin-top: 14px;
}
.main-nav1 {
    display: flex;
    font-size: 1rem;
    margin-top: 34px;
    list-style: none;
}
.main-nav1 li {
    margin-left: 36px;
}
.main-nav1 a {
    color: #432;
}
.main-nav1 a:hover {
    color: #0bd;
}
.main-nav2 {
    display: flex;
    font-size: 0.7rem;
    margin-top: -10px;
    list-style: none;
}
.main-nav2 li {
    margin-left: 80px;
}
.main-nav2 a {
    color: #432;
}
.main-nav2 a:hover {
    color: #0bd;
}
.page-header {
    display: flex;
    justify-content: space-between;
}
.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
}

/* Home
-------------------------------------------------- */
.home-content {
    width: 300px;
    margin-left: 0px;
    padding: 100px 0 0 80px;
    text-align: center;
}

/* 見出し */
.page-title1 {
    margin-left: 0px;
    width: 285px;
}
.page-title2 {
    margin-left: 0px;
}
.home-content p {
    width: 285px;
}

/* ボタン */
.home-content a {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 30px;
}
.instagrambtn:hover {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.28);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}
.linebtn:hover {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.28);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

/* 大きな背景 */
.big-dg {
    background-size: cover;
    background-repeat: no-repeat;
}
#home {
    background-image: url("../images/main-bg1.jpg");
    min-height: 80vh;
    margin-bottom: 10px;
    background-position: center top;
    background-repeat: no-repeat;
}
#home .page-title1 {
    text-transform: none;
}
#home .page-title1 {
    text-transform: none;
}

/* オーナー紹介 */
.owner-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80vh;
    width: 83%;
    background-color: #EEEEED;
    margin: 10% auto;
}
article {
    width: 500px;
    margin: 0px 30px 0px 0px;
    padding: 10px;
}
aside {
    width: 60%;
    margin: 0 0 50px 0;
    padding: 10px;
}
aside ul {
    padding: 10px 20px 10px 40px;
}
aside ul li {
    flex-grow: 1;
}
aside p {
    padding: 10px 10px;
    margin: 10px;
}

/* 社会貢献 */
.social-contribution-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    grid-template-rows: 250px 250px;
    background-color: #FFFFFF;
    width: 800px;
    padding: 30px 30px;
    margin: 0 auto;
    margin-top: 10%;
}
.item1 {
    margin: 0 auto;
}

/*　製品紹介　*/
.doterra-content {
    background-color: #FFFFFF;
    width: 800px;
    padding: 100px 50px;
    margin: 10% auto;
}

/* Instagram */
.instagram-media-content {
      display: flex;
      justify-content: center;
      margin: 10% auto;
}

/* SNS-btn */
.sns-btn-container {
    display: flex;
    justify-content: space-around;
    margin: 10% auto;
    width: 500px;
    background-color: #EEEEED;
}
/* SNS-btn */
.btn-circle-stitch {
    display: inline-block;
    text-decoration: none;
    background: #87befd;
    color: #FFF;
    width: 120px;
    height: 120px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    box-shadow: 0px 0px 0px 5px #87befd;
    border: dashed 1px #FFF;
    transition: .4s;
}
.btn-circle-stitch:hover {
    background: #668ad8;
    box-shadow: 0px 0px 0px 5px #668ad8;
}

/* FOOTER
--------------------------------------------------------*/
.page-footer-wrap .salon-left, .SNSbtn-center, .menu-right {
    display: inline-block;
    width: 30%;
    height: 20px;
    margin: 1px;
	  padding: 1px;
}
.page-footer-wrap {
    background-color: #FFFFFF;
    text-indent: inherit;
    text-align: center;
    margin-top: 10%;
}
.page-footer-wrap ul {
    list-style: none;
    line-height: 10px;
    margin: 0 auto;
}
.button30 {
     padding: 10px;
}
.button30 a {
    display: flex;
    justify-content:center;
    align-items: center;
    margin-left: auto;
    width: 50px;
    height: 50px;
    background-color: #EEEEED;
    border-radius: 50vh;
    transition: 0.3s;
}
.button30 a::after {
    content: '';
    width: 7px;
    height: 7px;
    border-top: 3px solid #333;
    border-left: 3px solid #333;
    transform: rotate(45deg);
    transition: 0.3s;
}
.button30 a:hover {
    background-color: #cccccc;
}
.button30 a:hover::after {
    border-top: 3px solid #f2f2f2;
    border-left: 3px solid #f2f2f2;
    transform: translateY(-5px) rotate(45deg);
}
.salon-left  {
    text-decoration: none;
}
.salon-left li {
    line-height: 20px;
}
.SNSbtn-center li {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0px auto;
    margin-left: 30px;
}
.SNSbtn-center li:hover {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.28);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}
.menu-right a {
    text-decoration: none;
    color: #432;
}
.menu-right a:hover {
    color: #0bd;
}
.page-footer-wrap .cmark {
    display: block;
    padding: 10px;
    border-top: 1px solid gray;
    width: 80%;
    margin: 0 auto;
}


/* SalonMenu
---------------------------------------------------------*/

/* 見出し */
.Globalnavigation-content h3 {
     text-align: center;
}
.Globalnavigation-content h2 {
     margin-top: -50px;
     margin-bottom: 10px;
     text-align: center;
}
/* コンタクトボタン */
.btn-stitch {
    display: inline-block;
    text-decoration: none;
    background: #87befd;
    color: #FFF;
    width: 350px;
    height: 50px;
    line-height: 50px;
    border-radius: 1%;
    text-align: center;
    overflow: hidden;
    box-shadow: 0px 0px 0px 5px #87befd;
    border: dashed 1px #FFF;
    transition: .4s;
}
.btn-stitch:hover {
    border: dotted 1px #FFF;
    background: #668ad8;
}
.Contactbtn-container {
    text-align: right;
    margin-top: 4%;
    margin-right: 5%;
}

/* MENU1 */
.menu1 h3 {
    font-size: 4rem;
    text-align: left;
    margin-left: 5%;
}
.grid1 {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 70%;
}
.Contactbtn-container2 {
    text-align: right;
    margin-bottom: 10%;
    margin-right: 5%;
}
.big-box {
    grid-column: 1/2;
    grid-row: 1/3;
}
.big-box img {
    height: auto;
    width: 50%;
    object-fit: cover;
}

/* MENU2 */
.menu2 h3 {
    font-size: 4rem;
    text-align: left;
    margin-left: 5%;
}
.grid2 {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 70%;
}
.big-box1 {
    grid-column: 1/2;
    grid-row: 1/3;
}
.big-box1 img {
    height: auto;
    width: 50%;
    object-fit: cover;
}

/* CorseMenu
---------------------------------------------------------*/
/* 見出し */
.SalonMenu-content h3 {
     text-align: center;
}
.SalonMenu-content h2 {
     margin-top: -50px;
     margin-bottom: 50px;
     text-align: center;
}
.banner-container {
    margin: 0 auto;
    width: 500px;
}
.grid3 {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 70%;
}

/* Contact
---------------------------------------------------------*/
.contactsns-content {
    text-align: center;
    margin-bottom: 20px;
}
.contactsns-content a {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-left: 30px;
    margin-top: 20px;
}
.instagrambtn:hover {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.28);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}
.linebtn:hover {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.28);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}
.facebookbtn:hover {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.28);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}
/* forme */
.contact-container {
    color: #000;
    height: 75vh;
    width: 900px;
    padding: 50px;
    margin: 0 auto;
    margin-bottom: 50px;
    background-color: #fff;
}
.contact_message1 {
    text-align: center;
    margin-top: 100px;
}
.contact_message2 {
    display: flex;
    justify-content: center;
    margin: 20px auto;
}
.li {
    text-align: left;
}
.Contactbtn-container {
    text-align: center;
}
.Contactbtn-container a {
    display: inline-block;
    text-decoration: none;
    background: #87befd;
    color: #FFF;
    width: 350px;
    height: 50px;
    line-height: 50px;
    border-radius: 1%;
    text-align: center;
    overflow: hidden;
    box-shadow: 0px 0px 0px 5px #87befd;
    border: dashed 1px #FFF;
    transition: .4s;
}
.Contactbtn-container a:hover {
    background: #668ad8;
    box-shadow: 0px 0px 0px 5px #668ad8;
}
.contact_message3 {
    margin: 0 auto;
    margin-top: 20px;
    width: 80%;
}
.contact_message3 br {
    text-align: center;
}
.contact_message3 p {
    text-align: left;
}
/*contact-sns*/
.contact-sns-container {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    margin-bottom: 50px;
    width: 100%;
}
.ribon-container {
    display: grid;
    grid-template-columns: 200px 200px;
    gap: 50px;
    grid-template-rows: 100px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: -35px;
    background-color: #EEEEED;
}
.sns-btn2-container {
    display: grid;
    grid-template-columns: 200px 200px;
    gap: 60px;
    grid-template-rows: 200px;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: -50px;
    background-color: #EEEEED;
}
.message-container {
    display: grid;
    grid-template-columns: 200px 200px;
    gap: 60px;
    grid-template-rows: 180px;
    margin: 0 auto;
    background-color: #EEEEED;
}
.banner-container2 {
    margin: 0 auto;
    width: 600px;

}

/* iframe */
iframe {
    width: 100%;
}
/* 店舗情報・地図　*/
#location {
    padding: 5% 0;
}
#location .wrapper {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin-top: 100px;
}
.location-info {
    color: #000;
    background-position: right;
    height: 50vh;
    width: 50%;
    margin-bottom: 20px;
}
.location-info h5 {
    font-size: 1.3rem;
    margin-top: 80px;
    margin-left: 15%;
    margin-right: 15%;
    color: #000;
}
.location-info p {
    margin-left: 15%;
    margin-right: 15%;
    color: #000;
}
.location-map {
    width: 50%;
}

/* タブレット版
-----------------------------------------------------*/
@media screen and (max-width: 900px) {
         h2 {
            font-size: 0.9rem;
            }
         h3 {
            font-size: 5rem;
            }
         /* 大きな背景 */
         #home {
           background-image: url(/images/main-bg3.jpg);
           min-height: 50vh;
           margin-bottom: 0px;
           background-position: top;
           width: 100%;
         }
         .home-content {
             width: 300px;
             margin-left: 0px;
             padding: 100px 0 0 10px;
             text-align: center;
         }
         /* オーナー紹介 */
         .owner-content {
             flex-direction: column;
             margin: 10% auto;
         }
         article {
             width: 300px;
             margin-top: 20px;
             padding: 30px 10px 0px 10px;
         }
         aside {
             width: 100%;
             margin: 10px;
             padding: 0px 10px 10px 10px;
         }
         aside ul {
             padding: 10px 20px 10px 30px;
         }
        /* SalonMenu */
        .grid1 {
            width: 90%;
        }
        .grid2 {
            width: 90%;
        }
        /* CORSEMENU */
        .grid3 {
            width: 90%;
        }
        /* CONTACT */
        .location-info {
            height: 50vh;
            width: 50%;
        }
         #location .wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 90%;
          }
          .location-info {
             background-position: center;
             width: 100%;
             margin: 0 auto;
           }
          .location-map {
             width: 100%;
             margin-bottom: 50px;
           }
}

/* スマホ版
-----------------------------------------------------*/
@media screen and (max-width: 600px) {
      h3 {
           font-size: 3rem;
      }
      h2 {
           font-size: 1.0rem;
      }
      h4 {
           font-size: 1.1rem;
      }
      h5 {
           font-size: 1.1rem;
      }
      /* HEADER */
      .page-header {
          flex-direction: column;
          align-items: center;
      }
      .main-nav1 {
          color: #0bd;
          font-size: 0.6rem;
          margin: 10px;
      }
      .main-nav2 {
        font-size: 0rem;
      }
      .main-nav1 li {
          margin-left: 20px;
      }
      /* 大きな背景 */
      #home {
          background-image: url("../images/main-bg.jpg");
          min-height: 80vh;
          background-position: bottom;
          width: 100%;
          margin-bottom: 80px;
      }
      /* Home */
      .home-content {
          text-align: center;
          margin: 20px auto;
          padding: 20px 0 0 0;

      }
      .home-content h2 {
          margin-top: 10px;
      }
      .home-content h3 {
          font-size: 3rem;
          margin-top: -20px;
      }
      .home-content p {
          margin-top: -20px;
      }
      .home-content a {
          margin: 20px 30px 20px 30px;

      }
      /* オーナー紹介 */
      .owner-content {
          flex-direction: column;
          width: 100%;
          height: 100%;
          margin: 10px 0 10px 0;
      }
      article {
          width: 300px;
          margin-top: 20px;
          padding: 30px 10px 0px 10px;
      }
      aside {
          width: 100%;
          margin: 10px;
          padding: 0px 10px 10px 10px;
      }
      aside ul {
          padding: 10px 20px 10px 30px;
      }
      .social-contribution-container {
          display: grid;
          grid-template-columns: 1fr;
          gap: 20px;
          grid-template-rows: 250px 300px 250px;
          width: 80%;
          padding: 30px 30px;
          margin: 10% auto;
      }
      .doterra-content {
          background-color: #FFFFFF;
          width: 80%;
          padding: 80px 50px;
      }
      .instagram-media-content {
          width: 80%;
      }
      .sns-btn-container {
          display: flex;
          justify-content: space-around;
          margin: 10% auto;
          width: 100%;
          background-color: #EEEEED;
      }
      /* FOOTER */
      .page-footer-wrap .salon-left, .SNSbtn-center, .menu-right {
          display: block;
          width: 80%;
          height: auto;
          margin: -40px 10% 0 10%;
      }
      .SNSbtn-center li {
          display: inline-block;
          width: 30px;
          height: 30px;
          margin: 0 auto;
          margin-left: 30px;
          margin-top: 20px;
      }
      /* SALONMENU */
      .banner-container {
          width: 90%;
       }
       .Globalnavigation-content h2 {
           margin-top: -25px;
       }
      .Contactbtn-container {
          margin-bottom: 30px;
          text-align: center;
       }
       .btn-stitch {
          width: 250px;
       }
      .big-box {
          grid-column: auto;
          grid-row: auto;
       }
      .big-box img {
         height: auto;
       }
      /* MENU2 */
       .menu1 h3 {
         font-size: 3rem;
       }
       .menu2 h3 {
         font-size: 3rem;
       }
      .grid1 {
         width: 100%;
　　　　 }
      .grid2 {
         width: 100%;
　　　　 }
      /* CORSEMENU */
      .SalonMenu-content h2 {
         margin-top: -25px;
      }
      .grid3 {
        width: 100%;
       }

      /* CONTACT */
      .contact-container {
        width: 90%;
        height: 100%;
        padding: 10px;
        margin: 0 auto;
        margin-bottom: 10%;
      }
      .contact_message2 {
        width: 80%;
       }
      .contact_message3 {
         width: 90%;
         margin-bottom: 10%;
       }
       .Contactbtn-container a {
         width: 250px;
       }
      .contact-sns-container {
         width: 90%;
       }
       .ribon-container {
          grid-template-columns: 150px 150px;
          gap: 5%;
          margin: 0 auto;
       }
       .sns-btn2-container {
          grid-template-columns: 110px 110px;
          margin: 0 auto;
          margin-top: -50px;
       }
      .message-container {
          grid-template-columns: 180px 180px;
          gap: 5%;
          margin-top: -50px;
       }
      .banner-container2 {
         width: 90%;

      }
      /* 店舗情報・地図　*/
      .banner-container {
          width: 50%;
          margin-top: 10%;
          margin: 0 auto;
       }
      #location .wrapper {
         display: flex;
         flex-direction: column;
         align-items: center;
         width: 100%;
       }
      .location-info {
         width: 100%;
         text-align: center;
       }
       .location-info h5 {
         color: #000;
         margin-left: 0%;
         margin-right: 0%;  
       }
       .location-info p {
         text-align: left;
         color: #000;
         margin-left: 0%;
         margin-right: 0%;
       }
      .location-map {
         width: 100%;
         margin-bottom: 50px;
       }
}