html {
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--header-h, 0px);
  overscroll-behavior-y: contain;
}

a {
	display: block;
}

.price {
	font-family: "kozuka-mincho-pro", serif;
	font-weight: 400;
	font-style: normal;
	font-size: clamp(10px, 3.4vw, 19px);
	letter-spacing: 0;
	color: #000;
	padding-bottom: clamp(6px, 2vw, 11px);
	display: flex;
	align-items: center;
}

.price a {
	font-family: "ryo-gothic-plusn", sans-serif;
	font-weight: 700;
	font-style: normal;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: clamp(14px, 11vw, 60px);
	aspect-ratio: 122.7862 / 42.0337;
	color: #000;
	border: 1px solid #000;
	margin-left: 2%;
	font-size: clamp(6px, 2.2vw, 12px);
	letter-spacing: 0;
	padding: 0 5vw;
}

@media (min-width: 550px)  {
	.price a {
		padding: 0 29px;
	}
}

[data-fade] {
	opacity: 0;
	transition: opacity 0.5s ease, transform 1s ease;
}

[data-fade="up"] {
	transform: translateY(30px);
}

[data-fade].in-view {
	opacity: 1;
	transform: none;
}

.lp-contents {
	position: relative;
	height: 100vh;
}

#index {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	max-width: 550px;
	width: 100%;
	margin-inline: auto;
	height: 100%;
	overflow: hidden;
	z-index: 1;
	opacity: 1;
  	transition: opacity 0.3s ease;
}

#index.hidden {
	opacity: 0;
	pointer-events: none;
}

.mv-title {
	width: 40%;
	position: absolute;
	top: 4%;
	left: 4%;
	z-index: 1;
}

.index-item {
	height: 50%;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: opacity 0.3s ease;
}

.index-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.index-item:hover  {
	opacity: 0.7;
}

.mv-btn {
	width: 24%;
	display: flex;
	justify-content: center;
	aspect-ratio: 259.2 / 68.9865;
	position: absolute;
	bottom: 3%;
	left: 50%;
	transform: translateX(-50%);
	font-family: "karmina", serif;
	font-weight: 700;
	font-style: normal;
	font-size: clamp(6px, 1.8vw, 10px);
	padding-top: 1%;
	color: #FFF;
	letter-spacing: 0;
}

.mv-btn::after {
	content:"";
	width: 100%;
	aspect-ratio: 259.2 / 68.9865;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.mv-btn.--girls::after {
	background: url(../images/mv-btn-pink.svg) center center / contain no-repeat;
}

.mv-btn.--boys::after {
	background: url(../images/mv-btn-olive.svg) center center / contain no-repeat;
}

.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.main-section-wrapper {
	height: 100dvh;
	overflow-y: auto;
	scroll-snap-type: y proximity;
	-webkit-overflow-scrolling: touch;
	margin-inline: auto;
	height: 100vh;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0.6s ease;
	overscroll-behavior: none;
}

.main-section-wrapper.show {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	overscroll-behavior: auto;
}

.main-section-wrapper.scrollable {
	height: auto;
	overflow: clip;
}

.main-section-title  {
	max-width: 550px;
	width: 100%;
	margin-inline: auto;
}

.main-section-title p {
	margin-top: 9%;
	font-family: "abril-display", serif;
	font-weight: 600;
	font-style: italic;
	font-size: clamp(18px, 5vw, 28px);
	padding-left: 4%;
	letter-spacing: 0;
}

.main-section-title span {
	font-family: "alana", sans-serif;
	font-weight: 700;
	font-style: normal;
	transform: translateY(-3px);
	display: inline-block;
}

.main-section-title.--girls p {
	color: #f77ca5;
}

.main-section-title.--boys p {
	color: #7F690A;
}

.main-section-title.--boys span {
	transform: none;
}

.movie {
	max-width: 550px;
	width: 100%;
	margin-inline: auto;
	text-align: center;
}
.movie video {
	margin-top: 5%;
	width: 90%;
}

.girls-setup1 {
	max-width: 550px;
	width: 100%;
	margin-inline: auto;
}

.girls-setup1-inner {
	margin-top: 11%;
	display: flex;
}

.girls-slide1 {
	width: 60%;
}

.girls-setup1-right {
	width: 45%;
}

.girls-setup1-decoration {
	aspect-ratio: 274.3834 / 508.4989;
	width: 59%;
	margin-left: auto;
	margin-right: 18%;
	position: relative;
}

.girls-setup1-decoration img {
	position: absolute;
}

@keyframes kakukaku1 {
	0% {
		rotate: 6deg;
	}
	50% {
		rotate: -6deg;
	}
}

@keyframes kakukaku2 {
	0% {
		rotate: -6deg;
	}
	50% {
		rotate: 6deg;
	}
}

.girls-setup1-decoration img:first-child {
	width: 38%;
	top: 3%;
	right: 0;
	transform: rotate(18deg);
	animation: kakukaku1 0.8s step-end 0s infinite;
}

.girls-setup1-decoration img:nth-child(2) {
	width: 33%;
	top: 44%;
	right: 52%;
	animation: kakukaku2 0.8s step-end 0s infinite;
}

.girls-setup1-decoration img:nth-child(3) {
	width: 38%;
	bottom: 0;
	left: 0;
	transform: rotate(-37deg);
	animation: kakukaku2 0.8s step-end 0s infinite;
}

.girls-setup1 ul {
	margin-top: 15%;
	margin-right: 16%;
}

.girls-setup1 .price {
	display: flex;
	flex-direction: column;
	gap: 1.8vw;
	gap: clamp(6px, 1.8vw, 10px);
	width: fit-content;
	align-items: end;
	margin-left: auto;
}

.girls-setup2 {
	display: flex;
	max-width: 550px;
	width: 100%;
	margin-inline: auto;
}

.girls-setup2-decoration {
	width: 42%;
	aspect-ratio: 221.4796 / 303.013;
	position: relative;
}

.girls-setup2-decoration img {
	position: absolute;
}

.girls-setup2-decoration img:first-child {
	width: 19%;
	top: 12%;
	right: 23%;
	animation: kakukaku1 0.8s step-end 0s infinite;
}

.girls-setup2-decoration img:nth-child(2) {
	width: 18%;
	top: 25%;
	left: 28%;
	transform: rotate(-45deg);
	animation: kakukaku2 0.8s step-end 0s infinite;
}

.girls-setup2-decoration img:nth-child(3) {
	width: 23%;
	top: 37%;
	right: 25%;
	animation: kakukaku1 0.8s step-end 0s infinite;
}

.girls-slide2 {
	width: 58%;
}

.girls-cardigan {
	height: 760px;
}

@media (max-width: 550px) {
	.girls-cardigan {
		height: 140vw;
	}
}

.girls-cardigan-body {
	max-height: 760px;
	height: 100%;
	position: relative;
}

@media (max-width: 550px) {
	.girls-cardigan-body  {
		max-height: none;
	}
}

.girls-cardigan-text {
	max-width: 550px;
	width: 100%;
	margin-inline: auto;
	font-family: "karmina", serif;
	font-weight: 700;
	font-style: normal;
	color: #000;
	font-size: clamp(10px, 5vw, 30px);
	padding-left: 8%;
	letter-spacing: 0;
	transform: translateY(58px);
}

.girls-cardigan-text span {
	display: block;
	margin-left: 15%;
	margin-top: 1%;
}

.girls-cardigan-text i.char {
	display: inline-block;
	opacity: 0;
	transition: opacity .6s ease;
	font-style: normal;
	white-space: break-spaces;
}

.girls-cardigan-text.is-visible i.char {
	opacity: 1;
}

.girls-cardigan-slide {
	margin-top: -2%;
	height: 100%;
	position: relative;
	overflow: hidden;
	touch-action: pan-y;
	overscroll-behavior: contain;
}

.girls-cardigan-slide .swiper-slide,
.girls-cardigan-slide .swiper-slide img{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: opacity, transform;
}

.girls-cardigan-slide img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.girls-cardigan-slide1-inner,
.girls-cardigan-slide2-inner {
	max-width: 550px;
	width: 100%;
	margin-inline: auto;
}

.girls-cardigan-slide1-image,
.girls-cardigan-slide2-image {
	margin-top: 22%;
}


.girls-cardigan-cookies {
	max-width: 550px;
	width: 100%;
	aspect-ratio: 1078.6949 / 285.9031;
	margin-inline: auto;
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 550px) {
	.girls-cardigan-cookies {
		bottom: 12vw;
	}
}

.girls-cardigan-body .cookie1 {
	width: 12%;
	aspect-ratio: 128.2866 / 133.7025;
	position: absolute;
	top: 0;
	left: 8%;
	animation: kakukaku1 0.8s step-end 0s infinite;
}

.girls-cardigan-body .cookie2 {
	width: 12%;
	aspect-ratio: 125.5384 / 121.9126;
	position: absolute;
	bottom: 0;
	left: 2%;
	animation: kakukaku2 0.8s step-end 0s infinite;
}

.girls-cardigan-slide1 a,
.girls-cardigan-slide2 a {
	width: 76%;
	margin-left: auto;
	margin-right: 0;
}

.girls-cardigan-body-price {
	max-width: 550px;
	width: 100%;
	margin-inline: auto;
	position: absolute;
    bottom: 8%;
    left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 550px) {
	.girls-cardigan-body-price {
		bottom: 5vw;
	}
}

.girls-cardigan-body .price {
	padding-right: 6%;
	justify-content: end;
}

.girls-leggings {
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
}

.girls-leggings-slide-wrap {
	margin-top: 7%;
	position: relative;
	width: 88%;
	margin-inline: auto;
}

.girls-leggings-slide-wrap::after {
	content:"";
	width: 100%;
	height: 100%;
	background: url(../images/girls-cardigan-frame.svg) center center / contain no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%) scale(1.08);
}

.girls-leggings ul {
	margin-top: 8%;
	margin-right: 26%;
}

.girls-leggings .price {
	text-align: right;
	margin-bottom: 4%;
	justify-content: end;
}

.girls-leggings .price:last-child {
	margin-bottom: 0;
}

.girls-jacket-dress {
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
	position: sticky;
	top: -427px;
}

@media (max-width: 550px) {
	.girls-jacket-dress {
		top: -77vw;
	}
}

.girls-jacket-dress-slide {
	position: relative;
	margin: 14% auto; 
	overflow-x: clip;
}

.girls-jacket-dress-slide1 {
	position: sticky;
	top: 4%;
	z-index: 1;
	width: 71%;
	margin-inline: auto;
}

.girls-jacket-dress-slide2 {
	position: sticky;
	top: 4%;
	z-index: 2;
	width: 71%;
	margin-inline: auto;
}

.girls-jacket-dress-slide2-top {
	height: 2px;
}

.girls-jacket-dress.fixed {
	position: fixed;
	left: 0;
	top: -50%;
}

.girls-jacket-dress-slide2 a {
	position: relative;
	z-index: 3;
}

.girls-jacket-dress-slide2::after {
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	top: 0;
	left: 0;background: #fff;
	z-index: 2;
}

.girls-jacket-dress ul {
	margin-top: 6%;
	width: 76%;
	position: relative;
    z-index: 3;
	padding-bottom: 2%;
}

.girls-jacket-dress .price {
	justify-content: end;
}

.girls-body-sec {
	background: #FFF;
	position: relative;
	z-index: 4;
}

.girls-dress {
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
	position: relative;
	z-index: 4;
	background: #FFF;
}

.girls-dress-image {
	padding-top: 26%;
}

.girls-dress .price {
	margin-top: 4%;
	margin-left: 6%;
}

.girls-puffy-blouson {
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
	position: relative;
	z-index: 4;
	background: #FFF;
	padding-top: 7%;
}

.girls-puffy-blouson-image {
	width: 84%;
	margin-left: auto;
}

.girls-puffy-blouson .price {
	margin-top: 3%;
	justify-content: end;
	padding-right: 9%;
}

.girls-t-shirt {
	position: relative;
	z-index: 4;
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
	background: #FFF;
	padding-top: 10%;
}

.girls-t-shirt-image1 {
	width: 72%;
}

.girls-t-shirt-bottom {
	margin-top: 5%;
	margin-left: 5%;
	margin-right: 8%;
	display: flex;
}

.girls-t-shirt-bottom .price {
	margin-top: 16%;
	width: 35%;
	display: flex;
	flex-direction: column;
	align-items: baseline;
	gap: 2vw;
}

.girls-t-shirt-image2 {
	width: 65%;
}

.girls-tulle-dress {
	position: sticky;
	top: -1182px;
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
	background: #FFF;
}

@media (max-width: 550px)  {
	.girls-tulle-dress {
		top: -214vw;
	}
}

.girls-tulle-dress-slide {
	padding-top: 14%;
}

.girls-tulle-dress1 {
	position: sticky;
	top: 4%;
	width: 73%;
	margin-inline: auto;
}

.girls-tulle-dress2 {
	position: sticky;
	top: 4%;
	width: 73%;
	margin-inline: auto;
}

.girls-tulle-dress2 a {
	position: relative;
	z-index: 2;
}

.girls-tulle-dress2::after {
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	top: 0;
	left: 0;background: #fff;
	z-index: 1;
}

.girls-tulle-dress3 {
	position: sticky;
	top: 4%;
	width: 73%;
	margin-inline: auto;
}

.girls-tulle-dress3 a {
	position: relative;
	z-index: 3;
}

.girls-tulle-dress3::after {
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	top: 0;
	left: 0;background: #fff;
	z-index: 2;
}

.girls-tulle-dress ul {
	margin-top: 5%;
	margin-right: 6%;
	position: relative;
    z-index: 3;
	padding-bottom: 2%;
}

.girls-tulle-dress .price {
	justify-content: end;
}

.boys-puffy-blouson-pants {
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
}

.boys-puffy-blouson-pants-inner {
	width: 86%;
	margin-top: 10%;
	margin-inline: auto;
}

.boys-puffy-blouson-pants .price {
	margin-top: 5%;
	padding-right: 2%;
	display: flex;
	flex-direction: column;
	gap: clamp(6px, 2vw, 9px);
	align-items: end;
}

.boys-puffy-blouson-image {
	margin-top: 5%;
	display: flex;
}

.boys-puffy-blouson-image a {
	width: 61%;
}

.boys-puffy-blouson-image-decoration {
	margin-top: 8%;
	width: 31%;
	margin-left: auto;
	aspect-ratio: 308.5167 / 385.2753;
	position: relative;
}

.boys-puffy-blouson-image-decoration img {
	position: absolute;
}

.boys-puffy-blouson-image-decoration img:first-child {
	width: 40%;
	top: 0;
	right: 15%;
	animation: kakukaku1 0.8s step-end 0s infinite;
}

.boys-puffy-blouson-image-decoration img:nth-child(2) {
	width: 50%;
	top: 38%;
	right: -2%;
}

.boys-puffy-blouson-image-decoration img:nth-child(3) {
	width: 39%;
	bottom: 26%;
	left: 2%;
	animation: kakukaku2 0.8s step-end 0s infinite;
}

.boys-long-pants {
	margin-top: 4%;
	display: flex;
	align-items: end;
	align-items: stretch;
}

.boys-long-pants-left {
	flex: 0 0 30%;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	position: relative;
	margin-bottom: 3%;
}

.boys-long-pants-decoration img {
	position: absolute;
}

.boys-long-pants-decoration img:first-child {
	width: 50%;
	top: 14%;
	left: 25%;
	animation: kakukaku1 0.8s step-end 0s infinite;
}

.boys-long-pants-decoration img:nth-child(2) {
	width: 30%;
	top: 28%;
	left: 11%;
	animation: kakukaku2 0.8s step-end 0s infinite;
}

.boys-long-pants .price {
	text-align: right;
	padding-right: 20%;
}

.boys-long-pants-image {
	width: 70%;
}

.boys-shirt-pants {
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
	padding-left: 4%;
}

.boys-shirt-pants1 {
	margin-top: 8%;
	display: flex;
}

.boys-shirt-pants1-image {
	width: 64%;
}

.boys-shirt-pants1 .price {
	margin-top: 27%;
	width: 36%;
	padding-right: 15%;
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: clamp(6px, 2vw, 9px);
}

.boys-shirt-pants2 {
	margin-top: -35%;
	position: relative;
}

.boys-shirt-pants2 .price {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: clamp(6px, 2vw, 9px);
	width: fit-content;
	margin-bottom: 5%;
	margin-left: 7%;
}

@media (min-width: 550px) {
	.boys-shirt-pants2 .price {
		margin-left: 4%;
	}
}

.boys-shirt-pants2-image {
	width: 60%;
	margin-left: auto;
}

.boys-vest {
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
}

.boys-vest .price {
	margin-top: 2%;
	justify-content: center;
}

.boys-vest-slide {
	margin-top: 12%;
	aspect-ratio: 1080 / 1301.1011;
}

.boys-vest-slide a {
	height: 100%;
}

.boys-vest-slide img {
	height: 100%;
	object-fit: cover;
}

.boys-t-shirt {
	position: sticky;
	top: -947px;
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
}

@media (max-width: 550px) {
	.boys-t-shirt {
		top: -169vw;
	}
}

.boys-t-shirt-inner {
	margin-top: 12%;
	margin-inline: 9%;
}

.boys-t-shirt-slide {
	margin-top: 10%;
}

.boys-t-shirt-slide1 {
	position: sticky;
	top: 6%;
}

.boys-t-shirt-slide2 {
	position: sticky;
	top: 6%;
}

.boys-t-shirt-slide2 a {
	position: relative;
	z-index: 2;
}

.boys-t-shirt-slide2::after {
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	top: 0;
	left: 0;background: #fff;
	z-index: 1;
}

.boys-t-shirt-slide3 {
	position: sticky;
	top: 6%;
	z-index: 3;
}

.boys-t-shirt-slide3 a {
	position: relative;
	z-index: 3;
}

.boys-t-shirt-slide3::after {
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	top: 0;
	left: 0;background: #fff;
	z-index: 2;
}

.boys-t-shirt ul {
	margin-top: 5%;
	margin-right: 20%;
	position: relative;
    z-index: 3;
	padding-bottom: 2%;
}

.boys-t-shirt .price {
	justify-content: end;
}

.boys-body-sec,
.boys-body-sec2 {
	position: relative;
	z-index: 4;
	background: #FFF;
}

.boys-sweat {
	position: relative;
	background: #FFF;
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
	padding-top: 16%;
}

.boys-sweat-inner {
	display: flex;
}

.boys-sweat ul {
	width: 38%;
	margin-top: 61%;
	padding-right: 3%;
}

.boys-sweat .price {
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: clamp(6px, 2vw, 9px);
}

.boys-sweat-image {
	width: 62%;
}

.boys-blouson {
	position: relative;
	background: #FFF;
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
}

.boys-blouson-slide {
	padding-top: 22%;
}

.boys-blouson-slide img {
	width: 100%;
	aspect-ratio: 2302 / 2393;
}

.boys-blouson .price {
	margin-top: 5%;
	justify-content: end;
	padding-right: 7%;
}

.boys-t-shirt-pants {
	position: sticky;
	top: -590px;
	background: #FFF;
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
}

@media (max-width: 550px) {
	.boys-t-shirt-pants {
		top: -103vw;
	}
}

.boys-t-shirt-pants-slide {
	padding-top: 11%;
	width: 76%;
	margin-inline: auto;
}

.boys-t-shirt-pants-slide1 {
	position: sticky;
	top: 5%;
}

.boys-t-shirt-pants-slide2 {
	position: sticky;
	top: 5%;
}

.boys-t-shirt-pants-slide2 a {
	position: relative;
	z-index: 2;
}

.boys-t-shirt-pants-slide2::after {
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	top: 0;
	left: 0;background: #fff;
	z-index: 1;
}

.boys-body-sec2-bottom {
	position: relative;
	z-index: 6;
	background: #FFF;
	max-width: 550px;
	width: 100%;
	margin-inline: auto;
}

.boys-t-shirt-pants2 {
	padding-top: 47%;
	position: relative;
	background: #FFF;
}

.boys-t-shirt-pants-image img {
	width: 104%;
}

.boys-t-shirt-pants2 ul {
	margin-top: 4%;
	margin-right: 30%;
}

.boys-t-shirt-pants2 .price {
	justify-content: end;
}

.boys-t-shirt2 {
	position: relative;
	background: #FFF;
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
	overflow: hidden;
}

.boys-t-shirt2-inner {
	padding-top: 13%;
}

.boys-t-shirt2-image {
	width: 106%;
	margin-left: -3%;
	aspect-ratio: 1161.8526 / 818.3437;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.boys-t-shirt2-image a {
	height: 100%;
}

.boys-t-shirt2-image a img {
	width: 100%;
	height: 100%;
}

.boys-t-shirt2.show .boys-t-shirt2-inner .boys-t-shirt2-image {
	opacity: 1;
	animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1);
	height: 100%;
}

@keyframes img-wrap {
	0% {
		clip-path: circle(0 at 50% 50%);
		-webkit-clip-path: circle(0 at 50% 50%);
	}

	10% {
		clip-path: circle(0 at 50% 50%);
		-webkit-clip-path: circle(0 at 50% 50%);
	}

	100% {
		clip-path: circle(100% at 50% 50%);
		-webkit-clip-path: circle(100% at 50% 50%);
	}
}

.boys-t-shirt2 .price {
	margin-top: 3%;
	justify-content: center;
}

.girls-bottom-sec {
	position: sticky;
	z-index: 6;
	top: 0;
	height: 100vh;
	background: #FFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
}

.boys-bottom-sec {
	margin-inline: auto;
	max-width: 550px;
	width: 100%;
	padding-top: 1%;
	padding-bottom: 10%;
	background: #FFF;
    position: relative;
    z-index: 4;
}

.bottom-sec-inner {
	width: 100%;
}

.girls-bottom-sec .more-btn a {
	margin-top: 29%;
}

.boys-bottom-sec .more-btn a {
	margin-top: 13%;
}

.more-btn a {
	width: 48%;
	aspect-ratio: 522.3789 / 82.4809;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	margin-inline: auto;
	font-family: "karmina", serif;
	font-weight: 700;
	font-style: normal;
	text-align: center;
	font-size: clamp(10px, 3vw, 20px);
	color: #FFF;
	letter-spacing: 0;
}

.more-btn span {
	font-family: "alana", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: clamp(10px, 4.5vw, 24px);
}

.more-btn.--girls a {
	background: #f77ca5;
}

.more-btn.--boys a {
	background: #7F690A;
}

.pagetop {
	margin-top: 5%;
}

.pagetop a {
	width: 22%;
	font-family: "karmina", serif;
	font-weight: 700;
	font-style: normal;
	font-size: clamp(10px, 4vw, 20px);
	letter-spacing: 0;
	margin-inline: auto;
	position: relative;
	aspect-ratio: 1 / 1;
	color: #FFF;
	display: flex;
	gap: 1vw;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.pagetop a span {
	font-family: "BIZ UDGothic", sans-serif;
	font-weight: 700;
	font-size: clamp(6px, 1.6vw, 9px);
}

.pagetop a::after {
	content:"";
	width: 100%;
	height: 100%;
	background: url(../images/page-top.png) center center / contain no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: -1;
}

.sns-items {
	display: flex;
	width: 50%;
	justify-content: space-between;
	margin-top: 8%;
	margin-inline: auto;
}

.sns-items li {
	width: 16%;
}

.sns-items li:last-child {
	width: 18%;
}

.l-scroll_wrapper {
	overflow: hidden;
}

.l-scroll_txt {
	margin-bottom: 30vh;
}

.l-scroll_img_wrapper {
	position: relative;
	height: var(--commonHeight);
	margin-bottom: 30vh;
}

.l-scroll_img_wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	object-fit: cover;
}

.l-scroll_end {
	margin-bottom: 10rem;
}

.js-clip {
	-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}