@charset "UTF-8";
/* CSS Document */

#taser {
	background-image: url(../../images/faq/faqTaser.jpg);
}

/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px) {

	#faqLeadTitle {
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#faqLeadTitle li:nth-child(1) {
		background-color: #D3D3D3;
		height: 2px;
		width: 35%;
		display: block;
	}

	#faqLeadTitle li:nth-child(2) {
		margin: 0 1%;
	}

	#faqLeadTitle li:nth-child(3) {
		background-color: #D3D3D3;
		height: 2px;
		width: 35%;
		display: block;
	}

	/* アンカーリンク */
	#anchorList {
		max-width: 1020px;
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		margin: 0 auto;
	}
	#anchorList .anchorListItem a {
		display: inline-block;
		color: #2F4E7A;
		font-weight: 700;
		text-decoration: unset;
		background-color: #FFFFFF;
		border: 1px solid #2F4E7A;
		border-radius: 50px;
		overflow: hidden;
		padding: 16px 40px;
	}

	/* 各質問の大セクションん */
	.faqWrap {
		max-width: 1020px;
		margin: 120px auto 0;
	}
	.faqTitle {
		position: relative;
		width: fit-content;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		color: #2F4E7A;
		font-size: 24px;
		font-family: "Zen Kaku Gothic Antique", "游ゴシック Medium", YuGothic, "游ゴシック体", "Yu Gothic Medium", "メイリオ", Meiryo, Arial, Helvetica, "MS UI Gothic", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
		font-weight: 700;
		margin: 0 auto;
	}
	.faqTitle::before,
	.faqTitle::after {
		content: "";
		display: inline-block;
		width: 1em;
		border-top: 2px solid #2F4E7A;
	}
	/* 各質問の小セクション */
	.faqContainer {
		display: flex;
		flex-direction: column;
		gap: 40px;
		margin-top: 40px;
	}
	.faq {
		background-color: #FFFFFF;
		padding: 0 6.8%;
	}
	.faq .faqHead {
		display: flex;
		padding: 32px 0;
		gap: 24px;
	}
	.faq .faqHead .mark {
		color: #167742;
		font-size: 22px;
		font-weight: 700;
	}
	.faq .faqHead .text {
		flex: 1;
		font-weight: 700;
		padding-top: 4px;
	}
	.faq .faqHead .arrow {
		position: relative;
		width: 32px;
		height: 32px;
		background-color: #2F4E7A;
		border-radius: 50%;
	}
	.faq .faqHead .arrow::before {
		content: "";
		display: inline-block;
		width: 8px;
		height: 8px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-30%, -120%) rotate(-45deg);
		transform-origin: right bottom;
		border-left: 3px solid #FFFFFF;
		border-bottom: 3px solid #FFFFFF;
	}
	.faq .faqHead.open .arrow::before {
		transform: translate(-170%, -80%) rotate(-225deg);
	}
	.faq .faqBodyInner {
		display: flex;
		gap: 24px;
		padding: 32px 0;
		border-top: 1px solid #D3D3D3;
	}
	.faq .faqBodyInner .mark {
		color: #167742;
		font-size: 22px;
		font-weight: 700;
		line-height: 1.75;
	}
	.faq .faqBodyInner .textWrap {
		flex: 1;
	}
	.faq .faqBodyInner .text {
		line-height: 2.25;
	}
	/* アコーデイオン */
	.faq .toggleBody {
		display: none;
	}
}

/*===============================================
●画面の横幅が729px以下(スマホ)
===============================================*/
@media print, screen and (max-width: 729px) {

	#taser {
		background-position: 25% center;
	}

	#faqLeadTitle {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
	}

	#faqLeadTitle li:nth-child(1) {
		background-color: #D3D3D3;
		height: 2px;
		width: 30%;
		display: block;
	}

	#faqLeadTitle li:nth-child(2) {
		margin: 0 1%;
	}

	#faqLeadTitle li:nth-child(3) {
		background-color: #D3D3D3;
		height: 2px;
		width: 30%;
		display: block;
	}

	/* アンカーリンク */
	#anchorList {
		max-width: 1020px;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0 3%;
	}
	#anchorList .anchorListItem a {
		display: inline-block;
		color: #2F4E7A;
		font-weight: 700;
		text-decoration: unset;
		background-color: #FFFFFF;
		border: 1px solid #2F4E7A;
		border-radius: 50px;
		overflow: hidden;
		padding: 8px 24px;
	}

	/* 各質問の大セクションん */
	.faqWrap {
		max-width: 1020px;
		margin: 88px 3% 0;
	}
	.faqTitle {
		position: relative;
		width: fit-content;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		color: #2F4E7A;
		font-size: 24px;
		font-family: "Zen Kaku Gothic Antique", "游ゴシック Medium", YuGothic, "游ゴシック体", "Yu Gothic Medium", "メイリオ", Meiryo, Arial, Helvetica, "MS UI Gothic", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
		font-weight: 700;
		margin: 0 auto;
	}
	.faqTitle::before,
	.faqTitle::after {
		content: "";
		display: inline-block;
		width: 1em;
		border-top: 2px solid #2F4E7A;
	}
	/* 各質問の小セクション */
	.faqContainer {
		display: flex;
		flex-direction: column;
		gap: 24px;
		margin-top: 40px;
	}
	.faq {
		background-color: #FFFFFF;
		padding: 0 4%;
	}
	.faq .faqHead {
		display: flex;
		padding: 16px 0;
		gap: 16px;
	}
	.faq .faqHead .mark {
		color: #167742;
		font-size: 22px;
		font-weight: 700;
	}
	.faq .faqHead .text {
		flex: 1;
		font-weight: 700;
		padding-top: 4px;
	}
	.faq .faqHead .arrow {
		position: relative;
		width: 16px;
		height: 16px;
		background-color: #2F4E7A;
		border-radius: 50%;
		margin-top: 6px;
	}
	.faq .faqHead .arrow::before {
		content: "";
		display: inline-block;
		width: 4px;
		height: 4px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-30%, -120%) rotate(-45deg);
		transform-origin: right bottom;
		border-left: 1px solid #FFFFFF;
		border-bottom: 1px solid #FFFFFF;
	}
	.faq .faqHead.open .arrow::before {
		transform: translate(-170%, -80%) rotate(-225deg);
	}
	.faq .faqBodyInner {
		display: flex;
		gap: 16px;
		padding: 16px 0;
		border-top: 1px solid #D3D3D3;
	}
	.faq .faqBodyInner .mark {
		color: #167742;
		font-size: 22px;
		font-weight: 700;
		line-height: 1.75;
	}
	.faq .faqBodyInner .textWrap {
		flex: 1;
	}
	.faq .faqBodyInner .text {
		line-height: 2.25;
	}
	/* アコーデイオン */
	.faq .toggleBody {
		display: none;
	}
}