@charset "UTF-8";
/* --共通------------------------ */

/* パンくず */
#pan { margin:5px auto 30px; letter-spacing:-.4em; }
#pan li { display:inline-block; margin-right:9px; font-size:1.4rem; position:relative; letter-spacing:normal; }
#pan li:after { content:">"; margin-left:12px;}
#pan li:last-child:after { display:none;}
#pan a { text-decoration:underline; color: #000; }

/* タイトル類 */
.pageTtl{width: 100%; height: 200px; position: relative;}
.pageTtl img {width: 100%; height: 200px; object-fit: cover; }
.pageTtl h1 {text-align: center; margin: 0 auto; height: 100%; font-weight: 700; padding:2em 0; font-size:3rem; letter-spacing:2px; position: absolute; top: 0; left: 0; right: 0; margin: auto;}
.pageTtl h1::after { display:block; content:attr(data-txt); font-size:1.6rem; color: #e50012;}

h2.ttl {font-size: 3rem; font-weight: 700; letter-spacing: 1px; text-align: center; position: relative; margin: 0 auto 40px; position: relative; padding-bottom: 10px;}
h2.ttl::before {content: ''; display: block; width: 60px; height: 6px; background: url(../img/h3_icon.png) no-repeat; background-size: 100%; position: absolute; bottom: 0; left: 0; right: 0; margin: auto;}

h2.subTtl {font-size: 2.6rem; font-weight: 700; position: relative; margin: 0 0 30px; position: relative; padding-left: 23px; line-height: 34px;}
h2.subTtl::before {content: ''; display: block; width: 10px; height: 34px; background: url(../img/h4_icon.png) no-repeat; background-size: 100%; position: absolute; top: 0; left: 0;}

h3.ttl { font-size: 2.6rem; font-weight: 700; position: relative; margin: 0 0 30px; position: relative; padding-left: 23px; line-height: 34px;}
h3.ttl::before {content: ''; display: block; width: 10px; height: 34px; background: url(../img/h4_icon.png) no-repeat; background-size: 100%; position: absolute; top: 0; left: 0;}

section {margin-bottom: 80px;}

/* テーブル */
.form { border-collapse:collapse; max-width:820px; width:100%; margin: 50px auto; }
.form th { width:30%; padding:15px; text-align:left; background-color:#f7f7f7; border-bottom :1px dotted #5c2702;}
.form td { border-bottom :1px dotted #5c2702; padding:15px; }
.form .dashedBox{ padding: 15px 25px; }

.tMenu { border-collapse:collapse; width:100%; margin:0 auto;}
.tMenu th { width:48%; padding:8px 20px; text-align:left; background-color:#f4f4f4; border:1px solid #ccc; }
.tMenu th.tTtl { width:26%; margin:0; padding: 0.5em 0; font-size:1.8rem; font-weight:bold;
  text-align:center; background:#ffebbc; border-top:solid 10px #e80303; }
.tMenu td { width:26%; text-align:center; padding:8px 0; border:1px solid #ccc; }
.mark{ font-size:18px; font-weight:bold; color:#f62900; }
td .btnLink{ padding: 0 20px; font-size: 1.5rem; }

/* form --見積もり お問い合わせ-- */
input[name="zip1"], input[name="zip2"] { width:auto; }

.submit { margin:30px auto 50px; max-width:820px; }
.submit input { display:inline-block; margin:10px 20px; padding:0 50px; color:#fff;
  font-size:2rem; font-weight:bold; text-align:center; line-height:2.5;
  background:#e50012; border-radius:1.5em; box-shadow:0 5px 0 #999; }
.submit input[name="submit"] { order:2; }
.submit input[name="back"] { order:1; background:#999; box-shadow:0 5px 0 #ccc; }

.txtBox { width: 100%; padding: 50px 0; background:#eee; }
.txtBox .inner { width: auto; max-width: 96%; margin: 0 auto;}
.txtBox > *:first-child { margin-top:0; }
.txtBox > *:last-child { margin-bottom:0; }
.txtBox.thanks { margin:30px auto 60px; }

.noticeBox { max-width:640px; margin:1em auto; padding:.5em 1.5em; background:#eee; border:1px solid #444; }

.scrollWrap > table { width:100%; border-collapse:collapse; font-size:1.8rem; text-align:center; }

label.error { color:#f62900; margin-left: 1em; }

/* --料金・割引------------------------ */
.price_btn {margin-bottom: 50px;}
.price_btn li {}
.price_btn li h3 {color: #e50012; font-size: 1.8rem; font-weight: 700; line-height: 130%; display: block; width: 55%; padding: 20px 0 0; float: right;}
.price_btn li h3 span {font-size: 1.4rem; display: block;}
.price_btn li img {float: left; width: 40%}
.list_btn {cleafix: all; display: inline-block; background: #e50012; border-radius: 40px; padding: 0 40px; width: 240px; height: 50px; line-height: 50px; color: #fff; font-weight: 700; margin-bottom: 0;}

.priceBox {width: 95%; max-width: 800px; min-height: 220px; margin: 0 auto 20px; border: 3px solid #e50012; padding: 0 10px 40px; text-align: center; background: #fff; border-radius: 15px;}
.priceBox h3 {display: inline-block;font-size: 3rem; color: #e50012; font-weight: 700; text-align: center; padding-bottom: 15px; width: 100%;}
.priceBox h3 span {display: block; font-size: 1.4rem;}
.priceBox figure {max-width: 380px; margin: 0 auto;}

/* 料金表 */
.priceList {width: 100%; max-width: 900px; margin: 20px auto;}
.priceList td, .priceList th {padding:10px 15px 6px; font-size: 1.5rem; border: 1px solid #444; font-weight: 500; font-size: 1.5rem; text-align: center;}
.priceList th:first-child { white-space:nowrap; }
.priceList td.red,.priceList th.red{ color: #fff; background: #e50012;}
.priceList td.red {font-size: 2rem; font-weight: 700;}
.priceList.pc_only thead th { padding-block: 1.2em; line-height: 1.5; color: #fff; }
.priceList.pc_only tbody tr:nth-last-child(2) td, .priceList.pc_only tbody tr:last-child td { background: #fff2f3; }
.priceList.pc_only tbody tr:nth-last-child(2) th, .priceList.pc_only tbody tr:last-child th { color: #e50012; }
.techno .priceList.pc_only thead th { background: #3399ff; }
.safety .priceList.pc_only thead th { background: #e50012; }
.priceList .goukei td { background: #fcdadd;}
.priceList td em{ font-size:2rem; font-weight: 700;}
.priceList thead th:not(:first-child) { width: 18.5%; }
.notesList {margin-bottom: 40px; text-align: left;}

.acd-check{
    display: none;
}
.acd-label{
    color: #e50012;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
    position: relative;
}
/*
.acd-label:after{
    content: ""; display: block; width: 30px; height: 30px; position: absolute; top: 140px; right: 220px; background: url(../img/arrow.svg);}
*/
.acd-content{
    display: block;
    background: #fff;
    border-radius: 15px;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
}

.acd-check:checked + .acd-label + .acd-content{
    height: auto;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}

#otoku {padding: 70px 0 30px;}
#otoku .waribiki {margin-bottom: 35px; font-weight: 700;}
#otoku .waribiki img {max-width: 600px; width: 98%;}
#otoku li {width: 38.5%; margin: 18px; position: relative;}
#otoku li::before {content: ''; display: block; position: absolute; top: -53px; left: -37px; max-width: 105px; width: 30%; height: 105px; background: url(../img/price/otoku.png) no-repeat; background-size: 100%;}
#otoku li p {padding: 0 0.5em; font-size: 1.4rem;}
#otoku .bnr-tokuten { width: 70%; margin: 0 auto; }
#otoku .bnr-tokuten figure { position: relative; }
#otoku .bnr-tokuten figure::before {content: ''; display: block; position: absolute; top: -10%; left: -4%; width: min(10vw,123px); height: 124px; background: url(../img/price/otoku.png) no-repeat; background-size: 100%;}

.aboutprice img {max-width: 1000px; width: 100%;}


/* --車検の流れ------------------------ */
#flowbtn ul {margin: 40px auto;}
#flowbtn ul li { text-align: center; height: 50px; margin: 5px;}
#flowbtn ul li a {font-size: 1.8rem; color: #fff; font-weight: 500; background: #e50012; padding: 12px 40px; border-radius: 30px;}

#flowlist ul.list {counter-reset: number 0; max-width: 1000px; width: 90%; margin: 0 auto;}
#flowlist ul.list > li {border: 4px solid #e50012; background: #fff; padding: 0 80px 40px; margin-bottom: 30px; border-radius: 15px;}
#flowlist ul.list > li h3 {font-size: 2.8rem; text-align: center; position: relative; padding-top: 80px; margin-top: -4px; margin-bottom: 20px;}
#flowlist ul.list > li h3::before {counter-increment: number 1; content: counter(number) ""; display: block; background: #e50012; font-size: 4rem; color: #fff; font-weight: 500; width: 65px; height: 68px; position: absolute; top: 0; left: 0; right: 0; margin: auto;}
#flowlist ul.list > li .flex img {width: 48%;}
#flowlist ul.list > li .flex div {width: 48%; margin-bottom: 30px;}
#flowlist ul.list > li .flex div img {width: 100%;}

#flowlist ul.list > li:first-child {padding: 0 40px 40px;}
#flowlist ul.info {width: 100%; margin: 0 auto;}
#flowlist .reserve_btn {margin-bottom: 30px;}
#flowlist .reserve_btn a {display: block; margin: 0 auto; width: 48%; max-width: 560px; min-width: 500px; border: 2px solid #fff; box-shadow: 4px 4px 0 #444; width: 100%; font-weight: 700; font-size: 3rem; text-align: center; padding: 20px;}
#flowlist .reserve_btn span {font-size: 1.8rem; display: block; line-height: 100%;}
#flowlist .reserve_btn a { display: block; color: #fff; max-width: 480px; margin: auto;  padding: 20px 0; background: #e50012; border-radius: 60px; font-size: 2.5rem; font-weight: bold;   text-align: center; position: relative;   }
#flowlist .tel_btn {padding: 30px 20px 1px; width: 100%; color: #e50012;}
#flowlist .tel_btn h4 {font-size: 2.4rem; text-align: center;}
#flowlist .tel_btn ul li {width: 32%; text-align: center; line-height: 160%; font-size: 1.6rem; font-weight: 700; padding: 20px 0; color: #e50012; background: #fff; border-radius: 15px;}
#flowlist .tel_btn ul li a {font-size: 3rem; color: #e50012;}

#flowlist .item {background: #e50012; color: #fff; text-align: center; padding: 30px 0; border-radius: 15px; font-weight: 500;}
#flowlist .item h5 {font-size: 2.4rem;}
#flowlist .tenken h4 {font-size: 1.8rem; font-weight: 500;}
#flowlist .tenken h4:first-letter {font-size: 3rem;font-weight: 500; color: #e50012; margin-right: 5px;}
#flowlist .tenken div {border-bottom: 1px dotted #666; padding: 10px 0; display: flex; justify-content: space-between;}
#flowlist .tenken div:last-child {border: none;}
#flowlist .tenken dt {width: 455px;}
#flowlist .tenken dd {width: 328px;}
#flowlist .tenken div dd img {width: 100%;}
#flowlist .txt h5 {font-size: 1.8rem;}
#flowlist .guarantee {background: #fff45c; padding: 15px 0; text-align: center; font-weight: 500; font-size: 1.6rem;}


/* --車検メニュー------------------------ */
#menu section {margin-bottom: 60px;}
#menu_img ul li {width: 33.33%;}
#menulist .image{ width: 48%;}
#menulist .inner {max-width: 1000px;}
#menulist ul {width: 48%; margin-bottom: 50px;}
#menulist ul li {padding: 12px; margin-bottom: 2px; font-weight: 500;}
#menulist ul li:nth-child(2n) {background: #eee;}
#menulist ul li:nth-child(2n+1) {background: #fcdadd;}

/* --お見積もり------------------------ */
#es_reason ul li {border: 4px #eb6100 solid; width: 32%; margin-bottom: 30px;}
#es_reason ul li h3 {background: #feedd0; padding: 20px 25px 20px; font-size: 3rem; text-align: center; line-height: 140%; height: 160px;}
#es_reason ul li h3 .small {font-size: 2rem; display: block;}
#es_reason ul li h3 .orang {color: #eb6100;}
#es_reason ul li p {padding: 10px 20px;}

/* --店舗紹介------------------------ */
.shopinfo {margin-bottom: 40px; padding-bottom: 40px; border-bottom: 2px dotted #ccc;}
.shopinfo .slide { width:48%; align-self:flex-start; }
.shopinfo .info {width: 48%;}
.shopinfo dl {max-width: 1000px; margin: 0 auto 20px; border-top: 1px dotted #666;}
.shopinfo dt,.shopinfo dd {padding: 15px;}
.shopinfo dt {width: 30%; font-weight: 700; color: #666; letter-spacing: 2px;}
.shopinfo dd {width: 70%;}
.shopinfo dl div {border-bottom: 1px dotted #666; display: flex; justify-content: space-between; width: 100%;}
.gmap {width: 100%; height: 400px; margin: 30px auto 50px;}
.access {width: 100%;margin: 0 auto;}
.access li {width: 340px; padding: 0 20px 30px; }
.access h4 {font-size: 1.8rem; margin-bottom: 5px;}
.shopinfo h3 {font-size: 3rem; color: #e50012; font-weight: 700; width: 100%; display: inline-block; text-align: center; margin-bottom: .5em;}

/*----------------------------------------------------
タブレット
-----------------------------------------------------*/
@media screen and (max-width:896px) {

#pan { margin:0 auto 20px;}

/* タイトル類 */
.pageTtl{ height: 150px;}
.pageTtl img {height: 150px;}

h3.ttl {margin: 0 auto 30px;}

h3.subTtl {margin: 0 0 20px;}

h4 {margin: 0 0 20px;}


/* --お見積もり------------------------ */
#es_reason ul li { width: 100%; margin-bottom: 30px; }
#es_reason ul li h3 {height: auto; font-size: 2.4rem;}
#es_reason ul li h3 .small {font-size: 1.8rem;}

/* --車検の流れ------------------------ */
#flowlist ul.list > li {padding: 20px; margin-bottom: 30px;}

#flowlist ul.list > li p {margin-bottom: 20px;}
#flowlist ul.list > li h3 {font-size: 2.4rem; text-align: center; position: relative; padding-top: 50px; margin-top: -4px;}
#flowlist ul.list > li h3::before {font-size: 4rem;width: 65px; height: 60px; position: absolute; top: -18px; left: 0; right: 0; margin: auto;}
#flowlist ul.list > li .flex img {width: 100%;}
#flowlist ul.list > li .flex div {width: 100%; margin-bottom: 20px;}

ul.info {width: 100%; margin: 0 auto;}
ul.info li {margin-bottom: 10px;}

.tel_btn span {display: block;}

.tenken div {border-bottom: 2px dashed #666; padding: 10px 0; display: block;}
.tenken div:last-child {border: none;}
.tenken dt {width: 100%;}
.tenken dd {width: 100%;}
ul.info ul li { min-width: auto;  width: auto; }


/* --車検メニュー------------------------ */
#menu section {margin-bottom: 40px;}
#menulist .inner {max-width: 1000px;}
#menulist ul {width: 96%; margin: 0 auto;}
#menulist div ul:nth-child(2) {margin-bottom: 40px;}


.faqList { margin-bottom:20px; }
.faqList > li { padding:10px 0; }
.faqList > li + li { margin-top:20px; }

.faqList .question {padding:0 35px 0 20px; }
.faqList .question::after { width:12px; height:12px; right:15px; }

.faqList .answer { margin-top:0; padding:15px 10px; }


.access li {width: 100%;}
.shopinfo .gmap {width: 100%; margin: 0 auto 30px;}

/* テーブル */
.form th, .form td { display:block; width:100%; }
.form th { border-left:1px solid #ccc; }
.form tr:not(:first-child) th, .form td { border-top:none; }

.scrollWrap { width:100%; padding-top:20px; overflow-x:scroll; -webkit-overflow-scrolling:touch; }
.scrollWrap > .scroll { margin-bottom:20px; position:relative; }
.scrollWrap > .scroll:before { content:"横にスクロールできます→"; position:absolute; top:-20px; left:0; font-size:1.3rem; }

/* --車検の流れ------------------------ */
#flowbtn ul {margin: 30px auto;}
#flowbtn ul li {width: 100%; }
#flowbtn ul li a {width: 100%; font-size: 1.8rem; color: #fff; font-weight: 500; background: #e50012; padding: 12px 40px; border-radius: 30px;}

#flowlist ul.list {counter-reset: number 0; max-width: 1000px; width: 90%; margin: 0 auto;}
#flowlist ul.list > li {padding: 0 20px 20px; margin-bottom: 15px;}
#flowlist ul.list > li h3 {font-size: 2.8rem; text-align: center; position: relative; padding-top: 70px; margin-top: -4px; margin-bottom: 15px;}
#flowlist ul.list > li h3::before {counter-increment: number 1; content: counter(number) ""; display: block; background: #e50012; font-size: 4rem; color: #fff; font-weight: 500; width: 65px; height: 60px; position: absolute; top: 0; left: 0; right: 0; margin: auto;}
#flowlist ul.list > li .flex img {width: 100%;}
#flowlist ul.list > li .flex div {width: 100%; margin-bottom: 20px;}
#flowlist ul.list > li .flex div img {width: 100%;}

#flowlist ul.list > li:first-child {padding: 0 20px 20px;}
#flowlist ul.info {width: 100%; margin: 0 auto;}
#flowlist .reserve_btn {margin-bottom: 20px;}
#flowlist .reserve_btn a {display: block; margin: 0 auto; width: 100%; min-width: 0; border: 2px solid #fff; box-shadow: 4px 4px 0 #444; font-weight: 700; font-size: 3rem; text-align: center; padding: 20px;}
#flowlist .reserve_btn span {font-size: 1.8rem; display: block; line-height: 100%;}
#flowlist .reserve_btn a { display: block; color: #fff; margin: auto;  padding: 20px 0; background: #e50012; border-radius: 60px; font-size: 2.5rem; font-weight: bold;   text-align: center; position: relative;   }
#flowlist .tel_btn {padding: 20px 20px 1px; width: 100%; color: #e50012;}
#flowlist .tel_btn h4 {font-size: 2.4rem; text-align: center;}
#flowlist .tel_btn ul li {width: 100%; text-align: center; line-height: 160%; font-size: 1.6rem; font-weight: 700; padding: 20px 0; color: #e50012; background: #fff; border-radius: 15px;}
#flowlist .tel_btn ul li a {font-size: 3rem; color: #e50012;}

#flowlist .item {background: #e50012; color: #fff; text-align: center; padding: 30px 0; border-radius: 15px; font-weight: 500;}
#flowlist .item h5 {font-size: 2.4rem;}
#flowlist .tenken h4 {font-size: 1.8rem; font-weight: 500;}
#flowlist .tenken h4:first-letter {font-size: 3rem;font-weight: 500; color: #e50012; margin-right: 5px;}
#flowlist .tenken div {border-bottom: 1px dotted #666; padding: 10px 0; display: block;}
#flowlist .tenken div:first-child {padding-top: 0;}
#flowlist .tenken div:last-child {border: none;}
#flowlist .tenken dt {width: 100%;}
#flowlist .tenken dd {width: 100%;}
#flowlist .tenken div dd img {width: 100%;}
#flowlist .txt h5 {font-size: 1.8rem;}
#flowlist .guarantee {background: #fff45c; padding: 15px 0; text-align: center; font-weight: 500; font-size: 1.6rem;}


}

/*----------------------------------------------------
スマホ
-----------------------------------------------------*/
@media screen and (max-width: 480px) {

section {margin-bottom: 30px;}

.link_btn ul li a {font-size: 2.5rem;}

#price h2.ttl {line-height: 1.7; padding-bottom: 28px;}

/* --料金・割引------------------------ */

#aboutprice p {margin-bottom: 30px;}

.price_btn {margin-bottom: 50px;}
.price_btn > li { width: 100%; padding-inline: 0; }
.price_btn li h3 {color: #e50012; font-size: 1.8rem; font-weight: 700; line-height: 130%; display: block; width: 55%; float: right;}
.price_btn li h3 span {font-size: 1.4rem; display: block;}
.price_btn li img {float: left; width: 45%}
.priceBox {margin: 0 auto 30px; padding: 20px 15px 0; min-height: 0;}
.priceBox h3 {line-height: 150%;}

#otoku .bnr-tokuten { width: 90%; }
#otoku .bnr-tokuten figure::before { width: min(16vw,65px); }


/* 料金表 */
.priceList {margin-bottom: 20px;}

#otoku {padding: 40px 0 20px;}
#otoku li {width: 90%; margin: 0 auto 40px;}
#otoku li::before {content: ''; display: block; position: absolute; top: -33px; left: -27px; max-width: 115px; width: 40%; height: 115px;}
#otoku li p {padding: 0 0.5em;}


.shopinfo .slide, .shopinfo .info {width: 100%;}

}