@charset "UTF-8"; /* =================================================================== responsive_campaign.css スマートフォン対応用レスポンシブCSS ※PC画面（769px以上）には一切影響しません ※EntryForm.aspxの内で、既存CSSの後に読み込んでください =================================================================== */ /* ============================================== タブレット対応（768px以下） ============================================== */ @media screen and (max-width: 768px) { /* --- 基本設定のリセット --- */ body { min-width: 0 !important; width: 100% !important; font-size: 14px; -webkit-text-size-adjust: 100%; } /* --- ヘッダー --- */ #header { width: 100%; } #headerInner { width: auto !important; padding: 10px 15px; box-sizing: border-box; } #headerLogo { float: none !important; width: auto !important; text-align: center; margin: 0 !important; } #headerLogo a img { width: 160px; height: auto; padding-left: 0 !important; } #headerUtility, #headerUtilityLogin { float: none !important; width: 100% !important; } #headerUtility ul.guide, #headerUtilityLogin ul.guide { float: none !important; width: 100% !important; padding: 10px 0 0; text-align: center; } #headerUtility ul.guide li, #headerUtilityLogin ul.guide li { float: none; display: inline-block; margin: 0 6px; } #headerLogin, #headerRegistration { float: none !important; width: 100% !important; box-sizing: border-box; } /* --- パンくず（TOP > ...のリンク部分） --- */ #Div1, div[id="Div1"] { position: static !important; top: auto !important; left: auto !important; padding: 10px 15px; font-size: 12px; word-break: break-all; } #crumbs { width: auto !important; margin: 0 auto !important; padding: 0 15px 15px; box-sizing: border-box; } /* --- h1 --- */ h1 { width: auto !important; margin: 0 auto 15px !important; } /* --- ラッパー・メインコンテンツ --- */ #wrapper, #wrapper_1col, #wrapper_2col { width: auto !important; min-width: 0 !important; padding: 0 10px 20px !important; box-sizing: border-box; height: auto !important; } #wrapper_1col #main, #dietsimulation #wrapper_1col #main { width: auto !important; padding: 15px !important; margin: 0 0 20px !important; box-sizing: border-box; } /* html>body 向けの固定幅を上書き */ html > /**/body #wrapper_1col #main { width: auto !important; } #wrapper #main, #wrapper_2col #main { float: none !important; width: auto !important; } #wrapper #side, #wrapper_2col #side { float: none !important; width: auto !important; } /* --- ページタイトル --- */ .tit, p.tit { font-size: 16px !important; padding: 10px !important; word-break: break-all; } /* --- ブロック（フォーム囲み） --- */ .block { padding: 0.5em !important; margin: 0 0 15px 0 !important; } .block .inner, .block .inner_step, .block .inner_result { width: auto !important; padding: 10px !important; box-sizing: border-box; } /* --- フォーム内の各設問ブロック --- */ /* padding-left: 20px のコンテナ */ .block > div > div[style*="padding-left: 20px"], .block > div > div[style*="padding-left:20px"] { padding-left: 10px !important; padding-right: 10px !important; } /* 設問項目の共通調整 */ div[style*="padding-bottom:30px"], div[style*="padding-bottom: 30px"] { padding-bottom: 20px !important; } /* 「必須」バッジ + ラベルテキスト */ b[style*="background-color:red"], b[style*="background-color: red"] { display: inline-block; font-size: 11px; width: auto !important; height: auto !important; padding: 2px 6px !important; margin-bottom: 5px; white-space: nowrap; line-height: 1.2; } b[style*="padding-left:20px"], b[style*="padding-left: 20px"], b[style*="padding-left:50px"], b[style*="padding-left: 50px"] { padding-left: 5px !important; display: inline; font-size: 13px; line-height: 1.6; } /* ラジオボタン・入力欄の左余白調整 */ div[style*="padding-left:80px"], div[style*="padding-left: 80px"] { padding-left: 10px !important; } div[style*="padding-left:30px"], div[style*="padding-left: 30px"] { padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box; } /* --- テキストボックスのレスポンシブ化 --- */ input[type="text"], input[type="password"], textarea, .block input[type="text"], .block input[type="password"], .block textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box; font-size: 16px !important; /* iOS ズーム防止のため16px以上 */ } /* asp:TextBox のインラインstyleを上書き */ input[style*="font-size: 14px"] { font-size: 16px !important; } #ConfirmForm, #SUB_Auth { font-size: 14px !important; } .confirm-field{ width:90%!important; } div[style*="width:800px"], div[style*="width: 800px"], div[style*="width:837px"], div[style*="width: 837px"] { width: auto !important; max-width: 100% !important; box-sizing: border-box; } p[style*="padding-left:100px"], p[style*="padding-left: 100px"] { padding-left: 10px !important; padding-right: 10px !important; padding-bottom: 0px !important; box-sizing: border-box; } div[style*="padding-left:150px"], div[style*="padding-left: 150px"] { padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box; } b[style*="padding-right:80px"], b[style*="padding-right: 80px"], b[style*="padding-right:70px"], b[style*="padding-right: 70px"] { display: block; padding-right: 0 !important; margin-bottom: 6px; } /* 住所欄など幅600pxが指定されているもの */ input[style*="Width:600px"], input[style*="width:600px"], input[style*="Width: 600px"], input[style*="width: 600px"] { width: 100% !important; } /* 利用者ID・電話番号・郵便番号など短い入力欄 */ input[style*="Width:100px"], input[style*="width:100px"], input[style*="Width:120px"], input[style*="width:120px"], input[style*="Width:80px"], input[style*="width:80px"], input[style*="Width:200px"], input[style*="width:200px"] { width: 100% !important; max-width: 300px; } /* --- ラジオボタンのタッチ領域拡大 --- */ input[type="radio"] { width: 20px; height: 20px; margin-right: 8px; vertical-align: middle; } /* ラジオボタンのラベル（ASP.NET が生成する label タグ） */ label { display: inline-block; padding: 6px 0; font-size: 14px; line-height: 1.5; vertical-align: middle; white-space: normal; } input[type="radio"] + label { max-width: calc(100% - 36px); vertical-align: middle; word-break: break-word; } /* --- キャンペーン画像 --- */ div[style*="text-align: center"] img, .block img { width: 100% !important; height: auto !important; } /* --- 確認ボタン（ImageButton） --- */ div[style*="text-align: center"] input[type="image"], input[type="image"] { max-width: 80%; height: auto; } /* --- エラーメッセージ --- */ span[style*="color:rgb(255, 0, 0)"], span[style*="color: rgb(255, 0, 0)"] { font-size: 12px; line-height: 1.4; } /* --- ナビゲーション --- */ #gNav, .nav_sh { display: none; } #menu, #menuLogin { width: auto !important; display: none; } /* --- フッター --- */ #footer .foot_in { width: auto !important; padding: 15px; box-sizing: border-box; } #footerInner .left { float: none !important; width: 100% !important; margin-bottom: 15px; } #footerInner .right { float: none !important; width: auto !important; padding: 10px; box-sizing: border-box; } #footerInner .right .left, #footerInner .right .right { float: none !important; width: 100% !important; text-align: center; } #footerInner .right .right a { width: 100% !important; max-width: 273px; margin: 0 auto; display: block; } #footerMenu ul { width: auto !important; padding: 8px 15px; } #footerMenu ul li { float: none; display: block; margin: 0 0 5px; padding: 4px 0 4px 8px; } /* --- ユーザーログイン画面系 --- */ .userLoginTitle { width: auto !important; padding: 15px !important; font-size: 16px; box-sizing: border-box; } .userlogin ul li { margin-left: 0 !important; } .userlogin ul span { margin-left: 0 !important; } .userlogin ul li input { margin-left: 0 !important; } .userlogin p { margin-left: 0 !important; } .userlogin_failed_center { margin-left: auto !important; margin-right: auto !important; } .password_error_alert span { margin-left: 0 !important; font-size: 16px; } .failed_password_advice { width: auto !important; } /* --- プライバシーポリシー --- */ .privacypolicy { padding: 0 10px; } .privacypolicy .title { font-size: 18px !important; } .privacypolicy #btnAgree { width: 100% !important; max-width: 400px; } /* --- ダイエットシミュレーション系 --- */ #mainImg h2, #mainImg p { float: none !important; width: 100% !important; } .block .inner li .point, .block .inner li .image { float: none !important; width: 100% !important; text-align: center !important; } ul.questionare .tit { float: none !important; width: auto !important; } ul.questionare .txt { float: none !important; width: auto !important; padding: 10px !important; font-size: 120%; } .selectBtn, .first_selectBtn { float: none !important; width: 100% !important; text-align: center; padding: 5px 0; } .selectBtn.gender, .first_selectBtn.gender { width: 100% !important; } .customselect { width: 100% !important; max-width: 280px; box-sizing: border-box; } .type_result { width: auto !important; } .illust_box { float: none !important; width: 100% !important; text-align: center; margin-bottom: 15px; } .type_rec { float: none !important; width: 100% !important; } .btn_line { width: auto !important; margin: 0 auto; } .btn_line ul { width: auto !important; } .btn_line li { float: none !important; width: 100% !important; margin: 0 0 10px !important; text-align: center; } /* --- グラフ関連 --- */ .diet_result_box .graph_box { padding: 10px !important; overflow-x: auto; } #dietsimulation #wrapper_1col #main .diet_result_box p.graphStart, #dietsimulation #wrapper_1col #main .diet_result_box p.graphGoal { position: static !important; margin: 10px 0 !important; width: auto !important; } /* --- SNSボタン --- */ .sns { display: block; text-align: center; } .twitter, .facebook { float: none !important; display: inline-block; margin: 5px; } /* --- floatユーティリティ --- */ .flL, .flR { float: none !important; display: block; } /* --- 画像全般 --- */ img { max-width: 100%; height: auto; } /* --- テーブル（もしある場合） --- */ table { width: 100% !important; table-layout: fixed; word-break: break-all; } /* --- BMIアラート・グラフアラート --- */ .bmi_alert, .graph_alert { font-size: 100%; padding: 8px; } /* --- フォーム全体 font-size 上書き --- */ #EntryForm { font-size: 14px !important; } /* --- page top ボタン --- */ div.gotop { right: 10px; bottom: 10px; } div.gotop a { width: 35px; height: 35px; } } /* ============================================== さらに小さい画面（480px以下）向け微調整 ============================================== */ @media screen and (max-width: 480px) { body { font-size: 13px; } #headerInner { padding: 8px 10px; } #headerLogo a img { width: 140px; } /* タイトル */ p.tit, .tit { font-size: 14px !important; } /* コンテンツ余白の更なる縮小 */ #wrapper_1col #main, #dietsimulation #wrapper_1col #main { padding: 10px !important; } .block { padding: 0.3em !important; } /* ラベル文字サイズ調整 */ b[style*="padding-left:20px"], b[style*="padding-left: 20px"], b[style*="padding-left:50px"], b[style*="padding-left: 50px"] { font-size: 12px; } /* フッター */ #footer .foot_in { padding: 10px; } /* 確認ボタン */ div[style*="text-align: center"] input[type="image"], input[type="image"] { max-width: 100%; } }