@charset "utf-8";

/* --------------------------------------------
RESPONSIVE DISPLAY
--------------------------------------------- */
@media screen and ( width <= 768px ){
	.pc{
		display : none;
	}
}
@media print , screen and ( width > 768px ){
	.sp{
		display : none;
	}
}

/* --------------------------------------------
CLEAR FIX
--------------------------------------------- */
.clearfix{
	zoom : 1;
}
.clearfix::before , .clearfix::after{
	display : table;
	content : "";
}
.clearfix::after{
	clear : both;
}

/* --------------------------------------------
FLEX BOX
--------------------------------------------- */
.flex-prev{
	position : absolute;
	top : 50% ! important;
	left : .1% ! important;
	z-index : 100 ! important;
	display : block;
	width : 57px ! important;
	height : 57px ! important;
	margin : -57px 0 0 ! important;
	text-indent : -9999px;
	cursor : pointer;
	opacity : 0;
	-webkit-transition : all .3s ease;
}
.flex-next{
	position : absolute;
	top : 50% ! important;
	right : .1% ! important;
	z-index : 100 ! important;
	display : block;
	width : 57px ! important;
	height : 57px ! important;
	margin : -57px 0 0 ! important;
	text-indent : -9999px;
	cursor : pointer;
	opacity : 0;
	-webkit-transition : all .3s ease;
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.ctaTitle_en{
	margin-left : 1rem;
	font-family : Raleway , sans-serif;
	font-size : 44px;
	font-style : normal;
	font-weight : 700;
	line-height : 1;
	color : var( --primary );
	letter-spacing : .04em;
	@media screen and ( width >= 1025px ){
		margin-bottom : 28px;
		margin-left : 0;
		font-size : 72px;
	}
}
.ctaTitle_jp{
	margin-left : 30px;
	font-size : 18px;
	font-weight : 700;
	color : var( --primary );
	@media screen and ( width >= 1025px ){
		margin-left : 0;
		font-size : 24px;
	}
}
.midh1{
	display : none;
	width : 100%;
	margin : 0 auto 1em;
	font-weight : 400;
	color : #666;
	text-align : center;
	letter-spacing : .1em;
}
.midh1 span{
	display : block;
	font-size : .7em;
}
.midh1 span::before , .midh1 span::after{
	padding : 0 10px;
	color : #f66661;
	content : "―";
}
.midh2{
	width : 100%;
	margin : 1em auto;
	font-size : 1.5em;
	font-weight : 400;
	color : #666;
	text-align : center;
}
.midh2::before{
	margin-right : 15px;
	font-weight : 700;
	color : #f66661;
	content : "…";
}
.midh2::after{
	margin-left : 15px;
	font-weight : 700;
	color : #f66661;
	content : "…";
}
@media screen and ( width <= 768px ){
	.midh1{
		font-size : 1.3em;
	}
	.midh2{
		width : 100%;
		margin : 1em auto;
		font-size : 1.21em;
		font-weight : 400;
		color : #666;
		text-align : left;
		border-bottom : 1px solid #f66661;
	}
	.midh2::before{
		display : none;
	}
	.midh2::after{
		display : none;
	}
}

/* --------------------------------------------
TEXTS
--------------------------------------------- */
.text-left{
	text-align : left;
}
.text-center{
	text-align : center;
}
.text-right{
	text-align : right;
}

/* --------------------------------------------
BUTTON
--------------------------------------------- */
.btnBox{
	display : flex;
	align-items : center;
	justify-content : center;
	width : 100%;
	.more_Btn{
		position : relative;
		display : block;
		margin : 0;
		overflow : hidden;
		color : var( --primary );
		text-align : center;
		-webkit-text-decoration : none;
		text-decoration : none;
		letter-spacing : .12em;
		transition : all .6s cubic-bezier( .32 , .625 , .58 , 1 );
		&::before{
			position : absolute;
			top : 50%;
			right : 20px;
			z-index : 1;
			width : 0;
			height : 0;
			margin-top : .05rem;
			content : "";
			border-color : transparent transparent transparent var( --primary );
			border-style : solid;
			border-width : 5px 0 5px 6px;
			transition : all .6s cubic-bezier( .32 , .625 , .58 , 1 );
			transform : translateY( -50% );
		}
		&::after{
			position : absolute;
			top : 0;
			left : 0;
			z-index : 0;
			width : 100%;
			height : 100%;
			content : "";
			background : var( --primary );
			transform : translate3d( 100% , 0 , 0 );
			animation : released-fill .6s cubic-bezier( .32 , .625 , .58 , 1 ) forwards;
		}
		&:hover{
			color : #fff;
			transition : all .6s cubic-bezier( .32 , .625 , .58 , 1 );
			&::before{
				border-color : transparent transparent transparent #fff;
			}
			&::after{
				animation : hover-fill .4s cubic-bezier( .32 , .625 , .58 , 1 ) forwards;
			}
			span{
				color : #fff;
			}
		}
	}
	.moreBtn2{
		width : 240px;
		padding : 17px 0;
		font-family : Raleway , sans-serif;
		font-size : 18px;
		border : solid 1px var( --primary );
		span{
			position : relative;
			z-index : 1;
		}
	}
	@media screen and ( width >= 769px ){
		.moreBtn2{
			width : 280px;
			padding : 19.5px 0;
		}
	}
}
@keyframes hover-fill{
	0%{
		transform : translate3d( -100% , 0 , 0 );
	}
	100%{
		transform : translate3d( 0 , 0 , 0 );
	}
}
@keyframes released-fill{
	0%{
		transform : translate3d( 0 , 0 , 0 );
	}
	100%{
		transform : translate3d( 100% , 0 , 0 );
	}
}

/* --------------------------------------------
IMAGES
--------------------------------------------- */
.image-replacement{
	overflow : hidden;
	text-indent : 100%;
	white-space : nowrap;
}

/* --------------------------------------------
ALERT
--------------------------------------------- */
.alert-help , .alert-info , .alert-error , .alert-success{
	padding : 5px 18px;
	margin : 10px;
	border : 1px solid;
}
.alert-help{
	background : #ebe16f;
	border-color : #e8dc59;
}
.alert-info{
	background : #d5edf8;
	border-color : #bfe4f4;
}
.alert-error{
	background : #fbe3e4;
	border-color : #f8cdce;
}
.alert-success{
	background : #e6efc2;
	border-color : #deeaae;
}

/* --------------------------------------------
PAGINATION
--------------------------------------------- */
.pagination , .wp-prev-next{
	margin : 1.1em 0 2.2em;
}
.pagination{
	text-align : center;
}
.pagination ul{
	display : inline-block;
	padding : 0;
	margin : 1px;
	clear : both;
	white-space : nowrap;
}
.pagination ul li{
	display : inline;
	float : left;
	margin : 3px;
	overflow : hidden;
	font-size : .8em;
}
.pagination ul li a{
	display : block;
	width : 50px;
	padding : 3px 0;
	color : #000;
	-webkit-text-decoration : none;
	text-decoration : none;
	background-color : #fff;
	border : 1px solid #000;
	-webkit-transition : all ease .5s;
	-moz-transition : all ease .5s;
	transition : all ease .5s;
}
.pagination ul li a:hover{
	display : block;
	width : 50px;
	padding : 3px 0;
	color : #fff;
	-webkit-text-decoration : none;
	text-decoration : none;
	background-color : #000;
	border : 1px solid #000;
}
.pagination ul li span{
	display : block;
	width : 50px;
	padding : 3px 0;
	color : #fff;
	background-color : #000;
	border : 1px solid #000;
}
.pagination ul li span.current{
	font-weight : 700;
}
.wp-prev-next .prev-link{
	float : left;
}
.wp-prev-next .next-link{
	float : right;
}
.nav-below{
	width : 100%;
	padding : 2% 0;
	text-align : center;
}
.nav-previous a , .nav-next a{
	display : inline-block;
	padding : .5% 2%;
	margin : 1% .5%;
	font-size : .8em;
	color : #000;
	-webkit-text-decoration : none;
	text-decoration : none;
	background-color : #fff;
	border : 1px solid #000;
	-webkit-transition : all ease 0s;
	-moz-transition : all ease 0s;
	transition : all ease 0s;
}
.nav-previous a::before{
	margin-right : 5px;
	font-family : FontAwesome;
	content : "\f053";
}
.nav-next a::after{
	margin-left : 10px;
	font-family : FontAwesome;
	content : "\f054";
}
.nav-previous a:hover , .nav-next a:hover{
	color : #fff;
	background-color : #000;
	border : 1px solid #000;
}

/* --------------------------------------------
ANIMATIONS
--------------------------------------------- */
.box{
	-webkit-transition : all .7s;
	-moz-transition : all .7s;
	-ms-transition : all .7s;
	-o-transition : all .7s;
	transition : all .7s;
}
.transition{
	opacity : .1;
}
.on.transition{
	opacity : 1;
}
.fadein{
	opacity : .1;
}
.on.fadein{
	opacity : 1;
}
.fadeinleft{
	opacity : .1;
	-webkit-transform : translateX( -50px );
	transform : translateX( -50px );
}
.on.fadeinleft{
	opacity : 1;
	-webkit-transform : translateX( 0 );
	transform : translateX( 0 );
}
.fadeinright{
	opacity : .1;
	-webkit-transform : translateX( 50px );
	transform : translateX( 50px );
}
.on.fadeinright{
	opacity : 1;
	-webkit-transform : translateX( 0 );
	transform : translateX( 0 );
}
.anime01{
	transition : all 1.2s ease 0s;
}
.fadeinup{
	opacity : .1;
	-webkit-transform : translateY( 20px );
	transform : translateY( 20px );
}
.on.fadeinup{
	opacity : 1;
	-webkit-transform : translateY( 0 );
	transform : translateY( 0 );
}
.fadeindown{
	opacity : .1;
	-webkit-transform : translateY( -20px );
	transform : translateY( -20px );
}
.on.fadeindown{
	opacity : 1;
	-webkit-transform : translateY( 0 );
	transform : translateY( 0 );
}
.fadeinleft{
	opacity : .1;
	-webkit-transform : translateX( 50px );
	transform : translateX( 50px );
}
.on.fadeinleft{
	opacity : 1;
	-webkit-transform : translateX( 0 );
	transform : translateX( 0 );
}
.fadeinright{
	opacity : .1;
	-webkit-transform : translateX( -50px );
	transform : translateX( -50px );
}
.on.fadeinright{
	opacity : 1;
	-webkit-transform : translateX( 0 );
	transform : translateX( 0 );
}
.hvr-sweep-to-top{
	position : relative;
	display : inline-block;
	vertical-align : middle;
	box-shadow : 0 0 1px rgb( 0 0 0 / 0 );
	-webkit-transition-duration : .3s;
	transition-duration : .3s;
	-webkit-transition-property : color;
	transition-property : color;
	-webkit-transform : translateZ( 0 );
	transform : translateZ( 0 );
	-webkit-backface-visibility : hidden;
	backface-visibility : hidden;
	-moz-osx-font-smoothing : grayscale;
}
.hvr-sweep-to-top::before{
	position : absolute;
	top : 0;
	bottom : 0;
	left : 0;
	right : 0;
	z-index : -1;
	color : #fff;
	content : "";
	background : #c40f8f;
	-webkit-transition-timing-function : ease-out;
	transition-timing-function : ease-out;
	-webkit-transition-duration : .3s;
	transition-duration : .3s;
	-webkit-transition-property : transform;
	transition-property : transform;
	-webkit-transform : scaleY( 0 );
	transform : scaleY( 0 );
	-webkit-transform-origin : 50% 100%;
	transform-origin : 50% 100%;
}
.hvr-sweep-to-top:hover , .hvr-sweep-to-top:focus , .hvr-sweep-to-top:active{
	color : white;
}
.hvr-sweep-to-top:hover::before , .hvr-sweep-to-top:focus::before , .hvr-sweep-to-top:active::before{
	-webkit-transform : scaleY( 1 );
	transform : scaleY( 1 );
}

/* Grow Shadow */
.hvr-grow-shadow{
	display : inline-block;
	vertical-align : middle;
	box-shadow : 0 0 1px rgb( 0 0 0 / 0 );
	-webkit-transition-duration : .3s;
	transition-duration : .3s;
	-webkit-transition-property : box-shadow , transform;
	transition-property : box-shadow , transform;
	-webkit-transform : translateZ( 0 );
	transform : translateZ( 0 );
	-webkit-backface-visibility : hidden;
	backface-visibility : hidden;
	-moz-osx-font-smoothing : grayscale;
}
.hvr-grow-shadow:hover , .hvr-grow-shadow:focus , .hvr-grow-shadow:active{
	box-shadow : 0 10px 10px -10px rgb( 0 0 0 / .5 );
	-webkit-transform : scale( 1.1 );
	transform : scale( 1.1 );
}