@charset "utf-8";

/* ------- 実例一覧 ------- */
:root ol, :root ul {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#solution-index .content-area01{
	height:290px;
	margin:0 auto;
	text-align:center;
}
.contents.solution #solution-index .content-area01{/*事業目的・手法別実例検索*/
	background:url(img/solution/bg_title.jpg) no-repeat center top;
}
.contents.chintai #solution-index .content-area01{/*賃貸住宅・複合開発・その他*/
	background:url(img/solution/chintai/bg_title.jpg) no-repeat center top;
}
.contents.shataku #solution-index .content-area01{/**/
	background:url(img/solution/shataku/bg_title.jpg) no-repeat center top;
}
.contents.hotel #solution-index .content-area01{/**/
	background:url(img/solution/hotel/bg_title.jpg) no-repeat center top;
}
.contents.mansion #solution-index .content-area01{/**/
	background:url(img/solution/mansion/bg_title.jpg) no-repeat center top;
}
.contents.kosodate #solution-index .content-area01{/**/
	background:url(img/solution/kosodate/bg_title.jpg) no-repeat center top;
}
.contents.gakuseiryo #solution-index .content-area01{/**/
	background:url(img/solution/gakuseiryo/bg_title.jpg) no-repeat center top;
}
.contents.saigai #solution-index .content-area01{/**/
	background:url(img/solution/saigai/bg_title.jpg) no-repeat center top;
}
#solution-index h1{
	color:#fff;
	font-size:4.4rem;
}
#solution-list{
	background:#edf0f5;
	text-align:center;
	padding:6.5rem 0 0;
}
#solution-list h2.list-copy{
	font-size:2.8rem;
	color:#01579b;
	margin-bottom:3.6rem;
}
#solution-list .list-txt{
	font-size:1.6rem;
	margin-bottom:4.8rem;
}

.solution-lower.flex-ce{
	width:1160px;
	margin:0 auto;
}
.solution-lower.flex-ce section{
	position: relative;
	text-align:left;
	width:570px;
	margin-right:20px;
	padding-bottom:6rem;
}
.solution-lower.flex-ce section:nth-child(2n){
	margin-right:0;
}
.solution-lower.flex-ce section > a{
	text-decoration:none;
}
.solution-lower.flex-ce section h3{
	color:#01579b;
	font-size:1.6rem;
	padding:2.4rem 0 2.0rem;
}
.solution-lower.flex-ce section p{
	color:#263238;
	font-weight:bold;
	font-size:2.2rem;
}

.solution-lower.flex-ce section .solution-img{
	position: relative;
	min-width: 100px;
}
.solution-lower.flex-ce section .solution-img img{
	display: block;
	width: 100%;
	height: auto;
}
.solution-lower.flex-ce section ul.tag-list{
	position: absolute;
	left: 20px;
	bottom: 20px;
	right: 20px;
	list-style-type: none;
	padding: 0;
	font-size: 1.5em;
	display: /*flex*/none;
	flex-wrap: wrap;
	max-width: 520px;
	pointer-events: none;
}

.solution-lower.flex-ce section ul.tag-list > li{
	display: inline-block;
  margin-right: 5px;
  margin-top: 5px;
	-webkit-transition: 1s;
	transition: 1s;
	pointer-events: all;
}
.solution-lower.flex-ce section ul.tag-list > li > a{
	box-sizing: border-box;
	display: block;
	justify-content: center;
	align-items: center;
	width: 100%;
	border: 1px solid transparent;
	color: #fff;
	background: #235497;
	text-decoration: none;
	font-size: 1.3rem;
	text-align: center;
	-webkit-transition: 1s;
	transition: 1s;
	border-radius: 5px;
	white-space: nowrap;
	padding: 0.8rem 1.4rem;
}

/* ------- 実例詳細ｰ ------- */

#solution-top .content-area01{
	height:425px;
	width:1160px;
	margin:0 auto;
	background:url() #474747 no-repeat center top;
	text-align:center;
	color:#fff;
	position: relative;
/*z-index:20;*/
}
#solution-top .content-area01.mansion-senrichuo,
#solution-top .content-area01.kosodate-hitachiota{
	height:500px;
}
#solution-top .content-area01.kyoto-daigaku{
	height:450px;
}
#solution-top a{
	color:#fff;
}
#solution-top .content-area01 ul.tag-list{
	position: absolute;
	z-index:3;
	top:20px;
	left:20px;
	display:none;
}
#solution-top .content-area01 ul.tag-list li{
	display:inline;
	padding-right:8px;
}
#solution-top .content-area01 ul.tag-list li a{
	display:inline-block;
	color:#fff;
	font-size:1.4rem;
	text-decoration:none;
	padding:0.8rem 1.4rem;
	text-align:center;
	background:#01579b;
	border-radius:5px;
}

.tomoya #solution-copy,
.shukubou #solution-copy{
	margin-top:4rem;
	margin-top: 40px;
}

#solution-top h1{
	display:inline-block;
	width:auto;
	font-weight:normal;
	color:#fff;
	font-size:2.2rem;
	letter-spacing:0.4rem;
	border:1px solid #fff;
	padding:1.2rem 4rem;
	margin-top:1.6rem;
	margin-top: 50px;
}
.main-copy{
	font-weight:bold;
	padding:2.8rem 0;
	font-size:4.0rem;
	padding: 22px 0;
}
.spec-txt{
	font-size:1.6rem;
	margin-bottom: 1.6rem;
	margin-bottom: 10px;
}

.solution-needs{
	font-weight:bold;
	padding:6.6rem 0;
	background:#edf0f5;
}
.sec-needs{
	border:2px solid #01579b;
	display:table;
	margin-bottom:5rem;
}
.sec-needs h2{
	display:table-cell;
	width:180px;
	font-size:2.2rem;
	color:#fff;
	background:#01579b;
	text-align:center;
	vertical-align:middle;
}
.sec-needs ul{
	display:table-cell;
	width:820px;
	padding:18px 26px;
	background:#fff;
}
.sec-needs ul li{
	text-indent:-1em;
	padding-left:1em;
	padding-bottom:1.8rem;
}

.ttl-solution {
	background:url(img/common/bg_arrow.png) no-repeat;
	height:60px;
	width:225px;
	overflow:hidden;
	display:flex;
	align-items:center;
	text-align:center;
	justify-content:center;
	color:#01579b;
	font-size:24px;
	margin-bottom:-30px;
	z-index: 30;
	 position:relative;
}
.ttl-solution span{
	display:inline-block;
}
.sec-solution ul{
	z-index: 20;
	color:#01579b;
	background:#dee5f1;
	padding:6rem 3.2rem 3.2rem;
}
.sec-solution ul li{
	text-indent:-1em;
	padding-left:1em;
	padding-bottom:1.8rem;
}
.solution-needs .egoda.ex-txt {
	font-size: 1.6rem;
	font-weight: normal;
	margin: 3.0rem 0 0;
}
.solution-figure{
	padding-top:100px;
}
.solution-figure p{
	text-align:center;
	color:#01579b;
	margin-bottom:20px;
	font-size:2.4rem;
	font-weight:bold;
}
.solution-figure figure{
	text-align:center;
	margin-bottom:100px;
}
.solution-result{
	padding:5.4rem 0;
	background:#edf0f5;
}
.solution-result.hotel-raysum, .solution-result.mansion-yamate{
	padding:0 0 5.4rem;
}
.sec-result{
	font-weight:bold;
	border:2px solid #df003d;
	display:table;
}

.sec-result h2{
	display:table-cell;
	width:180px;
	font-size:2.2rem;
	color:#fff;
	background:#df003d;
	text-align:center;
	vertical-align:middle;
}
.sec-result ul{
	display:table-cell;
	width:820px;
	padding:26px;
	background:#fff;
	color:#df003d;
}
.sec-result ul li{
	text-indent:-1em;
	padding-left:1em;
	padding-bottom:1.8rem;
}


.photo-img{
	margin-bottom:60px;
}
.photo-img figure{
	text-align:center;
}



.photo-list{
	margin-bottom:60px;
}

.photo-list.slick-slider{
	margin-bottom:60px;
}

.photo-list .slick-slide img {
	display:inline;
	margin-left:10px;
	margin-right:10px;
}
.photo-list .slick-prev,
.photo-list .slick-next {
	width: 55px;
	height: 55px;
	z-index:2;
	background:#01579b;
	border-radius:100px;
}
.photo-list .slick-prev:hover,
.photo-list .slick-next:hover{
	background:#01579b;
	opacity: 0.5;
}
.photo-list .slick-prev {
	left: -65px;
}
.photo-list .slick-next {
	right: -65px;
}
.photo-list .slick-prev:before {
	content: '';
	width: 12px;
	height: 12px;
	border: 0px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	-ms-transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	position: absolute;
	top: 36%;
	left: 40%;
}
.photo-list .slick-next:before {
	content: '';
	width: 12px;
	height: 12px;
	border: 0px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 36%;
	left: 32%;
}

.photo-list .slick-dots {
	bottom: -50px;
	height:10px;
}
.photo-list .slick-dots li {
	width: 10px;
	height: 10px;
	margin: 0 10px;
}
.photo-list .slick-dots li button {
	width: 10px;
	height: 10px;
	padding: 0;
}
.photo-list .slick-dots li button:before {
	width: 10px;
	height: 10px;
	content: '';
	background-color:#000;
	border-radius:100px;
	opacity: .25;
}
.photo-list .slick-dots li.slick-active button:before {
	opacity: .5;
}

.solution-detail-btn-wrap {
	margin: 3.0rem 0 0;
	text-align: center;
}

.solution-detail-btn-wrap .biz-cont__common__btn {
	 text-align: center;
	 text-decoration: none;
	 color:  #ffffff;
}

/* ------- モーダル ------- */
#overlay,
#modalArea {
	display: block;
	opacity: 0;
	position: fixed;
	z-index: -1;
	transition: all 0.2s;
}
#overlay {
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, .8);
	top: 0;
	left: 0;
}
#modalArea {
	width: 720px;
	height: 435px;
	padding: 20px;
	background-color: #edf0f5;
	opacity: 0;
	position: fixed;
	z-index: -1;
	transition: all 0.2s;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	box-sizing: content-box;
}
#modalArea img {
	text-align: center;
	width: 100%;
}
#modalArea::after{
	content:"×";
	position: absolute;
	right:0px;
	top:-70px;
	color:white;
	font-size:50px;
	font-weight: bold;
}


#overlay.active,
#modalArea.active {
	opacity: 1;
	z-index: 10000;
}
@media screen and (max-width: 767px) {
	#modalArea {
		width: calc((672/750)*100vw);
		height: calc((406/750)*100vw);
		padding: 20px;
	}
	.p-tag-group {
    width: 100% !important;
	}
  .p-search-results>.e-examples {
    width: 100% !important;
	}
}
@media screen and (min-width: 768px), print {
	.slick-slide {
		width: 500px;
	}
	.slick-slide img {
		width: calc(100% - 20px);
		max-width: calc(100% - 20px);
	}
	.p-tag-group {
		max-width: 1160px !important;
	}
	.p-search-results>.e-examples {
    max-width: 1160px !important;
	}
}