@charset "utf-8";
/*
* mobile-base.css — jQuery Mobile 1.0rc1 撤去後の置換用ベース CSS。
* フェーズ 3-B (jQM UI 撤去) で使うクラスを定義する。
*
* 既存 reset.css / common.css / style.css と併用前提 (reset/typography は重複させない)。
* クラス名は `mb-` プレフィックスで namespace し、既存 .btn / .btn-search 等との衝突を回避。
*
* 対応 data-role / data-* :
* data-role="page" → .mb-page
* data-role="content" → .mb-content
* data-role="fieldcontain" → .mb-field
* data-role="controlgroup" → .mb-controlgroup
* data-role="navbar" → .mb-navbar
* data-role="footer" → .mb-footer
* data-icon="arrow-r" → .mb-btn--arrow
* data-icon="info" → .mb-btn--info
* data-inline="true" → .mb-btn--inline (デフォルトは block)
*/
/* === レイアウト === */
.mb-page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.mb-content {
flex: 1 1 auto;
padding: 1rem;
}
.mb-footer {
background: #f5f5f5;
padding: 1rem;
text-align: center;
}
.mb-navbar {
display: flex;
background: #f5f5f5;
}
.mb-navbar > a,
.mb-navbar > li > a {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.5rem;
text-decoration: none;
color: inherit;
border-right: 1px solid #ddd;
}
.mb-navbar > a:last-child,
.mb-navbar > li:last-child > a {
border-right: 0;
}
/* === フォーム フィールド === */
.mb-field {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-bottom: 1rem;
}
.mb-field > label {
font-weight: bold;
}
.mb-field input[type="text"],
.mb-field input[type="email"],
.mb-field input[type="tel"],
.mb-field input[type="password"],
.mb-field input[type="number"],
.mb-field select,
.mb-field textarea {
width: 100%;
min-height: 44px;
padding: 0.5rem;
font-size: 16px; /* iOS 自動ズーム回避 */
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
background: #fff;
}
.mb-field textarea {
min-height: 88px;
resize: vertical;
}
/* checkbox / radio + label を横並びに見せる .mb-field 修飾子 */
.mb-field--inline {
flex-direction: row;
align-items: center;
gap: 0.5rem;
}
.mb-field--inline > label {
font-weight: normal;
margin: 0;
}
/* fieldset+legend を data-role="controlgroup" の代替として使う */
.mb-controlgroup {
border: 0;
margin: 0 0 1rem;
padding: 0;
}
.mb-controlgroup > legend {
display: block;
font-weight: bold;
margin-bottom: 0.25rem;
padding: 0;
}
/* === ボタン (submit / 遷移リンク) === */
.mb-btn {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.5rem 1rem;
font-size: 1rem;
background: #e6e6e6;
border: 1px solid #aaa;
border-radius: 4px;
color: inherit;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
}
.mb-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* data-inline="true" 相当: 中身に合わせた幅 */
.mb-btn--inline {
display: inline-flex;
width: auto;
}
/* data-icon="arrow-r" 相当 */
.mb-btn--arrow::after {
content: "▶";
margin-left: 0.5rem;
font-size: 0.75em;
}
/* data-icon="info" 相当 */
.mb-btn--info::after {
content: "ⓘ";
margin-left: 0.5rem;
}
/* === 互換: jQM 撤去後の素ボタン / 旧 toiawase クラス / 素 checkbox 救済 ===
*
* フェーズ 3-B-* で jQM の data-icon / data-inline 等を撤去した際、
* mb-btn クラスを付与し損ねた や、
* CSS 定義が存在しない旧 toiawase クラス付きボタンが、jQM 撤去後に
* ブラウザデフォルト UI で表示されてしまうため、mb-btn--inline 相当の
* スタイルを当てる。チェックボックス / ラジオも mobile-base.css の
* .mb-field 系では input[type="text"] 等しか targets しておらず、
* native の 13~15px サイズが出てしまうのでタップターゲットを確保する。
*
* 既に class="mb-btn" を持つボタンは :not([class~="mb-btn"]) で除外、
* inline style で width/height 指定済みの checkbox は specificity で勝つので
* 影響しない (例: contact_kaitsuke2 の loan_flg / ksend_flg)。
*
* 影響範囲: mobile-base.css は mobile cluster のみで読まれるため PC 側に波及なし。
*/
input.toiawase,
.mb-page input[type="submit"]:not([class~="mb-btn"]),
.mb-page input[type="button"]:not([class~="mb-btn"]) {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.5rem 1rem;
margin: 0.25rem 0.25rem 0.25rem 0;
font-size: 1rem;
background: #e6e6e6;
border: 1px solid #aaa;
border-radius: 4px;
color: inherit;
cursor: pointer;
box-sizing: border-box;
}
.mb-page input[type="checkbox"],
.mb-page input[type="radio"] {
width: 24px;
height: 24px;
margin: 4px 6px 4px 0;
vertical-align: middle;
cursor: pointer;
}
/* ===