@charset "UTF-8";

/* ---------------------------------------------------
	共通
	--------------------- */
.block-head {
	padding: 4rem 0 3rem;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}

.inner {
	width: 100%;
	max-width: 960px;
	padding: 0 1rem;
	margin: 0 auto;
}

.p-button {
	position: relative;
	display: block;
	padding-block: 1.1rem;
	margin: 3rem auto 4rem;
	font-size: 1.4rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
	text-decoration: none;
	list-style: none;
	background: #000;
	border: 1px solid #000;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.p-button::after {
	position: absolute;
	top: 0;
	right: 21rem;
	bottom: 0;
	height: 1.2rem;
	aspect-ratio: cos(30deg);
	margin-block: auto;
	clip-path: polygon(15% 25%, 85% 25%, 50% 75%);
	content: "";
	background: currentcolor;
}

@media (any-hover: hover) {
	.p-button:hover {
		color: #000;
		background-color: #fff;
	}
}

@media screen and (max-width: 767px) {
	.block-head {
		padding: 1.5rem 0;
		font-size: 1.5rem;
		line-height: 2.3rem;
	}

	.p-button {
		padding-block: 0.6rem;
		margin: 2rem auto;
		font-size: 1.1rem;
	}

	.p-button::after {
		right: 5.5rem;
	}
}

/* ---------------------------------------------------
	ファーストビュー
	--------------------- */
.bg {
	background: url("/client_info/HARMONICK/view/userweb/ext/e-gift/images/fv_bgpc.png");
	background-repeat: no-repeat;
}

.fv {
	display: flex;
	gap: 4rem;
	align-items: center;
	justify-content: center;
	padding-top: 5rem;
	margin: 0 auto 2rem;
}

.fv__img {
	width: 100%;
	height: auto;
}

.fv__left {
	width: 250px;
}

.fv__right {
	display: flex;
	flex-direction: column;
	margin: 0 0 5rem;
}

.right__text-wrap {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.right__main-text {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3.6rem;
	font-weight: bold;
	color: #c99b59;
}

.right__main-text::before {
	flex: 1;
	height: 1px;
	margin-right: 25px;
	content: "";
	background-color: #c99b59;
}

.right__main-text::after {
	flex: 1;
	height: 1px;
	margin-left: 25px;
	content: "";
	background-color: #c99b59;
}

.right__head-text {
	margin-bottom: 1.5rem;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 2.5rem;
}

.right__points {
	display: flex;
	justify-content: center;
}

.right__point {
	position: relative;
	display: inline-block;
	padding: 11px 53px;
	font-size: 1.5rem;
	font-weight: bold;
	color: #5093ab;
	text-align: center;
	background: #fafafa;
	filter: drop-shadow(2px 6px 0 #d0f0ee);
	border-radius: 50px;
}

.right__point::after {
	position: absolute;
	bottom: -17px;
	left: 69px;
	content: "";
	border-color: #fafafa transparent transparent;
	border-style: solid;
	border-width: 22px 18px 0 0;
}

.right__point--green {
	position: relative;
	left: -14px;
	display: inline-block;
	padding: 11px 53px;
	font-size: 1.5rem;
	font-weight: bold;
	color: #5093ab;
	text-align: center;
	background: #bde8e9;
	filter: drop-shadow(2px 6px 0 #e6f3f3);
	border-radius: 50px;
}

.right__point--green::after {
	position: absolute;
	bottom: -17px;
	left: 69px;
	content: "";
	border-color: #bde8e9 transparent transparent;
	border-style: solid;
	border-width: 22px 18px 0 0;
}

@media screen and (max-width: 767px) {
	.bg {
		background: url("/client_info/HARMONICK/view/userweb/ext/e-gift/images/fv_bgsp.png");
		background-repeat: no-repeat;
	}

	.fv {
		padding-top: 2rem;
		margin: 0 auto 1rem;
	}

	.fv__text-wrap {
		text-align: center;
	}

	.fv__main-text {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 3rem;
		font-weight: bold;
		color: #c99b59;
		white-space: nowrap;
	}

	.fv__main-text::before {
		width: 60px;
		height: 1px;
		margin-right: 25px;
		content: "";
		background-color: #c99b59;
	}

	.fv__main-text::after {
		width: 60px;
		height: 1px;
		margin-left: 25px;
		content: "";
		background-color: #c99b59;
	}

	.fv__head-text {
		font-size: 1.06rem;
		font-weight: bold;
		line-height: 2rem;
	}

	.fv__row {
		display: flex;
		gap: 1rem;
		align-items: center;
		justify-content: center;
		margin-top: 2rem;
	}

	.row__img {
		width: 120px;
		margin-left: 1rem;
	}

	.row__points {
		display: flex;
		flex-direction: column;
		row-gap: 1.2rem;
		width: 100%;
		margin-bottom: 1.5rem;
	}

	.row__point {
		position: relative;
		display: inline-block;
		align-self: flex-start;
		padding: 9px 29px;
		font-size: 1.2rem;
		font-weight: bold;
		color: #5093ab;
		text-align: center;
		white-space: nowrap;
		background: #fafafa;
		filter: drop-shadow(2px 6px 0 #d0f0ee);
		border-radius: 50px;
		transform: translateX(-17px);
	}

	.row__point::after {
		position: absolute;
		bottom: -11px;
		left: 43px;
		content: "";
		border-color: #fafafa transparent transparent;
		border-style: solid;
		border-width: 22px 18px 0 0;
	}

	.row__point--green {
		position: relative;
		display: inline-block;
		align-self: flex-end;
		padding: 9px 29px;
		font-size: 1.2rem;
		font-weight: bold;
		color: #5093ab;
		text-align: center;
		white-space: nowrap;
		background: #bde8e9;
		filter: drop-shadow(2px 6px 0 #e6f3f3);
		border-radius: 50px;
	}

	.row__point--green::after {
		position: absolute;
		bottom: -11px;
		left: 43px;
		content: "";
		border-color: #bde8e9 transparent transparent;
		border-style: solid;
		border-width: 22px 18px 0 0;
	}
}

/* ---------------------------------------------------
	導入
	--------------------- */
.lead {
	margin: 0 auto;
	text-align: center;
}

.lead__title {
	font-size: 2rem;
	font-weight: bold;
	color: #5093ab;
}

.lead__text {
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 2.5rem;
	color: #5093ab;
}

@media screen and (max-width: 767px) {
	.lead__title {
		font-size: 1.5rem;
	}

	.lead__text {
		font-size: 1.06rem;
		line-height: 2rem;
		white-space: nowrap;
	}
}

/* ---------------------------------------------------
	概要
	--------------------- */
.summary-top__wrap {
	margin: 0 auto;
}

.summary-top__img {
	max-width: 90%;
	height: auto;
}

.summary-top__text-wrap {
	display: flex;
	gap: 3rem;
	justify-content: center;
}

.summary-top__head {
	padding-block: 0.6rem;
	margin-top: 1rem;
	font-size: 1.4rem;
	font-weight: bold;
	color: #97d7c5;
	text-align: center;
	background: #fff;
	border: 3px solid #97d7c5;
	border-radius: 50px;
}

.summary-top__head--right {
	padding-block: 0.6rem;
	margin-top: 1rem;
	font-size: 1.4rem;
	font-weight: bold;
	color: #91cce5;
	text-align: center;
	background: #fff;
	border: 3px solid #91cce5;
	border-radius: 50px;
}

.summary-top__text {
	font-size: 1.2rem;
	font-weight: bold;
}

.arrows {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}

.arrow {
	position: relative;
	width: 75px;
	height: 20px;
}

.arrow::before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 43px;
	height: 4px;
	content: "";
	background: currentcolor;
	transform: rotate(30deg);
  	transform-origin: left bottom;
}

.arrow::after {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 43px;
	height: 4px;
	content: "";
	background: currentcolor;
	transform: rotate(-30deg);
	transform-origin: right bottom;
}

.arrow-1 {
	color: #c4e4dc;
}

.arrow-2 {
	color: #bee4f2;
}

.arrow-3 {
	color: #aacbec;
}

.summary-bottom {
	position: relative;
	margin-top: 2rem;
}

.summary-bottom__wrap {
	position: relative;
}

.summary-bottom__img {
	display: block;
	max-width: 70%;
	height: auto;
	margin: 0 auto;
}

.summary-bottom__head {
	width: 38%;
	padding-block: 0.6rem;
	margin: 0 auto;
	font-size: 1.4rem;
	font-weight: bold;
	color: #7baff1;
	text-align: center;
	background: #fff;
	border: 3px solid #7baff1;
	border-radius: 50px;
}

.summary-bottom__text {
	padding: 2.5rem 0 0.5rem;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
}

.summary-bottom::after {
	position: absolute;
	inset: 10px 0;
	z-index: -1;
	width: 100%;
	content: "";
	background: linear-gradient(to bottom, rgb(234 246 253 / 0%) 0%, rgb(232 242 255 / 70%) 80%, rgb(234 246 253 / 0%) 100%);
}

@media screen and (max-width: 767px) {
	.summary-top__text-wrap {
		gap: 1.2rem;
	}

	.summary-top__head {
		width: 90%;
		padding-block: 0.3rem;
		font-size: 1.1rem;
		border: 2px solid #97d7c5;
	}

	.summary-top__head--right {
		width: 90%;
		padding-block: 0.3rem;
		font-size: 1.1rem;
		border: 2px solid #91cce5;
	}

	.summary-top__text {
		font-size: .95rem;
		text-align: center;
		white-space: nowrap;
	}

	.summary-top__text span {
		white-space: nowrap;
	}

	.summary-top__left,.summary-top__right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.arrows {
		gap: 1px;
	}

	.arrow {
		width: 55px;
		height: 13px;
	}

	.arrow::before {
		width: 32px;
	}

	.arrow::after {
		width: 32px;
	}

	.summary-bottom__img {
		max-width: 85%;
	}

	.summary-bottom__head {
		width: 48%;
		padding-block: 0.3rem;
		margin-top: 1.5rem;
		font-size: 1.1rem;
		border: 2px solid #7baff1;
	}

	.summary-bottom__text {
		padding: 1.5rem 0 0;
		font-size: 1rem;
		white-space: nowrap;
	}
}

/* ---------------------------------------------------
	メニュー
	--------------------- */
.menu-list {
	display: flex;
	gap: 1rem;
	max-width: 100%;
	margin: 0 1rem 4rem;
	list-style: none;
}

.menu-list__item {
	position: relative;
	flex: 1;
	text-align: center;
}

.menu-list__item::after {
	position: absolute;
	bottom: 3px;
	height: 1.2rem;
	aspect-ratio: cos(30deg);
	margin-block: auto;
	clip-path: polygon(15% 25%, 85% 25%, 50% 75%);
	content: "";
	background: #fff;
}

.menu-list__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem 0 1.7rem;
	font-size: 1.1rem;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	background: #5fa2ba;
	box-shadow: 0 0 8px rgb(166 186 204 / 30%);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-list__link span {
	white-space: nowrap;
}

@media (any-hover: hover) {
	.menu-list__link:hover {
		color: #5a9db5;
		background: #fff;
		border: solid 1px #5fa2ba;
	}

	.menu-list__item:hover::after {
		background: #5a9db5;
	}
}

@media screen and (max-width: 767px) {
	.menu-list {
		flex-wrap: wrap;
		gap: 0.5rem;
		margin: 0 1rem 2.5rem;
	}

	.menu-list__item {
		flex: 1 1 calc(50% - 1rem);
	}

	.menu-list__link {
		padding: .8rem 0 1.2rem;
		font-size: .95rem;
	}
}
	
/* ---------------------------------------------------
	おすすめ
	--------------------- */
.recommend {
	padding: 0 0 6rem;
	background: #fafafa;
}

.recommend__point-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin: 0 auto;
}

.recommend__point {
	flex: 1 1 calc(50% - 1rem);
	padding: 1.5rem 0;
	text-align: center;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 8px rgb(209 209 209 / 40%);
}

.recommend__head {
	font-size: 1.2rem;
	font-weight: bold;
	color: #5093ab;
}

@media screen and (max-width: 767px) {
	.recommend {
	padding: 0 0 4rem;
}

	.recommend__point {
	flex: 0 0 100%;
	}
}

.p-card-list {
	display: grid;
	counter-reset: step;
}

.p-card-list__item {
	position: relative;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	text-align: center;
	background: #fff;
	border-radius: 13px;
	box-shadow: rgb(166 186 204 / 30%) 0 0 8px;
}

.p-card-list__item--send {
	box-shadow: rgb(209 209 209 / 35%) 0 0 8px;
}

.p-card-list__item--receive {
	box-shadow: rgb(166 186 204 / 30%) 0 0 8px;
}

.p-card-list__item::before {
	position: absolute;
	top: -28px;
	left: -10px;
	z-index: 1;
	width: 56px;
	height: 56px;
	padding: 0.5rem;
	font-size: 12px;
	color: #fff;
	text-align: center;
	border-radius: 50%;
}

.p-card-list__item--point::before {
	content: "POINT";
	background:linear-gradient(135deg, #acdcf7 0%, #a7d9c4 100%);
}

.p-card-list__item--send::before {
	content: "STEP";
	background:#97d7c5;
}

.p-card-list__item--receive::before {
	content: "STEP";
	background:#7baff1;
}

.p-card-list__item::after {
	position: absolute;
	top: -28px;
	left: -10px;
	z-index: 1;
	display: flex;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding-top: 20px;
	font-size: 24px;
	color: #fff;
	text-align: center;
	content: counter(step);
	counter-increment: step;
}

.p-card-list__img {
	border-radius: 5px;
}

.p-card-list__caption {
	display: grid;
	place-items: center;
	font-size: 0.95rem;
	font-weight: bold;
}

@media screen and (max-width: 767px) {
	.p-card-list {
		grid-template-columns: repeat(1, 1fr);
		row-gap: 3rem;
	}

	.p-card-list__item {
		row-gap: 1rem;
		padding: 1rem 0.5rem;
	}

	.p-card-list__caption {
		font-size: 1rem;
	}

	.p-card-list__caption::before {
		top: -17px;
		left: -5px;
	}

	.p-card-list__caption::after {
		top: -17px;
		left: -5px;
	}
}

@media screen and (min-width: 768px) {
	.p-card-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.5rem 2rem;
	}

	.p-card-list__item {
		padding: 1rem;
	}

	.p-card-list__item::before {
		top: -28px;
		left: -10px;
	}

	.p-card-list__item::after {
		top: -28px;
		left: -10px;
	}
}

/* ---------------------------------------------------
	ポイント
	--------------------- */
.point {
	padding: 0 0 6rem;
	background: #f1faff;
}

@media screen and (max-width: 767px) {
	.point {
	padding: 0 0 4rem;
}
}

/* ---------------------------------------------------
	おすすめシーン
	--------------------- */
.scene {
	padding: 0 0 6rem;
}

.scene__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	max-width: 780px;
	margin: 0 auto;
}

.scene__item {
	position: relative;
	width: calc((100% - 2rem) / 3);
	aspect-ratio: 1 / 1;
}

.scene__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.scene__text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
	text-shadow:0 0 4px rgb(0 0 0 / 80%),0 0 8px rgb(0 0 0 / 60%);
}

@media screen and (max-width: 767px) {
	.scene {
	padding: 0 0 4rem;
}

	.scene__item {
		width: calc((100% - 1rem) / 2);
	}

	.scene__text {
		font-size: 1.05rem;
	}
}

/* ---------------------------------------------------
	使い方
	--------------------- */
.flow-send {
	position: relative;
	z-index: 2;
	padding: 15px 0 4px;
	background: #fafafa;
}

.flow-send::after {
	position:absolute;
	bottom:-120px;
	left:0;
	z-index: 1;
	width:100%;
	height:120px;
	clip-path: polygon(
	0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
	content:"";
	background:#fafafa;
}

.flow-receive {
	position: relative;
	z-index: 0;
	padding: 184px 0 80px;
	background: #e7f2ff;
}

.flow__head {
	width: 30%;
	padding-block: 0.6rem;
	margin: 0 auto;
	font-size: 1.4rem;
	font-weight: bold;
	color: #97d7c5;
	text-align: center;
	background: #fff;
	border: 3px solid #97d7c5;
	border-radius: 50px;
}

.flow__head--blue {
	width: 30%;
	padding-block: 0.6rem;
	margin: 0 auto;
	font-size: 1.4rem;
	font-weight: bold;
	color: #7baff1;
	text-align: center;
	background: #fff;
	border: 3px solid #7baff1;
	border-radius: 50px;
}

@media screen and (max-width: 767px) {
	.flow-send {
	position: relative;
	z-index: 2;
	padding: 15px 0 28px;
	background: #fafafa;
	}
	.flow-send::after {
	bottom:-98px;
	clip-path: polygon(
	0 0, 100% 0, 100% 70%, 50% 95%, 0 70%);
	}

	.flow-receive {
	padding: 157px 0 80px;
	}

	.flow__head {
		width: 65%;
		padding-block: 0.5rem;
		font-size: 1.1rem;
		border: 2px solid #97d7c5;
	}

	.flow__head--blue {
		width: 65%;
		padding-block: 0.5rem;
		font-size: 1.1rem;
		border: 2px solid #7baff1;
	}
}

/* ---------------------------------------------------
	対象カタログギフト
	--------------------- */
.lineup-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	row-gap: 3rem;
}

.tag {
	display: inline-block;
	align-self: center;
	width: 44%;
	padding: 0.4rem 0;
	font-weight: bold;
	color: #fff;
	text-align: center;
	background: #5fa2ba;
	border-radius: 20px;
}

.lineup-list__item {
	display: flex;
	flex-direction: column;
}

.img-wrap a {
	display: flex;
	justify-content: center;
	width: 100%;
}

.img-wrap {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
}

.lineup-list__img {
	width: 100%;
	max-width: 200px;
}

.lineup-list__img--small {
	width: 100%;
	max-width: 170px;
}

.lineup-list__text {
	margin-top: 1rem;
	text-align: center;
}

.text-link {
	color: #0288d1;
	white-space: nowrap;
}

.spec-s1 {
	font-size: 1.1rem;
}

.spec-s2 {
	font-size: 1.5rem;
	font-weight: bold;
}

@media screen and (max-width: 767px) {
	.lineup-list {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 2rem;
	}

	.lineup-list__img--sp {
	max-width: 121px;
	}

	.tag {
		width: 68%;
		padding: 0.2rem 0;
		font-size: .85rem;
	}

	.text-link {
		font-size: 0.9rem;
	}

	.spec-s1 {
	font-size: .9rem;
	}

	.spec-s2 {
		font-size: 1.125rem;
	}

	.spec-s3,.spec-s4,.spec-s5 {
		font-size: 0.8rem;
	}
}

/* ---------------------------------------------------
	ソーシャルギフト
	--------------------- */
.social-gift {
	padding: 3rem 0 4rem;
	background-color: #f1faff;
}

.social-gift__icon {
	max-width: 60px;
	margin: 0 auto;
}

.social-gift__head {
	padding: 2rem 0;
	font-size: 1.4rem;
	font-weight: bold;
	color: #1a53d5;
	text-align: center;
}

.social-gift__text {
	padding-bottom: 2rem;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
}

.p-button--blue {
	position: relative;
	display: block;
	padding-block: 1.1rem;
	margin: 0 auto;
	font-size: 1.4rem;
	font-weight: bold;
	color: #1a53d5;
	text-align: center;
	text-decoration: none;
	list-style: none;
	background: #fff;
	border: 1px solid #1a53d5;
}

.p-button--blue::after {
	position: absolute;
	top: 0;
	right: 15rem;
	bottom: 0;
	height: 1.2rem;
	aspect-ratio: cos(30deg);
	margin-block: auto;
	clip-path: polygon(15% 25%, 85% 25%, 50% 75%);
	content: "";
	background: currentcolor;
}

@media (any-hover: hover) {
	.p-button--blue:hover {
		color: #fff;
		background-color: #1a53d5;
	}
}

@media screen and (max-width: 767px) {
	.social-gift {
		padding: 2.5rem 0 3rem;
	}

	.social-gift__icon {
		max-width: 45px;
	}

	.social-gift__head {
		padding: 1.5rem 0 1rem;
		font-size: 1.2rem;
		line-height: 2rem;
		white-space: nowrap;
	}

	.social-gift__text {
		font-size: 1rem;
		white-space: nowrap;
	}

	.p-button--blue {
		padding-block: 0.5rem;
		font-size: 1.1rem;
	}

	.p-button--blue::after {
		right: 4.5rem;
	}
}

/* ---------------------------------------------------
	おすすめ物品
	--------------------- */
.select {
	padding: 0 0 2rem;
}

.select-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3rem;
}

.select-list__thumb {
	padding-bottom: 1rem;
}

@media screen and (max-width: 767px) {
	.select {
		padding: 0 0 2rem;
	}

	.select-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
}

/* ---------------------------------------------------
	よくある質問
	--------------------- */
.question {
	position: relative;
}

.question-head {
	padding: 1.1rem 0;
	margin: 0 auto 1rem;
	font-size: 1.5rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
	background: #97d7c5;
}

.question-head--blue {
	padding: 1.1rem 0;
	margin: 5rem auto 1rem;
	font-size: 1.5rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
	background: #7baff1;
}

.question-list {
	display: flex;
	flex-direction: column;
	counter-reset: question-number;
}

.question-list__heading {
	display: flex;
	align-items: center;
	cursor: pointer;
	border-bottom: 1px dotted #b4b4b4;
}

.question-list__heading::before {
	flex-shrink: 0;
	width: 5rem;
	font-weight: bold;
	color: #646464;
	text-align: left;
	content: "Q" counter(question-number);
	counter-increment: question-number;
}

.question-list__heading::after {
	margin-left: auto;
	font-family: 'nextIcon';
	color: #646464;
	content: "\e90b";
	transition: transform 0.2s linear;
}

.question-list__heading[data-toggle-state="active"]::after {
	transform: rotate(-180deg);
}

.question-list__desc {
	display: grid;
	grid-template-rows: 0fr;
	pointer-events: none;
	border-bottom: 1px solid #b4b4b4;
	opacity: 0;
}

.question-list__inner {
	position: relative;
	overflow: hidden;
	background: #fff;
}

.question-list__inner::before {
	position: absolute;
	font-weight: bold;
	color: #97d7c5;
	content: "A";
}

.question-head--blue + .question-list 
.question-list__inner::before {
	color: #7baff1;
}

@keyframes toggle-apper {
	0% {
		grid-template-rows: 0fr;
		opacity: 1;
	}

	25% {
		grid-template-rows: 1fr;
		opacity: 1;
	}

	100% {
		grid-template-rows: 1fr;
		opacity: 1;
	}
}

@keyframes toggle-disapper {
	0% {
		grid-template-rows: 1fr;
		opacity: 1;
	}

	25% {
		grid-template-rows: 1fr;
		opacity: 0;
	}

	100% {
		grid-template-rows: 0fr;
		visibility: hidden;
		opacity: 0;
	}
}

.question-list__desc[data-toggle-state="active"] {
	pointer-events: auto;
	animation: toggle-apper 0.4s linear forwards;
}

.question-list__desc[data-toggle-state="inactive"] {
	animation: toggle-disapper 0.4s linear forwards;
}

@media screen and (max-width: 767px) {
	.question {
		width: calc(100% - 1rem);
		padding-inline: 0;
		margin: 0 auto;
		border-radius: 16px;
	}

	.question-head {
		padding: 0.7rem 0;
		font-size: 1.2rem;
	}

	.question-head--blue {
		padding: 0.7rem 0;
		margin: 3rem auto 1rem;
		font-size: 1.2rem;
	}

	.question-list__heading {
		column-gap: 0.5rem;
		padding: 0.5rem;
	}

	.question-list__heading::before {
		font-size: 1.2rem;
	}

	.question-list__heading::after {
		font-size: 1.2rem;
	}

	.question-list__inner::before {
		top: 0.5rem;
		left: 0.5rem;
		font-size: 1.25rem;
	}
}

@media screen and (min-width: 768px) {
	.question {
		width: 960px;
		padding: 1rem 4rem 2rem;
		margin: 1rem auto;
		border-radius: 24px;
	}

	.question-list__heading {
		column-gap: 1.5rem;
		padding: 0.3rem;
		font-size: 1.1rem;
	}

	.question-list__heading::before {
		font-size: 1.5rem;
	}

	.question-list__heading::after {
		font-size: 2rem;
	}

	.question-list__inner::before {
		top: 2rem;
		left: 2rem;
		font-size: 2rem;
	}
}