/* ####################################################
    :: Template Name: Essence - Fashion Ecommerce Template
    :: Author: Colorlib
    :: Author URL: https://colorlib.com
    :: Description: Essence is smart & elegant fashion e-commerce Template. It's suitable for all e-commerce business platform.
    :: Version: 1.0.0
    :: Created: April 27, 2018
    :: Last Updated: May 2, 2018
    #################################################### */

    /* ---------------------------------------
    ##### - PLACE YOUR CUSTOM CSS HERE - #####
    --------------------------------------- */
    /* ---------------------------------------
    ##### - TOP画像(index) - #####
    --------------------------------------- */
    .top-image {
         /* デフォルト画像 */
        /* background-image: url('../img/bg-img/top_vm.png'); */
        background-image: url('../img/bg-img/vm02.jpg');
        /* background-size: cover; */
        background-position: 65%;
        /* background-position: center; */
        background-repeat:no-repeat;
        /* background-size: 26%; */
        background-size: contain;
    }
    @media (max-width: 768px) {
        .top-image {
            /* 小画面用画像 */
            background-image: url('../img/bg-img/vm02.jpg');
            background-position: 90%;
            background-repeat:no-repeat;
            background-size:40%;
        }
    }
    @media (max-width: 480px) {
        .top-image {
            /* 超小画面用画像 */
            background-image: url('../img/bg-img/vm02.jpg'); 
            background-position: 104%;
            background-repeat:no-repeat;
            background-size: 50%;
        }
    }
    /* ---------------------------------------
    ##### - ロゴの設定(master) - #####
    --------------------------------------- */
    .logo-image {
        content: url('../img/bg-img/logo_vm.png');
        height: auto;
    }
    /* 小画面用 */
    @media (max-width: 768px) {
        .logo-image {
            content: url('../img/bg-img/logo_vm.png');
            width: 70px;
        }
    }
    /* 超小画面用 */
    @media (max-width: 480px) {
        .logo-image {
            content: url('../img/bg-img/logo_vm.png');
            width: 70px;
        }
    }
    /* ---------------------------------------
    ##### - ロゴの設定(index) - #####
    --------------------------------------- */
    /* kanekaQuality */
    .bg-contain {
        /* background-size: contain; */
        background-size: 70%;
        /*width: 70% !important; /* 要素の幅 */
        /*height: 150px !important; /* 要素の高さ */
        /*background-size: contain; /* 画像を親要素に収める */
        /*background-repeat: no-repeat; /* 必要なら繰り返しを無効に */
        /*min-height: 500px;*/
    }
    /* ---------------------------------------
    ##### - Footer(master) - #####
    --------------------------------------- */
    /* フッター部分の設定 */
    body {
        font-family: 'Roboto', Georgia !important; /* Font */
        font-size: 18px !important;
        min-height: 100vh; /* ビューポートの高さ */
        display: flex;
        flex-direction: column;
    }
    .page-max {
        padding-top: 80px;
        padding-bottom: 80px;
        flex-grow: 1; /* コンテンツが残りのスペースを埋める */
    }
    .footer {
        /* background-color: #333; */
        /* color: white; */
        text-align: center;
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
    }

    /* ---------------------------------------
    ##### -住所検索(checkout) - #####
    --------------------------------------- */
    /* 住所検索のローディング */
    #loading {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* background-color: rgba(255, 255, 255, 0.8); */
        background-color:#FFFC59;
        padding: 20px;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        z-index: 1000;
    }

    /* ---------------------------------------
    ##### - 文字フォント - #####
    --------------------------------------- */
    h1, h2, h3, h4, h5, h6 {
        font-family: Georgia;
    }
/* ---------------------------------------
    ##### - 文字フォント（index） - #####
    --------------------------------------- */
    .heading{
        font-size: 18px;
        color: #787878;
        margin-bottom: 10px;
    }
    
    /* ---------------------------------------
    ##### - セレクトボックス(cart) - #####
    --------------------------------------- */
    select.form-control {
        width: 100%;
    }
    /* セレクトボックス表示中央揃え */
    .nice-select .current {
        text-align: center; /* 水平方向の中央揃え */
        display: block; /* インライン要素としての幅を確保 */
        width: 100%; /* 必要に応じて幅を設定 */
    }
    /* セレクトボックス */
    .nice-select .list {
        width: 100%; /* 必要なら固定値に変更: 例えば 200px */
        max-width: 300px; /* 必要に応じて最大幅を指定 */
        box-sizing: border-box;
        text-align: center;
    }
    .nice-select .list .option {
        width: 100%;
        box-sizing: border-box; /* パディングを含める */
        display: flex; /* フレックスボックスを有効化 */
        justify-content: center; /* 水平方向の中央寄せ */
        align-items: center; /* 垂直方向の中央寄せ */
        height: 40px; /* 必要に応じて高さを指定 */
    }
    /* 全体の幅を調整 */
    select.form-control.txt-qty.txt-change,
    .nice-select.form-control.txt-qty.txt-change {
        width: 70px; /* 必要な幅 */
        max-width: 100%; /* レスポンシブ対応 */
        min-width: 35px;
        box-sizing: border-box;
    }
    /* ---------------------------------------
    ##### - VMcoの説明(index) - #####
    --------------------------------------- */
    /* 各説明 */
    .green-letter {
        color: green !important;
        display: inline; /* 改行しないように設定 */
        /* display: block; */
        font-family: 'Cormorant Garamond', serif;
        font-size: 50px !important;
        font-weight: 700;
        letter-spacing: 1px;
        /* text-transform: uppercase; */
    }
    /* 各説明 */
    .single_catagory_area .catagory-content span {
        /* display: block; */
        font-size: 30px;
        font-weight: 700;
        color: #000000;
        letter-spacing: 1px;
        /* text-transform: uppercase; */
        text-align: center !important; 
    }
    /* 各説明の細く説明 */
    .subtext {
        display: block; /* 新しい行に表示 */
        font-size: 14px !important; /* 必要に応じて文字サイズを調整 */
        color: #555 !important; /* 必要に応じて色を設定 */
    }
    /* 見出し（期待される効果） */
    h6.product-overview{
        color: #364e96;/*文字色*/
        padding: 0.5em 0;/*上下の余白*/
        border-top: solid 3px #364e96;/*上線*/
        border-bottom: solid 3px #364e96;/*下線*/
    }
    .image-container {
        width: 200px;
        height: 200px;
        overflow: hidden;
    }
    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* contain, fill, scale-down も利用可能 */
    }
    /* ---------------------------------------
    ##### - Slider制御(index) - #####
    --------------------------------------- */
    /* slider制御 */
    .owl-dots {
        text-align: center;
        margin-top: 10px;
    }
    .owl-dot {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 5px;
        background: #ccc;
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.3s;
    }
    .owl-dot.active {
        background: #4caf50; /* 現在のスライドのインジケーター */
    }
    /* ---------------------------------------
    ##### - 入力フォームの文字サイズ - #####
    --------------------------------------- */
    .needs-validation .form-control {
        font-size: 16px !important;
    }