/*-------------------------------
---#hero-animation
-------------------------------*/

#hero-animation {
  aspect-ratio: 1440 / 640;
  background-image: url(../image/bg_hero@xl.jpg);
}


/*-------------------------------
---.main
-------------------------------*/

.main {
  margin-bottom: 10.8rem;
}


/*-------------------------------
---.intro
-------------------------------*/

.intro {
  margin-bottom: 3rem;
}

.intro__campaign {
  margin-left: 0;
  margin-right: 0;
}


/*-------------------------------
---.create-home
-------------------------------*/

.create-home__summay {
  grid-template-columns: 288fr 837fr;
  grid-column-gap: min(calc((27 / var(--base-drawing-size)) * 100vw), calc(((27 / var(--base-drawing-size)) * var(--max-drawing-size)) * 1px));
  align-items: center;
}

.create-home__summay-headline {
  padding-bottom: 15%;
}

.create-home__summay-lead .spacer {
  width: 26.3%;
}

.create-home__summay-illust {
  width: 26.3%;
}

.create-home__genre-item {
  grid-column-gap: min(calc((72 / var(--base-drawing-size)) * 100vw), calc(((72 / var(--base-drawing-size)) * var(--max-drawing-size)) * 1px));
}

.create-home__genre-item:nth-child(odd) {
  grid-template-columns: 600fr 480fr;
}

.create-home__genre-item:nth-child(even) {
  grid-template-columns: 480fr 600fr;
}

.create-home__genre-contents {
  grid-row-gap: 2rem;
}

.create-home__genre-header {
  grid-template-columns: 451fr 144fr;
}

.create-home__genre-item:nth-child(even) .create-home__genre-image {
  order: -1;
}


/*-------------------------------
---.company
-------------------------------*/

.company {
  margin-top: 7.2rem;
  margin-bottom: 14.4rem;
}

.company__intro {
  grid-template-columns: 698fr 400fr;
  grid-column-gap: min(calc((54 / var(--base-drawing-size)) * 100vw), calc(((54 / var(--base-drawing-size)) * var(--max-drawing-size)) * 1px));
  align-items: center;
}

.company__contact {
  grid-template-columns: repeat(auto-fit, minmax(18em, max-content));
  grid-column-gap: min(calc((26 / var(--base-drawing-size)) * 100vw), calc(((26 / var(--base-drawing-size)) * var(--max-drawing-size)) * 1px));
  align-items: center;
}

.company__map {
  height: 40rem;
}


/*-------------------------------
---.inquiry
-------------------------------*/

.inquiry {
  margin-bottom: 12.6rem;
}

.inquiry__inner {
  padding: min(calc((36 / var(--base-drawing-size)) * 100vw), calc(((36 / var(--base-drawing-size)) * var(--max-drawing-size)) * 1px));
}

.inquiry__headline {
  margin-bottom: 2.7rem;
}

.inquiry__form {
  grid-row-gap: 2.7rem;
}

.inquiry__inputs {
  border-collapse: collapse;
}

.inquiry__inputs-head,
.inquiry__inputs-input {
  display: table-cell;
  padding: 1.5rem;
}

.inquiry__inputs-head::before {
  border-top-right-radius: 0;
}

tr:not(:first-child) .inquiry__inputs-head::before {
  border-top-left-radius: 0;
  border-top: none;
}

tr:first-child .inquiry__inputs-head::before {
  border-top-left-radius: 1.2rem;
}

tr:last-child .inquiry__inputs-head::before {
  border-bottom-left-radius: 1.2rem;
}

.inquiry__inputs-input::before {
  border-bottom-left-radius: 0;
  border-left: none;
}

tr:not(:last-child) .inquiry__inputs-input::before {
  border-bottom-right-radius: 0;
}

tr:first-child .inquiry__inputs-input::before {
  border-top: 1px solid #969696;
  border-top-right-radius: 1.2rem;
}

tr:last-child .inquiry__inputs-input::before {
  border-bottom-right-radius: 1.2rem;
}

.inquiry__inputs-input input {
  max-width: 30em;
}

.inquiry__inputs-input textarea {
  height: 17em;
}

.inquiry__acceptance {
  margin-top: -1.4rem;
}

.inquiry__privacy-policy-headline {
  margin-bottom: 1.3rem;
}

.inquiry__popup-inner {
  width: 80%;
  border-radius: 1.6rem;
  padding: 3.6rem;
}

.inquiry__popup-close {
  top: 1.5rem;
  right: 1.5rem;
  width: 4.5rem;
  height: 4.5rem;
}

.inquiry__popup-guidance {
  margin-bottom: 3.6rem;
}

.inquiry__popup-item-headline {
  margin-bottom: 1.3rem;
}

.inquiry__popup-item-body > * + * {
  margin-top: 1.3rem;
}

.inquiry__popup-inner-list {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: max-content;
  grid-row-gap: 0.5rem;
}


/*-------------------------------
---.recruitment
-------------------------------*/

.recruitment__banner a {
  right: 1%;
  width: 32%;
  height: 32%;
}