@charset "utf-8";
/* reset
--------------------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,a,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}mark{background-color:#ff9;color:#f66;font-style:italic;font-weight:bold}del{text-decoration: line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}

/* common
--------------------------------------------------*/
body{
	color:#333;
	line-height:140%;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3","メイリオ", Meiryo, Osaka,"ＭＳ Ｐゴシック","MS P Gothic", sans-serif;
	background:#fefefe;
	min-width:320px;
	-webkit-text-size-adjust:100%;
}

img{vertical-align:bottom;font-size:0;line-height:0}
a{overflow:hidden;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
ul,ul li{list-style:none}
.none{display:none}
.left{float:left}
.right{float:right}
.clear{clear:both}
.clearfix{zoom:100%}
.clearfix:after{content:"";clear:both;height:0;display:block;visibility:hidden}
.relative{position:relative}
.fixed{position:fixed;top:0;left:0;z-index:1000}
.box{-webkit-box-sizing:border-box;box-sizing:border-box}
input,textarea,button{font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3","メイリオ", Meiryo, Osaka,"ＭＳ Ｐゴシック","MS P Gothic", sans-serif;font-size:16px}
input:focus,textarea:focus,button:focus{outline:none}
input,textarea,select{vertical-align:middle;outline:none}
.i_100 img,.w100{width:100%;height:auto}

#menu_btn{display:none}
.m_1000{margin:0 auto;max-width:1000px}
.shadow{box-shadow:0 0 5px 0 rgba(0,0,0,.75)}
#header_logo a,#footer_logo a{display:block}

/* header
--------------------------------------------------*/
#header{
	position:fixed;
	top:0;
	left:0;
	right:0;
	width:100%;
	z-index:100;
}
.header{
	max-width:100%;
	height:70px;
	background:#fff;
}

/* menu
--------------------------------------------------*/
#header_logo{
	margin-top:5px;
	padding:0 40px;
	width:170px;
	border-right:1px solid #ccc;
}
#header_logo,#header_inner ul li{float:left}
#header_inner ul{float:right}
#header_inner ul li{
	padding:23px 50px 0 0;
}
#header_inner ul li a{
	display:block;
	height:28px;
	color:#333;
	text-decoration:none;
}
#header_inner ul li a:after{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:3px;
	background:#39f;
	opacity:0;
}

#header_inner ul li a:hover{color:#36c}
.current{color:#36c !important}
.current:after{opacity:1 !important}

/* container
--------------------------------------------------*/
.font-sm{font-family:"ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}

/* content
----------------------------------------*/
#top_content_title{
	padding-top:90px;
	height:220px;
	text-align:center;
	color:#fff;
	background:fixed 50% no-repeat;
	background-size:cover;
}
#top_content_title h1{
	font-size:24px;
	margin-bottom:50px;
	padding-top:35px;
}
#top_content_title h2{
	font-size:24px;
	padding:0 60px;
}

.under_bar{
	position:absolute;
	bottom:-5px;
	left:0;
	width:100%;
	height:45px;
	overflow:hidden
}
.under_bar span{
	display:block;
	width:50%;
	height:100%;
	background:#fefefe
}
.under_bar span:first-child{margin-left:-45px}
.under_bar span:last-child{margin-right:-45px}
.under_bar span:first-child:after,.under_bar span:last-child:after{content:"";position:absolute;top:-5px;width:0;height:0;border:40px solid transparent}
.under_bar span:first-child:after{right:-105px;border-left:70px solid #fefefe}
.under_bar span:last-child:after{left:-105px;border-right:70px solid #fefefe}

/* footer
--------------------------------------------------*/
#footer{border-top:5px solid #36c;background:#fff}
#footer_inner{padding:50px 0 70px;text-align:center}
#footer_logo{width:220px;margin:0 auto 50px;padding:0 3px 0 57px}
#footer_inner ul li{display:inline-block}
#footer_inner ul li a{
	padding:0 10px;
	font-size:14px;
	color:#333;
	text-decoration:none;
	-webkit-transition:color .3s;transition:color .3s
}
#footer_inner ul li .current{color:#333 !important}
#footer_inner ul li a:hover,#footer_inner ul li .current:hover{color:#39f !important}
#footer_contact{
	display:block;
	margin:50px auto 0;
	width:200px;
	height:50px;
	line-height:55px;
	color:#36c;
	text-decoration:none;
	border:2px solid #36c;
	background:#f9feff;
	-webkit-transition:background .3s;transition:background .3s
}
#footer_contact:after{content:"";display:block;position:absolute;right:2px;bottom:2px;width:0;height:0;border:6px solid transparent;border-bottom:6px solid #36c;border-right:6px solid #36c}
#footer_contact:hover{background:#e5fbff}
#footer small{display:block;height:50px;line-height:50px;text-align:center;color:#fff;font-size:14px;background:#36c}

/* animation
--------------------------------------------------*/
body{-webkit-animation:FadeIn 2.5s;animation:FadeIn 2.5s}
@-webkit-keyframes FadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes FadeIn{0%{opacity:0}100%{opacity:1}}
/*header*/
#header{-webkit-animation:SlideIn 1s ease 1s both;animation:SlideIn 1s ease 1s both}
@-webkit-keyframes SlideIn{0%{margin-top:-100px}100%{margin-top:0}}
@keyframes SlideIn{0%{margin-top:-100px}100%{margin-top:0}}
/*new*/
.blinking{-webkit-animation:blink 2s ease 0s infinite normal;animation:blink 2s ease 0s infinite normal}
@-webkit-keyframes blink{0%{opacity:0;-webkit-animation-timing-function:step-end}25%,100%{opacity:1}}
@keyframes blink{0%{opacity:0;animation-timing-function:step-end}25%,100%{opacity:1}}

/* Media
--------------------------------------------------*/
@media screen and (max-width:1024px){#top_content_title{background-attachment:scroll;background-position:50% 0;background-size:100% auto}}
@media screen and (max-width:950px){
	#header{-webkit-animation:none;animation:none}
	.header{height:70px;-webkit-transition:background .3s ease;transition:background .3s ease}
	#header_logo{margin-top:5px;border-right:0;-webkit-transition:none;transition:none}
	#header_inner ul{width:100%;height:100%}
	#header_inner ul li{-webkit-transition:none;transition:none}
	#header_inner ul li{
		float:none;
		padding:0;
		text-align:center;
		height:20%;
		line-height:2.3
	}
	#header_inner ul li a{
		height:auto;
		display:inline;
		color:#fff;
		font-size:40px;
		font-weight:bold
	}
	#header_inner ul li a:hover{color:#fff}
	.current{color:#9cf !important}
/*menu wrapper----------*/
	.g_nav_w{
		box-sizing:border-box;
		padding:70px 0 0;
		visibility:hidden;
		position:fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,.75);
		opacity:0
	}
	.open_mc_w{visibility:visible;opacity:1}
	.fade_trans {-webkit-transition:visibility .3s , opacity .3s;transition:visibility .3s , opacity .3s}
/*menu button----------*/
	#menu_btn{
		display:block;
		position:absolute;
		top:0;
		right:40px;
		height:70px;
		width:70px;
		z-index:100
	}
	.menu_btn span,.menu_btn span:before,.menu_btn span:after{
		display:block;
		position:absolute;
		top:50%;
		width:50px;
		height:4px;
		border-radius:4px;
		background:#000
	}
	.menu_btn span{left:10px;margin-top:-2px}
	.menu_btn span:before,.menu_btn span:after{content:"";width:50px;-webkit-transition:all .3s;transition:all .3s}
	.menu_btn span:before{margin-top:13px}
	.menu_btn span:after{margin-top:-17px}
	.menu_btn2 span:before,.menu_btn2 span:after{margin-top:-2px;background:#fff}
	.menu_btn2 span:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}
	.menu_btn2 span:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
	.menu_btn2 #menu_bar{width:0}
	#top_content_title{padding-top:70px;height:200px;background-size:110% auto}
	#top_content_title h1{margin-bottom:30px;padding-top:40px;}
	#top_content_title h2{font-size:20px}
}

@media screen and (max-width:500px){
	#header_logo{padding:0 15px}
	#menu_btn{right:15px}
	#header_inner ul li a{font-size:30px}
	#top_content_title{height:185px;background-size:150% auto}
	#top_content_title h1{margin-bottom:20px}
	#top_content_title h2{font-size:18px}
	#footer_logo{margin-bottom:35px;padding-left:15px}
	#footer_inner .g_nav li{display:block}
	#footer_inner .g_nav li a{
		margin:0 auto;
		padding:10px 0;
		display:block;
		width:200px;
		height:40px;
		line-height:40px;
		font-size:16px;
		border-bottom:1px solid #ccc
	}
	#footer_inner .g_nav li span,#footer small span{display:none}
}