@charset 'utf-8';
/*	Cascading Style Sheets: style.css 5.2	*/


body {
margin: 0;padding: 0;line-height:22px;font-family: 'YuGothic Medium', '游ゴシック Medium', 'YuGothic', '游ゴシック', '游ゴシック体', 'Noto Sans Japanese Light', sans-serif;
line-height: 1.8rem;

}
a {color: #333;}
a:hover{opacity: 0.5!important;}
a,a:hover{
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
*, *:before, *:after {box-sizing: border-box;}
img {border: 0;max-width: 100%;height: auto;}
p,dl,dt,dd {margin: 0;}

ul,ol {list-style: none;padding: 0}
border {box-sizing: border-box}
.clearfix:after {
	content:"";
	visibility:hidden;
	display: block;
	font-size: 0;
	clear: both;
	height: 0;
	
}
hr {
border:none;
height:1px;
border-top: 1px dashed #bbb;
margin: 80px 0;
}
.center {
	text-align: center;

}
.right {
	text-align: right;
}

.mb0{margin-bottom:0;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb40{margin-bottom:40px;}
.mb80{margin-bottom:80px;}
.mb100{margin-bottom:100px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt40{margin-top:40px;}
.mt80{margin-top:80px;}
.mt100{margin-top:100px;}


.btn1 { padding:16px 20%; background: #333; border:none; text-align:center; font-size:20px; cursor:pointer; text-decoration: none;}
.btn1:hover	{ text-decoration:none; filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity:0.70; opacity:0.70; }
.btn1:active, { text-decoration:none; filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity:0.70; opacity:0.70; }
.btn1 a {text-decoration: none;color: #FFF;}

#toTop {
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 10px;
	right: 10px;
	cursor:pointer;
	z-index: 1000;
	background-color: #000;
	opacity: 0.9;
}
#toTop a {
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
}
#toTop a::before{
	color: #fff;
	position: absolute;
	content: "";
	display: block;
	width:14px;
	height: 14px;
	top: 20px;
	left:17px;
	border-top: 3px solid rgba(255,255,255,0.9);
	border-right: 3px solid rgba(255,255,255,0.9);
	transform: rotate(-45deg);


}

.arrow-b{
  width: 200px;
  margin: 10px auto;
}
.arrow-b::after{
  content: "";
  display:block;
  border-top: 100px solid #8b4513;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  transform-origin: left top;
  transform: scaleY(.5);
}

/* ボタン */

.btn1,.btn2 {
	letter-spacing: 1px;
	font-size: 0.9em;
	font-weight: bold;
	display:inline-block;
	text-decoration:none;
	margin: 0 auto;
	background-size: 200% 100%; 
	-webkit-transition: background-position 1s ease-out;
	transition: background-position .5s cubic-bezier(0.19, 1, 0.22, 1) .1s, color 1s ease 0s, background-color 1s ease !important;
	position: relative;
	width: 100%
}
.btn1 {
	background-image: linear-gradient(to right, transparent 50%, #555 50%);
	padding: 8px 22px 8px 18px;
}
.btn2 {
	background-image: linear-gradient(to bottom, transparent 100%, #f2f2f2 50%);
	padding: 16px 8px 8px 8px;
}
.btn1,.btn1 a {
	background-color: #000;
	color: #FFF;
}
.btn2,.btn2 a {
	background-color: #FFF;
	border: 1px solid #000;
	color: #000;
}
.btn1:hover {
	background-color: #333;
	background-position: -100% 100%;
	opacity: 1 !important;
}
.btn2:hover {
	background-color: #f2f2f2;
	background-position: -100% 100%;
	opacity: 1 !important;
}
.btn1:after,.btn2:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 12px;
	margin: auto;
	width: 8px;
	height: 8px;
	transform: rotate(45deg);
	margin-top: -4px;
}
.btn1:after{
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
}
.btn2:after {
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	transform: rotate(135deg);
	-webkit-transform: translateY(4px) rotate(315deg);
	transition: all 0.25s ease-out;
	top: 8px;
	right: 50%;
}
.btn1:hover:after  {
	transform: translateX(4px) rotate(45deg);
	-webkit-transform: translateX(4px) rotate(45deg);
	transition: all 0.25s ease-out;
}



@media screen and (max-width: 480px) {
	.btn1,.btn2 {
		padding: .4em 1.5em;
	}
}


/* 下からフェードイン class="scroll-a fadein-b" */
.fadein-b{
	-webkit-transition: all .4s ease-in .3s;
	-o-transition: all .4s ease-in .3s;
	transition: all .4s ease-in .3s;
	-webkit-transform: translateY(30px);
	-moz-transform: translateY(30px);
	-ms-transform: translateY(30px);
	transform: translateY(30px);
}
.fadein-b.active{
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
}

.table-2block dt {
	font-weight: bold;
	text-align: left;
	float: left;
	padding-left: 16px;
	padding-top: 16px;
	border-top: 1px solid #CCC;
	width: 14%;
	margin-left: 1%;
	white-space: nowrap;
}
.table-2block dd {
	width: calc(100% - 180px);
	border-top: 1px solid #CCC;
	width: 32%;
	margin: 0 0 16px 0;
	padding-top: 16px;
	float: left;
}
.table-2block-border {
	border-bottom: 1px solid #CCC;
	padding-bottom: 16px;
}
@media screen and (max-width: 767px) {
	.table-2block {border-bottom: 1px solid #CCC;}
	.table-2block dt {width: 20%;margin: 0;padding-bottom: 16px;}
	.table-2block dd {width: 80%;margin: 0;padding-bottom: 16px;}
	.table-2block-border {border: none;}
}

.table-3box-wr {
	display: flex;
	flex-wrap: wrap;
}
.table-3box {
	width: 31.3%;
	padding: 8px 2% 24px;
	margin: 8px 1%;
	text-align: left;
}
.table-3box-wr li {
	width: 31.3%;
	margin: 8px 1%;
	text-align: left;
}


/***** 構造など ****/

.wrapper{
	margin: 0 auto;
	width: 96%;
	max-width: 960px;
	padding: 0;
}
.wrapper2 {
	width: 96%;
	max-width: 1200px;
	margin: 0 auto;
}

header {
	border-bottom: 1px solid #999;
	padding: 20px 0;
	margin-bottom: 60px;
}
h1 {
	line-height: 1.4;
	font-size: 0.8rem;
	letter-spacing: 1px;
	margin: 0 2%;
}
h1 img{
	max-width: 320px;
	height: auto;
}
h1 span:before {
	content: "\A";
	white-space: pre;
}
h1 span {
	font-weight: bold;
}
h2 {
	font-size: 1.8rem;
	font-family: 'Shippori Mincho B1', serif;
	margin-bottom: 50px;
	text-align: center;
	letter-spacing: 1px;
}
h2 span {
	font-size: 1.6rem;
	margin-left: 8px;
}
/* h2 span:before,h2 span:after {
	content: " ─ ";
}
*/
.h2bottom {
	margin-bottom: 60px;
	text-align: center;
}
h3 {
	font-size:1.6rem;
	font-family: 'Shippori Mincho B1', serif;
	font-weight: bold;
	margin-bottom: 60px;
	font-weight: 500;
}
h3 span {
	font-size: 0.9rem;
}
h3 span:before {
	content: "\A";
	white-space: pre;
}

h4 {
	margin-bottom: 40px;
	font-weight: 500;
	color: #333;
	font-size: 1.4rem;
	line-height: 2rem;
	letter-spacing: 1px;
}

.main {
	margin-bottom: 60px;

}
.lead {
	letter-spacing: 1px;
	line-height: 2rem;
	margin: 0 4% 50px;
	font-weight: 500;
	font-size: 1.2rem;
}

.lead2 {
	font-weight: bold;
	margin: 30px 4% 50px;
}
.lead2 p {
	margin-bottom: 8px;
}
.lead2 li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 12px;
	font-weight: 500;
}
.lead2 li::after {
	display: block;
	content: '';
	position: absolute;
	top: .4em;
	left: 0;
	width: 12px;
	height: 9px;
	border-left: 3px solid #c9bc9c;
	border-bottom: 3px solid #c9bc9c;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.tab-area {
	display: flex;
	justify-content: space-around;
	cursor: pointer;
	margin-top: 100px;
}
.tab-area .tab {
	width: 25%;
	height: 50px;
	background-color: #CCC;
	line-height: 40px;
	text-align: center;
	color: white;
	border-right: 1px solid #FFF;
}
.tab-area .tab:hover {
	color: #999;
	background-color: #f7f6f2
}
.tab-area .tab.active {
	background-color: #c9bc9c;
	color: #FFF;
	border: none;
	position: relative;
}

.tab-area .tab.active:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 8px;
	right: calc(50% - 7px);
	width: 7px;
	height: 7px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	transform: translateX(-50%) rotate(135deg);
}
.content-area {
	text-align: center;
	border-top: 4px solid #c9bc9c;
	margin-bottom: 140px;
}
.content-area .content {
	display: none;
	margin: 100px auto;
}
.content-area .content.show {
	display: block;
}
@media screen and (max-width: 767px) {
	.w100 {
		width: 100% !important;
	}
	.tab-area .tab {
		width: 48%;
		height: auto;
		line-height: 2rem;
		padding: 20px 10px 28px;
		margin: 4px 1%;
	}
	.tab-area {
		flex-wrap: wrap;
	}
	.content-area {
		border-top: none;
	}
}



/***** 間取り図・区画図 ****/

.land-table {
	table-layout: fixed;
	border-collapse: collapse;
	margin: 20px 0;
	width: 100%;
}
.land-table th {
	text-align: left;
	color: #222;
	width: 180px;
	border: 1px solid #CCC;
	padding: 8px;
	background-color: #f2f2f2;
}
.land-table th strong {
	font-size: 1.1em;
	font-weight: bold;
	margin-right: 4px;
}

.land-table td {
	border: 1px solid #CCC;
	padding: 8px;
}

.floor-p img {
	width: 48%;
	margin: 0 1%;
}

@media screen and (max-width: 767px) {
	.land-table th {
		width: 20%;
	}
	.floor-p img {
		width: 98%;
		margin: 4px 1%;
	}
}







@media screen and (max-width: 767px) {
	dt {
		font-weight: 500;
	}
	dt:before {
		content: "■";
	}
	dd {
		border: none;
		padding-top: 1px;
	}
	dt,dd {
		width: 100%;
		float: none;
	}
}


.title-kakko {
	font-size: 0.9rem;
	position: relative;
	line-height: 1.2;
	padding:0.1em 1em;
	display: inline-block;
	top:0;
	text-align: center;
	letter-spacing: 1px;
}

.title-kakko:before,.title-kakko:after { 
	position: absolute;
	top: 0;
	content:'';
	width: 6px;
	height: 100%;
	display: inline-block;
}
.title-kakko:before {
	border-left: solid 1px #FFF;
	border-top: solid 1px #FFF;
	border-bottom: solid 1px #FFF;
	left: 0;
}
.title-kakko:after {
	content: '';
	border-top: solid 1px #FFF;
	border-right: solid 1px #FFF;
	border-bottom: solid 1px #FFF;
	right: 0;
}


.contact {
	margin: 100px 0 0;
	text-align: center;
	background-color: #f7f6f2;
	padding: 60px 0;
}
.contact-in {
	width: 96%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.contact-box {
	color: #333;
	font-weight: bold;
	font-size: 0.9rem;
	font-family: 'Shippori Mincho B1', serif;
	letter-spacing: 1px;
	line-height: 1.5rem;
	width: 31.3%;
	margin: 0 1%;
	width: 98%;
	border: 4px solid #333;
	background-color: #FFF;
}
.contact-tel {
	border: none;
	background: none;
}
.contact-tel p {
	font-size: 0.8rem;
	font-family: 'YuGothic Medium', '游ゴシック Medium', 'YuGothic', '游ゴシック', '游ゴシック体', 'Noto Sans Japanese Light', sans-serif;
}
.contact-box a {
	padding: 20px;
	display: block;
	text-decoration: none;
}
.contact-box a:hover {
	background: #ccc;
}
.contact-box img {
	margin-bottom: 4px;
	width: 60px;
	heigh: auto;
}
.contact-tel img {
	width: 80%;
	height: auto;
}

.contact-box span:before {
	content: "\A";
	white-space: pre;
}
.contact-box span{
	font-size:1.2rem;
}
.contact-box h3 {
	margin-bottom: 10px;
}
.contact-box h3 span{
	font-size: 0.9rem;
	margin: 0;
}
.contact-tel h3 {
	margin: 20px 0;
}
@media screen and (max-width: 767px) {
	.contact-in {
		display: block;
	}
	.contact-box {
		width: 100%;
		margin-bottom: 10px;
		text-align: left;
	}
	.contact-box img {
		float: left;
		margin-right: 8px;
	}
	.contact-box span:before {
		white-space: normal;
	}
	.contact-box img:after {
		content: none;
	}
	.contact-tel {
		margin-bottom: 20px;
	}
	.contact-tel img {
		float: none;
	}
}
footer {
	background-color: #999;
	padding: 40px 4% 10px;
}
footer ul {
	max-width: 820px;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
footer li {
	display: inline-block;
	width: 31%;
	margin: 1%;
	height: auto;
	
}
@media screen and (max-width: 500px) {
footer li {
	width: 48%;
	}
}


footer h2 {
	color: #FFF;
	font-family: 'YuGothic Medium', '游ゴシック Medium', 'YuGothic', '游ゴシック', '游ゴシック体', 'Noto Sans Japanese Light', sans-serif;
	font-weight: bold;
}
.corp {
	color: #FFF;
	font-size: 0.8rem;
	margin-top: 40px;
}



.slide-main {
    max-width: 800px;
    height: 600px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 100px auto 40px;
}
.slide-container {
    width: 100%;
    height: 100%;
    position: relative;
    /* overflow: hidden; */
}
.slider-btn {
    position: absolute;
    top: 0;
    bottom: 10%;
    width: 36px;
    height: 36px;
    margin: auto;
    border-radius: 100%;
    cursor: pointer;
	background-color: #999;
}
.slider-btn:before {
    content: "";
    width: 9px;
    height: 9px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
}
.slider-btn-prev {
    left: 20px;
}
.slider-btn-prev::before {
    border-left: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    left: 55%;
}
.slider-btn-next {
    right: 20px;
}
.slider-btn-next::before {
    border-right: 1px solid #FFF;
    border-top: 1px solid #FFF;
    left: 45%;
}
.slider-container {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.slider-list {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
    top:0;
    left: 0;
}
.slider-item {
    list-style: none;
    min-width: 100%;
}
.slider-item p {
	text-align: left;
}
.slider-img {
    width: 100%;
}
@media screen and (max-width: 767px) {
	.slide-main {
		height: 420px;
	}
	.slider-btn-prev {
		left: 0;
	}
	.slider-btn-next {
		right: 0;
	}
	.slider-btn {
		bottom: 30%;
	}
}
.equipment {
	background: #DDD;
	padding: 20px 2%;
}

.equipment-box {
	text-align: left;
	background-color: #FFF;
}
.equipment h4 {
	color: #555;
	font-size: 1.3rem;
	font-family: 'Shippori Mincho B1', serif;
	margin-bottom: 60px;
	letter-spacing: 1px;
}
.equipment h4 span {
	display: inline-block;
	position: relative;
}
.equipment h4 span:after {
	content: "";
	position: absolute;
	bottom: -15px;
	display: inline-block;
	width: 60px;
	height: 1px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #555;
}
.equipment h5 {
	font-size: 0.8rem;
	font-weight: bold;
	line-height: 1.5;
}
.equipment h5 strong {
	font-size: 1.1rem;
	letter-spacing: 1px;
}
.equipment h5 strong:before {
	content: "\A";
	white-space: pre;
}

@media screen and (max-width: 767px) {
	.equipment {
		display: block;
	}
	.equipment-box {
		width: 100%;
		margin: 0 0 20px;
	}
	.equipment-box p:first-of-type {
		text-align: center;
	}
	.equipment-box img {
		width: 60%;
		margin: 0 auto 10px;
	}
	.equipment h5 {
		text-align: center;
	}
}


/***** 地図・周辺環境 *****/
.map {
	width: 640px;
}
.access-overview {
	margin-top: 40px;
}
.access-overview dt {
	font-weight: bold;
}
.access-overview dd {
	font-size: 1.2rem;
	letter-spacing: 1px;
}
.facilities h4 {
	font-size: 1rem;
	background-color: #E0E0E0;
	padding: 4px 2%;
	margin: 50px 0 30px;
	text-align: left;
	font-weight: 500;
	color: #333;
}
.facilities h4:before {
	content: "○ ";
}
.facilities h5 {
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.2rem;
	margin: 0;
}
.facilities li {
	font-size: 0.8rem;
}
.facilities em {
	font-style: nomal;
}


/***** 物件概要 *****/

.OUTLINE_TABLE,.OUTLINE {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #ccc;
    font-size: 0.9rem;
    line-height: 1.5em;
	margin: 10px 0;
}
.OUTLINE_TABLE:after,.OUTLINE:after {
	content:"";
	visibility:hidden;
	display: block;
	font-size: 0;
	clear: both;
	height: 0;
	
}

.OUTLINE_TABLE dl,.OUTLINE dl {
    width: 100%;
    float: left;
    background: #F2F2F2;
    border-top: 1px solid #ccc;
}
.OUTLINE_TABLE dl dt,.OUTLINE dl dt {
    width: 120px;
    float: left;
    padding: 10px;
}
.OUTLINE_TABLE dl dd,.OUTLINE dl dd {
    width: calc(100% - 120px);
    float: right;
    padding: 10px;
    background: #fff;
}
dl.OUTLINE_S {
    width: 50%;
    clear: none;
}
.outline_alart {
	font-size: 0.9rem;
}
@media screen and (max-width: 750px) {
	dl.OUTLINE_S {
		width: 100%;
		clear: none;
	}
	.OUTLINE_TABLE dl dt,.OUTLINE dl dt {
		padding: 10px 4px;
		text-align: left;
	}
	.map {
		width: 100%;
	}
}