@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; 
}
*/
/**パンくず**/
#bread{padding: 0.5em;}
/**ファーストビュー**/
#sect_fview{ padding: 0; margin: 0; width: 100%; }
/**slickカスタマイズ
#sect_fview ul[class*="_sl"]{position: relative;}
#sect_fview ul[class*="_sl"] .slick-list li.slick-slide { width: 100%; max-width: 1100px;}
#sect_fview ul[class*="_sl"] .slick-list li.slick-slide img{width: 100%; height: auto;}
#sect_fview ul[class*="_sl"] .slick-slide img{opacity: 0.25; transition: 300ms 0s ease;}
#sect_fview ul[class*="_sl"] .slick-slide.slick-active img{opacity: 1; transition: 300ms 0s ease;}
#sect_fview ul[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; }
#sect_fview ul[class*="_sl"] .arrow-prev{transform: rotate(90deg); left:2vw;}
#sect_fview ul[class*="_sl"] .arrow-next{transform: rotate(-90deg); right:2vw;}

#sect_fview ul[class*="_sl"] .uniq-dots{position: absolute; bottom:0; display: flex; width: 100%; justify-content: center; padding-bottom: 1.5em;}
#sect_fview ul[class*="_sl"] .uniq-dots li{ height: 1em; width: 1em; margin: 0 0.5em; padding: 0; cursor: pointer;}
#sect_fview ul[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%;}
#sect_fview ul[class*="_sl"] .uniq-dots li.slick-active button{background: #988070;}
**/

/**動画周り**/
#sub_movie{ min-height: 450px; height: 60vh; z-index: 0; display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; position: relative; }
#sub_movie video{ min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#sub_movie #volswitch{ position: absolute; bottom: 20px; right: 20px; width: 3rem; height: 2rem; display: inline-block; background-repeat: no-repeat; background-image: url(/assets/img/s_off.png); background-position: left top; background-size: 100% auto; cursor: pointer;}
#sub_movie #volswitch.swith_on{	background-image: url(/assets/img/s_on.png);}


#sub_movie #concept3{position:relative; z-index:999; padding-top: 100px; padding-bottom: 60px;}
#sub_movie #concept3 .ccopy{ text-align: center; font-size:clamp(1em,5vw,2em); padding-bottom: 1.5em; line-height: 1.3;}
#sub_movie #concept3 .ccopy strong{ font-size: clamp(2rem,6vw,4rem); display: block; line-height: 1.2; color: #26397c;}
#sub_movie #concept3 .ccopy strong em{ font-size: 110%; font-style: inherit;}
#sub_movie #concept3 .ccopy_txt{display: inline-block; text-align: center; font-size: clamp(0.7rem,4vw,1.5rem); line-height: 1.6;}
#sub_movie #concept3 ul.concept_name{}
#sub_movie #concept3 ul.concept_name li{background-color: rgba(255,255,255,0.60); text-align:center; color:#000; padding:1.5em 0.5em 2em 0.5em; font-size:1.5em;}
#sub_movie #concept3 ul.concept_name li strong{font-size:clamp(2rem,4vw,3rem); display:block; line-height: 1.2; color: #26397c;}
#sub_movie #concept3 .concept_txt{ text-align: center; color: #26397f; padding-top: 3em; font-size:1.4em;}

#sub_movie .auther_txt{font-size:clamp(2.5em,3.5vw,3.5em); padding-bottom: 0.5em; color:#26397c; line-height: 1.4;}
#sub_movie .auther_txt span{
background-position: 20%;
display: inline;
background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,0.00) 56%,rgba(255,255,255,1.00) 56.01%,rgba(255,255,255,1.00) 84%,rgba(255,255,255,0.00) 84.01%);
background-image: -moz-linear-gradient(270deg,rgba(255,255,255,0.00) 56%,rgba(255,255,255,1.00) 56.01%,rgba(255,255,255,1.00) 84%,rgba(255,255,255,0.00) 84.01%);
background-image: -o-linear-gradient(270deg,rgba(255,255,255,0.00) 56%,rgba(255,255,255,1.00) 56.01%,rgba(255,255,255,1.00) 84%,rgba(255,255,255,0.00) 84.01%);
background-image: linear-gradient(180deg,rgba(255,255,255,0.00) 56%,rgba(255,255,255,1.00) 56.01%,rgba(255,255,255,1.00) 84%,rgba(255,255,255,0.00) 84.01%);
}
#sub_movie .auther_name{text-align: center; font-size:clamp(1.5em,2vw,1.75em); }
#sub_movie .auther_name:before{content:"ー"; margin-right: 0.5em;}

#sub_movie .mov_onnews{
position: absolute;
left: 20px;
bottom: 20px;
background-color: rgba(0,0,0,0.3);
padding:1.5em 1em;
z-index: 99;
color: rgba(255,255,255,1.00);
border-radius: 0.25em;
}
#sub_movie .mov_onnews a{display: block;}
#sub_movie .mov_onnews:before {
    content: "NEWS";
    display: inline-block;
    background-color: rgba(212,0,3,1.00);
    font-size: 65%;
    padding: 0.5em 1em;
    position: absolute;
    top: -1em;
    margin: auto;
    left: 0;
    right: 0;
    width: 80px;
    text-align: center;
}
.message_slider{
    display: none;
}
.message_slider.slick-initialized{display:block;}
.message_slider .slick-track{ display: flex; align-items: center;}
.message_slider > *{
	text-align: center;
	line-height: 2em;
}
.message_slider .slick-slide{ opacity: 0;}
.message_slider img{
	display: inline-block;
	width: 340px;
}
/**動画周りここまで**/


/**コンセプト**/
section[id*="sect_"][id*="concept"]{}
#sect_concept01{ color: #000;}
#sect_concept01 [class*="mid_Ltitle"] .main_ttl:before{}
#sect_concept01 .service_ul{}
#sect_concept01 .service_ul li{}
#sect_concept01 .service_ul li a{display: flex; flex-direction: column;height: 100%; color: #1c2a5b; text-align: center; line-height: 1.2; padding: 2em 3em; background-image: url("../img/arr_blue.svg"); background-repeat: no-repeat; background-position: right 0.4em center; border: 1px solid #1c2a5b; background-size: 60px 34px;}
#sect_concept01 .service_ul li img{width: 30%; margin: auto; display: block; margin-bottom: 1em;}
#sect_concept01 .service_ul li strong{display: block; font-size: 150%; padding-bottom: 8px;}
#sect_concept01 .service_ul li .service_intro{}
#sect_concept01 .service_ul li .service_img{}
#sect_concept01 .service_txt{padding-bottom: 2em; font-size: 1.3em;}

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


/**パートナー**/
#sect_partner{padding-bottom: 0;padding-top: 1em; background-color: #26397f;}
#sect_partner [class*="mid_Ltitle"]{padding-bottom: 1em; color: #fff;}
#sect_partner a{display: block;}
#sect_partner a:hover{opacity: 1;}
.partner_slider { background-color: #fff; padding: 1.2em 0; }
.partner_slider li {}
.partner_slider li img{width: 100%;}



/**物件概要**/
#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_outline .spl_box{display: flex; align-content: stretch;padding: 1.5em;border: 1px solid #fff; margin-top: 4em;}
#sect_outline .spl_box .spl_txt{width:55%; padding-right: 1.5em;}
#sect_outline .spl_box .spl_txt strong{font-size: 1.3rem; padding-bottom: 1em;display: inline-block;}
#sect_outline .spl_box .spl_photo{width:45%;}
#sect_outline .spl_box .spl_photo img{width:100%;}

/**企業について**/
#sect_company{}
#sect_company .company_ul{}
#sect_company .company_ul li{position: relative; margin-bottom: 2em; min-height: 270px; display: flex; flex-direction: column;height: 100%; text-align: center; line-height: 1.2; padding: 2em 3em; background-color: #fff; border: solid 1px gray;}
/*#sect_company .company_ul li a{ background-image: url("../img/arr_blue.svg"); background-repeat: no-repeat; background-position: right 0.5em center; background-size: 44px 24px;}*/
#sect_company .company_ul li a:after{ content: ""; background-image: url("../img/arr_blue.svg"); background-repeat: no-repeat; display: inline-block; width: 44px; height: 24px; position: absolute; top: 45%; right: -0.5em;}
#sect_company .company_ul li strong{display: block; font-size: 130%; padding-bottom: 0.5em; color: #26397c; font-family: 'Roboto Condensed';}
#sect_company .company_ul li strong .country{font-size: 70%; display: block; margin-top: 5px;}
#sect_company .company_ul li .company_intro{ font-size: 15px; text-align: left;}
#sect_company .company_txt{padding-bottom: 2em; font-size: 1.3em;}
#sect_company .company_ul .company_logo{display: block; margin-bottom: 2em;}
#sect_company .company_ul .company_logo img{display: inline-block; width:205px; height:30px;}

/**番号付きリスト**/
#sect_ol{}
#sect_ol ol{padding: 2em; counter-reset: item; list-style-type: none; padding-left: 0;}
#sect_ol ol li{margin: 0 0.6em 3em 0.6em; min-width: 300px; display: flex; flex-direction: column; height: 100%; line-height: 1.2; padding: 2em 3em; background-color: #fff; border: solid 1px gray;}
#sect_ol ol li strong{display: block; font-size: 130%; padding-bottom: 0.5em; color: #26397c;}
#sect_ol ol li .sect_ol_intro{ position:relative; font-size: 16px; padding-left: 2.5em }
#sect_ol ol li .sect_ol_intro:before{ position:absolute; counter-increment: item; content: counter(item); font-weight: bold; color: #fff; top: 5%; left: -15px; background: #273b7d; border-radius: 50%; width: 30px; height: 30px; line-height: 30px; padding: 0 0 2em 0.7em;} 
#sect_ol .company_txt{padding-bottom: 2em; font-size: 1.3em;}

/**TABLE**/
.rinne_table{ border-top: 1px solid gray; border-left: 1px solid gray; margin: 0 auto; width: 70%;}
.rinne_table tr{}
.rinne_table tr th,.rinne_table tr td{padding: 20px 15px 20px 30px; text-align: left; font-size: 1em; line-height: 1.2em; border-bottom: 1px solid gray; border-right: 1px solid gray;}
.rinne_table tr th{ background: #1c2a5b; color: #fff;}
.rinne_table tr td{}
.rinne_table a{color: #2e53d7;}
.rinne_table a[href*="tel:"] {color: #000;}

/**FLACT**/
.boxes.small {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.boxes.small.flacts {
	position: relative;
}
.boxes.small.flacts .before,
.boxes.small.flacts .after
{
	position: absolute;
	text-transform: uppercase;
	background-color: #273b7d;
	color: #FFF;
	font-size: 24px;
	z-index: 10;
	padding: 10px 15px;
	font-weight: 700;
	font-family: 'Roboto Condensed', sans-serif;
	top: 10px;
}
.boxes.small.flacts .after
{
	background-color: #ffa900;
}
b.blue {
	color: #273b7d;
}
.box {
	position: relative;
	transition: all 0.5s;
	width: 100%;
	padding: 25px 15px;
	margin: 10px 0;
	background: #FFF;
}
.conclusion {
	background-color: #273b7d;
	z-index: 10;
	color: #FFF;
	padding: 15px;
	margin-bottom: 25px;
}
b.orange {
	color: #ffa900;
}
.box:hover {
	transform: translateY(-10px);
	transition: all 0.5s;
}
.box:first-child {
	margin-top: 0;
}
.box:last-child {
	margin-bottom: 0;
}
.box.small:hover .learnmore,
.learnmore:hover {
	text-decoration: underline;
}
.box.small.offer {
	border: 1px solid #e8ecf9;
	box-shadow: 5px 5px #eff2fe;
}
.subpage.flact .aboutus .box.small.offer {
	border: 1px solid #fef0df;
    box-shadow: 5px 5px #fff2e1;
}
.box.small.offer.flact {
	background-image: none;
}
.box.small.offer.flact:last-child {
	background-color: #ffa900;
}
.box.small.offer.flact:last-child h3 {
	color: #FFF;
}

.box.small.offer.problems {
	width: 50%;
	box-shadow: none;
	margin: 0;
	text-align: center;
}
.box.small.offer.empty {
	box-shadow: none;
	background: transparent;
	border: none;
	max-height: 1px;
	padding: 0;
	margin: 0 !important;
}
.box .decoration {
	position: absolute;
	top: 3.5px;
	left: 3.5px;
	height: 11px;
	border-left: 11px solid #273b7d;
	border-right: 11px solid #f8a231;
}
.box.offer h3 {
	margin-top: 25px;
	margin-bottom: 7.5px;
}
.box.small.offer.flact .text {
	margin-top: 15px;
	
} 
.boxes.small.flacts .icon i {
	font-size: 36px;
	margin-bottom: 20px;
}
.boxes.small.flacts.after .icon i {
	color: #ffa900;
}

.fa, .far, .fas {
    font-family: "Font Awesome 5 Free";
}

.fab, .far {
    font-weight: 400;
}

.fa, .fab, .fad, .fal, .far, .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.bg_gray{background: #e8ecf9;}

/* ##### responsive ##### */
@media screen and (max-width: 1340px) {
	/**企業について**/
	#sect_company{}
	#sect_company .company_ul{}
	#sect_company .company_ul li{ width: 48%;}
	#sect_company .company_ul li a{}
	#sect_company .company_ul li strong{}
	#sect_company .company_ul li strong .country{}
	#sect_company .company_ul li .company_intro{}
	#sect_company .company_txt{}
	#sect_company .company_ul .company_logo{}
	#sect_company .company_ul .company_logo img{}
	
	#sect_company .company_ul [class*="col_04"]>*:nth-of-type(2n){ margin-right: 0!important;}
}
@media screen and (max-width: 768px) {
   
    /**slickカスタマイズ
    #sect_fview ul[class*="_sl"]{position: relative;}
    #sect_fview ul[class*="_sl"] .slick-list li.slick-slide { max-width: 100vw;}
    #sect_fview ul[class*="_sl"] .slick-list li.slick-slide img{}
    #sect_fview ul[class*="_sl"] .slick-slide img{}
    #sect_fview ul[class*="_sl"] .slick-slide.slick-active img{}
    #sect_fview ul[class*="_sl"] [class*="arrow-"]{width: 2em; height: 2rem;}
    #sect_fview ul[class*="_sl"] .arrow-prev{}
    #sect_fview ul[class*="_sl"] .arrow-next{}

    #sect_fview ul[class*="_sl"] .uniq-dots{}
    #sect_fview ul[class*="_sl"] .uniq-dots li{ }
    #sect_fview ul[class*="_sl"] .uniq-dots li button{ }
    #sect_fview ul[class*="_sl"] .uniq-dots li.slick-active button{}
**/
	#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;}

    /**動画周り**/
    #sub_movie{
        width: 100vw;
        min-height: 350px;
		height: 40vh;
    }
    #sub_movie video {
        width: auto;
        height: 100%;
        max-width: initial;
    }
    #sub_movie #volswitch{
        right: 10px;
        bottom: 10px;
    }

    #sub_movie .mov_onnews{
    position: absolute;
    left: 10px;
    bottom: 10px;
    margin: auto;
    padding: 1em;
    max-width: calc(100% - 80px);
    font-size: 90%;
    }
    #sub_movie .mov_onnews:before{ padding: 0.25em 0.5em 0.5em 0.5em; margin-bottom: 0.5em;}
    #sub_movie .mov_onnews a{display: block;}

    #sub_movie #concept3{padding-bottom: 30px;}
    #sub_movie #concept3 .ccopy{ font-size:4vw;}
	#sub_movie #concept3 .ccopy strong{ font-size:8vw;}
    #sub_movie #concept3 ul.concept_name{}
    #sub_movie #concept3 ul.concept_name li{padding:1em 0.5em; font-size:1em; margin-bottom: 1em;}
    #sub_movie #concept3 ul.concept_name li strong{font-size: 6.5vw; letter-spacing: 0; }
    #sub_movie #concept3 .concept_txt{font-size:1em; text-align: left; padding-top:1em; }
    
    #sub_movie .auther_txt{font-size:6vw; padding-bottom: 2em; line-height: 1.6;}
    #sub_movie .auther_name{font-size:4vw; }




    /**コンセプト**/
    #sect_contept{}
    #sect_concept01{}
    #sect_concept01 .service_ul{}
    #sect_concept01 .service_ul li{margin-bottom: 1em;}
    #sect_concept01 .service_ul li a{flex-direction: row;padding: 1em; align-items: center;}
    #sect_concept01 .service_img{width: 20%;}
    #sect_concept01 .service_ul li img{ width: 100%; margin-bottom: 0;}
    #sect_concept01 .service_ul li strong{}
    #sect_concept01 .service_ul li .service_intro{width: 80%;text-align: left;padding-left: 1em;padding-right: 2em;background-position: right center;background-size: 0.75em auto;}
    
    /**企業理念**/
	#sect_concept02{}
	ul.feat_ul {}
	ul.feat_ul li {}
	ul.feat_ul li .feat_name{}
	ul.feat_ul li .feat_photo{}
	ul.feat_ul li .feat_copy{}

    /**ルームイメージ**/
    #sect_roomimage {}
    #sect_roomimage:before {}
    #sect_roomimage ul.photo_gall{ }
    #sect_roomimage ul.photo_gall li{width: 100%!important; margin-right: 0!important;}
    #sect_roomimage ul.photo_gall li img{}
    #sect_roomimage ul.photo_gall li:nth-child(4n+1){ }
    #sect_roomimage ul.photo_gall li:nth-child(4n+1):before{ }
    #sect_roomimage ul.photo_gall li:nth-child(4n+2){ }
    #sect_roomimage ul.photo_gall li:nth-child(4n+2):before{}
    #sect_roomimage ul.photo_gall li:nth-child(4n+3){ }
    #sect_roomimage ul.photo_gall li:nth-child(4n+3):before{}
    #sect_roomimage ul.photo_gall li:nth-child(4n){ }
    #sect_roomimage ul.photo_gall li:nth-child(4n):before{}

    #sect_roomimage ul.photo_gall li.prod_hidden{ }
    #sect_roomimage ul.photo_gall li.prod_visib{  } 
    #sect_roomimage ul.photo_gall+.btn_box{ padding-top: 1em;}



    /**物件概要・*/
    #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_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{}
    #sect_company .company_ul li{margin-bottom: 2em; margin-right:0; min-width: 230px; min-height: 180px; width: 100%; padding: 1.5em 2em;}
    #sect_company .company_ul li:first-child{}
	#sect_company .company_ul li a{}
	#sect_company .company_ul li a:after{ right: -1.3em;}
    #sect_company .company_ul .company_txt{}
    #sect_company .company_ul .company_logo{margin-bottom: 1em;}
    #sect_company .company_ul .company_logo img{display:block; margin:0 auto;}
	
	/**FLACT**/
	.box.small.offer.problems{width: 100%;}
	
	/**番号付きリスト**/
	#sect_ol{}
	#sect_ol ol{padding:0;}
	#sect_ol ol li{margin-bottom: 1.2em;}
	#sect_ol ol li strong{}
	#sect_ol ol li .sect_ol_intro{}
	#sect_ol ol li .sect_ol_intro:before{} 
	#sect_ol .company_txt{}
	
	/**TABLE**/
	.rinne_table{ width: 100%;}
	.rinne_table tr{}
	.rinne_table tr th,.rinne_table tr td{display: block;}
	.rinne_table tr th{}
	.rinne_table tr td{}
	.rinne_table a[href*="tel:"] {color: #2e53d7;}
}