@charset "UTF-8";

/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
WP Maruso Group Theme
	ver.2023.08.16.Custom-
	固定ページ「よくあるご質問」　スタイルシート
────────────────────────────────────────
FileName:		/marusogroupTheme/assets/css/style-page-faq.css
Editor:			TRUSTEC
Description:	固定ページ「よくあるご質問」　スタイルシート。
────────────────────────────────────────
2023/07/25:		公開。
2022/12/01:		開発開始。
2022/11/01:		サンプル開発開始。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/





/* ::::: [COMMON] ::::: */





/* ::::: [OVER-WRITES : STYLE-COMMON] ::::: */

/* Intro Child
--------- --------- --------- ------- */
.intro-child-overlays-wrapper .title {
}





/* ::::: [OVER-WRITES : ] ::::: */





/* ::::: [PATTERN TITLE  : ] ::::: */

/* Setting
--------- --------- --------- ------- */
.pattern-title-ribbon {
	/*	カスタムプロパティ	*/
}

/*	レベル２の見出し	*/
.pattern-title-ribbon.title-level2 {
    margin-top: 2em;
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {

}
/*	DisplayWidth < MD	*/
@media (max-width: 767px) {
}
/*	DisplayWidth < XS	*/
@media (max-width: 575px) {

	/*	レベル２の見出し	*/
	.pattern-title-ribbon.title-level2 {
		margin-top: 1em;
		margin-bottom: 1em;
		padding-left: calc(var(--page-layout-space-width) * 2);
		padding-right: var(--page-layout-space-width);
	}
}





/* ::::: [SECTION : FAQ-INDEX] ::::: */

/* Setting
--------- --------- --------- ------- */
#faq-index {
	/*background-color: rgba(255, 0, 0, 0.1);*/
}

.faq-index-wrapper {
	/*background-color: rgba(0, 0, 255, 0.2);*/
}

#faq-index .lead {
	font-size: max(1.2rem, 1.57vw);		/*	title-font-size-30	*/
	font-weight: var(--common-font-weight-black);
	text-align: center;
	margin-bottom: 2em;
}

/* Buttons
--------- --------- --------- ------- */
/**		*/
.btn-faq {
	background-color: #fff4f4;
	font-size: max(0.8rem, 1.1981vw);
	font-family: var(--common-font-family);
	font-style: var(--common-font-style);
	font-weight: var(--common-font-weight-black);
	color: currentColor;
	text-align: left;
	width: 100%;
	padding: 1em 2em;
	border: solid max(2px, 0.16vw) var(--common-pointed-color-1);
	border-radius: 2em;
	display: inline-block;
	position: relative;
}
.btn-faq::after{
	content: "";
	width: 0.7em;
	height: 0.7em;
	border-right: solid max(2px, 0.16vw) var(--common-pointed-color-1);
	border-bottom: solid max(2px, 0.16vw) var(--common-pointed-color-1);
	display: block;
	position: absolute;
	top: 50%;
	right: 1.5em;
	transform: translateY(-60%) rotate(40deg);
}
.btn-faq .title {
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {

}
/*	DisplayWidth < MD	*/
@media (max-width: 767px) {
}
/*	DisplayWidth < XS	*/
@media (max-width: 575px) {

	.faq-index-wrapper {
		margin-left: var(--page-layout-space-width);
		margin-right: var(--page-layout-space-width);
	}

	/* Buttons
	--------- --------- --------- ------- */
	.btn-faq {
		font-size: 1rem;
		padding: 1em;
	}
	.btn-faq::after{
		right: 1em;
	}

	.btn-faq .title {
	}
}






/* ::::: [] ::::: */

/* Setting
--------- --------- --------- ------- */
.faq-content-wrapper {
	/*background-color: rgba(0, 0, 0, 0.1);*/
}

/*	Items	*/
.faq-item {
	/*background-color: rgba(0, 0, 0, 0.1);*/
}

/*	Question Title	*/
.faq-item .faq-title {
}
.faq-item .faq-title::before {
	content: "Q.";
	font-family: var(--common-font-an-family);
	font-weight: var(--common-font-an-weight-bold);
	margin-right: 0.5em;
	display: inline-block;
}

/*	Answer	*/
.faq-item .faq-answer {
	/*background-color: rgba(0, 0, 0, 0.1);*/
	line-height: 2em;
	padding-left: calc(max(1.2rem, 1.83vw) * 1.5);
	padding-right: calc(max(1.2rem, 1.83vw) * 1.5);
}
.faq-item .faq-answer::before {
	content: "A.";
	font-family: var(--common-font-an-family);
	font-weight: var(--common-font-an-weight-bold);
	margin-right: 0.5em;
	display: inline-block;
}

.faq-item .faq-answer > p:last-of-type {
	margin-bottom: 2em;
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {

}
/*	DisplayWidth < MD	*/
@media (max-width: 767px) {
}
/*	DisplayWidth < XS	*/
@media (max-width: 575px) {

	/* Setting
	--------- --------- --------- ------- */
	.faq-content-wrapper {
	}

	/*	Items	*/
	.faq-item {
	}

	/*	Question Title	*/
	.faq-item .faq-title {
	}

	/*	Answer	*/
	.faq-item .faq-answer {
/*		padding-left: 1em;
		padding-right: 1em;*/
		margin-left: var(--page-layout-space-width);
		margin-right: var(--page-layout-space-width);
		padding-left: var(--page-layout-space-width);
		padding-right:var(--page-layout-space-width);
	}
	.faq-item .faq-answer > p:last-of-type {
		margin-bottom: 1em;
	}
}





/* ::::: [SECTION : FAQ-CONTENTS] ::::: */

/* Setting
--------- --------- --------- ------- */
#faq-1 {
	/*background-color: rgba(255, 255, 0, 0.1);*/
}

#faq-1 .faq-content-wrapper {
	/*background-color: rgba(255, 255, 0, 0.1);*/
}

#faq-1 .faq-item {
	/*background-color: rgba(255, 255, 0, 0.1);*/
}

/* Setting
--------- --------- --------- ------- */
#faq-2 {
	/*background-color: rgba(0, 255, 255, 0.1);*/
}

#faq-2 .faq-content-wrapper {
	/*background-color: rgba(0, 255, 255, 0.1);*/
}

#faq-2 .faq-item {
	/*background-color: rgba(0, 255, 255, 0.1);*/
}

/* Setting
--------- --------- --------- ------- */
#faq-3 {
	/*background-color: rgba(255, 0, 255, 0.1);*/
}

#faq-3 .faq-content-wrapper {
	/*background-color: rgba(255, 0, 255, 0.1);*/
}

#faq-3 .faq-item {
	/*background-color: rgba(255, 0, 255, 0.1);*/
}

/* Setting
--------- --------- --------- ------- */
#faq-4 {
	/*background-color: rgba(180, 180, 0, 0.1);*/
}

#faq-4 .faq-content-wrapper {
	/*background-color: rgba(180, 180, 0, 0.1);*/
}

#faq-4 .faq-item {
	/*background-color: rgba(180, 180, 0, 0.1);*/
}

/* Setting
--------- --------- --------- ------- */
#faq-5 {
	/*background-color: rgba(0, 180, 180, 0.1);*/
}

#faq-5 .faq-content-wrapper {
	/*background-color: rgba(0, 180, 180, 0.1);*/
}

#faq-5 .faq-item {
	/*background-color: rgba(0, 180, 180, 0.1);*/
}

/* Setting
--------- --------- --------- ------- */
#faq-6 {
	/*background-color: rgba(180, 0, 180, 0.1);*/
}

#faq-6 .faq-content-wrapper {
	/*background-color: rgba(180, 0, 180, 0.1);*/
}

#faq-6 .faq-item {
	/*background-color: rgba(180, 0, 180, 0.1);*/
}






.inner-page {
	color: var(--common-color);
	font-size: inherit;
	display: inline-block;
}
.inner-page::after {
	content: "";
	background: url("../images/common/icon-circle-red-hole.svg") no-repeat center center;
	background-size: cover;
	vertical-align: baseline;
	width: 1em;
	height: 1em;
	margin-left: 0.3em;
	display: inline-block;
}
.inner-page a {
	color: var(--common-color);
}