@charset "UTF-8";


/***************************************************

	office-gallery

***************************************************/


#gallery_head{
    margin-bottom: 120px;
}

#gallery_head .catch{
    font-size: 64px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
}


.section_wrapp{
    width: 1920px;
    margin: 0 auto 414px;
}

.section_wrapp .main_image_wrapp{
    margin-bottom: 240px;
    position: relative;
}

.section_wrapp .main_image_wrapp .text_box{
    position: absolute;
    bottom: 120px;
    left: 160px;
    z-index: 2;
}

.section_wrapp .main_image_wrapp .text_box span{
    width: fit-content;
    display: block;
    background: #fff;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.6;
    padding: 8px 24px 8px 32px;
    margin-bottom: 16px;
}

.section_wrapp .main_image_wrapp .text_box span:last-of-type{
    margin-bottom: 0;
}

.section_wrapp .main_image_wrapp .area_name{
    font-size: 160px;
    font-weight: 400;
    line-height: 1;
    color: #96BDCC;
    position: absolute;
    z-index: 4;
}

#entrance.section_wrapp .main_image_wrapp .area_name{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    bottom: -120px;
    left: 80px;
}

#workspace.section_wrapp .main_image_wrapp .area_name{
    top: -128px;
    right: 160px;
}


.repeat_area{
    width: 1600px;
    margin: 0 auto;
}

.repeat_area .repeat_cont_wrapp{
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
    position: relative;
}

.repeat_area .repeat_cont_wrapp .cont_block{
    position: relative;
    z-index: 2;
}

.repeat_area .repeat_cont_wrapp .cont_block.odd{
    width: 800px;
}

.repeat_area .repeat_cont_wrapp .cont_block.even{
    width: 640px;
    padding-top: 240px;
}

.repeat_area .repeat_cont_wrapp .cont_block.odd::before{
    content: '';
    display: block;
    width: 640px;
    height: 640px;
    background: url('../images/common/gray_bg.webp') no-repeat 0 0 / cover;;
    position: absolute;
    top: 160px;
    left: -160px;
    z-index: -1;
}

.repeat_area .repeat_cont_wrapp .cont_block .image_box{

}

.repeat_area .repeat_cont_wrapp .cont_block .caption{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin-top: 40px;
}



#meeting{

}

#meeting.section_wrapp{

}

#meeting h2{
    font-size: 136px;
    font-weight: 400;
    line-height: 1;
    color: #96BDCC;
    text-align: center;
    margin-bottom: 80px;
}

#meeting .repeat_area {
    width: 1920px;
}

#meeting .repeat_area .repeat_cont_wrapp .cont_block.odd {
    width: 960px;
    margin-bottom: 690px;
}

#meeting .repeat_area .repeat_cont_wrapp .cont_block.odd:last-of-type{
    margin-bottom: 0;
}

#meeting .repeat_area .repeat_cont_wrapp:nth-of-type(even) .cont_block.odd {
    margin-left: 80px;
}

#meeting .repeat_area .repeat_cont_wrapp .cont_block.odd .caption {
    width: 720px;
    margin-top: 0;
    position: absolute;
    top: 50%;
    left: 1040px;
    transform: translate(0, -50%);
}

#meeting .repeat_area .repeat_cont_wrapp .cont_block.odd::before {;
    width: 1600px;
    height: 640px;
    top: 240px;
    left: 0;
}

#meeting .repeat_area .repeat_cont_wrapp .cont_block.even {
    width: 960px;
    padding: 0;
    position: absolute;
    top: 547px;
    right: 160px;
    z-index: 4;
}


.bottom_image{
    margin-top: 850px;
    position: relative;
}

.bottom_image .image{
    width: 100%;
    height: 1080px;
    background: url('../images/office-gallery/bottom_image.webp') no-repeat 0 0 / cover;
    position: relative;
}

.bottom_image .text_block{
    position: absolute;
    bottom: 100px;
    left: 160px;
    z-index: 2;
}

.bottom_image .text_block span{
    width: fit-content;
    display: block;
    background: #fff;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.6;
    padding: 8px 24px 8px 32px;
    margin-bottom: 16px;
}

.bottom_image .text_block span:last-of-type{
    margin-bottom: 0;
}





/********************************************************************************
	リッキド用 CSS
********************************************************************************/
@media (max-width: 1920px) {


#gallery_head{
    margin-bottom: 6.25vw;
}

#gallery_head .catch{
    font-size: 3.333333vw;
}


.section_wrapp{
    width: 100%;
    margin: 0 auto 21.5625vw;
}

.section_wrapp .main_image_wrapp{
    margin-bottom: 12.5vw;
}

.section_wrapp .main_image_wrapp .text_box{
    bottom: 6.25vw;
    left: 8.333333vw;
}

.section_wrapp .main_image_wrapp .text_box span{
    font-size: 1.875vw;
    padding: 0.416667vw 1.25vw 0.416667vw 1.666667vw;
    margin-bottom: 0.833333vw;
}

.section_wrapp .main_image_wrapp .area_name{
    font-size: 8.333333vw;
}

#entrance.section_wrapp .main_image_wrapp .area_name{
    bottom: -6.25vw;
    left: 4.166667vw;
}

#workspace.section_wrapp .main_image_wrapp .area_name{
    top: -6.666667vw;
    right: 8.333333vw;
}


.repeat_area{
    width: 83.333333vw;
}

.repeat_area .repeat_cont_wrapp{;
    margin-bottom: 5.208333vw;
}

.repeat_area .repeat_cont_wrapp .cont_block.odd{
    width: 41.666667vw;
}

.repeat_area .repeat_cont_wrapp .cont_block.even{
    width: 33.333333vw;
    padding-top: 12.5vw;
}

.repeat_area .repeat_cont_wrapp .cont_block.odd::before{ck;
    width: 33.333333vw;
    height: 33.333333vw;
    top: 8.333333vw;
    left: -8.333333vw;
}

.repeat_area .repeat_cont_wrapp .cont_block .caption{
    font-size: 0.833333vw;
    margin-top: 2.083333vw;
}



#meeting{

}

#meeting.section_wrapp{

}

#meeting h2{
    font-size: 7.083333vw;
    margin-bottom: 4.166667vw;
}

#meeting .repeat_area {
    width: 100%;
}

#meeting .repeat_area .repeat_cont_wrapp .cont_block.odd {
    width: 50vw;
    margin-bottom: 35.9375vw;
}

#meeting .repeat_area .repeat_cont_wrapp:nth-of-type(even) .cont_block.odd {
    margin-left: 4.166667vw;
}

#meeting .repeat_area .repeat_cont_wrapp .cont_block.odd .caption {
    width: 37.5vw;
    left: 54.166667vw;
}

#meeting .repeat_area .repeat_cont_wrapp .cont_block.odd::before {;
    width: 83.333333vw;
    height: 33.333333vw;
    top: 12.5vw;
}

#meeting .repeat_area .repeat_cont_wrapp .cont_block.even {
    width: 50vw;
    top: 28.489583vw;
    right: 8.333333vw;
}


.bottom_image{
    margin-top: 44.270833vw;
}

.bottom_image .image{
    height: 56.25vw;
}

.bottom_image .text_block{
    bottom: 5.208333vw;
    left: 8.333333vw;
}

.bottom_image .text_block span{
    font-size: 1.875vw;
    padding: 0.416667vw 1.25vw 0.416667vw 1.666667vw;
    margin-bottom: 0.833333vw;
}






}



/********************************************************************************
	スマートフォン用 CSS
********************************************************************************/

@media(max-width: 768px){


#gallery_head{
    margin-bottom: 17.066667vw;
}

#gallery_head .catch{
    font-size: 8.533333vw;
}


.section_wrapp{
    width: 100%;
    margin: 0 auto 41.333333vw;
}

.section_wrapp .main_image_wrapp{
    margin-bottom: 0;
}

.section_wrapp .main_image_wrapp .text_box{
    position: relative;
    bottom: unset;
    top: -4.8vw;
    left: 0;
    z-index: 2;
    margin-bottom: 21.333333vw;
}

.section_wrapp .main_image_wrapp .text_box span{
    background: url('../images/common/gray_bg.webp') no-repeat 0 0 / cover;
    font-size: 4.800000vw;
    font-weight: 700;
    padding: 1.066667vw 1.066667vw 1.066667vw 3.2vw;
    margin-bottom: 2.133333vw;
}


.section_wrapp .main_image_wrapp .area_name{
    font-size: 10.666667vw;
}

#entrance.section_wrapp .main_image_wrapp .area_name{
    bottom: unset;
    top: -2.133333vw;
    left: 2.133333vw;
}

#workspace.section_wrapp .main_image_wrapp .area_name{
    top: -8.533333vw;
    right: 6.4vw;
}


.repeat_area{
    width: auto;
}

.repeat_area .repeat_cont_wrapp{
    display: block;
    margin-bottom: 21.333333vw;
}

.repeat_area .repeat_cont_wrapp .cont_block.odd{
    width: auto;
    padding: 0 5.333333vw;
    margin-bottom: 30.666667vw;
}

.repeat_area .repeat_cont_wrapp .cont_block.even{
    width: auto;
    padding: 0 0 0 18.400000vw;
}

.repeat_area .repeat_cont_wrapp .cont_block.odd::before{
    width: 53.333333vw;
    height: 53.333333vw;
    top: 35.466667vw;
    left: 0;
}

.repeat_area .repeat_cont_wrapp .cont_block .caption{
    font-size: 3.733333vw;
    margin-top: 5.333333vw;
}



#meeting{

}

#meeting.section_wrapp{

}

#meeting h2{
    font-size: 9.6vw;
    margin-bottom: 8.533333vw;
}

#meeting .repeat_area {
    width: auto;
}

#meeting .repeat_area .repeat_cont_wrapp .cont_block.odd {
    width: auto;
    margin: 0 0 23.2vw 5.333333vw;
}

#meeting .repeat_area .repeat_cont_wrapp:nth-of-type(even) .cont_block.odd {
    margin-left: 5.333333vw;
}

#meeting .repeat_area .repeat_cont_wrapp .cont_block.odd .caption {
    width: auto;
    margin-top: 5.333333vw;
    position: static;
    transform: translate(0, 0);
}

#meeting .repeat_area .repeat_cont_wrapp .cont_block.odd::before {;
    width: 73.333333vw;
    height: 53.333333vw;
    top: 48.533333vw;
    left: unset;
    right: 0;
}

#meeting .repeat_area .repeat_cont_wrapp .cont_block.even {
    width: auto;
    padding: 0;
    margin: 0 0 10.666667vw 5.333333vw;
    position: relative;
    top: 0;
    right: 0;
}


.bottom_image{
    margin-top: 44.533333vw;
}

.bottom_image .image{
    height: 56.266667vw;
}

.bottom_image .text_block{
    position: relative;
    bottom: unset;
    top: -4.8vw;
    left: 0;
    z-index: 2;
    margin-bottom: 32vw;
}

.bottom_image .text_block span{
    background: #FEFEFE;
    background: url('../images/common/gray_bg.webp') no-repeat 0 0 / cover;
    font-size: 4.800000vw;
    font-weight: 700;
    padding: 1.066667vw 1.066667vw 1.066667vw 3.2vw;
    margin-bottom: 2.133333vw;
}






}