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

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

	よくあるご質問 一覧／詳細ページ
	・PCはカテゴリー移動と本文の2カラム
	・SPはカテゴリー移動を折りたたむ
	・一覧は質問タイトルから個別ページへ遷移する

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

/*
	body に .faq-top も付くため faq-top.css の「.faq-top #main { margin-bottom: 0 }」を拾ってしまう。
	あれはトップ用（#contents にH1しか無く、本文は footArea 側にある）の指定で、
	一覧・詳細は #contents に本文が入るため、下に続くAIチャットの帯と地続きになってしまう。
	layout.css の30pxではデザインの帯に対して詰まって見えるので、SPと同じ50pxを戻す。
	faq-top.css より後に読み込まれるので、同じ詳細度でもこちらが勝つ。
	SPは各ページの最後の要素に50pxを持たせているのでここでは0に戻す。
*/
.faq-category #main,
.faq-entry #main {
	margin-bottom: 50px;
}

.p-faqLayout {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.p-faqLayout__side {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 280px;
	flex: 0 0 280px;
	width: 280px;
}

.p-faqLayout__main {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	margin-left: 30px;
}

.p-faqLayout__main .section:first-child {
	margin-top: 0;
}

/* 注目のQ&Aはサイドバーを持たないので、本文を左端から始める（SPは元から margin-left: 0） */
.p-faqLayout--noSide .p-faqLayout__main {
	margin-left: 0;
}


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

	カテゴリー移動

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

.p-faqSidebar__mobileToggle {
	display: none;
}

/*
	見出しは h2 なので common.css の「#contents h2」に詳細度で負ける。
	#contents を含めた形にしないと、左の青バー（bg_h2.gif）と 1px グレーの下線、
	さらに margin-top: 30px が付いて本文カラムと頭の位置がずれる。
	background の打ち消しも必須。
*/
#contents .p-faqSidebar__heading {
	margin: 0 0 16px;
	padding: 0 0 10px;
	border-bottom: 0;
	background: none;
	color: #2f3e46;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.4;
}

.p-faqSidebar__parents,
.p-faqSidebar__children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-faqSidebar__parent {
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff;
	overflow: hidden;
}

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

.p-faqSidebar__parentButton {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0 44px 0 10px;
	border: 0;
	background: #fff;
	color: #2f3e46;
	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, border-color .2s ease;
	transition: background-color .2s ease, border-color .2s ease;
}

.p-faqSidebar__parentButton:hover {
	background: #edf5f9;
}

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

/* 開閉アイコンはFAQ共通の丸矢印（faq-top.cssの「矢印アイコン」参照）。閉じているときは下向き、開いたら上向き */
.p-faqSidebar__parentButton:after {
	position: absolute;
	top: 50%;
	right: 16px;
	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);
	-webkit-transition: -webkit-transform .2s ease;
	transition: transform .2s ease;
}

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

/* デザインのカテゴリーアイコンは37.5px四方。テキストとの間は7px */
.p-faqSidebar__parentIcon {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 37.5px;
	flex: 0 0 37.5px;
	width: 37.5px;
	margin-right: 7px;
}

.p-faqSidebar__parentIcon img {
	display: block;
	width: 100%;
	height: auto;
}

.p-faqSidebar__parentName {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	padding: 18px 0;
}

.p-faqSidebar__count {
	margin-left: 6px;
	color: #666;
	font-size: 11.2px;
	font-weight: normal;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.p-faqSidebar__children[hidden] {
	display: none !important;
}

.p-faqSidebar__children {
	padding: 25px 15px;
	background: #f8f8f8;
}

.p-faqSidebar__child + .p-faqSidebar__child {
	margin-top: 12px;
}

/*
	デザインの子カテゴリーは矢印も下線も持たない素のテキスト。
	「#contents a」の矢印画像と padding-left を打ち消すため #contents を含める。
*/
#contents .p-faqSidebar__childLink {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	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;
}

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

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

/* 表示中のカテゴリーは黒の太字にする（リンクにはしない） */
#contents .p-faqSidebar__childLink.is-current {
	color: #000;
	font-weight: bold;
}

.p-faqSidebar__childLink > span:first-child {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}

/* 件数の手前の余白は親が6px、子が5px */
.p-faqSidebar__childLink .p-faqSidebar__count {
	margin-left: 5px;
}


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

	親カテゴリー：子カテゴリーの一覧

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

.p-faqCat {
	margin-top: 30px;
}

.p-faqCat--parent {
	padding: 25px 30px;
	border: 1px solid #ababab;
	background: #fff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-faqCat__subList {
	padding: 0;
}


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

	Q一覧

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

.p-faqList {
	margin-top: 26px;
}

/*
	カテゴリー見出しはデザインでは青の28pxで、下線を持たない。
	共通の「.title h1」と「#contents h1」に負けるため #contents を含めて打ち消す。
*/
.faq-top #contents .p-faqCat__title h1 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	margin: 0;
	padding: 0 0 10px;
	border-bottom: 0;
	background: none;
	color: #005b94;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.5;
}

/*
	見出しが2行になる幅だと、flexアイテムのこれも縮んで「(5」「件)」で改行されてしまう。
	縮ませず、中でも折り返さないようにして必ず1かたまりで出す。
*/
.p-faqCat__titleCount {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	margin-left: 12px;
	color: #666;
	font-size: 11.2px;
	font-weight: normal;
	line-height: 22.4px;
	white-space: nowrap;
}

.p-faqList__summary {
	min-height: 1.6em;
	margin: 0 0 12px;
	color: #4f5d65;
	font-size: 14px;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
}

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

.p-faqList__item + .p-faqList__item {
	margin-top: 10px;
}

.p-faqList__item[hidden] {
	display: none !important;
}

/*
	「#contents a」が矢印画像と padding-left: 20px を入れてくるため #contents を含めて打ち消す。
	これが無いとデザインにない矢印が行頭に出て、左の余白もずれる。
*/
#contents .p-faqList__link {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	padding: 11px 8px;
	border: 1px solid #ccc;
	border-radius: 5px;
	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;
}

#contents .p-faqList__link:hover {
	border-color: #7ba8c3;
	background: #f2f7fa;
}

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

/*
	タイトルが2行になったときにQが行の間へ来ないよう上揃えにし、
	1行目の中央（行高22.4pxと17pxの差の半分）へ下げる。
*/
.p-faqList__mark {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 17px;
	flex: 0 0 17px;
	width: 17px;
	height: 17px;
	margin-top: 3px;
	margin-right: 7px;
	background: url(/personal/inc/images/faq/ico_q.svg) no-repeat 0 0;
	background-size: 17px 17px;
}

.p-faqList__title {
	font-size: 16px;
	line-height: 22.4px;
}

.p-faqList__arrow {
	position: absolute;
	top: 50%;
	right: 22px;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border-top: 2px solid #005b94;
	border-right: 2px solid #005b94;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* デザインでは枠を持たない素のテキスト */
.p-faqList__empty {
	margin: 0;
	padding: 0 0 20px;
	color: #4f5d65;
	font-size: 14px;
	line-height: 1.7;
}

.p-faqList__empty[hidden] {
	display: none !important;
}


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

	ページ送り

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

.p-faqPagination {
	margin-top: 28px;
}

.p-faqPagination[hidden] {
	display: none !important;
}

.p-faqPagination__list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-faqPagination__item,
.p-faqPagination__ellipsis {
	margin: 3px;
}

.p-faqPagination__link,
.p-faqPagination__current {
	display: block;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	border: 1px solid #bfc8ce;
	font-size: 14px;
	line-height: 38px;
	text-align: center;
	text-decoration: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.p-faqPagination__link {
	background: #fff;
	color: #039;
}

.p-faqPagination__link:hover {
	border-color: #005b94;
	background: #f2f7fa;
}

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

.p-faqPagination__link--wide {
	padding: 0 14px;
}

.p-faqPagination__current {
	border-color: #005b94;
	background: #005b94;
	color: #fff;
	font-weight: bold;
}

.p-faqPagination__ellipsis {
	padding: 0 3px;
	color: #66737b;
	font-size: 14px;
}


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

	FAQ詳細

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

/*
	質問部は div で組む。header にすると responsive.js の
	「$("header,#cnavi,#sidebar").addClass("sn")」に拾われ、
	スマホでスライドメニュー側へ移動して本文から質問文が消える。
	print.css の「header { display: none; }」でも消えるので div のままにすること。
*/
.p-faqEntry__question {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

/*
	common.css の「#contents h1」と faq-top.css の「.faq-top #contents h1」に
	詳細度で負けるため、こちらも #contents を含めて指定する。
	打ち消さないと下線と 30px の下余白が付く。
*/
.faq-top #contents .p-faqEntry__question h1 {
	margin: 0;
	padding: 0;
	border-bottom: 0;
	color: #005b94;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.6;
}

/*
	詳細ページのQマークは一覧・関連する質問のSVGと違い、線画より太く見せるためテキストの「Q」で組む。
	line-height を見出しの1行分（20px × 1.6）に合わせ、見出しの1行目と文字の高さを揃える。
*/
.p-faqEntry__mark {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	margin-right: 10px;
	color: #005b94;
	font-family: Arial, sans-serif;
	font-size: 24px;
	font-weight: bold;
	line-height: 32px;
}

/* Aマークは回答枠の中で本文の上に単独で置く。Qと区別するため本文と同じ黒 */
.p-faqEntry__mark--answer {
	display: block;
	margin: 0 0 8px;
	color: #231815;
	line-height: 1;
}

/*
	回答は白地に枠線で囲む。見出しとの間隔30pxはデザインの gap。
	本文の間隔は 8／16／24／32px の4段階で、話題の切れ目ほど広くする。
	左右の padding 24px は、h4 の帯が枠幅いっぱいに広がるときの負マージン量も兼ねる。
*/
.p-faqEntry__answer {
	margin-top: 30px;
	padding: 24px;
	border: 1px solid #d6d6d6;
	border-radius: 5px;
	background: #fff;
	color: #231815;
	font-size: 16px;
	line-height: 1.5;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*
	本文にURLがそのまま書かれている記事があり、URLは1単語として扱われるため折り返されず枠をはみ出す。
	行に収まらないときだけ単語の途中で折り返させる（word-break: break-all と違い、日本語文中の英単語は切らない）。
*/
.p-faqEntry__body {
	overflow-wrap: break-word;
}

/*
	共通CSSの `#contents a` が矢印アイコンを background で敷いて padding-left: 20px しているが、
	FAQの本文リンクはアイコンを持たせず、FAQトップの注目のQ&Aと同じ見た目に揃える。
	`#contents` を前置しているのは詳細度で並ぶため。
	長いURLの折り返しは .p-faqEntry__body の overflow-wrap が引き受ける。
*/
#contents .p-faqEntry__body a {
	padding-left: 0;
	background: none;
}

/* 段落どうしの間隔は16px。リスト項目どうしの5pxと小見出しの前の24pxに挟まれる中間の段 */
.p-faqEntry__body p,
.p-faqEntry__body ul,
.p-faqEntry__body ol,
.p-faqEntry__body table {
	margin: 0 0 16px;
}

/*
	本文の最初の段落は質問への直接の答えなので太字にし、続く説明との間を倍の32px空ける。
	FAQトップの注目のQ&Aも .p-faqEntry__body を使い回しているため、回答枠の中に限定する。
	本文が1段落だけの記事では枠の下に余白が残らないよう、最後の要素でもあるときは margin を足さない。
*/
.p-faqEntry__answer .p-faqEntry__body > p:first-child {
	font-weight: bold;
}

.p-faqEntry__answer .p-faqEntry__body > p:first-child:not(:last-child) {
	margin-bottom: 32px;
}

/*
	リストの後ろだけ20px。項目どうしが5pxで詰まっているぶん、
	同じ16pxではリストの終わりと次の文章の切れ目が分かりにくいため広げる。
	リストが本文の末尾に来たときは下の `> *:last-child` が打ち消す（詳細度もそちらが勝つ）。
*/
.p-faqEntry__body ul {
	margin-bottom: 20px;
}

/*
	段落間の間隔用の margin-bottom は最後の要素にも付くため、
	`.p-faqEntry__answer` の padding 24px と足されて回答枠の下だけ40pxになる。
	親に padding があるとマージン相殺が起きず枠内に残るので、末尾の要素だけ打ち消す。
*/
.p-faqEntry__body > *:last-child {
	margin-bottom: 0;
}

/*
	common.css の `#contents p { padding: 0 0 20px }` がIDセレクタで勝ち、上の margin と二重にかかって
	段落の下が35pxになる。本文の間隔は上の margin だけで作るので padding は落とす。
	`#contents` を前置しているのは詳細度で並ぶため。
*/
#contents .p-faqEntry__body p {
	padding-bottom: 0;
}

/*
	「くわしく」「次にすること」のセクション見出し。common.css の `#contents h4`（115%・上下20/10px）を打ち消す。
	左右の負マージンで回答枠の padding 24px を相殺し、帯を枠の幅いっぱいに渡す。
	上を32pxまで空けて前のセクションと切り、下は14pxで直後の中身につなぐ。
	`#contents` を前置しているのは詳細度で並ぶため。
*/
#contents .p-faqEntry__body h4 {
	margin: 32px -24px 14px;
	padding: 8px 24px;
	background: #e5f6ff;
	color: #005b94;
	font-size: 107%;
	line-height: 1.5;
}

/*
	現行の255記事はすべて本文がリード文から始まるため通常は出番がないが、
	見出しから始まる記事が入っても帯が回答枠の角丸に重ならないよう上余白だけ戻す。
*/
#contents .p-faqEntry__body h4:first-child {
	margin-top: 0;
}

/*
	h4 の下にぶら下がる小見出し。common.css の `#contents h5`（109%・下10px）を打ち消し、
	文字を大きくするかわりに左の青いバーで見出しと分からせる。
	下を6pxまで詰めて直後の本文とひとかたまりに見せ、上は24px空けて前のかたまりと切る。
	`#contents` を前置しているのは詳細度で並ぶため。
*/
#contents .p-faqEntry__body h5 {
	margin: 24px 0 6px;
	padding-left: 9px;
	border-left: 3px solid #005b94;
	font-size: 100%;
	line-height: 1.5;
}

/* 1行が長くなりすぎないように文章だけ幅を絞る（表は絞らない） */
.p-faqEntry__body p,
.p-faqEntry__body ul,
.p-faqEntry__body ol {
	max-width: 44em;
}

.p-faqEntry__body ul,
.p-faqEntry__body ol {
	padding-left: 1.5em;
}

/* ul は init.css の `list-style: none` を受けるので、本文の中だけ中黒を戻す（ol は対象外のため番号は出ている） */
.p-faqEntry__body ul {
	list-style: disc outside;
}

/*
	項目の間隔は5px。段落どうしの16pxより狭くして、リスト全体がひとかたまりに見えるようにする。
	最後の項目にも下余白が付くと、リストが本文末尾に来たときに
	`> *:last-child` の打ち消しをすり抜けて回答枠の下だけ広がるため、
	下ではなく隣接する項目の上に持たせる。
*/
.p-faqEntry__body li + li {
	margin-top: 5px;
}

/*
	入れ子のリストは common.css の「#contents ul li ul」等が上5px・下0にしていて、
	IDセレクタの詳細度で勝つため上の `.p-faqEntry__body ul` の20pxが届かない。
	入れ子の終わりも同じ20pxで区切りたいので、#contents を含めた形で当て直す。
	この下マージンは親の li・ol を相殺で突き抜けるので、親リストの下16pxとは
	足し算にならず20pxになる。
*/
#contents .p-faqEntry__body li ul,
#contents .p-faqEntry__body li ol {
	margin: 5px 0 20px;
}

/*
	ただし本文の末尾に来る入れ子は、同じ相殺で上の `> *:last-child` の打ち消しもすり抜け、
	回答枠の下だけ20px広がってしまう（現行255件では6件が該当）。ここで止める。
	`#contents` を前置しているのは、上の入れ子ルールに詳細度で並ぶため。
*/
#contents .p-faqEntry__body > *:last-child li:last-child > ul:last-child,
#contents .p-faqEntry__body > *:last-child li:last-child > ol:last-child {
	margin-bottom: 0;
}

/*
	MTの記事本文に入る表はクラスを持てないため、サイト共通の table.tbl と同じ見た目をここで当てる。
	4列以上の表は faq-list.js がスクロール領域で囲み、読みやすい列幅を維持する。
*/
.p-faqEntry__body table {
	width: 100%;
	background: #fff;
	border: 1px solid #c7c7c7;
}

/*
	左右の負マージンで回答枠の padding 24px を相殺し、スクロール領域を枠線の内側いっぱいまで広げる
	（h4 の帯と同じやり方。幅は負マージンのぶんだけ auto で伸びる）。
	相殺したぶんは padding で戻し、スクロールの端では表の左右が本文の行頭・行末に揃うようにする。
	枠いっぱいまで広がるのはスクロール中だけで、表が枠線の外へ流れていくことで
	まだ続きがあると分かる。
	スクロール領域の右 padding は古いブラウザだとスクロール量に足されず無視されるが、
	そのときは右端が枠線で切れるだけで、読めなくなる箇所は出ない。
*/
.p-faqEntry__tableScroll {
	margin: 0 -24px 16px;
	padding: 0 24px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.p-faqEntry__tableScroll:focus {
	outline: 2px solid #005b94;
	outline-offset: 2px;
}

.p-faqEntry__tableScroll table {
	margin-bottom: 0;
}

.p-faqEntry__tableScroll .p-faqEntry__table--wide {
	min-width: 720px;
}

/*
	スクロールの案内は読ませる文ではなく操作の合図なので、本文より一段落として表を主役にする。
	続きがあるのは右なので右端に寄せ、矢印も右向きだけにして視線をそちらへ送る。
	`max-width: none` は上の「文章だけ 44em に絞る」を打ち消すため。
	残したままだと右寄せの基準が本文の折り返し幅になり、表の右端と揃わない。
*/
#contents .p-faqEntry__tableNote {
	max-width: none;
	margin: 0 0 8px;
	color: #666;
	font-size: 13px;
	font-weight: normal;
	text-align: right;
}

/* 矢印は文末に置くので、疑似要素で足して文言側（JS）は文字だけに保つ */
#contents .p-faqEntry__tableNote:after {
	display: inline-block;
	width: 20px;
	height: 14px;
	margin-left: 6px;
	background: url(/personal/inc/images/faq/ico_faq-table-scroll.svg) no-repeat 0 0;
	background-size: 20px 14px;
	vertical-align: -2px;
	content: "";
}

.p-faqEntry__body th,
.p-faqEntry__body td {
	padding: 7px 10px;
	border: 1px solid #c7c7c7;
	vertical-align: top;
}

.p-faqEntry__body th {
	color: #fff;
	text-align: left;
	background: url(/inc/images/common/bg/bg_tbl.gif) repeat 0 0;
}

.p-faqEntry__back,
.p-faqCat__back {
	margin: 28px 0 0;
}

/*
	戻るボタンは p なので common.css の「#contents p { padding: 0 0 20px }」を拾い、
	ボタンの下に20pxの空きが残る。ここの間隔は上の margin と親の padding で作るので落とす。
*/
#contents .p-faqEntry__back,
#contents .p-faqCat__back {
	padding-bottom: 0;
}

/*
	「#contents a」が矢印画像と padding-left: 20px を入れてくるため #contents を含めて打ち消す。
	デザインでは枠付きの横長ボタンで、文字は中央・下線なし。
*/
#contents .p-faqEntry__back a,
#contents .p-faqCat__back 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-box-sizing: border-box;
	box-sizing: border-box;
}

#contents .p-faqEntry__back a:hover,
#contents .p-faqCat__back a:hover {
	border-color: #7ba8c3;
	background: #f2f7fa;
}

#contents .p-faqEntry__back a:focus,
#contents .p-faqCat__back a:focus {
	outline: 2px solid #088bdd;
	outline-offset: 2px;
}


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

	関連する質問（entry.tpl の js-faq-related）

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

/*
	Figmaのデザインは390px幅のSPのみ。PCは本文カラムへそのまま展開している。
	見出しの下線はデザインどおり320px幅の中央寄せで、PCでも広げない。
*/
.p-faqRelated {
	margin: 40px 0 0;
	padding: 50px 15px;
	background: #e5f6ff;
}

/*
	init.css の「section { display: block }」が hidden 属性のUAスタイル（display: none）に
	優先してしまい、関連が0件でもブロックの帯だけが残る。明示的に消す。
*/
.p-faqRelated[hidden] {
	display: none;
}

/*
	見出しは h2 なので common.css の「#contents h2」に詳細度で負ける。
	左の青バー（bg_h2.gif）と margin-top が付くため、background ごと打ち消す。
*/
#contents .p-faqRelated__heading {
	max-width: 320px;
	margin: 0 auto 9px;
	padding: 9px 0 20px;
	border-bottom: 3px solid #005b94;
	background: none;
	color: #005b94;
	font-size: 28px;
	font-weight: bold;
	line-height: 22.4px;
	text-align: center;
}

/*
	デザインでは見出しが上下9pxの枠に入り、その下にリストが10pxの余白で続く。
	リスト側を margin にすると見出しの下9pxと相殺されて消えるため padding で持たせる。
*/
.p-faqRelated__list {
	margin: 0;
	padding: 10px 0 0;
}

.p-faqRelated__item + .p-faqRelated__item {
	margin-top: 10px;
}

/*
	「#contents a」が矢印画像と padding-left: 20px を入れてくるため、
	#contents を含めた形で打ち消す。これを付けないと既存の .p-faqList__link と
	同じく矢印が二重に出て、左の余白もずれる。
*/
#contents .p-faqRelated__link {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 11px 8px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff;
	color: #039;
	font-size: 14px;
	line-height: 1.6;
	text-decoration: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#contents .p-faqRelated__link:hover {
	border-color: #7ba8c3;
	background: #f2f7fa;
}

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

.p-faqRelated__mark {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 17px;
	flex: 0 0 17px;
	width: 17px;
	height: 17px;
	margin-right: 7px;
	background: url(/personal/inc/images/faq/ico_q.svg) no-repeat 0 0;
	background-size: 17px 17px;
}

/*
	タイトルはデザインどおり1行で省略する。
	width: 0 と flex-basis: 0 は横幅対策。#container が layout.css で display: table
	（shrink-to-fit）なので、white-space: nowrap の max-content 幅がそのままページ全体の
	横幅になり、長いタイトルがあるとSPで723pxまで伸びて横スクロールが出ていた。
	幅の起点を0にすると親より広い幅を要求しなくなる。
*/
.p-faqRelated__title {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 0px;
	flex: 1 1 0;
	overflow: hidden;
	width: 0;
	min-width: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
}


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

	SP

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

@media (max-width: 767px) {

	.faq-category #main,
	.faq-entry #main {
		margin-bottom: 0;
	}

	/*
		下に続く footArea の共通ブロック（faq-bottom.tpl のAIチャットと検索）は色帯なので、
		responsive.css の「.sp #contents { padding: 5px }」の下側が残ると帯の間に白い筋が出る。
		左右と同じ要領で打ち消し、本文の下余白は各ページの最後の要素に50pxで持たせる。
	*/
	.p-faqLayout {
		display: block;
		margin-bottom: -5px;
	}

	.p-faqLayout__side {
		width: auto;
		margin-bottom: 24px;
	}

	/*
		デザインの左右余白は画面端から15px。素のままだと
		「.sp #contents の padding 5px」＋「.section の margin 5px」＋「overwrite.css の .title の padding 10px」で
		見出しだけ20px、一覧と戻るボタンは5pxと揃わない。
		サイドバーと同じ要領で #contents の5pxを打ち消し、この中の要素へ15pxを持たせて基準線を1本にする。
		「注目のQ&A」の --noSide は詳細度で勝ってしまうため併記する。
	*/
	.p-faqLayout__main,
	.p-faqLayout--noSide .p-faqLayout__main {
		margin: 0 -5px;
	}

	/*
		デザインはサイドバー全体が濃紺の帯で、その上にカードが乗る。
		responsive.css の「.sp #contents { padding: 5px }」を打ち消して画面幅に広げる。
	*/
	.p-faqSidebar {
		margin: -5px -5px 0;
		background: #005b94;
	}

	.p-faqSidebar__mobileToggle {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		width: 100%;
		min-height: 0;
		margin: 0;
		padding: 20px 15px;
		border: 0;
		background: #005b94;
		color: #fff;
		font-family: inherit;
		font-size: 18px;
		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;
	}

	/* 濃紺の帯の上なので白丸を使う。閉じているときは下向き、開いたら上向き */
	.p-faqSidebar__mobileToggle:after {
		position: static;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		margin: 0;
		border: 0;
		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-faqSidebar__mobileToggle[aria-expanded="true"]:after {
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}

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

	.p-faqSidebar__panel {
		display: none;
		padding-top: 0;
	}

	/*
		閉じているときの帯はトグルの高さ（63px）だけ。開いたときにリストの下へ
		20pxの余白を出すので、padding はサイドバー側ではなくこちらに持たせる。
	*/
	.p-faqSidebar__panel.is-mobile-open {
		display: block;
		padding-bottom: 20px;
	}

	/* デザインでは「カテゴリーを変更」が見出しの役目を果たすため、こちらは出さない */
	#contents .p-faqSidebar__heading {
		display: none;
	}

	.p-faqSidebar__parent {
		margin-left: 15px;
		margin-right: 15px;
	}

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

	/*
		SPは「カテゴリーを変更」を開いた時点では全て閉じているため、
		開いているかどうかでは現在地が分からない。枠と見出しをFAQの基調色にして示す。
		（子カテゴリーの現在地は #contents .p-faqSidebar__childLink.is-current が担当）
	*/
	.p-faqSidebar__parent.is-current {
		border-color: #005b94;
	}

	.p-faqSidebar__parent.is-current .p-faqSidebar__parentName {
		color: #005b94;
	}

	/* デザインのカテゴリーアイコンはSPだけ50px四方 */
	.p-faqSidebar__parentIcon {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50px;
		flex: 0 0 50px;
		width: 50px;
	}

	/* 件数はラベルのすぐ右に置く（FAQトップの一覧と同じ） */
	.p-faqSidebar__parentName,
	.p-faqSidebar__childLink > span:first-child {
		-webkit-box-flex: 0;
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
	}

	#contents .p-faqSidebar__childLink {
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

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

	.p-faqList {
		margin: 20px 15px 0;
	}

	/*
		デザインの本文下は50px。詳細ページは .p-faqEntry の padding-bottom が担うので持たせない。
		注目のQ&Aは戻るボタンを持たず一覧が最後に来るため、--noSide のときだけ一覧に付ける。
	*/
	.p-faqCat__back {
		margin-right: 15px;
		margin-bottom: 50px;
		margin-left: 15px;
	}

	.p-faqLayout--noSide .p-faqList {
		margin-bottom: 50px;
	}

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

	/* 一覧の文字だけデザイン上SPが14px、PCが16px */
	.p-faqList__title {
		font-size: 14px;
	}

	.p-faqPagination__link,
	.p-faqPagination__current {
		min-width: 36px;
		height: 36px;
		line-height: 36px;
	}

	/*
		Q&Aまわりの寸法はデザイン上SPとPCで同値のため、文字まわりの上書きは持たない。
		SPでだけ必要なのは左右の余白15pxとブロック全体の上下余白。
	*/
	.p-faqEntry {
		padding: 20px 15px 50px;
	}

	/*
		上の .p-faqEntry が左右15pxを持つぶん、回答枠の padding 24px がそのまま足されて
		画面端から39pxになり本文の幅が足りない。枠の中だけ16pxに詰めて左右を8pxずつ広げる。
	*/
	.p-faqEntry__answer {
		padding: 16px;
	}

	/*
		h4 の帯は回答枠の padding を負マージンで相殺して枠幅いっぱいに渡しているため、
		相殺量と戻す padding も16pxへ揃える。24pxのままだと帯だけ左右へ8pxはみ出す。
	*/
	#contents .p-faqEntry__body h4 {
		margin-right: -16px;
		margin-left: -16px;
		padding-right: 16px;
		padding-left: 16px;
	}

	/* 横スクロールする表も同じ相殺のしくみなので、こちらも16px基準に合わせる */
	.p-faqEntry__tableScroll {
		margin-right: -16px;
		margin-left: -16px;
		padding-right: 16px;
		padding-left: 16px;
	}

	.p-faqEntry__body p,
	.p-faqEntry__body ul,
	.p-faqEntry__body ol {
		max-width: none;
	}

	/* デザインの間隔は回答枠の下20px＋ボタンの上28pxで48px */
	.p-faqEntry__back {
		margin-top: 48px;
	}

	/*
		デザインでは関連する質問が質問セクションの直後に続き、間隔は .p-faqEntry の
		padding-bottom 50px がそのまま担う。PC用の margin-top 40px は足さない。
	*/
	.p-faqRelated {
		margin-top: 0;
	}

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

	/*
		親カテゴリーページは .p-faqLayout__main を通らないので、その包みで #contents の5pxを打ち消す。
		これで .section の左右5pxと .title の10pxが乗って、見出しが他ページと同じ15pxに載る。
	*/
	.p-faqCat__parentPage {
		margin: 0 -5px -5px;
	}

	.p-faqCat--parent {
		margin-right: 15px;
		margin-bottom: 50px;
		margin-left: 15px;
		padding: 18px 15px;
	}

}


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

	フォーカスリング

	マウスやタップでもボタン・リンクに :focus が当たるため、クリックしただけで
	リングが出てしまう。キーボード操作のときだけ出すよう、:focus-visible では
	ない場合を打ち消す。
	:focus-visible に未対応のブラウザ（IE11など）はこのブロックごと無視するので、
	各コンポーネントの :focus がそのまま効く。

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

.p-faqSidebar__parentButton:focus:not(:focus-visible),
#contents a.p-faqSidebar__childLink:focus:not(:focus-visible),
#contents .p-faqList__link:focus:not(:focus-visible),
.p-faqPagination__link:focus:not(:focus-visible),
#contents .p-faqEntry__back a:focus:not(:focus-visible),
#contents .p-faqCat__back a:focus:not(:focus-visible),
#contents .p-faqRelated__link:focus:not(:focus-visible),
.p-faqSidebar__mobileToggle:focus:not(:focus-visible) {
	outline: none;
}

/*
	アコーディオンの見出しは .p-faqSidebar__parent の overflow: hidden に
	上・左・右のリングを切られ、開いているときだけ下辺が残ってしまう。
	キーボード操作時は内側に描いて全周を見せる。
*/
.p-faqSidebar__parentButton:focus-visible {
	outline: 2px solid #088bdd;
	outline-offset: -2px;
}