@charset "UTF-8";
@media screen and (max-width: 768px) {
  main .child_cont div[class*=content] {
    padding-bottom: 0;
    width: auto;
  }
}
.content {
  background: #ffffff;
  padding-top: 160px;
}

main {
  background: #f7f7f7;
}
main .fv-area {
  margin: 30px auto 0;
  max-width: 1100px;
}
main .fv-area .magazine-logo {
  max-width: 193px;
  width: 100%;
  margin: 0 0 50px auto;
}
main .fv-area .magazine-logo img {
  width: 100%;
  object-fit: cover;
}
main .fv-area .magazine-logo p {
  text-align: right;
  margin-top: 10px;
  font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
}
main .fv-area h1 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
main .fv-area h1 img {
  width: 100%;
  object-fit: cover;
}
main h2 {
  line-height: 1.5;
  text-align: center;
  font-size: clamp(1.25rem, 1.037rem + 0.91vw, 1.813rem);
  letter-spacing: 0.02em;
  margin-bottom: 50px;
}
main .main-text {
  letter-spacing: 0.001em;
  text-align: justify;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  line-height: 2;
  font-size: clamp(0.813rem, 0.742rem + 0.3vw, 1rem);
}
main .sec-recommend-situation {
  max-width: 930px;
  width: 93%;
  margin: 120px auto 0;
}
main .sec-recommend-situation ul {
  margin-top: 35px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 15px;
}
main .sec-recommend-situation ul li {
  width: calc(100% - 10px);
}
main .sec-recommend-situation ul img {
  width: 100%;
  object-fit: cover;
}
main .sec-recommend-situation ul p {
  line-height: 1.7;
  font-size: clamp(0.875rem, 0.851rem + 0.1vw, 0.938rem);
  text-align: justify;
  width: 90%;
  margin: 20px auto;
}
main .sec-hard-to-imagine {
  width: 93%;
  margin: 120px auto 70px;
}
main .sec-couch-simulation {
  background: #ffffff;
  padding: 120px 0;
}
main .sec-couch-simulation .inner {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
}
main .sec-couch-simulation > p {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
main .sec-couch-simulation .caution {
  background: #EEF0F2;
  line-height: 1.7;
  text-align: justify;
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 10px;
  max-width: 800px;
  width: 100%;
  margin: 30px auto 0;
}
main .sec-couch-simulation .simulation-area {
  margin: 80px auto 0;
}
main .sec-couch-simulation .simulation-area h3 {
  font-size: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
  letter-spacing: 0.01em;
  color: #ffffff;
  background: #515150;
  padding: 10px 40px;
  margin-bottom: 10px;
  display: inline-block;
  line-height: 1;
}
main .sec-couch-simulation .simulation-area .how-to-use p {
  font-size: clamp(0.875rem, 0.851rem + 0.1vw, 0.938rem);
}
main .sec-couch-simulation .simulation-area .how-to-use p:first-of-type {
  margin-bottom: 5px;
}
main .sec-couch-simulation .simulation-area .simulation {
  display: flex;
  gap: 3px;
  margin-top: 15px;
}
main .sec-couch-simulation .simulation-area .choose-a-sofa {
  max-width: 232px;
  width: 22%;
  background: #EDEDE9;
  border: solid 1px #000000;
}
main .sec-couch-simulation .simulation-area .choose-a-sofa h4 {
  font-size: clamp(0.938rem, 0.89rem + 0.2vw, 1.063rem);
  background: #ffffff;
  text-align: center;
  width: 100%;
  padding: 20px 0;
  border-bottom: solid 1px #000000;
  line-height: 1;
}
main .sec-couch-simulation .simulation-area .choose-a-sofa ul {
  width: 88%;
  max-width: 180px;
  margin: 25px auto;
}
main .sec-couch-simulation .simulation-area .choose-a-sofa ul li {
  display: flex;
  flex-direction: column;
}
main .sec-couch-simulation .simulation-area .choose-a-sofa ul li:not(:last-of-type) {
  margin-bottom: 10%;
}
main .sec-couch-simulation .simulation-area .choose-a-sofa ul li > span {
  display: block;
  margin-bottom: 5px;
  font-size: clamp(0.688rem, 0.64rem + 0.2vw, 0.813rem);
  line-height: 1;
}
main .sec-couch-simulation .simulation-area .choose-a-sofa button {
  background: #ffffff;
  border: solid 1px #000000;
  padding: 10px 3%;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}
main .sec-couch-simulation .simulation-area .choose-a-sofa button.is-active {
  /* 選択時のスタイル（例：ブランドの落ち着きある黒などで締める） */
  background-color: #000000;
}
main .sec-couch-simulation .simulation-area .choose-a-sofa button span:first-of-type {
  font-size: clamp(0.875rem, 0.828rem + 0.2vw, 1rem);
  display: block;
  text-align: center;
  line-height: 1;
  margin-bottom: 5px;
  letter-spacing: 0.01em;
}
main .sec-couch-simulation .simulation-area .choose-a-sofa button span:last-of-type {
  font-size: clamp(0.688rem, 0.568rem + 0.51vw, 0.813rem);
  display: block;
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1;
}
main .sec-couch-simulation .simulation-area .choose-a-sofa button.is-active span:first-of-type, main .sec-couch-simulation .simulation-area .choose-a-sofa button.is-active span:last-of-type {
  color: #ffffff;
}
main .sec-couch-simulation .simulation-area .choose-a-space {
  width: calc(78% - 3px);
  max-width: 930px;
}
main .sec-couch-simulation .simulation-area .choose-a-space .button-area {
  display: flex;
  background: #EDEDE9;
  border: solid 1px #000000;
}
main .sec-couch-simulation .simulation-area .choose-a-space h4 {
  width: 20%;
  font-size: clamp(0.875rem, 0.804rem + 0.3vw, 1.063rem);
  background: #ffffff;
  text-align: center;
  padding: 20px 0;
  border-right: solid 1px #000000;
  line-height: 1;
}
main .sec-couch-simulation .simulation-area .choose-a-space .button-area > ul {
  display: flex;
  align-items: center;
  width: 85%;
  margin-left: 3.5%;
  gap: 4%;
}
main .sec-couch-simulation .simulation-area .choose-a-space .button-area > ul button {
  background: #ffffff;
  border: solid 1px #000000;
  padding: 10px 7%;
  border-radius: 5px;
  line-height: 1;
  transition: background-color 0.3s, color 0.3s;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
}
main .sec-couch-simulation .simulation-area .choose-a-space .button-area > ul button.is-active {
  /* 選択時のスタイル（例：ブランドの落ち着きある黒などで締める） */
  background: #000000;
  color: #ffffff;
}
main .sec-couch-simulation .simulation-area .choose-a-space .button-area-sofa-sp {
  display: none;
}
main .sec-couch-simulation .simulation-area .choose-a-space figure {
  width: 98%;
  margin-left: 2%;
}
main .sec-couch-simulation .simulation-area .choose-a-space figure .floor-plan-bass-list .floor-plan-bass-wrap {
  width: 100%;
}
main .sec-couch-simulation .simulation-area .choose-a-space figure .floor-plan-bass-list .floor-plan-bass-wrap p {
  margin: 10px 0 0 30px;
  font-size: 14px;
}
main .sec-couch-simulation .simulation-area .choose-a-space figure .floor-plan-bass-list .floor-plan-bass-wrap span {
  display: block;
  text-align: right;
  font-size: clamp(0.75rem, 0.726rem + 0.1vw, 0.813rem);
}
main .sec-couch-simulation .simulation-area .choose-a-space figure .floor-plan-bass-list .floor-plan-bass-wrap .floor-plan-bass-img {
  width: 100%;
  position: relative;
}
main .sec-couch-simulation .simulation-area .choose-a-space figure .floor-plan-bass-list .floor-plan-bass-wrap .floor-plan-bass-img img {
  width: 100%;
  object-fit: cover;
}
main .sec-couch-simulation .simulation-area .choose-a-space figure .floor-plan-bass-list .floor-plan-bass-wrap .floor-plan-bass-img .sofa-diagram-img {
  position: absolute;
  top: 1%;
  right: 5%;
  max-width: 31.2616%;
  width: 100%;
  height: auto;
  display: block;
}
main .sec-couch-simulation .simulation-area .choose-a-space figure .floor-plan-bass-list .floor-plan-bass-wrap .floor-plan-bass-img .sofa-diagram-img img {
  width: 100%;
  object-fit: cover;
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area {
  display: flex;
  align-items: flex-start;
  margin: 10px 0 0 2%;
  gap: 10px;
  width: 98%; /* 親要素のハミ出し防止 */
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area h5 {
  font-size: clamp(0.75rem, 0.679rem + 0.3vw, 0.938rem);
  color: #ffffff;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-align: center;
  background: #000000;
  border-radius: 50%;
  max-width: 120px;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 17%;
  flex-shrink: 0; /* 【追加】スライダーの伸縮に巻き込まれて丸が潰れるのを防ぐ */
  padding: 2%;
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area {
  /* --- Swiperスライダー全体のコンテナ（元の ul の位置） --- */
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider {
  width: 83%;
  overflow: hidden; /* 【追加】画面外のハミ出し分を隠してスワイプ可能にする */
  position: relative;
  /* Swiperのラッパー構造（元の li の役割を兼ねる） */
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider .swiper-wrapper {
  display: flex;
  align-items: center;
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider {
  /* 各スライドの枠（JSで自動生成されるクラス） */
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider .swiper-slide {
  height: auto; /* 高さを揃える */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 3% !important;
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider .swiper-pagination {
  margin-top: 10px;
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider .swiper-button-prev {
  position: absolute;
  left: 0;
  bottom: -10px;
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider .swiper-button-next {
  position: absolute;
  right: 0;
  bottom: -10px;
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider {
  /* 個別のソファ要素（元のサイズ感を活かす） */
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider .recommend-sofa-wrap {
  width: 100%;
  max-width: 220px; /* 元の指定を維持 */
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider .recommend-sofa-wrap a {
  opacity: 1;
  transition: opacity 0.5s ease;
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider .recommend-sofa-wrap a:hover {
  opacity: 0.7;
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider .recommend-sofa-wrap img {
  width: 100%;
  object-fit: cover;
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider .product-name {
  font-size: clamp(0.813rem, 0.765rem + 0.2vw, 0.938rem);
  margin-bottom: 5px;
  line-height: 1;
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider .product-size {
  font-size: clamp(0.688rem, 0.64rem + 0.2vw, 0.813rem);
  line-height: 1;
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider {
  /* 【追加】Swiperのドット（ページネーション）の色をお好みに調整 */
}
main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider .swiper-pagination-bullet-active {
  background: #000000;
}
main .sec-couch-simulation .simulation-area .choose-a-space {
  /* --- レスポンシブ調整（スマホ・タブレット等で黒丸とスライダーを縦並びにする場合） --- */
  /* ※ もしスマホ画面で黒丸見出しの下にスライダーを広々と配置したい場合は、以下を有効にしてください */
}
@media (max-width: 768px) {
  main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider .swiper-slide {
    margin-right: 1% !important;
  }
  main .sec-couch-simulation .simulation-area .choose-a-space .recommend-area .recommend-slider .recommend-sofa-wrap a > div {
    width: 90%;
  }
}
main .sec-check-point {
  max-width: 800px;
  width: 93%;
  margin: 120px auto 160px;
}
main .sec-check-point .link-to-article {
  display: inline-block;
  margin-top: 45px;
}
main .sec-check-point .link-to-article p {
  font-size: clamp(0.813rem, 0.742rem + 0.3vw, 1rem);
  margin: 0 0 15px 0;
  padding-left: 30px;
  position: relative;
}
main .sec-check-point .link-to-article p::before {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent; /* 左側の透明な斜め線 */
  border-right: 10px solid transparent; /* 右側の透明な斜め線 */
  border-top: 17.32px solid #000000; /* 上からの黒い境界線（三角形の高さ） */
}
main .sec-check-point .link-to-article .article-img {
  max-width: 500px;
  opacity: 1;
  transition: opacity 0.5s ease;
}
main .sec-check-point .link-to-article .article-img img {
  width: 100%;
  object-fit: cover;
}
main .sec-check-point .link-to-article:hover .article-img {
  opacity: 0.7;
}

@media screen and (max-width: 768px) {
  main .content {
    padding-top: 80px;
  }
  main .fv-area .magazine-logo {
    width: 93%;
    margin: 0 3.5% 20px auto;
  }
  main .fv-area .magazine-logo img {
    width: 36vw;
    min-width: 120px;
    max-width: 193px;
    aspect-ratio: 193/54;
    margin: 0 0 0 auto;
  }
  main .fv-area .magazine-logo p {
    line-height: 1;
    margin-top: 5px;
  }
  main h2 {
    margin-bottom: 35px;
  }
  main .sec-recommend-situation {
    margin: 50px auto 0;
  }
  main .sec-recommend-situation ul {
    flex-direction: column;
  }
  main .sec-recommend-situation ul p {
    width: 100%;
    text-align: center;
  }
  main .sec-recommend-situation ul li > div {
    max-width: 250px;
    margin: 0 auto;
  }
  main .sec-hard-to-imagine {
    margin: 60px auto;
  }
  main .sec-couch-simulation {
    padding: 60px 0;
  }
  main .sec-couch-simulation .simulation-area {
    width: 100%;
    align-items: center;
  }
  main .sec-couch-simulation .simulation-area .how-to-use p {
    line-height: 1.5;
  }
  main .sec-couch-simulation .simulation .choose-a-sofa {
    display: none;
  }
  main .sec-couch-simulation .simulation .choose-a-space {
    width: 100%;
  }
  main .sec-couch-simulation .simulation .choose-a-space .scroll-overlay {
    width: 100%;
    height: auto;
    position: relative;
  }
  main .sec-couch-simulation .simulation .choose-a-space .scroll-overlay::before, main .sec-couch-simulation .simulation .choose-a-space .scroll-overlay::after {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }
  main .sec-couch-simulation .simulation .choose-a-space .scroll-overlay.is-visible::before, main .sec-couch-simulation .simulation .choose-a-space .scroll-overlay.is-visible::after {
    opacity: 0.8;
    visibility: visible;
  }
  main .sec-couch-simulation .simulation .choose-a-space .scroll-overlay.is-visible::before, main .sec-couch-simulation .simulation .choose-a-space .scroll-overlay.is-visible::after {
    pointer-events: none;
  }
  main .sec-couch-simulation .simulation .choose-a-space .scroll-overlay.is-hidden::before, main .sec-couch-simulation .simulation .choose-a-space .scroll-overlay.is-hidden::after {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  main .sec-couch-simulation .simulation .choose-a-space .scroll-overlay::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(1.03);
    background: #EEF0F2;
    opacity: 0.7;
    display: block;
    z-index: 2;
    overflow-x: hidden;
  }
  main .sec-couch-simulation .simulation .choose-a-space .scroll-overlay::after {
    content: "";
    background: url(../images/sec_couch_simulation/swipe.png) center/cover no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: auto;
    height: 80%;
    object-fit: cover;
    aspect-ratio: 846/693;
    z-index: 3;
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area {
    display: flex;
    width: 100%;
    margin-bottom: 10px; /* ブロックごとの下の余白 */
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area h4 {
    width: auto;
    min-width: 120px;
    white-space: nowrap;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area > ul {
    display: flex;
    align-items: center;
    width: 100% !important; /* PC用の78%を解除 */
    margin-left: 0 !important; /* PC用のマージンをリセット */
    padding: 8px 10px; /* 内側の余白 */
    gap: 15px; /* 💡変更点：ボタン同士の間隔 */
    overflow-x: auto; /* 横方向にはみ出したらスクロールバーを出す */
    white-space: nowrap; /* 💡子要素の自動改行を絶対に禁止する */
    -webkit-overflow-scrolling: touch; /* スマホでのスクロールを滑らかにする */
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area > ul::-webkit-scrollbar {
    display: none;
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area > ul li {
    display: inline-block;
    flex-shrink: 0; /* ボタンが画面幅に潰されるのを防ぐ */
    margin-bottom: 0 !important; /* PC用のマージンをリセット */
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area button {
    padding: 8px 12px; /* 💡変更点：スマホ用のパディング */
    white-space: nowrap; /* 💡ボタン内のテキスト改行を絶対に防ぐ */
    font-size: 13px;
    background: #ffffff;
    border: solid 1px #000000;
    border-radius: 5px;
    line-height: 1;
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area button span {
    display: inline-block !important; /* ブロック化を解除して横に並べる */
    text-align: center;
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area button span:first-of-type {
    margin-bottom: 0 !important; /* PC用の下余白を消す */
    margin-right: 5px; /* 代わりに英語と日本語の間に少し隙間をあける */
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area-sofa-sp {
    display: flex;
    background: #EDEDE9;
    border: solid 1px #000000;
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area-sofa-sp h4 {
    font-size: clamp(0.938rem, 0.89rem + 0.2vw, 1.063rem);
    background: #ffffff;
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    white-space: nowrap;
    padding: 0 5px;
    min-width: 120px;
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area-sofa-sp ul {
    display: flex;
    align-items: center;
    width: 100% !important; /* PC用の78%を解除 */
    margin-left: 0 !important; /* PC用のマージンをリセット */
    padding: 8px 10px; /* 内側の余白 */
    gap: 10px; /* 💡変更点：ボタン同士の間隔 */
    overflow-x: auto; /* 横方向にはみ出したらスクロールバーを出す */
    white-space: nowrap; /* 💡子要素の自動改行を絶対に禁止する */
    -webkit-overflow-scrolling: touch; /* スマホでのスクロールを滑らかにする */
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area-sofa-sp ul::-webkit-scrollbar {
    display: none;
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area-sofa-sp ul li {
    display: flex;
    flex-direction: column;
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area-sofa-sp ul li:not(:last-of-type) {
    margin-bottom: 0;
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area-sofa-sp ul li > span {
    display: block;
    margin-bottom: 5px;
    font-size: clamp(0.688rem, 0.64rem + 0.2vw, 0.813rem);
    line-height: 1;
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area-sofa-sp button {
    background: #ffffff;
    border: solid 1px #000000;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    min-height: 67px;
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area-sofa-sp button.is-active {
    /* 選択時のスタイル（例：ブランドの落ち着きある黒などで締める） */
    background-color: #000000;
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area-sofa-sp button span:first-of-type {
    font-size: clamp(0.875rem, 0.828rem + 0.2vw, 1rem);
    display: block;
    text-align: center;
    line-height: 1;
    margin-bottom: 5px;
    letter-spacing: 0.01em;
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area-sofa-sp button span:last-of-type {
    font-size: clamp(0.75rem, 0.726rem + 0.1vw, 0.813rem);
    display: block;
    text-align: center;
    letter-spacing: 0.01em;
    line-height: 1;
  }
  main .sec-couch-simulation .simulation .choose-a-space .button-area-sofa-sp button.is-active span:first-of-type, main .sec-couch-simulation .simulation .choose-a-space .button-area-sofa-sp button.is-active span:last-of-type {
    color: #ffffff;
  }
  main .sec-couch-simulation .simulation .choose-a-space figure {
    width: 100%;
    margin-left: 0;
  }
  main .sec-couch-simulation .simulation .choose-a-space figure .floor-plan-bass-list .floor-plan-bass-wrap p {
    margin: 20px 0 0;
    line-height: 1.3;
  }
  main .sec-couch-simulation .simulation .choose-a-space .recommend-area {
    width: 100%;
    margin: 8px 0 0 0;
  }
  main .sec-couch-simulation .simulation .choose-a-space .recommend-area h5 {
    min-width: 85px;
  }
  main .sec-check-point {
    margin: 60px auto 100px;
  }
  main .sec-check-point .link-to-article p {
    line-height: 1.4;
  }
}/*# sourceMappingURL=style.css.map */