/* カスタマイズ用CSS */
body {
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "MS Mincho", serif;
    color: #333; /* 真っ黒を避け、柔らかいチャコールに */
    line-height: 1.8; /* 行間を広げて読みやすく */
    letter-spacing: 0.05em; /* 文字間をわずかに広げてエレガントに */
}

/* 見出しは特に明朝体を強調 */
h1, h2, h3, .ec-shelfGrid__title {
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase; /* 英字がある場合は大文字で整える */
}
/* ボタンやアクセントカラーの変更 */
.btn-primary, .ec-blockCategoriesList__item a:hover {
    background-color: #c5b358; /* シャンパンゴールド */
    border-color: #c5b358;
    color: #fff;
}

.btn-primary:hover {
    background-color: #b3a14b;
    border-color: #b3a14b;
}

/* カートボタンなどの重要なボタンを細身で上品に */
.btn {
    border-radius: 0; /* 角を丸めず、シャープな印象に */
    padding: 10px 30px;
    font-size: 0.9rem;
}
/* セクション間の余白を拡大 */
.ec-layoutRole__contents {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* 商品一覧のカードの境界線を消し、写真を引き立たせる */
.ec-shelfGrid__item {
    border: none !important;
    padding: 20px;
    transition: opacity 0.3s ease;
}

.ec-shelfGrid__item:hover {
    opacity: 0.8; /* 控えめなホバーエフェクト */
}

.president-video-section {
    padding: 100px 0;
    background-color: #fafafa; /* わずかにグレーにしてセクションを区切る */
    text-align: center;
}

.section-title {
    font-family: "YuMincho", serif;
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    color: #c5b358; /* シャンパンゴールド */
}

.section-subtitle {
    font-size: 1.5rem;
    margin-bottom: 40px;
    font-weight: 300;
}

.video-wrapper {
    position: relative;
    max-width: 900px;
    margin: 0 auto 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* 浮遊感のある影 */
    aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
}

.video-caption p {
    max-width: 700px;
    margin: 0 auto 30px;
    font-size: 1.1rem;
    line-height: 2;
}

/* --------------------------------------------------
   1. はみ出し禁止（真っ白の原因）を強制解除
   -------------------------------------------------- */
.front_page .ec-layoutRole,
.front_page .ec-layoutRole__contents,
.front_page .ec-layoutRole__main {
    overflow: visible !important; /* はみ出しを許可する */
    transform: none !important; /* 座標変換による切り抜きを防止 */
}

/* --------------------------------------------------
   2. 横スクロールバーが出ないようにする
   -------------------------------------------------- */
body {
    overflow-x: hidden !important;
    width: 100%;
}

/* --------------------------------------------------
   3. スライダーを画面端まで広げる（ネガティブマージン戦法）
   -------------------------------------------------- */
.front_page .ec-sliderRole {
    width: 100vw !important; /* 画面の横幅100% */
    max-width: 100vw !important;
    
    /* 画面中央を基準に、左右に引き伸ばす魔法の記述 */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    
    padding: 0 !important;
}

/* --------------------------------------------------
   4. 画像の表示調整（修正版）
   -------------------------------------------------- */

/* 修正点：.slick-trackを含めないようにしました */
.front_page .ec-sliderRole .main_visual,
.front_page .ec-sliderRole .slick-list {
    width: 100% !important;
}

/* スライド1枚ごとの枠を画面幅に強制 */
.front_page .main_visual .slick-slide {
    width: 100vw !important;
}

/* 画像を隙間なく埋める設定（修正版） */
.front_page .main_visual .item img {
    width: 100vw !important;
    height: auto;
    max-height: 650px; 
    object-fit: cover; /* 比率を保ってトリミング */
    
    /* ▼▼ 追加する行：画像の基準位置を「中央の上寄り」にする ▼▼ */
    object-position: center 25%; 
    /* ▲▲ ここまで ▲▲ */
    
    display: block;
    margin: 0 auto;
}

/* スマホでの高さ調整 */
@media screen and (max-width: 768px) {
    .front_page .main_visual .item img {
        height: 500px;
        object-position: center top;
    }
}

/* ドット全体の配置調整 */
.front_page .slick-dots {
    bottom: 25px !important; /* 画像の下端から少し上に配置 */
    z-index: 100 !important; /* 画像より確実に手前に表示 */
}

/* 通常のドット（選択されていない時） */
.front_page .slick-dots li button:before {
    font-size: 0 !important; /* デフォルトの文字を消す */
    content: " " !important; /* 形を作るために空白を入れる */
    background-color: #fff !important; /* 真っ白 */
    opacity: 0.6 !important; /* 少し透けさせる */
    
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    
    /* 影をつけて白背景でも見やすくする */
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* 選択中のドット（アクティブな時） */
.front_page .slick-dots li.slick-active button:before {
    background-color: #c5b358 !important; /* シャンパンゴールド */
    opacity: 1 !important; /* くっきり表示 */
    transform: scale(1.2); /* 少しだけ大きくして強調 */
}

/* カテゴリナビ全体の調整 */
.ec-itemNav__nav {
    justify-content: center; /* 中央寄せ */
    flex-wrap: wrap; /* 折り返しを綺麗に */
    gap: 10px 25px; /* 上下10px、左右25pxの余白 */
    align-items: center; /* 縦位置を中央に */
    max-width: 1200px; /* 横幅が広がりすぎないように制限 */
    margin: 0 auto;
}

/* ブランド名（今回追加したクラス）の装飾 */
.nav_brand_item a {
    font-size: 11px; /* あえてかなり小さくする */
    font-family: "Times New Roman", "YuMincho", serif; /* 明朝体で統一 */
    letter-spacing: 0.15em; /* 文字間を広げて高級感を出す */
    text-transform: uppercase; /* 英語を全て大文字にして整える */
    color: #555; /* 真っ黒ではなくグレーで優しく */
    text-decoration: none;
    transition: all 0.3s;
    border-bottom: 1px solid transparent; /* ホバー時の線の準備 */
}

/* ホバー時の動き */
.nav_brand_item a:hover {
    color: #c5b358; /* シャンパンゴールド */
    border-bottom: 1px solid #c5b358; /* 下線がスッと出る */
}

/* 「新入荷」など日本語メニューとのバランス調整 */
.ec-itemNav__nav li:not(.nav_brand_item) a {
    font-size: 13px; /* 日本語は少しだけ大きく */
    font-weight: 500;
}


/* 26-02-02拡大鏡 */
/* 拡大表示用のスタイル */
.slide-item {
    position: relative; /* 拡大窓の基準にする */
    overflow: visible !important; /* 拡大窓がはみ出せるようにする */
}
.ec-productRole__profile {
    position: relative; /* 拡大窓の基準点にするために追加 */
}

/* 右側のカラム（説明文エリア）を基準点にする */
.ec-productRole__profile {
    position: relative !important;
}

.img-zoom-result {
    border: 1px solid #d4d4d4;
    width: 450px; /* 拡大窓のサイズ（お好みで） */
    height: 450px;
    
    /* position: absolute で親の .ec-productRole__profile を基準にする。
       top: 0 で説明文のてっぺんに合わせる。
       left: 0 で一旦説明文の左端に置く。
    */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    
    /* 重要：transform で「自分の幅100%分 + 余白」だけ左に強制移動させる。
       これで商品画像と説明文の間のスペース（または画像の上）から右へ弾き出されます。
       もしこれでも被るなら、translateX の値を -110% などに調整してください。
    */
    transform: translateX(0); /* 一旦 0 にして場所を確認 */
    
    /* もし説明文の上に重ねたいなら translateX(0) のままでOK。
       画像の上に被らせないためには、HTMLの配置場所との兼ね合いになります。 */
    
    z-index: 9999;
    visibility: hidden;
    background-repeat: no-repeat;
    background-color: #fff;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.2);
    opacity: 1;
    pointer-events: none; /* マウスイベントを透過させて操作を邪魔しない */
}

/* マウスが画像に乗ったら表示 */
.slide-item:hover .img-zoom-result {
    visibility: visible;
}
/* モバイルでは非表示 */
@media only screen and (max-width: 991px) {
    .img-zoom-result { display: none !important; }
}

/* 「カートに入れる」「注文する」などのメインアクションボタン */
.ec-blockBtn--action, 
.ec-inlineBtn--action{
    background-color: #000000 !important; /* ←ここを好きな色に変更 */
    border-color: #000000 !important;
    color: #ffffff !important;
    transition: all .3s ease;
}

/* ホバー（マウスを乗せた時）の色：少しだけグレーに */
.ec-blockBtn--action:hover, 
.ec-inlineBtn--action:hover{
    background-color: #333333 !important;
    border-color: #333333 !important;
    opacity: 0.8;
}

/* すべての is-reverse ブロックに適用する基本設定 */
.ec-eyecatchRole.is-reverse {
    margin-bottom: 0 !important; /* ブロック間の隙間はパディングで制御 */
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* 偶数番目（is-bg-grey）にだけ背景色をつける */
.ec-eyecatchRole.is-reverse.is-bg-grey {
    background-color: #F8F8F8 !important;
}

/* PCサイズ（992px以上）の設定 */
@media screen and (min-width: 992px) {
    .ec-eyecatchRole.is-reverse {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        /* 背景色を画面端まで広げる（必要な場合） */
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: calc(50vw - 50% + 20px);
        padding-right: calc(50vw - 50% + 20px);
    }

    /* 画像を左に固定 */
    .ec-eyecatchRole.is-reverse .ec-eyecatchRole__image {
        order: 1 !important;
        width: 30% !important;
        margin-bottom: 0 !important;
    }

    /* テキストを右に固定 */
    .ec-eyecatchRole.is-reverse .ec-eyecatchRole__intro {
        order: 2 !important;
        width: 70% !important;
        padding-left: 8% !important; /* 画像とテキストの間にゆったりした余白 */
        padding-right: 0 !important;
        text-align: left !important;
        display: block !important;
    }

    /* ボタン幅を260pxに統一 */
    .ec-eyecatchRole.is-reverse .ec-blockBtn--top {
        margin-left: 0 !important;
        margin-top: 40px;
        display: block !important;
        width: 100% !important;
        max-width: 260px !important;
    }
}

/* スマホサイズ（991px以下）の設定 */
@media screen and (max-width: 991px) {
    .ec-eyecatchRole.is-reverse {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* --- ヘッダーナビ & カート表示 最終調整 --- */

/* ナビ全体のコンテナ */
.ec-headerNav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px; /* アイテム間の距離 */
}

/* 各ナビアイテム */
.ec-headerNav__item a {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* カートラップ：ここが重要 */
.ec-cartNaviWrap {
    flex-shrink: 0 !important; /* カートエリアが潰れるのを阻止 */
    margin-left: 15px !important;
}

/* カート内のラベル（金額とテキスト） */
.ec-cartNavi__label {
    display: flex !important;
    flex-direction: row !important; /* 絶対に横並び */
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
}

/* 「あと〇〇円」を含む子要素divの折り返しを禁止 */
.ec-cartNavi__label > div {
    display: flex !important;
    flex-wrap: nowrap !important; /* 改行を物理的に禁止 */
    align-items: center !important;
}

/* 金額とテキストのフォント調整 */
.ec-cartNavi__price {
    font-weight: bold !important;
}

.ec-cartNavi__freeShipping {
    font-size: 11px !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* 達成時の色付け */
.ec-cartNavi__freeShipping span[style*="color: #28a745"],
.ec-cartNavi__freeShipping span {
    font-weight: bold !important;
}

/* --- 検索窓のスリム化（レイアウト崩れ防止版） --- */

/* 検索窓全体のコンテナ */
.ec-headerSearch {
    display: flex !important;
    flex-direction: row !important; /* 横並びを絶対維持 */
    width: auto !important;
    max-width: 280px !important; /* カテゴリ選択込の全体幅を制限 */
    flex-shrink: 1 !important; /* 画面が狭い時は縮むようにする */
}

/* 検索フォーム内の各要素 */
.ec-headerSearch form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
}

/* カテゴリ選択部分 */
.ec-headerSearch__category {
    flex: 0 0 100px !important; /* カテゴリの幅を100pxに固定 */
}

.ec-headerSearch__category select {
    font-size: 11px !important;
    padding: 0 5px !important;
}

/* キーワード入力エリア：ここを可変にしてナビとの衝突を防ぐ */
.ec-headerSearch__keyword {
    flex: 1 1 auto !important;
    min-width: 80px !important; /* 最低限の入力幅 */
}

.ec-headerSearch__keyword input {
    font-size: 11px !important;
    padding: 8px !important;
}

/* フォームとナビの間に最低限の余白を作る */
.ec-headerNaviRole__left {
    margin-right: 10px !important;
}

/* --- サブボタン（アウトラインボタン）の装飾 --- */

/* 共通設定：枠線のみのスタイル */
.ec-blockBtn--cancel, 
.ec-inlineBtn--cancel {
    background-color: transparent !important; /* 背景を透明に */
    border: 1px solid #999 !important; /* 控えめなグレーの細い枠線 */
    color: #666 !important; /* 文字色も少し落として控えめに */
    font-weight: 400 !important; /* フォントを細く */
    letter-spacing: 0.1em !important;
    transition: all 0.3s ease !important;
}

/* ホバー時：わずかに色が濃くなる上品な変化 */
.ec-blockBtn--cancel:hover, 
.ec-inlineBtn--cancel:hover {
    background-color: #fdfdfd !important;
    border-color: #333 !important;
    color: #333 !important;
    opacity: 1 !important;
}

/* ポップアップ（モーダル）内のボタン配置を調整 */
.ec-modal-box .ec-role {
    display: flex !important;
    gap: 15px; /* ボタン同士の間にゆとりを */
    justify-content: center;
}

/* ポップアップ内のサブボタンを少しコンパクトに */
.ec-modal-box .ec-inlineBtn--cancel {
    padding: 10px 20px !important;
    font-size: 0.85rem !important;
}