@charset "utf-8";
/*------------------
scene　共通
--------------------*/
.scene_contentsInner {
    width: 95%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
}
#scenetop .img_w100per img,
#scene .img_w100per img {
    width: 100%;
}
#scenetop .page_title_txt,
#scene .page_title_txt {
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 6%;
    line-height: 1.9;
}
#scenetop .page_title_txt {
    border-bottom: 1px solid #a69f96;
    font-size: 1.6rem;
}
#scene .page_title_txt {
    font-size: 1.8rem;
}
#scene .ttl_style02 {
    margin: 0.5em 0;
    padding: 0 0 0.1em 0.5em;
    border-left: 5px solid #a0988e;
    text-align: left;
    font-size: 2.4rem;
}

@media screen and (min-width: 766px) {
    .scene_contentsInner {
        margin: 0 auto 0;
    }
    #scene .page_title_EN {
        font-size: 3.3rem;
    }
    #scene .page_title_h1 {
        font-size: 1.4rem;
    }
    #scene .page_title_txt {
        font-size: 1.6rem;
    }
    #scenetop .page_title_txt,
    #scene .page_title_txt {
        padding-bottom: 5%;
    }
    #scene .ttl_style02 {
        font-size: 2rem;
    }
}
/*------------------
scene topページ
--------------------*/
#scenetop .ttl02 {
    margin-top: 5%;
    color: #a0988e;
}
#scenetop .ttl02_desc {
    font-size: 1.8rem;
    line-height: 1.7;
    margin-top: 1%;
}
#scenetop .case_colum2 {
    max-width: 1140px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
    padding: 0 0 8%;
}
#scenetop .case_container {
    margin: 7% 0 0;
    width: 48%;
}
#scenetop .case_box_desc {
    display: flex;
    justify-content: space-between;
}
#scenetop .case_box_num {
    width: calc(100% * 92 / 374);
    margin: 0;
}
#scenetop .case_box_num img {
    width: 100%;
}
#scenetop .case_box_txt {
    width: calc(100% * 260 / 374);
    margin: 0;
    line-height: 1.7;
    font-size: 1.4rem;
}
#scenetop .btn_long {
    width: 100%;
    padding: 8% 0 0;
}

@media screen and (min-width: 766px) {
    #scenetop .contents {
        padding-bottom: 70px;
    }
    .scene_contentsInner {
        margin: 0 auto 0;
    }
    #scenetop .page_title_txt {
        margin-bottom: 0;
        padding-bottom: 4%;
    }
    #scenetop .ttl02 {
        margin-top: 4.2%;
    }
    #scenetop .ttl02_desc {
        margin-top: 1.1%;
        font-size: 1.6rem;
    }

    #scenetop .border02 {
        border-bottom: 1px solid #eee;
    }
    #scenetop .case_box {
        position: relative;
        display: flex;
    }
    #scenetop .case_box_txt {
        font-size: 1.4rem;
        padding: 3px 0 0;
    }
    
    #scenetop .btn_long a {
        letter-spacing: 0.23em;
    }
    #scenetop .draw_right {
        display: flex !important;
        justify-content: flex-end;
        padding: 3% 0;
        width: 21%;
        margin-right: 0;
    }
    #scenetop .draw_left {
        display: flex !important;
        justify-content: flex-start;
        padding: 3% 0 0;
        width: 21%;
        margin-left: 0;
    }
    #scenetop .img_w100per {
    margin-top:20px;
    }
    #scenetop .case_colum2 {
        padding:0 0 60px;
    } 
    
    /* CASE01 */
    
    #scenetop .case01 .case_box_num {
        width: calc(100% * 130 / 547);
    }
    #scenetop .case01 .case_box_txt {
        width: calc(100% * 380 / 547);
    }

    /* CASE02 */
    
    #scenetop .case02 .case_box_num {
        width: calc(100% * 130 / 547);
    }
    #scenetop .case02 .case_box_txt {
        width: calc(100% * 380 / 547);
        letter-spacing: -0.02em;
    }
    

    /* CASE03 */
    
    #scenetop .case03_right {
        width: calc(100% * 650 / 1275);
        transform: translateX(4%);
    }
    #scenetop .case03 .case_box_num {
        width: calc(100% * 130 / 547);
    }
    #scenetop .case03 .case_box_txt {
        width: calc(100% * 380 / 547);
    }
    
    /* CASE04 */
    
    #scenetop .case04_right {
        width: calc(100% * 701 / 1275);
        transform: translateX(4%);
    }
    #scenetop .case04 .case_box_num {
        width: calc(100% * 130 / 547);
    }
    #scenetop .case04 .case_box_txt {
        width: calc(100% * 380 / 547);
    }
    
    /* CASE05 */

    
    #scenetop .case05 .case_box_num {
        width: calc(100% * 130 / 547);
    }
    #scenetop .case05 .case_box_txt {
        width: calc(100% * 380 / 547);
    }
    #scenetop .case05_right{
        max-width: 540px;
    }
    #scenetop .last_case_colum2{
        border-bottom:none;
    }
    
}
@media screen and (min-width: 1140px) {
    #scenetop .case_box_txt {
        font-size: 1.6rem;
    }
}

/*------------------
scene CASE01-05
--------------------*/
#scene .lead {
    width:100%;
    margin: 0 auto 3em 0;
}
#scene .lead_Inner {
    background-color: #f3ede9;
    padding: 1.8% 1.8% 4% 2.5%;
}
#scene .lead .ttl02 {
    font-size: 2.4rem;
    color: #a0988e;
}
#scene .lead .ttl02_desc {
    margin-top: 1%;
    font-size: 1.6rem;
    line-height: 1.6;
}
#scene .item01,
#scene .item02 {
    margin-top: 5%;
}
#scene .item02 {
    padding-bottom: 7%;
}
#scene .item01 img,
#scene .item02 img {
    width: 100%;
}
#scene .row_reverse {
    flex-direction: row-reverse;
}
#scene .item01_ttl {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4%;
}
#scene .item01_ttl_num {
    width: calc(100% * 130 / 708);
    margin-left: 0;
}
#scene .item01_ttl_txt {
    width: calc(100% * 549 / 708);
    display: flex;
    align-items: center;
    padding-bottom: 1%;
    margin: 0;
    font-size: 2.4rem;
}
#scene .item01_desc,
#scene .item02_desc {
    font-size: 1.8rem;
}
#scene .item01_desc_txt {
    padding-top: 3%;
    font-size: 1.4rem;
}
#scene .item01_subimg,
#scene .item02_subimg {
    width: calc(100% * 384 / 708);
    margin: 6% auto;
}

    #scene .item01_img01,
    #scene .item02_img01 {
        margin: 1em 0 0 0;
    }

@media screen and (min-width: 766px) {
    #scene .lead {
        width: 95%;
        max-width: 1140px;
        margin: 0 auto;
        padding: 0;
    }
    #scene .lead_Inner {
        width: calc(100% * 1084 / 1140);
        margin: 0 auto 0 0;
        padding: 1.2% 1.2% 1.8% 13%;
        transform: translateX(-15%);
		line-height: 1.8;
    }
    #scene .lead .ttl02 {
        font-size: 3rem;
    }
    #scene .lead .ttl02_desc {
        font-size: 1.6rem;
    }
    #scene .item01,
    #scene .item02 {
        display: flex;
        justify-content: space-between;
    }
    #scene .item01_desc {
        width: calc(100% * 490 / 1140);
        margin: 0;
    }
    #scene .item01_ttl_num {
        width: calc(100% * 130 / 480);
    }
    #scene .item01_ttl_txt {
        width: calc(100% * 320 / 480);
        font-size: 2.4rem;
    }
    #scene .item01_desc,
    #scene .item02_desc {
        width: calc(100% * 480 / 1140);
        margin: 0;
        font-size: 1.6rem;
        position: relative;
    }
    #scene .item01_desc_txt {
        font-size: 1.6rem;
    }
    #scene .item01_img01,
    #scene .item02_img01 {
        width: calc(100% * 620 / 1140);
        margin: 0;
    }
}

/* CASE01 */
@media screen and (min-width: 766px) {
    #scene .case01 .item01_subimg,
    #scene .case01 .item02_subimg {
        width: calc(100% * 380 / 480);
        margin: 8% auto 0;
    }
    #scene .case01 .item02 {
        flex-direction: row-reverse;
    }
}

/* CASE02 */
#scene .case02 .item01_subimg02 {
    display: block !important;
}
@media screen and (min-width: 766px) {
    #scene .case02 .item01_ttl {
        margin-bottom: 4%;
    }
    #scene .case02 .item01_subimg01 {
        display: block !important;
    }
    #scene .case02 .item01_subimg02 {
        display: none !important;
    }
}
/* CASE03 */
#scene .case03 .item01_ttl {
    margin-bottom: 4%;
}
#scene .case03 .item01_txt01 {
    padding: 0 0 4%;
    font-size: 1.4rem;
}
#scene .case03 .item01_img02 {
    margin-top: 4%;
    display: block !important;
}
#scene .case03 .item01_details_sp_sub {
    margin-top: 4%;
    display: flex;
    justify-content: space-between;
}
#scene .case03 .item01_details_sp_sub_img {
    width: calc(100% * 354 / 708);
}
#scene .case03 .item01_details_sp_sub_img p {
    width: calc(100% * 166 / 354);
}
#scene .case03 .item01_details_sp_sub_txt {
    width: calc(100% * 354 / 708);
    font-size: 1.4rem;
}
#scene .case03 .item01_details_pc {
    display: none;
}
@media screen and (min-width: 766px) {
    #scene .case03 .item01_details_sp {
        display: none;
    }
    #scene .case03 .item01_details_pc {
        display: flex;
        justify-content: space-between;
    }
    #scene .case03 .item01_txt01 {
        font-size: 1.6rem;
    }
    #scene .case03 .item01_details_pc_img {
        width: calc(100% * 125 / 442);
        margin: 0;
    }
    #scene .case03 .item01_details_pc_sub {
        width: calc(100% * 289 / 442);
        margin: 0;
    }
    #scene .case03 .item01_details_pc_sub_txt {
        font-size: 1.4rem;
    }
}
#scene .case03 .item02 {
    padding: 5% 0 10%;
}
#scene .case03 .item02_desc_sub {
    margin-top: 3%;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}
#scene .case03 .item02_desc_sub_txt {
    width: calc(100% * 354 / 708);
    font-size: 1.4rem;
}
#scene .case03 .item02_desc_sub_img {
    width: calc(100% * 354 / 708);
}
#scene .case03 .item02_desc_sub_img p {
    width: calc(100% * 166 / 354);
}
@media screen and (min-width: 766px) {
    #scene .case03 .item02 {
        padding: 0 0 10%;
        flex-direction: row-reverse;
    }
    #scene .case03 .item02_desc_sub {
        margin-top: 3%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    #scene .case03 .item02_desc_sub_txt {
        width: 100%;
        font-size: 1.4rem;
    }
    #scene .case03 .item02_desc_sub_img {
        position: absolute;
        bottom: 0;
        right: 0;
        width: calc(100% * 125 / 477);
    }
    #scene .case03 .item02_desc_sub_img p {
        width: 100%;
    }
}
/* CASE04 */
@media screen and (min-width: 766px) {
    #scene .case04 .item02 {
        flex-direction: row-reverse;
    }
    #scene .case04 .item02_desc {
        padding-top: 1.4%;
    }
    #scene .case04 .item01_subimg,
    #scene .case04 .item02_subimg {
        width: calc(100% * 362 / 480);
    }
}
/* CASE05 */
#scene .case05 .item01_desc_txt {
    padding: 0 0 3%;
}
#scene .case05 .item01_subimg_pc {
    display: none;
}
#scene .case05 .item01_subimg_sp {
    width: calc(100% * 365 / 708);
    display: block;
}
.item02_subimg {
    width: calc(100% * 365 / 708);
}
@media screen and (min-width: 766px) {
    #scene .case05 .item01_subimg_pc {
        display: block;
    }
    #scene .case05 .item01_subimg_sp {
        display: none;
    }
}

/* reason */
#scene .reason_ttl h2 {
    position: relative;
    margin: 0 auto;
    width: 95%;
    max-width: 1140px;
    text-align: left;
    font-family: 'Noto Serif JP', serif;
    line-height: 1.2;
    font-size: 2.4rem;
    padding-left: 28px;
}
#scene .reason_ttl h2:before {
    content: '';
    position: absolute;
    top: calc(50% - 20px);
    left: 0;
    width: 10px;
    height: 40px;
    background: #434343;
}
#scene .reason_ttl h2:after {
    content: '';
    position: absolute;
    top: 16px;
    left: 24em;
    width: 120%;
    height: 1px;
    background: #1b1b1b;
}
#scene .reason {
    padding: 1.5% 0 3%;
}
#scene .reason li {
    padding: 3% 0;
}
#scene .reason li:not(:last-child) {
    border-bottom: solid 1px #eee;
}
#scene .reason li h3 {
    text-align: left;
    color: #898279;
    font-size: 2.4rem;
}
#scene .reason_txt01 {
    margin-top: 1em;
    font-size: 1.6rem;
}
#scene .reason_txt02 {
    margin-top: 1.6em;
}
@media screen and (min-width: 766px) {
    #scene #scene .reason li h3 {
        font-size: 2rem;
    }
    #scene .reason li {
        padding: 2.6% 0;
    }
    #scene .reason_txt01 {
        margin-top: 1em;
        font-size: 1.4rem;
    }
}

/*------------------
scene Other cases
--------------------*/
#scene .other_bgcGray {
    background-color: #fbfbfb;
}
#scene .other_contents {
    padding: 3% 0;
}
#scene .other_title {
    height: 155px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#scene .otherTtl_EN {
    text-align: center;
    font-family: 'Noto Serif JP', serif;
    font-size: 3.6rem;
    letter-spacing: 0.05em;
}
#scene .otherTtl_h5 {
    text-align: center;
    font-size: 1.6rem;
}
#scene .otherTtl_h5::after {
    content: '';
    display: block;
    position: relative;
    width: 40px;
    height: 2px;
    margin: 12px auto 0;
    background-color: #ebe1d9;
}
#scene .other_head_ttl {
    margin: 0;
    text-align: left;
}
#scene .other_container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin: 0 0 7%;
    padding-bottom: 5%;
}
#scene .other_box {
    width: 100%;
    margin: 0;
}
#scene .other_box dt {
    padding: 0;
    margin: 0;
    font-family: 'Noto Serif JP', serif;
    font-size: 2.4rem;
    color: #a49e84;
    overflow: visible;
    white-space: nowrap;
}
#scene .other_box dd {
    margin-top: 3px;
}
#scene .cases {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    box-sizing: border-box;
}
#scene .livingDiningRoom {
    margin-top: 5%;
    width: calc(100% * 462 / 708);
}
#scene .cases li {
    position: relative;
    padding-bottom: 1.5em;
}
#scene .privateRoom .cases li {
    width: calc(100% * 220 / 708);
}
#scene .livingDiningRoom .cases li {
    width: calc(100% * 220 / 462);
}
#scene .cases li img {
    width: 100%;
}
#scene .cases li:last-child {
    margin-right: 0;
}
#scene .casesTxt {
    font-size: 1.4rem;
}
#scene .more {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #a0988e;
    text-decoration: underline;
    font-size: 1.4rem;
    text-align: right;
}
@media screen and (min-width: 766px) {
    #scene .other_container {
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    #scene .privateRoom {
        width: calc(100% * 674 / 1140);
    }
    #scene .livingDiningRoom {
        margin-top: 0;
        width: calc(100% * 444 / 1140);
    }
    #scene .other_box dt {
        padding: 0;
        margin: 0;
        font-size: 2.5vw;
    }
    #scene .cases {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0;
    }
    #scene .privateRoom .cases li {
        width: calc(100% * 210 / 674);
    }
    #scene .livingDiningRoom .cases li {
        width: calc(100% * 210 / 444);
    }
}
@media screen and (min-width: 1140px) {
    #scene .other_box dt {
        font-size: 3rem;
    }
}