@charset "UTF-8";

/*----------------------------------------
	企業研修ページ専用
----------------------------------------*/

/* service-wrap 
-------------------------------*/
.service-wrap {
  margin-left: -20px;
  margin-right: -20px;
  padding-bottom: 80px;
  background: var(--c_sub);;
}
@media (min-width: 768px) {
  .service-wrap {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    padding-bottom: 200px;
  }
}

/* service
-------------------------------*/
.service:not(:first-child) {
  margin-top: 10px;
}
/*マークアップの記述順を変更したので表示を上下逆転*/
.service {
  display: flex;
  flex-direction: column-reverse;
}
.service__body {
  position: relative;
  z-index: 1;
  margin: 10px 20px 0;
  padding: 20px 20px;
  background: var(--c_white);
  border: 1px solid var(--c_main);
}
.service__title .sub {
  display: block;
  color: var(--c_main);
}
.service__title .main {
  font-size: 20px;
}
.service__txt {
  margin-top: 25px;
  font-size: 14px;
  line-height: 2;
}
.service__txt ul li{
    list-style: disc;
    list-style-position: inside;
}
.service__txt p + p {
  margin-top: 1em;
}
.service__photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.service__photos img { /*素材写真が小さいので100%拡大化*/
  max-width: none;
  width: 100%;
}
@media (min-width: 568px) {
  /*各サービス紹介内の写真は2カラムのままではすぐに大きくなりすぎるので早めにPC用レイアウトに変更*/
  .service__photos {
    grid-template-columns: repeat(4,1fr);
  }
}
@media (min-width: 768px) {
  /*サービス紹介ブロック*/
  .service {
    position: relative;
    display: block;
    padding-top: 20px; /*ブロック上端から70px下げる*/
  }
  .service:not(:first-child) {
    margin-top: 50px;
  }
  /*イメージ写真*/
  /*画像の高さが500px固定・幅は常に50vwということは、隣り合うテキストブロックの高さと連動させる必要がないため、absoluteで配置しています。*/
  .service__image {
    position: absolute;
    top: 0;
    left: 60%; /*右半分を画像とするため、left起点で配置*/
    width: 50vw;
  }
  .service._reverse .service__image {
    left: auto;
    right: 60%; /*左半分を画像とするため、right起点で配置*/
  }
  .service__image img {
    max-width: none; /*素材写真が小さいので100%拡大化*/
    width: 100%;
    height: 500px; /*デザイン仕様に合わせて高さ固定*/
    object-fit: cover; /*歪み防止*/
  }
  /*テキストブロック*/
  .service__body {
    margin: 0 auto;
    padding: 40px;
    width: calc((716/1084)*150%);
  }
  .service._reverse .service__body {
    margin-left: auto; /*テキストブロックを右に寄せる*/
  }
  .service__title .sub {
    font-size: 22px;
  }
  .service__title .main {
    font-size: 30px;
  }
  .service__txt {
    font-size: 18px;
  }
}