@charset "utf-8";



main section.philosophy.framework{
}

main .vdelay{
	opacity:0;
	top:0;
	position:relative;
}

main .vdelay.appear{
	animation:vdelay 0.5s forwards ease-out;
}

@keyframes vdelay{
	0%{
		opacity:0;
		top:60px;
	}
	100%{
		opacity:1;
		top:0;
	}
}

main section.philosophy + section.philosophy{
	padding-top:0;
}

main section.philosophy + section.philosophy h3{
	margin-top:0;
}

main section.philosophy.framework div.fw_wrap{
	margin:0 auto;
	position:relative;
	padding:0;
	width:600px;
}

main section.philosophy.framework div.fw_wrap a{
	display:block;
	text-align:center;
	color:#231815;
	line-height:1.1;
}
main section.philosophy.framework div.fw_wrap a:hover{
	color:#dc101d;
}

main section.philosophy.framework div.fw_wrap div.left_link,
main section.philosophy.framework div.fw_wrap div.right_link{
	text-align:center;
	padding:0;
	width:50%;
	height:100%;
	position:absolute;
	z-index:2;
}
main section.philosophy.framework div.fw_wrap div.left_link{
	left:0;
	padding-right:2.5%;
}
main section.philosophy.framework div.fw_wrap div.right_link{
	right:0;
	padding-left:2%;
}

main section.philosophy.framework div.fw_wrap a span{
	font-size:160%;
}

main section.philosophy.framework div.fw_wrap a.creed span{
	font-size:150%;
	letter-spacing:-0.05em;
}

main section.philosophy.framework div.fw_wrap a.vision{
	margin-top:39%;
}

main section.philosophy.framework div.fw_wrap a.creed{
	margin-top:27.5%;
}

main section.philosophy.framework div.fw_wrap a.spirit{
	margin-top:1.5em;
}

main section.philosophy.framework div.fw_wrap a.spirit{
}

main section.philosophy.framework div.fw_wrap a strong{
	display:block;
	font-size:360%;
	font-family:"Arial Narrow", Arial, sans-serif;
	letter-spacing:0.05em;
}

main section.philosophy.framework div.fw_wrap a.vision strong{
	font-size:400%;
}

main section.philosophy.framework div.fw_wrap a:hover{
	text-decoration:none;
}

/* ---------- PROMISE animation ---------- */

main section.philosophy.framework div.fw_wrap div.fw_base{
	margin:0 auto;
	width:600px;
	height:276px;
	background:url(../images/philosophy_framework_01.svg) no-repeat;
	position:relative;
	overflow:hidden;
}

main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask1{
	width:600px;
	height:600px;
	position:absolute;
	left:-25%;
	bottom:52%;
	overflow:hidden;
}

main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask2{
	width:600px;
	height:600px;
	position:absolute;
	left:-25%;
	top:48%;
	overflow:hidden;
	padding:0;
}

main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask3{
	width:320px;
	height:300px;
	position:absolute;
	left:48%;
	bottom:50%;
	overflow:hidden;
	padding:0;
}

main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask4{
	width:360px;
	height:300px;
	position:absolute;
	left:52%;
	top:49.5%;
	overflow:hidden;
	padding:0;
}

main section.philosophy.framework div.fw_wrap div.fw_base.vdelay{
	animation:none;
	opacity:1;
	top:39px;
}

main section.philosophy.framework div.fw_wrap div.fw_base.vdelay.appear{
	top:0;
}

main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask1:before,
main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask2:before,
main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask3:before,
main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask4:before{
	content:"";
	background:#fff;
	display:block;
	width:600px;
	height:600px;
}

main section.philosophy.framework div.fw_wrap div.fw_base.vdelay.appear .fw_mask1:before{
	animation:mask1-anm 2s forwards linear;
	transform-origin:50% 100%;
}
main section.philosophy.framework div.fw_wrap div.fw_base.vdelay.appear .fw_mask2:before{
	animation:mask2-anm 2s forwards linear;
	transform-origin:50% 0%;
}
main section.philosophy.framework div.fw_wrap div.fw_base.vdelay.appear .fw_mask3:before{
	animation:mask3-anm 2s forwards linear;
	transform-origin:50% 100%;
	position:relative;
	left:-50%;
	top:-300px;
}
main section.philosophy.framework div.fw_wrap div.fw_base.vdelay.appear .fw_mask4:before{
	animation:mask4-anm 2s forwards linear;
	transform-origin:50% 0%;
	position:relative;
	left:-50%;
}

@keyframes mask1-anm{
	0%{
		transform:rotate(0deg);
	}
	25%{
		transform:rotate(-180deg);
	}
	100%{
		transform:rotate(-180deg);
	}
}

@keyframes mask2-anm{
	0%{
		transform:rotate(0deg);
	}
	25%{
		transform:rotate(0deg);
	}
	50%{
		transform:rotate(-180deg);
	}
	100%{
		transform:rotate(-180deg);
	}
}

@keyframes mask3-anm{
	0%{
		transform:rotate(0deg);
	}
	50%{
		transform:rotate(0deg);
	}
	75%{
		transform:rotate(180deg);
	}
	100%{
		transform:rotate(180deg);
	}
}

@keyframes mask4-anm{
	0%{
		transform:rotate(0deg);
	}
	75%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(180deg);
	}
}


/* ----- For Tablet ----- */
@media screen and (max-width:1200px){

@keyframes vdelay{
	0%{
		opacity:0;
		top:30px;
	}
	100%{
		opacity:1;
		top:0;
	}
}

main section.philosophy.framework div.fw_wrap{
	width:450px;
}

main section.philosophy.framework div.fw_wrap a span{
	font-size:120%;
}

main section.philosophy.framework div.fw_wrap a.creed span{
	font-size:110%;
}

main section.philosophy.framework div.fw_wrap a.spirit{
}

main section.philosophy.framework div.fw_wrap a strong{
	display:block;
	font-size:270%;
	font-family:"Arial Narrow", Arial, sans-serif;
	letter-spacing:0.05em;
}

main section.philosophy.framework div.fw_wrap a.vision strong{
	font-size:300%;
}

/* ---------- PROMISE animation ---------- */

main section.philosophy.framework div.fw_wrap div.fw_base{
	margin:0 auto;
	width:450px;
	height:207px;
	background:url(../images/philosophy_framework_01.svg) no-repeat;
	position:relative;
	overflow:hidden;
}

main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask1{
	width:450px;
	height:450px;
	position:absolute;
	left:-25%;
	bottom:52%;
	overflow:hidden;
}

main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask2{
	width:450px;
	height:450px;
	position:absolute;
	left:-25%;
	top:48%;
	overflow:hidden;
	padding:0;
}

main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask3{
	width:240px;
	height:225px;
	left:48%;
	bottom:50%;
}

main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask4{
	width:270px;
	height:225px;
	position:absolute;
	left:52%;
	top:50%;
}

main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask1:before,
main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask2:before,
main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask3:before,
main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask4:before{
	width:100%;
	height:100%;
}

main section.philosophy.framework div.fw_wrap div.fw_base.vdelay{
	top:0;
}

main section.philosophy.framework div.fw_wrap div.fw_base.vdelay.appear .fw_mask1:before{
	animation:mask1-anm 2s forwards linear;
	transform-origin:50% 100%;
}
main section.philosophy.framework div.fw_wrap div.fw_base.vdelay.appear .fw_mask2:before{
	animation:mask2-anm 2s forwards linear;
	transform-origin:50% 0%;
}
main section.philosophy.framework div.fw_wrap div.fw_base.vdelay.appear .fw_mask3:before{
	animation:mask3-anm 2s forwards linear;
	transform-origin:50% 100%;
	position:relative;
	left:0;
	top:1%;
}
main section.philosophy.framework div.fw_wrap div.fw_base.vdelay.appear .fw_mask4:before{
	left:0;
}
}


/* ----- For SmartPhone ----- */
@media screen and (max-width:800px){

@keyframes vdelay{
	0%{
		opacity:0;
		top:8vw;
	}
	100%{
		opacity:1;
		top:0;
	}
}

main section.philosophy.framework div.fw_wrap{
	width:100%;
}

main section.philosophy.framework div.fw_wrap a span{
	font-size:120%;
}

main section.philosophy.framework div.fw_wrap a.creed span{
	font-size:110%;
}

main section.philosophy.framework div.fw_wrap a strong{
	font-size:5.6vw;
}

main section.philosophy.framework div.fw_wrap a.vision strong{
	font-size:6.4vw;
}

/* ---------- PROMISE animation ---------- */

main section.philosophy.framework div.fw_wrap div.fw_base{
	margin:0 auto;
	width:calc(268vw / 3);
	height:calc((268vw / 3) * 0.46);
	margin:0;
}

main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask1{
	width:80vw;
	height:80vw;
}

main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask2{
	width:80vw;
	height:80vw;
}

main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask3{
	width:calc(139vw / 3);
	height:30vw;
	bottom:49%;
}

main section.philosophy.framework div.fw_wrap div.fw_base .fw_mask4{
	width:48vw;
	height:30vw;
}

main section.philosophy.framework div.fw_wrap a span{
	font-size:2.4vw;
}

main section.philosophy.framework div.fw_wrap a.spirit{
	margin-top:1em;
}

main section.philosophy.framework div.fw_wrap a.creed{
	margin-top:25%;
}

main section.philosophy.framework div.fw_wrap a.creed span{
	font-size:calc(7.2vw / 3);
}

}