@charset "utf-8";

.kitchen {
  margin-top: 150px;
}
.anchor {
  padding-top: 100px;
  background: var(--color-gradient);
}
.anchor__list {
  gap: 0 1px;
  background: #fff;
}
.anchor__list__item {
  flex: 1;
}
a.anchor__list__item-link {
  height: 100%;
  min-height: calc(60 / 18 * 1em);
  color: #666;
  font-size: clamp(13px, calc(18 / 1200 * 100vw), 18px);
}
.anchor__list__item-link--kitchen {
  background: rgba(var(--color-green), .3);
}
.anchor__list__item-link--bath {
  /* background: #BED1C7; */

  background: #BACBD7;
}
.anchor__list__item-link--powder {
  /* background: #BDD1CA; */

  background: #BAC9D5;
}
.anchor__list__item-link--toilet {
  /* background: #BBD1CC; */

  background: #BAC6D2;
}
.anchor__list__item-link--others {
  /* background: #BAD2CF; */

  background: #BAC3CF;
}
.anchor__list__item-link--structure {
  background: rgba(var(--color-bluegreen), .3);
}
#kitchen .anchor__list__item-link--kitchen {
  color: rgba(var(--color-green), 1);
  background: #fff;
}
#bath .anchor__list__item-link--bath {
  /* color: #286645; */
  background: #fff;

  color: #18537B;
}
#powder .anchor__list__item-link--powder {
  /* color: #23664E; */
  background: #fff;

  color: #184A72;
}
#toilet .anchor__list__item-link--toilet {
  /* color: #1D6756; */
  background: #fff;

  color: #184068;
}
#others .anchor__list__item-link--others {
  /* color: #18675F; */
  background: #fff;

  color: #18375F;
}
#structure .anchor__list__item-link--structure {
  color: rgba(var(--color-bluegreen), 1);
  background: #fff;
}
.section-en-heading {
  font-size: clamp(60px, calc(90 / 1200 * 100vw), 90px);
  letter-spacing: .03em;
  line-height: .65;
  margin-top: 100px;
}
.section-content-wrap {
  margin-top: 95px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 80px calc(80 / 1200 * 100%);
  padding-bottom: 200px;
}
.section-content {
  grid-template: "heading heading" auto "point-wrap point-wrap" auto "photo desc" 1fr / minmax(0, calc(180 / 560 * 100%)) minmax(0, calc(350 / 560 * 100%));
  justify-content: space-between;
  align-items: start;
}
.section-content-heading {
  grid-area: heading;
  font-size: clamp(14px, calc(22 / 1200 * 100vw), 22px);
  margin-bottom: 20px;
}
.section-content-heading::before {
  content: "";
  display: block;
  width: calc(15 / 22 * 1em);
  height: 1px;
  margin-right: calc(15 / 22 * 1em);
  background: currentColor;
}
.section-content-point-wrap {
  grid-area: point-wrap;
  gap: 9px 0;
  margin-bottom: 30px;
}
.section-content-point {
  gap: 5px 12px;
}
.section-content-point-category {
  width: calc(92 / 11 * 1em);
  height: calc(20 / 11 * 1em);
  place-items: center;
  font-size: 11px;
}
.section-content-point-category-s {
  /* background: #6AB368; */

  background: #687EB3;
}
.section-content-point-category-c {
  background: #3E9496;
}
.section-content-point-copy {
  flex: 1;
  align-self: center;
  font-size: clamp(12px, calc(16 / 1200 * 100vw), 16px);
  line-height: 1.625;
  margin-block: calc((1.625 - 1) / 2 * -1em);
}
.section-content-photo {
  grid-area: photo;
}
.section-content-photo .p-caption.r {
  color: #666;
  font-size: 10px;
  line-height: 2;
  margin-top: calc(20px - ((2 - 1) / 2 * 1em));
  margin-bottom: calc((2 - 1) / 2 * -1em);
}
.section-content-desc {
  grid-area: desc;
}
.section-content-copy {
  font-size: clamp(11px, calc(14 / 1200 * 100vw), 14px);
  line-height: 2;
  margin-block: calc((2 - 1) / 2 * -1em);
}
.section-content-copy em {
  font-size: calc(16 / 14 * 100%);
}
.section-content-caution {
  color: #666;
  font-size: 10px;
  line-height: 2;
  margin-top: calc(20px - ((2 - 1) / 2 * 1em));
  margin-bottom: calc((2 - 1) / 2 * -1em);
}
.section-content-catch {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(40 / 16 * 1em);
  margin-top: 20px;
  box-sizing: border-box;
  padding: .5em 1em;
  font-size: clamp(12px, calc(16 / 1200 * 100vw), 16px);
  background: #B69174;
}
.kitchen__en-heading {
  color: rgba(var(--color-green), .3);
}
.kitchen__content--4 .section-content-heading {
  grid-column: 2 / 3;
}
.kitchen__content--4 .section-content-point-wrap {
  grid-column: 2 / 3;
}
.kitchen__content--4 .section-content-photo {
  grid-row: 1 / 4;
}
.bath__en-heading {
  /* color: #BED1C7; */

  color: #BACBD7;
}
.bath__content--1 {
  grid-template-columns: minmax(0, calc(320 / 560 * 100%)) minmax(0, calc(210 / 560 * 100%));
}
.bath__content--9 {
  grid-row: 5 / 8;
  grid-template: "photo" auto / 100%;
}
.bath__content--10 .section-content-desc {
  grid-column: 1 / 3;
}
.powder__en-heading {
  /* color: #BDD1CA; */

  color: #BAC9D5;
}
.powder__content--5 {
  grid-column: 2 / 3;
  grid-row: 3 / 5;
  grid-template: "photo" auto / 100%;
}
.powder__content--7 {
  grid-column: 1 / 2;
}
.toilet__en-heading {
  /* color: #BBD1CC; */

  color: #BAC6D2;
}
.toilet__content--1 {
  grid-column: 1 / 3;
  grid-template-columns: minmax(0, calc(440 / 1200 * 100%)) minmax(0, calc(700 / 1200 * 100%));
}
.toilet__content--4 {
  margin-top: -80px;
}
.others__en-heading {
  /* color: #BAD2CF; */

  color: #BAC3CF;
}
.others__content--3 .section-content-desc {
  grid-column: 1 / 3;
}
.others__content--5 .section-content-photo {
  grid-column: 1 / 3;
  grid-row: 4 / 5;
  margin-top: 30px;
}
.structure__content--5 .section-content-photo .p-caption.r {
  margin-bottom: 0;
}
.others__content--5 .section-content-desc {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}
.others__content--7 {
  grid-template-columns: minmax(0, calc(335 / 560 * 100%)) minmax(0, calc(195 / 560 * 100%));
}
.others__content--7 .section-content-photo {
  grid-column: 2 / 3;
}
.others__content--7 .section-content-photo .p-caption + .p-caption {
  right: calc(105 / 195 * 100%);
}
.others__content--7 .section-content-desc {
  grid-column: 1 / 2;
}
.structure__en-heading {
  color: rgba(var(--color-bluegreen), .3);
}
.structure__content {
  grid-template-columns: minmax(0, calc(220 / 560 * 100%)) minmax(0, calc(310 / 560 * 100%));
}
.structure__content--1 .section-content-photo {
  grid-column: 1 / 3;
  grid-row: 4 / 5;
  margin-top: 30px;
}
.structure__content--1 .section-content-desc {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}
.structure__content--4 .section-content-desc {
  grid-column: 1 / 3;
}
.structure__content--5 {
  grid-row: 4 / 6;
}
.structure__content--5 .section-content-photo {
  grid-column: 1 / 3;
  grid-row: 4 / 5;
  margin-top: 30px;
}
.structure__content--5 .section-content-photo .p-caption + .p-caption {
  right: calc(255 / 560 * 100%);
}
.structure__content--5 .section-content-desc {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}
.structure__content--7 .section-content-desc {
  grid-column: 1 / 3;
}
.structure__content--8 {
  grid-column: 1 / 3;
  grid-template: "heading heading" auto "point-wrap point-wrap" auto "desc desc" auto ". ." 45px "group1 group2" auto / minmax(0, calc(560 / 1200 * 100%)) minmax(0, calc(560 / 1200 * 100%));
}
.structure__content--8 .section-content-group--1 {
  grid-area: group1;
  grid-template: "heading heading" auto "photo desc" auto / minmax(0, calc(336 / 560 * 100%)) minmax(0, calc(194 / 560 * 100%));
  justify-content: space-between;
  align-items: start;
}
.structure__content--8 .section-content-group--2 {
  grid-area: group2;
  grid-template: "heading heading" auto "photo desc" auto / minmax(0, calc(220 / 560 * 100%)) minmax(0, calc(310 / 560 * 100%));
  justify-content: space-between;
  align-items: start;
}
.structure__content--8 .section-content-group-heading {
  grid-area: heading;
  font-size: clamp(14px, calc(18 / 1200 * 100vw), 18px);
  margin-bottom: 20px;
}
.structure__content--8 .section-content-group-photo {
  grid-area: photo;
}
.structure__content--8 .section-content-group-desc {
  grid-area: desc;
}
.structure__content--8 .section-content-group-copy {
  font-size: clamp(11px, calc(14 / 1200 * 100vw), 14px);
  line-height: 2;
  margin-block: calc((2 - 1) / 2 * -1em);
}
.structure__content--8 .section-content-group--1 .section-content-group-copy {
  margin-block: 0;
  box-sizing: border-box;
  padding-left: 1em;
  text-indent: -1em;
}
@media (hover: hover){
  a.anchor__list__item-link {
    transition: color .4s, background .4s;
  }
  .anchor__list__item-link--kitchen:hover {
    color: rgba(var(--color-green), 1);
    background: #fff;
  }
  .anchor__list__item-link--bath:hover {
    /* color: #286645; */
    background: #fff;

    color: #18537B;
  }
  .anchor__list__item-link--powder:hover {
    /* color: #23664E; */
    background: #fff;

    color: #184A72;
  }
  .anchor__list__item-link--toilet:hover {
    /* color: #1D6756; */
    background: #fff;

    color: #184068;
  }
  .anchor__list__item-link--others:hover {
    /* color: #18675F; */
    background: #fff;

    color: #18375F;
  }
  .anchor__list__item-link--structure:hover {
    color: rgba(var(--color-bluegreen), 1);
    background: #fff;
  }
}
@media screen and (max-width: 619px){
  .kitchen {
    margin-top: 80px;
  }
  .anchor {
    padding-top: 50px;
  }
  .anchor__list {
    gap: 1px;
  }
  .anchor__list__item {
    flex: 0 1 calc((100% - 1px) / 2);
  }
  a.anchor__list__item-link {
    min-height: calc(50 / 14 * 1em);
    font-size: min(calc(14 / 375 * 100vw), 14px);
  }
  .section-en-heading {
    font-size: min(calc(40 / 375 * 100vw), 40px);
    margin-top: 50px;
  }
  .section-content-wrap {
    margin-top: 50px;
    grid-template-columns: 100%;
    gap: 60px 0;
    padding-bottom: 100px;
  }
  .section-content {
    grid-template: "heading" auto "point-wrap" auto "photo" auto "desc" auto / 100%;
  }
  .section-content-heading {
    font-size: min(calc(20 / 375 * 100vw), 20px);
    line-height: 1.5;
    margin-top: calc((1.5 - 1) / 2 * -1em);
    margin-bottom: calc(20px + ((1.5 - 1) / 2 * -1em));
  }
  .section-content-heading::before {
    width: calc(15 / 20 * 1em);
    margin-right: calc(10 / 20 * 1em);
    align-self: flex-start;
    margin-top: .7em;
  }
  .section-content-point-wrap {
    gap: 15px 0;
  }
  .section-content-point {
    gap: 0 10px;
  }
  .section-content-point-category {
    height: initial;
    min-height: calc(20 / 11 * 1em);
  }
  .section-content-point-copy {
    font-size: min(calc(12 / 375 * 100vw), 12px);
    line-height: 1.833333333;
    margin-block: calc((1.833333333 - 1) / 2 * -1em);
  }
  .section-content-desc {
    margin-top: 30px;
  }
  .section-content-copy {
    font-size: min(calc(14 / 375 * 100vw), 14px);
  }
  .section-content-catch {
    min-height: calc(30 / 12 * 1em);
    font-size: min(calc(12 / 375 * 100vw), 12px);
  }
  .kitchen__content--4 .section-content-heading {
    grid-column: 1 / 2;
  }
  .kitchen__content--4 .section-content-point-wrap {
    grid-column: 1 / 2;
  }
  .kitchen__content--4 .section-content-photo {
    grid-row: 3 / 4;
  }
  .bath__content--1 {
    grid-template-columns: 100%;
  }
  .bath__content--9 {
    grid-row: 11 / 12;
  }
  .bath__content--10 .section-content-desc {
    grid-column: 1 / 2;
    margin-top: 0;
  }
  .powder__content--5 {
    grid-column: 1 / 2;
    grid-row: 7 / 8;
  }
  .toilet__content--1 {
    grid-column: 1 / 2;
    grid-template-columns: 100%;
  }
  .toilet__content--4 {
    margin-top: 0;
  }
  .others__content--3 .section-content-desc {
    grid-column: 1 / 2;
    margin-top: 0;
  }
  .others__content--5 .section-content-photo {
    grid-column: 1 / 2;
    margin-top: 30px;
  }
  .others__content--5 .section-content-photo .photo {
    width: calc(560 / 375 * 100vw);
  }
  .others__content--5 .section-content-desc {
    grid-column: 1 / 2;
    margin-top: 0;
  }
  .others__content--7 {
    grid-template-columns: 100%;
  }
  .others__content--7 .section-content-photo {
    grid-column: 1 / 2;
  }
  .structure__content {
    grid-template-columns: 100%;
  }
  .structure__content--1 .section-content-photo {
    grid-column: 1 / 2;
  }
  .structure__content--1 .section-content-photo .photo {
    width: calc(560 / 375 * 100vw);
  }
  .structure__content--1 .section-content-desc {
    grid-column: 1 / 2;
    margin-top: 0;
  }
  .structure__content--4 .section-content-desc {
    grid-column: 1 / 2;
    margin-top: 0;
  }
  .structure__content--5 {
    grid-row: 6 / 7;
  }
  .structure__content--5 .section-content-photo {
    grid-column: 1 / 2;
  }
  .structure__content--5 .section-content-photo .photo {
    width: calc(680 / 375 * 100vw);
  }
  .structure__content--5 .section-content-photo .p-caption.r {
    position: sticky;
    left: 0;
  }
  .structure__content--5 .section-content-desc {
    grid-column: 1 / 2;
    margin-top: 0;
  }
  .structure__content--7 .section-content-desc {
    grid-column: 1 / 2;
    margin-top: 0;
  }
  .structure__content--8 {
    grid-column: 1 / 2;
    grid-template: "heading" auto "point-wrap" auto "desc" auto "." 40px "group1" auto "." 40px "group2" auto / 100%;
  }
  .structure__content--8 .section-content-desc {
    margin-top: 0;
  }
  .structure__content--8 .section-content-group--1 {
    grid-template: "heading" auto "photo" auto "desc" auto / 100%;
  }
  .structure__content--8 .section-content-group--2 {
    grid-template: "heading" auto "photo" auto "desc" auto / 100%;
  }
  .structure__content--8 .section-content-group-heading {
    font-size: min(calc(18 / 375 * 100vw), 18px);
  }
  .structure__content--8 .section-content-group-desc {
    margin-top: 30px;
  }
  .structure__content--8 .section-content-group--1 .section-content-group-desc {
    margin-top: 20px;
  }
  .structure__content--8 .section-content-group-copy {
    font-size: min(calc(14 / 375 * 100vw), 14px);
  }
}