@charset "utf-8";
/* CSS Document */
.obe1 {
	background:url("../../images/ttl_obe1.jpg") top  / contain no-repeat; 
}

.obe2 {
	background:url("../../images/ttl_obe2.jpg") top  / contain no-repeat;
}
.pr-container {
	display: flex;
	flex-direction: column;
}
.pr-kobetsu5 {
	width: 100%;
}
.pr-kobetsu5 h4 {
	text-align: left;
	margin-left: 20%;
}
.pr-kobetsu3 {

}
p.description {
	text-align: center;
}
.setsumei-wrap {

}
p.pr-comment {

}
.pr-imgarea h4 {
	font-size: 1.1rem;
}
.pr-imgarea {
	background-image: none;
}
.syubetsu {
	display: block;
	width: 15%;
	position: absolute;
	top: -10;
	padding: 1.5px;
	background-color: green;
	color: #fff;
	font-weight: bold;
	text-align: center;
	font-size: 0.9rem;
}
.price {
	color: red;
	font-weight: bold;
	text-align: right;
}
.pr-kobetsu5 a {
	color: #000;
	text-decoration: none;
}

@media screen and (min-width:768px) {
.pr-container {
	display: flex;
	padding: 20px;
	width: 80%;
	margin: 0 auto;
	flex-flow: row wrap;
	justify-content: space-around;
}
.pr-kobetsu5 {
	display: block;
	box-sizing: border-box;
	width: 48%;
	padding: 0;
	border: 1px solid green;
	margin-bottom: 50px;
}
.pr-kobetsu5 h4 {
	text-align: center;
	margin-left: 0;
}
.pr-kobetsu3 {
	display: block;
	box-sizing: border-box;
	width: 30%;
	padding: 0;
	border: 1px solid green;
	margin-bottom: 50px;
}

.setsumei-wrap {
	position: relative;
	padding: 0px;
}
p.pr-comment {
	padding: 0 1em;
	text-indent: 1em;
}
.pr-imgarea h4 {
	margin-bottom: 0;
}
.pr-imgarea img {
	width: 100%;
}
.syubetsu {
	display: block;
	width: 20%;
	position: absolute;
	top: -10;
	padding: 3px;
	background-color: green;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
.price {
	color: red;
	font-weight: bold;
	text-align: center;
}
	.pr-main {
		width: 90%;
		max-width: 1100px;
		margin: 0 auto;
	}
	.pr-main h2 {
		width: 100%;
	}
	.pr-kobetsu5 {
		height: auto;
	}
	.pr-kobetsu5 a {
		text-decoration: none;
		color: #000;
	}
	.pr-imgarea {
		position: relative;
		height: 300px;
	}
	.pr-imgarea.obe1 {
		background: url("../../images/ttl_obe1.jpg") center / cover no-repeat;
	}
	.pr-imgarea.obe2 {
		background: url("../../images/ttl_obe2.jpg") center / cover no-repeat;
	}

	.pr-imgarea h4 {
		position: absolute;
		bottom: -1%;
		left: 0%;
		background-color: #000;
		color: #fff;
		width: 100%;
		text-align: left;
		text-indent: 0.5rem;
		padding: 15px 0;
		opacity: 0.7;
		margin-bottom: 0;
	}
	p.price {
		text-align: left;
		padding-left: 1em;
		font-size: 1.2em;
	}
    .area-list {
        display: flex;
        flex-flow: row wrap;
        width: 100%;
        max-width: 768px;
        margin: 0 auto 75px;
    }
    .area-list dt,.area-list dd {
        flex: 0 1 33%;
        line-height: 2;
        padding-bottom: 2px;
        padding-top: 2px;
        border-bottom: 1px solid #ddd;
    }
    .area-list dt {
        border-left: 1px solid #ddd;
    }
    .area-list dd {
        padding-left: 0;
        margin-left: 0;
    }
    .area-list dt:first-child {
        background-color: green;
        color: #fff;
        border-left: 1px solid #ddd;
    }
    .area-list dt + dd {
        border-left: 1px solid #ddd; 
        border-right: 1px solid #ddd;
    }
    .area-list dt + dd + dd {
        border-right: 1px solid #ddd;
    }
    .area-list dt:first-child + dd {
        background-color: green;
        color: #fff;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
    }
    .area-list dt:first-child + dd + dd {
        background-color: green;
        color: #fff;
        border-right: 1px solid #ddd;
    }
    .plan-wrap ul {
        width: 100%;
        max-width: 768px;
        margin: 30px auto;
        
    }
    .plan-wrap li {
        text-align: left;
    }
    .plan_area_list {
        display: flex;
        flex-flow: row wrap;
        width: 100%;
        max-width: 600px;
        margin: 25px auto;
    }
    .plan_area_list dt,.plan_area_list dd {
        flex: 0 1 25%;
        position: relative;
    }
    .plan_area_list dt::after {
        content: ":";
        position: absolute;
        right: 0;
        color: #333;
    }
    .plan_area_list dd {
        padding-left: 0;
        margin-left: 0;
    }
    
    


}
@media screen and (max-width: 767px){
	.company-head {
	height: 100px;
}
    
    .area-list {
        display: flex;
        flex-flow: row wrap;
    }
    .area-list dt {
        flex: 0 1 30%;
        font-size: 11px;
        text-align: center;
        line-height: 2;
        border-bottom: 1px solid #ddd;
    }
    .area-list dd {
        flex: 0 1 34.5%;
        margin-left: 0;
        font-size: 11px;
        line-height: 2;
        text-align: center;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    
    .area-list dt:first-child {
        background-color: green;
        color: #fff;
        text-align: center;
    }    
    
    
        .area-list dt:first-child + dd {
        background-color: green;
        color: #fff;
        text-align: center;   
    }
    .area-list dt:first-child + dd + dd {
        background-color: green;
        color: #fff;
        text-align: center;   
        border-right: 1px solid #ddd;
    }
    .plan-wrap li {
        font-size: 12px;
    }
    .plan_area_list {
        display: flex;
        flex-flow: row wrap;
    }
    .plan_area_list dt,.plan_area_list dd {
        flex: 0 1 25%;
        text-align: center;
        font-size: 12px;
        line-height: 2;
        position: relative;
    }
    .plan_area_list dt::after {
        content: ":";
        position: absolute;
        right: 0;
    }
    .plan_area_list dd {
        margin-left: 0;
    }
	
	
	
	
}