@charset "utf-8";

/*-------------------------
汎用css
---------------------------*/
.sp {
	display: none;
}
@media screen and (max-width: 640px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	span.sp {
		display: inline;
	}
}
.ib {
	display: inline-block;
	width: auto;
}
.ib-list .ib {
	margin-right: 1em;
}
a.ib:hover {
	color: var(--color-point);
}
.img-ox {
	overflow-x: auto;
	overflow-y: hidden;
}

/* box format */
.box-size {
	margin: 0 auto;
}
.inner-padding {
	padding-top: 120px;
	padding-bottom: 120px;
}
.inner-padding-top {
	padding-top: 120px;
}
.inner-padding-side {
	padding-right: 25px;
	padding-left: 25px;
}
.size-520 {
	max-width: 520px;
}
.inner-padding-side.size-520 {
	max-width: 570px;
}
.size-630 {
	max-width: 630px;
}
.inner-padding-side.size-630 {
	max-width: 680px;
}
.size-640 {
	max-width: 640px;
}
.inner-padding-side.size-640 {
	max-width: 690px;
}
.size-660 {
	max-width: 660px;
}
.inner-padding-side.size-660 {
	max-width: 710px;
}
.size-680 {
	max-width: 680px;
}
.inner-padding-side.size-680 {
	max-width: 730px;
}
.size-720 {
	max-width: 720px;
}
.inner-padding-side.size-720 {
	max-width: 770px;
}
.size-800 {
	max-width: 800px;
}
.inner-padding-side.size-800 {
	max-width: 850px;
}
.size-840 {
	max-width: 840px;
}
.inner-padding-side.size-840 {
	max-width: 890px;
}
.size-990 {
	max-width: 990px;
}
.inner-padding-side.size-990 {
	max-width: 1040px;
}
.size-1000 {
	max-width: 1000px;
}
.inner-padding-side.size-1000 {
	max-width: 1050px;
}
.size-1040 {
	max-width: 1040px;
}
.inner-padding-side.size-1040 {
	max-width: 1090px;
}
.size-1140 {
	max-width: 1140px;
}
.inner-padding-side.size-1140 {
	max-width: 1190px;
}
.size-1170 {
	max-width: 1170px;
}
.inner-padding-side.size-1170 {
	max-width: 1220px;
}
.bt {
	border-top: 1px solid var(--color-point);
}
@media screen and (max-width: 767px) {
	.inner-padding {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.inner-padding-top {
		padding-top: 50px;
	}
}

/* flex box */
.d-list,.id-list {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	flex-wrap: wrap;
}
.d-list > *:nth-child(n+3) {
	margin-top: 30px;
}
.d-list > dt {
	height: 100%;
	color: var(--color-point);
	font-size: .75rem;
	font-weight: 700;
	text-align: center;
	line-height: 1;
	padding: .3em 0;
	border: 1px solid var(--color-point);
	position: relative;
	top: .25em;
}
.d-list > dt::after {
	display: block;
	content: "";
	width: calc(100% - 8px);
	height: 100%;
	border-right: 1px solid var(--color-point);
	border-left: 1px solid var(--color-point);
	position: absolute;
	top: 0;
	left: 4px;
}
.d-list > dd {
	text-align: left;
	position: relative;
}
.d-list span {
	display: block;
}
.d-list-un {
	display: -webkit-box;
	display: flex;
}
.d-list-un dt {
	color: var(--color-point);
	font-size: .875em;
	font-weight: 700;
}
.d-list-app {
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
}
.d-list-app dt {
	width: 4.5em;
	color: var(--color-point);
}
.d-list-app dd {
	width: calc(100% - 4.5em);
}
.d-list-app dd > span {
	display: block;
	font-size: .875em;
}
.d-list-app dt::after {
	content: "：";
}
.d-theme-10 > dt {
	width: 10em;
}
.d-theme-10 > dd {
	width: calc(100% - 10em);
}
.d-theme-120 > dt {
	width: 100px;
}
.d-theme-120 > dd {
	width: calc(100% - 120px);
}
.idx-outer li {
	padding-left: 9.5em;
	position: relative;
}
.idx-outer span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.id-list > dt {
	text-align-last: justify;
	padding-right: 1em;
	position: relative;
}
.id-list > dt::after {
	display: block;
	content: "：";
	position: absolute;
	top: 0;
	right: .3em;
}
@media screen and (max-width: 640px) {
	.d-list {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-direction: column;
	}
	.d-list > dd {
		margin-top: 18px !important;
	}
	.d-list > dd+dt {
		margin-top: 30px !important;
	}
	.d-list-un {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-direction: column;
	}
	.d-theme-120 dt {
		width: 100%;
	}
	.d-theme-120 dd {
		width: 100%;
	}
	.id-list > dt {
		text-align-last: left;
	}
	.id-list > dt::after {
		display: inline-block;
		position: relative;
		top: auto;
		right: auto;
	}
	.id-list > dd+dt {
		margin-top: .5em;
	}
}

/* List */


/* title */
.title-02 {
	color: var(--color-point);
	font-family: var(--font-serif);
	font-size: 1.875rem;
	line-height: 1.4;
	letter-spacing: -.05em;
}
.title-02-center {
	text-align: center;
}
.title-02-app {
	color: var(--color-point);
	font-family: var(--font-serif);
	font-size: 1.375rem;
	text-align: center;
	line-height: 1.4;
	letter-spacing: -.05em;
}
.title-02-app span {
	display: block;
	content: "";
	color: #fff;
	font-size: 1.36em;
}
.title-02-app span::before,
.title-02-app span::after {
	color: var(--color-point);
}
.title-02-app span::before {
	content: "［";
}
.title-02-app span::after {
	content: "］";
}

/* font color */
.color-point {
	color: var(--color-point)!important;
}
.color-point2 {
	color: var(--color-point2);
}
.color-red {
	color: #f01414;
}
.color-yellow {
	color: #d5c114;
}

/* font family */
.font-serif {
	font-family: var(--font-serif);
}

/* font size */
.font-size-min {
	font-size: .75rem; /* 12px */
}
.font-size-s {
	font-size: .875rem!important; /* 14px */
}
.font-size-n {
	font-size: 1rem; /* 16px */
}
.font-size-l {
	font-size: 1.125rem; /* 18px */
}
.font-size-ll {
	font-size: 1.25rem; /* 20px */
	line-height: 1;
}

/* font weight */
.font-weight-400 {
	font-weight: 400;
}
.font-weight-500 {
	font-weight: 500;
}
.font-weight-700 {
	font-weight: 700;
}

/* text align */
.text-align-c {
	text-align: center;
}
.text-align-l-c {
	text-align: left;
}
@media screen and (max-width: 640px) {
	.text-align-l-c {
		text-align: center;
	}
}

/* text indet */
.text-indent {
	text-indent: 1em;
}

/* text vertical */
.text-vertical {
	writing-mode: vertical-rl;
}
/* text st */
.text-st {
	display: inline-block;
	position: relative;
}
.text-st::after {
	display: block;
	content: "";
	background-color: #f00;
	width: 100%;
	height: 3px;
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: rotate(-1deg);
	transform: rotate(-1deg);
}
@media screen and (max-width: 640px) {
	.text-st::after {
		-webkit-transform: rotate(-7deg);
		transform: rotate(-7deg);
	}
}

/* line height */
.line-h {
	line-height: 2;
}

/* letter spacing */
.letter-s {
	letter-spacing: -0.1em;
}

.letter-s-01 {
	letter-spacing: -0.01em;
} 

.letter-s-02 {
	letter-spacing: -0.05em;
} 

/* anchor */
.anchor-app a {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
	width: 100%;
	max-width: 320px;
	height: 90px;
	color: var(--color-point);
	font-size: 1.125rem;
	font-weight: 900;
	text-align: center;
	border: 1px solid var(--color-point);
	position: relative;
}
.anchor-app a::before,
.anchor-app a::after {
	display: block;
	content: "";
	width: 12px;
	height: 9px;
	border: 1px solid var(--color-point);
	position: absolute;
	top: 10px;
	right: 10px;
	transition: inherit;
}
.anchor-app a::before {
	border-top-width: 0;
	border-right-width: 0;
	top: 12px;
	right: 12px;
}
.anchor-app a:hover {
	background-color: var(--color-point);
	color: #000;
}
.anchor-app a:hover::before,
.anchor-app a:hover::after {
	border-color: #000;
}
.anchor-ib {
	display: inline-block;
	width: auto;
}
.anchor-ib:hover {
	color: var(--color-point);
}

.cv-btn-outer {
	position: relative;
}
.cv-btn {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-pack: end;
	justify-content: flex-end;
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
}
.cv-btn.cv-btn-f {
	max-width: none;
}
.cv-btn-outer .cv-btn {
	max-width: 320px;
	position: absolute;
	right: -260px;
	bottom: 0;
}
.cv-button a {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
	background-color: var(--color-point);
	height: 90px;
	color: #000;
	font-size: 1.125em;
	font-weight: 900;
	text-align: center;
	line-height: 1.33;
	position: relative;
	border: 1px solid var(--color-point);
}
.cv-button a::before,.cv-button a::after {
	display: block;
	content: "";
	width: 12px;
	height: 9px;
	border: 1px solid #000;
	position: absolute;
	top: 10px;
	right: 10px;
	transition: .2s ease-out;
}
.cv-button a::after {
	border-top-width: 0;
	border-right-width: 0;
	top: 12px;
	right: 12px;
}
.cv-button a:hover::before,.cv-button a:hover::after {
	border-color: var(--color-point);
}
.cv-button a:hover {
	background-color: #000;
	color: var(--color-point);
}
.cv-text {
	font-size: .99em;
	margin-top: 20px;
}
@media screen and (max-width: 1290px) {
	.cv-btn-outer .cv-btn {
		margin: 50px auto 0;
		position: relative;
		right: auto;
		bottom: auto;
	}
}
@media screen and (max-width: 640px) {
	.cv-btn-outer .cv-btn {
		max-width: none;
	}
}

/* list icon */
.list-ico li {
	padding-left: 1.2em;
	position: relative;
}
.list-ico li::before {
	display: block;
	content: "";
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	position: absolute;
	top: 0;
	left: 0;
}
.list-disk li::before {
	content: "\25CF";
	color: var(--color-point);
}
.list-star li::before {
	content: "\2605";
	color: var(--color-point);
}
.list-kome li::before {
	content: "\203B";
	color: #fff;
}

/* icon */
.font-ico {
	display: inline !important;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
.ico-outer {
	padding-left: 1em;
	position: relative;
}
.ico-bp {
	display: block;
	color: var(--color-point);
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	position: absolute;
	top: 0;
	left: 0;
}
.ico-bp-w {
	color: #fff;
}
.ico-bp-r {
	color: #f01414;
}
.ico-font {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
@media screen and (max-width: 640px) {
	.text-align-l-c.ico-outer {
		padding-left: 0;
	}
	.text-align-l-c .ico-bp {
		display: inline-block;
		position: relative;
		top: auto;
		left: auto;
	}
}

/* margin top */
.mt10 {
	margin-top: 10px !important;
}
.mt16 {
	margin-top: 16px !important;
}
.mt20 {
	margin-top: 20px !important;
}
.mt30 {
	margin-top: 30px !important;
}
.mt40 {
	margin-top: 40px !important;
}
.mt50,
.mt50-40 {
	margin-top: 50px !important;
}
.mt80-30 {
	margin-top: 80px !important;
}
.mt100 {
	margin-top: 100px !important;
}
.mt110-50,
.mt110-60 {
	margin-top: 110px !important;
}
.mt120-50 {
	margin-top: 120px !important;
}
@media screen and (max-width: 640px) {
	.mt80-30 {
		margin-top: 30px !important;
	}
	.mt50-40 {
		margin-top: 40px !important;
	}
	.mt110-50,
	.mt120-50 {
		margin-top: 50px !important;
	}
	.mt110-60 {
		margin-top: 60px !important;
	}
}

/* margin bottom */
.mb10 {
	margin-bottom: 10px !important;
}

/* padding top */
.pt0 {
	padding-top: 0!important;
}
@media screen and (min-width: 641px) {
	.pc-pt50 {
		padding-top: 50px!important;
	}
}

/* Image box */
.m-box {
	display: -webkit-box;
	display: flex;
}
.m-box figure {
	overflow: hidden;
}
.m-box a img {
	transition: 1s ease-out;
}
.m-box a:hover img {
	transform: scale(1.1);
}
.m-box-c {
	height: 440px;
	overflow: hidden;
}
.m-box-c img {
	height: 100%;
	object-position: center;
	object-fit: cover;
}
@media screen and (max-width: 640px) {
	.m-box {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-direction: column;
	}
	.m-box-c {
		height: 180px;
	}
}

/* coming soon */
.menu-cs {
	opacity: .5;
	pointer-events: none;
}

/* Sold Out */
.soldout {
	position: relative;
}
.soldout.ico-outer {
	margin-bottom: 20px;
}
.soldout
.soldout-line {
	background-color: rgba(0,0,30,.5);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
}
.app-outer-bg .soldout-line {
	background-color: rgba(36,36,36,.5);
}
.soldout-line span {
	display: block;
	/* background-color: #ba0000; */
	width: 100%;
	font-size: .9rem;
	font-weight: 900;
	text-align: center;
	-webkit-text-stroke: 1.2px #ba0000;
	text-stroke: 1.2px #ba0000;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	-webkit-transform: translateX(-50%, -50%) skewY(-5deg);
	transform: translate(-50%, -50%) skewY(-5deg);
}
.soldout.reverse .soldout-line span {
	color: #ba0000;
	-webkit-text-stroke: 1.2px #fff;
	text-stroke: 1.2px #fff;
	transform: translate(-50%, -50%) skewY(-5deg);
}
.soldout-s .soldout-line span {
	background-color: rgba(0,0,0,.5);
	width: auto;
	color: #ba0000;
	font-size: .85rem;
	line-height: 1;
	padding: .3em 1em;
	border: 2px solid #ba0000;
	-webkit-transform: translate(-50%, -50%) rotate(-5deg);
	transform: translate(-50%, -50%) rotate(-5deg);
}

.soldout-line span::before {
	content: '';
	display: block;
	width: 100%;
	height: 5px;
	background-color: #ba0000;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
}

.pen-gs {
	-webkit-filter: grayscale(1) contrast(.3);
	filter: grayscale(1) contrast(.3);
	pointer-events: none;
}

/* New info */
.news-info {
	font-weight: bold;
	color: var(--color-point);
	position: relative;
	padding-left: 35px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.news-info::before {
	content: 'NEW';
	color: #000;
	font-size: 12px;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	background-color: var(--color-point);
	border-radius: 9999px;
	position: absolute;
	left: 0;
}

/* ディスプレイコンテンツ */
@media screen and (max-width: 640px) {
	.sp-content-none {
		display: contents;
	}
}

/* flexオーダー */
@media screen and (max-width: 640px) {
	.sp-order1 {
		order: 1;
	}
}

/*-------------------------
Animaton
---------------------------*/
.setAnime {
	transition-duration: 400ms;
}
.inView {
	opacity: 0;
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
}
.animated.inView {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

/* delay */
.delay200-0 {
	transition-delay: 200ms;
}
.delay400-0 {
	transition-delay: 400ms;
}
.delay600-0 {
	transition-delay: 600ms;
}
@media screen and (max-width: 640px) {
	.delay200-0 {
		transition-delay: 0ms;
	}
	.delay400-0 {
		transition-delay: 0ms;
	}
	.delay600-0 {
		transition-delay: 0ms;
	}
}

/*-------------------------
Bound Animation
---------------------------*/
@keyframes bound {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		animation-timing-function: ease-out;
	}
	50% {
		-webkit-transform: translateY(-10%);
		transform: translateY(-10%);
		animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}