@charset "utf-8";
/*********************
 base
*********************/
*{ padding:0; margin:0; }
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	     -o-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	        box-sizing: border-box;
}
html{
	height:100%; 
	scroll-padding-top:80px;
	scrollbar-gutter:stable;
	scroll-behavior: smooth;
}
body{
	height:100%; 
	-webkit-text-size-adjust: 100%;
	width:100%;
	font-family: "IBM Plex Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, Roboto, sans-serif;
	font-size:16px;
	line-height:1.8em;
	letter-spacing: .09em;
	color:#4c3a1a;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-image: url(/img/bg.gif);
}
main { flex: 1; margin-top:75px; }

/*********************
 汎用
*********************/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}
img{ vertical-align:middle; }
ul{ list-style-type: none; }
a, button{ transition:0.1s; cursor:pointer; }
.sp{ display: none !important; }
@media screen and (max-width: 774px) {
	.pc{display: none !important;}
	.sp{display: inline-block !important;}
}
article{
	width:100%;
	max-width:1200px;
	margin:0 auto 0;
}
article h2.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}
p.title_txt,
h2.title_txt{
	text-align:center;
	color:#21ac38;
	font-weight:580;
	font-size:2em;
	letter-spacing: .2em;
	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;
}
.ellipsis_3{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
}

/*********************
 flexboxタグ
*********************/
.flexbox{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
.flextop{
	-webkit-box-align: flex-start;
	-webkit-align-items: flex-start;
	-ms-flex-align: flex-start;
	align-items: flex-start;
}
.flexright{
	-webkit-box-align: end;
	-webkit-align-items: end;
	-ms-flex-align: end;
	align-items: end;
}
.flexstretch{
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}
.flexbetween{
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.flexcenter{
	-webkit-justify-content: center;
	justify-content: center;
}

/*********************
 header
*********************/
header{
	background:#fff;
	position: fixed;
	width:100%;
	z-index:99;
}
header a:first-child{
	margin-right: auto;
}
header img{
	display:block;
	max-height:55px;
	margin:10px 0 10px 10px;
}
header h2{
	font-size:1em;
	padding-right:90px;
	font-weight: 500;
}
header h2 strong{
	font-weight:500;
	color:#da6e9c;
}

/** menu button start **/
header .menu_btn{
	display:inline-block;
	position: fixed;
	background:#21ac38;
	cursor: pointer;
	width: 75px;
	height:75px;
	top:0;
	right:0;
	z-index:999;
}
header .menu_btn p{
	display: inline-block;
	transition: all .4s;
	position: absolute;
	right: 20px;
	height: 2px;
	border-radius: 5px;
	background: #fff;
	width: 45%;
 }
header .menu_btn p:nth-of-type(1) { top:23px; }
header .menu_btn p:nth-of-type(2) { top:29px; }
header .menu_btn p:nth-of-type(3) { top:35px; }

header .menu_btn p:nth-of-type(3)::after {
	content:"Menu";
	position: absolute;
	top:1px;
	right:1px;
	color: #fff;
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing:.1em;
}
header .menu_btn.active p:nth-of-type(1) {
	top: 24px;
	right: 28px;
	transform: translateY(6px) rotate(-45deg);
	width: 30%;
}
header .menu_btn.active p:nth-of-type(2) { opacity: 0; }
header .menu_btn.active p:nth-of-type(3){
	top: 36px;
	right: 28px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
}
header .menu_btn.active p:nth-of-type(3)::after {
	content:"Close";
	transform: translateY(0) rotate(-45deg);
	top:2px;
	right:-22px;
}

/** menu list **/
header .menu_list{
	position: fixed;
	background:#fff;
	width:50vw;
	z-index:998;
	border-top:75px solid #21ac38;
	display:none;
	opacity: 0;
	height: 100vh;
	top:0;
	left:100%;
	color:#004ea2;
}
header .menu_list ul{
	display:block;
}
header .menu_list.active{
	animation-name:slideinRight;
	animation-duration:0.3s;
	animation-fill-mode:forwards;
	display:inline-block;
	filter: drop-shadow(0 0px 8px rgba(0, 0, 0, .2));
}
@keyframes slideinRight {
  0% {
	transform: translateX(100%);
  }
  100% {
	opacity: 1;
	transform: translateX(-100%);
  }
}
header .menu_list li{
	border-bottom:1px solid #ececec;
	display:block !important;
	height:58px;
	line-height:58px;
}
header .menu_list li a{
	color:#333;
	text-decoration:none;
	font-weight:500;
	position: relative;
	display: inline-block;
	padding:0 20px;
	width:100%;
	margin:0 0 0 5px !important;
}
header .menu_list li a:hover{
	text-decoration:none;
}
header .menu_list li a:before {
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 2px #21ac38;
	border-right: solid 2px #21ac38;
	transform: rotate(45deg);
	position: absolute;
	top: -1px;
	right: 30px;
	bottom: 0;
	margin: auto;
}
header .menu_list li a p {
	display:inline-block;
}
header .menu_list li a img {
	display:none;
}
/** menu button end **/


/*********************
 top_header
*********************/
#top_header{
	max-width:100%;
	margin:0 auto;
	background-image: url(/img/top_bg.gif);
}
#top_header div{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:35px 20px;
	position: relative;
}
#top_header div picture img{
	display:block;
	width:100%;
	margin:0 auto;
}
/** キャラクター **/
#top_header div #top_character{
	position: absolute;
	bottom:-12%;
	right:10px;
	width:60%;
	max-width:498px;
	max-height:266px;
	display:block;
}

/*********************
 select_car
*********************/
#select_car{
	text-align:center;
	padding:120px 15px 0;
}
#select_car picture{
	display:block;
	margin-bottom:60px;
}
#select_car picture img{
	max-width:100%;
}

/*********************
 reviews
*********************/
#reviews{
	width:100%;
	max-width:1000px;
	margin:120px auto;
}
#reviews h2{
	padding-bottom:25px;
}
.ugc-item{
	background:#fff;
	padding:25px;
	margin: 0 10px 15px;
	border-radius: 50px;
}
.ugc-item .header img{
	max-width:100px;
	margin-right:15px;
	padding:5px;
    background:#fffbe2;
	border-radius: 50%;
}
.ugc-item .header_text{
	line-height:1.4em;
}
.ugc-item .header h3{
	font-weight:500;
}
.ugc-item .header h3 span{
	font-size:0.8em;
}
.ugc-item time{
	font-size:0.8em;
	color:#999;
}
.ugc-item p{
	font-size:0.9em;
}
.ugc-item p span{
	display:inline-block;
	font-size:0.8em;
	padding-right:8px;
}
.ugc-item .ugc-content{
	border-top:1px solid #ebd7b9;
	padding-top:15px;
	margin-top:15px;
	font-size:0.8em;
	line-height:1.6em;
}
.ugc-item .modal_btn button{
	display:block;
	width:100%;
	padding:5px 0;
	margin-top:15px;
	text-align:center;
	border:0;
	height:30px;
	border-radius:15px;
	background:#21ac38;
	color:#fff;
}

/*********************
 shinsa_tuka
*********************/
#shinsa_tuka {
	max-width:100%;
	margin:0 auto;
	position: relative;
}
#shinsa_tuka:before{
	content: "";
	padding-top: 9.9%;	/*画像の高さ ÷ 画像の幅 × 100*/
	display: block;
	background: url(/img/wave_hr_top.webp) 0 0 no-repeat;
	background-size: cover;
}
#shinsa_tuka:after{
	content: "";
	padding-top: 9.9%;	/*画像の高さ ÷ 画像の幅 × 100*/
	display: block;
	background: url(/img/wave_hr_bottom.webp) 0 0 no-repeat;
	background-size: cover;
}
#shinsa_tuka div.bgcolor {
	background: #fbea86;
}
#shinsa_tuka div.bgcolor picture{
	display:block;
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:35px 20px;
	text-align: center;
}
#shinsa_tuka div.bgcolor picture img{
	display:block;
	width:100%;
	max-width:1000px;
	margin:0 auto;
}

/*********************
 yasui_riyuu
*********************/
#yasui_riyuu{
	text-align:center;
	padding:120px 15px 0;
}
#yasui_riyuu picture{
	display:block;
	margin-bottom:60px;
}
#yasui_riyuu picture img{
	max-width:100%;
}
#yasui_riyuu .hr_img{
	display:block;
	max-width:100%;
	margin:120px auto;
}

/*********************
 konyu_step
*********************/
#konuyu_step{
	max-width:830px;
	margin:120px auto;
}
#konuyu_step div{
	max-width:800px;
	margin:0 15px;
	background:#fff;
	padding:60px 20px;
	border-radius: 50px;
	text-align: center;
}
#konuyu_step picture{
	margin-top:40px;
	display:block;
}
#konuyu_step picture img{
	max-width:100%;
}

/*********************
 loanText
*********************/
#loanText{
	max-width:830px;
	margin: 30px auto 120px;
}
#loanText section{
	max-width: 800px;
	margin: 30px 15px 0;
	background: #fff;
	padding: 0px 40px 60px;
	border-radius: 50px;
	font-size:0.9em;
	line-height: 1.6em;
}
#loanText section h3{
	font-weight:500;
	color:#21ac38;
	font-size:1.4em;
	text-align: center;
	padding-top:60px;
	padding-bottom:5px;
	margin-bottom:15px;
	border-bottom:1px solid #ebd7b9;
}
#loanText section strong{
	font-weight:500;
	background:linear-gradient(transparent 50%, #ffff94 50%, #ffff94 80%, transparent 80%);
}
#loanText section strong.bgnone{
	background:transparent !important;
}


/*********************
 qa
*********************/
#qa{
	margin-bottom:120px;
}
#qa .title_txt{
	margin-bottom:30px;
}
#qa details{
	width:100%;
	max-width:800px;
	margin:0 auto;
}
#qa details summary{
	width:100%;
	padding:15px 30px;
	position: relative;
	background:#21ac38;
	cursor:pointer;
	color:#fff;
	font-weight:400;
	margin-top:10px;
}
#qa details summary.active{
	color:#fff;
	background:#21ac38;
}
#qa details summary:after{
	content: "＋";
	color:#fff;
	font-size: 1.4em;
	font-weight:400;
	position: absolute;
	right:20px;
}
#qa details summary.active:after{
	content: "－";
	color:#fff;
	font-size: 1.4em;
	font-weight:400;
	position: absolute;
	right:20px;
}
#qa details summary:before{
	content: "Q.";
	padding-right:10px;
}
#qa details p{
	padding:20px 30px;
	display: none;
	background:#fff;
}
#qa details p:before{
	content: "A.";
	color:#cf777c;
	padding-right:5px;
}

/*********************
 company
*********************/
#company ul{
	width:100%;
	max-width:800px;
	margin:30px auto 120px;
	background:#fff;
	border-radius: 50px;
	padding:40px;
}
#company ul li{
	padding-bottom:10px;
	border-bottom:1px solid #e1ded4;
	margin-bottom:10px;
}
#company ul li:last-child{
	padding-bottom:0;
	border-bottom:0;
	margin-bottom:0;
}
#company ul p{
	width:100px;
	font-weight:500;
}
#company ul div{
	width:calc(100% - 100px);
}

/*********************
 footer
*********************/
footer:before{
	content: "";
	display: block;
	height:112px;
	background-image: url(/img/footer_img.webp);
	background-repeat: repeat-x;
	background-size: contain;
}
footer p{
	text-align:center;
	font-size:0.8em;
	padding:30px 0;
}
footer ul.pc{
	display:none;
	position: fixed;
	top: 20%;
	right:0;
	z-index: 9;
}
footer ul.pc img{
	display:block;
	margin-bottom:2px;
}

/*********************
 consult
*********************/
#consult{
	padding-top:60px;
}
#consult #business_formBox{
	text-align:center;
}
#consult #business_formBox p{
	text-align:center;
}
#consult #business_formBox a{
	display:inline-block;
	text-decoration:none;
	padding:15px 60px;
	width:330px;
	background:#21ac38;
	color:#fff;
	border-radius: 15px;
	margin:20px auto 0;
	transition:0.3s;
}
#consult #business_formBox a:hover{
	opacity:0.7;
}
#consult .hr_img{
	display:block;
	max-width:100%;
	margin:60px auto;
}

/*********************
 form
*********************/
#form{
	width:100%;
	max-width:900px;
	margin:60px auto 120px;
}
#form .formitem{
	margin-top: 30px;
}
#form .formitem .formtxt {
    width: 200px;
    padding-top: 9px;
    padding-right: 60px;
    position: relative;
    font-size: 1em;
    font-weight: 500;
}
#form .formitem .explanation {
    width: calc(100% - 200px);
}
#form .formitem .explanation p {
    font-size: 0.8em;
}
#form select,
#form input[type="text"],
#form input[type="email"] {
    width: calc(100% - 200px);
    padding: 5px 10px;
    border-radius: 5px;
    height: 46px;
    font-size: 16px;
    border: 1px solid #4c3a1a;
    outline: none;
}
#form .formitem span select,
#form .formitem span input[type="text"],
#form .formitem span input[type="email"]{
	width:100%;
}
#form .w250{ width: 250px !important; }
#form .inquiry {
    width: calc(100% - 200px);
    padding: 5px 10px;
	line-height: 1.4em;
    border-radius: 5px;
    height: 250px;
    font-size: 16px;
    border: 1px solid #4c3a1a;
    outline: none;
}
#form .need:after {
    content: "必須";
	background:#f34334;
}
#form .neednot:after {
    content: "任意";
	background:#adadad;
}
#form .need:after,
#form .neednot:after {
	padding:0 5px;
	color:#fff;
	font-size:0.8em;
    position: absolute;
    right: 20px;
    top: 11px;
	border-radius: 5px;
	height: 22px;
	line-height: 22px;
}

/* 各種同意について */
#form .info{
	margin:30px 0;
	padding: 15px;
	background: #eee;
}
#form .info-inner{
	height: 180px;
	margin-top: 10px;
	margin-bottom: 15px;
	padding: 15px;
	overflow-y: scroll;
	line-height: 1.7;
	font-size: 12px;
	background: #fff;
	border: 1px solid #ccc;
}
#form .info-title{
	text-align: center;
	font-weight:500;
	font-size:1.4em;
	margin-bottom:20px;
}
#form .info-subtitle{
	font-weight:500;
	border-bottom: 1px dotted #ddd;
	margin:20px 0 10px;
}

#form .buttonbox{
	text-align:center;
	margin-top:80px;
}
#form .buttonbox button{
	background:#21ac38;
	color:#fff;	
	font-size:1.2em;
	font-weight:500;
	width:330px;
	padding:15px 60px;
    border: 0;
	border-radius: 15px;
	transition:0.3s;
}
#form .buttonbox button:hover{
	opacity:0.7;
}

/*********************
 thanks
*********************/
#thanks article{
	padding:40px 15px 0;
	width:100%;
	max-width:800px;
	margin:0 auto 60px;
}
#thanks section{
	background:#fff;
	border-radius: 15px;
	padding:40px 15px;
	text-align:center;
}
#thanks section h2{
	font-size:1.8em;
	font-weight:500;
	color:#21ac38;
}
#thanks img{
	display:block;
	width:60%;
	max-width:300px;
	margin:50px auto;
}
#thanks section p{
	display:inline-block;
	border-top:1px solid #21ac38;
	border-bottom:1px solid #21ac38;
	padding:10px 25px;
	margin:0 auto;
}
#thanks section p span{
	font-size:1.2em;
	font-weight:500;
	color:#21ac38;
}
#thanks a{
	display:block;
	margin:60px auto 0;
	background:#21ac38;
	color:#fff;	
	font-size:1.2em;
	font-weight:500;
	width:330px;
	padding:15px 60px;
    border: 0;
	border-radius: 15px;
	transition:0.3s;
	text-decoration:none;
	text-align:center;
}
#thanks a:hover{
	opacity:0.7;
}

/*********************
 report
*********************/
#review_icon div{
	flex-wrap: wrap;
	width:calc( 100% - 200px );
}
#review_icon input[type="radio"]{
   display: none;
}
#review_icon label {
	display:inline-block;
    width:calc( 100% / 8 );
	border-radius: 50%;
	cursor:pointer;
}
#review_icon label img{
	padding:5px;
	width:100%;
}
#review_icon input[type="radio"]:checked + img{
    background:#fcc;
	border-radius: 50%;
}

/*********************
 modal
*********************/
.open-modal{
	cursor:pointer;
}
#modal-container{
	width:calc(100% - 30px);
	margin:0;
	max-width:800px;
	display:none;
	position:fixed;
	top:50%; left:50%;
	transform:translate(-50%, -50%);
	background:white;
	z-index:10000;
	padding:20px;
	border-radius: 20px;
	max-height:80%;
	overflow-y: auto;
}
#modal-container #close-modal{
	position: absolute;
	right: 10px;
	top: 10px;
	background:#f34334;
	color:#fff;
	font-weight:500;
	font-size: 20px;
	line-height:30px;
	width:30px;
	height:30px;
	border:0;
	border-radius: 50%;
}
#modal-container img.modal-imageCenter{
	max-width:unset;
	width:100%;
	border-radius:0;
	background:#fff;
}
#modal-container .modal-pctel {
	text-align:center;
    padding: 25px;
}
#modal-container .modal-pctel img.ho-suke_icon {
	background: #fff;
	border-radius:0;
	max-width: 150px;
	margin-left: -30px;
}
#modal-container .modal-pctel img.lineqr_img {
	background: #fff;
	border-radius:0;
	max-width: 150px;
}
#modal-container .modal-pctel p{
	font-size:1.2em;
	color:#21ac38;
	font-weight:500;
	display:block;
	padding: 0 0 15px;
}
#modal-container .modal-pctel strong{
	font-size:2.2em;
	color:#21ac38;
	font-weight:500;
	display:block;
	padding: 0 0 10px;
}
#modal-overlay{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
	z-index:9999;
}