@charset "UTF-8";

/**==============================================**/
/*
/*	共通
/*
/**==============================================**/

/* header */
header {}

/* title-bar */
div.title-bar {
	background: #48b7ff;
}


/* main-img */
div.main-img {
	position: relative;
}
.main-img div.main-img-inner {
	overflow: hidden;
}
.main-img .main-img-inner img {
	display: block;
	width: 100%;
	height: auto;
}
.main-img-cap h2 img {
	display: block;
	width: 100%;
	height: auto;
}
.main-img img.ito {
	display: block;
}


div.sec .headd-wrap h2 {
	color: #818bff;
	font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","游明朝","Yu Mincho","游明朝体","YuMincho","Roboto Slab",Garamond,"Times New Roman","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
}
div.sec-01 .headd-wrap h2 {
	text-indent: -1em;
	padding-left: 1em;
}
div.sec div.img-wrap {
	margin: auto;
	overflow: hidden;
}
.sec .img-wrap img {
	position: absolute;
	display: block;
	max-width: 100%;
	height: auto;
	opacity: 0;
}
.sec .img-wrap img.move {
	animation-name: move;
	animation-duration: 3s;
	animation-timing-function: liner;
	animation-fill-mode: both;
}
@keyframes move {
	0% {
		opacity: 0;
		margin-top: 50px;
	}
	100% {
		opacity: 1;
		margin-top: 0;
	}
}

.img-wrap div.gra-border {
	position: absolute;
	background: #f8f8f8;
	background: -moz-linear-gradient(top,  #f8f8f8 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top,  #f8f8f8 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  #f8f8f8 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#ffffff',GradientType=0 );
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
}
.img-wrap div.gra-border:after {
	content: "";
	display: block;
	width: 100%;
	height: 100vh;
	background: #fff;
}

/* sec-01 */
div.sec-01 {
	position: relative;
}
	



/* sec-02 */
div.sec-02 {
	position: relative;
}



/*
.sec-03 .circle.move {
	animation-name: circle;
	animation-duration: 3s;
	animation-timing-function: liner;
	animation-fill-mode: both;
}
.sec-03 .circle.move div:nth-child(1) {
	animation-name: circle;
	animation-duration: 4.5s;
	animation-timing-function: liner;
	animation-fill-mode: both;
}
.sec-03 .circle.move div:nth-child(2) {
	animation-name: circle;
	animation-duration: 6s;
	animation-timing-function: liner;
	animation-fill-mode: both;
}

*/




/**==============================================**/
/**==============================================**/
/*	
/*	sp 縦
/*	〜640px
/*
/**==============================================**/
/**==============================================**/

@media screen and (max-width:640px) {

	/* main-img */
	div.main-img {}
	.main-img div.main-img-inner img {
		width: 160%;
		height: auto;
		margin-right: -30%;
		margin-left: -30%;
	}
	.main-img div.main-img-cap {
		z-index: 2;
		width: 58.76%;
		max-width: 764px;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-28%, -54%);
		-ms-transform: translate(-28%, -54%);
		transform: translate(-28%, -54%);
	}
	.main-img-cap h2 {
		margin-bottom: 8%;
	}
	.main-img-cap div.cap-wrap {
		display: inline-block;
		text-align: right;
	}
	.main-img-cap .cap-wrap p {
		font-size: 1.4rem;
		font-size: 2.916vw;
		line-height: 1.5;
		text-align: left;
		margin-bottom: 8%;
	}
	.main-img-cap .cap-wrap p span {
		display: inline-block;
	}
	.main-img-cap .cap-wrap strong {
		font-size: 1.8rem;
	}
	.main-img img.ito {
		width: 38.15%;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-120%, -14.5%);
		-ms-transform: translate(-120%, -14.5%);
		transform: translate(-120%, -14.5%);
	}



	/* sec */
	div.sec .txt-box {
		margin-bottom: 8%;
	}
	.sec .txt-box h2 {
		font-size: 2rem;
		line-height: 1.72;
		margin-bottom: 8px;
	}
	.sec .txt-box div.cap-wrap {
		padding: 0 3%;
	}
	.sec .txt-box .cap-wrap p {
		font-size: 1.5rem;
		line-height: 2.2;
	}
	.img-wrap div.gra-border {
		height: 28px;
	}
	.img-wrap div.gra-border:after {
		margin-top: 27px;
	}



	/* sec-01 */
	div.sec-01 {
		padding: 10% 0 8%;
	}
	.sec-01 .img-wrap .gra-border {
		-webkit-transform: translate(-50%, 120%) rotate(-6deg);
		-ms-transform: translate(-50%, 120%) rotate(-6deg);
		transform: translate(-50%, 120%) rotate(-6deg);
	}

	/* sec-02 */
	div.sec-02 {
		margin-bottom: 10%;
	}
	.sec-02 .img-wrap .gra-border {
		-webkit-transform: translate(-50%, 120%) rotate(6deg);
		-ms-transform: translate(-50%, 120%) rotate(6deg);
		transform: translate(-50%, 120%) rotate(6deg);
	}

	
	
	
	
	
	
	
	
	
	



}




/**==============================================**/
/**==============================================**/
/*
/*	SP 横
/*	〜 900px（高さ480pxまで）
/*
/**==============================================**/
/**==============================================**/

@media screen and (max-width:900px) and (max-height: 480px) {

	/* main-img */
	div.main-img {
/*		min-height: 100vw;*/
	}














}




/**==============================================**/
/**==============================================**/
/*
/*	tab
/*	601px 〜 1070px
/*
/**==============================================**/
/**==============================================**/


@media screen and (min-width:641px) and (max-width:1070px) {
	/*@media screen and (min-width:641px) and (max-width:1070px) and (min-height: 481px) {*/


	/* main-img */
	div.main-img {}
	.main-img div.main-img-inner {
		max-height: 498px;
	}
	.main-img div.main-img-cap {
		z-index: 2;
		width: 58.76%;
		max-width: 764px;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-28%, -54%);
		-ms-transform: translate(-28%, -54%);
		transform: translate(-28%, -54%);
	}
	.main-img-cap h2 {
		margin-bottom: 57px;
	}
	.main-img-cap div.cap-wrap {
		display: inline-block;
		text-align: right;
	}
	.main-img-cap .cap-wrap p {
		font-size: 16px;
		line-height: 1.6;
		text-align: left;
		margin-bottom: 25px;
	}
	.main-img-cap .cap-wrap strong {
		font-size: 21px;
	}
	.main-img img.ito {
		width: 35.15%;
		max-width: 496px;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-130%, -29.5%);
		-ms-transform: translate(-130%, -29.5%);
		transform: translate(-130%, -29.5%);
	}



	/* sec */
	.sec .txt-box h2 {
		font-size: 28px;
		line-height: 1.72;
		padding-left: 3%;
		margin-bottom: 8px;
	}
	.sec .txt-box div.cap-wrap {
		padding: 0 3%;
	}
	.sec .txt-box .cap-wrap p {
		font-size: 18px;
		line-height: 2.38;
	}
	.img-wrap div.gra-border {
		height: 110px;
	}
	.img-wrap div.gra-border:after {
		margin-top: 109px;
	}


	/* sec-01 */
	div.sec-01 {
		padding: 100px 0 50px;
	}
	.sec-01 .img-wrap .gra-border {
		-webkit-transform: translate(-50%, 50%) rotate(-6deg);
		-ms-transform: translate(-50%, 50%) rotate(-6deg);
		transform: translate(-50%, 50%) rotate(-6deg);
	}

	/* sec-02 */
	div.sec-02 {
		margin-bottom: 40px;
	}
	.sec-02 .img-wrap .gra-border {
		-webkit-transform: translate(-50%, 50%) rotate(6deg);
		-ms-transform: translate(-50%, 50%) rotate(6deg);
		transform: translate(-50%, 50%) rotate(6deg);
	}









}






/**==============================================**/
/**==============================================**/
/*
/*	sp tab 共通
/*	〜 1070px 
/*
/**==============================================**/
/**==============================================**/

@media screen and (max-width:1070px) {

	div.sec {}
	.sec div.inner-wrap {}
	.sec .inner-wrap div.txt-box {
		position: relative;
		z-index: 9;
	}




	div.img-wrap {
		position: relative;
		width: 100%;
	}
	.img-wrap:before {
		content: "";
		display: block;
		padding-top: 45%;
	}
	.sec .img-wrap img {
		top: 50%;
		left: 50%;
	}
	.img-wrap div.gra-border {
		width: 200vw;
		z-index: 1;
		top: 50%;
		left: 50%;
	}


	/* sec-01 */
	div.sec-01 {}
	.sec-01 .img-wrap img:nth-child(1) {
		width: 42.65%;
		max-width: 372px;
		z-index: 2;
		-webkit-transform: translate(2%, -52%);
		-ms-transform: translate(2%, -52%);
		transform: translate(2%, -52%);
	}
	.sec-01 .img-wrap img:nth-child(2) {
		width: 27.5%;
		max-width: 227px;
		z-index: 1;
		-webkit-transform: translate(-130%, -48%);
		-ms-transform: translate(-130%, -48%);
		transform: translate(-130%, -48%);
	}



	/* sec-02 */
	div.sec-02 {
		padding: 0;
	}
	.sec-02 .img-wrap.sp {
		margin: 20px auto 50px;
	}
	.sec-02 .img-wrap.sp img:nth-child(1) {
		width: 42.65%;
		max-width: 435px;
		z-index: 2;
		-webkit-transform: translate(-98%, -51%);
		-ms-transform: translate(-98%, -51%);
		transform: translate(-98%, -51%);
	}
	.sec-02 .img-wrap.sp img:nth-child(2) {
		width: 27.5%;
		max-width: 288px;
		z-index: 1;
		-webkit-transform: translate(32%, -32%);
		-ms-transform: translate(32%, -32%);
		transform: translate(32%, -32%);
	}
	.sec-02 > .img-wrap img:nth-child(3) {
		width: 27.5%;
		max-width: 227px;
		z-index: 1;
		-webkit-transform: translate(-130%, -68%);
		-ms-transform: translate(-130%, -68%);
		transform: translate(-130%, -68%);
	}
	.sec-02 > .img-wrap img:nth-child(4) {
		width: 42.65%;
		max-width: 372px;
		z-index: 2;
		-webkit-transform: translate(2%, -52%);
		-ms-transform: translate(2%, -52%);
		transform: translate(2%, -52%);
	}



}







/**==============================================**/
/**==============================================**/
/*
/*	PC 小型
/*	1071px 〜 1280px
/*
/**==============================================**/
/**==============================================**/

@media print, screen and (min-width:1071px) {

	/* main-img */
	div.main-img {}
	.main-img div.main-img-inner {
		max-height: 498px;
	}
	.main-img div.main-img-cap {
		z-index: 2;
		width: 58.76%;
		max-width: 764px;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-28%, -54%);
		-ms-transform: translate(-28%, -54%);
		transform: translate(-28%, -54%);
	}
	.main-img-cap h2 {
		margin-bottom: 57px;
	}
	.main-img-cap div.cap-wrap {
		display: inline-block;
		text-align: right;
	}
	.main-img-cap .cap-wrap p {
		font-size: 19px;
		line-height: 1.6;
		text-align: left;
		margin-bottom: 25px;
	}
	.main-img-cap .cap-wrap strong {
		font-size: 25px;
	}
	.main-img img.ito {
		width: 38.15%;
		max-width: 496px;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-110%, -19.5%);
		-ms-transform: translate(-110%, -19.5%);
		transform: translate(-110%, -19.5%);
	}



	/* sec */
	div.sec {}
	.sec div.inner-wrap {}
	.sec .inner-wrap div.txt-box {
		width: 50%;
		position: relative;
		z-index: 9;
	}
	.sec .txt-box h2 {
		font-size: 32px;
		line-height: 1.72;
		padding-left: 3%;
		margin-bottom: 8px;
	}
	.sec .txt-box div.cap-wrap {
		padding: 0 3%;
	}
	.sec .txt-box .cap-wrap p {
		font-size: 18px;
		line-height: 2.38;
	}
	.sec div.img-wrap {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.sec .img-wrap img {
		top: 50%;
		left: 50%;
	}
	.img-wrap div.gra-border {
		width: 200vw;
		height: 110px;
		z-index: 1;
		top: 50%;
		left: 50%;
	}
	.img-wrap div.gra-border:after {
		margin-top: 109px;
	}



	/* sec-01 */
	div.sec-01 {
		padding: 30px 0 50px;
	}
	.sec-01 .img-wrap .gra-border {
		-webkit-transform: translate(-50%, -18%) rotate(-6deg);
		-ms-transform: translate(-50%, -18%) rotate(-6deg);
		transform: translate(-50%, -18%) rotate(-6deg);
	}
	.sec-01 .img-wrap img:nth-child(1) {
		width: 28.65%;
		max-width: 372px;
		z-index: 2;
		-webkit-transform: translate(-105%, -62%);
		-ms-transform: translate(-105%, -62%);
		transform: translate(-105%, -62%);
	}
	.sec-01 .img-wrap img:nth-child(2) {
		width: 17.5%;
		max-width: 227px;
		z-index: 1;
		-webkit-transform: translate(-296%, -65%);
		-ms-transform: translate(-296%, -65%);
		transform: translate(-296%, -65%);
	}
	.sec-01 .inner-wrap div.txt-box {
		float: right;
	}



	/* sec-02 */
	div.sec-02 {
		margin-top: -17%;
		padding: 0 0 100px;
		margin-bottom: 40px;
	}
	.sec-02 .inner-wrap .txt-box:nth-child(1) {
		margin-bottom: 64px;
	}
	.sec-02 .img-wrap .gra-border {
		-webkit-transform: translate(-50%, 193%) rotate(6deg);
		-ms-transform: translate(-50%, 193%) rotate(6deg);
		transform: translate(-50%, 193%) rotate(6deg);
	}
	.sec-02 .img-wrap img:nth-child(1) {
		width: 33.5%;
		max-width: 435px;
		z-index: 2;
		-webkit-transform: translate(2%, -99%);
		-ms-transform: translate(2%, -99%);
		transform: translate(2%, -99%);
	}
	.sec-02 .img-wrap img:nth-child(2) {
		width: 22.19%;
		max-width: 288px;
		z-index: 1;
		-webkit-transform: translate(109%, 2%);
		-ms-transform: translate(109%, 2%);
		transform: translate(109%, 2%);
	}
	.sec-02 .img-wrap img:nth-child(3) {
		width: 18.42%;
		max-width: 239px;
		z-index: 2;
		-webkit-transform: translate(10%, 36%);
		-ms-transform: translate(10%, 36%);
		transform: translate(10%, 36%);
	}
	.sec-02 .img-wrap img:nth-child(4) {
		width: 27.65%;
		max-width: 359px;
		z-index: 2;
		-webkit-transform: translate(45%, 94%);
		-ms-transform: translate(45%, 94%);
		transform: translate(45%, 94%);
	}







}




@media screen and (min-width:961px) and (max-width:1280px) {}





/**==============================================**/
/**==============================================**/
/*
/*	PC 大型
/*	1281px 〜 （高さ801px以上）
/*
/**==============================================**/
/**==============================================**/

@media screen and (min-width:1281px) and (min-height:801px){

	/* main-img */
	div.main-img {}







}





/**==============================================**/
/**==============================================**/
/*
/*	print
/*
/**==============================================**/
/**==============================================**/
@media print {

	
	.sec .inner-wrap div.txt-box {
		z-index: 100;
	}
	.sec .img-wrap {
/*		z-index: 0 !important;*/
	}
	.sec .img-wrap img {
		display: none !important;
	}
	.gra-border {
		display: none !important;
	}
	.sec.sec-on {
		animation-name: none !important;
	}
	.sec .inner-wrap div.txt-box {
		width: 60%;
	}
	div.sec-01 {
		background: url(../img/about/about-img-print-01.png) 0 20% / contain no-repeat !important;
		page-break-inside: avoid !important;
	}

	div.sec-02 {
		background: url(../img/about/about-img-print-02.png) 100% 20% / contain no-repeat !important;
	}

	
	


}