@charset "utf-8";

/* base------------------------ */
#pan { padding:5px 0; }
#pan li { display:inline-block; font-size:13px; color:#005ea6;}
#pan li a { color:#005ea6;}
#pan li:not(:first-child):before { content:">"; padding:0 5px; color:#000; font-weight: bold; }

/* common ------------------------ */
#contents { margin: 200px 0 0; min-height: 500px; }
section { margin-bottom: 50px; }

/* title------------------------ */
#contents {border-top: #005ea6 solid 7px;}
.pageTitle_a {margin-top: 0; width: 100%; height: 92px; background: url(../img/cate_ttl_bg.png) 0 bottom repeat-x; text-align: center;}
.pageTitle_a > p {width: 190px; margin: 0 auto -5px;}
.pageTitle_a h1 { display:block; font-size:40px; color:#005ea6; font-weight: bold; letter-spacing: 2px;
text-shadow :
       2px  2px 0px #ffffff,
      -2px  2px 0px #ffffff,
       2px -2px 0px #ffffff,
      -2px -2px 0px #ffffff,
       2px  0px 0px #ffffff,
       0px  2px 0px #ffffff,
      -2px  0px 0px #ffffff,
       0px -2px 0px #ffffff;}

.pageTitle { margin-top: 0; width: 100%; height: 92px; background: url(../img/cate_ttl_bg.png) 0 bottom repeat-x; text-align: center;}
.pageTitle > p {width: 170px; margin: 0 auto -8px;}
.pageTitle h1 { display:block; font-size:40px; font-weight: bold; letter-spacing: 2px;
text-shadow :
       2px  2px 0px #ffffff,
      -2px  2px 0px #ffffff,
       2px -2px 0px #ffffff,
      -2px -2px 0px #ffffff,
       2px  0px 0px #ffffff,
       0px  2px 0px #ffffff,
      -2px  0px 0px #ffffff,
       0px -2px 0px #ffffff;}

/* common 共通------------------------ */
.con_box { margin:50px 0; }
.con_box > .lBox, .con_box > .rBox { width:48%; }
.con_box > .lBox { margin-right:4%; }
.con_box .btn a { max-width:220px; margin-left:auto; }

.con_lead { position:relative; margin:40px 0 10px; padding:14px 220px 11px 100px; font-size:20px; text-align:center; background-color:#f5d825; }
.con_lead::before { content:""; position:absolute; width:68px; height:88px; right:130px; bottom:0; background:url(../img/service/chara_question.png) center / 100% no-repeat; }
.con_lead + .con_box { margin-top:35px; }

.link_li { margin-top:35px; }
.link_li > li + li { margin-left:35px; }
.link_li > li > a { position:relative; padding-left:20px; }
.link_li > li > a::before { content:""; position:absolute; top:4px; left:3px; width:5px; height:5px; border-top:2px solid #0c5395; border-right:2px solid #0c5395; -webkit-transform:rotate(135deg); transform:rotate(135deg); }

.read {font-size: 24px; font-weight: bold; text-align: center; padding:20px;}

.hatsuuri_mv_sp {display: none;}
.hatsuuri_mv video {margin: 20% 0 -20% 0;}

.webyoyaku {margin-block: 50px;}


/* medama 今週の目玉車
================================================================== */
#medama { }
.medamaBox ul li { width:24%; background-color:#fff; }
.medamaBox ul li:nth-child(n+5) { margin-top: 10px; }
.medamaBox ul li:not(:nth-child(4n+1)) { margin-left:1.3%; }
.medamaBox ul li a { display: block; opacity: 1; color: #000; text-decoration:none; -webkit-transition: all .3s; transition: all .3s; position: relative; }
.medamaBox ul li a .newAnime { display: block; width: 65px; top: 50px; right: 0; z-index: 99; }

.medamaBox .mImg { overflow: hidden; }
.medamaBox .name {
  height:3em; margin:0 0 -1px; padding:0 5px; text-align:center; line-height:1.2; color:#FFF; position:relative;
}
.medamaBox .name em {
  display:block; position:absolute; top:50%; left:50%; width:100%;
  transform:translateY(-50%) translateX(-50%);
  -webkit-transform:translateY(-50%) translateX(-50%);
}
.medamaBox .name span { margin-left:4px; }
.medamaBox .price { margin: 0; text-align:right; line-height:1.4; background-color: #eee; padding: 7px;}
.medamaBox .price > span { margin-left:12px; font-weight:bold; }
.medamaBox .price > span em { font-size:38px; }
.medamaBox .price_txt { margin: 0; text-align: center; line-height: 1.2; }
.medamaBox .price_txt span { display: block; font-size: 24px; font-weight: bold; }
.medamaBox dl:not(.price_cost):not(.data) { margin:0px; overflow:hidden; }
.medamaBox dl:not(.price_cost):not(.data) > :is(dt,dd) { float:left; padding:3px 0; }
.medamaBox dl:not(.price_cost):not(.data) > dt { width:35%; padding: 3px; }
.medamaBox dl:not(.price_cost):not(.data) > dd { width:65%; }

.medamaBox .data { margin:15px 0 0; overflow:hidden; font-size:13px; }
.medamaBox .data > div { display:-webkit-box; display:flex; flex-wrap:wrap; }
.medamaBox .data dt, .medamaBox .data dd { margin-bottom:5px; }
.medamaBox .data dt { padding:0 5px; text-align:center; color:#FFF; }
.medamaBox .data dd { padding:0 5px; }

.medamaBox .image { position:relative; }
.medamaBox .image > .ico { width:28%; position:absolute; top:2.5%; right:2%; z-index:999; }



/* company 会社紹介
================================================================== */
#access {margin: 50px 0;}
#access > #shop { padding: 0; background: none;}
.shop.secTtl { display:block; width:90%; }

.greeting_box > div {margin-top: 30px;}
.greeting_box .lead { width: 60%; }
.greeting_box .img { width: 35%; }
.greeting_box .name { font-size: 18px; }

#company {margin: 50px 0;}
#company dl,#history dl {width: 900px; margin: 30px auto;}
#company dl dt,#info dl dd,#history dl dt,#history dl dd {height: 40px; line-height: 40px; padding: 0 10px; margin-bottom: 2px;}
#company dl dt,#history dl dt {width: 150px; text-align: right;}
#company dl dd,#history dl dd {width: 750px;}
#company dl dd:before,#history dl dd:before {content:""; background:url(../img/round.svg) 0 center no-repeat; padding-right: 30px;}

#history dl dt.double,#history dl dd.double {height: 70px; line-height: 20px;}

/* スタッフ紹介ページ */
.staffList { margin-bottom: 50px; }
.staffList ul { padding: 20px 0 30px; }
.staffList li { width:30%; margin-bottom:40px; padding:10px; border:3px solid #005ea6; }
.staffList li + li { margin-left:45px; }
.staffList li:nth-child(3n+1) { margin-left:0; }
.staffList li > figure { max-width: 280px; margin:0 auto; }
.staffList li > p { margin:10px 0; font-weight:normal; }
.staffList li > span { font-weight:bold; }
.staffList li span:before { content: ""; padding-right:14px; padding-bottom:2px; background: url(/../img/round.svg) 0 center no-repeat; background-size:8px; }
.staffList .name { padding:5px; font-size:18px; text-align:center; color:#fff; background: #005ea6; }
.staffList .kana { font-size:14px; }
.staffList .kana:before { content:none; }
.staffList .comment { width:100%; }


/* お客様の声・納車式
================================================================== */
/* お客様の声 */
#enquete .maxNum { margin: 30px auto 0; text-align: center; }
#enquete .maxNum span { display: inline-block; font-size: 20px; position: relative; }
#enquete .maxNum span:before { content: ""; position: absolute; top: 16px; left: 0; width: 21px; height: 21px; }
#enquete .maxNum em { padding: 0 5px; font-size: 26px; color: #ba2222; }
.enquete_list { margin:30px auto 0; }
.enquete_list li { width: 32%; margin-bottom: 20px; padding: 50px 20px 20px; text-align: center; background: #fff; border: 2px solid #d4432b ; border-radius: 5px; position: relative; }
.enquete_list li:not(:nth-child(3n)) { margin-right:2%; }
.enquete_list li .date {
  position:absolute; top:0; left:0; width:100%; margin:0; padding:4px 0;
  text-align:center; color:#fff; font-size:13px; background:#d4432b ;
}
.enquete_list li p { margin: 0 auto; }
.enquete_list li .user { margin-bottom: 10px; text-align: left; }
.enquete_list li .user .nickname { font-size: 16px; font-weight: bold; line-height: 1.5; }
.enquete_list li .user .car_name { line-height: 1.5; }
.enquete_list li .user .car_name span { display: inline-block; font-size: 18px; font-weight: bold; color: #d4432b ; }
.enquete_list li .user .txt { margin-top: 20px; }
.enquete_list li .shop { margin-top: 25px; padding-top: 25px; border-top: 2px dashed #ddd; }

.enquete_list li .shop .response { font-weight: bold; }
.enquete_list li .shop .txt { margin-top: 5px; }

/* 納車式 */
.voice_list { margin:60px auto; }
.voice_list li { position:relative; width:230px; margin-bottom:50px; }
.voice_list li:not(:nth-child(4n)) { margin-right:20px; }
.voice_list li a {
  display:block; padding:10px; text-decoration:none; background:#eee;
}
.voice_list li a figure { transition:all .3s; -webkit-transition:all .3s; }
.voice_list li a:hover figure { opacity:0.7; }
.voice_list li .date {
  position:absolute; top:-28px; left:0; width:100%; margin:0; padding:4px 0;
  text-align:center; color:#fff; font-size:13px; background:#d4432b ;
  border-radius:5px 5px 0 0;
}
.voice_list li a:focus { outline:none; }
.voice_list li img { max-width:100%; }

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


/* プライバシーポリシー、クッキーポリシー ------------------------ */
.policyList { counter-reset:count; }
.policyList { padding: 30px 0; }
.policyList li>h3 {color: #005ea6; font-size: 20px; font-weight: bold;}
.policyList li>h3::before { counter-increment: count; content: counter(count)"."; margin-right: 5px; color: #005ea6; font-size: 24px; font-weight: bold; }

.policyList ul:not(.disc) { padding: 0 50px; }
.policyList ul:not(.disc)>li { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px dotted #ccc; }

#csr .policyList h2 { margin-bottom: 1em; color: #005ea6; font-size: 20px; font-weight: bold;}
#csr .policyList h2::before { counter-increment: count; content: counter(count)"."; margin-right: 5px; color: #005ea6; font-size: 24px; font-weight: bold; }
#csr .exp > h3 { margin-bottom:.3em; font-weight: bold; }
#csr .exp > p { margin-top:0; }
#csr .exp_term { padding:1em 1.5em; background:#fff4e2; }
#csr .exp_term > h4 { margin: 0 0 .5em; }
.policyList .num span { color: blue; }

/* contact お問い合わせ
================================================================== */
#contact .thanks { padding:20px; background: #eee; }
#contact .thanks h3 { margin-top:20px; margin-bottom:10px; padding-top:18px; font-size:16px; font-weight:bold; border-top:1px dashed #eeeeee; }
#contact .thanks .info { margin:0; }
#contact .thanks .info p { margin:5px 0; }
#contact .cmt_radio { margin:5px 0 10px; width:97%; }
#contact .cmt_radio label { display:block; margin-bottom:3px; padding:3px 5px; border-radius:3px; background:rgba(255,255,255,0.7); }
#contact .cmt_radio input[type="radio"] { margin:5px; }

.tab-nav { overflow: hidden; max-width: 600px; margin: 3em auto; border-radius: 5px; }
.tab-nav li { flex-grow: 1; }
.tab-nav li a { display: block; padding: 0.5em 1em; text-align: center; font-weight: bold; text-decoration: none; border: 3px solid #005ea6; background: #fff; }
.tab-nav li.current a { background: #005ea6; color: #fff; }

/* sitemap サイトマップ
================================================================== */
section.sitemap {padding-top: 30px;}
.sitemap li { padding:10px 0 7px; border-bottom:1px solid #e3e3e3;}
.sitemap + .sitemap { margin-left:80px; }
.sitemap a { position:relative; display:inline-block; text-decoration:none; font-weight:bold; font-size:15px; color: #005ea6;}
.sitemap > li > a { padding:0 20px; }
.sitemap > li > a:before { content:""; position:absolute; top:8px; left:0; width:7px; height:7px; background:#005ea6; border-radius: 50%; }
.sitemap li li:last-child {border-bottom: none;}
@media screen and (min-width: 784px) {
  .sitemap ul { margin:6px 0 0 26px; margin: 0 100px;}
/* PC用 */
}

/* nousya 納車式
================================================================== */
/* #nousya .nousya-list { margin-top: 3em;}
#nousya .nousya-list li { margin: 2% 0; width: 23.5%;}
#nousya .nousya-list li:not(:nth-of-type(4n-3)) { margin-left: 2%;}
#nousya .nousya-list li img { width: 100%; height: 200px; object-fit: cover;}
#nousya .nousya-list li .date {padding: 3px 0; margin: 0; background: #f28f00; color: #fff; text-align: center;}
#nousya .pagination span,
#nousya .pagination a { border: 1px solid #005ea6;}
#nousya .pagination span.current { background-color: #005ea6;} */

/* enquete ご来場アンケート
================================================================== */
#enqueteForm #contents { margin-top: 0;}

#enqueteForm .tbl { margin-top: 5em;}
#enqueteForm .secTtl + .tbl { margin-top: 2em;}

#enqueteForm .tbl > div { margin-bottom: 4em;}
#enqueteForm .tbl > div > dt { padding: 1em 1em 1em 3em; background: #0a64a9; color: #fff; position: relative;}
#enqueteForm.imo .tbl > div > dt { background: #51a829;}
#enqueteForm .tbl > div > dt::before { display: block; position: absolute; left: -3em; top: -3em; width: 6em; height: 6em; background: url(/img/enquete/royal-kun.png) no-repeat center /contain; content: "";}
#enqueteForm .tbl > div > dd { margin: 1em 0 0;}
#enqueteForm .tbl > div > dt > .required { float:right; display:inline-block; padding:0 .5em; background:#f89200; }

#enqueteForm input[type="text"],
#enqueteForm input[type="tel"],
#enqueteForm input[type="email"] { padding: .75em .5em; font-size: 1.1em;}
#enqueteForm select { padding: .5em 2em .5em .5em; font-size: 1.1em; border: 1px solid #333; -webkit-appearance: none; appearance: none; background: url(/img/enquete/arrow.png) no-repeat center right .5em /1em; }
#enqueteForm label { margin-bottom: 1em; white-space: nowrap;}
#enqueteForm .img-label label { text-align: center;}
#enqueteForm label > input[type="checkbox"]{ margin-right: .5em;}

#enqueteForm .checkbox-wrap { display: flex; flex-wrap: wrap;}
#enqueteForm .checkbox-wrap input[type="checkbox"],
#enqueteForm .checkbox-wrap input[type="radio"] { display: none;}
#enqueteForm .checkbox-wrap label { white-space: pre-wrap; display: flex !important; flex-direction: column; justify-content: center; align-items: center; padding: 1em !important; width: 23%; text-align: center; border-radius: 1em; border: 2px solid #ddd; box-shadow: 0 0 3px #ddd;}
#enqueteForm .checkbox-wrap input[type="checkbox"]:checked + label,
#enqueteForm .checkbox-wrap input[type="radio"]:checked + label { border-color: #f28f00;}
#enqueteForm .checkbox-wrap label:not(:last-of-type){ margin-right: 2%;}
#enqueteForm .checkbox-wrap .image > img { max-height: 100px;}
#enqueteForm .checkbox-wrap label .txt { display: block; pointer-events: none;}

#enqueteForm .staff-form.check { display: block;}
#enqueteForm .staff-form > dt { background: #f28f00 !important;}
#enqueteForm #tradein-content > * { margin: .5em 0;}
#enqueteForm .tbl > div > dd .img-item { margin-bottom: 1.5em; text-align: center;}

#enqueteForm .flo_nav { display: none !important;}

#enqueteForm .staff_txt { margin-block: 0 4em; padding: 1.5em 0; font-size: 1.4em; text-align: center; background: #DFEDF9; color: #0A64A9; }


@media screen and (max-width: 960px) {
  #enqueteForm .tbl > div > dt { padding-left: 5em;}
  #enqueteForm .tbl > div > dt::before { left: -1em;}
}