@charset "utf-8";

/* 共通パーツ
------------------------------------------------------------------------------------ */
.faqQuestion {
	position: relative;
	padding:30px 50px 30px 91px;
	background-color:#faf4f4;
}
.faqQuestion span.faqQuestionIcon,
.faqPostList ul li a span.faqQuestionIcon {
	display: block;
	content: '';
	position: absolute;
	left: 50px;
	top: 50%;
	width: 26px;
	height: 26px;
	background-color: #eb1f1f;
	border-radius: 15px;
	transform: translateY(-50%);
}
.faqQuestion span.faqQuestionIcon {
	left: 50px;
}
.faqPostList ul li a span.faqQuestionIcon {
	left: 0;
}
.faqQuestion span.faqQuestionIcon:before,
.faqPostList ul li a span.faqQuestionIcon:before {
	content: 'Q';
	position: absolute;
	left: 50%;
	top: 50%;
	color: #FFF;
	font-size: 0.875rem;
	line-height: 100%;
	font-weight: 700;
	transform: translate(-50%,-50%);
}

/* 質問リスト、関連する質問
------------------------------------------------------------------------------------ */
.faqPostList {
	padding:40px 50px;
	background-color:#faf4f4;
	box-sizing: border-box;
}
.faqPostList ul {
	border-top:1px solid #CCC;
}
.faqPostList ul li {
	border-bottom:1px solid #CCC;
}
.faqPostList ul li a {
	display: block;
	position: relative;
	color: #333;
	padding:10px 0 10px 36px;
	text-decoration: none;
	transition: all 0.3s ease;
}
.faqPostList ul li a:hover {
	color: #eb1f1f;
}

/* キーワード検索
------------------------------------------------------------------------------------ */
div#faqSearch {
	margin-top:50px;
}
div#faqSearch div#faqSearchBlock {
	width:100%;
	max-width:640px;
	margin:0 auto 20px auto;
}

div#faqSearch div#faqSearchBlock form {
	padding:0 !important;
	border: 2px solid #eb1f1f;
	background-color: #FFF;
	border-radius: 40px;
	box-sizing: border-box;
}
div#faqSearch div#faqSearchBlock form div {
	position: relative;
	display: flex;
	justify-content: space-between;
	text-align: left;
	padding:0 !important;
}
div#faqSearch div#faqSearchBlock form div input[type="text"] {
	/* フォームのデフォルト設定を全てクリア */
	appearance: none;
	border: none;
	border-radius: 0;
	font: inherit;
	outline: none;
	border: none;
	box-shadow: none;
	/* フォームのデフォルト設定を全てクリア */
	width: 100% !important;
	line-height: 100%;
	padding: 20px 80px 20px 30px;
	box-sizing: border-box;
	background-color: transparent;
	transition: all 0.3s ease;
}
div#faqSearch div#faqSearchBlock form div input[type="text"]::placeholder {
	color: #CCC;
}
div#faqSearch div#faqSearchBlock form div input[type="text"]:focus::placeholder {
	color: transparent;
}
div#faqSearch div#faqSearchBlock form div button {
	display: block;
	position: absolute;
	right: 30px;
	top: 50%;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	background: none;
	border-radius: 0;
	cursor: pointer;
	transform: translateY(-50%);
}
div#faqSearch div#faqSearchBlock form div button:active {
	box-shadow: none;
}
div#faqSearch div#faqSearchBlock form div button:before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 30px;
	height: 30px;
	line-height: 100%;
	background: url("https://files.bcart.jp/nagomiya-test/uploads/renew2026/icon_search.png") 50% 50% no-repeat;
	background-size: 30px 30px;
	transform: translate(-50%,-50%);
}
div#faqSearch div#faqSearchBlock form div button span {
	display: none;
}

div#faqSearch p {
	text-align:center;
}
div#faqSearch p.faqSearchLinkTop {
	margin-top:50px;
}
div#faqSearch p.faqSearchLinkTop a,
section#faqTop ul#faqPostListWrapper li.faqPostList p.faqPostListMore a {
	position: relative;
	text-decoration: none;
	padding-right:15px;
	transition: all 0.3s ease;
}
div#faqSearch p.faqSearchLinkTop a:hover,
section#faqTop ul#faqPostListWrapper li.faqPostList p.faqPostListMore a:hover {
	color:#333;
}
div#faqSearch p.faqSearchLinkTop a:after,
section#faqTop ul#faqPostListWrapper li.faqPostList p.faqPostListMore a:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid #eb1f1f;
	border-top: 2px solid #eb1f1f;
	transform: translateY(-50%) rotate(45deg);
	transition: all 0.3s ease;
}
div#faqSearch p.faqSearchLinkTop a:hover:after,
section#faqTop ul#faqPostListWrapper li.faqPostList p.faqPostListMore a:hover:after {
	border-right: 2px solid #333;
	border-top: 2px solid #333;
}
section#faqTop ul#faqPostListWrapper li.faqPostList p.faqPostListMore {
	text-align: right;
	margin-top:20px;
}

/* よくあるご質問 TOP
------------------------------------------------------------------------------------ */
section#faqTop {
}
section#faqTop ul#faqPostListWrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top:50px;
}
section#faqTop ul#faqPostListWrapper > li {
	width: calc((100% - 40px) / 2);
	margin-top:40px;
}
section#faqTop ul#faqPostListWrapper > li:first-child,
section#faqTop ul#faqPostListWrapper > li:nth-child(2) {
	margin-top:0;
}

/* よくあるご質問 カテゴリページ
------------------------------------------------------------------------------------ */
section#faqCategory div.sectionInner {
	width:100%;
	max-width:1040px;
	padding:0 30px;
	box-sizing: border-box;
}

/* よくあるご質問 検索結果ページ
------------------------------------------------------------------------------------ */
section#faqSearch div.sectionInner {
	width:100%;
	max-width:1040px;
	padding:0 30px;
	box-sizing: border-box;
}
section#faqSearch div#faqCategoryPost div.faqPostList ul p#faqSearchNotFound {
	margin-top:30px;
}

/* よくあるご質問 詳細ページ
------------------------------------------------------------------------------------ */
section#faqDetail div.sectionInner {
	width:100%;
	max-width:1040px;
	padding:0 30px;
	box-sizing: border-box;
}
section#faqDetail div#faqDetailPost {
	margin-bottom:50px;
	padding-bottom:50px;
	border-bottom:1px solid #CCC;
}
section#faqDetail div#faqDetailPost div#faqDetailContents {
	position: relative;
	padding: 0 50px 0 91px;
}
section#faqDetail div#faqDetailPost div#faqDetailContents:before {
	content: 'A';
	position: absolute;
	left: 56px;
	top: 4px;
	color: #333;
	font-size: 1.25rem;
	line-height: 100%;
	font-weight: 700;
}



/* タブレット用
------------------------------------------------------------------------------------ */
@media screen and (min-width:768px) and (max-width:1023px) {

	/* 共通パーツ
	------------------------------------------------------------------------------------ */
	.faqQuestion {
		padding:15px 20px 15px 61px;
	}
	.faqQuestion span.faqQuestionIcon {
		left: 20px;
	}

	/* 質問リスト、関連する質問
	------------------------------------------------------------------------------------ */
	.faqPostList {
		padding:20px;
	}

	/* キーワード検索
	------------------------------------------------------------------------------------ */
	div#faqSearch {
		margin-top:30px;
	}
	div#faqSearch p.faqSearchLinkTop {
		margin-top:30px;
	}

	/* よくあるご質問 TOP
	------------------------------------------------------------------------------------ */
	section#faqTop {
	}
	section#faqTop ul#faqPostListWrapper {
		display: block;
		margin-top:30px;
	}
	section#faqTop ul#faqPostListWrapper > li {
		width: 100%;
		margin-top:20px;
	}
	section#faqTop ul#faqPostListWrapper > li:nth-child(2) {
		margin-top:20px;
	}

	/* よくあるご質問 カテゴリページ
	------------------------------------------------------------------------------------ */
	section#faqCategory div.sectionInner {
		padding:0 50px;
	}

	/* よくあるご質問 検索結果ページ
	------------------------------------------------------------------------------------ */
	section#faqSearch div.sectionInner {
		padding:0 50px;
	}

	/* よくあるご質問 詳細ページ
	------------------------------------------------------------------------------------ */
	section#faqDetail div.sectionInner {
		padding:0 50px;
	}
	section#faqDetail div#faqDetailPost {
		margin-bottom:30px;
		padding-bottom:30px;
	}
	section#faqDetail div#faqDetailPost div#faqDetailContents {
		padding: 0 20px 0 61px;
	}
	section#faqDetail div#faqDetailPost div#faqDetailContents:before {
		left: 26px;
	}
}


/* スマホ用
------------------------------------------------------------------------------------ */
@media screen and (max-width:767px) {

	/* 共通パーツ
	------------------------------------------------------------------------------------ */
	.faqQuestion {
		padding:15px 20px 15px 61px;
	}
	.faqQuestion span.faqQuestionIcon {
		left: 20px;
	}

	/* 質問リスト、関連する質問
	------------------------------------------------------------------------------------ */
	.faqPostList {
		padding:20px;
	}

	/* キーワード検索
	------------------------------------------------------------------------------------ */
	div#faqSearch {
		margin-top:30px;
	}
	div#faqSearch p.faqSearchLinkTop {
		margin-top:30px;
	}

	/* よくあるご質問 TOP
	------------------------------------------------------------------------------------ */
	section#faqTop {
	}
	section#faqTop ul#faqPostListWrapper {
		display: block;
		margin-top:30px;
	}
	section#faqTop ul#faqPostListWrapper > li {
		width: 100%;
		margin-top:20px;
	}
	section#faqTop ul#faqPostListWrapper > li:nth-child(2) {
		margin-top:20px;
	}

	/* よくあるご質問 カテゴリページ
	------------------------------------------------------------------------------------ */
	section#faqCategory div.sectionInner {
		padding:0 20px;
	}

	/* よくあるご質問 検索結果ページ
	------------------------------------------------------------------------------------ */
	section#faqSearch div.sectionInner {
		padding:0 20px;
	}

	/* よくあるご質問 詳細ページ
	------------------------------------------------------------------------------------ */
	section#faqDetail div.sectionInner {
		padding:0 20px;
	}
	section#faqDetail div#faqDetailPost {
		margin-bottom:30px;
		padding-bottom:30px;
	}
	section#faqDetail div#faqDetailPost div#faqDetailContents {
		padding: 0 20px 0 61px;
	}
	section#faqDetail div#faqDetailPost div#faqDetailContents:before {
		left: 26px;
	}

}