h1 {
  text-align: center;          
  color: #464646;             
  font-family: "Yu Mincho", "游明朝", serif;
}
.landplan p img
{
  max-width: 300px;
}
.landplan .text{
  text-align: center;
  align-items: center;      /* 縦中央 */
  height: 50px; 
  color: #464646;
  font-size: 24px;
}
.image{
  text-align: center;
}
.able{
  padding-top: 80px;
}
.able span:nth-of-type(1){
  font-size: 36px;
}
.able span:not(.able span:nth-last-of-type(1)){
  line-height: 2.5;
}
.able span:nth-of-type(1){
  line-height: 1.5;
}
.able span:nth-of-type(2){
  line-height: 1.5;
}
.land_plan{
  display: block;
  width: 80%;      /* 全体の80%に縮小 */
  max-width: 800px; /* 最大でも800pxまでに制限（必要なら調整） */
  height: auto; 
  position: relative;
  margin: -300px auto 100px auto; /* 300pxうえにのめり込むイメージ*/
  height: auto;
  z-index: 2;
  background-color: transparent;
}
.attention{
  text-align: center;
}
/*  区画図とその下の説明 */
.title{
  text-align: center;
  padding-top: 60px;
  padding-bottom: 60px;
  font-size: 36px;
  color: #464646;
  
  word-break: keep-all;
}
.title span{
  font-size: 16px;
  display: inline-block; 
  line-height: 1.5;
  padding-top: 20px;
}
.br-specification{
  word-break: keep-all; 
}
/* 下の説明 */
.sale-label{
  text-align: center;
  font-size: 30px;
  padding:0 50px;
  color: #539379;
}
/* ここからプラン */
.plan-container {
  display: grid;
  grid-template-columns: 700px auto;
  align-items: stretch; 
  max-width: 1200px;
  margin: 40px auto;
  gap: 30px;
  border: 1.5px solid var(--color-beige);
  padding: 20px 30px 20px 30px;
  box-sizing: border-box; 
}
.plan-container {
  display: none;
}
.plan-container.active
{
  display: grid;
}
.plans-wrapper > ul{
  display: grid;
  list-style-type: none;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 50px auto auto auto;
  max-width: 900px;
  gap: 20px;
  padding: 0px;
}
.plans-wrapper > ul li{
  text-align: center;
  cursor: pointer;
}
.plans-wrapper > ul li:hover
{
  background-color: var(--color-beige);
  color: var(--color-white);
}
.plan-image {
  /*width: 35%;*/
  display: flex;               
  justify-content: center;     /* 横中央 */
  align-items: center;  
}

.plan-image img {
  width: 100%;
  height: auto;                
  object-fit: contain; 
  display: block;
}
/*
.plan-text {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;  
}*/
.plan-text h2{
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
  padding-top: 4px;
 
}
.plan-text > h2:nth-last-of-type(1){
  padding: 20px;
  background-color: var(--color-beige);
}
.point > h2{
  font-size: 20px;
   padding-top: 20px;
   padding-bottom: 2px;
   margin-bottom: 5px;
}
.point{
  margin-bottom: 20px;
}

.top-info, .point{
  padding: 0px 20px;
}
.top-info > ul:nth-of-type(1)
{
  padding-bottom: 10px;
}

.top-info ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
}
.top-info ul:nth-last-of-type(1) li{
  line-height: 1.2;
}

.point ul {
  list-style: disc;
  padding-left: 1.5em;
  /*display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px 20px;*/
  font-size: 14px;
  line-height: 1.4;
  
}


.top-info  ul:nth-of-type(1) li:not(:nth-child(3)){
 font-size: 28px;
 color:#539379
}
.top-info  ul:nth-of-type(2) li span{
   margin-left: 0.5em;
   font-size: 16px;
}
.top-info  ul:nth-of-type(1) li span{
  font-size: 16px;
}
.top-info  ul:nth-of-type(2) ul{
  padding-left: 6px;
}
.top-info  ul:nth-of-type(2) li{
  line-height: 1.2;
}
.top-info > ul:nth-of-type(2) li:nth-of-type(3),
.top-info > ul:nth-of-type(2) li:nth-of-type(4){  
  font-size: 12px;
}
.top-info > ul:nth-of-type(2) li:nth-of-type(3) span,
.top-info > ul:nth-of-type(2) li:nth-of-type(4) span{  
  font-size:16px;
}


.top-info ul:nth-of-type(1) li:nth-of-type(3){
  font-size: 12px;
  padding-top: 4px;
}
.plan-text ul:nth-of-type(1){
  margin: 0;
}
.plan-text ul:nth-of-type(1),h2{
  line-height: 1.2;
}
.plan-text ul:nth-of-type(2) li span{
  font-size: 20px;
  color: #539379;
}
.plan-text ul:nth-of-type(2){
  line-height: 1.3;
}


.point h2,.point ul{
  line-height: 1;
}

.point ul li span{
  color: #539379;
}
ul li::marker {
  color: #539379; 
  font-size: 1.2em; 
}
.part {
  padding:0px;
  margin: 0 auto 160px auto;
  text-align: right;
  box-sizing: border-box;
}

.part p {
  margin: 0;
}

.image {
  border-top : 1px solid var(--color-green);
  background-image : linear-gradient(to bottom, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 100%),url(../img/picture.jpg);
  background-size : cover;
  background-position: top;
  width : 100%;
  height : 600px;
  position : relative;
  z-index : 1;
  margin-top : 30px;
}


.image::before{
  content: '';
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 100));
  z-index: -1; 
}

.land_plan {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
  width: 100%;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.land_plan.show {
  opacity: 1;
  transform: translateY(0);
}


@media (max-width: 1200px) {
  .plan-container {
    padding: 20px 15px;
    margin: 20px 30px;
  }
  .plan-container {
    grid-template-columns: 600px auto;
  }
}

/* レスポンシブ対応 */
@media (max-width: 950px) {
  .plans-wrapper > ul li {
    padding: 10px 0px;
  }
  .plan-container.active {
      display: flex;
  }
  .plan-container {
    flex-direction: column;
    max-width: 100%;
    padding: 20px 15px;
  }
  .plan-image {
    width: 100%;
    margin-bottom: 25px;
  }
  .plan-image img {
    width: 90%;
    margin: 0 auto;
    display: block;
    height: auto;
  }
  .plan-text {
    width: 100%;
  }
  .part p {
   text-align: center;
}
}

@media (max-width: 768px) {
  .landplan p img {
    max-width: 250px;
  }
  .title{
    font-size: 22px;
  }
  .plan-container {
    flex-direction: column;
    padding: 20px 15px;
    margin: 20px 30px;
  }
  .plan-image {
    width: 100%;
    margin-bottom: 20px;
  }
  .plan-image img {
    width: 80%;
  }
  .plan-text {
    width: 100%;
  }
  .plan-image {
  margin-bottom: 0;  
  }
  .plan-text > h2:nth-last-of-type(1){
  margin-top: 0;
  }
.point > h2{
  padding-top: 0;
}

}

@media (max-width: 550px) {

  .point {
  margin: 0 ;
}

  .plan-container {
    padding: 20px 15px;
    margin: 20px 30px;
  }
  .plan-image img {
    width: 100%;
  }
  .plan-text h2 {
    font-size: 18px;
  }
  .top-info {
    display: flex;
    flex-direction: column; /* ←縦並びにする */
    gap: 10px;              /* 任意：間に余白 */
  }
  .top-info ul {
    width: 100%;            /* ←フル幅にする */
  }
  .top-info ul, .point ul {
    font-size: 14px;
  }
  .top-info  ul:nth-of-type(1) li:not(:nth-child(3)){
 font-size: 20px;
 
  }
  .top-info  ul:nth-of-type(2) li span{
    font-size: 14px;
  }
  
  .top-info  ul:nth-of-type(1) li span{
    font-size: 12px;
  }
  .top-info > ul:nth-of-type(2) li:nth-of-type(3),
  .top-info > ul:nth-of-type(2) li:nth-of-type(4){  
    font-size: 14px;
  }
  .top-info > ul:nth-of-type(2) li:nth-of-type(3) span,
  .top-info > ul:nth-of-type(2) li:nth-of-type(4) span{  
    font-size:14px;
  }
  .top-info ul:nth-of-type(1) li:nth-of-type(3){
  font-size: 11px;
  }
  .plan-image {
  margin-bottom: 0;  
  }
  .plan-text > h2:nth-last-of-type(1){
  margin-top: 0;
  }
.point{
  margin-bottom: 10px;
}
.point li:last-child {
  margin-bottom: 0;
}

.point > h2{
  padding-top: 0;
}
.point ul {
    display: block; 
  }
  .point li {
    width: 100%; 
    margin-bottom: 4px;
    
  }
    .top-info  ul:nth-of-type(2) li{
    margin-bottom: 5px;
  }
}

@media (max-width: 380px) {
   .plan-container {
    padding: 20px 15px;
    margin: 20px 30px;
  }
  .plan-text h2 {
    font-size: 16px;
  }
  .top-info ul, .point ul {
    font-size: 14px;
  }
  .top-info  ul:nth-of-type(1) li:not(:nth-child(3)){
 font-size: 18px;
 
}
.top-info  ul:nth-of-type(2) li span{
   margin-left: 0.5em;
   font-size: 14px;
}
.top-info  ul:nth-of-type(1) li span{
  font-size: 11px;
}
.top-info > ul:nth-of-type(2) li:nth-of-type(3),
.top-info > ul:nth-of-type(2) li:nth-of-type(4){  
  font-size: 14px;
}
.top-info > ul:nth-of-type(2) li:nth-of-type(3) span,
.top-info > ul:nth-of-type(2) li:nth-of-type(4) span{  
  font-size:14px;
}
.top-info ul:nth-of-type(1) li:nth-of-type(3){
font-size: 11px;
}

.plan-image {
 margin-bottom: 0;  
}
.plan-text > h2:nth-last-of-type(1){
margin-top: 0;
}
.point li {
  width: 100%; 
  margin-bottom: 4px;

}
.point ul li:last-child {
  margin-bottom: 0;   
}
  .top-info  ul:nth-of-type(2) li{
  margin-bottom: 5px;
}
}