@charset "UTF-8";

/* ==================================================

	CONFIG

*/
:root {
  --color-primary: #E4007F;
}

/* ==================================================

RESET

*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background-color: transparent;
	background-repeat: no-repeat;
	text-decoration: none;
	text-indent: 0;
	text-transform: none;
	font-style: normal;
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}
html, body {
	width: 100%;
}
body {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
ul, ol {
	list-style-type: none;
}
table {
	border-collapse: collapse;
}
a, button {
	cursor: pointer;
}
img {
	display: block;
	width: 100%;
	height: auto;
}
button {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 0;
	resize: none;
}

/* ==================================================

HTML

*/
html {
	font-size: 10px;
}
@media screen and (max-width: 960px) {
	html {
		/* 幅375px 1rem = 10px */
		font-size: 2.6667vw;
	}
}

body {
	position: relative;
	background-color: #999;
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 2;
	color: #000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

main {
	display: flex;
	justify-content: flex-end;
}

/* ==================================================

	[ UTILITY ] 

*/
.u-color {
	color: var(--color-primary);
}

/* ==================================================

	[ COMPONENT ] 

*/
.c-btn {
	padding: 0 2rem;
}
.c-btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 7.2rem;
	background-image: linear-gradient(90deg,#ffad98 0%, #00ffd0 100%);
	border-radius: 2rem;
	font-size: 2.4rem;
}

.c-cta {
	padding: 0 0 4rem 0;
	background-color: #000;
	text-align: center;
	line-height: 1.2;
	color: #fff;
}
.c-cta h2 {
	padding-top: 3rem;
	font-size: 2.5rem;
}
.c-cta .date {
	font-size: 5rem;
}
.c-cta .date span {
	font-size: 66%;
}
.c-cta .date i {
	font-size: 70%;
}
.c-cta .c-btn {
	margin-top: 2rem;
}

/* ==================================================

	[ LAYOUT ] BASE

*/
.l-base {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.l-base > div {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s;
}
.l-base .active {
	opacity: 1;
}
.l-base img {
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 960px) {
	.l-base {
		display: none;
	}
}

/* ==================================================

	[ LAYOUT ] MAIN

*/
.l-main {
	position: relative;
	width: 37.5rem;
	overflow: hidden;
	background-color: #fff;
}
@media screen and (max-width: 960px) {
	.l-main {
		width: 100%;
	}
}

/* ==================================================

	[ LAYOUT ] FOOTER

*/
.l-footer {
	padding: 6rem 0 3rem 0;
	text-align: center;
}
.l-footer h2 {
	margin: 0 auto;
	width: 17rem;
}
.l-footer .nav-company {
	margin-top: 5rem;
	line-height: 1.3;
}
.l-footer .nav-company li {
	padding: 0.8rem 0;
}
.l-footer .nav-sns {
	display: flex;
	justify-content: center;
	margin: 4rem 0 6rem 0;
	gap: 2rem;
}
.l-footer .nav-sns a {
	display: block;
}
.l-footer .nav-sns img {
	width: 3rem;
}
.l-footer .note {
	font-size: 1.2rem;
}
.l-footer small {
	font-size: 1rem;
}

@media (any-hover: hover) {
	.l-footer .nav-company a {
		transition: color 0.3s ease;
	}
	.l-footer .nav-company a:hover {
		color: var(--color-primary);
	}
	.l-footer .nav-sns a {
		transition: opacity 0.3s ease;
	}
	.l-footer .nav-sns a:hover {
		opacity: 0.6;
	}
}

/* ==================================================

	[ PROJECT ] MAIN

*/
.p-main {
	position: relative;
	text-align: center;
	color: #fff;
	background-color: #000;
}
.p-main .head {
	position: absolute;
	top: 3rem;
	left: 0;
	width: 100%;
}
.p-main .collab {
	margin: 0 auto;
	width: 26rem;
}
.p-main h1 {
	white-space: nowrap;
	font-size: 2.6rem;
	line-height: 1.6;
}
.p-main h1 em {
	display: block;
	font-size: 4.9rem;
	text-indent: 0.5em;
	line-height: 1.1;
	background: linear-gradient(90deg, #ffd300 0%, #ff5100 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.p-main .foot {
	position: absolute;
	bottom: 3rem;
	left: 0;
	width: 100%;
}
.p-main h2 {
	font-size: 2.2rem;
	line-height: 1.3;
}
.p-main h2 span {
	display: flex;
	justify-content: center;
}
.p-main h2 span:last-child {
	font-size: 2rem;
}
.p-main h2 em {
	display: flex;
	justify-content: center;
	font-size: 5rem;
}
.p-main h2 i {
	display: block;
	background: linear-gradient(90deg, #ffad98 0%, #00ffd0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ==================================================

	[ VIDEO ] 

*/
.p-video {
	padding: 2rem 0;
	background-image: linear-gradient(90deg,#ffad98 0%, #00ffd0 100%);
	text-align: center;
	font-size: 1.3rem;
	color: #fff;
}
.p-video .video {
	margin-bottom: 1rem;
	padding: 0 2rem;
}
.p-video .video .player {
	position: relative;
	padding-top: 56.25%;
	height: 0;
}
.p-video .video .player iframe {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ==================================================

	[ GOODS ] 

*/
.p-goods {
	position: relative;
	background-image: linear-gradient(140deg,#ffad98 0%, #00ffd0 100%);
	color: #fff;
}
.p-goods::before {
	content: '';
	position: absolute;
	inset: 0;
	display: block;
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-image: url(../img/goods-bg.png);
	opacity: 0.3;
}
.p-goods .container {
	position: relative;
	padding-bottom: 4rem;
}
.p-goods .head {
	position: relative;
}
.p-goods .head img {
	position: relative;
}
.p-goods .head .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	mix-blend-mode: overlay;
}
.p-goods .head h2 {
	position: absolute;
	bottom: 2rem;
	left: 3rem;
	font-size: 2.2rem;
	line-height: 1.2;
}
.p-goods .item {
	position: relative;
	margin-top: 2rem;
}
.p-goods .item .image {
	margin: 0 2rem;
	border: 0.3rem solid #000;
}
.p-goods .item .num {
	position: absolute;
	top: 2rem;
	width: 11rem;
}
.p-goods .item .title {
	display: flex;
	margin-top: -4rem;
	line-height: 1.7;
}
.p-goods .item .title .in {
	padding: 1.2rem 0;
	width: 32rem;
	background-color: rgba(0,0,0,0.9);
	font-size: 1.4rem;
}
.p-goods .item .title .in h3 {
	font-size: 1.8rem;
}
.p-goods .item01 {
	margin: 0;
}
.p-goods .item01 .num {
	left: 1rem;
}
.p-goods .item01 .title .in {
	padding-left: 3rem;
	clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 0% 100%);
}
.p-goods .item01 .title .in h3 {
	color: #ffad98;
}
.p-goods .item02 .num {
	right: 1rem;
}
.p-goods .item02 .title {
	justify-content: flex-end;
}
.p-goods .item02 .title .in {
	padding-left: 5rem;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 12% 100%);
}
.p-goods .item02 .title .in h3 {
	color: #00ffd0;
}

/* ==================================================

	[ ITEM ] 

*/
.p-item {
	position: relative;
	background-color: #000;
	color: #fff;
}
.p-item::before {
	content: '';
	position: absolute;
	inset: 0;
	display: block;
	background-position: 50% 0%;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-image: url(../img/item-bg.png);
	opacity: 0.2;
}
.p-item .container {
	position: relative;
}
.p-item .head {
	position: relative;
}
.p-item .head img {
	position: relative;
}
.p-item .head h2 {
	position: absolute;
	bottom: 6rem;
	left: 14.5rem;
	font-size: 2.2rem;
	line-height: 1.2;
}
.p-item .detail {
	position: relative;
	margin: -2.5rem 2rem 0 2rem;
	padding: 2rem;
	border: 0.3rem solid;
	border-image: linear-gradient(140deg,#ffad98 0%, #00ffd0 100%) 1;
	font-size: 1.3rem;
	line-height: 1.4;
}
.p-item .detail img {
	position: absolute;
	top: -3rem;
	right: -3rem;
	width: 14rem;
}
.p-item .detail h3 {
	margin-bottom: 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 0.2rem solid #fff;
	font-size: 1.6rem;
}
.p-item .detail h3 em {
	display: block;
	margin-top: 0.5rem;
	font-size: 2.4rem;
	line-height: 1.3;
}
.p-item .detail li {
	margin-bottom: 0.5rem;
	text-indent: -0.5em;
	line-height: 1.5;
}
.p-item .kv {
	margin-top: 4rem;
}
.p-item .kv h2 {
	margin-top: -2.5rem;
	font-size: 2.4rem;
	line-height: 1.8;
}
.p-item .kv h2 em {
	display: flex;
	margin-bottom: 1.5rem;
}
.p-item .kv h2 em:last-child {
	margin: 0;
}
.p-item .kv h2 span {
	display: block;
	padding: 0 2rem;
	background-image: linear-gradient(90deg,#ffad98 0%, #00ffd0 100%);
}

/* ==================================================

	[ ABOUT ] 

*/
.p-about {
	padding-bottom: 4rem;
	background-color: #000;
	text-align: center;
	color: #fff;
}
.p-about h2 {
	margin-bottom: 3rem;
	font-size: 2.4rem;
	line-height: 1.5;
	color: #bba242;
}
.p-about .wrap {
	background-image: url(../img/about-bg.jpg);
	background-size: 100% auto;
}
.p-about h3 {
	margin: 3rem 0 1.5rem 0;
	font-size: 2.2rem;
	line-height: 1.5;
}
.p-about .img {
	margin: 0 2rem;
}
.p-about p {
	margin: 1.5rem 0 3rem 0;
	font-size: 1.4rem;
}
.p-about .line {
	margin: 3rem 2rem;
}

/* ==================================================

	[ FLOW ] 

*/
.p-flow {
	position: relative;
	padding: 4rem 0 10rem 0;
	background-image: linear-gradient(140deg,#ffad98 0%, #00ffd0 100%);
	text-align: center;
	color: #fff;
}
.p-flow .bg {
	content: '';
	position: absolute;
	display: block;
	background-size: contain;
	opacity: 0.3;
}
.p-flow .bg01 {
	top: 4.4rem;
	left: 0;
	width: 12rem;
	height: 12rem;
	background-image: url(../img/flow-bg01.png);
}
.p-flow .bg02 {
	top: 49%;
	right: 0;
	width: 18rem;
	height: 18rem;
	background-image: url(../img/flow-bg02.png);
}
.p-flow .bg03 {
	bottom: 0;
	left: 0;
	width: 14rem;
	height: 14rem;
	background-image: url(../img/flow-bg03.png);
}
.p-flow .head h2 {
	font-size: 2.2rem;
}
.p-flow ol li::after {
	content: '';
	display: block;
	margin: 4rem auto 2.5rem auto;
	width: 5rem;
	height: 3rem;
	background-image: url(../img/flow-arrow.svg);
	background-size: contain;
}
.p-flow ol li:last-child::after {
	content: none;
}
.p-flow .title {
	position: relative;
	font-size: 2rem;
}
.p-flow .title h3 {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding-left: 12.8rem;
	padding-bottom: 0.4rem;
}
.p-flow .sns {
	margin: 2rem 0 3.8rem 0;
	padding: 0 3rem;
	font-size: 2rem;
}
.p-flow .sns:last-child {
	margin-bottom: 0;
}
.p-flow .sns a {
	display: flex;
	align-items: center;
	height: 10rem;
	border: 0.2rem solid #fff;
	text-align: center;
}
.p-flow .sns a em {
	display: block;
	flex-basis: 50%;
}
.p-flow .sns a span {
	display: block;
	flex-basis: 50%;
	border-left: 0.1rem solid #fff;
}
.p-flow .sns a span img {
	margin: 0 auto;
	width: 7rem;
}
.p-flow p {
	margin-top: 1rem;
	font-weight: 600;
	font-size: 1.6rem;
}
.p-flow p a {
	color: #ff777e;
}
.p-flow p a img {
	position: relative;
	top: 0.2rem;
	display: inline-block;
	margin: 0 0.3rem;
	width: 1.4rem;
}