@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;
  }
/*ヘッダーここまで*/

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

     .header2{ 
      font-family: serif;
      text-align: center;
     }
     .header2 img{
      max-width: 100%;
      height: 55%;
      margin-top: 25px;
      margin-bottom: 25px;
     }
     .main{
     background-image: url(../img/haikei.png); /* 背景の場所を指定する */
     background-size: cover;                 /* 繰り返し表示を防ぐ */
     width: 100%;                         /* 幅と高さを指定する */
     height: 800px;
     margin-top: 5%;
     }
      .main h2{
      color: black;
      padding-top: 190px;
      text-align: center;
      font-size: 45px;
     }
      .main1{
      margin-top: 100px;
      margin-left: 80px;
      margin-right: 100px;
      font-size: 17px;
      display: flex;
     }
     .main1-1 {
       width: 40%;
     }
     .main1-1 img{
       max-width: 100%;
       margin-top: 5%;
     }
     .main1-2{
       width: 60%;
       margin-left: 70px;
     }
     .main1-2 p{
      line-height: 35px;
      letter-spacing: 0.25em;
    }
     .main1-2 span{
       font-size: 22px;
     }
     .main2{
      margin-top: 50px;
      margin-left: 100px;
      margin-right: 100px;
      font-size: 17px;
      display: flex;
     }
     .main2-1 {
       width: 40%;
     }
     .main2-1 img{
       max-width: 100%;
       margin-top: 10%;
     }
     .main2-2{
       width: 60%;
       margin-top: 3%;
       margin-left: 70px;
     }
     .main2-2 p{
      line-height: 35px;
      letter-spacing: 0.25em;
    }
     .main2-2 span{
       font-size: 22px;
     }
     .main3{
      margin-top: 50px;
      margin-left: 100px;
      margin-right: 100px;
      padding-bottom: 15%;
      font-size: 17px;
      display: flex;
     }
     .main3-1 {
       width: 40%;
     }
     .main3-1 img{
       width: 100%;
       margin-top: 20%;
     }
     .main3-2{
       width: 60%;
       margin-top: 3%;
       margin-left: 70px;
     }
     .main3-2 p{
       line-height: 35px;
       letter-spacing: 0.25em;
     }
     .main3-2 span{
       font-size: 22px;
     }
     
     .main4{
       display: none;
     }
     .main5{
      display: none;
    }
    .main5-1{
      display: none;
    }
    .main6{
      display: none;
    }
/***追従するトップへ戻るボタン***/
#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;
}
/***トップへ戻るボタンここまで***/
  
  }



/* ここから、タブレットレスポンシブ*/  
@media (min-width:601px) and (max-width:999px) {
    body{
        min-width: 601px;
        max-width: 999px;
        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: 50%;
    margin-left: 20%;
    }
   .header-list{
     display: none;
   }       
/*共通ここまで*/    
         .main{
         background-image: url(../img/haikei2.jpg); /* 背景の場所を指定する */
         max-width: 100%;                         /* 幅と高さを指定する */
         background-size: cover;
         margin-top: 5%;
         }
          .main h2{
          color: black;
          font-size: 22px;
          padding-top: 100px;
          padding-bottom: 130px;
          padding-left: 15%;
          
         }
          .main4{
          margin-top: 7%;
          margin-bottom: 7%;
          font-size: 16px;
          margin-left: 10%;
          margin-right: 10%;
         }
         .main4 img{
           max-width: 100%;
           margin-top: 7%;
           margin-bottom: 3%;
         }
         .main5{
          font-size: 16px;
          margin-left: 10%;
          margin-right: 10%;
         }
         .main5 img{
           max-width: 100%;
           margin-top: 10%;
           margin-bottom: 10%;
         }
         .main5-1{
          font-size: 16px;
          margin-left: 10%;
          margin-right: 10%;
         }
         .main5-1 img{
           max-width: 100%;
           margin-top: 10%;
           margin-bottom: 10%;
         }         
         .main6{
          font-size: 16px;
          margin-left: 10%;
          margin-right: 10%;
          padding-bottom: 15%;
         }
         .main6 img{
           max-width: 100%;
           margin-top: 5%;
           margin-bottom: 3%;
         }
         p{
          line-height: 35px; 
          letter-spacing: 0.12em;
         }
         
         .main1{
           display: none;
         }
         .main2{
          display: none;
         }
         .main3{
          display: none;
         }
         .a{
          text-decoration: none;
          color: white;
         }
         .main4 span{
           font-size: 20px;
         }
         .main5 span{
          font-size: 20px;
        }
        .main6 span{
          font-size: 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;
}
/***トップへ戻るボタンここまで***/
              
      }

      



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


@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;
   }       
/*共通ここまで*/
     
         .header-list ul{
          margin-top: 90px;
         }
         .header-list li{
          display: inline;
          text-transform: uppercase;
          text-transform: capitalize;
          font-family: serif;
          margin: 15px;
         }
         .header-list{
          display: none;
          margin-top: 20px;
          }
         .header-list a{
          color: white;
          text-decoration: none;
          margin-top: 75px;
          }
         .menu li img{
          height: 100%;
          margin-top: 230px;
         }
         .main{
         background-image: url(../img/haikei3.png); /* 背景の場所を指定する */
         max-width: 100%;                         /* 幅と高さを指定する */
         background-repeat: no-repeat;
         margin-top: 5%;
         }
          .main h2{
          color: black;
          font-size: 22px;
          padding-top: 75px;
          padding-bottom: 80px;
          padding-left: 30px;
         }
          .main4{
          margin-top: 50px;
          font-size: 16px;
          margin-left: 10%;
          margin-right: 10%;
         }
         .main4 img{
           max-width: 100%;
           margin-top: 5%;
           margin-bottom: 3%;
         }
         .main5{
          font-size: 16px;
          margin-left: 10%;
          margin-right: 10%;
         }
         .main5 img{
           max-width: 100%;
           margin-top: 5%;
           margin-bottom: 3%;
         }
         .main5-1{
          font-size: 16px;
          margin-left: 10%;
          margin-right: 10%;
         }
         .main5-1 img{
           max-width: 100%;
           margin-top: 5%;
           margin-bottom: 3%;
         } 
         p{
          line-height: 35px; 
          letter-spacing: 0.12em;
         }
         .main6{
          font-size: 16px;
          margin-left: 10%;
          margin-right: 10%;
          padding-bottom: 20%;
         }
         .main6 img{
           max-width: 100%;
           margin-top: 5%;
           margin-bottom: 3%;
         }
         .main1{
           display: none;
         }
         .main2{
          display: none;
        }
        .main3{
          display: none;
        }
         .a{
          text-decoration: none;
          color: white;
         }
         .main4 span{
           font-size: 20px;
         }
         .main5 span{
          font-size: 20px;
        }
        .main6 span{
          font-size: 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;
}
/***トップへ戻るボタンここまで***/

      }

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