@charset "UTF-8";
/* CSS Document */

.h2_reg {background-color: aqua;
	min-width: 1000px;
	height: 200px;
	margin: 0 auto;
}

.box {
	padding: 5px 20px;
}

.box p {
	margin: 0;
}

.box img {
	width: 680px;
	margin: 0 auto;
	display: block;
	text-align: center;
}

.longurl{word-break: break-all;}

.box h2 {
	text-align: center;
	margin-bottom: 40px;
}

.box h4 {
	font-size: 1.1rem;
	color: #2D8DFF;
	margin: 30px 0 20px 0;
	border-bottom:1px dotted #2D8DFF;
}

.box h5 {
	font-size: 1rem;
		margin: 0 0 10px 0;
}

.ma_b15 {
	margin-bottom: 15px;
}

.ma_b30 {
	margin-bottom: 30px;
}

.indent01 {
	 padding-left:1em;
	text-indent:-1em;
	letter-spacing:-0.01em;
}

table#fee{
	width:100%;
	margin:1em auto 0.5em auto;
	font-size:105%;
}
table#fee th{
	color:#FFFFFF;/*FDF6BB*/
	background-color:#5ABEEB;
	text-align:center;
	font-weight:bold;
	font-weight:bold;
	padding:10px 10px 10px 10px;
	margin:0px 0px 0px 0px;
}

table#fee td{
	padding:10px 10px 10px 10px;
	margin:0px 0px 0px 0px;
	text-align:center;
	border-top:#5ABEEB 1px solid;
	border-right:#5ABEEB 1px solid;
	border-bottom:#5ABEEB 1px solid;
	border-left:#5ABEEB 1px solid;
}
#fee .left{
	text-align:left;
	padding-left:20px;
}
table.fee2{
	width:100%;
	margin:1em auto 2em auto;
	font-size:100%;
}
table.fee2 th{
	color:#FFFFFF;/*FDF6BB*/
	background-color:#5ABEEB;
	border-right:#fff 1px solid;
	text-align:center;
	font-weight:bold;
	font-weight:bold;
	padding:10px 10px 10px 10px;
	margin:0px 0px 0px 0px;
}
table.fee2 th.ta_head{
	width:245px;
}

table.fee2 td{
	padding:10px 10px 10px 10px;
	margin:0px 0px 0px 0px;
	text-align:left;
	border-top:#5ABEEB 1px solid;
	border-right:#5ABEEB 1px solid;
	border-bottom:#5ABEEB 1px solid;
	border-left:#5ABEEB 1px solid;

}
.fee2 .left{
	width:120px;
	text-align:left;
	padding-left:20px;
}

table.fee3{
	width:90%;
	margin:1em auto 2em auto;
	font-size:100%;
}
table.fee3 th{
	width:90px;
	text-align:left;
	font-weight:bold;
	padding:0px 10px 0px 0px;
	margin:0px 0px 0px 0px;
	
}
table.fee3 th{
	vertical-align:top;
}
table.fee3 td{
	padding:5px 10px 5px 10px;
	margin:0px 0px 0px 0px;
	text-align:left;
	border-top:#5ABEEB 1px solid;
	border-right:#5ABEEB 1px solid;
	border-bottom:#5ABEEB 1px solid;
	border-left:#5ABEEB 1px solid;

}
table.fee3 td.t_regi{
	color:#FFFFFF;/*FDF6BB*/
	background-color:#5ABEEB;
	text-align:center;
	font-weight:bold;
	font-weight:bold;
	padding:10px 10px 10px 10px;
	margin:0px 0px 0px 0px;
	border-top:#5ABEEB 1px solid;
	border-right:#5ABEEB 1px solid;
	border-bottom:#fff 1px solid;
	border-left:#5ABEEB 1px solid;
}


.btn a:link,
.btn a:active,
.btn a:visited{
	font-size:15px;
	font-weight:bold;
	width:230px;
	min-height:90px;
	background-color:#47A8FF;
	text-align:center;
	color:#fff;
	margin: 0px auto;
	text-decoration:none;
	display:block;
	padding: 10px 0;
	vertical-align:middle;
	border-radius: 10px;
}
.btn a:hover{
	opacity: 0.8;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
.btn02 a:link,
.btn02 a:active,
.btn02 a:visited{
	font-size:15px;
	font-weight:bold;
	width:230px;
	min-height:50px;
	background-color:#47A8FF;
	text-align:center;
	color:#fff;
	margin: 0px auto;
	text-decoration:none;
	display:block;
	padding: 33px 0;
	vertical-align:middle;
	border-radius: 10px;
}
.btn02 a:hover{
	opacity: 0.8;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
/* 親要素(コンテナ) */
.flex-container {
	flex-wrap: wrap; /* 画面幅に合わせてカラム落ちさせる */
    display: flex;
    justify-content: center;
    align-items: top;
	margin-bottom: 20px;
}
/* 子要素(アイテム) */
.flex-item {
	width: 35%;  /* お好みの幅で指定 */
	padding: 0 11px 0 11px;
    /* paddingと合わせてbox-sizingも指定 */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

.flex-container:after {
    content: "";
    display: block;
    width: 35%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

@media (max-width: 480px) {
	
.box img {
	width: 100%;
}
.flex-container {
	flex-wrap: wrap; /* 画面幅に合わせてカラム落ちさせる */
    display: block;
    justify-content: space-between;
    align-items: top;
	margin-bottom: 20px;
}
.flex-item{
    max-width: 300px;
    width: 100%;
    margin: 0 auto 30px auto;
	display: block;
  }
  
}

@media screen and (min-width: 480px) and (max-width: 960px) {

.box img {
	width: 100%;
}

	.flex-item {
	width: 50%;  /* お好みの幅で指定 */
}
	
	.flex-container:after {
    content: "";
    width: 50%;  /* .boxに指定したwidthと同じ幅を指定する */
}


	.flex-container{
    width: 100%;
    margin: 0 auto 30px auto;
  }
}