/* =========================
   アンケート（survey/index.php）
   枠・セレクト・ご意見欄・送信ボタンは contact.css を使う
   評価（5段階・顔のアイコン）
========================= */
.survey_rate{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:0.5rem;
}
.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 #d5e9e2;
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:#8fb3a8;
}
.survey_rate_text{
display:block;
font-size:1.05rem;
letter-spacing:.02em;
line-height:1.35;
color:#26332f;
}
/* 選んだら緑塗り・白 */
.survey_rate input:checked + label{
background:#1d8a72;
border-color:#1d8a72;
}
.survey_rate input:checked + label .survey_rate_face,
.survey_rate input:checked + label .survey_rate_text{
color:#fff;
}
@media (hover:hover) and (pointer:fine){
.survey_rate label:hover{
border-color:#1d8a72;
}
}








/* =========================
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;
}

}