@charset "utf-8";

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	font-size: 62.5%;
}
body {
	color: #00004e;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	font-size: 1.6rem;
	line-height: 1.5;
}
body {
	padding-top: 100px;
}
.header {
	top: 0;
}
.inner {
	margin: 0 auto;
	max-width: 1080px;
	padding: 0 40px;
}

/* 汎用クラス ---------- */
.text-center {
	text-align: center;
}
.lst-note {
	align-items: center;
	display: flex;
	justify-content: center;
	flex: none;
	flex-flow: column nowrap;
}
.lst-note > .note-item {
	align-items: flex-start;
	display: flex;
	justify-content: center;
	font-size: 1.4rem;
}
.pc {
	display: unset;
}
.sp {
	display: none;
}

/* ページタイトル（fv） ---------- */
.page-ttl {
	background-image: url(../img/bg-page-ttl.png);
	background-position: center center;
	background-size: cover;
	padding: 188px 0 94px;
}
.page-ttl-logo > img{
	transform: translateX(.85%);
}
.wrap-btn-anchor-video {
	align-items: flex-end;
	display: flex;
	justify-content: center;
	padding-top: 40px;
}
.wrap-btn-anchor-video::before {
	background-image: url(../img/img-ninjaboy-01.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	height: 296px;
	margin-bottom: -64px;
	width: 234px;
}
.wrap-btn-anchor-video::after {
	background-image: url(../img/img-ninjagirl-01.png);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	height: 296px;
	margin-bottom: -64px;
	margin-left: -31px;
	width: 296px;
}
.btn-anchor-video {
	align-items: center;
	appearance: none;
	background-color: transparent;
	border: none;
	cursor: pointer;
	display: inline-flex;
	height: 80px;
	justify-content: center;
	padding: 1rem 3rem;
	position: relative;
	width: 348px;
}
.btn-anchor-video:hover {
	opacity: 1;
}
.btn-anchor-video > img {
	position: relative;
	z-index: 2;
}
.btn-anchor-video::before {
	content: "";
	background-color: #c3c4c4;
	border-radius: 100vw;
	display: block;
	height: 100%;
	mix-blend-mode: multiply;
	position: absolute;
	top: 6px;
	transition: all ease-in-out .2s;
	width: 100%;
	z-index: 0;
}
.btn-anchor-video::after {
	content: "";
	background-color: #004CBC;
	border-radius: 100vw;
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	transition: all ease-in-out .2s;
	width: 100%;
	z-index: 1;
}
.btn-anchor-video:hover::before {
	top: 2px;
}
.btn-anchor-video:hover::after {
	background-color: #0063F8;
}

/* 基本動作 ---------- */
.sec-motion {
	background-image: url(../img/bg-motion.png);
	background-position: center top 40px;
	background-repeat: no-repeat;
	background-size: 1380px auto;
	padding: 96px 0 240px;
}
.sec-motion > .inner {
	max-width: 940px;
	padding: 0 80px;
}
.lst-motion {
	align-items: flex-start;
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr 1fr 1fr;
	justify-content: flex-start;
	padding-top: 104px;
}
.motion-item {
	line-height: 0;
	position: relative;
}
.motion-badge {
	height: 65px;
	left: -16px;
	position: absolute;
	top: -16px;
	width: 65px;
}
.motion-illst {
	position: absolute;
}
.motion-illst.motion-01 {
	bottom: 24px;
	height: 94px;
	right: -24px;
	width: 84px;
}
.motion-illst.motion-02 {
	top: -32px;
	height: 77px;
	right: -16px;
	width: 92px;
}
.motion-illst.motion-03 {
	bottom: 16px;
	height: 95px;
	left: -32px;
	width: 96px;
}
.motion-illst.motion-04 {
	bottom: 8px;
	height: 112px;
	left: -32px;
	width: 93px;
}
.motion-illst.motion-05 {
	bottom: 8px;
	height: 97px;
	right: -32px;
	width: 136px;
}
.motion-illst.motion-06 {
	top: -24px;
	height: 95px;
	right: -56px;
	width: 123px;
}
.motion-illst.motion-07 {
	bottom: -16px;
	height: 99px;
	left: -48px;
	width: 146px;
}
.motion-illst.motion-08 {
	bottom: 24px;
	height: 111px;
	left: -32px;
	width: 114px;
}
.motion-illst.motion-09 {
	bottom: 24px;
	height: 99px;
	right: -56px;
	width: 90px;
}

/* 動画 ---------- */
.sec-video {
	background-color: #004cbc;
	padding: 0 0 80px;
}
.sec-video-ttl {
	align-items: center;
	background-color: #004cbc;
	background-image: url(../img/bg-video-ttl.png);
	background-position: center top;
	background-size: 75px auto;
	background-repeat: repeat;
	gap: 0 24px;
	display: flex;
	justify-content: center;
	padding: 56px 0 24px;
}
.sec-video-ttl > img {
	width: clamp(268px, 90%, 478px);
}
.sec-video-ttl::before {
	background-image: url(../img/img-ninjaboy-02.png);
	background-position: center bottom;
	background-size: contain;
	background-repeat: no-repeat;
	content: "";
	height: 113.5px;
	width: 102.5px;
}
.sec-video-ttl::after {
	background-image: url(../img/img-ninjagirl-02.png);
	background-position: center bottom;
	background-size: contain;
	background-repeat: no-repeat;
	content: "";
	height: 122px;
	width: 101.5px;
}
.video-group-ttl-inner {
	display: inline-block;
	width: clamp(264px, 80%, 414px);
}
.video-group-ttl-inner > img {
	margin-top: -15%;
}
.video-group-item {
	background-color: #fff;
	border-style: solid;
	border-width: 6px;
	border-radius: 24px;
	margin-top: 144px;
	padding-bottom: 56px;
}
.video-group-cnt {
	padding: 0 72px;
}
.video-group-item.group-01 {
	border-color: #00b572;
}
.video-group-item.group-02 {
	border-color: #ff6d4a;
}
.video-group-lead {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.6;
	padding-top: 32px;
	text-align: center;
}
.dst-video {
	display: grid;
	column-gap: 80px;
	grid-template-columns: 1fr 1fr;
	padding-top: 32px;
}
.video-smry {
	font-weight: bold;
	padding-top: 8px;
}
.video-group-item.group-01 .video-smry {
	color: #00b572;
}
.video-group-item.group-02 .video-smry {
	color: #ff6d4a;
}
.video-ttl {
	padding: 0 32px;
}
.btn-video-open {
	background-color: transparent;
	border: none;
	border-radius: 16px;
	box-shadow: 0 2px 0 2px rgba(0,0,0,.2);
	display: block;
	line-height: 0;
	padding: 0;
	cursor: pointer;
	transition: all ease-out .2s;
}
.btn-video-open:hover {
	box-shadow: 0 0 0 rgba(0,0,0,.2);
	transform: translateY(2px);
}

/* 音源ダウンロード ---------- */
.sec-download {
	background-color: #fff;
	background-image: url(../img/bg-download.png);
	background-position: center top;
	background-size: 75px auto;
	background-repeat: repeat;
	padding: 64px 0 96px;
}
.sec-download-ttl > img {
	flex-grow: 0;
	flex-shrink: 0;
	width: clamp(280px, 92%, 627px);
}
.sec-download-ttl::before {
	background-image: url(../img/icon-shuriken.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
	height: 64px;
	margin: 0 auto 36px;
	width: auto;
}
.download-lead {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.6;
	padding-top: 40px;
	text-align: center;
}
.box-btn-download {
	padding-top: 48px;
}
.btn-download {
	align-items: center;
	background-color: #004cbc;
	border-radius: 100vw;
	box-shadow: 0 6px 0 rgba(0,0,0,.2);
	display: inline-flex;
	min-height: 80px;
	justify-content: center;
	padding: 1rem 2rem;
	position: relative;
	transition: all ease-out .2s;
	width: clamp(260px, 80%, 348px);
}
.btn-download > img {
	width: clamp(120px, 70%, 201px);
}
.btn-download:hover {
	background-color: #0063F8;
	opacity: 1;
	transform: translateY(4px);
	box-shadow: 0 0 0 rgba(0,0,0,.2);
}

/* 誕生キャンペーン ---------- */
.sec-campaign {
	background-color: #ff1236;
	padding: 64px 0 56px;
}
.sec-campaign-ttl {
	align-items: center;
	display: flex;
	gap: 0 40px;
	justify-content: center;
}
.sec-campaign-ttl > img {
	flex-grow: 0;
	flex-shrink: 0;
	width: clamp(324px, 80%, 654px);
}
.sec-campaign-ttl::before,
.sec-campaign-ttl::after {
	background-image: url(../img/icon-shuriken.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	flex-grow: 0;
	flex-shrink: 0;
	height: 64px;
	width: 64px;
}
.campaign-content {
	padding-top: 32px;
}
.campaign-content > img {
	max-width: 865px;
}
.campaign-cv {
	padding-top: 16px;
}
.btn-register-free-lesson {
	align-items: center;
	background-color: #fff100;
	border-radius: 100vw;
	box-shadow: 0 6px 0 #b51729;
	display: inline-flex;
	min-height: 80px;
	justify-content: center;
	padding: 1rem 2rem;
	position: relative;
	transition: all ease-out .2s;
	width: clamp(302px, 80%, 450px);
}
.btn-register-free-lesson:hover {
	opacity: 1;
	transform: translateY(4px);
	box-shadow: 0 0 0 #b51729;
}
.sec-campaign .lst-note {
	color: #fff;
	padding-top: 32px;
}

/* 体験可能ブランド紹介 ---------- */
.sec-brand {
	padding: 64px 0 104px;
}
.sec-brand-ttl > img {
	width: clamp(180px, 60%, 325px);
}
.sec-brand-ttl::before {
	background-image: url(../img/icon-shuriken.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
	height: 64px;
	margin: 0 auto 36px;
	width: auto;
}
.brand-lead {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.6;
	padding-top: 40px;
	text-align: center;
}
.dst-brand {
	display: grid;
	gap: 75px 65px;
	grid-template-columns: 1fr 1fr;
	padding-top: 104px;
}
.brand-item {
	display: grid;
	row-gap: 0;
	grid-template-rows: subgrid;
	grid-row: span 4;
	text-align: center;
}
.brand-catch {
	align-self: flex-end;
	font-size: 1.6rem;
	font-weight: bold;
	order: 0;
}
.brand-name {
	align-self: center;
	order: 1;
}
.brand-thum,
.brand-cv {
	align-self: flex-end;
	order: 1;
}
.brand-cv {
	padding-top: 1.5rem;
}
.btn-brand-cv {
	align-items: center;
	background-color: #ff1236;
	border-radius: 100vw;
	box-shadow: 0 6px 0 0 #c3c4c4;
	color: #fff;
	display: flex;
	font-size: 1.5rem;
	font-weight: bold;
	justify-content: center;
	margin: 0 auto;
	max-width: 300px;
	min-height: 62px;
	padding: .5rem;
	transition: all ease-out .2s;
}
.btn-brand-cv:hover {
	opacity: 1;
	transform: translateY(4px);
	box-shadow: 0 0 0 0 #c3c4c4;
}

/* フッター ---------- */
.page-footer {
	background-color: #004cbc;
	color: #fff;
	font-weight: bold;
	padding: 60px 0 70px;
}
.footer-ttl {
	border-bottom: 1px solid #fff;
	font-size: 1.6rem;
	padding: .5em 0;
}
.footer-cnt {
	font-size: 1.4rem;
	padding-top: 10px;
}
.footer-cnt .company-logo {
	align-self: end;
	background-color: #fff;
	line-height: 1;
	margin: 10px 0 0 auto;
	max-width: 280px;
	padding: 12px 35px 8px;
}
.footer-cnt .company-logo img {
	width: 100%;
}
.footer-item {
	column-gap: 10px;
	display: flex;
	line-height: 1.5;
	padding: 10px 0 0 4px;
}

@media screen and (max-width: 767px) {
	img {
		height: auto;
	}
	body {
		padding-top: 62px;
	}
	.inner {
		max-width: none;
		padding: 0 1.6rem;
	}

	/* 汎用クラス ---------- */
	.lst-note {
		align-items: flex-start;
	}
	.lst-note > .note-item {
		justify-content: flex-start;
	}
	.pc {
		display: none;
	}
	.sp {
		display: unset;
	}


	/* ページタイトル（fv） ---------- */
	.page-ttl {
		padding: 2.4rem 0 1.6rem;
	}
	.page-ttl-logo {
		display: inline-block;
		margin: 0 -.8rem;
	}
	.wrap-btn-anchor-video {
		flex-wrap: wrap;
		padding: 2.4rem 1.6rem 0;
	}
	.wrap-btn-anchor-video::before {
		aspect-ratio: 467/591;
		height: 35vw; 
		margin: 0;
		width: auto;
	}
	.wrap-btn-anchor-video::after {
		aspect-ratio: 1/1;
		height: 35vw;
		margin: 0;
		width: auto;
	}
	.btn-anchor-video {
		height: 12.3vw;
		order: 1;
		padding: 2vw 4vw;
		width: 100%;
	}
	.btn-anchor-video > img {
		height: 100%;
		width: auto;
	}

	/* 基本動作 ---------- */
	.sec-motion {
		background-image: url(../img/bg-motion-sp.png);
		background-position: center top 2.4rem;
		background-size: 99% auto;
		padding: 4rem 0 2.4rem;
	}
	.sec-motion > .inner {
		max-width: none;
		padding: 0 4.8rem;
	}
	.lst-motion {
		gap: 2.4rem;
		grid-template-columns: 1fr 1fr;
		padding-top: 4rem;
	}
	.motion-badge {
		height: 4.8rem;
		left: -1.6rem;
		width: 4.8rem;
		top: -1.6rem;
	}
	.motion-illst.motion-01 {
		bottom: 1.2rem;
		height: 5.1rem;
		right: -1.2rem;
		width: 4.5rem;
	}
	.motion-illst.motion-02 {
		top: -1.6rem;
		height: 4.2rem;
		right: -1.6rem;
		width: 5rem;
	} 
	.motion-illst.motion-03 {
		bottom: .4rem;
		height: 5.1rem;
		left: -2.4rem;
		width: 5.2rem;
	}
	.motion-illst.motion-04 {
		bottom: .4rem;
		height: 6.1rem;
		left: -1.6rem;
		width: 5.1rem;
	}
	.motion-illst.motion-05 {
		bottom: .4rem;
		height: 5.3rem;
		right: -1.6rem;
		width: 7.4rem;
	}
	.motion-illst.motion-06 {
		top: -1.6rem;
		height: 5.2rem;
		right: -3.2rem;
		width: 6.7rem;
	}
	.motion-illst.motion-07 {
		bottom: -.8rem;
		height: 5.3rem;
		left: -2.4rem;
		width: 7.9rem;
	}
	.motion-illst.motion-08 {
		bottom: 1.6rem;
		height: 6.0rem;
		left: -1.6rem;
		width: 6.2rem;
	}
	.motion-illst.motion-09 {
		bottom: 1.6rem;
		height: 5.3rem;
		right: -3.2rem;
		width: 4.9rem;
	}

	/* 動画 ---------- */
	.sec-video-ttl {
		background-image: url(../img/bg-video-ttl-sp.png);
		background-size: 40.5px auto;
		flex-wrap: wrap;
		gap: .8rem 0;
		padding: 2.4rem 4.8rem 1.6rem;
		position: relative
	}
	.sec-video-ttl::before {
		height: 5.5rem;
		order: 1;
		position: relative;
		transform: translateX(5%);
		width: 4.9rem;
		z-index: 2;
	}
	.sec-video-ttl::after {
		height: 5.9rem;
		order: 1;
		position: relative;
		transform: translateX(-5%);
		width: 4.9rem;
		z-index: 1;
	}
	.video-group-item {
		border-width: 4px;
		margin-top: 5.6rem;
		padding-bottom: 2.4rem;
	}
	.video-group-cnt {
		padding: 0 1.6rem;
	}
	.video-group-lead {
		font-size: unset;
		line-height: 2;
		text-align: left;
		padding-top: 1.6rem;
	}
	.dst-video {
		grid-template-columns: 100%;
		padding-top: 0;
	}
	.video-ttl {
		padding: 3.2rem 1.6rem 0;
	}

	/* 音源ダウンロード ---------- */
	.sec-download {
		background-image: url(../img/bg-downloadw-sp.png);
		background-size: 46px auto;
		padding: 4rem 0 4.8rem;
	}
	.sec-download-ttl::before {
		height: 2.4rem;
		margin: 0 auto 1.6rem;
	}
	.download-lead {
		font-size: unset;
		line-height: 2;
		padding-top: 1.6rem;
	}
	.box-btn-download {
		padding-top: 1.6rem;
	}
	.btn-download {
		min-height: 4.8rem;
	}

	/* 誕生キャンペーン ---------- */
	.sec-campaign {
		padding: 2.4rem 0;
	}
	.sec-campaign-ttl {
		display: block;
	}
	.sec-campaign-ttl::before {
		display: block;
		height: 2.4rem;
		margin: 0 auto 1.6rem;
	}
	.sec-campaign-ttl::after {
		content: none;
	}
	.campaign-content {
		padding: 1.6rem 1.6rem 0 2.4rem;
	}
	.campaign-cv {
		padding-top: .8rem;
	}
	.btn-register-free-lesson {
		min-height: 4.8rem;
	}
	.sec-campaign .lst-note .note-item{
		font-size: 1.2rem;
	}

	/* 体験可能ブランド紹介 ---------- */
	.sec-brand {
		padding: 4rem 0 3.2rem;
	}
	.sec-brand-ttl::before {
		height: 2.4rem;
		margin: 0 auto 1.6rem;
	}
	.brand-lead {
		font-size: unset;
		line-height: 2;
		padding-top: 1.6rem;
	}
	.dst-brand {
		gap: 4rem 0;
		grid-template-columns: 1fr;
		padding-top: 3.2rem;
	}
	/* フッター ---------- */
	.page-footer {
		padding: 4rem 0;
	}
	.footer-cnt .company-logo {
		margin: 2.4rem auto 0;
	}
	.footer-item {
		column-gap: 1rem;
		padding: .8rem 0 0 .4rem;
	}
}