@charset "UTF-8";
body {
  background-image: none;
  background-color: #f2f2f2; }

#headerbg {
  width: 100%;
  margin: 0 auto;
  background: #fff; }

#topNavi {
  margin-bottom: 0;
  height: 24px; }

#logo {
  margin-bottom: 26px; }

#contentsBox .wrap {
  border-left: none;
  border-right: none; }

#btm {
  background-color: #fdf9f3; }

/* gnav
*******************************************/
.gnav_block {
  clear: both;
  background: linear-gradient(#14448f, #06245c);
  width: 100%;
  position: relative;
  border-bottom: 1px solid #fff; }
  .gnav_block ul {
    width: 900px;
    margin: 0 auto;
    padding: 0;
    position: static;
    border-right: 1px solid #fff;
    list-style: none; }
  .gnav_block ul li {
    float: left;
    width: 20%;
    text-align: center;
    margin: 0 auto;
    position: static; }
  .gnav_block li > a {
    border-left: 1px solid #fff;
    height: 50px;
    position: relative;
    display: block;
    color: #ffffff;
    text-decoration: none; }
    .gnav_block li > a img {
      padding-top: 17px; }
  .gnav_block li > a:before,
  .gnav_block li > a:after {
    border-bottom: solid 3px #d19c37;
    bottom: -1px;
    content: "";
    display: block;
    position: absolute;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    width: 0; }
  .gnav_block li > a:before {
    left: 50%; }
  .gnav_block li > a:after {
    right: 50%; }
  .gnav_block li > a:hover::before,
  .gnav_block li > a:hover::after {
    width: 50%; }
  .gnav_block li .submenu_box {
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    padding: 10px 0 5px;
    background: url(../img/bg_submenu.png);
    color: #ffffff;
    z-index: 2000;
    display: none; }
  .gnav_block li .submenu_box .box_inner {
    width: 900px;
    margin: 10px auto; }
    .gnav_block li .submenu_box .box_inner div {
      text-align: left;
      margin-bottom: 20px; }
      .gnav_block li .submenu_box .box_inner div a {
        text-decoration: none;
        display: block; }
        .gnav_block li .submenu_box .box_inner div a span {
          margin-top: 7px;
          display: block;
          color: #fff;
          font-size: 13px;
          background: url(../img/icon_arrow.png) top 2px left no-repeat;
          padding-left: 20px;
          position: relative; }
        .gnav_block li .submenu_box .box_inner div a span.pdf:after {
          content: url(../img/icon_pdf.png);
          display: inline-block;
          vertical-align: middle;
          padding-left: 10px; }
      .gnav_block li .submenu_box .box_inner div a:hover {
        opacity: 0.7;
        transition: all .3s ease; }

/* flexbox
=========================================== */
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }

.flex.flex-between {
  justify-content: space-between; }

.flex.reverse {
  flex-direction: row-reverse; }

/* ボックスレイアウト
=========================================== */
.flex.col_1 > div {
  width: 100%; }
  @media only screen and (max-width: 767px) {
    .flex.col_1 > div {
      width: 100%; } }

.flex.flex-between.col_1 > div {
  width: 98.5%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_1 > div {
      width: 100%; } }

.flex.col_2 > div {
  width: 50%; }
  @media only screen and (max-width: 767px) {
    .flex.col_2 > div {
      width: 100%; } }

.flex.flex-between.col_2 > div {
  width: 48.5%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_2 > div {
      width: 100%; } }

.flex.col_3 > div {
  width: 33.3333333333%; }
  @media only screen and (max-width: 767px) {
    .flex.col_3 > div {
      width: 100%; } }

.flex.flex-between.col_3 > div {
  width: 31.8333333333%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_3 > div {
      width: 100%; } }

.flex.col_4 > div {
  width: 25%; }
  @media only screen and (max-width: 767px) {
    .flex.col_4 > div {
      width: 100%; } }

.flex.flex-between.col_4 > div {
  width: 23.5%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_4 > div {
      width: 100%; } }

.flex.col_5 > div {
  width: 20%; }
  @media only screen and (max-width: 767px) {
    .flex.col_5 > div {
      width: 100%; } }

.flex.flex-between.col_5 > div {
  width: 18.5%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_5 > div {
      width: 100%; } }

.flex.col_6 > div {
  width: 16.6666666667%; }
  @media only screen and (max-width: 767px) {
    .flex.col_6 > div {
      width: 100%; } }

.flex.flex-between.col_6 > div {
  width: 15.1666666667%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_6 > div {
      width: 100%; } }

.flex.col_7 > div {
  width: 14.2857142857%; }
  @media only screen and (max-width: 767px) {
    .flex.col_7 > div {
      width: 100%; } }

.flex.flex-between.col_7 > div {
  width: 12.7857142857%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_7 > div {
      width: 100%; } }

.flex.col_8 > div {
  width: 12.5%; }
  @media only screen and (max-width: 767px) {
    .flex.col_8 > div {
      width: 100%; } }

.flex.flex-between.col_8 > div {
  width: 11%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_8 > div {
      width: 100%; } }

.flex.col_9 > div {
  width: 11.1111111111%; }
  @media only screen and (max-width: 767px) {
    .flex.col_9 > div {
      width: 100%; } }

.flex.flex-between.col_9 > div {
  width: 9.6111111111%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_9 > div {
      width: 100%; } }

.flex.col_10 > div {
  width: 10%; }
  @media only screen and (max-width: 767px) {
    .flex.col_10 > div {
      width: 100%; } }

.flex.flex-between.col_10 > div {
  width: 8.5%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_10 > div {
      width: 100%; } }

.flex.col_11 > div {
  width: 9.0909090909%; }
  @media only screen and (max-width: 767px) {
    .flex.col_11 > div {
      width: 100%; } }

.flex.flex-between.col_11 > div {
  width: 7.5909090909%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_11 > div {
      width: 100%; } }

.flex.col_12 > div {
  width: 8.3333333333%; }
  @media only screen and (max-width: 767px) {
    .flex.col_12 > div {
      width: 100%; } }

.flex.flex-between.col_12 > div {
  width: 6.8333333333%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_12 > div {
      width: 100%; } }