@charset "utf-8";
/*
=======================================
  spec 一覧
=======================================
*/

#spec{}

#spec .greeting{
    padding: 6rem 0 10rem;
}
@media screen and (max-width: 600px) {
#spec .greeting{
    padding: 4rem 0 5rem;
}
}
#spec .difficult{
	background:#f1f3f6;
	padding: 3rem 0;
}
@media screen and (max-width: 600px) {
#spec .difficult{
	padding-bottom: 1.5rem;
}
}

#spec .difficult .decoration_txt{
	margin-top: -8rem;
}
@media screen and (max-width: 600px) {
#spec .difficult .decoration_txt{
	width:140px;
}
}
#spec .design h3,
#spec .difficult h3{
    text-align: center;
    position: relative;
    margin-bottom: 4rem;
    font-family: 'Noto Serif JP', serif;
    font-size: 160%;
    font-weight: normal;
    letter-spacing: 0.2em;
}
@media screen and (max-width: 600px) {
#spec .design h3,
#spec .difficult h3{
    margin-bottom: 2.5rem;
	font-size: 130%;
}
}
#spec .design h3::after,
#spec .difficult h3::after {
  content: '';
  width: 150px;
  height: 3px;
  display: inline-block;
  background-color: #9fa0a0;
  position: absolute;
  bottom: -10px;
  left: calc(50% - 75px)
}
#spec .difficult ul{
  overflow:hidden;
}
#spec .difficult ul li{
  width:46%;
  margin-right:4%;
	margin-bottom:4rem;
  float:left;
	position:relative;
}
#spec .difficult ul li img{
	width:100%;
}
#spec .difficult ul li a{
	position:absolute;
	bottom:-1.5rem;
	right:-2%;
	background:#fff;
	padding:8px 70px 8px 50px;
    font-size: 150%;
    letter-spacing: 0.1em;
    font-family: 'Noto Serif JP', serif;
}
#spec .difficult ul li a::before{
	content: "";
    display: inline-block;
	position: absolute;
	right:20px;
	top:35%;
	height: 17px;
	width: 35px;
    background: url(../lib_img/arrow_right.png) no-repeat right;
    /*アニメーションの指定*/
    transition: all .3s;
}
#spec .difficult ul li a:hover::before{
	right:10px;
}
@media screen and (max-width: 600px) {
#spec .difficult ul li{
  width:46%;
  margin:0 2%;
	margin-bottom:3rem;
}
#spec .difficult ul li a{
	right:0;
	width:100%;
	padding:5px 0;
	text-align:center;
	font-size: 120%;
}
#spec .difficult ul li a::before{
	top:25%;
	right:10px;
}
}



#spec .design{
	padding-top: 6rem;
}
@media screen and (max-width: 600px) {
#spec .design{
	padding-top: 4rem;
}
}



/*
=======================================
  spec 詳細
=======================================
*/



#spec .greeting_details{
    padding: 5rem 0 2rem;
}
@media screen and (max-width: 600px) {
#spec .greeting_details{
    padding: 3rem 0 1rem;
}
}
#spec .contents{
	width:100%;
}
#spec .link{
	text-align:center;
	margin-top:5rem;
}
#spec .link a{
	padding:10px;
}
@media screen and (max-width: 600px) {
#spec .link{
	margin-top:3rem;
}
}


.comfortabl .inner_ss .spec_box{
	border:1px solid #d5d5d6;
	padding:1.5rem;
	overflow:hidden;
	margin-top:3rem;
	background:rgba(255,255,255,0.5);
}

.comfortabl .inner_ss .spec_box img{
	float:left;
	width:48%;
}
.comfortabl dl{
	float:right;
	width:48%;
}
.comfortabl dt{
    position: relative;
    margin-bottom: 1rem;
    font-family: 'Noto Serif JP', serif;
    font-size: 160%;
    font-weight: normal;
    letter-spacing: 0.1em;
	background:url(../lib_img/tl_sikaku.png) no-repeat left;
	padding-left:25px;
}
@media screen and (max-width: 600px) {
.comfortabl .inner_ss .spec_box img{
	width:100%;
}
.comfortabl dl{
	width:100%;
	margin-top:1rem;
}	
.comfortabl .inner_ss div{
	padding:1rem;
	margin-top:1rem;
}
}
.comfortabl dd{
	position:relative;
	font-size: 90%;
	line-height: 2;
}
.comfortabl dd:last-child{
	padding-bottom:20px;
}
.comfortabl a{
	color:#158028;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  white-space: nowrap;
}
.comfortabl a::before{
  content: "";
  display: inline-block;
  width: 1em;
  border-top: 2px solid;
  vertical-align: middle;
  margin-right: 1em;
  padding-bottom:4px;
	transition: all 0.5s 0s ease;
}
.comfortabl a:hover::before{
  margin-right: 0.5em;
  width: 1.5em;
}

/*
=======================================
  アンカー位置調整
=======================================
*/

#amenity01,
#amenity02,
#amenity03,
#amenity04,
#amenity05,
#amenity06,
#health01,
#health02,
#health03,
#health04,
#life01,
#life02,
#life03,
#life04,
#life05,
#economic01,
#economic02,
#economic03,
#economic04{
	margin-top:-100px;
	padding-top:100px;
}
@media screen and (max-width: 1160px) {
#amenity01,
#amenity02,
#amenity03,
#amenity04,
#amenity05,
#amenity06,
#health01,
#health02,
#health03,
#health04,
#life01,
#life02,
#life03,
#life04,
#life05,
#economic01,
#economic02,
#economic03,
#economic04{
	margin-top:-50px;
	padding-top:50px;
}
}