:root {
	--pink: #ff5274;
	--cream: #fff8ec;
	--cyan: #24d7f4;
	--text: #585767;
}
* {
	box-sizing: border-box
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: 20px;
	    overflow-x: hidden;
}
body {
	margin: 0;
	color: var(--text);
	font-family: "M PLUS Rounded 1c", "Rounded M+ 2c", sans-serif;
	font-weight: 800;
	  line-height: 1.75;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
	background: #fff;
	overflow-x: hidden;
        max-width: 1920px;
    margin: 0 auto;
    -webkit-text-stroke: 5px rgb(255, 255, 255);
paint-order: stroke;
}
img {
	display: block;
	max-width: 100%
}
.banner-link {
display: contents;
  width: 100%;
  min-width: 0;
}

.banner-main,
.banner-main img {
  display: block;
  width: 100%;
  height: auto;
}
a {
	color: inherit;
	text-decoration: none
}
.container {
	width: min(1520px, calc(100% - 48px));
	margin: auto;
	position: relative
}
.container.wide {
	width: min(1720px, calc(100% - 36px))
}
.section {
	position: relative;
	text-align: center
}
.section p {
	font-size: 24px;
	line-height: 1.9;
	margin: 14px 0;
	font-feature-settings: "palt";
}

.logo_la{
	position: fixed;
	z-index: 10;
	width: 100%;
	max-width: 120px;
	    top: 1rem;
		    margin: 0 1rem;
}
.section p span {
	color: var(--pink)
}
.section-head {
	display: block;
	width: min(612px, 75%);
	margin: 0 auto 42px
}
.pc-only {
	display: block
}
.sp-only{
	display: none;
}
.loading {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: #fff8f4;
	display: grid;
	place-items: center;
	transition: .6s ease
}
.loading.is-hidden {
	opacity: 0;
	visibility: hidden
}
.loading span {
	width: 64px;
	height: 64px;
	background: var(--pink);
	position: relative;
	transform: rotate(45deg);
	animation: beat .8s infinite
}
.loading span:before, .loading span:after {
	content: "";
	position: absolute;
	width: 64px;
	height: 64px;
	background: inherit;
	border-radius: 50%
}
.loading span:before {
	left: -32px
}
.loading span:after {
	top: -32px
}
@keyframes beat {
	50% {
		transform: rotate(45deg) scale(.82)
	}
}

.hero {
	height: min(100vh, 900px);
	min-height: 910px;
	overflow: hidden;
	background: #66d3ff;
	position: relative
}
.hero-pc {
	position: absolute;
	inset: 0
}
.hero-bg, .hero-effect {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover
}
.hero-effect {
	pointer-events: none
}
.hero-effect-1 {
	/* animation: drift 9s ease-in-out infinite */
}
.hero-effect-2 {
	/* animation: drift 12s ease-in-out infinite reverse; */
        z-index: 2;
}
.hero-characters {
	position: absolute;
	inset: 0;
	max-width: 1600px;
	margin: auto
}
.fv-char {
	position: absolute;
	filter: drop-shadow(0 12px 8px rgba(55, 92, 148, .14));
	animation: float 4.7s ease-in-out infinite
}
.c1 {
    width: 20%;
    left: 22%;
    bottom: 24%;
    z-index: 2;
	animation-delay: -.2s
}
.c2 {
    width: 20%;
    right: 18%;
        bottom: 15%;
    z-index: 2;
	animation-delay: -1.8s
}
.c3 {
    width: 18%;
    right: 17%;
    bottom: 59%;
    z-index: 1;
	animation-delay: -.9s
}
.c4 {
    width: 16%;
    right: -1%;
    bottom: 6%;
	animation-delay: -2.3s
}
.c5 {
    width: 22%;
    left: 1%;
    bottom: 3%;
	animation-delay: -3.1s
}
.c6 {
    width: 63%;
    left: 14%;
    bottom: -8%;
	z-index: 0;
	animation-duration: 5.4s
}
.c7 {
width: 23%;
    right: 88%;
    top: -4%;
	animation-delay: -2.6s
}
.c8 {
width: 15%;
    right: -3%;
    top: 8%;
	animation-delay: -1.2s;
    z-index: 3;
}
.hero-copy {
	position: absolute;
	left: 50%;
	    top: 83%;
	z-index: 4;
	width: min(760px, 43vw);
	transform: translate(-50%, -50%);
	display: grid;
	justify-items: center;
	gap: 22px
}
.hero-title {
	width: 100%;
	animation: titlePop 1.2s cubic-bezier(.2, .9, .25, 1.3) both
}
.hero-period {
	width: 54%
}
.hero-sp {
	display: none;
	width: 100%
}
@keyframes float {
	0%, 100% {
		transform: translateY(0) rotate(-.4deg)
	}
	50% {
		transform: translateY(-18px) rotate(.5deg)
	}
}
@keyframes drift {
	50% {
		transform: translate3d(10px, -12px, 0) scale(1.01)
	}
}
@keyframes titlePop {
	from {
		opacity: 0;
		transform: scale(.65) translateY(30px)
	}
	to {
		opacity: 1;
		transform: none
	}
}
.pc-menu {
	position: fixed;
	right: 12px;
	top: 70%;
	z-index: 100;
	transform: translateY(-50%);
	width: 178px;
	filter: drop-shadow(0 8px 10px rgba(140, 70, 80, .17))
}
.pc-menu-links {
	display: flex;
	flex-direction: column
}
.pc-menu-links a {
	display: block
}
.pc-menu-links a img {
	width: 100%
}
.pc-menu-links a:last-child {
	margin-top: 18px
}
.sp-menu, .sp-menu-button {
	display: none
}
.section-1 {
    min-height: 380px;
    padding: 2rem 0;
	background: url('./assets/bg_section_1.png') center/cover no-repeat
}
.intro-wrap {
	    padding: 35px 0;
}
.section-1 .section-head {
	width: min(796px, 82%)
}
.section-2 {
	padding: 0;
	background: #fff3f5
}
.cloud-band {
	    position: relative;
    width: min(1920px, 100%);
    min-height: 600px;
    margin: auto;
    padding: 65px 130px;
    background: #fff9e1;
}
.cloud-band:before, .cloud-band:after {
	content: "";
	position: absolute;
    left: 0;
    right: 0;
	height: 70px;
	background: radial-gradient(circle at 35px 68px, #fff9e1 34px, transparent 35px) 0 0/70px 70px repeat-x;
	z-index: 1;
}
.cloud-band:before {
	top: -66px
}
.cloud-band:after {
	bottom: -66px;
	transform: rotate(180deg)
}
.section2-content {
	z-index: 2
}
.section2-left, .section2-right {
	position: absolute;
	z-index: 2;
}
.section2-left {
    left: 2%;
    bottom: 12%;
    width: 24%;
}
.section2-right {
	right: 7%;
	bottom: 6%;
	width: 11%
}
.pattern-area {
	position: relative;
	background: url('./assets/bg_dot.png') center top/960px auto repeat-y;
	padding: 80px 0;
	overflow: hidden;
        background-size: contain;
}
.item-section {
	padding: 70px 0 110px
}
.fashion-list {
	display: grid;
	gap: 36px;
        margin: -17rem;
            padding: 6rem;
}
.fashion-list picture:nth-child(odd) {

}
.fashion-list picture:nth-child(even) {

}
.fashion-list img {
	margin: auto;
	width: min(100%, 1720px);
	filter: drop-shadow(0 10px 0 rgba(255, 255, 255, .5))
}
.two-column {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 36px;
	max-width: 990px;
	margin: auto
}
.two-column img {
	width: 100%;
	transition: .35s
}
.two-column img:hover {
	transform: translateY(-12px) rotate(-1deg)
}
.single-card {
	display: block;
	width: min(100%, 990px);
	margin: auto
}
.single-card img {
	margin: auto
}
.side-char {
	position: absolute;
	z-index: 0;
	pointer-events: none
}
.sc1 {
    right: 0%;
    top: 39%;
    width: 22%;
}
.sc2 {
    left: -1%;
    top: 46%;
    width: 22%;
}
.sc3 {
    right: 0%;
    top: 67%;
    width: 22%;
}
.sc4 {
    left: 0%;
    top: 81%;
    width: 24%;
}
.sc5 {
right: 1%;
    bottom: 0%;
    width: 29%;
}
.copy-foot{
	margin: 0 auto;
	max-width: 300px;
}
#section4{
	    padding-top: 10rem;
}
.fashion-list, .section-head, .cards-pop, .single-card, .slider {
	position: relative;
	z-index: 2
}
.page-effects img {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	animation: float 6s ease-in-out infinite
}
.slider {
	max-width: 1320px;
	margin: auto;
	padding: 0 70px
}
.slides {
	position: relative;
	overflow: hidden
}
.slide {
	display: none
}
.slide.is-active {
	display: block;
	animation: slideIn .55s ease
}
.slide img {
	margin: auto;
	max-width: 990px;
}
.slider-arrow {
  position: absolute;
  top: 50%;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ff79a5;
  cursor: pointer;
  transform: translateY(-50%);
  z-index: 5;
}
.slider-arrow:before {
    content: "";
    position: absolute;
    inset: 8px;
    border: solid #fff;
    border-width: 0 7px 7px 0;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    top: 30%;
    left: 25%;

}
.slider-arrow.prev {
	left: 0
}
.slider-arrow.prev:before {
	transform: rotate(135deg);
    left: 33%;
}
.slider-arrow.next {
	right: 0
}
.slider-arrow.next:before {
	transform: rotate(-45deg)
}
.slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 24px
}
.slider-dots button {
	width: 32px;
	height: 27px;
	padding: 0;
	border: 0;
	background: transparent url('./assets/scroll_dot_off.png') center/contain no-repeat;
	cursor: pointer
}
.slider-dots button.is-active {
	background-image: url('./assets/scroll_dot_on.png')
}
@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(22px)
	}
	to {
		opacity: 1;
		transform: none
	}
}
.section-8 {
  min-height:1050px;
  padding:75px 0 90px;
  background:url('./assets/section_8_bg.png') center/cover no-repeat;
  overflow:visible;
  z-index:2;
}
.event-content {
	z-index: 2
}
.section-8 .section-head {
	width: min(575px, 75%);
	margin-bottom: 38px
}
.event-frame {
	position: relative;
	width: min(620px, 74%);
	margin: 36px auto 0;
	display: block;
}
.event-frame img {
	width: 100%
}
.event-frame strong {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #ffc966;
	font-size: 56px
}
.event-left {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: min(670px, 42vw);
}
.event-right {
	position: absolute;
	z-index: 2;
	right: max(10px, calc(50% - 760px));
	bottom: 100px;
	width: min(330px, 23vw)
}
.section-9 {
	padding: 105px 0 100px;
	background: url('./assets/section_9_bg.png') center/cover no-repeat;
	overflow: hidden
}
.section-9 .section-head {
	width: min(612px, 70%)
}
.game-image {
	width: min(100%, 930px);
	margin: 0 auto 35px;
	filter: drop-shadow(0 10px 12px rgba(70, 120, 150, .18))
}
.game-copy p {
	font-size: 20px;
	line-height: 1.75
}
.official-btn {
	display: inline-block;
	width: min(430px, 62%);
	margin-top: 22px;
	transition: .25s
}
.official-btn:hover {
	transform: translateY(-5px);
	filter: drop-shadow(0 8px 8px rgba(0, 196, 231, .25))
}
.s9-effect {
	position: absolute;
	width: 230px
}
.s9-effect.top {
	left: 0;
	top: 45px
}
.s9-effect.bottom {
	right: 0;
	bottom: 20px
}
.banners {
	padding: 65px 0;
	background: url('./assets/bg_dot.png') center/960px auto repeat
}
.banner-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	    max-width: 880px;
}
.banner-grid .banner-main {
	grid-column: 1/-1
}
.banner-grid img {
	width: 100%;
	transition: .25s
}
.banner-grid img:hover {
	transform: scale(1.015)
}
.back-top {
	display: block;
	background: #ffd5d0
}
.back-top img {
	width: 100%
}
.side-char {
  animation: sideCharFloat 4s ease-in-out infinite;
}

@keyframes sideCharFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }
}
.footer {
	padding: 35px 20px 45px;
	text-align: center;
	background: #ffd1c9;
	color: #8c685f;
	font-size: 13px;
	-webkit-text-stroke: 0;
}
.sns-links {
	display: flex;
	justify-content: center;
	gap: 18px;
	margin-bottom: 22px
}
.sns-links img {
	width: 80px;
}
.footer-links {
	display: flex;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 18px
}
.footer-links a:hover {
	text-decoration: underline
}
.reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity .85s ease, transform .85s cubic-bezier(.2, .75, .2, 1)
}
.reveal.is-visible {
	opacity: 1;
	transform: none
}
@media(max-width:1100px) {
	.pc-menu {
		display: none
	}
	.hero {
		height: auto;
		min-height: 0
	}
	.hero-pc {
		display: none
	}
	.hero-sp {
		display: block
	}
	.sp-menu-button {
		display: block;
		position: fixed;
		right: 0;
		top: 10px;
		z-index: 501;
		width: 70px;
		height: 63px;
		border: 0;
		background: none;
		padding: 0;
		cursor: pointer
	}
	.heart-shape {
		position: absolute;
		inset: 0;
		background: var(--pink);
		clip-path: path('M35 61 C28 54 5 39 5 20 C5 7 22 1 35 15 C48 1 65 7 65 20 C65 39 42 54 35 61 Z');
		filter: drop-shadow(0 3px 0 #fff)
	}
	.heart-shape i {
		position: absolute;
		left: 22px;
		width: 27px;
		height: 4px;
		background: white;
		border-radius: 10px;
		transition: .3s
	}
	.heart-shape i:nth-child(1) {
		top: 21px
	}
	.heart-shape i:nth-child(2) {
		top: 30px
	}
	.heart-shape i:nth-child(3) {
		top: 39px
	}
	.sp-menu-button.is-open i:nth-child(1) {
		top: 30px;
		transform: rotate(45deg)
	}
	.sp-menu-button.is-open i:nth-child(2) {
		opacity: 0
	}
	.sp-menu-button.is-open i:nth-child(3) {
		top: 30px;
		transform: rotate(-45deg)
	}
	.sp-menu {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 500;
		background: rgba(255, 130, 148, .6);
		backdrop-filter: blur(5px);
		opacity: 0;
		visibility: hidden;
		transition: .35s
	}
	.sp-menu.is-open {
		opacity: 1;
		visibility: visible
	}
	.sp-menu-inner {
		position: absolute;
		top: 70px;
		right: 12px;
		width: min(350px, calc(100% - 24px));
		padding: 74px 22px 24px;
		background: #fff9f3;
		border: 7px solid #ff9ba8;
		border-radius: 34px;
		box-shadow: inset 0 0 0 4px white, 0 10px 20px rgba(130, 50, 70, .18)
	}

	.sp-menu a {
		display: block;
		padding: 14px 8px;
		color: #ff4f6c;
		font-size: 20px;
		border-bottom: 2px dotted #ffc4cd
	}
	.sp-menu .game-link {
		margin-top: 17px;
		border: 4px solid #ff9aa8;
		border-radius: 25px;
		background: #fff;
		padding: 17px
	}
	.event-left {
		left: -170px
	}
	.event-right {
		right: -50px
	}
}
@media(max-width:1025px) {
	.intro-wrap .section-head img{
		margin: 0 auto;
	}
	.game-image{
		    padding-top: 7rem;
	}
	.slide img{
		        max-width: 350px;
        margin-bottom: 1rem;
	}
	.section-head{
		    margin: 0 auto 42px;
	}
	.logo_la{

		max-width: 90px;
	}
	.container, .container.wide {
		width: calc(100% - 28px)
	}
	.section p {
		font-size: 16px;
		line-height: 1.75
	}
	.section-head {
        width: min(110%, 510px);
        margin-bottom: -5rem;
	}
	.section-head img{
		    width: min(100%, 360px);
	}
	.img-m-l{
		margin-left: -1rem;
	}
	.pc-only {
		display: none
	}
	.sp-only{
		display: block;
	}
	.section-1 {
		min-height: 330px;
		padding: 0;
		background-position: center
	}
	.section-1 .section-head {
		        width: min(427px, 100%);
	}
	.cloud-band {
		min-height: 470px;
		padding: 45px 0 75px;

	}
	.cloud-band:before, .cloud-band:after {
		height: 38px;
		background-size: 38px 38px;
		background-image: radial-gradient(circle at 19px 37px, #fff9e1 18px, transparent 19px)
	}
	.cloud-band:before {
		top: -36px
	}
	.cloud-band:after {
		bottom: -36px
	}
	.section-2 {
		padding: 0
	}
	.section2-left {
		left: -13%;
		bottom: 1%;
		width: 53%
	}
	.section2-right {
		right: 1%;
		bottom: 57%;
		width: 23%
	}
	.section2-content {
		padding-bottom: 0
	}
	.pattern-area {
		padding: 32px 0;
	}
	.item-section {
		padding: 45px 0 70px
	}
	.fashion-list {
		gap: 24px;
		margin: -8rem;
	}
	.fashion-list picture:nth-child(n) {
		transform: none
	}
	.p-section2{
		        padding-top: 6rem;
	}
	.p-section1{
		padding-left: 2rem;
	}
	.fashion-list img {
        width: min(100%, 460px);
        /* text-align: center; */
        /* margin: 0 1rem auto; */
        padding-left: 15px;
	}
	.side-char {
		display: none
	}
	.two-column {
		gap: 10px;
		grid-template-columns: 1fr;
		max-width: 390px;
	}
	.slider {
		padding: 0 
	}
	.slider-arrow {
width: 60px;
        height: 60px;
		top: 97%;
	}
	.slider-arrow:before {
		border-width: 0 5px 5px 0;
		
	}
	.event-frame strong {
		font-size: 30px
	}
	.section-8 {
        min-height: 620px;
        padding: 40px 0;
	}
	.section-8 .section-head {
		width: min(330px, 82%)
	}
	.section-8 p {
		font-size: 14px
	}
	.event-frame {
		width: 90%;
		margin-top: 25px
	}
	.event-left {
        width: 52%;
        left: 0;
        bottom: 0;
        top: -5rem;

	}
	.event-right {
		display: none;
	}
	.section-9 {
		padding: 70px 0
	}
	.game-copy p {
		font-size: 14px
	}
	.s9-effect {
		width: 120px
	}
	.s9-effect.top {
		left: -36px
	}
	.s9-effect.bottom {
		right: -30px
	}
	.banner-grid {
		grid-template-columns: 1fr;
		gap: 10px
	}
	.banner-grid .banner-main {
		grid-column: auto
	}
	.banners {
		padding: 35px 0
	}
	.footer {
		font-size: 10px
	}
	.footer-links {
		gap: 8px 13px
	}
	.reveal {
		transform: translateY(24px)
	}
	  .sp_head_img_1,.sp_head_img_2,.sp_head_img_3,.sp_head_img_4,.sp_head_img_5{
	    display: block;
	        max-width: none;
        position: relative;
	    transform: translateX(-50%);
    height: auto;
  }
.sp_head_img_1{
	width: 110% !important;
	        left: 54%;
}
.sp_head_img_2{
	width: 130% !important;
        left: 24%;
        padding-bottom: 2rem;
}
.sp_head_img_3{
	width: 110% !important;
	        left: 55%;
        padding-bottom: 2rem;
			

}
.sp_head_img_4{
	width: 110% !important;
	        left: 35%;
}
.sp_head_img_5{
	width: 110% !important;
	        left: 50%;
}
}
@media (max-width: 767px) {
  .wide-image {
    display: block;
        width: 110% !important;
        max-width: none;
        position: relative;
        left: 43%;
    transform: translateX(-50%);
    height: auto;
  }


}
@media(prefers-reduced-motion:reduce) {
	html {
		scroll-behavior: auto
	}
	*, *:before, *:after {
		animation: none!important;
		transition: none!important
	}
	.reveal {
		opacity: 1;
		transform: none
	}
}