@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Zen+Kaku+Gothic+New&display=swap');

:root {
	--primary-color: #36367A;
	--font-color: #1d1d1d;
	--blue:#5099bc;
	--light-blue:#d4eef4;
	--dark-blue:#1b709a;
	--yellow:#f6c445;
	--light-yellow:#FFF9DF;
	--dark-yellow:#BF970B;
	--orange:#e6855e;
	--light-orange:#FFE9E1;
	--dark-orange:#C5613A;
	--green:#82c79d;
	--light-green:#dcf6ec;
	--dark-green:#3F9B62;
	--light-gray:#eeeeee;
	--gray:#B1AEAE;
	--red:#c93045;
	--light-red:#FFDFE7;
	--fs-h1:47px;
	--fs-h2:37px;
	--fs-title:32px;
	--fs-logotype:27px;
	--fs-h3:24px;
	--fs-h4:21px;
	--fs-main:17px;
	--fs-small:14px;
	--fs-smallest:12px;
}

@media (max-width: 575px) {
	:root {
		--fs-h1:40px;
		--fs-h2:29px;
		--fs-title:24px;
		--fs-h3:20px;
		--fs-h4:18px;
		--fs-main:16px;
		--fs-small:14px;
		--fs-smallest:12px;
	}
}

body {

  color: var(--font-color);
  font-size: var(--fs-main);
  line-height: 1.75;
  font-family:"League Spartan","Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-weight: 600;
}

a {
  color: #a59aca;
}

.container {
  max-width: 100%;
  border: 0;
}

.help-block {
  font-size: 0.75em;
}

.form-column {
}

input,
button,
textarea,
select {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: 1em;
}

input[type="radio"] {
  border-radius: 40px;
  border: 1px solid #cccccc;
}

input[type="date"] {
  border: 1px solid #6a767d;
}

.form-column-heading h2 {
  font-size: 1.5em;
  margin: 0;
  font-weight: bold;
}

label h3 {
  font-size: 1em;
  display: inline-block;
  margin: 0 0 0.5em;
  font-weight: bold;
}

.description-block {
  color: #151514;
  margin-top: 0.5em;
}

.button-group {
  margin-top: 1em;
}

.button-group .help-block {
  margin-top: 0.5em;
  font-size: 0.75em;
}

button {
  display: inline-block;
  padding: 0.5em 1em;
  text-align: center;
  cursor: pointer;
  border: 1px solid #6a767d;
  border-radius: 4px;
  margin: 0 0.5em 0 0;
  background-color: #fff;
}

button.button-submit {
  background-color: #666666;
  border: 1px solid #666666;
  color: #fff;
}

button.button-submit span.fa {
  margin-right: 4px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea {
  height: 1.75em;
  width: 60%;
  min-width: 500px;
  max-width: 100%;
  line-height: 1.75em;
  padding: 2px 4px;
  border: 1px solid #6a767d;
  transition: all 0.3s;
}

textarea {
  width: 100%;
  height: 10em;
}

input[type="file"] {
  display: block;
  line-height: 1.75;
}

input[type="password"] {
  height: 1.75em;
  width: 100%;
  border: 1px solid #6a767d;
  transition: all 0.3s;
}

input[readonly],
textarea[readonly] {
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.form-column-date .input-group select {
  width: auto;
  display: inline-block;
}

.form-column-calendar input {
  width: auto;
}

.form-column-zip-code-jp .input-group input {
  width: auto;
  min-width: auto;
  display: inline-block;
}

.form-column-zip-code-autofill.form-column {
  border-bottom: 0;
  margin-bottom: 0;
}

.form-column-checkbox label,
.form-column-radio label {
  margin-right: 1em;
}

select {
  width: auto;
  height: 1.75em;
  display: block;
  border: 1px solid #6a767d;
}

.message-block-complete,
.message-block-closed {
  padding: 20px;
  text-align: center;
}

@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  textarea {
    width: 100%;
    min-width: 100%;
  }
  select {
    width: 100%;
  }
  .form-column-calendar input {
    width: auto;
    min-width: auto;
  }
  .form-column-heading h2 {
    font-size: 1.25em;
  }
}

#other-contact form{
	width: 100%;
	font-size: var(--fs-main);
	margin: 3rem auto;
}

/* フォーム全体の設定 */
form {
    max-width: 80%;
    margin: 0 auto;
}

form fieldset {
    border: none;
    padding: 0;
    margin: 1rem 0;
}

/* ラジオボタンのグループ */
form legend {
    font-weight: bold;
    margin-bottom: 0.5em;
    display: block;
}

form label {
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
    cursor: pointer;
    font-weight: 700;
}

form label input[type="radio"] {
    margin-right: 0.5em;
    accent-color: #007BFF; /* ラジオボタンの色 */
}

/* 必須アイコンのスタイル */
.badge-required ,legend .badge-required{
    display: inline-block;
    background-color: var(--red);
    color: #fff;
    font-size: var(--fs-smallest);
    font-weight: bold;
    border-radius: 3px;
    padding: 4px 6px 0px;
    margin-left:1rem;
    transform: translateY(-2px);
}

 legend .badge-required{
    display: inline-block;
    background-color: var(--red);
    color: #fff;
    font-size: var(--fs-smallest);
    font-weight: bold;
    border-radius: 3px;
    padding: 9px 6px 4px;
    margin-left:1rem;
}

/* 各入力フィールド */
input{
	font-family: "League Spartan","Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-size: var(--fs-main);
}

input[type="text"], input[type="email"], textarea {
    width: 100%;
    padding: 2.0rem 1.5rem 2.0rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="tel"]{
    padding: 2.0rem 1.5rem 2.0rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* テキストエリア */
textarea {
    height: 20rem;
    resize: vertical;
    font-size: var(--fs-main);
    font-family: "League Spartan","Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

/* 送信ボタン */
button[type="submit"] {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 1rem 1.5rem 0.5rem ;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--fs-main);
    margin-top: 3rem;
}

fieldset label{
	font-weight: 500;
}

button[type="submit"]:hover {
    background-color: #0056b3;
}


@media (max-width: 640px){
    form {
    max-width:100%;
}

.form-column{
padding-bottom:0;
}
}

legend.label{
    padding:0;
}

.description-block p{
    margin-top:1.5rem;
}

.form-page > div:not(:has(p)) + div{
    margin-top:5rem;
}

.form-column-tel,.form-column-email,div + .form-column-text{
    margin-top:0rem!important;
}