@charset "utf-8";
/* CSS Document */



/*　detail
-------------------------------------------------*/
h2.detail{
    padding: 5px 0 5px 10px;
    font-size: 24px;
    line-height: 1em;
    margin: 0px 0px 20px;
    position: relative;
    border-bottom: 3px solid #d7092f;
}
h3.detail{
    font-size: 20px;
    margin-top: -10px;
}
h4.detail{
    /*font-size: 20px;*/
    font-size: 16px;
    margin: 0 0 20px;
}

.new-mark{vertical-align: middle;display: inline-block; background-color: #d7092f; color: #fff; font-size: 20px; padding: 0 20px; margin-right: 10px;}

h2.detail .icon-front{position: absolute; top:12px; right:40px; width: 30px;}
h2.detail .icon-favorite{position: absolute; top:12px; right:0; width: 30px;}
h2.detail .kensu{position: absolute; top:10px; right:180px; width: 60px; font-size: 18px; color:#999;}
h2.detail .btn-search{position: absolute; top:-13px; right:0;}
h2.detail img{width: 100%; height: auto;}

h2.detail .btn-search .button {
  display : inline-block;
  border-radius : 5px; 
  font-size     : 16px;
  cursor        : pointer; 
  /*padding       : 12px 45px 12px 20px;*/
  padding:12px 25px 12px 10px;
  background: linear-gradient(to bottom, #eee, #ccc);
  /*background    : #eee; */
  color         : #000000; 
  line-height   : 1em; 
  border        : 1px solid #999999;
  color: #999;
  font-weight: bold;
  position: relative;
  width:150px;
  right:30px;
}
h2.detail .btn-search .button:after{content: "\f054"; font-family: FontAwesome; position: absolute; bottom: 12px; right:5px;/*right:20px;*/}



h2.detail .btn-search .button:hover {
  color         : #fff;     /* 背景色     */
  background    : #d7092f;     /* 文字色     */
  border        : 1px solid #d7092f; 
}

.detail-ttl{vertical-align: middle;display: inline-block;}
#detail .txtbox{margin: 30px 0;}
#detail .txtboxCatch{margin: 30px 0;border:#AAAAAA 1px solid;padding:20px;}
#detail .btn-kuushitsu{text-align: center; margin: 20px 0 40px;}

#detail .photo-box{float: left; width: 68%;}
#detail .photo-box .mainphoto{position: relative;}
#detail .photo-box .thumbnail{}

ul.thumbnail-photo{margin: 20px 50px; padding: 0;display:flex;flex-wrap:wrap; position: relative;}
ul.thumbnail-photo li{
    width: 19%;
    margin:0 1% 10px 0;    
    list-style: none;
    position: relative;
}    
ul.thumbnail-photo li:nth-child(5n){margin-right: 0;}
ul.thumbnail-photo li img{width: 100%; height: auto; border: 1px solid #efefef;}

#detail .photo-box .mainphoto img, #detail .photo-box .thumbnail img{width: 100%; height: auto;}
#detail .photo-box .mainphoto .shisetsu-name{position: absolute;bottom: 0px; left: 0px; color: #fff; font-size: 20px; z-index: 999;}

#detail .photo-box .mainphoto:after{
content: "";
position: absolute; left: 0px; top: 0px;
display: block;
background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0,0, 0.5) 80%, rgba(0, 0, 0, 0.7) 90%);
}
/* 縦横を外枠に合わせる */
#detail .photo-box .mainphoto:after{width: 100%;height: 100%;}
#detail .detail-box{float: right; width: 28%; /*margin-top: 150px;*/}
#detail .detail-box ul.type1{margin: 0px 0 0; padding: 0;}
#detail .detail-box ul.type1 li{list-style: none; padding: 10px 0; border-bottom: 1px #ccc solid;}
#detail .detail-box ul.type2{margin: 10px 0; padding: 0px 2px;}
#detail .detail-box ul.type2 li{list-style: none; margin: 4px 3px 3px 0; float: left; width: 68px;}
#detail .detail-box ul.type2 li:nth-child(4n){margin-right: 0; width: 68px;}
#detail .detail-box ul.type2 li img{width: 100%; height: 70px; overflow: hidden; -webkit-backface-visibility: hidden;}
#detail .detail-box .icon-box{float: left; width: 7%;}
#detail .detail-box .txt-box{line-height: 1.3em; font-size: 14px;}
#detail .detail-box .icon-box img{width: 100%; height: auto;}

#detail .detail-box .site-link{vertical-align: middle;display: inline-block; margin-right: 10px;}
#detail .detail-box .pamphlet-pdf{vertical-align: middle;display: inline-block;}
#detail .detail-box .icon-box2{width: 20px;vertical-align: middle;display: inline-block;}
#detail .detail-box .txt-box2{line-height: 1em; font-size: 13px;vertical-align: middle;display: inline-block;}
#detail .detail-box .txt-box2 a:hover{text-decoration: underline;}
#detail .detail-box .icon-box2 img{width: 100%; height: auto;}
#detail .detail-box .panorama-btn{vertical-align: middle;display: inline-block; width: 48%; margin-right: 4%}
#detail .detail-box .map-btn{vertical-align: middle;display: inline-block;width: 48%;}
#detail .detail-box .panorama-btn img,#detail .detail-box .map-btn img{width: 100%; height: auto;}
#detail .detail-box a:hover img {opacity: 0.7; filter: alpha(opacity=60); -ms-filter: "alpha(opacity=60)";}


table.detail{border-top: #AAAAAA 1px solid; border-left: #AAAAAA 1px solid;border-collapse: separate; border-spacing: 0;}
table.detail th{border-bottom: #AAAAAA 1px solid; border-right: #AAAAAA 1px solid; border-collapse: collapse; padding: 5px 20px; background-color:#d0d0d0;text-align: center;}
table.detail td{border-bottom: #AAAAAA 1px solid; border-right: #AAAAAA 1px solid; border-collapse: collapse; padding: 5px 13px; position: relative;}
table.detail td.td-btn{padding-right: 200px;}
table.detail .room-no{display: inline-block;middle;display: inline-block;font-weight: bold; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);}
table.detail .icon-camera{color:#d7092f; font-size: 26px; display: inline-block;vertical-align: middle;display: inline-block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%);}
table.detail .icon-camera-gray{color:#808080; font-size: 26px; display: inline-block;vertical-align: middle;display: inline-block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%);}
table.detail .kakaku1{display: inline-block;middle;display: inline-block; font-weight: bold;margin-right: 10px; color:#d7092f;}
table.detail .kakaku2{display: inline-block;middle;display: inline-block; font-weight: bold;margin-right: 30px;}
table.detail .kakaku3{display: inline-block;middle;display: inline-block; font-weight: bold;}
table.detail .btn-box{vertical-align: middle;display: inline-block; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
table.detai_sub td{
    border-bottom:0px;
    border-right:0px;
    text-align: right;
    padding:0;
}

#detai-init-costs{
    padding:10px 50px 10px 10px;
}

#detai-init-cost{
    padding:10px 60px 10px 10px;
}

#detail ul.service{margin: 0; padding: 0;}
#detail ul.service li{float: left; width: 115px; /*margin-right: 10px;*/ list-style: none;}
#detail ul.service li:last-child{margin-right: 0;}
#detail ul.service li .service-icon{
    text-align: center;
    /*background-color: #F0F0F0;*/
    /*border-bottom: 2px solid #fff;*/
    /*border-top-left-radius: 5px;*/
    /*border-top-right-radius: 5px;*/
    /*padding: 10px 0;*/
}
#detail ul.service li .service-name{
    text-align: center;
/*
    background-color: #F0F0F0;
    border-bottom: 2px solid #fff;
    border-bottom-left-radius: 5px;
    border-botoom-right-radius: 5px;
    padding: 15px;
    line-height: 1.3em;
    font-weight: bold;
*/
    padding: 2px;
}


#detail ul.tokucho{margin: 0; padding: 0;}
#detail ul.tokucho li{float: left; width: 49%; margin-right: 2%; list-style: none;}
#detail ul.tokucho li:last-child{float: right; margin-right:0;}
#detail ul.tokucho li img{width: 100%; height: auto;}

#detail .g-map{width: 100%; height: 500px; margin-bottom: 80px;}


/*お客様の声
---------------------------------------------------*/
ul.uservoice{margin: 0; padding: 0;display:flex;flex-wrap:wrap; position: relative;}

ul.uservoice li{
    width: 32%;
    margin:0 2% 10px 0;
    padding-bottom: 20px;
    border: 1px solid #efefef;
    box-shadow: 1px 0 5px 1px #ddd;
    background-color: #fff;
    list-style: none;
    position: relative;
}
    
ul.uservoice li:nth-child(3n){margin-right: 0;}
ul.uservoice li .photo{}
ul.uservoice li .photo img{width: 100%; height: auto;}
ul.uservoice li .ttl{font-weight: bold;line-height: 1.2em;margin: 20px 10px 10px 10px;font-size: 18px;}
ul.uservoice li .name{font-weight: bold;font-size: 16px;line-height: 1.2em;margin: 0 10px;}
ul.uservoice li .plan-icon{vertical-align: middle;display: inline-block;margin:15px 0 10px 10px;}
ul.uservoice li .plan-icon img{height: 30px; width: auto;}
ul.uservoice li .plan{vertical-align: middle;display: inline-block;margin:15px 0 10px 10px; font-size: 13px}
ul.uservoice li .txt-scroll{height: 250px; overflow: auto; padding: 10px;}


/*button
--------------------------------------*/
.uchiwake_btn_rental {
//  width: 100%;
    margin: 0 auto;
//  padding: 0.8em 1.0em;
    padding: 0.5em 0.5em;
//  display: inline-block;
    display: block;
    text-decoration: none;
    color: white;
    background: #AA9448;
    transition: .4s;
    text-align: center;
    border-radius: 5px;
    font-size: 16px;
    line-height: 16px;
}

.uchiwake_btn {
    width: 100%;
    margin: 0 auto;
    padding: 0.8em 0.8em;
    display: block;
    text-decoration: none;
    color: white;
    background: #AA9448;
    transition: .4s;
    text-align: center;
    border-radius: 5px;
    font-size: 16px;
    line-height: 16px;
}
.uchiwake_btn:hover {
    background-color: rgba(170,148,72,0.70);
}

.uchiwake_btn1 {
    width: 100%;
    margin: 0 auto;
    padding: 0.8em 1.0em;
    display: block;
    text-decoration: none;
    color: white;
    background: #AA9448;
    transition: .4s;
    text-align: center;
    border-radius: 5px;
    font-size: 16px;
    line-height: 16px;
}
.uchiwake_btn1:hover {
    background-color: rgba(170,148,72,0.70);
}

.kuushitsu_more_btn {
    color: #d7092f;
    font-size: 18px;
    font-weight: bold;}
    
    
.kuushitsu_more_btn:hover {color: rgba(215,9,47,0.70);}



/* タブメニュー
-------------------------------------------*/
 /* タブの外枠 */
.plan-tab {}
 
/* タブのスタイル */
.plan-tab .tab-label {
  display: inline-block;
  background-color: #E4E4E4;
  padding: 5px 10px;
  text-align: center;
  width: 251px;
  height: 76px;
  vertical-align: top;
  line-height: 68px;
  font-weight: bold;
  color: #555;
}

.plan-tab .bg01,
.plan-tab .bg02,
.plan-tab .bg03{
    background-repeat: no-repeat;
    background-position: top 10px left 25px;
    text-align: left;
    padding-left: 80px;
}

.plan-tab .bg01{
    background-image: url("../img/ro_gray.png");
    background-size: 50px;
}
.plan-tab .bg02{
    background-image: url("../img/so_gray.png");
    background-size: 50px;
}
.plan-tab .bg03{
    background-image: url("../img/vo_gray.png");
    background-size: 50px;
}
 
/* タブにマウスカーソルがのったときフッター */
.plan-tab .tab-label:hover {
  color: #d7092f;
}
 
/* ラジオボタンと内容を非表示 */
.plan-tab input[name="tab-radio"],
.plan-tab .tab-content {
  display: none;
}
 
/* タブ内容のスタイル */
.plan-tab .tab-content{}

.plan-tab .plan-type-icon{vertical-align: middle;display: inline-block;}
.plan-tab .plan-type-name{vertical-align: middle;display: inline-block;}
 
/* 選択されているタブのコンテンツのみを表示 */
.plan-tab #tab-1:checked ~ .tab-1-content, .plan-tab #tab-2:checked ~ .tab-2-content, .plan-tab #tab-3:checked ~ .tab-3-content, .plan-tab #tab-4:checked ~ .tab-4-content
{ display: block;}
 
/* 選択されているタブのスタイルを変える */
.plan-tab input[name="tab-radio"]:checked + .tab-label {
 	position: relative;
	display: inline-block;
	padding: 5px 10px;
	min-width: 120px;
 	max-width: 100%;
    height: 86px;
    line-height: 68px;
 	color: #fff;
	font-size: 16px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.tabs input[name="tab-radio"]:checked + .tab-label:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -8px;
	border: 8px solid transparent;
	border-top: 8px solid #d7092f;
}

.plan-tab input[name="tab-radio"]:checked + .bg01,
.plan-tab input[name="tab-radio"]:checked + .bg02,
.plan-tab input[name="tab-radio"]:checked + .bg03{
    background-repeat: no-repeat;
    background-position: top 10px left 25px;
    text-align: left;
    padding-left: 80px;
}

.plan-tab input[name="tab-radio"]:checked + .bg01{
    background-image: url("../img/ro_white_big.png");
    background-size: 50px;
    background-color: #c1a86f;
}
.plan-tab input[name="tab-radio"]:checked + .bg02{
    background-image: url("../img/so_white_big.png");
    background-size: 50px;
    background-color: #82a077;
}
.plan-tab input[name="tab-radio"]:checked + .bg03{
    background-image: url("../img/vo_white_big.png");
    background-size: 50px;
    background-color: #cc8560;
}
.plan-tab input[name="tab-radio"]:checked + .bg04{
    background-color: #d7092f;
}

.plan-tab .campaign{margin: 30px 0;}
.plan-tab .campaign .campaing-ttl{
    background-color: #d7092f;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.plan-tab .campaign ul.campaign{margin: 0; padding: 20px; border: solid 2px #d7092f; border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
.plan-tab .campaign ul.campaign li{list-style: none; margin: 0; padding: 0; float: left; width: 30%; margin-right: 5%;}
.plan-tab .campaign ul.campaign li:nth-child(3n){margin-right: 0;}
.plan-tab .campaign ul.campaign .icon-mark{vertical-align: middle; display: inline-block;float: left; width: 25%;}
.plan-tab .campaign ul.campaign .icon-mark img{width: 100%; height: auto;}
.plan-tab .campaign ul.campaign .icon-setsumei{vertical-align: middle; display: inline-block; font-size: 14px; float: right; width: 70%;}


/* 間取りタブメニュー
-------------------------------------------*/
 /* タブの外枠 */
.madori-tab {
    margin-top: 50px;
}
 
/* タブのスタイル */
.madori-tab .mtab-label {
  display: inline-block;
  background-color: #888;
  margin-right: 10px;
  padding: 5px 10px;
  text-align: center;
  width: 80px;
  font-size: 22px;
  color: #fff;
  border-radius: 5px;
}

/* タブにマウスカーソルがのったときフッター */
.madori-tab .mtab-label:hover {
  color: #d7092f;
}
 
/* ラジオボタンと内容を非表示 */
.madori-tab input[name="mtab-radio"],
.madori-tab .mtab-content {
  display: none;
}
 
/* タブ内容のスタイル */
.madori-tab .mtab-content{
    margin-top: 20px;
}

.madori-tab .mtab-content .room-list span{
    font-weight: bold;
    margin-left: 5px;
}

.madori-tab .mtab-content .room-img{
    text-align: center;
}

/* 選択されているタブのコンテンツのみを表示 */
.madori-tab #mtab-1:checked ~ .mtab-1-content, .madori-tab #mtab-2:checked ~ .mtab-2-content, .madori-tab #mtab-3:checked ~ .mtab-3-content, .madori-tab #mtab-4:checked ~ .mtab-4-content
{ display: block;}
 
/* 選択されているタブのスタイルを変える */
.madori-tab input[name="mtab-radio"]:checked + .mtab-label {
    background-color: #d7092f;
    color: #fff;
}

#detail .vacancy-notification{
    padding: 10px 10px;
    text-align: center;
    width: 50px;
    font-size: 16px;
    border-radius: 5px;
    color: #fff;
    background-color: #d7092f;
}