@charset "UTF-8";
:root {
	--fs-xxl: 30px;
	--fs-xl: 26px;
	--fs-l: 22px;
	--fs-m: 18px;
	--fs-s: 14px;
	}
body {
	background-color: #fcfcfc;}

/* temp layout */
#maincontents { 
	padding-bottom: 0;}
#maincontents > section {
	position: relative;
	margin: 0 auto;
	max-width: 1100px;
	font-size: var(--fs-m);
	background-color: #fff;
	box-shadow: 0px 3px 3px rgba(0,0,0,.15);}
.product-product-name a {
	color: #3f9322;
	font-weight:bold;
}
#maincontents a:hover { text-decoration: none;}

/**************************************************
	FV section#title 
**************************************************/
#maincontents > section#title {
	width: 100%;
	max-width: 100%;
	margin: 0 0;
	padding:0 0;
	line-height: 1.2;
	box-shadow: none;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	}
	/*
			<span class="yyyymm line1st">～ 2024年6月版 ～</span>
			<span class="line2nd">カードローン探しにおすすめ！</span>
			<span class="line3rd">人気の<u>ランキング</u>で</span>
			<span class="line4th"><em>47</em>社のカードローンを比較</span>
	*/

/********************************************************************
	パターンA
 ********************************************************************/
#maincontents > section#title {
	/*background-image: url("/images/special/hero-pc-m2.webp");*/}
#maincontents > section#title h1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
	padding: 0 0;
	max-width: 1080px;
	min-height: 350px;
	font-size: 34px;
	font-weight: bold;;
	line-height:1;
	text-align: center;
	color: #000;}

#maincontents > section#title h1 span.line1st /* 2024年最新版 */,
	#maincontents > section#title h1 span.yyyymm /* 2024年2月版 */,
	#maincontents > section#title h1 span.line2nd /*カードローン探しにおすすめ！*/,
	#maincontents > section#title h1 span.line3rd /*人気のランキングで*/,
	#maincontents > section#title h1 span.line4th /*47社のカードローンを比較*/{ 
	display: block;
	text-shadow:
	2px 2px 0 #FFF, -2px -2px 0 #FFF,
	-2px 2px 0 #FFF, 2px -2px 0 #FFF,
	0px 2px 0 #FFF,  0 -2px 0 #FFF,
	-2px 0 0 #FFF, 2px 0 0 #FFF;}
#maincontents > section#title h1 span.yyyymm /* 2024年2月版 */,
#maincontents > section#title h1 span.line2nd /*カードローン探しにおすすめ！*/ {
	margin: 3px auto;
	text-align: left;
	letter-spacing:0.1em;}
#maincontents > section#title h1 span.line3rd {/*人気のランキングで*/
	margin: 20px auto 0 auto;
	font-size: 60px;
	font-family: serif;
	text-align: center;
	font-weight: bold;}
#maincontents > section#title h1 span.line4th {/* nn社のカードローンを比較*/ 
	margin: 5px auto 0 auto;
	font-size: 45px;
	letter-spacing: -0.1em;
	font-family: serif;
	text-align: center;
	font-weight: bold;}
	/* 装飾 */
#maincontents > section#title h1 u { 
	text-decoration: none;
	background: linear-gradient(transparent 50%, rgba(256,256,0,0.6) 65%,  rgba(256,256,0,0.6) 85%,transparent 85%);}
#maincontents > section#title h1 em {
	display: inline-block;
	margin: 0 0.25em 0 0;
	padding: 0.25em 0.25em;
	letter-spacing: -0.01em;
	background-color: rgba(256,256,256,0.5);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.35);
	border-radius: 4px;
	text-shadow: none;}
#maincontents > section#title h1 strong { 
	display: inline-block;
	color: red;
	line-height:1;
	font-size: 70px;
	letter-spacing: 0;
	margin-right: 5px;}
	/* 2024.10 追加 */
#maincontents > section#title h1 span.line1st {/* 2024年最新版 */
	margin: 0 auto;
	font-size: 24px;
    color: #000;
	text-align: left;
}
#maincontents > section#title h1 span.line5th {/* （2024年10月8日更新） */
	position: absolute;
	margin: 0 auto;
	right: 0;
	bottom: 25px;
	left: 0;
	font-size: 1rem;
	font-weight: normal;
	text-align:right;
	color: #fff;
	text-shadow: 1px 1px 1px #666;
}
	/* ********** ********** DIV毎の設定 ********** ********** */
body.card #maincontents > section#title { background-image: url("/images/special/hero-card-pc.webp")}
	body.card #maincontents > section#title h1 > span { width: 550px;}
body.omatome #maincontents > section#title { background-image: url("/images/special/hero-omatome-pc.webp")}
	body.omatome #maincontents > section#title h1 > span { width: 570px;}

/********************************************************************
	パターンB .pattern-b
 ********************************************************************/
body.pattern-b #maincontents > section#title {
	width: 100%;
	max-width: 100%;
	margin: 0 0;
	padding:0 0;
	line-height: 1.2;
	box-shadow: none;
	background-color: #030B16;
	background-image: url("/images/special/hero-pc-mb.webp");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto;
	}
body.pattern-b #maincontents > section#title h1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
	padding: 0 0;
	max-width: 1080px;
	min-height: 350px;
	font-weight: bold;;
	line-height:1;
	text-align: center;
	color: #fff;}
body.pattern-b #maincontents > section#title h1 span.line1st /* 2024年最新版 */,
	body.pattern-b #maincontents > section#title h1 span.yyyymm /* 2024年2月版 */,
	body.pattern-b #maincontents > section#title h1 span.line2nd /*カードローン探しにおすすめ！*/,
	body.pattern-b #maincontents > section#title h1 span.line3rd /*人気のランキングで*/,
	body.pattern-b #maincontents > section#title h1 span.line4th /*47社のカードローンを比較*/{ 
	display: block;
	text-shadow:
		 2px  2px 1px #000,
		-2px -2px 1px #000,
		-2px  2px 1px #000,
		 2px -2px 1px #000,
		 0px  2px 1px #000,
		 0px -2px 1px #000;}
body.pattern-b #maincontents > section#title h1 span.yyyymm /* 2024年2月版 */,
body.pattern-b #maincontents > section#title h1 span.line2nd /*カードローン探しにおすすめ！*/ {
	margin: 3px auto;
	width: 525px;
	font-size: 30px;
	text-align: left;
	letter-spacing:0.1em;}
body.pattern-b #maincontents > section#title h1 span.line3rd {/*人気のランキングで*/
	margin: 30px auto 0 auto;
	font-size: 60px;
	font-family: inheerit;
	text-align: center;
	font-weight: bold;
	letter-spacing: -0.02em;}
body.pattern-b #maincontents > section#title h1 span.line4th {/*47社のカードローンを比較*/ 
	font-size: 40px;
	letter-spacing: 0;
	font-family: inherit;
	text-align: center;
	font-weight: bold;}
	/* 装飾 */
body.pattern-b #maincontents > section#title h1 em {
	display: inline;
	margin: 0 0 0 0;
	padding: 0 0;
	letter-spacing: -0.01em;
	background-color: transparent;
	border-radius: 4px;
	box-shadow: none;
	text-shadow: inherit;}
body.pattern-b #maincontents > section#title h1 u { 
	padding: 0.25em 0 0 0;
	text-decoration: none;
	background: transparent;
	background-image: radial-gradient(circle at center, yellow 15%, transparent 15%); /* 点の色とサイズ調整 */
	background-position: initial; /* 点の位置 */
	background-repeat: repeat-x; /* 横方向に繰り返し */
	background-size: 1em 0.5em; /* 点の間隔とサイズ調整 */}
body.pattern-b #maincontents > section#title h1 strong { 
	display: inline-block;
	color: yellow;
	line-height:1;
	font-size: 60px;
	letter-spacing: 0;
	margin-right: 5px;}
	/* 2024.10 追加 */
body.pattern-b #maincontents > section#title h1 span.line1st {/* 2024年最新版 */
	color: #fff;
}
body.pattern-b #maincontents > section#title h1 span.line5th {/* （2024年10月8日更新） */
	bottom: 45px;
	color: rgba(256,256,256,.5);
	text-shadow: 1px 1px 1px #000;
}
	/* ********** ********** DIV毎の設定 ********** ********** */
body.pattern-b.card #maincontents > section#title { background-image: url("/images/special/hero-pc-mb.webp")}

/**************************************************
	レイアウト一括指定：#maincontents > section 
**************************************************/
#maincontents > section.articles {
	position: relative;
	margin: 0 auto 0 auto;
	padding: 30px 40px 60px 40px;
	border-top: 50px solid #d7ebdb}
#maincontents > section.articles:before {
	position: absolute;
	content: "";
	display: block;
	z-index:9;
	height: 60px;
	width: 60px;
	top: -30px;
	left: calc(50% - 30px);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 45px;}
	#maincontents > section#by-type:before { background-image: url("/images/special/ttl_by-type.png")}
	#maincontents > section#howto:before { background-image: url("/images/special/ttl_howto.png")}
	#maincontents > section#knowledge:before { background-image: url("/images/special/ttl_knowledge.png")}
	#maincontents > section#faq:before { background-image: url("/images/special/ttl_faq.png")}
	#maincontents > section#flow:before { background-image: url("/images/special/ttl_flow.png")}
	#maincontents > section#article:before { background-image: url("/images/special/ttl_article.png")}
	#maincontents > section#dictionary:before { background-image: url("/images/special/ttl_dictionary.png")}
#maincontents > section.articles:after {
	position: absolute;
	content: "";
	display: block;
	height: 50px;
	width: 100px;
	top: -50px;
	left: calc(50% - 50px);
	/* 半円の場合 */
	border-radius: 50px 50px 0 0;
	/* 三角の場合
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	*/
	background-color: #fff;}
	#maincontents > section.articles:nth-of-type(2n+1) {
		background-color: #d7ebdb;
		border-top-color: #fff;}
	#maincontents > section.articles:nth-of-type(2n+1):after {
		background-color: #d7ebdb;}
#maincontents > section > h2 {
	position: relative;
	margin: 0 0;
	padding: 0 0;
	line-height: 1.1;
	color: #444;
	font-size: 32px;
	font-weight: bold;
	text-align: center;}
			/* コーナータイトル */
#maincontents > section.articles > h2 { 
	padding: 10px 0 15px 0;
	color: #6fb42c;}
#maincontents > section.articles:nth-of-type(2n+1) > h2 { color: #000;}
		/* .description */
.description {
	margin: 0 0;
	padding: 20px 120px;
	line-height: 1.4;
	color: #444;}
	.description p,
	p.description { text-indent: 1em;}
	.description p + p { margin-top: .5em;}

.articles .description {
	padding: 20px 80px;
}
	/*<div class="message"><p>該当データはありません。</p></div>*/
.message {
	color: #a94442;
	border: 1px solid #dca7a7;
	border-radius: 6px;
	background-color: #f2dede;
	background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
	max-width: 880px;
	margin: 0 auto;
	padding: .5em 1em;
}

section.articles time {
	display: block;
	margin: 0 0;
	padding: 10px 0;
	text-align: right;
	color: #666}
	/* 定型カードボックス */
section#howto div.section/*カードローンの選び方のポイント*/,
	section#knowledge > dl > div/*カードローンの基礎知識*/,
	section#article ul.recentArticles > li/*カードローンお役立ち記事*/,
	section#flow > dl/* カードローンを借り入れるまでの流れ*/,
	section#faq > dl > div/*カードローンに関するよくある質問*/ {
		display: block;
		width: auto;
		clear: both;
		margin: 0 0 20px 0;
		padding: 30px 40px;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 8px;
		/*box-shadow: 1px 2px 8px rgba(0,0,0,.1);*/}
section.articles div.fpProfile { 
	margin: 20px 0 0 0;
	padding: 15px !important;
	border-color: #ddd;}
	section.articles div.fpProfile h4 {
		margin: 0 0 15px 0 !important;
		font-size: var(--fs-m) !important;}
	section.articles div.fpProfile img.fpPhoto { margin: 0 15px 0 0;}
	/* コーナーへのリンク */
section.articles a.link,
	ul.recentArticles li > div > a {
	display: block;
	margin: 0 auto;
	padding: 1em 0;
	color: #fff;
	text-align: center;
	border-radius: 2em;
	background: #6fb42c;
	cursor: pointer;}
	section.articles a.link:hover,
	ul.recentArticles li > div > a:hover {
		opacity: 0.7;
		text-decoration: none;}

	/* 記事大見出し */
section#howto div.section h3,
section#knowledge > dl > div > dt > h3,
section#flow > dl > dt,
section#article ul.recentArticles li > h4 {
	margin: 2em 0 .5em 0;
	padding: 0 0 14px 0;
	line-height: 1;
	font-size: var(--fs-l);
	font-weight: bold;
	background-image: url("/images/div/line-green.png");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: contain;
	line-height: 1.1;
}
section#howto div.section h3:before,
section#knowledge > dl > div > dt > h3:before,
section#flow > dl > dt:before,
section#article ul.recentArticles li > h4:before {
	display: inline-block;
	content: "";
	width: 26px;
	height: 26px;
	margin: 0 6px -6px 0;
	background-image: url("https://www.eloan.co.jp/images/div/il_title-green.png");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: contain;}

section#howto div.section h3:nth-of-type(1),
	section#knowledge > dl > div > dt > h3:nth-of-type(1),
	section#flow > dl > dt:nth-of-type(1),
	section#article ul.recentArticles li > h4:nth-of-type(1) { 
		margin-top: 0;
		padding-top: 0;}

/**************************************************
	section#ranking-top お手軽ランキング
**************************************************/
section#ranking-top {
	margin: 0 auto;
	padding: 60px 0 1px 0;}
section#ranking-top h2 {
	position: relative;
	width: 800px;
	margin: 0 auto .5em auto;
	padding: 0 0 .25em 0;
	color: #2E4E63;
	line-height: 1.25;
	border-bottom: #2E4E63 2px solid;}
	section#ranking-top h2 span {
		display: block;
		font-size: 28px;}
	section#ranking-top h2:after {
		position: absolute;
		content: "";
		display: block;
		height: 10px;
		width: 20px;
		left: calc(50% - 1em);
		bottom: -12px;
		clip-path: polygon(0 0, 50% 100%, 100% 0);
		background-color: #2E4E63;}

section#ranking-top div.rankingBox {
	width: 800px;
	margin: 0 auto;
	padding: 10px 40px;
	line-height: 2;
	border: #2E4E63 1px solid;
	border-radius: 8px;
}
section#ranking-top li {
	display: flex;
	align-items: center;
	margin: 10px 0;
	line-height: 1;}
section#ranking-top li span { }
section#ranking-top li span.product-box-rank {
	display: block;
	width: 30px;
	margin: 0 15px 0 0;
	padding: 5px 0 3px 0;
	font-family: 'Josefin Sans';
	font-weight: 600;
	text-align: center;
	color: #fff;
	line-height: 1;
	background-color: #9FB8C5;
}
	section#ranking-top li span.product-box-rank.rank-1 { 
		padding: 12px 0 0;
		background: url("/images/fp/icon-rank_01.png") no-repeat;
		background-size: 30px 30px;}
	section#ranking-top li span.product-box-rank.rank-2 {
		padding: 12px 0 0;
		background: url("/images/fp/icon-rank_02.png") no-repeat;
		background-size: 30px 30px;}
	section#ranking-top li span.product-box-rank.rank-3 {
		padding: 12px 0 0;
		background: url("/images/fp/icon-rank_03.png") no-repeat;
		background-size: 30px 30px;}
section#ranking-top li > div {
	width: calc(100% - 45px);}
section#ranking-top li span.product-product-name { 
	margin-right: 0.5em;
	font-weight: bold;}
section#ranking-top a.silde-down {/* すべてのランキングを見る */
	display: block;
	margin: 15px auto 5px auto;
	padding: 3px 0 3px 36px;
	width: 15em;
	font-weight: bold;
	color: #2E4E63;
	background: url("/images/special/icon_open-b.png") 0 0 no-repeat;
	background-size: 26px;
	line-height: 1.2;}
.init-hidden { display:none;}

/**************************************************
	section#outline 目次
**************************************************/
section#outline {
	padding: 40px 0 0 0;
	border: none;}
section#outline h5 { display: none;}
section#outline ul {
	width: 700px;
	position: relative;
	margin: 0 auto;
	padding: 10px 10px;
	border-radius: 0;
	line-height: 1.75;
	border-width: 1px 0;
	border-style: solid;
	border-color: #ccc;
	}
	section#outline ul:before {
		content:"目次";
		display: block;
		margin: 5px 0 4px 10px;
		padding: 2px 10px;
		border-left: #42a420 3px solid;
		letter-spacing: .1em;
		line-height: 1;}
section#outline ul li {
	margin-left: 10px;}
section#outline ul li a {
	display: inline-block;
	padding-left: 12px;
	background: url("/images/common/gray-arrow.png") 0 center no-repeat;
	background-size: 5px auto;
	text-decoration: none;
	color: #3f9322;}
section#outline ul li:first-child {/* */
	margin-left: 5px;
	padding-left: 5px;
	padding-bottom: 0px;
	margin-bottom: 0px;}
section#outline ul li:first-child span {
	display: inline-block;
	margin-bottom: 5px;
	padding: 2px 10px;
	border-left: #42a420 3px solid;
	letter-spacing: .1em;
	line-height: 1}


/**************************************************
	section#ranking ランキング
**************************************************/
section#ranking {}
section#ranking ul.comparable {}
section#ranking ul.comparable > li {/* 商品枠 */
	padding: 20px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 8px;}
section#ranking .product-logo img { 
	width: 120px;
	height: auto;}

/**************************************************
	section#by-type カードローンを扱う金融機関の種類とそれぞれの特徴は？
**************************************************/
#maincontents > section#by-type.articles { 
	padding-bottom: 80px;
	border-top: 50px solid #fff;}
#by-type > div { position:relative;}
#by-type > div.listBox > label {
	position: absolute;
	display: inline-block;
	top: 0;
	padding: 0.75em 0;
	line-height: 1;
	color: #000;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	border-left: 1px solid #aaa;
	background-color: #f3f3f3;
	text-align: center;
	cursor:pointer;}
#by-type > div.listBox > label:nth-of-type(1) {
	left:0;
	width: 15em;}
#by-type > div.listBox > label:nth-of-type(2) {
	left: 15em;
	width: calc(100% - 30em);}
#by-type > div.listBox > label:nth-of-type(3) {
	right: 0;
	border-right: 1px solid #aaa;
	width: 15em;}
#by-type > div.listBox > label:hover {background-color:#ddd;}
#by-type > div.listBox > label.selected {
	background-color: #fff;
	border-bottom:none;}
#by-type > div.listBox > ul {
	display:none;
	background-color:#fff;
	padding: 80px 40px 20px 40px;
	border: 1px solid #aaa;}
section#by-type > div.listBox > ul > li {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin-bottom: .5em;}
section#by-type > div.listBox > ul > li span.product-logo { 
	display: block;
	width: 160px;
	margin-right: 30px;}
section#by-type > div.listBox > ul > li div { width: calc(100% - 180px);}
#by-type .product-logo img {/* ロゴ */ width:160px;}

/**************************************************
	ランキング: section.rankingBox
**************************************************/

section.ranking div.message {/* 該当データはありません*/}
section.ranking div.message > p {}
ul.guardWording {
	color:#666;}

/****************************************************************************************************/

/**************************************************
	section#knowledge カードローンの基礎知識
**************************************************/
section#knowledge dl > div {}
section#knowledge dl > div > dt {}
section#knowledge dl > div > dt h3 {}
	section#knowledge dl > div > dt h3:before {}
section#knowledge dl > div > dd {}
/*  */

section#knowledge dl dl { /* 本文枠 */}
section#knowledge dl dd,
section#knowledge dl p { }
section#knowledge h4,
section#knowledge h5 {
	margin: 0.75em 0 0.25em 0;
	font-size: var(--fs-m);
	font-weight: bold;}
/**************************************************
	section#howto カードローンの選び方のポイント
/**************************************************/
section#howto > div.section1 {/* カードローンを選ぶ際のポイントをご紹介！ */}
section#howto > div.section2 {/* カードローンを利用する人が知っておくべきポイント */}
section#howto > div.section3 {/* まとめ */}
section#howto div.section h4 {
		margin: 2em 0 .5em 0;
		padding: 0 0 0 0;
		font-weight: bold;
		line-height: 1;
		letter-spacing: 0;
		color: #333;}
		section#howto div.section li:nth-child(1) h4 { margin-top: 1.5em;}
section#howto div.section h5 {
		margin: 1.5em 0 .5em 0;
		padding: 0 0 0 0;
		font-weight: bold;
		line-height: 1;
		letter-spacing: 0;
		color: #555;}
section#howto div.section h5:before {
		content: "";
		display: inline-block;
		width: .75em;
		height: .75em;
		margin: 0 .3em 0 0;
		background-color: green;
		vertical-align: middle;
		border-radius: 0;}
section#howto div.section > img,
	section#howto div.section > div > img { 
		height: 250px; 
		margin: 5px 0 20px 0;
		object-fit: cover;}
section#howto div.section ul ul li {
			line-height: 1.4;
			margin: 10px 0;}
section#howto div.section ul ul span { display: block;}
section#howto div.section ul ul span.lender_name { font-weight: bold}
section#howto div.section ul ul a { color: #3f9322;}
	

/**************************************************
	section#faq  カードローンに関するよくある質問
**************************************************/
section#faq > dl {
	padding: 0;
	background-color: transparent;
	border: none;
	border-radius: 0;}
section#faq > dl > div { padding: 0 0;}
section#faq > dl > div > dt { 
	background-color: #f6f6f6;
	border-bottom: 1px solid #ececec;}
section#faq dd {}
section#faq dt,
	section#faq dd {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: space-between;
	padding: 15px;
}
section#faq dt { align-items: center;}
section#faq dt > em,
	section#faq dd > em { /* トピック番号 */
	display: block;
	width: 38px;
	height: 36px;
	margin: 0 15px 0 0;
	padding: 6px;
	font-family: 'Josefin Sans';
	font-weight: 500;
	color: #FFF;
	border-radius: 4px;
	text-align: center;
	white-space: nowrap;
}
section#faq dt > em { background-color: #f28d33;}
section#faq dd > em { background-color: #6fb42c /*#CC0000*/ ;}
section#faq dt > span, 
	section#faq dd > span { /* 本文枠 */
	display: block;
	width: calc(100% - 70px);
	padding: 10px 0;}
section#faq dt > span {
	font-weight: bold;
	color: #f0800f;
	line-height: 1.1;}
section#faq dd > span { 
	line-height: 1.6;
	padding-top: 0;}
/**************************************************
	section#flow  カードローンの借り入れまでの流れ
**************************************************/

/**************************************************
	section#article カードローンに関する記事
**************************************************/
/**************************************************
	section#article カードローンお役立ち記事（ELタイムズ＋FPアドバイス）
**************************************************/
#maincontents > section#article { 
	padding: 40px 40px 80px 40px; }
ul.recentArticles {
	margin: 0 0 20px 0;}
section#article ul.recentArticles > li {/* 記事枠 */
	position: relative;
	display: block;
	padding: 40px;}
	/* タイトルまわり */
ul.recentArticles > li > span:first-child {/* new */
	position: absolute;
	display: block;
	top: 40px;
	right: 40px;
	width: 80px;
	height: 80px;
	background: url("/images/special/tag_new-g.png") top right no-repeat;
	background-size: auto;
	background-size: contain;
	text-indent: -9999px;}
ul.recentArticles > li > img {
	display: inline-block;
	margin: 0;
	height: 250px;
	object-fit: cover;}

ul.recentArticles > li > h4 + span {/*コーナータイトル*/ 
	margin: 12px 0 6px 0;
	display: block;
	text-align: right;
	font-weight: bold;}
section#article time { padding: 0 0;}
section#article ul.recentArticles > li > time + h4 { padding-top: 0;}

ul.recentArticles li.eloan_times {}
ul.recentArticles li.fp_advice {}

	/* 記事レイアウト */
ul.recentArticles li > div:nth-of-type(1) {
	position: relative;
	margin-top: 20px;
	max-height: 250px;
	overflow: hidden;
}
	ul.recentArticles li.fp_advice  > div:nth-of-type(1){ max-height: 150px;}
ul.recentArticles li > div:nth-of-type(1)::after {
	content: "";
	height: 100%;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	background: linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0));
	z-index: 2;
}
ul.recentArticles li > div > a {/* すべて読む */
	position: absolute;
	width: 20em;
	left: calc(50% - 10em);
	bottom: 0;
	z-index: 9;}
	/* 大見出し */
ul.recentArticles > h4 {
	line-height: 1.1;
	min-height: 2em;
	font-weight: bold;
	margin: .25rem 0 .25rem 0;
	padding: 0 0 0 38px;
	color: #333;
	position: relative;}
ul.recentArticles > h4:before {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	margin: 0 0;
	padding: 0 0;
	background-image: url("/images/div/il_title-green.png");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: contain;}
	/* 各コーナー先頭囲み */
ul.recentArticles li.fp_advice > dl {
	display: table;
	margin: 14px 0 .5em 0;
	padding: .5em;
	background: #f0f0f0;
	border-radius: 8px;}
ul.recentArticles li.fp_advice > dl > dt,
	ul.recentArticles li.fp_advice > dl > dd {
		display: table;
		position: relative;
		padding: 10px 20px 10px 0;
		margin: 0;}
	ul.recentArticles li.fp_advice > dl > dd {
		border-top: 1px solid #ccc;}
ul.recentArticles li.fp_advice > dl > dt > em,
	ul.recentArticles li.fp_advice > dl > dd > em {
	font-family: 'Josefin Sans';
	font-weight: 400;
	font-size: 40px;
	display: table-cell;
	vertical-align: middle;
	width: 80px;
	text-align: center;
	color: #aaa;}
	ul.recentArticles li.fp_advice > dl > dd > em { color: #6fb42c;}
ul.recentArticles li.fp_advice > dl > dt > span,
	ul.recentArticles li.fp_advice > dl > dd > span {
	position: relative;
	display: table-cell;
	height: auto;
	width: auto;
	color: inherit;
	line-height: inherit;
	letter-spacing: 0;
	text-align: left;
	background-color: transparent;}
ul.recentArticles li > div:nth-of-type(1) img { display: none;}
		/* コーナーへのリンク */
section#article ul.linkList {/* リンクボタン */
	margin: 0 auto;
	padding: 0;
	width: 70%;
	border: none;
	display: flex;}
	section#article ul.linkList li {
		display: block;
		flex-basis: 50%;
		margin: 0 .5em;}
	section#article ul.linkList a.link {
	margin: 0 .25em;
	width: auto;}
/**************************************************
	section#dictionary カードローン用語集
**************************************************/
#maincontents > section#dictionary.articles { 
	padding-bottom: 80px;}
section#dictionary ul {
	display: flex;
	flex-wrap: wrap;}
section#dictionary li {
	margin: 0 10px 20px 10px;
	padding: 20px 30px 20px 30px;
	flex-basis: calc(100% / 2 - 20px);
	max-width: calc(100% / 2 - 20px);
	background-color: #fff;
	/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);*/
	border: 1px solid #ccc;
	border-radius: 6px;}
	/* タイトル */ 
section#dictionary ul li > em {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 0 10px 0;
	margin-bottom: 15px;
	text-decoration: none;
	border-bottom: 1px solid #ccc;}
section#dictionary span.name_kana {
	order: 2;
	display: block;
	font-size: var(--fs-s);}
section#dictionary span.name {
	display: block;
	order: 1;
	margin: 0 .5em 0 0;
	font-weight: bold;}
section#dictionary p {
	margin-top: .5em;}
section#dictionary time { padding-top: 0;}
section#dictionary a.link{/*ローン大辞典*/
	width: 40em;}

/**************************************************
	section.articles 読み物コンテンツの文字修飾
**************************************************/
section#knowledge dd u,
section#faq dd p u,
section#flow dd u {
	display: inline;
	background: url("/images/div/ulw-red.png") bottom repeat-x;
	background-size: auto;
	background-size: 20px;
	text-decoration: none;
	padding: 0 2px 2px 2px;}
section#knowledge dd em,
section#faq dd p em,
section#flow dd em,
.product-desc em {
	display: inline;
	font-style: normal;
	background: linear-gradient(transparent 20%,#ff6 60%,transparent 100%);
	padding: 0 4px 0 4px;}

	/* グレイ囲み */
section#howto div.section ul ul,
section#knowledge > dl > div > dd > dl,
section#flow > dl > dd > dl {
	margin: .5em 0;
	padding: .75em .75em;
	background-color: #f2f2f2;
	border: 1px solid #bbb;
	border-radius: 5px;
	/*box-shadow: #e5e5e5 0 3px 2px 0;*/}
section#knowledge > dl > div > dd > dl dt,
section#flow > dl > dd > dl dt {
	line-height: 1.1;
	font-size: 20px;
	font-weight: bold;
	margin: 1em 0 .25em 0;
	padding: 0 0 .5em .25em;
	background-image: url("/images/div/line-green.png");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: contain;}
section#knowledge > dl > div > dd > dl dd,
section#flow > dl > dd > dl dd {padding-top: .25em;}

section#knowledge > dl > div > dd > dl dt:nth-of-type(1),
section#flow > dl > dd > dl dt:nth-of-type(1) { margin-top:0.5em;}
	/* 記事内の表 */
section#faq > dl > div > dd table,
	section#knowledge > dl > div > dd table {
	margin: .5em auto .5em auto;
	width: auto;
	max-width: 100%;
	background-color: #fff;}

section#faq > dl > div > dd caption,
	section#knowledge > dl > div > dd caption {
	text-align: center;}
section#faq > dl > div > dd th,
	section#faq > dl > div > dd td,
section#knowledge > dl > div > dd th,
	section#knowledge > dl > div > dd td {
		padding: 0.25em 1em;
		vertical-align: middle;
		white-space: nowrap;}
section#faq > dl > div > dd thead th,
	section#knowledge > dl > div > dd thead th { 
		background-color: #f3f3f3;}
section#faq > dl > div > dd tbody th,
section#knowledge > dl > div > dd tbody th {
	background-color: #f9f9f9;
	min-width: 6em;}
section#faq > dl > div > dd th,
section#faq > dl > div > dd td,
	section#knowledge > dl > div > dd th,
	section#knowledge > dl > div > dd td {
	border: 1px solid #ddd;}
section#faq > dl > div > dd thead th,
	section#knowledge > dl > div > dd thead th { text-align: center;}
section#faq > dl > div > dd .left,
	section#knowledge > dl > div > dd .left { text-align: left;}
section#faq > dl > div > dd .center,
	section#knowledge > dl > div > dd .center { text-align: center;}
section#faq > dl > div > dd .right,
	section#knowledge > dl > div > dd .right { text-align: right;}
	/* リスト */
section.articles ul.disc {
	display: block;
	list-style-type: none;
	margin: .5em 0 .5em .5em;
	padding: 0;}
section.articles ul.disc li {
	list-style-type: none;
	margin: 0 0 0 1em;
	padding: 0;
	text-indent: -1em;}
section.articles ul.disc li:before {
	content: "";
	display: inline-block;
	width: .75em;
	height: .75em;
	margin: 0 .5em 0 0;
	background-color: green;
	border-radius: 2em;
	vertical-align: middle;
}


/* ***************** ***************** ***************** *****************
   ***************** ***************** ***************** *****************
	#maincontents > section#ranking 
 ***************** ***************** ***************** *****************
 ***************** ***************** ***************** *****************/
#maincontents > section#ranking { 
	padding-top: 40px;
	padding-bottom: 60px;
	box-shadow: 0px 8px 3px rgba(0,0,0,.15);}
section#ranking h2 {/* title */
	 margin: 0 auto;
	 padding: 55px 0 32px 0;
	 width: 970px;
	 font-size: 32px;
	 font-weight: bold;
	 text-align: center;
	 color: #fff;
	 background: url("/images/special/ttl_ranking_bg-pc.png") 0 0 no-repeat;
	 background-size: 970px 119px;
	 line-height: 1;}
 section#ranking time {
	 display: block;
	 margin: 0 0;
	 padding: 10px 40px 0 0;
	 text-align: right;
	 font-weight:bold;
	 color: #2E4E63;}
section#ranking ul { padding: 0 40px;}
section#ranking ul > li {/* １商品分 */
	margin: 0 0 1px 0;
	padding: 10px;
	background-color: #eee}
	/* article内の要素のグリッド配置 */
section#ranking article {
	position: relative;
	margin: 0 0;
	padding: 20px 40px;
	line-height: 1;
	border-radius: 5px;
	background: #fff;
	/*box-shadow: 1px 2px 8px rgba(0,0,0,.1);*/
	display: grid;
	grid-template-columns: 140px 1fr;
	grid-template-rows: auto auto auto auto auto auto auto;
	grid-template-areas: 
		"areaA areaC"
		"areaB areaD"
		"areaB areaE"
		"areaB areaF"
		"areaB areaG"
		"areaB areaH"
		"areaB areaI";}
section#ranking article > span,
section#ranking article > dl,
section#ranking article > ul,
section#ranking article > div { display: block;}
span.product-box-rank { grid-area: areaA;}
span.product-rank-status { grid-area: areaB;}
span.product-logo { grid-area: areaC;}
span.product-product-name { grid-area: areaD;}
span.product-lender-name { grid-area: areaE;}
dl.product-spec { grid-area: areaF;}
div.product-button.button1 { grid-area: areaG;}
dl.product-desc { grid-area: areaH;}
ul.product-tags  { }
div.product-button.button2 { grid-area: areaI;}

 /* 背景色 */
section#ranking ul li { background: #DCE4E9;}
section#ranking ul li.rank-1 { background: linear-gradient(20deg, #9B8924 0%, #E8CA2D 50%, #f0e7b7 100%);}
section#ranking ul li.rank-2 { background: linear-gradient(20deg, #5b6168 0%, #ddd 50%, #fdfdfd 100%);}
section#ranking ul li.rank-3 { background: linear-gradient(20deg, #B97B3E 0%, #DDA362 50%, #FDF9F4 100%);}
	 /* 順位アイコン */
section#ranking ul li article > span.product-box-rank {/* 第n位*/
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 width: 100px;
	 height: 76px;
	 background: url("/images/special/label-rank.png") center center no-repeat;
	 background-size: contain;
	 color: #fff;
	 font-size: 32px;
	 font-weight: bold;}
	 section#ranking ul li.rank-1 article > span.product-box-rank { background-image: url("/images/special/label-rank1.png");text-indent: -200vw;}
	 section#ranking ul li.rank-2 article > span.product-box-rank { background-image: url("/images/special/label-rank2.png");text-indent: -200vw;}
	 section#ranking ul li.rank-3 article > span.product-box-rank { background-image: url("/images/special/label-rank3.png");text-indent: -200vw;}
	 section#ranking ul li.rank-4 article > span.product-box-rank { background-image: url("/images/special/label-rank4.png");text-indent: -200vw;}
	 section#ranking ul li.rank-5 article > span.product-box-rank { background-image: url("/images/special/label-rank5.png");text-indent: -200vw;}
	 section#ranking ul li.rank-6 article > span.product-box-rank { background-image: url("/images/special/label-rank6.png");text-indent: -200vw;}
	 section#ranking ul li.rank-7 article > span.product-box-rank { background-image: url("/images/special/label-rank7.png");text-indent: -200vw;}
	 section#ranking ul li.rank-8 article > span.product-box-rank { background-image: url("/images/special/label-rank8.png");text-indent: -200vw;}
	 section#ranking ul li.rank-9 article > span.product-box-rank { background-image: url("/images/special/label-rank9.png");text-indent: -200vw;}
	 section#ranking ul li.rank-10 article > span.product-box-rank { background-image: url("/images/special/label-rank10.png");text-indent: -200vw;}
section#ranking span.product-rank-status { 
	 width: 100px;
	 height: 74px;
	 background: url("/images/special/status-stay.png") center bottom no-repeat;
	 background-size: 54px;
	text-indent: -1000vw;}
	section#ranking span.product-rank-status.up { background-image: url("/images/special/status-up.png");}
	section#ranking span.product-rank-status.down { background-image: url("/images/special/status-down.png");}
	section#ranking span.product-rank-status.stay { background-image: url("/images/special/status-stay.png");}
	section#ranking span.product-rank-status.new { background-image: url("/images/special/status-new.png");}
section#ranking span.product-logo { 
	width: 160px;
	display: flex;
	align-items: center;}
	 section#ranking span.product-logo > img { 
		width: 160px;
		height: 60px;}
	 /* 商品情報 */
section#ranking span.product-product-name {/* 商品名 */
	margin: 10px 0 0 0;
	line-height: 1.1;
	font-size: var(--fs-xl);
	font-weight: bold;
	letter-spacing: -0.01em;}
section#ranking span.product-lender-name {/* 金融機関名 */
	margin: 10px 0 0 0;
	line-height: 1.1;
	font-size: var(--fs-l);
	letter-spacing: -0.01em;
	color: #000;}
	
section#ranking dl.product-spec {/* スペック表 */
	margin: 15px 0 0 0;
	width: 100%;
	line-height: 1.1;
	font-size: var(--fs-l)}
	 section#ranking dl.product-spec > div { 
		 display: flex;
		 flex-wrap: nowrap;
		 margin: 0 0 5px 0;}
	 section#ranking dl.product-spec > div > dt { width: 7em;}
	 section#ranking dl.product-spec > div > dd { 
		 width: calc(100% - 7em);
		 color: #f28d33;
		font-weight: bold;}

/* 不掲載商品：deactive */
section#ranking ul > li.deactive { filter: grayscale(100%);}
section#ranking ul > li.deactive article > span { 
	display: flex;
	align-items: center;}
/* 掲載休止商品：not-published */
section#ranking li.not-published article {
	grid-template-rows: auto auto auto auto auto auto;
	grid-template-areas: 
		"areaA areaD"
		"areaA areaE"
		"areaB areaH";}
section#ranking li.not-published span.product-product-name { margin-top: 0;}

 /* SP時は不可視 */
.product-desc { }
.product-desc > div{
	margin: 10px 0 0 0;
	padding: 10px 20px;
	border-radius: 4px;
	background-color: #eee;
	background-position: top 10px right 10px;
	background-repeat: no-repeat;
	background-size: 80px;
}
.product-desc-pr-text {/* 金融機関からのおすすめポイント */ background-image: url("/images/special/icon_points.png");}
.product-desc-diagnosis-tool {/*お借入診断ツール*/ background-image: url("/images/special/icon_radar.png");}
.product-desc-interest-free-service {/*無利息サービス*/ background-image: url("/images/special/icon_rate.png");}
.product-desc-specialityt{/*特徴*/ background-image: url("/images/special/icon_approval.png");}
.product-desc-ai-explanation {/*生成AI*/ background-image: url("/images/special/icon_ai.png");}

.product-desc > div > dt {/* テキストボックス内タイトル */
	font-weight: bold;
	color: #000;
	line-height: 1.5;}
.product-desc > div > dd { line-height: 1.5;}

 /* みんなのクチコミ */
.product-desc > div.product-desc-kuchikomi { background-color: #7498ab;}
.product-desc > div.product-desc-kuchikomi > dt { color: #fff;}
section#ranking .product-desc-kuchikomi ul { margin: 0 0; padding: 0 0;}
section#ranking .product-desc-kuchikomi ul li { 
	margin: 5px 0;
	padding: 10px 20px;
	border-radius: 4px;
	background-position: bottom -10px right 10px;
	background-repeat: no-repeat;
	background-size: 100px;
	background-color: #fff;
	background-image: url("/images/special/icon_kuchikomi-050.png");}
/* 口コミ★*******************************************************************/
.product-desc-kuchikomi-satisfaction-level > span:nth-of-type(2) {
	position: relative;
	z-index: 0;
	display: inline-block;
	white-space: nowrap;
	color: #ccc;
}
.product-desc-kuchikomi-satisfaction-level > span:nth-of-type(2):before,
.product-desc-kuchikomi-satisfaction-level > span:nth-of-type(2):after {
	content:'★★★★★';
}
.product-desc-kuchikomi-satisfaction-level > span:nth-of-type(2):after {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #ffcf32;
}
.product-desc-kuchikomi-satisfaction-level > span:nth-of-type(2)[data-rate="5"]:after{ width: 100%; }
.product-desc-kuchikomi-satisfaction-level > span:nth-of-type(2)[data-rate="4"]:after{ width: 80%; }
.product-desc-kuchikomi-satisfaction-level > span:nth-of-type(2)[data-rate="3"]:after{ width: 60%; }
.product-desc-kuchikomi-satisfaction-level > span:nth-of-type(2)[data-rate="2"]:after{ width: 40%; }
.product-desc-kuchikomi-satisfaction-level > span:nth-of-type(2)[data-rate="1"]:after{ width: 20%; }
.product-desc-kuchikomi-satisfaction-level > span:nth-of-type(2)[data-rate="0"]:after{ width: 0%; }


section#ranking ul.product-tags {/* タグ */
	display: flex;
	position: absolute;
	top: 20px;
	right: 40px;
	margin: 0 auto;
	padding: 0 0;
	line-height: 1.2;
	font-size: 14px;}
section#ranking ul.product-tags li {
	margin: 0 1px;
	padding: 3px 4px;
	display: inline-block;
	background: #8396b3;
	border-radius: 3px;
	color: #fff;}


	/**/
section#ranking div.product-button { width: 100%;}
	section#ranking div.product-button.button1 { margin: 10px 0 10px 0;}
	section#ranking div.product-button.button2 { margin: 20px 0 0 0;}

.btn-add { display: none;}
section#ranking div.product-button > div > a {
	display: block;
	margin: 0 auto;
	padding: 1em 0 0.8em 0;
	max-width: 30em;
	font-size: var(--fs-m);
	font-weight: bold;
	text-align: center;
	color: #fff;
	background-color: #c00 !important;
	letter-spacing: .5em;
	border-radius: 2em;
	cursor: pointer;}


section#ranking ul.guardWording {
	margin: 0 0;
	padding: 40px 40px 0 40px;
	color: #666;}
section#ranking ul.guardWording > li {
	 margin: 0 0 0 1em;
	 padding: 0 0;
	 text-indent: -1em;
	 background-color: transparent;}
section#ranking ul.guardWording > li:before { content: "※";}
section#ranking ul.guardWording > li a { color: #3f9322;}
section#ranking ul.guardWording li dl {
	margin: .25em 0 .25em 1em;
	text-indent: 0;
	font-size: 16px
}
section#ranking ul.guardWording li dl div {
	display: flex;
}
section#ranking ul.guardWording li dt { flex-basis: 7em;}
section#ranking ul.guardWording li dd { flex-basis: calc(100% - 7em);}
section#ranking ul.guardWording li dd ul { 
	margin: 0 0;
	padding: 0 0;
}
section#ranking ul.guardWording li dd ul li {
	margin: 0;
	padding: 0;
	background: transparent;
} 


/* モーダルウィンドウ内 */
div.product-popup-rank-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0px 12px;
	padding: 0.5em 1em;
	border-radius: 6px;
	line-height: 1;
	background: #eee url("/images/special/icon_ai.png") top 10px right 10px/80px no-repeat;}
span.product-popup-rank-box-rank,
	span.product-popup-rank-box-rank span,
	span.product-popup-rank-box-status { 
	display: inline-block;}
span.product-popup-rank-box-rank { 
	font-size: 16px;
	font-weight: bold;}
span.product-popup-rank-box-rank span /*順位*/{
	margin: 0 .5em;
	padding: .4em .5em .25em .5em;
	text-align: center;
	color: #fff;
	background: #9FB8C5;}
	div.rank-1 span.product-popup-rank-box-rank span { background: #E8CA2D;}
	div.rank-2 span.product-popup-rank-box-rank span { background: #aaa;}
	div.rank-3 span.product-popup-rank-box-rank span { background: #D58835;}

span.product-popup-rank-box-status {
	width: 35px;
	height: 35px;
	background: url("/images/special/status-stay.png") center bottom no-repeat;
	background-size: contain;
}
	span.product-popup-rank-box-status.up { background-image: url("/images/special/status-up.png");}
	span.product-popup-rank-box-status.down { background-image: url("/images/special/status-down.png");}
	span.product-popup-rank-box-status.stay { background-image: url("/images/special/status-stay.png");}
	span.product-popup-rank-box-status.new { background-image: url("/images/special/status-new.png");}

div.product-popup-rank-box-comment {
		display: inline-block;
		width: 100%;
		line-height: 1.4;}
		div.product-popup-rank-box-comment span:nth-child(2):before { content:"（";}
		div.product-popup-rank-box-comment span:nth-child(2):after { content:"）";}
div.product-popup-rank-box + .modal.modal-loan div.basic-info > dl { margin-top: 0;}
.modal.modal-loan div.button a[data-link="appl-1"] { background-color: red !important;}