@charset "utf-8"; /* ===== index ===== */
/*
body#top{
padding-top: 0; }
body#top header{
background-color: transparent;; }
body#top header.bg_wh{
background-color: #FFFFFF; transition: all 500ms 0s ease; 
}
*/
*{font-weight: bold;}
/**パンくず**/
#bread{padding: 1.5em 0;}

/**slickカスタマイズ**/
[class*="_sl"]{position: relative;}
[class*="_sl"] .slick-list li.slick-slide { width: 100%; max-width: 1100px;}
[class*="_sl"] .slick-list li.slick-slide img{width: 100%; height: auto;}
[class*="_sl"] .slick-slide img{opacity: 0.25; transition: 300ms 0s ease;}
[class*="_sl"] .slick-slide.slick-active img{opacity: 1; transition: 300ms 0s ease;}
[class*="_sl"] [class*="arrow-"]{position: absolute; top: 0; bottom: 0; margin: auto; background-image: url(../../../com/img/comm_arrWH01.svg); width: 3em; height: 3rem; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; cursor: pointer; z-index: 101; }
[class*="_sl"] .arrow-prev{transform: rotate(90deg); left:2vw;}
[class*="_sl"] .arrow-next{transform: rotate(-90deg); right:2vw;}
[class*="_sl"] .uniq-dots{position: absolute; bottom:0; display: flex; width: 100%; justify-content: center; padding-bottom: 1.5em;}
[class*="_sl"] .uniq-dots li{ height: 1em; width: 1em; margin: 0 0.5em; padding: 0; cursor: pointer;}
[class*="_sl"] .uniq-dots li button{ display: block; border: 0; background: #fff; height: 100%; width: 100%; outline: none; line-height: 0px; font-size: 0px; color: transparent; cursor: pointer; border-radius: 50%;}
[class*="_sl"] .uniq-dots li.slick-active button{background: #988070;}

[class*="_SlDes"]{padding-bottom: 2em;}
[class*="_SlDes"] .slick-list li.slick-slide img{ max-width: 100%;}
[class*="_SlDes"] [class*="arrow-"]{display: inline-block; width: 3em; height: 3em; position: absolute; top: 0; bottom: 0; margin: auto;/* background-image: url(../img/arr_black.svg); width: 3em; height: 3em; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;*/ cursor: pointer; z-index: 101; }
[class*="_SlDes"] [class*="arrow-"]:before{ display: inline-block; width: 75%; height: 75%; content: ""; border-left: 1px solid #000; border-bottom: 1px solid #000; transform:scale(1, 0.75) rotate(45deg) ; position: absolute; top:0; bottom: 0; left:0; right:0; margin: auto;}
[class*="_SlDes"] .arrow-prev{ left:-3vw;}
[class*="_SlDes"] .arrow-next{ right:-3vw; }
[class*="_SlDes"] .arrow-next:before{ transform:scale(1, 0.75) rotate(-135deg);}
[class*="_SlDes"] .uniq-dots{position: absolute; bottom:0; display: flex; width: 100%; justify-content: center; }
[class*="_SlDes"] .uniq-dots li{ height: 1em; width: 1em; margin: 0 0.5em; padding: 0!important; cursor: pointer;}
[class*="_SlDes"] .uniq-dots li button{ display: block; border: 0; background: #AFAFAF; height: 100%; width: 100%; outline: none; line-height: 0px; font-size: 0px; color: transparent; cursor: pointer; border-radius: 50%;}
[class*="_SlDes"] .uniq-dots li.slick-active button{ background: #4A4A4A;}

/**見出し**/
.two_plans{ margin: auto; margin-top: 2em; position: relative; margin-bottom: 5em; border-bottom: solid 1px #000;}
.two_plans p{border: solid 1px #000; display: inline-block; padding: 0.75em 3em 0.5em 3em; font-size: 1.25rem; border-bottom-color: #fff; margin-bottom: -1px; background-color: #fff;}
.two_plans:after{ display: none;content: ""; width: 1px; height:2em; position: absolute; bottom: 0; right:0; left:0; margin: auto; background-color: #000;}

/**横割りレイアウト**/
.spl_box{display: flex; align-content: stretch; padding: 1.5em; margin-top: 2em; border: solid 1px #000;}
.spl_box .spl_txt{ width:55%; padding-right: 1.5em; line-height: 1.6;}
.spl_box .spl_txt strong{ font-size: 1.3rem; padding-bottom: 0.5em; display: inline-block;}
.spl_box .spl_txt p+strong{ padding-top: 2em;}
.spl_box .spl_txt a{ display: inline-block; text-decoration: underline; color: #3a3a3a;}
.spl_box .spl_txt small{ padding-top: 2em; display: block;}
.spl_box .spl_photo{width: 45%; display: flex; justify-content: space-between; background-image: url(../img/arr_black.svg); background-repeat: no-repeat;background-position: center center; background-size: 15px auto;}
.spl_box .spl_photo img{ width:100%; }
.spl_box .spl_photo .beaf_box{width: 47%;}
.spl_box .spl_photo>* .beaf_name{display: inline-block; background-color: #000; color: #fff; padding: 0.25em 1em; margin-bottom: 0.5em;}


/**ファーストビュー**/
#sect_fview{ padding: 0; margin: 0; width: 100%; }
#sect_fview [class*="wth_"] img{width: 100%;}

/**コンセプト**/
section[id*="sect_"][id*="concept"]{}
#sect_concept{}

/**ルームイメージ**/
#sect_roomimage {overflow:hidden; position: relative;}
#sect_roomimage .plan_ttl{display: flex; align-items: center; padding-bottom: 2.5em; flex-direction: column;}
#sect_roomimage .plan_ttl .plan_name{font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 2.75rem; line-height: 1.2; padding-bottom: 0.4em;}
#sect_roomimage .plan_ttl .plan_name small{display: inline-block; padding: 0.3em 0.5em; color: #fff; background-color: #000000; line-height: 1; font-size: 65%; margin-right: 0.5em; vertical-align: middle; font-weight: 600;}
#sect_roomimage .plan_ttl .plan_theme{font-size: 1.25rem;}
#sect_roomimage .exp_txt+[class*="_SlDes"]{margin-top: 3em;}
#sect_roomimage [class*="_SlDes"]+.plan_ttl{padding-top: 8em;}


/**サービス**/
#sect_service{}
#sect_service .flow_name{}
#sect_service .flow_box{display: flex;}
#sect_service .flow_box .stage_box{background-color: #000; color:#fff; padding: 1em 1.5em; width: 25%; line-height: 1.6; text-align: center;}
#sect_service .flow_box .stage_box strong{font-family: 'Open Sans', sans-serif; font-weight: 700; display: block; color: #000; background-color: #fff;  border-radius: 1.1em; font-size: 120%; margin-bottom: 0.5em;}
#sect_service .flow_box .step_box{padding: 0 0 0 1.5em; width: 75%;}
#sect_service .flow_box .step_box .step_num{ padding: 0.5em 1em; border:solid 1px #000; display: block; margin-bottom: 1em; }
#sect_service .flow_box .step_box .step_txt{line-height: 1.5; padding: 0 1em 2em 1em; position: relative; }
#sect_service .flow_box .step_box .step_txt:after{content: ""; bottom: 0; margin: auto; left: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 1em 1em 0 1em; border-color: #afafaf transparent transparent transparent; display: inline-block; position: absolute;}
#sect_service .flow_box .step_box .step_txt + .step_num{margin-top: 1.5em;}
#sect_service .flow_box+.flow_box{margin-top: 1.5em;}
#sect_service .flow_box .step_box .step_finish{ background-color: #bbb0a1; padding: 0.5em 1em; text-align: center; margin-top: 1em; font-size: 120%;}

/**キャンペーン**/
#sect_campaign{}

/**モデルルーム**/
#sect_model{}
#sect_model .two_plans + .exp_txt{margin-top: -2em;}
#sect_model .spl_box{ padding: 0; border-style:none; margin-top: 4em;}

#sect_model .midokoro_list li{overflow: hidden; padding-bottom: 4em;}
#sect_model .midokoro_list li img{width: 100%; margin-bottom: 1em;}
#sect_model .midokoro_list .midokoro_mid{position: relative; display: inline-block; margin-left: -1.2em;}
#sect_model .midokoro_list .midokoro_mid>*{position: relative; display: block; /**任意→**/color: #fff; padding: 0.4em 1.5em 0.25em 2.2em; font-size: 1.1em;}
#sect_model .midokoro_list .midokoro_mid:before{ position: absolute; content:""; top: 0; left: 0; right:0; margin:auto; width: calc(100% - 1em); height: 100%; transform: skewX(25deg);}
/**以下色の応じて任意**/
#sect_model .midokoro_list .midokoro_mid:before{ background: rgb(0 0 0 / 100%); display: block;}

.case-dots{	width: 100%; display: flex; border: 1px solid #000; margin-bottom: 3em;}
.case-dots li{ display: block; width: 100%; height: 100%;}
.case-dots li button,.case-dots li .nolinkFuk{margin: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 100%; display: block; padding: 0.75em 0; font-size: 20px; letter-spacing: 0.1em; background-color: #FFFFFF; color: #000;position: relative;}
.case-dots li button{ cursor: pointer; }
.case-dots li .nolinkFuk{text-align: center;}
.case-dots li.slick-active button,.case-dots li.slick-active .nolinkFuk{ background-color: #000; color: #fff;}
.case-dots li.slick-active button:after,.case-dots li.slick-active .nolinkFuk:after { border: solid transparent; content: ''; height: 0; width: 0; pointer-events: none; position: absolute; border-color: rgba(255, 109, 91, 0); border-top-width: 13px; border-bottom-width: 13px; border-left-width: 9px; border-right-width: 9px; margin-left: -9px; border-top-color: #000; top: 100%; left: 50%;}

[class*="slnum_0"]{display:none;}
[class*="slnum_0"].disp_active{display:block;}

ul[class*="photo_gall"]+.btn_box{padding-bottom: 3em; padding-top: 1em;}
ul[class*="photo_gall"]+.btn_box+.btn_box{padding-bottom: 3em; padding-top: 2em;}
ul[class*="photo_gall"]+.btn_box #more_btn{border:solid 1px #000;}
ul[class*="photo_gall"]{ display: flex; flex-wrap: wrap; padding-top: 3em;}
ul[class*="photo_gall"] li{ width: 100%; position: relative; background-repeat: no-repeat; background-size: cover; background-position: center center; margin-bottom: 1.75em; transition: all .4s ease 0s;}
ul[class*="photo_gall"] li img{}
ul[class*="photo_gall"] li>*{width:100%; position: absolute; background-repeat: no-repeat;background-size: cover; background-position: center center; left:0; }
ul[class*="photo_gall"] li>*:first-child{top:0;}
ul[class*="photo_gall"] li>*:last-child{bottom: 0;}
ul[class*="photo_gall"] li:before{content:""; display: block; padding-top: 62.5%;}
ul[class*="photo_gall"] li.prod_hidden{ visibility: hidden; opacity: 0; height: 0; margin: 0; padding:0;}
ul[class*="photo_gall"] li.prod_visib{ visibility: visible!important; opacity: 1!important; }

ul.photo_gall-vandh li:nth-child(4n+1){ width:65%; margin-right: 2.5%;}
ul.photo_gall-vandh li:nth-child(4n+1):before{content:""; display: block; padding-top: 66.66%;}
ul.photo_gall-vandh li:nth-child(4n+2){ width:32.5%; }
ul.photo_gall-vandh li:nth-child(4n+2):before{content:""; display: block; padding-top: 133.33%;}
ul.photo_gall-vandh li:nth-child(4n+3){ width:32.5%; margin-right: 2.5%;}
ul.photo_gall-vandh li:nth-child(4n+3):before{content:""; display: block; padding-top: 133.33%;}
ul.photo_gall-vandh li:nth-child(4n){ width:65%;}
ul.photo_gall-vandh li:nth-child(4n):before{content:""; display: block; padding-top: 66.66%;}
ul.photo_gall-vandh li.photox3{ width: 100%!important; margin-right: 0!important; display: flex; align-items: flex-start;}
ul.photo_gall-vandh li.photox3>*{ width: 31.8%; margin-right: 2.3%; position: relative!important; background-repeat: no-repeat; background-size: cover; background-position: center center; }
ul.photo_gall-vandh li.photox3>*:last-child{margin-right: 0!important;}
ul.photo_gall-vandh li.photox3>*:before{padding-top: 133.33%;}
ul.photo_gall-vandh li.photox3:before{display: none;}



/**特徴**/
#sect_feature{}
#sect_feature ul.feat_ul {display:flex; align-content: stretch;}
#sect_feature ul.feat_ul li {margin-bottom: 4em;}
#sect_feature ul.feat_ul li .feat_name{font-size: 1.3rem; line-height: 1.2; text-align: center; padding: 1em 1em 0.5em 1em; border: 1px solid #595959; margin-bottom: 0.75em; border-bottom-style: none; border-right-style: none;}
#sect_feature ul.feat_ul li .feat_photo{padding-bottom:2em;}
#sect_feature ul.feat_ul li .feat_copy{color: #988070; font-size:1.3rem; padding-bottom: 1em; line-height: 1.6;}

/**物件概要**/
#sect_outline{background-color: #000;color: #fff; }
#sect_outline .outline_txt strong{display:block; padding-bottom: 0.5em; font-size: 1.3rem; line-height: 1.8;}
#sect_outline .outline_txt p+strong{ margin-top: 2em;}


/**企業について**/
#sect_company{ background-color: #efefef;}
#sect_company .company_ul{background-color:#fff; padding: 2em;}
#sect_company .company_ul li{display: flex; flex-direction:column; padding: 0 2em; width: 50%; margin: 0;}
#sect_company .company_ul li:last-child{ border-left: solid 1px #000;}
#sect_company .company_ul .company_txt{display: flex; flex-grow:1; padding-bottom: 2em;}
#sect_company .company_ul .company_logo{text-align: center; padding-bottom: 2em;}
#sect_company .company_ul .company_logo img{display: inline-block; width:auto; max-height: 140px; height: 12vw;}
#sect_company .company_ul .company_logo.myrLogo img{max-height: 40px;margin:50px auto 50px;height:100%;}

/* ##### responsive ##### */
@media screen and (max-width: 768px) {
    body#top{}
    /**パンくず**/
    #bread{padding: 0;}
    
    /**slickカスタマイズ**/
    [class*="_sl"]{position: relative;}
    [class*="_sl"] .slick-list li.slick-slide { max-width: 100vw;}
    [class*="_sl"] .slick-list li.slick-slide img{}
    [class*="_sl"] .slick-slide img{}
    [class*="_sl"] .slick-slide.slick-active img{}
    [class*="_sl"] [class*="arrow-"]{width: 2em; height: 2rem;}
    [class*="_sl"] .arrow-prev{}
    [class*="_sl"] .arrow-next{}
    [class*="_sl"] .uniq-dots{}
    [class*="_sl"] .uniq-dots li{ }
    [class*="_sl"] .uniq-dots li button{ }
    [class*="_sl"] .uniq-dots li.slick-active button{}

    [class*="_SlDes"] .slick-list li.slick-slide img{ }
    [class*="_SlDes"] [class*="arrow-"]{ width: 2.4em; height: 2.4em; top: -1em; }
    [class*="_SlDes"] .arrow-prev{ left: 2vw;}
    [class*="_SlDes"] [class*="arrow-"]:before{ border-left: 1px solid #fff; border-bottom: 1px solid #fff;}
    [class*="_SlDes"] .arrow-next{ right: 2vw;}
    [class*="_SlDes"] .uniq-dots{}
    [class*="_SlDes"] .uniq-dots li{ }
    [class*="_SlDes"] .uniq-dots li button{}
    [class*="_SlDes"] .uniq-dots li.slick-active button{ }

    /**見出し**/
    .two_plans{ margin-top: 1.5em; margin-bottom: 3em; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);}
    .two_plans p{ padding: 1em 1.25em 0.5em 1.25em; font-size: 1.1rem; line-height: 1.4; }
    .two_plans:after{}
    
    /**横割りレイアウト**/
    .spl_box{flex-wrap: wrap; margin-bottom: 1.5em; padding: 1.25em;}
    .spl_box .spl_txt{width:100%; padding-right: 0; padding-bottom: 2em;}
    .spl_box .spl_txt strong{ font-size: 1.2rem;}
    .spl_box .spl_txt small{ font-size: 90%;}
    .spl_box .spl_photo{width:100%;}
    .spl_box .spl_photo img{}

    /**ファーストビュー**/
    #sect_fview{ padding: 1em 0;  }
    #sect_fview [class*="wth_"] img{}
	#sect_fview a.scroll_btn{ text-align: center; border-top-left-radius: 0.4em; border-top-right-radius: 0.4em; width: 160px; color: #d46a99; padding: 0.5em 0; padding-left: 1em; position: absolute; bottom: 0; left:0; right:0; display: inline-block; background-color: #fff; margin: auto; font-family: 'Roboto', sans-serif;}
	#sect_fview a.scroll_btn:after{ content: ""; display: inline-block; width: 0.8em; height: 0.8em; background-image: url(../img/arr_pink.svg); background-repeat: no-repeat; background-size: contain; vertical-align: middle; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); background-position: center top; margin-left: 0.5em;}
    
    /**コンセプト**/
    #sect_contept{}
    
    /**ルームイメージ**/
    #sect_roomimage {}
    #sect_roomimage .plan_ttl{padding-bottom: 2em;}
    #sect_roomimage .plan_ttl .plan_name{font-size: 1.75rem; padding-bottom: 0.4em; letter-spacing: 0;}
    #sect_roomimage .plan_ttl .plan_name small{ font-size: 50%; margin-right: 0.25em;}
    #sect_roomimage .plan_ttl .plan_theme{font-size: 1rem; line-height: 1.4;}
    #sect_roomimage .exp_txt+[class*="_SlDes"]{margin-top: 3em;}
    #sect_roomimage [class*="_SlDes"]+.plan_ttl{padding-top: 8em;}

    ul[class*="photo_gall"]{ }
    ul[class*="photo_gall"] li{width: 100%!important; margin-right: 0!important;}
    ul[class*="photo_gall"] li img{}
    ul[class*="photo_gall"] li:nth-child(4n+1){ }
    ul[class*="photo_gall"] li:nth-child(4n+1):before{ }
    ul[class*="photo_gall"] li:nth-child(4n+2){ }
    ul[class*="photo_gall"] li:nth-child(4n+2):before{}
    ul[class*="photo_gall"] li:nth-child(4n+3){ }
    ul[class*="photo_gall"] li:nth-child(4n+3):before{}
    ul[class*="photo_gall"] li:nth-child(4n){ }
    ul[class*="photo_gall"] li:nth-child(4n):before{}

    ul[class*="photo_gall"] li>*{margin-bottom: 1.75em; position: static;}
    ul[class*="photo_gall"] li>*:last-child{margin-bottom: 0;}
    ul[class*="photo_gall"] li>*:before{padding-top: 66.66%;}
    ul[class*="photo_gall"] li.photox2:before{padding-top: 0;}
    ul[class*="photo_gall"] li.prod_hidden{ }
    ul[class*="photo_gall"] li.prod_visib{  } 
    ul[class*="photo_gall"]+.btn_box{ padding-top: 0;}
    ul[class*="photo_gall"]+.btn_box+.btn_box{padding-top: 0;}

    /**ルームイメージ**/
    #sect_service{}
    #sect_service .flow_name{}
    #sect_service .flow_box{flex-direction: column;}
    #sect_service .flow_box .stage_box{ padding: 1em; width: 100%; margin-bottom: 1em;}
    #sect_service .flow_box .stage_box strong{font-size: 100%;}
    #sect_service .flow_box .step_box{padding: 0; width: 100%;}
    #sect_service .flow_box .step_box .step_num{ padding: 0.25em 1em; text-align: center;}
    #sect_service .flow_box .step_box .step_txt{ padding: 0 0 2em 0; }
    #sect_service .flow_box .step_box .step_txt:after{}
    #sect_service .flow_box .step_box .step_txt + .step_num{}
    #sect_service .flow_box+.flow_box{}
    #sect_service .flow_box .step_box .step_finish{ }

    /**キャンペーン**/
    #sect_campaign{}

    /**モデルルーム**/
    #sect_model{}
    #sect_model .two_plans + .exp_txt{margin-top: -1em;}
    #sect_model .spl_box{ margin-top: 3em;}

    /**特徴**/
    #sect_feature{}
    #sect_feature ul.feat_ul {}
    #sect_feature ul.feat_ul li {}
    #sect_feature ul.feat_ul li .feat_name{}
    #sect_feature ul.feat_ul li .feat_photo{}
    #sect_feature ul.feat_ul li .feat_copy{}

    /**物件概要**/
    #sect_outline{ }
    #sect_outline .outline_txt{ padding-bottom: 2em;}
    #sect_outline .outline_txt strong{}
    #sect_outline .outline_txt p+strong{}
    #sect_outline .spl_box{flex-wrap: wrap; margin-bottom: 1.5em;}
    #sect_outline .spl_box .spl_txt{width:100%; padding-right: 0; padding-bottom: 2em;}
    #sect_outline .spl_box .spl_txt strong{}
    #sect_outline .spl_box .spl_txt small{ font-size: 90%;}
    #sect_outline .spl_box .spl_photo{width:100%;}
    #sect_outline .spl_box .spl_photo img{}
    #sect_outline [class*="comm_btn"]{margin-bottom:1.5em;}

    /**企業について**/
    #sect_company{ }
    #sect_company .company_ul{padding: 1em;}
    #sect_company .company_ul li{flex-direction:column; padding: 0; width: 50%; margin: 0;}
    #sect_company .company_ul li:last-child{ border-left-style: none; border-top: solid 1px #000; padding-top: 2em; margin-top: 2em;}
    #sect_company .company_ul .company_txt{display: flex; flex-grow:1; padding: 0 0.5em 2em 0.5em;}
    #sect_company .company_ul .company_logo{text-align: center; padding-bottom: 0.5em;}
    #sect_company .company_ul .company_logo img{display: block; width:80%; max-height: initial; height: auto; margin: auto;}
	#sect_company .company_ul .company_logo.myrLogo img{width:60%;margin:8vw auto 10vw; }

}