@charset "utf-8";
body {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size:100%;
	line-height:180%;
	letter-spacing: 1px;
	color: #03040c;
	overflow-x: hidden;
}
img { border: none; vertical-align:bottom;}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	margin: 0; padding: 0;
	font-size: 100%;
	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(../img/spacer.gif);
}
iframe { border: none;}
a:link {color:#0458bf; outline:none; }
a:visited {color:#0458bf;}
a:hover {color: #333;}
@media only screen and (min-width:800px){
	a:hover img { opacity: 0.7; filter: alpha(opacity=70);}
}
#wrapper { position: relative;}
i.material-icons { vertical-align: middle;}
.pc {display:block;}
.sp {display:none;}

@media only screen and (max-width:1100px){
	body { min-width:400px; font-size:100%;}
	#header { width:100%;}
	#content{ width:100%;}
	#footer { width:100%;}
	#wrapper { background:#fff; border-top:none; overflow:hidden;}
	#base { width:100%; margin:0 !important;}
	.pc { display:none !important;}
	.sp { display:block !important;}
}


/*====================================================================================================
  HEADER
====================================================================================================*/
#header { 
	position: fixed; top: 0; left:0;
	width: 250px; height: 100vh; min-height: 800px;
	background: #fff;
	box-shadow: 0 0 8px  rgba(0,0,0,0.20);
	z-index: 999;
}
#header .line { 
	position: fixed; top: 0; left:0;
	width:5px; height: 100vh; min-height: 800px;
	background:#005ca3;
	z-index: 999;
	text-indent: -9999px;
}

/* logo */
#header h1,
#header h1 a { display: block; margin: auto; width:215px; height:200px;}
#header h1 a {
	display: block;
	text-indent: -9999px;
	background: url("../img/logo1.png") no-repeat center center;
}

/* nav */
#header  #nav {}
#header  #nav ul { margin: auto; padding-top:2px;  background: url("../img/nav_line.png") no-repeat top center;}
#header  #nav ul li { background: url("../img/nav_line.png") no-repeat bottom center;}
#header  #nav ul li a { text-decoration: none;}
#header  #nav ul li span {display: block; margin: auto; max-width: 215px;}
#header  #nav ul li span a {
	display: block;
	padding: 15px 20px 15px 35px;
	font-family: 'M PLUS 1', sans-serif;
/*	font-size:19px;	*/
	font-size:118.8%;
	font-weight: 500;
	color:#005ca3;
	background: url("../img/icon_maru.png") no-repeat 10px center;
	background-size: 15px auto;
}
#header  #nav ul li.on { background-color: #e4f5fc;}
#header  #nav ul li .sbnav {
	position: absolute; top: 0; left: 250px;
	width: 0; height: 100%;
	background-color:#f9f8f4;
	overflow: hidden;
}
#header  #nav ul li .sbnav.on { width:235px;}
#header  #nav ul li .sbnav ul {
	width: 235px;
	padding:210px 20px 25px;
	background-image: none;
}
#header  #nav ul li .sbnav ul,
#header  #nav ul li .sbnav li { background: none;}
#header  #nav ul li .sbnav a {
	display: block;
/*	padding:8px 15px;	*/
	padding:8px 8px;
	font-family: 'M PLUS 1', sans-serif;
	font-weight: 500;
	color:#222;
}
#header  #nav ul li .sbnav small { display: inline; margin-right:5px; color: #005ca3;}
#header .dora { 
	padding: 15px 0; 
	text-align:center;
	margin-top: 6.5em;		/* ctn add */
}
#header .dora img { width: 100px; height: auto;}

/* change */
#change { 
	position: relative;
	margin-top: 1em;		/* ctn add */
}
#change dl {
	position: absolute; top: 0;  left:-320px;
	width: 560px;
	background:#f9f8f4;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	transition: .3s;
}
#change dl+dl { top:50px;}
#change dt {
	float: right;
	cursor: pointer;
	width: 235px;
	height: 40px;
	padding: 5px 5px 5px 40px;
/*	font-size: 13px;	*/
	font-size: 81.3%;
	color: #555;
	 border-left:1px solid #ddd;
	background-size: auto 20px !important;
}
#change dd {
	float: left;
	padding:7px 15px;
	width:calc(100% - 235px);
	height: 40px;
/*	font-size: 13px;	*/
	font-size: 81.3%;
	overflow: hidden;
	transition: .3s;
}
#change dl.on { left:5px;}
#change .waku { width:300px !important; height: 40px !important;}
#change .cate_lang dt { background:#f9f8f4 url("../img/icon_lang.png") no-repeat 10px center;}
#change .cate_txtbg dt { background:#f9f8f4 url("../img/icon_setting.png") no-repeat 10px center;}
#change .cate_lang dd p { display: inline;}
#change .cate_lang dd p + p { margin-left:10px;}
#change ul.bg_color { float:left; overflow: hidden;}
#change ul.bg_color li {float:left;}
#change ul.bg_color li.mid {float:left; margin-right:7px;}
#change ul.bg_color li+li { margin-left:3px;}
#change ul.bg_color li a {
	display:block;
	width:30px;
	line-height:25px;
	text-align: center;
	color:#fff;
	text-decoration: none;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#change ul.bg_color li:nth-child(1) { line-height:25px;}
#change ul.bg_color li:nth-child(2) a { background:#333333;}
#change ul.bg_color li:nth-child(3) a { background:#3233ff;}
#change ul.bg_color li:nth-child(4) a { background:#ddd; color:#444;}
#change ul.txt_size { float:left; overflow: hidden; margin-left: 20px;}
#change ul.txt_size li { float:left;}
#change ul.txt_size li+li { margin-left:3px;}
#change ul.txt_size li.mid {float:left; margin-right:7px;}
#change ul.txt_size li a {
	display:block;
	width:42px;
	line-height:25px;
	text-align: center;
	color:#444;
	background:#ddd;
	border: none;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	text-decoration: none;
}
#change ul.txt_size li a:hover { opacity: 0.7;}
#change ul.txt_size li:nth-child(1) { line-height:25px;}
@media only screen and (min-width:1100px){
	#header  #nav ul li:hover { background-color: #e4f5fc;}
	#header  #nav ul li .sbnav a:hover { color:#005ca3;}
	#change dt:hover { opacity: 0.7;}
	#change ul.bg_color li a:hover { opacity: 0.7;}
	#header  #nav ul li .sbnav { transition: .3s;}
}
@media only screen and (max-width:1100px){
	#header {
		position:static;
		width:100%; height:auto; min-height: inherit;
		box-shadow:none;
		border-left:none;
	}
	#header .line { display: none;}
	#header .menu {
		cursor: pointer;
		position: absolute; top: 0; right: 0;
		width: 80px; height: 80px;
		background: url("../img/menu_off.png") no-repeat center center;
	}
	#header .menu.on {
		background: url("../img/menu_on.png") no-repeat center center;
	}

	/* logo */
	#header h1,
	#header h1 a { display: block; margin:0; width:250px; height:80px;}
	#header h1 a { background: url("../img/logo2.png") no-repeat center center;}

	/* nav */
	#header  #nav { display: none; padding:30px; background: #e4f5fc;}
	#header  #nav ul { padding:15px 20px; background: #fff; border-radius: 10px;}
	#header  #nav ul li:last-child { background:none;}
	#header  #nav ul li { background: url("../img/nav_line.png") repeat-x bottom center;}
	#header  #nav ul li span { max-width:none;}	
	#header  #nav ul li .sbnav { display: none; position: static; width: 100% !important; height: auto; border-radius: 0; background-color:#e4f5fc;}
	#header  #nav ul li .sbnav ul { 
		position: static; width: 100%; height: auto; 
/*		padding:25px;	*/
		padding:25px 20px;
	}
	#header  #nav ul li .pull { position:relative; background: url("../img/pull_off.png") no-repeat 96% center; background-size: 20px auto;}
	#header  #nav ul li .pull.on { background: url("../img/pull_on.png") no-repeat 96% center; background-size: 20px auto;}
	#header  .dora { display: none; }

	/* change */
	#change { display: none;}

}


/*====================================================================================================
  CONTENT
====================================================================================================*/
#content { clear:both; padding-left:250px;}
@media only screen and (max-width:1100px){
	 #content { padding-left:0; }
}

/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer { 
	clear:both;
	position: relative;
	padding-left:250px;
	border-top:5px solid #005ca3;
}

/* address */
#footer .f_cont1 { position: relative; margin:0 auto; width: 96%; padding: 50px 0 50px 50px; max-width: 1000px;}
#footer .add { position: relative; top:30px;  float: left; width:calc(100% - 450px); }
#footer .add .map  {
	position: absolute; top:-180px; left: -130px;
	width: 349px; height: 289px;
	background:url("../img/map.png") no-repeat;
}
#footer .add .logo {
	display: block; margin-bottom: 20px;
	width: 215px; height: 37px;
	text-indent: -9999px;
	background: url("../img/logo2.png") no-repeat;
}
#footer .add p span + span { margin-left: 10px;}
#footer .add .tel_list {position: absolute; top: 0; right: 0; }
#footer .add .tel_list a {
	display: block;
	padding:5px 35px 5px 15px;
	color:#fff;
	font-size: 87.5%;
	text-decoration: none;
	background:#005ca3 url("../img/arrow_w.png") no-repeat 95% center;
	background-size: 15px auto;
	border-radius: 50px;
}
#footer .popu { float: right; width:400px;}
#footer .popu dt { margin: 1%;}
#footer .popu dt b { color:#005ca3; font-size:112.5%;  font-weight: 500;}
#footer .popu dt span { color:#555; margin-left:10px;}
#footer .popu dd {}
#footer .popu dd p { float: left; margin: 1%; width: 48%; background: #f9f8f4; border-radius:5px; overflow: hidden;}
#footer .popu dd p b { float: left; font-weight: 500; width:55px; text-align: center;}
#footer .popu dd p span { float: right;}
#footer .popu dd p b,
#footer .popu dd p span { 
/*	display: block; padding:7px 10px;	*/
	display: block; padding:7px 9px;
}
#footer .popu dd p:nth-child(1)  b { color: #376fa6; background: url("../img/icon_man.png") no-repeat 3px center;}
#footer .popu dd p:nth-child(2)  b { color: #ce6e6e; background: url("../img/icon_woman.png") no-repeat 3px center;}
#footer .popu dd p:nth-child(1)  b,
#footer .popu dd p:nth-child(2)  b { padding-left: 20px; background-size:auto 30px !important; }

/* banner */
#footer .banner { padding: 60px 0; background:rgba(0,149,183,0.05); }
#footer .banner dl { margin:0 auto; width: 96%; max-width: 1000px;}
#footer .banner dl dt { position: relative; margin-bottom: 15px; font-size: 112.5%;}
#footer .banner dl dt a {
	position: absolute; top: 0; right: 0;
	display: block;
	padding-left: 20px;
	color:#005ca3;
	background: url("../img/arrow_s.png") no-repeat left center;
	background-size: 15px auto;
}
#footer .banner dl dd { overflow: hidden;}
#footer .banner dd+dt { margin-top: 30px;}
#footer .banner dd p { float: left; width:18.4%;}
#footer .banner dd p+p { margin-left: 2%;}
#footer .banner dd p img { 
	width: 100%;
	height: auto;
}

/* ctn add */
/* #footer .banner dd p:nth-child(6) { margin-left: 0;} */
#footer .banner dd p:nth-child(n+6) { padding-top: 20px;}
#footer .banner dd p:nth-child(5n+1) { margin-left:0;}


/* link and copyright */
#footer .f_cont2 { padding: 10px 20px; color: #fff;  background:#005ca3; overflow: hidden;}
#footer .f_nav { float: left; }
#footer .f_nav li { float: left;}
#footer .f_nav li+li { margin-left: 20px;}
#footer .f_nav li a {
	display: block;
	padding-left: 20px;
	color: #fff;
	background: url("../img/arrow_w.png") no-repeat left center;
	background-size: 15px auto;
}
#footer .copy { float: right; font-size: 75%; }
@media only screen and (min-width:800px){
	#footer .banner dl dt a:hover {opacity: 0.7;}
	#footer .add .tel_list a:hover {opacity: 0.7;}
	#footer .f_nav li a:hover {opacity: 0.7;}
}
@media only screen and (max-width:1100px){
	#footer { padding-left:0; }
	#footer .f_cont1 { padding: 50px 0 50px;}

	/* address */
	#footer .add { position:static; margin-bottom: 50px; float:none; width:100%; }
	#footer .add .map { display: none;}
	#footer .add .logo {
		margin:0 auto 20px;
		width:170px; height:30px;
		background-size: 100% auto;
	}
	#footer .add p { font-size: 87.5%; text-align: center; line-height: 180%;}
	#footer .add .tel_list { position: static; margin:20px auto 0; width: 210px; }
	#footer .popu { clear: both; float:none; margin:0 auto 50px; width: 96%; overflow: hidden;}
	#footer .popu dt { margin: 1% 0;}
	#footer .popu dd p { margin: 1% 0; width:49%;}
	#footer .popu dd p+p { margin-left: 2%;}
	#footer .popu dd p:nth-child(2n+1) { margin-left:0;}

	/* banner */
	#footer .banner { padding: 50px 0;  font-size: 87.5%;}
	#footer .banner dd p { width:49%; margin-bottom: 2%;}
	#footer .banner dd p+p { margin-left: 2%;}
	#footer .banner dd p:nth-child(2n+1) { margin-left:0;}
	#footer .banner dd p img { width: 100%; height: auto;}

	/* link and copyright */
	#footer .f_cont2 { clear: both; padding:0; width: 100%; }
	#footer .f_nav { float: none; margin:0 auto; width: 96%; border: 1px solid rgba(0,92,163,0.20); overflow: hidden;}
	#footer .f_nav li { float: left; margin: 0 !important; width:50%;}
	#footer .f_nav li:nth-child(1),
	#footer .f_nav li:nth-child(2) { border-bottom: 1px solid rgba(0,92,163,0.20);}
	#footer .f_nav li+li { border-left: 1px solid rgba(0,92,163,0.20);}
	#footer .f_nav li+li { border-left: 1px solid rgba(0,92,163,0.20);}
	#footer .f_nav li:nth-child(2n+1){ border-left:none;}
	#footer .f_nav li a {
		display: block;
		padding: 10px;
		font-size: 87.5%;
		color: #005ca3;
		text-decoration:underline;
		background:none;
	}
	#footer .copy { float: none;  padding: 10px; text-align:center; background: #005ca3;}	
	#footer .f_cont2 .f_nav { display: none;}
}


/*====================================================================================================
  FIX CONTENT
====================================================================================================*/
#page,
#page a { display:block; width:70px; height:145px;}
#page { position: fixed; bottom:40px; right:20px; z-index: 999999; transition: .3s;}
#page a { text-indent: -9999px; background: url(../img/page_top.png) no-repeat; background-size: 100% auto;}
@media only screen and (min-width:800px){
	#page:hover { bottom:40px; opacity: 0.7;}
}
@media only screen and (max-width:800px){
	#page,
	#page a { display:block; width:50px; height:110px;}
	#page a { background-size: 100% auto;}
}


/*====================================================================================================
  COLOR eto..
====================================================================================================*/
.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: #68ad70;}
.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;}


/*====================================================================================================
  CTN add..
====================================================================================================*/
.hide, 
.disnon {
	display: none;
}

@media print {
	#header,
	#footer {
		display:none
	}
	#content {
		padding-left: 0px;
	}
}