body{
    background-color: #f1f1f1;
    font-family: serif;
    height: 5000px;
    background-image: url("../img/1_top/menu/backimg3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

}
h1,h2{
    /* font-family: Georgia, 'Times New Roman', Times, serif; */
}




/* header */

header{
    height: 60px;
    background-color: #000;
    display: flex;
    justify-content: space-between ;
}
header img{
    width: 80px;
    height: auto;
    margin-left: 45px;
    margin-top: 9px;
}
.nav{
    margin-right: 2vw;
    padding: 7px 20px;
}
.nav ul{
    display: flex;
    justify-content: space-between;
}
.nav li{
    margin: 11px 1.7vw;
    color: #fff;
    font-size: 22px;
}
.nav li a{
    text-decoration: none;
    color: #fff;
    font-size: 22px;

}
.navtitle:hover{
    color: #889e7e;
    
}
/* ==========================
top
===========================*/

/* section1 */
/* .right{
    position: fixed;
    display: none;
} */
.section1{
    display: flex;
    position: fixed;
    justify-content: space-around;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* padding: 2vw;
    margin-top: 5vw;
    padding-left: 0; */
}


.section1 h1{
    font-size: 6vw;
    margin-top: 5vw;
    margin-left: 1vw;
    /*     margin-left: 4vw;
    margin-right: 0; */
}
.section1 .left{
    /* margin-right: 2vw; */
    display: flex;
}
.left_item1{
    margin: 0 2vw;
}
.salon img{
    width: 21vw;
    height: auto;
    /* transition: transform .5s; */
    transition: opacity .4s ease-in-out,transform .5s;
}
.section1 .left_item1 img{
    width: 20vw;
    height: auto;
    margin-top: 5vw;
    transition: opacity 0.2s ease-in-out;
}
.section1 .left_item1 img:hover{
    opacity: 0.7;
    /* filter: grayscale(100%); */
    /* filter: brightness(80%); */
}
.section1 .right{
    display: flex;
}
.section1 .right img{
    width: 21vw;
    height: auto;
    /* transition: transform .5s; */
    transition: opacity .4s ease-in-out,transform .5s;
}
.section1 .right img:hover,
.salon img:hover
{
    transform: scale(1.1);
    /* filter: brightness(110%); */
    opacity: 0.8;
    /* filter: grayscale(30%); */
    

}

/* section2 */
.section2{
    /* padding: 13vw 4vw 3vw; */
    position: fixed;
    text-align: center;
    display: none;
    /* margin: 0 8vw; */
    /* position: absolute; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
}
.section2 h1{
    font-size: 6vw;
    margin-bottom: 1.5vw;
}
.section2 div{
    font-size: 1.7vw;
    line-height: 4vw;
}
/* .backimg img{
    width: 10vw;
    padding: 10vw;
    position: fixed;
    display: none;
} */


/* section3 */
.line{
    width: 70vw;
    height: 0.3vw;
    background-color: #c0c0c0;
    margin: 8vw auto;
}
.section3{
    display: flex;
    justify-content: space-around;
    padding:  6vw;
}
.section3 img{
    height: 28vw;
    min-height: 140px;
    transition: opacity .4s ease-in-out,transform .5s;
}
.section3 img:hover{
    transform: scale(1.05);
    opacity: 0.7;
}
.section3 h2{
    font-size: 6vw;
    text-align: center;
}

/* section4 */
.section4{
    display: flex;
    justify-content: space-around;
    height: 30vw;
    background-image: url(../img/1_top/news/news_card.png);
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 10vw;
    padding-left: 22vw;
    padding-bottom: 28vw;
}
.section4 div{
    /* height: 30vw;
    background-image: url(../img/1_top/news/news_card.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 10vw;
    padding-left: 37vw;
    padding-bottom: 25vw; */
    font-size: 1.6vw;
    line-height: 4vw;
}

.section5{
    /* padding: 13vw 8vw; */
    position: fixed;
    display: none;
    /* position: absolute; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.section5 h1{
    font-size: 6vw;
    text-align: center;
    margin-bottom: 3vw;
}
.section5 img{
    width: 20vw;
    min-width: 90px;
}
.review_left,
.review_right{
    display: flex;
    justify-content: space-around;
}
.section5 .review{
    display: flex;
    justify-content: space-around;
}



/* titlelogo */
.titlelogo{
    position: fixed;
    display: none;
    font-size: 10vw;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}



/* footer */
footer{
    padding-top: 5vw;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: none;
}
.footer_logo{
    display: flex;
    justify-content: flex-end;
    margin-right: 5%;
    margin-bottom: 3%;

}
footer img{
    height: 15vw;
    max-height: 66px;
    min-height: 60px;
}
.footer_logo a:first-child{
    margin-right: 18px;
}
.footer_bar{
    background-color: #000;
    color: #fff;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer_bar p{
    margin: 0;
}


/* ==========================
salon
===========================*/
.ashiya img,
.koshien img,
.okamoto img
{
    width: 45vw;
    /* position: absolute; */
}
.ashiya ,.okamoto{
    display: flex;
    justify-content: space-around;
    margin: 0 10vw;
}
.koshien{
    display: flex;
    justify-content: space-around;
    margin: 17vw 10vw;
}
.explanation{
    /* position: relative; */
    margin-top: 117px;

}
.explanation div{
    text-align: center;
    /* background-color: #fff; */
    font-size: 2vw;
    width: 30vw;
    /* margin-left: 30vw; */
    /* padding: 2vw; */
    margin-top: 2vw;
    line-height: 50px;
}
.salonpage h1{
    text-align: center;
    font-size: 60px;
}
.salonpage{
    margin-top: 12vw;
}
.koshien img{
    order: 2;
}
.koshien .explanation{
    order: 1;
}

.koshien ,.okamoto{
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
  .koshien.show {
    opacity: 1;
  }
  .okamoto.show {
    opacity: 1;
  }













@media screen and (max-width: 1000px){
 /* ================================
  TOPページ
  ==================================*/

  /* headerハンバーガーメニュー */
  /*　ハンバーガーボタン　*/
  .nav ul{
    display: block;
  }
.hamburger {
    display : block;
    position: fixed;
    z-index : 3;
    right : 20px;
    top   :11px;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
    -webkit-transition: 0.5s all;
    -moz-transition   : 0.5s all;
    transition        : 0.5s all;
    margin-right: 1.7vw;
  }
  .hamburger span {
    display : block;
    position: absolute;
    width   : 30px;
    height  : 4px ;
    left    : 6px;
    background : #bbb;
  }
  .hamburger span:nth-child(1) {
    top: 10px;
    width: 40px;
  }
  .hamburger span:nth-child(2) {
    top: 20px;
    left: 16px;
  }
  .hamburger span:nth-child(3) {
    top: 30px;
  }
  
  /* ナビ開いてる時のボタン */
  .hamburger.active{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  .hamburger.active span:nth-child(1) {
    top : 16px;
    left: 7px;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
    width: 30px;
  }
  .hamburger.active span:nth-child(2) {
    top: 16px;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
    left: 7px;
  }
  .hamburger.active span:nth-child(3) {
    opacity: 0;
  }
  nav.globalMenuSp{
    position:fixed;
    z-index : 2;
    top  : 0;
    right : 0px;
    color: #000;
    background: #fff;
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
    /* min-width: 390px; */
  }
  
  nav.globalMenuSp ul {
    background: #fff;
    margin: 0 auto;
    padding: 0;
    width: 100%;
  }
  
  nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px solid #fff;
  }
  nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
  nav.globalMenuSp ul li:hover{
    background :#ddd;
  }
  
  nav.globalMenuSp ul li a {
    /* font-family: 'Rowdies', cursive; */
    display: block;
    color: #000;
    padding: 3vw 0;
    text-decoration :none;
    font-size: 1.6rem;
  }
  
  /* このクラスを、jQueryで付与・削除する */
  nav.globalMenuSp.active {
    transform: translateY(0%);
  }
  .separate{
    display: none;

  }


/*======ここまで======*/

/* ファーストビュー */
.section1{
    display: block;
}
.section1 .right{
    justify-content: space-around;
}
.section1 .right img{
    width: 45vw;
    height: auto;
}
.salon img{
    width: 45vw;
    height: auto;    
}
.section1 .left{
    justify-content: space-around;
}
.section1 .left_item1{
 margin: 0;
 width: 45vw;
}
.section1 .left_item1 img{
    width: 35vw;
    height: auto;
    margin-top: 0;
    margin-left: 3vw;
}
.section1 h1{
    font-size: 11vw;
    margin-top: 15vw;
    margin-left: 6vw;
    margin-bottom: 8vw;
}
.section1{
    margin-top: 0;
}

/* コンセプト */
.section2 h1{
    font-size: 13vw;
    margin-bottom: 7.5vw;
}
.section2 div{
    font-size: 5vw;
    line-height: 2;
    width: 86vw;
}
/* レビュー */
.section5 .review{
    display: block;
    margin-right: 4vw;
}
.section5 img{
    width: 46vw;
    min-width: 90px;
}
.section5 h1{
    font-size: 13vw;
    margin-bottom: 8vw;
}

.titlelogo{
    font-size: 13vw;
}

}







@media screen and (max-width: 500px){
    /* ================================
     TOPページ
    ==================================*/
   
   
   
   
   /*======ここまで======*/
   
   .section1{
       display: block;
   }
   .section1 .right{
       justify-content: space-around;
   }
   .section1 .right img{
       width: 45vw;
       height: auto;
   }
   .salon img{
       width: 45vw;
       height: auto;    
   }
   .section1 .left{
       justify-content: space-around;
   }
   .section1 .left_item1{
    margin: 0;
    width: 45vw;
   }
   .section1 .left_item1 img{
       width: 40vw;
       height: auto;
       margin-top: 0;
       margin-left: 3vw;
   }
   .section1 h1{
       font-size: 11vw;
       margin-top: 15vw;
       margin-left: 6vw;
       margin-bottom: 8vw;
   }
   .section2 h1{
       font-size: 13vw;
       margin-bottom: 7.5vw;
   }
   .section2 div{
       font-size: 5vw;
       line-height: 2;
       width: 86vw;
   }
   .section5 .review{
       display: block;
       margin-right: 4vw;
   }
   .section5 img{
       width: 46vw;
       min-width: 90px;
   }
   .section5 h1{
       font-size: 13vw;
       margin-bottom: 8vw;
   }
   .section1{
       margin-top: 0;
   }
   
   .titlelogo{
       font-size: 13vw;
   }

   /* footer */
   footer{
    padding-top: 5vw;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: none;
}
.footer_logo{
    display: flex;
    justify-content: space-around;
    padding: 10% 35%;
    margin: 0;
}
footer img{
    height: 15vw;
    max-height: 90px;
    min-height: 60px;
}
.footer_logo a:first-child{
    margin-right: 10px;
}
.footer_bar{
    background-color: #000;
    color: #fff;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer_bar p{
    margin: 0;
}
   
   }