@charset "utf-8";
/* CSS Document */

/* -----------------------------------
 * smart me
 * ---------------------------------*/

/* common */

.clearfix:after {
    display: block;
    clear: both;
    content: "";
}

.notice {
    font-size: 12px;
    display: block;
    padding: 10px 0 0 0;
    text-align: left;
    line-height: 1.4;
}

sup {
    font-size: 12px;
}

.p-gnav__item.is-active a {
    background-color: #cc023a !important;
}

/* -----------------------------------
 * top
 * ---------------------------------*/

/* about */

.p-about-group__title {
    text-align: center;
    margin: 0 auto 40px !important;
    line-height: 1.6;
}

.p-about__text {
    text-align: center;
}

.p-service__text {
    text-align: center;
    margin: 0 auto 40px;
}

/* service */

.p-service__list {
    border: 1px solid #B2B2B2;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.p-service__list:not(:last-of-type) {
    margin: 0 auto 40px;
}

.p-service__list__image figure {
    position: relative;
}

.p-service__list__image figure img {
    display: block;
    width: 100%;
    height: auto;
}

.p-service__list__image .p-service__list__image__title {
    position: absolute;
    color: #fff;
    text-shadow: rgba(8, 51, 100, 0.32) 0px 3px 8px;
    bottom: 48px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.p-service__list__image .p-service__list__image__title--head {
    display: block;
    font-weight: bold;
    margin: 0 auto 8px;
}

.p-service__summary__list:first-of-type {
    border-bottom: 1px solid #B2B2B2;
}

.p-service__summary__list:last-of-type {
    position: relative;
    top: 16px;
}

.p-service__summary__list {
    flex-basis: 50%;
}

.p-service__summary__list__title {
    font-weight: bold;
    display: flex;
    align-items: center;
    line-height: 1.4;
}

.p-service__summary__list__text {
    margin: 0;
    position: relative;
}

.p-service__summary__list__title--building,
.p-service__summary__list__title--office,
.p-service__summary__list__title--business,
.p-service__summary__list__title--student {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    margin: 0 12px 0 0;
}

.p-service__summary__list__title--building {
    background: #FBF2F6 url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/icon_building.svg) no-repeat center center;
    background-size: 32px 32px;
}

.p-service__summary__list__title--office {
    background: #FBF2F6 url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/icon_office.svg) no-repeat center center;
    background-size: 32px 32px;
}

.p-service__summary__list__title--business {
    background: #FBF2F6 url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/icon_business.svg) no-repeat center center;
    background-size: 32px 32px;
}

.p-service__summary__list__title--student {
    background: #FBF2F6 url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/icon_student.svg) no-repeat center center;
    background-size: 32px 32px;
}

.p-service__summary__list--more,
.p-service__summary__list--more:visited,
.p-service__summary__list--more:active,
.p-service__summary__list--more:hover {
    color: #CC023A !important;
}

.p-service__summary__list--more {
    font-weight: bold;
    margin: 0 0 0 auto;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 16px 0 0;
    transition: opacity 0.3s;
}

.p-service__summary__list--more:hover {
    transition: opacity 0.3s;
    opacity: .6;
}


.p-service__summary__list--more::after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #CC023A;
    border-right: 2px solid #CC023A;
    transform: rotate(-45deg);
}

/* -----------------------------------
 * subpage
 * ---------------------------------*/

/* tab */

.p-sabpage__tabwrap {
    width: 100%;
    height: 166px;
    position: relative;
}

.p-sabpage__tabwrap--title {
    margin: 0 auto !important;
    color: #fff;
    text-shadow: rgba(8, 51, 100, 0.32) 0px 3px 8px;
    text-align: center;
    padding: 40px 0 0 0;
    font-weight: bold;
}

.p-sabpage__tablist {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
}

.p-sabpage__tablist__item {
    box-sizing: border-box;
    display: inline-flex;
    background: #CCCCCC;
    color: #333333;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.p-sabpage__tablist__item:not(:first-child) {
    margin-left: 8px;
}

.p-sabpage__tablist__item.is-active {
    background: #fff;
    color: #CC0033;
    border: 4px solid #CC0033;
    border-bottom: none;
    position: relative;
}

.p-sabpage__tablist__item--title {
    font-weight: bold;
    position: relative;
    display: flex;
    align-items: center;
    transition: opacity 0.3s;
}

.p-sabpage__tablist__item--title::after {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(45deg);
}

.p-sabpage__tablist__item.is-active .p-sabpage__tablist__item--title::after {
    border-bottom: 2px solid #CC0033;
    border-right: 2px solid #CC0033;
}

.p-sabpage__tab--building::before,
.p-sabpage__tab--office::before,
.p-sabpage__tab--business::before,
.p-sabpage__tab--student::before {
    content: "";
    display: block;
    border-radius: 24px;
}

.p-sabpage__tab--building::before {
    background: #F2F2F2 url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/icon_building_inactive.svg) no-repeat center center;
}

.is-active .p-sabpage__tab--building::before {
    background: #FBF2F6 url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/icon_building.svg) no-repeat center center;
}

.p-sabpage__tab--office::before {
    background: #F2F2F2 url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/icon_office_inactive.svg) no-repeat center center;
}

.is-active .p-sabpage__tab--office::before {
    background: #FBF2F6 url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/icon_office.svg) no-repeat center center;
}

.p-sabpage__tab--business::before {
    background: #F2F2F2 url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/icon_business_inactive.svg) no-repeat center center;
}

.is-active .p-sabpage__tab--business::before {
    background: #FBF2F6 url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/icon_business.svg) no-repeat center center;
}

.p-sabpage__tab--student::before {
    background: #F2F2F2 url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/icon_student_inactive.svg) no-repeat center center;
}

.is-active .p-sabpage__tab--student::before {
    background: #FBF2F6 url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/icon_student.svg) no-repeat center center;
}

.p-sabpage__tabpanel {
    border-top: 4px solid #CC0033;
}

.p-sabpage__tabpanel__content {
    overflow: hidden;
    height: 0;
    opacity: 0;
}

/* merit */


.p-merit__title {
    margin: 0 auto 56px !important;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    line-height: 2;
}

.p-merit {
    background: #F2F2F2;
}

.p-merit__list {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    counter-reset: number 0;
}

.p-merit__list__item {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #B2B2B2;
}

.p-merit__list__image img {
    display: block;
    width: 100%;
    height: auto;
}

.p-merit__list__item__title {
    font-weight: bold;
}

.p-merit__list__item__title::before {
    counter-increment: number 1;
    content: '0' counter(number);
    display: inline-block;
    color: #CC023A;
    font-weight: bold;
    font-family: 'PT Sans', sans-serif;
    font-size: 18px;
    line-height: 1;
    margin: 0 16px 0 0;
}

.p-merit__list__item--text {
    line-height: 1.7;
    margin: 0 auto 16px;
}

.p-merit__list__item--caption {
    font-size: 14px;
    line-height: 1.6;
}

/* scene */

.p-scene picture img {
    display: block;
    width: 100%;
    height: auto;
}

.p-scene__text {
    text-align: center;
    margin: 0 auto 24px;
}

/* charge */

.p-charge__text {
    text-align: center;
}

/* for js */
.is-show {
    overflow: visible;
    height: auto;
    opacity: 1;
    transition: opacity .4s ease-in-out;
}



@media screen and (min-width:769px) {

    /* common */

    .pc {
        display: block;
    }

    .sp {
        display: none;
    }

    /* -----------------------------------
    * top
    * ---------------------------------*/

    .ContactUsButtonHQJp .contact_bt {
        min-width: 220px;
     }

    /* about */

    .p-about-group__title {
        font-size: 20px !important;
    }

    .p-charge {
        padding: 0 0 80px;
    }

    /* service */

    .p-service {
        margin: 112px auto 0 !important;
        padding: 0 0 80px;
    }


    .p-service__list {
        display: flex;
    }

    .p-service__list__image,
    .p-service__list__item {
        flex-basis: 50%;
    }

    .p-service__list__image .p-service__list__image__title--head {
        font-size: 22px;
    }

    .p-service__list__item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 24px 24px 16px;
    }

    .p-service__summary__list__title {
        font-size: 20px;
        margin: 0 0 24px 0;
    }

    .p-service__summary__list__text {
        padding: 0 0 32px 0;
    }

    .p-contact-item__button .c-btn:not(:last-child) {
        margin-right: 24px;
    }

    /* -----------------------------------
    * subpage
    * ---------------------------------*/

    /* tab */
    .p-sabpage__tabwrap--title {
        font-size: 28px;
    }

    .p-sabpage__tablist {
        width: 812px;
        bottom: 0;
    }

    .p-sabpage__tablist__item {
        width: 400px;
        height: 70px;
    }

    .p-sabpage__tablist__item--title:hover {
        opacity: .6;
    }

    .p-sabpage__tablist__item.is-active {
        height: 74px;
        bottom: -4px;
    }

    .p-sabpage__tablist__item--title {
        font-size: 16px;
        left: -12px;
    }

    .p-sabpage__tablist__item--title::after {
        right: -24px;
        top: 0;
        bottom: 4px;
        margin: auto;
    }

    .p-sabpage__tab--building::before,
    .p-sabpage__tab--office::before,
    .p-sabpage__tab--business::before,
    .p-sabpage__tab--student::before {
        width: 48px;
        height: 48px;
        margin: 0 12px 0 0;
        background-size: 28px 28px;
    }

    .is-active .p-sabpage__tab--building::before,
    .is-active .p-sabpage__tab--office::before,
    .is-active .p-sabpage__tab--business::before,
    .is-active .p-sabpage__tab--student::before {
        background-size: 28px 28px;
    }


    /* merit */

    .p-merit {
        padding: 64px 0;
    }

    .p-merit__title {
        padding: 64px 0 0 0;
    }

    .p-merit__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .p-merit__list__item {
        flex-basis: 552px;
        margin: 0 0 40px;
        padding: 0 24px 40px;
    }

    .p-merit__list__item__title {
        font-size: 20px;
    }

    .p-merit__list__image img {
        max-width: 300px;
        margin: 0 auto;
    }

    /* admission_card */
    #admission_card .p-sabpage__tabwrap {
        background: url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/admission_card_bg.jpg);
        background-size: cover;
    }

    /* id_card */
    #id_card .p-sabpage__tabwrap {
        background: url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/id_card_bg.jpg);
        background-size: cover;
    }

}

@media screen and (max-width:768px) {

    /* common */

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    /* reset */
    .cmn-pagenav-box {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    /* -----------------------------------
    * top
    * ---------------------------------*/

    .p-facade__button .c-btn:not(:last-child) {
        margin-bottom: 15px!important;
    }

    .ContactUsButtonHQJp .contact_bt {
        padding: 12px;
        letter-spacing: 0;
        min-width: 190px;
    }

    .ContactUsButtonHQJp .contact_bt a {
        font-size: 14px!important;
     }


    /* about */

    .p-about-group__title {
        font-size: 18px !important;
    }

    /* service */
    .p-service__list {
        display: block;
    }

    .p-service__summary__list__text {
        margin: 0 auto 16px;
        padding: 0 0 48px 0;
    }

    .p-service__summary__list__title {
        font-size: 18px;
        margin: 0 0 16px 0;
    }

    .p-service__list__item {
        padding: 16px 24px;
    }

    .p-service__list__image .p-service__list__image__title--head {
        font-size: 20px;
    }

    .p-contact-item__button {
        display: block!important;
    }

    .p-contact-item__button .c-btn:not(:last-child) {
        margin-bottom: 15px;
    }

    /* -----------------------------------
    * subpage
    * ---------------------------------*/

    /* tab */
    .p-sabpage__tabwrap--title {
        font-size: 22px;
    }

    .p-sabpage__tablist {
        width: 100%;
        display: flex;
        justify-content: center;
        bottom: -4px;
    }

    .p-sabpage__tablist__item {
        width: calc(50% - 16px);
        height: 66px;
    }

    .p-sabpage__tablist__item.is-active {
        height: 70px;
    }

    .p-sabpage__tablist__item--title {
        font-size: 14px;
        line-height: 1.2;
        top: -4px;
    }

    .p-sabpage__tablist__item--title::after {
        left: 0;
        right: 0;
        bottom: -8px;
        margin: 0 auto;
    }

    .p-sabpage__tab--building::before,
    .p-sabpage__tab--office::before,
    .p-sabpage__tab--business::before,
    .p-sabpage__tab--student::before {
        width: 40px;
        height: 40px;
        margin: 0 8px 0 0;
        background-size: 24px 24px;
    }

    .is-active .p-sabpage__tab--building::before,
    .is-active .p-sabpage__tab--office::before,
    .is-active .p-sabpage__tab--business::before,
    .is-active .p-sabpage__tab--student::before {
        background-size: 24px 24px;
    }

    /* merit */

    .p-merit {
        padding: 48px 0 32px;
    }

    .p-merit__title {
        font-size: 18px !important;
        line-height: 1.6;
        margin: 0 auto 40px !important;
        padding: 48px 0 0 0;
    }

    .p-merit__list__item {
        margin: 0 0 24px;
        padding: 0 24px 32px;
    }

    .p-merit__list__item__title {
        font-size: 18px;
        line-height: 1.5;
    }

    /* scene */

    .p-scene figure {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        width: calc(100% + 20px);
        padding: 0 20px 0 0;
    }

    /* admission_card */
    #admission_card .p-sabpage__tabwrap {
        background: url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/admission_card_sp_bg.jpg);
        background-size: cover;
    }

    /* id_card */
    #id_card .p-sabpage__tabwrap {
        background: url(/content/dam/nttcom/hq/jp/business/services/application/smartworkstyle/smartme/img/id_card_sp_bg.jpg);
        background-size: cover;
    }

}