@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');

/* ----------------------------------------------------
手洗い台
-----------------------------------------------------*/

/* 全体 */
.washroom-point {
  display: grid;
  grid-template-columns: 44% 56%;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  align-items: stretch;
  box-sizing: border-box;
}

/* 左側：施工写真 */
.washroom-point__photo {
  min-width: 0;
  overflow: hidden;
}

.washroom-point__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 右側：テキストエリア */
.washroom-point__content {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 0 0 40px;
  box-sizing: border-box;
}

/* 見出し */
.washroom-point__title {
  margin: 0;
  padding: 12px 20px;
  background: #5e6b70;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  box-sizing: border-box;
}

/* 説明文 */
.washroom-point__text {
  margin: 36px 0 0;
  padding: 0 0 0 2px;
  color: #444;
  font-size: 14px;
  line-height: 1.9;
}

/* イラスト */
.washroom-point__illustration {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex: 1;
  min-height: 0;
  padding-right: 20px;
}

.washroom-point__illustration img {
  display: block;
  width: 220px;
  max-width: 65%;
  height: auto;
  object-fit: contain;
  object-position: right bottom;
}


/* 全体 */
.washroom-colors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 各グループ */
.washroom-colors__group {
  min-width: 0;
}

/* 各コンテンツ */
.washroom-colors__item {
  margin: 0 0 80px;
}

.green-title {
  margin: 0 0 24px;
  color: #176b16;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
}

.washroom-colors__item h3 {
  margin: 0 0 24px;
  color: #176b16;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
}
.washroom-colors__item p {
  margin: 0 0 28px;
  color: #484848;
  font-size: 14px;
  line-height: 1.4;
}

/* 画像 */
.washroom-colors__image {
  width: 100%;
}

.washroom-colors__image img {
  display: block;
  width: 100%;
  height: auto;
}

.washroom-colors__image02 {
  width: 338px;
}

.washroom-colors__image02 img {
  display: block;
  width: 100%;
  height: auto;
}

.washroom-colors__image03 {
  width: 75%;
    text-align:center;
}

.washroom-colors__image03 img {
  display: block;
  width: 100%;
  height: auto;
}

/* 色名 */
.washroom-colors__item p.washroom-colors__caption {
  margin: 10px 0 0;
  color: #333;
  font-size: 13px;
}

/* スマートフォン */
@media screen and (max-width: 767px) {
  .washroom-colors {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .washroom-colors__group--left {
    order: 1;
  }

  .washroom-colors__group--right {
    order: 2;
  }

  .washroom-colors__item {
    margin-bottom: 32px;
  }

  .washroom-colors__item h3 {
    margin-bottom: 16px;
    font-size: 18px;
  }

  .washroom-colors__item p {
    margin-bottom: 20px;
    font-size: 15px;
  }
}


/* 掃除道具収納の説明パーツ */
.washroom-colors__cleaning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* 左側の文章 */
.washroom-colors__cleaning-text {
  flex: 1;
  min-width: 0;
}

.washroom-colors__cleaning-text h3 {
  margin: 0 0 30 0;
  color: #176b16;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
}

.washroom-colors__cleaning-text p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.4;
  color: #555;
}

.washroom-colors__cleaning-text p:last-child {
  margin-bottom: 0;
}

/* 注記 */
.washroom-colors__cleaning-text .washroom-colors__cleaning-note {
  margin-top: 18px;
font-size: 12px;
    padding-left: 1em;
    text-indent: -1em;
}

/* 右側のイラスト */
.washroom-colors__cleaning-image {
  flex: 0 0 34%;
  min-width: 0;
}

.washroom-colors__cleaning-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* スマートフォン */
@media screen and (max-width: 767px) {
  .washroom-colors__cleaning {
    gap: 8px;
  }

  .washroom-colors__cleaning-text p {
    font-size: 14px;
    line-height: 1.8;
  }

  .washroom-colors__cleaning-image {
    flex-basis: 32%;
  }
}


.washroom-detail {
  width: 100%;
  box-sizing: border-box;
}

/* 2カラム */
.washroom-detail__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.washroom-detail__feature {
  min-width: 0;
}

.washroom-detail__feature h3,
.washroom-detail__holders h3 {
  margin: 0 0 12px;
  color: #222;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
}

.washroom-detail__image img {
  display: block;
  width: 100%;
  height: auto;
}

.washroom-detail__feature p {
  margin: 14px 0 0;
  color: #555;
  font-size: 14px;
  line-height: 1.4;
}

/* 下段 */
.washroom-detail__holders {
  margin-top: 52px;
}

.washroom-detail__holders h3 {
  margin-bottom: 12px;
}

/* ペーパーホルダー3点 */
.washroom-detail__holder-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.washroom-detail__holder {
  min-width: 0;
}

.washroom-detail__holder img {
  display: block;
  width: 100%;
  height: auto;
}

.washroom-detail__holder p {
  margin: 6px 0 0;
  color: #222;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

/* スマートフォン */
@media screen and (max-width: 767px) {
  .washroom-detail__features {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .washroom-detail__feature h3,
  .washroom-detail__holders h3 {
    font-size: 15px;
  }

  .washroom-detail__feature p {
    font-size: 14px;
  }

  .washroom-detail__holders {
    margin-top: 36px;
  }

  .washroom-detail__holder-list {
    gap: 6px;
  }

  .washroom-detail__holder p {
    font-size: 12px;
  }
}


.feature {
  max-width: 740px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
  container-type: inline-size; /* 幅に合わせて文字サイズを比例縮小 */
}

/* PC・スマホ共通：2カラム固定（写真：図 ≒ 65：35） */
.feature__grid {
  display: grid;
  grid-template-columns: 65fr 35fr;
  column-gap: 4.5%;
  row-gap: 2.5cqw;
  align-items: start;
}

.feature__photo,
.feature__figure {
  margin: 0;
}

.feature__photo  { grid-column: 1; grid-row: 1; }
.feature__figure { grid-column: 2; grid-row: 1; }

.feature__grid img {
  display: block;
  width: 100%;
  height: auto;
}

/* 注釈：図の下（右カラム）に配置 */
.feature__caption {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* 2枚並び・注釈なしパターン（写真：写真 ≒ 68：32） */
.feature__grid--pair {
  grid-template-columns: 68fr 32fr;
  column-gap: 2.5%;
  align-items: stretch; /* 左右の高さを揃える */
}

.feature__grid--pair img {
  height: 100%;
  object-fit: cover; /* 縦横比が微妙に違っても高さを揃えてトリミング */
}