@charset "utf-8";

/* base ------------------------*/
.inner { width:1000px; margin:0 auto 10px; }
#wrapper { width:100%; }
#contents { padding-bottom:60px; }
#top #contents { padding-bottom:0; }

#pan { margin:30px auto 34px; text-align:right; }
#pan li { display:inline-block; font-size:13px; }
#pan li:not(:first-child):before { content:">"; padding:0 5px; color:#888; }

.mPlus { font-family:"Rounded Mplus 1c"; }
.b_line { text-decoration:underline; }

/* Title */
.title { margin-bottom:15px; padding-bottom:15px; font-size:30px; font-family:"Rounded Mplus 1c"; text-align:center; background-position:bottom 0 center; background-repeat:no-repeat; }

.subTitle { font-size:25px; text-align:center; font-family:"Rounded Mplus 1c"; }
.subTitle span { position:relative; }
.subTitle span:before { content:"・・"; position:absolute; top:-4px; left:-36px; letter-spacing:-43px; font-size:30px;}
.subTitle span:after { content:"・・"; position:absolute; top:-4px; right:-20px; letter-spacing:-43px; font-size:30px;}
.titleDesc { margin:0; border-top:6px solid; }
.titleDesc span { display:block; max-width:390px; margin:-4px auto 0; font-size:16px; text-align:center; border-radius:0 0 50px 50px; color:#FFF; }

.conTitle { margin-bottom:40px; padding-bottom:20px; font-size:25px; text-align:center; font-family:"Rounded Mplus 1c"; background-position:bottom 0 center; background-repeat:no-repeat; background-size:46px; }
#about .conTitle { background-image:url(../img/about/ball.png); }
#reason .conTitle { background-image:url(../img/reason/ball.png); }
#company .conTitle { background-image:url(../img/company/ball.png); }
#access .conTitle { background-image:url(../img/access/ball.png); }

/* header */
header .titleDesc { color:#de1424; }
header .titleDesc span { background:#de1424; }
header .titleDesc em { font-size:20px; font-weight:normal; }
header h1 { float:left; margin-right:20px; }
header h1 + p { float:left; }


header .InfoBox { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; }
header .InfoBox li { display: grid; grid-template-columns: subgrid; place-content: center; }

header .InfoBox p { margin:0; }
header .InfoBox .contact a ,header .InfoBox .reserve a { display:block; padding:10px 10px 8px 50px; border-radius:10px; color:#FFF;  }
header .InfoBox .contact a { background:#f99e00 url(../img/mail.png)no-repeat top 13px left 19px;}
.InfoBox .reserve a { background:#DE1424 url(../img/mail.png)no-repeat top 13px left 19px; }
header .InfoBox .line a { display: block; padding:10px 10px 8px 45px; border-radius:10px; color:#fff; background:#00b900 url(../img/line.png)no-repeat top 9px left 14px; }
header .tel { margin: 0 0 .5em 0; text-align: right; line-height: 1.2; }
header .tel a { font-size:2em; font-weight:bold; letter-spacing:0; color:#32a030; }
header .tel em { font-size:1.2em; }
footer .InfoBox { float:right; margin-top:-10px; }
footer .InfoBox p { margin:0; }
footer .InfoBox .contact a { display:block; padding:10px 30px 8px 60px; border-radius:10px; color:#FFF; background:#f99e00 url(../img/mail.png)no-repeat top 13px left 19px; }
footer .InfoBox .tel a { font-size:21px; font-weight:bold; letter-spacing:0; color:#32a030; }
footer .InfoBox .tel em { font-size:27px; }

footer .reserve { position: relative; margin-bottom: 2em; padding-block: 3em 2em; }
footer .reserve::after { content: ''; position: absolute; display: block; width: 100%; height: 100%; top: 0; background: url(../img/reserve_bg.jpg) center/cover no-repeat;}
footer .reserve .center { position: relative; z-index: 2; }

footer .reserve .txt { margin-block: 1em 2em; color: #fff; font-size: 1.2em; font-weight: bold;}
footer .reserve .txt > em  { color: #f99e00; font-size: 2.5em;}
footer .reserve .txt .txt-line { margin-inline: .2em; font-size: 1.6em; background:linear-gradient(transparent 85%, #FCF420 60%);}

footer .reserve .bnr-lead { margin-bottom: .5em; color: #FCF420; font-size: 1.5em; font-weight: bold; }
footer .reserve .bnr-lead span { position: relative;}
footer .reserve .bnr-lead span::before {content: ''; position: absolute; top: 50%; left: -10%; width: 1em; height: 2px; transform: translateY(-50%) rotate(60deg); background: #FCF420;}
footer .reserve .bnr-lead span::after {content: ''; position: absolute; top: 50%; right: -10%; width: 1em; height: 2px; transform: translateY(-50%) rotate(-60deg); background: #FCF420;}
footer .reserve figure img { width: 35%;}

footer .reserve .btn {  margin: 2em auto 1em; font-size: 1.2em;}
footer .reserve .btn a { padding: 0.8em 4em; color: #fff; font-weight: bold; background-color: #de1424; border: 2px solid #de1424; border-radius: 10px; }
footer .reserve .btn a::before { right: 30px;}
footer .reserve .btn a:hover { color:#de1424; background:#FFF; }
footer .reserve .btn a:hover::before { border-color:transparent transparent transparent #de1424; }

footer .reserve .tel-ttl { margin-block: 1.5em -.5em; font-size: 1.2em;}
footer .reserve .f-tel { margin-block: 0.5em; font-size: 1.5em;}
footer .reserve .shop-list { width: 90%; margin-inline: auto;}
footer .reserve .shop-list li { font-size: 1.7em;}
footer .reserve .tel a { color: #fff;}

.fbox .InfoBox .tel { margin: 0 0 .5em 0; line-height: 1.2; }


#gnav ul { overflow:hidden; display: flex; justify-content: center; }
#gnav ul li { float:left; margin:10px 0 20px; border-right:2px dotted #de1424; }
#gnav ul li:first-child { border-left:2px dotted #de1424; }
#gnav ul li a { display:inline-block; margin:0 5px; padding:5px 16px; border-radius:5px; }
#gnav ul li a:hover { background:#f7e3e4; }
#gnav ul li:first-child a,#gnav ul li:last-child a { padding:5px 23px; }


/* メーカーから探す
=============================================================== */
#makerSearch .title { margin-top:1.5em; background-image:url(../img/top/ball_r.png); }

/* ボディタイプから探す
=============================================================== */
#bodytypeSearch .title { margin-top:1.5em; background-image:url(../img/top/ball_r.png); }
#bodytypeSearch div { gap: 1em; }

/* 価格から探す
=============================================================== */
#priceSearch .title { margin-top:1.5em; background-image:url(../img/top/ball_r.png); }
.priceSearch_list{ margin: 3em auto 2em; }
.priceSearch_list li { position: relative; display:-webkit-flex; display:flex; flex-direction:-webkit-column; flex-direction:column;
  width:32%; margin-bottom:1em; text-align:center; padding: .6em; background: #de1424; border-radius: 10px;}
.priceSearch_list li figure { min-height:0%; padding:1em; background: #fff;}
.priceSearch_list p { margin: 0 auto; color: #fff; font-size: 1.2rem; font-weight: bold; }
.priceSearch_list span { position: relative; }
.priceSearch_list .click:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  right: -25%;
  top: 25%;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #FFF;
}
.priceSearch_list a { padding:.4em; }

/* お役立ち資料
=============================================================== */
#oyakudachi .txt { margin-bottom:40px; }
.oyakudachi_list li { display:-webkit-flex; display:flex; flex-direction:-webkit-column; flex-direction:column;
  width:31%; margin-bottom:40px; text-align:center; }
.oyakudachi_list li figure { min-height:0%; padding:17px 10px; border:1px solid #ccc; }
.oyakudachi_list li .btn { margin-top:auto; }
.oyakudachi_list li .btn a { display:block; padding:10px 30px 8px; border-radius:10px; color:#FFF; background:#f99e00; }
#oyakudachi .title { margin-top:40px; background-image:url(../img/top/ball_y.png); }
#oyakudachi .btn_list { max-width:400px; margin:0 auto 70px; }
#oyakudachi .btn_list .btn_dl { width:100%; }
#oyakudachi .btn_list .btn_dl:first-child a { display:block; padding:20px 30px 18px; border-radius:10px; color:#FFF; text-align:center; background:#DF1A29; }

/* pagetop------------------------ */
#pagetop { position:fixed; bottom:10%; right:20px; z-index:999; }
#pagetop div { margin-top:2px; }
.pagetop { display:block; z-index:1000; }

/* footer */
footer { margin-top:80px; border-top:6px solid #de1424; }
footer .flogo { float:left; }
footer .flogo + p { float:left; margin:40px 0 0 25px; }

footer .InfoBox { margin-top:10px; }
footer .fnav { background:#de1424; }
footer .fnav_list { margin-top:18px; padding:35px 0; overflow:hidden; }
footer .fnav_list > li { float:left; width:23%; }
footer .fnav_list > li:nth-child(2) { width:31%; }
footer .fnav_list li ul li { position:relative; margin-bottom:5px; padding-left:20px; }
footer .fnav_list li ul li:after { content:""; position:absolute; width:0; height:0; top:5px; left:0; border-style:solid; border-width:4px 0 4px 7px; border-color:transparent transparent transparent #FFF; }
footer .fnav_list p { margin:7px 0; }
footer .fnav_list li a { text-decoration:none; color:#FFF; }

#copyright { width:1000px; margin:0 auto; padding:18px 0 16px; color:#FFF; font-size:13px; border-top:1px dotted #FFf; letter-spacing:0.075em; text-align:center; }
#copyright a { color:#fff; text-decoration:none; }
#copyright a:hover { text-decoration:underline; }