@charset "UTF-8";
/*-----------------------------------------------------
  Plan
----------------------------------------------------- */
#main { background: #fbfaf8;}
.head_area p.cp { color: var(--main-font-color); }
.head_area {background:url("../img/plan/head.png") no-repeat;background-size:cover;background-position:center;margin-bottom: 60px;}
.pages .intro p.intro_ttl { font-size: clamp(18px, 4vw, 23px); line-height: 2; margin-bottom: clamp(15px, 3vw, 45px); }
.pages .intro p.intro_txt { font-size: clamp(13px, 3vw, 15px); line-height: 1.8; }
.pages .intro .intro_inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 45px; }

ul.menu { display: grid; justify-content: center; gap: 25px; grid-template-columns: 1fr 1fr 1fr 1fr;}
ul.menu li {max-width:180px; transition:0.3s ease-in-out;}
ul.menu li:hover {opacity:.6;}
.anchor_menu_wrap { background: #fff; padding: 20px 0; }
.anchor_menu_wrap p.ttl { text-align: center; font-size: 30px; color: var(--mossgreen-color); margin-bottom: clamp(5px, 3vw, 15px); }

.machinami_bg { background: url("../img/plan/machinami_bg.png")no-repeat; background-size: cover; background-position: bottom; width: 100%; min-height: 630px; }

.sec_ttl { text-align: center; font-size: clamp(16px, 4vw, 23px); margin-bottom: 10px; }
.sec_txt { text-align: center; font-size: clamp(13px, 2vw, 15px); line-height: 1.8; }
.sec_cp { text-align: center; font-size: clamp(10px, 2vw, 13px); margin-bottom: clamp(15px, 3vw, 30px);; }
.grid { display: grid; justify-content: center; gap: clamp(10px, 4vw, 30px); }
.grid.col-3 { grid-template-columns: 1fr 1fr 1fr; }
/*.grid.col-3 { grid-template-columns: repeat(3, minmax(260px, 1fr)); }*/

/*見出し花アイコン 黄色*/
.flower-y { position: relative; text-align: center; }
.flower-y img { max-width: 84px; margin: 0 auto 30px; z-index: 1; position: relative; }
.flower-y::before , .flower-y::after { position: absolute; content: ''; display: inline-block; background: url("../img/plan/icon_flower-y.svg")no-repeat; width: 87px; height: 100%; top: -18px; z-index:0; }
.flower-y::before { left: 0; }
.flower-y::after { right: 0; transform: scale(-1, 1); }

/*見出し花アイコン 緑・黄色*/
.flower-gy { position: relative; text-align: center; }
.flower-gy img { max-width: 84px; margin: 0 auto 30px; z-index: 1; position: relative; }
.flower-gy::before , .flower-gy::after { position: absolute; content: ''; display: inline-block; background: url("../img/plan/icon_flower-gy.svg")no-repeat; width: 87px; height: 100%; top: -18px; z-index:0; }
.flower-gy::before { left: 0; }
.flower-gy::after { right: 0; transform: scale(-1, 1); }

/*見出し花アイコン 緑・黄色*/
.flower-ry { position: relative; text-align: center; }
.flower-ry img { max-width: 84px; margin: 0 auto 30px; z-index: 1; position: relative; }
.flower-ry::before { position: absolute; content: ''; display: inline-block; background: url("../img/plan/icon_flower-ry.svg")no-repeat; width: 87px; height: 100%; top: -18px; z-index:0; }
.flower-ry::after { position: absolute; content: ''; display: inline-block; background: url("../img/plan/icon_flower-ry2.svg")no-repeat; width: 87px; height: 100%; top: -18px; z-index:0; }
.flower-ry::before { left: 0; }
.flower-ry::after { right: 0; }


.garden { background: #e4ede7; padding:clamp(60px, 6vw, 100px) 0 clamp(60px, 6vw, 70px); }
.garden .garden_ttl img { max-width: 300px; margin: 0 auto 25px; }
.garden .illust { position: relative; }
.garden .illust::before { content: ''; position: absolute; background: url("../img/plan/icon_cup.svg")no-repeat; background-size: contain; width: 130px; height: 60px; left: 0; bottom: 0; }
.garden .illust::after { content: ''; position: absolute; background: url("../img/plan/icon_cookie.svg")no-repeat; background-size: contain; width: 90px; height: 70px; right: 0; bottom: 0; }
.garden_contents { background: #fff; border-radius: clamp(30px, 3vw, 50px); padding: clamp(30px, 3vw, 50px) clamp(20px, 3vw, 50px); margin: clamp(100px, 3vw, 50px) 0 clamp(40px, 3vw, 55px); }
.garden .tree_ttl { max-width: 70px; margin: 0 auto 25px; }
.garden .detail { margin: 10px 0; }
.garden .detail .tree_name { text-align: center; font-size: clamp(14px, 2vw, 19px); font-family: var(--a1gothic-font); }
.garden .detail .tree_name::after { content: ''; display: block; background: url("../img/plan/tree_line.svg")no-repeat; background-size: contain; width: 100%; height: 12px; }
.garden .detail .tree_time { text-align: center; font-size: clamp(11px, 2vw, 15px); font-family: var(--a1gothic-font); }
.garden .desc { font-size: clamp(12px, 2vw, 13px); font-family: var(--a1gothic-font); }
.garden .flower_wrap { margin-top: clamp(30px, 4vw, 50px); }
.garden .flower_wrap picture { margin-bottom: 10px; }
.garden .flower_wrap .cp { text-align: right; }
.garden .flower_wrap .sec_ttl { font-size: clamp(14px, 2vw, 18px); text-align: center; margin-bottom: 10px; padding: 0 5px; position: relative; }
.garden .flower_wrap .sec_ttl::before { content: ''; display: inline-block; background: url("../img/plan/tree_icon_flower.svg")no-repeat; background-size: contain; width: 26px; height: 29px; vertical-align: -7px; position: absolute; left: 0; }
.garden .flower_wrap .sec_ttl::after { content: ''; display: inline-block; background: url("../img/plan/tree_icon_flower.svg")no-repeat; background-size: contain; width: 26px; height: 29px; vertical-align: -7px; position: absolute; right: 0; }

.facade_contents .facade_ttl img { max-width: 84px; margin: 0 auto clamp(15px, 4vw, 25px); }
.facade_contents .sec_ttl { margin-bottom: clamp(25px, 3vw, 20px); }
.facade_contents .obi_ttl { background: var(--mossgreen-color); border-radius: 50px; padding: 8px 10px; box-sizing: border-box; text-align: center; margin-bottom: clamp(15px, 4vw, 35px);}
.facade_contents .obi_ttl img { max-width: min(30% , 137px); margin: 0 auto; vertical-align: 1px; }

.facade_contents .wall_img { max-width: 700px; margin: clamp(15px, 3vw, 30px) auto; }
.facade_contents .wall_img picture { margin-bottom: 10px; }
.facade_contents .wall_img .cp { text-align: right; }
.garden .contents_inner:not(:last-child) { margin-bottom: clamp(30px, 3vw, 50px); }
.facade_contents .wall .sec_ttl { margin-bottom: clamp(10px, 3vw, 20px); }

.facade_contents .door_img { max-width: 700px; margin: clamp(15px, 3vw, 30px) auto clamp(35px, 3vw, 30px); }
.facade_contents .door .grid-card .ttl { color: var(--mossgreen-color); background: #fff; padding: 10px; box-sizing: border-box; font-family: var(--a1gothic-font); font-size: clamp(13px, 3vw, 17px); font-weight: 700; margin-bottom: clamp(10px, 3vw, 15px); }
.facade_contents .door .grid-card .desc { margin-bottom: 10px;}
.facade_contents .door .grid-card .ph { margin-bottom: 10px; }

.link_area { padding: clamp(20px, 6vw, 30px) 0; }
.link_area.bf { background: #f0ece3; }
.link_area .ttl { font-size: clamp(16px, 2vw, 20px); text-align: center; margin-bottom: 20px; }
.link_area a { max-width: 600px; width: 100%; transition: .5s; margin: 0 auto; display: block; }
.link_area picture { max-width: 600px; width: 100%; box-shadow: 0 0 10px #aeaeae;}

.housedesign { padding: clamp(60px, 6vw, 100px) 0 clamp(60px, 6vw, 70px); background: #F0ECE3; }
.housedesign .housedesign_ttl img { max-width: 220px; margin: 0 auto 25px; }
.housedesign .lead_wrap { margin-bottom: 60px; }
.housedesign .lead_wrap .sec_txt { position: relative; z-index: 1; }
.housedesign .lead_wrap .sec_txt::before { content: ''; display: inline-block; background: url("../img/plan/icon_illu01.svg")no-repeat; position: absolute; width: 189px; height: 100%; bottom: -60px; left: 0; z-index: -1; }
.housedesign .lead_wrap .sec_txt::after { content: ''; display: inline-block; background: url("../img/plan/icon_illu02.svg")no-repeat; position: absolute; width: 196px; height: 100%; bottom: -60px; right: 0; z-index: -1; }
.housedesign .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.housedesign .grid ul li a { transition: .5s; }
.housedesign .grid ul li { box-shadow: 0 0 5px #aeaeae; }
.housedesign .grid ul li:not(:last-child) { margin-bottom: 10px; }
.housedesign .detail { margin-top: 50px; }
.housedesign .detail_box:not(:last-child) { margin-bottom: 30px; }
.housedesign .detail_box { background: #fff; border-radius: 50px; padding: 30px 50px 20px; box-sizing: border-box; }
.housedesign .detail_box .grid { grid-template-columns: 3fr 4fr; gap: 30px; }
.housedesign .detail_box .hd_txt { margin-bottom: 20px; }
.housedesign .detail_box .txt { font-size:clamp(13px, 2vw, 15px); }

.housedesign .lighting_contents { background: #FCF9F0 url("../img/plan/lighting_bg.png")no-repeat; background-position: top center; background-size: contain; width: 100%; padding: 60px 50px; box-sizing: border-box; margin-top: 50px; }
.housedesign .lighting_ttl { text-align: center; }
.housedesign .lighting_ttl img { max-width: 100px; margin: 0 auto 25px; }
.housedesign .type .type_ttl { margin-bottom: 10px; }
.housedesign .lighting_type { margin: 30px 0; }
.housedesign .lighting_contents .grid { grid-template-columns: 4fr 2.65fr; gap: 50px; }
.housedesign .lighting_contents .inner_grid { display: grid; grid-template-columns: 4fr 1fr; gap: 15px; margin-bottom: 10px; }
.housedesign .lighting_contents .txt {font-family: var(--gothic-font); font-size:clamp(13px, 2vw, 15px); }
.housedesign .lighting_contents .typeB .inner_grid , .housedesign .lighting_contents .typeC .inner_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 10px; }

.housedesign .lighting_contents .typeB .inner_grid .lighting_typeB_img02 { margin: 30px auto 10px; }
.housedesign .type .ph { margin-bottom: 5px; }
.housedesign .lighting_contents .lighting_img { width: 100%; margin: 30px auto; }
.housedesign .lighting_contents .lighting_img .cp { text-align: right; }
.housedesign .lighting_contents .inner_grid .type_ttl.typeD { margin:30px auto 10px }

.housedesign .lighting_contents .lighting_typeE_img01 { margin-top: 10px; }
.housedesign .lighting_contents .typeE .cp { margin-top: 5px; }

.woods { background: url("../img/plan/woods_bg.png")no-repeat; padding: clamp(60px, 10vw, 80px) 0; background-size: 100%; position: relative; }
.woods > .cp { position: absolute; right: 1%; top: 1%; }
.woods .woods_ttl { text-align: center; }
.woods .woods_ttl img { max-width: 100px; margin: 0 auto 25px; }
.woods .grid { display:grid; grid-template-columns: 1fr 1fr; }
.woods .grid img { margin: 20px 0 5px; }
.woods .obi_ttl { background: #b18c81; border-radius: 50px; padding: 8px 10px; box-sizing: border-box; text-align: center; margin-bottom: clamp(15px, 4vw, 35px); margin-top: 40px; }
.woods .obi_ttl img { max-width: min(15% , 66px); margin: 0 auto; vertical-align: 1px; }
.woods .txt_area { background: #fcf9f0; padding: 40px; box-sizing: border-box; margin-top: 25px; position: relative; }
.woods .txt_area ::before { content: ""; position: absolute; inset: 12px; border: 1px solid #b18c81; }
.woods .txt_area p { text-align: center; }
.woods .txt_area .ttl { color: #b18c81; font-size: clamp(16px, 3vw, 23px); margin-bottom: 13px; }
.woods .txt_area .txt { font-size: clamp(13px, 3vw, 15px); line-height: 1.8; }
.woods .beam picture.beam_ph { margin-top: 30px; }
.woods .beam picture.beam_ph + .cp { text-align: right; margin-top: 5px; }

.landplan { padding: clamp(60px, 10vw, 80px) 0 0; }
.landplan .landplan_ttl { text-align: center; margin-bottom: clamp(20px, 3vw, 45px); }
.landplan .landplan_ttl img { max-width: 160px; margin: 0 auto 10px; }
.landplan .landplan_ttl p.jp { color: #b18c81; font-size: clamp(18px, 3vw, 23px); }
.landplan .lead_wrap { margin-bottom: clamp(60px, 6vw, 80px); }
.landplan .lead_wrap p.cp { text-align: center; }
.landplan .kukaku { margin: clamp(20px, 6vw, 30px) auto clamp(30px, 6vw, 70px); }
.landplan .kukaku p.cp { text-align: right; }

.landplan .shop_wrap { background: #e4ede7; border-radius: 50px; padding: 40px; box-sizing: border-box; margin-bottom: 5px; }
.landplan .shop_wrap p.ttl { text-align: center; font-size: clamp(15px, 3vw, 20px); margin-bottom: clamp(10px, 3vw, 20px); }
.landplan .shop_wrap .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.landplan .shop_wrap .shop_img { margin-bottom: 10px; }
.landplan .shop_wrap .grid-box:last-of-type { display: flex; }
.landplan .shop_wrap .shop_icon { max-width: 192px; width: 100%; margin: auto auto 50px; }
.landplan .shop_wrap + .cp { text-align: left!important; }

.plan .plan_ttl { margin-bottom: clamp(20px, 3vw, 40px); }
.plan .plan_ttl img { max-width: 70px; margin: 0 auto 10px; }
.plan .plan_ttl .jp { color: #b18c81; }
.plan { background: #f0ece3; padding: clamp(60px, 6vw, 80px) 0 clamp(80px, 6vw, 120px); }
.plan .plan_detail:not(:last-child) { margin-bottom: clamp(30px, 10vw, 100px); }
.plan .plan_detail:last-child { margin-bottom: clamp(40px, 8vw, 120px); }
.plan .plan_detail { background: #fff; position: relative; }
.plan .detail_inner { padding: 45px 45px 30px; box-sizing: border-box; }
.plan .plan_detail::before { content: ''; background: #b18c81; width: 100%; height: 15px; position: absolute; top: 0;}
.plan .plan_detail::after { content: ''; background: #b18c81; width: 100%; height: 15px; position: absolute; bottom: 0;}
.plan .num { text-align: center; margin-bottom:clamp(15px, 3vw, 35px); }
.plan .num img { max-width: 136px; }
.plan .plan_detail .ttl { text-align: center; font-size: clamp(13px, 2vw, 23px); }
.plan .plan_detail picture { margin: 20px 0; }

@media (hover: hover) and (pointer: fine) {
	.link_area a:hover { opacity: .5; }
	.housedesign .grid ul li a:hover { opacity: .5; }
}

@media only screen and (max-width: 980px){
  .garden .illust::before , .garden .illust::after { bottom: -80px; }
}

/*　600pxからレスポンシブ*/
@media only screen and (max-width: 600px){
  .head_area { background: url(../img/plan/head_sp.png) no-repeat; background-size: 100%; }
  .pages .intro p.intro_ttl { line-height: 1.7; }
  .pages .intro p.intro_txt { line-height: 1.6; }
  .pages .intro .intro_inner { grid-template-columns: 1fr; }
  ul.menu { width: 80%; margin: 0 auto; gap: 15px; grid-template-columns: 1fr 1fr; }
  .machinami_bg { background: url(../img/plan/machinami_bg_sp.png) no-repeat; background-size: cover; background-position: bottom; width: 100%; min-height: 165px; }
  .garden .garden_ttl img { width: 70%; }
  .flower-y::before, .flower-y::after , .flower-gy::before, .flower-gy::after , .flower-ry::before , .flower-ry::after { width: 37px; top: 0px; }
  .garden .tree_ttl { width:20%; }
  .garden_contents .grid.col-3 { grid-template-columns: 1fr 1fr; gap: 15px; }
  .door .grid.col-3 { grid-template-columns: 1fr; gap: 15px; }
  .housedesign .housedesign_ttl img { width: 40%; }
  .housedesign .lead_wrap { margin-bottom: 120px; }
  .housedesign .lead_wrap .sec_txt::before , .housedesign .lead_wrap .sec_txt::after { width: 40%; bottom: -220px; }
  .housedesign .grid { grid-template-columns: 1fr; gap: 30px; }
  .housedesign .lighting_contents .grid { grid-template-columns: 1fr; }
  .housedesign .detail_box .grid { grid-template-columns: 1fr; gap: 10px; }
  .housedesign .detail_box { border-radius: 30px; padding: 25px; }
  .housedesign .lighting_contents { padding: 40px 20px; }
  .housedesign .lighting_contents .grid { gap: 25px; }
  .plan .num img { width: 30%; }
  .plan .detail_inner { padding: 35px 20px 20px; }
  .landplan .shop_wrap { padding: 30px 20px; border-radius: 30px; }
  .landplan .shop_wrap .grid { grid-template-columns: 1fr; gap: 20px; }
  .landplan .landplan_ttl img { width: 40%; }
  .garden .illust::before{ width: 110px; height: 60px; bottom: -70px; }
  .garden .illust::after { width: 80px; height: 60px; bottom: -70px; }
  .garden .flower_wrap .sec_ttl::before , .garden .flower_wrap .sec_ttl::after { bottom: 0; }
}