@charset "UTF-8";
/*
00 index.html トップページ
01 guide.html 初めてのガイド
02 ranking/ おすすめランキング
03 column/ 借りる前に知りたいコト
04 category.html カテゴリページ
05 service detail　各サービス
06 search　検索
xx simulation_borrow/　借入シミュレーション
xx author.html　監修

PC 1000px↑
@media (min-width: 1000px){
TAB 768px↑
@media (min-width: 768px){
SP 375px↓
@media (max-width: 374px){
*/

/*--
--00 index.html
--*/

.catchWrap{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
}
.catchImg{
	margin: 0 auto;
}
.catchImg img{
	width:100%;
	height:auto;
}
#topCatch{
	margin-bottom: 20px;
}
@media (min-width: 768px){
	.catchImg {
		display: block;
		width: 100%;
		max-width: 800px;
		background: url('/img/index/catch_pc.jpg') 50% 0/contain no-repeat;
		aspect-ratio: 800 / 320;
	}
	.catchImg img{
		display: none;
	}
	#topCatch{
		width: 720px;
		margin: 10px auto 0;
	}
}
@media (min-width: 1000px){
}
#topLimit{
	margin: 10px;
	padding: 10px;
	color: var(--tx-sub);
	font-size: 1.2em;
	font-weight: bold;
}
#topLimit div{
	color: #45757b;
	margin-bottom: 5px;
}
#topLimit p{
	padding: 2px 10px;
	margin: 0 auto;
	border-radius: 4px;
	display: inline-block;
	color: #6b4f42;
	background: #f4ec70;
	font-size: 1.1em;
}
#topLimit p span{
	padding: 0 2px;
	font-size: 1.4em;
	color: #f86c65;
}
@media (min-width: 768px){
	#topLimit > div{
		display: inline-block;
		padding: 0 5px;
		border-bottom: 2px solid var(--line-yel);
	}
}

#topBubble{
	font-size: 1.2em;
	font-weight: bold;
	position: relative;
	width: fit-content;
	padding: 10px 12px;
	margin: 0 auto 5px;
	border-bottom: 2px solid #333333;
}
@media (min-width: 768px){
	#topBubble {
		font-size: 1.4em;
	}
}
#topBubble::after {
	content: "";
	position: absolute;
	top: calc(100% + 5px);
	left: 50%;
	width: 30px;
	height: 2px;
	box-sizing: border-box;
	background-color: #333333;
	box-shadow: 0 2px 0 #ffffff, 0 -2px 0 #ffffff;
	rotate: 50deg;
	translate: -25%;
}
.topSearchWiz .tswBox{
	padding:15px 10px;
	border:1px solid #e5e7eb;
	border-radius:8px;
	background:#fff;
	box-sizing: border-box;
}
.topSearchWiz .tswProgress{
	gap: 8px;
	margin: 0 0 10px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}
.topSearchWiz .tswDot{
	width:10px;height:10px;border-radius:50%;
	background:#d1d5db;
}
.topSearchWiz .tswDot.is-active{ background:#68b8d8; }

.topSearchWiz .tswStep{ display:none; }
.topSearchWiz .tswStep.is-active{ display:block; }
.topSearchWiz .tswList{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.topSearchWiz .tswList li{
	width: 49%;
}
.topSearchWiz .tswList li label{
	font-size: 1.2em;
	font-weight: bold;
	color: #fff;
	background: var(--c-main);
}

.topSearchWiz .tswList li label input[type="radio" i] {
	background-color: #555;
}
.topSearchWiz .tswItem{
	display:flex;
	align-items:center;
	gap:10px;
	padding:12px;
	border:1px solid #e5e7eb;
	border-radius:10px;
	margin:0 0 10px;
	cursor:pointer;
}
.topSearchWiz .tswItem input{ transform:scale(1.1); }
.tswItem input{
	display: none;
}
.tswItem:hover > .dummy{
	background: #fff;
}
.tswItem:hover > .dummy::before{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--c-sub);
}
.tswItem input:focus + .dummy {
	background: #555;
}
.tswItem input:checked + .dummy{
	background: #fff;
}
.tswItem input:checked + .dummy::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--c-sub);
}
.dummy {
	position: relative;
	top: 0;
	left: 0;
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #bbecfd;
	border: dashed 2px transparent;
}
.topSearchWiz .tswSummaryTitle{
	color: #475569;
	display: block;
	wifth: 100%;
	text-align: center;
	font-size: .9em;
}
.topSearchWiz .tswSummary{
	font-size:12px;
	color:#475569;
	margin:0 0 12px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}
.topSearchWiz .tswSummary p{
	display: block;
	width: 100%;
}
.tswTitle{
	font-size: 1.4em !important;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
}
.tswTitle span{
	background: linear-gradient(135deg, var(--line-blu) 10%, var(--line-yel) 100%) bottom / 100% 12px no-repeat;
}
.tswSummary{
	margin: 0 auto;
}
@media (min-width: 768px){
	.topSearchWiz .tswBox{
		max-width: 700px;
		margin: 0 auto;
	}
	.topSearchWiz .tswList{
		justify-content: flex-start;
	}
	.topSearchWiz .tswList li{
		width: 24.5%;
		padding: 0 .25%;
	}
}

.topGuide{
	margin: 20px auto;
	padding: 0 10px;
	max-width: 600px;
}
.topGuideInner{
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px 10px;
	background: var(--bg-cream);
	border: 1px solid var(--line-soft);
	border-radius: 8px;
}
.topGuideText{
	flex: 1;
}
.topGuideCatch{
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.5;
	color: var(--tx-main);
}
.topGuideBtn{
	display: inline-flex;
    justify-content: center;
	align-items: center;
    width: 50%;
	gap: 8px;
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 800;
	color: var(--tx-gray);
	text-decoration: none;
	border: 1.5px solid var(--line-soft);
	border-radius: 999px;
	background: #ffffff;
}
.topGuideBtn:hover{
	transform:translateY(1px);
}
.topGuideBtn:active{
	transform: translateY(1px);
}
.topGuideBtn span{
	font-size: 18px;
	line-height: 1;
}
.topGuideImage{
	flex-shrink: 0;
	width: 60px;
}
.topGuideImage img{
	height: auto;
	display: block;
}
@media (min-width: 768px){
	.topGuideInner{
		width: 500px;
		margin: 0 auto;
	}
	.topGuideCatch .sp-only{
		display: none;
	}
}
@media (min-width: 1000px){
}


/* =========================
   人気の条件
   ========================= */
.topPopular{
	margin: 20px auto;
	padding: 0 10px;
}
.topPopular > div{
	background: var(--bg-gray);
	border: 1px solid var(--line-soft);
	border-radius: 8px;
	padding: 15px;
}
.topPopTitle{
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 900;
	color: var(--tx-main);
	position: relative;
}
.topPopTitle{
	margin-right: 10px;
}
.topPopTitle span::before{
	content: "✅";
    font-size: 16px;
    line-height: 1;
}
.topPopInner{
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.topPopList{
	flex: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.topPopTag{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	font-size: 13px;
	font-weight: 800;
	color: var(--tx-gray);
	text-decoration: none;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 14px;
	line-height: 1.2;
}
.topPopTag:hover{
	border-color: var(--c-main);
}
.topPopTag:active{
	transform: translateY(1px);
}
.topPopTagIcon{
	width: 30px;
	height: 30px;
	flex: 0 0 20px;
	display: block;
}

@media (min-width: 768px){
	.topPopular{
		width: 800px;
		padding: 0;
		box-sizing: border-box;
	}
	#topRanking .sectionTxt p .pc-only{
		display: block;		
	}
	.topPopList {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =========================
   Ranking Section
   ========================= */
.ranking{
	background: var(--bg-cream);
	padding: 30px 0;
}
.rankBanner img{
	width: 100%;
	max-width: 300px;
	height: auto;
}
#topRanking h3{
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 900;
	color: var(--tx-main);
	letter-spacing: .03em;
	position: relative;
	padding-right: 15px;
}
#topRanking h3::before{
	content: "⭐";
	font-size: 22px;
	line-height: 1;
}
#topRanking .sectionTxt{
	margin-bottom: 30px;
}
#topRanking .sectionTxt p{
	font-size: inherit;
}

.rankCard{
	background: #fff;
	border: 1px solid var(--line-soft);
	border-radius: 18px;
	padding: 15px 12px;
	margin-bottom: 20px;
}
.rankCard.rank-1{
	padding: 15px;
	position: relative;
	border: 2px solid var(--c-link);
}
.rankCard.rank-1::before{
	position: absolute;
	display: block;
	content: '';
	width: 64px;
	height: 65px;
	background: url(../img/icon/rank_no1.png) 0 0/64px 65px no-repeat;
	top: -20px;
	left: 15px;
}
.rankCard.rank-2{
	padding: 15px;
	position: relative;
	border: 2px solid var(--line);
}
.rankCard.rank-2::before{
	position: absolute;
	display: block;
	content: '';
	width: 64px;
	height: 65px;
	background: url(../img/icon/rank_no2.png) 0 0/64px 65px no-repeat;
	top: -20px;
	left: 15px;
}
.rankCard.rank-3{
	padding: 15px;
	position: relative;
	border: 2px solid var(--line);
}
.rankCard.rank-3::before{
	position: absolute;
	display: block;
	content: '';
	width: 64px;
	height: 65px;
	background: url(../img/icon/rank_no3.png) 0 0/64px 65px no-repeat;
	top: -20px;
	left: 15px;
}
.rankHead{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 10px;
}
.rank-1 .rankHead,
.rank-2 .rankHead,
.rank-3 .rankHead{
	padding-left: 5.5em;
}
.rankTitle{
	margin: 0;
	font-size: 1.6em !important;
	font-weight: 900;
	color: var(--tx-main);
}
.rankTitle:hover{
	opacity: .7;
}
.rankCatch{
	font-weight: bold;
	font-size: 1.15em;
	line-height: 1.3;
	text-align: left;
}
.rankCatch em{
	font-weight: bold;
	color: #fb484e;
	background: linear-gradient(transparent 60%, #ffe066 60%);
}
.inner p.rankDesc{
	margin: 5px 0 10px;
	color: var(--tx-gray);
	font-size: 0.9em;
	line-height: 1.3;
	text-align: left;
	font-weight: normal;
}
.rankBanner{
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	margin-bottom: 10px;
}
.rankSpec{
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	color: var(--tx-main);
	margin: 0 0 14px;
	border: 1px solid #d1d5db;
}
.rankSpec tr{
	border-bottom: 1px solid #d1d5db;
}
.rankSpec tr:last-child{
	border-bottom: none;
}
.rankSpec th{
	width: 38%;
	padding: 10px 10px;
	text-align: left;
	font-weight: 800;
	color: var(--tx-main);
	background: #f9fafb;
	border-right: 1px solid #d1d5db;
	white-space: nowrap;
	vertical-align: middle;
}
.rankSpec td{
	padding: 10px 12px;
	font-weight: 600;
	color: #374151;
	background: #ffffff;
	vertical-align: middle;
}
.rankSpec tr:nth-child(even) th{
	background: #f3f4f6;
}
.rankSpec tr:nth-child(even) td{
	background: #f9fafb;
}
@media (max-width: 480px){
	.rankSpec{
		font-size: 12px;
	}

	.rankSpec th,
	.rankSpec td{
		padding: 9px 8px;
	}
}

.rankPoint{
	margin: 10px 0 5px;
	padding: 12px 14px 14px;
	background: #e9f6fb;
	border: 1px solid var(--c-main);
    border-radius: 4px;
}
.rankBtm{
	text-align: left;
	padding: 5px 0 10px;
}
.rankPointTl{
	text-align: center !important;
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 900;
	color: var(--tx-main);
	position: relative;
}
.rankPointTl span{
	position: relative;
	background: #fff;
	padding: 3px 10px;
	border-radius: 20px;
}
.rankPointTl span::before{
    content: "👇";
    font-size: 14px;
    line-height: 1;
	padding-right: 3px;
}
.rankPointCnt{
	list-style: none;
	margin: 0;
	padding: 0;
}
.rankPointCnt li{
	padding: 6px 0 6px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tx-gray);
	border-top: 1px dashed rgba(104,184,216,.6);
	position: relative;
	line-height: 1.5;
	text-align: left;
}
.rankPointCnt li:first-child{
	border-top: none;
}
.rankPointCnt li::before{
	content:"✓";
	position:absolute;
	left:0;
	top:6px;
	font-size: 12px;
	font-weight: 900;
	color: var(--c-main);
}
@media (max-width: 480px){
	.rankPointTl{
		font-size: 13px;
	}
	.rankPointCnt li{
		font-size: 12px;
	}
}

.ranking .btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 13px 12px;
	border-radius: 8px;
	font-size: 1.2em;
	font-weight: 900;
	text-decoration: none;
	border: 1px solid transparent;
	box-sizing: border-box;
}
.ranking .btnPrimary{
	background: var(--c-output);
	color: #fff;
}

.ranking .btnPrimary:hover{
	filter: brightness(0.85) contrast(1.2);
}

.ranking .btn-secondary{
	background: #ffffff;
	color: var(--tx-gray);
	border-color: var(--c-main);
}

.ranking .btn-secondary:hover{
	background: rgba(111,220,237,.16);
}
#rankBtn{
	margin: 18px 0 0;
	text-align: center;
}
#rankBtn a{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 900;
	color: var(--tx-gray);
	text-decoration: none;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	background: #fff;
}

#rankBtn a::after{
	content:"›";
	font-size: 18px;
	line-height: 1;
}
.rank-foot{
	margin-top: 10px;
	margin-bottom: 0px;
}
.rank-foot p{
	font-size: .8em;
	text-align: left;
}
.rank-foot .annoMark{
	font-size: .8em;
	padding-right: 2px;
}
.rank-foot ul{
	margin-top: 3px;
	margin-left: 5px;
}
.rank-foot ul li{
	text-align: left;
	font-size: .9em;
}

@media (min-width: 768px){
	.rankCard{
		padding: 20px 30px;
	}
	.rankHead{
	}
	.rankTop{
		display: flex;
		flex-flow: row nowrap;
	}
	.rankCatch {
		font-size: 1.4em;
		margin-right: 10px;
	}
	.inner p.rankDesc {
		margin-top: 10px;
		font-size: .85em;
	}
	.rankBanner img {
		width: 300px;
	}
	.rankMid{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	.rankSpec{
		width: 40%;
	}
	.rankPoint{
		width: 57%;
		margin: 0;
		padding: 10px 10px 5px;
		box-sizing: border-box;
	}
	.rankPointTl {
		margin: 0 0 5px;
	}
	.ranking .btn{
		grid-column: 2 / 3;
		width: 100%;
	}
	.rankCard.rank-1::before{
		top: -12px;
	}
}

#btnRank{
}
#btnRank a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4em;
	width: 100%;
	padding: 12px 10px;
	border-radius: 10px;
	font-weight: 900;
	text-decoration: none;
	border: 1px solid transparent;
	box-sizing: border-box;
	background: var(--c-sub);
	color: #fff;
}
#btnRank a:hover{
	background: #e97a00;
}
@media (min-width: 768px){
	.ranking{
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.ranking .inner{
		width: 800px;
	}
}

/* =========================
   借りる前に知りたいコト
   ========================= */
.knowBefore{
	margin: 32px auto;
	padding: 0 10px;
}
.knowBeforeTitle{
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 900;
	color: var(--tx-main);
	padding-left: 14px;
	position: relative;
}
.knowBeforeTitle::before{
	content: "📖";
    font-size: 20px;
    line-height: 1;
}

.knowBeforeBox{
	background: #ffffff;
	border: 1px solid var(--line-soft);
	border-radius: 8px;
	padding: 14px 14px 10px;
}

.knowBeforeList{
	list-style: none;
	margin: 0;
	padding: 0;
}

.knowBeforeList li{
	border-bottom: 1px solid var(--line-soft);
}

.knowBeforeList li:last-child{
	border-bottom: none;
}

.knowBeforeList a{
	text-align: left;
	display: block;
	padding: 12px 8px 12px 24px;
	font-size: 14px;
	font-weight: 700;
	color: var(--tx-gray);
	text-decoration: none;
	position: relative;
	line-height: 1.4;
}
.knowBeforeList a:hover{
	opacity: .8;
}
.knowBeforeList a::before{
	content:"";
	position:absolute;
	left: 8px;
	top: 18px;
	width: 6px;
	height: 6px;
	background: var(--c-main);
	border-radius: 50%;
}
.knowBeforeList li.is-hidden{
	display: none;
}
.knowBeforeToggle{
	width: 100%;
	margin-top: 8px;
	padding: 10px 0;
	border: none;
	background: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-main);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
}
.knowBeforeToggle i{
	width: 6px;
	height: 6px;
	margin: 0 0 3px;
	border-right: 2px solid var(--c-main);
	border-bottom: 2px solid var(--c-main);
	transform: rotate(45deg);
	transition: transform .25s ease;
}
.knowBeforeToggle.is-open i{
	transform: rotate(-135deg);
	margin: 5px 0 0;
}

/* =========================
   検索フォームタイトル
   ========================= */
.searchToggle{
	width: 100%;
	margin: 0 auto;
	padding: 15px 10px 10px;
	font-size: 18px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	transition: all .25s ease;
	box-sizing: border-box;
}
.searchToggle span{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-right: 20px;
}
.searchToggle span::before{
	content: "🔍";
	font-size: 20px;
	line-height: 1;
}
.searchToggle.is-open{
	cursor: default;
}
.searchForm{
	margin: 10px;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: flex-start;
	background: #ffffff;
	border: 1px solid var(--line-soft);
	border-radius: 8px;
	color: var(--tx-main);
}
.searchForm p{
	font-size:1.3em;
	font-weight: bold;
	color: #0d79ab;
	text-align: left;
	font-size: 14px;
	font-weight: 700;
	margin: 5px 0;
	color: var(--tx-gray);
}
.searchBody{
	display: none;
	margin: 0 10px 10px;
	border-top: 2px solid #12324b;
}
.searchInner{
	padding-top: 10px;
}
.searchInner select{
	width: 100%;
	padding: 10px 40px 10px 12px;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tx-main);
	border: 2px solid #e3e3e5;
	border-radius: 8px;
	background: #fff;
	appearance: none;
	outline: none;
	background-image:
		linear-gradient(45deg, transparent 50%, #6b7280 50%),
		linear-gradient(135deg, #6b7280 50%, transparent 50%);
	background-position:
		calc(100% - 18px) calc(50% - 3px),
		calc(100% - 12px) calc(50% - 3px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.searchInner select:focus{
	border-color: var(--c-main);
}
.searchInner label{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	margin: 0;
	border: 1px solid var(--line-soft);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tx-gray);
	cursor: pointer;
	user-select: none;
	background: #fff;
}
.searchInner input[type="checkbox"]{
	appearance: none;
	width: 16px;
	height: 16px;
	border: 1.5px solid #9ca3af;
	border-radius: 4px;
	position: relative;
	margin: 0;
}
.searchInner input[type="checkbox"]:checked{
	border-color: var(--c-main);
	background: var(--c-main);
}
.searchInner input[type="checkbox"]:checked::after{
	content:"";
	position:absolute;
	left:4px;
	top:1px;
	width:4px;
	height:8px;
	border-right:2px solid #fff;
	border-bottom:2px solid #fff;
	transform: rotate(45deg);
}
.searchInner button{
	width: 100%;
	margin-top: 15px;
	padding: 14px 0;
	font-size: 16px;
	color: var(--tx-sub);
	background: var(--c-link);
	border: none;
	border-radius: 8px;
	cursor: pointer;
}
.searchInner button:active{
	transform: translateY(1px);
}
.searchInner button:hover{
	background: var(--c-accent);
}
.searchResult .spinner{margin: 0 auto;}
.annoList{display:none;}
@media (max-width: 480px){
	.searchInner label{
		font-size: 12px;
		padding: 8px 10px;
	}
}
.checkGroup{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 5px;
}
.radioList {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 5px;
}

.checkBtn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid var(--line-soft);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	background: #fff;
	color: var(--tx-gray);
}
.checkBtn input{
	display: none;
}
.checkBtn input:checked + span{
	color: #fff;
	background: var(--c-main);
	border-radius: 999px;
	padding: 6px 12px;
}
@media (min-width: 768px){
	.searchBody {
		margin: 0 auto 20px;
	}
}

/*--
--01 guide.html
--*/

#guide{
	color: var(--tx-main);
	background: #fff;
}
#hGuide{
	position: relative;
}

.guide-section{
	margin-bottom: 30px;
}
.compareWrap{
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: 16px;
}
.compareCard{
	background: #fff;
	border: 1px solid var(--line-soft);
	padding: 16px 16px 14px;
}

.compareTitle{
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 900;
	color: var(--tx-main);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.compareTitle::before{
	content:"";
	width: 10px;
	height: 10px;
	background: var(--c-main);
	display: inline-block;
}
.compareMiddle{
}
.compareMiddle > p{
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	margin-bottom: 10px;
}
.compareMiddle > p img{
	width: 100%;
	max-width: 250px;
}
.compareCard:nth-child(2) .compareTitle::before{
	background: var(--c-link);
}
.compareList{
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	border: 1px solid var(--line-soft);
}
.compareList li{
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 10px;
	padding: 10px 12px;
	border-top: 1px solid var(--line-soft);
	font-size: 13px;
	line-height: 1.6;
	color: #374151;
	background: #fff;
}
.compareList li:first-child{
	border-top: none;
}
.compareList li span{
	font-weight: 900;
	color: var(--tx-gray);
	white-space: nowrap;
}
.compareRecommend{
	background: rgba(111,220,237,.14);
	border: 1px solid rgba(104,184,216,.45);
	padding: 12px 12px;
	border-radius: 8px;
}
.compareCard:nth-child(2) .compareRecommend{
	background: rgba(240,184,8,.12);
	border-color: rgba(240,184,8,.45);
}
.compareRecommend strong{
	display: inline-block;
	font-size: 1.0em;
	font-weight: bold;
	color: var(--tx-main);
	background: #fff;
    padding: 3px 10px;
    border-radius: 20px;
	margin-bottom: 5px;
}
.compareRecommend strong::before {
	content: "👇";
	font-size: 14px;
	line-height: 1;
	padding-right: 3px;
}
.compareRecommend p{
	margin: 0;
	font-size: 1.1em;
	line-height: 1.6;
	color: #374151;
}
@media (min-width: 768px){
	.compareWrap{
		grid-template-columns: 1fr 1fr;
		gap: 18px;
	}
	.compareList li{
		grid-template-columns: 140px 1fr;
		font-size: 14px;
	}
}

@media (min-width: 1000px){
}

/* =========================
	Flow (申し込みから利用まで)
========================= */

#guideFlow{
	background: var(--bg-cream);
	padding: 30px 0px;
}
.flowWrap{
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 16px;
}

.flowStep{
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 12px;
	align-items: start;
	border: 1px solid var(--line-soft);
	background: #fff;
	padding: 14px 14px;
}

.flowNumber{
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	font-weight: 900;
	color: var(--tx-main);
	background: rgba(104,184,216,.22);
	border: 1px solid rgba(104,184,216,.45);
	border-radius: 50%;
}

.flowStep:nth-child(2) .flowNumber{
	background: rgba(240,184,8,.18);
	border-color: rgba(240,184,8,.45);
}

.flowStep:nth-child(3) .flowNumber{
	background: rgba(111,220,237,.18);
	border-color: rgba(111,220,237,.45);
}

.flowContent h3{
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 900;
	color: var(--tx-main);
}

.flowContent p{
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: #374151;
}

@media (min-width: 1000px){
	.flowWrap{
		grid-template-columns: repeat(3, 1fr);
		gap: 14px;
	}
	.flowStep{
		grid-template-columns: 46px 1fr;
	}
}

/* =========================
	Immediate (即日融資)
========================= */
#guideImmediate .imgWrap{
	display: flex;
	flex-flow: row wrap;
}
#guideImmediate img{
	margin: 0 auto;
	width: 100%;
	max-width: 250px;
}
.immediatePoints{
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 16px;
}

.immediateCard{
	border: 1px solid var(--line-soft);
	background: #fff;
	padding: 14px 14px;
	position: relative;
}

.immediateCard h3{
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: bold;
	color: var(--tx-main);
	padding-left: 12px;
	position: relative;
}

.immediateCard h3::before{
	content:"";
	position:absolute;
	left:0;
	top:4px;
	width:6px;
	height:16px;
	background: var(--c-sky);
}

.immediateCard p{
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: #374151;
}

@media (min-width: 1000px){
	.immediatePoints{
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================
	Rules (金利・借入限度額・返済)
========================= */
#guideRules{
	background: var(--bg-cream);
	padding: 30px 0px;
}
.rulesWrap{
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 16px;
}

.ruleCard{
	border: 1px solid var(--line-soft);
	background: #fff;
	padding: 14px 14px;
}

.ruleCard h3{
	position: relative;
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 900;
	color: var(--tx-main);
}
.ruleCard h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 6px;
    height: 16px;
    background: var(--c-sky);
}
.ruleCard p{
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: #374151;
}

@media (min-width: 1000px){
	.rulesWrap{
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================
	Caution (安心ポイント)
========================= */

#guideCaution{
	margin-bottom: 30px;
}
#guideCaution h3{
	font-size: 1.1em;
}
#guideCaution h3 span{
	border-bottom: 1px solid var(--tx-main);
}

.cautionList{
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	background: #fff;
}
.cautionList li{
	padding: 4px 5px 4px 20px;
	text-align: left;
	font-size: 1.1em;
	line-height: 1.0;
	color: #374151;
	position: relative;
}
.cautionList li::before{
	content:"✓";
	position:absolute;
	left: 5px;
	top: 5px;
	font-weight: 900;
	color: var(--c-main);
}
#cautionBtn{
	margin-top: 10px;
}
#cautionBtn a{
	display: inline-block;
	font-size: 1.15em;
	color: #fff;
	background: var(--c-main);
	padding: 8px 13px;
	border-radius: 30px;
}
#cautionBtn a:hover{
	opacity: .8;
}
.guideCta{
	padding: 30px 15px;
	background: var(--bg-gray);
	border-top: 1px solid var(--line-soft);
}
.guideCta p{
	margin: 0 0 12px;
	color: #374151;
	line-height: 1.7;
	font-size: 14px;
}
@media (min-width: 768px){
	#guideCaution h3{font-size: 1.3em;}
	.cautionBox{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		align-items: flex-end;
	}
	.guideCta{
		margin: 0 calc(50% - 50vw);
	}
	.guideCta > div{
		width: 500px;
		margin: 0 auto;
	}
}

/*--
--02 ranking/
--*/
#ranking .compareMiddle > p img {
	width: 100%;
	max-width: 450px;
}
#ranking .compareRecommend span{
	display: inline-block;
}
#rankLarge .tableWrap{
	overflow:auto;
	border-radius:8px;
	border:1px solid var(--line);
	background:#fff;
}
#rankLarge .cmpTable{
	width:100%;
	min-width:680px;
	border-collapse:collapse;
	font-size:14px;
}
#rankLarge .cmpTable th,
#rankLarge .cmpTable td{
	padding:10px 10px;
	border-bottom:1px solid var(--line);
	vertical-align:middle;
}
#rankLarge .cmpTable thead th{
	background:var(--bg-cream);
	text-align:center;
	color:var(--tx-main);
	white-space:nowrap;
}
#rankLarge .tRank{
	font-weight:700;
	white-space:nowrap;
}
#rankLarge .tName a{
	color:var(--tx-main);
	text-decoration:none;
}
#rankLarge .tSub{
	display:block;
	font-size:12px;
	color:#555;
	margin-top:4px;
}
#rankLarge .tOk{
	text-align:center;
	font-weight:700;
	white-space:nowrap;
}
#rankLarge .cmpTable tbody td:nth-child(1),
#rankLarge .cmpTable tbody td:nth-child(2){
	background:rgba(243,240,215,.45);
}
#cmpAnno .annoToggle{
	padding: 5px;
	font-size: .9em;
}
#cmpAnno .annoToggle .annoMark{
	font-size: .85em;
}
#cmpAnno .annoList{
}
#cmpAnno .annoList p{
	font-size: .85em;
}
#cmpAnno .annoList ul{
	text-align: left;
	font-size: .85em;
	padding-left: 1em;
	margin-bottom: 3px;
}
#cmpAnno .annoList ul li{
}

.chooseBox{
	margin: 20px 0 30px;
	background:var(--bg-gray);
	border:1px solid var(--line);
	border-radius:18px;
	padding:14px;
}
.chooseTitle{
	margin:0 0 10px;
	font-size:16px;
	color:var(--tx-main);
}
.chooseList{
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
}
.chooseList li{
	width: 48%;
}
.chooseList li a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	color: var(--tx-sub);
	background: var(--c-link);
	padding:12px 8px;
	border-radius:10px;
	text-decoration:none;
	font-weight:bold;
	border:1px solid rgba(0,0,0,.06);
	transition:transform .12s ease, filter .12s ease, background-color .12s ease;
	box-sizing: border-box;
}
.chooseList .tag{
	display:inline;
	padding:0;
	border-radius:0;
	background:transparent;
	font-size:14px;
	font-weight:700;
	color:inherit;
}

.chooseList li a:hover{
	transform:translateY(1px);
	filter:brightness(1.02);
}
.chooseList li a:focus-visible{
	outline:3px solid rgba(104,184,216,.35);
	outline-offset:3px;
}
.rankTxt{
	text-align: left;
	font-size: 1.1em;
}
.rankLink {
	display: block;
	text-align: center;
	margin: -10px 10px 10px;
	padding: 5px 10px;
	color: var(--tx-sub) !important;
	background: var(--bg-cream);
	border-radius: 6px;
}
.rankLink a {
	display: block;
	text-align: center;
	color: var(--tx-sub) !important;
}
#ranking .searchForm{
	margin-top: 30px;
}
@media (max-width: 360px){
	.chooseList li a{
		padding:12px 10px;
	}
}
@media (min-width: 768px){
	.sec .inner{
		max-width:980px;
		margin:0 auto;
		padding:0 18px;
	}
	.chooseBox {
		margin: 20px 0 60px;
	}
	.rankLink {
		width: 350px;
		margin: -10px auto 40px;
	}
	.rankLink a{
	}
}

/*--
--03 column/
--*/
#detAuthor{
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 10px;
	margin: 30px 10px;
}
#detAuthor > p{
	display: inline-block;
	text-align: center;
	font-size: .95em;
	color: var(--tx-sub);
	background: var(--bg-cream);
	border-radius: 30px;
	padding: 2px 10px;
	margin-bottom: 5px;
}
#detAuthorInner{
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	color: var(--tx-sub);
}
#detAuthorInner p img{
	height: auto;
	max-width: 50px;
	border-radius: 25px;
}
#detAuthorInner div{
	text-align: left;
	padding-left: 10px;
}
#detAuthorInner div span{
	color: #7d5954;
	font-weight: bold;
}
#detAuthorInner div p a{
	font-size: 1.25em;
	font-weight: bold;
	color: var(--tx-sub);
}
#columnListCompare .columnList{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	gap:14px;
}
#columnListCompare .columnItem{
	border:1px solid var(--line);
	background:#fff;
	border-radius:4px;
	padding:14px 14px 12px;
	display:block;
	position:relative;
	overflow:hidden;
}
#columnListCompare .columnItem:before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:4px;
	background:linear-gradient(90deg, var(--c-main), var(--tx-gray));
}
#columnListCompare dl{
	margin:0;
	text-align:left;
}
#columnListCompare dt{
	margin:0 0 6px 0;
	padding-left:10px;
	border-left:4px solid var(--c-main); /* ライン装飾 */
	color:var(--tx-main);
	font-weight:800;
	font-size:1.35em;
	line-height:1.4;
}
#columnListCompare dd{
	margin:0;
	color:var(--tx-cream);
	line-height:1.7;
}
#columnListCompare .columnDate{
	margin-top:8px;
	font-size:.9rem;
	color:var(--tx-sub);
}
#columnListCompare .columnMore{
	margin-top:12px;
	display:inline-block;
}
#columnListCompare .columnMore span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:10px 14px;
	border-radius:999px;
	border:1px solid var(--line);
	background:var(--c-link);
	border-color:var(--c-link);
	color:#fff;
	font-weight:800;
	white-space:nowrap;
}
#columnListCompare .columnItem:hover{
	border-color:var(--c-main);
}
#columnListCompare .columnItem:hover dt{
	border-left-color:var(--c-link);
}
#columnListCompare .columnMore:hover span{
	background:var(--c-sub);
	border-color:var(--c-sub);
}
@media (min-width: 1000px){
	#columnListCompare .columnItem{
		padding:16px 18px 14px;
	}
}

.pager{
	margin-top:18px;
}
.pager ul{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	gap:8px;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
}
.pager a, .pager span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:40px;
	height:40px;
	padding:0 12px;
	border-radius:12px;
	border:1px solid var(--line);
	background:#fff;
	text-decoration:none;
	color:var(--tx-main);
	font-weight:700;
}
.pager .isCurrent span{
	background:var(--bg-hover);
	border-color:var(--bg-hover);
}
.pager .isDisabled span{
	opacity:.5;
}
.pager .pagerDots span{
	border:none;
	background:transparent;
	min-width:auto;
	padding:0 6px;
}
.colTabs{
	margin: 0 0 15px;
	max-width: 100%;
	box-sizing: border-box;
}
.colTabsList{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5px;
	list-style: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.colTabsItemAll{
	grid-column: 1 / -1;
}
.colTabsItem,
.colTab{
	min-width: 0;
}
.colTab{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	padding: 10px 10px 10px 34px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--tx-sub);
	border: 1px solid var(--tx-cream);
	background: var(--bg-cream);
	box-shadow: none;
	font-size: 14px;
	line-height: 1.2;
	box-sizing: border-box;
}
.colTabAll{
	min-height: 40px;
}
.colTab::before{
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 8px;
	height: 8px;
	border-right: 3px solid var(--tx-sub);
	border-top: 3px solid var(--tx-sub);
	opacity: 0.9;
}
.colTab span{
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.colTab:hover{
	color: #fff;
	background: var(--c-link);
	filter: none;
}
.colTab:hover::before{
	border-right: 3px solid #ffffff;
	border-top: 3px solid #ffffff;
}
.colTab.isActive{
	color: #ffffff;
	border-color: var(--c-link);
	background: var(--c-link);
	box-shadow: 0 2px 0 rgba(0,0,0,0.12);
	background-blend-mode: normal;
}
.colTab.isActive::before{
	border-right: 3px solid #ffffff;
	border-top: 3px solid #ffffff;
	opacity: 1;
}
.colTab:focus-visible{
	outline: 3px solid rgba(41, 192, 226, 0.35);
	outline-offset: 2px;
}
@media (min-width: 768px){
	.colTabs{
		max-width: 780px;
		margin: 0 auto 20px;
	}
	.colTabsList{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.colTab{
		min-height: 34px;
		padding: 7px 10px 7px 30px;
		font-size: 13px;
		box-shadow: 0 1px 0 rgba(0,0,0,0.08);
	}
}

#columnBody .inner > div,
#columnBody .inner > ul{
	padding: 0 5px;
}
#columnDetail .inner > span {
	display: block;
	text-align: right;
	font-size: .9em;
}
#columnBody .inner > div h4{
	color: var(--tx-main);
	text-align: left;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: underline;
}
#columnBody .inner > div h4:not(:first-child){
	margin-top: 20px;
}
.columnBox{
	margin: 14px 0 !important;
	padding: 12px !important;
	border: 1px solid #cfeaf5;
	background: #f2fbff;
	border-radius: 10px;
	box-sizing: border-box;
}

.columnBoxTitle{
	margin: 0 0 8px;
	font-weight: 800;
	font-size: 14px;
	color: #0f2a3a;
}

.columnBox p{
	margin: 0;
	line-height: 1.7;
	color: #0f2a3a;
}

.columnBoxTitle + p{
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 14px;
	background: #ffffff;
	border: 1px solid #e6f4fb;
	border-radius: 8px;
	padding: 10px;
}
@media (min-width: 600px){
	.columnBox{
		padding: 14px;
	}
	.columnBoxTitle{
		font-size: 15px;
	}
	.columnBoxTitle + p{
		font-size: 15px;
	}
}
#columnDetail .inner > div h4 {
    color: var(--tx-blue);
    text-align: left;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: underline;
	padding-bottom: 10px;
}
.pointList{
	color: var(--tx-main);
	margin-bottom: 20px;
}
.pointList li{
	position: relative;
	text-align: left;
	font-size: 1.1em;
	margin-bottom: 10px;
	margin-left: -1em;
	padding-left: 1em;
	text-indent: 1em;
}
.pointList li::before {
	content: "✓";
	position: absolute;
	left: -4px;
	top: -3px;
	font-size: 20px;
	font-weight: bold;
	color: var(--c-main);
}
.pointList li span{
	font-weight: bold;
}
.btnCategory{
	margin: 10px 0;
}
.btnCategory a{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 12px 10px;
	font-size: 1.2em;
	font-weight: 800;
	color: var(--tx-gray);
	text-decoration: none;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 14px;
	line-height: 1.2;
}
.btnCategory a:hover {
	border-color: var(--c-main);
}
.btnCategory a small{
	font-size: .85em;
}
.relatedSec{
	background: var(--bg-cream);
	padding: 10px 5px;
}
.relatedSec h4{
	padding: 3px 5px;
}
.relatedSec h4 span{
	color: var(--tx-cream);
	background: linear-gradient(transparent 50%, var(--line-yel) 50%);
}
.relatedList{
}
.relatedList li{
}
.relatedList li a{
	display: block;
	color: var(--tx-cream);
	text-align: left;
	text-decoration: underline;
	padding: 3px 10px;
}
.relatedList li a::before{
	content: '・';
}
#columnFootNav{
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
}
#columnFootNav a{
	background: var(--c-link);
	padding: 10px;
	margin: 5px;
	box-sizing: border-box;
}
#columnFootNav a:first-child{
	width: 70%;
}
#columnFootNav a.colTab{
}
#columnFootNav a.colTab::before{
	display: none;
}
@media (min-width: 768px){
	#columnLead .secTitle {
		font-size: 1.15em;
	}
	#columnBody .inner > div,
	#columnBody .inner > ul{
		padding: 0 10px;
	}
	.relatedSec{
		margin: 0 calc(50% - 50vw);
	}
	.relatedList{
		max-width: 800px;
		padding: 0 10px;
		margin: 0 auto;
		box-sizing: border-box;
	}
	#columnFootNav{
		max-width: 800px;
		padding: 0 10px;
		margin: 0 auto;
		box-sizing: border-box;
	}
}


/*--
--04 category/xxx.html
--*/

#category .inner > div h4 {
	color: var(--tx-blue);
	text-align: left;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: underline;
}
.svcNav{
	background: var(--bg-cream);
	color: var(--tx-sub);
	border-radius: 4px;
	padding: 10px;
}
.svcNav p.svcNavTl{
	font-size: 1em;
	text-align: center;
	background: #fff;
	border-radius: 20px;
	margin-bottom: 5px;
}
.svcNav ul.svcNavList{
}
.svcNav ul.svcNavList li{
	position: relative;
}
.svcNav ul.svcNavList li:not(:last-child)::after{
	content: '';
	position: absolute;
	display: block;
	width: 96%;
	height: 1px;
	left: 2%;
	bottom: 0;
	border-bottom: 1px solid #fff;
}
.svcNav ul.svcNavList li a{
	display: block;
	padding: 5px 5px 5px 10px;
	position: relative;
}
.svcNav ul.svcNavList li a::before{
	content: '';
	display: block;
	width: 4px;
	height: 4px;
	background: var(--tx-sub);
	border-radius: 4px;
	position: absolute;
	left: 0;
	top: calc(50% - 2px);
}

.svcMiniCta{
	padding: 15px 0px 30px;
}

.rankTitle{
	text-decoration: none !important;
}
.rankTitle a{
	text-decoration: none;
}
.rankDesc em{
    font-weight: bold;
    background: linear-gradient(transparent 60%, #ffe066 60%);
}
.rankPointCnt em{
	color: #fa484d;
	background: linear-gradient(transparent 60%, #ffe687 60%);
}
#category #cateLead p{
	line-height: 1.6;
	color: var(--tx-gray);
}
#category #cateBody p{
	line-height: 1.6;
	color: var(--tx-gray);
}
#cateBody .inner > div,
#cateBody .inner > ul{
	padding: 0 5px;
}
.serviceList .btnPrimary{
	background: var(--c-output);
	color: #fff;
}
.svcCard h4 {
	color: var(--tx-main);
	text-align: left;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: underline;
	margin-bottom: 10px;
}
#svcHowToBorrow .svcCard .pointList{
	padding: 0 0 0 .5em;
}
.svcCard .pointList li strong{
	font-size: 1.0em;
	font-weight: bold;
	display: block;
}

.popTabs h4{
}
.popTabsList{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.popTabsItem{
	width: 49%;
	margin: 5px 0;
}
.popTab{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	font-size: 13px;
	font-weight: 800;
	color: var(--tx-gray);
	text-decoration: none;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 14px;
	line-height: 1.2;
}
.popTab.isActive{
	background: var(--bg-cream);
}
.catImg{
	text-align: center;
}

@media (min-width: 768px){
	#cateBody .inner > div,
	#cateBody .inner > ul{
		padding: 0 10px;
	}
	#cateEarly .serviceList{
		grid-template-columns: repeat(2, 1fr);
	}
	.catImg{
		margin-bottom: 20px;
	}
	.catImg img{
		width: 400px;
		height: auto;
	}
}


/*--
--05 service detail
--*/
#serviceDetail{
	text-align: left;
}
#serviceDetail .svcLead{
	line-height:1.7;
	color:var(--tx-gray);
}
.svcList{
	list-style:none;
	margin:0;
	padding:0;
}
.svcList li{
	line-height:1.7;
	color:#374151;
	padding:6px 0 6px 14px;
	position:relative;
}
.svcList li::before{
	content:"•";
	position:absolute;
	left:0;
	top:6px;
	color:var(--c-main);
	font-weight:900;
}
.svcList strong{
	font-weight:900;
	color:var(--tx-main);
}
.svcSpec{
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	color: var(--tx-main);
	margin: 0 0 14px;
	border: 1px solid #d1d5db;
}
.svcSpec tr{
	border-bottom: 1px solid #d1d5db;
}
.svcSpec tr:last-child{
	border-bottom: none;
}
.svcSpec th{
	width: 30%;
	padding: 8px 10px;
	text-align: left;
	font-weight: 800;
	color: var(--tx-main);
	background: #f9fafb;
	border-right: 1px solid #d1d5db;
	white-space: nowrap;
	vertical-align: middle;
}
.svcSpec td{
	padding: 10px 12px;
	font-weight: 600;
	color: #374151;
	background: #ffffff;
	vertical-align: middle;
}
.svcSpec tr:nth-child(even) th{
	background: #f3f4f6;
}
.svcSpec tr:nth-child(even) td{
	background: #f9fafb;
}
@media (min-width: 768px){
	.svcSpec{
		font-size: 1.1em;
	}
	.svcSpec th{
		width: 20%;
		padding: 10px 12px;
	}
}

.atmTable{
	overflow:hidden;
	background:#fff;
}
.atmRow{
	display:grid;
	grid-template-columns:1fr;
	gap:10px;
	margin-bottom: 10px;
	padding:16px;
	border:1px solid #e6e6e6;
	border-radius:12px;
}
.atmLogo{
	display:flex;
	flex-flow: row wrap;
	align-items:center;
	justify-content:center;
}
.atmLogo img{
	max-width:140px;
	max-height:48px;
	width:auto;
	height:auto;
	display:block;
}
.atmInfo{
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}
.atmItem{
	display:grid;
	grid-template-columns:100px 1fr;
	gap:12px;
	padding:6px 0;
}
.atmItem + .atmItem{
	border-top:1px dashed #eee;
}
.atmItem dt{
	margin:0;
	font-weight:700;
	color:#333;
	white-space:nowrap;
}
.atmItem dd{
	margin:0;
	color:#333;
}
.atmItem.isAll{
}
@media (min-width: 1000px){
	.atmRow{
		gap:16px;
		align-items:center;
	}
	.atmLogo{
		justify-content:center;
		min-height:60px;
	}
	.atmLogo img{
		max-width:120px;
	}
	.atmItem{
		grid-template-columns:110px 1fr;
	}
}

/*--
--06 search/
--*/
.searchInput{
}
.searchInput div{
	text-align: center;
	margin-bottom: 10px;
}
.searchInput div em{
	font-size: 1.1em;
	font-weight: bold;
}
.searchInput p{
	text-align: center;
	margin-bottom: 10px;
}
.searchEmpty{padding: 10px 10px 20px;}


/*--
--xx simulation_borrow/
--*/
#simBorrow .inner{
	max-width: 980px;
	margin: 0 auto;
	padding: 0 14px;
}

/* =========================
	Form
========================= */

#simBorrowForm{
	margin-top: 10px;
	padding: 15px 0;
	background: linear-gradient(180deg, var(--bg-cream), rgba(255,255,255,0));
}

#simBorrowForm #simForm{
	background: #fff;
	border: 1px solid var(--line-soft);
	border-radius: 18px;
	box-shadow: 0 10px 28px rgba(15,42,58,.10);
	padding: 16px 14px;
	box-sizing: border-box;
}

#simBorrowForm .row{
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	padding: 12px 0;
	border-top: 1px dashed var(--line-soft);
}

#simBorrowForm .row:first-child{
	border-top: 0;
	padding-top: 0;
}

#simBorrowForm label{
	font-weight: 700;
	color: var(--tx-main);
	line-height: 1.2;
	font-size: 14px;
	letter-spacing: .02em;
}

#simBorrowForm select,
#simBorrowForm input[type="number"]{
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px 12px;
	background: #fff;
	color: var(--tx-main);
	font-size: 16px; /* iOSの自動拡大対策 */
	line-height: 1.2;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#simBorrowForm select{
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, rgba(15,42,58,.65) 50%),
		linear-gradient(135deg, rgba(15,42,58,.65) 50%, transparent 50%);
	background-position:
		calc(100% - 18px) calc(50% - 2px),
		calc(100% - 12px) calc(50% - 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 36px;
}

#simBorrowForm input[type="number"]{
	-moz-appearance: textfield;
}
#simBorrowForm input[type="number"]::-webkit-outer-spin-button,
#simBorrowForm input[type="number"]::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}

#simBorrowForm select:focus,
#simBorrowForm input[type="number"]:focus{
	border-color: var(--c-main);
	box-shadow: 0 0 0 4px rgba(104,184,216,.18);
}

/* number + unit */
#simBorrowForm .row p{
	margin: 0;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 10px;
}

#simBorrowForm .row p span{
	font-size: 1.1em;
	color: rgba(15,42,58,.7);
	padding: 8px 5px;
	white-space: nowrap;
}

/* button row */
#simBorrowForm .row:last-child{
	padding-top: 14px;
	border-top: 1px solid var(--line-soft);
}

#simBorrowForm #simBtn{
	width: 100%;
	border: 0;
	border-radius: 999px;
	padding: 14px 16px;
	font-weight: bold;
	font-size: 16px;
	letter-spacing: .02em;
	color: #fff;
	cursor: pointer;
	background: linear-gradient(135deg, var(--c-main), #4aa7cf);
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, opacity .12s ease;
}

#simBorrowForm #simBtn:hover{
	filter: brightness(1.02);
}

#simBorrowForm #simBtn:active{
	transform: translateY(1px);
}

#simBorrowForm #simBtn:disabled{
	opacity: .6;
	cursor: not-allowed;
	box-shadow: none;
}
#simForm > span{
	font-size: .9em;
	color: var(--tx-main);
	text-align: left;
	display: block;
}


/* =========================
	Result
========================= */

.result{
	padding: 14px 0 22px;
}

.result .inner{
	padding-top: 6px;
}

.result h2{
	font-size: 18px;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--tx-main);
	margin: 0 0 10px;
	display: none;
}
#resultText{
	background: #fff;
	padding: 10px;
	text-align: left;
	font-size: 1.1em;
	color: var(--tx-main);
	line-height: 1.75;
}

#resultText p{
	margin: 0;
}

/* judge別に色気を出す（JSで class を付ける想定：judge-ok / judge-warn / judge-ng） */
#resultText.judge-ok{
	border-color: rgba(104,184,216,.35);
}
#resultText.judge-warn{
	border-color: rgba(240,184,8,.55);
}
#resultText.judge-ng{
	border-color: rgba(252,132,0,.55);
}

/* サービスリスト */
#simulationList{
	margin: 10px;
	display: grid;
	gap: 10px;
}
/* debug（表示するなら） */
#debugBox{
	margin-top: 12px;
	background: #0f2a3a;
	color: #e7f6ff;
	border-radius: 14px;
	padding: 12px;
	font-size: 12px;
	line-height: 1.6;
	overflow: auto;
	display: none;
}
#toCredit{
	display: block;
	text-align: center;
	margin: 10px;
	padding: 5px 10px;
	color: var(--tx-sub);
	background: var(--bg-cream);
	border-radius: 6px;
}


/* =========================
	PC layout
========================= */
@media (min-width: 1000px){
	#simBorrowForm{
		padding: 22px 0 14px;
	}
	#simBorrowForm #simForm{
		padding: 18px 18px;
	}
	#simBorrowForm .row{
		grid-template-columns: 200px 1fr;
		align-items: center;
		gap: 12px;
		padding: 12px 0;
	}
	#simBorrowForm .row:last-of-type{
		grid-template-columns: 1fr;
	}
	#simBorrowForm .row p{
		grid-column: 2 / 3;
	}
	#simBorrowForm .row:last-child{
		grid-template-columns: 1fr;
	}
	#simBorrowForm #simBtn{
		max-width: 360px;
		margin: 0 auto;
	}
	.result h2{
		font-size: 20px;
	}
}

/* =========================
	Output
========================= */
.card{
	max-width:520px;
	width:100%;
	border:1px solid #e5e7eb;
	border-radius:16px;
	padding:20px;
}
#output p{
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}
#output p img{
	width: 100%;
	max-width: 350px;
}
.row{
	display:flex;
	justify-content: center;
	align-items:center;
	gap:15px;
}
.row div strong{
	color: var(--tx-main);
	font-size: 1.4em;
}
.outBtn{
	display: block;
	color: var(--tx-sub);
	background: var(--bg-cream);
	border-radius: 8px;
	padding: 5px 10px;
	margin-top: 20px;
}
#preMsg{
	font-size: 1.2em;
	font-weight: bold;
}
#preBtn{
	color: #fff;
	background: #6c7280;
	display: block;
	padding: 10px 15px;
	margin: 10px auto;
	border: 1px solid #6c7280;
	border-radius: 6px;
}

/*--
--xx credit.html
--*/
#creditCompare h4.secSubTitle{
	text-align: left;
}
.ccTable{
	width:100%;
	border-collapse:separate;
	border-spacing:0;
	background:#fff;
	border:2px solid #bbb;
	overflow:hidden;
	font-size:14px;
	line-height:1.6;
}
.ccTable thead{
	display:none;
}
.ccTable tbody tr{
	border-bottom:1px solid #eee;
}
.ccTable tbody tr:last-child{
	border-bottom:none;
}
.ccTable td{
	display:block;
	padding:10px 15px;
}
.ccTable td:last-child{
	padding:5px 15px 20px;
}
.ccTable td:nth-of-type(1),
.ccTable td:nth-of-type(2){
	border-bottom:2px dashed var(--line-soft);
}
.ccTable td:last-child{
	border-bottom:none;
	padding-top:10px;
}
.ccTable td::before{
	display:block;
	font-size:12px;
	color:#666;
	margin-bottom:6px;
	font-weight:700;
}
.ccTable th:nth-child(3),
.ccTable td:nth-child(3){
	text-align: left;
}
.ccTable td:nth-child(1)::before{ content:"カード名"; }
.ccTable td:nth-child(2)::before{ content:"年会費"; }
.ccTable td:nth-child(3)::before{ content:"特徴"; }
.ccTable td p{
	text-align: center;
	margin-bottom: 5px;
}
.ccTable tr:not(:last-child) td:last-child{
	border-bottom: 2px solid #ddd;
}
a.btnApply{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:10px 30px;
	border-radius:999px;
	background:var(--c-link);
	color:#fff;
	text-decoration:none;
	font-weight:700;
	white-space:nowrap;
}
a.btnApply:focus{
	outline:2px solid #999;
	outline-offset:2px;
}
a.btnApply:hover{
	opacity:.9;
}
.ccTableWrap{
	width:100%;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}

@media (min-width: 678px){
	.ccTable{
		font-size:15px;
	}

	.ccTable thead{
		display:table-header-group;
	}

	.ccTable th,
	.ccTable td{
		display:table-cell;
		padding:14px 16px;
		border-bottom:2px solid #eee;
		vertical-align:top;
	}

	.ccTable th{
		background:#f7f7f7;
		font-weight:800;
		text-align:left;
		color:#222;
	}

	.ccTable td::before{
		content:none;
		display:none;
	}

	.ccTable th:nth-child(1),
	.ccTable td:nth-child(1){
		width:30%;
		font-weight:bold;
	}

	.ccTable th:nth-child(2),
	.ccTable td:nth-child(2){
		width:12%;
		white-space:nowrap;
	}

	.ccTable th:nth-child(3),
	.ccTable td:nth-child(3){
		width:50%;
	}

	.ccTable th:nth-child(4),
	.ccTable td:nth-child(4){
		width:20%;
		white-space:nowrap;
	}

	.ccTable tbody tr:last-child td{
		border-bottom:none;
	}
	.ccTable td:nth-of-type(1), .ccTable td:nth-of-type(2) {
		border-bottom: 2px solid #ddd;
	}
	.ccTable tr td {
		vertical-align: middle;
		border-bottom: 2px solid #ddd;
	}
}

/*--
--xx author.html
--*/
#authorCompare{
}
#authorList{
	margin: 0 10px;
}
.authorBox{
	margin-bottom: 20px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 4px;
}
.authorHead{
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 10px;
}
.authorHead p{}
.authorHead p img{
	min-width: 50px;
	width: 100px;
	height: auto;
	border-radius: 50px;
}
.authorHead div{
	text-align: left;
	padding-left: 10px;
}
.authorHead div span{
	color: #7d5954;
	font-weight: bold;
}
.authorHead div p:nth-of-type(1){
	font-size: 1.25em;
	font-weight: bold;
	color: var(--tx-sub);
}
.authorCnt{}
.authorCnt dl{}
.authorCnt dl dt{
	text-align: left;
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 5px;
}
.authorCnt dl dt span{
	font-weight: bold;
	background: linear-gradient(transparent 60%, #ffe066 60%);
}
.authorCnt dl dd{
	text-align: left;
}
.authorCnt dl dd ul{
	position: relative;
	padding: 2px 0;
}
.authorCnt dl dd ul li{
	position: relative;
	padding-left: 1em;
}
.authorCnt dl dd ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .5em;
	width: 4px;
	height: 4px;
	background: var(--tx-sub);
	border-radius: 50%;
}
.authorCnt dl dd ul li a{
}
.authorLicense,
.authorField{
	margin-bottom: 20px;
}

/*--
--xx sitemap.html
--*/
#sitemapCompare{
	text-align: left;
}
#sitemapCompare a{
	display: inline-block;
	padding: 3px;
	margin: 3px 0;
	font-size: 1.15rem;
}
#sitemapCompare .smTitle a{
	color: var(--tx-main);
	padding: 0;
	margin: 0;
	font-size: 1em;
}
#sitemapCompare ul:last-of-type{
	margin-top: 20px;
}
#sitemapCompare ul li a{
	
}
#sitemapCompare ul li a span{
	padding-left: 15px;
	position: relative;
}
#sitemapCompare ul li a span::before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid var(--c-main);
}
.smTitle{
	display: block;
	background: var(--bg-cream);
	padding: 3px 10px;
	margin: 15px 0 5px;
}
.smPara{
	padding: 0 10px;
}
@media (min-width: 500px){
	.smPara{
		display: flex;
		flex-flow: row wrap;
		justity-content: flex-start;
		align-items: flex-start;
	}
	.smPara li{
		width: 50%;
	}
}

/*--
--xx company.html
--*/
#companyCompare{
	margin: 0 10px 10px;
	box-sizing: border-box;
}
.companySpec{
	width: 100%;
	border-collapse: collapse;
	font-size: 1em;
	color: var(--tx-main);
	margin: 0 0 10px;
	border: 1px solid #d1d5db;
}
.companySpec tr{
	border-bottom: 1px solid #d1d5db;
}
.companySpec tr:last-child{
	border-bottom: none;
}
.companySpec th{
	width: 30%;
	padding: 10px 10px;
	text-align: left;
	font-weight: bold;
	color: var(--tx-main);
	background: #f9fafb;
	border-right: 1px solid #d1d5db;
	white-space: nowrap;
	vertical-align: middle;
}
.companySpec td{
	font-weight: normal;
	text-align: left;
	padding: 10px 12px;
	color: #374151;
	background: #ffffff;
	vertical-align: middle;
}
.companySpec tr:nth-child(even) th{
	background: #f3f4f6;
}
.companySpec tr:nth-child(even) td{
	background: #f9fafb;
}
@media (min-width: 768px){
	.companySpec th{
		width: 20%;
	}
	
}