/*
Title: アレバ小牧東1丁目
Last Updated: 2025-05-28
Author: Ryu
*/

@charset "utf-8";

/*----------------------------------------
	全体
----------------------------------------*/

html{
	font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	font-size:62.5%;
	color: #000;
	-webkit-text-size-adjust:100%;
	line-height:1.5;
	font-weight: 500;
}
body{ font-size:1.4rem; font-size: 1.4em; }
img{
	vertical-align: bottom;
	image-rendering: -webkit-optimize-contrast;
}
a{
	color: #000;
}
a:hover{
	color: #777;
}


/*----------------------------------------
	layout
----------------------------------------*/

#container{
	overflow: hidden;
}
.main_frame{
	width: 100%;
	position: relative;
	box-sizing: border-box;
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
}
#bk{
	position: relative;
}
#bk:before{
	content: "";
	position: fixed;
	width: 100%;
	height: 100%;
	background-size: contain;
	z-index: 1;
	background-color: #ffefd0;
	background-image: repeating-linear-gradient( 0deg,#e5d7bb 0px 1px, transparent 1px 150px), repeating-linear-gradient( 90deg,#e5d7bb 0px 1px, transparent 1px 150px);
}
#frame{
	position: relative;
	z-index: 2;
	background: #fff;
	box-shadow: 0 0 30px 0px rgb(0 0 0 / 30%);
	overflow: hidden;
}
.ribbon_l{
	position: fixed;
	top: 0;
	left: 0;
	background: url("../images/background_rbn.jpg") center top repeat-y;
	background-size: 100%;
	height: 100vh;
	width: 4.5%;
	max-width: 50px;
	z-index: 2;
}
.ribbon_r{
	position: fixed;
	top: 0;
	right: 0;
	background: url("../images/background_rbn.jpg") center top repeat-y;
	background-size: 100%;
	height: 100vh;
	width: 4.5%;
	max-width: 50px;
	z-index: 2;
}
.center{
	text-align: center;
}

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

	.lp_frame{
		width: 84%;
		margin-right: auto;
		margin-left: auto;
	}
	#frame{
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
	}

}/*END*/

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

	.ribbon_l,
	.ribbon_r{
		display: none;
	}

}/*END*/


/*----------------------------------------
	footer
----------------------------------------*/

.sp_menu{
	width: 100%;
	position: fixed;
	bottom: -100px;
	left: 0;
	box-sizing: border-box;
	z-index: 100;
	transition: all 0.4s;
}
.sp_menu a{
	display: block;
}
.sp_menu a:hover{
	opacity: 1 !important;
}
.sp_menu ul{
	display: flex;
	width: 100%;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 768px){

	.sp_menu ul{
		max-width: 768px;
	}

}/*END*/


/*----------------------------------------
	header
----------------------------------------*/

header{
	position: relative;
}
.drawer{
	position: fixed;
	background: rgba(0, 0, 0, 0.8);
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	color: #d0c077;
	display: flex;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transform: translateX(100%);
	transition: 0.5s ease-in-out;
	z-index: 50;
}
.drawer ul{
	text-align: center;
	padding-top: 100px;
}
.drawer ul li{
	position: relative;
	transform: translateX(-150px);
	transition: transform 0.5s ease;
	line-height: 1.4;
	margin-bottom: 10px;
	font-size: 1.6rem;
}
.drawer ul li a{
	display: inline-block;
	color: #fff;
	text-decoration: none;
	padding: 6px 0;
}
.drawer ul li a:hover{
	animation: drawer 1.4s;
	color: #C1C1C1;
}
@keyframes drawer{
	0%{
		filter: none;
	}
	30%{
		filter: blur(0.8px);
	}
	100%{
		filter: none;
	}
}
.open .drawer{
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
}
.open .drawer ul li{
	transform: translateX(0);
}
.drawer ul li:nth-child(2){ transition-delay: 0.15s; }
.drawer ul li:nth-child(3){ transition-delay: 0.20s; }
.drawer ul li:nth-child(4){ transition-delay: 0.25s; }
.drawer ul li:nth-child(5){ transition-delay: 0.3s; }
.drawer ul li:nth-child(6){ transition-delay: 0.35s; }
.drawer ul li:nth-child(7){ transition-delay: 0.4s; }
.drawer ul li:nth-child(8){ transition-delay: 0.45s; }
.drawer ul li:nth-child(9){ transition-delay: 0.5s; }
.drawer ul li:nth-child(10){ transition-delay: 0.55s; }
.drawer ul li:nth-child(11){ transition-delay: 0.6s; }
.drawer ul li:nth-child(12){ transition-delay: 0.65s; }
.drawer ul li:nth-child(13){ transition-delay: 0.7s; }
.drawer ul li:nth-child(14){ transition-delay: 0.75s; }

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

	.drawer ul{
		padding-top: 50px;
	}
	.drawer ul li{
		font-size: 1.6rem;
		margin-bottom: 15px;
	}

}/*END*/

.btn_menu{
	position: fixed;
	width: 40px;
	height: 40px;
	right: calc(50% - 250px);
	top: 0;
	cursor: pointer;
	transition: all 0.5s;
	z-index: 99;
	background: #dcb200;
	display: none;
}
.btn_menu span{
	position: absolute;
	right: 8px;
	height: 1px;
	background: #fff;
	transition: all 0.4s;
}
.btn_menu span:nth-child(1){
	top: 10px;
	width: 70%;
}
.btn_menu span:nth-child(2){
	top: 50%;
	width: 50%;
}
.btn_menu span:nth-child(3){
	bottom: 10px;
	width: 30%;
}
.open .btn_menu span:nth-child(1){
	transform: rotate(45deg);
	top: 20px;
	right: 6px;
}
.open .btn_menu span:nth-child(2){
	opacity: 0;
}
.open .btn_menu span:nth-child(3){
	transform: rotate(-45deg);
	top: 20px;
	width: 70%;
	right: 6px;
}

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

	.btn_menu{
		right: 0;
	}

}/*END*/


/*----------------------------------------
	MV
----------------------------------------*/

.mv{
	position: relative;
}
.mv_bg{
	opacity: 0;
}
.mv_bg.start{
	animation: mv_bg 1.5s cubic-bezier(1,.13,.83,.67) forwards;
}
@keyframes mv_bg{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.mv_img,
.mv_hito01,
.mv_hito02,
.mv_hito03,
.mv_hito04,
.mv_hito05,
.mv_hito06,
.mv_hito07,
.mv_point01,
.mv_point02,
.mv_point03,
.mv_gift,
.mv_ttl{
	position: absolute;
	opacity: 0;
}
.mv_img.start{
	animation: mv_fade 0.6s cubic-bezier(1,.13,.83,.67) forwards;
}
@keyframes mv_fade{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.mv_hito01.start,
.mv_hito02.start,
.mv_hito03.start,
.mv_hito04.start,
.mv_hito05.start,
.mv_hito06.start,
.mv_hito07.start{
	animation: mv_hito 0.6s cubic-bezier(.39,.52,.36,1.7) forwards;
}
@keyframes mv_hito{
	0%{
		opacity: 0;
		transform: translateY(0);
	}
	50%{
		opacity: 1;
		transform: translateY(-20px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}
.mv_point01.start,
.mv_point02.start,
.mv_point03.start{
	animation: mv_point 0.6s ease-in-out forwards;
}
@keyframes mv_point{
	0%{
		opacity: 0;
		transform: scale(1);
	}
	50%{
		opacity: 1;
		transform: scale(1.3);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}
.mv_ttl.start{
	animation: mv_ttl 0.6s ease-in-out forwards;
}
@keyframes mv_ttl{
	0%{
		opacity: 0;
		transform: scale(1);
	}
	50%{
		opacity: 1;
		transform: scale(1.8);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}
.mv_gift.start{
	animation: mv_gift 0.6s ease-in-out forwards;
}
@keyframes mv_gift{
	0%{
		opacity: 0;
		transform: rotate(0);
	}
	100%{
		opacity: 1;
		transform: rotate(360deg);
	}
}
.mv_img{
	top: 8%;
	left: 0;
}
.mv_hito01{
	width: calc((305/800)*100%);
	left: 15%;
	top: 5%;
	z-index: 1;
}
.mv_hito02{
	width: calc((146/800)*100%);
	right: 25%;
	top: 3%;
	z-index: 1;
}
.mv_hito03{
	width: calc((90/800)*100%);
	top: 45%;
	right: 4%;
	z-index: 1;
}
.mv_hito04{
	width: calc((296/800)*100%);
	right: 2.5%;
	bottom: 20%;
	z-index: 1;
}
.mv_hito05{
	width: calc((260/800)*100%);
	left: 20%;
	bottom: 15%;
	z-index: 1;
}
.mv_hito06{
	width: calc((80/800)*100%);
	left: 1%;
	bottom: 26%;
	z-index: 2;
}
.mv_hito07{
	width: calc((254/800)*100%);
	left: 43%;
	bottom: 0;
}
.mv_point01{
	width: calc((230/800)*100%);
	top: 4%;
	right: 0;
	z-index: 1;
}
.mv_point02 {
    width: calc((193 / 800) * 100%);
    right: 0;
    top: 19.5%;
    z-index: 2;
}
.mv_point03{
	width: calc((231/800)*100%);
	left: 0;
	top: 42%;
	z-index: 1;
}
.mv_gift{
	width: calc((339/800)*100%);
	left: 1%;
	bottom: -12%;
}
.mv_ttl{
	width: calc((650/800)*100%);
	left: 0;
	right: 0;
	margin: auto;
	top: 15%;
}


/*----------------------------------------
	concept
----------------------------------------*/

#concept{
	position: relative;
}
.concept_img01{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: calc((632/800)*100%);
	opacity: 0;
	filter: blur(40px);
	transform: scale(1.5);
}
.concept_img01.start{
	animation: concept_img01 0.8s ease-in-out forwards;
}
@keyframes concept_img01{
	0%{
		opacity: 0;
		filter: blur(40px);
		transform: scale(1.5);
	}
	100%{
		opacity: 1;
		filter: blur(0);
		transform: scale(1);
	}
}
.concept_deco01{
	position: absolute;
	width: calc((106/800)*100%);
	left: 5%;
	top: 12%;
}
.concept_deco02{
	position: absolute;
	width: calc((202/800)*100%);
	right: 4%;
	top: 29.5%;
}
.concept_deco03.start,
.concept_deco02.start{
	animation: concept_deco02 2s ease-in-out infinite;
}
@keyframes concept_deco02{
	0%{
		transform: rotate(0);
	}
	20%{
		transform: rotate(5deg);
	}
	40%{
		transform: rotate(-5deg);
	}
	60%{
		transform: rotate(5deg);
	}
	80%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(0);
	}
}
.concept_deco03{
	position: absolute;
	width: calc((176/800)*100%);
	right: 5%;
	top: 59%;
}
.concept_deco04{
	position: absolute;
	width: calc((134/800)*100%);
	left: 0;
	bottom: 26%;
	opacity: 0;
}
.concept_deco04.start{
	animation: concept_deco04 0.6s ease-in-out forwards;
	animation-delay: 0.5s;
}
@keyframes concept_deco04{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.concept_deco05{
	position: absolute;
	width: calc((262/800)*100%);
	right: 5%;
	bottom: 15.2%;
	opacity: 0;
}
.concept_deco05.start{
	animation: concept_deco05 0.6s ease-in-out forwards;
	animation-delay: 1s;
}
@keyframes concept_deco05{
	0%{
		opacity: 0;
		transform: scale(1.3);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}
.concept_circle{
	position: absolute;
	width: calc((176/800)*100%);
	right: 2%;
	top: 12%;
	opacity: 0;
}
.concept_circle.start{
	animation: concept_circle 0.6s ease-in-out forwards;
}
@keyframes concept_circle{
	0%{
		opacity: 0;
		transform: scale(1);
	}
	50%{
		opacity: 1;
		transform: scale(1.3);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}
.concept_img02_bg{
	position: relative;
}
.concept_img02{
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
}
.concept_img02.start{
	animation: concept_img02 0.6s ease-in-out forwards;
}
@keyframes concept_img02{
	0%{
		width: 1px;
	}
	100%{
		width: 100%;
	}
}
@media screen and (max-width: 749px){

	.concept_deco02{
		top: 25%;
	}


}/*END*/



/*----------------------------------------
	nayami
----------------------------------------*/

.nayami_bg{
	position: relative;
	background: url("../images/nayami_bg.jpg") center top no-repeat;
	background-size: 100%;
}
.nayami_deco01{
	position: absolute;
	width: calc((67/800)*100%);
	left: 9%;
	top: 32%;
	opacity: 0;
}
.nayami_deco01.start{
	animation: nayami_deco01 3s forwards;
	animation-delay: 0.8s;
}
@keyframes nayami_deco01{
	0%{
		opacity: 0;
		transform: rotate3d(0) ;
	}
	20%{
		opacity: 1;
		transform: rotate3d(1,1,0,360deg) ;
	}
	40%{
		opacity: 1;
		transform: rotate3d(0) ;
	}
	60%{
		opacity: 1;
		transform: rotate3d(1,1,0,360deg) ;
	}
	80%{
		opacity: 1;
		transform: rotate3d(0) ;
	}
	100%{
		opacity: 1;
		transform: rotate3d(1,1,0,360deg) ;
	}
}
.nayami_deco02{
	position: absolute;
	width: calc((174/800)*100%);
	right: 6%;
	top: 38%;
	opacity: 0;
}
.nayami_deco02.start{
	animation: nayami_deco02 0.8s forwards;
	animation-delay: 1.3s;
}
.nayami_deco03{
	position: absolute;
	width: calc((150/800)*100%);
	left: 6%;
	top: 58%;
	opacity: 0;
}
.nayami_deco03.start{
	animation: nayami_deco02 0.8s forwards;
	animation-delay: 1.8s;
}
@keyframes nayami_deco02{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.nayami_ttl.start{
	animation: nayami_ttl 1s ease-in-out forwards;
}
@keyframes nayami_ttl{
	0%{
		transform: rotate(0);
	}
	20%{
		transform: rotate(8deg);
	}
	40%{
		transform: rotate(-8deg);
	}
	60%{
		transform: rotate(8deg);
	}
	80%{
		transform: rotate(-8deg);
	}
	100%{
		transform: rotate(0);
	}
}
.nayami01,
.nayami03{
	position: relative;
	left: -80%;
	opacity: 0;
}
.nayami02{
	position: relative;
	right: -80%;
	opacity: 0;
}
.nayami01.start,
.nayami03.start{
	animation: nayami01 0.8s ease-in-out forwards;
}
.nayami03.start{
	animation-delay: 1s;
}
@keyframes nayami01{
	0%{
		opacity: 0;
		left: -80%;
	}
	100%{
		opacity: 1;
		left: 0;
	}
}
.nayami02.start{
	animation: nayami02 0.8s ease-in-out forwards;
	animation-delay: 0.5s;
}
@keyframes nayami02{
	0%{
		opacity: 0;
		right: -80%;
	}
	100%{
		opacity: 1;
		right: 0;
	}
}


/*----------------------------------------
	present
----------------------------------------*/

#present{
	position: relative;
}
#present a{
	position: absolute;
	width: calc((580/800)*100%);
	left: 50%;
	transform: translateX(-50%);
	bottom: 32%;
	animation: btn_yoyaku 1.2s ease-in-out infinite;
}
@keyframes btn_yoyaku{
	0%{
		bottom: 32%;
	}
	50%{
		bottom: 33%;
	}
	100%{
		bottom: 32%;
	}
}
.bg_white{
	height: 30px;
	background: #fff;
}
.present_ttl{
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}
.present01.start .present_ttl,
.present02.start .present_ttl,
.present03.start .present_ttl{
	animation: present_ttl 0.6s ease-in-out forwards;
}
@keyframes present_ttl{
	0%{
		opacity: 0;
	}
	50%{
		opacity: 1;
		transform: scale(1.5);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}


/*----------------------------------------
	areba
----------------------------------------*/

.areba_ttl_frame{
	position: relative;
}
.areba_ttl{
	position: absolute;
	left: 0;
	bottom: 0;
}
.areba_deco01{
	position: absolute;
	width: calc((162/800)*100%);
	left: 0;
	bottom: -1%;
	opacity: 0;
}
.areba_deco01.start{
	animation: areba_deco01 1s ease-in-out forwards;
	animation-delay: 0.3s;
}
@keyframes areba_deco01{
	0%{
		opacity: 0;
		left: -100%;
	}
	100%{
		opacity: 1;
		left: 0;
	}
}
.areba_deco02{
	position: absolute;
	width: calc((146/800)*100%);
	right: 8%;
	bottom: 3%;
	opacity: 0;
}
.areba_deco02.start{
	animation: areba_deco02 0.6s ease-in-out forwards;
	animation-delay: 1.2s;
}
@keyframes areba_deco02{
	0%{
		opacity: 0;
		bottom: 3%;
	}
	50%{
		opacity: 1;
		bottom: 5%;
	}
	100%{
		opacity: 1;
		bottom: 3%;
	}
}
#areba ul{
	background: #fffae9;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 20px;
	padding-left: 5%;
	padding-right: 5%;
}
#areba ul.start li{
	animation: areba_link 0.8s ease-in-out forwards;
}
#areba ul.start li:nth-child(2){
	animation-delay: 0.3s;
}
#areba ul.start li:nth-child(3){
	animation-delay: 0.6s;
}
#areba ul.start li:nth-child(4){
	animation-delay: 0.9s;
}
@keyframes areba_link{
	0%{
		transform: translateY(0);
	}
	50%{
		transform: translateY(20px);
	}
	100%{
		transform: translateY(0);
	}
}
.areba_detail{
	position: relative;
}
.areba_deco03{
	position: absolute;
	width: calc((232/800)*100%);
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.areba_deco04{
	position: absolute;
	width: calc((123/800)*100%);
	right: 6%;
	bottom: -10%;
	z-index: 1;
}
.areba_point_frame{
	background: #fffae9;
	padding-bottom: 40px;
}
.areba_point{
	position: relative;
}
.point_img{
	width: calc((710/800)*100%);
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 40px;
}
.point_obi{
	position: absolute;
}
.areba_point01,
.areba_point02,
.areba_point03,
.areba_point04{
	opacity: 0;
}
.areba_point01.start,
.areba_point02.start,
.areba_point03.start,
.areba_point04.start{
	animation: areba_point 0.6s ease-in-out forwards;
}
@keyframes areba_point{
	0%{
		opacity: 0;
		transform: translateY(0);
	}
	50%{
		opacity: 1;
		transform: translateY(-30px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}
.areba_point01 .point_obi{
	top: 3%;
	left: 5%;
	opacity: 0;
}
.areba_point01.start .point_obi{
	animation: point_obi01 0.3s ease-in-out forwards;
	animation-delay: 0.5s;
}
@keyframes point_obi01{
	0%{
		opacity: 0;
		width: 0;
	}
	100%{
		opacity: 1;
		width: calc((296/800)*100%);
	}
}
.areba_point02 .point_obi{
	width: 0;
	top: 35%;
	right: 3%;
}
.areba_point02.start .point_obi{
	animation: point_obi02 0.3s ease-in-out forwards;
	animation-delay: 0.5s;
}
@keyframes point_obi02{
	0%{
		opacity: 0;
		width: 0;
	}
	100%{
		opacity: 1;
		width: calc((220/800)*100%);
	}
}
.areba_point03 .point_obi{
	width: 0;
	top: 3%;
	left: 5%;
	opacity: 0;
}
.areba_point03.start .point_obi{
	animation: point_obi03 0.3s ease-in-out forwards;
	animation-delay: 0.5s;
}
@keyframes point_obi03{
	0%{
		opacity: 0;
		width: 0;
	}
	100%{
		opacity: 1;
		width: calc((260/800)*100%);
	}
}
.areba_point04 .point_obi{
	width: 0;
	top: 3%;
	left: 5%;
	opacity: 0;
}
.areba_point04.start .point_obi{
	animation: point_obi04 0.3s ease-in-out forwards;
	animation-delay: 0.5s;
}
@keyframes point_obi04{
	0%{
		opacity: 0;
		width: 0;
	}
	100%{
		opacity: 1;
		width: calc((306/800)*100%);
	}
}


/*----------------------------------------
	plan
----------------------------------------*/

#plan{
	background: url("../images/plan_bg.gif") center top no-repeat #d8ebf7;
	background-size: 100%;
}
.plan_text{
	position: relative;
}
.plan_deco01{
	position: absolute;
	width: calc((83/800)*100%);
	left: 7%;
	top: 25%;
}
.plan_deco02{
	position: absolute;
	width: calc((160/800)*100%);
	right: 3%;
	top: 18%;
}
.plan_deco03{
	position: absolute;
	width: calc((126/800)*100%);
	left: 3%;
	top: 60%;
}
.plan_deco04{
	position: absolute;
	width: calc((109/800)*100%);
	right: 4%;
	bottom: 3%;
}
.plan_deco01,
.plan_deco02,
.plan_deco03,
.plan_deco04{
	opacity: 0;
}
.plan_deco01.start,
.plan_deco02.start,
.plan_deco03.start,
.plan_deco04.start{
	animation: plan_deco 0.8s ease-in-out forwards;
}
.plan_deco01.start{
	animation-delay: 0.5s;
}
.plan_deco02.start{
	animation-delay: 0.8s;
}
.plan_deco03.start{
	animation-delay: 1.1s;
}
.plan_deco04.start{
	animation-delay: 1.4s;
}
@keyframes plan_deco{
	0%{
		opacity: 0;
		transform: scale(1);
	}
	50%{
		opacity: 1;
		transform: scale(1.2);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}
.plan_slider{
	position: relative;
	background: #d8ebf7;
	padding-bottom: 80px;
}
.swiper-button-prev{
	background: url("../images/prev.png");
	width: 50px;
	height: 50px;
	position: absolute;
	left: 3%;
	top: 50%;
	transform: translateY(-50%);
}
.swiper-button-next{
	background: url("../images/next.png");
	width: 50px;
	height: 50px;
	position: absolute;
	right: 3%;
	top: 50%;
	transform: translateY(-50%);
}
.swiper-button-prev:after,
.swiper-button-next:after{
	content: none;
}
.swiper-pagination{
	bottom: 40px !important;
}
.swiper-pagination-bullet{
	width: 12px !important;
	height: 12px !important;
	background: #c7c7c7 !important;
	opacity: 1 !important;
	margin-left: 6px !important;
	margin-right: 6px !important;
}
.swiper-pagination-bullet-active{
	background: #40464a !important;
}


/*----------------------------------------
	spec
----------------------------------------*/

#spec{
	position: relative;
	background: url("../images/spec_bg.jpg") center top;
	background-size: 100%;
}
.spec_deco01{
	position: absolute;
	width: calc((127/800)*100%);
	left: 6%;
	top: 3%;
	animation: spec_deco 3.5s ease-in-out infinite;
}
.spec_deco02{
	position: absolute;
	width: calc((202/800)*100%);
	right: 5%;
	top: 2%;
	animation: spec_deco 3.5s ease-in-out infinite;
	animation-delay: 0.8s;
}
@keyframes spec_deco{
	0%{
		transform: rotate(0);
	}
	10%{
		transform: rotate(4deg);
	}
	20%{
		transform: rotate(-4deg);
	}
	30%{
		transform: rotate(4deg);
	}
	40%{
		transform: rotate(-4deg);
	}
	50%{
		transform: rotate(4deg);
	}
	60%{
		transform: rotate(-4deg);
	}
	70%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(0);
	}
}
.spec_copy01{
	position: relative;
	right: -100%;
}
.spec_copy01.start{
	animation: spec_copy01 0.6s ease-in-out forwards;
}
@keyframes spec_copy01{
	0%{
		right: -100%;
	}
	100%{
		right: 0;
	}
}
.spec_copy02{
	position: relative;
	left: -100%;
}
.spec_copy02.start{
	animation: spec_copy02 0.6s ease-in-out forwards;
}
@keyframes spec_copy02{
	0%{
		left: -100%;
	}
	100%{
		left: 0;
	}
}
.spec_img02,
.spec_img01{
	opacity: 0;
}
.spec_img02.start,
.spec_img01.start{
	animation: spec_img01 0.8s ease-in-out forwards;
	animation-delay: 0.5s;
}
@keyframes spec_img01{
	0%{
		opacity: 0;
		filter: blur(4px);
	}
	100%{
		opacity: 1;
		filter: blur(0);
	}
}


/*----------------------------------------
	gallery
----------------------------------------*/

#gallery{
	position: relative;
	background: #fffae9;
	padding-bottom: 80px;
}
.gallery_deco01{
	position: absolute;
	width: calc((165/800)*100%);
	left: 0.5%;
	top: 10%;
	animation: gallery_deco 1.5s ease-in-out infinite;
}
.gallery_deco02{
	position: absolute;
	width: calc((149/800)*100%);
	right: 3%;
	top: 2%;
	animation: gallery_deco 1.5s ease-in-out infinite;
}
@keyframes gallery_deco{
	0%{
		transform: rotate(0);
	}
	20%{
		transform: rotate(4deg);
	}
	40%{
		transform: rotate(-4deg);
	}
	60%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(0);
	}
}


/*----------------------------------------
	land
----------------------------------------*/

#land{
	position: relative;
	background: url("../images/land_bg.jpg") center top no-repeat;
	background-size: 100%;
}
#land ul{
	margin-left: auto;
	margin-right: auto;
	width: calc((620/800)*100%);
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 20px;
}
#land ul li{
	opacity: 0;
}
#land ul.start li{
	animation: land_point 0.8s ease-in-out forwards;
}
#land ul.start li:nth-child(2){
	animation-delay: 0.3s;
}
#land ul.start li:nth-child(3){
	animation-delay: 0.6s;
}
@keyframes land_point{
	0%{
		opacity: 0;
		transform: translateY(20px);
	}
	50%{
		opacity: 1;
		transform: translateY(-20px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}
.land_deco01{
	position: absolute;
	width: calc((117/800)*100%);
	left: 0;
	top: 8%;
	animation: gallery_deco 1.5s ease-in-out infinite;
}
.land_deco02{
	position: absolute;
	width: calc((110/800)*100%);
	right: 2%;
	top: 2%;
	animation: gallery_deco 1.5s ease-in-out infinite;
}
.land_img{
	opacity: 0;
	filter: blur(10px);
	transform: scale(1.3);
}
.land_img.start{
	animation: land_img 1s ease-in-out forwards;
}
@keyframes land_img{
	0%{
		opacity: 0;
		filter: blur(20px);
		transform: scale(1.3);
	}
	100%{
		opacity: 1;
		filter: blur(0);
		transform: scale(1);
	}
}


/*----------------------------------------
	location
----------------------------------------*/

#location{
	position: relative;
	background: #dff4e8;
}
.location_deco01{
	position: absolute;
	width: calc((128/800)*100%);
	left: 3%;
	top: 2%;
	animation: location_deco 2.5s ease-in-out infinite;
}
.location_deco02{
	position: absolute;
	width: calc((107/800)*100%);
	right: 4%;
	top: 2.5%;
	animation: location_deco 2.5s ease-in-out infinite;
	animation-delay: 0.8s;
}
@keyframes location_deco{
	0%{
		transform: rotate(0);
	}
	15%{
		transform: rotate(5deg);
	}
	30%{
		transform: rotate(-5deg);
	}
	45%{
		transform: rotate(5deg);
	}
	50%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(0);
	}
}
.location_deco03{
	position: absolute;
	width: calc((268/800)*100%);
	right: 2.5%;
	bottom: 1%;
	opacity: 0;
}
.location_deco03.start{
	animation: location_deco03 0.6s ease-in-out forwards;
	animation-delay: 0.5s;
}
@keyframes location_deco03{
	0%{
		opacity: 0;
		transform: translateY(0);
	}
	50%{
		opacity: 1;
		transform: translateY(-40px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}
.location_img01,
.location_img02,
.location_img03,
.location_img04{
	opacity: 0;
}
.location_img01.start,
.location_img02.start,
.location_img03.start,
.location_img04.start{
	animation: location_img 0.8s ease-in-out forwards;
	animation-delay: 0.5s;
}
@keyframes location_img{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.location_other01,
.location_other02{
	position: relative;
}
.location_other01_text,
.location_other02_text{
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	width: 0;
}
.location_other01_text.start,
.location_other02_text.start{
	animation: location_other 0.8s ease-in-out forwards;
}
@keyframes location_other{
	0%{
		opacity: 0;
		width: 0;
	}
	100%{
		opacity: 1;
		width: 100%;
	}
}


/*----------------------------------------
	access
----------------------------------------*/

#access{
	position: relative;
	background: #fffae9;
}
.access_deco01{
	position: absolute;
	width: calc((174/800)*100%);
	left: 2%;
	top: 10%;
	opacity: 0;
}
.access_deco02{
	position: absolute;
	width: calc((125/800)*100%);
	top: 3%;
	right: 2%;
	opacity: 0;
}
.access_deco03{
	position: absolute;
	width: calc((103/800)*100%);
	right: 3.5%;
	top: 25%;
	opacity: 0;
}
.access_deco04{
	position: absolute;
	width: calc((159/800)*100%);
	right: 2%;
	top: 50%;
	opacity: 0;
	z-index: 1;
}
.access_deco01.start,
.access_deco02.start,
.access_deco03.start,
.access_deco04.start{
	animation: access_deco 0.8s ease-in-out forwards;
}
.access_deco02.start{
	animation-delay: 0.4s;
}
.access_deco03.start{
	animation-delay: 0.8s;
}
.access_deco04.start{
	animation-delay: 1.2s;
}
@keyframes access_deco{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.access_route{
	opacity: 0;
	filter: blur(40px);
	transform: scale(1.3);
}
.access_route.start{
	animation: access_route 0.8s ease-in-out forwards;
}
@keyframes access_route{
	0%{
		opacity: 0;
		filter: blur(40px);
		transform: scale(1.3);
	}
	100%{
		opacity: 1;
		filter: blur(0);
		transform: scale(1);
	}
}
.map{
	padding-left: 6%;
	padding-right: 6%;
	aspect-ratio: 3/2;
	filter: blur(5px);
	opacity: 0;
	transform: scale(1.3);
}
.map iframe{
	width: 100%;
	height: 100%;
}
.map.start{
	animation: map 0.8s ease-in-out forwards;
}
@keyframes map{
	0%{
		filter: blur(10px);
		opacity: 0;
		transform: scale(1.3);
	}
	100%{
		filter: blur(0);
		opacity: 1;
		transform: scale(1);
	}
}


/*----------------------------------------
	outline
----------------------------------------*/

#outline{
	background: #fff;
}

/*----------------------------------------
	form
----------------------------------------*/

.form_frame{
	background: #d8ebf7;
	width: 100%;
	box-sizing: border-box;
	padding-left: 5%;
	padding-right: 5%;
	color: #000;
	font-size: 1.6rem;
}
.form_frame p{
	line-height: 2;
}
.contact{
	width: 100%;
	line-height: 2;
}
.contact th,
.contact td{
	text-align: left;
	box-sizing: border-box;
	font-size: 1.6rem;
}
.contact th{
	padding: 15px 10px 5px 10px;
}
.contact td{
	padding: 10px;
}
.form_submit a{
	display: block;
	width: calc((650/800)*100%);
	margin-left: auto;
	margin-right: auto;
}
.hissu,
.nini{
	display: inline-block;
	padding: 5px;
	border-radius: 3px;
	border-width: 1px;
	border-style: solid;
	line-height: 1;
	font-weight: normal;
	margin-left: 10px;
	font-size: 1.4rem;
}
.hissu{
	background: #ca095b;
	border-color: #ca095b;
	color: #fff;
}
.nini{
	color: #000;
	border-color: #645A64;
	background: #fff;
}
td.error{
	background: #ffe0e2;
}
td div.error{
	color: #ff000e;
	line-height: 1.3;
	padding-top: 10px;
	padding-left: 5px;
}
.privacy .error{
	color: #ff000e;
	line-height: 1.3;
	padding: 10px 10px;
	background: #ffe0e2;
	margin-top: 12px;
}
.comolete_tel{
	font-size: 2rem !important;
	font-weight: bold;
}

/*フォーム基本設定*/
select,
textarea,
input[type="text"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="tel"]{
	border: none;
	padding: 16px 15px;
	box-sizing: border-box;
	font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	-webkit-appearance: none;
	transition: all 0.4s;
	border: 1px solid #ccc;
	background: #fff;
	line-height: 1;
	font-size: 1.6rem;
}
select{
	padding: 20px 15px;
	width: 100%;
}
textarea{
	line-height: 1.4;
}
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus{
	outline: none;
	border: 1px solid #ca095b;
}
.form1{ width: 200px; }
.form_all{
	width: 100%;
}


/*----------------------------------------
	checkbox radiobtn
----------------------------------------*/

.radio input[type="radio"],
.check input[type="checkbox"]{
	position: absolute;
	height: 1px;
	width: 1px;
	clip: rect(0, 0, 0, 0);
}
.radio label,
.check label{
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-left: 12px;
	padding-left: 22px;
	line-height: 3;
	background: none !important;
	margin-right: 12px;
}
.privacy_check.check label{
	margin-right: 0 !important;
}
.privacy_check.check label{
	background: #fff;
}
.radio label:before,
.check label:before{
	position: absolute;
	content: "";
	top: 50%;
	left: -10px;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border-radius: 50%;
	border: 1px solid #aeaeae;
	background: #fff;
}
.check label:before{ border-radius: 0; }
.radio label,
.check label{
	margin-left: 0\9;
	padding: 11px\9;
}
.radio label:not(:target),
.check label:not(:target){
	margin-left: 10px\9;
	padding: 11px 0 11px 25px\9;
}
.radio label:before,
.check label:before{
	display: none\9;
}
.radio label:not(:target):before,
.check label:not(:target):before{
	display: inline-block\9;
}
.radio input[type="radio"]:checked + label:after{
	position: absolute;
	content: "";
	box-sizing: border-box;
	top: 50%;
	left: -4px;
	width: 12px;
	height: 12px;
	margin-top: -5px;
	border-radius: 50%;
	background: #ca095b;
}
.check input[type="checkbox"]:checked + label:after{
	content: "";
	position: absolute;
	top: 50%;
	box-sizing: border-box;
	display: block;
	left: -7px;
	width: 18px;
	height: 10px;
	margin-top: -6px;
	border-left: 4px solid #ca095b;
	border-bottom: 4px solid #ca095b;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.radio input[type="radio"]:focus + label:before,
.check input[type="checkbox"]:focus + label:before{
	box-shadow: 0 0 3px 0 #ca095b;
}


/*----------------------------------------
	sp btn
----------------------------------------*/

.sp_menu{
	width: 100%;
	position: fixed;
	bottom: -100px;
	left: 0;
	box-sizing: border-box;
	z-index: 10;
	transition: all 0.4s;
}
.sp_menu a{
	display: block;
}
.sp_menu a:hover{
	opacity: 1 !important;
}
.sp_menu ul{
	display: flex;
	width: 100%;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 749px){

	.sp_menu ul{
		max-width: 100%;
	}

}/*END*/


/*----------------------------------------
	カレント表示ナビゲーション
----------------------------------------*/

.target_nav {
	display: none;
	position: fixed;
	z-index: 100;
	top: 50%;
	right: 50%;
	transform: translate(calc(-50% + 300px),-50%);
	z-index: 49;
}
.header__link {
	display: block;
	width: 6px;
	height: 28px;
	background-color: transparent;
	border: 1px solid #d0c5ae;
	margin-top: 20px;
}
.header__link.is-active {
	background-color: #d0c5ae;
}
li.header__item {
	position: relative;
}
li.header__item:after {
	display: block;
	position: absolute;
	top: 50%;
	color: #d0c5ae;
	transform: translate(200%, -50%);
}

/*横の文字調整*/
li.header__item:first-child:after {
	content: "1";
}
li.header__item:nth-child(2):after {
	content: "2";
}
li.header__item:nth-child(3):after {
	content: "3";
}
li.header__item:nth-child(4):after {
	content: "4";
}
li.header__item:nth-child(5):after {
	content: "5";
}
li.header__item:nth-child(6):after {
	content: "6";
}
li.header__item:nth-child(7):after {
	content: "7";
}
li.header__item:nth-child(8):after {
	content: "8";
}
li.header__item:nth-child(9):after {
	content: "9";
}
li.header__item:nth-child(10):after {
	content: "10";
	transform: translate(90%, -50%);
}
li.header__item:nth-child(11):after {
	content: "11";
	transform: translate(90%, -50%);
}
li.header__item:nth-child(12):after {
	content: "12";
	transform: translate(90%, -50%);
}
li.header__item:last-of-type:after {
	content: "予\A約";
	transform: translate(90%, -50%);
}
@media screen and (max-width: 749px){

	.target_nav{
		display: none !important;
	}

}/*END*/


/*----------------------------------------
	datepicker
----------------------------------------*/

#ui-datepicker-div{
	max-width: 100%;
	width: 370px;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button, html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active{
	padding: 15px;
}
.ui-datepicker .ui-datepicker-header{
	padding: 8px 0;
}


/*----------------------------------------
	animation
----------------------------------------*/

.outline_text,
.location_h01,
.location_h02,
.location_h03,
.concept_copy,
.concept_deco01,
.outline_ttl,
.access_copy,
.access_ttl,
.location_copy,
.location_ttl,
.land_copy,
.land_ttl,
.gallery_copy,
.gallery_ttl,
.spec_ttl,
.plan_ttl,
.areba_ttl,
.nayami_copy02,
.nayami_copy01,
.concept_ttl{
	opacity: 0;
}
.location_h01.start,
.location_h02.start,
.location_h03.start,
.concept_deco01.start,
.form_ttl.start,
.outline_ttl.start,
.access_ttl.start,
.location_ttl.start,
.land_ttl.start,
.gallery_ttl.start,
.spec_ttl.start,
.plan_ttl.start,
.areba_ttl.start,
.nayami_copy02.start,
.concept_ttl.start{
	animation: ttl_jump 0.8s ease-in-out forwards;
}
@keyframes ttl_jump{
	0%{
		opacity: 0;
		transform: translateY(50px);
	}
	50%{
		opacity: 1;
		transform: translateY(-50px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}
.outline_text.start,
.concept_copy.start,
.access_copy.start,
.location_copy.start,
.land_copy.start,
.gallery_copy.start,
.nayami_copy01.start{
	animation: ttl_fade 0.6s ease-in-out forwards;
}
.concept_deco01.start,
.access_copy.start,
.location_copy.start,
.land_copy.start,
.gallery_copy.start,
.nayami_copy02.start{
	animation-delay: 0.5s;
}
@keyframes ttl_fade{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}