@charset "UTF-8";

/* ----------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------- */
#wrapper,
.t-mode-pc[data-type="replace"] #wrapper {
    padding: 0;
    background: #1E1E1E;
}

.t-mode-pc[data-type="replace"] #wrapper img {
    max-width: 100%;
}

/* ----------------------------------------------------------------------------
 * Common
 * ------------------------------------------------------------------------- */
.wp-section {
    padding: 140px 0;
}

.wp-section__title {
    margin-bottom: 140px;
}

.wp-section__subtitle {
    margin: 68px 0;
}

/* Scroll in effect */
.scroll-in {
    transition-delay: 0s;
    transition-duration: 1.2s;
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(100px);
    opacity: 0;
}

.scroll-in-active {
    transform: translateY(0);
    opacity: 1;
}



/* ----------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------- */
.wp-header {
    background: #040404;
    text-align: center;
    padding: 130px 0;
}


/* ----------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------- */
.wp-hero {
    padding: 155px 49px;
    background: url(../img/hero_bg.jpg) center center no-repeat;
    background-size: cover;
}

.wp-hero__content {
    text-align: center;
}


/* ----------------------------------------------------------------------------
 * PC
 * ------------------------------------------------------------------------- */
.wp-section-pc {
    text-align: center;
}

.wp-section-pc .wp-section__body {
    margin: 0 auto;
    max-width: 1340px;
    padding: 0 40px;
}

.wp-section-pc-list {
    margin: 0 -14px;
    overflow: hidden;
}

.wp-section-pc-list-item {
    float: left;
    width: 33.333333%;
    padding: 0 14px;
    box-sizing: border-box !important;
}

.wp-section-pc-list-item__size-list {
    margin-top: 17px;
}

.wp-section-pc-list-item__size + .wp-section-pc-list-item__size {
    border-top: 1px solid #454545;
}

.wp-section-pc__instructions {
    margin-top: 140px;
    text-align: left;
}

/* ----------------------------------------------------------------------------
 * iPhone
 * ------------------------------------------------------------------------- */
.wp-section-iphone {
    text-align: center;
}

.wp-section-iphone .wp-section__body {
    margin: 0 auto;
    max-width: 1378px;
    padding: 0 40px;
}

.wp-section-iphone-list {
    margin: 0 -7px;
    overflow: hidden;
}

.wp-section-iphone-list-item {
    float: left;
    width: 25%;
    padding: 0 7px;
    box-sizing: border-box !important;

}

.wp-section-iphone-list-item__image img {
    -webkit-backface-visibility: hidden;
}

.wp-section-iphone__instructions {
    margin-top: 140px;
    text-align: left;
}


/* ----------------------------------------------------------------------------
 * Android
 * ------------------------------------------------------------------------- */
.wp-section-android {
    text-align: center;
}

.wp-section-android .wp-section__body {
    margin: 0 auto;
    max-width: 1062px;
    padding: 0 40px;
}

.wp-section-android-list {
    margin: -44px;
    overflow: hidden;
}

.wp-section-android-list-item {
    float: left;
    width: 50%;
    padding: 44px;
    box-sizing: border-box !important;

}

.wp-section-android-list-item__image img {
    -webkit-backface-visibility: hidden;
}

.wp-section-android__instructions {
    margin-top: 140px;
    text-align: left;
}


/* ----------------------------------------------------------------------------
 * Movie
 * ------------------------------------------------------------------------- */
.wp-movie {
    text-align: center;
    margin-top: 60px;
    padding-bottom: 180px;
}

.wp-movie__title {
    margin-bottom: 94px;
}

.wp-movie__video {
    cursor: pointer;
}


/* ----------------------------------------------------------------------------
 * Common
 * ------------------------------------------------------------------------- */
.wp-parallax,
.wp-parallax__image {
    height: 515px;
}

#wp-parallax-01 .wp-parallax__image {
    background: url(../img/parallax_01.jpg) center center no-repeat;
    background-size: cover;
}

#wp-parallax-02 .wp-parallax__image {
    background: url(../img/parallax_02.jpg) center center no-repeat;
    background-size: cover;
}