@charset "utf-8";

h1, .h1 { font-size: 2.5rem; line-height: 1.2; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
h2, .h2 { font-size: 2rem; line-height: 1.3; font-weight: 700; margin: 0; }
h3, .h3 { font-size: 1.75rem; line-height: 1.4; font-weight: 600; margin: 0; }
h4, .h4 { font-size: 1.5rem; line-height: 1.4; font-weight: 600; margin: 0; }
h5, .h5 { font-size: 1.25rem; line-height: 1.4; font-weight: 600; margin: 0; }
h6, .h6 { font-size: 1.125rem; line-height: 1.5; font-weight: 600; margin: 0; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--on-surface);
}

header {
  min-block-size: 3rem;
}

/* nowrap */
.nowrap { white-space: nowrap !important; }

/* display */
.display-none { display: none !important; }

/* font-size */
.rem08 { font-size: 0.8rem !important; }
.rem09 { font-size: 0.9rem !important; }
.rem10 { font-size: 1.0rem !important; }
.rem11 { font-size: 1.1rem !important; }
.rem12 { font-size: 1.2rem !important; }
.rem13 { font-size: 1.3rem !important; }
.rem14 { font-size: 1.4rem !important; }
.rem15 { font-size: 1.5rem !important; }
.rem20 { font-size: 2.0rem !important; }
.rem25 { font-size: 2.5rem !important; }

/* background colors */
.bg_sat { background-color: #DDF1F9 !important; }
.bg_sun { background-color: #FFDFE5 !important; }

/* display block */
.disblock { display: block !important; }

/* text align */
.text-al { text-align: left   !important; }
.text-ac { text-align: center !important; }
.text-ar { text-align: right  !important; }
.text-vt { vertical-align:    top !important; }
.text-vm { vertical-align: middle !important; }
.text-vb { vertical-align: bottom !important; }

/* font-size */
.rem30 { font-size: 3.0rem !important; }
.rem29 { font-size: 2.9rem !important; }
.rem28 { font-size: 2.8rem !important; }
.rem27 { font-size: 2.7rem !important; }
.rem26 { font-size: 2.6rem !important; }
.rem25 { font-size: 2.5rem !important; }
.rem24 { font-size: 2.4rem !important; }
.rem23 { font-size: 2.3rem !important; }
.rem22 { font-size: 2.2rem !important; }
.rem21 { font-size: 2.1rem !important; }
.rem20 { font-size: 2.0rem !important; }
.rem19 { font-size: 1.9rem !important; }
.rem18 { font-size: 1.8rem !important; }
.rem17 { font-size: 1.7rem !important; }
.rem16 { font-size: 1.6rem !important; }
.rem15 { font-size: 1.5rem !important; }
.rem14 { font-size: 1.4rem !important; }
.rem13 { font-size: 1.3rem !important; }
.rem12 { font-size: 1.2rem !important; }
.rem11 { font-size: 1.1rem !important; }
.rem10 { font-size: 1.0rem !important; }
.rem09 { font-size: 0.9rem !important; }
.rem08 { font-size: 0.8rem !important; }
.rem07 { font-size: 0.7rem !important; }
.rem06 { font-size: 0.6rem !important; }
.rem05 { font-size: 0.5rem !important; }

/* border */
.border-a  { border:        solid 1px var(--outline); }
.border-a2 { border:        solid 2px var(--outline); }
.border-a3 { border:        solid 3px var(--outline); }
.border-l  { border-left:   solid 1px var(--outline); }
.border-l2 { border-left:   solid 2px var(--outline); }
.border-l3 { border-left:   solid 3px var(--outline); }
.border-t  { border-top:    solid 1px var(--outline); }
.border-t2 { border-top:    solid 2px var(--outline); }
.border-t3 { border-top:    solid 3px var(--outline); }
.border-r  { border-right:  solid 1px var(--outline); }
.border-r2 { border-right:  solid 2px var(--outline); }
.border-r3 { border-right:  solid 3px var(--outline); }
.border-b  { border-bottom: solid 1px var(--outline); }
.border-b2 { border-bottom: solid 2px var(--outline); }
.border-b3 { border-bottom: solid 3px var(--outline); }

/* border-radius */
.br1 { border-radius: 1px; }
.br2 { border-radius: 2px; }
.br3 { border-radius: 3px; }
.br4 { border-radius: 4px; }
.br5 { border-radius: 5px; }

/* padding */
.pa0   { padding:  0 !important; }
.pa1   { padding:  1px !important; }
.pa2   { padding:  2px !important; }
.pa3   { padding:  3px !important; }
.pa4   { padding:  4px !important; }
.pa5   { padding:  5px !important; }
.pa6   { padding:  6px !important; }
.pa7   { padding:  7px !important; }
.pa8   { padding:  8px !important; }
.pa9   { padding:  9px !important; }
.pa10  { padding: 10px !important; }
.pa11  { padding: 11px !important; }
.pa12  { padding: 12px !important; }
.pa13  { padding: 13px !important; }
.pa14  { padding: 14px !important; }
.pa15  { padding: 15px !important; }
.pa16  { padding: 16px !important; }
.pa17  { padding: 17px !important; }
.pa18  { padding: 18px !important; }
.pa19  { padding: 19px !important; }
.pa20  { padding: 20px !important; }
.pa21  { padding: 21px !important; }
.pa22  { padding: 22px !important; }
.pa23  { padding: 23px !important; }
.pa24  { padding: 24px !important; }
.pa25  { padding: 25px !important; }
.pa26  { padding: 26px !important; }
.pa27  { padding: 27px !important; }
.pa28  { padding: 28px !important; }
.pa29  { padding: 29px !important; }
.pa30  { padding: 30px !important; }

/* padding left right */
.px0 { padding-left:0; padding-right:0; }
.px1 { padding-left:1px !important; padding-right:1px !important; }
.px2 { padding-left:2px !important; padding-right:2px !important; }
.px3 { padding-left:3px !important; padding-right:3px !important; }
.px4 { padding-left:4px !important; padding-right:4px !important; }
.px5 { padding-left:5px !important; padding-right:5px !important; }
.px6 { padding-left:6px !important; padding-right:6px !important; }
.px7 { padding-left:7px !important; padding-right:7px !important; }
.px8 { padding-left:8px !important; padding-right:8px !important; }
.px9 { padding-left:9px !important; padding-right:9px !important; }
.px10 { padding-left:10px !important; padding-right:10px !important; }
.px11 { padding-left:11px !important; padding-right:11px !important; }
.px12 { padding-left:12px !important; padding-right:12px !important; }
.px13 { padding-left:13px !important; padding-right:13px !important; }
.px14 { padding-left:14px !important; padding-right:14px !important; }
.px15 { padding-left:15px !important; padding-right:15px !important; }
.px16 { padding-left:16px !important; padding-right:16px !important; }
.px17 { padding-left:17px !important; padding-right:17px !important; }
.px18 { padding-left:18px !important; padding-right:18px !important; }
.px19 { padding-left:19px !important; padding-right:19px !important; }
.px20 { padding-left:20px !important; padding-right:20px !important; }
.px21 { padding-left:21px !important; padding-right:21px !important; }
.px22 { padding-left:22px !important; padding-right:22px !important; }
.px23 { padding-left:23px !important; padding-right:23px !important; }
.px24 { padding-left:24px !important; padding-right:24px !important; }
.px25 { padding-left:25px !important; padding-right:25px !important; }
.px26 { padding-left:26px !important; padding-right:26px !important; }
.px27 { padding-left:27px !important; padding-right:27px !important; }
.px28 { padding-left:28px !important; padding-right:28px !important; }
.px29 { padding-left:29px !important; padding-right:29px !important; }
.px30 { padding-left:30px !important; padding-right:30px !important; }

/* padding top bottom */
.py0 { padding-top:0; padding-bottom:0; }
.py1 { padding-top:1px !important; padding-bottom:1px !important; }
.py2 { padding-top:2px !important; padding-bottom:2px !important; }
.py3 { padding-top:3px !important; padding-bottom:3px !important; }
.py4 { padding-top:4px !important; padding-bottom:4px !important; }
.py5 { padding-top:5px !important; padding-bottom:5px !important; }
.py6 { padding-top:6px !important; padding-bottom:6px !important; }
.py7 { padding-top:7px !important; padding-bottom:7px !important; }
.py8 { padding-top:8px !important; padding-bottom:8px !important; }
.py9 { padding-top:9px !important; padding-bottom:9px !important; }
.py10 { padding-top:10px !important; padding-bottom:10px !important; }
.py11 { padding-top:11px !important; padding-bottom:11px !important; }
.py12 { padding-top:12px !important; padding-bottom:12px !important; }
.py13 { padding-top:13px !important; padding-bottom:13px !important; }
.py14 { padding-top:14px !important; padding-bottom:14px !important; }
.py15 { padding-top:15px !important; padding-bottom:15px !important; }
.py16 { padding-top:16px !important; padding-bottom:16px !important; }
.py17 { padding-top:17px !important; padding-bottom:17px !important; }
.py18 { padding-top:18px !important; padding-bottom:18px !important; }
.py19 { padding-top:19px !important; padding-bottom:19px !important; }
.py20 { padding-top:20px !important; padding-bottom:20px !important; }
.py21 { padding-top:21px !important; padding-bottom:21px !important; }
.py22 { padding-top:22px !important; padding-bottom:22px !important; }
.py23 { padding-top:23px !important; padding-bottom:23px !important; }
.py24 { padding-top:24px !important; padding-bottom:24px !important; }
.py25 { padding-top:25px !important; padding-bottom:25px !important; }
.py26 { padding-top:26px !important; padding-bottom:26px !important; }
.py27 { padding-top:27px !important; padding-bottom:27px !important; }
.py28 { padding-top:28px !important; padding-bottom:28px !important; }
.py29 { padding-top:29px !important; padding-bottom:29px !important; }
.py30 { padding-top:30px !important; padding-bottom:30px !important; }

/* padding top */
.pt1   { padding-top:  1px !important; }
.pt2   { padding-top:  2px !important; }
.pt3   { padding-top:  3px !important; }
.pt4   { padding-top:  4px !important; }
.pt5   { padding-top:  5px !important; }
.pt6   { padding-top:  6px !important; }
.pt7   { padding-top:  7px !important; }
.pt8   { padding-top:  8px !important; }
.pt9   { padding-top:  9px !important; }
.pt10  { padding-top: 10px !important; }
.pt11  { padding-top: 11px !important; }
.pt12  { padding-top: 12px !important; }
.pt13  { padding-top: 13px !important; }
.pt14  { padding-top: 14px !important; }
.pt15  { padding-top: 15px !important; }
.pt16  { padding-top: 16px !important; }
.pt17  { padding-top: 17px !important; }
.pt18  { padding-top: 18px !important; }
.pt19  { padding-top: 19px !important; }
.pt20  { padding-top: 20px !important; }
.pt21  { padding-top: 21px !important; }
.pt22  { padding-top: 22px !important; }
.pt23  { padding-top: 23px !important; }
.pt24  { padding-top: 24px !important; }
.pt25  { padding-top: 25px !important; }
.pt26  { padding-top: 26px !important; }
.pt27  { padding-top: 27px !important; }
.pt28  { padding-top: 28px !important; }
.pt29  { padding-top: 29px !important; }
.pt30  { padding-top: 30px !important; }

/* padding bottom */
.pb1   { padding-bottom:  1px !important; }
.pb2   { padding-bottom:  2px !important; }
.pb3   { padding-bottom:  3px !important; }
.pb4   { padding-bottom:  4px !important; }
.pb5   { padding-bottom:  5px !important; }
.pb6   { padding-bottom:  6px !important; }
.pb7   { padding-bottom:  7px !important; }
.pb8   { padding-bottom:  8px !important; }
.pb9   { padding-bottom:  9px !important; }
.pb10  { padding-bottom: 10px !important; }
.pb11  { padding-bottom: 11px !important; }
.pb12  { padding-bottom: 12px !important; }
.pb13  { padding-bottom: 13px !important; }
.pb14  { padding-bottom: 14px !important; }
.pb15  { padding-bottom: 15px !important; }
.pb16  { padding-bottom: 16px !important; }
.pb17  { padding-bottom: 17px !important; }
.pb18  { padding-bottom: 18px !important; }
.pb19  { padding-bottom: 19px !important; }
.pb20  { padding-bottom: 20px !important; }
.pb21  { padding-bottom: 21px !important; }
.pb22  { padding-bottom: 22px !important; }
.pb23  { padding-bottom: 23px !important; }
.pb24  { padding-bottom: 24px !important; }
.pb25  { padding-bottom: 25px !important; }
.pb26  { padding-bottom: 26px !important; }
.pb27  { padding-bottom: 27px !important; }
.pb28  { padding-bottom: 28px !important; }
.pb29  { padding-bottom: 29px !important; }
.pb30  { padding-bottom: 30px !important; }

/* padding left */
.pl1   { padding-left:  1px !important; }
.pl2   { padding-left:  2px !important; }
.pl3   { padding-left:  3px !important; }
.pl4   { padding-left:  4px !important; }
.pl5   { padding-left:  5px !important; }
.pl6   { padding-left:  6px !important; }
.pl7   { padding-left:  7px !important; }
.pl8   { padding-left:  8px !important; }
.pl9   { padding-left:  9px !important; }
.pl10  { padding-left: 10px !important; }
.pl11  { padding-left: 11px !important; }
.pl12  { padding-left: 12px !important; }
.pl13  { padding-left: 13px !important; }
.pl14  { padding-left: 14px !important; }
.pl15  { padding-left: 15px !important; }
.pl16  { padding-left: 16px !important; }
.pl17  { padding-left: 17px !important; }
.pl18  { padding-left: 18px !important; }
.pl19  { padding-left: 19px !important; }
.pl20  { padding-left: 20px !important; }
.pl21  { padding-left: 21px !important; }
.pl22  { padding-left: 22px !important; }
.pl23  { padding-left: 23px !important; }
.pl24  { padding-left: 24px !important; }
.pl25  { padding-left: 25px !important; }
.pl26  { padding-left: 26px !important; }
.pl27  { padding-left: 27px !important; }
.pl28  { padding-left: 28px !important; }
.pl29  { padding-left: 29px !important; }
.pl30  { padding-left: 30px !important; }

/* padding right */
.pr1   { padding-right:  1px !important; }
.pr2   { padding-right:  2px !important; }
.pr3   { padding-right:  3px !important; }
.pr4   { padding-right:  4px !important; }
.pr5   { padding-right:  5px !important; }
.pr6   { padding-right:  6px !important; }
.pr7   { padding-right:  7px !important; }
.pr8   { padding-right:  8px !important; }
.pr9   { padding-right:  9px !important; }
.pr10  { padding-right: 10px !important; }
.pr11  { padding-right: 11px !important; }
.pr12  { padding-right: 12px !important; }
.pr13  { padding-right: 13px !important; }
.pr14  { padding-right: 14px !important; }
.pr15  { padding-right: 15px !important; }
.pr16  { padding-right: 16px !important; }
.pr17  { padding-right: 17px !important; }
.pr18  { padding-right: 18px !important; }
.pr19  { padding-right: 19px !important; }
.pr20  { padding-right: 20px !important; }
.pr21  { padding-right: 21px !important; }
.pr22  { padding-right: 22px !important; }
.pr23  { padding-right: 23px !important; }
.pr24  { padding-right: 24px !important; }
.pr25  { padding-right: 25px !important; }
.pr26  { padding-right: 26px !important; }
.pr27  { padding-right: 27px !important; }
.pr28  { padding-right: 28px !important; }
.pr29  { padding-right: 29px !important; }
.pr30  { padding-right: 30px !important; }

/* margin */
.ma0   { margin:  0px !important; }
.ma1   { margin:  1px !important; }
.ma2   { margin:  2px !important; }
.ma3   { margin:  3px !important; }
.ma4   { margin:  4px !important; }
.ma5   { margin:  5px !important; }
.ma6   { margin:  6px !important; }
.ma7   { margin:  7px !important; }
.ma8   { margin:  8px !important; }
.ma9   { margin:  9px !important; }
.ma10  { margin: 10px !important; }
.ma11  { margin: 11px !important; }
.ma12  { margin: 12px !important; }
.ma13  { margin: 13px !important; }
.ma14  { margin: 14px !important; }
.ma15  { margin: 15px !important; }
.ma16  { margin: 16px !important; }
.ma17  { margin: 17px !important; }
.ma18  { margin: 18px !important; }
.ma19  { margin: 19px !important; }
.ma20  { margin: 20px !important; }
.ma21  { margin: 21px !important; }
.ma22  { margin: 22px !important; }
.ma23  { margin: 23px !important; }
.ma24  { margin: 24px !important; }
.ma25  { margin: 25px !important; }
.ma26  { margin: 26px !important; }
.ma27  { margin: 27px !important; }
.ma28  { margin: 28px !important; }
.ma29  { margin: 29px !important; }
.ma30  { margin: 30px !important; }

/* margin left right */
.mx0 { margin-left: 0px !important; margin-right: 0px !important; }
.mx1 { margin-left: 1px !important; margin-right: 1px !important; }
.mx2 { margin-left: 2px !important; margin-right: 2px !important; }
.mx3 { margin-left: 3px !important; margin-right: 3px !important; }
.mx4 { margin-left: 4px !important; margin-right: 4px !important; }
.mx5 { margin-left: 5px !important; margin-right: 5px !important; }
.mx6 { margin-left: 6px !important; margin-right: 6px !important; }
.mx7 { margin-left: 7px !important; margin-right: 7px !important; }
.mx8 { margin-left: 8px !important; margin-right: 8px !important; }
.mx9 { margin-left: 9px !important; margin-right: 9px !important; }
.mx10 { margin-left: 10px !important; margin-right: 10px !important; }
.mx11 { margin-left: 11px !important; margin-right: 11px !important; }
.mx12 { margin-left: 12px !important; margin-right: 12px !important; }
.mx13 { margin-left: 13px !important; margin-right: 13px !important; }
.mx14 { margin-left: 14px !important; margin-right: 14px !important; }
.mx15 { margin-left: 15px !important; margin-right: 15px !important; }
.mx16 { margin-left: 16px !important; margin-right: 16px !important; }
.mx17 { margin-left: 17px !important; margin-right: 17px !important; }
.mx18 { margin-left: 18px !important; margin-right: 18px !important; }
.mx19 { margin-left: 19px !important; margin-right: 19px !important; }
.mx20 { margin-left: 20px !important; margin-right: 20px !important; }
.mx21 { margin-left: 21px !important; margin-right: 21px !important; }
.mx22 { margin-left: 22px !important; margin-right: 22px !important; }
.mx23 { margin-left: 23px !important; margin-right: 23px !important; }
.mx24 { margin-left: 24px !important; margin-right: 24px !important; }
.mx25 { margin-left: 25px !important; margin-right: 25px !important; }
.mx26 { margin-left: 26px !important; margin-right: 26px !important; }
.mx27 { margin-left: 27px !important; margin-right: 27px !important; }
.mx28 { margin-left: 28px !important; margin-right: 28px !important; }
.mx29 { margin-left: 29px !important; margin-right: 29px !important; }
.mx30 { margin-left: 30px !important; margin-right: 30px !important; }

/* margin top bottom */
.my0 { margin-top: 0px !important; margin-bottom: 0px !important; }
.my1 { margin-top: 1px !important; margin-bottom: 1px !important; }
.my2 { margin-top: 2px !important; margin-bottom: 2px !important; }
.my3 { margin-top: 3px !important; margin-bottom: 3px !important; }
.my4 { margin-top: 4px !important; margin-bottom: 4px !important; }
.my5 { margin-top: 5px !important; margin-bottom: 5px !important; }
.my6 { margin-top: 6px !important; margin-bottom: 6px !important; }
.my7 { margin-top: 7px !important; margin-bottom: 7px !important; }
.my8 { margin-top: 8px !important; margin-bottom: 8px !important; }
.my9 { margin-top: 9px !important; margin-bottom: 9px !important; }
.my10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.my11 { margin-top: 11px !important; margin-bottom: 11px !important; }
.my12 { margin-top: 12px !important; margin-bottom: 12px !important; }
.my13 { margin-top: 13px !important; margin-bottom: 13px !important; }
.my14 { margin-top: 14px !important; margin-bottom: 14px !important; }
.my15 { margin-top: 15px !important; margin-bottom: 15px !important; }
.my16 { margin-top: 16px !important; margin-bottom: 16px !important; }
.my17 { margin-top: 17px !important; margin-bottom: 17px !important; }
.my18 { margin-top: 18px !important; margin-bottom: 18px !important; }
.my19 { margin-top: 19px !important; margin-bottom: 19px !important; }
.my20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.my21 { margin-top: 21px !important; margin-bottom: 21px !important; }
.my22 { margin-top: 22px !important; margin-bottom: 22px !important; }
.my23 { margin-top: 23px !important; margin-bottom: 23px !important; }
.my24 { margin-top: 24px !important; margin-bottom: 24px !important; }
.my25 { margin-top: 25px !important; margin-bottom: 25px !important; }
.my26 { margin-top: 26px !important; margin-bottom: 26px !important; }
.my27 { margin-top: 27px !important; margin-bottom: 27px !important; }
.my28 { margin-top: 28px !important; margin-bottom: 28px !important; }
.my29 { margin-top: 29px !important; margin-bottom: 29px !important; }
.my30 { margin-top: 30px !important; margin-bottom: 30px !important; }

/* margin top */
.mt1   { margin-top:  1px !important; }
.mt2   { margin-top:  2px !important; }
.mt3   { margin-top:  3px !important; }
.mt4   { margin-top:  4px !important; }
.mt5   { margin-top:  5px !important; }
.mt6   { margin-top:  6px !important; }
.mt7   { margin-top:  7px !important; }
.mt8   { margin-top:  8px !important; }
.mt9   { margin-top:  9px !important; }
.mt10  { margin-top: 10px !important; }
.mt11  { margin-top: 11px !important; }
.mt12  { margin-top: 12px !important; }
.mt13  { margin-top: 13px !important; }
.mt14  { margin-top: 14px !important; }
.mt15  { margin-top: 15px !important; }
.mt16  { margin-top: 16px !important; }
.mt17  { margin-top: 17px !important; }
.mt18  { margin-top: 18px !important; }
.mt19  { margin-top: 19px !important; }
.mt20  { margin-top: 20px !important; }
.mt21  { margin-top: 21px !important; }
.mt22  { margin-top: 22px !important; }
.mt23  { margin-top: 23px !important; }
.mt24  { margin-top: 24px !important; }
.mt25  { margin-top: 25px !important; }
.mt26  { margin-top: 26px !important; }
.mt27  { margin-top: 27px !important; }
.mt28  { margin-top: 28px !important; }
.mt29  { margin-top: 29px !important; }
.mt30  { margin-top: 30px !important; }
.mt31  { margin-top: 31px !important; }
.mt32  { margin-top: 32px !important; }
.mt33  { margin-top: 33px !important; }
.mt34  { margin-top: 34px !important; }
.mt35  { margin-top: 35px !important; }
.mt36  { margin-top: 36px !important; }
.mt37  { margin-top: 37px !important; }
.mt38  { margin-top: 38px !important; }
.mt39  { margin-top: 39px !important; }
.mt40  { margin-top: 40px !important; }
.mt41  { margin-top: 41px !important; }
.mt42  { margin-top: 42px !important; }
.mt43  { margin-top: 43px !important; }
.mt64  { margin-top: 64px !important; }

/* margin bottom */
.mb0   { margin-bottom:  0   !important; }
.mb1   { margin-bottom:  1px !important; }
.mb2   { margin-bottom:  2px !important; }
.mb3   { margin-bottom:  3px !important; }
.mb4   { margin-bottom:  4px !important; }
.mb5   { margin-bottom:  5px !important; }
.mb6   { margin-bottom:  6px !important; }
.mb7   { margin-bottom:  7px !important; }
.mb8   { margin-bottom:  8px !important; }
.mb9   { margin-bottom:  9px !important; }
.mb10  { margin-bottom: 10px !important; }
.mb11  { margin-bottom: 11px !important; }
.mb12  { margin-bottom: 12px !important; }
.mb13  { margin-bottom: 13px !important; }
.mb14  { margin-bottom: 14px !important; }
.mb15  { margin-bottom: 15px !important; }
.mb16  { margin-bottom: 16px !important; }
.mb17  { margin-bottom: 17px !important; }
.mb18  { margin-bottom: 18px !important; }
.mb19  { margin-bottom: 19px !important; }
.mb20  { margin-bottom: 20px !important; }
.mb21  { margin-bottom: 21px !important; }
.mb22  { margin-bottom: 22px !important; }
.mb23  { margin-bottom: 23px !important; }
.mb24  { margin-bottom: 24px !important; }
.mb25  { margin-bottom: 25px !important; }
.mb26  { margin-bottom: 26px !important; }
.mb27  { margin-bottom: 27px !important; }
.mb28  { margin-bottom: 28px !important; }
.mb29  { margin-bottom: 29px !important; }
.mb30  { margin-bottom: 30px !important; }

/* margin left */
.ml0   { margin-left:  0   !important; }
.ml1   { margin-left:  1px !important; }
.ml2   { margin-left:  2px !important; }
.ml3   { margin-left:  3px !important; }
.ml4   { margin-left:  4px !important; }
.ml5   { margin-left:  5px !important; }
.ml6   { margin-left:  6px !important; }
.ml7   { margin-left:  7px !important; }
.ml8   { margin-left:  8px !important; }
.ml9   { margin-left:  9px !important; }
.ml10  { margin-left: 10px !important; }
.ml11  { margin-left: 11px !important; }
.ml12  { margin-left: 12px !important; }
.ml13  { margin-left: 13px !important; }
.ml14  { margin-left: 14px !important; }
.ml15  { margin-left: 15px !important; }
.ml16  { margin-left: 16px !important; }
.ml17  { margin-left: 17px !important; }
.ml18  { margin-left: 18px !important; }
.ml19  { margin-left: 19px !important; }
.ml20  { margin-left: 20px !important; }
.ml21  { margin-left: 21px !important; }
.ml22  { margin-left: 22px !important; }
.ml23  { margin-left: 23px !important; }
.ml24  { margin-left: 24px !important; }
.ml25  { margin-left: 25px !important; }
.ml26  { margin-left: 26px !important; }
.ml27  { margin-left: 27px !important; }
.ml28  { margin-left: 28px !important; }
.ml29  { margin-left: 29px !important; }
.ml30  { margin-left: 30px !important; }

/* margin right */
.mr1   { margin-right:  1px !important; }
.mr2   { margin-right:  2px !important; }
.mr3   { margin-right:  3px !important; }
.mr4   { margin-right:  4px !important; }
.mr5   { margin-right:  5px !important; }
.mr6   { margin-right:  6px !important; }
.mr7   { margin-right:  7px !important; }
.mr8   { margin-right:  8px !important; }
.mr9   { margin-right:  9px !important; }
.mr10  { margin-right: 10px !important; }
.mr11  { margin-right: 11px !important; }
.mr12  { margin-right: 12px !important; }
.mr13  { margin-right: 13px !important; }
.mr14  { margin-right: 14px !important; }
.mr15  { margin-right: 15px !important; }
.mr16  { margin-right: 16px !important; }
.mr17  { margin-right: 17px !important; }
.mr18  { margin-right: 18px !important; }
.mr19  { margin-right: 19px !important; }
.mr20  { margin-right: 20px !important; }
.mr21  { margin-right: 21px !important; }
.mr22  { margin-right: 22px !important; }
.mr23  { margin-right: 23px !important; }
.mr24  { margin-right: 24px !important; }
.mr25  { margin-right: 25px !important; }
.mr26  { margin-right: 26px !important; }
.mr27  { margin-right: 27px !important; }
.mr28  { margin-right: 28px !important; }
.mr29  { margin-right: 29px !important; }
.mr30  { margin-right: 30px !important; }

.pt1p  { padding-top: 1%; }
.pt2p  { padding-top: 2%; }
.pt3p  { padding-top: 3%; }
.pt4p  { padding-top: 4%; }
.pt5p  { padding-top: 5%; }

.mt1p  { margin-top: 1%; }
.mt2p  { margin-top: 2%; }
.mt3p  { margin-top: 3%; }
.mt4p  { margin-top: 4%; }
.mt5p  { margin-top: 5%; }
.mt6p  { margin-top: 6%; }
.mt7p  { margin-top: 7%; }
.mt8p  { margin-top: 8%; }
.mt9p  { margin-top: 9%; }
.mt10p { margin-top: 10%; }

.mb1p  { margin-bottom: 1%; }
.mb2p  { margin-bottom: 2%; }
.mb3p  { margin-bottom: 3%; }
.mb4p  { margin-bottom: 4%; }
.mb5p  { margin-bottom: 5%; }

/* width */
.wid0   { width:  0; }
.wid5   { width:  5px  !important; }
.wid10  { width:  10px !important; }
.wid15  { width:  15px !important; }
.wid20  { width:  20px !important; }
.wid25  { width:  25px !important; }
.wid30  { width:  30px !important; }
.wid35  { width:  35px !important; }
.wid40  { width:  40px !important; }
.wid45  { width:  45px !important; }
.wid50  { width:  50px !important; }
.wid55  { width:  55px !important; }
.wid60  { width:  60px !important; }
.wid65  { width:  65px !important; }
.wid70  { width:  70px !important; }
.wid75  { width:  75px !important; }
.wid80  { width:  80px !important; }
.wid85  { width:  85px !important; }
.wid90  { width:  90px !important; }
.wid95  { width:  95px !important; }
.wid100 { width: 100px !important; }
.wid105 { width: 105px !important; }
.wid110 { width: 110px !important; }
.wid115 { width: 115px !important; }
.wid120 { width: 120px !important; }
.wid125 { width: 125px !important; }
.wid130 { width: 130px !important; }
.wid135 { width: 135px !important; }
.wid140 { width: 140px !important; }
.wid145 { width: 145px !important; }
.wid150 { width: 150px !important; }
.wid155 { width: 155px !important; }
.wid160 { width: 160px !important; }
.wid165 { width: 165px !important; }
.wid170 { width: 170px !important; }
.wid175 { width: 175px !important; }
.wid180 { width: 180px !important; }
.wid185 { width: 185px !important; }
.wid190 { width: 190px !important; }
.wid195 { width: 195px !important; }
.wid200 { width: 200px !important; }
.wid205 { width: 205px !important; }
.wid210 { width: 210px !important; }
.wid215 { width: 215px !important; }
.wid220 { width: 220px !important; }
.wid225 { width: 225px !important; }
.wid230 { width: 230px !important; }
.wid235 { width: 235px !important; }
.wid240 { width: 240px !important; }
.wid245 { width: 245px !important; }
.wid250 { width: 250px !important; }
.wid255 { width: 255px !important; }
.wid260 { width: 260px !important; }
.wid265 { width: 265px !important; }
.wid270 { width: 270px !important; }
.wid275 { width: 275px !important; }
.wid280 { width: 280px !important; }
.wid285 { width: 285px !important; }
.wid290 { width: 290px !important; }
.wid295 { width: 295px !important; }
.wid300 { width: 300px !important; }
.wid305 { width: 305px !important; }
.wid310 { width: 310px !important; }
.wid315 { width: 315px !important; }
.wid320 { width: 320px !important; }
.wid325 { width: 325px !important; }
.wid330 { width: 330px !important; }
.wid335 { width: 335px !important; }
.wid340 { width: 340px !important; }
.wid345 { width: 345px !important; }
.wid350 { width: 350px !important; }
.wid355 { width: 355px !important; }
.wid360 { width: 360px !important; }
.wid365 { width: 365px !important; }
.wid370 { width: 370px !important; }
.wid375 { width: 375px !important; }
.wid380 { width: 380px !important; }
.wid385 { width: 385px !important; }
.wid390 { width: 390px !important; }
.wid395 { width: 395px !important; }
.wid400 { width: 400px !important; }

.wid100p { width: 100% !important; }
.wid95p { width: 95% !important; }
.wid90p { width: 90% !important; }
.wid85p { width: 85% !important; }
.wid80p { width: 80% !important; }
.wid75p { width: 75% !important; }
.wid70p { width: 70% !important; }
.wid65p { width: 65% !important; }
.wid60p { width: 60% !important; }
.wid55p { width: 55% !important; }
.wid50p { width: 50% !important; }
.wid45p { width: 45% !important; }
.wid40p { width: 40% !important; }
.wid35p { width: 35% !important; }
.wid30p { width: 30% !important; }
.wid25p { width: 25% !important; }
.wid20p { width: 20% !important; }
.wid15p { width: 15% !important; }
.wid10p { width: 10% !important; }
.wid5p { width: 5% !important; }

/* opacity */
.opacity01 { opacity: 0.1 !important; }
.opacity02 { opacity: 0.2 !important; }
.opacity03 { opacity: 0.3 !important; }
.opacity04 { opacity: 0.4 !important; }
.opacity05 { opacity: 0.5 !important; }
.opacity06 { opacity: 0.6 !important; }
.opacity07 { opacity: 0.7 !important; }
.opacity08 { opacity: 0.8 !important; }
.opacity09 { opacity: 0.9 !important; }
.opacity10 { opacity: 1 !important; }

/* min-width */
.min-w50  { min-width:  50px !important; }
.min-w75  { min-width:  75px !important; }
.min-w100 { min-width: 100px !important; }
.min-w150 { min-width: 150px !important; }
.min-w200 { min-width: 200px !important; }
.min-w250 { min-width: 250px !important; }
.min-w280 { min-width: 280px !important; }


/* cursor */
.cursor-pointer { cursor: pointer !important; }

/* pkt要素の幅指定 */
[id^="pkt"] { width: 6.25% !important; }

/* field + ボタン横並び（input は .field 直下のままデザイン継承） */
.field-with-button {
  flex-direction: row;
  flex-wrap: wrap;
}
.field-with-button > label {
  width: 100%;
}
.field-with-button > input {
  flex: 1;
  min-width: 0;
}

/* label 内に span（注意書き等）があるときの input 位置ずれ防止：ラベル行の高さを統一 */
.field.border.small > label {
  line-height: 1.25rem;
  min-height: 1.25rem;
}

/* .field.suffix で先頭が label のとき、アイコンを select 行に合わせる */
.field.suffix.border.small:has(> label:first-child) > i {
  inset: calc(1.25rem + var(--_middle) - 0.75rem) 1rem auto auto;
}

/* フィールドと高さを揃えた枠（チェック・ラジオ等を上下中央配置） */
.box-field-height {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
/* .field.border 内で input と同じ見た目（枠線・角丸・余白） */
.field.border .box-field-height {
  border: 0.0625rem solid var(--outline);
  border-radius: inherit;
  padding: 0 0.9375rem;
}

/* スイッチ用フィールド（ラベルと枠を他 .field.border.small と統一・全画面で利用） */
.field-switch-field { display: block; }
.field-switch-field > label { display: block; margin-bottom: 0; line-height: 1.25rem; min-height: 1.25rem; }
.field-switch-field > .field { margin-block-start: 0 !important; }
.field-switch-field .nav,
.white.field.border-a.small .nav {
  display: flex;
  align-items: center;
  width: 100%;
}
.field-switch-field .nav .max,
.white.field.border-a.small .nav .max { flex: 1; min-width: 0; }

/* ファイルアップロード（進捗・ドロップオーバーレイ） */
.upload-progress-wrap { padding: 0.75rem 1rem; }
.upload-progress-percent { text-align: right; font-size: 0.875rem; margin-bottom: 0.35rem; color: var(--on-surface-variant); }
.upload-progress-track { width: 100%; height: 8px; background: var(--field); border-radius: 1rem; overflow: hidden; }
.upload-progress-fill { height: 100%; width: 0%; background: var(--primary); border-radius: 1rem; transition: width 0.1s; }
.drop-overlay-wrap { position: relative; }
.drop-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--primary); border-radius: var(--radius); background: var(--surface-variant); color: var(--primary); font-size: 0.875rem; z-index: 1; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.drop-overlay.is-visible { opacity: 1; pointer-events: auto; }

/* ファイル一覧（エクスプローラー中アイコン風） */
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: 0.75rem; }
.file-item { padding: 0.5rem; text-align: center; box-sizing: border-box; }
.file-item:hover { background: var(--surface-variant); }
.file-item-icon { width: 4rem; height: 4rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.file-item-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-item-name { font-size: 0.75rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 0.25rem; max-width: 100%; }
.file-item-name a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }

/* nav.bottom のボタン: サイズの max / 固定幅を解除 */
nav.bottom > a:not(.button, .chip) {
  inline-size: auto !important;
  min-inline-size: min-content !important;
  max-inline-size: none !important;
}