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


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

/*共通ここから*/
.TOP_CONTENTS {width: 1000px;margin: 0 auto;margin-bottom: 100px;}
.TYTLES {text-align: center;margin-bottom: 40px;}
.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;}

/* ===== TOP_IMG（動画エリア）===== */
.TOP_IMG{
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #faf9f6;
  overflow: hidden;
  background-image: url("../img/top_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 動画を包むラッパーで比率を固定する */
.TOP_IMG video.pc{
  width: 68%;
  aspect-ratio: 1470 / 800;
  margin-top: 12vw;
  margin-bottom: 6vw;   /* ← 動画の下の余白 */
  object-fit: cover;
  display: block;
}

.TOP_IMG video.sp{
  display: none;
}
  @media (max-width: 768px){
    .TOP_IMG{
      position: relative;
      flex-direction: column;
      min-height: 0;
      background: #fff;
    }
    .TOP_IMG video.pc{ display: none; }
    .TOP_IMG video.sp{
      display: block;
      width: 100%;
      /* aspect-ratio: 450 / 646;  */
      object-fit: cover;
      position: relative;
    }
  }
  
  /* ===== テキストエリア（右25%の縦書きコピー：PC）===== */
  .top_tytles{
    position: absolute;
    top: 0;
    bottom: 6vw;          /* ← 動画のmargin-bottomと同じ数値にする */
    height: auto;         /* height:100%を削除してbottomで下端を決める */
    right: 0;
    width: 29%;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 10% 64px 0 0;
    z-index: 2;
    box-sizing: border-box;
}
  
.top_tytle1{
  writing-mode: vertical-rl;
  font-size: clamp(28px, 4vw, 52px);  /* 最小28px 〜 最大52px の間で画面幅に比例 */
  line-height: 1.4;
  letter-spacing: .26em;
  font-weight: 500;
  color: #1c1c1a;
  font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN', sans-serif;
  position:relative;
  left: 2vw;
  margin-bottom: 28px;
  white-space: nowrap;
}

.top_tytle2{
  writing-mode: vertical-rl;
  align-self: flex-end;
  font-size: clamp(16px, 1.6vw, 20px);  /* サブコピーも幅を持たせて調整 */
  line-height: 2.1;
  letter-spacing: .21em;
  color: #55534f;
  font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN', sans-serif;
  position: relative;
  left: 1vw;
  bottom:-4vh;
}
  
  .upright { text-orientation: upright; }


  /* ===== スマホ：見出しは動画に重ねる、サブコピーは下の白帯 ===== */
  @media (max-width: 768px){
    .top_tytles{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      display: block;
      padding: 0;
      z-index: 2;
    }
  
    /* 見出し：動画の上、中央揃え */
    .top_tytle1{
      position: absolute;
      top: -470%;
      left: -43%;
      right: 60%;
      width: 100%;
      /* writing-mode: horizontal-tb; */
      display: block;
      text-align: center;
      font-size: 0;
      letter-spacing: normal;
      margin-bottom: 0;
    }
    .top_tytle1 span{
      display: inline-block;
      color: #fff;
      font-size: 24px;
      letter-spacing: .2em;
      line-height: 1.2;
      padding: 2px 14px;
      white-space: nowrap;
      text-align: center;
    }
  
    /* サブコピー：動画の下、通常フローで中央揃え */
    .top_tytle2{
      position: static;
      writing-mode: horizontal-tb;
      align-self: auto;
      text-align: center;
      color: #3a3a37;
      font-size: 15px;
      line-height: 2.1;
      letter-spacing: .06em;
    }
  }
  
  /* ===== SCROLLダウン ===== */
  .scrolldown1{
	position: absolute;
	left: 6%;
	bottom: 6%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	z-index: 3;
  }
  .scrolldown1 span{
	position: static;
	writing-mode: vertical-rl;
	font-size: 11px;
	letter-spacing: .2em;
	font-weight: 600;
	color: #1c1c1a;
  }
  .scrolldown1::after{
	content: "";
	width: 1px;
	height: 34px;
	background: #1c1c1a;
	opacity: 1;
	animation: pathmove 1.6s ease-in-out infinite;
  }
  @media (max-width: 768px){
	.scrolldown1{ display: none; }
  }
  
  @keyframes pathmove{
	0%   { height: 0; opacity: 0; }
	30%  { height: 34px; opacity: 1; }
	100% { height: 0; opacity: 0; }
  }
/*新しいここまで*/



/*ニュースここから*/
.TOP_NEWS {	padding: 70px 0;margin-bottom: 100px;}
.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;}


/*ボタン*/
.BUTTONS {display: flex;margin-bottom: 70px;width: 960px;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_CONCEPT{background-size: cover;padding-top: 50px;padding-bottom: 0px; background: #7CAF6D; color: #fff; padding:120px 0; background-image: url("../img/top_concept_bg.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;}
.CONCEPT_TYTLE{text-align: center;font-size: 22px;letter-spacing: 2px;margin-bottom: 20px;color: #161616;}
.TOP_CONCEPT .CONCEPT_TYTLE { color:#fff; }
.CONCEPT_TEXT{text-align: center;font-size: 15px;letter-spacing: 1px;line-height: 35px;font-size: 15px;}
.text_white {color: #ffffff;}
.CONCEPT_IMG{width: 700px;margin: 0 auto;margin-top: 50px;}


.top_concepts{text-align: center;background-size: contain;}
.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;}





/*ランドプランここから*/
.TOP_LANDPLAN{padding-top: 50px;padding-bottom: 80px;background: #EDEDED; background-image: url("../img/top_landplan_bg.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat; padding: 120px 0; }
.TOP_LANDPLAN .TYTLES { color: #406934; }
.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: 42%;line-height: 30px;letter-spacing: 1px;text-align: justify;}
.LANDPLAN_IMG small{line-height: 18px;display: inline-block;text-align: justify;margin-top: 20px;}
.LANDPLAN_KUKAKU{margin: 0 auto;padding: 10px 50px;margin-top: 40px; max-width:960px; }
.LANDPLAN_IMG{width: 53%;}

/*コンテンツここから*/
.TOP_CON{padding-top: 80px; background: #F1FAEF;}
.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: -3vh;z-index: -1;color: rgba(155,145,135,0.23);font-size: 47px;letter-spacing: 5px; font-weight: normal;}
.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;}
.CONTENTS_TEXT_GALLERY::before{content: "GALLERY";right: 0px;}
.CONTENTS_TEXT_SPEC::before{content: "EQUIPMENT";left: 0px;}
.CONTENTS_TEXT_LOCATION::before{content: "LOCATION";left: 0px;}
.CONTENTS_TEXT_SAFETY::before{content: "SAFETY";right: 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) {

	/*共通ここから*/
	.menu-btn i {	color: #fff;}
	header.scroll-nav{border-bottom: none;}
	/*トップここから*/
	.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: 140vw;}
	.top_tytle_logo {width: 50vw;}
	.top_tytle1 {font-size: 16px;letter-spacing: 0.1em;margin-top: 9vh;text-shadow: 0 1px 4px rgba(0, 0, 0, 0.21), 0 0 8px rgba(0,0,0,.4); }
	.top_tytle2 {font-size: 16px;letter-spacing: 1px;margin-top: -17vh;text-align: center;margin-left: 0;line-height: 2.0; color: #fff;}
	.point {width: 67vw;margin: 0 auto;margin-top: 40px;}

	/*ニュースここから*/
	.TOP_NEWS {padding: 35px 0 40px 0;margin-bottom: 50px;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 {width: 100vw;background: #b4b4b4;margin: 0;padding-bottom: 80px;padding-top: 40px;}
	.btn{background: white;margin: 10px auto;}
	.BUTTONS .TYTLES{margin-bottom: 20px;width: 100vw;}
	.BUTTON{flex-direction: column;width: 100vw;}

		/*コンセプトここから*/
  .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;}
	.TOP_CONCEPT{padding-bottom: 0px; padding: 80px 0; margin-top: -7px; }

	.square {font-size: 16px;padding: 15px 0px;width: 85vw;}
.top_concepts{margin-top: 30px;}
.concept_img {width: 90vw;margin: 0 auto;}
.concept_imgs{width: 100vw;}
.line{width: 90vw;}
.concept_bun{margin: 0 auto;text-align: justify;line-height: 29px;margin-top: 23px;margin-bottom: 35px;width: 90vw;}
.name {letter-spacing: 2px;line-height: 40px;font-size: 20px;margin-left: 1vw;}
.concept_perth{margin-bottom: 0px;width: 90vw;}
.concept_perth small {font-size: 10px;position: absolute;bottom: -8vh;color: black;line-height: 15px;width: 90vw;right: 0;letter-spacing: 0;text-align: justify;left: 0;}


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

	/*コンテンツ*/
	.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;}
	.CONTENTS_TEXT_PLAN::before{display: none;}
	.CONTENTS_TEXT_SPEC::before{display: none;}
	.CONTENTS_TEXT_LOCATION::before{display: none;}

	.CONTENTS_IMG_PLAN::after{color: rgba(155,145,135,0.23);content: "PLAN";position: absolute;top:0px;top: -7.5vh;font-size: 50px;letter-spacing: 5px;}
	.CONTENTS_IMG_SPEC::after{color: rgba(155,145,135,0.23);content: "EQUIPMENT";position: absolute;top:0px;top: -7.5vh;font-size: 50px;letter-spacing: 5px;}
	.CONTENTS_IMG_LOCATION::after{color: rgba(155,145,135,0.23);content: "LOCATION";position: absolute;top:0px;top: -7.5vh;font-size: 50px;letter-spacing: 5px;}
  .TOP_CON{padding-bottom: 0px;}

}


/* ===== 長期優良住宅・仲介手数料不要バッジ ===== */
.top_labels{
  position: absolute;
  right: 35%;
  bottom: 15%;
  flex-direction: column;
  gap: 14px;
  z-index: 3;
}
.top_label{
  border: 1px solid #fff;
  padding: 8px 0;
  width: 200px;
  text-align: center;
  background: rgba(0,0,0,0.15);
}
.top_label span{
  color: #fff;
  font-size: 15px;
  letter-spacing: 2px;
  font-weight: 500;
}

@media (max-width: 768px){
  .top_labels{
    left: 0;
    right: 0;
    bottom: 6vh;
    align-items: center;
    display: flex;
  }
  .top_label{
    width: 70vw;
    padding: 8px 0;
  }
  .top_label span{
    font-size: 14px;
  }
}

/* ===== 丸バッジ（長期優良住宅・仲介手数料不要）===== */
.top_circles{
  position: absolute;
  left: 2vw;
  bottom: 2vw;      /* 動画の下端に重ねる */
  display: flex;
  gap: 20px;
  z-index: 3;
}
.top_circle{
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #ad8d64;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
}
.top_circle span{
  color: #fff;
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1.5;
  text-align: center;
  font-weight: 500;
}

@media (max-width: 768px){
  .top_circles{
    position: static;
    display: none;
    justify-content: center;
    gap: 16px;
    margin-top: -40px;
    padding-bottom: 40px;
  }
  .top_circle{
    width: 100px;
    height: 100px;
  }
  .top_circle span{
    font-size: 13px;
  }
}