/* =========================
   contact section
========================= */
.contact_sec{
padding:2.6rem 0 4rem;
}
.contact_width{
max-width:640px;
}
/* ネット予約説明（site.php・<br> 入り） */
.contact_note{
font-size:1.3rem;
line-height:1.9;
letter-spacing:.05em;
color:#26332f;
margin:0 auto 1.8rem;
padding:0 0.3rem;
}








/* =========================
   LINE予約（user.contact_line があるときだけ）
========================= */
.contact_line{
text-align:center;
background:#eef7f3;
border-radius:14px;
padding:1.6rem 1.4rem 1.8rem;
margin:0 auto 3rem;
}
.contact_line_text{
font-size:1.35rem;
letter-spacing:.1em;
color:#26332f;
line-height:1;
margin-bottom:1.2rem;
}
.contact_line_btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.8rem;
min-width:240px;
height:48px;
padding:0 2rem;
border-radius:30px;
background:#06c755;
color:#fff;
box-shadow:0 6px 16px rgba(6,199,85,.22);
}
/* 吹き出しは白・LINE の文字は LINE の緑 */
.contact_line_icon{
width:26px;
height:26px;
color:#fff;
flex:none;
}
.contact_line_letter{
stroke:#06c755;
}
.contact_line_label{
font-size:1.4rem;
font-weight:bold;
letter-spacing:.1em;
color:#fff;
line-height:1;
}
@media (hover:hover) and (pointer:fine){
.contact_line_btn{
transition:opacity .25s ease;
}
.contact_line_btn:hover{
opacity:.85;
}
}








/* =========================
   入力の枠
========================= */
.contact_box{
background:#fff;
border:1px solid #d5e9e2;
border-radius:14px;
padding:1.8rem 1.4rem 1.8rem;
margin:0 auto 1.4rem;
}
.contact_label{
display:flex;
align-items:center;
font-size:1.5rem;
color:#26332f;
letter-spacing:.08em;
line-height:1.3;
margin:0 0 1.1rem;
}
/* 必須・任意のバッジ */
.contact_required,
.contact_sub_label{
display:inline-block;
font-size:1rem;
font-weight:normal;
letter-spacing:.05em;
line-height:1;
padding:0.35rem 0.7rem;
border-radius:20px;
margin-left:0.7rem;
}
.contact_required{
background:#1d8a72;
color:#fff;
}
.contact_sub_label{
background:#eef7f3;
color:#6c7d78;
}
.contact_sub{
font-size:1.2rem;
color:#6c7d78;
letter-spacing:.03em;
line-height:1.5;
margin:-0.4rem 0 1rem;
}
.contact_field_error{
margin-top:0.4rem;
}
.contact_field_error:empty{
margin-top:0;
}

/* 日付タブ（schedule.css）を枠の中で使う */
.contact_box .schedule_tab{
margin:0;
}








/* =========================
   セラピスト
========================= */
.staff_grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0.6rem;
}
.staff_card{
position:relative;
cursor:pointer;
border:1px solid #d5e9e2;
border-radius:10px;
overflow:hidden;
background:#fff;
transition:box-shadow .2s, border-color .2s;
}
/* 選んだカードは緑の線＋右上のチェック */
.staff_card.selected{
border-color:#1d8a72;
box-shadow:0 0 0 1px #1d8a72, 0 6px 14px rgba(29,138,114,.18);
}
.staff_card.selected::after{
content:"";
position:absolute;
top:5px;
right:5px;
width:20px;
height:20px;
border-radius:50%;
background:#1d8a72 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
box-shadow:0 2px 6px rgba(0,0,0,.18);
}
@media (hover:hover) and (pointer:fine){
.staff_card:hover{
border-color:#1d8a72;
}
}
.staff_card_img{
position:relative;
width:100%;
aspect-ratio:3/4;
overflow:hidden;
background:#eef7f3;
}
/* エリアの札（写真の左下・エリアが複数の店だけ。出勤カードの .sch_place と同じ色） */
.staff_card_place{
position:absolute;
left:0;
bottom:0;
z-index:2;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
box-sizing:border-box;
background:rgba(29,138,114,.9);
color:#fff;
font-size:0.9rem;
font-style:normal;
line-height:1.5;
letter-spacing:0;
padding:0.15rem 0.5rem;
border-radius:0 6px 0 0;
}
.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:#6c7d78;
text-align:center;
padding:0.5rem;
}
.staff_card_name{
text-align:center;
font-size:1.05rem;
color:#26332f;
padding:0.5rem 0.1rem 0.1rem;
letter-spacing:0;
line-height:1.3;
}
.staff_card_time{
text-align:center;
font-size:1rem;
color:#1d8a72;
font-weight:bold;
padding:0 0 0.5rem;
letter-spacing:0;
line-height:1.3;
}
.staff_loading{
grid-column:1 / -1;
font-size:1.3rem;
color:#6c7d78;
padding:1rem 0;
}








/* =========================
   時間
========================= */
/* 選択中の日付・セラピスト（JS が入れる） */
.selected_staff_label:not(:empty){
display:inline-block;
font-size:1.2rem;
color:#1d8a72;
letter-spacing:.05em;
line-height:1.3;
background:#eef7f3;
border-radius:20px;
padding:0.5rem 1.1rem;
margin:-0.2rem 0 1rem;
}
/* 選択中のエリア名（セラピスト詳細の出勤スケジュールと同じ緑の枠） */
.selected_staff_place{
display:inline-block;
vertical-align:1px;
margin-left:0.6rem;
padding:0.3rem 0.7rem;
border:1px solid #1d8a72;
border-radius:20px;
background:#fff;
color:#1d8a72;
font-size:0.95rem;
letter-spacing:.04em;
line-height:1;
}
.contact_select_wrap{
position:relative;
max-width:300px;
}
/* ▼ */
.contact_select_wrap::after{
content:"";
position:absolute;
right:1.4rem;
top:50%;
width:7px;
height:7px;
border-right:1px solid #1d8a72;
border-bottom:1px solid #1d8a72;
transform:translateY(-70%) rotate(45deg);
pointer-events:none;
}
.contact_select{
width:100%;
-webkit-appearance:none;
appearance:none;
background:#fff;
border:1px solid #d5e9e2;
border-radius:8px;
color:#26332f;
font-size:1.6rem;
padding:0.9rem 3rem 0.9rem 1.2rem;
cursor:pointer;
}
.contact_select:focus{
outline:none;
border-color:#1d8a72;
}








/* =========================
   コース・オプション（丸いボタン）
========================= */
.contact_chip_list{
display:flex;
flex-wrap:wrap;
gap:0.8rem;
}
.contact_chip_list input{
display:none;
}
.contact_chip_list label{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-width:88px;
padding:0.8rem 1.4rem;
border:1px solid #d5e9e2;
border-radius:12px;
background:#fff;
text-align:center;
cursor:pointer;
transition:border-color .2s, background .2s;
}
/* コースは4列（スマホでも1行に収める） */
.contact_chip_course{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0.6rem;
}
.contact_chip_course label{
min-width:0;
padding:0.8rem 0.3rem;
}
.contact_chip_name{
display:block;
font-size:1.4rem;
color:#26332f;
letter-spacing:.04em;
line-height:1.3;
}
.contact_chip_price{
display:block;
font-size:1.15rem;
color:#6c7d78;
line-height:1.3;
margin-top:0.2rem;
}
.contact_chip_list input:checked + label{
background:#1d8a72;
border-color:#1d8a72;
}
.contact_chip_list input:checked + label .contact_chip_name,
.contact_chip_list input:checked + label .contact_chip_price{
color:#fff;
}
@media (hover:hover) and (pointer:fine){
.contact_chip_list label:hover{
border-color:#1d8a72;
}
}








/* =========================
   合計金額
========================= */
.contact_total{
background:#eef7f3;
border-radius:14px;
padding:1.8rem 2rem 1.6rem;
margin:0 auto 1.4rem;
text-align:center;
}
.contact_total_label{
font-size:1.3rem;
letter-spacing:.1em;
color:#26332f;
line-height:1;
margin-bottom:0.6rem;
}
.contact_total_price{
font-size:3rem;
color:#1d8a72;
line-height:1.2;
margin-bottom:0.6rem;
}
.contact_total_breakdown{
max-width:280px;
margin:0 auto 0.8rem;
}
.contact_total_breakdown li{
font-size:1.2rem;
color:#26332f;
padding:0.3rem 0;
line-height:1.5;
}
.contact_total_breakdown li + li{
border-top:1px dashed #c9e2d9;
}
.contact_total_note{
font-size:1.1rem;
color:#6c7d78;
}








/* =========================
   お客様情報
========================= */
.contact_field{
margin-bottom:2rem;
}
.contact_input,
.contact_textarea{
width:100%;
background:#fff;
border:1px solid #d5e9e2;
border-radius:8px;
color:#26332f;
font-size:1.6rem;
padding:0.9rem 1.2rem;
box-sizing:border-box;
}
.contact_textarea{
min-height:120px;
resize:none;
overflow:hidden;
}
.contact_input:focus,
.contact_textarea:focus{
outline:none;
border-color:#1d8a72;
}

/* 次回から省略（common.css の .switch を緑に） */
.contact_save{
padding:0.4rem 0 0;
}
.contact_save .slider{
background:#e4ece9;
border-color:#d5e9e2;
}
.contact_save .switch input:checked + .slider{
background:#1d8a72;
border-color:#1d8a72;
}
.contact_save .switch_text{
font-size:1.2rem;
letter-spacing:.03em;
color:#26332f;
}








/* =========================
   送信
========================= */
.contact_submit{
position:relative;
display:block;
width:100%;
max-width:320px;
height:54px;
margin:2.8rem auto 0;
border-radius:30px;
background:#1d8a72;
color:#fff;
font-size:1.5rem;
font-weight:bold;
letter-spacing:.15em;
cursor:pointer;
box-shadow:0 8px 20px rgba(29,138,114,.25);
}
/* → */
.contact_submit::after{
content:"";
position:absolute;
right:2rem;
top:50%;
width:8px;
height:8px;
border-top:1px solid #fff;
border-right:1px solid #fff;
transform:translateY(-50%) rotate(45deg);
}
.contact_submit:disabled{
opacity:.6;
cursor:default;
}
@media (hover:hover) and (pointer:fine){
.contact_submit{
transition:background .25s ease;
}
.contact_submit:hover{
background:#167260;
}
}








/* =========================
tablet〜pc
========================= */

@media (min-width:768px){
.contact_note{
font-size:1.4rem;
text-align:center;
}
.contact_box{
padding:2.4rem 2.6rem;
}
.contact_label{
font-size:1.6rem;
}
.staff_grid{
grid-template-columns:repeat(5,1fr);
gap:0.8rem;
}
.contact_total{
padding:2.2rem 2.6rem 2rem;
}

}