@import "reset.css";

/*コードの順番*/
/*共通部部分(5) → index(99)⭕️ → esthetic(173)⭕️ → appointment(253)⭕️ → guide (330)⭕️→ bridal(589)⭕️*/

/*共通部分　開始*/
*{
    box-sizing:border-box;
  }
  body{
    width:100%;
    background-image:url(https://beiz.jp/images_P/wood-texture/wood-texture_00034.jpg);
    background-size:contain;
    position:relative;
    top:0;
    left:0;
  }
  .container{
    width:100%;
    margin:0 auto;
  }
  .frame{
    background-color:rgb(255, 255, 255);
    width:83%;
    padding-top:20px;
    margin:100px auto;
  }
  header{ 
    width:100%;
  }
  .top-link{
    width:14%;
    display:inline-block;
    text-align:center;
    color:black;
    font-size:13px;
    border:1px solid white;
    margin-left:2%;
    padding:15px 10px;
    background-color:#ffd54adc;
    position:relative;
  }
  .top-link:hover{
    background-color:#ffd54a;
  }
  footer{
    height:150px;
    width:100%;
    background-color:rgb(203, 240, 240);
    color:rgb(0, 0, 0);    
  }
  .footer-left{
    float:left;
    padding-left:50px;
    line-height:60px;
  }
  .footer-right{
    float:right;
    width:60%;
    text-align:left;
    padding-left:50px;
    line-height:60px;
  }
  .jumps{
    float:right;
    position:absolute;
    top:25%;
    left:80%;
    position:fixed;
    z-index:2;
  }
  .jump{
    font-size:20px;
    color:rgb(238, 94, 214);
    display:block;
    text-align:center;
    padding:15px 5px;
    font-family:'Courier New', Courier, monospace;
  }
  .homePhoto h1{
    text-align:center;
    font-size:40px;
    background-color:rgba(253, 208, 148, 0.9);
  }
  .homePhoto{
    height:400px;
    width:65%;
    background-image:url(hairsalonhayasiphoto.jpg);
    background-size:cover;
    margin:0 auto;
  }
  .information{
      height:400px;
      width:65%;
      margin:0px auto;
      background-color:rgba(169, 179, 201, 0.801);
  }
  .inf{
   padding:10px;
   text-align:center;
   line-height:30px;
  }
  .inf td{
    width:50%;
  }
  /*共通部分　終了*/


  /*index 開始*/
  .frame-h{
    height:2300px;
    background-color:rgba(255, 219, 152, 0.726);
  }
  
  
  /*コンセプトの設定*/
  .concept-h{
    width:100%;
    height:450px;
    margin:100px auto;
    padding-top:5px;
    border-radius:5px;
    background-image:url(photo9.jpg);
    background-size:cover;
    background-color:rgba(255, 255, 255, 0.7);
    background-blend-mode:lighten;
  }
  .concept-h h2{
    font-size:30px;
    text-align:center;
    background-color:rgb(165, 243, 182);
    margin:30px;
  }
  .concept-h-contain{
    font-size:15px;
 
    font-weight:bold;
    color:rgb(0, 0, 0);
    text-align:center;
    padding-left:30px;
    line-height:30px;
  }
  
  /*今月のお休みの設定*/
  .news-h{
    width:100%;
    height:400px;
    margin:50px auto;
  }
  .news-h h2{
    font-size:30px;
    text-align:center;
    background-color:rgb(165, 243, 182);
  }
  .news-h-contents{
    height:400px;
  }
  .calendar-contents{
    width:100%;
    margin:20px auto;
    padding:30px 0;
    color:black;
    background-color:white;
    border-radius:5px;
  }
  .calendar-contents h1{
    text-align:center;
    font-size: 30px;
    margin-bottom:20px;
    font-family:'Courier New', Courier, monospace;
  }
  .calendar-contents p{
    font-size:20px;
    color:red;
  }
  .calendar {
    padding:30px;
  }
  table {
    width: 100%;
    
  }
  th, td {
    display:inline-block;
    text-align:center;
    width:14%;
    font-size: 14px;
  }
  tr{
    height:30px;
  }
  .holiday{
    color:red;
  }


  /*index 終了*/
  
  
  /*esthetic-all 開始*/
  .frame-e{
    height:2500px;
  }
  .menus-e{
    width:100%;
    float:left;
  }
  .menus-e h1{
    text-align:center;
    font-size:45px;
    background-color:rgba(255, 184, 102, 0.842);
    font-weight:normal;
  }  
  .menu-e{
    margin:0 100px;
    float:left;
    width:100%;
  }
  .menu-e p{
    line-height:30px;
  }
  .menu-e-left{
    float:left;
    text-align:left;
    border-bottom:1px solid rgb(189, 182, 182);
    width:40%;
    margin-right:20px;
  }
  .menu-e-right{
    width:40%;
    float:left;
    text-align:left;
  }    
  .add-inf-e{
    color:rgb(255, 130, 47);
  }
  .informations-e{
    margin:0 auto;
    width:60%;
    text-align:left;
  }
  .inf-tittle-e{
    text-align:left;
  }  
  .value-e{
    border-bottom:1px solid rgb(189, 182, 182);
  }
    /*esthetic-all 終了*/
  
  
  /*appointment-all 開始*/
  .frame-a{
    height:3100px;
  }
  .menus-a{
    width:100%;
    float:left;
  }
  .menus-a p{
    margin:5px 0; 
  }
  .menus-a h1{
    text-align:center;
    font-size:45px;
    background-color:rgba(255, 184, 102, 0.842);
    font-weight:normal;
  }
  .menus-a h5{
    font-size:10px;
    font-family:'Courier New', Courier, monospace;
  }
  .menu-a{
    margin:0 100px;
    float:left;
    width:100%;
  }
  .menu-a-left{
    float:left;
    text-align:left;
    border-bottom:1px solid rgb(189, 182, 182);
    width:40%;
    margin-right:20px;
  }
  .menu-a-right{
    width:40%;
    float:left;
    text-align:left;
  }
  .add-inf-a{
    font-size:14px;
    color:rgb(255, 130, 47); 
  }
  .value-a{
    border-bottom:1px solid rgb(189, 182, 182);
  }
  /*appointment-all 終了*/
  
  

  /*guide-all　開始*/
  
  .frame-g{
    height:5100px;
  }
  
  /*メニューの設定*/
  .menus-g{
    height:400px;
    width:100%;
    margin:0 auto;
    text-align:left;
  }
  .menus-g h1{
    font-size:45px;
    background-color:rgba(255, 184, 102, 0.842);
    font-weight:normal;
    text-align:center;
  }
  .menu-g{
    width:100%;
    height:400px; 
  }
  .menu-g a{
    display:block;
    padding-bottom:20px;
    font-size:15px;
    color:rgb(0, 255, 98);
  }
  .menu-g-left{
    float:left;
  }
  .menu-g-right{
    float:right;
  }
  .menu-g img{
    width:240px;
    height:180px;
  }
  /*スタッフ紹介の設定*/
  .staffs-g{
    width:100%;
    margin:0 auto;
  }
  .staffs-g h1{
    font-size:45px;
    background-color:rgba(255, 184, 102, 0.842);
    font-weight:normal;
    text-align:center;
  }
  .staff-g{
    height:300px;
  }
  .staff-g-left{
    float:left;
  }
  .man-g{
    margin:50px 0 0 50px;
  }
  .woman-g{
    margin:10px 0 0 30px;
  }
  .staff-g-right{
    width:70%;
    float:right;
    text-align:left;
    margin-top:50px;
    line-height:20px;
  }
  .staff-g p{
    text-align:left;
    font-size:10px;   
  }
  /*アクセス方法の設定*/
  .access-g h1{
    font-size:45px;
    background-color:rgb(255, 184, 102);
    font-weight:normal;
    text-align:center;
    }
  .access-g{
    width:100%;
    margin:0 auto;
    height:600px;
    background-color:rgba(255, 255, 255, 0.5);
    background-blend-mode:lighten;
    background-image:url(photo10.jpg);
    background-size:cover;
    
  }
  .access-g-left{
    float:left;
    width:55%;
    margin:30px;
  }
  .access-g-right{
     margin-top:100px;
  }
  .access-g p{
    font-size:15px;
    text-align:left;
    color:rgb(0, 0, 0);
    line-height:40px;
  }
  iframe{
    width: 400px;
    height:350px;
  }
  
  /*お得情報の設定*/
  .discounts-g{
    width:100%;
    margin:0 auto;
  }
  .discounts-g h1{
    font-size:45px;
    background-color:rgba(255, 184, 102, 0.842);
    font-weight:normal;
    text-align:center;
    }
  /*ファミリー割引の設定*/
  .discount1-g{
    height:350px;
    margin-bottom:50px;
    border-bottom:1px solid rgb(161, 160, 160);
  }
  .discount-g-left1{
    float:left;
    width:40%;
  }
  .discount-g-right1{
    float:right;
    margin-right:100px;
  }
  .discount-g-left1 h2{
    color:rgb(255, 255, 255);
    font-size:30px;
    text-align:center;
    margin:50px 0;
    background-color:rgb(83, 211, 228);
  }
  .discount-g-left1 p{
    text-align:center;
    margin-left:30px;
    color:rgb(0, 119, 255);
    line-height:40px;
  }
  .discount-g-right1 p{
    border-bottom:1px solid rgb(160, 155, 155);
    font-size:20px;
    margin:30px 0;
  }
  .discount-g-right1 img{
    width:300px;
    height:250px;
  }
  /*季節のコースの設定*/
  .discount2-g{
    height:450px;
    margin-bottom:50px;
    border-bottom:1px solid rgb(161, 160, 160);
    }
  .discount-g-left2{
    float:left;
    width:40%;
  }
  .discount-g-right2{
    float:right;
    margin-right:100px;
  }
  .discount-g-left2 h2{
    color:white;
    font-size:25px;
    text-align:center;
    margin:30px 0;
    background-color:rgb(83, 211, 228);
  }
  .discount-g-left2 p{
  text-align:left;
  margin-left:30px;
  color:rgb(0, 119, 255);
  line-height:50px;
  }
  .discount-g-right2 p{
  margin:30px 0;
  border-bottom:1px solid rgb(160, 155, 155);
  }
  .discount-g-right2 h2{
    margin-top:20px;
    font-size:25px;
  }
  /*ヘッドスパの設定*/
  .discount3-g{
    height:500px;
    margin-bottom:50px;
    border-bottom:1px solid rgb(161, 160, 160);
  }
  .discount-g-left3{
    float:left;
    width:45%;
  }
  .discount-g-right3{
    float:right;
    width:40%;
   
  }
  .discount-g-left3 h2{
    color:white;
    font-size:25px;
    background-color:rgb(83, 211, 228);
    text-align:center;
    margin-bottom:30px;
  }
  .discount-g-left3 p{
    font-size:15px;
    text-align:left;
    color:rgb(0, 119, 255);
    line-height:40px;
  }
  .courseMenuAdd-g{
    font-size:20px;
    color:rgb(226, 55, 43);
    line-height:40px;
  }
  .courseMenu-g{
    margin:30px auto;
    border-bottom:1px solid rgb(160, 155, 155);
  }
  .discount-g-right3 h2{
    margin-top:200px;
    font-size:25px;
  }
  /*ナチュラの日の設定*/
  .discount4-g{
    height:500px;
    margin-bottom:50px;
    border-bottom:1px solid rgb(161, 160, 160);
    }
  .discount-g-left4{
    float:left;
    width:45%;
  }
  .discount-g-right4{
    float:left;
  }
  .discount-g-left4 h2{
    color:white;
    font-size:20px;
    background-color:rgb(83, 211, 228);
    text-align:center;
    margin-bottom:30px;
  }
  .discount-g-left4 p{
    text-align:left;
    font-size:20px;
    line-height:40px;
  }
  .discount-g-right4 p{
    text-align:center;
    font-size:20px;
    line-height:40px;
  }
  .discount-g-right4 span{
    color:red;
  }
  /*次回予約割引の設定*/
  .discount5-g{
    height:500px;
    margin-bottom:50px;
    border-bottom:1px solid rgb(161, 160, 160);
    }
  .discount-g-left5{
  float:left;
  width:50%;
  }
  .discount-g-right5{
    float:left;
  }
  .discount-g-left5 h2{
    color:white;
    font-size:25px;
    background-color:rgb(83, 211, 228);
    text-align:center;
    margin-bottom:30px;
  }
  .discount-g-left5 p{
  font-size:20px;
  line-height:50px
  }
  .discount-g-left5 span{
  color:red;
  }
  
  /*guide-all　終了*/
  
  /*bridal-all　開始*/
  
  .frame-b{
  height:2100px;
  }
  .menus-b{
    width:100%;
    float:left;
  }
  .menus-b h1{
    text-align:center;
    font-size:40px;
    background-color:rgba(255, 184, 102, 0.842);
    font-weight:normal;
  }
  .menu-b{
    margin:0 100px;
    border-bottom:1px solid rgb(189, 182, 182);
    float:left;
    width:80%;
    line-height:40px;

  }
  .menu-b-left{
      width:45%;
      float:left;
      text-align:left;   
      margin-right:20px;
  }
  
  .menu-b-right{
      width:45%;
      float:left;
      text-align:left;
  }
  .add-inf-b{
      color:rgb(255, 130, 47);
  }
  .value-b{
      border-bottom:1px solid black;
  }
  /*bridal-all　終了*/