@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700&Noto+Serif+JP:wght@400;600;700&display=swap');

body{
  font-size:16px;
  font-family: 'Noto Sans JP', sans-serif;
  font-family: 'Noto Serif JP', serif;
  color:#333333;
}

img{
  max-width:100%;
}

h2{
  font-size:22px;
  font-weight:bold;
  border-bottom:1px solid #333;
  padding:0px 0px 5px 10px;
  margin-bottom:50px;
  margin-top:50px;
}

header{
  padding:10px;
  background:#fff;
  font-weight:bold;
}


article{
  padding:0px 0px 20px 0px;
}

footer{
  border-top:2px solid #0071bc;
  padding-top:60px;
}

#copyright{
  text-align:center;
  width:100%;
  background:#0071bc;
  color:#FFF;
  padding:10px;
  font-size:14px;
}

.mytable th{
  border-bottom:1px solid #333;
}

.table th a{
}

.num{
  font-family:Arial;
  font-weight:bold;
  font-size:140%;
}

ul.topics{
  list-style:none;
  padding:0;
}

ul.topics li{
  padding:15px 0px;
  border-bottom:1px dashed #000;
}

ul.topics li span{
  color:#888;
  display:inline-block;
  margin-right:10px;
}

.text-orange{
  color:#ff931e;
}

.text-kon{
  color:#0071bc;
}

.btn-kon{
  background:#0071bc;
  color:#FFF;
  border-radius:0;
  padding-left:60px;
  padding-right:60px;
  border:2px solid #0071bc;
}

.btn-kon:hover{
  color:#0071bc;
}


#mainimage{
  position:relative;
  color:#FFF;
  margin-bottom:60px;
}

#mainimage > .inbox{
  position:absolute;
  top: 50%;
  left:0;
  -webkit-transform: translateY(-50%); /* Safari?p */
  transform: translateY(-50%);
  width:100%;
  background:rgba(255,255,255,0.1);
  padding:30px 0px;
  text-align:center;
}


#mainimage .txt1{
  font-weight:600;
  font-size:1.5rem;
}

#mainimage .txt2{
  font-weight:600;
  font-size:3rem;
  margin-bottom:20px;
}

#mainimage .txt3{

}


h2.top{
  text-align:center;
  border:none;
  position:relative;
  margin-top:0;
}

h2.top:after{
  content:"";
  position:absolute;
  bottom: -10px;
  left:50%;
  -webkit-transform: translateX(-50%); /* Safari?p */
  transform: translateX(-50%);
  width:140px;
  height:2px;
  background:#0071bc;
}


#howto{
  padding:60px 0px;
  background-image:url("/img/howto_back.png");
  background-size:cover;
}

#contact{
  padding:60px 0px;
}




@media screen and (max-width: 1200px) {
}

/* md ≥768px */
@media screen and (max-width: 991px) {
}

@media (max-width: 991.98px){
}
/* sm ≥576px */
@media screen and (max-width: 767px) {
  #logo{
    max-width:50vw;
  }
}

/* xs <576px */
@media screen and (max-width: 576px) {

  table,
  table thead,
  table thead tr,
  table thead tr th,
  table thead tr td,
  table tbody,
  table tbody tr,
  table tbody tr th,
  table tbody tr td{
    display:block;
    width:100%;
  }

  #mainimage{
  }

  #mainimage .txt1,
  #mainimage .txt2{
    font-size:14px;
  }
  #mainimage .txt3{
    font-size:10px;
  }
}