@charset "utf-8";

.official_accessories{ position:relative; width:100%; text-align:center; padding-bottom: 80px; }
.official_accessories .main_visual { box-shadow: 0 0 30px #e2e2e2; }
.official_accessories .main_visual h1{ margin:0 auto; }
.official_accessories section { padding:60px 0 }
.official_accessories p{ font-size:20px; font-weight:500; line-height: 2;}
.official_accessories h2 { font-size:42px; font-weight:400; margin:0 auto 1em;}

.pc_img{max-width:960px; margin:0 auto;}
.sp_img{max-width:800px; margin:0 auto;}

.mt--2em{margin-top: 2em !important;}
.text--center{text-align:center;}
@media screen and (max-width: 640px) {
	.official_accessories{ padding-bottom: 40px; }
	.official_accessories .main_visual { box-shadow: 0 0 30px #eee; }
	.official_accessories .main_visual h1 img{ width:100%; }
	.official_accessories section { padding:40px 0 }
	.official_accessories h2 { font-size:32px; font-weight: 600; width:94%; line-height:1.5em; }
	.official_accessories h2 span{ display: inline-block; }
	.official_accessories p{ text-align: left; width:94%; margin:auto; line-height: 1.6; }
}


@media screen and (min-width: 641px) {
	.forSP {display: none !important;}
}

@media screen and (max-width: 640px) {
	.forPC {display: none !important;}
	.forSP {
		width: 100%;
		display: block !important;
	}
}



/* --SlickSlider --*/
/*both*/
.color_variation{max-width: 600px; margin: 0 auto;}
.color_img { position:relative; }
.color_img img { width:100%; position: absolute; left:0; top:0; }
.color_img img:nth-child(n+2){ opacity: 0; left:100%; }

/*slide*/
.slider li{ text-align: center; }
.slider .color_img { width:480px; aspect-ratio:1 / 1; display:inline-block; }

/*thumnail*/
.thumbnail { margin:20px auto 0; width: calc(92px * 5);}
.thumbnail li{ margin:5px; }
.thumbnail .slick-track { transform: unset !important;/*サムネイル固定*/ }
.thumbnail .color_img { width:80px; aspect-ratio:1 / 1; border: 1px solid #bbb; }
.thumbnail li.slick-current .color_img {opacity: 1;}
.thumbnail li:not(.slick-current) .color_img { cursor: pointer; opacity:0.65; }
.thumbnail img { image-rendering: auto; }

/*prev/next*/
.slick-prev, .slick-next { width:40px; height:40px; z-index: 1000; }
.slick-prev { left:calc(50% - 300px); }
.slick-next { right:calc(50% - 300px); }
.slick-prev::before, .slick-next::before { content:""; display: block; width:25px; height:25px; border-top:2px solid #ccc;}
.slick-prev::before{ border-left:2px solid #ccc; transform: translateX(10px) rotate(-45deg)}
.slick-next::before { border-right:2px solid #ccc; transform: rotate(45deg); }

@media screen and (max-width: 640px) {
	.slider .color_img{ width:100%; max-width:480px; }
	.thumbnail { width: 96%; max-width: calc((82px + 6px) * 5);  }
	.thumbnail li{ margin:3px; }
	.thumbnail .color_img{ width:100%; box-sizing: border-box; }
	.slick-prev, .slick-next { display:none !important; }
}



.color_btn { margin-top:30px; display:flex; justify-content: center;}
.color_btn li { margin:0 15px; cursor: pointer;}
.color_btn li::before { content:""; display:inline-block; width:28px; height:28px; border-radius:50%; vertical-align: bottom; margin-right: 5px; box-sizing: border-box; transition: 0.4s box-shadow; }
.color_btn li.active::before{ box-shadow: #ffffff 0px 0px 0px 2px, #ccc 0px 0px 0px 3px; }
@media screen and (max-width: 640px) {
	.color_btn li{ -webkit-tap-highlight-color:rgba(0,0,0,0); }
	.color_btn li::before { display:block; margin:0 auto 5px; }
}

/*----------------------------------------*/
/* カラーボタンの色指定*/
/*----------------------------------------*/
/*（背景との境界が不明瞭な場合：border: 1px solid #ddd;）*/

.color_btn li.white::before { background-color: #dad4cd;}
.color_btn li.blue::before { background-color: #88b0be;}
.color_btn li.black::before { background-color: #100f12;}
.color_btn li.green::before { background-color: #4c5b49;}


/*----------------------------------------*/
/* 内側裏地画像のレイアウト*/
/*----------------------------------------*/
@media screen and (min-width: 641px) {
	.case_inside {
		max-width:960px;
		margin:40px auto 0;
	}
	.case_inside::after {
		content:"";
		display:block;
		clear:both;
	}
	.case_inside > div{
		background-color: #E8ECDE;
	}
	.case_inside > div:nth-child(1){
		float:left;
		width:620px;
		padding:30px 0;
	}
	.case_inside > div:nth-child(1) img{
		height:500px;
		width:auto;
	}
	.case_inside > div:nth-child(2){
		float:right;
		width:320px;
		padding:0;
	}
	.case_inside > div:nth-child(2) img{
		height:560px;
	}
}
@media screen and (max-width: 640px) {
	.case_inside > div:nth-child(1) img {
		width: 55%;
		max-width: 250px;
		margin-top: 20px;
	}

	.case_inside > div:nth-child(2) img {
		background-color: #F2F2F2;
		max-width: 100%;
		max-height: 400px;
		margin-top: 40px;
	}
}
.other .feature {
	max-width:750px;
	margin:0 auto;	
}
.other .feature li{
	text-align: left;
	margin-top:2em;
	font-size:22px;
	font-weight:500;
	padding-left: 1.5em;
	position: relative;
	line-height: 1.5em;
}
.other .feature li::before{
	content:"";
	position:absolute;
	width:1em;
	height:1em;
	top:0.3em;
	left:0;
	background-color: #dad4cd;
	border-radius:50%;
}
@media screen and (max-width: 640px) {
	.other .feature {
		width:94%;
		font-size:18px;
	}
}

/* --- スペック表 ------------------------------*/
.tbl_spec {
	border-collapse: collapse;
	border-spacing: 0;
	margin: auto;
	border-top: 1px solid #ccc;
	font-size: 18px;
	line-height: 1.6em;
}
.tbl_spec tr {
	border-bottom:1px solid #ccc;
}
.tbl_spec th {
	padding:1em 2em;
	white-space: nowrap;
}
.tbl_spec td {
	text-align: left;
	padding:1em 2em;
}
@media screen and (max-width: 640px) {
	.tbl_spec {
		width:94%;
		font-size:15px;
	}
	.tbl_spec th {
		padding:1em 0.5em;
		width:6em
	}
	.tbl_spec td {
		padding:1em 0.5em;
	}
}

/* --- 商標等注釈 ------------------------ */
.annotation ul {
	max-width: 960px;
	margin: 0 auto;
}

.annotation li {
	text-align: left;
	text-indent: -1em;
	padding-left: 1em;
}

@media screen and (max-width: 640px) {
	.annotation ul {
		width: 94%;
	}
}

/* --- リンクエリア ------------------------ */
.link li {
	margin-top: 20px;
	display: inline;
}
.link li a {
	display:inline-block;
	width:460px;
	box-sizing: border-box;
	text-decoration: none;
	padding:30px 0;
	position: relative;
	transition: 0.4s opacity;
}
.link li a::after {
	content:"";
	position: absolute;
	width:10px;
	height:10px;
	border-top:2px solid;
	border-right:2px solid;
	transform:rotate(45deg) translateY(-50%);
	top:50%;
	right:25px
}
.link .link_shop a{
	padding:30px 0;
	background-color: #0858a3;
	background-color: #777;
	color:#fff;
}
.link .link_product a{
	border:3px solid;
	color:#0858a3;
	color:#666;
	font-weight:500;
}
@media screen and (min-width: 641px) {
	.link li a:hover {
		opacity: 0.7;
	}
}
@media screen and (max-width: 640px) {


	.link .link_product {
		display: flex;
		justify-content: center;
	}

	.link .link_shop {
		display: flex;
		justify-content: center;
	}

	.link li a {
		width:94%;
		max-width:460px;
	}
}



.back_to_top {
	box-sizing: content-box !important;
	font-size: 0.714rem;
	text-transform: none;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	display: none;
	background: #b42222;
	width: 40px;
	padding: 10px;
	cursor: pointer;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 20;
}