/* ============================================================= *

animation

* ============================================================= */
@keyframes heroTextAnimation {
  0% {
    transform: translateY(2em);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes crossfade {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  45.83% {
    z-index: 9;
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
  }
}

/* ============================================================= *

Index

* ============================================================= */
/* p-index-section
=============================== */
.p-index-section-title {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-weight: 500;
  font-size: clamp(28px, -60.8172px + 7.52688vw, 42px);
  font-family: var(--title-font-family);
  line-height: 1;
  line-height: 1.12;

  margin-block: var(--leading-trim);
}

.p-index-section-title span {
  margin-block: var(--leading-trim);
}

.p-index-section-title::before {
  content: attr(data-en);
  display: inline;
  color: var(--key-color);
  letter-spacing: .3px;
  font-weight: 700;
  font-size: calc(10px + var(--slope-1px) * 2);
  font-family: var(--en-font-family);

  margin-block: var(--leading-trim);
}

/* p-index-hero
=============================== */
.p-index-hero-container {
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--bg-color);
}

.p-index-hero {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr 48.79615%;
  grid-template-areas: "lead slide" "intro intro";
  max-width: var(--_hero-width);
  padding-top: calc(14px + var(--slope-1px) * 19);
  pointer-events: all;
  -moz-column-gap: 2cqi;
       column-gap: 2cqi;

  --_hero-width: 1246px;
  --_padding-inline: 60px;
  padding-inline: var(--_padding-inline);
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .p-index-hero {
    grid-template-columns: 100%;
    grid-template-areas: "lead" "slide" "intro";

    --_padding-inline: var(--inner-padding);
  }
}

.p-index-hero::before {
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100vw;
  height: 100%;
  background: var(--bg-color);

  margin-inline: calc(50% - 50cqi);
}

.p-index-hero__lead {
  position: relative;
  z-index: 1;
  grid-area: lead;
  width: -moz-fit-content;
  width: fit-content;

  place-content: center;
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .p-index-hero__lead {
    width: 100%;
    padding-top: 26.54867%;
    padding-bottom: 20.64897%;
  }
}

.p-index-hero__lead::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 187.78802%;
  height: 187.78802%;
  max-width: 815px;
  max-height: 775px;
  background: url("../img/pref.png");
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .p-index-hero__lead::before {
    width: calc(100% + 15px*2);
    height: 150%;
    aspect-ratio: 356/339;
  }
}

.p-index-hero__slide {
  position: relative;
  z-index: 1;
  visibility: hidden;
  grid-area: slide;
  opacity: 0;
  transition: opacity 1s ease .8s, visibility 1s ease .8s;

  place-content: center;
}

body.is-loaded .p-index-hero__slide {
  visibility: visible;
  opacity: 1;
}

.p-index-hero__pref {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.p-index-hero__introduction {
  position: relative;
  z-index: 1;
  grid-area: intro;
  margin-top: calc(55px + var(--slope-1px) * 75);
}

.p-index-hero__lead {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 13.91234px + .81169vw, 25px);
  font-family: var(--title-font-family);
}

@media screen and (max-width: 767px) {
  .p-index-hero__lead {
    align-items: center;
    gap: calc(20px + var(--slope-1px) * 5);
    text-align: center;
  }
}

.p-index-hero__lead p {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  overflow: hidden;

  margin-block: var(--leading-trim);
}

.p-index-hero__lead p > span {
  display: block;
  font-weight: 400;
  font-size: clamp(32px, -4.52597px + 4.87013vw, 62px);
  line-height: 112%;
  transform: translateY(2em);
  animation: heroTextAnimation 1s forwards ease;
}

@media screen and (max-width: 767px) {
  .p-index-hero__lead p > span {
    font-size: calc(32px + var(--slope-1px) * 30);
  }
}

.p-index-hero__lead p > span._1 {
  animation-delay: 1.06s;
}

.p-index-hero__lead p > span._2 {
  animation-delay: 1.12s;
}

.p-index-hero__lead p > span._3 {
  animation-delay: 1.18s;
}

.p-index-hero__lead p > span._4 {
  animation-delay: 1.24s;
}

.p-index-hero__lead p > span._5 {
  animation-delay: 1.3s;
}

.p-index-hero__lead p > span._6 {
  animation-delay: 1.36s;
}

.p-index-hero__lead p > span._7 {
  animation-delay: 1.42s;
}

.p-index-hero__lead p > span._8 {
  animation-delay: 1.48s;
}

.p-index-hero__lead p > span._9 {
  animation-delay: 1.54s;
}

.p-index-hero__lead p > span._10 {
  animation-delay: 1.6s;
}

.p-index-hero__lead p > span._11 {
  animation-delay: 1.66s;
}

.p-index-hero__lead p > span._12 {
  animation-delay: 1.72s;
}

.p-index-hero__lead p > span._red {
  color: var(--key-color);
  letter-spacing: -6px;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(70px, 31.03896px + 5.19481vw, 102px);
  line-height: 100%;

  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--key-color);
}

.p-index-hero__slide .p-index-hero-slider {
  position: relative;
  overflow: hidden;
  max-width: 608px;
  aspect-ratio: 1;
  border: 2px solid var(--key-color);
  border-radius: 50%;
}

@media screen and (max-width: 767px) {
  .p-index-hero__slide .p-index-hero-slider {
    max-width: 93.53846%;

    margin-inline: auto;
  }
}

.p-index-hero__slide .p-index-hero-slider li {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform-origin: center;
  animation-name: crossfade;
  animation-duration: 24s;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

.p-index-hero__slide .p-index-hero-slider li img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-index-hero__slide .p-index-hero-slider li._01 {
  animation-delay: 0s;
}

.p-index-hero__slide .p-index-hero-slider li._02 {
  animation-delay: 8s;
}

.p-index-hero__slide .p-index-hero-slider li._03 {
  animation-delay: 16s;
}

.p-index-hero__introduction {
  margin-bottom: calc(56px + var(--slope-1px) * 8);
  text-align: center;
  letter-spacing: 0;
  font-weight: 500;
  font-style: normal;
  font-size: calc(20px + var(--slope-1px) * 8);
  font-family: var(--title-font-family);
  line-height: 175%;
}

@media screen and (max-width: 767px) {
  .p-index-hero__introduction {
    text-align: left;
  }
}

@media screen and (max-width: 560px) {
  .p-index-hero__introduction {
    margin-bottom: calc(50px + var(--inner-padding)*2);
  }
}

/* p-index-information
=============================== */
.p-index-information {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(15px + var(--slope-1px) * 5);
  width: 100%;
  max-width: calc(var(--inner-width-px) + var(--outer-padding)*2);
  margin-top: calc(50px + var(--slope-1px) * 30);
  transition: all .5s var(--button-animation);
  transition-property: transform, opacity;

  padding-inline: var(--outer-padding);
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .p-index-information {
    position: relative;
    width: 100%;
  }
}

.p-index-information-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(15px, 8.59766px + .83472vw, 20px);
  box-sizing: border-box;
  width: 100%;
  border-radius: var(--base-border-radius);
  background: var(--white);
  box-shadow: 0 0 20px 3px rgba(51, 51, 51, .1);
  text-decoration: none;
  font-size: calc(16px + var(--slope-1px) * 2);
  transition: opacity .3s var(--button-animation);

  padding-inline: 30px clamp(20px, 7.19533px + 1.66945vw, 30px);
  padding-block: clamp(20px, 7.19533px + 1.66945vw, 30px);
}

.p-index-information-nav::after {
  content: "";
  display: block;
  justify-self: flex-end;
  width: 1.125em;
  height: 1.125em;
  margin-left: auto;
  background: currentColor;

  -webkit-mask-image: var(--icon-arrow);

          mask-image: var(--icon-arrow);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
}

.p-index-information-nav:hover {
  opacity: .6;
}

.p-index-information-nav.is-important {
  color: var(--key-color);
}

.p-index-information-nav__inner {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: clamp(15px, -4.20701px + 2.50417vw, 30px);
  width: 100%;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .p-index-information-nav__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.p-index-information-nav__title {
  flex-grow: 1;
  line-height: 1.4;

  margin-block: var(--leading-trim);
}

.p-index-information-nav__date {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(15px, -4.20701px + 2.50417vw, 30px);
  font-weight: 700;
  font-family: var(--en-font-family);
  line-height: 1.6;

  margin-block: var(--leading-trim);
}

.p-index-information-nav__date::before {
  content: "";
  position: relative;
  display: inline-flex;
  flex-grow: 0;
  flex-shrink: 1;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  background: currentColor;

  -webkit-mask-image: var(--icon-information);

          mask-image: var(--icon-information);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

@media screen and (max-width: 767px) {
  .p-index-information-nav__date::before {
    width: 1.5625em;
    height: 1.5625em;
  }
}

/* p-index-showroom-list
============================== */
.p-index-showroom {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - var(--inner-padding)*2);

  padding-inline: var(--inner-padding);
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .p-index-showroom {
    width: 100%;
  }
}

.p-index-showroom-pref-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  max-width: calc(var(--contents-width-px) - var(--inner-padding));

  margin-inline: auto;
}

@media screen and (max-width: 560px) {
  .p-index-showroom-pref-grid {
    grid-template-columns: 100%;
    max-width: 100%;
  }
}

.p-index-showroom-pref {
  position: relative;
  width: 100%;

  padding-block: 87px 80px;
  margin-inline: auto;
}

.p-index-showroom-pref[data-pref=iwateminami] {
  --pref-bg: url("../img/pref-iwate.png");
}

.p-index-showroom-pref[data-pref=akitakeno] {
  --pref-bg: url("../img/pref-akita.png");
}

@media screen and (max-width: 560px) {
  .p-index-showroom-pref {
    display: flex;
    aspect-ratio: 4 / 3;
    margin-bottom: calc(var(--inner-padding)*2);

    padding-block: 0;
  }
}

.p-index-showroom-pref > * {
  position: relative;
  z-index: 2;
}

.p-index-showroom-pref::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 117.08861%;
  height: -moz-fit-content;
  height: fit-content;
  aspect-ratio: 1;
  border: 2px solid var(--key-color);
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);

  mix-blend-mode: darken;
}

@media screen and (max-width: 560px) {
  .p-index-showroom-pref::before {
    width: 100cqi;
    height: calc(100cqi - var(--inner-padding)*2);
    max-width: 100%;
  }
}

.p-index-showroom-pref::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 117.08861%;
  height: -moz-fit-content;
  height: fit-content;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  background-image: var(--pref-bg);
  background-position: right 30% top 60%;
  background-size: 30% auto;
  background-repeat: no-repeat;
  transform: translateX(-50%) translateY(-50%);
}

@media screen and (max-width: 560px) {
  .p-index-showroom-pref::after {
    width: 100cqi;
    height: calc(100cqi - var(--inner-padding)*2);
    max-width: 100%;
  }
}

.p-index-showroom-pref__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 63.33333%;

  margin-inline: auto;
}

.p-index-showroom-pref__head {
  max-width: 338px;

  margin-inline: auto;
}

.p-index-showroom-pref__body {
  position: relative;
  margin-top: calc(var(--leading-trim) + 38px);
  margin-bottom: calc(var(--leading-trim) + 43px);
}

@media screen and (max-width: 767px) {
  .p-index-showroom-pref__body {
    margin-top: calc(var(--leading-trim) + clamp(5px, -84.27536px + 15.94203vw, 38px));
    margin-bottom: calc(var(--leading-trim) + clamp(15px, -52.63285px + 12.07729vw, 40px));
  }
}

@media screen and (max-width: 560px) {
  .p-index-showroom-pref__body {
    margin-top: calc(var(--leading-trim) + 15px);
    margin-bottom: calc(var(--leading-trim) + 25px);
  }
}

.p-index-showroom-pref__count {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0;
  width: 100%;
}

.p-index-showroom-pref__number {
  color: var(--key-color);
  text-align: center;
  font-weight: 700;
  font-size: clamp(90px, -17.71429px + 14.04358vw, 148px);
  font-family: var(--en-font-family);
  line-height: 160%;

  margin-block: var(--leading-trim);
}

.p-index-showroom-pref__unit {
  color: var(--base-color);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(20px, -6px + 3.38983vw, 34px);
  line-height: 160%;
}

.p-index-showroom-pref__foot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(7px, -7.85714px + 1.93705vw, 15px);
  width: 100%;
  max-width: 315px;

  margin-inline: auto;
}

.p-index-showroom-pref__foot .c-button {
  height: clamp(40px, 12.14286px + 3.63196vw, 55px);

  padding-block: 0;
}

@media screen and (max-width: 560px) {
  .p-index-showroom-pref__foot {
    width: 92.68293%;
  }
}

.p-index-showroom-image {
  width: 100%;
  aspect-ratio: 107/47;
  margin-top: calc(64px + var(--slope-1px) * 48);
}

.p-index-showroom-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 560px) {
  .p-index-showroom-image {
    aspect-ratio: 375 / 230;
  }
}

/* p-index-company
=============================== */
.p-index-company {
  position: relative;
  display: grid;
  grid-template-columns: calc(48px + var(--slope-1px) * 26) auto;
  gap: clamp(26px, -68.75459px + 12.35392vw, 100px);
  width: 100%;
  max-width: calc(var(--contents-width-px) + var(--inner-padding)*2);
  padding-top: calc(64px + var(--slope-1px) * 56);
  padding-bottom: calc(68px + var(--slope-1px) * 52);

  padding-inline: var(--inner-padding);
  margin-inline: auto;
}

.p-index-company::after {
  content: "";
  position: absolute;
  right: 29.94286%;
  bottom: 0;
  z-index: -1;
  display: block;
  width: 98px;
  height: 98px;
  aspect-ratio: 1/1;
  border: 2px solid var(--bg-color);
  border-radius: 50%;
  transform: translateX(50%) translateY(70%);
}

@media screen and (max-width: 767px) {
  .p-index-company::after {
    right: var(--inner-padding);
    bottom: 62.06px;
    width: 105px;
    height: 105px;
    transform: translateX(0%) translateY(100%);
  }
}

.p-index-company__head {
  position: relative;
}

.p-index-company__head .p-index-section-title {
  gap: calc(7px + var(--slope-1px) * 8);
  writing-mode: vertical-rl;
}

.p-index-company__head::before {
  content: "";
  position: absolute;
  top: -13px;
  left: -51.42px;
  z-index: -1;
  display: block;
  width: 65.421px;
  height: 74.797px;
  background: var(--icon-circle);
  background-size: contain;
  background-repeat: no-repeat;

  --icon-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="66" height="75" viewBox="0 0 66 75" fill="none"><circle cx="37" cy="29" r="28" stroke="%23EFEFEF" stroke-width="2"/><circle cx="17.5792" cy="57.7966" r="16" stroke="%23EFEFEF" stroke-width="2"/></svg>');
}

@media screen and (max-width: 767px) {
  .p-index-company__head::before {
    top: 9em;
    left: -25%;
    width: 50.519px;
    height: 60.073px;
  }
}

.p-index-company__head::after {
  content: "";
  position: absolute;
  bottom: 200px;
  left: calc(50% + 4px);
  z-index: -1;
  display: block;
  width: 138px;
  height: 138px;
  aspect-ratio: 1/1;
  border: 2px solid var(--bg-color);
  border-radius: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .p-index-company__head::after {
    right: 0;
    left: auto;
    width: 74px;
    height: 74px;
    border-width: 1.5px;
    transform: unset;
  }
}

.p-index-company__body {
  position: relative;
}

.p-index-company__body::before {
  content: "";
  position: absolute;
  top: -17.07px;
  right: 18.05714%;
  z-index: -1;
  display: block;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  aspect-ratio: 1/1;
  border: 2px solid var(--bg-color);
  border-radius: 50%;
  transform: translateY(-100%);
}

@media screen and (max-width: 767px) {
  .p-index-company__body::before {
    top: -37.65px;
    width: 60px;
    height: 60px;
    border-width: 1.5px;
  }
}

.p-index-company__body::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  display: block;
  width: 119.441px;
  height: 118.133px;
  margin: auto;
  background: var(--icon-circle);
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateX(50%) translateY(-50%);

  --icon-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="121" height="120" viewBox="0 0 121 120" fill="none"><circle cx="77.8606" cy="76.553" r="41.5" stroke="%23EFEFEF" stroke-width="2"/><circle cx="17.9197" cy="17.9197" r="16" stroke="%23EFEFEF" stroke-width="2"/></svg>');
}

@media screen and (max-width: 767px) {
  .p-index-company__body::after {
    right: 15px;
    width: 65.449px;
    height: 64.448px;
    transform: translateX(50%) translateY(-49%);
  }
}

/* p-index-recruit
=============================== */
.p-index-recruit-container {
  background: var(--bg-color);
}

.p-index-recruit {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr auto;
  grid-template-areas: "head foot" "body foot";
  width: 100%;
  max-width: calc(var(--contents-width-px) + var(--inner-padding)*2);
  padding-left: var(--inner-padding);
  -moz-column-gap: calc(var(--leading-trim) + calc(40px + var(--slope-1px) * 20));
       column-gap: calc(var(--leading-trim) + calc(40px + var(--slope-1px) * 20));

  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .p-index-recruit {
    grid-template-rows: auto auto 38cqi;
    grid-template-columns: 100%;
    grid-template-areas: "head" "body" "foot";

    padding-inline: var(--inner-padding);
  }
}

.p-index-recruit__head {
  grid-area: head;
}

.p-index-recruit__body {
  grid-area: body;
}

.p-index-recruit__foot {
  grid-area: foot;
}

.p-index-recruit__head {
  position: relative;
  margin-top: calc(50px + var(--slope-1px) * 50);
  margin-bottom: calc(var(--leading-trim) + calc(40px + var(--slope-1px) * 20));
}

.p-index-recruit__head::before {
  content: "";
  position: absolute;
  bottom: 1.95px;
  left: -112.08px;
  z-index: 0;
  display: block;
  width: 119.441px;
  height: 118.133px;
  background: var(--icon-circle);
  background-size: contain;
  background-repeat: no-repeat;

  --icon-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="121" height="120" viewBox="0 0 121 120" fill="none"><circle cx="77.8605" cy="76.5532" r="41.5" stroke="white" stroke-width="2"/><circle cx="17.9197" cy="17.9199" r="16" stroke="white" stroke-width="2"/></svg>');
}

@media screen and (max-width: 767px) {
  .p-index-recruit__head::before {
    bottom: 21.75px;
    left: -9.37px;
    width: 67.4px;
    height: 66.605px;
  }
}

.p-index-recruit__head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 6.65px;
  z-index: 0;
  display: block;
  width: 97.835px;
  height: 86.247px;
  background: var(--icon-circle);
  background-size: contain;
  background-repeat: no-repeat;

  --icon-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="98" height="87" viewBox="0 0 98 87" fill="none"><circle cx="59.8346" cy="38.1013" r="37" stroke="white" stroke-width="2"/><circle cx="22.284" cy="64.0638" r="21" transform="rotate(0.744643 22.284 64.0638)" stroke="white" stroke-width="2"/></svg>');
}

@media screen and (max-width: 767px) {
  .p-index-recruit__head::after {
    bottom: -4.8px;
    width: 73.163px;
    height: 64.472px;
  }
}

.p-index-recruit__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(25px + var(--slope-1px) * 15);
  padding-bottom: calc(var(--leading-trim) + calc(40px + var(--slope-1px) * 80));
}

.p-index-recruit__body::before {
  content: "";
  position: absolute;
  bottom: -7.24px;
  left: 17.63889%;
  z-index: 0;
  display: block;
  flex-shrink: 0;
  width: 69px;
  height: 69px;
  aspect-ratio: 1/1;
  border: 2px solid var(--white);
  border-radius: 50%;
}

@media screen and (max-width: 767px) {
  .p-index-recruit__body::before {
    content: none;
  }
}

.p-index-recruit__body::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -33px;
  z-index: 0;
  display: block;
  flex-shrink: 0;
  width: 128px;
  height: 128px;
  aspect-ratio: 1/1;
  border: 2px solid var(--white);
  border-radius: 50%;
  transform: translateX(100%);
}

@media screen and (max-width: 767px) {
  .p-index-recruit__body::after {
    right: 34.24px;
    bottom: 27.76px;
    width: 96px;
    height: 96px;
    border-width: 1.5px;
    transform: translateX(100%) translateY(100%);
  }
}

.p-index-recruit__lead {
  font-weight: 500;
  line-height: 160%;

  margin-block: var(--leading-trim);
}

.p-index-recruit__button {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
  gap: calc(15px + var(--slope-1px) * 5);
  max-width: 720px;
}

@media screen and (max-width: 767px) {
  .p-index-recruit__button {
    grid-template-columns: 100%;
  }
  .p-index-recruit__button .c-button {
    inline-size: 100%;
  }
}

.p-index-recruit__foot {
  position: relative;
  width: 330px;
}

@media screen and (max-width: 767px) {
  .p-index-recruit__foot {
    width: calc(100% + var(--inner-padding)*2);
    height: auto;

    margin-inline: calc(-1* var(--inner-padding));
  }
}

.p-index-recruit__foot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: var(--base-color);
  opacity: .3;
}

.p-index-recruit-slider-container {
  position: absolute;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .p-index-recruit-slider-container {
    display: flex;
  }
}

.p-index-recruit-slider {
  display: grid;
  animation: recruitSlideY 30s infinite linear .2s both;
}

@media screen and (max-width: 767px) {
  .p-index-recruit-slider {
    display: flex;
    width: 198cqi;
    animation: recruitSlideX 50s infinite linear .2s both;
  }
}

.p-index-recruit-slider li {
  box-sizing: border-box;
  min-width: 100%;
}

@media screen and (max-width: 767px) {
  .p-index-recruit-slider li {
    min-width: 66cqi;
    min-height: 100%;
    aspect-ratio: 248 / 143;
  }
}

.p-index-recruit-slider li img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@keyframes recruitSlideY {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes recruitSlideX {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* ============================================================= *

Information

* ============================================================= */
.p-information-contents .blog__body strong {
  font-weight: bold;
}

.p-information-contents .blog__body em {
  font-style: italic;
}

/* ============================================================= *

Terms of use

* ============================================================= */
/* block
=============================== */
.p-terms-block {
  display: flex;
  flex-direction: column;
  margin-bottom: calc(40px + var(--slope-1px) * 25);
}

/* text
=============================== */
.p-terms-text {
  margin-block: var(--leading-trim);
}

/* plugin
=============================== */
.p-terms-plugin {
  align-items: center;
  align-self: stretch;
  gap: 24px;
  margin-top: calc(var(--leading-trim) + 3rem);
  padding: calc(20px + var(--slope-1px) * 10);
  border: 1px solid var(--light-gray);
  border-radius: 10px;
}

.p-terms-plugin__link {
  display: flex;
  align-items: center;
  justify-items: flex-start;
  text-decoration: none;
  transition: all .3s ease-out;
}

.p-terms-plugin__link:hover {
  opacity: .7;
}

@media screen and (max-width: 560px) {
  .p-terms-plugin__link {
    flex-direction: column;
  }
}

.p-terms-plugin__logo {
  margin: 0 3rem 0 0;
}

@media screen and (max-width: 560px) {
  .p-terms-plugin__logo {
    margin: 0 0 1em 0;
  }
}

.p-terms-contact {
  display: block;
}

.p-terms-contact__list > li {
  padding-left: 1em;
}

.p-terms-contact__list > li:before {
  content: "\30fb";
  display: inline-block;
  margin-left: -1em;
  text-align: center;

  inline-size: 1em;
}

/* ssl
=============================== */
.p-terms-ssl {
  margin-top: calc(var(--leading-trim) + 3rem);
  padding: calc(20px + var(--slope-1px) * 10);
  border: 1px solid var(--light-gray);
  border-radius: 10px;
}

.p-terms-ssl__item > p {
  padding-left: 1em;
}

.p-terms-ssl__item > p:before {
  content: "\30fb";
  display: inline-block;
  margin-left: -1em;
  text-align: center;

  inline-size: 1em;
}

.p-terms-ssl__item > ul {
  padding-left: 1em;
}

.p-terms-ssl__item > ul > li a {
  position: relative;
  display: inline-block;
  padding-left: 1em;
}

.p-terms-ssl__item > ul > li a:before {
  content: "-";
  position: absolute;
  top: 0;
  left: 0;
}

.p-terms-ssl__notes {
  margin-top: calc(var(--leading-trim) + 3rem);
}

/* ============================================================= *

Privacy Policy

* ============================================================= */
/* lead
=============================== */
.p-privacy-lead {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: var(--contents-width-px);
  margin-bottom: calc(40px + var(--slope-1px) * 25);
  padding: calc(20px + var(--slope-1px) * 10);
  border: 1px solid var(--light-gray);
  border-radius: 10px;
  font-weight: 400;

  margin-inline: auto;
}

/* main
=============================== */
.p-privacy-main {
  counter-reset: privacy-main;
  display: flex;
  flex-direction: column;
  gap: calc(40px + var(--slope-1px) * 25);
  word-break: break-all;

  container-type: inline-size;
}

.p-privacy-main__item {
  counter-increment: privacy-main;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: var(--main-left-padding);

  --main-left-padding: 1.5em;
}

.p-privacy-main__title {
  font-weight: 500;

  margin-block: var(---leading-trim);
}

.p-privacy-main__title::before {
  content: counter(privacy-main) ".";
  position: absolute;
  top: 0;
  left: 0;
}

/* sub
=============================== */
.p-privacy-sub {
  counter-reset: privacy-sub;
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--leading-trim) + 3rem);
  margin-bottom: var(---leading-trim);
  margin-left: calc(-1 * var(--main-left-padding));
}

.p-privacy-sub a {
  display: inline;
}

.p-privacy-sub__item {
  counter-increment: privacy-sub;
  position: relative;
  margin-left: var(--sub-left-padding);

  --sub-left-padding: var(--main-left-padding);
}

.p-privacy-sub__item:not(:last-child):has(.p-privacy-detail) {
  margin-bottom: calc(var(--leading-trim) + 3rem);
}

.p-privacy-sub__item:first-child:last-child {
  margin-left: 0;
}

.p-privacy-sub__item:first-child:last-child:before {
  content: none;
}

.p-privacy-sub__item:before {
  content: counter(privacy-sub, lower-roman) ".";
  position: absolute;
  top: 0;
  left: calc( -1 * var(--sub-left-padding));
  width: var(--sub-left-padding);
  text-align: center;
}

.p-privacy-url {
  display: block;
}

/* detail
=============================== */
.p-privacy-detail {
  margin-top: calc(var(--leading-trim) + 2.4rem);
}

.p-privacy-detail > p:first-child {
  margin-top: var(--leading-trim);
}

.p-privacy-detail > p:last-child {
  margin-bottom: var(--leading-trim);
}

.p-privacy-detail._frame {
  width: 100%;
  margin-top: 2.4rem;
  padding: calc(20px + var(--slope-1px) * 10);
  border: 1px solid var(--light-gray);
  border-radius: 1rem;
}

.p-privacy-detail._frame .p-privacy-detail__body {
  line-height: 1.75;
}

.p-privacy-detail__head {
  margin-bottom: .5em;
}

.p-privacy-detail__body {
  margin-bottom: .5em;
}

.p-privacy-detail__list {
  margin-block: var(--leading-trim);
}

.p-privacy-detail__list > li {
  padding-left: 1em;
}

.p-privacy-detail__list > li:before {
  content: "\30fb";
  display: inline-block;
  margin-left: -1em;
  text-align: center;

  inline-size: 1em;
}

/* sign
=============================== */
.p-privacy-sign {
  margin-top: calc(50px + var(--slope-1px) * 25);
  text-align: right;
}

/* banner
=============================== */
.p-privacy-banner {
  display: flex;
  justify-content: center;
  margin-top: calc(40px + var(--slope-1px) * 25);
}

.p-privacy-banner a {
  transition: all .3s ease-out;
}

.p-privacy-banner a:hover {
  opacity: .7;
}