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

#visid p + p {
	margin-top: 1em;
}
@media screen and (max-width: 1023px) {
	.visid img{
		height: auto;
	}
}
.gry_color {
	background-color: #e7e7e7;
}
sup.small {
    vertical-align: super;
    font-size: 11px;
    font-weight: normal;
}
p > sup.small, 
li > sup.small {
    vertical-align: inherit;
    font-size: 10px;
    font-weight: normal;
}


/* ==================================================
	color
================================================== */

:root {
	--color100: #231f20;
	--color90: #393536;
	--color80: #4f4c4d;
	--color70: #656262;
	--color60: #7b7979;
	--color50: #918f8f;
	--color40: #a7a5a6;
	--color30: #bdbbbc;
	--color20: #d3d2d2;
	--color10: #e9e8e8;
	--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; }
.bg_gray { background-color: var(--color_gray) !important; }

.btn__box {
	display: flex;
	flex-flow: wrap;
	margin: 1em -1rem 0;
}
.btn__box > li {
	margin: .5rem 1rem;
}



/* ----------------------------------------
	main
---------------------------------------- */
.main {
	position: relative;
}
.main .text_area {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	color: #fff;
	background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 50%);
}
.main .title,
.main .subtitle {
	padding: 15px 20px;
}
/*
.main .subtitle {
	border-top: 1px solid #fff;
}*/
.main .img_area {
	max-width: 1920px;
	margin: 0 auto;
	width: 100%;
}
.main .img_area img {
	object-fit: cover;
	width: 100%;
	height: auto;
	min-height: 450px;
}

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

/* ----------------------------------------
	dj_merit
---------------------------------------- */

.dj_merit_title {
	background: var(--color100);
	color: #fff;
}



/* ----------------------------------------
	ink
---------------------------------------- */

#contents_ink {
	background: var(--color10);
}



/* ----------------------------------------
	モデル一覧
---------------------------------------- */

.model_flag {
	background: var(--color100);
}



/* ----------------------------------------
	ご購入に関する注意
---------------------------------------- */

.read_before_purchase .acco_content {
	background: var(--color10);
}


@media screen and (min-width: 768px) {
	.imgTextBox_list > li {
		flex-wrap: wrap;
	}
}


/* ==================================================
                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;
	background: rgba(0, 0, 0, .4);
}

.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);
}
.visid .slick-prev:hover::before,
.visid .slick-next:hover::before {
	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;
}



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

	smart_solution__boxs

----------------------------------------- */
.smart_solution__boxs {
	margin-top: 2rem;
}
.smart_solution__boxs > li {
	border: 1px #666 solid;
}

.smart_solution__boxs .txt__box {
	border-radius: .8rem;
}
.smart_solution__boxs .txt__box .txt__q,
.smart_solution__boxs .txt__box .txt__a {
	padding: 2rem 1.6rem;
}
.smart_solution__boxs .txt__box .txt__q {
	background: #ccc;
}



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

	project__area

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

.project__area .h_switcher .text_area {
	padding: 0 20px 30px;
}
.project__area .h_switcher .text_area h2 + p {
	margin-top: 20px;
}
.project__area .h_switcher * + .button,
.project__area .h_switcher * + [class*="c-button"] {
	margin-top: 20px;
}

@media screen and (min-width: 1280px) {
	.project__area .h_switcher {
		display: flex;
		justify-content: space-between;
	}
	.project__area .h_switcher .text_area {
		width: calc(100% - (906px + 25px));
		padding: 0;
	}
	.project__area .h_switcher .slider_area {
		width: 906px;
	}
}



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

.project__area .h_switcher .slider_for,
.project__area .h_switcher .slider_navi {
	display: none;
}
.project__area .h_switcher .slider_for.slick-initialized,
.project__area .h_switcher .slider_navi.slick-initialized {
	display: block;
}
.project__area .h_switcher .slider_for .item img {
	object-fit: cover;
	height: 45vw;
	min-height: 165px;
	max-height: 325px;
}
.project__area .h_switcher .slider_navi .item {
	position: relative;
	padding: 20px 20px 40px;
	transition: .2s;
	cursor: pointer;
	background: #231f20;
	color: #fff;
}
.project__area .h_switcher .slider_navi .item:hover,
.project__area .h_switcher .slider_navi .item.slick-current {
	background: #656262; /* .itemの色の50% */
}
.project__area .h_switcher .slider_navi .item .text {
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s ease;
	margin-top: 12px;
}
.project__area .h_switcher .slider_navi .item.slick-current .text {
	visibility: visible;
	opacity: 1;
	transition: opacity .2s ease;
	transition-delay: .3s;
}
.project__area .h_switcher .slider_navi .open {
	display: block;
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 18px;
	height: 18px;
}
.project__area .h_switcher .slider_navi .open::before,
.project__area .h_switcher .slider_navi .open::after {
	display: block;
	content: "";
	position: absolute;
	width: 18px;
	height: 2px;
	background: #fff;
}
.project__area .h_switcher .slider_navi .open::after {
	transform: rotate(90deg);
}
.project__area .h_switcher .slider_navi .slick-current .open {
	display: none;
}

@media screen and (min-width: 425px) {
	.project__area .h_switcher .slider_navi .slick-list {
		padding-right: 10%;
	}
	.project__area .h_switcher .slider_navi .item::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 1px;
		height: 100%;
		background: #fff;
	}
}

@media screen and (min-width: 768px) {
	.project__area .h_switcher .slider_navi .slick-list {
		padding-right: 0;
	}
	.project__area .h_switcher .slider_navi .slick-track {
		transform: none !important;
	}
	.project__area .h_switcher .slider_navi .item {
		width: calc((100% - 336px) / 2) !important; /* .itemが3つの時は2、.itemが4つの時は3で割る */
	}
	.project__area .h_switcher .slider_navi .item.slick-current {
		width: 336px !important;
	}
	.project__area .h_switcher .slider_navi .item:last-child::after {
		content: none;
	}
	.project__area .h_switcher .slick-dotted.slick-slider {
		margin-bottom: 0;
	}
}


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

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



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

	detail_pinup

------------------------------------------------ */
.detail_pinup {
	padding : 6rem 0 4rem;
}
.detail_pinup .slider {
	display: none;
}
.detail_pinup .slider.slick-initialized {
	display: block;
}
/*------------------------------- */

.detail_pinup .slider .slick-slide {
	margin: 0 1rem;
}


/*--------------------------------------------------------- */
.visid .detail_pinup .slick-prev, 
.visid .detail_pinup .slick-next {
	border-radius: 0;
	background: none;
	top: -50px;
}
.visid .detail_pinup .visid_slider .slick-prev {
	left: calc(100% - 90px);
}

.visid .detail_pinup .visid_slider .slick-prev::before, 
.visid .detail_pinup .visid_slider .slick-next::before {
	background: none;
}
.visid .detail_pinup .visid_slider .slick-next::before {
	transform: rotate(360deg);
}
/*------------------------------------------------ detail_pinup */
.detail_pinup .img__box {
	text-align: center;
	margin-bottom: 2rem;
}




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

family_introduction swiper

==================================================== */
.family_introduction .swiper {
	overflow: visible;
	position: relative;
	padding: 47px 20px 40px;
}
.family_introduction .swiper-slide {
	width: 300px;
	margin-right: 20px;
}
.family_introduction .swiper-slide:last-child {
	margin-right: 0;
}

@media screen and (min-width: 768px) {
	.family_introduction .swiper {
		padding-right: 30px;
		padding-left: 30px;
	}
	.family_introduction .swiper-slide {
		width: 429px;
		margin-right: 30px;
	}
}

@media screen and (min-width: 1280px) {
	.family_introduction .swiper {
		padding: 47px 0 0;
	}
	.family_introduction .swiper-slide {
		width: 490px;
	}
}


/* controller -------------------- */

.family_introduction .swiper-controller {
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
}
.family_introduction .swiper-button-prev,
.family_introduction .swiper-button-next {
	position: relative;
	cursor: pointer;
	transition: .2s;
	width: 30px;
	height: 30px;
	margin-right: 20px;
}
.family_introduction .swiper-button-prev:hover,
.family_introduction .swiper-button-next:hover {
	background: #000;
}
.family_introduction .swiper-button-prev::before,
.family_introduction .swiper-button-next::before {
	content: "";
	position: absolute;
	top: -7px;
	left: -7px;
	transition: .2s;
	width: 44px;
	height: 44px;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M0,0v30h30V0H0ZM29,29H1V1h28v28Z"/><polygon points="16.09 20.11 16.8 20.82 22.6 15.02 16.75 9.18 16.05 9.89 20.69 14.53 8.03 14.53 8.03 15.53 20.67 15.53 16.09 20.11"/></svg>');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 30px 30px;
}
.family_introduction .swiper-button-prev:hover::before,
.family_introduction .swiper-button-next:hover::before {
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><polygon points="16.09 20.11 16.8 20.82 22.6 15.02 16.75 9.18 16.05 9.89 20.69 14.53 8.03 14.53 8.03 15.53 20.67 15.53 16.09 20.11"/></svg>');
	filter: invert(1);
}
.family_introduction .swiper-button-prev::before,
.family_introduction .swiper-button-prev:hover::before {
	transform: rotate(180deg);
}
.family_introduction .swiper-button-disabled {
	opacity: .3;
	pointer-events: none;
}

@media screen and (min-width: 768px) {
	.family_introduction .swiper-controller {
		right: 10px;
	}
}

@media screen and (min-width: 1280px) {
	.family_introduction .swiper-controller {
		right: -20px;
	}
}


/* pagination -------------------- */

.family_introduction .swiper-pagination {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	line-height: 1;
}
.family_introduction .swiper-pagination-bullet {
	display: inline-block;
	cursor: pointer;
	width: 9px;
	height: 9px;
	margin: 0 4px;
	background-color: rgba(0,0,0,.2);
	background-clip: padding-box;
	border: 2px solid transparent;
	border-radius: 20px;
}
.family_introduction .swiper-pagination-bullet-active {
	width: 60px;
	background-color: #000;
}

@media screen and (min-width: 1280px) {
	.family_introduction .swiper-pagination {
		display: none;
	}
}


/* スライダー非活性時 -------------------- */

.family_introduction .swiper:not(.swiper-initialized) .swiper-controller {
	display: none;
}
.family_introduction .swiper:not(.swiper-initialized) .swiper-wrapper {
	margin: 0;
}



/*----------------------------------------- family_model__box */

.family_model__box {
	text-align: center;
}
.family_model__box .img__box {
	margin-bottom: 2rem;
}
.family_model__box .btn__box {
	margin: .5rem -1rem 0;
	justify-content: center;
}
.family_model__box .spac__box {
	/*background: var(--color10);*/
    text-align: left;
    margin-top: 1rem;
}

.family_model__box .spac__box > li {
	border-top: 1px var(--color40) solid;
	padding: 4rem 2rem .8em;
    position: relative;
}
.family_model__box .spac__box > li::after {
	position: absolute;
	top: .8em;
	left: 2rem;
	font-size: 13px;
}
.family_model__box .spac__box > li.sp_size::after {
	content: "\30B5\30A4\30BA";
}
.family_model__box .spac__box > li.sp_speed::after {
	content: "1\6642\9593\3042\305F\308A\306E\5370\5237\901F\5EA6";
}
.family_model__box .spac__box > li.sp_input_tray::after {
	content: "A3\7D66\7D19\30C8\30EC\30A4\306E\5BB9\91CF";
}
.family_model__box .spac__box > li.sp_sheet_organizer::after {
	content: "\30B7\30FC\30C8\30AA\30FC\30AC\30CA\30A4\30B6\30FC";
}
.family_model__box .spac__box > li.sp_sheet_organizer_sracker::after {
	content: "\30B7\30FC\30C8\30AA\30FC\30AC\30CA\30A4\30B6\30FC\FF06\30B9\30BF\30C3\30AB\30FC";
}
.family_model__box .spac__box > li.sp_scanner::after {
	content: "\30B9\30AD\30E3\30CA\30FC";
}

@media screen and (min-width: 768px) {
	.family_model__box .spac__box > li {
		border-top: 1px var(--color40) solid;
		padding: .8em 1em .8em 15em;
	    position: relative;
	}
	.family_model__box .spac__box > li::after {
		position: absolute;
		top: 50%;
		left: .5rem;
	    transform: translateY(-50%);
		font-size: 13px;
	}
}



.family_model__box .spac__box > li sup {
	font-size: 12px;
}



/* ==================================================
	docs
================================================== */

@media screen and (max-width: 767px) {
	.docs .text_area {
		margin-top: 20px;
	}
}

@media screen and (min-width: 768px) {
	.docs {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.docs .img_area {
		width: 170px;
	}
	.docs .text_area {
		width: calc(100% - (170px + 40px));
	}
}
/*-----------------------------------*/






/* ==================================================
	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;
	}
}