@charset "UTF-8";
@import url("base.css");

.system .pic img{ display: block; }
.system .con_wrap{ box-sizing: border-box; width: 660px; background: #383936; padding: 10px; color: #fff;}

/*電話予約*/
.system .tel_info{ box-sizing: border-box; width: 660px; height: 260px; background: url(../images_design/system/bg_tel.jpg) center top no-repeat #000; padding-top: 100px;}
.system .tel_info h3{ font-size: 18px; color: #fff; text-align: center;}
.system .tel_info .tel_num{ font-size: 54px; color: #e00; text-align: center;}
.system .tel_info .tel_num span{ font-size: 0.7em; padding-right: 5px;}
.system .tel_info .tel_att{ color: #fff; text-align: center;}

/*ポイントカード*/
.system .point_card{ box-sizing: border-box; width: 640px; background: #000; margin: 0 auto; padding: 20px; margin-bottom: 10px;}
.system .point_card .main_img{ text-align: center;}
.system .point_card .main_img img{ width: 100%;}
.system .point_card .point3bai{ font-size: 26px; font-weight: bold; text-align: center; color: #d6a361; margin-bottom: 15px;}

.system .point_card .benefits1{ margin-bottom: 15px;}
.system .point_card .benefits1 h3{ background: #503D23; text-align: center; font-size: 20px; font-weight: bold; padding: 8px 0; margin-bottom: 15px;}
.system .point_card .benefits1 dl{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 12px;}
.system .point_card .benefits1 dl:not(:last-of-type){ padding-bottom: 12px; border-bottom: 1px solid #424242;}
.system .point_card .benefits1 dt{ box-sizing: border-box; width: 18%; font-size: 22px;}
.system .point_card .benefits1 dd{ box-sizing: border-box; width: 82%;}
.system .point_card .benefits1 dd h4{ font-size: 22px; color: #d6a361; margin-bottom: 7px;}
.system .point_card .benefits1 .note{ background: #424242; border-radius: 7px; padding: 10px 12px; font-size: 13px;}

.system .point_card .benefits2{}
.system .point_card .benefits2 h3{ background: #503D23; text-align: center; font-size: 20px; font-weight: bold; padding: 8px 0; margin-bottom: 15px;}
.system .point_card .benefits2 p{ font-size: 26px; font-weight: bold; text-align: center; color: #d6a361;}
.system .point_card .benefits2 p:not(:last-of-type){ margin-bottom: 10px;}
.system .point_card .benefits2 p span{ display: block; font-size: 16px; font-weight: normal; color: #fff;}

.attn_wrap h3,
.std_wrap h3,
.tel_wrap h3,
.card_wrap h3{ height: 45px; line-height: 45px; background: #503D23; font-size: 18px; color: #ffffff; text-align: center;}

.card_wrap li{ padding-left: 5px; font-size: 14px;}
.card_wrap .img_card{ width: 45%; margin: 0 auto 10px;}
.card_wrap .img_card img{ width: 100%;}

.cmn_wrap{ box-sizing: border-box; padding: 18px; border-left: 1px solid #503D23; border-right: 1px solid #503D23; border-bottom: 1px solid #503D23; background: #241F19;}

.attn_wrap h4{ color: #CFA361; margin-bottom: 10px;}
.attn_wrap .box{ box-sizing: border-box; width: 50%;}
.attn_wrap .cmn_wrap{ overflow: hidden;}
.attn_wrap .attn_l{ float: left;}
.attn_wrap .attn_r{ float: right; box-sizing: border-box; padding-left: 20px; border-left: 1px solid #503D23;}
.attn_wrap li{ font-size: 14px; list-style: disc; list-style-position: inside;}

.std_wrap h4{ color: #CFA361; margin-bottom: 10px;}
.std_wrap p{ font-size: 14px;}

.rsv_wrap{ margin-bottom: 10px; box-sizing: border-box; padding: 20px; border: 1px solid #0baba0;}
.rsv_wrap li{ font-size: 14px; list-style: disc; list-style-position: inside;}

.attn_wrap h3,
.std_wrap h3{ height: 45px; line-height: 45px; background: #503D23; font-size: 18px; color: #ffffff; text-align: center;}