@charset "UTF-8";

/* -- 共通 ------------------------ */
#pagettl { text-align:center; margin-bottom:20px; padding:50px 0; line-height:1.4; color:#3687c3; }
#pagettl .jp { font-size:30px; }
#pagettl .en { font-size:20px; display:block; }

#pankuzu { margin-bottom:20px; }
#pankuzu li { display:inline-block; font-size:13px; }
#pankuzu li:not(:last-child):after { content:"＞"; padding-left:1em; padding-right:1em; }

.imgShadow { position:relative; margin-right:10px; margin-bottom:10px; z-index:5; }
.imgShadow:after { position:absolute; content:""; width:100%; height:100%; z-index:-1; background-color:#fbb726; top:10px; left:10px; right:-10px; bottom:-10px; }

#stock #pagettl { color:#f7841e; font-family: 'Kosugi Maru', sans-serif; }

/* -- 選ばれる理由 ------------------------ */
#reason #pagettl { color:#cb3b5d; }
#reason #secret .txt1 { text-align:center; margin-top:30px; margin-bottom:50px; }
#reason #secret .cheapReason > div { border-radius:10px; overflow:hidden; }
#reason #secret .cheapReason .list { padding:20px; }
#reason #secret .cheapReason .canDoList .list { background-color:#fff1f4; }
#reason #secret .cheapReason .requestList .list { background-color:#f1fff0; }
#reason #secret .cheapReason .list li:nth-child(n+2) { margin-top:15px; padding-top:15px; border-top:1px dashed #fbb726; }
#reason #secret .cheapReason .ttl1 { font-size:20px; padding:10px 20px; text-align:center; color:#fff; }
#reason #secret .cheapReason .canDoList .ttl1 { background-color:#cb3b5d; }
#reason #secret .cheapReason .requestList .ttl1 { background-color:#6da668; }
#reason #secret .cheapReason .ttl2 { position:relative; font-size:18px; padding-left:40px; margin-bottom:20px; }
#reason #secret .cheapReason .canDoList .ttl2 { color:#cb3b5d; }
#reason #secret .cheapReason .requestList .ttl2 { color:#6da668; }
#reason #secret .cheapReason .ttl2:before { position:absolute; content:""; display:inline-block; background-image:url(../img/reason/ico_good_ye.png); background-size:contain; background-repeat:no-repeat; width:30px; height:30px; top:0; left:0; }
#reason #stock .imgList { margin-top:30px; }
#reason #after .supportList { margin-top:30px; }
#reason #after .supportList li { padding:20px; background-image:url(../img/bg_dot.png); border-radius:10px; overflow:hidden; }
#reason #after .supportList li:nth-child(n+2) { margin-top:20px; }
#reason #after .supportList li.shaken { background-color:#c6e7ff; }
#reason #after .supportList li.bankinShuri { background-color:#ffe6c6; }
#reason #after .supportList li.hoken { background-color:#d0eecd; }
#reason #after .supportList li .img { width:33%; }
#reason #after .supportList li .img:after { bottom:-5px; right:-5px; }
#reason #after .supportList li .txtBox { width:62%; }
#reason #after .supportList li .ttl { font-size:23px; margin-bottom:10px; }
#reason #after .supportList li.shaken .ttl { color:#3687c3; }
#reason #after .supportList li.bankinShuri .ttl { color:#f7841e; }
#reason #after .supportList li.hoken .ttl { color:#6da668; }
#reason #carlife_support .conttl2, #reason #carlife_support .txt { text-align: center; }
#reason #carlife_support .img { text-align: center; margin-top: 40px; }
#reason .btnVoice { margin-top: 50px; text-align:center; }

/* --- お客様の声 / 納車式 --- */
/* ページナビ */
#reason .pageNav { border-radius:5px; overflow: hidden; margin-bottom: 30px; }
#reason .pageNav li { width:50%; float:left; }
#reason .pageNav li a { position:relative; display:block; padding:10px; text-align:center; font-size:16px; transition:all .3s; -webkit-transition:all .3s; }
#reason .pageNav li:nth-child(1) a { color: #3687c3; background-color: #c6e7ff; }
#reason .pageNav li:nth-child(2) a { color: #f7841e; background-color: #ffe6c6; }
#reason .pageNav li:nth-child(1) a:hover { background:#3687c3; color:#fff; }
#reason .pageNav li:nth-child(2) a:hover { background:#f7841e; color:#fff; }
#reason .pageNav li:nth-child(1) a.active { background:#3687c3; color:#fff; }
#reason .pageNav li:nth-child(2) a.active { background:#f7841e; color:#fff; }

/* 表示された内容 */
#reason .productList > li { position:relative; width: 31%; margin-bottom: 15px; padding:50px 20px 20px; text-align: center; background-color: #eee; border-radius:5px; }
#reason .productList > li:not(:nth-child(3n+1)) { margin-left: 3.5%; }
#reason .productList p.date { position:absolute; top:0; left:0; width:100%; padding:5px 10px; border-radius:5px 5px 0 0; color:#FFF; text-align:center; }
#reason.nousya .productList p.date { background:#3687c3; }
#reason.enquete .productList p.date { background:#f7841e; }
.is-empty { height: 0; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; background: none !important; }

/* -- 軽未使用車とは ------------------------ */
#about #pagettl { color:#6da668; }
#about .txt1 { text-align:center; }
#about .pointList > li { position:relative; margin-top:50px; background-image:url(../img/bg_dot.png); border-radius:10px; padding:20px 30px 20px 100px; }
#about .pointList li.point1 { background-color:#c6e7ff; }
#about .pointList li.point2 { background-color:#ffe6c6; }
#about .pointList li.point3 { background-color:#d0eecd; }
#about .pointList li.point4 { background-color:#ffd0d0; }
#about .pointList li .no { position:absolute; top:-20px; left:-20px; }
#about .pointList li .imgBox { width: 35%; }
#about .pointList li .txtBox { width: 62%; }
#about .pointList li .ttl { font-size:23px; margin-bottom:10px; }
#about .pointList li.point1 .ttl { color:#3687c3; }
#about .pointList li.point2 .ttl { color:#f7841e; }
#about .pointList li.point3 .ttl { color:#6da668; }
#about .pointList li.point4 .ttl { color:#cb3b5d; }
#about .merit { margin-top:80px; }
#about .merit .ttlBox .ttl { width:48%; color:#fff; border-radius:10px; text-align:center; font-size:20px; padding:5px 10px; }
#about .merit .ttlBox .unused { background-color:#f78521; }
#about .merit .ttlBox .used { background-color:#3687c3; }
#about .merit .meritList { max-width:880px; margin:0 auto; }
#about .merit .meritList li { margin-top:20px; background-color:#fffaee; background-image:url(../img/about/bg_meritlist_ttl.png); background-repeat:no-repeat; background-size:contain; background-position:center; }
#about .merit .meritList li .ttlImg { order:2; width:20%; text-align:center; padding:10px 0; }
#about .merit .meritList li .unused { order:1; width:40%; position:relative; padding:20px 20px 20px 100px; }
#about .merit .meritList li .used { order:3; width:40%; position:relative;  padding:20px 90px 20px 30px;  }
#about .merit .meritList li .img { position:absolute; border-radius:50%; }
#about .merit .meritList li .unused .img { left:-60px; top:0; background-color:#ffe6c6; border:3px solid #f7841e; padding:20px; }
#about .merit .meritList li .used .img { right:-60px; top:0; background-color:#c6e7ff; border:3px solid #3687c3; padding:25px 20px; }

/* -- 会社紹介 ------------------------ */
#company #pagettl { color:#714b87; }
#company #profile .imgBox { margin-top: 20px; }
#company #profile .imgBox li { width: 30.5%; }
#company #greeting { margin: 40px auto; }
#company #greeting .innerBox { max-width:800px; margin:0 auto; background-color:#fff; padding:30px 40px; }
#company #greeting .txtBox { width: 65%; }
#company #greeting .txtBox .name { text-align:right; margin-top:20px; }
#company #greeting .img { width: 30%; }
#company #access .detail { margin:20px auto 50px; }
#company #access .detail > div { width:48%; }
#company #access .detail .name { font-size:20px; color:#3687c3; border-bottom:2px solid #fbb726; padding-bottom:5px; margin-bottom:10px; }
#company #access .detail .ttl { font-size:18px; color:#3687c3; margin-bottom: 3px; }
#company #access .detail .train { margin-top: 20px; }
#company #access .detail .ttl .ico { position:relative; padding-left:35px; }
#company #access .detail .ttl .ico:before { position:absolute; content:""; display:inline-block; background-size:contain; background-repeat:no-repeat; }
#company #access .detail .car .ico:before { background-image:url(../img/ico_car.png); width:30px; height:15px; top: 5px; left:0; }
#company #access .detail .train .ico:before { background-image:url(../img/ico_train.png); width:21px; height:30px; top: 0; left:6px; }

/* -- スタッフ紹介 ------------------------ */
#staff .staffList li { width: 23%; text-align: center; padding: 20px; background-color: #ffe6c6; background-image: url(../img/bg_dot.png); border-radius: 10px; }
#staff .staffList li:not(:nth-child(4n+1)) { margin-left: 2.6%; }
#staff .staffList li:nth-child(n+5) { margin-top: 20px; }

#staff .staffList li .img { width:200px; height:200px; margin: 0 auto 10px; padding-top: 66.66%; overflow:hidden; border-radius:50%; overflow: hidden; position:relative; }
#staff .staffList li .img img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); max-width: inherit; max-height: 100%; }
#staff .staffList li .img:before { opacity:0; position: absolute; top:50%; transform: translateY(-50%); left:0; right:0; font-family: "Font Awesome 5 Free"; font-size: 50px; font-weight: 900; color: #fff; content: "\f002"; z-index:2; }
#staff .staffList li a { display:block; color: #333; text-decoration:none; }
#staff .staffList li a:focus { outline:none; }
#staff .staffList li .name { margin:0; font-size:23px; line-height:1.3; }
#staff .staffList li .post { color: #f7841e; font-size: 17px; }
#staff .staffList li.empty { height:0; margin-bottom:0; }

#staff .staffList li .img:before, #staff .staffList li .img:after,
#staff .staffList li a .img, #staff .staffList li a .img img { transition:all .3s; -webkit-transition:all .3s; }
#staff .staffList li a:hover .img { background:#000; }
#staff .staffList li a:hover .img:before, #staff .staffList li a:hover .img:after { opacity:0.8; }
#staff .staffList li a:hover .img img { opacity:0.7; }

#staff .staffCon { position:relative; width:100%; max-width:460px; margin: 0 auto; padding:30px; background-color: #ffe6c6; background-image: url(../img/bg_dot.png); }
#staff .staffCon .img { width: 300px; margin: 0 auto; text-align: center; }
#staff .staffCon .name { margin:6px 0 18px; font-size:24px; font-weight:500; border-bottom:2px solid #fbb726; }
#staff .staffCon .name .kana { margin-left:15px; font-size:16px; }
#staff .staffCon .post { text-align: center; margin: 10px auto 0; }
#staff .staffCon .post span { display:inline-block; padding:3px 20px; color:#fff; background:#f7841e; border-radius: 5px; }

#staff .staffCon { margin-top:22px; }
#staff .staffCon dt { float:left; clear:left; width:5em; margin-right:10px; text-align:center; color: #fff; background:#f47926; }
#staff .staffCon > * { margin-bottom:3px; padding:2px 6px; }

/* -- お問い合せ ------------------------ */
#contact .txtBox { max-width: 600px; margin: 0 auto 20px; }
.submitBox { max-width: 500px; margin: 20px auto 0; }
.submitBox .btn { text-align: center; }
.submitBox input { width: 200px; display: inline-block; padding: 8px 20px; background-color: #f7841e; border-radius: 5px; color: #fff; font-size: 17px; font-family: 'Kosugi Maru', sans-serif; transition: all 0.3s; -webkit-transition: all 0.3s; }
.submitBox input:hover { background-color: #ffb726; }
.submitBox.flex { flex-direction: row-reverse; -webkit-flex-direction: row-reverse; }
#contact.thanks .ttl { text-align: center; font-size: 20px; color: #3687c3; margin-bottom: 20px; }
#contact.thanks .btn { text-align: center; margin-top: 20px; }
#contact.thanks .btn a { width: 200px; display:block; padding: 8px 20px; background-color: #f7841e; border-radius: 5px; color: #fff; font-size: 17px; font-family: 'Kosugi Maru', sans-serif; margin: 0 auto; }
#contact.thanks .btn a:hover { background-color: #ffb726; }

/* pageNav */
.pageNav { margin-bottom:30px; border:2px solid #ffb726; border-radius:5px; }
.pageNav li { width:50%; float:left; }
.pageNav li a {
	position:relative; display:block; padding:12px 10px 8px 30px;
	text-align:center; font-size:16px; font-weight:bold; text-decoration:none;
	transition:all .3s; -webkit-transition:all .3s;
}
.pageNav li a:hover { background:#fff1d4; }
.pageNav li a.active { background:#ffb726; color:#fff; }

/* -- サイトマップ ------------------------ */
#sitemap .listBox { margin: 40px auto 0; }
#sitemap .list { display: inline-block; }
#sitemap .list > li { margin-bottom:30px; font-family: 'Kosugi Maru', sans-serif; }
#sitemap .list > li { margin-bottom: 20px; }
#sitemap .list > li > a { font-size: 16px; padding-left: 24px; position: relative; color: #3687c3; }
#sitemap .list > li > a:before { position: absolute; content: ""; top: 10px;
left: 0; width: 5px; height: 5px; border-top: 2px solid #fbb726; border-right: 2px solid #fbb726; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

#sitemap .list > li > ul { margin-left: 20px; }
#sitemap .list > li > ul li a { font-size: 14px; position: relative; }
#sitemap .list > li > ul li a:before { content: "・"; }

/* -- プライバシーポリシー ------------------------ */
#privacy .conttl2 { margin-bottom: 10px;  }
#privacy .conttl2:not(first-child) { margin-top: 30px; }
#privacy .addBox { padding: 20px; margin-top: 50px; }
#privacy .addBox .name { font-size: 18px; color: #3687c3; margin-bottom: 5px; }