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

/*共通ここから*/
.TOP_CONTENTS {width: 1000px;margin: 0 auto;margin-bottom: 100px;}
.TYTLES {text-align: center;margin-bottom: 40px;display: flex;align-items: center;}
.TYTLES div {font-size: 12px;}
.TOP_IMG small {position: absolute;color: white;top: 54vw;letter-spacing: 1px;position: absolute;color: white;top: 53.5vw;letter-spacing: 1px;width: 99vw;text-align: right;font-size: 0.9rem;margin-right: 1vw;}
.back_navy {background: #233143;}
.text_white {color: #ffffff;}


/*トップここから*/
.MAIN_COPY {position: absolute;right: 8vw;text-align: center;top: 23vw;width: 21vw;margin: 0 auto;}
.scrolldown1 {position: absolute;left: 50%;bottom: 10px;height: 50px;top: 46vw;}
.scrolldown1 span {position: absolute;left: -27px;top: -15px;color: #fff;font-size: 0.7rem;letter-spacing: 0.15em;font-weight: 600;}
.scrolldown1::after {content: "";position: absolute;top: 0;width: 1px;height: 30px;background: #eee;animation: pathmove 1.4s ease-in-out infinite;opacity: 0;}
.top_tytle_logo {width: 240px;margin: 0 auto;margin-bottom: 20px;height: 40px;}
.top_tytles {position: absolute;color: white;top: 100px;text-align: center;top: 14vw;width: 40vw;left: 0;right: 0;margin: 0 auto;}
.top_tytle1 {left: 0;margin: 0 auto;position: absolute;right: 0;top: -4vw;font-size: 1.3vw;letter-spacing: .1em;}
.top_tytle2 {font-size: 1.3vw;letter-spacing: .1em;margin-top: 6vw;font-weight: bold;}
.top_tytle_logo {width: 20vw;left: 0;margin: 0 auto;position: absolute;right: 0;top: -1vw;}
@keyframes pathmove {
	0% {height: 0;top: 0;opacity: 0;}
	30% {height: 30px;opacity: 1;}
	100% {height: 0;top: 50px;opacity: 0;}
}

/*ニュースここから*/
.TOP_NEWS_WRAP {padding: 70px 0;}
.TOP_NEWS{width: 880px;margin: 0 auto;}
.TOP_NEWS a{display: initial;text-decoration: underline;}
.TOP_NEWS a:hover{opacity: 0.5;}
table {width: 880px;margin: 0 auto;}
table a{color: white;}
tr {border-bottom: 1px solid #ccc;display: block;width: 800px;padding: 0 20px;padding-bottom: 5px;display: flex;padding: 12px 20px;}
th {font-weight: initial;letter-spacing: 2px;margin-right: 40px;display: inline-block;line-height: 24px;}
td {font-size: 15px;letter-spacing: 2px;}


/*ボタン*/
.BUTTONS {display: flex;margin-bottom: 70px;width: 880px;flex-wrap: wrap;margin: 0 auto;justify-content: center;margin-bottom: 80px;margin-top: 40px;flex-direction: column;}
.BUTTON{display: flex;justify-content: center;}
.btn{position: relative;overflow: hidden;text-decoration: none;display: inline-block;border: 2px solid #555;text-align: centeroutline: nonetransition: ease .2s;width: 270px;text-align: center;margin: 10px;padding: 15px 0;box-shadow: 2px 2px 4px #ccc;}
.btn span {position: relative;z-index: 3;color:#333;font-size: 17px;letter-spacing: 2px;}
.btn:hover span{color:#fff;}
.bgskew::before {content: '';position: absolute;top: 0;left: -130%;background:#333;width:120%;height: 100%;transform: skewX(-25deg);}
.bgskew:hover::before {animation: skewanime .5s forwards;}
@keyframes skewanime {100% {left:-10%;}}
.BUTTONS small{font-size: 13px;letter-spacing: 1px;}


/*コンセプトここから*/
.TOP_CONCEPTS{width: 880px;margin: 0 auto;padding: 100px 0px 100px 0;}
h2{font-family: Impact;font-size: 45px;text-align: center;letter-spacing: .1em;display: flex;flex-direction: row;align-items: center;}
.CONCEPT_TYTLE {font-size: 25px;margin-top: 40px;margin-bottom: 20px;font-weight: bold;letter-spacing: 3px;text-align: left;}
.CONCEPT_TEXT{line-height: 35px;text-align: justify;font-size: 16px;letter-spacing: .1em;}
.TYTLES div{width: 100%;font-size: 1rem;text-align: center;display: inline-block;text-align: left;margin-left: 20px; font-weight: bold;}
.CONCEPT_IMG{width: 60vw;margin: 0 auto;margin-top: 30px;margin-bottom: -100px;position: relative;max-width: 880px;}
.CONCEPT_IMG small {font-size: 0.7vw;position: absolute;bottom: 1vh;left: 20px;letter-spacing: 0;line-height: 20px;}

/*ランドプランここから*/
.TOP_LANDPLAN{padding-top: 50px;padding-bottom: 80px;background: #EDEDED;}
.LANDPLAN_WRAP{display: flex;flex-direction: row;margin: 0 auto;justify-content: space-between;margin-top: 40px;align-items: center;width: 1000px;}
.LANDPLAN_TEXT{width: 500px;line-height: 30px;letter-spacing: 1px;text-align: justify;}
.LANDPLAN_TEXT small{line-height: 18px;display: inline-block;text-align: justify;margin-top: 20px;}
.LANDPLAN_KUKAKU{width: 1000px;background: white;margin: 0 auto;padding: 10px 50px;padding: 10px 80px;margin-top: 40px;}
.LANDPLAN_IMG{width: 450px;}

/*コンテンツここから*/
.TOP_CON{padding-top: 80px;}
.CONTENTS_TYTLES{width: 1000px;margin: 0 auto;margin-bottom: 50px;}
.CONTENTS_WRAP{width: 1000px;margin: 0 auto;}
.CONTENTS{position: relative;height: 380px;}
.CONTENTS_TYTLE{color: rgba(155,145,135,0.23);font-weight: 600;font-size: 54px;letter-spacing: 11px;}
.CONTENTS_TEXT{width: 390px;position: absolute;z-index: 1;background: rgba(237,237,237,0.80);padding: 35px 45px;font-size: 15px;letter-spacing: 1px;text-align: justify;line-height: 24px;top: 60px;}
.CONTENTS_TEXT::before {position: absolute;background: none;top: -33px;z-index: -1;color:rgba(155,145,135,0.23);font-weight: 600;font-size: 54px;letter-spacing: 11px;}
.CONTENTS_IMG{width: 630px;position: absolute;right: 0;}
.CONTENTS_IMG::before {content: "";width: 190px;height: 190px;position: absolute;background: #A09F9F;bottom: -25px;right: -25px;z-index: -1;}
.CONTENTS_TEXT_PLAN::before{content: "PLAN";left: 0px;font-family: Impact;}
.CONTENTS_TEXT_EQUIPMENT::before{content: "EQUIPMENT";right: 0px;font-family: Impact;}
.CONTENTS_TEXT_GALLERY::before{content: "GALLERY";left: 0px;font-family: Impact;}
.CONTENTS_TEXT_OUTLINE::before{content: "OUTLINE";left: 0px;font-family: Impact;}
.CONTENTS_TEXT_LOCATION::before{content: "LOCATION";left: 0px;}
.CONTENTS_TEXT_R{right: 0;}
.CONTENTS_IMG_R{left: 0;}
.CONTENTS_IMG_R::before{left: -25px;}


/*矢印が右に移動する*/
.btnarrow4{
    /*矢印と下線の基点とするためrelativeを指定*/
	position: relative;
    /*形状*/
	padding: 0 20px;
    color: #333;
    text-decoration: none;
    outline: none;
		margin-top: 20px;
		display: block;
		width: 150px;
padding: 0;
font-size: 16px;
letter-spacing: 2px;
}

.btnarrow4:hover{opacity: 0.5}

/*矢印と下線の形状*/
.btnarrow4::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
	position: absolute;
    bottom:7px;
    left:77%;
    /*下線の形状*/
    width: 85%;
    height: 1px;
	background:#333;
    /*アニメーションの指定*/
    transition: all .3s;
}

.btnarrow4::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    bottom:11px;
    right:-63%;
    /*矢印の形状*/
    width: 15px;
    height:1px;
	background:#333;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow4:hover::before{
    left:90%;
}

.btnarrow4:hover::after{
    right:-75%;
}






/*PC・SP*/
.pc {display: block;}
.sp {display: none;}






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

	/*共通ここから*/

	/*トップここから*/
	.MAIN_COPY {top: 56vw;right: 0;left: 0;margin: 0 auto;top: 28vw;width: 67vw;}
	.TOP_IMG small {top: 54vw;letter-spacing: 1px;color: white;top: 158.5vw;letter-spacing: 1px;width: 99vw;text-align: left;font-size: 0.8rem;margin-left: 1vw;font-weight: bold;font-weight: initial;}
	.scrolldown1 {top: 145vw;}
	.top_tytles {width: 100vw;margin: 0 auto;left: 0;right: 0;top: 45vw;}
	.top_tytle_logo {width: 62vw;left: 0;right: 0;margin: 0 auto;top: -4vw;}
	.top_tytle1 {top: -7vh;font-size: 17px;}
	.top_tytle2 {font-size: 16px;top: 8vh;margin-top: 9vh;}
	.point {width: 67vw;margin: 0 auto;margin-top: 40px;}

	/*ニュースここから*/
	.TOP_NEWS_WRAP{margin-bottom:0px;}
	.TOP_NEWS {width: 90vw;padding: 0;margin-bottom: 0px;background: none;}
	.TYTLES {margin-bottom: 0px;}
	.CONTENTS_TYTLES{width: 90vw;}
	table {width: 95vw;}
	tr {padding: 12px 0px;width: 90vw;flex-direction: column;text-align: left;}


	/*PC・SP*/
	.pc {display: none;}
	.sp {display: block;}
	#footer span.pc {display: none;}
	#footer span.sp {display: block;}
	#footer strong a {display: flex;justify-content: center;align-items: center;	}
	#footer strong a img {height: 24px;}
	.TOP_CONTENTS .TYTLES {margin-bottom: 30px;	}

	/*ボタン*/
	.BUTTONS {width: 100vw;background: #b4b4b4;margin: 0;padding: 40px 5vw 40px 5vw;width: 100vw;}
	.btn{background: white;margin: 10px auto;width: 90vw;}
	.BUTTONS .TYTLES{margin-bottom: 20px;width: 90vw;}
	.BUTTON{flex-direction: column;width: 90vw;}

		/*コンセプトここから*/
		.TOP_CONCEPTS{width: 90vw;padding: 70px 0px 100px 0;}
  .CONCEPT_TEXT{width: 90vw;margin: 0 auto;text-align: justify;font-size: 15px;line-height: 30px;}
	.CONCEPT_TYTLE{margin-top: 25px;}
	.CONCEPT_TYTLE{font-size: 20px;}
	.CONCEPT_IMG{width: 90vw;}
	.CONCEPT_IMG{position: relative;margin-bottom: -30px;}
	.CONCEPT_IMG small {font-size: 10px;position: absolute;top: 20vh;left: auto;width: 90vw;color: #6b6b6b;line-height: 17px;}

  /*ランドプランここから*/
	.TOP_LANDPLAN{padding-bottom: 0px;}
	.LANDPLAN_WRAP{flex-direction: column;width: 90vw;}
	.LANDPLAN_TEXT{width: 90vw;}
	.LANDPLAN_IMG{width: 90vw;margin: 0 auto;margin-top: 30px;}
	.LANDPLAN_KUKAKU{width: 100vw;padding: 0;margin-top: 30px;background: none;}

	/*コンテンツ*/
	.CONTENTS_WRAP{margin-top: 40px;width: 100vw;margin-top: 60px;margin-top: 20px;}
	.CONTENTS{width: 100vw;height: 410px;height: auto;margin-bottom: 70px;display: flex;flex-direction: column-reverse;}
	.CONTENTS_R{flex-direction: column-reverse;}
	.CONTENTS_IMG::before {display: none;}
	.CONTENTS_IMG{width: 100vw;z-index: 2;position: initial;}

	.CONTENTS_TEXT{width: 100VW;top: 120px;position: initial;}
	.CONTENTS_TEXT_PLAN::before{display: none;}
	.CONTENTS_TEXT_EQUIPMENT::before{display: none;}
	.CONTENTS_TEXT_GALLERY::before{display: none;}
	.CONTENTS_TEXT_OUTLINE::before{display: none;}
	.CONTENTS_TEXT_LOCATION::before{display: none;}

	.CONTENTS_IMG_PLAN::after {font-weight: 600;color: white;content: "PLAN";position: absolute;top: 0px;top: -10px;font-size: 50px;letter-spacing: 5px;font-family: Impact;right: 0;}
	.CONTENTS_IMG_EQUIPMENT::after {font-weight: 600;color: white;content: "EQUIPMENT";position: absolute;top: 0px;top: -10px;font-size: 50px;letter-spacing: 5px;font-family: Impact;right: 0;}
	.CONTENTS_IMG_GALLERY::after {font-weight: 600;color: white;content: "GALLERY";position: absolute;top: 0px;top: -10px;font-size: 50px;letter-spacing: 5px;font-family: Impact;right: 0;}
	.CONTENTS_IMG_OUTLINE::after {font-weight: 600;color: white;content: "OUTLINE";position: absolute;top: 0px;top: -10px;font-size: 50px;letter-spacing: 5px;font-family: Impact;right: 0;}

	.CONTENTS_IMG_LOCATION::after{font-weight: 600;color: rgba(155,145,135,0.23);content: "LOCATION";position: absolute;top:0px;top: -46px;font-size: 50px;letter-spacing: 5px;}
  .TOP_CON{padding-bottom: 0px;}

}