@charset "UTF-8";
/* ------------------------------
	faq
------------------------------ */
@media (max-width: 767px) {
    .wrap_header-link { display: none; }
}
.logo-wrap {
	position: absolute; top: 30%; left: 50%;
	transform: translate(-50%, -50%); margin: 0; z-index: 10;
}
.logo-wrap img { width: 180px; height: auto; }
@media (min-width: 768px) {
	.logo-wrap { top: 15%; left: 4%; transform: none; }
	.logo-wrap img { width: 230px; }
}
.sec_faq {
	background: url(../../common/images/bg_gray.jpg) center top / cover no-repeat;
	padding-top: 5rem;
	padding-bottom: 6rem;
}
.faq-title {
	font-size: 2.4rem;
	font-weight: 400;
	letter-spacing: 0.15em;
	text-align: center;
	margin: 0 0 2.4rem;
}
.faq-lead {
	font-size: 1.4rem;
	line-height: 2;
	text-align: center;
	margin-bottom: 4.8rem;
}
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item {
	background: rgba(255,255,255,0.85);
	border-bottom: 1px solid #d8d8de;
}
.faq-item:first-child { border-top: 1px solid #d8d8de; }
.faq-item summary {
	display: flex; align-items: center; gap: 1.6rem;
	padding: 2rem 5rem 2rem 2rem;
	cursor: pointer; list-style: none; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: ""; position: absolute; right: 2.2rem; top: 50%;
	width: 10px; height: 10px;
	border-right: 1px solid #111; border-bottom: 1px solid #111;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .3s;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item h3 {
	font-size: 1.5rem; font-weight: 700; line-height: 1.7; margin: 0;
}
.faq-q, .faq-a-mark {
	flex-shrink: 0;
	font-family: 'Oswald', sans-serif;
	font-size: 1.8rem; line-height: 1;
	width: 3.4rem; height: 3.4rem;
	display: flex; align-items: center; justify-content: center;
}
.faq-q { background: #111; color: #fff; }
.faq-a-mark { border: 1px solid var(--color-accent); color: #111; }
.faq-a {
	display: flex; gap: 1.6rem;
	padding: 0 2rem 2.4rem;
}
.faq-a p { font-size: 1.4rem; line-height: 2; margin: 0.4rem 0 0; }
.faq-btn { margin-top: 5.6rem; }
.footer-nav { text-align: center; margin: 3.2rem 0 1.6rem; }
.footer-nav a { color: #fff; margin: 0 0.8em; text-decoration: none; letter-spacing: .1em; }
.footer-nav a:hover { opacity: .7; }
@media (min-width: 768px) {
	.sec_faq { padding-top: 8rem; padding-bottom: 10rem; }
	.faq-title { font-size: 2.8rem; }
	.faq-item summary { padding: 2.4rem 6rem 2.4rem 2.8rem; }
	.faq-a { padding: 0 2.8rem 2.8rem; }
	.faq-item h3 { font-size: 1.6rem; }
	.faq-a p { font-size: 1.5rem; }
}

/* ------------------------------
	dark base（黒ベース）
------------------------------ */
.header-sub .heading-title {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	letter-spacing: .12em;
	font-size: clamp(2.6rem, calc(2.4vw + 1rem), 4.4rem);
}
.sec_faq, .sec_stylist {
	background: #111;
	color: #fff;
}
.faq-title, .st-title { color: #fff; }
.faq-lead, .st-lead { color: #bbb; }
.faq-item { background: #1a1a1a; border-bottom: 1px solid #2c2c2c; }
.faq-item:first-child { border-top: 1px solid #2c2c2c; }
.faq-item h3 { color: #fff; font-family: "Noto Sans", sans-serif; }
.faq-item summary::after { border-color: #fff; }
.faq-q { background: #fff; color: #111; }
.faq-a-mark { border: 1px solid var(--color-accent); color: var(--color-accent); }
.faq-a p { color: #ccc; }
.faq-title, .st-title { font-family: "Noto Sans", "YuGothic", sans-serif; }