@charset "utf-8";


/* リセット	*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {	
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
	line-height: 1;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, picture, footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}
li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	vertical-align: bottom;
  max-width:100%;
}
*, *:before, *:after {
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/* general framework */
html,
body {
	width: 100%;
	height: 100%;
  color:#333;
}
html {
	/* smooth scroll css */
	scroll-behavior: smooth;
	font-size: 62.5%;
}
body {
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.6;
	font-family: 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック', meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
	background: rgba(253, 208, 0, 1) url(../img/bg_pc.png) center center no-repeat;
	background-size: cover;
	background-attachment: fixed;
	/* overflow: hidden; */
}
p {
	line-height: 1.6;
}

.spNone {
	display: block;
}
.pcNone {
	display: none;
}


@media screen and (max-width: 970px) {
	.spNone {
		display: none;
	}
	.pcNone {
		display: block;
	}
}


/* general */
.bgColorA {
	background:rgba(253, 208, 0, 1);
}
.paddingArea {
	padding: 0 20px;
}
.wrapper { 
	max-width: 80%; 
	width: 375px;
	margin: 0 auto; 
	height: 100%;
	position: relative;
}
@media screen and (max-width: 970px) {
	.wrapper {
		max-width: none;
		width: 100%;
	}
}

/* メインanime */
main {
	overflow: hidden;
	background: #fff;
	border: 1px solid #000;
}
.mainImg {
	/* margin-bottom: 24px; */
	position: relative;
	width: 100%;
	overflow: hidden;
}

.mainImgFront {
	width: 100%;
	position: absolute;
	z-index: 3;
	inset: 0;
	animation: mainImgFront 3s cubic-bezier(.26,.71,.05,.99) .5s infinite;
	/* animation: mainImgFront 2s cubic-bezier(.5,.49,.05,.99) infinite; */
}

@keyframes mainImgFront {
	0% { scale: 0; opacity: 0;}	
	20% { scale: 1.05; opacity: 1;}
	25% { scale: 1; opacity: 1;}
	70% { scale: 1; opacity: 1;}
	100% { scale: 2; opacity: 0;}
}
.mainImg .ob {
	position: absolute;
}
.mainImg .ob1 {
	bottom: 40px;
	left: 0;
	animation: ob1 3.1s infinite;
}
.mainImg .ob1 img {
	width: 90px;
}
@keyframes ob1 {
	0% { bottom: 40px; }
	50% { bottom: 30px; }
	100% { bottom: 40px; }
}
.mainImg .ob2 {
	top: 170px;
	left: 60px;
	animation: ob2 3.1s infinite;
}
.mainImg .ob2 img {
	width: 35px;
}
@keyframes ob2 {
	0% { top: 170px; }
	50% { top: 180px; }
	100% { top: 170px; }
}

.mainImg .ob3 {
	top: 80px;
	left: 0px;
	animation: ob3 3.1s infinite;
}
.mainImg .ob3 img {
	width: 80px;
}
@keyframes ob3 {
	0% { top: 80px; }
	50% { top: 90px; }
	100% { top: 80px; }
}

.mainImg .ob4 {
	top: 20px;
	left: 45px;
	animation: ob4 3.1s infinite;
}
.mainImg .ob4 img {
	width: 50px;
}
@keyframes ob4 {
	0% { top: 20px; }
	50% { top: 10px; }
	100% { top: 20px; }
}

.mainImg .ob5 {
	top: 40px;
	left: 130px;
	animation: ob5 3.1s infinite;
}
.mainImg .ob5 img {
	width: 60px;
}
@keyframes ob5 {
	0% { top: 40px; }
	50% { top: 50px; }
	100% { top: 40px; }
}

.mainImg .ob6 {
	top: 20px;
	right: 70px;
	animation: ob6 3.1s infinite;
}
.mainImg .ob6 img {
	width: 80px;
}
@keyframes ob6 {
	0% { top: 20px; }
	50% { top: 30px; }
	100% { top: 20px; }
}

.mainImg .ob7 {
	top: 70px;
	right: 10px;
	animation: ob7 3.1s infinite;
}
.mainImg .ob7 img {
	width: 40px;
}
@keyframes ob7 {
	0% { top: 70px; }
	50% { top: 80px; }
	100% { top: 70px; }
}

.mainImg .ob8 {
	top: 142px;
	right: 30px;
	animation: ob8 3.1s infinite;
}
.mainImg .ob8 img {
	width: 60px;
}
@keyframes ob8 {
	0% { top: 142px; }
	50% { top: 132px; }
	100% { top: 142px; }
}

.mainImg .ob9 {
	bottom: 90px;
	right: 0;
	animation: ob9 3.1s infinite;
}
.mainImg .ob9 img {
	width: 50px;
}
@keyframes ob9 {
	0% { bottom: 90px; }
	50% { bottom: 100px; }
	100% { bottom: 90px; }
}

.mainImg .ob10 {
	bottom: 10px;
	right: 18px;
	animation: ob10 3.1s infinite;
}
.mainImg .ob10 img {
	width: 80px;
}
@keyframes ob10 {
	0% { bottom: 10px; }
	50% { bottom: 20px; }
	100% { bottom: 10px; }
}
.mainImg .ob11 {
	bottom: 50px;
	right: 140px;
	animation: ob11 3.1s infinite;
}
.mainImg .ob11 img {
	width: 48px;
}
@keyframes ob11 {
	0% { bottom: 50px; }
	50% { bottom: 40px; }
	100% { bottom: 50px; }
}
.mainImg .ob12 {
	bottom: 0;
	left: 102px;
	animation: ob12 3.1s infinite;
}
.mainImg .ob12 img {
	width: 76px;
}
@keyframes ob12 {
	0% { bottom: 0px; }
	50% { bottom: 10px; }
	100% { bottom: 0px; }
}
main {
	overflow: hidden;
	background: #fff;
	border: 1px solid #000;
}
.mainImg img,
.movie img {
	max-width: none;
	width: 100%;
}
.movieBalloon {
	position: relative;
	display: block;
	margin: 20px auto;
	padding: 7px 30px;
	width: fit-content;
	color: #555;
	font-size: 12px;
	background: #fff;
	border-radius: 5px;
}
@media screen and (min-width: 768px) and (max-width: 970px) {
	.movieBalloon {
		width:67vw;
	}
}
.movieBalloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #fff;
}
.balloon1 p {
  margin: 0;
  padding: 0;
}
.movie figure {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movie figure {
	margin-bottom: 10px;
}
.movie figure iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.movie p {
	font-size: 13px;
	font-weight: bold;
}
.anim {
	position: relative;
}
.section {
	position: relative;
}
.bnr {
	text-align: center;
	background: #fff;
	padding: 30px 30px 50px;
	transition: .2s;
}
.bnr:hover img {
	opacity: .8;
}
h2 {
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 26px;
	position: relative;
	z-index: 1;
}
.marker:after {
	content: "";
	display: inline-block;
	position: absolute;
	width: 300px;
	height: 40px;
	background: linear-gradient(transparent 50%, #FDD000 50%);
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
	bottom: 0;
}

@media screen and (max-width: 970px) {
	h2 > img {
		width: 100vw;
		margin: 0 calc(50vw - 50%);
	}
}
.movie {
	margin-bottom: 70px;
}

/* congratulation */
.congratulation {
	background: url(../img/10th.png) center top no-repeat;
	background-size: contain;
	padding: 20px 0 0;
	font-size: 18px;
	font-weight: bold;
	height: 72px;
	margin-bottom: 30px;
}
.congratulation div {
	opacity: 0;
}
.congratulation div:first-child {
	animation: fade .2s ease-in .5s 1 normal forwards;
} 
.congratulation div:last-child {
	animation: fade .2s ease-in 1s 1 normal forwards;
} 
@keyframes fade {
	0% { opacity: 0; transform: scale(.8); }
	100% { opacity: 1; transform: scale(.9); }
}
.paragraph {
	text-align: center;
	margin-bottom: 20px;
	font-weight: bold;
	font-size: 14px;
	line-height: 2;
}


/* Pickup */
.section.pickup {
	background: rgba(255, 247, 216, 1);
	padding: 30px 0 60px;
	margin-bottom: 30px;
}
.cardWrap {
	background: #fff;
	border-radius: 10px;
	padding: 17px 16px;
	border: 2px solid #000;
}
.card img {
	margin-bottom: 15px;
}
.card figure figcaption {
	font-weight: bold;
	min-height: 2em;
}
#pickupParts figure figcaption h3 {
	font-weight: bold;
	margin-bottom: 10px;
	text-align: left;
	font-size: 15px;
}
#pickupParts figure figcaption h4 {
	text-align: left;
	font-size: 12px;
	font-weight: normal;
	margin-bottom: 10px;
}
.slider {
	max-width: 70%;
	margin: 0 auto;
	padding: 0;
}
.slider .slick-list {
	overflow: visible;
}
.slider .slick-slide {
	padding: 0 10px;
	opacity: .5;
	transition-duration: 0.3s;
}
.slider .slick-slide.slick-current {
	opacity: 1;
}
.slider .slick-slide a {
	display: block;
}
.slider .slick-slide a:hover {
	display: block;
	opacity: .7;
}
.slider img {
	height: auto;
	width: 100%;
}
.slick-prev, .slick-next {
	z-index: 1;
}
.slick-dots {
	bottom: -33px;
}
.slick-track {
  display: flex;
}
.slick-slide {
  height: auto !important;
}

/* nav隠し */
body:not(:has(.cardWrap)) #navPickup,
body:not(:has(.cardWrap)) .section.pickup{
	display: none;
}
body:not(:has(.infoItem)) #navInfo,
body:not(:has(.infoItem)) .section.news{
	display: none;
}

/* vote */
.section.vote {
	background-size: 25px 30px;
	background-position: 48% 50%;
	background-image: repeating-linear-gradient(90deg, #ccc, #ccc 1px, transparent 1px, transparent 107px), repeating-linear-gradient(0deg, #ccc, #ccc 1px, #fff 1px, #fff 92px);
	padding: 40px 0 20px 0;
	margin-bottom: 30px;
}
.section.vote h2 {
	margin-bottom: 0;
}
.section.vote h2:after {
	display: none;
}
.voteLofmof {
	text-align: center;
	font-weight: bold;
	font-size: 13px;
	position: relative;
	z-index: 1;
	line-height: 2.4;
	margin-bottom: 10px;
}
.voteLofmof span {
	font-weight: bold;
	font-size: 16px;	
	position: relative;
	z-index: 2;
	display: inline-block;
}
.voteLofmof span:after {
	content: "";
	display: inline-block;
	position: absolute;
	width: 150px;
	height: 20px;
	background: linear-gradient(transparent 50%, #FDD000 50%);
	left: 5px;
	z-index: -1;
	bottom: -5px;
}
.txtGacha {
	position: absolute;
	top: 95px;
	left: 210px;
}
.votePeriod {
	display: flex;
	justify-content: center;
	align-items: center;
}
.dlVote {
	margin-bottom: 10px;
	text-align: center;
}
#slideDown {
	display: none;
	background: #fff;
	padding: 10px;
	margin: 0 20px;
}
#slideDown {
	opacity: 0;
}
#slideDown.open {
	animation: fadeIn .8s ease-out forwards;;
}
@keyframes fadeIn {
  100% { opacity: 1;}
}
.fadeImage {
	position: absolute;
  top: 0;
  left: 50%;
  opacity: 0;
	transform: translateX(-50%);
  transition: opacity 1s ease-in-out;
}
.fadeImage.show {
	opacity: 1;
}
.btnInfo.open:after {
	display: inline-block;
	content: "";
	width: 12px;
	height: 12px;
	border-bottom: 3px solid #000;
	border-right: 3px solid #000;
	transform: rotate(45deg);
	position: absolute;
	top: 45%;
	right: 10px;
	transform: translate(-50%, -50%) rotate(225deg);
	transition: .2s;
}
.btnInfo.open:hover:after {
	border-bottom: 3px solid rgba(253, 208, 0, 1);
	border-right: 3px solid rgba(253, 208, 0, 1);
}
.voteContents .paddingArea ul {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.voteContents .paddingArea ul li {
	/* position: absolute; */
}
.voteContents .paddingArea ul li.feature {
	width: 60%;
}
.voteContents .paddingArea ul li.size {
	width: 35%;
	margin-top: 20%;
}
.voteContents .paddingArea ul li.dislike {
	width: 40%;
	margin-top: 20%;
}
.voteContents .paddingArea ul li.like {
	width: 50%;
}
.voteContents .paddingArea figure {
	text-align: center;
	position: relative;
}
.voteContents .paddingArea figure figcaption {
	font-weight: bold;
	font-size: 14px;
	line-height: 24px;
	padding: 200px 15px 0;
	text-align: left;
}
.voteContents .btnArea.dl img {
	height: 40px;
}
.voteContents h3 {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}
.voteContents h3 span {
	font-size: 18px;
}
.voteContents h3 span.line {
	position: relative;
	font-size: 20px;
	z-index: 1;
}
.voteContents h3 span.line:after {
	content: "";
	display: inline-block;
	position: absolute;
	width: 100px;
	height: 20px;
	background: linear-gradient(transparent 50%, #FDD000 50%);
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
	bottom: 0;
}
.voteContents .btnArea {
	margin-bottom: 20px;
}
h3.kira {
	position: relative;
	font-size: 34px;
	width: fit-content;
	margin: 0 auto 20px;
}
h3.kira span {
	content: "";
	display: inline-block;
	position: absolute;
	background: url(../img/img_kira.svg) center center no-repeat;
	background-size: contain;
	animation: glitter 1s infinite;
}
h3.kira span:nth-child(1) {
	width: 20px;
	height: 30px;
	left: -30px;
	top: -10px;
	animation-delay: 0s;
}
h3.kira span:nth-child(2) {
	width: 20px;
	height: 30px;
	right: -35px;
	top: 0px;
	animation-delay: .3s;
}
h3.kira span:nth-child(3) {
	width: 10px;
	height: 20px;
	right: -50px;
	bottom: 0px;
	animation-delay: .2s;
}
@keyframes glitter {
  0% {transform: scale(0);opacity: 0;}
  50% {transform: scale(1);opacity: 1;}
  100% {transform: scale(0);opacity: 0;}
}
.bgW {
	background: #fff;
	margin: 0 20px;
}
.bgW .paddingArea {
	padding: 10px;
}

/* news */
.section.news {
	border-top:2px solid #000;
	border-bottom:2px solid #000;
	padding: 30px 0;
}
.date {
	font-size: 14px;
}
.status {
	font-size: 11px;
	font-weight: bold;
	display: inline-block;
  position: relative;
  height: 16px;
  line-height: 16px;
  text-align: center;
  padding: 0 10px;
  color: #000;
  box-sizing: border-box;
}
.status.currently {
  background: rgba(253, 208, 0, 1);
}
.status.end {
	background: rgba(217, 217, 217, 1);
}
.status.notice {
	background: rgba(170, 204, 3, 1);
}
.status:before, .status:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}
.status:before {
  top: 0;
  left: 0;
  border-width: 8px 0px 8px 5px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}
.status:after {
  top: 0;
  right: 0;
  border-width: 8px 5px 8px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

.newsList li {
	text-align: center;
	margin-bottom: 20px;
}
.newsDate {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px;
}
.newsList li img {
	margin-bottom: 15px;
}
.newsList li figure figcaption h3 {
	font-weight: bold;
	margin-bottom: 10px;
	text-align: left;
}
.newsList li figure figcaption h4 {
	text-align: left;
	font-size: 12px;
	margin-bottom: 10px;
}


/* app dl */
.section.app {
	padding: 50px 0;
}
.txtDl {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 5px;
}
.app h3 {
	text-align: center;
}
.section.app .btnArea img {
	width: 100%;
	height: 40px;
}
.pointList {
	text-align: center;
}
.pointList li {
	margin-bottom: 10px;
}
.point03 dd img {
	max-height: 100px;
}




/* お知らせ */
.newsList {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.newsList li {
	width: 47%;
}




/* point */
.point01 { border: 3px solid rgba(253, 208, 0, 1);}
.point02 { border: 3px solid rgba(170, 204, 3, 1)}
.point03 { border: 3px solid rgba(211, 210, 209, 1)}
.point04 { border: 3px solid rgba(235, 122, 171, 1)}
.point01,
.point02,
.point03,
.point04 {
	border-radius: 5px;
	padding: 30px 15px 20px;
	margin-bottom: 10px;
}
.pointList .anim dt {
	position: relative;
	padding-bottom: 70px;
}
.pointList dt:after {
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	content: "";
	background-size: cover;
	width: 60px;
	height: 60px;
}
.pointList .point01 dt:after {
	background: url(../img/ico_point1.png) center center no-repeat;
}
.pointList .point02 dt:after {
	background: url(../img/ico_point2.png) center center no-repeat;
}
.pointList .point03 dt:after {
	background: url(../img/ico_point3.png) center center no-repeat;
}
.pointList .point04 dt:after {
	background: url(../img/ico_point4.png) center center no-repeat;
}
.pointList .anim dt p {
	font-size: 20px;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 1.2;
	background: rgba(253, 208, 0, 1);
	padding: 0 5px;
	width: fit-content;
	margin: 0 auto;
}
.pointList .anim dt span {
  position: relative;
  display: inline-block;
  padding: 0 15px;
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 5px;
}
.pointList .anim dt span:before,
.pointList .anim dt span:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 14px;
  height: 1px;
  background-color: black;
}
.pointList .anim dt span:before {
  left:0;
  transform: rotate(70deg);
}
.pointList .anim dt span:after {
  right: 0;
  transform: rotate(-70deg);
}
.pointList .anim dd {
	font-weight: bold;
	font-size: 14px;
}
.pointList .anim dd p {
	margin-bottom: 20px;
}
.pointList .anim dd figure figcaption span {
	display: inline-block;
	font-size: 10px;
	line-height: 1.8;
	width: fit-content;
	text-indent: -1em;
	padding-left: 1em;
	text-align: left;
}

/* footer */
.footer {
	width: 100%;
	margin: 0;
	display: block;
	padding: 0;
	text-align: left;
	background: rgba(241, 241, 241, 1);
	padding: 20px 0 0 0;
}
footer p {
	text-align: center;
	width: fit-content;
	margin: 0 auto;
}
.note {
	text-align: center;
	margin: 10px;
}
.txtShare {
  position: relative;
  display: block;
  padding: 0 25px;
	font-weight: bold;
	font-size: 18px;
	width: fit-content;
	margin: 0 auto 5px;
}
.txtCheck {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
}
.txtShare:before,
.txtShare:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 20px;
  height: 1px;
  background-color: black;
}
.txtCheck:before,
.txtShare:before {
  left:0;
  transform: rotate(40deg);
}
.txtCheck:after,
.txtShare:after {
  right: 0;
  transform: rotate(-40deg);
}
footer p a {
	color: #000;
	font-size: 14px;
}
.sns ul {
	display: flex;
	justify-content: center;
	gap: 10%;
	padding: 10px 20% 20px;
}
#copyright {
	padding: 20px 0 20px;
	font-size: 10px;
	display: block;
	width: fit-content;
	margin: 0 auto;
}



/* ----------------------------------------------- */
/* title */


/* button */
.btnArea {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}
.btnInfo {
	width: 280px;
	border: 2px solid #000;
	border-radius: 100vmax;
	background: #fff;
	display: inline-block;
	padding: 5px;
	font-size: 16px;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	position: relative;
	cursor: pointer;
	transition: .2s;
}
.btnAll {
	width: 68%;
	border: 2px solid #000;
	border-radius: 100vmax;
	background: #fff;
	display: inline-block;
	padding: 10px;
	font-size: 20px;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	position: relative;
	cursor: pointer;
	transition: .2s;
}
.btnInfo:hover,
.btnAll:hover {
	border: 2px solid #000;
	background: #000;
	color: rgba(253, 208, 0, 1);	
}
.btnInfo:after,
.btnAll:after {
	display: inline-block;
	content: "";
	width: 12px;
	height: 12px;
	border-bottom: 3px solid #000;
	border-right: 3px solid #000;
	transform: rotate(45deg);
	position: absolute;
	top: 45%;
	right: 10px;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: .2s;
}
.btnInfo:hover:after,
.btnAll:hover:after {
	border-bottom: 3px solid rgba(253, 208, 0, 1);
	border-right: 3px solid rgba(253, 208, 0, 1);
}
.btnAll.expanded:after {
	transform: translate(-50%, 0%) rotate(225deg);
}
.app .btnArea {
	margin-bottom: 26px;
}


/* modal */
.openModal {
	transition: .2s;
}
.openModal:hover {
	opacity: .8;
	cursor: pointer;
} 
.overlay {
	background: rgba(0,0,0,.7);
	width: 100%;
	height: 100%;
}
.modal .absolute {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
	width: 980px;
	max-height: 630px;
	/* overflow-y: auto; */
	background: #f5f5f5;
	border-radius: 10px;
	padding: 2.0rem;
	max-height: 80svh;
}
.relative {
	position: relative;
}
.modal .relative {
	width: 100%;
	height: 100%;
}
.modaal-content.modaal-focus::-webkit-scrollbar,
.modaal-container::-webkit-scrollbar {
    display: none;
}
.modaal-content-container {
	padding:40px 20px 30px 30px!important;
}
.modaal-content-container > div {
	max-height: 80svh;
	overflow-y: auto;
	padding-right: 10px;
}
.modaal-content-container figure img {
	margin-bottom: 20px;
}
.modaal-content-container figcaption p {
	font-size: 16px;
}
.modaal-content-container .btnArea a {
	width: 200px;
}
.modaal-content-container .btnArea a img {
	margin-bottom: 0;
}
.modaal-content-container figcaption {
	margin-bottom: 20px;
}
.modaal-content-container figcaption h3 {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 20px;
}
.modaal-content-container figcaption h4 {
	font-size: 12px;
	margin-bottom: 10px;
}

.closeModal {
	position: absolute;
	top: 5px;
	right: 5px;
	overflow: hidden!important;
	height: auto !important;
}
.closeModal:hover {
	opacity: .7;
}
.closeModal span {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	cursor: pointer;
}
.closeModal span::before, .closeModal span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 20px;
	background: #333;
} 
.closeModal span::before {
	transform: translate(-50%,-50%) rotate(45deg);
} 
.closeModal span::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}
@media screen and (max-width: 970px) {
	.modaal-content-container {
		padding:30px 20px!important;
	}
	.modaal-content-container > div {
		max-height: 80svh;
		overflow-y: auto;
		padding: 0 10px;
	}
	.modaal-inner-wrapper {
		padding-top: 0!important;
		padding-bottom: 0!important;
}
}




/* deco */
.left,
.right {
	opacity: 0;
	position: absolute;
	top: -100px;
	display: inline-block;
	z-index: 1;
	pointer-events: none;
}
.left img,
.right img {
	width: 100px;
	pointer-events: none;
}

/* 01 */
.left { left: -15px;}
.right { right: -20px;}
.leftAnim {animation:leftAnim 0.9s ease-out forwards;
}
.rightAnim {animation:rightAnim 0.9s .5s ease-out forwards;
}

@keyframes leftAnim {
  0%   { transform:  translate(0%, -100%); opacity: 0;}
  10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -64px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
  100% { transform:  translate(0%, 0%); opacity: 1; top: -64px;}
}

@keyframes rightAnim {
	0%   { transform:  translate(0%, -100%); opacity: 0;}
  10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -64px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
  100% { transform:  translate(0%, 0%); opacity: 1; top: -64px;}
}
/* 02 */
.pickup .left { left: 0px;}
.pickup .right { right: 25px;}
.pickup .leftAnim {animation:leftAnim02 .9s .6s ease-out forwards;}
.pickup .rightAnim {animation:rightAnim02 .9s .7s ease-out forwards;}
@keyframes leftAnim02 {
	0%   { opacity: 0; transform: translate(0%, -100%); }
	10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -34px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
	100% { opacity: 1; transform: scale(1.0, 1.0) translate(0%, 0%);top: -34px; }
}
@keyframes rightAnim02 {
	0%   { opacity: 0; transform: translate(0%, -100%); }
	10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -50px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
	100% { opacity: 1; transform: scale(1.0, 1.0) translate(0%, 0%);top: -50px; }}

/* 03 */
.vote .left { left: -15px;}
.vote .right { right: -20px;}
.vote .leftAnim {animation:leftAnim03 .9s .4s ease-out forwards;
}
.vote .rightAnim {animation:rightAnim03 .9s .6s forwards;
}
@keyframes leftAnim03 {
	0%   { opacity: 0; transform: translate(0%, -100%); }
	10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -54px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
	100% { opacity: 1; transform: scale(1.0, 1.0) translate(0%, 0%);top: -54px; }}
@keyframes rightAnim03 {
	0%   { opacity: 0; transform: translate(0%, -100%); }
	10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -90px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
	100% { opacity: 1; transform: scale(1.0, 1.0) translate(0%, 0%);top: -90px; }}

/* 04 */
.news .left { left: -10px;}
.news .right { right: 0px;}
.news .leftAnim {animation:leftAnim04 .9s .4s ease-out forwards;
}
.news .rightAnim {animation:rightAnim04 .9s .6s ease-out forwards;
}
@keyframes leftAnim04 {
	0%   { opacity: 0; transform: translate(0%, -100%); }
	10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -54px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
	100% { opacity: 1; transform: scale(1.0, 1.0) translate(0%, 0%);top: -54px; }}
	
@keyframes rightAnim04 {
	0%   { opacity: 0; transform: translate(0%, -100%); }
	10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -72px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
	100% { opacity: 1; transform: scale(1.0, 1.0) translate(0%, 0%);top: -72px; }}

/* 05 */
.point01 .left { left: -35px;}
.point01 .right { right: -20px;}
.point01 .leftAnim {animation:leftAnim05 .9s .4s ease-out forwards;}
.point01 .rightAnim {animation:rightAnim05 .9s .6s ease-out forwards;}
@keyframes leftAnim05 {
	0%   { opacity: 0; transform: translate(0%, -100%); }
	10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -54px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
	100% { opacity: 1; transform: scale(1.0, 1.0) translate(0%, 0%);top: -66px; }}
@keyframes rightAnim05 {
	0%   { opacity: 0; transform: translate(0%, -100%); }
	10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -72px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
	100% { opacity: 1; transform: scale(1.0, 1.0) translate(0%, 0%);top: -72px; }}

/* 06 */
.point02 .left { left: 15px;}
.point02 .right { right: -40px;}
.point02 .leftAnim {animation:leftAnim06 .9s .4s ease-out forwards;}
.point02 .rightAnim {animation:rightAnim06 .9s .6s ease-out forwards;}
@keyframes leftAnim06 {
	0%   { opacity: 0; transform: translate(0%, -100%); }
	10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -54px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
	100% { opacity: 1; transform: scale(1.0, 1.0) translate(0%, 0%);top: -54px; }}
@keyframes rightAnim06 {
	0%   { opacity: 0; transform: translate(0%, -100%); }
	10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -72px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
	100% { opacity: 1; transform: scale(1.0, 1.0) translate(0%, 0%);top: -72px; }}

/* 07 */
.point03 .left { left: -15px;}
.point03 .right { right: 0px;}
.point03 .leftAnim {animation:leftAnim07 .9s .4s ease-out forwards;}
.point03 .rightAnim {animation:rightAnim07 .9s .6s ease-out forwards;}
@keyframes leftAnim07 {
	0%   { opacity: 0; transform: translate(0%, -100%); }
	10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -54px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
	100% { opacity: 1; transform: scale(1.0, 1.0) translate(0%, 0%); top: -54px; }}
@keyframes rightAnim07 {
	0%   { opacity: 0; transform: translate(0%, -100%); }
	10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -72px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
	100% { opacity: 1; transform: scale(1.0, 1.0) translate(0%, 0%);top: -72px; }}

/* 08 */
.point04 .left { left: -15px;}
.point04 .right { right: 0px;}
.point04 .leftAnim {animation:leftAnim08 .9s .4s ease-out forwards;}
.point04 .rightAnim {animation:rightAnim08 .9s .6s ease-out forwards;}
@keyframes leftAnim08 {
	0%   { opacity: 0; transform: translate(0%, -100%); }
	10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -54px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
	100% { opacity: 1; transform: scale(1.0, 1.0) translate(0%, 0%);top: -54px; }}
@keyframes rightAnim08 {
	0%   { opacity: 0; transform: translate(0%, -100%); }
	10%  { transform:  translate(0%, 30%); }
  20%  { transform:  translate(0%, -30%); opacity: 1;}
  30%  { transform:  translate(0%, 20%); }
  40%  { transform:  translate(0%, -20%); top: -40px;}
  50%  { transform:  translate(0%, 10%);  }
  60%  { transform:  translate(0%, -10%); }
  70%  { transform:  translate(0%, 5%); }
  80%  { transform:  translate(0%, -5%); }
  90%  { transform:  translate(0%, 0%); }
	100% { opacity: 1; transform: scale(1.0, 1.0) translate(0%, 0%);top: -70px; }
}

@media screen and (max-width: 970px) {
	.gNav {	display: none!important;}
	.logoArea {	display: none!important;}
}

/* PC用 */
.gNav {
	position: fixed;
	top: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: -30vw;
	max-width: 300px;
}
.gNav ul.pageLink {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1vw;
	margin-bottom: 20px;
}
.gNav ul.pageLink li {
	position: relative;
}
.gNav ul.pageLink li:nth-child(2):after {
	content: "";
	display: inline-block;
	position: absolute;
	top: -95px;
	right: -75px;
	width: 140px;
	height: 140px;
	background: url(../img/03.png) center center no-repeat;
	background-size: contain;
	rotate: 26deg;
	pointer-events: none;
}
.gNav ul.pageLink li a {
	border: 4px solid #000;
	text-decoration: none;
	color: #000;
	background: #fff;
	font-size: min(1.4vw, 30px);
	font-weight: bold;
	display: inline-block;
	padding: 2.5svh 10px;
	width: min(17vw, 400px);
	text-align: center;
	border-radius: 5px;
}
.gNav ul.pageLink li a:hover {
	border: 4px solid #000;
	color: rgba(253, 208, 0, 1);
	background: #000;
}
.gNav ul.sns {
	display: flex;
	justify-content: center;
	gap: 20px;
}
.gNav ul.sns li {
	width: 15%;
}
.gNav ul.sns li img {
	width: 100%;
}

.logoArea {
	position: fixed;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-left: 30vw;
}
@media screen and (min-width: 970px) and (max-width:1300px) {
	.logoArea {
		margin-left: 40vw;
	}
}
.logoArea > figure {
	margin: 20vh 0 10vh;
}
.logoArea figure img {
	width: 100%;
	margin-bottom: 20px;
}
.logoArea dl {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 280px;
}
.logoArea dl dt {
	width: 60%;
	text-align: center;
	margin: 0 auto 20px;
}
.logoArea dl dd {
	width: 48%;
	text-align: center;
}
.logoArea dl dd img {
	height: 40px;
}
/* / PC用 */

/* splash anim */
#splash.container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	position: relative;
	overflow: hidden;
}
.object {
	/* width: 50px;
	height: 50px;
	/* background-color: #3498db; */
	border-radius: 50%;
	position: absolute;
	animation: 1.3s ease-out forwards;
	z-index: 1;
	transform-origin: center center;
	opacity: 0;
}
#splash.container .bg {
	z-index: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	
}
#splash.container .bg img {
	object-fit: contain;
	width: 100vw;
	height: 100vh;

}
@media screen and (max-width:767px) {
	/*　画面サイズが767px以下の場合読み込む　*/
	#splash.container .bg img {
		width: 100vw;
		height: 100vh;
	
	}
}


/* 各オブジェクトのアニメーション方向を設定 */
.bg {animation: bg .8s ease-out forwards;}
.object.ob1 {animation-name: move1; animation-delay:.1s;}/* 10週年 */
.object.ob2 {animation-name: move2; animation-delay:.2s;}
.object.ob3 {animation-name: move3; animation-delay:.25s;}
.object.ob4 {animation-name: move4; animation-delay:.18s;}
.object.ob5 {animation-name: move5; animation-delay:.21s;}
.object.ob6 {animation-name: move6; animation-delay:.05s;}
.object.ob7 {animation-name: move7; animation-delay:.01s;}
.object.ob8 {animation-name: move8; animation-delay:.22s;}
.object.ob9 {animation-name: move9; animation-delay:.16s;}
.object.ob10 {animation-name: move10; animation-delay:.16s;}/* 未使用 */
.object.ob12 {animation-name: move12; animation-delay:.09s;}
.object.ob11 {animation-name: move11; animation-delay:1s; animation-duration: 0.5s;
	transform-origin: bottom center; animation-timing-function: ease-in-out; }/* センターロフモフ */


	@keyframes move1 {/* 10週年 */
		0% { transform: translate(0, 0) scale(.5); }
		40% { opacity: 1; }
		100% { opacity: 1; transform: translate(0, 0) scale(1); }
	}
	@keyframes move2 {
		0% { transform: translate(0, 0) scale(.5); }
		100% { opacity: 1; transform: translate(30vw, -30svh) scale(1.2); }
	}
	@keyframes move3 {
		0% { transform: translate(0, 0) scale(.5); }
		100% { opacity: 1; transform: translate(-90vw, 20svh) scale(1.5); }
	}
	@keyframes move4 {
		0% { transform: translate(0, 0) scale(.5); }
		100% {	opacity: 1; transform: translate(58vw, 10svh) scale(1); }
	}
	@keyframes move5 {
		0% { transform: translate(0, 0) scale(.5); }
		100% {	opacity: 1; transform: translate(5vw, 23svh) scale(1.1); }
	}
	@keyframes move6 {
		0% { transform: translate(0, 0) scale(.5); }
		100% { opacity: 1; transform: translate(-60vw, -45svh) scale(3); }
	}
	@keyframes move7 {
		0% { transform: translate(0, 0) scale(.5); }
		100% { opacity: 1; transform: translate(60vw, -40svh) scale(1.5); }
	}
	@keyframes move8 {
		0% { transform: translate(0, 0) scale(.5); }
		100% { opacity: 1; transform: translate(50vw, 50svh) scale(1.5); }
	}
	@keyframes move9 {
		0% { transform: translate(0, 0) scale(1); }
		100% {	opacity: 1; transform: translate(-25vw, 35svh) scale(1.1); }
	}
/* @keyframes move10 {
		0% { transform: translate(0, 0) scale(1); }
		100% { opacity: 1; transform: translate(0, 0) scale(1); }
} */
	@keyframes move11 {/* センター */
		0% {
    transform: translateY(100%) translateX(-5px); 
			opacity: 0;
		}
		40% {
    transform: translateY(0px) translateX(-5px); 
			opacity: 1;
		}
		60% {
		transform: translateY(15px) translateX(-5px); 
			opacity: 1;
		}
		80% {
		transform: translateY(5px) translateX(-5px); 
			opacity: 1;
		}
		100% {
		transform: translateY(10px) translateX(-5px); 
			opacity: 1;
		}
		
	}
	
	@media screen and (min-width:768px) {
		/*　画面サイズが767px以下の場合読み込む　*/
		@keyframes move1 {/* 10週年 */
			0% { transform: translate(0, 0) scale(.5);}
			40% { opacity: 1; }
			100% { opacity: 1; transform: translate(0, 0) scale(1.3); }
		}
		@keyframes move2 {
			0% { transform: translate(0, 0) scale(.5); }
			100% { opacity: 1; transform: translate(26vw, -27svh) scale(1.2); }
		}
		@keyframes move3 {
			0% { transform: translate(0, 0) scale(.5); }
			100% { opacity: 1; transform: translate(-40vw, 40svh) scale(1.5); }
		}
		@keyframes move4 {
			0% { transform: translate(0, 0) scale(.5); }
			100% {	opacity: 1; transform: translate(40vw, 10svh) scale(1); }
		}
		@keyframes move5 {
			0% { transform: translate(0, 0) scale(.5); }
			100% {	opacity: 1; transform: translate(5vw, 30svh) scale(1.1); }
		}
		@keyframes move6 {
			0% { transform: translate(0, 0) scale(.5); }
			100% { opacity: 1; transform: translate(-32vw, -20svh) scale(3); }
		}
		@keyframes move7 {
			0% { transform: translate(0, 0) scale(.5); }
			100% { opacity: 1; transform: translate(36vw, -40svh) scale(1.5); }
		}
		@keyframes move8 {
			0% { transform: translate(0, 0) scale(.5); }
			100% { opacity: 1; transform: translate(30vw, 46svh) scale(1.5); }
		}
		@keyframes move9 {
			0% { transform: translate(0, 0) scale(1); }
			100% {	opacity: 1; transform: translate(-14vw, 48svh) scale(1.1); }
		}
		@keyframes move10 {
			0% { transform: translate(0, 0) scale(1); }
		100% { opacity: 1; transform: translate(15vw, -44svh) scale(0.9); }
	}
	@keyframes move12 {
		0% { transform: translate(0, 0) scale(1); }
		100% { opacity: 1; transform: translate(0vw, -40svh) scale(0.7); }
		}
		@keyframes move11 {/* センター */
			0% {
				transform: translateY(100%) scale(1) translateX(-5px); 
				opacity: 0;
			}
			40% {
				transform: translateY(20px)scale(1.3) translateX(-5px); 
				opacity: 1;
			}
			60% {
				transform: translateY(35px) scale(1.3) translateX(-5px); 
				opacity: 1;
			}
			80% {
				transform: translateY(25px) scale(1.3) translateX(-5px); 
				opacity: 1;
			}
			100% {
				transform: translateY(30px) scale(1.3) translateX(-5px); 
				opacity: 1;
			}			
		}
	}


	@keyframes bg {
		0% { opacity:0; transform: translate(0, 0) scale(1); }
		50% { opacity:0; transform: translate(0, 0) scale(1); }
		100% { opacity:1; transform: translate(0, 0) scale(1.8); }
	}
	
	@media screen and (max-width:767px) {
		/*　画面サイズが767px以下の場合読み込む　*/
		@keyframes bg {
			0% { opacity:0; transform: translate(0, 0) scale(1); }
			50% { opacity:0; transform: translate(0, 0) scale(1); }
			100% { opacity:1; transform: translate(0, 0) scale(2.4); }
		}
	}

.dl2 {
	border-top: 5px solid #000;
	border-bottom: 5px solid #000;
	padding: 20px 20px 0 20px;
}
.dl2 div:first-child {
	margin-bottom: 10px;
}
.dl2 .btnArea {
	margin-bottom: 10px;
}
.dl2 .dl2Ttl img {
	height: 50px;
}
.dl2 .btnArea img {
	height: 40px;
}

/* general */
.w10 { width: 10px;}
.w20 { width: 20px;}
.w30 { width: 30px;}
.w40 { width: 40px;}
.w50 { width: 50px;}
.w60 { width: 60px;}
.w70 { width: 70px;}
.w80 { width: 80px;}
.w90 { width: 90px;}
.w100 { width: 100px;}
.mb50 { margin-bottom: 50px;}
.mb40 { margin-bottom: 40px;}
.mb30 { margin-bottom: 30px;}
.mb20 { margin-bottom: 20px;}
.mb10 { margin-bottom: 10px;}

.dl2 img,
.footer img {
	width: 100%;
	max-width: none;
	height: 50px;
}
.congratulation span.slidein {
  animation: slideIn 1s ease-in-out forwards;
}
@keyframes slideIn {
  0% {
    transform: translateX(380px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


/* ガチャモーダル */
#checkEntry {
	cursor: pointer;
}
#entryModal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}
#entryModal .relative {
	width: 100%;
	height: 100%;
}
#entryModal .overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.7);
}
#entryModal .relative .modalInner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-width: 360px;
	z-index: 1;
}
#entryModal figure.result.randomImg {
	animation: falling .8s cubic-bezier(.26,.71,.05,.99);
}
@keyframes falling {
  0% {
    transform: translateY(-380px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.closeModale {
	position: absolute;
	bottom: 65px;
	left: 50%;
	transform: translateX(-50%);
	border: 2px solid #000;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 54px;
	font-size: 18px;
	border-radius: 6px;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 1);
	background: #fff;
	font-weight: bold;
	cursor: pointer;
}
.closeModale:hover {
	background: #000;
	color: #fff;
}
@media screen and (max-width: 970px) {
	#entryModal .relative .modalInner {
		width: 80%;
	}
	.closeModale {
		bottom: 12%;
		width: 56%;
    height: 52px;
    font-size: 18px;
	}
}
/* SP font-size */
@media screen and (max-width: 767px) {
	.paragraph {
		font-size: 3.6vw;
	}
	.movie p {
		font-size: 3.2vw;
	}
	.voteLofmof {
		font-size: 3.5vw;
	}
	.modaal-content-container figcaption p {
		font-size: 2.6vw;
	}
	.pointList .anim dd {
		font-size: 3.6vw;
	}
	.newsList li figure figcaption h3 {
		font-size: 3.8vw;
	}
	.newsList li figure figcaption h4 {
		font-size: 3.2vw;
	}
	#pickupParts figure figcaption h3 {
		font-size: 3.8vw;
	}
	#pickupParts figure figcaption h4 {
		font-size: 3.2vw;
	}
	/* .voteContents .paddingArea ul li.feature { width: 46vw;}
	.voteContents .paddingArea ul li.size { width: 40vw;}
	.voteContents .paddingArea ul li.dislike { width: 40vw; bottom:5vh;}
	.voteContents .paddingArea ul li.like { width: 42vw; bottom: -4vh;} */
}
@media screen and (min-width: 768px) and (max-width: 970px) {
	.paragraph {
		font-size: 3.6vw;
	}
	.movie p {
		font-size: 3.2vw;
	}
	.voteLofmof {
		font-size: 3.5vw;
	}
	.modaal-content-container figcaption p {
		font-size: 2.6vw;
	}
	.pointList .anim dt p {
		font-size: 1.9vw;
	}
	.pointList .anim dt span {
		font-size: 1.5vw;
	}
	.pointList .anim dd {
		font-size: 3.6vw;
	}
	.newsList li figure figcaption h3 {
		font-size: 3.8vw;
	}
	.newsList li figure figcaption h4 {
		font-size: 3.2vw;
	}
	#pickupParts figure figcaption h3 {
		font-size: 3.8vw;
	}
	#pickupParts figure figcaption h4 {
		font-size: 3.2vw;
	}
	/* .voteContents .paddingArea ul li.feature { width: 46vw;}
	.voteContents .paddingArea ul li.size { width: 40vw;}
	.voteContents .paddingArea ul li.dislike { width: 40vw; bottom:5vh;}
	.voteContents .paddingArea ul li.like { width: 42vw; bottom: -4vh;}
	.modaal-container {max-width: 70vw!important;} */
	.modaal-content-container figcaption h3 {
		font-size: 3.4vw;
	}
	.modaal-content-container figcaption p {
		font-size: 2.8vw;
	}
	.pointList .anim dd figure figcaption span {
		font-size: 2.0vw;
	}
}
.voteLofmof.font,
.voteLofmof span.font {
	font-size: 17px;
}
.voteLofmof span.font:after {
	display: none;
}