@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/** ================================================

  Assets Path Settings

================================================ */
/** ================================================

  Easing Settings

================================================ */
/** ================================================

  Assets Functions
  
  Example:

    background: #000000 image('btn/btn.png') no-repeat 0 0;

================================================ */
/* ======================================================
  アイコンフォント
====================================================== */
@font-face {
  font-family: 'yum';
  src: url("font/yum.eot?#iefix") format("embedded-opentype"), url("font/yum.woff") format("woff"), url("font/yum.ttf") format("truetype"), url("font/yum.svg#ucc") format("svg");
  font-weight: normal;
  font-style: normal; }

.i-facebook:before, .i-twitter:before {
  display: inline-block;
  font-family: "yum";
  font-size: inherit;
  font-style: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.i-facebook:before {
  content: ""; }

.i-twitter:before {
  content: ""; }

@-webkit-keyframes slide-animate1 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); } }

@keyframes slide-animate1 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0); }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); } }

html,
body {
  background: #ffffff;
  font-family: 'Noto Sans JP', sans-serif; }

*,
*:before,
*:after {
  box-sizing: border-box; }

.btn-np-next,
.btn-np-prev {
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -29px;
  cursor: pointer;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  .btn-np-next.is-show,
  .btn-np-prev.is-show {
    transition-duration: 1s;
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  @media (max-width: 799px) {
    .btn-np-next,
    .btn-np-prev {
      display: none; } }

.btn-np-next {
  right: 20px;
  -webkit-transform: translateX(200%);
          transform: translateX(200%); }

.btn-np-prev {
  left: 20px;
  -webkit-transform: translateX(-200%);
          transform: translateX(-200%); }

.copy {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  .copy__input {
    width: calc(100% - 125px);
    padding: 10px; }
  .copy__btn {
    width: 120px;
    background-color: #231815;
    color: #d3d1d0;
    font-size: 14px;
    font-weight: 200;
    letter-spacing: 2px;
    line-height: 40px;
    text-align: center;
    cursor: pointer; }

.home {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 10;
  transition-property: opacity;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  @media (max-width: 799px) {
    .home__h {
      width: 80%;
      margin-right: auto;
      margin-left: auto; } }
  @media (max-width: 799px) {
    .home__h img {
      width: 100%;
      height: auto; } }
  .home__inner {
    position: relative;
    z-index: 2;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="10" /></filter></svg>#filter');
    -webkit-filter: blur(10px);
            filter: blur(10px);
    transition-property: opacity, -webkit-filter;
    transition-property: opacity, filter;
    transition-property: opacity, filter, -webkit-filter;
    transition-duration: 1.4s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    image-rendering: -webkit-optimize-contrast; }
  .home__btn {
    width: 226px;
    margin-top: 30px;
    margin-right: auto;
    margin-left: auto; }
    .home__btn a {
      display: block;
      cursor: pointer; }
    .home__btn img {
      width: 226px;
      height: 72px; }
    @media (max-width: 799px) {
      .home__btn {
        width: 180px; }
        .home__btn img {
          width: 180px;
          height: 57px; } }
  .home:before {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #f0b898, #e1d5d5);
    content: '';
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    transition-property: opacity;
    transition-duration: 1.4s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  .home:after {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #f0b898, #e1d5d5);
    transition-property: opacity;
    transition-duration: 1.4s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    content: ''; }
  .home.is-ready .home__inner {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter');
    -webkit-filter: blur(0);
            filter: blur(0); }
  .home.is-ready:after {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  .home.is-hidden {
    pointer-events: none; }
    .home.is-hidden .home__inner {
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="10" /></filter></svg>#filter');
      -webkit-filter: blur(10px);
              filter: blur(10px); }
    .home.is-hidden:before {
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  .home.is-remove {
    display: none; }

.shares {
  width: 400px;
  padding: 20px 30px;
  background-color: #5d5d5d;
  color: #ffffff;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  .shares.is-show {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%); }
  .shares__h, .shares__btns {
    text-align: center; }
  .shares__h {
    font-size: 14px;
    font-weight: 200;
    letter-spacing: 2px; }
  .shares__btns {
    margin-top: 20px; }
    .shares__btns a {
      display: inline-block;
      font-size: 20px;
      cursor: pointer; }
      .shares__btns a + a {
        margin-left: 30px; }
  .shares__copy {
    margin-top: 40px; }

.video-aside {
  width: 82.74232%;
  height: 50px;
  position: absolute;
  left: 8.62884%;
  bottom: 0;
  background-color: #ffffff;
  padding-right: 150px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  .video-aside__meta {
    position: relative;
    z-index: 2;
    background: #ffffff; }
  .video-aside__share {
    width: 150px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #5d5d5d;
    color: #8a8a8a;
    font-size: 14px;
    letter-spacing: 2px;
    text-align: center;
    line-height: 50px;
    z-index: 2; }
  .video-aside__shares {
    position: absolute;
    top: 0;
    right: 0; }
  .video-aside.is-show {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  @media (max-width: 799px) {
    .video-aside {
      display: none; } }

.video-meta {
  width: 100%;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  .video-meta__inner {
    letter-spacing: -0.2em; }
  .video-meta__h, .video-meta__comment {
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal; }
  .video-meta__h {
    position: relative;
    padding-left: 25px;
    background-color: #ffffff;
    color: #686868;
    font-size: 14px;
    z-index: 2; }
  .video-meta__comment {
    background-color: #ffffff; }
    .video-meta__comment__h {
      display: inline-block;
      position: relative;
      padding-left: 30px;
      padding-right: 15px;
      color: #bbbbbb;
      font-size: 11px;
      vertical-align: top;
      z-index: 2;
      background-color: #ffffff; }
    .video-meta__comment__body {
      display: inline-block;
      color: #686868;
      font-size: 12px;
      vertical-align: top;
      -webkit-transform: translateX(0);
              transform: translateX(0); }
      .video-meta__comment__body.is-slide1 {
        -webkit-animation: slide-animate1 15s linear 0s 1;
                animation: slide-animate1 15s linear 0s 1; }
      .video-meta__comment__body.is-slide2 {
        -webkit-animation: slide-animate2 30s linear 0s infinite;
                animation: slide-animate2 30s linear 0s infinite; }
  .video-meta.is-show {
    transition-duration: 1s;
    -webkit-transform: translateY(0);
            transform: translateY(0); }

.videos {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; }
  .videos__inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }
    .videos__inner #video {
      display: block;
      /*object-fit: cover;*/
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0; }

.wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; }