@charset "utf-8";

.area p.txt {
    line-height: 2.0;
}

/*---------------------------------------------------
 Datails
---------------------------------------------------*/
.details .accent p.kv{
	text-align:center;
    margin-bottom: 0;
}
.details .accent p.kv img{
	width:100%;
}
.details .contents .main section{
	margin:70px 0;
}
.details .contents .main section .area{
	width:840px;
}
.details .contents .main section.voicecontents .area{
    overflow: hidden;
}

/* spec
------------------------------*/
.details section#spec{
	background-color: #eae8dd;
    margin-top: 0;
    padding: 38px 0;
}
.details section#spec .area {
    background-color: #eae8dd;
    padding: 25px 25px 25px 45px;
    box-sizing: border-box;
    position: relative;
    display: table;
}

.details section#spec .area .txtleft{
	width:350px;
	display: table-cell;
    vertical-align: top;
}
    .details section#spec .area .txtleft dl dt{
        font-size:16px;
        font-weight:bold;
        color:#623333;
        margin-bottom:15px;
    }
    .details section#spec .area .txtleft dl dd{
        font-size:1.5rem;
    }
.details section#spec .area .txtright{
	width: 410px;
	display: table-cell;
}
    .details section#spec .area .txtright ul{
        overflow:hidden;
    }
    .details section#spec .area .txtright ul li{
        float:left;
        width:198px;
        margin-right:14px;
    }
    .details section#spec .area .txtright ul li:last-child{
        margin-right:0;
    }


/* voicecontents
------------------------------*/
.details section.voicecontents .area .txtleft,
.details section.voicecontents .area .txtright {
    width: 46%;
}
.details section.voicecontents .area .txtleft{
	float:left;
}

.details section.voicecontents .area .txtright{
	float:right;
}
.details section.voicecontents .area {
    margin-bottom: 40px;
}
.details section.voicecontents .area .right{
    margin: 0 0 35px 50px;
}
.details section.voicecontents .area:last-child {
    margin-bottom: 0;
    overflow: hidden;
}
.details section.voicecontents .area h3{
	margin-bottom:30px;
	font-size:200%;
	letter-spacing:0.1em;
}

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

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


.details section.voicecontents .area p.txt{
	font-size: 1.5rem;
}

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

.details section .area p.txt span.pink {
	color: #e83776;
}

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

.details section .area p.txtspace span.pink {
	color: #e83776;
}


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

.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: 14px;
	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;
		padding: 0;
	}
	
	.details section.voicecontents .area h3 {
		margin-bottom: 0px;
	}
	
	.details section .area h3 span {
		margin-top: 5px;
	}
	
	.details section .area p.txt {
		margin: 20px 0;
	}
	
	.details .contents .main section .area,
	.details section#spec .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: 289px;
		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%;
	}
	
	.details section.voicecontents .area .txtleft, 
	.details section.voicecontents .area .txtright {
		float: inherit;
		width: 100%;
	}
	
	.details section.voicecontents .area .right {
		margin: 0;
	}
	
	.details .contents .main section #q4.area{
		flex-direction: column-reverse;
	}
	
	.details .contents .main section#no11SectionImage .area{
		padding: 0 5%;
		margin: 0;
	}
	
	.details .contents .main section .area.noFlex,
	.details .contents .main section div.area > .area.noFlex,
	.details .contents .main section#no11SectionImage div.area > .area.noFlex{
		padding: 0;
		margin: 0;
		width: 100%;
		height: auto;
	}
	
	.details section.voicecontents .area p.img,
	.details section.voicecontents .area p.img > img,
	.details section.voicecontents .area p.bottomimg,
	.details section.voicecontents .area p.bottomimg > img,
	.details section.voicecontents .area ul li,
	.details section.voicecontents .area ul li > img{
		width: 100%;
		height: auto;
		object-fit: scale-down;
	}
}


/* pagenation
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣*/
.contents .main .pagenation{
	position:relative;
	margin-bottom:80px;
	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:18px;
	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:18px;
	background:url(../../../images/common/icon/arrow/gt.png) no-repeat center right;
}

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

	.pagenation ul{
		display: none;
	}
	
}

/*
  個別指定
---------------------------------------------------------- */

/* no12
====================== */

.no12 #comfort p.bottomimg{
	margin-top:23px;
	margin-bottom:0;
}

#no12 #kodawari p.txtspace{
	margin-top:50px;
	font-size:1.5rem;
	line-height:2.0;
}

@media only screen and (max-width : 767px) {
	
	.no12 #comfort p.bottomimg{
		margin-top:23px;
		margin-bottom:0;
	}

	#no12 #kodawari p.txtspace{
		margin-top:50px;
		font-size:1.5rem;
		line-height:2.0;
	}
}


/* no13
====================== */

#no13 #kodawari p.bottomimg{
	margin-top:93px;
	margin-bottom:0;
}

#no13 #kodawari p.imgspace{
	margin-top:0;
	margin-bottom:40px;
}

#no13 #kodawari .txtleft p.txtspace{
	margin-top:20px;
	font-size:1.5rem;
	line-height:2.0;
}

#no13 #comfort .area .txtright p.bottomimg{
	margin-top: 87px;
}

@media only screen and (max-width : 767px) {
	
	#no13 #kodawari p.bottomimg{
		margin-top: 0px;
		margin-bottom: 20px;
	}

	#no13 #kodawari p.imgspace{
		margin-top: 0;
		margin-bottom: 20px;
	}

	#no13 #kodawari .txtleft p.txtspace{
		margin-top: 0px;
		font-size: 14px;
		line-height: 2.0;
	}

	#no13 #comfort .area .txtright p.bottomimg{
		margin-top: 0px;
	}
	
}


/* no14
====================== */

#no14 #kodawari .area ul li.imgleft{
	float: left;
	margin:30px 20px 30px 0;
}

#no14 #kodawari .area ul li.imgright{
	float:right;
	margin:30px 0 30px 20px;
}

#no14 #kodawari .area .txtleft p.bottomimg{
	margin-top:28px;
}

@media only screen and (max-width : 767px) {
	
	#no14 #kodawari .area ul li.imgleft{
		float: inherit;
		margin: 0;
	}

	#no14 #kodawari .area ul li.imgright{
		float: inherit;
		margin: 0;
	}

	#no14 #kodawari .area .txtleft p.bottomimg{
		margin-top: 20px;
	}
}

/* no15
====================== */

#no15 section.voicecontents .area#reason .right,
#no15 section.voicecontents .area#reason .right p.img{
    margin-bottom: 0;
}

#no15 #kodawari p.txt,
#no15 #kodawari p.img{
    margin-bottom: 25px;
}

#no15 #kodawari .area ul{
    overflow: hidden;
    margin-bottom: 25px;
}

#no15 #kodawari .area ul li{
    width: 400px;
    float: left;
    margin-right: 40px;
}

#no15 #kodawari .area ul li:last-child{
    margin-right: 0;
}

#no15 #kodawari .area .txtleft p.bottomimg{
	margin-top:28px;
}

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

	#no15 #kodawari p.txt,
	#no15 #kodawari p.img{
		margin-bottom: 20px;
	}

	#no15 #kodawari .area ul{
		overflow: hidden;
		margin-bottom: 20px;
	}

	#no15 #kodawari .area ul li{
		width: 100%;
		float: inherit;
		margin-right: 0px;
	}

	#no15 #kodawari .area .txtleft p.bottomimg{
		margin-top: 20px;
	}

}

/* no16
====================== */

#no16 .voicecontents .area{
    overflow: hidden;
    position: relative;
}

#no16 .area p.txt{
    line-height: 2.0;
}

#no16 #kodawari .right p.img{
    position: absolute;
    right: 0;
    bottom: 0;
}

#no16 #comfort p.bottomimg{
    position: absolute;
    bottom: 0;
    right: 0;
}

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

	#no16 #kodawari .right p.img{
		position: static;
	}

	#no16 #comfort p.bottomimg{
		position: static;
	}
}



/* no17
====================== */

#no17 #kodawari .area{
	position: relative;
}

#no17 #kodawari .txtright{
    float: right;
    width: 46%;
    overflow: hidden;
}

#no17 #kodawari p.bottomimg{
	position: absolute;
    right: 0;
    bottom: 0;
}

@media only screen and (max-width : 767px) {
	
	 .details .contents #no17.main section #reason.area{
		flex-direction: column-reverse;
	}
	
	#no17 #kodawari .area{
		position: relative;
	}

	#no17 #kodawari .txtright{
		float: inherit;
		width: 100%;
		overflow: hidden;
	}

	#no17 #kodawari p.bottomimg{
		position: static;
		right: 0;
		bottom: 0;
	}
}

/* no18
====================== */

#no18 .area{
	overflow: hidden;
}

#no18 #kodawari.area{
	position: relative;
    overflow: hidden;
}

#no18 #kodawari .txtright{
    float: right;
    width: 46%;
    overflow: hidden;
}

#no18 #kodawari p.bottomimg{
    position: absolute;
    bottom: 0;
    right: 0;
}

@media only screen and (max-width : 767px) {
	
	.details .contents .main section #kodawari.area{
		margin: 0;
		padding: 30px 5% 0;
	}

	#no18 #kodawari .txtright{
		float: inherit;
		width: 100%;
		overflow: hidden;
	}

	#no18 #kodawari p.bottomimg{
		position: static;
	}
}

/* no19
====================== */

#no19 .area{
	overflow: hidden;
	position: relative;
}

#no19 #kodawari p.bottomimg{
    position: absolute;
    bottom: 0;
    right: 0;
}

@media only screen and (max-width : 767px) {
	
	#no19 #kodawari p.bottomimg{
		position: static;
	}
	
}

/* no20
====================== */

@media only screen and (max-width : 767px) {
	
	.details .contents #no20.main section .area.noFlex{
		padding: 0;
		margin: 0;
		width: 100%;
		align-items: flex-start;
	}
	
}