@charset 'utf-8';

/* ========================================================================
 * グローバル変数
======================================================================== */

:root {
  --color-base: #fff;
  --color-main: #e481b8;
  --color-accent: #b34f4f;
  --color-text: #333;
  --color-link: #3f8edc;
  --color-link-hover: #eeb1cd;
  --color-white: #fff;
  --color-gradient: linear-gradient(to bottom, #efc764, #e32b6e);
  --color-gradient-02: linear-gradient(108deg, #e0c3fc, #fbc2eb);
  --container-width: min(100%, 750px);
  --scrollbar-width: 0px;
  --pad-size-btn: 1.25em 2.5em;
  --fz-base: min(3.7vw, 20px);
  --font-stack: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro",
    "BIZ UDMincho", "MS PMincho", serif;
  --lh-base: 1.6;
  --ls-base: 0.06em;
}

/* ========================================================================
 * ベーススタイル
======================================================================== */

:where(html) {
  height: 100%;
  font-size: var(--fz-base);
  cursor: auto;
}

:where(body) {
  background-color: var(--color-base);
  color: var(--color-text);
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", serif;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}

:where(a) {
  color: var(--color-link);
  text-decoration: none;
}

:where(a:focus-visible) {
  color: var(--color-link-hover);
}

@media (hover: hover) {
  :where(a:hover) {
    color: var(--color-link-hover);
  }
}

:where(figure) {
  margin: 0;
}

:where(img) {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

:where(ul, ol) {
  padding: 0;
  margin: 0;
  list-style: none;
}

:where(h3) {
  font-size: 1.3em;
}

:where(button) {
  cursor: pointer;
}

:where(summary) {
  list-style: none;
  cursor: pointer;
}

:where(summary::-webkit-details-marker) {
  display: none;
}

:where(:focus-visible) {
  outline: 2px auto var(--color-main);
}

:where(:is(section, div) > :first-child) {
  margin-top: 0;
}

:where(:is(section, div) > :last-child) {
  margin-bottom: 0;
}

/* 状態管理 */
.is-scroll-disabled {
  padding-right: var(--scrollbar-width, 0);
  overflow-y: hidden;
  touch-action: none;
}

.f-reset-button {
  border: none;
  outline: none;
}

/* ========================================================================
 * 共通レイアウト
======================================================================== */

.l-wrapper {
  position: relative;
  width: var(--container-width);
  margin-inline: auto;
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
}

/* セクション
======================================================================== */

.l-section {
  padding-top: var(--section-pt, 2em);
  padding-bottom: var(--section-pb, 2em);
}

.l-section--pt-0 {
  --section-pt: 0;
}
.l-section--pt-20 {
  --section-pt: 2em;
}
.l-section--pt-40 {
  --section-pt: 4em;
}
.l-section--pt-60 {
  --section-pt: 6em;
}

.l-section--pb-0 {
  --section-pb: 0;
}
.l-section--pb-20 {
  --section-pb: 2em;
}
.l-section--pb-40 {
  --section-pb: 4em;
}
.l-section--pb-60 {
  --section-pb: 6em;
}

.l-section-wrap--lead {
  background: url(../image/bg_lead.png) no-repeat top/cover;
}

.l-section--feature {
  background: url(../image/bg_feature.png) no-repeat top/cover;
}

.l-section--job {
  background: url(../image/bg_job.png) no-repeat top/cover;
}

.l-section--support {
  background: url(../image/bg_support.png) no-repeat top/cover;
}

.l-section--benefit {
  background: url(../image/bg_benefit.png) no-repeat center 20%/cover;
}

.l-section--interview {
  background: url(../image/bg_interview.png) no-repeat top/cover;
}

.l-section--staff-schedule {
  background-color: #ffeefd;
}

.l-section--recruit {
  background: url(../image/bg_recruit.png) no-repeat top/cover;
}

.l-section--message {
  background: url(../image/bg_message.png) no-repeat top/cover;
}

.l-section--faq {
  background: url(../image/bg_faq.png) no-repeat top/cover;
}

.l-section--entry {
  background: url(../image/bg_entry.png) no-repeat top/cover;
}

.l-section__inner {
  padding-inline: 1.5em;
}

/* グループ
======================================================================== */

.c-content {
  width: min(100%, 650px);
  margin-inline: auto;
}

.c-content--wide {
  width: auto;
  margin-inline: -1.5em;
}

/* フレックスボックス
======================================================================== */

.c-flex {
  display: flex;
  margin-left: -1em;
}

.c-flex__item {
  margin-left: 1em;
}

/* ボーダーボックス
======================================================================== */

.c-border-box {
  position: relative;
  padding: 1.5em 1em;
}

.c-border-box::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-image: var(--color-gradient);
  z-index: -2;
  content: "";
}

.c-border-box::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 10px;
  background-color: var(--color-white);
  z-index: -1;
  content: "";
}

/* リスト
======================================================================== */

.c-list--disc {
  padding-left: 1.5em;
  list-style: disc;
}

.c-list--decimal {
  padding-left: 1.5em;
  list-style: decimal;
}

.c-list__item:not(:last-child) {
  margin-bottom: 1em;
}

/* アコーディオン
======================================================================== */

.c-accordion__details {
  height: var(--acc-height-close, auto);
  overflow: hidden;
  transition: var(--acc-transition-duration, 0.3s);
}

.c-accordion__details:not(:last-child) {
  margin-bottom: 2em;
}

.c-accordion__details.is-open {
  height: var(--acc-height-open, auto);
}

.c-accordion__summary {
  position: relative;
  padding: 1em;
}

.c-accordion__summary::after {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  content: "\002b";
}

.is-open .c-accordion__summary::after {
  content: "\002212";
}

.c-accordion__body {
  padding: 1em;
}

/* 吹き出し
======================================================================== */

.c-bubble {
  position: relative;
  padding: 1em;
  border-radius: 10px;
  background-color: var(--color-white);
  filter: drop-shadow(6px 4px 4px #c051ac);
}

.c-bubble::after {
  position: absolute;
  bottom: 0;
  left: 35%;
  transform: translate(-50%, 100%) skew(50deg);
  border: 10px solid transparent;
  border-top: 20px solid var(--color-white);
  content: "";
}

.c-bubble--right::after {
  left: 65%;
  transform: translate(-50%, 100%) skew(-50deg);
}

/* テキストグラデーション
======================================================================== */

.c-gradient-text {
  background-clip: text;
  background-image: var(--color-gradient);
  color: transparent;
}

/* マーカー
======================================================================== */

.c-marker {
  background-image: linear-gradient(to top, #ffc49f 20%, transparent 20%);
}

/* セパレーター
======================================================================== */

.c-separator {
  margin-block: 3em;
  border: none;
  border-bottom: 2px solid #a77f1c;
}

/* 見出し
======================================================================== */

.c-heading {
  position: relative;
}

.c-heading--dashed {
  border-bottom: 2px dashed var(--color-main);
}

.c-heading__text--dashed {
  display: inline-block;
  border-bottom: 2px dashed var(--color-main);
}

.c-section-heading {
  margin-bottom: 3em;
}

.c-section-heading__label {
  color: #ca67a6;
  font-size: 2em;
}

/* ボタン
======================================================================== */

.c-button {
  position: relative;
  display: inline-block;
  padding: var(--pad-size-btn);
  border-radius: var(--radius-btn, 0);
  background-color: var(--bg-btn, var(--color-main));
  color: var(--color-btn, var(--color-white));
  transition: 0.3s;
}

.c-button--normal:focus-visible {
  opacity: 0.8;
}

@media (hover: hover) {
  .c-button--normal:hover {
    opacity: 0.8;
  }
}

.c-button--border-gradient {
  --radius-btn: 60px;
  --bg-btn: transparent;
  --color-btn: var(--color-text);
  z-index: 0;
}

.c-button--border-gradient::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 60px;
  background-image: var(--color-gradient);
  z-index: -2;
  content: "";
}

.c-button--border-gradient::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 60px;
  background-color: var(--color-white);
  z-index: -1;
  content: "";
}

.c-button--border-gradient:focus-visible {
  transform: translateY(2px) scale(0.99);
}

@media (hover: hover) {
  .c-button--border-gradient:hover {
    transform: translateY(2px) scale(0.99);
  }
}

/* ========================================================================
 * ヘッダーレイアウト
======================================================================== */

.l-header__inner {
  padding-inline: min(4vw, 24px);
}

/* ロゴ
======================================================================== */

.c-header-logo {
  padding-block: 10px;
  margin-block: 0;
  font-size: 1em;
}

.c-header-logo__link {
  display: inline-block;
  padding: 20px 10px;
}

.c-header-logo__img {
  height: min(5.5vw, 30px);
}

/* グローバルナビ
======================================================================== */

.l-header__nav {
  position: fixed;
  top: 0;
  left: calc(50vw - (var(--scrollbar-width) + var(--container-width)) / 2);
  width: var(--container-width);
  z-index: 10;
}

/* トグルボタン
------------------------------------------------------------------------ */

.c-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
  height: min(15vw, 60px);
  width: min(15vw, 60px);
  z-index: 1;
}

.c-nav-toggle__button {
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-accent);
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  transition: background-color 0.3s, color 0.3s;
}

.c-nav-toggle__button.is-active {
  font-size: 20px;
}

.c-nav-toggle__button:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-white);
}

@media (hover: hover) {
  .c-nav-toggle__button:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
  }
}

.c-nav-toggle__label {
  transition: opacity 0.3s;
}

.c-nav-toggle__label.is-animating {
  opacity: 0;
}

/* ナビ
------------------------------------------------------------------------ */

.c-nav {
  position: fixed;
  top: 0;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  width: var(--container-width);
  height: 100%;
  padding-block: 80px;
  background-color: var(--color-white);
  overflow-y: auto;
  transition: 0.3s;
}

.c-nav.is-open {
  transform: scaleX(1);
}

.c-nav__list {
  padding: 1em;
}

.c-nav__item {
  margin-bottom: 0.5em;
  border-bottom: 2px dashed var(--color-main);
}

.c-nav__link {
  position: relative;
  display: block;
  padding: 0.25em 0.5em;
  color: var(--color-main);
  font-size: 1.5em;
}

.c-nav__link::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-main);
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform 0.3s;
  z-index: -1;
  content: "";
}

.c-nav__link:focus-visible {
  color: var(--color-white);
  opacity: 1;
}

.c-nav__link:focus-visible::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

@media (hover: hover) {
  .c-nav__link:hover {
    color: var(--color-white);
    opacity: 1;
  }

  .c-nav__link:hover::before {
    transform-origin: 0% 50%;
    transform: scaleX(1);
  }
}

/* ========================================================================
 * メインレイアウト
======================================================================== */

.l-main {
  padding-bottom: 6em;
}

/* ========================================================================
 * ページトップへ戻るボタン
======================================================================== */

.l-scroll-top {
  position: fixed;
  bottom: 5em;
  width: var(--container-width);
  z-index: 1;
}

.c-scroll-top {
  position: absolute;
  right: 15px;
  bottom: 20px;
  display: block;
  width: 60px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-white);
  line-height: 60px;
  text-align: center;
  font-size: 1.3em;
  transition: 0.3s;
}

.c-scroll-top:focus-visible {
  background-color: var(--color-link-hover);
}

@media (hover: hover) {
  .c-scroll-top:hover {
    background-color: var(--color-link-hover);
  }
}

/* ========================================================================
 * プロジェクトレイアウト
======================================================================== */

/* MV直下、特徴
======================================================================== */

.p-perk {
  transform: translateY(-22.5%);
  padding-inline: 1.5em;
}

/* リードセクション
======================================================================== */

.p-lead .c-heading {
  margin-bottom: 2em;
  color: #ca67a6;
  font-size: 1.8em;
}

@media screen and (min-width: 750px) {
  .p-lead .c-heading {
    font-size: 2em;
  }
}

.p-lead .c-list ::marker {
  color: var(--color-main);
  font-size: 1.5em;
  font-weight: bold;
}

.p-lead .c-list__item:not(:last-child) {
  margin-bottom: 2em;
}

.p-lead .c-list__title {
  margin-bottom: 1em;
  color: var(--color-main);
  font-size: 1.5em;
  font-weight: bold;
}

.p-lead__message {
  color: #ca67a6;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}

/* LIGHT WAVEの3つの特徴
======================================================================== */

.p-feature__body {
  margin-inline: 1.5em;
}

.p-feature .c-accordion__summary {
  color: #962d6c;
  text-align: right;
}

.p-feature .c-accordion__summary::before {
  margin-right: 0.5em;
  content: "\25bc";
}

.p-feature .is-open .c-accordion__summary::before {
  content: "\25b2";
}

.p-feature .c-accordion__summary::after {
  content: none;
}

/* 業務内容
======================================================================== */

.p-job:not(:last-of-type) {
  margin-bottom: 4em;
}

.p-job--nail {
  --color-job: #e05286;
}

.p-job--eye {
  --color-job: #eb9168;
}

.p-job--esthe {
  --color-job: #ee7f7e;
}

.p-job__img-wrap {
  padding-left: 2em;
  background-image: linear-gradient(
    to top,
    var(--color-job, var(--color-main)) 45%,
    transparent 45%
  );
}

.p-job__img {
  width: 100%;
}

.p-job__body {
  padding: 2em 2em 4em 2em;
  background-color: var(--color-job, var(--color-main));
  color: var(--color-white);
}

.p-job__title {
  line-height: 1.2;
  font-size: 2em;
}

.p-job__title-sub {
  font-size: 70%;
}

.p-job__work {
  font-size: 1.75em;
}

.p-job__list {
  padding-block: 2.5em;
  margin-bottom: 3em;
  border-top: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
}

.p-job__comment {
  margin-bottom: 2em;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
}

/* LIGHT WAVEの教育・サポート体制
======================================================================== */

.p-support:not(:last-of-type) {
  margin-bottom: 4em;
}

.p-support-body__title {
  font-size: 1.3em;
}

.p-support-body__title--step {
  font-size: 1.5em;
}

/* スタッフの声
======================================================================== */

.p-staff:not(:last-of-type) {
  margin-bottom: 4em;
}

.p-staff--01 {
  --color-staff: #ee7f7e;
}

.p-staff--02 {
  --color-staff: #eb9168;
}

.p-staff--03 {
  --color-staff: #e05286;
}

.p-staff__person {
  padding-bottom: 3em;
  background-image: linear-gradient(
    to top,
    var(--color-staff, var(--color-main)) 65%,
    transparent 65%
  );
}

.p-staff__img {
  width: 50%;
}

.p-staff__name {
  padding: 0.25em 0.5em;
  margin-inline: auto;
  width: min(100%, 300px);
  border-radius: 60px;
  background-color: var(--color-white);
  font-weight: bold;
}

.p-staff-info {
  display: flex;
  justify-content: center;
  gap: 1em;
  color: var(--color-white);
}

.p-staff-info__item {
  position: relative;
}

.p-staff-info__item:not(:last-child)::before {
  position: absolute;
  right: -1em;
  transform: translateX(-50%);
  content: "/";
}

.p-staff__role {
  color: var(--color-white);
}

.p-staff .c-accordion__item {
  padding-bottom: 1em;
  border-bottom: 3px dotted var(--color-staff, var(--color-main));
}

.p-staff .c-accordion__item:not(:last-of-type) {
  margin-bottom: 2em;
}

.p-staff .c-accordion__summary {
  padding-right: 2em;
  padding-left: 2.5em;
  color: var(--color-staff, var(--color-main));
  font-size: 1.5em;
  font-weight: bold;
}

.p-staff .c-accordion__summary::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  background-color: var(--color-staff, var(--color-main));
  color: var(--color-white);
  font-size: 1.25em;
  text-align: center;
  content: "Q";
}

/* 募集要項
======================================================================== */

.p-recruitment__term {
  padding: 0.5em 1em;
  border-top: 2px solid #ee7f7e;
  border-bottom: 2px solid #ee7f7e;
  background-color: #fdd7f3;
  color: #ca67a6;
  text-align: center;
  font-weight: bold;
  font-size: 1.25em;
}

.p-recruitment__desc {
  margin-top: 2em;
}

.p-recruitment__desc:not(:last-of-type) {
  margin-bottom: 2em;
}

@media screen and (max-width: 749px) {
  .p-recruitment__desc {
    margin-left: 0;
  }
}

.p-recruitment-role:not(:last-child) {
  margin-bottom: 2em;
}

.p-recruitment-role__title {
  margin-bottom: 0.5em;
  font-size: 1.1em;
}

.p-recruitment-shop {
  font-size: 1.2em;
  font-weight: bold;
}

.p-entry__title {
  color: #ca67a6;
  font-size: 1.5em;
}

/* FAQ
======================================================================== */

.p-faq .c-accordion__summary {
  padding-right: 2em;
  padding-left: 2.5em;
  border-top-left-radius: 30px;
  background-color: #fdd7f3;
  color: #ca67a6;
  font-size: 1.5em;
  font-weight: bold;
}

.p-faq .c-accordion__summary::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  background-color: var(--color-main);
  color: var(--color-white);
  font-size: 1.25em;
  text-align: center;
  content: "Q";
}

.p-faq .c-accordion__body {
  background-color: #fdd7f3;
}

/* 問い合わせフォーム
======================================================================== */

.p-form__item {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2em;
}

.p-form__label {
  margin-bottom: 0.5em;
  width: 100%;
  font-size: 1.25em;
}

.p-form__required,
.p-form__optional {
  display: inline-block;
  padding: 0.25em 0.5em;
  margin-left: 1em;
  background-color: var(--color-required, #999);
  color: var(--color-white);
  font-size: 70%;
}

.p-form__required {
  --color-required: #b34f4f;
}

.p-form__optional {
  --color-required: #ca67a6;
}

.p-form__radio-label {
  margin-right: 1em;
  margin-left: 0.5em;
  font-size: 1.25em;
}

.p-form__radio {
  width: 1.25em;
}

.p-form__input {
  padding: 0.5em 1em;
  width: 100%;
  font-size: 1.25em;
  line-height: 1.5;
}

.p-form__input--birth-date {
  width: 23%;
}

.p-form__input--age {
  width: 30%;
}

.p-form__unit-label {
  padding-block: 0.5em;
  margin-inline: 1em;
  font-size: 1.25em;
}

.p-form__textarea {
  padding: 0.5em 1em;
  width: 100%;
  font-size: 1.25em;
  line-height: 1.5;
}

.p-form__btn-wrap {
  position: relative;
  margin-inline: auto;
  width: min(100%, 590px);
  height: 90px;
  margin-top: 1.5em;
}

.p-form__btn-wrap::before {
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  width: 30px;
  height: 37px;
  background: url(../image/form_arrow_r.png) no-repeat center/contain;
  z-index: 1;
  content: "";
}

.p-form__btn {
  padding: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: var(--color-gradient-02);
  font-size: 1.5em;
  cursor: pointer;
}

/* 追従CTA
======================================================================== */

.p-cta {
  position: fixed;
  bottom: 2em;
  left: calc(50vw - (var(--scrollbar-width) + var(--container-width)) / 2);
  display: flex;
  gap: 0.5em;
  width: var(--container-width);
  padding-inline: 1.5em;
  z-index: 1;
}

.p-cta__item {
  flex: 1;
}

.p-cta__link {
  position: relative;
  display: inline-block;
  padding: 0.75em 2.5em 0.75em 1em;
  width: 100%;
  border-radius: 60px;
  box-shadow: 0 4px 0 var(--shadow-cta, rgb(0 0 0 / 50%));
  background-color: var(--color-cta, var(--color-main));
  color: var(--color-white);
  font-weight: bold;
  text-align: center;
  transition: 0.3s;
}

.p-cta__link:focus-visible {
  transform: translateY(4px);
  box-shadow: 0 0 0 transparent;
}

@media (hover: hover) {
  .p-cta__link:hover {
    transform: translateY(4px);
    box-shadow: 0 0 0 transparent;
  }
}

.p-cta__link::after {
  position: absolute;
  right: 1em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-cta, var(--color-main));
  font-family: "Font Awesome 7 Free";
  content: "\f054";
}

.p-cta__link--01 {
  --color-cta: #81b850;
  --shadow-cta: #298f2c;
}

.p-cta__link--02 {
  --color-cta: #eb9e21;
  --shadow-cta: #aa915a;
}

.p-cta__img {
  border-radius: 60px;
}

/* 送信内容確認画面
======================================================================== */

.p-form-confirm {
  padding-block: 3em;
  padding-inline: 1.5em;
}

.p-form-confirm__error {
  font-size: 1.5em;
}

.p-form-confirm__error-text {
  margin-bottom: 2.5em;
  text-align: center;
}

.p-form-confirm__title {
  color: #ca67a6;
  font-size: 2em;
}

.p-form-confirm__button {
  position: relative;
  margin-inline: auto;
  width: min(100%, 590px);
  height: 90px;
  margin-top: 1.5em;
}

.p-form-confirm__button--back::before {
  position: absolute;
  top: 50%;
  left: 1em;
  transform: translateY(-50%);
  width: 30px;
  height: 37px;
  background: url(../image/form_arrow_l.png) no-repeat center/contain;
  z-index: 1;
  content: "";
}

.p-form-confirm__button--submit::before {
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  width: 30px;
  height: 37px;
  background: url(../image/form_arrow_r.png) no-repeat center/contain;
  z-index: 1;
  content: "";
}

:is(.p-form-confirm__button--back, .p-form-confirm__button--submit) .c-button {
  padding: 0;
  width: 100%;
  height: 100%;
  border: none;
  font-size: 1em;
  cursor: pointer;
}

.p-form-confirm__button--back .c-button {
  --bg-btn: #d2b277;
}

.p-form-confirm__button--submit .c-button {
  background: var(--color-gradient-02);
}

.p-form-confirm__table {
  font-size: 1.2em;
}

.p-form-confirm__th::after {
  display: inline-block;
  padding: 0.25em 0.5em;
  margin-left: 1em;
  background-color: var(--color-required, #999);
  color: var(--color-white);
  font-size: 70%;
}

.p-form-confirm__tr:nth-of-type(-n+11) .p-form-confirm__th::after {
  --color-required: #b34f4f;
  content: "必須";
}

.p-form-confirm__tr:not(:nth-of-type(-n+11)) .p-form-confirm__th::after {
  --color-required: #ca67a6;
  content: "任意";
}

.p-form-confirm__th, .p-form-confirm__td {
  display: block;
}

.p-form-confirm__th {
  margin-bottom: 0.5em;
  text-align: left;
}

.p-form-confirm__td {
  padding: 0.5em 1.75em 1.5em;
  margin-bottom: 2em;
  border-bottom: 2px dashed #333;
}

/* 送信完了画面
======================================================================== */

.p-form-end {
  padding-block: 3em;
  text-align: center;
}

.p-form-end__title {
  color: #ca67a6;
  font-size: 2em;
}

.p-form-end__button {
  position: relative;
  margin-inline: auto;
  width: min(100%, 590px);
  height: 90px;
  margin-top: 1.5em;
}

.p-form-end__button .c-button {
  --bg-btn: #ca67a6;
  width: 100%;
}

.p-form-end__button .c-button::before {
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  width: 30px;
  height: 37px;
  background: url(../image/form_arrow_r.png) no-repeat center/contain;
  content: "";
}

/* ========================================================================
 * ユーティリティクラス（調整用クラス）
======================================================================== */

.u-mb-0 {
  margin-bottom: 0;
}
.u-mb-05 {
  margin-bottom: 0.5em;
}
.u-mb-10 {
  margin-bottom: 1em;
}
.u-mb-15 {
  margin-bottom: 1.5em;
}
.u-mb-20 {
  margin-bottom: 2em;
}
.u-mb-25 {
  margin-bottom: 2.5em;
}
.u-mb-30 {
  margin-bottom: 3em;
}

.u-mt-0 {
  margin-top: 0;
}
.u-mt-05 {
  margin-top: 0.5em;
}
.u-mt-10 {
  margin-top: 1em;
}
.u-mt-15 {
  margin-top: 1.5em;
}
.u-mt-20 {
  margin-top: 2em;
}
.u-mt-25 {
  margin-top: 2.5em;
}
.u-mt-30 {
  margin-top: 3em;
}

.u-color-main {
  color: var(--color-main);
}
.u-color-white {
  color: var(--color-white);
}

.u-text-center {
  text-align: center;
}
.u-text-right {
  text-align: right;
}

.u-fw-normal {
  font-weight: normal;
}
.u-fw-bold {
  font-weight: bold;
}

.u-font-gothic {
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN",
    "Meiryo", sans-serif;
}
