@charset "UTF-8";
/* ====================================
   business Index
==================================== */
/*--------------------------------------------*/
/*-media-size---------------------------------*/
/*--------------------------------------------*/
/****************
* アイコン付与mixin
* $pcw = PC時のアイコン横幅
* $pch = PC時のアイコン高さ
* $spw = SP時のアイコン横幅
* $sph = SP時のアイコン高さ
* $default = 初期表示のアイコンパス
* $hover = ホバー時のアイコンパス
* $top = アイコンの位置
*****************/
/****************
* リンクボタン スタイル
HTML
<div class="btn__normal--green">
    <a href="">企業情報</a>
</div>

$pcmt = PC時のmargin-top(任意の数字を入れる)
$spmt = SP時のmargin-top(任意の数字を入れる)
*****************/
/****************
* もっと見るリンク スタイル
HTML
<div class="link__more--normal">
    <a href="">もっと見る</a>
</div>

$pos = リンクの水平方向の配置(初期：flex-start, 中央寄せ：center, 右寄せ：flex-end )
$pcmt = PC時のmargin-top(任意の数字を入れる)
$spmt = SP時のmargin-top(任意の数字を入れる)
*****************/
/* business-section
==================================== */
.business-section-wrap {
  position: relative;
  color: #fff;
}

.business-section-wrap:nth-child(n+2) {
  margin-top: 68px;
}

@media screen and (max-width: 767px) {
  .business-section-wrap:nth-child(n+2) {
    margin-top: 55px;
  }
}

.business-section-wrap::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 79px;
  background-color: #0f3c2f;
}

@media screen and (max-width: 767px) {
  .business-section-wrap::before {
    bottom: 212px;
  }
}

.business-section-wrap.opt-col-none::before {
  bottom: 54px;
}

@media screen and (max-width: 767px) {
  .business-section-wrap.opt-col-none::before {
    bottom: 104px;
  }
}

.business-section {
  position: relative;
  display: flex;
  padding-top: 69px;
}

@media screen and (max-width: 767px) {
  .business-section {
    display: block;
    padding: 40px 15px 0;
  }
}

.business-section-wrap.opt-col-none .business-section, .business-section.opt-col-none {
  display: block;
  padding-left: 5.27086vw;
}

@media screen and (min-width: 2036px) {
  .business-section-wrap.opt-col-none .business-section, .business-section.opt-col-none {
    padding-left: 107.31479px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1080px) {
  .business-section-wrap.opt-col-none .business-section, .business-section.opt-col-none {
    padding-left: 56.92533px;
  }
}

@media screen and (max-width: 767px) {
  .business-section-wrap.opt-col-none .business-section, .business-section.opt-col-none {
    padding-top: 50px;
    padding-left: 15px;
  }
}

.business-section_header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 19.10688vw;
  width: 19.10688vw;
  padding: 0 1.46413vw 148px;
}

@media screen and (min-width: 2036px) {
  .business-section_header {
    flex-basis: 389.01611px;
    width: 389.01611px;
    padding-left: 29.80966px;
    padding-right: 29.80966px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1080px) {
  .business-section_header {
    flex-basis: 206.35432px;
    width: 206.35432px;
    padding-left: 15.81259px;
    padding-right: 15.81259px;
  }
}

@media screen and (max-width: 767px) {
  .business-section_header {
    display: block;
    width: auto;
    padding: 0;
  }
}

.business-section_header_inner {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .business-section_header_inner {
    width: auto;
  }
}

.business-section_header_image {
  position: relative;
  height: 56px;
}

@media screen and (max-width: 767px) {
  .business-section_header_image {
    height: 50px;
  }
}

.business-section_header_image > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.business-section_header_title {
  font-family: "YakuHanJP", Yu Gothic, "游ゴシック体", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .business-section_header_title {
    font-size: 24px;
  }
}

.business-section_header_title:nth-child(n+2) {
  margin-top: 19px;
}

@media screen and (max-width: 767px) {
  .business-section_header_title:nth-child(n+2) {
    margin-top: 11px;
  }
}

.business-section_body {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .business-section_body:nth-child(n+2) {
    margin-top: 30px;
  }
}

/* business-tile
==================================== */
.business-tile {
  position: relative;
  padding-top: 56.14%;
  background-color: #000;
  color: #fff;
  box-shadow: 9px 9px 29px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow .6s ease;
}

@media screen and (max-width: 767px) {
  .business-tile {
    padding-top: 69.18%;
  }
}

a .business-tile::before {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  right: 0.87848vw;
  bottom: 0.87848vw;
  width: 2.34261vw;
  height: 0.29283vw;
  background: url(/assets/common/img/icon_arrow_right_white.svg) no-repeat center center/100%;
}

@media screen and (min-width: 2036px) {
  a .business-tile::before {
    right: 17.8858px;
    bottom: 17.8858px;
    width: 47.69546px;
    height: 5.96193px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1080px) {
  a .business-tile::before {
    right: 9.48755px;
    bottom: 9.48755px;
    width: 25.30015px;
    height: 3.16252px;
  }
}

@media screen and (max-width: 767px) {
  a .business-tile::before {
    right: 3.2vw;
    bottom: 2.66667vw;
    width: 6.13333vw;
    height: 0.8vw;
  }
}

@media screen and (max-width: 374px) {
  a .business-tile::before {
    right: 10.24px;
    bottom: 8.53333px;
    width: 19.62667px;
    height: 2.56px;
  }
}

@media screen and (min-width: 768px) {
  a:hover .business-tile {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transition-duration: .15s;
  }
}

@media screen and (max-width: 767px) {
  a:active .business-tile {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transition-duration: .15s;
  }
}

.business-tile_inner {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  padding: 0 1.83016vw 2.48902vw;
}

@media screen and (min-width: 2036px) {
  .business-tile_inner {
    padding: 0 37.26208px 50.67643px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1080px) {
  .business-tile_inner {
    padding: 0 19.76574px 26.88141px;
  }
}

@media screen and (max-width: 767px) {
  .business-tile_inner {
    padding: 0 5.06667vw 6.13333vw;
  }
}

@media screen and (max-width: 374px) {
  .business-tile_inner {
    padding: 0 16.21333px 19.62667px;
  }
}

.business-tile_title {
  font-family: "YakuHanJP", Yu Gothic, "游ゴシック体", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
  font-weight: 700;
  font-size: 1.31772vw;
  line-height: 1.75;
}

@media screen and (min-width: 2036px) {
  .business-tile_title {
    font-size: 26.8287px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1080px) {
  .business-tile_title {
    font-size: 14.23133px;
  }
}

@media screen and (max-width: 767px) {
  .business-tile_title {
    font-size: 4.8vw;
  }
}

@media screen and (max-width: 374px) {
  .business-tile_title {
    font-size: 15.36px;
  }
}

.business-tile_body:nth-child(n+2) {
  margin-top: 0.87848vw;
}

@media screen and (min-width: 2036px) {
  .business-tile_body:nth-child(n+2) {
    margin-top: 17.8858px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1080px) {
  .business-tile_body:nth-child(n+2) {
    margin-top: 9.48755px;
  }
}

@media screen and (max-width: 767px) {
  .business-tile_body:nth-child(n+2) {
    margin-top: 1.33333vw;
  }
}

@media screen and (max-width: 374px) {
  .business-tile_body:nth-child(n+2) {
    margin-top: 4.26667px;
  }
}

.business-tile_text {
  font-size: 1.02489vw;
  line-height: 1.6;
}

@media screen and (min-width: 2036px) {
  .business-tile_text {
    font-size: 20.86676px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1080px) {
  .business-tile_text {
    font-size: 11.06881px;
  }
}

@media screen and (max-width: 767px) {
  .business-tile_text {
    font-size: 3.73333vw;
  }
}

@media screen and (max-width: 374px) {
  .business-tile_text {
    font-size: 11.94667px;
  }
}

.business-tile_text:nth-child(n+2) {
  margin-top: 0.87848vw;
}

@media screen and (min-width: 2036px) {
  .business-tile_text:nth-child(n+2) {
    margin-top: 17.8858px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1080px) {
  .business-tile_text:nth-child(n+2) {
    margin-top: 9.48755px;
  }
}

@media screen and (max-width: 767px) {
  .business-tile_text:nth-child(n+2) {
    margin-top: 1.33333vw;
  }
}

@media screen and (max-width: 374px) {
  .business-tile_text:nth-child(n+2) {
    margin-top: 4.26667px;
  }
}

.business-tile_bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.business-tile_bg > img {
  position: absolute;
  top: -1000%;
  left: -1000%;
  right: -1000%;
  bottom: -1000%;
  min-width: calc(500% + 10px);
  max-width: none;
  min-height: calc(500% + 10px);
  margin: auto;
  transform: scale(0.2);
}

a .business-tile_bg > img {
  transition: transform .6s ease;
}

@media screen and (min-width: 768px) {
  a:hover .business-tile_bg > img {
    transform: scale(0.21);
    transition-duration: .15s;
  }
}

@media screen and (max-width: 767px) {
  a:active .business-tile_bg > img {
    transform: scale(0.21);
    transition-duration: .15s;
  }
}