/* MAIN */
.mobile-top{height:50px;background-color:#ffd008;position:inherit;display:inherit}
.main_visual{background:url("../images/main/main.png") no-repeat right center}
.main_visual .txt_box{position:absolute;left:4%;top:15%;width:50%;color:#fff;white-space:normal;word-break:break-word}
.main_visual .txt_box .logo-gap{margin-top:50px}
.main_visual .txt_box .content-logo{top:50%;left:30%;position:absolute}
.main_visual .txt_box .content-logo img{width:150px}

.main_visual .content-title{
	font-size:3vw;
	/*line-height:1.4;*/
	font-weight:700;
	margin-bottom:30px;
	word-break:keep-all;
	z-index:100000
}
.main_visual .content-subtitle{
	width:50%;
	font-size:1.3vw;
	line-height:1.3;
	font-weight:400;
	margin-left:5px;
	vertical-align:middle;
	word-break:keep-all;
	z-index:10000
}
.main_visual .main_txt{
	position:absolute;
	font-size:15vh;
	line-height:17vh;
	margin-top:40vh;
	font-weight:900;
	/*color:transparent;*/
	-webkit-text-stroke:1px #000;
	-webkit-text-fill-color:transparent;
	color:white;
	z-index:1
}
.main_visual .sub-text{margin:0 20px 102px 0}
.ver-align{display:inline-block;vertical-align:middle}
.visual{margin-top:0!important}

/* swipe */
.swiper-container{
	width:100%;
	height:86vh;
	margin-left:auto;
	margin-right:auto
}
.swiper-slide{
	width:100%;
	height:105vh;
	/* Center slide text vertically */
	display:-webkit-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-box-align:center;
	-ms-flex-align:center;
	-webkit-align-items:center;
	align-items:center
}
.swiper-slide > div{width:100%}
.swiper-slide .left{
	width:50%;
	height:94vh;
	margin-top:70px;
	float:left;
	background:#fb998e;
	background-size:cover!important;
	background-position:center center!important
}
.swiper-slide .left img{
	width:100%;
	height:100%
}
.swiper-slide .right{
	position:relative;
	width:50%;
	height:120vh;
	float:right
}
.swiper-slide .object{
	position:absolute;
	z-index:10;
	bottom:29%;
	left:calc(50% - 110px)
}
.swiper-slide .lazy{background-image:none}
.swiper-slide .con01 .left{background:url("../images/main/con01_left.png") no-repeat}
.swiper-slide .con02 .left{background:url("../images/main/con02_left.png") no-repeat}
.swiper-slide .con03 .left{background:url("../images/main/con03_left.png") no-repeat}
.swiper-slide .con04 .left{background:url("../images/main/con04_left.png") no-repeat}
.swiper-slide .con05 .left{background:url("../images/main/con05_left.png") no-repeat}
.swiper-slide .con06 .left{background:url("../images/main/con06_left.png") no-repeat}
.swiper-slide .con07 .left{background:url("../images/main/con07_left.png") no-repeat}
.swiper-slide .con08 .left{background:url("../images/main/con08_left.png") no-repeat}
.swiper-slide .con09 .left{background:url("../images/main/con09_left.png") no-repeat}
.swiper-slide .con10 .left{background:url("../images/main/con10_left.png") no-repeat}
.swiper-slide .con11 .left{background:url("../images/main/con11_left.png") no-repeat}
.swiper-slide .con12 .left{background:url("../images/main/con12_left.png") no-repeat}
.swiper-button-area{
	position:absolute;
	width:100px;
	top:30%;
	left:8%;
	height:22px;
	z-index:10000
}
.swiper-slide .right .txt_area{
	position:absolute;
	top:20%;
	left:5%;
	z-index:1000;
	padding:0 30px;
	box-sizing:border-box
}
.swiper-slide .right .txt_area h2{
	font-size:4vw;
	font-weight:700;
	color:#333;
	margin-bottom:20px;
	word-break:keep-all
}
.swiper-slide .right .txt_area p{
	font-size:1.5vw;
	font-weight:400;
	color:#333;
	line-height:2rem;
	word-break:keep-all
}


@media all and (min-width:1921px){
	.main_visual .content-title{font-size:3.63rem}
	.main_visual .content-subtitle{font-size:1.57rem}
	.swiper-slide .right .txt_area h2{font-size:4.84rem}
	.swiper-slide .right .txt_area p{font-size:1.82rem}
}

@media all and (max-width:1366px){
	.main_visual .txt_box .content-logo img{width:130px}
}
@media all and (max-width:1333px){
	.mobile-top{height:380px}
	.main_visual .txt_box{width:95%;top:-245px}
	.main_visual .content-title{font-size:6vw}
	.main_visual .txt_box .content-subtitle{width:70%;font-size:3vw}
	.main_visual .txt_box .logo-gap{margin-top:20px}
	.main_visual .txt_box .content-logo{top:60%;left:55%;position:absolute}
	.main_visual .txt_box .content-logo img{width:150px}
}
@media all and (max-width:1024px){
	.swiper-slide .right .txt_area h2{font-size:5vw;margin-bottom:15px}
	.swiper-slide .right .txt_area p{font-size:2vw}
}

/* ipad-pro */
@media only screen and (device-width:1024px) and (device-height:1366px) and (-webkit-min-device-pixel-ratio:1.5){
	.visual{height:40vh}
	.swiper-container{height:54vh}
	.swiper-slide{height:49vh}
	.swiper-slide .left{height:54vh}
	.swiper-slide .right{height:54vh}
	.swiper-slide .object{bottom:1%}
	.swiper-slide .object img{width:90%}
}
/* ipad-pro (landscape) */
@media only screen and (width:1366px) and (height:1024px)and (-webkit-min-device-pixel-ratio:1.5){
	.visual{height:62vh}
	.main_visual .content-subtitle{width:70%;font-size:1.7vw}

	.swiper-container{height:65vh}
	.swiper-slide{height:71vh}
	.swiper-slide .left{height:65vh;margin-top:92px}
	.swiper-slide .right{height:89vh}
	.swiper-slide .object{left:calc(50% - 85px);bottom:17%}
	.swiper-slide .object img{width:75%}
}

@media all and (max-width:920px){
	.mobile-top{height:310px}
	.main_visual .txt_box{width:95%;top:-215px}
	.main_visual .content-title{font-size:6vw}
	.main_visual .txt_box .content-subtitle{width:100%;font-size:4.2vw}
	.main_visual .txt_box .logo-gap{margin-top:20px}
	.main_visual .txt_box .content-logo{top:60%;left:55%;position:absolute}
	.main_visual .txt_box .content-logo img{width:100px}

	.visual{height:80vh}
	.swiper-slide .right{float:none;width:100%;height:47vh}
	.swiper-slide .left{float:none;width:100%;height:60vh;margin-top:0}

	.swiper-slide .object{top:31%;left:65%}
	.swiper-slide .object img{width:80%}
	.swiper-button-area{top:94%;left:30px}
	.swiper-slide .right .txt_area{top:50%;left:0}

	.swiper-slide .right .txt_area button{width:125px;height:35px}
	.swiper-slide .right .txt_area button{margin-top:15px}
	.swiper-slide .right .txt_area button span{width:10px;right:15px}
	.swiper-slide .right .txt_area button span::before{width:8px}
	.swiper-slide .right .txt_area button span::after{width:8px}
}

/* galaxy tab s */
@media all and (max-width:800px){
	.visual{height:45vh}
	.swiper-container{height:100vh}
	.swiper-slide .left{height:72vh}
	.swiper-slide .right{height:28vh}
	.swiper-slide .right .txt_area{top:31%}
	.swiper-slide .object{top:20%}
}

/* ipad */
@media all and (device-width:768px) and (device-height:1024px){
	.visual{height:53vh}
	.swiper-container{height:100vh}
	.swiper-slide .left{height:72vh}
	.swiper-slide .right{height:28vh}
	.swiper-slide .right .txt_area{top:31%}
	.swiper-slide .object{top:22.5%}
	.swiper-slide .object img{width:70%}
}
/* ipad (landscape) */
@media all and (min-width:768px) and (max-width:1024px) and (orientation:landscape){
	.visual{height:59vh}
	.mobile-top{height:200px}
	.main_visual .txt_box{left:4%;top:-15%}
	.main_visual .content-title{font-size:5vw}
	.main_visual .txt_box .content-subtitle{font-size:2.7vw}
	.main_visual .txt_box .logo-gap{margin-top:40px}
	.main_visual .txt_box .content-logo{top:56%;left:27%}
	.main_visual .txt_box .content-logo img{width:100px}

	.swiper-container{height:74vh}
	.swiper-slide{height:62vh}
	.swiper-slide .left{height:75vh;margin-top:92px}
	.swiper-slide .right{height:75vh;margin-top:-40px}
	.swiper-slide .object{left:calc(50% - 90px);top:350px;position:absolute}
	.swiper-slide .object img{width:75%}
}

@media all and (max-width:650px){
	.visual{height:50vh}
	.swiper-slide{height:100%}
	.swiper-slide .right .txt_area h2{font-size:7vw}
	.swiper-slide .right .txt_area p{font-size:3.5vw;line-height:1.1rem}
}
@media all and (max-width:500px){
	.visual{height:43vh}
}
@media all and (max-width:450px){
	.visual{height:53vh}
	.swiper-container{height:102vh}
	.swiper-slide .left{height:73vh}
	.swiper-slide .right{height:29vh}
	.swiper-slide .right .txt_area{top:15%}
	.swiper-slide .object{top:21%}
}
@media all and (max-width:414px){
	.main_visual .txt_box .content-logo img{width:75px}
	.visual{height:39vh}
	.swiper-container{height:84vh}
	.swiper-slide .left{height:54vh}
	.swiper-slide .right{height:30vh}
	.swiper-slide .right .txt_area{top:15%}
	.swiper-slide .object{top:27%}
}
/* iphone xs */
@media all and (max-width:414px) and (min-height:800px) {
	.visual{height:32vh}
}
/* iphone 11 */
@media only screen and (device-width:414px) and (device-height:896px) and (-webkit-device-pixel-ratio:2){
	.visual{height:30vh}
}
/* iphone 6+, 6s+, 7+, 8+ */
@media only screen and (device-width:414px) and (device-height:736px) and (-webkit-device-pixel-ratio:3){}
/* iphone 6, 7, 8 */
@media all and (max-width:375px){
	.visual{height:41vh}
	.swiper-container{height:90vh}
	.swiper-slide .left{height:55vh}
	.swiper-slide .right{height:35vh}
	.swiper-slide .right .txt_area{top:18%}
	.swiper-slide .object{top:32%}
}
/* iphone 8 */
@media only screen and (device-width:375px) and (device-height:667px) and (-webkit-device-pixel-ratio:2){
}
/* iphone x */
@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3){
	.visual{height:34vh}
	.swiper-container{height:82vh}
	.swiper-slide .left{height:54vh}
	.swiper-slide .right{height:28vh}
	.swiper-slide .right .txt_area{top:15%}
	.swiper-slide .object{top:27%}
}

/* galaxy s5 */
@media all and (max-width:360px){
	.visual{height:39vh}
	.swiper-container{height:82vh}
	.swiper-slide .left{height:55vh}
	.swiper-slide .right{height:27vh}
	.swiper-slide .right .txt_area{top:16%}
	.swiper-slide .object{top:24%}
}
/* iphone 5, se */
@media all and (max-width:320px){
	.mobile-top{height:280px}
	.main_visual .txt_box{top:-185px}

	.swiper-container{height:84vh}
	.swiper-slide .left{height:55vh}
	.swiper-slide .right{height:31vh}
	.swiper-slide .object{top:28%}
	.main_visual .txt_box .content-logo img{width:70px}
}
/* iphone 4 */
@media all and (max-width:320px) and (max-height:480px){
	.visual{height:45vh}

	.swiper-container{height:98vh}
	.swiper-slide .left{height:65vh}
	.swiper-slide .right{height:33vh}
	.swiper-slide .right .txt_area{top:14%}
	.swiper-slide .object{top:26%}
}

/* mobile (landscape) */
@media all and (min-width:320px) and (max-width:896px) and (orientation:landscape){
	.visual{height:95vh}
	.mobile-top{height:150px}
	.main_visual .txt_box{left:4%;top:-15%}
	.main_visual .content-title{font-size:5vw}
	.main_visual .txt_box .content-subtitle{font-size:2.7vw}
	.main_visual .txt_box .logo-gap{margin-top:40px}
	.main_visual .txt_box .content-logo{top:56%;left:24%}
	.main_visual .txt_box .content-logo img{width:85px}

	.swiper-container{height:86vh}
	.swiper-slide{height:62vh}
	.swiper-slide .left{width:50%;height:87vh;margin-top:92px;float:left}
	.swiper-slide .right{width:50%;height:75vh;margin-top:70px;float:right}
	.swiper-slide .object{left:calc(50% - 60px);top:217px;position:absolute}
	.swiper-slide .object img{width:40%}
}