@charset "utf-8";


p {
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}

  .design4 {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 4% 0;
  }

  .outer-wrapper {
    width: 70%;margin:4% auto 0% auto;
  }

  .grid {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 0;
    width: 100%;
  }

  /* ── カラム共通 ── */
  .col {
    padding: 3% 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4%;
  }

  /* ── タイトル ── */
  .col-title {
    text-align: center;
    line-height: 1.7;
  }

  .col-title .bracket {
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
    color: #fff;
    letter-spacing: 0.15em;
    display: block;
  }

  /* ── 間取り図コンテナ ── */
  .plan-img-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .plan-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    /* 元画像を SVG 相当に扱う */
    filter: brightness(1.05) contrast(1.05);
  }

  /* ── キャプション ── */
  .plan-caption {
    font-size: clamp(0.65rem, 1.0vw, 0.78rem);
    color: #fff;
    align-self: flex-start;
    letter-spacing: 0.05em;
    margin-top: auto;
  }

  /* ── 仕切り線（右カラム左端） ── */
  .col.right {
    border-left: 0px solid #2a2a2a;
  }

  /* ── スマホ縦 ── */
  @media (max-width: 767px) {
    .outer-wrapper {
      width: 100%;
    }
    .grid {
      grid-template-columns: 1fr;
    }
    .col.right {
      border-left: none;
      border-top: 0px solid #2a2a2a;margin-bottom:10%;
    }
    .col {
      padding: 10% 2% 10%;
      gap: 5%;
    }
  }



/*スマホ*/
@media screen and (max-width:768px){
hr.line {
height: 1px;
border: none;
border-top: 1px #fff solid;margin:11% auto 6%;max-width:90%;
}

hr.line2 {
height: 1px;
border: none;
border-top: 1px #000000 solid;margin:8% 0px 7%;
}
hr.space{margin:50px 0px 50px;}
hr.space2{margin:10px 0px 50px;}
	
.designbg {width:100%;height:auto;margin:70px auto 0% auto;padding: 0% 0px 0% 0px;text-align:center;background-color:#231815}
.design {width:90%;height:auto;margin:0% auto 0px auto;padding: 2% 0px 6% 0px;text-align:left;}
.design2 {width:90%;height:auto;margin:0% auto 0px auto;padding: 2% 0px 3% 0px;text-align:left;}
.design3 {max-width:1000px;width:90%;height:auto;margin:5% auto 0px auto;padding: 0% 0px 0% 0px;text-align:center;}
.design33 {max-width:1000px;width:90%;height:auto;margin:0% auto 0px auto;padding: 0% 0px 0% 0px;text-align:center;}
.design333 {max-width:1200px;width:90%;height:auto;margin:8% auto 3% auto;padding: 0% 0px 0% 0px;text-align:center;}
.design5 {width:100%;height:auto;margin:12% auto 12% auto;padding: 0% 0 0% 0;text-align:center;}
.txt1{ font-size: clamp(1.0rem, 1.7vw, 3.0rem); line-height: 1.8; margin-top:0%;margin-bottom: 2%;font-weight: normal;color:#fff }
.txt2{ font-size: clamp(0.9rem, 1.0vw, 1.1rem); line-height: 1.8;;margin-top: 5%;color:#fff;text-align:left;}
.txt22{ font-size: clamp(0.9rem, 1.0vw, 1.1rem); line-height: 1.8;;margin-bottom: 0%;margin-top: 0%;color:#000}
.txt3{ font-size: clamp(1.0rem, 1.4vw, 2.2rem); line-height: 1.8; margin-top: 5%;margin-bottom: 1%;font-weight: normal;color:#fff;text-align:left }
.mark {width:16%;max-width:120px;height:auto;margin:9% auto 0% auto;padding: 0% 0px 0% 0px;text-align:center;}
.mark img{width:100%;max-width:120px;height:auto;margin:0 auto 0 auto;padding: 0% 0px 0% 0px;}
.title {margin: 5% auto 5% auto;font-size: clamp(1.0rem, 1.2vw, 1.6em); color:#fff;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;line-height: 150%;font-weight: 400; letter-spacing: 5px; }
.title2{ font-size: clamp(1.2rem, 1.6vw, 2.4rem); line-height: 1.8; margin-top: 5%;margin-bottom: 1%;font-weight: normal;color:#fff;text-align:center }
.title3 {font-size: clamp(1.0rem, 1.6vw, 2.4rem); line-height: 1.8; margin-top: 2.5%;margin-bottom: 0%;font-weight: normal;color:#fff;letter-spacing: 2px; }
.designcap{width:100%;margin: 0px auto 0px auto;text-align:left;padding:0% 0px 7% 0px;font-size:70%;line-height: 170%;color: #fff}
.designcap2{;margin: 0px auto 0px auto;text-align:left;padding:0% 0px 0% 0px;font-size:60%;color: #fff}
}

/*PC*/
@media print, screen and (min-width:769px){
hr.line {
height: 1px;
border: none;
border-top: 1px #fff solid;margin:11% auto 6%;max-width:70%;
}
hr.line2 {
height: 1px;
border: none;
border-top: 1px #000000 solid;margin:3% auto 3%;max-width:980px;width:80%;
}
hr.space{margin:50px 0px 50px;}
hr.space2{margin:10px 0px 50px;}
	
.designbg {width:100%;height:auto;margin:90px auto 0% auto;padding: 0% 0px 0% 0px;text-align:center;background-color:#231815}
.design {width:100%;height:auto;margin:0% auto 0px auto;padding: 2% 0px 8% 0px;text-align:center;}
.design2 {width:90%;height:auto;margin:0% auto 0px auto;padding: 2% 0px 3% 0px;text-align:center;}
.design4 {width:90%;height:auto;margin:0% auto 0px auto;padding: 2% 0px 1% 0px;text-align:center;}
.design3 {max-width:1000px;width:70%;height:auto;margin:5% auto 0px auto;padding: 0% 0px 0% 0px;text-align:center;}
.design33 {max-width:1000px;width:70%;height:auto;margin:0% auto 0px auto;padding: 0% 0px 0% 0px;text-align:center;}
.design333 {max-width:1200px;width:80%;height:auto;margin:8% auto 1% auto;padding: 0% 0px 0% 0px;text-align:center;}
.design5 {width:100%;height:auto;margin:12% auto 12% auto;padding: 0% 0 0% 0;text-align:center;}
.txt1{ font-size: clamp(1.0rem, 1.7vw, 3.0rem); line-height: 1.8; margin-top:0%;margin-bottom: 1%;font-weight: normal;color:#fff; letter-spacing: 5px; }

.txt2{ font-size: clamp(0.9rem, 1.0vw, 1.1rem); line-height: 1.8;;margin-bottom: 0%;color:#fff}
.txt22{ font-size: clamp(0.9rem, 1.0vw, 1.1rem); line-height: 1.8;;margin-bottom: 0%;margin-top: 0%;color:#000}
.txt3{ font-size: clamp(1.0rem, 1.2vw, 2.0rem); line-height: 1.8; margin-top: 1%;margin-bottom: 0.8%;font-weight: normal;color:#fff;letter-spacing: 5px; }
.mark {width:20%;max-width:120px;height:auto;margin:6% auto 0% auto;padding: 0% 0px 0% 0px;text-align:center;}
.mark img{width:100%;max-width:120px;height:auto;margin:0 auto 0 auto;padding: 0% 0px 0% 0px;}
	
.title {margin: 3% auto 0% auto;font-size: clamp(1.0rem, 1.4vw, 1.6em); color:#fff;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;line-height: 150%;font-weight: 400; letter-spacing: 5px; }
.title2 {font-size: clamp(1.0rem, 1.6vw, 2.4rem); line-height: 1.8; margin-top: 1.5%;margin-bottom: 1%;font-weight: normal;color:#fff }
.title3 {font-size: clamp(1.0rem, 1.6vw, 2.4rem); line-height: 1.8; margin-top: 2.5%;margin-bottom: 0%;font-weight: normal;color:#fff;letter-spacing: 8px; }
.designcap{width:96%;margin: 0px auto 0px auto;text-align:center;padding:5% 0px 0% 0px;font-size:80%;line-height: 170%;color: #fff}
.designcap2{;margin: 0px auto 0px auto;text-align:left;padding:0% 0px 0% 0px;font-size:60%;color: #fff}
img {padding: 0px 0px 10px 0px;text-align:center;}
}


@media print {
.hidden-print { display: none;}
.content-print{top:0 !IMPORTANT;left:0 !IMPORTANT;width:172mm !IMPORTANT; height:251mm !IMPORTANT;}
}