/*
COPYRIGHT [C] jitaku studio All Rights Reserved.
*/
/**************************************************

		Init

**************************************************/
@import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700,800,900");
@import url("https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:100,300,400,500,700,800,900");
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit; }

:focus {
  outline: 0; }

body {
  position: relative;
  background: url("../img/common/bg.jpg") repeat;
  background-size: 640px 360px;
  width: 100%;
  height: 100%;
  color: #444;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 2px;
  -webkit-font-variant-ligatures: none;
  -webkit-font-feature-settings: none;
  font-feature-settings: none;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-align: justify;
  text-justify: inter-ideograph;
  -ms-text-justify: inter-ideograph;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow-y: scroll; }

@media screen and (max-width: 780px) {
  body {
    font-size: 12px;
    letter-spacing: 1px; } }

img {
  display: block;
  width: 100%;
  height: auto; }

a {
  color: #00a4c4;
  text-decoration: none; }

h1, h2, h3, h4, h5 {
  font-weight: normal;
  padding: 0;
  margin: 0; }

p {
  margin: 0; }

ul {
  padding: 0;
  margin: 0;
  list-style: none; }

#wrap {
  width: 100%;
  height: 100%;
  min-height: 100vh; }

#confirm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  overflow-y: scroll;
  z-index: 9999; }

#confirm-wrap {
  width: 720px;
  margin: 60px auto; }

#confirm-logo {
  position: relative;
  background: url("../img/common/logo_confirm.png") no-repeat;
  background-size: 100% 100%;
  width: 160px;
  height: 160px;
  margin: 0 auto;
  z-index: 9; }

#confirm-text {
  background: url("../img/common/confirm.png") no-repeat;
  background-size: 100% 100%;
  width: 720px;
  height: 240px;
  margin-top: -40px; }

#confirm-btn-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 566px;
  margin: 30px auto 0 auto; }
  #confirm-btn-wrap .btn {
    width: 268px;
    height: 80px;
    cursor: pointer;
    -webkit-transition: -webkit-transform .2s ease;
    transition: -webkit-transform .2s ease;
    -o-transition: transform .2s ease;
    transition: transform .2s ease;
    transition: transform .2s ease, -webkit-transform .2s ease; }

#confirm-yes {
  background: url("../img/common/confirm_yes.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 30px; }

#confirm-no {
  background: url("../img/common/confirm_no.png") no-repeat;
  background-size: 100% 100%; }

#confirm-btn-wrap .btn:hover {
  -webkit-transform: scale(0.98);
  -ms-transform: scale(0.98);
  transform: scale(0.98); }

#confirm-copyright {
  background: url("../img/common/confirm_copyright.png") no-repeat;
  background-size: 100% 100%;
  width: 95px;
  height: 15px;
  margin: 75px auto 0 auto; }

@media screen and (max-width: 780px) {
  #confirm-wrap {
    width: 100%;
    padding: 30px 15px; }
  #confirm-logo {
    width: 25vw;
    height: 25vw; }
  #confirm-text {
    width: calc(100vw - 30px);
    height: calc((100vw - 30px) / 3);
    margin-top: -6vw; }
  #confirm-btn-wrap {
    width: calc(100vw - 30px);
    padding: 0 10vw;
    margin: 30px auto 0 auto; }
    #confirm-btn-wrap .btn {
      width: calc((100vw - 30px - 25vw) / 2);
      height: calc((50vw - 15px - 12.5vw) / 3.35); }
  #confirm-yes {
    margin-right: 5vw; }
  #confirm-copyright {
    width: 76px;
    height: 12px;
    margin: 75px auto 0 auto; } }

/**************************************************

		Header

**************************************************/
header {
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/common/menu_bg.png") repeat-y;
  background-size: 250px 30px;
  background-attachment: fixed;
  width: 250px;
  height: 100%; }
  header nav {
    margin-top: 50px; }
    header nav li {
      position: relative;
      width: 210px;
      height: 60px; }
      header nav li img {
        position: absolute;
        top: 0;
        left: 0;
        width: 210px;
        height: 60px; }
    header nav li:not(:first-child) {
      margin-top: 10px; }
    header nav li.current img:first-child {
      opacity: 0; }
    header nav li:not(.current) img:last-child {
      opacity: 0; }
    header nav li .hover-line {
      position: relative;
      width: 0;
      height: 60px;
      overflow: hidden; }
      header nav li .hover-line img:last-child {
        opacity: 1; }
    header nav .nav {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    header nav .top .nav {
      background: url("../img/common/nav01.png") no-repeat;
      background-size: 100% 200%; }
    header nav .news .nav {
      background: url("../img/common/nav02.png") no-repeat;
      background-size: 100% 200%; }
    header nav .product .nav {
      background: url("../img/common/nav03.png") no-repeat;
      background-size: 100% 200%; }
    header nav .support .nav {
      background: url("../img/common/nav04.png") no-repeat;
      background-size: 100% 200%; }
    header nav .contact .nav {
      background: url("../img/common/nav05.png") no-repeat;
      background-size: 100% 200%; }
    header nav .current .nav {
      background-position: 0 -60px; }

#logo-wrap {
  width: 100px;
  margin: 60px 0 0 60px; }

#logo {
  background: url("../img/common/logo.png") no-repeat;
  background-size: 100px 100px;
  width: 100px;
  height: 100px; }

#poetry-wrap {
  width: 120px;
  margin: 20px 0 0 50px;
  pointer-events: none; }

#menu-btn {
  display: none; }

#menu-title {
  position: fixed;
  top: 42px;
  left: -120px;
  background: url("../img/common/menu_title.png") no-repeat;
  background-size: 100% 100%;
  width: 120px;
  height: 36px;
  -webkit-transition: left .2s ease;
  -o-transition: left .2s ease;
  transition: left .2s ease; }

#menu-title.show {
  left: 0; }

#movie-wrap {
  position: absolute;
  bottom: 108px;
  left: 27px;
  background: #ccc;
  width: 160px;
  height: 90px;
  -webkit-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  transform: rotate(-2deg); }

@media screen and (max-width: 780px) {
  header {
    position: relative;
    background: none;
    width: 100%;
    height: auto;
    z-index: 99; }
    header nav {
      position: fixed;
      top: 0;
      left: -190px;
      background: url("../img/common/menu_bg.png") top right repeat-y;
      background-size: 250px 30px;
      width: 190px;
      height: 100%;
      margin: 0;
      padding: 102px 0;
      z-index: 998; }
      header nav li {
        width: 140px;
        height: 40px;
        margin-left: -3px; }
        header nav li img {
          width: 140px;
          height: 40px; }
      header nav .current .nav {
        background-position: 0 -40px; }
  #wrap.sp header nav {
    overflow-y: scroll; }
  #logo-wrap {
    position: relative;
    width: 100px;
    padding-top: 35px;
    margin: 0 auto;
    z-index: 99; }
  #logo {
    background: url("../img/common/logo_sp.png") no-repeat;
    background-size: 100px 100px;
    width: 100px;
    height: 100px; }
  #poetry-wrap {
    display: none;
    width: 100px;
    margin: 20px auto 0 auto; }
  #menu-btn {
    display: block;
    position: fixed;
    top: 15px;
    left: 15px;
    background: url("../img/common/menu_btn.png") no-repeat;
    background-size: 52px 104px;
    width: 52px;
    height: 52px;
    cursor: pointer;
    z-index: 999; }
  #menu-title {
    display: none; }
  header.open #menu-btn {
    background-position: 0 -52px; } }

/**************************************************

		Inner

**************************************************/
#inner {
  width: 100%;
  padding: 90px 10vw 0 calc(10vw + 250px);
  margin: 0 auto 200px auto; }

#tw-btn {
  position: absolute;
  top: -18px;
  right: 30px;
  width: 126px;
  height: 60px;
  -webkit-transition: top .3s ease;
  -o-transition: top .3s ease;
  transition: top .3s ease; }

#wrap:not(.sp) #tw-btn:hover {
  top: 0; }

article:not(.top) {
  position: relative;
  background: #fff;
  width: 100%;
  padding: 80px 5vw 200px 5vw;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid #f2f2f2;
  -webkit-box-shadow: 1px 1px 4px #d7d7d7;
  box-shadow: 1px 1px 4px #d7d7d7; }
  article:not(.top):before {
    content: '';
    position: absolute;
    top: 5px;
    left: -45px;
    background: url("../img/common/tape.png") no-repeat;
    background-size: 100% 100%;
    width: 175px;
    height: 50px;
    -webkit-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    transform: rotate(-35deg); }
  article:not(.top):after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -40px;
    background: url("../img/common/tape.png") no-repeat;
    background-size: 100% 100%;
    width: 175px;
    height: 50px;
    -webkit-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    transform: rotate(-25deg); }

#page-title {
  width: 580px;
  margin: 0 auto 100px auto; }

@media screen and (max-width: 1440px) {
  #inner {
    padding: 80px 60px 0 300px; }
  #tw-btn {
    top: -15px;
    right: 20px;
    width: 105px;
    height: 50px; }
  #page-title {
    width: 493px;
    margin-bottom: 80px; } }

@media screen and (max-width: 960px) {
  #inner {
    padding: 60px 50px 0 290px; }
  #page-title {
    width: 100%;
    margin-bottom: 8vw; } }

@media screen and (max-width: 780px) {
  #inner {
    width: 100%;
    padding: 0 15px;
    margin: -35px auto 30vw auto; }
  #tw-btn {
    right: 10px; }
  article:not(.top) {
    padding: 40px 15px 90px 15px; }
    article:not(.top):before {
      display: none; }
    article:not(.top):after {
      bottom: -18px;
      right: calc((100vw - 140px) / 2 - 15px);
      width: 140px;
      height: 40px;
      -webkit-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
      transform: rotate(-3deg); }
  #page-title {
    width: 100%;
    margin-bottom: 12vw; } }

/**************************************************

		Pagetop

**************************************************/
footer {
  width: 100%;
  padding-left: 250px;
  margin-bottom: 100px; }

#pagetop-wrap {
  position: fixed;
  bottom: -60px;
  right: 20px;
  background: url("../img/common/pagetop.png") no-repeat;
  background-size: 100% 100%;
  width: 60px;
  height: 60px;
  -webkit-transition: bottom .4s ease;
  -o-transition: bottom .4s ease;
  transition: bottom .4s ease;
  cursor: pointer; }

#pagetop-wrap.scroll {
  bottom: 20px; }

#copyright-wrap {
  position: absolute;
  bottom: 40px;
  left: 300px;
  background: url("../img/common/copyright.png") no-repeat;
  background-size: 100% 100%;
  width: 230px;
  height: 32px;
  pointer-events: none; }

#copyright-wrap.fixed {
  position: fixed;
  bottom: 40px;
  left: 40px;
  background: url("../img/common/copyright_sp.png") no-repeat;
  background-size: 100% 100%;
  width: 140px;
  height: 45px; }

@media screen and (max-width: 780px) {
  footer {
    padding: 0 15px;
    margin-bottom: 25px; }
  #copyright-wrap {
    position: static;
    background: url("../img/common/copyright_sp.png") no-repeat;
    background-size: 100% 100%;
    width: 140px;
    height: 45px;
    margin-left: 5px; } }