@charset "UTF-8";

@import url(fontawesome.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

/* layer */
@layer destyle, base, custom1, custom2;

@layer destyle {
	/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.min.css */
	*,::before,::after{box-sizing:border-box;border-style:solid;border-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type="number"]{appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}
}

/* ---------------------------------------------------------------------------------------------
	Basic
---------------------------------------------------------------------------------------------*/

:root {
	--Font-Awesome: bold 1em/1 "Font Awesome 5 Free";
	--Font-Awesome-Brands: bold 1em/1 "Font Awesome 5 Brands";
}

html { font: 500 16px/1.25 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; color: #333333; -webkit-text-size-adjust: 100%; animation: fadeIn 1.5s ease 0s 1 normal; }
@keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} }

.Mb005 { margin-bottom: .5em!important; }
.Mb010 { margin-bottom: 1em!important; }
.Mb015 { margin-bottom: 1.5em!important; }
.Mb020 { margin-bottom: 2em!important; }
.center { text-align: center; }
.Fs09 { font-size: .9em; }
.red { color: #CC0000; }
.yellow { color: #ffef5c; }
ul.disc { list-style: disc; margin-left: 1.5em; }
ul.note li { text-indent: -1em; margin-left: 1em;
	&::before { content: '※'; }
}
ol.decimal { list-style: decimal; margin-left: 1.5em; }


p.note { text-indent: -1em; margin-left: 1em;
	&::before { content: '※'; }
}

.wrap { margin: 0 auto; padding: 0 1rem;
	@media screen and ( 768px <= width ), print {
		max-width: 1200px;
	}
}

@layer base {

img { max-width: 100%; }

a { transition: .4s;
	&:hover { opacity: .75; transition: .4s; }
}

li + li { margin-top: 4px; }

.Ttl02 { background: var(--MainColor); color: #fff; text-align: center; font-size: 1.5rem; border-radius: 50px; padding: 12px 20px;
	@media screen and ( 768px <= width ), print {
		font-size: 2rem;
	}
}

header {
	#header { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 8px 1rem;
		@media screen and ( 768px <= width ), print {
			justify-content: space-between;
		}

		span { color: #1f3e49; font-size: 1.5em; font-weight: 700; margin: 4px; }
		p { font-size: .75rem; margin: 0 auto;
			@media screen and ( 768px <= width ), print {
				font-size: 1rem; margin: 0 0 0 auto;
			}
		}
	}
}

section {
	.wrap {
		.container { margin: 0 auto; padding: 1.5rem .25rem 3rem .25rem;
			@media screen and ( 768px <= width ), print {
				padding: 2rem 2rem 4rem 2rem;
			}
		}
	}
}

#movie {
	.container { margin: 0 auto; padding: 1.5rem .25rem 0rem .25rem;
		@media screen and ( 768px <= width ), print {
		padding: 2rem 2rem 0rem 2rem;
		}
	}
}


/* メインビジュアル */
section.MainVisual { position: relative;
	img { width: 100%; }
}

/* 対象の要件 */
section.TargetAudience { background: var(--MainColor); color: #fff; padding: 1.75rem 0;
	@media screen and ( 768px <= width ), print {
		padding: 3.5rem 0;
	}

	h2.Ttl02 { color: var(--MainColor); background: #fff; margin-bottom: 20px; }
	table { width: 100%;
		tr:nth-child(n+2) th { margin-top: 12px; }
		th { font-weight: 700; }
		td { text-align: right; padding-left: 1em; }
		+ * { margin-top: 28px; }
		
		@media screen and ( width <= 767px ) {
			th { margin-bottom: 8px; }
			th, td { display: block;
				&:empty { display: none; }
			}
		}
		@media screen and ( 768px <= width ), print {
			th, td { line-height: 1.75; }
		}

		&[class^="circled-decimal"] { counter-reset: listnum;
			tr th { text-indent: -1.25em; padding-left: 1.25em; }
			tr th:empty::before { display: none; }
			tr th::before { counter-increment: listnum; content: counter(listnum, circled-decimal); margin-right: 0.25em; }
		}

		&.circled-decimal-invert {
			tr th::before { content: counter(listnum, circled-decimal-invert); }
		}
	}
}

@counter-style circled-decimal {
	system: fixed;
	symbols: ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ;
	suffix: '';
}

@counter-style circled-decimal-invert {
	system: fixed;
	symbols: ❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿ ;
	suffix: '';
}

/* お申し込み・キャンペーンチラシ ボタン */
section.Button { margin: .5rem 0;
	@media screen and ( 768px <= width ), print {
		margin: 1.75rem 0;
	}
	.container { padding: 1.5rem .25rem;
		@media screen and ( 768px <= width ), print {
			padding: 2rem;
		}
		ul {
			display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: center; align-items: center; text-align: center;
	
			@media screen and ( 768px <= width ), print { 
				flex-wrap: nowrap;
			}
	
			li { width: 100%;
				a { display: flex; align-items: center; justify-content: center; width: 100%; height: 80px; background: #f7a548; color: #fff; border-radius: 12px; padding: 1em 1em;
	
					@media screen and ( 768px <= width ), print { 
						height: 80px;
					}
					&[href$=".pdf"]::before { content: "\f1c1"; font: normal 1.5em/1 "Font Awesome 5 Free"; margin-right: 0.2em; }
					span {
						span { font-size: .75em; }
					}
				}
				+ li { margin-top: 0; }
			}
		}
	}
	
}

section.Buttons { margin: 0;
	@media screen and ( 768px <= width ), print {
		margin: 1.75rem 0;
	}
	.container { padding: 1.5rem .25rem;
		@media screen and ( 768px <= width ), print {
			padding: 2rem;
		}
		ul {
			display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: center; align-items: center; text-align: center;
	
			@media screen and ( 768px <= width ), print { 
				flex-wrap: nowrap;
			}
	
			li { width: 100%;
				a { display: flex; align-items: center; justify-content: center; width: 100%; height: 80px; background: #f7a548; color: #fff; border-radius: 12px; padding: 1em 1em;
	
					@media screen and ( 768px <= width ), print { 
						height: 80px;
					}
					&[href$=".pdf"]::before { content: "\f1c1"; font: normal 1.5em/1 "Font Awesome 5 Free"; margin-right: 0.2em; }
					span {
						span { font-size: .75em; }
					}
				}
				+ li { margin-top: 0; }
			}
		}
	}
	
}


/* 商品概要 */
section.About {
	section + section { margin-top: 2rem; }
	h3 { border-color: var(--MainColor); font-size: 1.15rem; margin-bottom: 8px; border-left: 8px solid var(--MainColor); border-bottom: 1px solid #454545; padding: 0  0 4px 8px; }
	h4 { margin-top: 20px; }

	dl { margin-left: 1em;
		dd + dt { margin-top: 12px; }
		dd { margin-left: 1em; }
	}

	table.table01 { margin: 0 0 0 1em;
		th, td { display: block; font-weight: normal; padding: 2px 0; }
		th { color: var(--MainColor); white-space: nowrap; padding-top: 12px;
			&::after { content: "：";}
		}
		td { padding-left: 1em; }
		
		@media screen and ( 768px <= width ), print { 
			margin: .5em 0 1.5em 0;
				th, td { display: table-cell; }
				th { padding-top: 0px; }
				td { padding-left: 0em; }
		}
	}

	table.table02 {
		th, td { font-weight: normal; padding: 2px 0; }
		th { color: var(--MainColor); white-space: nowrap; }
		td { padding-left: 1em; }
	}

	section.document {
		h4 { color: var(--MainColor); margin-bottom: 8px; }
	}

	.date { text-align: right; margin-top: 2rem; }
}

/* 個人情報の取り扱いに関する同意条項 */
section.Consent {
	iframe[src$=".pdf"] { width: 100%; height: 400px; }

	button { background: #ddd; color: #fff; max-width: calc(1200px/2); width: 100%; border-radius: 5px; cursor: default; padding: 1em 1em;
		@media screen and ( 768px <= width ), print {
			padding: 1.5em 1em;
		}
	}

	p:has(input[type="checkbox"]:checked) ~ button { background: #f7a548; cursor: pointer; transition: .4s;
		&:hover { opacity: .75; transition: .4s; }
	}
}

#Copyright { background: var(--MainColor); color: #fff; font-size: .75rem; text-align: center; padding: .75rem 0; }
}

/* ---------------------------------------------------------------------------------------------
	カーライフプラン
---------------------------------------------------------------------------------------------*/

body.campaign01 {
	/* 変数 */
	--MainColor: #65AADE;
	--SubColor1: #405AA8;

	/* ページごとに調整する場合は調整の場合はここに追加 */

}

/* ---------------------------------------------------------------------------------------------
	教育プラン
---------------------------------------------------------------------------------------------*/

body.campaign02 {
	--MainColor: #45BCB4;
	--SubColor1: #457eda;
}

/* ---------------------------------------------------------------------------------------------
	リフォームプラン
---------------------------------------------------------------------------------------------*/

body.campaign03 {
	--MainColor: #C6B17B;
	--SubColor1: #457eda;
}

/* ---------------------------------------------------------------------------------------------
	カードローン未来
---------------------------------------------------------------------------------------------*/

body.campaign04 {
	--MainColor: #83B114;
	--SubColor1: #457eda;
}


/* ---------------------------------------------------------------------------------------------
	まもるくん
---------------------------------------------------------------------------------------------*/

body.campaign05 {
	--MainColor: #1D2C71;
	--SubColor1: #457eda;
}

/* ---------------------------------------------------------------------------------------------
	フリーローンフィット
---------------------------------------------------------------------------------------------*/

body.campaign06 {
	--MainColor: #00A29A;
	--SubColor1: #457eda;
}

body.campaign06 .flow { display: flex; justify-content: center; }
body.campaign06 .flow li { list-style: none; width: 22%; }
body.campaign06 .flow li + li { margin-left: 2%; margin-top: 0; }
body.campaign06 .flow li img { width: 100%; }

@media screen and ( max-width:670px ) {
	body.campaign06 .flow { flex-wrap: wrap; }
	body.campaign06 .flow li { width: 46%; margin: 1.5%; }
}

.Mb020 { margin-bottom: 2em!important; }

.ol-circle { list-style: none; }
.ol-circle li { text-indent: -1em; margin-left: 1em; margin-bottom: .8em; }
.ol-brk { list-style: none; }
.ol-brk li { text-indent: -1.8em; margin-left: 1.8em; margin-bottom: .8em; }

.notes-box { width: 100%; height: 500px; overflow-y: scroll; border: 1px solid #ccc; padding: 1em; line-height: 1.5em; }
.notes-box > ol > li, .notes-box > ul > li { margin-bottom: 1.5em; }
.notes-box > ol li ol li { text-indent: -1em; margin-left: 1em; }
.notes-box h5 { font-size: 1.3em; margin-bottom: 1em; }
.notes-box dl { counter-reset: number 0; }
.notes-box dt { font-size: 1.1em; font-weight: bold; margin-bottom: .5em; }
.notes-box dt::before { counter-increment: number 1; content: counter(number)". "; }
.notes-box dd { margin-left: 1.4em; margin-bottom: 3em; }
.notes-box a { color: #009966; text-decoration: underline }
.fitbox { padding: 2em; }

.table01 { width: 100%; }
.table01 th { color: #454545; text-align: center; border: 1px #ccc solid; padding: 0.5em;}
.table01 td { color: #454545; border: 1px #ccc solid; padding: 0.5em; }


/* ---------------------------------------------------------------------------------------------
	しんきんフリーローン
---------------------------------------------------------------------------------------------*/

body.campaign07 {
	--MainColor: #76679A;
	--SubColor1: #457eda;
}

body.campaign07 .flow { display: flex; justify-content: center; }
body.campaign07 .flow li { list-style: none; width: 22%; }
body.campaign07 .flow li + li { margin-left: 2%; margin-top: 0; }
body.campaign07 .flow li img { width: 100%; }

@media screen and ( max-width:670px ) {
	body.campaign07 .flow { flex-wrap: wrap; }
	body.campaign07 .flow li { width: 46%; margin: 1.5%; }
}


/* ---------------------------------------------------------------------------------------------
	動画埋め込み
---------------------------------------------------------------------------------------------*/

iframe.youtube-16-9 {
	width: 95%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin-top: 2em;
}