@charset "UTF-8";
/* ============================================================
   FAQ page 専用CSS  ( page-faq.php )
   ------------------------------------------------------------
   ・ベースは既存の共通CSS（base / common / kasou など）を利用
   ・このファイルはFAQページ固有のスタイルのみを記述
   ・アコーディオン開閉（質問クリックで矢印が下を向き回答が開く）
   ============================================================ */

/* -------- 配色・基本設定（このページ内で使う変数） -------- */
:root{
	--faq-bg:        #393939; /* ページ地色（既存 .bg_393939 と同色） */
	--faq-gold:      #c8b482; /* ゴールド系アクセント（Q・矢印・見出し） */
	--faq-gold-lt:   #d8cba6; /* 大きな番号など、明るめゴールド */
	--faq-white:     #ffffff;
	--faq-gray:      #dcdcdc; /* 回答本文 */
	--faq-line:      rgba(255,255,255,.18); /* 区切り線 */
}

/* 共通フォント（既存 kasou 系に合わせたゴシック） */
.faq_wrap{
	font-family:'Noto Sans JP',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-feature-settings:"palt";
	letter-spacing:.04em;
	color:var(--faq-white);
}

/* ============================================================
   FAQ（タイトル / リード文 / メイン画像）
   ============================================================ */
.faq_head{
	text-align:center;
}
.faq_head_ttl{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	
	text-align: center;
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size:48px;
	line-height:100.1%;
	letter-spacing:　0.12em;
	color:var(--faq-white);
}
.faq_head_sub{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	
	text-align: center;
	font-size:28px;
	line-height: 100.1%;
	font-weight:600;
	color: #9c8333;
	letter-spacing:.14em;
	padding-top: 10px;
	
}
.faq_head_en{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	
	text-align: center;
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 13px;
	line-height: 100.1%;
	letter-spacing:　0.12em;
	color:var(--faq-white);
	padding-top: 12px;
}




.faq_lead_ttl{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	
	text-align: left;
	font-weight: 600;
	font-style: normal;
	font-size: 22px;
	line-height: 195%;
	letter-spacing:　0.12em;
	color:var(--faq-white);
}
.faq_lead_ttl.m01{
	font-size: 20px;
	line-height: 101%;
	color: #9c8333;
}


.faq_lead_txt{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	
	text-align: left;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	line-height: 187%;
	letter-spacing:　0.12em;
	color:var(--faq-white);
}
.faq_lead_txt span{
	color: #9c8333;
	font-weight: 700;
}

/* メイン画像（デザインのラップトップ写真部分） */
.faq_hero_img{
	width:100%;
	margin:0 auto;
}
.faq_hero_img img{
	display:block;
	width:100%;
	height:auto;
}





/* ============================================================
   セクション（01〜04）
   ============================================================ */
.faq_sec{
	position:relative;
}
.faq_sec_head{
	text-align:center;
	margin:0 0 22px;
}
.faq_sec_num{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	
	text-align: center;
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 48px;
	line-height: 100.1%;
	letter-spacing:　0.12em;
	color: #9c8333;
}
.faq_sec_ttl{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	
	text-align: left;
	font-weight: 600;
	font-style: normal;
	font-size: 26px;
	line-height: 165%;
	letter-spacing:　0.12em;
	color:var(--faq-white);
	
}

/* ============================================================
   Q&A リスト（アコーディオン）
   ============================================================ */
.faq_list{
/*	border-top:1px solid var(--faq-line);*/
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;
	
/*	background: #DC67A7;*/
}

.faq_item{
	border-bottom:1px solid #aaabab;
}
.faq_item.m01{
	border-bottom:none;
}

/* --- 質問（クリックで開閉するボタン） --- */
.faq_q{
	display:flex;
	align-items:center;
	gap:12px;
	width:100%;
	margin:0;
	padding:20px 4px;
	background:transparent;
	border:none;
	cursor:pointer;
	text-align:left;
	-webkit-appearance:none;
	appearance:none;
	
/*	background: #75E2DE;*/
}
.faq_q.m01{
	padding:0 4px 20px;
}
.faq_q_mark{
	flex:0 0 auto;

	font-family: "din-2014", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 38px;
	line-height: 100.1%;
	letter-spacing:　0;
	color: #9c8333;
	
	
}
.faq_q_txt{
	flex:1 1 auto;
	font-size: 20px;
	line-height: 160%;
	color: #9c8333;
	font-weight:600;
	text-align: left;
}
.faq_q_txt.m01{
	font-size: 19px;
}

/* --- 矢印（唯一の非テキスト要素：画像／CPUマーク 36px） --- */
.faq_q_arrow{
	flex:0 0 auto;
	width:36px;
	height:36px;
	margin-right:2px;
	background:url("../img/faq/faq_arrow1@2x.webp") no-repeat center center;
	background-size:36px 36px; /* @2x（原寸72px）を36pxで表示＝Retina対応 */
	transform:rotate(0deg);    /* 閉：boxが右向き（＞） */
	transition:transform .35s ease;
}
/* 開いた状態：回転してアイコンが下を向く（↓） */
.faq_item.is-open .faq_q_arrow{
	transform:rotate(-90deg);
}

/* --- 回答（開閉するエリア） --- */
.faq_a{
	overflow:hidden;
	max-height:0;
	opacity:0;
	transition:max-height .4s ease,opacity .4s ease;
}
.faq_item.is-open .faq_a{
	max-height:1200px;
	opacity:1;
}
.faq_a_inner{
	display:flex;
	gap:12px;
	padding:4px 4px 26px;
}
.faq_a_mark{
	flex:0 0 auto;
	font-family:'Zen Old Mincho',serif;
	font-size:22px;
	line-height:1.5;
	color:var(--faq-white);
	font-weight:600;
}
.faq_a_txt{
	flex:1 1 auto;
	font-size:16px;
	line-height: 187%;
	color: #fff;
	letter-spacing:　0.24em;
	
	margin: 0;
	padding: 0;
	text-align: justify;
	position: relative;
	top: -0.4em;
	
/*	background: #59CF80;*/
}
.faq_a_txt span{
	color: #9c8333;
	font-weight: 700;
}
/* ============================================================
   フッター前 CTA（ご相談ください）
   ============================================================ */
.faq_cta_ttl{
	font-size:17px;
	font-weight:700;
	line-height:1.7;
	color:var(--faq-white);
	text-align:center;
}
.faq_cta_txt{
	font-size:14px;
	line-height:2;
	color:var(--faq-gray);
	text-align:left;
	margin-top:16px;
}

/* ============================================================
   PC表示微調整（列は既存同様 482px 固定運用）
   ============================================================ */
@media print,screen and (min-width:801px){
	.faq_head_ttl{ font-size:56px; }
}



.din2014b{
	font-family: "din-2014", sans-serif;
	font-weight: 700;
	font-style: normal;
}


.bg_000{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;
	background: #000;
}

/* ============================================================
   お問い合わせボタン（CTA・テキストコーディング）
   ============================================================ */
.faq_contact_btn{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
/*	min-height:118px;*/
	padding:12px 20px;
	box-sizing:border-box;
	background:#9c8333; /* オリーブ系ゴールド */
	text-decoration:none;
	transition:background-color .3s ease;
}
.faq_contact_btn:hover{ background:#8b742c; }
.faq_contact_txt{ text-align:center; color:var(--faq-white); }
.faq_contact_label{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:14px;
	font-family:'din-2014',sans-serif;
	font-size:13px;
	font-weight:500;
	letter-spacing: 0.08em;
	line-height: 100.1%;
	padding-left: 0.08em; /* letter-spacing の右アキ分をセンター補正 */
	color:var(--faq-white);
}
.faq_contact_label::before,
.faq_contact_label::after{
	content:"";
	display:inline-block;
	width:1px;
	height:15px;
	background:var(--faq-white);
}
.faq_contact_main{
	display:block;
	font-family:'Noto Sans JP',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;
	font-size:28px;
	font-weight:700;
	letter-spacing:.12em;
	line-height:1;
	padding-left:.12em;
	color:var(--faq-white);
	margin: 0;
}
/* >> 矢印（CSSチェブロン） */
.faq_contact_arrow{
	position:absolute;
	top:50%;
	right:26px;
	transform:translateY(-50%);
	display:flex;
	gap:3px;
}
.faq_contact_arrow i{
	display:block;
	width:12px;
	height:12px;
	border-top:2px solid var(--faq-white);
	border-right:2px solid var(--faq-white);
	transform:rotate(45deg);
}