@charset "UTF-8";
/* ----------------------------------------------------------------------------
	間取り
	plan/
---------------------------------------------------------------------------- */
/* title image*/
#content #h_ttl_area .bgimg {
  background: url("../../plan/img/main_img.jpg") bottom center/cover no-repeat;
}

@media only screen and (max-width: 999px) {
	
}
@media only screen and (max-width: 768px) {
	/* title image*/
	#content #h_ttl_area .bgimg {
		background: url("../../plan/img/main_img_sp.jpg") bottom center/cover no-repeat;
	}
	
}
@media only screen and (max-width: 480px) {
}


/* --------------------------------------
   間取りトップ
   間取り選択エリア（2横並び）
----------------------------------------- */
#content .under_btn_area{
	width: 100%;
	position: relative;
	background: #eeeeee;
	padding: 40px 0 40px 0;
}

.plan-selector {
  width: 1000px;
  max-width: 100%;
  margin: 60px auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 20px 20px;
  box-sizing: border-box;
}

#content .under_btn_area .plan-selector{
	 margin: 60px auto 0;
}

.plan-btn {
  /* 中央の隙間20px(100% - 20px) 2等分 */
  width: calc((100% - 20px) / 2); 
  height: 140px;
  background-color: #f7f4eb;
  border: 4px solid var(--P1-color);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--base-color);
  transition: opacity 0.3s ease;
}

/* ホバー不透明度エフェクト */
.plan-btn:hover {
  opacity: 0.8;
}

/* 左側：タイプ名*/
.plan-btn .type-name {
  width: 30%;
  font-size: 3.2rem;
  font-family: "EB Garamond", serif;
  color: var(--P1-color);
  font-weight: normal;
  text-align: center;
}
.plan-btn .type-name span {
  font-size: 1.4rem;
  margin-left: 2px;
}

/* 中央：縦線 */
.plan-btn .vertical-line {
  width: 1px;
  height: 70%;
  background-color: #ccc;
}

/* 右側：間取り情報 */
.plan-btn .plan-info {
  width: 70%;
  padding-left: 25px;
  box-sizing: border-box;
  text-align: left;
}

/* タイプ */
.plan-btn .room-layout {
  font-size: 2.00rem;
  font-family: "EB Garamond", serif !important;
  line-height: 1.2;
  margin-bottom: 5px;
  color: #4d4a52 !important;
}
.plan-btn .room-layout span {
  font-size: 1.4rem;
  font-weight: normal;
  margin-left: 2px;
  vertical-align: baseline;
}

/* 専有面積 */
.plan-btn .area-size {
  font-size: 0.85rem;
  color: #333;
}
.plan-btn .area-size .label {
  margin-right: 10px;
}
.plan-btn .area-size .num {
  font-size: 1.875rem;
  font-weight: 400;
  font-family: "EB Garamond", serif !important;
}
.plan-btn .area-size .tsubo {
  font-size: 0.8rem;
  color: #666;
  margin-left: 5px;
}


@media only screen and (max-width: 1040px) {
  .plan-selector {
    width: 90%;
  }

  .plan-btn .room-layout {
  font-size: 1.75rem;
}
.plan-btn .room-layout span {
  font-size: 1.313rem;
}

/* 専有面積 */
.plan-btn .area-size {
  font-size: 0.85rem;
}
.plan-btn .area-size .num {
  font-size: 1.625rem;
}
.plan-btn .area-size .tsubo {
  font-size: 0.8rem;
}
}

@media only screen and (max-width: 768px) {
  .plan-selector {
    flex-direction: column;
    gap: 15px;
  }
  .plan-btn {
    width: 100%;
    height: 110px;
  }
  .plan-btn .type-name { 
	font-size: 1.75rem; 
  }
  .plan-btn .room-layout { 
	font-size: 1.625rem;
  }
  .plan-btn .area-size .num { 
	font-size: 1.5rem; 
  }
}



/* ボタン内のリンク下線無効化 */
.plan-btn, 
.plan-btn *,
.plan-btn a:link,
.plan-btn a:visited,
.plan-btn a:hover,
.plan-btn a:active {
  text-decoration: none !important;
}







/* --------------------------------------
   間取り詳細
----------------------------------------- */

/* ----　　タイプ/面積帯　　---- */
/* スペック表示帯（横幅100%） */
.type-area {
  width: 100%;
  background-color: #f7f4eb;
  border-top: 1px solid #e2ded5;
  border-bottom: 1px solid #e2ded5;
  box-sizing: border-box;
  padding: 20px 0;
}

/* 内側の1000px固定コンテナ */
.type-area .in-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* --- 左 --- */
.type-area .area-left {
  width: 350px;
  text-align: center;
}

/* type の部分 */
.type-area .area-left .type-name {
  font-family: "EB Garamond", serif !important;
  font-size: 3.5rem;
  color: var(--P1-color);
  line-height: 1.1;
}
.type-area .area-left .type-name span {
  font-size: 1.5rem;
  margin-left: 2px;
}

/* LDK の部分 */
.type-area .area-left .room-layout {
  font-family: "EB Garamond", serif !important;
  font-size: 2.2rem;
  color: #4d4a52 !important;
  margin-top: 5px;
  line-height: 1.2;
}
.type-area .area-left .room-layout span {
  font-size: 1.4rem;
}

/* --- 中央線 --- */
.type-area .vertical-line {
  width: 1px;
  height: 110px;
  background-color: #ccc;
  margin: 0 40px;
}

/* --- 右 --- */
.type-area .area-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

/* 各面積 */
.type-area .area-item {
  display: flex;
  align-items: baseline;
  margin: 0;
}

/* 「面積」見出し部分 */
.type-area .area-item .dt.label,
.type-area .area-item .label {
  width: 260px;
  font-size: 0.85rem;
  color: #4d4a52;
}

/* 数字と単位の部分 */
.type-area .area-item .dd.value,
.type-area .area-item .value {
  font-size: 0.9rem;
  color: #333;
}

/* 数字部分 */
.type-area .area-item .num {
  font-family: "EB Garamond", serif !important;
  font-size: 2.4rem;
  font-weight: 400;
  color: #111;
  margin-right: 2px;
}
.type-area .area-item:not(:first-child) .num {
  font-size: 1.8rem;
}

/* 坪の部分 */
.type-area .area-item .tsubo {
  font-size: 0.85rem;
  color: #666;
  margin-left: 8px;
}


@media only screen and (max-width: 1040px) {
  .type-area .in-box {
    width: 90%;
  }
}

@media only screen and (max-width: 820px) {
	  .type-area {
    padding: 30px 0;
  }
  .type-area .in-box {
    flex-direction: column;
    gap: 25px;
  }
	  .type-area .area-left {
    width: 100%;
  }
  .type-area .vertical-line {
    width: 100%;
    height: 1px;
    margin: 5px auto;
  }
    .type-area .area-right {
    width: 80%;
    padding-left: 10px;
  }
}

@media only screen and (max-width: 768px) {
  .type-area {
    padding: 30px 0;
  }
  .type-area .in-box {
    flex-direction: column;
    gap: 25px;
  }
  .type-area .area-left {
    width: 100%;
  }
  .type-area .vertical-line {
    width: 80%;
    height: 1px;
    margin: 5px auto;
  }
  .type-area .area-right {
    width: 100%;
    padding-left: 10px;
  }
  .type-area .area-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .type-area .area-item .label {
    width: 100%;
  }
}



/* ----　　間取り図・エレベーション　---- */

/* deteil */
#content .deteil #image_area{
	width: 100%;
	position: relative;
	padding: 90px 0 0 0;
	margin: 0 auto;
}
#content .deteil #spec_area{
	width: 100%;
	position: relative;
	margin: 0 auto;
	z-index: 3;
}



#content .deteil #spec_area .spec_in #elevation_area{
	width: 121px;
	text-align: left;
	position: absolute;
    top: 90px;
    right: 0;
}
#content .deteil #spec_area .spec_in #elevation_area .elevation{
	width: 100%;
	position: relative;
	text-align: left;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#content .deteil #spec_area .spec_in #elevation_area .elevation ul{
	width: 25px;
	text-align: right;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content: space-around;
}
#content .deteil #spec_area .spec_in #elevation_area .elevation ul li{
	width: 100%;
	font-size: 0.688rem;
	line-height: 1.0;
	
}
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp{
	width: calc(100% - 25px);
	height: 216px;
	position: relative;
	text-align: left;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border-collapse: collapse;
	flex-direction: column;
	border-bottom: #444 1px solid;
}
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp{
	flex-direction: row;
}

#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp div{
	height: 12px;
	border-top: #444 1px solid;
	border-left: #444 1px solid;
	background: #FFF;
	box-sizing: border-box;
}
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp div.none{
	border: none !important;
	background: #FFF !important;
}

#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp .h_area,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp .u_area,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp .t_area{
	width: 100%;
	border-top: none;
	border-left: none;
	background: none;
	position: relative;
	text-align: left;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border-collapse: collapse;
	flex-direction: column;
}
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp .h_area{
	height: 84px;
}
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp .u_area{
	height: 96px;
}
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp .t_area{
	height: 24px;
}

#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp .f1{
	width: 100%;
	border-right: #444 1px solid;
}

#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp .t_area div{
	width: calc(100% / 3.6);
}
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp .h_area div{
	width: calc(100% / 6);
}
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp .u_area div{
	width: calc(100% / 8);
}

#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp .t_area div:nth-last-child(-n+2){
	border-right: #444 1px solid;
}
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp .h_area div:nth-last-child(-n+7){
	border-right: #444 1px solid;
}
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp .u_area div:nth-last-child(-n+8){
	border-right: #444 1px solid;
}

#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp .t_area div:nth-child(1),
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp .t_area div:nth-child(2){
	width: calc(100% / 6) !important;
}

#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#a div.a,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#b div.b,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#c div.c,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#d div.d,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#e div.e,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#f div.f,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#g div.g,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#h div.h,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#i div.i,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#j div.j,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#k div.k,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#l div.l,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#m div.m,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#n div.n,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#o div.o,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#p div.p,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#q div.q,
#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp#r div.r{
	background: var(--P1-color);
}




#content .deteil #spec_area .spec_in #elevation_area .ground{
	width: calc(100% - 25px);
	margin: 15px 0 0 0;
	display: block;
}
#content .deteil #spec_area .spec_in #elevation_area .ground figcaption{
	position: relative;
	bottom:auto;
	right:auto;
	padding: 3px 0 0 0;
}

#content .deteil #plan_area{
	width: 100%;
	position: relative;
	padding: 90px 0 50px 0;
	margin: 0 auto;
	background: #FFF;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	z-index: 1;
}

#content .deteil #plan_area .plan_image{
	position: relative;
	margin: 0 auto;
}


/* 間取り図画像サイズ設定 */
/* R2 */
#content .deteil #plan_area .plan_image.a img{
	width: 593px;
}
#content .deteil #plan_area .plan_image.b img{
	width: 490px;
	padding: 0 159px 0 0;
}
#content .deteil #plan_area .plan_image.c img{
	width: 501px;
}
#content .deteil #plan_area .plan_image.d img{
	width: 484px;
}
#content .deteil #plan_area .plan_image.e img{
	width: 638px;
}
#content .deteil #plan_area .plan_image.f img{
	width: 487px;
	padding: 0 181px 0 0;
}
#content .deteil #plan_area .plan_image.g img{
	width: 499px;
	padding: 0 150px 0 0;
}
#content .deteil #plan_area .plan_image.h img{
	width: 467px;
}
#content .deteil #plan_area .plan_image.i img{
	width: 746px;
	padding: 0 254px 0 0;
}
#content .deteil #plan_area .plan_image.j img{
	width: 493px;
}
#content .deteil #plan_area .plan_image.k img{
	width: 696px;
}
#content .deteil #plan_area .plan_image.l img{
	width: 760px;
	padding: 0 240px 0 0;
}
#content .deteil #plan_area .plan_image.m img{
	width: 590px;
}
#content .deteil #plan_area .plan_image.n img{
	width: 708px;
	padding: 0 292px 0 0;
}
#content .deteil #plan_area .plan_image.q img{
	width: 840px;
	padding: 0 160px 0 0;
}


#content .deteil #plan_area .page_btn{
	position: relative;
	width: 200px;
}
#content .deteil #plan_area .page_btn a{
	color: #FFF;
	font-size: 1.5rem;
	display: block;
	text-decoration: none;
}
#content .deteil #plan_area .page_btn a small{
	font-size: 0.583em;
}

#content .deteil #plan_area .page_btn.prev{

}
#content .deteil #plan_area .page_btn.prev a{
	padding: 20px 10px 20px 30px;
	background: url("../img/arrow_l.svg") center left 10px/8px auto no-repeat, #4d4a52;
}

#content .deteil #plan_area .page_btn.next{

}
#content .deteil #plan_area .page_btn.next a{
	padding: 20px 30px 20px 10px;
	background: url("../img/arrow_r.svg") center right 10px/8px auto no-repeat, #4d4a52;
}

#content .deteil #plan_area .in-box{
	width: 100%;
}
#content .deteil #plan_area .ex{
	width: 1000px;
	position: relative;
	margin: 0 auto;
	padding: 50px 0 50px 0;
	text-align: left;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
#content .deteil #plan_area .ex .unit{
	padding: 0 20px 0 0;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
}
#content .deteil #plan_area .ex .unit i{
	width: 32px;
	height: 1em;
	display: block;
	position: relative;
	margin: 0 10px 0 0;
	text-align: left;
}
#content .deteil #plan_area .ex .unit i.yuka{
	background: #ded0bb;
}
#content .deteil #plan_area .ex .unit i.syunou{
	background: #b7d2c5;
}
#content .deteil #plan_area .ex .unit p{
	text-align: left;
	font-size: 0.875rem;
}

@media only screen and (max-width: 999px) {	
	#content .deteil #image_area{
		padding: 70px 0 0 0;
	}
	#content .deteil #spec_area{
		padding: 70px 0 0 0;
	}


	#content .deteil #spec_area .spec_in #elevation_area{
		width: 15%;
	}
	#content .deteil #spec_area .spec_in #elevation_area .elevation{
		width: 100%;
		justify-content: space-between;
	}
	#content .deteil #spec_area .spec_in #elevation_area .elevation ul{
		width: 20px;
	}
	#content .deteil #spec_area .spec_in #elevation_area .elevation ul li{
		font-size: 0.625rem;
	}


	#content .deteil #plan_area{
		padding: 50px 0 50px 0;
	}


	/* 間取り図画像サイズ設定 */
	/* 画像幅/1000*100% */
	/* R2 */
	#content .deteil #plan_area .plan_image.a img{
		width: 59.3%;
	}
	#content .deteil #plan_area .plan_image.b img{
		width: 49%;
		padding: 0 15.9% 0 0;
	}
	#content .deteil #plan_area .plan_image.c img{
		width: 50.1%;
	}
	#content .deteil #plan_area .plan_image.d img{
		width: 48.4%;
	}
	#content .deteil #plan_area .plan_image.e img{
		width: 63.8%;
		padding: 0 10.7% 0 0;
	}
	#content .deteil #plan_area .plan_image.f img{
		width: 48.7%;
		padding: 0 18.1% 0 0;
	}
	#content .deteil #plan_area .plan_image.g img{
		width: 49.9%;
		padding: 0 15% 0 0;
	}
	#content .deteil #plan_area .plan_image.h img{
		width: 46.7%;
	}
	#content .deteil #plan_area .plan_image.i img{
		width: 74.6%;
		padding: 0 15.4% 0 0;
	}
	#content .deteil #plan_area .plan_image.j img{
		width: 49.3%;
	}
	#content .deteil #plan_area .plan_image.k img{
		width: 69.6%;
		padding: 0 15.4% 0 0;
	}
	#content .deteil #plan_area .plan_image.l img{
		width: 76%;
		padding: 0 17.7% 0 0;
	}
	#content .deteil #plan_area .plan_image.m img{
		width: 59.0%;
	}
	#content .deteil #plan_area .plan_image.n img{
		width: 70.8%;
		padding: 0 17.7% 0 0;
	}
	#content .deteil #plan_area .plan_image.q img{
		width: 76%;
		padding: 0 17.7% 0 0;
	}

	
	#content .deteil #plan_area .page_btn{
		width: 150px;
	}
	#content .deteil #plan_area .page_btn a{
		font-size: 1.375rem;
	}
	#content .deteil #plan_area .page_btn.prev a{
		padding: 20px 10px 20px 30px;
		background: url("../img/arrow_l.svg") center left 10px/8px auto no-repeat, #4d4a52;
	}

	#content .deteil #plan_area .page_btn.next a{
		padding: 20px 30px 20px 10px;
		background: url("../img/arrow_r.svg") center right 10px/8px auto no-repeat, #4d4a52;
	}

	#content .deteil #plan_area .ex{
		width: 90%;
		padding: 40px 0 40px 0;
	}
	#content .deteil #plan_area .ex .unit{
		padding: 0 20px 0 0;
	}
	#content .deteil #plan_area .ex .unit i{
		width: 32px;
		height: 1em;
	}
	#content .deteil #plan_area .ex .unit p{
		font-size: 0.875rem;
	}
}

@media only screen and (max-width: 940px) {
}
@media only screen and (max-width: 768px) {
	#content .deteil #image_area{
		padding: 50px 0 0 0;
	}
	#content .deteil #spec_area{
		padding: 50px 0 20px 0;
	}

	#content .deteil #spec_area .spec_in #elevation_area{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-content: center;
		padding: 15px 0 0 0;
		position: relative;
		top: auto;
		right: auto;
	}
	#content .deteil #spec_area .spec_in #elevation_area .elevation{
		width: 125px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-content: center;
	}
	#content .deteil #spec_area .spec_in #elevation_area .elevation ul{
		width: 20px;
	}
	#content .deteil #spec_area .spec_in #elevation_area .elevation ul li{
		font-size: 0.625rem;
	}
	#content .deteil #spec_area .spec_in #elevation_area .elevation .ele_grahp{
	}
	
	#content .deteil #spec_area .spec_in #elevation_area .ground{
		width: 120px;
		margin: 0 0 0 20px;
	}


	#content .deteil #plan_area{
		padding: 50px 0 50px 0;
	}


	/* 間取り図画像サイズ設定 */
	/* 画像幅/768*100% */
	/* R2 */
	#content .deteil #plan_area .plan_image.a img{
		width: 77.21%;
		padding: 0 0 0 0;
	}
	#content .deteil #plan_area .plan_image.b img{
		width: 64.47%;
		padding: 0 0 0 0;
	}
	#content .deteil #plan_area .plan_image.c img{
		width: 65.23%;
		padding: 0 0 0 0;
	}
	#content .deteil #plan_area .plan_image.d img{
		width: 63.02%;
		padding: 0 0 0 0;
	}
	#content .deteil #plan_area .plan_image.e img{
		width: 83.07%;
		padding: 0 0 0 0;
	}
	#content .deteil #plan_area .plan_image.f img{
		width: 63.41%;
		padding: 0 0 0 0;
	}
	#content .deteil #plan_area .plan_image.g img{
		width: 64.97%;
		padding: 0 0 0 0;
	}
	#content .deteil #plan_area .plan_image.h img{
		width: 60.80%;
		padding: 0 0 0 0;
	}
	#content .deteil #plan_area .plan_image.i img{
		width: 97.13%;
		padding: 0 0 0 0;
	}
	#content .deteil #plan_area .plan_image.j img{
		width: 64.19%;
		padding: 0 0 0 0;
	}
	#content .deteil #plan_area .plan_image.k img{
		width: 90.62%;
		padding: 0 0 0 0;
	}
	#content .deteil #plan_area .plan_image.l img{
		width: 98.95%;
		padding: 0 0 0 0;
	}
	#content .deteil #plan_area .plan_image.m img{
		width: 76.82%;
		padding: 0 0 0 0;
	}
	#content .deteil #plan_area .plan_image.n img{
		width: 92.18%;
		padding: 0 0 0 0;
	}
	#content .deteil #plan_area .plan_image.q img{
		width: 94%;
		padding: 0 0 0 0;
	}

	
	#content .deteil #plan_area .page_btn{
		width: 150px;
	}
	#content .deteil #plan_area .page_btn a{
		font-size: 1.125rem;
	}
	#content .deteil #plan_area .page_btn.prev a{
		padding: 14px 10px 14px 30px;
		background: url("../img/arrow_l.svg") center left 10px/8px auto no-repeat, #4d4a52;
	}

	#content .deteil #plan_area .page_btn.next a{
		padding: 14px 30px 14px 10px;
		background: url("../img/arrow_r.svg") center right 10px/8px auto no-repeat, #4d4a52;
	}

	#content .deteil #plan_area .ex{
		width: 90%;
		padding: 40px 0 40px 0;
	}
	#content .deteil #plan_area .ex .unit{
		padding: 0 20px 0 0;
	}
	#content .deteil #plan_area .ex .unit i{
		width: 32px;
		height: 1em;
	}
	#content .deteil #plan_area .ex .unit p{
		font-size: 0.875rem;
	}
}
@media only screen and (max-width: 480px) {


	/* 間取り図画像サイズ設定 */
	/* 画像幅/480*100% */
	/* R2 */
	#content .deteil #plan_area .plan_image.a img,
	#content .deteil #plan_area .plan_image.b img,
	#content .deteil #plan_area .plan_image.c img,
	#content .deteil #plan_area .plan_image.d img,
	#content .deteil #plan_area .plan_image.e img,
	#content .deteil #plan_area .plan_image.f img,
	#content .deteil #plan_area .plan_image.g img,
	#content .deteil #plan_area .plan_image.h img,
	#content .deteil #plan_area .plan_image.i img,
	#content .deteil #plan_area .plan_image.j img,
	#content .deteil #plan_area .plan_image.k img,
	#content .deteil #plan_area .plan_image.l img,
	#content .deteil #plan_area .plan_image.m img,
	#content .deteil #plan_area .plan_image.n img,
	#content .deteil #plan_area .plan_image.q img{
		width: 90%;
	}
	
	#content .deteil #plan_area .page_btn{
		width: 47%;
	}
	#content .deteil #plan_area .page_btn a{
		font-size: 1.000rem;
	}
	#content .deteil #plan_area .page_btn.prev a{
		padding: 12px 10px 12px 25px;
	}

	#content .deteil #plan_area .page_btn.next a{
		padding: 12px auto 12px 10px;
	}

	#content .deteil #plan_area .ex{
		width: 90%;
		padding: 30px 0 30px 0;
	}
	#content .deteil #plan_area .ex .unit{
		padding: 0 15px 0 0;
	}
	#content .deteil #plan_area .ex .unit i{
		width: 32px;
		height: 1em;
	}
	#content .deteil #plan_area .ex .unit p{
		font-size: 0.875rem;
	}
}


/* btn_area_plan */
#content .btn_area_plan{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 50px 0 50px 0;
}
#content .btn_area_plan a{
	width: 35%;
	margin: 0 auto;
	text-decoration: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	font-size: 1.25rem;
	text-align: center;
	letter-spacing: 0.2em;
	padding: 0.7em 0;
	box-sizing: border-box;
	position: relative;
	color: #FFF;
	background: var(--P1-color);
}
#content .btn_area_plan a::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("../img/btn_arrow.svg") center right 1em/9px 13px no-repeat;
}
#content .btn_area_plan a.pdf::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("../img/i_pdf.svg") center right 1em/20px auto no-repeat;
}
#content .btn_area_plan a.pdf span{
	width: 100%;
	font-size: 0.75rem;
	text-align: center;
	letter-spacing: 0.1em;
	display: block;
	padding: 0.4em 0 0 0;
}




@media only screen and (max-width: 999px) {
	#content .btn_area_plan{
		padding: 40px 0 40px 0;
	}
	#content .btn_area_plan a{
		width: 40%;
		font-size: 1.125rem;
	}
	#content .btn_area_plan a::after{
		background: url("../img/btn_arrow.svg") center right 1em/9px 13px no-repeat;
	}
}

@media only screen and (max-width: 768px) {
	#content .btn_area_plan{
		padding: 30px 0 30px 0;
	}
	#content .btn_area_plan a{
		width: 70%;
		font-size: 1.000rem;
		margin: 0 auto 10px auto;
	}
	#content .btn_area_plan a::after{
		background: url("../img/btn_arrow.svg") center right 1em/9px 13px no-repeat;
	}
	#content .btn_area_plan a.pdf span{
		font-size: 0.688rem;
	}
}
@media only screen and (max-width: 480px) {
	#content .btn_area_plan{
		padding: 30px 0 30px 0;
	}
	#content .btn_area_plan a{
		width: 90%;
		font-size: 0.938rem;
		margin: 0 auto 10px auto;
	}
	#content .btn_area_plan a.pdf span{
		font-size: 0.625rem;
	}
}