@charset "utf-8";
/* CSS Document */



/* =================================================================================================


	HEVIZカルーセル用css

	@version    1.00    2018.3.7 New
	@created    K.Sekioka of HEVIZ Co.,Ltd.
	@copyright  HEVIZ Co.,Ltd.


	<div class="hvSlider horizontal">
	<div class="view">
	<p class="next"><a></a></p>
	<p class="prev"><a></a></p>

	<div class="screen">
	<ul>
	<li><img src="" alt=""></li>
	<li><img src="" alt=""></li>
	<li><img src="" alt=""></li>
	</ul>
	</div>

	</div>

	<div class="pointer"><ul>
	<li class="first"><a></a></li>
	<li class="prev"><a></a></li>
	<li rel="0"><a><img src="" alt=""></li>
	<li rel="1" class="sel visible"><a><img src="" alt=""></li>
	<li rel="2"><a><img src="" alt=""></a></li>
	<li class="next"><a></a></li>
	<li class="last"><a></a></li>
	</ul></div>

	<div class="positioner"><ul>
	<li class="first"><a></a></li>
	<li class="prev"><a></a></li>
	<li class="counter">0 / 0</li>
	<li class="next"><a></a></li>
	<li class="last"><a></a></li>
	</ul></div>

	</div>



==================================================================================================== */



.hvSlider {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	opacity:1;
	transition:all 0.5s ease-in-out;
}




/** ----------------------------------------------------------------------------

	1. 表示領域

    <!-- 想定タグ -->
	<div class="hvSlider horizontal">
	<div class="view">
	<p class="next"><a></a></p>
	<p class="prev"><a></a></p>
	</div>
	</div>


-------------------------------------------------------------------------------- **/



.hvSlider .view {
	display:block;
	position:relative;
	margin:0;
	padding:0;
}
.hvSlider .view::after { content:"."; display:block; height:0; clear:both; visibility:hidden; }



/* クリックで切り替えできる場合 -------- */

.hvSlider.clickable {
	cursor:pointer;
}


/* 次・前矢印 -------------------------- */

.hvSlider .view .prev,
.hvSlider .view .next {
	display : block;
	position : absolute;
	top : 50%;
    left:auto;
    right:auto;
    width:30px;
    height:30px;
	margin : -15px 0 0 0;
	padding : 0;
	z-index : 100;
    text-align:left;
    font-size:1px;
	transition : all 0.3s;
}
.hvSlider .view .prev { right : 100%; }
.hvSlider .view .next { left : 100%; }


.hvSlider .view .prev a,
.hvSlider .view .next a {
    display:block;
    position:absolute;
    left:0;
    top:0;
    right:auto;
    bottom:auto;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    box-sizing: border-box;
    overflow:hidden;
    text-indent:-9999px;
    cursor: pointer;
}

.hvSlider .view .prev a::before,
.hvSlider .view .next a::before {
	content:"";
	display:block;
	position:absolute;
	width:60%;
	height:60%;
	top:20%;
    left:20%;
	margin:0;
	padding:0 0 1px 1px;
	overflow:hidden;

	border:1px solid #222222;
	border-right:0;
	border-bottom:0;

	transition:all 0.2s ease-in-out;
	transform-origin:center center;
}
.hvSlider .view .prev a::before { transform: rotate(-45deg); left:35%; }
.hvSlider .view .next a::before { transform: rotate(135deg); left:0%;  }


.hvSlider .view .prev a::after,
.hvSlider .view .next a::after {
    display:none;
}

/* Hover ------------------------------ */

.hvSlider .view .prev a:hover::before { left:30%; }
.hvSlider .view .next a:hover::before { left:5%;  }



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

    .hvSlider .view .prev,
    .hvSlider .view .next {
        width:15px;
        height:15px;
    }
}




/** ----------------------------------------------------------------------------


	screen共通(横スライドを想定)


    <!-- 想定タグ -->
	<div class="hvSlider">
	<div class="view">

    <div class="screen">
	<ul>
	<li><img src="" alt=""></li>
	<li><img src="" alt=""></li>
	<li><img src="" alt=""></li>
	</ul>
	</div>

    </div>


-------------------------------------------------------------------------------- **/



.hvSlider .screen {
	display:block;
	position:relative;
    width:100%;
	margin:0;
	padding:0;
    overflow:hidden;
}
.hvSlider .screen::after { content:"."; display:block; height:0; clear:both; visibility:hidden; }


.hvSlider .screen > ul {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content:flex-start;
    position:relative;
    width:10000%;
    margin:0;
    padding:0;
    box-sizing: border-box;
}

.hvSlider .screen > ul > li {
    display:block;
    position:relative;
    width:1%;           /* 1枚見える想定 */
    height:auto;
    margin:0;
    padding:0;
    list-style-type: none;
    box-sizing: border-box;
    background-color:#ffffff;
}

/*
.hvSlider .screen > ul > li img {
	width:auto;
	max-width:100%;
    vertical-align:bottom;
}
*/


/** ---------------------------------------------------------------------------


	カルーセル用パーツ ポインター部分(ボタンによる位置表示) 

	<div class="pointer"><ul>
	<li class="first"><a></a></li>
	<li class="prev"><a></a></li>
	<li rel="0"><a><img></a></li>
	<li rel="1" class="sel"><a><img></a></li>
	<li rel="2"><a><img></a></li>
	<li class="next"><a></a></li>
	<li class="last"><a></a></li>
	</ul></div>


------------------------------------------------------------------------------- **/



.hvSlider .pointer {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	line-height:1;
	z-index:100;
}

.hvSlider .pointer ul {
	display:flex;
	justify-content: center;
	align-items: stretch;
	flex-wrap: nowrap;
	margin:0;
	padding:0;
}

.hvSlider .pointer li {
    display:block;
    position:relative;
    width:20px;
	margin:0;
	padding:0;
	list-style-type:none;
    box-sizing: border-box;
}

.hvSlider .pointer a {
	display:block;
	position:relative;
    width:100%;
    margin:0;
    padding:0 0 100%;
    box-sizing: border-box;
	background-color:transparent;
	cursor:pointer;
}


/* ポイント(点) ---------------------------- */

.hvSlider .pointer li.point a {
}

.hvSlider .pointer li.point a::before {
	content:"";
    display:block;
    position:absolute;
    left:50%;
    top:50%;
    width:8px;
    height:8px;
    margin:-4px 0 0 -4px;
    padding:0;
    box-sizing:border-box;
        
    border:1px solid #ffffff;
    background-color:#cccccc;
    border-radius:4px;
	transition:all 0.3s;
}

/* Hover */
.hvSlider .pointer li.point a:hover::before {
	background-color:#cc0000;
}

/* 見えている部分 */
.hvSlider .pointer li.point.visible a::before {
	background-color:#888888;
}

/* 選択部分 */
.hvSlider .pointer li.point.sel a {
	cursor:default;
}
.hvSlider .pointer li.point.sel a::before {
/* .hvSlider .pointer li.point.sel a:hover::before { */
	background-color:#444444;
}


/* 画像 ----------------------------------------------------- */

.hvSlider .pointer li.image {
    width:60px;
}

.hvSlider .pointer li.image a {
    border:1px solid #ffffff;
    background-color:#ffffff;
    overflow:hidden;
    opacity:0.3;
}

.hvSlider .pointer li.image img {
    display:block;
    position:absolute;
    left:0;
    top:0;
    margin:0;
    padding:0;
    border:0;
    vertical-align:bottom;
    opacity:1;
}

/* Hover */
.hvSlider .pointer li.image a:hover {
/*	border-color:#cc0000; */
    opacity:1;
}
.hvSlider .pointer li.image a:hover img {
    opacity:1;
}

/* 見えている部分 */
.hvSlider .pointer li.image.visible a {
/*	border-color:#888888; */
    opacity:1;
}

/* 選択部分 */
.hvSlider .pointer li.image.sel a {
	cursor:default;
/*    border-color:#444444; */
    opacity:1;
}




/* 次・前・最初・最後 ------------------ */

.hvSlider .pointer li.prev a,
.hvSlider .pointer li.next a,
.hvSlider .pointer li.first a,
.hvSlider .pointer li.last a {
    width:100%;
    height:100%;
    padding:0;
}

.hvSlider .pointer li.prev a::before,
.hvSlider .pointer li.next a::before,
.hvSlider .pointer li.first a::before,
.hvSlider .pointer li.first a::after,
.hvSlider .pointer li.last a::before,
.hvSlider .pointer li.last a::after {
	content:"";
	display:block;
	position:absolute;
	width:8px;
	height:8px;
    left:50%;
    top:50%;
	margin:-4px 0 0 -8px;
	padding:0 0 1px 1px;
	overflow:hidden;

	border-top:1px solid #231815;
    border-right:1px solid #231815;
    
	transition:all 0.2s ease-in-out;
	transform-origin:center center;
    transform: rotate(45deg);
}

.hvSlider .pointer li.first a::before { margin-left:    0; transform: rotate(-135deg); }
.hvSlider .pointer li.first a::after  { margin-left: -4px; transform: rotate(-135deg); }
.hvSlider .pointer li.prev a::before  { margin-left: -2px; transform: rotate(-135deg); }
.hvSlider .pointer li.next a::before  { margin-left: -8px; }
.hvSlider .pointer li.last a::before  { margin-left: -6px; }
.hvSlider .pointer li.last a::after   { margin-left:-10px; }

/* Hover */
.hvSlider .pointer li.first a:hover::before { margin-left: -2px; }
.hvSlider .pointer li.first a:hover::after  { margin-left: -6px; }
.hvSlider .pointer li.prev a:hover::before  { margin-left: -4px; }
.hvSlider .pointer li.next a:hover::before  { margin-left: -6px; }
.hvSlider .pointer li.last a:hover::before  { margin-left: -4px; }
.hvSlider .pointer li.last a:hover::after   { margin-left: -8px; }



/** ------------------------------------------------------------------


	カルーセル用パーツ ポインター部分(テキストよる位置表示)  class faderPointer

	<div class="positioner"><ul>
	<li class="first"><a>FIRST</a></li>
	<li class="prev"><a>PREV</a></li>
	<li class="counter">1234 / 5678</li>
	<li class="next"><a>NEXT</a></li>
	<li class="last"><a>LAST</a></li>
	</ul></div>


---------------------------------------------------------------------- **/



.hvSlider .positioner {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	line-height:1;
	z-index:100;
}

.hvSlider .positioner ul {
	display:flex;
	justify-content: center;
	align-items: stretch;
	flex-wrap: nowrap;
	margin:0;
	padding:0;
}

.hvSlider .positioner li {
    display:block;
    position:relative;
    width:20px;
	margin:0;
	padding:0;
	list-style-type:none;
}

.hvSlider .positioner a {
	display:block;
	position:relative;
    width:100%;
    margin:0;
    padding:0 0 100%;
    box-sizing: border-box;
	background-color:transparent;
	cursor:pointer;
}


/* text counter ------------------------ */

.hvSlider .positioner li.counter {
	text-align	: center;
	width		: 4em;
	line-height	: 25px;
}



/* 次・前・最初・最後 ------------------ */

.hvSlider .positioner li.prev a,
.hvSlider .positioner li.next a,
.hvSlider .positioner li.first a,
.hvSlider .positioner li.last a {
    width:100%;
    height:100%;
    padding:0;
}

.hvSlider .positioner li.prev a::before,
.hvSlider .positioner li.next a::before,
.hvSlider .positioner li.first a::before,
.hvSlider .positioner li.first a::after,
.hvSlider .positioner li.last a::before,
.hvSlider .positioner li.last a::after {
	content:"";
	display:block;
	position:absolute;
	width:8px;
	height:8px;
    left:50%;
    top:50%;
	margin:-4px 0 0 -8px;
	padding:0 0 1px 1px;
	overflow:hidden;

	border-top:1px solid #231815;
    border-right:1px solid #231815;
    
	transition:all 0.2s ease-in-out;
	transform-origin:center center;
    transform: rotate(45deg);
}

.hvSlider .positioner li.first a::before { margin-left:    0; transform: rotate(-135deg); }
.hvSlider .positioner li.first a::after  { margin-left: -4px; transform: rotate(-135deg); }
.hvSlider .positioner li.prev a::before  { margin-left: -2px; transform: rotate(-135deg); }
.hvSlider .positioner li.next a::before  { margin-left: -8px; }
.hvSlider .positioner li.last a::before  { margin-left: -6px; }
.hvSlider .positioner li.last a::after   { margin-left:-10px; }

/* Hover */
.hvSlider .positioner li.first a:hover::before { margin-left: -2px; }
.hvSlider .positioner li.first a:hover::after  { margin-left: -6px; }
.hvSlider .positioner li.prev a:hover::before  { margin-left: -4px; }
.hvSlider .positioner li.next a:hover::before  { margin-left: -6px; }
.hvSlider .positioner li.last a:hover::before  { margin-left: -4px; }
.hvSlider .positioner li.last a:hover::after   { margin-left: -8px; }




/** 状態による設定 ============================================================= **/


	/* 準備が整ったら、.readyをつける */

	.hvSlider {
		opacity:0;
		transition:all 0.3s linear;
	}

	.hvSlider.ready {
		opacity:1;
	}


	/* 次・前 -------------------------- */

/*
	.hvSlider .view .prev,
	.hvSlider .view .next {
		display:none;
	}

	.hvSlider.prev .view .prev,
	.hvSlider.next .view .next {
		display:block;
	}
*/

	.hvSlider .view .prev,
	.hvSlider .view .next,
	.hvSlider .pointer .first,
	.hvSlider .pointer .prev,
	.hvSlider .pointer .next,
	.hvSlider .pointer .last,
	.hvSlider .positioner .first,
	.hvSlider .positioner .prev,
	.hvSlider .positioner .next,
	.hvSlider .positioner .last {
		opacity:1;
		cursor:pointer;
/*
        opacity:0;
		cursor:default;
		transition:all 0.3s linear;
*/
	}

    .hvSlider .view .prev.disabled,
	.hvSlider .view .next.disabled,
	.hvSlider .pointer .first.disabled,
    .hvSlider .pointer .prev.disabled,
	.hvSlider .pointer .next.disable,
	.hvSlider .pointer .last.disable,
	.hvSlider .positioner .first.disabled,
	.hvSlider .positioner .prev.disabled,
	.hvSlider .positioner .next.disabled,
	.hvSlider .positioner .last.disabled {
        opacity:0;
		cursor:default;
		transition:all 0.3s linear;
	}




	/* 動かない場合はdislabled --------- */

	.hvSlider.disabled .view .prev,
	.hvSlider.disabled .view .next {
		display:none;
	}
	.hvSlider.disabled .pointer,
	.hvSlider.disabled .positioner {
		display:none;
	}
	.hvSlider.disabled .screen > ul > li.af,
	.hvSlider.disabled .screen > ul > li.bf {
		display:none;
	}



/** ============================================================================

	クロスフェードの場合

================================================================================ **/



.hvSlider.fade .screen {
	width:100%;
    height:auto;
	padding:0 0 100%;  /* 真四角になる想定 */
padding:0 0 56.25%;
	overflow-x:hidden;
	overflow-y:hidden;
}

.hvSlider.fade .screen > ul {
    display:block;
    position:static;
    width:auto;
}

.hvSlider.fade .screen > ul > li {
	position:absolute;
	left:0;
	top:0;
	width:100%;
/*	height:100%; */
	height:auto;
	padding:0;
	overflow:hidden;
	background-color:#ffffff;
}



/** =====================================================================


    ロゴが無限ローテーションする


========================================================================= **/

.hvRotator {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: visible;
}

.hvRotator > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 1500%;
    margin: 0;
    padding: 0;
}

.hvRotator > ul > li {
    display: block;
    position: relative;
    width: 1%;
    margin: 0;
    padding: 0 0 0.5% 0;
    list-style-type: none;
    box-sizing: border-box;
    text-align: center;
}

.hvRotator > ul > li img {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    max-width: 80%;
    height: auto;
    max-height: 70%;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    vertical-align: bottom;
}


/** Responsive for Smart Phone ---------------------------- **/

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

    .hvRotator > ul {
        width: 2500%;
    }
}