@charset "UTF-8";

@font-face {
	font-family: 'FoundersGroteskSB';
	src: url('/assets/front/font/FoundersGrotesk-Semibold.otf') format('opentype');
}

@font-face {
	font-family: 'FoundersGroteskR';
	src: url('/assets/front/font/FoundersGrotesk-Regular.otf') format('opentype');
}

@font-face {
	font-family: 'ryo-gothic-plusn-r';
	src: url('/assets/front/font/RyoGothicPlusN-Regular.otf') format('opentype');
}

@font-face {
	font-family: 'ryo-gothic-plusn-m';
	src: url('/assets/front/font/ryogothicplusn-medium.otf') format('opentype');
}

:root {
	--colorMain: #000B4B;
	--colorBase01: #D8D8D8;
	--colorBase02: #636B6F;
	--colorMainWt: #FFF;
	--colorMainBk: #000;
	--fontEn: "scale-variable", sans-serif;
	--fontSettingsNormal: "wght"400, "wdth"125;
	--fontSettingsBold: "wght"500, "wdth"125;
}

@media screen and (max-width: 768px) {
	html {
		overflow-x: hidden;
	}

	.logo {
		position: absolute;
		top: 8%;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		width: 90%;
		z-index: 4;
		display: flex;
		color: #fff;
		flex-direction: column-reverse;
	}

	.logo .text p:first-child {
		font-size: 32px;
		line-height: 1;
		font-family: 'FoundersGroteskSB';
	}

	.logo img {
		width: 100px;
		margin-bottom: 40px;
	}

	.lp_overlay {
		position: absolute;
		inset: 0;
	}

	.menu-wrapper {
		overflow: scroll;
		width: 92%;
		position: absolute;
		left: 4%;
		top: 38%;
		z-index: 5;
		margin-left: 0;
		height: 35%;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.menu-wrapper::-webkit-scrollbar {
		display: none;
	}

}

img {
	width: 100%;
}

@media screen and (min-width: 769px) {
	.lp_overlay {
		position: absolute;
		inset: 0;
		pointer-events: none;
	}
}

#header {
	position: relative;
	z-index: 100;
	background-color: #fff;
}

.contentWrap {
	color: var(--colorMainBk);
	position: relative;
}

.contentWrap .fv {
	border-bottom: 1px solid #000;
}

#casual .loopSlideWrap {
	position: relative
}

#casual .loopSlideWrap .loopSlide {
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

#casual .intro .loopSlide {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#casual .loopSlideWrap .loopSlide:nth-child(2) {
	top: 35px;
	position: relative;
}

#casual .loopSlideWrap .loopSlide .title {
	width: 84.6666666667%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

@media screen and (min-width: 769px) {
	#casual .loopSlideWrap .loopSlide .title {
		width: 54.6875%;
	}
}

#casual .loopSlideWrap .loopSlide .wrap {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	overflow: hidden;
}

#casual .loopSlideWrap .loopSlide .list {
	display: flex;
	flex-flow: row nowrap;
	margin: 0;
	padding: 0;
}

#casual .loopSlideWrap .loopSlide .list--first {
	animation: slide1 100s -50s linear infinite;
	backface-visibility: hidden;
	will-change: transform;
}

#casual .loopSlideWrap .loopSlide .list--second {
	animation: slide2 100s linear infinite;
}

#casual .loopSlideWrap .loopSlide .item {
	display: inline-block;
	width: 40%;
	min-width: 150px;
	margin-right: 8px;
}

@media screen and (min-width: 769px) {
	#casual .loopSlideWrap .loopSlide .item {
		width: 38.3333333333%;
		min-width: 276px;
		margin-right: 14px;
	}
}

#casual .loopSlideWrap .loopSlide .item a {
	display: block;
}

#casual .loopSlideWrap .loopSlide .item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#casual .block__mainImg .loopSlideWrap .loopSlide:first-child .item img {
	filter: brightness(0.5);
}

#casual .intro .loopSlide .item img {
	border-left: solid 1px #000;
	border-right: 1px solid #000;
}

#casual .intro {
	background-color: var(--colorBase01);
	position: relative;
	z-index: 1;
	overflow: hidden;
}

@media screen and (min-width: 769px) {
	#casual .intro {
		position: relative;
		z-index: 2;
	}
}

#casual .intro__inner {
	padding: 60px 0;
}

@media screen and (min-width: 769px) {
	#casual .intro__inner {
		max-width: 800px;
		margin: 0 auto;
		padding: 120px 0 110px;
	}
}

#casual .intro__text {
	font-family: 'ryo-gothic-plusn-r';
	color: var(--colorMainBk);
	font-size: 13px;
	line-height: 2.6;
	text-align: center;
}

@media screen and (min-width: 769px) {
	#casual .intro__text {
		font-size: 15px;
	}
}

#casual .intro__loopSlideWrap {
	margin-top: 30px;
}

@media screen and (min-width: 769px) {
	#casual .intro__loopSlideWrap {
		margin-top: 120px;
	}
}

#casual .intro__loopSlideWrap .loopSlide .item {
	min-width: 246px;
	margin-right: -1px;
}

@media screen and (min-width: 769px) {
	#casual .intro__loopSlideWrap .loopSlide .item {
		width: 25.6944444444%;
		min-width: 370px;
	}
}

#casual .intro__cvBtn {
	width: 79.4871794872%;
	margin: 40px auto 0;
}

@media screen and (min-width: 769px) {
	#casual .intro__cvBtn {
		width: 90%;
		max-width: 520px;
		margin: 110px auto 0;
	}

	#casual .inner .intro__cvBtn {
		position: absolute;
		bottom: 25px;
		z-index: 3;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
}

#casual .inner .intro__cvBtn a {
	border: 1px solid #707070;
	box-shadow: 3px 3px 3px#222222
}

#casual .intro__cvBtn .c-btn:link {
	font-size: 14px;
}

@media screen and (min-width: 769px) {
	#casual .intro__cvBtn .c-btn:link {
		font-size: 16px;
	}
}

#casual .pcContent {
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 769px) {
	#casual .flexLayout {
		display: flex;
		position: relative;
		background: #D8D8D8;
	}
}

#casual .flexLayout:not(:first-of-type) .section {
	border-top: 1px solid #B1A38C;
}

#casual .stickyArea {
	display: none;
}

@media screen and (min-width: 769px) {
	#casual .stickyArea {
		display: block;
		width: 50%;
		height: 100vh;
		position: sticky;
		top: 0;
	}
}

#casual .stickyArea--left .inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}

#casual .stickyArea--right {
	flex-basis: calc((100% - 600px) * 0.255952381);
}

#casual .menu {
	margin-left: 0;
}

@media screen and (min-width: 769px) {
	#casual .menu__inner {
		width: 90%;
		padding: min(1.736vw, 25px) 0 0;
	}
}

#casual .menu__loopSlideWrap {
	margin-bottom: -3.6111111111%;
}

#casual .menu__loopSlideWrap .loopSlide .item {
	width: 135.641025641%;
	min-width: 529px;
	margin-right: 20px;
}

#casual .menu__list {
	width: 86.1111111111%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.513vw 0.6451612903%;
}

@media screen and (min-width: 769px) {
	#casual .menu__list {
		gap: min(0.139vw, 2px) 0.6451612903%;
	}
}

#casual .menu__item {
	width: 32.9032258065%;
}

#casual .menu__item a {
	display: block;
	width: 100%;
	position: relative;
}

#casual .menu__item a::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(217, 217, 217, 0) 40%, rgb(77, 89, 95) 100%);
	mix-blend-mode: multiply;
	z-index: 1;
}

#casual .menu__item a .itemName {
	display: block;
	width: 100%;
	position: absolute;
	bottom: 4.2857142857%;
	left: 50%;
	transform: translateX(-50%);
	color: var(--colorMainWt);
	z-index: 2;
	font-size: 10px;
	font-family: var(--fontEn);
	font-variation-settings: var(--fontSettingsBold);
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-align: center;
}

@media screen and (min-width: 769px) {
	#casual .menu__item a .itemName {
		font-size: min(0.694vw, 10px);
	}
}

#casual .menu__item a .itemName.mbL {
	bottom: 9.2857142857%;
}

#casual .menu--sp {
	background-color: var(--colorBase02);
	position: relative;
	z-index: 1;
	height: 100vh;
}

@media screen and (min-width: 769px) {
	#casual .menu--sp {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	#casual .menu--pc {
		display: none;
	}

	#casual .intro__text {
		padding-left: 30px;
		padding-right: 30px;
		font-size: 12px;
	}

	#casual .intro__cvBtn {
		height: 50px;
		line-height: 10px;
		width: 90%;
		max-width: 320px;
		font-size: 18px;
	}

	#casual .inner .intro__cvBtn {
		position: absolute;
		bottom: 50px;
		z-index: 3;
		left: 50%;
		max-width: initial;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
}

#casual .menu__list.js-anim .menu__item {
	opacity: 0;
}

#casual .menu__list.is-active .menu__item {
	opacity: 1;
	transition: opacity 0.4s;
}

#casual .menu__list.is-active .menu__item:nth-of-type(2) {
	transition-delay: 0.3s;
}

#casual .menu__list.is-active .menu__item:nth-of-type(3) {
	transition-delay: 0.6s;
}

#casual .menu__list.is-active .menu__item:nth-of-type(4) {
	transition-delay: 0.9s;
}

#casual .menu__list.is-active .menu__item:nth-of-type(5) {
	transition-delay: 1.2s;
}

#casual .sectionWrapper {
	background-color: var(--colorBase01);
}

@media screen and (min-width: 769px) {
	#casual .sectionWrapper {
		width: 50%;
		position: relative;
		right: 0;
		z-index: 1;
		box-shadow: -1px 0 8px rgba(0, 0, 0, 0.2);
	}
}

#casual .sectionWrapper .shadowLayer {
	display: none;
}

@media screen and (min-width: 769px) {
	#casual .sectionWrapper .shadowLayer {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		overflow: hidden;
		z-index: -1;
	}

	#casual .sectionWrapper .shadowLayer::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 100%;
		background-color: var(--colorBase01);
		filter: drop-shadow(0 4px 12px rgba(26, 26, 26, 0.6));
		z-index: -1;
	}
}

#casual .section {
	width: 100%;
}

#casual .section__heading .inner {
	width: 89.7435897436%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--colorMainBk);
	border-bottom: 1px solid var(--colorMainBk);
	overflow: hidden;
}

@media screen and (min-width: 769px) {
	#casual .section__heading .inner {
		width: 100%;
		height: 88px;
	}
}

#casual .section__heading .inner .num {
	display: block;
	text-align: right;
	padding-right: 40px;
	position: relative;
	font-family: 'ryo-gothic-plusn-m';
}

@media screen and (min-width: 769px) {
	#casual .section__heading .inner .num {
		width: 50%;
		font-size: 12px;
	}
}

#casual .section__heading .inner .num::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: -10.3092783505%;
	transform: translateY(-50%);
	width: 1px;
	height: 130.4347826087%;
	background-color: var(--colorMainBk);
}

@media screen and (min-width: 769px) {
	#casual .section__heading .inner .num::after {
		right: -17.2413793103%;
	}
}

#casual .section__heading .inner .num img {
	opacity: 0;
	transform: rotateY(0.7turn);
}

#casual .section__heading .inner .num.is-active img {
	transform: rotateY(1turn);
	opacity: 1;
	transition: 1s;
}

#casual .section__heading .inner .itemName {
	display: flex;
	align-items: center;
}

#casual .section__heading .inner .itemName .wrap {
	overflow: hidden;
}

#casual .section__heading .inner .itemName span {
	display: block;
	font-size: 28px;
	font-family: var(--fontEn);
	font-variation-settings: var(--fontSettingsBold);
	letter-spacing: 0.05em;
}

@media screen and (min-width: 769px) {
	#casual .section__heading .inner .itemName {
		width: 50%;
		border-right: 1px solid var(--colorMainBk);
		padding-left: 5%;
		height: 100%;
	}

	#casual .section__heading .inner .itemName2 {
		padding-left: 0;
		font-size: 12px;
		display: flex;
		justify-content: flex-end;
	}

	#casual .section__heading .inner .itemName2 .wrap {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}

	#casual .section__heading .inner .itemName2 .wrap span {
		font-family: 'ryo-gothic-plusn-m';
	}

	#casual .section__heading .inner .itemName span {
		font-size: 45px;
	}

}

#casual .section__heading .inner .itemName:first-child span {
	font-family: "FoundersGroteskSB";
}

#casual .section__heading .inner .itemName2 span {
	font-size: 12px;
	padding-right: 5%;
	font-family: 'ryo-gothic-plusn-m';
}

#casual .section__textArea {
	margin: 30px 30px 30px;
}

#casual .section__textArea .text {
	font-size: 12px;
	line-height: 2;
	font-family: 'ryo-gothic-plusn-r';
}

@media screen and (min-width: 769px) {
	#casual .section__textArea .text {
		font-size: 15px;
	}
}

#casual .section__blockWrapper {
	margin-top: 30px;
}

#casual .section:not(:first-of-type) {
	margin-top: 80px;
}

@media screen and (min-width: 769px) {
	#casual .section:not(:first-of-type) {
		margin-top: 100px;
	}
}

#casual .section .section__heading.js-anim .itemName span,
#casual .section .section__heading.js-anim .num {
	transform: translateY(100%);
}

#casual .section .section__heading.is-active .itemName .wrap:nth-of-type(2) span,
#casual .section .section__heading.is-active .num {
	transition-delay: 0.2s;
}

#casual .section .section__heading.is-active .itemName span,
#casual .section .section__heading.is-active .num {
	transform: translateY(10%);
	transition: 1.2s cubic-bezier(0.86, 0, 0.07, 1);
}

#casual .block {
	width: 100%;
}

#casual .block__mainImg {
	position: relative;
	overflow: hidden;
}

#casual .block__mainImg::before {
	content: "";
	display: block;
	padding-top: 100.846154%;
}

#casual .block__mainImg .loopSlideWrap {
	position: absolute;
	top: 40.333333%;
}

#casual .stylingWrap a:hover {
	opacity: 1;
	cursor: initial;
}

#casual .block__mainImg .stylingWrap {
	width: 92.3076923077%;
	position: absolute;
	top: 12.8333333333%;
	left: 50%;
	transform: translateX(-50%);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#casual .block__mainImg .stylingWrap::before {
	content: "";
	display: block;
	padding-top: 127.777778%;
}

#casual .block__mainImg .stylingWrap .img {
	position: absolute;
}

#casual .block__mainImg .text {
	width: 27.6923076923%;
	position: absolute;
	bottom: 3%;
	left: 5.1282051282%;
}

@media screen and (min-width: 769px) {
	#casual .block__mainImg .text {
		width: 24%;
	}
}

#casual .block__mainImg .copyright {
	width: 14.1025641026%;
	position: absolute;
	right: 5.1282051282%;
	bottom: 3%;
}

#casual .block__mainImg {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	padding-bottom: 10px;
}

#casual .block__mainImg .loopSlideWrap .loopSlide .item {
	width: 127.4358974359%;
	min-width: 600px;
}

@media screen and (min-width: 769px) {
	#casual .block__mainImg .loopSlideWrap .loopSlide .item {
		width: 125%;
		min-width: 750px;
	}
}

@media screen and (min-width: 769px) {
	#casual .block__credit {
		width: 100%;
	}

	#casual .block__credit a {
		width: 50%;
		display: block;
		height: 60px;
		line-height: 60px;
		font-size: 21px;
	}

	#casual .block__credit a:hover {
		opacity: 1;
		color: #fff
	}
}

#casual .block__credit .group {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	margin-bottom: 120px;
}

#casual .block__credit .group:not(:first-of-type) {
	margin-top: 20px;
}

@media screen and (min-width: 769px) {
	#casual .block__credit .textWrap {
		padding: 40px;
		border-bottom: 1px solid #000;
	}
}

#casual .block__credit .textWrap span {
	display: block;
	font-size: 11px;
	color: var(--colorMainBk);
	font-family: var(--fontEn);
	font-variation-settings: var(--fontSettingsNormal);
}

@media screen and (min-width: 769px) {
	#casual .block__credit .textWrap span {
		font-size: 22px;
	}

	#casual .block__credit .textWrap span.tax {
		font-size: 12px;
	}
}

#casual .block__credit .textWrap span.itemName {
	line-height: 1.2;
	font-family: 'ryo-gothic-plusn-m';
}

#casual .block__credit .textWrap span.price {
	margin-top: 6px;
	font-family: 'ryo-gothic-plusn-m';
}

@media screen and (min-width: 769px) {
	#casual .block__credit .textWrap span.tax {
		position: relative;
		top: 5px;
	}
}

#casual .block__credit .textWrap span.price {
	margin-top: 8px;
	font-size: 24px;
	display: flex;
	align-items: center;
}

#casual .block__credit .btnWrap {
	width: 28.2051282051%;
}

@media screen and (min-width: 769px) {
	#casual .block__credit .btnWrap {
		width: 100%;
		padding: 40px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #000;
	}

	#casual .block--02 .btnWrap {
		border-bottom: none;
	}
}

#casual .block__credit .btnWrap .c-btn:link {
	width: 100%;
}

@media screen and (min-width: 769px) {
	#casual .block__credit .btnWrap .c-btn:link {
		font-size: 12px;
		padding: 10px 0;
	}
}

#casual .block--01 .block__mainImg .stylingWrap .img.js-anim {
	opacity: 0;
}

#casual .block--01 .block__mainImg .stylingWrap .img.is-active {
	opacity: 1;
	transition: opacity 0.8s ease-out, left 0.8s ease-out;
}

#casual .block--01 .block__mainImg .stylingWrap .img:nth-of-type(1) {
	width: 42.111111%;
	top: 7.195652%;
	left: 7.0555555556%;
}

#casual .block--01 .block__mainImg .stylingWrap .img:nth-of-type(1).is-active {
	left: 12.722222%;
}

#casual .block--01 .block__mainImg .stylingWrap .img:nth-of-type(2) {
	width: 33.666667%;
	top: -4.304348%;
	left: 47.2222222222%;
}

#casual .block--01 .block__mainImg .stylingWrap .img:nth-of-type(2).is-active {
	left: 53%;
	transition-delay: 0.3s;
}

#casual .block--02 .block__mainImg .stylingWrap .img.js-anim {
	opacity: 0;
}

#casual .block--02 .block__mainImg .stylingWrap .img.is-active {
	opacity: 1;
	transition: opacity 0.8s ease-out, left 0.8s ease-out;
}

#casual .block--02 .block__mainImg .stylingWrap .img:nth-of-type(1) {
	width: 47.111111%;
	top: 15.195652%;
	left: 7.0555555556%;
	z-index: 2;
}

#casual .block--02 .block__mainImg .stylingWrap .img:nth-of-type(1).is-active {
	left: 14.422222%;
}

#casual .block--02 .block__mainImg .stylingWrap .img:nth-of-type(2) {
	width: 31.986667%;
	top: -3.304348%;
	left: 47.2222222222%;
}

#casual .block--02 .block__mainImg .stylingWrap .img:nth-of-type(2).is-active {
	left: 53%;
	transition-delay: 0.3s;
}

#casual .block--03 .block__mainImg .stylingWrap .img.js-anim {
	opacity: 0;
}

#casual .block--03 .block__mainImg .stylingWrap .img.is-active {
	opacity: 1;
	transition: opacity 0.8s ease-out, left 0.8s ease-out;
}

#casual .block--03 .block__mainImg .stylingWrap .img:nth-of-type(1) {
	width: 37.111111%;
	top: -4.004348%;
	left: 7.0555555556%;
}

#casual .block--03 .block__mainImg .stylingWrap .img:nth-of-type(1).is-active {
	left: 12.722222%;
}

#casual .block--03 .block__mainImg .stylingWrap .img:nth-of-type(2) {
	width: 28.896667%;
	top: -4.304348%;
	left: 47.2222222222%;
}

#casual .block--03 .block__mainImg .stylingWrap .img:nth-of-type(2).is-active {
	left: 56%;
	transition-delay: 0.3s;
}

#casual .block:not(:first-of-type) {
	margin-top: 80px;
}

@media screen and (min-width: 769px) {
	#casual .block:not(:first-of-type) {
		margin-top: 90px;
	}
}

@media screen and (max-width: 768px) {
	#casual .block__mainImg::before {
		padding-top: 125.846154%;
	}

	#casual .block--01 .block__mainImg .stylingWrap .img:nth-of-type(1) {
		width: 55.111111%;
		top: 8.695652%;
		left: 7.0555555556%;
	}

	#casual .block--01 .block__mainImg .stylingWrap .img:nth-of-type(1).is-active {
		left: -1.277778%;
	}

	#casual .block--01 .block__mainImg .stylingWrap .img:nth-of-type(2) {
		width: 44.666667%;
		top: -7.304348%;
		left: 47.2222222222%;
	}

	#casual .block--01 .block__mainImg .stylingWrap .img:nth-of-type(2).is-active {
		left: 51%;
		transition-delay: 0.3s;
	}

	#casual .block--02 .block__mainImg .stylingWrap .img.js-anim {
		opacity: 0;
	}

	#casual .block--02 .block__mainImg .stylingWrap .img.is-active {
		opacity: 1;
		transition: opacity 0.8s ease-out, left 0.8s ease-out;
	}

	#casual .block--02 .block__mainImg .stylingWrap .img:nth-of-type(1) {
		width: 62.111111%;
		top: 16.195652%;
		left: 7.0555555556%;
		z-index: 2;
	}

	#casual .block--02 .block__mainImg .stylingWrap .img:nth-of-type(1).is-active {
		left: 1.422222%;
	}

	#casual .block--02 .block__mainImg .stylingWrap .img:nth-of-type(2) {
		width: 42.486667%;
		top: -8.304348%;
		left: 47.2222222222%;
	}

	#casual .block--02 .block__mainImg .stylingWrap .img:nth-of-type(2).is-active {
		left: 52%;
		transition-delay: 0.3s;
	}

	#casual .block--03 .block__mainImg .stylingWrap .img.js-anim {
		opacity: 0;
	}

	#casual .block--03 .block__mainImg .stylingWrap .img.is-active {
		opacity: 1;
		transition: opacity 0.8s ease-out, left 0.8s ease-out;
	}

	#casual .block--03 .block__mainImg .stylingWrap .img:nth-of-type(1) {
		width: 49.111111%;
		top: -7.004348%;
		left: 7.0555555556%;
	}

	#casual .block--03 .block__mainImg .stylingWrap .img:nth-of-type(1).is-active {
		left: 1.722222%;
	}

	#casual .block--03 .block__mainImg .stylingWrap .img:nth-of-type(2) {
		width: 38.396667%;
		top: -7.304348%;
		left: 47.2222222222%;
	}

	#casual .block--03 .block__mainImg .stylingWrap .img:nth-of-type(2).is-active {
		left: 56%;
		transition-delay: 0.3s;
	}

	#casual .section__heading .inner .itemName span {
		font-size: 40px;
	}

	#casual .block__credit .btnWrap {
		width: calc(100% - 40px);
		margin: 0 auto;
		margin-bottom: 0;
		padding: 20px 0;
	}

	#casual .section__heading .inner .num {
		padding-right: 15px;
		text-align: left;
	}

	#casual .block__credit .group {
		justify-content: center;
		margin-bottom: 0;
	}

	#casual .section__heading .inner {
		width: 100%;
	}

	.section__inner {
		padding-top: 80px;
	}
}

.attention {
	margin-left: 30px;
	margin-right: 30px;
	font-family: 'ryo-gothic-plusn-r';
	font-size: 10px;
	padding-left: 1em;
	text-indent: -1em;
}

a.c-btn {
	display: inline-block;
	color: var(--colorMainWt);
	background-color: #000;
	font-family: 'FoundersGroteskSB';
	font-variation-settings: var(--fontSettingsBold);
	letter-spacing: 0.05em;
	font-size: 21px !important;
	padding: 0 !important;
	height: 60px;
	line-height: 60px;
	text-align: center;
	box-sizing: border-box;
	border: none;
	border-radius: 50px;
	transition: 0.2s;
	box-shadow: 3px 3px 3px #B5B5B5;
}

@media screen and (min-width: 769px) {
	.c-btn:link {
		font-size: 14px;
	}
}

.c-btn:hover {
	opacity: 1;
}

.c-btn--wide:link {
	width: 100%;
	padding: 20px 0;
}

@media screen and (min-width: 769px) {
	.c-btn--wide:link {
		padding: 22px 0;
	}
}

.c-btn--wide:hover {
	color: #fff;
}

.c-btn:not(:first-of-type) {
	margin-top: 20px;
}

@media screen and (min-width: 769px) {
	.c-btn:not(:first-of-type) {
		margin-top: 30px;
	}
}

.pc-none {
	display: block;
}

@media screen and (min-width: 769px) {
	.pc-none {
		display: none !important;
	}
}

.sp-none {
	display: block;
}

@media screen and (max-width: 768px) {
	.sp-none {
		display: none !important;
	}

	a.c-btn {
		height: 50px;
		line-height: 46px;
		width: 17px;
		top: 3px;
	}
}

.js-fadeAnim {
	opacity: 0;
}

.js-fadeAnim.is-active {
	opacity: 1;
	transition: 0.8s;
}

@keyframes slide1 {
	0% {
		transform: translateX(100%);
	}

	to {
		transform: translateX(-100%);
	}
}

@keyframes slide2 {
	0% {
		transform: translateX(0);
	}

	to {
		transform: translateX(-200%);
	}
}


@keyframes width {
	0% {
		transform: scaleX(0);
	}

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

.wrap {
	overflow: initial;
}

.header {
	z-index: 2;
}

.color-chip-list {
	display: flex;
}

.color-chip-list li {
	position: relative;
	display: block;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 1px solid gray;
}

.color-chip-list li.white::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #fff;
}

.color-chip-list li.black::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #000;
}

.color-chip-list li.gray::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #B7B7B7;
}

.color-chip-list li:not(:last-child) {
	margin-right: 8px;
}


@media screen and (min-width: 769px) {
	.logo {
		position: absolute;
		top: 7%;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		width: 86%;
		z-index: 5;
		display: flex;
		color: #fff;
		justify-content: space-between;
		align-items: flex-start;
	}

	.logo .text p:first-child {
		font-size: 40px;
		line-height: 1;
		font-family: 'FoundersGroteskSB';
	}

	.logo img {
		width: 100px;
	}

	.item-btn {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		bottom: 5%;
		background: #000;
		text-align: center;
		border-radius: 5px;
		z-index: 3;
		width: 350px;
		max-width: 350px;
		margin: 80px auto 0;
	}

	#ss-article-detail p.goodsName {
		color: #fff;
		font-size: 16px;
	}
}

.menu__list {
	padding-left: 0;
}

.itemName {
	display: block;
	transform: scale(1.02);
}

#ss-article-detail p.category {
	color: #fff;
	font-family: 'FoundersGroteskSB';
	font-size: 22px;
}

#ss-article-detail p.goodsName {
	color: #fff;
	font-family: 'ryo-gothic-plusn-m';
	font-size: 14px;
}

.background {
	width: 100%;
	background: #666;
	content: "";
	display: block;
	position: absolute;
	inset: 0;
}

.background .person {
	position: absolute;
}

.background img {
	position: absolute;
	bottom: 16%;
	width: 25%;
	opacity: 0;
}

.background img:first-child {
	left: -1%;
}

.background img:nth-child(2) {
	left: 18%;
}

.background img:nth-child(3) {
	left: 45%;
}

.background img:nth-child(4) {
	left: 70%;
}

.background img:nth-child(5) {
	left: 80%;
}

.person {
	position: relative;
	transition: transform .3s ease;
}

.person.is-active {
	z-index: 4;
	opacity: 1;
}

.item-info-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #000;
}

.item-info-wrap .text {
	padding: 30px;
	border-right: 1px solid #000;
	font-family: 'FoundersGroteskR';
	font-size: 14px;
	width: 50%;
}

.item-info-wrap .text p:first-child {
	background: #FFFFFF;
	display: inline-block;
	line-height: 1;
	padding: 2px 5px;
	border-radius: 3px;
	margin-bottom: 5px;
}

.item-info-wrap .text p:last-child {
	font-family: 'ryo-gothic-plusn-r';
	font-family: 'FoundersGroteskR';
	font-size: 14px;
}

.item-info-wrap .color-chip {
	padding: 30px;
	display: flex;
	flex-direction: column;
	width: 50%;
}

.item-info-wrap .color-chip+p {
	display: block;
}

.item-info-wrap .color-chip-list {
	margin-bottom: 10px;
	width: 100%;
	margin-right: auto;
	display: flex;
	justify-content: flex-end;
	margin-left: 0;
}

.item-info-wrap .size-chip-list {
	width: 100%;
	margin-left: 0;
	margin-bottom: 10px;
	text-align: right;
	display: flex;
	justify-content: flex-end;
}

.item-info-wrap .color-chip-list+p {
	text-align: right;
	margin-top: 10px;
	font-family: 'ryo-gothic-plusn-r';
	font-size: 12px;
	margin-right: -12px;
}

.item-info-wrap .size-chip-list li {
	width: 25px;
	border: 1px solid #959595;
	text-align: center;
	border-radius: 50%;
	height: 25px;
	line-height: 25px;
	margin-right: 8px;
}

.item-info-wrap .size-chip-list li:last-child {
	margin-right: 0;
}

.menu-wrapper p.goodsName {
	font-size: 20px;
}

#casual .menu-wrapper .menu:hover,
#casual .menu-wrapper .menu a:hover {
	opacity: 1;
}

#casual .stickyArea .menu-wrapper {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

#casual .stickyArea .menu-wrapper ::-webkit-scrollbar {
	display: none;
}


@media screen and (min-width: 769px) {
	#casual .stickyArea {
		display: block;
		width: 50%;
		height: 100vh;
		position: sticky;
		top: 0;
		overflow: hidden;
	}

	#casual .stickyArea--left .inner {
		position: absolute;
		width: 100%;
	}

	#casual .stickyArea .menu-wrapper {
		list-style: none;
		padding: 0;
		margin: 0;
		width: 230px;
		position: absolute;
		left: 7%;
		top: 32%;
		z-index: 5;
		overflow: scroll;
		height: 40%;
	}

	#casual .stickyArea .menu-wrapper .menu {
		cursor: pointer;
		padding: 1em;
		padding-left: 0;
		color: #fff;
		margin-bottom: 50px;
		opacity: 0.35;
	}

	#casual .stickyArea .menu-wrapper .menu:last-child {
		margin-bottom: 0;
	}

	#casual .stickyArea .menu-wrapper .menu:hover .category,
	#casual .stickyArea .menu-wrapper .menu:hover .goodsName {
		text-decoration: underline;
	}

	#casual .stickyArea .menu-wrapper .menu:hover {
		opacity: 1;
	}

	#casual .stickyArea .lp_overlay {
		position: absolute;
		inset: 0;
		z-index: 3;
		pointer-events: none;
		background: linear-gradient(to top,
				rgba(0, 0, 0, 1),
				rgba(0, 0, 0, 0));
		transition: opacity 0.3s ease;
	}

	#casual .stickyArea.is-hover .lp_overlay {
		opacity: 0.2;
	}

	#casual .stickyArea .background {
		position: absolute;
		inset: 0;
	}

	#casual .stickyArea .background img {
		position: absolute;
		bottom: 2.5%;
		opacity: 0.3;
		filter: none;
	}

	#casual .stickyArea .background img.is-active {
		opacity: 1;
	}

	#casual .stickyArea .background img:nth-child(1) {
		width: 27%;
	}

	#casual .stickyArea .background img:nth-child(2) {
		width: 35%;
	}

	#casual .stickyArea .background img:nth-child(3) {
		width: 30.5%;
	}

	#casual .stickyArea .background img:nth-child(4) {
		width: 33%;
	}

	#casual .stickyArea .background img.is-active {
		z-index: 3;
	}

	.item-info-wrap .color-chip p {
		text-align: right;
	}
}

@media screen and (max-width: 768px) {
	#casual .stickyArea {
		width: 100%;
		height: initial;
		top: 0;
	}

	.item-info-wrap .color-chip-list+p {
		text-align: left;
		margin-top: 0;
	}

	.item-info-wrap .color-chip-list {
		width: initial;
		margin-left: 0;
	}

	.item-info-wrap .size-chip-list {
		margin-bottom: 8px;
		width: initial;
		margin-left: 0;
	}

	.item-info-wrap .size-chip-list+p {
		text-align: left;
	}

	.item-info-wrap .color-chip {
		padding: 20px;
		width: initial;
		border-left: 1px solid #000;
	}

	#casual .intro__loopSlideWrap {
		margin-top: 70px;
	}

	#casual .intro__inner {
		padding-top: 70px;
	}

	#casual .block__credit .textWrap {
		padding: 30px 20px;
		border-bottom: 1px solid #000;
		margin-bottom: 0;
		text-align: left;
	}

	.item-info-wrap .text {
		padding: 12px 20px;
		border-right: 0;
		font-size: 12px;
	}

	#casual .block__credit .textWrap span.itemName {
		font-size: 18px;
	}

	#casual .block__credit .textWrap span.price {
		font-size: 18px;
	}

	#casual .section__heading .inner .itemName {
		margin-left: 20px;
		margin-right: 20px;
		min-height: 70px;
	}

	#casual .section__heading .inner .itemName2 {
		border-left: 1px solid #000;
		margin-left: 0;
		margin-right: 0;
		padding: 20px;
	}

	#casual .section__heading .inner .itemName2 span {
		font-size: 12px;
		padding-right: 0;
	}

	.copyright {
		color: #fff;
		top: 60px;
	}

	.menu-wrapper .menu {
		cursor: pointer;
		padding: 1em;
		color: #fff;
		margin-bottom: 50px;
		border-bottom: 1px solid #fff;
		position: relative;
	}

	#casual .stickyArea .menu-wrapper .menu:hover,
	#casual .stickyArea .menu-wrapper .menu a:hover {
		opacity: 1 !important;
	}

	#ss-article-detail p.category {
		font-size: 20px;
		line-height: 1;
	}

	#ss-article-detail p.goodsName {
		font-size: 12px;
	}

	.menu-wrapper .menu img {
		display: inline-block;
		width: 22px;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
	}

	.menu-wrapper .menu:hover {
		opacity: 1;
	}

	.lp_overlay {
		position: absolute;
		inset: 0;
		z-index: 3;
		pointer-events: none;
		background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
		transition: opacity 0.3s ease;
	}

	#casual .background img:nth-child(1) {
		width: 27%;
	}

	#casual .background img:nth-child(2) {
		width: 35%;
	}

	#casual .background img:nth-child(3) {
		width: 30.5%;
	}

	#casual .background img:nth-child(4) {
		width: 33%;
	}

	.background img:first-child {
		left: -1%;
	}

	.background img:nth-child(2) {
		left: 18%;
	}

	.background img:nth-child(3) {
		left: 45%;
	}

	.background img:nth-child(4) {
		left: 70%;
	}

	#casual .stickyArea .background {
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	#casual .stickyArea .background img {
		position: absolute;
		bottom: 0%;
		width: 27%;
	}

	#casual .stickyArea .background img:nth-child(2) {
		width: 35%;
	}

	#casual .stickyArea .background img:nth-child(3) {
		width: 30.5%;
	}

	#casual .stickyArea .background img:nth-child(4) {
		width: 33%;
	}

	#casual .stickyArea .background img.active {
		filter: brightness(100%);
	}

	#casual .stickyArea .background img {
		opacity: 0;
	}

	#casual .stickyArea .background img.active {
		opacity: 1;
		z-index: 5;
	}
}

.lp_footer {
	content: "";
	width: 100%;
	height: 100vh;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.lp_footer {
	position: relative;
}

.lp_footer div {
	text-align: center;
}

.lp_footer img {
	width: 110px;
	margin: 0 auto;
}

.copyright {
	color: #fff;
	position: relative;
	top: 40px;
}

.dropdown-content {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	max-width: 630px;
	width: 90%;
	visibility: hidden;
	padding: 0 20px;
	border: 1px solid #000;
	margin: 0 auto;
	transform-origin: top center;
	transform: rotateX(-90deg) scaleY(0.8);
	transition:
		max-height 0.25s ease,
		transform 0.25s ease,
		opacity 0.15s ease,
		visibility 0s linear 0.25s;
}

.dropdown.open .dropdown-content {
	max-height: 2000px;
	opacity: 1;
	visibility: visible;
	padding: 20px;
	transform: rotateX(0deg) scaleY(1);
	transition:
		max-height 0.6s ease,
		transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
		opacity 0.35s ease;
}

.dropdown-trigger {
	cursor: pointer;
}

.dropdown-content .color-chip,
.dropdown-content .item-info-wrap .text {
	width: 100%;
}

.dropdown {
	text-align: center;
	display: inline-block;
}

.dropdown-trigger {
	font-family: "";
	font-family: 'FoundersGroteskSB';
	font-size: 20px;
	border-bottom: 1px solid #000;
	display: inline-block;
	padding-top: 30px;
	margin-bottom: 20px;
	justify-content: center;
}

.dropdown.open .dropdown-trigger {
	border-bottom: none;
}

.dropdown .item-info-wrap {
	display: block;
}

.dropdown .item-info-wrap .text {
	border-right: none;
	padding: 0;
	text-align: left;
	margin-bottom: 10px;
}

.dropdown .color-chip {
	padding: 0;
	text-align: left;
}

.dropdown .color-chip-list,
.dropdown .size-chip-list {
	margin-left: 0;
	justify-content: flex-start;
}

#casual .dropdown .textWrap {
	padding: 0;
}

#casual .dropdown .textWrap span.itemName,
#casual .dropdown .textWrap span.price {
	font-size: 16px;
	text-align: left;
}

#casual .dropdown .item-info-wrap {
	border-bottom: none;
	margin-right: 20px;
}

.dropdown-item-image {
	width: 100px;
	margin-right: 20px;
	object-fit: contain;
}

#casual .dropdown .btnWrap {
	padding: 20px 0;
	border-bottom: none;
}

#casual .dropdown .textWrap {
	border-bottom: none;
}


#casual .dropdown .btnWrap a {
	font-size: 15px !important;
	height: initial;
	line-height: 1;
	padding: 10px 10px !important;
}

.icon img {
	display: none;
	width: 20px;
	margin-left: 10px;
}

.dropdown:not(.open) .icon img:first-child {
	display: block;
}

.dropdown.open .icon img:last-child {
	display: block;
}

.dropdown-title {
	display: inline-block;
}

.icon {
	display: inline-block;
	position: relative;
	top: 3px;
}

@media screen and (max-width: 768px) {
	.dropdown {
		padding-top: 20px;
		border-top: 1px solid #000;
	}

	.block--01 .dropdown {
		margin-bottom: 0px !important;
	}

	.dropdown:last-child {
		margin-bottom: 80px;
	}

	#casual .section:not(:first-of-type) {
		margin-top: 0;
	}

	.dropdown-trigger {
		padding-top: 0;
	}

	.dropdown.open .dropdown-content {
		display: block;
	}

	#casual .dropdown .item-info-wrap {
		display: flex;
		margin-right: 0;
		justify-content: initial;
		align-items: flex-start;
	}

	#casual .dropdown .color-chip {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		border-left: none;
		align-items: flex-start;
	}

	#casual .dropdown .textWrap span.itemName,
	#casual .dropdown .textWrap span.price {
		font-size: 14px;
	}

	#casual .dropdown .textWrap span.tax {
		font-size: 10px;
	}

	#casual .dropdown .btnWrap {
		padding-bottom: 0;
		width: 100%;
	}

	#casual .dropdown .textWrap {
		margin-top: 20px;
	}

	.attention {
		margin-left: 20px;
		font-size: 9px;
	}

	.lp_footer {
		height: 200px;
	}
}