@charset "UTF-8";


/******************************************************
 container
******************************************************/
.dsnBgTxtr {
	width: 100%;
	padding: 0 0 120px;
	background-color: #c5b7a6;
	background-image: url(/content/dam/31sumai/mfr/X2319/asset/img/design/dsnBgImg.jpg);
	background-repeat: repeat-x;
	background-position: center top;
	background-size: cover;
}
.dsnCgCtnr {
	width: 100%;
	margin-bottom: 70px;
}
.dsnCgCtnr img {
	width: 100%;
}
.dsnMtrlCtnr {
	width: 832px;
	margin: 0 auto;
}
@media screen and (max-width: 768px){
	.dsnBgTxtr {
		padding: 0 0 60px;
	}
	.dsnCgCtnr {
		margin-bottom: 40px;
	}
	.dsnMtrlCtnr {
		width: 100%;
	}
}

#dsnEnt .contentsColor03 {
	padding: 60px 0 80px;
}
#dsnEnt .contentsColor03 .flexBox {
	padding-top: 50px;
}
#dsnEnt .contentsColor03 .contentsTtlSub2 {
	margin-bottom: 0;
}
#dsnEnt .flexBox .contentsTtlSubBdy {
    font-size: 20px;
    line-height: 1.6em;
    text-align: justify;
}
@media screen and (max-width: 768px){
	#dsnEnt .contentsColor03 {
		padding: 50px 0 60px;
	}
	#dsnEnt .contentsColor03 .flexBox {
		padding-top: 20px;
	}
	#dsnEnt .contentsColor03 .flexBox .bx2 {
		width: 100%;
	}
	#dsnEnt .contentsColor03 .contentsTtlSub2 {
		margin-bottom: 0;
	}
	#dsnEnt .flexBox .contentsTtlSubBdy {
		font-size: 3.8vw;
		line-height: 1.4em;
	}
}

.dsnWallCtnr {
	width: 900px;
	border: 1px solid #939190;
	margin: 0 auto 100px;
}
.dsnWallCtnr .imgCapOutside {
	margin-right: 10px;
}
.dsnWallCtnr .inner {
	width: 860px;
	margin: 0 auto;
	padding: 40px 0 60px;
}
.dsnWallCtnr .txtBdy {
    font-size: 17px;
    line-height: 2.2em;
    text-align: center;
}
@media screen and (max-width: 768px){
	.dsnWallCtnr {
		width: 100%;
		margin: 0 auto 70px;
	}
	.dsnWallCtnr .inner {
		width: 90%;
		padding: 20px 0 40px;
	}
	.dsnWallCtnr .txtBdy {
		font-size: 3.6vw;
		line-height: 1.8em;
		text-align: justify;
	}
}




/******************************************************
 ARCHITECTURAL DESIGNER
******************************************************/
#dsnDsnr .contentsColor03 {
	padding: 80px 0;
}
#dsnDsnr .logo {
	width: 420px;
	margin: 0 auto 60px;
}
@media screen and (max-width: 768px){
	#dsnDsnr .contentsColor03 {
		padding: 50px 0;
	}
	#dsnDsnr .logo {
		width: 100%;
		margin: 0 auto 40px;
	}
}



/* =====================================================
DESIGNER
===================================================== */
.designerArea {
	width: 1000px;
	margin: 0 auto 80px;
	padding: 30px 30px 0;
	background: #fff;
}
.designerNav {
	display:flex;
}
.designerBtn {
	position: relative;
	width: 33.333%;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	overflow: hidden;
	border-bottom: 6px solid transparent;
	transition: .3s ease;
}
.designerBtn img {
	width: 100%;
	height: 620px;
	object-fit: cover;
	display: block;
}
.designerBtn::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.75);
	transition: .3s ease;
}
.designerBtn:hover::after,
.designerBtn.active::after{
	background: rgba(0,0,0,.15);
}
@media screen and (max-width:768px){
	.designerArea {
		width: 90%;
		margin-bottom: 60px;
		padding: 0;
	}
	.designerBtn img {
		height: 45vw;
	}
}

.designerName {
	position: absolute;
	right: 30px;
	bottom: 30px;
	color: #fff;
	font-size: 38px;
	line-height: 1.2em;
	text-align: right;
	font-family: "Cormorant Garamond", serif;
	letter-spacing: 0.08em;
	z-index: 2;
	white-space: nowrap;
}
.designerNav {
	position: relative;
	display: flex;
	padding-bottom: 10px;
}
.designerLine {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 33.333%;
	height: 6px;
	background: #222;
	transition:.35s ease;
}
@media screen and (max-width:768px){
	.designerName {
		right: 15px;
		bottom: 15px;
		font-size: 4.6vw;
	}
}


/* =====================================================
CONTENTS
===================================================== */
.designerContents {
	position: relative;
	min-height: 250px;
}
.designerContent {
	position: absolute;
	left: 20px;
	top: 0;
	width: 900px;
	padding: 30px 0 20px;
	opacity: 0;
	visibility: hidden;
	transition: .4s ease;
}
.designerContent.active {
	opacity: 1;
	visibility: visible;
}
@keyframes designerFade{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.designerContent h5 {
	font-size: 26px;
	font-weight: normal;
	margin-bottom: 20px;
}
.designerContent h5 span {
	font-size: 60%;
}
.designerContent p {
	font-size: 16px;
	line-height: 1.4em;
	text-align: justify;
}
@media screen and (max-width:768px){
	.designerContents {
		min-height: 230px;
	}
	.designerContent {
		left: 5%;
		top: 0;
		width: 90%;
		padding: 20px 0 30px;
	}
	.designerContent h5 {
		font-size: 5vw;
	}
	.designerContent p {
		font-size: 3.2vw;
	}
}




/******************************************************
 WORKS / Image GALLERY
******************************************************/
.designerSlide {
	width: 100%;
	margin: 0 auto;
	padding: 20px 0 60px;
}
.designerSwiper {
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
}
.designerSwiper .swiper-slide {
	position: relative;
	text-align: center;
}
.designerSwiper .swiper-slide img {
	display: block;
	width: 100%;
	height: auto;
}
.designerPagination {
	margin-top: 20px;
	text-align: center;
}
/* 非アクティブ */
.designerPagination .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	border-radius: 0;
	background: #c2c2c2;
	opacity: 1;
	margin: 0 4px;
}

/* アクティブ */
.designerPagination .swiper-pagination-bullet-active {
	background: #8f8578;
}

@media screen and (max-width:768px){
	.designerSlide {
		padding: 20px 0 0;
	}
	.designerSwiper {
		width: 96%;
	}
	.designerPagination {
		margin-top: 15px;
	}
	.designerPagination .swiper-pagination-bullet {
		width: 10px;
		height: 10px;
	}
}