/* =========================
   アンケート（survey/index.php）
   枠・セレクト・ご意見欄は contact.css を使う
   評価（5段階・顔のアイコン）。選んだときの色は contact.css のコースボタンと同じ
========================= */
.survey_rate{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:0.5rem;
list-style:none;
}
.survey_rate input{
display:none;
}
.survey_rate label{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:0.5rem;
height:100%;
padding:1rem 0.2rem 0.9rem;
border:1px solid #d0c8be;
border-radius:12px;
background:#fff;
text-align:center;
cursor:pointer;
transition:border-color .2s, background .2s;
}
.survey_rate_face{
display:block;
width:30px;
height:30px;
color:#bcab9a;
}
.survey_rate_text{
display:block;
font-size:1.05rem;
letter-spacing:.02em;
line-height:1.35;
color:#594a3e;
}
/* 選んだら薄いベージュ塗り＋濃い線・顔は茶 */
.survey_rate input:checked + label{
background:#f4eee9;
border-color:#C7B299;
box-shadow:0 0 0 1px #C7B299;
}
.survey_rate input:checked + label .survey_rate_face{
color:#a8907b;
}
.survey_rate input:checked + label .survey_rate_text{
color:#3e3128;
font-weight:bold;
}
@media (hover:hover) and (pointer:fine){
.survey_rate label:hover{
border-color:#C7B299;
}
}








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

@media (min-width:768px){
.survey_rate{
gap:0.8rem;
}
.survey_rate label{
padding:1.3rem 0.4rem 1.2rem;
}
.survey_rate_face{
width:36px;
height:36px;
}
.survey_rate_text{
font-size:1.2rem;
}

}








/* =========================
374px以下（iPhone SE 初代など）は「良かった」が折れないように詰める
========================= */

@media (max-width:374px){
.survey_rate{
gap:0.3rem;
}
.survey_rate label{
padding:0.9rem 0 0.8rem;
}
.survey_rate_face{
width:26px;
height:26px;
}
.survey_rate_text{
font-size:0.95rem;
letter-spacing:0;
}

}