@charset "UTF-8";
:root {
  --section_margin: max(120px, 8.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);
  --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);
  --font23: clamp(23px, 6.933px + 1.339vw, 32.64px);
  --font43: clamp(38px, -0.000px + 3.15vw, 60.48px);
  --height47: clamp(26.5224px, 0.000px + 3.44vw, 66.048px);
  --width32: clamp(32px, 0.000px + 2.34vw, 44.928px);
  --margin70: clamp(39.4752px, 0.000px + 5.12vw, 98.304px);
  --brand-color01: #1C1C1C;
  --brand-color02: #B0B2AF;
  --brand-color03: #EEF0F2;
  --brand-color04: #ECEBE4;
}
@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);
    --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);
    --font20: clamp(16px, -0.024px + 4.273vw, 32.879px);
    --font25: clamp(21px, 0.000px + 5.6vw, 43.12px);
    --font43: clamp(38px, 0.024px + 10.127vw, 78.001px);
    --height47: clamp(47px, 0.024px + 12.527vw, 96.481px);
    --width32: clamp(32px, 0.024px + 8.527vw, 65.681px);
    --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);
  }
}

main {
  padding-top: max(97px, 7.55dvw);
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 0;
  /* 改行用 span はスマホだけブロックにする */
}
@media screen and (max-width: 770px) {
  main {
    padding-top: 22.54dvw;
  }
}
main img {
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
  transition: transform 0.6s;
}
main .container {
  width: 93%;
  margin: 0 auto;
}
@media screen and (min-width: 1200px) {
  main .container {
    max-width: 87.8dvw;
  }
}
main section {
  width: 100%;
  height: auto;
  margin-bottom: var(--section_margin);
}
main p,
main span,
main a {
  font-size: var(--base_font);
  transition: color 0.35s;
}
main small {
  display: block;
  transition: color 0.35s;
}
main a:hover h3,
main a:hover h5,
main a:hover p,
main a:hover span,
main a:hover small {
  color: #B0B2AF;
}
main .bigHeadline {
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--base_font);
  align-items: baseline;
  justify-content: start;
  justify-items: start;
}
main .bigHeadline h2 {
  font-size: var(--font43);
  color: #B0B2AF;
  line-height: 1;
  white-space: nowrap;
}
@media screen and (min-width: 1200px) {
  main .bigHeadline h2 {
    font-size: max(43px, 3.1dvw);
  }
}
main .bigHeadline span {
  font-size: var(--font14);
  line-height: 1;
  white-space: nowrap;
}
main .product_text {
  padding: var(--base_font) 10px;
}
main .product_text h5 {
  font-size: var(--font16);
}
main .product_text span {
  display: block;
  font-size: var(--small_font);
  margin-bottom: 6px;
}
main .product_text small {
  font-size: var(--small_font);
  line-height: 1;
}
main .fv .navWraper {
  width: 100%;
  display: grid;
  grid-template-columns: calc(64.9dvw - 30px) calc(35.1dvw - 30px);
  grid-template-rows: auto;
  column-gap: 15px;
  padding: 0 15px;
  margin-bottom: var(--font20);
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 770px) {
  main .fv .navWraper {
    grid-template-columns: 100%;
  }
}
main .fv .menuList {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
  justify-items: center;
  align-items: center;
}
@media screen and (max-width: 770px) {
  main .fv .menuList {
    display: none;
    opacity: 0;
  }
}
main .fv .menuList .listItem {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  border-right: #DADDD8 1px solid;
}
main .fv .menuList .listItem:last-of-type {
  border-right: transparent;
}
main .fv .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;
}
main .fv .menuList .listItem .childEle a,
main .fv .menuList .listItem .childEle li {
  font-size: var(--small_font);
}
@media screen and (min-width: 1366px) {
  main .fv .menuList .listItem .childEle a,
  main .fv .menuList .listItem .childEle li {
    font-size: max(13px, 0.81dvw);
  }
}
main .fv .menuList .listItem .childEle a:hover,
main .fv .menuList .listItem .childEle li:hover {
  color: #B0B2AF;
}
main .fv .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);
}
main .fv .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;
}
main .fv .menuList .listItem .childEle ul:last-child {
  margin-bottom: 0;
}
main .fv .menuList .listItem .childEle ul span.en {
  display: block;
  font-size: var(--font12);
  color: #B0B2AF;
}
main .fv .menuList .listItem.product dd {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--base_font);
}
main .fv .menuList .listItem.product dd .sofa {
  grid-area: 1/1/3/2;
}
main .fv .menuList .listItem.product dd .cover {
  grid-area: 1/2/2/3;
}
main .fv .menuList .listItem.product dd .cover ul:nth-of-type(2) {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  column-gap: 7px;
}
main .fv .menuList .listItem.product dd .cover ul:nth-of-type(2) span.en {
  grid-area: 1/1/2/5;
}
main .fv .menuList .listItem.product dd .cover ul:nth-of-type(2) a {
  text-decoration: underline;
}
main .fv .menuList .listItem.product dd .item {
  grid-area: 2/2/3/3;
}
main .fv .menuList .listItem.product ul {
  width: 100%;
}
main .fv .menuList .listItem.product ul li {
  margin-left: 5px;
}
main .fv .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;
}
main .fv .menuList .listItem.shoppingGuide .childEle, main .fv .menuList .listItem.support .childEle {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: var(--small_font);
}
main .fv .menuList .listItem.shoppingGuide .childEle ul, main .fv .menuList .listItem.support .childEle ul {
  width: 100%;
  margin-left: 5px;
}
main .fv .menuList .listItem.shoppingGuide .childEle ul:first-child, main .fv .menuList .listItem.support .childEle ul:first-child {
  grid-area: 1/1/2/3;
}
main .fv .menuList .listItem.shoppingGuide .childEle ul:last-child, main .fv .menuList .listItem.support .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);
}
main .fv .menuList .listItem dt {
  width: 100%;
  height: 100%;
}
main .fv .menuList .listItem dt button {
  width: 100%;
  font-size: var(--font14);
  transition: color 0.35s;
  padding: var(--base_font) var(--font11);
  text-align: center;
}
main .fv .menuList .listItem dt button:hover {
  color: #B0B2AF;
}
main .fv .menuList .listItem.active dd {
  visibility: visible;
  opacity: 1;
}
main .fv .menuList .listItem.active button {
  color: #B0B2AF;
}
main .fv .infoWraper {
  width: 100%;
  background-color: #EEF0F2;
  border-radius: 50px;
  height: var(--height47);
  min-height: 50px;
  padding: 0 var(--list_margin);
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: start;
}
main .fv .infoWraper #infoSlider {
  height: 100%;
}
main .fv .infoWraper .newBox span.bold {
  color: #B0B2AF;
  display: block;
  margin-right: var(--base_font);
}
main .fv .infoWraper .swiper-slide {
  display: flex;
  align-items: center;
}
main .fv .infoWraper .swiper-slide a {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  gap: 4px;
}
main .fv .infoWraper .swiper-slide a:hover {
  color: #B0B2AF;
}
main .fv .infoWraper .swiper-slide a p {
  font-size: var(--small_font);
  display: -webkit-box;
  overflow: hidden;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 1;
}
main .fv .infoWraper .swiper-slide a small {
  font-size: var(--font11);
  line-height: 1;
  color: #B0B2AF;
}
main .fv #fvSlider .new {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: var(--small_font);
  z-index: 1;
}
main .fv #fvSlider h3 {
  font-size: var(--font18);
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 1;
  margin-bottom: var(--font20);
}
main .fv #fvSlider p {
  font-size: var(--small_font);
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 1;
  line-height: 1;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
main .fv #fvSlider .img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.618/1;
  overflow: hidden;
}
main .fv #fvSlider .text {
  padding: var(--font20) var(--font12) 0;
}
main .fv a:hover .img img {
  transform: scale(1.04);
}
main .select {
  position: relative;
}
main .select .bigHeadline {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  gap: var(--base_font);
}
@media screen and (max-width: 770px) {
  main .select .bigHeadline {
    grid-template-columns: auto auto;
  }
}
@media screen and (max-width: 770px) {
  main .select {
    padding-top: clamp(90px, 0px + 24vw, 184.8px);
  }
}
main .select .contlorBlock {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
main .select .selectBody {
  width: calc(79% - var(--list_margin));
  margin: auto;
  margin-right: var(--list_margin);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--title_margin);
}
@media screen and (max-width: 770px) {
  main .select .selectBody {
    width: 93%;
    margin: 0 auto;
    margin-right: auto;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
  }
}
main .select dl {
  width: 100%;
}
main .select dt {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 0;
  margin-bottom: var(--list_margin);
}
main .select dt::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-color: #ECEBE4;
  z-index: -1;
}
main .select dt .btnLump,
main .select dt .lump {
  width: fit-content;
  background-color: #fff;
}
main .select dt .lump {
  padding-right: var(--list_margin);
}
main .select dt .lump h3 {
  font-size: var(--font17);
  margin-bottom: var(--font07);
}
main .select dt .lump span {
  color: #B0B2AF;
}
main .select dt .lump h3,
main .select dt .lump span {
  line-height: 1;
}
main .select dt .btnLump {
  padding-left: var(--list_margin);
}
main .select dt .base_btn {
  display: block;
  padding: 0.7em 2.3em;
  margin: 0;
}
main .select .sofaBlock {
  width: 100%;
  grid-area: 1/1/2/3;
}
main .select .sofaBlock dd {
  width: 100%;
  display: grid;
  grid-template-columns: auto 3fr auto 2fr;
  grid-template-rows: auto;
  column-gap: 20px;
  row-gap: 20px;
}
@media screen and (max-width: 770px) {
  main .select .sofaBlock dd {
    grid-template-columns: auto 3fr;
    grid-template-rows: auto auto;
    column-gap: 15px;
  }
}
main .select .sofaBlock .subHeadline {
  writing-mode: vertical-rl;
  font-feature-settings: initial;
  line-height: 1;
  grid-area: 1/1/2/2;
}
main .select .sofaBlock .subHeadline:last-of-type {
  grid-area: 1/3/3/4;
}
@media screen and (max-width: 770px) {
  main .select .sofaBlock .subHeadline:last-of-type {
    grid-area: 2/1/3/2;
  }
}
main .select .sofaBlock ul {
  width: 100%;
  grid-area: 1/2/2/3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
main .select .sofaBlock ul li {
  width: 100%;
  padding-top: 61.8%;
  position: relative;
  margin: 0;
  padding-bottom: 0;
  border-right: solid 1px #ECEBE4;
}
main .select .sofaBlock ul:first-of-type li:nth-of-type(3n) {
  border-right: transparent;
}
main .select .sofaBlock ul:first-of-type li:nth-child(-n+3) {
  border-bottom: solid 1px #ECEBE4;
}
main .select .sofaBlock ul:last-of-type {
  grid-template-columns: repeat(2, 1fr);
  grid-area: 1/4/2/5;
}
main .select .sofaBlock ul:last-of-type li:nth-of-type(2n) {
  border-right: transparent;
}
main .select .sofaBlock ul:last-of-type li:nth-child(-n+2) {
  border-bottom: solid 1px #ECEBE4;
}
@media screen and (max-width: 770px) {
  main .select .sofaBlock ul:last-of-type {
    grid-template-columns: repeat(3, 1fr);
    grid-area: 2/2/3/3;
  }
  main .select .sofaBlock ul:last-of-type li:nth-child(3) {
    grid-area: 2/1/3/2;
  }
  main .select .sofaBlock ul:last-of-type li:nth-child(4) {
    grid-area: 2/2/3/3;
  }
}
main .select .sofaBlock ul svg {
  height: var(--font17);
  width: 100%;
  object-fit: contain;
  transition: fill 0.35s;
}
main .select .sofaBlock ul a {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding-bottom: 0;
  background-color: #fff;
  transition: background-color 0.35s;
  display: grid;
  grid-template-rows: auto auto;
  align-items: center;
  text-align: center;
  align-content: center;
  justify-items: center;
  gap: var(--font07);
}
main .select .sofaBlock ul a p {
  font-size: var(--font14);
  line-height: 1;
}
main .select .sofaBlock ul a:hover {
  background-color: #1C1C1C;
}
main .select .sofaBlock ul a:hover p {
  color: #fff;
}
main .select .sofaBlock ul a:hover svg {
  fill: #fff;
}
main .select .materialBlock {
  grid-area: 2/1/3/2;
}
@media screen and (max-width: 770px) {
  main .select .materialBlock {
    grid-area: 2/1/3/3;
  }
}
main .select .sofaitemBlock {
  grid-area: 2/2/3/3;
}
@media screen and (max-width: 770px) {
  main .select .sofaitemBlock {
    grid-area: 3/1/4/3;
  }
}
main .select .between {
  margin-bottom: var(--list_margin);
}
main .linkBox {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
main .linkBox .img {
  width: 100%;
  transition: border-radius 0.35s;
  aspect-ratio: 252/96;
  overflow: hidden;
}
main .linkBox .img img {
  transform: scale(1);
}
main .linkBox .text {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--base_font) var(--font07);
}
main .linkBox .text p {
  font-size: var(--font14);
}
main .linkBox svg {
  width: auto;
  height: var(--base_font);
  aspect-ratio: 1/2;
  fill: #DADDD8;
}
main .linkBox a:hover .img {
  border-radius: 15px;
}
main .linkBox a:hover .img img {
  transform: scale(1.08);
}
main .linkBox a:hover p {
  color: #B0B2AF;
}
main .base_btn:has(span.en) {
  width: fit-content;
  height: fit-content;
  padding: 0.6em 2.1em;
}
main .ranking {
  padding: var(--margin70) 0;
  background-color: #EEF0F2;
}
@media screen and (max-width: 770px) {
  main .ranking {
    padding: clamp(40px, -0.024px + 10.673vw, 82.159px) 0;
  }
}
main .ranking .base_btn {
  margin: 0;
}
@media screen and (max-width: 770px) {
  main .ranking .base_btn {
    margin: 0 auto;
  }
}
main .ranking .ranking_top,
main .ranking .ranking_middle {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
@media screen and (max-width: 770px) {
  main .ranking .ranking_top,
  main .ranking .ranking_middle {
    flex-direction: column;
  }
}
main .ranking .ranking_top {
  margin-bottom: var(--title_margin);
}
main .ranking .ranking_top .pc_display {
  display: flex;
}
@media screen and (max-width: 770px) {
  main .ranking .ranking_top .pc_display {
    display: none;
  }
}
main .ranking .ranking_middle {
  margin-bottom: var(--base_font);
}
main .ranking .ranking_middle #modify {
  display: block;
  color: #b0b2af;
  font-size: var(--font14);
  line-height: 1;
}
@media screen and (max-width: 770px) {
  main .ranking .ranking_middle #modify {
    margin-bottom: var(--base_font);
  }
}
main .ranking .ranking_middle .ranking_button {
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: end;
}
@media screen and (max-width: 770px) {
  main .ranking .ranking_middle .ranking_button {
    width: 100%;
    justify-content: space-between;
  }
}
main .ranking .ranking_middle .ranking_button button {
  margin-right: var(--list_margin);
}
main .ranking .ranking_middle .ranking_button button span {
  transition: text-decoration 0.35s, color 0.35s, -webkit-text-decoration 0.35s;
}
main .ranking .ranking_middle .ranking_button button:last-child {
  margin-right: 0;
}
main .ranking .ranking_middle .ranking_button button.active span, main .ranking .ranking_middle .ranking_button button:hover span {
  text-decoration: underline;
  color: #b0b2af;
}
main .ranking .ranking_display {
  position: relative;
  width: 100%;
  z-index: 0;
  margin: 0 auto;
}
@media screen and (min-width: 1200px) {
  main .ranking .ranking_display {
    max-width: 87.8dvw;
  }
}
main .ranking .sofa_list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  transition: opacity 0.35s, visibility 0.35s;
  counter-reset: sofaRanking;
}
main .ranking .sofa_list.active {
  visibility: visible;
  opacity: 1;
}
main .ranking .sofa_list#top {
  position: static;
  z-index: 1;
}
main .ranking .sofa_list#low,
main .ranking .sofa_list #hight,
main .ranking .sofa_list #one {
  z-index: 2;
}
@media screen and (max-width: 770px) {
  main .ranking .sofa_list {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: var(--base_font);
    margin-bottom: var(--list_margin);
  }
}
main .ranking .sofa_list li {
  position: relative;
}
main .ranking .sofa_list li::after {
  counter-increment: sofaRanking;
  content: counter(sofaRanking);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #1c1c1c;
  width: var(--width32);
  height: var(--width32);
  font-size: var(--font18);
  line-height: 1;
  top: 0;
  left: 0;
  z-index: 2;
}
main .ranking .sofa_list li .img_box {
  width: 100%;
  overflow: hidden;
  height: 0;
  padding-top: 58.3333333333%;
  position: relative;
  z-index: 0;
}
main .ranking .sofa_list li .img_box img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 1;
}
main .ranking .sofa_list li .text_box {
  width: 100%;
  height: auto;
  aspect-ratio: 275/93;
  padding: 0 10px;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
}
@media screen and (max-width: 770px) {
  main .ranking .sofa_list li .text_box {
    aspect-ratio: auto;
    justify-content: start;
    padding-top: var(--base_font);
  }
}
main .ranking .sofa_list li .text_box h5 {
  font-size: var(--font16);
}
main .ranking .sofa_list li .text_box span {
  display: block;
  font-size: var(--small_font);
  margin-bottom: var(--font07);
}
main .ranking .sofa_list li .text_box small {
  font-size: var(--small_font);
  line-height: 1;
}
main .ranking .sofa_list li:first-child {
  grid-area: 1/1/3/3;
}
main .ranking .sofa_list li:first-child .text_box {
  aspect-ratio: 549/93;
}
@media screen and (max-width: 770px) {
  main .ranking .sofa_list li:first-child .text_box {
    aspect-ratio: auto;
    justify-content: start;
    padding-top: var(--base_font);
  }
}
main .ranking .sofa_list li:first-child .img_box {
  padding-top: 75.240234375%;
}
@media screen and (max-width: 770px) {
  main .ranking .sofa_list li:first-child .img_box {
    padding-top: 58.3333333333%;
  }
}
@media screen and (max-width: 770px) {
  main .ranking .sofa_list li:first-child {
    grid-area: 1/1/2/3;
  }
}
main .ranking .sofa_list li a:hover img {
  transform: translate(-50%, -50%) scale(1.04);
}
main .BackImgblock {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 0;
}
main .BackImgblock h5,
main .BackImgblock p,
main .BackImgblock span {
  color: #fff;
  text-align: center;
}
main .BackImgblock .headline {
  margin-bottom: var(--title_margin);
  display: grid;
  grid-template-rows: auto auto;
  row-gap: var(--font07);
}
main .BackImgblock .headline h5 {
  font-size: var(--font25);
  line-height: 1;
}
main .BackImgblock .headline p {
  font-size: var(--small_font);
}
main .BackImgblock .under p {
  margin-bottom: var(--font20);
  line-height: 2;
}
main .BackImgblock .backImg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
main .BackImgblock .backImg img {
  filter: brightness(0.5);
}
main .recommendation .swiper-nav {
  width: 75px;
  margin: 0;
}
main .recommendation .swiper-nav .swiper-button-prev::after,
main .recommendation .swiper-nav .swiper-button-next::after {
  width: 21px;
  height: 21px;
}
main .recommendation .colum {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: 0;
}
@media screen and (max-width: 770px) {
  main .recommendation .colum {
    padding-bottom: clamp(40px, -0.024px + 10.673vw, 82.159px);
    display: block;
    margin-bottom: var(--title_margin);
  }
}
main .recommendation .colum .outline {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 770px) {
  main .recommendation .colum .outline {
    position: static;
    width: 50%;
  }
}
main .recommendation .colum .outline .container {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  justify-content: space-between;
  align-items: start;
  row-gap: var(--list_margin);
}
main .recommendation .colum .outline .container h3 {
  grid-area: 1/1/2/2;
}
main .recommendation .colum .outline .container .swiper-nav {
  grid-area: 1/2/2/3;
}
main .recommendation .colum .outline .container .btn {
  width: fit-content;
  height: fit-content;
  grid-area: 2/1/3/2;
}
main .recommendation .colum .outline .container .btn .base_btn {
  padding: 0.58em 2em;
}
@media screen and (max-width: 770px) {
  main .recommendation .colum .outline .container .btn {
    position: absolute;
    bottom: 0;
    right: 3.5%;
    margin: 0;
  }
}
@media screen and (max-width: 770px) {
  main .recommendation .colum .outline .container {
    justify-content: center;
  }
}
main .recommendation .colum .outline h3 {
  font-size: var(--font25);
  writing-mode: vertical-rl;
  align-content: center;
  margin-left: 0;
}
@media screen and (max-width: 770px) {
  main .recommendation .colum .outline h3 {
    margin-left: auto;
  }
}
main .recommendation .colum .outline .swiper-nav {
  margin-right: 0;
}
main .recommendation .colum .outline .swiper-nav.pc_display {
  display: flex;
}
@media screen and (max-width: 770px) {
  main .recommendation .colum .outline .swiper-nav.pc_display {
    display: none;
  }
}
main .recommendation .colum div[id*=roomPhotoSlider] {
  width: 83%;
  margin: 0 auto;
  margin-right: 0;
  margin-top: 65px;
  container-type: inline-size;
}
main .recommendation .colum div[id*=roomPhotoSlider] li {
  opacity: 0;
  transform: translateX(30px);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}
main .recommendation .colum div[id*=roomPhotoSlider] li:nth-child(2) {
  transition-delay: 0.15s;
}
main .recommendation .colum div[id*=roomPhotoSlider] li:nth-child(3) {
  transition-delay: 0.3s;
}
main .recommendation .colum div[id*=roomPhotoSlider] li.i {
  opacity: 1;
  transform: translateX(0);
}
main .recommendation .colum div[id*=roomPhotoSlider] .img {
  width: 100%;
  aspect-ratio: 386/239;
  overflow: hidden;
}
@media screen and (max-width: 770px) {
  main .recommendation .colum div[id*=roomPhotoSlider] {
    width: 100%;
    padding-top: 0;
    padding-left: 0;
    margin-top: -135px;
  }
  main .recommendation .colum div[id*=roomPhotoSlider] .swiper-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: auto;
  }
  main .recommendation .colum div[id*=roomPhotoSlider] li {
    transform: translateY(30px);
  }
  main .recommendation .colum div[id*=roomPhotoSlider] li:first-child {
    grid-area: 1/2/2/3;
  }
  main .recommendation .colum div[id*=roomPhotoSlider] li:nth-child(2) {
    grid-area: 2/1/3/2;
  }
  main .recommendation .colum div[id*=roomPhotoSlider] li:nth-child(3) {
    grid-area: 2/2/3/3;
  }
  main .recommendation .colum div[id*=roomPhotoSlider] li.i {
    transform: translateY(0);
  }
}
main .recommendation .colum div[id*=roomPhotoSlider] a:hover img {
  transform: scale(1.05);
}
@media screen and (max-width: 770px) {
  main .recommendation .induction {
    margin-top: var(--block_margin);
  }
}
main .recommendation .induction .gridBox {
  width: 100%;
  max-width: 800px;
  display: grid;
  justify-content: center;
  justify-items: center;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: var(--font20);
  margin: 0 auto;
}
@media screen and (min-width: 1366px) {
  main .recommendation .induction .gridBox {
    max-width: 73.21dvw;
  }
}
@media screen and (max-width: 770px) {
  main .recommendation .induction .gridBox {
    max-width: none;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
}
main .recommendation .induction .base_btn::after {
  background-color: #fff;
}
main .recommendation .induction .base_btn:hover span {
  color: #1C1C1C;
}
main .recommendation .BackImgblock {
  aspect-ratio: 1/1;
}
main .guide {
  padding: clamp(39.4752px, 0px + 5.12vw, 98.304px) 0;
  background-color: #EEF0F2;
}
@media screen and (max-width: 770px) {
  main .guide {
    padding: var(--title_margin) 0 clamp(95px, 0.024px + 25.327vw, 195.041px);
    position: relative;
    z-index: 0;
  }
}
main .guide svg {
  fill: #B0B2AF;
}
main .guide .headNav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--title_margin);
}
@media screen and (max-width: 770px) {
  main .guide .btnBox {
    position: absolute;
    bottom: var(--title_margin);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
}
main .guide .base_btn,
main .guide .btnBox {
  width: fit-content;
  height: fit-content;
}
main .guide .guideInner {
  width: 100%;
  display: grid;
  grid-template-columns: calc(69.7% - var(--title_margin) / 2) calc(30.2% - var(--title_margin) / 2);
  grid-template-rows: auto;
  gap: var(--title_margin);
}
@media screen and (max-width: 770px) {
  main .guide .guideInner {
    grid-template-columns: auto;
    grid-auto-rows: auto;
  }
}
main .guide .followList {
  grid-area: 1/1/2/2;
}
main .guide .followList .followPart {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  justify-items: start;
  justify-content: stretch;
  column-gap: var(--font25);
  row-gap: var(--font20);
  margin-bottom: var(--list_margin);
}
@media screen and (max-width: 770px) {
  main .guide .followList .followPart {
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-auto-rows: auto;
  }
}
main .guide .followList .followPart:last-child {
  margin-bottom: 0;
}
main .guide .followList .followPart .head {
  width: 100%;
  position: relative;
  grid-area: 1/1/2/4;
  z-index: 0;
}
@media screen and (max-width: 770px) {
  main .guide .followList .followPart .head {
    grid-area: 1/1/2/2;
  }
}
main .guide .followList .followPart .head h5 {
  width: fit-content;
  font-size: var(--base_font);
  line-height: 1;
  background-color: #EEF0F2;
  padding-right: var(--base_font);
  z-index: 1;
}
main .guide .followList .followPart .head::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #DADDD8;
  display: block;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: -1;
}
main .guide .followList .followPart a {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  column-gap: var(--base_font);
  position: relative;
}
main .guide .followList .followPart a .img {
  width: 23.213%;
  max-width: 110px;
  aspect-ratio: 1/1;
  overflow: hidden;
  transition: border-radius 0.35s;
}
main .guide .followList .followPart a .img img {
  width: 100%;
  height: 100%;
  transform: scale(1);
  transition: transform 0.6s;
}
main .guide .followList .followPart a svg {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%) scaleX(0.7);
  width: var(--font16);
  height: var(--font16);
  object-fit: contain;
}
main .guide .followList .followPart a span {
  font-size: var(--base_font);
  display: block;
  margin-right: var(--font17);
}
@media screen and (max-width: 770px) {
  main .guide .followList .followPart a span {
    font-size: var(--font16);
  }
}
main .guide .followList .followPart a:hover .img {
  border-radius: 15px;
}
main .guide .followList .followPart a:hover .img img {
  transform: scale(1.06);
}
main .guide .textLinkList {
  grid-area: 1/2/2/3;
}
@media screen and (max-width: 770px) {
  main .guide .textLinkList {
    grid-area: 2/1/3/2;
  }
}
main .guide .textLinkList li {
  padding: var(--font25) 0;
  border-bottom: #DADDD8 1px solid;
}
main .guide .textLinkList li:first-child {
  padding-top: 0;
}
main .guide .lump {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-right: var(--font20);
}
main .guide .lump .img {
  width: var(--font25);
  height: auto;
  aspect-ratio: 1/1;
  margin-right: var(--font07);
}
main .guide .lump svg {
  position: absolute;
  width: var(--font16);
  height: var(--font16);
  top: 50%;
  right: 0;
  transform: translateY(-50%) scaleX(0.7);
}
main .guide .lump p {
  font-size: var(--font16);
}
main .guide a:hover .lump p {
  color: #B0B2AF;
}
main .guide .lineBlock {
  width: 100%;
  max-width: 73.21dvw;
  margin: 0 auto;
}
@media screen and (max-width: 770px) {
  main .guide .lineBlock {
    max-width: none;
    grid-area: 3/1/4/2;
  }
}
main .guide .lineBlock .BackImgblock {
  padding: var(--title_margin);
}
main .guide .lineBlock .BackImgblock .headline {
  margin-bottom: var(--list_margin);
}
main .guide .lineBlock .base_btn::after {
  background-color: #fff;
}
main .guide .lineBlock .base_btn:hover span {
  color: #1C1C1C;
}
main .magazine .headNav {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--title_margin);
}
@media screen and (max-width: 770px) {
  main .magazine .headNav {
    flex-direction: column;
    align-items: flex-start;
  }
  main .magazine .headNav .bigHeadline {
    margin-bottom: var(--title_margin);
  }
}
main .magazine .headNav h5 {
  font-size: var(--font18);
  line-height: 2;
}
main .magazine .magazineInner {
  width: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: repeat(2, 1fr);
  margin-bottom: var(--title_margin);
}
main .magazine .magazineInner li {
  width: 100%;
  padding: var(--font25);
}
main .magazine .magazineInner li:nth-child(odd) {
  padding-left: 0;
  border-right: #DADDD8 1px solid;
}
main .magazine .magazineInner li:nth-child(even) {
  padding-right: 0;
}
main .magazine .magazineInner li:nth-child(-n+2) {
  padding-top: 0;
  border-bottom: #DADDD8 1px solid;
}
main .magazine .magazineInner li:nth-last-child(-n+2) {
  padding-bottom: 0;
}
@media screen and (max-width: 770px) {
  main .magazine .magazineInner li {
    padding: var(--base_font);
  }
}
main .magazine .magazineInner a {
  width: 100%;
  display: grid;
  grid-template-columns: 38% 61%;
  justify-content: center;
  align-content: stretch;
}
main .magazine .magazineInner a .img {
  width: 100%;
  height: auto;
  aspect-ratio: 140/99;
  overflow: hidden;
  transition: border-radius 0.35s;
}
main .magazine .magazineInner a .img img {
  transform: scale(1);
}
@media screen and (max-width: 770px) {
  main .magazine .magazineInner a .img {
    margin-bottom: var(--base_font);
  }
}
main .magazine .magazineInner a:hover .img {
  border-radius: 15px;
}
main .magazine .magazineInner a:hover .img img {
  transform: scale(1.08);
}
main .magazine .magazineInner a:hover p {
  color: #B0B2AF;
}
@media screen and (max-width: 770px) {
  main .magazine .magazineInner a {
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
    position: relative;
  }
}
main .magazine .magazineInner .text {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 770px) {
  main .magazine .magazineInner .text {
    position: static;
  }
}
main .magazine .magazineInner .text p {
  font-size: var(--font16);
  margin-left: var(--font20);
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 3;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
@media screen and (max-width: 770px) {
  main .magazine .magazineInner .text p {
    font-size: var(--base_font);
    margin-left: 0;
  }
}
main .magazine .magazineInner .text small {
  font-size: var(--font12);
  position: absolute;
  bottom: 0;
  right: 0;
  color: #B0B2AF;
}
@media screen and (max-width: 770px) {
  main .magazine .magazineInner .text small {
    bottom: unset;
    top: 0;
    right: -10px;
    writing-mode: vertical-rl;
    filter: drop-shadow(0px 0px 3px #fff);
  }
}
main .magazine .btnBox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
main .magazine .btnBox .base_btn {
  margin: 0;
}
main .information .info_box {
  width: 100%;
  display: grid;
  grid-template-columns: auto calc(61% - var(--title_margin));
  grid-template-rows: auto auto;
  row-gap: var(--list_margin);
  column-gap: var(--title_margin);
}
@media screen and (max-width: 900px) {
  main .information .info_box {
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
  }
}
main .information .info_body {
  display: grid;
  grid-template-rows: auto;
  grid-auto-rows: auto;
}
main .information .info_body li {
  width: 100%;
  border-bottom: #DADDD8 solid 1px;
  padding: var(--list_margin) 0;
  display: flex;
}
main .information .info_body li span {
  display: block;
  width: fit-content;
  line-height: 1;
  margin-right: var(--title_margin);
  white-space: nowrap;
}
@media screen and (max-width: 900px) {
  main .information .info_body li span {
    margin-right: var(--list_margin);
  }
}
main .information .info_body li a {
  display: block;
}
main .information .info_body li a .tag {
  display: block;
  padding: var(--font07) clamp(25px, -0.024px + 6.673vw, 51.359px);
  margin-bottom: var(--font11);
  font-size: var(--font11);
  background-color: #1C1C1C;
  color: #fff;
  transition: color 0.35s, background-color 0.35s;
}
main .information .info_body li a h4 {
  font-size: var(--font16);
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media screen and (max-width: 770px) {
  main .information .info_body li a h4 {
    font-size: var(--base_font);
  }
}
main .information .info_body li a:hover .tag {
  background-color: #B0B2AF;
  color: #fff;
}
main .information .info_body li a:hover h4 {
  color: #B0B2AF;
}
main .information .base_btn {
  grid-area: 2/2/3/3;
  align-self: end;
  justify-self: end;
  margin: 0;
}
@media screen and (max-width: 900px) {
  main .information .base_btn {
    grid-area: 3/1/4/2;
  }
}
main .special_info {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  margin-bottom: var(--margin70);
}
main .info_textarea {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 赤文字 + bold */
}
main .info_textarea .text_block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
}
main .info_textarea .text_block img {
  width: 50px;
  height: auto;
}
main .info_textarea img {
  width: 80px;
  height: auto;
  margin: 10px;
  padding: 8px;
}
main .info_textarea p.leadText {
  margin: 0;
  font-size: var(--base_font);
  line-height: 1.4;
}
main .info_textarea span.highlight {
  display: inline-block;
  color: #b91701 !important;
}
@media screen and (max-width: 760px) {
  main .info_textarea p.leadText span.break {
    display: block;
    height: 0;
  }
  main .info_textarea {
    width: 100%;
  }
  main .text_block {
    margin-top: 60px !important;
  }
  main .text_block img {
    margin-right: 80px;
  }
}



/* 2025.12.05- SR予約CP固定バナー */

/* -------------------------------------- */
/* バナー本体のスタイル */
/* -------------------------------------- */
.fixed_banner_sr_reserve {
  position: fixed;
  bottom: 0;
  right: 0;
  display: block;
  max-width: 260px;
  width: 100%;
  z-index: 100;

  /* 初期状態は非表示 */
  opacity: 0;
  visibility: hidden;
  
  /* スムーズな表示/非表示のためのトランジション */
  transition: opacity 0.3s, visibility 0.3s;

  /* SCSSのネスト記述に対応 */
  img {
    width: 100%;
    aspect-ratio: 1/1;
  }
}

/* 表示時のクラス */
.fixed_banner_sr_reserve.is-visible {
  opacity: 1;
  visibility: visible;
}


/* -------------------------------------- */
/* 閉じるボタンのスタイル 
/* -------------------------------------- */
.fixed_banner_close_btn {
  position: absolute; /* バナー要素に対して絶対配置 */
  top: 8px;          /* 上からの位置調整 */
  right: 8px;        /* 右からの位置調整 */
  
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  
  color: #1c1c1c;
  background-color: #daddd8;
  border: 1px solid #daddd8;
  border-radius: 50%; /* 円形 */
  cursor: pointer;
  z-index: 101; /* バナー画像よりも手前に */
  
  padding: 0;
  
  /* ホバー時の装飾 */
  transition: background-color 0.2s, color 0.2s;
}

.fixed_banner_close_btn:hover {
  background-color: #eee;
}


/* -------------------------------------- */
/* レスポンシブ対応 (770px以下) */
/* -------------------------------------- */
@media screen and (max-width: 770px) {
  .fixed_banner_sr_reserve {
    bottom: 69px;
    width: 50%;
    max-width: 230px;
  }
}