@import "../../assets/css/article.css";

.subMagContents {
	padding-top: 0;
}

.bg-video {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	object-fit: cover;
	z-index: 1;
	display: block;
}

.video-overlay {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	margin-top: -100vh;
	z-index: 2;
	background-image: conic-gradient(rgba(0, 0, 0, 0.5) 90deg,
			transparent 90deg 180deg,
			rgba(0, 0, 0, 0.5) 180deg 270deg,
			transparent 270deg);
	background-size: 4px 4px;
}

.horizontal-container {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 3;
	margin-top: -100vh;
}

.panel {
	width: 100%;
	height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: transparent;
	position: relative;
}

.panel-content {
	text-align: center;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#panel01 {
	background: url("../img/panel01-img.jpg") no-repeat center center;
	background-size: cover;
	overflow: clip;
}

#panel01 h3 {
	width: 36%;
	max-width: 450px;
	margin-left: 2%;
	margin-right: auto;
	opacity: 0;
}

#panel01 .visible h3 {
	animation: slideInOvershoot 0.7s ease-out forwards;
}

#panel01 .bottom-text {
	bottom: 0;
	right: 0;
	width: 100%;
	height: auto;
}

#panel01 .bottom-text:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 150%;
	background: #6F52D6;
	top: 3.3vw;
	right: 0;
	transform: skewY(-6deg);
}

#panel01 .bottom-text .panel-text {
	width: 51%;
	max-width: 646px;
	position: relative;
	margin-bottom: 1.5%;
}

#panel01 .bottom-text>.flexBlock {
	padding: 0 30px 20px 0;
	position: relative;
	flex-direction: column;
	align-items: flex-end;
}

#panel01 .bottom-text>.flexBlock .button {
	width: calc(100% - 30px);
	max-width: 335px;
}

#panel02 .title-fadein {
	width: 60%;
	max-width: 697px;
}

#panel02 .title-fadein>img {
	transition: 0.8s ease-out;
}

#panel02 .title-fadein>img:nth-child(1) {
	opacity: 0;
	transform: scale(2);
	filter: blur(10px);
}

#panel02 .title-fadein>img:nth-child(2) {
	opacity: 0;
	transform: translateX(-50vw);
}

#panel02 .visible .title-fadein>img:nth-child(1) {
	opacity: 1;
	transform: scale(1);
	filter: blur(0px);
}

#panel02 .visible .title-fadein>img:nth-child(2) {
	opacity: 1;
	transform: translateX(0vw);
}

.skew-area::before {
	content: '';
	position: absolute;
	width: 110%;
	height: 100%;
	top: 0;
	left: -5%;
	transform: skewX(-5deg);
}

#panel03::before {
	background: #6F52D6;
}

#panel05::before {
	background: #000000;
}

#panel07::before,
#panel15::before {
	background: #6F52D6;
	transform: skewX(-7deg);
}

#panel11::before,
#panel12::before {
	background: #000000;
}

#panel13::before {
	background: rgba(0, 0, 0, 0.7);
}

.skew-area>.panel-content {
	position: relative;
	padding: 0 50px;
}

#panel03>.panel-content h3 {
	width: 283px;
	margin-bottom: 10%;
}

#panel03>.panel-content .panel-image {
	width: 280px;
}

.button {
	transition: transform 0.15s ease-out;
}

.fade-item.circle-text-anim h3 {
	transition: 0.3s ease-out;
	opacity: 0;
	transform: translateY(-50px);
}

.fade-item.circle-text-anim .panel-image {
	transition: 0.7s linear(0, 0.5 15%, 0.9 30%, 1.1 45%, 0.95 60%, 1.03 75%, 0.99 85%, 1);
	opacity: 0;
	transform: scale(0.5);
}

.visible.fade-item.circle-text-anim h3 {
	opacity: 1;
	transform: translateY(0px);
}

.visible.fade-item.circle-text-anim .panel-image {
	opacity: 1;
	transform: scale(1);
}

.grey-bg {
	background: rgba(0, 0, 0, 0.7);
}

#panel04 {
	z-index: -1;
	margin-left: -5vw;
	padding-left: 5vw;
	padding-right: 5vw;
	margin-right: -5vw;
	width: 70vw;
	max-width: 1100px;
}

#panel04 .text-overlay {
	width: 55%;
	top: 0;
	height: 100%;
	left: 3%;
	display: flex;
	align-items: center;
	opacity: 0;
}

#panel04 .visible .text-overlay {
	animation: slideInOvershoot 0.7s ease-out forwards;
}

#panel04 .imgs.flexBlock {
	width: 87%;
	flex-direction: column;
}

#panel04 .imgs.flexBlock>div {
	width: 78%;
	max-width: 600px;
	position: relative;
	display: block;
}

#panel04 .imgs.flexBlock>div:nth-child(2) {
	margin-left: auto;
	margin-top: -5%;
}

#panel04 h3.abs {
	width: 211px;
	right: 12%;
	top: 17%;
	opacity: 0;
	transform: scale(2);
	filter: blur(10px);
	transition: 0.8s ease-out;
}

#panel04 h3.abs.visible {
	opacity: 1;
	transform: scale(1);
	filter: blur(0px);
}

#panel05 h3 {
	width: 167px;
}

#panel05 .panel-image {
	width: 100px;
	margin-top: 25px;
}

#panel06 {
	width: 220vw;
	z-index: -1;
	margin-left: -5vw;
	padding-left: 10vw;
	padding-right: 10vw;
	margin-right: -5vw;
	max-width: 2800px;
}

#panel06 .panel-content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	align-self: center;
	min-height: inherit;
	height: max-content;
	min-height: auto;
}

#panel06 .flexBlock.fade-item:nth-child(1) {
	width: 93%;
	margin-right: 2%;
}

#panel06 .flexBlock.fade-item:nth-child(1)>.rel:nth-child(1) {
	width: 60%;
}

#panel06 .flexBlock.fade-item:nth-child(1)>.rel:nth-child(1)>:nth-child(1) {
	width: 78%;
	position: relative;
}

#panel06 .flexBlock.fade-item:nth-child(1)>.rel:nth-child(1)>:nth-child(1)>.bubble-anim {
	width: 42%;
	left: 7.5%;
	top: 3%;
}

#panel06 .flexBlock.fade-item:nth-child(1)>.rel:nth-child(1)>:nth-child(2) {
	width: 49%;
	position: absolute;
	right: 0;
	bottom: 0;
}

#panel06 .flexBlock.fade-item:nth-child(1)>.rel:nth-child(1)>:nth-child(2)>.bubble-anim {
	width: 34%;
	top: 5%;
	right: 5%;
	max-width: 127px;
}

#panel06 .flexBlock.fade-item:nth-child(1)>.rel:nth-child(2) {
	width: 38%;
	position: relative;
}

#panel06 .flexBlock.fade-item:nth-child(1)>.rel:nth-child(2) .bubble-anim01 {
	width: 69%;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 43.5%;
}

#panel06 .flexBlock.fade-item:nth-child(1)>.rel:nth-child(2) .bubble-anim02 {
	width: 85%;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 87%;
}

#panel06 .flexBlock.fade-item:nth-child(2) {
	width: 105%;
	align-items: center;
}

#panel06 .flexBlock.fade-item:nth-child(2)>.rel:nth-child(1) {
	width: 66.5%;
	height: 100%;
	position: relative;
}

#panel06 .flexBlock.fade-item:nth-child(2)>.rel:nth-child(1)>:nth-child(1) {
	width: 61%;
}

#panel06 .flexBlock.fade-item:nth-child(2)>.rel:nth-child(1)>:nth-child(1) .bubble-anim {
	width: 57%;
	z-index: 9;
	left: 0;
	top: 90%;
}

#panel06 .flexBlock.fade-item:nth-child(2)>.rel:nth-child(1)>:nth-child(2) .bubbles {
	width: 60%;
	right: 0;
	bottom: 78%;
}

#panel06 .flexBlock.fade-item:nth-child(2)>.rel:nth-child(1)>:nth-child(2) .bubbles>.bubble-anim:nth-child(1) {
	margin-bottom: 15px;
}

#panel06 .flexBlock.fade-item:nth-child(2)>.rel:nth-child(1)>:nth-child(2) {
	width: 61%;
	position: absolute;
	right: 0;
	bottom: 0;
}

#panel06 .flexBlock.fade-item:nth-child(2)>.rel:nth-child(2) {
	width: 33.5%;
	position: relative;
}

#panel06 .flexBlock.fade-item:nth-child(2)>.rel:nth-child(2) .bubble-anim {
	width: 68.4%;
	left: 0;
	right: 0;
	top: 90%;
	margin: 0 auto;
}

.fade-item .bubble-anim {
	opacity: 0;
	transform: translateY(-70px);
	transition: 0.8s ease;
}

.visible.fade-item .bubble-anim {
	opacity: 1;
	transform: translateY(0px);
}

#panel07>.panel-content h3 {
	width: 157.5px;
	margin-bottom: 10%;
}

#panel07>.panel-content .panel-image {
	width: 280px;
}

#panel08 {
	width: 100vw;
	z-index: -1;
	margin-left: -5vw;
	padding-left: 10vw;
	padding-right: 5vw;
	margin-right: -5vw;
	max-width: 1280px;
}

#panel08 .flexBlock.fade-item {
	align-items: center;
}

#panel08 .flexBlock.fade-item>:nth-child(1) {
	width: 30%;
	align-self: flex-start;
	margin-top: 1.5%;
}

#panel08 .flexBlock.fade-item>:nth-child(1) .bubble-anim {
	width: 27%;
	left: 18%;
	bottom: 11%;
}

#panel08 .flexBlock.fade-item>:nth-child(2) {
	width: 30%;
}

#panel08 .flexBlock.fade-item>:nth-child(2) .bubble-anim {
	width: 95%;
	right: 89%;
	bottom: 17%;
}

#panel08 .flexBlock.fade-item>:nth-child(3) {
	width: 37%;
}

#panel08 .flexBlock.fade-item>:nth-child(3) .bubble-anim {
	width: 28%;
	left: 8%;
	top: 16%;
}

#panel09 .title-fadein {
	width: 2.8%;
	max-width: 35px;
}

#panel09 .title-fadein>img:nth-child(1) {
	opacity: 0;
	transform: scale(2);
	filter: blur(10px);
	transition: 0.8s ease-out;
}

#panel09 .visible .title-fadein>img:nth-child(1) {
	opacity: 1;
	transform: scale(1);
	filter: blur(0px);
}

#panel10 {
	width: 72vw;
	background: url("../img/panel10-img.jpg") no-repeat center center;
	background-size: cover;
	padding-right: 5vw;
	margin-right: -5vw;
	min-width: 550px;
}

#panel10 h3 {
	width: 60%;
	max-width: 550px;
	margin: -58% auto 0;
	opacity: 0;
}

#panel10 .visible h3 {
	animation: slideInOvershoot 0.7s ease-out forwards;
}

#panel11>.panel-content h3 {
	width: 182px;
	margin-bottom: 15%;
}

#panel11>.panel-content .panel-image {
	width: 100px;
}

#panel11 {
	z-index: 2;
}

#panel12 {
	background: #000000;
	margin-left: -5vw;
	padding-left: 3vw;
	z-index: 1;
	width: 150vw;
}

#panel12 .panel-content {
	flex-direction: row;
	padding-right: 0;
}

#panel12 .panel-content>.flexBlock.fade-item {
	width: 50%;
	align-items: center;
	justify-content: space-between;
}

#panel12 .panel-content>.flexBlock.fade-item:nth-child(1)>.rel {
	width: 45%;
}

#panel12 .panel-content>.flexBlock.fade-item>.rel>.bubble-anim01 {
	width: 70%;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: -28%;
}

#panel12 .panel-content>.flexBlock.fade-item>.rel>.bubble-anim02 {
	width: 77%;
	right: 0;
	bottom: -10%;
}

#panel12 .panel-content .fade-item .boost-text {
	width: 220px;
	top: -20%;
}

#panel12 .panel-content .fade-item.visible .boost-text {
	animation: pulse-loop 1.2s 2 forwards;
}

#panel12 .panel-content>.flexBlock.fade-item:nth-child(2)>div.rel {
	width: calc(100% - 300px);
}

#panel12 .panel-content>.flexBlock.fade-item:nth-child(2)>div.rel img {
	max-width: 429px;
	opacity: 0;
	width: 100%;
}

#panel12 .panel-content>.flexBlock.fade-item.visible:nth-child(2)>div.rel img {
	animation: left-to-right-boost 1.5s linear forwards;
}

#panel12 .line {
	height: 70%;
	width: auto;
	bottom: 0;
	overflow: hidden;
	transform: rotate(5.1deg);
	aspect-ratio: 656 / 632;
	right: -4.35%;
	z-index: 0;
}

#panel12 .line img {
	transform: rotate(0deg);
	width: 100%;
	height: auto;
}

@keyframes left-to-right-boost {
	0% {
		left: -20%;
		transform: translateY(0%) scale(0.1);
		opacity: 0;
	}

	5% {
		opacity: 1;
	}

	100% {
		left: 60%;
		transform: translateY(0%) scale(1.1);
		opacity: 1;
	}
}

@keyframes right-to-left-boost {
	0% {
		left: 100vw;
		transform: translateY(0%) scale(0.1);
		opacity: 0;
	}

	5% {
		opacity: 1;
	}

	100% {
		left: 0%;
		transform: translateY(0%) scale(1);
		opacity: 1;
	}
}

@keyframes pulse-loop {
	0% {
		transform: scale(1);
	}

	70% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes zoom-boost-in {
	0% {
		opacity: 0;
		transform: scale(0.3) translateY(30px);
	}

	60% {
		opacity: 1;
		transform: scale(1.15) translateY(-5px);
	}

	80% {
		transform: scale(0.95) translateY(2px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

#panel13 {
	width: 270vw;
	max-width: 3450px;
	z-index: 0;
	margin-left: -5vw;
	padding-left: 13vw;
	padding-right: 0vw;
	margin-right: -5vw;
}

#panel13.skew-area::before {
	width: 105%;
}

#panel13 .panel-content {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: max-content;
}

#panel13 .panel-content>div {
	height: auto;
}

#panel13 .panel-content>:nth-child(1) {
	width: 20.8%;
	position: relative;
	display: flex;
	flex-direction: column;
}

#panel13 .panel-content>:nth-child(1)>:nth-child(1) {
	width: 92%;
	margin-bottom: -12%;
}

#panel13 .panel-content>:nth-child(1)>:nth-child(1)>.bubble-anim {
	width: 15.3%;
	top: 10%;
	left: 15%;
}

#panel13 .panel-content>:nth-child(1)>:nth-child(2) {
	width: 52%;
	right: 0;
	bottom: 0;
	margin-left: auto;
}

#panel13 .panel-content>:nth-child(1)>:nth-child(2)>.bubble-anim {
	width: 27%;
	top: 1%;
	left: 12%;
}

#panel13 .panel-content>:nth-child(2) {
	width: 21.2%;
}

#panel13 .panel-content>:nth-child(2) .bubbles {
	width: 50%;
	left: 2%;
	top: 0;
}

#panel13 .panel-content>:nth-child(2) .bubbles>.rel {
	margin-top: 10px;
}

#panel13 .panel-content>:nth-child(3) {
	width: 20.2%;
	position: relative;
}

#panel13 .panel-content>:nth-child(3) .text-overlay01 {
	top: 3%;
	left: 4%;
	width: 51%;
	opacity: 0;
}

#panel13 .panel-content>:nth-child(3) .text-overlay02 {
	bottom: 3%;
	right: 4%;
	width: 61%;
	opacity: 0;
}

#panel13 .panel-content>:nth-child(3).visible .text-overlay {
	animation: slideInOvershoot 0.7s ease-out forwards;
}

#panel13 .panel-content>:nth-child(4) {
	width: 15.9%;
}

#panel13 .panel-content>:nth-child(4) .bubble-anim01 {
	width: 90%;
	left: 5%;
	top: -13%;
}

#panel13 .panel-content>:nth-child(4) .bubble-anim02 {
	width: 66.5%;
	right: 5%;
	bottom: -16%;
}

#panel13 .panel-content>:nth-child(5) {
	width: 15.2%;
}

#panel13 .panel-content>:nth-child(5) .bubble-anim {
	width: 83.5%;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: -23%;
}

#panel14 .title-fadein {
	width: 2.8%;
	max-width: 35px;
}

#panel14 .title-fadein>img:nth-child(1) {
	opacity: 0;
	transform: scale(2);
	filter: blur(10px);
	transition: 0.8s ease-out;
}

#panel14 .visible .title-fadein>img:nth-child(1) {
	opacity: 1;
	transform: scale(1);
	filter: blur(0px);
}

#panel15>.panel-content h3 {
	width: 283px;
	margin-bottom: 10%;
}

#panel15>.panel-content .panel-image {
	width: 280px;
}

#panel16 {
	width: 160vw;
	max-width: 1820px;
	z-index: -1;
	margin-left: -5vw;
	padding-left: 13vw;
	padding-right: 0;
	margin-right: 0;
}

#panel16 .panel-content {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

#panel16 .panel-content>:nth-child(1) {
	width: 22.5%;
	max-width: 410px;
}

#panel16 .panel-content>:nth-child(1) .bubble-anim01 {
	width: 72.2%;
	right: 1%;
	top: -12%;
}

#panel16 .panel-content>:nth-child(1) .bubble-anim02 {
	width: 76.1%;
	left: 2%;
	bottom: -12%;
}

#panel16 .panel-content>:nth-child(2) {
	width: 42.9%;
	max-width: 780px;
}

#panel16 .panel-content>:nth-child(2) .bubbles {
	width: 61.8%;
}

#panel16 .panel-content>:nth-child(2) .bubbles .bubble-anim {
	margin-bottom: 15px;
}

#panel16 .panel-content>:nth-child(2) .bubbles01 {
	left: 2%;
	top: -10%;
}

#panel16 .panel-content>:nth-child(2) .bubbles02 {
	left: 2%;
	bottom: -11%;
	width: 45.6%;
}

#panel16 .panel-content>:nth-child(3) {
	width: 30.2%;
	height: 100%;
	position: relative;
	min-width: 550px;
}

#panel16 .panel-content>:nth-child(3) .bubble-anim {
	width: 53.8%;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 60%;
}

#panel16 .panel-content>:nth-child(3)>.panel16-img03 {
	background: url('../img/panel16-img03.png') no-repeat center center;
	background-size: cover;
	width: 100%;
	height: 100%;
}

#goods {
	background: #E7FF54;
	max-width: 700px;
}

#goods .button-area {
	width: calc(100% - 30px);
	max-width: 300px;
	right: 5%;
	bottom: 5%;
}

#goods .button-area>p {
	width: 89.6%;
	position: relative;
	display: block;
	margin: 10px auto 0;
}

#panel-banners .panel-content>.rel {
	width: 435px;
	height: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000000;
}

#panel-banners .panel-content>.rel>:nth-child(1) {
	width: 89.6%;
}

#panel-banners .panel-content>.rel:nth-child(1)>:nth-child(1)>:nth-child(1) {
	width: 81%;
	margin: 0 auto 20px;
}

#panel-banners .panel-content>.rel:nth-child(2) {
	background: #6F52D6;
}

.panel-caption {
	font-size: 11px;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 15px 15px;
	text-align: left;
	background: rgba(255, 255, 255, 0.75);
	color: #000000;
}

.panel-caption a {
	color: #6F52D6;
	text-decoration: none;
}

@media (min-width: 769px) {
	.button:hover {
		transform: scale(1.05) translateY(-5px);
	}

	.horizontal-wrapper {
		position: relative;
	}

	.horizontal-sticky {
		position: sticky;
		top: 0;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.bg-video,
	.video-overlay {
		position: absolute;
		margin-top: 0;
	}

	.horizontal-container {
		flex-direction: row;
		width: max-content;
		height: 100%;
		margin-top: 0;
		will-change: transform;
	}

	.panel {
		width: max-content;
		height: 100vh;
		flex-shrink: 0;
	}

	.panel.panel-full {
		width: 100vw;
	}

	.panel-content {
		min-height: 100%;
	}
}

@keyframes slideInOvershoot {
	0% {
		transform: translate(100vw, -10vw);
		opacity: 0;
		filter: blur(20px);
	}

	60% {
		transform: translate(-5vw, 8px);
		opacity: 1;
		filter: blur(0px);
	}

	80% {
		transform: translate(10px, -3px);
	}

	100% {
		transform: translate(0, 0);
		opacity: 1;
		filter: blur(0px);
	}
}

.spOnly {
	display: none !important;
}

.pcOnly {
	display: block !important;
}

@media (max-width: 768px) {
	.panel {
		height: auto;
	}

	#panel01 {
		background: url("../img/sp/panel01-img.png") no-repeat center center;
		background-size: cover;
		overflow: inherit;
		min-height: 100vh;
		z-index: 1
	}

	#panel01 h3 {
		width: 100%;
		max-width: 450px;
		margin: 30px 0 auto;
	}

	#panel01 .bottom-text {
		position: relative;
		bottom: -35vw;
		right: auto;
		padding-bottom: 15px;
	}

	#panel01 .bottom-text>.flexBlock {
		padding: 15px 15px 20px;
		align-items: center;
	}

	#panel01 .bottom-text .panel-text {
		width: calc(100% - 30px);
		max-width: 335px;
		margin-bottom: 25px;
	}

	#panel01 .bottom-text::before {
		width: 100%;
		height: 100%;
		top: 0;
	}

	.panel.panel-full {
		height: 100dvh;
	}

	#panel02 {
		padding-top: 35vw;
	}

	#panel02 .title-fadein {
		width: 87.5%;
	}

	.skew-area::before {
		width: 100%;
		left: 0;
		transform: skewY(5deg);
	}

	.skew-area>.panel-content {
		position: relative;
		padding: 50px 15px;
	}

	#panel04 {
		z-index: 1;
		margin-left: 0;
		padding-left: 0;
		padding-right: 0;
		margin-right: 0;
		width: 100%;
		margin-top: -3vh;
	}

	#panel04 .imgs.flexBlock {
		width: 100%;
	}

	#panel04 .imgs.flexBlock>div {
		width: 100%;
		max-width: 100%;
	}

	#panel04 .imgs.flexBlock>div:nth-child(2) {
		margin-left: 0;
		margin-top: 0;
	}

	#panel04 .text-overlay {
		width: 75.7%;
		top: -18%;
		height: auto;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	#panel04 h3.abs {
		width: 171px;
		right: 0;
		left: 0;
		margin: 0 auto;
		top: 34%;
	}

	#panel05 {
		z-index: 1;
		margin-top: -3vh;
	}

	#panel05::before {
		transform: skewY(-5deg);
	}

	#panel05 h3 {
		width: 100%;
	}

	#panel05 h3 img {
		width: 272px;
		margin: 0 auto;
	}

	#panel05.skew-area>.panel-content {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	#panel06 {
		width: 100%;
		margin-left: 0;
		padding-left: 0;
		padding-right: 0;
		margin-right: 0;
		max-width: 100%;
		margin-top: -3vh;
		background: #000000 !important;
	}

	#panel06 .panel-content {
		flex-direction: column;
	}

	#panel06 .flexBlock.fade-item:nth-child(1),
	#panel06 .flexBlock.fade-item:nth-child(2) {
		width: 100%;
		flex-direction: column;
	}

	#panel06 .flexBlock.fade-item:nth-child(1)>.rel:nth-child(1) {
		width: 100%;
	}

	#panel06 .flexBlock.fade-item:nth-child(1)>.rel:nth-child(1)> :nth-child(1) {
		width: 100%;
	}

	#panel06 .flexBlock.fade-item:nth-child(1)>.rel:nth-child(1)> :nth-child(2) {
		width: 100%;
		position: relative;
		right: auto;
		bottom: auto;
		padding-top: 10px;
		margin-bottom: -7vh;
	}

	#panel06 .flexBlock.fade-item:nth-child(1)>.rel:nth-child(2) {
		width: 100%;
		margin-top: -5px;
		z-index: 1;
		margin-bottom: -5.5vw;
	}

	#panel06 .flexBlock.fade-item:nth-child(2)>.rel:nth-child(1) {
		width: 100%;
		height: auto;
	}

	#panel06 .flexBlock.fade-item:nth-child(2)>.rel:nth-child(1)> :nth-child(1) {
		width: 100%;
	}

	#panel06 .flexBlock.fade-item:nth-child(2)>.rel:nth-child(1)> :nth-child(2) {
		width: 100%;
		position: relative;
		right: auto;
		bottom: auto;
	}

	#panel06 .flexBlock.fade-item:nth-child(2)>.rel:nth-child(2) {
		width: 100%;
	}

	#panel06 .flexBlock.fade-item:nth-child(1)>.rel:nth-child(1)> :nth-child(1)>.bubble-anim {
		width: 65%;
		left: 3%;
		top: 14%;
		max-width: 245px;
	}

	#panel06 .flexBlock.fade-item:nth-child(1)>.rel:nth-child(2) .bubble-anim01 {
		width: 89%;
		max-width: 335px;
	}

	#panel06 .flexBlock.fade-item:nth-child(2)>.rel:nth-child(1)> :nth-child(1) .bubble-anim {
		position: relative;
		width: 89%;
		max-width: 335px;
		left: 0;
		right: 0;
		margin: -2vh auto 10px;
		top: 0;
	}

	#panel06 .flexBlock.fade-item:nth-child(2)>.rel:nth-child(1)> :nth-child(2) .bubbles {
		width: 89%;
		max-width: 335px;
		right: auto;
		bottom: auto;
		position: relative;
		top: -3vh;
		left: 0;
		right: 0;
		margin: 0 auto -5vh;
		z-index: 1;
	}

	#panel06 .flexBlock.fade-item:nth-child(2)>.rel:nth-child(2) .bubble-anim {
		width: 89%;
		max-width: 335px;
		left: auto;
		right: auto;
		top: auto;
		margin: -3vh auto 5vh;
		position: relative;
	}

	#panel06 .flexBlock.fade-item:nth-child(1)>.rel:nth-child(2) .bubble-anim02 {
		width: 89%;
		max-width: 335px;
	}

	#panel07::before,
	#panel15::before {
		transform: skewY(-7deg);
	}

	#panel07 {
		background: #000000 !important;
		padding-bottom: 4vh;
	}

	#panel08 {
		width: 100vw;
		z-index: 0;
		margin-left: 0;
		padding-left: 0;
		padding-right: 0;
		margin-right: 0;
		margin-top: -7vh;
		background: #000000 !important;
	}

	#panel08 .flexBlock.fade-item {
		flex-direction: column;
	}

	#panel08 .flexBlock.fade-item> :nth-child(1) {
		margin-top: 0;
		z-index: 3;
	}

	#panel08 .flexBlock.fade-item> :nth-child(2) {
		z-index: 2;
	}

	#panel08 .flexBlock.fade-item> :nth-child(1),
	#panel08 .flexBlock.fade-item> :nth-child(2),
	#panel08 .flexBlock.fade-item> :nth-child(3) {
		width: 100%;
		margin-bottom: -7vh;
	}

	#panel08 .flexBlock.fade-item> :nth-child(3) {
		margin-bottom: -12vh;
	}

	#panel08 .flexBlock.fade-item> :nth-child(2) .bubble-anim {
		width: 89%;
		right: 0;
		left: 0;
		bottom: 30%;
		margin: 0 auto;
		max-width: 335px;
	}

	#panel08 .flexBlock.fade-item> :nth-child(1) .bubble-anim {
		width: 27%;
		left: 18%;
		top: 30%;
		bottom: auto;
		max-width: 101px;
	}

	#panel08 .flexBlock.fade-item> :nth-child(3) .bubble-anim {
		width: 33.8%;
		left: 6%;
		top: 15%;
		max-width: 127px;
	}

	#panel09 .title-fadein {
		width: 23px;
	}

	#panel10 {
		width: 100%;
		min-width: inherit;
		background: url("../img/sp/panel10-img.png") no-repeat center center;
		background-size: auto;
		background-size: cover;
		padding-right: 0;
		margin-right: 0;
		aspect-ratio: 375 / 500;
	}

	#panel10 h3 {
		width: 93.3%;
	}

	#panel11 {
		margin: -5vh auto;
	}

	#panel11::before {
		transform: skewY(-5deg);
	}

	#panel11>.panel-content h3 {
		margin-bottom: 10%;
	}

	#panel12 {
		margin-left: 0;
		padding-left: 0;
		width: 100%;
		z-index: 3;
		padding-top: 13vh;
		padding-bottom: 5vh;
		margin-bottom: -10vh;
	}

	#panel12 .panel-content {
		flex-direction: column;
	}

	#panel12 .panel-content>.flexBlock.fade-item {
		width: 100%;
		flex-direction: column;
	}

	#panel12 .panel-content>.flexBlock.fade-item:nth-child(1)>.rel {
		width: 100%;
	}

	#panel12 .panel-content>.flexBlock.fade-item:nth-child(2)>div.rel {
		width: 83%;
	}

	#panel12 .line {
		height: auto;
		width: 100%;
		bottom: -7vh;
		transform: rotate(0);
		aspect-ratio: 375 / 382;
		right: 0%;
		z-index: 0;
	}

	#panel12 .panel-content>.flexBlock.fade-item.visible:nth-child(2)>div.rel img {
		animation: right-to-left-boost 0.9s linear forwards;
	}

	#panel12 .panel-content .fade-item .boost-text {
		width: 21px;
		top: 0;
		margin-bottom: 15vh;
	}

	#panel12.skew-area>.panel-content {
		padding: 50px 0;
	}

	#panel12 .panel-content>.flexBlock.fade-item>.rel>.bubble-anim01 {
		max-width: 310px;
	}

	#panel12 .panel-content>.flexBlock.fade-item>.rel>.bubble-anim02 {
		width: 89.9%;
		right: 0;
		left: 0;
		margin: 0 auto;
		bottom: -10%;
		max-width: 335px;
	}

	#panel12 .panel-content>.flexBlock.fade-item:nth-child(1) {
		margin-bottom: 50vh;
	}

	#panel13 {
		width: 100%;
		z-index: 3;
		margin-left: 0;
		padding-left: 0;
		padding-right: 0;
		margin-right: 0;
	}

	#panel13::before {
		display: none;
	}

	#panel13.skew-area>.panel-content {
		padding: 0;
		flex-direction: column;
	}

	#panel13 .panel-content> :nth-child(1),
	#panel13 .panel-content> :nth-child(2),
	#panel13 .panel-content> :nth-child(3),
	#panel13 .panel-content> :nth-child(4),
	#panel13 .panel-content> :nth-child(5) {
		width: 100%;
	}

	#panel13 .panel-content> :nth-child(2),
	#panel13 .panel-content> :nth-child(3),
	#panel13 .panel-content> :nth-child(4),
	#panel13 .panel-content> :nth-child(5) {
		background: #000000;
	}

	#panel13 .panel-content> :nth-child(1)> :nth-child(1) {
		width: 100%;
		margin-bottom: -12vh;
	}

	#panel13 .panel-content> :nth-child(1)> :nth-child(2) {
		width: 100%;
		right: auto;
		left: auto;
		bottom: auto;
		margin: auto;
		margin-bottom: -12vh;
		z-index: 2;
	}

	#panel13 .panel-content> :nth-child(1)> :nth-child(1)>.bubble-anim {
		width: 27%;
		top: 18%;
		left: 5%;
		max-width: 101px;
	}

	#panel13 .panel-content> :nth-child(1)> :nth-child(2)>.bubble-anim {
		width: 27%;
		top: 1%;
		left: 5%;
		max-width: 101px;
	}

	#panel13 .panel-content> :nth-child(2) .bubbles {
		width: 89%;
		max-width: 335px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	#panel13 .panel-content> :nth-child(2) .bubbles01 {
		top: 11vh;
	}

	#panel13 .panel-content> :nth-child(3) .text-overlay01 {
		top: 3%;
		left: 5%;
		width: 76%;
	}

	#panel13 .panel-content> :nth-child(3) .text-overlay02 {
		bottom: 5%;
		right: 4%;
		width: 89%;
	}

	#panel13 .panel-content> :nth-child(4)>.rel {
		display: flex;
		flex-direction: column;
	}

	#panel13 .panel-content> :nth-child(4)>.rel>:nth-child(1) {
		order: 2;
	}

	#panel13 .panel-content> :nth-child(4) .bubble-anim01 {
		max-width: 335px;
		width: 89%;
		left: 0;
		right: 0;
		top: 0;
		margin: -3vh auto 3vh;
		position: relative;
		order: 1;
	}

	#panel13 .panel-content> :nth-child(4) .bubble-anim02 {
		max-width: 335px;
		width: 89%;
		left: 0;
		right: 0;
		top: 0;
		position: relative;
		margin: -3vh auto 3vh;
		order: 3;
	}

	#panel13 .panel-content> :nth-child(5)>.rel {
		display: flex;
		flex-direction: column-reverse;
	}

	#panel13 .panel-content> :nth-child(5) .bubble-anim {
		max-width: 335px;
		width: 89%;
		margin: 2vh auto -5vh;
		top: 0;
		position: relative;
	}

	#panel14 .title-fadein {
		width: 24.5px;
	}

	#panel15 {
		background: #6F52D6;
		padding-bottom: 15vh;
	}

	#panel15::before {
		display: none;
	}

	#panel16 {
		width: 100%;
		margin-left: 0vw;
		padding-left: 0vw;
		padding-right: 0;
		margin-right: 0;
		z-index: 1;
		background: #000000;
	}

	#panel16 .panel-content {
		flex-direction: column;
	}

	#panel16 .panel-content> :nth-child(1),
	#panel16 .panel-content> :nth-child(2),
	#panel16 .panel-content> :nth-child(3) {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	#panel16 .panel-content> :nth-child(1) {
		z-index: 1;
		margin-bottom: -8vh;
	}

	#panel16 .panel-content> :nth-child(1) .bubble-anim01 {
		width: 89.9%;
		max-width: 335px;
		right: 0;
		left: 0;
		margin: 0 auto;
		top: -25%;
	}

	#panel16 .panel-content> :nth-child(1) .bubble-anim02 {
		width: 89.9%;
		max-width: 335px;
		right: 0;
		left: 0;
		margin: 0 auto;
		bottom: -12%;
	}

	#panel16 .panel-content> :nth-child(2) .bubbles {
		width: 89.9%;
		max-width: 335px;
		right: 0;
		left: 0;
		top: 0;
		margin: 0 auto;
		position: relative;
		z-index: 1;
	}

	#panel16 .panel-content> :nth-child(3) {
		flex-direction: column;
		min-width: inherit;
	}

	#panel16 .panel-content> :nth-child(3)>.panel16-img03 {
		background: url('../img/sp/panel16-img03.png') no-repeat center center;
		background-size: cover;
		width: 100%;
		height: auto;
		aspect-ratio: 375 / 560;
	}

	#panel16 .panel-content> :nth-child(3) .bubble-anim {
		width: 79%;
		max-width: 296px;
	}

	#panel16 .panel-content> :nth-child(2) .bubbles01 {
		margin-top: -3vh;
	}

	#panel16 .panel-content> :nth-child(2) .bubbles01>.bubble-anim:nth-child(1) {
		position: absolute;
		top: -100vw;
	}

	#panel16 .panel-content> :nth-child(2) .bubbles02 {
		margin-bottom: -7vh;
	}

	.panel-caption {
		position: relative;
		left: auto;
		bottom: auto;
		background: #FFFFFF;
		padding: 25px 15px;
	}

	#goods {
		background: #FFFFFF;
		max-width: inherit;
	}

	#goods .button-area {
		width: calc(100% - 30px);
		max-width: 300px;
		right: 0;
		left: 0;
		margin: 0 auto;
		bottom: 2.5%;
	}

	#panel-banners .panel-content>.rel {
		width: 100%;
		height: auto;
		padding: 40px 15px;
	}

	#panel-banners .panel-content>.rel> :nth-child(1) {
		max-width: 350px;
		margin: 0 auto;
	}

	.spOnly {
		display: block !important;
	}

	.pcOnly {
		display: none !important;
	}
}

@media (max-width: 450px) {
	#panel01 h3 {
		width: calc(100% + 34px);
		margin: 30px -17px auto;
	}
}