@charset "UTF-8";
/********************************

　advance1st 50th Anniversary Page.style
	
	*mainImageArea
	
	*50th Anniversary articleArea 

********************************/
.pc_an {
	display: block;
}
.sp_an {
  display: none;
}
/*=================================

	 TOP page 

=================================*/
#anniversary {
  margin-top: 650px;
  padding-bottom: 0;
  animation-name: fadeArticre;
  animation-delay: 0.7s;
  animation-duration: 2s;
}

 .anv_flex {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2em;
 }
.anv_wrap {
  max-width: 1000px;
  margin: 0 auto;
}
#anniversary .anv_ttl {
  font-size: 235%;
  letter-spacing: 3px;
  margin: 0 25px;
}
article#anniversary p {
  margin: 7px 25px;
  font-size: 80%;
  line-height: 2.0;
  letter-spacing: 2.3px;
}

/* ===== btn ===== */
.more_ad {
	margin: 0.6em 0;
}

.spec_btn {
	color: #FFF;
	position: relative;
	background: #82d2d2;
	padding: 0.6em 2.7em 0.6em 2.1em;
	border-radius: 2.5em;
	display: inline-block;
	font-size: 90%;
	transition: all 0.3s;
	letter-spacing: 0.1em;
	transform: rotate(0.03deg);
	margin: 0.3em 25px;
}
.spec_btn::after {
	display: block;
	width: 0.6em;
	height: 100%;
	content: '';
	background: url(../img/50th/arrow_white.webp) no-repeat center;
	background-size: contain;
	position: absolute;
	top: 0;
	right: 1.3em;
	transition: all 0.3s;
}
a:hover .spec_btn::after {
	right: 1.1em;
	background-size: contain;
}
#wrapper a:hover {
	text-decoration: none;
	opacity: 0.7;
}

#wrapper .scroll_wrap .jump_page span{
	width: 80px;
	height: 122px;
	background-image: url(../img/50th/jump_btn.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: all 0.3s;
	position: relative;
	/* right: 0; */
	float: right;
}
#wrapper .scroll_wrap .jump_page {
	display: none;
	position: fixed;
	top: 32em;
	right: 0;
	z-index: 1;
}
#wrapper .scroll_wrap .jump_page span img {
	position: absolute;
	top: -2em;
	right: 44%;
}
.target {
  animation: floating-y 1s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}

@media (hover: hover) {
	#wrapper .jump_page:hover span{opacity:0.7;}
}

@media screen and (max-width: 1100px) {
/* SP */
body #wrapper .jump_page{
	position: fixed;
	bottom: 5vw;
	right: 0;
	}

}



	.scrollin {
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity .5s, transform .8s;
}
.scrollin.active {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .0s;
}
#wrapper .load_ta{	animation: fade_ta 1.0s ease 0s forwards;}
.load_ta #wrapper {
	animation: fade_ta 1.0s ease 0s forwards;
 }

.anv_tex_wrap .anniversary_link {
	text-align: right;
}
#anniversary .anv_tex_wrap .anniversary_link a p {
	color: rgb(95, 200, 246);
	text-decoration: underline;
	margin: 0 25px;
}
#anniversary .anv_tex_wrap .anniversary_link p  {
	margin: 7px 25px 0;
	font-weight: bold;
}
.anv_tex_wrap .anniversary_link a {
	transition: all 0.3;
}
.anv_tex_wrap .anniversary_link a:hover {
opacity: 0.7;
}
/*=================================

	SP 調整 トップページ

=================================*/

 @media screen and (max-width: 1030px) {
	#anniversary {
    margin-top: 53vw;
		padding: 0% ;
}
	.anv_flex {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 90%;
		margin: 0 auto;
		gap: 1em;
	}
.anv_flex img {
	width: 30vw;
	margin: -1em auto 0px
}
.anv_tex_wrap {
	font-size: 3.7vw;
}
#anniversary .anv_ttl {
	letter-spacing: 3px;
	margin: 0 0px;
	line-height: 1.5em;
	font-size: 5.5vw;
	text-align: center;
}
article#anniversary p {
	margin: 1em auto 2em;
	line-height: 2.0;
	letter-spacing: 2.3px;
	text-align: center;
}
.anv_tex_wrap .anniversary_link {
	text-align: center;
}
.spec_btn {
	font-size: 3vw;
}
#wrapper .scroll_wrap .jump_page span {
	display: block;
	width: 47px;
	height: 77px;
	background-image: url(../img/50th/jump_btn.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: all 0.3s;
	float: right;
}
#wrapper .scroll_wrap .jump_page {
	display: block;
	position: fixed;
	top: 60vw;
	right: 0;
}

 }


/************************************************************************

=======================================

	 50th Anniversary page 

=======================================*/
.mainImage_anv {
	position: fixed;
	top: 0;
	width: 100%;
	height: 1000px;
 }
 #ttlarea_id {
	max-width: inherit;

 }

.ttl_inner {
	width: 100%;
    margin: 0 auto;
    position: relative;
}
.ttl_inner img {
	width: 100%;
	height: 53vw;
}
.fade_top {
  animation-fill-mode: both;
  animation-duration: 2s;
  animation-name: fade_top;
  visibility: visible!important;
  opacity: 1;
  animation-delay: 0.5s;
}
@keyframes fade_top {
0% {
  opacity: 0;
}
50% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}
.ttl_a {
	width: 27%;
	position: absolute;
	top: -45.2vw;
	left: 35%;
	animation-name: fadeUpAnime;
	animation-delay: 2.5s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}
	@keyframes fadeUpAnime{
		from {
			opacity: 0;
		transform: translateY(15px);
		}
	
		to {
			opacity: 1;
		transform: translateY(0);
		}
	}



/* スクロールダウンの位置 */
.scroll {
position: absolute;
    right: 3%;
    top: 53%;
    writing-mode: vertical-rl;
		color: #fff;
		font-family: "Montserrat", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
				letter-spacing: 3px;
		font-size: 18px;
		}
/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2.5s infinite;
  background-color: #fff;
  bottom: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1.5px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}




/* リード */
#lead {
	margin-top: 56vw;
}
.lead_wrap {
	font-size: 200%;
	margin: 0 auto;
	max-width: 1050px;
}
.lead_ttl.fadeArticre .char-animate span {
	animation: fadeUp 1s ease forwards;
 }
 @keyframes fadeUp {
	to {
		opacity: 1;
		transform: translateY(-10px);
	}
 }
 
.lead_wrap .lead_ttl {
	text-align: center;
font-size: 200%;
margin-bottom: 0.5em;
font-family: "秀英丸ゴシック L"; 
}
.lead_wrap .lead_ttl p {
	letter-spacing: 6px;
	line-height: 1.6em;
	margin: 0 auto;
}
.text_box {
text-align: center;
}
.lead_wrap .lead_text {
	text-align: center;
	font-size: 80%;
	color: #3e3a39;
	display: inline-block;
	font-family: "秀英丸ゴシック L"; 
}
.lead_wrap .lead_text p {
margin: 0 auto 0.6em;
letter-spacing: 3.6px;
line-height: 3em;
}
.lead_wrap .lead_text p span.line {
	letter-spacing: -0.5px;
	padding-right: 0.3em;
	padding-left: 0.1em;
}

.lead_wrap .lead_ttl .char-animate {
	visibility: hidden;
 }
 .lead_wrap .lead_ttl .char-animate span {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.5em);
 }


 /* ループ 設定 */
@keyframes infinity-scroll-left {
	from {
		transform: translateX(0);
	}
		to {
		transform: translateX(-100%);
	}
	}
	.scroll-infinity__wrap {
		display: flex;
		overflow: hidden;
	}
	.scroll-infinity__list {
		display: flex;
		list-style: none;
		padding: 0;
		gap: 1em;
	}
	.scroll-infinity__list--left {
		animation: infinity-scroll-left 140s infinite linear 0.5s both;
	}
	.scroll-infinity__item {
		width: calc(100vw / 1.3);
	}
	.scroll-infinity__item>img {
		width: 100%;
	}
	

/*=================================

キャラクター紹介

=================================*/
#character {
	text-align: center;
	max-width: 1300px;
	margin: 3em auto;
	padding: 0;
}
.chara_img_flex {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 0em;
margin: 0 auto;
padding-top: 3em;
}
.character_ttl_wrap {
	text-align: center;
	font-size: 200%;
	font-family: "秀英丸ゴシック L"; 
}
.character_ttl_wrap .chara_ttl_min {
	font-size: 130%;
}
.character_ttl_wrap .chara_ttl_big {
	font-size: 160%;
	margin: 0 auto;
}
.character_ttl_wrap p {
	margin: 0;
}
.chara_img_wrap {
	background-image: url(../img/50th/chara_bk.jpg);
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
	margin: 3em auto 8em;
	max-width: 910px;
}
.chara01 {
	width: 55%;
}

.chara02_wrap, .chara03_wrap{
	width: 170px;
	height: 200px;
	position: relative;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: contain;
  background-position: center center;
  
  animation: image-switch-animation 12s infinite;
}

.chara02 {
  background-image: url(../img/50th/chara02.webp);
}
.chara04 {
  background-image: url(../img/50th/chara04.webp);
}
.chara06 {
  background-image: url(../img/50th/chara06.webp);
}
.chara03 {
  background-image: url(../img/50th/chara03.webp);
}
.chara05 {
  background-image: url(../img/50th/chara05.webp);
}
.chara07 {
  background-image: url(../img/50th/chara07.webp);
}

.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 4s;
}
.image:nth-of-type(3) {
  animation-delay: 8s;
}

@keyframes image-switch-animation {
  0%{ opacity: 0;}
  10%{ opacity: 1;}
  35%{ opacity: 1;}
  40%{ opacity: 0;}
  100%{ opacity: 0;}
}

/* gif_wrap */
.chara01_gif_wrap {
	position: relative;
	width: 40%;
}
 
.comm_adwan {
	position: absolute;
	width: 48%;
	top: -15%;
	right: -7%;
}
.chara01_gif {
	width: 90%;
}
.chara_img_wrap.fadeArticre .chara01_gif_wrap {
  /* animation: poyoyon2 1s ease-in-out forwards 1s; */
  /* 初期状態は透明で小さく */
  opacity: 0;
  transform: scale(1) translateY(5px);
  /* アニメーション設定 */
  animation: image-poyon 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s
    forwards;
}
 
@keyframes image-poyon {
  0% {
    opacity: 0;
    transform: scale(1) translateY(5px);
  }
  60% {
    opacity: 1;
    transform: scale(1.07) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
/* @keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
} */

/* アニメーション */
.fade-item {
  opacity: 0
}
.fade-item.anime-active {
  opacity: 0
}
.fade-item.anime-active {
	animation: fadeIn_anv 0.6s cubic-bezier(0.475, 0.885, 0.320, 1.575) both 0.1s;
 }
 
 
/*=================================

グッズ紹介

=================================*/
#goods {
	background-color: #eeeeef;
	padding: 50px 5%;
	margin: 0 auto 0em;
	position: relative;
}
.goods_ttl {
	position: absolute;
	top: -5%;
	left: 10%;
}
.goods_wrap {
	max-width: 1080px;
	margin: 3em auto;
	position: relative;
	width: 100%;
}
.goods_wrap p {
	font-size: 110%;
	font-family: "秀英丸ゴシック L"; 
}

.goods_flex {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 1170px;
	margin: 0 auto;
	gap: 4em;
}
.goods_flex p {
	text-align: center;
	font-size: 100%;
}
.goods_flex .goods_box .goods01 img.goods_01 {
	/* width: 100%; */
}
.goods01, .goods02 {
	position: relative;
	/* width: 490px;
	height: 350px; */
}
.goods_ashirai01 {
	position: absolute;
	bottom: 7%;
	left: -16%;
	z-index: -1;
}
.loaded.goods_ashirai02 {

}
.goods_ashirai02 {
	position: absolute;
	top: -28%;
	right: 8%;
	z-index: -1;
}


.show .goods_ashirai01 {
  animation-duration: 2s;
		/* animation: faderight 4.5s cubic-bezier(0.68, -0.6, 0.32, 1.4) infinite; */
		animation: faderight 8.5s  infinite;

}

.show .goods_ashirai02 {
  animation-duration: 2s;
	animation: fadeIn_anv 4.5s infinite;
}

@keyframes appear {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


@keyframes fadeIn_anv {
	0%,80% {
	 opacity: 1;
	 transform: translateY(10px);
	}
	90% {
		opacity: 1;
		transform: translateY(0);
	} 
	100% {
	 opacity: 1;
	 transform: translateY(10px);
	}
 }
@keyframes faderight {
	0%,40% {
	 opacity: 1;
	 transform: translateX(50px);
	}
	50%,85% {
		opacity: 1;
		transform: translateX(0); 
	}
	100% {
	 opacity: 1;
	 transform: translateX(50px);
	}
 }
 .fade_ad {
	opacity: 0;
}
.fade_ad.on {
	animation: fadeIn_anv 0.5s forwards 0s;
}



/*=================================

SP調整

=================================*/
@media screen and (max-width: 1030px) {
.sp_an {
	display: block;
}
.pc_an {
	display: none;
}
img {
	width:inherit;
	height: auto;
}
.ttl_inner {
height: 140vw;
}
.ttl_inner img {
	width: 100%;
	height: auto;
}
#lead {
	margin-top: 147vw;
	padding-top: 1em;

}

.ttl_a {
	width: 70%;
	position: absolute;
	top: -112vw;
	left: 25%;
}
.scroll {
	right: 6%;
	top: 54%;
	letter-spacing: 3px;
	font-size: 3.8vw;
}

/* lead */
.lead_wrap {
	font-size: 4.4vw;
	width: 95%;
}
.lead_wrap .lead_ttl {
	margin-bottom: 0.3em;
	font-family: "秀英丸ゴシック B";
}

.lead_wrap .lead_ttl p {
	font-size: 6vw;
	letter-spacing: 3px;
	margin: 0em auto;
}
.lead_wrap .lead_text p {
	font-size: 3vw;
	letter-spacing: 1.7px;
	line-height: 2.4em;
}


.scroll-infinity__item {
	width: calc(180vw / 1.3);
}
/* キャラクター */
.character_ttl_wrap {
	text-align: center;
	font-size: 5.7vw;
	font-family: "秀英丸ゴシック L";
}
#character {
	margin: 0em auto;
}
.character_ttl_wrap .chara_ttl_big p {
	line-height: 1.3em;
	letter-spacing: 1.3px;
}
.chara_img_wrap {
	background-image: url(../img/50th/chara_bk.jpg);
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
	margin: 3em auto 5em;
	width: 80%;
}
.chara_img_flex {
	gap: 0em;
	margin: 11vw auto;
}
.chara01 {
}
.chara02_wrap, .chara03_wrap {
	width: 50%;
	height: 24vw;
}
.chara01_gif_wrap {
	position: relative;
	width: 100%;
}
.chara_img_wrap02 .chara01_gif {
width: 100%;
}
/* グッズ */
#goods {
	margin-bottom: 0em;
	padding: 0 4% 3em;
}
.goods_ttl {
	position: absolute;
	top: -5vw;
	left: 10vw;
	width: 50%;
}
.goods_flex {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 4vw auto;
	gap: 14vw;
	flex-direction: column;
	padding: 0;
	width: 100%;
	margin: 1em auto;
	text-align: center;
}
.goods_wrap p.goods_sub_text {
	font-size: 3.8vw;
	font-family: "秀英丸ゴシック L";
	padding: 13vw 0 0;
	text-align: center;
	letter-spacing: 2px;
	margin: 0 auto;
}
.goods_flex .goods_box p {
	text-align: center;
	font-size: 3.8vw;
	margin: 0.4em auto;
	letter-spacing: 1.3px;
	padding: 0vw 0 0;
}
.goods01, .goods02 {
	position: relative;
	width: 87%;
	height: auto;
	margin: 0 auto;
}
.goods_ashirai01 {
	position: absolute;
	bottom: 7%;
	left: -7%;
	z-index: -1;
	width: 15%;
}
@keyframes faderight {
	0%,40% {
	 opacity: 1;
	 transform: translateX(5vw);
	}
	50%,85% {
		opacity: 1;
		transform: translateX(0); 
	}
	100% {
	 opacity: 1;
	 transform: translateX(5vw);
	}
	}

.goods_ashirai02 {
	position: absolute;
	top: -12vw;
	right: 18%;
	z-index: -1;
	width: 20%;
}

.goods_wrap::before {
	width: 57vw;
	height: 80px;
	background-image: url(../img/50th/goods_ttl.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: -2em;
	left: 2%;
}

}

@media (orientation: landscape) and (max-width: 1030px) {

  .mainImage_anv .pc_an {
    display: block;
  }

  .mainImage_anv .sp_an {
    display: none;
  }
	.ttl_inner img {
		width: 100%;
		height: 53vw;
}
.ttl_a {
	width: 52%;
	top: -68vw;
	left: 36%;
}
.scroll {
	right: 6%;
	top: 12%;
	letter-spacing: 3px;
	font-size: 2.5vw;
}
#lead {
	margin-top: 75vw;
	padding-top: 1em;
}
.lead_wrap .lead_text p {
	font-size: 2.5vw;
}

.lead_wrap .lead_ttl p {
	font-size: 5vw;
}
.character_ttl_wrap {
	font-size: 4.7vw;
}
.goods_wrap p.goods_sub_text {
	font-size: 3vw;
}

}