@charset "UTF-8";
  html {font-size: 62.5%;}
  body {width: 100%;color: #000;font-family: "YuGothic", "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height: 1.6;word-wrap: break-word;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
  .container {display: flex; flex-flow: column nowrap;}
  .headerImagePG {width: 250px;padding: 20px 30px;display: block;margin: 0 auto;}
  
  /* リード文・アンバサダーエリア */
  .readAreaPB {overflow: hidden;position: relative;max-width: 1000px;padding-bottom: 10px;margin: 0 auto;}
  .readAreaPB__text {position: relative;text-align: center;font-size: 14px;line-height: 2;margin: 7px 0px 43px;}
  .readAreaPB__image {margin: 60px 28px 0;}
  .blandAmbassadorPG {width: 700px;max-width: calc(100% - 60px);margin: 60px auto 25px;border: solid 1px #00235F;padding: 38px 15px;font-size: 14px;text-align: center;}
  .blandAmbassadorPG__role {color: #00235F;margin-bottom: 14px;font-family: 'Noto Serif JP', serif;}
  .blandAmbassadorPG__name {font-size: 20px;font-family: 'Noto Serif JP', serif;}
  .blandAmbassadorPG__text {font-size: 13px;line-height: 2.5;white-space: nowrap;}

  /* メインタイトルエリア */
  .titlePGWrap {position: relative;height: 50px;}
  .titlePGWrap_2line {height: 100px;margin-bottom: 50px}
  .titlePG {position: absolute;left: 50%;transform: translate(-50%, -50%);padding: 20px 0 0;font-size: 18px;line-height: 2;white-space: nowrap;font-family: 'Noto Serif JP', serif;color: #4F545C;background-image: url(../platinumguild/img/title_efect.png);background-position: top 10px left 0%;background-repeat: no-repeat;}

  /* 商品リストエリア（共通・SP用設定） */
  .contentBlock_itemList {position: relative;padding: 48px 15px 0;margin: 20px 0 40px;background: #00235F;}
  .itemListPG {
    position: relative;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px;
    margin: 0 auto;
    background: #00235F;
}

/* SPでの2列表示設定 */
.itemPG {
    width: calc((100% - 16px) / 2); /* 全体幅から隙間(16px)を引いて2等分 */
    margin-bottom: 30px; 
    display: flex; 
    flex-direction: column;
}
  .itemPG {width: calc(50% - 8px); margin-bottom: 30px; display: flex; flex-direction: column;}
  .itemPG__main {background: #fff; flex-grow: 1;}
  .itemPG__image {width: 100%; display: block;}
  .itemPG__textWrap {padding: 10px; font-family: sans-serif;}
  .itemPG__name, .itemPG__price {font-size: 11px; color: #000;}
  .itemPG__textWrap_pc {display: none;}
  
  .itemPG__link {position: relative;display: block;width: 100%;height: 35px;margin-top: 10px;text-align: center;line-height: 33px;font-size: 12px;color: #fff;border: solid 1px #ffffff5e;text-decoration: none;}
  .itemPG__link::after {content: ""; position: absolute; top: 0; bottom: 0; right: 10px; margin: auto; width: 5px; height: 5px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg);}

  /* フッター共通 */
  .footerArea {padding: 15px 28px;text-align: center;font-size: 13px;line-height: 2;}
  .footerText_large {margin-bottom: 40px;color: #4F545C;font-size: 18px;font-family: 'Noto Serif JP', serif;}
  
  /* フッターリンク・バナー追加分 */
  .footerLink {margin: 40px 0 63px; text-align: center; font-size: 13px; color: #4F545C;}
  .platinumWomanLink {display: block; width: 220px; margin: 15px auto 0;}
  .platinumWomanLink img {width: 100%; vertical-align: bottom;}
  .kataribaLogo {display: block; overflow: hidden; width: 160px; margin: 0 auto 10px;}
  .kataribaLogo img {width: 100%; vertical-align: bottom;}
  .footerText {text-align: center; font-size: 12px; margin-bottom: 40px;}
  .footerText a {color: #4F545C; text-decoration: none;}

  /************************************* PC設定 (768px以上) ****************************************/
  @media only screen and (min-width: 768px) {
    .headerImagePG {width: 400px; padding: 50px 30px;}
    .titlePG {font-size: 32px;}
    
    .contentBlock_itemList {padding: 60px 20px 20px;}
    .itemListPG {max-width: 1100px;}
    .itemPG {width: calc(25% - 15px); margin-bottom: 50px;}
    .itemPG__textWrap {display: block; background: #fff;}
    .itemPG__name, .itemPG__price {font-size: 13px;}
    
    /* フッターPC用 */
    .footerArea {font-size: 20px; margin-top: 35px;}
    .footerLink {font-size: 16px;}
    .platinumWomanLink {width: 380px; margin-top: 20px;}
    .kataribaLogo {width: 200px;}
    .footerText {font-size: 14px;}
    .footerText_large {font-size: 30px;}

    .novelty-case {max-width: 830px; margin-bottom: 60px;}
    .novelty-case__ttl {font-size: 32px;}
  }

 /* ボタンにマウスが乗った時の上品なアニメーション */
.itemPG__link {
  transition: all 0.3s ease; /* 変化をなめらかにする */
}

.itemPG__link:hover {
  opacity: 0.7; /* ほんのり薄くする */
  letter-spacing: 0.1em; /* 文字の感覚を少し広げて上品に動かす */
  text-decoration: underline; /* 控えめに下線を出す */
}

/* ===================================================
   ★ここから下が変更・修正したエリアです
=================================================== */

/* 商品カード全体（画像＋白いテキストエリア）のベース設定 */
.itemPG__main {
  transition: transform 0.4s ease, box-shadow 0.4s ease; /* 浮き上がる動きを滑らかに */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); /* 通常時のごく薄い、上品な影（すでにあれば不要です） */
}

/* マウスが乗ったとき、商品カード全体をセットでふんわり浮かせる */
.itemPG__main:hover {
  transform: translateY(-5px); /* 5pxだけ上にスッと浮き上がらせる（隙間はできません） */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06); /* 浮いた立体感を出すための上品な影 */
}

/* 画像単体の拡大指定は、隙間の原因になるため「削除」または「動きをリセット」します */
.itemPG__image {
  transition: none; /* 単体でのアニメーションは不要に */
}

.itemPG__main:hover .itemPG__image {
  transform: none; /* 画像だけが単体で拡大するのをストップ */
}

/* --- PCでの画像巨大化（ダイナミック表示）を防ぐ修正 --- */

/* スマホでは画面いっぱいに表示 */
.readAreaPB-image-container {
  width: 100%;
  margin: 0 auto;
}

/* PC（画面幅768px以上）のときだけ、上品なサイズ（例: 800px）に制限して中央に寄せる */
@media screen and (min-width: 768px) {
  .readAreaPB-image-container {
    max-width: 800px; /* ★ここでお好みの横幅に固定できます。現在のデザインに合わせて数値を調整してください */
    padding: 0 20px;   /* 左右に少しだけ余白を作って画面に張り付くのを防ぐ */
  }
  
  .readAreaPB__imageWrap {
    width: 100%;
    height: auto;
    display: block;
  }
}

.itemPG__main a {
  position: relative;
  display: block;
}

.itemPG__main a span {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.2rem;
  font-family: "Helvetica", sans-serif;
  background: #f6f5f3;
  padding: 0.2rem 0.8rem;
  line-height: 1;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .itemPG__main a span {
    top: 0.7rem;
    right: 0.7rem;
    font-size: 1rem;
  }
}
/* ==========================================================================
   1. 「未来に向かって、私らしく」の余白調整
   ========================================================================== */
.titlePGWrap {
    /* 必要に応じて、1つ目のブロック全体の上下余白を調整 */
    margin: 20px;
}

/* ==========================================================================
   2. 「プラチナのまっすぐな輝き。〜」の余白調整
   ========================================================================== */
/* 2行になる見出しの「外側の枠（Wrap）」の余白を個別に上書き */
.titlePGWrap_2line {
    margin-top: 100px;    /* 1つ目の要素との間隔（広げたい場合は数値を大きく） */
}

/* もし「文字自体の上下の隙間（行間）」を広げたい場合 */
.titlePG_center {
    line-height: 1.6;    /* 1.5 〜 1.8 あたりが美しく見えます */
}