/*---------------------------
珈房ベンデドール
946jp.com/vendedor/
--
2025-09-18
---------------------------*/


/*----------------------
topImage
Slide + Fade
----------------------*/
/*.topimage img	{ width: 100%; aspect-ratio: 16/9; max-height: 80vh; object-fit: cover; }*/
.topimage	{ position: relative; background-color: #222; }

.slider-area	{ position: relative; width: 100%; aspect-ratio: 16/5; min-height: 200px; max-height: 400px; overflow: hidden; }
.slider-item	{ position: absolute; opacity: 0; z-index: 0; }
/* Zoom In */
.slider-item	{ inset: 0; }
.slider-item	{ animation: sliderAnime 40s linear infinite 0s; }
.slider-item img { width: 100%; height: 100%; object-fit: cover; }
.slider-item:nth-child(1) { animation-delay:  0s; transform-origin:  0% 50%; }
.slider-item:nth-child(2) { animation-delay: 10s; transform-origin: 50% 50%; }
.slider-item:nth-child(3) { animation-delay: 20s; transform-origin: 50%  0%; }
.slider-item:nth-child(4) { animation-delay: 30s; transform-origin: 50% 50%; }
/*
.slider-item:nth-child(1) { animation-delay:  0s; transform-origin: 0% 20%; }
.slider-item:nth-child(2) { animation-delay: 10s; transform-origin: 100% 40%; }
.slider-item:nth-child(3) { animation-delay: 20s; transform-origin: 0% 60%; }
.slider-item:nth-child(4) { animation-delay: 30s; transform-origin: 100% 80%; }
*/
@keyframes sliderAnime {
	 0%	{ opacity: 0; animation-timing-function: ease-in; }
	 2%	{ opacity: 1; animation-timing-function: ease-out; }
	28%	{ opacity: 1; }
	30%	{ opacity: 0; transform: scale(1.1); }
}
/* Slide Left 
.slider-item	{ bottom: -20px; left: -100px; right: -100px; }
.slider-item	{ animation: sliderAnime 32s linear infinite 0s; }
.slider-item img { width: 150%; object-fit: cover; }
.slider-item:nth-child(1) { animation-delay:  0s; }
.slider-item:nth-child(2) { animation-delay:  8s; }
.slider-item:nth-child(3) { animation-delay: 16s; }
.slider-item:nth-child(4) { animation-delay: 24s; }
@keyframes sliderAnime {
	 0%	{ opacity: 0; animation-timing-function: ease-in; }
	 2%	{ opacity: 1; animation-timing-function: ease-out; }
	28%	{ opacity: 1; }
	30%	{ opacity: 0; transform: translate(-100px, 0); }
}
*/


.top-logo	{ position: absolute; inset: 0; }
.top-logo	{ display: flex; flex-flow: column; justify-content: space-between; align-items: center; }
.top-logo	{
	margin: auto;
	padding: 0;
	width: clamp(100px, 80vw, 430px);
	height: 100%;
	background: url(../images/cm430.gif) no-repeat 50% 50% / contain;
}
.top-logo h1	{ text-indent: -9999px; background: none; border: none; }


.vtop	{ position: relative; }
.vtop:before	{
	content: '';
	position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	height: 250px; aspect-ratio: 1/1;
	background: linear-gradient(to bottom, #92d0fecc, transparent 30%);
	border-radius: 50%;
	z-index: -1;
}
.vtop img	{ width: 100%; max-width: 600px; margin: auto; }

/*----------------------
インフォメーション
--------------------- */
.info_wrap	{ margin: auto; padding: 1.2rem 1.4rem 1.6rem; color: #eee; background-color:#574; border-bottom: .6rem solid #996; }
.info_wrap	{ background-image: url(blackboard.jpg); background-size: cover; border-bottom: .6rem solid #975; }
.info_wrap	{
	a	{ padding: 3px 0; color: inherit; font-weight: bold; border-radius: 3px; transition: .2s; }
	a:hover	{ background-color: #342; }
	hr	{ border: solid 1px #eee9; border-radius: 2px; }
	input	{ max-width: 100%; }
	.info_ttl	{ height: 50px; margin-bottom: 1em; }
	.info_ttl	{ text-indent: -9999px; background: url(./info_ttl.png) no-repeat 0 0 / cover; }
}




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

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

	#top-info .inner	{ border-radius: 1em; }

	#top-bnr li	{ flex: 1 0 40%; }
	#top-bnr .x3 li	{ flex: 1 0 25%; }

}