/*------------------------------
  共通CSS
------------------------------- */

/* reset.css
------------------------------- */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-style:normal;font-weight: normal;font-size: 12px;}th, td{font-style:normal;font-weight: normal;font-size: 14px;}article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}html{overflow-y: scroll;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}input, textarea{margin: 0;padding: 0;}ol, ul{list-style:none;}table{border-collapse: collapse; border-spacing:0;}caption, th{text-align: left;}a:focus {outline:none;}strong{font-weight:bold;}


h1, h2, h3, a {line-height:1.4em;}
.cont h3,.cont a {line-height:3px;}
a, a:link, a:visited {
color:#1D7B9E;
text-decoration:none;
}
a:hover {text-decoration:underline;}
.clr {clear:both; display:block;}
.left {float:left;}
.right {float:right;}
.center {margin:0 auto;}
.ta_c {text-align:center;}
.ta_l {text-align:left;}
.ta_r {text-align:right;}
.pd10{padding:10px;}
.pd20{padding:20px;}
.red{color:#E74672;}
.fs10{font-size:10px;}
.fs12{font-size:12px;}
.fs16{font-size:16px;}
.fs18{font-size:18px;}

/* Clearfix */
.cf:before,.cf:after{content:"";display:table;}
.cf:after{clear:both;}

iframe{max-width:100%;}
img{vertical-align:bottom; max-width:100%;}
a:hover img{opacity:0.8;transition:opacity 0.4s;}
.pr{display:block;margin:0 0 1em;}
/* .hover,.hover_w,.hover_h{} */
.fixed{position:fixed;}
hr{clear:both;}
.i_block{display:inline-block;}

/* 全体レイアウト
------------------------------- */
body {
background: -webkit-gradient(linear, left top, left bottom, from(#5EC5EA), to(#186bad));
background: -moz-linear-gradient(left,  #5EC5EA,  #186bad);
-pie-background:linear-gradient(left,  #5EC5EA,  #186bad);
background:#f0f0f0;
behavior: url("/js/PIE.htc");
position:relative;
padding:60px 0 0;
color:#111;
line-height:1.6;
font-size:12px;
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic,  Verdana,sans-serif;
}
@media screen and (min-width: 960px) {
body{
background:#f0f0f0 url(../gazou/share/bg.png) no-repeat center -34px;
}
}
.wrapper{
max-width:960px;
margin:0 auto;
clear:both;
}
.main{
width:620px;
float:left;
margin:32px 0 48px;
padding:0 0 0 10px;
}
.side{
width:300px;
float:right;
margin:32px 0 48px;
}
.bg{
background:#fff;
position:relative;
z-index:110;
}

/* ヘッダー設定
------------------------------- */
#header{
background:#f9f9f9;
background-image: -moz-linear-gradient(top, #fff, #f9f9f9);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.0, #f9f9f9));
background-image: linear-gradient(top, #fff, #f9f9f9);
-pie-background:linear-gradient(left,  #fff,  #f9f9f9);
behavior: url(/js/PIE.htc);
border-top:1px solid #5EC5EA;
height:60px;
position:fixed;
width:100%;
top:0;
left:0;
z-index:100;
}
#header h1{
width:634px;
float:right;
text-align:right;
padding:6px 6px 10px 0;
font-size:10px;
color:#666;
}
#h_logo{
width:300px;
padding:6px 0 0 0;
float:left;
}
#h_menu{
width:314px;
padding:0 6px 0 0;
float:right;
text-align:right;
white-space:nowrap;
}
#h_menu:after{
content:"";
display:block;
clear:both;
}
#h_menu li{
display:inline;
white-space:nowrap;
padding:0 0 0 8px;
}
#h_menu #h_menu3{
margin:0;
}
#h_menu li a{
font-size:12px;
color:#555;
}
#h_menu li a:hover{
text-decoration:none;
color:#5EC5EA;
}
#h_menu a:before{
content:"\f0a9";
display:inline-block;
margin:0 3px 0 0;
vertical-align:middle;
font-family:FontAwesome;
font-size:14px;
color:#999;
transition:padding 0.3s,margin 0.3s;
}
#h_menu a:hover:before{
padding:0 0 0 2px;
margin:0 1px 0 0;
}
#btn_menu{
display:none;
}

/* メニュー設定
------------------------------- */
#menu{
border-top:3px solid #f3f3f3;
background:#fff;
position:relative;
z-index:30;
}
#menu li{
float:left;
width:16.666%;
padding:8px 0;
margin:-3px 0 0;
position:relative;
border-top:3px solid transparent;
transition:border 0.6s;
}
#menu li a{
display:block;
padding:10px 0;
text-align:center;
color:#333;
text-decoration:none;
border-left:1px solid #ccc;
font-size:14px;
}
#menu li:last-child a{
border-right:1px solid #ccc;
}
#menu li a span{
display:block;
font-size:10px;
color:#999;
}
#menu li a:hover{
text-decoration:none;
}
#menu li:hover,
.index #menu1,
.news #menu2,
.course #menu3,
.company #menu4,
.history #menu4,
.access #menu4,
/*
.privacy #menu4,
.form #menu4,
*/
.it_training #menu5,
.humanskill #menu5,
.production #menu5,
.images #menu5,
.web3ds #menu5,
.movies #menu5,
.contract #menu5,
.recruit #menu6{
border-top:3px solid #5EC5EA;
}
#menu li:before{
content:"";
display:inline-block;
border:3px solid transparent;
border-top:6px solid transparent;
position:absolute;
top:3px;
left:50%;
margin:-3px;
transition:border-top 0.6s;
}
#menu li:hover:before,
.index #menu1:before,
.news #menu2:before,
.course #menu3:before,
.company #menu4:before,
.history #menu4:before,
.access #menu4:before,
/*
.privacy #menu4:before,
.form #menu4:before,
*/
.it_training #menu5:before,
.humanskill #menu5:before,
.production #menu5:before,
.images #menu5:before,
.web3ds #menu5:before,
.movies #menu5:before,
.contract #menu5:before,
.recruit #menu6:before{
border-top:6px solid #5EC5EA;
}

#menu .submenu{
padding:10px 0 0;
position:absolute;
width:100%;
z-index:100;
height:0;
overflow:hidden;
opacity:0;
transition:opacity 0.4s;
}
#menu li:hover .submenu{
opacity:1;
height:auto;
}
#menu .submenu li{
background:#f0f0f0;
float:none;
padding:0;
width:auto;
border-top:1px solid #fff;
}
#menu .submenu li:hover{
border-top:1px solid #eee;
}
#menu .submenu a{
display:block;
color:#333;
padding:18px 0;
font-size:12px;
border:none;
position:relative;
z-index:120;
transition:background 0.4s;
}
#menu .submenu a:hover{
background:#5EC5EA;
color:#fff;
}
#menu .submenu li:last-child a{
border-right:none;
}
#menu.fixed{
position:fixed;
width:100%;
top:60px;
z-index:12;
}
#menu.fixed li{
padding:0px 0;
}
#menu li a{
display:block;
padding:6px 0;
}

/* サイド設定
------------------------------- */
.side section{
margin:0 0 24px;
}
.side aside{
margin:0 0 24px;
padding:0 5px 16px;
position:relative;
}
.side h2{
padding:5px 10px 3px;
margin:0 0 10px;
font-size:16px;
color:#333;
border-left:5px solid #5EC5EA;
}
.side h2 span{
padding:0 0 0 6px;
font-size:10px;
color:#666;
font-weight:bold;
}
#s_info{
margin:0 0 32px;
padding:0;
}
#s_info ul{
border-top:1px dotted #ccc;
}
#s_info li{
margin:0 0 16px;
}
#link,#auth{
background:#f3f3f3;
}
#link li{
margin:0 0 12px;
text-align:center;
}
#link a,#auth a{
display:block;
border:1px solid #fff;
transition:border 0.4s;
}
#link a:hover,#auth a:hover{
border:1px solid #1D7B9E;
}
#link a:hover img,#auth a:hover img{
opacity:1;
}
#auth{
padding:0 0 16px 5px;
}
#auth ul:after,#bnr:after{
content:"";
display:block;
clear:both;
}
#auth li{
background:#fff;
width:142px;
margin:0 5px 8px 0;
float:left;
text-align:center;
}
#auth li img{
width:140px;
}
#bnr{
padding:0 0 0 5px;
}
#bnr li{
width:146px;
margin:0 0 8px 0;
float:left;
text-align:center;
}
#bnr li img{
width:130px;
}

/* フッター設定
------------------------------- */
#footer{
/*background:#1D7B9E;*/
background:#f0f0f0;
clear:both;
padding:0;
}
#f_menu{
/* text-align:center; */
background:#fafafa;
padding:6px 0;
margin:0 auto 20px;
-webkit-border-radius: 16px;
border-radius: 16px;
}
#f_menu li{
display:inline;
float:left;
}
#f_menu li a{
display:inline-block;
font-size:12px;
color:#555;
margin:0 10px;
}
#f_menu li a:hover{
text-decoration:none;
color:#5EC5EA;
}
#f_menu a:before{
content:"\f0a9";
display:inline-block;
margin:0 3px 0 0;
vertical-align:middle;
font-family:FontAwesome;
font-size:14px;
color:#999;
transition:padding 0.3s,margin 0.3s;
}
#f_menu a:hover:before{
padding:0 0 0 2px;
margin:0 1px 0 0;
}
#btn_menu{
display:none;
}
#f_info{
margin:0 auto 36px;
}
/* 別府非表示（2024_03_06） */


#f_info{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1em;
    
    justify-content: center;
    }
#f_info::before,
#f_info::after{
display:none;
}
/*end 別府非表示（2024_03_06） */


#f_info section{
background:#fcfcfc;
width:310px;
position:relative;
padding:0 0 10px;
}
#f_info h2{

    grid-column: 1/-1;
    grid-row: 1;    
padding:16px 0;
border-bottom:1px solid #eee;
margin:0 0 24px;
font-size:16px;
color:#666;
text-align:center;
}
#f_fukuoka{
    justify-self: end;
}
#f_oita{
float:left;
}


#f_beppu{
float:right;
}
/* 非表示(2024_03_06)  */
#f_beppu{
display:none;
}

#f_info h3{
color:#000;
font-size:16px;
margin:0 5px 8px;
padding:12px 4px 8px 12px;
border-bottom:1px dotted #ccc;
}
#f_info h3:before{
content:"";
display:block;
border:5px solid transparent;
border-top:5px solid #5EC5EA;
border-left:5px solid #5EC5EA;
position:absolute;
top:0;
left:0px;
}
/* 大分タイトル変更(2024_03_14) */
#f_oita h3 {
    font-size: 0;
    height: 21px;
    position: relative;
}
#f_oita h3:before {
    left: -5px;
}
#f_oita h3::after {
    font-size: 16px;
    content: "大分校｜大分地区オフィス";
    position: absolute;
    top: 50%;
}
/* 大分タイトル変更(2024_03_14)ここまで */
#f_info .add,#f_info .tel{
color:#333;
font-size:12px;
line-height:1.4;
padding:6px 6px 6px 24px;
margin:0 5px;
position:relative;
border-bottom:1px dotted #ccc;
}
#f_info p span{
display:inline-block;
/* font-size:10px; */
}
#f_info .img{
margin:0 5px 12px;
}
#f_info p:before{
content:"";
display:inline-block;
font-family:FontAwesome;
font-size:16px;
position:absolute;
top:4px;
left:8px;
}
#f_info .add:before{
content:"\f0f7";
}
#f_info .tel:before{
content:"\f095";
}
#f_info .post{
margin:0 10px 0 0;
}
#f_info .map a{
display:block;
color:#fff;
background:#5EC5EA;
margin:8px 24px;
padding:8px;
text-align:center;
-webkit-border-radius: 6px;
border-radius: 6px;
behavior: url("/js/PIE.htc");
position:relative;
border:1px solid transparent;
transition:border 0.6s;
}
#f_info .map a:hover{
text-decoration:none;
opacity:0.8;
border:1px solid #fff;
}
#f_info .map a:before{
content:"\f041";
display:inline-block;
font-family:FontAwesome;
vertical-align:middle;
margin:0 6px 0 0;
font-size:18px;
}
#f_info .map span{
font-size:10px;
}
#f_info .call{
display:none;
}
#copy{
background:#5EC5EA;
clear:both;
padding:10px;
text-align:center;
color:#fff;
font-size:10px;
}

#pagetop{
position:fixed;
right:10px;
bottom:50px;
z-index:120;
font-size:12px;
}
#pagetop a{
background:#5EC5EA;
display:block;
width:64px;
height:64px;
line-height:64px;
text-align:center;
color:#fff;
text-decoration:none;
-webkit-border-radius: 4px;
border-radius: 4px;
behavior: url(/js/PIE.htc);
}
#pagetop:before{
content:"";
display:inline-block;
border:3px solid transparent;
border-bottom:6px solid #fff;
position:absolute;
top:8px;
left:50%;
margin:-3px;
}

@media screen and (max-width: 960px) {
#header h1{
width:314px;
}
.main{
float:none;
margin:32px auto 48px;
padding:0 10px;
}
.side{
width:630px;
float:none;
margin:32px auto 48px;
}
#s_info{
width:300px;
float:left;
}
#link,#auth{
width:300px;
float:right;
}
#bnr{
clear:both;
}
#f_info section{
width:auto;
}
#f_fukuoka{
width:auto;
}
#f_info h2{
padding:8px 0;
border-bottom:1px solid #eee;
margin:0 0 16px;
font-size:16px;
}
#f_info h3{
font-size:12px;
margin:0 0 12px;
padding:10px 4px 10px 8px;
}
/* 大分タイトル変更(2024_03_14) */
#f_oita h3 {
    font-size: 0;
    height: 18px;
}
#f_oita h3:before {
    left: 0px;
}
#f_oita h3::after {
    font-size: 12px;
}
/* 大分タイトル変更(2024_03_14)ここまで */
#f_info .add,#f_info .tel{
font-size:10px;
letter-spacing:-0.0001em;
}
#f_info .add span{
display:inline;
}
#f_info .add .post{
display:block;
}

}/* 960px */

@media screen and (max-width: 640px) {
#h_logo{
width:240px;
}
#h_menu{
clear:none;
}
#h_menu li a{
font-size:10px;
color:#555;
}
#menu li a{
font-size:12px;
}
#menu .submenu a{
font-size:10px;
}
.side{
width:98%;
}
#s_info{
width:48%;
float:left;
}
#link,#auth{
width:48%;
float:right;
}
#auth li{
width:auto;
float:none;
}
#f_info{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-content: center;
    gap: 1em;
}
#f_info section{
width:auto;
margin:0 auto 16px;
}
#f_fukuoka,#f_oita,#f_beppu{
    justify-self: center;
}
#pagetop{
display:none;
z-index:-1;
}
}/* 640px */
@media screen and (max-width: 580px) {
#h_logo{
width:200px;
}
#header h1{
width:270px;
white-space:nowrap;
}
#h_menu{
width:270px;
white-space:nowrap;
}
}/* 580px */
@media screen and (min-width: 481px) {
#menu{
height:auto !important;
display:block !important;
opacity:1.0 !important;
}
#h_menu{
height:auto !important;
display:block !important;
opacity:1.0 !important;
}
}
@media screen and (max-width: 480px) {

body{
padding:56px 0 0;
}
#header{
z-index:140;
height:54px;
}
#h_logo{
width:160px;
margin:0 0 6px;
}
#header h1{
padding:4px 0 2px 2%;
letter-spacing:-0.0001em;
text-align:left;
width:98%;
}
#h_menu{
background:#f9f9f9;
width:auto;
float:none;
display:none;
opacity:0;
clear:both;
height:32px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
overflow:hidden;
}
#h_menu li{
float:left;
margin:0;
padding:0;
}
#h_menu #h_menu1{width:30%;}
#h_menu #h_menu2{width:30%;}
#h_menu #h_menu3{width:40%;}
#h_menu li a{
display:block;
font-size:12px;
line-height:32px;
padding:0;
color:#555;
text-align:center;
}
#h_logo{
padding:0 0 0 6px;
}
#btn_menu{
display:block;
cursor:pointer;
}
#btn_menu span{
display:block;
text-align:center;
position:absolute;
z-index:200;
top:4px;
right:10px;
font-size:8px;
color:#5EC5EA;
}
#btn_menu span:before{
content:"\f0c9";
display:block;
font-family:FontAwesome;
font-size:32px;
line-height:1;
}
.main{
padding:0;
}
#s_info{
width:auto;
float:none;
margin:0 10px 24px;
text-align:center;
}
#link,#auth{
width:auto;
float:none;
}
#link ul,#auth ul{
text-align:center;
}
#menu{
display:none;
opacity:0;
border-top:none;
position:fixed;
top:87px;
left:0;
z-index:100;
width:100%;
background:rgba(255,255,255,1);
}
#menu li{
float:none;
width:auto;
padding:0;
margin:0;
position:relative;
border-top:3px solid transparent;
transition:border 0.6s;
}
#menu li a{
display:block;
padding:6px 0 6px 20px;
text-align:left;
color:#333;
text-decoration:none;
border-left:none;
border-bottom:1px solid #eee;
font-size:14px;
}
#menu li:last-child a{
border-right:none;
}
#menu li a span{
display:inline-block;
padding:0 0 0 4px;
font-size:10px;
color:#999;
}
#menu li:before{
display:none;
}
#menu li:hover:before{
border-top:none;
}
#menu .submenu{
padding:0;
position:static;
width:100%;
display:block !important;
opacity:1.0 !important;
height:auto !important;
}
#menu .submenu li{
background:#f0f0f0;
float:none;
padding:0;
width:auto;
border-top:1px solid #fff;
}
#menu .submenu li:hover{
border-top:1px solid #eee;
}
#menu .submenu a{
display:block;
color:#333;
padding:8px 0 8px 40px;
font-size:12px;
border:none;
position:static;
z-index:120;
}
#menu .submenu a:hover{
background:#5EC5EA;
color:#fff;
}
#menu .submenu li:last-child a{
border-right:none;
}
#auth li{
width:48%;
float:left;
margin:0 2% 8px 0;
}
#f_menu ul:after{
content:"";
display:block;
clear:both;
}
#f_menu li{
display:block;
width:33.333%;
float:left;
padding:6px 0;
}
#f_menu li a{
display:block;
padding:6px 0;
}
#f_info .call{
display:block;
}
#f_info .call a{
display:block;
color:#fff;
background:#5EC5EA;
margin:8px 24px;
padding:8px;
text-align:center;
-webkit-border-radius: 6px;
border-radius: 6px;
border:1px solid transparent;
}
#f_info .call a:before{
content:"\f10b";
display:inline-block;
font-family:FontAwesome;
vertical-align:middle;
margin:0 6px 0 0;
font-size:18px;
}
#f_info h3{
font-size:18px;
margin:0 5px 8px;
padding:12px 4px 8px 12px;
}
/* 大分タイトル変更(2024_03_14) */
#f_oita h3 {
    font-size: 0;
    height: 25px;
}
#f_oita h3::before {
    left: -5px;
}
#f_oita h3::after {
    font-size: 18px;
}
/* 大分タイトル変更(2024_03_14)ここまで */
#f_info .contact{
text-align:center;
margin:12px 0;
}
#f_info .map,#f_info .call{
width:48%;
display:inline-block;
}
#f_info .map a,#f_info .call a{
margin:0;
}
#f_info .map span{
display:none;
}

}/* 480px */

@media screen and (max-width: 380px) {
#bnr li{
width:48%;
float:left;
margin:0 2% 8px 0;
}
}/* 380px */