@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{ 
      text-align: center;
      }
      .header2 img{
      max-width: 100%;
      height: 55%;
      margin-top: 25px;
      margin-bottom: 25px;
     }
      .line2 a{
      color: white;
      text-decoration: none;
       }
      .main img{
      margin-top: 10px;
      margin-left: 50px;
      width: 40%;
      }
      h1{
      text-align: center;
     }
      .header2{ 
      font-family: serif;
      text-align: center;
      }
     .header2 img{
      height: 590px;
      width: 100%;
      margin-top: 25px;
      margin-bottom: 25px;
     }
     .line2 a{
      color: white;
      text-decoration: none;
     }
      .main h2{
      text-align: center;
      margin-top: 70px;
      margin-bottom: 70px;
      font-size: 37px;
       }
      .main h3{
      text-align: center;
      border-top: solid 3px ;
      border-bottom: solid 3px ;
      font-size: 25px;
      padding-top: 15px;
      padding-bottom: 15px;
      }
     .main{
       margin-left: 200px;
       margin-right: 200px;
      }
     .main p{
      font-size: 17px;
      }

/*ボタン1*/
a.btn_01 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #f3f3fa;
  color:#f3f3fa;
	transition: 0.5s;
}
a.btn_01:hover {
	color: #333;
	background: #fdd35c;
}

/*ボタン1ここまで*/

     .rajio{
      display: flex;
      justify-content: space-around;
      margin-top: 50px;
      margin-bottom: 50px;
      }
     .rajio1 img{
        width: 350px;
        margin-left: 48px;
        }
     .rajio2{
       margin-top: 150px;
       margin-left: 115px;
     }
     .rajio2-1{
       display: none;
     }
     .osake{
      display: flex;
      justify-content: space-around;
      margin-top: 50px;
      margin-bottom: 50px;
     }
     .osake img {
      width: 350px;
      margin-left: 40px;
     }
     .osake2{
      margin-top: 150px;
      margin-left: 110px;
      }
      .osake2-1{
        display: none;
      }
      .sinbun{
        margin-top: 50px;
        padding-bottom: 100px;
      }
      .sinbun p{
      text-align: center;
     }
     .sinbun1{
       display: none;
     }
     .p{
       line-height: 35px;
      letter-spacing: 0.25em;
    }
 /***追従するトップへ戻るボタン***/
 #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;
      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 img{
     margin-top: 3%;
     width: 40%;
     }
  
    .rajio1 img{
     width: 80%;
     margin-left: 10%;
     margin-right: 10%;
     margin-top: 10%;
     margin-bottom: 7%;
     }
     .rajio2-1{
       display: none;
     }
     .rajio2{
       margin-bottom: 15%;
       padding-left: 10%;
       padding-right: 10%;
       line-height: 35px;
       text-align: center;
     }
     .rajio2 p{
       margin-bottom: 5%;
     }
    .web img{
     width: 80%;
     margin-left: 10%;
     margin-right: 10%;
     margin-top: 10%;
     margin-bottom: 10%;
     }
     .web2-1{
       display: none;
     }
     .web2{
       margin-bottom: 15%;
       text-align:center ;
       line-height: 35px;
     } 
     .web2 p{
       margin-bottom: 5%;
     } 
    .osake img {
     width: 80%;
     margin-left: 10%;
     margin-right: 10%;
     margin-top: 10%;
     margin-bottom: 10%;
    }
    .osake2-1{
      display: none;
    }
    .osake2 p{
    margin-bottom: 10%;
    padding-left: 30px;
    padding-right: 30px;
    line-height: 35px;
    text-align: center;
    } 
    .sinbun1{
      display: none;
    }
    .sinbun{
      padding-top: 10%;
      padding-bottom: 15%;
    }
    .sinbun p{
      text-align: center;
      margin-bottom: 30px;
      padding-left: 10%;
      padding-right: 10%;
      line-height: 35px;
    }
     .main h2{
     text-align: center;
     margin-top: 50px;
     margin-bottom: 50px;
     font-size: 35px;
      }
     .main h3{
     text-align: center;
     border-top: solid 3px ;
     border-bottom: solid 3px ;
     font-size: 20px;
     line-height: 40px;
     padding-top: 10px;
     padding-bottom: 10px;
     }
    .main{
      margin-left: 20px;
      margin-right: 20px;
     }
    .main p{
     font-size: 17px;
    }
     a:hover{
     text-decoration: underline;
     font-size: 1em;
    }
    .main a:visited{
     color: aliceblue;
    }
     .sinbun p{
     text-align: center;
    }
    .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;
     }
     a.btn_01 {
      display: block;
      text-align: center;
      vertical-align: middle;
      text-decoration: none;
      width: 300px;
      margin: auto;
      padding: 1rem 4rem;
      font-weight: bold;
      border: 2px solid #f3f3fa;
      color:#f3f3fa;
      transition: 0.5s;
    }
    a.btn_01:hover {
      color: #333;
      background: #fdd35c;
    }
    
    /*ボタン1ここまで*/

 /***追従するトップへ戻るボタン***/
 #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;
   }       
/*共通ここまで*/
        
         
         .rajio1 img{
          width: 100%;
          margin-top: 40px;
          margin-bottom: 20px;
          }
          .rajio2{
            display: none;
          }
          .rajio2-1{
            margin-bottom: 30px;
            padding-left: 30px;
            padding-right: 30px;
            line-height: 35px;
            text-align: center;
          }
          .rajio2-1 p{
            margin-bottom: 5%;
          }
         .web img{
          width: 100%;
          margin-top: 40px;
          margin-bottom: 20px;
          }
          .web2{
            display: none;
          }
          .web2-1{
            margin-bottom: 30px;
            text-align:center ;
            line-height: 35px;
          }
          .web2-1 p{
            margin: 5%;
          }
         .osake img {
          width: 100%;
          margin-top: 40px;
          margin-bottom: 20px;
         }
         .osake2{
           display: none;
         }
         .osake2-1 p{
         margin-bottom: 30px;
         padding-left: 30px;
         padding-right: 30px;
         line-height: 35px;
         text-align: center;
         } 
         .sinbun{
           display: none;
         }
         .sinbun1{
           padding-top: 30px;
           padding-bottom: 50px;
         }
         .sinbun1 p{
           text-align: center;
           
           margin-bottom: 30px;
           padding-left: 30px;
           padding-right: 30px;
           line-height: 35px;
         }
          .main h2{
          text-align: center;
          margin-top: 10%;
          margin-bottom: 10%;
          font-size: 35px;
           }
          .main h3{
          text-align: center;
          border-top: solid 3px ;
          border-bottom: solid 3px ;
          font-size: 20px;
          line-height: 40px;
          padding-top: 10px;
          padding-bottom: 10px;
          }
         .main{
           margin-left: 5%;
           margin-right: 5%;
          }
         .main p{
          font-size: 17px;
         }
          a:hover{
          text-decoration: underline;
          font-size: 1em;
         }
         .main a:visited{
          color: aliceblue;
         }
          .sinbun p{
          text-align: center;
         }
         .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;
          }
          a.botan_01 {
            display: block;
            text-align: center;
            vertical-align: middle;
            text-decoration: none;
            width: 250px;
            margin: auto;
            padding: 1rem 4rem;
            font-weight: bold;
            border: 2px solid #f3f3fa;
            color:#f3f3fa;
            transition: 0.5s;
          }
          a.botan_01:hover {
            color: #333;
            background: #fdd35c;
          }
          
          /*ボタン1ここまで*/
          
          /*ボタン2*/
          a.botan_02 {
            display: block;
            text-align: center;
            vertical-align: middle;
            text-decoration: none;
            width: 250px;
            margin: auto;
            padding: 1rem 4rem;
            font-weight: bold;
            border: 2px solid #f3f3fa;
            color:#f3f3fa;
            transition: 0.5s;
          }
          a.botan_02:hover {
            color: #333;
            background: #ec6d6d;
          }
          
          /*ボタン2ここまで*/
 /***追従するトップへ戻るボタン***/
 #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;
            }
          }
          /**************** ここまで、メニューのスタイリング ****************/