@charset "utf-8";
/*

	Description: initial setting
*/

/*
===== 1: body and base setting ===========================
*/

body {
	font-family:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN,HiraKakuProN-W3","ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
	margin: 0px;
	padding: 0px;
	color:#464646;
	font-size:14px;
	line-height:1.8em;
	letter-spacing:0.01em;
	background:#fff;
	line-break: normal;
	word-break: strict;
}

/* general params
--------------------*/
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{
	margin: 0;
	padding: 0;
	text-align: left;
	display: block;
	
}
table {margin : 0;}
img {
	vertical-align:text-bottom;
}
li { list-style: none; }/* link do not want a dot */

/*
===== 2: link setting ===========================
*/

a{
color:#464646;
text-decoration:underline;
}
a:hover{
color:#464646;
text-decoration:underline;
}
a:hover img{
	opacity:0.6;filter:alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
}
a:focus, *:focus { outline:none; }


/*
===== 3 : boder hover   ===========================
*/

.img_bodereffect {
	position: relative;
	color: #fff;
	outline: none;
	transition: all .3s;
    box-sizing: border-box;
}
.img_bodereffect::before,
.img_bodereffect::after{
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 4px;
	left: 0px;
	z-index: 2;
	content: '';
	transition: all .3s;
    box-sizing: border-box;
}
.img_bodereffect::before {
	border-top: 2px solid #46c8e6;
	border-bottom: 2px solid #46c8e6;
	transform: scale(0, 1);
}
.img_bodereffect::after {
	border-right: 2px solid #46c8e6;
	border-left: 2px solid #46c8e6;
	transform: scale(1, 0);
}
.img_bodereffect:hover::after,
.img_bodereffect:hover::before {
	transform: scale(1);
}


/*
===== 4 : boder hover   ===========================
*/


@font-face {
  font-family: iconfont;
  src: url(../iconfont/iconfont.woff2) format("woff2"), url(../iconfont/iconfont.woff) format("woff")
}

.inner{	width: 1000px;margin: 0 auto;box-sizing: border-box; overflow: hidden;}
.serif_f{font-family: Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', serif;}

.iconfont,
.icon a::before,
.icon a::after{ font-family: iconfont; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;font-style: normal;font-variant: normal;font-weight: 400;text-decoration: none;text-transform: none;speak: none;}

.icon button::before,
.icon button::after{ font-family: iconfont; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;font-style: normal;font-variant: normal;font-weight: 400;text-decoration: none;text-transform: none;speak: none;}

.bx-controls-direction a::before,
.bx-controls-direction a::after{ font-family: iconfont; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;font-style: normal;font-variant: normal;font-weight: 400;text-decoration: none;text-transform: none;speak: none;}

article .color{ background: #46c8e6; color: #fff;}

.icon_01{ background: #46c8e6!important; color: #fff !important;}
.icon_02{ background: #ed5a5a!important; color: #fff !important;}
.icon_03{ background: #95c564!important; color: #fff !important;}
.icon_04{ background: #ee8032!important; color: #fff !important;}
.icon_05{ background: #3c78e4!important; color: #fff !important;}
.icon_06{ background: #ff809e!important; color: #fff !important;}
.icon_07{ background: #3ca88a!important; color: #fff !important;}
.icon_08{ background: #b29400!important; color: #fff !important;}
.icon_09{ background: #923cc6!important; color: #fff !important;}
.icon_10{ background: #5a6e94!important; color: #fff !important;}
.icon_11{ background: #0eb5bf!important; color: #fff !important;}
.icon_12{ background: #f83b15!important; color: #fff !important;}
.icon_13{ background: #039a2a!important; color: #fff !important;}
.icon_14{ background: #f6bc1f!important; color: #fff !important;}
.icon_15{ background: #021dbf!important; color: #fff !important;}
.icon_16{ background: #fa0e46!important; color: #fff !important;}
.icon_17{ background: #284376!important; color: #fff !important;}
.icon_18{ background: #019f22!important; color: #fff !important;}

.icon_01,
.icon_02,
.icon_03,
.icon_04,
.icon_05,
.icon_06,
.icon_07,
.icon_08,
.icon_09,
.icon_10,
.icon_11,
.icon_12,
.icon_13,
.icon_14,
.icon_15,
.icon_16,
.icon_17,
.icon_18{font-family: Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', serif;}


#container{ padding-bottom: 150px;}
#breadcrumbs{ padding: 15px 0; border-bottom: solid 1px #ececec; width: 100%;}
#breadcrumbs li{ display: inline-block; font-size: 12px;}
#breadcrumbs li:after{ content: ">"; padding: 0 0.5em; text-decoration: none;}
#breadcrumbs li:last-child:after{ display: none;}
.main h1{ padding: 70px 0px; font-size: 28px; line-height: 2em;}


/*header*/
header{}
header h1{ width:30.4%; float: left;  padding: 13px 0;}
header h1 img{width: 100%;}
.upnavi{ width: 50%; float: right;}
.upnavi ul{ overflow: hidden; text-align: right;}
.upnavi ul li{ display: inline-block;  margin-right: 20px; font-size: 12px; margin-top: 20px;}
.upnavi ul li:nth-child(3),
.upnavi ul li:nth-child(4){ width: 25px;}
.upnavi ul li:last-child{ margin-right: 0px;}
.upnavi ul li img { width: 100%;}

#gnav{ width: 100%; background: #46c8e6; border-bottom: solid 1px #ececec; }
#gnav ul { display: block; overflow: hidden;}
#gnav ul li{ width: 12.8%; float: left;}
#gnav ul li:nth-child(2),
#gnav ul li:nth-child(7){ width: 18%;}
#gnav ul li a{color: #fff; text-decoration: none; font-size: 16px;  display: block; padding: 15px 0; text-align: center;}
#gnav ul li a:hover{ color:#46c8e6;background: #fff;}

/*footer*/
footer{}
footer .sns{ width: 100%; overflow: hidden; padding: 50px 0 30px 0;}
footer .sns il { display: inline-block; padding-right: 13px;}
footer .sns il.line{ display: none;}
footer .sns .fb_iframe_widget > span {
  vertical-align: baseline !important;
}

.sns ul li{ display: inline-block; vertical-align: text-top}
.sns li{display: inline-block;}
.footer_sitemap { width: 100%; background: #464646; color: #fff; padding: 40px 0;}
.footer_sitemap ul{ float: left; width: 11em; display: block; margin-right:2%;}
.footer_sitemap ul li{}
.footer_sitemap ul li a{ font-size: 12px; text-decoration: none; color: #fff;}
.footer_sitemap ul li a::before{ content:"\e900"; padding-right: 0.5em; font-size: 11px;}

.company{ width:40%; float: right; text-align: right;}
.company h3{ text-align: right; font-size: 24px;}
.company p{ text-align: right; font-size: 12px;}

footer aside{ font-size: 12px; text-align: center; padding: 15px 0;}
footer aside p{ text-align: center;}

footer .pagetopbox{ position: absolute; z-index: 50; margin-top: -25px; left:50%; margin-left: 475px;}
footer .pagetop{ width:50px; background:rgba(239,90,90,1); height: 50px; border-radius:3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;  position: relative; }
footer .pagetop:hover{background:rgba(239,90,90,0.8);}
footer .pagetop a{ text-align: center; vertical-align: middle; display:block; -moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); text-decoration: none; position: absolute;     top: 50%; left: 50%; margin-left: -22px; margin-top: -20px; width: 50px;}
footer .pagetop a::before{content:"\e901"; font-size: 24px; color: #fff;}


/*
		By screen sizesetting
*/

@media screen and (min-width: 1041px) {
    
}
@media screen and (min-width: 769px) {
    header #nav_toggle{display: none !important;}
    .sp_on{ display:none;}
    .sp_on{  visibility: visible;}
    ul#navilist{display: block !important;}
}

@media (max-width: 1070px){
footer .pagetopbox{ position: absolute; z-index: 50; margin-top:0px; left:auto; margin-left:0px; right:20px; margin-top: -50px;}
}

/*@media (max-width: 1020px)*/
@media (max-width: 1040px){

    .main h1{ padding: 70px 20px;}
    .inner{	width: 100%; padding:0 20px; box-sizing: border-box; overflow: hidden;}

}

/*@media (max-width: 1000px)*/

@media (max-width: 1000px){

}
/*@media (max-width: 940px)*/

@media (max-width: 940px){
    
    header{}
    #gnav ul li a{font-size: 14px; padding: 10px 0;}
    
    footer{}
    .footer_sitemap{ width: 100%;}
    .footer_sitemap ul{ width: 20%;}
    .company{ width: 100%; padding-top: 20px;}
}

@media (max-width: 860px){

    #gnav ul li a{font-size: 12px; padding: 8px 0;}
    
}


/*@media (max-width: 768px)*/

@media (max-width: 768px){
    
    .serif_f{font-family:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN,HiraKakuProN-W3","ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;}
    .sp_off{ display: none;}
    .sp_on{ visibility: visible;}
    
    header{}
    header h1{ width: 35%;}
    .upnavi{ display: none;}
    .sp_fix{ border-top: 5px #46c8e6 solid; position: absolute; z-index: 9999; background: #fff; min-height: 57px;}
    
    #gnav{background: #fff; border-bottom: none;}
    #gnav .inner{ width: 100%; padding: 0;}
    #gnav ul { border-top: solid 1px #949494;}
    #gnav ul li{ width: 100%; float: none; border-bottom: solid 1px #949494; overflow: hidden;}
    #gnav ul li:nth-child(2),
    #gnav ul li:nth-child(7){ width: 100%;}
    
    #gnav ul li a{color: #464646; text-decoration: none; font-size: 17px;  display: block; padding: 15px 15px 15px 20px; box-sizing: border-box; text-align:left;}
    #gnav ul li a::after{content:"\e901"; font-size: 20px; color: #46c8e6; vertical-align: middle; text-align: right; display: block; width: 1em; float: right;}
    #gnav ul li a:hover{ color:#fff; background: #46c8e6;}
    #gnav ul li a:hover:after{color: #fff;}
    
    #gnav ul li:last-child a{text-align:center;}
    #gnav ul li:last-child a::after{content:"";}
    #gnav ul li:last-child a::before{ content:"\e902";font-size: 22px; color: #46c8e6; vertical-align: top; font-weight: bold; margin-right: 0.5em;}
    #gnav ul li:last-child a:hover:before{color: #fff;}
    
    ul#navilist{ background: #fff;top:56px; position: absolute; z-index: 9999; display: none;}

    /* Toggle Button */
    #nav_toggle { position: absolute; right: 12px; top: 6px; width: 34px; height: 36px; cursor: pointer; z-index: 10001; padding-top: 10px;}
    #nav_toggle div { position: relative;}
    
    #nav_toggle span { display: block; position: absolute; height: 4px; width: 100%; background: #46c8e6; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; border-radius:3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
    #nav_toggle span:nth-child(1) { top: 0;}
    #nav_toggle span:nth-child(2) { top: 11px;}
    #nav_toggle span:nth-child(3) { top: 22px;}
    #nav_toggle { display: block; }

    .open #nav_toggle span:nth-child(1)
    {top: 11px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg);}
    .open #nav_toggle span:nth-child(2)
    {width: 0;left: 50%;}
    .open #nav_toggle span:nth-child(3)
    { top: 11px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); }
    .open 
    
    #breadcrumbs{ display: none;}
    .main{ margin-top: 0px;}
    .main h1{ background: #46c8e6; padding: 10px 0 10px 20px; margin: 0; margin-bottom: 30px; font-size: 17px; color: #fff; border-top: solid 1px #37bade; border-bottom: solid 1px #37bade;}
    
    #container{padding-top: 50px;}

    
    /*footer*/
    footer{}
    footer .sns{padding: 20px 0 80px 0;}
    footer .sns ul{ text-align: center;}
    footer .sns il.line{ display: inline-block;}

    .footer_sitemap { width: 100%; background: #fff; color: #464646; padding:0;}
    .footer_sitemap .inner{ padding: 0px;}
    .footer_sitemap nav ul:first-child{border-top: solid 1px #949494;}
    .footer_sitemap ul{ float: none; width: 100%; display: block; margin-right:0%;}
    .footer_sitemap ul li{}
    
    .footer_sitemap ul li { width: 100%; float: none; border-bottom: solid 1px #949494; overflow: hidden;}    
    .footer_sitemap ul li a{color: #464646; text-decoration: none; font-size: 17px;  display: block; padding: 15px 15px 15px 20px; box-sizing: border-box; text-align:left;}
    .footer_sitemap ul li a::before{content:""; display: none;}
    .footer_sitemap ul li a::after{content:"\e901"; font-size: 20px; color: #46c8e6; vertical-align: middle; text-align: right; display: block; width: 1em; float: right;}
    .footer_sitemap ul li a:hover{ color:#fff; background: #46c8e6;}
    .footer_sitemap ul li a:hover:after{color: #fff;}
    .footer_sitemap .sp_on{ padding-top: 20px;}
    .footer_sitemap nav.sp_on ul:first-child{text-align: center; border: none;}
    .footer_sitemap .sp_on ul li{ display: inline-block; margin-right: 2em; width: auto; border: none;}
    .footer_sitemap .sp_on ul li:last-child{ margin-right: 0;}
    .footer_sitemap .sp_on ul li a{ display: inline-block; text-decoration: underline; font-size: 12px; padding: 0;}
    .footer_sitemap .sp_on ul li a::after{ display: none;}
    .footer_sitemap .sp_on ul li a:hover{ color: #464646; background: #fff; text-decoration: none;}
    .company{ display: none;}

    footer aside.sp_bg{ background: #464646; padding: 15px 20px; color: #fff;}
    footer aside p{ text-align: center;}


}

/*@media (max-width: 640px)*/

@media (max-width: 640px){

    header h1{ width: 40%;}
}

@media (max-width: 480px){

    header h1{ width: 55%;}
}