@charset "utf-8";

/* --------------------------------
   □ newconstruction
-------------------------------- */

ol#breadcrumbs {
	background-color: inherit;
}

/* sub header
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣*/
#sub-header{
	display: block;
	text-align:center;
	letter-spacing:0.1em;
	padding: 12px 0 12px;
	margin-bottom: 60px;
	background-color: #eae8dd;
	width: 100%; 
	height: auto;
	box-sizing: border-box;
}

#sub-header h3{
	display:block;
	margin: 0 auto;
}

#sub-header p.description{
	display: inline-block;
	font-size: 15px;
	text-align:center;
	position: relative;
}
#sub-header p.description:before{
	position: absolute;
	content: "";
	width: 200px;
	height: 336px;
	background: url("../../images/voice/voice-03.png") no-repeat;
	background-size: contain;
	bottom: -24px;
	left: -240px;
}

#sub-header p.description:after{
	position: absolute;
	content: "";
	width: 221px;
	height: 409px;
	background: url("../../images/voice/voice-02.png") no-repeat;
	background-size: contain;
	bottom: -24px;
	right: -221px;
}




@media screen and (max-width : 1050px) and (min-width : 768px){


	#sub-header p.description:before{
		display: none;
	}
	
	#sub-header p.description:after{
		display: none;
	}
	
	
	#sub-header p.description{
		font-size: 16px;
		text-align: left;
	}
}

@media screen and (max-width : 767px) {

	#sub-header p.description:before{
		display: none;
	}
	
	#sub-header p.description:after{
		display: none;
	}
	
	#sub-header{
		width: 100%;
		height: auto;
		padding: 20px 5%;
		box-sizing: border-box;
		margin-bottom: 40px;
	}
	
	#sub-header p.description{
		text-align: left;
	}

}

/* type navigation ****************************/
#sub-header .type-navigation{
	display:flex;
	justify-content:center;
}
#sub-header .type-navigation li{
	margin:0 8px;
	text-align:center;
}
#sub-header .type-navigation a{
	display:block;
	padding:20px 70px;
	color:#535353;
	background:#e6e6e6;
	text-decoration:underline;
}
#sub-header .type-navigation a:hover,
#sub-header .type-navigation .active a{
	background:#fff;
	text-decoration:none;
}


/* list 一覧表示
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣*/
.contents .list .area{
	margin-bottom: 50px;
}
.contents .list .area .line{
	position:relative;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom:15px;
	padding-top:11px;
	box-sizing: border-box;
}

.contents .list dl{
	position: relative;
    width: calc((100% - 30px * 2) / 3);
	height: auto;
    box-sizing: border-box;
}

		.contents .list dl.new::before{
            position: absolute;
            content: "";
            width: 73px;
            height: 73px;
            background: url("../../images/common/icon/new-tag.svg") no-repeat;
            top: 0;
            left: 0;
            z-index: 5;
        }

.contents .list dt{
	padding-bottom: 5px;
    background: url(../../../images/voice/bg-slash.gif) repeat top center;
	margin-bottom: 15px;
}
	.contents .list dt > a > img{
		width: 100%;
		height: auto;
		object-fit: contain;
	}

.contents .list dd{
	margin-bottom:15px;
	padding-left: 5px;
}

.contents .list dd.txt{
	font-size: 15px;
}

.contents .list dd.ado{
	font-size: 12px;
	color: #666;
}

@media only screen and (max-width : 767px) {

	.contents .list .area .line{
		position:relative;
		display: block;
		margin-bottom:15px;
		padding-top:11px;
		box-sizing: border-box;
	}
	
	.contents .list dl{
		position: relative;
		width: auto;
		max-width: 313px;
		height: auto;
		box-sizing: border-box;
		margin: 0 auto 32px;
	}
	
			.contents .list dl.new::before{
				position: absolute;
				content: "";
				width: 73px;
				height: 73px;
				background: url("../../images/common/icon/new-tag.svg") no-repeat;
				top: 0;
				left: 0;
				z-index: 5;
			}
	
	.contents .list dt{
		padding-bottom: 5px;
		background: url(../../../images/voice/bg-slash.gif) repeat top center;
		margin-bottom: 15px;
	}
	
		.contents .list dt > a > img{
			width: 100%;
			height: auto;
			object-fit: contain;
		}
	
	.contents .list dd{
		margin-bottom:8px;
	}
	
	.contents .list dd.txt{
		font-size: 15px;
	}


}
	


/* page navigation
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣*/
.page-navigation{
	margin-bottom:36px;
}
.page-navigation ol{
	display:flex;
	justify-content:center;
}

.page-navigation ol li{
	margin:0 5px;
}

.page-navigation ol a{
	display:block;
	padding:10px 14px;
	color:#535353;
	border:1px solid #ccc;
}
.page-navigation ol li.arrow a{
	display:block;
	padding:10px 14px;
	border:0;
}

.page-navigation ol a:hover{
	color:#fff;
	background:#be988d;
	text-decoration:none;
}
.page-navigation ol li.arrow a:hover{
	color:#be988d;
	background:none;
}


/*---------------------------------------------------
 Datails
---------------------------------------------------*/
.details .accent p.kv{
	text-align:center;
	margin: 0;
}
.details .accent p.kv img{
	width:100%;
}

.details .contents .main section{
	margin:70px 0;
}


.details section .area h3{
	margin-bottom:30px;
	font-size:200%;
	letter-spacing:0.1em;
}

.details section .area h3 span{
	display:block;
	margin-top: 15px;
}

.details .contents .main section .area{
	width:883px;
}

.details section#spec{
	background-color: #eae8dd;
	margin-top: -10px;
}

.details section#spec .area .txtleft{
	width:40%;
	float:left;
}

.details section .area .txtleft {
    width: 50%;
    float: left;
    margin-right: 5%;
}

.details section .area p.wideimg img{
	width:100%;
}

.details section .area p.img img{
}

.details section .area p.txt{
	margin: 30px 0;
	font-size: 1.5rem;
	line-height: 1.7;
}

.details section .area p.txt span.blue {
	color: #1ba0d7;
}

.details section .area p.txt span.pink {
	color: #e83776;
}
.details section#spec .area .txtleft dl{
	margin-left: 90px;
    padding: 71px 0;
}

.details section#spec .area .txtleft dl dt{
	font-size: 15px;
	font-weight:700;
	color:#623333;
	margin-bottom:5px;
}

.details section#spec .area .txtleft dl dd{
	font-size: 1.4rem;
}

.details section#spec .area .txtright{
	width: 60%;
    float: right;
    margin-right: -60px;
}

.details section#spec .area .txtright ul{
	overflow:hidden;
	margin-top:65px;
}

.details section#spec .area .txtright ul li{
	float:left;
	widows:198px;
	margin-right:15px;
}

.details section#spec .area div.right{
	width:50%;
}

.details section .area .rightbox{
	width:45%;
	float:right;
}

.details section .area .rightbox p.bottomimg{
	margin-top: 87px;
}

/*   comment   */
.details .contents .main section.comment {
	width: 1000px;
	margin: 0 auto 50px;
	box-sizing: border-box;
}

.details .contents .main section.comment p.bnr {
	float: left;
	width: 298px;
}

.details .contents .main section.comment .border{
	float: right;
	border:6px solid #ece8da;
	padding:20px;
	width: 623px;
}

.details .contents .main section.comment .border p.chara {
	float: left;
	width: 126px;
}

.details .contents .main section.comment .border dl.oneword {
	float: right;
	width: 457px;
}

.details .contents .main section.comment .border dl.oneword dd {
	color: #623333;
	font-size: 1.5rem;
	line-height: 1.8;
	margin-top: 25px;
	font-weight: bold;
}

@media only screen and (max-width : 767px) {
	
	.details .contents .main section {
		margin: 10px 0;
	}
	
	.details section#spec {
		height: auto;
		margin: 0;
	}
	
	.details section .area h3 span {
		margin-top: 5px;
	}
	
	.details section .area p.txt {
		margin: 20px 0;
	}
	
	.details .contents .main section .area {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		gap: 20px;
		padding: 30px 5%;
	}
	
	.details section#spec .area .txtleft,
	.details section#spec .area .txtright{
		width: 100%;
		float: inherit;
		margin: 0;
	}
	
	.details section#spec .area .txtleft dl {
		margin: 0;
		padding: 0;
	}
	
	.details section#spec .area .txtleft dl dt{
		text-align: center;
	}
	
	.details section#spec .area .txtright ul {
		overflow: inherit;
		margin-top: 0;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		flex-wrap: nowrap;
	}
	
	.details section .area .txtleft {
		width: 100%;
		float: inherit;
		margin: 0;
	}
	
	.details section#spec .area .txtright ul li{
		float: inherit;
		width: calc( 50% - 10px);
		margin: 0;
	}
	
	.details section#spec .area .txtright ul li img{
		width: 100%;
		height: auto;
		object-fit: contain;
		margin: 0;
	}

	.details section#spec .area div.right{
		width: 100%;
	}

	.details section .area .rightbox{
		width: 100%;
		float: inherit;
	}
	
	.left,.right{
		float:inherit;
		width: 100%;
	}
	
	.details section .area .rightbox .bottomimg,
	.details section .area .rightbox .bottomimg img,
	.details section .area .right .img,
	.details section .area .right .img img,
	.details section .area .txtleft .img,
	.details section .area .txtleft .img img{
		width: 100%;
		height: auto;
		object-fit: cover;
		margin: 0;
		padding: 0;
	}

	.details section .area .rightbox p.bottomimg{
		margin-top: 50px;
	}

	/*   comment   */
	.details .contents .main section.comment {
		width: 100%;
		margin: 0 auto 50px;
		height: auto;
		padding: 0 5%;
		box-sizing: border-box;
	}

	.details .contents .main section.comment p.bnr {
		float: inherit;
		width: 100%;
		max-width: 298px;
		margin: 0 auto 40px;
	}
	
		.details .contents .main section.comment p.bnr a img{
			width: 100%;
			
		}

	.details .contents .main section.comment .border{
		float: inherit;
		padding: 20px 0;
		width: calc(100% - 12px);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
	}

	.details .contents .main section.comment .border p.chara {
		float: inherit;
		width: auto;
		text-align: center;
	}

	.details .contents .main section.comment .border dl.oneword {
		float: inherit;
		width: auto;
		text-align: center;
		padding: 0 5%;
	}
	
	p.img > img{
		width: 100%;
		height: auto;
		object-fit: contain;
	}
	
	p.bottoming > img{
		width: 100%;
		height: auto;
		object-fit: contain;
	}
	
	section #comfort.area{
		flex-direction: column-reverse;
	}

}

/*---------------------------------------------------
 Datails2
---------------------------------------------------*/
.details .contents .main section .txtright{
	width:50%;
	float:right;
}
.details section .area .txtleft {
    width: 45%;
    float: left;
    margin-right: 5%;
}
#no2 #comfort .rightbox p.txt {
    margin-bottom: 78px;
}

@media only screen and (max-width : 767px) {
	
	.details .contents .main section .txtright{
		width:100%;
		float:inherit;
	}
	.details section .area .txtleft {
		width: 100%;
		float: inherit;
		margin-right: 0;
	}
	
	#no2 #comfort .rightbox p.txt {
		margin-bottom: 20px;
	}
}

/*---------------------------------------------------
 Datails3
---------------------------------------------------*/
#no3 .right{
	position:relative;
	margin-top: 70px;
}

/* DIRECTION CONTROLS (NEXT / PREV) */
.area .slide .bx-prev{
	left: -93px;
	background: url(../../../images/common/icon/arrow/circle-lt.png) no-repeat top left;
}

.area .slide .bx-next{
	right: -93px;
	background: url(../../../images/common/icon/arrow/circle-gt.png) no-repeat top left;
}

.area .slide .bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top: -34px;
	outline: 0;
	width: 67px;
	height: 67px;
	text-indent: -9999px;
	z-index: 500;
}
#no3 #kodawari .txtleft p.txt {
    margin-bottom: 39px;
}
#no3 #comfort .rightbox p.txt {
    margin-bottom: 77px;
}
#no3 #message .right {
    margin-top: 0;
}

@media only screen and (max-width : 767px) {
	
	#no3 .right{
		position:relative;
		margin-top: 0px;
	}

	.area .slide .bx-controls-direction a {
		position: absolute;
		top: 50%;
		margin-top: 0px;
		outline: 0;
		width: 67px;
		height: 67px;
		text-indent: -9999px;
		z-index: 500;
	}
	#no3 #kodawari .txtleft p.txt {
		margin-bottom: 20px;
	}
	#no3 #comfort .rightbox p.txt {
		margin-bottom: 20px;
	}
	#no3 #message .right {
		margin-top: 20px;
	}
}


/*---------------------------------------------------
 Datails5
---------------------------------------------------*/
#no5 #kodawari .right p.img {
    margin-top: 108px;
}
#no5 #kodawari .txtleft p.txt {
    margin-bottom: 124px;
}
#no5 #comfort .rightbox p.txt {
    margin-bottom: 70px;
}

@media only screen and (max-width : 767px) {
	
	#no5 #kodawari .right p.img {
		margin-top: 20px;
	}
	#no5 #kodawari .txtleft p.txt {
		margin-bottom: 20px;
	}
	#no5 #comfort .rightbox p.txt {
		margin-bottom: 20px;
	}
	
}

/*---------------------------------------------------
 Datails6
---------------------------------------------------*/

#no6 #kodawari{
	overflow: hidden;
    position: relative;
}


#no6 #kodawari .right{
    position: absolute;
    right: 0;
    bottom: 0;
}

#no6 #comfort p.txt{
	margin-bottom:60px;
}

@media only screen and (max-width : 767px) {

	#no6 #kodawari{
		overflow: hidden;
		position: relative;
	}

	#no6 #kodawari .right{
		position: static;
		width: 100%;
		height: auto;
	}

	#no6 #comfort p.txt{
		margin-bottom:20px;
	}
	
}

/*---------------------------------------------------
 Datails7
---------------------------------------------------*/
#no7 #spec .txtleft dl dd span{
	font-size: 80%;
}

#no7 #kodawari .txtleft{
	margin-bottom: 30px;
}

#no7 #kodawari p.txt {
    clear: both;
	margin-bottom: 45px;
}

@media only screen and (max-width : 767px) {
	
	#no7 #spec .txtleft dl dd span{
		font-size: 80%;
	}

	#no7 #kodawari .txtleft{
		margin-bottom: 20px;
	}

	#no7 #kodawari p.txt {
		clear: both;
		margin-bottom: 20px;
	}
	
	.details #no7 section .area p.txt {
		margin: 0;
	}
	
	#no7 section #comfort.area{
		flex-direction: column;
	}

}


/*---------------------------------------------------
 Datails8
---------------------------------------------------*/

#no8 #kodawari p.txt {
    clear: both;
}
#no8 #kodawari p.img{
	margin-bottom:30px;
}

#no8 #comfort .rightbox p.bottomimg{
	margin-top:55px;
}

@media only screen and (max-width : 767px) {
	
	#no8 #kodawari p.img{
		margin-bottom: 20px;
	}

	#no8 #comfort .rightbox p.bottomimg{
		margin-top: 20px;
	}
}

/*---------------------------------------------------
 Datails9
---------------------------------------------------*/

#no9 #kodawari p.txt {
    clear: both;
}
#no9 #kodawari .txtleft p.txt {
    margin-bottom: 121px;
}
#no9 #kodawari .txtleft p.wideimg {
    margin-bottom: 30px;
}
#no9 #kodawari .right p.img{
	margin-top: 120px;
}

@media only screen and (max-width : 767px) {
	
	#no9 section #comfort.area{
		flex-direction: column;
	}
	
	#no9 #kodawari .txtleft p.txt {
		margin-bottom: 20px;
	}
	#no9 #kodawari .txtleft p.wideimg {
		margin-bottom: 20px;
	}
	#no9 #kodawari .right p.img{
		margin-top: 0px;
	}
}

/*---------------------------------------------------
 Datails10
---------------------------------------------------*/

#no10 #kodawari p.txt {
    clear: both;
	margin: 10px 0;
}

@media only screen and (max-width : 767px) {
	
	#no10 section #comfort.area{
		flex-direction: column;
	}	
}

/* bx pager ****************/
#bx-pager{
	position:relative;
	margin-top:20px;
	margin-left:-10px;
	zoom:1;
	overflow:hidden;
}

#bx-pager li{
	float:left;
	display:inline;
	margin-left:9px;
	background:#fff;
}

#bx-pager li a{
	overflow: hidden;
	float: left;
}

#bx-pager li a:hover img{
	filter:alpha(opacity=80);
    -ms-filter: "alpha(opacity=80)";
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
    opacity: 0.8;
}

#bx-pager li a.active{
	border: 4px solid #f2ca5b;
}
#bx-pager li a.active img{
	margin: -4px;
}




/* pagenation
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣*/
.contents .main .pagenation{
	position:relative;
	margin-bottom:30px;
	padding:20px 0;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}

.contents .main .pagenation p{
	position:relative;
	margin:0;
	text-align:center;
}

.pagenation ul{
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
.pagenation ul li{
	position:absolute;
	width:40%;
	top:25px;
	z-index:100;
}

.pagenation ul li a{
	display:inline-block;
}

.pagenation ul li.back{
	left:0;
}
.pagenation ul li.back a{
	padding-left:16px;
	background:url(../../../images/common/icon/arrow/lt.png) no-repeat center left;
}
.pagenation ul li.next{
	right:0;
	text-align:right;
}
.pagenation ul li.next a{
	padding-right:16px;
	background:url(../../../images/common/icon/arrow/gt.png) no-repeat center right;
}

/* voiceBnr
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣*/
p#voiceBnr{
	margin-bottom:80px;
}

.contents .neon dl{
	margin-left:15px;
}
.contents .list .area .neon {
    zoom: 1;
    position: relative;
    margin-left:0;
    margin-bottom: 15px;
    padding-top: 11px;
    overflow: hidden;
}

@media only screen and (max-width : 767px) {
	
	.contents .main .pagenation{
		height: auto;
	}

	.pagenation ul{
		display: none;
	}
	
}