@charset "UTF-8";
:root {
  --breakpoint-small-max: 767px;
  --breakpoint-medium-min: 768px;
  --breakpoint-medium-max: 960px;
  --breakpoint-large-min: 961px;
  --font-size-alpha: clamp(1.625rem, -0.143rem + 3.857vi, 3rem);
  --font-size-bata: clamp(1.438rem, 1rem + 1vi, 2rem);
  --font-size-gamma: clamp(1.25rem, 0.982rem + 0.857vi, 1.625rem);
  --font-size-default: clamp(1rem, 0.821rem + 0.571vi, 1.25rem);
  --font-size-small: clamp(0.875rem, 0.786rem + 0.286vi, 1rem);
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-heavy: 900;
  --line-height-default: 1.875;
  --line-height-small: 1.25;
  --line-height-medium: 1.429;
  --line-height-large: 2;
  --z-index-below: -1;
  --z-index-root: 0;
  --z-index-default: 1;
  --z-index-above: 2;
  --z-index-menu: 3;
  --z-index-modal: 4;
  --z-index-dialog: 5;
  --z-index-notificaton: 6;
  --color-default: #6f6f6f;
  --color-title: black;
  --color-error: rgb(224, 12, 12);
  --color-success: rgb(33, 33, 217);
  --color-placeholder: rgb(233, 233, 233);
  --color-message: rgb(28, 24, 63);
  --color-red: rgb(224, 12, 12);
  --color-blue: rgb(33, 33, 217);
  --color-green: rgb(72, 205, 42);
  --color-white: rgb(255, 255, 255);
  --color-black: rgb(0,0,0);
  --color-background-success: rgb(232, 240, 254);
  --color-background-error: #f2e9e9;
  --color-background-default: #fff;
  --color-background-alpha: #efefef;
  --color-background-beta: #dfdfdf;
  --color-background-gamma: #cfcfcf;
  --color-border-default: #ccc;
  --input-width-default: 100%;
  --input-width-small: 120px;
  --input-width-small-select: 106px;
  --input-width-middle: 284px;
  --input-width-wide: 480px;
  --input-width-half: 191px;
}

/*
alpha
beta
gamma
delta
epsilon
zehta
eta
theta
iota
kappa
lambda
mu
nu
xi
omicron
*/
* {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

html, body {
  font-size: var(--font-size-default);
  color: var(--color-default);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-title);
}

ul.checked {
  position: relative;
}
ul.checked li::after {
  content: "";
  display: block;
  position: absolute;
  top: 0.3em;
  left: -1.6em;
  width: 16px;
  height: 8px;
  border-left: 3px solid #25AF01;
  border-bottom: 3px solid #25AF01;
  transform: rotate(-45deg);
}

.hidden {
  display: none;
}

.block {
  display: block;
}

form {
  margin-bottom: 100px;
}

::-moz-placeholder {
  color: var(--color-placeholder);
}

::placeholder {
  color: var(--color-placeholder);
}

fieldset {
  padding: 20px 10px 20px;
  background-color: var(--color-background-default);
  border: 1px solid var(--color-background-beta);
  border-radius: 8px;
  position: relative;
}
fieldset legend {
  position: absolute;
  top: 5px;
  left: 10px;
  font-size: min(5.2vw, 1.8rem);
  color: var(--color-title);
}
fieldset .field {
  transition: opacity 0.2s;
  margin-bottom: 20px;
}
fieldset .field label {
  display: block;
}
fieldset .field label span {
  color: var(--color-red);
}
fieldset .field label span.required {
  color: var(--color-red);
  font-size: 0.55rem;
  font-weight: 700;
  margin-left: 0.4rem;
  vertical-align: 20%;
  border: 1px solid var(--color-red);
  border-radius: 3px;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}
fieldset .field label span.voluntarily {
  color: var(--color-green);
  font-size: 0.55rem;
  font-weight: 700;
  margin-left: 0.4rem;
  vertical-align: 20%;
  border: 1px solid var(--color-green);
  border-radius: 3px;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}
fieldset .field label span.--left {
  margin-left: 1px;
  margin-right: 0.3rem;
}
fieldset .field label span.--kome {
  font-size: 0.8rem;
  vertical-align: 6%;
  margin-right: -0.4rem;
  border: none;
}
fieldset .field .field_wrap {
  display: flex;
  gap: 30px;
}
fieldset.confirm .field {
  border-bottom: 1px solid var(--color-border-default);
  padding-left: 20px;
  color: var(--color-black);
}
fieldset.confirm .field label {
  font-size: small;
  color: var(--color-default);
  margin-left: -15px;
  margin-bottom: 8px;
}
fieldset.confirm .field label::before {
  content: "■";
  margin-right: 2px;
}
fieldset .message {
  color: var(--color-message);
  margin-bottom: 20px;
  margin-left: 8px;
}

input[type=text],
input[type=date],
input[type=email],
input[type=tel],
input[type=zip],
input[type=time],
input[type=number],
textarea,
select {
  line-height: 1.4;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  font-size: 18px;
  color: var(--color-default);
  width: 100%;
}
input[type=text].parsley-error,
input[type=date].parsley-error,
input[type=email].parsley-error,
input[type=tel].parsley-error,
input[type=zip].parsley-error,
input[type=time].parsley-error,
input[type=number].parsley-error,
textarea.parsley-error,
select.parsley-error {
  background-color: var(--color-background-error);
}
input[type=text].parsley-error::-moz-placeholder, input[type=date].parsley-error::-moz-placeholder, input[type=email].parsley-error::-moz-placeholder, input[type=tel].parsley-error::-moz-placeholder, input[type=zip].parsley-error::-moz-placeholder, input[type=time].parsley-error::-moz-placeholder, input[type=number].parsley-error::-moz-placeholder, textarea.parsley-error::-moz-placeholder, select.parsley-error::-moz-placeholder {
  color: var(--color-white);
}
input[type=text].parsley-error::placeholder,
input[type=date].parsley-error::placeholder,
input[type=email].parsley-error::placeholder,
input[type=tel].parsley-error::placeholder,
input[type=zip].parsley-error::placeholder,
input[type=time].parsley-error::placeholder,
input[type=number].parsley-error::placeholder,
textarea.parsley-error::placeholder,
select.parsley-error::placeholder {
  color: var(--color-white);
}
input[type=text].parsley-success,
input[type=date].parsley-success,
input[type=email].parsley-success,
input[type=tel].parsley-success,
input[type=zip].parsley-success,
input[type=time].parsley-success,
input[type=number].parsley-success,
textarea.parsley-success,
select.parsley-success {
  background-color: var(--color-background-success);
}
input[type=text].--center,
input[type=date].--center,
input[type=email].--center,
input[type=tel].--center,
input[type=zip].--center,
input[type=time].--center,
input[type=number].--center,
textarea.--center,
select.--center {
  text-align: center;
}
input[type=text].--right,
input[type=date].--right,
input[type=email].--right,
input[type=tel].--right,
input[type=zip].--right,
input[type=time].--right,
input[type=number].--right,
textarea.--right,
select.--right {
  text-align: right;
}
input[type=text].--left,
input[type=date].--left,
input[type=email].--left,
input[type=tel].--left,
input[type=zip].--left,
input[type=time].--left,
input[type=number].--left,
textarea.--left,
select.--left {
  text-align: left;
}
input[type=text].--small,
input[type=date].--small,
input[type=email].--small,
input[type=tel].--small,
input[type=zip].--small,
input[type=time].--small,
input[type=number].--small,
textarea.--small,
select.--small {
  width: 100%;
  max-width: var(--input-width-small);
}
input[type=text].--small.--select,
input[type=date].--small.--select,
input[type=email].--small.--select,
input[type=tel].--small.--select,
input[type=zip].--small.--select,
input[type=time].--small.--select,
input[type=number].--small.--select,
textarea.--small.--select,
select.--small.--select {
  max-width: var(--input-width-small-select);
}
input[type=text].--middle,
input[type=date].--middle,
input[type=email].--middle,
input[type=tel].--middle,
input[type=zip].--middle,
input[type=time].--middle,
input[type=number].--middle,
textarea.--middle,
select.--middle {
  width: 100%;
  max-width: var(--input-width-middle);
}
input[type=text].--wide,
input[type=date].--wide,
input[type=email].--wide,
input[type=tel].--wide,
input[type=zip].--wide,
input[type=time].--wide,
input[type=number].--wide,
textarea.--wide,
select.--wide {
  width: 100%;
  max-width: var(--input-width-wide);
}
input[type=text].--half,
input[type=date].--half,
input[type=email].--half,
input[type=tel].--half,
input[type=zip].--half,
input[type=time].--half,
input[type=number].--half,
textarea.--half,
select.--half {
  width: 50%;
  max-width: var(--input-width-half);
}

input[type=date],
input[type=time],
input[type=number] {
  display: inline-block;
  margin: 0;
  max-width: var(--input-width-mini);
}

button {
  padding: 0.8rem;
  min-width: 300px;
  margin: 30px auto 0;
  display: inline-block;
  border: 1px solid var(--color-default);
  border-radius: 8px;
}
button.submit {
  background-color: var(--color-background-alpha);
  border: 1px solid var(--color-background-beta);
}

.error {
  font-weight: 100;
  color: var(--color-red);
}

.required {
  color: var(--color-red);
  font-size: 0.55rem;
  font-weight: 700;
  margin-left: 0.4rem;
  vertical-align: 7%;
  border: 1px solid var(--color-red);
  border-radius: 3px;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}
.required.--left {
  margin-left: -1px;
  margin-right: 3px;
}
.required.--kome {
  font-size: 0.8rem;
  vertical-align: 6%;
  margin-right: -0.4rem;
  border: none;
}

label {
  display: block;
}
label.noBlock {
  display: inline-block;
}
label input {
  height: auto;
}

.numeric {
  text-align: right;
}

#dialog {
  display: none;
}

.ui-widget {
  width: 90% !important;
  max-width: 600px;
}
.ui-widget .ui-dialog-titlebar-close {
  width: 20px !important;
}
.ui-widget .ui-widget-content {
  color: var(--color-red);
  min-height: 0 !important;
  text-align: center;
}

.kome {
  margin-left: 1.4rem;
  text-indent: -1.4rem;
  display: inline-block;
  position: relative;
}
.kome::before {
  content: "※";
  color: var(--color-red);
  font-size: 0.8rem;
  font-weight: 700;
  position: absolute;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.center {
  text-align: center;
  margin: 0 auto;
}

.selectblock {
  display: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  margin-top: 20px;
}

.show {
  display: block;
}

.error, .red {
  color: red;
}

.hidden {
  display: none;
}

.kome {
  font-size: 0.8em;
  margin-left: 1.2em;
}
.kome::before {
  content: "※";
  color: red;
  margin-left: -1.2em;
  margin-right: 0.2em;
}

.mt {
  margin-top: 1rem;
}
.mt.--12 {
  margin-top: 1.2rem;
}

.ml {
  margin-left: 1rem;
}
.ml.--12 {
  margin-left: 1.2rem;
}

.button {
  background-color: #73fcdc;
  width: 100px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
  padding: 0.3rem;
}

form {
  margin-bottom: 100px;
}

/** 装飾 **/
h2 {
  font-size: 1.8em;
  color: #029cd0;
  margin-top: 30px;
}

h4 {
  font-size: 1.3em;
  width: auto;
  background: #ddd;
  color: #FF4F02;
  padding: 0.5em;
  margin-top: 2em;
  margin-bottom: 1rem;
}
h4.first {
  margin-top: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.form .inner {
  padding-left: 1rem;
  padding-right: 1rem;
}
.form .inner > div {
  margin-top: 1rem;
}

label.--zero {
  margin-top: 0;
}

input[type=text],
input[type=date],
input[type=mail],
input[type=tel],
input[type=zip],
input[type=time],
input[type=number],
select {
  line-height: 1.4rem;
  width: 95%;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 18px;
  width: 100%;
  color: #333;
}
input[type=text].--pico,
input[type=date].--pico,
input[type=mail].--pico,
input[type=tel].--pico,
input[type=zip].--pico,
input[type=time].--pico,
input[type=number].--pico,
select.--pico {
  display: inline-block;
  margin: 0;
  max-width: 100px;
}
input[type=text].--mini,
input[type=date].--mini,
input[type=mail].--mini,
input[type=tel].--mini,
input[type=zip].--mini,
input[type=time].--mini,
input[type=number].--mini,
select.--mini {
  display: inline-block;
  margin: 0;
  max-width: 200px;
}

input[type=date],
input[type=time],
input[type=number] {
  display: inline-block;
  margin: 0;
  max-width: 200px;
}

#age {
  margin-left: 1rem;
}

radio {
  display: inline-block;
}

ul.check {
  list-style-type: none;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  position: relative;
}
ul.check li {
  position: relative;
  padding: 0em 0.3em 0.8em 1.5em;
  line-height: 1.8;
  list-style-type: none;
}
ul.check li::before {
  position: absolute;
  content: "";
  display: block;
  top: 0.5em;
  left: 0.2em;
  width: 4px;
  height: 8px;
  color: #ffb03f;
  background: #FFC107;
  border-radius: 10px;
  transform: rotate(-45deg);
}
ul.check li::after {
  position: absolute;
  content: "";
  display: block;
  top: 0.4em;
  left: 0.5em;
  width: 4px;
  height: 11px;
  background: #FFC107;
  border-radius: 10px;
  transform: rotate(45deg);
}

fieldset {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
  background-color: var(--color-background-alpha) !important;
}
fieldset .field label {
  margin-bottom: 3px;
}
fieldset .field ul {
  width: 100% !important;
}
fieldset .field ul li {
  background-image: none !important;
  padding-left: 0 !important;
}
fieldset.last {
  margin-bottom: 0;
}

#formarea {
  margin-top: 30px;
}

form {
  margin-bottom: 0;
}

h2.area {
  color: white;
  background-color: #348AC2;
  width: 100%;
  margin: 0 auto 10px;
  padding-left: 10px;
}

button {
  margin: 10px 10px 0;
  min-width: 250px;
}

div.grid {
  overflow: auto; /* for stiky */
}

.progressbar {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}
.progressbar > div {
  text-align: center;
  flex: 1;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #F5F5F5;
  color: #999999;
  font-size: 11px;
  line-height: 1.4;
  padding: 10px 0;
}
.progressbar > div:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.progressbar > div:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.progressbar > div:not(:last-child)::before, .progressbar > div:not(:last-child)::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 100%;
  content: "";
  /**border: 37px solid transparent;**/
  border: 28px solid transparent;
  border-left: 10px solid #F5F5F5;
  margin: auto;
  /**border-width: 25px;**/
  border-width: 18px;
  border-left-width: 12px;
}
.progressbar > div:not(:last-child)::before {
  margin-left: 1px;
  border-left-color: #FFF;
}
.progressbar > div.active {
  z-index: 1;
  background: #569A43; /*#4E89BE;*/
  color: #FFF;
}
.progressbar > div.active:not(:last-child)::after {
  border-left-color: #569A43; /*#4E89BE;*/
}
.progressbar > div.active:not(:last-child)::before {
  border-left: none;
}/*# sourceMappingURL=style.css.map */