@charset "UTF-8";
/* ============================================================
  Responsive (999px以下)
============================================================ */

@media screen and (max-width: 999px) {
/* ヘッダー */
p.site-description {
    color: #fff !important;
    font-weight: normal!important;
}
.site-description {
    background-color: #00a0e9!important ;
}
.header_logo {
    width: 60% !important;
    margin-bottom: -34p !important;
}
.incart-btn .total-quant{
    background-color: #00a0e9!important;
}
.snav.cf {
    margin-top: 10px !important;
    margin-bottom: -15px !important;
}
/* スマホ専用アイコンnavi修正 */
/* カートアイコン全体の上下位置を調整 */
.incart-btn {
    position: relative !important;
/* --- 上下の位置調整（数値を変更してください） --- */
    top: -6px !important;  /* 正の数で下に、負の数（例: -10px）で上に移動 */
/* 他のアイコンとの横並びのバランスを整える場合 */
    display: inline-block !important;
    vertical-align: middle !important;
}
.incart-btn i {
        font-size: 32px !important;  /* ★アイコンの大きさ（適宜調整） */
        color: #fff !important;      /* ★アイコンの色（例：赤） */
}
.incart-btn .total-quant {
        /* 1. 幅と高さを同じにして固定する */
        width: 20px !important;
        height: 20px !important;        
        /* 2. 角を50%にして丸める */
        border-radius: 50% !important;
        /* 3. 余計な余白や伸びをリセット */
        padding: 0 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;   /* 垂直中央 */
        justify-content: center !important; /* 水平中央 */
        /* 4. 文字がはみ出ないよう調整 */
        font-size: 10px !important;
        line-height: 1 !important;
        /* 5. 位置の微調整（先ほどの調整値） */
        top: -0px !important;
        right: -8px !important;
}
/* メニューのドロップダウンパネルの位置調整 */
.nav-menu-open{
    top: 150px !important;
    background-color: #000 !important;
    z-index: 9999 !important; /*スライダーのアイコンの上に出す*/
}
/* メンバーシップのドロップダウンパネルの位置調整 */
.membership ul {
    top: 150px !important;
    background-color: #000 !important;
}
/* 検索アイコンを押した際に出るフォームパネルの位置調整 */
.search-box form {
    top: -10px !important;
    background-color: #00a0e9 !important;
    z-index: 100;
}
/* PC用サイトナビの隙間を削除 */
#site-navigation {
  margin-bottom: 0px !important;
}
/* スマホ専用のカラム境界のライン */
.site-header {
    border-bottom: 2px solid #025cb5 !important;
}
/* テーマオプションのタイトル（Pick-up by ACTIVE） */
.category-title {
    font-size: 1.0rem;
    margin: 0;
    margin-bottom: -15px !important;
    padding: 15px 20px 10px 0px !important;
    color: #0099ff;
    border: none !important;
    border-bottom: #0099ff 0.1em solid !important;
}
/* テーマオプション内部 */
.front-il {
    padding: 10px 20px 20px 20px !important;
    border: none !important;
}
#secondary {
    border-top: 2px solid #025cb5 !important;
}
/* パンくずリスト */
.breadcrumbs {
    border-top:1px solid #999 ;
    padding: 20px 10px 10px 10px ;  
}
/* slickスライド_画像のコンテナ設定 */
.slide-items {
    max-width: 920px;
    width: 90%; /* 100%から90%に変更（これで左右に5%ずつ余白が出る）*/
    margin: 0 auto;
}
/* slickスライド_画像自体の設定 */
.slide-items img {
    width: 100%;  /* コンテナの90%に対して、画像は常に100%（いっぱい） */
    /* 画面幅に合わせて高さを動的に変える (400/920 ≒ 43.47) */
    height: 39.12vw; /* 43.47vw × 0.9 = 約39.12vw に微調整すると比率が完璧に保てます */
    /* PCでの最大高さを制限（これがないとPCで巨大化します） */
    max-height: 400px; 
    object-fit: cover;
    display: block;
}
/* 位置調整とメニューを開いた時の表示回避 */
.slick-prev {
    left: 0px !important;
    z-index: 1 !important;
}
.slick-next {
    right: 0px;
    z-index: 1  !important;
}
/* カテゴリータイトルがくっつくの解除 */
.front-il {
    margin: 0 !important;
}

/* 共通ウィジェット（ welcartベストセラー ） */
.widget_welcart_bestseller .itemname {
    width: 65% !important;
}
.widget_welcart_bestseller .itemname a {
    font-size: 12px !important;
    line-height: 1.6em;
}
.widget_welcart_bestseller .itemimg {
    width: 30% !important;
}

/* --- ホームウィジェット：バナーを横並び --- */
.home .banner-flex-container {
        flex-wrap: nowrap !important; /* 絶対に改行させない */
        justify-content: space-between !important;
        gap: 30px !important;
        padding: 20px 30px 0 30px !important;
        border-top: #fff 1px solid;
}
.home .banner-link {
        flex: 1 1 33.33% !important; 
        width: 33.33% !important;
        margin-left: 0 !important; 
        margin-right: 0 !important;
        min-width: 0 !important; 
}
/* --- ホーム以外のウィジェットバナー：バナーを横並び --- */
.banner-flex-container {
        display: flex !important;    /* ★ここでFlexbox（横並び機能）を起動！ */
        flex-wrap: nowrap !important; /* 絶対に改行させない */
        justify-content: space-between !important;
        gap: 30px !important;         /* 画面が狭いので隙間は15px程度がマッスルです */
        padding: 0 30px !important;   /* 左右の余白を調整 */
}
.banner-link {
        flex: 1 1 33.33% !important; 
        width: 33.33% !important;
        padding: 0 !important;        /* 横並び時はpaddingをリセットして幅を確保 */
        margin-bottom: 0 !important;  /* 縦の隙間を消す */
        margin-left: 0 !important; 
        margin-right: 0 !important;
        min-width: 0 !important; 
}
}

/* 問い合わせフォーム：絶対に横並びで幅100% */
.form_input {
    margin-bottom: 30px !important;
}
.input_label {
    margin-bottom: -10px !important; /* 事項とフォームをつめる */
}
/* 規約同意チェックの位置調整 */
.entry-content .contact_form_area .form_check {
    text-align: left;
    margin-left: -15px !important;
}
/* 確認画面の事項 */
.form_confirm .confirm_label {
    margin-bottom: -10px ; /* 残りの幅をすべて使う */
}
/* その入力済テキスト */
.confirm_input {
    margin-left: 20px ; /* 残りの幅をすべて使う */
    padding-left: 10px ;
    border-left: #ff9900 4px solid ;
}
/* ボタンの配置 */
.form_buttons,
.form_confirm_buttons {
    display: flex !important;
    flex-wrap: nowrap !important; /* 絶対に折り返さない */
    justify-content: space-between !important; /* 両端に配置 */
    width: 100% !important;
    gap: 10px !important; /* ボタン同士の固定の隙間（入力しても無効） */
    margin-top: 20px !important;
}
.form_buttons .my-reset-btn,
.form_confirm_buttons .my-back-btn {
    margin-right: 15px;
    margin-bottom: 15px;
}
.form_buttons .my-reset-btn,
.form_buttons .my-submit-btn,
.form_confirm_buttons .my-back-btn,
.form_confirm_buttons .my-send-btn {
    width: 150px !important; 
    padding: 12px 0px !important; /* 左右は入力しても無効 */
    margin-left: 0px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important; /* 文字を一行で維持 */
    font-size: 12px !important; /* スマホで並べた時に見やすいサイズ */
    border: 1px solid #fff;
    background-color: transparent !important;
    border-radius: 8px;
    color: #fff;
}

/* 買い物カゴ */
/* テーブル本体 */
html body table#confirm_table {
    display: block !important;
    width: 100% !important; /* 画面全体の70% */
    margin: 0 auto !important;
}
/*【ここが重要】tbodyもブロック化して幅を100%にする */
html body #confirm_table thead,
html body #confirm_table tbody {
    display: block !important;
    width: 100% !important;
}
/* 行を横並びに */
html body #confirm_table tr {
    display: flex !important;
    width: 100% !important;
}
/* 各列の比率を固定 */
html body #confirm_table th {
    flex: 0 0 35% !important;
    width: 35% !important;
    box-sizing: border-box !important;
}
html body #confirm_table td {
    flex: 1 1 65% !important; /* 残り全部を埋める */
    width: 65% !important;
    box-sizing: border-box !important;
}
/* 特定商取引法リンクの調整 */
    .wc_confirm_notes_area {
    display: block; /* 横幅いっぱいに広げる */
    text-align: right;
    font-size: 11px;
    margin-top: 5px !important;
}

/* その他 */
/* スマホ等で入力欄をタップした際、ブラウザが勝手にズームするのを防ぐ */    
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
        font-size: 16px !important; /* iPhone等で16px未満だとズームされる仕様への対策 */
}

/* ============================================================
  Responsive (739px以下)
============================================================ */

@media screen and (max-width: 739px) {
/* テーブル全体をブロック化 */
.customer_form table,
.confirm_table,
.cart_table {
    display: block !important;
    width: 100% !important;
}
/* 見出し(th)と入力欄(td)を縦に並べる */
.customer_form th, 
.customer_form td,
.confirm_table th,
.confirm_table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important; /* 左寄せにして安定させる */
    border-bottom: none !important;
}
/* 見出しの背景色や余白を調整して「項目名」らしくする */
.customer_form th,
.confirm_table th {
    background-color: #333 !important; /* 項目名に背景をつけて分かりやすく */
    padding: 8px 10px !important;
    margin-top: 10px !important;
}
/* 入力欄の余白調整 */
.customer_form td,
.confirm_table td {
    padding: 10px !important;
    border: 1px solid #ddd !important; /* 枠線で囲って独立させる */
}
.customer_form input[type="text"],
.customer_form input[type="tel"],
.customer_form input[type="email"],
.customer_form select,
.customer_form textarea {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}
.customer_form .member_name{
    padding: 0 !important;
}
.customer_form tr.inp1 input {
    margin-left: 0 !important;
}
/* 入力欄を包むセル(td)自体に左右の余白を作る */
.customer_form td,
.confirm_table td {
    padding-left: 10px !important;
    padding-right: 150px !important;
    box-sizing: border-box !important;
}
/* パスワード入力欄の親要素（td）を、中身を横並びにする設定に変える */
.customer_form tr th + td {
    display: flex !important;
    flex-wrap: wrap !important; /* 画面が極端に狭い時は折れるように */
    align-items: center !important;
    gap: 10px !important; /* 入力欄と文字の間の隙間 */
}
/* パスワード等の入力フォーム自体の幅を少し削る（60%など） */
.customer_form input[type="password"],
.customer_form input[name="customer[password]"] {
    width: 40% !important; /* ここを調整して注釈のスペースを作る */
    display: inline-block !important;
    margin-bottom: 0 !important;
}
/* 注釈テキスト（「新規会員〜」「パスワードは〜」）の調整 */
.customer_form p {
    display: inline-block !important;
    font-size: 11px !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}
/* 郵便番号フォームを適切な長さにする */
.customer_form input[name="member[zipcode]"] {
    width: 150px !important; /* 郵便番号にちょうどいい幅 */
    display: inline-block !important;
}
/* 都道府県と配送指定のドロップダウンを適切な幅にする */
.customer_form select[name="member[pref]"],
.customer_form select[name="offer[delivery_method]"],
.customer_form select[name="offer[delivery_date]"],
.customer_form select[name="offer[delivery_time]"] {
    width: auto !important; /* 文字数に合わせる、または 150px 等で固定 */
    min-width: 150px !important;
    display: block !important; /* ドロップダウンは独立させた方が押しやすい */
    margin-top: 5px !important;
}
/* 入力項目最後、境界の下線を削除 */
.customer_form tr:last-child {border-bottom: none !important;}
/* パスワードをお忘れですが？のリンクがフォームにくっつきすぎ */
#nav {margin: 0 !important; padding-top: 10px !important;}
/* 入力項目下の戻る、次へボタンがフォームにくっつきすぎ */
.send {margin-top: 15px !important;}
}

/* ============================================================
  Responsive (619px以下)
============================================================ */

/* カート内進行バーの修正 */
@media screen and (max-width: 619px) {
/* 親のulを、子要素を横いっぱいに広げる設定に変更 */
.cart_navi ul {
    display: flex !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
/* 各ステップ（li）のpaddingを解除し、均等幅にする */
.cart_navi ul li {
    flex: 1 !important;      /* これで全要素が均等な幅になります */
    padding-left: 20px !important;
    padding-right: 15px !important;
    text-align: center !important; /* 文字は中央に */
    white-space: nowrap !important; /* 改行を防ぐ */
    font-size: 12px !important;    /* 狭い画面用に文字を微調整 */
}
}