/* ==================================== */
/* style6.css - その他セクション専用スタイル */
/* ==================================== */

/* 全体共通の基本設定 */
:root {
  --color-text: #333;
  --color-bg: #FFFFFF;
  --color-main: #e45653;
  --color-living: #D38433;
  --color-dining: #7d8b6c;
  --color-casual: #d6a528;
  --color-kotatsu: #4a4e3f;
  --color-huton: #1F2F54;
  --color-sonota: #A9A9A9;
  --color-menu-hover-bg: #f0f0f0;
  --color-section-sub: #000;
  --color-futon-button-bg: #446347;
  --color-futon-button-text: #fff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.kotatsutokusyu {
  background-color: var(--color-bg);
  font-family: sans-serif;
  margin: 0 0 50px 0;
  padding: 0;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.6;
}

/* ヘッダー */
.TOP {
  text-align: center;
  margin: 20px auto;
  padding: 0 16px;
}
.TOP img {
  width: 900px;
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* リードテキスト */
.lead-text {
  text-align: center;
  font-size: 21px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 2;
  margin: 40px 0 50px;
}

/* メニュー */
.menu {
  max-width: 900px;
  margin: 0 auto;
}
.menu ul {
  display: flex;
  justify-content: center;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu li {
  flex: 0 0 110px;
}
.menu li a {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  font-weight: bold;
  padding: 8px;
  font-size: 18px;
  text-align: center;
  transition: background 0.3s, color 0.3s;
  border: 1px solid #ccc;
}
.menu li a:hover {
  background-color: var(--color-menu-hover-bg);
  color: #000;
}

/* ページ遷移での表示位置の調整 */
.anchor-offset {
  display: block;
  height: 80px;
  margin-top: -80px;
  visibility: hidden;
}

/* セクションタイトル */
.section-title {
  text-align: center;
  max-width: 900px;
  margin: 50px auto 15px;
}
.section-title .section-sub {
  display: block;
  font-size: 30px;
  letter-spacing: 0;
  color: var(--color-section-sub);
  text-transform: uppercase;
  margin-bottom: 6px;
  line-height: 1;
}
.section-title .section-main {
  display: inline-block;
  position: relative;
  padding: 0 20px;
  font-size: 23px;
  letter-spacing: 0.1em;
}
.section-title .section-main::before,
.section-title .section-main::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 250px;
  height: 1.5px;
  background-color: var(--color-main);
  transform: translateY(-50%);
}
.section-title .section-main::before {
  left: calc(-150px - 110px);
}
.section-title .section-main::after {
  right: calc(-150px - 110px);
}

/* 各色テーマ */
.title-sonota .section-main::before,
.title-sonota .section-main::after {
  background-color: var(--color-sonota);
}
.section-subtitle {
  /* 文字の太さと大きさを控えめに調整 */
  width: 100%;
  text-align: center;
  font-size: 20px; /* 修正箇所1：文字の大きさを変更 */
  font-weight: normal; /* 修正箇所2：文字の太さを変更 */
  letter-spacing: normal; /* 修正箇所3：文字間隔を標準に戻す */
  color: #000;
  margin-bottom: 20px;
}

.desc {
  font-size: 20px;      /* 説明文はタイトルより小さめ */
  color: #000;          /* 少し淡いグレーで柔らかく */
  line-height: 1.6;     /* 行間をゆったり */
  margin: 6px 0 0;      /* タイトルとの間隔だけ少しあける */
  text-align: center;   
  font-weight: 400;     /* 細めの文字に設定 */
  text-align: center;   /* 中央揃え */
}


/* 商品ブロック全体 */
.new-item-block {
  width: 90%;
  max-width: 900px;
  margin: 50px auto;
  background-color: #fff;
  padding: 20px;
  position: relative;
}

/* 2カラムレイアウトの設定 */
.item-container {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 画像と詳細の高さを上揃えにする */
  gap: 24px;
  margin-top: 30px;
  flex-wrap: nowrap;
}

/* 画像ブロック */
.item-image {
  flex: 1;
  min-width: 280px;
  max-width: 397px;
  height: auto;
}
.main-item-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
/* 画像下のカラーバリエーション画像 */
.color-variations {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  width: 100%;
  margin-top: 10px;
}
.color-variations .color-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* 右側のベタ塗りブロックのスタイル */
.item-details {
  background-color: #f3efec; /* ベタ塗りの色 */
  padding: 20px; /* 内側の余白 */
  flex: 1; /* 親要素に合わせて幅を自動調整 */
  min-width: 300px;
  max-width: 450px;
  height: 100%; /* 親要素の高さに合わせる */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* コンテンツを上揃えに */
  align-items: center;
  text-align: center;
}

.item-code {
  font-size: 30px;
  font-weight: bold;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.item-description {
  font-size: 16px;
  margin: 15px 22px 16px;
  text-align: center;
}

/* サブ画像ブロック */
.sub-thumbs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}
.thumb-block {
  flex: 1;
  text-align: center;
}
.thumb-block img {
  width: 160px;
  height: 100px;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px;
}
.size-icons {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.size-icon {
  display: inline-block;
  padding: 6px 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}

.section-divider {
  border: none;
  height: 1.2px;
  background-color: #A9A9A9;
  margin: 60px auto 60px;
  max-width: 360px;
}


/* カラバリ丸アイコン */
.color-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 8px auto 14px;
}
.color-icons img {
  width: 28px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #000;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .item-container {
    flex-direction: column;
    align-items: center;
  }
  .item-image,
  .item-details {
    width: 100% !important;
    max-width: none !important;
    margin-top: 0;
  }
  .item-details {
    margin-top: 20px;
  }
}

@media (max-width: 600px) {
  .color-variations .color-item {
    width: 100% !important;
  }
  .color-variations .color-item img {
    height: auto;
  }
}

.new-item-block[data-code="1set-huton"] .item-details .color-icons img {
    width: 40px !important;
    height: 40px !important;
    max-width: none !important;
    object-fit: cover;
    border: 1px solid #000;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

/* 右側のベタ塗り部分の幅を均等に調整 */
.new-item-block .item-container {
    gap: 0px; /* 画像とテキストの間の余白をなくす */
}

.new-item-block .item-details {
    flex-grow: 1; /* 親要素の残りのスペースをすべて占める */
    width: auto; /* widthを自動調整に設定 */
}


.new-item-block[data-code="1set-huton"] .item-details {
    /* 画像の高さに合わせて、ベタ塗り部分の最小高さを設定 */
    min-height: 448px; 
    height: auto;
}

.new-item-block .size-icon {
    font-size: 18px; /* 16pxに調整。ご希望に応じて変更してください */
}

/* 他のサイズ表記にも影響しないよう、セレクタを詳細に指定 */
.new-item-block[data-code="1set-huton"] .item-details .sub-thumbs .thumb-block .size-icons .size-icon {
    font-size: 18px; /* 優先度を高めて確実に適用 */
}

/* 写真上の図形表記スタイル */
.shape-label-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0 0 10px 0;
}

.shape-label {
    font-size: 17px;
    font-weight: bold;
    color: #333;
}

/* 親要素のpositionをrelativeに設定 */
.item-image, .color-item {
    position: relative;
    overflow: hidden;
}

/* レスポンシブ対応の調整 */
@media (max-width: 768px) {
    .shape-label-wrapper {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* 写真上の図形表記スタイルをベタ塗りの色と合わせ、サイズを大きくする */
.shape-label-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 10px 10px; /* パディングを大きくしてサイズ調整 */
    background-color: #f3efec; /* ベタ塗りの背景色と同じ色に設定 */
    border-radius: 0 0 10px 0;
}

.shape-label {
    font-size: 16px; /* フォントサイズを大きくする */
    font-weight: bold;
    color: #333;
}

/* 写真上の図形表記を内側に調整 */
.shape-label-wrapper {
    left: 10px; /* 左からの余白を10pxに設定 */
}

/* 写真上の図形表記を上側にも調整 */
.shape-label-wrapper {
    top: 10px; /* 上からの余白を10pxに設定 */
}

/* 写真上の図形表記のベタ塗り部分を全て丸角にする */
.shape-label-wrapper {
    border-radius: 10px !important; /* すべての角を10pxで丸める */
}

/* KH-1800のメイン画像のサイズを357x337pxに固定 */
.new-item-block .item-container .item-image img[src*="kh1800.jpg"] {
    width: 400px !important;
    height: 337px !important;
    object-fit: cover !important;
}

/* 「天板のみ」と「テーブルヒーター」の枠線を文字幅に合わせる */
.section-subtitle {
    display: inline-block; /* これが重要です */
    border: 1px solid #000;
    padding: 8px 16px;
    border-radius: 5px;
    
    /* 元のスタイルを上書きして幅を文字に合わせる */
    width: auto;
    text-align: center;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

/* 「天板のみ」と「テーブルヒーター」の枠線を中央揃えにする */
.section-subtitle {
    display: block; /* ブロック要素にして中央揃えを可能にする */
    width: fit-content; /* 文字の幅に合わせる */
    margin-left: auto;
    margin-right: auto;
}

.color-variations .color-item img[src*="kt508WHimg.jpg"] {
  height: 215px !important; /* 高さを調整して画像を大きくする */
}

/* KT-507のカラバリ画像を大きくする */
.new-item-block .item-details .color-icons img[src*="507_c1.jpg"],
.new-item-block .item-details .color-icons img[src*="kt508wh.jpg"] {
    width: 40px !important;
    height: 40px !important;
}

/* KT-507のメイン画像を強制的に大きくする */
.new-item-block .item-image img[src*="kh1800.jpg"] {
  height: 400px !important;
  width: auto !important;
}

/* KT-507のサイズ表記の余白をなくす */
.new-item-block[data-code="kt507"] .thumb-block {
    margin: 0 !important;
}

.new-item-block[data-code="kt507"] .thumb-block .size-icons {
    display: flex !important;
    gap: 0 !important;
}

.new-item-block[data-code="kt507"] .size-icon {
    margin: 0 !important;
    padding: 2px !important;
}

/* KT-507のサイズ表記のベタ塗りの幅を調整 */
.new-item-block[data-code="kt507"] .size-icon {
  padding: 2px 8px !important; /* 左右の余白を増やして幅を広げる */
}

/* ナビゲーションメニューのボタンデザイン */
.menu li a {
    display: block;
    text-decoration: none;
    color: var(--color-text);
    font-weight: bold;
    padding: 8px 8px;
    font-size: 18px;
    text-align: center;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    border: 1px solid #ccc;
    box-sizing: border-box;
    /* 変更・追加部分 */
    background-color: #f3efec; /* 新しい背景色 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 影を少し強調 */
}

.menu li a:hover {
    /* 変更・追加部分 */
    background-color: var(--color-menu-hover-bg);
    border-radius: 0;
    color: #000;
    box-shadow: 0 3px 4px rgba(0,0,0,0.15); /* ホバー時の影も強調 */
}