@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.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, 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; }

.clearfix:after {
  content: "";
  display: block;
  clear: both; }

html {
  font-size: 16px;
  line-height: 1.71452; }

body {
  font-family: "Yu Mincho", YuMincho,
 " ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro",
 "ＭＳ Ｐ明朝", "MS PMincho",
 "Sawarabi Mincho",
 'Noto Sans JP',
 'Noto Sans',
 serif;
  background-color: #fff;
  color: #000; }
  body > .ruler {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: url(../images/bg_top.jpg) no-repeat center;
    background-size: cover;
    opacity: 0;
    -webkit-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease; }
    body > .ruler.move {
      opacity: 1; }

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  a:hover {
    opacity: .7; }
  a.cs, a[href="#"] {
    opacity: 1;
    cursor: default; }

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

video {
  display: block;
  margin: 0 auto;
  width: 100%; }

video::-webkit-media-controls-enclosure {
  overflow: hidden; }

video::-webkit-media-controls-panel {
  width: calc(100% + 30px); }

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

.img, footer {
  -webkit-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
  opacity: 0; }
  .img.move, footer.move {
    opacity: 1; }

a.btn {
  display: inline-block;
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 0 0.75em;
  background: black;
  color: white;
  letter-spacing: 0.05em; }
  a.btn[href="#"] {
    display: none; }

#TOP {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  height: 100vh; }
  #TOP .titWrap {
    -webkit-transition: all 1.5s ease 1s;
    -o-transition: all 1.5s ease 1s;
    transition: all 1.5s ease 1s;
    -webkit-transform: translateY(2rem);
    -ms-transform: translateY(2rem);
    transform: translateY(2rem);
    opacity: 0;
    max-width: 420px;
    width: 56%; }
    #TOP .titWrap .title {
      width: 100%;
      margin-bottom: 6.25rem; }
      #TOP .titWrap .title img {
        width: auto; }
    #TOP .titWrap .logo {
      display: block;
      margin: 0 auto;
      width: 22.85714%;
      -webkit-transform: translateY(-2rem);
      -ms-transform: translateY(-2rem);
      transform: translateY(-2rem);
      -webkit-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s;
      opacity: 0; }
      #TOP .titWrap .logo img {
        width: 100%; }
  #TOP.move .logo {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  #TOP.move .titWrap {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

#video {
  background: #fff; }
  #video video {
    width: 100%; }

article {
  background: #fff; }
  article section {
    position: relative; }
    article section > .img img {
      width: 100%; }
    article section .img.getImg {
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: cover; }
      article section .img.getImg img {
        display: none; }
    article section .secInner {
      max-width: 850px;
      width: 86.66667%;
      margin: 0 auto;
      background: #fff;
      color: #000;
      padding: 10.9375rem 0; }
      article section .secInner > h2.title {
        margin-bottom: 5rem; }
        article section .secInner > h2.title img {
          width: 100%; }
      article section .secInner .lead {
        font-size: 1.55rem; }
      article section .secInner .pre {
        white-space: pre-line; }
  article #Overview .secInner .lead {
    font-size: 2rem;
    line-height: 2; }
  article #Overview .view1 {
    height: 99.2vw; }
  article #Overview .parts {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 6.66667vw; }
    article #Overview .parts .img {
      width: 46.66667vw;
      height: 61.86667vw;
      margin-bottom: 6.66667vw;
      background-position: 50% bottom; }
  article #Overview .view2 {
    height: 68.26667vw; }
  article #Behind .products {
    margin-top: 2.8125rem; }
  article #Behind .img01 {
    height: 95.6vw; }
  article #Behind .parts {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 6.66667vw; }
    article #Behind .parts .img {
      width: 46.66667vw;
      height: 61.86667vw; }
  article #Behind .img03 {
    height: 124vw; }
    article #Behind .img03 + .cap {
      padding: 1em 0;
      font-size: 0.875rem;
      max-width: 850px;
      width: 86.66667%;
      margin: 0 auto; }
  article #Behind .img04 {
    height: 69.33333vw; }
  article #Keywords .secInner ul li.word {
    margin-top: 11.25rem; }
    article #Keywords .secInner ul li.word:first-child {
      margin-top: 0; }
    article #Keywords .secInner ul li.word h3 {
      width: 70.58824%;
      margin: 0 auto; }
      article #Keywords .secInner ul li.word h3 img {
        margin-bottom: 2.8125rem; }
    article #Keywords .secInner ul li.word .txt {
      font-size: 1.55rem; }
  article #Keywords .img01 {
    height: 124vw; }
  article #Specifications .secInner .imgs {
    margin: 0 -1.875rem 5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    article #Specifications .secInner .imgs .img {
      width: 46.7033%; }
  article #Specifications .secInner .about {
    border-top: #000 solid 1px;
    border-bottom: #000 solid 1px;
    padding: 3.4375rem 0;
    font-size: 1.55rem; }
  article #Specifications .secInner .points ul li {
    margin-top: 5.3125rem; }
    article #Specifications .secInner .points ul li .txt {
      font-size: 1.55rem;
      margin-top: 1em; }
  article #Specifications .howto {
    position: relative; }
    article #Specifications .howto a.play {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url(../images/btn_play.svg) no-repeat center;
      background-size: 8.625rem; }
  article #Chronicle .secInner .chronicle {
    padding-bottom: 8.75rem;
    border-bottom: #000 solid 1px; }
    article #Chronicle .secInner .chronicle table tr th, article #Chronicle .secInner .chronicle table tr td {
      vertical-align: top;
      font-size: 1.32875rem;
      line-height: 1.66651; }
    article #Chronicle .secInner .chronicle table tr th {
      width: 18.82353%; }
  article #Chronicle .secInner .data h3 {
    font-size: 1.55rem; }
  article #Chronicle .secInner .data .txt {
    font-size: 1.32875rem;
    line-height: 1.66651; }

footer {
  background: #fff;
  height: 124.8vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  color: #fff; }
  footer > img {
    display: none; }

.copyright {
  font-size: 0.75rem;
  text-align: center;
  max-width: 800px;
  width: 89.33333%;
  height: 3.75rem;
  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;
  margin: 0 auto;
  font-weight: normal;
  position: relative;
  z-index: 1; }

#menu {
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0; }
  #menu a.trigger {
    position: absolute;
    top: 3.4375rem;
    right: 3.75rem;
    display: block;
    width: 6rem; }
    #menu a.trigger.fixed {
      position: fixed; }
  #menu .menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff; }
    #menu .menu .menuInner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      #menu .menu .menuInner .icon {
        width: 56vw;
        max-width: 420px;
        margin-bottom: 3.75rem; }
      #menu .menu .menuInner .tit {
        display: block;
        width: 56vw;
        max-width: 420px;
        margin-bottom: 3.75rem; }
      #menu .menu .menuInner ul {
        width: 56vw;
        max-width: 420px; }
        #menu .menu .menuInner ul li {
          margin-top: 2.375rem; }
          #menu .menu .menuInner ul li.mt-nallow {
            margin-top: 1.6875rem; }
          #menu .menu .menuInner ul li:first-child {
            margin-top: 0; }
          #menu .menu .menuInner ul li a {
            display: block; }

.pagetop {
  position: fixed;
  bottom: 1.875rem;
  right: 1.875rem;
  z-index: 10; }
  .pagetop a {
    display: block;
    width: 4.5rem;
    opacity: 0;
    -webkit-transform: translateX(60px);
    -ms-transform: translateX(60px);
    transform: translateX(60px);
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; }
    .pagetop a.active {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0); }
    .pagetop a:hover {
      opacity: 0.6; }
    .pagetop a img {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      -webkit-transition: opacity 0.2s;
      -o-transition: opacity 0.2s;
      transition: opacity 0.2s; }
      .pagetop a img:first-child {
        position: relative;
        opacity: 1; }

@media screen and (min-width: 769px) {
  .forSP {
    display: none; }
  img[src*="_sp"] {
    display: none; }
  a.btn:hover {
    opacity: 1;
    background: #666;
    color: white; }
  #TOP .logo:hover {
    opacity: .7; } }

@media screen and (max-width: 1300px) {
  html {
    font-size: 1.23077vw; } }

@media screen and (max-width: 768px) {
  html {
    font-size: 3.73333vw; }
  body {
    min-width: 0; }
    body > .ruler:before {
      width: 40%;
      min-width: 0; }
  a {
    -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out; }
    a:hover {
      opacity: 1; }
  .forPC {
    display: none; }
  img[src*="_pc"] {
    display: none; }
  article section .secInner {
    padding: 6.42857rem 0; }
    article section .secInner > h2.title {
      margin-bottom: 1.78571rem; }
    article section .secInner .lead {
      font-size: 0.88571rem; }
    article section .secInner .pre {
      white-space: pre-line; }
  article #Overview .secInner .lead {
    font-size: 1.14286rem; }
  article #Behind .products {
    margin-top: 3.39286rem; }
  article #Behind .img03 + .cap {
    font-size: 0.75929rem;
    line-height: 1.66651; }
  article #Keywords .secInner ul li.word {
    margin-top: 2.85714rem; }
    article #Keywords .secInner ul li.word:first-child {
      margin-top: 2.85714rem; }
    article #Keywords .secInner ul li.word h3 {
      width: 100%; }
      article #Keywords .secInner ul li.word h3 img {
        margin-bottom: 1.60714rem; }
    article #Keywords .secInner ul li.word .txt {
      font-size: 0.88571rem; }
  article #Specifications .secInner .imgs {
    margin: 0 -1.07143rem 2.85714rem; }
    article #Specifications .secInner .imgs .img {
      width: 46.85315%; }
  article #Specifications .secInner .about {
    padding: 1.96429rem 0;
    font-size: 0.88571rem; }
  article #Specifications .secInner .points ul li {
    margin-top: 3.03571rem; }
    article #Specifications .secInner .points ul li .txt {
      font-size: 0.88571rem;
      margin-top: 1em; }
  article #Specifications .howto {
    position: relative; }
    article #Specifications .howto a.play {
      display: none; }
  article #Chronicle .secInner .chronicle {
    padding-bottom: 3.57143rem; }
    article #Chronicle .secInner .chronicle table tr th, article #Chronicle .secInner .chronicle table tr td {
      font-size: 0.75929rem; }
    article #Chronicle .secInner .chronicle table tr th {
      width: 24.61538%; }
  article #Chronicle .secInner .data h3 {
    font-size: 0.88571rem; }
  article #Chronicle .secInner .data .txt {
    font-size: 0.75929rem;
    line-height: 1.66651; }
  footer {
    padding-bottom: 1.07143rem; }
  .copyright {
    height: 2.85714rem;
    line-height: 1.6; }
  #menu a.trigger {
    top: 1.96429rem;
    right: 1.07143rem;
    width: 2.21429rem; }
    #menu a.trigger.fixed {
      position: fixed; }
  #menu .menu .menuInner .icon {
    margin-bottom: 2.14286rem; }
  #menu .menu .menuInner .tit {
    margin-bottom: 4.28571rem; }
  #menu .menu .menuInner ul li {
    margin-top: 2.14286rem; }
    #menu .menu .menuInner ul li.mt-nallow {
      margin-top: 1.78571rem; }
    #menu .menu .menuInner ul li:first-child {
      margin-top: 0; }
  .pagetop {
    bottom: 4vw;
    right: 4vw; }
    .pagetop a {
      width: 6.66667vw;
      -webkit-transform: translateX(12vw);
      -ms-transform: translateX(12vw);
      transform: translateX(12vw); }
      .pagetop a.active {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0); }
      .pagetop a:hover {
        opacity: 1; } }

@media screen and (max-width: 769px) and (orientation: landscape) {
  html {
    font-size: 2.86086vw; }
  #TOP .titWrap {
    width: auto;
    max-width: none; }
    #TOP .titWrap .title img {
      width: auto;
      height: 68.14044vh; } }