@charset "utf-8";

@media print, screen and (min-width : 769px){
/*------------------------------------------------------------------------------------------
*
*
    /webcatalog/styling/design/
    Responsive / PC
*
*
------------------------------------------------------------------------------------------ */

.color_slider .name .sup{
    top: 0px ;
    vertical-align: top ;
}
/* -----------------------------------
    #section_styling
----------------------------------- */
#section_styling{
	margin-bottom:50px;
}
#section_styling .pic{
    line-height: 0;
}

#section_styling .pic img{
    width: 100%;
    height: auto;
}

/* -----------------------------------
    .section_bodycolor（ノーマル・2tone共通）
----------------------------------- */
.section_bodycolor{
    margin: 55px auto 85px auto;
}
.section_bodycolor .section_inner .head_title{
	margin-bottom:50px;
	margin-top:100px;
}
.section_bodycolor .section_inner .head_title.first{
	margin-bottom:30px;
	margin-top:105px;

}
.section_bodycolor .color_slider{
    margin: 0 0 20px 0;
}

.section_bodycolor .body_color_gallery{
    position: relative;
    text-align: center;
}

.section_bodycolor .body_color_gallery .pic{
    margin: 0 0 0 0;
    padding-top: 10px;
	position:relative;
	left:-70px;
	top:0px;
}
.section_bodycolor .body_color_gallery .pic img{
margin: 30px 113px 10px auto;
width: 636px;
height: auto;
	position:relative;
	left:0px;
	top:0px;
}
.section_bodycolor .body_color_gallery .c_logo{
    margin: 0;
	position:absolute;
	left: 25px;
	top: 120px;
}
.section_bodycolor .body_color_gallery .c_logo img {
	width: 228px;
	height: auto;
}

.section_bodycolor .body_color_gallery .slick-slide{
	position:relative;
}
.section_bodycolor .body_color_gallery.copper .copper_logo{
    margin: 0 0 0 0;
	position:absolute;
	right:90px;
	top:405px;
}
.section_bodycolor .body_color_gallery.copper .copper_logo img{
	width:310px;
}
    .section_bodycolor .body_color_gallery .smartkey_wrap {
        position: absolute;
        top: 215px;
        left: 746px;
        width: 130px;
        font-size: 11px;
        line-height: 15px;
    }

    .section_bodycolor .body_color_gallery .smartkey_wrap img {
        margin: 0 auto;
        width: 122px;
    }
.section_bodycolor .body_color_gallery .name{
    margin: 0 0 10px 0;
    font-size: 22px;
}

.section_bodycolor .body_color_gallery .caption{
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 15px 0;
}

.section_bodycolor .body_color_gallery .type{
    font-size: 14px;
    line-height: 1.571em;
}
.section_bodycolor .body_color_gallery .type.copper{
	font-size:13px;
	text-align:left;
	padding-left:10em;
	text-indent:-7.3em;
}
.section_bodycolor .body_color_gallery .type span{
	font-size:12px;
}

.section_bodycolor .body_color_gallery .caution{
    margin: 5px 0;
    font-size: 11px;
}
.section_bodycolor .bodycolor_pct {
	width: 615px;
	margin: 40px auto 0;
}
.section_bodycolor .bodycolor_pct img {
	width: 100%;
	height: auto;
}
#contents_area .hr.bodycolor_hr{
	margin:0 0 100px 50px;

}
.section_bodycolor .caution_wrap{
  height: 40px;
	margin:30px 0;
}
.section_bodycolor .caution_wrap .caution{
  font-size: 13px;
  line-height: 20px;
  color: #da4058;	
	text-align: center;
  display: none;
}
.section_bodycolor .caution_wrap .caution.disp{
  display: block;
}



/* -----------------------------------
    #section_styling
----------------------------------- */
#section_styling{
    margin: 40px auto 70px auto;
}
#section_styling .section_desc{
	font-size:18px;
	line-height:160%;
	margin-bottom:20px;
}

#section_styling .pic_wide{
	text-align:center;
	position:relative;
	height:500px;
	margin-top:40px;
}
#section_styling .pic_wide img {
	display:block;
	position:absolute;
	left:50%;
	margin-left: -808px;
	/* margin-left:-640px; */
}
.img_slider.col03 .desc {
	font-size: 15px;
	line-height: 1.6;
}
.img_slider.col03 .desc .desc_caption {
	display: block;
	margin: 10px 0 0;
	font-size: 12px;
	text-indent: -1em;
	margin-left: 1em;
}

/* -----------------------------------
    logo
----------------------------------- */
.detail_logo_wrap{
	position:relative;
	margin-bottom:23px;

}
.detail_logo{
	border-left:none;
	height:83px;
	width:93px;
}
	.detail_logo.normal{
		border:solid 1px #777;
		border-left:0;
	}
	.detail_logo.custom{
		border:solid 1px #000;
		background:#000;
	}
	.detail_logo.copper{
		background:#886E5F;
		width:1000px;
		margin-left:-783px;
		position:relative;
		top:-70px;
		z-index:2;
	}
	.bodycolor_inner .detail_logo.copper{
		top:0;
		top:-40px;
	}
	.detail_logo.tokuso{
		border:solid 1px #886E5F;
		background:#886E5F;
	}
.detail_logo:before{
	content:"";
	position:absolute;
	top:0;
	left:-1000px;
	height:83px;
	width:1000px;

}
	.detail_logo.normal:before{
		border-top:solid 1px #777;
		border-bottom:solid 1px #777;
	}
	.detail_logo.custom:before{
		background:#000;
		border-top:solid 1px #000;
		border-bottom:solid 1px #000;
	}
	.detail_logo.tokuso:before{
		background:#886E5F;
		border-top:solid 1px #886E5F;
		border-bottom:solid 1px #886E5F;
	}
	.detail_logo.normal img{
		height:56px;
		display:block;
		position:absolute;
		top:16px;
		left:25px;
	}
	.detail_logo.custom img{
		height:63px;
		display:block;
		position:absolute;
		top:13px;
		left:25px;
	}
	.detail_logo.copper img{
		height:57px;
		display:block;
		position:absolute;
		top:13px;
		right:25px;
	}
	.detail_logo.tokuso img{
		height:63px;
		display:block;
		position:absolute;
		top:13px;
		left:25px;
	}
	.detail_logo_wrap .logo_copperbrown {
		text-align:center;
		margin-top:-40px;
	}
.detail_logo_wrap .logo_copperbrown img{
	width:527px;
}
.detail_logo_wrap h3{
	position:absolute;
	left:83px;
	top:24px;
}
/*--  section_bodycolor--*/
.section_bodycolor .detail_logo_wrap{
	margin-top: 80px;
	margin-bottom:-110px;

}
.section_bodycolor .detail_logo_wrap#copper_brown_style{
	padding-top:30px;
}
/* -----------------------------------
    #section_detail_nmcordinate
----------------------------------- */
#section_detail_nmcordinate {
    padding: 46px 0 76px;
    background-color: #f2f2f2;
}
#section_detail_nmcordinate .section_inner {
	margin: 0 auto;
	width: 950px;
}
#section_detail_nmcordinate h3 {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	line-height: 1.8;
}
.codinate_logo_wrap {

}
.codinate_logo_wrap .codinate_logo {
	margin: 0 0 30px;
	text-align: center;
}
.codinate_pic_wide {
	width: 950px;
	margin: 0 auto;
}
#section_detail_nmcordinate .caution {
	margin: 20px 15px;
	font-size: 11px;
	line-height: 1.2;
	text-align: right;
}
#section_detail_nmcordinate .caution_wrap{
  margin:30px 0;
	height: 40px;
}
#section_detail_nmcordinate .caution_wrap .caution{
  font-size: 13px;
  line-height: 20px;
  color: #da4058;	
	text-align: center;
  display: none;
}
#section_detail_nmcordinate .caution_wrap .caution.disp{
  display: block;
}


/* -----------------------------------
    #section_detail_cscordinate
----------------------------------- */
#section_detail_cscordinate {
    padding: 46px 0 76px;
    background-color: #595758;
}
#section_detail_cscordinate .section_inner {
	margin: 0 auto;
	width: 950px;
}
#section_detail_cscordinate h3 {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	line-height: 1.8;
	color: #fff;
}
#section_detail_cscordinate .caption_pic,
#section_detail_cscordinate .img_slider.col03 .desc {
	color: #fff;
}
#section_detail_cscordinate .caution_wrap{
	height: 40px;
	margin:30px 0;
}
#section_detail_cscordinate .caution_wrap .caution{
  font-size: 13px;
  line-height: 20px;
  color: #da4058;
	text-align: center;
  display: none;
}
#section_detail_cscordinate .caution_wrap .caution.disp{
  display: block;
}


/* -----------------------------------
    #section_detail_normal
----------------------------------- */
#section_detail_normal{
    margin: 40px auto 70px auto;
}
#section_detail_normal h3{
	font-size:30px;
}
#section_detail_normal .pic_wide{
	text-align:center;
	position:relative;
	height:1448px;
}
#section_detail_normal .pic_wide img {
	display:block;
	position:absolute;
	left:50%;
	margin-left:-1500px;
}

/* -----------------------------------
    #section_detail_custom
----------------------------------- */
#section_detail_custom{
    margin: 100px auto 70px auto;
}
#section_detail_custom h3{
	font-size:30px;
}
#section_detail_custom .pic_wide{
	text-align:center;
	position:relative;
	height:620px;
}
#section_detail_custom .pic_wide .pic_wide_inner{
	display:block;
	position:absolute;
	left:50%;
	margin-left:-1500px;
	width:3000px;
	height:1448px;
}
#section_detail_custom .pic_wide .pic_wide_inner img{
	display:block;
}
#section_detail_custom .pic_wide .pic_wide_inner .pic01{
	position:absolute;
	top:0;
	left:0;
}
#section_detail_custom .pic_wide .pic_wide_inner .pic02{
	position:absolute;
	top:0;
	right:0;
}
#section_detail_custom .pic_wide .pic_wide_inner .pic03{
	position:absolute;
	bottom:0;
	left:1295px;
}
#section_detail_custom .animate_light{
	position:absolute;
	bottom:0;
	right:0;
	width:1100px;
	height:688px;
}
#section_detail_custom .animate_light img{
	display:block;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
}
#section_detail_custom .animate_light img:nth-child(1){
	opacity:1;
}

/* -----------------------------------
    #section_movie
----------------------------------- */

#section_movie {
	margin: 40px auto 70px;
}
#section_movie h3 {
	margin: 0 0 50px;
	font-size: 30px;
	text-align: center;
}

#section_movie .section_inner {
	width: 950px;
	margin: 0 auto;
}
#section_movie .gallery-video {
    position: relative;
}
#section_movie .gallery-video__thumb {
	display: block;
	position: relative;
	cursor: pointer;
}
#section_movie .gallery-video .icon-play {
	position: absolute;
	display: block;
	top: 53%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#section_movie .gallery-video .icon-play img {
	width: 182px;
	height: auto;
}

/* -----------------------------------
    #section_detail_copper
----------------------------------- */
#section_detail_copper{
    margin: 40px auto 70px auto;
	background:#F6F6F6;
	padding-top:30px;
	padding-bottom:60px;
}
#section_detail_copper h3{    margin: 25px 0 45px;
font-size:30px;
	text-align:center;
	position:static;
}
#section_detail_copper .pic_wide{
	text-align:center;
	position:relative;
	height:1448px;
}
#section_detail_copper .pic_wide img {
	display:block;
	position:absolute;
	left:50%;
	margin-left:-1500px;
}
#section_detail_copper h4{
	font-size:18px;
	margin:30px 0 0;
	padding-bottom:15px;
}
#section_detail_copper .exp{
	margin:10px 0 -10px;
	font-size:14px;
	line-height:160%;
}
#section_detail_copper .f_wrap{
	overflow:hidden;
	border-top:solid 1px #ccc;
	margin:45px 15px 50px;
	padding-top:25px;
}
#section_detail_copper .f_wrap .clm_l{
	float:left;
	width:230px;
	padding-left:0px;
}
#section_detail_copper .f_wrap .clm_r{
	float:right;
	width:695px;
	padding-right:22px;
}#section_detail_copper .f_wrap .clm_r .slider_inner{
	padding:0 24px;
}
#section_detail_copper .f_wrap .clm_r .slider_inner .desc{
	text-align:center;
	padding-top:10px;
}
#section_detail_copper .detail{
	text-align:center;
	margin-top:30px;
}
/* -----------------------------------
    #
----------------------------------- */

#section_styling .detail{
	text-align:center;
}

#section_bodycolor .body_color_gallery .caution_wrap{
    height: 40px;
    margin-top: 20px;
}

#section_bodycolor .body_color_gallery .caution_wrap .caution{
    font-size: 13px;
    line-height: 20px;
    color: #da4058;
		text-align: center;
    display: none;
}

#section_bodycolor .body_color_gallery .caution_wrap .caution.disp{
    display: block;
}
/* _________________________________________ newcolor*/
.newcolor{
	overflow:hidden;
	margin:20px 25px 0;
	padding:30px 25px;
	border:solid 1px #ddd;
}
.newcolor .pic{
	float:left;
}
.newcolor .pic img{
	width:233px;
}
.newcolor .clm{
	margin-left:270px;
}
.newcolor .clm .h{
	margin:15px 0 20px;
	font-size:17px;
	line-height:160%;
}
.newcolor .clm .h span{
	display:block;
	font-size:15px;
}
.newcolor .clm .exp{
	line-height:160%;
	font-size:15px;

}

/* _________________________________________ twotone_key*/
.twotone_key{
	margin-top:50px;
	margin-bottom:53px;
	background:#f6f6f6;
	height:240px;
	position:relative;
}
.twotone_key .clm{
	overflow:hidden;
}
.twotone_key .clm .h{
	margin-left:50px;
	padding-top:60px;
	font-size:17px;
}
.twotone_key.copper .clm .h{
	margin-left:150px;
	padding-top:70px;
}
.twotone_key .clm .exp{
	margin-left:50px;
	font-size:13px;
	margin-top:15px;
	line-height:190%;

}
.twotone_key.copper .clm .exp{
	margin-left:150px;
}
.twotone_key .inner{
	width:980px;
	margin:0 auto;
}
.twotone_key .img_slider_wrap01,
.twotone_key .img_slider_wrap02{
	margin:0 auto;
	padding-left:20px;
	width:625px;
	position:absolute;
	top:27px;
	left:50%;
	margin-left:-220px;
}
.twotone_key .img_slider_wrap03{
	margin:0 auto;
	padding-left:20px;
	width:425px;
	position:absolute;
	top:27px;
	left:50%;
	margin-left:-130px;
}
.twotone_key .img_slider .pic{
	height:auto;
	width:200px;
	padding:0 0;
}

/* _________________________________________*/
.caption_pic{
	    font-size: 11px;
		text-align:right;
		line-height:140%;
		margin:10px 10px 0;
		letter-spacing:-0.04em;
}
.img_slider.col03{
	margin-top:45px;
}
.shrink{
	transform-origin:center top;
}
#section_accessory .detail {
    padding: 0;
}

#section_caution .section_inner #section_bottom_voice {
	text-align: center;
	margin-bottom: 40px;
}

}

#section_detail_custom .animate_light img:nth-child(2),
#section_detail_custom .animate_light img:nth-child(3),
#section_detail_custom .animate_light img:nth-child(4),
#section_detail_custom .animate_light img:nth-child(5),
#section_detail_custom .animate_light img:nth-child(6),
#section_detail_custom .animate_light img:nth-child(7){
	opacity:0;
	animation-delay:1s;
	animation-duration: 0.7s;
	animation-iteration-count:infinite;
}
#section_detail_custom .animate_light img:nth-child(2){
	animation-delay:0;
	animation-name: show02_01;
	z-index:2;
}
#section_detail_custom .animate_light img:nth-child(3){
	animation-delay:0;
	animation-name: show02_02;
	z-index:3;
}
#section_detail_custom .animate_light img:nth-child(4){
	animation-delay:0;
	animation-name: show02_03;
	z-index:4;
}
#section_detail_custom .animate_light img:nth-child(5){
	animation-delay:0;
	animation-name: show02_04;
	z-index:5;
}
#section_detail_custom .animate_light img:nth-child(6){
	animation-delay:0;
	animation-name: show02_05;
	z-index:6;
}
#section_detail_custom .animate_light img:nth-child(7){
	animation-delay:0;
	animation-name: show02_06;
	z-index:6;
}
#section_detail_custom .animate_light img:nth-child(8){
	animation-delay:0;
	animation-name: show02_07;
	z-index:6;
}
 @keyframes show02_01 {  0% {opacity: 0;}  4% {opacity: 0; }5% {opacity: 1; }  100% {opacity: 1; } }
 @keyframes show02_02 {  0% {opacity: 0;}  9% {opacity: 0; }  10% {opacity: 1; }  100% {opacity: 1; } }
 @keyframes show02_03 {  0% {opacity: 0;}  14% {opacity: 0; }  15% {opacity: 1; }  100% {opacity: 1; } }
 @keyframes show02_04 {  0% {opacity: 0;}  19% {opacity: 0; }  20% {opacity: 1; }  100% {opacity: 1; } }
 @keyframes show02_05 {  0% {opacity: 0;}  24% {opacity: 0; }  25% {opacity: 1; }  100% {opacity: 1; } }
 @keyframes show02_06 {  0% {opacity: 0;}  44% {opacity: 0; }  45% {opacity: 1; }  100% {opacity: 1; } }
 @keyframes show02_07 {  0% {opacity: 0;}  49% {opacity: 0; }  50% {opacity: 1; }  100% {opacity: 1; } }