@charset "UTF-8";

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 300;
  src: local("Noto Sans CJK JP"),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.otf) format('opentype');
}

@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 500;
  src: local("Noto Sans CJK JP"), local("NotoSansJP-Regular"), local("NotoSansJP-Regular"), url("/font/NotoSansJP-Regular.woff2") format("woff2"), url("/font/NotoSansJP-Regular.woff") format("woff");
}
@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 600;
  src: local("NotoSansJP-Medium"),url("/font/NotoSansJP-Medium.ttf") format("ttf");
}
@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 700;
  src: local("NotoSansJP-Bold"), local("NotoSansJP-Bold"), url("/font/NotoSansJP-Bold.woff2") format("woff2"), url("/font/NotoSansJP-Bold.woff") format("woff");
}
@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 800;
  src: local("NotoSansJP-Black"), local("NotoSansJP-Black"), url("/font/NotoSansJP-Black.woff2") format("woff2"), url("/font/NotoSansJP-Black.woff") format("woff");
}

:target {
  scroll-margin-top: 40px;
}

/* --- hyundai_test_drive --- */
#abxhyundai {
    font-family: "NotoSansJP", "Noto Sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    line-height: 1.6;
    overflow: hidden;
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    text-align: left;
    width:100%;
    color:#111;
}
#abxhyundai img{
    width:100%;
}
#abxhyundai a{
    font-size:17px;
    font-weight:500;
    color:#111;
    text-decoration:underline;
    opacity:1;
    transition: 0.3s ease;
}
#abxhyundai a:hover{
    opacity:0.5;
    transition: 0.3s ease;
}
#abxhyundai a:active {
    opacity:1;
}
/* --- KV --- */
.kv01{
    display: flex;
    width:100%;
    background-color:#000;
    justify-content: center; 
}
.kvWrapp{
    width:1366px;
    margin:0 auto;
}
/* --- ABOUT --- */
.aboutBlock{
    width:100%;
    background-color:#E7EEF2;
    text-align:center;
    padding:80px;
}
.aboutBlock .ttl02{
    font-size:42px;
    font-weight:800;
    margin-bottom:0.5em;
}
.aboutBlock .tx01{
    font-size:17px;
    font-weight:500;
    margin-bottom:1em;
}
.aboutBlock .link01::after{
  content: "→";
  font-size:18px;
  padding:0 2px;
}
/* --- SHOWROOM --- */
.showroom{
    width:100%;
    margin:120px auto;
}
.showroom .ttl02 span{
    display:block;
    width:500px;
    margin:0 auto 10px;
}
.showroom .ttl02 em{
    display:block;
    text-align:center;
    font-size:42px;
    font-weight:800;
    margin-bottom:1em;
    line-height:1.1;
}
.showroom .ttl03{
    font-size:17px;
    font-weight:500;
    margin-bottom:2em;
    text-align:center;
}
.exShowroom{
    width:1000px;
    margin:0 auto 40px;
    display: flex;
    justify-content: space-between;
    letter-spacing:-0.3px;
}
.hCorner{
    width:480px;
    border-bottom:1px solid #333;
}
.hLounge{
    width:480px;
    border-bottom:1px solid #333;
}
.exShowroom .ttl04{
    font-size:24px;
    font-weight:700;
    text-align:left;
    border-top:4px solid #333;
    border-bottom:1px solid #333;
    line-height:2;
    padding:0 7px;
}
.exShowroom .tx02{
    font-size:17px;
    font-weight:500;
    padding:0.5em 7px 1em;
}
.exShowroom .tx02 b{
    font-weight:700;
    text-decoration:none;
}
.showroom .link02{
    font-size:17px;
    font-weight:500;
    text-align:center;
    margin-bottom:40px;
}
.showroom .kv02{
    width:100%;
    background-color:#E7EEF2;
    padding:40px 0;
}
.showroom .kv02 .kv2img{
    width:1000px;
    margin:0 auto;
}
.showroom .link02::after{
  content: "↓";
  font-size:17px;
  padding:0 2px;
}

/* --- TEST DRIVE --- */
.testDrive{
    width:100%;
    margin:120px 0;
}
.testDrive .ttl02{
    text-align:center;
    font-size:42px;
    font-weight:800;
    margin-bottom:0.5em;
    line-height:1.1;
}
.testDrive .ttl02 span{
    display:block;
    text-align:center;
    font-size:24px;
    font-weight:800;
    margin:0;
    line-height:2;
}
.testDrive .tx03{
    text-align:center;
    font-size:18px;
    font-weight:500;
    margin-bottom:1.5em;
}
.testDrive .link03{
    text-align:center;
    font-size:17px;
    font-weight:500;
    margin:0;
}

.testDrive .link03::after{
  content: "↓";
  font-size:17px;
  padding:0 2px;
}
.IONIQ5{
    width:100%;
    background-color:#E7EEF2;
    margin:40px 0 16px;
    padding:40px 0;
}
.KONA{
    width:100%;
    background-color:#E7EEF2;
    margin:0 0 120px;
    padding:40px 0;
}
.testDrive .inner{
    width:1000px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
}
.imgIONIQ5{
    width:500px;
}
.imgKONA{
    width:500px;
}
.txIONIQ5{
    width:450px;
    padding:45px 0 0 0;
}
.txIONIQ5 .ttl04{
    font-size:36px;
    font-weight:300;
}   
.txIONIQ5 .tx04{
    font-size:18px;
    font-weight:500;
    margin-bottom:1em;
}   
.txIONIQ5 .link02::after{
  content: "→";
  font-size:18px;
  padding:0 2px;
}

.txKONA{
    width:480px;
    padding:40px 0 0 0;
}
.txKONA .ttl04{
    font-size:36px;
    font-weight:300;
}   
.txKONA .tx04{
    font-size:18px;
    font-weight:500;
    margin-bottom:1em;
}   
.txKONA .link02::after{
  content: "→";
  font-size:18px;
  padding:0 2px;
}

/* --- STORE --- */
.storelist{
    width:800px;
    margin:0 auto 80px;
}
.storelist .ttl02{
    text-align:center;
    font-size:42px;
    font-weight:800;
    margin-bottom:0.5em;
    line-height:1.1;
}
.storelist .ttl02 span{
    display:block;
    text-align:center;
    font-size:24px;
    font-weight:800;
    margin:0;
    line-height:2;
}
.storelist .tx05{
    text-align:center;
    font-size:18px;
    font-weight:500;
    margin-bottom:40px;
}
.eachStore{
    width:800px;
    margin:0 auto;
}
.eachStore .ttl03{
    text-align:left;
    font-size:36px;
    font-weight:300;
    margin-bottom:0.5em;
}
.eachStore .prefName{
    font-size:24px;
    font-weight:700;
    line-height:2;
}
.byStore{
    border-top:4px solid #333;
    border-bottom:1px solid #cdcdcd;
    padding:0;
    margin-bottom:40px;
}
.byStore .ttl04{
    font-size:22px;
    font-weight:700;
    border-bottom:1px solid #cdcdcd;
    padding:24px 14px;
}
.byStore .storeInfo{
    display: flex;
    justify-content: left;
    padding:24px 14px;
    font-size:17px;
    font-weight:500;
}
.storeInfo .addr{
    width:75%;
}
.storeInfo .addr span{
    display:inline;
    margin-left:1em;
}

.storeInfo .teln{
    width:25%;
    text-align:right;
}
.yoyakuBtn{
    width:264px;
    padding:0 14px 24px 14px;
}
.storelist .tx06{
    padding-top:40px;
    font-size:17px;
    font-weight:500;
    text-align:center;
}
.kv03{
    display: flex;
    width:100%;
    background-color:#000;
    justify-content: center; 
    margin-bottom:120px;
}
.kvWrapp03{
    max-width:2000px;
    max-height:631px;
    overflow:hidden;
    margin:0 auto;
}
/* --- フローティングバナー --- */
.floatingBnr{
    width:116px;
    height:116px;
    position: fixed;
    bottom: 250px;
    right: 20px;
    text-align: center;
    opacity:0.9;
    transition: 1s ease;
}

.is-hidden {
/*     visibility: hidden; */
    opacity:0;
    transition: 1s ease;
}

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

    #abxhyundai {
        font-size: 4.5vw;
    }
    #abxhyundai img{
        width:100%;
    }
    #abxhyundai a{
        font-size:4.5vw;
    }
    
    /* --- KV --- */
    .kv01{
        display: block;
    }
    .kvWrapp{
        width:100%;
    }
    
    /* --- ABOUT --- */
    .aboutBlock{
        padding:10vw 4.3vw;
    }
    .aboutBlock .ttl02{
        font-size:7.5vw;
        margin-bottom:0.5em;
    }
    .aboutBlock .tx01{
        font-size:4.5vw;
        font-weight:500;
        margin-bottom:1em;
    }
    .aboutBlock .link01::after{
    font-size:4.8vw;
    }
    /* --- SHOWROOM --- */
    .showroom{
        width:100%;
        margin:21vw auto;
    }
    .showroom .ttl02 span{
        width:96vw;
        margin:0 auto 3vw;
    }
    .showroom .ttl02 em{
        font-size:7.4vw;
        margin-bottom:1.1em;
    }
    .showroom .ttl03{
        font-size:4.5vw;
    }
    .exShowroom{
        width:92vw;
        margin:0 auto 10vw;
        display: block;
        letter-spacing:normal;
    }
    .hCorner{
        width:100%;
        margin-bottom:10vw;
    }
    .hLounge{
        width:100%;
    }
    .exShowroom .ttl04{
        font-size:6.4vw;
        padding:0 2vw;
    }
    .exShowroom .tx02{
        font-size:4.5vw;
        padding:0.5em 2vw 1em;
    }
    .showroom .link02{
        font-size:4.5vw;
        margin-bottom:10vw;
    }
    .showroom .kv02{
        padding:0;
    }
    .showroom .kv02 .kv2img{
        width:100%;
    }
    .showroom .link02::after{
    font-size:4.5vw;
    }
    
    /* --- TEST DRIVE --- */
    .testDrive{
        width:100%;
        margin:30vw 0;
    }
    .testDrive .ttl02{
        font-size:7.4vw;
        margin-bottom:0.5em;
    }
    .testDrive .ttl02 span{
        font-size:4.5vw;
        line-height:2.5;
    }
    .testDrive .tx03{
        font-size:4.5vw;
    }
    .testDrive .link03{
        font-size:4.5vw;
    }
    .testDrive .link03::after{
        font-size:4.5vw;
    }
    .IONIQ5{
        width:100%;
        margin:10vw 0 5vw;
        padding:20vw 0;
    }
    .KONA{
        width:100%;
        margin:0 0 20vw;
        padding:20vw 0;
    }
    .testDrive .inner{
        width:92vw;
        margin:0 auto;
        display: block;
    }
    .imgIONIQ5{
        width:100%;
    }
    .KONA .inner{
        width:92vw;
        margin:0 auto;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column-reverse; 
    }
    .imgKONA{
        width:100%;
    }
    .txIONIQ5{
        width:100%;
        padding:10vw 0 0 0;
    }
    .txIONIQ5 .ttl04{
        font-size:5.8vw;
    }   
    .txIONIQ5 .tx04{
        font-size:4.5vw;
    }   
    .txIONIQ5 .link02::after{
        font-size:4.5vw;
    }
    .txKONA{
        width:480px;
        padding:40px 0 0 0;
    }
    .txKONA{
        width:100%;
        padding:10vw 0 0 0;
    }
    .txKONA .ttl04{
        font-size:5.8vw;
    }   
    .txKONA .tx04{
        font-size:4.5vw;
    }   
    .txKONA .link02::after{
        font-size:4.5vw;
    }
    
    /* --- STORE --- */
    .storelist{
        width:92vw;
        margin:0 auto 10vw;
    }
    .storelist .ttl02{
        font-size:7.4vw;
        margin-bottom:0.5em;
    }
    .storelist .ttl02 span{
        font-size:4.5vw;
        line-height:2.5;
    }
    .storelist .tx05{
        text-align:center;
        font-size:4.5vw;
        margin-bottom:10vw;
    }
    .eachStore{
        width:100%;
        margin:0 auto;
    }
    .eachStore .ttl03{
        font-size:7.4vw;
    }
    .eachStore .prefName{
        font-size:4.5vw;
    }
    .byStore{
        margin-bottom:10vw;
    }
    .byStore .ttl04{
        font-size:4.5vw;
        padding:1em 0;
    }
    .byStore .storeInfo{
        display: block;
        padding:1em 0;
        font-size:4.5vw;
    }
    
    .storeInfo .addr{
        display:inline-block;
        text-indent: -3.1em;
        margin:0 0 0 3.1em;
        word-break: normal;
    }
    .storeInfo .addr{
        width:calc(100% - 3.3em);
        margin-bottom:0.8em;
    }
    .storeInfo .teln{
        width:100%;
        margin-bottom:0.5em;
        text-align:left;
    }
    .yoyakuBtn{
        width:75vw;
        margin:0 auto;
        text-align:center
        padding:0;
    }
    .storelist .tx06{
        padding-top:0;
        font-size:4.5vw;
    }
    
    .kv03{
        display: block;
        width:100%;
        margin-bottom:20vw;
    }
    
    .kvWrapp03{
        width:100%;
        max-width:100%;
        max-height:auto;
    }

    /* --- フローティングバナー --- */
    .floatingBnr{
        width:64vw;
        height:auto;
        position: fixed;
        bottom: 5vh;
        right: 18vw;
        text-align: center;
        opacity:1;
        transition: 0.5s ease;
    }
    
    .is-hidden {
    /*     visibility: hidden; */
        opacity:0;
        transition: 1s ease;
    }

}
/* スマホここまで */