



.sub_width{
width:95%;
max-width:900px;
margin:1.5rem auto 3rem auto;
padding:1.9rem 0rem 1rem;
overflow:hidden;
border:1px solid #f2ece7;
position:relative;
overflow:hidden;
}
.contact_center{
display:block;
width:90%;
margin:1.5rem auto 0;
text-align:center;
}
.contact_note{
display:inline-block;
text-align:left;
font-size:1.3rem;
line-height:1.8;
letter-spacing:0.05em;
margin:0 auto 1.5rem;
}
.contact_sec{
padding:1.7rem 0 4.4rem;
}
.contact_width{
width:95%;
max-width:640px;
margin:0 auto;
}
.platina_note{
text-align:center;
margin:0 auto 2rem;
padding:1rem;
border:1px solid #0071bc;
border-radius:6px;
}
.platina_note span{
display:block;
color:#0071bc;
font-size:1.2rem;
letter-spacing:.1em;
margin-bottom:0.3rem;
}
.platina_note p{
font-size:1.3rem;
color:#444444;
line-height:1.7;
}
.platina_note small{
font-size:1.1rem;
color:#888888;
}

/* ===== ブロック ===== */
.contact_block{
margin:3.5rem auto 4rem;
}
.contact_block_bottom{
margin:3.5rem auto 3rem;
padding:0 0.3rem;
}
.contact_block_bottom_last{
margin:3.5rem auto 1.6rem;
}
.contact_label{
display:block;
font-size:1.5rem;
color:#6b5744;
letter-spacing:0.08em;
margin:0 0 0.5rem 0.2rem;
font-weight:bold;
line-height:1.3;
}
.contact_required{
font-size:1.1rem;
color:#C1272D;
margin-left:0.5rem;
font-style:normal;
font-weight:normal;
}
.contact_sub_label{
font-size:1.1rem;
color:#999999;
margin-left:0.5rem;
font-weight:normal;
}
.contact_sub{
font-size:1.2rem;
color:#515151;
margin: 0rem 0 .9rem 0.1rem;
letter-spacing:0.02em;
line-height:1;
}
.contact_field_error{
margin-top:0.4rem;
}

/* ===== セラピストグリッド ===== */
.staff_grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0.4rem;
}
@media(min-width:480px){
.staff_grid{ grid-template-columns:repeat(4,1fr); }
}
.staff_card{
cursor:pointer;
border:2px solid #e0d8d0;
border-radius:6px;
overflow:hidden;
transition:border-color .2s, transform .2s, box-shadow .2s;
background:white;
}
.staff_card:hover{
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.staff_card.selected{
position:relative;
border-color:#c7b299;
box-shadow:0 4px 12px rgba(199,178,153,.3);
}
.staff_card.selected::after{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
}

.staff_card_img{
width:100%;
aspect-ratio:3/4;
overflow:hidden;
background:#f0ebe5;
}
.staff_card_img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.staff_card_none{
display:flex;
align-items:center;
justify-content:center;
}
.staff_card_none span{
font-size:1.1rem;
color:#999999;
text-align:center;
padding:0.5rem;
}
.staff_card_name{
text-align:center;
font-size:1rem;
color:#3e3128;
padding:0.5rem 0.1rem 0.1rem;
background:white;
letter-spacing:0;
}
.staff_card_time{
text-align:center;
font-size:1rem;
color:#77583e;
font-weight:bold;
padding:0rem 0rem 0.5rem;
background:white;
letter-spacing:0em;
}
.staff_loading{
font-size:1.3rem;
color:#999999;
padding:1rem 0;
}

/* ===== 時間select ===== */
.contact_select{
width:100%;
max-width:300px;
background:white;
border:1px solid #d0c8be;
border-radius:4px;
color:#3e3128;
font-size:1.6rem;
padding:0.8rem 1rem;
cursor:pointer;
}
.contact_select:focus{
outline:none;
border-color:#C7B299;
}

/* ===== コース ===== */
.contact_course_list{
display:flex;
flex-wrap:wrap;
gap:1rem 0.8rem;
list-style:none;
}
.contact_course_list input[type="radio"]{
display:none;
}
.contact_course_list label{
display:block;
padding:1rem 1.4rem;
border:1px solid #d0c8be;
border-radius:30px;
min-width:70px;
text-align:center;
font-size:1.4rem;
color:#594a3e;
cursor:pointer;
background:white;
transition:border-color .2s, background .2s, color .2s;
}
.contact_course_list input[type="radio"]:checked + label{
border-color:#C7B299;
background:#f4eee9;
color:#3e3128;
}
.contact_course_list input[type="checkbox"]{
display:none;
}
.contact_course_list input[type="checkbox"]:checked + label{
border-color:#C7B299;
background:#f4eee9;
color:#3e3128;
}
.course_price{
font-size:1.2rem;
color:#9e8a79;
margin-left:0.4rem;
}
.contact_course_list input:checked + label .course_price{
color:#7a6355;
}
/* ===== OP ===== */
.contact_course_list_op{
display:flex;
flex-wrap:wrap;
gap:1rem 0.8rem;
list-style:none;
}
.contact_course_list_op input[type="radio"]{
display:none;
}
.contact_course_list_op label{
display:block;
padding:1rem 1.4rem;
border:1px solid #d0c8be;
border-radius:30px;
font-size:1.3rem;
color:#594a3e;
cursor:pointer;
background:white;
transition:border-color .2s, background .2s, color .2s;
}
.contact_course_list_op input[type="radio"]:checked + label{
border-color:#C7B299;
background:#f4eee9;
color:#3e3128;
}
.contact_course_list_op input[type="checkbox"]{
display:none;
}
.contact_course_list_op input[type="checkbox"]:checked + label{
border-color:#C7B299;
background:#f4eee9;
color:#3e3128;
}
.contact_course_list_op input:checked + label .course_price{
color:#7a6355;
}



.contact_select_box{
border:1px solid rgba(199,178,153,.75);
border-radius:10px;
padding:1.8rem 0.7rem 1.8rem 1rem;
margin:3.4rem 0;
background:rgba(255,255,255,.9);
}

.contact_select_box legend{
padding:0 .8rem;
font-size:1.6rem;
font-weight:bold;
color:#6b5744;
line-height:1;
letter-spacing:.08em;
}

.contact_select_box legend span{
font-size:1rem;
color:#999;
margin-left:.4rem;
}

.contact_course_list{
margin:0;
}

/* ===== 合計金額 ===== */
.contact_total{
background:#f4eee9;
border:1px solid #C7B299;
border-radius:8px;
padding:1.6rem 2rem;
margin-bottom:2rem;
text-align:center;
}
.contact_total_label{
font-size:1.3rem;
color:#7a6355;
margin-bottom:0.4rem;
}
.contact_total_price{
font-size:2.8rem;
color:#3e3128;
font-weight:bold;
margin-bottom:0.4rem;
}
.contact_total_breakdown{
list-style:none;
margin-bottom:0.8rem;
}
.contact_total_breakdown li{
font-size:1.2rem;
color:#7a6355;
padding:0.2rem 0;
}
.contact_total_breakdown li + li{
border-top:1px dashed #d0c8be;
}
.contact_total_note{
font-size:1.1rem;
color:#9e8a79;
}

/* ===== input ===== */
.contact_input{
width:100%;
background:white;
border:1px solid #d0c8be;
border-radius:4px;
color:#3e3128;
font-size:1.6rem;
padding:0.8rem 1rem;
box-sizing:border-box;
}
.contact_input:focus{
outline:none;
border-color:#C7B299;
}
.contact_textarea{
width:100%;
background:white;
border:1px solid #d0c8be;
border-radius:4px;
color:#3e3128;
font-size:1.6rem;
padding:0.8rem 1rem;
box-sizing:border-box;
height:120px;
resize:vertical;
}
.contact_textarea:focus{
outline:none;
border-color:#C7B299;
}

/* ===== 保存チェック ===== */
.contact_save{
margin:0 auto 2rem auto;
padding:0 0.5rem;
}
.switch_text{
font-size:1.2rem;
letter-spacing:.02em;
color:#6d4c30;
}
/* ===== 注意事項 ===== */
.contact_chui{
margin:1.5rem auto 3rem;
padding:0 1rem;
}
.contact_chui p{
font-size:1.25rem;
line-height:1.8;
margin-bottom:0.8rem;
letter-spacing:0.03em;
}
.contact_chui span{
color:#C1272D;
margin-right:0.3rem;
}

/* schedule_tab を白背景ページ用に上書き */
.contact_sec .schedule_tab {
  margin-top: 0;
}
.contact_sec .schedule_tab button{
background:white;
color:#594a3e;
border-color:rgba(199,178,153,.35);
}
.contact_sec .schedule_tab li.on button{
background:#f4eee9;
border-color:#C7B299;
}
.contact_sec .schedule_tab button .int{
color:#3e3128;
}


.common_botan{
max-width:90%;
min-width:220px;
margin:0 auto 0 auto;
background:#c9b095;
padding:1.2rem 1.5rem 1.2rem 1rem;
text-align:center;
color:#e6e6e6;
font-size:1.5rem;
border-radius:30px;
cursor:pointer;
position:relative;
display:block;
}

















