@charset "utf-8";

.obi {
  background-color: #f5b452;
  width: 900px;
  height: 30px;
  margin: 0;
  padding: 0;
}

/*-----------------------パソコン時ハンバーガーメニュー関連*/
.menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;/*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: #3584bb;
  transition: all 0.5s;/*アニメーション設定*/
}

#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}	
#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}

#menu-btn-check {
  display: none;
}/*チェックボックス消し*/

/*----------------------------パソコン時ハンバーガーメニュー*/

h1 {
  margin: 0 3px 2px 0;
}

/* -----------デバイスレスポンシブ表示 */
.device {
 text-align: right;
 margin: 0 0 2px 0;
}/*レスポンシブセレクトを右に*/

.pc {
 background-color: red;
}/*pcのときはパソコンと言う文字の背景赤*/

/* -----------デバイスレスポンシブ表示 */

body {
  width: 900px;
  margin: 0 auto;
  padding: 0;
}

footer {
  height: 100px;
}

.main {
  background-color: #bcefff;
  width: 890px;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

.main > p {
  text-align: left;
}

.bigimg {
  text-align: center;
}

details {
  background-color: rgb(85, 187, 255);
}

@media screen and (max-width:835px) {
  /*------------------------------------------------------------------画面サイズが768pxからはここを読み込む*/

  /*デバイスレスポンシブ表示*/
 .tablet {
  background-color: greenyellow;
 }
 .pc {
  background-color: #fff;
 }
 /*デバイスレスポンシブ表示*/

 /*-----------------------------ハンバーガーメニュー*/
.menu-btn {
  position: fixed;
  top: 0px;
  right: 10%;
  display: flex;
  height: 40px;
  width: 40px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #f5b452;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #86146a;
  position: absolute;
}
.menu-btn span:before {
  bottom: 8px;
}
.menu-btn span:after {
  top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}/*バツボタン*/
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}/*バツボタン*/

/*メニュー内*/
.menu-content {
  width: 100%;
  height: 60%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  background-color: #f5b452;
}
.menu-content ul {
  padding: 30px 10px 0;
}
.menu-content ul li {
  border-bottom: solid 1px #b142f5;
  list-style: none;
}
.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color:#ffffff;
  text-decoration: none;
  padding: 5px 15px 10px 0;
  position: relative;
}
.menu-content ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  transform: rotate(45deg);
  position: absolute;
  right: 11px;
  top: 16px;
}
/*↓メニュー内*/

.menu-content {
  width: 100%;
  height: 60%;
  position: fixed;
  top: 0;
  left: 100%;/*leftの値を変更してメニューを画面外へ*/
  z-index: 20;
  background-color: #f5b452;
  transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
  left: 0;/*メニューを画面内へ*/
}

/*----------------------------ここまで-ハンバーガーメニューとメニュー内*/


 .obi {
   display: none; 
}

 header {
   width: 90%;
   margin: 0 auto;
   padding: 0;
 }

 footer {
  width: 90%;
  margin: 0 auto;
  padding: 0;
 }

 body {
   width: 100%;
   margin: 0 0;
   padding: 0 0;
 }

 .main {
  font-size: 4vw;
  background-color: #bcefff;
  width: 95%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  }

}




@media screen and (max-width:480px) {
  /*----------------------------------------------------画面サイズが480pxからはここを読み込む*/

/*デバイスレスポンシブ表示*/
  .smart {
 background-color: blue;
 }
 .tablet {
 background-color: #fff;
 }
 .pc {
 background-color: #fff;
 }
/*デバイスレスポンシブ表示*/

.obi {
  display: none;
}

 header {
  width: 90%;
  margin: 0 auto;
  padding: 0;
}

footer {
  width: 90%;
  margin: 0 auto;
  padding: 0;
 }

body {
  width: 100%;
  margin: 0 0;
  padding: 0 0;
}

.main {
  font-size: 4vw;
  background-color: #bcefff;
  width: 95%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  }

h1 , h2 , h3 , h4 {
  font-size: 1em;
}

}