@charset "utf-8";
/* CSS Document */

.form_wrap {
	background: transparent;		/* 背景なし（PC用） */
	padding: 0 10px;
	border-radius: 0;
	box-shadow: none;			/* シャドウ削除 */
	width:96%;
	max-width: 900px;
	margin: 0 auto;
}

.form_wrap h2 {
	font-size: 20px;
	font-weight: normal;
	color: #2c3e50;
	border-left: #2c3e50 10px solid;
	padding-left: 10px;
}

.form_wrap p.exp {
	margin: 25px 0px 20px;
	color: #000;
	font-size: 0.9rem;
}

.area-wrapper {
  position: relative;
  max-width: 840px;
  margin: 40px auto 20px auto;
}

.area-label {
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 2px 14px 2px 14px;
  border: 1px solid #D4A643;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.1em;
  color: #D4A643;
  z-index: 2;
}

.area-block {
  border: 1px solid #D4A643;
  border-radius: 12px;
  padding: 24px 10px 16px 10px;
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.03);
  position: relative;
  z-index: 1;
  text-align: center;
}

@media screen and (max-width: 768px) {

	.area-wrapper {
	  position: relative;
	  max-width: 96%;
	  margin: 40px auto 20px auto;
	}

}


.input-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 95%;
	max-width: 1200px;
	margin-top: 30px;
	margin-bottom: 16px;
}

/* 新たに横並びにしたいフォーム部品を囲むラッパー */
.input-row {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: center;	/* ← ここが中央揃えのポイント */
	width: 100%;
	flex-wrap: wrap;
}

.input-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.unit {
	font-size: 16px;
	color: #333;
	white-space: nowrap;
}

.label-wrapper {
	display: flex;
	align-items: center; /* 縦方向中央揃え */
	gap: 8px; /* バッジとラベルの間隔 */
	margin-bottom: 6px;
	width: 100%; /* デフォルトは100%（モバイル用） */
}

.label-wrapper.field {
	text-align:center;
	color: #666;
	padding:8px;
	border-bottom:1px #666 dotted;
	/* color: #E8C57C; */
	}

.label-badge {
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	padding: 4px 8px;
	border-radius: 4px;
	white-space: nowrap; /* 改行されないように */
}

.required {
	background-color: #e74c3c; /* 赤 */
}

.optional {
	background-color: #3498db; /* 青 */
}

.autoinput {
	background-color: #9706B7; /* 紫 */
}

.select {
	background-color: #2ecc71; /* 緑 */
}

.input-container label {
	font-size: 14px;
	font-weight: bold;
	display: flex;
	align-items: center;
}

.input-container input,
.input-container select,
.input-container textarea {
	width: 100%;
	padding: 10px;
	font-size: 16px;
	color: #333;
	border: 2px solid #ccc;
	border-radius: 6px;
	outline: none;
	transition: border-color 0.3s ease-in-out;
	line-height: 1.3rem;
}

.input-container textarea {
	height: 100px; /* テキストエリアの高さを調整 */
	resize: vertical;
}

.input-container input:focus,
.input-container textarea:focus {
	border-color: #007bff;
}

/* inputとtextareaのプレースホルダーに共通適用 */
input::placeholder,
textarea::placeholder {
	color: #999;
	font-size: 14px;
	font-style: italic;
	opacity: 1; /* ブラウザによってはデフォルトが薄すぎる場合がある */
}

label {
	font-size: 14px;
	font-weight: bold;
	color: #666;
	display: flex;
	align-items: center;
}

input,
select,
textarea {
	width: 100%;
	padding: 10px;
	font-size: 16px;
	color: #333;
	border: 2px solid #ccc;
	border-radius: 6px;
	outline: none;
	transition: border-color 0.3s ease-in-out;
	line-height: 1.3rem;
}

textarea {
	height: 100px;
	resize: vertical;
}

input:focus,
textarea:focus {
	border-color: #007bff;
}

/* ▼▼▼ ここからPC版の横並びレイアウト対応 ▼▼▼ */
@media screen and (min-width: 768px) {
	.input-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 12px;
		width: 100%;
		flex-wrap: nowrap;
	}

	.label-wrapper {
	width: 30%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 5px;
	text-align: left;
	}

	.radio-group {
		width: 800px;
	}
}
/* ▲▲▲ ここまでPC対応 ▲▲▲ */


/* 備考テキストのスタイル */
.note {
	font-size: 12px;
	color: #666;
	margin-top: 4px;
	margin-bottom: 0px;
	padding-left: 2px;
}
/* input と単位を横並びにする */
.input-group {
	display: flex;
	align-items: center;

	gap: 8px; /* 入力欄と単位の間隔 */
}

.input-group input {
	flex: 1; /* 入力フィールドを可変幅に */
	padding: 10px;
	font-size: 16px;
	color: #333;
	border: 2px solid #ccc;
	border-radius: 6px;
	outline: none;
	transition: border-color 0.3s ease-in-out;
}

.input-group input:focus {
	border-color: #007bff;
}

/* 単位のスタイル */
.unit {
	font-size: 16px;
	color: #333;
	white-space: nowrap; /* 改行防止 */
}
.confirm-view {
	border: none !important; /* 確実に枠を消す */
	background: transparent !important; /* 背景を透明に */
	padding: 0;
	font-size: 16px;
	color: #333;
	pointer-events: none; /* 編集不可にする */
}

/* 確認時に表示するテキスト */
.confirm-text {
	white-space: pre-line; /* textarea の改行を適用 */
	padding: 10px;
	font-size: 16px;
	color: #333;
	background: transparent; /* 確認時の背景を透明に */
	border: none; /* 確認用テキストの枠も消す */
	display: none; /* 初期状態では非表示 */
	text-align: left; /* テキストを左寄せに */
}

input[readonly] {
	background-color: #fff !important;
	color: #000;
	cursor: default;
}

input[readonly].error {
	background-color: #ffeaea !important;
}


/*
.button_area {
	position: fixed;
	bottom: 10px;
	right: 20px;
	z-index: 1000;
}
*/

.button_area {
	margin: 30px auto 50px auto;
}

button {
	font-size: 16px;
	padding: 12px 20px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-block;
	width: auto;
	text-align: center;
	margin: 20px auto 10px auto;
	display: block;
}

/* 記入内容を確認 (青系) */
#confirmBtn {
	background: linear-gradient(135deg, #2ecc71, #27ae60);
	color: white;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

#confirmBtn:hover {
	background: linear-gradient(135deg, #1c6dd0, #1558a0);
}

/* 送信ボタン (緑系) */
#submitBtn {
	background: linear-gradient(135deg, #3a8dde, #1c6dd0);
	color: white;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

#submitBtn:hover {
	background: linear-gradient(135deg, #27ae60, #1e8449);
}

/* 戻るボタン (赤系) */
#editBtn {
	background: linear-gradient(135deg, #e74c3c, #c0392b);
	color: white;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

#editBtn:hover {
	background: linear-gradient(135deg, #c0392b, #962d22);
}

.contact-line {
	width: 100%;
	margin-bottom: 20px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	color: white;
	background: linear-gradient(45deg, #00c300, #007700);
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.blue {
	background: linear-gradient(45deg, #007bff, #0056b3);
}


.birthdate-group {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	width: 100%;
}

.birthdate-group select {
	padding: 10px;
	font-size: 16px;
	line-height: 1.4;
	height: 44px;
	border: 2px solid #ccc;
	border-radius: 6px;
	outline: none;
	transition: border-color 0.3s ease-in-out;
	flex: 1;
	min-width: 80px;
	color: #333;
	background-color: white;
	appearance: none; /* ブラウザのデフォルトスタイルをリセット（必要に応じて） */
}

.birthdate-group select:focus {
	border-color: #007bff;
}

.separator {
	align-self: center;
	font-size: 16px;
	color: #333;
}

.confirm-text {
	font-size: 16px;
	color: #333;
	padding: 10px 0;
}
.error {
	border: 2px solid red !important;
	background-color: #ffecec !important;
}

/* ------------------------------
セクション
-------------------------------*/

.section-title {
	width: 100%;
	border-top: 3px solid #2c3e50;
	position: relative;
	margin: 40px 0;
}

.section-title span {
	position: absolute;
	left: 30px;
	top: -0.7em;
	background: #fff; /* 親の背景色に合わせる */
	padding: 0 1em;
	font-size: 1.1em;
	color: #2c3e50;
}

/* ------------------------------
toggleボタン (iPhone風) - 小型バージョン
-------------------------------*/

.toggle-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 1rem;
	line-height: 1;
}

.toggle-label-text {
	font-weight: bold;
	font-size: 0.95rem;
	min-width: 40px;
}

.toggle-switch {
	position: relative;
	display: inline-block;
	width: 48px;		/* 小型化 */
	height: 26px;		/* 小型化 */
	vertical-align: middle;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider-toggle {
	position: absolute;
	cursor: pointer;
	top: 0; left: 0;
	right: 0; bottom: 0;
	background-color: #ccc;
	transition: 0.4s;
	border-radius: 26px;
	display: block;
}

.slider-toggle::before {
	position: absolute;
	content: "";
	height: 18px;		/* 小型化 */
	width: 18px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: 0.4s;
	border-radius: 50%;
	display: block;
}

.toggle-switch input:checked + .slider-toggle {
	background-color: #f9e79f;
}

.toggle-switch input:checked + .slider-toggle::before {
	transform: translateX(20px);	/* 距離調整 */
}

/* ------------------------------
3つ以上の選択があるradio
-------------------------------*/

.radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.radio-group.big {
	justify-content: center; /* ← 中央寄せにする */
}

.radio-group input[type="radio"],
.radio-group input[type="checkbox"] {
	display: none;
}

.radio-group label {
	padding: 6px 12px;
	border: 1.5px solid #eee;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 13px;
	user-select: none;
	background-color: #fff;
	color: #666;
	text-align: center;
}

/* 選択時のスタイル */
.radio-group input[type="radio"]:checked + label,
.radio-group input[type="checkbox"]:checked + label {
	background-color: #D4A643;
	color: #fff;
}

/* スマホでは2列100%で均等に分割 */
@media screen and (max-width: 768px) {

	.radio-group {
		display: grid;
		grid-template-columns: 1fr 1fr; /* ← 50%ずつ */
		gap: 8px;
		width: 100%;
	}

	.radio-group label {
		width: 100%; /* ← gridが制御するので自動的に50%になる */
		box-sizing: border-box;
		font-size:13px;
	}
}

a.pref-link {
	display: inline-block;
	margin: 3px 0px;
	padding: 6px 12px;
	border: 1.5px solid #eee;
	border-radius: 6px;
	font-size: 15px;
	color: #666;
	font-weight: bold;
	background-color: #fff;
	text-decoration: none;
	transition: all 0.2s ease;
	user-select: none;
	cursor: pointer;
	text-align: center;
}

a.pref-link.mini{
	padding: 3px 6px;
	border: 1.5px solid #eee;
	border-radius: 6px;
	font-size: 15px;
	margin: 3px 1px;
	}

.pref-link-mini-wrap{
	margin: 0px auto 0px auto;
	width:94%;
	}

/* ホバー時 */
a.pref-link:hover {
	background-color: #D4A643;
	color: #fff;
}

/* 選択中（手動で class="pref-link selected-pref" を追加） */
a.pref-link.selected-pref {
	background-color: #D4A643;
	color: #fff;
	border-color: #D4A643;
}

@media screen and (max-width: 768px) {
	a.pref-link {
		font-size:13px;
	}
}
/* ------------------------------
フォームボタン
-------------------------------*/

.button-row {
	display: flex;
	flex-wrap: wrap; /* 折り返し可にする場合 */
	gap: 1px;		/* ボタン間のスペース */
	justify-content: flex-start; /* 左寄せ。他に center / space-between も可 */
	margin-top: 5px;
	width:98%;
	max-width:800px;
}

.search-button {
	background-color: #E8C57C;
	color: #fff;
	border: none;
	padding: 20px 40px;
	font-size: 1.4rem;
	font-weight: bold;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: 0 4px 0 #E8C57C;
	transition: all 0.2s ease;
	width:40%;
	box-sizing: border-box;
}

@media screen and (max-width: 768px) {
	.search-button {
		width:90%;
	}
}

.search-button:hover {
	background-color: #E8C57C;
	box-shadow: 0 2px 0 #ffecd7;
	transform: translateY(2px);
}

.search-button:active {
	transform: translateY(4px);
	box-shadow: none;
}

/* 緑 */
.search-button.green {
	background-color: #7BAE4F;
	box-shadow: 0 4px 0 #1b5e20;
}
.search-button.green:hover {
	background-color: #7BAE4F;
	box-shadow: 0 2px 0 #1b5e20;
}
.search-button.green:active {
	transform: translateY(4px);
	box-shadow: none;
}

/* ネイビー */
.search-button.navy {
	background-color: #3C4256;
	box-shadow: 0 4px 0 #2c2f3d;
}
.search-button.navy:hover {
	background-color: #4a5067;
	box-shadow: 0 2px 0 #2c2f3d;
}
.search-button.navy:active {
	transform: translateY(4px);
	box-shadow: none;
}

/* LINE風グリーン */
.search-button.line {
	background-color: #00c300;
	box-shadow: 0 4px 0 #009900;
}
.search-button.line:hover {
	background-color: #00d000;
	box-shadow: 0 2px 0 #009900;
}
.search-button.line:active {
	transform: translateY(4px);
	box-shadow: none;
}

/* オレンジ系 */
.search-button.orange {
	background-color: #f57c00;
	box-shadow: 0 4px 0 #e65100;
}
.search-button.orange:hover {
	background-color: #fb8c00;
	box-shadow: 0 2px 0 #e65100;
}
.search-button.orange:active {
	transform: translateY(4px);
	box-shadow: none;
}


div.search-summary {
	width: 94%;
	margin: 15px auto 0px auto;
	max-width: 880px;
	text-align: left;
	display: block; /* ← 明示的にブロックに */
}

.search-label {
	display: inline-block;
	padding: 5px 12px 3px 12px;
	margin: 10px 6px 6px 0;
	background-color: #4A5067; /* 背景：黒 */
	color: #fff;			/* 文字色：薄いグレー */
	border-radius: 20px;
	font-size: 0.85rem;
	box-shadow: 0 1px 2px rgba(0,0,0,0.08);
	line-height: 1.3;
	white-space: nowrap;
}

.search-label.count{
	background: #C3080B;
	color:#fff;
	font-size:1.2rem;
	}

.search-tag {
	display: inline-block;
	padding: 5px 12px 3px 12px;
	margin: 4px 2px 4px 0;
	background-color: #ECEEF5; /* #4A5067 に合わせた薄グレー系 */
	color: #4A5067;
	border-radius: 20px;
	font-size: 0.85rem;
	box-shadow: 0 1px 2px rgba(0,0,0,0.08); /* うっすら影で立体感 */
	line-height: 1.3;
	white-space: nowrap;
}

/* ------------------------------------------

サロン個別ページ コンテンツリンク

------------------------------------------- */

.btns_wrapper {
  width: 95%;
  max-width: 1000px;
  margin: 20px auto 10px auto;
  display: flex;
  gap: 10px;
  justify-content: center;
  font-family: 'Kosugi Maru', 'Noto Sans JP', sans-serif;
}

/* 共通ボタンスタイル */
.btns_wrapper .btns {
  flex: 1;
  max-width: 33%;
  padding: 12px 0;
  text-align: center;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  border-radius: 6px 6px 0 0;
  border: 1px solid #ccc;
  border-bottom: none;
  position: relative;
}

/* 非アクティブボタン（白系グラデーション） */
.btns.wh {
  background: linear-gradient(to bottom, #ffffff, #f0f0f0);
  color: #666;
}

.btns.wh:hover {
  background: linear-gradient(to bottom, #eeeeee, #dddddd);
  color: #000;
}

/* アクティブボタン（#FBF8F1系の濃淡を使用した上品な仕上げ） */
.btns.act {
  background: linear-gradient(to bottom, #FBF8F1, #F1E9DC); /* 柔らかいアイボリーグラデ */
  color: #C4A764; /* やや淡いゴールド、茶色すぎない */
  font-weight: bold;
  border: 1px solid #E7DAC5; /* 薄めのベージュ、主張しすぎない */
  border-bottom: none;
  z-index: 1;
  cursor: default;
}

/* アクティブホバーは無効（色変えない） */
.btns.act:hover {
  background: linear-gradient(to bottom, #fdf8f2, #f0e5d8);
  color: #b88b33;
}

/* アクティブマーク（三角） */
.btns_wrapper .btns.act::after {
  content: "";
  position: absolute;
  bottom: -12px; /* 三角がより大きく出るように */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 12px solid #f0e5d8; /* actボタンの下地と同じ色 */
}

/* リンクなしの無効タブ（グレーアウト表示） */
.btns.disabled {
  background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
  color: #aaa;
  border: 1px solid #ccc;
  border-bottom: none;
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
.btns_wrapper .btns {
  font-size: 0.85rem;
  }
}

/* ------------------------------------------

keepなどのお問合せフォーム用

------------------------------------------- */

.checkbox_wrapper,
.button_area {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 30px;
}

/* 非表示の実チェック */
.checkbox-real {
  display: none;
}

/* カスタムチェックボックス本体 */
.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  font-size: 15px;
  position: relative;
  max-width: 480px;
}

.custom-checkbox:hover {
	background: #EBFFF1;
	}

/* チェックされたら全体の背景を変える */
.checkbox-real:checked + .custom-checkbox {
  background-color: #e0f5ea;
  border-color: #4CAF50;
}

/* 見た目のチェックボックス */
.checkmark {
  height: 25px;
  width: 24px;
  background-color: #fff;
  border: 2px solid #888;
  border-radius: 4px;
  position: relative;
  transition: all 0.2s ease;
}

/* チェックマーク ✔ */
.checkmark::after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-real:checked + .custom-checkbox .checkmark {
  background-color: #4CAF50;
  border-color: #4CAF50;
}

.checkbox-real:checked + .custom-checkbox .checkmark::after {
  display: block;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.confirm-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  text-align: left;
}

.modal-content h3 {
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.modal-body {
  max-height: 400px;
  overflow-y: auto;
  font-size: 1rem;
  line-height: 1.5;
}

.modal-body p {
  margin: 10px 0;
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.modal-buttons button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

#goBackBtn {
  background: #aaa;
  color: #fff;
}

#finalSubmitBtn {
  background: #C32F32;
  color: #fff;
}