/* よくあるご質問 */

/* PC */
html[data-browse-mode="P"] .block-faq {
	width: 1100px;
	margin: 24px auto 80px;
}
html[data-browse-mode="P"] .block-faq h1 {
}
html[data-browse-mode="P"] .block-faq-intro {
	margin: 0 0 68px;
}
html[data-browse-mode="P"] .block-faq-intro--text {
	margin: 0 0 60px;
}
html[data-browse-mode="P"] .block-faq-intro--nav {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 20px;
}
html[data-browse-mode="P"] .block-faq-intro--nav li {
	width: calc(calc(100% - 20px * 3) / 4);
	margin: 0;
}
html[data-browse-mode="P"] .block-faq-intro--nav li a {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid #dddddd;
	padding: 10px 20px 10px 10px;
	text-align: left;
	font-size: 13px;
	color: var(--text-color2);
	min-height: 60px;
}
html[data-browse-mode="P"] .block-faq-intro--nav li a:hover {
	text-decoration: none;
	opacity: .8;
}
html[data-browse-mode="P"] .block-faq-intro--nav li span {
	position: static;
	display: block;
	font-weight: bold;
	padding: 0;
}
html[data-browse-mode="P"] .block-faq-intro--nav li span:after {
	content: "";
	position: absolute;
	top: calc(50% - 3px);
	right: 10px;
	width: 6px;
	height: 6px;
	border-right: 1px solid var(--color-gold);
	border-bottom: 1px solid var(--color-gold);
	transform: rotate(45deg);
}
html[data-browse-mode="P"] .block-faq-section.faq-content {
	width: 800px;
	margin: 100px auto 100px;
}
html[data-browse-mode="P"] .block-faq-section.faq-content:last-child {
margin: 100px auto 120px;
}
html[data-browse-mode="P"] .block-faq-section dl {
	border: 1px solid #d0d0d0;
	background-color: #ffffff;
}
html[data-browse-mode="P"] .block-faq-section dl:not(:last-child) {
	margin: 0 0 20px;
}
html[data-browse-mode="P"] .block-faq-section dt {
	position: relative;
	padding: 16px 24px 16px 24px;
	font-size: 15px;
	font-weight: bold;
	color: var(--text-color2);
	cursor: pointer;
}
html[data-browse-mode="P"] .block-faq-section dt:before,
html[data-browse-mode="P"] .block-faq-section dt:after {
	content: "";
	position: absolute;
	top: 0;
	right: 24px;
	bottom: 0;
	margin: auto;
	width: 15px;
	height: 1px;
	background: var(--color-beige);
	transition: .3s ease;
}
html[data-browse-mode="P"] .block-faq-section dt:after {
	transform: rotate(90deg);
}
html[data-browse-mode="P"] .block-faq-section dt.open:after {
	transform: rotate(180deg);
}
html[data-browse-mode="P"] .block-faq-section dt span {
	display: block;
	padding: 0 24px 0 40px;
}
html[data-browse-mode="P"] .block-faq-section dt,
html[data-browse-mode="P"] .block-faq-section dd {
	position: relative;
}
html[data-browse-mode="P"] .block-faq-section dt span::before,
html[data-browse-mode="P"] .block-faq-section dd::before {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 12px;
	left: 18px;
	padding: 0 0 3px;
	border-radius: 100px;
	line-height: 1;
	font-size: 15px;
	font-weight: bold;
	font-style: normal;
	font-family: var(--font-antonio);
	color: var(--color-gold);
	background-color: var(--sub-color);
}
html[data-browse-mode="P"] .block-faq-section dt span::before {
	content: 'Q';
}
html[data-browse-mode="P"] .block-faq-section dd::before {
	content: 'A';
}
html[data-browse-mode="P"] .block-faq-section dd {
	display: none;
	position: relative;
	padding: 16px  64px 0;
	margin: 0 0 28px;
	font-size: 15px;
	color: var(--text-color2);
}
html[data-browse-mode="P"] .block-faq-section dd::before {
	top: 10px;
	color: #ffffff;
	background-color: var(--color-gold);
}

html[data-browse-mode="P"] .block-faq-section dd p:not(:last-child),
html[data-browse-mode="P"] .block-faq-section dd div:not(:last-child) {
	margin: 0 0 22px;
}
html[data-browse-mode="P"] .block-faq-section dd a {
	text-decoration: underline;
}
html[data-browse-mode="P"] .block-faq-section dd a:hover {
	text-decoration: none;
}
html[data-browse-mode=P] .block-faq-section_inner {
	position: relative;
	padding: 100px 0 120px 0;
}
html[data-browse-mode=P] .block-faq-section:nth-child(odd) .block-faq-section_inner::before {
	display: block;
	content: '';
	position: absolute;
	left: calc((100% - var(--vw)* 100) / 2);
	right: calc((100% - var(--vw)* 100) / 2);
	top: 0;
	bottom: 0;
	z-index: 0;
	background: var(--sub-color);
}


html[data-browse-mode=P] .block-faq-section_inner2 {
	width: 800px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
html[data-browse-mode=P] .block-faq-section h2 {
	margin-bottom: 80px;
	padding-bottom: 27px;
	position: relative;
	text-align: center;
}
html[data-browse-mode=P] .block-faq-section h2::after {
	content: "";
	display: block;
	width: 60px;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: calc(50% - 30px);
	background-color: var(--color-yellow);
}

/* SP */
html[data-browse-mode="S"] .page-main--faq {
  max-width: calc(100dvw - 3rem);
  margin-left: auto;
  margin-right: auto;
}
html[data-browse-mode="S"] .block-faq {
	width: auto;
	margin: 24px auto 80px;
}
html[data-browse-mode="S"] .block-faq h1 {
	margin-bottom: 18px;
}
html[data-browse-mode="S"] .block-faq-intro {
	margin: 0 0 68px;
}
html[data-browse-mode="S"] .block-faq-intro--text {
	font-size: 1.6rem;
	margin: 0 0 5.8rem;
}
html[data-browse-mode="S"] .block-faq-intro--nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: calc(4 / 414 * 100vw);
}
html[data-browse-mode="S"] .block-faq-intro--nav li {
	width: calc((100% - (4 / 414 * 100vw)) / 2);
	min-height: 6rem;
}
html[data-browse-mode="S"] .block-faq-intro--nav li a {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 1px solid #dddddd;
	font-size: calc((13 / 414) * 100vw);
	font-weight: bold;
	color: var(--text-color2);
}
html[data-browse-mode="S"] .block-faq-intro--nav li span {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 100%;
	position: relative;
	padding: 0 calc((20 / 414) * 100vw) 0 calc((10 / 414) * 100vw);
}
html[data-browse-mode="S"] .block-faq-intro--nav li span:after {
	content: "";
	position: absolute;
	top: calc(50% - 4px);
	right: calc((10 / 414) * 100vw);
	width: calc((5 / 414) * 100vw);
	height: calc((5 / 414) * 100vw);
	border-right: 1px solid var(--color-gold);
	border-bottom: 1px solid var(--color-gold);
	transform: rotate(45deg);
}
html[data-browse-mode="S"] .block-faq-section.faq-content {
	width: auto;
	margin: calc((60 / 414) * 100vw) auto calc((80 / 414) * 100vw);
}
html[data-browse-mode="S"] .block-faq-section dl {
	border: 1px solid #d0d0d0;
	background-color: #ffffff;
}
html[data-browse-mode="S"] .block-faq-section dl:not(:last-child) {
margin: 0 0 10px;
}
html[data-browse-mode="S"] .block-faq-section dt {
	position: relative;
	padding: calc((16 / 414) * 100vw) calc((34 / 414) * 100vw) calc((16 / 414) * 100vw) calc((40 / 414) * 100vw);
	font-size: calc((14 / 414) * 100vw);
	font-weight: bold;
	color: var(--text-color2);
	cursor: pointer;
}
html[data-browse-mode="S"] .block-faq-section dt:before,
html[data-browse-mode="S"] .block-faq-section dt:after {
	content: "";
	position: absolute;
	top: 0;
	right: calc((10 / 414) * 100vw);
	bottom: 0;
	margin: auto;
	width: calc((15 / 414) * 100vw);
	height: 1px;
	background: var(--color-beige);
	transition: .3s ease;
}
html[data-browse-mode="S"] .block-faq-section dt:after {
	transform: rotate(90deg);
}
html[data-browse-mode="S"] .block-faq-section dt.open:after {
	transform: rotate(180deg);
}
html[data-browse-mode="S"] .block-faq-section dt span {
	padding: 0;
}
html[data-browse-mode="S"] .block-faq-section dt span::before,
html[data-browse-mode="S"] .block-faq-section dd::before {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc((20 / 414) * 100vw);
	height: calc((20 / 414) * 100vw);
	position: absolute;
	top: calc((16 / 414) * 100vw);
	left: calc((10 / 414) * 100vw);
	padding: 0 0 calc((2 / 414) * 100vw);
	border-radius: 200px;
	line-height: 1;
	font-size: calc((13 / 414) * 100vw);
	font-weight: bold;
	font-style: normal;
	font-family: var(--font-antonio);
	color: var(--color-gold);
	background-color: var(--sub-color);
}
html[data-browse-mode="S"] .block-faq-section dt span::before {
	content: 'Q';
}
html[data-browse-mode="S"] .block-faq-section dd::before {
	content: 'A';
	top: 0;
	color: #ffffff;
	background-color: var(--color-gold);
}
html[data-browse-mode="S"] .block-faq-section dd {
	display: none;
	position: relative;
	padding: 0 calc((15 / 414) * 100vw) calc((25 / 414) * 100vw) calc((40 / 414) * 100vw);
	font-size: 1.4rem;
	color: var(--text-color2);
}
html[data-browse-mode="S"] .block-faq-section dd p:not(:last-child),
html[data-browse-mode="S"] .block-faq-section dd div:not(:last-child) {
	margin: 0 0 22px;
}
html[data-browse-mode="S"] .block-faq-section dd p span {
	color: #d53100;
}
html[data-browse-mode="S"] .block-faq-section dd a {
	text-decoration: underline;
}
html[data-browse-mode="S"] .block-faq-section_inner {
	margin: 0 -1.5rem 0;
	padding: calc((60 / 414) * 100vw) 0 calc((80 / 414) * 100vw) 0;
}
html[data-browse-mode="S"] .block-faq-section:nth-child(odd) .block-faq-section_inner {
	background-color: var(--sub-color);
}
html[data-browse-mode="S"] .block-faq-section_inner2 {
	max-width: calc(100dvw - 3rem);
	margin-left: auto;
	margin-right: auto;
}
html[data-browse-mode="S"] .block-faq-section h2 {
	margin-bottom: calc((32 / 414) * 100vw);
	padding-bottom: calc((27 / 414) * 100vw);
	position: relative;
	text-align: center;
	font-size: calc((25 / 414) * 100vw);
}
html[data-browse-mode="S"] .block-faq-section h2::after {
	content: "";
	display: block;
	width: calc((60 / 414) * 100vw);
	height: 2px;
	position: absolute;
	bottom: 0;
	left: calc(50% - (30 / 414) * 100vw);
	background-color: var(--color-yellow);
}