@charset "UTF-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * SCSS Information
 * ===============================================================
 *
 * File name: _module.scss
 * Summary:   モジュール用スタイル
 * Author:    CrEa Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    modules
 *
 * ===============================================================
*/

/** =1
 * ========================================
 * modules
 * ========================================
 */

/*
* icon
* ----------------------------------
*/
[class*="icon-"] {
  display: inline-block;
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: currentColor;
}
.icon-arrow {
  width: 16px;
  height: 16px;
}
.icon-arrow.arrowUp {
  rotate: -90deg;
}
.icon-arrow.arrowDown {
  rotate: 90deg;
}
.icon-arrow.arrowLeft {
  rotate: 180deg;
}
.icon-arrow.arrowRight {
}

.icon-footprint {
  width: 40px;
  height: 40px;
}
.icon-footprint:not(.is-unChecked) {
  stroke: none;
}
.icon-footprint.is-unChecked {
  fill: none;
}

/*
* title
* ----------------------------------
*/
.titlePage {
  padding-block: calc(10 / 20 * 1em);
  padding-inline: calc(20 / 20 * 1em);
  background-image: linear-gradient(
      135deg,
      transparent 7px,
      var(--color-main) 0
    ),
    var(--color-gradient),
    linear-gradient(-45deg, transparent 7px, var(--color-sub) 0);
  background-position: top left, top center, top right;
  background-size: 10px 100%, calc(100% - 10px * 2) 100%, 10px 100%;
  background-repeat: no-repeat;
  color: var(--color-text-bright);
  font-size: clamp(2rem, calc(24 / 1024 * 100cqw), 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.titlePage .text {
  display: inline-block;
  transform: skew(-16deg);
  text-box: trim-both cap alphabetic;
}

.titleSection {
  padding-block: calc(8 / 20 * 1em);
  padding-inline: calc(20 / 20 * 1em);
  background-image: linear-gradient(
      135deg,
      transparent 7px,
      var(--color-main) 0
    ),
    var(--color-gradient),
    linear-gradient(-45deg, transparent 7px, var(--color-sub) 0);
  background-position: top left, top center, top right;
  background-size: 10px 100%, calc(100% - 10px * 2) 100%, 10px 100%;
  background-repeat: no-repeat;
  color: var(--color-text);
  font-size: clamp(1.6rem, calc(20 / 1024 * 100cqw), 2rem);
  font-weight: 700;
  line-height: 1.2;
}
.titleSection .text {
  display: inline-block;
  transform: skew(-16deg);
}

/*
* iframe
* ----------------------------------
*/

.iframeWrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.iframeWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/*
* button
* ----------------------------------
*/
.linkBtn,
button.linkBtn,
a.linkBtn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  column-gap: calc(16 / 16 * 1em);
  /* overflow: clip; */
  position: relative;
  min-height: 60px;
  padding-block: calc(12 / 16 * 1em);
  padding-inline: calc(16 / 16 * 1em);
  /* border-radius: 100vmax; */
  background-color: var(--color-main);
  color: var(--color-text-bright);
  font-family: inherit;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: center;
}
.linkBtn::before,
.linkBtn::after {
  --color-edge: var(--color-main);
  position: absolute;
  inset-block-start: 50%;
  z-index: 0;
  aspect-ratio: 1;
  height: 70.7%;
  background-image: linear-gradient(
    -45deg,
    transparent 45%,
    var(--color-edge) 0
  );
  background-size: cover;
  pointer-events: none;
  content: "";
}
.linkBtn::before {
  inset-inline-start: 0;
  translate: -50% -50%;
  rotate: -45deg;
}
.linkBtn::after {
  inset-inline-end: 0;
  translate: 50% -50%;
  rotate: 135deg;
}

.linkBtn:is(button) {
  font-family: inherit;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.linkBtn:is(input[type="button"]),
.linkBtn:is(input[type="submit"]),
.linkBtn:is(input[type="reset"]) {
  font-family: inherit;
  border: none;
  vertical-align: baseline;
}
@media (any-hover: hover) {
  .linkBtn,
  button.linkBtn,
  a.linkBtn {
    transition: opacity 0.4s ease;
  }
  .linkBtn:not(span):hover {
    opacity: var(--opacity-hover);
  }
}

.linkBtn.colorAccent {
  background-image: var(--color-gradient);
}
.linkBtn.colorAccent::before {
  --color-edge: var(--color-main-deep);
}
.linkBtn.colorAccent::after {
  --color-edge: var(--color-sub);
}

.linkBtn.colorBright {
  background-color: var(--color-base-bright);
  color: var(--color-text);
}
.linkBtn.colorBright:has(.textGradient) {
  color: var(--color-main);
}
.linkBtn.colorBright.hasBorder {
  box-shadow: inset 0 0 0 1px var(--color-border-pale);
}
.linkBtn.colorBright::before,
.linkBtn.colorBright::after {
  --color-edge: var(--color-base-bright);
}
.linkBtn.colorBright.hasBorder::before,
.linkBtn.colorBright.hasBorder::after {
  box-shadow: inset 1px 1px 0 0 var(--color-border-pale);
}
.linkBtn.colorBright .text.textGradient {
  background: var(--color-gradient);
  background-size: 100% 150%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}
.linkBtn.colorBright:has(.textGradient) [class*="icon-"]:first-child {
  color: var(--color-main);
}
.linkBtn.colorBright:has(.textGradient) [class*="icon-"]:last-child {
  color: var(--color-sub);
}

.linkBtn.colorDisabled {
  background-color: var(--color-text-light);
  color: var(--color-text-bright);
}
.linkBtn.colorDisabled::before,
.linkBtn.colorDisabled::after {
  --color-edge: var(--color-text-light);
}

.linkBtn.typeSimple {
  border-radius: var(--border-radius-small);
}
.linkBtn.typeSimple::before,
.linkBtn.typeSimple::after {
  display: none;
}

.linkBtn.transparent {
  background: none;
  color: var(--color-text);
}

.linkBtn.onlyIcon {
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
}
.linkBtn.onlyIcon .text {
  display: none;
}

.linkBtn.large {
  min-height: initial;
  column-gap: calc(16 / 32 * 1em);
  padding-block: calc(18 / 32 * 1em);
  padding-inline: calc(20 / 32 * 1em);
  font-size: clamp(2.4rem, calc(32 / 768 * 100cqw), 3.2rem);
}
.linkBtn.small {
  min-height: initial;
  padding-block: calc(8 / 12 * 1em);
  padding-inline: calc(12 / 12 * 1em);
  font-size: clamp(1.2rem, calc(14 / 768 * 100cqw), 1.4rem);
}

.linkBtn.widthFixed {
  /* justify-content: center; */
  width: min(240px, 100%);
}
/* @media (max-width: 767px) {
  .linkBtn.widthFixed {
    width: min(320px, 100%);
  }
} */
/* .linkBtn.widthFixed:has([class*="icon-"]) {
  padding-inline: calc(48 / 16 * 1em);
}
.linkBtn.widthFixed [class*="icon-"] {
  position: absolute;
  inset-block: 50%;
  translate: 0 -50%;
}
.linkBtn.widthFixed [class*="icon-"]:is(:first-child) {
  inset-inline-start: calc(24 / 16 * 1em);
}
.linkBtn.widthFixed [class*="icon-"]:is(:last-child) {
  inset-inline-end: calc(24 / 16 * 1em);
} */

.linkBtn.disabled,
.linkBtn[disabled] {
  pointer-events: none;
  opacity: var(--opacity-disabled);
}

.linkBtn .text {
  margin-block-start: calc(-4 / 32 * 1em);
  line-height: 1.4;
  /* text-box: trim-both cap alphabetic; */
}
/* @supports not (text-box: trim-both cap alphabetic) {
  .linkBtn .text {
    margin-block: calc((1em - 1lh) / 2);
  }
} */
.linkBtn .text.sansSerifEn {
  text-transform: uppercase;
}

.linkBtn [class*="icon-"] {
  flex-shrink: 0;
  width: calc(24 / 32 * 1em);
  height: calc(24 / 32 * 1em);
}
.linkBtn .icon-arrow:last-child {
  margin-inline-end: calc(-4 / 16 * 1em);
}
.linkBtn .icon-target {
  width: calc(40 / 32 * 1em);
  height: calc(40 / 32 * 1em);
}
.linkBtn .icon-get {
  width: calc(50 / 32 * 1em);
  height: calc(23 / 32 * 1em);
}

/*
* layout
* ----------------------------------
*/
.columnWrap {
  display: flex;
  flex-wrap: wrap;
}
.columnWrap.justifyCenter {
  justify-content: center;
}
.columnWrap.alignCenter {
  align-items: center;
}

.columnWrap .colGlow {
  flex-grow: 1;
}

.columnWrap [class*="col"] .linkBtn {
  height: 100%;
}
@media (max-width: 767px) {
  .columnWrap [class*="col"] .linkBtn {
    width: 100%;
  }
}

.columnWrap .col-1 {
  width: calc(1 / var(--col-max) * 100%);
}
.columnWrap .col-2 {
  width: calc(2 / var(--col-max) * 100%);
}
.columnWrap .col-3 {
  width: calc(3 / var(--col-max) * 100%);
}
.columnWrap .col-4 {
  width: calc(4 / var(--col-max) * 100%);
}
.columnWrap .col-5 {
  width: calc(5 / var(--col-max) * 100%);
}
.columnWrap .col-6 {
  width: calc(6 / var(--col-max) * 100%);
}
.columnWrap .col-7 {
  width: calc(7 / var(--col-max) * 100%);
}
.columnWrap .col-8 {
  width: calc(8 / var(--col-max) * 100%);
}
.columnWrap .col-9 {
  width: calc(9 / var(--col-max) * 100%);
}
.columnWrap .col-10 {
  width: calc(10 / var(--col-max) * 100%);
}
.columnWrap .col-11 {
  width: calc(11 / var(--col-max) * 100%);
}
.columnWrap .col-12 {
  width: calc(12 / var(--col-max) * 100%);
}

@media (max-width: 767px) {
  .columnWrap .col-sp-1 {
    width: calc(1 / var(--col-max) * 100%);
  }
  .columnWrap .col-sp-2 {
    width: calc(2 / var(--col-max) * 100%);
  }
  .columnWrap .col-sp-3 {
    width: calc(3 / var(--col-max) * 100%);
  }
  .columnWrap .col-sp-4 {
    width: calc(4 / var(--col-max) * 100%);
  }
  .columnWrap .col-sp-5 {
    width: calc(5 / var(--col-max) * 100%);
  }
  .columnWrap .col-sp-6 {
    width: calc(6 / var(--col-max) * 100%);
  }
  .columnWrap .col-sp-7 {
    width: calc(7 / var(--col-max) * 100%);
  }
  .columnWrap .col-sp-8 {
    width: calc(8 / var(--col-max) * 100%);
  }
  .columnWrap .col-sp-9 {
    width: calc(9 / var(--col-max) * 100%);
  }
  .columnWrap .col-sp-10 {
    width: calc(10 / var(--col-max) * 100%);
  }
  .columnWrap .col-sp-11 {
    width: calc(11 / var(--col-max) * 100%);
  }
  .columnWrap .col-sp-12 {
    width: calc(12 / var(--col-max) * 100%);
  }
}

.columnWrap.hasGap {
  gap: var(--col-gap);
}
.columnWrap.hasGap .col-1 {
  width: calc(
    1 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
  );
}
.columnWrap.hasGap .col-2 {
  width: calc(
    2 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
  );
}
.columnWrap.hasGap .col-3 {
  width: calc(
    3 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
  );
}
.columnWrap.hasGap .col-4 {
  width: calc(
    4 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
  );
}
.columnWrap.hasGap .col-5 {
  width: calc(
    5 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
  );
}
.columnWrap.hasGap .col-6 {
  width: calc(
    6 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
  );
}
.columnWrap.hasGap .col-7 {
  width: calc(
    7 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
  );
}
.columnWrap.hasGap .col-8 {
  width: calc(
    8 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
  );
}
.columnWrap.hasGap .col-9 {
  width: calc(
    9 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
  );
}
.columnWrap.hasGap .col-10 {
  width: calc(
    10 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
  );
}
.columnWrap.hasGap .col-11 {
  width: calc(
    11 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
  );
}
.columnWrap.hasGap .col-12 {
  width: calc(
    12 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
  );
}

@media (max-width: 767px) {
  .columnWrap.hasGap .col-sp-1 {
    width: calc(
      1 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
    );
  }
  .columnWrap.hasGap .col-sp-2 {
    width: calc(
      2 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
    );
  }
  .columnWrap.hasGap .col-sp-3 {
    width: calc(
      3 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
    );
  }
  .columnWrap.hasGap .col-sp-4 {
    width: calc(
      4 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
    );
  }
  .columnWrap.hasGap .col-sp-5 {
    width: calc(
      5 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
    );
  }
  .columnWrap.hasGap .col-sp-6 {
    width: calc(
      6 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
    );
  }
  .columnWrap.hasGap .col-sp-7 {
    width: calc(
      7 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
    );
  }
  .columnWrap.hasGap .col-sp-8 {
    width: calc(
      8 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
    );
  }
  .columnWrap.hasGap .col-sp-9 {
    width: calc(
      9 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
    );
  }
  .columnWrap.hasGap .col-sp-10 {
    width: calc(
      10 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
    );
  }
  .columnWrap.hasGap .col-sp-11 {
    width: calc(
      11 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
    );
  }
  .columnWrap.hasGap .col-sp-12 {
    width: calc(
      12 / var(--col-max) * (100% - var(--col-gap) * (var(--col-max) - 1))
    );
  }
}

.columnWrap.hasGapNarrow {
  gap: var(--col-gap-narrow);
}
.columnWrap.hasGapNarrow .col-1 {
  width: calc(
    1 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
      var(--col-gap-narrow) * (1 - 1)
  );
}
.columnWrap.hasGapNarrow .col-2 {
  width: calc(
    2 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
      var(--col-gap-narrow) * (2 - 1)
  );
}
.columnWrap.hasGapNarrow .col-3 {
  width: calc(
    3 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
      var(--col-gap-narrow) * (3 - 1)
  );
}
.columnWrap.hasGapNarrow .col-4 {
  width: calc(
    4 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
      var(--col-gap-narrow) * (4 - 1)
  );
}
.columnWrap.hasGapNarrow .col-5 {
  width: calc(
    5 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
      var(--col-gap-narrow) * (5 - 1)
  );
}
.columnWrap.hasGapNarrow .col-6 {
  width: calc(
    6 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
      var(--col-gap-narrow) * (6 - 1)
  );
}
.columnWrap.hasGapNarrow .col-7 {
  width: calc(
    7 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
      var(--col-gap-narrow) * (7 - 1)
  );
}
.columnWrap.hasGapNarrow .col-8 {
  width: calc(
    8 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
      var(--col-gap-narrow) * (8 - 1)
  );
}
.columnWrap.hasGapNarrow .col-9 {
  width: calc(
    9 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
      var(--col-gap-narrow) * (9 - 1)
  );
}
.columnWrap.hasGapNarrow .col-10 {
  width: calc(
    10 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
      var(--col-gap-narrow) * (10 - 1)
  );
}
.columnWrap.hasGapNarrow .col-11 {
  width: calc(
    11 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
      var(--col-gap-narrow) * (11 - 1)
  );
}
.columnWrap.hasGapNarrow .col-12 {
  width: calc(
    12 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
      var(--col-gap-narrow) * (12 - 1)
  );
}

@media (max-width: 767px) {
  .columnWrap.hasGapNarrow .col-sp-1 {
    width: calc(
      1 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
        var(--col-gap-narrow) * (1 - 1)
    );
  }
  .columnWrap.hasGapNarrow .col-sp-2 {
    width: calc(
      2 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
        var(--col-gap-narrow) * (2 - 1)
    );
  }
  .columnWrap.hasGapNarrow .col-sp-3 {
    width: calc(
      3 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
        var(--col-gap-narrow) * (3 - 1)
    );
  }
  .columnWrap.hasGapNarrow .col-sp-4 {
    width: calc(
      4 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
        var(--col-gap-narrow) * (4 - 1)
    );
  }
  .columnWrap.hasGapNarrow .col-sp-5 {
    width: calc(
      5 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
        var(--col-gap-narrow) * (5 - 1)
    );
  }
  .columnWrap.hasGapNarrow .col-sp-6 {
    width: calc(
      6 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
        var(--col-gap-narrow) * (6 - 1)
    );
  }
  .columnWrap.hasGapNarrow .col-sp-7 {
    width: calc(
      7 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
        var(--col-gap-narrow) * (7 - 1)
    );
  }
  .columnWrap.hasGapNarrow .col-sp-8 {
    width: calc(
      8 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
        var(--col-gap-narrow) * (8 - 1)
    );
  }
  .columnWrap.hasGapNarrow .col-sp-9 {
    width: calc(
      9 / var(--col-max) * (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
        var(--col-gap-narrow) * (9 - 1)
    );
  }
  .columnWrap.hasGapNarrow .col-sp-10 {
    width: calc(
      10 / var(--col-max) *
        (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
        var(--col-gap-narrow) * (10 - 1)
    );
  }
  .columnWrap.hasGapNarrow .col-sp-11 {
    width: calc(
      11 / var(--col-max) *
        (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
        var(--col-gap-narrow) * (11 - 1)
    );
  }
  .columnWrap.hasGapNarrow .col-sp-12 {
    width: calc(
      12 / var(--col-max) *
        (100% - var(--col-gap-narrow) * (var(--col-max) - 1)) +
        var(--col-gap-narrow) * (12 - 1)
    );
  }
}

/*
* form
* ----------------------------------
*/
/* listButton */
.listButton {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 20px;
  row-gap: 12px;
  text-align: center;
}
.listButton.layoutVertical {
  flex-direction: column;
}
@media (min-width: 768px) {
  .listButton.reverseHorizontalPc {
    flex-direction: row-reverse;
  }
}
.listButton .listButtonItem {
}
@media (max-width: 767px) {
  .listButton .listButtonItem:has(.linkBtn.widthFixed) {
    width: 100%;
  }
}
.listButton .linkBtn {
  height: 100%;
}
.listButton .listButtonItem:has(.linkBtn) {
  padding-inline: calc(30 / 16 * 1em);
}
.listButton .listButtonItem:has(.linkBtn.large) {
  font-size: clamp(2.4rem, calc(32 / 768 * 100cqw), 3.2rem);
  padding-inline: calc(38 / 32 * 1em);
}

/* labelRequired */
.labelRequired {
  display: inline-flex;
  padding-block: calc(4 / 10 * 1em);
  padding-inline: calc(8 / 10 * 1em);
  background-color: var(--color-accent);
  color: var(--color-text-bright);
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}
.labelRequired .text {
  line-height: 1.2;
  text-box: trim-both cap alphabetic;
}
@supports not (text-box: trim-both cap alphabetic) {
  .labelRequired .text {
    margin-block: calc((1em - 1lh) / 2);
  }
}

/* inputGroup */
.inputGroup {
  display: flex;
  overflow: hidden;
  border-radius: var(--border-radius-small);
  box-shadow: 0 0 0 1px var(--color-border-pale);
  background-color: var(--color-base-bright);
}
.inputGroup input[type="text"],
.inputGroup input[type="password"],
.inputGroup input[type="email"],
.inputGroup input[type="tel"] {
  border-radius: none;
  box-shadow: none;
}
.inputGroup .inputGroupText {
  display: grid;
  place-items: center;
  padding-inline: calc(12 / 16 * 1em);
  background-color: rgb(from var(--color-border-pale) r g b / 0.2);
}
.inputGroup .inputGroupText:not(:first-child) {
  border-inline-start: 1px solid var(--color-border-pale);
}
.inputGroup .inputGroupText:not(:last-child) {
  border-inline-end: 1px solid var(--color-border-pale);
}

/* boxFormFill */
.boxFormFill {
  padding-block: 32px;
  padding-inline: clamp(20px, calc(40 / 1024 * 100cqw), 40px);
  background-color: var(--color-base-pale);
}
@media (min-width: 768px) {
  /* .boxFormFill {
    border-radius: var(--border-radius-large);
  } */
}

.boxFormVertical .boxFormFill {
}
@media (max-width: 767px) {
  .boxFormVertical .boxFormFill {
    /* margin-inline: calc(50% - 50vw); */
    margin-inline: max(-40px, calc(-40 / 768 * 100cqw));
  }
}
@media (min-width: 768px) {
  .boxFormVertical .boxFormFill {
    margin-inline: max(-40px, calc(-40 / 1024 * 100cqw));
    /* border-radius: var(--border-radius-large); */
  }
}

/* boxToastMessage */
.boxToastMessage {
  padding-block: 32px;
  padding-inline: clamp(20px, calc(40 / 1024 * 100cqw), 40px);
  background-color: rgb(from var(--color-main) r g b / 0.2);
}
@media (min-width: 768px) {
  .boxToastMessage {
    border-radius: var(--border-radius-large);
  }
}

.boxFormVertical .boxToastMessage {
}
@media (max-width: 767px) {
  .boxFormVertical .boxToastMessage {
    margin-inline: calc(50% - 50vw);
  }
}
@media (min-width: 768px) {
  .boxFormVertical .boxToastMessage {
    margin-inline: max(-40px, calc(-40 / 1024 * 100cqw));
    border-radius: var(--border-radius-large);
  }
}

.boxToastMessage .boxToastMessageText {
  display: flex;
  align-items: center;
  column-gap: calc(8 / 16 * 1em);
  color: var(--color-main);
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: 700;
}
.boxToastMessage .boxToastMessageText [class*="icon-"] {
  flex-shrink: 0;
  width: calc(24 / 16 * 1em);
  height: calc(24 / 16 * 1em);
}

.boxToastMessage.has-error {
  background-color: rgb(from var(--color-error) r g b / 0.15);
  color: var(--color-error);
}
.boxToastMessage.has-error .boxToastMessageText {
  color: var(--color-error);
}

/* boxFormVertical */
.boxFormVertical {
  display: flex;
  flex-direction: column;
  row-gap: calc(32 / 16 * 1em);
  width: min(640px, 100%);
  margin-inline: auto;
  font-size: 1.6rem;
  line-height: 1.4;
}
.boxFormVertical.widthNarrow {
  width: min(480px, 100%);
  max-width: 480px;
}

.boxFormVertical .boxFormVerticalBody {
  display: flex;
  flex-direction: column;
  row-gap: calc(32 / 16 * 1em);
}

.boxFormVertical .boxFormVerticalLine {
  display: flex;
  flex-direction: column;
  row-gap: calc(10 / 16 * 1em);
}
.boxFormVertical .boxFormVerticalLabel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: calc(16 / 16 * 1em);
  row-gap: calc(8 / 16 * 1em);
  margin-bottom: 0.25em;
  font-weight: bold;
  font-size: clamp(1.4rem, calc(16 / 768 * 100cqw), 1.6rem);
}
.boxFormVertical .boxFormVerticalLabel label {
  font-weight: inherit;
  /* white-space: nowrap; */
}
.boxFormVertical .boxFormVerticalItem {
  display: flex;
  flex-direction: column;
  column-gap: calc(8 / 16 * 1em);
  row-gap: calc(8 / 16 * 1em);
  line-height: 1.4;
}
.boxFormVertical .boxFormVerticalNotice {
  font-size: 1.2rem;
  line-height: 1.4;
}
.boxFormVertical .boxFormVerticalError {
  display: flex;
  align-items: center;
  column-gap: calc(4 / 12 * 1em);
  color: var(--color-error);
  font-weight: 700;
  font-size: 1.2rem;
}

.boxFormVertical .boxFormVerticalFooter {
  display: flex;
  flex-direction: column;
  row-gap: calc(32 / 16 * 1em);
}
.boxFormVertical .boxFormVerticalFooter .listNotice {
  font-size: 1.4rem;
}

.boxFormVertical .boxFormVerticalFooter .listButton {
}
@media (max-width: 767px) {
  .boxFormVertical .boxFormVerticalFooter .listButton .listButtonItem {
    width: 100%;
  }
}
@media (min-width: 768px) {
  /* .boxFormVertical .boxFormVerticalFooter .listButton .listButtonItem {
    width: min(320px, 100%);
  } */
}

/* .boxFormVertical .boxFormVerticalFooter .listButton .listButtonItem .linkBtn {
  width: 100%;
} */

.boxFormVertical.is-confirm {
  row-gap: calc(24 / 16 * 1em);
}
.boxFormVertical.is-confirm .boxFormVerticalBody {
  row-gap: calc(24 / 16 * 1em);
}

.boxFormVertical.is-confirm .boxFormVerticalLine:not(:first-child) {
  padding-block-start: calc(24 / 16 * 1em);
  border-top: 1px solid var(--color-border-pale);
}
.boxFormVertical.is-confirm .boxFormVerticalLine.noBorder:not(:first-child) {
  border-top: none;
}

/*
* section rally
* ----------------------------------
*/
.sectionRally {
}
@media (max-width: 767px) {
}
@media (min-width: 768px) {
  .sectionRally + .sectionRally {
    margin-block-start: clamp(56px, calc(96 / 1440 * 100cqw), 96px);
  }
}

.sectionRally .sectionRallyTitle {
  background-image: linear-gradient(
      135deg,
      transparent 7px,
      var(--color-main-deep) 0
    ),
    var(--color-gradient);
  background-position: top left, top right;
  background-size: 10px 100%, calc(100% - 10px * 1) 100%;
  color: var(--color-text-bright);
}

.sectionRally .sectionRallyContent {
  padding-block: clamp(32px, calc(40 / 768 * 100cqw), 40px);
  padding-block-end: 40px;
  padding-inline: min(64px, calc(20 / 390 * 100cqw));
  background-image: linear-gradient(
    -45deg,
    transparent 7px,
    var(--color-base-bright) 0
  );
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--color-text);
}

/*
* pageTop
* ----------------------------------
*/

.pageTop {
  opacity: 0;
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 10;
  width: clamp(48px, calc(48 / 640 * 100cqw), 80px);
  height: clamp(48px, calc(48 / 640 * 100cqw), 80px);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.pageTop .is-appear {
  opacity: 1;
  pointer-events: auto;
}

.pageTop a.pageTopLink {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: calc(8 / 80 * 100%);
  container-type: inline-size;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-round);
  background-color: var(--color-main-deep);
  color: var(--color-text-bright);
}
.pageTop a.pageTopLink .icon-arrow {
  width: min(24px, calc(16 / 48 * 100cqw));
  height: min(24px, calc(16 / 48 * 100cqw));
}

.pageTop a.pageTopLink .text {
}
@media (max-width: 767px) {
  .pageTop a.pageTopLink .text {
    display: none;
  }
}
@media (min-width: 768px) {
  .pageTop a.pageTopLink .text {
    font-family: var(--sans-serif-en);
    font-weight: 700;
    font-size: clamp(1rem, calc(12 / 80 * 100cqw), 1.2rem);
    letter-spacing: 0.05em;
    line-height: 1.2;
  }
}

/** =2
 * ========================================
 * modules for javascript
 * ========================================
 */

/* accordion
 * ----------------------------------
 */
.js-accordion {
}
.js-accordion .js-accordionTrigger {
  cursor: pointer;
}
.js-accordion .js-accordionContent {
  overflow: clip;
}