@charset "UTF-8";

.bg01 {
  background-image: url(../img/01/bg01.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0;
  overflow: hidden;
}

.attention {
  margin-top: 8px;
}

.attention li {
  width: 100% !important;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  text-indent: -1em;
  padding-left: 1em;
}

.attention li:nth-of-type(n+2) {
  margin-top: 5px !important;
}

.pagettl_area {
  padding: 160px 0 80px 0;
}

.equip_box {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

.equip_box::before,
.equip_box::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
}

.equip_box::before {
  width: 24%;
}

.equip_box::after {
  width: 72%;
  height: 15%;
}


/* キッチン */
.equip_box.kitchen::before,
.equip_box.kitchen::after {
  /* background: #d6f2e4; */
  background: rgba(214, 242, 228, 0.5);
}

.equip_box.kitchen::before {
  height: 86%;
  bottom: 20%;
  right: 45%;
}

.equip_box.kitchen::after {
  bottom: 20%;
  right: 0;
}

/* バスルーム */
.equip_box.bathroom {
  margin: 100px auto 0;
}

.equip_box.bathroom::before,
.equip_box.bathroom::after {
  /* background: #fce9e1; */
  background: rgba(252, 233, 225, 0.5);
}

.equip_box.bathroom::before {
  width: 25%;
  height: 86%;
  bottom: 20%;
  right: 5%;
}

.equip_box.bathroom::after {
  width: 75%;
  height: 33%;
  bottom: 20%;
  left: 0;
}

.equip_box.bathroom .equip_item.middle_image {
  width: 63.2%;
}



/* パウダールーム */
.equip_box.powderroom {
  margin: 100px auto 0;
}

.equip_box.powderroom::before,
.equip_box.powderroom::after {
  /* background: #edd6ea; */
  background: rgba(237, 214, 234, 0.5);
}

.equip_box.powderroom::before {
  width: 26%;
  height: 110%;
  top: -6%;
  left: 6%;
}

.equip_box.powderroom::after {
  height: 7%;
  width: 17%;
  top: 21.2%;
  right: 0;
}

.equip_box.powderroom .bg-vertical {
  width: 77%;
  height: 27%;
  /* background: #edd6ea; */
    background: rgba(237, 214, 234, 0.5);
  position: absolute;
  top: -6%;
  left: 6%;
  bottom: 5%;
  z-index: 0;
}



/* トイレ */
.equip_box.toilet {
  margin: 100px auto 0;
}

.equip_box.toilet::before,
.equip_box.toilet::after {
  /* background: #d8e8f7; */
  background: rgba(216, 232, 247, 0.5);
}

.equip_box.toilet::before {
  width: 25%;
  height: 119%;
  bottom: -13%;
  right: 7%;
}

.equip_box.toilet::after {
  height: 25%;
  top: 6%;
  left: 6%;
}

/* 共通設備 */
.equip_box.common-item::before {
  position: absolute;
  background: #efefef;
}

.equip_box.common-item::before {
  width: 37%;
  height: 31%;
  top: 0%;
  left: 0;
  z-index: 0;
}

/* スタンダート設備 */
.equip_box.standart-item::before,
.equip_box.standart-item::after {
  position: absolute;
  background: #efefef;
  z-index: 0;
}

.equip_box.standart-item::before {
  width: 74%;
  height: 21%;
  top: 40%;
  left: 0;
}

.equip_box.standart-item::after {
  width: 26%;
  height: 5%;
  bottom: 0%;
  right: 0;
}

.equip_box.standart-item .bg-vertical {
  position: absolute;
  width: 16%;
  height: 100%;
  right: 26%;
  bottom: 5%;
  background: #efefef;
  z-index: 0;
}


.equip_box .inner {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.equip_box .item_ttl {
  border-bottom: none;
  padding-bottom: 0;
}

.equip_box .item_ttl.bb {
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
}

.equip_flex {
  flex-wrap: wrap;
}

.equip_flex .main {
  width: 56%;
  padding-right: 20px;
  position: relative;
}

.equip_flex .conttl {
  width: 38%;
  position: absolute;
  top: -4.5%;
}

/* コンテンツ別 */
.kitchen .equip_flex .conttl {
  right: 5%;
}

.bathroom .equip_flex .conttl {
  right: 7%;
}

.powderroom .equip_flex .conttl {
  left: 0;
}

.toilet .equip_flex .conttl {
  right: 8%;
}

.equip_flex .sub {
  width: 44%;
}

.equip_flex .sub.pl {
  padding-left: 20px;
}

.equip_flex .sub.pr {
  padding-right: 20px;
}

.equip_item.flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2%;
}

.equip_item.flex div{
  width: 46%;
}

.equip_item {
  margin-top: 30px;
}

.equip_item:first-of-type {
  margin-top: 0;
}

.equip_item.small_image {
  width: 45%;
}

.equip_item.middle_image {
  width: 70%;
}

.equip_item.mr {
  margin: 30px 0 0 auto;
}

.equip_item.mt0 {
  margin-top: 0;
}

.equip-mainsub {
  gap: 4%;
  width: 80%;
  margin: 20px 0 0 auto;
}

.equip-mainsub.reverse {
  margin: 20px auto 0 0;
}

.equip-mainsub div {
  width: 48%;
}

.space {
  padding-top: 35%;
}

.common-item .item_ttl,
.standart-item .item_ttl,
.service-item .item_ttl {
  color: #000;
}

.common-flex {
  flex-wrap: wrap;
  gap: 4%;
}

.common-flex li {
  width: 48%;
}

.common-flex02 {
  flex-wrap: wrap;
  gap: 4%;
  margin-top: 60px;
}

.common-flex02 li:nth-of-type(1) {
  width: 30%;
}

.common-flex02 li:nth-of-type(2) {
  width: 66%;
}

.pabbit_ttl {
  gap: 4%;
  margin: 10px 0 20px 0;
}

.pabbit_ttl p {
  width: 66%;
  margin-top: 0;
}

.pabbit_ttl figure {
  width: 30%;
}

.monocompo_flex {
  gap: 2%;
}

.monocompo_flex div:nth-of-type(1) {
  width: 62%;
}

.monocompo_flex div:nth-of-type(2) {
  width: 32%;
}

.monocompo_flex figure {
  margin-top: 15px;
}

.text-wrap {
  display: flow-root;
}

.text-wrap__image-right {
  float: right;
  width: 27%;
  margin: 3.4em 0 5px 10px;
}

.text-wrap__image-right img {
  display: block;
  width: 100%;
  height: auto;
}

.text-wrap .item_txt {
  margin: 10px 0 0 0;
}

.text-wrap__image-left {
  margin: 5px 0 0;
}

.text-wrap__image-left img {
  width: 100%;
  height: auto;
}

.text-wrap__image-left figcaption {
  margin-top: 2px;
  font-size: 8px;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.iot_flex {
  gap: 4%;
  margin-top: 20px;
}

.iot_flex div:nth-of-type(1) {
  width: 36%;
}

.iot_flex div:nth-of-type(2) {
  width: 60%;
}

.iot_flex div:nth-of-type(2).flex {
  gap: 4%;
}

.iot_flex div:nth-of-type(2).flex div {
  width: 48%;
}

.iot_flex div:nth-of-type(2).flex div figure {
  margin-bottom: 10px;
}

.iot-ttl {
  font-size: 16px;
  color: #00ab9c;
  border-bottom: 1px solid #00ab9c;
  padding-bottom: 8px;
}

.equipment_all {
  position: relative;
}

.equipment_all::before,
.equipment_all::after {
  content: "";
  position: absolute;
  background: #efefef;
}

.equipment_all::before {
  width: 23%;
  height: 87%;
  top: -1%;
  right: 44%;
  z-index: 0;
}

.equipment_all::after {
  width: 39%;
  height: 3%;
  top: -1%;
  right: 0;
  z-index: 0;
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 35px;
  row-gap: 40px;
  align-items: start;
  width: 90%;
  max-width: 1100px;
  margin: 60px auto 0;
  position: relative;
  z-index: 10;
}

.equipment-grid .equipment-item {
  min-width: 0;
  margin: 0;
}

.equipment-grid .equipment-item figure {
  position: relative;
  margin: 0;
}

.equipment-grid .equipment-item img {
  display: block;
  width: 100%;
  height: auto;
}

.equipment-grid .item01 {
  grid-column: 1;
  grid-row: 1;
}

.equipment-grid .item02 {
  grid-column: 2;
  grid-row: 1;
}

.equipment-grid .item03 {
  grid-column: 3;
  grid-row: 1;
}

.equipment-grid .item03-2{
  grid-column: 4;
  grid-row: 1;
}

.equipment-grid .item04 {
  grid-column: 2;
  grid-row: 2;
}

.equipment-grid .item05 {
  grid-column: 3;
  grid-row: 2;
}

.equipment-grid .item06 {
  grid-column: 4;
  grid-row: 2;
  margin-left: -25px;
}

.equipment-grid .item07 {
  grid-column: 1 / span 2;
  grid-row: 3 / span 2;
  margin-top: -8px;
}

.equipment-grid .item08 {
  grid-column: 3;
  grid-row: 3;
  margin-top: -8px;
}

.equipment-grid .item09 {
  grid-column: 4;
  grid-row: 3;
  margin-top: -8px;
}

.equipment-grid .item10 {
  grid-column: 3;
  grid-row: 4;
  margin-top: 0;
}


.feature-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.78fr 1.15fr 1.15fr;
  grid-template-rows: auto auto auto;
  gap: 35px 40px;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}


.feature-grid .feature-item {
  margin: 0;
  position: relative;
  z-index: 10;
}

.feature-grid .feature-item img {
  display: block;
  width: 100%;
  height: auto;
}

.feature-grid .feature-item figcaption {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
}

.feature-grid .item01 {
  grid-column: 1;
  grid-row: 1;
}

.feature-grid .item02 {
  grid-column: 2;
  grid-row: 1;
}

.feature-grid .item03 {
  grid-column: 3;
  grid-row: 1;
}

.feature-grid .item04 {
  grid-column: 2;
  grid-row: 2;
  width: 147.4%;
  justify-self: end;
}

.feature-grid .item05 {
  grid-column: 3;
  grid-row: 2;
}

.feature-grid .item06 {
  grid-column: 4;
  grid-row: 2;
}

.feature-grid .item07 {
  grid-column: 1 / span 2;
  grid-row: 3;
  width: 82%;
  justify-self: end;
}

.feature-grid .item08 {
  grid-column: 3;
  grid-row: 3;
  width: 100%;
}

.feature-grid .item09 {
  grid-column: 4;
  grid-row: 3;
  width: 100%;
}

.equip_box.service-item {
  margin: 100px auto 0;
}

.tapho-wrap {
  gap: 4%;
  align-items: center;
}

.tapho-wrap p {
  width: 66%;
}

.tapho-wrap figure {
  width: 30%;
}








.service_flex {
  gap: 4%;
}

.service_flex li:nth-of-type(1) {
  width: 62%;
}

.service_flex li:nth-of-type(2) {
  width: 34%;
}

.cyber_flex {
  gap: 4%;
  align-items: center;
}

.cyber_flex .text {
  width: 70%;
}

.cyber_flex figure {
  width: 26%;
}

.skper_flex {
  gap: 4%;
}

.skper_flex .attention {
  width: 36%;
}

.skper_flex figure {
  width: 60%;
}

.service_flex02 {
  gap: 4%;
}

.service_flex02 li {
  width: 48%;
}

.item_ttl.blue {
  font-size: 16px;
  color: #ffff;
  background: #00273c;
  text-align: center;
  padding: 5px 0;
}

.service04 {
  margin-top: 10px;
}

/*---------------------------
tab
---------------------------*/
@media only screen and (max-width: 1180px) {

  .equip_box.powderroom .bg-vertical,
  .equip_box.powderroom::before {
    left: 3%;
  }

  .equip_box.toilet::before {
    right: 5%;
  }

}

@media only screen and (max-width: 1024px) {}

/*---------------------------
sp
---------------------------*/
@media only screen and (max-width: 768px) {

  .pagettl_area {
    padding: 60px 0 30px 0;
  }

  .bg01 {
    padding: 50px 0;
  }

  .equip_box::before {
    width: 55%;
  }

  .equip_box::after {
    height: 20%;
  }

  .equip_flex .conttl {
    top: -35px;
  }

  /* キッチン */
  .equip_box.kitchen::before {
    height: 30%;
    right: 0;
    top: -11%;
  }

  .equip_box.kitchen::after {
    left: 0;
  }

  .kitchen .equip_flex .conttl {
    right: 0;
    left: initial;
  }

  /* バスルーム */
  .equip_box.bathroom::before {
    width: 65%;
    height: 36%;
    top: -2.5%;
    left: 0;
  }

  .equip_box.bathroom::after {
    width: 22%;
    left: initial;
    right: 0;
  }

  .bathroom .equip_flex .conttl {
    /* top: -4.5%; */
    right: 0;
    left: 0;
  }

  /* パウダールーム */
  .equip_box.powderroom::before {
    width: 74%;
    height: 90%;
    top: -3%;
    left: initial;
    right: 0;
  }

  .equip_box.powderroom::after {
    content: none;
  }

  .equip_box.powderroom .bg-vertical {
    display: none;
  }

  .equip_box.powderroom .equip_flex::before {
    content: none;
  }

  .powderroom .equip_flex .conttl {
    right: 0;
    left: initial;
    /* top: -7.5%; */
  }

  /* トイレ */
  .equip_box.toilet::before {
    width: 65%;
    right: initial;
    left: 0;
  }

  .toilet .equip_flex .conttl {
    right: initial;
    left: 0;
  }

  /* 共通設備 */
  .equip_box.common-item::before {
    width: 34%;
    height: 8.5%;
  }

  .equipment_all::before {
    content: none;
  }

  .equipment_all::after {
    top: 3%;
    width: 41%;
    height: 33%;
  }

  .equip_box.standart-item .bg-vertical {
    display: none;
  }




  .equip_box.standart-item::after {
    width: 40%;
    height: 32%;
  }

  .equip_box.reverse .main {
    order: 1;
  }

  .equip_box.reverse .sub {
    order: 2;
  }

  .equip_flex .conttl {
    width: 170px;
  }

  .equip_flex .main {
    width: 100%;
    padding: 0;
  }

  .equip_flex .sub.pl {
    width: 100%;
    padding: 0;
    margin-top: 30px;
  }

  .equip-mainsub {
    width: 100%;
  }

  .equip-mainsub div {
    width: 100%;
  }

  .equip-mainsub div:nth-of-type(n+2) {
    margin-top: 40px;
  }

  .equip_item.small_image {
    width: 100%;
    margin-top: 30px;
  }

  .equip_item.middle_image {
    width: 100%;
    margin-top: 30px;
  }

  .equip_box.bathroom .equip_item.middle_image {
  width: 100%;
}

  .equip_item.flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 30px;
}

.equip_item.flex div{
  width: 100%;
}

  .equip_flex .sub.pr {
    width: 100%;
  }

  .equip_flex .sub {
    width: 100%;
  }

  .space {
    padding: 0;
  }

  .common-flex li {
    width: 100%;
  }

  .common-flex li:nth-of-type(2) {
    margin-top: 30px;
  }

  .common-flex02 {
    margin-top: 30px;
  }

  .common-flex02 li:nth-of-type(1) {
    width: 100%;
  }

  .common-flex02 li:nth-of-type(2) {
    width: 100%;
    margin-top: 30px;
  }

  .iot_flex div:nth-of-type(1) {
    /* width: 70%; */
    width: 90%;
    margin: 0 auto 0;
  }

  .iot_flex div:nth-of-type(2) {
    width: 100%;
  }

  .equipment-grid {
    display: block;
  }

  .equipment-item:nth-of-type(n+2) {
    margin-top: 30px;
  }

  .equipment-grid .item06 {
    margin: 30px 0 0 0;
  }

  .feature-grid {
    width: 90%;
    display: block;
    margin: 0 auto;
  }

  .feature-item:nth-of-type(n+2) {
    margin-top: 30px;
  }

  .feature-grid .item02 {
    width: 70%;
    margin: 30px auto 0;
  }

  .feature-grid .item04 {
    width: 100%;
  }

  .feature-grid .item07 {
    width: 100%;
  }

  .equip_box.service-item {
    margin: 50px auto 0;
  }

  .service_flex li:nth-of-type(1) {
    width: 100%;
  }

  .service_flex li:nth-of-type(2) {
    width: 100%;
    margin-top: 30px;
  }

  .cyber_flex .text {
    width: 100%;
  }

  .cyber_flex figure {
    width: 60%;
    margin: 10px auto 0;
  }

  .service_flex02 li {
    width: 100%;
  }

  .service_flex02 li:nth-of-type(n+2) {
    margin-top: 30px;
  }


  .tapho-wrap p {
    width: 100%;
  }

  .tapho-wrap figure {
    width: 70%;
    margin: 10px auto 0;
  }

  
}