@CHARSET "utf-8";

/* =============================================
                    RESET
============================================= */
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
h1,h2,h3,h4,h5,h6{font-weight:normal}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;outline:0}ins{text-decoration:none}
ins,mark{background-color:#ff9;color:#000}
mark{font-style:italic;font-weight:700}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
/* =============================================
                    COMMON
============================================= */
.cf {
    zoom: 1;
}
.cf:before, .cf:after {
    content: "";
    display: table;
}
.cf:after {
    clear: both;
}
ul,li{
    list-style: none;
}
/*  anchor  */
a{
  text-decoration: underline;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:link { color: #101010;}
a:visited{ color: #101010;}
a:hover,a.hover{ text-decoration: none;}
a:active{ color: #101010;}
/*
a.op:hover img,a.op.hover img{ filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}
.bb,.bb a{ font-weight: bold;}
*/

a.textlink:link { color: #101010;}
a.textlink:visited{ color: #101010;}
a.textlink:hover{ text-decoration: none;}
a.textlink:active{ color: #101010;}

table{
    border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0
}
input,select{vertical-align:middle}

@font-face{
    font-family:MazdaTypeRegular;
    src:url("/u-car/common/fonts/MazdaTypeTT-Regular.woff2") format("woff2"),
        url("/u-car/common/fonts/MazdaTypeTT-Regular.woff") format("woff"),
        url("/u-car/common/fonts/MazdaTypeTT-Regular.ttf") format("truetype")
}
@font-face{
    font-family:MazdaTypeMedium;
    src:url("/u-car/common/fonts/MazdaTypeTT-Medium.woff2") format("woff2"),
        url("/u-car/common/fonts/MazdaTypeTT-Medium.woff") format("woff"),
        url("/u-car/common/fonts/MazdaTypeTT-Medium.ttf") format("truetype")
}
@font-face{
    font-family:MazdaTypeBold;
    src:url("/u-car/common/fonts/MazdaTypeTT-Boldwoff2") format("woff2"),
        url("/u-car/common/fonts/MazdaTypeTT-Bold.woff") format("woff"),
        url("/u-car/common/fonts/MazdaTypeTT-Bold.ttf") format("truetype")
}
html{
    font-size:62.5%;
    -moz-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    -webkit-font-smoothing:subpixel-antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-tap-highlight-color:transparent
}
body,
html{-webkit-text-size-adjust:100%}
body{
    font-size:1.4em;
    line-height:1.4em;
    font-family:MazdaTypeRegular,Noto Sans CJK JP,Hiragino Kaku Gothic ProN,HiraKakuProN-W3,Meiryo,Yu Gothic Medium,sans-serif;
    color:#101010;
    background-color:#ffffff;
    min-height:100%;width:100%;overflow-y:scroll
}
sup{font-size:80%;vertical-align:super}
img{max-width:100%;height:auto}

  /*  common  */
  img{ width: 100%;}
  #grayLayer { display:none; position:absolute; z-index: 104; left:0; top:0; height:100%; width:100%; background:#ffffff; opacity: 0.7; }

  /*  header  */
  header > div{ background: #fff; position: relative;}
  header #logo-mazda{ width: 10%; margin: 0 0 2% 2%; padding: 2% 0 0;}
  header #logo-ucar{ width: 45%; margin-left: 15%; position: absolute; top: 10%; left: 0;}
  header #menu{ width: 11%; position: absolute; top: 8px; right: 8px;}

@media screen and (min-width: 720px){
header #logo-mazda{ width: 7%; margin: 0 0 5px 0%; padding: 10px 0 0;}
header #logo-ucar{ width: 301px; margin-left: 15%; position: absolute; top: 10px; left: 0;}
header #menu{ width: 7%; position: absolute; top: 8px; right: 8px;}
}

  header ul{
    width: 90%;
    margin-left: -45%;
    position:absolute;
    left: 50%;
    z-index: 105;
    display: none;
    border: 1px solid #3c3c3c; outline: 1px solid #000000;
    background: #ffffff; /* Old browsers */
      /*
    background: -moz-linear-gradient(top,  #323232 0%, #232323 100%);
    background: -webkit-linear-gradient(top,  #323232 0%,#232323 100%);
    background: -o-linear-gradient(top,  #323232 0%,#232323 100%);
    background: -ms-linear-gradient(top,  #323232 0%,#232323 100%);
    background: linear-gradient(to bottom,  #323232 0%,#232323 100%);
      */
  }
  header li{ border-bottom: 1px solid #3c3c3c;}
  header li a,header li span{ border-bottom: 1px solid #000000; font-size: 14px; display: block; padding: 20px 10px;}
  header li a{ background: url("/u-car/common/img/slink-arrow_red.png") 97% center no-repeat;}
  header li#close{ background: #000000; border-bottom: none; color: #cccccc; text-align: center;}

  header dl{ 
      border-top: 1px solid #f5f5f5;
      border-bottom: 1px solid #f5f5f5;
      background-color: #f0f0f0;
      /*outline: 1px solid #f5f5f5;*/
      margin-bottom: 5px;}
  header dt{ background: url("/u-car/common/img/calendar-arrow.png") right center no-repeat; padding: 5px 20px 5px 5px; float: left; cursor: pointer;}
  header dt span{ background: url("/u-car/common/img/calendar-ico02.png") left center no-repeat; padding: 2px 0 2px 28px;}
  header dt.hover{ color: #00A3DD;}
  header dd{ padding: 5px 8px 5px 5px; float: left;}
  header dd span{ color: #00A3DD;}


header dd span{
    color: #b7142e;
}

@media screen and (min-width: 720px){
    header > div {
        width: 960px;
        margin: 0 auto;
    }
}
    
/*  footer  */
footer{
	background: #333333;
	box-shadow: 0 10px 20px #222222;
	-webkit-box-shadow: 0 10px 20px #222222;
	-moz-box-shadow: 0 10px 20px #222222;
}
footer p{
	background: url("/u-car/common/img/contents-bg.png") left top repeat;
	box-shadow: 0 10px 20px -10px #222222 inset;
	-webkit-box-shadow: 0 10px 20px -10px #222222 inset;
	-moz-box-shadow: 0 10px 20px -10px #222222 inset;
	color: #cccccc;
	text-align: center;
}
@media screen and (max-width: 719px){
  footer > div{ padding: 10px 0 0;}
  footer #address{ width: 80%;}
  footer ul{ border-top: 1px solid #000000;}
  footer li{ border-bottom: 1px solid #3c3c3c;}
  footer li:first-child{ border-top: 1px solid #3c3c3c;}
  footer li a{ background: url("/u-car/common/img/slink-arrow_gray.png") 97% center no-repeat; border-bottom: 1px solid #000000; display: block; padding: 10px 10px;}
  footer p{ padding: 10px 10px 80px 10px; text-align: center; font-size: 10px;}
  footer p span{ display: block;}
  footer p small{line-height: 1.2em;}

  
}
@media screen and (min-width: 720px){
    footer{ min-width:960px; _display: inline; _zoom:1;}
    footer > div{ width: 960px; margin: 0 auto; padding: 10px 0 0;}
    footer #address{ float: left; margin-left: -85px;}
    footer ul{ float: right; font-size: 12px; width: 430px; margin-top: 15px;}
    footer li{ float: right; margin: 0 0 4px 20px;}
    footer li a{ background: url("/u-car/common/img/slink-arrow_gray.png") left center no-repeat; padding-left: 8px;}
    footer p{ font-size: 12px; padding: 20px 0;}
    footer p span{ display: inline-block; margin-left: 10px;}
}
    footer a { text-decoration: none;}
    footer a:link { color: #cccccc;}
    footer a:visited{ color: #cccccc;}
    footer a:hover,a.hover{ text-decoration: underline;}
    footer a:active{ color: #cccccc;}
/*  contents  */
#contents{
}

#contents > div{
    width: 100%;
    padding: 0 2% 2em;
    box-sizing: border-box;
}

@media screen and (min-width: 720px){
    #contents > div{
        width: 960px;
        padding: 0 0 0em;
        box-sizing: border-box;
        margin: 0 auto;
    }
}
    

    
#h1-wrap,
.h1-wrap {
    margin-top: 2em;
    padding-bottom: 1em;
}
#h1-wrap h1,
.h1-wrap h1 {
    font-weight: bold;
    font-size: 160%;
    line-height: 1.2;
}
#h1-wrap h1 > span,
.h1-wrap h1 > span {
}
#h1-wrap h1 > span > span,
.h1-wrap h1 > span > span {
    padding-left: 0.5em;
    font-size: 80%;
    color: #aaaaaa;
}