@charset "utf-8"; /*===文字コードの指定===*/ /* * This is style sheet of all page. * * モバイルファースト * => 基本の CSS は、モバイル用のデザインとする * => PC対応 (768px以上) は、スマートフォン、タブレット用と異なる部分だけを下部に記述する * * できるだけシンプルに分かりやすくする * => 複雑にしない * * 一番外をheader、footer、または、wrapperで囲み、 * その中に、必要に応じて、containerを作る */ /*-------------------------------------------------- >>> 基本設定 --------------------------------------------------*/ body { line-height: 1.5em; margin: 0; padding: 0; padding-bottom: 30px; /* 下に固定するメニューが一番下の文字などに被らないようにするため */ } /*-------------------------------------------------- >>> ボタン --------------------------------------------------*/ /*----- button のリセットスタイル -----*/ button { padding: 0; border: none; background: transparent; } button img { display: block; } button { -moz-appearance: none; /* ブラウザ特有のスタイルを無効に */ -webkit-appearance: none; /* ブラウザ特有のスタイルを無効に */ appearance: none; /* ブラウザ特有のスタイルを無効に */ cursor: pointer; /* カーソルを指マークに */ transition: 0.3s; /* ホバーの変化を滑らかに */ } button:hover { /* ホバー時 (PC でカーソルを乗せた時) */ } button:focus { /* フォーカス時 */ } /*-------------------------------------------------- >>> フォーム --------------------------------------------------*/ /* * 各項目は、角が丸い、囲みの中に入れる * 囲みの中は、白くする * * 全体の背景に色を付けて、白い囲みが見えるようにする */ .form-wrapper { /* 全体の背景 */ background: #98fb98; padding: 10px 0px; } .form-group { /* 各項目の囲み */ background: #ffffff; margin: 10px 10px; padding: 10px 10px; border-radius: 10px; } .form-label { /* 各項目の項目名 */ margin: 10px 0; padding: 50px 0; font-weight: bold; } .input-container { /* 各項目の入力部分 */ margin: 0 0 10px 0; } /* * 「input type="text"」 */ /* 基本 */ input[type="text"] { width: 100%; margin: 8px 0; padding: 8px; border: 2px solid #aaa; border-radius: 4px; outline: none; box-sizing: border-box; transition: 0.3s; } /* 基本 - 入力中 */ input[type="text"]:focus { border-color: dodgerBlue; box-shadow: 0 0 8px 0 dodgerBlue; } /* 入力欄の幅 */ .input-text-small { width: 100%; /* スマホでは100% */ /*width: 25em !important;*/ } .input-text-middle { width: 50%; } .input-text-large { width: 100%; } /* * 「input type="password"」 */ /* 基本 */ input[type="password"] { width: 100%; margin: 8px 0; padding: 8px; border: 2px solid #aaa; border-radius: 4px; outline: none; box-sizing: border-box; transition: 0.3s; } /* 基本 - 入力中 */ input[type="password"]:focus { border-color: dodgerBlue; box-shadow: 0 0 8px 0 dodgerBlue; } /* * 「input type="number"」 */ /* 基本 */ input[type="number"] { width: 100%; margin: 8px 0; padding: 8px; border: 2px solid #aaa; border-radius: 4px; outline: none; box-sizing: border-box; transition: 0.3s; } /* 基本 - 入力中 */ input[type="number"]:focus { border-color: dodgerBlue; box-shadow: 0 0 8px 0 dodgerBlue; } /* 入力欄の幅 */ .input-number-2-digits { /* 2桁 */ width: 5em !important; } .input-number-4-digits { /* 4桁 */ width: 6em !important; } .input-number-8-digits { /* 8桁 */ width: 10em !important; } .input-number-small { width: 15em !important; } .input-number-middle { width: 50%; } .input-number-large { width: 100%; } /* * 「textarea」 */ /* 基本 */ textarea { width: 100%; height: 10em; margin: 8px 0; padding: 8px; border: 2px solid #aaa; border-radius: 4px; outline: none; box-sizing: border-box; transition: 0.3s; } /* 基本 - 入力中 */ textarea:focus { border-color: dodgerBlue; box-shadow: 0 0 8px 0 dodgerBlue; } /* * フォームの中の文字など */ .form-control { color: #000000; /* form の中の文字の色 */ } .form-control:focus { color: #000000; /* 入力状態の文字の色 */ } /* * フォームの保存ボタン * * 世間にあるサイトのボタンと同じような色、形、場所にする */ .save-button { appearance: none; border: 0; background: #0033FF; min-width: 100px; margin: 10px 10px 20px 10px; padding: 10px 10px; border-radius: 5px; font-size: 110%; color: #ffffff; font-weight: bold; font-family: inherit; /* フォーム要素に「」「」のフォントファミリーを継承させる */ } .save-button:hover { /* ホバー時 (PC でカーソルを乗せた時) */ background-color: #064fda; /* 背景色 */ } /* * エラーの表示 */ .top-error-container { color: red; margin: 5px 10px 10px 10px; } .error-container { color: red; margin: 5px 0px 5px 0px; } /*-------------------------------------------------- >>> ラジオボタン、チェックボックス --------------------------------------------------*/ /* input は非表示にしておく */ input[type=radio] { display: none; } input[type=checkbox] { display: none; } /* ラベルの基本設定 */ /* ラジオボタン、チェックボックスに for で紐づけた label に class を指定する */ .radio, .checkbox { box-sizing: border-box; /*-webkit-transition: background-color 0.1s linear;*/ /*transition: background-color 0.1s linear;*/ position: relative; display: inline-block; margin: 0px 6px 4px 0px; padding: 6px 8px 6px 42px; border-radius: 6px; background-color: #f6f7f8; vertical-align: middle; cursor: pointer; border: 1px solid #ffffff; /* 背景と同じボーダーを入れておかないと、カーソルを合わせたときに、ボーダーが出て、文字が動く */ } /* カーソルを合わせたとき */ .radio:hover, .checkbox:hover { background-color: #e2edd7; border-color: #53b300; } .radio:hover:after, .checkbox:hover:after { border-color: #53b300; } /* 常時、表示する円 */ .radio:after, .checkbox:after { /*-webkit-transition: border-color 0.2s linear;*/ /*transition: border-color 0.2s linear;*/ position: absolute; top: 50%; left: 15px; display: block; margin-top: -10px; width: 16px; height: 16px; border: 2px solid #bbb; /* 円の線 */ border-radius: 50%; /* 円 */ content: ''; } /* 選択時に表示する丸 */ .radio:before { /*-webkit-transition: opacity 0.2s linear;*/ /*transition: opacity 0.2s linear;*/ position: absolute; top: 55%; left: 17px; display: block; margin-top: -10px; width: 16px; height: 16px; border-radius: 50%; background-color: #53b300; /* 塗りつぶす色 */ content: ''; opacity: 0; /* 透明にしておく */ } /* 選択時に重ねた円の透明を解除 */ input[type=radio]:checked + .radio:before { opacity: 1; } input[type=radio]:checked + .radio { background-color: #e2edd7; border-color: #53b300; } .checkbox:before { /*-webkit-transition: opacity 0.2s linear;*/ /*transition: opacity 0.2s linear;*/ position: absolute; top: 50%; left: 21px; display: block; margin-top: -7px; width: 5px; height: 9px; border-right: 3px solid #53b300; border-bottom: 3px solid #53b300; content: ''; opacity: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* 選択時に重ねた円の透明を解除 */ input[type=checkbox]:checked + .checkbox:before { opacity: 1; } /*-------------------------------------------------- >>> ラジオボタン、チェックボックスを見やすくする --------------------------------------------------*/ /* ラジオボタン、チェックボックスの文字の大きさなどを調整する * * ラジオボタン、チェックボックス全体をdivで囲んで、指定する * (input-containerと同じdivのclassでいい) * * ただし、選択項目が多く、分類するときのテーブルを使う場合は、 * テーブルに文字サイズなどを指定するので、不要 */ .select-container { font-size: 90%; } /* 選択項目が多く、分類するときのテーブル */ table.select-table { width: 100%; margin: 0; padding: 0; } table.select-table th { text-align: right; vertical-align: top; width: 15%; font-size: 75%; } table.select-table td { font-size: 85%; } /*-------------------------------------------------- >>> 下に固定するメニュー --------------------------------------------------*/ /* 下に固定するメニューが一番下の文字などに被らないようにするため、bodyに底上げする記述を入れる。 */ #bottom-menu-container { position: fixed; z-index: 999; /* 全面に出す */ bottom: 0; /* 下につける */ left: 0; width: 100%; background: #ccccff; transition: .3s; } /*-------------------------------------------------- >>> 新規作成、編集ページの共通 --------------------------------------------------*/ /* * スマホアプリのように統一感を出すために、 * ログイン後の各ページでも使う */ .edit-header { margin: 0; padding: 1px 10px; background: #009900; /* 両端に表示する */ display: flex; justify-content: space-between; /* 両端 */ align-items: center; /* 上下中央寄せ */ } .edit-h1 { font-size: 120%; color: #ffffff; } .edit-back-buttun { padding: 0.3em 1em; background-color: #aaa; border: 2px solid #aaa; border-radius: 0.5em; color: #ffffff; text-decoration: none; /* 下線を消す */ vertical-align: middle; font-size: 100%; } .edit-target { margin: 0 10px; font-size: 80%; } /*-------------------------------------------------- >>> ログイン後のホーム --------------------------------------------------*/ .account-home-wrapper { /* 全体の背景 */ background: #98fb98; padding: 10px 0px; } /*-------------------------------------------------- >>> 栽培記録 (post) の詳細 (show) ページ --------------------------------------------------*/ .post-show-vege-number { margin: 0 10px; font-size: 85%; } .post-show-title-container { /* タイトルと編集ボタンを入れる */ /* 両端に表示する */ display: flex; justify-content: space-between; /* 両端 */ align-items: center; /* 上下中央寄せ */ margin: 0 10px 10px 10px; } .post-show-h1 { margin: 5px 0; font-size: 150%; } .post-show-group { /* 各項目のかたまり */ margin: 10px 10px 20px 10px; } .post-show-heading-container { /* 見出しと追加ボタンを入れる */ /* 両端に表示する */ display: flex; justify-content: space-between; /* 両端 */ align-items: center; /* 上下中央寄せ */ margin-bottom: 10px; border-bottom: 1px solid #808080; } .post-show-h2 { /* 各項目の見出し */ font-size: 120%; } .post-show-add-buttun { /* 追加ボタン */ padding: 0.3em 1em; background-color: #8a5404; /* #0033F */ border: 2px solid white; border-radius: 1em; color: #ffffff; text-decoration: none; /* 下線を消す */ vertical-align: middle; font-size: 100%; } .post-show-add-buttun:hover { /* 追加ボタン - マウスが乗ったとき */ background-color: #064fda; } .post-show-record-container { /* 表示する記録全体を入れる */ background-color: #fff; } .post-show-record { /* 各記録を入れる */ margin: 2px 0; background-color: #ffffff; } .post-show-record-date { /* 記録の日時 */ font-size: 80%; } /* 作業記録部分 */ .post-show-work-record-category { /* 作業記録のカテゴリー */ margin: 0 5px; font-size: 100%; } /* 基本情報 */ .post-show-basic-info-container { margin: 0 10px; font-size: 90%; line-height: 1em; } /* 基本情報のテーブル */ .post-show-basic-info-table { border: 1px #c0c0c0 solid; /* #c0c0c0 */ width: 100%; border-spacing: 0; } .post-show-basic-info-table th { border-bottom: 1px #c0c0c0 solid; /* #c0c0c0 */ text-align: right; vertical-align: middle; padding: 0px 1px; width: 25%; font-size: 80%; } .post-show-basic-info-table td { border-bottom: 1px #c0c0c0 solid; /* #c0c0c0 */ padding: 5px 3px 5px 3px; } /* * 各記録のテーブル * * 肥料記録、農薬記録、作業記録 */ .post-show-table-scroll { /* 横スクロールにするために、tableを囲んでいるdivのclassに入れる */ overflow-x: scroll; } table.post-show-table { border-collapse: collapse; width: 500px; /* 表を横スクロールにするときの幅を入れる */ } .post-show-table th, .post-show-table td { border: 1px solid black; padding: 10px; } /* * 作業記録のテーブル */ table.post-table { border: 1px #c0c0c0 solid; /* #c0c0c0 */ width: 100%; font-size: 90%; margin: 0; } table.post-table th { border: 1px #c0c0c0 solid; /* #c0c0c0 */ text-align: right; vertical-align: middle; color: #ffffff; background-color: #009900; font-weight: normal; padding: 0px 1px; } th.post-th { border: 1px #c0c0c0 solid; /* #c0c0c0 */ text-align: right; vertical-align: middle; color: #ffffff; background-color: #009900; font-weight: normal; padding: 0px 1px; } table.post-table td { border: 1px #c0c0c0 solid; /* #c0c0c0 */ padding: 5px 3px 5px 3px; } .post-table-td1 { width: 15%; } .post-table-td2 { width: 35%; } p.post-table-note { margin: 0; } .post-table-date { width: 10%; } .post-table-no-data { padding: 10px 5px !important; } /* ボタンの位置の調整 */ .button-wrapper { margin: 0; padding: 30px 10px 30px 10px; /*background: #cccccc;*/ border-radius: 10px; } /*----- キャンセルボタン -----*/ .cancel-button { color: #000000; display: inline-block; text-decoration: none; margin: 20px 0px 20px 0px; font-weight: bold; border-radius: 5px; padding: 2px 4px; border: 1px #000000 solid; } /*----- 常時、右上に固定する保存ボタン -----*/ .submit-button-top { position: fixed; width: 50%; top: 0; z-index: 999; padding: .5rem 1.75rem .5rem 1rem; text-align: right; margin-left: 50%; background-color: transparent; } /*----- 常時、下に固定する保存ボタン -----*/ #fixed-bottom-button { position: fixed; width: 100%; bottom: 0; z-index: 999; background: #cccccc; padding: 10px; } .bottom-submit-button { appearance: none; border: 0; /*border-radius: 5px;*/ background: #0033FF; color: #ffffff; padding: 6px 20px; /*min-width: 100px;*/ width: 100%; font-size: 16px; font-weight: bold; font-family: inherit; /* フォーム要素に「」「」のフォントファミリーを継承させる */ } .submit-button:hover { /* ホバー時 (PC でカーソルを乗せた時) */ background-color: #064fda; /* 背景色 */ } /*-------------------------------------------------- >>> 基本設定 --------------------------------------------------*/ /*----- スマートフォンで表示する際、右にできる余白を消す -----*/ .wrap { overflow: hidden; } /*----- 改行させない -----*/ span.nowrap { white-space: nowrap; } /*----- フォームの幅 -----*/ /* フォームの幅 (2, 3桁用) */ .form-2-digits { width: 5em; } /* フォームの幅 (4, 5桁用) */ .form-4-digits { width: 6em; } /*-------------------------------------------------- >>> フッター --------------------------------------------------*/ .footer { text-align: center; line-height: 1rem; margin: 0 0 70px 0; } .footer-right-margin { margin-right: 1rem; } /*-------------------------------------------------- >>> ページ上に固定するヘッダ --------------------------------------------------*/ .site-header { position: fixed; width: 100%; top: 0; z-index: 998; } /*-------------------------------------------------- >>> ページ下に固定するメニュー --------------------------------------------------*/ #fixed-bottom-menu { position: fixed; width: 100%; bottom: 0; z-index: 999; background: #ffffff; } #fixed-bottom-menu a { display: inline-block; text-decoration: none; margin: 8px 0px 8px 0px; font-weight: bold; border-radius: 5px; padding: 2px 8px; border: 0; background: #0033FF; color: #ffffff; } .fixed-bottom-menu-table { margin: 0; padding: 0; width: 100%; } .fixed-bottom-menu-table td { text-align: center; } /*-------------------------------------------------- >>> CSS によるエラーの表示 --------------------------------------------------*/ /*-------------------------------------------------- >>> マイページ --------------------------------------------------*/ .home-body { padding: 0px 8px; background: rgba(0,0,0,.03); } /*----- マイページのメインのテーブル -----*/ table.home-table { margin: 0; width: 100%; border-collapse: separate; border-spacing: 8px; border: none; } table.home-table td { border: 1px #808080 solid; background: #ffffff; line-height: 2.5em; /*text-align: center;*/ vertical-align: middle; font-size: 20px; color: #000000; } table.home-table td a { display: block; width: 100%; height: 100%; color: #000000; padding: 0px 0px 0px 1em; font-weight: bold; text-decoration: none; } table.home-table td a:hover { background: #55c500; text-decoration: none; } /*-------------------------------------------------- >>> 画像の編集 --------------------------------------------------*/ /* img タグ */ #preview1, #preview2, #preview3 { width: 100%; } /* canvas タグ */ #canvas1, #canvas2, #canvas3 { /* 非表示にする */ display: none; } /* 「inputタグ」「画像を削除する」の表示、非表示の最初の状態 */ .display-none-image { /* 非表示にする */ display: none; } /*-------------------------------------------------- >>> post --------------------------------------------------*/ /*----- post の一覧表示用 -----*/ .post-list { margin: 0; padding: 5px 16px; border-bottom: solid 1px #808080; width: 100%; color: #000000; } /* タイトル */ .post-list-title-container { width: 100%; padding: 10px 0px 3px 0px; color: #0000ff; font-size: 110%; letter-spacing: 0.05em; /* 文字の隙間 */ } .post-list-title-container a { color: #0000ff; } .post-list-title-container:hover { background-color: #C0C0C0; } .post-list-title { display: block; } .post-list-table { width: 100%; } /* 新規作成のボタン */ .post-create-button { padding: 0px 8px; } /* ゴミ箱のボタン */ .post-trash-button { padding: 0px 8px; margin: 10px 0px 0px 0px; } /* 栽培中・栽培終了・削除にするボタン */ .post-list-button-container { display: inline-flex; /* form を横並びにする */ padding: 10px 0px; } .post-list-button { color: #000000; background-color: #C0C0C0; border-radius: 100vh; padding: 5px 10px; margin-right: 10px; } .post-list-button:hover { color: #000000; background: #808080; } /* 栽培中・栽培終了のタブ */ .post-tab-container { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: no-wrap; justify-content: space-around; width: 100%; margin: 10px 0px 0px 0px; padding: 0px 10px; border-bottom: 5px solid #bacfda; } .post-tab-container-left { border-bottom-color: #55c500; } .post-tab-container-right { border-bottom-color: #ff9900; } .post-tab-item { width: 47%; padding: 0.5rem 0px; font-weight: bold; font-size: 16px; text-align: center; color: #000000; border-radius: 10px 10px 0px 0px; } .post-tab-item a { color: #000000; } .post-tab-left { background-color: #55c500; } .post-tab-right { background-color: #ff9900; } /*----- post の詳細表示用 -----*/ .post-show-body { padding: 0px 10px; } /* ページ内リンク */ #post-show-navi { margin: 0; width: 100%; background-color: #ffffff; } #post-show-navi.fixed { left: 0; position: fixed; top: 0; padding: 0px 10px; } .post-show-navi-table { margin: 0; width: 100%; text-align: center; vertical-align: middle; } .post-show-link { color: #ffffff; background-color: #009900; padding: 0.2rem 0.2rem; border-radius: 0 0 0.5rem 0.5rem; } .post-show-link a { color: rgba(255,255,255,0.85); text-decoration: none; } /* 見出し */ .post-title { /*border-bottom: 4px solid #55c500;*/ width: 100%; margin: 0px 0px 5px 0px; } .post-title h1 { margin-bottom: 0; font-size: 200%; } .post-title-edit-td { padding-left: 10px; } .post-h2 { margin: 0px 0px 0px 0px; font-size: 190%; } .post-h2-wrapper { width: 100%; margin: 35px 0px 5px 0px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; /* 高さ中央揃え */ justify-content: space-between; /* 左右端寄せ */ } /* post id */ .post-number { margin: 20px 0px 0px 0px; } /* 各項目を表示するメインのテーブル */ table.post-table { border: 1px #c0c0c0 solid; /* #c0c0c0 */ width: 100%; font-size: 90%; margin: 0; } table.post-table th { border: 1px #c0c0c0 solid; /* #c0c0c0 */ text-align: right; vertical-align: middle; color: #ffffff; background-color: #009900; font-weight: normal; padding: 0px 1px; } th.post-th { border: 1px #c0c0c0 solid; /* #c0c0c0 */ text-align: right; vertical-align: middle; color: #ffffff; background-color: #009900; font-weight: normal; padding: 0px 1px; } table.post-table td { border: 1px #c0c0c0 solid; /* #c0c0c0 */ padding: 5px 3px 5px 3px; } .post-table-td1 { width: 15%; } .post-table-td2 { width: 35%; } p.post-table-note { margin: 0; } .post-table-date { width: 10%; } .post-table-no-data { padding: 10px 5px !important; } /* 編集ボタン */ .post-edit-icon { width: 20px; } /* 追加ボタン */ .post-add-button { border: 0; border-radius: 5px; background: #0033FF; color: #ffffff; padding: 6px 15px; font-size: 14px; font-weight: bold; font-family: inherit; /* フォーム要素に「」「」のフォントファミリーを継承させる */ } .post-add-button a { color: #ffffff; } /* 作業・生育記録の画像 */ .post-image { width: 100%; } table.post-image-table { border: none; width: 100%; margin: 10px 0px; } table.post-image-table td { border: none; width: 33.333%; } /*----- postの新規作成・編集用 -----*/ table.post-crop-table { border: 1px #c0c0c0 solid; width: 100%; margin: 0; padding: 0; border-radius: 10px; } table.post-crop-table th { text-align: center; padding: 0 5px 0 0; vertical-align: middle; } table.post-crop-table tr { border-bottom: 1px #c0c0c0 solid; } table.post-crop-table td { padding: 5px 0px 1px 0px; /* 下は、選択肢の margin が設定してあるので、その分を考慮する */ } /*--- details の設定 ---*/ details[open] .open-select { display: none; } details:not([open]) .close-select { display: none; } /*----- post の編集用 -----*/ table.post-edit-table { border: 0px none; width: 100%; margin: 0; padding: 0; } table.post-edit-table th { text-align: right; padding: 0 5px 0 0; vertical-align: top; } table.area-table { border: 1px #c0c0c0 solid; /* border: 0px none; */ width: 100%; margin: 0; padding: 0; } table.area-table th { text-align: center; padding-bottom: 5px; } table.area-table td { vertical-align: top; padding: 5px 1px 5px 5px; } .area-td-left { width: 30%; } /*-------------------------------------------------- >>> work-record --------------------------------------------------*/ /*----- work-record の新規作成・編集用 -----*/ /*-------------------------------------------------- >>> 新規作成・編集用 --------------------------------------------------*/ /*----- 新規作成・編集用共通 body -----*/ .edit-body { margin: 0; padding: 10px 5px 10px 5px; background: #cccccc; } /*-------------------------------------------------- >>> ログイン、アカウント作成関係 --------------------------------------------------*/ .btn-register { color: #000000; border: #000000 1px solid; border-radius: 10px; } .btn-register:hover { text-decoration: underline; } /*-------------------------------------------------- >>> ホームページ (welcome) 用 --------------------------------------------------*/ .full-height { height: 100vh; /* ページを開いたときに画面全体に見せる部分 */ } .flex-center { align-items: center; display: flex; justify-content: center; } .position-ref { position: relative; } .content-welcome { width: 100%; text-align: center; color: #636b6f; font-family: 'Nunito', sans-serif; font-weight: 200; } .title { font-size: 84px; } .links > a { color: #636b6f; padding: 0 25px; font-size: 13px; font-weight: 600; letter-spacing: .1rem; text-decoration: none; text-transform: uppercase; } .m-b-md { margin-bottom: 30px; } .login-container-welcome { margin: 0 15px; padding: 0; text-align: left; border: 1px #ccccff solid; } /*========== =========== =========== =========== =========== >>> PC対応 (768px以上) => スマートフォン、タブレット用と異なる部分だけ記述する ========= =========== =========== =========== ===========*/ @media screen and (min-device-width: 768px) { /*-------------------------------------------------- >>> フッター --------------------------------------------------*/ .footer { margin: 0; } /*-------------------------------------------------- >>> ページ下に固定するメニュー --------------------------------------------------*/ /* PCの場合は、表示させない */ .pc-none { display:none; } /*-------------------------------------------------- >>> post --------------------------------------------------*/ /*-------------------------------------------------- >>> ホームページ (welcome) 用 --------------------------------------------------*/ .login-container-welcome { margin: 0 auto; width: 50%; } } /* @media screen and (max-device-width: 480px) */