@charset "utf-8";
table{border-collapse:collapse;}
img{max-width:100%;}
.blue{color:#6699CC;}
.banar{margin:12px 0;}

h4{border-bottom:1px dotted #003399; border-left:5px solid #003399; padding:8px 4px; margin:8px 0; clear:both;}


#Main p{line-height:1.6em;}
#Main p.read{margin:20px 0; text-align:center;}

th span.advance{ font-size:0.8em; font-weight:normal; padding:2px 6px 0; margin-left:2px; background-color:#FFCC99; color:#CC0000; display:inline-block; -webkit-border-radius: 22px; border-radius: 22px; -moz-border-radius: 22px;}
/*料金*/
table.plan{width:100%;}
table.plan th, table.plan td{border:1px solid #CCCCCC;}
table.plan th{background-color:#3C73B7; font-size:1.1em; color:#FFFFFF; padding:12px; text-align:left;}
table.plan td{text-align:center; padding:4px 12px; white-space:nowrap;}
table.plan td.num{background-color:#E3EFFD; text-align:right; color:#003366; font-weight:bold;}
table.plan td.yen{ background-color:#F1F7FE; text-align:right;font-size:0.8em;}
table.plan td.yen strong{font-size:140%;}
table.plan td.yen hr{ border:none; display:block; border-top:1px dotted #999999; padding-top:4px;}
table.plan td.yen span{font-size:120%; margin-left:4px; font-weight:bold;}
table.plan td.yen p.cam{display:block; margin-left:4px; color:#FF0000;}
table.plan td.yen p.cam span{display:inline; font-size:100%; font-weight:normal;}
table.plan td.tax, table.plan td.spc{border:none; text-align:right; padding:0; font-size:0.8em;}

table.red th{background-color:#990000;}
table.red td.num{background-color:#FFCCCC;}
table.red td.yen{background-color:#FFEEF5;}

p.tax{text-align:right;}
ul.note{list-style:square; margin-left:18px; line-height:1.6em;}

p.area{text-align:center; padding-bottom:12px;}

/*フリーダイヤル、各院*/
div.dial_tel{margin:40px 0;}
ul.dial{list-style:none; line-height:1.6em; text-align:center;}
ul.dial li{background-color:#E1E9FB; padding:4px; float:left; margin:3px; width:30%;}
ul.dial span{color:#003366;}
ul.dial:after{clear:both; content:""; display:block;}

/*ボディ脱毛*/
div.body_plan{display: flex; justify-content: space-between; margin-bottom:30px;}
div.body_plan:after{content:""; display:block; clear:both;}
div.body_plan table{width:48%;  box-sizing: border-box;}
div.body_plan table td.yen{font-size:110%;}

/*画像クリッカブルマップ*/
.areaMapWrap{
  background: url(../images/mens_datsumou/area_body.png) left top no-repeat;
}

.areaMap{
  max-width: 100%;
  height: auto;
}

/*料金一覧*/
table.pricelist{ width:100%;}
table.pricelist th, table.pricelist td{padding:12px; border:1px solid #9FB3D9;}
table.pricelist th{background-color:#D6E4FC; color:#003366;}
table.pricelist thead th{background-color:#006699; color:#FFFFFF;}
table.pricelist tr:nth-child(odd){ background-color:#EDF4F8;}
table.pricelist td{text-align:right; white-space:nowrap;}
ul.price_other{margin-left:24px; margin-top:8px;}

/*剃毛料金*/
div.pricelist_frame{display:flex; margin-top:8px;}
div.pricelist_frame div{width:100%;}
table.pricelist_shave{border-collapse:collapse; border: none; width:93%;}
table.pricelist_shave th, table.pricelist_shave td{padding:8px; border:1px solid #999999;}
table.pricelist_shave th{background-color:#CCCCCC; color:#333333;}
table.pricelist_shave td{text-align:right; white-space:nowrap;}
table.pricelist_shave tfoot td{text-align:right; border:none;}
table.pricelist_shave span{display:block; font-weight:normal; font-size:0.8em;}


/*院長*/
#Main .photo{float:left; width:160px; padding-top:20px;}
#Main .text{float:left; width:68%; padding-top:20px;}
ul.mrg{margin-left:18px;}

/*毛根のみに反応する医療用レーザー機器を使用*/
#Main .MLeft{float:left; width:64%;}
#Main .MRight{float:right;}

/*メンズ脱毛のメリット*/
ul.MList{margin:0; padding:0; font-size:90%; list-style:none;}
ul.MList li{background:url(../images/mens_datsumou/mark.gif) no-repeat center left; padding:8px 0 10px 22px; margin:0 4px; color:#336699;}

/*施術について*/
#Main .data dt{font-weight:700; color:#003399; border-left:6px double #339900; padding:0 0 0 6px; margin:20px 0 6px 0;}
#Main .data dd{line-height:1.6em; margin-bottom:20px;}

@media screen and (max-width:960px){
#Main .MLeft{float:left; width:60%;}
}

@media screen and (max-width:950px){
#Main .MLeft{float:left; width:66%;}
}

@media screen and (max-width:790px){
#Main .MLeft{float:left; width:60%;}
}

@media screen and (max-width:670px){
div.pricelist_frame{display:block;}
div.pricelist_frame div{display:block;}
table.pricelist_shave{width:100%;}
table.pricelist_shave th{width:40%;}
table.pricelist_shave span{display:inline-block;}
table.bordernone td:first-of-type,
table.bordernone th:first-of-type{border-top:none;}
}


@media screen and (max-width: 650px){
div.body_plan table{ font-size:90%;}

#Main .photo{float:none; width:auto; text-align:center;}
#Main .text{float:none; width:auto; margin-top:0;}

#Main ul.dial li{width:46%;}

#Main .MLeft{float:none; width:auto;}
#Main .MRight{float:none; text-align:center; padding-top:12px;}

}

@media screen and (max-width:560px){
table.plan td.yen span{display:block;}
table.plan td.yen p.cam span{display:block;}
table.plan td.yen hr{margin:0; padding:0 0 4px;}

table.plan td.spc{ display:none; border:none;}

div.body_plan{display:block; justify-content:normal;}
div.body_plan table td{width:30%; padding:10px;}
div.body_plan table th{ width:38%;}
div.body_plan table{width:100%;  box-sizing:content-box;}
div.body_plan table:first-child td, div.body_plan table:first-child th{border-bottom:none;}

table.pricelist th span{display:block;}

}

@media screen and (max-width:580px){
.areaMapWrap{background-size:contain;}
}

@media screen and (max-width: 480px){
#Main ul.dial li{width:auto; float:none; margin:4px 0;}

table.plan td.yen span strong{display:block;}
}

@media screen and (max-width:440px){
img{max-width:100%;}
table.pricelist{font-size:0.9em;}
table.pricelist th, table.pricelist td{padding:8px 2px;}

table.pricelist_shave span{display:block;}
}