@charset "UTF-8";
/***********************共通設定************************/
/* 文字幅が指定幅を超えたときに「...」を表示する */
/*----------------------------------------------------
transition
----------------------------------------------------*/
/* ホバー変更はやさ*/
/*----------------------------------------------------
フォント
----------------------------------------------------*/
/*----------------------------------------------------
======================================================
mixin-疑似要素
======================================================
----------------------------------------------------*/
/*----------------------------------------------------
テキストホバーで線を表示する

//html例：<p>テキスト<a href="" class="link_text"><span>こちら</span></a>テキス</p>
spanタグにhoverしたときに線画出るようにしている。

----------------------------------------------------*/
/* ホバーで下線が左に消える */
/* ホバーで左から右に線が出る */
/* ホバーで中央から線が出る */
/* ホバーで中央の線がきえる */
/*----------------------------------------------------
mixinで、cssアニメーションを変数で指定できるようにするのに使う
----------------------------------------------------*/
/* インクルードする際はこんなふうに使う */
/* アニメーション名を指定する */
/*----------------------------------------------------
中央寄せ
----------------------------------------------------*/
/* 上下左右中央寄せ */
/* 上下中央寄せ */
/* 左右中央寄せ */
/*----------------------------------------------------
フェードイン
----------------------------------------------------*/
main {
  text-align: initial;
}

#information {
  margin-bottom: 80px;
  /* 751- */
}
@media all and (min-width: 751px) {
  #information {
    margin-bottom: 130px;
  }
}

.catList {
  margin: 63px auto 50px;
  /* -750 */
  /* 751- */
}
@media all and (max-width: 750px) {
  .catList {
    width: 83.582%;
  }
}
.catList ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.catList ul > li {
  width: 50%;
  border-bottom: 1px solid #BDBDBD;
  padding-bottom: 14px;
  position: relative;
}
.catList ul > li a {
  display: block;
  width: 100%;
  height: 100%;
}
.catList ul > li.current {
  border-bottom: 1px solid #3e88c8;
}
.catList ul > li.current a {
  color: #366288;
}
@media all and (min-width: 751px) {
  .catList {
    margin: 25px 0 75px;
  }
  .catList ul {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
  }
  .catList ul > li {
    width: 200px;
  }
  .catList ul > li::before {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    content: "";
    position: absolute;
    height: 1px;
    width: 0%;
    background-color: #366288;
    bottom: -1px;
    left: 0;
  }
  .catList ul > li:not(.current):hover a {
    color: #366288;
  }
  .catList ul > li:not(.current):hover::before {
    width: 100%;
  }
}

/*----------------------------------------------------
記事個別ページ タイトルエリア
----------------------------------------------------*/
.titleArea {
  margin-top: 60px;
  padding-bottom: 45px;
  border-bottom: 1px dotted #DEDEDE;
  margin-bottom: 45px;
  /* 751- */
}
@media all and (min-width: 751px) {
  .titleArea {
    margin-top: 100px;
    padding-bottom: 79px;
    margin-bottom: 80px;
  }
}
.titleArea .sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 15px;
  font-size: 13px;
  /* 751- */
}
@media all and (min-width: 751px) {
  .titleArea .sub {
    margin-bottom: 40px;
    font-size: 14px;
  }
}
.titleArea .date {
  margin-right: 30px;
  font-weight: 400;
  letter-spacing: 0.12em;
  /* 751- */
}
@media all and (min-width: 751px) {
  .titleArea .date {
    font-family: 16px;
  }
}
.titleArea .catArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.titleArea .catArea .cat {
  text-transform: uppercase;
  background-color: #366288;
  color: white;
  margin-right: 10px;
  padding: 1px 15px;
  font-weight: 400;
}
.titleArea .catArea .cat:last-child {
  margin-right: 0px;
}
.titleArea .title {
  font-size: 18px;
  letter-spacing: 0.12em;
  line-height: 1.722;
  font-weight: 500;
  /* 751- */
}
@media all and (min-width: 751px) {
  .titleArea .title {
    font-size: 24px;
  }
}
/*# sourceMappingURL=information.css.map */