@charset "utf-8";


#main .main-visual{ position: relative; width: 750px; padding-top: 1233px; margin: 0 auto; overflow: hidden; }
#main .main-visual > *{ position: absolute; left: 0; top: 0; }
#main .main-visual .bg01{ width: 100%; }
#main .main-visual .bg02{ width: 100%; }
#main .main-visual .photo01{ width: 49.3333%; margin: 24.9871% 0 0 44.2346%; }
#main .main-visual .photo02{ width: 59.2%; margin: 43.2853% 0 0 -1.1930%; }
#main .main-visual .photo03{ width: 58%; margin: 82.8424% 0 0 42.2777%; }
#main .main-visual .illust01{ width: 51.6%; margin: 97.7954% 0 0 -13.8872%; }
#main .main-visual .illust02{ width: 111.2%; margin: 144.7448% 0 0 -3.9068%; }
#main .main-visual .deco01{ width: 100%; }
#main .main-visual .deco02{ width: 100%; }
#main .main-visual .ttl{ width: 86%; margin: 9.1896% 0 0 6.9811%; }
#main .main-visual .copy{ width: 12%; margin: 108.6588% 0 0 29.0707%; }
#main .content{ width: 100%; max-width: 750px; }
#main .intro{ padding: 5%; }
#main .intro *{ color: #000000; }
#main .intro .head{ color: #d71718; }
#main .intro .yoyaku-navi2{ margin-left: auto; margin-right: auto; }
#main .yoyaku-navi2{ background-color: #000000; margin: 12% 5% 0; position: relative; border-radius: 20px; }
#main .yoyaku-navi2 .overlay{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); z-index: 10; }
#main .yoyaku-navi2::before{ content: ""; position: absolute; left: 50%; bottom: 100%; width: 19.642%; padding-top: 9.821%; background-color: #000000; transform: translateX(-50%); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
#main .yoyaku-navi2::after{ content: ""; position: absolute; right: 5%; top: 50%; transform: translateY(-50%) rotate(45deg); border: solid transparent; border: 1px solid #ffffff; border-width: 0 1px 1px 0; width: 2%; padding-top: 2%; }
#main .yoyaku-navi2 .reservation-bubble{ width: 12.1448%; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%) translate(-10%,10%); line-height: 0; }
#main .yoyaku-navi2 .reservation-head{ text-align: center; color: #ffffff; padding: 3% 0; position: relative; cursor: pointer; }
#main .page-index{ background-color: #f9f5ec; padding-bottom: 5%; }

@media screen and (max-width: 480px){ /*480px以下のcss*/
	#main .main-visual{ width: 100%; padding-top: 164.3999%; }
}


/*animation*/
#main .main-visual .bg02{ opacity: 0; }
#main .main-visual.show .bg02{ opacity: 1; transition: opacity 0.5s 1s; }
#main .main-visual .photo01,
#main .main-visual .photo02,
#main .main-visual .photo03{ opacity: 0; transform: translateY(-50px); }
#main .main-visual.show .photo01,
#main .main-visual.show .photo02,
#main .main-visual.show .photo03{ opacity: 1; transform: translateY(0); transition: opacity 0.5s, transform 0.7s ease; }
#main .main-visual.show .photo01{ transition-delay: 0.6s; }
#main .main-visual.show .photo02{ transition-delay: 0.7s; }
#main .main-visual.show .photo03{ transition-delay: 0.8s; }
#main .main-visual .illust01{ opacity: 0; transform: translateX(-50px); }
#main .main-visual.show .illust01{ opacity: 1; transform: translateX(0); transition: opacity 0.5s, transform 0.7s ease; transition-delay: 0.9s; }
#main .main-visual .deco01{ opacity: 0; animation: kira_animation 2s infinite 1s; }
#main .main-visual .deco02{ opacity: 0; animation: kira_animation 2s infinite 2s; }
#main .main-visual .ttl{ opacity: 0; transform: scale(1.2); }
#main .main-visual.show .ttl{ opacity: 1; transform: scale(1); transition: opacity 0.5s, transform 0.7s ease; }
#main .main-visual .copy{ opacity: 0; transform: translate(-10px,50px); }
#main .main-visual.show .copy{ opacity: 1; transform: translate(0,0); transition: opacity 0.5s, transform 0.7s ease; transition-delay: 1s; }


@keyframes kira_animation {
	0%{ opacity: 0; }
	50%{ opacity: 1; }
	100%{ opacity: 0; }
}