@charset "UTF-8";

/* html5,body,font-size(h1-h6 p li dt dd),table. basic style setting in normalize.css */


/* common
----------------------------------------------- */
.inner {max-width: 1220px; padding: 0 20px; margin: auto}
.btn_link {background: linear-gradient(135deg, #009fee, #88d7ff); padding: 10px 50px; border-radius: 50px; font-size: 2rem; color: white !important;}

.embed_container {
position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
iframe, object, embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
}

#loading {position: fixed; width: 100%; height: 100%; z-index: 999; background: linear-gradient(135deg, #88d7ff, #009fee);; text-align:center; color: #fff;}
#loading_logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.fadeUp {animation-name: fadeUpAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity: 0;}
@keyframes fadeUpAnime{
from {opacity: 0;transform: translateY(10px);}
to {opacity: 1; transform: translateY(0);}
}


/* header
----------------------------------------------- */
header {background:url(../img/header_bg.svg) no-repeat center 200px, linear-gradient(135deg, #009fee, #88d7ff); padding: 30px 0 40px; margin-bottom: 30px}
header .inner {max-width: 100%; padding-left: 0; padding-right: 0}
header .thanks {background: white; padding: 20px; color: red; margin:-20px auto 40px; font-size: 1.8rem; max-width: 710px; }
header p, header h1, header h2, header dt, header dd {text-align: center; color: white} 
header dl {max-width: 1240px; margin: auto auto 90px; border-bottom: 1px solid rgba(255, 255, 255, 0.6);}
header dt {font-size: 1.6rem; margin-bottom: 8px}
header dd {font-size: 2rem; margin-bottom: 20px; font-weight: 500; margin-bottom: 20px}
header h1 {text-align: center; font-size: 2.4rem; margin-bottom: 60px}
header h1 span {background: white; padding: 6px 20px; color: #009fee;}
header h2 {margin-bottom: 60px}
header .term {margin-bottom: 80px}
header .cars {margin-bottom: 60px; padding: 0 20px; text-align: center}
header .cars img {filter: drop-shadow(0px 3px 5px rgba(0,0,0,0.4));}
header .logos {background: white; padding: 20px 0; text-align: center; margin-bottom: 50px; width: 100%}


/* main
----------------------------------------------- */
/* lead */
#lead {margin-bottom: 120px}
#lead .inner {max-width: 780px}
#lead p {text-align: center}
#lead .brand {font-size: 1.8rem; margin-bottom: 50px; letter-spacing: .14em}
#lead dl {margin: 140px auto 46px}
#lead dt {text-align: center;padding-bottom: 20px; font-size: 2rem; border-bottom: 1px solid silver; font-weight: 500}
#lead dd {padding: 20px 10px; border-bottom: 1px solid silver;}
#lead li {margin-bottom: 40px}

/* benefit */
#benefit {margin-bottom: 120px}
#benefit .inner > dl {width: calc(33.3333% - 90px / 3);}
#benefit .inner > dl > dt {text-align: center; padding-bottom: 14px; border-bottom: 1px solid #009fee; margin-bottom: 20px; font-size: 2rem; letter-spacing: .12em}
#benefit dd p {margin-bottom: 30px; font-size: 1.6rem}
#benefit .favor li {color: gray; font-size: 1rem}
#benefit .support dl {margin-bottom: 40px}
#benefit .support dl dt {text-align: center; font-size: 1.8rem; font-weight: 500}
#benefit .support dl dd {text-align: center}
#benefit .support p {padding: 10px; border: 1px solid #009fee; color: #009fee; text-align: center; max-width: 80%; margin: auto}
#benefit .talk dl dt {width: 40%}
#benefit .talk dl dd {width: 50%}


/* car */
#cars {margin-bottom: 100px}
#cars h2 {font-size: 2rem; border-bottom: 1px solid #009fee; padding-bottom: 10px; margin: auto auto 70px; text-align: center; max-width: 1160px;}
#cars .wrap {background: linear-gradient(0deg, #e1e1e1 0%, #fdfdfd 100%);margin-bottom: 100px}
#cars .wrap .to_dealer {text-align: center; padding-bottom: 36px; margin-top: -16px}
#cars .wrap .to_dealer a {padding: 5px 20px; background: white; border-radius: 4px; font-weight: 500}
#cars .wrap .to_dealer a:hover {background: linear-gradient(135deg, #009fee, #88d7ff); color: white; opacity: 1}
#cars .wrap .inner {max-width: 1320px}
#cars .wrap h3 {text-align: center; margin-bottom: 30px}
#cars .wrap dl {margin-bottom: 50px}
#cars .wrap dt {align-self: baseline; text-align: center}
#cars .wrap dt img {filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.3));}
#cars .wrap dd {text-align: center; padding-top: 14px; font-size: 1.6rem}
#cars #bmw dl {width: calc(50% - 120px / 2);}
#cars #mini dl {width: calc(50% - 120px / 2);}
#cars #mini dl:last-child img {max-width: 500px}
#cars #mini dd {font-family: serif}
#cars #peugeot dl {width: calc(50% - 120px / 2);}
#cars #peugeot dt img {}
#cars #citroen dt img {max-width: 500px}
#cars #fiat dt img {max-width: 500px}
#cars #abarth dt img {max-width: 500px}
#cars #jeep {margin-bottom: 20px}
#cars #jeep dl {width: calc(50% - 120px / 2);}
#cars #jeep dl img {}

/* info */
#info {background: linear-gradient(135deg, #88d7ff, #009fee); padding: 90px 0}
#info h2 {text-align: center; font-size: 1.8rem; margin-bottom: 60px; color: white}
#info h2 span {background: white; padding: 6px 20px; color: #009fee;}
#info h3 {margin-bottom: 80px; text-align: center}
#info h4 {margin-bottom: 80px; text-align: center}
#info #place h3 {color: white; text-align: center; margin-bottom: 20px; font-weight: 400}
#info #place .wrap {padding: 60px; background: white; margin-bottom: 100px}
#info #place .wrap .each:not(:last-child) {margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px dotted silver;}
#info #place .detail {width: 38%}
#info #place .detail > dl > dt {border-bottom: 1px solid silver; padding-bottom: 18px; margin-bottom: 20px}
#info #place .detail dd dl {display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 6px}
#info #place .detail dd dt {width: 15%; background: #f2f2f2; padding: 3px 6px; align-self: flex-start; text-align: center}
#info #place .detail dd dd {width: 80%; padding: 3px 0}
#info #place .map {width: 58%}
#info #contact h3 {color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding-bottom: 10px; margin-bottom: 30px}
#info #contact dl {margin-bottom: 50px}
#info #contact dt {text-align: center; color: white; font-size: 2rem; font-weight: 500; margin-bottom: 10px}
#info #contact dd {text-align: center; color: white; font-size: 1.6rem}
#info #contact li {margin: auto 12px;}
#info #contact li a {background: url(../img/arrow.svg) no-repeat 0 7px; padding-left: 12px; color: white}


/* footer
----------------------------------------------- */
footer {padding: 26px 0 16px}


/* to page top */
p.pagetop {position: fixed; bottom: 20px; right: 20px; opacity: 0; transform: scale(1.5); transition: all .5s; text-align: right; width: auto;}
p.pagetop a {display: block}
p.pagetop.show {opacity: 1; transform: scale(1);}




/*---------------------------------------------------------------------
 メディアクエリー Foundation 6 に準拠
---------------------------------------------------------------------*/

 /* スマホ「縦・横」対応 */
@media only screen and (min-device-width : 320px) and (max-device-width : 639px) {
.btn_link {font-size: 1.6rem}
header dt {font-size: 1.2rem}
header dd {font-size: 1.6rem}
header h1 {font-size: 1.8rem}


#lead .brand {font-size: 1.4rem}

#benefit .inner > dl {width: 100%; margin-bottom: 80px}
#benefit .inner > dl > dt {font-size: 1.8rem}
#benefit dd p {font-size: 1.4rem}

#cars .wrap h3 {padding-left: 40px; padding-right: 40px}
#cars .wrap dt img {max-width: 300px !important}
#cars #bmw dl {width: 100%}
#cars #mini dl {width: 100%}
#cars #peugeot dl {width: 100%}
#cars #jeep dl {width: 100%}

#info #place .wrap {padding: 20px}
#info #contact dt {font-size: 1.5rem}
#info #contact dd {font-size: 1.3rem}
#info #contact li {margin-bottom: 10px}
}


 /* スマホ・タブレット「縦・横」共通対応 */
@media only screen and (min-device-width : 320px) and (max-device-width : 1023px){
.no-br br {display: none}
header h2 {padding-left: 20px; padding-right: 20px}
header .logos {padding-left: 20px; padding-right: 20px}
header .kennan_caravan {padding-left: 20px; padding-right: 20px}
}


 /* スマホ「縦」向き対応 */
@media only screen and (min-device-width:320px) and (orientation:portrait) {
/* Styles */
}


 /* スマホ以降（320px 以下）iPhone SE */
@media only screen and (max-device-width:320px) {
#cars .wrap dt img {max-width: 260px !important}
}

 /* タブレット対応 */
@media only screen and (min-device-width : 640px) and (max-device-width : 1023px) {

#benefit .inner > dl {width: calc(50% - 40px / 2); margin-bottom: 60px}

#cars .wrap dt img {max-width: 300px !important}

#info #place .detail {width: 100%}
}


 /* スマホ以降（320px 以降） */
@media only screen and (min-width : 320px) {
/* Styles */
}


 /* タブレット以降（640px 以降） */
@media only screen and (min-width : 640px) {
#cars #mini dl:last-child {width: 100%; margin-top: -40px}
}


 /* 1024px以降 iPad 横 iPad 12.9 縦 含む */
@media only screen and (min-width : 1024px) {
header .logos img {max-width: 780px}
}

 /* 1025px以降 iPad 横 iPad 12.9 縦 以降 */
@media only screen and (min-width : 1025px) {

#cars .wrap dt img {}
}


/* PCモニター（1240px以降） */
@media only screen and (min-width : 1240px) {
/* Styles */
}


/* PCモニター大（1480px以降） */
@media only screen and (min-width : 1480px) {
/* Styles */
}


/*---------------------------------------------------------------------
 Edge hack
---------------------------------------------------------------------*/
@supports (-ms-ime-align: auto) {
/* Styles */
}


/*---------------------------------------------------------------------
 print
---------------------------------------------------------------------*/
@media print {
body {-webkit-print-color-adjust: exact;} // Chrome 背景色強制印刷
a[href]:after {content: "" !important;}
abbr[title]:after {content: "" !important;}
.show-for-small-only {display: none !important}
.pagetop.show {display: none !important}
body, h1, h2, h3, h4, h5, h6, li, dt, dd, p, th, td, .mincho {font-family: sans-serif !important} // Chrome印刷で日本語が表示されない対応
}