@charset "UTF-8";

/*----------------------------------------
	- base
-----------------------------------------*/

/*=======================================
	base
=======================================*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
img,
figure,
picture {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
ul,
li {
	list-style: none;
}
a {
	text-decoration: none;
	opacity: 1;
	transition: all 0.3s ease;
}
@media (hover: hover) {
	a:hover {
		opacity: 0.8;
	}
}
.sp {
	display: none;
}
@media screen and (max-width: 768px) {
	.pc {
		display: none;
	}
	.sp {
		display: inline-block;
	}
}

/*=======================================
	PC時のコンテンツ外背景
=======================================*/
.whole_wrap {
	background: url(../images/common/page_bg.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	position: relative;
}

.whole_wrap .bg_title {
	content: '';
	position: absolute;
	width: 25vw;
	top: 50%;
	left: 4.4vw;
	transform: translateY(-50%);
}
@media screen and (max-width: 1300px) {
	.whole_wrap .bg_title {
		width: 20vw;
	}
}
@media screen and (orientation:portrait) and (max-width: 768px) {
	.whole_wrap .bg_title {
		display: none;
	}
	.whole_wrap {
		background: #ffea00;
		background-image: none;
	}
}


/*=======================================
	帯
=======================================*/
.neo_ticker {
	background-color: #fff;
	content: '';
	position: absolute;
	display: flex;
	align-items: center;
	gap: 5px;
	overflow: hidden;
	white-space:nowrap;
}
.neo_ticker ul,
.neo_ticker li {
	display: inline-block;
}
.neo_ticker ul li img {
	object-fit: cover;
}

.neo_ticker.st_top {
	top: 0px;
	left: 0px;
	background-size: auto 18px;
	height: 18px;
	width: calc(100% - 18px);
}	
.neo_ticker.st_top::before {
	content: '';
	position: absolute;
	bottom: 0px;
	left: 18px;
	width: calc(100% - 18px);
	height: 1px;
	background-color: #231815;
	z-index: 10;
}    
.neo_ticker.st_top ul {
	height: 18px;
	margin:0;
	padding: 4px 0;
	animation:hscroll 10s linear infinite;
}
.neo_ticker.st_top ul li {
	height: 10px;
}
.neo_ticker.st_top ul li img {
	width: auto;
	max-width: auto;
	height: 100%;
}
@keyframes hscroll {
	0% { transform:translateX(0); }
	100% { transform:translateX(-100%); }
}

.neo_ticker.st_left {
	writing-mode: vertical-rl;
	top: 0px;
	right: 0px;
	background-size: 18px auto;
	width: 18px;
	height: calc(100% - 18px);
}
.neo_ticker.st_left::before {
	content: '';
	position: absolute;
	top: 18px;
	left: 0;
	width: 1px;
	height: 100%;
	background-color: #231815;
	z-index: 10;
}            
.neo_ticker.st_left ul {
	transform: rotate(90deg);
	animation:hscroll2 14s linear infinite;
	width: 18px;
	height: auto;
	padding: 0 4px;
}
.neo_ticker.st_left ul li {
	width: 	10px;
	height: auto;
}
.neo_ticker.st_left ul li img {
	width: 100%;
	height: auto;
}

@keyframes hscroll2 {
	0% { transform:translateY(0); }
	100% { transform:translateY(-100%); }
}

.neo_ticker.st_btm {
	bottom: 0px;
	right: 0px;
	height: 18px;
	width: calc(100% - 18px);
}
.neo_ticker.st_btm::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 18px);
	height: 1px;
	background-color: #231815;
}
.neo_ticker.st_btm ul {
	height: 18px;
	margin:0;
	padding: 4px 0;
	animation:hscroll3 10s linear infinite;
}
.neo_ticker.st_btm ul li {
	height: 10px;
}
.neo_ticker.st_btm ul li img {
	width: auto;
	max-width: auto;
	height: 100%;
}
@keyframes hscroll3 {
	0% { transform:translateX(-100%); }
	100% { transform:translateX(0); }
}

.neo_ticker.st_right {
	writing-mode: vertical-rl;
	top: 18px;
	background-size: 18px auto;
	left: 0px;
	width: 18px;
	height: calc(100% - 18px);
}
.neo_ticker.st_right::before {
	content: '';
	position: absolute;
	top: 0px;
	right: 0px;
	background-color: #231815;
	width: 1px;
	height: calc(100% - 18px);
	z-index: 10;
}
.neo_ticker.st_right ul {
	transform: rotate(-90deg);
	animation:hscroll4 14s linear infinite;
	width: 18px;
	height: auto;
	padding: 0 4px;
}
.neo_ticker.st_right ul li {
	width: 	10px;
	height: auto;
}
.neo_ticker.st_right ul li img {
	width: 100%;
	height: auto;
}
@keyframes hscroll4 {
	0% { transform:translateY(-100%); }
	100% { transform:translateY(0); }
}

@media screen and (orientation:portrait) and (max-width: 768px) {
	.neo_ticker.st_left,
	.neo_ticker.st_right {
		display: none;
	}
	.neo_ticker.st_top,
	.neo_ticker.st_bottom {
		width: 100%;
	}
	.neo_ticker.st_top::before {
		width: 100%;
		left: 0;
	}
	.neo_ticker.st_btm {
		width: 100%;
	}
	.neo_ticker.st_btm::before {
		width: 100%;
		left: 0;
	}
}


/*=======================================
	各ページ　リンクボタン
=======================================*/
#main .fsvs-body .content .link_btn {
	content: '';
	position: absolute;
	z-index: 30;
	width: 46cqw;
	bottom: 10cqw;
	left: 50%;
	transform: translateX(-50%);
}
.btn_anime {
	animation: dokundokun 1500ms ease infinite;
}
@keyframes dokundokun {
  0%  { transform: translateX(-50%) scale(1); }
  15% { transform: translateX(-50%) scale(1.08); }
  30% { transform: translateX(-50%) scale(1); }
  45% { transform: translateX(-50%) scale(1.08); }
  70% { transform: translateX(-50%) scale(1); }
}
#main .fsvs-body .content .link_btn span {
	position: relative;
	overflow: hidden;
	height: 100%;
	display: block;
}

#main .fsvs-body .content .link_btn a:hover {
	opacity: 1;
}
#main .fsvs-body .content .link_btn.active a span::after {
	position: absolute;
  top: 50%;
  left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 220px;
  content: "";
  background: #fff;
  border-radius: 100%;
  opacity: 0;
  animation: ripple 0.5s 1 ease-out;
}
@keyframes ripple {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%)scale(0.0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%)scale(1.0);
  }
}

/*=======================================
	コンテンツ部分
=======================================*/
#main {
	/*width: 30.6vw;*/
	width: 454px;
	/*height: 92.5vh;*/
	height: 744px;
	content: '';
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	border: 1px solid #231815;
}

#main .fsvs-body {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 36px);
	height: calc(100% - 36px);
	background: #ffea00;
	filter:blur(0);
	background-clip: content-box;
}
#main .fsvs-body::-webkit-scrollbar {
	display: none;
}

#main .fsvs-body .slide {
	scroll-snap-align: start;
}

@media screen and (max-width: 1300px) {
	#main {
		width: 45.4vw;
		height: 74.4vw;
	}
}
/* ポートレイト */
@media screen and (orientation:portrait) and (max-width: 768px) { 
	#main {
		width: 100vw;
		height: 100vh;
		height: 100dvh;
	}
	#main .fsvs-body {
		width: 60%;
		height: 106.8vw;
	}
}
@media screen and (orientation:portrait) and (max-width: 520px) {
	#main .fsvs-body {
		/*
		width: 80vw;
		height: 142.4vw;
		*/
		width: 90vw;
		height: 160.2vw;
	}

}


/* number */
#main .num {
	content: '';
	position: absolute;
	width: auto;
	height: 40px;
	bottom: 36px;
	left: 15px;
}
/* 17 */
#main .total_num {
	content: '';
	position: absolute;
	width: auto;
	height: 40px;
	bottom: 36px;
	right: 15px;
}
#main .num img,
#main .total_num img {
	width: auto;
	max-width: initial;
	height: 100%;
}


@media screen and (max-width: 1300px) {
	#main .num {
		height: 3vw;
		bottom: 3.733vw;
	}
	#main .total_num {
		height: 3vw;
		bottom: 3.733vw;
	}
}

@media screen and (orientation:portrait) and (max-width: 768px) {
	#main .num {
		height: 5.2vw;
		bottom: 3.733vw;
		left: 5vw;
	}
	#main .total_num {
		height: 5.2vw;
		bottom: 3.733vw;
		right: 5vw;
	}
}
@media screen and (orientation:portrait) and (max-width: 520px) {
	#main .num {
		height: 7.7vw;
		bottom: 3.9vw;
		left: 3.5vw;
	}
	#main .total_num {
		height: 7.7vw;
		bottom: 3.9vw;
		right: 3.5vw;
	}
}