@charset "UTF-8";

.sw-container {
  position: relative;
}

/*
  lt-hero
*/
.lt-hero_inner {
  position: relative;
}
.lt-hero_headline {
  font-family: "Nobel", "Lexus Rodin", "メイリオ",  sans-serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: .09em;
  line-height: 1;
}
.lt-hero_headline span {
  display: block;
  font-family: "Nobel", "Lexus Rodin", "メイリオ",  sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: .06em;
}
.lt-hero_text {
  font-family: "Nobel", "Lexus Rodin", "メイリオ",  sans-serif;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.83;
}

/*
  lt-map
*/
.lt-map_inner {
  background: #fff;
}
.lt-map_border {
  background-image: -moz-linear-gradient( -14deg, rgba(128,114,180,0.33) 0%, rgba(128,114,180,0.33) 11%, rgba(128,114,180,0.33) 33%, rgba(94,173,201,0.33) 100%);
  background-image: -webkit-linear-gradient( -14deg, rgba(128,114,180,0.33) 0%, rgba(128,114,180,0.33) 11%, rgba(128,114,180,0.33) 33%, rgba(94,173,201,0.33) 100%);
  background-image: -ms-linear-gradient( -14deg, rgba(128,114,180,0.33) 0%, rgba(128,114,180,0.33) 11%, rgba(128,114,180,0.33) 33%, rgba(94,173,201,0.33) 100%);
}
.lt-map_border iframe {
  width: 100%;
}

/*
  lt-note
*/
.lt-note_text {
  line-height: 1.875;
}
.lt-note_list li {
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1.875;
}
.lt-note_dl {
  line-height: 1.875;
}
.lt-note_underline:hover {
  opacity: 0.7;
}
.note_underline {
  text-decoration: underline;
}
.ico-external-link {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin: 0 0 0 5px;
  background: transparent url(/common/v2/images/icon/ico_external-link.png) no-repeat 0 2px;
  text-indent: 0;
}

/*
  lt-toplink
*/
.lt-toplink {
  text-align: center;
}
.lt-toplink_btn {
  position: relative;
  display: inline-block;
  background: #000;
  color: #fff;
  letter-spacing: .15em;
  transition: opacity 0.2s ease-out;
}
.lt-toplink_btn::after {
  position: absolute;
  content: "";
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.lt-toplink_btn:hover {
  opacity: .7;
}

@media screen and (max-width: 767px) {
  /*
    lt-hero
  */
  .lt-hero_inner {
    padding: 10.66vw 6.66vw 0;
  }
  .lt-hero_headline {
    font-size: 8.8vw;
  }
  .lt-hero_headline strong {
    margin-left: 2.66vw;
  }
  .lt-hero_headline span {
    margin-top: 2vw;
    font-size: 2.66vw;
  }
  .lt-hero_text {
    margin: 4.66vw 0 0;
    font-size: 3.2vw;
  }

  /*
    lt-map
  */
  .lt-map {
    margin-top: 12vw;
  }
  .lt-map_border {
    padding: 3.33vw;
  }
  .lt-map_border iframe {
    height: 76.4vw;
  }

  /*
    lt-note
  */
  .lt-note {
    margin-top: 5.33vw;
  }
  .lt-note_inner {
    padding: 0 7vw;
  }
  .lt-note_block:not(:first-child) {
    margin-top: 4vw;
  }
  .lt-note_text {
    font-size: 2vw;
  }
  .lt-note_list li {
    font-size: 2vw;
  }
  .lt-note_dl {
    font-size: 2vw;
  }

  /*
    lt-toplink
  */
  .lt-toplink {
    margin-top: 20.66vw;
  }
  .lt-toplink_btn {
    width: 66vw;
    padding: 3.6vw 0;
    font-size: 3.73vw;
  }
  .lt-toplink_btn::after {
    right: 4.53vw;
    top: calc(50% - 1.33vw);
    width: 2.66vw;
    height: 2.66vw;
  }
}

@media all and (max-width: 1280px) {
  .lt-hero_scroll {
    display: none;
  }
}

@media all and (min-width: 768px) {
  /*
    lt-hero
  */
  .lt-hero_inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 10px 0;
    box-sizing: border-box;
  }
  .lt-hero_headline {
    font-size: 65px;
  }
  .lt-hero_headline strong {
    margin-left: 15px;
  }
  .lt-hero_headline span {
    margin-top: 10px;
    font-size: 16px;
  }
  .lt-hero_text {
    margin-top: 40px;
    font-size: 15px;
  }
  .lt-hero_scroll {
    right: -150px;
    bottom: -100px;
  }

  /*
    lt-map
  */
  .lt-map {
    margin-top: 100px;
  }
  .lt-map_inner {
    max-width: 1000px;
    margin: 0 auto;
  }
  .lt-map_border {
    padding: 32px 35px;
  }
  .lt-map_border iframe {
    height: 762px;
  }

  /*
    lt-note
  */
  .lt-note {
    margin-top: 30px;
  }
  .lt-note_inner {
    max-width: 744px;
    margin: 0 auto;
  }
  .lt-note_block:not(:first-child) {
    margin-top: 15px;
  }
  .lt-note_text {
    font-size: 10px;
  }
  .lt-note_list li {
    font-size: 10px;
  }
  .lt-note_dl {
    font-size: 10px;
  }

  /*
    lt-toplink
  */
  .lt-toplink {
    margin-top: 190px;
  }
  .lt-toplink_btn {
    width: 310px;
    padding: 15px 0;
    font-size: 18px;
  }
  .lt-toplink_btn::after {
    right: 22px;
    top: calc(50% - 5px);
    width: 12px;
    height: 12px;
  }
}

/* -------------------------------------------
  Map
-------------------------------------------*/

/*//////////////////////////////////////////////////////
共通部分
//////////////////////////////////////////////////////*/


/* =====デザインをリセットする関係のCSSの定義=====　 */

@media all {
    /* ZDC担当部分内のみで、CSSのデフォルト定義をリセット */
    .ZBody div,
    .ZBody dl,
    .ZBody dt,
    .ZBody dd,
    .ZBody ul,
    .ZBody ol,
    .ZBody li,
    .ZBody h1,
    .ZBody h2,
    .ZBody h3,
    .ZBody h4,
    .ZBody h5,
    .ZBody h6,
    .ZBody pre,
    .ZBody code,
    .ZBody form,
    .ZBody fieldset,
    .ZBody legend,
    .ZBody input,
    .ZBody textarea,
    .ZBody p,
    .ZBody blockquote,
    .ZBody th,
    .ZBody td {
        margin: 0;
        padding: 0;
    }
    .ZBody table {
        border-spacing: 0;
    }
    .ZBody fieldset,
    .ZBody img {
        border: 0;
    }
    .ZBody address,
    .ZBody caption,
    .ZBody cite,
    .ZBody code,
    .ZBody dfn,
    .ZBody em,
    .ZBody strong,
    .ZBody th,
    .ZBody var {
        font-style: normal;
        font-weight: normal;
    }
    .ZBody ol,
    .ZBody ul {
        list-style: none;
    }
    .ZBody caption,
    .ZBody th {
        text-align: left;
    }
    .ZBody h1,
    .ZBody h2,
    .ZBody h3,
    .ZBody h4,
    .ZBody h5,
    .ZBody h6 {
        font-size: 100%;
        font-weight: normal;
    }
    .ZBody q:before,
    .ZBody q:after {
        content: '';
    }
    .ZBody a {
        color: #333;
        text-decoration: none;
    }
    .ZBody abbr,
    .ZBody acronym {
        border: 0;
        font-variant: normal;
    }
    .ZBody sup {
        vertical-align: text-top;
    }
    .ZBody sub {
        vertical-align: text-bottom;
    }
    .ZBody input,
    .ZBody textarea,
    .ZBody select {
        border: none;
        border-radius: 2px;
        outline: none;
        background: transparent;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-size: 100%;
    }
    .ZBody select::-ms-expand {
        display: none;
    }
    .ZBody input[type="text"],
    .ZBody input[type="password"],
    .ZBody textarea {
        padding: 5px;
        border: 1px solid #a9a9a9;
        border-radius: 0;
        outline: none;
        background: none;
        background-color: #fff;
    }
    .ZBody legend {
        color: #000;
    }
    .ZBody #yui3-css-stamp.cssreset {
        display: none;
    }
    .ZBody :focus {
        outline: none;
    }
}


/* =====リセット以外の内容ののCSSの定義=====　 */


/*全レスポンシブデザイン*/

@media all {
    .ZBody {
        color: #000;
        position: relative;
        background-color: #fff;
        font-size: 14px;
        font-family: Meiryo, "Hiragino Kaku Gothic Pro", "Hiragino Sans", Arial;
        scroll-behavior: smooth;
        z-index: 0;
        -webkit-text-size-adjust: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    #fullOverlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: white;
        z-index: 49;
    }
    /*--- button ---*/
    .ZBody button {
        position: relative;
        background: #333;
        display: inline;
        width: auto;
        padding: 0;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        border: none;
        border-radius: 4.6px;
        cursor: pointer;
        user-select: none;
    }
    .ZBody button.disable {
        opacity: 0.4;
        pointer-events: none;
    }
    .ZBody button.active {
        background: #757575;
    }
    /*** 線色 ***/
    /*青*/
    .auto_driving_area {
        border-color: #0435B1;
    }
    /*緑*/
    .rest_area_lane_indefinite {
        border-color: #00B001;
    }
    /*水色*/
    .rest_area {
        border-color: #7FE5FF;
    }
    /*** overlay_popup ***/
    .overlay_popup {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        display: none;
    }
    /* GPSエラー */
    #overlay_popup--gpsError {
        z-index: 20;
    }
    /* 地図読込中 */
    #overlay_popup--mapLoading {
        z-index: 98;
    }
    /* GPS読込中 */
    #overlay_popup--gpsLoading {
        z-index: 99;
    }
    .popup_inner {
        display: inline-block;
        width: 100%;
        min-width: 250px;
        height: auto;
        background: rgba(0, 0, 0, 0.75);
    }
    .popup_inner p {
        margin: 0;
        padding: 15px;
        color: #fff;
        text-align: center;
    }
    /*** map_item ***/
    #map_item {
        position: absolute;
    }
    #map_item button {
        z-index: 10;
    }
    #map_item .btn_location {
        position: absolute;
        bottom: 184px;
        left: 10px;
    }
    #map_item .btn_location button.location {
        position: relative;
        display: block;
        width: 36px;
        height: 36px;
        margin: 0;
        padding: 0;
        background: #333;
        border-radius: 0;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        background: url(../images/map_item_location.png) no-repeat center;
        background-size: 36px auto;
    }
    #map_item .btn_control {
        position: absolute;
        bottom: 46px;
        left: 10px;
    }
    #map_item .btn_control button#btn_plus,
    #map_item .btn_control button#btn_minus {
        position: relative;
        display: block;
        width: 36px;
        height: 36px;
        margin: 0;
        margin-top: 5px;
        padding: 0;
        background: #333;
        border-radius: 0;
        white-space: nowrap;
        overflow: hidden;
    }
    #map_item .btn_control button#btn_plus {
        background: url(../images/map_item_plus.png) no-repeat center;
        background-size: 36px auto;
    }
    #map_item .btn_control button#btn_minus {
        background: url(../images/map_item_minus.png) no-repeat center;
        background-size: 36px auto;
    }
    .pointer {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        display: block;
        width: 30px;
        height: 30px;
        margin: auto;
        padding: 0;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        background: url(../images/map_item_pointer.png) no-repeat center;
        background-size: 36px auto;
    }
    /*** ex_note ***/
    .ex_note {
        position: absolute;
        top: 10px;
        left: 10px;
        display: block;
        flex-direction: column;
        width: 286px;
        height: auto;
        margin: 0;
        padding: 0;
        z-index: 10;
    }
    .ex_note img {
        width: 100%;
        height: auto;
    }
}


/*PC表示*/

@media all and (min-width: 768px) {
    .ZBody {
        width: 100%;
    }
    .ZBody button {
        border-radius: 4.6px;
    }
    .ZBody button:hover {
        opacity: 0.8;
    }
    .ZBody button.active:hover {
        opacity: 1;
    }
    #mapArea {
        position: relative;
    }
    #ZMap {
        position: relative;
        background-size: cover;
        height: 560px;
        width: 100%;
        z-index: 1;
        margin: 0px;
        padding: 0px;
    }
    ul#map__areaMenu {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 10px;
    }
    ul#map__areaMenu li {
        flex: 1;
        margin-right: 5px;
    }
    ul#map__areaMenu li:last-child {
        margin-right: 0px;
    }
    ul#map__areaMenu li button {
        width: 100%;
        margin: 0;
        padding: 0;
        height: 30px;
    }
}


/*SP表示*/

@media screen and (max-width: 767px) {
    .ZBody {
        width: 100%;
        max-width: 335px;
    }
    #mapArea {
        position: relative;
    }
    #ZMap {
        position: relative;
        background-size: cover;
        max-width: 335px;
        height: 530px;
        width: 100%;
        z-index: 1;
        margin: auto;
        padding: 0px;
    }
    #map_item .btn_control {
        bottom: 44px;
    }
    ul#map__areaMenu {
        box-sizing: border-box;
        display: table;
        border-radius: 4.6px;
        margin-top: 7px;
        margin-left: auto;
        margin-right: auto;
    }
    ul#map__areaMenu li {
        display: inline-table;
        border-right: 1px solid #707070;
        height: 21px;
    }
    ul#map__areaMenu li:nth-child(1),
    ul#map__areaMenu li:nth-child(2),
    ul#map__areaMenu li:nth-child(3),
    ul#map__areaMenu li:nth-child(4),
    ul#map__areaMenu li:nth-child(5) {
        border-bottom: 1px solid #707070;
    }
    ul#map__areaMenu li:nth-child(5),
    ul#map__areaMenu li:nth-child(10) {
        border-right: none;
    }
    ul#map__areaMenu li button {
        margin: 0;
        border-radius: 0;
        height: 30px;
        overflow: hidden;
    }
    ul#map__areaMenu li:nth-child(1) button {
        border-radius: 3px 0 0 0;
    }
    ul#map__areaMenu li:nth-child(5) button {
        border-radius: 0 3px 0 0;
    }
    ul#map__areaMenu li:nth-child(6) button {
        border-radius: 0 0 0 3px;
    }
    ul#map__areaMenu li:nth-child(10) button {
        border-radius: 0 0 3px 0;
    }
}


/*//////////////////////////////////////////////////////
lexusのみ
//////////////////////////////////////////////////////*/


/*SP・PC共通*/

@media all {
    .ZBody {
        background: rgba(255, 255, 255, 0);
    }
}


/*PC表示*/

@media all and (min-width: 768px) {
    .ZBody {
        max-width: 960px;
    }
    #ZMap {
        max-width: 960px;
    }
    ul#map__areaMenu {
        max-width: 960px;
    }
    ul#map__areaMenu li button {
        min-width: 70px;
        font-size: 14px;
    }
}


/* 356px以上の際のSP用地域選択メニューデザイン */

@media screen and (min-width: 356px) and (max-width: 767px) {
    .popup_inner {
        min-width: 310px;
    }
    ul#map__areaMenu {
        max-width: 331px;
    }
    ul#map__areaMenu li button {
        width: 65px;
        font-size: 13px;
    }
}


/* 355px以下335px以上の際のSP用地域選択メニューデザイン */

@media screen and (min-width: 335px) and (max-width: 355px) {
    .popup_inner {
        min-width: 310px;
    }
    ul#map__areaMenu {
        max-width: 311px;
    }
    ul#map__areaMenu li button {
        width: 61px;
        font-size: 12px;
    }
}


/* 334px以下の際のSP用地域選択メニューデザイン */

@media screen and (max-width: 334px) {
    .popup_inner {
        min-width: 290px;
    }
    ul#map__areaMenu {
        max-width: 296px;
    }
    ul#map__areaMenu li button {
        width: 58px;
        font-size: 11px;
    }
}