@charset "utf-8";

/*------------------------------*/
/* ページ固有設定*/
/*------------------------------*/

/* スライダー */
.auto_slider {
	height:700px;
}

/* タブレット */
@media only screen and (max-width:1024px) {
	.auto_slider {
		height:600px;
	}
}

/* スマホ */
@media only screen and (max-width:599px) {
	.auto_slider {
		height:500px;
	}
}

/* オートスライダー内の画像 */
.auto_slid_box img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
}

/* ロータリーフェーダー */
.rotary_fader_mein {
	position:absolute;
	bottom:-30px;
	right:30px;
}

/*------------------------------*/
/* スライダー内の文字枠 */
.auto_slider_inner_box_1 {
	position: absolute;
	width: 100%;
	top:5%;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	z-index: 1;
	color: #ffffff;
	padding:20px;
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.85), 2px 2px 6px rgba(0, 0, 0, 1);
	font-weight: bold;
}
.auto_slider_inner_box_2 {
	position: absolute;
	width: 100%;
	bottom:150px;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	z-index: 2;
	color: #ffffff;
	padding:20px;
	text-align: right;
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.85), 2px 2px 6px rgba(0, 0, 0, 1);
}
/* タブレット */
@media only screen and (max-width:1024px) {
	.auto_slider_inner_box_2 {
		bottom:200px;
	}
}

/*------------------------------*/
/* メインマスク */
.mask_1 {
	position: absolute;
	z-index: 1;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	background-color: rgba(255,255,255,0.9);
}
.mask_2 {
	position: absolute;
	z-index: 1;
	width:100%;
	height:100%;
	right:0px;
	bottom:0px;
	background-color: rgba(255,255,255,0.9);
}

/*------------------------------*/
/* 熊フレーム */
.auto_slider_inner_box_3 {
	position: absolute;
	width: 40%;
	max-width: 700px;
	bottom:220px;
	left:5%;
	z-index: 1;
}
/* 熊アイコン */
.character_01,.character_02,.character_03,.character_04,.character_05 {
	opacity: 0;
	transform: translateY(-200px);
}
/* 揺らすアニメ */
.shake_rotate {
	animation: shake-rotate 10s ease-in infinite;
}
@keyframes shake-rotate {
	0%   { transform: rotate(0deg); }
	20%  { transform: rotate(10deg); }
	50%  { transform: rotate(-10deg); }
	80%  { transform: rotate(10deg); }
	100% { transform: rotate(0deg); }
}

/*------------------------------*/
/* レンジフェーダー枠 */
.range_fader_frame_box {
	position: absolute;
	width: 100%;
	max-width: 1200px;
	bottom:150px;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	z-index: 2;
}