@charset "utf-8";
/* CSS Document */
table, tbody, tr{ width: 100%;}

#plan h3{ text-align: center; margin: 0 0 85px;}
#plan h4 span{ font-size: 16px; display: inline-block;}
#plan .box{ margin: 0 0 90px;}
#plan .box .txt1{ text-align: center; font-size: 18px; padding: 0 0 25px; line-height: 1.5;}
#plan .box3 .img{ text-align: center;}

table{ font-size: 17px; line-height: 1.5; border: 1px #575757 solid;}
table th{ padding: 20px 10px;text-align: center; color: #fff; background: #ad4271;}

.box .table1 .col1{ width: 18.5%;}
.box .table1 .col3{ width: 28%;}
.box .table1 .bg1{ background: #f7ecf1; text-align: center;}
.box .table1 th{ border-right: 1px #fff solid;}
.box .table1 th:last-of-type{ border: none;}
.box .table1 td{ padding: 5px 10px; border: 1px #575757 solid;}
.box .table1 td:last-of-type{ text-align: center;}
.box .table1 td.textL{ text-align: left;}

.box .table2 th{ border-bottom: 1px #fff solid; width: 38.5%;}
.box .table2 tr:last-of-type th{ border: none;}
.box .table2 td{ padding: 0 10px 0 20px; border: 1px #575757 solid;}
.box .tit_red { font-size: 26px;  color: #ad4271;  border-left: 4px #ad4271 solid;  padding-left: 20px; line-height: 1.2; margin: 0 0 30px;}
.box .f14{ padding: 13px 0 0;}

.table3 {width: 1079px; margin-bottom: 10px;}
.table3 .col1{ width:190px;}
.table3 .col2{ width:320px;}
.table3 .col3{ width:120px;}
.table3 .col4{ width:200px;}
.table3 .bg1{ background: #f7ecf1; text-align: center;}
.table3 th{ border-right: 1px #fff solid; flex-wrap: nowrap; }
.table3 th:last-of-type{ border: none;}
.table3 td{ padding: 5px 10px; border: 1px #575757 solid; flex-wrap: nowrap;}
.table3 td.textL{ text-align: left;}

.pc{
	display: block;
}

@media only screen and (max-width: 1080px){
	table{ font-size: 14px;}
}
@media only screen and (max-width: 767px){
	.pc{display: none;}
	#plan .box{ margin: 0 0 12vw;}
	.box .table1 tr:nth-of-type(1){ display: none;}
	.box .table1 tr{ position: relative; display: block; border-bottom: 1px #575757 solid;}
	.box .table1 tr:last-of-type td:last-of-type:before{ border-bottom: none;}
	.box .table1 td{ width: 100%; display: block; padding: 10px 10px 10px 115px; border:none; border-bottom: 1px #575757 solid; position: relative;}
	
	.box .table1 td:before{ position: absolute; left: 0; top: 0; width: 100px; height: 100%; color: #fff; background: #ad4271; border-bottom: 1px #fff solid; display: flex;justify-content: center;align-items: center;}
	.box .table1 td:nth-of-type(1):before{ content: '費用名';}
	.box .table1 td:nth-of-type(2):before{ content: '内容';}
	.box .table1 td:last-of-type:before{ content: '金額';}
	.box .table1 td:nth-of-type(3):before, .box .table1 td.txtSp:before{ content: '入居人数';}
	
	.box .table1 td:last-of-type{ border-bottom: none; text-align: left;}
	.box .table1 .bg1{ text-align: left;}
	
	.box .table2 th{ display: block; width: 100%; padding: 15px 10px;}
	.box .table2 td{ display: block; width: 100%; padding: 10px; border: none;}

}
@media only screen and (max-width: 480px){
	#plan h3{ margin: 0 0 10vw;}
	#plan h4{ font-size: 16px;}
	#plan .box .txt1{ font-size: 3.8vw; padding: 0 0 4vw;}
	.box .tit_red{ font-size: 20px; padding-left: 10px;border-left: 2px #ad4271 solid;margin: 0 0 20px;}
}


/* ============== POPUP =============== */

.popup{ width: 1080px; padding: 40px 3.71%; display: none;}
.popup .pop_box1{ display: flex; justify-content: space-between; margin: 0 0 60px;}
.popup .pop_box1 .tit{ width: 27%;}
.popup .boxR{ line-height: 1.5; width: 70%;}
.popup .boxR .txt1{ font-size: 24px; padding: 0 0 17px;}
.popup .boxR .txt1 span{ display: block; color: #ad4271;}
.popup .boxR .txt2{ margin: 0 0 30px;}
.popup .boxR .txt2 p{ font-size: 18px; position: relative; padding-left: 20px;}
.popup .boxR .txt2 p:before{ position: absolute; content: '■'; left: 0; color: #ad4271;}
.popup .boxR .inner{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.popup .boxR .inner .map{ width: 41%;}
.popup .boxR .inner .innerR{ width: 54.4%;}
.popup .boxR .inner .imgR{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 30px;}
.popup .boxR .inner .imgR li{ width: 47.4%; margin: 0 0 15px;}
.popup .boxR .inner .imgR p{ text-align: center; padding: 5px 0 0;}
.popup .boxR .inner .cap1{ font-size: 15px; padding: 0 0 20px;}
.popup .boxR .inner .cap2{ font-size: 12px;}
.popup .f14{ font-size: 12px;}

.popup .popbtn{ max-width: 860px; margin: 50px auto; display: flex; justify-content: space-between;}
.popup .popbtn a { width: 48%; font-size: 19px; line-height: 1; padding: 17px 0; color: #fff; text-align: center; display: block; background: #ad4271; position: relative;}
.popup .popbtn span { display: inline-block; position: relative; padding-left: 25px;}
.popup .popbtn span::before { position: absolute; content: ''; width: 16px; height: 16px; left: 0; background: url("../../images/common/ic_arrow.png") no-repeat; background-size: 100%; top: 55%; transform: translateY(-50%);}
.popup .popbtn .featherlight-close-icon{ display: block !important;}

.featherlight-close-icon, .featherlight-previous, .featherlight-next{ display: none !important;}

/* ============== Media =============== */
@media only screen and (max-width: 1080px){
	.popup{ width: 100%; margin: auto;}
}
@media only screen and (max-width: 1024px){
	.featherlight .featherlight-content{ width: 94%; max-height: 94%;}
}
@media only screen and (max-width: 767px){
	.popup{ padding: 30px 0;}
	.popup .pop_box1{ display: block;}
	.popup .pop_box1 .tit{ width: 65%; margin: 0 auto 30px; text-align: center;}
	.popup .boxR{ width: 100%;}
	.popup .boxR .inner{ display: block;}
	.popup .boxR .inner .map{ width: 100%; margin: 0 0 40px; text-align: center;}
	.popup .boxR .inner .innerR{ width: 100%;}
	.popup .boxR .inner .imgR{ max-width: 380px; width: 100%; margin: 0 auto 30px;}
	
	.popup .popbtn{ max-width: 480px; display: block;}
	.popup .popbtn a{ width: 100%; margin: 0 auto 20px;}
}
@media only screen and (max-width: 480px){
	.popup .boxR .txt1{ font-size: 4.2vw;}
	.popup .boxR .txt1 span{ padding: 5px 0 0;}
	.popup .boxR .txt2 p{ font-size: 3.5vw;}
	.popup .boxR .inner .cap1{ font-size: 14px;}
	.popup .boxR .inner .imgR li{ width: 49%;}
	.popup .boxR .inner .imgR p{ font-size: 3.3vw;}
}
	
@media print{
	h4{ margin: 0 0 20px;}
	.popup{ max-width: 1080px; width: 100%; padding: 0;}
	.popup .popbtn{ display: none !important;}
	.featherlight .featherlight-content{ margin-left: 0; margin-right: 0; width: 100%; padding: 0; max-height: 100%;}
	.popup .boxR .txt1{ font-size: 17px;}
	.popup .boxR .txt2 p, .popup .boxR .inner .imgR p{ font-size: 12px;}
	.featherlight{ position: relative !important;}
}
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}