@charset "UTF-8";
/* CSS Document */

:root{
    --navy-start:#1c2b45;
    --navy-end:#0e1626;
    --gold:#a68a5b;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body{
  }
  .recommend-plan{
    position:relative;
    margin:0 auto;
    background: linear-gradient(87deg, #2a3b5c 0%, var(--navy-end) 100%);
	padding-bottom: 50px;
  }

  /* ===== 写真エリア ===== */
  .subhead {
    background: url(../img/recommend/mv.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
  /* ===== 白カード（Recommend Plan） ===== */
  .rp-card{
    position:relative;
    width:70%;
    max-width:500px;
    margin:0 auto;
    margin-top:clamp(-180px, -24vw, -140px);
    text-align:center;
    z-index:2;
  }
  
  .rp-hand{
    
  }
  .rp-en{
    font-weight:700;
    font-size:clamp(18px, 3.2vw, 24px);
    letter-spacing:0.05em;
    color:#111;
    margin-bottom:clamp(14px,3vw,20px);
  }
  .rp-jp-title{
    font-size:clamp(24px, 4.8vw, 36px);
    font-weight:600;
    line-height:1.4;
    color:#111;
    letter-spacing:0.04em;
  }
  .rp-jp-sub{
    font-size:clamp(16px, 3vw, 22px);
    font-weight:500;
    color:#111;
    letter-spacing:0.08em;
    margin-top:clamp(4px,1vw,8px);
    margin-bottom:clamp(14px,3vw,20px);
  }
  .rp-type{
    
    font-style:italic;
    font-size:clamp(30px, 6vw, 46px);
    color:var(--gold);
    letter-spacing:0.08em;
  }

  /* ===== ポイントリスト ===== */
  .rp-points {
    max-width: 700px;
    margin: 0 auto;
    width: 90%;
	  margin-top: 30px;
	}
   .rp-point{	
    padding:clamp(20px,4vw,30px) 0;
    border-top:1px solid #fff;
    text-align:center;
  }
  .rp-points .rp-point:last-child{
    border-bottom:1px solid #fff;
  }
  .rp-point-num{
    display:block;
    
    color:var(--gold);
    font-size:clamp(14px, 2.6vw, 18px);
    letter-spacing:0.15em;
    margin-bottom:clamp(8px,2vw,14px);
  }
  .rp-point-text{
    color:#fff;
    font-size:clamp(16px, 3.2vw, 22px);
    line-height:1.8;
    letter-spacing:0.06em;
  }
.plan_dtl_ttl_box {
	background: #948049;
	margin-bottom: 0;
}

/*==間取り===*/
.spec_madori{
	display: block;
	margin: 0px auto;
	max-width: 800px;
}
.spec_f{
	max-width: 400px;
	width: 90%;
    margin: 0 auto 100px;
    display: block;
}
.type_dtl{
	background-image: none;
	background: #fff;
}
/*==content===*/
.spec-wrap{
    margin:0 auto;
	background: url(../img/common/bg_tile.jpg);
    background-size: contain;
    background-repeat: repeat;
	padding-top: 50px;
  }

  .spec-list{
    display:grid;
    grid-template-columns:1fr;
    gap:0 60px;
  }

  /* ===== 各項目 ===== */
  .spec-item{
    margin-bottom:clamp(30px,6vw,50px);
  }

  .spec-head{
    text-align:center;
    margin-bottom:clamp(24px,5vw,36px);
  }
  .spec-head .line-top,
  .spec-head .line-bottom{
    border-top:1px solid #000;
    width:100%;
  }
  .spec-head .line-top{ margin-bottom:clamp(10px,2vw,16px); }

  .spec-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(10px,2vw,16px);
    padding-bottom:clamp(10px,2vw,16px);
    font-size:clamp(20px,3.6vw,26px);
    letter-spacing:0.08em;
  }
  .spec-num{
    display:flex;
    align-items:center;
    justify-content:center;
    width:clamp(24px,4.2vw,30px);
    height:clamp(24px,4.2vw,30px);
    border-radius:50%;
    background:#948049;
    color:#fff;
    padding-left: 2px;
    font-size:clamp(13px,2.4vw,15px);
  }
  
  .spec-head .arrow{
    display:block;
    margin:0 auto;
    width:clamp(14px,2.4vw,18px);
    height:clamp(14px,2.4vw,18px);
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    transform:translateY(-50%) rotate(45deg);
    background:#f4f3f0;
  }

  /* ===== 箇条書き ===== */
  .spec-body{
    padding:0 clamp(4px,1vw,10px);
    margin-bottom:clamp(24px,4vw,32px);
  }
  .bullet-item{
    display:flex;
    align-items:flex-start;
    font-size:clamp(15px,2.8vw,18px);
    line-height:1.9;
    letter-spacing:0.03em;
    margin-bottom:clamp(6px,1.2vw,10px);
  }
  .bullet-item:last-child{ margin-bottom:0; }
  .bullet-icon{
    width:0.75em;
    height:0.75em;
    background:#948049;
    flex-shrink:0;
    margin-right:0.5em;
    margin-top:0.7em;
  }
  .bullet-text{ flex:1; }

  /* ===== 3枚横並び画像(Kitchen) ===== */
  .spec-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(8px,2vw,16px);
  }
  .spec-gallery figure{ margin:0; }
  .spec-gallery img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    display:block;
  }
  .spec-gallery figcaption{
    font-size:clamp(11px,2vw,14px);
    line-height:1.5;
    margin-top:clamp(6px,1.4vw,10px);
    letter-spacing:0.02em;
  }

  /* ===== 1枚画像(Bathroom / Living) ===== */
  .spec-photo{ margin:0; }
  .spec-photo img{
    width:100%;
    display:block;
  }
  .spec-photo figcaption{
    font-size:clamp(12px,2.2vw,14px);
    margin-top:clamp(6px,1.4vw,10px);
  }

  /* ===== PC：①②を横並び2カラム ===== */
  @media screen and (min-width:651px){
    .spec-list{
      grid-template-columns:1fr 1fr;
      gap:0 60px;
    }
  }

  /* ===== SP===== */
  @media screen and (max-width:650px){
   
	 .rp-card {
		 margin-top: -50px;
	  }
	  .spec_f {
    	margin: 20px auto 50px;
  		}
}
/*========注釈==========*/
.rec_note{
	background: linear-gradient(87deg, #2a3b5c 0%, var(--navy-end) 100%
100%);
	font-size: 12px;
	color: #fff;
    padding: 30px 0;
}