@charset "utf-8";
/* CSS Document */
.modalbox{
	background:#fff;
	max-width: 900px;
	width: 90%;
	position:relative;
	padding:3% 3%;
	margin:100px auto 0;
	color:#000;
	letter-spacing: 2px;
}
.modalbox h2,.modalbox h3,.modalbox h4{
	font-size:17px;
}
.modalbox h2{
	line-height: 1.7;
}
.modalbox-2{
	background:#fff;
	max-width: 850px;
	width: 90%;
	position:relative;
	padding:3% 3%;
	margin:100px auto 0;
	color:#000;
	letter-spacing: 2px;
}
.modal-pic{
	margin-bottom: 40px;
}
.modal-tex p{
	font-size:13px;
	line-height: 2.1;
}
.modal-tex .logo{
	float:left;
	width: 20.4%;
	padding-left:2%;
}
.modal-tex .text{
	float:right;
	width: 77%;
}

.modal-tex .text p{
	font-size:12px;
}
.modal-top .left-box{
	width: 46%;
	float:left;
}
.modal-top .right-box{
	width: 50%;
	float:right;
}
.modal-top .right-box .price{
	font-size: 24px;
	font-weight: 600;
	color: #998459;
	margin-top: 1em;
}
.modal-top .right-box .price span{
	display: inline-block;
	font-size: 14px;
	margin-left: -0.5em;
}
.modal-top .right-box .price.ex{
	margin-left: 3%;
	width: 72%;
}
.modal-content .close{
	position: fixed;
	top:3%;
	right:3%;
	width: 40px;
	cursor: pointer;
}
.modal-madori{
	font-size:0;
}
.modal-madori > p{
	display: inline-block;
	width: 47%;
	vertical-align: bottom;
	margin: 0 1%;
}
.plan-tex p{
	font-size:9px;
}
.bottom-box{
	padding:0 0 0 4%;
	background: #f6f4ee;
}
.bottom-box .bottom-ttl{
	width: 22%;
	top:-20px;
	left:2%;
	position: absolute;
}
.bottom-box .point-1{
	width: 29%;
	float: left;
	padding-top: 25px;
}
.bottom-box .point-1 p{
	font-size:13px;
}
.bottom-box .point-2{
	width: 30%;
	float: left;
	padding-top: 25px;
	margin-left: 4%;
}
.bottom-box .point-3{
	width: 35%;
	float: right;
}
.mini-tex{
	font-size:12px;
}
.mini-tex-2{
	font-size:11px;
}
.bottom-box .point-1 .notes,.notes{
	font-size:10px!important;
	line-height: 1.25;
}
.modalbox .ex-img{
	width: 66%;
}

.list-box-1{
	font-size:0;
}
.list-box-1 .list{
	display: inline-block;
	width: 30%;
	vertical-align: top;
	margin-right: 4%;
}
.list-box-1 .list.last{
	margin-right: 0;
}
.list-box-1 .list h3,.list-box-2 h3{
	background: #f3f4f4;
	padding:12px 0;
	text-align: center;
}
.list-box-1 .list .list-tex{
	text-indent: -1em;
	padding-left: 1em;
	font-size:12px;
}

.list-box-2 > div{
	width: 45%;
}
.list-box-2 .img{
	width: 83%;
	margin-left: auto;
	margin-right: auto;
}
.full-box .name{
	width: 16%;
}
.full-box .name.ex{
	width: 43%;
}
.ptn-box{
	border:1px solid #000;
	padding:10px 10px;
	width: 100%;
}
.ptn-box li{
	display: inline-block;
	vertical-align: middle;
	width: 50%;
}
.ptn-box li:nth-child(1){
	padding-right: 3%;
	border-right:1px solid #000;
	width:49%;
}
.ptn-box li:nth-child(2){
	padding-left: 3%;
	font-size:11px;
	width: 46%;
}
.ptn-box li .maru{
	background: #000;
    border-radius: 30px;
    width: 26px;
    text-align: center;
    padding:6px 4px;
    color: #fff;
    display: inline-block;
	line-height: 1;
	margin-right: 1px;
}
.list-box-3{
	font-size:0;
}
.list-box-3 li{
	width: 49%;
	margin-right: 2%;
	margin-bottom: 2%;
	float: left;
	background: #e5e0ce;
	display: block;
	vertical-align: top;
}
.list-box-3 li:nth-child(2n){
	margin-right: 0;
}
.list-box-3 li .gr-bg{
	padding:10px 10px;
	height: 91px;
	background: rgba(0,0,0,0.1);
}
.list-box-3 li .gr-bg dt {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0px;
}
.list-box-3 li .gr-bg dd{
	font-size:11px;
}
.pic-txt{
	width: 10%;
	position: absolute;
	right:2%;
	bottom:2%;
}
.sub-ttl-img{
	width: 57%;
}
.select-box{
	padding:6% 3%;
	background: #e5e0ce;
}
.select-box ul{
	font-size:0;
}
.select-box li{
	display: inline-block;
	width: 48%;
	margin-right: 3%;
}
.select-box li:last-child{
	margin-right: 0;
}
.ptn-box li .maru-img{
	width: 20px;
	display: inline-block;
	padding-top: 3px;
	vertical-align: bottom;
}
.prew{
	position: absolute;
	top:50%;
	left:-35px;
	width: 25px;
	z-index: 99999;
	cursor: pointer;
}
.next{
	position: absolute;
	top:50%;
	right:-35px;
	width: 25px;
	z-index: 99999;
	cursor: pointer;
}
@media print, screen and (min-width : 769px) {
	.plan-tex.ex{
		margin-top: -100px;
	}
	.modal-madori > p.last{
		margin:30px 1% 0!important;
	}
	/*.modal-top{
		margin-bottom: 30px;
	}*/
	.modal-top .left-box.ptn2{
		width: 34%;
		margin-left: 7%;
		float:left;
	}
	.modal-top .right-box.ptn2{
		width: 47%;
		float:right;
		margin-right: 5%;
	}
	.modal-madori{
		width: 84%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (max-width : 768px) {
.modalbox,.modalbox-2{
	padding:6% 6%;
	margin-bottom:30px;
}
.modal-pic{
	margin-bottom: 7%;
}
	.modal-top{
		margin-bottom: 20px;
	}
.modal-top .left-box{
	width: 76%;
	margin-left: auto;
	margin-right: auto;
	float:none;
	margin-bottom: 4%;
	margin-top: 4%;
}

.modal-top .right-box{
	width: 100%;
	float:none;
	margin-bottom: 5%;
}
.modal-tex p{
	font-size:11px;
	line-height: 1.75;
}
.modal-tex .text p{
	font-size:11px;
}
.modal-tex .logo{
	float:none;
	width: 50%;
	margin-left:auto;
	margin-right: auto;
	margin-bottom: 3%;
	padding-left:0%;
}
.modal-tex .text{
	float:none;
	width: 100%;
	margin-left:auto;
	margin-right: auto;
}
.modal-top .right-box .price{
	font-size: 6vw;
	margin-top: 1em;
}
.modal-top .right-box .price span{
	font-size: 3vw;
}
.modal-top .right-box .price.ex{
	width: 72%;
}
.modal-content .close{
	position: absolute;
	top:3%;
	right:3%;
	width: 30px;
	cursor: pointer;
}
.modal-madori{
	font-size:0;
}
.modal-madori > p{
	display: block;
	width: 100%;
	vertical-align: bottom;
	margin: 0 0 5%;
}
.plan-tex p{
	font-size:10px;
}
.bottom-box{
	padding:0 0 0 0%;
	background: #f6f4ee;
}
.bottom-box .bottom-ttl{
	width: 44%;
	top:-20px;
	left:2%;
	position: absolute;
}
	.plan-tex{
		padding-left: 4%;
	}
.bottom-box .point-1{
	width: 100%;
	float:none;
	margin-bottom: 3%;
	padding-top: 12%;
	padding-left: 4%;
	padding-right: 4%;
}
.bottom-box .point-2{
	width: 100%;
	float:none;
	padding-top: 0%;
	margin-bottom: 7%;
	padding-left: 0%;
	padding-right: 4%;
}
.bottom-box .point-3{
	width: 100%;
	float:none;
}
.mini-tex{
	font-size:12px;
}	
.mini-tex-2{
	font-size:10px;
}		
.list-box-1{
	font-size:0;
}
.list-box-1 .list{
	display: block;
	width: 100%;
	margin-bottom: 6%;
	margin-right: 0;
}
.list-box-1 .list.last{
	margin-right: 0;
	margin-bottom: 0;
}
.list-box-1 .list h3,.list-box-2 h3{
	padding:3% 0;
	text-align: center;
}
.list-box-1 .list .list-tex{
	text-indent: -1em;
	padding-left: 1em;
	font-size:12px;
}
.list-box-2 > div{
	width: 100%;
}
.full-box .name{
	width: 32%;
}
.ptn-box{
	padding:3% 3%;
	width: 100%;
}
.ptn-box li{
	display: block;
}
.ptn-box li:nth-child(1){
	padding:3% 3%;
	border-right:none;
	border-bottom:1px solid #000;
	width:100%;
	margin-bottom: 2%;
	line-height: 2.25;
}
.ptn-box li:nth-child(2){
	padding-left: 3%;
	font-size:11px;
	line-height: 1.5;
	width: 100%;
}
.ptn-box li .maru{
	background: #000;
    border-radius: 30px;
    width: 26px;
    text-align: center;
    padding:6px 4px;
    color: #fff;
    display: inline-block;
	line-height: 1;
	margin-right: 1px;
}
	
.list-box-3{
	font-size:0;
}
.list-box-3 li{
	width: 100%;
	margin-right: 0%;
	margin-bottom: 4%;
	background: #e5e0ce;
	display: inline-block;
	vertical-align: top;
}
.list-box-3 li:nth-child(2n){
	margin-right: 0;
}
.list-box-3 li .gr-bg{
	padding:10px 10px;
	background: rgba(0,0,0,0.1);
	height: auto;
}
.list-box-3 li .gr-bg dt{
	font-size:13px;
}
.list-box-3 li .gr-bg dd{
	font-size:11px;
	line-height: 1.2;
}
.select-box li{
	display: block;
	width: 100%;
	margin-right: 0%;
	margin-bottom: 5%;
}
.select-box li:last-child{
	margin-right: 0;
}
.ptn-box li .maru-img{
	width: 20px;
	display: inline-block;
	padding-top: 0px;
	vertical-align: middle;
	line-height: 1;
}
.sub-ttl-img{
	width: 72%;
}
.prew{
	position: absolute;
	top:50%;
	left:-15px;
	width: 10px;
}
.next{
	position: absolute;
	top:50%;
	right:-15px;
	width: 10px;
}

.mado1 img{
	margin-left: 2px;
}
.mado2 img{
	margin-left: -20px;
}
.mado3 img{
	margin-left: -8px;
}
.mado4 img{
	margin-left: 2px;
}
.mado5 img{
	margin-left: -12px;
}
.mado6 img{
	margin-left: 8px;
}
.mado7 img{
	margin-left: -14px;
}
.mado8 img{
	margin-left: 7px;
}
	
.mado9 img{
	margin-left: -16px;
}
.mado10 img{
	margin-left: 7px;
}
}
.mado11 img{
	margin-left: -9px;
}
	
.mado12 img{
}
.mado13 img{
	margin-left: -9px;
}
.mado14 img{
}
	
.mado15 img{
	margin-left: -21px;
}
.mado16 img{
}
.mado17 img{
}
.mado18 img{
	margin-left: 7px;
}
.mado19 img{
}
.mado20 img{
}
.mado21 img{
	margin-left: 11px;
}
.mado22 img{
	margin-left: 8px;
}

.mado23 img{
	margin-left: -10px;
}
.mado24 img{
	margin-left: 11px;
}
body.openmodal{
  overflow: hidden;
  height: 100%;
}
/*.modal-content{
	overflow: scroll!important;
}
.modalbox{
	overflow: scroll;
}*/
}

@media screen and (min-width: 768px) and (max-width:769px){
.list-box-3 li .gr-bg dt {
    font-size: 18px!important;
    font-weight: bold;
    letter-spacing: 0px;
}
.list-box-3 li .gr-bg dd {
    font-size: 14px!important;
    line-height: 1.2;
}
.modalbox h2, .modalbox h3, .modalbox h4 {
    font-size: 20px!important;
}
}