@charset "shift_jis";
/* CSS Document 文字コード Shift-jis */
.mainvisual{ }
.mainvisual .kv{ }

.mainvisual .kv a:hover img{
	opacity: .8; filter: alpha(opacity=80);
}

.section-mv {
	margin: 0 0 30px 0;
}

.h2-noheader{
	background-image:none;
	padding-left:0;
}

.column-bggray{
	background: #ececec;
	padding: 20px;
}

.case-caption{
	margin-top:10px;
	font-size:13px;
	line-height:20px;
	color:#4b4949;
}

.kodawari{}

.kodawari img{
	float: right;
	margin-left:20px;
}

.sec02 .floatL,
.kodawari .floatL{
	float: left;
	width: 50%;
}

.sec02 .floatL img,
.kodawari .floatL img{
	max-width: 100%;
}

.sec02 .floatR,
.kodawari .floatR{
	float: right;
	width: 50%;
}

.variation {
	padding: 20px 50px;
	border: 1px solid #b9b7b0;
}

.variation section {
	margin-top: 32px;
}

.variation section:first-child {
	margin-top: 0;
}

.variation section ul {
	overflow: hidden;
	margin-top: 0;
}

.variation section ul li {
	float: left;
	margin-left: 6px;
	margin-right:8px;
}
/*******************************************************************************
*  MV クロスフェード
********************************************************************************/

#mv-crossfade{
	/* 948 x 534 */
	position:relative;
	width:100%;
	background-size: cover;
	background-image: url(/lineup/tile/s/exwalltile/newproducts/selaviogran/pic/panel_bg.jpg);
}
	
.mv-crossfade-panel{
	height:100%;
	width:100%;
	background-size: cover;
	position: absolute;
	top:0;
	left:0;
}
	
#mv-crossfade-panel-bg{ background-image: url(/lineup/tile/s/exwalltile/newproducts/selaviogran/pic/panel_bg.jpg); z-index:0; }
#mv-crossfade-panel-01{ background-image: url(/lineup/tile/s/exwalltile/newproducts/selaviogran/pic/panel_01.jpg); z-index:1; }
#mv-crossfade-panel-02{ background-image: url(/lineup/tile/s/exwalltile/newproducts/selaviogran/pic/panel_02.jpg); z-index:2; }
#mv-crossfade-panel-03{ background-image: url(/lineup/tile/s/exwalltile/newproducts/selaviogran/pic/panel_03.jpg); z-index:3; }
#mv-crossfade-panel-04{ background-image: url(/lineup/tile/s/exwalltile/newproducts/selaviogran/pic/panel_04.jpg); z-index:4; }
#mv-crossfade-panel-05{ background-image: url(/lineup/tile/s/exwalltile/newproducts/selaviogran/pic/panel_05.jpg); z-index:5; }
#mv-crossfade-panel-06{ background-image: url(/lineup/tile/s/exwalltile/newproducts/selaviogran/pic/panel_06.jpg); z-index:6; }
#mv-crossfade-panel-07{ background-image: url(/lineup/tile/s/exwalltile/newproducts/selaviogran/pic/panel_07.jpg); z-index:7; }
#mv-crossfade-panel-08{ background-image: url(/lineup/tile/s/exwalltile/newproducts/selaviogran/pic/panel_08.jpg); z-index:8; }
#mv-crossfade-panel-09{ background-image: url(/lineup/tile/s/exwalltile/newproducts/selaviogran/pic/panel_09.jpg); z-index:9; }

#mv-crossfade:before {
	content:"";
	display: block;
	padding-top: 56.3%; /* 高さを幅に対して固定 */
}
	
	
@keyframes mv-00{ 
	0%{ opacity:1; }
	10%{ opacity:0; }
	100%{ opacity:0; }
}

@keyframes mv-01{ 
	0%{ opacity:0; }
	5%{ opacity:1; }
	15%{ opacity:1; }
	25%{ opacity:0; }
	100%{ opacity:0; }
}
@keyframes mv-02{ 
	0%{ opacity:0; }
	5%{ opacity:0; }
	15%{ opacity:1; }
	20%{ opacity:1; }
	25%{ opacity:1; }
	35%{ opacity:0; }
	100%{ opacity:0; }
}
@keyframes mv-03{ 
	0%{ opacity:0; }
	15%{ opacity:0; }
	25%{ opacity:1; }
	30%{ opacity:1; }
	33%{ opacity:1; }
	45%{ opacity:0; }
	100%{ opacity:0; }
}
@keyframes mv-04{ 
	0%{ opacity:0; }
	23%{ opacity:0; }
	33%{ opacity:1; }
	40%{ opacity:1; }
	43%{ opacity:1; }
	53%{ opacity:0; }
	100%{ opacity:0; }
}
@keyframes mv-05{ 
	0%{ opacity:0; }
	33%{ opacity:0; }
	43%{ opacity:1; }
	52%{ opacity:1; }
	62%{ opacity:0; }
	100%{ opacity:0; }
}

@keyframes mv-06{ 
	0%{ opacity:0; }
	43%{ opacity:0; }
	53%{ opacity:1; }
	63%{ opacity:1; }
	73%{ opacity:0; }
	100%{ opacity:0; }
}
@keyframes mv-07{ 
	0%{ opacity:0; }
	53%{ opacity:0; }
	63%{ opacity:1; }
	73%{ opacity:1; }
	83%{ opacity:0; }
	100%{ opacity:0; }
}
@keyframes mv-08{ 
	0%{ opacity:0; }
	63%{ opacity:0; }
	73%{ opacity:1; }
	83%{ opacity:1; }
	93%{ opacity:0; }
	100%{ opacity:0; }
}
@keyframes mv-09{ 
	0%{ opacity:0; }
	73%{ opacity:0; }
	83%{ opacity:1; }
	93%{ opacity:1; }
	100%{ opacity:0; }
}
	
#mv-crossfade-panel-00{ animation-name:mv-00; }
#mv-crossfade-panel-01{ animation-name:mv-01; }
#mv-crossfade-panel-02{ animation-name:mv-02; }
#mv-crossfade-panel-03{ animation-name:mv-03; }
#mv-crossfade-panel-04{ animation-name:mv-04; }
#mv-crossfade-panel-05{ animation-name:mv-05; }
#mv-crossfade-panel-06{ animation-name:mv-06; }
#mv-crossfade-panel-07{ animation-name:mv-07; }
#mv-crossfade-panel-08{ animation-name:mv-08; }
#mv-crossfade-panel-09{ animation-name:mv-09; }
	
.mv-crossfade-panel{ animation-duration: 25s;  animation-iteration-count: infinite;  }

.sec-qa {
	padding: 20px 20px;
	border: 1px solid #b9b7b0;
	min-height:280px; 
	display:block; 
	overflow: hidden;
}
.sec-qa .que{ 
	color:#666666;
	font-size: 13pt; 
	font-weight: 700; 
}
.sec-qa .ans{ 
	padding-bottom: 3px;
	font-size: 20px;
	line-height: 28pt;
	margin-top: 20px;
}
.sec-qa .explain{ 
	border: 1px solid #999999;
	border-width:1px 0 0 0;
	padding:24px 0;
}
	
.qa-img{ float:right; border:0 solid #fff; border-width:0 0 0 20px; }

hr.hairline { height: 1px; border: none; border-top: 1px #999999 solid; margin-bottom:20px; }

.q5-subver-wrapper{ width:100%; float:left; clear:both; background-color:#f9f7f1;  }

.q5-subver-a-wrapper{ width:73%; float:left; }
.q5-subver-b-wrapper{ width:26%; float:left; }
.q5-subver-a{ width:auto; margin-right:0; margin:20px 0 20px 20px ; background-color:inherit; border:0 solid #999999; border-width:0 1px 0 0 ; }
.q5-subver-b{ width:auto; margin-left:0; background-color:inherit; padding:20px 20px 20px 20px;  }

.extw-grid1 , .extw-grid3, .extw-grid4{ width:100%; margin:0; padding:0; }
.extw-grid3-1{ width:30%; margin:0; padding:0; margin-right:3%; }
.extw-grid3-1:nth-child(1){ float:left; margin-right:3.5%; }
.extw-grid3-1:nth-child(2){ float:left; margin-right:3.5%; }
.extw-grid3-1:nth-child(3){ float:right; margin-right:3%; padding-right:0; border:0 solid #999999; }
.subver-name{ font-weight: 700; margin-top:0; margin-top:0.5em; text-align:center; }
p.subver-detail{ margin-top:0; }


@media only screen and (max-width: 767px){
	.q5-subver-a-wrapper{ width:100%; float:none; margin-left:0; }
	.q5-subver-b-wrapper{ width:100%; float:none; margin-right:0; }
	.q5-subver-a{ margin-right:0px; padding:20px 20px 0 0; border:0; }
	.q5-subver-b{ margin-left:0px; margin-top:0; padding-top:0; }
	.extw-grid3-1{ width:100%; margin:0; padding:0; margin:0; }
	.extw-grid3-1 img{ width:45%; height:auto; float:left; margin-right:20px; margin-bottom:20px; }
	.extw-grid3-1:nth-child(3){ float:left; margin:0; }

	.extw-grid1-1{ width:100%; margin:0; padding:0; margin:0; }
	.extw-grid1-1 img{ width:45%; height:auto; float:left; margin-right:20px; margin-bottom:20px; }


}


/*******************************************************************************
* override
********************************************************************************/

.sec-subvar .lxl-itm-grid{ background-color:#f2eee3; width:948px; }
.sec-subvar .lxl-itm-col-box01{ 
	width:368px; margin:30px; padding:0 30px 30px 30px;
	background-color:#ffffff; 
}
.sec-subvar .lxl-itm-col-box01:last-child{ float:left; margin-left:30px; margin-right:0; }
.sec-subvar .lxl-itm-col-box01:last-child{ float:right; margin-left:0px; margin-right:30px;}


/* 左右カードを同じ高さに */
.lxl-itm-col02{ display:flex; flex-wrap:wrap; }
/* カラム */
.lxl-itm-col02 .lxl-itm-col-box01{ display:flex; }
/* カード本体 */
.lxl-itm-col02 .white-box{ display:flex; flex-direction:column; height:100%; }
/* 赤枠テキスト */
.lxl-itm-col02 .text-area{ flex-grow:1; }
/* 画像を下に揃える */
.lxl-itm-col02 .photo-area{ margin-top:auto; }


/*******************************************************************************
* メディアクエリ。コンテンツ部＋MV。
********************************************************************************/

@media only screen and (max-width: 767px){
   .mainvisual{
		padding: 100px 0 30px 0;
	}
	.kodawari{
		padding:20px;
	}
	.kodawari img{
		float: none;
		margin-left:0px;
	}
	.sec-qa .flt-l,
	.sec02 .flt-r{
		float: none;
		width: 100%;
		margin-bottom:20px;
	 }

	.sec-qa .fr,
	.sec02 .fr{
		float: none;
		width: 100%;
		margin-bottom:20px;
	}
	.variation {
		padding: 20px;
		border: 1px solid #b9b7b0;
	}

	.sec-subvar .lxl-itm-grid{ width:100%; }
	.sec-subvar .lxl-itm-col-box01{ 
		width:auto; margin:30px; padding:0 30px 30px 30px;
		background-color:#ffffff; 
	}
	.sec-subvar .lxl-itm-col-box01:first-child{ float:left; margin:30px 30px 30px 30px;}
	.sec-subvar .lxl-itm-col-box01:last-child{ float:left; margin:0 30px 30px 30px;}

	.qa-img{ display:block; float:none; border:0 solid #fff; border-width:0 0 0 0; }

	.sec-qa .explain{ margin-top:0; }

}


/* 事例スライダ css3版 */

.extw-casegrid3{ width:100%; margin:0; padding:0; }
.extw-casegrid3-1{ width:30%; margin:0; padding:0; margin-right:3%; }
.extw-casegrid3-1:nth-child(1){ float:left; }
.extw-casegrid3-1:nth-child(2){ float:left; }
.extw-casegrid3-1:nth-child(3){ float:left; }

.case-img-stage{ width:80%; height:100%; margin:0; padding:0; margin-right:2%; float:left; }
.case-lbl-thumbs{ width:18%; height:100%; margin:0; padding:0; float:right; }

.extw-casegrid3-1{ display:inline-block; }

.case-img-container, .case-img-wrapper{ 
	position:relative; 
	display: block;
	width:100%;
	height:210px;
	overflow:hidden; 
}
.case-img-wrapper{ 
	height:160px;
}

.case-radio{ display: none; }
.case-a{ height:0; z-index:1; }
.case-img-container img, .case-img-stage img{
	display: inline-block;
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 0;
	object-fit: cover;
	top: 0;
	left: 0;
	transition: .4s;
}
.case-img-wrapper img{
	width:78%;
	height:auto;
}
a.case-a:hover img{
	opacity:0;
}

.case-lbl-wrapper{ display:block; width:100%; text-align:center;}
.case-lbl{ 
	display:inline-block; 
	width:5em; 
	font-size:11pt; 
	line-height:15pt; 
	background-color: #666; 
	margin:5px; 
	border-radius:7.5pt; 
	cursor:pointer; 
}

.case-lbl-thumb { 
	position:relative; 
	display:inline-block; 
	width:calc(100% - 6px); 
	height:auto; 
	border:3px solid #ccc; 
	background-color:#ccc;
	text-align:center;
	margin-bottom:5px;
	cursor:pointer;
}
.case-lbl-thumb img{
	opacity:1;
	width:100%;
	height:auto;
	pointer-events: none;	
}

.player-lbl{ 
	position:relative; 
	display: inline-block; 
	width:35%;
	cursor:pointer;
}

.player-lbl img{
	width:100%;
	height:auto;
	cursor:pointer;
	pointer-events: none;	
}

.case-a, .case-a img{ pointer-events: none; }
#case-radio-101:checked ~ div.case-img-wrapper #case-a-101{ height:0; z-index:11; pointer-events:auto; }
#case-radio-102:checked ~ div.case-img-wrapper #case-a-102{ height:0; z-index:11; pointer-events:auto; }
#case-radio-103:checked ~ div.case-img-wrapper #case-a-103{ height:0; z-index:11; pointer-events:auto; }
#case-radio-101:checked ~ div.case-img-wrapper #case-img-101{ height:auto; opacity:1; pointer-events:auto; }
#case-radio-102:checked ~ div.case-img-wrapper #case-img-102{ height:auto; opacity:1; pointer-events:auto; }
#case-radio-103:checked ~ div.case-img-wrapper #case-img-103{ height:auto; opacity:1; pointer-events:auto; }
#case-radio-101:checked ~ div.case-img-wrapper #case-lbl-thumb-101{ border:3px solid orange; background-color: orange; }
#case-radio-102:checked ~ div.case-img-wrapper #case-lbl-thumb-102{ border:3px solid orange; background-color: orange; }
#case-radio-103:checked ~ div.case-img-wrapper #case-lbl-thumb-103{ border:3px solid orange; background-color: orange; }

#case-radio-201:checked ~ div.case-img-wrapper #case-a-201{ height:0; z-index:11; pointer-events:auto; }
#case-radio-202:checked ~ div.case-img-wrapper #case-a-202{ height:0; z-index:11; pointer-events:auto; }
#case-radio-203:checked ~ div.case-img-wrapper #case-a-203{ height:0; z-index:11; pointer-events:auto; }
#case-radio-201:checked ~ div.case-img-wrapper #case-img-201{ height:auto; opacity:1; pointer-events:auto; }
#case-radio-202:checked ~ div.case-img-wrapper #case-img-202{ height:auto; opacity:1; pointer-events:auto; }
#case-radio-203:checked ~ div.case-img-wrapper #case-img-203{ height:auto; opacity:1; pointer-events:auto; }
#case-radio-201:checked ~ div.case-img-wrapper #case-lbl-thumb-201{ border:3px solid orange; background-color: orange; }
#case-radio-202:checked ~ div.case-img-wrapper #case-lbl-thumb-202{ border:3px solid orange; background-color: orange; }
#case-radio-203:checked ~ div.case-img-wrapper #case-lbl-thumb-203{ border:3px solid orange; }

#case-radio-301:checked ~ div.case-img-wrapper #case-a-301{ height:0; z-index:11; pointer-events:auto; }
#case-radio-302:checked ~ div.case-img-wrapper #case-a-302{ height:0; z-index:11; pointer-events:auto; }
#case-radio-303:checked ~ div.case-img-wrapper #case-a-303{ height:0; z-index:11; pointer-events:auto; }
#case-radio-301:checked ~ div.case-img-wrapper #case-img-301{ height:auto; opacity:1; pointer-events:auto; }
#case-radio-302:checked ~ div.case-img-wrapper #case-img-302{ height:auto; opacity:1; pointer-events:auto; }
#case-radio-303:checked ~ div.case-img-wrapper #case-img-303{ height:auto; opacity:1; pointer-events:auto; }
#case-radio-301:checked ~ div.case-img-wrapper #case-lbl-thumb-301{ border:3px solid orange; background-color: orange; }
#case-radio-302:checked ~ div.case-img-wrapper #case-lbl-thumb-302{ border:3px solid orange; background-color: orange; }
#case-radio-303:checked ~ div.case-img-wrapper #case-lbl-thumb-303{ border:3px solid orange; background-color: orange; }

@media only screen and (max-width: 767px){
	.extw-casegrid3-1{ width:100%; margin:0; padding:0; margin:0; margin-bottom:30px; }
	.case-img-container{ width:100%; height:65vw; overflow:hidden;  }
}

@media only screen and (max-width: 767px){
	.extw-casegrid3-1{ width:100%; margin:0; padding:0; margin:0; margin-bottom:30px; }
	.case-img-wrapper{ width:100%; height:65vw; overflow:hidden;  }
}



/*******************************************************************************
*  bxSlider
********************************************************************************/
.bx-wrapper .bx-controls-direction a {
	width: 42px;
	height: 86px;
	top: 45%;
}

.bx-wrapper .bx-prev {
  left: 0px;
  background: url('/lineup/tile/s/exwalltile/pic/btn_prev.png') no-repeat 0% 50%;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus { background-position:0% 50%; }
.bx-wrapper .bx-next {
  right: 0px!important;
  background: url('/lineup/tile/s/exwalltile/pic/btn_next.png') no-repeat 100% 50%;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus { background-position:100% 50%; }

/* spw 19/01/xx customized */

.bx-opacity-left{
	position:absolute;
	top:0;
	left:0;
	width:15%;
	height:100%;
	background-color:#000;
	opacity:0.3;

}
.bx-opacity-right{
	position:absolute;
	top:0;
	left:85%;
	width:15%;
	height:100%;
	background-color:#000;
	opacity:0.5;
}


/* bxSlider 施行事例 */
.section-3sliders{ overflow:hidden; }
#slider-designs{
	position:relative;
	width:100%;
	overflow-x:hidden !important;
	overflow-y:visible;
	padding-bottom:30px;

}

#slider-designs .bxslider {
	margin: 0 auto;
	width:100%;
}

#slider-designs .bx-viewport {
	width:100%;
	left:15%;
	overflow:visible !important;
}

#slider-designs ul li img {
	width:70%;
	height:70%;
	margin: 0 auto;
}



/* メディアクエリ。bxSlider部分 */
@media screen and (max-width:767px){
/*	.bx-default-pager{ display:none; }  */
	.bx-wrapper .bx-controls-direction a {
		top: 35%;
		height:40%;
		background-size:contain;
	}
}