/* designed by Value Up, Bangkok 2024 */
html, body {height: 100%;}
html {scroll-behavior: smooth;}
body {
	font-size: 1rem;
	line-height: 1.6;
	background: #fff;
	color: #222;
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings:
	"wdth" 100;
}

/* general */
.br-1024, .br-ipxl, .br-768, .br-736, .br-667, .br-568, .br-480, .br-414, .br-375, .br-360, .br-320, .br-ipdport, .br-pc, .br-mb {display: none;}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {max-width:1220px;}
.no-bottom-margin {margin-bottom: 0!important;}
.view-pc, .view-mb, .hide {display: none;}
.add-bottom-space {margin-bottom: 24px;}
.remarks {font-size: 80%;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.get-corner {border-radius: 24px;}
.add-top-gap {padding-top: 2%;}
.sectionbox {padding: 5% 0;}
.subsection, .subsectionbox {margin-bottom: 5%;}
ul {list-style-type: square;}
.item-box {margin-bottom: 20px;}
.item-box th {width: 20%;}
.no-lists {list-style-type: none; padding-left: 0;}
.card {border-radius: 24px; overflow: hidden; margin-bottom: 24px;}
#pageTitle {
	text-align: center;
	padding: 24px 0;
	margin-bottom: 24px;
	background-color: #fffbe2;
	color: #ff6600;
	font-size: 3.2rem;
	font-weight: 700;
}
#pageTitle h2 {font-size: 3.2rem; font-weight: 700;}
.card-body {padding: 24px;}
.general-page {padding-bottom: 5%;}

/* fonts & texts */
h1, h2 {margin-top: 0;}
.material-symbols-outlined {
	vertical-align: middle;
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}
.section-title {
	text-align: center;
	font-weight: 700;
	margin-bottom: 24px;
	color: #333;
}
.f-black {font-weight: 700;}

/* color settings */
.txt-white {color: #fff;}
.txt-main-orange {color: #ff6600;}
.txt-secondary-orange {color: #ffbb33;}
.txt-main-black {color: #212121;}
.txt-main-green, .text-success {color: #6eb92b;}

.border-none {border: none!important;}
.bg-main-orange {background-color: #ff6600;}
.bg-orange {background-color: #f4810e;}
.bg-secondary-orange {background-color: #ffbb33;}
.bg-main-black {background-color: #212121;}
.bg-light-green {background-color: rgba(110,185,43,0.2);}
.bg-main-green {background-color: #6eb92b;}
.bg-light-orange, .bg-cream {background-color: #fffbe2;}
.bg-white {background-color: #fff;}

/* links */
a {color: #2D3C97;}
a:hover {color: #E11E2C;}
.btn-primary {
	background-color: #ff6600;
	border-color: #ff6600;
}
.btn:hover {
	background-color: #ffbb33;
	border-color: #ffbb33;
}
.button-span {padding: 3% 0 0;}
.btn-outline-primary {
	border-color: #ff6600;
	color: #ff6600;
}
.btn:disabled {background-color: gray; border-color: grey;}
.active>.page-link, .page-link.active {background-color: #ffbb33; border-color: #ffbb33;}

/* top nav */
.bg-body-tertiary {background-color: #6eb92b!important;}
header .navbar {align-items: center;}
header .navbar-nav {gap: 10px;}
header .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {color: #000;}
header .nav-link {color: #fff; font-weight: 500;}
header .nav-link:focus, .nav-link:hover {color: yellow;}
.navbar-expand-md .navbar-nav .nav-link {font-weight: 700;}
.hdr-logosider {font-size: 65%;}

/* back to top */
#back2top {
	position: fixed;
	right: 10px;
	bottom: 5px;
	width: 96px;
	height: 96px;
	text-align: right;
	z-index: 99;
}
#back2top a {
	display: block;
	padding: 20px 10px;
	text-align: center;
	background: rgba(255,255,255,0.85);
	border-radius: 10px;
	color: #6eb92b;
}
#back2top a:hover {color: #ffbb33;}
#back2top .material-symbols-outlined {font-size: 300%;}

/* preloader */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	overflow: hidden;
	background: #ffffff;
}
#preloader:before {
	content: "";
	position: fixed;
	top: calc(50% - 0px);
	left: calc(50% - 30px);
	border: 6px solid #ffffff;
	border-top-color: var(--bs-dark);
	border-bottom-color: var(--bs-dark);
	border-radius: 50%;
	width: 60px;
	height: 60px;
	-webkit-animation: animate-preloader 1s linear infinite;
	animation: animate-preloader 1s linear infinite;
}
@keyframes animate-preloader {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* header */
#hdrBrand {padding: 16px 0; vertical-align: middle;}
#headerTel {font-size: 120%; font-weight: 700; color: #333;}
#headerTel ul {margin: 0;}
#headerTel a {text-decoration: none; color: #333;}

/* footer */
footer {
	border-top: 20px solid #ffcc33;
	background: #fff;
	padding-top: 3%;
	padding-bottom: 10%;
}
footer a {text-decoration: none;}
.copyright {margin-top: 20px;}
#bttmSpan {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 5;
	width: 100%;
	padding: 2% 0;
	background-color: #6eb92b;
	vertical-align: middle;
	color: white;
}
#bttmSpan h3 {margin-bottom: 0; font-weight: 700;}
#bttmSpan a {color: #fff;}
#bttmSpan a:hover {text-decoration: none;}

/* hero */
#hmHero {
	background: #ffbb33;
	background-size: cover;
}
#hmHero h3 {
	padding: 16px 0;
	font-size: 200%;
	font-weight: 700;
}

/* home */
#homeTopSlide {padding: 10px 0;}
#homeTopSlide h3 {margin-bottom: 0; font-weight: 700;}
#bcmenulist img {margin-bottom: 20px;}
.testimony-box, .testimony-box img {margin-bottom: 20px;}
#usefulInfo .list-group-item > div {text-align: left;}
#usefulInfo .list-group-item .fw-bold {
	font-size: 120%;
	color: #6eb92b;
}
.tip-pict {margin-bottom: 16px;}
.tip-date {color: #666;}
.tip-link {padding-top: 24px; text-align: right;}
.focus-btnbox {padding: 5% 0; text-align: center;}
#whySokugai h2 {margin-bottom: 30px;}
#whySokugai ol {font-weight: bold;}
#whySokugai ol li {
	padding-bottom: 10px;
	margin-bottom: 30px;
	border-bottom: 2px solid #333;
	position: relative;
	padding-left: 9%;
}
#whySokugai ol h3 {font-weight: 700;}
.ws-subtitle {color: #fff;}
.ws-point {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	padding: 5px;
	width: 64px;
	height: 64px;
	text-align: center;
	line-height: 1;
	font-size: 300%;
	font-weight: 700;
	border: 2px solid #333;
}
#exampleHome h2 img {max-width: 20%;}
#exampleHome .accordion-button, #exampleHome .accordion-item:first-of-type>.accordion-header .accordion-button, #exampleHome .accordion-flush>.accordion-item>.accordion-header .accordion-button {background-color: #e3f5ab; border-color: #e3f5ab; font-weight: bold;}
#exampleHome .accordion-item {background-color: #e3f5ab;}
#hmColumnWrap iframe {
	width: 100%;
	min-height: 845px;
	border:none;
}

/* blog */
.ql-size-large {font-size: 150%;}
.ql-size-huge {font-size: 220%;}
.text-muted {display: none;}

/* saikenchiku */
.sklpbttm-box {
	padding: 24px;
	border-radius: 16px;
	background-color: yellow;
	border: 2px solid #333;
	box-shadow: 5px 5px 0 #333;
}
.sklpbttm-box h3 {
	font-weight: 700;
	font-size: 120%;
}
.sklpbttm-box h3 strong {
	font-size: 160%;
	color: #ff6600;
}
.sklpbox-lists {
	padding: 30px;
	font-size: 160%;
	box-shadow: 8.604px 12.287px 5.4px 0.6px #f7e6b4;
	border-radius: 30px;
	background: #fff url("img/note-check_bg.png") no-repeat right bottom;
}
.sklpbox-lists li {margin-bottom: 16px;}
.sklpbox-lists .material-symbols-outlined {color: #ff6600;}
#shlp02ttle {margin-bottom: 3%;}
#shlp02ttle img {max-width: 20%;}
.skchk-lp02-box {position: relative;}
.skchk-lp02-box-pict {position: absolute; left: 0; bottom: 0; width: 100%;}
#sklp0301 {
	position: relative;
	padding-bottom: 5px;
}
#sklp0301txt {
	position: absolute;
	bottom: 5%;
	left: 0;
	width: 80%;
	font-size: 150%;
}
.sklp0302 {
	border-top: 2px solid #333;
	border-bottom: 2px solid #333;
	padding: 2% 0;
	margin-bottom: 5%;
}
h2.section-title {
	font-size: 300%;
}
h2.section-title span {
	display: block;
	padding: 10px 16px;
	background-color: #333;
	color: #fff;
	border-radius: 40px;
	font-size: 50%;
	width: 50%;
	margin: 0 auto 20px;
}
#lpWhySKG .card {margin-bottom: 5%;}
#lpWhySKG #whyskgCard01 h4 {
	margin-bottom: 0;
	padding: 5px;
	background-color: #ff6600;
	color: #fff;
	font-weight: bold;
	border-radius: 10px 10px 0 0;
}
#whyskgCard01 .bg-cream {padding: 20px; border-radius: 0 0 10px 10px;}
#whyskgCard02 h4 {font-size: 180%; font-weight: bold;}
#whyskgCard02 h4 strong, #whyskgCard04 p strong {display: inline-block; padding: 3px 5px; background-color: yellow;}
#whyskgCard03 h4 {text-align: center; font-weight: bold; margin-bottom: 5%;}
#sklp03034quote {
	margin-bottom: 20px;
	padding: 20px;
	background-color: #fefde0;
	border: 1px solid #d3d1ae;
	border-radius: 16px;
}
#whyskgCard04 h5 {font-weight: bold; font-size: 160%;}
#lpWhySKG h3.sklp0303title {
	color: #ff6600;
	font-size: 300%;
	font-weight: 700;
	margin: 0 auto 5%;
	text-align: center;
}
.ttpoint img {
	margin-bottom: 20px;
	height: 96px;
	width: auto;
}
#skchkLP03 {padding-bottom: 0;}
#skchkLP03 .sklp0302 {margin-bottom: 0;}
.pay-step-arrow {text-align: center; margin: 5% 0;}
.ps-arrow-wrapper {
	display: inline-block;
	padding: 16px;
	color: #666;
	border: 3px solid #666;
	border-radius: 44px;
}
.ps-arrow-wrapper .material-symbols-outlined {font-size: 300%;}
.skchklp04content .card {text-align: center; box-shadow: 8.604px 12.287px 5.4px 0.6px #f7e6b4;}
.sklp04-point {
	display: inline-block;
	padding: 16px 24px;
	background-color: #ff6600;
	color: #fff;
	border-radius: 44px;
	margin: 0 auto 24px;
}
.skchklp04content h3 {font-weight: bold; color: #ff6600; margin-bottom: 16px;}
.skchklp04content .card img {height: 100px; width: auto;}
.accordion-item {margin-bottom: 20px; background-color: #ffbb33;}
.accordion-button, .accordion-item:first-of-type>.accordion-header .accordion-button, .accordion-flush>.accordion-item>.accordion-header .accordion-button {background-color: #ffbb33; font-weight: bold;}
.accordion-button:not(.collapsed) {box-shadow: none;}
#lpCompanyInfo .card {border: 5px solid #eee;}
#lpCompanyInfo h3 {font-size: 120%; font-weight: 700;}
#lpCompanyInfo dt {color: #ff6600;}
#comPict, #comLogo {text-align: center;}
#comPict img {max-width: 80%;}
#comLogo img {max-width: 50%;}
#skchkLP06 h2 {color: #ff6600;}
#skchkLP06 h3 {background-color: #ff6600; text-align: center; color: #fff; padding: 5px; border-radius: 6px;}
#skchkLP06 h4 {color: #ff6600; font-weight: 700; padding-bottom: 5px; border-bottom: 1px solid #ccc; margin-top: 3%;}
#skchkLP06 h5 {color: #ff6600; font-weight: 700; margin-top: 5%;}

/* share */
.skchkLP02-box {margin-bottom: 24px; position: relative;}
.skchkLP02-box-pict {position: absolute; left: 0; bottom: 0; width: 100%;}
.skchkLP02-box img {max-width: 200px; margin-top: 3%; vertical-align: bottom;}
#sharePG .sklp0302 {margin-bottom: 5%;}
#sharePG #skchkLP03 {padding-bottom: 5%;}
#lpWhySKG .sklp0302, #shreLP03 .sklp0302 {margin-bottom: 0;}
#shreLP02 {}
#shreLP03 h2 {color: #fff;}
#shreLP03 .card {margin-bottom: 3%;}
.capsule-lists {list-style-type: none; padding-left: 0; text-align: center;}
.capsule-lists li {display: inline-block; margin: 0 10px; padding: 5px 12px; background-color: yellow; border: 2px solid #333; border-radius: 24px; font-weight: 700; min-width: 120px;}
.shrelp03box h3 {padding: 5px 8px; background-color: #333; color: #fff; border-radius: 6px; text-align: center;}
.shrelp03box img {margin-bottom: 24px; max-width: 240px; vertical-align: bottom;}
.sqr-point {
	display: inline-block;
	padding: 0 10px;
	text-align: center;
	font-size: 120%;
	font-weight: 700;
}
.skg-icon-box {text-align: center;}
.skg-icon-box img {max-width: 40%;}

/* form */
.formwrapper {position: relative;}
#formBttm {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 150px;
	background: #fff;
	z-index: 5;
}

/* leaseback */
#leasebackPG {padding-bottom: 0;}
#lbsec01 .card {
	background-color: #fffbe2;
	border-color: #ffbb33;
}
#lbsec01 .card-header {
	background-color: #ffbb33;
	text-align: center;
	font-weight: bold;
	color: #333;
}
#lbsec01 .card-header h3 {margin-bottom: 0; font-weight: bold;}
#lbsec01c1 ul {font-size: 160%; font-weight: bold;}
#lbsec01c3 .card .card-body {background-color: #e5e696;}
#lbsec01c3 h4 {font-weight: bold;}
#lbsec02 .card-body > h4 {font-weight: bold; text-align: center; margin-bottom: 24px; color: #ff6600;}
#lbsec02 .card .img-fluid, #lbsec03 .card .img-fluid {max-width: 400px;}
#lbsec02 h3 {
	margin: 5% 0;
	font-weight: bold;
}
#lbsec03 h3 {
	font-size: 200%;
	font-weight: bold;
	margin-bottom: 24px;
	color: #ff6600;
}
#lbsec03 .card-body > h4 {font-weight: bold; text-align: center; margin-bottom: 24px; color: #6eb92b;}
#lbsec03hdbtm {
	margin: 5% 0;
	font-size: 200%;
	font-weight: bold;
	color: #6eb92b;
}

/* responsive fixes */
@media screen and (min-width: 641px) {
	.view-pc, .br-pc {display: block;}
	#bttmSpan h3 {margin-top: 10px;}
	.halfpage {width: 80%; margin: 0 auto;}
	.sklpbttm-box {min-height: 140px; margin-top: -10%;}
	#skchkLP01bttm {padding-top: 0;}
	.sklpbox-lists {width: 70%; margin: 0 auto;}
	.skchk-lp02-box {min-height: 400px; margin-bottom: 24px;}
	.skchk-lp02-box h4 {margin-top: 5%; margin-bottom: 3%;}
	#skchkbxtxt02, #skchkbxtxt03, #skchkbxtxt04 {margin-top: 15%;}
	#whyskgCard02 h4 {margin-top: 10%;}
	#whyskgCard03 p:first-child {margin-top: 20%;}
	#lpPaymentFlow .halfpage {width: 50%;}
	#lpCompanyInfo dd {margin-bottom: 20px;}
	.skchkLP02-box {min-height: 320px;}
	.skchkLP02-box h4 {margin-top: 5%;}
	#headerContact .btn {margin-top: 2%;}
	#whySokugai ol {width: 75%; margin: 0 auto;}
	#lbsec03 h3 {font-size: 250%;}
	#lbsec02 .card-body > h4, #lbsec03 .card-body > h4 {font-size: 200%;}
	.coming-soon-pg {min-height: 700px; padding-top: 5%;}
	.icon-coming-soon {padding-left: 37%;}
	.hdr-logosider {padding-top: 0.5%;}
	.shrdlp2box {min-height: 300px;}
	iframe.ql-video {
		width: 100%;
		aspect-ratio: 16 / 9;
		height: auto;
	}
}
@media screen and (max-width: 640px) {
	.view-mb, .br-mb {display: block;}
	footer {padding-bottom: 35%;}
	#ffBTN {padding: 10px 0 10px 10px;}
	#hdrBrand img {max-width: 50%;}
	#siteLogo, #headerTel, #headerContact {text-align: center;}
	#headerContact {padding-top: 10px;}
	#homeTopSlide h3 {font-size: 100%;}
	h2.section-title {font-size: 200%;}
	#pageTitle h2 {font-size: 75%;}
	#whySokugai ol li {padding-left: 20%;}
	#companyProfileBox th {width: 25%;}
	#companyInfo th {width: 30%;}
	.ql-video {width: 100%!important; aspect-ratio: 16 / 9;}
}
@media screen and (max-width: 375px) {
	#whySokugai ol h3 {font-size: 120%;}
	.ws-subtitle, .copyright {font-size: 80%;}
	#pageTitle h2 {font-size: 60%;}
	#bttmSpan h3 {font-size: 100%;}
}