

/* ==================================================
	slick
================================================== */

/* ----------------------------------------
	arrow
---------------------------------------- */

.visid .slick-prev,
.visid .slick-next {
	transform: none;
	transition: .2s;
	width: 44px;
	height: 44px;
}
.visid .slick-prev::before,
.visid .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;
	opacity: 1;
}
.visid .slick-prev::before {
	transform: rotate(180deg);
}
.visid .slick-prev:hover::before,
.visid .slick-next:hover::before {
	content: url(/content/dam/jp-ext-hp-com/jp/ja/ec/common/images/arrow/square_hover.svg);
}


/* v_arrow_white -------------------- */

.v_arrow_white .slick-prev::before,
.v_arrow_white .slick-next::before {
	content: url(/content/dam/jp-ext-hp-com/jp/ja/ec/common/images/arrow/square_white.svg);
	position: relative;
	z-index: 1;
}
.v_arrow_white .slick-prev:hover::before,
.v_arrow_white .slick-next:hover::before {
	content: url(/content/dam/jp-ext-hp-com/jp/ja/ec/common/images/arrow/square_white.svg);
}
.v_arrow_white .slick-prev::after,
.v_arrow_white .slick-next::after {
	display: inline-block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: .2s;
	width: 30px;
	height: 30px;
	background: rgba(0,0,0,.4);
}
.visid .slick-prev:hover::after,
.visid .slick-next:hover::after {
	background: rgba(0,0,0,.6);
}



/* ----------------------------------------
	dots
---------------------------------------- */

.visid .slick-dots {
	left: 0;
}
.visid .slick-dots li {
	margin: 0;
}
.visid .slick-dots li.slick-active,
.visid .slick-dots li.slick-active button {
	width: 76px;
}
.visid .slick-dots li button::before {
	width: 5px;
	height: 5px;
	background: #c7c7c7;
	opacity: 1;
}
.visid .slick-dots li button:hover::before,
.visid .slick-dots li button:focus::before,
.visid .slick-dots li.slick-active button::before {
	background: #000;
}
.visid .slick-dots li.slick-active button::before {
	width: 56px;
	border-radius: 2.5px;
}




/*============================ 
	main
============================ */
.main .heading,
.main .sub_heading {
	color: #fff;
	padding: 25px 20px;
}
.main .heading,
.main .sub_heading {
	background: #212248;
	border-bottom: 1px #fff solid;
}

.main .copy {
	padding: 2rem 1.6rem;
}
@media screen and (min-width: 768px) {
	.main .heading,
	.main .sub_heading {
		padding-right: 30px;
		padding-left: 30px;
	}
	.main .copy {
		padding: 60px 20px
	}
}

/*------------------------------------- movie */
.main .movie {
	position: relative;
}
.main .movie .img_area img {
	aspect-ratio: 16 / 5;
	object-fit: cover;
	object-position: top;
	width: 100%;
	height: auto;
	min-height: 350px;
}
.main .movie .text_area {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: calc(100% - 40px);
	color: #fff;
	text-align: center;
}

@media screen and (min-width: 1024px) {
	.main .movie .img_area img {
		min-height: 550px;
	}
}

/*-------------------------------------------------------
	point__area
--------------------------------------------------------- */
.point__area .heading,
.point__area .sub_heading {
	color: #fff;
	padding: 25px 20px;
}
.point__area .heading {
	background: #212248;
}
.point__area .sub_heading {
	background: #7e8af8;
}
.point__area .copy {
	padding: 2rem 1.6rem;
}
@media screen and (min-width: 768px) {
	.point__area .heading,
	.point__area.sub_heading {
		padding-right: 30px;
		padding-left: 30px;
	}
	.point__area .copy {
		padding: 60px 20px
	}
}

/*------------------------------------------ point_list */
.point__area .point_list > li h3,
.point__area .point_list > li p{
	padding: 1rem;
}
.point__area .point_list > li h3{
	border-bottom: 1px #000 solid;
}




/*------------------------------------------
 
	md_point_detail

------------------------------------------- */

#md_point_detail .modal_content_inner{
	padding: 20px 10px;
}

.point_detail.slider > div h4{
	border-bottom:1px #000 solid;
}
.point_detail.slider > div h4,
.point_detail.slider > div p,
.point_detail.slider > div .list_basic{
	padding: .8em;
}

@media screen and (max-width: 1023px) {
	.point_detail.slider{
		margin-top: 4rem;
	}
	.point_detail.slider .slick-prev, 
	.point_detail.slider .slick-next{
		top: -2.3rem;
	}
	.point_detail.slider .slick-prev{
		left: calc(100% - 80px);
	}
	.point_detail.slider .slick-next{
		right: 0;
	}
}
@media screen and (max-width: 1023px) and (min-width: 768px){
	#md_point_detail .section_content.mw1220 {
		width: 700px;
	}
	.point_detail.slider > div{
		margin: 0 15px;
	}
	.point_detail.slider .slick-prev, 
	.point_detail.slider .slick-next{
		top: -1rem;
	}
	.point_detail.slider .slick-next{
		right: 1rem;
	}
	.point_detail.slider .slick-prev{
		left: calc(100% - 90px);
	}
}
@media screen and (min-width: 1024px) {
	#md_point_detail .modal_content_inner{
		padding: 30px;
	}
	.point_detail.slider{
		display: flex;
		margin: 0 -10px;
	}
	.point_detail.slider > div{
		margin: 0 10px;
		width: calc((100% - 60px ) / 3);
	}
}








/*---------------------------------------------- 

digital_printing_solutions__area

---------------------------------------------- */
.digital_printing_solutions__area .copy {
	background: #e6e6e6;
}
.digital_printing_solutions__area.color__boxs.color_purple .sub_heading {
	background: #b655f5;
}

.digital_printing_solutions_slider_nav{
	width: 100%;
	padding: 0 3rem;
}
.digital_printing_solutions_slider_nav .nav_item{
	background: #f8eefe;
	padding: .5rem 1rem;
	color: #000;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 56px;
	margin-left: 1px;
	font-size: 14px;
	line-height: 1.2;
}
@media screen and (min-width: 1024px) {
	.digital_printing_solutions_slider_nav{
		padding: 0;
	}
	.digital_printing_solutions_slider_nav .nav_item{
		font-size: 16px;
	}
}

/*--------------------------------------------

digital_printing_solutions_slider_nav digital_printing_solutions_slider_for
slider

--------------------------------------------- */
.digital_printing_solutions_slider_nav,
.digital_printing_solutions_slider_for {
	display: none;
}
.digital_printing_solutions_slider_nav.slick-initialized,
.digital_printing_solutions_slider_for.slick-initialized {
	display: block;
}

/*------------------------------------------------- nav */
.digital_printing_solutions_slider_nav .nav_item.slick-slide.slick-current.slick-active{
	background: #000;
	color: #fff;
}
@media screen and (min-width: 480px) {
	.digital_printing_solutions_slider_nav.slick-initialized.slick-slider .slick-list{
		padding: 0 5% 0 0;
	}
}
@media screen and (min-width: 1024px) {
	.digital_printing_solutions_slider_nav.slick-initialized.slick-slider .slick-list{
		padding: 0 10% 0 0;
	}
}
/*------------------------------------------------- for */
.digital_printing_solutions_slider_for{
	padding-bottom: 4rem;
}
.logo_boxs{
	display: flex;
	flex-wrap: wrap;
}
.logo_boxs > li {
	margin: 1rem;
}
.logo_boxs img{
	max-height: 90px;
	width: auto;
}
@media screen and (min-width: 1024px) {
	.digital_printing_solutions_slider_for .item.slick-slide{
		height: auto;
		max-height: 580px;
	}
	.digital_printing_solutions_slider_for .item.height_auto.slick-slide.slick-current.slick-active{
		max-height: 100%!important;
	}
}
/*-------------------------------------------------  slick-prev / slick-next */
.digital_printing_solutions_slider_nav .slick-prev, 
.digital_printing_solutions_slider_nav .slick-next{
	display: block!important;
}
.digital_printing_solutions_slider_nav .slick-prev, 
.digital_printing_solutions_slider_nav .slick-next{
	top: 15%;
}
.digital_printing_solutions_slider_nav .slick-prev{
	left: -15px;
}
.digital_printing_solutions_slider_nav .slick-next{
	right: -15px;
}
@media screen and (min-width: 1024px) {
	.digital_printing_solutions_slider_nav .slick-prev{
		left: -50px;
	}
	.digital_printing_solutions_slider_nav .slick-next{
		right: -50px;
	}

}



/* ==================================================
	disclaimer
================================================== */

.disclaimer {
	padding: 30px 20px;
	background: #e6e6e6;
}
.disclaimer a {
	color: #000;
	text-decoration: underline;
}
.disclaimer a:hover {
	background: rgba(0,0,0,.1);
}
.disclaimer .inner {
	padding: 20px;
	background: #fff;
	border-radius: 4px;
}
.disclaimer .acco_trigger {
	position: relative;
	padding: 20px 0;
	font-size: 16px;
	line-height: 24px;
}
.disclaimer .acco_trigger::after {
	display: inline-block;
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	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 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>');
}
.disclaimer .acco_trigger.acco_open::after {
	transform: translateY(-50%) rotate(180deg);
}
.disclaimer .acco_content {
	padding-bottom: 20px;
}
.disclaimer .acco_content > * + * {
	margin-top: 20px;
}
.disclaimer .notes_num > li:nth-child(n+2) {
	margin-top: 16px;
}

@media screen and (min-width: 768px) {
	.disclaimer {
		padding-right: 30px;
		padding-left: 30px;
	}
}


/*--------------------------------------------- 

users_success_area

----------------------------------------------- */

.users_success_area .heading {
	padding: 2.5rem 2rem;
	border-bottom: 1px #000 solid;
	margin-bottom: 3rem;
}
.users_success_area .copy{
	padding: 3rem 2rem;
}
/*-------------------------------------------------------
	users_success.point_list point_list
--------------------------------------------------------- */
.users_success.point_list > li h3,
.users_success.point_list > li p{
	padding: 0;
}
.users_success.point_list > li h3 {
	margin-top: 2rem;
}


.users_success.point_list > li h3{
	border-bottom: none;
}
.users_success.point_list > li .linkarrow_btn_box {
	padding-top: 2rem;
}

@media screen and (min-width: 767px) {
	.users_success.point_list > li{
		display: flex;
		flex-direction: column;
	}
	.users_success.point_list > li .linkarrow_btn_box{
		margin-top: auto;
		text-align: left;
	}
}

/*=========================== 
	growing_market__box
============================== */

.growing_market__box {
	display: flex;
	flex-direction: column; /* 画像を上にする場合は column-reverse にしてください */
	background: #e6e6e6;
}
.growing_market__box .title {
	border-bottom: 1px #000 solid;
}
.growing_market__box .title .inner {
	padding: 15px 20px;
}
.growing_market__box .text .inner {
	padding: 30px 20px 50px;
}
.growing_market__box .img_area {
	position: relative;
}
.growing_market__box .img_area img {
	object-fit: cover;
	width: 100%;
	height: auto;
}
@media screen and (min-width: 768px) {
	.growing_market__box .text_area .inner {
		padding-right: 30px;
		padding-left: 30px;
	}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
	.growing_market__box .img_area img {
		height: 400px;
	}
}
@media screen and (min-width: 1280px) {
	.growing_market__box {
		flex-direction: row;
		min-height: 600px;
	}
	.growing_market__box .text_area {
		width: calc(50% - 193px);
	}
	.growing_market__box .text_area .inner {
		max-width: calc(416px + 30px);
		margin-left: auto;
	}
	.growing_market__box .img_area {
		width: calc(50% + 193px);
		
	}
	.growing_market__box .img_area img {
		max-width: 1053px;
		height: 100%;
	}
}

@media screen and (min-width: 1920px) {
	.growing_market__box .text_area {
		width: calc(50% - 93px);
	}
	.growing_market__box .text_area .inner {
		max-width: calc(516px + 30px);
	}
	.growing_market__box .img_area {
		width: calc(50% + 93px);
	}
}
/*------------------------------------------------------ movie_box */
.growing_market__box .img_area .movie_box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}




/*=================================== 
	h_switcher
==================================== */
.h_switcher .text_area {
	padding: 0 20px 30px;
}
.h_switcher .text_area h2 + p {
	margin-top: 20px;
}
.h_switcher * + .button,
.h_switcher * + [class*="c-button"] {
	margin-top: 20px;
}

@media screen and (min-width: 1280px) {
	.h_switcher {
		display: flex;
		justify-content: space-between;
	}
	.h_switcher .text_area {
		width: calc(100% - (906px + 25px));
		padding: 0;
	}
	.h_switcher .slider_area {
		width: 906px;
	}
}



/* ----------------------------------------
	slider
---------------------------------------- */

.h_switcher .slider_for,
.h_switcher .slider_navi {
	display: none;
}
.h_switcher .slider_for.slick-initialized,
.h_switcher .slider_navi.slick-initialized {
	display: block;
}
.h_switcher .slider_for .item img {
	object-fit: cover;
	/*
	height: 45vw;
	min-height: 165px;
	max-height: 325px;
	*/
}
.h_switcher .slider_navi .item {
	position: relative;
	padding: 20px 20px 40px;
	transition: .2s;
	cursor: pointer;
	background: #b655f5;
}
.h_switcher .slider_navi .item:hover,
.h_switcher .slider_navi .item.slick-current {
	background: #daaafa; /* .itemの色の50% */
}
.h_switcher .slider_navi .item .text {
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s ease;
	margin-top: 12px;
}
.h_switcher .slider_navi .item.slick-current .text {
	visibility: visible;
	opacity: 1;
	transition: opacity .2s ease;
	transition-delay: .3s;
}
.h_switcher .slider_navi .open {
	display: block;
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 18px;
	height: 18px;
}
.h_switcher .slider_navi .open::before,
.h_switcher .slider_navi .open::after {
	display: block;
	content: "";
	position: absolute;
	width: 18px;
	height: 2px;
	background: #000;
}
.h_switcher .slider_navi .open::after {
	transform: rotate(90deg);
}
.h_switcher .slider_navi .slick-current .open {
	display: none;
}

@media screen and (min-width: 425px) {
	
	.h_switcher .slider_navi .slick-list {
		padding-right: 10%;
	}
	.h_switcher .slider_navi .item::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 1px;
		height: 100%;
		background: #000;
	}
}
@media screen and (min-width: 768px) {
	.h_switcher .slider_navi .slick-list {
		padding-right: 0;
	}
}
@media screen and (min-width: 1024px) {
	.h_switcher .slider_navi .slick-list {
		padding-right: 0;
	}
	.h_switcher .slider_navi .slick-track {
		transform: none !important;
	}
	.h_switcher .slider_navi .item {
		width: calc((100% - 336px) / 2) !important; /* .itemが3つの時は2、.itemが4つの時は3で割る */
	}
	.h_switcher .slider_navi .item.slick-current {
		width: 336px !important;
	}
	.h_switcher .slider_navi .item:last-child::after {
		content: none;
	}
	.h_switcher .slick-dotted.slick-slider {
		margin-bottom: 0;
	}
}


/* dots -------------------- */

.h_switcher .slider_navi .slick-dots {
	left: 0;
}
.h_switcher .slider_navi .slick-dots li {
	width: 17px;
	height: 17px;
	margin: 0;
}
.h_switcher .slider_navi .slick-dots li button {
	width: 17px;
	height: 17px;
}
.h_switcher .slider_navi .slick-dots li button::before {
	width: 5px;
	height: 5px;
	background: #c7c7c7;
	opacity: 1;
}
.h_switcher .slider_navi .slick-dots li.slick-active,
.h_switcher .slider_navi .slick-dots li.slick-active button {
	width: 68px;
}
.h_switcher .slider_navi .slick-dots li button:hover::before,
.h_switcher .slider_navi .slick-dots li button:focus::before,
.h_switcher .slider_navi .slick-dots li.slick-active button::before {
	background: #000;
}
.h_switcher .slider_navi .slick-dots li.slick-active button::before {
	width: 56px;
	border-radius: 2.5px;
}




/*--------------------------------------------- 

partnered__area

----------------------------------------------- */

.partnered__area .heading {
	padding: 2.5rem 2rem;
	border-bottom: 1px #999 solid;
}
.partnered__area .copy{
	padding: 3rem 2rem;
}
@media screen and (min-width: 1280px) {
	.partnered__area .heading {
		padding: 40px 0;
	}
	.partnered__area .copy{
		padding: 20px 0 30px;
	}
}
