@charset "UTF-8";

@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,input,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
---------------------------------------------------------------------------------------------*/

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; }
.Fs09 { font-size: .9em; }
.red { color: #CC0000; }
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; }
li + li { margin-top: 4px; }

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

.Ttl02 { text-align: center; font-size: 1.75rem; margin-bottom: 12px;
	@media screen and ( 768px <= width ), print {
		font-size: 2rem; margin-bottom: 20px;
	}
}

img { max-width: 100%; }

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

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.topimage { position: relative;
	.mainimage img { width: 100%; position: relative; z-index: -2; }

	.TextArea { position: relative; bottom: 140px;
		@media screen and ( 768px <= width ), print {
			padding-bottom: 8em;
		}
		&::after { content: ""; width: 100%; height: 200%; position: absolute; top: 0; left: 0; background: url(../img/back.jpg) repeat center/100%; mask-image: linear-gradient(to bottom, #faee0000 0, #000 8%); z-index: -1; }
		
		.txt { position: relative;
			top: 60px;
			max-width: 1200px; margin: 0 auto; padding: 0 20px;
			@media screen and ( 768px <= width ), print {
				padding: 0;
			}
		}
	}

	ul { position: relative; top: 85px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; text-align: center; gap: 12px; list-style: none; padding: 0 1rem;
		@media screen and ( 768px <= width ), print {
			top: 120px;
		}

		li { background: #fff; border-radius: 50px; padding: 12px; display: flex; align-items: center; justify-content: center; width: calc((100% - (12px * 1))/2);
			@media screen and ( 768px <= width ), print {
				width: calc((100% - (12px * 3))/4);
			}
		}
	}
}

section.interest-rate { color: #fff; height: 307px;
	background: #036eb8;
	position: relative; padding: 0;
	@media screen and ( 768px <= width ), print {
		height: 264px;
	}

	> div.wrap { position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 100%; }

	figure { max-width: 1200px; margin: 0 auto; position: relative; }
	.flexbox { display: flex; gap: 1rem 4rem; flex-wrap: wrap; position: relative; margin-top: .75rem; padding: 20px 0 20px 0;
		table { font-size: 1.25rem; flex-shrink: 0;
			td { padding-left: 1em; }
		}
		.txt1 { font-size: 1.5rem; margin-bottom: 8px; }
		@media screen and ( 768px <= width ), print {
			margin-top: 0; flex-wrap: nowrap;
		}
	}
}

section.feature { background: url(../img/back.jpg) repeat center/100%; padding: 1.5rem 0;
	.features { counter-reset: number 0;
		> div { background: #fff; border-radius: 50px; display: flex; align-items: center; gap: 1em; padding: .5em;
			+ div { margin-top: 8px; }
			&::before { counter-increment: number 1; content: '特徴'counter(number); background: #faee00; height: 4em; width: 4em; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
			.txt1 { font-size: 1.15em; }
			.txt2 { color: #CC0000; font-size: .75em; margin-top: .5em; }
		}
		@media screen and ( 768px <= width ), print {
			font-size: 1.25rem;
			> div {
				.txt1 { font-size: 1.25em; }
			}
		}
	}
}

section.about { background: #036eb8; padding: 1.5rem 0;
    h2.Ttl02 { color: #fff; }
    .container { background: #fff; margin: 0 auto; padding: 1.5rem;
		@media screen and ( 768px <= width ), print {
			padding: 2rem;
		}
	}
    section + section { margin-top: 2rem; }
	h3 { font-size: 1.15rem; margin-bottom: 8px; border-left: 8px solid #036eb8; 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 { white-space: nowrap; padding-top: 12px; color: #036eb8;
			&::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; }
		td { padding-left: 1em; }
	}

	section.document {
		h4 { color: #036eb8; margin-bottom: 8px; }
	}
}

.date { text-align: right; margin-top: 40px; }

#Copyright { font-size: .75rem; text-align: center; padding: .75rem 0; }