/* カスタマイズ用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;
}