
/* header背景色 */
#merit_P header {
  background: rgba(0, 0, 0, 1);
}
/*--------------------------------
common
--------------------------------*/
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.text-left {
	text-align: left;
}
.en-font{
	font-family: garamond-premier-pro-display, serif;
}
.trajan-font{
	font-family: trajan-pro-3, serif;
}

.small-text {
	font-size: 75%;
}
.large-text{
	font-size: 150%;
}
.fit-img {
	width: 100%;
	height: auto;
	vertical-align: middle;
}
.fit-img02 {
	width: 100%;
	height: auto;
	vertical-align: middle;
}
.has-max {
	height: auto;
	max-width: 100%;
}
.flex-wrapper {
	display: flex;
	flex-wrap: wrap;
}
.flex-nowrap{
	flex-wrap: nowrap;
}
.align-center{
	align-items: center;
}
.has-gap{
	gap: 16px;
}
.col-2{
	width: 50%;
}
.col-3{
	width: calc(100% / 3);
}
.has-gap .col-2{
	width: calc(50% - 8px);
}
.has-gap .col-3{
	width: calc(100% / 3 - 11px);
}
@media screen and (max-width: 767px){
	.col-2,
	.has-gap .col-2,
	.col-3,
	.has-gap .col-3{
		width: 100%;
	}
}
.img-wrapper{
	position: relative;
}
.img-wrapper .caption{
	position: absolute;
	bottom: 0;
	left: 8px;
	right: 8px;
	z-index: 1;
}
.img-wrapper .caption.has-bg{
	left: auto;
	right: 0;
	margin: 0;
	padding: .4em .6em;
	background: rgba(0, 0, 0, 0.7);
}
.img-wrapper .caption.has-bg.left{
	left: 0;
	right: auto;
}
.inline-block{
	display: inline-block;
}
.grid-wrapper{
	display: -ms-grid;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 940px){
	.grid-wrapper{
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 767px){
	.grid-wrapper{
		grid-template-columns: 1fr;
	}
}
.nav-link{
	color: #444;
}
.nav-link.none{
	position: relative;
}

/*--------------------------------
componet
--------------------------------*/

.primary-heading{
	margin-bottom: .8em;
	font-size: 3.4rem;
	font-weight: 400;
	line-height: 1.3;
}
.secondary-heading{
	margin-bottom: .8em;
	font-size: 2.6rem;
	font-weight: 500;
	line-height: 1.3;
}
.tertiary-heading{
	margin-bottom: 1.2em;
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.4;
}
.page-heading{
	margin-bottom: .8em;
	font-size: 3.4rem;
	line-height: 1.3;
}
@media screen and (max-width: 767px){
	.primary-heading{
		font-size: 2.4rem;
	}
	.secondary-heading{
		font-size: 2.4rem;
	}
	.tertiary-heading{
		margin-bottom: .8em;
		font-size: 1.4rem;
	}
	.page-heading{
		font-size: 2.4rem;
	}
}
.note{
	margin: 1em 0;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.6;
}
.lead{
	margin: 1em 0;
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.6;
}
@media screen and (max-width: 767px){
	.note{
		font-size: 1.4rem;
	}
	.lead{
		font-size: 1.8rem;
	}
}
.caption{
	margin: .4em 0;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.4;
}
.btn{
	padding: 8px 16px;
	display: inline-block;
	position: relative;
	background: #2c2c2c;
	color: #fff;
	font-size: 1.6rem;
	transition: all .3s ease-out;
}
.general-btn{
	margin: 8px;
	padding: 0 16px;
	width: 100%;
	max-width: 300px;
	height: 60px;
	position: relative;
	background: #456254;
	font-size: 2rem;
	line-height: 60px;
	border-radius: 30px;
}
/* .general-btn::after{
	width: 3px;
	height: 6px;
	display: block;
	position: absolute;
	top: 50%;
	right: 32px;
	background: url(../images/common/arrow.svg) no-repeat center center;
	background-size: contain;
	content: "";
	transform: translateY(-50%);
} */
.general-btn:hover{
	background: #17442c;
}
@media screen and (max-width: 767px){
	.caption{
		font-size: 1rem;
	}
	.general-btn{
		width: calc(100% - 16px);
		height: 54px;
		font-size: 1.8rem;
		line-height: 54px;
	}
}
.btn span{
	position: relative;
	z-index: 1;
}
.submit-btn{
	margin: 8px;
	padding: 0 16px;
	width: 100%;
	max-width: 300px;
	height: 60px;
	position: relative;
	background: #456254;
	font-size: 2rem;
	line-height: 60px;
	border-radius: 30px;
}
.cancel-btn{
	margin: 8px;
	padding: 0 16px;
	width: 100%;
	max-width: 200px;
	height: 60px;
	position: relative;
	background: #aaa;
	font-size: 2rem;
	line-height: 60px;
	border-radius: 30px;
}
.tel-btn:hover{
	background: #c07607;
}
.bg-dark{
	background-color: #413f2e;
	color:  #fff;
}
.bg-light{
	background-color: #fffef7;
}
.bg-gray{
	background-color: #faf9f2;
}
.bg-lightgray{
	background-color: #f8f8f8;
}
.video-wrapper{
	position: relative;
	padding-top: 56.25%;
	height: 0;
	display: block;
	content: "";
}
.video-wrapper iframe,
.video-wrapper video{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.loading{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	content: "";
}
.general-table{
	margin: 48px 0;
	width: 100%;
	font-size: 1.6rem;
	line-height: 1.4;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
.general-table th,
.general-table td{
	padding: 16px;
	border-bottom: 1px solid #ddd;
}
.general-table th{
	width: 260px;
	position: relative;
	background: #eee;
	font-weight: 500;
	text-align: right;
}
@media screen and (max-width: 767px){
	.general-table{
		margin: 24px 0;
	}
	.general-table th,
	.general-table td{
		width: 100%;
		display: block;
	}
	.general-table th{
		text-align: left;
	}
}
.is-dummy{
	padding: 8px;
	position: absolute;
	bottom: 32px;
	left: 32px;
	z-index: 1;
	background: #595e64;
	color: #fff;
	font-size: 1.4rem;
}
.banner-area{
	margin: 32px auto;
	width: calc(100% - 48px);
	max-width: 1000px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 32px;
}
.banner-item{
	max-width: 600px;
}

.float-banner {
	position: fixed;
	right: 12px;
	bottom: 32px;
	max-width: 250px;
	width: 54%;
	opacity: 1;
	transition: opacity .4s ease;
	z-index: 4;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
.float-close {
	width: 8%;
	display: block;
	position: absolute;
	right: 0;
	top: -12.2%;
	z-index: 6;
	cursor: pointer;
}
.is-visible {
	opacity: 1;
	display: block;
}
@media screen and (max-width: 767px){
	.float-banner {
		left: 16px;
		right: 16px;
		bottom: 60px;
		max-width: 100%;
		width: calc(100% - 32px);
	}
	.is-scroll .float-banner {
		opacity: 0;
	}
	.float-close {
		display: none;
	}
}

/*--------------------------------
layout
--------------------------------*/
.container{
	margin-top: 0;
	overflow: hidden;
}
.index2 .container{
	margin-top: 50px;
	margin-left: 160px;
}
.teaser .container{
	margin-top: 0;
	width: 100%;
	min-height: calc(100vh - 90px);
	display: flex;
	align-items: center;
	justify-content: center;
}
@media screen and (max-width: 900px){
	.container{
		margin-top: 48px;
	}
	.index2 .container{
		margin-top: 62px;
		margin-left: 0px;
	}
	.brand .container{
		margin-top: 0;
	}
	.teaser .container{
		min-height: 60vh;
	}
}
.general-section .inner{
	margin: 0 auto;
	padding: 80px 0;
	width: calc(100% - 32px);
	max-width: 1000px;
}
@media screen and (max-width: 767px){
	.general-section .inner{
		padding: 32px 0;
	}
}
.general-section .inner-fit{
	width: 100%;
	max-width: none;
}
.general-section .inner-full{
	max-width: none;
}
.general-section .inner + .inner{
	padding-top: 0;
}
.general-parts{
	margin-bottom: 32px;
}
.btn-space{
	margin: 32px 0;
	text-align: center;
}
.btn-space:last-child{
	margin-bottom: 0;
}



/*--------------------------------
teaser
--------------------------------*/
.teaser-lead{
	margin-bottom: .6em;
	font-size: 6rem;
	white-space: nowrap;
}
.teaser-title{
	margin-bottom: .6em;
	font-size: 7rem;
	font-weight: 700;
	white-space: nowrap;
	letter-spacing: .05em;
}
.teaser-note{
	font-size: 4rem;
	font-weight: 500;
	color: #a00;
	white-space: nowrap;
	letter-spacing: .05em;
}
.teaser .general-section .inner{
	width: calc(100vw - 32px);
}
@media screen and (max-width: 930px){
	.teaser-lead{
		font-size: 7vw;
	}
	.teaser-title{
		font-size: 7vw;
	}
	.teaser-note{
		font-size: 6vw;
	}
}




/*--------------------------------
lifestyle
--------------------------------*/
@import url("https://use.typekit.net/dum2pxo.css");
.page-nav{
	padding: 16px 0 16px 16px;
	width: 38%;
	max-width: 180px;
	position: fixed;
	right: 0;
	top: 30%;
	z-index: 4;
	background: #657e8e;
	color: #fff;
	font-family: "futura-pt", sans-serif;
	font-size: 1.7rem;
	font-weight: 400;
	line-height: 1.4;
	transition: opacity .3s ease;
}
.page-nav-title{
	font-size: 1.7rem;
}
@media screen and (max-width: 767px){
	.page-nav{
		top: 48px;
		font-size: 1.3rem;
	}
	.is-scroll .page-nav{
		opacity: 0;
	}
	.page-nav-title{
		font-size: 1.3rem;
	}
}
.page-nav-wrap{
	margin-left: 8px;
	position: relative;
}
.page-nav-wrap::before {
	position: absolute;
	left: 3px;
	width: 1px;
	top: 12px;
	bottom: 12px;
	height: auto;
	display: block;
	content: "";
	border-left: 2px solid #fff;
}
.page-nav-list{
	margin-top: 16px;
}
.page-nav-link{
	display: flex;
	align-items: center;
	gap: 24px;
	color: #fff;
}
.page-nav-link::before{
	width: 8px;
	height: 8px;
	display: block;
	background: #fff;
	content: "";
	border-radius: 8px;
	transition: transform .5s ease-out;
}
.current .page-nav-link::before{
	transform: scale(1.8);
}
.dropshadow{
	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
}

/*--------------------------------
merit
--------------------------------*/
.merit-btn-section{
	background: #fff;
}
.merit-section{
	padding-top: 8px;
	margin-top: -8px;
}
.merit-btns{
	padding: 4% 0;
	margin: 0 auto;
	width: 77%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}
.merit-btns-btn a{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	border-radius: 8px;
	color: #4271B2;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji";
	font-weight: 500;
	font-size: 1.8vw;
	border: 2px solid #4271B2;
	position: relative;
}
.merit-btns-btn a:hover{
	color: #fff;
	background: linear-gradient(90deg,rgba(84, 187, 163, 0.8) 0,rgba(0, 129, 198, 0.8) 40%, rgba(0, 39, 116, 0.8) 100%);
}
.merit-btns-btn a:hover::after{
	border-color: #fff transparent transparent transparent;
}
.merit-btns-btn a::after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: 50%;
	right: .8vw;
	transform: translateY(-50%);
	border-style: solid;
	border-width: 1vw .6vw 0 .6vw;
	border-color: #4271B2 transparent transparent transparent;
}
.merit-btns-btn:nth-child(-n+4){
	width: calc(100% / 4 - 4.5px);
}
.merit-btns-btn:nth-child(n+5){
	width: calc(100% / 3 - 4px);
}
@media screen and (max-width: 767px){
	.merit-btns{
		margin: 8% auto;
		width: 90%;
		gap: 8px;
	}
	.merit-btns-btn a{
		font-size: 4.2vw;
		text-indent: -.4em;
	}
	.merit-btns-btn:nth-child(-n+4){
		width: calc(100% / 2 - 4px);
	}
	.merit-btns-btn:nth-child(n+5){
		width: calc(100% / 2 - 4px);
	}
	.merit-btns-btn:last-child{
		width: 70%;
	}
	.merit-btns-btn a::after {
		right: 1.8vw;
    border-width: 2vw 1.2vw 0 1.2vw;
	}
}
.merit-btn{
	padding: 0 24px;
	display: flex;
	align-items: center;
	max-width: 450px;
	width: 100%;
	height: 77px;
	margin: 0 auto;
	font-size: 2.2rem;
	justify-content: center;
	box-shadow: 3px 3px 3px #0000004D;
	color: #fff;
	transition: all .3s ease-out;
}
.merit-btn + .secondary-heading{
	margin-top: 2em;
}
@media screen and (max-width: 767px){
	.merit-copy{
		font-size: 1.8rem;	
	}
}
#merit_P .cv-btn-area .btn-flex{
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#merit_P .cv-btn-area .btn-flex .request-btn{
	margin-right: 0;
}
#merit_P .cv-btn-area .btn-flex .reserve-text{
	margin-top: 2em;
	text-align: center;
	margin-bottom: .8em;
}
.property-lists{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}
.property-list{
	width: calc(100% / 3 - 20px);
}
.property-list-name{
	text-align: center;
	font-size: 18px;
	margin: 1.4em 0;
}
.property-list-btns{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	text-align: center;
	gap: 4px;
}
.property-list-btn{
	height: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.property-list-btn.site{
	border: 1px solid #000;
	background: #000;
	color: #fff;
}
.property-list-btn.request{
	color: #fff;
	background-image: -moz-linear-gradient(0deg, rgb(133, 139, 144) 0%, rgb(159, 167, 172) 50%, rgb(133, 139, 144) 100%);
  background-image: -webkit-linear-gradient(0deg, rgb(133, 139, 144) 0%, rgb(159, 167, 172) 50%, rgb(133, 139, 144) 100%);
  background-image: -ms-linear-gradient(0deg, rgb(133, 139, 144) 0%, rgb(159, 167, 172) 50%, rgb(133, 139, 144) 100%);
}
.property-list-btn.reserve{
	color: #fff;
	background-image: -moz-linear-gradient(0deg, rgb(154, 133, 73) 0%, rgb(179, 162, 85) 50%, rgb(154, 133, 73) 100%);
  background-image: -webkit-linear-gradient(0deg, rgb(154, 133, 73) 0%, rgb(179, 162, 85) 50%, rgb(154, 133, 73) 100%);
  background-image: -ms-linear-gradient(0deg, rgb(154, 133, 73) 0%, rgb(179, 162, 85) 50%, rgb(154, 133, 73) 100%);
}
@media screen and (max-width: 767px){
	.property-lists{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 40px;
	}
	.property-list{
		width: 100%;
	}
}

/*--------------------------------
merit bnr
--------------------------------*/
.merit-bnr-swiper{
	margin-bottom: 120px;
}
.merit-bnr-swiper .swiper-pagination{
	margin-top: 40px;
	position: static;	
}
.merit-bnr-swiper .swiper-pagination-bullet{
	width: 14px;
	height: 14px;
	background: #4271AE;
}
.plan .merit-bnr-swiper{
	margin-bottom: 80px;
}
@media screen and (max-width: 767px){
	.merit-bnr-swiper,
	.plan .merit-bnr-swiper{
		margin-bottom: 40px;
	}
	.merit-bnr-swiper .swiper-pagination{
		margin-top: 20px;
	}
	.merit-bnr-swiper .swiper-pagination-bullet{
		width: 8px;
		height: 8px;
	}
}
/*--------------------------------
state
--------------------------------*/

.disabled {
	opacity: 0.1;
	cursor: default;
	pointer-events: none;
}
.none{
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}
.is-none{
	display: none;
}
.is-fv {
	opacity: 0;
	animation-fill-mode: both;
}
.is-light{
	color: #fff;
}
.is-dark{
	color: #2c2c2c;
}
.is-shadow{
	text-shadow: 0 0 1px rgba(0,0,0,.8), 0 0 4px rgba(0,0,0,.4);
}
.has-border {
	box-shadow: 0 0 2px 0 rgb(0 0 0 / 40%);
}
.line-wide{
	line-height: 2;
}
.is-key{
	color: #4271B2;
}
.is-key2{
	color: #249890;
}
.is-alert{
	color: #c90000;
}
.unscrollable{
	overflow-y: hidden;
}
@media screen and (max-width: 767px){
	.sp-none{
		display: none;
	}
	.slick-slide img.sp-none{
		display: none;
	}
}
@media screen and (min-width: 768px){
	.pc-none{
		display: none;
	}
	.slick-slide img.pc-none{
		display: none;
	}
}
.contact{
	width: 100%;
}
footer{
	margin-bottom: 0;
}