@charset 'UTF-8';

#wrapper > header {
  padding-top: 5.4rem;
}
@media screen and (min-width: 768px) {
  #wrapper > header {
    padding-top: 0;
  }
}

/*  hero  */
#hero {
  position: relative;
}
#hero::before {
  content: "";
  display: block;
  padding-top: calc(785 / 1200 * 100%);
}
#hero ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#hero .logo {
  position: absolute;
  bottom: 5.5%;
  left: 4.3945%;
  width: calc(103 / 1024 * 100%);
  min-width: 7.7rem;
  transition: opacity 0.4s linear 1.6s;
}
#hero .logo.start {
  opacity: 0;
}
#hero ul li::before {
  content: "";
  position: absolute;
  margin: auto;
  width: calc(750 / 1024 * 100%);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  opacity: 0.0001;
  z-index: -10;

  padding-top: calc(606 / 1024 * 100%);
  /* bottom: 0.2rem; */
  bottom: 0;
  left: 0;
  right: 0;
}
#hero ul li.active::before {
  opacity: 1;
  z-index: 20;
  /* animation: scrolldown 3.6s linear 7.2s forwards, fadeinout_b 8.4s linear 4s both; */
  /* animation: scrolldown 8s linear 7.2s forwards, fadeinout_b 14s linear 4s both; */
  /* animation: scrolldown 12s linear 7.2s forwards, fadeinout_b 18s linear 4s both; */
  -webkit-animation: scrolldown 16s linear 7.2s forwards, fadeinout_b 22s linear 5s both;
  animation: scrolldown 16s linear 7.2s forwards, fadeinout_b 22s linear 5s both;
}
#hero ul li:nth-of-type(1).active:not(.start)::before {
  -webkit-animation: none;
  animation: none;
  opacity: 0.0001;
  z-index: auto;
}
/* #hero ul li:nth-of-type(1).active.start::before {
  opacity: 1;
  z-index: 20;
  animation: scrolldown 8s linear 7.2s forwards, fadeinout_b 14s linear 4s both;
} */
@-webkit-keyframes fadeinout_b {
  0% {
    opacity: 0.0001;
    z-index: -10;
  }
  0.01% {
    opacity: 0.0001;
    z-index: 20;
  }
  11.11% {
    opacity: 1;
    z-index: 20;
  }
  88.88% {
    opacity: 1;
    z-index: 20;
  }
  99.99% {
    opacity: 0.0001;
    z-index: 20;
  }
  100% {
    opacity: 0.0001;
    z-index: -20;
  }
}
@keyframes fadeinout_b {
  0% {
    opacity: 0.0001;
    z-index: -10;
  }
  0.01% {
    opacity: 0.0001;
    z-index: 20;
  }
  11.11% {
    opacity: 1;
    z-index: 20;
  }
  88.88% {
    opacity: 1;
    z-index: 20;
  }
  99.99% {
    opacity: 0.0001;
    z-index: 20;
  }
  100% {
    opacity: 0.0001;
    z-index: -20;
  }
}
@-webkit-keyframes scrolldown {
  0% {
    background-position: 50% 0;
  }
  100% {
    background-position: 50% 100%;
  }
}
@keyframes scrolldown {
  0% {
    background-position: 50% 0;
  }
  100% {
    background-position: 50% 100%;
  }
}
/* #hero ul li:nth-of-type(1)::before {
  padding-top: calc(606 / 1024 * 100%);
  bottom: 0.2rem;
  left: 0;
  right: 0;
}
#hero ul li:nth-of-type(2)::before {
  padding-top: calc(428 / 1024 * 100%);
  top: calc(235.5 / 670 * 100%);
  left: calc(41.5 / 1024 * 100%);
}
#hero ul li:nth-of-type(3)::before {
  padding-top: calc(428 / 1024 * 100%);
  top: calc(238 / 670 * 100%);
  left: calc(226 / 1024 * 100%);
}
#hero ul li:nth-of-type(4)::before {
  padding-top: calc(606 / 1024 * 100%);
  bottom: 0.2rem;
  left: 0;
  right: 0;
}
#hero ul li:nth-of-type(5)::before {
  padding-top: calc(606 / 1024 * 100%);
  bottom: 0.2rem;
  left: 0;
  right: 0;
} */
/* html:not([lang="ja"]) #hero ul li:nth-of-type(1)::before {
  background-image: url(../images/bg_heroani_unimaster.png);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(2)::before {
  background-image: url(../images/bg_heroani_sail.png);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(3)::before {
  background-image: url(../images/bg_heroani_uuchair.png);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(4)::before {
  background-image: url(../images/bg_heroani_bar.png);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(5)::before {
  background-image: url(../images/bg_heroani_luna.png);
} */
html:not([lang="ja"]) #hero ul li:nth-of-type(1)::before {
  background-image: url(../images/bg_heroani_modus-d_en.webp);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(2)::before {
  background-image: url(../images/bg_heroani_hachi_en.webp);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(3)::before {
  background-image: url(../images/bg_heroani_sinn_en.webp);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(4)::before {
  background-image: url(../images/bg_heroani_kumo_en.webp);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(5)::before {
  background-image: url(../images/bg_heroani_universesofa_en.webp);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(6)::before {
  background-image: url(../images/bg_heroani_dc11_en.webp);
}
/* html[lang="ja"] #hero ul li:nth-of-type(1)::before {
  background-image: url(../images/bg_heroani_unimaster_ja.png);
}
html[lang="ja"] #hero ul li:nth-of-type(2)::before {
  background-image: url(../images/bg_heroani_sail_ja.png);
}
html[lang="ja"] #hero ul li:nth-of-type(3)::before {
  background-image: url(../images/bg_heroani_uuchair_ja.png);
}
html[lang="ja"] #hero ul li:nth-of-type(4)::before {
  background-image: url(../images/bg_heroani_bar_ja.png);
}
html[lang="ja"] #hero ul li:nth-of-type(5)::before {
  background-image: url(../images/bg_heroani_luna_ja.png);
} */
html[lang="ja"] #hero ul li:nth-of-type(1)::before {
  background-image: url(../images/bg_heroani_modus-d_ja.webp);
}
html[lang="ja"] #hero ul li:nth-of-type(2)::before {
  background-image: url(../images/bg_heroani_hachi_ja.webp);
}
html[lang="ja"] #hero ul li:nth-of-type(3)::before {
  background-image: url(../images/bg_heroani_sinn_ja.webp);
}
html[lang="ja"] #hero ul li:nth-of-type(4)::before {
  background-image: url(../images/bg_heroani_kumo_ja.webp);
}
html[lang="ja"] #hero ul li:nth-of-type(5)::before {
  background-image: url(../images/bg_heroani_universesofa_ja.webp);
}
html[lang="ja"] #hero ul li:nth-of-type(6)::before {
  background-image: url(../images/bg_heroani_dc11_ja.webp);
}
#hero ul li::after {
  content: "";
  position: absolute;
  margin: auto;
  width: calc(750 / 1024 * 100%);
  background-position: 50% 50%, 50% 0;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, cover;
  opacity: 0.0001;
  z-index: -10;

  padding-top: calc(606 / 1024 * 100%);
  /* bottom: 0.2rem; */
  bottom: 0;
  left: 0;
  right: 0;
}
#hero ul li.active::after {
  opacity: 1;
  z-index: 10;
  /* animation: fadeinout_a 4s linear 3.2s both; */
  /* animation: fadeinout_a 8s linear 3.2s both; */
  /* animation: fadeinout_a 12s linear 3.2s both; */
  -webkit-animation: fadeinout_a 16s linear 3.2s both;
  animation: fadeinout_a 16s linear 3.2s both;
}
#hero ul li:nth-of-type(1).active:not(.start)::after {
  -webkit-animation: none;
  animation: none;
  opacity: 0.0001;
  z-index: auto;
}
/* #hero ul li:nth-of-type(1).active.start::after {
  opacity: 1;
  z-index: 10;
  animation: fadeinout_a 8s linear 3.2s both;
} */
@-webkit-keyframes fadeinout_a {
  0% {
    opacity: 0.0001;
    z-index: -10;
  }
  0.01% {
    opacity: 0.0001;
    z-index: 10;
  }
  10% {
    opacity: 1;
    z-index: 10;
  }
  99.98% {
    opacity: 1;
    z-index: 10;
  }
  99.99% {
    opacity: 0.0001;
    z-index: 10;
  }
  100% {
    opacity: 0.0001;
    z-index: -20;
  }
}
@keyframes fadeinout_a {
  0% {
    opacity: 0.0001;
    z-index: -10;
  }
  0.01% {
    opacity: 0.0001;
    z-index: 10;
  }
  10% {
    opacity: 1;
    z-index: 10;
  }
  99.98% {
    opacity: 1;
    z-index: 10;
  }
  99.99% {
    opacity: 0.0001;
    z-index: 10;
  }
  100% {
    opacity: 0.0001;
    z-index: -20;
  }
}
/* #hero ul li:nth-of-type(1)::after {
  padding-top: calc(606 / 1024 * 100%);
  bottom: 0.2rem;
  left: 0;
  right: 0;
}
#hero ul li:nth-of-type(2)::after {
  padding-top: calc(428 / 1024 * 100%);
  top: calc(235.5 / 670 * 100%);
  left: calc(41.5 / 1024 * 100%);
}
#hero ul li:nth-of-type(3)::after {
  padding-top: calc(428 / 1024 * 100%);
  top: calc(238 / 670 * 100%);
  left: calc(226 / 1024 * 100%);
}
#hero ul li:nth-of-type(4)::after {
  padding-top: calc(606 / 1024 * 100%);
  bottom: 0.2rem;
  left: 0;
  right: 0;
}
#hero ul li:nth-of-type(5)::after {
  padding-top: calc(606 / 1024 * 100%);
  bottom: 0.2rem;
  left: 0;
  right: 0;
}
 */
/* html:not([lang="ja"]) #hero ul li:nth-of-type(1)::after {
  background-image: url(../images/bg_heroani_mask_h.svg), url(../images/bg_heroani_unimaster.png);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(2)::after {
  background-image: url(../images/bg_heroani_mask_v.svg), url(../images/bg_heroani_sail.png);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(3)::after {
  background-image: url(../images/bg_heroani_mask_v.svg), url(../images/bg_heroani_uuchair.png);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(4)::after {
  background-image: url(../images/bg_heroani_mask_h.svg), url(../images/bg_heroani_bar.png);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(5)::after {
  background-image: url(../images/bg_heroani_mask_h.svg), url(../images/bg_heroani_luna.png);
} */
html:not([lang="ja"]) #hero ul li:nth-of-type(1)::after {
  background-image: url(../images/bg_heroani_mask.svg), url(../images/bg_heroani_modus-d_en.webp);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(2)::after {
  background-image: url(../images/bg_heroani_mask.svg), url(../images/bg_heroani_hachi_en.webp);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(3)::after {
  background-image: url(../images/bg_heroani_mask.svg), url(../images/bg_heroani_sinn_en.webp);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(4)::after {
  background-image: url(../images/bg_heroani_mask.svg), url(../images/bg_heroani_kumo_en.webp);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(5)::after {
  background-image: url(../images/bg_heroani_mask.svg), url(../images/bg_heroani_universesofa_en.webp);
}
html:not([lang="ja"]) #hero ul li:nth-of-type(6)::after {
  background-image: url(../images/bg_heroani_mask.svg), url(../images/bg_heroani_dc11_en.webp);
}
/* html[lang="ja"] #hero ul li:nth-of-type(1)::after {
  background-image: url(../images/bg_heroani_mask_h.svg), url(../images/bg_heroani_unimaster_ja.png);
}
html[lang="ja"] #hero ul li:nth-of-type(2)::after {
  background-image: url(../images/bg_heroani_mask_v.svg), url(../images/bg_heroani_sail_ja.png);
}
html[lang="ja"] #hero ul li:nth-of-type(3)::after {
  background-image: url(../images/bg_heroani_mask_v.svg), url(../images/bg_heroani_uuchair_ja.png);
}
html[lang="ja"] #hero ul li:nth-of-type(4)::after {
  background-image: url(../images/bg_heroani_mask_h.svg), url(../images/bg_heroani_bar_ja.png);
}
html[lang="ja"] #hero ul li:nth-of-type(5)::after {
  background-image: url(../images/bg_heroani_mask_h.svg), url(../images/bg_heroani_luna_ja.png);
} */
html[lang="ja"] #hero ul li:nth-of-type(1)::after {
  background-image: url(../images/bg_heroani_mask.svg), url(../images/bg_heroani_modus-d_ja.webp);
}
html[lang="ja"] #hero ul li:nth-of-type(2)::after {
  background-image: url(../images/bg_heroani_mask.svg), url(../images/bg_heroani_hachi_ja.webp);
}
html[lang="ja"] #hero ul li:nth-of-type(3)::after {
  background-image: url(../images/bg_heroani_mask.svg), url(../images/bg_heroani_sinn_ja.webp);
}
html[lang="ja"] #hero ul li:nth-of-type(4)::after {
  background-image: url(../images/bg_heroani_mask.svg), url(../images/bg_heroani_kumo_ja.webp);
}
html[lang="ja"] #hero ul li:nth-of-type(5)::after {
  background-image: url(../images/bg_heroani_mask.svg), url(../images/bg_heroani_universesofa_ja.webp);
}
html[lang="ja"] #hero ul li:nth-of-type(6)::after {
  background-image: url(../images/bg_heroani_mask.svg), url(../images/bg_heroani_dc11_ja.webp);
}
#hero .carousel-indicators,
#hero .carousel-control-prev,
#hero .carousel-control-next {
  display: none;
}
#hero .carousel-exit {
  display: none;
}
@media screen and (min-width: 768px) {
  #hero .carousel-control-prev,
  #hero .carousel-control-next {
    display: flex;
    padding: 0.6rem;
    margin: auto;
    width: auto;
    height: 5.9rem;
    opacity: 1;
    transition: opacity 0.3s;
  }
  #hero .carousel-control-prev:hover,
  #hero .carousel-control-next:hover {
    opacity: 0.75;
  }
  #hero .carousel-control-prev-icon,
  #hero .carousel-control-next-icon {
    width: 2.4rem;
    height: 4.7rem;
  }
  #hero .carousel-control-prev-icon {
    background-image: url(../images/ico_carousel_prev.svg);
  }
  #hero .carousel-control-next-icon {
    background-image: url(../images/ico_carousel_next.svg);
  }
  #hero .carousel-indicators {
    display: flex;
    margin-bottom: 0;
    transform: translateY(100%);
  }
  #hero .carousel-indicators li {
    width: 4px;
    height: 4px;
    border: 8px solid transparent;
    border-radius: 50%;
  }
  #hero .carousel-indicators li:hover {
    opacity: 1;
  }
  #hero .carousel-exit {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.8rem;
    margin: auto;
    width: 4.7rem;
  }
  #hero .carousel-exit a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
  }
  #hero .carousel-exit a::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding-top: calc(24 / 47 * 100%);
    background: url(../images/ico_carousel_exit.svg) no-repeat 50% 50%;
    background-size: contain;
  }
}

/*  recruit  */
#recruit {
  padding: 8.8rem 0;
}
@media screen and (min-width: 768px) {
  #recruit {
    padding: 8.8rem 0 11.4rem 0;
  }
}
#recruit a {
  margin: 0 auto;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  #recruit a {
    min-width: 36rem;
  }
}
#recruit p {
  margin: 0;
  font-weight: bolder;
  line-height: 1.3;
  color: rgb(137, 137, 137);
  text-align: center;
  font-feature-settings: normal;
}
#recruit p:first-of-type {
  margin-left: 0.4rem;
  font-size: 3rem;
}
#recruit p:first-of-type::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.4rem;
  width: 1.3rem;
  height: 1.3rem;
  border-top: solid 1px rgb(181, 181, 182);
  border-right: solid 1px rgb(181, 181, 182);
  transform: rotate(45deg);
  transform-origin: right bottom;
}
#recruit p:not(:first-of-type) {
  padding-top: 0.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  border-top: solid 2px rgb(159, 160, 160);
}

/*  philosophy  */
#philosophy > h2 {
  padding: 4.7rem 4.3945% 2.6rem 4.3945%;
  margin: 0;
  font-size: 2.8rem;
  font-weight: bolder;
  line-height: 1.21;
  letter-spacing: 0.03em;
}
html[lang="ja"] #philosophy > h2 {
  font-size: 3rem;
}
#philosophy > section h3 {
  padding-bottom: 1em;
  margin: 0;
  font-size: 1.8rem;
  font-weight: bolder;
  line-height: 1.33;
  letter-spacing: 0.03em;

  /*word-break: keep-all;*/
  line-break: strict;
  word-wrap: break-word;
}
#philosophy > section p {
  margin: 0 0 1.54em 0;
  font-size: 1.3rem;
  line-height: 1.54;
}
html[lang="ja"] #philosophy > section p {
  font-size: 1.2rem;
  line-height: 1.83;
}
#philosophy > section .image img {
  width: 100%;
}
#philosophy > section .container-fluid {
  padding-left: 0;
  padding-right: 0;
}
#philosophy > section .container-fluid .text {
  padding-left: 4.3945%;
  padding-right: 4.3945%;
  box-sizing: border-box;
}

/*  philosophy > original  */
#original {
  padding: 0 4.3945% 18.4rem 4.3945%;
}
@media screen and (min-width: 557px) {
  #original {
    width: calc(50% + 4.3945%);
    min-width: 557px;
  }
}

/*  philosophy > diverse  */
#diverse {
  padding-bottom: 13.7rem;
}
#diverse > .image.lazy::before {
  padding-top: calc(809 / 1200 * 100%);
}
#diverse .container-fluid {
  padding-top: 6.5rem;
}
#diverse .container-fluid .image.lazy {
  margin-top: 1em;
}
#diverse .container-fluid .image.lazy::before {
  padding-top: calc(330 / 600 * 100%);
}
#diverse .container-fluid .image img {
  max-width: calc(100% - (53 / 600 * 100%));
  margin-top: 0;
}

/*  philosophy > technique  */
#technique > .image.lazy::before {
  padding-top: calc(784 / 1200 * 100%);
}
#technique > section {
  padding-top: calc(100 / 1200 * 100%);
}
#technique .container-fluid .text {
  padding-top: 4.2rem;
}
#technique .container-fluid .image {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 0 calc(53 / 1200 * 100%);
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  #technique > section:nth-of-type(odd) .container-fluid .image {
    padding-left: calc(10 / 1200 * 100%);
    padding-right: calc(53 / 1200 * 100%);
  }
  #technique > section:nth-of-type(even) .container-fluid .image {
    padding-left: calc(53 / 1200 * 100%);
    padding-right: calc(10 / 1200 * 100%);
  }
}
#technique .container-fluid .image.lazy::before {
  padding-top: calc(282 / 460 * 100%);
  width: 100%;
}
#technique .container-fluid .image img {
  position: relative;
  margin-top: calc(282 / 460 * -100%);
}
#technique #handmachine .image img:nth-of-type(1) {
  width: calc(220 / (220 + 240) * 100%);
  height: auto;
}
#technique #handmachine .image img:nth-of-type(2) {
  width: calc(240 / (220 + 240) * 100%);
  height: auto;
}
#technique #upholstery .image img {
  width: 50%;
  height: auto;
}

/*  designers  */
#designers {
  padding-top: 15.6rem;
}
#designers .container-fluid {
  padding-top: 12.1rem;
  padding-bottom: 12.1rem;
}
#designers h3 {
  padding-left: calc(53 / 1200 * 100%);
  padding-right: calc(53 / 1200 * 100%);
}
#designers .dpartner {
  padding-left: calc(53 / 1200 * 100%);
  padding-right: calc(53 / 1200 * 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#designers .list {
  padding-top: 1em;
  text-align: center;
}
#designers ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline-block;
  text-align: left;
  min-width: 360px;
}
@media screen and (min-width: 576px) {
  #designers .list {
    text-align: left;
  }
  #designers ul {
    display: block;
  }
}
#designers li {
  padding: 0.7rem 0 0.7rem 3.3rem;
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-indent: -3.3rem;
}
#designers li a:not([href]) {
  pointer-events: none;
}
#designers li a::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  vertical-align: text-top;
  margin-right: 1.3rem;
  width: 100%;
  max-width: 2rem;
  height: 1em;
  background: no-repeat 50% 50%;
  background-size: contain;
}
#designers li.jp a::before {
  background-image: url(../images/ico_jp.svg);
}
#designers li.it a::before {
  background-image: url(../images/ico_it.svg);
}
#designers li.dk a::before {
  background-image: url(../images/ico_dk.svg);
}
#designers li.de a::before {
  background-image: url(../images/ico_de.svg);
}
#designers li.es a::before {
  background-image: url(../images/ico_es.png);
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  #designers li.es a::before {
    background-image: url(../images/ico_es@2x.png);
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  #designers li.es a::before {
    background-image: url(../images/ico_es@3x.png);
  }
}
#designers li a[href]::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-left: 1.6rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: rgb(174, 174, 175) url(../images/ico_arrow_d.svg) no-repeat 55% 50%;
}
#designers li span {
  font-size: 1.2rem;
  letter-spacing: calc(0.36 / 12 * 1em);
  white-space: nowrap;
}
#designers > .image.lazy::before {
  padding-top: calc(712 / 1200 * 100%);
}
#designers .container-fluid .image {
  text-align: center;
}
@media screen and (min-width: 576px) {
  #designers .container-fluid .image {
    padding-right: calc(53 / 1200 * 100%);
  }
}
#designers .container-fluid .image img {
  margin-top: 1em;
  max-width: calc(368 / (600 - 53) * 100%);
}

/*  collection  */
ul#collection {
  padding-left: 0;
  padding-right: 0;
  padding-top: calc(144 / 1200 * 100%);
  padding-bottom: calc(68 / 1200 * 100%);
  margin: 0;
  position: relative;
  list-style: none;
  color: rgb(0, 0, 0);
  background: rgb(255, 255, 255);
}
ul#collection::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: -1px;
  right: 50%;
  z-index: -10;
  margin: auto;
  width: 100vw;
  transform: translate(50%, 0);
  background: rgb(255, 255, 255);
}
#collection li {
  padding-top: calc(80 / 1200 * 100%);
  padding-bottom: calc(64 / 1200 * 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#collection li .text {
  padding-bottom: 3.3rem;
}
#collection li p {
  margin: 0;
  font-size: 1.56rem;
  line-height: 1.28;
  letter-spacing: 0.03em;
}
#collection li p.prodname {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.75;
}
#collection li a.more {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: left;
  text-indent: -100%;
  overflow: hidden;
  transition: 0.2s background;
}
#collection li a.more:hover {
  background: rgba(255, 255, 255, 0.25);
}
#collection li a.more:focus {
  outline: none;
}
.modal-open #collection li .modal {
  -webkit-overflow-scrolling: touch;
}
#collection li .modal.fade:not(.show) {
  opacity: 1;
  z-index: -10;
  position: absolute;
  display: block;
}
#collection li .modal.fade.show {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  margin: auto;
  opacity: 1;
}
#collection li .modal-dialog {
  margin: 0;
  max-width: none;
}
#collection li .modal-content {
  max-width: 752px;
  margin: 2rem auto;
  box-shadow: 0.4rem 0.4rem 1.6rem rgba(0, 0, 0, 0.25);
}
#collection li .modal-content .close {
  font-size: 4rem;
  font-weight: normal;
  margin: 1rem;
}
#collection li .modal-body {
  padding: 0;
}
.modal-open .modal-backdrop {
  opacity: 1 !important;
}
@media screen and (min-width: 752px) {
  .modal-backdrop {
    background: transparent;
  }
}

/*  collection > .prodetail  */
/*  unimaster, bar, luna, uuchair, sail  */
#collection .prodetail {
  padding: 1.6rem;
}
#collection .prodetail h2 {
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 1.75;
  letter-spacing: 0.03em;
}
#collection .prodetail .spec {
  padding-top: 0.97rem;
  padding-top: 1.2rem;
  padding-bottom: 8.2rem;
}
@media screen and (min-width: 768px) {
  #collection .prodetail .spec {
    padding-left: 4%;
    padding-right: 4%;
  }
  /*   html[lang="en"] #collection #sinn .spec {
    padding-left: 0;
  } */
  html[lang="en"] #collection #sinn .spec,
  html[lang="en"] #collection #dc11 .spec,
  html[lang="ja"] #collection #dc11 .spec {
    padding-left: 0;
  }
}
#collection .prodetail .spec p {
  max-width: 28rem;
  font-family: Roboto;
  font-size: 1.11rem;
  line-height: 1.28;
  /* letter-spacing: 0.02em; */
  font-feature-settings: normal;
}
@media screen and (min-width: 768px) {
  #collection .prodetail .spec p {
    max-width: none;
  }
  #collection #sail .spec p {
    max-width: 22.2rem;
  }
  #collection #uuchair .spec p {
    max-width: 22.2rem;
  }
  html[lang="en"] #collection #sinn .spec p:not(.desc),
  html[lang="en"] #collection #dc11 .spec p:not(.desc) {
    white-space: nowrap;
  }
}
#collection .prodetail .spec p.desc {
  /*   padding-top: 0.2rem;
  letter-spacing: -0.32px; */
  padding-top: 0.5em;
}
html[lang="ja"] #collection .prodetail .spec p.desc {
  line-height: 1.38;
}
#collection .prodetail .image {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}
#collection .prodetail.vertical > .row:first-of-type {
  padding-bottom: 2.8rem;
}
#collection .prodetail.vertical > .row:first-of-type > .image {
  align-items: flex-end;
}
#collection .prodetail .photos {
  padding-top: 1rem;
}
#collection .prodetail.vertical .photos {
  padding-bottom: 2rem;
}
#collection .prodetail .photos .image.flexend {
  justify-content: flex-end;
}

/* collection prodetail contents */
#collection .prodetail .contents > section {
  padding-bottom: 4.8rem;
}
@media screen and (min-width: 768px) {
  #collection .prodetail .contents > section:not(.wide),
  #collection .prodetail .contents > section.wide > *:not(.image) {
    margin-left: auto;
    margin-right: auto;
    max-width: calc(600 / 718 * 100% + (3.2rem - 32px));
  }
}
#collection .prodetail .contents section h3 {
  padding: 0.2em 0;
  margin: 0;
  font-size: 2.1rem;
  font-weight: 800;
  font-feature-settings: "palt";
  line-height: 1.4;
  letter-spacing: 0.05em;
  word-break: keep-all;
}
@media screen and (max-width: 767px) {
  #collection .prodetail .contents section h3 {
    font-size: min(16 / 390 * 100vw, 1.6rem);
  }
}
#collection .prodetail .contents section .image + h3 {
  margin-top: 1rem;
}
@media screen and (min-width: 768px) {
  #collection .prodetail .contents section h3 br.sp {
    display: none;
  }
}
#collection .prodetail .contents section .desc {
  padding: 0.4em 0;
  font-size: 1.3rem;
  line-height: 1.8;
}
#collection .prodetail .contents section .desc p {
  margin: 0;
  font-size: inherit;
  font-feature-settings: "palt";
  line-height: inherit;
  letter-spacing: 0.1em;
}
html[lang="ja"] #collection .prodetail .contents section .desc p {
  text-align: justify;
}

/*  override chg20210312 - align padding top/bottom  */
#philosophy h2 {
  padding-top: 6.8rem;
}
#original {
  padding-bottom: 6.8rem;
}
#original p:last-of-type {
  margin-bottom: 0;
}
#diverse {
  padding-bottom: 6.8rem;
}
#diverse > .image {
  margin-bottom: 6.8rem;
}
#diverse .container-fluid {
  padding-top: 0;
}
#diverse .text {
  padding-bottom: 6.8rem;
}
@media screen and (min-width: 768px) {
  #diverse .text {
    padding-bottom: 0;
  }
}
#diverse .text p:last-of-type {
  margin-bottom: 0;
}
#diverse .image {
  margin-top: 0 !important;
}
#technique > .image {
  margin-bottom: 6.8rem;
}
#technique section {
  padding-top: 0;
  padding-bottom: 6.8rem;
}
#technique .text {
  padding-top: 6.8rem !important;
}
#technique .text p:last-of-type {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  #technique .text {
    padding-top: 0 !important;
  }
  #technique .text p:last-of-type {
    /*margin-bottom: 1.54em;*/
  }
}
#designers {
  padding-top: 0;
}
#designers .container-fluid {
  padding-top: 6.8rem;
  padding-bottom: 6.8rem;
}
/*間隔調整（キ）*/
@media only screen and (max-width: 767px) {
  #diverse > .image {
    margin-bottom: 3rem;
  }
  #diverse .text {
    padding-bottom: 3rem;
  }
  #upholstery .text,
  #handmachine .text,
  #precision .text,
  #distributor .text {
    padding-top: 3rem !important;
  }
  #designers .container-fluid {
    padding-top: 3rem !important;
  }
  #designers .list {
    padding-top: 0;
  }
}
/*50th banner*/
.anniversary-banner {
  text-align: center;
  margin-top: 12rem;
  margin-bottom: 2rem;
}