@charset "utf-8";

/**
***  スマートフォン対応（幅767px以下）
***  対象は3画面のみ。body の ID でスコープを限定しているため、
***  他画面のレイアウトには影響しない。
***    #all_login … ログイン画面    (auth/index.html.twig)
***    #lb_home   … ダッシュボード  (user/index.html.twig)
***    #info_home … お知らせ        (notice/index.html.twig)
*** ============================== */

@media screen and (max-width: 767px) {

/**
***  共通ヘッダー
*** ============================== */
    #lb_home #main,
    #info_home #main {
        padding-top: 20px;
        padding-bottom: 40px;
    }
    /* ヘッダーは 80px の一本バーに
       【ロゴ】【マニュアル】【見出し】【ホーム】【ハンバーガー】が並ぶ。
       ハンバーガーの位置・余白は drawer.css の前提を崩さないため触らない。 */

    /* HOME はタイトル文字を出さず、アイコンだけにする。 */
    #lb_home #l-header h1 {
        display: none;
    }
    /* お知らせは見出しを残し、左右のアイコンの間に収める。 */
    #info_home #l-header h1 {
        left: 74px;
        width: calc(100% - 190px);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        font-size: 15px;
        line-height: 1.25;
        letter-spacing: 0;
    }
    /* 左上の産業別ロゴ（layer_*.svg / broiler_*.svg）を縮小。 */
    #lb_home #l-header,
    #info_home #l-header {
        background-size: 40px 40px;
    }
    /* HOME のロゴは左上固定（background-position: 0 0）だったのを、
       ? ・ホーム・ハンバーガーと揃えて縦中央にする。 */
    #lb_home #l-header {
        background-position: 0 center;
    }
    #lb_home #l-header .link-home,
    #info_home #l-header .link-home {
        right: 80px;
        font-size: 26px;
    }
    #lb_home #l-header .link-book {
        left: 44px;
        font-size: 24px;
    }


/**
***  共通ドロワーメニュー
*** ============================== */
    #lb_home .drawer-nav,
    #info_home .drawer-nav {
        width: 260px;
    }
    /* 閉じ状態。drawer.css の開き状態
       （.drawer--right.drawer-open .drawer-nav → right:0）は ID を含まないため、
       ID 付きの閉じ状態だけを書くと詳細度で勝ってしまい、
       メニューが開かなくなる。開き状態も必ず同じ詳細度で上書きする。 */
    #lb_home.drawer--right .drawer-nav,
    #info_home.drawer--right .drawer-nav {
        right: -260px;
    }
    #lb_home.drawer--right.drawer-open .drawer-nav,
    #info_home.drawer--right.drawer-open .drawer-nav {
        right: 0;
    }
    #lb_home.drawer--right.drawer-open #l-header header .drawer-hamburger,
    #info_home.drawer--right.drawer-open #l-header header .drawer-hamburger {
        right: 260px;
    }
    #lb_home.drawer--right.drawer-open .drawer-nav .drawer-menu > li a,
    #info_home.drawer--right.drawer-open .drawer-nav .drawer-menu > li a,
    #lb_home.drawer--right.drawer-open .drawer-nav .drawer-menu > li a.drawer-brand,
    #info_home.drawer--right.drawer-open .drawer-nav .drawer-menu > li a.drawer-brand {
        padding: .6rem 1.2rem;
        font-size: 18px;
    }

/**
***  ログイン画面
*** ============================== */
    #all_login {
        margin-top: 24px;
        padding-bottom: 40px;
    }
    #all_login > #l-wrapper > .container > img {
        width: 90px;
    }
    #all_login h1 {
        margin-top: 16px;
        margin-bottom: 16px;
    }
    #all_login .jumbotron {
        padding: 20px 16px;
    }
    #all_login .form-control {
        height: 48px;
        margin-bottom: 16px;
        font-size: 16px;
    }
    #all_login .btn-primary {
        margin-bottom: 8px;
        font-size: 20px;
        line-height: 30px;
    }

/**
***  ダッシュボード
*** ============================== */
    /* 左右2カラム（float 49%）を1カラムに */
    #lb_home .home_lbtn,
    #lb_home .home_rbtn {
        float: none;
        width: 100%;
    }
    #lb_home .home_lbtn .btn {
        height: auto;
        min-height: 64px;
        padding: 16px 12px 16px 56px;
        margin-bottom: 12px;
        font-size: 24px;
        background-position: 10px 50%;
        background-size: 36px 36px;
    }
    /* 未読バッジは float:right の別要素で、そのままだとボタンの文字に被る。
       バッジの分だけボタンの右余白を広げ、バッジ自身を文字の縦中央に合わせる。
       margin はテンプレートのインラインstyle指定なので !important が要る。 */
    #lb_home .home_lbtn > .badge {
        position: relative;
        top: 14px;
        margin-top: 0 !important;
        margin-right: 14px !important;
    }
    #lb_home .home_lbtn > .badge + .btn {
        padding-right: 60px;
    }
    /* 注文ブロックは中に子ボタン（飼料／購買／見積）を持つため、
       背景のカートアイコンがスマホ幅では子ボタンと重なる。非表示にする。 */
    #lb_home .btn_order {
        background-image: none;
    }
    /* 「注文」ブロック（飼料／購買／見積）はインラインstyle指定のため !important で上書き */
    #lb_home .btn_order {
        padding: 12px 8px !important;
        font-size: 22px;
        text-align: center;
    }
    #lb_home .btn_order .btn {
        min-height: 0;
        padding: 8px 4px !important;
        margin-bottom: 0;
        font-size: 16px !important;
    }
    #lb_home .daily_data {
        padding: 12px 12px 4px;
        margin-bottom: 12px;
        font-size: 24px;
        background-position: 8px 8px;
        background-size: 36px 36px;
    }
    #lb_home .daily_data .btn {
        height: auto;
        min-height: 52px;
        padding: 10px;
        margin-bottom: 12px;
        font-size: 22px;
    }
    /* 食鳥受付票・報告書・鳥インフル（いずれもインラインstyleで大きな文字を指定） */
    #lb_home #main .home_rbtn > .btn {
        padding: 12px 10px;
        font-size: 20px !important;
        line-height: 1.4;
    }
    /* 相場情報 */
    #lb_home .market {
        padding-top: 24px;
    }
    #lb_home .market h3,
    #lb_home .market_date {
        float: none;
        margin-top: 0;
    }
    #lb_home .market h3 {
        font-size: 20px;
    }
    #lb_home .market_date {
        margin-bottom: 8px;
    }
    #lb_home .market th,
    #lb_home .market td {
        padding: 5px 2px !important;
        font-size: 14px !important;
    }

/**
***  お知らせ画面
*** ============================== */
    #info_home .area-btn {
        margin: 20px 0 24px 0;
    }
    /* 4分割タブを 2×2 に */
    #info_home .area-btn .flex-4 > .item {
        width: calc((100% - 10px) / 2);
        margin-bottom: 10px;
    }
    #info_home .area-btn .flex .item a {
        padding: 12px 8px;
        font-size: 20px;
    }
    #info_home .area-btn .flex .item .badge {
        top: -12px !important;
        right: -6px !important;
        min-width: 30px !important;
        padding: 7px !important;
        font-size: 13px;
    }

/**
***  お知らせ一覧・新着情報・注意喚起（ダッシュボードとお知らせ画面で共用）
*** ============================== */
    #lb_home #news_list dt,
    #info_home #news_list dt {
        float: none;
        clear: both;
        overflow: hidden;
    }
    #lb_home #news_list dd,
    #info_home #news_list dd {
        display: block;
        padding-bottom: 20px;
    }
    #lb_home #newcome h2,
    #info_home #newcome h2 {
        margin-top: 24px;
        font-size: 22px;
    }
    #lb_home #newcome .panel,
    #info_home #newcome .panel {
        padding: 16px 16px 4px;
    }
    #lb_home #attention,
    #info_home #attention {
        font-size: 16px;
    }
    #lb_home #attention .panel,
    #info_home #attention .panel {
        padding: 16px 16px 0 16px;
        border-width: 3px;
    }
    #lb_home #news_list h2,
    #info_home #news_list h2 {
        font-size: 20px;
    }

/**
***  お知らせモーダル（ダッシュボードとお知らせ画面で共用）
*** ============================== */
    #notice_modal .modal-dialog {
        margin: 10px auto;
        width: calc(100% - 20px);
    }
    #notice_modal .modal-content {
        padding: 6px 12px 16px;
    }
    #notice_modal .modal-header {
        padding: 6px 0;
    }
    #notice_modal .modal-header .close {
        font-size: 32px;
    }
    #notice_modal .modal-body {
        padding: 8px 0;
    }
    #notice_modal .event_form_panel {
        padding: 14px;
    }
    #notice_modal .form_info {
        font-size: 17px;
    }
    #notice_modal .marui_comment,
    #notice_modal .order_comment,
    #notice_modal .my_comment {
        padding: 14px;
        margin-bottom: 16px;
        font-size: 16px !important;
    }
    #notice_modal .area-submit {
        margin-top: 24px;
    }
    #notice_modal .area-submit .btn {
        min-width: 140px;
        font-size: 18px;
    }
    #notice_modal .event_form_panel,
    #notice_modal .event_form_panel label {
        font-size: 18px;
    }
    /* 回答フォームの横並び（質問｜はい｜いいえ）を縦積みに */
    #notice_modal #notice_form table,
    #notice_modal #notice_dead table {
        width: 100%;
        margin: 10px 0;
    }
    #notice_modal #notice_form table td,
    #notice_modal #notice_dead table td {
        display: block;
        width: 100%;
        padding: 4px 0;
    }

}