@charset "UTF-8";

/* -------------------------------------
story
------------------------------------- */
#mainimg .text h1 span.eng:nth-child(3) {
	padding-bottom:13px;
}
#mainimg .text h1 span.vol {
	font-size:32px;
	margin-top:25px;
}

main {
	overflow:hidden;
}

.index {
	text-align:center;
	margin-top:30px;
	border-bottom:1px solid #fff;
}
.index.wh {
	border-bottom:1px solid #fff;
}
.index.bk {
	margin-bottom:100px;
	border-bottom:1px solid #000;
}
.index dt {
	font-size:0;
	position:relative;
}
.index dt span {
	width:150px;
	display:inline-block;
	padding:0 25px;
	margin:0 auto;
	position:relative;
	z-index:1;
}
.index.wh dt span {
	background-color:#063b98;
}
.index.bk dt span {
	background-color:#eee;
}
.index dt::after {
	content:"";
	width:100%;
	height:1px;
	display:block;
	position:absolute;
	top:50%;
	left:0;
	z-index:0;
}
.index.wh dt::after {
	background-color:#fff;
}
.index.bk dt::after {
	background-color:#000;
}
.index dd {
	text-align:left;
	padding:17px 0 12px 0;
}
.index dd ul {
	font-size:0;
	max-width:780px;
	margin:0 auto;
}
.index dd ul li {
	width:calc((99.9% - 30px) / 3);
	display:inline-block;
	vertical-align:top;
	margin-right:15px;
	margin-bottom:12px;
}
.index dd ul li:nth-child(3n) {
	margin-right:0;
}
.index dd ul li a {
	font-size:13px;
	font-weight:bold;
	display:inline-block;
	padding-left:13px;
	position:relative;
	transition:color 0.3s;
}
.index.wh dd ul li a {
	color:#fff;
}
.index.bk dd ul li a {
	color:#000;
}
.index dd ul li a::after {
	content:"";
	width:8px;
	height:12px;
	display:block;
	border-top:6px solid transparent;
	border-bottom:6px solid transparent;
	position:absolute;
	top:3px;
	left:0;
	z-index:1;
	box-sizing:border-box;
	transition:border 0.3s;
}
.index.wh dd ul li a::after {
	border-left:8px solid #fff;
}
.index.bk dd ul li a::after {
	border-left:8px solid #000;
}
.index dd ul li a:hover, .index dd ul li a.on {
	color:#e60012;
	opacity:1.0;
}
.index dd ul li a:hover::after, .index dd ul li a.on::after {
	border-left:8px solid #e60012;
}


.story {
	padding:85px 20px;
	position:relative;
	margin:-45px 0 105px 0;
	border-bottom-left-radius:35px;
	border-bottom-right-radius:35px;
	position:relative;
	z-index:-1;
}
.story h2 {
	margin-bottom:50px;
}
.story h2 span {
	font-weight:bold;
	text-align:center;
	display:block;
}
.story h2 span.eng {
	font-size:20px;
	margin-bottom:7px;
}
.story h2 span.jp {
	font-size:40px;
	line-height:1.3;
}
.story h2 span.jp br {
	display:none;
}
.story .in {
	max-width:735px;
	margin:0 auto;
}
.story .in .cap {
	max-width:520px;
	margin:0 auto 80px auto;
}
.story .in .cap span {
	font-weight:bold;
	color:#003c96;
}

.parag:not(:last-child) {
	margin-bottom:80px;
}
.parag .text.left {
	width:59.8%;
	float:left;
}
.parag .text.right {
	width:59.1%;
	float:right;
}
.parag .text.center {
	width:100%;
	max-width:513px;
	margin:0 auto;
}
.parag .text h3 {
	font-size:19px;
	font-weight:bold;
	margin-bottom:25px;
}
.parag .text p {
	line-height:1.8;
}
.parag .text p span {
	font-weight:bold;
	color:#003c96;
}

.parag .photo img {
	border-radius:35px;
}
.parag .photo.left {
	width:32.2%;
	float:left;
}
.parag .photo.left img {
	width:287.7%;
	position:relative;
	left:-187.7%;
}
.parag .photo.right {
	width:30.8%;
	float:right;
}
.parag .photo.right img {
	width:300.4%;
	position:relative;
}



@media screen and (max-width:1040px) {
	#mainimg .text h1 span.vol {
		font-size:28px;
		margin-top:22px;
	}
	
	
	.index.bk {
		margin-bottom:85px;
	}
	.index dt span {
		width:138px;
		padding:0 20px;
	}
	
	
	.story {
		padding:85px 20px 70px 20px;
		margin:-45px 0 90px 0;
	}
	.story h2 {
		margin-bottom:45px;
	}
	.story h2 span.eng {
		font-size:19px;
	}
	.story h2 span.jp {
		font-size:36px;
	}
	.story .in .cap {
		margin:0 auto 72px auto;
	}
	
	
	.parag:not(:last-child) {
		margin-bottom:72px;
	}
	.parag .text h3 {
		font-size:18px;
		margin-bottom:23px;
	}
}
@media screen and (max-width:880px) {
	.index dd ul li {
		width:calc((99.9% - 15px) / 2);
	}
	.index dd ul li:nth-child(3n) {
		margin-right:15px;
	}
	.index dd ul li:nth-child(2n), .index dd ul li:last-child {
		margin-right:0;
	}
}
@media screen and (max-width:768px) {
	#mainimg .text h1 span.vol {
		font-size:24px;
		margin-top:20px;
	}
	
	
	.index.bk {
		margin-bottom:75px;
	}
	.index dt span {
		width:125px;
		padding:0 15px;
	}
	
	
	.story {
		padding:85px 20px 55px 20px;
		margin:-45px 0 70px 0;
	}
	.story h2 {
		margin-bottom:40px;
	}
	.story h2 span.eng {
		font-size:18px;
	}
	.story h2 span.jp {
		font-size:33px;
	}
	.story .in .cap {
		margin:0 auto 65px auto;
	}
	
	
	.parag:not(:last-child) {
		margin-bottom:65px;
	}
	.parag .text h3 {
		font-size:17px;
		margin-bottom:20px;
	}
}
@media screen and (max-width:640px) {
	#mainimg .text h1 span.vol {
		font-size:22px;
		margin-top:18px;
	}
	#mainimg .bg_img {
		padding-top:302px;
	}
	#mainimg .bg_img img {
		width:auto;
		height:340px;
		position:absolute;
		top:0;
		left:auto;
		right:0;
		transform:translateX(0);
	}
	
	#maincap .cap br {
		display:none;
	}
	
	
	.index.bk {
		margin-bottom:65px;
	}
	
	
	.story {
		padding:85px 20px 50px 20px;
		margin:-45px 0 60px 0;
	}
	.story h2 span.eng {
		font-size:17px;
	}
	.story h2 span.jp {
		font-size:31px;
	}
	.story .in .cap {
		margin:0 auto 62px auto;
	}
	
	
	.parag:not(:last-child) {
		margin-bottom:62px;
	}
	.parag .text.left {
		width:100%;
		float:none;
	}
	.parag .text.right {
		width:100%;
		float:none;
	}
	.parag .text h3 {
		font-size:16px;
		margin-bottom:15px;
	}
	.parag .text h3 br {
		display:none;
	}
	.parag .photo {
		margin-top:20px;
	}
	.parag .photo.left {
		width:100%;
		float:none;
	}
	.parag .photo.left img {
		width:100%;
		left:0;
	}
	.parag .photo.right {
		width:100%;
		float:none;
	}
	.parag .photo.right img {
		width:100%;
	}
}
@media screen and (max-width:480px) {
	#mainimg .text h1 span.vol {
		font-size:20px;
		margin-top:15px;
	}
	#mainimg .bg_img {
		padding-top:285px;
	}
	#mainimg .bg_img img {
		width:auto;
		height:300px;
		left:50%;
		transform:translateX(-50%);
	}
	.story4 #mainimg .bg_img img {
		transform:translateX(-55%);
	}
	.story5 #mainimg .bg_img img {
		transform:translateX(-60%);
	}
	
	
	.index.bk {
		margin-bottom:50px;
	}
	.index dt span {
		width:110px;
		padding:0 10px;
	}
	.index dd ul li {
		width:calc((100% - 0px) / 1);
	}
	.index dd ul li:nth-child(3n) {
		margin-right:0;
	}
	.index dd ul li:nth-child(2n), .index dd ul li:last-child {
		margin-right:0;
	}
	
	
	.story {
		padding:85px 20px 35px 20px;
		margin:-45px 0 45px 0;
	}
	.story h2 {
		margin-bottom:35px;
	}
	.story h2 span.eng {
		font-size:16px;
	}
	.story h2 span.jp {
		font-size:28px;
	}
	.story h2 span.jp br {
		display:block;
	}
	.story .in .cap {
		margin:0 auto 56px auto;
	}
	
	
	.parag:not(:last-child) {
		margin-bottom:56px;
	}
}
@media screen and (max-width:400px) {
	#mainimg .bg_img {
		padding-top:270px;
	}
	#mainimg .bg_img img {
		width:auto;
		height:280px;
		left:50%;
		transform:translateX(-50%);
	}
}
@media screen and (max-width:320px) {
	
}
@media screen and (min-width:769px) {
	
}