@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#main .mainVisual {
	padding: 115px 0 0;
	position: relative;
}
#main .mainVisual .mainImg {
	margin-left: auto;
	width: calc(50% + 424px)!important;
	position: relative;
	z-index: 1;
}
#main .mainVisual h2 {
	position: absolute;
	top: 29.9%;
    right: calc(50% + 40px);
	z-index: 2;
}
.vtn #main .mainVisual h2 {
    right: calc(50% - 200px);
}
#main .mainVisual h2 .large {
	margin-top: 19px;
	padding: 13px 25px 7px 22px;
	display: inline-block;
	color: #fff;
	font-size: 4.481rem;
	font-weight: bold;
	letter-spacing: 0.025em;
	background-color: #0D7EFA;
}
.vtn #main .mainVisual h2 .large {
	font-size: 3.3rem;
}
#main .mainVisual h2 .large:first-of-type {
	margin-top: 0;
}
#main .mainVisual h2 .small {
	margin-top: 69px;
	padding: 8px 29px 6px 13px;
	display: inline-block;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.05em;
	background-color: #000;
}
#main .mainVisual .mainImg {
	overflow: hidden;
}
@media all and (-ms-high-contrast:none){
	#main .mainVisual .mainImg img {
		width: 1111px;
	}
} 
.js_wiper2 .slides {
	transform: scale(1.5);
}
.js_wiper2 li.on {
	-webkit-animation:indexSlide 8s linear forwards;
	animation:indexSlide 8s linear forwards
}
@-webkit-keyframes indexSlide {
	0% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	100% {
	 -webkit-transform:translateX(-80px);
	 transform:translateX(-80px)
	}
}
@keyframes indexSlide {
	0% {
	 -webkit-transform:translateX(0);
	 transform:translateX(0)
	}
	100% {
	 -webkit-transform:translateX(-80px);
	 transform:translateX(-80px)
	}
}
#main .creation {
	margin-bottom: 80px;
	padding: 90px 0 73px;
	position: relative;
}
#main .creation::before {
	width: calc(50% + 524px);
	height: 595px;
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	content: "";
	background: url("../img/index/bg01.png") no-repeat center center /cover;
}
#main .creation .innerBox {
	max-width: 845px;
}
#main .creation .innerBox .ttl {
	margin-bottom: 35px;
	font-size: 2.8rem;
	font-weight: bold;
	letter-spacing: 0.05em;
}
#main .creation .innerBox .txt {
	margin-bottom: 28px;
	letter-spacing: 0.05em;
}
#main .creation .innerBox .lastTxt {
	margin-bottom: 42px;
}
#main .creation .btnList li {
	margin-right: 39px;
	display: inline-block;
}
#main .creation .btnList li:last-child {
	margin-right: 0;
}
@media all and (max-width: 1200px) and (min-width: 1000px) {
	#main .mainImg h2 {
		left: -57px;
	}
	#main .mainImg h2 .large {
		font-size: 4rem;
	}
}
@media all and (max-width: 999px) {
	#main .mainVisual {
		padding: 78px 0 130px;
	}
	#main .mainVisual .mainImg {
		width: auto!important;
		margin-left: 35px;
	}
	#main .mainVisual h2 {
		position: absolute;
		top: auto;
		bottom: 45px;
		left: 0;
		right: auto;
	}
	#main .mainVisual h2 .large {
		margin-top: 16px;
    	padding: 6px 9px 0px 15px;
		font-size: 2.6rem;
	}
	.vtn #main .mainVisual h2 .large {
		font-size: 1.9rem;
	}
	.vtn #main .mainVisual h2 .small {
		font-size: 1.2rem;
	}
	#main .mainVisual h2 .large:first-of-type {
		margin-top: 0;
	}
	#main .mainVisual h2 .small {
		margin-top: 23px;
		padding: 5px 11px 4px 8px;
		font-size: 1.4rem;
	}
	#main .creation {
		margin-bottom: 0;
    	padding: 55px 0 60px;
		position: relative;
	}
	#main .creation::before {
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		content: "";
		background-image: url("../img/index/sp_bg01.png");
		z-index: -1;
	}
	#main .creation .innerBox {
		max-width: 845px;
	}
	#main .creation .innerBox .ttl {
		margin-bottom: 29px;
		font-size: 2.1rem;
		line-height: 1.75;
	}
	#main .creation .innerBox .txt {
		margin-bottom: 28px;
		line-height: 1.75;
		font-feature-settings: "palt";
		-moz-font-feature-settings: "palt";
	}
	#main .creation .innerBox .lastTxt {
		margin-bottom: 47px;
	}
	#main .creation .btnList li {
		margin: 0 9px 10px 0;
		display: block;
	}
	#main .creation .btnList li:last-child {
		margin-bottom: 0;
	}
}
@media all and (max-width: 399px) {
	.vtn #main .mainVisual h2 .large {
		font-size: 1.5rem;
	}
	.vtn #main .mainVisual h2 .small {
		font-size: 1rem;
	}
	#main .creation .innerBox .ttl {
		font-size: 1.7rem;
	  }
}