/*/////////////////////////////////////////////
レスポンシブ対応 共通シート
・全ページで読み込み(include/head.html)
・既存の各CSS(top.css等)のメディアクエリはそのまま。
　ここには新規に追加するレスポンシブ用ルールを記載していく。
/////////////////////////////////////////////*/

/*/////////////////////////////////////////////
文字サイズ 画面幅に応じて自動調整(フルイドタイポグラフィ)
・幅375px程度のスマホで最小14px、幅640px以上で従来通り16px
/////////////////////////////////////////////*/
body,
input,
select,
textarea,
p,
.spa_h1 {
    font-size: clamp(14px, 2.5vw, 16px);
}

/*/////////////////////////////////////////////
画像 コンテナ幅を超えないよう上限を設定
・width指定の無い画像や、HTML側のwidth属性(px)だけの画像が画面幅からはみ出すのを防ぐ安全策
・各ページCSSで既にwidth:100%や%指定がある画像には影響なし(それらは元々100%以下)
/////////////////////////////////////////////*/
img {
    max-width: 100%;
    height: auto;
}

/*/////////////////////////////////////////////
各ページ見出し(.com_h1) 画面幅に関わらず左上に統一
・main.cssの736px以下 .banner h1{align-items:center} を上書き
/////////////////////////////////////////////*/
.banner h1,
#banner h1 {
    align-items: flex-start;
}

/*/////////////////////////////////////////////
.div_flex(本文中の横並び要素) スマホ幅で自然に折返し
・column固定にすると「アイコン+短いラベル」まで縦積みになり不自然なため、
　flex-wrapで幅に収まらない要素だけ下に折り返す
/////////////////////////////////////////////*/
@media screen and (max-width: 736px) {
    .div_flex {
        flex-wrap: wrap;
    }
}

/*/////////////////////////////////////////////
テーブル(基本table) スマホ幅でth/tdを縦並び・同幅に
・.table_left/.table_rightは左右2列専用レイアウトのため対象外
/////////////////////////////////////////////*/
@media screen and (max-width: 736px) {
    table:not(.table_left):not(.table_right) {
        display: block;
        width: 100%;
    }
    table:not(.table_left):not(.table_right) thead,
    table:not(.table_left):not(.table_right) tbody,
    table:not(.table_left):not(.table_right) tr,
    table:not(.table_left):not(.table_right) th,
    table:not(.table_left):not(.table_right) td {
        display: block;
        width: 100%;
    }
    table:not(.table_left):not(.table_right) th {
        text-align: left;
        padding-left: 0.5em;
    }
    table:not(.table_left):not(.table_right) th .div_flex {
        justify-content: flex-start;
        margin: 0;
    }
    /* display:blockでborder-collapseが効かず境界線が二重になるため、上側を無くして1本にする */
    table:not(.table_left):not(.table_right) th,
    table:not(.table_left):not(.table_right) td {
        border-top: none;
    }
    table:not(.table_left):not(.table_right) tr:first-of-type th:first-of-type {
        border-top: solid 1px rgba(210, 215, 217, 0.75);
    }

}

/*/////////////////////////////////////////////
th内アイコン(fa-refresh等) スマホ幅でth内に収まるサイズに自動調整
・source_basic.cssの.filter .fa-refresh等がfont-size:50px指定のため、
　スマホでth内が縦積みになると収まらない。PC表示(50px)には影響させない
/////////////////////////////////////////////*/
@media screen and (max-width: 736px) {
    .filter th .fa-refresh,
    .filter th .fa-bars,
    .filter th .fa-cog,
    .filter th .fa-minus {
        font-size: 2em;
    }
}

/*/////////////////////////////////////////////
月単位チェックボックス(check_off) スマホ幅で位置再調整
・source_basic.cssのtop/left(%指定)はPC時の狭いth幅基準のため、
　スマホでthがwidth:100%になると位置がずれる。固定値で上書き
/////////////////////////////////////////////*/
@media screen and (max-width: 736px) {
    /* table自体がwidth:50%、thがwidth:25%固定のため、tdとの幅が揃わない分を上書き */
    .filter .div_1 .div_flex table {
        width: 100%;
    }
    .filter .div_1 .div_flex table th {
        width: 100%;
    }
    .filter .div_1 .div_flex table tr:first-of-type th {
        padding-left: 1.6em; /* アイコン幅(17px)+左余白0.2em+テキストとの隙間0.3em分を確保 */
    }
    .filter .div_1 .div_flex table tr:first-of-type th::before {
        top: 50%;
        left: 0.2em;
        transform: translateY(-50%);
    }
}

/*/////////////////////////////////////////////
その他の同パターンtable(table width:50%前後、th width:25%固定) スマホ幅でth/tdを同幅に
/////////////////////////////////////////////*/
@media screen and (max-width: 736px) {
    .item_category table,
    .category_bcpos table,
    .category table {
        width: 100%;
        margin-left: 0;
    }
    .filter .div_2 table {
        width: 95%;
        margin: 0 auto;
    }
    .filter .div_2 table th,
    .item_category table th,
    .category_bcpos table th,
    .category table th {
        width: 100%;
    }
}

/*/////////////////////////////////////////////
.div_flexの直下にtableと画像が並ぶ構成 スマホ幅で画像を上・tableを下に
・HTML順を変えずCSSのorderで表示順のみ入れ替え
/////////////////////////////////////////////*/
@media screen and (max-width: 736px) {
    .filter .div_1 .div_flex > table,
    .filter .category .div_flex > table {
        order: 2;
    }
    .filter .div_1 .div_flex > img,
    .filter .category .div_flex > img {
        order: 1;
        width: 50%;
        height: auto;
        margin: 0 auto 1em;
    }
    .filter .div_2 .div_flex img {
        width: 80%;
        height: auto;
        margin: 0 auto;
    }
}

/*/////////////////////////////////////////////
th内の画像 th内に収まるサイズに制限
・thがwidth:100%になったことで、img側のwidth="80%"等のHTML属性(th幅基準)が
　画面幅近くまで拡大されてしまうため、固定サイズで上書き
/////////////////////////////////////////////*/
@media screen and (max-width: 736px) {
    table:not(.table_left):not(.table_right) th img {
        width: auto;
        max-width: 128px;
        height: auto;
        margin: 0;
        padding: 0;
    }
    /* source_basic.cssの.filter .div_1 .div_flex table th img{margin:0 auto}より詳細度を上げて上書き */
    .filter .div_1 .div_flex table th img {
        margin: 0;
        padding: 0;
    }

    /* source_basic.cssの.category table tr:first-of-type th > img{margin:0 auto}より詳細度を上げて上書き(div_1と表示を揃える) */
    /* padding: 0.3em 0はsource_basic.cssのまま維持(div_2のclearボタンと同じ余白にするため) */
    .filter .category table tr:first-of-type th > img {
        margin: 0;
    }

    /* 店舗・グループ選択(.filter .div_2)内のclearボタン: source_basic.cssのmargin:0 autoを上書き */
    .filter .div_2 table tr:first-of-type th img {
        max-width: 70px;
        margin: 0;
    }

    /* 部門選択(.filter .category)内のclearボタン: div_2と同じサイズに揃える */
    .filter .category table tr:first-of-type th > img {
        max-width: 70px;
    }

    /* source_basic.cssの.filter .div_2 table td{white-space:nowrap}が長文(ALL行など)でテーブル幅からの
       横はみ出しを起こすため、スマホ幅では折返しを許可する */
    .filter .div_2 table td {
        white-space: normal;
    }
}

/*/////////////////////////////////////////////
店舗・グループ選択(.filter .div_2) 中の3項目 スマホ幅で縦並びに
/////////////////////////////////////////////*/
@media screen and (max-width: 736px) {
    .filter .div_2 .div_flex {
        flex-direction: column;
    }
    .filter .div_2 .div_flex > figure {
        width: 90%;
        margin: 0 auto;
    }
    .filter .div_2 .div_flex > figure:nth-of-type(1),
    .filter .div_2 .div_flex > figure:nth-of-type(2) {
        margin-bottom: 1em;
    }
    /* source_basic.cssのmargin-right:20pxが横並び前提のため、縦並びでは画像中央に揃うよう解除 */
    .filter .div_2 .div_flex figcaption {
        margin-right: 0;
    }
}

/*/////////////////////////////////////////////
.on_panel 中の2項目(店舗を表示/グループを表示) スマホ幅で縦並びに
/////////////////////////////////////////////*/
@media screen and (max-width: 736px) {
    .on_panel .div_flex {
        flex-direction: column;
    }
    .on_panel .div_flex > div,
    .on_panel .div_flex > figure {
        width: 95%;
        margin: 0 auto;
    }

    .on_panel .div_flex div h4,
    .on_panel .div_flex figcaption{
        padding-left: 0.5em;
    }

    .on_panel .div_flex img {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    /* 1-sales/1-1-001/1_001.cssの.daily_summary .on_panel .div_flex figure img{width:75%}を上書き */
    .daily_summary .on_panel .div_flex figure img {
        width: 100%;
    }
}