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

/* ヘッダー */
header.scroll-nav .logo, header.scroll-nav ul li a.H_TOP { color:#36ae1f; }
.H_TOP { color:#36ae1f; }

/*共通ここから*/
body{font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;}
h2{font-size: 16px; }
.back_gray{background: #fff;}
.TOP_CONTENTS {	width: 1000px;margin: 0 auto;margin-bottom: 100px;}
.TYTLES {text-align: center;margin-bottom: 40px;}
.TYTLES div {font-size: 12px;width: 500px;margin: 0 auto;}

.TOP_IMG small {position: absolute;color: white;top: 54vw;position: absolute;color: white;top: 53.5vw;width: 99vw;text-align: right;font-size: 0.9rem;margin-right: 1vw;}
header{border-bottom:none;}
header a { color:#000; }
/* header a{color: white;} */

/* ボタン */
.original-button {display: flex;align-items: center;justify-content: center;line-height: 1;text-decoration: none;color: #161616;font-size: 14px;border-radius: 20px;width: 270px;height: 40px;border: 1px solid #333333;transition: 0.3s;padding: 20px 0;letter-spacing: .05em;}
.original-button:hover {opacity: .7;}


/*トップここから*/
.MAIN_COPY {position: absolute;right: 8vw;text-align: center;top: 23vw;width: 21vw;margin: 0 auto;}
.scrolldown1 {position: absolute;left: 50%;bottom: 18vh;height: 50px;z-index: 100;}
.scrolldown1 span {position: absolute;left: -27px;top: -15px;color: #fff;font-size: 0.7rem;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: 320px;margin: 0 auto;margin-bottom: 20px;height: 40px;}
.TOP_IMG{position: relative;}
.TOP_TEXTS{position: absolute; top: 16vh;right: 0;left: 10%;text-align: left; color: #fff;}
.TOP_TEXT1 {letter-spacing: .2em;font-size: 20px;margin-bottom: 5px;}
.TOP_TEXT2 {letter-spacing: .2em;margin-top: 20px;line-height: 2em;font-size: 20px;}
.TOP_TEXT3 { width:30%; margin:30px auto; }
h1{font-size: 40px;letter-spacing: .2em; font-weight: initial; line-height:1.5em; }
.TOP_ENG {position: absolute;top: 13vh;left: 16vw;right: 9vw;width: 13vw;}
.TOP_BANNER{background: #161616;}
.TOP_CONCEPT_RIGHT{text-align: justify;}
.TOP_CONCEPT_RIGHT em{text-combine-upright: all;font-style: normal;}
.TOP_START { font-size:72px; font-weight:normal;letter-spacing: .2em; line-height:1.4; }
.top_attention {
	position: absolute;
	left: 0;
	right: 0;
	font-size: 24px;
	letter-spacing: 0.2em;
	letter-spacing: 0.2em;
	border:
  1px solid #000;
	width: 340px;
  text-align: center;
  margin-top: 16px;
  }

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

/* トップのフェードイン */
.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1s ease, transform 1s ease;
  }
  
  .fade-in.show {
	opacity: 1;
	transform: translateY(0);
	color:#000;
	left:60%;
  }
  


/*コンセプトここから*/
.TOP_CONCEPT_BACK{}
.TOP_CONCEPT_WRAP{display: flex;flex-direction: row;justify-content: space-between;}
.TOP_CONCEPT{-ms-writing-mode: tb-rl;margin: 0 auto; width: 62vw;padding: 100px 0;}
.CONCEPT_TYTLE{text-align: center;font-size: 22px;letter-spacing: .2em;margin-bottom: 20px;color: #161616;font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;line-height: 2em;text-align: left;}
.TOP_CONCEPT_RIGHT{font-size: 16px;letter-spacing: .2em;width: 787px;line-height: 2em;}
.TOP_CONCEPT_LEFT{position: relative;}
.TOP_CONCEPT_LEFT h2{width: 80px;margin-right: 60px;}
.TYTLES div.CON_TYTLE{width: 270px;}
.TOP_BACK{background: url(https://www.will-produce.com/kounosu/top/img/concept_background.jpg);background-size: cover;}

/*ランドプランここから*/
.TOP_LAND_WRAP{width: 1030px;margin: 0 auto;display: flex;padding: 100px 0 100px 0;justify-content: space-between;}
.LAND_LEFT_TYTLE small{letter-spacing: .2em;display: inline-block;font-size: 35px; line-height:2em; }
.LAND_LEFT_CON{display: flex;align-items: center;margin-bottom: 15px;}
.LAND_LEFT_CON_WRAP{margin-top: 35px;}
.LAND_LEFT_CON_IMG{width: 175px;}
.LAND_LEFT_CON_TEXTS{margin-left: 25px;width: 255px;}
.LAND_LEFT_CON_TEXTS_TY{font-size: 19px;margin-bottom: 13px;letter-spacing: .2em;}

.LAND_KUKAKU{border: 1px solid #707070;width: 450px;margin-right: 55px;display: flex;align-items: center;}
.LAND_TEXTS_WRAP{display: flex;flex-direction: row;margin-top: 40px;}
.LAND_TEXTS{width: 400px;}
.LAND_TEXT {text-align: justify;letter-spacing: .2em;line-height: 2em;margin-bottom: 30px; font-size: 16px; line-height: 2em;}
.LAND_RIGHT{width: 80px; margin-top: 140px;}


/*プランここから*/
.PLAN_MATOME {display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding: 70px 0;}
.PLAN_LEFT{margin-right: 90px;margin-left: 19vw;}
.PLAN_WRAP{width: 400px;flex-direction: row;margin: 0 auto;justify-content: space-between;margin-top: 40px;align-items: flex-start;display: flex;}
.PLAN_LEFT a{width: 400px; margin-top:20px; }
.PLAN_LEFT a:hover{background: #161616;color: white;}
.PLAN_TEXT{width: 270px;line-height: 35px;letter-spacing: .2em;text-align: justify;margin-bottom: 20px;}
.PLAN_TEXT small{line-height: 18px;display: inline-block;text-align: justify;margin-top: 20px;}
.PLAN_LINK{width: 860px;margin: 0 auto;}
.PLAN_LINK .btnarrow4{margin: 0 0 0 auto;margin-top: 20px;margin-right: 112px;}
.PLAN_TEXT .original-button{width: 370px;}
.PLAN_TYTLES small {letter-spacing: .2em; display: inline-block;font-size: 35px; line-height: 0px; }
.PLAN_TYTLE{width: 80px;}
.PLAN_IMG {width: 50vw;}
.PLAN_IMG img{width: 100%;}
.PLAN_TEXTS { margin-top:20px; }

/*ギャラリーここから*/
.TOP_GA_TEXTS{width: 1000px;margin: 0 auto;display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 60px;}
.GA_TYTLES{width: 270px;margin-bottom: 0px;}
.TYTLES div.GA_TYTLE{width: 270px;}
.TOP_GA_TEXT{width: 650px;letter-spacing: .2em;line-height: 2em;}
.TOP_GA_TEXT .btnarrow4{margin: 0 0 0 auto;margin-top: 10px;margin-right: 105px;}
.TOP_GA{padding-top: 60px;padding-bottom: 100px;}


/*コンテンツここから*/
.CONTENTS_WRAP{width: 1030px;margin: 0 auto;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;}
.TYTLES{text-align: left;}
.TYTLES small{letter-spacing: 2px;margin-bottom: 10px;display: inline-block;font-size: 15px;}
.CONTENTS{width: 315px;margin-bottom: 80px;}
.CONTENTS_TEXT_TYTLE{display: flex;align-items: center;}
.CONTENTS_TEXT_TYTLE_E {font-size: 25px;letter-spacing: 4px;margin: 15px 0 10px 0;}
.CONTENTS_TEXT_TYTLE_J{margin-top: 5px;margin-left: 12px;letter-spacing: 2px;}
.TOP_CON{padding: 80px 0 60px 0;}
.CONTENTS_WHOLE{width: 1030px;margin: 0 auto;}
.CONTENTS_PHOTO {cursor: pointer;max-width: 500px;overflow: hidden;width: 100%;}
.CONTENTS_PHOTO img {height: auto;transition: transform .6s ease;/* ゆっくり変化させる */width: 100%;}
.CONTENTS_PHOTO:hover img {transform: scale(1.1);/* 拡大 */  }
.CONTENTS_TEXT{margin-bottom: 30px;}
.CONTENTS_TEXT_DES{letter-spacing: .2em;line-height: 27px;}


/*ニュースここから*/
.TOP_NEWS {	padding: 70px 0; text-align: center; background-color:#156a7d; color:#fff; }
.TOP_NEWS a{display: initial;text-decoration: underline; color:#fff; }
.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: 2em;}
td {font-size: 16px;letter-spacing: .2em;}
.NEWS_TYTLES{margin-bottom: 20px;}
.NEWS_TYTLES small{letter-spacing: .2em;display: inline-block;font-size: 35px;}

/* 環境・物件概要ここから */
.TOP_LO_WRAP{width: 1030px;margin: 0 auto;padding: 70px 0;}
.TOP_LO_CON{display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
.TOP_LO_CON_R{flex-direction: row-reverse;margin-top: 60px;}
.TOP_LO_IMG{width: 590px;}
.TOP_LO_TEXTS{width: 380px;}
.LO_TYTLES small{letter-spacing: 2px;margin-bottom: 10px;display: inline-block;font-size: 15px;}
.LO_TEXT{margin-top: 20px;letter-spacing: .2em;line-height: 2em;margin-bottom: 20px;}


/* fadeUp */
.fadeUp{animation-name:fadeUpAnime;animation-duration:0.5s;animation-fill-mode:forwards;opacity:0;}
@keyframes fadeUpAnime{from {opacity: 0;transform: translateY(100px);}to {opacity: 1;transform: translateY(0);}}
.fadeUpTrigger{opacity: 0;}/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

/* 光らせる */
.shine-wrapper {
	position: relative;
	overflow: hidden;
  }
  
  .shine-wrapper img.pc {
	display: block;
	width: 100%;
	height: auto;
  }
  
  .shine-wrapper img.sp {
	display: none;
	width: 100%;
	height: auto;
  }
  .shine {
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
	  120deg,
	  rgba(255, 255, 255, 0) 0%,
	  rgba(255, 255, 255, 0.6) 50%,
	  rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-20deg);
	animation: shineAnimation 3s infinite;
	pointer-events: none;
  }
  
  @keyframes shineAnimation {
	0% {
	  left: -75%;
	}
	100% {
	  left: 125%;
	}
  }



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





@media screen and  (max-width:1200px) {
	.TOP_TEXTS { top: 17vh; }
	.TOP_TEXT1 { font-size:20px; }
	h1 { font-size:30px; }
	.TOP_START { font-size:54px; }
	.top_attention { font-size:20px; width:380px; }
}


@media screen and (max-width: 740px) {
	.TOP_TEXTS { top: 23vh; }
	.shine-wrapper img.pc {
	  display: none;
	}
	.shine-wrapper img.sp {
	  display: block;
	}
  }



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

	/*共通ここから*/
	.TYTLES div{width: 90vw;}
	.TYTLES {margin-bottom: 0px;width: 90vw;margin: 0 auto;}

	/* ヘッダーここから */
	header { border-bottom: 1px solid #fff; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
		background: rgba(255,255,255,0.9); }
	.menu-icon { background: #333; }
	.menu-icon::before,.menu-icon::after { background: #333; }
	header.scroll-nav .menu-icon  { background: #333; }
	header.scroll-nav .menu-icon::before,
header.scroll-nav .menu-icon::after {
  background: #333;
}

	/* ボタンここから */
	.PLAN_WRAP a {width: 90vw;}

	/* ハンバーガーメニュー */
	.menu-btn i {color: #333;}
	/* header{border-bottom:1px solid #000;} */


	/*トップここから*/
	.MAIN_COPY {top: 56vw;right: 0;left: 0;margin: 0 auto;top: 28vw;width: 67vw;}
	.TOP_IMG {height: auto;}
	.TOP_IMG small {top: 54vw;letter-spacing: .2em;color: white;top: 158.5vw;letter-spacing: .2em;width: 99vw;text-align: left;font-size: 0.8rem;margin-left: 1vw;font-weight: bold;font-weight: initial;}
	h1 {font-size: 24px; letter-spacing: 0.05em; line-height:40px; }
  .TOP_TEXTS{text-align: center;left: 0; }
	.TOP_TEXT1{font-size: 18px; display:none; }
	.TOP_TEXT2 {font-size: 18px;margin-top: 10px;width: 100vw;text-align: center;}
	.TOP_ENG {position: absolute;top:68vw;right: 11vw; width: 75vw;}
	.scrolldown1 {top: 151vw;}
	.TOP_START { font-size:60px; line-height:1.5;}
	.top_attention { margin:0 auto; font-size:18px; width:250px; margin-top:10px; }
	.fade-in.show {left:0; }

	/*コンセプトここから*/
	.BACK{background: none;background:#fff;}
	.TOP_CONCEPT_WRAP{flex-direction: column;}
	.TOP_CONCEPT_LEFT h2{margin-left: 0;font-size: 24px;letter-spacing: .2em;width: 90vw;margin: 0 auto;margin-bottom: 20px;}
	.TOP_CONCEPT{writing-mode: initial;flex-direction: column;width: 90vw; margin-top: 0px;padding-top: 50px;padding: 50px 0 50px 0;}
	.TOP_CONCEPT_LEFT{width: 90vw;}
	.TOP_CONCEPT_RIGHT{text-align: justify;margin-top: 20px;font-size: 16px;line-height: 2em;width: 90vw;text-align: justify;letter-spacing: .2em;line-height: 2em;margin-top: auto;}
	.VIEW {background-image: none;height: auto;}
	.CON_TYTLE_SP { line-height:2em; font-size:22px; letter-spacing: .2em; color: #36ae1f; }

  /*ランドプランここから*/
	.TOP_LAND{padding-bottom: 0px;}
	.TOP_LAND_WRAP{width: 100vw;flex-direction: column;padding: 80px 0 80px 0;}
	.LAND_LEFT_TYTLE h2{font-size: 16px;letter-spacing: .2em;}
	.LAND_LEFT_CON{margin-bottom: 25px;}
	.LAND_LEFT_CON_WRAP{width: 90vw;}
	.LAND_LEFT_CON_TEXTS_TY{font-size: 18px;margin-bottom: 10px;}
	.LAND_LEFT_CON_TEXTS_TE{font-size: 13px;}
	.LAND_RIGHT{width: 18vw;margin: 0 auto;}
	.LAND_TEXTS_WRAP{flex-direction: column-reverse; margin-top:0; }
	.LAND_KUKAKU{width: 90vw;margin: 0 auto; padding:20px 0;}
	.LAND_LEFT_TYTLE small{font-size: 28px;}
	.LAND_TEXTS{display: flex;flex-direction: column-reverse;width: 100vw;margin: 0 auto;}
	.LAND_LEFT_TYTLE {width: 90vw;margin: 0 auto;}
	.LAND_IMG{width: 100vw;}
	.LAND_IMG p {width:90%; margin: 0 auto; margin-top:10px; }
	.LAND_TEXT{width: 90vw;margin: 0 auto;margin-top: 20px;margin-bottom: 20px;}
	.LAND_TYTLE_SP{font-size: 22px;width: 90vw;margin: 0 auto;margin: 0 auto;margin-top: 20px;margin-bottom: 20px; letter-spacing: .2em;
		color: #36ae1f;
		line-height: 2em;}


	/*プランここから*/
	.TOP_PLAN{width: 90vw;}
	.PLAN_MATOME{flex-direction: column-reverse;padding-top: 0px;}
	.PLAN_WRAP{flex-direction: column;width: 90vw;}
	.PLAN_TEXT {width: 90vw;margin-top: 10px;text-align: justify;line-height: 30px;margin-bottom: 30px;margin-top: 20px;
margin-bottom: 20px;}
	.PLAN_TYTLES{display: flex;align-self: center;}
	.PLAN_TYTLES h2{font-size: 16px;line-height: 2em;margin-left: 10px;}
	.PLAN_TYTLES small{font-size: 28px;margin-bottom: 0;line-height: 2em;}
	.PLAN_TYTLE_SP{margin: 20px 0;letter-spacing: .2em;font-size: 23px;}
	.PLAN_LEFT{width: 90vw;margin: 0 auto;}
	.PLAN_LEFT a{width: 90vw;}
	.PLAN_IMG {width: 100vw;}

	/*ギャラリー*/
	.TOP_GA{padding-top: 0px;}
	.TOP_GA_TEXTS{width: 90vw;flex-direction: column;}
	.TOP_GA_TEXT{width: 90vw;margin-top: 20px;}
	.TOP_GA ul{width: 100vw;}
	.TYTLES div.GA_TYTLE{width: auto;}
	.TOP_GA_TEXT .btnarrow4 {margin-top: 25px;margin-right: 105px;}


	/*コンテンツ*/
	.CONTENTS_WRAP{margin-top: 40px;width: 90vw;margin-top: 60px;}
	.CONTENTS{width: 90vw;height: 410px;height: auto;margin-bottom: 70px;display: flex;flex-direction: column;}
	.CONTENTS_TEXT {width: 90VW;top: 120px;position: initial;text-align: justify;}
	.TOP_CON{padding-bottom: 0px;}
  .CONTENTS_PHOTO{width: 90vw;}
	.CONTENTS_WHOLE{width: 90vw;}


	/* 環境・物件概要 */
	.TOP_LO_WRAP{width: 90vw;}
	.TOP_LO_CON{flex-direction: column;width: 90vw;}
	.TOP_LO_IMG{width: 90vw;}
	.TOP_LO_TEXTS{width: 90vw;}
	.LO_TYTLES h2{font-size: 24px;}


	/*ニュースここから*/
	.TOP_NEWS {padding: 80px 0 80px 0;}
	.NEWS_TYTLES{width: 1000px;margin: 0 auto;text-align: center;width: 100vw;}
	.NEWS_TYTLES small{letter-spacing: 2px;margin-bottom: 10px;display: inline-block;font-size: 28px; }
	table {width: 95vw;}
	tr {padding: 12px 0px;width: 95vw;flex-direction: column;text-align: left;}

	/*PC・SP*/

	
	#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;	}

	/* メニュー */
	.H_TOP { color:#efb839; }
	.H_PLAN  { color:#fff;}
	.H_GALLERY  { color:#fff;}
	.H_EQUIPMENT { color:#fff; }
	.H_LOCATION { color:#fff;  }
	.H_OUTLINE { color:#fff; }
	.H_CONTACT { color:#fff; }



}