@charset "utf-8";

/* =============================== */
/* Component */
/* =============================== */
/* inner
---------------------------------------------- */
.c-inner {
  box-sizing: content-box;
  max-width: var(--inner-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--inner-gutter);
  padding-left: var(--inner-gutter);
}

.c-inner.c-inner--lg {
  max-width: var(--inner-width-lg);
}

/* ==========================================================================
  Variable-based Grid System

  [HTML記述例 / Usage Examples]

  1. 基本 (12カラム・Gapなし)
    <div class="c-grid">
      <div class="c-grid__item" style="--span: 4;">...</div>
      <div class="c-grid__item" style="--span: 8;">...</div>
    </div>

  2. レスポンシブ指定 (PC:4列 -> Tablet:2列 -> Mobile:1列, Gapあり)
    <div class="c-grid" style="--cols: 4; --cols-md: 2; --cols-sm: 1; --gap: 24px; --gap-sm: 16px;">
      <div class="c-grid__item">...</div>
      ...
    </div>

  3. 配置と整列 (中央揃えなど)
    --justify: start | center | end | space-between
    --align:   start | center | end | stretch

    <div class="c-grid" style="--justify: center; --align: center; --cols: 3;">
      ...
    </div>

  4. 個別の配置 (アイテム単体)
    <div class="c-grid__item" style="--align-self: end;">...</div>
  ========================================================================== */

/* ---------------------------------------------------------
  Base Styles (Default / PC)
  --------------------------------------------------------- */
.c-grid {
  display: grid;

  /* ▼ デフォルト値 */
  --default-cols: 12;
  --default-gap: 0;
  --default-justify: start;
  --default-align: stretch;

  /* ▼ プロキシ変数（計算用）の初期化
    インラインの --cols があればそれを使い、なければデフォルトを使う
  */
  --_cols: var(--cols, var(--default-cols));
  --_gap-x: var(--gap-x, var(--gap, var(--default-gap)));
  --_gap-y: var(--gap-y, var(--gap, var(--default-gap)));
  --_justify: var(--justify, var(--default-justify));
  --_align: var(--align, var(--default-align));

  /* ▼ スタイルの適用（プロキシ変数を参照） */
  grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
  column-gap: var(--_gap-x);
  row-gap: var(--_gap-y);
  justify-content: var(--_justify);
  align-items: var(--_align);
}

.c-grid__item {
  display: flex;
  flex-direction: column;

  /* Item用プロキシ変数 */
  --_span: var(--span, 1);
  --_order: var(--order, 0);
  --_justify-self: var(--justify-self, auto);
  --_align-self: var(--align-self, auto);

  grid-column: span var(--_span);
  order: var(--_order);
  justify-self: var(--_justify-self);
  align-self: var(--_align-self);
}

.c-grid__item > * {
  min-height: 0;
  min-width: 0;
}

/* ---------------------------------------------------------
  ブレイクポイント設定
  HTML記述を減らすため、親(より大きいサイズ)の変数を順に参照する
  「フルチェーン」記述を行っています。
  --------------------------------------------------------- */

/* XL: max-width: 1400px */
@media (max-width: 1400px) {
  .c-grid {
    /* XLがあれば採用 -> なければ Base(--cols) を採用 */
    --_cols: var(--cols-xl, var(--cols, var(--default-cols)));

    /* Gap: XL-X -> XL -> Gap-X -> Gap -> Default */
    --_gap-x: var(
      --gap-xl-x,
      var(--gap-xl, var(--gap-x, var(--gap, var(--default-gap))))
    );
    --_gap-y: var(
      --gap-xl-y,
      var(--gap-xl, var(--gap-y, var(--gap, var(--default-gap))))
    );

    --_justify: var(--justify-xl, var(--justify, var(--default-justify)));
    --_align: var(--align-xl, var(--align, var(--default-align)));
  }

  .c-grid__item {
    --_span: var(--span-xl, var(--span, 1));
    --_order: var(--order-xl, var(--order, 0));
  }
}

/* LG: max-width: 1280px */
@media (max-width: 1280px) {
  .c-grid {
    /* LG -> XL -> Base */
    --_cols: var(--cols-lg, var(--cols-xl, var(--cols, var(--default-cols))));

    /* Gap: LG-X -> LG -> XL-X -> XL ... -> Base */
    --_gap-x: var(
      --gap-lg-x,
      var(
        --gap-lg,
        var(
          --gap-xl-x,
          var(--gap-xl, var(--gap-x, var(--gap, var(--default-gap))))
        )
      )
    );
    --_gap-y: var(
      --gap-lg-y,
      var(
        --gap-lg,
        var(
          --gap-xl-y,
          var(--gap-xl, var(--gap-y, var(--gap, var(--default-gap))))
        )
      )
    );

    --_justify: var(
      --justify-lg,
      var(--justify-xl, var(--justify, var(--default-justify)))
    );
    --_align: var(
      --align-lg,
      var(--align-xl, var(--align, var(--default-align)))
    );
  }

  .c-grid__item {
    --_span: var(--span-lg, var(--span-xl, var(--span, 1)));
    --_order: var(--order-lg, var(--order-xl, var(--order, 0)));
  }
}

/* MD: max-width: 1024px */
@media (max-width: 1024px) {
  .c-grid {
    /* MD -> LG -> XL -> Base */
    --_cols: var(
      --cols-md,
      var(--cols-lg, var(--cols-xl, var(--cols, var(--default-cols))))
    );

    --_gap-x: var(
      --gap-md-x,
      var(
        --gap-md,
        var(
          --gap-lg-x,
          var(
            --gap-lg,
            var(
              --gap-xl-x,
              var(--gap-xl, var(--gap-x, var(--gap, var(--default-gap))))
            )
          )
        )
      )
    );
    --_gap-y: var(
      --gap-md-y,
      var(
        --gap-md,
        var(
          --gap-lg-y,
          var(
            --gap-lg,
            var(
              --gap-xl-y,
              var(--gap-xl, var(--gap-y, var(--gap, var(--default-gap))))
            )
          )
        )
      )
    );

    --_justify: var(
      --justify-md,
      var(
        --justify-lg,
        var(--justify-xl, var(--justify, var(--default-justify)))
      )
    );
    --_align: var(
      --align-md,
      var(--align-lg, var(--align-xl, var(--align, var(--default-align))))
    );
  }

  .c-grid__item {
    --_span: var(--span-md, var(--span-lg, var(--span-xl, var(--span, 1))));
    --_order: var(
      --order-md,
      var(--order-lg, var(--order-xl, var(--order, 0)))
    );
  }
}

/* SM: max-width: 768px */
@media (max-width: 768px) {
  .c-grid {
    /* SM -> MD -> LG -> XL -> Base */
    --_cols: var(
      --cols-sm,
      var(
        --cols-md,
        var(--cols-lg, var(--cols-xl, var(--cols, var(--default-cols))))
      )
    );

    --_gap-x: var(
      --gap-sm-x,
      var(
        --gap-sm,
        var(
          --gap-md-x,
          var(
            --gap-md,
            var(
              --gap-lg-x,
              var(
                --gap-lg,
                var(
                  --gap-xl-x,
                  var(--gap-xl, var(--gap-x, var(--gap, var(--default-gap))))
                )
              )
            )
          )
        )
      )
    );
    --_gap-y: var(
      --gap-sm-y,
      var(
        --gap-sm,
        var(
          --gap-md-y,
          var(
            --gap-md,
            var(
              --gap-lg-y,
              var(
                --gap-lg,
                var(
                  --gap-xl-y,
                  var(--gap-xl, var(--gap-y, var(--gap, var(--default-gap))))
                )
              )
            )
          )
        )
      )
    );

    --_justify: var(
      --justify-sm,
      var(
        --justify-md,
        var(
          --justify-lg,
          var(--justify-xl, var(--justify, var(--default-justify)))
        )
      )
    );
    --_align: var(
      --align-sm,
      var(
        --align-md,
        var(--align-lg, var(--align-xl, var(--align, var(--default-align))))
      )
    );
  }

  .c-grid__item {
    --_span: var(
      --span-sm,
      var(--span-md, var(--span-lg, var(--span-xl, var(--span, 1))))
    );
    --_order: var(
      --order-sm,
      var(--order-md, var(--order-lg, var(--order-xl, var(--order, 0))))
    );
  }
}

/* XS: max-width: 480px */
@media (max-width: 480px) {
  .c-grid {
    /* XS -> SM -> MD -> LG -> XL -> Base */
    --_cols: var(
      --cols-xs,
      var(
        --cols-sm,
        var(
          --cols-md,
          var(--cols-lg, var(--cols-xl, var(--cols, var(--default-cols))))
        )
      )
    );

    --_gap-x: var(
      --gap-xs-x,
      var(
        --gap-xs,
        var(
          --gap-sm-x,
          var(
            --gap-sm,
            var(
              --gap-md-x,
              var(
                --gap-md,
                var(
                  --gap-lg-x,
                  var(
                    --gap-lg,
                    var(
                      --gap-xl-x,
                      var(
                        --gap-xl,
                        var(--gap-x, var(--gap, var(--default-gap)))
                      )
                    )
                  )
                )
              )
            )
          )
        )
      )
    );
    --_gap-y: var(
      --gap-xs-y,
      var(
        --gap-xs,
        var(
          --gap-sm-y,
          var(
            --gap-sm,
            var(
              --gap-md-y,
              var(
                --gap-md,
                var(
                  --gap-lg-y,
                  var(
                    --gap-lg,
                    var(
                      --gap-xl-y,
                      var(
                        --gap-xl,
                        var(--gap-y, var(--gap, var(--default-gap)))
                      )
                    )
                  )
                )
              )
            )
          )
        )
      )
    );

    --_justify: var(
      --justify-xs,
      var(
        --justify-sm,
        var(
          --justify-md,
          var(
            --justify-lg,
            var(--justify-xl, var(--justify, var(--default-justify)))
          )
        )
      )
    );
    --_align: var(
      --align-xs,
      var(
        --align-sm,
        var(
          --align-md,
          var(--align-lg, var(--align-xl, var(--align, var(--default-align))))
        )
      )
    );
  }

  .c-grid__item {
    --_span: var(
      --span-xs,
      var(
        --span-sm,
        var(--span-md, var(--span-lg, var(--span-xl, var(--span, 1))))
      )
    );
    --_order: var(
      --order-xs,
      var(
        --order-sm,
        var(--order-md, var(--order-lg, var(--order-xl, var(--order, 0))))
      )
    );
  }
}

/* flex */
.c-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flex-gap, 0);
  align-items: var(--flex-align, stretch);
  justify-content: var(--flex-justify, flex-start);
}

.c-flex__item {
  flex-grow: var(--grow, 0);
  flex-shrink: var(--shrink, 1);
  flex-basis: var(--basis, auto);
}

/* breadcrumb
---------------------------------------------- */
.c-breadcrumb {
  color: #737373;
  font-size: clamp(12px, 3vw, 16px);
  font-weight: bold;
  letter-spacing: 0.09em;
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
}

.c-breadcrumb__item:not(:first-child):before {
  content: "";
  display: inline-block;
  width: 0.625em;
  height: 0.875em;
  margin: 0 0.5em 0 0.75em;
  -webkit-mask: var(--svg-arrow-thin) no-repeat center / contain;
  mask: var(--svg-arrow-thin) no-repeat center / contain;
  background-color: var(--c-main);
  vertical-align: -0.05em;
}

.c-breadcrumb__link {
}

/* heading
---------------------------------------------- */
/* 見出し要素が続く場合、margin-topは無しにする */
[class*="c-heading-"] + [class*="c-heading-"] {
  margin-top: 0;
}

/* 最初の要素はmargin-topなし */
[class*="c-heading-"]:first-child {
  margin-top: 0;
}

.c-heading-2 {
  margin-bottom: 40px;
  color: var(--c-accent);
  font-size: clamp(32px, 7vw, 40px);
  font-weight: bold;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.c-heading-3 {
  --shape-width: 22px;
  --shape-gap: clamp(10px, 2vw, 16px);
  --line-height: 1.6;
  position: relative;
  margin-top: 60px;
  margin-bottom: 24px;
  padding-left: calc(var(--shape-width) + var(--shape-gap));
  font-size: clamp(24px, 5vw, 34px);
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: var(--line-height);
}

.c-heading-3::before {
  content: "";
  position: absolute;
  top: calc(0.5em * var(--line-height));
  left: 0;
  translate: 0 -50%;
  width: var(--shape-width);
  height: 31px;
  background-image: url(../images/shape_heading_3.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.c-heading-4 {
  --shape-width: 12px;
  --shape-gap: clamp(10px, 2vw, 14px);
  --line-height: 1.6;
  position: relative;
  margin-top: 52px;
  margin-bottom: clamp(20px, 4.5vw, 24px);
  padding-left: calc(var(--shape-width) + var(--shape-gap));
  font-size: clamp(20px, 4.5vw, 24px);
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: var(--line-height);
}

.c-heading-4::before {
  content: "";
  position: absolute;
  top: calc(0.5em * var(--line-height));
  left: 0;
  translate: 0 -50%;
  width: var(--shape-width);
  aspect-ratio: 1;
  background-color: var(--c-main);
  filter: drop-shadow(2px 2px #000);
}

.c-heading-5 {
  position: relative;
  margin-top: 48px;
  margin-bottom: 10px;
  color: var(--c-main);
  font-size: clamp(18px, 4vw, 20px);
  font-weight: bold;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.c-section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vw, 16px) 28px;
  margin-bottom: 56px;
}

.c-section-heading span[lang="en"] {
  color: var(--en-color, var(--c-accent));
  font-family: var(--ff-bebas);
  font-size: clamp(56px, 12vw, 78px);
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1;
}
.c-section-heading span[lang="en"] .-and {
  margin-left: 0.05em;
  font-family: var(--ff-roboto);
  font-size: 0.8em;
  font-weight: 500;
}

.c-section-heading span[lang="ja"] {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: clamp(19px, 4vw, 24px);
  font-weight: bold;
  letter-spacing: 0.09em;
}

.c-section-heading span[lang="ja"]::after,
.c-section-heading span[lang="ja"]::before {
  content: "";
  rotate: 32deg;
  width: 1px;
  height: 1.2em;
  background-color: var(--shape-color, var(--c-main));
}

.c-section-heading.c-section-heading--black {
  --en-color: #000;
  --shape-color: #000;
}

@media not all and (max-width: 768px) {
  .c-section-heading[data-align="sm-over:row"] {
    flex-direction: row;
  }
}

.c-label-heading {
  --line-height: 1.6;
  display: flex;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 20px;
  font-size: clamp(20px, 4.5vw, 22px);
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: var(--line-height);
}

.c-label-heading::before {
  content: attr(data-label);
  translate: 0 -5%;
  flex-shrink: 0;
  padding: 7px 10px 5px;
  background-color: #aaa282;
  color: #fff;
  font-family: var(--ff-bebas);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
}

@media (max-width: 480px) {
  .c-label-heading {
    flex-direction: column;
  }
}

/* text
---------------------------------------------- */
.c-txt {
  font-size: clamp(15px, 3.5vw, 16px);
  font-weight: 400;
  line-height: 1.9;
}

.c-txt + .c-txt {
  margin-top: 1em;
}

.c-txt-link {
  color: var(--c-link);
  text-decoration: underline;
}

.c-txt-link:hover {
  text-decoration: none;
}

/* button
---------------------------------------------- */
.c-btn-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 52px;
}

.c-btn {
  --btn-color: var(--c-main);
  --btn-bgc: #fff;
  --btn-hover-color: #fff;
  --btn-hover-bgc: var(--btn-color);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 63px;
  width: min(100%, 287px);
  padding: 0.5em 60px;
  border: 2px solid var(--btn-color);
  background-color: var(--btn-bgc);
  color: var(--btn-color);
  font-size: clamp(16px, 4vw, 18px);
  font-weight: bold;
  letter-spacing: 0.03em;
  line-height: 1.5;
  transition: 0.3s ease-in-out;
}

.c-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  translate: 0 -50%;
  width: 34px;
  height: 8px;
  -webkit-mask: var(--svg-arrow-2) no-repeat center / contain;
  mask: var(--svg-arrow-2) no-repeat center / contain;
  background-color: currentColor;
}

.c-btn:hover,
.c-btn:focus {
  color: var(--btn-hover-color);
  background-color: var(--btn-hover-bgc);
}

/* 英語バージョン */
.c-btn.c-btn--en {
  width: min(100%, 246px);
  padding-top: 0.575em;
  padding-bottom: 0.425em;
  font-family: var(--ff-bebas);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* アウトライン */
.c-btn.c-btn--outline {
  --btn-color: #000;
}

.c-btn.c-btn--outline-rev {
  --btn-color: #fff;
  --btn-bgc: #000;
  --btn-hover-color: #000;
}

/* list
---------------------------------------------- */
.c-disk-list {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--list-gap, 0.5em);
  font-size: clamp(15px, 3.5vw, 16px);
  font-weight: 400;
  line-height: 1.9;
}

.c-disk-list > li {
  padding-left: 1em;
  position: relative;
}

.c-disk-list > li::before {
  content: "⚫︎";
  position: absolute;
  top: 0;
  left: 0;
  translate: 0 -0.1em;
  color: #868686;
}

.c-num-list {
  list-style: none;
  counter-reset: custom-counter;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--list-gap, 0.5em);
  font-size: clamp(15px, 3.5vw, 16px);
  font-weight: 400;
  line-height: 1.9;
}

.c-num-list > li {
  counter-increment: custom-counter;
  position: relative;
  padding-left: 1.8em;
}

.c-num-list > li::before {
  content: counter(custom-counter) " .";
  position: absolute;
  left: 0.2em;
  top: 0;
  color: var(--c-main);
}

.c-katakana-list {
  list-style: none;
  counter-reset: katakana-counter;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--list-gap, 1em);
  font-size: clamp(15px, 3.5vw, 16px);
  font-weight: 400;
  line-height: 1.9;
}

.c-katakana-list > li {
  padding-left: 2em;
  position: relative;
}

.c-katakana-list > li::before {
  counter-increment: katakana-counter;
  position: absolute;
  left: 0;
  top: 0;
}

.c-katakana-list > li:nth-child(1)::before {
  content: "ア）";
}

.c-katakana-list > li:nth-child(2)::before {
  content: "イ）";
}

.c-katakana-list > li:nth-child(3)::before {
  content: "ウ）";
}

.c-katakana-list > li:nth-child(4)::before {
  content: "エ）";
}

.c-katakana-list > li:nth-child(5)::before {
  content: "オ）";
}

.c-katakana-list > li:nth-child(6)::before {
  content: "カ）";
}

.c-katakana-list > li:nth-child(7)::before {
  content: "キ）";
}

.c-katakana-list > li:nth-child(8)::before {
  content: "ク）";
}

.c-katakana-list > li:nth-child(9)::before {
  content: "ケ）";
}

.c-katakana-list > li:nth-child(10)::before {
  content: "コ）";
}

.c-katakana-list > li:nth-child(11)::before {
  content: "サ）";
}

.c-katakana-list > li:nth-child(12)::before {
  content: "シ）";
}

.c-katakana-list > li:nth-child(13)::before {
  content: "ス）";
}

.c-katakana-list > li:nth-child(14)::before {
  content: "セ）";
}

.c-katakana-list > li:nth-child(15)::before {
  content: "ソ）";
}

/* image
---------------------------------------------- */
.c-picture {
  text-align: center;
}

.c-picture + * {
  margin-top: 24px;
}

/* Box
---------------------------------------------- */
.c-box {
  max-width: var(--box-width, 100%);
  padding: 18px 24px;
  background-color: #f9f9f9;
}

/* Card
---------------------------------------------- */
.c-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 52px 47px;
}

.c-card {
  position: relative;
}

.c-card__thumb {
  margin-bottom: 20px;
}

.c-card__thumb img {
  width: 100%;
  aspect-ratio: 310 / 190;
  object-fit: cover;
  opacity: var(--thumb-opacity, 1);
  transition: opacity 0.3s ease-in-out;
}

.c-card__title {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1.5;
}

.c-card__link {
  display: block;
  margin-top: 0.5em;
  color: var(--link-color, inherit);
  transition: color 0.3s ease-in-out;
}

/* aタグのリンク領域をカード全体に広げる */
.c-card__link::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
}

.c-card__link span {
  display: flex;
  align-items: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-card__link span::after {
  content: "";
  translate: 0 -15%;
  align-self: flex-end;
  width: 11px;
  height: 15px;
  margin-left: 8px;
  -webkit-mask: var(--svg-arrow) no-repeat center / contain;
  mask: var(--svg-arrow) no-repeat center / contain;
  background-color: var(--c-main);
}

.c-card__link[href*=".pdf"] span::before {
  content: "";
  translate: 0 6%;
  width: 17px;
  height: 22px;
  margin-right: 6px;
  -webkit-mask: var(--svg-pdf) no-repeat center / contain;
  mask: var(--svg-pdf) no-repeat center / contain;
  background-color: var(--c-main);
}

/* hover時 */
.c-card:has(.c-card__link:hover) {
  --thumb-opacity: 0.8;
  --link-color: var(--c-main);
}

@media (max-width: 768px) {
  .c-cards {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 48px;
  }
}

/* Table
---------------------------------------------- */
.c-horizontal-table {
  width: 100%;
}

.c-horizontal-table tr:not(:first-child) {
  border-top: 1px solid #c0c0c0;
}

.c-horizontal-table tr:first-child {
}

.c-horizontal-table th,
.c-horizontal-table td {
  padding-top: 24px;
  padding-bottom: 24px;
}

.c-horizontal-table th {
  width: 162px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.08em;
  line-height: 1.9;
  vertical-align: baseline;
}

.c-horizontal-table td {
  padding-left: 0.5em;
}

@media (max-width: 768px) {
  .c-horizontal-table th,
  .c-horizontal-table td {
    display: block;
  }

  .c-horizontal-table th {
    padding: 20px 0 8px;
  }

  .c-horizontal-table td {
    padding: 0 0 20px 0;
  }
}

/* Form Item
---------------------------------------------- */
.c-form-input,
.c-form-textarea {
  width: min(100%, var(--item-width, 460px));
  padding: 10px 1em;
  border: 1px solid #b2b2b2;
  background-color: #fbfbfb;
  resize: vertical;
}

.c-form-select {
  min-width: min(100%, 150px);
  padding: 4px 36px 4px 12px;
  border: 1px solid #b2b2b2;
  background-color: #fff;
  font-weight: 600;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.7598 0.650391L6.75977 7.65039L0.759765 0.65039" stroke="%237E7E7E" stroke-width="2"/></svg>');
  background-repeat: no-repeat;
  background-position: top 56% right 14px;
}

.c-checkbox {
  --checkbox-size: 16px;
}

.c-checkbox__input {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.c-checkbox__label {
  position: relative;
  padding-left: calc(var(--checkbox-size) + 6px);
}

.c-checkbox__label::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -45%;
  width: var(--checkbox-size);
  aspect-ratio: 1;
  border: 1px solid #b2b2b2;
}

.c-checkbox__label::after {
  content: none;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -45%;
  width: var(--checkbox-size);
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23000' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
}

.c-checkbox__input:checked + .c-checkbox__label::after {
  content: "";
}