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

/*------------------------------------------------------------
	2021年　2月3日
------------------------------------------------------------*/

/*-----common------*/

#harrier_m div:after{
	content: " ";  
	display: block; 
	/*visibility: hidden; */
	clear: both; 
	height: 0.1px; 
	font-size: 0.1em; 
	line-height: 0; 
}

body{/*-念のため指定　ページに入れ込む場合は不要-*/
	font-family: "ヒラギノ角ゴ Pro W3","メイリオ",Osaka,"ＭＳ Ｐゴシック",sans-serif,Arial,Helvetica,verdana;
	line-height: 1.5em;
	text-align: justify;
}

#harrier_m #wrapper{
	margin: 0 auto 2px;
	width: 100%;
	height: auto;
}

#harrier_m #main{
	width: 96%;
	height: auto;
	max-width: 1014px;
	margin: 0 auto;
}

header, nav, section, article, hgroup {
    display: block;
}

#harrier_m * {
    margin: 0px;
    padding: 0px;
}

#harrier_m a {
	outline: none;
	font-size: 0;
}

#harrier_m img {
	vertical-align:bottom;
	border: 0;
	font-size: 0;/*-inline-block隙間対応-*/
}

#harrier_m *:focus {/*-chrome画像フォーカス時の線を消す-*/
  outline: none;
}

/*-----main------*/

#movie360{
	margin-top: 8%;
}

#movie360 .car_logo img{
	position: absolute;
	width: 50%;
	max-width: 300px;
	top: -4%;
	left: 1%;
	z-index: 40;
}

#movie360 .top_note{
	position: absolute;
	text-align: center;
	font-size: 15px;
	width: 100%;
	top: 7%;
	z-index: 40;
	color: #232323;
}

#movie360 .pc_note{
	display: inline-block;
}

#movie360 .sp_note{
	display: none;
}

#movie360 .bottom_note{
	position: absolute;
	bottom: -9%;
	text-align: center;
	font-size: 15px;
	width: 100%;
	color: #232323;
	z-index: 40; 
}

#movie360_size{
	width: 100%;
	max-width:940px;
}

#movie360{
	position: relative;
	margin-left: 5%;
}

#cloudimage-360_1{
	z-index: 30;
	width: 100%;
}

#cloudimage-360_2,#cloudimage-360_3,#cloudimage-360_4,
#cloudimage-360_5,#cloudimage-360_6,#cloudimage-360_7,
#cloudimage-360_8,#cloudimage-360_9,#cloudimage-360_10,
#cloudimage-360_11,#cloudimage-360_12,#cloudimage-360_13,
#cloudimage-360_14,#cloudimage-360_15{
	opacity: 0;
	position: absolute!important;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 940px;
	height: auto;
	z-index: -1;
}

.cloudimage-inner-box div { display: none; }

.txt360{
	width: 100%;
	font-size: 12px;
	color: #232323;
	text-align: center;
	position: absolute;
	bottom: 5%;
}

#anim360_btn_a{
	margin: 0 auto 10%;
	width: 65%;
	text-align: center;
	border: 1px solid #ccc;
	padding-top: 7%;
	padding-bottom: 4%;
	position: relative;
}

#anim360_btn_a li{
	margin-bottom: 1.5%;
}

#anim360_btn_a li{
	list-style: none;
	display: inline-block;
	width: 44px;
	height: auto;
	margin-left: 1%;
	cursor: pointer;
	position: relative;
}

#anim360_btn_a li img{
	width: 100%;
	height: auto;
}

#anim360_btn_a .active::before{
	content: "";
	position: absolute;
	top: -5px;
	left: -5px;
	width: 46px;
	height: 46px;
	border: 4px solid #e24040;
	border-radius: 30px;
}

#anim360_btn_a .bottom_note2{
	position: absolute;
	font-size: 12px;
	color: #232323;
	width: 100%;
	text-align: right;
	bottom: 2%;
	right: 1%;
}


/* ウィンドウ幅が-760pxの場合に適用 */
@media screen and ( max-width:760px )
{
	#movie360 .car_logo img{
		width: 30%;
	}

	#anim360_btn_a{
		width: 95%;
	}

	#anim360_btn_a li{
		width: 30px;
	}

	#anim360_btn_a .active::before{
		top: -4px;
		left: -4px;
		width: 32px;
		height: 32px;
		border: 3px solid #e24040;
	}

	#movie360{
		margin-top: 15%;
	}

	#movie360 .car_logo img{
		top: -11%;
	}

	#movie360 .top_note{
		top: -2.5%;
	}

	#movie360 .pc_note{
		display: none;
	}

	#movie360 .sp_note{
		display: inline-block;
		font-size: 0.7em;
	}

	#movie360 .bottom_note{
		bottom: -12.5%; 
		font-size: 0.65em;
	}

	.txt360{
		font-size: 0.42em;
		line-height: 1.2em;
		bottom: 5%;
	}

	#anim360_btn_a .bottom_note2{
		font-size: 0.42em;
		line-height: 1.2em;
	}

}