@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap');

/* テキストの自動拡大を無効化 */
body {
	text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}


/* ページ全体の設定 */
html {
	overflow-x: hidden;
}
body {
  animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
	background: #f172ac;
  font-family: 'Noto Sans JP', 'YuGothic', 'Yu Gothic', 'Meiryo', 'ヒラギノ角ゴ', 'sans-serif';
  margin: 0;
	overflow-x: hidden;
	position: relative;
}
@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
.tab,
.pc {
	display: none;
}
@media screen and (min-width: 600px) {
	.tab {
		display: block;
	}
}
@media screen and (min-width: 1025px) {
	.pc {
		display: block;
	}
}

.pc { display: none !important; }
.sp { display: block !important; }

@media screen and (min-width: 600px) {
.pc { display: block !important; }
.sp { display: none !important; }
}

/* ブロック */
.scrollin {
	opacity: 0;
	transform: translate(0, 50px);
	transition: all 500ms;
}
.scrollin.appear {
	opacity: 1;
	transform: translate(0, 0);
}
.sub #content {
	background: url(../img/bg-content.png) top center / 100% auto no-repeat;
}

/* タイトル */
.title {
	background: url(../img/bg-title-sp.png) center center / contain;
	margin: 0 auto;
	max-width: 1183px;
	width: calc(1183 / 1250 * 100vw);
}

@media screen and (min-width: 600px) {
.title {
	background: url(../img/bg-title.png) center center / cover;
	margin: 0 auto;
	max-width: 1183px;
	width: calc(1183 / 1250 * 100vw);
	/* height: calc(172 / 1250 * 100vw); */
}

}

/* リンク */
a {
	color: inherit;
	text-decoration: none;
}
@media screen and (min-width: 600px) {
	a img,
	button img {
		transition: .5s all;
	}
	a:hover img,
	button:hover img {
		transform: scale(1.05, 1.05);
	}
}

/* 画像 */
img {
	width: 100%;
	height: auto;
	display: inline;
}
figure {
	margin: 0;
}

/* animate.cssカスタマイズ */
.animate__animated.animate__delay-05s{-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-delay:calc(var(--animate-delay)*.5);animation-delay:calc(var(--animate-delay)*.5)}


/* ローディング */
body#top {
	background: #fff;
}
body#top.appear {
  background: #fff;
}
#splash {
	background: #fff;
	height: 100%;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: 9999999;
}
.loader {
	align-items: center;
	border-radius: 50%;
	display: flex;
	height: 128px;
	left: calc(50% - 64px);
	perspective: 800px;
  position: absolute;
  top: calc(50% - 64px);
  width: 128px;
}
@media screen and (min-width: 600px) {
	.loader {
		height: 190px;
		left: calc(50% - 80px);
	  top: calc(50% - 80px);
	  width: 190px;
	}
}
/*
.inner {
	border-radius: 50%;
	box-sizing: border-box;
	height: 100%;
  position: absolute;
  width: 100%;
}
.inner.one {
	animation: rotate-one 1s linear infinite;
	border-bottom: 6px solid #f172ac;
  left: 0%;
  top: 0%;
}
@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}
.inner.two {
	animation: rotate-two 1s linear infinite;
  border-right: 3px solid #f172ac;
  right: 0%;
  top: 0%;
}
@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}
.inner.three {
	animation: rotate-three 1s linear infinite;
  border-top: 6px solid #00baf2;
	bottom: 0%;
  right: 0%;
}
@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
*/
#splashbg1,
#splashbg2 {
	background-color: #f172ac;
	content: '';
	display: block;
	height: 100vh;
	position: fixed;
	transform: scaleX(1);
	width: 100%;
	z-index: 99999;
}
#splashbg1 {
	bottom: 50%;
}
#splashbg2{
	top: 50%;
}
body#top.appear #splashbg1,
body#top.appear #splashbg2 {
	display: block;
}
body#top.appear #splashbg1 {
	animation-name: PageAnime;
	animation-duration: 1.6s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	bottom: 50%;
	content: '';
	height: 100vh;
	left: 0;
	position: fixed;
	transform: scaleY(1);
	width: 100%;
}
@keyframes PageAnime {
	0% {
		transform: scaleY(1);
		transform-origin: top;
	}
	100% {
		transform: scaleY(0);
		transform-origin: top;
	}
}
body#top.appear #splashbg2 {
	animation-name: PageAnime2;
	animation-duration: 1.6s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	content: '';
	height: 100vh;
	left: 0;
	position: fixed;
	top: 50%;
	transform: scaleY(1);
	width: 100%;
}
@keyframes PageAnime2 {
	0% {
		transform: scaleY(1);
		transform-origin: bottom;
	}
	100% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
}
.lity {
	/* background: #00baf2; */
	background: url(../img/bg-body-wrap.jpg) center center;
}
#camera {
	height: 100%;
	left: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}
#camera .camera-shutter {
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
}
#camera .camera-shutter::before,
#camera .camera-shutter::after {
	background-color: #000;
	content: '';
	height: 60.5%;
	left: 0;
  position: absolute;
  width: 100%;
}
#camera .camera-shutter::before {
	top: 0;
	transform: translateY(-101%);
}
.is-shooting #camera .camera-shutter::before {
	animation: shutter1 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s;
}
@keyframes shutter1 {
  0% {
		transform: translateY(-101%);
  }
  40% {
		transform: translateY(0);
  }
  100% {
		transform: translateY(-101%);
  }
}
#camera .camera-shutter::after {
	bottom: 0;
	transform: translateY(101%);
}
.is-shooting #camera .camera-shutter::after {
	animation: shutter2 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s;
}
@keyframes shutter2 {
  0% {
		transform: translateY(101%);
  }
  40% {
		transform: translateY(0);
  }
  100% {
		transform: translateY(101%);
  }
}
#camera .camera-flash {
	height: 200%;
	left: 50%;
	opacity: 0;
  position: absolute;
  top: 50%;
	transform: translate(-50%, -50%);
  width: 200%;
}
#camera .camera-flash::before {
	background-color: rgba(255, 255, 255, 0.9);
	content: '';
	height: 100%;
	left: 0;
	pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}
.is-shooting #camera .camera-flash {
	animation: flashFadeInOut 0.4s forwards cubic-bezier(0.33, 1, 0.68, 1) 0.3s;
}
@keyframes flashFadeInOut {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.is-shooting #camera .camera-flash::before {
	animation: flashScaleUpDown 0.4s forwards cubic-bezier(0.33, 1, 0.68, 1) 0.3s;
}
@keyframes flashScaleUpDown {
  0% {
		transform: scale(0.6);
  }
  40% {
		transform: scale(1.2);
  }
  100% {
		transform: scale(0.6);
  }
}
#body-wrap {
	background: url(../img/bg-body-wrap.jpg) center center;
}
#top #body-wrap {
	height: 100vh;
	overflow-y: hidden;
}
#top.is-shooting #body-wrap,
#top.is-anchor #body-wrap {
	height: auto;
	overflow-y: visible;
}
/*
#body-wrap.appear #bg-star,
#body-wrap.appear #anime-star {
	display: block;
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: -1;
}
#body-wrap.appear #bg-star {
	background: url(../img/bg-body-wrap.jpg) center center / calc(300 * 1.89 / 1250 * 100vw);
}
#body-wrap.appear #anime-star {
	background: url(../img/anime-star.gif) top center / contain;
	opacity: .5;
}
*/


/* ヘッダ */

/* トップ */
#top header {
	background: url(../img/bg-head-main.jpg) center center / cover;
	box-sizing: content-box;
	height: calc(1660 / 1250 * 100vw);
	max-height: 1660px;
	overflow: hidden;
	position: relative;
	z-index: 0;
}
#top header #head-main {
	display: none;
	position: relative;
	width: 100vw;
}
#top header #head-main h1 {
	left: calc( 245 / 1250 * 100%);
	position: absolute;
	/* top: calc( 1140 / 1660 * 100%); */
	/* top: calc( 1090 / 1660 * 100%); */
	top: calc( 1060 / 1660 * 100%);
	width: calc( 761 / 1250 * 100%);
	z-index: +1;
}
#top header #head-main .bnr-10th {
	left: calc( 7 / 1250 * 100%);
	position: absolute;
	top: calc( 2 / 1660 * 100%);
	width: calc( 537 / 1250 * 100%);
}
#top header #head-main .catch-01 {
	left: calc( 1145 / 1250 * 100%);
	position: absolute;
	top: calc( 230 / 1660 * 100%);
	/* top: calc( 102 / 1660 * 100%); */
	width: calc( 81 / 1250 * 100%);
	z-index: +1;
}
#top header #head-main .catch-02 {
	left: calc( 327 / 1250 * 100%);
	position: absolute;
	/* top: calc( 1500 / 1660 * 100%); */
	/* top: calc( 1450 / 1660 * 100%); */
	top: calc( 1400 / 1660 * 100%);
	width: calc( 598 / 1250 * 100%);
	z-index: +1;
}

#top header #head-main .catch-03 {
	left: calc( 225 / 1250 * 100%);
	position: absolute;
	top: calc( 1485 / 1660 * 100%);
	width: calc( 800 / 1250 * 100%);
	z-index: +1;
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.5));
}

#top header #head-main .mvtk-wrap {
	align-items: center;
	background: #fff;
	display: flex;
	justify-content: center;
	left: 0;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: +1;
}
#top header #head-main .mvtk-wrap ul {
	align-items: center;
	display: flex;
	max-width: 237px;
	width: calc(237 / 1250 * 100%);
	/* max-width: 474px;
	width: calc(474 / 1250 * 100%); */
}
#top header #head-main .mvtk-wrap ul li {
	padding: 1vh;
	width: 100%;
	/* width: 50%; */
}
#top header #head-main .mvtk-wrap p {
	color: #ed128d;
	font-size: .7rem;
	font-weight: bold;
	max-width: 425px;
}
#top header #head-main-polygon,
#top header #head-main-star,
#top header #head-main-light {
	bottom: 0;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
}
#top header #head-main-polygon {
	background: url(../img/bg-head-main-polygon.png) center center / auto 70%;
}
#top header #head-main-star {
	background: url(../img/bg-head-main-star.png) center center / auto 80%;
}
#top header #head-main-light {
	background: url(../img/bg-head-main-light.png) center center / auto 70%;
}
@media screen and (min-width: 600px) {
	#top header #head-main .mvtk-wrap p {
		font-size: 1rem;
	}
}
@media screen and (min-width: 1025px) {
	#top header {
		background: url(../img/bg-head-main.jpg) center center / contain no-repeat, url(../img/bg-head-main-pc.jpg) center center / cover;
		box-sizing: content-box;
		margin: 0 auto;
	}
	#top header #head-main {
		margin: 0 auto;
		max-width: 1250px;
	}
	#top header #head-main .mvtk-wrap p {
		font-size: 1.15rem;
	}
	#top header #head-main-polygon,
	#top header #head-main-star,
	#top header #head-main-light {
		background-size: cover;
	}
}
#top.is-shooting header::before {
	animation: blurFadeInOut 1.15s cubic-bezier(0.215, 0.61, 0.355, 1);
	background: inherit;
	bottom: -5px;
	content: '';
  filter: blur(5px);
	left: -5px;
	opacity: 0;
  position: absolute;
	right: -5px;
  top: -5px;
  z-index: -1;
}
@keyframes blurFadeInOut {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#top.is-shooting header #head-main,
#top.is-anchor header #head-main {
	display: block;
}

/* 第2階層 */
.sub header {
	background: url(../img/bg-video.jpg) top 25% center / cover;
	border-bottom: solid calc(30 / 1250 * 100vw) #f172ac;
	box-shadow: 0 calc(30 / 1250 * 100vw) #00baf2, 0 calc(60 / 1250 * 100vw) #a066ab, 0 calc(180 / 1250 * 100vw) calc(180 / 1250 * 100vw) calc(180 / 1250 * 100vw) #fff;
	box-sizing: content-box;
	margin-bottom: calc(60 / 1250 * 100vw);
	padding: calc(17 / 1250 * 100vw) 1vh;
}
.sub header #head-sub {
	margin: 0 auto;
	max-width: 1250px;
	display: flex;
	justify-content: left;
	align-items: baseline;
}
.sub header #head-sub .logo {
	max-width: 398px;
	width: calc(398 / 1250 * 100vw);
}
.sub header #head-sub .comingsoon {
	max-width: 550px;
	width: calc(550 / 1250 * 100vw);
	text-align: center;
}


/* メニュー */
/* Copyright (c) Ivan Grozdic
Released under the MIT license
https://codepen.io/ig_design */
.menu-icon:checked,
.menu-icon:not(:checked) {
	display: none;
}
.menu-icon:checked + label,
.menu-icon:not(:checked) + label {
	background: url(../img/btn-menu.png) center center / contain no-repeat;
	height: calc( 177 / 1250 * 100vw * 1.25);
	max-height: 177px;
	max-width: 170px;
	opacity: 0;
	pointer-events: none;
  position: fixed;
  right: calc( 27 / 1250 * 100vw);
	top: calc( 5 / 1250 * 100vw);
	transition: opacity 0.15s 0.7s;
  width: calc( 170 / 1250 * 100vw * 1.25);
  z-index: 10;
}
.is-shooting .menu-icon:checked + label,
.is-shooting .menu-icon:not(:checked) + label,
.is-anchor .menu-icon:checked + label,
.is-anchor .menu-icon:not(:checked) + label,
.sub .menu-icon:checked + label,
.sub .menu-icon:not(:checked) + label {
	opacity: 1;
	pointer-events: auto;
}
.nav {
	animation: border-transform 7s linear infinite;
	background: url(../img/bg-body-wrap.jpg) center center;
	box-shadow: 0 8px 30px 0 rgba(255, 255, 255, .3);
	height: calc( 177 / 1250 * 100vw * 1.25);
	max-height: 177px;
	max-width: 170px;
	opacity: 0;
	overflow: hidden;
  position: fixed;
	right: calc( 27 / 1250 * 100vw);
	top: calc( 5 / 1250 * 100vw);
	transition: height 650ms 400ms ease, max-height 650ms 400ms ease, max-width 650ms 400ms ease, opacity 850ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 1100ms ease, width 650ms 400ms ease;
	width: calc( 170 / 1250 * 100vw * 1.25);
  z-index: 9;
}
.is-shooting .nav,
.is-anchor .nav,
.sub .nav {
	opacity: 0;
}
@keyframes border-transform {
	0%,
	100% {
		border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
	}
  14% {
		border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
	}
  28% {
		border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
	}
  42% {
		border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
	}
  56% {
		border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
	}
  70% {
		border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
	}
  84% {
		border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
	}
}
.menu-icon:checked ~ .nav {
  animation-play-state: paused;
	height: 200%;
	max-height: 200%;
	max-width: 200%;
	opacity: 1;
  right: 50%;
	top: 50%;
  transform: translate(50%, -50%);
	transition: height 750ms 300ms ease, max-height 750ms 300ms ease, max-width 750ms 300ms ease, opacity 850ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms cubic-bezier(0.23, 1, 0.32, 1), top 350ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms ease, width 750ms 300ms ease;
  width: 200%;
}
.nav ul {
	left: 0;
	list-style: none;
  position: absolute;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
	width: 100%;
	z-index: 6;
}
.nav ul li {
  list-style: none;
  opacity: 0;
	pointer-events: none;
	position: relative;
	text-align: center;
  transform: translateY(30px);
  transition: all 250ms linear;
	visibility: hidden;
	width: 100%;
}
.nav ul li:nth-child(1) {
  transition-delay: 200ms;
}
.nav ul li:nth-child(2) {
  transition-delay: 175ms;
}
.nav ul li:nth-child(3) {
  transition-delay: 150ms;
}
.nav ul li:nth-child(4) {
  transition-delay: 125ms;
}
.nav ul li:nth-child(5) {
  transition-delay: 100ms;
}
.nav ul li:nth-child(6) {
  transition-delay: 75ms;
}
.nav ul li:nth-child(7) {
  transition-delay: 50ms;
}
.nav ul li:nth-child(8) {
	transition-delay: 25ms;
  }
.nav ul li:nth-child(9) {
	transition-delay: 1ms;
  }
.menu-icon:checked ~ .nav  ul li {
  opacity: 1;
	pointer-events: auto;
  transform: translateY(0);
  transition: opacity 350ms ease, transform 250ms ease;
	visibility: visible;
}
.menu-icon:checked ~ .nav ul li:nth-child(1) {
  transition-delay: 800ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(2) {
  transition-delay: 840ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(3) {
  transition-delay: 880ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(4) {
  transition-delay: 920ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(5) {
  transition-delay: 960ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(6) {
  transition-delay: 1000ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(7) {
  transition-delay: 1040ms;
}
.menu-icon:checked ~ .nav ul li:nth-child(8) {
	transition-delay: 1080ms;
  }
.menu-icon:checked ~ .nav ul li:nth-child(9) {
	transition-delay: 1120ms;
  }
.menu-icon:checked ~ .nav ul li:nth-child(10) {
	transition-delay: 1160ms;
  }
.nav ul li a {
	color: #ed128d;
	display: inline-block;
	font-family: 'Noto Serif JP', 'sans-serif';
  font-size: 4.3vh;
	font-style: italic;
	line-height: 8vh;
	position: relative;
  /* text-transform: uppercase; */
  transition: all 250ms linear;
  font-weight: bold;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.nav ul li a:hover {
	font-size: 5.25vh;
}
.nav ul li.comingsoon {
	color: #cccccc;
	display: inline-block;
	font-family: 'Noto Serif JP', 'sans-serif';
  	font-size: 5vh;
	font-style: italic;
	line-height: 10vh;
	font-weight: bold;
}
.nav ul li a img {
	width: 70%;
}


/* トップ：PV */
#video {
	background: url(../img/bg-video.jpg) center center / cover;
	border-bottom: solid calc(30 / 1250 * 100vw) #f172ac;
	border-top: solid calc(30 / 1250 * 100vw) #a066ab;
	box-shadow: 0 calc(30 / 1250 * 100vw * -1) #00baf2, 0 calc(60 / 1250 * 100vw * -1) #f172ac, 0 calc(30 / 1250 * 100vw) #00baf2, 0 calc(60 / 1250 * 100vw) #a066ab, 0 calc(180 / 1250 * 100vw) calc(180 / 1250 * 100vw) calc(180 / 1250 * 100vw) #fff;
	margin: calc(60 / 1250 * 100vw) 0;
	padding-top: 5vh;
	width: 100%;
}
.tab-container {
	margin: 0 auto;
	max-width: 1126px;
	width: 80%;
}
.tab-container .tab-item {
	background-color: #ececec;
	border: 5px solid #0060af;
	border-radius: calc(51 / 28 * 1rem);
	box-sizing: border-box;
	color: #0060af;
	display: block;
	float: left;
	font-size: 3vw;
	font-weight: bold;
	line-height: calc(51 / 28);
	margin: 0 1% 1vh;
	/* margin: 1vh auto; */
	text-align: center;
	width: calc(96% / 2);
}
.tab-container input:checked + .tab-item {
	background-color: #0060af;
	color: #fff;
	cursor: default;
}
@media screen and (min-width: 560px) and (max-width: 959px) {
	.tab-container .tab-item {
		font-size: 1rem;
	}
}
@media screen and (min-width: 960px) {
	.tab-container .tab-item {
		font-size: 1.5rem;
	}
}
@media screen and (min-width: 600px) {
	.tab-container .tab-item {
		width: calc(94% / 3);
		margin: 1vh 1%;
	}

	.tab-container input:not(:checked) + .tab-item {
		transition: .5s all;
	}
	.tab-container input:not(:checked) + .tab-item:hover {
		transform: scale(1.05, 1.05);
	}
}
input[name='tab-item'] {
	display: none;
}
.tab-content {
	clear: both;
	display: none;
	margin: 1vh 0;
}
#tab1:checked ~ #tab1-content,
#tab2:checked ~ #tab2-content,
#tab3:checked ~ #tab3-content {
	display: block;
}
.video-movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.video-movie iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.loop-slide {
	bacground: #f172ac;
	display: flex;
	height: calc(200 / 1250 * 100vw);
	margin: 10vh 0 calc(5 / 1250 * 100vw * -1);
	max-height: 200px;
	overflow: hidden;
	width: 100vw;
}
.loop-slide img {
	height: 100%;
	width: auto;
}
.loop-slide img:first-child {
	animation: loopslide1 60s -30s linear infinite;
}
@keyframes loopslide1 {
  0% {
		transform: translateX(-99.5%);
  }
  to {
		transform: translateX(100%);
  }
}
.loop-slide img:last-child {
	animation: loopslide2 60s linear infinite;
}
@keyframes loopslide2 {
  0% {
		transform: translateX(-199.5%);
  }
  to {
		transform: translateX(0);
  }
}


/* トップ：ニュース・Twitter */
#news-col {
	border-bottom: solid calc(30 / 1250 * 100vw) #f172ac;
	box-shadow: 0 calc(30 / 1250 * 100vw) #00baf2, 0 calc(60 / 1250 * 100vw) #a066ab;
}

#news-tw {
	margin: 0 auto 5vh;
	max-width: 1278px;
	padding-top: 5vh;
	width: 80%;
}
#news-wrap,
#tw-wrap {
	border-radius: calc(29 / 762 * 100vw);
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
	margin-bottom: 5vh;
	padding-bottom: calc(40 / 762 * 100vw);
}
#news-wrap {
	background: #f172ac;
	margin-top: calc(38 / 762 * 100vw);
}
#tw-wrap {
	background: #00baf2;
}
.news-title,
.tw-title {
	pointer-events: none;
	position: relative;
}
.news-title {
	left: calc(33 / 762 * 100vw * -1);
	margin-bottom: calc((33 + 398) / 762 * 100vw * -1);
	top: calc(38 / 762 * 100vw * -1);
	width: calc(661 / 762 * 100vw);
}

.tw-title {
	left: calc(21 / 762 * 100vw * -1);
	margin-bottom: calc((51 + 401) / 762 * 100vw * -1);
	top: calc(51 / 762 * 100vw * -1);
	width: calc(654 / 762 * 100vw);
}
#news-wrap .news-box,
#tw-wrap .tw-box {
	height: calc(614 / 762 * 100vw);
	margin: 0 calc(40 / 762 * 100vw);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.news-box iframe,
.tw-box iframe {
	background: #fff;
	display: block;
	height: 100%;
	overflow: hidden;
	width:100%;
}
@media screen and (min-width: 600px) {
	#news-tw {
		display: flex;
	}
	#news-wrap,
	#tw-wrap {
		border-radius: calc(29 / 1250 * (80vw + 2vh));
		margin: calc(51 / 1250 * (80vw + 2vh)) 1vh 5vh;
		padding-bottom: calc(40 / 1250 * (80vw + 2vh));
		width: calc(50% - 2vh);;
	}
	.news-title {
		left: calc(33 / 610 * 100% * -1);
		margin-bottom: calc((33 + 398) / 610 * 100% * -1);
		top: calc(38 / 610 * 100% * -1);
		width: calc(661 / 610 * 100%);
	}
	.tw-title {
		left: calc(21 / 610 * 100% * -1);
		margin-bottom: calc((51 + 401) / 610 * 100% * -1);
		top: calc(51 / 610 * 100% * -1);
		width: calc(654 / 610 * 100%);
	}
	#news-wrap .news-box,
	#tw-wrap .tw-box {
		height: calc(614 / 1250 * (80vw + 2vh));
		margin: 0 calc(40 / 1250 * (80vw + 2vh));
		max-height: 614px;
	}
}


/* トップ：インフォメーション */
#info {
	margin: 5vh auto;
	text-align: center;
	width: 100%;
}
#info img {
	filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
}

/* SNS */
#top-sns-bnr {
	display: flex;
	justify-content: center;
	margin: 5vh auto;
	width: 80%;
}
#top-sns-bnr li {
	width: 30%;
	padding: 1vh calc(10% / 6);
}
#top-sns-bnr li img {
	max-width: 60px;
	border-radius: 50%;
}
@media screen and (min-width: 600px) {
	#top-sns-bnr {
		max-width: 600px;
	}
	#top-sns-bnr li img {
		max-width: 100px;
	}
}

/* バナー */
#top-bnr {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 5vh auto;
	width: 80%;
	max-width: 200px;
}
#top-bnr li {
	padding: 1vh 0;
}
@media screen and (min-width: 600px) {
	#top-bnr {
		width: 100%;
		max-width: 900px;
	}
	#top-bnr li {
		padding: 1vh;
		width: calc(100% / 3);
	}
	#top-bnr li img {
		max-width: 200px;
	}
}

/* ロゴ */
#btn-aikatsu-link {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 5vh auto;
	max-width: 1278px;
	width: 80%;
}
#btn-aikatsu-link li {
	padding: 1vh;
	width: 50%;
}
@media screen and (min-width: 600px) {
	#btn-aikatsu-link li {
		padding: 1vh;
		width: calc(100% / 3);
	}
	#btn-aikatsu-link li#btn-planet,
	#btn-aikatsu-link li#btn-aikatsu {
		margin: 0 calc(100% / 12);
	}
	#btn-aikatsu-link li img {
		max-width: 380px;
	}
}


/* 第2階層：ニュース */
#news .menu-frame {
	margin: 0 auto;
	max-width: 1250px;
	width: 80%;
}
#news .menu-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 1vh 1%;
}
#news .menu-head-l h3 {
	color: #0060af;
	font-size: 1.4rem;
}
#news .page-link {
	display: flex;
	justify-content: space-around;
	text-align: center;
}
#news .page-link li {
	font-size: 1.15rem;
	padding: 0 calc(12 / 1250 * 100vw);
}
#news .page-link a {
	color: #f172ac;
	display: block;
}
@media screen and (min-width: 600px) {
	#news .page-link {
		transition: .5s all;
	}
	#news .page-link a:hover {
		transform: scale(1.05, 1.05);
	}
}
#news .page-link p {
	color: #b9bdc5;
}
#news .menu-list {
	color: #0060af;
	margin: 1vh 1%;
	font-weight: bold;
}
#news .menu-list li {
	margin: 2vh 0;
}

#news .menu-title a {
	background-color: #fff;
	border: 5px solid #f172ac;
	border-radius: calc(15 / 1250 * 100vw);
	box-sizing: border-box;
	display: block;
	margin: 1vh 0;
	padding: 1em;
}
@media screen and (min-width: 600px) {
	#news .menu-title a {
		transition: .5s all;
	}
	#news .menu-title a:hover {
		transform: scale(1.05, 1.05);
	}
}

#news #record {
	margin: 1vh auto;
	max-width: 1250px;
	width: 90%;
}

#news .main-frame {
	background: url(../img/bg-content.png) repeat-x #fff;
	/* background-color: #fff; */
	border: 5px solid #f172ac;
	border-radius: calc(29 / 1250 * 100vw);
	box-sizing: border-box;
	display: block;
	margin: 1vh 0;
	overflow-wrap: break-word;
	padding: 1.5em;
	width: 100%;
	word-wrap: break-word;
}

@media screen and (min-width: 600px) {
#news #record {
	margin: 10vh auto;
	max-width: 1250px;
	width: 90%;
}

#news .main-frame {
	background-color: #fff;
	border: 5px solid #f172ac;
	border-radius: calc(29 / 1250 * 100vw);
	box-sizing: border-box;
	display: block;
	margin: 5vh 0;
	overflow-wrap: break-word;
	padding: 1.5em 3rem;
	width: 100%;
	word-wrap: break-word;
}
}



#news .main-head{
	color: #0060af;
	font-weight: bold;
}
#news .main-date {
	/* background: url(../img/border-main-date.png) bottom center / auto calc(15 / 1250 * 100vw) no-repeat; */
	font-size: 1.3rem;
	color: #fff;
	/* padding-bottom: calc(15 / 1250 * 100vw + 5vh); */
	/* text-align: center; */
}
#news .main-title {
	font-size: 1.4rem;
	line-height: 1.5;
	margin: 1.5vh 0 3vh;
	font-weight: bold;
	text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0-2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
}
#news .main-text {
	margin: 5vh 0;
	color: #0060af;
	line-height: 2.0;
}
#news .news-sns-bnr {
	display: flex;
	justify-content: center;
	margin: 5vh auto 0;
	/* width: 80%; */
	text-align: center;
}
#news .news-sns-bnr li {
	width: 30%;
	padding: 1vh calc(10% / 6);
}
#news .news-sns-bnr li img {
	max-width: 60px;
	border-radius: 50%;
}
@media screen and (min-width: 600px) {
	#news .main-title {
		font-size: 1.6rem;
		line-height: 1.8;
		margin: 1vh 0 3vh;
		font-weight: bold;
		text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0-2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
	}
	#news .news-sns-bnr {
		max-width: 300px;
	}
	#news .news-sns-bnr li img {
		max-width: 50px;
	}
}
#news .bt-frame {
	margin: 5vh 0;
}
#news .bt-frame .page-link {
	justify-content: center;
}

#news .main-text img {
	padding-bottom: 5vh;
}

@media screen and (min-width: 960px) {
#news .main-text img {
	width: auto !important;
	height: auto !important;
	padding-bottom: 5vh;
	max-width: 100%;
}
}
@media screen and (min-width: 560px) and (max-width: 959px) {
#news .main-text img {
	width: 100% !important;
	height: auto !important;
	padding-bottom: 5vh;
}
}

/* フッタ */
footer {
	background: url(../img/bg-footer.png) top center / calc(801 / 1250 * 100vw), linear-gradient(rgba(0, 96, 175, 0) 10%, rgba(0, 96, 175, 1) 90%);
	color: #fff;
	font-size: 0.8rem;
	margin-top: -5vh;
	padding-top: 10vh;
	position: relative;
	text-align: center;
	width: 100%;
}
#foot-main {
	margin: 0 auto;
	padding: 5vh 0;
	width: 80%;
}
#bnp img {
	filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
	max-width: 150px;
}
address {
	margin-top: 5vh;
	text-shadow: 1px 1px 0 #0060af, -1px 1px 0 #0060af, 1px -1px 0 #0060af, -1px -1px 0 #0060af;
}


/* ページトップ */

#page_top{
	width: 8vh;
	height: 8vh;
	position: fixed;
	right: 1vh;
	bottom: 3vh;
	/* z-index: 11; */
  }
  #page_top a{
	position: relative;
	display: block;
	text-decoration: none;
  }


/* キャラクター */
#character {
	background: url(../img/bg-c.jpg) center center;
	border-bottom: solid calc(30 / 1250 * 100vw) #f172ac;
	box-shadow: 0 calc(30 / 1250 * 100vw) #00baf2, 0 calc(60 / 1250 * 100vw) #a066ab;
	margin: calc(60 / 1250 * 100vw) 0;
	padding: 5vh 0;
	width: 100%;
}

.chara-list	{
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.chara-list li.img-b{
	width: calc(80% - 2vw);
	text-align: center;
}

.chara-list li{
	width: calc(50% - 2vw);
	text-align: center;
}

@media screen and (min-width: 600px) {
.chara-list	{
	max-width: 1183px;
	width: calc(1183 / 1250 * 100vw);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.chara-list li.img-b{
	width: calc(33% - 2vw);
	text-align: center;
}
.chara-list li{
	width: calc(33% - 2vw);
	text-align: center;
}
.chara-list .img-s img {
	width: 80%;
}
.spacer {
	width: 100%;
}
}
/* ストーリー */
#story {
	background: url(../img/story-lace.png) center top repeat-x, url(../img/story-lace.png) center bottom repeat-x, linear-gradient(180deg, rgba(224,248,255,1) 10%, rgba(0,186,242,1) 51%, rgba(187,239,255,1) 100%);
	border-bottom: solid calc(30 / 1250 * 100vw) #f172ac;
	box-shadow: 0 calc(30 / 1250 * 100vw) #00baf2, 0 calc(60 / 1250 * 100vw) #a066ab;
	margin: calc(60 / 1250 * 100vw) 0 0 0;
	padding: 5vh 0;
	width: 100%;
}

@media screen and (min-width: 600px) {
#story p img {
	max-width: 820px;
	margin: 0 auto;
}
}

/* スタッフ */
  #staff {
	background: url(../img/story-lace.png) center top repeat-x, url(../img/story-lace.png) center bottom repeat-x, linear-gradient(180deg, rgba(224,248,255,1) 10%, rgba(0,186,242,1) 51%, rgba(187,239,255,1) 100%);
	box-shadow: 0 calc(30 / 1250 * 100vw) #f172ac, 0 calc(60 / 1250 * 100vw) #00baf2, 0 calc(90 / 1250 * 100vw) #a066ab;
	margin:0 0 calc(60 / 1250 * 100vw) 0;
	padding: 5vh 0;
	width: 100%;
}
#staff-wrap {
	max-width: 1183px;
	width: calc(1183 / 1250 * 100vw);
	margin: 0 auto;
}

.list-staff {
	border-radius: calc(29 / 762 * 100vw);
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
	margin: 0 auto 5vh;
	padding-bottom: calc(40 / 762 * 100vw);
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.list-staff li {
	padding: 2vw;
	color: #0060af;
	font-size: 4vw;
	font-weight: bold;
}

.list-staff .list-title{
	width: 100%;
	padding: 3vh 0;
	text-align: center;
	font-weight: bold;
	font-size: 5vw;
}
.list-staff .list-col-l {
	width: 45%;
	padding: 1.5vh 0;
	text-align: right;
}
.list-staff .list-col-c {
	width: 1%;
	text-align: center;
}
.list-staff .list-col-r{
	width: 45%;
	padding: 1vh 0 1vh 2vw;
}

.list-staff .list-music{
	width: 100%;
	font-size: 5vw;
	padding: 0 0 1vh;
	text-align: center;
	font-weight: bold;
}

@media screen and (min-width: 600px) {
	#staff {
	margin-bottom: 150px;
	}

	#staff-wrap {
		max-width: 1183px;
		width: calc(1183 / 1250 * 100vw);
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.list-staff {
		margin: 0 auto 10px;
		padding: 0 0 40px;
		width: 80%;
	}

	/* .list-col {
		width: calc(50% - 2vw);
	}
	 */
	.list-staff li{
		padding: 8px;
		font-size: 1rem;
		box-sizing: border-box;
	}

	.list-staff .list-title{
		font-size: 1.5rem;
		padding: 30px 0 10px;
	}
	.list-staff .list-col-l {
		padding: 8px 0;
	}
	.list-staff .list-col-r{
		padding: 8px 0 8px 12px;
	}
	.list-staff .list-music{
		font-size: 1.2rem;
	}

}