/* CSS カスタマイズ（本番はこのファイルを import.css から読み込み） */

/* トップ index.tpl メーカータイル
 * 767px 未満は display:block のみ（Flex だと環境によって横並びが残るため）
 * 768px 以上だけ Flex で2列
 */
#main_image .top-banner-tiles {
    display: block;
    width: 100%;
    margin: 0 0 4px 0;
    box-sizing: border-box;
}
#main_image .top-banner-tiles__item {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 10px;
    float: none !important;
    clear: both !important;
}
@media (max-width: 767px) {
    /* メインバナー（帳票専門ショップ…）は横幅100%／直下に 6px */
    #main_image .top-main-banner {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 6px;
        height: auto;
    }
    #main_image .top-banner-tiles {
        display: block !important;
        margin-bottom: 6px;
    }
    #main_image .top-banner-tiles__item {
        display: block !important;
        width: 80% !important;
        max-width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 6px !important;
    }
    #main_image .top-banner-tiles__item:last-child {
        margin-bottom: 0 !important;
    }
}
@media (min-width: 768px) {
    #main_image .top-banner-tiles {
        display: flex;
        flex-wrap: wrap;
    }
    #main_image .top-banner-tiles__item {
        width: 50% !important;
        flex: 0 0 50%;
        max-width: 50% !important;
        clear: none !important;
    }
}
#main_image .top-banner-tiles__item > a {
    display: block;
}
#main_image .top-banner-tiles__item img {
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    display: block;
}

#header_search_form {
    margin-top: 16px;
}

div.list_area h3 {
    font-size: 13px;
}
body {
    font-size: 12px;
}

.hovimg {
    border: none;
    text-decoration: none;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
.hovimg:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

.sizedown {
    font-size: 90%;
    font-weight: bold;
}

.grow:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

/* メインヘッダー: こんにちは／検索／会員登録／カート等のコントラスト（navbar-default は既定 #777 が薄い） */
#header_wrap.navbar-default {
    background-color: #f2f2f2;
    border-color: #ccc;
}
#header_wrap.navbar-default .navbar-nav > li > a {
    color: #1f1f1f;
}
#header_wrap.navbar-default .navbar-nav > li > a:hover,
#header_wrap.navbar-default .navbar-nav > li > a:focus {
    color: #0a0a0a;
    background-color: #e0e0e0;
}
#header_wrap .navbar-nav > .open > a,
#header_wrap .navbar-nav > .open > a:hover,
#header_wrap .navbar-nav > .open > a:focus {
    color: #0a0a0a;
    background-color: #e0e0e0;
}
#header_wrap .navbar-nav > li > a .glyphicon {
    color: inherit;
}
#header_wrap .navbar-form .form-control {
    color: #1a1a1a;
    background-color: #fff;
    border-color: #888;
}
#header_wrap #header-search::placeholder {
    color: #404040;
    opacity: 1;
}
#header_wrap #header-search::-webkit-input-placeholder {
    color: #404040;
}
#header_wrap #header-search::-moz-placeholder {
    color: #404040;
    opacity: 1;
}
#header_wrap .navbar-form .btn-default {
    color: #1a1a1a;
    background-color: #dedede;
    border-color: #777;
    font-weight: 600;
}
#header_wrap .navbar-form .btn-default:hover,
#header_wrap .navbar-form .btn-default:focus {
    color: #0a0a0a;
    background-color: #cfcfcf;
    border-color: #555;
}
#header_wrap .navbar-toggle {
    border-color: #666;
}
#header_wrap .navbar-toggle .icon-bar {
    background-color: #333;
}
#header_wrap .dropdown-menu > li > a {
    color: #1a1a1a;
}
#header_wrap .dropdown-menu > li > a:hover,
#header_wrap .dropdown-menu > li > a:focus {
    color: #000;
    background-color: #ebebeb;
}
#header_wrap .dropdown-header {
    color: #2a2a2a;
}
#header_wrap .dropdown-header span {
    color: #2a2a2a;
}
#header_wrap .dropdown-menu .btn-default {
    color: #1a1a1a;
    background-color: #e2e2e2;
    border-color: #777;
    font-weight: 600;
}
#header_wrap .dropdown-menu .btn-default:hover,
#header_wrap .dropdown-menu .btn-default:focus {
    background-color: #d4d4d4;
    border-color: #555;
    color: #0a0a0a;
}
#header_wrap .dropdown-header a:not(.btn) {
    color: #0a5580;
    font-weight: 600;
}
#header_wrap .dropdown-header a:not(.btn):hover,
#header_wrap .dropdown-header a:not(.btn):focus {
    color: #063a57;
}
#header_wrap #headerInternalColumn {
    color: #2a2a2a;
}
#header_wrap .badge.bg-red {
    color: #fff;
    font-weight: 700;
}

/* 992px 未満: 1行目＝左ロゴ・右バーガー、その下に #mobile-nav（検索）
 * - Bootstrap .navbar-brand の height:20px は height:auto !important で打ち消し（レイアウト高さを確保）
 * - DOM は「トグル→ブランド」のまま row-reverse で視覚的に左ロゴ・右バーガーに並べる（order より実機で安定）
 * - 大きい title.webp はヘッダー1行用に max-height で縮小（左寄せ・縦はみ出し防止）
 * - header.tpl の img に width="100%" を付けない（無効な属性値で Safari が巨大描画し検索と重なる） */
@media (max-width: 991px) {
    #header_wrap.navbar {
        min-height: 0;
        overflow: visible;
    }
    #header_wrap #header.container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    #header_wrap .navbar-header {
        float: none;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        position: relative;
        min-height: 60px;
    }
    #header_wrap .navbar-header::before,
    #header_wrap .navbar-header::after {
        display: none;
        content: none;
    }
    #header_wrap .navbar-toggle {
        position: static;
        float: none;
        flex: 0 0 auto;
        flex-shrink: 0;
        /* Bootstrap 既定の margin-right:15px を上書きし右寄せ（992px 未満） */
        margin: 8px 0 8px 10px;
        z-index: 5;
    }
    #header_wrap .navbar-brand {
        float: none;
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: none;
        height: auto !important;
        max-height: 60px;
        line-height: 1;
        padding: 8px 8px 8px 15px;
        margin: 0;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
    }
    /* Safari でロゴが大きくなりすぎて検索と重なる対策: 小さめの max-height で確実に制限 */
    #header_wrap .navbar-brand img,
    #header_wrap .navbar-brand img.header-site-title-img {
        padding-top: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        max-height: 44px !important;
        height: auto !important;
        display: block;
        margin: 0;
        -o-object-fit: contain;
        object-fit: contain;
        object-position: left center;
        vertical-align: top;
    }
    #header_wrap #header_utility {
        float: none;
        width: 100%;
        clear: both;
    }
    #mobile-nav {
        clear: both;
        position: relative;
        z-index: 2;
        margin-top: 16px;
        padding-top: 4px;
    }
}

/* PC幅（992px以上）ではロゴをブランド領域いっぱいに表示（縦横比維持・はみ出し防止） */
@media (min-width: 992px) {
    #header_wrap .navbar-brand {
        max-width: 400px;
    }
    #header_wrap .navbar-brand img.header-site-title-img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 80px;
        object-fit: contain;
        object-position: left center;
    }
}

/* モバイルヘッダー（カテゴリ・MYページ・お気に入り・カート）コントラスト改善 */
#mobile-nav .navbar-default {
    background-color: #ececec;
    border-color: #d0d0d0;
}
#mobile-nav .form-control {
    color: #1a1a1a;
    border-color: #888;
}
#mobile-nav .navbar-nav > li > a.btn-link,
#mobile-nav .navbar-nav > li > a.btn-link:link,
#mobile-nav .navbar-nav > li > a.btn-link:visited {
    color: #0f1f13;
}
#mobile-nav .navbar-nav > li > a.btn-link:hover,
#mobile-nav .navbar-nav > li > a.btn-link:focus {
    color: #0f1f13;
    text-decoration: none;
}
#mobile-nav .navbar-nav > li > a.btn-link .glyphicon,
#mobile-nav .navbar-nav > li > a.btn-link small {
    color: inherit;
}
#mobile-nav .input-group-addon {
    color: #333;
    background-color: #e8e8e8;
    border-color: #bbb;
}
#mobile-nav #mobile-header-search::placeholder {
    color: #404040;
    opacity: 1;
}
#mobile-nav #mobile-header-search::-webkit-input-placeholder {
    color: #404040;
}
#mobile-nav #mobile-header-search::-moz-placeholder {
    color: #404040;
    opacity: 1;
}

/* simple 店舗フレーム（.frame_outer）内: Bootstrap の薄い青を濃い青系に統一（ページングは pager.css も参照） */
.frame_outer #container a:not(.btn):not(.thumbnail):not(.list-group-item):not(.alert-link),
.frame_outer #headertopcolumn a:not(.btn):not(.thumbnail):not(.list-group-item):not(.alert-link),
.frame_outer #footerbottomcolumn a:not(.btn):not(.thumbnail):not(.list-group-item):not(.alert-link) {
    color: #0a5580;
}
.frame_outer #container a:not(.btn):not(.thumbnail):not(.list-group-item):not(.alert-link):hover,
.frame_outer #container a:not(.btn):not(.thumbnail):not(.list-group-item):not(.alert-link):focus,
.frame_outer #headertopcolumn a:not(.btn):not(.thumbnail):not(.list-group-item):not(.alert-link):hover,
.frame_outer #headertopcolumn a:not(.btn):not(.thumbnail):not(.list-group-item):not(.alert-link):focus,
.frame_outer #footerbottomcolumn a:not(.btn):not(.thumbnail):not(.list-group-item):not(.alert-link):hover,
.frame_outer #footerbottomcolumn a:not(.btn):not(.thumbnail):not(.list-group-item):not(.alert-link):focus {
    color: #063a57;
}

.frame_outer .btn-link {
    color: #0a5580;
}
.frame_outer .btn-link:hover,
.frame_outer .btn-link:focus {
    color: #063a57;
}

.frame_outer .text-primary {
    color: #0a5580 !important;
}

.frame_outer .btn-primary {
    background-color: #0a5580;
    border-color: #084466;
    background-image: none;
    color: #fff;
    text-shadow: none;
}
.frame_outer .btn-primary:hover,
.frame_outer .btn-primary:focus,
.frame_outer .btn-primary:active,
.frame_outer .btn-primary.active,
.frame_outer .open > .dropdown-toggle.btn-primary {
    background-color: #084466;
    border-color: #063a57;
    color: #fff;
}

.frame_outer .btn-info {
    background-color: #28728c;
    border-color: #1f5f75;
    background-image: none;
    color: #fff;
    text-shadow: none;
}
.frame_outer .btn-info:hover,
.frame_outer .btn-info:focus,
.frame_outer .btn-info:active,
.frame_outer .btn-info.active,
.frame_outer .open > .dropdown-toggle.btn-info {
    background-color: #1f5f75;
    border-color: #184a5c;
    color: #fff;
}

/* 商品カテゴリ: 商品数バッジ（Bootstrap 既定の灰背景＋白文字を濃い青に） */
#category_area li > a .badge {
    background-color: #0a5580;
    color: #fff;
    font-weight: 700;
}
#category_area li.active > a .badge,
#category_area li.onmark > a .badge,
#category_area a.onlink .badge {
    background-color: #063a57;
    color: #fff;
}

/* ガイド（当サイトについて・お問い合わせ・特商法・プライバシー）: list-group は除外ルールで薄いままになりがち */
#guide_area a.list-group-item {
    color: #1a1a1a;
    font-weight: 600;
}
#guide_area a.list-group-item:hover,
#guide_area a.list-group-item:focus {
    color: #0a0a0a;
    background-color: #ededed;
}
#guide_area a.list-group-item .fa.pull-right {
    color: #444;
}
#guide_area a.list-group-item.active,
#guide_area a.list-group-item.active:hover,
#guide_area a.list-group-item.active:focus {
    color: #fff;
    background-color: #0a5580;
    border-color: #084466;
}
#guide_area a.list-group-item.active .fa {
    color: #fff;
}

/* ヘッダー内の同リンク（visible-xs・折りたたみメニュー） */
#header_wrap .navbar-nav > li.visible-xs > a {
    color: #141414;
    font-weight: 600;
}
#header_wrap .navbar-nav > li.visible-xs > a:hover,
#header_wrap .navbar-nav > li.visible-xs > a:focus {
    color: #000;
}

/* 現在のカートの中（サイド）: 見出し・本文・金額・警告ボタンのコントラスト */
#cart_area.panel-default > .panel-heading {
    background-color: #dedede;
    border-color: #aaa;
}
#cart_area .panel-title {
    color: #111;
    font-weight: 700;
}
#cart_area .panel-title .glyphicon {
    color: #222;
}
#cart_area .panel-body {
    color: #171717;
    background-color: #f7f7f7;
    border-top: 1px solid #bbb;
}
#cart_area .information p {
    color: #1a1a1a;
    font-weight: 600;
}
#cart_area .attention {
    color: #7a1428;
    font-weight: 800;
}
#cart_area .price {
    color: #7a1428;
    font-weight: 800;
}
#cart_area .postage,
#cart_area .point_announce {
    color: #242424;
}
#cart_area a.btn-warning {
    background-color: #b45309;
    border-color: #943f07;
    color: #fff;
    font-weight: 700;
    text-shadow: none;
}
#cart_area a.btn-warning:hover,
#cart_area a.btn-warning:focus,
#cart_area a.btn-warning:active {
    background-color: #943f07;
    border-color: #6d2f05;
    color: #fff;
}

/* FAXで注文！（faxorder.tpl のリンクのみ・他の btn-danger には影響しない） */
.side_column a.btn-danger[href="/user_data/faxorder.php"] {
    background-color: #9a1e2a;
    border-color: #741520;
    color: #fff;
    font-weight: 800;
    text-shadow: none;
    /* Bootstrap .btn 既定 上下6px を基準に、ボタン全体の高さが約1.4倍になるよう調整 */
    padding-top: 12.4px;
    padding-bottom: 12.4px;
}
.side_column a.btn-danger[href="/user_data/faxorder.php"]:hover,
.side_column a.btn-danger[href="/user_data/faxorder.php"]:focus,
.side_column a.btn-danger[href="/user_data/faxorder.php"]:active {
    background-color: #741520;
    border-color: #521018;
    color: #fff;
}

/* フッター: このページの先頭へ・テンプレートクレジット */
#footer_wrap #pagetop a,
#footer_wrap #pagetop a:link,
#footer_wrap #pagetop a:visited {
    color: #0a5580;
}
#footer_wrap #pagetop a:hover,
#footer_wrap #pagetop a:focus {
    color: #063a57;
}
#footer_wrap #footer.container > div:last-child {
    color: #333;
}
#footer_wrap #footer.container > div:last-child a,
#footer_wrap #footer.container > div:last-child a:link,
#footer_wrap #footer.container > div:last-child a:visited {
    color: #0a5580;
}
#footer_wrap #footer.container > div:last-child a:hover,
#footer_wrap #footer.container > div:last-child a:focus {
    color: #063a57;
}

/* 新着情報: RSS（btn-warning を濃くしてコントラスト向上） */
#news_area .page-header a.btn-warning {
    color: #fff;
    background-color: #b45309;
    border-color: #943f07;
    text-shadow: none;
}
#news_area .page-header a.btn-warning:hover,
#news_area .page-header a.btn-warning:focus,
#news_area .page-header a.btn-warning:active {
    color: #fff;
    background-color: #943f07;
    border-color: #6d2f05;
}