/* ========================================================================================= ^^
  Key visual for quality
============================================================================================ ^^ */
.c-key-visual {
  background: url(../images/quality/kv.jpg) no-repeat 50% 100%/cover;
}


/* ========================================================================================= ^^
  Quality panel
============================================================================================ ^^ */
#container .p-quality-panel.c-panel {
  width: 100vw;
  padding: calc(44 * var(--min-ratio)) 0 calc(40 * var(--min-ratio));
  margin: 0 calc(50% - 50vw);
  display: block;
}

#container .p-quality-panel.c-panel .c-inner {
  padding: 0 calc(20 * var(--min-ratio));
}

@media (min-width: 768px) {
  #container .p-quality-panel.c-panel {
    padding: calc(88 * var(--max-ratio)) 0 calc(80 * var(--max-ratio));
  }

  #container .p-quality-panel.c-panel .c-inner {
    padding: 0 calc(20 * var(--max-ratio));
  }
}

@media (min-width: 1300px) {
  #container .p-quality-panel.c-panel {
    padding: calc(88 * var(--rem-ratio)) 0 calc(80 * var(--rem-ratio));
  }

  #container .p-quality-panel.c-panel .c-inner {
    padding: 0;
  }
}

/* ========================================================================================= ^^
  Tab menu
============================================================================================ ^^ */
#container .c-tab-menu.p-quality-tab-menu.c-tab-menu--border .c-tab-menu__item {
  border: 1px solid #685e59;
}

#container .c-tab-menu.p-quality-tab-menu {
  margin-bottom: calc(30 * var(--min-ratio));
}

@media not all and (min-width: 768px) {
  #container .c-tab-menu__link .en {
    font-size: clamp(0.688rem, 0.535rem + 0.65vw, 1.063rem);
  }
}

@media (min-width: 768px) {
  #container .c-tab-menu.p-quality-tab-menu {
    margin-bottom: calc(65 * var(--max-ratio));
    grid-template-columns: repeat(3, calc((350 / 1120) * 100%));
    column-gap: calc((35 / 1120) * 100%);
    row-gap: calc(25 * var(--max-ratio));
  }
}

@media (min-width: 1300px) {
  #container .c-tab-menu.p-quality-tab-menu {
    margin-bottom: calc(65 * var(--rem-ratio));
    row-gap: calc(25 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  Section title
============================================================================================ ^^ */
#container .c-section-title {
  margin: 0 0 calc(33 * var(--min-ratio));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: calc(8 * var(--min-ratio));
}

#container .c-section-title .jpn {
  margin: 0 auto;
  font-family: var(--font-shippori);
  font-size: clamp(0.875rem, 0.774rem + 0.43vw, 1.125rem);
  color: #685e59;
  line-height: calc(27 / 18);
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.06em;
  position: static;
}

#container .c-section-title .en {
  display: block;
}

@media (min-width: 768px) {
  #container .c-section-title {
    margin-bottom: calc(66 * var(--max-ratio));
    row-gap: calc(17 * var(--max-ratio));
  }
}

@media (min-width: 1300px) {
  #container .c-section-title {
    margin-bottom: calc(66 * var(--rem-ratio));
    row-gap: calc(17 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  Grid
============================================================================================ ^^ */
.c-grid {
  max-width: calc(1120 * var(--rem-ratio));
  width: 100%;
  margin: 0 auto;
  row-gap: calc(35 * var(--min-ratio));
}

/* ========================================================================================= ^^
  Quality box
============================================================================================ ^^ */
#container .c-quality-box__image {
  margin-bottom: calc(13 * var(--min-ratio));
  display: block;
}

#container .c-quality-box__caption {
  /* font-size: clamp(0.813rem, 0.787rem + 0.11vw, 0.875rem); */
  font-size: clamp(0.625rem, 0.524rem + 0.43vw, 0.875rem);
  color: #231815;
  font-weight: 400;
  line-height: calc(20.8 / 14);
  letter-spacing: 0.166em;
}

#container .c-quality-box__caption h3 {
  min-height: calc(36 * var(--min-ratio));
  height: calc(calc(14 * var(--min-ratio)) * calc(27 / 18) * 2);
  padding-left: calc(10 * var(--min-ratio));
  margin-bottom: calc(6 * var(--min-ratio));
  border-left: 4px solid #685e59;
  font-family: var(--font-shippori);
  font-size: clamp(0.875rem, 0.774rem + 0.43vw, 1.125rem);
  color: #685e59;
  font-weight: 500;
  line-height: calc(27 / 18);
  letter-spacing: 0.06em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#container .c-quality-box__caption p {
  margin: 0;
}

#container .c-quality-box__caption .small {
  font-size: clamp(0.5rem, 0.399rem + 0.43vw, 0.75rem);
}

@media (min-width: 768px) {
  #container .c-quality-box__image {
    margin-bottom: calc(27 * var(--max-ratio));
  }

  #container .c-quality-box__caption h3 {
    min-height: calc(36 * var(--max-ratio));
    height: auto;
    padding-left: calc(16 * var(--max-ratio));
    margin-bottom: calc(12 * var(--max-ratio));
  }
}

@media (min-width: 1300px) {
  #container .c-quality-box__image {
    margin-bottom: calc(27 * var(--rem-ratio));
  }

  #container .c-quality-box__caption h3 {
    min-height: calc(36 * var(--rem-ratio));
    padding-left: calc(16 * var(--rem-ratio));
    margin-bottom: calc(12 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  Kitchen
============================================================================================ ^^ */
#container #kitchen .c-section-title .en {
  width: calc(89 * var(--min-ratio));
}

#container #kitchen .c-grid {
  grid-template-columns: repeat(2, 49%);
  column-gap: 2%;
  row-gap: calc(25 * var(--min-ratio));
}

#container #kitchen .c-quality-box__caption {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.9), 0 0 10px rgba(255, 255, 255, 0.9);
}

#container .kitchen01 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

@media (min-width: 768px) {
  #container #kitchen .c-section-title .en {
    width: calc(237 * var(--max-ratio));
  }

  #container #kitchen .c-grid {
    grid-template-columns: calc((350 / 1120) * 100%) calc((340 / 1120) * 100%) calc((340 / 1120) * 100%);
    column-gap: calc((45 / 1120) * 100%);
    row-gap: calc(39 * var(--max-ratio));
  }

  #container .kitchen01 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  #container .kitchen02 {
    margin-bottom: 0;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  #container .kitchen03 {
    margin-bottom: 0;
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  #container .kitchen04 {
    margin-bottom: calc(9 * var(--max-ratio));
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  #container .kitchen05 {
    margin-bottom: calc(9 * var(--max-ratio));
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }

  #container .kitchen02 .c-quality-box__image,
  #container .kitchen03 .c-quality-box__image,
  #container .kitchen04 .c-quality-box__image,
  #container .kitchen05 .c-quality-box__image {
    margin-bottom: calc(35 * var(--max-ratio));
  }

  #container .kitchen06 {
    width: calc((340 / 350) * 100%);
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  #container .kitchen07 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  #container .kitchen08 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
  }

  #container .kitchen09 {
    width: calc((340 / 350) * 100%);
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }

  #container .kitchen10 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }
}

@media (min-width: 1300px) {
  #container #kitchen .c-section-title .en {
    width: calc(237 * var(--rem-ratio));
  }

  #container #kitchen .c-grid {
    row-gap: calc(39 * var(--rem-ratio));
  }

  #container .kitchen04 {
    margin-bottom: calc(9 * var(--rem-ratio));
  }

  #container .kitchen05 {
    margin-bottom: calc(9 * var(--rem-ratio));
  }

  #container .kitchen02 .c-quality-box__image,
  #container .kitchen03 .c-quality-box__image,
  #container .kitchen04 .c-quality-box__image,
  #container .kitchen05 .c-quality-box__image {
    margin-bottom: calc(35 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  Powder room
============================================================================================ ^^ */
#container #powder-room {
  background-color: #fff;
}

#container #powder-room .c-section-title .en {
  width: calc(167 * var(--min-ratio));
}

#container #powder-room .c-grid {
  grid-template-columns: repeat(2, 49%);
  column-gap: 2%;
  row-gap: calc(25 * var(--min-ratio));
}

#container .powder-room01 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

#container .powder-room06 {
  grid-column: 1 / 3;
}

@media (min-width: 768px) {
  #container #powder-room .c-section-title .en {
    width: calc(444 * var(--max-ratio));
  }

  #container #powder-room .c-grid {
    grid-template-columns: calc((350 / 1120) * 100%) calc((340 / 1120) * 100%) calc((340 / 1120) * 100%);
    column-gap: calc((45 / 1120) * 100%);
    row-gap: 0;
  }

  #container .powder-room01 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  #container .powder-room02 {
    margin-bottom: calc(47 * var(--max-ratio));
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  #container .powder-room03 {
    margin-bottom: calc(47 * var(--max-ratio));
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  #container .powder-room04 {
    margin-bottom: calc(36 * var(--max-ratio));
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  #container .powder-room05 {
    margin-bottom: calc(36 * var(--max-ratio));
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }

  #container .powder-room06 {
    grid-column: 1 / 2;
    grid-row: 3 / 5;
  }

  #container .powder-room07 {
    margin-bottom: calc(10 * var(--max-ratio));
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  #container .powder-room08 {
    margin-bottom: calc(10 * var(--max-ratio));
    grid-column: 3 / 4;
    grid-row: 3 / 4;
  }

  #container .powder-room09 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }
}

@media (min-width: 1300px) {
  #container #powder-room .c-section-title .en {
    width: calc(444 * var(--rem-ratio));
  }

  #container .powder-room02,
  #container .powder-room03 {
    margin-bottom: calc(47 * var(--rem-ratio));
  }

  #container .powder-room04,
  #container .powder-room05 {
    margin-bottom: calc(36 * var(--rem-ratio));
  }

  #container .powder-room07,
  #container .powder-room08 {
    ,
    margin-bottom: calc(10 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  Bathroom
============================================================================================ ^^ */
#container #bathroom {
  background: linear-gradient(90deg, rgba(217, 215, 204, 1) 0%, rgba(222, 220, 211, 1) 2.93%, rgba(231, 229, 222, 1) 10.96%, rgba(236, 234, 229, 1) 22.25%, rgba(237, 235, 231, 1) 53.62%, rgba(236, 233, 229, 1) 80.01%, rgba(231, 228, 222, 1) 89.52%, rgba(224, 219, 211, 1) 96.27%, rgba(217, 210, 200, 1) 100%);
}

#container #bathroom .c-section-title .en {
  width: calc(122 * var(--min-ratio));
}

#container #bathroom .c-grid {
  grid-template-columns: repeat(2, 49%);
  column-gap: 2%;
  row-gap: calc(25 * var(--min-ratio));
}

#container .bathroom01 {
  grid-column: 1 / 3;
}

@media (min-width: 768px) {
  #container #bathroom .c-section-title .en {
    width: calc(326 * var(--max-ratio));
  }

  #container #bathroom .c-grid {
    grid-template-columns: repeat(3, calc((350 / 1120) * 100%));
    column-gap: calc((35 / 1120) * 100%);
    row-gap: calc(42 * var(--max-ratio));
  }

  #container .bathroom01 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  #container .bathroom02 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  #container .bathroom03 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  #container .bathroom04 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  #container .bathroom05 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }

  #container .bathroom06 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  #container .bathroom07 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  #container .bathroom08 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
  }

  #container .bathroom09 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }

  #container .bathroom10 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }

  #container .bathroom11 {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
  }

  #container .bathroom12 {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
  }

  #container .bathroom13 {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
  }
}

@media (min-width: 1300px) {
  #container #bathroom .c-section-title .en {
    width: calc(326 * var(--rem-ratio));
  }

  #container #bathroom .c-grid {
    row-gap: calc(42 * var(--rem-ratio));
  }
}


/* ========================================================================================= ^^
  Toilet
============================================================================================ ^^ */
#container #toilet .c-section-title .en {
  width: calc(72 * var(--min-ratio));
}

@media (min-width: 768px) {
  #container #toilet .c-section-title .en {
    width: calc(191 * var(--max-ratio));
  }

  #container #toilet .c-grid {
    grid-template-columns: repeat(2, calc((534 / 1120) * 100%));
    column-gap: calc((52 / 1120) * 100%);
    row-gap: calc(76 * var(--max-ratio));
  }

  #container .toilet01 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  #container .toilet02 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  #container .toilet03 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
}

@media (min-width: 1300px) {
  #container #toilet .c-section-title .en {
    width: calc(191 * var(--rem-ratio));
  }

  #container #toilet .c-grid {
    row-gap: calc(76 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  Comfort
============================================================================================ ^^ */
#container #comfort {
  background-color: #fff;
}

#container #comfort .c-section-title .en {
  width: calc(104 * var(--min-ratio));
}

#container #comfort .c-grid {
  grid-template-columns: repeat(2, 49%);
  column-gap: 2%;
  row-gap: calc(25 * var(--min-ratio));
}

#container .comfort01,
#container .comfort02,
#container .comfort03,
#container .comfort04 {
  grid-column: 1 / 3;
}

@media not all and (min-width: 768px) {
  #container .comfort01 {
    order: 1;
  }

  #container .comfort02 {
    order: 3;
  }

  #container .comfort03 {
    order: 3;
  }

  #container .comfort04 {
    order: 4;
  }

  #container .comfort05 {
    order: 6;
  }

  #container .comfort06 {
    order: 6;
  }

  #container .comfort07 {
    order: 7;
  }

  #container .comfort08 {
    order: 8;
  }

  #container .comfort09 {
    order: 9;
  }

  #container .comfort10 {
    order: 10;
  }

  #container .comfort11 {
    order: 11;
  }

  #container .comfort12 {
    order: 12;
  }

  #container .comfort13 {
    order: 13;
  }

  #container .comfort14 {
    grid-column: 1 / 3;
    order: 15;
  }

  #container .comfort15 {
    order: 14;
  }
}

@media (min-width: 768px) {
  #container #comfort .c-section-title .en {
    width: calc(279 * var(--max-ratio));
  }

  #container #comfort .c-grid {
    grid-template-columns: repeat(3, calc((350 / 1120) * 100%));
    column-gap: calc((35 / 1120) * 100%);
    row-gap: calc(35 * var(--max-ratio));
  }

  #container .comfort01 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  #container .comfort02 {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
  }

  #container .comfort03 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  #container .comfort04 {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
  }

  #container .comfort05 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  #container .comfort06 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  #container .comfort07 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
  }

  #container .comfort08 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }

  #container .comfort09 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }

  #container .comfort10 {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
  }

  #container .comfort11 {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
  }

  #container .comfort12 {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
  }

  #container .comfort13 {
    grid-column: 3 / 4;
    grid-row: 5 / 6;
  }

  #container .comfort14 {
    grid-column: 1 / 3;
    grid-row: 6 / 7;
  }

  #container .comfort15 {
    grid-column: 3 / 4;
    grid-row: 6 / 7;
  }

  #container .comfort16 {
    grid-column: 1 / 2;
    grid-row: 7 / 8;
  }
}

@media (min-width: 1300px) {
  #container #comfort .c-section-title .en {
    width: calc(279 * var(--rem-ratio));
  }

  #container #comfort .c-grid {
    row-gap: calc(35 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  Security
============================================================================================ ^^ */
#container #security {
  background: linear-gradient(90deg, rgba(217, 215, 204, 1) 0%, rgba(222, 220, 211, 1) 2.93%, rgba(231, 229, 222, 1) 10.96%, rgba(236, 234, 229, 1) 22.25%, rgba(237, 235, 231, 1) 53.62%, rgba(236, 233, 229, 1) 80.01%, rgba(231, 228, 222, 1) 89.52%, rgba(224, 219, 211, 1) 96.27%, rgba(217, 210, 200, 1) 100%);
}

#container #security .c-section-title .en {
  width: calc(104 * var(--min-ratio));
}

#container #security .c-grid {
  grid-template-columns: repeat(2, 49%);
  column-gap: 2%;
  row-gap: calc(25 * var(--min-ratio));
}

#container #security .c-grid+.c-grid {
  margin-top: calc(40 * var(--min-ratio));
  row-gap: calc(40 * var(--min-ratio));
}

#container .security01,
#container .security08,
#container .security09,
#container .security10 {
  grid-column: 1 / 3;
}

#container .security01 .c-quality-box__image+.c-quality-box__image {
  width: 40%;
  margin: 0 0 1em 1em;
  float: right;
}

#container .security01 .c-quality-box__caption ul {
  margin-top: 0;
}

@media (min-width: 768px) {
  #container #security .c-section-title .en {
    width: calc(277 * var(--max-ratio));
  }

  #container #security .c-grid {
    grid-template-columns: repeat(3, calc((352 / 1120) * 100%));
    column-gap: calc((32 / 1120) * 100%);
    row-gap: calc(35 * var(--max-ratio));
  }

  #container #security .c-grid+.c-grid {
    margin-top: calc(78 * var(--max-ratio));
    grid-template-columns: repeat(2, calc((542 / 1120) * 100%));
    column-gap: calc((36 / 1120) * 100%);
    row-gap: calc(35 * var(--max-ratio));
  }

  #container .security01 {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: calc((733 / 1120) * 100%) calc((352 / 1120) * 100%);
    column-gap: calc((35 / 1120) * 100%);
    row-gap: calc(15 * var(--max-ratio));
  }

  #container .security01 .c-quality-box__image {
    margin: 0;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  #container .security01 .c-quality-box__image+.c-quality-box__image {
    width: 100%;
    float: none;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  #container .security01 .c-quality-box__caption {
    margin: 0;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  #container .security01 .c-quality-box__caption ul {
    margin-top: calc(33 * var(--max-ratio));
  }

  #container .security02 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  #container .security03 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  #container .security04 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }

  #container .security05 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  #container .security06 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  #container .security07 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
  }

  #container .security08 {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
  }

  #container .security09 {
    grid-column: 1 / 2;
  }

  #container .security10 {
    grid-column: 2 / 3;
  }
}

@media (min-width: 1300px) {
  #container #security .c-section-title .en {
    width: calc(277 * var(--rem-ratio));
  }

  #container #security .c-grid {
    row-gap: calc(35 * var(--rem-ratio));
  }

  #container #security .c-grid+.c-grid {
    margin-top: calc(78 * var(--rem-ratio));
  }

  #container .security01 {
    row-gap: calc(15 * var(--rem-ratio));
  }

  #container .security01 .c-quality-box__caption ul {
    margin-top: calc(33 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  Quality note
============================================================================================ ^^ */
#container .p-quality-note {
  width: 100vw;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #fff;
}

#container .p-quality-note .c-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 calc(20 * var(--min-ratio));
}

@media (min-width: 768px) {
  #container .p-quality-note .c-inner {
    padding: 0 calc(20 * var(--max-ratio));
  }
}

@media (min-width: 1300px) {
  #container .p-quality-note .c-inner {
    padding: 0;
  }
}