/*
Pure CSS modal box
Author: Jorge Chavez
Github: http://github.com/jorgechavz
*/

.modal .checkbox{ display: none;}

/* Gray background */
.modal .modal-overlay{ opacity: 0; transition: all 0.3s ease; width: 50%; position: absolute; width: 100%; height: 100%; position: fixed; top: 0;
 left: 0; z-index: -100; transform: scale(1); display: flex; background-color: rgba(0,0,0,0.7);}

/* Box */
.modal .modal-wrap{ background-color: #fff; box-shadow: 3px 3px 3px rgba(0,0,0,0.2); padding: 20px 30px; width: 50%; margin: 20px auto; align-self: flex-start; border-radius: 2px; transition: all 0.5s ease;}

.modal .modal-wrap.a-center { align-self: center;}
.modal .modal-wrap.from-left { transform: translateX(-100%);}
.modal .modal-wrap.from-right { transform: translateX(100%);}
.modal .modal-wrap.from-top { transform: translateY(-100%);}
.modal .modal-wrap.from-bottom { transform: translateY(100%);}

/* Close button */
.modal .modal-overlay .close{ position: absolute; right: 20px; top: 10px; font-size: 30px; width: 25px; height: 25px; color: #282c34;}
.modal .modal-overlay .close:hover{ cursor: pointer; color: #4b5361;}
.modal .o-close { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -100; }
.modal input:checked ~ .o-close { z-index: 9998;}
.modal input:checked ~ .modal-overlay{ transform: scale(1); opacity:1; z-index: 9997; overflow: auto;}
.modal input:checked ~ .modal-overlay .modal-wrap { transform: translateY(0); z-index: 9999;}


/* Responsive Design */
/* Tablet size */
@media (max-width: 800px){
 .modal .modal-wrap { width: 80%; padding: 20px;}
}

/* Phone size */
@media (max-width: 500px){
.modal .modal-wrap { width: 90%; }
}


/*//////////////////////////////////////////////////////////////////　 モーダルここから　*/

#modal {width: 100%; overflow: hidden; text-align: left; font-size: 16px;}
#modal p {margin: 0; }
#modal h3 {font-size: 130%; font-weight: 700; border-bottom: 5px solid #e5e5e5; padding-bottom: 5px; margin-top: 7%;} 


/*------- お知らせ --------------------------------------*/

#modal .info {margin-top: 2%; text-align: left;}
#modal .infoT { font-weight: bold; font-size: 200%; color: #555;  width: 100%; text-align: left; border-bottom: 4px solid #0075c1;display: inline; padding: 3px 10px;}/*h2*/

#modal .info p {line-height: 180%;}
#modal .info .comp {padding-bottom: 1%;}
#modal .info .comp span {font-weight: bold; padding-right: 1%; width: 300px; text-align: inherit;}
#modal .info .buil {padding-bottom: 1%;}
#modal .info .date {width: 100%; border-bottom: 1px dashed #555; padding-bottom: 1%; margin-bottom: 2%;}

.infolink {text-decoration: none; display: flex; flex-wrap: nowrap; align-items: baseline;}
.infolink span:hover {cursor: pointer; color: #1fbaf0; text-decoration: underline; transition: 0.5s ;}

/*@media (max-width: 768px){
.infolink {padding-left: 4%;}
}*/

@media (max-width: 500px){
.infolink {font-size:90%;}
.infolink:hover { cursor: pointer; color: #1fbaf0; text-decoration: underline; transition: 0.5s ;}
}

#modal dl {width: 100%; margin:0 0 2% 0; padding: 0 0 1% 0; float: left; border-bottom: 1px dashed #bbb;}
#modal dt {clear: left; float: left; width: 100%; -moz-text-align-last: justify; text-align-last: left;line-height: 180%; font-weight: bold; font-size: 110%;}
#modal dd { float: left; width: 100%; text-align: left; line-height: 180%;margin: 1% 0 1% 0;}

.imglink:hover {
cursor:-moz-pointer;
cursor:-webkit-pointer;
cursor: pointer;
 opacity: 0.5;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=5)";
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=5);
-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
/*overflow: hidden;*/
}



/*TABLE*/
.infoTB{width:100%; text-align:center; border-collapse:collapse; border-spacing:0; font-size:100%;margin:3% auto;}
.infoTB tr{background: #e5e5e5; border-bottom:2px solid #fff;padding:10px; color: #444;vertical-align: middle;}
.infoTB tr:nth-child(even){padding:10px; border-bottom:2px solid #fff; background: #f8f8f8;  vertical-align: middle;}

.infoTB td{padding:10px 10px 10px 20px; border:0px solid #fff; vertical-align: middle; text-align: left; }
.infoTB td:nth-child(odd){padding:10px; border-right:2px solid #fff; vertical-align: middle; text-align:center;width: 20%;}
.infoTB td a {text-decoration: underline; color: #111;}
.infoTB td a:hover { cursor: pointer; color: #1fbaf0; text-decoration: underline; transition: 0.5s ;}



@media only screen and (max-width:800px) {
#modal{ font-size: 15px;}
#modal h2 {font-size: 150%; 3px 5px 3px 2px;}
#modal h3 {font-size: 120%;}



.infoTB{margin:3% auto; border-collapse:collapse; width: 100%;}
.infoTB tr{padding:10px; color: #444;vertical-align: middle;}

.infoTB td{display:block; border-top:none; border-left:0; border-right:0; border-bottom:0; background: #f7f7f7;}
.infoTB td:nth-child(odd){padding:10px; border-right:0; vertical-align: middle; text-align:center;width: 100%; background: #e5e5e5;border-bottom:3px solid #fff}
}



/*------- 申請＆ご案内 --------------------------------------*/

#modal .download {margin-top: 3%; text-align: left;}
#modal .download p {line-height: 180%;}

#modal .formatT { font-weight: bold; font-size: 200%; color: #555;  width: 100%; text-align: left; border-bottom: 4px solid #0075c1;display: inline; padding: 3px 10px;}/*h2*/
#modal .guidanceT { font-weight: bold; font-size: 200%; color: #555;  width: 100%; text-align: left; border-bottom: 4px solid #0075c1;display: inline; padding: 3px 10px;}/*h2*/
#modal .reserveT { font-weight: bold; font-size: 200%; color: #555;  width: 100%; text-align: left; border-bottom: 4px solid #0075c1;display: inline; padding: 3px 10px;}/*h2*/


/*TABLE*/
.downloadTB{width:100%; border-collapse:collapse; border-spacing:0; font-size:100%;margin: 7% auto 4% auto;}
.downloadTB tr {border-bottom:4px solid #fff;padding:10px; color: #444;}


.downloadTB td {padding:10px 10px 10px 20px; border:0px solid #fff; vertical-align: middle; text-align: left;  font-size: 90%;}
.downloadTB td:nth-child(odd){padding:10px; border-right:2px solid #fff; vertical-align: middle; text-align:center;width: 20%;background: #f5f5f5; /*-moz-text-align-last: justify; text-align-last: justify;*/}
.downloadTB td span{letter-spacing:2em;}
.downloadTB td a {text-decoration: underline; color: #111;}
.downloadTB td a:hover { cursor: pointer; color: #1fbaf0; text-decoration: underline; transition: 0.5s ;}

.DLinfo {width: 100%; border: 1px solid #555; padding: 2%; min-height: 300px;}
.DLinfo h4 {padding-bottom: 2%; margin: 0;}
.DLinfo p{ line-height: 180%;}
/* 申請＆ご案内 end*/


/*------- パスワード --------------------------------------*/

#modal .password{width: 100%; padding: 5% 0 0 0; text-align: left;}

#modal .sen {width: auto; padding: 4% 0 3% 0; text-align: left;
border-top: 1px dashed #bbb;
border-bottom: 1px dashed #bbb;
margin: 2% 0; font-size: 110%; line-height: 210%;
}
#modal .sen span {font-size: 150%; font-weight: bold;font-family: 'Century Gothic'; color: #555;}



@media only screen and (min-width:1400px) {
.modal .modal-wrap {width: 40%;}
.downloadTB td:nth-child(odd){width: 25%;}
}
@media only screen and (max-width:1100px) {
.modal .modal-wrap {width: 70%;}
#modal h3 {font-size: 120%;}
.downloadTB td:nth-child(odd){width: 30%;}
}
@media only screen and (max-width:800px) {
.modal .modal-wrap {width: 80%;}
#modal .download {margin-top: 10%; text-align: left;}
.downloadTB{margin:3% auto; border-collapse:collapse; width: 100%;}
.downloadTB tr{padding:10px; color: #444;vertical-align: middle;}

.downloadTB td{display:block; border-top:none; border-left:0; border-right:0; border-bottom:0; background: #f7f7f7;}
.downloadTB td:nth-child(odd){padding:10px; border-right:0; vertical-align: middle; text-align:center;width: 100%; background: #e5e5e5;border-bottom:3px solid #fff;-moz-text-align-last: center; text-align-last: center; letter-spacing: 2px;}
}

@media only screen and (max-width:680px) {
.modal .modal-wrap {width: 95%;padding: 10px;}
#modal h3 {font-size: 110%;}
.downloadTB td {padding:10px 10px 10px 20px; border:0px solid #fff; vertical-align: middle; text-align: left;font-size: 15px;}
.downloadTB td a {font-size: 15px;}
}

#modal .passwordT { font-weight: bold; font-size: 200%; color: #137ec2;  width: 100%; text-align: left; border-bottom:4px solid #0075c1; display: inline; padding: 3px 10px;}/*h2*/



 /*------- ボタン --------------------------------------*/
ul.moBT { width: 70%; padding:0; text-align: center!important; margin: 7% auto!important;}
ul.moBT li { width:45%!important; display: inline-block!important; text-align: center; margin: 0% 2%!important; border-bottom: none!important;}

.btn { padding: 5% 2%; font-weight: 400; display: inline-block; text-decoration: none !important; font-size: 16px; border-radius: 0px; width: 100%; }

.btnD { background-color: #1fbaf0; color: #fff !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s;}
.btnD:hover { background-color: #71cff3;}

.btnC { background-color: #137ec2; color: #fff !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; cursor: pointer!important;}
.btnC:hover { background-color: #71cff3;}

@media only screen and (max-width:800px) {

#modal{padding-top: 2%;}
ul.button { width: 100%;}
ul.moBT { width: 90%;} 
.btn {font-size: 14px;}


#modal .infoT, #modal .formatT, #modal .guidanceT,#modal .passwordT { font-weight: bold; font-size: 130%;}/*h2*/
}