@import (once) "../../css/default.less";
@import (once) "../../css/common.less";


/*  ///////////////////////*/
.bg{
	.r(15px);
}
.bg1{
	background-color:#d7edb2;
}
.pg1{
	background-color:#88c66b;
}

.tb{
	.dn;
}
.sp{
	.dn;
}

.seido .a1{
	font-size:13pt;
	background:url(../../image/point2.png) no-repeat 90% 50%;
	.bg_white;
}
.seido .a1:hover{
	background:url(../../image/point4.png) no-repeat 90% 50%;
	.bg_white;
}

.a3{
	font-size:11pt;
	background:url(../../image/point2.png) no-repeat 95% 50%;
}
.a3:hover{
	background:url(../../image/point4.png) no-repeat 95% 50%;
	.bg_white;
}

.a4{
	font-size:11pt;
	background:url(../../image/point3.png) no-repeat 95% 50%;
}
.a4:hover{
	background:url(../../image/point4.png) no-repeat 95% 50%;
	.bg_white;
}

.line3{
	background:url(../../image/line3.png) no-repeat center 0px;
}

@media (max-width:960px){
	.tb{
		.di;
	}
}
@media (max-width:500px){
	.pc{
		.dn;
	}
	.sp{
		.di;
	}
}


/* pankuzu ///////////////////////*/
.pankuzu{
	.pr;

	nav{
		.pa;
		z-index:100;
		top:85px;
	}

}

@media (max-width:800px){
	.pankuzu{
		nav{
			top:70px;
		}
	}
}

@media (max-width:500px){
	.pankuzu{
		.dn;
	}
}



/* title ///////////////////////*/
.title{
	.oh;
	.pr;
	height:570px;

	.mask{
		.bg1;
		.pa;
		width:100%;
		height:570px;
		bottom:0;
	}

	article{
		.pr;
		width:960px;
		z-index:10;
		.center;
	}

	dl{
		.dt;
		width:100%;
	}
	dd{
		.pr;
		.dtc;
		.vat;
	}
	dd:first-child{
		width:330px;
		height:500px;
	}
	dd:last-child{
		.oh;
	}
	.column{
		margin:160px 0 0 0;
	}
	.volume{
		.pa;
		left:0;
		bottom:0px;
	}
	.image{
	.pa;
		width:640px;
	}

}

@media (max-width:960px){
	.title{
		article{
			width:96%;
		}
	}
}

@media (max-width:800px){
	.title{
		height:420px;

		.mask{
			height:420px;
		}
		article{
			width:96%;
		}
		dd:first-child{
			width:290px;
			height:380px;
		}

		.column{
			margin:120px 0 0 0;
			width:240px;
		}
		.volume{
			max-width: 100%;
		}
		.image{
			.pa;
			width:460px;
		}

	}
}


@media (max-width:500px){
	.title{
		height:auto;
		.oh;
		article{
			width:auto;
		}
		.mask{
			height:600px;
			top:-150px;
		}
		dd{
			.db;
		}
		dd:first-child{
			width:auto;
			height:auto;
			.tac;
		}
		.column{
			margin:70px 0 0 0;
			width:280px;
		}
		.volume{
			.ps;
			margin:40px 0 20px 0;
			width: 280px;
		}
		dd:last-child{
			overflow:visible;
		}
		.image{
			.ps;
			width:100%;
		}

	}
}



/* talk ///////////////////////*/
.talk{

	article{
		padding:40px 0;
		width:960px;
		.center;
	}
	header h2{
		.tac;
		padding:20px 0;
	}
	header h3{
		.tac;
		font-size:13pt;
		line-height:140%;
		padding:20px;
		.fwn;
	}

	h3{
		font-size:18pt;
		line-height:140%;
		padding:0 0 30px 0;
	}
	h4{
		font-size:12pt;
		padding:0 0 30px 0;
		.bold;
	}
	.line3{
		background:url(../image/volume10/line3.png) no-repeat center bottom;
	}

	dl{
		.dt;
		letter-spacing:-0.4em;
	}
	dd{
		.dib;
		.vat;
		letter-spacing:normal;
	}
	dd img{
		width:100%;
	}


	.sec1{
		margin:20px 0 0 0;
		.bg_glay;
	
		dd:first-child{
			width:540px;
		}
		dd:last-child{
			width:420px;
		}
		.wrap{
			padding:30px;
		}
		.image1{
			padding:15px;
		}
	}


	.sec2,
	.sec3,
	.sec4{
		img{
			.r(10px);
		}
		.wrap{
			padding:40px;
		}
		dd:first-child{
			width:540px;
		}
		dd:last-child{
			width:420px;
		}
	}

	.sec2{
		.pr;
		margin:100px 0 0 0;

		.bg{
			.pa;
			.bg1;
			width:640px;
			height:100%;
			z-index:-1;
			left:0;
		}

		.image2{
			margin:20px 0;
			width:360px;
		}
		.image3{
			margin:20px 0 0 auto;
			width:360px;
		}
	}


	.sec3{
		.pr;
		margin:60px 0 0 0;

		.bg{
			.pa;
			.bg1;
			width:800px;
			height:100%;
			z-index:-1;
			right:0;
		}

		dd:first-child{
			.right;
		}
	
		.image4{
			margin:40px 0 20px auto;
			width:360px;
		}
		.image5{
			margin:20px 0;
		}
		.sec5_image4{
			width: 720px;
			margin-left: -260px;
		}
		.sec5_image4 img{
			max-width: 720px;
			width: 100%;
		}
	}


	.sec4{
		.pr;
		margin:60px 0 0 0;

		.bg{
			.pa;
			.bg1;
			width:640px;
			height:100%;
			z-index:-1;
			left:0;
		}

		.image6{
			margin:100px 0 20px 0;
			width:360px;
		}
		.image7{
			margin:20px 0;
		}
	}

}




@media (max-width:960px){
	.talk{

		article{
			padding:40px 0;
			width:96%;
		}

		h3{
			font-size:15pt;
			padding:20px 0;
			line-height:140%;
		}
		h4{
			font-size:12pt;
			padding:0 0 30px 0;
			.bold;
		}
	
		dl{
			.dt;
		}
		dd{
			.dib;
			.vat;
		}
		dd img{
			width:100%;
		}

		.sec1{
			margin:20px 0 0 0;
			.bg_glay;
		
			dd:first-child{
				width:50%;
			}
			dd:last-child{
				width:50%;
			}
			.wrap{
				padding:20px;
			}
			.image1{
				padding:15px 15px 15px 0;
			}
		}

		.sec2,
		.sec3,
		.sec4{
			.bg{
				width:70%;
				height:100%;
			}
			dd:first-child{
				width:60%;
			}
			dd:last-child{
				width:40%;
			}
			.wrap{
				padding:20px;
			}
		}

		.sec2{
			margin:40px 0 0 0;

			.image2,
			.image3{
				width:100%;
				margin:20px 0;
			}
		}

		.sec3{
			.pr;
			margin:60px 0 0 0;

			.image4,
			.image5 {
				width:100%;
			}
			.sec5_image4{
				width: 100%;
				padding:0 0 0 0;
				margin-left: 0;
			}
			.sec5_image4 img{
				max-width: 960px;
				width: 100%;
			}

		}

		.sec4{
			.pr;
			margin:60px 0 0 0;
			.image6,
			.image7{
				width:100%;
			}
		}

	}
}



@media (max-width:700px){
	.talk{
		.sec2{
			.bg{
				height:100%;
			}
		}
	}
}

@media (max-width:500px){
	.talk{

		header h3{
			.tac;
			font-size:10pt;
			line-height:160%;
			padding:20px;
			.fwn;
		}
		.line3{
			width:96%;
			.center;
		}

		article{
			padding:20px 0;
			width:100%;
		}

		h3{
			font-size:16pt;
			padding:0 0 10px 0;
		}
		h4{
			font-size:10pt;
			padding:0 0 20px 0;
			.bold;
		}

		dl{
			.db;
		}
		dd{
			.db;
			.vat;
		}
		dd img{
			width:100%;
		}

		.sec1{
			dd:first-child,
			dd:last-child{
				width:100%;
			}
			.wrap{
				padding:20px;
			}
			.image1{
				padding:0 15px 15px 15px;
			}
		}


		.sec2,
		.sec3,
		.sec4{
			.bg{
				.dn;
			}
			dl{
				.bg1;
				.r(15px);
			}
			dd:first-child,
			dd:last-child{
				width:100%;
			}
		}

		.sec2{
			margin:30px auto 0 auto;
			width:96%;

			.image2{
				margin:0 auto;
				padding:0 0 20px 0;
				width:90%;
			}
			.image3{
				margin:0 auto;
				padding:0 0 30px 0;
				width:90%;
			}
		}

		.sec3{
			.pr;
			margin:30px auto 0 auto;
			width:96%;

			.image4{
				margin:0 auto;
				padding:0 0 20px 0;
				width:90%;
			}
			.image5{
				padding:0 0 30px 0;
				margin:0 auto;
				width:90%;
			}
		}

		.sec4{
			.pr;
			margin:30px auto 0 auto;
			width:96%;

			.image6{
				padding:0 0 20px;
				margin:0 auto;
				width:90%;
				.fn;
			}
			.image7{
				padding:0 0 30px;
				margin:0 auto;
				width:90%;
			}
		}

	}
}


/*.seido ///////////////////////*/
.seido{
	padding:40px 0;

	article{
		width:960px;
		.center;
	}
	header h2{
		.tac;
		margin:0 0 60px 0;
		height:20px;
		.bg1;
		.r(20px);
		p{
			.pr;
			.db;
			width:500px;
			.center;
			top:-5px;
			.bg_white;
		}
	}

	.sec{
		margin:0 0 40px 0;
		.bg_glay;
	}
	.wrap{
		padding:30px;
	}

	h3{
		font-size:18pt;
		padding:0 0 30px 0;
	}

}

@media (max-width:960px){
	.seido{
		article{
			width:96%;
		}
	}
}

@media (max-width:680px){
	.seido{
		margin-bottom:40px;
		padding:40px 0 0 0;

		article{
			width:100%;
		}
		header h2{
			width:96%;
			margin:0 auto 40px auto;

			p{
				width:60%;
				.center;
				top:0;
			}
			img{
				height:20px;
				margin-top:-3px;
			}
		}

		.sec{
			margin:0;
		}
		.wrap{
			padding:15px;
		}
		h3{
			font-size:14pt;
			padding:10px 0 20px 0;
		}

	}
}
@media (max-width:500px){
	.seido{

		article{
			width:100%;
		}
		header h2{
			width:96%;
			margin:0 auto 40px auto;

			p{
				width:50%;
				.center;
				top:0;
			}
			img{
				height:20px;
				margin-top:-18px;
			}
		}
	}
}

/* contact ///////////////////////*/
.contact{
	.bg_glay;

	article{
		padding:40px 0;
		width:960px;
		.center;
	}

	h2{
		font-size:18pt;
		padding:0 0 20px 0;
	}
	h3{
		font-size:18pt;
		line-height:150%;
		padding:20px 0 0 0;
	}
	small{
		font-size:11pt;
	}
	img{
		width:100%;
	}
	
	dl{
		.dt;
		width:100%;
		.center;
	}
	dd{
		.dtc;
		.vam;
	}
	dd:last-child{
		width:420px;
	}

}


@media (max-width:960px){
	.contact{
		article{
			width:96%;
		}
		dd:first-child{
			width:60%;
		}
		dd:last-child{
			width:40%
		}
		h2{
			font-size:14pt;
			padding:0 0 20px 0;
		}
		h3{
			font-size:13pt;
			padding:20px 0 0 0;
		}
	}
}


@media (max-width:500px){
	.contact{
		dd{
			.db;
			.tac;
		}
		dd:first-child{
			width:100%;
			padding:0 0 20px 0;
		}
		dd:last-child{
			width:100%;
		}
		img{
			width:80%;
		}
	}
}


/* pager ///////////////////////*/
.pager{
	.pg1;
	padding:20px 0;

	dl{
		.dt;
		.center;
	}
	dd{
		.dtc;
		padding:0 20px;
		color:#FFFFFF;
		.bold;
	}
	.nx {
		opacity: .4;
	}
	a{
		color:#FFFFFF;
		.bold;
		.tdu;
	}
	img{
		.vam;
		margin:0 10px;
		height:30px;
	}
	a:hover{
		opacity:.7;
	}
}


/* banner ///////////////////////*/
.banner{

	dl{
		.dt;
		width:100%;
		.center;
	}
	dd{
		.dtc;
	}
	dd:first-child{
		background:url(../image/banner_bg2.jpg) repeat right bottom;
		background-size:cover;
	}
	dd:last-child{
		background:url(../image/banner_bg1.jpg) repeat right bottom;
		background-size:cover;
	}
	.wrap{
		.tac;
		padding:50px;
	}
	a{
		width:280px;
		padding:10px 0;
		margin:20px auto 0 auto;
		background-color:#FFFFFF;
	.bold;
		font-szie:14pt;
	}

}


@media (max-width:800px){
	.banner{
		img{
			width:100%;
		}
		a{
			width:100%;
		}
		.wrap{
			padding:50px 30px;
		}
	}
}


@media (max-width:520px){
	.banner{
		dd{
			.db;
		}
		img{
			width:100%;
		}
		.wrap{
			padding:50px;
		}
	}
}

/*13のみ ///////////////////////*/
.clearfix:after { content: ""; display: block; clear: both; }
.bg-all{
	background-color: #d7edb2;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
}
.bg-all-title{
	text-align: center;
	margin-bottom: 30px;
	padding:10px;
	font-size: 25px;
	font-weight: bold;
	color: #FFF;
	background-color: #55ad21;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
}
.font-bold{
	font-weight: bold;
}
.counter_left{
	float: left;
	max-width: 48%;
	margin-right: 2%;
	margin-top: 20px;
}
.counter_right{
	float: right;
	max-width: 48%;
	margin-left: 2%;
	margin-top: 20px;
}
.counter_left img,.counter_right img{
	width: 100%;
}
.mt5{
	margin-top: 1em;
}
@media (max-width:640px){
.counter_left{
	float: none;
	max-width: 100%;
	margin-right: 0;
}
.counter_right{
	float: none;
	max-width: 100%;
	margin-left: 0%;
}
}
.h4_title{
	margin-top: 10px !important;
	padding: 0 0 5px 0 !important;
}
.link_column{
	color: #79CCE0;
	font-weight: bold;
}
.link_column:hover{
	opacity: .7;
	text-decoration: underline;
}
.mtp{
margin-top: 1em;
}

.bg-all-img{
	margin-top: 20px;
}
.bg-all-img img{
	width: 100%;
}
.all-img {
	margin-top: 20px;
	width: 100%;
}
.all-list{
	list-style-type: none !important;
	list-style-position: outside !important;
	padding-left: 0 !important;
}
.all-list img {
	width: 100%;
}
.all-list li{
	width: 32%;
	margin-right: 2%;
	float: left;
}
.all-list_2 li{
	width: 49%;
}
.all-list li:last-child {
	margin-right: 0;
}
.mt10{
margin-top: 0 !important;
}
@media (max-width:500px){
	.all-list li{
		width: 100%;
		margin-right: 0;
		margin-top: 20px;
		float:none;
	}
}
@media (max-width:640px){
	.mt10{
		margin-top: 10% !important;
	}
}
.h4-fnormal{
	font-weight: normal
} 
.number-list{
	padding-left: 20px;
	margin: 0.5em 0;
}
.number-list li{
	font-weight: bold
}
.class-list{
	margin: 0.5em 0;
}
.class-list span {
	font-weight: bold
}
.corner{
	margin-bottom: 0.5em;
}
.h4-column{
	padding: .2em !important;
	border-bottom: 1px solid #d7edb2;
	margin-bottom: .5em !important;

}
.h4-column-box{
	padding: 1em;
	margin-top: 1.2em;
	background-color: #EAF1DE;
}
.h4-column-box ul{
	padding-left:  2.5em;
	list-style: disc;
}
.mt_p{
	margin-top: .8em;
}
.text_emphasis{
	font-weight: bold;
	color: #FB6B56;
}
.link_column{
	color: #79CCE0;
	font-weight: bold;
}
.link_column:hover{
	opacity: .7;
	text-decoration: underline;
}
.graph-box-img{
	margin-top: 1em;
}
.graph-box-img img{
	width: 100%;
	margin-bottom: 1em;
}
@media (min-width:960px){
.graph-box{
	display: flex;
	margin-right: -20px;
	margin-left: -20px;
}
.graph-box-text{
	flex-basis: 50%;
	max-width: 50%;
	padding-right: 20px;
	padding-left: 20px
}
.graph-box-img{
	flex-basis: 50%;
	max-width: 50%;
	padding-right: 20px;
	padding-left: 20px;
	margin-top: 0;
}
}