@charset "utf-8";
/* CSS Document */

*{ margin:0; padding:0}
img{vertical-align: bottom;}
@media screen and (min-width: 1127px),screen and (min-height: 875px) {
html, body, #wrapper{ height:100%; }
body > #wrapper{ height:auto; height:100%;}
}
@media screen and (max-width: 1128px),screen and (max-height: 876px){
body > #wrapper{ height:722px;}
}
@media screen and (max-width: 1010px) {
	body > #wrapper{ height: auto;}
	img { max-width: 100%; margin: 0; padding: 0; vertical-align: bottom; height: auto;}
	/* PC指定を隠す */
	.pc_none{ display:none;}
	.br-sp { display:none; }
}
body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height:1.6em;
	background-color: #f7f7f7;
	font-size: 16px;
	color: #111111
}
a{ text-decoration:none; color:#111111}
a img{ border:none;}

a.hover:hover img{
filter: alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.8; }

h1{ margin:0; padding:0;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

.clearfix:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;
}
 
.clearfix { display: inline-table; }  

/* Hides from IE-mac \*/  
* html .clearfix { height: 1%; }  
.clearfix { display: block; }  
/* End hide from IE-mac */
.br::before { content: "\A" ; white-space: pre ;}
@media screen and (max-width: 1010px) {
	iframe { width: 100%;}
}

header{ background-color:#555555; }

@media screen and (min-width: 1011px) {
	
	header{ height:70px;}
		
}

@media screen and (max-width: 1010px) {
/* 480pxまでの幅の場合に適応される */
	header, footer{ min-width:0px !important; width:auto!important;}	
	h2{ font-size:140%!important; }
}


/* Medium only */
@media screen and (min-width: 640px) and (max-width: 1010px) {
	
	header{ height:65px;}
	
}

/* 640px以下 */
@media screen and (max-width: 640px) {
	
	header{ height:55px;}	
}



#nav{ width:930px; margin:0 auto;}
#nav ul{ padding:10px 0; margin:0 auto;height: 50px;}
#nav ul li{ float:left; margin-left:45px; list-style:none}
#nav ul li:first-child{ margin:0 25px 0 0;}
/*#nav ul li:last-child{ margin-left:0}*/
#nav ul li a{ display:block;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
#nav ul li a:hover,#nav ul li.active a{
	filter: alpha(opacity=60);
    -moz-opacity:0.60;
    opacity:0.60;
}
#nav ul li.logo a{
	width: 260px;
	height: 50px;
	background-image: url(../images/logo.jpg);
	background-position: center center;
	background-repeat:no-repeat
}
#nav ul li.con a{
	background-image: url(../images/b_consulting.png);
	background-repeat: no-repeat;
	background-position: center right;
	width: 120px;
	height: 50px;
}
#nav ul li.learn a{
	background-image: url(../images/b_learning.png);
	background-repeat: no-repeat;
	background-position: center right;
	width: 105px;
	height: 50px;
}
#nav ul li.request a{
	background-image: url(../images/b_request.png);
	background-repeat: no-repeat;
	background-position: center right;
	width: 135px;
	height: 50px;
}
#nav ul li.get a{
	background-image: url(../images/b_getting.png);
	background-repeat: no-repeat;
	background-position: center right;
	width: 105px;
	height: 50px;
}
/* ↓PCでは非表示 */
.menu, .sp_logo, .toggle, .sp_tel, .sp_make, .sa_btn, 
.sp_main, .sp_sub_text, .parent, .bread_sp, .sub_nav_icon, 
.sub_nav_icon-2, .btn_estimate, .sub_caption, .seminar_chideji, #wrapper .util_txt-1, h1.information_title, h1.information_title-2, .sp_img{ display:none;}



/* Medium only */
@media screen and (min-width: 640px) and (max-width: 1010px) {
	
.tablet_block{ display:block; }
.tablet_none{ display:none; }

	
#sticky-head{
	height:65px;
}
	
.sp_logo{ width:250px;　}

.toggle {
	position: fixed;
	width: 60px;
	height: 24px;
	top:20px;
	right:5px;}

}

/* 640px以下 */
@media screen and (max-width: 640px) {

.tablet_block{ display:none; }
.tablet_none{ display:block; }

.sp_logo{ width:210px;}

#sticky-head{
	height:55px;
}

.toggle {
	position: fixed;
	width: 50px;
	height: 23px;
	top:16px;
	right:5px;}

}



@media screen and (max-width: 1010px) {
/* 480pxまでの幅の場合に適応される */
.sprt_content{ max-width:480px; margin:0 auto; }
.sprt_content .banner{ margin:15px auto;}


#sticky-head{
	display:block;
	position:fixed;
	width:100%;
	top:0;
	left:0;
	right: 0;
	z-index: 99999;
	background-color:#555555;}
.sp_logo{ display:block; padding:8px 0 0 8px;}
.open .menu{
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: visible;
    opacity: 1;}
/* ======== ハンバーガー ======== */
.toggle,
.toggle span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
	z-index:1;}
/*.toggle {
	position: fixed;
	width: 50px;
	height: 23px;
	top:16px;
	right:5px;}*/
.toggle span {
	position: absolute;
	left: 0;
	width: 40px;
	height: 3px;
	background-color: #FFFFFF;}
.toggle span:nth-of-type(1) { top: 0;}
.toggle span:nth-of-type(2) { top: 10px;}
.toggle span:nth-of-type(3) { bottom: 0;}
.toggle.active span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);}
.toggle.active span:nth-of-type(2) { opacity: 0;}
.toggle.active span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);}
/*-----モーダルウィンドウのスタイル-----*/
.menu {
    position: fixed;
    display: table;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.8);
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: hidden;
    opacity: 0;}
.menu ul {
    display: table-cell;
    vertical-align: middle;}
.menu li {	
    width: 300px;
    height: 80px;
    line-height: 80px;
    margin: 0 auto;
    text-align: center;
	list-style-type:none;}
.menu li a {
    display: block;
    font-size: 125%;
    color: #fff;
	text-decoration:none;}
.menu li a:hover { color: #999;}
/*-----buttonタグはリセットしてから独自CSSを当てる-----*/
button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;}
/* ======== メニューが開いている間はスクロールを固定する ======== */
.fixed {
	position: fixed;
	width: 100%;
	height: 100%;}
}
/*---------------------------*/

section .flexslider{ position: relative; z-index:1}

@media screen and (min-width: 1127px) {
	section.top{ width:100%; overflow:hidden;height:auto; height:100%;}
	section .flexslider{ max-width:1300px; margin:0 auto; height:auto; height:100%;}
	footer.top{position: relative; z-index:9999;}	
}
@media screen and (max-width: 1127px),screen and (max-height: 875px){
	section.top{width:1127px; margin:0 auto; overflow:hidden;}
	section .flexslider{width:1010px; margin:0 auto;}
	footer.top{position: relative; z-index:9999; bottom:-100px}
	section .flex-direction-nav a { width: 60px; height: 140px;}
	.flex-direction-nav a.flex-prev {background-size:20px 60px;background-position: 15px 50%!important;}
	.flex-direction-nav a.flex-next { background-size:20px 60px;background-position: 20px 50%!important;}
}
@media screen and (max-width: 1126px),screen and (max-height: 874px){
	footer.top{ z-index:1;position: static;}
	section.top{ height:652px;z-index:1;position: static;}
	section .flexslider{width:930px; margin:0 auto;height:642px;z-index:1;}
	section .flex-direction-nav a { width: 60px; height: 140px;}
	.flex-direction-nav a.flex-prev { background-size:20px 60px;background-position: 15px 50%!important;}
	.flex-direction-nav a.flex-next { background-size:20px 60px;background-position: 20px 50%!important;}
}

footer{ background-color:#999999; text-align:center; padding:20px 0 0; color:#FFFFFF; /*min-width:1127px;*/}
@media screen and (max-width: 1010px) {
/* 480pxまでの幅の場合に適応される*/
	section .flexslider{ width:auto !important; height: 100%;}
	section .flex-direction-nav a { width: 30px; height: 55px;}
	.flex-direction-nav a.flex-prev { background-size:13px 30px;background-position: 8px 48%!important;}
	.flex-direction-nav a.flex-next { background-size:13px 30px;background-position: 9px 48%!important;}

	section.top{ min-width:0px !important; width:auto !important; position:relative; height:100%;}
	.top .sp_main{ display:block; position:relative; min-height:100%; height: auto !important; height:100%; max-width:670px; margin:0 auto; }
	.top .sp_banner{ margin:15px; display:block;}
	
	h1.sprt_ttl {
	margin:0 0 20px 0;
	padding:15px 0 15px 0;
	text-align: center;
	font-size:105%;
	background-color:#777777;
	color:#FFFFFF;
	}
	h1.sprt_ttl span {
	display: block;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-weight:200;
	font-size:85%;
	}
	footer{ float: none; height: auto; text-align: left; padding:0 !important;}		
	footer ul li{ display: block !important; padding:0 !important;}
	footer ul li a{ display: block; padding: 20px 10px 20px 10px; border-bottom: 1px solid #7F7F7F; box-sizing: border-box; height: 60px;}
	footer ul li:before{ display:none;}
	footer ul li:last-child:after{ display: none;}
	.dogleg{
		position: relative;
		padding-left: 20px;}
	.dogleg::before{
		content: '';
		width: 10px;
		height: 10px;
		border: 0px;
		border-top: solid 2px #FFFFFF;
		border-right: solid 2px #FFFFFF;
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		position: absolute;
		top: 50%;
		right:25px;
		margin-top: -5px;}
}
footer ul li{ display: inline-block; list-style:none; padding-left:15px}
footer ul li a{ color:#FFFFFF;}
footer ul li a:hover{ text-decoration:underline}
footer ul li:before { content: '│'; padding-right:15px;}
footer ul li:last-child:after{content: '│'; padding-left:15px;} 
.copyright{ padding:15px 0;}
@media screen and (max-width: 1010px) {
/* 480pxまでの幅の場合に適応される */
.sp_img{ display:block;}
	main { display: flex; flex-wrap: wrap;}
	main div.sprt_box { width: calc(50% - 10px); margin: 5px 5px 45px 5px;}
	main div.sprt_box img{ width:90%; display:block; margin:0 auto;}
	main h1{ font-size:110%; text-align:center; padding:10px 0 10px 0;}
	main ul{ font-size:85%; width:80%; margin:0 auto; position: relative; text-align:left; list-style-position:inside; list-style-image: url(mark.gif);}
	main ul li{ list-style-type:none;}
	
	.more_btn { width: 82%; margin: 10px auto; overflow: hidden; text-decoration: inherit;}
	.more_btn .btn {
		width:100%;
		display:block;
		background: #333333;
		padding:8px 0 8px 0;
		color: #FFFFFF;
		font-size: 14px;
		text-decoration: none;
		text-align:center;
	}
	.copyright{ font-size: 75%; text-align: center;}
}