@charset "UTF-8";

html {
    font-size: 62.5%; /* 1rem = 10px となるように設定 */
}

/* 全てのフォントをFOT-ニューセザンヌ ProN DBに統一 */
body {
    font-family: "FOT-ニューセザンヌ ProN DB", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

/* ========================================================================
   全体レイアウト
======================================================================== */
main.main-area.lp {
    position: relative;
}

#contentsMain {
    color: #000; /* 基本の文字色を黒に設定 */
}

/* エリア共通の戻るボタン関連スタイル */
.area-back {
    padding: 0 0 20% 0;
    justify-content: space-around;
    display: flex;
}

.btn-back {
    justify-content: space-around;
    display: flex;
}

.button {
    display: flex;
    justify-content: center;
    margin: 2.5rem; /* PC版のマージンを適用 */
}

.button_design {
    width: 30rem;
    background-color: #B38B85;
    text-align: center;
    color: #FFF;
    font-family: 'Helvetica'; /* ヘルベチカは維持 */
    height: 5.5rem; /* PC版の高さ */
    font-size: 2rem; /* PC版のフォントサイズ */
    margin: 0 3rem; /* PC版のマージン */
    line-height: 5.2rem; /* PC版の行の高さ */
}

.button_margin {
    padding: 1.5rem 0;
}

/* LPページのロゴエリア */
.main-area.lp .logo-area {
    z-index: 10;
    position: absolute;
    text-align: center;
    font-weight: 500;
    top: 50%; /* PC版の位置 */
    left: 17%; /* PC版の位置 */
    transform: translate(-50%, -50%); /* 中央寄せ */
}

#contentsMain h1 {
    font-size: 5rem;
    font-family: 'Helvetica'; /* ヘルベチカは維持 */
}

/* ========================================================================
   フェードインアニメーション
======================================================================== */
#contentsMain .loadFade {
    opacity: 0;
    transform: translateY(10px);
    transition: all 1s;
}

#contentsMain .loadFade.done {
    opacity: 1;
    transform: translate(0, 0);
}

#contentsMain .scrollFade .fade1 {
    opacity: 0;
    transform: translateY(10px);
    transition: all 1s;
}

#contentsMain .scrollFade .fade2 {
    opacity: 0;
    transform: translateY(10px);
    transition: all 1s;
    transition-delay: 0.5s;
}

#contentsMain .scrollFade.done .fade1 {
    opacity: 1;
    transform: translate(0, 0);
}

#contentsMain .scrollFade.done .fade2 {
    opacity: 1;
    transform: translate(0, 0);
}

/* ========================================================================
   パンくずリスト
======================================================================== */
.breadcrumbBlock {
    background-color: #fff;
}

#breadcrumb {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    max-width: 120rem; /* PC版の最大幅 */
    padding: 1.15rem 0; /* PC版のパディング */
}

#breadcrumb li {
    /* font-family: "FOT-ニューセザンヌ ProN DB", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; */ /* bodyで設定するためコメントアウト */
    color: #1C1C1C;
    letter-spacing: .05em;
    font-size: 1.1rem; /* PC版のフォントサイズ */
}

#breadcrumb li.currentPage {
    color: #1C1C1C;
}

#breadcrumb li span {
    margin: 0 .5rem; /* PC版のマージン */
}

/* ========================================================================
   LP固有スタイル
======================================================================== */
#contentsMain .lp_main {
    background-color: #fff; /* デフォルトのlp_mainの背景色 */
    padding-bottom: 0rem; /* PC版のパディング */
}

#contentsMain .mvBlock {
    position: relative;
}

#contentsMain .mvBlock_an {
    position: relative;
    width: 70%; /* PC版の幅 */
    margin-left: auto;
    margin-right: auto;
}

/* テキストスタイル共通 */
#contentsMain .mainTxt2 {
    /* font-family: "FOT-ニューセザンヌ ProN DB", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; */ /* bodyで設定するためコメントアウト */
    line-height: 1.75;
    letter-spacing: .05em;
    text-align: center;
    color: #000;
    margin: 0 auto; /* PC版のマージン */
    padding: 5rem; /* PC版のパディング */
    font-size: calc(14*(100vw/1200)); /* PC版のフォントサイズ */
}

#contentsMain #NewArrival .mainTxt2 {
    padding: 3rem; /* PC版のパディング */
}

#contentsMain .lpInner h2 {
    font-family: 'Helvetica', Sans-serif; /* ヘルベチカは維持 */
    line-height: 1.2;
    letter-spacing: .05em;
    margin-top: 4rem; /* PC版のマージン */
    font-size: calc(24*(100vw/1200)); /* PC版のフォントサイズ */
}

#contentsMain .lpInner h3 {
    position: relative;
    color: #000;
    font-family: 'Helvetica', Sans-serif; /* ヘルベチカは維持 */
    font-weight: 400;
    font-style: normal;
    letter-spacing: .05em;
    margin-top: 1.4rem; /* PC版のマージン */
    padding-left: 4rem; /* PC版のパディング */
    font-size: calc(14*(100vw/1200)); /* PC版のフォントサイズ */
}

#contentsMain .lpInner h3::before {
    content: '';
    display: block;
    position: absolute;
    top: .7rem; /* PC版の位置 */
    left: 0;
    width: 3rem; /* PC版の幅 */
    height: .1rem; /* PC版の高さ */
    background-color: #ffffff; /* 白いライン */
}

#contentsMain .lpInner .lpTxt {
    /* font-family: '"FOT-ニューセザンヌ ProN DB", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif'; */ /* bodyで設定するためコメントアウト */
    line-height: 1.75;
    letter-spacing: .05em;
    margin-top: 3rem; /* PC版のマージン */
    font-size: calc(14*(100vw/1200)); /* PC版のフォントサイズ */
}

#contentsMain .lpInner .lp_itemCredit {
    /* font-family: "FOT-ニューセザンヌ ProN DB", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; */ /* bodyで設定するためコメントアウト */
    line-height: 2.1;
    letter-spacing: .05em;
    margin-top: 3rem; /* PC版のマージン */
    font-size: calc(12*(100vw/1200)); /* PC版のフォントサイズ */
}

#contentsMain .lpInner .lp_itemCredit a {
    display: inline-block;
}

#contentsMain .lpInner .lp_itemCredit a span {
    text-decoration: underline;
}

#contentsMain .lpInner .lpContents {
    width: calc(1200*(100vw/1400)); /* PC版の幅 */
    margin: 10rem auto 0; /* PC版のマージン */
}

#contentsMain .lpInner .lpContents.flexNormal {
    display: flex;
    justify-content: center;
}

#contentsMain .lpInner .lpContents.flexReverse {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

#contentsMain .lpInner .lpContents.flexNormal .lpLeft {
    margin-right: calc(40*(100vw/1400));
    padding-left: calc(100*(100vw/1400));
}

#contentsMain .lpInner .lpContents.flexReverse .lpLeft {
    margin-left: calc(40*(100vw/1400));
    padding-right: calc(100*(100vw/1400));
}

#contentsMain .lpInner .lp_Img {
    width: calc(515*(100vw/1400));
    margin: 0 auto;
}

#contentsMain .lpInner50thArt .lp_Img50thArt {
    width: 18%;
    margin: 0 auto;
}

/* ========================================================================
   特集まとめエリア
======================================================================== */
#contentsMain .lp_ItemAll {
    padding: 8rem 0; /* PC版のパディング */
    margin-top: 8%; /* PC版のマージン */
    background-color: #fff; /* デフォルトの背景色。後続のクラスで上書きされる可能性あり */
}

#contentsMain .lp_ItemAll50thArt {
    padding: 3rem 0;
}

#contentsMain .lp_ItemAll h2 {
    font-family: 'Helvetica', Sans-serif; /* ヘルベチカは維持 */
    letter-spacing: .05em;
    text-align: center;
    font-size: calc(30*(100vw/1200)); /* PC版のフォントサイズ */
}

#contentsMain .lp_ItemAll h5 {
    font-family: 'Helvetica', Sans-serif; /* ヘルベチカは維持 */
    letter-spacing: .05em;
    text-align: center;
    font-size: 22px;
}

#contentsMain .lp_ItemAll h6 {
    font-family: 'Helvetica', Sans-serif; /* ヘルベチカは維持 */
    letter-spacing: .05em;
    text-align: center;
    font-size: 12px;
}

#contentsMain .lp_ItemAll p {
    /* font-family: "FOT-ニューセザンヌ ProN DB", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; */ /* bodyで設定するためコメントアウト */
    line-height: 1.75;
    letter-spacing: .05em;
    text-align: center;
    margin-top: 2rem; /* PC版のマージン */
    font-size: calc(14*(100vw/1200)); /* PC版のフォントサイズ */
}

#contentsMain .lp_ItemAll .lp_itemListTop {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

#contentsMain .lp_ItemAll .lp_itemListTop .lp_KittyArt img {
    position: absolute;
    top: calc(1200*(100vw/1400)); /* PC版の位置 */
    right: calc(418*(100vw/1400)); /* PC版の位置 */
    width: calc(180*(100vw/1400)); /* PC版の幅 */
}

#contentsMain .lp_ItemAll .lp_itemListTop .lp_itemImg img {
    width: 142%;
    height: auto;
}

/* PC/SP共通のアイテムリスト設定の基本（メディアクエリで上書き） */
#contentsMain .lp_ItemAll .lp_itemList {
    display: flex;
    flex-wrap: wrap; /* アイテムを折り返す */
    margin: 5rem auto 0; /* 上下マージンと中央寄せ */
    width: 100%;
    /* justify-content は各メディアクエリで設定 */
}

#contentsMain .lp_ItemAll .lp_itemList .lp_itemImg img {
    width: 100%;
    height: auto;
}

#contentsMain .lp_ItemAll .lp_itemList h3 {
    /* font-familyはbodyで設定されたものが適用されるためコメントアウト */
    letter-spacing: .05em;
}


/* ========================================================================
   汎用ヘルパークラス
======================================================================== */
.hideSp {
    display: none !important; /* SPで非表示 */
}

.hidePc {
    display: none !important; /* PCで非表示 */
}

.PcSizeSmall {
    width: 65%;
}

.MarginBottom {
    padding-bottom: 10%;
}

.img-sp {
    display: none; /* デフォルトでSP画像を非表示 */
}

/* ========================================================================
   追加・修正したCSS (グラデーション、モネ、SP2列表示など)
======================================================================== */

/* セクションの区切り線 */
.section-divider {
    width: 80%; /* 幅を親要素の80%に設定 */
    margin: 0 auto; /* 中央揃え */
    border: none; /* 既存のボーダーを削除 */
    border-top: 2px solid #CCBB96; /* 上部のボーダーを2pxの実線で色を指定 */
}

/* 背景が白のセクション（lp_ItemAll に追加） */
.lp_ItemAll.white-background-section {
    background-color: #fff;
}

/* 背景がグラデーションのセクション（lp_ItemAll に追加） */
#contentsMain .lp_ItemAll.gradient-background-gold {
    background: linear-gradient(to bottom, #D3C38D, #B1923A);
}

/* モネコレクションのタイトルテキスト（p.mainTxt2 に追加されるクラス） */
.monet-section-title {
    background-color: #ffffff; /* 背景色を白に設定 */
    color: #1f1f1f; /* テキスト色を黒に設定 */
    padding: 3px 15px;
    text-align: center;
}

/* モネコレクションのリンクテキストのスタイル */
.monet-section-title a {
    text-decoration: underline;
    display: block;
    color: #000000; /* リンクの色を黒に設定 */
}

.monet-section-title a:hover {
    opacity: 0.8;
}

/* ========================================================================
   レスポンシブデザイン - SP (max-width: 767px)
======================================================================== */
@media screen and (max-width:767px) {
 /* パンくずリスト */
 #breadcrumb {
  padding: calc(28*(100vw/750)) calc(20*(100vw/750));
 }

 #breadcrumb li {
  font-size: calc(22*(100vw/750));
 }

 #breadcrumb li span {
  margin: 0 calc(12*(100vw/750));
 }

 /* LP共通 */
 #contentsMain .mainTxt2 {
  padding: calc(80*(100vw/750)) calc(20*(100vw/750));
  font-size: calc(26*(100vw/750));
  color: #000;
 }

 #contentsMain #NewArrival .mainTxt2 {
  padding: calc(30*(100vw / 750)) 0;
 }

 /* 特集アクセサリー */
 #contentsMain .lpInner {
  margin-top: calc(82*(100vw/750));
  margin-bottom: calc(82*(100vw/750));
 }

 #contentsMain .lpInner50thArt {
  padding: 0 calc(20*(100vw/750));
 }

 #contentsMain .lpInner .lpContents {
  display: flex;
  flex-direction: column-reverse;
  width: calc(670*(100vw/750));
 }

 #contentsMain .lpInner .lpContents:nth-of-type(n+2) {
  margin-top: calc(82*(100vw/750));
 }

 #contentsMain .lpInner .lpContents.flexNormal {
  margin-left: auto;
 }

 #contentsMain .lpInner .lpContents.flexReverse .lpLeft {
  padding-left: calc(3*(100vw/750));
 }

 #contentsMain .lpInner .lpContents .lpLeft {
  width: calc(640*(100vw/750));
 }

 #contentsMain .lpInner h2 {
  margin-top: calc(35*(100vw/750));
  font-size: calc(40*(100vw/750));
 }

 #contentsMain .lpInner h3 {
  margin-top: calc(28*(100vw/750));
  padding-left: calc(80*(100vw/750));
  font-size: calc(26*(100vw/750));
 }

 #contentsMain .lpInner h3::before {
  top: calc(14*(100vw/750));
  width: calc(60*(100vw/750));
  height: calc(2*(100vw/750));
 }

 #contentsMain .lpInner .lpTxt {
  margin-top: calc(48*(100vw/750));
  font-size: calc(26*(100vw/750));
 }

 #contentsMain .lpInner .lp_itemCredit {
  margin-top: calc(6*(100vw/750));
  font-size: calc(20*(100vw/750));
 }

 #contentsMain .lpInner50thArt .lp_Img50thArt {
  width: 49%;
 }

 /* 特集まとめ */
 #contentsMain .lp_ItemAll {
  padding: calc(1*(100vw/750)) calc(20*(100vw/750)) calc(160*(100vw/750));
 }

 #contentsMain .lp_ItemAll h2 {
  margin-top: 0;
  font-size: calc(50*(100vw/750));
 }

 #contentsMain .lp_ItemAll p {
  margin-top: calc(60*(100vw/750));
  font-size: calc(26*(100vw/750));
 }

 #contentsMain .lp_ItemAll .lp_itemListTop {
  margin: calc(97*(100vw/750)) auto;
 }

 #contentsMain .lp_ItemAll .lp_itemListTop .lp_KittyArt img {
  position: absolute;
  top: calc(1200*(100vw/750));
  right: calc(418*(100vw/750));
  width: calc(180*(100vw/750));
 }

 /* lp_ItemAll のアイテムリストを2列表示にするための調整 */
 #contentsMain .lp_ItemAll .lp_itemList {
  justify-content: space-around; /* アイテムを左右に均等配置し、両端にスペースを作る */
  padding: 0 10px; /* 左右に少しパディングを持たせて、端に寄りすぎないようにする */
  margin: calc(80*(100vw/750)) auto 0; /* 上下マージン */
 }

 #contentsMain .lp_ItemAll .lp_itemList li {
  width: calc(50% - 20px); /* 画面幅の約半分から左右マージン合計分を引く (10px + 10px) */
  margin: 10px; /* 上下左右に10pxのマージンを追加 */
  margin-bottom: 20px; /* 下のマージンを少し増やして行間を確保 */
  /* SPではパディングは不要なことが多いのでリセット */
  padding: 0;
 }

 /* SPの2列表示になったため、既存のnth-of-typeの特別なマージン調整をリセットまたは調整 */
 #contentsMain .lp_ItemAll .lp_itemList li:nth-of-type(1),
 #contentsMain .lp_ItemAll .lp_itemList li:nth-of-type(5),
 #contentsMain .lp_ItemAll .lp_itemList li:nth-of-type(9) {
  margin-left: 10px; /* すべてのliに同じマージンを適用する */
 }

 #contentsMain .lp_ItemAll .lp_itemList li:nth-of-type(n+3) {
  margin-top: 10px; /* SPで2行目以降のアイテムの上マージンを統一 */
 }

 /* SPでの商品名と価格のフォントサイズ調整 */
 #contentsMain .lp_ItemAll .lp_itemList h3 {
  font-size: calc(26*(100vw/750)); /* 商品名 - 少し小さく */
  margin-top: calc(20*(100vw/750));
  text-align: center;
 }

 #contentsMain .lp_ItemAll .lp_itemList h4 {
  font-size: calc(24*(100vw/750)); /* 価格 - 少し小さく */
  margin-top: calc(15*(100vw/750));
  text-align: center;
 }

 /* SP表示でmvsp_gogho.pngを大きく表示するための調整と上部余白追加 */
 #contentsMain .mvBlock_an {
  width: 100%; /* 親要素の幅を100%に */
  margin-left: 0;
  margin-right: 0;
  top: auto; /* 位置指定をリセット */
  left: auto; /* 位置指定をリセット */
  transform: none; /* 中央寄せのtransformをリセット */
  position: relative; /* 必要に応じて */
 }

 #contentsMain .mvBlock_an img { /* 画像自体を親要素の幅に合わせる */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* 中央寄せのため */
  margin-top: 4rem; /* 画像の上に4remの余白を追加 */
 }

 /* ロゴエリアが画像に重なる場合などの調整 */
 .main-area.lp .logo-area {
  position: relative; /* SPでは相対配置に変更 */
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  margin-top: 2rem; /* 必要に応じて調整 */
 }

}

/* ========================================================================
   レスポンシブデザイン - PC (min-width: 768px)
======================================================================== */
@media screen and (min-width: 768px) {
    /* PCではSP画像を非表示に */
    .img-sp {
        display: none;
    }

    /* PCではPC画像を表示に */
    .img-pc {
        display: block;
    }

    /* PC表示時: lp_itemList の設定 */
    #contentsMain .lp_ItemAll .lp_itemList {
        justify-content: center; /* デフォルトでアイテム全体を中央寄せにする */
        max-width: 120rem; /* 必要に応じて調整 (例: 1200px) */
        margin: 5rem auto 0; /* 中央寄せと上下マージン */
    }

    /* PC表示時: 各アイテム（li）の幅とマージン */
    #contentsMain .lp_ItemAll .lp_itemList li {
        width: calc(33.33% - 4rem); /* 3個並べるために約3分の1の幅からマージンを引く */
        margin: 2rem; /* 各アイテムに上下左右2remのマージン */
        margin-bottom: 5rem; /* 下マージンをPCのデフォルトに合わせる */
    }

    /* 既存のnth-child(4)のmargin-leftを削除またはコメントアウト */
    /* #contentsMain .lp_ItemAll .lp_itemList li:nth-child(4) {
        margin-left: calc(100% / 6 + 2rem);
    } */

    /* PC表示時、既存のnth-of-typeの特別なマージン調整をリセット */
    #contentsMain .lp_ItemAll .lp_itemList li:nth-of-type(1),
    #contentsMain .lp_ItemAll .lp_itemList li:nth-of-type(5),
    #contentsMain .lp_ItemAll .lp_itemList li:nth-of-type(9) {
        margin-left: 2rem; /* 全てのliに共通のマージンを適用 */
    }

    /* PCでの商品名と価格のフォントサイズ調整 */
    #contentsMain .lp_ItemAll .lp_itemList h3 {
        font-size: 1.8rem; /* 商品名（ネックレス、リングなど） */
        margin-top: 1.5rem;
        text-align: center; /* ここを追加または確認 */
    }

    #contentsMain .lp_ItemAll .lp_itemList h4 {
        font-size: 1.6rem; /* 価格（￥50,600など） */
        margin-top: 1rem;
        text-align: center; /* ここを追加または確認 */
    }

    /* PC表示でアイテムが2個の場合の中央寄せ */
    #contentsMain .lp_ItemAll .lp_itemList.two-items {
        justify-content: center !important; /* 中央寄せに設定し、最優先 */
    }

    /* PC表示でアイテムが1個の場合の中央寄せ */
    #contentsMain .lp_ItemAll .lp_itemList.one-item {
        justify-content: center !important; /* 中央寄せに設定し、最優先 */
    }

    /* PC表示でアイテムが3個の場合 (デフォルトの動作に戻す) */
    #contentsMain .lp_ItemAll .lp_itemList.three-items {
        justify-content: space-between; /* 3個の場合は均等に配置 */
    }

    /* PC表示でアイテムが5個の場合 */
    #contentsMain .lp_ItemAll .lp_itemList.five-items {
        justify-content: center; /* 中央寄せに設定 (2行目も中央に寄る) */
    }

    /* 2個のアイテムの幅を調整して中央寄せをよりきれいに見せる（任意） */
    #contentsMain .lp_ItemAll .lp_itemList.two-items li {
        width: 40rem; /* 必要に応じて調整。例：PCで画像が大きくなるように */
        max-width: calc(50% - 4rem); /* 2個並んだ時に画面幅の約半分からマージンを引く */
        margin: 2rem; /* 左右のマージンも均等に */
    }

    /* 1個のアイテムの幅を調整して中央寄せをよりきれいに見せる（任意） */
    #contentsMain .lp_ItemAll .lp_itemList.one-item li {
        width: 40rem; /* 必要に応じて調整 */
        max-width: 50%; /* 1個の場合に幅を制限して中央に寄せる */
        margin: 2rem auto; /* 中央寄せと上下マージン */
    }
}

/* ========================================================================
   レスポンシブデザイン - PC (min-width: 768px and max-width: 1400px)
======================================================================== */
@media screen and (max-width: 1400px) and (min-width: 768px) {
    html {
        font-size: calc(10* (100vw / 1400)) !important;
    }
}

/* ========================================================================
   PC幅1200px以上 フォントサイズ固定
======================================================================== */
@media only screen and (min-width: 1200px) {
    #contentsMain .pageTitle h2 {
        font-size: 22px;
    }

    #contentsMain .pageTitle h3 {
        font-size: 42px;
    }

    #contentsMain .mainTxt1 {
        font-size: 20px;
    }

    #contentsMain .mainTxt2 {
        font-size: 14px;
        color: #000;
    }

    .titleTxt {
        font-size: calc(30*(100vw/1200));
        color: #000;
    }

    #contentsMain .lpInner h2 {
        font-size: 22px;
    }

    #contentsMain .lpInner h3 {
        font-size: 14px;
    }

    #contentsMain .lpInner .lpTxt {
        font-size: 14px;
    }

    #contentsMain .lpInner .lp_itemCredit {
        font-size: 12px;
    }

    #contentsMain .lp_ItemAll h2 {
        font-size: 33px;
    }

    #contentsMain .lp_ItemAll p {
        font-size: 14px;
    }

    #contentsMain h1 {
        font-size: 5rem;
        font-family: 'Helvetica';
    }

    .PcSizeSmall {
        width: 65%;
    }

    .contentsMain h1 {
        font-size:25px;
    }
}