/*
========================================

    special_contents.css

========================================
*/

html.scroll_stop{
	//overflow: hidden;
	border: 5px solid red;
	}
/*
#specialblock_1{border:1px solid red;}
#specialblock_2{border:1px solid yellow;}
#specialblock_3{border:1px solid green;}
#specialblock_4{border:1px solid blue;}
#specialblock_5{border:1px solid pink;}
#specialblock_6{border:1px solid purple;}
*/

.wrap-special_content_2021{
	margin: 0px 0;
	position: relative;
	}

.wrap-special_content_2021 .inner_fill a.btn_skip,
.wrap-special_content_2021 .inner_fill a.btn_skip2{
	position: absolute;
	top:auto;
	bottom:15px;
	right:30px;
	background: #1a2e56;
	border: 2px solid #fff;
	color: #fff;
	z-index: 10000000000;
	line-height: 24px;
	display: inline-block;
	padding: 5px 10px;
	opacity: 0.0;
	font-size: 14px;
	line-height: 14px;
	height: 28px;
	}

/*スクロール制御*/
.block_wrapper.movie_scroll .inner_fill.scroll_stop{

	}

.block_wrapper.movie_scroll .inner_fill video.pc{
	max-height: calc(100vh - 100px);
	width:100%;
	/*
	max-width: 1280px;
	border: 1px solid pink;
	*/
	}


.wrap-special_content_2021 .movie_scroll .inner_fill a.btn_skip{

	}
.wrap-special_content_2021 .movie_scroll .inner_fill a.btn_skip{
	bottom:-75px;
	}
.wrap-special_content_2021 .movie_scroll .inner_fill a.more_video{
	position: fixed;
	top: auto;
	bottom: 98px;
	right: 20px;
	width: 130px;
	border: 1px solid #fff;
	z-index: 100;
	display: block;
	opacity: 0;
	pointer-events: none;
	}
.wrap-special_content_2021 .movie_scroll .inner_fill span.watch_now{
	color: #fff;
	position: fixed;
	width: 180px;
	width: 130px;
	right: 20px;
	bottom: 180px;
	opacity: 0;
	}

.wrap-special_content_2021 .movie_scroll .inner_fill a.more_video.onMouseVideo{
	pointer-events: auto;
	}



@media (max-width: 768px) {
	.wrap-special_content_2021 .movie_scroll .inner_fill a.more_video{
		left: 10px;
		bottom:70px;
		}
	.wrap-special_content_2021 .movie_scroll .inner_fill span.watch_now{
		left: -10000px;
		}
}

.wrap-special_content_2021 .movie_scroll .inner_fill a.more_video:after {
		content: "\f167";
		font-family: "Font Awesome 5 Brands";
		font-size: 25px;
		display: block;
		position: absolute;
		margin: auto;
		padding-right: 0;
		color: red;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		line-height: 65px;
	}


.wrap-special_content_2021 .inner_fill.fixed a.btn_skip{
	opacity: 1;
	}
.wrap-special_content_2021 .first_image_next_more_images  .inner_fill.fixed a.btn_skip{
		top:calc(10vh - 0px);
		bottom:auto;
		}
.wrap-special_content_2021 .title_and_Bg_images  .inner_fill.fixed a.btn_skip{
	top:calc(100vh - 100px);
	bottom:auto;
	}

.special_content_2021{
	padding: 20px 0;
	}
.special_content_2021 ul{
	letter-spacing: -0.4em;
	//background: #70788a;
	opacity: 0;
	overflow: hidden;
	border-top: 20px solid #fff;
	}
.special_content_2021 ul li{
	letter-spacing: normal;
	display: inline-block;
	width:50%;
/*
	margin: 0 0 -32678px 0;
	padding: 0 0 32678px 0;
*/
	margin: 0;
	padding: 0;
	vertical-align: top;
	text-align: left;
	}
.special_content_2021 ul.center li{
	width: 100%;
	margin: 0 auto;
	max-width: 750px;
	}

.special_content_2021 ul li .wrap_appeal{
	max-width: calc(100% - 40%);
	margin-right: 12px;
	word-break: break-word;
	color: #fff;
	display: block;
	}
.special_content_2021 ul li .wrap_appeal h3,
.special_content_2021 ul li .wrap_appeal h4,
.special_content_2021 ul li .wrap_appeal p{
	color: #fff;
	text-align: left;
	}
.special_content_2021 ul li .wrap_appeal h3{
	font-size: 60px;
	font-weight: 600;
	line-height: 70px;
	}
.special_content_2021 ul li .wrap_appeal h4{font-size: 20px;}
.special_content_2021 ul li .wrap_appeal p{font-size: 14px;}
.special_content_2021 ul li .wrap_appeal p.small_tex{font-size: 11px;}


.special_content_2021 ul.appeal_left li:nth-child(1){
	text-align: right;
	opacity: 0;
	width:60%;
	background: #70788a;
	}
.special_content_2021 ul.appeal_left  li:nth-child(1) .wrap_appeal{
	margin:40px 40px 80px auto;
	}
.special_content_2021 ul.appeal_left li:nth-child(2){
	background: #fff;
	width:40%;
	}
.special_content_2021 ul.appeal_right li:nth-child(1),
.special_content_2021 ul.appeal_right li:nth-child(3){
	text-align: right;
	background: #fff;
	width:40%;
	z-index: 1;
	position: relative;
	}
.special_content_2021 ul.appeal_right li:nth-child(2){
	text-align: right;
	opacity: 0;
	width:60%;
	background: #70788a;
	}
.special_content_2021 ul.appeal_right  li:nth-child(2) .wrap_appeal{
	margin:40px auto 80px 40px;
	}

.special_content_2021 ul li img.moveLeft{
	margin-top:20px;
	margin-left:-200px;
	}
.special_content_2021 ul li img.moveRight{
	margin-top:20px;
	margin-right:-200px;
	}

@keyframes wrapMove {
	0% {
		 //margin-left:-200px;
		 opacity: 0;
	}
	100% {
		//margin-left:0px;
		opacity: 1;
	}
}
@keyframes imgMoveLeft {
	0% {
		 margin-left:-200px;
		 opacity: 0;
	}
	100% {
		margin-left:-20px;
		opacity: 1;
	}
}
@keyframes imgMoveRight {
	0% {
		 margin-right:-200px;
		 opacity: 0;
	}
	100% {
		margin-right:-20px;
		opacity: 1;
	}
}
@keyframes imgFadeCenter{
	0% {
		 opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeTex {
	0% {
		 opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.special_content_2021.changed ul{
	animation-name: wrapMove;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	}
.special_content_2021.changed ul.appeal_left{
	animation-name: imgMoveLeft;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	}
.special_content_2021.changed ul.appeal_right{
	animation-name: imgMoveRight;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	}
.special_content_2021.changed ul li img.moveLeft{
	animation-name: imgMoveLeft;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	}
.special_content_2021.changed ul li img.moveRight{
	animation-name: imgMoveRight;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	}
.special_content_2021.changed ul li img.fadeCenter{
	animation-name: imgFadeCenter;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	}

.special_content_2021.changed ul.appeal_left li:nth-child(1),
.special_content_2021.changed ul.appeal_right li:nth-child(2){
	animation-name: fadeTex;
	animation-duration: 1s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
	}
.special_content_2021 ul.appeal_right li.pc{
	display: inline-block;
	}
.special_content_2021 ul.appeal_right li.sp{
	display: none;
	}

.special_content_2021 .wrap_list_toggle_box{}

.list_normal_box{
	margin-top: 40px;
	}

.wrap_list_toggle_box h2,
.list_normal_box h2,
.special_image_normal h2{
	letter-spacing: normal;
	display: block;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto 40px auto;
	font-size: 22.5px;
	}


@media (max-width: 768px) {
	.wrap-special_content_2021{
		margin:20px 0;
		}
	.special_content_2021 ul.center li{
		width: calc(100% - 20px);
		}
	.special_content_2021 ul.appeal_left li:nth-child(1),
	.special_content_2021 ul.appeal_right li:nth-child(2){
		width: 100%;
		display: block;
		}
	.special_content_2021 ul.appeal_left li:nth-child(1) .wrap_appeal,
	.special_content_2021 ul.appeal_right li:nth-child(2) .wrap_appeal{
		margin:0 20px;
		}
	.special_content_2021 ul.appeal_left li:nth-child(2),
	.special_content_2021 ul.appeal_right li:nth-child(3){
		width: 100%;
		display: block;
		}
	.special_content_2021 ul.appeal_right li.pc{
		display: none;
		}
	.special_content_2021 ul.appeal_right li.sp{
		display: block;
		}
	.special_content_2021 ul li .wrap_appeal h3{font-size: 40px;}
	.special_content_2021 ul li .wrap_appeal h4{font-size: 18px;}
	.special_content_2021 ul li .wrap_appeal p{font-size: 13px;}
	.special_content_2021 ul li .wrap_appeal p.small_tex{font-size: 11px;}


@keyframes imgMoveLeft {
	0% {
		 margin-left:-200px;
		 opacity: 0;
	}
	100% {
		margin-left:0px;
		opacity: 1;
	}
}
@keyframes imgMoveRight {
	0% {
		 margin-right:-200px;
		 opacity: 0;
	}
	100% {
		margin-right:0px;
		opacity: 1;
	}
}

}

/*
 =========== Old Contents
*/

@media (max-width: 768px) {
div.specialContent,
div.various_cont,
div.category_leadcopy,
div.product_leadcopy,
div.slide-and-arrow,
div.area-map-container{
	transform-origin: top left;
	}
div.specialContent{

	}
div.product_leadcopy{

	}

#inline_01_01, #inline_01_02, #inline_01_03, #inline_01_04, #inline_01_05, #inline_01_06, #inline_01_07, #inline_01_08, #inline_01_09, #inline_01_10, #inline_01_11,
#inline_01_01 img,
#inline_01_02 img,
#inline_01_03 img,
#inline_01_04 img,
#inline_01_05 img,
#inline_01_06 img,
#inline_01_07 img,
#inline_01_08 img,
#inline_01_09 img,
#inline_01_10 img,
#inline_01_11{
	max-width: none!important;
	}

div.various_cont{
	overflow: hidden; /* 必要に応じて */
	}
div.area-map-container{
	max-width: none;
	width: 780px;
	}
.area-map-container a{
    top: 0;
    left: 0;
	}
div.kf_special_modal{
	width: 100%!important;
	}
span.modal_inner_title_icon{
	display: block;
	margin: 10px 0;
	height: 40px;
	}

}