/* ==========================================
   PiVid Static Site - Combined CSS
   ========================================== */

/* --- Global / Application --- */
.mobile-view {
    min-width: 100%;
}

#global_menu {
    background-color: #FF7461;
    border: 0;
    border-radius: 0;
}
#global_menu .navbar-brand {
    font-size: xx-large;
    color: #FFFFFF;
    padding: 5px;
}
#global_menu .navbar-brand:hover {
    color: #ecf0f1;
}

.container {
    margin: 0 auto;
}

.container-sp {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

#bs-footer, #app-footer {
    padding: 30px 0;
    background-color: #ffffff;
    color: #FF7461;
    font-size: 1.1em;
}
#bs-footer .container,
#app-footer .container {
    margin: 0 auto;
}
#bs-footer #support,
#app-footer #support {
    text-align: center;
    float: none;
    margin: 0 auto;
    max-width: 650px;
}
#bs-footer #support a,
#app-footer #support a {
    color: #FF7461;
}
#bs-footer .copy-right,
#app-footer .copy-right {
    margin: 10px auto;
    text-align: center;
}
#bs-footer .copy-right span.company-name,
#app-footer .copy-right span.company-name {
    padding-left: 0.5em;
    font-size: 1.5em;
}

/* --- Top Page --- */
.top-index {
    width: 100%;
    margin: 0;
}
.top-index .main-web {
    overflow: visible;
}
.top-index .main-sp {
    overflow: hidden;
}
.top-index .main-image-area {
    background-image: url("../images/top_image.png");
    background-position: center center;
    position: relative;
    width: 100%;
    height: 600px;
}
.top-index .main-image-area .logo-area {
    width: 100%;
    position: absolute;
    text-align: center;
    top: 5%;
}
.top-index .main-image-area .catch-copy {
    position: absolute;
    top: 25%;
}
.top-index .main-image-area .sub-title {
    color: #ffffff;
    position: absolute;
    display: block;
    font-size: 1.6em;
    top: 48%;
    line-height: 100%;
}
.top-index .main-image-area .sub-title .app-name {
    font-size: 1.5em;
    font-family: "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", "メイリオ", Meiryo, fantasy;
}
.top-index .main-image-area .subtitle-en {
    font-size: 1.2em;
}
.top-index .main-image-area .app-store {
    position: absolute;
    top: 60%;
}
.top-index .main-image-area .app-store:hover {
    cursor: pointer;
}
.top-index .main-image-area .fb-like iframe {
    z-index: 9999;
}
.top-index .main-image-area .fb-like,
.top-index .main-image-area .tw-button {
    position: absolute;
    top: 62%;
}
.top-index .main-image-area .tw-web {
    left: 32%;
}
.top-index .main-image-area .fb-web {
    left: 37.2%;
}
.top-index .main-image-area .tw-sp {
    left: 29.5%;
}
.top-index .main-image-area .fb-sp {
    left: 36.7%;
}
.top-index .main-image-area .facebook-logo,
.top-index .main-image-area .twitter-logo {
    position: absolute;
    top: 60%;
    margin-left: 30px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: x-large;
    width: 40px;
    height: 40px;
    float: left;
}
.top-index .main-image-area .facebook-logo {
    line-height: 30px;
    display: block;
    background-color: #3B5998;
}
.top-index .main-image-area .facebook-logo img {
    max-height: 30px;
    min-height: 30px;
}
.top-index .main-image-area .fb-logo-sp {
    left: 21.5%;
}
.top-index .main-image-area .fb-logo-web {
    left: 26.5%;
}
.top-index .main-image-area .twitter-logo {
    display: block;
    text-align: center;
    line-height: 40px;
    background-color: #55ACEE;
}
.top-index .main-image-area .twitter-logo img {
    max-height: 20px;
    min-height: 20px;
}
.top-index .main-image-area .tw-logo-sp {
    left: 16.7%;
}
.top-index .main-image-area .tw-logo-web {
    left: 23.2%;
}
.top-index .main-image-area .left-content-web {
    left: 15%;
}
.top-index .main-image-area .left-content-sp {
    left: 5%;
}
.top-index .main-image-area .screen-shot-left {
    position: absolute;
    top: 15%;
}
.top-index .main-image-area .screen-shot-right {
    position: absolute;
    left: 70%;
    top: 15%;
}
.top-index .main-image-area .right-content-web {
    left: 60%;
}
.top-index .main-image-area .right-content-sp {
    left: 55%;
}
.top-index .main-image-area .app-icon-web {
    position: absolute;
    left: 83%;
    top: 84%;
}
.top-index .main-image-area .app-icon-sp {
    position: absolute;
    left: 86%;
    top: 84%;
}
.top-index .row {
    margin: 0;
}
.top-index .copies-area {
    background-color: #FF7461;
    width: 100%;
}
.top-index .copies-area .copy-area {
    padding-left: 3%;
}
.top-index .copies-area .copy-area .title-image {
    margin: 25px auto 35px;
}
.top-index .copies-area .copy-area .photo-area {
    margin: 0 auto;
}
.top-index .copies-area .copy-area .description-area {
    margin: 45px 0px;
    width: 90%;
    color: #ffffff;
    padding-bottom: 20px;
    padding-left: 5px;
    font-size: large;
}
.top-index .copies-area .copy-area .description-area h2.web {
    font-size: 1.7em;
    font-weight: bold;
}
.top-index .copies-area .copy-area .description-area h2.sp {
    font-size: 1.2em;
    font-weight: bold;
}
.top-index .press-background {
    background-color: #130200;
    padding: 10px 0;
}
.top-index .press-background .press-release {
    width: 70%;
    margin: 0 auto;
    color: white;
}
.top-index .press-background .press-release .press-date {
    padding-left: 25px;
    height: 15px;
    margin-bottom: 3px;
    text-align: left;
    font-size: 1.0em;
}
.top-index .press-background .press-release .press-title {
    margin: 0 5px 10px;
    padding-left: 20px;
    height: 50px;
    font-size: 1.5em;
    border-bottom: 1px solid #ffffff;
}
.top-index .press-background .press-release .press-title a {
    color: white;
}
.top-index .press-background .press-release .press-description {
    padding-left: 10px;
    height: 100px;
    font-size: 1.0em;
}
.top-index .press-background .press-release .press-description a {
    color: #FF7461;
}
.top-index .press-background .press-release .mixpanel {
    margin-left: 10px;
}

/* --- Company Page --- */
.company-index {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px;
}
.company-index h1 {
    font-size: 1.4em;
}
.company-index table.table tr {
    height: 60px;
}
.company-index table.table th,
.company-index table.table td {
    padding: 20px;
}
.company-index table.table th {
    background-color: #F6F8FA;
}

/* --- Terms Page --- */
.terms-index {
    margin: 0 10px;
}
.terms-index .web {
    width: 70%;
    margin: 0 auto;
}
.terms-index h1 {
    font-size: 2em;
    margin-bottom: 20px;
}
.terms-index ol, .terms-index ul {
    margin-left: 0px;
    padding-left: 1.5em;
}
.terms-index dd {
    margin: 1em 0 0 10px;
}
.terms-index ol.list-circle > li {
    list-style: none;
    text-indent: -1em;
    padding-left: 0em;
}
.terms-index ol.list-circle > :first-child:before { content: "\2460"; }
.terms-index ol.list-circle > :first-child+li:before { content: "\2461"; }
.terms-index ol.list-circle > :first-child+li+li:before { content: "\2462"; }
.terms-index ol.list-circle > :first-child+li+li+li:before { content: "\2463"; }
.terms-index ol.list-circle > :first-child+li+li+li+li:before { content: "\2464"; }
.terms-index ol.list-circle > :first-child+li+li+li+li+li:before { content: "\2465"; }
.terms-index ol.list-circle > :first-child+li+li+li+li+li+li:before { content: "\2466"; }
.terms-index ol.list-circle > :first-child+li+li+li+li+li+li+li:before { content: "\2467"; }
.terms-index ol.list-circle > :first-child+li+li+li+li+li+li+li+li:before { content: "\2468"; }
.terms-index ol.list-circle > :first-child+li+li+li+li+li+li+li+li+li:before { content: "\2469"; }
.terms-index ol.list-circle > :first-child+li+li+li+li+li+li+li+li+li+li:before { content: "\246a"; }
.terms-index ol.list-circle > :first-child+li+li+li+li+li+li+li+li+li+li+li:before { content: "\246b"; }
.terms-index ol.list-circle > :first-child+li+li+li+li+li+li+li+li+li+li+li+li:before { content: "\246c"; }
.terms-index ol.list-circle > :first-child+li+li+li+li+li+li+li+li+li+li+li+li+li:before { content: "\246d"; }
.terms-index ol.list-circle > :first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li:before { content: "\246e"; }
.terms-index ol.list-circle > :first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li:before { content: "\246f"; }
.terms-index ol.list-circle > :first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li:before { content: "\2470"; }
.terms-index ul.list-none {
    text-indent: -1em;
    padding-left: 1em;
    list-style: disc;
}
.terms-index ul.list-none li {
    padding-left: 1em;
}
.terms-index .terms-info ul {
    list-style: none;
    margin-left: 0px;
    padding-left: 0px;
}

/* --- Privacy Page --- */
.privacy-index {
    margin: 0 10px;
}
.privacy-index .web {
    width: 70%;
    margin: 0 auto;
}
.privacy-index h1 {
    font-size: 2em;
    margin-bottom: 20px;
}
.privacy-index ol, .privacy-index ul {
    margin-left: 0px;
    padding-left: 1.5em;
}
.privacy-index dd {
    margin: 1em 0 0 10px;
}
.privacy-index ol.list-circle > li {
    list-style: none;
    text-indent: -1em;
    padding-left: 1em;
}
.privacy-index ol.list-circle > :first-child:before { content: "\2460"; }
.privacy-index ol.list-circle > :first-child+li:before { content: "\2461"; }
.privacy-index ol.list-circle > :first-child+li+li:before { content: "\2462"; }
.privacy-index ol.list-circle > :first-child+li+li+li:before { content: "\2463"; }
.privacy-index ul.list-none {
    text-indent: -1em;
    padding-left: 1em;
    list-style: disc;
}
.privacy-index ul.list-none li {
    padding-left: 1em;
}
.privacy-index .email {
    margin: 10px 0 0 20px;
}
.privacy-index .email .title {
    font-weight: bold;
}

/* --- Credit Page --- */
.credit-index {
    margin: 0 10px;
}
.credit-index .web {
    width: 70%;
    margin: 0 auto;
}
.credit-index h1 {
    font-size: 2em;
    margin-bottom: 10px;
}
.credit-index .explanation-area {
    margin-top: 10px;
    margin-bottom: 15px;
}
.credit-index .composer-list .composer-info {
    margin-bottom: 15px;
}
.credit-index .composer-list .composer-info .name-area {
    margin-bottom: 5px;
}
.credit-index .composer-list .composer-info .name-area .composer-name {
    font-size: 1.2em;
    font-weight: bold;
    margin-right: 20px;
}

/* --- Logo in navbar --- */
.logo {
    max-height: 40px;
}

/* ==========================================
   Responsive (Mobile)
   ========================================== */
@media (max-width: 767px) {
    /* --- Top Page Mobile --- */
    .top-index .main-image-area {
        height: auto;
        min-height: 500px;
        background-size: cover;
        overflow: hidden;
    }
    .top-index .main-image-area .logo-area .logo {
        max-height: 30px;
    }
    .top-index .main-image-area .catch-copy {
        left: 5% !important;
        max-width: 55%;
    }
    .top-index .main-image-area .sub-title {
        left: 5% !important;
        font-size: 1.1em;
        max-width: 50%;
    }
    .top-index .main-image-area .app-store {
        left: 5% !important;
        max-width: 120px;
    }
    .top-index .main-image-area .facebook-logo,
    .top-index .main-image-area .twitter-logo {
        left: auto !important;
        margin-left: 10px;
        width: 32px;
        height: 32px;
    }
    .top-index .main-image-area .facebook-logo {
        left: 5% !important;
        top: 70%;
    }
    .top-index .main-image-area .twitter-logo {
        left: 16% !important;
        top: 70%;
    }
    .top-index .main-image-area .screen-shot-left {
        left: 55% !important;
        max-width: 35%;
    }
    .top-index .main-image-area .screen-shot-right {
        display: none;
    }
    .top-index .main-image-area .app-icon-web {
        display: none;
    }

    /* Features section - stack vertically */
    .top-index .copies-area .copy-area {
        width: 100% !important;
        float: none !important;
        padding: 0 15px;
        text-align: center;
    }
    .top-index .copies-area .copy-area .title-image img {
        max-width: 60%;
    }
    .top-index .copies-area .copy-area .photo-area img {
        max-width: 80%;
    }
    .top-index .copies-area .copy-area .description-area {
        width: 100%;
        margin: 20px 0;
    }
    .top-index .copies-area .copy-area .description-area h2.web {
        font-size: 1.3em;
    }

    /* Press section */
    .top-index .press-background .press-release {
        width: 95%;
    }
    .top-index .press-background .press-release .press-title {
        font-size: 1.1em;
        height: auto;
        padding-bottom: 10px;
    }
    .top-index .press-background .press-release .press-description {
        height: auto;
    }

    /* --- Sub Pages Mobile --- */
    .terms-index .web,
    .privacy-index .web,
    .credit-index .web {
        width: 100%;
    }
    .terms-index h1,
    .privacy-index h1,
    .credit-index h1 {
        font-size: 1.5em;
    }

    /* Company table */
    .company-index table.table th,
    .company-index table.table td {
        padding: 10px;
        font-size: 0.9em;
    }

    /* Footer */
    #bs-footer {
        font-size: 0.9em;
    }
    #bs-footer #support a {
        font-size: 0.85em;
    }

    /* Credit page - break long URLs */
    .credit-index .composer-list .composer-info .name-area a {
        word-break: break-all;
        font-size: 0.85em;
    }
    .credit-index .composer-list .composer-info .name-area .composer-name {
        display: block;
        margin-bottom: 3px;
    }
}