/* TOP section 2 — PC truth 201:476 / SP truth 229:4698. */
/*
 * Hide sub-pixel seams between independently scaled TOP sections.
 * An upward 1px shadow belongs to the following section, so layout height and
 * content coordinates remain unchanged while its own background covers the gap.
 */
.sect-top > .sect4,
.sect-top > .sect7,
.sect-top > .sect8 { box-shadow: 0 -1px 0 #f7e730; }
.sect-top > .sect5,
.sect-top > .sect6 { box-shadow: 0 -1px 0 #333; }
.sect-top > .sect9 { box-shadow: 0 -1px 0 #f7e730; }
.sect-top > .sect10 { box-shadow: 0 -1px 0 #f3f4f6; }
.sect-top + .site-footer { box-shadow: 0 -1px 0 #333; }
/*
 * sect3 only starts yellow in the SP composition; on PC its first row is
 * #ecedef, so a yellow mask there would itself be the visible line.
 */
@media (max-width: 767px) {
  .sect-top > .sect3 { box-shadow: 0 -1px 0 #f7e730; }
}
.sect2,
.sect2 * { box-sizing: border-box; }
.sect2 { position: relative; width: 1366px; margin: 0; overflow: hidden; color: #333; }
.sect2 img { display: block; max-width: none; }
.sect2 h2,
.sect2 p,
.sect2 span { margin: 0; }
.sect2-pc { position: relative; display: block; width: 1366px; height: 658px; overflow: hidden; }
.sect2-pc__canvas { position: absolute; left: 0; top: 0; width: 1366px; height: 658px; overflow: hidden; transform-origin: 0 0; }

.sect2-pc__background { position: absolute; z-index: 1; left: 0; top: 0; width: 989px; height: 659px; }
.sect2-pc__yellow-mask { position: absolute; z-index: 2; left: 79px; top: 0; width: 1287px; height: 658px; }
.sect2-pc__building { position: absolute; z-index: 3; left: 290px; top: 129px; width: 220px; height: 194px; }
.sect2-pc__meeting { position: absolute; z-index: 4; left: 415px; top: 452px; width: 190px; height: 154px; }
.sect2-pc__work { position: absolute; z-index: 5; left: 388px; top: 297px; width: 243px; height: 137px; }
.sect2-pc__person { position: absolute; z-index: 6; left: 100px; top: 180px; width: 366px; height: 478px; }

.sect2-pc__content { position: absolute; z-index: 7; left: 691.6201px; top: 99.6624px; width: 574.3799px; height: 558.3376px; }
.sect2-pc__heading { position: absolute; left: 0; top: 0; width: 452px; height: 121.3376px; }
.sect2-pc__symbol { position: absolute; left: 16.0838px; top: 7.1688px; width: 70px; height: 51px; }
.sect2-pc__vision {
  position: absolute; left: 94.0838px; top: 0; width: 341.8324px; height: 65.3376px;
  display: flex; align-items: center; overflow: visible; white-space: nowrap;
  color: #333; font: 500 96px/138.72px "Jost", sans-serif; letter-spacing: 0;
}
.sect2-pc__headline {
  position: absolute; left: 0; top: 89.3376px; width: 452px; height: 32px;
  display: flex; align-items: center; white-space: nowrap;
  color: #333; font: 700 20px/32px "Noto Sans JP", sans-serif; letter-spacing: 4px;
}

.sect2-pc__badge { position: absolute; left: 0; top: 176.3376px; width: 150.3799px; height: 144px; overflow: hidden; }
.sect2-pc__laurel { position: absolute; left: 0; top: 0; width: 150.3799px; height: 144px; }
.sect2-pc__badge > span { position: absolute; display: flex; align-items: center; white-space: nowrap; color: #333; }
.sect2-pc__badge-area {
  left: 36px; top: 31.5px; width: 79px; height: 17px; justify-content: center;
  font: 700 14px/16.8px "Noto Sans JP", sans-serif; letter-spacing: 2.1px;
}
.sect2-pc__badge-number {
  left: 37px; top: 48.5px; width: 25px; height: 24px;
  font: 700 20px/24px "Noto Sans JP", sans-serif; letter-spacing: 1px;
}
.sect2-pc__badge-years {
  left: 64px; top: 51px; width: 50px; height: 19px;
  font: 700 16px/19.2px "Noto Sans JP", sans-serif; letter-spacing: .8px;
}
.sect2-pc__badge-no1 {
  left: 34px; top: 72.5px; width: 83px; height: 40px;
  font: 700 34px/40.46px "Jost", sans-serif; letter-spacing: 0;
}

.sect2-pc__body {
  position: absolute; left: 174.3799px; top: 161.3376px; width: 400px; height: 174px;
  white-space: pre; overflow: visible; color: #333;
  font: 500 16px/28.8px "Noto Sans JP", sans-serif; letter-spacing: 2.4px;
}
.sect2-pc__cta {
  position: absolute; left: 0; top: 375.3376px; width: 357px; height: 74px;
  display: block; border: 1px solid #000; background: #fff; box-shadow: 6px 6px 0 #000; color: #333;
}
.sect2-pc__cta > span {
  position: absolute; left: 39px; top: 24px; width: 240px; height: 24px;
  display: flex; align-items: center; white-space: nowrap;
  font: 700 20px/24px "Noto Sans JP", sans-serif; letter-spacing: 2px;
}
.sect2-pc__cta > img { position: absolute; left: 291px; top: 28.5px; width: 26px; height: 15px; }
.sect2-pc__yellow-top { position: absolute; z-index: 8; left: 0; top: 0; width: 460px; height: 125px; }

.sect2-sp { display: none; }

@media (max-width: 767px) {
  .sect2 { width: 100vw; height: calc(683.3053px * var(--sect-sp-scale, 1)); margin: 0; overflow: hidden; }
  .sect2-pc { display: none; }
  .sect2-sp {
    position: relative; top: -1px; display: block; width: 375px; height: 683.3053px; overflow: hidden;
    background: #f7e730; color: #333;
    transform: scale(var(--sect-sp-scale, 1)); transform-origin: 0 0;
  }
  .sect2-sp__background { position: absolute; z-index: 1; left: 0; top: 0; width: 375px; height: 577px; }
  .sect2-sp__yellow-mask { position: absolute; z-index: 2; left: 0; top: 0; width: 375px; height: 577px; }
  .sect2-sp__yellow-top { position: absolute; z-index: 3; left: 0; top: 0; width: 375px; height: 140px; }
  .sect2-sp__building { position: absolute; z-index: 4; left: 173px; top: 228px; width: 69px; height: 61px; }
  .sect2-sp__meeting { position: absolute; z-index: 5; left: 268px; top: 339px; width: 75px; height: 61px; }
  .sect2-sp__work { position: absolute; z-index: 6; left: 237px; top: 272px; width: 104px; height: 59px; }

  .sect2-sp__heading { position: absolute; z-index: 7; left: 16px; top: 80px; width: 228px; height: 95.3053px; }
  .sect2-sp__symbol { position: absolute; left: 0; top: .1526px; width: 38px; height: 27px; }
  .sect2-sp__vision {
    position: absolute; left: 46px; top: 0; width: 143.1986px; height: 27.3053px;
    display: flex; align-items: center; overflow: visible; white-space: nowrap;
    color: #333; font: 500 40px/57.8px "Jost", sans-serif; letter-spacing: 0;
  }
  .sect2-sp__headline {
    position: absolute; left: 0; top: 43.3053px; width: 228px; height: 52px;
    white-space: nowrap; color: #333;
    font: 700 16px/25.6px "Noto Sans JP", sans-serif; letter-spacing: 3.2px;
  }

  .sect2-sp__main { position: absolute; z-index: 8; left: 16px; top: 235.3053px; width: 343px; height: 448px; }
  .sect2-sp__person { position: absolute; left: 0; top: 0; width: 128px; height: 167px; object-fit: cover; }

  .sect2-sp__badge {
    position: absolute; left: 128px; top: 71px; width: 150.3799px; height: 144px; overflow: hidden;
    transform: scale(.6649858, .6666667); transform-origin: 0 0;
  }
  .sect2-sp__laurel { position: absolute; left: 0; top: 0; width: 150.3799px; height: 144px; }
  .sect2-sp__badge > span { position: absolute; display: flex; align-items: center; white-space: nowrap; color: #333; }
  .sect2-sp__badge-area {
    left: 36px; top: 31.5px; width: 79px; height: 17px; justify-content: center;
    font: 700 14px/16.8px "Noto Sans JP", sans-serif; letter-spacing: 2.1px;
  }
  .sect2-sp__badge-number {
    left: 37px; top: 48.5px; width: 25px; height: 24px;
    font: 700 20px/24px "Noto Sans JP", sans-serif; letter-spacing: 1px;
  }
  .sect2-sp__badge-years {
    left: 64px; top: 51px; width: 50px; height: 19px;
    font: 700 16px/19.2px "Noto Sans JP", sans-serif; letter-spacing: .8px;
  }
  .sect2-sp__badge-no1 {
    left: 34px; top: 72.5px; width: 83px; height: 40px;
    font: 700 34px/40.46px "Jost", sans-serif; letter-spacing: 0;
  }

  .sect2-sp__body {
    position: absolute; left: 0; top: 191px; width: 335px; height: 150px;
    white-space: pre; overflow: visible; color: #333;
    font: 500 14px/25.2px "Noto Sans JP", sans-serif; letter-spacing: 1.4px;
  }
  .sect2-sp__cta {
    position: absolute; left: 0; top: 365px; width: 343px; height: 74px;
    display: block; border: 1px solid #000; background: #fff; box-shadow: 6px 6px 0 #000; color: #333;
  }
  .sect2-sp__cta > span {
    position: absolute; left: 32px; top: 24px; width: 240px; height: 24px;
    display: flex; align-items: center; white-space: nowrap;
    font: 700 20px/24px "Noto Sans JP", sans-serif; letter-spacing: 2px;
  }
  .sect2-sp__cta > img { position: absolute; left: 284px; top: 28.5px; width: 26px; height: 15px; }
}

@media (min-width: 768px) {
  .sect2 { width: 100vw; height: calc(658px * var(--sect-hero-scale, 1)); overflow: hidden; }
  .sect2-pc { width: 100vw; height: calc(658px * var(--sect-hero-scale, 1)); overflow: hidden; }
  .sect2-pc__canvas { transform: scale(var(--sect-hero-scale, 1)); }
  .sect2-sp { display: none; }
}