@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

body{
  color:#333;
  font-size:12px;
  font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  line-height:1.5;
  background:#f6f6f6;
  -webkit-text-size-adjust: none;
}

p { margin:7px 10px; }

img { -ms-interpolation-mode: bicubic; } 

/* リンク設定
------------------------------------------------------------*/
a{color:#337db6;text-decoration:none;}
a:hover{color:#246292;}
a:active, a:focus{outline:0;}

/* 全体
------------------------------------------------------------*/

#page {
  width:900px;
  margin:0 auto;
}

#wrapper{
  position:relative;
  margin:0 auto;
  width:98%;
}

.inner{
  margin:0 auto;
  width:98%;
}

/*************
/* ヘッダー
**************/
header{
  padding:25px 0 15px;
  overflow:hidden;
}

* html #header{height:1%;}

header h1{
  font-size:11px;
  font-weight:normal;
}

/*************
/* ロゴ
**************/
.logo{
  float:left;
  padding:10px 0 0;
  width:300px;
  position:relative;
  z-index:2;
}

.logo a{
  font-size:20px;
  font-weight:bold;
  line-height:1;
  color:#333;
}

.logo span{
  font-size:11px;
  font-weight:normal;
}

/*************
/* トップナビゲーション
**************/

/*親メニュー設定*/
ul#topnav{
  overflow:hidden;
  display:table;      /* テーブル要素として表示 */
  table-layout:fixed; /* 横幅を固定 */
  width:100%;          /* 任意の横幅 */
}

* html ul#topnav{height:1%;}

/*親メニュー設定（リンク）*/
ul#topnav li a{
  display:block;    /* ブロック要素として表示 */
  padding:5px 10px;  
  font-size:12px;
  color:#333;
  
}

/*親メニューリスト設定*/
ul#topnav li{
  margin:0 5px;
  text-align:center;
  display: table-cell;
}

/*子メニュー設定（非表示）*/
ul#topnav li ul.sub-menu{
  display:none;
}

/* 子メニュー設定（親メニューマウスオーバ時のみ表示）*/
ul#topnav li:hover ul.sub-menu{
  display: block;
  position: absolute;
  z-index:500;
}

/* 子メニューリスト設定（通常）*/
ul#topnav li ul.sub-menu li{
  margin:0;
  line-height:40px;
  width:180px;
  background-color:#f0f0f0;
  border-bottom:1px dotted #e0e0e0;
  text-align:left;
  display:block;
}

/* その他 */

/* 文字装飾設定 */
ul#topnav span{
  color:#cdcdcd;
  font-size:10px;
}

/* マウスオーバ時の設定（親メニュー）*/
ul#topnav li.active a, ul#topnav a:hover{
  background:#e4e4e4;
  border-radius:5px;
}

/* マウスオーバ時の設定（子メニュー）*/
ul#topnav li.active a, ul#topnav a:hover{
  background:#e4e4e4;
  border-radius:0px;
}

/*************
/* SNS
**************/

.sns {
  float:right;
  position:relative;
  top:20px;
  z-index:1;
}

.fb {
  float:left;
  width: 150px;
  height:30px;
}

.tw {
  float:left;
  width:90px;
  height:30px;
}

/*************
/* メイン画像（トップページ+サブページ）
**************/
#mainBanner{
  margin:15px auto 10px auto;
  padding:0;
  width:100%;
  position:relative;
  line-height:0;
  z-index:0;
}

#mainBanner img{
  max-width:100%;
  height:auto;
  border-radius:3px;
}

.slogan{
  position:absolute;
  max-width:100%;
  height:auto;
  bottom:0;
  left:0;
  padding:15px 20px;
  line-height:1.4;
  background-color:#000;
  opacity: 0.5;
}

.slogan h2{
  padding-bottom:5px;
  color:#ddd;
  font-size:18px;
}

.slogan h3{
  font-size:12px;
  color:#aaa;
}

/*************
/* グリッド
**************/

/* グリッド大枠 */
.gridWrapper{
  padding-bottom:20px;
  overflow: hidden;
}

* html .gridWrapper{height:1%;}

/* 左側グリッド(1カラム) */
.grid_side {
  width:100%;
  margin:10px 0;
  border-radius:5px;
  background:#fff;
}

/* 右側グリッド(2カラム) */
.grid_2column {
  float:left;
  width:48%;
  min-height:400px;
  border-radius:5px;
  background:#fff;
}

/* 右側グリッドの偶数(2カラム) */
.grid_2column:nth-child(odd) {
  margin:10px 1% 0 2%;
}

/* 右側グリッドの奇数(2カラム) */
.grid_2column:nth-child(even) {
  margin:10px 0 0 1%;
}

.grid_2column .contents {
 height:460px;
 overflow:auto;
}

/* 右側グリッド(1カラム) */
.grid_1column {
  float:left;
  width:98%;
  margin:10px 2% 0 2%;
  min-height:120px;
  border-radius:5px;
  background:#fff;
}

/* 右側グリッド(1カラム) */
.grid_headline {
  float:left;
  width:98%;
  margin:10px 2% 0 2%;
  border-radius:5px;
  background:#fff;
}

/* フッター内のグリッド設定 */
.grid_footer{
  background:transparent;
  float:right;
  display:block;
}

/* フッター内のグリッド設定（最後） */
.grid_footer:last-child{
  clear:both;
}

/*************
/* メイン コンテンツ
**************/

/* 左コンテンツ */
#left_contents {
  float:left;
  width:20%;
}

/* 右コンテンツ */
#right_contents {
  float:left;
  width:80%;
}

/* 内枠 */
div.contents{
  padding:5px 10px;
}

/* 見出し設定  */
div.contents h3{
  border-bottom:2px dotted #ccc;
  font-size:120%;
  font-weight:bold;
  color:#525252;
  margin-bottom:10px;
}

div.contents h4 {
  border-bottom:2px dotted #ccc;
  font-size:105%;
  color:#525252;
  margin-bottom:10px;
}

/* 3段組画像 */
div.imgRight {
  margin:2px 0 8px 20px;
}

div.imgRight img{
  width:32%;
  margin-right:1%;
}

div.imgRight img:last-child{
  margin-right:0;
}

/* 2段組画像：右回り込み */
div.imgRight2Line {
  float:right;
  width:320px;
  margin-left:10px;
}

div.imgRight2Line img {
  width:150px;
}

/* 見出し設定 */
.m1{
  padding:12px 5px;
  text-align:center;
  border-radius:5px 5px 0 0;
  background:#e4e4e4;
}

.m2{
  padding:12px 2%;
  border-radius:5px 5px 0 0;
  background:#e4e4e4;
}

.m3{
  padding:15px 2%;
  border-radius:5px 5px 0 0;
  background:#e4e4e4;
}

/* 署名 */
.sign {
  text-align:right;
}

/*  */
.flagship{
  font-weight:bold;
  font-size:115%;
}

/* 画像設定 */
.layout1{
  display:block;
  margin:0 auto 0 auto;
  max-width:100%;
  height:auto;
}

.layout2{
  float:right;
  display:block;
  margin:0 auto 4px 4px;
  max-width:100%;
  height:auto;
}

.indent{
  margin-left:10px;
}

/* 会社概要 */
dl.guid {
  margin:0 0 5px 10px;
}

dl.guid dt {
  width:18%;
  float:left;
  margin:0 0 5px;
}

dl.guid dd {
  width:80%;
  float:right;
  margin:0 0 5px
}

/* 2段組 */
li.left {
  float:left;
  width:32%;
}

li.right {
  float:left;
}

/* 事業案内 */
li.info {
  width:18%;
}

/* TOPICS */
dl.topics {
  margin-bottom:10px;
  padding-bottom:5px;
}

dl.topics dt {
  margin:5px 8px 10px;
  border-bottom:1px dashed #ccc;
}

dl.topics dd {
  margin:0px 10px;
}

/* 汎用 */
dl.datalist {
  margin-bottom:5px;
}

dl.datalist dt {
  width:15%;
  float:left;
  margin:0 0 5px;
  text-align:right;
}

dl.datalist dd {
  width:75%;
  float:left;
  margin:0 0 5px 5%;
}

/* カリキュラム */
dl.curriculum {
  width:80%;
  margin-bottom:5px;
  margin-left:2%;
  border-bottom:2px dotted #ccc
}

dl.curriculum dt {
  width:15%;
  float:left;
  margin:0 0 5px;
}

dl.curriculum dd {
  width:75%;
  float:right;
  margin:0 0 5px 5%;
}

/* リスト */
.branch {
  margin-bottom:10px;
  margin:2px 0px 8px 10px;
}

/* リスト画像1 */
li.arrow {
  background:url("../img/contents/parts/arrow.gif") no-repeat;
  background-position:0 2px;
  padding:0 5px 1px 4%;
}

/* リスト画像2 */
li.triangle {
  background:url("../img/contents/parts/arrow_black_small.gif") no-repeat;
  background-position:0 4px;
  padding:0px 5px 1px 4%;
}

/* リスト画像3 */
li.mark {
  list-style-position:inside;
  list-style-type:decimal;
}

/* 文字装飾 */
.deco {
  margin-top:10px;
  color:#884513;
  font-weight:bold;
}

.attention {
  color:#ff4444;
  font-weight:bold;
}

.deco_brown {
  color:#884513;
}

.deco_blue {
  color:#337db6;
}
.large {
  font-weight:bold;
  font-size:120%;
}

.weight {
  font-weight:bold;
  font-size:105%;
  color:#464646;
}

.deco_b_border {
  text-decoration:underline;
}

/*************
/* テーブル
**************/

table {
  border-collapse:collapse;
  width:98%;
  margin:10px auto;
}

table th,
table td {
  padding:5px;
  border:1px solid #cacaca;
  text-align:left;
}

/* th 横並び */
table.side th {
  font-weight:bold;
  letter-spacing:1px;
  white-space:nowrap;
  background:#eee;
}

/* th 縦並び */
table.vertical th{
  background:#eee;
}

table.vertical th:first-child{
  width:40%;
}

/*************
/* フォーム
**************/

select {
  width:95%;
}

textarea {
  width:95%;
}

/*************
/* フッター
**************/

footer {
  clear:both;
  padding:10px 0 40px;
  overflow:hidden;
}

* html footer {height:1%;}

.tel strong {
  font-size:20px;
  font-weight:bold;
}

footer a {color:#333;}
footer a:hover {color:#888;}
footer .copyright {font-size:11px;}

/* 下部メニュー設定 */
ul.bottom_nav {
  overflow:hidden;
  display:table;      /* テーブル要素として表示 */
  table-layout:fixed; /* 横幅を固定 */
  width:100%;          /* 任意の横幅 */
}

/* 下部メニューリスト設定（通常） */
ul.bottom_nav li {
  margin:0 5px;
  text-align:center;
  display: table-cell;
}

/* 下部メニューリスト設定（リンク）*/
ul.bottom_nav li a{
  display:block;    /* ブロック要素として表示 */
  padding:5px 10px;  
  font-size:12px;
  color:#333;
}

/* 下部メニューリスト設定（マウスオーバ時）*/
ul.bottom_nav li:hover a {
  background:#e4e4e4;
  border-radius:5px;
}

.tell {
  font-family:sans-serif;
  font-size:120%;
  font-weight:bold;
}
/*************
/* スマートフォンナビゲーション（非表示）
**************/

ul.sp_nav {
  display:none;
}

div.panel_sp {
  display:none;
}

/*************
/* TOPへ戻る
**************/

#pageTop{
  background:#ddd;
  border-radius:5px;
  color:#666;
  padding:20px;
  position:fixed;
  bottom:20px;
  right:5px;
  opacity: 0.6;

}

#pageTop:hover{
  color:#fff;
  background:#bbb;
}
/*************
/* clearfix
**************/

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    font-size:0;   
    clear: both;
    visibility:hidden;
}
.clearfix{
    display: inline-block;
}
/* Hides from IE Mac */
* html .clearfix{
    height: 1%;
}
.clearfix{
    display:block;
}

/***************************************************************
/* responsible
****************************************************************/
@media only screen and (max-width:899px){

  /**************************
  /* 全体
  ***************************/
  #page {
    width:85%;
    margin:0 auto;
  }
}

/***************************************************************
/* iPad 縦 
****************************************************************/
@media only screen and (max-width:820px){

  /**************************
  /* 全体
  ***************************/
  #page {
    width:85%;
    margin:0 auto;
  }

  /* iframe調整用 */
  .k_frame {
    width:95%;
    height:300px;
  }
}

/***************************************************************
/* Tablet 縦
****************************************************************/
@media only screen and (max-width:768px){

  /**************************
  /* ヘッダー
  ***************************/
  header{
    padding-bottom:0;
  }

  /**************************
  /* トップナビゲーション
  ***************************/  
  ul#topnav li a{
    font-size:11px;
  }


  /* 2段組 */
  li.left {
    float:none;
    width:auto;
  }

  li.right {
    float:none;
  }

  .del {
    display:none;
  }
  
  /* フッター内のグリッド設定 */
  .grid_footer{
    float:none;
    width:100%;
    min-height:50px;
    text-align:center;
  }

  /* フッター内のグリッド設定（最後） */
  .grid_footer:last-child{
    padding-top:20px;
  }

  /* 2段組画像：右回り込み */
  div.imgRight2Line {
    float:none;
    width:auto;
    text-align:center;
    margin-left:0;
  }

  div.imgRight2Line img {
    width:48%;
  }
}

/***************************************************************
/* スマートフォン 横(ランドスケープ)
/***************************************************************/
@media only screen and (max-width:680px){

  /**************************
  /* ロゴ
  ***************************/

  .logo{
    float:none;
    width:auto;
    text-align:center;
  }

  /**************************
  /* SNS
  ***************************/

  .sns {
    display:none;
  }

  /**************************
  /* トップナビゲーション
  ***************************/

  /*親メニュー設定*/
  ul#topnav{
    overflow:hidden;
    display:inline;
  }

  /*親メニュー設定（リンク）*/
  ul#topnav li a{
    padding:5px 10px;  
    font-size:12px;
    color:#333;
    border-radius:0;
  }

  /*親メニューリスト設定*/
  ul#topnav li{
    display: block;
    float:left;
    width: 50%;
    margin:0;
  }

  /* 親メニューリスト設定（1）*/
  ul#topnav li:nth-child(1){
    border-top:1px solid #e4e4e4;
    border-left:1px solid #e4e4e4;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
  }

  /* 親メニューリスト設定（2）*/
  ul#topnav li:nth-child(2){
    border-top:1px solid #e4e4e4;
    border-left:1px solid #e4e4e4;
    border-right:1px solid #e4e4e4;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
  }

  /* 親メニューリスト設定（3）*/
  ul#topnav li:nth-child(3){
    border-top:1px solid #e4e4e4;
    border-left:1px solid #e4e4e4;
    border-bottom:1px solid #e4e4e4;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
  }

  /* 親メニューリスト設定（4）*/
  ul#topnav li:nth-child(4){
    border-top:1px solid #e4e4e4;
    border-left:1px solid #e4e4e4;
    border-right:1px solid #e4e4e4;
    border-bottom:1px solid #e4e4e4;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
  }

  /* 親メニューリスト設定（最後）*/
  ul#topnav li:last-child{
    display:none;
  }

  /* 子メニュー設定（非表示）*/
  ul#topnav li:hover ul.sub-menu{
    display: none;
  }

  /* マウスオーバ時の設定（親メニュー）*/
  ul#topnav li:hover a{
    border-radius:0;
  }

  /**************************
  /* メイン画像
  ***************************/
  .slogan {
    width:96%;
    line-height:1;
    padding:6px 2%;
  }

  .slogan h2{
    font-size:14px;
  }

  .slogan h3{
    font-size:10px;
  }

  /**************************
  /* メイン コンテンツ
  ***************************/

  /* 左コンテンツ（非表示） */
  #left_contents {
    float:none;
    display:none;
  }
  
  /* 右コンテンツ */
  #right_contents {
    float:none;
    width:100%;
    margin:10px auto;
  }

  /* カリキュラム */
  dl.curriculum {
    width:95%;
  }

  /* 画像 */
  .layout2{
    float:none;
    display:block;
    margin:0 auto 4px;
    max-width:100%;
    height:auto;
  }

  /* リスト画像1 */
  li.arrow {
    padding:0 5px 1px 20px;
  }

  /* リスト画像2 */
  li.triangle {
    padding:0px 5px 1px 20px;
  }

  /* このサイズ以降表示させない場合 */
  .del_sp {
    display:none;
  }

  /**************************
  /* テーブル
  ***************************/

  /* 全体  */
  table th,
  table td {
    border:none;
  }

  /* th 縦並び */
  table.vertical thead th{
    display:none;
  }

  table.vertical tbody tr {
    display:block;
    border-left:1px solid #e4e4e4;
    border-right:1px solid #e4e4e4;
    border-bottom:1px solid #e4e4e4;
  }

  table.vertical tbody th,
  table.vertical tbody td {
    display:list-item;
    list-style:none;
  }

  table.vertical th:first-child {
    width:auto;
    background-color:#e4e4e4;
  }
  
  .number:before {
    content:"[定員]";
  }

  .period:before {
    content:"[訓練期間]"
  }

  .collect:before {
    content:"[募集期間]"
  }

  .situation:before {
    content:"[状況]"
  }

  /* th 横並び */
  table.side thead{
    display:block;
    float:left;
    border-collapse:collapse;
  }

  table.side tbody{
    display: block;
    width: auto;
    overflow-x: auto;
    white-space: nowrap;
  }

  table.side tbody tr{
    display: inline-block;
    margin: 0 -3px;
  }

  table.side td,
  table.side th{
    display: block;
    border-collapse:collapse;
    border:1px solid #e4e4e4;
  }

  /**************************
  /* グリッド
  ***************************/

  /* グリッド設定 */
  .gridWrapper{
    padding-bottom:0;
    overflow: hidden;
  }

  /* 右側グリッド(1カラム) */
  .grid_1column {
    margin:0;
    width:100%;
  }

  /* 右側グリッド(2カラム) */
  .grid_2column {
    width:100%;
    min-height:150px;
    border-radius:5px;
    background:#fff;
  }

  /* 右側グリッド(2カラム) */
  .grid_2column:first-child, 
  .grid_2column:last-child {
    margin:0 0 10px;
  }

  /**************************
  /* フッター
  ***************************/

  /* 下部メニュー設定（PC用） */
  div.panel {
    display:none;
  }

  /* 下部メニュー設定（SP用） */
  div.panel_sp {
    display:block;
  }

  /* 下部メニューリスト設定（通常） */
  ul.bottom_nav li {
    display:block;
    margin: 0;
    padding:10px 0;
    text-align:center;
    border:1px solid #c0c0c0;
    background:#e6e6e6;
  }
  
  /* 下部メニューリスト設定（マウスオーバ時）*/
  ul.bottom_nav li:hover {
    background:#e4e4e4;
    border-radius:0;
  }

  /* 下部アコーディオンリスト設定（通常）*/
  ul.sp_nav li{
     background:#f8f8f8;
  }
}

/***************************************************************
/* スマートフォン 縦(ポートレート)
****************************************************************/
@media only screen and (max-width:480px){

  /**************************
  /* 全体
  ***************************/

  #page {
    width:94%;
    margin:0 auto;
    max-width:1100px;
  }

  /**************************
  /* トップナビゲーション
  ***************************/
  
  /* 親メニュー設定 */
  ul#topnav{
    display:none;
  }
}