/*========================================
  全体共通／洗練デザイン調整
========================================*/

/* テーマ変数（冬の夜空と雪の色味） */
:root {
  --sky-dark:   #132039; /* 夜空の深いネイビー */
  --sky-mid:    #1E3A5F; /* 月明かりのミッドナイトブルー */
  --snow-white: #F1F3F5; /* 雪面のやわらかいオフホワイト */
  --star-gold:  #FFD700; /* 星屑のゴールド */
}

/* セット内容タイトル装飾 */
.set-items__title,
.product-details__title {
  font-size: 23px;
  font-weight: 700;
  color: #132039;            /* 夜空のネイビー */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid #e35205;
  padding-bottom: 0.4rem;
  margin-bottom: 1.6rem;
  line-height: 1.4;
}

/* セットコンテンツテキストサイズ調整 */
.set-items__genre,
.set-items__size {
  font-size: 23px;
  line-height: 1.4;
}
.image-text-block .text-content h3,
.image-text-block .text-content p {
  font-size: 23px;
  line-height: 1.4;
}

/* セット内容リストのグリッド設定 */
.set-items__list {
  display: grid;
  margin-top: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* SPは2列 */
}

@media screen and (min-width: 768px) {
  /* image-text-block 内テキスト配置を画像縦位置中央に */
  .image-text-block {
    align-items: center;
  }

  .image-text-block .text-content {
    flex: 1;
    font-size: 18px; /* pタグ等の基本フォントサイズに */
    color: #333;
  }

.image-text-block .text-content img {
  display: block !important;
  max-width: 100px !important;
  height: auto !important;
  margin: 0px -2px !important;
}    
    
  /* 製品名（product-nameがついている想定） */
  .product-name {
    font-size: 20px;
    font-weight: bold;
  }

  /* h3 見出し */
  .image-text-block .text-content h3 {
    font-size: 23px;
    margin-top: 0;
  }

  /* ジャンルテキスト（set-items__genre）と段落p */
  .set-items__genre, 
  .image-text-block .text-content p {
    font-size: 17px;
  }
}


/* 画像ラッパー中央寄せ＆余白 */
.image-wrapper {
  margin-bottom: 1rem;
  text-align: center;
}
.image-wrapper img {
  width: 80%;
  max-width: 160px;
  height: auto;
}

/* セットアイテムボックス */
.set-items__item {
  background: #fff;
  text-align: center;
}

/* CTAボタンデザイン */
.set-items__cta {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.3rem 0.8rem;
  background: linear-gradient(135deg, #556B7A 0%, #3E5363 100%);
  color: #fff !important;
  font-weight: 600;
  font-size: 12px;
  border-radius: 25px;
  text-decoration: none;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: background 0.3s ease;
  text-align: center;
}
.set-items__cta:hover {
  background: linear-gradient(135deg, #556B7A 0%, #3E5363 100%);
}

/* 製品詳細セクション全体 */
.product-details {
  padding: 0 1rem;
  margin: 2rem auto;
  max-width: 900px;
}

/* 製品詳細タイトル */
.product-details__title {
  font-size: 18px;
  font-weight: bold;
  color: #132039;
  margin-bottom: 1.5rem;
}

/* 追加部分：製品詳細（product-detail） */
.product-detail {
  display: flex;
  padding-top: 10px;
  margin-bottom: 20px;
}

.product-image {
  flex: 1 1 40%;
  margin-right: 0;
  padding-right: 0;
}

.product-text {
  flex: 1 1 60%;
  padding-left: 0;
  padding-top: 20px;
  font-family: "Yu Gothic", "Meiryo", sans-serif;
  font-size: 14px;
  color: #000;
}


.product-title {
  font-weight: bold;
  font-size: 16px;
  margin-top: 25px;
  margin-bottom: -12px;
}

.product-highlight {
  display: flex;
  font-weight: bold;
  color: #c5ac6b;
  font-size: 20px;
}

@media screen and (max-width: 768px) {
  .product-highlight {
    /* 横幅いっぱいに広げて左寄せにする */
    width: 100%;
    justify-content: flex-start !important;
    margin-bottom: 8px; /* h3との間に適度な余白 */
  }

  /* product-highlightがh3の上にくるようにHTML構造が必要です。 */
}


.product-highlight img.crown-icon {
  width: 30px !important;
  height: 30px !important;
  margin-right: 6px !important;
  display: inline-block !important;
}


.orange-highlight {
  background: #f66b00;
  color: white;
  font-weight: bold;
  font-size: 13px;
  padding: 6px 14px;
  margin-left: 20px;
  border-radius: 20px;
}

.product-description {
  margin: 6px 0 12px;
  font-size: 16px;
  line-height: 1.3;
}

.footnote {
  font-size: 14px;
  text-align: left;
  margin-top: 10px;
}

/* SP対応 */
@media screen and (max-width: 768px) {
  .product-detail {
    flex-direction: column;
  }
  .product-image {
    width: 100%;
    flex: none;
    margin-bottom: 12px;
  }
  .product-text {
    padding-left: 0;
  }
  .product-highlight {
    flex-wrap: wrap;
    font-size: 14px;
  }
  .orange-highlight {
    margin-left: 0;
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 14px;
  }
}

/* image-text-block設定：横並び崩さず区切り線を下に入れる */
.image-text-block {
  display: flex;
  gap: 1.5rem;
  max-width: 900px;
  margin: 4rem auto 4rem auto;
  border-bottom: 1.5px solid #1a2a4f;
  padding-bottom: 4rem;
  background: transparent;
  border-radius: 0;
}

/* image-text-block直下の次の要素との間に余白 */
.image-text-block + .image-text-block {
  margin-top: 2rem;
}

/* image-text-block 画像 */
.image-text-block .text-content {
  flex: 1;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}

.image-text-block .text-content h3 {
  margin-top: 10px;
  text-transform: none;   /* 小文字化や大文字化の影響をなくす */
  letter-spacing: 0.03em; /* 少し文字間を広げる */
}

/* SP用スタイル */
@media screen and (max-width: 767px) {
  .set-items,
  .set-items__list,
  .product-details,
  .image-text-block {
    padding: 0 11px;
  }
  .set-items__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .set-items__title,
  .set-items__genre,
  .set-items__size,
  .product-details__title,
  .image-text-block .text-content h3,
  .image-text-block .text-content p {
    font-size: 16px;
    line-height: 1.8;
  }
  .image-text-block {
    flex-direction: column;
    border-bottom: 0.5px solid #1a2a4f;
    padding-bottom: 4rem;
    max-width: 100%;
  }
  .image-text-block img {
    width: 100%;
    max-width: 400px;
    margin-bottom: 1rem;
  }
  .image-text-block .text-content {
    font-size: 15px;
  }
  .image-text-block .text-content h3 {
    font-size: 19px;
  }
  .product-detail-image-block img {
    width: 30%;
    max-width: 120px;
    margin: 0 auto 1.5rem auto;
    border-radius: 0 !important;
  }
}

/* CTAボタンの長さ統一と矢印追加 */
.set-items__cta {
  min-width: 170px;
  width: auto;
  padding: 0.4rem 1.2rem;
  text-align: center;
}
.set-items__cta::after {
  content: ' > ';
}

/* PCでのセット内容4列グリッド */
@media screen and (min-width: 768px) {
  .set-items__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 1rem;
  }

  /* 上段：1〜3番目のアイテムを1行目に */
  .set-items__list > :nth-child(-n+3) {
    grid-column: span 1;
    grid-row: 1;
  }

  /* 4番目以降（4-7番目）を2行目に */
  .set-items__list > :nth-child(n+4) {
    grid-column: span 1;
    grid-row: 2;
  }
}


.product-detail {
  display: flex;
  gap: 20px; /* 画像とテキストの間の余白 */
  align-items: flex-start; /* テキストを上揃え */
}

.image-text-block > img {
  width: 400px; /* 画像サイズ */
  max-width: 100%;
  height: auto;
}

.product-text {
  flex: 1; /* テキストは残りの横幅を占める */
  padding-left: 0; /* 必要に応じ調整 */
}

.product-subtext {
  font-size: 16px;
  margin-top: 15px;
}

  /* ベスコス */
.award-container {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.award-container .award-icon {
  width: 30px;  /* サイズ例 */
  margin-right: 8px;
  display: inline-block;
}

.award-text {
  font-weight: bold;
  font-size: 16px;
  color: #c5ac6b;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  /* 追記：image-text-block 内画像の中央寄せ */
  .image-text-block {
    flex-direction: column;
    align-items: center; /* 画像とテキスト全体を中央揃え */
  }
.image-text-block h3 {
  font-weight: bold; /* 太字 */
  font-size: 20px; /* サイズはご希望のピクセル数に調整してください */
}

/* SP（768px以下） */
@media screen and (max-width: 768px) {
  .image-text-block h3 {
    font-size: 19px; /* PCより少し小さめに調整 */
    margin-top: 10px;
  }
}

/*----------------------------------------
  SP（768px以下）の調整
----------------------------------------*/
@media screen and (max-width: 768px) {
  .page-intro {
    padding: 0 11px;
  }
  .page-intro__title {
    font-size: 17px;       /* 少し小さめに */
    /* text-align: center; デフォルトで中央 */
  }
  .page-intro__desc {
    font-size: 14px;       /* 少し小さめに */
    text-align: left;      /* SP：左揃え */
    margin: 0;             /* フル幅で左揃え */
    max-width: none;
  }
}    
    
    
/*----------------------------------------
  ページイントロ見出し
----------------------------------------*/
.page-intro {
  max-width: 900px;
  margin: 4rem auto;
  padding: 0 1rem;
}

.page-intro__title {
  font-size: 19px !important;
  font-weight: bold !important;
  line-height: 2 !important;
  color: #132039 !important;
  text-align: center !important;
  margin-bottom: 1.5rem !important;
}
.page-intro__desc {
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: #333333 !important;
  text-align: left !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}
    
.image-text-block .text-content img {
  display: block !important;
  max-width: 30% !important;
  height: auto !important;
  margin: 5px -2px !important;
}

/* PC：通常画像（詳細イメージ） */
@media screen and (min-width: 768px) {
  .image-text-block img {
    width: 300px;
    max-width: 100%;
    height: auto;
  }