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

/* さいきょうPAY加盟店募集ページ 固有CSS */

/* 3カラム（スマホバンキングFAQページ等と同じ実装） */
.p-column3 {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.p-column3__col {
	width: calc((100% - 20px) / 3);
	min-width: 0;
}
.p-column3__col img {
	width: 100%;
	height: auto;
	border-radius: 5px;
}
body.sp .p-column3__col {
	width: 100%;
}

/* FAQの番号（Q1,A1...）をカテゴリ（dl.list_faq）ごとにリセットせず、ページ全体で通し番号にする */
.faqSection {
	counter-reset: faq;
}
.faqSection .list_faq {
	counter-reset: none;
}

/* お問い合わせ／お申込みCTA共通：さいきょうカードレスローンが実際にPC/SPとも可変にしている
   改造版（loan.css「カードレスローン contactArea（PC表示時もSP同等）」のbody.page-cardless指定分）
   をそのまま転記。ページ内の.contact.actionArea > .contactArea全体（.home-entry有無を問わず）に適用。 */
#contents .contact.actionArea .contactArea {
	background: none #379b81 !important;
	border-radius: 5px !important;
	width: auto !important;
	margin: 0 10px 10px 10px !important;
	padding: 5px !important;
}
/* テキスト中央寄せは.home-entry（お申込みCTA）専用。お問い合わせボックスは左寄せのまま */
#contents .home-entry {
	text-align: center !important;
}
#contents .contact.actionArea .foot-img {
	display: none !important;
}
#contents .contact.actionArea .contact-wrap {
	padding: 0 !important;
	background: none !important;
}
body:not(.sp) #contents .contact.actionArea .ttl_img01.inquiry,
body:not(.sp) #contents .contact.actionArea .ttl_img02 {
	width: 135px !important;
	text-align: center !important;
	padding: 15px 0 !important;
	float: left !important;
	margin-right: 10px !important;
}
#contents .contact.actionArea .ttl_img01 img,
#contents .contact.actionArea .ttl_img02 img {
	margin: 0 !important;
}
/* 実際のSP版(overwrite.css)は横幅100%・積み上げ表示のため、PC用float指定はSPには適用しない */
body.sp #contents .contact.actionArea .ttl_img01.inquiry,
body.sp #contents .contact.actionArea .ttl_img02 {
	width: 100% !important;
	text-align: center !important;
	float: none !important;
	margin-right: 0 !important;
}
#contents .contact.actionArea .contact-detail {
	overflow: hidden !important;
	float: none !important;
	width: auto !important;
	background: #ffffff !important;
	padding: 10px !important;
}
#contents .contact.actionArea .contact-detail .detail {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
/* padding-leftはアイコン背景(txt_tel.gif)の余白確保のため保持する。
   お申込みCTA(.home-entry)側はアイコン背景を使わないのでここだけ0にする */
#contents .home-entry .contact-detail .detail {
	padding-left: 0 !important;
}
#contents .home-entry .contact-detail p {
	padding: 0 0 5px 0;
	font-weight: bold;
}
#contents .home-entry .contact-detail p strong {
	color: #005b94;
	font-size: 120%;
	font-weight: bold;
}
#contents .home-entry .contact-detail .btnArea {
	float: none;
	max-width: 400px;
	width: 100%;
	margin: 10px auto 20px auto;
}
#contents .home-entry .contact-detail .btn {
	max-width: 400px;
	width: 100%;
	box-sizing: border-box;
	padding: 20px 5%;
	text-align: center;
}
#contents .home-entry .contact-detail .btn.blue {
	color: #ffffff !important;
	background: rgb(33,128,187) !important;
	background: url(/inc/images/common/ico/ico_arrow_orange.gif) no-repeat 98% 50%, linear-gradient(0deg, rgba(5,96,154,1) 0%, rgba(33,128,187,1) 100%) !important;
}
#contents .home-entry .contact-detail .btn.blue:hover {
	background: rgb(33,128,187) !important;
	background: url(/inc/images/common/ico/ico_arrow_orange.gif) no-repeat 98% 50%, linear-gradient(0deg, rgba(33,128,187,1) 0%, rgba(5,96,154,1) 100%) !important;
}

/* 汎用ユーティリティ：SP時だけ左寄せにする修飾クラス。既存の.taC/.taR等と組み合わせて使う */
body.sp .sp-taL {
	text-align: left !important;
}


/* お申込みの流れのボックス色：このページで多用しているrelevantBoxと同じグレーに統一 */
.pointBox.pointBox--gray {
	background: url(/inc/images/common/bg/bg_relevant.gif);
	border: 1px solid #dfdfdf;
	padding: 30px !important;
}
/* お申込みの流れのボックスは縦flexにして、最短〇〇ラベルを下端で揃える */
.flowStep .pointBox--gray {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}
#contents .pointBox.pointBox--gray .ttl {
	background: #005b94;
	left: 50%;
	transform: translateX(-50%);
}
/* お申込みの流れのSTEPラベルは、箱の外にはみ出させず箱の中に入れる */
#contents .flowStep .pointBox--gray .ttl {
	position: static !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	display: inline-block !important;
	margin: 0 0 8px 0 !important;
	padding: 0 !important;
	background: none !important;
	border-radius: 0 !important;
	color: #005b94 !important;
	font-size: 18px !important;
}

/* お申込みの流れ：横並び＋矢印（高さ揃えは既存のfixHeight.jsを使用。.fixHeight/.fixHeightChildを付与） */
.flowSteps {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	flex-wrap: wrap;
}
.flowStep {
	flex: 1 1 0;
	min-width: 220px;
}
.flowArrow {
	flex: 0 0 auto;
	align-self: center;
	margin: 0 !important;
	padding: 0 !important;
	width: 24px;
	height: 38px;
	font-size: 0;
	line-height: 0;
}
.flowArrow::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 19px solid transparent;
	border-bottom: 19px solid transparent;
	border-left: 24px solid #005b94;
	border-radius: 5px;
}
body.sp .flowSteps {
	flex-direction: column;
}
body.sp .flowStep {
	width: 100%;
}
body.sp .flowArrow {
	transform: rotate(90deg);
}
/* 各STEPの見出し（デフォルトh3の帯アイコン・下線はこの小さな箱には合わないため上書き） */
#contents .flowStep h3 {
	background: none;
	border-bottom: none;
	padding: 0;
	margin: 8px 0 6px;
	font-size: 130%;
	color: #005b94;
	text-align: center;
}
/* 「最短〇〇」等の強調表示（最下部・角丸長方形のラベル） */
.flowHighlight {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: auto 0 0 0 !important;
	padding: 7px 20px 5px !important;
	font-weight: bold !important;
	font-size: 100% !important;
	color: #ffffff !important;
	background: #005b94 !important;
	border-radius: 9999px !important;
}

/* KV下の余白（共通CSSの.title{margin-bottom:10px}を上書き） */
.title {
	margin-bottom: 30px !important;
}

/* KV全体を動画モーダルのトリガーにする */
.kvWrap {
	position: relative;
}
#contents .kvLink {
	display: block !important;
	padding: 0 !important;
	background: none !important;
	cursor: pointer;
}
/* SP実機のハンバーガーメニュー(sp-slidemenu.css)がz-index:999999999で最前面固定のため、
   fancyboxの閉じるボタン等がその下に隠れて閉じられなくなる。fancybox側をさらに上げて回避する
   ※iOSではfancyboxのwrapがoverlayの中に入らず、body直下に別々に置かれる（overlayが後から追加される）。
     両者が同じz-indexだとoverlayが動画に被さり再生ボタンが押せなくなるため、wrapを必ずoverlayより上にすること */
.fancybox-overlay {
	z-index: 2147483000 !important;
}
.fancybox-wrap,
.fancybox-close {
	z-index: 2147483010 !important;
}

/* 仮組み段階の作業メモ（見出し確定前の目印。公開前に削除） */
.draftNote {
	font-size: 70%;
	font-weight: normal;
	color: #999;
	margin-left: 0.5em;
}