@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;
 }
/*ハンバーガーのメニュー非表示 ここまで*/

 h3{
      font-size: 30px;
      margin-top: 10%;
      margin-bottom: 10%;
     }
      .main {
      background-image: url(../img/haikei.png); /* 背景の場所を指定する */
      background-size: cover;                 /* 繰り返し表示を防ぐ */
      width: 100%;                         /* 幅と高さを指定する */
      height: 770px;
      margin-top: 5%;
      }
     .main h2{
     color: black;
     text-align: center;
     padding-top: 220px;
     font-size: 45px; 
    
     }
    .main1{
      display: flex;
      gap: 4%;
      margin-top: 15%;
      margin-left: 15%;
    }
    .main2{
      display: flex;
      gap: 4%;
      margin-top: 7%;
      margin-left: 15%;
    } 
    .main2-2{
      margin-top: 5%;
      margin-bottom: 5%;
    }   
    .main3{
      display: flex;
      gap: 4%;
      margin-left: 15%;
    } 
    .main3-2{
      margin-top: 5%;
    }       
    .osirase{
      padding-left: 25%;
      padding-right: 25%;
      padding-bottom: 5%;
      text-align: center;
    }
    .osirase a{
      text-decoration: none;
      color: #FFFFFF;
    }
    .osirase p{
      font-size: 1em;
    }
    .osirase1{
      padding-left: 25%;
      padding-right: 25%;
      padding-bottom: 3%;
    }
    .osirase1 a{
      text-decoration: none;
      color: #FFFFFF;
    }
    .osirase1 p{
      font-size: 1em;
    }  
    .footer{
      padding-bottom: 5%;
    }  
 /***追従するトップへ戻るボタン***/
 #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;
}
/***トップへ戻るボタンここまで***/
      
}
/* ここまで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;
   }       
/*共通ここまで*/  
  
       h3{
        margin-top: 5%;
        margin-bottom: 5%;
        font-size: 35px;
        }
       .menu li img{
        height: 100%;
        margin-top: 200px;
        }
  
        .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/haikeikome.png); /* 背景の場所を指定する */
        background-size: cover;                 /* 繰り返し表示を防ぐ */
        width: 100%;                         /* 幅と高さを指定する */
        margin-top: 5%;
        margin-bottom: 5%;  
      }       
        h2{
          font-size: 2em;
          color: black;
          padding-top: 10%;
          padding-bottom: 10%;
          text-align: center;
         letter-spacing: 0.3em;
        }
        .main1{
       display: flex;
       gap: 4%;
       margin-top: 100px;
       }
       .main1-1{
       width: 50%;
        }
      .main1-1 img{
        max-width: 100%;
        margin-top: 30%;
        padding-left: 5%;
        padding-right: 5%;
      }
        .main1-1 p{
       font-size: 1em;
       padding-left: 5%;
       padding-right: 5%;
        }
      .main1-2{
        width: 50%;
        margin-top: 5%;
        margin-right: 5%;
      }
       .main1-2 img{
        max-width: 100%;
        padding-left: 5%;
        padding-right: 5%;
       }
       .main1-2 p{
       font-size: 1em;
       line-height: 30px;
       }
      
      .h3{
        font-size: 35px;
      }

      .main2{
        display: flex;
        gap: 4%;
        margin-top: 15%;
      }
      .main2-1{
        width: 50%;
         }
       .main2-1 img{
         max-width: 100%;
         padding-left: 5%;
         padding-right: 5%;
       }
       .main2-2{
        width: 50%;
        margin-top: 3%;
        margin-right: 5%;
      } 
       .main2-2 p{
        font-size: 1em;
        line-height: 30px;
         }
         .main3{
          display: flex;
          gap: 4%;
          margin-top: 10%;
        }
        .main3-1{
          width: 50%;
           }
         .main3-1 img{
           max-width: 100%;
           padding-left: 5%;
           padding-right: 5%;
         }
         .main3-2{
          width: 50%;
          margin-right: 5%;
        } 
         .main3-2 p{
          font-size: 1em;
          line-height: 30px;
           }     
          .osirase1{
            margin-top: 7%;
            padding-left: 25%;
            padding-right: 25%;
            padding-bottom: 7%;
          }
          .osirase1 a{
            text-decoration: none;
            color: #FFFFFF;
          }
          .osirase1 p{
            font-size: 1em;
          }               
      .footer{
        padding-bottom: 5%;
      }
       .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;
     }
   }
   /**************** ここまで、メニューのスタイリング ****************/
   





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


@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;
   }       
/*共通ここまで*/

.main {
  background-image: url(../img/haikeikome.png); /* 背景の場所を指定する */
  background-size: cover;                 /* 繰り返し表示を防ぐ */
  width: 100%;                         /* 幅と高さを指定する */
  margin-top: 7%;
  margin-bottom: 10%;  
} 
h2{
  font-size: 2em;
  color: black;
  padding-top: 10%;
  padding-bottom: 10%;
  text-align: center;
 letter-spacing: 0.3em;
}

       h3{
        text-align: center;
        margin-top: 50px;
        margin-bottom: 50px;
        font-size: 35px;
        }
       .menu li img{
        height: 100%;
        margin-top: 200px;
        }
       
       .main1-1 img{
       max-width: 100%;
       margin-top: 10%;
        }
        .main1-2 p{
       font-size: 17px;
       padding-left: 10%;
       padding-right: 10%;
        }
       .main2-1{
         margin-top: 10%;
       }
       .main2-1 img{
        max-width: 100%;
       }
       .main2-2 p{
        font-size: 17px;
        padding-left: 10%;
        padding-right: 10%;
         }     
       .main3-1{
        margin-top: 10%;
      }
      .main3-1 img{
       max-width: 100%;
      } 
      .main3-2 p{
        font-size: 17px;
        padding-left: 10%;
        padding-right: 10%;
         }       
       .p{
       font-size: 17px;
       }
       .osirase1{
        margin-top: 15%;
        padding-left: 10%;
        padding-right: 10%;
        padding-bottom: 5%;
      }
      .osirase1 a{
        text-decoration: none;
        color: #FFFFFF;
      }
      .osirase1 p{
        font-size: 17px;
      }
      .footer{
        padding-bottom: 25%;
      }
        * {
       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;
     }
   }
   /**************** ここまで、メニューのスタイリング ****************/