@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Zen+Old+Mincho&display=swap');



@media screen and (max-width: 767px) {

.blck_ttl {
font-size: 18px;
text-align: center;
padding: 30px 0;
letter-spacing: 0.1em;
}
.blck_ttl_sub {
font-size: 16px;
color: #000;
padding: 20px 0;
margin-top:-80px;
}

.item_ttl {
color: #93a8bd;
font-size: 45px;
font-family: "Cinzel", serif;
text-shadow: 0.5px 0.5px 0 #93a8bd, -0.5px -0.5px 0 #93a8bd;
font-weight: 400;
line-height: 0.7;
padding-bottom: 20px;
}
.item_ttl_oth {
color: #93a8bd;
font-size: 24px;
font-family: "Cinzel", serif;
text-shadow: 0.3px 0.3px 0 #93a8bd, -0.3px -0.3px 0 #93a8bd;
font-weight: 400;
line-height: 1;
padding-top: 80px;
padding-bottom: 50px;
}
.tac {
text-align: center;
}
.item_ttl span {
font-size: 22px;
}
.item_honbun {
color: #595757;
font-size: 13px;
line-height: 1.6;
}
.lead_honbun {
font-size: 14px;
text-align: center;
padding: 0 0 80px;
line-height: 2.2;
color: #595757;
}
.ttl_view_box {
width: 92%;
margin: 0 auto;
display: flex;
}
.ttl_view_box .left_box {
padding:0 0 0 20px;
}


ul.plan_btn {
margin: 30px;
}
ul.plan_btn li {
box-sizing: border-box;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
position: relative;
background-color: #fff;
}
ul.plan_btn li .link_page{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: block;
		transition: .5s;
		opacity: 0;
	}
	ul.plan_btn li .link_page:hover{
		background-color: #fff;
		opacity: 0.4;
	}

	
	/**/
	
.nameBox {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.plan_name {
color: #93a8bd;
font-size: 30px;
font-family: "Cinzel", serif;
text-shadow: 0.3px 0.3px 0 #93a8bd, -0.3px -0.3px 0 #93a8bd;
font-weight: 400;
line-height: 1;
position: relative;
}
.plan_name span {
font-size: 16px;
padding-left: 5px;
}


.plan_spec {
font-size:11px;
color: #000;
text-align: right;
line-height: 1.2;
}
.plan_spec span {
font-size: 18px;
padding-left: 5px;
}
.plan_type {
font-size: 14px;
color: #4d4d4d;
font-family: san-serif;
line-height: 1;
padding-top: 5px;
}
.plan_type span {
font-size: 12px;
padding-left: 5px;
}
.plan_img {
width: 80%;
margin: 30px auto;
display: block!important;
}

.plan_other {
font-size: 11px;
color: #4d4d4d;
font-family: san-serif;
}

.plan_second {
margin: 0 auto;
display: none;
}

	
/**/	

ul.plan_cap {
font-size: 10px;
line-height: 1;
color: #000;
display: flex;
justify-content: flex-start;
margin: 0 0 10px 10px;
}
ul.plan_cap li {
margin-right: 20px;
min-width: 90px;
border: none!important;
margin-bottom: 0!important;
}
.plan_cap span.shuno {
background: #d0c8c4;
padding-left: 35px;
margin-right: 5px;
}
.plan_cap span.yukadan {
background: #eeebea;
padding-left: 35px;
margin-right: 5px;
}


.label_img {
width: 50%;
margin: 20px auto;
}
.modal_caption {
width: 100%;
margin: 20px auto;
text-align: left;
}
.modal_caption p {
font-size: 10px;
}

.menu_block_line {
margin-top: 30px;
padding-top: 30px;
border-top:2px dashed #d1c9c4;
}


.plan_area {
width: 98%;
margin: 0 auto;
box-sizing: border-box;
border:1px solid #ddd;
padding:20px;
}

ul.plan_feature {
width: 100%;
margin: 15px auto 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
ul.plan_feature li {
padding: 10px;
background-color: #f2eae7;
font-size: 12px;
text-align: center;
line-height: 1.5;
margin-bottom: 10px;
}
ul.plan_feature_pre {
width: 98%;
margin: 15px auto 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
ul.plan_feature_pre li {
padding: 10px;
background-color: #4D4D4D;
font-size: 12px;
text-align: center;
line-height: 1.5;
margin-bottom: 10px;
color: #fff;
}

/*--maru-button--*/

.btn_arrow{
	position: relative;
	display: inline-block;
	padding: 0 0 0 16px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 20px;
}
.btn_arrow::before,
.btn_arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;

}
.maru-ku::before{
	width: 38px;
	height: 38px;
	background: #93a8bd;
}
.maru-ku::after{
	left: 6px;
	width: 16px;
	height: 16px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.maru-ku_l::before{
	width: 38px;
	height: 38px;
	background: #93a8bd;
}
.maru-ku_l::after{
	left: 16px;
	width: 16px;
	height: 16px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

ul.linkbtn_area {
width: 100px;
margin: 0 auto 30px;
display: flex;
justify-content: center;
align-items: center;
}
ul.linkbtn_area li {
width: 50%;
}
ul.linkbtn_area li a:hover {
opacity: 0.6;
transition: .3s;
}


.btn_view {
width: 110px;
margin: auto auto 0;
}

.plan_img_detail {
width: 100%;
margin: 30px auto;
}

/**TAB**/

.tab {
position: relative;
display: inline-block;
}


.tab.active {
position: relative;
display: inline-block;
  color: #fff;
  background: #b5a39a;
}
.tab.active::after {
  content: ''; 
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #b5a39a;
  border-right: 1px solid #b5a39a; 
  border-bottom: 1px solid #b5a39a;
  transform: translate(-50%,55%) rotate(45deg); 
  transform-origin:center center;
}


.tab-contents {
  display: none;
}

.tab-contents.active{
  display: block;
}

ul.tab_menu {
width: 100%;
margin: 20px auto;
display: flex;
justify-content: space-between;
}
ul.tab_menu li {
width: 49%;
  box-sizing: border-box;
  padding: 0.5rem 0;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #fff;
  border: 1px solid #b5a39a;
  font-size: 11px;
  line-height: 1.3;
}

/* view */

.view_menu {
width: 98%;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex: 1;
}

.view_menu ul.menu_floor {
display: flex;
}
.view_menu ul.menu_floor li {
font-size: 18px;
font-family: "Montserrat", sans-serif;
font-weight: 300;
color: #8E7E76;
margin-left: 20px;
}

.view_menu ul.menu_floor li.fl_current {
border-bottom: 5px solid #C8C9CA;
}




ul.list_view {
  display: flex;
  justify-content: space-between;
  width: 50%;
  flex-wrap: wrap;
}
ul.list_view li {
width:calc(calc(100% - 10px) / 2);
text-align: center;
margin-bottom: 5px;
font-family: "Montserrat", sans-serif;
}
ul.list_view li a {
  transition: 0.3s;
  color: #8E7E76;
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  background-color: #fff;
  font-size: 14px;
  line-height: 1;
border-radius: 12px;
  border: 1px solid #8E7E76;
}
ul.list_view li a:hover {
background-color: #8E7E76;
color: #fff;
}
ul.list_view li a.active {
  cursor: text;
  background-color: #8E7E76;
  color: #fff;
}


/* タブコンテンツ */
	.view_contents{
		position: relative;
		margin: 0 auto 20px;
        padding-bottom: 100px;
	}
.view_contents > div {
width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	z-index: -1;
	transition: .5s;
}
.view_contents > div.active {
	opacity: 1;
	z-index: 1;
}
	.view_contents .bgviwe{
		width: 100%;
		height: auto;
	}
    
.view_contents2{
		position: relative;
		margin: 50px auto 10px;
        width: 100%;
}

.view_contents2 > div {
width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 1;
	transition: .5s;
}
.view_contents2 .bgviwe{
		width: 100%;
		height: auto;
}
    
    
    
    
	/* 眺望 */
	.viewblock{
		margin: 0 auto ;
		width: 100%;
		position: relative;
	}
	.viewbox div img{
		width: 100%;
		height: auto;
	}
	.viewblock .view_cap{
		position: absolute;
bottom: 3px;
right: 3px;
z-index: 10;
color: #fff;
text-shadow: 1px 1px 6px #000;
font-size: 10px;
text-align: right;
line-height: 1.1;
	}
	.pc-only1{
		width: 1px;
		height: 1px;
		opacity: 0;
	}
/**/	

.plan_mark {
width: 60%;
margin: 20px auto;
}



.entry_block {
background: linear-gradient(to bottom, #ffffff 0%,rgba(105,141,177,0.6) 100%);
width: 100%;
margin: 0 auto;
padding: 50px 0;
}
.entry_block_txt {
font-size: 14px;
text-align: center;
line-height: 2.2;
}
.entry_btn {
background-color: #485876;
margin: 20px auto 0;
text-align: center;
}
.entry_btn a {
padding: 10px 0;
display: block;
}
.entry_btn img {
height: 30px;
width: auto;
}

}


@media screen and (min-width: 768px) {

.blck_ttl {
font-size: 36px;
text-align: center;
padding: 80px 0 50px;
letter-spacing: 0.1em;
}
.blck_ttl_sub {
font-size: 24px;
color: #000;
padding: 20px 0;
margin-top:-80px;
}

.item_ttl {
color: #93a8bd;
font-size: 90px;
font-family: "Cinzel", serif;
text-shadow: 0.5px 0.5px 0 #93a8bd, -0.5px -0.5px 0 #93a8bd;
font-weight: 400;
line-height: 0.7;
padding-bottom: 80px;
}
.item_ttl_oth {
color: #93a8bd;
font-size: 46px;
font-family: "Cinzel", serif;
text-shadow: 0.5px 0.5px 0 #93a8bd, -0.5px -0.5px 0 #93a8bd;
font-weight: 400;
line-height: 1;
padding-top: 150px;
padding-bottom: 50px;
}



.tac {
text-align: center;
}
.item_ttl span {
font-size: 55px;
}
.item_honbun {
color: #595757;
font-size: 18px;
line-height: 2;
}
.lead_honbun {
font-size: 20px;
text-align: center;
padding: 0 0 80px;
line-height: 2.2;
color: #595757;
}
.ttl_view_box {
width: 760px;
margin: 0 auto;
display: flex;
}
.ttl_view_box .left_box {
padding:10px 0 0 80px;
}




ul.plan_btn {
width: 1000px;
margin: 30px auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
ul.plan_btn li {
box-sizing: border-box;
border: 1px solid #b3b3b3;
background-color: #fff;
width: 490px;
padding: 20px;
margin-bottom: 20px;
position: relative;
display: flex;
  flex-direction: column;
}
	ul.plan_btn li .link_page{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: block;
		transition: .5s;
		opacity: 0;
	}
	ul.plan_btn li .link_page:hover{
		background-color: #fff;
		opacity: 0.4;
	}
.nameBox {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 5px;
}
.plan_name {
color: #93a8bd;
font-size: 48px;
font-family: "Cinzel", serif;
text-shadow: 0.5px 0.5px 0 #93a8bd, -0.5px -0.5px 0 #93a8bd;
font-weight: 400;
line-height: 1;
position: relative;
}
.plan_name span {
font-size: 24px;
padding-left: 5px;
}


.plan_spec {
font-size: 12px;
color: #000;
text-align: right;
line-height: 1.3;
}
.plan_spec span {
font-size: 14px;
padding-left: 5px;
}
.plan_type {
font-size: 18px;
color: #4d4d4d;
font-family: san-serif;
line-height: inherit;
padding-top: 5px;
font-weight: 200;
text-align: left;
}

.plan_type span {
font-size: 14px;
padding-left: 5px;
}

.plan_other {
font-size: 15px;
color: #4d4d4d;
font-family: san-serif;
}
.plan_img {
width: 100%;
margin: 30px auto;
display: block!important;
}
.plan_img2 {
width: 100%;
margin: 10px auto 0;
	display: block!important;
}
.plan_second {
margin: 0 auto;
display: none;
}


.btn_view {
width: 150px;
margin: auto auto 0;
}

ul.plan_cap {
font-size: 11px;
line-height: inherit;
color: #000;
display: flex;
justify-content: flex-start;
margin: 0 0 10px;
}
ul.plan_cap li {
margin-right: 20px;
width: 90px;
}
.plan_cap span.shuno {
background: #d0c8c4;
padding-left: 35px;
margin-right: 5px;
}
.plan_cap span.yukadan {
background: #eeebea;
padding-left: 35px;
margin-right: 5px;
}

.label_img {
width: 300px;
margin: 20px auto;
}



.plan_area {
width: 920px;
margin: 0 auto;
box-sizing: border-box;
border:1px solid #ddd;
padding:30px;
}

ul.plan_feature {
width: 100%;
margin: 15px auto 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
ul.plan_feature li {
padding: 10px;
background-color: #f2eae7;
font-size: 14px;
text-align: center;
line-height: 1.5;
margin-bottom: 10px;
}
ul.plan_feature_pre {
width: 100%;
margin: 15px auto 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
ul.plan_feature_pre li {
width: 32%;
padding: 10px;
background-color: #4D4D4D;
font-size: 14px;
text-align: center;
line-height: 1.5;
margin-bottom: 10px;
color: #fff;
}

/*--maru-button--*/

.btn_arrow{
	position: relative;
	display: inline-block;
	padding: 0 0 0 16px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 20px;
}
.btn_arrow::before,
.btn_arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;

}
.maru-ku::before{
	width: 46px;
	height: 46px;
	background: #93a8bd;
}
.maru-ku::after{
	left: 8px;
	width: 20px;
	height: 20px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.maru-ku_l::before{
	width: 46px;
	height: 46px;
	background: #93a8bd;
}
.maru-ku_l::after{
	left: 18px;
	width: 20px;
	height: 20px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


ul.linkbtn_area {
width: 120px;
margin: 0 auto 30px;
display: flex;
justify-content: space-around;
}
ul.linkbtn_area li {
width: 48%;
}
ul.linkbtn_area li a:hover {
opacity: 0.6;
transition: .3s;
}
.plan_mark {
width: 320px;
margin: 20px auto;
}



.plan_img_detail {
width: 100%;
margin: 50px auto;
}

/**TAB**/

.tab {
position: relative;
display: inline-block;
}


.tab.active {
position: relative;
display: inline-block;
  color: #fff;
  background: #b5a39a;
}
.tab.active::after {
  content: ''; 
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #b5a39a;
  border-right: 1px solid #b5a39a; 
  border-bottom: 1px solid #b5a39a;
  transform: translate(-50%,55%) rotate(45deg); 
  transform-origin:center center;
}


.tab-contents {
  display: none;
}

.tab-contents.active{
  display: block;
}

ul.tab_menu {
width: 100%;
margin: 20px auto;
display: flex;
justify-content: space-between;
}
ul.tab_menu li {
width: 49%;
  box-sizing: border-box;
  padding: 0.5rem 0;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #fff;
  border: 1px solid #b5a39a;
}

/* view */
.view_menu {
width: 98%;
margin: 0 auto 100px;
display: flex;
}

ul.list_view {
  display: flex;
  justify-content: space-between;
  width: 260px;
  margin: 20px auto;
  box-sizing: border-box;
}
ul.list_view li {
text-align: center;
font-family: "Cinzel", serif;
font-weight: 400;
}
ul.list_view li a {
  transition: 0.3s;
  color: #dbdcdc;
  display: block;
  text-decoration: none;
  font-size:34px;
  line-height: 1;
  cursor: pointer;
}
ul.list_view li a:hover {
color: #6c81a8;
border-bottom: 3px solid #6c81a8;
}
ul.list_view li a.active {
  cursor: text;
  color: #6c81a8;
  border-bottom: 3px solid #6c81a8;
}
/* タブコンテンツ */
	.view_contents{
		position: relative;
		margin: 0 auto 20px;
        width: 100%;
        padding-bottom: 150px;
	}
	
	
.view_contents > div {
width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	z-index: -1;
	transition: .5s;
}
.view_contents > div.active {
	opacity: 1;
	z-index: 1;
}
	.view_contents .bgviwe{
		width: 100%;
		height: auto;
	}
.view_contents2{
		position: relative;
		margin: 0 auto 20px;
        width: 100%;
}

.view_contents2 > div {
width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 1;
	transition: .5s;
}
.view_contents2 .bgviwe{
		width: 100%;
		height: auto;
}
    
    
/* 眺望 */
	.viewblock{
		margin: 0 auto ;
		width: 100%;
		position: relative;
	}
	.viewbox div img{
		width: 100%;
		height: auto;
	}
	.viewblock .view_cap{
		position: absolute;
bottom: 7px;
right: 7px;
z-index: 10;
color: #fff;
text-shadow: 1px 1px 6px #000;
font-size: clamp(1rem, 1.1vw, 1.2rem);
text-align: right;
	}
	.sp-only1{
		width: 1px;
		height: 1px;
		opacity: 0;
	}
/**/


.entry_block {
background: linear-gradient(to bottom, #ffffff 0%,rgba(105,141,177,0.6) 100%);
width: 100%;
margin: 0 auto;
padding: 50px 0;
}
.entry_block_txt {
font-size: 18px;
text-align: center;
line-height: 2.2;
}
.entry_btn {
background-color: #485876;
margin: 20px auto 0;
text-align: center;
}
.entry_btn a {
padding: 10px 0;
display: block;
}
.entry_btn img {
height: 52px;
width: auto;
}




}