:root {
	/* color */
	--bg-color: #f8f3f1;
	--text-main: #524f4f;
	--text-accent: #524f4f;
	--link-color: #524f4f;
	--link-hover: #ed7c89;
	--link-visited: #524f4f;
	--white: 255 255 255;
	--card-line-color: #b6a9a9;
	--singers-line-color: #b6a9a9;

	/* bg dots */
	--dot-blur-main: 2px;
	--dot-blur-sub: 1px;
	--dot-opacity-main: 1;
	--dot-opacity-sub: 0.6;
}


/* base */
html {
	font-size: clamp(14px, 2vw, 16px);
	line-height: 1.8;
	min-height: 100%;
}

html,
body {
	margin: 0;
	min-height: 100%;
}

body {
	font-size: 1rem;
	font-family: "Noto Sans JP", "M PLUS 1p", sans-serif;
	font-weight: 400;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: var(--bg-color);
	overflow-x: hidden;
}

@supports (height: 100dvh) {
	body {
		min-height: 100dvh;
	}
}

[v-cloak] {
	display: none;
}

html.is-locked,
body.is-locked {
	overflow: hidden;
}

/* text */
p {
	color: var(--text-main);
}

/* link */
a {
	transition: opacity 0.5s;
}

a:link,
a:visited,
a:hover,
a:active {
	text-decoration: underline;
}

a:link {
	color: var(--link-color);
}

a:visited {
	color: var(--link-visited);
}

a:hover {
	color: var(--link-hover);
	opacity: 0.5;
}

a:active {
	color: var(--link-hover);
}

/* background dots */
body::before,
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
}

body::before {
	z-index: -2;
	background:
		radial-gradient(circle at 7% 18%,  #fff 6px, transparent 8px),
		radial-gradient(circle at 15% 70%, #fff 4px, transparent 6px),
		radial-gradient(circle at 23% 40%, #fff 3px, transparent 5px),
		radial-gradient(circle at 32% 12%, #fff 5px, transparent 7px),
		radial-gradient(circle at 41% 85%, #fff 7px, transparent 9px),
		radial-gradient(circle at 50% 60%, #fff 4px, transparent 6px),
		radial-gradient(circle at 58% 22%, #fff 3px, transparent 5px),
		radial-gradient(circle at 66% 48%, #fff 6px, transparent 8px),
		radial-gradient(circle at 72% 78%, #fff 4px, transparent 6px),
		radial-gradient(circle at 81% 35%, #fff 5px, transparent 7px),
		radial-gradient(circle at 90% 15%, #fff 3px, transparent 5px),
		radial-gradient(circle at 95% 65%, #fff 7px, transparent 9px);
	filter: blur(var(--dot-blur-main));
	opacity: var(--dot-opacity-main);
}

body::after {
	z-index: -1;
	background:
		radial-gradient(circle at 12% 55%, #fff 2px, transparent 4px),
		radial-gradient(circle at 37% 25%, #fff 2px, transparent 4px),
		radial-gradient(circle at 63% 72%, #fff 2px, transparent 4px),
		radial-gradient(circle at 84% 48%, #fff 2px, transparent 4px);
	filter: blur(var(--dot-blur-sub));
	opacity: var(--dot-opacity-sub);
}


/* --- br制御 --- */
.isPc   { display: block; }
.isMobile{ display: none; }
@media (max-width: 741px) {
	.isPc   { display: none; }
	.isMobile{ display: block; }
}

/* === header === */
header{
	width: 100%;
	margin: 0 auto;
	padding-bottom: 1rem;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
	background: rgb(var(--white) / 0.5);
}

header .header-wrap{
	width: 100%;
	margin: auto;
}

header .logo{
	position: relative;
	margin: auto;
	margin-bottom: 1rem;
	max-width: 650px;
	z-index: 1;
}

header .logo a{
	display: block;
	position: relative;
	z-index: 1;
}

header .logo img{
	display: block;
	width:100%;
	height: auto;
}

/* Header背景 */
header .headerBg {
	position: relative;
	margin: 0;
	padding: 2rem 0 0 0;
	overflow: hidden;
	z-index: 0;
}

header .headerBg::before {
	content:"";
	position:absolute;
	inset:0;
	z-index: 0;
	pointer-events: none;

	background:
		radial-gradient(circle at 7% 18%, #fff 6px, transparent 8px),
		radial-gradient(circle at 15% 70%, #fff 4px, transparent 6px),
		radial-gradient(circle at 23% 40%, #fff 3px, transparent 5px),
		radial-gradient(circle at 32% 12%, #fff 5px, transparent 7px),
		radial-gradient(circle at 41% 85%, #fff 7px, transparent 9px),
		radial-gradient(circle at 50% 60%, #fff 4px, transparent 6px),
		radial-gradient(circle at 58% 22%, #fff 3px, transparent 5px),
		radial-gradient(circle at 66% 48%, #fff 6px, transparent 8px),
		radial-gradient(circle at 72% 78%, #fff 4px, transparent 6px),
		radial-gradient(circle at 81% 35%, #fff 5px, transparent 7px),
		radial-gradient(circle at 90% 15%, #fff 3px, transparent 5px),
		radial-gradient(circle at 95% 65%, #fff 7px, transparent 9px);

	filter: blur(2px);
	opacity: 0.85;
}

header .headerBg::after{
	content:"";
	position:absolute;
	inset:0;
	z-index: 0;
	pointer-events: none;

	background:
		radial-gradient(circle at 12% 55%, #fff 2px, transparent 4px),
		radial-gradient(circle at 37% 25%, #fff 2px, transparent 4px),
		radial-gradient(circle at 63% 72%, #fff 2px, transparent 4px),
		radial-gradient(circle at 84% 48%, #fff 2px, transparent 4px);

	filter: blur(1px);
	opacity:0.6;
}

.carousel {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.carousel div{
	overflow: hidden;
}

.carousel img{
	width: 100%;
}

@media (max-width: 431px) {
	header .headerBg{ padding-top: 0; }
}

@media (max-width: 741px) {
	header{ padding: 20px 0 10px 0; }
	header .logo{ padding: 0 2vw; }
}

@media (max-width: 997px) {
	header .logo{ margin-bottom: 0; padding: 0 2vw; }
}


/* Slick Dots */
.slick-dots{
	line-height:0;
}

.slick-dots li{
	width: clamp(12px, 2.5vw, 20px);
	height: clamp(12px, 2.5vw, 20px);
	margin: 0 clamp(4px, 1vw, 8px);
	position:relative;
}

.slick-dots li button{
	width:100%;
	height:100%;
	padding:0;
	position:relative;
}

.slick-dots li button:before{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width: clamp(8px, 1.5vw, 14px);
	height: clamp(8px, 1.5vw, 14px);
	background:#fff;
	border-radius:50%;

	transform:translate(-50%,-50%);
	opacity:.25;
}

.slick-dots li.slick-active button:before{
	opacity:1;
}

.dots{
	display:block;
	width: 170px;
	margin:0 auto;
	padding: 20px 0 0 0;
}



/* ==== main #contents ==== */
main{
	width: 100%;
	margin: 0;
	flex: 1;
	position: relative;
	z-index: 1;
}

#contents{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 40px 0;
	width: 100%;
}

/* /// tab - Gmenu /// */
#tab{
	display: flex;
	height: 4em;
	padding: 0; 
	margin: 0 auto;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
}
	
#tab ul {
	margin: auto;
	text-align: center;
}

#tab li{
	font-weight: 400;
	font-size: clamp(10px,2.8vw,16px);
	letter-spacing: 0.1em;
	line-height: 1.5;
	color: var(--text-accent);
	text-align: center;
}

/* 中の区切り */
#tab li + li::before{
	content:"｜";
	margin-right:0.8vw;
	margin-left: 0.8vw;
}

/* 先頭 */
#tab li:first-child::before{
	content:"｜";
	margin-right:0.8vw;
}

/* 末尾 */
#tab li:last-child::after{
	content:"｜";
	margin-left:0.8vw;
}

@media (max-width: 431px) {
	#tab { margin-bottom: 0; }
}


#contents .inner {
	text-align: center;
	padding: 0 20px;
}

#contents .inner p {
	padding: 10px 0;
}


#contents section .inner {
	min-height: 70vh;
	display: flex;
	flex-direction: column;
}

#contents .midashi{
	color: var(--text-accent);
	font-weight: 600;
}

#contents .midashi::before{
	content:"｜";
	font-weight: 600;
}

#contents .midashi::after{
	content:"｜";
	font-weight: 600;
}

/*  キャプション */
#contents .fontCapt{
	font-size: 0.8rem;
	line-height: 1.5;
}

#contents h2 {
	font-family: "M PLUS 1p";
	font-weight: 400;
	color: var(--text-accent);
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	letter-spacing: 0.1em;
	line-height: 1.3;
}

#contents h3 {
	font-weight: 500;
	color: var(--text-accent);
	font-size: 1.4rem; 
	letter-spacing: 0.1em;
	line-height: 1.3;
}


/* /// ライブ画像 /// */
#contents .liveLogo {
	max-width: 400px;
	height: auto;
	margin: 40px auto 0 auto;
	padding: 0;
}
#contents .liveImg {
	max-width: 620px;
	height: auto;
	margin: auto;
	padding: 0;
}

@media (max-width: 767px) {
	#contents .liveLogo,
	#contents .liveImg {
		width: 100%;
		max-width: 100%;
	}
	#contents .liveLogo {
		max-width: 60%;
		margin-top: 0;
	}
}

/* /// SUB TITLE ///  */
#contents .subTitle {
	position: relative;
	margin: auto;
	padding: clamp(1.5rem, 3vw, 2rem) 0;
	height: clamp(24px, 4vw, 38px);
	max-width: none;
}

#contents .subTitle img {
	display: block;
	width: auto;
	height: 100%;
	margin: 0 auto;
	object-fit: contain;
}


/* /// PRECURE SINGERS /// */
#contents .grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	max-width: 1000px;
	margin: 0 auto;
}

#contents .card{
	border: 1px solid var(--singers-line-color);
	/* border-radius: 10px; */
	padding: 8px;
	text-align: center;
	background-color: #fff;
	color: var(--text-accent);
	cursor: pointer;
	transition: opacity 0.3s, transform 0.3s;
}

#contents .card:hover {
	opacity: 0.8;
	transform: translateY(-1px);
}

#contents .card p {
	color: var(--text-accent);
}

#contents .card img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 10%;

	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

#contents .card:nth-child(3) img{
	object-position: center top;
}
#contents .card:nth-child(11) img{
	object-position: center 50%;
}
#contents .card:nth-child(15) img{
	object-position: center top;
}
#contents .card:nth-child(17) img{
	object-position: center top;
}
#contents .card:nth-child(18) img{
	object-position: center top;
}
#contents .card:nth-child(20) img{
	object-position: center 30%;
}


/* 画像の枠を作る */
#contents .card .thumb{
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: 8px;
	overflow: hidden;
}

#contents .card img{
	display: block;
}

/* レスポンシブ */
@media (max-width: 767px){
	#contents .grid{
		grid-template-columns: repeat(2, 1fr);
	}
}


/* /// モーダル全体 /// */
#modal {
	position: fixed;
	inset: 0;
	z-index: 1000;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
	opacity 0.5s ease,
	visibility 0s linear 0.5s;
}

#modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transition:
	opacity 0.5s ease,
	visibility 0s linear 0s;
}

/* 背景 */
.modal-bg {
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.95);
}

/* 本体位置 */
.modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.5s ease 0.08s;
}

#modal.is-open .modal-content {
	opacity: 1;
}

/* 本体 */
.modal-inner {
	position: relative;
	display: flex;
	width: min(860px, calc(100vw - 80px));
	min-height: 360px;
	background: #fff;
	border: 1px solid var(--singers-line-color);
	/* border-radius: 12px; */
	overflow: hidden;
	box-sizing: border-box;
}

/* 左画像 */
.modal-image {
	flex: 0 0 280px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#modal-image {
	transition: opacity 0.2s ease;
}
.modal-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.modal-image {
	padding: 6px;
	box-sizing: border-box;
}

/*
.modal-image img {
	border-radius: 8px;
}
*/

/* 右テキスト */
.modal-text {
	flex: 1;
	padding: 40px 44px 40px;
	box-sizing: border-box;
	color: var(--text-accent);
}

.modal-text h2 {
	margin: 0;
	font-size: 2rem;
	line-height: 1.3;
	text-align: center;
}

.modal-text #modal-name {
	font-size: 1.8rem !important;
	font-weight: 400 !important;
}

.modal-text .en,
.modal-text .sub,
.modal-text .name-en {
	display: block;
	margin-top: 0.4em;
	font-size: 0.95rem;
	text-align: center;
	letter-spacing: 0.08em;
}

.modal-text hr {
	margin: 22px 0 26px;
	border: 0;
	border-top: 1px solid var(--singers-line-color);
}

.modal-text p {
	margin: 0;
	color: var(--text-accent);
	font-size: 1rem;
	line-height: 2;
}

/* 閉じるボタン */
.modal-close {
	position: absolute;
	top: -66px;
	right: 0;
	width: clamp(40px, 6vw, 66px);
	height: clamp(40px, 6vw, 66px);
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 0;
}

.modal-close::before,
.modal-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(40px, 6vw, 66px);
	height: 1px;
	background: var(--singers-line-color);
	transform-origin: center;
}

.modal-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 767px) {

	.modal-content {
		position: absolute;
		top: 16px;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100vw - 32px);
	}

	.modal-inner {
		display: block;
		width: 100%;
		max-height: calc(100dvh - 32px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.modal-close {
		top: 12px;
		right: 12px;
		width: 44px;
		height: 44px;
		z-index: 3;
	}

	.modal-close::before,
	.modal-close::after {
		width: 32px;
	}

	.modal-text {
		padding: 28px 20px 24px;
	}

	.modal-image {
		width: 100%;
		height: auto;
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modal-image img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain;
	}
}
/* ///  /モーダル全体 /// */


/* /// ディスコグラフィ /// */

#contents .page-comingsoon {
	min-height: 60vh;
	min-height: 60dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 100px; /* 必要に応じて調整 */
}
#contents .page-comingsoon img {
	transform: translateY(-120px);
}


/* /// ライブページ /// */
/* /// スケジュール等 /// */

.liveBgWrap{
	width: 100%;
}

.liveBgWrapInner{
	max-width: 900px;
	padding: 1rem;
	margin: 0 auto 1rem;
	background: rgb(var(--white) / 0.5);
}

.liveSchedule{
	width: 100%;
}

.liveCard{
	max-width: 800px;
	margin: 0 auto;
	border: #b6a9a9 1px solid;
	padding: 0.5rem;
}

.liveLocation{
	max-width: 600px;
	margin: 0 auto;
	border: #b6a9a9 1px solid;
	padding: 0.5rem;
}

.liveRow{
	padding: clamp(0.8rem, 1.5vw, 1rem) clamp(0.8rem, 2vw, 1rem);
	text-align: center;
	color: #333;
	line-height: 1.7;
}

.liveRow:first-child{
	border-top: none;
}

.liveRow:nth-child(odd){
	background: #f4f4f4;
}

.liveRow:nth-child(even){
	background: #fff;
}

.liveDate, .livePlace, .liveTime,
.liveCast, .liveAddress{
	font-size: 1rem;
}


@media (max-width: 767px){
	.liveRow{
		padding: 1.2rem 1rem;
	}

	.livePlace{
		line-height: 1.5;
	}

	.liveCast{
		text-align: left;
	}
}


/* /// ライブページ /// */
/* /// チケット欄 /// */

.ticketSchedule{
	width: 100%;
}

.ticketCard{
	max-width: 500px;
	margin: 0 auto;
	border: #b6a9a9 1px solid;
	padding: 0.5rem;
}

.ticketRow{
	padding: clamp(0.8rem, 1.5vw, 1rem) clamp(0.8rem, 2vw, 1rem);
	text-align: center;
	color: #333;
	line-height: 1.7;
}

.ticketRow:nth-child(odd){
	background: #f4f4f4;
}

.ticketRow:nth-child(even){
	background: #fff;
}

.ticketHead{
	font-weight: 700;
}

.ticketGroup{
	background: #fff !important;

	display: grid;
	grid-template-columns: max-content max-content;
	column-gap: 1rem;
	row-gap: 0.3rem;
	justify-content: center;
	text-align: left;
}

.ticketLine{
	display: contents;
}

@media (max-width: 767px){
	.ticketRow{
		padding: 1.2rem 1rem;
	}

	.ticketGroup{
		grid-template-columns: max-content max-content;
		column-gap: 1rem;
		justify-content: center;
	}
}




/* /// スペシャル /// */
/* /// ライブレポート /// */

.page-report {
	flex: 1;
}

.report-list {
	padding: 60px 20px 100px;
}

.report-grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1100px;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
	justify-content: center;
	gap: 30px;
}

.report-card {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.report-card a {
	display: block;
	color: var(--link-color);
	text-decoration: underline;
}

/* hover（全体設定と揃える） */
.report-card a:hover {
	color: var(--link-hover);
}

/* --- 念のため（アニメーション継承を明示） --- */
.report-card a {
	transition: opacity 0.5s;
}

.report-thumb {
	width: 320px;
	height: 180px;
	border: 1px solid var(--card-line-color);
	overflow: hidden;
	/* background: rgb(var(--white) / 0.3); */

	display: flex;
	align-items: center;
	justify-content: center;

	margin: 0 auto 10px;
}

.report-thumb img {
	display: block;
	width: 70%;
	height: auto;
	margin: 0 auto;
}

@media (max-width: 767px){
	.report-thumb {
		width: 90%;
		max-width: 320px;
		height: auto;
		aspect-ratio: 16 / 9;
		margin: 0 auto 5px auto ;
	}
}

.report-copy {
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
	line-height: 1.5;
}

.report-title {
	margin: 0;
	padding: 0;
	font-size: clamp(18px, 2.2vw, 24px);
	line-height: 0.5;
}

/* --- 子要素はリンクを継承 --- */
.report-copy,
.report-title {
	color: inherit;
}

@media (max-width: 767px) {
	.report-list {
		padding: 40px 16px 80px;
	}

	.report-grid {
		gap: 36px;
	}

	.report-copy {
		font-size: 0.85rem;
		line-height: 1.2;
	}
}




/* /// ライブページ　フッターリンク /// */
.footer-links {
	padding: 40px 20px 50px;
	background: #f3f0f0;
	position: relative;
	z-index: 1;
}

.footer-links__inner {
	max-width: 1120px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.footer-links__label {
	width: clamp(67px, 30vw, 134px);
	margin: 0 auto 40px;
	position: relative;
	z-index: 1;
} /* /// 小見出し /// */

.footer-links__label img {
	display: block;
	width: 100%;
	height: auto;
}

.footer-links__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 280px);
	gap: 30px;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.footer-links__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 280px;
	height: 120px;
	border: 1px solid var(--link-color);
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	transition: opacity 0.3s, transform 0.3s;
}

.footer-links__button:hover {
	opacity: 0.8;
	transform: translateY(-2px);
}

.footer-links__button img {
	display: block;
	max-height: 80%;
	width: auto;
}

@media (max-width: 835px) {
	.footer-links__list {
		grid-template-columns: repeat(3, minmax(0, 1fr)); /* ← */
		max-width: 720px; /* ← */
		gap: 20px;
		justify-content: center;
		margin: 0 auto; /* ← */
	}
	.footer-links__button {
		width: 100%; /* ←220pxやめる */
		height: 100px;
	}
}

@media (max-width: 767px) {
	.footer-links__list {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.footer-links__list li {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.footer-links__button {
		width: 90%;
		max-width: 220px;
		height: 80px;
		margin: 0;
	}

	.footer-links__button img {
		max-width: 80%;
		max-height: 80%;
		width: auto;
		height: auto;
	}
}



/* === footer === */

footer {
	width: 100%;
	background: rgb(var(--white) / 0.5);
	position: relative;
	z-index: 1;
}

#footer-info{
	max-width: 1200px;
	text-align:center;
	/* background: green; */
	margin: 0 auto;
	padding: 0 0 40px 0;
}

#footer-info .marvelous-logo{
	display: block;
	width: 125px;
	margin: 0 auto;
	padding: 40px 0 30px 0;
}

#footer-info .pcure20th-text{
	display: block;
	width: 100%;
	padding: 30px 0 20px 0;
}

#footer-info .pcure20th-badge{
	display: block;
	width: 167px;
	margin: 0 auto;
	padding: 0 0 20px 0;
}


@media (max-width: 741px) {
	#footer-info .marvelous-logo{
		width: 100px;
	}
}


/* -- castum animate.css -- */

	/* ----- fadeInUpSmall ----- */
	.fadeInUpSmall{
		--movespan: 10%;
	}

	@-webkit-keyframes fadeInUpSmall {
		from {
			opacity: 0;
			transform: translate3d(0, var(--movespanl), 0);
		}

		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes fadeInUpSmall {
		from {
			opacity: 0;
			transform: translate3d(0, var(--movespan), 0);
		}

		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}
	.fadeInUpSmall {
		animation-name: fadeInUpSmall;
	}

	/* ----- fadeInLeftSmall ----- */
	.fadeInLeftSmall{
		--movespan: 10%;
	}

	@-webkit-keyframes fadeInLeftSmall {
		from {
			opacity: 0;
			transform: translate3d(var(--movespanl), 0, 0);
		}

		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes fadeInLeftSmall {
		from {
			opacity: 0;
			transform: translate3d(var(--movespan), 0, 0);
		}

		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}
	.fadeInLeftSmall {
		animation-name: fadeInLeftSmall;
	}

/* delay */
.delay-0{  animation-delay: 0s; }
.delay-1{  animation-delay: 0.1s; }
.delay-2{  animation-delay: 0.2s; }
.delay-3{  animation-delay: 0.3s; }
.delay-4{  animation-delay: 0.4s; }
.delay-5{  animation-delay: 0.5s; }
.delay-6{  animation-delay: 0.6s; }
.delay-7{  animation-delay: 0.7s; }
.delay-8{  animation-delay: 0.8s; }
.delay-9{  animation-delay: 0.9s; }
.delay-10{  animation-delay: 1s; }

/* margin */
.mab5 { margin-bottom: 5px; }
.mab10 { margin-bottom: 10px; }
.mab15 { margin-bottom: 15px; }
.mab20 { margin-bottom: 20px; }
.mab25 { margin-bottom: 25px; }

/* font-size */
.fontL { font-size: 1.2rem; }
.fontM { font-size: 1rem; }
.fontS { font-size: 0.8rem; }

/* font-weight */
.fontReg   { font-weight: 400; }
.fontBold  { font-weight: 600; }
.fontHeavy { font-weight: 800; }

/* font-color */
.fontCol-accent {color: var(--text-accent); }

/* line-heght */
.lineHeightS { line-height: 0.8rem }

/* text-align */
@media (max-width: 767px) {
	.txtLeft { text-align: left; }
}

.txtLeftWrapper{
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 0 1rem;
	box-sizing: border-box;
}

.txtLeftWrapper2{
	width: 100%;
	max-width: 840px;
	margin: 0 auto;
	padding: 0 1rem;
	box-sizing: border-box;
}

.txtLeft{
	text-align: left;
	line-height: 1.8;
}






	/*
	* loading
	*/
	#loading-wrap{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		background: var(--bg-color);
		z-index:99;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#loading-wrap.loading_half{
		opacity: 0.85;
	}

	#loading-wrap img{
		display: block;
	}

	/* -- transition -- */
	.fade-enter-active, 
	.fade-leave-active{
		transition: opacity .5s;
	}
	.fade-enter, 
	.fade-leave-to{
		opacity: 0;
	}



	/* --- css animation --- */
	.fade-out{
		animation: fade-out ease-in-out forwards;
		animation-duration: 0.25s;
	}

	@keyframes fade-out{
		0%  { opacity: 1; }
		100%{ opacity: 0; }
	}

/* --- lazyload --- */
img.lazyload{
	opacity: 0;
	transition: opacity 0.3s ease;
}
img.lazyloaded{
	opacity: 1;
}