@charset "UTF-8";



.p-index{

    padding: var(--page-top-padding-top) 0 var(--section-margin-top);

}



.p-details{

    padding: var(--page-top-padding-top) 0 var(--section-margin-top);

}

.p-details__info{

    display: flex;

    align-items: center;

}

.p-details__info-date{

    font-size: var(--fs-small-text);

    white-space: nowrap;

    flex-shrink: 0;

}

.p-details__info-icon{

    font-size: var(--fs-small-text);

    background: var(--brand-color);

    color: #fff;

    padding: calc(5 * var(--px)) calc(10 * var(--px));

    margin-left: calc(15 * var(--px));

    white-space: nowrap;

    flex-shrink: 0;

    border-radius: var(--radius-light);

}

.p-details__info-icon + .p-details__info-icon{

    margin-left: calc(7 * var(--px));

}

.p-details__title{

    font-size: var(--fs-large-title);

    line-height: var(--lh-tight);

    font-weight: 600;

    padding: calc(10 * var(--px)) 0 calc(20 * var(--px));

    border-bottom: 1px solid var(--gray-color);

}

.p-details__thumb{

    text-align: center;

}

.p-details__thumb img,

.p-details__contents img{

    max-width: 100%;

    height: auto;

    border-radius: var(--radius-base);

}

.p-details__contents{

    font-size: var(--fs-base);

    line-height: var(--lh-base);

}

.p-details__thumb,

.p-details__contents,

.p-details__button{

    margin-top: calc(40 * var(--px));

}

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

    .p-details__info-icon{

        margin-left: calc(8 * var(--px));

        padding: calc(4 * var(--px)) calc(9 * var(--px));

    }

    .p-details__info-icon + .p-details__info-icon{

        margin-left: calc(7 * var(--px));

    }

    .p-details__title{

        width: 100%;

        font-size: var(--fs-title);

        padding: calc(5 * var(--px)) 0 calc(10 * var(--px));

    }

    .p-details__thumb,

    .p-details__contents,

    .p-details__button{

        margin-top: calc(25 * var(--px));

    }

}