@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :  top.css
 style info :  TOPページのみ cssの定義
=================================================================== */
/*@import "_table.scss";  //表*/
/****************************************************************/
/* media */
/****************************************************************/
.media .media_in {
  float: left;
  width: 23.2%;
  margin-right: 2.4%;
}

@media only screen and (max-width: 979px) {
  .media .media_in {
    width: auto;
    margin-right: .8%;
  }
  .media .media_in:last-child {
    margin-right: .8%;
  }
}

@media only screen and (max-width: 690px) {
  .media .media_in {
    margin: 0 16px;
  }
}

.media .media_in:last-child {
  margin-right: 0;
}

.media .media_in .catelist {
  text-align: right;
}

.media .media_in .catelist a {
  font-size: 10px;
  padding: 3px 8px;
  background-color: #007F92;
  color: #ffffff;
  display: inline-block;
}

.media .media_in::after {
  content: "";
  display: table;
  clear: both;
}

.media .media_in .media_img {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  overflow: hidden;
  position: relative;
}

.media .media_in .media_img img {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

.media .media_in .media_txt {
  margin-top: -15px;
  position: relative;
  z-index: 10;
}

.media .media_in .media_txt time {
  margin-bottom: 5px;
}

.media .media_in .media_txt .title06 {
  line-height: 1.6;
}

.media::after {
  content: "";
  display: table;
  clear: both;
}

/*div[class*="col_bg"] > .inner .media_txt{
	padding: 5%;
}*/
.grid_media_section {
  width: 100%;
  overflow: hidden;
}

.grid_media_title {
  float: left;
  width: 25%;
  display: table;
  background-color: #999999;
  color: #ffffff;
  font-size: 2.4rem;
}

.grid_media_title_in {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.grid_media_con {
  float: right;
  width: 75%;
  background-color: #f9f9f9;
}

.grid_media_con .slick-list {
  width: 100%;
}

.grid_media {
  border-left: 1px solid #ffffff;
  padding-bottom: 20px;
  background-color: #f9f9f9;
  width: 33.3333333%;
}

.grid_media .imgliq {
  height: 240px;
}

.grid_media_txt {
  position: relative;
  z-index: 2;
  margin-top: -20px;
  padding: 0 16px;
}

.grid_media_txt .catelist a {
  float: right;
  display: block;
  padding: 8px 16px;
  font-size: 1.2rem;
  color: #ffffff;
  line-height: 1;
  background-color: #555555;
}

.grid_media_txt .catelist a:hover {
  text-decoration: none;
}

.grid_media_txt time {
  clear: right;
}

.grid_media_section .slick-dots {
  bottom: 0;
}

.grid_media_section .slick-dotted.slick-slider {
  margin-bottom: 0;
  padding-bottom: 30px;
}

.grid_media_section .slick-dots li {
  height: 10px;
  margin: 0 4px;
  width: 10px;
}

.grid_media_section .slick-dots li button {
  height: 10px;
  width: 10px;
}

.grid_media_section .slick-dots li button::before {
  line-height: 10px;
  height: 10px;
}

.grid_media_section .slick-prev,
.grid_media_section .slick-next {
  top: 95%;
  left: -60px;
}

[dir="rtl"] .grid_media_section .slick-prev, [dir="rtl"]
.grid_media_section .slick-next {
  left: auto;
  right: -60px;
}

.grid_media_section .slick-next {
  left: -30px;
}

[dir="rtl"] .grid_media_section .slick-next {
  left: -30px;
}

@media only screen and (max-width: 690px) {
  .grid_media_title {
    float: none;
    width: 100%;
    display: block;
  }
  .grid_media_title_in {
    display: block;
    padding: 10px;
  }
  .grid_media_con {
    float: none;
    width: 100%;
  }
  .grid_media {
    border-left: none;
    padding-bottom: 20px;
    width: 100%;
  }
  .grid_media .imgliq {
    height: 180px;
  }
  .grid_media_section .slick-prev,
  .grid_media_section .slick-next {
    top: 95%;
    left: 10px;
  }
  [dir="rtl"] .grid_media_section .slick-prev, [dir="rtl"]
  .grid_media_section .slick-next {
    left: auto;
    right: 10px;
  }
  .grid_media_section .slick-next {
    left: 35px;
    right: 0;
  }
  [dir="rtl"] .grid_media_section .slick-next {
    left: 35px;
    right: 0;
  }
  .grid_media_section .slick-prev::before,
  .grid_media_section .slick-next::before {
    color: #000000;
  }
}

/****************************************************************/
/* button */
/****************************************************************/
/* button /***********************/
.btn a {
  display: inline-block;
  border: 1px solid #007F92;
  color: #007F92;
  text-align: center;
  padding: 10px 10px;
  width: 100%;
  line-height: 1.4;
  background-color: rgba(255, 255, 255, 0.7);
}

.btn_half a {
  display: inline-block;
  border: 1px solid #007F92;
  color: #007F92;
  text-align: center;
  padding: 10px 10px;
  width: 100%;
  line-height: 1.4;
  background-color: rgba(255, 255, 255, 0.7);
  width: 50%;
  max-width: 400px;
}

@media only screen and (max-width: 690px) {
  .btn_half a {
    width: 100%;
  }
}

.btn_onethird a {
  display: inline-block;
  border: 1px solid #007F92;
  color: #007F92;
  text-align: center;
  padding: 10px 10px;
  width: 100%;
  line-height: 1.4;
  background-color: rgba(255, 255, 255, 0.7);
  width: 33.33333%;
  max-width: 240px;
}

@media only screen and (max-width: 690px) {
  .btn_onethird a {
    width: 100%;
  }
}

.btn_twothird a {
  display: inline-block;
  border: 1px solid #007F92;
  color: #007F92;
  text-align: center;
  padding: 10px 10px;
  width: 100%;
  line-height: 1.4;
  background-color: rgba(255, 255, 255, 0.7);
  width: 66%;
  max-width: 400px;
}

@media only screen and (max-width: 690px) {
  .btn_twothird a {
    width: 100%;
  }
}

.btn_free a {
  display: inline-block;
  border: 1px solid #007F92;
  color: #007F92;
  text-align: center;
  padding: 10px 10px;
  width: 100%;
  line-height: 1.4;
  background-color: rgba(255, 255, 255, 0.7);
  display: inline-block;
  width: auto;
  padding: 8px 1.5em;
}

@media only screen and (max-width: 690px) {
  .btn_free a {
    width: 100%;
  }
}

.btn_fs_s a {
  display: inline-block;
  border: 1px solid #007F92;
  color: #007F92;
  text-align: center;
  padding: 10px 10px;
  width: 100%;
  line-height: 1.4;
  background-color: rgba(255, 255, 255, 0.7);
  max-width: 200px;
  padding: 4px 1.5em;
  font-size: 14px;
}

.btn_circle a {
  border-radius: 30px;
}

.btn a::before,
.btn_half a::before,
.btn_onethird a::before,
.btn_twothird a::before,
.btn_fs_s a::before,
.btn_free a::before {
  font-family: FontAwesome;
  content: "\f105";
  padding-right: 8px;
  font-size: 18px;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.btn.downward a::before,
.btn_half.downward a::before,
.btn_onethird.downward a::before,
.btn_twothird.downward a::before,
.btn_fs_s.downward a::before,
.btn_free.downward a::before {
  font-family: FontAwesome;
  content: "\f107";
  padding-right: 8px;
  font-size: 18px;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.btn a:hover,
.btn_half a:hover,
.btn_onethird a:hover,
.btn_twothird a:hover,
.btn_fs_s a:hover,
.btn_free a:hover {
  text-decoration: none;
  background-color: #005E6C;
  color: #ffffff;
  border: 1px solid #005E6C;
}

.btn_bg a {
  text-decoration: none;
  background-color: #007F92;
  color: #ffffff;
}

.btn_bg a:hover {
  background-color: #005E6C;
}

/* txt lilnk *******************/
.txt_link a {
  color: #007F92;
}

.txt_link.arr a::before {
  font-family: FontAwesome;
  content: "\f105";
  padding-right: 8px;
  font-size: 18px;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

/*-----------------------------------------------------------------*/
/* ページ内のナビゲーション */
/*-----------------------------------------------------------------*/
.list_txt_link3,
.list_txt_link4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin-left: -16px;
}

.list_txt_link3 li,
.list_txt_link4 li {
  width: calc((100% - 16px * 3) / 3);
  margin-left: 16px;
  border: 1px solid #007F92;
}

.list_txt_link4 li {
  width: calc((100% - 16px * 4) / 4);
}

.list_txt_link3 a,
.list_txt_link4 a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  line-height: 1.4;
  height: 100%;
}

.list_txt_link3 a::before,
.list_txt_link4 a::before {
  font-family: FontAwesome;
  content: "\f105";
  padding-right: 8px;
  font-size: 18px;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.list_txt_link3 a:hover,
.list_txt_link4 a:hover {
  background-color: #007F92;
  color: #ffffff;
}

@media only screen and (max-width: 690px) {
  .list_txt_link3 li,
  .list_txt_link4 li {
    width: calc((100% - 16px * 2) / 2);
    margin-bottom: 16px;
  }
}

/*-----------------------------------------------------------------*/
/* 基本設定 */
/*-----------------------------------------------------------------*/
.rss_box dl {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #eeeeee;
}

.rss_box dl:after {
  content: "";
  display: table;
  clear: both;
}

.rss_date {
  float: left;
  width: 12%;
}

.rss_title {
  float: right;
  width: 88%;
  padding-left: 20px;
}

.rss_title a {
  color: #007F92;
  text-decoration: underline;
}

.rss_contents {
  clear: both;
  padding: 5px 0 0 calc(12% + 20px);
  font-size: .9em;
}

.rss_new {
  display: inline-block;
  background-color: #007F92;
  color: #ffffff;
  padding: 3px 12px 2px;
  font-size: 10px;
  margin-right: 10px;
  vertical-align: middle;
}

@media only screen and (max-width: 979px) {
  .rss_date {
    width: 14%;
  }
  .rss_title {
    width: 86%;
  }
  .rss_contents {
    padding-left: calc(14% + 15px);
  }
}

@media only screen and (max-width: 690px) {
  .rss_date,
  .rss_title {
    width: 100%;
    float: none;
  }
  .rss_date {
    font-size: .85em;
  }
  .rss_title {
    padding: 3px 0;
  }
  .rss_contents {
    padding: 5px 0 0 0;
  }
}

/* 2個目以降非表示 スライドで表示 ----------*/
.rss_tggle {
  position: relative;
}

.rss_tggle .rss_contents {
  display: none;
}

#close {
  display: none;
}

#rss_open {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

#rss_open::before {
  font-family: FontAwesome;
  content: "\f078";
  display: inline-block;
  font-size: 20px;
  line-height: 40px;
  color: #ffffff;
  background-color: #007F92;
  width: 40px;
  height: 40px;
  text-align: center;
}

#rss_open.active::before {
  content: "\f00d";
}

.rss_tggle .rss_box {
  width: calc(100% - 40px - 20px);
  margin-right: 20px;
}

/*-----------------------------------------------------------------

TOP_NEWS-A

-----------------------------------------------------------------*/
.rss_date {
  width: 100px;
}

.rss_title {
  width: calc(100% - 100px);
}

.col2_ti.rssl05 {
  display: block;
}

.col2_ti .rss_box {
/*  width: calc(18.5% * 3.5 + 1.875% * 2);*/
width:62%;
float: left;
}

.col2_ti .top_banner,
.col2_ti .top_banner02 {
/*  width: calc(18.5% * 1.25 + 1.875% * 2);*/
margin-left: 0;
float: right;
width: 32%;
}

.top_banner .banner_in,
.top_banner .banner_in_bg {
  margin-bottom: 10px;
  list-style: none;
}

.top_banner .banner_in a,
.top_banner .banner_in_bg a {
  position: relative;
  display: block;
  padding: 20px 10%;
  text-align: left;
  font-size: 22px;
  font-weight: bold;
}

.top_banner .banner_in a:hover,
.top_banner .banner_in_bg a:hover {
  text-decoration: none;
  background-color: #005E6C;
}

.top_banner .banner_in a {
  background-color: #007F92;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .5) inset;
}

.top_banner .banner_in a img {
  max-width: 72px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
}

.top_banner .banner_in a:hover {
  background-color: #005E6C;
}

.top_banner .banner_in .material-icons {
  padding-right: 16px;
  font-size: 32px;
  vertical-align: middle;
}

.top_banner .banner_in_bg {
  position: relative;
}

.top_banner .banner_in_bg a {
  display: block;
  position: absolute;
  bottom: 0;
  padding: 5px;
  background-color: rgba(6, 101, 152, 0.8);
  color: #ffffff;
  text-align: center;
  width: 100%;
}

.top_banner .banner_in_bg a:hover {
  background-color: #066598;
}

.banner_in_bg.bigglink:hover a {
  background-color: #066598;
}

#top_rss_a .btn {
  float: right;
}

@media only screen and (max-width: 979px) {
  .col2_ti .rss_box {
    float: none;
    width: 100%;
  }
  .col2_ti .top_banner {
    float: none;
    width: 100%;
    margin-top: 50px;
  }
  .col2_ti .top_banner .banner_in,
  .col2_ti .top_banner .banner_in_bg {
    float: left;
    width: 32%;
    margin-bottom: 0;
  }
  .col2_ti .top_banner .banner_in:not(:last-child),
  .col2_ti .top_banner .banner_in_bg:not(:last-child) {
    margin-right: 2%;
  }
  .col2_ti .top_banner .banner_in a,
  .col2_ti .top_banner .banner_in_bg a {
    padding: 20px 7%;
  }
  .col2_ti .top_banner .banner_in a img,
  .col2_ti .top_banner .banner_in_bg a img {
    max-width: 28px;
    margin-right: 10px;
  }
  .col2_ti .top_banner .banner_in_bg a {
    padding: 5px 5%;
  }
  .top_banner .banner_in a, .top_banner .banner_in_bg a {
	font-size: 16px;
  }

}

@media only screen and (max-width: 690px) {
  .rss_date, .rss_title {
    width: 100%;
  }
  .rss_box dl {
    margin-bottom: 10px;
  }
  .col2_ti .rss_box {
    width: 100%;
  }
  .col2_ti .top_banner {
    width: 100%;
    max-width: 400px;
    margin: 30px auto 0;
  }
  .col2_ti .top_banner .banner_in {
    float: none;
    margin: 10px auto;
    width: 100%;
    max-width: 360px;
  }
  .col2_ti .top_banner .banner_in:not(:last-child) {
    margin-right: auto;
  }
  .col2_ti .top_banner .banner_in a {
    padding: 15px 10%;
  }
  .col2_ti .top_banner .banner_in a img {
    max-width: 28px;
    margin-right: 15px;
  }
  .col2_ti .top_banner .banner_in_bg {
    float: left;
    width: 48%;
    position: static;
  }
  .col2_ti .top_banner .banner_in_bg:not(:last-child) {
    margin-right: 4%;
  }
  .col2_ti .top_banner .banner_in_bg a {
    font-size: 14px;
    line-height: 1.4;
    position: static;
  }
  #top_rss_a .btn {
    float: none;
  }
}

/*-----------------------------------------------------------------

TOP_NEWS-B

-----------------------------------------------------------------*/
#top_rss_b {
  background: url("../image/common/top_rss_bg.jpg") no-repeat center center/cover;
  padding: 60px 0;
}

#top_rss_b .col_bg {
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #ffffff;
  padding: 40px 24px;
}

#top_rss_b .col {
  width: calc((100% - 40px) / 2);
}

.top_rss_b_con dl {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #ffffff;
}

.top_rss_b_con dl .rss_date {
  display: block;
  width: 100%;
  float: none;
}

.top_rss_b_con dl .rss_title {
  display: block;
  width: 100%;
  padding-left: 0;
  float: none;
}

.top_rss_b_con dl .rss_contents {
  display: none;
}

@media only screen and (max-width: 979px) {
  #top_rss_b .col {
    width: calc((100% - 24px) / 2);
  }
}

@media only screen and (max-width: 690px) {
  #top_rss_b {
    padding: 40px 0;
  }
  #top_rss_b .col {
    width: 100%;
  }
  #top_rss_b .col_bg {
    padding: 32px 24px;
  }
}

/*-----------------------------------------------------------------

TOP_NEWS-C

-----------------------------------------------------------------*/
#top_rss_c {
  padding: 48px 0 32px;
  /*bottom値、top-16px*/
  background-color: #f9f9f9;
}

#top_rss_c .inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

#top_rss_c .title {
  color: #007F92;
  font-size: 3.2rem;
  position: relative;
  line-height: 1;
  display: inline-block;
}

#top_rss_c .title::after {
  content: "";
  width: 60px;
  height: 1px;
  background-color: #007F92;
  display: inline-block;
  margin-left: 16px;
  vertical-align: middle;
}

#top_rss_c .rss_box {
  padding-left: 4em;
}

#top_rss_c dl {
  border-bottom: none;
  padding-bottom: 0;
}

@media only screen and (max-width: 979px) {
  #top_rss_c .inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  #top_rss_c .title {
    font-size: 2.8rem;
    margin-right: 100px;
    margin-bottom: 16px;
  }
  #top_rss_c .title::after {
    width: 40px;
    top: 14px;
    left: calc(100% + 14px);
  }
  #top_rss_c .rss_box {
    padding-left: 0;
  }
}

/*-----------------------------------------------------------------

TOP_NEWS-D

-----------------------------------------------------------------*/
#top_rss_d {
  padding: 70px 0;
  background-color: #ffffff;
  background: url("../image/top_rss_d_bg.jpg") no-repeat center/cover;
}

.rss_d_name {
  background-color: #005E6C;
  border-radius: 5px;
  padding: 0 16px;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 4px;
}

.rss_d_name .rss_date {
  width: 158px;
  padding: 8px 20px;
  font-size: 15px;
  position: relative;
}

.rss_d_name .rss_date::after {
  content: ":";
  display: inline-block;
  position: absolute;
  right: 0;
}

.rss_d_name .rss_title {
  width: calc(100% - 158px);
  padding: 8px 16px 8px 40px;
  font-size: 15px;
}

.top_rss_d_con {
  padding: 0 16px;
}

.top_rss_d_con .rss_date {
  width: 158px;
  padding: 8px 20px;
  font-size: 15px;
  position: relative;
}

.top_rss_d_con .rss_date::after {
  content: ":";
  display: inline-block;
  position: absolute;
  right: 0;
}

.top_rss_d_con .rss_title {
  width: calc(100% - 158px);
  padding: 8px 16px 8px 40px;
  font-size: 15px;
}

.top_rss_d_con .rss_title a {
  color: #333333;
}

.top_rss_d_con .rss_title a:hover {
  color: #007F92;
}

.top_rss_d_con .rss_contents {
  display: none;
}

.top_rss_d_con dl {
  padding: 10px 0;
  border-bottom: 1px solid #ffffff;
}

.top_rss_d_con dl::after {
  content: "";
  display: table;
  clear: both;
}

@media only screen and (max-width: 690px) {
  #top_rss_d {
    padding: 50px 0;
  }
  .rss_d_name .rss_date {
    width: 100%;
    position: static;
    padding: 8px 0 0;
  }
  .rss_d_name .rss_date::after {
    padding-left: 16px;
    position: static;
  }
  .rss_d_name .rss_title {
    width: 100%;
    padding: 0 0 8px;
  }
  .top_rss_d_con .rss_date {
    width: 100%;
    position: static;
    padding: 8px 0 0;
  }
  .top_rss_d_con .rss_date::after {
    padding-left: 16px;
    position: static;
  }
  .top_rss_d_con .rss_title {
    width: 100%;
    padding: 0 0 8px;
  }
}

/*-----------------------------------------------------------------*/
/*メインイメージ*/
/*-----------------------------------------------------------------*/
#top_mainimage {
  position: relative;
}

.flexslider .slides > li {
  width: 100%;
  height: 480px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
}

.mainimage01 {
  background-image: url("../image/mainimage01_bg.jpg");
}

.mainimage02 {
  background-image: url("../image/mainimage02_bg.jpg");
}

.mainimage03 {
  background-image: url("../image/mainimage03_bg.jpg");
}

.topmain_catch {
  max-width: 60vw;
  width: 100%;
  position: absolute;
  top: 20%;
  left: 20vw;
  text-align: center;
  font-size: 40px;
  line-height: 1.4;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.topmain_txt {
  max-width: 60vw;
  width: 100%;
  position: absolute;
  top: 35%;
  left: 20vw;
  text-align: center;
  line-height: 2.2;
  color: #ffffff;
  font-size: 16px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.flexslider .slides > li img {
  display: none;
}

@media only screen and (max-width: 979px) {
  #top_mainimage {
    padding-top: 95px;
  }
  .flexslider .slides > li {
    height: auto;
  }
  .mainimage01,
  .mainimage02,
  .mainimage03 {
    background-image: none;
  }
  .flexslider .slides > li img {
    display: block;
    width: 100%;
    height: auto;
  }
  .topmain_catch {
    max-width: 80vw;
    top: 10%;
    left: 10vw;
  }
  .topmain_txt {
    max-width: 80vw;
    top: 25%;
    left: 10vw;
    line-height: 1.8;
  }
}

@media only screen and (max-width: 690px) {
  #top_mainimage {
    margin-bottom: 30px;
    padding-top: 72px;
  }
  .topmain_catch {
    max-width: 90vw;
    top: 16%;
    left: 5vw;
    font-size: 28px;
  }
  .topmain_txt {
    max-width: 90vw;
    top: 35%;
    left: 5vw;
    line-height: 1.5;
    font-size: 12px;
  }
}

/*-----------------------------------------------------------------*/
/*メインイメージ*/
/*-----------------------------------------------------------------*/
/*.img100.imgcircle img{
	max-width: 260px;
	margin-bottom: 30px;
}
@media only screen and (max-width: 979px) {
	.img100.imgcircle img{max-width: 100%;}
}
@media only screen and (max-width: 690px) {
	.img100.imgcircle img{
		max-width: 220px;
		margin-bottom: 25px;
	}
}*/
.top_att {
  background-color: #f9f9f9;
}

.top_att .b_r {
  padding: 5% 3%;
  border-right: .5px solid #ffffff;
  border-left: .5px solid #ffffff;
}

.top_att .b_r:first-child {
  border-left: none;
}

.top_att .b_r:last-child {
  border-right: none;
}

@media only screen and (max-width: 691px) {
  .top_att {
    padding: 0;
  }
  .top_att .b_r {
    padding: 8% 0;
    border-top: .5px solid #ffffff;
    border-left: none;
    border-right: none;
  }
}

.banner_sbs3 {
  width: 100%;
  padding: 0 24px;
  margin-right: auto;
  margin-left: auto;
  max-width: calc(1024px + 48px);
}

@media only screen and (max-width: 690px) {
  .banner_sbs3 {
    padding: 0 3%;
  }
}

.banner_sbs2 {
  width: 100%;
  padding: 0 24px;
  margin-right: auto;
  margin-left: auto;
  max-width: calc(880px + 48px);
}

@media only screen and (max-width: 979px) {
  .banner_sbs2 {
    width: 88%;
  }
}

@media only screen and (max-width: 690px) {
  .banner_sbs2 {
    width: 90%;
  }
}

/*-----------------------------------------------------------------*/
/* top 共通タイトル */
/*-----------------------------------------------------------------*/
.title_jp {
  font-size: 32px;
  line-height: 1.3;
  color: #ffffff;
  text-align: center;
  color: #333333;
  line-height: 1.2;
  margin-bottom: 8px;
}

@media only screen and (max-width: 690px) {
  .title_jp {
    font-size: 30px;
  }
}

.title_en {
  font-size: 12px;
  line-height: 1.4;
  font-weight: bold;
  text-align: center;
  color: #007F92;
  letter-spacing: .1em;
}

.title_jp.yoko,
.title_en.yoko {
  display: inline-block;
}

.title_en.yoko {
  margin-left: 5px;
}

/*-----------------------------------------------------------------*/
/* top area1 */
/*-----------------------------------------------------------------*/
/*#area01{
	.biglink{
		border: 1px solid $border-color-base;
		border-bottom: 2px solid $key-color;
		padding-top: 15px;
		.txtarea{
			padding: 20px;
			text-align: center;
			.title{
				font-size: 20px;
				margin-bottom: 10px;
				a:hover{text-decoration: none;}
			}
		}
	}
}*/


/*-----------------------------------------------------------------*/
/* top area05 */
/*-----------------------------------------------------------------*/
#area05 .btn {
  float: right; }



/*-----------------------------------------------------------------*/
/* top area B */
/*-----------------------------------------------------------------*/
#area_b {
  background: url("../image/top_area_b_bg.jpg") no-repeat scroll center center/cover;
  padding: 50px 0;
}

#area_b .biglink {
  border: 1px solid #f3f3f3;
  border-bottom: 2px solid #066598;
  padding-top: 40px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 2px 6px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 6px 4px rgba(0, 0, 0, 0.2);
}

#area_b .biglink .img100 img {
  max-width: 120px;
}

#area_b .biglink .txtarea {
  padding: 30px 20px 35px;
  text-align: center;
}

#area_b .biglink .txtarea .title {
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: bold;
}

#area_b .biglink .txtarea .title a:hover {
  text-decoration: none;
}

@media only screen and (max-width: 690px) {
  #area_b {
    padding: 30px 0;
  }
  #area_b .inner {
    padding: 0 5%;
  }
}

/*-----------------------------------------------------------------*/
/* top area C */
/*-----------------------------------------------------------------*/
#area_c {
  background: url(../image/top_area_c_bg.jpg) no-repeat center/cover;
  padding: 80px 0;
  text-align: center;
}

#area_c .txt_area {
  padding: 0 20%;
  line-height: 2;
}

@media only screen and (max-width: 979px) {
  #area_c .txt_area {
    padding: 0 8%;
  }
}

@media only screen and (max-width: 690px) {
  #area_c {
    padding: 30px 0;
  }
  #area_c {
    padding: 40px 0;
  }
  #area_c .txt_area {
    padding: 0 5%;
    line-height: 1.6;
  }
}

/*-----------------------------------------------------------------*/
/* top area D */
/*-----------------------------------------------------------------*/
#area_d .area_d_box {
  border-left: .5px solid #ffffff;
  border-right: .5px solid #ffffff;
  background-color: #f5f5f5;
  text-align: center;
  padding: 40px 8px;
  -webkit-transition: all .2s ease 0s;
  -o-transition: all .2s ease 0s;
  transition: all .2s ease 0s;
}

#area_d .material-icons {
  font-size: 56px;
  color: #ffffff;
  background-color: #007F92;
  border-radius: 50%;
  padding: 7%;
  line-height: 1;
  margin-bottom: 32px;
}

#area_d .area_d_box.bl-hover {
  background-color: #007F92;
  color: #ffffff;
}

#area_d .area_d_box.bl-hover a {
  color: #ffffff;
  text-decoration: none;
}

#area_d .area_d_box.bl-hover .material-icons {
  color: #007F92;
  background-color: #ffffff;
}

@media only screen and (max-width: 979px) {
  #area_d .area_d_box {
    border-bottom: 1px solid #ffffff;
  }
}

@media only screen and (max-width: 690px) {
  #area_d .area_d_box {
    border-bottom: 1px solid #ffffff;
    border-left: none;
    border-right: none;
  }
}

/*-----------------------------------------------------------------*/
/* area submain A */
/*-----------------------------------------------------------------*/
.col2_vm {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
}

.col2_vm .flt_vm, .col2_vm .flr_vm {
  width: 50%;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.col2_vm .flt_vm {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.area_e_box {
  background: url("../image/top_area_e_bg.jpg") no-repeat scroll center center/cover;
}

.area_e_box .area_e_box_in {
  padding: 0 8% 0 16%;
}

@media only screen and (max-width: 979px) {
  .col2_vm {
    display: block;
  }
  .col2_vm .flt_vm, .col2_vm .flr_vm {
    width: 100%;
    display: block;
  }
  .area_e_box .area_e_box_in {
    padding: 10% 5%;
  }
}

/*-----------------------------------------------------------------*/
/* top area F */
/*-----------------------------------------------------------------*/
#area_f {
  background: url("../image/top_area_f_bg.jpg") no-repeat scroll center center/cover;
  max-width: 100%;
  height: 450px;
  width: auto;
}

#area_f .area_f_block {
  display: table;
  height: 450px;
  width: 50%;
}

#area_f .area_f_block .area_f_box {
  background-color: rgba(162, 188, 14, 0.6);
  color: #ffffff;
  display: table-cell;
  padding: 0 10%;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}

/* 中央寄せ ⇒ .area05_block {margin: 0 auto;}
   左寄せ ⇒ .area05_block {margin: 0 0 0 auto;} */
@media only screen and (max-width: 979px) {
  #area_f {
    height: auto;
  }
  #area_f .area_f_block {
    display: block;
    height: auto;
    width: 90%;
    margin: auto;
  }
  #area_f .area_f_block .area_f_box {
    padding: 32px 10%;
  }
}

@media only screen and (max-width: 690px) {
  #area_f .area_f_block {
    width: 100%;
  }
}

/*-----------------------------------------------------------------*/
/* top area_g */
/*-----------------------------------------------------------------*/
#area_g {
  background-color: #F8F8EB;
  padding: 30px 0;
  line-height: 1.4;
}

#area_g .col_bg_white {
  -webkit-box-shadow: 5px 5px 10px -3px rgba(0, 0, 0, 0.15);
  box-shadow: 5px 5px 10px -3px rgba(0, 0, 0, 0.15);
  padding: 24px;
}

#area_g .micon {
  text-align: center;
  width: 140px;
}

#area_g .col_bg_white {
  -webkit-transition: all .2s ease 0s;
  -o-transition: all .2s ease 0s;
  transition: all .2s ease 0s;
}

#area_g .col_bg_white .flr {
  width: calc(100% - 140px);
  padding-left: 24px;
}

#area_g .material-icons {
  background-color: #007F92;
  border-radius: 50%;
  color: #ffffff;
  font-size: 80px;
  line-height: 1;
  padding: 15%;
  margin: auto;
}

#area_g .col_bg_white.bl-hover {
  background-color: #007F92;
  color: #ffffff;
}

#area_g .col_bg_white.bl-hover .material-icons {
  color: #007F92;
  background-color: #ffffff;
}

#area_g .col_bg_white.bl-hover a {
  color: #ffffff;
  text-decoration: none;
}

@media only screen and (max-width: 979px) {
  #area_g .micon {
    width: 90px;
  }
  #area_g .col_bg_white .flr {
    width: calc(100% - 90px);
  }
  #area_g .material-icons {
    font-size: 64px;
    padding: 10%;
  }
}

@media only screen and (max-width: 690px) {
  #area_g .col_bg_white {
    padding: 16px;
  }
  #area_g .micon {
    text-align: center;
    width: 80px;
    float: left;
  }
  #area_g .col_bg_white .flr {
    width: calc(100% - 80px);
    padding-left: 16px;
    float: right;
  }
  #area_g .material-icons {
    font-size: 48px;
    padding: 10%;
  }
}

/*-----------------------------------------------------------------*/
/* top area H */
/*-----------------------------------------------------------------*/
#area_h {
  background: url("../image/top_area_h_bg.jpg") no-repeat scroll center center/cover;
  background-attachment: fixed;
  padding: 56px 0;
  color: #ffffff;
}

/*-----------------------------------------------------------------*/
/* top area I */
/*-----------------------------------------------------------------*/
#area_i {
  background-color: #f5f5f5;
  padding: 50px 1.5%;
}

#area_i .col_bg_white {
  padding: 16px;
  position: relative;
  -webkit-box-shadow: 5px 5px 10px -3px rgba(0, 0, 0, 0.15);
  box-shadow: 5px 5px 10px -3px rgba(0, 0, 0, 0.15);
  border: 2px solid #ffffff;
  -webkit-transition: all 0.1s ease 0s;
  -o-transition: all 0.1s ease 0s;
  transition: all 0.1s ease 0s;
}

#area_i .col_bg_white.bl-hover {
  top: 1px;
  left: 1px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: #007F92;
}

@media only screen and (max-width: 690px) {
  #area_i {
    padding: 0 5%;
  }
}

/*-----------------------------------------------------------------*/
/* top area J */
/*-----------------------------------------------------------------*/
#area_j {
  padding: 70px 1.5%;
}

.area_j_block,
.area_j_image {
  overflow: hidden;
  position: relative;
}

.area_j_image::after {
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.area_j_image_txt {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
}

.area_j_block .area_j_image::after {
  background-color: rgba(0, 0, 0, 0.4);
}

.area_j_block.bl-hover .area_j_image::after {
  background-color: rgba(0, 0, 0, 0.5);
}

.area_j_caption {
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  top: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 20px;
  position: absolute;
  text-align: center;
  width: 100%;
  color: #ffffff;
}

.area_j_block .area_j_caption {
  top: 50%;
  opacity: 1;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 3;
}

.area_j_title {
  font-size: 30px;
  font-weight: bold;
}

#area_j_02 .flt, #area_j_02 .flr {
  border-right: 0.5px solid #ffffff;
  border-left: 0.5px solid #ffffff;
}

@media only screen and (max-width: 979px) {
  .area_j_image_txt {
    display: none;
  }
  .area_j_caption {
    opacity: 1;
    padding: 10px 8px 0;
    color: #fff;
  }
  .area_j_block:hover .area_j_image::after {
    background-color: transparent;
  }
  .area_j_title{
	  font-size:25px;
  }
}

@media only screen and (max-width: 690px) {
  #area_j {
    padding: 0 5%;
  }
  #area_j_02 .flt {
    border-bottom: 1px solid #ffffff;
    border-right: none;
    border-left: none;
    margin-bottom: 24px;
  }
  .area_j_title {
    font-size: 22px;
  }
}

/*-----------------------------------------------------------------*/
/* top area K */
/*-----------------------------------------------------------------*/
.area_k_box .area_k_box_in {
  padding: 0 12% 0 8%;
}

#area_k .col2_vm .flt_vm {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}

#area_k .col2_vm .flr_vm {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}

@media only screen and (max-width: 979px) {
  .area_k_box .area_k_box_in {
    padding: 10% 5%;
  }
}

/*-----------------------------------------------------------------

top area L

-----------------------------------------------------------------*/
.area_l_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.area_l_list li {
  width: calc((100% - 16px * 3) / 4);
  margin-left: 16px;
  margin-bottom: 30px;
  border: 1px solid #f3f3f3;
  list-style: none;
}

.area_l_list li:nth-child(4n + 1) {
  margin-left: 0;
}

@media only screen and (max-width: 979px) {
  .area_l_list li {
    width: calc((100% - 16px * 2) / 3);
    margin-bottom: 16px;
  }
  .area_l_list li:nth-child(2n + 1) {
    margin-left: auto;
  }
  .area_l_list li:nth-child(3n + 1) {
    margin-left: 0;
  }
}

@media only screen and (max-width: 690px) {
  .area_l_list li {
    width: calc((100% - 16px * 1) / 2);
    margin-bottom: 16px;
  }
  .area_l_list li:nth-child(2n + 1) {
    margin-left: 0;
  }
  .area_l_list li:nth-child(3n + 1) {
    margin-left: auto;
  }
}

.area_l_list a {
  display: block;
  padding: .5em 2em .5em 1em;
  font-size: 15px;
  letter-spacing: -.05em;
  line-height: 1.4;
  text-decoration: none;
  border-top: 1px solid #f3f3f3;
  position: relative;
}

.area_l_list a::after {
  font-family: FontAwesome;
  content: "\f178";
  display: block;
  padding-left: 8px;
  font-size: 16px;
  position: absolute;
  top: calc(50% - 8px);
  right: 8px;
}

.area_l_list li.bl-hover .area_l_list a {
  background-image: url("../image/common/arr03.png");
  color: #007F92;
}

.area_l_list li.bl-hover {
  background-color: #f3f3f3;
}

.area_l_list li.sns {
  border: none;
}

.sns_ban:not(:last-child) {
  margin-bottom: 8px;
}

.sns_ban a {
  display: block;
  text-align: center;
  padding: 18px 8px;
}

.sns_ban a::after {
  display: none;
}

.sns_fb a {
  background-color: #315096;
}

.sns_yt a {
  background-color: #CD201F;
}

.sns_line a {
  background-color: #00C300;
}

/*-----------------------------------------------------------------*/
/* top area M */
/*-----------------------------------------------------------------*/
#area_m .rss_box {
  position: relative;
}

#area_m .rss_box .btn {
  position: absolute;
  top: 0;
  right: 0;
}

/*-----------------------------------------------------------------*/
/* top area N */
/*-----------------------------------------------------------------*/
#area_n {
  background: url("../image/top_area_n_bg.jpg") no-repeat scroll center top/cover;
  padding: 48px 40% 48px 8%;
}

@media only screen and (max-width: 690px) {
  #area_n {
    background: url("../image/top_area_n_bg_sp.jpg") no-repeat scroll center top/100% auto;
    padding: 10px 0 0;
  }
  #area_n .area_n_block {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 2em;
    width: 88%;
    margin: 240px auto 0;
  }
}

@media only screen and (max-width: 479px) {
  #area_n .area_n_block {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 1em;
    margin: 180px auto 0;
  }
}

/*-----------------------------------------------------------------

top area O 

-----------------------------------------------------------------*/
#area_o_con {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#area_o_con .area_o_col {
  position: relative;
  margin-left: 4px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: calc(100vw / 8);
}

#area_o_con .area_o_col.bl-hover::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#area_o_con.col5 .area_o_col {
  width: calc((100% - 4px * 4) / 5);
}

#area_o_con.col5 .area_o_col:nth-child(5n + 1) {
  margin-left: 0;
  margin-bottom: 80px;
}

#area_o_con.col4 .area_o_col {
  width: calc((100% - 4px * 3) / 4);
}

#area_o_con.col4 .area_o_col:nth-child(4n + 1) {
  margin-left: 0;
  margin-bottom: 80px;
}

#service01 {
  background-image: url("../image/area_o_img01.jpg");
}

#service02 {
  background-image: url("../image/area_o_img01.jpg");
}

#service03 {
  background-image: url("../image/area_o_img01.jpg");
}

#service04 {
  background-image: url("../image/area_o_img01.jpg");
}

#service05 {
  background-image: url("../image/area_o_img01.jpg");
}

#service06 {
  background-image: url("../image/area_o_img01.jpg");
}

#service07 {
  background-image: url("../image/area_o_img01.jpg");
}

#service08 {
  background-image: url("../image/area_o_img01.jpg");
}

#service09 {
  background-image: url("../image/area_o_img01.jpg");
}

#service10 {
  background-image: url("../image/area_o_img01.jpg");
}

#service11 {
  background-image: url("../image/area_o_img01.jpg");
}

#service12 {
  background-image: url("../image/area_o_img01.jpg");
}

#service13 {
  background-image: url("../image/area_o_img01.jpg");
}

#service14 {
  background-image: url("../image/area_o_img01.jpg");
}

#service15 {
  background-image: url("../image/area_o_img01.jpg");
}

.area_o_title {
  position: absolute;
  top: 0;
  width: 100%;
  padding: 12px 1em;
  line-height: 1.2;
  background-color: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  z-index: 2;
}

.area_o_btn {
  position: absolute;
  bottom: -20px;
  right: 0;
  z-index: 2;
}

.area_o_btn a {
  display: block;
  line-height: 40px;
  padding: 0 1em;
  background: #007F92;
  color: #ffffff;
  text-decoration: none;
}

.area_o_btn a::after {
  font-family: FontAwesome;
  content: "\f178";
  display: inline-block;
  padding-left: 8px;
  vertical-align: middle;
  font-size: 16px;
}

.area_o_btn a:hover {
  background-color: #005E6C;
}

.area_o_col.bl-hover .area_o_btn a {
  background-color: #005E6C;
}

@media only screen and (max-width: 1119px) {
  #area_o_con .area_o_col {
    height: calc(100vw / 5);
  }
  .area_o_title {
    padding: 12px .5em;
  }
  #area_o_con.col5 .area_o_col {
    width: calc((100% - 4px * 2) / 3);
  }
  #area_o_con.col5 .area_o_col:nth-child(3n + 1) {
    margin-left: 0;
    margin-bottom: 48px;
  }
  #area_o_con.col5 .area_o_col:nth-child(5n + 1) {
    margin-bottom: 48px;
    margin-left: auto;
  }
  #area_o_con.col4 .area_o_col {
    width: calc((100% - 4px * 2) / 3);
  }
  #area_o_con.col4 .area_o_col:nth-child(3n + 1) {
    margin-left: 0;
    margin-bottom: 48px;
  }
  #area_o_con.col4 .area_o_col:nth-child(4n + 1) {
    margin-bottom: 48px;
    margin-left: auto;
  }
}

@media only screen and (max-width: 690px) {
  #area_o_con .area_o_col {
    height: calc(100vw / 4);
  }
  #area_o_con.col5 .area_o_col {
    width: calc((100% - 4px * 1) / 2);
  }
  #area_o_con.col5 .area_o_col:nth-child(2n + 1) {
    margin-left: 0;
    margin-bottom: 48px;
  }
  #area_o_con.col5 .area_o_col:nth-child(3n + 1) {
    margin-left: auto;
    margin-bottom: 48px;
  }
  #area_o_con.col4 .area_o_col {
    width: calc((100% - 4px * 1) / 2);
  }
  #area_o_con.col4 .area_o_col:nth-child(2n + 1) {
    margin-left: 0;
    margin-bottom: 48px;
  }
  #area_o_con.col4 .area_o_col:nth-child(3n + 1) {
    margin-left: auto;
    margin-bottom: 48px;
  }
  .area_o_title {
    padding: 10px .5em;
    font-size: 16px;
  }
  .area_o_btn a {
    font-size: 14px;
  }
  .area_o_btn a:hover {
    background-color: #005E6C;
  }
}

@media only screen and (max-width: 480px) {
  #area_o_con .area_o_col {
    height: calc(100vw / 2);
  }
}

/*-----------------------------------------------------------------

area_p  PC 4列 / タブレット 2列 / スマホ 2列 

-----------------------------------------------------------------*/
#area_p {
  background-color: #f5f5f5;
  padding: 70px 0 90px;
}

.col4_m_421 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col4_m_421 .col {
  width: calc((100% - 16px * 3) / 4);
  margin-left: 16px;
}

.col4_m_421 .col:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 979px) {
  .col4_m_421 .col {
    width: calc((100% - 16px * 1) / 2);
    margin-bottom: 16px;
  }
  .col4_m_421 .col:nth-child(2n + 1) {
    margin-left: 0;
  }
}

@media only screen and (max-width: 690px) {
  .col4_m_421 .col {
    width: 100%;
    margin-bottom: 16px;
    margin-left: 0;
  }
}

.area_p_title {
  color: #ffffff;
  background-color: #005E6C;
  padding: 8px 12px;
  font-size: 15px;
}

.area_p_title .material-icons {
  vertical-align: middle;
  font-size: 20px;
  margin-right: 8px;
}

.area_p_list li {
  margin-top: 5px;
  list-style: none;
}

.area_p_list li a {
  display: block;
  background-color: #ffffff;
  padding: 8px 12px;
  border: 2px solid #ffffff;
  text-decoration: none;
}

.area_p_list li a::before {
  font-family: FontAwesome;
  content: "\f105";
  padding-right: 8px;
  font-size: 18px;
  text-decoration: none;
  position: relative;
  display: inline-block;
  font-size: 14px;
}

.area_p_list li a:hover {
  border-color: #007F92;
}

@media only screen and (max-width: 979px) {
  #area_p {
    padding: 50px 0 60px;
  }
}

@media only screen and (max-width: 690px) {
  #area_p {
    padding: 40px 0 50px;
  }
  .area_p_list {
    display: none;
  }
}

/*-----------------------------------------------------------------*/
/* top グリット2 用 */
/*-----------------------------------------------------------------*/
.gridline_section {
  width: 100%;
  overflow: hidden;
}

.gridline_section article {
  margin: 1px auto 0;
  overflow: hidden;
  position: relative;
  height: 320px;
}

.gridline_section .flt:not(:first-child) {
  border-left: .5px solid #ffffff;
}

.col3.gridline_section .flr {
  width: calc(33.33333% - 1px);
}

.col4.gridline_section .flr {
  width: calc(25% - 1px);
}

.col2.gridline_section .flr {
  border-left: .5px solid #ffffff;
}

.gridline_section article a {
  text-decoration: none;
}

/*.blink.imgliq::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0);
	transition: all .4s ease 0s;
}
.blink.imgliq.black_tm::before{background-color: rgba(0,0,0,.3);}
.blink.imgliq:hover::before{background-color: rgba(204,0,0,.3);}*/
.gridline_section .bg_color {
  background-color: #f5f5f5;
}

.gridline_section .bg_fixed {
  background-attachment: fixed;
}

.gridline_section .grid_icon::before {
  -webkit-transition: all .4s ease 0s;
  -o-transition: all .4s ease 0s;
  transition: all .4s ease 0s;
  content: "";
  border: 4px solid rgba(204, 0, 0, 0);
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
}

.gridline_section .grid_icon:hover::before {
  border: 4px solid #cc0000;
}

.gridline_section .grid_icon img {
  max-width: 160px;
}

.grid_txt {
  display: table;
  position: relative;
  z-index: 2;
  -webkit-transition: all .4s ease 0s;
  -o-transition: all .4s ease 0s;
  transition: all .4s ease 0s;
  /*height: 100%;*/
  width: 100%;
  padding: 24px;
}

.grid_txt_in {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.grid_txt_in.bottom {
  vertical-align: bottom;
  text-align: left;
}

.gridline_section_catch,
.gridline_section_catch a {
  /*color: #ffffff;*/
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1.4;
  -webkit-transition: all .4s ease 0s;
  -o-transition: all .4s ease 0s;
  transition: all .4s ease 0s;
}

.gridline_section_txt,
.gridline_section_txt a {
  /*color: #ffffff;*/
  line-height: 1.4;
  margin-top: 8px;
}

.gridline_section .grid_icon img {
  max-width: 160px;
}

@media only screen and (max-width: 979px) {
  .gridline_section article {
    height: 240px;
  }
  .col4.gridline_section .flr,
  .col4.gridline_section .flt {
    width: calc(25% - .5px);
  }
  .gridline_section .grid_icon img {
    max-width: 120px;
  }
  .gridline_section_txt {
    font-size: 1.4rem;
  }
  .grid_txt {
    padding: 24px 16px;
  }
}

@media only screen and (max-width: 690px) {
  .gridline_section article {
    height: 160px;
  }
  .col4.gridline_section .flr,
  .col4.gridline_section .flt {
    width: 50%;
    float: left;
    border-left: 1px solid #ffffff;
  }
  .gridline_section .flt:nth-child(odd),
  .col3.gridline_section .flt:nth-child(2n) {
    border-left: none;
  }
  .col3.gridline_section .flr,
  .col2.gridline_section .flr {
    width: 100%;
    border-left: none;
  }
  .col2.gridline_section .flt {
    margin-bottom: 0;
  }
  .gridline_section .grid_icon img {
    max-width: 100px;
  }
  .gridline_section_txt {
    display: none;
  }
  .grid_txt {
    padding: 16px 8px;
  }
  .gridline_section_catch,
  .gridline_section_catch a {
    font-size: 2rem;
  }
}