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


/*  ///////////////////////*/
.bg{
	.r(15px);
}
.bg1{
	background-color:#c9d9f7;
}
.pg1{
	background-color:#98add9;
}

.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{
	.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/volume4/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:-40px 0 0 0;
			width:360px;
		}
		.image3{
			margin:20px 0 0 0;
			width:360px;
			.right;
		}
		.image3 p{
			padding:10px 0 0 0;
			.tar;
		}
	}


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

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

		dd:first-child{
			.right;
		}
	
		.image4{
			margin-top:-20px;
			margin-left:auto;
			padding:40px 0 20px 0;
			width:360px;
		}
		.image5{
			width:380px;
		}
	}


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

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

		.image6{
			padding:20px 0 20px 0;
		}
		.image7{
			padding: 0 0 0 40px;
		}
		.image7 p{
			padding:10px 0 0 20px;
			text-indent:-20px;
		}
	}

}




@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{
			margin:40px 0 0 0;

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

			.image2{
				margin:40px 0 0 0;
				width:100%;
			}
			.image3{
				margin:10px 0 0 0;
				width:100%;
				.right;
			}
		}

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

			.bg{
				width:70%;
				height:100%;
			}
			dd:first-child{
				width:60%;
			}
			dd:last-child{
				width:40%;
			}
			.wrap{
				padding:20px;
			}
	
			.image4{
				width:100%;
			}
			.image5{
				width:100%;
			}
		}


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

			.bg{
				width:70%;
				height:100%;
			}
			dd:first-child{
				width:60%;
			}
			dd:last-child{
				width:40%;
			}
			.wrap{
				padding:20px;
			}
			.image7 {
				padding-left:0;
			}
			.image7 p{
				font-size:9pt;
				line-height:180%;
			}
		}

	}
}



@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;
				width:90%;
			}
			.image3{
				margin:20px auto 0 auto;
				padding:0 0 30px 0;
				width:90%;
				.fn;
			}
		}

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

			dd:last-child{
				width:100%;
			}

			.image4{
				margin:0 auto 0 auto;
				padding:40px 0 20px 0;
				width:90%;
			}
			.image4 p{
				padding:10px 0 0 0;
				font-size:9pt;
			}
			.image5{
				width:90%;
				padding:0 0 30px 0;
				margin:0 auto;
				.fn;
			}
		}

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

			.image6{
				width:90%;
				padding:0 0 20px 0;
				margin:0 auto 0 auto;
			}
			.image7{
				width:90%;
				padding:0 0 30px 0;
				margin:0 auto 0 auto;
			}
			.image7 p{
				padding:10px 0 30px 20px;
				text-indent:-20px;
			}
		}

	}
}


/* 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:340px;
			.center;
			top:-5px;
			.bg_white;
		}
	}

	dl{
		width:100%;
	}
	dd{
		.dtc;
		.vat;
		.wrap{
			padding:30px;
		}
	}

	h3{
		font-size:18pt;
		padding:0 0 30px 0;
	}
	h4{
		font-size:12pt;
		padding:0 0 30px 0;
		.bold;
	}

	.sec1,
	.sec2,
	.sec3{
		margin:0 0 40px 0;
		.bg_glay;
		dd:first-child{
			width:240px;
			background-position:center center;
			background-repeat:no-repeat;
			background-size:cover;
		}
	}
	.sec1{
		dd:first-child{
			background-image:url(../image/volume4/seido_image1.jpg);
		}
	}
	.sec2{
		dd:first-child{
			height:260px;
			background-image:url(../image/volume4/seido_image2.jpg);
		}
	}
	.sec3{
		dd:first-child{
			height:260px;
			background-image:url(../image/volume4/seido_image3.jpg);
		}
	}
}


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



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

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

			p{
				width:250px;
				height:30px;
				.center;
				top:0;
			}
			img{
				height:25px;
				margin-top:-3px;
			}
		}


		h3{
			font-size:14pt;
			padding:10px 0 20px 0;
		}

		dd{
			.db;
			.wrap{
				padding:15px;
			}
		}

		.sec1,
		.sec2,
		.sec3{
			dd:first-child{
				width:100%;
				height:300px;
			}
		}

	}
}


@media (max-width:480px){

}

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

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

	h4{
		font-size:12pt;
		padding:0 0 10px 0;
		.bold;
	}
	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%
		}
		h4{
			font-size:12pt;
			padding:0 0 10px 0;
			.bold;
		}
		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;
	}
	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;
		}
	}
}