@charset "UTF-8";

@font-face { font-family: YuGothicM; src: local("Yu Gothic Medium"); }
* { font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif; box-sizing: border-box; }

html { margin: 0px; padding: 0px; width: 100%; }
body { margin: 0px auto; padding: 0px; width: 100%; }
body,html { height: 100%;}
ul { list-style: none; }
.clears { zoom: 100%; }
.clears:after { content: " "; clear: both; height: 0; display: block; visibility: hidden; }
.HISU_MESS { margin: 0px; padding: 0px; color: #ff0099; font-size: 16px; line-height: 200%; }
.br::before { content: "\A"; white-space: pre; }

/* Header */
header { margin: 0px 0px 20px 0px; padding: 0px; width: 100%; }
#top { margin: 0px; padding: 0px; width: 100%; height: 80px; text-align: center; background: #fff; }
#top img { margin: 0px; padding: 0px; width: 1200px; height: 80px; }
#MB_base { margin: 0px 0px 10px 0px; padding: 0px; width: 100%; background: #996699; border-bottom: solid 3px #660066; }
#MB { margin: 0px auto; padding: 0px; width: 80%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; }
#MB * { color: #ffcc00; font-size: 18px; font-weight: 400; line-height: 70px; text-decoration: none; }
#MB li { margin: 0px; padding: 0px; }
#MB a { margin: 0px; padding: 0px; color: #fff; }
#MB .now { cursor: default; }
#MB a img { margin: 0px; padding: 0px; filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.35)); }
#sub_title { margin: 40px auto 40px auto; padding: 0px; width: 1100px; }
#sub_title img { width: 100%; height: auto; }

/* sub page */
#sub_banner { margin: 0px auto; padding: 0px; width: 1200px; }
#sub_banner img { width: 100%; height: auto; }
#sub_title { margin: 0px auto 35px auto; padding: 0px 0px 0px 15px; width: 1100px; color: #333; font-size: 18px; font-weight: 600; line-height: 40px; border-left: solid 8px #996699; background: #f4f4f4; box-sizing: border-box; -ms-box-sizing: border-box; }

/* Footer */
footer { margin: 60px 0px 0px 0px; padding: 30px 0px 0px 0px; width: 100%; }
#footer_link { margin: 0px auto; padding: 50px 0px; background: #464646; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
#footer_link * { color: #fff; font-size: 16px; }
#footer_link dt { margin: 0px; padding: 0px 60px 0px 0px; }
#footer_link dd { margin: 0px; padding: 0px; }
#footer_link dd ul { margin: 0px 0px 10px 0px; padding: 0px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
#footer_link dd li { margin: 0px; padding: 0px; line-height: 160%; width: 170px; text-align: center; }
#footer_link dd a { text-decoration: none; }
#footer_link dd a:hover { color: #ff9900; text-decoration: underline; }

#footer_copy { margin: 0px; padding: 0px; width: 100%; color: #eee; font-size: 14px; line-height: 400%; text-align: center; background: #535353; }

/* ハンバーガーメニュー */
#nav-drawer { display: none; }

/* ------------------------------------------ */
/* Max 以下の中間データ（Footer用） */
/* ------------------------------------------ */
@media screen and (min-width:800px) and (max-width:1200px){
	/* Footer */
	footer { min-width: 1200px; }
	#footer_link { display: block; }
	#footer_link dt { margin: 0px auto; padding: 0px 60px 30px 0px; width: 75%; }
	#footer_link dd { margin: 0px auto; width: 90%; }
}

/* ------------------------------------------ */
/* スマホ */
/* ------------------------------------------ */
@media all and (max-width:799px){
	.HISU_MESS { font-size: 3.8vw; }
	
	/* ハンバーガーメニュー */
	* { box-sizing: content-box; }
	#nav-drawer { margin: 0px 0px 0px auto; padding: 10px; width: 50px; position: absolute; top: 5px; right: 5px; background: #000; border-radius: 5px; display: block; z-index: 10; }
	#nav-menu { margin: 0px; padding: 0px; width: 50px; color: #fff; font-size: 2.6vw; font-weight: bold; text-align: center; position: absolute; top: 1px; }
	.nav-unshown { display:none; }
	#nav-open { display: inline-block; width: 50px; height: 42px; vertical-align: middle; }
	#nav-open span,#nav-open span:before,#nav-open span:after { position: absolute; height: 4px; width: 50px; border-radius: 2px; background: #fff; }
	#nav-open span,#nav-open span:before,#nav-open span:after { display: block; content: ''; cursor: pointer; }
	#nav-open span:first-child { top: 20px; }
	#nav-open span:before { bottom: -12px; }
	#nav-open span:after { bottom: -24px; }
	#nav-close { display: none; position: fixed; z-index: 99; top: 0; right: 0; width: 100%; height: 100%; background: black; opacity: 0; transition: 0.3s ease-in-out; }
	#nav-content { overflow: auto; position: fixed; top: 0; right: 0; z-index: 9999; height: auto; background: #fff; }
	#nav-content { transition: 0.3s ease-in-out; -webkit-transform: translateX(105%); transform: translateX(105%); }
	#nav-input:checked ~ #nav-close { display: block; opacity: 0.5; }
	#nav-input:checked ~ #nav-content { -webkit-transform: translateX(0%); transform: translateX(0%); box-shadow: 6px 0 25px rgba(0,0,0,0.15); }
	
	#nav-content ul { margin: 0px; padding: 0px; width: 100%; }
	#nav-content li { padding: 7vw 50px; color: #ff6600; font-size: 4.2vw; font-weight: bold; text-align: center; }
	#nav-content li:not(:last-child) { border-bottom: solid 1px #ccc; }
	#nav-content a { color: #333; font-size: 4.2vw; font-weight: bold; text-decoration: none; }
	
	/* Header */
	#top { margin: 0px auto; width: 100%; height: 50px; text-align: center; position: relative; overflow: hidden; z-index: 1; }
	#top img { margin: 0px auto; padding: 0px; width: 900px; height: auto; background: #fff; position: absolute; top: -10%; left: 50%; transform: translate(-50%,0%); z-index: 2; }
	#MB { display: none; }
	#sub_title { width: 96%; height: 40px; font-size: 4vw; position: relative; overflow: hidden; z-index: 1; }
	#b_home { padding: 0px 0px 10px 0px; width: 75%; }
	#b_home img { width: 100%; height: auto; }
	
	/* sub page banner */
	#sub_banner { width: 100%; height: auto; }
	
	/* Footer */
	#footer_link { display: block; }
	#footer_link dt { padding: 0px 0px 30px 0px; width: 100%; font-size: 4vw; line-height: 140%; text-align: center; }
	#footer_link dd { width: 100%; }
	#footer_link dd ul { margin: 0px auto; width: 90%; display: block; }
	#footer_link dd ul:not(#footer_link dd ul:first-child) { margin: 0px auto; }
	#footer_link dd ul * { font-size: 4vw; }
	#footer_link dd li { padding: 25px 0px 0px 0px; width: 100%; }
}