/*
	$Id: common.css,v3.12 for BeniPong-WP $
	*plugin.cssはcommon_purge.cssに分離
	*アニメーションcssの整理

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

  設定リセット　ここから

===========================================================================*/
#background dir ,#background menu ,#background dl ,#background dt ,#background dd ,#background form ,#background h1 ,#background h2 ,#background h3 ,#background h4 ,#background h5 ,#background header ,#background footer ,#background article ,#background section ,#background div ,#background p ,#background address {
	font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	font-weight: 400;
	padding:0;
	margin:0;
	text-align:left;
	font-size: 1em;
	line-height: 2em;
	letter-spacing: 0.06em;
	border: none;
	outline: none;
	position: relative;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	zoom:1;
}
#background em {
	font-style: normal;
}

#background ul ,#background ol ,#background nav ,#background figure {
	list-style-type:none;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	text-align:left;
	border: none;
	outline: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	zoom:1;
}


#background li ,#background figcaption {
	font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	font-weight: 400;
	font-size: 1em;
	line-height: 2em;
	letter-spacing: 0.06em;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;
	outline: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	zoom:1;
	position:relative;
}

#background a ,
#background button ,
#background .dummyLink {
	cursor: pointer;
	filter: Alpha(opacity=100);
	opacity: 1;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	position: relative;
}
#background a:before ,
#background button:before ,
#background .dummyLink:before {
	cursor: pointer;
	filter: Alpha(opacity=100);
	opacity: 1;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#background a:hover ,
#background button:hover ,
#background .dummyLink:hover {
	filter: Alpha(opacity=50);
	opacity: 0.5;
}
/** スマートフォン用分岐 **/
@media screen and (max-width: 740px) {
	#background a:hover ,
	#background button:hover {
		filter: Alpha(opacity=100);
		opacity: 1;
	}
}

#background img {
	border: none;
	outline: none;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}


#background a ,#background span ,
#background em ,#background strong {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border: none;
	outline: none;
}

#background .clearfix:after ,
#background div:after ,
#background nav:after ,
#background ul:after ,
#background ol:after ,
#background article:after ,
#background section:after ,
#background figure:after,
#background dl:after {
	content: "";
	display: block;
	clear: both;
	height: 0em;
	visibility: hidden;
	overflow: hidden;
	zoom: 1;
	font-size: 0;
}
#background h1 ,#background h2 ,#background h3 ,#background h4 ,#background hr {
	clear: both;
}
#background table ,#background table tr {
	border: 0;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
#background td ,#background th {
	vertical-align: top;
	text-align: left;
	font-size: 1em;
	line-height: 2em;
	letter-spacing: 0.06em;
	border-collapse: collapse;
	font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	font-weight: 400;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
#background textarea ,#background input {
	border: none;
	outline: none;
}
select ,option ,input ,textarea ,button {
	font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.6em;
	letter-spacing: 0.06em;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


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

  スライダー設定　ここから
  Slick v1.8.0

===========================================================================*/
/* Slider */
.slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}
.slick-list {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.slick-list:focus {
	outline: none;}
.slick-list.dragging {
	cursor: pointer;
	cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.slick-track {
	position: relative;
	top: 0;
	left: 0;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.slick-track:before,
.slick-track:after {
	display: table;
	content: '';
}
.slick-track:after {
	clear: both;}
.slick-loading .slick-track {
	visibility: hidden;}
.slick-slide {
	display: none;
	float: left;
	height: 100%;
	min-height: 1px;
}
[dir='rtl'] .slick-slide {
	float: right;}
.slick-slide img {
	display: block;}
.slick-slide.slick-loading img {
	display: none;}
.slick-slide.dragging img {
	pointer-events: none;}
.slick-initialized .slick-slide {
	display: block;}
.slick-loading .slick-slide {
	visibility: hidden;}
.slick-vertical .slick-slide {
	display: block;
	height: auto;
	border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
	display: none;}


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

  カラーボックス設定　ここから
  Colorbox v1.4.31

===========================================================================*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;padding: 0 0 0 0;}
#colorbox:focus,#cboxOverlay:focus,#cboxWrapper:focus {outline: none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}

/*------------------------------------
  ユーザー設定　ここから
-------------------------------------*/
#cboxOverlay{background:#000;}
#colorbox:focus {outline: none;}

#cboxContent{margin-top:40px; margin-bottom: 30px;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}

#cboxTitle{
	font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	position:absolute; bottom:-30px; left:0; color:#fff;
	font-size: 14px;
	font-weight: bold;
	height: 1.4em;
	text-align: left;
}
#cboxCurrent{
	font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	position:absolute; top:-25px; right:0; color:#ccc;
	font-size: 12px;
	font-weight: bold;
	width: 100%;
	padding-right: 40px;
	text-align: right;
}
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}

#cboxContent #cboxPrevious,
#cboxContent #cboxNext{
	position:absolute; top:50%; margin-top:-15px;
	width:30px; height:30px;
	text-indent:-9999px;
	border: none;
	filter: Alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all  0.5s ease;
	background: url(../images/icon02.svg) no-repeat 50% 50%;
	background-size: 100% 100%;
}
#cboxContent:hover #cboxPrevious,
#cboxContent:hover #cboxNext{
	filter: Alpha(opacity=100);
	opacity: 1;
}
#cboxPrevious{
	left:20px;
	transform: rotate(-180deg);
}
#cboxNext{
	right:20px;
	transform: rotate(0deg);
}
#cboxContent:hover #cboxPrevious:hover,
#cboxContent:hover #cboxNext:hover{
	filter: Alpha(opacity=50);
	opacity: 0.5;
}

#cboxClose{
	position:absolute; top:-40px; right: 0;
	right:0; display:block;
	background:url(../images/icon_close.svg) no-repeat center center;
	background-size: 30px 30px;
	width:30px; height:30px; text-indent:-9999px; border: none;
	filter: Alpha(opacity=100);
	opacity: 1;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all  0.5s ease;
}
#cboxClose:hover{
	filter: Alpha(opacity=50);
	opacity: 0.5;
}
/** スマートフォン用カウンター **/
@media screen and (max-width: 769px) {
	#cboxContent #cboxPrevious,
	#cboxContent #cboxNext{
		position:absolute; top:100%; margin-top:10px;
		width:40px; height:40px;
		filter: Alpha(opacity=100);
		opacity: 1;
	}
	#cboxPrevious{left:10px;}
	#cboxNext{right:10px;}
	#cboxTitle{
		padding: 0 30px 0 30px;
		font-size: 12px;
	}
	#cboxContent{margin-bottom: 50px;}
	#cboxClose{
		top:-30px; right: 0;
		background-size: 20px 20px;
		width:20px; height:20px;
	}
}