@charset "UTF-8";
/* CSS Document */
#Main .block {margin-top: 5em;}
#Main .block .container {background: url(../img/common/bg02.webp);background-repeat: repeat;background-size: 300px 300px;}
#Main .block .container .img {position: relative;}
#Main .block .container .img h3 {color: #fff;font-size: 125%;position: absolute;top: 1em;left: 1em;z-index: 1;}
#Main .block .container .img h3::before {display: block;color: #fff;content: attr(data-title);font-size: 240%;line-height: 1;}
#Main .block .container .item {padding: 3em;}
#Main .block .container .item ul {display: flex;flex-wrap: wrap;justify-content: flex-start;margin: 0 auto;}
#Main .block .container .item ul li {width: calc(25% - 1.8em);margin: 0.9em;}
#Main .block .container .item ul li > p:nth-of-type(1) {font-size: 118.75%;text-align: center;margin-top: 1em;}
#Main .block .container .item ul li > p:nth-of-type(2) {font-size: 93.75%;letter-spacing: 0.1em;margin-top: 0.75em;}
#Main .block .container .item ul li > p:nth-of-type(2) small {display: block;font-size: 10px;letter-spacing: 0;}
#Main .block .container .item ul li.feature01{margin: 0 0 0 auto;padding: 2em 2em 1.5em;background: rgba(255,255,255,0.47);border: 4px solid rgba(122,158,176,0.47);position: relative;}
#Main .block .container .item ul li.feature01 p:nth-child(1) {color: #608597;font-size: 150%;line-height: 1;}
#Main .block .container .item ul li.feature01 p:nth-child(1) small {font-size: 70%;}
#Main .block .container .item ul li.feature01 p:nth-child(2) {font-size: 93.75%;margin-top: 1em;}
#Main .block .container .item ul li.feature01 p:nth-child(2) small {display: block;font-size: 10px;margin-top: 1.5em;}
#Main #kitchen .item ul {max-width: calc(1000px + 1.8em);}
#Main #kitchen .item ul li.feature01{width: 60%;}
#Main #kitchen .item ul li.feature01::after {display: block;content: '';width: 46%;height: 60%;position: absolute;right: 1.5em;bottom: 1.25em;background: url("../img/equipment/equipment_img11.svg") no-repeat right bottom/contain;}
#Main #kitchen .item ul li.feature01 p:nth-child(2) {max-width: 260px;}
#Main #kitchen .item ul li.feature01 {margin-top: 4em;max-height: 220px;}
#Main #bathroom .item ul {max-width: calc(1000px + 1.8em);}
#Main #bathroom .item ul li.feature01 {width: 45%;}
#Main #bathroom .item ul li.feature01 {margin-top: 7em;max-height: 190px;}
#Main #powderroom {display: flex;flex-wrap: wrap;justify-content: space-between;}
#Main #powderroom .img {width: 47%;}
#Main #powderroom .item {width: 53%;padding: 3em 3em 2em;}
#Main #powderroom .item ul {max-width: calc(540px + 1.8em);}
#Main #powderroom .item ul li {width: calc(50% - 1.8em);}
#Main #powderroom .item ul li.feature01 {width: 80%;margin: 1em auto 0;}
#Main #toilet {display: flex;flex-wrap: wrap;justify-content: space-between;}
#Main #toilet .img {width: 42%;}
#Main #toilet .item {width: 58%;}
#Main #toilet .item ul li {width: 100%;margin: 0;padding-right: 60%;position: relative;}
#Main #toilet .item ul li > p:nth-of-type(1) {text-align: left;}
#Main #toilet .item ul li div {width: 50%;position: absolute;top: 0;right: 0;}
#Main #toilet .item ul li div figure {width: 90%;margin: 0 auto;}
#Main #toilet .item ul li div p {font-size: 10px;margin-top: 2em;}
#Main .block-common-note {margin-top: 1em;background: transparent;}
#Main .block-common-note .container {background: transparent;}
@media only screen and (max-width: 1350px) {
  #Main .block .container .item {padding: 1em !important;}
  #Main #toilet .item ul {padding: 1.5em !important;}
}
@media only screen and (max-width: 1200px) {
  #Main .block {margin-top: 3em;}
  #Main .block .container .item ul li {width: calc(25% - 1em);margin: 0.5em;}
  #Main .block .container .item ul li.feature01 {width: 100% !important;padding: 1em !important;}
  #Main .block .container .item ul li.feature01 p:nth-child(2) br {display: none;}
  #Main .block .container .item ul li.feature01 p:nth-child(2) small {margin-top: 0.5em;}
  #Main .block .container .item ul li > p:nth-of-type(1) {font-size: 100%;margin-top: 0.5em;}
  #Main .block .container .item ul li > p:nth-of-type(2) {font-size: 87.5%;letter-spacing: 0;margin-top: 0.5em;}
  #Main #kitchen .item ul li.feature01 {margin-top: 1em;}
  #Main #kitchen .item ul li.feature01::after {width: 34%;height: 80%;}
  #Main #kitchen .item ul li.feature01 p:nth-child(2) {max-width: 63%;}
  #Main #bathroom .item ul li.feature01 {margin-top: 1em;}
  #Main #powderroom .item ul {max-width: calc(540px + 1em);}
  #Main #powderroom .item ul li {width: calc(50% - 1em);}  
  #Main #toilet .item ul {padding: 0.5em !important;}
  #Main #toilet .item ul li {padding-right: 55%;}
}
@media only screen and (min-width: 768px) and (max-width: 1100px) {
  #contentsWrap {font-size: 1.5vw;}
}
@media only screen and (min-width: 768px) {}
@media only screen and (max-width: 767px) {
  #Main .block .container .img h3 {font-size: 100%;}
  #Main .block .container .item ul li {width: calc(50% - 1em) !important;}
  #Main .block .container .item ul li > p:nth-of-type(1) {font-size: 112.5%;white-space: nowrap;}
  #Main .block .container .item ul li > p:nth-of-type(2) {font-size: 100%;}
  #Main #kitchen .item ul li.feature01{padding-bottom: 12em !important;}
  #Main #kitchen .item ul li.feature01 p:nth-child(2) {max-width: 100%;}
  #Main #kitchen .item ul li.feature01::after {width: 80%;height: 9em;margin: 0 auto;left: 0;right: 0;}
  #Main #powderroom .item,
  #Main #powderroom .img {width: 100%;}
  #Main #toilet .item,
  #Main #toilet .img {width: 100%;}
  #Main #toilet .item ul li {padding-right: 0;width: 100% !important;}
  #Main #toilet .item ul li > p:nth-of-type(1) br {display: none;}
  #Main #toilet .item ul li div {width: 100%;margin: 2em auto 0;position: static;}
  #Main #toilet .item ul li div figure {width: 80%;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}