/*@mixin nav-on{ background:    -moz-linear-gradient(left,#433f29,#787048); background: -webkit-linear-gradient(left,#433f29,#787048); background:         linear-gradient(to right,#433f29,#787048);
}*/
/*
@mixin reserve-off{ background: #9d1720;
}
@mixin reserve-on{ background: #bf5e65;
}
@mixin sp-reserve-off{ background: #9d1720;
}
@mixin sp-reserve-on{ background: #bf5e65;
}*/
.contents-block { width: 100%; padding: 5rem 0; }
.contents-block:first-of-type { padding-top: 0; }
.contents-block:last-of-type { padding-bottom: 0; }
.contents-block .note-block { width: 100%; margin: 3.5rem auto 0; }
.contents-block .note-block .note { font-size: 0.75em; }
@media screen and (max-width: 600px) { .contents-block { padding: 2.5rem 0; } }

.intro { margin-bottom: 4rem; }
@media screen and (max-width: 600px) { .intro { margin-bottom: 2rem; } }

.img video { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

.main { margin: auto; }
.main .main-copy { color: #fff; position: absolute; top: 8.6956521739%; left: 50%; transform: translateX(-50%); }
.main .lead { position: absolute; bottom: 19.5652173913%; left: 50%; transform: translateX(-50%); }
.main .slick-dotted.slick-slider { margin-bottom: 0; }
.main .slick-dots { bottom: 0; }
@media screen and (max-width: 1024px) { .main .lead { bottom: 10.57%; } }
@media screen and (max-width: 834px) { .main .lead { bottom: 5.57%; } }
@media screen and (max-width: 768px) { .main { padding-bottom: 7.43%; } }
@media screen and (max-width: 600px) { .main .main-copy, .main .lead { position: static; transform: none; }
  .main .main-copy { padding-top: 2.5rem; color: #212121; }
  .main .mv-slide .cap { bottom: 1rem; }
  .main .img video { width: 180%; margin-left: -40%; } }

.fig { width: 100%; position: relative; }
.fig .wappen { width: 160px; position: absolute; top: 0; right: 0; }
.fig .wappen img { width: 100%; height: auto; }
@media screen and (max-width: 834px) { .fig .wappen { width: 144px; } }
@media screen and (max-width: 600px) { .fig .wappen { width: 96px; top: -1rem; right: 12%; } }

.landplan-items { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; align-content: flex-start; padding-top: 1rem; }
.landplan-items div, .landplan-items li { min-height: 0; }
.landplan-items li { width: calc((100% - 3rem) / 4); margin-top: 1.5rem; line-height: 0; }
.landplan-items li .image { width: 100%; line-height: 0; }
.landplan-items li .image .img { line-height: 0; }
.landplan-items li .text { width: 100%; background-color: #336c5b; padding: 0.5rem; font-family: "Noto Sans JP" , "Helvetica Neue", YuGothic, 'Yu Gothic medium', 'Hiragino Sans', Meiryo, 'sans-serif'; -webkit-font-smoothing: antialiased; font-weight: normal; color: #fff; }
.landplan-items li .text .item-name { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
.landplan-items li .text .item-name div, .landplan-items li .text .item-name li { min-height: 0; }
.landplan-items li .text .item-name .num { width: 1.125rem; height: 1.125rem; border: thin solid #fff; position: relative; }
.landplan-items li .text .item-name .num span { font-size: 0.75em; color: #fff; line-height: 1; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.landplan-items li .text .item-name h4 { width: calc(100% - 1.125rem); text-align: center; font-size: 1em; line-height: 1.2; font-weight: normal; }
.landplan-items li .text .item-name h4 sup, .landplan-items li .text .item-name h4 sub { font-size: 50%; }
.landplan-items li .text .item-name h4 sup { vertical-align: super; }
.landplan-items li .text .item-name h4 sub { vertical-align: baseline; }
.landplan-items li .text .item-name h4 .note { display: block; color: #fff; }
.landplan-items li .text .item-name + .item-name { margin-top: 0.5rem; }
.landplan-items li .text .lead { font-family: "Noto Sans JP" , "Helvetica Neue", YuGothic, 'Yu Gothic medium', 'Hiragino Sans', Meiryo, 'sans-serif'; -webkit-font-smoothing: antialiased; font-weight: normal; font-size: 0.875em; color: #fff; text-align: left; padding-top: 0.5rem; margin-top: 0.75rem; border-top: thin solid #fff; }
.landplan-items li.parking { width: calc((((100% - 3rem) / 4) *2 ) + 1rem); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
.landplan-items li.parking div, .landplan-items li.parking li { min-height: 0; }
.landplan-items li.parking .image { width: 38.0952380952%; background: url("../img/img01.jpg") top left/cover no-repeat; }
.landplan-items li.parking .image .img { height: 100%; }
.landplan-items li.parking .text { width: 61.9047619048%; padding: 1rem 1.5rem 0.75rem; }
.landplan-items li.parking .text .item-name h4 { text-align: left; padding-left: 0.5rem; }
.landplan-items li.garden { width: calc((((100% - 3rem) / 4) * 2.5 ) + 1rem); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
.landplan-items li.garden div, .landplan-items li.garden li { min-height: 0; }
.landplan-items li.garden .image { order: 2; width: 100%; }
.landplan-items li.garden .image > .img ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: stretch; align-content: flex-start; }
.landplan-items li.garden .image > .img ul div, .landplan-items li.garden .image > .img ul li { min-height: 0; }
.landplan-items li.garden .image > .img ul li { width: 24%; margin-top: 0; }
.landplan-items li.garden .image > .img ul li .img .greenname { width: 100%; background-color: rgba(0, 0, 0, 0.64); color: #fff; font-family: "Noto Sans JP" , "Helvetica Neue", YuGothic, 'Yu Gothic medium', 'Hiragino Sans', Meiryo, 'sans-serif'; -webkit-font-smoothing: antialiased; font-weight: normal; font-size: 0.8125em; text-align: center; line-height: 1.2; padding: 0.5rem; position: absolute; bottom: 0; left: 0; }
.landplan-items li.garden .text { order: 1; width: 100%; padding: 1rem 1.5rem 0.75rem; }
.landplan-items li.garden .text .item-name h4 { text-align: left; padding-left: 0.5rem; }
.landplan-items li.evcharge .text h4 { font-size: 0.875em; }
.landplan-items li.porch .text, .landplan-items li.evcharge .text { min-height: 3.1725rem; display: flex; flex-direction: column; justify-content: center; }
.landplan-items li.roadheating { width: 35.7421875%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
.landplan-items li.roadheating div, .landplan-items li.roadheating li { min-height: 0; }
.landplan-items li.roadheating .image { order: 2; }
.landplan-items li.roadheating .image .img { height: 100%; }
.landplan-items li.roadheating .image .img img { width: 100%; height: 100%; object-fit: cover; }
.landplan-items li.roadheating .text { order: 1; padding: 1rem 1.5rem 0.75rem; }
.landplan-items li.roadheating .text .item-name h4 { text-align: left; padding-left: 0.5rem; }
@media screen and (max-width: 1024px) { .landplan-items li.parking .image { width: 34%; }
  .landplan-items li.parking .text { width: 66%; }
  .landplan-items li.porch .text { min-height: 3rem; } }
@media screen and (max-width: 834px) { .landplan-items li { width: calc((100% - 2rem) / 3); }
  .landplan-items li.parking { width: 100%; }
  .landplan-items li.parking .image { width: 32%; }
  .landplan-items li.parking .text { width: 68%; }
  .landplan-items li.garden { width: 100%; }
  .landplan-items li.garden .image { width: 61%; }
  .landplan-items li.garden .image > .img ul { padding-left: 0; }
  .landplan-items li.garden .text { width: 38%; }
  .landplan-items li.tirerack .text { min-height: 3rem; display: flex; flex-direction: column; justify-content: center; }
  .landplan-items li.roadheating { width: 100%; }
  .landplan-items li.roadheating .image { width: 32%; }
  .landplan-items li.roadheating .text { width: 68%; } }
@media screen and (max-width: 600px) { .landplan-items li { width: 48.5%; margin-top: 1rem; }
  .landplan-items li .text { padding: 0.5rem 0.25rem; }
  .landplan-items li .text .item-name .num { width: 0.875rem; height: 0.875rem; }
  .landplan-items li .text .item-name .num span { font-size: 0.75em; }
  .landplan-items li .text .item-name h4 { width: clac(100% -0.875rem); font-size: 0.875em; }
  .landplan-items li.parking { margin-top: 1.5rem; }
  .landplan-items li.parking .image { width: 100%; height: 12rem; }
  .landplan-items li.parking .text { width: 100%; padding: 0.75rem 1rem 0.5rem; }
  .landplan-items li.parking .text .item-name h4 .note { display: inline; }
  .landplan-items li.garden { margin-top: 1.5rem; }
  .landplan-items li.garden .image { width: 100%; order: 1; }
  .landplan-items li.garden .image > .img ul li .img .greenname { font-size: 0.625em; padding: 0.25rem; }
  .landplan-items li.garden .text { width: 100%; order: 2; margin-top: 0.25rem; margin-bottom: 0; padding: 0.75rem 1rem 0.5rem; }
  .landplan-items li.evcharge .text .item-name h4 { font-size: 0.6875em; }
  .landplan-items li.evcharge .text .item-name h4 sup, .landplan-items li.evcharge .text .item-name h4 sub { font-size: 60%; }
  .landplan-items li.porch .text, .landplan-items li.evcharge .text { min-height: 2.75rem; }
  .landplan-items li.tirerack .text { min-height: auto; display: block; }
  .landplan-items li.roadheating .image { order: 1; width: 100%; }
  .landplan-items li.roadheating .text { order: 2; width: 100%; padding: 0.75rem 1rem 0.5rem; } }
@media screen and (max-width: 380px) { .landplan-items li.evcharge .text .item-name h4 { font-size: 0.625em; }
  .landplan-items li.evcharge .text .item-name h4 sup, .landplan-items li.evcharge .text .item-name h4 sub { font-size: 64%; }
  .landplan-items li.porch .text, .landplan-items li.evcharge .text { min-height: 2.5rem; } }
@media screen and (max-width: 320px) { .landplan-items li { width: 100%; }
  .landplan-items li.evcharge .text .item-name h4 { font-size: 0.875em; }
  .landplan-items li.evcharge .text .item-name h4 sup, .landplan-items li.evcharge .text .item-name h4 sub { font-size: 50%; }
  .landplan-items li.porch .text, .landplan-items li.evcharge .text { min-height: auto; display: block; } }

.sec1 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; align-content: flex-start; }
.sec1 div, .sec1 li { min-height: 0; }
.sec1 .right { width: 51.5625%; order: 2; }
.sec1 .right .img { margin-top: 1.5rem; }
.sec1 .left { width: 48.4375%; order: 1; }
.sec1 .left .img img { vertical-align: bottom; }
.sec1 .left .img .cap { right: auto; left: 0.25rem; color: #fff; text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000; }
@media screen and (max-width: 600px) { .sec1 .right { width: 100%; order: 1; }
  .sec1 .left { width: 80%; /*margin: auto;*/ margin: 2rem auto 0; order: 2; } }

.sec3 { background-image: -webkit-linear-gradient(135deg, #004152, #559175); background-image: -o-linear-gradient(135deg, #004152, #559175); background-image: linear-gradient(135deg, #004152, #559175); }
.sec3 .contents-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: flex-start; }
.sec3 .contents-inner div, .sec3 .contents-inner li { min-height: 0; }
.sec3 .contents-inner .left { width: 35.15625%; }
.sec3 .contents-inner .left .main-copy { color: #fff; text-align: left; margin-bottom: 2.5rem; }
.sec3 .contents-inner .left .img { width: 88%; }
.sec3 .contents-inner .left .img .cap { color: #fff; }
.sec3 .contents-inner .right { width: 64.84375%; }
.sec3 .contents-inner .right .img .cap { color: #fff; }
@media screen and (max-width: 600px) { .sec3 .contents-inner .left { width: 100%; }
  .sec3 .contents-inner .left .main-copy { text-align: center; }
  .sec3 .contents-inner .left .img { width: 80%; margin: auto; }
  .sec3 .contents-inner .right { width: 100%; margin: 1.5rem auto auto; } }