@charset "UTF-8";


/* ここから、PCレスポンシブ */ 
@media (min-width: 1000px) {
  body{
      min-width: 1000px;
      margin: 0 auto;
  }
/*共通*/
       .container{
        width: 100%;
        background-color: black;
        color: white;
        font-family: serif;
       }
       .a{
        text-decoration: none;
        color: white;
        }   
/*共通ここまで*/
        
/*ヘッダー*/
       
       .header-logo img{
       margin-top: 60px;   
       margin-left: 40%;
       max-width: 270px;
       }  
       .header-list{
       display: flex;
       margin-top: 1%;
       margin-left: 7%;
       }
       .header-list ul{
        margin-top: 5%;
        margin-bottom: 5%;
       } 
       .header-list li{
        display: inline;
        font-family: serif;
        color: white;
        margin: 20px;
        }
       .header-list a{
        color: white;
        text-decoration: none;
        }
      .header1{
        display: none;
      }
/*ヘッダーここまで*/

/*ハンバーガーのメニュー非表示*/
       .menu{
        display: none;
       }
/*ハンバーガーのメニュー非表示 ここまで*/



.header2 p{
  margin-top: -6%;
  text-align: left;
  margin-left: 12%;
  font-size: 1.5em;
  letter-spacing: 0.1em;
  padding-bottom: 7%;
}


       h1{
       font-size: 40px;
       }
       h2{
       font-size: 25px;
       }
       .main{
       display: flex;
       margin-bottom: 70px;
       margin-right: 7%;
       }
    
     .main1{
      width: 50%;
     }
     .main1 img{
      max-width: 80%;
      margin-left: 30%;
      margin-top: 17%;
     }
     .main2{
      width: 50%;
      margin-top: 7%;
      margin-left: 13%;
      font-size: 17px;
     }
     .main2 span{
       font-size: 22px;
     }
     .main2-1{
         display: none;
     }
     .header2{ 
      font-family: serif;
     }
     .header2 h1,h2{
      text-align: center;
      margin-bottom: 50px;
     }
     .header2 p{
      margin-left: 450px;
     }
     .header2 img{
      max-width: 100%;
      height: 55%;
      margin-top: 25px;
      margin-bottom: 25px;
     }
     .info{
    display: flex;
    justify-content: center;
    gap: 80px;
     }
     .info p{
      font-size: 17px;
     }
     .info1{
       margin-top: 5%;
     }
     .info1 img{
      max-width: 100%;
      margin-left: 45%;
     }
     .info2{
      margin-left: 200px;
      margin-top: 4%;
     }
     .info2-1{
       display: none;
     }
     .map{
      width: 50%;
      margin: 3% 25% 1% 25%;
      text-align: center;
    } 
    .map a{
      text-decoration: none;
      color: #FFFFFF;
    }  
     .tel1 img{
      max-width: 40%;
     }
     .tel{
      display: flex;
      justify-content: center;
      margin-top: 5%;
     }
     .footer{
       text-align: center;
       margin-top: 7%;
       padding-bottom: 10%;
     }
     /* Loading画像中央配置　*/
     #splash_logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
     }
      #splash {
      /*fixedで全面に固定*/
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 999;
      background:#333;
      text-align:center;
      color:#fff;
     } 
     .info1 img{
      max-width: 120px;
      margin-top: 50px;
     }
     .tel1{
      margin-left: 150px;
     }
/***追従するトップへ戻るボタン***/
#page-top {
  position: fixed;
  right: 5px;
  bottom: 20px;
  height: 50px;
  text-decoration: none;
  font-weight: bold;
  transform: rotate(90deg);
  font-size: 90%;
  line-height: 1.5rem;
  color: #FFFFFF;
  padding: 0 0 0 35px;
  border-top: solid 1px;
}
#page-top::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0px;
  width: 15px;
  border-top: solid 1px;
  transform: rotate(35deg);
  transform-origin: left top;
}
.footer a{
  text-decoration: none;
  color: #FFFFFF;
}
/***トップへ戻るボタンここまで***/

  }
/* ここまで、PC*/ 


/* ここから、タブレットレスポンシブ*/  
@media (min-width:601px) and (max-width:999px) {
  body{
      min-width: 601px;
      max-width: 999px;
   }
/*共通*/ 
.container{
  width: 100%;
  background-color: black;
  color: white;
  font-family: serif;
 }
.a{
   text-decoration: none;
   color: white;
  }
  .menu li img{
   height: 100%;
   margin-top: 200px;
   }
   .header-logo img{ 
    max-width: 50%;
    margin-left: 20%;
    }
   .header-list{
     display: none;
   }       
/*共通ここまで*/



.header2 p{
  margin-bottom: 5%;
  margin-top: 2%;
  padding-bottom: 1%;
  text-align: left;
  padding-left: 25%;
  font-size: 1em;
  letter-spacing: 0.1em;
}

    h1{
      text-align: center;
      margin-top: 50px;
      margin-bottom: 15px;
      letter-spacing: 0.2em;
    }
    h2{
      font-size: 22px;
      letter-spacing: 0.2em;
    }
    .main{
    margin-bottom: 30px;
    }
    .main{
      margin-bottom: 70px;
     }
     .main1{
      margin-top: 5%;
     }
     .main1 img{
      max-width: 100%;
      object-fit: cover;
      margin-top: 10%;
      margin-bottom: 10%;
     }
     .main2{
       display: none;
     }
     .main2-1{
       max-width: 50%;
       margin-left: 33%;
       margin-right: 17%;
       font-size: 17px;
     }
     .main2-1 p{
      line-height: 35px;
      letter-spacing: 0.12em;
     }
    span{
      font-size: 1.5em;
    }
    .header2{ 
    font-family: serif;
    }
    .header h1{
     text-align: center;
     font-size: 25px;
     margin-bottom: 20px;
    }
    .header2 h2{
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
    }
     .header2 img{
     max-width: 100%;
     margin-top: 25px;
    margin-bottom: 25px;
    }
    .info{
     display: flex;
     justify-content: center;
     margin-top: 15%;
     gap: 50px;
     }
    .info1{
      width: 50%;
    }
    .info1 img{
      max-width: 50%;
      margin-top: 50px;
      margin-left: 30%;
     }
   .info2{
     width: 50%;
     margin-right: 5%;
   }
   .info2 h3{
     margin-left: 30px;
     margin-right: 30px;
     font-size: 17px;
   }
   .info2 p{
     padding-left: 17px;
     padding-right: 15px;
     line-height: 35px;
   }
   .info2-1{
    display: none;
  } 
  .map{
    width: 50%;
    margin: 3% 20% 10% 25%;
    text-align: center; 
  } 
   a.map1 {
    text-decoration: none;
    color:#FFFFFF
   }
     .tel1 img{
     max-width: 90%;
     }
     .tel1{
      margin-left: 20%;
      margin-right: 20%;
     }
     .footer{
      padding-top: 10%;
      padding-bottom: 15%;
       text-align: center;
     }
     /*========= レイアウトのためのCSS ===============*/

     #container{
      width:100%;
      height: 100vh;
      background: #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      } 
      a{
       color: #333;
      }
  a:hover{
  text-decoration: none;   
  }
 /* Loading画像中央配置　*/
 #splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }
  #splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#333;
  text-align:center;
  color:#fff;
 } 
  .menu-btn{
   position: fixed;
   top: 20px;
   right: 20px;
   z-index: 2;
   width: 40px;
   height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #333;
   color: #fff;
  }
  * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 ::before , ::after {
   box-sizing: inherit;
 }
 button {
   margin: 0;
   padding: 0;
   outline: 0;
   border: 0;
   border-radius: 0;
   background: transparent;
   color: inherit;
   vertical-align: middle;
   text-align: inherit;
   font: inherit;
   -webkit-appearance: none;
   appearance: none;
 }
 /**************** 以下、ハンバーガーボタンのスタイリング ****************/
 .btn {
   /* ボタンの配置位置  */
   position: absolute;
   top: 32px;
   right: 16px;
   /* 最前面に */
   z-index: 10;
   /* ボタンの大きさ  */
   width: 48px;
   height: 48px;
 }
 /***** 真ん中のバーガー線 *****/
 .btn-line {
   display: block;
   /* バーガー線の位置基準として設定 */
   position: relative;
   /* 線の長さと高さ */
   width: 100%;
   height: 4px;
   /* バーガー線の色 */
   background-color: #d6d5d5;
   transition: .2s;
 }
 /***** 上下のバーガー線 *****/
 .btn-line::before , .btn-line::after {
   content: "";
   /* 基準線と同じ大きさと色 */
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: #d6d5d5;
   transition: .5s;
 }
 .btn-line::before {
   /* 上の線の位置 */
   transform: translateY(-16px);
 }
 .btn-line::after {
   /* 下の線の位置 */
   transform: translateY(16px);
 }
 /***** メニューオープン時 *****/
 .btn-line.open {
   /* 真ん中の線を透明に */
   background-color: transparent;
 }
 .btn-line.open::before , .btn-line.open::after {
   content: "";
   background-color: #333;
   transition: .2s;
 }
 .btn-line.open::before {
   /* 上の線を傾ける */
   transform: rotate(45deg);
 }
 .btn-line.open::after {
   /* 上の線を傾ける */
   transform: rotate(-45deg);
 }
 /**************** ここまで、ハンバーガーボタンのスタイリング ****************/
 /**************** 以下、メニューのスタイリング ****************/
 .menu {
   /* メニューを縦に */
   display: flex;
   flex-direction: column;
   position: fixed;
   /* メニューの位置マイナス指定で画面外に */
   right: -100%;
   width: 100%;
   height: 100vh;
   background-color: gray;
   color: #efefef;
   transition: all 0.5s;
 }
 .menu-list {
   /* メニューテキスト位置をリスト内中心に */
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 50%;
 }
   a{
   text-decoration: none;
   color: white;
 }
 .menu-list:hover {
   background-color: rgba(255, 255, 255, .5);
   color: #333;
   cursor: pointer;
   transition: .3s;
 }
 /***** メニューオープン時位置0にして画面内に *****/
 .menu.open {
   position: absolute;
   right: 0;
 }
/***追従するトップへ戻るボタン***/
#page-top {
  position: fixed;
  right: 5px;
  bottom: 20px;
  height: 50px;
  text-decoration: none;
  font-weight: bold;
  transform: rotate(90deg);
  font-size: 90%;
  line-height: 1.5rem;
  color: #FFFFFF;
  padding: 0 0 0 35px;
  border-top: solid 1px;
}
#page-top::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0px;
  width: 15px;
  border-top: solid 1px;
  transform: rotate(35deg);
  transform-origin: left top;
}
.footer a{
  text-decoration: none;
  color: #FFFFFF;
}
/***トップへ戻るボタンここまで***/

}
/* タブレットレスポンシブ　ここまで */


/* ここから、スマホレスポンシブ */


@media (max-width:600px) {
  body{
      max-width: 600px;
      margin: 0 auto;
  }
/*共通*/ 
      .container{
       width: 100%;
       background-color: black;
       color: white;
       font-family: serif;
      }
     .a{
        text-decoration: none;
        color: white;
       }
       .menu li img{
        height: 100%;
        margin-top: 200px;
        }
        .header-logo img{ 
         max-width: 80%;
         }
        .header-list{
          display: none;
        }       
/*共通ここまで*/
       h1{
         text-align: center;
         margin-top: 15%;
       }
       h2{
         padding-bottom: 5%;
       }
       .main{
       margin-bottom: 30px;
       }
       .main1 img{
       max-width: 100%;
       margin-top: 20px;
       margin-bottom: 30px;
       }
       .main2{
         display: none;
       }
       .main2-1{
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 35px;
        margin-right: 20px 
       }
       .main2-1 p{
           font-size: 16px;
           text-align: center;
           padding-left: 15px;
           padding-right: 15px;
           line-height: 35px;
       }
       .main2-1 span{
         font-size: 20px;
       }


.header2 p{
  margin-bottom: 5%;
  margin-top: 2%;
  margin-right: 10%;
  padding-bottom: 2%;
  text-align: left;
  margin-left: 12%;
  font-size: 0.9em;
  letter-spacing: 0.1em;
}




/* ここからメイン画面*/
       .header2{ 
       font-family: serif;
       }
       .header h1{
        text-align: center;
        font-size: 25px;
        margin-bottom: 20px;
       }
       .header2 h2{
       text-align: center;
       font-size: 18px;
       margin-bottom: 20px;
       }
        .header2 img{
        max-width: 100%;
        margin-top: 25px;
       margin-bottom: 25px;
       }
       .info{
        display: flex;
        justify-content: center;
        margin-top: 70px;
        }
        .info p{
         font-size: 15px;
         }
         .info1 img{
         max-width: 100%;
         margin-top: 50px;
         margin-left: 30px;
        }
      .info2{
        display: none;
      }
      .info2-1 h3{
        margin-left: 30px;
        margin-right: 30px;
        font-size: 17px;
      }
      .info2-1-1 p{
        padding-left: 20px;
        padding-right: 20px;
        line-height: 35px;
      }
      .info2-1-2 p{
        padding-left: 17px;
        padding-right: 15px;
        line-height: 35px;
      }
      .map{
        max-width: 50%;
        margin: 10% 25% 10%  25%;
        text-align: center;
      }
      a.map1 {
        text-decoration: none;
        color:#FFFFFF
      }
      .tel{
       margin-top: 5%;
      }
        .tel1 img{
        max-width: 90%;
        padding-left: 10%;
        padding-right: 10%;
        }
        .tel1{
         padding-left: 50px;
         padding-right: 50px;
         
        }
        .footer{
          margin-top: 10%;
          padding-bottom: 50px;
        }
        /*========= レイアウトのためのCSS ===============*/

        #container{
         width:100%;
         height: 100vh;
         background: #ccc;
         display: flex;
         justify-content: center;
         align-items: center;
         text-align: center;
         } 
         a{
          color: #333;
         }
     a:hover{
     text-decoration: none;   
     }
      /* Loading画像中央配置　*/
      #splash_logo {
      position: relative;
      margin-top: 50px;
      top: 5%;
      transform: translate(-5%, -5%);
      }
    
     #splash {
       /*fixedで全面に固定*/
         position: fixed;
         max-width: 500px;
         height: 800px;
         margin-bottom: 50px;
         z-index: 999;
         background:#333;
          text-align:center;
         color:#fff;
       } 
        .info1 img{
        max-width: 120px;
        margin-top: 50px;
        }
     .footer{
       text-align: center;
     }
     .a{
      text-decoration: none;
      color: white;
      }
     .gnavi{
      display: flex;
      flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
      margin:0 auto;
      list-style: none;
     }
     .gnavi li a{
       display: block;
       text-decoration: none;
       color: #fff;
     }
     .gnavi li{
       margin-bottom:20px;
     }
     .menu-btn{
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 2;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #333;
      color: #fff;
     }
     * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    ::before , ::after {
      box-sizing: inherit;
    }
    button {
      margin: 0;
      padding: 0;
      outline: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: inherit;
      vertical-align: middle;
      text-align: inherit;
      font: inherit;
      -webkit-appearance: none;
      appearance: none;
    }
    /**************** 以下、ハンバーガーボタンのスタイリング ****************/
    .btn {
      /* ボタンの配置位置  */
      position: absolute;
      top: 32px;
      right: 16px;
      /* 最前面に */
      z-index: 10;
      /* ボタンの大きさ  */
      width: 48px;
      height: 48px;
    }
    /***** 真ん中のバーガー線 *****/
    .btn-line {
      display: block;
      /* バーガー線の位置基準として設定 */
      position: relative;
      /* 線の長さと高さ */
      width: 100%;
      height: 4px;
      /* バーガー線の色 */
      background-color: #d6d5d5;
      transition: .2s;
    }
    /***** 上下のバーガー線 *****/
    .btn-line::before , .btn-line::after {
      content: "";
      /* 基準線と同じ大きさと色 */
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #d6d5d5;
      transition: .5s;
    }
    .btn-line::before {
      /* 上の線の位置 */
      transform: translateY(-16px);
    }
    .btn-line::after {
      /* 下の線の位置 */
      transform: translateY(16px);
    }
    /***** メニューオープン時 *****/
    .btn-line.open {
      /* 真ん中の線を透明に */
      background-color: transparent;
    }
    .btn-line.open::before , .btn-line.open::after {
      content: "";
      background-color: #333;
      transition: .2s;
    }
    .btn-line.open::before {
      /* 上の線を傾ける */
      transform: rotate(45deg);
    }
    .btn-line.open::after {
      /* 上の線を傾ける */
      transform: rotate(-45deg);
    }
    /**************** ここまで、ハンバーガーボタンのスタイリング ****************/
    /**************** 以下、メニューのスタイリング ****************/
    .menu {
      /* メニューを縦に */
      display: flex;
      flex-direction: column;
      position: fixed;
      /* メニューの位置マイナス指定で画面外に */
      right: -100%;
      width: 100%;
      height: 100vh;
      background-color: gray;
      color: #efefef;
      transition: all 0.5s;
    }
    .menu-list {
      /* メニューテキスト位置をリスト内中心に */
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
    }
/*メニューリストのタグとカラー*/
      a{
      text-decoration: none;
      color: white;
    }
/*メニューリストのタグとカラー ここまで*/

    .menu-list:hover {
      background-color: rgba(255, 255, 255, .5);
      color: #333;
      cursor: pointer;
      transition: .3s;
    }
    /***** メニューオープン時位置0にして画面内に *****/
    .menu.open {
      position: absolute;
      right: 0;
    }
  /***追従するトップへ戻るボタン***/
#page-top {
  position: fixed;
  right: 5px;
  bottom: 20px;
  height: 50px;
  text-decoration: none;
  font-weight: bold;
  transform: rotate(90deg);
  font-size: 90%;
  line-height: 1.5rem;
  color: #FFFFFF;
  padding: 0 0 0 35px;
  border-top: solid 1px;
}
#page-top::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0px;
  width: 15px;
  border-top: solid 1px;
  transform: rotate(35deg);
  transform-origin: left top;
}
.footer a{
  text-decoration: none;
  color: #FFFFFF;
}
/***トップへ戻るボタンここまで***/
  
  }

    /* 1000px以上はハンバーガーボタン非表示、ヘッダー固定 */
    @media screen and (min-width: 1000px) {
      .btn {
        display: none;
      }
      .menu {
        display: none;
      }
    }
    /**************** ここまで、メニューのスタイリング ****************/