@charset "utf-8";
/* CSS Document */
.mt20{margin-top: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb160{margin-bottom: 160px;}

.pc{display: block;}
.sp{display: none; margin: 0 auto;}
ul {list-style: none;}
figure{line-height: 0;}
.marker{background: linear-gradient(transparent 50%, #ddd95b 50%);}

/*----fonttype----*/
.F-base *{
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 500;
font-style: normal;}

.detail,.similar{
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 700;
font-style: normal;}

#prologue dt,#prologue dd,.common .leed,#prologue h2,#select h2{font-family: "zen-maru-gothic", sans-serif;
font-weight: 500;
font-style: normal;}

#prologue dt span,.common .subcopy span{font-family: "zen-maru-gothic", sans-serif;
font-weight: 700;
font-style: normal;}



h1,.blind{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;}




.mainbnr{
	text-align: center;
	background-color: #f7f7f7;
	line-height: 0;}
.mainbnr img{max-width: 70%;margin: 0 auto;}


.inner{width: 1000px;margin: 0 auto; padding: 80px 0 120px;}



#prologue{background-color: #00c9d3; text-align: center;}
#prologue .inner{width: 600px; position: relative;}
#prologue .inner:after{
	content: "";
	background: url("../img/prologue-items-pc.webp")no-repeat;
	width: 1006px;
	height: 149px;
	position: absolute;
	bottom: -70px;
	left: 50%;
	transform: translateX(-50%);}
#prologue p{margin-top: 15px; font-size: 16px;}
#prologue h2{font-size: 28px; padding:20px 30px; color: #007abd; position: relative; background-color: #fff; display: inline-block; margin: 0 auto 20px; border-radius: 10px; line-height: 1.5;}
#prologue h2:before{
	content: "もう迷わない！";
	background-color: #007abd;
	color: #ffff29;
	font-size: 24px;
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 20px;}
#prologue h2:after{
	content: "";
	display: inline-block;
	width: 31px;
	height: 21px;
	background: #ffffff;
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
	position: absolute;
	top: 95%;
	left: 50%;
	transform: translateX(-50%);}
#prologue dt{font-size: 26px; color: #fff; margin-bottom: 10px;}
#prologue dt span{color: #ffff29;}
#prologue dd{font-size: 17px; text-align: left; color: #fff;}


nav .inner{padding: 150px 0; text-align: center; position: relative;}
nav h2{text-align: center; font-size: 30px; margin-bottom: 60px; line-height: 1;}
nav figure{margin-top: 300px;}
nav .kitchen{position: absolute; top: 207px; right: 137px;}
nav .bus{position: absolute; top: 280px; left: -45px;}
nav .office{position: absolute; bottom: 165px; right: -15px;}
nav .shared-space{position: absolute; bottom: 14px; left: -36px;}
nav a{transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
nav a:hover {transform: translateY(-5px);/* 上に5px移動 */}



#genres01,#genres03{background-color: #00c9d3;}
#genres01 .subcopy-span,#genres03 .subcopy-span{color: #ffff29; border-bottom: dashed 2px #fff;}
#genres01 .leed,#genres03 .leed{color: #fff;}
#genres01 .list .item h3,#genres03 .list .item h3{color: #fff;}
#genres01 .list .item p,#genres03 .list .item p{color: #fff;}
#genres01 .list .item .detail,#genres03 .list .item .detail{color: #fff; background-color: #ea2527; box-sizing: border-box; border: solid 2px #ea2527;}
#genres01 .list .item .detail:hover,#genres03 .list .item .detail:hover{color: #ea2527; background-color: #fff; border: solid 2px #ea2527;}
#genres01 .list .item .similar,#genres03 .list .item .similar{color: #007abd; background-color: #fff; box-sizing: border-box; border: solid 2px #007abd;}
#genres01 .list .item .similar:hover,#genres03 .list .item .similar:hover{color: #fff; background-color: #007abd; border: solid 2px #fff;}


#genres02 .subcopy-span,#genres04 .subcopy-span{color: #007abd; border-bottom: dashed 2px #00c9d3;}
#genres02 .leed,#genres04 .leed{color: #292929;}
#genres02 .list .item h3,#genres04 .list .item h3{color: #292929;}
#genres02 .list .item p,#genres04 .list .item p{color: #292929;}
#genres02 .list .item .detail,#genres04 .list .item .detail{color: #fff; background-color: #ea2527; box-sizing: border-box; border: solid 2px #ea2527;}
#genres02 .list .item .detail,#genres04 .list .item .detail:hover{color: #ea2527; background-color: #fff; border: solid 2px #ea2527;}
#genres02 .list .item .similar,#genres04 .list .item .similar{color: #fff; background-color: #007abd;border: solid 2px #007abd; box-sizing: border-box;}
#genres02 .list .item .similar,#genres04 .list .item .similar:hover{color: #007abd; background-color: #fff; border: solid 2px #007abd;}


.common .pc{margin: 0 auto;}
.common .inner{padding-top: 160px;}
.common .title{margin:15px 0 40px; text-align:center; }
.common .subcopy{text-align: center;}
.common .subcopy span{font-size: 20px; position: relative;}
.common .leed{font-size: 20px; margin-bottom: 60px; text-align: center;}
.common .list {display: flex; flex-wrap: wrap;}
.common .list .item{width: 23.5%; margin-right: 2%; display: flex; flex-direction: column;}
.common .list .item:nth-child(4n){margin-right: 0;}
.common .list .item:nth-child(n+5){margin-top: 50px;}
.common .list .item figure img{width: 100%;}
.common .list .item h3{font-size: 18px; flex-grow: 1; line-height: 1.4; padding: 10px 0 20px;}
.common .list .item p{font-size: 18px; line-height: 1; margin-bottom: 25px;}
.common .list .item a{font-size: 16px; border-radius: 3px; display: block; text-align: center;}
.common .list .item .detail{padding: 10px 0;}
.common .list .item .similar{padding: 5px 0; margin-top: 10px;}


#genres01 .subcopy span:before{
	content: "";
	background: url("../img/kitchen.webp")no-repeat;
	width: 60px;
	height: 81px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -90px;}
#genres02 .subcopy span:before{
	content: "";
	background: url("../img/shared-space.webp")no-repeat;
	width: 60px;
	height: 81px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -90px;}
#genres03 .subcopy span:before{
	content: "";
	background: url("../img/bus.webp")no-repeat;
	width: 60px;
	height: 81px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -90px;}
#genres04 .subcopy span:before{
	content: "";
	background: url("../img/office.webp")no-repeat;
	width: 60px;
	height: 81px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -90px;}



#prologue h2{animation: fuwafuwa01 2s infinite ease-in-out;}
@keyframes fuwafuwa01 {
	0%, 100% {transform: translateY(0);}
	50% {transform: translateY(5px);}}



.spotlist_back {text-align: center;}
.spotlist_back a {
	font-size: 20px;
	border: solid 2px;
	padding: 15px 80px;
	border-radius: 10px;}


.rpa-product-name,.rpa-product-price{padding: 0; color: unset; line-height: inherit; font-size: inherit;}


@media only screen and (max-width: 768px) {}
@media (max-width: 1000px) {}
@media (max-width: 770px) {
	.inner{width: 95%;}
	#select .pc{display: none !important;}
	#select .sp{display: block !important;}
	nav .kitchen{right: 182px;}
	nav .bus{top: 447px; left: 130px;}
	nav .shared-space{top: 318px; left: 150px;}
	nav .office{bottom: 240px; right: 177px;}
}
@media (max-width: 648px) {
	.inner{width: 95% !important;}
	.pc{display: none;}
	.sp{display: block;}

	
	h1 img{max-width: 100%;}
	.inner{width: 95%;}
	
	.mainbnr img{max-width: 100%;}

	#prologue{margin: 0 auto;}
	#prologue .inner{padding: 60px 0 100px;}
	#prologue .inner:after{
	content: "";
	background: url("../img/prologue-items-sp.webp")no-repeat;
	width: 100%;
	height: 120px;
	position: absolute;
	bottom: -70px;
	left: 50%;
	transform: translateX(-50%);
	background-size: contain;}
	#prologue h2{font-size: 20px; padding: 40px 25px 20px;}
	#prologue h2:before{padding: 5px 15px; width: 60%}
	
	nav .inner{padding: 120px 0 50px;}
	nav h2{font-size: 25px; margin-bottom: 100px;}
	nav figure{margin-top: 150px;}
	nav .kitchen{top: 170px; right: 75px;}
	nav .bus{bottom: 305px; left: 25px; top: inherit;}
	nav .shared-space{top: 350px; left: 210px; bottom: inherit;}
	nav .office{bottom: 125px; right: 80px;}
	nav figure img{width: 100%;}
	
	.common .title{margin: 15px 0 20px;}
	.common .leed{text-align: left; font-size: 16px;}
	.common .list .item{width: 48%; margin-right:4%;}
	.common .list .item:nth-child(2n){margin-right: 0;}
	.common .list .item:nth-child(n+3){margin-top: 40px;}
}