@charset "UTF-8";
/* ================================================== */
/* 2023 全ページ共通CSS */
/* ※編集後は圧縮(minify)し、base.min.cssとして読み込むこと */
/* ※追加、削除、編集等は日付と概要をコメントで残すこと */
/* ※全ページ共通の記述以外は個別ファイルに追加しここには書かないこと */
/* ================================================== */
/* reset & default */
*,
::after,
::before {
  border-style: solid;
  border-width: 0;
  font-family: "MFW-YuGoPr6N-Regular", "游ゴシック体 Pr6N R", "Yu Gothic Pr6N R", YuGothic, "游ゴシック体 Medium", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", Arial, Helvetica, "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #1c1c1c;
  letter-spacing: 0.09em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
  border-collapse: collapse;
}

::-moz-placeholder {
  font-family: "MFW-YuGoPr6N-Regular", "游ゴシック体 Pr6N R", "Yu Gothic Pr6N R", YuGothic, "游ゴシック体 Medium", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", Arial, Helvetica, "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}

::placeholder {
  font-family: "MFW-YuGoPr6N-Regular", "游ゴシック体 Pr6N R", "Yu Gothic Pr6N R", YuGothic, "游ゴシック体 Medium", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", Arial, Helvetica, "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}

.bold,
b,
strong {
  font-family: "MFW-YuGoPr6N-Bold", "游ゴシック体 Pr6N B", "Yu Gothic Pr6N B", "游ゴシック体 Bold", YuGothic, "游ゴシック Bold", "Yu Gothic Bold", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

.en {
  font-family: "Frutiger LT W01_45 Ligh1475730", "MFW-YuGoPr6N-Regular", "游ゴシック体 Pr6N R", "Yu Gothic Pr6N R", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  letter-spacing: 0.05em;
}

.bold.en,
b.en,
strong.en {
  font-family: "Frutiger LT W01_65 Bold1475746", "MFW-YuGoPr6N-Bold", "游ゴシック体 Pr6N B", "Yu Gothic Pr6N B", "游ゴシック体 Bold", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: 400;
  transition: color 0.35s;
}

p,
span,
th,
td {
  transition: color 0.35s;
}

main {
  transition: 0.3s ease;
  width: 100%;
}

a,
a:visited {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: color 0.35s;
}

ol,
ul {
  list-style: none;
}

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  vertical-align: middle;
  color: inherit;
  background: 0 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
}

textarea {
  resize: vertical;
}

input,
textarea {
  font-family: inherit !important;
}

[type=button],
[type=reset],
[type=submit],
button {
  cursor: pointer;
}

[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled,
button:disabled {
  cursor: default;
}

html {
  height: -webkit-fill-available;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

img {
  display: block;
  pointer-events: none;
}

.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: -1;
}

.base_fade {
  opacity: 0;
  visibility: hidden;
  transition: 0.7s;
  will-change: opacity;
}

.base_fade.i {
  opacity: 1;
  visibility: visible;
}

.base_btn {
  width: auto;
  height: auto;
  padding: 0.58em 1.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dedede;
  border-radius: 5px;
  margin: 0 auto;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  transition: 0.45s;
  line-height: 1;
  text-align: center;
  z-index: 1;
}
.base_btn span {
  position: relative;
  z-index: 3;
  transition: color 0.45s;
  font-size: var(--small_font);
}

.loadingScreen {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.6s;
}

@media (min-width: 767px) {
  .base_btn:hover {
    color: #fff;
  }
  .base_btn:hover span {
    color: #fff;
  }
  .base_btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #1c1c1c;
    z-index: 2;
    transition: transform 0.45s;
    transform: scale(1, 0);
    transform-origin: left bottom;
  }
  .base_btn:hover::after {
    transform: scale(1, 1);
    transform-origin: left top;
    width: 100%;
  }
}
@media (min-width: 1000px) {
  .sp {
    display: none !important;
  }
}
@media (max-width: 999px) {
  .pc {
    display: none !important;
  }
}
.pc_display {
  display: block;
  visibility: visible;
}

.sp_display {
  display: none;
  visibility: hidden;
}

@media (max-width: 770px) {
  .pc_display {
    display: none;
    visibility: hidden;
  }
  .sp_display {
    display: block;
    visibility: visible;
  }
}
/* 画像hoverアクション */
/* ---------------------------------------------------------------------- */
a.hoverImg div {
  will-change: transform;
  transition: transform, border-radius 0.3s;
  overflow: hidden;
}

a:hover.hoverImg div {
  border-radius: 15px;
}

a.hoverImg div img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 0.6s;
}

a:hover.hoverImg div img {
  transform: scale(1.08);
}

:root {
  --section_margin: max(160px, 11.71dvw);
  --block_margin: max(100px, 7.62dvw);
  --title_margin: max(50px, 3.66dvw);
  --list_margin: max(30px, 2.2dvw);
  --base_font: max(15px, 1.1dvw);
  --small_font: max(13px, 0.95dvw);
  --header_ec_en_font: max(18px, 1.32dvw);
  --font07: max(7px, 0.51dvw);
  --font11: max(11px, 0.81dvw);
  --font12: max(12px, 0.88dvw);
  --font14: max(12px, 1.02dvw);
  --font16: max(14px, 1.17dvw);
  --font17: max(15px, 1.24dvw);
  --font18: max(18px, 1.32dvw);
  --font19: max(19px, 1.39dvw);
  --font20: max(20px, 1.46dvw);
  --font25: max(23px, 1.83dvw);
  --margin40: max(40px, 2.93dvw);
  --width20: max(20px, 1.46dvw);
  --brand-color01: #1C1C1C;
  --brand-color02: #B0B2AF;
  --brand-color03: #EEF0F2;
  --brand-color04: #ECEBE4;
  --header-color: transparent;
  --header-text-color: #1c1c1c;
}
@media screen and (max-width: 770px) {
  :root {
    --base_font: clamp(13px, -0.024px + 3.473vw, 26.719px);
    --small_font: clamp(11px, 0.024px + 2.927vw, 22.561px);
    --header_ec_en_font: clamp(18px, 0.000px + 4.8vw, 36.96px);
    --font07: clamp(5px, 0.024px + 1.327vw, 10.241px);
    --font11: clamp(9px, 0.000px + 2.4vw, 18.48px);
    --font12: clamp(10px, -0.024px + 2.673vw, 20.559px);
    --font14: clamp(12px, 0.000px + 3.2vw, 24.64px);
    --font16: clamp(15px, 0.000px + 4vw, 30.8px);
    --font17: clamp(15px, 0.000px + 4vw, 30.8px);
    --font18: clamp(16px, -0.024px + 4.273vw, 32.879px);
    --font19: clamp(19px, -0.024px + 5.073vw, 39.039px);
    --font20: clamp(16px, -0.024px + 4.273vw, 32.879px);
    --font25: clamp(21px, 0.000px + 5.6vw, 43.12px);
    --margin40: clamp(40px, -0.024px + 10.673vw, 82.159px);
    --width20: clamp(19px, -0.024px + 5.073vw, 39.039px);
    --width27: clamp(27px, 0.000px + 7.2vw, 55.44px);
    --section_margin: clamp(80px, 0.024px + 21.327vw, 164.241px);
    --block_margin: clamp(50px, 0.024px + 13.327vw, 102.641px);
    --title_margin: clamp(35px, 0.024px + 9.327vw, 71.841px);
    --list_margin: clamp(20px, 0.024px + 5.327vw, 41.041px);
  }
}

#pankuzu {
  position: absolute;
  z-index: 2;
  top: clamp(71.53px, 64.782px + 1.799vw, 99.33px);
  left: 0;
  width: 100%;
}
#pankuzu ul {
  width: calc(100% - 20px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#pankuzu li {
  font-size: clamp(9px, 8.243px + 0.202vw, 11px);
  color: var(--header-text-color, #fff);
  text-overflow: ellipsis;
}
#pankuzu li:not(:first-of-type) {
  margin-left: 8px;
}
#pankuzu li a {
  display: flex;
  align-items: center;
  opacity: 0.5;
  font-size: clamp(9px, 8.243px + 0.202vw, 11px);
}
#pankuzu li a::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  transform-origin: center;
  border-top: 1px solid var(--header-text-color, #fff);
  border-right: 1px solid var(--header-text-color, #fff);
  transform: rotate(45deg);
}
#pankuzu li a:hover {
  opacity: 1;
}

.calendar-wrapper {
  width: fit-content;
  position: relative;
  justify-self: center;
}
.calendar-wrapper .calendar-container {
  width: fit-content;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  row-gap: 9px;
  justify-content: center;
}
.calendar-wrapper .calendar-root {
  width: fit-content;
}
.calendar-wrapper .calendar-root .head {
  justify-self: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar-wrapper .calendar-root ul {
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: clamp(7px, 2.667px + 0.361vw, 9.6px);
}
.calendar-wrapper .calendar-root ul li {
  justify-self: center;
  width: var(--font25);
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar-wrapper .calendar-root ul li.holiday {
  background-color: rgba(219, 10, 28, 0.1647058824);
}
.calendar-wrapper .calendar-root ul li span {
  font-size: var(--font12);
  line-height: 1;
  text-align: center;
}
.calendar-wrapper .calendar-nav {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
}
.calendar-wrapper .calendar-nav button {
  width: clamp(23px, 6.933px + 1.339vw, 32.64px);
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #DADDD8;
}
.calendar-wrapper .calendar-nav button::after {
  content: "";
  display: block;
  width: clamp(7px, 2.667px + 0.361vw, 9.6px);
  height: clamp(7px, 2.667px + 0.361vw, 9.6px);
  border-top: 1px solid #1c1c1c;
  transform-origin: center center;
}
.calendar-wrapper .calendar-nav button.prev::after {
  border-left: 1px solid #1c1c1c;
  transform: rotate(-45deg);
  margin-right: -2px;
}
.calendar-wrapper .calendar-nav button.next::after {
  border-right: 1px solid #1c1c1c;
  transform: rotate(45deg);
  margin-left: -2px;
}
.calendar-wrapper .bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-self: start;
}
.calendar-wrapper .bottom::before {
  content: "";
  display: block;
  width: clamp(17px, 6.933px + 0.839vw, 23.04px);
  height: clamp(17px, 6.933px + 0.839vw, 23.04px);
  border-radius: 50%;
  background-color: rgba(219, 10, 28, 0.1647058824);
  top: 0;
  left: 0;
}

header,
footer {
  max-width: 100%;
  margin: 0 auto;
  transition: opacity 0.6s;
}
header img,
footer img {
  width: 100%;
  height: auto;
  object-position: center;
  object-fit: cover;
  transition: transform 0.6s;
}
header svg,
footer svg {
  width: 100%;
  height: 100%;
  transition: fill 0.35s, opacity 0.35s;
  object-fit: contain;
}
header p,
header span,
header a,
footer p,
footer span,
footer a {
  font-size: var(--base_font);
  transition: color 0.35s, opacity 0.35s;
}
header a:hover,
header button:hover,
footer a:hover,
footer button:hover {
  color: #B0B2AF;
}
header a:hover span,
header button:hover span,
footer a:hover span,
footer button:hover span {
  color: #B0B2AF;
}
header .container,
footer .container {
  width: 93%;
  margin: 0 auto;
}
@media screen and (min-width: 1200px) {
  header .container,
  footer .container {
    max-width: 87.8dvw;
  }
}
header .logo,
footer .logo {
  width: clamp(85px, 65.282px + 5.258vw, 141px);
  aspect-ratio: 97/36;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .logo svg,
footer .logo svg {
  fill: var(--header-text-color, #1C1C1C);
}
header .logo:hover svg,
footer .logo:hover svg {
  fill: #B0B2AF;
}
header .menuButton button,
footer .menuButton button {
  width: var(--margin40);
  height: var(--margin40);
  position: relative;
}
@media screen and (max-width: 770px) {
  header .menuButton button,
  footer .menuButton button {
    width: var(--title_margin);
    height: var(--title_margin);
    max-width: 50px;
    max-height: 50px;
  }
}
header .menuButton button span,
footer .menuButton button span {
  position: absolute;
  width: 100%;
  height: 1px;
  top: 40%;
  left: 0;
  transition: background-color 0.35s, transform 0.35s;
}
header .menuButton button span:last-child,
footer .menuButton button span:last-child {
  top: auto;
  bottom: 40%;
  transform-origin: 50% 0%;
}
@media screen and (max-width: 770px) {
  header .menuButton button span,
  footer .menuButton button span {
    top: 40%;
  }
  header .menuButton button span:last-child,
  footer .menuButton button span:last-child {
    bottom: 40%;
  }
}
header .menuButton button:hover span,
footer .menuButton button:hover span {
  background-color: #B0B2AF;
}
header .menuButton.active span,
footer .menuButton.active span {
  top: 50%;
  transform: rotate(-45deg) translateY(-50%);
}
header .menuButton.active span:last-child,
footer .menuButton.active span:last-child {
  bottom: 50%;
  transform: rotate(45deg) translateY(-50%);
}
header .litleLink li,
footer .litleLink li {
  align-self: start;
}
header .litleLink a,
footer .litleLink a {
  display: block;
  font-size: var(--font11);
  line-height: 1;
}
header .litleLink a:hover,
footer .litleLink a:hover {
  color: #B0B2AF;
}
header .copyRight small,
footer .copyRight small {
  display: block;
  font-size: 10px;
}
header .blankLink,
header .contactList,
footer .blankLink,
footer .contactList {
  display: grid;
  grid-auto-rows: auto;
  align-content: start;
}
header .blankLink a,
header .contactList a,
footer .blankLink a,
footer .contactList a {
  display: flex;
  align-items: center;
  justify-content: start;
  line-height: 1;
  gap: 5px;
}
header .blankLink a span,
header .contactList a span,
footer .blankLink a span,
footer .contactList a span {
  display: block;
  line-height: 1;
}
header .blankLink a:hover span,
header .contactList a:hover span,
footer .blankLink a:hover span,
footer .contactList a:hover span {
  color: #B0B2AF;
}
header .blankLink a:hover svg,
header .contactList a:hover svg,
footer .blankLink a:hover svg,
footer .contactList a:hover svg {
  fill: #B0B2AF;
}
header .blankLink,
footer .blankLink {
  grid-auto-rows: auto;
  gap: clamp(20px, 5.333px + 1.222vw, 28.8px);
  justify-content: start;
}
@media screen and (max-width: 770px) {
  header .blankLink,
  footer .blankLink {
    display: flex;
    justify-content: center;
    justify-items: center;
  }
}
header .blankLink li,
footer .blankLink li {
  justify-self: start;
}
header .blankLink a,
footer .blankLink a {
  font-size: var(--font12);
}
header .blankLink a svg,
footer .blankLink a svg {
  width: calc(var(--small_font) + 1);
  height: auto;
  aspect-ratio: 1/1;
}
header .blankLink a span,
footer .blankLink a span {
  font-size: var(--font12);
}
header .contactList,
footer .contactList {
  grid-template-rows: auto auto;
  gap: var(--list_margin);
  justify-items: start;
}
@media screen and (max-width: 770px) {
  header .contactList,
  footer .contactList {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    gap: var(--base_font);
    justify-items: center;
  }
}
header .freePhone a,
footer .freePhone a {
  display: flex;
  align-items: center;
  justify-content: start;
  line-height: 1;
  gap: 5px;
  margin-bottom: 10px;
}
header .freePhone a svg,
footer .freePhone a svg {
  width: var(--width20);
  height: auto;
  aspect-ratio: 41/27;
}
header .freePhone a span,
footer .freePhone a span {
  font-size: var(--font18);
  white-space: nowrap;
}
header .freePhone a:hover span,
footer .freePhone a:hover span {
  color: #B0B2AF;
}
header .freePhone a:hover svg,
footer .freePhone a:hover svg {
  fill: #B0B2AF;
}
header .freePhone .announce,
footer .freePhone .announce {
  justify-items: end;
}
header .freePhone .announce div,
footer .freePhone .announce div {
  width: fit-content;
  display: flex;
  column-gap: 5px;
  margin-bottom: var(--font07);
}
header .freePhone .announce p,
footer .freePhone .announce p {
  font-size: var(--font12);
  line-height: 1;
}
header .freePhone .announce p.bold,
footer .freePhone .announce p.bold {
  text-align: end;
}
header .mailForm a,
footer .mailForm a {
  position: relative;
  margin-bottom: 10px;
}
header .mailForm a::after,
footer .mailForm a::after {
  position: absolute;
  content: "";
  display: block;
  width: calc(var(--font07) + 2px);
  height: calc(var(--font07) + 2px);
  right: -7px;
  top: 50%;
  border-top: 1px solid #B0B2AF;
  border-right: 1px solid #B0B2AF;
  transform: rotate(45deg) translateY(-50%);
}
@media screen and (max-width: 770px) {
  header .mailForm a::after,
  footer .mailForm a::after {
    width: calc(var(--font07) + 2px);
    height: calc(var(--font07) + 2px);
  }
}
header .mailForm a svg,
footer .mailForm a svg {
  width: clamp(20px, 5.333px + 1.222vw, 28.8px);
  height: auto;
  aspect-ratio: 1/1;
}
header .mailForm a span,
footer .mailForm a span {
  font-size: var(--font16);
  white-space: nowrap;
}
header .mailForm p,
footer .mailForm p {
  font-size: var(--font12);
}
header .snsBox,
footer .snsBox {
  display: flex;
  column-gap: var(--small_font);
  justify-items: start;
  justify-self: start;
}
header .snsBox a,
footer .snsBox a {
  width: var(--font19);
  height: auto;
  aspect-ratio: 1/1;
  transition: opacity 0.35s;
}
header .snsBox a:hover,
footer .snsBox a:hover {
  opacity: 0.6;
}

header#ec .logo,
footer#ec .logo {
  padding: 4px 0 0;
}
header#ec .headline,
footer#ec .headline {
  width: 100%;
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header#ec .headline::before,
footer#ec .headline::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #DADDD8;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: -1;
}
header#ec .headline h3,
footer#ec .headline h3 {
  width: fit-content;
  font-size: var(--base_font);
  padding-right: var(--font20);
  background-color: #fff;
}
header#ec .headline button,
footer#ec .headline button {
  position: relative;
  display: block;
  width: var(--title_margin);
  height: var(--base_font);
  background-color: #fff;
  padding-left: var(--font20);
}
header#ec .headline button::after, header#ec .headline button::before,
footer#ec .headline button::after,
footer#ec .headline button::before {
  position: absolute;
  content: "";
  background-color: #1c1c1c;
  transition: opacity 0.25s, transform 0.25s;
}
header#ec .headline button::before,
footer#ec .headline button::before {
  width: var(--base_font);
  height: 1px;
  top: calc(var(--base_font) / 2);
  right: 0;
}
header#ec .headline button::after,
footer#ec .headline button::after {
  width: 1px;
  height: var(--base_font);
  top: 0;
  right: calc(var(--base_font) / 2);
}
header#ec .group,
footer#ec .group {
  width: 100%;
}
header#ec .childEle a,
header#ec .childEle li,
footer#ec .childEle a,
footer#ec .childEle li {
  font-size: var(--base_font);
}
@media screen and (min-width: 1366px) {
  header#ec .childEle a,
  header#ec .childEle li,
  footer#ec .childEle a,
  footer#ec .childEle li {
    font-size: max(13px, 0.81dvw);
  }
}
header#ec .childEle .subHeadline,
footer#ec .childEle .subHeadline {
  font-size: var(--small_font);
  line-height: 1;
  width: 100%;
  background-color: #ECEBE4;
  border-radius: 3px;
  padding: 3px 0;
  white-space: nowrap;
  text-align: center;
  margin-bottom: var(--small_font);
}
header#ec .childEle ul,
footer#ec .childEle ul {
  width: fit-content;
  display: grid;
  grid-auto-rows: auto;
  row-gap: var(--small_font);
  margin-bottom: var(--font16);
  align-content: start;
}
header#ec .childEle ul:last-child,
footer#ec .childEle ul:last-child {
  margin-bottom: 0;
}
header#ec .childEle ul span.en,
footer#ec .childEle ul span.en {
  display: block;
  font-size: var(--font12);
  color: #B0B2AF;
}
header#ec .product,
header#ec .content,
header#ec .shoppingGuide,
header#ec .supportArea,
footer#ec .product,
footer#ec .content,
footer#ec .shoppingGuide,
footer#ec .supportArea {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: var(--base_font);
}
header#ec .product .group,
footer#ec .product .group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--base_font);
}
header#ec .product .group .sofa,
footer#ec .product .group .sofa {
  grid-area: 1/1/3/2;
}
header#ec .product .group .cover,
footer#ec .product .group .cover {
  grid-area: 1/2/2/3;
}
header#ec .product .group .cover ul:nth-of-type(2),
footer#ec .product .group .cover ul:nth-of-type(2) {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  column-gap: 7px;
}
header#ec .product .group .cover ul:nth-of-type(2) span.en,
footer#ec .product .group .cover ul:nth-of-type(2) span.en {
  grid-area: 1/1/2/5;
}
header#ec .product .group .cover ul:nth-of-type(2) a,
footer#ec .product .group .cover ul:nth-of-type(2) a {
  text-decoration: underline;
}
header#ec .product .group .item,
footer#ec .product .group .item {
  grid-area: 2/2/3/3;
}
header#ec .product ul,
footer#ec .product ul {
  width: 100%;
}
header#ec .product ul li,
footer#ec .product ul li {
  margin-left: 5px;
}
header#ec .content .childEle ul,
footer#ec .content .childEle ul {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, calc(50% - var(--small_font) / 2));
  grid-auto-rows: auto;
  column-gap: var(--small_font);
  margin-left: 5px;
}
header#ec .shoppingGuide .childEle,
header#ec .supportArea .childEle,
footer#ec .shoppingGuide .childEle,
footer#ec .supportArea .childEle {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: var(--small_font);
}
header#ec .shoppingGuide .childEle ul,
header#ec .supportArea .childEle ul,
footer#ec .shoppingGuide .childEle ul,
footer#ec .supportArea .childEle ul {
  width: 100%;
  margin-left: 5px;
}
header#ec .shoppingGuide .childEle ul:first-child,
header#ec .supportArea .childEle ul:first-child,
footer#ec .shoppingGuide .childEle ul:first-child,
footer#ec .supportArea .childEle ul:first-child {
  grid-area: 1/1/2/3;
}
header#ec .shoppingGuide .childEle ul:last-child,
header#ec .supportArea .childEle ul:last-child,
footer#ec .shoppingGuide .childEle ul:last-child,
footer#ec .supportArea .childEle ul:last-child {
  width: 100%;
  grid-template-columns: repeat(2, calc(50% - var(--small_font) / 2));
  grid-area: 2/1/3/3;
  column-gap: var(--small_font);
}

header#ec .logo {
  width: clamp(5.313rem, 3.829rem + 6.33vw, 6.875rem);
}
header#ec .surface {
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  background-color: var(--header-color);
  transform: translateY(0);
  transition: transform 0.6s;
  background-color: #ffffff;
}
header#ec .surface.popHiden {
  transform: translateY(calc(-1 * var(--font12) - var(--font07) * 2.7));
}
header#ec .surface .control svg {
  fill: var(--header-text-color, #1C1C1C);
}
header#ec .surface .popupWrap {
  width: 100%;
  height: 30px;
  background-color: #1172C6;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  font-weight: bold;
}
header#ec .surface .popupWrap .popup-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
}
header#ec .surface .popupWrap .popup-content.active {
  transform: translateY(0%);
  opacity: 1;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: bold;
}
header#ec .surface .popupWrap .popup-content.next {
  transform: translateY(100%);
  opacity: 0;
}
header#ec .surface .popupWrap .popup-content.slide-out {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
header#ec .surface .popupWrap .popup-content.slide-in {
  transform: translateY(0%);
  opacity: 1;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
header#ec .surface .popupWrap p,
header#ec .surface .popupWrap a {
  display: block;
  font-size: clamp(0.75rem, 0.631rem + 0.51vw, 0.875rem); /*12px-14px*/
  color: #fff;
  text-align: center;
  line-height: 1;
  transition: opacity 0.3s ease-in-out;
  width: 100%;
  font-weight: bold;
}
header#ec .surface .popupWrap a {
  text-decoration: none;
}
header#ec .surface .popupWrap a:hover {
  opacity: 0.8;
}
header#ec .menuButton span {
  background-color: var(--header-text-color, #1C1C1C);
}
@media screen and (max-width: 770px) {
  header#ec .menuButton span {
    background-color: #1C1C1C;
  }
}
header#ec .menuButton.spSurface {
  position: fixed;
  top: 35px;
  left: 15px;
  z-index: 10;
}
header#ec .control {
  width: 90%;
  height: auto;
  margin: 0 auto;
  padding: 10px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media screen and (min-width: 771px) {
  header#ec .control {
    width: 94%;
    justify-content: left;
  }
}
@media screen and (min-width: 1200px) {
  header#ec .control {
    max-width: 88.5dvw;
  }
}
header#ec .control.left {
  justify-content: flex-start;
}
header#ec .control .icons {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
}
@media screen and (min-width: 771px) {
  header#ec .control .icons {
    right: -20px;
  }
}
@media screen and (min-width: 1200px) {
  header#ec .control .icons {
    right: -5%;
  }
}
header#ec .control .icons a {
  width: var(--font19);
  min-width: 19px;
  height: auto;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--font17);
  position: relative;
}
@media screen and (max-width: 770px) {
  header#ec .control .icons a {
    margin-right: 10px;
    min-width: 25px;
  }
}
header#ec .control .icons a span {
  font-size: clamp(11px, 3.733px + 0.606vw, 15.36px);
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  position: absolute;
  top: -9px;
  left: -9px;
  border-radius: 50%;
}
header#ec .control .icons a span.exist {
  background-color: #1c1c1c;
}
header#ec .control .icons a:hover svg {
  fill: #B0B2AF;
}
header#ec .control .menuList {
  width: 76%;
  display: flex;
  justify-content: left;
  gap: clamp(20px, -80.4px + 13vw, 50px);
  margin-left: clamp(30px, -146.03px + 22.83vw, 80px);
}
@media screen and (max-width: 770px) {
  header#ec .control .menuList {
    display: none;
    opacity: 0;
  }
}
header#ec .control .menuList .listItem {
  width: unset;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
header#ec .control .menuList .listItem:last-of-type {
  border-right: transparent;
}
@media (max-width: 1249px) {
  header#ec .control .menuList .listItem.tenpo dd, header#ec .control .menuList .listItem.support dd, header#ec .control .menuList .listItem.shoppingGuide dd {
    left: unset !important;
    right: 0;
  }
}
header#ec .control .menuList .listItem dd {
  width: max(375px, 27.45dvw);
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0px;
  padding: var(--font20);
  border: #DADDD8 1px solid;
  z-index: 5;
  background-color: #fff;
  border-radius: 15px;
  transition: visibility 0.35s, opacity 0.35s;
  display: block;
}
header#ec .control .menuList .listItem .childEle a,
header#ec .control .menuList .listItem .childEle li {
  font-size: var(--small_font);
}
@media screen and (min-width: 1366px) {
  header#ec .control .menuList .listItem .childEle a,
  header#ec .control .menuList .listItem .childEle li {
    font-size: max(13px, 0.81dvw);
  }
}
header#ec .control .menuList .listItem .childEle a:hover,
header#ec .control .menuList .listItem .childEle li:hover {
  color: #B0B2AF;
}
header#ec .control .menuList .listItem .childEle .subHeadline {
  font-size: var(--small_font);
  line-height: 1;
  width: 100%;
  background-color: #ECEBE4;
  border-radius: 3px;
  padding: 3px 0;
  white-space: nowrap;
  text-align: center;
  margin-bottom: var(--small_font);
}
header#ec .control .menuList .listItem .childEle ul {
  width: fit-content;
  display: grid;
  grid-auto-rows: auto;
  row-gap: var(--small_font);
  margin-bottom: var(--small_font);
  align-content: start;
}
header#ec .control .menuList .listItem .childEle ul:last-child {
  margin-bottom: 0;
}
header#ec .control .menuList .listItem .childEle ul span.en {
  display: block;
  font-size: var(--font12);
  color: #B0B2AF;
}
header#ec .control .menuList .listItem.product dd {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--base_font);
}
header#ec .control .menuList .listItem.product dd .sofa {
  grid-area: 1/1/3/2;
}
header#ec .control .menuList .listItem.product dd .cover {
  grid-area: 1/2/2/3;
}
header#ec .control .menuList .listItem.product dd .cover ul:nth-of-type(2) {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  column-gap: 7px;
}
header#ec .control .menuList .listItem.product dd .cover ul:nth-of-type(2) span.en {
  grid-area: 1/1/2/5;
}
header#ec .control .menuList .listItem.product dd .cover ul:nth-of-type(2) a {
  text-decoration: underline;
}
header#ec .control .menuList .listItem.product dd .item {
  grid-area: 2/2/3/3;
}
header#ec .control .menuList .listItem.product ul {
  width: 100%;
}
header#ec .control .menuList .listItem.product ul li {
  margin-left: 5px;
}
header#ec .control .menuList .listItem.content .childEle ul {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, calc(50% - var(--small_font) / 2));
  grid-auto-rows: auto;
  column-gap: var(--small_font);
  margin-left: 5px;
}
header#ec .control .menuList .listItem.shoppingGuide .childEle, header#ec .control .menuList .listItem.support .childEle, header#ec .control .menuList .listItem.tenpo .childEle {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: var(--small_font);
}
header#ec .control .menuList .listItem.shoppingGuide .childEle ul, header#ec .control .menuList .listItem.support .childEle ul, header#ec .control .menuList .listItem.tenpo .childEle ul {
  width: 100%;
  margin-left: 5px;
}
header#ec .control .menuList .listItem.shoppingGuide .childEle ul:first-child, header#ec .control .menuList .listItem.support .childEle ul:first-child, header#ec .control .menuList .listItem.tenpo .childEle ul:first-child {
  grid-area: 1/1/2/3;
}
header#ec .control .menuList .listItem.shoppingGuide .childEle ul:last-child, header#ec .control .menuList .listItem.support .childEle ul:last-child, header#ec .control .menuList .listItem.tenpo .childEle ul:last-child {
  width: 100%;
  grid-template-columns: repeat(2, calc(50% - var(--small_font) / 2));
  grid-area: 2/1/3/3;
  column-gap: var(--small_font);
}
header#ec .control .menuList .listItem dt button {
  font-size: var(--font14);
  transition: color 0.35s;
  text-align: left;
}
header#ec .control .menuList .listItem dt button:hover {
  color: #B0B2AF;
}
header#ec .control .menuList .listItem.active dd {
  visibility: visible;
  opacity: 1;
}
header#ec .control .menuList .listItem.active button {
  color: #B0B2AF;
}
header#ec .spButtonList {
  width: calc(100% - 65px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
  margin: 0 auto;
}
header#ec .spButtonList button {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 4px;
  padding: 5px 15px;
  background-color: #fff;
  border-radius: 5px;
  transition: background-color 0.35s;
}
header#ec .spButtonList button.active {
  background-color: #EEF0F2;
}
header#ec .spButtonList button svg {
  height: 19px;
}
header#ec .spButtonList button span {
  font-size: 10px;
  color: #B0B2AF;
  line-height: 1;
  text-align: center;
}
header#ec .spDetailButtonList {
  width: calc(100% - 53px);
  display: grid;
  margin: 0 auto;
  margin-left: 0;
  grid-template-columns: auto auto auto;
  align-items: center;
  column-gap: 10px;
}
header#ec .spDetailButtonList svg {
  width: auto;
  height: var(--font17);
  aspect-ratio: 1/1;
}
header#ec .spDetailButtonList .back {
  width: clamp(33px, 0px + 8.8vw, 67.76px);
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EEF0F2;
}
header#ec .spDetailButtonList .back svg {
  transform: rotateY(180deg);
}
header#ec .spDetailButtonList .lump {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 5px;
  align-items: center;
  justify-content: start;
}
header#ec .spDetailButtonList .lump .cartBtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--p-margin);
  padding: 13px var(--font20);
  background-color: #1c1c1c;
  text-align: center;
  border-radius: 5px;
  transition: background-color 0.5s;
  border: #b0b2af solid 1px;
}
header#ec .spDetailButtonList .lump .cartBtn.inactive {
  pointer-events: none;
  background-color: #b0b2af;
}
header#ec .spDetailButtonList .lump .cartBtn img {
  width: var(--base_font);
  height: var(--base_font);
  object-fit: contain;
  margin-right: 7px;
  transition: transform 0.35s, opacity 0.35s;
}
header#ec .spDetailButtonList .lump .cartBtn img:last-child {
  height: 18px;
  margin-right: 0;
  margin-left: 5px;
}
header#ec .spDetailButtonList .lump .cartBtn span {
  font-size: var(--font12);
  line-height: 1;
  color: #fff;
  transition: color 0.35s, transform 0.35s;
}
header#ec .spDetailButtonList .lump .cartBtn:hover {
  background-color: #b0b2af;
}
header#ec .spDetailButtonList .lump .fav {
  width: var(--width27);
  height: var(--width27);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
header#ec .spDetailButtonList .lump .fav svg {
  fill: #B0B2AF;
}
header#ec .spDetailButtonList .lump .fav.active svg {
  fill: #1C1C1C;
}
header#ec .spDetailButtonList #sofa {
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px var(--font12);
  background-color: #fff;
  border-radius: 5px;
  transition: background-color 0.35s;
}
header#ec .spDetailButtonList #sofa span {
  display: inline-block;
  font-size: var(--font11);
}
header#ec .spDetailButtonList #sofa.active {
  background-color: #DADDD8;
}
header#ec .inside {
  position: fixed;
  top: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s, visibility 0.35s, z-index 0.35s;
}
header#ec .inside .insideOther {
  grid-area: 1/3/3/4;
  justify-self: flex-end;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
header#ec .inside .insideOther .otherTop {
  display: grid;
  grid-auto-rows: auto;
  row-gap: clamp(15px, 12.258px + 0.645vw, 20px);
  justify-items: end;
}
header#ec .inside .insideOther .otherBottom {
  display: grid;
  grid-auto-rows: auto;
  row-gap: var(--base_font);
  justify-items: end;
}
header#ec .linkIcon a {
  display: flex;
  align-items: center;
  column-gap: 5px;
  font-size: var(--base_font);
}
header#ec .linkIcon a:hover svg {
  fill: #B0B2AF;
}
header#ec .linkIcon svg {
  height: var(--font14);
  width: auto;
  aspect-ratio: 1/1;
  transition: fill 0.35s;
}
@media screen and (min-width: 770px) {
  header#ec .pcInside {
    width: fit-content;
    height: calc(100% - 65px);
    max-width: clamp(900px, 291.2px + 50.733vw, 1265.28px);
    padding: clamp(20px, 3.548px + 3.871vw, 35px) clamp(15px, -4.194px + 4.516vw, 50px);
    border-radius: 30px;
    border: solid 1px #B0B2AF;
    grid-template-columns: 1fr 1fr auto;
    grid-template-rows: auto auto auto;
    column-gap: var(--list_margin);
    row-gap: var(--font25);
    margin: 0 auto;
    align-items: start;
    display: grid;
    top: 55px;
    right: 10px;
    background-color: #fff;
    z-index: -1;
    justify-content: start;
    overflow: scroll;
  }
  header#ec .pcInside::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  header#ec .pcInside.active {
    visibility: visible;
    opacity: 1;
    z-index: 5;
  }
  header#ec .pcInside .product {
    grid-area: 1/1/4/2;
  }
  header#ec .pcInside .content {
    grid-area: 1/2/2/3;
  }
  header#ec .pcInside .shoppingGuide {
    grid-area: 2/2/3/3;
  }
  header#ec .pcInside .supportArea {
    grid-area: 3/2/4/3;
  }
  header#ec .pcInside .insideOther {
    grid-area: 1/3/4/4;
  }
  header#ec .pcInside .snsBox {
    justify-self: end;
  }
}
header#ec .spInside {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scrollbar-width: thin;
  max-width: 770px;
  margin: 0 auto;
  padding: 85px 0 35px;
  background-color: #fff;
  z-index: 4;
}
header#ec .spInside .group {
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: height 0.3s, opacity 0.3s, visibility 0.3s;
}
header#ec .spInside .active .group {
  height: auto;
  opacity: 1;
  visibility: visible;
  padding-top: clamp(20px, 5.333px + 1.222vw, 28.8px);
}
header#ec .spInside .active .headline button::after {
  opacity: 0;
  transform: rotate(90deg);
}
@media screen and (max-width: 770px) {
  header#ec .spInside.active {
    display: block;
    visibility: visible;
    opacity: 1;
  }
  header#ec .spInside .container {
    display: grid;
    grid-template-rows: auto auto auto;
    row-gap: 40px;
  }
  header#ec .spInside .spTop ul {
    display: flex;
    align-items: center;
  }
  header#ec .spInside .spTop ul li {
    width: 50%;
    border-right: #DADDD8 solid 2px;
  }
  header#ec .spInside .spTop ul li:last-child {
    border-right: transparent;
  }
  header#ec .spInside .spTop ul a {
    width: 100%;
    justify-content: center;
  }
  header#ec .spInside .spMiddle {
    display: grid;
    grid-template-rows: auto auto auto;
    row-gap: 35px;
  }
  header#ec .spInside .spBottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    row-gap: clamp(20px, 5.333px + 1.222vw, 28.8px);
    justify-items: start;
  }
  header#ec .spInside .spBottom .announce {
    justify-items: start;
  }
  header#ec .spInside .spBottom .freePhone {
    grid-area: 1/1/2/2;
  }
  header#ec .spInside .spBottom .linkIcon {
    grid-area: 1/2/2/3;
    justify-items: end;
    display: grid;
    grid-auto-rows: auto;
    row-gap: 15px;
    align-content: start;
    justify-self: end;
  }
  header#ec .spInside .spBottom .snsBox {
    grid-area: 2/1/3/3;
    justify-self: center;
    align-items: center;
    justify-content: center;
  }
}
header#ec .pcSurface {
  display: block;
  visibility: visible;
}
@media screen and (max-width: 770px) {
  header#ec .pcSurface {
    display: none;
    visibility: hidden;
  }
}
header#ec .spSurface {
  display: none;
  visibility: hidden;
}
@media screen and (max-width: 770px) {
  header#ec .spSurface {
    display: block;
    visibility: visible;
  }
}
header#ec .spSurfaceBottom {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 3;
  background-color: #fff;
  border-radius: 15px 15px 0 0;
  transition: opacity 0.35s ease-out, visibility 0.35s, transform 0.5s ease-out;
}
header#ec .spSurfaceBottom .control {
  padding: 8px 0;
}
header#ec .spTabInside {
  width: 100vw;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  background-color: #fff;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
  }
}
header#ec .spTabInside .fade-in {
  animation: fadeIn 0.3s ease-in-out forwards;
  opacity: 0;
  /* 初期状態は透明 */
}
header#ec .spTabInside .fade-out {
  animation: fadeOut 0.18s ease-in-out forwards;
  opacity: 1;
}
header#ec .spTabInside .tabBody {
  width: 100%;
  position: relative;
  will-change: height;
  height: 0;
  transition: height 0.5s;
  z-index: 0;
}
header#ec .spTabInside .tabBody.active {
  height: auto;
}
header#ec .spTabInside .tabBody .box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  overflow-y: hidden;
  overflow-x: scroll;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  transition: visibility 0.5s ease-in-out, opacity 0.5s ease-in-out;
  visibility: hidden;
  opacity: 0;
  will-change: opacity, visibility;
  scroll-behavior: smooth;
  scrollbar-color: #DADDD8 #EEF0F2;
  padding-top: 15px;
  padding-bottom: 10px;
  z-index: -1;
}
header#ec .spTabInside .tabBody .box.active {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}
header#ec .spTabInside .tabBody .box > li {
  width: fit-content;
}
header#ec .spTabInside .tabBody .box ul {
  height: 50vh;
  display: grid;
  grid-template-rows: auto;
  grid-auto-rows: auto;
  row-gap: 10px;
  overflow-y: scroll;
  scrollbar-width: thin;
  justify-content: start;
  align-content: start;
  padding: 10px;
  background-color: #fff;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scrollbar-color: #DADDD8 #EEF0F2;
}
header#ec .spTabInside .tabBody .box ul::-webkit-scrollbar {
  width: 3px;
  background-color: #EEF0F2;
}
header#ec .spTabInside .tabBody .box ul::-webkit-scrollbar-thumb {
  background-color: #DADDD8;
  border-radius: 10px;
}
header#ec .spTabInside .tabBody .box ul button,
header#ec .spTabInside .tabBody .box ul a {
  width: 100%;
  padding: 5px 10px;
  background-color: #fff;
  border-radius: 5px;
  transition: background-color 0.2s;
}
header#ec .spTabInside .tabBody .box ul button.active,
header#ec .spTabInside .tabBody .box ul a.active {
  background-color: #EEF0F2;
}
header#ec .spTabInside .tabBody .box ul button svg,
header#ec .spTabInside .tabBody .box ul a svg {
  height: 19px;
  width: auto;
  aspect-ratio: 32/17;
}
header#ec .spTabInside .tabBody .box ul button span,
header#ec .spTabInside .tabBody .box ul a span {
  line-height: 1;
}
header#ec .spTabInside .tabBody .box ul li {
  display: flex;
  align-items: center;
}
header#ec .spTabInside .tabBody .box ul.first button {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 4px;
  align-items: center;
  justify-items: center;
}
header#ec .spTabInside .tabBody .box ul.first button span {
  font-size: 10px;
  text-align: center;
}
header#ec .spTabInside .tabBody .box ul.second button,
header#ec .spTabInside .tabBody .box ul.second a {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 6.5px;
  align-items: center;
  justify-content: start;
}
header#ec .spTabInside .tabBody .box ul.second button .img,
header#ec .spTabInside .tabBody .box ul.second a .img {
  width: 33px;
  height: auto;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 50%;
  background-color: #FAFAFF;
}
header#ec .spTabInside .tabBody .box ul.second button .img img,
header#ec .spTabInside .tabBody .box ul.second a .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
header#ec .spTabInside .tabBody .box ul.second button .text,
header#ec .spTabInside .tabBody .box ul.second a .text {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 2px;
  justify-items: start;
  align-content: start;
}
header#ec .spTabInside .tabBody .box ul.second button .text div,
header#ec .spTabInside .tabBody .box ul.second a .text div {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
}
header#ec .spTabInside .tabBody .box ul.second button .text span,
header#ec .spTabInside .tabBody .box ul.second a .text span {
  font-size: var(--font12);
  white-space: nowrap;
}
header#ec .spTabInside .tabBody .box ul.second button .text span.bold,
header#ec .spTabInside .tabBody .box ul.second a .text span.bold {
  font-size: 9px;
}
header#ec .spTabInside .tabBody .box ul.second button .text small,
header#ec .spTabInside .tabBody .box ul.second a .text small {
  display: block;
  font-size: 9px;
  margin-left: 3px;
}
header#ec .spTabInside .tabBody .box ul.third a {
  white-space: nowrap;
}
header#ec .spTabInside .tabBody .box ul.third a:hover {
  color: #B0B2AF;
}
header#ec .spTabInside .tabBody .box.sofa {
  padding-left: 13px;
}
header#ec .spTabInside .tabBody .box.material {
  padding-left: 13px;
}
header#ec .spTabInside .tabBody .box.material ul.first button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
}
header#ec .spTabInside .tabBody .box.material ul.first button span {
  font-size: 14px;
  text-align: center;
}
header#ec .spTabInside .tabBody .box.material ul.second a .img img {
  object-fit: cover;
}
header#ec .spTabInside .tabBody .box.content {
  grid-template-columns: 100%;
  grid-template-rows: auto;
}
header#ec .spTabInside .tabBody .box.content li {
  width: 100%;
  height: fit-content;
  display: grid;
  padding-left: 15px;
  padding-right: 15px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
}
header#ec .spTabInside .tabBody .box.content a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 15px;
  border-bottom: #DADDD8 solid 1px;
}
header#ec .spTabInside .tabBody .box.content a:nth-of-type(odd) {
  border-right: #DADDD8 solid 1px;
}
header#ec .spTabInside .tabBody .box.content a:nth-last-of-type(-n + 2) {
  border-bottom: transparent;
}
header#ec .spTabInside .tabBody .subHeadline {
  position: absolute;
  font-size: 10px;
  writing-mode: vertical-lr;
  color: #B0B2AF;
  top: 15px;
  left: 5px;
}
header#ec .spTabInside .tabBody .mainBtn {
  position: fixed;
  bottom: 65px;
  right: 10px;
  z-index: 1;
}
header#ec .spTabInside .tabBody .mainBtn .base_btn {
  background-color: #fff;
}
header#ec .spTabInside .tabBody .mainBtn span {
  font-size: var(--font12);
}

footer#ec {
  padding: var(--block_margin) 0 var(--list_margin);
  background-color: #EEF0F2;
}
footer#ec svg {
  height: auto;
}
footer#ec .logo {
  width: max(112px, 8.2dvw);
  aspect-ratio: 97/36;
  padding: 3px 0 0;
}
@media screen and (max-width: 770px) {
  footer#ec .logo {
    width: max(93px, 24.8dvw);
  }
}
footer#ec .headline h3 {
  background-color: #EEF0F2;
}
footer#ec .childEle .subHeadline {
  background-color: #daddd8;
}
footer#ec .freePhone .announce {
  justify-items: start;
}
footer#ec .innnerBox {
  position: relative;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(6, auto);
  grid-template-rows: repeat(8, auto);
  column-gap: var(--margin40);
  justify-content: end;
  justify-items: end;
}
@media screen and (max-width: 770px) {
  footer#ec .innnerBox {
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    grid-auto-rows: auto;
    justify-content: center;
    justify-items: center;
    column-gap: var(--base_font);
  }
}
footer#ec .logoBox {
  grid-area: 1/1/2/2;
  align-self: start;
}
footer#ec .logoBox svg {
  aspect-ratio: 97/36;
}
@media screen and (max-width: 1000px) {
  footer#ec .logoBox {
    margin-bottom: var(--margin40);
    grid-area: 1/1/2/3;
    justify-self: start;
  }
}
@media screen and (max-width: 770px) {
  footer#ec .logoBox {
    grid-area: 1/1/2/2;
  }
}
footer#ec .snsBox {
  grid-area: 1/6/2/7;
  align-self: start;
  column-gap: var(--font11);
}
@media screen and (max-width: 770px) {
  footer#ec .snsBox {
    grid-area: 1/2/2/3;
    justify-self: end;
  }
}
footer#ec .contactList {
  grid-area: 4/2/6/3;
  justify-self: start;
}
@media screen and (max-width: 1000px) {
  footer#ec .contactList {
    grid-area: 4/1/6/3;
  }
}
@media screen and (max-width: 770px) {
  footer#ec .contactList {
    grid-area: 2/1/4/2;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: start;
  }
}
footer#ec .calendar-wrapper {
  grid-area: 1/2/4/3;
  margin-bottom: var(--list_margin);
}
@media screen and (max-width: 1000px) {
  footer#ec .calendar-wrapper {
    justify-self: start;
    grid-area: 2/1/4/3;
  }
}
@media screen and (max-width: 770px) {
  footer#ec .calendar-wrapper {
    justify-self: end;
    grid-area: 2/2/4/3;
  }
}
footer#ec .blankLink {
  grid-area: 2/6/3/7;
}
@media screen and (max-width: 770px) {
  footer#ec .blankLink {
    grid-area: 5/1/6/3;
    margin-bottom: var(--list_margin);
  }
}
footer#ec .paymentMethod {
  grid-area: 7/5/8/7;
  display: flex;
  justify-content: center;
  justify-self: end;
}
footer#ec .paymentMethod .img {
  width: 100%;
  max-width: clamp(250px, 81.067px + 14.078vw, 351.36px);
  height: auto;
}
@media screen and (max-width: 770px) {
  footer#ec .paymentMethod {
    width: 100%;
    grid-area: 6/1/7/3;
    margin-bottom: var(--list_margin);
  }
}
footer#ec .litleLink {
  grid-area: 7/1/8/5;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  justify-content: start;
  gap: var(--base_font);
}
@media screen and (max-width: 770px) {
  footer#ec .litleLink {
    grid-area: 7/1/8/3;
    justify-items: center;
    justify-content: center;
    margin-bottom: var(--list_margin);
  }
}
footer#ec .copyRight {
  grid-area: 8/6/9/7;
}
@media screen and (max-width: 770px) {
  footer#ec .copyRight {
    grid-area: 8/1/9/3;
  }
}
footer#ec .siteLinkList {
  grid-area: 1/3/7/6;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: var(--font20);
  row-gap: var(--font20);
  align-content: start;
  align-items: start;
  grid-auto-rows: auto;
  margin-bottom: var(--list_margin);
}
@media screen and (max-width: 1000px) {
  footer#ec .siteLinkList {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 770px) {
  footer#ec .siteLinkList {
    grid-area: 4/1/5/3;
  }
}
footer#ec .siteLinkList a:hover {
  color: #B0B2AF;
}
footer#ec .siteLinkList dd a {
  display: block;
  font-size: var(--font12);
  line-height: 1.45;
}
footer#ec .siteLinkList .product {
  grid-area: 1/1/4/2;
}
@media screen and (max-width: 1000px) {
  footer#ec .siteLinkList .product {
    grid-area: 1/1/2/2;
  }
}
footer#ec .siteLinkList .content {
  grid-area: 1/2/2/3;
}
@media screen and (max-width: 1000px) {
  footer#ec .siteLinkList .content {
    grid-area: 2/1/3/2;
  }
}
footer#ec .siteLinkList .shoppingGuide {
  grid-area: 2/2/3/3;
}
@media screen and (max-width: 1000px) {
  footer#ec .siteLinkList .shoppingGuide {
    grid-area: 3/1/4/2;
  }
}
footer#ec .siteLinkList .supportArea {
  grid-area: 3/2/4/3;
}
@media screen and (max-width: 1000px) {
  footer#ec .siteLinkList .supportArea {
    grid-area: 4/1/5/2;
  }
}

header#cr,
footer#cr {
  transition: opacity ease 0.5s, visibility ease 0.5s;
}
header#cr .menuButton button span,
footer#cr .menuButton button span {
  background-color: var(--header-text-color, #1C1C1C);
}
@media screen and (max-width: 770px) {
  header#cr .basic .logo svg,
  footer#cr .basic .logo svg {
    fill: #1C1C1C;
  }
  header#cr .basic .surfaceBlock *,
  footer#cr .basic .surfaceBlock * {
    color: #1C1C1C;
  }
  header#cr .basic .menuButton button span,
  footer#cr .basic .menuButton button span {
    background-color: #1C1C1C;
    transition: background-color 0.35s;
  }
  header#cr .basic .menuButton button:hover span,
  footer#cr .basic .menuButton button:hover span {
    background-color: #B0B2AF;
  }
  header#cr .basic .spButtonBlock,
  footer#cr .basic .spButtonBlock {
    opacity: 0;
    visibility: hidden;
  }
}
header#cr a:hover svg,
footer#cr a:hover svg {
  fill: #B0B2AF;
}
header#cr .surfaceBlock,
footer#cr .surfaceBlock {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  transition: opacity 0.35s, visibility 0.35s;
  z-index: 3;
}
header#cr .surfaceBlock.hidden,
footer#cr .surfaceBlock.hidden {
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}
header#cr .surfaceTop,
footer#cr .surfaceTop {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--base_font) var(--font20);
}
@media screen and (max-width: 770px) {
  header#cr .surfaceTop,
  footer#cr .surfaceTop {
    padding: 3.5%;
  }
}
header#cr .surfaceTop .logo,
footer#cr .surfaceTop .logo {
  width: max(112px, 8.2dvw);
  aspect-ratio: 97/36;
  padding: 3px 0 0;
}
@media screen and (max-width: 770px) {
  header#cr .surfaceTop .logo,
  footer#cr .surfaceTop .logo {
    width: max(93px, 24.8dvw);
  }
}
header#cr .surfaceTop .online,
footer#cr .surfaceTop .online {
  width: max(33px, 8.8dvw);
  height: auto;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}
header#cr .surfaceTop .online svg,
footer#cr .surfaceTop .online svg {
  fill: var(--header-text-color, #1C1C1C);
}
header#cr .surfaceTop .online:hover svg,
footer#cr .surfaceTop .online:hover svg {
  fill: #B0B2AF;
}
header#cr .surfaceSide,
footer#cr .surfaceSide {
  width: fit-content;
  text-align: right;
  padding-right: var(--font20);
  display: flex;
  flex-direction: column;
  align-items: end;
  transition: opacity ease 0.5s, visibility ease 0.5s;
  z-index: 4;
  margin: 0 auto;
  margin-right: 0;
}
header#cr .surfaceSide.hidden,
footer#cr .surfaceSide.hidden {
  visibility: hidden;
  opacity: 0;
  z-index: -1;
  position: fixed;
}
header#cr .surfaceSide h5,
header#cr .surfaceSide p,
header#cr .surfaceSide span,
header#cr .surfaceSide a,
footer#cr .surfaceSide h5,
footer#cr .surfaceSide p,
footer#cr .surfaceSide span,
footer#cr .surfaceSide a {
  color: var(--header-text-color, #1C1C1C);
}
header#cr .surfaceSide button:hover,
header#cr .surfaceSide a:hover,
footer#cr .surfaceSide button:hover,
footer#cr .surfaceSide a:hover {
  color: #B0B2AF;
}
header#cr .surfaceSide button:hover span,
header#cr .surfaceSide a:hover span,
footer#cr .surfaceSide button:hover span,
footer#cr .surfaceSide a:hover span {
  color: #B0B2AF;
}
header#cr .surfaceSide svg,
footer#cr .surfaceSide svg {
  fill: var(--header-text-color, #1C1C1C);
}
@media screen and (max-width: 770px) {
  header#cr .surfaceSide,
  footer#cr .surfaceSide {
    visibility: hidden;
    opacity: 0;
    display: none;
  }
}
header#cr .menuBlock,
header#cr .formBlock,
header#cr .innerMenu,
footer#cr .menuBlock,
footer#cr .formBlock,
footer#cr .innerMenu {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-auto-rows: auto;
  row-gap: var(--font17);
  margin-right: 0;
  justify-content: end;
  justify-items: end;
}
header#cr .menuBlock,
footer#cr .menuBlock {
  width: fit-content;
  padding-bottom: var(--base_font);
  margin-bottom: var(--base_font);
  z-index: 0;
}
header#cr .menuBlock .item,
footer#cr .menuBlock .item {
  width: 100%;
  position: relative;
  line-height: 1;
}
header#cr .menuBlock .item .innerMenu,
footer#cr .menuBlock .item .innerMenu {
  visibility: hidden;
  opacity: 0;
  width: fit-content;
  position: absolute;
  top: 100%;
  right: 30%;
  padding: var(--font25);
  row-gap: var(--font20);
  z-index: 1;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(3px) brightness(1.1);
  transition: opacity 0.35s, visibility 0.35s;
}
header#cr .menuBlock .item .innerMenu h5,
header#cr .menuBlock .item .innerMenu a,
footer#cr .menuBlock .item .innerMenu h5,
footer#cr .menuBlock .item .innerMenu a {
  color: #1C1C1C;
}
header#cr .menuBlock .item .innerMenu h5,
footer#cr .menuBlock .item .innerMenu h5 {
  line-height: 1;
  font-size: var(--small_font);
}
header#cr .menuBlock .item .innerMenu a,
footer#cr .menuBlock .item .innerMenu a {
  font-size: var(--base_font);
  white-space: nowrap;
}
header#cr .menuBlock .item.active .innerMenu,
footer#cr .menuBlock .item.active .innerMenu {
  visibility: visible;
  opacity: 1;
}
header#cr .menuBlock button,
footer#cr .menuBlock button {
  width: 100%;
}
header#cr .menuBlock button span,
footer#cr .menuBlock button span {
  display: block;
  line-height: 1;
}
header#cr .formBlock li,
footer#cr .formBlock li {
  line-height: 1;
}
header#cr .formBlock a,
footer#cr .formBlock a {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: clamp(4px, 3.296px + 0.188vw, 6px);
  justify-content: end;
  align-items: center;
}
header#cr .formBlock a svg,
footer#cr .formBlock a svg {
  width: var(--font17);
  height: auto;
  aspect-ratio: 1/1;
  object-fit: contain;
}
header#cr .pcButtonBlock,
footer#cr .pcButtonBlock {
  position: fixed;
  bottom: var(--font20);
  right: var(--font20);
  z-index: 3;
}
header#cr .pcButtonBlock .base_btn,
footer#cr .pcButtonBlock .base_btn {
  padding: 0.58em 1.2em;
}
header#cr .pcButtonBlock .base_btn span,
footer#cr .pcButtonBlock .base_btn span {
  color: var(--header-text-color, #1C1C1C);
}
header#cr .pcButtonBlock .base_btn svg,
footer#cr .pcButtonBlock .base_btn svg {
  width: var(--base_font);
  height: var(--base_font);
  margin-right: var(--font07);
  fill: var(--header-text-color, #1C1C1C);
}
@media screen and (max-width: 770px) {
  header#cr .pcButtonBlock,
  footer#cr .pcButtonBlock {
    display: none;
    visibility: hidden;
  }
}
header#cr .inside,
footer#cr .inside {
  position: fixed;
  top: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s, visibility 0.35s, z-index 0.35s;
}
header#cr .inside *,
footer#cr .inside * {
  color: #1C1C1C;
  fill: #1C1C1C;
}
header#cr .inside * a:hover,
footer#cr .inside * a:hover {
  color: #B0B2AF;
}
header#cr .inside * a:hover svg,
footer#cr .inside * a:hover svg {
  opacity: 0.6;
}
header#cr .inside dl,
footer#cr .inside dl {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: var(--base_font);
}
header#cr .inside dl dt,
footer#cr .inside dl dt {
  display: flex;
  align-items: center;
}
header#cr .inside dl dt button,
footer#cr .inside dl dt button {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  background-color: #fff;
  margin-right: var(--list_margin);
}
header#cr .inside dl dt button::after, header#cr .inside dl dt button::before,
footer#cr .inside dl dt button::after,
footer#cr .inside dl dt button::before {
  position: absolute;
  content: "";
  background-color: #1c1c1c;
  transition: opacity 0.25s, transform 0.25s;
}
header#cr .inside dl dt button::before,
footer#cr .inside dl dt button::before {
  width: 15px;
  height: 1px;
  top: 7px;
  right: 0;
}
header#cr .inside dl dt button::after,
footer#cr .inside dl dt button::after {
  width: 1px;
  height: 15px;
  top: 0;
  right: 7px;
}
header#cr .inside dl dd,
footer#cr .inside dl dd {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, calc(50% - var(--base_font) / 2));
  grid-auto-rows: auto;
  align-items: start;
  align-content: start;
  gap: var(--base_font);
  transition: padding-top 0.35s, height 0.35s, opacity 0.35s;
}
header#cr .inside dl dd a,
footer#cr .inside dl dd a {
  font-size: var(--small_font);
  display: block;
  line-height: 1.56;
}
@media screen and (max-width: 770px) {
  header#cr .inside dl dd a,
  footer#cr .inside dl dd a {
    font-size: var(--base_font);
  }
}
header#cr .inside dl.active dt button::after,
footer#cr .inside dl.active dt button::after {
  opacity: 0;
  transform: rotate(90deg);
}
header#cr .inside dl.active dd,
footer#cr .inside dl.active dd {
  padding-top: clamp(20px, 5.333px + 1.222vw, 28.8px);
}
header#cr .inside .atentionBlock a,
footer#cr .inside .atentionBlock a {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  font-size: var(--font14);
}
@media screen and (max-width: 770px) {
  header#cr .inside .atentionBlock a,
  footer#cr .inside .atentionBlock a {
    font-size: var(--base_font);
  }
}
header#cr .inside .atentionBlock a::after,
footer#cr .inside .atentionBlock a::after {
  position: absolute;
  content: "";
  display: block;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
header#cr .inside .atentionBlock a svg,
footer#cr .inside .atentionBlock a svg {
  aspect-ratio: 1/1;
  width: auto;
  height: var(--font17);
  margin-right: clamp(4px, 3.296px + 0.188vw, 6px);
  object-fit: contain;
}
header#cr .headline,
footer#cr .headline {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  z-index: 0;
}
header#cr .headline::after,
footer#cr .headline::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #DADDD8;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: -1;
}
header#cr .headline h3,
header#cr .headline span,
footer#cr .headline h3,
footer#cr .headline span {
  display: block;
  width: fit-content;
  background-color: #fff;
  z-index: 1;
  position: relative;
}
header#cr .headline h3,
footer#cr .headline h3 {
  font-size: var(--header_ec_en_font);
  padding-right: var(--base_font);
}
header#cr .headline span,
footer#cr .headline span {
  font-size: var(--small_font);
  padding-left: var(--base_font);
}
header#cr :root,
footer#cr :root {
  --point35: calc(clamp(15px, -4.194px + 4.516vw, 50px) * 2);
}
header#cr .pcInside,
footer#cr .pcInside {
  display: none;
}
@media screen and (min-width: 770px) {
  header#cr .pcInside,
  footer#cr .pcInside {
    width: fit-content;
    width: clamp(780px, 1.455px + 60.289vw, 1159px);
    padding: var(--margin40);
    border-radius: var(--font07);
    grid-template-columns: 1fr 1fr auto;
    grid-template-rows: repeat(2, auto);
    column-gap: var(--list_margin);
    row-gap: var(--list_margin);
    margin: 0 auto;
    align-items: start;
    display: grid;
    top: 65px;
    right: 10px;
    background-color: #ffffff;
    border: #DADDD8 1px solid;
    z-index: -1;
  }
  header#cr .pcInside.active,
  footer#cr .pcInside.active {
    visibility: visible;
    opacity: 1;
    z-index: 4;
  }
  header#cr .pcInside .about,
  footer#cr .pcInside .about {
    grid-area: 1/1/2/2;
  }
  header#cr .pcInside .product,
  footer#cr .pcInside .product {
    grid-area: 2/1/3/2;
  }
  header#cr .pcInside .showroom,
  footer#cr .pcInside .showroom {
    grid-area: 3/1/4/2;
  }
  header#cr .pcInside .activity,
  footer#cr .pcInside .activity {
    grid-area: 1/2/2/3;
  }
  header#cr .pcInside .service,
  footer#cr .pcInside .service {
    grid-area: 2/2/4/3;
  }
  header#cr .pcInside .atentionBlock,
  footer#cr .pcInside .atentionBlock {
    grid-area: 1/3/2/4;
    display: grid;
    grid-template-rows: repeat(3, auto);
    justify-self: end;
    align-self: start;
    justify-content: end;
    row-gap: var(--base_font);
  }
  header#cr .pcInside .atentionBlock a,
  footer#cr .pcInside .atentionBlock a {
    width: 100%;
    justify-content: flex-end;
  }
  header#cr .pcInside .rightBottom,
  footer#cr .pcInside .rightBottom {
    grid-area: 3/3/4/4;
    width: fit-content;
    justify-items: end;
    justify-self: end;
    align-self: end;
    display: grid;
    row-gap: var(--base_font);
  }
}
header#cr .spInside,
footer#cr .spInside {
  width: 100%;
  height: 100dvh;
  overflow-y: scroll;
  scrollbar-width: thin;
  max-width: 770px;
  margin: 0 auto;
  padding: calc(17.8dvw + 10px) 0 35px;
  background-color: #fff;
  z-index: 2;
  transition: opacity 0.35s, visibility 0.35s;
}
header#cr .spInside dd,
footer#cr .spInside dd {
  height: 0;
  overflow: hidden;
  opacity: 0;
}
@media screen and (max-width: 770px) {
  header#cr .spInside.active,
  footer#cr .spInside.active {
    visibility: visible;
    opacity: 1;
  }
  header#cr .spInside dl.active dd,
  footer#cr .spInside dl.active dd {
    height: auto;
    opacity: 1;
  }
  header#cr .spInside .container,
  footer#cr .spInside .container {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(7, auto);
    row-gap: 40px;
  }
  header#cr .spInside .flexRow,
  footer#cr .spInside .flexRow {
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: space-between;
    justify-items: start;
  }
  header#cr .spInside .flexRow .atentionBlock,
  footer#cr .spInside .flexRow .atentionBlock {
    justify-self: start;
    display: grid;
    grid-template-rows: repeat(3, auto);
    justify-items: start;
    justify-content: start;
    row-gap: var(--small_font);
  }
  header#cr .spInside .flexRow .atentionBlock a,
  footer#cr .spInside .flexRow .atentionBlock a {
    width: fit-content;
    padding-right: var(--base_font);
  }
  header#cr .spInside .flexRow .atentionBlock a::after,
  footer#cr .spInside .flexRow .atentionBlock a::after {
    width: var(--font11);
    height: var(--font11);
    border-right: #DADDD8 solid 1px;
    border-top: #DADDD8 solid 1px;
    transform: rotate(45deg) translateY(-50%);
  }
  header#cr .spInside .flexRow .freePhone,
  footer#cr .spInside .flexRow .freePhone {
    justify-self: end;
  }
}
header#cr .spButtonBlock,
footer#cr .spButtonBlock {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  display: none;
  visibility: hidden;
  transition: transform 0.35s;
}
@media screen and (max-width: 770px) {
  header#cr .spButtonBlock,
  footer#cr .spButtonBlock {
    visibility: visible;
    display: block;
  }
}
header#cr .spButtonBlock button,
footer#cr .spButtonBlock button {
  position: absolute;
  top: -10px;
  left: 50%;
  width: var(--small_font);
  height: var(--small_font);
  transform: translateX(-50%) rotate(315deg);
  border-top: #DADDD8 1px solid;
  border-right: #DADDD8 1px solid;
  z-index: 3;
  transition: top 0.35s;
}
header#cr .spButtonBlock .btnBlock,
footer#cr .spButtonBlock .btnBlock {
  width: 100%;
  height: auto;
  opacity: 1;
  display: grid;
  grid-template-columns: repeat(2, 50%);
  z-index: 2;
  transform: scaleY(1);
  transform-origin: bottom left;
  transition: opacity 0.35s, transform 0.35s;
}
header#cr .spButtonBlock.down .btnBlock,
footer#cr .spButtonBlock.down .btnBlock {
  opacity: 0;
  transform-origin: bottom left;
  transform: scaleY(0);
}
header#cr .spButtonBlock.down button,
footer#cr .spButtonBlock.down button {
  top: -20px;
  transform: translateX(-50%) rotate(130deg);
}
header#cr .spButtonBlock::before,
footer#cr .spButtonBlock::before {
  content: "";
  position: absolute;
}
header#cr .spButtonBlock::before,
footer#cr .spButtonBlock::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 100% 0);
  z-index: -1;
  border-top: #DADDD8 solid 1px;
  clip-path: polygon(43% 0, 0 0, 0 100%, 100% 100%, 100% 0, 57% 0, 57% 14%, 43% 14%);
}
header#cr .spButtonBlock svg,
footer#cr .spButtonBlock svg {
  width: var(--font16);
  height: auto;
  aspect-ratio: 1/1;
  object-fit: contain;
  margin-right: clamp(4px, 3.296px + 0.188vw, 6px);
  fill: var(--header-text-color, #1C1C1C);
}
header#cr .spButtonBlock a,
footer#cr .spButtonBlock a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: center;
  position: relative;
  padding: 0.63em 0;
  font-size: var(--small_font);
  color: var(--header-text-color, #1C1C1C);
}
header#cr .spButtonBlock a::after,
footer#cr .spButtonBlock a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: block;
  width: 1px;
  height: var(--small_font);
  background-color: #DADDD8;
}
header#cr .spButtonBlock a:last-of-type::after,
footer#cr .spButtonBlock a:last-of-type::after {
  background-color: transparent;
}

footer#cr {
  background-color: #EEF0F2;
  padding: var(--title_margin) 0 var(--list_margin);
}
footer#cr .footerLump {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: repeat(4, auto);
  column-gap: var(--list_margin);
  row-gap: var(--title_margin);
}
@media screen and (max-width: 1000px) {
  footer#cr .footerLump {
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(7, auto);
  }
}
@media screen and (max-width: 770px) {
  footer#cr .footerLump {
    grid-template-columns: 33.333% 66.667%;
    grid-template-rows: repeat(8, auto);
    row-gap: var(--title_margin);
    column-gap: 0;
    justify-content: start;
  }
}
footer#cr .logo {
  grid-area: 1/1/2/2;
  width: max(112px, 8.2dvw);
  aspect-ratio: 97/36;
  justify-self: start;
}
footer#cr .logo svg {
  fill: #1C1C1C;
}
@media screen and (max-width: 770px) {
  footer#cr .logo {
    grid-area: 1/1/2/2;
    width: max(93px, 24.8dvw);
    padding: 3px 0 0;
  }
}
footer#cr .snsBox {
  justify-self: end;
  grid-area: 1/3/2/5;
}
@media screen and (max-width: 1000px) {
  footer#cr .snsBox {
    grid-area: 1/2/2/3;
  }
}
@media screen and (max-width: 770px) {
  footer#cr .snsBox {
    grid-area: 6/1/7/3;
    justify-self: center;
    justify-content: center;
  }
}
footer#cr .addressBox {
  justify-self: start;
  grid-area: 2/1/3/3;
}
footer#cr .addressBox p {
  font-size: var(--small_font);
}
@media screen and (max-width: 770px) {
  footer#cr .addressBox {
    grid-area: 1/2/2/3;
  }
}
footer#cr .contactList {
  width: 100%;
  justify-self: start;
  grid-area: 3/1/4/2;
}
@media screen and (max-width: 1000px) {
  footer#cr .contactList {
    grid-area: 3/1/4/2;
  }
}
@media screen and (max-width: 770px) {
  footer#cr .contactList {
    grid-area: 3/1/4/3;
  }
}
footer#cr .calendar-wrapper {
  justify-self: start;
  grid-area: 3/2/4/3;
}
@media screen and (max-width: 1000px) {
  footer#cr .calendar-wrapper {
    grid-area: 4/1/5/2;
  }
}
@media screen and (max-width: 770px) {
  footer#cr .calendar-wrapper {
    justify-self: center;
    grid-area: 2/1/3/3;
  }
}
footer#cr .menuLinkList {
  width: 100%;
  display: grid;
  column-gap: var(--font25);
  row-gap: var(--font25);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-auto-rows: auto;
  justify-self: start;
  grid-area: 2/3/4/4;
}
@media screen and (max-width: 1000px) {
  footer#cr .menuLinkList {
    width: 100%;
    grid-area: 2/2/5/3;
    grid-template-columns: 100%;
  }
}
@media screen and (max-width: 770px) {
  footer#cr .menuLinkList {
    width: 100%;
    grid-area: 4/1/5/3;
    grid-template-columns: 100%;
  }
}
@media screen and (min-width: 1001px) {
  footer#cr .menuLinkList .about {
    grid-area: 1/1/2/2;
  }
  footer#cr .menuLinkList .product {
    grid-area: 2/1/3/2;
  }
  footer#cr .menuLinkList .showroom {
    grid-area: 3/1/4/2;
  }
  footer#cr .menuLinkList .activity {
    grid-area: 1/2/2/3;
  }
  footer#cr .menuLinkList .service {
    grid-area: 2/2/4/3;
  }
}
footer#cr .menuLinkList dl {
  width: 100%;
  display: grid;
  grid-template-rows: auto auto;
  row-gap: var(--base_font);
  line-height: 1;
  align-content: start;
  justify-self: start;
}
footer#cr .menuLinkList dl dt {
  width: 100%;
  display: flex;
  align-items: center;
  line-height: 1;
  align-self: start;
}
footer#cr .menuLinkList dl dd {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, calc(50% - var(--base_font) / 2));
  grid-auto-rows: auto;
  align-items: start;
  align-content: start;
  align-self: start;
  gap: var(--base_font);
  transition: padding-top 0.35s, height 0.35s, opacity 0.35s;
}
footer#cr .menuLinkList dl dd a {
  font-size: var(--font12);
  display: block;
  line-height: 1.56;
}
footer#cr .blankLink {
  justify-self: end;
  grid-area: 2/4/4/5;
}
@media screen and (max-width: 1000px) {
  footer#cr .blankLink {
    grid-area: 5/1/6/3;
    justify-self: center;
  }
}
@media screen and (max-width: 770px) {
  footer#cr .blankLink {
    grid-area: 5/1/6/3;
    justify-self: center;
    justify-content: center;
  }
}
footer#cr .litleLink {
  grid-area: 4/1/5/4;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-items: center;
  align-items: start;
  gap: 15px;
}
@media screen and (max-width: 1000px) {
  footer#cr .litleLink {
    grid-area: 6/1/7/3;
    justify-content: center;
  }
}
@media screen and (max-width: 770px) {
  footer#cr .litleLink {
    grid-area: 7/1/8/3;
    justify-content: center;
  }
}
footer#cr .copyRight {
  justify-self: end;
  grid-area: 4/3/5/5;
}
@media screen and (max-width: 1000px) {
  footer#cr .copyRight {
    grid-area: 7/1/8/3;
    justify-self: center;
  }
}
@media screen and (max-width: 770px) {
  footer#cr .copyRight {
    grid-area: 8/1/9/3;
    justify-self: center;
  }
}
footer#cr .headline h3 {
  font-size: var(--font16);
}
footer#cr .headline span {
  margin-left: var(--base_font);
  white-space: nowrap;
  font-size: var(--font11);
}
footer#cr .headline h3,
footer#cr .headline span {
  background-color: #EEF0F2;
}
footer#cr .freePhone .announce {
  justify-items: start;
}/*# sourceMappingURL=base.css.map */