@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {
  --color-white: #fff;
  --color-gray: #DBDBDB;
  --font-en: "Lato", sans-serif;
}

/************ Common parts **************/
.container-m {
  padding: 0 15px;
  width: min(100%, 1230px);
  margin: auto;
}

.flexbox {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-justify-start {
  justify-content: flex-start;
}

.flex-justify-end {
  justify-content: flex-end;
}

.flex-justify-center {
  justify-content: center;
}

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

.flex-align-start {
  align-items: flex-start;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-align-center {
  align-items: center;
}

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

.flex-shrink-0{
  flex-shrink: 0;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-120 {
  margin-top: clamp(70px, 7vw, 120px);
}

.mb-5{
  margin-bottom: 5px !important;
}

.mb-10{
  margin-bottom: 10px;
}

.mb-15{
  margin-bottom: 15px;
}

.mb-20{
  margin-bottom: 20px;
}

.mb-40{
  margin-bottom: clamp(20px, 5vw,40px);
}

.mb-80{
  margin-bottom: clamp(40px, 5vw,80px);
}

.pl-20{
  padding-left: 20px;
}

.pc,
.block {
  display: block;
}

.sp,
.sp-550 {
  display: none;
}

.wd-100{
  width: 100%;
}

.img-radius{
  border-radius: 6px;
  overflow: hidden;
}

.l-height-14{
  line-height: 1.4;
}

.f-en{
  font-family: var(--font-en);
}

.fc-accent{
  color: var(--color-chintai);
}

.fw-regular{
  font-weight: 400;
}

.fw-bold{
  font-weight: bold;
}

.fs-size12{
  font-size: 0.7rem;
}

.fs-size13{
  font-size: 0.8rem;
}

.fs-size16{
  font-size: 1rem;
}

.fs-size19{
  font-size: clamp(1rem, 3vw, 1.2rem);
}

.fs-size24{
  font-size: clamp(1.2rem, 3vw, 1.5rem);
}

.fs-size32{
  font-size: clamp(1.7rem, 7vw, 2rem);
}

.fs-size48{
  font-size: clamp(2.7rem, 7vw, 3rem);
}

.fs-size90{
  font-size: clamp(4rem, 15vw, 5.625rem);
  line-height: 1;
}

.t-center{
  text-align: center;
}

.t-right {
  text-align: right;
}

.bkg-white {
  background-color: var(--color-white);
}

.grid,
.grid-repeat {
  display: grid;
}

.grid-repeat {
  --grid-repeat-num: 2;
  grid-template-columns: repeat(var(--grid-repeat-num), 1fr);

  &.-is-three {
    --grid-repeat-num: 3;
  }
  &.-is-four {
    --grid-repeat-num: 4;
  }
}

.gap-15{
  gap: 15px;
}

.gap-20{
  gap: 20px;
}

.hdg-size26{
  font-size: clamp(1.2rem, 3vw, 1.625rem);
}

.hdg-icon{
  color: var(--color-chintai);
  font-size: clamp(1.2rem, 3vw, 1.625rem);
  display:  flex;
  align-items: center;
  gap: 0 15px;

  img{
    width: min(20%, 54px);
  }
}

.hdg-page {
  position: relative;
  text-align: center;
  font-weight: 300;
  line-height: 0.7;
  margin: 0 0 60px;
}

.hdg-page_jp {
  font-size: clamp(1.75rem, 6vw, 3.75rem);
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 1;
  transform: translateY(-50%);
  text-align: center;
  color: var(--color-chintai);
  letter-spacing: 2.4px;
}

.hdg-page_en {
  font-size: clamp(2.75rem, 11vw, 13.75rem);
  color: var(--color-white);
  font-family: var(--font-en);
}

.hdg-section {
  text-align: center;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1.4;
  margin-bottom: clamp(40px, 3vw, 80px);
}

.hdg-section_en {
  display: block;
  color: var(--color-chintai);
  font-size: 1rem;
  margin: 15px 0 0;
  font-family: var(--font-en);
  letter-spacing: 1.28px;
}

.page-intro-text{
  font-size: clamp(1rem, 3vw, 1.2rem);
  line-height: 2.25;
}

.list-radius_box {
  gap: clamp(20px, 5vw, 40px);
}

.list-radius_box_item {
  background-color: var(--color-white);
  border-radius: 10px;
  padding: clamp(15px, 5vw, 25px);
  position: relative;
}

.list-bullet-item{
  position: relative;
  padding-left: 18px;

  &::before{
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50px;
    background-color: var(--color-chintai);
  }
  &:not(:last-child){
    margin-bottom: 10px;
  }
}

.list-voice_item{
  border-radius: 6px 6px 0px 6px;
  padding: 10px 15px 10px 95px;
  color: var(--main-text-color);
  min-height: 85px;
  background-color: var(--color-white);
  background-repeat: no-repeat;
  background-position: 15px bottom;
  line-height: 1.3;

  &.-is-male{
    background-image: url("/inc/img/www/corporate/benefit/voice_male.svg");
  }
  &.-is-female{
    background-image: url("/inc/img/www/corporate/benefit/voice_female.svg");
  }
}

.list-sideline_item{
  position: relative;
  padding-left: 20px;

  &::before{
    content: '';
    width: 5px;
    height: 100%;
    border-radius: 10px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-color: var(--color-white);
  }
}

.list-borders_item{
  position: relative;
}

.list-borders_item_bkg{
  position: absolute;
  right: 20px;
  top: 0;
}

.box-column{
  background-color: #49A1E5;
  color: var(--color-white);
  border-radius: 10px;
}

.box-column_ttl{
  padding: clamp(30px, 5vw, 60px) 15px;
  border-bottom: 1px solid var(--color-white);
  font-size: clamp(1.3rem, 3vw, 1.625rem);
  text-align: center;
}

.box-column_detail{
  padding: clamp(30px, 10vw, 60px) clamp(20px, 5vw, 50px) 55px;
}

.bkg-line-dots{
  margin: 0 10px;
  display: block;
  width: 100%;
  height: 3px;
  border-bottom: 3px dotted var(--color-chintai);
}

@media screen and (min-width: 48.063em) {
  .t-center-pc {
    text-align: center;
  }
  .hdg-page_en {
    letter-spacing: 17.6px;
  }
  .list-borders {
    padding: clamp(30px, 5vw, 50px) 0;

    &:first-of-type {
      padding-top: 0;
    }
    &:last-of-type {
      padding-bottom: 0;
    }
    &:not(:last-of-type) {
      border-bottom: 1px solid var(--color-gray);
    }
  }
  .list-borders_item {
    border-right: 1px solid var(--color-gray);
    padding: 0 30px;

    &:first-child {
      border-left: 1px solid var(--color-gray);
    }
  }
}

@media screen and (max-width: 48em) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
  [data-tab-grid-repeat="1"] {
    --grid-repeat-num: 1 !important;
  }
  [data-tab-grid-repeat="2"] {
    --grid-repeat-num: 2 !important;
  }
  .list-borders_item {
    border-bottom: 1px solid var(--color-gray);
    padding: 30px 0;
  }
  .list-borders:first-of-type .list-borders_item:first-child{
    padding-top: 0;
  }
  .list-borders:last-of-type .list-borders_item:last-child{
    padding-bottom: 0;
    border-bottom: none;
  }
  .list-borders_item_bkg{
    top: 30px;
  }
}

@media screen and (max-width: 36.667em) {
  .sp-550 {
    display: block;
  }
  [data-sp-grid-repeat="1"] {
    --grid-repeat-num: 1 !important;
  }
  [data-sp-grid-repeat="2"] {
    --grid-repeat-num: 2 !important;
  }
}

/************ Environment **************/
.environment-welfare {
  padding: clamp(50px, 10vw, 120px) 0 clamp(80px, 10vw, 180px);
}

.environment-data {
  padding: clamp(80px, 10vw, 180px) 0 clamp(120px, 10vw, 165px);
  background-image: url("/inc/img/www/corporate/benefit/data_bkg_left.png"), url("/inc/img/www/corporate/benefit/data_bkg_right.png");
  background-position: -180px clamp(5%, 5vw, 25%), calc(100% + clamp(200px, 50vw, 350px)) calc(100% + 50px);
  background-repeat: no-repeat, no-repeat;
  background-size: min(85vw, 499px), min(100vw, 657px);
}