@charset "utf-8";
img {
  image-rendering: auto;
}

/*要素のリセット*/
figcaption,
figure {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

p {
  text-align: justify;
}

/*** CAR1013 heroheader*/
.hero_h_afhcomp {
  width: 100%;
  height: 450px;
  margin: 0 auto;
  padding: 0;
  background-repeat: none;
  background-position: center;
  background-size: cover;

  & section {
    width: 100%;
    max-width: 930px;
    height: 450px;
    margin: 0 auto;
    position: relative;

    & div {
      line-height: 1.6em;
      position: absolute;
      top: 220px;
      left: 0;
      width: 42%;
      padding: 20px 0 5px 20px;
      background: rgba(250, 250, 250, 0.75);
      /* box-shadow */
      box-shadow: 0px 4px 10px 0px #666666;
      -moz-box-shadow: 0px 4px 10px 0px #666666;
      -webkit-box-shadow: 0px 4px 10px 0px #666666;

      & ul {
        font-size: 0.9rem;
        line-height: 1em;
        list-style: none;
        padding: 0;
        margin: 0 0 1em 0;

        & li {
          margin: 0.5em 0 0 0;

          & span {
            display: inline-block;
            width: 50px;
          }
        }
      }
    }
  }

  & h1 {
    font-size: 1.7rem;
    padding: 0;
    margin: 0 0 0 0;
    font-family: "heisei-kaku-gothic-std", sans-serif;

    & small {
      font-size: 1rem;
      margin: 0 0 0 1em;
    }
  }

  & h3 {
    font-size: 2.5rem;
    padding: 0;
    margin: 0;
    color: #ffffff;
    text-shadow: 3px 3px 6px #333333;
    font-family: "heisei-kaku-gothic-std", sans-serif;
    position: absolute;
    top: 60px;
    line-height: 140%;
  }
}

img.model_photo {
  width: 48%;
  height: auto;
  position: absolute;
  bottom: 0;
  right: 0;
}

/*** スクローラーのオフセット ***/
#tokucyo,
#option,
#spec,
#galy,
#d_load,
#comparison {
  padding-top: 100px;
  margin-top: -100px;
}

/*** 特徴の初めの概略*/
div.p_out_line {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 2em auto;
}

.p_out_line {
  & figure {
    width: 35%;

    & img {
      width: 100%;
    }
  }

  & div {
    width: 60%;

    & p {
      font-size: 1.2rem !important;
      padding: 0 !important;
      margin: 10px 0 0 0 !important;
      text-align: justify;
      background: none;
      line-height: 1.7em;

      & a {
        font-size: 1.2rem !important;
      }
    }
  }
}

/*** 1カラム ***/
.colum1 {
  margin: 1em 0 3em 0;

  & figure {
    width: 100%;

    & img {
      width: 100%;
    }
  }

  & p {
    margin: 0 0 0.5em 0;
  }
}

/*** 背景 ***/
.sky {
  background-image: url("../products/wls/car101/img/sky.jpg");
  background-size: cover;
  background-position: center center;
  padding: 1em 0;
  margin: 1em 0 4em 0;
}

.smaho {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(248, 212, 118, 1) 100%
  );
  padding: 1em 0 0 0;
  margin: 1em 0 4em 0;
}

/*** 全幅の2カラム ***/
.colum_full {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;

  & div {
    width: 45%;
    margin: 0;
    padding: 1em;
    background: rgba(255, 255, 255, 0.8);

    & p {
      margin: 0 0 0 0;
    }
  }

  & figure {
    width: 45%;
    margin: 0;
    padding: 0;

    & img {
      width: 100%;
      margin: 0;
      padding: 0;
      vertical-align: bottom;
    }
  }
}

.icon_text_orange {
  margin: 1em 0 0 0 !important;
  padding: 0.5em 1em !important;
  background: rgba(255, 155, 0, 1);
  border-radius: 4px;
  display: inline-block;
  color: rgba(255, 255, 255, 1);
  font-size: 1.2rem;
  font-family: "heisei-kaku-gothic-std", sans-serif;
  font-weight: 500;

  & span {
    display: inline-block;
    margin: 0 1em 0 0;
  }
}

/*** センター2カラム ***/
.colum2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 2em 0 2em 0;

  & h3 {
    width: 100%;
    margin: 1em 0 1em 0;
    padding: 0;
  }

  & div {
    width: 48%;
    margin: 0 0 1em 0;
    padding: 0;

    & p {
      margin: 0;
      padding: 0;
    }

    & figure {
      & img {
        width: 100%;
        margin: 0;
        padding: 0;
      }
    }
  }
}

/***3カラム ***/
.colum3 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 1em 0 1em 0;

  & div {
    width: 31%;
    margin: 0 0 1.5em 0;
    padding: 0;

    & p {
      margin: 0;
      padding: 0;
    }

    & figure {
      & img {
        width: 100%;
        margin: 0;
        padding: 0;
      }
    }
  }
}

p.hosoku {
  font-size: 0.9rem;
  margin: 0.35em 0 0 0 !important;
  padding: 0;
  line-height: 1.4em;
}

/*** ご注意 ***/
.caution-t {
  text-align: center;
  font-size: 1.2rem;
  margin: 1em auto 0;
}

.caution {
  border: rgba(0, 0, 0, 1) solid 1px;
  padding: 0.75em !important;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
  margin-bottom: 3em;

  & h6 {
    line-height: 1.4em !important;
    font-size: 0.8rem;
    margin: 0;
    padding: 0;
    width: 6%;
    min-width: 3em;
    display: block;
  }

  & p {
    display: block;
    width: 93%;
    margin: 0;
    padding: 0;
    line-height: 1.4em !important;
    font-size: 0.8rem;
  }
}

/*** 比較表 ***/
.comp_seat {
  width: 70%;
  margin: 2em auto 0;

  & div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
  }

  & figure {
    width: 50%;
    margin: 0;
    padding: 0;
    text-align: center;

    & img {
      width: 30%;
      margin: 0;
      padding: 0;
    }

    & figcaption {
      font-size: 1rem;
      font-family: "heisei-kaku-gothic-std", sans-serif;
      font-weight: 500;
    }
  }

  & dl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    text-align: center;
    margin: 1em 0 3em;
  }

  & dt {
    width: 100%;
    border-top: solid 1px #000000;
    margin: 1em 0 0em;
    font-size: 1.2rem;
    padding: 1em 0 0;
    font-family: "heisei-kaku-gothic-std", sans-serif;
    font-weight: 500;
    text-align: center;
  }

  & dd {
    width: 50%;
    margin: 0.5em 0;
    padding: 0;
    text-align: center;

    & big {
      margin: 0 0.25em;
      font-size: 1.3rem;
    }
  }
}

.kome {
  font-size: 0.6rem;
  line-height: 1.4em !important;
}

/*** パッケージ内容 ***/
.pkg_zone {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 3em;

  & div {
    padding: 0;
    margin: 0 0 0 0;
    width: 47%;

    & h4 {
      padding: 0;
      margin: 1.5em 0 0.75em 0;
    }

    & ol {
      list-style-position: inside;
      padding: 0;
      margin: 1em 0 0 0;
      width: 100%;
      font-size: 1rem;

      & li {
        margin: 0.5em 0 0.5em 0;
      }
    }
  }

  & figure {
    width: 100%;

    & img {
      width: 100%;
      margin: 0;
    }
  }
}

/*** 外形図 ***/
.dimensions {
  margin-bottom: 3em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  & p {
    width: 100%;
    text-align: right;
    font-size: 0.8rem;
  }

  & figure {
    width: 50%;

    & img {
      width: 90%;
      margin: 0 5%;
    }

    & figcaption {
      font-size: 1.2rem;
      font-family: "heisei-kaku-gothic-std", sans-serif;
    }
  }
}

#galy h4 {
  margin-top: 1.5em;
}

.my-gallery {
  /*** ギャラリー ***/
  margin-bottom: 1em;
}

@media (max-width: 640px) {
  /*** 背景 ***/
  .sky {
    padding: 1em 0;
  }

  .smaho {
    padding: 1em 0 1em 0;
  }

  /*** ASD01 heroheader*/
  .hero_h_afhcomp {
    height: 80vh;
    max-height: 667px;
    margin: 0 auto;
    padding: 0;
  }

  img.model_photo {
    width: 76%;
    height: auto;
    top: 14vh;
    right: 12%;
  }

  .hero_h_afhcomp section div {
    top: 54vh;
    left: 5%;
    width: 82%;
    padding: 10px 4%;
    background: rgba(250, 250, 250, 0.75);
    /* box-shadow */
    box-shadow: 0px 4px 10px 0px #666666;
    -moz-box-shadow: 0px 4px 10px 0px #666666;
    -webkit-box-shadow: 0px 4px 10px 0px #666666;
  }

  .hero_h_afhcomp h1 {
    font-size: 1.1rem;
    line-height: 1.3em;
    font-family: "heisei-kaku-gothic-std", sans-serif;
    margin-bottom: 0.25em;
  }

  .hero_h_afhcomp h2 {
    font-size: 1.5rem;
    padding: 0;
    margin: 0 0 0.25em 0;
    font-family: "heisei-kaku-gothic-std", sans-serif;
  }

  .hero_h_afhcomp h3 {
    font-size: 1.6rem !important;
    padding: 0;
    margin: 0;
    width: 90%;
    text-shadow: 3px 3px 6px #333333;
    top: 2vh;
    left: 5%;
    right: auto;
    text-align: center;
  }

  .hero_h_afhcomp section div ul {
    font-size: 0.8rem;
    list-style: none;
  }

  .hero_h_afhcomp section div ul li span {
    display: inline-block;
    width: 4em;
  }

  /*** 特徴の初めの概略*/
  div.p_out_line {
    display: block;
  }

  .p_out_line figure {
    width: 80%;
    margin: auto;
  }

  .p_out_line figure img {
    width: 100%;
  }

  .p_out_line div {
    width: 100%;
  }

  .p_out_line div p {
    font-size: 1rem;
  }

  /*** 1カラム ***/
  .colum1 {
    margin: 0 0 3em 0;

    & p {
      margin: 0 0 0.5em 0 !important;
    }
  }

  /*** 全幅の2カラム ***/
  .colum_full {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;

    & div {
      width: 100%;
      margin: 0;
      padding: 1em;
      background: rgba(255, 255, 255, 0.8);

      & p {
        margin: 0 0 0 0;
      }
    }

    & figure {
      width: 100%;
      margin: 0;
      padding: 0;
      & img {
        width: 100%;
        margin: 0;
        padding: 0;
        vertical-align: bottom;
      }
    }
  }

  .icon_text_orange {
    margin: 1em 0 0 0 !important;
    padding: 0.5em 1em !important;
    background: rgba(255, 155, 0, 1);
    border-radius: 4px;
    display: inline-block;
    color: rgba(255, 255, 255, 1);
    font-size: 1.2rem;
    font-family: "heisei-kaku-gothic-std", sans-serif;
    font-weight: 500;

    & span {
      display: inline-block;
      margin: 0 1em 0 0;
    }
  }

  /*** センター2カラム ***/
  .colum2 div {
    width: 100%;
    margin: 0.5em 0 1em;
  }

  /***3カラム ***/
  .colum3 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 1em 0 1em 0;

    & div {
      width: 100%;
      margin: 0 0 2.5em 0;

      & p {
        margin: 0;
        padding: 0;
      }
      & figure {
        & img {
          width: 100%;
          margin: 0;
          padding: 0;
        }
      }
    }
  }

  /*** ご注意 ***/
  .caution {
    & h6 {
      width: 100%;
    }

    & p {
      width: 100%;
    }
  }

  /*** 比較表 ***/
  .comp_seat {
    width: 100%;

    & figure {
      & img {
        width: 70%;
      }
    }
  }

  /*** pkgゾーン */
  .pkg_zone {
    & div {
      width: 100%;
    }

    & figure {
      width: 100%;
    }
  }

  /*** 別売オプション */
  .option {
    & div {
      width: 100%;
      margin: 0 0 2em 0;

      & p {
        margin: 0 0 1em 0;
      }

      & h4 {
        margin: 0 0 0.5em 0;
        padding: 0;
      }

      & ul {
        margin: 0 0 1.5em 0;
        padding: 0;
      }
    }
  }

  /*** パッケージ内容 ***/
  .dimensions {
    & figure {
      width: 100%;

      & img {
        width: 100%;
        margin: 0;
      }
    }
  }
}

@media (max-width: 320px) {
}