@charset "UTF-8";
/* 設定 */
/* トップページスタイルシート */
/* =================================
メインビジュアル
================================= */
.top-fv {
  position: relative;
  overflow: visible;
}
@media (max-width: 820px) {
  .top-fv {
    margin: 0 0 60px;
  }
}
.top-fv__inner {
  position: relative;
  height: min(760px, 100vh - 80px);
  min-height: 600px;
  overflow: hidden;
}
@media (max-width: 820px) {
  .top-fv__inner {
    height: auto;
    min-height: 0;
    aspect-ratio: 1/1;
  }
}
.top-fv__slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.top-fv__slider:not(.slick-initialized) .top-fv__slide {
  display: none;
}
.top-fv__slider:not(.slick-initialized) .top-fv__slide:first-child {
  display: block;
}
.top-fv__slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.top-fv__slide::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.08);
  content: "";
  pointer-events: none;
}
.top-fv__image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
}
.top-fv__copy {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(580px, 100% - 80px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
@media (max-width: 820px) {
  .top-fv__copy {
    top: 25%;
    width: calc(100% - 100px);
  }
}
.top-fv__title {
  margin: 0;
}
.top-fv__copy-image {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.45));
}
.top-fv__entry-btn {
  position: absolute;
  right: 6%;
  bottom: -65px;
  z-index: 10;
  width: 200px;
  aspect-ratio: 1;
}
@media (max-width: 820px) {
  .top-fv__entry-btn {
    right: 20px;
    bottom: -45px;
    width: 120px;
  }
}
.top-fv .slick-list,
.top-fv .slick-track,
.top-fv .slick-slide,
.top-fv .slick-slide > div {
  height: 100%;
}
.top-fv .slick-list {
  overflow: hidden;
}
.top-fv .slick-track {
  display: flex;
}
.top-fv .slick-slide {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.top-fv .slick-slide > div {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.top-fv .pc {
  display: block;
}
@media (max-width: 820px) {
  .top-fv .pc {
    display: none;
  }
}
.top-fv .sp {
  display: none;
}
@media (max-width: 820px) {
  .top-fv .sp {
    display: block;
  }
}

/* =================================
セクション見出し
================================= */
.section-heading {
  padding: 100px 16px;
  text-align: center;
}
@media (max-width: 820px) {
  .section-heading {
    padding: 40px 16px;
  }
}
.section-heading__title {
  margin: 0;
  color: #333;
  font-size: 36px;
  font-weight: 300;
  line-height: 1.4;
}
@media (max-width: 820px) {
  .section-heading__title {
    font-size: 24px;
    white-space: nowrap;
  }
}
.section-heading__line {
  position: relative;
  width: 200px;
  height: 4px;
  margin: 48px auto 56px;
}
@media (max-width: 820px) {
  .section-heading__line {
    width: 180px;
    height: 4px;
    margin: 22px auto 40px;
  }
}
.section-heading__line-gray {
  position: absolute;
  inset: 0;
  background: #8d8d8d;
  border-radius: 999px;
}
.section-heading__line-blue {
  position: absolute;
  top: 0;
  right: 0;
  width: 72%;
  height: 100%;
  background: #2f6fb8;
  border-radius: 999px;
}
.section-heading__lead {
  max-width: 920px;
  margin: 0 auto;
  color: #333;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: left;
}
.section-heading__lead--center {
  text-align: center;
}
@media (max-width: 820px) {
  .section-heading__lead--center {
    text-align: left;
  }
}
.section-heading__title, .section-heading__lead {
  will-change: transform, opacity;
}
.section-heading__line-gray, .section-heading__line-blue {
  transform-origin: left center;
  will-change: transform;
}

/* =================================
求める人材
================================= */
.top-concept__bg {
  position: relative;
  min-height: 760px;
  background: url("../img/top/top-concept-bg.jpg") center/cover no-repeat;
}
@media (max-width: 820px) {
  .top-concept__bg {
    min-height: 580px;
    background-position: 54% center;
  }
}
.top-concept__bg::after {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  content: "";
  pointer-events: none;
}
.top-concept__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  min-height: inherit;
  margin: 0 auto;
  padding: 100px 40px;
}
@media (max-width: 820px) {
  .top-concept__inner {
    padding: 64px 24px;
  }
}
.top-concept__content {
  width: 420px;
}
@media (max-width: 820px) {
  .top-concept__content {
    width: 100%;
  }
}
.top-concept__title {
  margin: 0;
  color: #333;
  font-size: 36px;
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
}
@media (max-width: 820px) {
  .top-concept__title {
    font-size: 32px;
  }
}
.top-concept__line {
  width: 200px;
  height: 4px;
  margin: 24px auto 48px;
  background: linear-gradient(to right, #8c8c8c 0, #8c8c8c 28%, #2f6fb8 28%, #2f6fb8 100%);
  border-radius: 999px;
}
@media (max-width: 820px) {
  .top-concept__line {
    width: 180px;
    height: 4px;
    margin: 24px auto 34px;
  }
}
.top-concept__keywords {
  margin: 0 0 32px;
  color: #222;
  font-size: 64px;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 820px) {
  .top-concept__keywords {
    margin: 0 0 32px;
    font-size: 44px;
  }
}
.top-concept__keywords span {
  display: block;
}
.top-concept__text {
  max-width: 202px;
  margin: 0 auto;
  color: #222;
  font-size: 18px;
  line-height: 1.8;
  text-align: left;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .top-concept__text {
    max-width: 191px;
    font-size: 16px;
  }
}

/* =================================
三和を知る
================================= */
.top-about {
  margin: 120px 0 0;
  padding: 0 0 120px;
  overflow: hidden;
}
@media (max-width: 820px) {
  .top-about {
    margin: 0;
    padding: 0 0 80px;
  }
}
.top-about__slider {
  margin: 0 -20px;
}
@media (max-width: 820px) {
  .top-about__slider {
    padding: 0 16px;
  }
}
.top-about__slider:not(.slick-initialized) .top-about__slide {
  display: none;
}
.top-about__slider:not(.slick-initialized) .top-about__slide:first-child {
  display: block;
}
.top-about__slide {
  width: 960px;
  padding: 0 60px;
}
@media (max-width: 820px) {
  .top-about__slide {
    width: calc(100vw - 48px);
    padding: 0 16px;
  }
}
.top-about .slick-list {
  overflow: visible;
}
.top-about .slick-track {
  display: flex;
  align-items: stretch;
}
.top-about .slick-slide {
  height: auto;
}
.top-about .slick-slide > div {
  height: 100%;
}
.top-about .slick-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}
@media (max-width: 820px) {
  .top-about .slick-arrow {
    width: 42px;
    height: 42px;
  }
}
.top-about .slick-arrow img {
  display: block;
  width: 100%;
  height: auto;
}
.top-about .slick-arrow::before {
  display: none;
}
.top-about .slick-prev {
  left: calc(50% - 444px);
}
@media (max-width: 820px) {
  .top-about .slick-prev {
    left: 8px;
  }
}
.top-about .slick-next {
  right: calc(50% - 444px);
}
@media (max-width: 820px) {
  .top-about .slick-next {
    right: 8px;
  }
}
.top-about .slick-dots {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 820px) {
  .top-about .slick-dots {
    gap: 14px;
    margin: 28px 0 0;
  }
}
.top-about .slick-dots li {
  margin: 0;
  line-height: 1;
}
.top-about .slick-dots button {
  display: block;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}
@media (max-width: 820px) {
  .top-about .slick-dots button {
    width: 12px;
    height: 12px;
  }
}
.top-about .slick-dots button::before {
  display: none;
}
.top-about .slick-dots .slick-active button {
  background: #3476bd;
  transform: scale(1.1);
}

/* =================================
三和を知るカード
================================= */
.about-card {
  position: relative;
  height: 100%;
  min-height: 640px;
  overflow: hidden;
  border-radius: 44px;
  background: #fff;
}
@media (max-width: 820px) {
  .about-card {
    min-height: 0;
    border-radius: 24px;
  }
}
.about-card::after {
  position: absolute;
  inset: 0;
  z-index: 10;
  border: 3px solid #3476bd;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}
@media (max-width: 820px) {
  .about-card::after {
    border-width: 2px;
  }
}
.about-card__image {
  position: absolute;
  inset: 0;
}
@media (max-width: 820px) {
  .about-card__image {
    position: relative;
    width: 100%;
    height: 260px;
  }
}
.about-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.about-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 50%;
  min-height: 645px;
  margin: 0 0 0 auto;
  padding: 88px 56px 64px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(3px);
}
@media (max-width: 820px) {
  .about-card__body {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 32px 24px 40px;
    background: #fff;
    backdrop-filter: none;
  }
}
.about-card__title {
  margin: 0 0 44px;
  color: #3476bd;
  font-size: 38px;
  font-weight: 300;
  line-height: 1.4;
}
@media (max-width: 820px) {
  .about-card__title {
    margin: 0 0 20px;
    font-size: 26px;
  }
}
.about-card__text {
  margin: 0 0 120px;
  font-size: 14px;
  line-height: 2;
}
@media (max-width: 820px) {
  .about-card__text {
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.8;
  }
}
.about-card__label {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  color: #fff;
  line-height: 1;
  pointer-events: none;
}
.about-card__label--top {
  top: 0;
  left: 0;
  width: 152px;
  height: 152px;
  padding: 18px;
  background: linear-gradient(135deg, #3476bd 0%, #3476bd 49.8%, transparent 50.2%, transparent 100%);
}
@media (max-width: 820px) {
  .about-card__label--top {
    width: 102px;
    height: 102px;
    padding: 10px;
  }
}
.about-card__label--bottom {
  right: 0;
  bottom: 0;
  align-items: flex-end;
  justify-content: flex-end;
  width: 162px;
  height: 162px;
  padding: 0 18px 16px 0;
  background: linear-gradient(135deg, transparent 0%, transparent 49.8%, #3476bd 50.2%, #3476bd 100%);
}
@media (max-width: 820px) {
  .about-card__label--bottom {
    width: 112px;
    height: 112px;
    padding: 0 10px 10px 0;
  }
}
.about-card__label--bottom .about-card__label-number {
  margin: 0 0 6px;
}
.about-card__label-text {
  font-size: 18px;
  font-weight: 300;
}
@media (max-width: 820px) {
  .about-card__label-text {
    font-size: 13px;
  }
}
.about-card__label-number {
  margin: 6px 0 0;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
@media (max-width: 820px) {
  .about-card__label-number {
    font-size: 26px;
  }
}

/* =================================
数字で見る三和
================================= */
.top-data {
  margin: 120px 0 0;
  padding: 0 40px 100px;
  overflow: hidden;
  background: rgba(214, 240, 241, 0.5);
}
@media (max-width: 820px) {
  .top-data {
    margin: 0;
    padding: 0 20px 60px;
  }
}
.top-data__inner {
  width: min(100%, 1200px);
  margin: 0 auto;
}
.top-data__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 34px;
}
@media (max-width: 820px) {
  .top-data__list {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.top-data__item {
  min-width: 0;
}

.top-data-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 16px 24px 14px;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(37, 119, 178, 0.04);
}
@media (max-width: 820px) {
  .top-data-card {
    min-height: 170px;
    padding: 14px 16px 12px;
    border-radius: 14px;
  }
}
.top-data-card__title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 0 0 28px;
  color: #378dcb;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}
@media (max-width: 820px) {
  .top-data-card__title {
    padding: 0 0 0 22px;
    font-size: 17px;
  }
}
.top-data-card__title::before {
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 12px;
  height: 12px;
  background: #8a8a8a;
  border-radius: 50%;
  transform: translateY(-50%);
  content: "";
}
@media (max-width: 820px) {
  .top-data-card__title::before {
    width: 9px;
    height: 9px;
  }
}
.top-data-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 24px;
  min-height: 110px;
}
@media (max-width: 820px) {
  .top-data-card__body {
    gap: 14px;
    min-height: 95px;
  }
}
.top-data-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 120px;
  width: 120px;
}
@media (max-width: 820px) {
  .top-data-card__icon {
    flex-basis: 80px;
    width: 80px;
  }
}
.top-data-card__icon img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 90px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 820px) {
  .top-data-card__icon img {
    max-height: 65px;
  }
}
.top-data-card__icon--wide {
  flex-basis: 140px;
  width: 140px;
}
@media (max-width: 820px) {
  .top-data-card__icon--wide {
    flex-basis: 90px;
    width: 90px;
  }
}
.top-data-card__icon--wide img {
  max-width: 130px;
}
@media (max-width: 820px) {
  .top-data-card__icon--wide img {
    max-width: 90px;
  }
}
.top-data-card__value {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  color: #2989cf;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .top-data-card__value {
    gap: 6px;
  }
}
.top-data-card__number {
  display: inline-block;
  font-size: 96px;
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 820px) {
  .top-data-card__number {
    font-size: 62px;
  }
}
.top-data-card__unit {
  padding: 0 0 7px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 820px) {
  .top-data-card__unit {
    padding: 0 0 4px;
    font-size: 16px;
  }
}
.top-data-card__text {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #888;
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}
@media (max-width: 820px) {
  .top-data-card__text {
    font-size: 10px;
  }
}
.top-data-card__sales {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.top-data-card__sales-row {
  display: flex;
  align-items: flex-end;
  gap: 15px;
}
@media (max-width: 820px) {
  .top-data-card__sales-row {
    gap: 8px;
  }
}
.top-data-card__year {
  color: #378dcb;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .top-data-card__year {
    font-size: 14px;
  }
}
.top-data-card__sales-value {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  color: #2989cf;
}
@media (max-width: 820px) {
  .top-data-card__sales-value {
    gap: 5px;
  }
}
.top-data-card__sales-number {
  font-size: 60px;
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 820px) {
  .top-data-card__sales-number {
    font-size: 43px;
  }
}
.top-data-card__sales-unit {
  padding: 0 0 5px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 820px) {
  .top-data-card__sales-unit {
    padding: 0 0 3px;
    font-size: 13px;
  }
}
.top-data-card__ratio {
  display: flex;
  align-items: flex-end;
  color: #2989cf;
  white-space: nowrap;
}
.top-data-card__ratio-group {
  display: flex;
  align-items: flex-start;
}
.top-data-card__ratio-number {
  font-size: 76px;
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 820px) {
  .top-data-card__ratio-number {
    font-size: 53px;
  }
}
.top-data-card__ratio-label {
  margin: 8px 7px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 820px) {
  .top-data-card__ratio-label {
    margin: 7px 4px 0;
    font-size: 10px;
  }
}
.top-data-card__ratio-separator {
  padding: 0 1px 6px;
  font-size: 55px;
  font-weight: 600;
  line-height: 1;
}
@media (max-width: 820px) {
  .top-data-card__ratio-separator {
    padding: 0 1px 4px;
    font-size: 38px;
  }
}
.top-data-card--sales .top-data-card__body {
  gap: 12px;
}
@media (max-width: 820px) {
  .top-data-card--sales .top-data-card__body {
    gap: 8px;
  }
}
.top-data-card--sales .top-data-card__icon {
  flex-basis: 105px;
  width: 105px;
}
@media (max-width: 820px) {
  .top-data-card--sales .top-data-card__icon {
    flex-basis: 65px;
    width: 65px;
  }
}
.top-data-card--ratio .top-data-card__body {
  gap: 4px;
}
.top-data-card--ratio .top-data-card__icon {
  flex-basis: 100px;
  width: 100px;
}
@media (max-width: 820px) {
  .top-data-card--ratio .top-data-card__icon {
    flex-basis: 65px;
    width: 65px;
  }
}

/* =================================
社員インタビュー
================================= */
.top-interview {
  margin: 120px 0 0;
  padding: 0 40px 140px;
  overflow: hidden;
}
@media (max-width: 820px) {
  .top-interview {
    margin: 0;
    padding: 0 16px 100px;
  }
}
.top-interview__inner {
  max-width: 1180px;
  margin: 0 auto;
}
.top-interview__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 100px 60px;
}
@media (max-width: 820px) {
  .top-interview__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 70px;
  }
}
.top-interview__item {
  min-width: 0;
}
.top-interview__link {
  display: grid;
  grid-template-columns: minmax(130px, 190px) minmax(220px, 260px);
  align-items: self-start;
  justify-content: center;
  gap: 20px;
  color: #333;
  text-decoration: none;
}
@media (max-width: 820px) {
  .top-interview__link {
    grid-template-columns: minmax(90px, 35%) minmax(0, 1fr);
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
  }
}
@media (hover: hover) {
  .top-interview__link:hover .top-interview__image {
    transform: translateY(-10px);
  }
  .top-interview__link:hover .top-interview__body {
    transform: translate(-4px, -4px);
  }
  .top-interview__link:hover .top-interview__body::before {
    transform: translate(12px, 12px);
  }
  .top-interview__link:hover .top-interview__arrow {
    color: #3caed7;
    background: #fff;
    border-color: #3caed7;
    transform: rotate(-45deg);
  }
}
.top-interview__person {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 430px;
}
@media (max-width: 820px) {
  .top-interview__person {
    height: auto;
  }
}
.top-interview__image {
  display: block;
  width: 100%;
  max-height: 430px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
  transition: transform 0.4s ease;
}
@media (max-width: 820px) {
  .top-interview__image {
    max-height: 330px;
  }
}
.top-interview__body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 365px;
  padding: 28px 20px 18px;
  background: #fff;
  border: 1px solid #3488c2;
  border-radius: 18px 18px 0 0;
  box-shadow: 10px 10px 0 rgba(52, 136, 194, 0.12);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
@media (max-width: 820px) {
  .top-interview__body {
    min-height: 300px;
    padding: 20px 14px 14px;
    border-radius: 14px 14px 0 0;
    box-shadow: 7px 7px 0 rgba(52, 136, 194, 0.12);
  }
}
.top-interview__title {
  margin: 0 0 30px;
  color: #31a9d5;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.03em;
}
@media (max-width: 820px) {
  .top-interview__title {
    margin: 0 0 22px;
    font-size: 19px;
    line-height: 1.5;
  }
}
.top-interview__profile {
  margin: auto 0 20px;
}
@media (max-width: 820px) {
  .top-interview__profile {
    margin: auto 0 16px;
  }
}
.top-interview__profile p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}
@media (max-width: 820px) {
  .top-interview__profile p {
    font-size: 12px;
  }
}
.top-interview__name {
  margin: 0;
  line-height: 1;
}
.top-interview__initial {
  color: #31a9d5;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
@media (max-width: 820px) {
  .top-interview__initial {
    font-size: 20px;
  }
}
.top-interview__honorific {
  margin: 0 0 0 3px;
  font-size: 12px;
}
@media (max-width: 820px) {
  .top-interview__honorific {
    font-size: 11px;
  }
}
.top-interview__arrow {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 28px;
  transition: transform 0.3s ease;
}
@media (max-width: 820px) {
  .top-interview__arrow {
    right: 8px;
    bottom: 8px;
    width: 24px;
  }
}
.top-interview__arrow img {
  display: block;
  width: 100%;
  height: auto;
}

/* =================================
フロー
================================= */
.top-flow {
  padding: 0 16px 80px;
  overflow: hidden;
  background-color: #fff;
}
@media (max-width: 820px) {
  .top-flow {
    padding: 0 16px 60px;
  }
}
.top-flow__inner {
  max-width: 1000px;
  margin: 0 auto;
}
.top-flow__heading {
  margin: 0 0 60px;
}
@media (max-width: 820px) {
  .top-flow__heading {
    margin: 0 0 36px;
  }
}
.top-flow__lead {
  margin: 0 0 100px;
  color: #333;
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
}
@media (max-width: 820px) {
  .top-flow__lead {
    margin: 0 0 60px;
    font-size: 15px;
    text-align: left;
  }
}
.top-flow__list {
  display: grid;
  grid-template-columns: repeat(4, 138px);
  justify-content: space-between;
  row-gap: 110px;
  width: 760px;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .top-flow__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 58px;
    width: 100%;
    max-width: 280px;
  }
}
.top-flow__item {
  --line-scale: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top-flow__item:nth-child(-n+3)::after {
  position: absolute;
  z-index: 1;
  top: 99px;
  left: calc(100% + 10px);
  width: 48px;
  height: 2px;
  background: #78cceb;
  content: "";
  transform: scaleX(var(--line-scale));
  transform-origin: left center;
}
.top-flow__item:nth-child(-n+3)::before {
  position: absolute;
  z-index: 2;
  top: 94px;
  left: calc(100% + 55px);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #18a8e8;
  content: "";
  opacity: var(--line-scale);
}
.top-flow__item:nth-child(4)::after {
  position: absolute;
  z-index: 1;
  top: calc(100% + 14px);
  left: 50%;
  width: 2px;
  height: 78px;
  background: #78cceb;
  content: "";
  transform: translateX(-50%) scaleY(var(--line-scale));
  transform-origin: top center;
}
.top-flow__item:nth-child(4)::before {
  position: absolute;
  z-index: 2;
  top: calc(100% + 88px);
  left: 50%;
  width: 0;
  height: 0;
  border-top: 9px solid #18a8e8;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  opacity: var(--line-scale);
  transform: translateX(-50%);
}
.top-flow__item:nth-child(5) {
  grid-column: 4;
  grid-row: 2;
}
.top-flow__item:nth-child(6) {
  grid-column: 3;
  grid-row: 2;
}
.top-flow__item:nth-child(7) {
  grid-column: 2;
  grid-row: 2;
}
.top-flow__item:nth-child(5)::after, .top-flow__item:nth-child(6)::after {
  position: absolute;
  z-index: 1;
  top: 99px;
  right: calc(100% + 10px);
  width: 48px;
  height: 2px;
  background: #78cceb;
  content: "";
  transform: scaleX(var(--line-scale));
  transform-origin: right center;
}
.top-flow__item:nth-child(5)::before, .top-flow__item:nth-child(6)::before {
  position: absolute;
  z-index: 2;
  top: 94px;
  right: calc(100% + 55px);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 9px solid #18a8e8;
  border-bottom: 6px solid transparent;
  content: "";
  opacity: var(--line-scale);
}
@media (max-width: 820px) {
  .top-flow__item:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }
  .top-flow__item:nth-child(n)::after {
    position: absolute;
    z-index: 1;
    top: calc(100% + 8px);
    right: auto;
    bottom: auto;
    left: 50%;
    width: 2px;
    height: 42px;
    background: #78cceb;
    content: "";
    transform: translateX(-50%) scaleY(var(--line-scale));
    transform-origin: top center;
  }
  .top-flow__item:nth-child(n)::before {
    position: absolute;
    z-index: 2;
    top: calc(100% + 45px);
    right: auto;
    bottom: auto;
    left: 50%;
    width: 0;
    height: 0;
    border: 0;
    border-top: 9px solid #18a8e8;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    content: "";
    opacity: var(--line-scale);
    transform: translateX(-50%);
  }
  .top-flow__item:last-child::before, .top-flow__item:last-child::after {
    display: none;
  }
}
.top-flow__step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 32px;
  margin: 0 0 14px;
  border: 1px solid #18a8e8;
  border-radius: 20px;
  background: #fff;
  color: #18a8e8;
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 820px) {
  .top-flow__step {
    width: 62px;
    height: 28px;
    margin: 0 0 10px;
    font-size: 12px;
  }
}
.top-flow__circle {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background: #8bd2ec;
  color: #fff;
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
}
.top-flow__circle--primary {
  background: #27a9df;
}
@media (max-width: 820px) {
  .top-flow__circle {
    width: 120px;
    height: 120px;
    font-size: 15px;
  }
}
.top-flow__button-wrap {
  margin: 100px 0 0;
  text-align: center;
}
@media (max-width: 820px) {
  .top-flow__button-wrap {
    margin: 64px 0 0;
  }
}

/* =================================
よくある質問
================================= */
.top-faq {
  padding: 0 16px 120px;
  overflow: hidden;
  background: #eefaff;
}
@media (max-width: 820px) {
  .top-faq {
    padding: 0 16px 60px;
  }
}
.top-faq__inner {
  max-width: 1000px;
  margin: 0 auto;
}
.top-faq__list {
  width: 800px;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .top-faq__list {
    width: 100%;
  }
}
.top-faq__item {
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
}
@media (max-width: 820px) {
  .top-faq__item {
    border-radius: 12px;
  }
}
.top-faq__item:not(:last-child) {
  margin: 0 0 30px;
}
@media (max-width: 820px) {
  .top-faq__item:not(:last-child) {
    margin: 0 0 16px;
  }
}
.top-faq__question {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 0 20px;
  width: 100%;
  min-height: 80px;
  padding: 18px 30px;
  border: 0;
  background: transparent;
  color: #06439b;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (max-width: 820px) {
  .top-faq__question {
    grid-template-columns: 28px minmax(0, 1fr) 22px;
    gap: 0 12px;
    min-height: 68px;
    padding: 16px;
  }
}
@media (hover: hover) {
  .top-faq__question:hover .top-faq__question-text {
    opacity: 0.65;
  }
}
.top-faq__question.is-open .top-faq__arrow {
  transform: rotate(225deg);
}
.top-faq__question-mark {
  color: #06439b;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 820px) {
  .top-faq__question-mark {
    font-size: 28px;
  }
}
.top-faq__question-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  transition: opacity 0.3s;
}
@media (max-width: 820px) {
  .top-faq__question-text {
    font-size: 14px;
  }
}
.top-faq__arrow {
  justify-self: center;
  width: 16px;
  height: 16px;
  border-right: 4px solid #555;
  border-bottom: 4px solid #555;
  transform: rotate(45deg);
  transition: transform 0.3s;
}
@media (max-width: 820px) {
  .top-faq__arrow {
    width: 12px;
    height: 12px;
    border-width: 0 3px 3px 0;
  }
}
.top-faq__answer {
  display: none;
}
.top-faq__answer-inner {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 20px;
  padding: 0 80px 30px 30px;
}
@media (max-width: 820px) {
  .top-faq__answer-inner {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0 12px;
    padding: 0 50px 20px 16px;
  }
}
.top-faq__answer-mark {
  color: #27a9df;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 820px) {
  .top-faq__answer-mark {
    font-size: 27px;
  }
}
.top-faq__answer-text {
  margin: 0;
  color: #333;
  font-size: 15px;
  line-height: 1.8;
}
@media (max-width: 820px) {
  .top-faq__answer-text {
    font-size: 14px;
  }
}

/* =================================
バナー
================================= */
.top-banner {
  padding: 100px 20px;
  background: #fff;
}
@media (max-width: 820px) {
  .top-banner {
    padding: 64px 20px;
  }
}
.top-banner__inner {
  max-width: 780px;
  margin: 0 auto;
}
.top-banner__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 34px;
}
@media (max-width: 600px) {
  .top-banner__list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.top-banner__item {
  display: block;
  transition: opacity 0.3s, transform 0.3s;
}
@media (hover: hover) {
  .top-banner__item:hover {
    opacity: 0.8;
    transform: translateY(-4px);
  }
}
.top-banner__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* 下層ページスタイルシート */
/* =================================
下層ページ共通
 ================================= */
/* =================================
三和を知る下層共通
 ================================= */
.about-mv {
  position: relative;
  height: 680px;
  background: url("../img/subpage/business-mv.jpg") center center/cover no-repeat;
}
.about-mv--industry {
  background: url("../img/subpage/industry-mv.jpg") center center/cover no-repeat;
}
.about-mv--history {
  background: url("../img/subpage/history-mv.jpg") center center/cover no-repeat;
}
.about-mv--strength {
  background: url("../img/subpage/strength-mv.jpg") center center/cover no-repeat;
}
@media (max-width: 820px) {
  .about-mv {
    height: 420px;
    background-position: center bottom;
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
  }
}
@media (max-width: 600px) {
  .about-mv {
    height: 220px;
  }
}
@media screen and (max-width: 440px) {
  .about-mv {
    height: 180px;
  }
}
.about-mv__content {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  min-height: 390px;
  padding: 140px 7% 70px 8%;
  border-radius: 0 0 0 150px;
  background: linear-gradient(to bottom, rgba(224, 234, 244, 0.92) 0%, rgba(255, 255, 255, 0.9) 100%);
}
@media (max-width: 820px) {
  .about-mv__content {
    width: 50%;
    min-height: auto;
    padding: 32px 24px 48px 56px;
    border-radius: 0 0 0 80px;
  }
}
@media (max-width: 600px) {
  .about-mv__content {
    width: calc(100% - 150px);
    min-height: auto;
    padding: 16px 24px 16px 56px;
    border-radius: 0 0 0 80px;
    border-radius: 0 0 0 40px;
  }
}
.about-mv__title {
  margin: 0 0 42px;
  color: #222;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
@media (max-width: 820px) {
  .about-mv__title {
    margin: 0 0 24px;
    font-size: 28px;
  }
}
@media (max-width: 600px) {
  .about-mv__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-size: 20px;
  }
}
.about-mv__line {
  position: relative;
  display: block;
  width: 225px;
  height: 5px;
  margin: 0 0 26px;
  background-color: #1e73b9;
}
@media (max-width: 820px) {
  .about-mv__line {
    width: 160px;
    height: 4px;
    margin: 0 0 20px;
  }
}
@media (max-width: 600px) {
  .about-mv__line {
    width: 120px;
    margin: 0 0 8px;
  }
}
.about-mv__line::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 62px;
  height: 100%;
  background-color: #858585;
  content: "";
}
@media (max-width: 820px) {
  .about-mv__line::before {
    width: 44px;
  }
}
.about-mv__heading {
  display: flex;
  align-items: center;
  gap: 26px;
}
@media (max-width: 820px) {
  .about-mv__heading {
    gap: 16px;
  }
}
.about-mv__en {
  color: #2875b6;
  font-size: 58px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.06em;
}
@media (max-width: 820px) {
  .about-mv__en {
    font-size: 36px;
  }
}
@media (max-width: 600px) {
  .about-mv__en {
    font-size: 20px;
    width: 50px;
  }
}
.about-mv__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 114px;
  aspect-ratio: 1;
  border: 1px solid #5791be;
  color: #2875b6;
  font-size: 54px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.08em;
}
@media (max-width: 820px) {
  .about-mv__number {
    width: 72px;
    font-size: 34px;
  }
}
@media (max-width: 600px) {
  .about-mv__number {
    width: 40px;
    font-size: 20px;
  }
}

.about-content {
  padding: 100px 0 110px;
  overflow: hidden;
}
@media (max-width: 820px) {
  .about-content {
    padding: 60px 0 70px;
  }
}
.about-content__inner {
  width: min(1290px, 100% - 80px);
  margin: 0 auto;
}
@media (max-width: 820px) {
  .about-content__inner {
    width: calc(100% - 40px);
  }
}
.about-content__body {
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  align-items: start;
  gap: 80px;
}
@media (max-width: 1120px) {
  .about-content__body {
    gap: 40px;
    grid-template-columns: 400px minmax(0, 1fr);
  }
}
@media (max-width: 820px) {
  .about-content__body {
    grid-template-columns: 1fr;
  }
}
.about-content__left {
  display: flex;
  flex-direction: column;
}
.about-content__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 100px;
}
@media (max-width: 820px) {
  .about-content__heading {
    margin: 0 0 45px;
  }
}
.about-content__title {
  margin: 0;
  color: #333;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.4;
}
@media (max-width: 820px) {
  .about-content__title {
    font-size: 22px;
  }
}
.about-content__line {
  display: flex;
  width: 260px;
  height: 5px;
  margin: 48px 0 0;
}
@media (max-width: 820px) {
  .about-content__line {
    width: 180px;
    height: 4px;
    margin: 16px 0 0;
  }
}
.about-content__line-gray {
  width: 100px;
  background: #8d8d8d;
}
.about-content__line-blue {
  flex: 1;
  background: #367cc0;
}
.about-content__text p {
  margin: 0;
  font-size: 18px;
  line-height: 2.15;
}
@media (max-width: 820px) {
  .about-content__text p {
    font-size: 15px;
    line-height: 2;
  }
}
.about-content__text span {
  color: #3071b9;
}
.about-content__image {
  margin: 0;
  overflow: hidden;
  flex: 1;
}
.about-content__image img {
  display: block;
  width: 100%;
  height: auto;
}

.about-share {
  position: relative;
  padding: 100px 0;
}
@media (max-width: 820px) {
  .about-share {
    padding: 70px 0;
  }
}
.about-share__line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #333;
  transform: translateY(-50%);
}
.about-share__inner {
  position: relative;
  width: min(1290px, 100% - 80px);
  height: 0;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .about-share__inner {
    width: calc(100% - 40px);
  }
}
.about-share__btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

/* =================================
インタビュー
 ================================= */
.interview {
  background: #edf8fd;
}
.interview__mv-bg {
  background: url("../img/subpage/interview-mv-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}
.interview__pager-wrap {
  padding: 0 16px 160px;
  text-align: center;
}
.interview__pager-wrap--w {
  background-color: #fff;
}
@media (max-width: 820px) {
  .interview__pager-wrap {
    padding: 40px 16px;
  }
}
.interview__pager {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 0 5.5%;
  transform: translateY(-50%);
}
@media (max-width: 820px) {
  .interview__pager {
    flex-direction: column;
    align-items: center;
    transform: translateY(0);
  }
}
.interview__pager-link {
  display: flex;
  align-items: center;
  width: 280px;
  padding: 2px 15px;
  color: #fff;
  background: #333;
  border-radius: 999px;
  transition: opacity 0.3s;
}
.interview__pager-link:hover {
  opacity: 0.7;
}
.interview__pager-link--next {
  justify-content: flex-end;
}
.interview__pager-link--prev .interview__pager-text {
  margin-left: 20px;
}
.interview__pager-link--next .interview__pager-text {
  margin-right: 20px;
}
.interview__pager-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}
.interview__pager-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 820px) {
  .interview__pager-icon {
    width: 44px;
    height: 44px;
  }
}
@media (max-width: 600px) {
  .interview__pager-icon {
    width: 38px;
    height: 38px;
  }
}
.interview__pager-text {
  line-height: 1.5;
}
.interview__bottom {
  padding-bottom: 130px;
  background: #effaff;
}
@media (max-width: 600px) {
  .interview__bottom {
    padding-bottom: 70px;
  }
}

.interview-mv {
  position: relative;
  overflow: hidden;
  padding: 0 0 140px;
}
@media (max-width: 1120px) {
  .interview-mv {
    padding: 0 0 40px;
  }
}
@media (max-width: 820px) {
  .interview-mv {
    padding: 0 0 12px;
  }
}
.interview-mv__inner {
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(0, 50%);
  align-items: center;
  gap: 60px;
  padding: 0 0 0 16px;
}
@media (max-width: 1120px) {
  .interview-mv__inner {
    gap: 40px;
  }
}
@media (max-width: 820px) {
  .interview-mv__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0;
  }
}
.interview-mv__content {
  justify-self: end;
  width: min(520px, 100% - 40px);
}
@media (max-width: 820px) {
  .interview-mv__content {
    order: 2;
    justify-self: auto;
    width: 100%;
    padding: 0 20px;
  }
}
.interview-mv__catch {
  margin: 100px 0 50px;
  color: #2e81c4;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
}
@media (max-width: 1120px) {
  .interview-mv__catch {
    margin: 100px 0 50px;
    font-size: 32px;
  }
}
@media (max-width: 820px) {
  .interview-mv__catch {
    margin: 0 0 30px;
    font-size: 38px;
  }
}
@media (max-width: 600px) {
  .interview-mv__catch {
    margin: 0 0 30px;
    font-size: 24px;
  }
}
.interview-mv__profile {
  position: relative;
  width: 100%;
  max-width: 580px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #edf8fd;
}
@media (max-width: 1120px) {
  .interview-mv__profile {
    max-width: 400px;
  }
}
@media (max-width: 820px) {
  .interview-mv__profile {
    max-width: 400px;
    margin: 0 auto;
  }
}
@media (max-width: 600px) {
  .interview-mv__profile {
    max-width: 300px;
    margin: 0 auto;
  }
}
.interview-mv__illustration {
  position: absolute;
  bottom: 5%;
  left: 45%;
  width: 28%;
  transform: translateX(-50%);
}
@media (max-width: 1120px) {
  .interview-mv__illustration {
    left: 34%;
  }
}
@media (max-width: 820px) {
  .interview-mv__illustration {
    bottom: 4%;
    left: 37%;
    width: 30%;
  }
}
.interview-mv__illustration--ss {
  width: 24%;
}
@media (max-width: 820px) {
  .interview-mv__illustration--ss {
    bottom: 4%;
    left: 36%;
    width: 28%;
  }
}
.interview-mv__illustration--sm {
  width: 23%;
}
@media (max-width: 820px) {
  .interview-mv__illustration--sm {
    bottom: 4%;
    left: 35%;
    width: 25%;
  }
}
.interview-mv__illustration--th {
  width: 28%;
}
@media (max-width: 820px) {
  .interview-mv__illustration--th {
    bottom: 4%;
    left: 35%;
    width: 31%;
  }
}
.interview-mv__illustration--mi {
  width: 24%;
}
@media (max-width: 820px) {
  .interview-mv__illustration--mi {
    bottom: 4%;
    left: 36%;
    width: 27%;
  }
}
.interview-mv__illustration--tk {
  width: 28%;
}
@media (max-width: 820px) {
  .interview-mv__illustration--tk {
    bottom: 4%;
    left: 35%;
    width: 29%;
  }
}
.interview-mv__illustration img {
  display: block;
  width: 100%;
  height: auto;
}
.interview-mv__info {
  position: absolute;
  top: 54%;
  right: 0;
  transform: translateY(-50%);
}
@media (max-width: 820px) {
  .interview-mv__info {
    top: 55%;
    right: 2%;
  }
}
@media (max-width: 600px) {
  .interview-mv__info {
    top: 55%;
    right: -4%;
  }
}
.interview-mv__info p {
  margin: 0;
  color: #333;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}
@media (max-width: 820px) {
  .interview-mv__info p {
    font-size: 15px;
  }
}
.interview-mv__info--tk {
  right: 10%;
}
.interview-mv__name {
  display: flex;
  align-items: baseline;
  margin: 46px 0 0 !important;
  color: #25a7e0 !important;
  line-height: 1 !important;
}
@media (max-width: 820px) {
  .interview-mv__name {
    margin: 24px 0 0 !important;
  }
}
.interview-mv__name strong {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
@media (max-width: 820px) {
  .interview-mv__name strong {
    font-size: 24px;
  }
}
.interview-mv__name span {
  margin-left: 5px;
  color: #333;
  font-size: 27px;
}
@media (max-width: 820px) {
  .interview-mv__name span {
    font-size: 17px;
  }
}
.interview-mv__image {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 0 0 0 120px;
}
@media (max-width: 820px) {
  .interview-mv__image {
    order: 1;
    border-radius: 0;
  }
}
.interview-mv__image img {
  display: block;
  width: 100%;
  height: auto;
}

.interview-content {
  padding: 40px 20px 120px;
  background: #edf8fd;
}
@media (max-width: 820px) {
  .interview-content {
    padding: 60px 20px 80px;
  }
}
.interview-content__inner {
  max-width: 760px;
  margin: 0 auto;
}
.interview-content__intro {
  margin: 0 0 88px;
}
@media (max-width: 820px) {
  .interview-content__intro {
    margin: 0 0 60px;
  }
}
.interview-content__heading, .interview-content__label {
  position: relative;
  padding: 0 0 16px;
  color: #2875c4;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media (max-width: 820px) {
  .interview-content__heading, .interview-content__label {
    padding: 0 0 18px;
    font-size: 17px;
  }
}
.interview-content__heading::after, .interview-content__label::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 44px;
  height: 4px;
  background: #2875c4;
  content: "";
}
@media (max-width: 820px) {
  .interview-content__heading::after, .interview-content__label::after {
    width: 36px;
    height: 4px;
  }
}
.interview-content__lead {
  margin: 32px 0 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.03em;
}
@media (max-width: 820px) {
  .interview-content__lead {
    margin: 26px 0 0;
    font-size: 23px;
  }
  .interview-content__lead br {
    display: none;
  }
}
.interview-content__list {
  display: flex;
  flex-direction: column;
  gap: 86px;
}
@media (max-width: 820px) {
  .interview-content__list {
    gap: 60px;
  }
}
.interview-content__label {
  margin: 0;
}
.interview-content__title {
  margin: 30px 0 32px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.03em;
}
@media (max-width: 820px) {
  .interview-content__title {
    margin: 24px 0;
    font-size: 20px;
  }
  .interview-content__title br {
    display: none;
  }
}
.interview-content__text {
  line-height: 1.9;
  letter-spacing: 0.02em;
}
@media (max-width: 820px) {
  .interview-content__text {
    line-height: 1.8;
  }
}
.interview-content__text p {
  margin: 0;
}

.interview-schedule {
  padding: 120px 20px;
  background: url("../img/subpage/interview-schedule-bg.png") no-repeat center bottom/cover;
}
@media (max-width: 820px) {
  .interview-schedule {
    padding: 80px 20px;
  }
}
.interview-schedule__inner {
  max-width: 780px;
  margin: 0 auto;
}
.interview-schedule__inner .interview-content__label {
  margin: 0 0 20px;
}
.interview-schedule__inner .interview-content__label:not(:first-child) {
  margin-top: 56px;
}
@media (max-width: 820px) {
  .interview-schedule__inner .interview-content__label {
    margin: 0 0 16px;
  }
  .interview-schedule__inner .interview-content__label:not(:first-child) {
    margin-top: 40px;
  }
}
.interview-schedule__item {
  margin: 0;
}
.interview-schedule__item[open] .interview-schedule__toggle::after {
  transform: translateY(-50%) rotate(180deg);
}
.interview-schedule__toggle {
  position: relative;
  padding: 12px 60px 12px 20px;
  color: #fff;
  background: #2d79c8;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  list-style: none;
  transition: opacity 0.3s;
}
@media (max-width: 820px) {
  .interview-schedule__toggle {
    padding: 12px 50px 12px 16px;
  }
}
.interview-schedule__toggle::-webkit-details-marker {
  display: none;
}
.interview-schedule__toggle:hover {
  opacity: 0.8;
}
.interview-schedule__toggle::after {
  position: absolute;
  top: 50%;
  right: 24px;
  font-size: 18px;
  line-height: 1;
  content: "▼";
  transform: translateY(-50%);
  transition: transform 0.3s;
}
@media (max-width: 820px) {
  .interview-schedule__toggle::after {
    right: 18px;
    font-size: 14px;
  }
}
.interview-schedule__content {
  padding: 16px 0 0;
}
.interview-schedule__table {
  width: 100%;
  border: 1px solid #b6b6b6;
  border-collapse: collapse;
  table-layout: fixed;
}
.interview-schedule__table th,
.interview-schedule__table td {
  padding: 12px;
  border: 1px solid #b6b6b6;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}
@media (max-width: 820px) {
  .interview-schedule__table th,
  .interview-schedule__table td {
    padding: 8px;
    font-size: 14px;
  }
}
.interview-schedule__table th {
  width: 200px;
  color: #fff;
  background: #2d79c8;
  text-align: center;
}
@media (max-width: 820px) {
  .interview-schedule__table th {
    width: 80px;
  }
}
.interview-schedule__table td {
  background: #effaff;
}

/* =================================
下層共通　
 ================================= */
.page {
  background: linear-gradient(to bottom, #f2f2f2 0%, #fcfcfc 100%);
}
.page__title-wrap {
  display: flex;
  align-items: center;
}
@media (max-width: 820px) {
  .page__title-wrap {
    display: block;
  }
}
.page__title {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 50%;
  min-height: 320px;
  padding: 40px 40px 60px;
  background: #65c3ea;
  border-radius: 0 0 200px 0;
  font-size: 36px;
}
@media (max-width: 1120px) {
  .page__title {
    font-size: 28px;
    min-height: 260px;
  }
}
@media (max-width: 820px) {
  .page__title {
    width: 100%;
    min-height: 180px;
    border-radius: 0;
    font-size: 20px;
  }
}
.page__title-inner {
  text-align: center;
}
.page__heading {
  margin-bottom: 40px;
  color: #fff;
  font-weight: 400;
  line-height: 1.2;
}
@media (max-width: 1120px) {
  .page__heading {
    margin-bottom: 32px;
  }
}
.page__line {
  position: relative;
  display: block;
  width: 240px;
  height: 6px;
  margin: 0 auto;
  background: #d9d9d9;
  border-radius: 999px;
}
@media (max-width: 820px) {
  .page__line {
    width: 200px;
  }
}
.page__line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 80px;
  width: 160px;
  height: 100%;
  background: #0d73c9;
  border-radius: inherit;
}
@media (max-width: 820px) {
  .page__line::after {
    width: 120px;
  }
}
.page__lead {
  width: 50%;
  padding: 0 80px;
  margin: 80px 0 0;
}
@media (max-width: 820px) {
  .page__lead {
    width: 100%;
    padding: 40px 20px;
    margin: 0;
  }
}
.page__lead p {
  line-height: 2;
}
.page__lead a {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .page__lead--privacy {
    display: none;
  }
}
.page__content {
  padding: 60px 16px;
}
@media (max-width: 820px) {
  .page__content {
    padding: 0 16px;
  }
}
@media (max-width: 600px) {
  .page__content {
    padding: 0;
  }
}
.page__content-inner {
  max-width: 880px;
  margin: 0 auto 0;
  padding: 40px;
  background-color: #fff;
  border-radius: 40px;
}
@media (max-width: 820px) {
  .page__content-inner {
    margin: 0 auto 0;
    border-radius: 12px;
    padding: 40px 14px;
  }
}
@media (max-width: 600px) {
  .page__content-inner {
    border-radius: 0;
    padding: 40px 16px;
  }
}
@media (max-width: 820px) {
  .page__content-inner--privacy {
    margin: 24px auto 0;
  }
}
@media (max-width: 600px) {
  .page__content-inner--privacy {
    margin: 0 auto 0;
  }
}
/* =================================
募集要項
 ================================= */
.outline__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.outline__heading {
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #0071bc;
  font-weight: 700;
  font-size: 20px;
}
@media (max-width: 820px) {
  .outline__heading {
    font-size: 17px;
  }
}
.outline__table {
  width: 100%;
  margin-bottom: 64px;
  border-collapse: collapse;
}
@media (max-width: 820px) {
  .outline__table {
    border: 1px solid #ececec;
  }
}
.outline__table--m-none {
  margin-bottom: 0;
}
.outline__table th,
.outline__table td {
  padding: 24px 20px;
  border: 1px solid #ececec;
  vertical-align: top;
  text-align: left;
}
.outline__table th {
  width: 28%;
  background: #e1e1e1;
  font-weight: 700;
}
.outline__table th::before {
  content: "■";
  margin-right: 6px;
  color: #000;
}
@media (max-width: 820px) {
  .outline__table tr {
    display: block;
  }
  .outline__table th,
  .outline__table td {
    display: block;
    width: 100%;
    border: 0;
    padding: 12px;
  }
}
.outline__entry {
  padding-top: 64px;
  margin-bottom: 64px;
}
.outline__title {
  position: relative;
  margin-bottom: 32px;
  padding-left: 14px;
  font-weight: 700;
}
.outline__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 18px;
  background: #0071bc;
}
.outline__buttons {
  display: flex;
  justify-content: center;
  gap: 80px;
}
@media (max-width: 820px) {
  .outline__buttons {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
}
.outline__buttons a {
  transition: opacity 0.3s;
}
.outline__buttons a:hover {
  opacity: 0.7;
}

/* =================================
お問い合わせ
 ================================= */
.entry__form {
  border-top: 1px solid #ececec;
}
.entry__row {
  display: flex;
  border-bottom: 1px solid #ececec;
}
@media (max-width: 820px) {
  .entry__row {
    display: block;
  }
}
.entry__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 33%;
  padding: 28px 24px;
  background: #e1e1e1;
  font-weight: 700;
}
@media (max-width: 820px) {
  .entry__head {
    width: 100%;
    padding: 8px 12px;
  }
}
.entry__body {
  width: 67%;
  padding: 24px;
}
@media (max-width: 820px) {
  .entry__body {
    width: 100%;
    padding: 12px 16px 12px;
  }
}
.entry__body input[type=text],
.entry__body input[type=email],
.entry__body input[type=tel],
.entry__body textarea {
  width: 100%;
  border: 1px solid #777;
  background: #fff;
  font-size: 16px;
}
.entry__body input[type=text],
.entry__body input[type=email],
.entry__body input[type=tel] {
  height: 48px;
  padding: 0 12px;
}
.entry__body textarea {
  min-height: 190px;
  padding: 12px;
  resize: vertical;
}
.entry__required {
  flex-shrink: 0;
  margin-left: 16px;
  padding: 5px 8px;
  border-radius: 5px;
  background: #ed1c24;
  color: #fff;
  line-height: 1;
  font-size: 14px;
}
.entry__input--short {
  max-width: 230px;
}
@media (max-width: 820px) {
  .entry__input--short {
    max-width: 100%;
  }
}
.entry__postal {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.entry__postal input {
  max-width: 230px;
}
@media (max-width: 820px) {
  .entry__postal input {
    max-width: 100%;
  }
}
.entry__radio-group {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 48px;
}
.entry__radio-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.entry__radio-group input {
  width: 18px;
  height: 18px;
  margin: 0;
}
.entry__submit {
  margin-top: 48px;
  text-align: center;
}
.entry__submit input[type=submit] {
  min-width: 170px;
  padding: 14px 30px;
  border: 0;
  border-radius: 6px;
  background: #0071bc;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.3s;
}
.entry__submit input[type=submit]:hover {
  opacity: 0.7;
}

/* =================================
プライバシーポリシー
 ================================= */
.privacy__section {
  margin-bottom: 60px;
}
.privacy__section:last-child {
  margin-bottom: 0;
}
@media (max-width: 820px) {
  .privacy__section {
    margin-bottom: 40px;
  }
}
.privacy__heading {
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 2px solid #0071bc;
  font-weight: 700;
  font-size: 20px;
}
@media (max-width: 820px) {
  .privacy__heading {
    font-size: 17px;
  }
}
.privacy p + p {
  margin-top: 12px;
}
.privacy p {
  line-height: 2;
}

/* =================================
事業内容
 ================================= */
.about__content {
  padding: 40px 0 0;
}
.about__content--top {
  margin: 60px 0 0;
}
@media (max-width: 820px) {
  .about__content--top {
    margin: 40px 0 0;
  }
}
.about__content--gray {
  background-color: #fbfaf8;
  padding: 0 0 120px;
}
@media (max-width: 820px) {
  .about__content--gray {
    padding: 0 0 40px;
  }
}
.about__content--last {
  padding: 0 0 120px;
}
@media (max-width: 820px) {
  .about__content--last {
    padding: 0 0 40px;
  }
}
.about__content-inner {
  padding: 0 16px;
}
.about__what {
  background-image: url(../img/subpage/business-what-bg.png);
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  padding: 80px 16px;
}
@media (max-width: 820px) {
  .about__what {
    padding: 40px 16px;
  }
}
.about__what-content {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
}
@media (max-width: 820px) {
  .about__what-content {
    flex-direction: column-reverse;
    max-width: 560px;
  }
}
.about__img01 {
  margin: -80px auto 0;
  max-width: 880px;
}
@media (max-width: 600px) {
  .about__img01 {
    margin: -30px auto 0;
  }
}
.about__img02 {
  margin: -40px auto 0;
  max-width: 880px;
}
@media (max-width: 600px) {
  .about__img02 {
    margin: -20px auto 0;
  }
}
.about__3k-bnr {
  display: block;
  max-width: 380px;
  margin: 40px auto 0;
}

/* サイト全体スタイルシート */
/* =========================
   base（全ページ共通）
========================= */
* {
  word-break: break-word;
  box-sizing: border-box;
}

body {
  line-height: 1.8;
  color: #141414;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "Yu Gothic", "YuGothic", sans-serif;
  font-family: "Noto Sans", sans-serif;
}

p {
  font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
  color: #141414;
}

a {
  color: #141414;
}
a:hover {
  cursor: pointer;
  opacity: 0.7;
}

img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

ul,
ol,
li {
  list-style: none;
  font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
}

table {
  font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
}

dd,
dt {
  list-style: none;
  font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
}

/* =========================
   表示制御
========================= */
.pc-block {
  display: block;
}
@media (max-width: 820px) {
  .pc-block {
    display: none;
  }
}

.sp-block {
  display: none;
}
@media (max-width: 820px) {
  .sp-block {
    display: block;
  }
}

@media (max-width: 820px) {
  .main {
    margin: 64px 0 0;
  }
}

/* =========================
   パンくずリスト
========================= */
.breadcrumbs-wrap {
  background-color: #e0e0e0;
}
.breadcrumbs-wrap--white {
  background-color: #fff;
}
.breadcrumbs-wrap__content {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 12px 0;
  font-size: 11px;
}

/* =================================
header
 ================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}
.header__inner {
  display: flex;
  align-items: stretch;
  max-width: 1280px;
  height: 72px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 0 0 20px 20px;
}
@media (max-width: 1120px) {
  .header__inner {
    justify-content: space-between;
  }
}
@media (max-width: 820px) {
  .header__inner {
    justify-content: space-between;
    height: 64px;
    border-radius: 0;
  }
}
.header__logo {
  display: flex;
  flex: 0 0 340px;
  flex-direction: column;
  justify-content: center;
  padding: 6px 28px;
  color: #10487e;
  text-decoration: none;
}
@media (max-width: 820px) {
  .header__logo {
    flex: 0 1 auto;
    padding: 8px 16px;
  }
}
.header__logo-img {
  display: block;
  width: 264px;
  height: auto;
}
@media (max-width: 820px) {
  .header__logo-img {
    width: 180px;
  }
}
.header__logo-copy {
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.04em;
}
@media (max-width: 820px) {
  .header__logo-copy {
    display: none;
  }
}
.header__nav {
  flex: 1;
}
@media (max-width: 1120px) {
  .header__nav {
    display: none;
  }
}
.header__nav-list {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0 32px 0 0;
  list-style: none;
  justify-content: flex-end;
  gap: 32px;
}
.header__nav-item {
  height: 100%;
}
.header__nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #222;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s, background-color 0.3s;
}
.header__nav-link:hover {
  color: #0067ad;
  background-color: rgba(255, 255, 255, 0.6);
}
.header__links {
  display: flex;
}
@media (max-width: 1120px) {
  .header__links {
    margin-left: auto;
  }
}
@media (max-width: 820px) {
  .header__links {
    display: none;
  }
}
.header__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: opacity 0.3s;
}
.header__link:hover {
  opacity: 0.8;
}
.header__link--requirements {
  background-color: #06438e;
}
.header__link--entry {
  width: 128px;
  background-color: #ed1c24;
}
.header__menu-btn {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 72px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background-color: #050505;
  color: #fff;
  cursor: pointer;
  border-radius: 0 0 12px 0;
}
@media (max-width: 820px) {
  .header__menu-btn {
    flex: 0 0 64px;
    border-radius: 0;
  }
}
.header__menu-lines {
  position: relative;
  display: block;
  width: 34px;
  height: 12px;
}
.header__menu-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transition: top 0.3s, transform 0.3s;
}
.header__menu-line:first-child {
  top: 0;
}
.header__menu-line:last-child {
  top: 11px;
}
.header__menu-text {
  font-size: 12px;
  line-height: 1;
  text-transform: lowercase;
}
.header.is-open .header__menu-line:first-child {
  top: 5px;
  transform: rotate(45deg);
}
.header.is-open .header__menu-line:last-child {
  top: 5px;
  transform: rotate(-45deg);
}

.header-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1001;
  width: min(520px, 100%);
  height: 100dvh;
  padding: 120px 60px 60px;
  overflow-y: auto;
  background-color: #fff;
  visibility: hidden;
  opacity: 0;
  transform: translateX(100%);
  transition: visibility 0.4s, opacity 0.4s, transform 0.4s;
}
@media (max-width: 820px) {
  .header-menu {
    padding: 100px 24px 40px;
  }
}
.header-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}
.header-menu__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.header-menu__close {
  position: absolute;
  top: -120px;
  right: -60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  background-color: #000;
  cursor: pointer;
}
@media (max-width: 820px) {
  .header-menu__close {
    top: -100px;
    right: -24px;
    width: 64px;
    height: 64px;
  }
}
.header-menu__close-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 1px;
  background-color: #fff;
}
.header-menu__close-line:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}
.header-menu__close-line:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.header-menu__nav {
  flex: 1;
}
.header-menu__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid #d9e0e6;
  list-style: none;
}
.header-menu__item {
  border-bottom: 1px solid #d9e0e6;
}
.header-menu__link {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 8px;
  color: #222;
  text-decoration: none;
  transition: color 0.3s;
}
.header-menu__link:hover {
  color: #0072bc;
}
@media (max-width: 600px) {
  .header-menu__link {
    padding: 8px 8px;
  }
}
.header-menu__number {
  color: #0072bc;
  font-size: 12px;
  line-height: 1;
}
.header-menu__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .header-menu__text {
    font-size: 16px;
  }
}
.header-menu__buttons {
  display: flex;
  gap: 16px;
  margin: 48px 0 0;
}
@media (max-width: 820px) {
  .header-menu__buttons {
    flex-direction: column;
    gap: 12px;
    margin: 32px 0 0;
  }
}
.header-menu__button {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.3s;
}
.header-menu__button:hover {
  opacity: 0.8;
}
.header-menu__button--requirements {
  background-color: #06438e;
}
.header-menu__button--entry {
  background-color: #ed1c24;
}

body.is-menu-open {
  overflow: hidden;
}

/* =================================
footer
 ================================= */
.footer {
  position: relative;
  padding: 130px 20px 24px;
  background: #f5f5f5;
}
@media (max-width: 820px) {
  .footer {
    padding: 100px 20px 40px;
  }
}
.footer__entry-btn {
  position: absolute;
  right: 6%;
  top: -65px;
  z-index: 10;
  width: 200px;
  aspect-ratio: 1;
}
@media (max-width: 1120px) {
  .footer__entry-btn {
    right: 8px;
    top: -45px;
    width: 120px;
  }
}
.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.footer__logo {
  max-width: 460px;
  margin: 0 auto;
  display: block;
}
@media (max-width: 820px) {
  .footer__logo {
    max-width: 240px;
  }
}
.footer__address {
  margin: 36px 0 80px;
  color: #444;
  font-style: normal;
  text-align: center;
  font-size: 14px;
}
@media (max-width: 820px) {
  .footer__address {
    margin: 24px 0 50px;
  }
}
.footer__copyright {
  display: block;
  text-align: center;
  color: #666;
  font-size: 13px;
}
@media (max-width: 820px) {
  .footer__copyright {
    font-size: 12px;
  }
}
.footer__pagetop {
  position: absolute;
  right: 24px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #333;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s, transform 0.3s;
}
@media (max-width: 820px) {
  .footer__pagetop {
    right: 7px;
    bottom: 40px;
    width: 50px;
    height: 50px;
  }
}
@media (hover: hover) {
  .footer__pagetop:hover {
    opacity: 0.8;
    transform: translateY(-4px);
  }
}
.footer__pagetop-text {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1;
}
@media (max-width: 820px) {
  .footer__pagetop-text {
    margin: 0 0 7px;
    font-size: 9px;
  }
}
.footer__pagetop-arrow {
  width: 16px;
  height: 16px;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: rotate(45deg);
}
@media (max-width: 820px) {
  .footer__pagetop-arrow {
    width: 11px;
    height: 11px;
    border-width: 2px;
  }
}

/* =================================
ローディング画面
================================= */
.loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loading.is-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading img {
  width: 180px;
}
@media (max-width: 820px) {
  .loading img {
    width: 140px;
  }
}

/* =================================
エントリーボタン
================================= */
.entry-btn {
  position: relative;
  width: 200px;
  aspect-ratio: 1;
}
@media (max-width: 820px) {
  .entry-btn {
    width: 90px;
  }
}
.entry-btn--floating {
  position: fixed;
  right: 6%;
  bottom: 30px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}
@media (max-width: 820px) {
  .entry-btn--floating {
    right: 20px;
    bottom: 20px;
  }
}
.entry-btn--floating.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.entry-btn__entry {
  position: absolute;
  inset: 0;
  display: block;
  transition: transform 0.3s;
}
@media (hover: hover) {
  .entry-btn__entry:hover {
    transform: scale(1.04);
  }
}
.entry-btn__entry img {
  display: block;
  width: 100%;
  height: auto;
}
.entry-btn__recruit {
  position: absolute;
  bottom: 0;
  left: -14%;
  z-index: 1;
  display: block;
  width: 44%;
  transition: transform 0.3s;
}
@media (max-width: 820px) {
  .entry-btn__recruit {
    bottom: -2%;
    left: -10%;
  }
}
@media (hover: hover) {
  .entry-btn__recruit:hover {
    transform: scale(1.08);
  }
}
.entry-btn__recruit img {
  display: block;
  width: 100%;
  height: auto;
}

/* =================================
ボタン
================================= */
.btn-style__link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 200px;
  margin: auto auto 0 0;
  padding: 8px 8px 8px 24px;
  border-radius: 999px;
  background: #333;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s;
}
@media (max-width: 820px) {
  .btn-style__link {
    width: 180px;
    padding: 4px 8px 4px 24px;
  }
}
.btn-style__link--blue {
  background: #17489b;
}
.btn-style__link--long {
  width: 240px;
}
@media (max-width: 600px) {
  .btn-style__link--long {
    width: 200px;
  }
}
@media (hover: hover) {
  .btn-style__link:hover {
    opacity: 0.8;
  }
  .btn-style__link:hover .btn-style__link-icon {
    transform: translateX(4px);
  }
}
.btn-style__link-text {
  font-size: 16px;
}
@media (max-width: 820px) {
  .btn-style__link-text {
    font-size: 14px;
  }
}
.btn-style__link-icon {
  display: block;
  width: 40px;
  transition: transform 0.3s;
}
@media (max-width: 820px) {
  .btn-style__link-icon {
    width: 44px;
  }
}
.btn-style__link-icon img {
  display: block;
  width: 100%;
  height: auto;
}
.btn-style__label {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  color: #fff;
  line-height: 1;
  pointer-events: none;
}

/* =====================================================
  Scroll Fade-in Animation
  ・JSで .action が付与されると表示される
  ・fade-in-js は必須クラス
  ・動きは variation クラスで切り替える
===================================================== */
/* ------------------------------
  Base（共通）
------------------------------ */
.fade-in-js {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.7s ease;
}
.fade-in-js.action {
  opacity: 1;
  transform: none;
}

/* ------------------------------
  Variations（動きの種類）
  ※ fade-in-js と併用する
------------------------------ */
/* 下から上へフェードイン（基本） */
.fade-up {
  transform: translateY(30px);
}

/* 上から下へフェードイン */
.fade-down {
  transform: translateY(-30px);
}

/* 左からスライドイン */
.fade-left {
  transform: translateX(-40px);
}

/* 右からスライドイン */
.fade-right {
  transform: translateX(40px);
}

/* ズームイン（控えめ） */
.fade-zoom {
  transform: scale(0.95);
}

/* ズームイン（強め・強調用） */
.fade-zoom-big {
  transform: scale(0.9);
}

/* 回転しながらフェードイン（遊び要素） */
.fade-rotate {
  transform: translateY(20px) rotate(-3deg);
}

/* ------------------------------
  Delay（表示タイミング調整）
  ・複数要素を順番に表示したいときに使用
------------------------------ */
.fade-delay-1 {
  transition-delay: 0.1s;
}

.fade-delay-2 {
  transition-delay: 0.2s;
}

.fade-delay-3 {
  transition-delay: 0.3s;
}

.fade-delay-4 {
  transition-delay: 0.4s;
}

.fade-delay-5 {
  transition-delay: 0.5s;
}

/* ------------------------------
  Speed（表示速度調整・任意）
------------------------------ */
/* 速く表示したいとき */
.fade-fast {
  transition-duration: 0.35s, 0.5s;
}

/* ゆっくり上品に表示したいとき */
.fade-slow {
  transition-duration: 0.8s, 1.1s;
}

/* =========================
   ロード
========================= */
.fade-in-onload {
  opacity: 0;
  animation: fadeInOnLoad 0.8s ease forwards;
  animation-delay: 0.3s;
}

@keyframes fadeInOnLoad {
  to {
    opacity: 1;
  }
}
.fade-in-onload02 {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInOnLoad02 1.5s ease forwards;
  animation-delay: 1.5s;
}

@keyframes fadeInOnLoad02 {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================
   editor style
========================= */
.editor-style__block {
  margin: 0 0 40px;
}
.editor-style .aligncenter {
  display: block;
  margin: 0 auto;
}
.editor-style .alignright {
  float: right;
}
.editor-style .alignleft {
  float: left;
}
.editor-style img {
  width: auto;
}
.editor-style {
  /* --------------------
    見出し
  -------------------- */
}
.editor-style h1 {
  font-size: 28px;
  margin: 0 0 32px;
  line-height: 1.4;
}
@media (max-width: 820px) {
  .editor-style h1 {
    font-size: 20px;
  }
}
.editor-style h2 {
  font-size: 22px;
  margin: 56px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #3071b9;
  line-height: 1.4;
}
@media (max-width: 820px) {
  .editor-style h2 {
    font-size: 18px;
  }
}
.editor-style h3 {
  font-size: 18px;
  margin: 40px 0 12px;
  line-height: 1.4;
}
@media (max-width: 820px) {
  .editor-style h3 {
    font-size: 16px;
  }
}
.editor-style h4 {
  font-size: 16px;
  margin: 32px 0 8px;
  line-height: 1.4;
}
.editor-style {
  /* --------------------
    テキスト
  -------------------- */
}
.editor-style p {
  margin: 0 0 16px;
}
.editor-style strong {
  font-weight: 700;
}
.editor-style em {
  font-style: italic;
}
.editor-style a {
  color: #3071b9;
  text-decoration: underline;
}
.editor-style a:hover {
  text-decoration: none;
}
.editor-style {
  /* --------------------
    リスト
  -------------------- */
}
.editor-style ul,
.editor-style ol {
  margin: 16px 0 24px 1.5em;
  padding: 0;
}
.editor-style li {
  margin-bottom: 8px;
}
.editor-style ul ul,
.editor-style ol ol {
  margin-top: 8px;
  margin-bottom: 0;
}
.editor-style {
  /* --------------------
    引用
  -------------------- */
}
.editor-style blockquote {
  margin: 24px 0;
  padding: 16px 24px;
  background: #f5f7f6;
  border-left: 4px solid #3071b9;
}
.editor-style blockquote p {
  margin: 0;
}
.editor-style cite {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}
.editor-style {
  /* --------------------
    テーブル（クラシック想定）
    - HTMLを触れない前提なので table 自体をスクロール容器化
  -------------------- */
}
.editor-style table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
  /* ★SP横スクロール対応（HTML触らない版） */
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.editor-style th,
.editor-style td {
  padding: 12px 14px;
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
  /* ★列が多い時に潰れないように */
  white-space: nowrap;
}
.editor-style th {
  background: #f0f5f2;
  font-weight: 600;
}
.editor-style {
  /* --------------------
    画像（クラシック想定）
  -------------------- */
}
.editor-style img {
  max-width: 100%;
  height: auto;
  display: block;
}
.editor-style {
  /* クラシックのキャプションは .wp-caption を使うことが多い */
}
.editor-style .wp-caption {
  margin: 32px 0;
  max-width: 100%;
}
.editor-style .wp-caption img {
  margin: 0 auto;
}
.editor-style .wp-caption-text {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
  text-align: center;
}
.editor-style {
  /* figcaption で入るケースもあるので一応 */
}
.editor-style figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
  text-align: center;
}
.editor-style {
  /* --------------------
    区切り線
  -------------------- */
}
.editor-style hr {
  margin: 48px 0;
  border: none;
  height: 1px;
  background: #ddd;
}
.editor-style {
  /* --------------------
    コード
  -------------------- */
}
.editor-style pre {
  margin: 24px 0;
  padding: 16px;
  background: #1e1e1e;
  color: #fff;
  font-size: 14px;
  overflow-x: auto;
  border-radius: 6px;
}
.editor-style code {
  font-family: Consolas, Monaco, monospace;
}
.editor-style {
  /* --------------------
    定義リスト
  -------------------- */
}
.editor-style dl {
  margin: 24px 0;
}
.editor-style dt {
  font-weight: 600;
  margin-top: 16px;
}
.editor-style dd {
  margin-left: 0;
  margin-top: 4px;
  padding-left: 16px;
  border-left: 3px solid #e0e0e0;
}
.editor-style {
  /* --------------------
    ボタン風リンク（任意）
  -------------------- */
}
.editor-style .is-style-button {
  display: inline-block;
  padding: 12px 24px;
  background: #3071b9;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
}
.editor-style .is-style-button:hover {
  opacity: 0.85;
}/*# sourceMappingURL=style.css.map */