/* component structure */

/* left right div - lrdiv */
div.lrdiv>.c { overflow-x:hidden; overflow-y:hidden; }
div.lrdiv>.r { float:right; }
div.lrdiv>.l { float:left;}
div.lrdiv::after {
	content: '';
	display: block;
	clear:both;
}
@media (max-width:767px) {
	div.lrdiv.resp>div { float: none; }
}


/* leftRightBtnDiv */
.leftRightBtnDiv { display: table; width:100%; margin-bottom:30px;}
.leftRightBtnDiv>div { display: table-cell;}
.leftRightBtnDiv>div:first-child,.leftRightBtnDiv>div:last-child { width:0; padding:0;  vertical-align: middle;}
.leftRightBtnDiv a.lrbtn>img { width:100%; }
/*.leftRightBtnDiv .lrbtn { font-size:300%; color:#000;}*/
.lrbottombtn { padding:20px; text-align: center;}
.lrbottombtn a+a { margin-left:40px; } 
.lrbottombtn span { font-size:120%; color:#000; }
.lrbottombtn span+span { margin-left:10px; }
@media (max-width:1200px) {
	.leftRightBtnDiv>div:first-child,.leftRightBtnDiv>div:last-child { width:80px; padding:0 20px; }
}
@media (max-width:767px) {
	.leftRightBtnDiv, .leftRightBtnDiv>div { display:block; padding:0!important; }
}


/* tb2resplist */
.tb2resplist { display: table; border-spacing: 20px; border-collapse: separate; }
.tb2resplist>div { display:table-row; }
.tb2resplist>div>div { display: table-cell; width:50%; border-radius: 20px; padding:25px; }
@media (max-width:767px) {
.tb2resplist,.tb2resplist>div,.tb2resplist>div>div { display: block; margin:0 auto;}
	.tb2resplist>div>div { margin-top:20px; width:100%; font-size:140%;  }
}
/* modalbox */
/* son form submit */
.modalbox { position:fixed; width:100vw; height:100vh; top:0; left:0; background-color:rgba(0,0,0,0.8); z-index:10000;  display:table; z-index: 2000;}
.modalbox>div { display:table-cell; vertical-align:middle; text-align:center; }
.modalbox>div>div { position:relative; padding:20px; max-width:850px; width:90%; margin:0 auto; padding:30px; text-align:left; font-size:150%; max-height:90vh; overflow-y:auto;}
@media (min-width:768px) { .modalbox>div>div {padding:30px 60px;} }
.modalbox>div>div .s { font-size:70%;}
.modalbox>div>div>.xbtn { position:absolute; right:1px; top:1px;  width:30px; height:30px; text-align:center; line-height:30px; color:#fff;}
.modalbox>div>div>a { color:#fff; cursor: pointer; padding:5px 30px; }
.modalbox img { max-width:100%; display:block; margin:0 auto; }
.modalbox h { font-size:170%; font-weight:bold; }
.modalbox .date { font-size:80%; }
.modalbox .content { font-size:80%;}
.modalbox .content a { color:#fff;}
.modalbox .photo { width:100px; }

/* modalbox tmp alertbox */
.modalbox.alertbox .xbtn { color:#000; font-size:25px;}
.modalbox.alertbox>div>div {
	background:#2ea7e0; border: 2px solid #2ea7e0; padding:45px;  border-radius:20px;
	line-height:2.4;
	color:#fff; font-size:18px; text-align: center;
}
.modalbox.alertbox>div>div>h1 { font-size:40px; margin:0; padding:0; text-align:center;}
.modalbox.alertbox>div>div>h2 { display:inline; margin:0; padding:0; font-size:25px; color:#faee00;}
.modalbox.alertbox>div>div a { background: none; color:#fff; padding:5px;}
@media (max-width:767px) {
	.modalbox.alertbox>div>div { padding:30px 10px; max-width:90%; font-size:15px;}
.modalbox.alertbox>div>div>h1 { font-size:30px;}
.modalbox.alertbox>div>div>h2 { font-size:17px;}
}



/* color box */
.colorbox {
	position:absolute; top: 0px; left:0;
	width:calc(100% - 240px);
	height:calc(100vh - 250px);
	background-color: #70c7d4; border:1px solid #ccc;
	padding:70px 70px; color:#fff;
	margin:0 120px;
	overflow: auto;
	z-index:2000;
}

.colorbox .xbtn { position: absolute; right:15px; top:10px; font-size: 150%; color:#fff; }
.colorbox .title { font-size:170%; text-align: left; letter-spacing: 10px; color:#fff!important;}
.colorbox .stitle { font-size:130%; margin: 10px; }
.colorbox .desc { font-size:110%; margin: 10px; }
.colorbox ul { padding-left:20px;  }
/*.colorbox ul li:before { content: "~"; display: inline-block; text-indent: -20px; }*/

@media (max-width:767px) {
	.colorbox {
		position: absolute; height:auto; width:100%;
		top:0px; left:0px;
		margin:0;
		padding:60px 20px;
	}
	.colorbox .title { font-size:150%; letter-spacing: 7px; }
	.colorbox .desc { font-size:100%; margin: 10px; }
}




/* listblock */
.listblock { margin:auto; max-width:920px;}
.listblock>div { display: inline-block; padding:10px;}
.listblock>div>* { max-width: 100%; }
	.listblock>div>a { width:100%; }

@media (max-width:767px) {
	.listblock { display:table; width:100%;border-spacing: 20px; border-collapse: separate;  }
	.listblock>div { display: table-row; padding:5px;}
	.listblock>div { text-align: center;}
}

.navbar { margin:0; padding:0; margin-left:100px; margin-bottom:10px; min-height: auto;}
.navbar>ul { margin:0; padding: 0!important;  }
.navbar>ul>li { display: inline-block; font-weight: bold; text-indent: inherit!important;  }
.navbar>ul>li>a { color:#000;  }
.navbar>ul>li>a:hover { color:grey; text-decoration: underline!important; }
.navbar>ul>li:not(:first-child):before { content:">"; display:inline-block; padding:0 10px;; }

@media (max-width:767px) {
	.navbar { margin-left:0; }
}

.youtubeFrame {position:relative; padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.youtubeFrame>iframe {
	 position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
.youtubeFrame>.youtubetitle { display:none; text-align: right; color:purple; padding:3px 10px; }