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


/* ヘッダー */
header a{color:#FFF;}

/*共通ここから*/
body{background: #F5F5F5;}
.TOP_CONTENTS {width: 1000px;margin: 0 auto;margin-bottom: 100px;}
.TYTLES {margin-bottom: 40px;text-align: center;}
.TYTLES div {font-size: 12px; letter-spacing: 0.2em;}
.TOP_IMG{position: relative;}
.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;}

/*トップここから*/
.scrolldown1 {position: absolute;left: 50%;bottom: 10px;height: 50px;top: 46vw;}
.scrolldown1 span {position: absolute;left: -27px;top: -15px;color: #000;font-size: 0.7rem;letter-spacing: 0.15em;font-weight: 600;}
.scrolldown1::after {content: "";position: absolute;top: 0;width: 1px;height: 30px;background: #161616;animation: pathmove 1.4s ease-in-out infinite;opacity: 0;}
.top_tytle_logo {width: 240px;margin: 0 auto;margin-bottom: 20px;}
.top_tytle1 {letter-spacing: 4px;font-size: 18px;font-weight: 500;margin-top: 50px;letter-spacing: .2em;font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;}
.TOP_COPY {position: absolute;top: 26vw;right: 12vw;width: 4vw;}
.MAIN_COPY {position: absolute;bottom: -1vw;left: 3vw;width: 50vw;}
.top_tytles {position: absolute;color: black;z-index: 1;text-align: center;top: 19vw;width: 27vw;
left: 4vw;margin: 0 auto;line-height: 1.5;}
.point {position: absolute;width: 13vw;top: 9vw;right: 5vw;}
.top_copy {position: absolute; right: 0; bottom: 0; left: 0;}

@keyframes pathmove {
	0% {height: 0;top: 0;opacity: 0;}
	30% {height: 30px;opacity: 1;}
	100% {height: 0;top: 50px;opacity: 0;}
}


/*ニュースここから*/
.TOP_NEWS {	padding: 120px 0;}
.TOP_NEWS a{display: initial;text-decoration: underline;}
.TOP_NEWS a:hover{opacity: 0.5;}
table {width: 800px;margin: 0 auto;}
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;}





/*コンセプトここから*/
.TOP_CONCEPT_BACK{padding-bottom: 30px;padding-top: 150px;margin-top: -170px;background-size: cover; background-position: center; background-image: url(../img/background.jpg);}
.TOP_CONCEPT{display: flex;max-width: 960px;margin: 200px auto;flex-direction: row;justify-content: space-between;}
.CONCEPT_TYTLES{text-align: left;}
.TYTLE{font-size: 30px;letter-spacing: 6px;margin-bottom: 20px;color: #161616;line-height: 54px;text-align: center;}
.CON_TYTLE{text-align: left;}
.CONCEPT_TYTLE{font-size: 36px;text-align: left;writing-mode: vertical-rl; font-weight: bold; height: 380px;}
.TOP_CONCEPT_RIGHT{font-size: 15px;letter-spacing: 3px;line-height: 37px;position: relative;}
.TOP_CONCEPT_LEFT{width: 260px;position: relative;}
.CONCEPT_PHOTO1{width: 230px;position: absolute;left: -2vw;top: 270px;}
.CONCEPT_PHOTO2{width: 240px;position: absolute;top: 490px;right: -2vw;}
.CONCEPT_PHOTO1 img{border-radius: 5px;}
.CONCEPT_PHOTO2 img{border-radius: 5px;}



.top_concepts{text-align: center;background-size: contain;padding-bottom: 70px;}
.square {font-size: 18px;border: 1px solid #4d4d4d;padding: 15px 0px;width: 380px;margin: 0 auto;letter-spacing: 5px;}
.plus{font-size: 20px;padding: 0px;font-weight: bold;}
.equal{font-size: 20px;padding: 10px 0px;font-weight: bold;writing-mode: vertical-rl;
margin: 0 auto;}
.line {border-top: 1px solid #ccc;width: 700px;margin: 0 auto;margin-bottom: 40px;}
.concept_bun {letter-spacing: 1px;line-height: 40px;font-size: 16px;margin: 40px 0 0 0;}
.concept_bun_lo{line-height: 48px;}
.concept_img {width: 250px;margin: 10px;height: auto;}
.concept_img img{width: 100%;margin-left: 3px;}
.concept_imgs {display: flex;margin: 0 auto;width: 810px; margin-bottom: 50px;margin-top: 30px;}
.concept_img img{width: 100%;}
.name{letter-spacing: 4px;line-height: 40px;font-size: 23px;margin-left: 1vw;}


br.pad { display: none; }
@media screen and (min-width: 741px) and (max-width: 1000px) {
	br.pad { display: inline; }
	.TOP_CONCEPT { justify-content: space-around; }
	.CONCEPT_TYTLE { padding-left: 8vw; }
}




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

/*コンテンツここから*/
.TOP_CON{padding-top: 120px; padding-bottom: 40px;}
.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: 420px;position: absolute;z-index: 1;background: rgba(255,255,255,0.80);padding: 35px 45px;font-size: 15px;letter-spacing: 1px;text-align: justify;line-height: 24px;top: 60px;font-size: 16px;}
.CONTENTS_TEXT::before {position: absolute;background: none;top: -30px;z-index: -1;color: #00000010;font-size: 47px;letter-spacing: 5px; font-weight: bold;}
.CONTENTS_IMG{width: 620px;position: absolute;right: 0; transition: all .3s;}
.CONTENTS_IMG:hover { opacity: 0.5; }
/* .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;}
.CONTENTS_TEXT_LOCATION::before{content: "LOCATION";right: 0px;}
.CONTENTS_TEXT_OUTLINE::before{content: "OUTLINE";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;
}

.CONTENTS_TEXT:hover .btnarrow4{opacity: 0.5; transition: all .3s;}

/*矢印と下線の形状*/
.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した際の移動*/
.CONTENTS_TEXT:hover .btnarrow4::before{
    left:90%;
}

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




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






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

	/*共通ここから*/
	.menu-btn i {	color: #3d3d3d;}
	header.scroll-nav{border-bottom: none;}
	h2{text-align: center;}

	/*トップここから*/
	.TOP_IMG{padding-top:57px;background: white;}
	.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: 20vw;margin: 0 auto;left: 8vw;top: 23vw;}
	.top_tytle_logo {width: 50vw;}
	.top_tytle1 {font-size: 16px;letter-spacing: 0.1em;margin-top: 50px;}
	.MAIN_COPY {left: 0;width: 52vw;}
	.TOP_COPY {top: 60vw;right: 15vw;width: 11vw;}
	.point {width: 33vw;margin: 0 auto;margin-top: 40px;}

	/*ニュースここから*/
	.TOP_NEWS {padding: 0 0 80px;margin-bottom: 00px;background: none;}
	.TYTLES {margin-bottom: 0px;}
	table {width: 95vw;}
	tr {padding: 12px 0px;width: 95vw;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_BACK{padding-top: 20px;padding-bottom: 0px;}
	.BUTTONS {width: 100vw;margin: 0;padding-bottom: 80px;padding-top: 40px;}
	.btn{margin: 10px auto;}
	.BUTTONS .TYTLES{margin-bottom: 20px;width: 100vw;}
	.BUTTON{flex-direction: column;width: 100vw;}

	/*コンセプトここから*/
	.CONCEPT_TYTLE{font-size: 24px;margin: 0 auto;margin-top: 26px;letter-spacing: 3px;font-weight: 600;text-align: center; height: fit-content;}
	.CONCEPT_TEXT{margin: 0 auto;text-align: justify;font-size: 15px;line-height: 30px;}
	.CONCEPT_IMG{width: 90vw;}
	.TOP_CONCEPT{flex-direction: column;width: 90vw;margin-bottom: 20px;margin-top: 0px;}
	.TOP_CONCEPT_RIGHT{text-align: justify;margin-top: 20px;line-height: 2; letter-spacing: 0.1em; padding-bottom: 120px;}
	.TOP_CONCEPT_LEFT{width: 90vw;}
	.CONCEPT_PHOTO1 {width: 52vw;position: absolute;left: 0vw;top: -14vw;z-index: 1;}
	.CONCEPT_PHOTO2 {width: 67vw;position: absolute;top: 9vw;right: -4vw;z-index: 1;}
	.CONCEPT_PHOTO3 {width: 55vw;position: initial;margin-top: 50px;margin-left: 4vw;}
	.CONCEPT_PHOTO4 {width: 55vw;right: 3vw;position: initial;margin: 0 0 0 auto;margin-top: -14vw;margin-right: 3vw;}
	.CONCEPT_PHOTO3 img{border-radius: 0px;margin-bottom: 15px;}
	.CONCEPT_PHOTO4 img{border-radius: 0px;margin-bottom: 15px;}
	.TYTLES div.CON_TYTLE{width: auto;line-height: 1.5;margin-top: 0;}
	.TOP_CONCEPT_BACK{padding-top: 230px;}


  /*ランドプランここから*/
	.TOP_LANDPLAN{padding-bottom: 0px; padding-top: 80px;}
	.LANDPLAN_WRAP{flex-direction: column;width: 90vw;}
	.LANDPLAN_TEXT{width: 90vw;padding-bottom: 80px;}
	.LANDPLAN_IMG{width: 90vw;margin: 0 auto;margin-top: 30px;}
	.LANDPLAN_KUKAKU{width: 90vw;height:80vw;padding: 0;margin-top: 30px;background: none;}
	.LANDPLAN_KUKAKU img { width: 100%; height: 100%; object-fit: cover; }
	.TYTLE{margin-bottom: 0px;margin-top: 20px;font-weight: 600;text-align: center;font-size: 24px;writing-mode: horizontal-tb;}

	/*コンテンツ*/
	.CONTENTS_WRAP{margin-top: 40px;width: 100vw;margin-top: 60px;}
	.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; z-index: 3;}
	.CONTENTS_TEXT::before {right: auto; left: 0;top: 36vw; font-size: 15vw; color: #FFFFFF90;}


  .TOP_CON{padding-bottom: 0px; padding-top: 80px; }

}