@charset "UTF-8";
/* このCSSは[php/set_03_style/style_05_mainview.php]により生成されます。 */

#mainview_wrap #mainview_slider{z-index:1}
#mainview_slider:not(.slick-initialized) > .slide_item:not(:first-child){
	display:none;
}
#mainview_slider:not(.slick-initialized) > .slide_item:first-child{
	display:block;
}
#mainview_wrap .slide_caption_wrap{
	z-index:2;
	top:0;
	right:0;
	bottom:0;
	left:0;
	pointer-events:none;
}
#mainview_wrap .slide_caption_inner{padding:36px 40px;}
#mainview_wrap .slide_caption_inner *{pointer-events: auto}
#mainview_slider .slide_item{padding:0}
#mainview_slider .slide_img_wrap::after{
	content:"";
	display:block;
	position:absolute;
	z-index:1;
	inset:0;
	pointer-events:none;
	background:rgba(255,255,255,0.16);
}
#mainview_slider .slick-prev,
#mainview_slider .slick-next {
	position: absolute;
	z-index: 5;
	border: none;
	width: 16px;
	height: 16px;
	top:50%;
	transform: translateY(-50%);
	border-radius:50%;
	background: rgba(0,151,221,0.4);
	color:#ffffff;
	cursor: pointer;
	transition: background 0.4s;
}
#mainview_slider .slick-prev {left:8px}
#mainview_slider .slick-next {right:8px}
#mainview_slider .svg_icon {font-size:6px}
#mainview_dots{
	width:100%;
	position: absolute;
	left: 0;
	bottom: 8px;
	z-index:5;
	pointer-events:none;
}
#mainview_dots .slick-dots{
	display: flex !important;
	justify-content:center;
	gap: 8px;
	margin:1em 0;
	padding:0;
	list-style:none;
}
#mainview_dots .slick-dots button {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width: 20px;
	height: 20px;
	padding:0;
	border:none;
	background:none;
	font-size:0;
	cursor: pointer;
	pointer-events:auto
}
#mainview_dots .slick-dots button::after{
	content:"";
	display:block;
	transition:all .4s ease-out;
	border:1px solid #fff;
	width:100%;	height:100%;	flex: 0 0 100%;
	border-radius:10px;
	background: #eee;
}
#mainview_dots .slick-dots li.slick-active button::after{
	background: #009fe8;
}
#mainview_bubbles{
	position:absolute;
	inset:0;
	z-index:2;
	overflow:hidden;
	pointer-events:none;
}
#mainview_bubbles span{
	--size:30px;
	--left:50%;
	--duration:14s;
	--delay:0s;
	--shift:20px;
	position:absolute;
	left:var(--left);
	bottom:calc(var(--size) * -2);
	width:var(--size);
	height:var(--size);
	border:1px solid rgba(255,255,255,.65);
	border-radius:50%;
	background:
		radial-gradient(circle at 30% 25%,
			rgba(255,255,255,.75) 0,
			rgba(255,255,255,.2) 12%,
			rgba(255,255,255,.08) 35%,
			rgba(255,255,255,.02) 65%,
			transparent 70%
		);
	box-shadow:
		inset -3px -3px 8px rgba(255,255,255,.15),
		inset 3px 3px 8px rgba(255,255,255,.3),
		0 0 8px rgba(255,255,255,.15);
	opacity:0;
	animation:mainview_bubble var(--duration) linear var(--delay) infinite;
}
#mainview_bubbles span:nth-child(1){
	--size:36px;
	--left:5%;
	--duration:13s;
	--delay:-3s;
	--shift:30px;
}
#mainview_bubbles span:nth-child(2){
	--size:64px;
	--left:14%;
	--duration:17s;
	--delay:-10s;
	--shift:-25px;
}
#mainview_bubbles span:nth-child(3){
	--size:28px;
	--left:27%;
	--duration:11s;
	--delay:-5s;
	--shift:18px;
}
#mainview_bubbles span:nth-child(4){
	--size:86px;
	--left:39%;
	--duration:19s;
	--delay:-14s;
	--shift:-35px;
}
#mainview_bubbles span:nth-child(5){
	--size:48px;
	--left:51%;
	--duration:14s;
	--delay:-8s;
	--shift:25px;
}
#mainview_bubbles span:nth-child(6){
	--size:32px;
	--left:61%;
	--duration:12s;
	--delay:-2s;
	--shift:-15px;
}
#mainview_bubbles span:nth-child(7){
	--size:72px;
	--left:70%;
	--duration:18s;
	--delay:-12s;
	--shift:35px;
}
#mainview_bubbles span:nth-child(8){
	--size:42px;
	--left:80%;
	--duration:15s;
	--delay:-7s;
	--shift:-25px;
}
#mainview_bubbles span:nth-child(9){
	--size:96px;
	--left:89%;
	--duration:21s;
	--delay:-16s;
	--shift:30px;
}
#mainview_bubbles span:nth-child(10){
	--size:24px;
	--left:95%;
	--duration:10s;
	--delay:-4s;
	--shift:-12px;
}
@keyframes mainview_bubble{
	0%{
		transform:translate3d(0,0,0) scale(.8);
		opacity:0;
	}
	10%{
		opacity:.45;
	}
	50%{
		transform:translate3d(var(--shift),-55vh,0) scale(1);
		opacity:.55;
	}
	90%{
		opacity:.3;
	}
	100%{
		transform:translate3d(calc(var(--shift) * -.5),-115vh,0) scale(1.08);
		opacity:0;
	}
}

@media all and (min-width:768px){


}

@media all and (min-width:1024px){

	#mainview_wrap .slide_caption_inner{padding:28px 56px;}
	#mainview_slider .slick-prev,
	#mainview_slider .slick-next {
		width: 32px;
		height: 32px;
	}
	#mainview_slider .svg_icon {font-size:13px}
	#mainview_dots .slick-dots button {
		width: 12px;
		height: 12px;
	}
	#mainview_dots .slick-dots button::after{
		border-radius:6px;
	}


	.scroll_down{
		bottom:72px;
		right:32px;
		animation: arrowmove 1s ease-in-out infinite;
		z-index:2;
		filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
	}
	.scroll_down a{
		left: -24px;
		bottom: 30px;
		color: #fff;
		font-size: 14px;
		letter-spacing: .2em;
		text-transform: uppercase;
		width: 24px;
		height: 24px;
		text-decoration: none;
	}
	.text {
		margin-top: 74px;
		margin-left: -14px;
		font-size: 12px;
		color: #fff;
		text-transform: uppercase;
		white-space: nowrap;
		letter-spacing: 2px;
		text-shadow:
			0 1px 3px rgba(0,0,0,.3),
			0 0 6px rgba(255,255,255,.15);
	}

	.arrow {
		width: 28px;
		height: 5px;
		opacity: 0;
		transform: scale3d(0.5, 0.5, 0.5);
		animation: move 3s ease-out infinite;
		filter:
			drop-shadow(0 1px 2px rgba(0,0,0,.2))
			drop-shadow(0 0 4px rgba(255,255,255,.3));
	}

	.arrow:first-child {
		animation: move 3s ease-out 1s infinite;
	}

	.arrow:nth-child(2) {
		animation: move 3s ease-out 2s infinite;
	}

.arrow:before,
.arrow:after {
  content: " ";
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
}

.arrow:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.arrow:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% { opacity: 1; }
  33% { opacity: 1; transform: translateY(30px); }
  67% { opacity: 1; transform: translateY(40px); }
  100% { opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5); }
}

}

@media all and (min-width:1280px){

	#mainview_slider .slide_img_wrap{height:100svh;}

}

@media all and (min-width:1440px){

	#mainview_slider .slick-prev,
	#mainview_slider .slick-next {
		width:32px;
		height:32px;
	}
	#mainview_slider .svg_icon{font-size:13px}

}

@media (hover: hover) and (pointer: fine) {

	#mainview_slider .slick-prev:hover,
	#mainview_slider .slick-next:hover {
		background: rgba(0,116,211,0.6);
	}
	#mainview_dots .slick-dots li:hover button::after{
		background: #009fe8;
	}

}