@charset "UTF-8" ;

/*------------------
	  共通部分
------------------*/
#pagetop{
	z-index:9990 !important;
}

#modal-content {
	border: 2px solid #aaa ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 9999 ;
}
#modal-overlay {
	z-index: 9998 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

#modal-close{
position: absolute;
	color: #FFF!important;
	border-radius: 100%;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	margin: 1%;
}

#modal-close:hover {
	cursor: pointer ;
	opacity: 0.6;
}

.sectiona{
	width:100%;
	height:100%;
	position: absolute;
	overflow:hidden; 
}
.sectiona div.sectiona{
	height:100%;
	width:100%;
	border:none;	
	position:static;
	margin:0 auto;
}

.leftboox{
	position: absolute;
	float: left;
	left: 0%;
}

.rightboox{
	position: absolute;
	float: right;
	right: 0%;
}

.BackQuestion{
	float: left;
	position: absolute;
	display: inline-block;
	color: #FFF!important;
	font-weight: bold;
	text-align: left;
	margin: 3%;
}
.StartBack{
	float: left;
	position: absolute;
	display: inline-block;
	color: #FFF!important;
	font-weight: bold;
	text-align: left;
}

.square_btnYes{
	display: inline-block;
	padding: 0.5em 1em;
	text-decoration: none;
	border-radius: 3px;
	text-align: center;
	vertical-align:top;
	color:#FFF!important;
	z-index:1;
}
.square_btnYes:active {
	-ms-transform: translateY(4px);
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	border-bottom: none;
	z-index:1;
}
.square_btnYes:hover{
	filter:alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
	z-index:1;
}

.square_btnNo{
	display: inline-block;
	padding: 0.5em 1em;
	text-decoration: none;
	border-radius: 3px;
	text-align: center;
	vertical-align:top;
	color:#FFF!important;
 	z-index:1;
}
.square_btnNo:active {
	-ms-transform: translateY(4px);
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	border-bottom: none;
	z-index:1;
}
.square_btnNo:hover{
	filter:alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
	z-index:1;
}

.button-link {
	position: relative;
    display: inline-block;
    padding: 9px 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #03A9F4;
    border: solid 1px #0f9ada;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
	font-size:20px;
}
.button-link:hover {
	cursor: pointer ;
	background: #1ec7bb;
}
.boox p{
	text-align:center;
	color: darkblue;
}
.boox{
    border-bottom: 1px solid #025;
    -webkit-box-shadow: 0 1px 0 #fcfcfc;
    -moz-box-shadow: 0 1px 0 #fcfcfc;
    box-shadow: 0 1px 0 #fcfcfc;
    background: paleturquoise;
}

.CenterText{
	letter-spacing: 1px;
}


/*------------------
	PCサイズ
------------------*/
@media screen and ( min-device-width:1025px) {
	h3{font-size: 170%;}
	#modal-content {
		width: 52.5% ;
		height: 67.5%;
		overflow: auto;
	}
	#modal-overlay {
		height: 100% ;
	}
	.BackQuestion{
	    font-size: 80%;
	}
	.StartBack{
		font-size: 90%;
	    margin: 3%;
	    margin-top: 15%;
	}
	#modal-close{
	    border: solid 3px #fff;
	    width: 30px;
	    font-size: 30px;
	    line-height: 30px;
    	left: 94%;
	}
	.sectiona div.sectiona{
        background: linear-gradient(90deg,#96bf4b 0%,#96bf4b 50%,#ee7162 50%,#ee7162 100%);
	}
    .leftimg{
	    width: 50%;
	    height: auto;
	    position: relative;
	    left: 20%;
		top: -10px;
		border: double 0.8em #fff;
    }
    .rightimg{
		width: 50%;
	    height: auto;
	    position: relative;
	    left: 28%;
		top: -10px;
		border: double 0.8em #fff;
    }
	.square_btnYes{
		position: relative;
	    line-height: 50px;
	    width: 47%;
	    height: 50px;
	    margin-left: 20%;
	    margin-top: 12%;
	    z-index: 1;
	    border: solid 3px #fff;
	    font-size: 15px;
	}
	.square_btnNo{
		position: relative;
	    line-height: 50px;
	    width: 47%;
	    height: 50px;
	    margin-left: 28%;
	    margin-top: 12%;
	    z-index: 1;
	    border: solid 3px #fff;
	    font-size: 15px;
	}
	.titleboox{
		position: absolute;
	    display: inline-block;
	    color: #FFF;
	    font-weight: bold;
	    font-size: 200%;
	    text-align: center;
	    width: 100%;
	    margin: 5% 0px;
	}
	.boox{
		display: block;
	    position: relative;
	    word-break: break-word;
	    font-size: 70%;
	    width: 45%;
	    left: 27%;
	    top: 18%;
	    border: solid 5px #FFF;
	}
	.boox p{
		display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: large;
	}
	.boox img {
		width: 100%;
	}
	.leftboox{
	    width: 50%;
	    margin: 17% 3%;
	}
	.rightboox{
	    width: 50%;
	    margin: 17% 3%;
	}
	.CenterText{
		position: absolute;
	    margin: 44% 0%;
	    color: #FFF;
	    font-weight: bold;
	    font-size: 25px;
	    text-align: center;
	    width: 100%;
	}
}

/*------------------
	スマホサイズ
------------------*/
@media screen and (max-device-width:767px){

div#NTA_JR2_popup_calendar_contents{
	left: 0px !important;
}
div#NTA_calendarContainer{
	left: 0px !important;
}
#NTA_W_CalendarContainer{
	left: 0px !important;
}
	@media screen and (orientation: portrait) { /* 縦向きの場合のスタイル */
		#modal-content {
			width: 90% ;
			height: 75%;
			margin: 0 ;
			overflow: hidden;
		}
		#modal-overlay {
			height: 120%;
		}
		.sectiona{
			margin:0 auto;
		 	vertical-align: middle; 
		}

		.sectiona div.sectiona{
			background: linear-gradient(90deg,#96bf4b 0%,#96bf4b 50%,#ee7162 50%,#ee7162 100%);
		}
		.sectiona a{
			font-family : inherit;
		}
		.square_btnYes{
			line-height: 25px;
		    width: 60%;
		    height: 25px;
		    margin-top: 20%;
		    margin-left: 12%;
		    font-size: 70%;
			border: solid 1.5px #fff;
		}
		.square_btnNo{
			line-height: 25px;
		    width: 65%;
		    height: 25px;
		    margin-top: 20%;
		    margin-left: 11%;
		    font-size: 70%;
			border: solid 1.5px #fff;
		}
		.BackQuestion{
		    font-size: 75%;
		}
		.StartBack{
		    font-size: 75%;
		    margin: -10% 3%;
		}
		#modal-close{
		    border: solid 1.5px #fff;
		    width: 20px;
		    font-size: 20px;
		    line-height: 20px;
		    left: 90.5%;
		}
		.sectiona img{
			width:auto;
			height:100px;
			float:left;
		}
		.boox img{
			width: 100%;
    		height: auto;
		}
		.boox{
		    background-color: #CFF;
		    word-break: break-word;
		    font-size: 70%;
		    width: 75%;
		    margin: 22% 11%;
			border: solid 5px #FFF;
		}
		.boox p{
	    	align-items: center;
	   		justify-content: center;
			height:100%;
			text-align:center;
			font-size:11px;
		}
		.titleboox{
			position: absolute;
			display: inline-block;
			color: #FFF;
			font-weight: bold;
			font-size: 110%;
			text-align: center;
			width: 100%;
			margin: 10% 0px;
		}
		.leftboox{
			width: 40%;
    		margin: 30% 3%;
		}
		.rightboox{
			width: 40%;
			margin: 30% 6%;
		}
		.leftimg{
			border: double 5px #fff;
	  	}
    	.rightimg{
			border: double 5px #fff;
		}
		.CenterText{
			position: absolute;
			margin: 86% 0%;
			color: #FFF;
			font-weight: bold;
			font-size: 100%;
			text-align: center;
			width: 100%;
		}
	}
	@media screen and (orientation: landscape) {   /* 横向きの場合のスタイル */
		#modal-content {
			width: 75% ;
			height: 80%;
		}
		#modal-overlay {
			height: 120% ;
		}
		.sectiona{
			margin:0 auto;
		 	vertical-align: middle; 
		}
		.sectiona div.sectiona{
			background: linear-gradient(90deg,#96bf4b 0%,#96bf4b 50%,#ee7162 50%,#ee7162 100%);
		}
		.sectiona a{
			font-family : inherit;
			font-size: 70%;
		}	
		.square_btnYes{
			line-height: 30px;
			width: 100px;
	   		height: 30px;
	   		margin-top: 12%;
	    	margin-left: 15%;
			border: solid 1.5px #fff;
		}
		.square_btnNo{
			line-height: 30px;
			width: 100px;
			height: 30px;
			margin-top: 12%;
			margin-left: 15%;
			border: solid 1.5px #fff;
		}
		.BackQuestion{
		    font-size: 150%;
		}
		.StartBack{
		    font-size: 150%;
		    margin: 3%;
		}
		#modal-close{
		    border: solid 1.5px #fff;
		    width: 15px;
		    font-size: 15px;
		    line-height: 15px;
		    left: 94%;
		}
		.boox img{
			width: 100%;
			height: auto;
		}
		.boox{
		    background-color: #CFF;
			word-break: break-word;
			font-size: 30%;
			width: 40%;
			margin-top: 12%;
			margin-left: 30%;
			border: solid 5px #FFF;
		}
		.boox p{
			height:auto;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size:10px;
		}
		.titleboox{
			position: absolute;
			color: #FFF;
			font-weight: bold;
			font-size: 100%;
			text-align: center;
			width: 100%;
			margin: 5% 0px;
		}
		.leftboox{
		    width: 35%;
		    margin: 15% 6%;
		}
		.rightboox{
		    width: 35%;
		    margin: 15% 7%;
		}
		.leftimg{
			border: double 5px #fff;
		}
	    .rightimg{
			border: double 5px #fff;
	    }
		.CenterText{
			position: absolute;
		    margin: 48% 0%;
		    color: #FFF;
		    font-weight: bold;
		    font-size: 100%;
		    text-align: center;
		    width: 100%;
		}
	}
}

/*------------------
	iPadサイズ
------------------*/
@media screen and (min-device-width:768px) and ( max-device-width:1024px) {
	@media screen and (orientation: portrait) {	/* 縦向きの場合のスタイル */
		#modal-content {
			width: 80% ;
			height: 60%;
			margin: 0 ;
		} 
		#modal-overlay {
			height: 120% ;
		}
		.sectiona{
			margin:0 auto;
		 	vertical-align: middle; 
		}
		.sectiona div.sectiona{
			background: linear-gradient(90deg,#96bf4b 0%,#96bf4b 50%,#ee7162 50%,#ee7162 100%);
		}
		.sectiona a{
			font-family : inherit;
		}
		.titleboox{
			position: absolute;
		    display: inline-block;
		    color: #FFF;
		    font-weight: bold;
		    font-size: 180%;
		    text-align: center;
		    width: 100%;
		    margin: 10% 0px;
		}
		.leftboox{
		    width: 42%;
		    margin: 25% 3.5%;
		}
		.rightboox{
		    width: 42%;
		    margin: 25% 4%;
		}
		.leftimg{
			border: double 5px #fff;
		}
		.rightimg{
			border: double 5px #fff;
   		}
		.sectiona img{
			width:100%;
			height:auto;
			float:left;
		}
		.boox img{
			width: 100%;
			height: auto;
		}
		.square_btnYes{
			line-height: 30px;
		    width: 80%;
		    height: 30px;
		    margin-top: 25%;
		    margin-left: 7%;
			border: solid 2.5px #fff;
		}
		.square_btnNo{
			line-height: 30px;
		    width: 80%;
		    height: 30px;
		    margin-top: 25%;
		    margin-left: 7%;
			border: solid 2.5px #fff;
		}	
		.boox{
			word-break: break-word;
			font-size: 100%;
			width: 70%;
			margin-top: 20%;
			margin-left: 15%;
			border: solid 5px #FFF;
		}
		.boox p{	
			align-items: center;
			text-align: center;
			font-size: 20px;
			justify-content: center;
		}
		.BackQuestion{
		    font-size: 140%;
		}
		.StartBack{
		    font-size: 140%;
		    margin: 6% 3%;
		}
		#modal-close{
		    border: solid 3px #fff;
		    width: 30px;
		    font-size: 30px;
		    line-height: 30px;
		    left: 93%;
		}
		.CenterText{
			position: absolute;
		    margin: 67% 0%;
		    color: #FFF;
		    font-weight: bold;
		    font-size: 150%;
		    text-align: center;
		    width: 100%;
		    letter-spacing: 2px;
		}
	}
	@media screen and (orientation: landscape) {   /* 横向きの場合のスタイル */
		#modal-content {
			width: 70% ;
			height:75%;
			margin: 0 ;
		}
		#modal-overlay {
			height: 120% ;
		}
		.sectiona{
			margin:0 auto;
		 	vertical-align: middle; 
		}
		.sectiona div.sectiona{
			background: linear-gradient(90deg,#96bf4b 0%,#96bf4b 50%,#ee7162 50%,#ee7162 100%);
		}
		.sectiona a{
			font-family : inherit;
		}
		.titleboox{
			position: absolute;
			display: inline-block;
			color: #FFF;
  			font-weight: bold;
			font-size: 170%;
			text-align: center;
			width: 100%;
			margin: 6% 0px;
		}
		.leftboox{
		    width: 35%;
		    margin: 20% 7%;
		}
		.rightboox{
		    width: 35%;
		    margin: 20% 8%;
		}
		.leftimg{
			border: double 5px #fff;
		}
		.rightimg{
			border: double 5px #fff;
    	}
		.sectiona img{
			width:100%;
			height:auto;
			float:left;
		}
		.square_btnYes{
			line-height: 30px;
			width: 120px;
			height: 30px;
			margin-top: 15%;
			margin-left: 25%;
			border: solid 2.5px #fff;
		}

		.square_btnNo{
			line-height: 30px;
			width: 120px;
			height: 30px;
			margin-top: 15%;
			margin-left: 25%;
			border: solid 2.5px #fff;
		}
		.boox{
			word-break: break-word;
		    font-size: 100%;
		    width: 65%;
		    margin-top: 12%;
		    margin-left: 18%;
		    border: solid 5px #FFF;
		}
		.boox p{
			align-items: center;
			text-align: center;
			font-size: large;justify-content: center;
		    text-align: center;
			font-size: large;
		}
		.boox img{
			width: 100%;
			height: auto;
		}
		.BackQuestion{
		    font-size: 90%;
		}
		.StartBack{
		    font-size: 100%;
		    margin: 3%;
		}
		#modal-close{
		    border: solid 3px #fff;
		    width: 30px;
		    font-size: 30px;
		    line-height: 30px;
		    left: 92.5%;
		}
		.CenterText{
			position: absolute;
		    margin: 57% 0%;
		    color: #FFF;
		    font-weight: bold;
		    font-size: 130%;
		    text-align: center;
		    width: 100%;
		}
	}
}