/* CSS Document */
.faq-chara {
	padding: 10px;
	background-color: var(--color-sub);
	color: #fff;
	font-size: clamp(16px, 1.66vw, 20px);
	margin-bottom: 5px;
	margin-top: 10px;
}
@media screen and (max-width: 768px) {
.faq-chara {
	padding: 6px;
	margin-top: 6px;
}
}

.faq-item {
	padding: 10px;
	background-color: var(--color-text);
	color: #fff;
	font-size: clamp(16px, 1.66vw, 20px);
	margin-bottom: 5px;
	transition: background 0.2s ease;
}
@media screen and (max-width: 768px) {
.faq-item {
	padding: 6px;
}
}

.faq-item.open {
	background-color: var(--color-main);
	margin-top: 10px;
	margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
.faq-item.open {
	margin-top: 6px;
	margin-bottom: 6px;
}
}



.faq-answer {
  display: none; /* 最初は非表示 */
  padding: 10px 0 0;
	margin: 10px 0 0;
	border-top: 2px solid #fff;
}
@media screen and (max-width: 768px) {
.faq-answer {
  padding: 6px 0 0;
	margin: 6px 0 0;
	border-top: 1px solid #fff;
}
}


.faq-question {
  cursor: pointer;
  padding: 0 2em 0 0;
  margin: 0;
	position: relative;
	font-weight: 700;
}
.faq-question::before {
	content: '+';
	font-weight: 700;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.faq-item.open .faq-question::before {
	content: '-';
}

.faq-question:hover {
}

.more {
	padding: 10px;
  background: linear-gradient(90deg, var(--color-text) 50%, var(--color-main) 50%);
  background-size: 200% auto; /* 2倍の幅で横スライド */
	color: #fff;
	font-size: clamp(16px, 1.66vw, 20px);
  cursor: pointer;
	position: relative;
	font-weight: 700;
	text-align: center;
/*	margin: 10px auto 2rem;*/
	margin: 10px auto 0;
  transition: background-position 0.1s ease-in-out;
}
@media screen and (max-width: 768px) {
.more {
	padding: 6px;
	margin: 6px auto 0;
}
}


.more::before {
	content: "MORE";
}
.more::after {
	content: "";
	display: inline-block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid #fff; /* 好きな色 */
	margin-left: 1rem;
  transition: transform 0.1s;
}


.more:hover {
  background-position: -100% 0; /* 右から左にスライド */
}
.more.open::after {
  transform: rotate(180deg);	
}
.more.open::before {
	content: "CLOSE";
}

.more-item{
	display: none;
}