@charset "utf-8";

/* ==========================================================================
   下層ページ共通
   寸法・時序は参照サイトの実測値に準拠
   ========================================================================== */

/* --------------------------------------------------------------------------
   ページ見出し（hero01）
   -------------------------------------------------------------------------- */
.hero01 {
  overflow: hidden;
}
.hero01 .hero01__in {
  width: 110rem;
  margin-inline: auto;
  padding-top: 18rem;
}
@media screen and (max-width: 1023px) {
  .hero01 .hero01__in {
    width: 34.5rem;
    padding-top: 12rem;
  }
}
.hero01 .hero01__ttl {
  font-size: max(1.8rem, 10px);
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1023px) {
  .hero01 .hero01__ttl {
    font-size: max(1.5rem, 10px);
    line-height: 1.8;
  }
}
.hero01 .hero01__en {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: max(8rem, 10px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--c-brand);
}
@media screen and (max-width: 1023px) {
  .hero01 .hero01__en {
    font-size: max(5.3rem, 10px);
    letter-spacing: 0;
  }
}
.hero01 .hero01__span {
  display: inline-flex;
  overflow: hidden;
}
.hero01 .hero01__span span {
  display: inline-block;
}

/* 背景画像つきの見出し */
.hero01--bg {
  position: relative;
  z-index: 1;
}
.hero01--bg .hero01__bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
}
.hero01--bg .hero01__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 自社写真は素のままなので、文字が乗る下部だけ階調を敷く */
.hero01--bg .hero01__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 16, 22, 0.5) 0%,
    rgba(12, 16, 22, 0.25) 40%,
    rgba(12, 16, 22, 0.68) 100%
  );
}
.hero01--bg .hero01__in {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
  min-height: 100lvh;
  padding-bottom: 10rem;
}
.hero01--bg .hero01__ttl,
.hero01--bg .hero01__en {
  color: var(--c-white);
}

/* 読み込み後の出現 */
.hero01 .hero01__in.js-load .hero01__ttl,
.hero01 .hero01__in.js-load .breadcrumb {
  opacity: 0;
  translate: 1.5rem;
  transition: opacity 0.8s var(--e-main), translate 0.8s var(--e-main);
}
.hero01 .hero01__in.js-load .breadcrumb {
  transition-delay: 0.3s;
}
.hero01 .hero01__in.js-load .hero01__span span {
  translate: 1em;
  transition: translate 1s var(--e-main);
}
.hero01 .hero01__in.js-load .hero01__span:nth-of-type(1) span { transition-delay: 0s; }
.hero01 .hero01__in.js-load .hero01__span:nth-of-type(2) span { transition-delay: 0.02s; }
.hero01 .hero01__in.js-load .hero01__span:nth-of-type(3) span { transition-delay: 0.04s; }
.hero01 .hero01__in.js-load .hero01__span:nth-of-type(4) span { transition-delay: 0.06s; }
.hero01 .hero01__in.js-load .hero01__span:nth-of-type(5) span { transition-delay: 0.08s; }
.hero01 .hero01__in.js-load .hero01__span:nth-of-type(6) span { transition-delay: 0.1s; }
.hero01 .hero01__in.js-load .hero01__span:nth-of-type(7) span { transition-delay: 0.12s; }
.hero01 .hero01__in.js-load .hero01__span:nth-of-type(8) span { transition-delay: 0.14s; }
.hero01 .hero01__in.js-load .hero01__span:nth-of-type(9) span { transition-delay: 0.16s; }
.hero01 .hero01__in.js-load .hero01__span:nth-of-type(10) span { transition-delay: 0.18s; }
.hero01 .hero01__in.js-load .hero01__span:nth-of-type(11) span { transition-delay: 0.2s; }
.hero01 .hero01__in.js-load .hero01__span:nth-of-type(12) span { transition-delay: 0.22s; }
.hero01 .hero01__in.js-load--on .hero01__ttl,
.hero01 .hero01__in.js-load--on .breadcrumb {
  opacity: 1;
  translate: 0;
}
.hero01 .hero01__in.js-load--on .hero01__span span {
  translate: 0;
}

/* --------------------------------------------------------------------------
   パンくず
   -------------------------------------------------------------------------- */
.hero01 .breadcrumb {
  margin-top: 2.5rem;
}
@media screen and (max-width: 1023px) {
  .hero01 .breadcrumb {
    margin-top: 2rem;
  }
}
.breadcrumb .breadcrumb__list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb .breadcrumb__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb .breadcrumb__item:not(:last-child)::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  margin: 0 2rem;
  border-top: 0.1rem solid currentColor;
  border-right: 0.1rem solid currentColor;
  rotate: 45deg;
  opacity: 0.75;
}
@media screen and (max-width: 1023px) {
  .breadcrumb .breadcrumb__item:not(:last-child)::after {
    margin: 0 1rem;
  }
}
.breadcrumb .breadcrumb__link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--f-en);
  font-weight: 500;
  font-size: max(1rem, 10px);
  letter-spacing: 0.08em;
}
.breadcrumb a.breadcrumb__link:hover {
  color: var(--c-brand);
}
.breadcrumb a.breadcrumb__link:hover::after {
  scale: 1;
}
.breadcrumb .breadcrumb__link::after {
  content: "";
  position: absolute;
  bottom: 0.2rem;
  left: 0;
  display: block;
  width: 100%;
  height: 0.1rem;
  background-color: var(--c-brand);
  transform-origin: left center;
  scale: 0 1;
  transition: scale 0.25s ease;
}
@media screen and (max-width: 1023px) {
  .breadcrumb .breadcrumb__link::after {
    content: none;
  }
}
/* 区切りの矢印は ::after の currentColor を使うため、
   link だけでなく item 側にも色を渡す（濃色 hero で矢印が沈むのを防ぐ） */
.hero01--bg .breadcrumb__item,
.hero01--bg .breadcrumb__link {
  color: var(--c-white);
}
.hero01--bg .breadcrumb__link::after {
  background-color: var(--c-white);
}

/* --------------------------------------------------------------------------
   セクション見出し（title02）
   -------------------------------------------------------------------------- */
.title02 .title02__en {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: max(4.4rem, 10px);
  line-height: 1;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 1023px) {
  .title02 .title02__en {
    font-size: max(4rem, 10px);
  }
}
.title02 .title02__ttl {
  margin-top: 1.5rem;
  font-size: max(1.8rem, 10px);
  letter-spacing: 0.05em;
  color: var(--c-brand);
}
@media screen and (max-width: 1023px) {
  .title02 .title02__ttl {
    font-size: max(1.5rem, 10px);
    line-height: 1.8;
  }
}

/* --------------------------------------------------------------------------
   下層共通パーツ
   -------------------------------------------------------------------------- */
.lower-section {
  padding-block: 14rem;
}
@media screen and (max-width: 1023px) {
  .lower-section {
    padding-block: 10rem;
  }
}
.lower-section--light {
  background-color: var(--c-bg-light);
}

/* 本文 */
.txt01 {
  font-family: var(--f-body);
  font-size: max(1.5rem, 10px);
  line-height: 2.2;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 1023px) {
  .txt01 {
    font-size: max(1.4rem, 10px);
    line-height: 2;
  }
}
.txt01 + .txt01 {
  margin-top: 2.5rem;
}

/* 定義表 */
.table01 {
  width: 100%;
  border-top: 0.1rem solid var(--c-line);
}
.table01 th,
.table01 td {
  padding: 2.4rem 1rem;
  font-size: max(1.5rem, 10px);
  line-height: 1.9;
  letter-spacing: 0.05em;
  text-align: left;
  vertical-align: top;
  border-bottom: 0.1rem solid var(--c-line);
}
.table01 th {
  width: 26rem;
  font-weight: 700;
}
@media screen and (max-width: 1023px) {
  .table01,
  .table01 tbody,
  .table01 tr,
  .table01 th,
  .table01 td {
    display: block;
    width: 100%;
  }
  .table01 th {
    padding: 2rem 0 0.6rem;
    border-bottom: none;
    color: var(--c-brand);
    font-size: max(1.3rem, 10px);
  }
  .table01 td {
    padding: 0 0 2rem;
    font-size: max(1.4rem, 10px);
  }
}

/* カード列 */
.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 3rem;
}
@media screen and (max-width: 1023px) {
  .card-list {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}
.card-list__img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background-color: var(--c-bg-light);
}
.card-list__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.8s var(--e-img);
}
.card-list__item:hover .card-list__img img {
  scale: 1.06;
}
.card-list__ttl {
  margin-top: 2rem;
  font-size: max(2rem, 10px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.card-list__txt {
  margin-top: 1rem;
  font-family: var(--f-body);
  font-size: max(1.4rem, 10px);
  line-height: 1.9;
  color: var(--c-text-sub);
}

/* Q&A */
.qa01__item + .qa01__item {
  margin-top: 2rem;
}
.qa01__q {
  position: relative;
  padding: 2rem 5rem 2rem 5.5rem;
  font-size: max(1.6rem, 10px);
  font-weight: 700;
  line-height: 1.7;
  background-color: var(--c-bg-light);
  cursor: pointer;
  transition: color 0.3s ease;
}
.qa01__q:hover {
  color: var(--c-brand);
}
.qa01__q::before {
  content: "Q";
  position: absolute;
  top: 2rem;
  left: 2.4rem;
  font-family: var(--f-en);
  font-weight: 700;
  color: var(--c-brand);
}
.qa01__q::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2.4rem;
  width: 1.2rem;
  height: 0.1rem;
  margin: auto;
  background-color: var(--c-text);
  transition: rotate 0.3s ease;
}
.qa01__item[open] .qa01__q::after {
  rotate: 180deg;
}
.qa01__q > span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2.9rem;
  width: 0.1rem;
  height: 1.2rem;
  margin: auto;
  background-color: var(--c-text);
  transition: scale 0.3s ease;
}
.qa01__item[open] .qa01__q > span::after {
  scale: 0;
}
.qa01__a {
  padding: 2rem 2.4rem 2rem 5.5rem;
  font-family: var(--f-body);
  font-size: max(1.5rem, 10px);
  line-height: 2.1;
}
.qa01__a::before {
  content: "A";
  position: absolute;
  left: 2.4rem;
  font-family: var(--f-en);
  font-weight: 700;
  color: var(--c-text-sub);
}
.qa01__body {
  position: relative;
}

/* 前後ページ送り */
.pager01 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 8rem;
}