@charset "UTF-8";

/* base */
body {
 color: #fff;
 font-family: "Hiragino Kaku Gothic Pro", Meiryo, Arial, "MS PGothic", sans-serif;
 font-size: 13px;
 line-height: 2;
 background: #000;
 -webkit-text-size-adjust: 100%;
}

p {
 margin-bottom: 20px;
}

h2 {
 font-size: 18px;
 margin-bottom: 20px;
}

a {
 color: #fff;
 transition: all .3s;
}

a:hover {
 opacity: 0.8;
}

.hide {
 opacity: 0;
}

.en,
.jp {
 height: 0;
 opacity: 0;
 transform: translateY(50px);
 overflow: hidden;
}

.en.active,
.jp.active {
 height: auto;
 opacity: 1;
 transform: translateY(0);
 transition: all .2s;
}

.en {
 font-family: "roboto", sans-serif;
 line-height: 1.5;
 letter-spacing: 0.05em;
}

.en h2 {
 font-size: 30px;
 font-weight: normal;
}

.sec {
 position: relative;
 overflow: hidden;
}

.sec-fix {
 position: fixed;
 width: 100%;
}

.sec-bg {
 position: absolute;
 width: 100%;
 height: 100%;
 background-position: center center;
 background-size: cover;
 background-repeat: no-repeat;
}

.sec-inner {
 position: relative;
 top: 0;
 width: 100%;
 height: 100%;
}

.sec-left,
.sec-right {
 position: absolute;
 top: 0;
 left: 0;
 width: 50%;
 height: 100%;
}

.sec-right {
 left: auto;
 right: 0;
}

.center {
 position: relative;
 display: table;
 width: 100%;
 height: 100%;
}

.center-inner {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
}

.center-box {
 position: relative;
 display: inline-block;
}

.fixed {
 position: fixed;
}

#wrapper {
 position: relative;
 display: none;
}

/* lang */
#lang {
 position: fixed;
 top: 20px;
 right: 20px;
 z-index: 10;
 -webkit-user-select: none;
 user-select: none;
}

#lang span {
 display: inline-block;
 color: #ccc;
 font-family: "roboto", sans-serif;
 font-size: 13px;
 width: 30px;
 height: 30px;
 line-height: 30px;
 background: #333;
 text-align: center;
 cursor: pointer;
 transition: all .3s;
}

#lang span:hover {
 opacity: 0.8;
}

#lang span.active {
 color: #000;
 background: #ccc;
 pointer-events: none;
}

/* loading */
#loading {
 z-index: 1000;
}

#loading-box {
 position: absolute;
 bottom: 0;
 width: 100%;
 text-align: center;
}

#loading-txt {
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;
 font-style: italic;
 margin-bottom: 20px;
}

#loading-txt span {
 font-size: 36px;
 padding: 0 10px;
}

#loading-bar {
 width: 1px;
 height: 0;
 margin: 0 auto;
 background: #fff;
}

#mask {
 z-index: 999;
}

#mask-left,
#mask-right {
 position: absolute;
 top: 0;
 left: 0;
 width: 50%;
 height: 100%;
 background: #000;
}

#mask-right {
 left: auto;
 right: 0;
}

/* kv */
#kv {
 font-family: "roboto", sans-serif;
}

#kv .sec-bg {
 background-image: url(../images/bg-1.jpg);
 position: fixed;
}

#kv-txt-1 {
 font-size: 72px;
 font-weight: 500;
}

#kv-txt-2 {
 font-size: 24px;
 font-weight: 300;
 font-style: italic;
 letter-spacing: 0.1em;
}

#kv-down.anim {
 transform: translateY(100px)
}

.btn-arrow {
 position: absolute;
 left: 50%;
 bottom: 40px;
 width: 40px;
 height: 40px;
 margin-left: -20px;
 background: rgba(255, 255, 255, 0.5);
 cursor: pointer;
 transition: all .3s;
}

.btn-arrow i {
 display: block;
 position: absolute;
 top: 20px;
 width: 14px;
 height: 1px;
 background: #000;
 transition: all .3s;
}

.btn-arrow:hover i {
 top: 25px;
}

.btn-arrow i:first-child {
 left: 8px;
 transform: rotate(45deg);
}

.btn-arrow i:last-child {
 right: 8px;
 transform: rotate(-45deg);
}

/* kg */
#kg {
 font-family: "roboto", sans-serif;
 font-weight: 300;
 font-style: italic;
 background: #000;
}

#kg-txt-1 {
 font-size: 48px;
 min-width: 266px;
}

#kg-txt-1 span {
 font-size: 150px;
 font-weight: 400;
 padding: 0 5px;
}

#kg-txt-2 {
 position: absolute;
 top: -30px;
 width: 100%;
 color: #000;
 font-size: 36px;
 background: #fff;
 opacity: 0;
 transform: scale(1.5);
 transition: all .3s;
}

#kg-txt-2.anim {
 opacity: 1;
 transform: scale(1);
}

/* profile */
#profile .sec-left {
 background: #222;
}

#profile .center-box {
 width: 70%;
 text-align: left;
}

#profile .sec-right {
 background: url(../images/bg-2b.jpg) center center no-repeat;
 background-size: cover;
}

#profile-2 {
 pointer-events: none;
}

#profile-2 .sec-right {
 background: url(../images/bg-3b.jpg) center center no-repeat;
 background-size: cover;
}

/* yt */
#yt {
 background: #000;
}

#yt-iframe {
 width: 100%;
 height: 100%;
 opacity: 0;
 transform: scale(0.5);
 transition: all .7s;
}

#yt-iframe.anim {
 opacity: 1;
 transform: scale(1) translateY(0);
}

/* txp */
#txp .sec-right {
 background: #222;
}

#txp .center-box {
 width: 70%;
 text-align: left;
}

#txp .sec-left {
 background: url(../images/bg-txp-b.jpg) center center no-repeat;
 background-size: cover;
}

#txp-2 {
 pointer-events: none;
}

#txp-2 .sec-left {
 display: none;
 position: fixed;
 background: url(../images/bg-txp-2b.jpg) center center no-repeat;
 background-size: cover;
}

#txp-3 {
 pointer-events: none;
}

#txp-3 .sec-left {
 display: none;
 position: fixed;
 background: url(../images/bg-txp-3.jpg) center center no-repeat;
 background-size: cover;
}

#txp-4 {
 pointer-events: none;
}

#txp-4 .sec-left {
 display: none;
 position: fixed;
 background: url(../images/bg-txp-4.jpg) center center no-repeat;
 background-size: cover;
}

#txp-5 {
 pointer-events: none;
}

#txp-5 .sec-left {
 display: none;
 position: fixed;
 background: url(../images/bg-txp-5.jpg) center center no-repeat;
 background-size: cover;
}

/* teach */
#teach .sec-left {
 background: #222;
}

#teach .center-box {
 width: 70%;
 text-align: left;
}

#teach .sec-right {
 background: url(../images/bg-teach-1.jpg) center center no-repeat;
 background-size: cover;
}

#teach-2 {
 pointer-events: none;
}

#teach-2 .sec-right {
 background: url(../images/bg-teach-2.jpg) center center no-repeat;
 background-size: cover;
}

/* ppn */
#ppn .en h2 {
 font-size: 21px;
}

#ppn .sec-right {
 background: #222;
}

#ppn .center-box {
 width: 70%;
 text-align: left;
}

#ppn .sec-left {
 background: url(../images/bg-ppn.png) center center no-repeat;
 background-size: cover;
}

#ppn-2 {
 pointer-events: none;
}

#ppn-2 .sec-left {
 display: none;
 position: fixed;
 background: url(../images/bg-ppn-2.png) center center no-repeat;
 background-size: cover;
}

/* bio */
#bio {
 height: auto !important;
 line-height: 1.5;
 background: url(../images/bg-bio.jpg) center center no-repeat #000;
 background-size: cover;
}

#bio .center-inner {
 text-align: left;
}

#bio .center-box {
 box-sizing: border-box;
 width: 50%;
 padding: 50px;
 background: rgba(0, 0, 0, 0.6);
 text-align: left;
}

#bio h2 {
 font-family: "roboto", sans-serif;
 font-size: 48px;
 font-weight: 300;
 font-style: italic;
 margin-bottom: 30px;
 text-align: center;
}

#bio table {
 width: 100%;
 border-top: solid 1px rgba(255, 255, 255, 0.05);
 border-collapse: collapse;
}

#bio table table {
 width: auto;
 border: none;
}

#bio th,
#bio td {
 font-weight: normal;
 padding: 5px 0;
 border-bottom: solid 1px rgba(255, 255, 255, 0.05);
}

#bio td th,
#bio td td {
 padding: 0;
 border: none;
}

#bio th,
#bio td th {
 padding-right: 10px;
 white-space: nowrap;
}

/* feel */
#feel {
 font-family: "roboto", sans-serif;
 font-size: 72px;
 font-weight: 500;
 font-style: italic;
 letter-spacing: 0.1em;
 background: #000;
}

#feel-txt {
 opacity: 0;
 transform: scale(1.5);
 transition: all .5s;
}

#feel-txt.anim {
 opacity: 1;
 transform: scale(1);
}

#feel-up {
 transform: rotate(180deg) translateY(-100px);
}

#feel-up.anim {
 transform: rotate(180deg) translateY(0);
}

/* parts */
.btn {
 display: inline-block;
 color: #000;
 margin: 0 10px 10px 0;
 padding: 5px 15px;
 background: #fff;
 text-decoration: none;
}

.en .btn {
 padding: 10px 15px;
}

/* contact */
#contact {
 opacity: 0;
 transform: translateY(100px);
 transition: all .3s;
}

.mode-loaded #contact {
 opacity: 1;
 transform: translateY(0);
}

#contact .center-box {
 width: 500px;
}

#contact h2 {
 font-family: "roboto", sans-serif;
 font-size: 48px;
 font-weight: 300;
 font-style: italic;
 margin-bottom: 30px;
 text-align: center;
 letter-spacing: 0.05em;
}

input[type=text],
input[type=email],
textarea {
 color: #fff;
 font-size: 16px;
 width: 100%;
 margin-bottom: 10px;
 padding: 10px;
 border: solid 1px #333;
 border-radius: 0;
 background: none;
 outline: none;
 appearance: none;
 -webkit-appearance: none;
 box-sizing: border-box;
}

textarea {
 height: 200px;
}

input[type=submit] {
 font-size: 16px;
 width: 100%;
 padding: 15px;
 border: none;
 border-radius: 0;
 background: #fff;
 appearance: none;
 -webkit-appearance: none;
 box-sizing: border-box;
 cursor: pointer;
 transition: all .3s;
}

input[type=submit]:hover {
 opacity: 0.8;
}

div.mfp_err {
 color: #c00;
 font-weight: bold;
 margin: 0 0 10px;
}

.problem {
 background: none;
}

@media screen and (max-width:960px) {
 body {
  font-size: 12px;
 }

 h2,
 p {
  margin-bottom: 15px;
 }

 .en h2 {
  font-size: 21px;
 }

 #kv-txt-1 {
  font-size: 60px;
 }

 #kg-txt-1 span {
  font-size: 100px;
 }

 #kg-txt-2 {
  top: -60px;
 }

 #profile .center-box,
 #txp .center-box,
 #teach .center-box,
 #ppn .center-box {
  width: 80%;
 }

 #bio .center-inner {
  text-align: center;
 }

 #bio .center-box {
  width: 640px;
 }

 #feel {
  font-size: 60px;
  line-height: 1.5;
 }
}

@media screen and (max-width:640px) {
 .sec {
  background: #000;
 }

 .sec-left,
 .sec-right {
  position: relative !important;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
 }

 .sec-inner {
  position: relative !important;
 }

 #profile,
 #profile-2,
 #yt,
 #txp,
 #txp-2,
 #txp-3,
 #txp-4,
 #txp-5,
 #teach,
 #teach-2,
 #ppn,
 #ppn-2 {
  height: auto !important;
 }

 #kv-txt-1 {
  font-size: 48px;
  line-height: 1.5;
 }

 #kg-txt-1 {
  font-size: 24px;
 }

 #kg-txt-1 span {
  font-size: 72px;
 }

 #kg-txt-2 {
  font-size: 24px;
 }

 #profile .center-box,
 #txp .center-box,
 #ppn .center-box,
 #teach .center-box {
  width: auto;
  padding: 30px 20px;
 }

 #profile .sec-right {
  height: 480px;
 }

 #profile-2 .sec-right,
 #txp .sec-left,
 #txp-3 .sec-left,
 #txp-4 .sec-left,
 #txp-5 .sec-left,
 #ppn .sec-left,
 #teach .sec-right {
  display: none !important;
 }

 #txp-2 .sec-left,
 #ppn-2 .sec-left,
 #teach-2 .sec-right {
  display: block !important;
  position: relative;
  height: 300px;
  opacity: 1 !important;
 }

 #ppn-2 {
  background: #111;
 }

 #bio .center-box {
  width: auto;
  padding: 40px 20px;
  background: rgba(0, 0, 0, 0.7);
 }

 #bio h2 {
  font-size: 36px;
 }

 #yt-iframe {
  opacity: 1;
  transform: scale(1);
 }

 #feel {
  font-size: 48px;
 }

 #feel-up {
  bottom: 0;
  transform: rotate(180deg) translateY(0);
 }

 #contact .center-inner {
  padding: 20px;
 }

 #contact .center-box {
  width: 100%;
 }

 #contact h2 {
  font-size: 36px;
 }

 .btn {
  display: block;
  padding: 5px;
  text-align: center;
 }
}