.selectdiv,.txtdiv {
	position: relative;
	display:block;
	/*Don't really need this just for demo styling*/
	float: left;
	min-width: calc(100% - 2rem);
	margin: 0 0 0 1rem;
}

/* IE11 hide native button (thanks Matt!) */
select::-ms-expand {
	display: none;
}

.selectdiv::after {
	content: '';
	position: absolute;
	top: 2rem;
	right: 1rem;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 0.4rem solid transparent;
	border-right: 0.4rem solid transparent;
	border-top: 0.4rem solid #777;
	pointer-events: none;
}
/*2025-06-11*/
.selectdiv.is-confirmed::after {
	display: none;
}
/*2025-06-11*/
.selectdiv select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%; /* 親である.selectdivの幅に、ぴったりと合わせます */
	padding: 0.8rem 2.5rem 0.8rem 1.2rem; /* 右側に、新しい矢印のための空間を確保 */
	font-size: 1rem;
	font-weight: 500;
	margin: 5px 0px 2rem;
	color: var(--color-glass-text, #333);
	background: whitesmoke;
	border: 1px solid #ddd;
	border-radius: 0.5rem;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	
	cursor: pointer;
	transition: all 0.3s ease;
}

.txtdiv input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Add some styling */
	
	display: block;
	width: 100%;
	height: 50px;
	margin: 5px 0px 2rem;
	padding: 0px 24px;
	font-size: 16px;
	line-height: 1.75;
	color: #333;
	background-color: #ffffff;
	background-image: none;
	border: 1px solid #cccccc;
	-ms-word-break: normal;
	word-break: normal;
}
header {
	display: block;
	height: auto;
	width: 100%;
	min-height:auto;
	background: #fff;
	box-shadow: 0 min(1.5rem, 0.78vw) min(2.25rem, 1.17vw) min(-1.05rem, -0.546vw) #bbb;
}

.page_ttl {
	display: block;
	width: 100%;
	text-align: center;
	/* background: #FCF9F9; */
	/* padding: 2rem 0; */
}

.page_ttl img {
	margin: 0;
}

.page_mainimg {
	display: block;
	width: 100%;
	text-align: center;
	background: #FD91A5;
	padding: 2rem 0;
}

.page_mainimg::before {
	position: absolute;
	top: 12rem;
	width: 50px; height: 50px;
	line-height: 50px;
	border-radius: 50%;
	background: #FD91A5;
	color: white; font-size: 0.8rem;
	text-align: center;
	text-transform: uppercase;
	content: 'new';
}

.required::after {
	content: "å¿…é ˆ";
	background-color: #FD91A5;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	min-width: 10px;
	padding: 5px 7px;
	margin: 0px 5px 2px 5px;
	line-height: 1;
	vertical-align: middle;
	white-space: nowrap;
	text-align: center;
	border-radius: 6px;
	display: inline-block;
}

@media screen and (max-width: 480px) {
	header {
	display: block;
	height: auto;
	width: 100%;
	min-height:auto;
	background: #fff;
	box-shadow: 0 min(1.5rem, 0.78vw) min(2.25rem, 1.17vw) min(-1.05rem, -0.546vw) #bbb;
	}

	.page_ttl {
	display: block;
	width: 100%;
	text-align: center;
	padding: 1rem 0;
	}
}
/*感染防止メッセージ*/
/*ボックス全体*/
.pp_oritatami_box {
	margin: 2em 0;
	padding: 0 ;
	max-width: 100%;/*最大幅*/
}

/*ラベル*/
.pp_oritatami_box label {
	position: relative;
	display: block;
	color: dimgray;
	font-weight: bold;
	cursor :pointer;
	text-align: center;
	transition: all 0.5s;
	margin: 1rem auto 0.5rem;
	padding:0.5rem;
}

.tomobox_ttl{
	margin:3rem 1rem 1rem 0;
	font-weight:bold;
	padding:1rem;
	font-size:1.4rem;
	border-bottom: 1px solid #D21577;
	color:#D21577;
}


@media screen and (max-width:480px){
	.pp_oritatami_box label {
		margin:0 1rem 0.5rem;
	}

	.tomobox_ttl{
		margin:3rem 0 1rem 0;
		font-weight:bold;
		padding:1rem;
		font-size:1.1rem;
		border-bottom: 1px solid #D21577;
		color:#D21577;
	}
}
/*ラベルホバー時*/
.pp_oritatami_box label:hover {
	color :#F15477;
	background:white;
}

/*チェックは隠す*/
.pp_oritatami_box input {
	display: none;
}

/*中身を非表示にしておく*/
.pp_oritatami_box .ppshow {
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.8s;
}
/*クリックで中身表示*/
.ppextension:checked + .ppshow {
	height: auto;
	padding: 1.5rem;
	margin: 0 auto 10px;
	color: #565656;
	background: white;
	border: dashed 2px #F15477;
	font-family: 'Noto Sans JP', sans-serif;
	border-radius: 8px;
	opacity: 1;
}

/*中身を非表示にしておく*/
.pp_oritatami_box .ppshow2 {
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.8s;
}
/*クリックで中身表示*/
.ppextension:checked + .ppshow2 {
	height: auto;
	max-width: 960px;
	padding: 1.5rem;
	margin: 0 auto 10px;
	color: #565656;
	background: white;
	border: dashed 2px #F15477;
	font-family: 'Noto Sans JP', sans-serif;
	border-radius: 8px;
	opacity: 1;
}

.pp_oritatami_box .ppshow2 .oritatami_table_wrap{
	width: 100%;
}

.pp_oritatami_box .oritatami_table_wrap p{
	margin: 0;
	font-size: .8rem;
	text-align: left;
}

.pp_oritatami_box .ppshow2 table{
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1rem;
	font-family: 'Noto Sans JP', sans-serif;
}

.pp_oritatami_box .ppshow2 table .f_small{
	font-size: 12px;
	margin-left: 5px;
}

.pp_oritatami_box .ppshow2 table th,td{
	border: 1px solid #000;
	padding: 0.7em .5rem;
	text-align: left;
}

.pp_oritatami_box .ppshow2 table .table_ttl{
	background: #ffa4c3;
}

.pp_oritatami_box .ppshow2 table td:first-of-type{
	background: #fff3f7;
	font-weight: bold;
}

/*メディアクエリ*/
@media screen and (max-width: 570px){
	.ppextension:checked + .ppshow {
	margin: 0 1rem 2rem 1rem;
	padding:1rem;
	}
	.ppextension:checked + .ppshow2 {
	margin: 0 1rem 2rem 1rem;
	padding:1rem;
	}
	.pp_oritatami_box .ppshow2 .oritatami_table_wrap .oritatami_table_scroll{
		overflow-x: scroll;
	}
	.pp_oritatami_box .ppshow2 table{
		width: 175%;
		font-size: .8rem;
	}
	.pp_oritatami_box .ppshow2 table th,td{
		padding: 0.7em .5rem;
	}
	.pp_oritatami_box .ppshow2 .slide_icon{
		width: 20%;
		max-width: 60px;
		margin: 0 0 .8rem;
		display: block;
	}
}

.hide{
	display:none;
}
.def{}
.del{
	font-size:1.5rem;
	padding:0.5rem 1rem 0.5rem;
	background-color:#FEE9E5;
}
.del:empty{
	background-color:white;
}
.tomoform_bt{
	margin:0 auto;
	text-align:center;
}
.tomoform_bt input[type="button"]{
	text-align: center;
	background: #D21577;
	min-width:280px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 44px;
	min-height:60px;
	margin:1rem;
	color: #fff;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	border: none;
}
.tomoform_bt input[type="submit"]{
	text-align: center;
	background: #D21577;
	min-width:280px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 44px;
	min-height:60px;
	margin:1rem;
	color: #fff;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	border: none;
}
.tomoform_bt input.res[type="button"]{
	text-align: center;
	background: #D3D3D3;
	min-width:280px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 44px;
	min-height:60px;
	margin-bottom:1rem;
	color: #fff;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	border: none;
}
@media screen and (max-width: 570px){
	.tomoform_bt input[type="button"]{
		width:calc(100% - 2rem;);
		margin:1rem:auto;
	}
	.tomoform_bt input[type="submit"]{
		width:calc(100% - 2rem;);
		margin:1rem:auto;
	}
	.tomoform_bt input.res[type="button"]{
		width:calc(100% - 2rem;);
		margin:1rem:auto;
	}
}
@media screen and (min-width:541px){
	.wrapper_tomo{
		max-width:928px;
		margin:0 auto;
	}
}
@media screen and (max-width:540px){
	.wrapper_tomo{
		width:100%;
	}
}
.oceshow .menu {
	padding: 50px 0 60px;
}

.oceshow .menu dl {
	box-sizing: border-box;
	float: left;
	width: calc(100% / 3);
	text-align: center;
	border-right: solid 2px white;
}

.oceshow .menu dl:last-child { border-right:none; }

.oceshow .menu dt {
	color: #fff;
	line-height: 60px;
	background: #F15477;
	border-bottom: solid 2px #fadce2;
}

.oceshow .menu dd {
	line-height: 80px;
	background: #fff;
}

.oceshow .menu dd span {
	display: inline-block;
	position: relative;
	margin-left: 15px;
	padding: 0 10px;
	vertical-align: 6px;
	color: #fff;
	line-height: 50px;
	background: #F15477;
	border-radius: 10px;
}

.oceshow .menu dd span:before {
	content: 'â–¼';
	transform: rotate(90deg);
	position: absolute;
	top: 50%;
	left: -8px;
	margin-top: -25px;
	color: #F15477;
}
/*ボックス全体*/
.ht_oritatami_box {
	margin: 2rem 0 1rem;
	padding: 0 ;
	max-width: 100%;/*最大幅*/
}

/*ラベル*/
.ht_oritatami_box label {
	position: relative;
	display: block;
	color: dimgray;
	font-weight: bold;
	cursor :pointer;
	text-align: center;
	transition: all 0.5s;
	margin: 1rem auto 0.5rem;
	padding:0.5rem;
}

@media screen and (max-width:480px){
	.ht_oritatami_box label {
		margin:0 0 0.5rem;
	}
}
/*ラベルホバー時*/
.ht_oritatami_box label:hover {
	color :dimgray;
	background:white;
}

/*チェックは隠す*/
.ht_oritatami_box input {
	display: none;
}

/*中身を非表示にしておく*/
.ht_oritatami_box .htshow {
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.8s;
}
/*クリックで中身表示*/
.htextension:checked + .htshow {
	height: auto;
	padding: 0;
	margin: 0 auto ;
	color: #565656;
	background: white;
	border-radius: 8px;
	opacity: 1;
}

/*メディアクエリ*/
@media screen and (max-width: 570px){
	.htextension:checked + .htshow {
	margin: 0 1rem;
	padding:0
	}
}
.tomo_caution {
	border: dashed 1px crimson; 
	padding:0 1rem; 
	margin:2rem 0 1rem; 
	font-size:0.9rem; 
	border-radius:1rem;
}
/*メディアクエリ*/
@media screen and (max-width: 570px){
	.tomo_caution {
		margin:2rem 1rem 1rem; 
	}
}

/*2025-06-09*/
/* 入力フォーム */
#salonCodeInput {
	width: calc(100% - 2rem);
	display:block;
	max-width :960px;
	padding: 12px;
	margin : 1rem auto 1.4rem;
	font-size: 1.2em;
	border: 2px solid #ddd;
	border-radius: 8px;
	box-sizing: border-box; /* paddingを含めてwidthを100%にする */
	transition: border-color 0.3s, box-shadow 0.3s;
	text-align: center;
}

/* 入力フォームがフォーカスされた時のスタイル */
#salonCodeInput:focus {
	border-color: #F8E0DF;
	box-shadow: 0 0 8px rgba(255, 0, 157, 0.25);
	outline: none; /* デフォルトのフォーカス枠線を消す */
}

/* 結果表示エリア */
#result-area {
	width:calc(100% - 2rem);
	display:block;
	max-width :960px;
	margin:1.4rem auto;
	padding: 15px;
	min-height: 2.5em; /* 結果がない時も高さを保ち、レイアウトが崩れるのを防ぐ */
	line-height: 1.5;
	border-radius: 8px;
	background-color: #f9f9f9;
	color: #888; /* デフォルトの文字色 */
	font-size: 1.1em;
	font-style: italic; /* デフォルトはイタリックに */
	transition: all 0.3s;
}

/* ★サロン名が見つかった時に適用するスタイル */
#result-area.found {
	color:rgb(124, 13, 13);
	background-color: #FEE9E5;
	font-weight: bold;
	font-style: normal; /* イタリックを解除 */
}
/*2025-06-09*/
.selectbox {
	position: relative;
	display: flex;
	margin:1rem;
}

.selectbox_item {
	position: relative;
	max-width: 230px;
	padding: 18px 2rem;
	color: #D21577;
	font-weight: bold;
	border: solid 1px;
	border-color: #D21577;
	cursor: pointer;
	transition: all 0.5s;
	border-radius: 0.5rem;
	padding-left: 35px; /* ← 追放した✓が居座るための聖域を、あらかじめ確保！ */
}
.selectbox_item_M{
	color: #000;
	border-color: #000;
}
.selectbox label input
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0.5rem;
	margin: auto;
}
.selectbox label {
	display: inline-block; /* 中身に合わせて幅が変わるように */
	margin: 5px;
	cursor: pointer;
}
.selectbox input[type="radio"] {
	opacity: 0;
	position: absolute;
	width: 0;
	height: 0;
}

.selectbox label {
	display: inline-block; /* 中身に合わせて幅が変わるように */
	margin: 5px;
	cursor: pointer;
}
.selectbox_item::before {
	content: '✓ ';
	font-weight: bold;
	color: transparent; 
	
	/* 色の変化に、滑らかな演出を... */
	transition: color 0.1s ease-in-out; 
	position: absolute;
	left: 12px;   /* 器の左端から12pxの位置に固定！ */
	top: 50%;     /* 器の上から中央の位置へ！ */
	transform: translateY(-50%); /* 自身の高さのズレを、完璧に補正！ */
}
.selectbox input[type="radio"]:checked + .selectbox_item {
	background-color: #D21577;
	color: #fff;
	border-color: #D21577;
}
.selectbox input[type="radio"]:checked + .selectbox_item_M {
	background-color: #000;
	border-color: #000;
}

/* ...そして、潜んでいた亡霊（✓）に、色を与える...！ */
.selectbox input[type="radio"]:checked + .selectbox_item::before {
	/* これで、その姿が白日の下に晒される...！ */
	color: #fff; 
}