@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700&family=Noto+Sans+JP:wght@100;700&display=swap');

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * COMMON..............共通パーツ
 * HEADER..............ヘッダーパーツ
 * FOOTER..............フッターパーツ
 * MAIN................メインコンテンツ
 * PROGRESS_BAR........プログレスバー
 * SECTION.............セクション
 */





/*------------------------------------*\
  $COMMON
\*------------------------------------*/
:root {
  --gothic: "Noto Sans JP", sans-serif;
  --accent: #da9639;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: auto !important;
}

.overlay {
  display: none;
}
.overlay.is-active {
  position: fixed;
  inset: 0;
  display: block;
  background-color: rgb(0 0 0 / 0.2);
}

.hide {
  display: none !important;
}

/*------------------------------------*\
  $HEADER
\*------------------------------------*/
.header {
  padding: var(--px6) var(--px8) var(--px7);
  border-image-source: linear-gradient(#464b52, #464b52);
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw;
  color: white;
}

.header__logo {
  height: var(--px18);
}
.header__logo > img {
  height: 100%;
}

.header__row {
  display: flex;
  align-items: center;
  column-gap: var(--px6);
}
.header__row + .header__row {
  margin-top: var(--px6);
}

.header__txt {
  font-size: var(--font11);
  line-height: 1;
  white-space: nowrap;
}

.header__txt__large {
  font-size: var(--font13);
}
.header__txt__blue {
  color: #92d5db;
}
.header__txt__pink {
  color: #e69091;
}



/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
.footer {
  padding-top: var(--px10);
  padding-inline: var(--px10);
  padding-bottom: var(--px7);
  border-image-source: linear-gradient(#000000, #000000);
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw;
  color: white;
  font-size: var(--font10);
  text-align: center;
}

.footer__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1.5em;
  line-height: 1.5;
}

.footer__nav__link {
  text-decoration: underline;
}

.footer__copyright {
  margin-top: 0.8em;
  line-height: 1;
}

.footer__dialog {
  position: fixed;
  inset: 0;
  width: clamp(325px, 100vw * (325 / 375), 443.733px);
  height: fit-content;
  margin: auto;
  text-align: left;
  animation-name: dialogOpen;
  animation-duration: 1s;
  animation-delay: 0.3s;
  animation-timing-function: var(--easeOutQuart);
  animation-fill-mode: both;
}
.footer__dialog::backdrop {
  background-color: rgb(0 0 0 / 0.5);
}

.footer__dialog__container {
  width: 100%;
  height: clamp(425px, 100vw * (425 / 375), 580.267px);
  padding-top: var(--px26);
  padding-inline: var(--px22);
  padding-bottom: var(--px40);
  border-radius: var(--px10);
  background-color: #ffffff;
  color: #333333;
}

.footer__dialog__wrap {
  height: 100%;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.footer__dialog__wrap::-webkit-scrollbar {
  display: none;
}

.footer__dialog__title {
  display: flex;
  align-items: center;
  column-gap: var(--px18);
  width: fit-content;
  margin-inline: auto;
  font-size: var(--font24);
  line-height: 1.25;
}

.footer__dialog__title::before {
  content: "";
  aspect-ratio: 1 / 1;
  display: block;
  width: var(--px22);
  background-color: #94d5db;
}

.footer__dialog__text {
  margin-top: var(--px18);
  font-size: var(--font12);
  font-weight: 400;
  line-height: calc(44.8 / 24);
}


.footer__dialog__btn {
  aspect-ratio: 270 / 45;
  display: block;
  width: clamp(270px, 100vw * (270 / 375), 368.64px);
  margin-top: var(--px16);
  margin-inline: auto;
  border-radius: var(--px5);
  background-color: #c2bec2;
  color: #ffffff;
  font-size: var(--font18);
  line-height: 2.5;
  text-align: center;
}



/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
.main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

.main__footer {
  white-space: nowrap;
}

.main__footer__top {
  padding-inline: var(--px10);
  border-image-source: linear-gradient(#fdfff2, #fdfff2);
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw;
  color: #007187;
  font-size: var(--font12);
  line-height: 2.5;
  text-align: right;
}

.main__footer__bottom {
  padding-inline: var(--px10);
  border-image-source: linear-gradient(#f5f5f5, #f5f5f5);
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw;
  color: #6b6b6b;
  font-size: var(--font10);
  line-height: 2.9;
  text-align: center;
}


/* コンテンツヘッダー */
.fv {
  position: relative;
  /* aspect-ratio: 750 / 360; */
  height: clamp(180px, 100vw * (180 / 375), 245.76px);
  padding-top: var(--px17);
  background-image: url(../../../../images/fv-v2.webp);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  color: #525252;
  font-family: var(--gothic);
  overflow: hidden;
}

.fv__label {
  padding-inline: var(--px22);
  color: var(--accent);
  font-size: var(--font32);
  line-height: 1;
}
.fv__label > span {
  font-size: var(--font48);
}

.fv__txt {
  width: 100%;
  padding-inline: var(--px22);
  margin-top: var(--px4);
  font-size: var(--font20);
  line-height: 1.6;
}

.fv__number {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: var(--px7) var(--px22);
  background-color: white;
  font-size: var(--font14);
  line-height: 1.5;
  text-align: center;
}
.fv__number > strong {
  color: var(--accent);
}


/* 背景求人 */
.background {
  padding: var(--px13) var(--px17) var(--px11);
  background-color: #fff1dd;
}

.breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: var(--px25);
}

.breadcrumb__item {
  position: relative;
  color: #525252;
  font-family: var(--gothic);
  font-size: var(--font10);
  font-weight: 100;
  line-height: 2;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "＞";
  position: absolute;
  top: 0;
  left: calc(var(--px17) * -1);
}
.breadcrumb__item > a {
  background-image: linear-gradient(#0088fb, #0088fb);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  color: #0088fb;
}

.work {
  margin-top: var(--px8);
}

.work__item {
  padding: var(--px16) var(--px16) var(--px12);
  border: var(--px1) solid #ccc;
  background-color: white;
}
.work__item + .work__item {
  margin-top: var(--px8);
}

.work__title {
  color: #a1a1a1;
  font-size: var(--font14);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.work__content {
  display: grid;
  grid-template-columns: calc(320 / 592 * 100%) 1fr;
  grid-column-gap: var(--px16);
  padding-right: var(--px12);
  margin-top: var(--px13);
}

.work__img {
  display: block;
}
.work__img > img {
  width: 100%;
}

.work__feature {
  padding-top: var(--px4);
}

.work__feature__item {
  display: grid;
  grid-template-columns: var(--px14) 1fr;
  grid-column-gap: var(--px4);
  align-items: center;
  padding: var(--px4) var(--px8);
  background-color: #fff1dd;
  color: var(--accent);
  font-size: var(--font12);
  font-weight: 500;
  line-height: calc(17 / 12);
}
.work__feature__item + .work__feature__item {
  margin-top: var(--px6);
}

.work__feature__item > i {
  display: block;
  width: 100%;
  height: var(--px14);
  background-repeat: no-repeat;
  background-size: contain;
}
.work__feature__item > i.icon-good {
  background-image: url(../../../../images/icon-good.webp);
}
.work__feature__item > i.icon-money {
  background-image: url(../../../../images/icon-money.webp);
}
.work__feature__item > i.icon-holiday {
  background-image: url(../../../../images/icon-holiday.webp);
}
.work__feature__item > i.icon-car {
  background-image: url(../../../../images/icon-car.webp);
}
.work__feature__item > i.icon-train {
  background-image: url(../../../../images/icon-train.webp);
}


.contents {
  position: absolute;
  inset: 0;
  z-index: 9999;
}

/* Dialog */
.start {
  position: absolute;
  inset: 0;
  width: clamp(325px, 100vw * (325 / 375), 443.733px);
  height: max-content;
  padding-top: var(--px27);
  padding-inline: var(--px22);
  padding-bottom: var(--px30);
  margin: clamp(232px, 100vw * (232 / 375), 316.757px) auto auto;
  border-radius: var(--px5);
  background-color: #ffffff;
  pointer-events: visible;
  animation-name: dialogOpen;
  animation-duration: 1s;
  animation-delay: 0.3s;
  animation-timing-function: var(--easeOutQuart);
  animation-fill-mode: both;
}
@keyframes dialogOpen {
  from {
      transform: translateY(10vh);
      transform: translateY(10dvh);
      opacity: 0;
  }
  to {
      transform: none;
      opacity: 1;
  }
}

.start::backdrop {
  background-color: black;
  animation-name: dialogBackdrop;
  animation-duration: 0.3s;
  animation-timing-function: var(--easeOutQuart);
  animation-fill-mode: both;
}
@keyframes dialogBackdrop {
  from {
    background-color: transparent;
  }
  to {
    background-color: rgb(0 0 0 / 0.5);
  }
}

.start__catchphrase {
  width: fit-content;
  padding-inline: var(--px13);
  margin-inline: auto;
  border-radius: 99px;
  background-color: #ffeecd;
  color: #da9639;
  font-size: var(--font12);
  line-height: calc(55 / 24);
}

.start__txt {
  margin-top: 0.5em;
  color: #666666;
  font-size: var(--px18);
  line-height: 1.5;
  text-align: center;
}

.start__content {
  position: relative;
  margin-top: var(--px15);
  filter: drop-shadow(0 var(--px2) clamp(3.5px, 100vw * (3.5 / 375), 4.779px) rgb(0 0 0 / 0.2)) drop-shadow(0 clamp(3.5px, 100vw * (3.5 / 375), 4.779px) clamp(3.5px, 100vw * (3.5 / 375), 4.779px) rgb(0 0 0 / 0.2));
}
.start__content::before {
  content: "";
  aspect-ratio: 106 / 127;
  position: absolute;
  top: clamp(-5.461px, -100vw * (4 / 375), -4px);
  right: clamp(-23.893, -100vw * (17.5 / 375), -17.5px);
  display: block;
  width: var(--px45);
  background-image: url(../../../../images/icon-dog.webp);
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.start__btn {
  aspect-ratio: 560 / 220;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--px5);
  background-color: var(--startBtnColor, #666666);
  color: white;
  font-size: var(--font18);
  box-shadow: 0 var(--px3) 0 var(--startBtnEdgeColor, #333333);
}
.start__btn + .start__btn {
  margin-top: var(--px16);
}
.start__btn--orange {
  --startBtnColor: #da9639;
  --startBtnEdgeColor: #b06022;
}
.start__btn--blue {
  --startBtnColor: #65b6be;
  --startBtnEdgeColor: #367f88;
}


.window {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  width: 100%;
  padding: var(--px74) calc(25 / 375 * 100%);
  background-color: rgb(0 0 0 / .5);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity .3s .3s var(--easeOutQuart);
}
.header.is-active ~ .main .window {
  opacity: 1;
  pointer-events: visible;
}



/*------------------------------------*\
    $PROGRESS_BAR
\*------------------------------------*/
.progress {
  --progressPrimary: #d2d2d2;
  --progressAccent : #ffaa8f;
  position: relative;
  z-index: 0;
  margin-top: var(--px30);
  margin-inline: var(--px11);
  margin-bottom: var(--px26);
}

.progress__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress__item {
  position: relative;
  z-index: 10;
  width: var(--px12);
  height: var(--px12);
  border-radius: 100%;
  background-color: var(--progressPrimary);
}
.progress__item.is-active {
  background-color: var(--progressAccent);
  transition: background-color 0s .15s var(--linear);
}

.progress__item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateY(-50%);
  z-index: -1;
  width: var(--px52);
  height: var(--px3);
  background-image: linear-gradient(90deg, var(--progressAccent) 50%, var(--progressPrimary) 50%);
  background-repeat: no-repeat;
  background-position: 100% 0%;
  background-size: 200%;
  transition: background-position .15s var(--linear);
}
.progress__item.is-active:not(:first-child)::before {
  background-position: 0% 0%;
}

.progress__num {
  position: absolute;
  top: clamp(-40.96px, -100vw * (30 / 375), -30px);
  left: 50%;
  transform: translateX(-50%);
  display: block;
  color: var(--progressPrimary);
  font-size: var(--font10);
  line-height: 1;
}
.progress__item.is-active .progress__num {
  color: var(--progressAccent);
}

.progress__num strong {
  font-size: var(--font14);
}

.progress__icon {
  position: absolute;
  top: 50%;
  left: var(--px6);
  transform: translate(-50%, -50%);
  z-index: 11;
  display: block;
  width: var(--px24);
  height: clamp(29.5px, 100vw * (29.5 / 375), 40.277px);
  background-image: url(../../../../images/icon-dog.webp);
  background-repeat: no-repeat;
  background-size: contain;
  transition: .15s var(--linear);
}
.progress__list:has(> .progress__item.is-active + .progress__item.is-active) + .progress__icon {
  left: calc(20% + var(--px6));
  left: clamp(54.2px, 100vw * (54.2 / 375), 74.001px);
}
.progress__list:has(> .progress__item.is-active + .progress__item.is-active + .progress__item.is-active) + .progress__icon {
  left: calc(40% + var(--px6));
  left: clamp(108.4px, 100vw * (108.4 / 375), 148.002px);
}
.progress__list:has(> .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active) + .progress__icon {
  left: calc(60% + var(--px6));
  left: clamp(162.6px, 100vw * (162.6 / 375), 222.003px);
}
.progress__list:has(> .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active) + .progress__icon {
  left: calc(80% + var(--px6));
  left: clamp(216.8px, 100vw * (216.8 / 375), 296.004px);
}
.progress__list:has(> .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active + .progress__item.is-active) + .progress__icon {
  left: calc(100% + var(--px6));
  left: clamp(266px, 100vw * (266 / 375), 363.179px);
}



/*------------------------------------*\
  $SECTION
\*------------------------------------*/
.section {
  grid-area: 1 / -1;
  position: relative;
  display: none;
  height: max-content;
  padding: var(--px20) var(--px16) var(--px24);
  border-radius: var(--px2);
  background-color: white;
  overflow: hidden;
  pointer-events: none;
  animation-duration: .3s;
  animation-timing-function: var(--easeOutQuart);
  animation-fill-mode: both;
}
.section.is-active {
  display: block;
  pointer-events: visible;
}
.header.is-active ~ .main .section.is-active:first-child {
  animation-name: slideInUP;
  animation-duration: 1s;
  animation-delay: .6s;
}
.section + .section.is-active {
  animation-name: slideIn;
  animation-delay: .6s;
}
.section:has( + .section.is-active) {
  display: block;
  animation-name: slideInOut;
}
@keyframes slideInUP {
  from {
    transform: translateY(10vh);
    transform: translateY(10dvh);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes slideInOut {
  from {
    transform: none;
    opacity: 1;
  }
  to {
    transform: translateX(-20%);
    opacity: 0;
  }
}
@keyframes slideIn {
  from {
    transform: translateX(20%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.section__title {
  position: relative;
  padding-inline: 1.333em;
  color: #666666;
  font-size: var(--px18);
  line-height: 1.25;
}
.section__title::before {
  content: "";
  aspect-ratio: 1 / 1;
  position: absolute;
  top: 0.125em;
  left: 0;
  width: 1em;
  background-color: #94d5db;
}

.section__txt {
  padding-left: 2em;
  margin-top: var(--px2);
  color: #666666;
  font-size: var(--font12);
  line-height: 1.5;
}

.section__grid {
  position: relative;
  margin-top: var(--px14);
  filter: drop-shadow(clamp(1.5px, 100vw * (1.5 / 375), 2.048px) clamp(1.5px, 100vw * (1.5 / 375), 2.048px) clamp(3.5px, 100vw * (3.5 / 375), 4.779px) rgb(0 0 0 / 0.2)) drop-shadow(clamp(2.5px, 100vw * (2.5 / 375), 3.413px) clamp(2.5px, 100vw * (2.5 / 375), 3.413px) clamp(3.5px, 100vw * (3.5 / 375), 4.779px) rgb(0 0 0 / 0.2));
}

.section__grid__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--px12) var(--px11);
  overflow: hidden;
  transition: height .3s var(--easeOutQuart);
}
.section__grid:has(~ .toggle-btn) .section__grid__wrap {
  height: clamp(234px, 100vw * (234 / 375), 319.488px);
}
.section__grid:has(~ .toggle-btn).is-active .section__grid__wrap {
  height: clamp(433px, 100vw * (433 / 375), 591.189px);
}

.section__grid__column--wide,
.section__grid__column--error {
  grid-column: 2 span;
}
.section__grid__column--error {
  grid-column: 2 span;
}

:is(
  .section__grid__column,
  .section__grid__column--wide,
  .section__grid__column--error
) input {
  display: none;
}

.section__grid__frame {
  display: block;
  width: 100%;
  height: clamp(110px, 100vw * (110 / 375), 150.187px);
  border: var(--px1) solid #333333;
  border-radius: var(--px5);
  background-color: white;
  color: #666666;
  transition: .3s var(--easeOutQuart);
  overflow: hidden;
  transition-property: border-color, background-color, color;
}
.section__grid__column--wide .section__grid__frame {
  height: clamp(67px, 100vw * (67 / 375), 91.477px);
}
.section__grid.is-checked .section__grid__frame {
  border-color: transparent;
  background-color: #ebebeb;
}
:is(input[type=checkbox], input[type=radio]):checked + .section__grid__frame {
  border-color: #ff328d;
  background-color: #ff328d;
  color: #ffffff;
}

.section__grid__img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--px1);
  height: 100%;
  font-size: var(--font14);
  line-height: 1.2;
  text-align: center;
}
.section__grid__column--wide .section__grid__img {
  flex-direction: row;
  column-gap: var(--px6);
}

.section__grid__img img {
  aspect-ratio: 158 / 117;
  width: clamp(79px, 100vw * (79 / 375), 107.861px);
  margin-inline: auto;
}
.section__grid__column--wide .section__grid__img img {
  aspect-ratio: 86 / 86;
  width: var(--px43);
  margin-inline: 0;
}
.section__grid.is-checked :is(input[type=checkbox], input[type=radio]):not(:checked) + .section__grid__frame .section__grid__img img {
  filter: saturate(0%) brightness(131%);
}

.section__grid__img figcaption {
  display: flex;
  align-items: flex-end;
  min-height: var(--px25);
  line-height: 1;
}
.section__grid__img figcaption > strong {
  display: block;
  font-size: var(--px24);
}
.section__grid__img figcaption > span {
  display: block;
  padding-bottom: var(--px2);
}


.section__caution {
  position: relative;
  display: none;
  width: 100%;
  margin-top: var(--px15);
  border-radius: var(--px5);
  background-color: #fcecec;
  color: #ff0100;
  font-size: var(--font14);
  line-height: calc(59 / 28);
  text-align: center;
}
.section__caution.is-active {
  display: block;
}

.section__caution::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: clamp(8.5px, 100vw * (8.5 / 375), 11.605px);
  border-inline: clamp(5.5px, 100vw * (5.5 / 375), 7.509px) solid transparent;
  border-bottom: clamp(8.5px, 100vw * (8.5 / 375), 11.605px) solid #fcecec;
}


.section__controls {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--px28);
}

.section__controls__cover {
  position: fixed;
  inset: 0;
  z-index: 10;
  background-color: rgb(0 0 0 / 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--easeOutQuart);
}
.section__controls.is-active .section__controls__cover {
  opacity: 1;
  pointer-events: visible;
}

.section__controls__btn {
  position: relative;
  z-index: 11;
  width: clamp(270px, 100vw * (270 / 375), 368.64px);
  margin-inline: auto;
  border: var(--px1) solid #d3d3d3;
  border-radius: var(--px5);
  background-color: #e4e3e4;
  color: #ffffff;
  font-size: var(--font18);
  line-height: calc(44 / 18);
  text-align: center;
  overflow: hidden;
}
.section__controls__btn.is-active {
  border-color: transparent;
  background-image: linear-gradient(#0e9eb4, #0c8193);
  filter: drop-shadow(clamp(1.5px, 100vw * (1.5 / 375), 2.048px) clamp(1.5px, 100vw * (1.5 / 375), 2.048px) clamp(3.5px, 100vw * (3.5 / 375), 4.779px) rgb(0 0 0 / 0.2)) drop-shadow(clamp(2.5px, 100vw * (2.5 / 375), 3.413px) clamp(2.5px, 100vw * (2.5 / 375), 3.413px) clamp(3.5px, 100vw * (3.5 / 375), 4.779px) rgb(0 0 0 / 0.2));
}

.section__controls__btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--px17);
  transform: translateY(-50%);
  border-block: var(--px7) solid transparent;
  border-left: var(--px14) solid #ffffff;
}

.section__controls__btn.is-active::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -30%;
  top: -50%;
  display: block;
  width: clamp(50px, 100vw * (50 / 375), 68.267px);
  height: clamp(100px, 100vw * (100 / 375), 136.533px);
  transform: rotate(30deg);
  background-image: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 1) 50%, rgb(255 255 255 / 0) 100%);
  animation: shiny 3s infinite var(--linear);
}
@keyframes shiny {
  0% {
    left: -30%;
  }
  20% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}


.section__controls__mini-btn {
  color: #666666;
  font-size: var(--font12);
  line-height: 1.5;
  text-decoration: underline;
}

.section__controls__submit {
  position: relative;
  z-index: 11;
  width: clamp(237.5px, 100vw * (237.5 / 375), 324.267px);
  opacity: 0.5;
  pointer-events: none;
  overflow: hidden;
}
.section__controls__submit.is-active {
  opacity: 1;
  pointer-events: visible;
}

.section__controls__submit.is-active::after {
  content: "";
  position: absolute;
  left: -30%;
  top: -50%;
  display: block;
  width: clamp(50px, 100vw * (50 / 375), 68.267px);
  height: clamp(150px, 100vw * (100 / 375), 204.8px);
  transform: rotate(30deg);
  background-image: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 1) 50%, rgb(255 255 255 / 0) 100%);
  animation: shiny 3s infinite var(--linear);
}

.section__controls__submit-arrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--px20);
  height: var(--px25);
  background-color: #92cbec;
}
.section__controls__submit-arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-inline: clamp(20.75, 100vw * (20.75 / 375), 28.331) solid transparent;
  border-top: var(--px20) solid #92cbec;
}


.section__content {
  margin-top: var(--px20);
}

.section__block + .section__block {
  margin-top: var(--px26);
}

.section__label {
  display: flex;
  align-items: center;
  column-gap: var(--px8);
  margin-bottom: var(--px9);
}

.section__label__icon {
  aspect-ratio: 30 / 44;
  display: block;
  width: var(--px15);
  height: var(--px22);
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: contain;
}
.section__label__icon.icon-human {
  background-image: url(../../../../images/icon-human.webp);
}
.section__label__icon.icon-box {
  background-image: url(../../../../images/icon-box.webp);
}
.section__label__icon.icon-phone {
  background-image: url(../../../../images/icon-phone.webp);
}


.section__input {
  aspect-ratio: 582 / 122;
  position: relative;
  display: flex;
  align-items: center;
  column-gap: var(--px10);
  padding-right: var(--px24);
  padding-left: var(--px17);
  border: var(--px1) solid #ff509d;
  border-radius: var(--px5);
  background-color: #feffc7;
  white-space: nowrap;
}
.section__input.is-true {
  background-color: #ffffff;
}

.section__input > strong {
  margin-left: clamp(-8.192px, -100vw * (6 / 375), -6rem);
  color: #94d5db;
  font-size: var(--font24);
}
.section__input > span {
  color: #666666;
  font-size: var(--font18);
}

.section__input > input {
  flex-grow: 1;
  width: 1px;
  color: #000000;
  font-size: var(--font18);
}
.section__input > span + input {
  padding-left: var(--px30);
}
.section__input > input::placeholder {
  color: #999999;
  font-size: var(--font14);
}
.section__input.is-true > input {
  background-color: #ffffff;
}
.section__input.is-true > :is(
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active
) {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: inherit !important;
}


.section__input__placeholder {
  position: absolute;
  top: 50%;
  left: var(--px24);
  transform: translateY(-50%);
  color: #999999;
  font-size: var(--font14);
  line-height: 2;
  white-space: nowrap;
  transition: .3s var(--easeOutQuart);
  transition-property: top, left, transform, color, font-size;
  pointer-events: none;
}
.section__input > strong ~ .section__input__placeholder {
  left: var(--px45);
}
.section__input > span ~ .section__input__placeholder {
  left: clamp(93px, 100vw * (93 / 375), 126.976px);
}
:is(
  input:focus,
  input:not(:placeholder-shown)
) ~ .section__input__placeholder {
  top: var(--px2);
  left: var(--px12);
  transform: none;
  color: #ff328d;
  font-size: var(--font10);
}

.section__input__counter {
  position: absolute;
  top: clamp(-15.019px, -100vw * (11 / 375), -11rem);
  right: var(--px8);
  padding-inline: 1em;
  border-radius: 99px;
  background-color: #f2f2f2;
  color: #666666;
  font-size: var(--font10);
  line-height: 2;
  white-space: nowrap;
}

.section__input__counter__hide {
  display: none;
}
.section__input__counter__hide.is-active {
  display: inline;
  color: #ff0100;
}


.section__input--mini {
  display: none;
}
.section__input--mini.is-active {
  display: block;
  margin-top: var(--px12);
}

.section__input--mini > input {
  display: block;
  width: 100%;
  padding-inline: var(--px16);
  border-bottom: var(--px1) solid #cccccc;
  color: #333333;
  font-size: var(--font15);
  line-height: calc(38 / 15);
}
.section__input--mini > input:placeholder-shown {
  padding-inline: 0;
}
.section__input--mini > input::placeholder {
  color: #999999;
}
.section__input--mini > :is(
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active
) {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: inherit !important;
}


.section__input--small {
  display: block;
  margin-top: var(--px15);
}

.section__input--small > input {
  display: block;
  width: 100%;
  padding-inline: var(--px16);
  color: #333333;
  font-size: var(--font15);
  line-height: calc(23 / 15);
}
.section__input--small > input::placeholder {
  color: #cccccc;
}
.section__input--small > :is(
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active
) {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: inherit !important;
}


.toggle-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: var(--px1);
  width: fit-content;
  min-width: clamp(180px, 100vw * (180 / 375), 245.76px);
  height: var(--px30);
  padding-right: clamp(14.5px, 100vw * (14.5 / 375), 19.797px);
  padding-left: var(--px20);
  margin-top: var(--px15);
  margin-inline: auto;
  border-radius: 99px;
  background-color: #f2f2f2;
  color: #555555;
  font-size: var(--font12);
}

.toggle-btn::after {
  content: "";
  aspect-ratio: 1 / 1;
  transform: rotate(180deg);
  display: block;
  width: var(--px15);
  background-image: url(../../../../images/icon-toggle.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.toggle-btn.is-active::after {
  transform: none;
}



.bubble {
  display: grid;
  grid-template-columns: clamp(73px, 100vw * (73 / 375), 99.669px) 1fr;
  grid-column-gap: var(--px18);
  align-items: end;
  margin-inline: clamp(-12.288px, 100vw * (9 / 375), -9px);
  margin-bottom: var(--px28);
}

.bubble__image {
  padding-bottom: clamp(1.5px, 100vw * (1.5 / 375), 2.048px);
}

.bubble__txt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(88px, 100vw * (88 / 375), 120.149px);
  padding: var(--px18);
  border-radius: var(--px4);
  background-color: #eaf7f8;
  color: #555555;
  font-size: var(--font11);
  line-height: 1.6;
}

.bubble__txt::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border-block: clamp(5.5px, 100vw * (5.5 / 375), 7.509px) solid transparent;
  border-right: var(--px8) solid #eaf7f8;
}


.lock-text {
  width: fit-content;
  padding-left: 1.5em;
  margin-inline: auto;
  margin-bottom: clamp(12.5px, 100vw * (12.5 / 375), 17.067px);
  background-image: url(../../../../images/icon-key.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 1.05em;
  color: #666666;
  font-size: var(--font10);
  line-height: 1.5;
}


.address {
  position: relative;
  overflow: hidden;
}

.address__wrap {
  height: 0;
  transition: height .3s var(--easeOutQuart);
}

.address__block {
  margin-top: var(--px8);
}

.address__block select {
  display: block;                
  width: 100%;
  padding-right: var(--px32);
  padding-left: var(--px15);
  border-bottom: var(--px1) solid #cccccc;
  background-image: url(../../../../images/icon-select-arrow.svg);
  background-repeat: no-repeat;
  background-position: calc(100% - clamp(11.5px, 100vw * (11.5 / 375), 15.701px)) 50%;
  background-size: clamp(9.5px, 100vw * (9.5 / 375), 12.971px);
  color: #999999;
  font-size: var(--font15);
  line-height: calc(92 / 30);
}


.point {
  display: grid;
  grid-template-columns: clamp(49.5px, 100vw * (49.5 / 375), 67.584px) 1fr;
  grid-column-gap: var(--px17);
  align-items: center;
  margin-top: var(--px40);
  margin-left: clamp(-2.048px, -100vw * (1.5 / 375), -1.5px);
}

.point__image {
  aspect-ratio: 99 / 117;
  margin-top: clamp(-11.605px, -100vw * (8.5 / 375), -8.5px);
  background-image: url(../../../../images/icon-point.webp);
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: contain;
}

.point__txt {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: var(--px13);
  padding-right: var(--px10);
  padding-left: var(--px16);
  border-radius: var(--px4);
  background-color: #eaf7f8;
  color: #555555;
  font-size: var(--font11);
  line-height: 1.6;
}

.point__txt strong {
  color: #ff509d;
  font-size: var(--font13);
}

.point__txt::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border-block: clamp(5.5px, 100vw * (5.5 / 375), 7.509px) solid transparent;
  border-right: var(--px8) solid #eaf7f8;
}