@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.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: Helvetica,Arial,
 'Noto Sans JP',
 '游ゴシック',
 'Yu Gothic',YuGothic,
 'ヒラギノ角ゴ Pro','Hiragino Kaku Gothic Pro',
 'メイリオ','Meiryo',
 'ＭＳ Ｐゴシック',
 sans-serif;
  background-color: #fff;
  color: #000; }
  body > .ruler {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    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 {
  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; }

a.btn {
  display: inline-block;
  vertical-align: top;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.5;
  padding: 0 0.75em;
  background: black;
  color: white;
  border: black solid 1px;
  letter-spacing: 0.05em; }
  a.btn[href="#"] {
    display: none; }

article {
  background: #fff; }
  article section {
    position: relative;
    margin-top: 0.625rem; }
    article section:first-child {
      margin-top: 0; }
    article section .img img {
      width: 100%; }
    article section .img.image:after {
      content: "";
      display: block;
      clear: both; }
    article section .img.image .half {
      float: right;
      width: 49.4898%; }
      article section .img.image .half:first-child {
        float: left; }
    article section .img.getImg {
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: cover; }
      article section .img.getImg img {
        display: none; }
    article section .secInner {
      width: 100%;
      margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      align-items: stretch; }
      article section .secInner .pre {
        white-space: pre-line; }
      article section .secInner > .side {
        width: 220px;
        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;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        position: relative;
        padding-right: 20px;
        opacity: 0;
        -webkit-transition: all 1.5s ease 0.4s;
        -o-transition: all 1.5s ease 0.4s;
        transition: all 1.5s ease 0.4s; }
        article section .secInner > .side.move {
          opacity: 1; }
        article section .secInner > .side .txt {
          position: relative;
          width: 160px;
          padding-bottom: 20px;
          font-size: 13px;
          line-height: 1.69231; }
          article section .secInner > .side .txt.message {
            width: 80px; }
          article section .secInner > .side .txt:after {
            content: "";
            display: block;
            width: 100%;
            height: 1px;
            background: #000;
            position: absolute;
            bottom: 0;
            right: 0; }
        article section .secInner > .side .products {
          text-align: right;
          position: relative;
          padding-bottom: 15px;
          font-size: 12px;
          line-height: 1.5; }
          article section .secInner > .side .products .item {
            margin-top: 15px; }
            article section .secInner > .side .products .item .data {
              display: block; }
              article section .secInner > .side .products .item .data em {
                display: block;
                font-weight: bold; }
            article section .secInner > .side .products .item .buy {
              display: block;
              margin-top: 8px; }
          article section .secInner > .side .products:after {
            content: "";
            display: block;
            width: 80px;
            height: 1px;
            background: #000;
            position: absolute;
            bottom: 0;
            right: 0; }
      article section .secInner > .img {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1; }
  article #TOP {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    article #TOP .titWrap {
      -webkit-transition: all 1.5s ease 1s;
      -o-transition: all 1.5s ease 1s;
      transition: all 1.5s ease 1s;
      -webkit-transform: translate3d(0, 2rem, 10px);
      transform: translate3d(0, 2rem, 10px);
      opacity: 0;
      max-width: 450px;
      width: 78.13333%;
      position: absolute;
      top: 2.5rem;
      left: 2.5rem; }
      article #TOP .titWrap .title {
        width: 100%; }
        article #TOP .titWrap .title img {
          width: auto; }
      article #TOP .titWrap .logo {
        display: block;
        margin-bottom: 2.5rem;
        width: 60px;
        -webkit-transform: translateY(-2rem);
        -ms-transform: translateY(-2rem);
        transform: translateY(-2rem);
        -webkit-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
        opacity: 0; }
        article #TOP .titWrap .logo img {
          width: 100%; }
    article #TOP .scroll {
      position: absolute;
      bottom: 20px;
      right: 20px;
      display: block;
      width: 7.5px;
      -ms-flex-item-align: center;
      align-self: center;
      line-height: 1;
      -webkit-transition: all 1.5s ease 1s;
      -o-transition: all 1.5s ease 1s;
      transition: all 1.5s ease 1s;
      -webkit-transform: translateY(-4rem);
      -ms-transform: translateY(-4rem);
      transform: translateY(-4rem);
      opacity: 0; }
      article #TOP .scroll:after {
        content: "";
        display: block;
        width: 100%;
        height: 5px;
        background: url(../images/ico_scroll_down.svg) no-repeat 50%;
        background-size: contain;
        margin-top: 10px; }
    article #TOP .secInner > .side:after {
      content: "";
      display: block;
      width: 80px;
      height: 1px;
      background: #000;
      position: absolute;
      bottom: 0;
      right: 1.25rem; }
    article #TOP .secInner > .img {
      -webkit-transition: all 0.8s ease;
      -o-transition: all 0.8s ease;
      transition: all 0.8s ease;
      opacity: 0; }
    article #TOP.move .logo {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0); }
    article #TOP.move .titWrap {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 10px);
      transform: translate3d(0, 0, 10px); }
    article #TOP.move .scroll {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0); }
    article #TOP.move .secInner > .img {
      opacity: 1; }
  article #Overview {
    opacity: 0;
    -webkit-transition: all 1.5s ease 2s;
    -o-transition: all 1.5s ease 2s;
    transition: all 1.5s ease 2s; }
    article #Overview.move {
      opacity: 1; }
    article #Overview .secInner {
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      article #Overview .secInner .title {
        font-size: 18px;
        font-weight: bold;
        margin: 30px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
        article #Overview .secInner .title .year {
          width: 200px;
          text-align: right;
          margin-right: 20px;
          position: relative; }
          article #Overview .secInner .title .year:after {
            content: "";
            display: block;
            width: 80px;
            height: 1px;
            background: #000;
            position: absolute;
            bottom: 0;
            right: 0; }
      article #Overview .secInner .lead {
        font-size: 14px;
        font-weight: bold;
        line-height: 1.8rem;
        width: 510px;
        margin: 30px; }

footer {
  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;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  padding-left: 220px;
  height: 50px; }
  footer > img {
    display: none; }

.copyright {
  font-size: 0.75rem; }

.pagetop {
  display: none;
  position: fixed;
  bottom: 1.875rem;
  right: 1.875rem;
  z-index: 10; }
  .pagetop a {
    display: block;
    width: 1.875rem;
    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:before {
      content: "";
      display: block;
      width: 1.875rem;
      height: 1.875rem;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
      border-top: black solid 1px;
      border-right: black solid 1px; }
    .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; }
  video {
    display: block; }
  .products .item {
    cursor: pointer; }
    .products .item.disable {
      cursor: default; }
    .products .item:hover a.btn {
      background: white;
      color: black; }
  #TOP .logo:hover {
    opacity: .7; } }

@media screen and (max-width: 1000px) {
  html {
    font-size: 1.6vw; }
  article #Overview .secInner .lead {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; } }

@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; }
  a.btn {
    display: inline-block;
    vertical-align: top;
    font-size: 2vw;
    font-weight: bold;
    line-height: 1.5;
    padding: 0 0.75em;
    background: black;
    color: white;
    border: black solid 1px;
    letter-spacing: 0.05em; }
  article {
    background: #fff; }
    article section {
      position: relative;
      margin-top: 2.66667vw;
      margin-left: 5.33333vw; }
      article section:first-child {
        margin-top: 0; }
      article section .img img {
        width: 100%; }
      article section .img.image:after {
        content: "";
        display: block;
        clear: both; }
      article section .img.image .half {
        float: right;
        width: 49.29577%; }
        article section .img.image .half:first-child {
          float: left; }
      article section .img.getImg {
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: cover; }
        article section .img.getImg img {
          display: none; }
      article section .secInner {
        width: 100%;
        margin: 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch; }
        article section .secInner .pre {
          white-space: pre-line; }
        article section .secInner > .side {
          width: 100%;
          display: block;
          position: relative;
          padding-right: 5.33333vw;
          margin-top: 2.66667vw;
          opacity: 1; }
          article section .secInner > .side .txt {
            position: relative;
            width: auto;
            padding-bottom: 0;
            font-size: 0.85714rem;
            line-height: 1.66667; }
            article section .secInner > .side .txt.message {
              width: 40vw; }
            article section .secInner > .side .txt:after {
              display: none; }
          article section .secInner > .side .products {
            text-align: left;
            position: relative;
            padding: 0;
            margin-left: 0;
            font-size: 12px;
            line-height: 1.5; }
            article section .secInner > .side .products .item {
              margin-top: 1.33333vw;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: justify;
              -ms-flex-pack: justify;
              justify-content: space-between;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              position: relative; }
              article section .secInner > .side .products .item:before {
                content: "";
                display: block;
                width: 100%;
                height: 1px;
                background: black;
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                z-index: 0; }
              article section .secInner > .side .products .item.disable:before {
                display: none; }
              article section .secInner > .side .products .item.disable .data em:after {
                display: none; }
              article section .secInner > .side .products .item:first-child {
                margin-top: 0; }
              article section .secInner > .side .products .item .data {
                display: block;
                z-index: 1;
                position: relative;
                background: #fff;
                padding-right: 1.33333vw;
                font-size: 2.4vw; }
                article section .secInner > .side .products .item .data em {
                  display: inline;
                  font-weight: bold; }
                  article section .secInner > .side .products .item .data em:after {
                    content: " | ";
                    font-weight: normal; }
              article section .secInner > .side .products .item .buy {
                background: #fff;
                padding-left: 1.33333vw;
                z-index: 1;
                position: relative;
                display: block;
                margin-top: 0; }
            article section .secInner > .side .products:after {
              display: none; }
        article section .secInner > .img {
          -webkit-box-flex: 1;
          -ms-flex: auto;
          flex: auto; }
    article #TOP {
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      article #TOP .titWrap {
        max-width: none;
        width: 78.13333%;
        top: 5.33333vw;
        left: 0; }
        article #TOP .titWrap .title {
          width: 100%; }
          article #TOP .titWrap .title img {
            width: auto; }
        article #TOP .titWrap .logo {
          margin-bottom: 5.33333vw;
          width: 10.4vw; }
      article #TOP .scroll {
        top: 5.33333vw;
        bottom: auto;
        right: 5.33333vw;
        width: 1.6vw; }
        article #TOP .scroll:after {
          height: 1.06667vw;
          margin-top: 1.33333vw; }
      article #TOP .secInner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; }
        article #TOP .secInner > .side {
          margin-top: 0; }
          article #TOP .secInner > .side:after {
            display: none; }
      article #TOP.move .logo {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0); }
      article #TOP.move .titWrap {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0); }
      article #TOP.move .scroll {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0); }
    article #Overview {
      margin-top: 8vw;
      margin-right: 5.33333vw; }
      article #Overview .secInner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start; }
        article #Overview .secInner .title {
          font-size: 4.66667vw;
          font-weight: bold;
          margin: 0;
          display: block;
          line-height: 1; }
          article #Overview .secInner .title .year {
            width: auto;
            text-align: right;
            margin-right: 0;
            position: relative; }
            article #Overview .secInner .title .year:after {
              display: none; }
        article #Overview .secInner .lead {
          font-size: 3.46667vw;
          line-height: 1.9rem;
          width: auto;
          margin: 0;
          margin-top: 5.33333vw; }
  footer {
    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;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    padding-left: 0;
    margin-top: 2.66667vw;
    margin-left: 5.33333vw;
    height: 8vw;
    border-top: black solid 1px; }
    footer > img {
      display: none; }
  .copyright {
    font-size: 2.13333vw; }
  #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; } }