@charset "utf-8";

.drower-menu .products{
	background:#b8eafda3;
}

/*sp*/
.drower-menu .product6
{
background: linear-gradient(90deg,#94defb24 7%,rgb(243 227 146) 100%);

}

* {
	/*font-family: "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", Osaka, verdana, sans-serif;*/
	font-family: 'Noto Sans JP', sans-serif;
}

ul {
	padding: 0px;
	list-style: none;
}

p {
	margin: 5px 0px 0px 0px;
}

/*左メニューの下二つの固定化*/
.loan {
	flex: 1;
}

.loan ul {
	margin-top: 10px;
	position: -webkit-sticky;
	position: sticky;
	top: 200px;
}

.loan_menu1 {
	/*height:5rem;*/
	border: 3px solid #99c8ff;
	background: #f3fbff;
	margin-bottom: 15px;
}

.loan_menu2 {
	/*height:5rem;*/
	border: 3px solid #c2d906;
	background: #fdffeb;
	margin-bottom: 15px;

}

.loan_menu1>a,
.loan_menu2>a {
	text-align: center;
	font-weight: bold;
	justify-content: center;
	align-items: center;
}

.loan_menu1>a {
	color: #0038b7;
}

.loan_menu2>a {
	color: #057734;
}

/*#main{
display: flex;
    align-items: stretch;	
}*/
#menu_left {
	min-height: 100%;
	display: flex;
	align-items: stretch;
	flex-direction: column;
}

h2 {
	margin: 1rem 0;
	border-top: 3px solid blue;
	border-left: none;
}

/*dlによる表作成*/
dl,
.result {
	display: flex;
	width: 85%;
	background-color: #fff;
	flex-wrap: wrap;
	justify-content: left;
	text-align: center;
	font-size: 13px;
	padding-left: 0px;
	margin: 20px 0;
}

dt,
dd {
	padding: 10px 0;
	border: 1px solid #cccccc;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	margin: 0;
	font-size: larger;
}

dt {
	background: #e1edff;
	color: #333;
	justify-content: center !important;
	width: 30%;
}

dd {
	width: 70%;
	font-size: 18px;
}

dd>span {
	font-size: small;
	text-align: left;
}

input {
	width: 50%;
	margin: 0 3px;
	padding: 3px 5px;
	font-size: 15px;
	text-align: center;
}

/*借換パターン用*/
.refinan {
	width: 100%;
}

.refinan dt {
	width: 10%;
	font-size: revert;
}

.refinan dd {
	width: 30%;
	font-size: small;
}

/*.refinan dd>input{
	width: 60%;
}*/
.refinan .caption {
	width: 30%;
}

/*下半分にマーカー*/
.caution {
	background: linear-gradient(transparent 10%, #c0ffef 70%);
}

.blank {
	background: #fff;
	border: 0px none;
}

/*ボーナス返済チェック用*/
.bonus_check_yes,
.bonus_check_no {
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	padding: 5px 30px;
	position: relative;
	width: auto;
}


.btn {
	display: flex;
	justify-content: space-evenly;
}

.btn>button {
	margin: 15px 20px 15px 20px;
	padding: 10px 40px;
	font-size: large;
}

/*ローンシミュレーション　リンク*/
.simulation_link {
	margin: 40px;
}

.simulation_link li {
	width: 100%;
	margin: 20px 0;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.simulation_link a {
	width: 50%;
	border: 3px solid #7baaff;
	transition: 0.6s;
	padding: 10px 20px;
	font-size: large;
}

.simulation_link li>p {
	width: 40%;
}

.simulation_link a:hover {
	background-color: #7baaff;
	color: #ffffff;
}

input[type="range"] {
	-webkit-appearance: none;
	/* 🚩これ無しだとスタイルがほぼ全く反映されないので注意 */
	appearance: none;
	cursor: pointer;
	/* カーソルを分かりやすく */
	outline: none;
	/* スライダーのアウトラインは見た目がキツイので消す */
	height: 11px;
	/* バーの高さ */
	width: 100%;
	/* バーの幅 */
	background: #9eebf7;
	/* バーの背景色 */
	border-radius: 10px;
	/* バーの両端の丸み */

}

/* WebKit向けのつまみ */
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	/*  🚩デフォルトのつまみのスタイルを解除 */
	background: #166beb;
	/* 背景色 */
	width: 24px;
	/* 幅 */
	height: 24px;
	/* 高さ */
	border-radius: 50%;
	/* 円形に */
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
	/* 影 */
}

#success {
	border: 3px solid #99c8ff;
	display: none;
}

#failure {
	border: 3px solid #c2d906;
	display: none;
}

.caution {
	margin-top: 20px;
	text-align: center;
	padding: 1rem 2rem;
	border: 3px dotted #6e6969;
}

.entry {
	width: 100%;
}

.entry dt {
	width: 20%;
}

.entry dd {
	width: 40%;
	display: flex;
	flex-wrap: wrap;
	/*justify-content: flex-start;*/
}

.entry .bonus {
	justify-content: flex-start;
}

.bonus>input {
	width: 50%;
}

.entry .Kikan_MM+input {
	margin-left: 10px;
	width: 25%;
}

.entry .np {
	width: 10%;
}

.debt {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.offer>a {
	position: relative;
	color: #22ab52;
	padding: 0.8em;
	min-width: 250px;
	border: 3px solid #22ab52;
	font-weight: bold;
	display: block;
	transition: .6s;
	font-size: large;
}

.loanplaza>a {
	position: relative;
	color: #3388dd;
	padding: 0.8em;
	min-width: 250px;
	border: 3px solid #3388dd;
	font-weight: bold;
	display: block;
	transition: .6s;
	font-size: large;
}

.offer>a:hover {
	background-color: #22ab52;
	color: #ffffff;
}

.loanplaza>a:hover {
	background-color: #3388dd;
	color: #ffffff;
}

/*.able::before {
		 content: "\000A";
		 white-space: pre;
	}*/
.able {
	font-size: smaller;
}

.text-s {
	font-size: small;
}

/*ボーナス*/
.bonus_dt,
.bonus_dd,
.obverse {
	display: none;
}

.bonus_dt+.bonus_dd,
.bonus_dd+.bonus_dd {
	display: none;
}

dd>.obverse {
	text-align: center;
}

/*judge用*/
.bonus_check {
	width: 80%;
}

/****** ※スマホ対応※ ******/
@media screen and (max-width:500px) {
	h2 {
		text-align: center;
		padding: 0;
	}

	dl {
		width: 95%;
		/* 横幅をpxではなく、幅いっぱいに指定。 */
		display: flex;
		justify-content: flex-end;
	}

	dl>dt,
	dl>dd {
		width: 95%;
		/* 横幅を幅いっぱいに指定 */
		/*padding: 10px 15px;*/
		/* 各セルに余白を取る */
	}

	dl>dt {
		border-bottom: none;
		/* 下の線を消す（ddの下の線が残る） */
	}

	.entry>dt,
	.result {
		width: 100%;
	}

	.entry>dd {
		width: 50%;
	}

	.result {
		justify-content: center;
	}

	#success,
	#failure,
	p,
	.caution,
	.entry {
		width: 95%;
		margin-left: 2.5%;
	}

	.br::before {
		content: "\A";
		white-space: pre;
	}

	.simulation_link {
		width: 95%;
		margin: 0;
		/*margin-left:-1%;
		display: flex;
		align-content: center;*/
	}

	.simulation_link li {
		display: flex;
	}

	.simulation_link a {
		text-align: center;
		padding: 10px;
	}

	.debt {
		justify-content: space-around;
		align-items: flex-start;
		flex-direction: column;
	}

	.debt>li {
		margin: 3px 0 10px 10px;
	}

	.debt a {
		padding: 0.5em;
	}

	.caution {
		font-size: small;
	}

	.refinan dt,
	.refinan dd,
	.refinan dd>input {
		font-size: x-small;
	}

	.new_line {
		display: none;
	}

	.refinan dd>input {
		width: 60%;
	}
}