@charset "utf-8";

/* ==============================
PC loan layout
Site Name: SULK;
Date: 2024.02;
================================= */

/* base
--------------------------------- */
section {
	border-bottom: 1px solid #333;
	padding-bottom: 80px;
}
section:not(:last-child) {
	margin-bottom: 64px;
}
section:last-child {
	padding-bottom: 64px;
}

/* hero
--------------------------------- */
.hero02 img {
	width: 100%;
	height: auto;
}
.hero02 {
	padding-bottom: 64px;
	width: 100%;
}
@media only screen and (min-width: 640px) and (max-width: 1119px){
	.hero02 .tile--sp p {
		width: 38.5%;
	}
	.hero02 .tile--sp p:last-child {
		width: 61.5%;
	}
}

/* loan
--------------------------------- */
#loan__list .item {
	align-items: center;
	display: flex;
	justify-content: center;
	text-align: center;
}
#loan__list .item {
	background-color: #ccc;
}
#loan__list .item i {
	display: block;
	margin-bottom: 10px;
}
#loan__list .item em {
	font-weight: 900;
	line-height: 1.5;
}
@media only screen and (max-width: 749px){
	#loan__list {
		margin-bottom: 40px;
	}
	#loan__list .item {
		font-size: 3.2vw;
		line-height: 1.4;
		margin-top: 6px;
		width: calc((100% - 12px) / 3);
		height: 32vw;
	}
	#loan__list .item:not(:nth-of-type(3n)) {
		margin-right: 6px;
	}
	#loan__list .item i {
		font-size: 5.86vw;
	}
}
@media only screen and (min-width: 750px) and (max-width: 1119px){
	#loan__list {
		justify-content: space-between;
		margin-bottom: 40px;
	}
	#loan__list .item {
		font-size: 12px;
		line-height: 1.4;
		max-width: 152px;
		width: 16%;
		max-height: 152px;
		height: 17vw;
	}
	#loan__list .item i {
		font-size: 24px;
	}
	#loan__list .item em {
		font-size: 14px;
	}
}

/* example
--------------------------------- */
/* list */
.example__list {
	list-style: none;
}
.example__list li {
	border-top: 1px solid rgba(51,51,51,.15);
	margin-top: 24px;
	padding-top: 24px;
}
/* table  */
.example__tables {
	overflow-x: scroll;
	margin-bottom: 24px;
}
.example__table {
	letter-spacing: 0;
	line-height: 1.4;
	table-layout: fixed;
	white-space: nowrap;
	margin-top: 32px;
	margin-bottom: px;
	width: 1119px;
}
.example__table th {
	border-bottom: 1px solid white;/* #ebf0f0 */
	font-size: 13px;
	vertical-align: middle;
	padding: 8px 0;
}
.example__table .lank {
	background-color: #333 !important;
	color: white;/* #ebf0f0 */
	border-bottom: 1px solid white;/* #ebf0f0 */
}
.example__table thead th {
	padding: 8px 0;
}
.example__table thead th:nth-child(odd),
.example__table td:nth-child(odd) {
	background-color: #dadada;
}
.example__table thead th:nth-child(even),
.example__table td:nth-child(even) {
	background-color: #ccc;
}
.example__table td {
	text-align: center;
	border-bottom: 1px solid white;/* #ebf0f0 */
	padding: 8px 0;
}
.example__table .lank {
	width: 120px;
}
.example__table caption {
	display: none;
}
#example .center--pc {
	margin-top: 64px;
}
/* btn  */
#example .btn02 {
	margin-top: 24px;
	margin-right: auto;
	margin-left: auto;
	width: 270px;
}
#example .btn02 a {
	background-color: #eb67a2;
	border-color: #eb67a2;
}

/* flow
--------------------------------- */
#flow h3 {
	font-size: 15px;
	font-weight: 900;
	margin-top: 36px;
	margin-bottom: 18px;
}

/* faq
--------------------------------- */
#faq h3 {
	background-color: #e1e6e6;
	letter-spacing: .1em;
	font-size: 16px;
	font-weight: 900;
	margin-top: 24px;
	padding: 16px 24px;
}
details {
	border-bottom: 1px solid #e1e6e6;
	padding: 0 0 12px 0;
}
details[open] {
	padding-bottom: 24px;
}
summary {
	cursor: pointer;
	display: block;
	font-size: 15px;
	font-weight: 900;
	list-style: none;
	position: relative;
	padding: 20px 24px 12px 0;
}
summary::-webkit-details-marker {
	display: none;
}
summary:before {
	content: "\f067";
	font-family: "Font Awesome 5 Pro";
	position: absolute;
	right: 0;
}
details[open] summary:before,
summary details[open] summary:before {
	content: "\f068";
}