@charset "UTF-8";

/* =========================================================
   1. ベーススタイル・メルカート透過対策
========================================================= */
.keepasecret_eyehold_main {
    color: #211815;
    background: #fff;
    font-family: "Jost", "Noto Sans JP", sans-serif;
    font-feature-settings: "palt";
    box-sizing: border-box;
}

.keepasecret_eyehold_main * {
    box-sizing: border-box;
}

.keepasecret_eyehold_main .main_width {
    margin: 0 auto;
    max-width: 1360px;
    padding: 0 40px;
}

header, #header-wrapper, .header, .pane-topic-path {
    background-color: #ffffff !important;
    position: relative !important;
    z-index: 9999 !important;
}

.pane-topic-path {
    display: block !important;
    margin: 0 !important;
    padding: 12px 0 !important;
    border: none !important;
}

.pane-main, .keepasecret_eyehold_main {
    background-color: transparent !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

main.keepasecret_eyehold_main ~ *:not(#lip_care_bg), #footer, .footer-wrapper {
    background-color: #ffffff !important;
    position: relative !important;
    z-index: 999 !important;
}

/* テキストのゆったりとした行間（見本再現） */
.keepasecret_eyehold_main p,
.keepasecret_eyehold_main .text-justify,
.keepasecret_eyehold_main .lineup_txt p,
.keepasecret_eyehold_main .eye_cream_txt p {
    line-height: 1.8 !important;
    letter-spacing: 0.05em !important;
}

/* =========================================================
   2. メインビジュアル & 縦書きタイトル
========================================================= */
#main_visual { display: flex; margin-bottom: 0; }
#main_visual .kv_img { width: 54.5%; }
#main_visual .kv_img img { width: 100%; display: block; }
#main_visual .kv_txt { width: 45.5%; padding-left: 112px; display: flex; flex-direction: column; justify-content: center; }
#main_visual .kv_txt h1 img { width: 218px; }
#main_visual .kv_txt p { margin-top: 11.6vw; }
#main_visual .kv_txt p img { width: 109px; }

/* 縦書きタイトルの追従設定 */
.lp_section .section_inr.main_width,
#product .product_inr.main_width {
    position: relative !important;
}
.lp_section .section_ttl,
#product .section_ttl {
    position: absolute !important;
    left: 40px !important;
    top: 0 !important;
    transform: rotate(90deg) !important;
    transform-origin: left top !important;
    z-index: 10 !important;
}
.lp_section .section_ttl h2 {
    font-family: "Jost", sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.125em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* =========================================================
   3. Introduction & Product セクション
========================================================= */
#introduction { padding: 100px 0 160px !important; position: relative; }
#introduction .intro_nav { position: absolute; left: 100px; top: 20px; }
#introduction .intro_nav ul { list-style: none; padding: 0; }
#introduction .intro_nav li { margin-bottom: 5px; font-size: 14px; }
#introduction .intro_nav a { opacity: 0.52; text-decoration: none; position: relative; padding-right: 15px; color: #211815; }
#introduction .intro_nav a::after { content: ""; position: absolute; right: 0; top: 50%; width: 4px; height: 4px; border-top: 1px solid #211815; border-right: 1px solid #211815; transform: translateY(-50%) rotate(45deg); }
#introduction .section_inr { display: flex; flex-direction: row-reverse; align-items: center; }
#introduction .intro_img { width: 40%; }
#introduction .intro_img img { width: 100%; height: auto; }
#introduction .intro_txt { width: 60%; padding: 0 95px; }
#introduction .intro_txt p { margin-top: 3.5em; font-size: 16px; text-align: right; line-height: 2.2 !important; letter-spacing: 0.1em; }

#eye_cream { background: #F5F5F5; padding: 58px 0; }
.eye_cream_wrap { display: flex; flex-direction: row-reverse; align-items: center; max-width: 926px; margin: 0 auto; }
.eye_cream_img { width: 376px; }
.eye_cream_img img { width: 100%; }
.eye_cream_txt { width: calc(100% - 376px); padding-right: 40px; }
.eye_cream_catch { font-size: 18px; line-height: 1.8; margin-bottom: 1.3em; font-weight: 500; }

#product { padding: 180px 0 60px !important; margin-top: 0 !important; }
.product_wrap { display: flex; max-width: 926px; margin: 0 auto; flex-wrap: wrap; }
.product_img { width: 52%; }
.product_img img { width: 100%; }
.product_txt { width: 48%; padding-left: 65px; }

/* =========================================================
   4. Ingredients & Items (PC版タイルレイアウト)
========================================================= */
#items { background: #D9D0BC; padding: 120px 0 100px !important; }
.item_section { max-width: 910px; margin: 0 auto 80px; text-align: center; }
.item_ttl img { height: 22px; width: auto; }

/* Fragrance枠 */
#fragrance .icon_parts {
    background-color: #efece3 !important;
    padding: 15px 60px !important;
    display: inline-block !important;
    width: auto !important;
    margin-bottom: 20px !important;
}

/* Ingredients上部 */
.keepasecret_eyehold_main .ingredients_intro {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 600px !important;
    margin: 0 auto 50px !important;
    text-align: left !important;
}
.keepasecret_eyehold_main .ingredients_intro .intro_img {
    width: 98px !important;
    flex: 0 0 98px !important;
    margin: 0 28px 0 0 !important;
}

/* ナチュラル成分：PC4列 */
body .keepasecret_eyehold_main .natural_list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 -10px !important;
}
body .keepasecret_eyehold_main .natural_list li {
    width: 25% !important;
    max-width: 25% !important;
    flex: 0 0 25% !important;
    padding: 20px 10px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}
.keepasecret_eyehold_main .natural_component_img {
    width: 77px !important; 
    height: 77px !important;
    margin: 0 auto 15px !important;
    object-fit: contain !important;
}

/* サイエンス成分：PC3列 */
body .keepasecret_eyehold_main .science_list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 -10px !important;
}
body .keepasecret_eyehold_main .science_list li {
    width: 33.333% !important;
    max-width: 33.333% !important;
    flex: 0 0 33.333% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}
.science_component {
    background: #EDE9E1 !important;
    padding: 25px 20px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* =========================================================
   5. Lineup (PC版 271px固定・左揃えレイアウト)
========================================================= */
#lineup { background-color: #fff; padding: 120px 0 200px !important; }

.keepasecret_eyehold_main .lineup_ttl {
    display: flex !important; justify-content: center !important; align-items: center !important;
    margin: 0 auto 60px !important; padding: 0 !important; background: transparent !important; border: none !important;
}
.keepasecret_eyehold_main .lineup_ttl img { width: 319px !important; height: auto !important; display: block !important; margin: 0 auto !important; }

.keepasecret_eyehold_main .lineup_read {
    text-align: center !important; margin: 0 auto 60px !important; font-size: 15px !important; color: #211815 !important;
}

body .keepasecret_eyehold_main #lineup .lineup_items_wrap {
    display: flex !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    max-width: 910px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 枠、画像、テキストを271pxに固定し左揃え */
body .keepasecret_eyehold_main .lineup_item,
body .keepasecret_eyehold_main .lineup_img,
body .keepasecret_eyehold_main .lineup_img img,
body .keepasecret_eyehold_main .lineup_txt,
body .keepasecret_eyehold_main .item_meta {
    width: 271px !important;
    flex: 0 0 271px !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}
body .keepasecret_eyehold_main .lineup_img img { margin-bottom: 20px !important; }
body .keepasecret_eyehold_main .lineup_txt { min-height: 5em !important; margin-bottom: 20px !important; }
body .keepasecret_eyehold_main .lineup_item p { text-align: left !important; }

/* ボタンと注釈 */
.keepasecret_eyehold_main .buy_btn_wrap { width: 271px !important; margin: 15px 0 !important; }
.keepasecret_eyehold_main .buy_btn {
    display: flex !important; justify-content: center !important; align-items: center !important;
    width: 271px !important; height: 50px !important;
    border: 1px solid #3D3A3A !important; border-radius: 4px !important;
    color: #211815 !important; text-decoration: none !important; transition: 0.3s !important; margin: 0 !important;
}
.keepasecret_eyehold_main .buy_btn:hover { background: #3D3A3A !important; color: #fff !important; }
.keepasecret_eyehold_main .view_more_link { width: 271px !important; text-align: center !important; margin-top: 10px !important; }

.keepasecret_eyehold_main .lineup_caution { max-width: 910px !important; margin: 40px auto 0 !important; text-align: left !important; }

/* バッジの装飾 */
.keepasecret_eyehold_main .icon_new {
    font-size: 10px !important; color: #986030 !important; border: 1px solid #986030 !important;
    width: 3.3em !important; height: 1.6em !important; display: flex !important; justify-content: center !important; align-items: center !important; margin-bottom: 0.4em !important;
}
.keepasecret_eyehold_main .icons_cate { display: flex !important; margin: 10px 0 0 -0.3em !important; padding: 0 !important; list-style: none !important;}
.keepasecret_eyehold_main .icons_cate li {
    margin-left: 0.3em !important; padding: 0 0.6em !important; height: 1.7em !important;
    display: flex !important; align-items: center !important; border: 1px solid #211815 !important; border-radius: 0.85em !important; font-size: 11px !important;
}
.keepasecret_eyehold_main #lineup .item_ttl_sub {
    display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; padding: 0 !important; margin: 0 0 20px -1.25em !important; list-style: none !important;
}
.keepasecret_eyehold_main #lineup .item_ttl_sub li { margin-left: 1.25em !important; }


/* =========================================================
   6. スマートフォン用（900px以下）レイアウト
========================================================= */
@media screen and (max-width: 900px) {
    .keepasecret_eyehold_main .main_width { padding: 0 6.4vw; }
    
    /* KV & Intro */
    #main_visual { display: block; }
    #main_visual .kv_img { width: 100%; }
    #main_visual .kv_txt { width: 100%; padding: 7vw 0 12vw; align-items: center; text-align: center; }
    #main_visual .kv_txt h1 img { width: 44vw; }
    
    #introduction { padding: 25vw 0 26vw !important; }
    .lp_section .section_ttl, #product .section_ttl { left: 6.4vw !important; top: 25vw !important; transform: translateX(0.5em) rotate(90deg) !important; }
    #introduction .intro_nav { position: relative !important; left: 0 !important; top: 0 !important; margin: 0 auto 10vw 8vw !important; width: 85% !important; }
    #introduction .intro_nav ul { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; }
    #introduction .intro_nav li { width: 48% !important; margin-bottom: 2vw !important; }
    #introduction .intro_nav li a { height: 12vw !important; font-size: 2.8vw !important; background: #EDE9E1 !important; display: flex !important; justify-content: center !important; align-items: center !important; }
    #introduction .section_inr { display: block; }
    #introduction .intro_img { width: 80%; margin-left: -6.4vw; }
    #introduction .intro_txt { width: 100%; padding: 0; }
    #introduction .intro_txt p { text-align: center; font-size: 3.7vw; margin-top: 10vw; }

    /* Product & Ingredients */
    #product { padding-top: 30vw !important; }
    .eye_cream_wrap { display: block; padding: 24vw 0; }
    .eye_cream_img { width: 80vw; margin: 0 auto; }
    .eye_cream_txt { width: 100%; padding: 0; text-align: center; }
    .product_wrap { display: block; }
    .product_img, .product_txt { width: 100%; padding: 0; }
    
    .keepasecret_eyehold_main .ingredients_intro { flex-direction: column !important; text-align: center !important; }
    .keepasecret_eyehold_main .ingredients_intro .intro_img { margin: 0 auto 20px !important; }
    
    /* タイル調整 */
    body .keepasecret_eyehold_main .natural_list li { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; padding: 5vw 2vw !important; }
    body .keepasecret_eyehold_main .science_list li { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 2vw 0 !important; }

    /* --- ★ Lineup 横スライド＆完全左揃え ★ --- */
    body .keepasecret_eyehold_main #lineup .lineup_items {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100vw !important;
        margin-left: -6.4vw !important; 
        padding-left: 6.4vw !important;
        padding-right: 6.4vw !important;
    }

    body .keepasecret_eyehold_main #lineup .lineup_items_wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: max-content !important; 
        margin: 0 !important;
        padding-bottom: 5vw !important;
    }

    /* 商品1枠：幅75vw固定・ブロック要素化して左揃えを確実にする */
    body .keepasecret_eyehold_main #lineup .lineup_item {
        width: 75vw !important;        
        min-width: 75vw !important;
        max-width: 75vw !important;    
        flex: 0 0 75vw !important;     
        padding: 0 5vw 0 0 !important; /* 右側に隙間 */
        margin: 0 !important;
        display: block !important; 
    }

    /* 画像：幅100%に広げる */
    body .keepasecret_eyehold_main #lineup .lineup_img,
    body .keepasecret_eyehold_main #lineup .lineup_img img {
        width: 100% !important; 
        max-width: 100% !important;
        flex: none !important;
        height: auto !important; 
        margin: 0 0 5vw 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* テキストエリア：幅100%・完全左揃え */
    body .keepasecret_eyehold_main #lineup .lineup_txt,
    body .keepasecret_eyehold_main #lineup .item_meta {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important; 
        text-align: left !important;
    }

    body .keepasecret_eyehold_main #lineup .lineup_item p,
    body .keepasecret_eyehold_main #lineup .lineup_item h3,
    body .keepasecret_eyehold_main #lineup .lineup_item .icon_new {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body .keepasecret_eyehold_main #lineup .item_ttl_sub {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        margin: 0 0 5vw 0 !important;
    }
    body .keepasecret_eyehold_main #lineup .item_ttl_sub li {
        margin: 0 1em 0 0 !important;
    }

    /* 購入ボタン：幅100%・中央配置 */
    body .keepasecret_eyehold_main #lineup .buy_btn_wrap {
        width: 100% !important;
        display: block !important;
        margin: 0 0 3vw 0 !important;
        padding: 0 !important;
    }
    body .keepasecret_eyehold_main #lineup .buy_btn {
        width: 100% !important;
        max-width: 100% !important; 
        height: 13vw !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    body .keepasecret_eyehold_main #lineup .view_more_link {
        width: 100% !important;
        display: block !important;
        text-align: left !important; 
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .keepasecret_eyehold_main .lineup_caution { max-width: 271px !important; margin: 8vw auto !important; padding: 0 !important; }
}

/* =========================================================
   1. 4freeセクション：テキスト改行とボタンスタイル復元
========================================================= */

/* テキストの改行コントロール（1行目と2行目で分ける） */
.keepasecret_eyehold_main .fourfree_catch {
    text-align: center !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
    margin-bottom: 2em !important;
}
.keepasecret_eyehold_main .fourfree_catch span {
    display: inline-block !important;
}
@media (min-width: 901px) {
    .keepasecret_eyehold_main .fourfree_catch span:first-child {
        display: block !important; /* 1文目だけ改行させる */
    }
}

/* シリコンフリーなどのボタン横並びと色設定 */
.keepasecret_eyehold_main .fourfree_icons {
    display: flex !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 2em auto 0 !important;
    max-width: 836px !important;
}
.keepasecret_eyehold_main .fourfree_icons li {
    width: 25% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
}
.keepasecret_eyehold_main .fourfree_icons .icon_parts {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #8a847a !important;
    height: 36px !important;
    color: #fff !important;
    font-size: 14px !important;
}

/* =========================================================
   2. アプローチセクション：タブと白背景の復元
========================================================= */

/* タブを横に並べてボタン化する */
.keepasecret_eyehold_main .approach_index {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    margin-bottom: 0 !important; /* 隙間を無くして背景ボックスに繋げる */
}
.keepasecret_eyehold_main .approach_tab {
    width: 235px !important;
    height: 54px !important;
    border: 1px solid #958f83 !important;
    border-bottom: none !important; /* 下の枠線を消して背景と馴染ませる */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    background-color: transparent !important;
    color: #211815 !important;
}
/* 選択中のタブの色 */
.keepasecret_eyehold_main .approach_tab.active {
    background-color: #5c5753 !important;
    color: #fff !important;
}

/* コンテンツエリアを白い半透明のボックスで囲む */
.keepasecret_eyehold_main .content_wrap {
    background-color: rgba(255, 255, 255, 0.8) !important;
    padding: 78px 50px 52px !important;
    width: 100% !important;
}
.keepasecret_eyehold_main .approach_content {
    display: none; /* jQueryで切り替えるための初期非表示 */
}
.keepasecret_eyehold_main .approach_content.show {
    display: block !important;
}

/* =========================================================
   3. ラインナップ：商品名と価格の左揃え＆改行
========================================================= */

/* メルカートによるh3(商品名)の中央揃えを強制的に左揃えに戻す */
body .keepasecret_eyehold_main #lineup h3.item_ttl_ja,
body .keepasecret_eyehold_main #lineup p.item_ttl_en {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}
body .keepasecret_eyehold_main #lineup h3.item_ttl_ja {
    font-size: 16px !important;
    margin-bottom: 0.15em !important;
}

/* ［目元用クリーム］と「20g 4,950円」を2行に分ける */
body .keepasecret_eyehold_main #lineup .item_ttl_sub {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    list-style: none !important;
}
body .keepasecret_eyehold_main #lineup .item_ttl_sub li {
    margin-right: 1.25em !important;
    margin-left: 0 !important;
}
/* 1つ目の要素（［目元用クリーム］等）を100%幅にして次の要素を下の行へ落とす */
body .keepasecret_eyehold_main #lineup .item_ttl_sub li:first-child {
    width: 100% !important;
    margin-bottom: 5px !important;
}

/* =========================================================
   スマホ版（900px以下）の微調整
========================================================= */
@media screen and (max-width: 900px) {
    /* 4freeのボタンを2列にする */
    .keepasecret_eyehold_main .fourfree_icons { flex-wrap: wrap !important; }
    .keepasecret_eyehold_main .fourfree_icons li { width: 50% !important; margin-bottom: 10px !important; }
    
    /* タブをスマホサイズに合わせる */
    .keepasecret_eyehold_main .approach_index { gap: 10px !important; }
    .keepasecret_eyehold_main .approach_tab { width: 48% !important; font-size: 3.2vw !important; height: 10.6vw !important; }
    .keepasecret_eyehold_main .content_wrap { padding: 10vw 5vw !important; }
}

/* =========================================================
   スマホ版（900px以下）レイアウト微調整パッチ
========================================================= */
@media screen and (max-width: 900px) {

    /* 1. KVテキスト（メインビジュアル下）を左揃えにする */
    body .keepasecret_eyehold_main #main_visual .kv_txt {
        align-items: flex-start !important; /* 中央寄せを解除し、左起点にする */
        text-align: left !important;
        padding: 8vw 6.4vw 12vw !important; /* 左側に画面端からの余白（パディング）を設定 */
    }
    body .keepasecret_eyehold_main #main_visual .kv_txt h1,
    body .keepasecret_eyehold_main #main_visual .kv_txt p {
        text-align: left !important;
        margin-left: 0 !important;
    }

    /* 2. ナビゲーションボタンの矢印（>）飛び出し修正 */
    body .keepasecret_eyehold_main #introduction .intro_nav li a {
        position: relative !important;
        /* 右側に矢印を収めるための余白を少し多めに確保する */
        padding: 0 6vw 0 2vw !important; 
    }
    body .keepasecret_eyehold_main #introduction .intro_nav li a::after {
        right: 3vw !important; /* 枠の外ではなく、枠の内側に矢印を配置する */
        margin: 0 !important;
    }

    /* 3. 消えてしまった intro_img を強制的に再表示させる */
    body .keepasecret_eyehold_main #introduction .intro_img {
        display: block !important;
        width: 100% !important;       /* 幅を確保（見えなくなっていた原因をリセット） */
        margin: 10vw auto !important; /* ナビボタンとテキストの間に適切な余白を取る */
        visibility: visible !important;
        opacity: 1 !important;
    }
    body .keepasecret_eyehold_main #introduction .intro_img picture,
    body .keepasecret_eyehold_main #introduction .intro_img img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
    
}
/* =========================================================
   スマホ版（900px以下）：間延びした余白の縮小パッチ
========================================================= */
@media screen and (max-width: 900px) {

    /* 1. KVテキスト（new release等）の下の余白を詰める */
    body .keepasecret_eyehold_main #main_visual .kv_txt {
        padding: 8vw 6.4vw 6vw !important; /* 元の12vwから6vwへ縮小 */
    }

    /* 2. Introductionセクション上部全体の余白を詰める */
    body .keepasecret_eyehold_main #introduction {
        padding: 10vw 0 20vw !important; /* 上の余白を25vwから10vwへ大幅に縮小 */
    }

    /* 3. セクション全体の余白を詰めた分、縦書きタイトルの位置も上に上げる */
    body .keepasecret_eyehold_main .lp_section .section_ttl, 
    body .keepasecret_eyehold_main #product .section_ttl {
        top: 10vw !important; /* 25vwから10vwへ修正 */
    }

    /* 4. ナビゲーションボタン下の余白を詰める */
    body .keepasecret_eyehold_main #introduction .intro_nav {
        margin: 0 auto 6vw 8vw !important; /* 10vwから6vwへ縮小 */
    }

    /* 5. ボタン下の画像（intro_img）の上の余白を詰める */
    body .keepasecret_eyehold_main #introduction .intro_img {
        margin: 0 auto 5vw !important; /* 10vwから5vwへ縮小 */
    }
    
}
/* =========================================================
   スマホ時の商品テキストの幅を画像に合わせる
========================================================= */
@media only screen and (max-width: 900px) {
  .keepasecret_eyehold_main .product_item .product_txt {
    width: 100% !important;
    /* ★ここの数値を変更して、画像の幅とピッタリ揃うように微調整してください */
    max-width: 320px !important; 
    margin: 0 auto !important; /* 箱自体を中央に配置する */
  }
}