@charset "utf-8";
h1, h2, h3, h4, h5, h6, p, address, ul, ol, li, dl, dt, dd, table, th, td, caption, img, form, blockquote, u, em, i { padding: 0; margin: 0; border: none; font-size: inherit; font-size: 100%; font-style: normal; font-weight: normal; list-style-type: none; }

html { width: 100%; height: 100%; margin: 0; padding: 0; }
body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: "Hiragino Kaku Gothic ProN", sans-serif; background: url(../images/bg_body.jpg) 0 0 repeat-y;}
a { outline: none; }
img { width: 100%; height: auto; vertical-align: top; border: 0; display: block; }
/*----------------------------------------------------
  clearfix
----------------------------------------------------*/
.clearfix:after { content: ""; display: block; clear: both; }


/*----------------------------------------------------
  #loader
----------------------------------------------------*/
#loader { position: fixed; top: 0; left: 0; z-index: 100000; width: 100%; height: 100%; background: #000; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; }
#loader .loader_circle {
	color: #f03bf0;
	font-size: 6px;
	margin: 100px auto;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	position: relative;
	text-indent: -9999em;
	-webkit-animation: load4 1.3s infinite linear;
	animation: load4 1.3s infinite linear;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}

@-webkit-keyframes load4 {
	0%,
	100% { box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; }
	12.5% { box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
	25% { box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
	37.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; }
	50% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; }
	62.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; }
	75% { box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; }
	87.5% { box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; }
}
@keyframes load4 {
	0%,
	100% { box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; }
	12.5% { box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
	25% { box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
	37.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; }
	50% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; }
	62.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; }
	75% { box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; }
	87.5% { box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; }
}


#btn_menu { width: calc(192 / 640 * 100%); position: absolute; top: 0; right: 0; z-index: 10;}

/*----------------------------------------------------
  #header
----------------------------------------------------*/
/* #gnav */
.gnav_wrap { position: relative; width: 100%; padding: 3px 0; margin-bottom: 4.9%;}
.gnav_wrap:before { content: ''; background: url(../images/gnav_border.png); position: absolute; width: 100%; height: 3px; top: 0; left: 0; right: 0; margin: auto; }
.gnav_wrap:after { content: ''; background: url(../images/gnav_border.png); position: absolute; width: 100%; height: 3px; bottom: 0; left: 0; right: 0; margin: auto; }
.gnav_wrap { position: relative; width: 100%; margin-bottom: 4.9%;}
#gnav {}
#gnav:after { content: ""; clear: both; display: block;}
#gnav li { width: 50%; float: left;}
#gnav li.gnav_top { width: 100%; }
#gnav li > a { display: block;}


/*----------------------------------------------------
  #container
----------------------------------------------------*/
#container { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }
#body_box .un_menu { width: 36%; position: absolute; top: 0; right: 0; z-index: 10;}

/*----------------------------------------------------
  #footer
----------------------------------------------------*/
#footer { background: #000; padding: 4% 0 3%; }

#footer .foot_bnr { width: calc(530 / 640 * 100%); margin: 0 auto 4.8%;}
#footer .foot_bnr li { margin-bottom: 3.8%;}
#footer .foot_bnr li:last-child { margin-bottom: 0;}

#footer > a { width: 100%; margin: 0 auto 3.5%; display: block;}
#footer >.footer_inner { width: calc(600 / 640 * 100%); margin: 0 auto; display: table; }
#footer >.foot_txt { width: calc(100% - 6.25%); margin: 0 auto 3.5%; }

#footer .notes,
#footer .share { display: table-cell; vertical-align: middle; }
#footer .notes { width: 56.6%; padding-right: 3.8%; }
#footer .notes span { font-size: 10px; color: #fff; letter-spacing: -1.2px; padding: 3px 0 3px 5px; border: solid 1px #fff; display: block; line-height: 1.2; }
#footer .notes span.type02 { font-size: 25px;  letter-spacing: -2.4px; padding: 6px 0 6px 10px; border: solid 2px #fff; }

#footer .share { width: 36.8%; font-size: 0; line-height: 0; text-align: right; }
#footer .share li { width: calc(88% / 4); display: inline-block; }
#footer .share li + li { margin-left: 4%; }
#footer .share a { width: 100%; display: inline-block; }

/* direction nav */

.un_directionNav { width: 100%; padding-top: 25%; margin: 0 auto; }
.un_directionNav ul li { float: left; width: 50%; }
.un_directionNav ul:after { content: ''; display: table; clear: both; }