/*--------------------------
マッキートレ
mackytr.com
2022-11-24
--------------------------*/
/*
section:nth-child(odd)	{ background-color: transparent; }
section:nth-child(even)	{ background-color: #774c94; }
section:nth-child(odd)	{ background-image: url(bg1409028_1280.png); background-attachment: fixed; }
section:nth-child(odd)	{ background-image: url(bg01.png); background-attachment: fixed; }
*/
section:nth-child(odd) { position: relative; }
section:nth-child(odd):before	{ content: ''; position: absolute; width: 100%; height: 100%; background-color: #ffe; z-index: -1; }
section:nth-child(even) { position: relative; }
section:nth-child(even):before	{ content: ''; position: absolute; width: 100%; height: 100%; background-color: #f9f9d4; z-index: -1; }

.grid h3	{ text-align: center; }

.more a { font-size: 1rem; color: #0f3190; background-color: transparent; border: thin solid #0f3190; border-radius: 3em; transition: .2s; }
.more a:hover { background-color: transparent; text-decoration: none; transform: scale(1.1); }


.sectitle	{ display: block; min-height: 0; border: none; background: none; }
.sectitle	{ text-align: center; }
.sectitle	{ padding-bottom: 1rem; border-bottom: 5px solid #6a8; }
.sectitle:before	{ display: block; margin: auto; height: auto; background: none; font-family: forkawesome; font-size: 1.5em; }


/*-----------------------------
	Visual
-----------------------------*/
.top-container	{ height: 100%; background-color: #0139; }
.top-container	{ display: flex; justify-content: center; align-items: center; text-align: center; }
.top-logo	{ display: flex; flex-flow: column; justify-content: space-between; align-items: center; }
.top-logo {
	margin: auto;
	padding: 0;
	height: 100%;
}
.top-logo h1,
.top-logo h2	{ text-indent: -9999px; }
.top-logo h2	{
	width: 70vw;
	max-width: 500px;
	aspect-ratio: 1/1;
	background: url(./logo1x1.png) no-repeat 50% 50% / contain;
	filter: drop-shadow(0px 0px 5px #0039);
}
.top-logo a	{ margin-bottom: -16px; padding: 0 24px; font-size: 48px; line-height: 48px; transition: .2s; }
.top-logo a	{ color: #fff; background-color: #123; border-radius: 1em 1em 0 0; }
.top-logo a:hover	{ transform: scale(1.2); text-decoration: none; }


/*-----------------------------
	Animation
-----------------------------*/
.anim_box	{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.anim_box a	{ display: block; height: 100%; }
.anim_box .anim_obj {
	width: 60vw;
	max-width: 450px;
	aspect-ratio: 1/1;
	background: url(./logo.svg) no-repeat 50% 50% / contain;
/*	background: url(./logo1x1.png) no-repeat 50% 50% / contain;*/
}
.anim_box .doki2x { animation: anime_doki2x 3.0s ease-in-out infinite; }
@keyframes anime_doki2x {
	 0%	{ transform: scale(1.0); transform-origin: center; }
	80%	{ transform: scale(1.0); transform-origin: center; }
	82%	{ transform: scale(1.1); transform-origin: center; }
	88%	{ transform: scale(1.0); transform-origin: center; }
	90%	{ transform: scale(1.1); transform-origin: center; }
	96%	{ transform: scale(1.0); transform-origin: center; }
/*
	 0%	{ transform: scale(1.0); transform-origin: center; }
	80%	{ transform: scale(0.9); transform-origin: center; }
	82%	{ transform: scale(1.1); transform-origin: center; }
	88%	{ transform: scale(0.9); transform-origin: center; }
	90%	{ transform: scale(1.1); transform-origin: center; }
	96%	{ transform: scale(1.0); transform-origin: center; }
*/
/*
	 0%	{ transform: scale(1.0); transform-origin: center; }
	10%	{ transform: scale(1.2); transform-origin: center; }
	30%	{ transform: scale(1.0); transform-origin: center; }
	40%	{ transform: scale(1.1); transform-origin: center; }
	60%	{ transform: scale(1.0); transform-origin: center; }
*/
}


/*-----------------------------
	Header
-----------------------------
.header	{ display: none; }
*/

/*-----------------------------
	.header.fixed 調整
-----------------------------*/
#intro		{ margin-top: -100px; padding-top: 100px; }
#information{ margin-top: -100px; padding-top: 100px; }
#concept	{ margin-top: -100px; padding-top: 100px; }
#feature	{ margin-top: -100px; padding-top: 100px; }
#price		{ margin-top: -100px; padding-top: 100px; }
#store		{ margin-top: -100px; padding-top: 100px; }
#access		{ margin-top: -100px; padding-top: 100px; }

#information:before	{ height: calc(100% - 100px); }
#store:before	{ height: calc(100% - 100px); }

/*-----------------------------
	Intro
-----------------------------*/
#intro	{ position: relative; }
/*#intro	{ background-image: none; background-color: #123; }*/
/*#intro:before	{ position: absolute; top: 0; width: 100%; height: 100%; content: ''; background-color: #0004; z-index: -1; }*/
#intro .inner	{ max-width: none; padding: 1em; }
#intro .inner	{ background: linear-gradient(#ec5c2d, #ffa500); }
/*#intro .inner	{ background-image: url(gradient-768x768.jpg); background-size: 100% 100%; }*/
#intro .inner	{ color: #fff; text-align: center; }
#intro h3	{ padding-bottom: .5rem; color: #fff; border-bottom: 3px dotted #fff3; }
/*#intro h4	{ font-weight: normal; font-family: 游明朝, YuMincho, serif; letter-spacing: 0; }*/
#intro h3+h4	{ margin-top: 1rem; }


/*-----------------------------
	Information
-----------------------------*/
#information p+p	{ margin-top: .5em; padding-top: 1em; border-top: thin dotted #9769 }
#information .date	{ display: inline-block; margin-right: 1em; }
#information .msg	{ display: inline-block; }
#information .sns	{ margin-top: 2em; }

/*-----------------------------
	Concept
-----------------------------*/
#concept .fig	{ margin: 2rem auto; max-width: 728px; }
#concept .msg	{ margin: 2rem auto; max-width: 880px; }

/*-----------------------------
	feature
-----------------------------*/
#feature .grid > *	{ margin-top: 4em; }
#feature .icn_m	{ margin-top: -4em; }
#feature p	{ margin-bottom: 0; }

/*-----------------------------
	Price
-----------------------------*/
#price .grid > *	{ background: linear-gradient(#fff 71%, #f8f0fc 71%); }
#price p	{ margin: .5rem auto 0; }
#price .term	{}
#price .ticket	{ display: inline-block; padding: 0 1em; font-weight: bold; color: #fff; background-color: #13b2ac; border-radius: .5em; }
#price .price	{ font-size: 150%; }
#price .price strong	{ font-size: 120%; color: #000; }
#price .compr	{ font-size: 100%; }
#price .compr i	{ font-style: normal; background: linear-gradient(transparent 60%, #ff6 60%); }
#price .limit	{ display: inline-block; padding: 0 1em; font-size: 90%; color: #fff; background-color: #0f64a6; border-radius: .5em; }


/*-----------------------------
	Facebook
-----------------------------*/
/*#top-fb	{ display: flex; flex-flow: column; justify-content: center; }*/
#top-fb	{ text-align: center; }
#top-fb	{ min-height: 20vh; background: url(bg1.jpg) no-repeat 50% 50% / cover; background-attachment: fixed; }
#top-fb	{ background-image: url(../images/sample/sample1.jpg); }
#top-fb	{ position: relative; }
#top-fb:before	{
	position: absolute; left: 0; width: 100%; height: 100%;
	background-color: #3332;
	-webkit-backdrop-filter: saturate(100%) blur(2px);
	backdrop-filter: saturate(100%) blur(2px);
	content: '';
}

/*-----------------------------
	Photo Gallery
-----------------------------*/
#top-gallery	{ background-color: #a9c0b2; }
#top-gallery .inner { padding: 1em 0; max-width: none; }
#top-gallery img { display: block; }


/*-----------------------------
	Banner
-----------------------------*/
#top-bnr	{ background-color: #7dc2b7; }
#top-bnr .inner > *+*	{ margin-top: 1em; }
#top-bnr ul	{ margin: 0; padding: 0; list-style-type: none; }
#top-bnr ul	{ display: flex; flex-wrap: wrap; gap: 1em; }
#top-bnr li	{ flex: 1 0 auto; max-width: 100%; }
#top-bnr li	{ background-color: #fff; box-shadow: 0 0 15px 3px rgb(0 32 64 / 20%); }
#top-bnr li	{ display: flex; flex-direction: column; justify-content: center; text-align: center; }
#top-bnr a	{ display: block; padding: 1em; transition: .2s; }
#top-bnr a:hover	{ opacity: .8; }
#top-bnr a:after	{ display: none; }
#top-bnr img { display: block; margin: auto; }


/*----------------------
	Googlemap
----------------------*/
.googlemap iframe	{ max-width: none; max-height: 500px; }


/* for SmartPhone Landscape (横) */
@media screen and (min-width:480px) { 
}



@media screen and (min-width:768px) { /* and ( max-width:1024px) { */

	.top-logo a	{ margin-bottom: -20px; padding: 0 32px; font-size: 64px; line-height: 64px; }

	#feature .grid > * { padding: 2rem; }

/*	#intro h4	{ font-size: 2em; }*/
	#top-bnr li	{ flex: 1 0 40%; }
	#top-bnr .x3 li	{ flex: 1 0 25%; }

}