![]()
) */
.row > img {
width: auto;
max-width: none;
}
/* リスト: Materialize は既定で点を消す(footerナビ等)。Bootstrap は点を残すため復元 */
ul:not(.browser-default) {
padding-left: 0;
list-style-type: none;
}
ul:not(.browser-default) > li {
list-style-type: none;
}
/* 画像: as-is(Materialize)は .responsive-img のみ制約。全imgには適用しない
* (ヘッダーロゴ等は app独自CSSで個別制約されるため) */
img.responsive-img, video.responsive-video {
max-width: 100%;
height: auto;
}
/* Materialize グローバル label ルール再現。
* as-is: materialize.css に "label { font-size: 0.8rem; color: #9e9e9e; }" が存在し、
* フォーム外のスタンドアロン label（"生年月日" 等）も 12.8px / グレーになる。
* to-be: Bootstrap は label に font-size/color を設定しないため 16px / 黒になる → 差分化。
* 既存のフォームラベルルール(.mb-3 > label 等)は詳細度が高く上書きされるため回帰なし。 */
label {
font-size: 0.8rem;
color: #9e9e9e;
}
/* Bootstrap 5 の _reboot: dt { font-weight: bold(700) }。
* as-is(Materialize/browser-default)は dt が font-weight:400(normal)。
* insured_info 等の
テキストがbold化して描画差分を生じさせる。 */
dt { font-weight: 400; }
/* リンク色: Materialize=#039be5・下線なし。Bootstrap(#0d6efd・下線)を上書き */
a {
color: #039be5;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
/* ============================================================
* 2. 色ヘルパー (Materialize helpers) — materialize.css 実値
* ============================================================ */
.bg-primary { background-color: #00B170 !important; }
.bg-secondary { background-color: #2986CA !important; }
.bg-grey { background-color: #F0F0F0 !important; }
.white-text { color: #FFFFFF !important; }
.grey-text { color: #9e9e9e !important; }
.grey-text.text-darken-1 { color: #777777 !important; }
.blue-text { color: #2986CA !important; }
.green-text { color: #00B170 !important; }
/* ============================================================
* 3. グリッド (Materialize float-grid を Bootstrapクラスへ写像)
* ※ to-be テンプレは col-12/col-6 等 Bootstrap名を使用しているため、
* それらに Materialize の float 挙動・余白を与える。
* ============================================================ */
.container {
margin: 0 auto;
max-width: 1280px;
width: 100%;
padding-left: 0; /* Bootstrap container の左右paddingを打消し(Materializeは無し) */
padding-right: 0;
}
@media only screen and (min-width: 601px) {
.container { width: 85%; }
}
@media only screen and (min-width: 993px) {
.container { width: 70%; }
}
/* Bootstrap .row(flex/負マージン) を Materialize .row(float+clearfix) に戻す */
.row {
display: block;
margin-left: auto;
margin-right: auto;
--bs-gutter-x: 0;
--bs-gutter-y: 0;
}
.row:before { content: none; }
.row:after {
content: "";
display: table;
clear: both;
}
/* Materialize .row .col の共通挙動を Bootstrap col-* に付与
* ※Materialize は ".row .col"(子孫セレクタ)でネストしたcol含め全てfloat。
* ".row > [class*="col-"]"(直接の子のみ)では、フォーム内のネストしたcol-12が
* float:noneになりmarginが崩れる。子孫セレクタに変更して一致させる */
.row [class*="col-"] {
float: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 16px;
min-height: 1px;
margin-top: 0; /* Bootstrap gutter由来のmargin-top打消し */
}
.row .col-12 { width: 100%; }
.row .col-6 { width: 50%; }
/* ============================================================
* 4. コンポーネント (card / btn) — Materialize 実値
* ============================================================ */
/* elevation (2dp) : card / btn の影 */
.card, .btn, .btn-large, .btn-small {
-webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.27);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.27);
}
.card {
display: block; /* Bootstrap .card{display:flex} を Materialize(display:block) に戻す */
position: relative;
margin: 0 0 16px 0;
background-color: #fff;
border: 0; /* Bootstrapの1px border打消し(Materializeはborder無し) */
border-radius: 4px;
color: rgba(0, 0, 0, 0.87); /* Bootstrap .card{color:#212529} を as-is(継承色)へ */
}
/* Materialize .card .card-content(=to-beでは card-body) の余白。
* border-radius: 0 0 4px 4px はカード下部コーナーの描画一致に必要。
* sm_op_common の card-image 境界差分は別途 .card .card-image img の
* border-radius: 4px 4px 0 0 で対処済のため両立可。 */
.card .card-body {
padding: 24px 16px;
border-radius: 0 0 4px 4px;
}
.card .card-body p { margin: 0; }
/* ボタン: Materialize .btn の外観(Bootstrap .btn を上書き) */
.btn, .btn-large, .btn-small {
border: none;
border-radius: 2px;
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 16px;
text-transform: uppercase;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
max-width: 320px;
text-decoration: none;
color: #fff;
background-color: #2986CA;
text-align: center;
letter-spacing: .5px;
font-size: 14px;
-webkit-transition: background-color .2s ease-out;
transition: background-color .2s ease-out;
cursor: pointer;
overflow: hidden; /* 新BFCを生成し float要素の後ろに配置される(Materialize .waves-effect由来) */
position: relative; /* waves-effect 相当 */
z-index: 1; /* Materialize .waves-effect が z-index:1 でスタッキングコンテキストを作るため合わせる。
z-index:auto(to-be既定)との差でフォントAAが変わり視覚差分が発生するのを防ぐ。 */
}
.btn:hover, .btn-large:hover, .btn-small:hover {
background-color: #3693d6;
}
/* .btn-white 以外のボタンはホバー時も文字色を白に保つ(Bootstrap --bs-btn-hover-color が黒にフォールバックするのを防ぐ) */
.btn:not(.btn-white):hover, .btn-large:not(.btn-white):hover, .btn-small:not(.btn-white):hover {
color: #fff !important;
}
/* btn-fix は白背景+緑文字のため、上記ルールで文字が白(不可視)になるのを防ぐ */
.btn.btn-fix:hover {
color: #00B170 !important;
}
/* btn-white: Bootstrap CSS変数を上書きして iOS の var(--bs-btn-active-color):#fff を防ぐ */
.btn.btn-white, .btn-large.btn-white, .btn-small.btn-white {
--bs-btn-active-color: #4C4C4C;
--bs-btn-active-bg: #fff;
--bs-btn-hover-color: #4C4C4C;
--bs-btn-hover-bg: #fff;
}
/* iOS Safari: active 時に文字が白→不可視になるのを !important と -webkit-text-fill-color で二重防止 */
/* ※JS(common.js)のインラインスタイルによる三重防止も併用している */
.btn.btn-white:active, .btn-large.btn-white:active, .btn-small.btn-white:active {
color: #4C4C4C !important;
-webkit-text-fill-color: #4C4C4C !important;
background-color: #fff !important;
}
.btn.btn-fix:active {
color: #00B170 !important;
-webkit-text-fill-color: #00B170 !important;
}
/* Materialize .btn-large(as-is) の font-size:15px / padding:0 28px を再現。
* to-be テンプレは btn-large の代わりに Bootstrap の btn-lg を使用。
* parity.css の .btn 汎用ルール(font-size:14px/padding:0 16px)が勝つので
* btn-large と btn-lg に !important で上書きする。 */
.btn-large, .btn-lg {
font-size: 15px !important;
padding: 0 28px !important;
height: 60px !important;
line-height: 60px !important;
}
/* Materialize .btn:hover/.btn:focus の elevation shadow を再現。
* as-is: .z-depth-1-half, .btn:hover { box-shadow: 0 3px 3px 0 rgba(0,0,0,.14), ... }
* OTP フロー後などでフォーカスが btn に移ると as-is は hover shadow に変わるが
* to-be(parity.css)はデフォルト shadow のまま → 差分化。
* :focus も同じ shadow を適用して as-is と一致させる。 */
.btn:hover, .btn:focus,
.btn-large:hover, .btn-large:focus,
.btn-small:hover, .btn-small:focus {
-webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2) !important;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2) !important;
}
/* フッター上段ナビのリンク高さ(as-isでは Materialize nav の line-height:56px を継承)
* ※広範な nav 規則は下段ナビ等へ副作用が出るため、必要箇所のみに限定して再現 */
footer nav a { color: #cc0022; }
footer nav ul a { display: block; } /* Materialize nav ul a{display:block} 相当。下段navの高さ一致に必要 */
footer nav ul a:hover { background-color: rgba(0, 0, 0, 0.1); } /* Materialize nav ul a:hover 再現 */
/* 上段navリンク高: Materializeベースnavの line-height(56px / 601px以上で64px) を再現 */
footer nav .footer__nav--top li a { line-height: 56px; }
@media only screen and (min-width: 601px) {
footer nav .footer__nav--top li a { line-height: 64px; }
}
/* ============================================================
* 5. アプリ独自 header / footer スタイル
* ※ as-is では materialize.css 末尾(6997行〜)に追記されていた
* アプリ固有スタイル。materialize.css 全削除で一緒に消失したため復元。
* (Materializeライブラリ本体ではなく、当プロジェクト所有のスタイル)
* ============================================================ */
header {
background-color: #fff;
position: relative;
width: 100%;
min-width: 320px; }
header .header-top {
padding: 8px 0 8px 10px;
width: 100%;
min-width: 320px;
height: 54px;
position: relative;
background: url("/images/header_arc_bg_center_m-a3b5e3b78ac4b298cdb32c25c7a8e558.png") no-repeat left bottom;
position: relative;
background-size: 1000px 8px; }
header .header-top::after {
content: "";
display: block;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
background-color: #CC0022; }
header .header-top .logo {
display: inline-block;
width: auto;
height: 40px; }
header .header-top .logo img {
width: auto;
height: 100%; }
header .header-bottom {
padding: 15px 6px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
header .header-bottom .header-copy {
display: inline-block;
width: 52%;
padding: 13px 0px 0; }
@media screen and (min-width: 481px) {
header {
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden; }
header .header-top {
max-width: 990px;
margin: 0 auto;
height: 66px;
padding: 8px 0 8px 21px;
background: none; }
header .header-top::before {
content: "";
background: url(/images/header_arc_bg_center_m-a3b5e3b78ac4b298cdb32c25c7a8e558.png) no-repeat left bottom;
background-size: 100% 10px;
position: absolute;
bottom: 0;
left: 0;
width: 100vw;
height: 100%; }
header .header-top::after {
width: 100vw;
left: -90%;
height: 2px; }
header .header-top .logo {
width: 179px;
height: auto;
position: relative; }
header .header-top .logo img {
width: 100%;
height: auto;
z-index: 1; }
header .header-bottom {
max-width: 990px;
margin: 0 auto;
padding: 15px 6px 15px 21px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start; }
header .header-bottom .header-copy {
width: 250px;
padding: 0;
margin-left: 10px; } }
footer {
margin-top: 32px;
background-color: #fff; }
footer .footer__logo {
padding: 18px 0; }
footer nav {
display: block;
-webkit-box-shadow: none;
box-shadow: none;
height: auto !important; }
footer nav .footer__nav--top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 640px;
margin: 0 auto; }
footer nav .footer__nav--top li {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
border: 1px solid #A0A3AA; }
footer nav .footer__nav--top li:last-child {
border-left: none; }
footer nav .footer__nav--top li a {
text-align: center;
width: 100%;
color: #333333; }
footer nav .footer__nav--bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px; }
footer nav .footer__nav--bottom li {
border-right: 1px solid #A0A3AA;
height: auto; }
footer nav .footer__nav--bottom li:last-child {
border-right: none; }
footer nav .footer__nav--bottom li a {
font-size: 0.89rem;
line-height: initial;
color: #777777;
padding: 0 10px; }
footer .footer__recruitment {
color: #A0A3AA;
font-size: 0.75rem;
margin-bottom: 14px; }
footer .footer__bottom {
padding: 10px;
background-color: #CC0022;
color: #fff;
font-weight: 300;
font-size: 0.75rem; }
@media screen and (min-width: 481px) {
footer .footer-copy {
padding: 7px 21px; } }
footer .footer-copy__right {
display: none; }
@media screen and (min-width: 481px) {
footer .footer-copy__right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; } }
@media screen and (min-width: 481px) {
footer .footer-copy {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
footer .footer-copy > p > br {
display: none; } }
/* service_end_footer: footer タグ向けの汎用ルール(上記)は div には適用されないため個別定義 */
.service_end_footer nav ul a { display: block; }
.service_end_footer nav ul a:hover { background-color: rgba(0, 0, 0, 0.1); }
.service_end_footer nav .footer__nav--top li a { line-height: 56px; }
@media only screen and (min-width: 601px) {
.service_end_footer nav .footer__nav--top li a { line-height: 64px; }
}
.service_end_footer {
margin-top: 32px;
background-color: #fff; }
.service_end_footer .footer__logo {
padding: 18px 0; }
.service_end_footer nav {
display: block;
-webkit-box-shadow: none;
box-shadow: none;
height: auto !important; }
.service_end_footer nav .footer__nav--top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 640px;
margin: 0 auto 32px; }
.service_end_footer nav .footer__nav--top li {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
border: 1px solid #A0A3AA; }
.service_end_footer nav .footer__nav--top li:last-child {
border-left: none; }
.service_end_footer nav .footer__nav--top li a {
text-align: center;
width: 100%;
color: #333333; }
.service_end_footer .footer__bottom {
padding: 10px;
background-color: #CC0022;
color: #fff;
font-weight: 300;
font-size: 0.75rem; }
@media screen and (min-width: 481px) {
.service_end_footer .footer-copy {
padding: 7px 21px; } }
.service_end_footer .footer-copy__right {
display: none; }
@media screen and (min-width: 481px) {
.service_end_footer .footer-copy__right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; } }
@media screen and (min-width: 481px) {
.service_end_footer .footer-copy {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.service_end_footer .footer-copy > p > br {
display: none; } }
/* ============================================================
* 6. フェーズ2: 全113テンプレの静的スイープで判明した追加クラス
* (as-is materialize.css の実値を移植)
* ============================================================ */
/* --- 6-1. グリッド補完 --- */
/* Materialize col基底(テンプレの `col s-tel` 用) */
.row .col {
float: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 16px;
min-height: 1px;
}
.row .col.s-tel { width: 27.77778%; }
/* Bootstrap col-N の幅(float運用のため明示。col-6/12は§3で定義済) */
.row > .col-1 { width: 8.33333%; }
.row > .col-2 { width: 16.66667%; }
.row > .col-10 { width: 83.33333%; }
/* --- 6-2. 色ヘルパー --- */
.bg-dark-green { background-color: #385723; }
.bg-green { background-color: #00B170; }
.bg-grey-300 { background-color: #DADCDC; }
.bg-grey-50 { background-color: #F8F8F8; }
.bg-yellow { background-color: #FFCF0B; }
.white { background-color: #FFFFFF !important; }
.black-text { color: #000000 !important; }
.red-text { color: #F44336 !important; }
.red-text.text-lighten-2 { color: #E57373 !important; } /* Materialize red lighten-2 (#e57373) */
.grey-text.text-lighten-2 { color: #BDC1C4 !important; }
.grey-text.text-darken-2 { color: #75757C !important; }
.grey-text.text-darken-3 { color: #4c4c4c !important; }
.grey-text.text-darken-4 { color: #333333 !important; }
.grey-text.text-darken-5 { color: #131313 !important; }
/* --- 6-3. 整列・余白ヘルパー --- */
.left-align { text-align: left; }
.right-align { text-align: right; }
.right { float: right !important; }
i.right { float: right; margin-left: 15px; }
.no-padding { padding: 0 !important; }
/* --- 6-4. card サブコンポーネント --- */
.card .card-action {
background-color: inherit;
border-top: 1px solid rgba(160, 160, 160, 0.2);
position: relative;
padding: 16px 24px 16px;
}
.card .card-image { position: relative; }
/* Materialize .card .card-image img の border-radius を再現。
* as-is: border-radius: 4px 4px 0 0 (上角のみ4px丸め)
* sm_op_common の email icon など card-image 内の img に適用。
* top-right corner の 4px クリッピングが差分を生んでいた。
* width: 100% / display: block も Materialize 相当に復元（欠068）。
* @2x 画像が自然サイズで描画されてカード外にはみ出す問題を解消。 */
.card .card-image img {
display: block;
border-radius: 4px 4px 0 0;
width: 100%;
}
.btn.btn--card, .btn--card.btn-large, .btn--card.btn-small {
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
/* --- 6-5. modal-button (モーダル下部ボタン) --- */
.modal-button {
background-color: #2986CA;
border-top: 1px solid rgba(160, 160, 160, 0.2);
border-radius: 0 0 4px 4px;
margin-bottom: 50px;
position: relative;
}
.modal-button__link {
display: block;
text-align: center;
font-weight: 600;
color: white;
-webkit-transition: color .3s ease;
transition: color .3s ease;
padding: 16px 24px 16px;
}
/* ============================================================
* 7. フォームコントロール: ラジオ / チェックボックス
* (Materialize の input+span 描画方式。テンプレは 構造)
* ============================================================ */
/* base: 実inputを非表示にしspanで描画 */
[type="checkbox"],
[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/* Radio Buttons
========================================================================== */
[type="radio"]:not(:checked),
[type="radio"]:checked {
position: absolute;
opacity: 0;
pointer-events: none; }
[type="radio"]:not(:checked) + span,
[type="radio"]:checked + span {
position: relative;
padding-left: 35px;
cursor: pointer;
display: inline-block;
height: 25px;
line-height: 25px;
font-size: 1rem;
-webkit-transition: .28s ease;
transition: .28s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
[type="radio"] + span:before,
[type="radio"] + span:after {
content: '';
position: absolute;
left: 0;
top: 0;
margin: 4px;
width: 16px;
height: 16px;
z-index: 0;
-webkit-transition: .28s ease;
transition: .28s ease; }
/* Unchecked styles */
[type="radio"]:not(:checked) + span:before,
[type="radio"]:not(:checked) + span:after,
[type="radio"]:checked + span:before,
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
border-radius: 50%; }
[type="radio"]:not(:checked) + span:before,
[type="radio"]:not(:checked) + span:after {
border: 2px solid #5a5a5a; }
[type="radio"]:not(:checked) + span:after {
-webkit-transform: scale(0);
transform: scale(0); }
/* Checked styles */
[type="radio"]:checked + span:before {
border: 2px solid transparent; }
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
border: 2px solid #2986CA; }
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after {
background-color: #2986CA; }
[type="radio"]:checked + span:after {
-webkit-transform: scale(1);
transform: scale(1); }
/* Radio With gap */
[type="radio"].with-gap:checked + span:after {
-webkit-transform: scale(0.5);
transform: scale(0.5); }
/* マウスクリック時のネイティブ focus ring を抑制（as-is と一致させる）
キーボードナビは .tabbed:focus で別途 box-shadow を span に適用するため影響なし */
[type="checkbox"]:focus,
[type="radio"]:focus {
outline: 0; }
/* Focused styles */
[type="radio"].tabbed:focus + span:before {
-webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1); }
/* Disabled Radio With gap */
[type="radio"].with-gap:disabled:checked + span:before {
border: 2px solid #777777; }
[type="radio"].with-gap:disabled:checked + span:after {
border: none;
background-color: #777777; }
/* Disabled style */
[type="radio"]:disabled:not(:checked) + span:before,
[type="radio"]:disabled:checked + span:before {
background-color: transparent;
border-color: #777777; }
[type="radio"]:disabled + span {
color: #777777; }
[type="radio"]:disabled:not(:checked) + span:before {
border-color: #777777; }
[type="radio"]:disabled:checked + span:after {
background-color: #777777;
border-color: #949494; }
/* Checkboxes
========================================================================== */
/* Remove default checkbox */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
opacity: 0;
pointer-events: none; }
[type="checkbox"] {
/* checkbox aspect */ }
[type="checkbox"] + span:not(.lever) {
position: relative;
padding-left: 20px;
cursor: pointer;
display: inline-block;
height: 20px;
line-height: 20px;
font-size: 1rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
[type="checkbox"] + span:not(.lever):before,
[type="checkbox"]:not(.filled-in) + span:not(.lever):after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
z-index: 0;
border: 2px solid #5a5a5a;
border-radius: 1px;
margin-top: 3px;
-webkit-transition: .2s;
transition: .2s; }
[type="checkbox"]:not(.filled-in) + span:not(.lever):after {
border: 0;
-webkit-transform: scale(0);
transform: scale(0); }
[type="checkbox"]:not(:checked):disabled + span:not(.lever):before {
border: none;
background-color: #777777; }
[type="checkbox"].tabbed:focus + span:not(.lever):after {
-webkit-transform: scale(1);
transform: scale(1);
border: 0;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.1); }
[type="checkbox"]:checked + span:not(.lever):before {
top: -4px;
left: -5px;
width: 12px;
height: 22px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid #2986CA;
border-bottom: 2px solid #2986CA;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%; }
[type="checkbox"]:checked:disabled + span:before {
border-right: 2px solid #777777;
border-bottom: 2px solid #777777; }
/* Indeterminate checkbox */
[type="checkbox"]:indeterminate + span:not(.lever):before {
top: -11px;
left: -12px;
width: 10px;
height: 22px;
border-top: none;
border-left: none;
border-right: 2px solid #2986CA;
border-bottom: none;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%; }
[type="checkbox"]:indeterminate:disabled + span:not(.lever):before {
border-right: 2px solid #777777;
background-color: transparent; }
[type="checkbox"].filled-in + span:not(.lever):after {
border-radius: 2px; }
[type="checkbox"].filled-in + span:not(.lever):before,
[type="checkbox"].filled-in + span:not(.lever):after {
content: '';
left: 0;
position: absolute;
/* .1s delay is for check animation */
-webkit-transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
z-index: 1; }
[type="checkbox"].filled-in:not(:checked) + span:not(.lever):before {
width: 0;
height: 0;
border: 3px solid transparent;
left: 6px;
top: 10px;
-webkit-transform: rotateZ(37deg);
transform: rotateZ(37deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%; }
[type="checkbox"].filled-in:not(:checked) + span:not(.lever):after {
height: 20px;
width: 20px;
background-color: transparent;
border: 2px solid #5a5a5a;
top: 0px;
z-index: 0; }
[type="checkbox"].filled-in:checked + span:not(.lever):before {
top: 0;
left: 1px;
width: 8px;
height: 13px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: rotateZ(37deg);
transform: rotateZ(37deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%; }
[type="checkbox"].filled-in:checked + span:not(.lever):after {
top: 0;
width: 20px;
height: 20px;
border: 2px solid #2986CA;
background-color: #2986CA;
z-index: 0; }
[type="checkbox"].filled-in.tabbed:focus + span:not(.lever):after {
border-radius: 2px;
border-color: #5a5a5a;
background-color: rgba(0, 0, 0, 0.1); }
[type="checkbox"].filled-in.tabbed:checked:focus + span:not(.lever):after {
border-radius: 2px;
background-color: #2986CA;
border-color: #2986CA; }
[type="checkbox"].filled-in:disabled:not(:checked) + span:not(.lever):before {
background-color: transparent;
border: 2px solid transparent; }
[type="checkbox"].filled-in:disabled:not(:checked) + span:not(.lever):after {
border-color: transparent;
background-color: #949494; }
[type="checkbox"].filled-in:disabled:checked + span:not(.lever):before {
background-color: transparent; }
[type="checkbox"].filled-in:disabled:checked + span:not(.lever):after {
background-color: #949494;
border-color: #949494; }
/* ============================================================
* 8. フォームコントロール: テキスト入力 / select
* Bootstrap Reboot の line-height 継承でselect/inputの高さが変わるため as-is 実値を復元
* ============================================================ */
/* select: as-is は Materialize select{height:3rem}(=48px) で明示高さ設定。
* Bootstrap Reboot の line-height:inherit でto-beでは41pxに縮む → height:3rem で一致させる。
* Opus(2026-07-18)診断: content box = height - padding - border で決まり line-height は無関係 */
.nrp-select-wrap select,
.card-body .nrp-form-wrap select,
.address__prefectures select {
background-color: rgba(255, 255, 255, 0.9); /* Materialize select{background-color:rgba(255,255,255,0.9)} ブラウザUAの薄グレー打消し */
padding: 5px 5px 5px 16px;
height: 3rem; /* as-is Materialize select{height:3rem}=48px と同一 */
line-height: 1.15; /* as-is normalize の select{line-height:1.15}で文字縦位置も一致 */
width: 100% !important; /* as-is: browser-default select が appearance:none によりブロック展開して100%になる。
to-be: appearance:none でもcontentベース幅になるためwidthを明示する。 */
font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons",
"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
"メイリオ", "Meiryo", "ＭＳ Ｐゴシック",
"Helvetica Neue", "Helvetica", "Arial", sans-serif; /* Materialize: button,input,optgroup,select,textarea に同スタックを明示。Bootstrap は inherit のみのため body 継承との差を解消 */
}
/* ============================================================
* 9. disabled ボタン (Materialize では !important で固定色・影なし)
* Bootstrap は opacity:0.65 で半透明化するが Materialize は #DFDFDF 固定色
* ============================================================ */
.btn.disabled, .btn-large.disabled, .btn-small.disabled,
.btn-floating.disabled, .btn-flat.disabled,
.btn:disabled, .btn-large:disabled, .btn-small:disabled,
.btn-floating:disabled, .btn-flat:disabled,
.btn[disabled], .btn-large[disabled], .btn-small[disabled],
.btn-floating[disabled], .btn-flat[disabled] {
pointer-events: none;
background-color: #DFDFDF !important; /* Bootstrap の opacity:0.65 での色変化を打消し */
-webkit-box-shadow: none;
box-shadow: none;
color: #777777 !important;
cursor: default;
opacity: 1; /* Bootstrap disabled の opacity:0.65 を Materialize 相当(1)に戻す */
}
.btn.disabled:hover, .btn-large.disabled:hover, .btn-small.disabled:hover {
background-color: #DFDFDF !important;
}
/* ============================================================
* 10. テキスト入力フィールド (.input-field → .mb-3 変換後の再現)
* as-is: Materialize .input-field + floating label
* to-be: .input-field が .mb-3 に変換されたため、以下で再現
* ============================================================ */
/* 入力要素: Materialize は width:100%・height:3rem を設定 */
input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=submit]):not([type=image]):not([type=range]):not([type=hidden]):not(.browser-default),
textarea:not(.browser-default) {
width: 100%;
height: 3rem; /* as-is実測 h=48px。Materialize input{height:3rem} 相当 */
background-color: transparent;
outline: none;
font-size: 1rem;
margin: 0 0 8px 0;
border: none;
border-bottom: 1px solid #9e9e9e;
-webkit-transition: border .3s, -webkit-box-shadow .3s;
transition: border .3s, box-shadow .3s;
}
/* Materialize の input[type=text]:focus { border: 1px solid #2986CA !important; } を再現。
* OTP 入力欄(#auth_code)は JS($('input:visible').eq(0).focus())で自動フォーカスされるため
* as-is は青ボーダー(#2986CA)になるが to-be はフォーカス CSS 未定義でブラウザ既定色が出る。
* !important で同色に揃える。 */
input:not([type]):not(.browser-default):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
border: 1px solid #2986CA !important;
-webkit-box-shadow: none;
box-shadow: none;
}
/* label のフローティング: .mb-3(=.input-field) をpositioning contextに
* margin-bottom: as-is Materialize .input-field は mb=12px。Bootstrap .mb-3 は mb:1rem(16px)!important
* float時はmarginが非collapsing → 12pxに揃えることで as-is と同じ間隔になる */
.mb-3 {
position: relative;
margin-bottom: 12px !important;
}
.mb-3 > label {
color: #9e9e9e;
position: absolute;
top: 0;
left: 0;
font-size: 0.9rem; /* as-is実測 14.4px = 0.9rem */
cursor: text;
pointer-events: none;
-webkit-transition: -webkit-transform .2s ease-out, color .2s ease-out, font-size .2s ease-out;
transition: transform .2s ease-out, color .2s ease-out, font-size .2s ease-out;
-webkit-transform: translateY(12px);
transform: translateY(12px); /* 入力テキスト位置に合わせる */
}
/* label が active (focus/値あり) のとき上に移動
* as-is: Materialize の .input-field > label は 非フォーカス時 color:#9e9e9e(グレー)、
* フォーカス時のみ #039be5(青)。active クラス自体は色を変えない。
* 以前 #039be5 を設定していたが、非フォーカス .active ラベルをすべて青にして
* as-is(グレー)と差分化していた。グレーに修正し、フォーカス時のみ青にする。 */
.mb-3 > label.active {
font-size: 0.75rem;
-webkit-transform: translateY(-14px) scale(0.8);
transform: translateY(-14px) scale(0.8);
color: #9e9e9e; /* 非フォーカス時: グレー (Materialize 実測値) */
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
/* フォーカス時はラベルを青に(Materialize .input-field input:focus ~ label の再現) */
.mb-3:focus-within > label,
.mb-3 > input:focus ~ label,
.mb-3 > label:has(~ input:focus) {
color: #039be5 !important;
}
/* テンプレートの hardcode active 管理は index.js の initFloatingLabels() が担う。
* JS が初期化時に input.value を参照して active を付与/除去するため CSS ガードは不要。
* (旧 CSS-only ガードルールは user 入力時に [value=""] 属性と競合するため削除済み) */
/* placeholder として機能するラベルの左位置: style.css の padding-left:16px に合わせる */
.card-body .nrp-form-wrap .mb-3 > label {
left: 16px;
}
/* ============================================================
* §11 電話番号 3分割入力の区切り「－」(col-1) 幅
* as-is: 区切りは `col s1`(=8.333%,27px) で tel3つが1行に収まる。
* to-be: 区切りが `col-1` で、親が .row でないため parity §6 の
* `.row > .col-1` が当たらず Bootstrap 既定=32px(gutter16px×2)化。
* 合計 91+32+91+32+91=337>326 で tel3 が折返し→ +73px 崩れ。
* 対策: .nrp-form-wrap 内の col-1 区切りを as-is の s1 と同じ 8.333% に固定。
* (contractor_enter / insured_enter / お客さまページ 各電話欄で共通の根本原因)
* ============================================================ */
.nrp-form-wrap .col-1.center {
width: 8.33333% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ============================================================
* §12 .mb0 (margin-bottom:0) が §10 の .mb-3{margin-bottom:12px!important}
* に打ち消される問題
* テンプレの `mb-3 col-12 mb0`(=最後のフィールド等)で、as-is は
* `input-field ... mb0` により margin-bottom:0 だが、to-be では
* §10 の .mb-3!important が勝ち margin-bottom:12px 残存 → card-action 等が
* +12px 下がり、以降フッターまで全体が縦ズレ(registration_login /
* op_confirm_mail / contractor_enter / insured_enter 等 共通)。
* 対策: .mb0 を !important かつ §10 より後に定義して margin-bottom:0 を復活。
* ============================================================ */
.mb0 { margin-bottom: 0 !important; }
/* ============================================================
* §13 ワンタイムパスワード入力(auth_code)の余白
* op_confirm_mail 等 fragments/op_common の auth_code ラッパーは
* as-is(input-field col s12)が margin-top:0(Materialize文脈で先頭のためリセット)
* なのに to-be(mb-3 col-12)は margin-top:12px → +12px 縦ズレで
* 以降フッターまで全体シフト(op_confirm_mail 16.70%の主因)。
* 対策: .nrp-onetimepassword 内の .mb-3 の margin-top を 0 に。
* (op_confirm_mail / op_login 等 op_common利用画面 共通)
* ============================================================ */
.nrp-onetimepassword .mb-3 { margin-top: 0 !important; }
/* §13-B OTP input / container の as-is 完全一致化
*
* [問題1] font-size: parity.css 汎用 input ルール(specificity 0,8,1)が
* style.css の .nrp-onetimepassword .mb-3.col-12 input{font-size:36px}を後勝ちで 1rem に書き換え。
* → !important で 36px を復元。
*
* [問題2] container 幅差: Bootstrap .col-12{flex: 0 0 auto}が flex-shrink を禁止するため
* margin-right:8px があっても width=100%(294px)のまま → as-is の 286px と8px差。
* → flex-shrink:1 で as-is 相当に縮める。
*
* [問題3] input padding: ブラウザ UA の padding-right:2px が残存。
* → 明示的に 0 に揃える。 */
.nrp-onetimepassword .mb-3.col-12 {
flex-shrink: 1 !important; /* Bootstrap flex:0 0 auto の shrink:0 を解除 → margin-right分だけ縮む */
}
.nrp-onetimepassword .mb-3.col-12 input,
.nrp-onetimepassword .mb-3 input {
font-size: 36px !important;
-webkit-text-fill-color: #00B170 !important;
text-align: center !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ============================================================
* §14 見出し h5.nrp-title の line-height
* as-is(Materialize)は h5 line-height=1.4(=25.5px @18.24px)だが
* to-be(Bootstrap)は h5 line-height=1.2(=21.9px) → 2行タイトルで -7px。
* この差が登録フロー各画面(contractor_enter/insured_enter/announcement等)で
* タイトル以降を上方向にドリフトさせ、下部ほど累積(フッター大ズレ)。
* 対策: h5.nrp-title の line-height を as-is と同じ 1.4 に。
* (P.nrp-title は対象外=quotation系に無影響)
* ============================================================ */
h5.nrp-title { line-height: 1.4 !important; }
/* ============================================================
* §15 カード内アクションボタン .btn の幅
* as-is はボタンクラス(btn l 等)で width が実質100%→max-width:320で320px。
* to-be は btn-green 等で style.css の width:90% が生き 293px(326×90%)。
* pill(border-radius:30px)の丸端がズレて差分化(registration_login 等)。
* 対策: .card-body 内の .btn を width:100% に(max-width:320で320pxに揃う)。
* ※entrance等のカード外ボタン(.nrp-more__btn--multi 内)は対象外=回帰なし。
* ============================================================ */
.card-body .btn { width: 100% !important; }
/* ============================================================
* §16 申込フォーム(contractor_enter/insured_enter等)の幾何差 是正
* 静的スイープでは出ない実測差。live_validate.py で 5.77%→0.40% を確認。
* いずれも「Materialize→Bootstrap 機械置換で .col.sN→.col-N 等になり
* as-is 向け materialize/app CSS が非適用化した」ことが根本原因。
* ============================================================ */
/* §16-A 郵便番号入力の高さ 48→50px。
* as-is: Materialize input{box-sizing:content-box}+border1px×2=50px。
* to-be: border-box で48px → 以降フォーム全ボックスが -2px 上シフト(主因)。
* content-box化+上下padding0で as-is と同じ50pxに揃える。 */
.input-zip .zip,
input.zip {
box-sizing: content-box !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* §16-B 生年月日 select の角丸。as-is=border-radius:2px / to-be=0px。 */
select.nrp-form-birthday { border-radius: 2px !important; }
/* §16-C フォーム col の左右ガター除去。
* as-is(.input-field.col.sN)は padding:0。機械置換で .col-N 化され
* Bootstrap ガター(左右16px)が残存 → 入力が16px右・幅32px減。
* .nrp-form-wrap 配下の col と .address__prefectures を padding:0 に。
* (§11 の col-1.center は width:8.333% 指定済で本規則と両立) */
.nrp-form-wrap [class*="col-"],
.address__prefectures {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* §16-D 都道府県 select を full-width に。
* as-is は browser-default+width:100%(326px)、to-be は browser-default 無しで
* content幅(57px)化 → §16-C で親padding0にした上で width:100% で326pxに揃う。 */
.address__prefectures select { width: 100% !important; }
/* §16-E floating-label の active(フロート)状態を as-is materialize.css 5025-5029 準拠に。
* §10 の active は translateY(-14px)/font0.75rem で as-is と不一致だった。
* as-is: translateY(-24px) translateX(-15px) scale(0.8), font-size は 0.9rem のまま。
* 加えて disabled入力(email/生年月日/性別。as-is は Materialize JS で .active 付与)の
* ラベルもフロート化(DOM順が input前/後 両方あるため :has() 併用)。 */
.mb-3 > label.active,
.card-body .nrp-form-wrap .mb-3 > label.active,
.mb-3 > input:disabled ~ label,
.mb-3 > label:has(~ input:disabled),
.card-body .nrp-form-wrap .mb-3 > input:disabled ~ label,
.card-body .nrp-form-wrap .mb-3 > label:has(~ input:disabled) {
font-size: 0.9rem !important;
-webkit-transform: translateY(-24px) translateX(-15px) scale(0.8) !important;
transform: translateY(-24px) translateX(-15px) scale(0.8) !important;
-webkit-transform-origin: 0 0 !important;
transform-origin: 0 0 !important;
}
/* §16-F テキスト入力の padding/line-height を as-is 実測に。
* as-is: 上下padding0 / line-height:normal(=18.4px)。
* to-be: UA/Bootstrap 既定の padding:1px と line-height:28.8px を打消す。 */
.card-body .nrp-form-wrap input:not([type=radio]):not([type=checkbox]):not(.browser-default),
.nrp-form-wrap input:not([type=radio]):not([type=checkbox]):not(.browser-default) {
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: normal !important;
}
/* §16-G 値が事前描画された入力(th:value)のラベルをフロート化。
* as-is は Materialize JS(M.updateTextFields)が値ありフィールドの label に
* .active を付与しフロートさせる。to-be は Materialize 撤去で JS が無く、
* .active も付かないため、値ありでもラベルが入力値と重なる(contractor_update/
* insured_update 等の変更フォーム)。サーバ描画の value 属性(空でない)を
* セレクタで検出し §16-E と同じフロート位置に揃える。
* 空(value=""/属性なし=新規フォーム)は非該当のため contractor_enter 等に回帰なし。 */
.mb-3 > input[value]:not([value=""]) ~ label,
.mb-3 > label:has(~ input[value]:not([value=""])),
.card-body .nrp-form-wrap .mb-3 > input[value]:not([value=""]) ~ label,
.card-body .nrp-form-wrap .mb-3 > label:has(~ input[value]:not([value=""])) {
font-size: 0.9rem !important;
-webkit-transform: translateY(-24px) translateX(-15px) scale(0.8) !important;
transform: translateY(-24px) translateX(-15px) scale(0.8) !important;
-webkit-transform-origin: 0 0 !important;
transform-origin: 0 0 !important;
}
/* ============================================================
* §17 margin-bottom ユーティリティ(.mbNN)の復活
* §10 の .mb-3{margin-bottom:12px!important} が、同一要素に付く
* style.css の .mbNN(!important・同一詳細度)を「後読み」で打ち消す。
* as-is は .mb-3 上書きが無いため .mbNN が有効(例: insured 性別欄
* .input-field.mb20=24px)。§12(.mb0)と同構造の問題を全 .mbNN で解消。
* 値は style.css 実定義に一致(mb20=24px 等、クラス名≠px値に注意)。
* これで .mb-3.mbNN の要素が as-is と同じ余白になる(insured -12px 解消)。
* ============================================================ */
.mb10 { margin-bottom: 10px !important; }
.mb16 { margin-bottom: 16px !important; }
.mb19 { margin-bottom: 19px !important; }
.mb20 { margin-bottom: 24px !important; }
.mb30 { margin-bottom: 32px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 48px !important; }
/* ============================================================
* §18 入力エラー欄(.errorField / input.invalid)の背景色
* as-is style.css: .card-content .nrp-form-wrap .errorField {
* background-color:#fdf0f0 }(ピンク・!important無し)。
* to-be では §10 の input{background-color:transparent}が :not()多用で
* 高詳細度(≈0,8,1)となり、errorField(0,3,0)を上書き→白背景化。
* → エラー欄が as-is のピンク塗りにならず差分化(reset_password_completion
* 3.67% / send_mail_id_completion 1.63% 等、全フォームのエラー表示に影響)。
* 対策: errorField/invalid の背景を !important で復活(as-is同色 #fdf0f0)。
* ============================================================ */
.card-body .nrp-form-wrap .errorField,
.card-body .nrp-form-wrap input.invalid,
.nrp-form-wrap .errorField,
.nrp-form-wrap input.invalid {
background-color: #fdf0f0 !important;
}
/* ============================================================
* §19 Materialize collection(告知リスト等)の見た目を Bootstrap list-group で再現
* as-is は ul.collection / li.collection-item(Materialize, materialize.css 2426〜)。
* to-be はこれを Bootstrap の ul.list-group / li.list-group-item へ機械置換済み。
* Bootstrap 既定は padding:0.5rem 1rem(=8px 16px)・line-height 継承(21.6px)・
* flex・margin0 のため、Materialize(padding 10px 20px・line-height 24px・
* margin 8px0 16px・border #e0e0e0)より各項目 -6px 縮小し、announcement で
* 全体 -81px の縦ドリフト(差分13.06%)を生んでいた。
* 対策: list-group/list-group-item を Materialize collection 原値に合わせる。
* ※to-be で list-group を使うのは announcement/inclination(registration/change_plan)
* の4ファイルのみで、いずれも as-is の collection と 1:1 対応(各12箇所)。
* 他用途が無いためグローバル指定で回帰しない(inclination も同時に是正)。
* ============================================================ */
.list-group {
display: block;
margin: 0.5rem 0 1rem 0;
padding-left: 0;
border: 1px solid #e0e0e0;
border-radius: 2px;
overflow: hidden;
position: relative;
}
.list-group .list-group-item,
.list-group-item {
background-color: #fff;
color: rgba(0, 0, 0, 0.87);
line-height: 1.5rem;
padding: 10px 20px;
margin: 0;
border: none;
border-bottom: 1px solid #e0e0e0;
border-radius: 0;
}
.list-group .list-group-item:last-child,
.list-group-item:last-child {
border-bottom: none;
}
/* ============================================================
* §20 Material Icons (アイコンフォント)
* as-is は materialIcon.css で 'Material Icons' フォント + .material-icons を定義し、
* テンプレの arrow_drop_down をligatureでアイコン描画。
* to-be は Materialize撤去時にこのフォント/CSSが欠落し、ligatureが解決されず
* 「arrow_drop_down」等の文字列がそのまま表示される(change_plan/inclination等で
* 高さ+900px超の崩れ)。as-is の materialIcon.css を移植して一致させる。
* フォント実体は as-is と同一(static/font/materialICon.woff2)。
* ============================================================ */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('/font/materialICon-a2bf9925dfbe36b587e2a84de07adf2d.woff2') format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
/* ============================================================
* §21 h5 フォントサイズ補正
* Materialize: h5 { font-size: 1.14rem } = 18.24px
* Bootstrap 5: h5 { font-size: 1.25rem } = 20px
* → settlement_fail 等で h5 テキストの行折り返し位置が変わり 2px 高さ差が生じる。
* Materialize の 1.14rem / 1.4 line-height に合わせる。
* ============================================================ */
/* ============================================================
* §22 grey lighten-2 背景色
* Materialize: .grey.lighten-2 { background-color: #BDC1C4 }
* compensation.html の th:classappend で使用（過去/解除済み契約カード）
* ============================================================ */
.grey.lighten-2 { background-color: #BDC1C4 !important; }
h5 {
font-size: 1.14rem !important;
line-height: 1.4 !important;
}
/* ============================================================
* §23 nrp-modal 内 col-12 パリティ修正（欠034）
* style.css の .nrp-modal > .row > .col セレクタは Materialize の
* "col s12" クラス向け。to-be では "col-12" に変換済みのため一致せず、
* §3 の .row [class*="col-"] { padding: 0 16px } が適用される。
* → モーダルが幅 32px 狭くなり、縦スクロールバーとの間に隙間が発生。
* as-is と同じ padding: 0 に戻し、card-body padding も 24px に揃える。
* ============================================================ */
.nrp-modal > .row > .col-12 {
padding: 0;
}
@media screen and (min-width: 481px) {
.nrp-modal > .row > .col-12 {
max-width: 640px;
margin: 0 auto;
float: none;
}
}
.nrp-modal > .row > .col-12 .card-body {
padding: 24px;
}
/* ============================================================
* §24 処理中バー（.progress / .indeterminate）パリティ修正（欠058）
* as-is は Materialize CSS の .progress（height: 4px）+
* .indeterminate の ::before / ::after アニメーションで
* 動くバーを表現。to-be は Bootstrap 5 の .progress
* （height: 1rem、display: flex）が適用されバーが太く・静止する。
* Materialize 準拠のスタイルで上書きし as-is と同一外観・挙動にする。
* ============================================================ */
.progress {
position: relative;
height: 4px;
display: block;
width: 100%;
background-color: #cbe3f4;
border-radius: 2px;
margin: 0.5rem 0 1rem 0;
overflow: hidden;
}
.progress .indeterminate {
background-color: #2986CA;
}
.progress .indeterminate:before {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress .indeterminate:after {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s;
}
@-webkit-keyframes indeterminate {
0% { left: -35%; right: 100%; }
60% { left: 100%; right: -90%; }
100% { left: 100%; right: -90%; }
}
@keyframes indeterminate {
0% { left: -35%; right: 100%; }
60% { left: 100%; right: -90%; }
100% { left: 100%; right: -90%; }
}
@-webkit-keyframes indeterminate-short {
0% { left: -200%; right: 100%; }
60% { left: 107%; right: -8%; }
100% { left: 107%; right: -8%; }
}
@keyframes indeterminate-short {
0% { left: -200%; right: 100%; }
60% { left: 107%; right: -8%; }
100% { left: 107%; right: -8%; }
}
/* =====================================================================
* iOS ripple: タップ時の波紋アニメーション（as-is Materialize waves-effect 再現）
* 対象: iOS Safari のみ（common.js の UA 判定で .ios-btn-touch クラスを付与）
* 影響範囲: .btn / .btn-large / .btn-small のみ（他要素・非iOS には無影響）
* ===================================================================== */
@-webkit-keyframes ios-btn-ripple {
0% { -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); opacity: 0.5; }
100% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@keyframes ios-btn-ripple {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0.5; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
.ios-btn-touch::after {
content: '';
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
width: var(--ios-ripple-size, 20px);
height: var(--ios-ripple-size, 20px);
top: var(--ios-ripple-y, 50%);
left: var(--ios-ripple-x, 50%);
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
-webkit-animation: ios-btn-ripple 0.5s ease-out forwards;
animation: ios-btn-ripple 0.5s ease-out forwards;
pointer-events: none;
z-index: 2;
}