/* v20260916 */ @charset "utf-8"; /******************** ▼ Overrides added to 'reset.css' styles ▼ ********************/ :root{ --main_pnk: #ef5350; --main_pnk_lt: #ffe5e7; --main_pnk_bg: #fff4f4; --must: var(--main_pnk); /* フォーム「必須」 */ --gry1: #f3f3f3; --gry2: #eee; --gry3: #ddd; --gry4: #ccc; --ui_focus_border: #64b5f6; --ui_accent-color: var(--main_pnk); /* UI color */ --ui_red: #dc3545; --ui_ora: #fd7e14; --ui_yel: #ffc107; --ui_grn: #198754; --ui_blu: #0d6efd; /* UI light color */ --uil_red: #fcebec; --uil_ora: #fff1e6; --uil_yel: #fff9e6; --uil_grn: #eaf6ef; --uil_blu: #eaf2ff; } *{ margin: 0; padding: 0; } html{ font-size: 100%; /* 100% = 16px = 1rem　⭐️rem指定の対象がルートである「html」となるためhtmlをセレクタとする */ scroll-behavior: smooth; } html, body{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #333; line-height: 1.6; } h1, h2, h3, h4, h5, h6{ font-size: inherit; font-weight: normal; } ol, ul{ list-style: none; } a, a:visited{ color: inherit; text-decoration: none; } a:hover{ text-decoration: underline; } address{ font-style: normal; } table{ width: 100%; border-collapse: collapse; } table th{ font-weight: normal; } ::placeholder{ color: #ccc; font-weight: 400; } i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands{ margin-right: 0.375em; } /* Font Awesome */ /******************** ▲ Overrides added to 'reset.css' styles ▲ ********************/ /* font-size: 100% = 16px 1px・・・0.625rem 2px・・・0.125rem 3px・・・0.1875rem 4px・・・0.25rem 5px・・・0.3125rem 6px・・・0.375rem 7px・・・0.4375rem 8px・・・0.5rem 9px・・・0.5625rem 10px・・・0.625rem 11px・・・0.6875rem 12px・・・0.75rem 13px・・・0.8125rem 14px・・・0.875rem 15px・・・0.9375rem 16px・・・1rem 17px・・・1.0625rem 18px・・・1.125rem 19px・・・1.1875rem 20px・・・1.25rem 21px・・・1.3125rem 22px・・・1.375rem 23px・・・1.4375rem 24px・・・1.5rem 25px・・・1.5625rem 26px・・・1.625rem 27px・・・1.6875rem 28px・・・1.75rem 29px・・・1.8125rem 30px・・・1.875rem 31px・・・1.9375rem 32px・・・2rem 33px・・・2.0625rem 34px・・・2.125rem 35px・・・2.1875rem 36px・・・2.25rem 37px・・・2.3125rem 38px・・・2.375rem 39px・・・2.4375rem 40px・・・2.5rem 41px・・・2.5625rem 42px・・・2.625rem 43px・・・2.6875rem 44px・・・2.75rem 45px・・・2.8125rem 46px・・・2.875rem 47px・・・2.9375rem 48px・・・3rem 49px・・・3.0625rem 50px・・・3.125rem */ /* ================================================== table ================================================== */ .tbl_style{} .tbl_style caption{ text-align: left; } .tbl_style th, .tbl_style td{ padding: 0.5rem 2rem; border: 1px solid #ccc; } .tbl_style th{ width: 30%; background: var(--main_pnk_bg); } .tbl_style td{} /* ================================================== form ================================================== */ form .tbl_style th{ font-size: 1.125rem; } form .tbl_style th span{ display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } form .tbl_style th .must{ flex-shrink: 0; display: block; margin-left: auto; padding: 0.25rem 0.5rem; background: var(--must); border-radius: 3px; color: #fff; font-size: 0.75rem; line-height: 1; white-space: nowrap; } form .must:after{ content: '必須'; } form .inp_style{ width: 100%; padding: 0.5rem 1rem; border: 1px solid #ccc; border-radius: 4px; color: #333; font-size: 1.125rem; outline: 3px solid transparent; transition: background-color 0.3s ease, outline-color 0.3s ease; } form .inp_style:focus{ border-color: transparent; outline: 3px solid var(--ui_focus_border);} /*form .inp_style:read-only{ background: var(--gry2); cursor: not-allowed; } なぜかreadonlyとしていない