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



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


	HEVIZカルーセル用css

	@version    1.00    2018.3.7   New
	@version    1.01    2021.5.18  pointer.image時のスタイル調整
	@version    1.02    2021.7.7   .hvSlider.fade時のスタイル変更
	@version    2.00    2022.5.24  左右矢印の形状ほか、大幅改造

	@created    K.Sekioka of HEVIZ Co.,Ltd.
	@copyright  HEVIZ Co.,Ltd.

	<div class="hvSlider [horizontal|fade]">
	<div class="hvSliderScreen">
	<div class="hvSliderScreenInner">
	<ul class="hvSliderRow">
	<li class="hvSliderColumn"><img src="" alt=""></li>
	<li class="hvSliderColumn"><img src="" alt=""></li>
	<li class="hvSliderColumn"><img src="" alt=""></li>
	</ul>
	</div>
	<div class="hvSliderDirection prev"><a title="PREV"></a></div>
	<div class="hvSliderDirection next"><a title="NEXT"></a></div>
	</div>

	<div class="hvSliderPointer">
	<ul  class="hvSliderPointerRow">
	<li  class="hvSliderPointerColumn first"><a></a></li>
	<li  class="hvSliderPointerColumn prev"><a></a></li>
	<li  class="hvSliderPointerColumn rel (dot|line|image) (sel|visible)" rel="0"><a>(<img src="" alt="">)</a></li>
	<li  class="hvSliderPointerColumn rel (dot|line|image) (sel|visible)" rel="1"><a>(<img src="" alt="">)</a></li>
	<li  class="hvSliderPointerColumn next"><a></a></li>
	<li  class="hvSliderPointerColumn last"><a></a></li>
	</ul>
	</div>

	</div>



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



.hvSlider {
	display:block;
	position: relative;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


.hvSliderScreen {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	box-sizing: border-box;
}
.hvSliderScreen::after { content:"."; display:block; height:0; clear:both; visibility:hidden; }


/* 左右矢印がある場合 */
.hvSlider.hasDirection .hvSliderScreen {
	padding:0 40px;
}


/** Inner -------------------------------------------- **/

.hvSliderScreenInner {
	display:block;
	position:relative;
    width:100%;
	margin:0;
	padding:0;
    overflow:hidden;
	box-sizing: border-box;
}
.hvSliderScreenInner::after { content:"."; display:block; height:0; clear:both; visibility:hidden; }


.hvSliderRow {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content:flex-start;
    position:relative;
    width:10000%;
    margin:0;
    padding:0;
	list-style-type: none;
    box-sizing: border-box;
}


.hvSliderColumn {
    display:block;
    position:relative;
    width:1%;           /* 1枚見える想定 */
    height:auto;
    margin:0;
    padding:0;
    list-style-type: none;
    box-sizing: border-box;
}


/** 新・次前ボタン ------------------------------ **/

.hvSliderDirection {
	display: block;
	position: absolute;
	top: 50%;
	width: 40px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transform: translateY(-50%);
	z-index: 100;
	opacity: 1;
	transition: all 0.3s;
	font-size: 0;
}
.hvSliderDirection.prev { left: 0;  }
.hvSliderDirection.next { right: 0; }

.hvSliderDirection a {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0 0 100% 0;
	box-sizing: border-box;

	background-color: rgba( 255,255,255,0.3);
	cursor: pointer;
}

.hvSliderDirection a::before {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 35%;
	height: 50%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	transform: translate(-50%, -50%);
	background-color: #000000;
}
.hvSliderDirection.prev a::before { clip-path: polygon( 0% 50%, 100% 0%, 100% 100%); }
.hvSliderDirection.next a::before { clip-path: polygon( 100% 50%, 0% 0%, 0% 100%);   }


/* disbled, falseなら非表示 */
.hvSliderDirection.disabled,
.hvSliderDirection.false {
	display: none;
}

/* 移動中は隠す */
.hvSlider.onchange .hvSliderDirection {
	opacity: 0;
}

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

	.hvSlider.hasDirection .hvSliderScreen {
		padding:0 30px;
	}
		
	.hvSliderDirection {
		width: 30px;
	}
}



/* Fade用  ----------------------------- */

.hvSlider.fade .hvSliderScreenInner {
}

.hvSlider.fade .hvSliderRow {
    display: block;
    position: relative;
    width: 100%;
	margin: 0;
	padding: 0 0 100%;
}

.hvSlider.fade .hvSliderColumn {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	background-color: inherit;
/*
	height: 100%;
	overflow: hidden;
	overflow-x:hidden;
	overflow-y:hidden;
*/	
	opacity: 0;
	z-index: 1;

	transition-property: all;
	transition-duration: 10ms;
	transition-timing-function: linear;
	transition-delay: 0s;
}

.hvSlider.fade .hvSliderColumn.sel {
	opacity: 1;
	z-index: 3;
}

.hvSlider.fade .hvSliderColumn.out {
	opacity: 0;
	z-index: 2;
}


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


	カルーセル用パーツ スライド位置を点で表示するclass slidePointer

	[表示イメージ]
	--------------------------------
	  <<  <  ・・・・・・  >  >> 
	--------------------------------

	[想定タグ]
	<div class="hvSliderPointer">
	<ul  class="hvSliderPointerRow">
	<li  class="hvSliderPointerColumn first"><a></a></li>
	<li  class="hvSliderPointerColumn prev"><a></a></li>
	<li  class="hvSliderPointerColumn rel (dot|line|image) (sel|visible)" rel="0"><a>(<img src="" alt="">)</a></li>
	<li  class="hvSliderPointerColumn rel (dot|line|image) (sel|visible)" rel="1"><a>(<img src="" alt="">)</a></li>
	<li  class="hvSliderPointerColumn next"><a></a></li>
	<li  class="hvSliderPointerColumn last"><a></a></li>
	</ul>
	</div>


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



.hvSliderPointer {
	display: block;
	position: relative;
	margin: 0;
	padding: 2px 0 0 0;
	box-sizing: border-box;
	z-index: 200;
	
	opacity: 0;
	transition: all 0.5s;
}

/* 開始時 */
.hvSlider.ready .hvSliderPointer {
	opacity: 1;
}

/* スライダー無効時 */
.hvSlider.disabled .hvSliderPointer {
	display: none;
}

/* 矢印がある時は真ん中に寄せる */
.hvSlider.hasDirection .hvSliderPointer {
	margin: 0 40px;
}



.hvSliderPointerRow {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	margin:0;
	padding: 0;
	list-style-type: none;
}

.hvSliderPointerColumn {
	display: block;
	position: relative;
	width: 30px;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}

.hvSliderPointerColumn a {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0 0 100%;
	box-sizing: border-box;
	
	background-color: transparent;
	cursor: pointer;
	overflow: hidden;
	
	transition: all 0.3s;
}

.hvSliderPointerColumn a::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

	transform: translate(-50%, -50%);
    background-color: #000000;

	transition: all 0.3s;
}
.hvSliderPointerColumn.first a::before { height: 12px; clip-path: polygon(0 0, 20% 0, 20% 45%, 100% 0, 100% 100%, 20% 55%, 20% 100%, 0 100%); }
.hvSliderPointerColumn.prev a::before  { height: 12px; clip-path: polygon(   0% 50%, 100% 0%, 100% 100%); }
.hvSliderPointerColumn.next a::before  { height: 12px; clip-path: polygon( 100% 50%,   0% 0%,   0% 100%); }
.hvSliderPointerColumn.last a::before  { height: 12px; clip-path: polygon(0 0, 80% 45%, 80% 0, 100% 0, 100% 100%, 80% 100%, 80% 55%, 0 100%); }

/* hover, selected */
.hvSliderPointerColumn.sel a::before,
.hvSliderPointerColumn.visible a::before,
.hvSliderPointerColumn a:hover::before {
    background-color: #cc0000;
}

/* false */
.hvSliderPointerColumn.first.false,
.hvSliderPointerColumn.prev.false,
.hvSliderPointerColumn.next.false,
.hvSliderPointerColumn.last.false {
	visibility: hidden;
}

/* Dot Pointer */
.hvSliderPointerColumn.dot a {
	font-size: 0;
}

.hvSliderPointerColumn.dot a::before {
	border-radius: 50%;
}

/* Image Pointer */
.hvSliderPointerColumn.image {
	width: 80px;
}

.hvSliderPointerColumn.image a {
	border: 2px solid transparent;
}

.hvSliderPointerColumn.image img {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	
	object-fit: cover;
	transform: translate(-50%, -50%);
	transition: all 0.3s;
}

.hvSliderPointerColumn.image a::before {
	display: none;
}

.hvSliderPointerColumn.image a:hover img {
	width: 110%;
	height: 110%;
}

.hvSliderPointerColumn.image.sel a,
.hvSliderPointerColumn.image.visible a {
	border-color: #cc0000;
}


/* Line Pointer */
.hvSliderPointerColumn.line {
	width: calc( (100% - 120px ) / 10 );
}

.hvSliderPointerColumn.line a::before,
.hvSliderPointerColumn.line a::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 2px;
	margin: 0;
	padding: 0;
	background-color: #e0e0e0;
	box-sizing: border-box;

	transition: all 0.5s;
	transform: translate(0, -50%);
}
.hvSliderPointerColumn.line a::after {
	width: 0px;
	background-color: #000000;
	opacity: 0;
}

.hvSliderPointerColumn.line.sel a::after,
.hvSliderPointerColumn.line a:hover::after {
	width: 100%;
	opacity: 1;
}

/* カウンター表示 */
.hvSliderPointerColumn.counter {
	width: auto;
	height: auto;
	min-width: 4em;
	line-height: 1em;
	white-space: nowrap;
	text-align: center;
}


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

	
	
	
	
	
	
	
	
	
	/* Image Pointer */
	.hvSliderPointerColumn.image {
		width: 50px;
		height: 50px;
		border-width: 1px;
	}

	/* Line Pointer */
	.hvSliderPointerColumn.line {
	}
}



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

	1. 表示領域

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





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

.hvSlider.clickable {
	cursor:pointer;
}


















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


	各種表示切替


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




/* 画像が読み込み終わるまで表示しない */
.hvSlider {
	opacity: 0;
	transition: all 1s linear;
}
.hvSlider.ready {
	opacity: 1;
}

/* Horizontal Slider では、最初と最後は無し */
.hvSlider.horizontal .hvSliderPointerColumn.first,
.hvSlider.horizontal .hvSliderPointerColumn.last {
	display: none;
}

/* 本体に符号がない場合 */
.hvSlider:not(.first) .hvSliderPointerColumn.first,
.hvSlider:not(.prev)  .hvSliderPointerColumn.prev,
.hvSlider:not(.next)  .hvSliderPointerColumn.next,
.hvSlider:not(.last)  .hvSliderPointerColumn.last,
.hvSlider:not(.prev)  .hvSliderScreen .prev,
.hvSlider:not(.next)  .hvSliderScreen .next { visibility: hidden; }


/* disabledの時はいろいろ表示しない */
.hvSlider.disabled .hvSliderScreen .prev,
.hvSlider.disabled .hvSliderScreen .next,
.hvSlider.disabled .hvSliderPointer {
	display: none;
}