@charset "utf-8";
/*スマホ*/
@media screen and (max-width:750px){
#design{padding:10px 0px;text-decoration: none;}#plan2{padding:30px 0px;text-decoration: none;}#plan{padding:30px 0px;text-decoration: none;}
.land{width:97%;height:auto;margin:0rem auto 1.5rem auto;padding:0px 0px 0px 0px;text-align:center;}
.plan3{width:100%;margin: 20px auto 20px auto ;height:auto;text-align:center;padding: 0rem 1% 0px 1%;}
.plan3 ul li{margin:0px auto 0px auto ;height:auto;text-align:center;padding: 0;}
.plan4{width:100%;height:auto;margin:0px auto 0px auto;padding: 0px 0% 20px 0%;text-align:center;}
.f-container2 {display: flex;flex-wrap: wrap;justify-content: flex-start;width: 100%;margin: 0px auto 0px auto ;padding: 30px 0px 10px 0px;} 
.f-item2 {width: 100%;margin-right: 0.9%;margin-left: 0.9%;margin-top: 8px; text-align:center;font-size: 90%; }
.f-item2 img{ width: 70%;margin-bottom: 30px; }
.plancap2{clear: both; width:90%;height: auto;margin: 0px auto 0px auto;padding: 30px 0px 30px 0px;font-size:75%;text-align:left;line-height:150%;font-weight: 400;}
.btnList {margin: 0rem auto 0px;display: flex;flex-wrap: wrap;justify-content: space-between;width: 91%;;padding: 0px 0px 0px 0px;}
.btnList li{width: 100%;margin: 0px;}
.btnList li a {display: block;width: 100%;text-align: center;font-size: 16px;color: #fff;background: #59607c;letter-spacing: 0.1rem;line-height: 3;text-decoration:none; transition: .3s all;
}
.btnList li a:hover {opacity: 0.8;}
.plan3 .btnList li:nth-child(1){margin:20px auto 20px auto ;}
.plan3 .btnList li:nth-child(2){margin:0px auto 0px auto ;}

	
.maintop{;width:100%;margin:40px auto 0px auto ;height:auto;text-align:center;padding: 0px 0px 0px 0px;}
.main{max-width:1200px;width:90%;margin: 0px auto 0px auto ;height:auto;text-align:center;padding: 0px 0px 0px 0px;}
.conoie{width:25%;height:auto;margin:12% auto 1% auto;padding: 0% 0% 0% 0%;text-align:center;}
.title {margin-top:10%;font-size:clamp(1.2rem, 1.4vw, 1.7rem); color:#000;line-height: 150%;font-weight: 700 }
.title1 {margin-top:4%;font-size:clamp(1.0rem, 1.4vw, 1.7rem); color:#000;line-height: 150%;font-weight: 700 }
.title2 {height:auto;margin:0px auto 0px auto;padding: 3% 0px 0% 0px;text-align: center;color:#000;font-weight: 400;letter-spacing:0px;line-height:160%;font-size: clamp(1.1rem, 1.4vw, 1.4rem);}
.title3 {height:auto;margin:0px auto 0px auto;padding: 3% 0px 3% 0px;text-align: left;color:#000;font-weight: 400;letter-spacing:0px;line-height:160%;font-size: clamp(1.0rem, 1.5vw, 1.5rem);}
.text1{margin:0px auto 0px auto;padding: 0rem 0% 0% 0%;text-align:left; font-size: clamp(0.85rem, 0.5vw + 0.6rem, 1.0rem);line-height: 1.7;font-weight: 400;}
.main2{width:100%;margin: 0px auto 0px auto ;height:auto;text-align:center;padding: 7% 0px 9% 0px;}
.cap2{clear: both; width:100%;height: auto;margin: 0px auto 0px auto;padding: 1% 0px 7% 0px;font-size:70%;text-align:left;line-height:170%;font-weight: 400;}
/* 親コンテナ */
.pg-nav {
  width: 80%;
  margin: 15% auto 10%;
}

/* 縦並びのキモ */
.pg-nav__inner {
  display: flex;
  flex-direction: column; /* 確実に縦並びを指定 */
  gap: 15px;              /* アイテム間の上下の隙間 */
  width: 100%;
}

/* アイテムの設定 */
.pg-nav__item {
  position: relative;
  z-index: 1;
  overflow: hidden;
  
  /* 48%から100%に変更し、横幅いっぱいに */
  width: 100%;            
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem 0.5rem;
  
  font-size: clamp(1.1rem, 0.8vw + 0.6rem, 1.2rem);
  font-weight: bold;
  line-height: 1.6;
  text-decoration: none;
  color: #333;
  border: 1px solid #ccc;
  box-sizing: border-box; /* パディングを含めたサイズ計算 */
  
  transition: color 0.6s ease, border-color 0.6s ease;
}

/* --- アクティブ状態（左側の固定色） --- */
.pg-nav__item--active {
  background: #9fa0a0;
  color: #fff;
  border-color: #9fa0a0;
}

/* --- ホバーアニメーション（ふわっとグラデーション） --- */
.pg-nav__item:not(.pg-nav__item--active)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #577d81, #5ca19b);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.pg-nav__item:not(.pg-nav__item--active):hover {
  color: #fff;
  border-color: #577d81;
}

.pg-nav__item:not(.pg-nav__item--active):hover::before {
  opacity: 1;
}}



/*PC*/
@media screen and (min-width:751px){
#design{padding:30px 0px;text-decoration: none;}
.pg-nav {
  max-width: 700px;
  width: 80%;
  margin: 10% auto 10%;
}

.pg-nav__inner {
  display: flex;
  gap: 4%;
  width: 100%;
}

.pg-nav__item {
  position: relative; /* 擬似要素の基準にするために追加 */
  z-index: 1;         /* 文字を前面に出すために追加 */
  overflow: hidden;   /* 擬似要素がはみ出さないように追加 */
  width: 48%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem 0.5rem;
  font-size: clamp(1.1rem, 0.8vw + 0.6rem, 1.2rem);
  font-weight: bold;
  line-height: 1.6;
  text-decoration: none;
  color: #333;
  border: 1px solid #ccc;
  box-sizing: border-box;
  /* 色とボーダーの遷移を滑らかに */
  transition: color 0.6s ease, border-color 0.6s ease;
}

/* 左：背景固定（アクティブ状態） */
.pg-nav__item--active {
  background: #9fa0a0;
  color: #fff;
  border-color: #9fa0a0;
}

/* --- ホバー用のグラデーション設定 --- */

/* 1. 背景として敷くグラデーション（最初は透明にしておく） */
.pg-nav__item:not(.pg-nav__item--active)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #577d81, #5ca19b);
  z-index: -1;        /* 文字の下に配置 */
  opacity: 0;         /* 最初は隠す */
  transition: opacity 0.6s ease; /* ここで「ふわっと」させる */
}

/* 2. マウスオーバー時の挙動 */
.pg-nav__item:not(.pg-nav__item--active):hover {
  color: #fff;        /* 文字を白に */
  border-color: transparent; /* ボーダーを馴染ませる、または色を変える */
}

.pg-nav__item:not(.pg-nav__item--active):hover::before {
  opacity: 1;         /* グラデーションを浮き上がらせる */
}
	
.land{width:97%;height:auto;margin:0px auto 0px auto;padding:5rem 0px 3rem 0px;text-align:center;}
.plan4{max-width:1160px;width:90%;height:auto;margin:8% auto 0px auto;padding: 0px 0% 10% 0%;text-align:center;}

.plan3{width:100%;margin: 2rem auto 70px auto ;height:auto;text-align:center;padding: 0px 0% 50px 0%;}
.plan3 ul li{margin:0px auto 0px auto;height:auto;text-align:center;padding:0;}
.f-container2 {display: flex;flex-wrap: wrap;justify-content: flex-start;width: 100%;margin: 0px auto 0px auto ;padding: 2rem 0px 2rem 0px;} 
.f-item2 {max-width:1000px;width: 31.2%;margin-right: 0.9%;margin-left: 0.9%;margin-top: 0.5rem; text-align:left;font-size: 90%; }
.f-item2 img{ width: 100%;}
.conoie{max-width:180px;width:25%;height:auto;margin:6% auto 0% auto;padding: 0% 0% 0% 0%;text-align:center;}
.maintop{;width:100%;margin:90px auto 0px auto ;height:auto;text-align:center;padding: 0px 0px 0px 0px;}
.main{max-width:1200px;width:90%;margin: 0px auto 0px auto ;height:auto;text-align:center;padding: 0 0px 0px 0px;}
.main2{max-width:1200px;width:90%;margin: 0px auto 0px auto ;height:auto;text-align:center;padding: 5% 0px 0% 0px;}
.title {margin-top:8%;font-size:clamp(1.0rem, 1.4vw, 1.7rem); color:#000;line-height: 150%;font-weight: 700 }
.title1 {margin:4% 0 3%;font-size:clamp(1.0rem, 1.4vw, 1.7rem); color:#000;line-height: 150%;font-weight: 700 }
.title2 {height:auto;margin:0px auto 0px auto;padding: 4% 0px 0% 0px;text-align: center;color:#000;font-weight: 400;letter-spacing:0px;line-height:160%;font-size: clamp(1.0rem, 1.4vw, 1.5rem);}
.title3 {height:auto;margin:0px auto 0px auto;padding: 2% 0px 3% 0px;text-align: center;color:#000;font-weight: 400;letter-spacing:0px;line-height:160%;font-size: clamp(1.1rem, 1.5vw, 1.9rem);}
.text1{margin:0px auto 0px auto;padding: 0rem 0% 2% 0%;text-align:center; font-size: clamp(0.9rem, 0.5vw + 0.6rem, 1.1rem);line-height: 1.7;font-weight: 400;}
.cap2{clear: both; width:100%;height: auto;margin: 0px auto 0px auto;padding: 4% 0px 8% 0px;font-size:75%;text-align:center;line-height:170%;font-weight: 400;}
.btnList {max-width: 730px;margin: 5rem auto 0rem;display: flex;flex-wrap: wrap;justify-content: space-between;width: 91%;}
.btnList li{width: 49%;margin-bottom: 15px;}
.btnList li a {display: block;width: 100%;text-align: center;font-size: 16px;color: #fff;background: #59607c;letter-spacing: 0.1rem;line-height: 3;text-decoration:none; transition: .3s all;
}
.btnList li a:hover {opacity: 0.8;}

}

/* ===== 印刷スタイル（間取りページ） ===== */
@media print {
  /* 用紙設定 */
  @page {
    margin: 10mm;
  }

  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 10pt;
  }

  .main2 {
    width: 100%;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .title {
    margin: 0 0 0.3rem;
    page-break-after: avoid;
    break-after: avoid;
  }

  .plan3 {
    width: 100%;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* メイン画像 */
  .plan3 > img {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  /* サブ画像2枚を縦並び */
  .plan3 > ul {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0.3rem 0 0;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .plan3 > ul > li {
    width: 100%;
  }

  .plan3 > ul > li img {
    width: 100%;
    height: auto;
    max-height: 35vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  .plancap2 {
    font-size: 8pt;
    margin-top: 0.3rem;
  }

  /* リンクのURL非表示 */
  a[href]::after {
    content: none !important;
  }
}

@media print {
  #page-top { display: none; }
  hr { display: none; }
  .copyright { display: none; }
  .fgnavi { display: none; }
  .maintop { display: none; }
  .info { display: none; }
  .footer2 { display: none; }
  .form { display: none; }
  .headerbg { display: none; }
  .btnList { display: none; }
  .btnList li{ display: none; }
  .content-print {
    top: 0 !important;
    left: 0 !important;
    width: 172mm !important;
    height: 251mm !important;
  }
}