@charset "utf-8";

/* common */

*{
  margin: 0;
}
body{
  font-family: "HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO","ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  max-width: 100%;
}

.container{
  width: calc(100% - 32px);
  box-sizing: border-box;
  margin: 0 auto;
}

h2{
  font-size: 14px;
  color: rgb(13, 233, 13);
}

a{
  text-decoration: none;
  color: black;
}

img{
  vertical-align: bottom;
}

h3{
  font-size: 24px;
}
@media(min-width: 600px) {
  .container {
    width: calc(100% - 128px);
    max-width: 1000px;
  }
}
/* header */

header{
  
  box-sizing: border-box;
  padding: 32px 0;
  display: flex;
  justify-content:space-between;
  align-items: center;
  gap: 4px;
}
h1 img{
  width: 100%;
  min-width: 50px;
  height: auto
}

header a:hover{
  opacity: .7;
}

.h2 p{
  text-align: left;
  font-size: 10px;
}
header a p{
  font-size: 8px;
  text-align: center;
}

.h2:hover{
  opacity: .7;
}

header img{
  width: 100%;
  height: auto;
  max-width: 50px;
}

.h2{
  flex: none;
}
.access{
  margin-left: auto;
}

@media(min-width: 600px) {
  header h2 {
    font-size: 2.5vw;
  }

  .h2 p {
    font-size: 16px;
  }

  h1 img {
    min-width: 90px;
    max-width: 100px;
  }

  header div img {
    min-width: 50px;
    max-width: 80px;
  }

  header a p {
    font-size: 16px;
  }
}

/* popup */

.popup{
  box-sizing: border-box;
  padding: 32px 0 24px;
  text-align: center;
}

.popup p{
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
  color: rgba(32, 196, 32);
}

.popup p:hover{
  font-size: 24px;
}

@media(min-width: 600px){
  .popup{
    margin: 32px auto 64px;
  }
}

/* menu */

.tabu{
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  width: 100%;
  background-color: orange;
  color: white;
  position: fixed;
  bottom: 0;
}
.menu{
  width: 100%;
  display: flex;
  text-align: center;
}

.menu a{
  font-size: 12px;
  font-weight: bold;
  color: white;
   line-height: 64px;
   border: 1px white solid;
   flex: 1;
}

.menu a:hover{
  opacity: .7;
}
.kuruma{
 padding: 16px 32px;
 }

 .kuruma p{
  font-size: 12px;
 }
  

 @media(min-width: 600px){
  .tabu{
   background-color: #555;
   position: static;
   margin: 0 auto;
  }

  .menu{
   justify-content: center;
  }

   .menu a{
     border-bottom: none;
     width: 200px;
     flex: initial;
     font-size: 22px;
   }

   .kuruma p{
     text-align: center;
     font-size: 20px;
   }

   .kuruma h4{
     margin-top: 16px;
     text-align: center;
     font-size: 24px;
 }
 }

 footer {
   text-align: center;
   background-color: #555;
   color: white;
   padding: 16px 0 200px;
 }

 @media(min-width: 600px){
   footer{
     padding-bottom: 64px;
 }
}