@charset "utf-8";
/*=================================================
共通設定
===================================================*/
:root {
  --baseColor:    #e2dce0;
  --fontColor:    #47102e;
  --accentColor:  #ce1d6e;
  --coverColor:   #c6c6ce;
  --lampColor:    #cfd3d0;
  --chairColor:   #ccc1bc;
  --presentColor: #dccee0;
  --shadowVolor:  #775d70;
  --px5: 0.3125rem;
  --px10: 0.625rem;
  --px11: 0.6875rem;
  --px12: 0.75rem;
  --px13: 0.8125rem;
  --px14: 0.875rem;
  --px15: 0.9375rem;
  --px16: 1rem;
  --px17: 1.0625rem;
  --px18: 1.125rem;
  --px20: 1.25rem;
  --px24: 1.5rem;
  --px25: 1.5625rem;
  --px26: 1.625rem;
  --px28: 1.75rem;
  --px30: 1.875rem;
  --px32: 2rem;
  --px36: 2.25rem;
  --px40: 2.5rem;
  --px48: 3rem;
  --px50: 3.125rem;
  --px60: 3.75rem;
  --px70: 4.375rem;
  --px80: 5rem;
  --px100: 6.25rem;
  --px120: 7.5rem;
  --lsSmall:  .1em;
  --lsMedium: .15em;
  --lsLarge:  .2em;
}
html {
  font-size: 100%;
  letter-spacing: var(--lsMedium);
  scroll-behavior: smooth;
}
body {
  width: 100%;
  font-family: "游明朝 Demibold", "Yu Mincho Demibold", "YuMincho Demibold", serif !important;
  /*font-family: "游明朝 Demibold", "Yu Mincho Demibold", "YuMincho Demibold", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif !important;*/
  font-size: var(--px16);
  color: var(--fontColor);
  line-height: 1.8;
  background: var(--baseColor);
}
@media screen and (max-width: 1024px) {
  body {
    font-size: 3.515625vw;
  }
}
body * {
  box-sizing: border-box;
  word-break: break-word;
}
img {
  width: 100%;
  height: auto;
}
a {
  position: relative;
  z-index: 2;
}
.br-tb {display: inline-block;}
.br-sp {display: none;}
@media screen and (max-width: 768px) {
  .br-tb {display: none;}
  .br-sp {display: inline-block;}
}
.md-wrap {
  position: relative;
  width: 100%;
}
.hvr-underline {
  background-image: linear-gradient(to bottom, transparent, var(--fontColor));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background .3s ease-out;
  cursor: pointer;
}
.hvr-underline.left {
  background-position: left bottom;
}
.hvr-underline.right {
  background-position: right bottom;
}
.header-nav li a:hover .hvr-underline,
.product-info a:hover .hvr-underline,
.topBtn a:hover .hvr-underline {
  background-size: 100% 1px;
}
/*=================================================
header
===================================================*/
.header {
  width: 100vw;
  height: 100vh;
  position: fixed;
  pointer-events: none;
}
@media (max-width: 1024px) {
  .header {
    display: none !important;
  }
}
.header-logo {
  position: absolute;
  top: 50%;
  left: calc((100vw - 375px) / 4);
  transform: translate(-50%, -50%);
  width: clamp(240px, 18.75vw, 360px);
}
.header-nav {
  pointer-events: all;
  position: absolute;
  top: 50%;
  left: calc((100vw - 375px) / 2 + 375px + 10vw);
  transform: translateY(-50%);
}
.header-nav-ttl {
  font-size: var(--px36);
  letter-spacing: var(--lsLarge);
}
.header-nav li {
  font-size: var(--px24);
  letter-spacing: var(--lsLarge);
  text-align: right;
  margin-top: var(--px16);
}

/*=================================================
main / footer
===================================================*/
.md-contents,
.footer {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .md-contents,
  .footer {
    max-width: 100%;
  }
}

/*=================================================
キービジュアル
===================================================*/
.kv {position: relative;}
.kv p {
  position: absolute;
  top: var(--px60);
  width: 100%;
  font-size: var(--px15);
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .kv p {
    font-size: 4.6875vw;
  }
}

/*=================================================
導入
===================================================*/
.prologue {
  text-align: center;
  padding: var(--px70) var(--px32);
  background: url(img/intro_bg.jpg) no-repeat center top;
  background-size: cover;
}
.prologue h2 {
  font-size: var(--px24);
  margin-bottom: var(--px50);
}
@media screen and (max-width: 1024px) {
  .prologue h2 {
    font-size: 4.6875vw;
  }
}
.prologue p {
  margin-top: var(--px40);
}

/*=================================================
コンテンツ共通
===================================================*/
.pillow {background: var(--pillowColor);}
.cover {background: var(--coverColor);}
.lamp {background: var(--lampColor);}
.chair {background: var(--chairColor);}
.product {
  padding: var(--px70) 0;
}
h2 .ja {
  display: block;
}
.product h2,
.coution h2,
.present h2 {
  font-size: var(--px24);
  text-align: center;
  margin-bottom: var(--px20);
}
@media screen and (max-width: 1024px) {
  .product h2,
  .coution h2,
  .present h2 {
    font-size: 4.6875vw;
    margin-bottom: var(--px30);
  }
}
.product h2 .en,
.coution h2 .en,
.present h2 .en {
  position: relative;
  font-size: var(--px11);
  display: block;
}
@media screen and (max-width: 1024px) {
  .product h2 .en,
  .coution h2 .en,
  .present h2 .en {
    font-size: 2.34375vw;
  }
}
.product h2 .en::before,
.coution h2 .en::before,
.present h2 .en::before {
  display: block;
  content: '';
  text-align: center;
  width: auto;
  height: var(--px12);
  background: url(img/icon_ttl.png) no-repeat center;
  background-size: auto var(--px12);
}
@media screen and (max-width: 1024px) {
  .product h2 .en::before,
  .coution h2 .en::before,
  .present h2 .en::before {
    height: 2.34375vw;
    background-size: auto 2.34375vw;
  }
}
.md-section-inr {position: relative;}
/*=================================================
製品紹介
===================================================*/
.product-line {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
/* 背景線 */
.pillow .product-line {
  background-image: url(img/pillow_line.png);
  background-repeat: no-repeat;
  background-position: left -130px bottom -40px;
  background-size: 100% auto;
}
@media screen and (max-width: 1024px) {
  .pillow .product-line {
    background-position: left -29.296875vw bottom -14.6484375vw;
  }
}
.cover .product-line {
  background-image: url(img/cover_line.png);
  background-repeat: no-repeat;
  background-position: right -150px bottom 0px;
  background-size: 100% auto;
}
@media screen and (max-width: 1024px) {
  .cover .product-line {
    background-position: right -39.0625vw bottom 0px;
  }
}
.lamp .product-line {
  background-image: url(img/lamp_line.png);
  background-repeat: no-repeat;
  background-position: left -140px bottom -20px;
  background-size: 100% auto;
}
@media screen and (max-width: 1024px) {
  .lamp .product-line {
    background-position: left -29.296875vw bottom -1.953125;
  }
}
.chair .product-line {
  background-image: url(img/chair_line.png);
  background-repeat: no-repeat;
  background-position: right -130px bottom -120px;
  background-size: 100% auto;
}
@media screen and (max-width: 1024px) {
  .chair .product-line {
    background-position: right -39.0625vw bottom 0px;
  }
}
/* 商品写真 */
.product:nth-child(odd)
.product-wrapp:nth-child(1)
.product-img_b {
  width: calc(100% - var(--px32));
  margin-left: auto;
}
@media screen and (max-width: 1024px) {
  .product:nth-child(odd)
  .product-wrapp:nth-child(1)
  .product-img_b {
    width: calc(100% - 7.8125vw);
  }
}
.product:nth-child(odd)
.product-wrapp:nth-child(2)
.product-img_b {
  width: calc(100% - var(--px100));
  margin-right: auto;
}
.product:nth-child(odd)
.product-wrapp:nth-child(3)
.product-img_b {
  width: calc(100% - var(--px100));
  margin-left: auto;
}
.product:nth-child(even)
.product-wrapp:nth-child(1)
.product-img_b {
  width: calc(100% - var(--px32));
  margin-right: auto;
}
@media screen and (max-width: 1024px) {
  .product:nth-child(even)
  .product-wrapp:nth-child(1)
  .product-img_b {
    width: calc(100% - 7.8125vw);
  }
}
.product:nth-child(even)
.product-wrapp:nth-child(2)
.product-img_b {
  width: calc(100% - var(--px100));
  margin-left: auto;
}
.product:nth-child(even)
.product-wrapp:nth-child(3)
.product-img_b {
  width: calc(100% - var(--px100));
  margin-right: auto;
}
.product-wrapp {
  margin-bottom: var(--px70);
}
.product-img {
  position: relative;
  padding-bottom: var(--px70);
}
.product-img_f {
  position: absolute;
  z-index: 2;
  bottom: 0;
}
.product:nth-child(odd)
.product-wrapp:nth-child(odd)
.product-img_f {
  left: var(--px32);
}
@media screen and (max-width: 1024px) {
  .product:nth-child(odd)
  .product-wrapp:nth-child(odd)
  .product-img_f {
    left: 7.8125vw;
  }
}
.product:nth-child(odd)
.product-wrapp:nth-child(even)
.product-img_f {
  right: var(--px32);
}
@media screen and (max-width: 1024px) {
  .product:nth-child(odd)
  .product-wrapp:nth-child(even)
  .product-img_f {
    right: 7.8125vw;
  }
}
.product:nth-child(even)
.product-wrapp:nth-child(odd)
.product-img_f {
  right: var(--px32);
}
@media screen and (max-width: 1024px) {
  .product:nth-child(even)
  .product-wrapp:nth-child(odd)
  .product-img_f {
    right: 7.8125vw;
  }
}
.product:nth-child(even)
.product-wrapp:nth-child(even)
.product-img_f {
  left: var(--px32);
}
@media screen and (max-width: 1024px) {
  .product:nth-child(even)
  .product-wrapp:nth-child(even)
  .product-img_f {
    left: 7.8125vw;
  }
}
.pillow .product-img_f {
  width: 300px;
}
@media screen and (max-width: 1024px) {
  .pillow .product-img_f {
    width: 58.59375vw;
  }
}
.cover .product-img_f,
.lamp .product-img_f {
  width: 130px;
}
@media screen and (max-width: 1024px) {
  .cover .product-img_f,
  .lamp .product-img_f {
    width: 25.390625vw;
  }
}
.product-info a {
  display: flex;
  gap: var(--px36);
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 var(--px32);
}
@media screen and (max-width: 1024px) {
  .product-info a {
    gap: 7.8125vw;
    padding: 0 7.8125vw;
  }
}
.product:nth-child(odd)
.product-wrapp:nth-child(even)
.product-info a {
  flex-direction: row-reverse;
}
.product:nth-child(even)
.product-wrapp:nth-child(odd)
.product-info a {
  flex-direction: row-reverse;
}
.product-ttl {
  flex: 0 0 auto;
}
.product-name {
  font-size: var(--px20);
  line-height: 1.5;
  letter-spacing: normal;
  margin-bottom: var(--px10);
}
@media screen and (max-width: 1024px) {
  .product-name {
    font-size: 4.6875vw;
    letter-spacing: var(--lsMedium);
    margin-bottom: var(--px20);
  }
}
.product-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--px12);
  width: var(--px100);
  height: var(--px24);
  background: var(--fontColor);
}
@media screen and (max-width: 1024px) {
  .product-btn {
    border-radius: 2.9296875vw;
    width: 15.625vw;
    height: 5.859375vw;
    background: var(--fontColor);
  }
}
.product-info a:hover .product-btn {
  background: #fff;
}
.product-btn span {
  position: relative;
  font-size: var(--px13);
  color: #fff;
}
@media screen and (max-width: 1024px) {
  .product-btn span {
    font-size: 2.34375vw;
  }
}
.product-info a:hover .product-btn span {
  color: var(--fontColor);
}
.product-btn span::after {
  display: inline-block;
  content: '';
  width: var(--px17);
  height: var(--px5);
  background: url(img/icon_arrow.png) no-repeat center center;
  background-size: 100%;
}
@media screen and (max-width: 1024px) {
  .product-btn span::after {
    width: 3.515625vw;
    height: 1.171875vw;
  }
}
.product-info a:hover .product-btn span::after {
  background: url(img/icon_arrow_hv.png) no-repeat center center;
  background-size: 100%;
}
.product-txt {
  font-size: var(--px14);
  letter-spacing: normal;
}
@media screen and (max-width: 1024px) {
  .product-txt {
    font-size: 3.125vw;
    letter-spacing: var(--lsMedium);
  }
}
.product-list {
  position: relative;
  z-index: 2;
  padding: 0 var(--px32);
}
@media screen and (max-width: 1024px) {
  .product-list {
    padding: 0 7.8125vw;
  }
}
.product-list a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--px50);
  border-radius: var(--px25);
  box-shadow: 0 0 var(--px10) var(--shadowVolor);
  transition: all .8s;
}
@media screen and (max-width: 1024px) {
  .product-list a {
    height: 9.765625vw;
    border-radius: 4.8828125vw;
  }
}
.pillow .product-list a {
  background: var(--baseColor);
}
.pillow .product-list a:hover {
  color: var(--baseColor);
  background: var(--fontColor);
}
.cover .product-list a {
  background: var(--coverColor);
}
.cover .product-list a:hover {
  color: var(--coverColor);
  background: var(--fontColor);
}
.lamp .product-list a {
  background: var(--lampColor);
}
.lamp .product-list a:hover {
  color: var(--lampColor);
  background: var(--fontColor);
}
.chair .product-list a {
  background: var(--chairColor);
}
.chair .product-list a:hover {
  color: var(--chairColor);
  background: var(--fontColor);
}

/*=================================================
coution / present
===================================================*/
.coution,
.present {
  background: var(--presentColor);
}
/* coution */
.coution {
  padding: var(--px20);
}
@media screen and (max-width: 1024px) {
  .coution {
    padding: 7.8125vw;
  }
}
.coution .md-section-inr {
  padding: var(--px40) 0;
  background: #fff;
}
@media screen and (max-width: 1024px) {
  .coution .md-section-inr {
    padding: 7.8125vw 0;
    background: #fff;
  }
}
.coution-ttl,
.coution p {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
}
.coution-ttl {
  display: block;
  line-height: 1.2;
}
.coution p {
  text-align: center;
}
.coution p .em {
  font-size: var(--px36);
  color: var(--accentColor);
}
@media screen and (max-width: 1024px) {
  .coution p .em {
    font-size: 7.8125vw;
  }
}
.coution p .emsmall {
  font-size: var(--px20);
}
@media screen and (max-width: 1024px) {
  .coution p .emsmall {
    font-size: 4.6875vw;
  }
}
/* present */
.present .md-section-inr {
  padding: var(--px50) var(--px20) var(--px70);
}
@media screen and (max-width: 1024px) {
  .present .md-section-inr {
    padding: 4.8828125vw 7.8125vw 6.8359375vw;
  }
}
.present p {
  margin-top: var(--px20);
  font-size: var(--px14);
  text-align: center;
  letter-spacing: normal;
}
@media screen and (max-width: 1024px) {
  .present p {
    font-size: 3.125vw;
  }
}
/*=================================================
footer
===================================================*/
.footer {
  text-align: center;
  padding: var(--px40) var(--px70);
  background: #fff;
}
@media screen and (max-width: 1024px) {
  .footer {
    padding: 5.859375vw 0;
  }
}
.footer .logo {
  width: 15.625rem;
  margin: 0 auto var(--px10);
}
@media screen and (max-width: 1024px) {
  .footer .logo {
    width: 48.828125vw;
  }
}
.footer a {
  font-size: var(--px14);
}
@media screen and (max-width: 1024px) {
  .footer a {
    font-size: 3.125vw;
  }
}
/*=================================================
フェードイン
===================================================*/
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
}
.fadein-left {
    transform: translate(-30px,0);
}
.fadein-right {
    transform: translate(30px,0);
}
.fadein-up {
    transform: translate(0,-30px);
}
.fadein-bottom {
    transform: translate(0,30px);
}
.scrollin {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}
/*=================================================
ふらっと表示
===================================================*/
.fade-in {
  opacity: 0;
  animation: fadeInAnime 2s forwards; /* 1秒かけて表示 */
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
    transform: translateY(0); /* 少し下から上にふわっと */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*=================================================
ぼかし表示
===================================================*/
.inview-blur{
  opacity: 0;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.blur{
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: .8s;
}
@-webkit-keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }

  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }

  to {
      opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}