@charset "UTF-8";

/* --- 共通 -------------------------------------*/
.container {
	text-align: center;
}
.official_accessories{
	padding-bottom: 80px;
	padding-top: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;	
}

@media screen and (max-width: 640px) {
	.official_accessories{
		padding-bottom: 40px;
		padding-top:60px;
	}
	.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%;
	}
	.official_accessories h2 span{
		display: inline-block;
	}
	.official_accessories  p{
		text-align: left;
		width:94%;
		margin:auto;
		line-height: 1.6;
	}
}
/* --- カラバリ --------------------------------*/

/* --SlickSlider --*/
/*both*/
.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;
	/*height:480px;*/
	aspect-ratio:1 / 1;
	display:inline-block;
}
/*thumnail*/
.thumbnail {
	margin:20px auto 0;
}
.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 {

}
.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 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;
	}
}


/* --- スペック表 ------------------------------*/
.tbl_spec {
	margin:auto;
	border-top:1px solid #ccc;
	font-size:18px;
}
.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;
}
.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 li a {
		width:94%;
		max-width:460px;
	}
}

/*--- 注釈 ----------------------------------------*/
ul.notes {
	max-width: 960px;
	margin-right:auto;
	margin-left:auto;
	margin-top:0;
}
ul.notes li{
	margin-top: 0.5em;
	font-size: 13px;
	line-height: 1.5;
	text-align:left;
}
ul.notes.em_num li {
	padding-left: 1.8em !important;
	text-indent: -1.8em !important;
}
ul.notes.em_space li {
	padding-left: 1.2em !important;
	text-indent: -1.2em !important;
}
@media (max-width: 640px) {
	ul.notes {
		width: 94%;
		margin-left: auto;
		margin-right: auto;
	}
	ul.notes li{
		font-size: 12px;
	}
}

/* ---------------  snsArea  --------------- */

.containerFooter .snsArea {
	background-color: #f2f2f2;
	padding:30px 0;
	display:flex;
	justify-content: center;
	align-items: center;	
}
.containerFooter .snsBanner {
	position: relative;
	margin-bottom:0;
	text-align: center;
	width: auto;
}
.containerFooter .snsBanner ul {
	margin:0 auto;
	padding:0 10px;
}
.containerFooter .snsBanner li {
	display:inline-block;
	vertical-align:bottom;
	text-align:left;
	margin-right: 5px;
	position:relative;
}
.containerFooter .snsBanner li:last-child {
	margin-right: 0;
}
.containerFooter .snsBanner li a {
	box-sizing: border-box;
	display:block;
	height:46px;
	font-size:0.8125rem;
	text-decoration:none;
	border-radius:3px;
	line-height:16px;
	font-weight: 600;
	background-color: #fff !important;
	width:300px;
	border:1px solid
}
.containerFooter .snsBanner li a:hover {
	opacity:0.7;
}
.containerFooter .snsBanner li.ml a {
	color:#c59042;
	padding:6px 0px 6px 42px;
	background:#F5F5F5 url(/common_v3/images/icon_bnr_mail.png) no-repeat 10px 50%;
	background-size:24px;
}
.containerFooter .snsBanner li.ml a span {
	line-height: 32px;
}
.containerFooter .snsBanner li.shshow a {
	color:#3B3BCE;
	padding:6px 0px 6px 45px;
	background:#F5F5F5 url("/k-tai/common_v3/images/icon_bnr_shshow.png") no-repeat 5px 50%;
	background-size:36px;
}
.containerFooter .snsLinkIcon {
	display:flex;
	justify-content: center;
	margin-left: 30px;
}
.containerFooter .snsLinkIcon a {
	margin:0 6px;
	transition: 0.3s;
}

@media screen and (max-width: 640px) {
	.containerFooter .snsArea {
		display:block;
		padding:0 0 15px;
	}
	.containerFooter .snsBanner {
		position: static;
		width:100%;
		background-color:#f2f2f2;
		margin-bottom:0;
		padding:15px 0;
	}
	.containerFooter .snsBanner ul {
		width:300px;
	}
	.containerFooter .snsBanner ul li {
		display:block;
		margin-right:0;	
	}
	.containerFooter .snsBanner li a {
		display:block;
		margin:5px auto;
		width:100%;
	}
	.containerFooter .snsBanner li.ml a {
		padding-left:45px;
		background-color:#FFF;
		background-size:28px;
		background-position:9px 50%;
		line-height:32px;
	}
	.containerFooter .snsBanner li.shshow a {
		padding-left:45px;
		background-color:#FFF;
	}
	.containerFooter .snsLinkIcon {
		margin-left: 0;
	}
}