@charset "shift_jis";
/* CSS Document 文字コード Shift-jis */

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


.section-mv {	margin: 0 0 30px 0; }
.section-lead {	margin: 40px 0 20px 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;
}

dl.satsuei { overflow: hidden; zoom: 1; }
dl.satsuei dt, dl.satsuei dd{ font-size:9pt; font-weight:400; }
dl.satsuei dt { width: 6em; float: left; clear: both; text-align: justify; text-align-last: justify; text-justify:inter-ideograph; }
dl.satsuei dd { padding: 0 0 5px 6em; }


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

.sec02 .floatL, .kodawari .floatL{ float: left; }

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

.sec02 .floatR, .kodawari .floatR{ float: right; }

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

.floatL, .floatLCnt{ float: left; }
.floatR, .floatRCnt{ float: right; }

.floatL{ margin:0 0px 0 0; border:0px solid #99f; }
.floatR{ margin:0 0 0 0; border:0px solid #f99; }

.grd2-1{ width:50%; border:0px solid #666; }
.grd2-1b{ width:45%; border:0px solid #666; padding:0 2.2% 0 2.2%; display:inline-block; text-align:center;}

.grd4-3{ width:75%; border:0px solid #666; }
.grd4-1{ width:25%; border:0px solid #666;}
.grd3-1{ width:33.3%; border:0px solid #666;}

.grd2-1b.floatL{ text-align:left; }
.grd2-1b.floatR{ text-align:right; }


/*******************************************************************************
*  flexBox
********************************************************************************/
.spn-typename{ font-size:9.5pt; }

.flx4{
	display: flex;
	margin-left: -20px;
} 

.flx4-1{
	margin-left: 20px;
	margin-bottom: 20px;
	width: 22.5%;
	border:0px solid #f99;
}

@media (max-width: 767px) {
	.flx4 { flex-wrap: wrap; }
	.flx4-1{ width: 45%; }
	.flx4-sm-dlmt{ margin-right: 45%; }
}

@media (max-width: 767px) {
	.kodawari_flex_box figure { text-align: center; }
}	
@media (min-width: 768px) {
	.kodawari_flex_box {
		display: flex;
		flex-direction: row-reverse;
	}	
	.kodawari_flex_box figure { flex-basis: 200px; }
	.kodawari_flex_box p { margin-right: 1.5em; }
}	
.kodawari_flex_box img { margin-bottom: 5px; }





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

/* 事例スライダ css3版 */
.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;	
}


/* 事例スライダ css3版 */
.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; }



/* bxSlider デザイン */

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


}

/*******************************************************************************
*  MV クロスフェード
********************************************************************************/

#mv-crossfade{
/* 948 x 534 */
	position:relative;
	width:100%;
  background-size: cover;
	background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0000_c.png);
}

.mv-crossfade-panel{
  height:100%;
  width:100%;
  background-size: cover;
  position: absolute;
  top:0;
  left:0;
	display:none; 
}
.mv-crossfade-panel-v04{
  height:100%;
  width:100%;
  background-size: cover;
  position: absolute;
  top:0;
  left:0;
}

#mv-crossfade-panel-v04-01{ background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0010_c.png); animation-name:mv-01; z-index:1; display:block; }
#mv-crossfade-panel-v04-02{ background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0020_c.png); animation-name:mv-02; z-index:2; }
#mv-crossfade-panel-v04-03{ background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0030_c.png); animation-name:mv-03; z-index:3; }
#mv-crossfade-panel-v04-04{ background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0040_c.png); animation-name:mv-04; z-index:4; }
#mv-crossfade-panel-v04-05{ background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0050_c.png); animation-name:mv-05; z-index:5; }
#mv-crossfade-panel-v04-06{ background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0060_c.png); animation-name:mv-06; z-index:6; }
#mv-crossfade-panel-v04-07{ background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0070_c.png); animation-name:mv-07; z-index:7; }
#mv-crossfade-panel-v04-08{ background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0080_c.png); animation-name:mv-08; z-index:8; }
#mv-crossfade-panel-v04-09{ background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0090_c.png); animation-name:mv-09; z-index:9; }
#mv-crossfade-panel-v04-10{ background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0100_c.png); animation-name:mv-10; z-index:10; }
#mv-crossfade-panel-v04-11{ background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0110_c.png); animation-name:mv-11; z-index:11; }
#mv-crossfade-panel-v04-12{ background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0120_c.png); animation-name:mv-12; z-index:12; }
#mv-crossfade-panel-v04-13{ background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0130_c.png); animation-name:mv-13; z-index:13; }
#mv-crossfade-panel-v04-14{ background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0140_c.png); animation-name:mv-14; z-index:14; }
#mv-crossfade-panel-v04-15{ background-image: url(/lineup/tile/s/exwalltile/stc/pic/panel_v04_0150_c.png); animation-name:mv-15; z-index:15; }


.mv-crossfade-panel-v04{ animation-duration: 45s;  animation-iteration-count: 1; }


#mv-crossfade:before {
	content:"";
	display: block;
	padding-top: 56.3%; /* 高さを幅に対して固定 */
}

@keyframes mv-00{
	0% {opacity:1;}
	1% {opacity:1;}
	2% {opacity:0;}
	100% {opacity:0;}
}
@keyframes mv-01{
	0% {opacity : 0; }
	1% {opacity : 1; }
	5% {opacity : 1; }
	7% {opacity : 0; }
	100% {opacity : 0; }
}
@keyframes mv-02{
	0% {opacity : 0; }
	4.0% {opacity : 0; }
	7.0% {opacity : 1; }
	11.0% {opacity : 1; }
	13.0% {opacity : 0; }
	100% {opacity : 0; }
}
@keyframes mv-03{
	0% {opacity : 0; }
	10.0% {opacity : 0; }
	13.0% {opacity : 1; }
	17.0% {opacity : 1; }
	20.0% {opacity : 0; }
	100% {opacity : 0; }
}
@keyframes mv-04{
	0% {opacity : 0; }
	13.0% {opacity : 0; }
	16.0% {opacity : 1; }
	22.0% {opacity : 1; }
	24.0% {opacity : 0; }
	100% {opacity : 0; }
}
@keyframes mv-05{
	0% {opacity : 0; }
	19.0% {opacity : 0; }
	22.0% {opacity : 1; }
	28.0% {opacity : 1; }
	30.0% {opacity : 0; }
	100% {opacity : 0; }
}
@keyframes mv-06{
	0% {opacity : 0; }
	25.0% {opacity : 0; }
	28.0% {opacity : 1; }
	34.0% {opacity : 1; }
	36.0% {opacity : 0; }
	100% {opacity : 0; }
}

@keyframes mv-07{
	0% {opacity : 0; }
	31.0% {opacity : 0; }
	34.0% {opacity : 1; }
	40.0% {opacity : 1; }
	42.0% {opacity : 0; }
	100% {opacity : 0; }
}

@keyframes mv-08{
	0% {opacity : 0; }
	37.0% {opacity : 0; }
	40.0% {opacity : 1; }
	48.0% {opacity : 1; }
	50.0% {opacity : 0; }
	100% {opacity : 0; }
}
@keyframes mv-09{
	0% {opacity : 0; }
	45.0% {opacity : 0; }
	48.0% {opacity : 1; }
	54.0% {opacity : 1; }
	56.0% {opacity : 0; }
	100% {opacity : 0; }
}
@keyframes mv-10{
	0% {opacity : 0; }
	51.0% {opacity : 0; }
	54.0% {opacity : 1; }
	62.0% {opacity : 1; }
	64.0% {opacity : 0; }
	100% {opacity : 0; }
}
@keyframes mv-11{
	0% {opacity : 0; }
	59.0% {opacity : 0; }
	62.0% {opacity : 1; }
	68.0% {opacity : 1; }
	70.0% {opacity : 0; }
	100% {opacity : 0; }
}
@keyframes mv-12{
	0% {opacity : 0; }
	65.0% {opacity : 0; }
	68.0% {opacity : 1; }
	74.0% {opacity : 1; }
	76.0% {opacity : 0; }
	100% {opacity : 0; }
}
@keyframes mv-13{
	0% {opacity : 0; }
	71.0% {opacity : 0; }
	74.0% {opacity : 1; }
	80.0% {opacity : 1; }
	82.0% {opacity : 0; }
	100% {opacity : 0; }
}
@keyframes mv-14{
	0% {opacity : 0; }
	77.0% {opacity : 0; }
	80.0% {opacity : 1; }
	86.0% {opacity : 1; }
	88.0% {opacity : 0; }
	100% {opacity : 0; }
}
@keyframes mv-15{
	0% {opacity : 0; }
	83.0% {opacity : 0; }
	86.0% {opacity : 1; }
	100% {opacity : 1; }
}




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



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

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.youtube iframe {
  width: 100%;
  height: 100%;
}

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

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

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

	.variationCnt .floatLCnt,
	.variationCnt .floatRCnt{
		float: none;  
		width: 100%;  
	}

	/* override */
  .sec01 .variationCnt .floatL{ float:left;  margin-right:5px; width:47%; }
  .sec01 .variationCnt .floatR{ float:right; margin-right:5px; width:47%; }
  .sec02 .floatL{ float:left;  margin-right:5px; width:47%; }
  .sec02 .floatR{ float:right; margin-right:5px; width:47%; }
}

/*** nav ***/
.section {
	margin-bottom: 60px;
	padding: 52px;
	background-color: #FFFFFF;
	border: 1px solid #e6e6e6;
}

.section.page-link { padding: 32px 52px 14px 52px; margin:0;}
.section.page-link.w-col2 ul li { width:383px; }
.section.page-link ul { margin:0; width: 100%;}

.section.page-link ul li {
	float: left;
	width: 169px;
	margin-right: 18px;
	margin-bottom: 8px;
	padding-left: 20px;
	background: url(/common/pic/icon_page_link.gif) no-repeat 0 5px;
	vertical-align: top;
}
.section.page-link ul li a {
	text-decoration: none;
	color: #4b4949;
}

.section.page-link ul li a.current{
    text-decoration: underline;
}

/***  ***/
.section.page-link1 {
	margin-bottom: 60px;
	padding: 16px;
	background-color: #FFFFFF;
	border: 1px solid #e6e6e6;
}

.section.page-link1 ul { 
	margin:0; 
	width: 100%;
	display: flex;
	justify-content: center;	
}
li.subnav-li-1 { width:32%; }

.subnav-inner{ margin:15px 15px 0 15px; }

.section.page-link1 ul li {
	display: inline-block;
	margin-bottom: 8px;
	vertical-align: top;
	border:0px solid #999;
}

.section.page-link1 ul li a {
	text-decoration: none;
	color: #ffffff;
}


.section.page-link1 ul li a.current{
    text-decoration: underline;
}

/*** floating menu ***/
#subnav-wrapper{ display:block;  min-height:80px; }
#subnav-stc{
	transition: all 700ms 0s ease;	
	justify-content: center;
	padding:0 0 5px 0 !important;
}

.subnav-stc.fixed{ position: fixed; top: 0; }

.subnav-relative{ position: relative; top:auto; left:auto; z-index:1; margin-top:0; }
.subnav-over{ position: fixed; top:0; z-index:9; margin-top:0; width:948px; height:0; }
.subnav-fixed{ position: fixed; top:0; z-index:9; margin-top:0; width:948px; height:auto; }

.suvnav-fixed .subnav-arrow{ display:inline-block; }

.subnav-caption{ min-height:6rem; font-size:95%; }

.subnav-detail{ margin-top:10px; font-size:12px; line-height:18px; }



@media only screen and (max-width: 767px){
	.section.page-link1 {
		padding: 16px 5px;
	}
	#subnav-wrapper{ margin-left:auto; margin-right:auto; }
	.subnav-over{ width:calc(100vw - 80px); }
	.subnav-fixed{ 
		margin-left:auto; 
		margin-right:auto; 
		margin-top:80px;
	}
	.subnav-fixed{ width:calc(100% - 40px); }

	.subnav-inner{ margin:15px 5px 0 5px; }
	#subnav-stc{ padding:5px !important; }
	#subnav-stc .btn-basic a{ font-size:90%; }

	.subnav-detail{ display:none; visibility:hidden; height:0; }
		
	.slider-designs-wrapper { margin-top:80px; }

	.btn-basic li.btn-small a{ padding:11px; }

}

@media only screen and (max-width: 767px){

}