@charaset"UTF-8";

/*==================================================================*/
/* common css */
/*==================================================================*/
html{height:100%;}
body{
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: auto;
  height: 100%;
  line-height: 1.6;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
	}
section{
	margin: 0 auto;
	width: 90%;
	max-width: 800px;
	}
h2{
	padding: 0.25em 0.5em;
	background: transparent;
	border-left: 7px solid #fc5f5f;
	}
img{width: 100%;max-width: 680px;border:none;}
a{color: #fc5f5f;text-decoration: none;}
a:hover{color: #f8adad;}


/* -------------------------------------------------------------- */
/* mserver */
/* -------------------------------------------------------------- */
.mserver{margin-bottom: 4em;}
.mserver ul{
	display: flex;
  justify-content: center;
	padding: 0;
	}
.mserver li{width: 48%;text-align: center;list-style-type: none;}
.mserver a.btn{
  display: block;
  margin: 0 auto;
  padding: 1em 0;
  width: 80%;
  text-align: center;
  color: #fff;
  border: 2px solid #fc5f5f;
  background-color: #fc5f5f;
  -webkit-transition: all 0.3s;
          transition: all 0.3s;
  }
.mserver a.btn:hover{
  color: #fc5f5f;
  background-color: #fff;
  }
.balloon{
  position: relative;
  display: inline-block;
  padding: 0.5em 1em;
  color: #fff;
  background-color: #436db4;
  border-radius: 0.3em;
  }
.balloon::before{
  content: '';
  position: absolute;
  left: 45%;
  top: -30%;
  display: block;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #436db4;
  border-left: 15px solid transparent;
  }


/* -------------------------------------------------------------- */
/* block */
/* -------------------------------------------------------------- */
.block *{margin: 0;padding: 0;}
.block{margin: 0 auto 5em;}
.block h3{margin-bottom: 1.5em;}
.block h3 span{
  display: inline-block;
  margin-right: 0.5em;
  padding: 0.3em 0.55em;
  text-align: center;
  color: #fff;
  background-color: #fc5f5f;
  border-radius: 1em;
}
.block ol{padding-left: 2em;}
.block li{margin-bottom: 3em;}
.block li:last-child{margin-bottom: 0;}
.block dl{margin-left: 2em;margin-top: 0.5em;}

.note{margin-top: 1em;background-color: #e8f0fc;border-radius: 0.3em;}
.note h4{
  padding: 0.5em;
  color: #fff;
  background-color: #436db4;
  border-radius: 0.3em 0.3em 0 0;
}
.note p{padding: 0.5em 1em;}
.note ol{padding: 0.5em 1em 0.5em 3em;}
.note li{margin-bottom: 0.5em;}
.status{
  display: flex;
  align-items: center;
  margin: 1em auto 0;
  max-width: 680px;
  }
.status ul{margin-left: 3em;width: 80%;max-width: 420px;}
.status li{
  list-style: none;
  padding: 0.5em 1em;
  background-color: #e8f0fc;
  border: 2px solid #436db4;
  border-radius: 0.3em;
  }
.attention{padding-left: 2em;}
.attention li{margin-bottom: 0.5em;}
.red{background-color: #fddcdc;}
.red h4{background-color: #e84343;}
.ic1{width: 1em;vertical-align: middle;}
.ic2{width: 2em;vertical-align: middle;}
.cnt{margin-top: 1em;text-align: center;}
.sp{display: none;}


/* -------------------------------------------------------------- */
/* footer */
/* -------------------------------------------------------------- */
footer *{margin: 0;padding: 0;}
footer{text-align: center;background-color: #fc5f5f;}
footer p{padding: 1em 0;font-size: 0.8em;}

/* 640 *//* ------- */
@media screen and (max-width: 640px){
  body{font-size: 2.5vw;}
  .sp{display: inline;}
  .mserver a.btn{padding: 0.5em 0;}
  .balloon::before{left: 40%;top: -15%;}
  .status ul{margin-left: 2em;}
	}