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

/*=========================================================

	よくあるご質問トップ
	対象ページ：/personal/faq/ ・ /corporate/faq/（個人・法人で共用）
	SPデザイン：Figma「西京銀行 よくある質問」node-id 136-11

	・パンくず／H1は既存の980px幅、本ファイルのセクション群は1089px幅
	・背景色が付くセクション（AIチャット）はウィンドウ全幅
	・SPは @media (max-width: 767px) で切り替え
	・body の font-size が 80% のため、本ファイルは全て px で指定

==========================================================*/


/*=========================================================

	H1ブロックまわりの余白調整（デザイン合わせ）
	H1の下線から次セクションの見出しまで 50px

==========================================================*/

.faq-top #main {
	margin-bottom: 0;
}

/* column1.css の padding-top: 15px があるとH1の上だけ広くなり、罫線の間でタイトルが下に寄って見える。
   2カラムの下層ページと同じく、パンくずの下線から H1 までを margin の 20px だけにする */
.faq-top #contents {
	padding-top: 0;
}

.faq-top #contents .section {
	padding-bottom: 0;
}

.faq-top #contents .title {
	margin-bottom: 0;
}

.faq-top #contents h1 {
	margin-bottom: 30px;
}

/* common.css の「#contents h1 img / span」は float 前提なので、flex で天地中央にそろえ直す */
.faq-top #contents .p-faqTop__title {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	min-height: 50px;
	line-height: 1.4;
}

/* アイコンは人（ビル）が下寄りの絵で、天地中央だと文字より下がって見えるため少し持ち上げる */
.faq-top #contents .p-faqTop__title img {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	position: relative;
	top: -3px;
	float: none;
	margin-right: 12px;
}

.faq-top #contents .p-faqTop__title span {
	float: none;
}


/*=========================================================

	共通

==========================================================*/

.p-faqTop {
	color: #333;
	line-height: 1.6;
}

.p-faqTop__inner {
	width: 1089px;
	margin: 0 auto;
}

/*--------------------------------

	矢印アイコン

--------------------------------*/

/*
	FAQ内のリンク・開閉の矢印は塗りの三角をやめ、丸矢印（丸＋山形）に統一する。
	素材はFigma（node-id 220-2099）の26px版で、20pxは background-size で縮める。
	・26px … PCのカード／横長ボタン
	・20px … 一覧の行・開閉トグル・SP全般
	向きは右向きが基準。下向きは rotate(90deg)、上向きは rotate(-90deg)。

	配色は4種。ファイル名は「丸の色-山形の色」で、山形の色を省略した場合は
	丸と反対の色（紺丸なら白の山形）になる。地の色に応じて使い分ける。
	・ico_faq-arrow-circle.svg            紺丸／白の山形   … 白地の既定
	・ico_faq-arrow-circle-white.svg      白丸／紺の山形   … 濃紺の地
	・ico_faq-arrow-circle-cyan.svg       水色丸／白の山形 … 白地のAIチャット系
	・ico_faq-arrow-circle-white-cyan.svg 白丸／水色の山形 … 水色の地（追従バー）
*/

/* Figmaのページ内ナビゲーションと中間のページ先頭リンクはSP専用 */
.p-faqTop__jump,
.p-faqTop__pageup {
	display: none;
}

/*--------------------------------

	セクション見出し（下線付き・中央寄せ）

--------------------------------*/

/*
	デザインの行送りは 22.4px（文字より小さい値）のため、
	line-height は 1.2 とし padding-bottom で見た目の余白を合わせている
*/
.p-faqTop__heading {
	width: 320px;
	margin: 0 auto;
	padding-bottom: 15px;
	border-bottom: 3px solid #005b94;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.2;
	color: #005b94;
	text-align: center;
}

/* 見出し行（見出し＋右側の「一覧表示」） */
.p-faqTop__headingRow {
	position: relative;
	padding: 9px 10px;
}

.p-faqTop__headingLink {
	position: absolute;
	right: 17px;
	top: 50%;
	margin-top: -8px;
	font-size: 15.75px;
	line-height: 1;
}

.p-faqTop__headingLink a {
	color: #039;
	text-decoration: underline;
}

.p-faqTop__headingLink a:hover {
	color: #088bdd;
}


/*=========================================================

	01. お困りごとから探す

==========================================================*/

.p-faqTop__trouble {
	padding: 20px 0 70px;
}

.p-faqTop__troubleList {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 33px -14px 0;
}

/* 行内でカードの高さを揃えるため li も flex にする */
.p-faqTop__troubleItem {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 33.3333%;
	padding: 14px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*
	カードの高さはデザイン（node-id 220-2099）の 143.5px に合わせる。
	テキストが2行のカード（アイコン75px＋余白2px＋2行48px＝125px）でも
	min-height のまま収まるよう、上下パディングは 8px にしている。
*/
.p-faqTop__troubleLink {
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	min-height: 143px;
	padding: 8px 15px;
	border: 1px solid #005b94;
	border-radius: 5px;
	background: #fff;
	color: #333;
	text-align: left;
	text-decoration: none;
	overflow: visible;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: background-color .2s ease;
	transition: background-color .2s ease;
}

/* 右下の丸矢印 */
.p-faqTop__troubleLink:after {
	position: absolute;
	right: 10px;
	bottom: 15px;
	display: block;
	width: 26px;
	height: 26px;
	background: url(/personal/inc/images/faq/ico_faq-arrow-circle.svg) no-repeat center;
	background-size: 26px 26px;
	content: "";
}

.p-faqTop__troubleLink:hover {
	background: #f0f7fb;
	color: #333;
	text-decoration: none;
}

.p-faqTop__troubleIcon {
	display: block;
	width: 70px;
	height: 70px;
	margin-bottom: 2px;
}

.p-faqTop__troubleIcon img {
	width: 70px;
	height: 70px;
}

/* アイコンは中央・テキストは左寄せなので、テキストだけ幅いっぱいにする */
.p-faqTop__troubleText {
	display: block;
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.2;
}

/* PCもテキストと矢印を同じ行に置き、1行・2行どちらでも中央を揃える。 */
@media screen and (min-width: 768px) {
	.p-faqTop__troubleLink {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 26px;
		column-gap: 10px;
		row-gap: 2px;
		align-content: center;
	}

	.p-faqTop__troubleIcon {
		grid-column: 1 / -1;
		justify-self: center;
		margin-bottom: 0;
	}

	.p-faqTop__troubleText {
		grid-column: 1;
		grid-row: 2;
	}

	.p-faqTop__troubleLink:after {
		position: static;
		grid-column: 2;
		grid-row: 2;
	}
}

/*--------------------------------

	不正出金や詐欺被害

--------------------------------*/

.p-faqTop__troubleFraud {
	margin: 21px auto 0;
	width: 80%;
}

.p-faqTop__troubleFraud a {
	display: block;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff;
	color: #333;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	text-decoration: none;
	-webkit-transition: background-color .2s ease;
	transition: background-color .2s ease;
}

.p-faqTop__troubleFraud a:hover {
	background: #f5f5f5;
	color: #333;
	text-decoration: none;
}


/*=========================================================

	02. AIチャット（全幅・背景色付き）

==========================================================*/

/* 配色はSPデザイン（node-id 136-124）に合わせ、地を濃い水色・ボタンを白にする */
.p-faqTop__aichat {
	padding: 60px 30px;
	background: #8be5f1;
	text-align: center;
}

.p-faqTop__aichatBtn {
	position: relative;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 476px;
	min-height: 73px;
	padding: 8px 75px;
	border-radius: 10px;
	background: #fff;
	color: #00c0d9;
	text-decoration: none;
	overflow: visible;
	-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);
	box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: opacity .2s ease;
	transition: opacity .2s ease;
}

.p-faqTop__aichatBtn:hover {
	color: #00c0d9;
	text-decoration: none;
	opacity: .85;
}

/* ロボットアイコン（水色の丸＋画像） */
.p-faqTop__aichatBtnIcon {
	position: absolute;
	left: 75px;
	display: block;
	width: 36px;
	height: 45px;
}

.p-faqTop__aichatBtnIcon:before {
	content: "";
	position: absolute;
	left: -3px;
	top: 5px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #8be5f1;
}

.p-faqTop__aichatBtnIcon img {
	position: relative;
	display: block;
	width: 36px;
	height: 45px;
	margin: 0 auto;
}

.p-faqTop__aichatBtnText {
	display: block;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
	white-space: nowrap;
}

/* 右端の丸矢印。ボタンが横長なのでPCでは絶対配置で右端に置く。
   色は文字と同じ水色で、追従バー（helpdock.css）と揃えている */
.p-faqTop__aichatBtnText:after {
	content: "";
	position: absolute;
	right: 75px;
	top: 50%;
	margin-top: -13px;
	width: 26px;
	height: 26px;
	background: url(/personal/inc/images/faq/ico_faq-arrow-circle-cyan.svg) no-repeat center;
	background-size: 26px 26px;
}

.p-faqTop__aichatNote {
	margin-top: 15px;
	color: #2f3e46;
	font-size: 15px;
	line-height: 1.6;
}


/*=========================================================

	03. 注目のQ&A

==========================================================*/

.p-faqTop__pickup {
	padding: 80px 0;
}

.p-faqTop__qaList {
	margin-top: 50px;
}

.p-faqTop__qaItem {
	overflow: hidden;
	border: 1px solid #005b94;
	border-radius: 5px;
	background: #fff;
}

/* デザインの4pxはSPの値。PCは質問一覧・関連質問と同じく10pxに広げる */
.p-faqTop__qaItem + .p-faqTop__qaItem {
	margin-top: 10px;
}

/* Figma node-id 220-133。質問行はPC・SP共通で余白15px、Qは17px、開閉矢印は20px。 */
.p-faqTop__qaQuestion {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 15px;
	border: 0;
	border-radius: 0;
	background: #005b94;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: bold;
	line-height: 22.4px;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: background-color .2s ease;
	transition: background-color .2s ease;
}

.p-faqTop__qaQuestion:hover {
	background: #004d7d;
}

.p-faqTop__qaQuestion:focus {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

.p-faqTop__qaQuestion:focus:not(:focus-visible) {
	outline: none;
}

.p-faqTop__qaLabel {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	min-width: 0;
}

.p-faqTop__qaMark {
	display: block;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 1px 7px 0 0;
}

.p-faqTop__qaTitle {
	min-width: 0;
	overflow-wrap: break-word;
	font-size: 18px;
}

.p-faqTop__qaToggle {
	display: block;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-left: 7px;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.p-faqTop__qaQuestion[aria-expanded="true"] .p-faqTop__qaToggle {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.p-faqTop__qaAnswer {
	padding: 15px;
	color: #231815;
	font-size: 16px;
	line-height: 1.5;
	overflow-x: auto;
	overflow-wrap: anywhere;
}

.p-faqTop__qaAnswer[hidden] {
	display: none;
}

/*
	本文は詳細ページと同じ見え方に揃えるため、faq-category.css の .p-faqEntry__body に任せる。
	max-width だけは、faq-category.css が本文カラムの狭い詳細ページ向けに 44em をかけているもので、
	枠の広い注目のQ&Aでは本文だけ左に寄ってしまうため解除する。
*/
.p-faqTop__qaAnswer.p-faqEntry__body p,
.p-faqTop__qaAnswer.p-faqEntry__body ul,
.p-faqTop__qaAnswer.p-faqEntry__body ol {
	max-width: none;
}

/*
	本文の小見出しは faq-category.css の「#contents .p-faqEntry__body h4 / h5」が受け持っているが、
	FAQトップは #contents の外（footArea）にあるため当たらず、本文と同じ大きさで余白なしになる。
	詳細ページと同じ見え方にするため、同じ値をここで当てる。
	帯を枠の幅いっぱいに渡す負マージンだけは、回答部分の padding が詳細ページの24pxではなく
	15px なのでそれに合わせる。はみ出した分は .p-faqTop__qaItem の overflow: hidden が切る。
*/
.p-faqTop__qaAnswer.p-faqEntry__body h4 {
	margin: 32px -15px 14px;
	padding: 8px 15px;
	background: #e5f6ff;
	color: #005b94;
	font-size: 107%;
	line-height: 1.5;
}

.p-faqTop__qaAnswer.p-faqEntry__body h4:first-child {
	margin-top: 0;
}

/* h5 も詳細ページと同じく、大きさではなく左の青いバーで見出しと分からせる */
.p-faqTop__qaAnswer.p-faqEntry__body h5 {
	margin: 24px 0 6px;
	padding-left: 9px;
	border-left: 3px solid #005b94;
	font-size: 100%;
	line-height: 1.5;
}

/*
	入れ子のリストは詳細ページでは faq-category.css の「#contents .p-faqEntry__body li ul」が
	上5px・下20pxにしているが、これも #contents の外では当たらないため同じ値を当てる。
*/
.p-faqTop__qaAnswer.p-faqEntry__body li ul,
.p-faqTop__qaAnswer.p-faqEntry__body li ol {
	margin: 5px 0 20px;
}

/* 末尾に来る入れ子の下マージンが回答枠の外へ抜けるのを止めるのも詳細ページと同じ */
.p-faqTop__qaAnswer.p-faqEntry__body > *:last-child li:last-child > ul:last-child,
.p-faqTop__qaAnswer.p-faqEntry__body > *:last-child li:last-child > ol:last-child {
	margin-bottom: 0;
}

.p-faqTop__qaAnswer img {
	max-width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	.p-faqTop__qaQuestion {
		-webkit-transition: none;
		transition: none;
	}
}


/*=========================================================

	04. カテゴリーから探す

==========================================================*/

.p-faqTop__category {
	padding-bottom: 80px;
}

/*
	カテゴリー一覧はサイドバー（faq-category.css の p-faqSidebar__*）と同じ作り。
	FAQトップはPCを2カラムにし、アイコンと見出しをひと回り大きくする。

	faq-category.css はこのファイルより後に読まれるため、同じ詳細度だと
	「.p-faqSidebar__parents { margin: 0 }」に margin-top を消される。
	.p-faqTop を足して詳細度を上げておく。
*/
.p-faqTop .p-faqTop__catList {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-top: 50px;
}

.p-faqTop__catList .p-faqSidebar__parent {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 calc(50% - 7.5px);
	flex: 0 0 calc(50% - 7.5px);
	width: calc(50% - 7.5px);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-faqTop__catList .p-faqSidebar__parent + .p-faqSidebar__parent {
	margin-top: 0;
}

.p-faqTop__catList .p-faqSidebar__parent:nth-child(n+3) {
	margin-top: 15px;
}

.p-faqTop__catList .p-faqSidebar__parentIcon {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 50px;
	flex: 0 0 50px;
	width: 50px;
}

.p-faqTop__catList .p-faqSidebar__parentName {
	font-size: 18px;
}

/* PCは常時展開し、同じ行の左右のカードと本文背景を同じ高さにする。 */
@media screen and (min-width: 768px) {
	.p-faqTop .p-faqTop__catList {
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
	}

	.p-faqTop__catList .p-faqSidebar__parent {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.p-faqTop__catList .p-faqSidebar__parentButton,
	.p-faqTop__catList .p-faqSidebar__parentButton:hover {
		padding-right: 10px;
		background: #fff;
		color: #2f3e46;
		opacity: 1;
		cursor: default;
	}

	.p-faqTop__catList .p-faqSidebar__parentButton:after {
		display: none;
	}

	.p-faqTop__catList .p-faqSidebar__children {
		-webkit-box-flex: 1;
		-ms-flex: 1 0 auto;
		flex: 1 0 auto;
	}

	/*
		HTMLはSP基準で閉じた状態（children に hidden）で出力している。
		PCは常時展開なので、JSがhiddenを外すのを待たずにCSSで開いた状態にする。
		faq-category.css の「.p-faqSidebar__children[hidden]」がdisplay:none !importantなので
		クラスを1つ多く重ねた詳細度＋!importantで上書きする。
	*/
	.p-faqTop__catList .p-faqSidebar__children[hidden] {
		display: block !important;
	}
}

/*
	子カテゴリーは faq-category.css で「#contents .p-faqSidebar__childLink」として
	定義しているが、FAQトップの一覧は #contents の外にあるため当たらない。
	素の a のまま（12.8px・#005b94・inline）になるので、ここで当て直す。
*/
.p-faqTop__catList .p-faqSidebar__childLink {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0;
	background: none;
	color: #039;
	font-size: 14px;
	line-height: 22.4px;
	text-decoration: none;
	-webkit-transition: color .2s ease;
	transition: color .2s ease;
}

.p-faqTop__catList a.p-faqSidebar__childLink:hover {
	color: #088bdd;
	text-decoration: none;
}

.p-faqTop__catList a.p-faqSidebar__childLink:focus {
	outline: 2px solid #088bdd;
	outline-offset: 2px;
}

/* 件数との間隔はデザイン上、親カテゴリーの6pxより1px狭い */
.p-faqTop__catList .p-faqSidebar__childLink .p-faqSidebar__count {
	margin-left: 5px;
}

/*
	デザインの件数はラベルのすぐ右に置く。サイドバーは余白を吸収して右端に寄せる
	作りなので、FAQトップだけ伸びないようにする。
	長いラベルは従来どおり折り返し、そのぶん件数が右へ動く。
*/
.p-faqTop__catList .p-faqSidebar__parentName,
.p-faqTop__catList .p-faqSidebar__childLink > span:first-child {
	-webkit-box-flex: 0;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
}


/*--------------------------------

	カテゴリー内リンク

--------------------------------*/

.p-faqTop__catSubList {
	padding: 35px 5px 10px;
}

.p-faqTop__catSubList li + li {
	margin-top: 11px;
}

/* inline-block だとベースライン分だけ行が高くなるため block にする */
.p-faqTop__catSubList a {
	display: block;
	padding-left: 17px;
	color: #039;
	font-size: 16px;
	line-height: 1.6;
	text-decoration: none;
}

.p-faqTop__catSubList a:hover {
	color: #088bdd;
	text-decoration: none;
}

/* 「(2件)」が「(2」「件)」で改行されないよう、サイドバーの件数と同じくひとかたまりにする */
.p-faqTop__catCount {
	color: #666;
	font-weight: normal;
	white-space: nowrap;
}

.p-faqTop__catSubList .p-faqTop__catCount {
	margin-left: 8px;
	font-size: 11.2px;
}


/*=========================================================

	05. キーワードから探す

==========================================================*/

/* footer の margin-top:30px（layout.css）と合わせて 80px になるよう 50px にしている */
.p-faqTop__search {
	padding-bottom: 50px;
}

/*
	一覧・詳細（faq-bottom.tpl）ではAIチャットの帯の直後に来るため、上に余白が無いと
	帯と検索の枠がくっついてしまう。トップページで上に来る「カテゴリーから探す」の
	padding-bottom と同じ80pxを持たせて、同じリズムに揃える。
	トップページは間に別のセクションが挟まるのでこのルールは当たらない。
*/
.p-faqTop__aichat + .p-faqTop__search {
	padding-top: 80px;
}

.p-faqTop__searchBox {
	padding: 20px 30px 30px;
	background: #f2f2f2;
}

.p-faqTop__searchHeading {
	padding: 8px 0;
	color: #666;
	font-size: 21px;
	font-weight: bold;
	line-height: 1.2;
}

/* ラベルは視覚的に隠す（読み上げのみ） */
.p-faqTop__searchLabel {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
	white-space: nowrap;
}

.p-faqTop__searchForm {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: 10px;
}

/* サジェストを入力欄の真下に出すため、position の基準にする */
.p-faqTop__searchInputWrap {
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	margin-right: 10px;
}

.p-faqTop__searchInput {
	display: block;
	width: 100%;
	height: 40px;
	padding: 6px 7px 6px 42px;
	border: 2px solid #ccc;
	border-radius: 5px;
	background: #fff url(/personal/inc/images/faq/ico_faq-search.png) no-repeat 7px center;
	background-size: 28px 28px;
	color: #333;
	font-family: inherit;
	font-size: 14px;
	line-height: 24px;
	-webkit-appearance: none;
	appearance: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-faqTop__searchInput:focus {
	border-color: #005b94;
	outline: 2px solid #8bc4e6;
	outline-offset: 1px;
}

/*--------------------------------
	入力中のサジェスト

	リストと読み上げ用の要素は faq-search.js が組み立てるため、
	テンプレート側にはマークアップがない。
--------------------------------*/
.p-faqTop__searchSuggestList[hidden] {
	display: none !important;
}

.p-faqTop__searchSuggestList {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	width: 100%;
	/* 候補6件がスクロールなしで収まる高さ */
	max-height: 392px;
	margin: 4px 0 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #7ba8c3;
	border-radius: 5px;
	background: #fff;
	-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
	list-style: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-faqTop__searchSuggestItem {
	padding: 10px 14px;
	border-top: 1px solid #e4e9ec;
	color: #039;
	cursor: pointer;
}

.p-faqTop__searchSuggestItem:first-child {
	border-top: none;
}

/* キーボードで選択中（is-active）とマウスオーバーは同じ見た目にする */
.p-faqTop__searchSuggestItem:hover,
.p-faqTop__searchSuggestItem.is-active {
	background: #eaf2f8;
}

.p-faqTop__searchSuggestTitle {
	display: block;
	font-size: 15px;
	line-height: 1.5;
}

.p-faqTop__searchSuggestCategory {
	display: block;
	margin-top: 2px;
	color: #59666d;
	font-size: 12px;
	line-height: 1.5;
}

/* 候補件数の読み上げ用。見た目には出さない */
.p-faqTop__searchSuggestLive {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
	white-space: nowrap;
}

.p-faqTop__searchSubmit {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 96px;
	height: 40px;
	padding: 0 16px;
	border: none;
	border-radius: 5px;
	background: #005b94;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: background-color .2s ease;
	transition: background-color .2s ease;
}

.p-faqTop__searchSubmit:hover {
	background: #00477a;
}

.p-faqTop__searchSubmit:focus {
	outline: 2px solid #088bdd;
	outline-offset: 2px;
}

.p-faqTop__searchSubmit[disabled] {
	background: #718692;
	cursor: wait;
}

.p-faqTop__searchNote {
	margin-top: 10px;
	color: #231815;
	font-size: 15px;
	line-height: 1.6;
}

.p-faqTop__searchResults[hidden],
.p-faqTop__searchResultList[hidden],
.p-faqTop__searchMessage[hidden] {
	display: none !important;
}

.p-faqTop__searchResults {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid #c8c8c8;
}

.p-faqTop__searchResultsHead {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
	margin-bottom: 12px;
}

.p-faqTop__searchResultsHeading {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	margin: 0 18px 0 0;
	color: #333;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5;
}

.p-faqTop__searchStatus {
	margin: 0;
	color: #4f5d65;
	font-size: 14px;
	line-height: 1.6;
}

.p-faqTop__searchStatus.is-error {
	color: #a40000;
	font-weight: bold;
}

.p-faqTop__searchResultList {
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-faqTop__searchResultItem + .p-faqTop__searchResultItem {
	margin-top: 8px;
}

.p-faqTop__searchResultLink {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	min-height: 66px;
	padding: 12px 50px 12px 16px;
	border: 1px solid #cbd3d8;
	background: #fff;
	color: #039;
	text-decoration: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: background-color .2s ease, border-color .2s ease;
	transition: background-color .2s ease, border-color .2s ease;
}

/*
	common.css の「ul li a:hover」が下線を入れてくる。ベースの text-decoration: none は
	クラス1つで詳細度が足りず負けるため、hover 側でも打ち消す。
*/
.p-faqTop__searchResultLink:hover {
	border-color: #7ba8c3;
	background: #f2f7fa;
	text-decoration: none;
}

.p-faqTop__searchResultLink:focus {
	outline: 2px solid #088bdd;
	outline-offset: 2px;
}

.p-faqTop__searchResultMark {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 34px;
	flex: 0 0 34px;
	width: 34px;
	height: 17px;
	background: url(/personal/inc/images/faq/ico_q.svg) no-repeat 0 0;
	background-size: 17px 17px;
	font-size: 0;
	line-height: 0;
}

.p-faqTop__searchResultBody {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
}

.p-faqTop__searchResultTitle {
	display: block;
	font-size: 16px;
	line-height: 1.6;
	text-decoration: none;
}

.p-faqTop__searchResultCategory {
	display: block;
	margin-top: 2px;
	color: #59666d;
	font-size: 12px;
	line-height: 1.5;
	text-decoration: none;
}

.p-faqTop__searchResultArrow {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: url(/personal/inc/images/faq/ico_faq-arrow-circle.svg) no-repeat center;
	background-size: 20px 20px;
}

.p-faqTop__searchMessage {
	margin: 0;
	padding: 22px 20px;
	border: 1px solid #d8dee2;
	background: #fff;
	color: #4f5d65;
	font-size: 14px;
	line-height: 1.7;
}

.p-faqTop__searchMessage.is-error {
	border-color: #d6a1a1;
	background: #fff7f7;
	color: #8b0000;
}


/*=========================================================

	767px以下（SP）

	※既存サイトはヘッダー／フッターが1200px固定のため、
	  768px〜1199pxではページ全体が横スクロールになる（既存ページと同じ挙動）。
	  実機SPは meta viewport により390px前後になるので下記が効く。

==========================================================*/

@media screen and (max-width: 767px) {

	/* tableの自動幅計算で、展開した回答内のURLや表がページ全体を押し広げるのを防ぐ。 */
	.faq-top #container {
		display: block;
	}

	.faq-top #contents h1 {
		margin-bottom: 20px;
	}

	.p-faqTop__inner {
		width: auto;
		padding: 0 15px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/*--------------------------------
		ページ内ナビゲーション
	--------------------------------*/
	/* 下は次のセクション（水色地）と接するので、ボタンが詰まって見えないよう上より広く取る */
	.p-faqTop__jump {
		display: block;
		padding: 10px 15px 25px;
		background: #f8f8f8;
	}

	.p-faqTop__jumpList {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: minmax(0, 1fr) 6px minmax(0, 1fr);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* デザインは▼をラベルの下に置く縦積み。高さは指定せず上10px／下7pxの余白で決まる */
	.p-faqTop__jumpLink {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		gap: 6px;
		padding: 10px 0 7px;
		border-radius: 5px;
		background: #005b94;
		color: #fff;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* 濃紺のボタンの上なので白丸を使い、ページ内リンクなので下向きにする */
	.p-faqTop__jumpLink:after {
		display: block;
		width: 20px;
		height: 20px;
		background: url(/personal/inc/images/faq/ico_faq-arrow-circle-white.svg) no-repeat center;
		background-size: 20px 20px;
		content: "";
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}

	.p-faqTop__jumpLink:hover,
	.p-faqTop__jumpLink:focus {
		background: #00477a;
		color: #fff;
		text-decoration: none;
	}

	/*--------------------------------
		見出し
	--------------------------------*/
	.p-faqTop__heading {
		width: auto;
		max-width: 320px;
		padding-bottom: 20px;
		border-bottom-width: 3px;
		font-size: 28px;
		line-height: 22.4px;
	}

	.p-faqTop__headingRow {
		padding: 0 0 6px;
	}

	.p-faqTop__headingLink {
		position: static;
		margin: 12px 0 0;
		font-size: 14px;
		text-align: right;
	}

	/*--------------------------------
		01. お困りごとから探す
	--------------------------------*/
	.p-faqTop__trouble {
		padding: 50px 0;
		background: #e5f6ff;
	}

	.p-faqTop__troubleList {
		display: block;
		margin: 30px 0 0;
	}

	.p-faqTop__troubleItem {
		display: block;
		width: 100%;
		padding: 0;
	}

	.p-faqTop__troubleItem + .p-faqTop__troubleItem {
		margin-top: 7px;
	}

	.p-faqTop__troubleLink {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 50px 2px minmax(0, 1fr) 2px 20px;
		grid-template-columns: 50px minmax(0, 1fr) 20px;
		column-gap: 2px;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		min-height: 0;
		height: auto;
		/* 右は丸矢印が枠に近づきすぎないよう10px取る（三角のときは6px） */
		padding: 12px 10px;
		text-align: left;
	}

	/* SPは絶対配置ではなくグリッド3列目に置き、サイズを20pxに落とす */
	.p-faqTop__troubleLink:after {
		position: static;
		display: block;
		width: 20px;
		height: 20px;
		background-size: 20px 20px;
	}

	.p-faqTop__troubleIcon,
	.p-faqTop__troubleIcon img {
		width: 50px;
		height: 50px;
	}

	.p-faqTop__troubleIcon {
		margin: 0;
	}

	/*
		行ボックスは align-items: center で中央に来るが、和文の字面は行ボックスの
		上寄りに乗るため、実測で字面の中心が丸矢印より1〜2px上にずれる。
		中央揃えの箱に padding-top を足すと中身はその半分だけ下がるので、
		3px入れて1.5px下げ、字面の中心を矢印（＝カードの中心）に合わせる。
		アイコンは50pxで行の高さを決めているため、カードの高さ76pxは変わらない。
	*/
	.p-faqTop__troubleText {
		color: #2f3e46;
		font-size: 18px;
		line-height: 1.2;
		padding-top: 3px;
	}

	/* デザイン指定の改行位置をそのまま使う */
	.p-faqTop__troubleText br {
		display: inline;
	}

	.p-faqTop__troubleFraud {
		width: auto;
		margin-top: 20px;
	}

	/*--------------------------------
		02. AIチャット
	--------------------------------*/
	.p-faqTop__aichat {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: 15px;
		padding: 50px 15px;
		text-align: left;
	}

	.p-faqTop__aichat > p {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.p-faqTop__aichatBtn {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		width: 100%;
		min-height: 0;
		/* PCの左右75pxのままだと、nowrapのテキストとあわせてボタンのmin-contentが391pxになり、
		   shrink-to-fitの#containerごと広がってページ全体が横スクロールする（390px幅で421px） */
		padding: 13px 15px 18px;
		gap: 8px;
	}

	/* PCの絶対配置をやめて縦積みの1要素にする。背面の丸を載せるので relative は残す */
	.p-faqTop__aichatBtnIcon {
		position: relative;
		left: auto;
		margin: 0;
	}

	.p-faqTop__aichatBtnIcon:before {
		display: block;
	}

	/* デザインはラベルと▶を7px空けて横並び。ラベル行の上に5pxの余白を持つ */
	.p-faqTop__aichatBtnText {
		position: static;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		gap: 7px;
		padding: 5px 0 0;
		font-size: 18px;
		font-weight: 900;
		line-height: 22.4px;
		white-space: nowrap;
	}

	/* PCの絶対配置をやめて、ラベルの右に並べる1要素にする */
	.p-faqTop__aichatBtnText:after {
		position: static;
		display: block;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		margin: 0;
		background-size: 20px 20px;
	}

	.p-faqTop__aichatNote {
		margin: 0;
		font-size: 15px;
		line-height: 22.4px;
		text-align: left;
	}

	/*--------------------------------
		03. 注目のQ&A
	--------------------------------*/
	.p-faqTop__pickup {
		padding: 50px 0 0;
	}

	.p-faqTop__qaList {
		margin-top: 25px;
	}

	.p-faqTop__qaItem + .p-faqTop__qaItem {
		margin-top: 4px;
	}

	.p-faqTop__pageup {
		display: block;
		margin: 0;
		padding: 30px 0;
		font-size: 14px;
		line-height: 22.4px;
		text-align: center;
	}

	.p-faqTop__pageup a {
		position: relative;
		display: inline-block;
		/* inline-block はベースライン揃えで下に descender 分の余白が出るので top 揃えにする（Figmaの高さ83px） */
		vertical-align: top;
		padding-right: 25px;
		color: #039;
		text-decoration: none;
	}

	/* ページの先頭へ戻るので上向きにする */
	.p-faqTop__pageup a:after {
		position: absolute;
		top: 50%;
		right: 0;
		width: 20px;
		height: 20px;
		margin-top: -10px;
		background: url(/personal/inc/images/faq/ico_faq-arrow-circle.svg) no-repeat center;
		background-size: 20px 20px;
		content: "";
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}

	/*--------------------------------
		04. カテゴリーから探す
	--------------------------------*/
	.p-faqTop__category {
		padding: 50px 0;
		background: #e5f6ff;
	}

	/* PC側と同じく faq-category.css の margin: 0 に負けるので詳細度を上げる */
	.p-faqTop .p-faqTop__catList {
		display: block;
		margin-top: 40px;
	}

	.p-faqTop__catList .p-faqSidebar__parent {
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}

	.p-faqTop__catList .p-faqSidebar__parent + .p-faqSidebar__parent {
		margin-top: 8px;
	}

	.p-faqTop__catSubList {
		padding: 20px 0 0;
	}

	/*--------------------------------
		05. キーワードから探す
	--------------------------------*/
	.p-faqTop__search {
		padding: 50px 0 0;
	}

	/* SPはデザインどおり50px。PC用の80pxが詳細度で勝ってしまうので戻す */
	.p-faqTop__aichat + .p-faqTop__search {
		padding-top: 50px;
	}

	.p-faqTop__searchBox {
		padding: 20px 20px 30px;
		background: #efefef;
	}

	.p-faqTop__searchHeading {
		padding: 9px 0;
		font-size: 21px;
		line-height: 22.4px;
		text-align: center;
	}

	/* SPは入力欄とボタンを縦に積み、ボタンを中央に置く */
	.p-faqTop__searchForm {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.p-faqTop__searchInputWrap {
		width: 100%;
		margin-right: 0;
	}

	/* 上下6px＋アイコン28px＋border2pxで44px */
	.p-faqTop__searchInput {
		height: 44px;
	}

	/* SPは画面が狭いので、候補リストの高さを抑えて背面が見えるようにする */
	.p-faqTop__searchSuggestList {
		max-height: 244px;
	}

	.p-faqTop__searchSuggestItem {
		padding: 11px 12px;
	}

	.p-faqTop__searchSuggestTitle {
		font-size: 14px;
	}

	/* gapはIE11で効かないので入力欄との9pxはmarginで作る */
	.p-faqTop__searchSubmit {
		width: auto;
		margin-top: 9px;
		padding: 0 10px;
		font-size: 15px;
		line-height: 22.4px;
	}

	.p-faqTop__searchNote {
		margin-top: 10px;
		color: #2f3e46;
		font-size: 15px;
		line-height: 22.4px;
	}

	.p-faqTop__searchResults {
		margin-top: 18px;
		padding-top: 16px;
	}

	.p-faqTop__searchResultsHead {
		display: block;
		margin-bottom: 10px;
	}

	.p-faqTop__searchResultsHeading {
		margin: 0 0 3px;
		font-size: 16px;
	}

	.p-faqTop__searchStatus {
		font-size: 13px;
	}

	.p-faqTop__searchResultLink {
		min-height: 62px;
		padding: 11px 40px 11px 12px;
	}

	.p-faqTop__searchResultMark {
		-ms-flex-preferred-size: 30px;
		flex-basis: 30px;
		width: 30px;
	}

	.p-faqTop__searchResultTitle {
		font-size: 15px;
	}

	.p-faqTop__searchResultArrow {
		right: 15px;
	}

	.p-faqTop__searchMessage {
		padding: 18px 15px;
		font-size: 13px;
	}

}


/*=========================================================

	フォーカスリング

	方針は faq-category.css と同じ。キーワード検索の入力欄はクリックしたときも
	フォーカス位置が分かる必要があるため、対象にしない。

==========================================================*/

.p-faqTop__catList a.p-faqSidebar__childLink:focus:not(:focus-visible),
.p-faqTop__searchSubmit:focus:not(:focus-visible),
.p-faqTop__searchResultLink:focus:not(:focus-visible) {
	outline: none;
}