@charset "euc-jp";
@media screen and (max-device-width: 699px), screen and (max-width: 699px) {
    td[class="fluid"]{
        display: block !important;
        width: 100% !important;
		margin:3px 0;
        clear: both;
}
#spwd {width:99% !important; box-sizing:border-box;}
}

.fixed{
	position:fixed;
	top:20px;
}
#wrap{
	margin:0px auto 0px;
	width:200px;
	padding:5px 0;	
}

.ttl1{
	width: 100%;
	max-width: 780px;
	background-color: #004885;
	box-sizing: border-box;
	color: #fff;
	font-size: 1.2em;
	font-weight: 600;
	text-align: left;
	padding: 5px 7px 3px 7px;
	margin-bottom: 15px;
}

.ttl2{
	width: 100%;
	max-width: 780px;
	background-color: #c6e5f9;
	box-sizing: border-box;
	color: #004885;
	font-size: 1.1em;
	font-weight: 600;
	text-align: left;
	padding: 5px 7px 3px 7px;
	margin-bottom: 15px;
}

.ttl3{
	border-bottom:double 5px #004885;
	border-left: solid 8px #004885; 
	color: #004885;
	font-weight: 600;
	text-align: left;
	padding: 5px;
	margin-bottom: 15px;
}

.main-title{
        background-color: #004885; 
        width: 100%; 
        max-width: 780px; 
        color: #fff; 
        font-size: 18px; 
        font-weight: 600;  
        padding: 10px; 
        margin: 8px 0 10px 0;
        box-sizing:border-box;
}

.title-bar{
        background-color: #c1e7ff; 
        width: 100%; 
        max-width: 780px; 
        color: #004c7c; 
        font-size: 17px; 
        font-weight: 600;  
        padding: 7px;
        margin-bottom: 15px;
        box-sizing:border-box;
}

.title-number{
        width: 20px; 
        margin-right: 5px; 
        vertical-align: -3px;
}

.pdWrap{
        font-family: Meiryo,"MS PGothic",sans-serif;
        line-height: 1.5em;
}

a.pdWrap{
        text-decoration: none;
}

.sub-title{
        color: #004885; 
        font-size: 1.2em; 
        font-weight: 600; 
        padding-bottom: 5px; 
        border-bottom: double 5px #004885; 
        margin-bottom: 20px;
}

.sub-title_solid{
        color: #555; 
        font-weight: 600; 
        padding: 0 0 2px 5px; 
        border-bottom: solid 2px #00b1e4;
        border-left: solid 10px #00b1e4;
        margin-bottom: 20px;
}

.sub-ttl {
	font-size: 1.1em;
	font-weight: 600;
	color: #c5004c;
	padding: 7px 0;
}

@media only screen and (min-width: 900px) and (max-width: 2000px) {
        .smp{display:none;}
}

@media only screen and (max-width: 900px) {
        .pc{display:none;}
}

.youtube iframe{
        width: 100%;
}

div.arqspin {
	position: relative;
	width: 100%;
	padding-top: 75%;
	margin-bottom: 30px;
}

div.arqspin iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

div.youtubelink {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

div.youtubelink iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.surround{ 
	float: left;
	margin-right: 10px;
	width: 200px;
}

.clb{
	border: none;
	clear:both;
}

.mb5{
	margin-bottom: 5px;
}

.mb10{
	margin-bottom: 10px;
}

.mb20{
	margin-bottom: 20px;
}

.mb30{
	margin-bottom: 30px;
}

.mb40{
	margin-bottom: 40px;
}

.mb50{
	margin-bottom: 50px;
}

.mb60{
	margin-bottom: 60px;
}

/*　for PC　*/
@media screen and (min-width:641px) {

	.column2{
		float: left;
		width: 380px;
		margin: 0 5px 20px 5px;
	}

	.column2 img{
		width: 380px;
		border: 0;
	}

	.column3{
		float: left;
		width: 250px;
		margin: 10px 5px 10px 5px;
	}

	.column3 img{
		width: 250px;
		border: 0;
	}

	p{
		text-align: left;
		padding: 5px 7px 0 7px;
		margin-top: 0;
	}

	.wrap {
		display: -webkit-box; /*Android4.3*/
		display: -moz-box;    /*Firefox21*/
		display: -ms-flexbox; /*IE10*/
		display: -webkit-flex; /*PC-Safari,iOS8.4*/
		display: flex;
	}

	.tbl{
		text-align: left;
		float: left;
		width: 366px;
		margin: 0;
	}

	.tbl-l{
		 width: 30%;
	}

	.tbl-r{
		 width: 70%;
	}

}

/*　for SMP　*/
@media screen and ( max-width:640px) { 

	.column2{
		width: 100%;
		margin: 0 auto 0 auto;
		text-align: center;
	}

	.column3{
		width: 100%;
		margin: 0 auto 15px auto;
		text-align: center;
	}

	.tbl{
		text-align: left;
		width: 94%;
		margin: 0 auto 0 auto;
	}

	.smp-img{
		width: 96%;
		border: 0;
	}

	.txt{
		width: 94%;
		text-align: left;
		padding: 5px 7px 0 7px;
		margin: 0 auto;
	}


}





.w10 {width: 10%;}
.w15 {width: 15%;}
.w20 {width: 20%;}
.w25 {width: 25%;}
.w30 {width: 30%;}
.w35 {width: 35%;}
.w40 {width: 40%;}
.w45 {width: 45%;}
.w50 {width: 50%;}
.w55 {width: 55%;}
.w60 {width: 60%;}
.w65 {width: 65%;}
.w70 {width: 70%;}
.w75 {width: 75%;}
.w80 {width: 80%;}
.w85 {width: 85%;}
.w90 {width: 90%;}
.w95 {width: 95%;}
.w100 {width: 100%;}

.h60 {height: 60px;}
.h70 {height: 70px;}

.p_7{padding:7px;}

@media screen and (max-width:797px){
    .h60 {height: auto;}
    .h70 {height: auto;}
}


#supqa section{margin: 0 0 60px;}
#supqa a.fw_b{color: #005DDB;}
#supqa a.fw_b:hover{color: #FF4F00;}

@media screen and (max-width:1024px){
/*#supqa .dis-non{display: block; max-width: 735px; margin: 0 5px 20px; padding: 15px; border: solid 1px #666;}*/
}

#supqa .dis-tbl{box-sizing: border-box;}
#supqa .vam{vertical-align: middle;}

#supqa .supqa_title{box-sizing: border-box; width: 100%; max-width: 780px; margin: 0 auto 30px; padding: 5px 10px; background-color: #006c8b; border-radius: 10px; color: #fff;}
#supqa .supqa_q{width: 100%; margin-bottom: 7px; background-color: #003148; color: #fff; font-weight: 600;}
#supqa .supqa_a{width: 100%; margin-bottom: 40px; padding: 10px; color: #333;}
#supqa .supqa_a p{line-height: 2em;}
#supqa hr{display: block; margin: 0 0 40px; border: none; border-top: dotted 1px #666; height: 1px; color: #fff;}
#supqa .supa{color: #dd0000; font-weight: 600; font-size: 1.2em;}

#supqa .supcaution{width: 40%; padding: 10px; background-color: #ffedf0; vertical-align: bottom;}
#supqa .supcaution .kome{margin-bottom: 5px; color: #da0024; font-size: 1.1em; font-weight: 600;}

#supqa .supqa_youtube {position: relative; overflow: hidden; width: 100%; height: 0; padding-top: 56.25%;}
#supqa .supqa_youtube iframe {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}

@media screen and (max-width:1024px){
  .fs_08.m-tb5.m-b20{display: none;}
}

@media screen and (max-width:699px){
  #supqa .dis-tblcl{display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 5px;}
  #supqa .m-b30{margin-bottom: 15px;}
  #supqa .m-b40{margin-bottom: 20px;}
  #supqa .m-b60{margin-bottom: 40px;}
  #supqa .supa{margin: 0;}
  #supqa .dis-tblcl.w20{margin: -10px 0; color: #004885; font-weight: 600;}
  #supqa .w80{width: 100%;}
}


/* アコーディオン 開舞＋タン */
label[for^="menu_bar"] {
    display: block; position: relative;
    padding: 10px 30px; border: #999 solid 3px; border-radius: 4px;
    color: #003148; font-weight: bold; line-height: 1.3em; cursor: pointer;}
label[for^="menu_bar"]::before{content: 'Q.'; position: absolute; top: 3; left: 0; margin: 0 10px 0 5px; color: #ffba00; font-size: 1.2em;}
label[for^="menu_bar"]:after {
    content: '';
    display: inline-block; position: absolute; top: 50%; right: 15px;
    width: 10px; height: 10px; margin: -10px 0 0;
    border: solid #FFA600; border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);}
label[for^="menu_bar"]:hover{border: solid 3px #FFA200; background: #1A465B; color: #fff;}

 
/* アコーディオン 表ｦ・秘5\ｦエリア */
[class^="area"] {
  overflow-y: hidden;
  height: 0; max-height: 0; margin: 0; padding:0; border:none; opacity: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
 
/* アコーディオンり¨リックｋ"・蜍・*/
#menu_bar01:checked ~ .area1 {height:auto; max-height: 1500px; margin: 10px 0 0; opacity: 1;}
#menu_bar01:checked ~ label[for="menu_bar01"]:after {
    content: 'X';
    top: 50%; right: 10px;
    width:auto; height:auto; margin: -8px 0 0; border:none; 
    color: #1fc08e; font-size: 26px; font-weight: 600;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);}

#menu_bar02:checked ~ .area2 {height:auto; max-height: 1500px; margin: 10px 0 0; opacity: 1;}
#menu_bar02:checked ~ label[for="menu_bar02"]:after {
    content: 'X';
    top: 50%; right: 10px;
    width:auto; height:auto; margin: -8px 0 0; border:none; 
    color: #1fc08e; font-size: 26px; font-weight: 600;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);}

#menu_bar03:checked ~ .area3 {height:auto; max-height: 1500px; margin: 10px 0 0; opacity: 1;}
#menu_bar03:checked ~ label[for="menu_bar03"]:after {
    content: 'X';
    top: 50%; right: 10px;
    width:auto; height:auto; margin: -8px 0 0; border:none; 
    color: #1fc08e; font-size: 26px; font-weight: 600;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);}

#menu_bar04:checked ~ .area4 {height:auto; max-height: 1500px; margin: 10px 0 0; opacity: 1;}
#menu_bar04:checked ~ label[for="menu_bar04"]:after {
    content: 'X';
    top: 50%; right: 10px;
    width:auto; height:auto; margin: -8px 0 0; border:none; 
    color: #1fc08e; font-size: 26px; font-weight: 600;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);}

#menu_bar05:checked ~ .area5 {height:auto; max-height: 1500px; margin: 10px 0 0; opacity: 1;}
#menu_bar05:checked ~ label[for="menu_bar05"]:after {
    content: 'X';
    top: 50%; right: 10px;
    width:auto; height:auto; margin: -8px 0 0; border:none; 
    color: #1fc08e; font-size: 26px; font-weight: 600;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);}

#menu_bar06:checked ~ .area6 {height:auto; max-height: 1500px; margin: 10px 0 0; opacity: 1;}
#menu_bar06:checked ~ label[for="menu_bar06"]:after {
    content: 'X';
    top: 50%; right: 10px;
    width:auto; height:auto; margin: -8px 0 0; border:none; 
    color: #1fc08e; font-size: 26px; font-weight: 600;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);}

#menu_bar07:checked ~ .area7 {height:auto; max-height: 1500px; margin: 10px 0 0; opacity: 1;}
#menu_bar07:checked ~ label[for="menu_bar07"]:after {
    content: 'X';
    top: 50%; right: 10px;
    width:auto; height:auto; margin: -8px 0 0; border:none; 
    color: #1fc08e; font-size: 26px; font-weight: 600;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);}

#menu_bar08:checked ~ .area8 {height:auto; max-height: 1500px; margin: 10px 0 0; opacity: 1;}
#menu_bar08:checked ~ label[for="menu_bar08"]:after {
    content: 'X';
    top: 50%; right: 10px;
    width:auto; height:auto; margin: -8px 0 0; border:none; 
    color: #1fc08e; font-size: 26px; font-weight: 600;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);}

#menu_bar09:checked ~ .area9 {height:auto; max-height: 1500px; margin: 10px 0 0; opacity: 1;}
#menu_bar09:checked ~ label[for="menu_bar09"]:after {
    content: 'X';
    top: 50%; right: 10px;
    width:auto; height:auto; margin: -8px 0 0; border:none; 
    color: #1fc08e; font-size: 26px; font-weight: 600;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);}

#menu_bar10:checked ~ .area10 {height:auto; max-height: 1500px; margin: 10px 0 0; opacity: 1;}
#menu_bar10:checked ~ label[for="menu_bar10"]:after {
    content: 'X';
    top: 50%; right: 10px;
    width:auto; height:auto; margin: -8px 0 0; border:none; 
    color: #1fc08e; font-size: 26px; font-weight: 600;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);}

#menu_bar11:checked ~ .area11 {height:auto; max-height: 1500px; margin: 10px 0 0; opacity: 1;}
#menu_bar11:checked ~ label[for="menu_bar11"]:after {
    content: 'X';
    top: 50%; right: 10px;
    width:auto; height:auto; margin: -8px 0 0; border:none; 
    color: #1fc08e; font-size: 26px; font-weight: 600;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);}

#menu_bar12:checked ~ .area12 {height:auto; max-height: 1500px; margin: 10px 0 0; opacity: 1;}
#menu_bar12:checked ~ label[for="menu_bar12"]:after {
    content: 'X';
    top: 50%; right: 10px;
    width:auto; height:auto; margin: -8px 0 0; border:none; 
    color: #1fc08e; font-size: 26px; font-weight: 600;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);}




/* ボタン */
a.link_btn {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 270px;
	background-color: #d00;
	border-radius: 7px;
	margin: auto;
	padding: 15px 20px;
	font-weight: bold;
	border: 2px solid #b00;
	color: #fff;
	cursor: pointer;
	position: relative;
 	overflow: hidden;
 	z-index: 1;
}
a.link_btn::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(255,0,0);
	transform: translateX(-100%);
	transition: all .3s;
	z-index: -1;
}
a.link_btn:hover::before {
	transform: translateX(0);
}
a.link_btn:hover {
	color: #fff;
}