@charset "UTF-8";

@font-face {font-family: YuGothicM; src: local("Yu Gothic Medium");}
* { font-size: 16px; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif; }
* { box-sizing: border-box; user-drag: none; }
ul,ol { list-style: none; }
img { vertical-align: top; }
a { color: #000; text-decoration: none; }
a img { transition: all 0.65s; }
a img:hover { opacity: 0.5; }
html { margin: 0px; padding: 0px; width: 100%; background: #fff; }
body { margin: 0px auto; padding: 0px; width: 100%; position: relative; }

header { margin: 0px auto; padding: 0px; width: 100%; max-width: 1200px; }
#dealer { margin: 0px; padding: 0px; width: 100%; }
#dealer img { margin: 0px; padding: 0px; width: 23%; height: auto; }
header ol { margin: 0px; padding: 0px 0px 1.5vw 0px; width: 100%; display: flex; }

header ol li:first-child { margin: 0px; padding: 0px; width: 51%; }
header ol li:first-child img { margin: 0px; padding: 0px; width: 100%; height: auto; }
header ol li:nth-child(2) { margin: 0px; padding: 0px; width: 30.6%; text-align: right; }
header ol li:nth-child(2) img { margin: 0px; padding: 0px; width: 55.1%; height: auto; }
header ol li:last-child { margin: 0px; padding: 0px; width: 18.4%; }
header ol li:last-child a { margin: 6% 0px 0px auto; padding: 0px; width: 90.2%; aspect-ratio: 1 / 0.154; display: block; }
header ol li:last-child a img { margin: 0px; padding: 0px; width: 100%; height: auto; }
#mb { margin: 0px 0px 0.5vw 0px; padding: 0px; width: 100%; display: flex; }
#mb li { margin: 0px; padding: 0px; width: 16.66%; }
#mb li:first-child { border-left: solid 1px #b5b5b6; }
#mb li:nth-child(n+2) { border-left: solid 1px #b5b5b6; }
#mb li:last-child { border-right: solid 1px #b5b5b6; }
#mb a { margin: 0px; padding: 0px; width: 100%; aspect-ratio: 1 / 0.15; display: block; overflow: hidden; position: relative; }
#mb img { margin: 0px; padding: 0px; width: 100%; height: auto; position: absolute; top: 0px; left: 0px; right: 0px; }
#mb_now img { top: auto; bottom: 0px; }

#main_out { margin: 0px; padding: 0px; width: 100%; background: #d2ecfa; }
main { margin: 0px auto; padding: 0px 0px 1vw 0px; width: 100%; max-width: 1200px; }

footer { margin: 0px auto; padding: 0px; width: 100%; max-width: 1200px; background: #fff; }
footer dl { margin: 0px; padding: 0px; width: 100%; display: flex; }
footer dt { margin: 0px; padding: 0px; width: 57%; aspect-ratio: 1 / 0.568; }
footer dt iframe { margin: 3.5% 0px 0px 15%; padding: 0px; width: 74.34%; aspect-ratio: 1 / 0.677; }
footer dd { margin: 0px; padding: 0px; width: 43%; aspect-ratio: 1 / 0.755; }
footer dd img { margin: 0px; padding: 0px; width: 100%; height: auto; }

/* サブページリンク */
footer ul { margin: 1.5% auto 2% auto; padding: 0px; width: 100%; display: flex; flex-wrap: wrap; }
footer li { margin: 0px; padding: 0px; width: 24.25%; text-align: center; }
footer li:nth-child(n+2) { margin: 0px 0px 0px 1%; }
footer li img { margin: 0px; padding: 0px; width: 100%; height: auto; box-shadow: 5px 5px 10px rgba(0,0,0,0.35); }

/* Mobile header */
#header_mob { margin: 0px; padding: 0px 0px 1vw 0px; width: 100%; background: #fff; position: fixed; top: 0px; left: 0px; right: 0px; }
#header_mob ul { margin: 0px; padding: 0px; width: 100%; display: flex; }
#header_mob li { margin: 0px; padding: 0px; }
#header_mob li:first-child { width: 71.2%; }
#header_mob li:first-child img { margin: 0px; padding: 0px; width: 59%; height: auto; }
#header_mob li:nth-child(2) { width: 14.4%; }
#header_mob li:nth-child(2) img { margin: 0px; padding: 0px; width: 100%; height: auto; }
#header_mob li:last-child { width: 14.4%; }
#header_mob li:last-child img { margin: 0px; padding: 0px; width: 100%; height: auto; cursor: pointer; transition: all 0.7s; }
#header_mob li:last-child img:hover { opacity: 0.5; }

#mbl { margin: 0px; padding: 2vw 2vw 1vw 2vw; background: #898989; position: fixed; top: 14.5vw; right: -100%; z-index: 99999; }
#mbl li { margin: 0px; padding: 0px; }
#mbl li:nth-child(n+2) { border-top: solid 1px #fff; }
#mbl dl { margin: 0px; padding: 0px; display: flex; transition: all 0.7s; }
#mbl dl:hover { opacity: 0.5; }
#mbl dt { margin: 0px; padding: 3vw 10vw 3vw 3vw; width: 90%; color: #fff; white-space: nowrap; }
#mbl dd { margin: 0px; padding: 3vw 1vw 3vw 0px; width: 10%; color: #fff; text-align: right; }
#mbl a { margin: 0px; padding: 0px; width: 100%; transition: all 0.7s; }
.mbl_now { color: #ccc !important; }

/* 初期非表示 */
main { display: none; }
footer { display: none; }

/* Mobile footer */
#footer_mob { margin: 0px; padding: 0px; width: 100%; background: #fff; position: fixed; bottom: 0px; left: 0px; right: 0px; }
#footer_mob img { margin: 0px; padding: 0px; width: 100%; height: auto; }

/* Animation */
.ani_up { animation: Ani_up 1s ease-out 1 normal forwards; }
@keyframes Ani_up{
	0%  { opacity: 0.0; transform: translateY(35%); }
	100%{ opacity: 1.0; transform: translateY(0%); }
}

@media all and (max-width:800px){
	* { font-size: 3vw; }
	body { width: 98%; position: relative; }
	
	footer dl { flex-wrap: wrap; flex-direction: column-reverse; }
	footer dt { margin: 8% 0px 0px 0px; width: 100%; }
	footer dt iframe { margin: 0px; width: 100%; }
	footer dd { padding: 4% 0px 0px 0px; width: 100%; }
	
	footer li { width: 100%; text-align: center; }
	footer li:nth-child(n+2) { margin: 2% 0px 0px 0px; }
	footer li img { width: 98%; }
}