@charset "utf-8";

/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
html,body,#container {height:100%;}
body { margin:0px; padding:0px; color:#2a3439; font-family:"ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ", Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic", sans-serif; font-size:16px; line-height:2; background:#fff; -webkit-text-size-adjust:none;}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin:0px;padding:0px;font-size:100%;font-weight:normal;}
ul {list-style-type:none;}
ol {padding-left:40px;padding-bottom:15px;}
img {border:none;max-width:100%;height:auto;vertical-align:middle;}
table {border-collapse:collapse;font-size:100%;border-spacing:0;}
video {max-width:100%;}
iframe {width:100%;}

h4{ position: relative; padding: 5px 5px 5px 42px; background: #77c3df; font-size: 20px; color: white; margin-left: -33px; line-height: 1.3; z-index:-1;}
h4::before { position: absolute; content: ''; left: -2px; top: -2px; border: none; border-left: solid 40px white; border-bottom: solid 79px transparent; z-index:-2}

.cl1{color:#FF0000}
.cl2{color:#0000ff}

.center{text-align:center;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a { color:#2a3439; transition:0.2s;}
a:hover { color:#59b9d5; text-decoration:none;}

/*inner
---------------------------------------------------------------------------*/
.inner { max-width:1200px; margin:0 auto; padding-left:1% !important; padding-right:1% !important;}

/*ヘッダー
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header { height:70px; background:#59b9d5; position:relative;}
header h1{float:left; padding-right:550px;}
header span address {color:#fff; font-size:23px; font-weight:bold; padding-top:20px;}

/*トップページのヘッダーと、スライドショーブロック共通設定。他の端末サイズでの再設定が複数あるので変更する際は注意。*/
#top header, #mainimg { height:500px;}

/*ロゴ画像（※トップページ以外）*/
header #logo { width:30%; padding-top:15px;}
/*トップページのロゴ画像*/
#top #logo img { position:fixed; left:10%; top:50px; z-index:1; width:400px;}

/*メインメニューのブロック
---------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar { position:relative;z-index:10; text-align:center; background:#fff; border-bottom:1px solid #2a3439;}
#menubar > ul {overflow:hidden;}
/*メニュー１個あたりの設定*/
#menubar ul li { float:left; width:25%;}
#menubar ul li a { text-decoration:none; display:block; height:63px; padding-top:12px;}
/*飾り文字*/
#menubar ul li span { display:block; font-size:10px; color:#999;}
/*スマホ用メニューを表示させない*/
#menubar-s {display:none;}
/*３本バーアイコンを表示させない*/
#menubar_hdr {display:none;}

/*ドロップダウンメニュー用
----------------------------------------------------------------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar ul.ddmenu { position:absolute; visibility:hidden; padding:0; height:auto; width:400px; border-radius:10px; background:#59b9d5;	padding:10px; font-size:13px; text-align:left; box-shadow:2px 2px 8px rgba(0,0,0,0.2);}
#menubar ul.ddmenu::before { content:"▲"; font-size:15px; color:#59b9d5; position:absolute; top:-18px; left:27%;}
#menubar ul.ddmenu li { width:50%; float:left;}
#menubar ul.ddmenu li a { transition:0s; background:none; height:auto; width:100%; color:#fff; opacity:0.7; padding:0px 5px;}
#menubar ul.ddmenu li a:hover { opacity:1;/*100%表示にする*/}

/*fixmenu設定（メニューが画面上部に到達した際のスタイル）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*上部固定メニュー用fixmenu設定*/
body.is-fixed-menu #menubar.nav-fix-pos { position:fixed; width:100%; top:0px; background:#fff; background:rgba(255,255,255,0.95);}
body.is-fixed-menu #contents { margin-top:75px;}
/*※以下の２ブロックのスタイルの中身は、上の２ブロックのスタイルと単純に合わせておいて下さい。fixmenuスクリプトを２つ使う為に必要な設定になります。*/
body.is-fixed #menubar.nav-fix-pos { position:fixed; width:100%; top:0px; background:#fff; background:rgba(255,255,255,0.95);}
body.is-fixed #contents { margin-top:75px;}

/*コンテンツ（mainとsubを囲むブロック。１カラム時の場合はメインコンテツを囲むブロック。）
---------------------------------------------------------------------------*/
#contents { position:relative; z-index:1; overflow:hidden; background:#fff; padding:40px 0px;}
#contents .inner { padding:40px 0px;}

/*h2タグ*/
#contents h2 { clear:both; margin-bottom:20px; line-height:1.5; font-size:40px; text-align:center; color:#59b9d5;}
#contents h2.type1 { background:#333; background:url(../images/bg_company.jpg) no-repeat center center/cover; padding:50px 0px; color:#fff;}
#contents h2 span { display:block; font-size:14px; color:#999; letter-spacing:0.3em;}

/*h3タグ*/
#contents h3 { clear:both; margin-bottom:20px; font-size:20px; border-bottom:1px solid #ccc;}
#contents h3::first-letter { border-left:3px solid #59b9d5; padding-left:20px;}
#contents p { padding:0 20px 20px;}

#contents h2 + p,
#contents h3 + p { margin-top:-10px;}
/*section同士の余白*/
#contents section + section { margin-top:40px;}

/*mainコンテンツ
---------------------------------------------------------------------------*/
/*mainブロック*/
.main { float:left; width:75%;}

.txt{width:98%; margin:3px auto;}

/*new*/
.new { color:#fff; background:#f00;}

/*フッター設定
---------------------------------------------------------------------------*/
footer { clear:both; position:relative; z-index:1; font-size:12px; background:#59b9d5; color:#fff; text-align:center;}
footer a {color:#fff;}
footer a:hover {color:#fff;}
footer .pr {display:block;font-size:80%;}

/*フッターメニュー
---------------------------------------------------------------------------*/
/*ボックス全体*/
#footermenu { overflow:hidden; padding:20px 0; /*background:url(../img/footer_logo.png) no-repeat 98% center/18%;*/}
#footermenu a { text-decoration:none; opacity:0.7;}
#footermenu a:hover { opacity:1;}
#footermenu ul { float:left; width:30%; padding-right:1%; padding-left:1%; text-align:left; line-height:1.7;}
/*見出し*/
#footermenu li.title, #footermenu li.title a { opacity:1; font-size:14px;}

/*コピーライト
---------------------------------------------------------------------------*/
#copyright { clear:both; text-align:center; background:#666;}
#copyright a {text-decoration:none;}
#copyright a:hover {color:#666;}

/*ta1設定
---------------------------------------------------------------------------*/
/*ta1テーブル*/
.ta1 { width:100%; margin:0 0 20px;}
.ta1 span { color:#ff0000;}
.ta1, .ta1 td, .ta1 th { border:1px solid #ccc;	padding:10px 15px; word-break:break-all;}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi { width:auto; text-align:left; background:#f6f5f2; font-size:18px;}
/*ta1の左側ボックス*/
.ta1 th { width:140px; text-align:center; font-weight:normal;}
/*左側ボックスに画像を入れた場合の設定*/
.ta1 th img { width:100%;}
/*labelタグを２列表示にする（CMS用）*/
.ta1.cms td label { display:block; float:left; width:50%;}

.ta2{ width:100%; margin:0 0 20px;}
.ta2 td{padding:20px 0px 20px 0; border:solid 1px #696969; border-top:none; }
.ta2 span{ position: relative; display:inline-block; padding:0 55px;}
.ta2 span:before, .ta2 span:after { content: ''; position: absolute; top:50%; display: inline-block; width:45px; height:2px; border-top:solid 1px black; border-bottom:solid 1px black;}
.ta2 span:before { left:0;}
.ta2 span:after { right: 0;}

/*inputボタン
---------------------------------------------------------------------------*/
#contents input[type="submit"].btn,
#contents input[type="button"].btn,
#contents input[type="reset"].btn {	padding:5px 10px; border:1px solid #ccc; font-size:20px; border-radius:3px; background:#eee;}
/*マウスオン時の設定*/
#contents input[type="submit"].btn:hover,
#contents input[type="button"].btn:hover,
#contents input[type="reset"].btn:hover { border:1px solid #999; background:#fff;}

/*ヘッダーにメニューが固定される分、リンク先が隠れるのを防ぐ為のスタイル。※ページ内へのリンクで使う。
---------------------------------------------------------------------------*/
.link { display:block; margin-top:-100px; padding-top:100px;}

/*ページの上部へボタン「↑」設定
---------------------------------------------------------------------------*/
@keyframes scroll {0% {opacity:0;}100% {opacity:1;}}
body .nav-fix-pos-pagetop a {display:none;}
body.is-fixed-pagetop .nav-fix-pos-pagetop a { display:block; text-decoration:none; text-align:center; width:50px; line-height:50px; z-index:1; position:fixed; bottom:20px; right:3%; background:#666; background:rgba(0,0,0,0.6); color:#fff; border:1px solid #fff; animation-name:scroll; animation-duration:1S; animation-fill-mode:forwards;}
/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover { background:#999;}

/*その他
---------------------------------------------------------------------------*/
.look {background:#ccc; padding:5px 10px; border-radius:4px;}
.mb15,.mb1em {margin-bottom:15px !important;}
.mb30 {margin-bottom:30px !important;}
.mb50 {margin-bottom:50px !important;}
.p0 {padding:0 !important;}
.clear {clear:both;}
ul.disc {padding:0em 25px 15px;list-style:disc;}
.color1, .color1 a {color:#59b9d5 !important;}
.pr {font-size:10px;}
.wl {width:96%;}
.ws {width:50%;}
.c {text-align:center !important;}
.r {text-align:right !important;}
.l {text-align:left !important;}
.w50 {overflow:hidden;width:50%;}
.fl {float:left;}
img.fl {float:left; width:30%; margin-right:20px; margin-bottom:20px;}
.fr {float:right;}
img.fr {float:right; width:30%; margin-left:20px; margin-bottom:20px;}
.photo {padding:10px; background:#fff; border:5px solid #fff;box-shadow:2px 4px 5px rgba(0,0,0,0.2);}
.big1 {font-size:22px;}
.sub .big1 {font-size:12px;}
.mini1 {font-size:11px; display:inline-block; line-height:1.5;}
.sh {display:none;}
.date {text-align:right; color:#999; font-size:11px;}


/*画面幅1500px以上の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1500px){
 #top header, #mainimg {height:700px;}
}

/*画面幅2000px以上の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:2000px){
 #top header, #mainimg {height:1000px;}
}

/*画面幅1200px以下の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1200px){
 #top header, #mainimg {height:500px;}
}

/*画面幅1000px以下の設定（スライドショー領域の再設定とロゴ）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1000px){
 #top header, #mainimg {height:370px;}
 #top #logo img {left:1%;top:20px;width:200px;}
}

/*画面幅800px以下の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
 #top header, #mainimg {height:280px;}
}

/*画面幅620px以下の設定（スライドショー領域の再設定とロゴ）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:620px){
 #top header, #mainimg {height:200px;}
 #top #logo img {left:1%;top:10px;width:120px;}
 header h1 {float:none; padding-right:0px;}
 header span address { color:#fff; font-size:20px; font-weight:bold; padding-top:5px;}
}

/*画面幅500px以下の設定（スライドショー領域の再設定）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:500px){
 #top header, #mainimg {height:240px;}
 header h1 {float:none; padding-right:0px;}
 header span address { color:#fff; font-size:20px; font-weight:bold; padding-top:5px;}
}

/*画面幅420px以下の設定（スライドショー領域の再設定とロゴ）
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:420px){
 #top header, #mainimg {height:190px;}
 #top #logo img {left:1%;top:10px;width:90px;}
 header h1 {float:none; padding-right:0px;}
 header span address { color:#fff; font-size:20px; font-weight:bold; padding-top:5px;}
}

/*画面幅1000px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1000px){

/*list2ボックス（トップページの「現在の求人」で使っている色のついた各ブロック）
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list2 li { width:49%; margin:10px 0.5%;}
}

/*画面を横向きにした場合の高さが500px以下の場合の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation:landscape) and (max-height:500px){

/*メインメニュー
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar-s ul li a { padding:10px; float:left; width:40%; margin-left:4%;}
}

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*メインメニュー
---------------------------------------------------------------------------*/
/*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。透明度(opacity)0%から透明度100%にする指定。*/
@keyframes menu1 {
	0% {opacity:0;}
	100% {opacity:1;}
}
/*スマホ用メニューブロック*/
#menubar-s { display:block;overflow:hidden; position:fixed;z-index:100; top:0px; width:100%; background:rgba(0,0,0,0.8); border-top:1px solid #fff; animation-name:menu1; animation-duration:0.5s; animation-fill-mode:both;}
/*メニュー１個あたりの設定*/
#menubar-s ul li a { display:block;text-decoration:none; padding:10px 15px; border-bottom:1px solid #fff; color:#fff; font-size:16px;}
/*飾り文字*/
#menubar-s ul li span { display:block; font-size:10px; color:#999;}
/*PC用メニューを非表示にする*/
#menubar {display:none;}

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr { display:block; position:fixed;z-index:100; top:8px; right:10px; border-radius:50%; border:1px solid #fff;}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open { width:50px; height:50px;}
/*三本バーアイコン*/
#menubar_hdr.close {background:#59b9d5 url(../img/icon_menu.png) no-repeat center top/50px;}
/*閉じるアイコン*/
#menubar_hdr.open {background:#59b9d5 url(../img/icon_menu.png) no-repeat center bottom/50px;}

/*fixmenu設定（メニューが画面上部に到達した際のスタイル）
---------------------------------------------------------------------------*/
/*fixmenuから折りたたみメニューになるのでリセット。*/
body.is-fixed-menu #contents {margin-top:0px;}

/*main,subコンテンツ
---------------------------------------------------------------------------*/
.main,.sub {float:none; width:auto;}

/*その他
---------------------------------------------------------------------------*/
body.s-n .sub,body.s-n #footermenu {display:none;}
.big1 {font-size:20px;}
.w50 {overflow:hidden;width:auto;}
.fl {float:none;}
.fr {float:none;}
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/
body { font-size:12px; line-height:1.5;}

/*inner
---------------------------------------------------------------------------*/
.inner { padding-left:2% !important; padding-right:2% !important;}

/*コンテンツ（mainとsubを囲むブロック。１カラム時の場合はメインコンテツを囲むブロック。）
---------------------------------------------------------------------------*/
#contents { padding:20px 0px;}
/*contentsの中にあるinner*/
#contents .inner { padding:20px 0px;}
/*h2,h3タグ*/
#contents h2 { font-size:20px;}
/*h2タグのspan（装飾用）タグ*/
#contents h2 span { font-size:10px;	letter-spacing:0.2em;}
/*h3タグ*/
#contents h3 { font-size:20px; padding-left:10px;}
/*h3タグの１文字目*/
#contents h3::first-letter { padding-left:10px;}
/*段落タグ*/
#contents p { padding:0 10px 20px;}

/*一覧ページのボックス内の右上のマーク
（CMSの場合は管理ページだと「オプション1」～のプルダウン、setup.phpだと「オプション選択肢」に関連します）
---------------------------------------------------------------------------*/
/*option1〜option3、と、newアイコン共通*/
.option1,.option2,.option3,.new { font-size:10px; width:50px; line-height:20px; right:10px;}

/*フッターメニュー
---------------------------------------------------------------------------*/
/*ボックス全体*/
#footermenu { display:none;}

/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*ta1設定*/
.ta1, .ta1 td, .ta1 th { padding:5px;}
/*ta1の左側ボックス*/
.ta1 th,.ta1  td { width:97%; display:block;}
.ta1 th{ background:#eee; text-align:left;}
.ta input[type="text"],textarea {width:450px;}

.ta2 td{padding-bottom:10px; display:block;}

/*その他
---------------------------------------------------------------------------*/
.photo {padding:5px;border:2px solid #fff;}
.ws,.wl {width:94%;}
.fl {float:none;}
img.fl {float:none;display:block;width:90%;margin:0 auto 20px;}
.fr {float:none;}
img.fr {float:none;display:block;width:90%;margin:0 auto 20px;}
.big1 {font-size:16px;}
.sh {display:block;}
.pc {display:none;}
}

/*画面幅360px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:360px){

/*ta1設定
---------------------------------------------------------------------------*/
/*labelタグを2列から1列表示にする（CMS用）*/
.ta1.cms td label { float:none; width:100%;}
}