@charset "UTF-8";
@import url("../../../../../css-3.css");
/*reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }

q:before, q:after {
  content: "";
  content: none; }

blockquote:before, blockquote:after {
  content: "";
  content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

html {
  font-size: 14px;
  line-height: 1.85714;
  letter-spacing: 0.02em; }

body {
  font-family: 'Roboto', Helvetica, Verdana, Arial,
 '游ゴシック', 'Yu Gothic', YuGothic,
 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',
 'メイリオ', Meiryo,
 'ＭＳ Ｐゴシック', sans-serif;
  color: #fff;
  background-color: #000;
  min-width: 1080px; }
  body * {
    box-sizing: border-box; }

a {
  color: inherit;
  text-decoration: none; }

img, iframe {
  max-width: 100%;
  display: block;
  margin: 0 auto; }

img[src$=".svg"] {
  width: 100%; }

a.buy {
  display: inline-block;
  font-size: 1.42857rem;
  font-weight: bold;
  width: 5.3em;
  line-height: 1.85;
  letter-spacing: 0.1em;
  color: #f00;
  border: #f00 5px solid;
  text-align: center;
  transition: all 0.2s ease-in-out; }
  a.buy:hover {
    color: #fff;
    background-color: #f00; }

.SP {
  display: none; }

sup {
  font-size: 2rem;
  vertical-align: top;
  position: relative;
  top: -0.1em; }

footer {
  background-color: #859bb6;
  margin: 0 auto; }
  footer .copyright {
    text-align: center;
    font-size: 0.71429rem;
    line-height: 6.35714rem; }
    footer .copyright br {
      display: none; }

.finish {
  transform: translateY(-100px); }

article {
  margin: 0 auto;
  overflow-x: hidden; }
  article section .secInner {
    margin: 0 auto;
    max-width: 1080px; }
  article section.sec {
    background-color: #71859b; }
    article section.sec .secInner {
      position: relative;
      width: 1080px;
      height: 100vh; }
    article section.sec .img {
      width: 70vh;
      height: 100vh;
      overflow: hidden;
      transition: all 0.4s ease-in-out 0.4s;
      opacity: 0;
      position: absolute;
      z-index: 1;
      top: 0;
      right: 50%; }
      article section.sec .img img {
        position: absolute;
        top: 0;
        left: 50%;
        max-width: none;
        height: 116.66667%;
        margin-left: -39.16667vh; }
      article section.sec .img.move {
        opacity: 1; }
    article section.sec .txt {
      position: relative;
      z-index: 2;
      width: 85.34137vh;
      margin: 0 auto;
      padding-top: 5.02008vh;
      display: flex;
      flex-direction: column;
      align-items: flex-end; }
      article section.sec .txt > .PC {
        width: 100%; }
      article section.sec .txt.vislon .title {
        width: 55.22088vh;
        margin-top: 15.56225vh; }
      article section.sec .txt.vislon .desc {
        width: 57.22892vh; }
      article section.sec .txt.vislon .product {
        width: 30.32129vh;
        margin-top: 11.04418vh; }
      article section.sec .txt.gtx .title {
        width: 26.90763vh;
        margin-top: 31.1245vh; }
      article section.sec .txt.gtx .desc {
        width: 46.98795vh; }
      article section.sec .txt.alpine .title {
        width: 50.2008vh;
        margin-top: 19.07631vh; }
      article section.sec .txt.alpine .desc {
        width: 49.19679vh; }
      article section.sec .txt.code .title {
        width: 51.40562vh;
        margin-top: 17.57028vh; }
      article section.sec .txt.code .desc {
        width: 45.18072vh; }
      article section.sec .txt.lumberjack .title {
        width: 45.18072vh;
        margin-top: 28.11245vh; }
      article section.sec .txt.lumberjack .desc {
        width: 49.19679vh; }
      article section.sec .txt .hide {
        transition: all 0.4s ease-in-out 0.4s;
        opacity: 0; }
        article section.sec .txt .hide.move {
          opacity: 1; }
      article section.sec .txt .number {
        width: 17.06827vh;
        font-size: 7rem;
        line-height: 1; }
        article section.sec .txt .number img {
          height: 15.86345vh; }
      article section.sec .txt .title {
        font-size: 3.5rem;
        letter-spacing: 0.05em;
        line-height: 1.2;
        text-align: right;
        margin-top: 5.02008vh;
        text-decoration: none; }
        article section.sec .txt .title span {
          border-bottom: 3px solid #fff; }
      article section.sec .txt > .PC {
        display: flex;
        flex-direction: column;
        align-items: flex-end; }
      article section.sec .txt .sub {
        margin-top: 5px;
        font-size: 2rem;
        line-height: 1; }
      article section.sec .txt .copy {
        font-size: 1.14286rem;
        letter-spacing: 0.1em;
        line-height: 1.23684;
        margin-top: 0.4rem; }
      article section.sec .txt .desc {
        font-size: 3.41365vh;
        line-height: 1.47059;
        margin-top: 5.02008vh; }
      article section.sec .txt .product {
        margin-top: 5.02008vh; }
    article section.sec:nth-child(2n+1) {
      background-color: #859bb6; }
      article section.sec:nth-child(2n+1) .secInner {
        flex-direction: row-reverse; }
      article section.sec:nth-child(2n+1) .img {
        margin-right: 0;
        left: 50%;
        right: auto; }
      article section.sec:nth-child(2n+1) .txt {
        align-items: flex-start; }
        article section.sec:nth-child(2n+1) .txt > .PC {
          align-items: flex-start; }

#overview {
  background-color: #859bb6;
  height: 180vh;
  position: relative;
  overflow: hidden; }
  #overview .jacket {
    position: absolute;
    width: 135.48387vh;
    max-width: 100%;
    height: 133.3871vh;
    top: 8.06452vh;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    transition: all 0.4s ease-in-out 0.4s;
    opacity: 0; }
    #overview .jacket.move {
      opacity: 1; }
    #overview .jacket > img {
      height: 100%;
      margin-right: 0; }
      #overview .jacket > img.finish {
        transform: translateY(24.19355vh); }
  #overview .wrap {
    width: 135.48387vh;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start; }
  #overview .inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 2; }
    #overview .inner .container {
      position: relative;
      height: 100vh;
      padding-top: 9.67742vh; }
      #overview .inner .container .logos {
        position: absolute;
        top: 1.29032vh;
        right: 9.19355vh;
        display: flex;
        flex-direction: row;
        align-items: center; }
        #overview .inner .container .logos .summit {
          width: 5.16129vh; }
        #overview .inner .container .logos .tnf {
          width: 9.67742vh;
          margin-left: 4.83871vh; }
    #overview .inner .title {
      width: 62.90323vh;
      font-size: 3rem;
      line-height: 1.2;
      position: relative; }
    #overview .inner .desc {
      width: 66.26506vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
      #overview .inner .desc .name {
        width: 66.26506vh;
        font-size: 2.2rem; }
        #overview .inner .desc .name a {
          text-decoration: underline; }
        #overview .inner .desc .name img.forSP {
          display: none; }
      #overview .inner .desc .lead {
        font-size: 3.41365vh;
        line-height: 1.47059;
        margin-top: 5.02008vh;
        width: 55.22088vh; }
  #overview a.scroll {
    position: absolute;
    display: block;
    width: 100px;
    height: 5rem;
    bottom: 1rem;
    left: 50%;
    z-index: 3;
    text-align: center;
    line-height: 1; }
    #overview a.scroll:after {
      content: "";
      display: block;
      vertical-align: top;
      width: 100px;
      height: 1.14286rem;
      margin: 0.85714rem auto;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: 50%;
      background-image: url(../images/btn_scroll_under.png); }

#product {
  background-color: #859bb6; }
  #product .secInner {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 90px 30px; }
  #product .img {
    width: 29.47368%;
    margin-right: 4.50113%; }
  #product .txt {
    width: 34.50863%; }
    #product .txt .spec {
      font-size: 2rem;
      text-decoration: underline; }
    #product .txt .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center; }
      #product .txt .container .arrow {
        width: 30px; }
        #product .txt .container .arrow a {
          display: block; }
    #product .txt a.container {
      width: auto;
      align-items: stretch;
      padding: 1rem;
      margin: 0 -1rem;
      transition: all 0.2s ease-in-out; }
      #product .txt a.container:hover {
        background-color: rgba(125, 125, 125, 0.7); }
        #product .txt a.container:hover:after {
          transform: translateX(0); }
      #product .txt a.container .name-price {
        flex: 1; }
        #product .txt a.container .name-price .id {
          margin-top: 0; }
      #product .txt a.container:after {
        content: "";
        display: block;
        width: 30px;
        background-image: url(../images/icon_right_arrow.png);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        transform: translateX(-0.5em);
        transition: all 0.2s ease-in-out; }
    #product .txt .id {
      letter-spacing: 0.1em;
      line-height: 1.23684;
      margin-top: 1rem; }
    #product .txt .title {
      font-size: 1.42857rem;
      letter-spacing: 0.1em;
      line-height: 1.23684;
      margin-top: 10px; }
    #product .txt .price {
      font-size: .9rem;
      line-height: 1;
      margin-top: 5px; }
      #product .txt .price span {
        font-size: 0.9em; }
    #product .txt .lineup {
      font-size: .9rem;
      letter-spacing: 0.1em;
      line-height: 1.71429;
      margin-top: 1rem;
      display: table;
      width: 100%; }
      #product .txt .lineup dl {
        display: table-row; }
        #product .txt .lineup dl dt, #product .txt .lineup dl dd {
          display: table-cell; }
        #product .txt .lineup dl dt {
          width: 6em; }
      #product .txt .lineup i {
        display: inline-block;
        vertical-align: middle;
        width: 1em;
        height: 1em;
        margin-right: 0.25em;
        border-radius: 1em;
        border: #fff 2px solid;
        overflow: hidden;
        position: relative; }
        #product .txt .lineup i:after {
          content: "";
          display: block;
          width: 1em;
          height: 1em;
          position: absolute;
          top: -2px;
          left: -2px;
          margin-left: -0.5em; }
        #product .txt .lineup i.BK {
          background-color: #292d2b; }
        #product .txt .lineup i.FR {
          background-color: #e60f27; }
        #product .txt .lineup i.BY {
          background-color: #292d2b; }
          #product .txt .lineup i.BY:after {
            background-color: #fcca00; }
        #product .txt .lineup i.BB {
          background-color: #00e1ea; }
    #product .txt .logos {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-top: 20px; }
      #product .txt .logos .summit {
        width: 22px; }
      #product .txt .logos .science {
        width: 73.5px;
        margin-left: 30px; }
      #product .txt .logos .drive {
        width: 75.5px;
        margin-left: 30px; }

#dealers {
  background-color: #71859b; }
  #dealers .secInner {
    padding: 90px 30px; }
    #dealers .secInner h2 {
      font-size: 2rem;
      text-align: center;
      text-decoration: underline; }
  #dealers .dealers-list {
    width: 800px;
    margin: 40px auto 0; }
    #dealers .dealers-list h3 {
      display: inline-block;
      border: 1px solid #fff;
      margin-bottom: 10px;
      padding: 3px 7px; }
    #dealers .dealers-list .dealer {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: baseline; }
      #dealers .dealers-list .dealer p {
        margin-right: 5px;
        padding: 0.2em 0;
        line-height: 1.4; }
      #dealers .dealers-list .dealer .name {
        width: 32%; }
      #dealers .dealers-list .dealer .postal {
        width: 10%;
        text-align: right; }
      #dealers .dealers-list .dealer .address {
        width: 44%;
        text-align: left; }
        #dealers .dealers-list .dealer .address img {
          display: inline;
          width: 10px; }
      #dealers .dealers-list .dealer .tel {
        width: 12%; }

@media screen and (max-width: 640px) {
  html {
    font-size: 3.4375vw; }
  .buy {
    font-size: 1.36364rem; }
  .SP {
    display: inline; }
  .PC {
    display: none; }
  .finish {
    transform: translateY(-25px); }
  #overview {
    background-image: none;
    padding: 0;
    min-height: initial;
    height: auto; }
    #overview .jacket {
      width: 84vw;
      min-width: initial;
      height: auto;
      min-height: initial;
      margin-right: -8vw;
      top: 8vw; }
      #overview .jacket > img {
        height: auto; }
        #overview .jacket > img.finish {
          transform: translateY(20vw); }
    #overview .wrap {
      width: 100%;
      padding: 0; }
    #overview .inner {
      width: 100%;
      height: auto;
      min-height: initial; }
      #overview .inner .container {
        width: 100%;
        padding-top: 0;
        height: 106.66667vw; }
        #overview .inner .container .logos {
          width: 100%;
          top: 0;
          right: -33vw; }
          #overview .inner .container .logos .summit {
            width: calc((16 / 192) * 100%); }
          #overview .inner .container .logos .tnf {
            width: calc((30 / 192) * 100%);
            margin-left: 5vw; }
      #overview .inner .title {
        position: relative;
        width: 53.33333vw;
        font-size: 3.5rem;
        margin: 30px auto 0 5.33333vw; }
      #overview .inner .desc {
        width: 100vw;
        padding: 0 30px; }
        #overview .inner .desc .name {
          width: 74.66667vw;
          margin: 0 auto;
          margin-right: 0;
          text-align: center; }
          #overview .inner .desc .name img {
            display: none; }
          #overview .inner .desc .name img.forSP {
            display: block; }
        #overview .inner .desc .lead {
          font-size: 1.2rem;
          margin-top: 6.66667vw;
          margin-left: auto;
          margin-right: auto;
          line-height: 1.3125;
          width: auto; }
    #overview a.scroll {
      bottom: auto;
      margin-left: -50px;
      margin-top: 13.33333vw;
      position: relative; }
  article section.sec .secInner {
    display: block;
    width: 100%;
    height: auto;
    padding: 0 !important; }
    article section.sec .secInner .content {
      display: block;
      padding: 6.66667vw 12.93333vw; }
      article section.sec .secInner .content .desc {
        font-size: 1.2rem;
        line-height: 1.3125;
        transition: all .4s ease-in-out .4s;
        opacity: 0; }
        article section.sec .secInner .content .desc.move {
          opacity: 1; }
      article section.sec .secInner .content .product {
        margin-top: 6.66667vw;
        transition: all .4s ease-in-out .4s;
        opacity: 0; }
        article section.sec .secInner .content .product.move {
          opacity: 1; }
        article section.sec .secInner .content .product.vislon {
          width: 33.86667vw;
          margin-left: auto; }
  article section.sec .img {
    width: 62.5vw;
    flex-basis: 62.5vw;
    height: 85vw;
    position: relative;
    right: auto;
    left: auto; }
    article section.sec .img img {
      height: 99.16667vw;
      margin-left: -33.24468vw; }
  article section.sec .txt {
    width: 100%;
    padding: 6.66667vw 12.93333vw 0;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0; }
    article section.sec .txt > .PC {
      display: none; }
    article section.sec .txt .number {
      width: auto;
      height: 18.4vw; }
      article section.sec .txt .number img {
        width: auto;
        height: 18.4vw; }
    article section.sec .txt .sub {
      text-align: left; }
    article section.sec .txt .desc {
      width: auto;
      text-align: left;
      line-height: 1.4;
      margin-top: 20vw; }
    article section.sec .txt.vislon .title {
      width: 75.6vw;
      margin-top: 43.33333vw; }
    article section.sec .txt.vislon .desc {
      margin-top: 15vw;
      padding-top: 6.5rem; }
    article section.sec .txt.gtx .title {
      width: 35.73333vw;
      margin-top: 40vw; }
    article section.sec .txt.alpine .title {
      width: 72.53333vw;
      margin-top: 40.66667vw;
      margin-right: auto; }
    article section.sec .txt.alpine + .content {
      padding-top: 13.33333vw; }
    article section.sec .txt.code .title {
      width: 68.26667vw;
      margin-top: 42vw;
      margin-left: 0; }
    article section.sec .txt.code + .content {
      padding-top: 14.66667vw; }
    article section.sec .txt.lumberjack .title {
      width: 55.33333vw;
      margin-top: 45.33333vw;
      margin-right: auto; }
  article section.sec:nth-child(2n+1) .img {
    margin-left: auto;
    margin-right: 0;
    right: auto;
    left: auto; }
  article section.sec:nth-child(2n+1) .txt {
    left: 0; }
    article section.sec:nth-child(2n+1) .txt > .PC {
      display: none; }
  #product .secInner {
    padding: 6.66667vw;
    align-items: flex-start; }
  #product .img {
    width: 32.8vw;
    flex-basis: 40%;
    margin-top: 2rem; }
  #product .txt {
    width: 49.33333vw; }
    #product .txt .spec {
      font-size: 1.5rem;
      line-height: 1; }
    #product .txt .container {
      width: 160px; }
      #product .txt .container .name-price {
        margin-top: 10px; }
      #product .txt .container .arrow {
        width: 25px;
        margin-top: 10px; }
    #product .txt a.container:hover {
      background-color: transparent; }
    #product .txt a.container:after {
      transform: translateX(0); }
    #product .txt a.container .name-price {
      margin-top: 0; }
    #product .txt a.container + .lineup {
      margin-top: 0; }
    #product .txt .id {
      margin-top: 0; }
    #product .txt .title {
      margin-top: 5px;
      font-size: 1.2rem; }
    #product .txt .lineup {
      line-height: 1.2;
      padding-right: 0; }
      #product .txt .lineup dl {
        flex-wrap: wrap;
        font-size: .85rem;
        display: block; }
        #product .txt .lineup dl dt {
          width: auto; }
        #product .txt .lineup dl dt, #product .txt .lineup dl dd {
          display: inline; }
    #product .txt .logos .science {
      margin-left: 20px; }
    #product .txt .logos .drive {
      margin-left: 20px; }
  #dealers .secInner {
    padding: 30px 20px; }
  #dealers .dealers-list {
    width: 100%; }
    #dealers .dealers-list .dealer {
      margin-top: 15px;
      flex-wrap: wrap; }
      #dealers .dealers-list .dealer p {
        line-height: 1.2; }
        #dealers .dealers-list .dealer p:nth-child(n+2) {
          margin-top: 6px; }
      #dealers .dealers-list .dealer .name {
        width: 100%; }
      #dealers .dealers-list .dealer .postal {
        width: 19%;
        text-align: left; }
      #dealers .dealers-list .dealer .address {
        width: 47%; }
      #dealers .dealers-list .dealer .tel {
        width: 27%; }
      #dealers .dealers-list .dealer:nth-child(n+3) {
        margin-top: 20px; }
  footer .copyright {
    font-size: 0.45455rem;
    line-height: 4.09091rem; } }

@media only screen and (min-width: 1200px) {
  #bg {
    width: 950px;
    right: 50%;
    margin-right: -600px;
    left: auto;
    background-size: 743px auto;
    background-position: 95% 50%; } }

@media only screen and (min-width: 1200px) and (max-height: 700px) {
  html {
    font-size: 2vh; }
  #bg {
    background-size: contain;
    background-position: 80% 50%; } }

@media only screen and (max-width: 1080px) {
  body {
    min-width: 0; }
  article section .secInner {
    max-width: initial; } }