/*
	Color
*/
/* ==================================================
	common
================================================== */

/* ----------------------------------------
	color
---------------------------------------- */
:root {
	--color100: #024ad8;
	--color90: #1b5cdc;
	--color80: #356ee0;
	--color70: #4e80e4;
	--color60: #6792e8;
	--color50: #81a5ec;
	--color40: #9ab7ef;
	--color30: #b3c9f3;
	--color20: #ccdbf7;
	--color10: #e6edfb;
	--color_gray: #e6e6e6;
}

.bg100 {background-color: var(--color100) !important;}
.bg90 {background-color: var(--color90) !important;}
.bg80 {background-color: var(--color80) !important;}
.bg70 {background-color: var(--color70) !important;}
.bg60 {background-color: var(--color60) !important;}
.bg50 {background-color: var(--color50) !important;}
.bg40 {background-color: var(--color40) !important;}
.bg30 {background-color: var(--color30) !important;}
.bg20 {background-color: var(--color20) !important;}
.bg10 {background-color: var(--color10) !important;}

.gry_color { background-color: #f4f4F4; }



/* ----------------------------------------
	cont_wrap
---------------------------------------- */

.cont_wrap {
	padding: 30px 20px;
}

@media screen and (min-width: 768px) {
	.cont_wrap {
		padding: 80px 20px;
	}
}






/* ==================================================
	main
================================================== */

.hero {
	display: flex;
	flex-direction: column;
	max-width: 1920px;
	margin: 0 auto;
}

.hero .cont .inner {
	padding: 30px 20px 15px;
}

@media screen and (min-width: 1024px) {
	.hero .cont .inner {
		padding: 10px 20px 50px;
	}
}

.hero .media img {
	object-fit: cover;
	width: 100%;
	height: auto;
}
@media screen and (min-width: 1000px) {
    .hero .media img {
        max-width: 1920px;
        height: 100%;
    }
}
@media screen and (min-width: 1024px) {
    .hero .x3l {
        font-size: 103px;
        line-height: 108px;
    }
}
@media screen and (min-width: 768px) {
	.hero .cont .inner {
		padding-right: 0;
		padding-left: 30px;
	}
}

@media screen and (min-width: 1280px) {
	.hero {
		flex-direction: row;
		max-height: 480px;
	}

	.hero .cont {
		width: calc(50% - 193px);
	}

	.hero .cont .inner {
		max-width: calc(416px + 30px);
		margin-left: auto;
	}

	.hero .cont h2 {
		position: relative;
		width: max-content;
	}

	.hero .media {
		width: calc(50% + 193px);
	}
}

@media screen and (min-width: 1920px) {
	.hero .cont {
		width: calc(50% - 93px);
	}

	.hero .cont .inner {
		max-width: calc(516px + 30px);
	}

	.hero .media {
		width: calc(50% + 93px);
	}
}




/* ==================================================
	features
================================================== */

.features_slider {
	margin-top: 60px;
}
.features_slider_for,
.features_slider_navi {
	display: none;
}
.features_slider_for.slick-initialized,
.features_slider_navi.slick-initialized {
	display: block;
}
.features_slider_navi {
	margin-top: 30px;
}
.features_slider_navi .item {
	padding-top: 30px;
	user-select: text;
}
.features_slider_navi .item.slick-current {
	position: relative;
}
.features_slider_navi .item.slick-current::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 4px;
	background: #000;
}
.features_slider_navi h3 {
	padding-bottom: 10px;
	border-bottom: 1px solid #000;
}

@media screen and (min-width: 1024px) {
	.features_slider {
		padding: 0 30px;
	}
	.features_slider_navi .slick-track {
		margin: 0 -15px;
	}
	.features_slider_navi .item {
		opacity: .2;
		cursor: pointer;
		transition: .2s;
		margin: 0 15px;
	}
	.features_slider_navi .item.slick-current,
	.features_slider_navi .item:hover {
		opacity: 1;
	}
	.features_slider_navi .item.slick-current:hover {
		cursor: auto;
	}
}





/* ==================================================
	prod_movie
================================================== */

.prod_movie {
	position: relative;
}
.prod_movie .img_area img {
	object-fit: cover;
	width: 100%;
	min-height: 340px;
}
.prod_movie .text_area {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	max-width: 1260px;
	padding: 0 20px;
	color: #fff;
}

@media screen and (min-width: 1024px) {
	.prod_movie .img_area img {
		height: 600px;
	}
}



/* ==================================================
	aio_lineup
================================================== */


.aio_lineup_list {
	/*margin: 30px -15px -10px;*/
	margin: 30px 0 0;
}

.aio_lineup_list .inner {
	border: 1px solid #000;
}
.aio_lineup_list > li:nth-child(n+2) .inner {
	border-top: none;
}
.aio_lineup_list .img_area{
	background: #f4f4f4;
	text-align: center;
}
.aio_lineup_list .head_area {
	padding: 15px 20px;
	/*border-bottom: 1px solid #000;*/
}
.aio_lineup_list .text_area {
	padding: 20px;
}
.aio_lineup_list .txt_link_area {
	padding: 15px 20px;
    display: flex;
    flex-flow: wrap;
}
.aio_lineup_list .txt_link_area ul{
	align-self: flex-end;
}
.aio_lineup_list .txt_link_area a{
	color:#000;
}
.aio_lineup_list .txt_link_area a,
.aio_lineup_list .txt_link_area a:visited,
.aio_lineup_list .txt_link_area a:hover{
	color:#000;
}
.aio_lineup_list .txt_link_area a:hover{
	text-decoration: underline;
}


.aio_lineup_list .btn_area {
	border-top:1px solid #000;
	padding: 20px 10px;
	margin:0 5px;
}

.main_content .aio_lineup_list * + .button {
    margin-top: 10px;
}

@media screen and (min-width: 480px) {
	.main_content .aio_lineup_list *  + .button:nth-child(even) {
	    margin-left: 5px;
	}
	.main_content .aio_lineup_list *  + .link_arrow:nth-child(even) {
	    margin-left: 10px;
	}

	.aio_lineup_list .btn_area .button.line{
		padding: 0.7rem 1.2em;
	}

}
@media screen and (min-width: 768px) {
	.aio_lineup_list {
		display: flex;
		flex-flow: wrap;
	}
	.aio_lineup_list > li {
		width: 49.999%;
	}
	.aio_lineup_list .inner {
		height: 100%;
	}
	.aio_lineup_list > li:nth-child(n+2) .inner {
		border-top: 1px solid #000;
	}
	.aio_lineup_list > li:nth-child(even) .inner {
		border-left: none;
	}
	.aio_lineup_list > li:nth-child(n+3) .inner {
		border-top: none;
	}

	.main_content .aio_lineup_list *  + .link_arrow:nth-child(even) {
	    margin-left: 0;
	}
	.main_content .aio_lineup_list *  + .link_arrow{
	    margin-top: 10px;
	}
}
@media screen and (min-width: 1024px) {
	.aio_lineup_list > li {
		width: calc(100% / 4);
	}
	.aio_lineup_list > li:nth-child(even) .inner {
		border-left: 1px solid #000;
	}
	.aio_lineup_list > li:nth-child(n+2) .inner {
		border-left: none;
	}
	.aio_lineup_list > li:nth-child(n+3) .inner {
		border-top: 1px solid #000;
	}

	.main_content .aio_lineup_list *  + .link_arrow:nth-child(even) {
	    margin-left: 10px;
	}
}



/* ==================================================
	others_lineup
================================================== */
.others_lineup .cont {
	padding: 20px 20px 55px;
}
.others_lineup_list {
	margin: 0 -15px;
}
.others_lineup_list > li {
	padding: 15px;
}
.others_lineup_list .img_area img {
	width: 100%;
}
.others_lineup_list .img_area + .text_area {
	margin-top: 30px;
}

@media screen and (min-width: 480px) {
	.others_lineup_list {
		display: flex;
		flex-wrap: wrap;
	}
	.others_lineup_list > li {
		width: 50%;
	}
}

@media screen and (min-width: 768px) {
	.others_lineup .cont {
		padding-bottom: 85px;
	}
	.others_lineup_list > li {
		width: 33.33333%;
	}
}


/* ==================================================
	disclaimers
================================================== */

.disclaimers {
	padding: 30px 20px;
	background: #e2e2e2;
}
.disclaimers h3 {
	margin-bottom: 10px;
	font-weight: normal;
}
.disclaimers p {
	font-size: 11px;
}