@import url("global.css");

/* ------------------------------
 Slider
------------------------------ */

.slider-pro {
}
.pctabnone {
	display: none;
}
.spnone {
	display: block;
}

.slider-pro .sd2021 h2.sp-layer {
	font-size: 46px;
}

.slider-pro h2.sp-layer {
	font-size: 40px;
	line-height: 1.3;
	margin: 0;
	text-align: left;
	color: #222;
	font-weight: 500;
	letter-spacing: 0;
	text-shadow: 0px 0px 7px #FFF, 0px 0px 7px #FFF, 0px 0px 7px #FFF, 0px 0px 7px #FFF;
}
.slider-pro h2.sp-layer span {
	font-size: 56px;
	margin: 0 3px;
}
.slider-pro .slide01 h2.sp-layer {
	text-align: center;
	font-size: 46px;
	color: #18727E;
}
.slider-pro .slide01 h2.sp-layer span {
	display: block;
	letter-spacing: 4px;
	font-size: 62px;
	margin: -30px 0 10px;
}
.slidelogo {
	position: absolute;
	bottom: 70px;
	left: 50%;
	margin-left: -20px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	opacity: 0.4;
}
.slider-pro p.sp-layer {
	font-size: 72px;
	font-weight: 600;
	opacity: 0.5 !important;
	color: #000;
}
.slider-pro p.sp-layer img {
	height: 63px;
	width: auto;
	margin: 0 6px 17px 0;
}

.sp-thumbnails-container {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.sp-bottom-thumbnails {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	bottom: 15px;
	z-index: 100;
}
.sp-thumbnails {
	height: 49px !important;
}
.sp-thumbnail-container {
	width: 150px !important;
	height: 49px !important;
	margin: 0 5px !important;
	overflow: hidden;
	border-radius: 3px;
	cursor: pointer;
}
.sp-thumbnail-container::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 3px;
	border: 2px solid #fff;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}
.sp-slide {
	position: absolute;
	opacity: 0.5;
}

.sp-selected{
	opacity:1;
}
.sp-thumbnail-container.sp-selected-thumbnail::after,
.sp-thumbnail-container:hover::after {
	border-color: #2D1C16;
}
.sp-thumbnail-container .sp-thumbnail img {
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	height: 49px;
	max-width: none;
}
.sp-thumbnail-container .sp-thumbnail p {
	position: absolute;
	bottom: 6px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	font-size: 16px;
	height: 16px;
	line-height: 16px;
	letter-spacing: 0;
	z-index: 20;
	text-shadow: 0px 0px 2px #FFF;
}

.disaster{
	margin-top:80px;
}
.disaster p{
	width: 100%;
}
.disaster p a:hover{
	opacity: 0.6;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.disaster p.sp{
	display: none;
}




/* ------------------------------
 Concept
------------------------------ */
#concept {
	margin: 120px 0 50px;
/*
	margin: 100px 0 50px;
*/
}
#concept .wrapper {
	padding: 0 20px;
}
#concept h1 {
	font-size: 37px;
	line-height: 37px;
	font-weight: 500;
	margin-bottom: 60px;
	letter-spacing: 1px;
}
#concept p {
	font-size: 21px;
	line-height: 26px;
	margin-bottom: 10px;
}
#concept .btn {
	margin: 40px -20px 60px;
	float: right;
}
#concept .btn a {
	display: block;
	position: relative;
	padding: 0 20px 0 25px;
	height: 20px;
	line-height: 20px;
}
#concept .btn a:hover {
	padding-right: 10px;
	color: #D9A300;
}
#concept .btn a::before,
#concept .btn a::after {
	content: "";
	position: absolute;
	border: 0px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}
#concept .btn a::before {
	left: 0;
	bottom: 5px;
	width: 14px;
	height: 14px;
	border-bottom: 1px solid #111;
}
#concept .btn a::after {
	left: 4px;
	bottom: 0;
	width: 8px;
	height: 8px;
	border-right: 1px solid #111;
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
}
#concept .btn a:hover::before,
#concept .btn a:hover::after {
	border-color: #D9A300;
}




/* ------------------------------
 title共通
------------------------------ */
#info h1,
/*#works h1,*/
#estate h1,
#lineup h1 {
	margin-bottom: 70px;
	text-align: center;
}
#info h1 a,
#estate h1 a,
/*#works h1 a,*/
#lineup h1 a {
	font-size: 36px;
	line-height: 36px;
	letter-spacing: 1px;
}

#info h1 a:hover,
#estate h1 a:hover,
/*#works h1 a:hover,*/
#lineup h1 a:hover,
#blog li a:hover div p {
	color: rgba(0,0,0,0.6);
	background: -webkit-gradient(linear, left top, right top, from(#aaa), to(#aaa), color-stop(0.5, #000));
	background: gradient(linear, left top, right top, from(#aaa), to(#aaa), color-stop(0.5, #000));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-animation-name: colorcx;
	animation-name: colorcx;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#info h1 a:hover,
#estate h1 a:hover {
	-webkit-background-size: 120px 100%;
	background-size: 120px 100%;
}
/*#works h1 a:hover,*/
#lineup h1 a:hover,
#blog li a:hover div p {
	-webkit-background-size: 40px 100%;
	background-size: 40px 100%;
}
@keyframes colorcx {
	0% { background-position: top left;
	}
	100% { background-position: top right;
	}
}
#info h1 a span,
#estate h1 a span,
/*#works h1 a span,*/
#lineup h1 a span {
	display: block;
	font-size: 17px;
	line-height: 17px;
	letter-spacing: 5px;
	margin-top: 5px;
}



/* ------------------------------
 Event & News
------------------------------ */
#info {
	margin: 110px auto;
	width: 1140px;
}
#info ul.event_list {
	margin: 0 auto;
    width: 1010px;
    text-align: center;
    letter-spacing: -.4em;
}
/* --- トップに表示するイベント情報の表示数切替 --- */
#info ul.event_list li {
/*	width: 40%; /*イベント1つ（ブログと合わせて2つ）*/
/*	width: 33.33%; /*イベント2つ*/
	width: 25%; /*イベント3つ*/
/*	width: 20%; /*イベント4つ*/
    display: inline-block;
/*	padding: 0 3%; /*イベント1つ*/
	padding: 0 8px; /*イベント2～3つ*/
    box-sizing: border-box;
    letter-spacing: 1px;
}

#info ul.event_list li a {
	display: block;
}
#info ul.event_list li a .image {
	text-align: center;
	background-color: #F5F5F5;
	overflow: hidden;
	position: relative;
}
#info ul.event_list li a .image img {
	max-width: 100%;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}
#info ul.event_list li a:hover .image img {
	transform: scale(1.1);
}
#info ul.event_list li a .image span {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 180px;
	height: 36px;
	line-height: 34px;
	background-color: #18727E;
	color: #fff;
	text-align: center;
}
#info ul.event_list li a .image span.cat_blog {
	background-color: #0277A4;
}
#info ul.event_list li a .text {
	height: 205px;
	overflow: hidden;
	overflow-wrap: break-word;
	word-break: break-word;
	word-break: break-all;
}
#info ul.event_list li a h2 {
	text-align: left;
	margin-top: 15px;
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	/*white-space: nowrap;*/
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}
#info ul.event_list li a:hover h2 {
	color: #D9A300;
}
#info ul.event_list li a p {
	font-size: 14px;
	line-height: 23px;
	text-align: justify;
}
#info ul.event_list li a p.date {
	margin: 7px 0 10px;
	font-size: 11px;
	line-height: 11px;
	letter-spacing: 1px;
	color: #666;
}

#info ul.news_list {
	margin: 70px auto 10px;
	width: 1000px;
	border-top: 1px dotted #A4A4A4;
}
#info ul.news_list li {
	border-bottom: 1px dotted #A4A4A4;
}
#info ul.news_list li a,
#info ul.news_list li div {
	display: block;
	padding: 20px;
	font-size: 12px;
	line-height: 12px;
}
#info ul.news_list li a {
	text-decoration: underline;
}
#info ul.news_list li a:hover {
	background-color: #f6f6f6;
}
#info ul.news_list li span.date {
	float: left;
}
#info ul.news_list li span.date::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 12px;
	background-color: #333;
	margin: 0 20px;
}
#info ul.news_list li p {
	font-family: "Meiryo", "メイリオ", Helvetica,sans-serif;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#info p.old {
	width: 1040px;
	margin: 0 auto 70px;
}
#info p.old a {
	float: right;
	display: block;
	font-family: "Meiryo", "メイリオ", Helvetica,sans-serif;
	color: #666;
	letter-spacing: 1px;
	font-size: 12px;
	padding: 0 20px;
}
#info p.old a:hover {
	color: #000;
	padding-right: 10px;
}

#estate {
	margin: 60px auto;
}
#estate ul.estate_list {
	margin: 0 auto;
    width: 1010px;
    text-align: center;
    letter-spacing: -.4em;
}
#estate ul.estate_list li {
	width: 33.33%;
    display: inline-block;
	padding: 0 8px;
    box-sizing: border-box;
    letter-spacing: 1px;
}
#estate ul.estate_list li a {
	display: block;
}
#estate ul.estate_list li a .image {
	text-align: center;
	background-color: #F5F5F5;
	overflow: hidden;
	position: relative;
}
#estate ul.estate_list li a .image img {
	max-width: 100%;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}
#estate ul.estate_list li a:hover .image img {
	transform: scale(1.1);
}
#estate ul.estate_list li a .image .cat_estate {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 180px;
	height: 36px;
	line-height: 34px;
	background-color: #18727E;
	color: #fff;
	text-align: center;
}
#estate ul.estate_list li a .image .pricedown{
	position: absolute;
	right: 0;
	top: 0;
	width: 70px;
	height: 70px;
	line-height: 1.5em;
	background-color: #ffca26;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
#estate ul.estate_list li a .image .new{
	position: absolute;
	right: 0;
	top: 0;
	width: 70px;
	height: 70px;
	line-height: 1.5em;
	background-color: #CD2D00;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
#estate ul.estate_list li a .text {
	overflow: hidden;
	overflow-wrap: break-word;
	word-break: break-word;
	word-break: break-all;
}
#estate ul.estate_list li a h2 {
	text-align: left;
	margin-top: 15px;
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	/*white-space: nowrap;*/
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}
#estate ul.estate_list li a:hover h2 {
	color: #D9A300;
}
#estate ul.estate_list li a p {
	font-size: 14px;
	line-height: 23px;
	text-align: justify;
}
#estate ul.estate_list li a p.date {
	margin: 7px 0 10px;
	font-size: 11px;
	line-height: 11px;
	letter-spacing: 1px;
	color: #666;
}
#estate p.old {
	width: 1040px;
	margin: 0 auto 70px;
}
#estate p.old a {
	float: right;
	display: block;
	font-family: "Meiryo", "メイリオ", Helvetica,sans-serif;
	color: #666;
	letter-spacing: 1px;
	font-size: 12px;
	padding: 0 20px;
}
#estate p.old a:hover {
	color: #000;
	padding-right: 10px;
}


/* ------------------------------
 Works
------------------------------ */

#works ul.workslist li {
	float: left;
	width: 50%;
}
/*#works {
	margin: 110px auto;
}
#works ul.workslist {
	width: 100%;
	overflow: hidden;
}
#works ul.workslist li {
	float: left;
	width: 25%;
}
#works ul.workslist li a {
	width: 100%;
	display: block;
	overflow: hidden;
	position: relative;
}
#works ul.workslist li a p.new {
	position: absolute;
	left: -40px;
	top: -40px;
	height: 80px;
	width: 80px;
	background-color: #D9A300;
	z-index: 30;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	text-align: center;
}
#works ul.workslist li a p.new span {
	line-height: 136px;
	font-size: 11px;
	color: #fff;
}
#works ul.workslist li a figure {
	position: relative;
	height: 0;
	padding-top: 60.42%;
	overflow: hidden;
}
#works ul.workslist li a figure img {
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
}
#works ul.workslist.re210506 li a figure img {
	top: auto;
	bottom: 0;
}
#works ul.workslist li a:hover figure img {
	opacity: 0.7;
}
#works ul.workslist li a figcaption {
	width: 100%;
	text-align: left;
	font-size: 16px;
	letter-spacing: 1px;
	line-height: 30px;
	height: 30px;
	padding-right: 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}
#works ul.workslist li a:hover figcaption {
	color: #D9A300;
}
#works ul.workslist li a figcaption::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 2px;
	width: 16px;
	background-color: #222;
	margin: -2px 10px 0 5px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}
#works ul.workslist li a:hover figcaption::before {
	background-color: #D9A300;
}
#works ul.workslist li a .cat {
	position: absolute;
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	text-align: center;
	background-color: rgba(24,114,126,0.6);
	color: #fff;
	bottom: 30px;
	right: 0;
	line-height: 40px;
	padding: 0 20px;
}
#works p.more {
	margin-top: 30px;
	text-align: center;
}
#works p.more a {
	display: inline-block;
	border: 1px solid #ddd;
	font-size: 16px;
	padding: 10px;
	margin: 0 auto;
	width: 360px;
}
#works p.more a:hover {
	border: 1px solid #111;
	background-color: #111;
	color: #FFF;
}*/
/*.slick-prev {
	left: 50px;
	background: url(../img/slick_prev.png) no-repeat left center;
}
.slick-next {
	right: 50px;
	background: url(../img/slick_next.png) no-repeat right center;
}
.slick-prev,
.slick-next {
	margin-top: -22px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	height: 62px;
	width: 36px;
	z-index: 99;
}*/


/* ------------------------------
 Luineup
------------------------------ */

#lineup {
	margin: 0 auto;
	width: 1140px;
}
#lineup ul {
	margin: 0 -15px;
	letter-spacing: -.4em;
	text-align: center;
}
#lineup li {
	display: inline-block;
	letter-spacing: normal;
	width: 25%;
	padding: 0 15px 30px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#lineup li a {
	display: block;
	border-top: 2px dotted #d2d2d2;
	padding: 30px 0 0;
}
#lineup li h2 {
	text-align: center;
	margin-bottom: 15px;
}
#lineup li p {
	text-align: justify;
	margin-bottom: 20px;
	font-size: 13px;
	padding: 0 15px;
}
#lineup li figure {
	position: relative;
	overflow: hidden;
}
#lineup li figure img {
	transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
}
#lineup li figure::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	margin: 0 auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 25px 0 25px;
	border-color: #fff transparent transparent transparent;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

#lineup li.piatto a:hover,
#lineup li.square a:hover {
	background-color: #cae6e7;
}
#lineup li.piatto a:hover figure::after,
#lineup li.square a:hover figure::after {
	border-top-color: #cae6e7;
}
#lineup li.amare a:hover,
#lineup li.nature a:hover {
	background-color: #e0c48c;
}
#lineup li.amare a:hover figure::after,
#lineup li.nature a:hover figure::after {
	border-top-color: #e0c48c;
}
#lineup li.basso a:hover,
#lineup li.cocon a:hover,
#lineup li.cube a:hover,
#lineup li.laugh a:hover {
	background-color: #efe8a5;
}
#lineup li.basso a:hover figure::after,
#lineup li.cocon a:hover figure::after,
#lineup li.cube a:hover figure::after,
#lineup li.laugh a:hover figure::after {
	border-top-color: #efe8a5;
}


#lineup li a:hover figure img {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}


/*
#lineup ul li.square,
#lineup ul li.cocon,
#lineup ul li.nature {
	width: 100%;
}
#lineup ul li.square figure,
#lineup ul li.cocon figure {
	float: left;
}
#lineup ul li.nature figure {
	float: right;
}
#lineup ul li a {
	width: auto;
	display: block;
	height: 290px;
	padding: 45px;
	text-align: left;
	background-color: #FFF;
	position: relative;
}
#lineup ul li.square a,
#lineup ul li.cocon a {
	margin: 0 0 0 380px;
}
#lineup ul li.nature a {
	margin: 0 380px 0 0;
}
#lineup ul li a::before {
	content: "";
	position: absolute;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}
#lineup ul li.square a::before {
	left: -37px;
	top: 50%;
	margin-top: -28px;
	border-right: 37px solid #fff;
	border-top: 28px solid transparent;
	border-bottom: 28px solid transparent;
}
#lineup ul li.square a:hover { background-color: #828D93; }
#lineup ul li.square a:hover::before { border-right-color: #828D93; }

#lineup ul li.cocon a::before {
	left: -37px;
	top: 50%;
	margin-top: -28px;
	border-right: 37px solid #FFF;
	border-top: 28px solid transparent;
	border-bottom: 28px solid transparent;
}
#lineup ul li.cocon a:hover { background-color: #EBE0CE; }
#lineup ul li.cocon a:hover::before { border-right-color: #EBE0CE; }

#lineup ul li.nature a::before {
	right: -37px;
	top: 50%;
	margin: -28px 0 0;
	border-left: 37px solid #FFF;
	border-top: 28px solid transparent;
	border-bottom: 28px solid transparent;
}
#lineup ul li.nature a:hover { background-color: #885200; }
#lineup ul li.nature a:hover::before { border-left-color: #885200; }

#lineup ul li a h2 {
	text-align: center;
	height: 50px;
	margin-bottom: 30px;
}
#lineup ul li a p {
	height: 130px;
	font-size: 16px;
	text-align: justify;
}
#lineup ul li a .more {
	margin-top: 30px;
	text-align: center;
	display: block;
	border: 2px solid #111;
	height: 50px;
	line-height: 46px;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0;
	position: relative;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
}
#lineup ul li a:hover .more {
	background-color: #111;
	color: #fff;
}
#lineup ul li a .more::before {
	content: "";
	width: 7px;
	height: 7px;
	border-bottom: solid 2px #111;
	border-right: solid 2px #111;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position: absolute;
	margin-top: -3px;
	top: 50%;
	right: 15px;
	box-sizing: border-box;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
}
#lineup ul li a:hover .more::before {
	right: 10px;
	border-color: #fff;
}
*/



/* ------------------------------
 Btn
------------------------------ */
#btn {
	margin: 50px auto 80px;
/*
	margin: 190px auto 80px;
*/
	width: 1140px;
}
#btn a {
	display: block;
	width: 380px;
	height: 230px;
	padding: 80px 0 70px;
	position: relative;
}
#btn a p.ttl {
	font-size: 63px;
	line-height: 65px;
	color: #fff;
	font-weight: 500;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}
#btn a:hover p.ttl {
	font-size: 66px;
}
#btn a p.txt {
	margin: 20px 0 30px;
	font-size: 18px;
	line-height: 18px;
	color: #fff;
}
#btn .voice a,
#btn .staff a { float: right; }
#btn .voice figure,
#btn .staff figure { float: left; }

#btn .voice a { background-color: #D9A300; }
#btn .voice a:hover { background-color: #CA8002; }
#btn .staff a { background-color: #14A6D6; }
#btn .staff a:hover { background-color: #1085AB; }

#btn .estate a {
	float: left;
	background-color: #65A93E;
}
#btn .estate figure { float: right; }
#btn .estate a:hover { background-color: #568F34; }


#btn a::before {
	content: "";
	position: absolute;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}
#btn .voice a::before,
#btn .staff a::before {
	left: -37px;
	top: 50%;
	margin-top: -28px;
	border-top: 28px solid transparent;
	border-bottom: 28px solid transparent;
}
#btn .voice a::before { border-right: 37px solid #D9A300; }
#btn .voice a:hover::before { border-right-color: #CA8002; }
#btn .staff a::before { border-right: 37px solid #14A6D6; }
#btn .staff a:hover::before { border-right-color: #1085AB; }

#btn .estate a::before {
	right: -37px;
	top: 50%;
	margin-top: -28px;
	border-left: 37px solid #65A93E;
	border-top: 28px solid transparent;
	border-bottom: 28px solid transparent;
}
#btn .estate a:hover::before { border-left-color: #568F34; }

#btn a .view {
	display: block;
	width: 150px;
	height: 30px;
	line-height: 30px;
	margin: 0 auto;
	border: 1px solid #fff;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#btn a:hover .view {
	background-color: #fff;
}
#btn a .view span {
	position: relative;
	padding-left: 25px;
	color: #fff;
	font-weight: 500;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#btn .voice a:hover .view span { color: #CA8002; }
#btn .estate a:hover .view span { color: #568F34; }
#btn .staff a:hover .view span { color: #1085AB; }

#btn a .view span::before,
#btn a .view span::after {
	content: "";
	position: absolute;
	border: 0px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}
#btn a .view span::before {
	left: 0;
	bottom: 5px;
	width: 14px;
	height: 14px;
	border-bottom: 1px solid #fff;
}
#btn a .view span::after {
	left: 4px;
	bottom: 0;
	width: 8px;
	height: 8px;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
}
#btn .voice a:hover .view span::before,
#btn .voice a:hover .view span::after { border-color: #CA8002; }
#btn .estate a:hover .view span::before,
#btn .estate a:hover .view span::after { border-color: #568F34; }
#btn .staff a:hover .view span::before,
#btn .staff a:hover .view span::after { border-color: #1085AB; }

#btn.re210610 {
  	display:-webkit-box;
  	display:-ms-flexbox;
	display: flex;
}
#btn.re210610 > div {
	width: calc(100% / 3);	
	height: 100%;
}
#btn.re210610 > div a {
	width: 100%;
}
#btn.re210610 > div a::before {
	content: none;
}

#btn.re220816 {
	margin: 60px auto;
}
#btn.re220816 a {
	width: auto;
	height: auto;
	padding: 40px 0;
}
#btn.re220816 a p.ttl {
	font-size: 40px;
	line-height: 30px;
}
#btn.re220816 a:hover p.ttl {
	font-size: 44px;
}
#btn.re220816 > div a {
	width: 100%;
}
#btn.re220816 > div a::before {
	content: none;
}

/*#navi ul#pcnavi li a {
    padding: 0 19px;
    font-size: 16px;
}*/

/* ------------------------------
 Blog btn
------------------------------ */
#blog {
	width: 1140px;
	margin: 0 auto;
}
#blog li {
	float: left;
	width: 50%;
	height: 90px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#blog li a {
	display: block;
	width: 100%;
	height: 90px;
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 2px solid #000;
}
#blog li:last-of-type a {
	border-left: none;
}
#blog li a::after {
	content: "";
	border: 0px;
	border-bottom: solid 2px #111;
	border-right: solid 2px #111;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position: absolute;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3px;
	right: 15px;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
}
#blog li a:hover::after {
	margin-top: -10px;
	width: 20px;
	height: 20px;
}
#blog li a img {
	vertical-align: top;
	margin: 19px 0;
}
#blog li a div {
	margin: 19px 15px 19px 5px;
	display: inline-block;
}
#blog li a div p {
	font-size: 31px;
	line-height: 31px;
	height: 31px;
	letter-spacing: 1px;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
}
#blog li a div span {
	display: block;
	font-size: 14px;
	line-height: 14px;
	height: 14px;
	margin-top: 4px;
	letter-spacing: 3px;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
}


.ban_casa {
	margin: 0 auto;
	text-align: center;
}
.ban_casa a {
	display: block;
	width: 100%;
}
.ban_casa a:hover {
	opacity: 0.8;
}
.ban_casa_top {
	margin-top: 100px;
	margin-bottom: -40px;
}
.ban_casa_bottom {
	margin-top: 50px;
}
.ban_casa_bottom a {
}
.ban_casa_bottom a p {
	margin-bottom: 10px;
}
.ban_casa_bottom a p:last-of-type {
	margin-bottom: 0;
}





/* ------------------------------------------------------------------------------------------------------------------------

/* 1099px（タブレット縦）以下から

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1099px){
	
	.sp-slide {
		opacity: 1;
	}
	.pctabnone {
		display: block;
	}
	.spnone {
		display: none;
	}
	.slider-pro h2.sp-layer {
		text-align: center;
	}
	.sp-bottom-thumbnails {
		right: 10px;
		bottom: 15px;
	}
	.disaster{
		padding:0 15px;
	}
	
	#concept .wrapper {
		margin: 0 20px;
		padding: 0;
	}
	#concept h1 {
		line-height: 48px;
		margin-bottom: 40px;
	}
	#concept p {
		line-height: 28px;
		display: inline;
	}
	
	#info h1,#estate h1,/* #works h1,*/ #lineup h1 {
		margin-bottom: 50px;
	}
	#info h1 a:hover,/* #works h1 a:hover,*/ #estate h1 a:hover,#lineup h1 a:hover, #blog li a:hover div p {
		background: none;
	}
	
	#info,#estate {
		margin: 110px 10px;
		width: auto;
	}
	#info ul.event_list {
		margin: 0 -10px;
		width: auto;
		padding: 0 7%;
	}
	#info ul.event_list li {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 50%;
		padding: 0 3%;
		margin: 0 auto 30px;
	}
	/*#info ul.event_list li:nth-child(2) {
		display: none;
	}*/
	#info ul.event_list li a {
		width: 100%;
	}
	#info ul.event_list li a .image {
		width: 100%;
		height: auto;
		max-height: 100%;
	}
	#info ul.event_list li a .image img {
		width: 100%;
	}
	#info ul.event_list li a .text {
		height: 180px;
	}
	#info ul.news_list {
		width: 100%;
		margin: 40px 0 10px;
	}
	#info p.old {
		width: 100%;
	}

	#estate {
		margin: 30px auto;
	}
	#estate ul.estate_list {
		margin: 0 -10px;
		width: auto;
		padding: 0 7%;
	}
	#estate ul.estate_list li {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 50%;
		padding: 0 3%;
		margin: 0 auto 30px;
	}
	#estate ul.estate_list li a {
		width: 100%;
	}
	#estate ul.estate_list li a h2 {
		text-align: center;
	}
	#estate ul.estate_list li a .image {
		width: 100%;
		height: auto;
		max-height: 100%;
	}
	#estate ul.estate_list li a .image img {
		width: 100%;
	}
	#estate p.old {
		width: 100%;
	}
	
	/*.slick-prev {
		left: 20px;
	}
	.slick-next {
		right: 20px;
	}*/
/*	#works ul.workslist li a .cat {
		font-size: 14px;
		padding: 0 10px;
	}
*/	#works ul.workslist li {
		width: 50%;
	}
	#works ul.workslist li:last-child {
		display: block;
	}
	
	#lineup {
		margin: 0 10px;
		width: auto;
	}
	#lineup li h2 {
		padding: 0 20px 20px;
	}
	#lineup li p{
		display: none;
	}
	#lineup li {
		padding: 5px;
	}

	/*
	#lineup ul li.square a { background-color: #828D93; }
	#lineup ul li.square a::before { border-right-color: #828D93; }

	#lineup ul li.cocon a { background-color: #EBE0CE; }
	#lineup ul li.cocon a::before {	border-right-color: #EBE0CE; }
	#lineup ul li.cocon a:hover::before { border-right-color: #EBE0CE; }

	#lineup ul li.nature a { background-color: #885200; }
	#lineup ul li.nature a::before { border-left-color: #885200; }
	#lineup ul li.nature a:hover::before { border-left-color: #885200; }

	#lineup ul li a p {
		height: 150px;
		line-height: 24px;
	}
	#lineup ul li a .more {
		margin-top: 10px;
		background-color: #fff;
		border: none;
	}*/

	#btn {
		margin: 190px 10px 80px;
		width: auto;
	}
	#btn a {
		width: auto;
		height: auto;
		padding: 25px 0 30px;
	}
	#btn a p.ttl br {
		display: none;
	}
	#btn a p.txt {
		margin: 20px 0 20px;
	}
	#btn .voice a,
	#btn .staff a,
	#btn .estate a,
	#btn .voice figure,
	#btn .staff figure,
	#btn .estate figure { float: none; }

	#btn figure {
		max-height: 300px;
		overflow: hidden;
	}
	#btn figure img {
		width: 100%;
		height: auto;
	}
	#btn .voice a::before,
	#btn .staff a::before,
	#btn .estate a::before {
		right: auto;
		left: 50%;
		top: -28px;
		margin: 0 0 0 -28px;
		border: none;
		border-left: 37px solid transparent;
		border-right: 37px solid transparent;
	}
	#btn .voice a::before { border-bottom: 28px solid #D9A300; }
	#btn .voice a:hover::before {
		border-color: transparent;
		border-bottom-color: #CA8002;
	}
	#btn .staff a::before { border-bottom: 28px solid #14A6D6; }
	#btn .staff a:hover::before {
		border-color: transparent;
		border-bottom-color: #1085AB;
	}

	#btn .estate a::before { border-bottom: 28px solid #65A93E; }
	#btn .estate a:hover::before {
		border-color: transparent;
		border-bottom-color: #568F34;
	}

	#btn.re210610 {
		margin-top: 60px;
	}
	#btn.re210610 > div {
		width: calc(100% / 3);	
		height: 100%;
	}
	#btn.re210610 > div a {
		width: 100%;
	}
	#btn.re210610 > div a::before {
		content: none;
	}
	#btn.re210610 > div a p.ttl {
		font-size: 33px;
	}
	#btn.re210610 > div a:hover p.ttl {
		font-size: 33px;	
	}
	#btn.re210610 > div a p.txt {
		font-size: 16px;
	}

	#blog {
		width: auto;
		margin: 0 10px;
	}
}






/* ------------------------------------------------------------------------------------------------------------------------

/* 幅644px以下

------------------------------------------------------------------------------------------------------------------------ */

@media only screen and (max-width: 644px){
	
	.slider-pro .sd2021 h2.sp-layer {
		font-size: 24px;
	}
	.slider-pro h2.sp-layer,
	.slider-pro .slide01 h2.sp-layer {
		font-size: 21px;
	}
	.slider-pro h2.sp-layer span,
	.slider-pro .slide01 h2.sp-layer span {
		font-size: 32px;
	}
	.slider-pro .slide01 h2.sp-layer span {
		margin-bottom: 5px;
	}
	.slidelogo {
		bottom:10px;
		margin-left: -10px;
	}
	.slidelogo img {
		width: 61px;
		height: auto;
	}
	.sp-bottom-thumbnails {
		display: none;
	}

	.disaster{
		margin-top: 40px;
	}	
	.disaster p.pc{
		display: none;
	}
	.disaster p.sp{
		display: block;
		max-width:640px;
		width: 100%;
	}


	#concept .wrapper {
		margin: 0 10px;
	}
	#concept {
		margin: 40px 0 0;
	}
	#concept h1 {
		font-size: 22px;
		line-height: 28px;
		margin-bottom: 20px;
	}
	#concept p {
		font-size: 14px;
		line-height: 20px;
		margin-bottom: 5px;
		letter-spacing: 1px;
	}
	#concept .btn {
		margin: 20px -10px;
	}
	
	#info h1,/* #works h1,*/ #lineup h1 {
		margin-bottom: 20px;
	}
	#info h1 a,/* #works h1 a,*/ #lineup h1 a {
		font-size: 24px;
		line-height: 24px;
	}
	#info h1 a span/*, #works h1 a span*/ {
		font-size: 14px;
		line-height: 14px;
		letter-spacing: 2px;
		margin-top: 2px;
	}
	#lineup h1 a span {
		font-size: 14px;
		line-height: 18px;
		margin-top: 2px;
	}
	
	#info,#estate {
		margin: 40px 10px;
	}
	#info ul.event_list li {
		float: none;
		width: 100%;
		padding: 0;
		margin-bottom: 30px;
	}
	#info ul.event_list li a .image {
		width: 70%;
		margin: 0 auto;
	}
	#info ul.event_list li a .image span {
		width: 120px;
		height: 22px;
		line-height: 20px;
		font-size: 12px;
	}
	#info ul.event_list li a .text {
		height: auto;
	}
	#info ul.event_list li a h2 {
		font-size: 17px;
	}
	#info ul.event_list li a p {
		font-size: 13px;
		line-height: 18px;
	}
	#info ul.event_list li a p.date {
		margin: 7px 0;
	}
	
	#estate ul.estate_list li {
		float: none;
		width: 100%;
		padding: 0;
		margin-bottom: 30px;
	}
	#estate ul.estate_list li a .image {
		width: 70%;
		margin: 0 auto;
	}
	#estate ul.estate_list li a .image .cat_estate {
		width: 120px;
		height: 22px;
		line-height: 20px;
		font-size: 12px;
	}
	#estate ul.estate_list li a .image .pricedown{
		width: 50px;
		height: 50px;
		line-height: 1.3em;
		font-size: 11px;
	}
	#estate ul.estate_list li a .image .new{
		width: 50px;
		height: 50px;
		line-height: 1.3em;
		font-size: 16px;
	}
	#estate ul.estate_list li a .text {
		height: auto;
	}
	#estate ul.estate_list li a h2 {
		font-size: 17px;
	}
	#estate ul.estate_list li a p {
		font-size: 13px;
		line-height: 18px;
	}
	#estate ul.estate_list li a p.date {
		margin: 7px 0;
	}
	#estate p.old {
		margin: 0 auto;
	}
	#estate p.old a {
		padding: 0;
	}
	#estate p.old a:hover {
		padding-right: 0;
	}

	#info ul.news_list {
		margin: 20px 0 10px;
	}
	#info ul.news_list li a,
	#info ul.news_list li div {
		padding: 15px 10px;
	}
	#info ul.news_list li span.date {
		margin: 0 0 5px;
	}
	#info ul.news_list li span.date::after {
		display: none;
	}
	#info ul.news_list li p {
		clear: both;
		white-space:inherit;
		line-height: 1.5;
	}
	#info p.old {
		margin: 0 auto;
	}
	#info p.old a {
		padding: 0;
	}
	#info p.old a:hover {
		padding-right: 0;
	}
	
	
	
	#works ul.workslist li {
		width: 50%;
	}
/*	
	#works {
		margin: 40px 0 60px;
	}
	#works ul.workslist li {
		width: 50%;
		padding-bottom: 10px;
	}
	#works ul.workslist li a figcaption {
		font-size: 15px;
		line-height: 30px;
		height: 30px;
		padding: 0 10px;
	}
	#works ul.workslist li a figcaption::before {
		height: 2px;
		width: 10px;
		margin: -2px 5px 0 0;
	}
	#works ul.workslist li a .cat {
		line-height: 35px;
		font-size: 12px;
	}
	#works p.more {
		margin: 20px 20px 0;
	}
	#works p.more a {
		display: block;
		font-size: 14px;
		padding: 5px;
		width: auto;
	}*/
	/*.slick-prev,
	.slick-next {
		background-size: 18px 36px;
		margin-top: -15px;
		height: 36px;
		width: 18px;
	}*/
	
	
	/*#lineup li {
		width: 100%;
		float: none;
		margin: 0 0 20px;
	}
	#lineup li a {
		padding-top: 20px;
		background-color: #d5d5d5;
		border-top: none;
	}
	#lineup li.square a {
		background-color: #cae6e7;
	}
	#lineup li.square figure::after {
		border-top-color: #cae6e7;
	}
	#lineup li.nature a {
		background-color: #e0c48c;
	}
	#lineup li.nature figure::after {
		border-top-color: #e0c48c;
	}
	#lineup li.cocon a {
		background-color: #efe8a5;
	}
	#lineup li.cocon figure::after {
		border-top-color: #efe8a5;
	}
	#lineup li h2 {
		margin: 0 auto 10px;
		width: 135px;
	}
	#lineup li p {
		height: auto !important;
	}
	#lineup li figure::after {
		border-color: #d5d5d5 transparent transparent transparent;
	}
	*/
	#lineup {
		margin: 0 10px;
		width: auto;
	}
	#lineup li h2 {
		padding: 0 30px 10px;
	}
	#lineup li {
		width: 50%;
		padding: 0px;
	}
	#lineup li a {
	    padding: 24px 0 0;
	}
	#lineup li figure::after {
		border-width: 20px 15px 0 15px;
	}

	/*
	#lineup ul li.square figure,
	#lineup ul li.cocon figure,
	#lineup ul li.nature figure {
		float: none;
	}
	#lineup ul li.square figure img,
	#lineup ul li.cocon figure img,
	#lineup ul li.nature figure img {
		width: 100%;
		height: auto;
	}
	#lineup ul li.square a,
	#lineup ul li.cocon a,
	#lineup ul li.nature a {
		width: auto;
		height: auto;
		margin: 0;
		padding: 20px;
	}
	#lineup ul li.square a::before,
	#lineup ul li.cocon a::before,
	#lineup ul li.nature a::before {
		right: auto;
		left: 50%;
		top: -37px;
		margin: 0 0 0 -28px;
		border: none;
		border-bottom: 37px solid #828D93;
		border-left: 28px solid transparent;
		border-right: 28px solid transparent;
	}

	#lineup ul li.cocon a::before {
		border-bottom-color: #EBE0CE;
	}
	#lineup ul li.nature a::before {
		border-bottom-color: #885200;
	}

	#lineup ul li.square a:hover::before,
	#lineup ul li.cocon a:hover::before,
	#lineup ul li.nature a:hover::before {
		border-color: transparent;
		border-bottom-color: #828D93;
	}
	#lineup ul li.cocon a:hover::before {
		border-bottom-color: #EBE0CE;
	}
	#lineup ul li.nature a:hover::before {
		border-bottom-color: #885200;
	}

	#lineup ul li a h2 {
		height: 25px;
		margin-bottom: 15px;
	}
	#lineup ul li a h2 img {
		height: 25px;
		width: auto;
	}
	#lineup ul li a p {
		height: auto;
		font-size: 13px;
		line-height: 20px;
	}
	#lineup ul li a .more {
		margin-top: 20px;
		height: 30px;
		line-height: 26px;
		font-size: 18px;
	}
	*/

	
	
	#btn {
		margin: 60px 10px 30px;
	}
	#btn a p.ttl {
		font-size: 28px;
		line-height: 28px;
	}
	#btn a:hover p.ttl {
		font-size: 28px;
	}
	#btn a p.txt {
		margin: 10px 0 15px;
		font-size: 14px;
		line-height: 14px;
	}
	#btn a {
		padding: 20px 0 30px;
	}
	
	#btn.re210610 {
		display: block;
	}
	#btn.re210610 > div {
		width: 100%;	
	}
	#btn.re210610 > div a {
		width: 100%;
	}
	#btn.re210610 > div a::before {
		content: none;
	}
	#btn.re210610 > div a p.ttl {
		font-size: 28px;
	}
	#btn.re210610 > div a:hover p.ttl {
		font-size: 28px;	
	}
	#btn.re210610 > div a p.txt {
		font-size: 14px;
	}

	
	#blog li {
		float: none;
		width: 100%;
		height: 50px;
		margin-top: -2px;
	}
	#blog li a {
		width: 100%;
		height: 50px;
	}
	#blog li:last-of-type a {
		border: 2px solid #000;
	}
	#blog li a:hover::after {
		margin-top: -6px;
		width: 12px;
		height: 12px;
	}
	#blog li a img {
		width: auto;
		height: 24px;
		margin: 11px 0;
	}
	#blog li a div {
		margin: 5px 10px 0 0;
	}
	#blog li a div p {
		font-size: 19px;
		line-height: 19px;
		height: 19px;
	}
	#blog li a div span {
		font-size: 11px;
		line-height: 11px;
		height: auto;
		margin-top: 2px;
		letter-spacing: 1px;
	}
	
	
	
	.ban_casa_top {
		margin-top: 40px;
		margin-bottom: 0;
	}
	
	
}