@charset "UTF-8";
.sec-bridge {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #F1F2ED;
  padding: 91.712px 0 116px;
  font-feature-settings: normal;
}
.bridge-illust {
  position: absolute;
  left: 240.031px;
  top: 355.722px;
  z-index: 0;
  width: 1192.462px;
  height: 650.434px;
  transform: translate(-50%, -50%) rotate(10.64deg);
  opacity: 0.24;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.bridge-illust img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bridge-head {
  position: relative;
  z-index: 1;
  width: min(1136px, calc(100% - 80px));
  margin: 0 auto;
  text-align: center;
}
.bridge-title {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--c-text);
  line-height: 1.6;
}
.bridge-title-s { font-size: 40px; line-height: 1.6; }
.bridge-title-l { font-size: 48px; line-height: 1.6; }
.bridge-divider {
  display: block;
  width: 80px;
  height: 1px;
  margin: 30.488px auto 0;
  background: #666666;
}
.bridge-lead {
  margin-top: 39px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.72px;
  color: var(--c-text);
}
.bridge-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10.86351%;
  width: min(1077px, calc(100% - 80px));
  margin: 45px auto 0;
}
.bridge-card {
  background: #FFFFFF;
  padding: 36px 0 45px;
}
.bridge-card-img {
  position: relative;
  width: 77.08333%;
  margin: 0 auto;
  aspect-ratio: 370 / 208;
  overflow: hidden;
}
.bridge-card-img img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}
.bridge-card--01 .bridge-card-img img { left: -10.60811%; top:  -7.71484%; width: 112.97297%; height: 115.38462%; }
.bridge-card--02 .bridge-card-img img { left:   0%;       top: -17.01769%; width: 101.62162%; height: 135.95846%; }
.bridge-card-body {
  width: 79.16667%;
  margin: 40px auto 0;
}
.bridge-card-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -0.1504px;
  color: var(--c-text);
  text-align: center;
}
.bridge-card-text {
  margin-top: 16px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 2;
  color: var(--c-text);
  text-align: justify;
}
.bridge-br-pc  { display: inline; }
.bridge-txt-pc { display: inline; }
.bridge-txt-sp { display: none; }
@media (max-width: 767px) {
  .sec-bridge {
    padding: 71.832px 0 80px;
  }
  .bridge-illust {
    left: 138.7065px;
    top: 406.3925px;
    width: 508.907px;
    height: 277.586px;
  }
  .bridge-head {
    width: min(342px, calc(100% - 48px));
  }
  .bridge-title-s { font-size: 24px; }
  .bridge-title-l { font-size: 28px; }
  .bridge-divider {
    width: 64px;
    margin-top: 37.368px;
  }
  .bridge-lead {
    margin-top: 39px;
    font-size: 16px;
    letter-spacing: 0.16px;
    text-align: justify;
  }
  .bridge-cards {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
    width: min(340px, calc(100% - 50px));
    margin-top: 66px;
  }
  .bridge-card--01 { padding: 23.047px 0 30.188px; }
  .bridge-card--02 { padding: 17.047px 0 27.188px; }
  .bridge-card-img {
    width: 91.17647%;
    aspect-ratio: 310 / 178.762;
  }
  .bridge-card--01 .bridge-card-img img { left: -13.87097%; top: -14.57076%; width: 121.29032%; height: 120.83341%; }
  .bridge-card--02 .bridge-card-img img { left:  -0.32258%; top:  -8.41722%; width: 100.64516%; height: 116.35583%; }
  .bridge-card-body {
    width: 91.17647%;
    margin-top: 24px;
  }
  .bridge-card--01 .bridge-card-text { letter-spacing: -1px; }
  .bridge-br-pc  { display: none; }
  .bridge-txt-pc { display: none; }
  .bridge-txt-sp { display: inline; }
}