/* =========================
セクション共通
========================= */
.course_section{
padding:2.6rem 0 2.6rem;
}
/* システムコメント（site.php） */
.course_comment{
font-size:1.3rem;
line-height:1.9;
letter-spacing:.06em;
color:#26332f;
margin:0 auto 1.6rem;
max-width:600px;
padding:0 0.3rem;
}








/* =========================
コースメニュー
========================= */
.course_ul{
display:flex;
flex-direction:column;
gap:14px;
max-width:600px;
margin:1.6rem auto 0;
}
.course_ul li{
position:relative;
background:#fff;
border:1px solid #d5e9e2;
border-radius:12px;
padding:1.3rem 1.6rem;
}
/* 人気No.1 の枠だけ濃い緑の線 */
.course_ul li.popular{
border-color:#1d8a72;
}
.course_row{
display:flex;
justify-content:space-between;
align-items:center;
}
/* 時間 */
.course_time{
display:flex;
align-items:baseline;
}
.course_time p{
font-size:2.2rem;
line-height:1;
color:#1d8a72;
letter-spacing:.02em;
}
.course_time em{
font-size:1.2rem;
line-height:1;
color:#1d8a72;
margin-left:0.3rem;
}
/* 料金 */
.course_price{
display:flex;
align-items:baseline;
}
.course_price span{
font-size:1.4rem;
line-height:1;
color:#26332f;
margin-right:0.1rem;
}
.course_price strong{
font-size:2rem;
line-height:1;
color:#26332f;
letter-spacing:.03em;
font-weight:bold;
}
/* コースの説明（shop_course.description） */
.course_detail{
font-size:1.2rem;
line-height:1.8;
letter-spacing:.04em;
color:#6c7d78;
margin-top:0.9rem;
padding-top:0.9rem;
border-top:1px dashed #d5e9e2;
}
/* リボン（top.css と同じ） */
.popular_ribbon{
position:absolute;
top:-11px;
left:50%;
transform:translateX(-50%);
display:flex;
justify-content:center;
align-items:center;
height:22px;
padding:0 1rem;
border-radius:20px;
background:#1d8a72;
color:#fff;
font-size:1rem;
letter-spacing:.08em;
white-space:nowrap;
z-index:5;
}
/* 税込の注意 */
.course_tax{
text-align:center;
font-size:1.2rem;
letter-spacing:.04em;
line-height:1.3;
color:#6c7d78;
margin:1.4rem 0 0;
}
.course_tax em{
margin-right:0.1rem;
}








/* =========================
オプション
========================= */
.option_ul{
max-width:600px;
margin:1.6rem auto 0;
background:#fff;
border:1px solid #d5e9e2;
border-radius:14px;
overflow:hidden;
}
.option_ul li{
padding:1.3rem 1.6rem;
border-top:1px solid #d5e9e2;
}
.option_ul li:first-child{
border-top:0;
}
.option_row{
display:flex;
justify-content:space-between;
align-items:center;
gap:1rem;
}
.option_row h3{
font-size:1.4rem;
line-height:1.5;
letter-spacing:.06em;
color:#26332f;
}
.option_price{
display:flex;
align-items:baseline;
flex-shrink:0;
}
.option_price span{
font-size:1.2rem;
line-height:1;
color:#26332f;
margin-right:0.1rem;
}
.option_price strong{
font-size:1.65rem;
line-height:1;
color:#26332f;
letter-spacing:.03em;
font-weight:bold;
}
.option_detail{
font-size:1.2rem;
line-height:1.8;
letter-spacing:.04em;
color:#6c7d78;
margin-top:0.6rem;
}








/* =========================
クレジットカード
========================= */
.card_box{
max-width:700px;
margin:1.6rem auto 0;
background:#fff;
border:1px solid #d5e9e2;
border-radius:14px;
overflow:hidden;
}
/* 見出しの帯（トップの新着情報と同じ緑） */
.card_head{
background:#1d8a72;
padding:1rem 1.4rem;
}
.card_head h3{
font-size:1.3rem;
letter-spacing:.08em;
line-height:1.4;
color:#fff;
text-align:center;
}
.card_inner{
padding:1.6rem 1.6rem 1.6rem;
}
.card_ul{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px 4px;
margin-bottom:1.6rem;
}
.card_ul li img{
height:36px;
width:auto;
display:block;
}
/* 支払いの手順 */
.card_step{
display:flex;
flex-direction:column;
gap:10px;
}
.card_step li{
display:flex;
align-items:flex-start;
gap:0.9rem;
background:#eef7f3;
border-radius:10px;
padding:1rem 1.1rem;
}
.card_step span{
flex-shrink:0;
display:flex;
justify-content:center;
align-items:center;
width:24px;
height:24px;
border-radius:50%;
background:#1d8a72;
color:#fff;
font-size:1.2rem;
line-height:1;
}
.card_step p{
font-size:1.2rem;
line-height:1.8;
letter-spacing:.04em;
color:#26332f;
}
/* 決済ページへ（common.css の .next_page を使う） */
.card_btn{
margin:1.8rem auto 0.4rem;
}
.card_caution{
font-size:1.15rem;
line-height:1.85;
letter-spacing:.04em;
color:#26332f;
margin-top:1.8rem;
padding-top:1.6rem;
border-top:1px solid #d5e9e2;
}
.card_text{
text-align:right;
margin-top:1.4rem;
}
.card_text p{
font-size:1.1rem;
line-height:1.8;
letter-spacing:.04em;
color:#6c7d78;
}








/* =========================
ご利用にあたって（site.php の注意事項）
========================= */
.caution_box{
max-width:700px;
margin:1.6rem auto 0;
background:#fff;
border:1px solid #d5e9e2;
border-radius:14px;
padding:1.8rem 1.6rem;
}
.caution_box p{
font-size:1.2rem;
line-height:1.9;
letter-spacing:.04em;
color:#26332f;
}








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

@media(min-width:768px){
/* コースは2列 */
.course_ul{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px 16px;
max-width:700px;
}
.course_ul li{
padding:1.6rem 2rem;
}
.course_time p{
font-size:2.4rem;
}
.course_price strong{
font-size:2.2rem;
}
.course_comment{
max-width:700px;
text-align:center;
}
.option_ul{
max-width:700px;
}
.card_inner{
padding:2rem 2.6rem 2rem;
}
.caution_box{
padding:2.2rem 2.6rem;
}

}