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

#visid p + p {
	margin-top: 1em;
}

@media screen and (max-width: 1023px) {
	#visid img{
		height: auto;
	}
}

.color_gray{
	background: #e6e6e6;
}

/* ----------------------------------------
	breadcrumbs, title
---------------------------------------- */

.page_title_area_aem {
	display: none;
}

@media screen and (max-width: 1023px) {
	.breadcrumbs.for_mobile {
		display: none;
	}
}

@media screen and (min-width: 1024px) {
	.breadcrumbs.for_pc {
		display: none;
	}
}



/* ----------------------------------------
	page_top
---------------------------------------- */

@media screen and (min-width: 1024px) {
	.page_top {
		padding: 0;
		border-top: none;
	}
	.page_top_text {
		display: none;
	}
}



/* ----------------------------------------
	button
---------------------------------------- */

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



/* ----------------------------------------
	footnote
---------------------------------------- */

.main_content [class*="footnote"],
.main_content [class*="footnote"] > li {
	color: inherit;
}



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

.cont_wrap { padding: 40px 20px; }

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

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




/* ==================================================
	index
================================================== */

/*============================ 
	main
============================ */
.main {
	position: relative;
	min-height: 500px;
    overflow: hidden;
}

.main .text_area {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	color: #fff;
	background: rgba(0,0,0,.4);
}
.main .title,
.main .subtitle {
	padding: 15px 20px;
	border-bottom: 1px solid #fff;
}
.main .img_area {
	max-width: 1920px;
	margin: 0 auto;
}
.main .video_area video {
    height: auto;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    z-index: -1;
}

.main .btn_area {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	color: #fff;
	background: rgba(0,0,0,.4);
	border-top: 1px solid #fff;
	padding: 15px 20px;
}

@media screen and (min-width: 768px) {
	.main {
		min-height: 700px;
	}
	.main .title,
	.main .subtitle {
		padding-right: 30px;
		padding-left: 30px;
	}
	.main .img_area img {
		min-height: 600px;
	}
}




/*======================================================== 
	color__boxs
======================================================== */
.color__boxs .heading,
.color__boxs .sub_heading {
	color: #fff;
	padding: 25px 20px;
}
.color__boxs .heading{
	background: #212248;
}
.color__boxs .sub_heading{
	background: #63647f;
}
.color__boxs .copy {
	padding: 2rem 1.6rem;
}
@media screen and (min-width: 768px) {
	.color__boxs .heading{
		padding-right: 30px;
		padding-left: 30px;
	}
	.color__boxs .copy {
		padding: 60px 20px
	}
}
/*------------------------------------------------- color_sky*/
.color__boxs.color_sky .heading,
.color__boxs.color_sky .sub_heading {
	color: #000;
}
.color__boxs.color_sky .heading{
	background: #549ef7;
}
.color__boxs.color_sky .sub_heading{
	background: #87bbf9;
}
/*------------------------------------------------- color_cyan*/
.color__boxs.color_cyan .heading,
.color__boxs.color_cyan .sub_heading {
	color: #000;
}
.color__boxs.color_cyan .heading{
	background: #0096d6;
}
.color__boxs.color_cyan .sub_heading{
	background: #4cb5e2;
}

/*------------------------------------------------- color_wisteria*/
.color__boxs.color_wisteria .heading,
.color__boxs.color_wisteria .sub_heading {
	color: #000;
}
.color__boxs.color_wisteria .heading{
	background: #a89efa;
}
.color__boxs.color_wisteria .sub_heading{
	background: #c2bbfb;
}

/*------------------------------------------------- color_purple */
.color__boxs.color_purple .heading,
.color__boxs.color_purple .sub_heading {
	color: #000;
}
.color__boxs.color_purple .heading{
	background: #b655f5;
}
.color__boxs.color_purple .sub_heading{
	background: #cc88f8;
}




/*-------------------------------------------
	hdna_area
-------------------------------------------- */
.hdna_area {
	display: flex;
	flex-direction: column; /* 画像を上にする場合は column-reverse にしてください */
	background: #99d5ef;
}
.hdna_area .title {
	background: #0096d6;
}
.hdna_area .subtitle {
	background: #4cb5e2;
}
.hdna_area .title .inner,
.hdna_area .subtitle .inner {
	padding: 15px 20px;
}
.hdna_area .text .inner {
	padding: 30px 20px 50px;
}
.hdna_area .list {
	margin-top: 20px;
}
.hdna_area .list > li {
	padding: .5em 0;
	border-bottom: 1px solid #000;
}
.hdna_area .img_area img {
	object-fit: cover;
	width: 100%;
	height: auto;
}

@media screen and (min-width: 768px) {
	.hdna_area .text_area .inner {
		padding-right: 30px;
		padding-left: 30px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
	.hdna_area .img_area img {
		height: 400px;
	}
}

@media screen and (min-width: 1280px) {
	.hdna_area {
		flex-direction: row;
		min-height: 600px;
	}
	.hdna_area .text_area {
		width: calc(50% - 193px);
	}
	.hdna_area .text_area .inner {
		max-width: calc(416px + 30px);
		margin-left: auto;
	}
	.hdna_area .img_area {
		width: calc(50% + 193px);
	}
	.hdna_area .img_area img {
		max-width: 1053px;
		height: 100%;
	}
}

@media screen and (min-width: 1920px) {
	.hdna_area .text_area {
		width: calc(50% - 93px);
	}
	.hdna_area .text_area .inner {
		max-width: calc(516px + 30px);
	}
	.hdna_area .img_area {
		width: calc(50% + 93px);
	}
}





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

v_switcher_wrapper

===================================== */
.v_switcher_wrapper {
	padding: 0 20px;
}
.v_switcher_wrapper .for_pc {
	display: none;
}

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

@media screen and (min-width: 1024px) {
	.v_switcher_wrapper .for_sp {
		display: none;
	}
	.v_switcher_wrapper .for_pc {
		display: block;
	}
}



/* ----------------------------------------
	slider
---------------------------------------- */

.v_switcher .slider_for {
	display: none;
}
.v_switcher .slider_for.slick-initialized {
	display: block;
}
.v_switcher .slider_for .item img {
	height: auto;
}
.v_switcher .text_area {
	margin-top: 20px;
}
.v_switcher .slider_navi .item {
	user-select: text;
}
.v_switcher .slider_navi .item h3 {
	font-size: 18px;
	line-height: 22px;
}

@media screen and (max-width: 1023px) {
	.v_switcher {
		margin-top: 20px;
	}
	.v_switcher .slider_for {
		padding-top: 50px;
	}
	.v_switcher .slider_navi {
		display: none;
	}
	.v_switcher .slider_navi.slick-initialized {
		display: block;
	}
	.v_switcher .slider_navi .item .text {
		margin-top: 10px;
	}
}

@media screen and (min-width: 1024px) {
	.v_switcher {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.v_switcher .img_area {
		width: 57.95%;
	}
	.v_switcher .text_area {
		width: calc(100% - (57.95% + 30px));
		margin-top: 0;
	}
	.v_switcher .slider_navi {
		margin-top: 30px;
	}
	.v_switcher .slider_navi .slick-list {
		overflow: visible;
		padding: 0 !important;
	}
	.v_switcher .slider_navi .slick-track {
		transform: none !important;
		width: 100% !important;
	}
	.v_switcher .slider_navi .item {
		width: 100% !important;
		padding-bottom: 15px;
		border-bottom: 1px solid #000;
	}
	.v_switcher .slider_navi .item:nth-of-type(n+2) {
		margin-top: 15px;
	}
	.v_switcher .slider_navi .item .text {
		overflow: hidden;
		opacity: 0;
		transform: translateY(5px);
		transition: transform .5s ease-in-out, opacity .5s ease-in-out;
		height: 0;
	}
	.v_switcher .slider_navi .item.slick-current .text {
		overflow: visible;
		opacity: 1;
		transform: translateY(0);
		height: auto;
		margin-top: 10px;
	}

	/* h3 -------------------- */
	.v_switcher .slider_navi h3 {
		color: #959595;
		cursor: pointer;
	}
	.v_switcher .slider_navi h3:hover,
	.v_switcher .slider_navi .slick-current h3 {
		color: #000;
	}
	.v_switcher .slider_navi h3::after {
		display: inline-block;
		vertical-align: middle;
		content: "";
		width: 12px;
		height: 6px;
		margin-left: 10px;
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="m455.465 769.707-1.847-.974 3.478-5.054-3.475-4.989 1.841-.983 4.156 5.966z" transform="rotate(90 611.663 158.045)" fill="%23959595"></path></svg>');
	}
	.v_switcher .slider_navi h3:hover::after,
	.v_switcher .slider_navi .slick-current h3::after {
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="m455.465 769.707-1.847-.974 3.478-5.054-3.475-4.989 1.841-.983 4.156 5.966z" transform="rotate(90 611.663 158.045)" fill="%23000"></path></svg>');
	}
	.v_switcher .slider_navi .slick-current h3::after {
		transform: rotate(180deg);
	}
}


/* arrow -------------------- */

.v_switcher .slick-prev,
.v_switcher .slick-next {
	transform: none;
	transition: .2s;
	top: -7px;
	width: 44px;
	height: 44px;
}
.v_switcher .slick-prev {
	right: 44px;
	left: auto;
}
.v_switcher .slick-next {
	right: -7px;
}
.v_switcher .slick-prev::before,
.v_switcher .slick-next::before {
	display: inline-block;
	content: url(/content/dam/jp-ext-hp-com/jp/ja/ec/common/images/arrow/square.svg);
	width: 30px;
	height: 30px;
}
.v_switcher .slick-prev::before {
	transform: rotate(180deg);
}
.v_switcher .slick-prev:hover::before,
.v_switcher .slick-next:hover::before {
	content: url(/content/dam/jp-ext-hp-com/jp/ja/ec/common/images/arrow/square_hover.svg);
}


/* dots -------------------- */

.v_switcher .slider_navi .slick-dots {
	left: 0;
}
.v_switcher .slider_navi .slick-dots li {
	width: 17px;
	height: 17px;
	margin: 0;
}
.v_switcher .slider_navi .slick-dots li button {
	width: 17px;
	height: 17px;
}
.v_switcher .slider_navi .slick-dots li button::before {
	width: 5px;
	height: 5px;
	background: #c7c7c7;
	opacity: 1;
}
.v_switcher .slider_navi .slick-dots li.slick-active,
.v_switcher .slider_navi .slick-dots li.slick-active button {
	width: 68px;
}
.v_switcher .slider_navi .slick-dots li button:hover::before,
.v_switcher .slider_navi .slick-dots li button:focus::before,
.v_switcher .slider_navi .slick-dots li.slick-active button::before {
	background: #000;
}
.v_switcher .slider_navi .slick-dots li.slick-active button::before {
	width: 56px;
	border-radius: 2.5px;
}


#expand_potential {
	background: #e5f4fb;
}


/*---------------------------- 

dropdown

------------------------------- */
.dropdown {
    position: relative;
    transition: .2s;
    margin: 20px 0 5px;
    padding: .5em 34px .5em 16px;
    background: #000;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-block;
}
.dropdown::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	width: 12px;
	height: 6px;
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path fill="%23ffffff" d="m455.465 769.707-1.847-.974 3.478-5.054-3.475-4.989 1.841-.983 4.156 5.966z" transform="rotate(90 611.663 158.045)"></path></svg>');
}
.dropdown > span {
	color: #fff;
	font-size: 16px;
	line-height: 1.2;
}
.dropdown_menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 4px;
	padding: 10px 0;
	white-space: nowrap;
	background: #fff;
	box-shadow: 0 4px 6px 0 rgba(0,0,0,.2);
}
.dropdown_menu > li a {
	display: block;
	transition: .2s;
	padding: .6em 18px;
	color: #000;
	line-height: 1.2;
}
.dropdown_menu > li a:hover {
	text-decoration: none !important;
	background: #e6e6e6;
}

/* hover, open */
.dropdown:hover,
.dropdown.open {
	background: #5a5a5a;
}
.dropdown.open::after {
	transform: translateY(-50%) rotate(180deg);
}