@charset "shift_jis";
/* 左ボックスCSS */

video{
position: absolute;
width: 100%;
}
#video-box{
background: #FFF;
padding: 10px;
margin: 0 auto 15px auto;
box-shadow:0 0 10px 0px rgba(0,0,0,0.3);
border-radius: 3px;
overflow: hidden;
width: 537px;
}
#stage-box{
position: relative;
width: 480px;
height: 270px;
float: left;
}
.stage {
	width: 100%;
	position: absolute;
}
#side-box{
width: 35px;
float: right;
margin-right: 5px;
}
#side-box strong{
font-weight: normal;
font-size:14px;
display: block;
margin-bottom: 10px;
text-align: center;
}
#side-box strong span{
font-size:8px;
display: block;
}
#side-box div{
border:1px solid #FFF;
margin-bottom: 10px;
line-height: 0;
}
#side-box div.on{
border: 1px solid #0F68C8;
}
#side-box img{
width: 100%;
height: auto;
}
.video01{
display:block;
z-index: 1;
}
#link span a{

}
#link span a.on{
	position: absolute;
	z-index: 100;
	display: block;
	width: 480px;
	height: 270px;
	left: 0;
	top: 0;
}
.video02,.video03,.video04,.video05{
display: none;
z-index: 10;
}
.video01.on ,.video02.on,.video03.on,.video04.on,.video05.on{
display: block;
}
.select01,.select02,.select03,.select04,.select05{
position: relative;
}
#side-box div img{
transition:all 0.5s;
}
#side-box div img:hover{
opacity: 0.5;
}
.select01.on img,.select02.on img,.select03.on img,.select04.on img,.select05.on img{
opacity: 0.3;
}

.select01.on:before,.select02.on:before,.select03.on:before,.select04.on:before,.select05.on:before{
content: '';
background-image:url(../video/play.png);
background-repeat: no-repeat;
background-size: contain;
display: block;
width: 35px;
height: 35px;
line-height: 0;
text-align: center;
position: absolute;
z-index: 100;
margin:auto;
top:0;
bottom: 0;
left: 0;
right: 0;
}
.select01.on:hover,.select02.on:hover,.select03.on:hover,.select04.on:hover,.select05.on:hover{
cursor: pointer;
}

#flash_box{
width:551px;
height:268px;
background:url(../images/center_box/flash_bg.gif) no-repeat;
margin:0 0 15px 0;
padding:12px;
display: none;
}

#center_box h3{
margin:0 0 0 2px;
padding:0;
width:556px;
height:34px;

}

#center_box h4{
	margin:0;
}

.news_box01 {
	width:558px;
	height:900px;
	overflow-y:auto;
	margin:10px 0 0 0;
	padding:0;

}



h3.news_title01{
background:url(../images/center_box/news_title01.jpg) no-repeat;
text-indent:-9999px;
}

h3.news_title01 a{
width:556px;
height:34px;
display:block;
}


dl#news_box {
margin:15px 0 10px 0;
padding:0;
width:550px;
}
#news_box h4{
margin:0 0 3px 0;
font-size:13px;
color:#C00;
}

#news_box dt{
margin:0 0 10px 0;
padding:0 0 5px 10px;
width:110px;
float:left;
color:#555;
/*border-bottom:1px #DDD solid;*/
background:url(../images/left_box/arrow01.gif) no-repeat 105px 6px;
}
#news_box dt.new{
background:url(../images/center_box/new_icon.gif) no-repeat 90px 5px;
}

#news_box dd{
width:400px;
border-bottom:1px #DDD solid;
padding:0 0 5px 0;
margin:0 0 10px 0;
float:left;
}

.white{
color:#FFF;
}

/*コンテンツ用CSS*/
table h4{
margin:0;
padding:0;
}
blockquote{
margin:15px 20px;
}
img.margin01{
margin:0 0 15px 15px;
}
.section-box{
	margin:15px 0 15px 15px;
	width:526px;
}
.section-box h4{
	margin:0 0 15px 0 !important;
}
.section-box strong{
	color:#039;
	font-size:14px;
	margin:0 0 5px 0;
	display:block;
}
.section-box p{
	margin:0 0 20px 15px;
	overflow:hidden;
}
.section-box p.right-text{
	text-align:right;
	margin:25px 0 40px 0;
}
.section-box p img.right{
	margin:0 0 0 20px;
	float:right;
	border:1px solid #DDD;
}
.section-box ol{
	margin:0 0 15px 0;
}
.section-box ol li{
	margin:0 0 10px 0;
}
.section-box ol ol{
	margin:10px 0 0 0;
	font-weight:bold;
}
.section-box ol ol li{
	margin:0 0 5px 0;
}

.section-box dl{
	overflow:hidden;
	margin:15px 0 0 15px;
	padding:0;
}
.section-box dt {
	display:block;
	float:left;
	font-weight:bold;
}

.section-box dt span{
	font-weight:normal;
}

.section-box dd{
	display:block;
	float:right;
	text-align:center;
}

.section-box dd .pdf{
	margin:0 0 5px 0;
	padding:3px;
	border:1px solid #CCC;
}

.table_border01{
border-left:2px solid #DDD;
border-top:2px solid #DDD;
}
.table_border01 td{
border-right:2px solid #DDD;
border-bottom:2px solid #DDD;
}



.subtext_box01{
width:526px;
margin:0 0 0 17px;
text-align:left;
}
.subtext_box02{
width:560px;
margin:0 0 0 0;
text-align:left;
}
.subtext_box01 td{

}

caption{
	text-align:left;
}

.subtext_box01 h4{
margin:20px 0 15px 0;
padding:0;
}


/*サイトマップ用*/

.sitemap_leftbox{
width:230px;
float:left;
margin:0 0 60px 20px;
}
.sitemap_rightbox{
width:230px;
float:right;
}
.sitemap_box01{
width:204px;
margin:20px 0 0 0;
padding:10px 0 5px 10px;
border:1px solid #DDD;
}
.sitemap_box02{
width:204px;
margin:20px 0 0 0;
padding:10px 0 5px 10px;
border:1px solid #DDD;
}


.sitemap_box01 h4,.sitemap_box02 h4{
margin:0 0 5px 0;
padding:0 0 0 10px;
font-size:18px;
background:url(../images/left_box/arrow02.gif) no-repeat 0 center;
}

#center_box h4.link{
margin:0 0 5px 0;
padding:0 0 0 10px;
font-size:18px;
background:url(../images/left_box/arrow01.gif) no-repeat 0 center;
}


ul.sitemap{
margin:0;
padding:0;
}

.sitemap li{
margin:0 0 0 35px;
padding:0;
list-style:url(../images/sitemap-line01.gif);
}

.sitemap li.arrow02{
margin:5px 0 10px 35px;
}

ul.sitemap li.scat-title{
margin:0 0 0 -18px;
padding:0;
list-style:url(../images/sitemap-line01.gif);
}

/*みどり用CSS*/

#midori_leftbox{
width:250px;
margin:0 0 30px 0;
padding:0;
float:left;
}

#midori_rightbox{
width:250px;
margin:0 0 30px 0;
padding:0;
float:right;
}

ul#midori{
margin:0;
padding:0;
}

#midori li{
list-style:none;
background:url(../images/center_box/pdf_icon.gif) left top no-repeat;
padding:0 15px 15px 25px;
margin:0 0 5px 15px ;
}

/*会員紹介*/
h3.member_h3{
	float:left !important;
	width:120px !important;
}
.total_number{
	float:right;
	color:#666;
	font-size:14px;
	margin:7px 15px 0 0;
}
ul.member_ul{
	margin:0;
	padding:0;
	list-style:none;
	line-height:100%;
	font-size:14px;
}

.member_ul li{
	width:121px;
	background:url(../images/member/menu_bg.jpg) no-repeat left top;
	padding:8px 5px 10px 30px;
	margin:0 15px 20px 0;
	float:left;
}

table.member_table01{
	margin:15px 0;
	border-top:2px solid #005EB6;
	border-left:2px solid #005EB6;
	border-right:1px solid #005EB6;
	border-bottom:1px solid #005EB6;
}
table.member_table01 img{
	margin:15px 15px 15px 15px;
}

.member_table01 td{
	border-right:1px solid #005EB6;
	border-bottom:1px solid #005EB6;
	padding:5px;
}
.table_blue01{
	background:#005EB6;
}
.table_blue02{
	background:#ECFBFF;
	color:#003399;
}
.table_blue01 h5{
	font-size:14px;
	color:#FFFFFF;
	padding:0;
	margin:0;
}
.map_box01{
	border:2px solid #005EB6;
	padding:2px;
	margin:20px 0;
}
.page_top{
	text-align:right;
	color:#666666;
}
.page_top a{
	color:#666666;
}

dl.intro{
	margin:0 0 15px 0;
	padding:0 0 10px 15px;
	font-size:14px;
	border-bottom:1px solid #CCCCCC;
}
.intro dt{
	margin:0 0 10px 0; 
	font-weight:bold;
}

.intro dd{
	margin:0 0 5px 10px;
}


/*CSR活動*/

.csr_textbox{
	width:525px;
	overflow:hidden;
	border-bottom:1px solid #CCC;
	padding:0 0 10px 0;
	margin:0 0 10px 0;
}
img.sumphoto01{
	margin:0 15px 0 0;
	float:left;
	border:0;
}
.csr_subtextbox{
	float:right;
	width:440px;
}
p.data{
	margin:0;
	padding:0 0 0 10px;
	background:url(../images/csr/arrow.gif) left center no-repeat;
	color:#666;
}

h4.blue01{
	background:#6699CC;
	color:#FFF;
	margin:20px 0 15px 0;
	padding:5px 10px;
	border:1px solid #039;
}
h4.blue01 a{
	color:#FFF;
}
h4.blue01 a:hover{
	text-decoration:none;
}

p.year{
	margin:0;
}

p.back{
	margin:10px 0 5px 0;
	text-align:right;
}

.csr-bknum{
	text-align:right;
}


/*-----------------------
浄化槽教室WEB受講
-------------------------*/
*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

*::--webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}
.video-box{
margin: 0 auto 2%;
}
.video-box video{
width:100%;
height: auto;
position: relative;
}
.popup img{
width: 100%;
height: auto;
}
.popup .header-box{
margin: 3% auto 0;
}
.popup #contenr_box h1{
text-indent: 0;
height: auto;
font-size:100%;
width: 25%;
}
.popup #contenr_box h2.web_attendance{
width: 100%;
height: auto;
text-align: center;
color:#2F59AC;
padding: 2% 0;
margin:1% auto 5%;
border-top: 1px solid #2F59AC;
border-bottom: 1px solid #2F59AC;
}

.popup #contenr_box{
margin:0 auto;
max-width:850px;
width: 90%;
}
.control-box{
text-align: center;
}
.mov-button{
box-sizing: border-box;
display: inline-block;
background: #EEE;
border-radius: 5px;
padding: 1%;
margin:0 1% 2% 0;
}
.mov-button:hover{
cursor: pointer;
background: #CCC;
}
.control-box div{
}
i.fas{
display: inline-block;
}
span.text{
display: inline-block;
}
#sound{
box-sizing: border-box;
display: inline-block;
background: #FFF;
border-radius: 5px;
padding: 1%;
margin:0 0 2% 0;
}

#vol{
display: inline-block;
width: 35px;
}
#vol-up,#vol-down{
margin-right: 0;
}
p.right{
text-align: right;
}
p.center{
text-align: center;
}
p.margin01{
margin-bottom: 5%;
}

@media (max-width: 414px){
.popup #contenr_box{
width:90%;
}
p.center,p.right{
text-align: left;
}
p.margin01{
margin-bottom: 5%;
}
.popup #contenr_box h1{
width: 45%;
}
.popup #contenr_box h2.web_attendance{
padding: 5% 0;
}
.mov-button{
padding: 3%;
}
#vol-up,#vol-down,#vol,#sound{
display: none;
}
}

.form-box{
border:2px solid #CCC;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-radius: 5px;
}
.wide-box01 dl{
width:100%;
margin: 0 auto;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
display: table;
}
.wide-box01 dt,.wide-box01 dd{
border-right:1px solid #CCC;
padding: 2% 3%;
display: table-cell;
vertical-align: middle;
}
.wide-box01 dt{
background:#EEE;
width: 30%;
}
.wide-box01 dd{
width: 70%;
}
.wide-box01 input[type="text"],.wide-box01 input[type="email"],.wide-box01 textarea{
padding: 1% 2%;
margin-right: 2%;
width: 50%;
font-size:14px;
}
.wide-box01 input[type="text"].wide01{
width: 20%;
}
.wide-box01 textarea{
border:1px solid #CCC;
width: 96%;
}
.wide-box01 input.margin01{
margin-top: 2%;
display: block;
}
.wide-box01 .submit-box{
text-align: center;
margin:0 auto;
}
.wide-box01 .submit-box input{
display: inline-block;
}
span.small{
font-size:80%;
line-height: 1;
}
span.red{
color:#FF0037;
}
span.red-box{
background:#FF0037;
color:#FFF;
display: inline-block;
padding:2.5%;
border-radius: 3px;
}
span.blue-box{
background:#0C7AC2;
color:#FFF;
display: inline-block;
padding:2.5%;
border-radius: 3px;
}
span.green-box{
background:#069F84;
color:#FFF;

display: inline-block;
padding:2.5%;
border-radius: 3px;
}
p span.green-box{
padding: 0.5%;
margin-right: 0.5%;
}

img.error{
width: 15%;
margin: 0 auto;
display: block;
}
input.button{
display: inline-block;
padding: 10px;
font-weight: bold;
width: 200px;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius:5px;
margin: 5% 2%;
font-size:13px;
}
input.button.submit{
background:#2F59AC;
color:#FFF;
}
input.button.back{
background: #CCC;
}
input.submit:hover{
background:#2A6CEC;
cursor:pointer;
}
input.back:hover{
background: #DDD;
cursor:pointer;
}

.formcheck-box{
width: 80%;
margin: 0 auto 3%;
}
.formcheck-box td{
padding: 3%;
background: #FFF;
}
.formcheck-box th{
background: #EEE;
text-align: left;
font-weight: normal;
padding:3%;
width: 30%;
}
.formcheck-box th.header{
background: #2F59AC;
color:#FFF;
text-align: center;
font-weight: bold;
padding: 3%;
}
@media (max-width: 414px){
.form-box{
border:1px solid #CCC !important;
}
.wide-box01 dl{
width:100%;
margin: 0 auto;
border-right:none;
border-bottom:none;
display: block;
box-sizing: border-box;
}
.wide-box01 dt,.wide-box01 dd{
border-right:none;
padding: 2% 3%;
display: block;
box-sizing: border-box;
}
.wide-box01 dt{
background:#EEE;
width: 100%;
}
.wide-box01 dd{
width: 100%;
margin:0 0 5% 0;
}
.wide-box01 input[type="text"],.wide-box01 input[type="email"],.wide-box01 textarea{
padding:3%;
margin: 2% 0 2% 0;
width: 100%;
display: block;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
border:1px solid #CCC;
}

.wide-box01 input[type="text"].wide01{
width: 100%;
display: block;
box-sizing: border-box;
}
.wide-box01 input[type="text"].wide01.zipcode{
width: 20%;
display: inline-block;
margin-bottom: 1%;
}
.wide-box01 textarea{
width: 100%;
}
.wide-box01 input.margin01{
margin-top: 2%;
display: block;
}
.wide-box01 .submit-box{
text-align: center;
margin:0 auto;
}
.wide-box01 .submit-box input{
display: inline-block;
}

span.red-box{
padding:1.5%;
}
span.blue-box{
padding:1.5%;
}
span.green-box{
padding:1.5%;
}
p span.green-box{
padding: 0.5%;
margin-right: 0.5%;
}

img.error{
width: 30%;
}
.formcheck-box{
width: 100%;
}
}

.subtext_box01.onestop{
margin-top: 30px;
}
.onestop .border_box{
border:2px solid #004eab;
text-align: center;
padding: 10px 0;
margin-bottom: 20px;
}
.onestop .border_box strong{
display: block;
margin-bottom: 10px;
font-size:20px;
}
.onestop p.caution{
text-align: center;
line-height: 2;
}
.onestop p.mail_link{
display:block;
text-align: center;
margin: 0 auto;
}
.onestop p.mail_link a{
display:  inline-block;
text-align: center;
color:#fff;
background:#004eab;
padding: 10px 20px;
border-radius: 20px;
}

/* -- for JavaScript ここから -------------------------------------------------------------------------------- */

form#mail_form dl dt span.required,
form#mail_form dl dt span.optional {
/*	display: inline-block;*/
	float: left;
	color: #ffffff;
	padding: 4px 10px;
	border-radius: 3px;
	display: none;
}

form#mail_form dl dt span.required {
	background: #d9534f;
	border: 1px solid #d43f3a;
}

form#mail_form dl dt span.optional {
	background: #337ab7;
	border: 1px solid #2e6da4;
}

form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match {
	display: block;
	color: #ff0000;
	margin-top: 3px;
}

p#form_submit{
display: inline-block;
margin: 0;
padding: 0;
}
span.loading {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-top: 5px solid rgba( 255, 255, 255, 0.2 );
	border-right: 5px solid rgba( 255, 255, 255, 0.2 );
	border-bottom: 5px solid rgba( 255, 255, 255, 0.2 );
	border-left: 5px solid #ffffff;
	-webkit-transform: translateZ( 0 );
	-ms-transform: translateZ( 0 );
	transform: translateZ( 0 );
	-webkit-animation: load-circle 1.0s linear infinite;
	animation: load-circle 1.0s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
}

@-webkit-keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}

@keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}


/* -- for JavaScript ここまで -------------------------------------------------------------------------------- */


@media (max-width: 414px){
.popup #copyright_box{
width:90%;
}
}
.popup #copyright_box{
width: 100%;
}