@charset "utf-8";

/* 基本設定 */
html,
body {
  margin: 0;
  padding: 0;
}
#container {
  width: 100%;
  margin: 0 auto;
  color: #000;
  overflow: hidden;
  background-color: #fff;
}
.wrapper {
  font: 1rem/1.6 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
}
.sp-br{
  display: none;
}
#container h1,
#container h2,
#container h3,
#container .bed-table-section p{
  letter-spacing: 0em;
  font-family: "BIZ UD明朝", BIZ UDMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#container p,
#container th,
#container td{
  font-size: 0.9rem;
}
#container a{
    text-decoration: none;
    color: #6b3e33;
}
/*一覧誘導用ボタン*/
#container .btn_wrap {
  text-align: left;
}
#container .btn_link {
  display: inline-block;
  padding: 15px 60px;
  border-radius: 24px;
  background-color: #e5e1df;
  color: #7e675f;
  font-weight: 700;
  position: relative;
}
#container .btn_link::after {
  content: "";
  position: absolute;
  top: 47%;
  right: 32px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2px solid #7e675f;
  border-right: 2px solid #7e675f;
  transform: rotate(45deg);
}
/*ランキング用ボタン*/
#container .rank_btn_wrap {
  text-align: center;
  margin: 15px auto 30px;
}
#container .rank_btn_link {
  display: inline-block;
  padding: 20px 80px;
  margin-bottom: 60px;
  border-radius: 50px;
  background-color: #fff;
  color: #7e675f;
  font-weight: 700;
  font-size: 1.2rem;
  position: relative;
}
#container .rank_btn_link::after {
  content: "";
  position: absolute;
  top: 40%;
  right: 32px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #7e675f;
  border-right: 2px solid #7e675f;
  transform: rotate(45deg);
}
/*画面最下部一覧誘導button*/
#container .list_btn_wrap{
  text-align: center;
  margin-top: 40px;
}
#container .list_btn_link{
  display: inline-block;
  background: none;
  border-style: none;
  color: #7e675f; 
  letter-spacing: 0.12em;
  position: relative;
  font-weight: 700;
}
#container .list_btn_link::after {
  content: "";
  position: absolute;
  top: 30%;
  right: -20px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #7e675f;
  border-right: 2px solid #7e675f;
  transform: rotate(45deg);
}
/*ボタン動き*/
.sec-menu li:hover,
.rank_btn_link:hover,
.btn_link:hover,
.product-cell:hover{
  border: 1px solid #e3b06f;
}
/*-------------------
  mainvisual
-------------------*/
.mainvisual {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
}
.kv{
  width: 100%;
}
.kv-inner{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.kv-bg{
  display: block;
  width: 100%;
  height: auto;
}
.kv-ribbon{
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: auto;
}
.kv-title {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 3.5vw;
  line-height: 4vw;
  color: #694437;
  white-space: nowrap;
}
.back-color {
  width: 100%;
  background-color: #f1eeea;
  padding: 60px 0 0 0;
}
.back-color .text {
  margin: 0 20% 60px;
  text-align: center;
}
.back-color .des {
  line-height: 1.8;
}

/*-------------------
  mainvisual end
-------------------*/
.sec-menu {
  width: 100%;
  margin: 0 auto;
  padding: 60px 0;
  text-align: center;
}
.sec-menu h2 {
  margin-bottom: 15px;
  font-size: 2.0rem;
  font-weight: 400;
  color: #6b3e33;
}
.sec-menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  position: relative;
  width: 1200px;
}
.sec-menu li {
  background-color: #fff;
  border:solid 1px #e0d6cd;
  border-radius: 24px;
  margin-bottom: 10px;
  width: calc(25% - 8px);
}
.sec-menu .menu-div {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  box-shadow: 0 0 0 1px #e0d6cd;
  padding-left: 5%;
  position: relative;
}
.sec-menu .menu-div > a {
  display: flex;
  align-items: center;
  height: 100%;
  color: #6b3e33;
  padding: 3px;
}
.sec-menu .menu-div span {
  display: inline-flex;
  align-items: center;
}
.sec-menu .menu-div img {
  margin-right: 10px;
  width: 40px;
}
.sec-menu .menu-div::after {
  content: "";
  position: absolute;
  top: 40%;
  right: 17px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #6b3e33;
  border-right: 2px solid #6b3e33;
  transform: rotate(45deg);
}

/*-------------------
  category見出し
-------------------*/
/*右→左*/
#container section.electriclift,
#container section.electricfacial,
#container section.standard,
#container section.waterproof {
  width: 100%;
  margin: 0 auto;
  padding: 60px 0;
  box-sizing: border-box;
}
/*右から左にスライドイン*/
.anime-box.slidin-left {
  transform: translateX(180px);
  opacity: 0;
}
.anime-box.slidin-left.is-animated {
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
#container section.electriclift .electriclift_inner,
#container section.electricfacial .electricfacial_inner,
#container section.standard .standard_inner,
#container section.waterproof .waterproof_inner {
  margin-left: 10%;
}
#container section.electriclift .sec_main,
#container section.electricfacial .sec_main,
#container section.standard .sec_main,
#container section.waterproof .sec_main {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #7e675f;
  border-radius: 18px 0 0 18px;
  overflow: hidden;
}
#container section.electriclift .pic,
#container section.electricfacial .pic,
#container section.standard .pic,
#container section.waterproof .pic {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding-left: 3%;
  margin-right: 8%;
}
#container section.electriclift .pic img,
#container section.electricfacial .pic img,
#container section.standard .pic img,
#container section.waterproof .pic img {
  display: block;
  height: 110%;
  width: auto;
  object-fit: cover;
}
#container section.electriclift .text,
#container section.electricfacial .text,
#container section.standard .text,
#container section.waterproof .text {
  position: relative;
  flex: 2;
  color: #fff;
  box-sizing: border-box;
  margin: 0;
  margin-right: 10%;
}
#container section.electriclift .text h2,
#container section.electricfacial .text h2,
#container section.standard .text h2,
#container section.waterproof .text h2 {
  margin-bottom: 10px;
  font-size: 2vw;
  font-weight: 400;
  text-align: left;
}
#container section.electriclift .text p,
#container section.electricfacial .text p,
#container section.standard .text p,
#container section.waterproof .text p {
  margin-bottom: 25px;
  text-align: left;
}
#container section.electriclift .btn_txtlogo,
#container section.electricfacial .btn_txtlogo,
#container section.standard .btn_txtlogo,
#container section.waterproof .btn_txtlogo {
  position: absolute;
  right: 2%;
  bottom: -10%;
  width: 200px;
  height: auto;
  opacity: 0.7;
}
/*左→右*/
#container section.manuallift,
#container section.combination,
#container section.facial{
  padding: 60px 0;
  box-sizing: border-box;
}
#container section.folding{
  padding-top: 60px;
  box-sizing: border-box;
}
/*左から右にスライドイン*/
.anime-box.slidin-right {
  transform: translateX(-180px);
  opacity: 0;
}
.anime-box.slidin-right {
  transform: translateX(-180px);
  opacity: 0;
}
.anime-box.slidin-right.is-animated {
  animation: slideInFromLeft 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%, 100% {
    opacity: 1;
  }
}
#container section.manuallift .manuallift_inner,
#container section.folding .folding_inner,
#container section.combination .combination_inner,
#container section.facial .facial_inner
{
   margin-right: 10%;
}
#container section.manuallift .sec_main,
#container section.folding .sec_main,
#container section.combination .sec_main,
#container section.facial .sec_main
{
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  background-color: #7e675f;
  border-radius: 0 18px 18px 0;
  overflow: hidden;
}
#container section.manuallift .pic,
#container section.folding .pic,
#container section.combination .pic,
#container section.facial .pic
{
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  padding-right: 3%;
  margin-left: 3%;
}
#container section.manuallift .pic img,
#container section.folding .pic img,
#container section.combination .pic img,
#container section.facial .pic img
{
  display: block;
  height: 110%;
  width: auto;
  object-fit: cover;
}
#container section.manuallift .text,
#container section.folding .text,
#container section.combination .text,
#container section.facial .text {
  position: relative;
  flex: 2;
  color: #fff;
  box-sizing: border-box;
  margin: 0 0 0 15%;
}
#container section.manuallift .text h2,
#container section.folding .text h2,
#container section.combination .text h2,
#container section.facial .text h2 {
  margin-bottom: 10px;
  font-size: 2vw;
  font-weight: 400;
  text-align: left;
}
#container section.manuallift .text p,
#container section.folding .text p,
#container section.combination .text p,
#container section.facial .text p {
  margin-bottom: 25px;
  text-align: left;
}
#container section.manuallift .btn_txtlogo,
#container section.folding .btn_txtlogo,
#container section.combination .btn_txtlogo,
#container section.facial .btn_txtlogo {
  position: absolute;
  right: 0;
  bottom: -10%;
  width: 200px;
  height: auto;
  opacity: 0.7;
}

/*-------------------
  bed-table-section
-------------------*/
.bed-table-section {
  padding: 0 0 60px;
  text-align: center;
}
.bed-table-section h3{
  position: relative;
  display: inline-block;
  font-size: 26px;
  color: #7e675f;
  margin: 5% 0 auto;
  font-weight: 400;
}
.bed-table-section h3::before,
.bed-table-section h3::after
{
  position: absolute;
  top: calc(50% - 3px);
  width: 30px;
  height: 2px;
  content: "";
  border-top: solid 2px #7e675f;
  border-bottom: solid 2px #7e675f;
}
.bed-table-section h3::before{
  left: -3rem;
}
.bed-table-section h3::after{
  right: -3rem;
}
#container .bed-table-section p{
  color: #7e675f;
  margin: 0 auto 20px auto;
  font-size: 24px;
  font-weight: 400;
}
#container .bed-table-inner {
  max-width: 1000px;
  margin: 20px auto;
  border: 1px solid #d6cec0;
}
.bed-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #6b3e33;
}
.bed-table col:nth-child(1),                  /* 商品名,商品画像 */
.bed-table col:nth-child(2),                  /* 値段 */
.bed-table col:nth-child(3),                  /* カラー */
.bed-table col:nth-child(12) { width: 10%; }  /* 特徴 */
.bed-table col:nth-child(n+4):nth-child(-n+11) { width: 6.5%; } /* 重量,長さ,高さ,幅,厚み,調節,素材,保証 */
.bed-table th,
.bed-table td {
  border: 1px solid #d6cec0;
  padding: 8px 8px;
  vertical-align: middle;
  text-align: center;
  height: 110px;
}
#container .bed-table td:nth-child(1) {
  background-color: #fff;
}
#container .bed-table td:nth-child(2) {
  background-color: #f1ede7;
}
#container .bed-table td:nth-child(3) {
  background-color: #f8f6f2;
}
#container .bed-table td:nth-child(n+4):nth-child(-n+11) {
  background-color: #f8f6f2;
}
#container .bed-table td:nth-child(12) {
  background-color: #f1ede7;
}
#container .bed-table th {
  background-color: #e5e0d8;
  font-weight: 500;
  height: 56px;
}
.product-cell {
  text-align: left;
  line-height: 1.4;
}
.product-thumb {
  margin-bottom: 6px;
}
.product-thumb img {
  display: block;
  width: 200px;
  height: auto;
}
.product-name {
  display: inline-block;
}
.price-main {
  font-weight: 600;
  display: block;
}
.price-sub {
  font-size: 0.8rem;
  display: block;
}
.color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #b7b4aa;
}
.c-white      { background-color: rgb(231, 226, 226); }
.c-offwhite   { background-color: rgb(240, 235, 208); }
.c-brown      { background-color: #492812; }
.c-darkbrown  { background-color: #2c1404; }
.c-black      { background-color: black; }
.c-gray       { background-color: #89807A; }
.darkgray     { background-color: #3f3a36;}
.c-blue       { background-color: #2e3d9a; }
.c-lightblue  { background-color: #93d7f7; }
.c-pink       { background-color: #f56b8f; }
.c-green      { background-color: #69ac5c; }
.c-orange     { background-color: #e46a06; }
.graybeige    { background-color: #8f7b6b;}
.whitegray    { background: linear-gradient(to bottom, #fff 0%, #fff 50%, #89807A 50%, #89807A 100%); }

/*-------------------
  関連特集
-------------------*/
.detail {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 0;
}
.detail-title {
  margin: 0 auto 15px;
  text-align: center;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  font-weight: 400;
  color: #6b3e33;
}
.freespace_bn {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 10px; 
}
.freespace_bn li {
  flex: 0 0 calc(50% - 7px);
  box-sizing: border-box;
}
.freespace_bn img {
  display: block;
  width: 100%;
  height: auto;
}

/*-------------------
  responsive
-------------------*/
/* ===== SP 用（375〜767px） ===== */
@media screen and (max-width: 767px) {
  html,body{
    margin: 0;
    padding: 0;
  }
  #container{
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
  .wrapper{
    font: 0.9rem 'Ubuntu', "ヒラギノ角ゴ ProN W3", 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, "遊ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ ゴシック', sans-serif;
    line-height: 1.2rem;
  }
  #container p a h3{
    font-size: 3.8vw;
  }
  /*-------------------
  mainvisual
-------------------*/
  .kv-ribbon{
    width: 65%;
  }
  .kv-title{
    font-size: 30px;
    top: 38%;
    line-height: 9vw;
  }
  .back-color{
    width: 100%;
    padding: 20px 17px 1px 17px;
    box-sizing: border-box;
  }
  .back-color .text{
    max-width: 100%;
    margin: 0 auto;
  }
  .back-color .des {
    text-align: left;
  }
  /*-------------------
  選べるベッドタイプ
-------------------*/
  #container .sec-menu {
    padding: 30px 0;
  }
  .sec-menu h2 {
    font-size: 1.5rem;
  }
  .sec-menu ul {
    width: 100%;
  }
  .sec-menu li {
    width: calc(50% - 8px); /* 2列 */
    height: 60px;
    border-radius: 12px;
  }
  .sec-menu .menu-div {
    border-radius: 10px;
    padding-left: 0;
  }
  .sec-menu .menu-div span{
    margin-right: 20px;
  }
  .sec-menu .menu-div img{
    margin-right: 1px;
  }
  .sec-menu .menu-div::after{
    right: 10px;
  }
  /*-------------------
  category見出し
-------------------*/
  #container section.electriclift,
  #container section.electricfacial,
  #container section.standard,
  #container section.waterproof,
  #container section.manuallift,
  #container section.folding,
  #container section.combination,
  #container section.facial {
    padding: 0;
  }
  #container section.electriclift  .electriclift_inner,
  #container section.electricfacial .electricfacial_inner,
  #container section.standard      .standard_inner,
  #container section.waterproof   .waterproof_inner,
  #container section.manuallift   .manuallift_inner,
  #container section.folding      .folding_inner,
  #container section.combination  .combination_inner,
  #container section.facial       .facial_inner {
    margin: 0;
  }
  #container section.electriclift  .sec_main,
  #container section.electricfacial .sec_main,
  #container section.standard      .sec_main,
  #container section.waterproof    .sec_main,
  #container section.manuallift    .sec_main,
  #container section.folding       .sec_main,
  #container section.combination   .sec_main,
  #container section.facial        .sec_main {
    display: block;
    border-radius: 18px;
  }
  #container section.electriclift  .pic,
  #container section.electricfacial .pic,
  #container section.standard      .pic,
  #container section.waterproof    .pic,
  #container section.manuallift    .pic,
  #container section.folding       .pic,
  #container section.combination   .pic,
  #container section.facial        .pic {
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    display: block;
  }
  #container section.electriclift  .pic img,
  #container section.electricfacial .pic img,
  #container section.standard      .pic img,
  #container section.waterproof    .pic img,
  #container section.manuallift    .pic img,
  #container section.folding       .pic img,
  #container section.combination   .pic img,
  #container section.facial        .pic img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  #container section.electriclift  .text,
  #container section.electricfacial .text,
  #container section.standard      .text,
  #container section.waterproof    .text,
  #container section.manuallift    .text,
  #container section.folding       .text,
  #container section.combination   .text,
  #container section.facial        .text {
    padding: 20px 18px 24px;
    margin: 0;
    font-size: 0.9rem;
  }
  #container section.electriclift  .text h2,
  #container section.electricfacial .text h2,
  #container section.standard      .text h2,
  #container section.waterproof    .text h2,
  #container section.manuallift    .text h2,
  #container section.folding       .text h2,
  #container section.combination   .text h2,
  #container section.facial        .text h2 {
    margin: 0 0 16px;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    text-align: center;
  }
  #container section.electriclift  .text p,
  #container section.electricfacial .text p,
  #container section.standard      .text p,
  #container section.waterproof    .text p,
  #container section.manuallift    .text p,
  #container section.folding       .text p,
  #container section.combination   .text p,
  #container section.facial        .text p {
    margin-bottom: 20px;
    line-height: 1.7;
  }
  #container section.electriclift  .btn_txtlogo,
  #container section.electricfacial .btn_txtlogo,
  #container section.standard      .btn_txtlogo,
  #container section.waterproof    .btn_txtlogo,
  #container section.manuallift    .btn_txtlogo,
  #container section.folding       .btn_txtlogo,
  #container section.combination   .btn_txtlogo,
  #container section.facial        .btn_txtlogo {
    bottom: 30%;
    width: 140px;
  }
  /*スクロールでフェードイン*/
  .anime-box.slidin-left,
  .anime-box.slidin-left.is-animated,
  .anime-box.slidin-right,
  .anime-box.slidin-right.is-animated {
    transform: none;
    animation: none;
  }
  .advanced {
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);

    opacity: 0;
    transform: translateY(13%);
    transition:
      opacity 1.8s var(--ease-out-cubic),
      transform 1.8s var(--ease-out-quint);
  }
  .advanced.isActive {
    opacity: 1;
    transform: translateY(0);
  }

  /*-------------------
  bed-table-section
-------------------*/
  #container .bed-table-section {
    padding-top: 30px;
  }
  #container .bed-table-inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow-x: auto;
  }
  .bed-table {
    min-width: 980px;
    border-spacing: 0;
  }
  .bed-table col:nth-child(1){ 
    background-color: transparent;
  } 
  .bed-table th,
  .bed-table td {
    padding: 6px 4px;
    height: auto;
  }
  .bed-table th:first-child,
  .bed-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
  }
  .bed-table th:first-child {
    z-index: 3;
  }
  .bed-table-section h3{
    font-size: 1.2rem;
  }
  .bed-table-section h3::before,
  .bed-table-section h3::after{
    width: 17px;
    border-top: solid 1px #7e675f;
    border-bottom: solid 1px #7e675f;
  }
  .bed-table-section h3::before{
    left: -2rem;
  }
  .bed-table-section h3::after{
    right: -2rem;
  }
  #container .bed-table-section p{
    margin: 0 auto 10px;
    font-size: 1.0rem;
  }
  .product-thumb img {
    height: auto;
  }
  .product-cell {
    padding-left: 2px;
    line-height: 1.3;
  }
  .product-name {
    font-size: 3.8vw;
  }
  /*ランキング用ボタン*/
  #container .rank_btn_link{
    margin-bottom: 0;
    line-height: 1.3rem;
    border-radius: 18px;
    padding: 5px 60px; 
    font-size: 0.9rem;
  }
  #container .rank_btnlink::after{
    top: 40%;
    right: 15px;
  }
  .sp-br{
    display: block;
  }
  /*一覧誘導用ボタン*/
  #container section.electriclift .btn_link, 
  #container section.electricfacial .btn_link, 
  #container section.standard .btn_link, 
  #container section.waterproof .btn_link,
  #container section.manuallift .btn_link, 
  #container section.folding .btn_link, 
  #container section.combination .btn_link, 
  #container section.facial .btn_link{
    border-radius: 18px;
    font-size: 0.9rem;
    padding: 10px 30px 10px 15px;
  }
  #container .btn_link::after{
    right: 12px;
  }
  /*画面最下部相互リンクbutton*/
  #container .list_btn_wrap{
    margin: 10px auto 15px;
  }
  .list_btn_wrap a{
    font-size: 0.9rem;
  }
  #container .list_btn_link::after{
    right: 0px;
  }
  /*-------------------
  関連特集
-------------------*/
  .detail {
    padding: 0;
    margin-bottom: 30px;
  }
  .detail-title,
  .freespace_bn {
    width: 100%;
    padding: 0 5%;
    font-size: 1.2rem;
  }
  .freespace_bn {
    flex-direction: column;
    row-gap: 5px;
    column-gap: 0;
  }
  .freespace_bn li {
    flex: 0 0 auto;
    width: 100%;
  }
  .freespace_bn img {
    display: block;
    width: 100%;
    height: auto;
  }
}