body {
	margin:0;
	padding:0;
	font-family: 'Noto Sans JP', sans-serif,' Hiragino Kaku Gothic ProN','�q���M�m�p�S ProN W3' , 'YuGothic','Yu Gothic','���C���I', 'Meiryo','�l�r �S�V�b�N';
	font-size:100%;
	font-weight:300;
	line-height:180%;
	color:#222;
	min-width:1300px;
	-webkit-text-size-adjust: 100% ;/* iPhone�t�H���g�T�C�Y�g��΍� */
}
img {
	border:none;
	vertical-align:bottom;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	font-size:100%;
	margin:0;
	padding:0;
	list-style:none;
	box-sizing:border-box;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd, ol, ol li, table, th, td {
	background-image:url(../image/spacer.gif); /* Android�y�[�W��P�v�f�̌��ԑ΍� */
}
a:link {color:#06F; outline:none; }
a:visited {color:#06F; }
a:hover {color:#333; }
a:hover img { opacity:0.7; filter:alpha(opacity=70); -moz-opacity:0.7; }

#wrapper {}
.base {}
i.material-icons { vertical-align:text-bottom; color:#FFBF00; }

.pc { display:block; }
.sm { display:none; }


/*====================================================================================================
  HEADER
====================================================================================================*/

#header { clear:both; width:100%; position:relative; margin:auto; padding:30px 0 45px; max-width:1300px; }
#header::after { display:block; clear:both; content:"";}
#header a { text-decoration:none; display:block; }

#header ul.extra_nav { position:absolute; top:0; right:0; }
#header ul.extra_nav::after { display:block; clear:both; content:""; }
#header ul.extra_nav li { float:left; }
#header ul.extra_nav li a {
	display:block;
	font-weight:500;
	padding: 15px 30px;
	text-decoration:none;
	color:#231815;
}
#header ul.extra_nav li:nth-child(2) a { background:#FFBF00; font-weight:700; }
#header ul.extra_nav li a:hover { opacity:0.7; }

/*** LOGO ******************************************************************/
#header h1,
#header h1 a { width:382px; height:101px; margin:auto; }
#header h1 { float:left; text-align: center; text-decoration: none; margin:auto; display:block; }
#header h1 a {
	color: #222;	
	text-indent: -9999px;
	background: url(../image/logo.png) no-repeat;
}



/*** NAVIGATION ************************************************************/
nav { float:right; width:60%; }
#Nav { margin:60px auto auto; }
#Nav ul { clear:both; width:100%; }
#Nav ul::after { clear:both; content:""; display:block; }
#Nav ul li { float:left; width:30%; text-align:center; position:relative; }
#Nav ul li#nav3,
#Nav ul li#nav4 { width:20%; }
#Nav ul li p {}
#Nav ul li:first-child p {}
#Nav ul li p a {
	box-sizing:border-box;
	line-height:120%;
}
#Nav ul li p a b { display:block; color:#231815; font-size:113%; letter-spacing:0.1em; }
#Nav ul li p a small { display:block; color:#878788; font-size:63%; font-family:"Arial"; letter-spacing:0.03em;}

/*HOVER EFFECT*/
#Nav ul li:hover a b,
#Nav ul li:hover a small { color:#FFBF00; }
#Nav ul li::before,
#Nav ul li::after {
	display:inline-block;
	clear:both;
	content:"";
	position:absolute;
	bottom:-15px;
	width:0;
	height:3px;
	background:#FFBF00;
	transition: 0.3s ease-out;
}
#Nav ul li:before {left: 50%;}
#Nav ul li:after { right: 50%;}
#Nav ul li:hover:before,
#Nav ul li:hover:after { width:50%; }
#Nav ul li ul { position: absolute; top: 50px; left: -50%; right: -50%; margin: auto; height: 0; overflow: hidden; z-index: 999; transition: 0.3s ease-out;}
#Nav ul li:hover ul { height:auto !important; transition: 0.3s ease-out;}


#Nav ul li.active a b,
#Nav ul li.active a small { color:#FFBF00; }
#Nav ul li.active:before,
#Nav ul li.active:after { width:50%; }

/*====================================================================================================
  CONTENT
====================================================================================================*/
#content { clear:both; position:relative; width:100%; }


#floatingbar {
	position:fixed;
	width:100%;
	bottom: 0;
	background:#FFBF00;
	text-align:center;
	box-shadow: 0 -2px 5px rgb(0 0 0 / 30%);
}
#floatingbar a {
	text-decoration:none;
	color: #231815;
	font-weight:700;
	display:block;
	padding: 10px 0;
}

/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer { clear:both; width:100%; color:#FFF; text-align:center; background:#3e3a39; }
#footer .f_box { clear: both; max-width: 1000px; width: 100%; margin: auto; padding: 38px 0 43px; }
#footer .f_box::after { clear: both; content: ""; display: block; }
#footer p.logo {
	text-indent:-9999px;
	width:219px;
	height:39px;
	float: left;
	background:url(../image/f_logo.png) no-repeat;
}

#footer .nav { float: right; margin-top:20px; }

#footer ul { clear: both; }
#footer ul::after { display:block; clear:both; content:""; }
#footer ul li { float:left; padding:0 10px; border-left:1px solid #FFF; }
#footer ul li:last-child { border-right:1px solid #FFF; }
#footer ul li a {
	display:block;
	text-decoration:none;
	color:#FFF;
	font-size:88%;
	font-weight:normal;
	line-height:100%;
}
#footer ul li a:hover { color:#FFBF00; }

#footer .copy {
	font-size: 75%;
	background: #fff;
	color: #3c3939;
	padding: 20px 0;
}


/*====================================================================================================
  DEVICE [No Touch]
====================================================================================================*/
#device { display:none; background:#FFF; padding:20px; text-align:center; }
#device::after {}
#device p {}
#device p a {
	display:block;
	padding:10px;
	color:#555;
	text-decoration:none;
	background:#EEE;
	border:1px solid #DDD;
	border-radius: 5px; /* CSS3 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome */
	-moz-border-radius: 5px;/* Firefox */
}


/*====================================================================================================
  PAGE [No Touch]
====================================================================================================*/
#page,
#page a { display:block; width:51px; height:51px;}
#page { position: fixed; bottom:130px; right: 20px;}
#page a {
	text-indent: -9999px;
	background:#FFBF00 url(../image/page_top.png) no-repeat;
}


/*====================================================================================================
  COLOR eto.. [No Touch]
====================================================================================================*/
.light-blue { color: #40A6DD;}
.blue { color: #0000FF;}
.dark-blue { color: #000099;}
.purple { color: #660099;}
.pink { color: #FF6699;}
.red { color: #FF0000;}
.orange { color: #FF6600;}
.yellow { color: #FFCC00;}
.white { color: #FFFFFF;}
.gray { color: #666666;}
.brown { color: #663300;}
.green { color: #339900;}
.italic { font-style: italic;}
.strong { font-weight: bold;}
.large { font-size: 115%; line-height: 140%;}
.small { font-size: 80%;}
.underline { text-decoration: underline;}
.line-through { text-decoration: line-through;}
.left { text-align: left;}
.center { text-align: center;}
.right { text-align: right;}

span.marker {
    padding: 0 0.15em;
    display: inline;
    background: linear-gradient(transparent 65%, #FFF000 65%);

/*====================================================================================================
  BOTTTOM
====================================================================================================*/
.btn_eff a {
	position:relative;
	display: block;
	padding: 10px;
	color: #fff;
	text-decoration: none;
	text-align:center; 
	box-sizing: border-box;
	border: 2px solid #FFBF00;
	background:#FFBF00;
	transition:800ms ease all;
}
.btn_eff a:hover{ color:#FFBF00; border: 2px solid #FFF; background: #fff;}
.btn_eff a:before,.btn_eff a:after{
	content:'';
	position:absolute;
	top:-2px;
	right:0;
	height:2px;
	width:0;
	background:#FFBF00;
	transition:400ms ease all;
}
.btn_eff a:after{
	right:inherit;
	top:inherit;
	left:0;
	bottom:-2px;
}
.btn_eff a:hover:before,.btn_eff a:hover:after{
	width:100%;
	transition:800ms ease all;
}