@charset "UTF-8";
/*
Theme Name: 株式会社 Hc Lab 
Author:  Hc Lab
Description: This is my original theme.
Version: 1.0;
*/

body {
  margin:0;
}

.clearfix:after{
  content: "";
  display: block;
  clear: both;
}

img {
  margin:0;
  padding: 0;
}

/*---基本構造-----*/

/*---ヘッダーとフッターをバーの形にする設定-----*/

header {
  border-bottom: solid 0px #dddddd;
  background-color: #fff;
}

footer {
  border-top: solid 0px #dddddd;
  background-color: #008cd6;
}

/*--- ボックス上下の間隔 -----*/

.sub-header {
  padding-top: 0px}


.contents {
  padding-top: 0px;
  padding-bottom: 20px;
}

.sub {
  padding-top: 0;
  padding-bottom: 20px;
}

.footer {
  padding-top: 15px;
  padding-bottom: 15px;
}

.kyode01 {
  margin: 0;
  width: 30%;
  float: left;
  padding-top: 0px;
  padding-bottom: 20px;
}

.kyode02s {
  width: 30%;
  float: left;
  clear:both;
  padding-bottom: 30px;
  font-size: 14px
}

.kyode02f {
  width: 70%;
  float: left;
  margin: 0;
  padding-top: 0px;
  padding-bottom: 30px;
}

@media (max-width: 599px){
  .contents {padding-top:10px}
  .contents02 {padding-top:40px}
}

/*--- ボックスの左右の余白 -----*/

header, footer, .container, .sub-header {
  padding-left: 0px;
  padding-right: 0px;
}


@media (min-width: 768px) and (max-width:1040px) {
  /* 全体の横幅*/
  .container, .header-inner, .header-inner02, .footer-inner, .footer-inner02, .sub-header, .copyright
  { width: 1200px;
    margin-left: auto;
    margin-right: auto}
  }

@media (min-width: 1040px){
/* コンテンツとサイドバーを横に並べる設定*/
  .container:after {
  content: "";
  display: block;
  clear: both}

  .topcontents {
    margin:20px auto 0 auto;
    width:100%}

  .contents {
    margin:5px auto 0 auto;
    float:left;
    width:80%}

  .sub {
    margin:5px 0 0 0;
    float:left;
    width:20%}

  /* コンテンツとサイドバーの間隔 */
.contents {
      padding-right: 30px;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
}

@media (min-width: 1040px){
/* 全体の横幅 */
.container, .header-inner, .header-inner02, .footer-inner, .footer-inner02, .sub-header {
  width: 900px;
  margin-left: auto;
  margin-right: auto}
}

/*--------- ヘッダー -------------*/

/* サイト名 */
.site h1 a {
  display: inline-block;
  padding: 30px 0 0 0;
  background-color: ;
  color: #ffffff;
  text-decoration: none}

.site h1 {margin: 0;
  }


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

/* コピーライト */

.copyright p {
  margin: 0 auto;
  padding: 20px 0 30px 0;
  color: #ffffff;
  text-align: center;
  font-size: 14px}


/*--------- 記事の概要 -------------*/

/* 概要 */

.gaiyou a {
  display: block;
  padding: 20px 0;
  border-bottom:dotted 2px #dddddd ;
  color: #000000;
  text-decoration: none}

.gaiyou a:hover {
  background-color: #eeeeee}

.gaiyou a:after {
  content: "";
  display: block;
  clear: both}

.gaiyou img {
  float: left;
  width: 200px}

.gaiyou .text {
  float: none;
  width: auto;
  margin: 0}

.gaiyou h1 {
  margin-top:0;
  margin-bottom: 10px;
  font-size: 18px}

.gaiyou p {
  margin: 0;
  font-size: 11px}

.gaiyou .kiji-date {
  margin-bottom: 4px}

@media (max-width: 599px){
  .gaiyou a {padding: 10px 0}

  .gaiyou img {width: 100px}

  .gaiyou .text {margin-left: 0}

  .gaiyou h1 {font-size: 14px}

  .gaiyou p {visibility: hidden;
             height: 0}
  .gaiyou .kiji-date {
    margin-bottom: 0}
}

/* 概要（大サイズ） */

.gaiyou-large a {
  display: block;
  padding: 20px 0;
  border-bottom:dotted 2px #dddddd ;
  color: #000000;
  text-decoration: none}

.gaiyou-large:first-child a {
  padding-top:0}

.gaiyou-large a:hover {
  background-color: #eeeeee}

.gaiyou-large h1 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 26px}

.gaiyou-large p {
  margin: 0;
  font-size: 14px}

.gaiyou-large .kiji-date {
  margin-bottom: 8px}

.gaiyou-large .thumb {width: 100%;
  height: 350px;
  background-size: cover;
  background-position: 50% 50%}

@media (max-width: 599px){

.gaiyou-large a {padding: 10px 0}

.gaiyou-large h1 {font-size: 18px}

.gaiyou-large p {font-size: 12px}

.gaiyou-large .thumb {height: 200px}

}


/*--------- 記事 -------------*/

/* 記事 */

.kiji:after {
  content: "";
  display: block;
  clear: both}

.kiji h1 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px}

.kiji p {
  margin-top: 0;
  margin-bottom: 10px}

@media (max-width: 599px) {
  .kiji h1 {font-size: 20px}
  .kiji p {font-size: 18px}
}


/* 小見出し */

.kiji h2 {
  position: relative;
  margin: 20px 0 20px 0;
  padding: 24px 20px 20px 20px;
  font-size: 24px;
  font-weight: bold;
  border: #000000 4px double;
  font-family: "メイリオ", "Meiryo","ヒラギノ角ゴ ProN W5", "Hiragino Kaku Gothic ProN", "verdana", sans-serif;
  color: #000000;
  text-align: center;
  background-color: #c1ecff;
  letter-spacing: 0.2em;
  clear: both}

.kiji h3 {
  position: relative;
  margin: 10px 0 20px 0;
  padding: 10px 0 4px 0;
  border-top: double 3px #008cd6;
  border-bottom: double 3px #008cd6;
  font-family: "メイリオ", "Meiryo","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "verdana", sans-serif;
  font-size: 24px;
  color: #008cd6;
  text-align: center;
  letter-spacing: 0.1em;
  clear: both}

.kiji h4 {
  margin: 0px 0 20px 0;
  padding: 12px 10px 8px 20px;
  border: double 4px #fff;
  background-color: #008cd6;
  font-family: "メイリオ", "Meiryo","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "verdana", sans-serif;
  font-size: 20px;
  color: #fff;
  letter-spacing: 0.3em;
  clear: both}

.kiji h5 {
  margin: 0px 0 15px 0 ;
  padding: 10px 10px 5px 18px;
  border: double 4px #ffffff;
  background-color: #e0e0e0;
  font-family: "メイリオ", "Meiryo","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "verdana", sans-serif;
  font-size: 20px;
  color: #008cd6;
  letter-spacing: 0.1em;
  clear: both}

  .kiji table.menulist {
    margin: 0 10px 20px 20px ;
    padding: 0 0 0 0;
    }

  .kiji table {
      margin: 0;
      padding: 0 0 0 0;
      }

.kiji h6 {
  margin: 35px 0 15px 0 ;
  padding: 10px 10px 8px 20px;
  background-color: #008cd6;
  font-family: "メイリオ", "Meiryo","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "verdana", sans-serif;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 0.3em;
  clear: both}

@media (max-width: 599px){
  .kiji h2 {padding-left: 21px;
    font-size: 18px}

  .kiji h2:before {font-size: 20px}

  .kiji h3 {
    padding-left: 6px;
    font-size: 18px}

  .kiji h4 {
    font-size: 24px}
}



/* 投稿日・更新日 */

.kiji-date {
  color: #000000;
  font-size: 12px}

.newsti {
  font-size: 12px}


@media (max-width: 599px) {
  .kiji-date {font-size: 12px}
}

/* タグ */

.kiji-tag {
  margin-bottom: 18px}

.kiji-tag ul {
  margin:0;
  padding:0;
  list-style:none}

.kiji-tag li a {
  display:block;
  margin-right: 5px;
  margin-bottom: 2px;
  padding: 3px 5px;
  border-radius: 2px;
  background-color: #008cd6;
  color: #ffffff;
  font-size: 12px;
  text-decoration:none}

.kiji-tag li a:hover {
  background-color: #c1ecff}

.kiji-tag ul:after {
  content: "";
  display: block;
  clear: both}

.kiji-tag li {
  float:left;
  width: auto}


/* パンくずリスト */

.bread ol {
  margin:0;
  padding:0;
  list-style:none}

.bread li a {
  display: inline-block;
  padding: 5px 5px;
  color: #888888;
  font-size: 12px;
  text-decoration:none}

.bread li a[href]:hover {
  background-color: #eeeeee}

.bread ol:after {
  content: "";
  display: block;
  clear: both}

.bread li {
  float:left;
  width: auto}

.bread li:after {
  content: "";
  margin-left: 2px;
  margin-right: 2px;
  color: #888888}

.bread li:last-child:after {
  content: none}

.bread i {font-size:14px}

.bread span {
  display: inline-block;
  text-indent: -9999px}

@media (max-width: 599px){
  .bread li:last-child {text-indent: -9999px}
}



/*--------- サイドバー -------------*/

/*--------- トップページ -------------*/

    /* トップページの新着情報メニュー */

.mymenu-news2 {padding: 0 0 0 0}

.mymenu-news2 ul {list-style: none}

.mymenu-news2 li {position: relative;
    padding: 0;
    margin: 0}

.mymenu-news2 li time {float:left;
    margin: 0 0 0 0;
    padding: 14px 20px 0px 6px }

.mymenu-news2 .text h1 {
  font-size: 14px;
  padding: 12px 0px 0px 0px;
font-weight: normal}

/* メニュー */
.mymenu {margin-bottom: 20px}


.mymenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mymenu li a {
  display: block;
  padding: 0;
  color: #000000;
  text-decoration: none;
}

.mymenu li a:hover {
  background-color: #c1ecff;
  color: #ffffff;
}


/* ーーーーーー固定ページーーーーーーー */

/* コンテンツメニュー */
.mymenu-page {border: solid 1px #008cd6}

.mymenu-page h2 {margin: 0;
    padding: 14px 10px 13px 16px;
    font-size: 16px;
    color: #008cd6;
    background-color: ;
    border-bottom: solid 1px #008cd6}

.mymenu-page li a {
  font-size: 14px;
  padding: 14px 10px 13px 16px ;
  border-bottom: solid 1px #008cd6}

.mymenu-page li:last-child a {border: none}



/*--------- 画像 -------------*/
/* 画像のキャプション */

/* 画像の配置 */
.aligncenter {
  display:block;
  margin-top: 20px;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto}

@media (max-width: 599px){
  .alignleft,.alignright{
      display:block;
      margin-top: 30px;
      margin-bottom: 30px;
      margin-left: auto;
      margin-right: auto}
}

@media (min-width: 600px){
  .alignleft {
    float:left;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-right: 30px}

  .alignright {
    float:right;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 30px}
}


/* 画像サイズ */

@media (max-width: 599px){
  .resize {
      margin: 0px;
      width: 100%;
      }
}
@media (min-width: 600px){ 
}



/* Internet Explorer 用の設定 */
a img {border:none}

/* 大きい画像用の設定 */
img, .wp-caption {
  max-width: 100%;
  height: auto}

/* アイキャッチ画像 */
.catch {margin-top: 30px;
  margin-bottom: 30px}



/*ーーーーーーーカテゴリー/タグーーーーーーーー*/
.contents > h1 {
  margin-top: 0;
  font-size: 20px}
  
@media (max-width:599px){
  .contents > h1 {
  margin-top: 0;
  font-size: 20px}

  .archive .bread li:last-child {
    text-indent:0}
}

/*ーーーーーーーナビゲーションメニューーーーーーーー*/

#mainmenu {display: none}

.mainmenu ul {margin:0;
  padding:0;
  list-style:none}

.mainmenu li a {
  display: block;
  margin:;
  padding: 10px 10px 10px 20px;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  background-color: #008cd6}

.mainmenu li a:hover {
  background-color: #008cd6;
  color: #ffffff}


#ftmenu {display: none}

.ftmenu ul {margin:0;
  padding:0;
  list-style:none}

.ftmenu li a {
  display: block;
  margin: 0;
  padding: 20px 55px 0px 55px;
  color: #ffffff;
  font-size: 13px;
  text-decoration: none}

.ftmenu li a:hover {background-color: #008cd6;
  color: #ffffff}

/*ーーーーーーートグルボタンーーーーーーー*/

.header-inner02 {position: relative}

#navbtn {position: absolute;
          top: -70px;
          right: 15px;
          padding: 10px 12px;
          border: solid 2px #aaaaaa;
          border-radius: 5px;
          background-color: #ffffff;
          cursor: pointer}

#navbtn:hover {background-color:#008cd6}

#navbtn:focus {outline: none}

#navbtn i {color: #888888;
          font-size: 20px}

#navbtn span {display: inline-block;
          text-indent: -9999px}


@media(min-width: 768px){

  /*サイト名とナビゲーションメニューを横に並べる設定*/
  .header-inner:after {content: "";
          display: block;
          clear: both}

  .site {float: left;
    width: auto}

  .siteinfo {
    float: right;
    margin: 35px 0 0 0;
    padding: 0px 0px 0 0;
    font-family: "メイリオ", "Meiryo","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "verdana", sans-serif;
    width: auto;
    font-size:20px;
    font-weight: bold}

  .siteinfo02 {
    margin:0 0 0 0;
    padding: 23px 0 0 0;
    float: right;
    width: auto}

  .sitenav {clear:both;
    margin:0 0 2px 0;
    padding:0 0 0 0;
    background-color: #008cd6}

  .sitenav02 {clear:both;
    margin:0 0 0 0;
    padding:0 0 0 0;
    background-color: #008cd6}


   /*サイト名とナビゲーションメニューのリンク横に並べる設定*/

  #mainmenu {margin:0;
    display: block !important}

  .mainmenu {margin-top: 5px}

  .mainmenu ul:after {content:"";
            display: block;
            clear: both}

  .mainmenu ul {border-left: solid 1px #fff}

  .mainmenu li {float: left;
            width: auto}

  .mainmenu li a {
    padding: 14px 24px;
    border-right: solid 1px #fff}


  #ftmenu {margin:0;
    display: block !important}

  .ftmenu {margin-top: 20px}

  .ftmenu ul:after {content:"";
            display: block;
            clear: both}

  .ftmenu ul {}

  .ftmenu li {float: left;
            width: auto}

  .ftmenu li a {
    padding: 8px 30px;
    border-right:}


  /* トグルボタン */
  #navbtn {display:none}
}




/* 文字設定 */

h1.kt01 {
  margin: 5px 0 20px 0;
  padding: 38px 30px 30px 30px;
  font-size: 24px;
  font-weight: bold;
  font-family: "メイリオ", "Meiryo","ヒラギノ角ゴ ProN W5", "Hiragino Kaku Gothic ProN", "verdana", sans-serif;
  color: #000000;
  text-align: center;
  background-color: #c1ecff;
  letter-spacing: 0.2em;
  clear: both}

h2.kt02 {
  margin: 0px 0 0px 0;
  border: double 4px #fff;
  padding: 10px 10px 9px 16px;
  background-color: #c1ecff;
  font-family: "メイリオ", "Meiryo","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "verdana", sans-serif;
  font-size: 16px;
  color: #000000;
  letter-spacing: 0.1em;
  clear: both}

@media (max-width: 599px){
  h2.kt02 {
    border: double 4px #fff;
    padding: 10px 10px 9px 16px;
    font-family: "メイリオ", "Meiryo","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "verdana", sans-serif;
    font-size: 24px;
    color: #fff;
    letter-spacing: 0.1em;
    clear: both}
  }

.contents .kiji h1.mb01 {
  margin: 0px 0 25px 0;
  padding: 12px 5px 10px 20px;
  border: inset 4px #008cd6;
  font-size: 18px;
  font-weight: bold;
  font-family: "メイリオ", "Meiryo","ヒラギノ角ゴ ProN W5", "Hiragino Kaku Gothic ProN", "verdana", sans-serif;
  color: #008cd6;
  letter-spacing: 0.1em;
  clear: both}


.contents .kiji h1.mb02 {
  margin: 0px 0 30px 0;
  padding: 15px 10px 15px 10px;
  border-top: double 2px #008cd6;
  border-bottom: double 2px #008cd6;
  font-size: 16px;
  font-family: "メイリオ", "Meiryo","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "verdana", sans-serif;
  color: #000000;
  letter-spacing: 0.1em;
  clear: both}

.contents .kiji a {
    color: #515151;
  }

.contents .kiji a:hover {
    background-color: #c1ecff}




/*--------- ページネーション -------------*/

/* ページネーション */

.pagination {
  margin: 40px 0 30px;
  text-align: center}

.pagination ul {display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none}

.pagination li a,
.pagination  li > span {
  display: block;
  margin: 0 5px ;
  padding: 6px 8px;
  border: solid 1px #cccccc;
  color: #000000;
  font-size: 14px;
  text-decoration: none}

.pagination li > span {background-color: #efefef;}

.pagination li a:hover {background-color :#eeeeee}

.pagination ul:after {content: "";
  display: block;
  clear:both}

.pagination li {float:left;
  width: auto}

.pagination-index li .dots {
  padding: 6px 2px;
  border-color: transparent;
  background-color: transparent}

@media (max-width: 599px){
  .pagination-index li a,
  .pagination-index li > span
    {margin:0;
    padding:6px 7px;
    border-left:none;
    font-size: 12px}
  .pagination-index li:first-child a,
  .pagination-index li:first-child > span
  {border-left: solid 1px #cccccc}

  .pagination-index li .dots{
    border-right-color: #cccccc}
}

/* 関連記事メニュー */
.mymenu-related {margin:40px 0 0;
    padding:20px;
    border: solid 1px #dddddd;
    background-color: #f6f6f6}

.mymenu-related h2 {padding: 0 0 0 7px;
    border-left: solid 8px #bac6cd;
    border-bottom: none;
    font-size: 20px;
    font-weight: normal}


.mymenu-related h2:before {content:none}

.mymenu-related li a {border: none;
color: #000000}

@media (max-width: 599px){
  .mymenu-related {padding: 10px}

  .mymenu-related li .thumb {width: 80px;
    height: 50px}

  .mymenu-related li .text {margin-left: 95px}
}

@media (min-width: 600px){

  .mymenu-related ul:after{
    content: "";
    display: block;
    clear: both}

  .mymenu-related li {float: left;
    width: 25%;
    padding: 0 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box}

  .mymenu-related li .thumb {
    width: 100%;
    height: 80px;
    margin-bottom: 5px}

  .mymenu-related li .text {margin-left: 0}
}


.mpim {
  padding: 20px 0 0 0;
}

.jigyo {
  padding: 0px 0 20px 75px;
}

.top4menu01 {
  margin: 0px;
  padding: 0px 10px 10px 0px;
}
.top4menu02 {
  margin: 0px;
  padding: 0px 0px 10px 0px;
}

.alinecenter {
  margin: 0px;
  padding: 0px 0px 0px 0px;
}