@charset "utf-8";
/* CSS Document - FAQ デザイン一新版 */

/* ==========================================
   1. 全体共通設定
   ========================================== */
.cp_faq *, 
.cp_faq *:before, 
.cp_faq *:after, 
.sp_faq *, 
.sp_faq *:before, 
.sp_faq *:after {
	font-family: '游ゴシック体', 'Yu Gothic', YuGothic, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.cp_faq, .sp_faq {
	max-width: 1000px;
	margin: 40px auto;
	background: #ffffff;
	width: 100%;
	padding: 0 15px;
	box-sizing: border-box;
}

/* ラジオボタン・チェックボックス非表示 */
.cp_faq input, .sp_faq input {
	display: none;
}

/* テキスト内リンクのカラー */
.cp_faq a, .sp_faq a {
	text-decoration: underline !important;
	color: #c09010 !important;
}


/* ==========================================
   2. 上部 タブナビゲーション（画像再現）
   ========================================== */
/* タブをグリッド風に並べるための親設定 */
.cp_faq {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* タブカードの標準スタイル */
.cp_faq label.cp_tabitem,
.sp_faq label.sp_tabitem {
	font-family: '游ゴシック体', 'Yu Gothic', YuGothic, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc(20% - 8px); /* PC: 横5列並び */
	height: 64px;
	margin: 0 0 12px 0;
	padding: 5px 8px;
	background-color: #ffffff;
	border: 1px solid #dcdcdc;
	border-radius: 4px;
	box-sizing: border-box;
	text-align: center;
	font-size: 13px;
	line-height: 1.3;
	color: #666666;
	cursor: pointer;
	position: relative;
	transition: all 0.2s ease;
	user-select: none;
}

.cp_faq label.cp_tabitem small,
.sp_faq label.sp_tabitem small {
	font-size: 11px;
}

.cp_faq label.cp_tabitem:hover,
.sp_faq label.sp_tabitem:hover {
	border-color: #aaaaaa;
}

/* タブ中央下部の小さなグレー「∨」矢印（非アクティブ時） */
.cp_faq label.cp_tabitem::before,
.sp_faq label.sp_tabitem::before {
	content: "";
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 5px;
	height: 5px;
	border-right: 1.5px solid #aaaaaa;
	border-bottom: 1.5px solid #aaaaaa;
	margin: 0;
	padding: 0;
	z-index: 1;
}

/* --- アクティブ（選択中）タブのデザイン --- */
/* 全選択タブ共通のアクティブ枠線 */
.cp_faq input:checked + label.cp_tabitem,
.sp_faq input:checked + label.sp_tabitem {
	border-color: #3b6b77;
	color: #333333;
}

/* アクティブタブ下部のダークブルー帯 */
.cp_faq input:checked + label.cp_tabitem::after,
.sp_faq input:checked + label.sp_tabitem::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: -1px;
	right: -1px;
	height: 11px;
	background-color: #3b6b77;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

/* アクティブタブの矢印（白に変更して帯に載せる） */
.cp_faq input:checked + label.cp_tabitem::before,
.sp_faq input:checked + label.sp_tabitem::before {
	border-color: #ffffff;
	bottom: 3.5px;
	z-index: 2;
}


/* ==========================================
   3. タブコンテンツの表示切り替え制御
   ========================================== */
.cp_faq #cp_content1, .cp_faq #cp_content2, .cp_faq #cp_content3,
.cp_faq #cp_content4, .cp_faq #cp_content5, .cp_faq #cp_content6,
.cp_faq #cp_content7, .cp_faq #cp_content8, .cp_faq #cp_content9, .cp_faq #cp_content10,
.sp_faq #sp_content1, .sp_faq #sp_content2, .sp_faq #sp_content3,
.sp_faq #sp_content4, .sp_faq #sp_content5, .sp_faq #sp_content6,
.sp_faq #sp_content7, .sp_faq #sp_content8, .sp_faq #sp_content9, .sp_faq #sp_content10 {
	display: none;
	width: 100%;
	padding: 10px 0 0;
	border-top: none;
}

.cp_faq #cp_conttab1:checked ~ #cp_content1,
.cp_faq #cp_conttab2:checked ~ #cp_content2,
.cp_faq #cp_conttab3:checked ~ #cp_content3,
.cp_faq #cp_conttab4:checked ~ #cp_content4,
.cp_faq #cp_conttab5:checked ~ #cp_content5,
.cp_faq #cp_conttab6:checked ~ #cp_content6,
.cp_faq #cp_conttab7:checked ~ #cp_content7,
.cp_faq #cp_conttab8:checked ~ #cp_content8,
.cp_faq #cp_conttab9:checked ~ #cp_content9,
.cp_faq #cp_conttab10:checked ~ #cp_content10,
.sp_faq #sp_conttab1:checked ~ #sp_content1,
.sp_faq #sp_conttab2:checked ~ #sp_content2,
.sp_faq #sp_conttab3:checked ~ #sp_content3,
.sp_faq #sp_conttab4:checked ~ #sp_content4,
.sp_faq #sp_conttab5:checked ~ #sp_content5,
.sp_faq #sp_conttab6:checked ~ #sp_content6,
.sp_faq #sp_conttab7:checked ~ #sp_content7,
.sp_faq #sp_conttab8:checked ~ #sp_content8,
.sp_faq #sp_conttab9:checked ~ #sp_content9,
.sp_faq #sp_conttab10:checked ~ #sp_content10 {
	display: block;
}


/* ==========================================
   4. カテゴリー見出し（【クレンジング】等）
   ========================================== */
.cp_faq .faq_big_menu,
.sp_faq .faq_big_menu {
	font-family: '游ゴシック体', 'Yu Gothic', YuGothic, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	width: 100%;
	padding: 0;
	margin: 35px auto 15px;
	text-align: center;
	font-size: 17px;
	font-weight: bold;
	background: transparent;
	color: #c09010; /* ゴールド系カラー */
	border: none;
	border-radius: 0;
}


/* ==========================================
   5. QAアコーディオン（画像デザイン再現）
   ========================================== */
.cp_faq .cp_faqin, .sp_faq .sp_faqin {
	overflow-x: hidden;
	margin: 0 auto;
	color: #333333;
}

/* アコーディオンひとつの枠 */
.cp_faq .cp_faqin .cp_actab,
.sp_faq .sp_faqin .sp_actab {
	position: relative;
	width: 100%;
	margin-bottom: 12px;
	padding: 0;
	border: 1px solid #b5b5b5;
	border-radius: 4px;
	background-color: #ffffff;
	overflow: hidden;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* 質問（Q） */
.cp_faq .cp_faqin label,
.sp_faq .sp_faqin label {
	font-family: '游ゴシック体', 'Yu Gothic', YuGothic, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 18px 50px 18px 55px;
	cursor: pointer;
	text-align: left;
	font-size: 15px;
	font-weight: bold;
	color: #444444;
	line-height: 1.4;
	user-select: none;
}

/* 丸型ゴールドの「Q」アイコン */
.cp_faq .cp_faqin label::before,
.sp_faq .sp_faqin label::before {
	content: 'Q';
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	background-color: #c09010;
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 14px;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

/* 右側の「+ / —」アイコン（擬似要素で表現するためHTML要素は非表示） */
.cp_faq .cp_faqin .cp_plus,
.sp_faq .sp_faqin .sp_plus {
	display: none;
}

.cp_faq .cp_faqin label::after,
.sp_faq .sp_faqin label::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	font-weight: bold;
	color: #c09010;
}

/* 答え（A）エリア */
.cp_faq .cp_faqin .cp_actab-content,
.sp_faq .sp_faqin .sp_actab-content {
	font-family: '游ゴシック体', 'Yu Gothic', YuGothic, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	position: relative;
	overflow: hidden;
	max-height: 0;
	height: auto;
	margin: 0;
	padding: 0 20px 0 55px;
	opacity: 0;
	font-size: 14px;
	line-height: 1.7;
	color: #555555;
	background: transparent;
	text-align: left;
	transition: all 0.3s ease;
}

/* 答えの頭の「A」文字は非表示（画像通り文章のみ展開） */
.cp_faq .cp_actab .cp_actab-content::before,
.sp_faq .sp_actab .sp_actab-content::before {
	display: none;
}

/* ------------------------------------------
   アコーディオンが開いた状態（:checked）
------------------------------------------ */
/* 開いた時の枠線と背景（薄グレー） */
.cp_faq .cp_faqin .cp_actab:has(input[type="checkbox"]:checked),
.sp_faq .sp_faqin .sp_actab:has(input[type="checkbox"]:checked) {
	background-color: #f2f2f2;
	border-color: #f2f2f2;
}

/* 「+」から「—」へ切り替え */
.cp_faq .cp_faqin .cp_actab input[type="checkbox"]:checked ~ label::after,
.sp_faq .sp_faqin .sp_actab input[type="checkbox"]:checked ~ label::after {
	content: "—";
	font-size: 18px;
}

/* 回答コンテンツの展開 */
.cp_faq .cp_faqin .cp_actab input[type="checkbox"]:checked ~ .cp_actab-content,
.sp_faq .sp_faqin .sp_actab input[type="checkbox"]:checked ~ .sp_actab-content {
	max-height: 1000px;
	opacity: 1;
	padding: 0 20px 20px 55px;
}


/* ==========================================
   6. レスポンシブ（スマホ表示調整）
   ========================================== */
@media screen and (max-width: 768px) {
	.cp_faq label.cp_tabitem,
	.sp_faq label.sp_tabitem {
		width: calc(50% - 5px); /* スマホは2列配置 */
		height: 56px;
		font-size: 12px;
	}

	.cp_faq .cp_faqin label,
	.sp_faq .sp_faqin label {
		padding: 15px 40px 15px 45px;
		font-size: 14px;
	}

	.cp_faq .cp_faqin label::before,
	.sp_faq .sp_faqin label::before {
		left: 10px;
		width: 22px;
		height: 22px;
		font-size: 12px;
	}

	.cp_faq .cp_faqin .cp_actab-content,
	.sp_faq .sp_faqin .sp_actab-content {
		padding: 0 15px 0 45px;
		font-size: 13px;
	}

	.cp_faq .cp_faqin .cp_actab input[type="checkbox"]:checked ~ .cp_actab-content,
	.sp_faq .sp_faqin .sp_actab input[type="checkbox"]:checked ~ .sp_actab-content {
		padding: 0 15px 15px 45px;
	}
}