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

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

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

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

.float-l{ float:left; }
.float-r{ float:right; }

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

.variation section { margin-top: 0; }

.variation section ul {
	overflow: hidden;
	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 施行事例 */

#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/newproducts/hiirone/pic/panel_p01.png);
}

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

#mv-crossfade-panel-01{ background-image: url(/lineup/tile/s/exwalltile/newproducts/hiirone/pic/panel_p01.png); }
#mv-crossfade-panel-02{ background-image: url(/lineup/tile/s/exwalltile/newproducts/hiirone/pic/panel_p02.png); }
#mv-crossfade-panel-03{ background-image: url(/lineup/tile/s/exwalltile/newproducts/hiirone/pic/panel_p03.png); }
#mv-crossfade-panel-04{ background-image: url(/lineup/tile/s/exwalltile/newproducts/hiirone/pic/panel_p04.png); }
#mv-crossfade-panel-05{ background-image: url(/lineup/tile/s/exwalltile/newproducts/hiirone/pic/panel_p05.png); }

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

.hdn{ display:none; width:1px; height:1px; }


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

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

  .mainvisual{
		padding: 100px 0 30px 0;
	}

	.variation section { width:100%; }

	.kodawari{
		padding:20px;
	}
	.kodawari img{
		float: none;
		margin-left:0px;
	}
	.variation {
		padding: 20px;
		border: 1px solid #b9b7b0;
	}
}

/*** 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-col3 ul li { width:239px; }
.section.page-link ul { margin:0; width: 100%;}

.section.page-link ul li {
	float: left;
	display: inline-block;
	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;
}

/*** floating menu ***/
#subnav-wrapper{ display:block;  min-height:80px; }
.subnav-hiirone{
	display: flex;
	justify-content: space-between;	
	transition: all 700ms 0s ease;	
}

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

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


@media only screen and (max-width: 767px){
	#subnav-wrapper{ min-height:120px; }

	.subnav-fixed{ 
		width:91.5vw;
		top:23vw;
	}
	
	.section.page-link{
		padding: 6% 0 3% 2% !important;
	}
	
	.section.page-link.w-col3 ul li { 
		display: inline-block;
		width: 27%;
		margin-right: 0;
	}
}

@media only screen and (max-width: 767px) and (min-height: 1000px){
	.subnav-fixed{ 
		top: 11.5vw;
		border: none;
	}
	.section.page-link{
		padding: 40px 10px 20px 10px!important;
	}
}

/* contents  */

#hiirone-hiiroyu{ 
   display: block;
   margin-top:-50px;
   padding-top:50px;
}

#hiirone-tsuti, #hiirone-uwagusuri, #hiirone-hiiroyu{
	margin-top: 40px;
}

.h2_hiirone{ 
    margin: 0
}

.h3_hiirone{
  font-size: 17px;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.h4_hiirone{
	margin: 0;
}

h5.h5_hiirone{
	font-size: 14px;
	background-image:none;
}

.variationlist{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
  align-items: flex-end;
}
.variationlist-upside{
  align-items: flex-start;
}

.variationlist li{
	width: 23%;
	margin-right: 2%;
}

.variationlist li:nth-of-type(4n){
	margin-right: 0;
}

.fgr-vr{ 
	display: block;
	border:0;
	margin-bottom:0;
}
.fgr-vr .roupe{
	position: relative;
  left: 80%;
  top:  -50px;
}

figure {
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
}
.fgr-vr figcaption{
	font-size: 14px;
	line-height: 1.6;
	min-height:3em;
	position: relative;
  top:  -30px;

}

.variation .small{
	display: block;
	margin-top: 0;
}

.product-inner{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.product-box {
	width:45%;
	padding: 20px 20px 0 20px;
	margin-bottom:20px;
}

.image-box{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.image-box li{ width:calc(50% - 10px); position:relative; }
.image-box li:nth-child(1){ margin-right:10px; }
.image-box li:nth-child(2){ margin-left:10px; }
.caption-gy, .caption-wh {
	position: relative;
	bottom: 30px;
	left: 10px;
	height:20px;
	line-height:20px;
}
.caption-gy{ color:#333333; }
.caption-wh{ color:#ffffff; }


.product-box .h5_hiirone{
	margin: 0;
}

#hiirone-tsuti .variation{
	margin-top: 50px;
}

#hiirone-uwagusuri .h4 + p{
	margin-top: 10px;
}

#hiirone-hiiroyu .variation{
	margin-top: 100px;
}

#hiirone-hiiroyu .variationlist:first-of-type{
	margin-bottom: 20px;
}

#hiirone-hiiroyu .variation .h5_hiirone{
	margin: 0 0 5px 0;
}

.extw-grid2{ width:100%; margin:0; padding:0; }
.extw-grid2-1{ width:47%; margin:0; padding:0; }
.extw-grid2-1:nth-child(1){ float:left; margin-right:20px; }
.extw-grid2-1:nth-child(2){ float:right; margin-right:20px; padding-right:0; }

/* fancybox */
.fancybox-title-float-wrap { bottom:10%; } 

.vr-hand:before {
	display: block;
	position: absolute;
	left: -7.5px;
	right: 0;
	bottom: 20px;
	content: '';
	width: 30px;
	height: 30px;
	margin: auto;
	background: rgba(200,200,200,0.5);
	border-radius: 50%;
	opacity: 0.5;
	cursor: default;
	animation: operationBeforeAnime 3s normal infinite;
}

.vr-hand {
	position: relative;
	left: 45%;
	right: 0;
	bottom: 80px;
	width: 40px;
	margin: auto;
	text-align: center;
	cursor: pointer;
	animation: operationAnime 3s normal infinite;
}
@keyframes operationAnime{40%{left:45%}70%{left:55%}100%{left:45%}}
.vr-hand img{width:22px; height:28px }


@media screen and (max-width: 767px) {
	#hiirone-tsuti, #hiirone-uwagusuri, #hiirone-hiiroyu{
		margin-top: 60px;
	}

	.h5_hiirone{
		margin-bottom: 5px;
	}

	.variationlist{
		justify-content: space-between;
	}

	.variationlist li{
		width: 48%;
		margin-right: 0;
		margin-bottom: 20px;
	}
	
	#hiirone-tsuti .variationlist:first-of-type li:nth-last-child(-n+2){
		margin-bottom: 0;
	}

	figcaption{
		font-size: 3vw;
		line-height: 1.6;
	}

	.variation .small{
		margin-top: 0;
	}

	.product-inner{
		display: flex;
		flex-flow: column;
	}

	.product-box{
		width: 90%;
		padding: 20px 20px 0 20px;
		margin-bottom:20px;
	}
	
	.image-box{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
	.image-box li{ width:calc(50% - 10px); }
	.image-box li:nth-child(1){ margin-right:10px; }
	.image-box li:nth-child(2){ margin-left:10px; }
	
	
	



	.product-box .h5_hiirone{
		margin: 0;
	}
	
	#hiirone-tsuti .variation{
		margin-top: 0px;
	}
	
	#hiirone-tsuti .float-r,
	#hiirone-hiiroyu .float-r{
		margin-bottom: 10px;
	}
	#hiirone-hiiroyu .variation{
		margin-top: 0px;
	}

}