@charset "UTF-8";
:root {
  --cl-blue: #305CCD;
  --cl-skyblue: #4AA0DF;
  --cl-elegant: #B8CB57;
  --cl-urban: #0062A0;
  --cl-black: #333;
}

* {
  font-family: 'Noto sans JP', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  line-height: 1.4;
  color: var(--cl-black);
}

.contents main p {
  text-align: initial;
  color: #333;
}

.l-main a:hover {
  text-decoration: none!important;
}

.l-main ul li img {
  margin: 0;
}

.pc-view {
  display: block;
}

.pc-inline-view {
  display: inline-block;
}

.sp-view {
  display: none;
}

span, dt, dd {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.scroll-pos {
  margin-top: -73px;
  padding-top: 73px;
}
#swift-interior.scroll-pos {
  margin-top: -170px;
  padding-top: 170px;
}
#option.scroll-pos {
  margin-top: -150px;
  padding-top: 150px;
}
.cont-inner {
  width: 100%;
  max-width: 980px;
  margin: auto;
  position: relative;
  z-index: 1;
}

.cont-inner1 {
  width: 90%;
  max-width: 980px;
  margin: auto;
  position: relative;
  z-index: 1;
  /* padding: 0px 10px; */
}

#swift-option{
  padding-top: 100px;
  margin-top: -100px;
}

.section-headline {
  text-align: center;
}

/*header*/
.l-header {
  background: var(--cl-skyblue);
}

.header-inner {
  max-width: 80%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.swift-logo {
  width: 245px;
  height: 87px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  position: relative;
}

.swift-logo .logo {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding-top: 32px;
  padding-bottom: 37px;
}

.swift-logo .logo:hover {
  background: rgba(40,150,200,0.3);
}

.header-nav {
  background: var(--cl-blue);
  width: calc(100% - 245px);
}

.header-nav__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}

.header-nav__list--item {
  width: calc(100% / 4);
  border-right: 1px solid #fff;
}

.header-nav__list--item a {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.2vmax;
  color: #fff;
}

.header-nav__list--item a:hover {
  background: #1267cf;
  text-decoration: none;
}

.l-main {
  background: #fff;
  padding: 0;
  margin: 0;
}

.hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 34px 0 100px;
  background: linear-gradient(180deg, #F2F3ED 0%, #fff 50%);
}

.hero-img {
  margin: 0 0 30px;
}
.hero-img .pconly {
  width: 100%;
  max-width: 1080px;
}

.hero-link a {
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 673px;
  height: 50px;
  border: 2px solid var(--cl-urban);
  font-size: 19px;
  font-weight: bold;
  color: var(--cl-urban);
  position: relative;
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
}

.hero-link a::after {
  content: url(../../img/swift/icon_arrow.png);
  position: absolute;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
}

.hero-link a:hover {
  text-decoration: none;
  background: var(--cl-urban);
  color: #fff;
}

.hero-link a:hover::after {
  content: url(../../img/swift/icon_arrow_w.png);
  right: 10px;
}

/*pickup*/
.pickup {
  padding: 100px 0 60px;
  background: -webkit-gradient(linear, left top, left bottom, from(#E7F3FB), to(#DBEDE9));
  background: linear-gradient(180deg, #E7F3FB 0%, #DBEDE9 100%);
}

.pickup .section-headline {
  margin: 0 0 29px;
}

.contents main p.pickup-text {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 0 0 40px;
}

.pickup-list__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 40px 0;
  border-top: 1px solid rgba(0, 98, 160, 0.5);
}

.pickup-img {
  min-width: 400px;
  margin: 0 32px 0 0;
}

.pickup-img img:not(:first-child) {
  margin: 20px 0 0;
}

h3.pickup-data__title {
  font-size: 16px;
  font-weight: bold;
  color: var(--cl-urban);
  border: none;
  padding: 0;
  margin: 0 0 10px;
}

h3.pickup-data__title.item-number {
  padding: 0 0 0 86px;
  margin: 0 0 16px;
  background: url(../../img/swift/img_logo_suzuki.png) no-repeat left center;
  height: 77px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

p.pickup-data__text {
  font-size: 14px;
  text-align: initial;
  margin: 0 0 16px;
  font-weight: bold;
}

p.pickup-data__item-name {
  font-size: 19px;
  font-weight: bold;
  text-align: initial;
  margin: 0;
}

.pickup-data__item-name--capture {
  font-size: 16px;
}

p.pickup-data__note {
  text-align: initial;
  font-size: 12px;
  margin: 0;
}

.pickup-data__note.ui-underline {
  border-bottom: 1px solid var(--cl-black);
}

p.pickup-data__price {
  text-align: initial;
  font-size: 16px;
  margin: 0;
}

.pickup-data__price--value {
  font-size: 24px;
  font-weight: bold;
}

.pickup-data__subject {
  margin: 12px 0 20px;
}

.pickup-data__subject--title {
  font-size: 14px;
  font-weight: bold;
  color: #f00;
}

.pickup-data__subject--list {
  font-size: 12px;
  margin: 0;
  padding-left: 1em;
  text-indent: -1em;
}

.pickup-cautions {
  border: 1px solid #f00;
  padding: 4px;
}

.contents main p.pickup-cautions__text {
  text-align: initial;
  font-size: 12px;
  color: #f00;
  margin: 0;
}

.pickup-point {
  padding: 8px 14px;
  margin: 0 0 10px;
  background: #fff;
}

.pickup-point__title {
  font-weight: bold;
}

.pickup-point__data {
  font-size: 12px;
}

.pickup-logo {
  text-align: initial;
  margin: 14px 0;
}

/*exterior*/
.exterior {
  padding: 100px 0 0;
}

.exterior .section-headline {
  margin: 0 0 29px;
}

.contents main p.exterior-text {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 0 0 47px;
}

.exterior .select-type__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.exterior .select-type__list .select-type__list--item {
  width: 50%;
}  

.exterior .select-type__list--img {
  margin: 0 0 20px;
}

.exterior .select-type__list--img img {
  width: 100%;
}

.exterior .select-type__list--text {
  font-size: 16px;
  width: 100%;
  max-width: 540px;
  margin: 0 auto 24px;
  padding: 0 20px;
}

.exterior .select-type__list--scroll {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.exterior .select-type__list--scroll a {
  width: 50px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}

.exterior .select-type__list--scroll a:hover {
  -webkit-animation: scroll 2s ease infinite;
          animation: scroll 2s ease infinite;
}

.exterior .select-type__list--scroll a::after {
  content: "Scroll";
  font-size: 16px;
  color: #999999;
  position: absolute;
  top: 50%;
  left: 32px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/*elegant-style*/
.modal-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #fff;
}
.modal-list.type-urban02 {
  border-top: none;
}

.modal-list__item {
  margin: 0;
}

.modal-list__item img {
  max-width: 100%;
}

.type-elegant .item-01 {
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.type-elegant .item-02 {
  border-bottom: 1px solid #fff;
}

.type-elegant .item-03 {
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
}


.type-elegant .item-06 {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

@media screen and (min-width: 767px) {
  .type-elegant .item-01 {
    width: 66.87%;
    margin: 0;
  }
  
  .type-elegant .item-02 {
    width: 33.13%;
    margin: 0;
  }
  
  .type-elegant .item-03 {
    width: 50.1%;
    margin: 0;
  }
  
  .type-elegant .item-04 {
    width: 49.9%;
    margin: 0;
  }
  
  .type-elegant .item-05 {
    width: 33.33%;
    margin: 0;
  }
  
  .type-elegant .item-06 {
    width: 33.33%;
    margin: 0;
  }
  
  .type-elegant .item-07 {
    width: 33.33%;
    margin: 0;
  }  
}

.modal-list__item a {
  position: relative;
  overflow: hidden;
  display: block;
}

.modal-list__item a img {
  transition: .35s all;
}

.modal-list__item a::after {
  content: "";
  width: 27px;
  height: 27px;
  background: url(../../img/swift/icon_expansion.png) no-repeat center/cover;
  position: absolute;
  top: 12px;
  right: 12px;
}

.modal-list__item a:hover img {
  transform: scale(1.2);
  transition: 1s all;
}

.modal-list__item a:hover .parts-title {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.modal-list__item a .parts-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  padding: 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.elegant-style {
  position: relative;
  padding: 147px 0 0;
}

.elegant-style:after {
  content: "";
  width: 100%;
  height: 1500px;
  background: -webkit-gradient(linear, left top, left bottom, from(#B8CB57), to(rgba(184, 203, 87, 0)));
  background: linear-gradient(180deg, #B8CB57 0%, rgba(184, 203, 87, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  -webkit-clip-path: polygon(0 25%, 100% 0%, 100% 75%, 0% 100%);
          clip-path: polygon(0 25%, 100% 0%, 100% 75%, 0% 100%);
}

.elegant-style .section-headline {
  margin: 0 0 40px;
}

/*urban-style*/
.urban-style {
  position: relative;
  padding: 200px 0 0;
}

.urban-style::after {
  content: "";
  width: 100%;
  height: 1550px;
  background: -webkit-gradient(linear, left top, left bottom, from(#0062A0), color-stop(96.09%, rgba(0, 98, 160, 0)));
  background: linear-gradient(180deg, #0062A0 0%, rgba(0, 98, 160, 0) 96.09%);
  position: absolute;
  top: -140px;
  left: 0;
  z-index: 0;
  -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 75%);
          clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 75%);
}

.urban-style .section-headline {
  margin: 0 0 40px;
}

.type-urban .item-01 {
  border-right: 1px solid #fff;
}

.type-urban .item-02 {
  border-bottom: 1px solid #fff;
}

@media screen and (min-width: 767px) {
  .type-urban .item-01 {
    width: 66.87%;
    margin: 0;
  }
  .type-urban .item-02 {
    margin: 0;
  }
  .type-urban .item-03 {
    margin: 0;
  }
  .type-urban02 .item-04 {
    margin: 0;
  }
  .type-urban__side {
    width: 40.85%;
  }
}


/*interior*/
.interior {
  padding: 60px 0 100px;
  position: relative;
}

.interior::after {
  content: "";
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#333), color-stop(108.19%, rgba(51, 51, 51, 0)));
  background: linear-gradient(180deg, #333 0%, rgba(51, 51, 51, 0) 108.19%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.interior .section-headline {
  margin: 0 0 48px;
}

.contents main p.interior__text {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  margin: 0 0 45px;
}

.type-interior .item-01 {
  border-bottom: 1px solid #fff;
}

.type-interior .item-03 {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.type-interior02 .item-05 {
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.type-interior02 .item-06 {
  border-right: 1px solid #fff;
}

.type-interior02 {
  border-top: none;
}

@media screen and (min-width: 767px) {
  [class*="type-interior"] .item-01 {
    width: 100%;
    margin: 0;
  }
  [class*="type-interior"] .item-02 {
    width: 33.23%;
    margin: 0;
  }
  [class*="type-interior"] .item-03 {
    width: 33.53%;
    margin: 0;
  }
  [class*="type-interior"] .item-04 {
    width: 33.24%;
    margin: 0;
  }
  [class*="type-interior"] .item-05 {
    margin: 0;
  }
  [class*="type-interior"] .item-06 {
    margin: 0;
  }
  [class*="type-interior"] .modal-list4 {
    width: 66.76%;
    margin: 0;
  }
  [class*="type-interior"] .item-07 {
    width: 33.24%;
    margin: 0;
  }
}

/*parts-modal*/
.parts-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(43, 46, 56, 0.9);
  z-index: 1001;
}

.parts-modal__img {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: .5s ease all;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.8);
  max-width: 90vh;
}

.parts-modal__img.is-show {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

/*option*/
.option {
  padding: 40px 0 80px;
  background: url(../../img/swift/bg_option.png) no-repeat center top/cover;
}

.option .section-headline {
  font-size: 28px;
  color: #333;
  font-weight: bold;
  text-align: center;
  letter-spacing: .15em;
  width: 322px;
  margin: auto;
  border-bottom: 1px solid #ccc;
  padding: 0 0 10px;
}

.option-box {
  padding: 40px 0;
  border-bottom: 1px solid rgba(0, 98, 160, 0.5);
}

.option-box__title {
  font-size: 18px;
  font-weight: bold;
  color: var(--cl-blue);
  text-align: center;
  margin: 0 0 20px;
  border: none;
}

.option-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.option-inner .option-img {
  margin: 0 33px 0 0;
}

.option-inner .option-img.filter {
  min-width: 360px;
}

.option-inner .option-img.aircoorde {
  min-width: 432px;
}

.option-data {
  padding: 0 80px 0 0;
}

.option-data__text {
  font-size: 14px;
  margin: 0 0 16px;
  text-align: left;
}

.option-data__text--strong {
  text-align: left;
  vertical-align: top;
  font-size: 18px;
  font-weight: bold;
  color: var(--cl-blue);
  margin: 0 0 15px;
  
}

.option-data .option-data__text--strong{
  color: #305CCD;
}

.option-data__text--strong__notes {
  font-size: 10px;
  display: inline-block;
  vertical-align: top;
  padding: 3px 0 0;
}

.option-data__pm25 {
  margin: 0 0 7px;
}

.option-data__pm25 img{
  max-width: 30%;
}

.option-data__item-name {
  font-size: 19px;
  font-weight: bold;
  text-align: left;
  margin: 0;
}

.option-data__item-name--ja {
  font-size: 10px;
  letter-spacing: .45em;
  display: block;
  line-height: .5;
}

.option-data__price {
  font-size: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 0 10px;
}

.option-data__price--value {
  font-size: 24px;
  font-weight: bold;
}

.option-data__price--value__cautions {
  font-size: 12px;
  color: #f00;
  border: 1px solid #f00;
  padding: 6px;
  margin: 0 0 0 24px;
}

.option-data__notes {
  font-size: 12px;
  text-align: left;
  text-indent: -2.5em;
  padding: 0 0 0 2.5em;
  margin: 0;
}
.option-data__notes.type-02 {
  text-indent: 0;
  padding: 0 0 0 0;
}

.option-data__logo {
  margin: 0 0 10px;
}

.option-data__link {
  margin: 20px 0 0;
}

.option-data__link a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 310px;
  height: 38px;
  font-size: 19px;
  font-weight: bold;
  color: #233f93;
  background: #fff;
  border: 1px solid #233f93;
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
}

.option-data__link a:hover {
  background: #233f93;
  color: #fff;
}

.option-banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 40px 0;
  border-bottom: 1px solid rgba(0, 98, 160, 0.5);
}

.option-banner a {
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
}

.option-banner a:hover {
  opacity: .8;
}

/*catalog*/
.catalog {
  padding: 0 0 80px;
}

.catalog-inner {
  padding: 0 40px;
}

.catalog .section-headline {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  border: 2px solid var(--cl-skyblue);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 19px;
  font-weight: bold;
  color: var(--cl-skyblue);
  margin: 0 0 17px;
}

.catalog-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
         
  margin: 0 0 28px;
}


.catalog-list__item{
  float: left;
  width: 49%;
  margin: 0 1.2% 0 0;
}

.catalog-list__item:last-child{
  float: right;
    width: 49%;
    margin: 0;
}

.catalog-list__item a {
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
}


.catalog-list__item img{
  width: 100%;
}

.catalog-list__item a:hover {
  opacity: .8;
}

.catalog_3d_hover a {
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
}

.catalog_3d_hover a:hover {
  opacity: .8;

}

.catalog_3d_hover{
  text-align: center;
  background: #fafafa;
  border-radius: 15px;
}

.catalog_3d_hover img{
  max-width: 100%;
  margin: 0 auto;
}

.catalog_3d .catalog_3d_text{
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.catalog_3d{
  padding: 60px 0 60px 0;
  max-width: 980px;
  width: 80%;
  margin: 0 auto;
  z-index: 1;
}



.catalog-notes__list--item {
  font-size: 12px;
  margin-bottom: 6px;
  line-height: 140%;

}

.catalog-notes__list{
   text-indent: -0.7em;
   padding-left: 0.7em;
}

/*animation*/
@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes scroll {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/*# sourceMappingURL=style_pc.css.map */