@charset "utf-8";

/***************************************************************************
Media Queries
****************************************************************************/

@media print, screen and (max-width: 1000px) {
}
@media only screen and (max-width: 768px) {
}


@media print, screen and (max-width: 768px) {
    .notes {
        font-size: calc( 100vw * 18 / 768 ) !important;
    }
}



/***************************************************************************
#header
****************************************************************************/
@media print, screen and (max-width: 768px) {
    #header {
        box-shadow: 0 3px 3px 3px rgba( 0, 0, 0, 0.3 );
        transform: translateY(-120%);
    }
}



/***************************************************************************
.top_img_bukken_logo
****************************************************************************/
@media print, screen and (max-width: 768px) {
    .top_img_bukken_logo {
        position: static;
        top: auto;
        left: auto;
        padding: 3.0vw 0;
        width: 100%;
        background-color: #fff;
        /* common space では shadow 追加 */
        box-shadow: 0 3px 3px 3px rgba( 0, 0, 0, 0.3 );
    }
    .top_img_bukken_logo img {
        display: block;
        margin: 0 auto;
        width: 35vw;
    }
}



/***************************************************************************
#page_img
****************************************************************************/
#page_img {
    background-image: none;
}
#page_img.long {
    height: auto;
    background-image: none;
}
@media print, screen and (max-width: 768px) {
    #page_img {
        padding-top: 0;
    }
    #page_img.long {
        padding-top: 0;
    }
    #page_img::before {
        display: none;
    }
}



/***************************************************************************
#page_img .page_ttl
****************************************************************************/
.page_ttl_wrap {
    width: 100%;
    margin: 0 auto;
}
#page_img .page_ttl {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    min-width: auto;
    min-height: auto;
    padding:  0;
    padding: calc( 100vw * 70 / 1920 ) 0;
}
@media print, screen and (max-width: 768px) {
    #page_img .page_ttl {
        padding: calc( 100vw * 80 / 1920 ) 0 calc( 100vw * 70 / 1920 ) 0;
    }
}
#page_img.long .page_ttl {
    min-width: auto;
}
#page_img .page_ttl li {
    text-align: center;
}
#page_img .page_ttl .en {
    font-size: calc( 100vw * 42 / 1920 );
}
@media print, screen and (max-width: 768px) {
    #page_img .page_ttl .en {
        font-size: calc( 100vw * 50 / 768 );
        margin-bottom: 0;
    }
}
#page_img .page_ttl .jp {
    font-size: calc( 100vw * 20 / 1920 );
}
@media print, screen and (max-width: 768px) {
    #page_img .page_ttl .jp {
        font-size: calc( 100vw * 30 / 768 );
        margin-bottom: calc( 100vw * 20 / 768 );
    }
}

/***************************************************************************
.page_img_wrap
****************************************************************************/
.page_img_wrap {
    position: relative;
    width: 100%;
    height: calc( 100vw * 888 / 1920 );
    background-image: url(../../img/commonspace/page_img_pc.jpg);
    background-size: cover;
}
@media print, screen and (max-width: 768px) {
    .page_img_wrap {
        height: calc( 100vw * 520 / 768 );
        background-image: url(../../img/commonspace/page_img_sp.jpg);
    }
}


/***************************************************************************
.topttl
****************************************************************************/
.topttl {
    font-size: calc( 100vw * 46 / 1920 );
    margin: calc( 100vw * 120 / 1920 ) 0;
}
@media print, screen and (max-width: 768px) {
    .topttl {
        font-size: calc( 100vw * 50 / 768 );
        text-align: center;
        margin: calc( 100vw * 120 / 768 ) auto;
        letter-spacing: 0.2em;
    }
}


/***************************************************************************
.commonspace_section
****************************************************************************/
.commonspace_section {
    margin: 0 0 calc( 100vw * 150 / 1920 ) 0;
}



/***************************************************************************
.commonspace_container_copy
****************************************************************************/
.commonspace_container_copy {
    width: 100%;
    margin: 0;
}




/***************************************************************************
.commonspace_section_copy
****************************************************************************/
.commonspace_section_copy {
    max-width: calc( 100vw * 1200 / 1920 );
    margin: 0 auto;
    padding-bottom: calc( 100vw * 100 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .commonspace_section_copy {
        max-width: none;
        padding: 0 calc( 100vw * 40 / 768 ) calc( 100vw * 100 / 1920 ) calc( 100vw * 40 / 768 );
    }
}

.commonspace_section_copy .ttl {
    font-size: calc( 100vw * 38 / 1920 );
    margin-bottom: calc( 100vw * 40 / 1920 );
    line-height: 1.5;
    font-family: "Lato", sans-serif !important;
    letter-spacing: 0.35em;
    font-weight: 600;
    text-align: left;    
}
.commonspace_section_copy .ttl::after {
    content: "";
    height: 1px;
    width: calc( 100vw * 50 / 1920 );
    background: #000;
    display: block;
    text-align: center;
    margin: 0;
}
.commonspace_section_copy .ttl span {
    font-size: calc( 100vw * 18 / 1920 );
    padding: calc( 100vw * 20 / 1920 ) 0 calc( 100vw * 40 / 1920 );
    font-weight: normal;
    display: block;
    letter-spacing: 0.2em;
}
.commonspace_section_copy .ttl2 {
    font-size: calc( 100vw * 32 / 1920 );
    margin-bottom: calc( 100vw * 50 / 1920 );
    line-height: 1.5;
    font-weight: 400;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'Noto Sans JP', sans-serif !important;
    letter-spacing: 0.35em;
}
.commonspace_section_copy .txt {
    font-size: calc( 100vw * 20 / 1920 );
    margin-bottom: calc( 100vw * 40 / 1920 );
    line-height: 2;
    letter-spacing: 0.25em;
}
@media print, screen and (max-width: 768px) {
    .commonspace_section_copy .ttl {
        font-size: calc( 100vw * 48 / 768 );
        margin-bottom: calc( 100vw * 40 / 768 );
        text-align: left;
    }
    .commonspace_section_copy .ttl::after {
        width: calc( 100vw * 50 / 768 );
    }
    .commonspace_section_copy .ttl span {
        font-size: calc( 100vw * 26 / 768 );
        padding: calc( 100vw * 20 / 768 ) 0 calc( 100vw * 40 / 768 );
    }
    .commonspace_section_copy .ttl2 {
        font-size: calc( 100vw * 42 / 768 );
        margin-bottom: calc( 100vw * 50 / 768 );
    }
    .commonspace_section_copy .txt {
        font-size: calc( 100vw * 28 / 768 );
        margin-bottom: calc( 100vw * 40 / 768 );
    }
}


.commonspace_container_img {
    background-color: transparent;
    width: 100%;
    margin: 0;
}
.commonspace_container_img .img_wrap {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
@media print, screen and (max-width: 768px) {
    .commonspace_container_img .img_wrap {
        flex-wrap: wrap;
    }
}
.commonspace_container_img .img_wrap_sub {
    display: flex;
    flex-wrap: wrap;
}

.commonspace_container_img .img_wrap .textarea {
    margin: 0;
    padding: 0 calc( 100vw * 90 / 1920 );
}
.commonspace_container_img .img_wrap .textarea .text_title {
    font-size: calc( 100vw * 38 / 1920 );
    margin-bottom: calc( 100vw * 40 / 1920 );
    line-height: 1.5;
    font-family: "Lato", sans-serif !important;
    letter-spacing: 0.35em;
    font-weight: 600;
    text-align: left;
}
.commonspace_container_img .img_wrap .textarea .text_title span {
    font-size: calc( 100vw * 16 / 1920 );
    padding: calc( 100vw * 20 / 1920 ) 0 calc( 100vw * 40 / 1920 );
    font-weight: normal;
    display: block;
    letter-spacing: 0.2em;
}
.commonspace_container_img .img_wrap .textarea .text_title::after {
    content: "";
    height: 1px;
    width: calc( 100vw * 40 / 1920 );
    background: #fff;
    display: block;
    text-align: left;
    margin: 0;
}
.commonspace_container_img .img_wrap .textarea .text_catch {
    font-size: calc( 100vw * 32 / 1920 );
    margin-bottom: calc( 100vw * 40 / 1920 );
    letter-spacing: 0.3em;
    line-height: 1.8;
}
.commonspace_container_img .img_wrap .textarea .text_normal {
    font-size: calc( 100vw * 20 / 1920 );
    letter-spacing: 0.2em;
    line-height: 1.8;
}
.commonspace_container_img .img_wrap .imagearea {
    margin: 0;
}
.commonspace_container_img .img_wrap .imagearea img {
    width: 100%;
}
@media print, screen and (max-width: 768px) {
    .commonspace_container_img .img_wrap .textarea .text_title {
        font-size: calc( 100vw * 48 / 768 );
        margin-bottom: calc( 100vw * 60 / 768 );
    }
    .commonspace_container_img .img_wrap .textarea .text_title span {
        font-size: calc( 100vw * 26 / 768 );
        padding: calc( 100vw * 40 / 768 ) 0 calc( 100vw * 60 / 768 ) 0;
    }
    .commonspace_container_img .img_wrap .textarea .text_title::after {
        width: calc( 100vw * 50 / 768 );
    }
    .commonspace_container_img .img_wrap .textarea {
        padding: calc( 100vw * 140 / 768 ) calc( 100vw * 40 / 768 );
    }
    .commonspace_container_img .img_wrap .textarea .text_catch {
        font-size: calc( 100vw * 42 / 768 );
        margin-bottom: calc( 100vw * 40 / 768 );
    }
    .commonspace_container_img .img_wrap .textarea .text_normal {
        font-size: calc( 100vw * 28 / 768 );
    }
}




.commonspace_entrance .commonspace_container_copy {
    background-image: url(../../img/commonspace/commonspace_bgcopy01.gif);
    background-position: right bottom;
    background-repeat: no-repeat;
}
@media print, screen and (max-width: 768px) {
    .commonspace_entrance .commonspace_container_copy {
        background-position: right center;
        background-size: calc( 100vw * 600 / 750 );
    }
}
.commonspace_entrance .commonspace_container_img {
    background-color: #2a2c2e;
}
.commonspace_entrance .commonspace_container_img .img_wrap .textarea {
    color: #fff;
}
.commonspace_entrance .commonspace_entrance_img01 .imagearea {
    width: 100%;
}

.commonspace_entrance .commonspace_entrance_img02 .textarea {
    width: 43.75%;
}
.commonspace_entrance .commonspace_entrance_img02 .imagearea {
    width: 56.25%;
}
@media print, screen and (max-width: 768px) {
    .commonspace_entrance .commonspace_entrance_img02 .textarea {
        width: 100%;
    }
    .commonspace_entrance .commonspace_entrance_img02 .imagearea {
        width: 100%;
    }
}

.commonspace_entrance .commonspace_entrance_img03 .imagearea {
    width: 43.75%;
}
.commonspace_entrance .commonspace_entrance_img03 .textarea {
    width: 56.25%;
}
@media print, screen and (max-width: 768px) {
    .commonspace_entrance .img_wrap.commonspace_entrance_img03 {
        flex-direction: column-reverse;
    }
    .commonspace_entrance .commonspace_entrance_img03 .textarea {
        width: 100%;
    }
    .commonspace_entrance .commonspace_entrance_img03 .imagearea {
        width: 100%;
    }
    .commonspace_entrance .commonspace_entrance_img03 .imagearea .notes {
        color: #000;
        text-shadow: 1px 1px 2px white, -1px 1px 2px white, 1px -1px 2px white, -1px -1px 2px white;
    }
}



.commonspace_atrium .commonspace_container_copy {
    background-image: url(../../img/commonspace/commonspace_bgcopy02.gif);
    background-position: right bottom;
    background-repeat: no-repeat;
}
@media print, screen and (max-width: 768px) {
    .commonspace_atrium .commonspace_container_copy {
        background-position: right center;
        background-size: calc( 100vw * 456 / 750 );
    }
}
.commonspace_atrium .commonspace_container_img {
    background-color: #2a2c2e;
}
.commonspace_atrium .commonspace_container_img .img_wrap .textarea {
    color: #fff;
}
.commonspace_atrium .commonspace_atrium_img01 .imagearea {
    width: 100%;
}

.commonspace_atrium .commonspace_atrium_img02 .imagearea {
    width: 66%;
}
.commonspace_atrium .commonspace_atrium_img02 .textarea {
    width: 34%;
}
@media print, screen and (max-width: 768px) {
    .commonspace_atrium .img_wrap.commonspace_atrium_img02 {
        flex-direction: column-reverse;
    }
    .commonspace_atrium .commonspace_atrium_img02 .textarea {
        width: 100%;
    }
    .commonspace_atrium .commonspace_atrium_img02 .imagearea {
        width: 100%;
    }
}

.commonspace_atrium .commonspace_atrium_img03 .imagearea {
    width: 58%;
}
.commonspace_atrium .commonspace_atrium_img03 .textarea {
    width: 42%;
}
@media print, screen and (max-width: 768px) {
    .commonspace_atrium .commonspace_atrium_img03 .textarea {
        width: 100%;
    }
    .commonspace_atrium .commonspace_atrium_img03 .imagearea {
        width: 100%;
    }
}

.commonspace_atrium .commonspace_atrium_img04 .imagearea {
    width: 60%;
}
.commonspace_atrium .commonspace_atrium_img04 .textarea {
    width: 40%;
}
@media print, screen and (max-width: 768px) {
    .commonspace_atrium .img_wrap.commonspace_atrium_img04 {
        flex-direction: column-reverse;
    }
    .commonspace_atrium .commonspace_atrium_img04 .textarea {
        width: 100%;
    }
    .commonspace_atrium .commonspace_atrium_img04 .imagearea {
        width: 100%;
    }
}



.commonspace_section.commonspace_skysuite {
    margin-bottom: 0;
}
.commonspace_skysuite .commonspace_container_copy {
    background-image: url(../../img/commonspace/commonspace_bgcopy03.gif);
    background-position: right bottom;
    background-repeat: no-repeat;
}
@media print, screen and (max-width: 768px) {
    .commonspace_skysuite .commonspace_container_copy {
        background-position: right center;
        background-size: calc( 100vw * 456 / 750 );
    }
}
.commonspace_skysuite .commonspace_container_img {
    background-color: #2a2c2e;
}
.commonspace_skysuite .commonspace_container_img .img_wrap .textarea {
    color: #fff;
}
.commonspace_skysuite .commonspace_skysuite_img01 .imagearea {
    width: 100%;
}

.commonspace_skysuite .commonspace_skysuite_img02 .imagearea {
    width: 60%;
}
.commonspace_skysuite .commonspace_skysuite_img02 .img_wrap_sub {
    width: 40%;
    flex-direction: column;
    justify-content: flex-end;
}
@media print, screen and (max-width: 768px) {
    .commonspace_skysuite .commonspace_skysuite_img02 .imagearea {
        width: 100%;
    }
    .commonspace_skysuite .commonspace_skysuite_img02 .img_wrap_sub {
        width: 100%;
    }
}

.commonspace_skysuite .commonspace_skysuite_img03 .imagearea {
    width: 100%;
}
.commonspace_skysuite .commonspace_skysuite_img03 .textarea {
    width: 100%;
    margin-bottom: calc( 100vw * 90 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .commonspace_skysuite .commonspace_skysuite_img03 .textarea {
        width: 100%;
        margin-bottom: 0;
    }
    .commonspace_skysuite .commonspace_skysuite_img03 .textarea {
        padding: calc( 100vw * 140 / 768 ) calc( 100vw * 40 / 768 ) calc( 100vw * 50 / 768 ) calc( 100vw * 40 / 768 );
    }
    .commonspace_skysuite .commonspace_skysuite_img03 .imagearea {
        width: 100%;
    }
}



.interior_designer {
    padding: calc( 100vw * 180 / 1920 ) 0 calc( 100vw * 120 / 1920 ) 0;
    margin-bottom: 0;
}
@media print, screen and (max-width: 768px) {
    .interior_designer {
        padding: calc( 100vw * 100 / 768 ) 0 calc( 100vw * 100 / 768 ) 0;
    }
}
.interior_designer .container_profile {
    width: 100%;
    max-width: calc( 100vw * 1200 / 1920 );
    margin: 0 auto calc( 100vw * 30 / 1920 ) auto;
    display: flex;
    align-content: center;
}
@media print, screen and (max-width: 768px) {
    .interior_designer .container_profile {
        max-width: none;
        padding: 0 calc( 100vw * 40 / 768 );
    }
}
.interior_designer .container_profile .box_img {
    width: 21%;
}
@media print, screen and (max-width: 768px) {
    .interior_designer .container_profile .box_img {
        width: 30%;
    }
}
.interior_designer .container_profile .box_img img {
    width: 100%;
}
.interior_designer .container_profile .box_profile {
    width: 79%;
}
@media print, screen and (max-width: 768px) {
    .interior_designer .container_profile .box_profile {
        width: 70%;
    }
}
.interior_designer .container_profile .box_profile .designer_name {
    font-size: calc( 100vw * 26 / 1920 );
    padding: 0 0 calc( 100vw * 26 / 1920 ) calc( 100vw * 50 / 1920 );
    border-bottom: thin solid #fff;
    letter-spacing: 0.3em;
}
.interior_designer .container_profile .box_profile .designer_name span {
    font-size: calc( 100vw * 19 / 1920 );
    letter-spacing: 0.2em;
}
.interior_designer .container_profile .box_profile .designer_profile {
    font-size: calc( 100vw * 20 / 1920 );
    letter-spacing: 0.3em;
    line-height: 1.7;
    padding: calc( 100vw * 26 / 1920 ) 0 0 calc( 100vw * 50 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .interior_designer .container_profile .box_profile .designer_name {
        font-size: calc( 100vw * 34 / 768 );
        padding: calc( 100vw * 26 / 768 ) 0 calc( 100vw * 26 / 768 ) calc( 100vw * 50 / 768 );
    }
    .interior_designer .container_profile .box_profile .designer_name span {
        font-size: calc( 100vw * 26 / 768 );
    }
    .interior_designer .container_profile .box_profile li.designer_profile {
        display: none;
    }
    .interior_designer p.designer_profile {
        color: #fff;
        font-size: calc( 100vw * 28 / 768 );
        letter-spacing: 0.2em;
        padding: calc( 100vw * 26 / 768 ) calc( 100vw * 40 / 768 ) calc( 100vw * 40 / 768 ) calc( 100vw * 40 / 768 );
    }
}

.interior_designer .container_portfolio {
    width: 100%;
    max-width: calc( 100vw * 1200 / 1920 );
    margin: 0 auto;
}
@media print, screen and (max-width: 768px) {
    .interior_designer .container_portfolio {
        max-width: none;
        padding: 0 calc( 100vw * 40 / 768 );
    }
}
.interior_designer .container_portfolio .box_text {
    font-size: calc( 100vw * 20 / 1920 );
    margin: 0 0 calc( 100vw * 30 / 1920 ) 0;
    letter-spacing: 0.3em;
    line-height: 1.7;
}
@media print, screen and (max-width: 768px) {
    .interior_designer .container_portfolio .box_text {
        font-size: calc( 100vw * 28 / 768 );
        margin: 0 0 calc( 100vw * 30 / 768 ) 0;
    }
}
.interior_designer .container_portfolio .box_img {
    display: flex;
    justify-content: space-between;
    margin-bottom: calc( 100vw * 30 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .interior_designer .container_portfolio .box_img {
        flex-wrap: wrap;
        margin-bottom: calc( 100vw * 70 / 768 );
    }
}
.interior_designer .container_portfolio .box_img .caption {
    font-size: calc( 100vw * 11 / 1920 );
    text-align: right;
}
@media print, screen and (max-width: 768px) {
    .interior_designer .container_portfolio .box_img .caption {
        font-size: calc( 100vw * 18 / 768 );
    }
}
.interior_designer .container_portfolio .image_01 {
    width: 62.75%;
}
@media print, screen and (max-width: 768px) {
    .interior_designer .container_portfolio .image_01 {
        width: 100%;
        margin-bottom: calc( 100vw * 18 / 768 );
    }
}
.interior_designer .container_portfolio .image_01 img {
    width: 100%;
}
.interior_designer .container_portfolio .box_img_sub {
    width: 34.75%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
}
@media print, screen and (max-width: 768px) {
    .interior_designer .container_portfolio .box_img_sub {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
    }
}
.interior_designer .container_portfolio .image_02 {
    width: 100%;
}
@media print, screen and (max-width: 768px) {
    .interior_designer .container_portfolio .image_02 {
        width: 50%;
        max-width: calc( 100vw * 335 / 768 );
    }
}
.interior_designer .container_portfolio .image_02 img {
    width: 100%;
}
.interior_designer .container_portfolio .image_03 {
    width: 100%;
}
@media print, screen and (max-width: 768px) {
    .interior_designer .container_portfolio .image_03 {
        width: 50%;
        max-width: calc( 100vw * 335 / 768 );
    }
}
.interior_designer .container_portfolio .image_03 img {
    width: 100%;
}
.attention {
    font-size: calc( 100vw * 11 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .attention {
        font-size: calc( 100vw * 18 / 1920 );
    }
}



.interior_designer.designer_01 {
    background-color: #565656;
}
.interior_designer.designer_01 .container_profile .box_profile .designer_name {
    color: #fff;
}
.interior_designer.designer_01 .container_profile .box_profile .designer_name span {
    color: #fff;
}
.interior_designer.designer_01 .container_profile .box_profile .designer_profile {
    color: #fff;
}
.interior_designer.designer_01 .container_portfolio .box_text {
    color: #fff;
}
.interior_designer.designer_01 .container_portfolio .box_img .caption {
    color: #fff;
}
.interior_designer.designer_01 .attention {
    color: #fff;
}

.interior_designer.designer_02 {
    background-color: #eaeeef;
}
.interior_designer.designer_02 .container_profile .box_profile .designer_name {
    padding: 0 calc( 100vw * 50 / 1920 ) calc( 100vw * 26 / 1920 ) 0;
    border-bottom: thin solid #000;
}
@media print, screen and (max-width: 768px) {
    .interior_designer.designer_02 .container_profile .box_profile .designer_name {
        font-size: calc( 100vw * 34 / 768 );
        padding: calc( 100vw * 26 / 768 ) calc( 100vw * 50 / 768 ) calc( 100vw * 26 / 768 ) 0;
    }
}
.interior_designer.designer_02 .container_profile .box_profile .designer_profile {
    padding: calc( 100vw * 26 / 1920 ) calc( 100vw * 50 / 1920 ) 0 0;
}
@media print, screen and (max-width: 768px) {
    .interior_designer.designer_02 p.designer_profile {
        color: #000;
    }
}



.commonspace_section.commonspace_items {
    padding: 0 0;
    margin-bottom: 0;
    background-image: url(../../img/commonspace/commonspace_bgcopy04.gif);
    background-position: left top;
    background-repeat: no-repeat;
    padding-bottom: calc( 100vw * 200 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .commonspace_section.commonspace_items {
        background-size: calc( 100vw * 670 / 768 );
        background-position: left top calc( 100vw * 80 / 768 );
    }
}
.commonspace_items .commonspace_section_copy {
    padding: 0;
}
.commonspace_items .commonspace_container_copy {
    padding: calc( 100vw * 150 / 1920 ) 0 calc( 100vw * 100 / 1920 ) 0;
}
@media print, screen and (max-width: 768px) {
    .commonspace_items .commonspace_container_copy {
        padding: calc( 100vw * 180 / 768 ) 0 calc( 100vw * 70 / 768 ) 0;
    }
}
.commonspace_items .commonspace_section_copy .ttl {
    text-align: center;
}
@media print, screen and (max-width: 768px) {
    .commonspace_items .commonspace_section_copy .ttl {
        margin-bottom: 0;
    }
    .commonspace_items .commonspace_section_copy .ttl span {
        padding-bottom: 0;
    }
}
.commonspace_items .commonspace_section_copy .ttl::after {
    text-align: center;
    margin: 0 auto;
}
@media print, screen and (max-width: 768px) {
    .commonspace_items .commonspace_section_copy .ttl::after {
        display: none;
    }
}
.commonspace_items .commonspace_container_img {
    width: 100%;
    max-width: calc( 100vw * 1400 / 1920 );
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}
@media print, screen and (max-width: 768px) {
    .commonspace_items .commonspace_container_img {
        max-width: none;
        padding: 0 calc( 100vw * 40 / 768 );
    }
}
.commonspace_items .commonspace_container_img .itembox {
    width: 50%;
    max-width: calc( 100vw * 670 / 1920 );
    margin: 0 0 calc( 100vw * 50 / 1920 ) 0;
}
@media print, screen and (max-width: 768px) {
    .commonspace_items .commonspace_container_img .itembox {
        width: 100%;
        max-width: none;
        margin-bottom: calc( 100vw * 90 / 768 );
    }
}
.commonspace_items .imagearea {
    margin-bottom: calc( 100vw * 30 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .commonspace_items .imagearea {
        margin-bottom: calc( 100vw * 30 / 768 );
    }
}
.commonspace_items .imagearea img {
    width: 100%;
}
.commonspace_items .notes {
    font-size: calc( 100vw * 11 / 1920 ) !important;
}
@media print, screen and (max-width: 768px) {
    .commonspace_items .notes {
        font-size: calc( 100vw * 18 / 768 ) !important;
    }
}
.commonspace_items .caption {
    font-size: calc( 100vw * 23 / 1920 );
    font-family: "Lato", sans-serif !important;
    color: #004165;
    letter-spacing: 0.25em;
    margin-bottom: calc( 100vw * 20 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .commonspace_items .caption {
        font-size: calc( 100vw * 40 / 768 );
        margin-bottom: calc( 100vw * 30 / 768 );
    }
}
.commonspace_items .exp {
    font-size: calc( 100vw * 20 / 1920 );
    letter-spacing: 0.2em;
}
@media print, screen and (max-width: 768px) {
    .commonspace_items .exp {
        font-size: calc( 100vw * 28 / 768 );
    }
}

.commonspace_items .itembox:nth-child(2) .notes {
    /* padding-right: 13em; */
}
@media print, screen and (max-width: 768px) {
    .commonspace_items .itembox:nth-child(2) .notes {
        /* padding-right: 8em; */
    }
}


.commonspace_section.commonspace_art {
    margin-bottom: 0;
    background-image: url(../../img/commonspace/commonspace_bgcopy_art.svg);
    background-position: right top;
    background-repeat: no-repeat;
    padding: calc( 100vw * 150 / 1920 ) 0 calc( 100vw * 150 / 1920 ) 0;
    background-color: #565656;
}
@media print, screen and (max-width: 768px) {
    .commonspace_section.commonspace_art {
        background-size: calc( 100vw * 294 / 768 );
        padding: calc( 100vw * 150 / 768 ) 0 calc( 100vw * 180 / 768 ) 0;
        background-position: right top 2%;
    }
}

.commonspace_art .commonspace_section_copy {
    max-width: calc( 100vw * 1400 / 1920 );
    padding-bottom: calc( 100vw * 80 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .commonspace_section_copy {
        max-width: none;
        padding: 0 calc( 100vw * 40 / 768 ) calc( 100vw * 80 / 768 ) calc( 100vw * 40 / 768 );
    }
}
.commonspace_art .commonspace_section_copy .ttl {
    text-align: left;
    color: #fff;
}
.commonspace_art .commonspace_section_copy .ttl::after {
    margin: 0 auto 0 0;
    background: #fff;
}
.commonspace_art .commonspace_section_copy .ttl2 {
    color: #fff;
}
.commonspace_art .commonspace_section_copy .txt {
    color: #fff;
    margin-bottom: 0;
}

.commonspace_art .img_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.commonspace_art .img_wrap:first-child {
    width: calc( 100vw * 1780 / 1920 );
    margin-bottom: calc( 100vw * 90 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .img_wrap:first-child {
        width: 100%;
        padding: 0 calc( 100vw * 40 / 768 );
    }
}
.commonspace_art .imagearea.commonspace_art_img01 {
    width: calc( 100vw * 1180 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .imagearea.commonspace_art_img01 {
        width: 100%;
        margin-bottom: calc( 100vw * 18 / 768 );
    }
}
.commonspace_art .img_wrap:first-child .img_wrap_sub_01 {
    width: calc( 100vw * 580 / 1920 );
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .img_wrap:first-child .img_wrap_sub_01 {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .commonspace_art .img_wrap:first-child .commonspace_art_img02 {
        width: 50%;
        max-width: calc( 100vw * 335 / 768 );
    }
    .commonspace_art .img_wrap:first-child .commonspace_art_img03 {
        width: 50%;
        max-width: calc( 100vw * 335 / 768 );
    }
}

.commonspace_art .img_wrap:nth-child(2) {
    width: calc( 100vw * 1650 / 1920 );
    margin: 0 0 calc( 100vw * 120 / 1920 ) auto;
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .img_wrap:nth-child(2) {
        width: 100%;
        margin: 0 0 calc( 100vw * 160 / 768 ) auto;
        padding: 0 calc( 100vw * 40 / 768 );
    }
}
.commonspace_art .imagearea.commonspace_art_img04 {
    width: calc( 100vw * 800 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .imagearea.commonspace_art_img04 {
        width: calc( 100vw * 330 / 768 );
    }
    .commonspace_art .imagearea.commonspace_art_img04 .notes {
        bottom: -2em;
    }
}
.commonspace_art .img_wrap:nth-child(2) .img_wrap_sub_02 {
    width: calc( 100vw * 826 / 1920 );
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .img_wrap:nth-child(2) .img_wrap_sub_02 {
        width: calc( 100vw * 335 / 768 );
        height: calc( 100vw * 170 / 375 );
    }
}
.commonspace_art .img_wrap:nth-child(2) .img_wrap_sub_03 {
    width: calc( 100vw * 826 / 1920 );
    display: flex;
    justify-content: space-between;
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .img_wrap:nth-child(2) .img_wrap_sub_03 {
        width: calc( 100vw * 335 / 768 );
    }
}
.commonspace_art .imagearea.commonspace_art_img06 {
    width: calc( 100vw * 315 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .imagearea.commonspace_art_img06 {
        width: 38.27%;
    }
    .commonspace_art .imagearea.commonspace_art_img06 .notes {
        font-size: calc( 100vw * 16 / 768 ) !important;
        bottom: -5.2em;
    }
}
.commonspace_art .imagearea.commonspace_art_img07 {
    width: calc( 100vw * 486 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .imagearea.commonspace_art_img07 {
        width: 59.05%;
    }
    .commonspace_art .imagearea.commonspace_art_img07 .notes  {
        font-size: calc( 100vw * 16 / 768 ) !important;
        bottom: -3.7em;
    }
}

.commonspace_art .art_front_gallery {
    width: calc( 100vw * 1200 / 1920 );
    border: 1px solid #fff;
    margin: 0 auto calc( 100vw * 20 / 1920 ) auto;
    padding: calc( 100vw * 50 / 1920 );
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .art_front_gallery {
        width: calc( 100vw - calc( 100vw * 80 / 768 ) );
        margin: 0 auto calc( 100vw * 30 / 768 ) auto;
        padding: calc( 100vw * 50 / 768 );
        border: 1px solid #fff;
        flex-wrap: wrap;
    }
}
.commonspace_art .art_front_gallery_text {
    width: calc( 100vw * 830 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .art_front_gallery_text {
        width: 100%;
    }
}
.commonspace_art .art_front_gallery_logo {
    width: calc( 100vw * 220 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .art_front_gallery_logo {
        width: calc( 100vw * 220 / 768 );
        margin: 0 auto;
    }
}
.commonspace_art .art_front_gallery_text .caption {
    color: #fff;
    font-size: calc( 100vw * 26 / 1920 );
    letter-spacing: 0.3em;
    margin-bottom: calc( 100vw * 26 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .art_front_gallery_text .caption {
        font-size: calc( 100vw * 34 / 768 );
        margin-bottom: calc( 100vw * 26 / 768 );
    }
}
.commonspace_art .art_front_gallery_text .caption span {
    color: #fff;
    font-size: calc( 100vw * 16 / 1920 );
    letter-spacing: 0.2em;
    display: block;
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .art_front_gallery_text .caption span {
        font-size: calc( 100vw * 26 / 768 );
        margin-bottom: calc( 100vw * 10 / 768 );
    }
}
.commonspace_art .art_front_gallery_text .exp {
    color: #fff;
    font-size: calc( 100vw * 20 / 1920 );
    letter-spacing: 0.3em;
    line-height: 1.7;
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .art_front_gallery_text .exp {
        font-size: calc( 100vw * 28 / 768 );
        margin-bottom: calc( 100vw * 50 / 768 );
    }
}
.commonspace_art .art_front_gallery_logo img {
    width: 100%;
}
.commonspace_art .attention {
    width: calc( 100vw * 1200 / 1920 );
    margin: 0 auto;
    color: #fff;
    font-size: calc( 100vw * 11 / 1920 );
}
@media print, screen and (max-width: 768px) {
    .commonspace_art .attention {
        width: 100%;
        padding: 0 calc( 100vw * 40 / 768 );
        font-size: calc( 100vw * 16 / 768 );
    }
}