@charset "UTF-8";
/* CSS Document */



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/


	
	
/* bg-title
--------------------- */
#bg-title .head {
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -135px;
	margin-left: -240px;
}
	#bg-title .head h1 {
		font-size: 60px;
		font-weight: 700;
		line-height: 105px;
		letter-spacing: 0.25em;
		padding-bottom: 20px;
	}


	
	
/* bg-black
--------------------- */
#bg-black h2 {
	width: 100%;
	font-size: 82px;
	text-align: center;
	color: #fff;
	letter-spacing: 0.15em;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -30px;
}


	
	
/* bg-05
--------------------- */
#bg-05 dl {
	width: 1280px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -320px;
	margin-left: -640px;
}
	#bg-05 dl dt {
		font-size: 100px;
		font-weight: 900;
		line-height: 160px;
		padding-top: 65px;
		letter-spacing: 0.25em;
	}

	#bg-05 dl dd {
	}
		#bg-05 dl dd p {
			font-size: 143%;
			font-weight: 500;
			line-height: 38px;
			letter-spacing: 0.25em;
			margin-bottom: 20px;
		}
		#bg-05 dl dd p:nth-last-child(1) {
			margin-bottom: 0;
		}


#bg-05 #footer {
	width: 1280px;
	border-top: solid 1px #dddddd;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -640px;
}



	
	
/* section
--------------------- */
.section {
	width: 100%;
	height: 100vh;
	position: relative;
}
.section .inner {
	position: static;
}
	.section .titlebox {
		width: 1280px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-640px); /*要素の大きさの半分ずつを戻す*/
  		-webkit-transform: translateY(-50%) translateX(-640px);
	}
	#bg-02 .titlebox {
		color: #fff;
	}
	#bg-03 .titlebox {
		color: #fff;
	}
		.section .titlebox h2 {
			font-size: 38px;
			font-weight: 700;
			line-height: 56px;
			letter-spacing: 0.25em;
			margin-bottom: 30px;
		}

		.section .titlebox p {
			width: 470px;
			font-size: 115%;
			font-weight: 500;
			line-height: 36px;
			letter-spacing: 0.20em;
			margin-bottom: 60px;
		}

		.section .titlebox .link {
			width: 250px;
		}
			.section .titlebox .link a {
				height: 70px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				line-height: 1.4em;
				font-size: 108%;
				font-weight: 500;	
				letter-spacing: 2px;
				color: #fff;
				padding-left: 70px;
				position: relative;
				transition: 0.3s;
				-webkit−transition: 0.3s;
			}
			#bg-01 .titlebox .link a {
				background: #00a0f7 url(../img/icon01.png) no-repeat 10px center;
			}
			#bg-02 .titlebox .link a {
				background: #00a0f7 url(../img/icon02.png) no-repeat 10px center;
			}
			#bg-03 .titlebox .link a {
				background: #00a0f7 url(../img/icon03.png) no-repeat 10px center;
			}
			#bg-04 .titlebox .link a {
				background: #00a0f7 url(../img/icon04.png) no-repeat 10px center;
			}
			.section .titlebox .link a:hover {
				color: #fff;
			}
			#bg-01 .titlebox .link a:hover {
				background: #000 url(../img/icon01.png) no-repeat 10px center;
			}
			#bg-02 .titlebox .link a:hover {
				background: #000 url(../img/icon02.png) no-repeat 10px center;
			}
			#bg-03 .titlebox .link a:hover {
				background: #000 url(../img/icon03.png) no-repeat 10px center;
			}
			#bg-04 .titlebox .link a:hover {
				background: #000 url(../img/icon04.png) no-repeat 10px center;
			}

			.section .titlebox .link a:after {
				content: "";
				width: 41px;
				height: 10px;
				position: absolute;
				right: -18px;
				top: 50%;
				margin-top: -8px;
				transition: 0.3s;
				-webkit−transition: 0.3s;
			}
			.section .titlebox .link a:after {
				background: url(../../common/img/arrow_black.svg) no-repeat;
			}
			.section .titlebox .link a:hover:after {
				right: -23px;
			}



#bg-title {
	background: url(../img/pagetitle.jpg) no-repeat center;
	background-size: cover;
}

#bg-black {
	background: #000111;
}

#bg-01 {
	background: url(../img/story_bg01.jpg) no-repeat center;
	background-size: cover;
}

#bg-02 {
	background: url(../img/story_bg02.jpg) no-repeat center;
	background-size: cover;
}

#bg-03 {
	background: url(../img/story_bg03.jpg) no-repeat center;
	background-size: cover;
}

#bg-04 {
	background: url(../img/story_bg04.jpg) no-repeat center;
	background-size: cover;
}

#bg-05 {
	background: #fff;
}








/* 1400px */
@media screen and (max-width: 1400px) {



	
	
/* section
--------------------- */
.section .titlebox {
	width: 100%;
	left: 0;
	margin-left: 0;
	padding-left: 5%;
	padding-right: 5%;
	transform: translateY(-50%) translateX(0); /*要素の大きさの半分ずつを戻す*/
	-webkit-transform: translateY(-50%) translateX(0);
}


	
	
/* bg-05
--------------------- */
#bg-05 dl {
	width: 100%;
	margin-left: 0;
	left: 0;
	padding-left: 5%;
	padding-right: 5%;
}
	#bg-05 dl dt {
		padding-top: 100px;
		font-size: 90px;
		line-height: 130px;
		letter-spacing: 0.1em;
	}
	
#bg-05 #footer {
	width: 100%;
	margin-left: 0;
	left: 0;
	padding-left: 5%;
	padding-right: 5%;
}





	




}









/* 1160px */
@media screen and (max-width: 1160px) {


	
	
/* bg-black
--------------------- */
#bg-black h2 {
	font-size: 70px;
}


	
	
/* bg-05
--------------------- */
#bg-05 dl {
	display: block;
	margin-top: -370px;
}
	#bg-05 dl dt {
		padding-top: 0;
		font-size: 60px;
		line-height: 1;
		padding-bottom: 40px;
	}
		#bg-05 dl dt br {
			display: none;
		}

	





}

	







/* max 767px */
@media screen and (max-width: 767px) {


	
	
/* bg-title
--------------------- */
#bg-title .head {
	left: 0;
	width: 100%;
	margin-top: -80px;
	margin-left: 0;
	padding: 0 5%;
}
	#bg-title .head h1 {
		font-size: 40px;
		font-weight: 700;
		line-height: 64px;
		letter-spacing: 0.2em;
		padding-bottom: 20px;
	}

	#bg-title .head p {
		width: 100%;
		font-size: 100%;
		line-height: 2em;
	}


	
	
/* bg-black
--------------------- */
#bg-black h2 {
	width: 100%;
	font-size: 50px;
	line-height: 60px;
	margin-top: -60px;
}


	
	
/* bg-05
--------------------- */
#bg-05 dl {
	width: 100%;
	position: static;
	margin-top: 0;
	padding: 50px 0;
}
	#bg-05 dl dt {
		font-size: 40px;
		font-weight: 900;
		line-height: 60px;
		padding-top: 0;
		padding-bottom: 20px;
		letter-spacing: 0.25em;
	}
		#bg-05 dl dt br {
			display: block;
		}

	#bg-05 dl dd {
	}
		#bg-05 dl dd p {
			font-size: 100%;
			line-height: 2em;
			margin-bottom: 15px;
		}


#bg-05 #footer {
	display: block;
	position: static;
	padding-left: 0;
	padding-right: 0;
}



	
	
/* section
--------------------- */
.section {
	width: 100%;
}
.section .inner {
	height: 100vh;
}
	.section .titlebox {
		left: 0;
		padding: 0 5%;
		margin-top: 0;
		color: #fff;
	}
		.section .titlebox h2 {
			font-size: 26px;
			line-height: 46px;
			letter-spacing: 0.25em;
			margin-bottom: 20px;
		}

		.section .titlebox p {
			width: 100%;
			font-size: 100%;
			line-height: 2em;
			margin-bottom: 40px;
		}

		.section .titlebox .link {
			width: 250px;
		}
			.section .titlebox .link a {
				font-weight: 500;	
				letter-spacing: 2px;
				color: #fff;
				padding-left: 70px;
				position: relative;
				transition: 0.3s;
				-webkit−transition: 0.3s;
			}
			#bg-01 .titlebox .link a {
				background: #00a0f7 url(../img/icon01.png) no-repeat 10px center;
			}
			#bg-02 .titlebox .link a {
				background: #00a0f7 url(../img/icon02.png) no-repeat 10px center;
			}
			#bg-03 .titlebox .link a {
				background: #00a0f7 url(../img/icon03.png) no-repeat 10px center;
			}
			#bg-04 .titlebox .link a {
				background: #00a0f7 url(../img/icon04.png) no-repeat 10px center;
			}
			.section .titlebox .link a:hover {
				color: #fff;
			}
			#bg-01 .titlebox .link a:hover {
				background: #000 url(../img/icon01.png) no-repeat 10px center;
			}
			#bg-02 .titlebox .link a:hover {
				background: #000 url(../img/icon02.png) no-repeat 10px center;
			}
			#bg-03 .titlebox .link a:hover {
				background: #000 url(../img/icon03.png) no-repeat 10px center;
			}
			#bg-04 .titlebox .link a:hover {
				background: #000 url(../img/icon04.png) no-repeat 10px center;
			}

			.section .titlebox .link a:after {
				content: "";
				width: 41px;
				height: 10px;
				position: absolute;
				right: -18px;
				top: 50%;
				margin-top: -8px;
				transition: 0.3s;
				-webkit−transition: 0.3s;
			}
			.section .titlebox .link a:after {
				background: url(../../common/img/arrow_black.svg) no-repeat;
			}
			.section .titlebox .link a:hover:after {
				right: -23px;
			}

#bg-01 {
	background: url(../img/story_bg01_sp.jpg) no-repeat center;
	background-size: cover;
}

#bg-02 {
	background: url(../img/story_bg02_sp.jpg) no-repeat center;
	background-size: cover;
}

#bg-03 {
	background: url(../img/story_bg03_sp.jpg) no-repeat center;
	background-size: cover;
}

#bg-04 {
	background: url(../img/story_bg04_sp.jpg) no-repeat center;
	background-size: cover;
}


	





}