@charset "UTF-8";
/* CSS Document */

#main{
}
.plan_kv{
	width: 100%;
	height: 50vh;
    background: linear-gradient(rgba(0, 0, 0, .5),  rgba(0, 0, 0, .5)), url("../images/plan/subpage.jpg");
	background-position: center;
    background-size: cover;
    position: relative;
}

#main .pc{
	display:none;
}
#main .sp{
	display:block;
}
#main .att{
	margin: 20px auto;
	font-size:10px;
	line-height:1.8em;
	text-align: left;
}

/*pc*/
@media screen and (min-width: 758px){
.plan_kv{
	width: 100%;
	height:500px;
    background: linear-gradient(rgba(0, 0, 0, .5),  rgba(0, 0, 0, .5)), url("../images/plan/subpage.jpg");
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

#main .pc{
	display:block;
}
#main .sp{
	display:none;
}
}

/*sp*/
.plan-navi {
  margin: 0px auto 0;
  position: relative;
  width: 100%;
  min-height: 54px;
}
.plan-navi ul{
    width: 100%;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #ECECEC;
    padding: 50px 10px 10px 10px;
}
.plan-navi ul li{
    width: 45%;
    margin: 0px auto;
    padding: 5px;
}

.plan-navi ul li a {
  width: 100%;
  line-height: 20px;
  font-size: 16px;
  border-radius: 5px;
  display: inline-block;
  position: relative;
  background-color: #336d53;
  text-decoration: none;
  text-align: center;
  color: #FCF1EB;
  cursor: pointer;
  padding: 20px;
  letter-spacing: 0;
}
.plan-navi ul li a:hover,.plan-navi ul li a.active{
	background-color:#97864f;
}
.plan-navi  ul li a span{
  font-size: 2.0em;
}
/*pc*/
@media screen and (min-width: 758px){
.plan-navi {
  margin: 20px auto 80px;
  position: relative;
  width: 100%;
  max-height: 54px;
  padding: 0px;
}
.plan-navi ul{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  padding: 0px;
}
.plan-navi ul li{
    width: 20%;
    margin: 10px auto;
    border-bottom:none;
    padding:20px 0px;
}
.plan-navi  ul li a {
  width: 100%;
  font-size: 16px;
  padding: 20px;
  margin: 0 auto;
}
.plan-navi  ul li a span{
  font-size: 2.0em;
}
}

/*１------------------------------------------------*/
.content1{
	padding-bottom:10px;
}
.content1 .type_area{
	display: block;
    width:100%;
    margin: 40px auto;
}
.content1 .type_area h3{
    width: 90%;
    margin: 40px auto 80px;
}
.content1 .type_area h3 img{
    width: 100%;
}
    
.content1 .type_area .type_btn ul{
    width: 100%;
	display: block;
}
/*pc*/
@media screen and (min-width: 758px){
.content1{
	padding-bottom:0px;
}	
.content1 .type_area{
	display: flex;
	justify-content: space-between;
    max-width: 1200px;
    margin: 60px auto;
}
.content1 .type_area h3{
    width: 60%;
    margin: 0px auto;
}
.content1 .type_area h3 img{
    width: 100%;
}
    
.content1 .type_area .type_btn ul{
    width: 40%;
    margin: 60px auto;
}
}
/************************************
** button plan
************************************/

.planBtn p { margin:0;padding:0;line-height:1.2 !important;font-size:1.2em; }
.planBtn a.typebtn {
	position: relative;
	display:inline-block;
	width:96%;
	margin-left:2%;
    margin-bottom: 2%;
	padding:5px 0 8px 20px;
	color:#666;
	background-color:#eaeaea;
	font-weight:normal;
	text-align:left;
	border-radius:4px;
	border:2px solid #BCBCBC;
	text-decoration:none;
	transition: .4s;
}
.planBtn a.typeOff {
	opacity:0.5;
	background-color:#bdbdc1;
	cursor:default;
	transition:.0s;
}

	.planBtn a.typeOff .ttl { color:#666; }
	.planBtn a.typeOff .area { color:#777; }

	.planBtn p { margin:0;padding:0;line-height:1.4;font-size:1.2em; }
	.planBtn .roomInfo {  }

p.roomInfo {}
		.planBtn .roomType { color: #336d53; }
		.planBtn .roomNum { color: #336d53;font-size:16px; }
			.planBtn .roomNum em { font-size:24px; }
	.planBtn .ttl { font-size:14px;color:#000;margin-left:5px; }
	.planBtn .area { font-size:1.6em;color:#000;}
	.planBtn sup { font-size:9px; }
	td sup { font-size:9px; }
	.planBtn .tsubo { font-size:16px; }

	.typebtn .roomInfo:first-letter { font-size:190%;margin-right:3px; }
	.typebtn .roomLdk:first-letter { font-size:150%;margin-left:15px;margin-right:2px; }

	.planBtn a.this { background-color:#336d53
;color:#fff; }
	.planBtn a.this .roomType { color:#fff; }

	.planBtn a.typebtn:hover { color:#fff;background-color:#336d53
; }
	.planBtn a.typebtn:hover .roomType,.planBtn a.typebtn:hover .roomNum,
	.planBtn a.typebtn:hover .ttl,.planBtn a.typebtn:hover .area { color:#fff;transition: .4s; }

	.planBtn a.typeOff:hover { color:#666;background-color:#bdbdc1; }
	.planBtn a.typeOff:hover .roomType,.planBtn a.typeOff:hover .roomNum,
	.planBtn a.typeOff:hover .ttl,.planBtn a.typeOff:hover .area { color:#666;transition:none; }

	.planBtn a .roomInfo { display:inline-block;width:99%; }
	.planBtn a .roomLdk { display:inline-block; }
	.planBtn a .roomArea { display:block; }

	.planBtnPages { padding:20px 0; }
	.planBtnPages .planBtn a { width:15%;min-width:125px;margin:0 1% 0 0; }
	.planBtnPages .typebtn .roomInfo:first-letter { font-size:150%;margin-right:2px; }
	.planPages h1 { margin-top:0;padding:0 0 0 10px; }
	.planPages h1.normal:first-letter { font-size:150%;margin-right:2px; }
	.planPages h1.normal .roomLdk { display:inline-block;font-size:0.8em;margin:0 0 0 25px;color:#271016; }
		.planPages h1.normal .roomLdk:first-letter { font-size:130%; }
	.planPages .roomInfo { line-height:1.4;padding:0 8px 5px 6px;margin:15px 0 0 0; }
		.planPages .roomInfo .roomNum { border:1px solid #271016;display:inline-block;margin:0 8px 0 0;padding:0 6px 2px 5px; }
		.planPages .roomInfo em { font-size:1.4em;}
	.planPages .roomArea { padding:3px 10px 4px 17px;margin:10px 0 0 0;background-color:#E6E9DD;line-height:1.5;border-radius:4px; }
	.planPages .roomFloa { padding:5px 15px;margin:10px 0 0 0; }
		.planPages .roomArea .area { font-size:1.7em;margin-left:10px; }
		.planPages sup { font-size:10px; }

@media screen and (max-width:414px){
	.planBtn p { margin:0;padding:0;line-height:1.2 !important;font-size:1.1em; }
	.planBtn a.typebtn {
		padding:8px 0 5px 12px;
	}
		.planBtn .roomNum { color: #336d53;font-size:14px; }
			.planBtn .roomNum em { font-size:14px; }

	.typebtn .roomInfo:first-letter { font-size:180%;margin-right:2px; }
	.typebtn .roomLdk:first-letter { font-size:120%;margin-left:0px;margin-right:2px; }
	.planBtn a.typebtn { font-size:14px; }
	.planBtn a.typebtn span { font-size:12px; }

	.planBtnPages { padding:6px 4px; }
	.planBtnPages .planBtn a { width:23%;min-width:50px;margin:0 3px 0 0; }
	.planBtnPages .planBtn .typebtn .roomInfo:first-letter { font-size:140%;margin-right:1px; }

	.planBtnPages .planBtn a.typebtn:after {
		right:4px;
		margin-top: -16px;
	}
}
@media screen and (max-width:320px){
	.planBtnPages .planBtn a.typebtn:after {
		right:0px;
		margin-top: -16px;
	}
	.planPages .roomInfo em { font-size:1.1em; }
}

/*コンテンツ2*/
/*sp*/
.content2{
    background-color: #FFF;
    margin: 20px auto;
}
.content2 .plan_outline{
    width: 100%;
	margin:0px auto;
}
.content2 .plan_outline .article{
    width: 100%;
}
.content2 .plan_outline .article .title{
    font-weight: bold;
    padding: 5px 0;
    border-bottom: solid 2px #222222;
}
.content2 .plan_outline .article .title span{
    font-size: 32px;
    font-weight: bold;
    border: none;
}
.content2 .plan_outline .article>p{
    border-bottom: dotted 1px #222222;
    padding: 17px;
}
.content2 .plan_outline .article>p span{
    font-size: 1.4em;
    font-weight: bold;
    border: solid 1px #222222;
    padding: 5px;
}
.content2 h3 img{
	width:100%;
	margin:20px auto;
}
.content2 h4 img{
	width:100%;
	margin:40px auto;
}
/*pc*/
@media screen and (min-width: 758px){
.content2{
    margin: 0px auto 40px;
}
.content2 .plan_outline{
    width: 100%;
    display: flex;
    justify-content: space-between;
	margin:40px auto;
}
.content2 .plan_outline .article{
    width: 45%;
}
.content2 .plan_outline .article .title{
    font-size: 20px;
    font-weight: bold;
    padding: 5px 0;
}
.content2 .plan_outline .article .title span{
    font-size: 40px;
    font-weight: bold;
}
.content2 .plan_outline .article>p{
    padding-bottom: 17px;
}
.content2 .plan_outline .article>p span{
    font-size: 1.4em;
    font-weight: bold;
}
.content2 .plan_outline h3{
    width: 45%;
}
.content2 .plan_outline h3 img{
    width: 100%;
}
.content2 h4 img{
	width:980px;
	margin:40px auto;
}
}

/*pc*/
.backarea{
    width: 100%;
	background-color:#eaeaea;
    margin: 0px auto;
    height: 100px;
    position: relative;
}
 .backarea .btn_center_p{
    text-align: center;
    margin: 0px auto;
     position: absolute;
     top: 50%;
     left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}
 .btn_center_p a{
	font-size: 16px;
	color: #231815;
	background: #FFFFFF;
    border: solid 1px #9e9e9f;
    padding: 5px 60px;
    position: relative;
}

 .btn_center_p a:hover {
    background-color: transparent;
    color: #fff;
}

 .btn_center_p a::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background-color: #336b53;
    content: '';
    transition: width .3s ease;
}

 .btn_center_p a:hover::before {
    width: 100%;
}


/*sp*/
@media (max-width: 767px){
.backarea{
    width: 100%;
    margin: 60px auto 0;
}
 .btn_center_p{
    text-align: center;
}
 .btn_center_p a{
	font-size: 13px;
	color: #231815;
    padding: 5px 20px;
    position: relative;
}

 .btn_center_p a:hover {
    background-color: transparent;
    color: #fff;
}

}