/* style.css */

  .section-heading {
    text-align: center;
    margin-bottom: 30px;
  }
  .section-number {
    display: block;
    font-size: 3rem;
    font-family: 'Georgia', serif;
    color: #888;
    margin-bottom: 8px;
    letter-spacing: 2px;
  }

.section-title {
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: 600;
  font-family: 'Noto Sans JP', sans-serif;
  color: #222;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-align: center;
  white-space: normal;       /* ← 改行OK */
  word-break: keep-all;
  max-width: none;           /* ← 幅制限を外す */
  margin: 0 auto;
}

.first-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 80px;
}

.product-info-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* ← この値をお好みで！狭くしたいなら8pxとか */
}

.section-padding {
  padding: 80px 0; /* 上下に80pxの余白 */
}

  /* フォント変更 */
  body {
    font-family: 'Noto Sans JP', sans-serif;
  }

.main-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  line-height: 0;           /* ← 親要素の空行による影響も防げる */
}


.example {/*親div*/
  position: relative;
  margin-bottom: 0;
  padding-bottom: 0;
  line-height: 0;
  }

.example p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  /*文字の装飾は省略*/
  }

  .logo-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;  /* ← ロゴサイズはお好みで調整 */
  height: auto;
  pointer-events: none; /* クリックなどの操作を画像下に通す（任意） */
}

  @media (max-width: 600px) {
  .logo-img {
    width: 400px; /* スマホで少し小さめに */
  }
}


body {
  font-family: 'Hiragino Mincho ProN', 'serif'; /* 上品な明朝体系 */
  font-size: 15px; /* 全体ベースサイズ */
  line-height: 1.8;
  color: #333;
  
}

.intro-message {
  text-align: center;
  padding: 40px 16px;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 0; /* 余白を減らす */
}

.main-content {
  margin-top: 0; /* 余計な上マージンを消す */
}


.intro-message p {
  word-break: keep-all;
  white-space: normal;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 0; /* デフォルト余白をリセット */
}

@media (max-width: 600px) {
  .intro-message p {
    font-size: 13px;
    line-height: 1.6;
  }
}

.slider-container {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 20px;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%; /* スライド枚数に応じて調整 */
}

.slider img {
  width: 100%;
  height: auto;
  display: block;
}

.slider-container {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/*-----メインコンテンツ用-----*/
.main-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px; /* ← PCでは固定サイズ感を出す */
  margin: 60px auto 40px; /* 上に60px、下に40px */
  text-align: center;
  margin-bottom: 40px; /* ← 画像のまとまりの下に余白 */
}

.main-image {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 24px; /* ← 下に余白を追加！ */
}

.main-label {
  position: absolute;
  top: -120px;
  left: -20px;
  font-size: 8rem;
  color: #444444;
  font-weight: 500;
  font-family: 'Georgia', 'Times New Roman', serif; /* ← 上品フォント */
  letter-spacing: 0.05em;
  background: none; /* ← 背景なし */
  padding: 0;        /* ← パディングも不要 */
}

.main-description {
  text-align: center;
  padding: 40px 16px;
  max-width: 800px;
  margin: 0 auto;
}

.main-description p {
  font-size: 15px;
  line-height: 1.8;
  word-break: keep-all;
  white-space: normal;
}

@media (max-width: 600px) {
  .main-label {
    font-size: 7rem;
    top: -100px;
    left: -12px;
  }

  .main-image {
    max-width: 100%; /* スマホでは画面に合わせて縮小！ */
  }
}

/*メイン画像の下のスライド画像用*/

.sub-slide {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 0;
}

.sub-slider {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 30px auto 0;
  height: auto; /* ← ここでは効かないかも？ */
  aspect-ratio: 3 / 4; /* ← または高さ確保のための比率指定 */
}

.sub-slide.active {
  opacity: 1;
  z-index: 1;
}


/*商品グリッド用*/
.product-box {
  max-width: 800px;
  margin: 60px auto;
  padding: 20px;
  text-align: center;
}

.product-title {
  font-size: 1.5rem;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.product-image {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin-bottom: 20px;
}

.product-description {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 20px;
  padding: 0 16px;
}

.product-links {
   display: flex;
  flex-direction: row; /* ← 横並びに */
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap; /* スマホ時に自然に折り返し */
  margin-top: 20px;
}

.buy-button {
  display: inline-block;
  padding: 8px 16px; /* ← 小さめに */
  font-size: 0.9rem; /* ← 控えめに */
  border: 1.5px solid #000;
  text-decoration: none;
  color: #000;
  transition: all 0.3s ease;
  min-width: 140px;
  text-align: center;
}

.buy-button:hover {
  background-color: #000;
  color: #fff;
}
.product-sub-images {
  max-width: 600px; /* ← 上の画像と合わせる！ */
  width: 100%;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
  margin: 0 auto;
}

.product-sub-images img {
  width: 48%;
  height: auto;
  max-width: 100%; /* ← 親の制限に合わせて縮む */
  display: block;
  object-fit: cover;
  border-radius: 4px;
}

/* スマホ向けレイアウト調整 */
@media (max-width: 600px) {
  .product-sub-images {
    flex-direction: column;
    align-items: center;
  }

  .product-sub-images img {
    width: 100%; /* スマホは縦並び＆横幅いっぱいに */
  }
}

.floating-link {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #000;
  color: #fff;
  padding: 10px 14px;
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 4px;
  opacity: 0.6;
  transition: all 0.3s ease;
  z-index: 999;
}

.floating-link:hover {
  opacity: 1;
  background-color: #111;
}

.thumbnail-grid {
  display: flex;
  flex: 0 0 calc(50% - 12px); /* スマホ時は横2列 */
  justify-content: flex-start; /* リセット：左揃えに */
  gap: 12px; /* 適宜調整 */
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 16px;
}

.thumbnail-item {
  background-color: #fff;
  text-decoration: none;
  color: #000;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: none;
  transition: box-shadow 0.3s ease;
  display: block;
  padding: 10px;
  flex: 0 1 calc(33.333% - 20px); /* 3列を想定 */
  box-sizing: border-box;
}

.thumbnail-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.thumbnail-item img {
  width: 100%;
  height: auto;
  display: block;
}

.thumb-info {
  padding: 12px;
  text-align: center;
}

.thumb-name {
  font-size: 0.95rem;
  margin-bottom: 4px;
  word-break: keep-all; /* 日本語単語の途中で改行しない */
  white-space: normal;
}

.thumb-price {
  font-size: 0.85rem;
  color: #555;
}

/* セクション背景フェードイン用 */
.faded-bg {
  background-color: rgba(173, 216, 230, 0.15); /* 薄いブルー */
  padding: 80px 0; /* 上下に80pxずつ余白 */
  transition: background-color 1s ease-in-out;
}

.faded-bg.visible {
  opacity: 1;
}

.faded-bg.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.faded-bg.fade-in-section.visible {
  opacity: 1;
  transform: none;
}


/* スマホ対応（2列） */
@media (max-width: 600px) {
  .thumbnail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.thumbnail-heading {
  text-align: center;
  font-size: 1.4rem;
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  margin: 60px 0 20px;
  color: #333;
  letter-spacing: 1px;
}

/*メイン画像説明の文字用*/

.sub-description {
  background: none;
  border: none;
  box-shadow: none;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin: 20px auto 40px;
  padding: 0 20px;
  max-width: 700px;
}

.sub-description .point-title {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 8px;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
}


.product-info-block {
  text-align: center;
  margin: 12px 30px; /* ← 適度な間隔に調整 */
}

.product-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  text-decoration: none;
  gap: 16px;
  font-family: 'Noto Sans JP', sans-serif;
  flex-wrap: nowrap; /* ← 改行させない！ */
  color: #000;
  font-size: clamp(0.8rem, 3vw, 1rem); /* ← 自動で縮小 */
}


.product-name {
  font-size: 1rem;
  font-weight: 600;
}

.product-price {
  font-size: 0.9rem;
  color: #444;
}

/* セクション2だけ中央寄せにする */
.center-grid .thumbnail-grid {
  justify-content: center;
}


.product-button {
  display: inline-block;
  padding: 6px 20px;
  border: 1.5px solid #000;
  font-size: 0.85rem;
  background-color: transparent;
  color: #000;
  border-radius: 0; /* ← 角丸なし！ */
  transition: all 0.3s ease;
}

.main-display {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 8px;
}

/* ── 基本（PC含む） ── */
.color-palette {
  display: flex;
  flex-wrap: nowrap;         /* 折り返さない */
  justify-content: center;
  gap: 12px;
  margin: 40px auto;
  overflow-x: auto;          /* はみ出てもスクロール可能（任意） */
  max-width: 100%;           /* 全体幅に合わせる */
}

.palette-thumb {
  width: 60px;
  height: 80px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border 0.3s ease;
}

.palette-thumb.active,
.palette-thumb:hover {
  border: 2px solid #000;
}


.product-link:hover .product-button {
  background-color: #000;
  color: #fff;
}

.main-display-container {
  position: relative;
  width: 100%;
  max-width: 400px; /* メイン画像を少し小さく */
  margin: 0 auto;
}

.main-display {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.color-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Noto Sans JP', sans-serif;
}

.more-color-tag {
  position: absolute;
  top: -10px;
  left: -40px;
  transform: rotate(-45deg); /* ← 明示的に再指定 */
  font-family: 'Dancing Script', cursive;
  font-size: 2.5rem;
  color: #000000;
  padding: 4px 12px;
  z-index: 20;
  pointer-events: none; /* クリック干渉を防ぐ */
}

.more-color-tag.visible {
  opacity: 1;
  /* transformの上書きなしで斜めを維持！ */
}

.more-color-tag {
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}

.more-color-tag.fade-in-color.visible {
  opacity: 1;
  transform: rotate(-45deg); /* ← 明示再指定で安心 */
}


.main-display-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.main-image-link {
  display: block;
  position: relative;
}

.main-image-link img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

.main-image-link:hover img {
  opacity: 0.7;
}

@media (max-width: 480px) {
  .product-quick-info {
    font-size: 0.8rem;
  }

  .quick-check-button {
    font-size: 0.75rem;
    padding: 3px 8px;
  }
}


/* スマホ対応（文字サイズを少し小さく） */
@media (max-width: 600px) {
  .color-tag {
    font-size: 0.8rem;
    top: -6px;
    left: -30px;
  }
}

/*全体に対して指示*/
.sub-description p {
  white-space: normal !important; /* ← 強制的に折り返す */
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/*画像説明のデザインに関して*/
.point-title {
  font-family: 'Playfair Display', 'Georgia', serif; /* おしゃれ筆記体 */
  font-size: 1rem;
  font-weight: bold;
  color: #444;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 1px;
  letter-spacing: 1px;
  text-align: left;
}

.point-list {
  list-style-type: disc; /* or '・' */
  padding-left: 1.2em;
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: #444;
}

.point-list li {
  margin-bottom: 8px;
}
@media (max-width: 600px) {
  .point-title {
    font-size: 1rem;
  }

  .point-list {
    font-size: 12px;
  }
}
/*丸い説明デザイン*/
.circle-description {
  position: absolute;
  bottom: 20px;
  right: 600px;
  width: 220px;
  height: 220px;
  background-color: rgba(255, 147, 147, 0.954); /* 薄ピンクの透過 */
  border-radius: 50%;
  display: flex;
  flex-direction: column; /* ← 縦並びに！ */
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-size: 13px;
  color: #000;
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  line-height: 1.6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 10;
}


.circle-description h2 {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 2rem;
  margin: 0 0 0px;
}

.floating-site-link {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.3); /* スクロール中は透ける黒 */
  color: #fff;
  padding: 10px 16px;
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  z-index: 1000;
  pointer-events: auto;
}

.floating-site-link.stopped {
  background-color: rgba(0, 0, 0, 1); /* 停止中ははっきり黒 */
}


@media (max-width: 600px) {
  .circle-description {
    width: 160px;
    height: 160px;
    bottom: -20px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 12px;
    font-size: 12px;
    text-align: center;
  }

  .circle-description h2 {
    font-size: 1rem;
    margin-bottom: 6px;
  }
}


/* スマホでは中央寄せで固定せずに下に表示 */
@media (max-width: 600px) {
  .circle-description {
    position: absolute;
    bottom: -20px;
    left: 60%;
    transform: translateX(-50%);
    z-index: 5;
  }

  .sub-slider-wrapper {
    position: relative; /* ✅ 親に必須！ */
  }
}

.section-02 {
  position: relative;
}
/*円の位置の指示とか*/
.section-02 .circle-description {
  position: absolute;
  bottom: 20px;
  right: 100px;
  transform: none;
}

/*円の中の改行について*/
.circle-description p {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: keep-all; /* 日本語の途中で改行されないように */
}

/*ふわっとだす用*/
.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in-section.visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 600px) {
  .main-image-wrapper {
    margin: 40px auto 30px;
  }

  .color-palette {
    margin: 30px auto 60px;
  }
}


@media (max-width: 600px) {
  .product-link {
    flex-wrap: nowrap;  /* 改行しない */
    font-size: 0.8rem;   /* 全体を少し小さく */
  }

  .product-button {
    padding: 4px 12px;
    font-size: 0.75rem;
  }
}

@media (max-width: 600px) {
  .product-info-block {
    margin: 12px 16px; /* 左右も少し余裕を確保 */
  }

  .product-name {
    font-size: 0.9rem;  /* 少し小さく */
  }

  .product-price {
    font-size: 0.85rem;
  }

  .product-button {
    font-size: 0.75rem;
    padding: 4px 10px;
  }

  .product-link {
    gap: 10px;  /* 要素間の間隔を狭めて横幅節約 */
  }
}

/* モバイル表示（幅600px以下）：4個×2行に */
@media (max-width: 600px) {
  .color-palette {
    flex-wrap: wrap;         /* 折り返しON */
    max-width: 264px;        /* 60×4 + gap(12)×3 くらい */
    gap: 8px;
  }

  .palette-thumb {
    width: 50px;
    height: 70px;
  }
}

@media (max-width: 600px) {
  .product-link {
    flex-wrap: wrap;
    font-size: 0.75rem;
    gap: 8px;
  }

  .product-name,
  .product-price {
    font-size: 0.8rem;
  }

  .product-button {
    font-size: 0.75rem;
    padding: 4px 10px;
  }
}

/* スマホ対応：フォント少し小さく */
@media (max-width: 600px) {
  .thumb-name {
    font-size: 0.8rem;
  }
}

@media (max-width: 600px) {
  .product-link {
    flex-direction: column;
    text-align: center;
  }

  .product-name,
  .product-price {
    display: block;
    width: 100%;
  }

@media (max-width: 600px) {
  .thumbnail-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 12px;
  }
  .thumbnail-item {
    flex: 0 0 calc(50% - 12px);
    box-sizing: border-box;
  }
}

  .thumb-name {
    font-size: 0.75rem;
    word-break: break-word;
    white-space: normal;
  }

  .sub-description p {
    word-break: keep-all;
    white-space: normal;
    overflow-wrap: break-word;
  }
}

@media screen and (max-width: 600px) {
  .thumbnail-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  .thumbnail-item {
    flex: 0 0 48%;
    margin-bottom: 12px;
  }

  .thumb-name {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}