@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: #feddff;
  width: 95%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

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

.bigimg {
  text-align: center;
}

.row-1 {
  color: #ffffff;
}



.scroll{
  background-color: #fad6ff;
  margin: 0 0;
  padding: 0 0;
  overflow-y: scroll;
  height: 20vh;
  width: 95%;
  border: 2mm ridge rgba(237, 240, 178, 0.6);
}

/* ーーーーーーーーーーーーーーーーーーーーーフレキシブルボックス */
.flexbox {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  align-items: center;
  margin: 5px;
  padding: 8px;
}

.box {
  background-color: #a9faf3;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
}

/* ーーーーーーーーーーーーーーーーーーーーーフレキシブルボックス */

/* 
display: grid;を使用してコンテナをグリッドコンテナに設定し、
grid-template-columns: repeat(4, 1fr);で4つの列を定義しています。
grid-gap: 5px;によってボックス間の間隔を5pxに設定し、
justify-items: center;とalign-items: center;でボックスを中央に配置。
.flexbox内のjustify-items: center;は外したが、これがあると一番大きいボックスにサイズを合わせて水平に中央揃えする効果がある
ただし、小さいBOXが並ぶと間隔が広くなる
ボックスのスタイルは.boxクラスで定義されており、
背景色やパディング、テキストの中央揃えなどが設定されています。
*/


@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;
  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;
  width: 95%;
  height: 700px;
  margin: 0 auto;
  padding: 0;
  }

/* ーーーーーーーーーーーーーーーーーーーーーフレキシブルボックス */

.box {
  padding: 15px 0;
  font-size: 3vw;
}



/* ーーーーーーーーーーーーーーーーーーーーーフレキシブルボックス */


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

.bank {
  font-size: 10px;
}

.new {
  margin: 0 0;
  padding: 0 0;
  height: 40px;
}

}