@charset "UTF-8";

/* =================================================== */
/* 共通スタイル (SP/PC共通設定 - 768px未満のデフォルト設定を含む) */
/* =================================================== */
#wrapper {
    padding-top: 43px;
    position: relative;
}

.present {
    padding-bottom: 65px;
    position: relative;
}

.present * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.present picture {
    display: block
}

.present img {
    max-width: 100%
}

/* 商品リスト画像コンテナのアスペクト比を1:1 (100%) に設定 */
.present .img-lazy {
    position: relative;
    padding-bottom: 100%; 
    overflow: hidden
}

.present .img-lazy img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto
}

/* アニメーション用クラス */
.present .scroll-in {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
}

.present .scroll-in.show {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .5s;
    transition: all .5s
}

/* 共通ボタンのスタイル (SPデフォルト) */
.present .button {
    display: block;
    width: 60vw;
    margin: 8vw auto 12.8vw; 
    padding: 3.2vw 10px;
    background: #493219; 
    text-align: center
}

.present .button span {
    position: relative;
    display: inline-block;
    font-weight: 400;
    letter-spacing: .06em;
    padding-right: 24px;
    color: #fff; 
    font-size: 15px;
    font-size: 3.5vw
}

.present .button span::after {
    position: absolute;
    bottom: 50%;
    right: 0;
    width: 14px;
    height: 8px;
    background: url(../../img/present/ico_arrow_down.svg) no-repeat center/contain;
    -webkit-transform: translate(0,50%);
    transform: translate(0,50%);
    content: ""
}

.present .button--sect-child {
    margin: 30px auto 12.8vw;
}

.present .frame {
    position: relative;
    width: 100%;
    padding: 8vw 4.26667vw 10.66667vw
}

.present .frame--blue {
    background: #c8d5e2;
    background: -webkit-gradient(linear,left top,right bottom,from(#c8d5e2),color-stop(25%,#e6edf4),color-stop(50%,#b5c6d9),color-stop(74%,#e6edf4),to(#b4c5d9));
    background: linear-gradient(to bottom right,#c8d5e2 0,#e6edf4 25%,#b5c6d9 50%,#e6edf4 74%,#b4c5d9 100%)
}

.present .frame--light-blue {
    background: #f4f6f7
}

.present .item-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -2.66667vw -5.33333vw
}

.present .item-list>li {
    width: 50%;
    padding: 0 2.66667vw 5.33333vw
}

.present .item-list__img {
    background: #fff
}

.present .item-list__link {
    position: relative;
    display: block
}

.present .item-list__text {
    position: static;
    left: auto;
    bottom: auto;
    width: 100%;
    font-size: 2.6vw;
    text-align: center;
    letter-spacing: 0.08em;
    line-height: 1.5;
    margin-top: 2vw;
}

.present .item-list__text span {
    margin-left: .5em;
    color: #697e93
}

.present .item-list__text--black {
    color: #222
}

.present .item-list__text--black span {
    color: #222
}

/* =================================================== */
/* .present.top スタイル (トップページ用) - 共通/SPデフォルト */
/* =================================================== */
.present.top {
    color: #4d4d4d
}

.present.top .ttl-main {
    font-size: 20px;
    font-size: 5.33333vw;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
    margin-bottom: 5.33333vw
}

.present.top .fv {
    position: relative;
    background: #f4f6f7;
    padding-bottom: 9.6vw
}

.present.top .fv__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 124.8vw
}

.present.top .fv__links {
    position: relative;
    padding: 120% 20px 0
}

.present.top .fv__links ul {
    width: 100%;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.present.top .fv__links ul li {
    width: calc(100% / 3 - 5px)
}

.present.top .fv__links ul li a {
    font-size: 14px; 
}

.present.top .fv__links a {
    display: block;
    padding: 2.13333vw;
    background: #697e93;
    text-align: center
}

.present.top .fv__links a span {
    position: relative;
    display: inline-block;
    font-weight: 400;
    letter-spacing: .06em;
    padding-right: 40px;
    color: #fff
}

.present.top .fv__links a span::after {
    position: absolute;
    bottom: 50%;
    right: 0;
    width: 20px;
    height: 11px;
    background: url(../../img/present/ico_arrow_down.svg) no-repeat center/contain;
    -webkit-transform: translate(0,50%);
    transform: translate(0,50%);
    content: ""
}

.present.top .collection {
    background: #f4f6f7;
    margin: 0 auto;
    padding: 0 20px 10.66667vw
}

.present.top .limited {
    position: relative;
    margin: 0 auto;
    padding: 10.66667vw 20px 10.66667vw;
    background: -webkit-gradient(linear,right top,left bottom,from(#dee4ea),color-stop(50%,#b5c6d9),color-stop(80%,#e6edf4),to(#b4c5d9));
    background: linear-gradient(to bottom left,#dee4ea 0,#b5c6d9 50%,#e6edf4 80%,#b4c5d9 100%)
}

.present.top .limited__img {
    position: absolute;
    top: 0;
    left: 0
}

.present.top .case {
    margin: 0 auto;
    padding: 10.66667vw 20px
}

.present.top .case__banner {
    width: 100%;
    margin: 0 auto;
    border: solid 1px #95a4b4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
}

.present.top .case__img {
    width: 100%
}

.present.top .case__img picture {
    padding-bottom: 66.6666%
}

.present.top .case__content {
    width: 100%;
    padding: 8.53333vw 8vw 10.66667vw
}

.present.top .case__ttl {
    letter-spacing: .06em;
    text-align: center
}

.present.top .case__ttl-ja {
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "ＭＳ 明朝", "MS Mincho", serif;
    color: #222;
}

.present.top .case__text {
    font-size: 14px; 
    font-size: 3.73333vw; 
    line-height: 2; 
    letter-spacing: .075em; 
    text-align: center; 
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "ＭＳ 明朝", "MS Mincho", serif;
    color: #222;
}


/* =================================================== */
/* .present.guide スタイル (プレゼントガイドページ用) - 共通/SPデフォルト */
/* =================================================== */
.present.guide {
    color: #775e42
}

/* セクションの背景色設定 (SP/PC共通) */
#popular {
    background-color: #e6e1d9; 
}
#cost {
    background-color: #f7efe2; 
}
/* =================================================== */

.present.guide .case {
    margin: 0 auto;
    padding: 5.66667vw 20px; /* SP用のパディングを再適用 */
}

/* セクションコンテンツのパディング調整 (SPデフォルト) */
.present.guide .guide__sect-child {
    width: 100%;
    margin: auto;
    padding: 0 4.26667vw;
    padding-top: 3vw; 
    padding-bottom: 2vw;
}

.present.guide .guide__sect-child--lg {
    width: 100%;
    padding: 0 4.26667vw
}

.present.guide .guide__ttl {
    font-size: 23px; 
    font-weight: 700;
    letter-spacing: .025em;
    text-align: center;
    line-height: 1;
    letter-spacing: .025em;
    color: #775e42;
    padding-top: 25%; 
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "ＭＳ 明朝", "MS Mincho", serif;
}

/* サブタイトルのフォントサイズ調整 (SPデフォルト) */
.present.guide .guide__sub-ttl {
    font-size: 17px; 
    font-weight: 700;
    letter-spacing: 0.025em;
    text-align: center;
    line-height: 2;
    margin-bottom: 5.33333vw
}

/* セクション内ナビゲーションのパディング調整 (SP/PC共通の横並び設定) */
.present.guide .guide__nav {
    padding-top: 10vw; 
}

.present.guide .guide__nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.present.guide .guide__nav ul>li {
    position: relative;
    padding-right: 2em
}

.present.guide .guide__nav ul>li::after {
    position: absolute;
    top: .4em;
    bottom: .4em;
    right: 1em;
    width: 1px;
    background: #493219;
    content: ""
}

.present.guide .guide__nav ul>li:last-child {
    padding-right: 0
}

.present.guide .guide__nav ul>li:last-child::after {
    display: none
}

/* セクション内ナビゲーション（例:「ネックレス」）のフォントサイズ調整 (SPデフォルト) */
.present.guide .guide__nav a {
    font-size: 14px; 
    color: #775e42;
    letter-spacing: .025em
}

.present.guide .fv {
    position: relative;
    margin-bottom: 0; 
}

/* FV画像の見切れ対策: 領域を750x940の比率(125.33%)に拡張 (SPデフォルト) */
.present.guide .fv .fv__img { 
    padding-bottom: 125.33%; 
}

/* FVナビゲーション (.fv__links) SP設定 */
.present.guide .fv__links {
    position: absolute;
    left: 50%;
    bottom: 0;
    padding: 20px;
    -webkit-transform: translate(-50%,50%);
    transform: translate(-50%,50%);
    z-index: 1;
    background: #fff;
    -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.16);
    box-shadow: 0 2px 3px rgba(0,0,0,.16);
    width: 91.46667vw;
    padding: 2.66667vw;
    margin-bottom: 0; 
}

/* ★修正: FVナビゲーションを2列中央寄せに変更 */
.present.guide .fv__links ul {
    width: 100%;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap; /* 折り返しを許可 */
    flex-wrap: wrap; 
    -webkit-box-pack: center; /* 中央寄せ */
    -ms-flex-pack: center;
    justify-content: center;
}

.present.guide .fv__links ul li {
    width: 45%; /* 2列にするための幅 */
    padding: 0; /* paddingリセット */
    margin: 0 5px 10px 5px; /* 上下左右マージン */
}
/* 3つ目の要素用に、1行目の下マージンは残す */
.present.guide .fv__links ul li:nth-child(n+3) {
    margin-bottom: 0;
}

/* FVナビゲーションリンクをボタン化 (SP) */
.present.guide .fv__links ul li a {
    display: block;
    padding: 10px 5px; 
    background: #493219; 
    text-align: center;
    text-decoration: none;
    font-size: 14px; 
}
.present.guide .fv__links ul li a span {
    color: #fff; 
    position: static; 
    padding-right: 0; 
    font-size: 11px;
}
.present.guide .fv__links ul li a span::after {
    display: none; 
}

/* =================================================== */
/* FVメインビジュアル テキスト重ね合わせと配置の設定 (SPデフォルト) */
/* =================================================== */
.main-visual-area, .fv {
    position: relative; 
}

.present.guide .fv__text-box { 
    display: block;
    position: absolute; 
    top: 70%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 90%; 
    text-align: center; 
    padding: 0; 
    z-index: 10; 
}

.present.guide .fv__text-box .fv__text {
    color: #222222; 
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "ＭＳ 明朝", "MS Mincho", serif !important;
    font-weight: 300;
    line-height: 1.7;
    font-size: 15px; 
    font-size: 3.5vw;
    margin-top: 5%; 
}

.present.guide .fv__text-box .fv__title-en {
    display: block; 
    font-family: "Minion Medium", serif !important; 
    font-size: 25px; 
    font-weight: 700; 
    line-height: 1.2;
    letter-spacing: 1.5px;
    color: #222; 
}


/* =================================================== */
/* .present.guide .case セクション (SPデフォルト) の修正 */
/* =================================================== */

.present.guide .case__content {
    width: 100%;
    /* padding: 8.53333vw 8vw 10.66667vw; /* 上書きされるので、こちらには残しておきます */
    padding: 8.53333vw 8vw 10.66667vw;
}

.present.guide .case__ttl { 
    letter-spacing: .06em;
    font-size: 28px; /* 約3回り大きく */
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "ＭＳ 明朝", "MS Mincho", serif; /* 明朝体適用 */
    color: #222; /* 色を黒に (視認性向上のため) */
    margin-bottom: 2vw; /* 下に余白 */
}


.present.guide .case__ttl .case__ttl-en {
    font-size: 20px; /* 日本語見出しと揃える */
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "ＭＳ 明朝", "MS Mincho", serif; /* 明朝体適用 */
    font-weight: 700;
    color: #4a3219;
}
.present.guide .case__text {
   font-size: clamp(14px, 3.5vw, 18px);
line-height: 1.7;
letter-spacing: 0.03em;
text-align: left;
font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
  "游明朝", YuMincho, "ＭＳ 明朝", "MS Mincho", serif;
color: #222;
margin-top: 16px;

}
.present .case__note {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 0.925rem;
    line-height: 1.9;
    margin-top: 2rem;
    color: var(--textcolor-base);
}
/* =================================================== */
/* PCサイズ用のメディアクエリの統合 (min-width: 768px) */
/* =================================================== */
@media screen and (min-width: 768px) {
    /* --------------------------------------------------- */
    /* FVメインビジュアル テキスト重ね合わせと配置の設定 (PC) */
    /* --------------------------------------------------- */

    .present.guide .fv__text-box { 
        top: 33%;            
        left: 14%;           
        transform: none;     
        width: 500px;
        padding: 30px;      
        
        display: block; 
        position: absolute; 
        background: transparent; 
        text-align: center;
    }

    .present.guide .fv__text-box .fv__text {
        color: #1b1b1b; 
        font-size: 18px; 
        font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "ＭＳ 明朝", "MS Mincho", serif; 
        font-weight: 300; 
        line-height: 1.8; 
        /* ★再追加: Present Selection の下に10%の余白 (PCでも適用) */
        margin-top: 10%; 
    }

    .present.guide .fv__text-box .fv__title-en {
        font-family: "Minion Medium", serif; 
        font-size: 42px; 
        font-weight: 700; 
        margin-bottom: 4px; 
        line-height: 1.2;
        letter-spacing: 2.2px;
    }

    /* --------------------------------------------------- */
    /* レイアウト・パーツスタイル (PC) */
    /* --------------------------------------------------- */
    
    #wrapper {
        padding-top: 100px;
    }

    .present {
        padding-bottom: 120px;
    }

    /* 共通ボタンのスタイル (PC) */
    .present .button {
        width: 300px;
        margin: 10px auto 80px; 
        padding: 16px 10px;
    }
    
    .present .button span {
        font-size: 16px;
        padding-right: 40px;
    }
    
    .present .button span::after {
        width: 20px;
        height: 11px;
    }

    .present .button--sect-child {
        margin: 80px auto; 
    }

    .present .frame {
        padding: 60px 40px 80px;
    }

    .present .item-list {
        margin: 0 -20px -40px;
    }

    .present .item-list>li {
        padding: 0 20px 40px;
    }

    .present .img-lazy {
        padding-bottom: 100%; 
    }

    /* ★PCのリストテキストも画像の下に表示 */
    .present .item-list__text {
        position: static;
        bottom: auto;
        font-size: 14px;
        margin-top: 10px; /* 画像とテキストの間に余白 */
    }

    .present .item-list--col-4 {
        margin: 0 -20px -40px; 
    }

    .present .item-list--col-4>li {
        width: 25%;
        padding: 0 20px 40px; 
    }

    /* .present.guide (PC) */
    /* セクションコンテンツのパディング調整 (PC) */
    .present.guide .guide__sect-child {
        padding: 0px 60px 40px; 
    }

    .present.guide .guide__sect-child--lg {
        padding: 0 60px;
    }

    /* セクション大見出しのフォントサイズとパディング調整 (PC) */
    .present.guide .guide__ttl {
        font-size: 40px; 
        margin-bottom: 0;
        padding-top: 80px; 
        /* 明朝体フォントを適用 */
        font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "ＭＳ 明朝", "MS Mincho", serif;
    }

    /* サブタイトルのフォントサイズとマージン調整 (PC) */
    .present.guide .guide__sub-ttl {
        font-size: 28px; 
        margin: 40px 0px; 
    }

    /* セクション内ナビゲーションのパディング調整 (PC) */
    .present.guide .guide__nav {
        padding-top: 3vw; 
    }

    .present.guide .guide__nav ul>li {
        padding-right: 2.5em;
    }

    .present.guide .guide__nav ul>li::after {
        right: 1.2em;
    }

    .present.guide .guide__nav a {
        font-size: 16px;
    }

    .present.guide .fv {
        margin-bottom: 80px; 
    }

    /* FV画像のアスペクト比をPC用の50%に拡大 */
    .present.guide .fv .fv__img {
        padding-bottom: 50%; 
    }

    .present.guide .fv__links {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%,50%);
        z-index: 1;
        width: 900px; 
        padding: 20px 30px;
        background: #fff;
        -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.16);
        box-shadow: 0 2px 3px rgba(0,0,0,.16);
    }

    /* PC修正: FVリンクの横並びをPCメディアクエリで確実に適用 */
    .present.guide .fv__links ul {
        width: 100%;
        margin: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; 
        -ms-flex-wrap: nowrap; /* 念のため折り返しを無効化 */
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .present.guide .fv__links ul li {
        width: calc(100% / 3 - 20px); 
        margin: 0; /* マージンをリセット */
    }

    .present.guide .fv__links ul li a {
        padding: 16px 10px; 
        background: #493219;
    }
    .present.guide .fv__links ul li a span {
        color: #fff;
        font-size: 16px;
    }

    /* .case セクション (PC) */
    .present.guide .case {
        padding: 80px 60px 0;
    }

    .present.guide .case__banner {
        max-width: 1260px;
        margin: 0 auto;
        display: flex;
        flex-direction: row-reverse; 
        align-items: center; 
        justify-content: center;
    }


    .present.guide .case__img {
        width: 45%;
        margin-top: 0; 
    }

    .present.guide .case__content {
        width: 55%;
        padding: 60px;
    }

    /* --------------------------------------------------- */
    /* .case セクション テキストのPC設定 (★サイズ調整) */
    /* --------------------------------------------------- */
    
    /* PCの「無料ギフトラッピング」見出し (英文) */
    .present.guide .case__ttl .case__ttl-en { 
        font-size:  35px;
        margin-bottom: 5px;
    }

    /* PCの和文見出し */
    .present.guide .case__ttl .case__ttl-ja { 
        font-size: 18px; /* ★修正: 18pxに一回り大きく */
        margin-bottom: 40px;
        font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "ＭＳ 明朝", "MS Mincho", serif; 
        color: #222;
    }

    /* PCの本文「p.case__text」 */
    .present.guide .case__text {

        margin-top: 30px;

    }

    .present .case__note {
        font-size: 1.2em; 
        display: inline-block;
        margin-top: 3%;
        line-height: 1.9;
    }

}