/* ---------------------------------------------
	SectionScroller
--------------------------------------------- */

.display-1 {
	font-size: 6rem;
	font-weight: 300;
	line-height: 1.1;
}

.display-2 {
	font-size: 5.5rem;
	font-weight: 300;
	line-height: 1.1;
}

.display-3 {
	font-size: 4.5rem;
	font-weight: 300;
	line-height: 1.1;
}

.display-4 {
	font-size: 3.5rem;
	font-weight: 300;
	line-height: 1.1;
}

.full-height {
	display: table;
	width: 100%;
	height: 100vh;
	max-height: auto;
	margin: 0 auto;
	padding: 5.0rem 0 10rem;
	/* text-align: center; */
}

#section-1 {
	background-color: var(--my-black);
	/* background-image: linear-gradient(0deg, #b22222, #000000); */
	/* background-image: url(img/background/grunge.png); */
}

#section-2 {
	background-color: var(--light-bg-color);
}

#section-3 {
	background-color: #f0f0f0;
}

#section-4 {
	background-color: #ebebeb;
}

/*--- section scroller button css - you can use the same in your project or modify as per your requirements	---*/

#section-scroller-button {
	position: fixed;
	left: 50%;
	right: 50%;
	bottom: 3.0rem;
	transform: translateX(-50%) translateY(-50%) scaleX(1) scaleY(1);
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	justify-self: center;
	text-align: center;
	line-height: 1;
	transition: all 0.2s;
	font-size: 0;
	height: 4.0rem;
	width: 4.0rem;
	border-radius: 50%;
	background-color: var(--my-black);
	z-index: 40;
	cursor: pointer;
}

#section-scroller-button::before {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	justify-self: center;
	width: var(--percent100);
	height: var(--percent100);
	/* background-color: #b32252; */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f107";
	font-size: 2.0rem;
	color: var(--my-white);
	transform: scaleY(1);
	text-align: center;
	margin: 0 auto;
	padding: 0;
	line-height: 1;
	transition: all 0.2s;
	border-radius: 50%;
	/* border: 1px solid wheat; */
	transform: scaleY(1);
	/* background-color: var(--my-black); */
	transform-origin: center;
}

#section-scroller-button:hover::before {
	transform: translateY(5px) scaleX(1) scaleY(1);
	transition: all 0.2s;
}

#section-scroller-button.rotate::before {
	/* transform: scaleY(-1); */
	transform-origin: center;
	transform: rotateX(180deg);
	transition: all 0.2s;
}

#section-scroller-button.rotate:hover::before {
	transform-origin: center;
	transform: translateY(-5px) rotateX(180deg);
}

/* ---------------------------------------------
	直前のページに戻る＋矢印可動
--------------------------------------------- */

.back-to-home {
	margin: 1.0rem auto;
	width: auto;
	/* max-width: 360px; */
	height: auto;
	/* min-height: 5.0rem; */
	text-align: center;
	line-height: 2;

	a {
		position: relative;
		z-index: 1;
		display: inline-flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
		padding: 0 1.0rem 0 2.0rem;
		border-radius: 5.0rem;
		text-decoration: none;
		color: var(--my-white);
		background-color: var(--my-color);
	}

	a::before {
		display: block;
		position: absolute;
		left: 1.0rem;
		margin: auto;
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		content: "\f104";
		/* font-size: 1.5rem; */
		color: var(--my-white);
		transition: all .2s;
	}

	a:hover::before {
		left: 0.75rem;
	}
}

/* ---------------------------------------------
   ボタン風＋矢印可動
--------------------------------------------- */

.about-btn {
	margin: 1.0rem auto;
	width: var(--percent100);
	max-width: 360px;
	position: relative;
	z-index: 1;
	height: auto;
	min-height: 5.0rem;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding: 0;
	text-align: center;
	border-radius: 5.0rem;
	text-decoration: none;
}

/* .about-btn::after {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	content: '';
	margin-top: -1.0rem;
	border: 1.0rem solid transparent;
	border-top-width: 1.0rem;
	border-bottom-width: 1.0rem;
	border-left-color: var(--my-white);
	transition: all .2s;
} */

.about-btn::after {
	position: absolute;
	right: 2.0rem;
	margin: auto;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f054";
	font-size: 1.5rem;
	color: var(--my-white);
	transition: all .2s;
}

.about-btn:hover::after {
	right: 1.5rem;
}

.about-btn p,
.about-btn:hover p {
	color: var(--my-white);
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
	line-height: 1.25;
}

.commi {
	background-color: #005baa;
}

.terms {
	background-color: #b32252;
}

.q-a {
	background-color: #226ab3;
}

.space {
	width: var(--percent100);
	margin: auto;
	padding: 3.0rem 0;
}

/* フェードイン・スライドイン (https://b-risk.jp/blog/2021/01/anim-reference/) */

.anim-box {
	background: linear-gradient(to right, #362ae0 0%, #3b79cc 50%, #42d3ed 100%);
	border-radius: 5px;
	max-width: 400px;
	height: 250px;
	margin: 0 auto;
}

.fade-in.is-animated {
	animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.slidein.is-animated {
	animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideIn {
	0% {
		transform: translateY(3.0rem);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
	}

	40%,
	100% {
		opacity: 1;
	}
}

/* ---------------------------------------------
	質疑応答
--------------------------------------------- */

.answer,
.question {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 22px;
	padding: 0;
	/* width: 100%; */
	font-weight: 600;
}

.question {
	margin: 1.0rem 2.0rem;
}

/* .question img {
    max-width: 70px;
    height: 100%;
    border: 3px solid #f2f2f2;
    border-radius: 50%;
} */

.question p {
	position: relative;
	max-width: 480px;
	margin: 3px auto 0 -15px;
	padding: .8em 1em;
	border-radius: 5px;
	color: crimson;
}

.question p::before {
	position: absolute;
	left: -15px;
	width: 15px;
	height: 30px;
	clip-path: polygon(0 50%, 100% 0, 100% 100%);
	content: '';
}

.question p,
.question p::before {
	background-color: lavenderblush;
}

.answer {
	margin: 1.0rem 0;
}

.answer img {
	display: inline-block;
	width: auto;
	max-width: 70px;
	height: auto;
	max-height: 70px;
	/* border: 1px solid var(--my-color); */
	/* border-radius: 50%; */
	/* aspect-ratio: var(--aspect-1-1); */
	object-fit: contain;
}

.answer p {
	position: relative;
	width: auto;
	max-width: 480px;
	margin: 3px -1.0rem 0 auto;
	padding: .8em 1em;
	border-radius: 5px;
	color: dodgerblue;
}

.answer p::before {
	position: absolute;
	right: -15px;
	width: 15px;
	height: 30px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	content: '';
}

.answer p,
.answer p::before {
	background-color: aliceblue;
}

.q-2 {
	color: crimson;
	margin: 0.5rem 0 0;
	background-color: lavenderblush;
}

.q-2::before {
	content: "Q.";
	color: crimson;
}

.a-2 {
	color: dodgerblue;
	margin: 0 0 1.0rem;
	background-color: aliceblue;
}

.a-2::before {
	content: "A.";
	color: dodgerblue;
}

.q-2,
.a-2 {
	display: flex;
	flex-flow: row nowrap;
	justify-self: stretch;
	/* justify-content: start; */
	justify-items: center;
	/* align-items: start; */
	font-weight: 600;
	font-size: 0;
	padding: 0.3rem 0.5rem;
	text-align: left;
	line-height: 1;
}

.q-2 p,
.a-2 p {
	display: inline-block;
	margin: 0 0 0 1.0rem;
	padding: 0;
	width: var(--percent100);
	line-height: 1.8;
	font-size: clamp(0.84rem, 6.6cqw, 0.96rem);
}

.q-2::before,
.a-2::before {
	display: inline-flex;
	margin: 0;
	padding: 0;
	font-size: 1.5rem;
	width: 1.5rem;
	/* height: 0; */
	line-height: 1;
}


/* カード */

.card {
	border: none;
	margin: 0 0 1rem 0;
}

.bkmcard::before {
	font-family: "Font Awesome 6 Free";
	content: "\f054";
	font-weight: 900;
	padding-right: 6px;
}

/* モーダル */

/* .modal.fade .modal-dialog {
	transition: -webkit-transform 0.2s linear;
	transition: transform 0.2s linear;
	transition: transform 0.2s linear, -webkit-transform 0.2s linear;
	-webkit-transform: translate(0, -50px);
	transform: translate(0, -50px);
} */

.modal-footer {
	/* display: -ms-flexbox; */
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: end;
	justify-content: flex-end;
	padding: 1rem;
	border-top: 1px solid var(--color-3);
	border-bottom-right-radius: 0.3rem;
	border-bottom-left-radius: 0.3rem;
}

/* キャラクター
--------------------------------------------- */

.kana {
	margin: 0.5rem auto;
	font-size: 2.0rem;
	font-weight: 600;
	color: var(--color-1);
}

.namae {
	position: relative;
	line-height: 1.1;
	padding: 0.25rem 0.75rem;
	display: inline-block;
	top: 0;
	font-size: 1.0rem;
	color: var(--my-black);
}

.namae::before,
.namae::after {
	position: absolute;
	top: 0;
	content: '';
	width: 8px;
	height: 100%;
	display: inline-block;
}

.namae::before {
	border-left: solid 1px black;
	border-top: solid 1px black;
	border-bottom: solid 1px black;
	left: 0;
}

.namae::after {
	content: '';
	border-top: solid 1px black;
	border-right: solid 1px black;
	border-bottom: solid 1px black;
	right: 0;
}

/* ---------------------------------------------
   更新履歴
--------------------------------------------- */

.record {
	position: relative;
	width: var(--percent100);
	aspect-ratio: var(--aspect-16-9);
	margin: 1.0rem auto;
	padding: 0 1.0rem;
	border: 1px solid var(--color-6);
	overflow-y: scroll;
}

.record p {
	margin: 0.5rem 0;
	padding: 0;
	font-size: 0.9rem;
	font-family: var(--my-sub-fonts), var(--my-fonts);
	color: var(--color-2);
	border-bottom: 1px solid var(--color-4);
}

.story:before {
	content: "story";
}

/* .show:before {
	content: "show";
} */

.consept:before {
	content: "consept";
}

.images:before {
	content: "images";
}

.nft:before {
	content: "NFT";
}

.other:before {
	content: "other";
}

.story::before,
.show::before,
.consept::before,
.images::before,
.other::before {
	margin: 0 0.25rem 0.5rem 0;
	padding: 3px 6px 1px;
	color: var(--my-white);
	background: var(--my-black);
	border-radius: 4px;
	font-size: 1.0rem;
}