@charset "utf-8";
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html{font-family:Arial,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Meiryo,Helvetica,メイリオ,sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{color:#000;background-color:transparent;text-decoration:none}a:active,a:hover{outline:0;text-decoration: none;}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:bottom;max-width:100%;height:auto}svg:not(:root){overflow:hidden}figure{margin:0}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}li{list-style:none}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}img {backface-visibility: hidden;}



/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
template style
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
body {
	overflow-x:hidden;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "palt";
	margin: auto;
	padding: 0;
	opacity: 0;
	transition: opacity .8s;
	color: #333;
	font-size: 14px;
	letter-spacing: .1em;
	line-height: 2.28;
	font-family: 'YakuHanMP','Noto Serif JP',serif;
}
body.underPage {
}
body.subPage {
}
body.loaded {
	opacity: 1;
}
h1,h2,h3,h4,h5,h6,th { font-weight: normal; }
a{ color: inherit; }
#wrap { position:relative; }
.sp-bl,.sp-il,.tablet-bl { display:none !important; }
.opa { transition: 0.3s ease-in-out; }
.opa:hover { opacity: 0.7 !important; }
.opa1 { opacity: 1 !important; }
.w100 { width: 100% !important; }
.h100 { height: 100% !important; }
.none { display: none !important }
.cf:before,.cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }
.ff{ text-align: justify; text-justify: inter-ideograph;}
.inner {
	width:95%;
	max-width:1100px;
	margin-right:auto;
	margin-left:auto;
	position:relative;
}
.outer{
	width:100%;
	max-width:1500px;
	margin-right:auto;
	margin-left:auto;
	position:relative;
}
.mincho{
	font-family: 'YakuHanMP','Noto Serif JP',serif;
	font-family: 'Yu Mincho',Yumincho,serif;
}
.gothic{
	font-family: 'YakuHanJP','Noto Sans JP',sans-serif;
	font-family: 'Yu Gothic',Yugothic,sans-serif;
}
.jost{
	font-family: 'jost', sans-serif;
	font-weight: 300;
	font-style: normal;
}
@font-face {
    font-family: 'didot';
    font-style: normal;
    font-weight: normal;
    src: url('../font/Didot.woff') format("woff");
}
.didot{
	font-family: 'didot', serif;
	font-weight: 400;
	font-style: normal;
}
.garamond{
	font-family: 'EB Garamond', serif;
	font-weight: 400;
	font-style: normal;
}
.flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.flex.nowrap{ flex-wrap: nowrap; }
.flex.reverse{ flex-direction: row-reverse; }
.flex.reverse > *{ min-height: 0; }
.flex.jc-c{ justify-content: center; }
.flex.jc-s{ justify-content: flex-start; }
.flex.jc-e{ justify-content: flex-end; }
.flex.ai-c{ align-items: center; }
.flex.ai-e{ align-items: flex-end; }
.flex.ai-st{ align-items: stretch; }

@media screen and (max-width:1200px) { .w1200{ display: none;}}
@media screen and (max-width:768px) {
.pc { display:none !important; }
.sp-bl { display:block !important; }
.sp-il { display:inline !important; }
.inner { width:90%; max-width:560px; }
.opa:hover { opacity: 1 !important; }
}




h1{
	display: none;
}


/*  header
--------------------------------------------------*/
body.no-scroll{ 
	overflow: hidden !important; 
}
#header{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	padding-left: 30px;
	align-items: stretch;
	z-index: 100;
	box-sizing: border-box;
	transition: background-color .4s;
	background-color: rgba(255, 255, 255, .9)
}
#header.scrolled {
  background-color: rgba(255, 255, 255, .9);
}
	#header .logo{
		width: 112px;
		line-height: 1;
		padding: 15px 0;
	}
	_:-ms-input-placeholder, :root #nav {
	  overflow: hidden;
	}
	_:-ms-input-placeholder, :root #header .logo img {
		height: 100%;
	}


/*@media screen and (min-width: 1481px){
	#nav{
		display: block !important;
		width: calc(100% - 172px);
		opacity: 1 !important;
	}
}*/


	.fat-nav__wrapper{
		position: relative;
		flex-wrap: nowrap;
		align-items: stretch;
		height: 100%;
	}
		.pageNav{
			width: calc(100% - 560px);
		}
			.topNav{
				justify-content: flex-start;
				align-items: center;
				height: 100%;
			}
				.topNav > li{
					position: relative;
				}
					.topNav > li:before{
						content: "NEW";
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						margin: auto;
						font-size: 12px;
						line-height: 1;
						font-weight: normal;
						color: #3ec6dd;
						display: none;
						text-align: center;
						font-family: 'didot', serif;
						font-weight: 400;
					}
					_:-ms-input-placeholder, :root .topNav > li:before {
					   /*padding-top: 3px;*/
					   /*line-height: 1.76;*/
					}
					.topNav > .mapNav,
					.topNav > .outlineNav{
						display: none;
					}
					/*.topNav > .conceptNav:before,*/
					/*.topNav > .accessNav:before,*/
					.topNav > .planNav:before,
					/*.topNav > .designNav:before,*/
					/*.topNav > .guideNav:before,*/
					/*.topNav > .brandNav:before*/
					/*.topNav > .qualityNav:before,*/
					/*.topNav > .guideNav:before*/
					/*.topNav > li.homeLimNav:before,*/
					.topNav > .planLimNav:before,
					.topNav > .modelroomNav:before,
					/*.topNav > .modelroomLimNav:before,*/
					/*.topNav > .interviewLimNav:before,*/
					/*.topNav > .designLimNav:before,*/
					/*.topNav > .ownersvoiceLimNav:before*/
					.topNav > .libraryLimNav:before
					{
						display: block;
					}
					/* soon ------------------------------*/
					.topNav > .soon{
						pointer-events: none;
						position: relative;
						display: block;
					}
					.topNav > .soon:after{
					    content: "COMING SOON";
					    position: absolute;
					    right: 0;
					    left: 0;
					    top: 50%;
					    transform: translateY(-50%);
					    margin: auto;
					    width: 100%;
					    height: auto;
					    padding: 10px 0;
					    text-align: center;
					    background-color: rgba(0,0,0,.6);
					    box-sizing: border-box;
					    line-height: 1;
					    color: rgba(255,255,255,.8);
					    pointer-events: none;
					    font-size: 10px;
					}
						.topNav > .soon > a{
							pointer-events: none;
							position: relative;
							display: block;
							opacity: .5;
							z-index: -1;
						}
					/* /soon ------------------------------*/
						.topNav > li > a{
							display: block;
							letter-spacing: 0.1em;
							line-height: 1;
							padding: 16px 13px;
							font-size: 14px;
							text-align: center;
							transition: .3s;
							position: relative;
						}
						.topNav > li:hover > a{
							color: #238c9e;
						}
						#home .topNav > li.homeNav a,
						#concept .topNav > li.conceptNav a,
						#access .topNav > li.accessNav a,
						#design .topNav > li.designNav a,
						#plan .topNav > li.planNav a,
						#brand .topNav > li.brandNav a,
						#quality .topNav > li.qualityNav a,
						#guide .topNav > li.guideNav a,
						#modelroom .topNav > li.modelroomNav a,
						.limitedHome .topNav > li.homeLimNav a,
						#limitedPlan .topNav > li.planLimNav a,
						#limitedModelroom .topNav > li.modelroomLimNav a,
						#limitedInterview .topNav > li.interviewLimNav a,
						#limitedDesign .topNav > li.designLimNav a,
						#limitedownersvoice .topNav > li.ownersvoiceLimNav a,
						#limitedLibrary .topNav > li.libraryLimNav a{
							color: #238c9e;
						}
@media screen and (max-width: 9000px){
	#header{
		/*align-items: center;
		height: 64px;
		padding-left: 15px;
		background-color: rgba(255, 255, 255, 1);*/
	}
	#header.scrolled {
    /*background-color: rgba(255, 255, 255, 1);*/
	}
		#header .logo{
			/*width: 81px;
			padding: 0;*/
		}
		#nav{
			width: 100%;
			height: 100vh;
			display: none;
			float: none;
			border-top: solid 1px rgba(255,255,255,.2);
			overflow-y: scroll;
			-ms-overflow-style: none;	    
			background-color: rgba(255, 255, 255, .9);
			z-index: 999;
			position: fixed;
			/*top: 63px;*/
			left: 0;

			top: 90px;
		}
			.fat-nav__wrapper{
				flex-wrap: wrap;
				height: auto;
				border-top: solid 1px rgba(240,240,240,1);
			}
				.pageNav{
			  		width: 100%;
			  		position: static;
					transform: translateY(0);
			    }
					.topNav{
						width: 100%;
						margin-left: auto;
						margin-right: auto;
						font-size: 0;
						letter-spacing: 0;
						align-items: stretch;
					}
					  	.topNav > li{
								width: 50%;
								border-bottom: solid 1px rgba(240,240,240,1);
								box-sizing: border-box;
						    display: flex;
						    align-items: center;
						    justify-content: center;
						}
						.topNav > li + li{
							margin-left: 0;
						}
						.topNav > li:nth-of-type(odd){
							border-right: solid 1px rgba(240,240,240,1);
							width: calc(50% - 1px);
						}
						.topNav > li:nth-of-type(even){
							width: 50%;
						}
						.topNav > .mapNav,
						.topNav > .outlineNav{
							display: flex;
						}
							.topNav > li:before{
								left: auto;
								/*background-color: rgb(194, 174, 105);*/
								font-size: 10px;
								padding: 0 6px;
								line-height: 1.86;
								letter-spacing: 0;
								font-weight: normal;
								color: #3ec6dd;
								display: none;
								text-align: center;
								font-family: 'didot', serif;
								font-weight: 400;

								left: auto;
							    background-color: rgba(147, 122, 79,.7);
							    color: #fff;
							    font-size: 8px;
							    padding: 0 6px;
							    line-height: 1.86;
							    letter-spacing: 0;
							    font-weight: normal;
							    top: 0;
							}
							.topNav > li > a{
							    padding: 27px 10px 27px 10px;
							    width: 100%;
								font-size: 14px;
								line-height: 1;
								position: relative;
								letter-spacing: .1em;
							}
							.topNav > .soon a{
								background-color: rgba(0,0,0,.8);
							}
							.topNav > .soon:after{
								background-color: rgba(0,0,0,0);
								z-index: 1;
								letter-spacing: .05em;
							}
}
@media screen and (max-width: 768px){
	#header{
		align-items: center;
		height: 64px;
		padding-left: 15px;
		background-color: rgba(255, 255, 255, 1);
	}
	#header.scrolled {
    background-color: rgba(255, 255, 255, 1);
	}
		#header .logo{
			width: 81px;
			padding: 0;
		}
		#nav{
			top: 63px;
		}
}




/* ================ sub--nav--pc ================ */
.sub--nav--pc{
	position: absolute;
	right: 110px;
	top: 0;
	width: 100px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
	.sub--nav--pc--box{
		display: inline-block;
		text-align: left;
	}
		.sub--nav--pc--box > div + div{
			margin-top: 18px;
		}
			.sub--nav--pc--box > div a{
				font-size: 12px;
				line-height: 1;
				display: block;
				position: relative;
				padding-left: 16px;
				letter-spacing: .06em;
			}
			.sub--nav--pc--box > div a:before{
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 10px;
				height: 12px;
			}
			.sub--nav--pc--box > .mapNav a:before{
				background: url(../img/common/pc/icon_map.svg) no-repeat center center/cover;
			}
			.sub--nav--pc--box > .outlineNav a:before{
				background: url(../img/common/pc/icon_outline.svg) no-repeat center center/cover;
			}
@media screen and (max-width: 768px){
	.sub--nav--pc{
		display: none;
	}
}



/* ================ cvBox ================ */
.cvBox{
	align-items: stretch;
}
	.subNav{
		padding: 0 25px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
		.subNav li + li{
			margin-top: 18px;
		}
			.subNav li a{
				font-size: 12px;
				line-height: 1;
				display: block;
				position: relative;
				padding-left: 16px;
				letter-spacing: .06em;
			}
			.subNav li a:before{
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 10px;
				height: 12px;
			}
			.subNav .map a:before{
				background: url(../img/common/pc/icon_map.svg) no-repeat center center/cover;
			}
			.subNav .outline a:before{
				background: url(../img/common/pc/icon_outline.svg) no-repeat center center/cover;
			}
	.headBtnBox{
		display:flex;
	}
	.headBtnBox.transparent{
		width: 1px;
		opacity: 0;
		overflow: hidden;
	}
		.headBtnBox li{
			width: 140px;
			font-size: 0;
			position: relative;
			transition: .4s;
			z-index: 1;
		}
			.headBtnBox li a{
				position: relative;
				display: block;
				color: #fff;
				padding:10px;
	    		box-sizing: border-box;
	    		line-height: 1;
	    		transition: .4s;
	    		display: flex;
	    		justify-content: center;
	    		align-items: center;
	    		height: 100%;
	    		width: 100%;
			}
			.headBtnBox .request a{
				background-color: #33d6c1;
			}
			.headBtnBox .reserve a{
				background-color: #3ec6dd;
			}
			.headBtnBox .limited a{
				background-color: #7cabf0;
			}
			.headBtnBox .official a{
				background-color: #666;
			}
				.headBtnBox li a span{
					display: block;
					text-align: center;
				}
				.headBtnBox li a .ja{
					font-size: 16px;
					letter-spacing: .15em;
				}
				.headBtnBox li a .en{
					font-size: 10px;
					letter-spacing: .1em;
					margin-top: 4px;
				}
@media screen and (max-width: 9000px){
	.cvBox{
		/*display: none;*/
		width: 100%;
	}
		.subNav{
			display: none;
		}
		.headBtnBox{
			/*display: none;*/
			/*max-width: 1200px;*/
			width: 100%;
			margin-left: auto;
			margin-right: auto;
			justify-content: space-between;
		}
			.headBtnBox li{
				width: 100%;
			}
			.headBtnBox li + li{
				border-left: solid 1px #fff;
			}
				.headBtnBox li a,
				.scrolled .headBtnBox li a{
					height: 80px;
				}
					.headBtnBox li a .posi{

					}
						.headBtnBox li a .icon{
							display: none;
						}
}

@media screen and (max-width: 768px){
	.headBtnBox li a{
		padding: 0 10px;
	}
		.headBtnBox li a .ja {
		    font-size: 15px;
		    margin-bottom: 10px;
		    padding-top: 0;
		}
}



/* ================ sp-hamburger ================ */
#sp-hamburger{
	display: none;
}
@media screen and (max-width: 9000px){
  #sp-hamburger{
    display: block;
  }
}
.hamburger { position: fixed; top: 0; right: 0; z-index: 9999; width: 90px; height: 90px; box-sizing: border-box; -webkit-tap-highlight-color: transparent; -ms-touch-action: manipulation; touch-action: manipulation; background-color: #3ec6dd;}
.hamburger__icon { position: absolute; top: 42%; left: 0; right: 0; margin: auto; transform: translateY(-50%);}
.hamburger__icon, .hamburger__icon:before, .hamburger__icon:after { display: block; width: 40px; height: 1px; background-color: #fff; -moz-transition-property: background-color, -moz-transform; -o-transition-property: background-color, -o-transform; -webkit-transition-property: background-color, -webkit-transform; transition-property: background-color, transform; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; }
.hamburger__icon:before, .hamburger__icon:after { position: absolute; content: "";}
.hamburger__icon:before { top: -5px;}
.hamburger__icon:after { top: 5px;}
.hamburger.active .hamburger__icon { background-color: transparent;}
.hamburger.active .hamburger__icon:before, .hamburger.active .hamburger__icon:after { background-color: #fff;}
.hamburger.active .hamburger__icon:before { -moz-transform: translateY(5px) rotate(45deg); -ms-transform: translateY(5px) rotate(45deg); -webkit-transform: translateY(5px) rotate(45deg); transform: translateY(5px) rotate(45deg);}
.hamburger.active .hamburger__icon:after { -moz-transform: translateY(-5px) rotate(-45deg); -ms-transform: translateY(-5px) rotate(-45deg); -webkit-transform: translateY(-5px) rotate(-45deg); transform: translateY(-5px) rotate(-45deg);}
.hamburger span{font-size: 12px;color: #fff; position: absolute; left: 0; right: 0; bottom: 10px; margin: auto; text-align: center;}
@media screen and (max-width: 768px){ 
	/*.hamburger { z-index: 10001; } */
	.hamburger { width: 64px; height: 64px; }
	.hamburger__icon, .hamburger__icon:before, .hamburger__icon:after { width: 20px; }
	.hamburger span{font-size: 10px;}
}









/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
main
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
#main {
	overflow:hidden;
}
	.main {
		font-family: 'YakuHanMP','Noto Serif JP',serif;
		color: #333;
		font-size: 14px;
		letter-spacing: .15em;
		line-height: 2.28;
		font-style: normal;
		font-feature-settings: "palt";
		overflow: hidden;
		position: relative;
		/*image-rendering: -webkit-optimize-contrast;	*/
	}
	.sPage .main{
		background-color: #fff;
	}
	.android .main {
		/*font-family: 'YakuHanMP','Noto Serif JP',serif;*/
	}
	_:-ms-input-placeholder, :root .main {
	  letter-spacing: .1em;
	}
	.main img{
		/*image-rendering: -webkit-optimize-contrast;*/
		width: 100%;
	}
@media screen and (max-width: 9000px){
	#main {
		padding-top: 90px;
	}
}
@media screen and (max-width: 768px){
	#main {
		padding-top: 32px;
	}
	
  .l-headerLogo {
    top: 10px;
	}
	
    #header.scrolled {
        background-color: transparent;
    }
}



/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
caption
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
.main .photo,.figure {
	position: relative;
}
.p-caption,.f-caption {
	position: absolute;
	font-size: 10px;
	line-height: 1.4;
	text-align: right;
	right: 0;
	bottom: 0;
	padding: 3px 6px;
	letter-spacing: .05em;
}
.p-caption.tl,.f-caption.tl {
	text-align: left;
}
.p-caption.wt,.f-caption.wt {
	color: #fff;
	/*text-shadow: 0 0 5px #000, 0 0 5px #000;*/
	padding: 0 10px 6px;
}
.p-caption.pwt,.f-caption.pwt {
	color: #fff;
	transform: translateY(110%);
}
.p-caption.bt,.f-caption.bt {
	color: #000;
	padding: 0 10px 6px;
}
.p-caption.pbt,.f-caption.pbt {
	color: #000;
	transform: translateY(110%);
}
.p-caption.w,.f-caption.w {
	color: rgba(255,255,255,1);
  padding: 3px 4px 4px;
  background: rgba(102,102,102,.8);
}
.p-caption.b,.f-caption.b {
	color: #000;
	padding: 6px 4px 5px;
  background: rgba(255,255,255,.7);
}
.p-caption.ow,.f-caption.ow {
	color: #fff;
  line-height: 1.2;
  display: block;
  position: static;
	margin-top: 10px;
	padding: 0;
}
.p-caption.ob,.f-caption.ob {
	color: #000;
	line-height: 1.2;
  display: block;
  position: static;
	margin-top: 10px;
	padding: 0;
}
.p-caption.l,.f-caption.l {
	right: auto;
	left: 0;
}
.p-caption.tl,.f-caption.tl {
	text-align: left;
}
.p-caption.tb,.f-caption.tb {
	bottom: 30px;
}
.p-caption.op,.f-caption.op {
	opacity: .7;
	color: #d9ddd9;
}
.p-caption. small.bl,.f-caption small.bl {
	display: block;
}
.p-caption.thin,.f-caption.thin{
	 background: rgba(0,0,0,.13);
}
@media screen and (max-width:768px) {
	.p-caption,.f-caption {
		font-size: 8px;
	    padding: 3px 5px;
	}
	.p-caption.wt,.f-caption.wt {
		padding: 3px 5px 3px;
	}
	.p-caption.bt,.f-caption.bt {
		padding: 3px 5px 3px;
	}
	.p-caption.ow,.f-caption.ow,
	.p-caption.ob,.f-caption.ob{
		margin-top: 5px;
	}
	.p-caption.tb,.f-caption.tb {
		bottom: 20px;
	}
}



/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
commonCapArea
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
.commonCapArea {
    padding-top: 50px;
    padding-bottom: 50px;
    color: #333;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    position: relative;
	/*font-family: 'YakuHanJP',"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";*/
}
	.commonCapArea ul li {
		font-size: 11px;
		line-height: 1.82;
		letter-spacing: 0.05em;
		color: rgba(255,255,255,.8);
		color: #000;
	    margin-left: 1em;
	    text-indent: -1em;
	}
	.commonCapArea.black ul li {
		color: #fff;
	}
@media screen and (max-width:768px) {
	.commonCapArea {
		padding-top: 40px;
  	padding-bottom: 40px;
	}
}




/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
underPage kv
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
.underPage #kv{
	position: relative;
}
.underPage #kv:before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 5px;
	background : linear-gradient(90deg, rgba(51, 214, 193, 1) 0%, rgba(55, 209, 202, 1) 21.57%, rgba(62, 198, 221, 1) 50%, rgba(180, 159, 225, 1) 100%);
	z-index: 1;
}
	.underPage #kv .kv{
		position: relative;
		/*padding: 140px 0 110px;*/
		padding: 80px 0 110px;
		width: 100%;
	}
	.underPage #kv .kv:before{
		content: '';
		position: absolute;
		left: 160px;
		bottom: 0;
		width: 72px;
		height: 72px;
		transform: rotate(45deg) scale(0.6);
		opacity: 0;
		transform-origin: top;
		background : linear-gradient(90deg, rgba(51, 214, 193, 1) 0%, rgba(180, 159, 225, 1) 100%);
		z-index: 2;
		transition: transform .4s .4s , opacity .4s .4s;
	}
	.underPage #kv .kv:after{
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 230px;
		height: 230px;
		transform: translate(-50%,80%) rotate(45deg) scale(0.6);
		opacity: 0;
		transform-origin: center;
		background : linear-gradient(90deg, rgba(51, 214, 193, 1) 0%, rgba(180, 159, 225, 1) 100%);
		z-index: 2;
		transition: transform .4s .2s , opacity .4s .2s;
	}
	.loaded.underPage #kv .kv:before{
		transform: rotate(45deg) scale(1.0);
		opacity: .1;
	}
	.loaded.underPage #kv .kv:after{
		transform: translate(-50%,80%) rotate(45deg) scale(1.0);
		opacity: .1;
	}
		.underPage #kv .kv h2{
			max-width: 1100px;
			width: 90%;
			margin: 0 auto;
			transform: translateX(-3%);
			opacity: 0;
			filter: blur(5px);
			transition: transform .6s .1s,opacity .6s .1s,filter .6s .1s;
		}
		.loaded.underPage #kv .kv h2{
			transform: translateX(0);
			opacity: 1;
			filter: blur(0);
		}
			.underPage #kv .kv h2 span{
				display: block;
				width: 100%;
				margin-right: auto;
			}
		.underPage #kv .kv .deco{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 40.66667%;
			height: 49px;
			background: url(../img/common/pc/deco.svg) no-repeat right bottom/cover;
		}
@media screen and (max-width: 768px){
	.underPage #kv:before{
		height: 2px;
	}
		.underPage #kv .kv{
			padding: 40px 0 55px
		}
		.underPage #kv .kv:before{
			left: 50px;
			width: 22px;
			height: 22px;
		}
		.underPage #kv .kv:after{
			width: 70px;
			height: 70px;
		}
			.underPage #kv .kv h2{
				max-width: 380px;
				width: 80%;
			}
				.underPage #kv .kv h2 span{
					margin: 0 auto;
				}
			.underPage #kv .kv .deco{
				width: 35%;
				height: 40px;
			}
}



/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
underPage intro
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
.underPage #intro{
	padding: 100px 0 90px;
}
	.underPage #intro .introBox{
		position: relative;
		max-width: 1500px;
		width: 100%;
		margin: 0 auto;
	}
		.underPage #intro .introBox p{
			font-size: 32px;
			line-height: 1.8125;
			letter-spacing: .2em;
			text-align: center;
		}
			.underPage #intro .introBox p span{
				font-size: 1.5625em;
				line-height: 1;
			}
			.underPage #intro .introBox p i{
				font-style: normal;
			}
		.underPage #intro .introBox .border{
			position: absolute;
			top: 20px;
			left: 1180px;
			width: 320px;
			height: 34px;
			overflow: hidden;
		}
			.underPage #intro .introBox .border:before,
			.underPage #intro .introBox .border:after{
				content: '';
				position: absolute;
				height: 2px;
			}
			.underPage #intro .introBox .border:before{
				width: 250px;
				top: 0;
				background-color: #a3c4f4;
			}
			.underPage #intro .introBox .border:after{
				width: 285px;
				bottom: 0;
				background-color: #70e2d4;
			}
			.underPage #intro .introBox .border i{
				position: absolute;
				display: block;
				top: 0;
				bottom: 0;
				height: 2px;
				width: 320px;
				background-color: #78d7e7;
				margin: auto;
			}
			.underPage #intro .introBox .border:before,
			.underPage #intro .introBox .border:after,
			.underPage #intro .introBox .border i{
				transition: right .5s .3s;
				right: -100%;
			}
			.loaded.underPage #intro .introBox .border:before,
			.loaded.underPage #intro .introBox .border:after,
			.loaded.underPage #intro .introBox .border i{
				right: 0;
			}
@media screen and (max-width: 768px){
	.underPage #intro{
		padding: 45px 0 50px;
	}
		.underPage #intro .introBox p{
			font-size: 22px;
		}
			.underPage #intro .introBox p i{
				display: block;
				line-height: 1;
			}
		.underPage #intro .introBox .border{
			position: absolute;
			top: -20px;
			left: auto;
			right: -60px;
			width: 128px;
			height: 14px;
		}
			.underPage #intro .introBox .border:before,
			.underPage #intro .introBox .border:after{
				height: 1px;
			}
			.underPage #intro .introBox .border:before{
				width: 114px;
			}
			.underPage #intro .introBox .border:after{
				width: 100px;
			}
			.underPage #intro .introBox .border i{
				height: 1px;
				width: 128px;
			}
}




/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
common bg
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
.bgGlad{
	position: relative;
	background : linear-gradient(90deg, rgba(173, 239, 230, 1) 0%, rgba(203, 221, 249, 1) 100%);
}
.bgGlad:before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 44%;
	padding-bottom: 280px;
	background: url(../img/home/pc/img_deco01.svg) no-repeat left top;
	background-size: 100% 100%;
	z-index: 0;
}
.bgGlad:after{
	content: '';
	position: absolute;
	width: 30%;
	padding-bottom: 25.3333%;
	right: 0;
	bottom: 0;
	background: url(../img/home/pc/img_deco02.svg) no-repeat left top;
	background-size: 100% 100%;
	z-index: 0;
}
@media screen and (max-width: 768px){
	.bgGlad{
	}
	.bgGlad:before{
		width: 69.5%;
		padding-bottom: 112px;
	}
	.bgGlad:after{
		width: 47.3684%;
		padding-bottom: 40%;
	}
}



/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
swipeIcon
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
.swipeBox {
	display: none;
}
@media only screen and (max-width: 768px) {
	.swipeBox {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 301;
    width: 146px;
    animation: horizontal 1s ease-in-out infinite alternate;
	}
}
@keyframes horizontal {
	0% { transform:translate(-10%,-50%); }
  100% { transform:translate(10%,-50%); }
}






/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
footer
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
#footer{
	background-color: #4d4d4d;
}
	.footerInfo{
		max-width: 1300px;
		width: 95%;
		margin: 0 auto;
		padding: 60px 0 70px;
	}
		.footerInfo .infoInner{
		}
			.footerInfo .info{
				max-width: 450px;
				width: 50%;
				text-align: left;
			}
				.footerInfo .info span{
					display: block;
				}
				.footerInfo .info span + span{
					margin-top: 15px;
				}
				.footerInfo .info .ttl{
					max-width: 396px;
				}
				.footerInfo .info .tel{
					max-width: 295px;
				}
				.footerInfo .info .business{
					/*max-width: 298px;*/
					max-width: 396px;
				}
				.footerInfo .info .commonNews{
					/*width: 90%;*/
					width: 100%;
			    font-size: 11px;
			    line-height: 1.75;
			    letter-spacing: .05em;
			    color: #fff;
			    text-align: justify;
			    border: solid 1px #999;
			    background-color: #666666;
			    padding: 8px 15px 11px;
			    box-sizing: border-box;
			    margin-top: 15px;
				}
					.footerInfo .info .commonNews em{
						display: block;
						font-style: normal;
						font-weight: normal;
						font-size: 1.1em;
					}
			.footerInfo .development{
				max-width: 607px;
				width: 46.69231%;
			}
				.footerInfo .development .owner{
					max-width: 285px;
					width: 46.95223%;
				}
@media screen and (max-width: 768px){
	.footerInfo{
		max-width: 560px;
		width: 80%;
		padding: 30px 0 50px;
	}
		.footerInfo .info{
			max-width: 560px;
			width: 100%;
			text-align: center;
			margin-bottom: 30px;
		    padding-bottom: 30px;
		    border-bottom: solid 1px rgba(255,255,255,.3);
		}
			.footerInfo .info span + span{
				margin-top: 10px;
			}
			.footerInfo .info .ttl{
			}
			.footerInfo .info .tel{
			}
			.footerInfo .info .business{
			}
			.footerInfo .info .commonNews{
				width: 100%;
		    font-size: 10px;
		    margin-top: 20px;
		    text-align: center;
			}
				.footerInfo .info .commonNews em{
					text-align: center;
				}
		.footerInfo .development{
			max-width: 285px;
			width: 100%;
			margin: 0 auto;
		}
			.footerInfo .development .owner{
				max-width: 560px;
				width: 100%;
			}
			.footerInfo .development .owner + .owner{
				margin-top: 20px;
			}
}



/* ================ footerGeomenu ================ */
.footerGeomenu{
	padding: 38px 0 41px;
	background-color: #fff;
}
	.footerGeomenu .menuInner{
		max-width: 1500px;
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		font-size: 0;
		text-align: center;
	}
		.footerGeomenu .menuInner .menuList{
			display: inline-block;
			margin: 0 15px;
		}
			.footerGeomenu .menuInner .menuList a{
				display: block;
				font-size: 14px;
				position: relative;
			}
			.footerGeomenu .menuInner .menuList a:before{
				content: ">";
				display: inline-block;
				margin-right: .5em;
			}
			/*.footerGeomenu .menuInner .menuList a:after{
				content: "";
				position: absolute;
				right: 0;
				bottom: 0;
				display: block;
				width: calc(100% - 1.2em);
				height: 1px;
				background-color: #fff;
			}*/
@media screen and (max-width: 768px){
	.footerGeomenu{
		padding: 0;
	}
		.footerGeomenu .menuInner{
			width: 100%;
		}
			.footerGeomenu .menuInner .menuList{
				display: block;
				border-top: solid 1px rgba(77,77,77,.3);
				margin: 0;
				padding: 20px 0;
			}
			.footerGeomenu .menuInner .menuList + .menuList{
					
			}
				.footerGeomenu .menuInner .menuList a{
					display: inline;
					font-size: 12px;
				}
}




/* ================ footerCopyright ================ */
.footerCopyright{
	font-size: 12px;
	line-height: 1;
	text-align: center;
	background-color: #f0f0f0;
	padding: 14px 0;
}
@media screen and (max-width: 768px){
	.footerCopyright{
		font-size: 10px;
	}
}



/* ================ spNav ================ */
#spNav{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	transform: translateY(100%);
	transition: .4s;
	z-index: 100;
}
#spNav.scrolled{
	transform: translateY(0);
}
	#spNav ul{
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
		#spNav ul li{
			width: 100%;
		}
		#spNav ul li + li{
			border-left: solid 1px rgba(0,0,0,.1);
		}
		#spNav ul li.sp-inquiry{
			background: linear-gradient(to right, #dcdddd 0%, #fff 100%);
		}
		#spNav ul li.sp-request{
			background: linear-gradient(to right, #cbba99 0%, #efe5c8 100%);
		}
		#spNav ul li.sp-reserve{
			background: linear-gradient(to right, #ab8e90 0%, #dbc7c6 100%);
		}
		#spNav ul li.sp-limited{
			background: linear-gradient(to right, #8eab95 0%, #cee2d5 100%);
		}
		#spNav ul li.sp-official{
			background: linear-gradient(to right, #ababab 0%, #ebebeb 100%);
		}
			#spNav ul li a{
				display: block;
				text-align: center;
				padding: 10px 9px 9px;
				box-sizing: border-box;
			}
			#spNav ul li a span{
				display: inline-block;
				width: 100%;
			}
@media screen and (min-width: 1481px){
	#spNav{
		display: none !important;
	}
}



/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
viewPhoto
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
.viewPhoto{
	position: relative;
	overflow: hidden;
}
.viewPhoto:before{
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all .5s cubic-bezier(0.77, 0, 0.18, 1);
    transition: all .5s cubic-bezier(0.77, 0, 0.18, 1);
    z-index: 10;
}
.viewPhoto.bl:before{
	background: #262626;
}
.viewPhoto.gr:before{
	background: #f4f4f4;
}
.viewPhoto.cl:before{
	background: #C8DFE3;
}
.viewPhoto.isView:before {
    left: 100%;
}


/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
effect photo
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
.effectphoto,
.effectphoto2{
	position: relative;
  opacity: 0;
  transition: 1s opacity cubic-bezier(.40,.575,.565,1);
}
.effectphoto.active,
.effectphoto2.active{
	opacity: 1;
    transition: 1.9s opacity cubic-bezier(.40,.575,.565,1);
}
.effectphoto:after, 
.effectphoto:before,
.effectphoto2:after, 
.effectphoto2:before{
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    opacity: 1;
    transition: 1.7s opacity cubic-bezier(.39,.575,.565,1),1.8s width cubic-bezier(.215,.61,.355,1);
}
.effectphoto:before,
.effectphoto2:before{
    background-color: rgba(255,255,255,.1);
    transition-delay: .3s;
}
.effectphoto.active:after, 
.effectphoto.active:before,
.effectphoto2.active:after, 
.effectphoto2.active:before  {
	width: 0;
	opacity: 0;
}



/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
blast text
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
/*span text animation*/
/*@-webkit-keyframes blast1 {  0% {   transform:rotateY(45deg); }    100% {  transform:rotateY(0); } }*/
@keyframes blast1 { 0% {  transform:rotateY(45deg);}   100% { transform:rotateY(0);} }
/*@-webkit-keyframes blast2 { 0% {  opacity: 0;transform:translateX(-70px);}  60% { opacity: 1; transform:translateX(5px);}  100% { opacity: 1; transform:translateX(0); } }*/
@keyframes blast2 { 0% {  opacity: 0;transform:translateX(-70px);}  60% { opacity: 1; transform:translateX(5px);}  100% { opacity: 1; transform:translateX(0); } }
/*@-webkit-keyframes blastSp { 0% {  opacity: 0;transform:translateX(-20px);}  60% { opacity: 1; transform:translateX(5px);}  100% { opacity: 1; transform:translateX(0); } }*/
@keyframes blastSp { 0% {  opacity: 0;transform:translateX(-20px);}  60% { opacity: 1; transform:translateX(5px);}  100% { opacity: 1; transform:translateX(0); } }
.blast{
	display: inline-block !important;
	overflow: hidden;
	transform-origin: top right;
}
	.blast.active{
		overflow: hidden;
		-webkit-animation: blast1 2.4s;
      	animation: blast1 2.4s;
		transform: rotateY(0);
	}
	.blast .blast-inner{
		display: block;
	}
	.blast.active .blast-inner{
		-webkit-animation: blast2 2.4s;
      	animation: blast2 2.4s;
		opacity: 1;
		transform:translateX(0); 
	}
	.blast.activeSp .blast-inner{
		-webkit-animation: blastSp 2.4s;
      	animation: blastSp 2.4s;
		opacity: 1;
		transform:translateX(0); 
	}


/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Universal animation
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
.animated {
	animation-duration: .5s;
	animation-fill-mode: both;
}
/* fade in */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fadeIn { animation-name: fadeIn; animation-fill-mode:both; animation-duration:.6s; visibility: visible !important; opacity: 0;}

/* fade in up */
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; }}
.fadeInUp { animation-name: fadeInUp; animation-fill-mode:both; animation-duration:.6s; visibility: visible !important; opacity: 0;}

/* fade in down */
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: none; }}
.fadeInDown { animation-name: fadeInDown; animation-fill-mode:both; animation-duration:.6s; visibility: visible !important; opacity: 0;}

/* fade in right */
@keyframes fadeInRight { from { opacity: 0; transform: translate(20px,0); } to { opacity: 1; transform: none; } }
.fadeInRight { animation-name: fadeInRight; animation-fill-mode:both; animation-duration:.6s; visibility: visible !important; opacity: 0;}

/* fade in left */
@keyframes fadeInLeft {
from { opacity: 0; transform: translate(-20px,0); }to { opacity: 1; transform: none; }}
.fadeInLeft { animation-name: fadeInLeft; animation-fill-mode:both; animation-duration:.6s; visibility: visible !important; opacity: 0;}

/* fade out */
@keyframes fadeOut { from { opacity: 1; }  to { opacity: 0; }}
.fadeOut { animation-name: fadeOut; }

/* fade slide */
@keyframes fadeSlide { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; }}
.fadeSlide { animation-name: fadeSlide; animation-fill-mode:both; animation-duration:.6s; visibility: visible !important; opacity: 0;}