@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=M+PLUS+1p:wght@500&display=swap"); /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } html { font-size: 100px; height: 100%; } body { font-family: "Noto Sans JP", "メイリオ", "Meiryo", sans-serif; width: 100%; height: 100%; min-width: 375px; font-size: 0.16rem; font-weight: 400; display: flex; flex-direction: column; min-height: 100vh; background-color: #f7f8f9; color: #333333; overflow-x: hidden; } main { padding-inline-start: 2.5rem; margin-block-start: 0.5rem; } @media screen and (max-width:1280px) { main { grid-template-columns: 1fr; padding-inline-start: 0; margin-block-start: 0.6rem; } } img { width: 100%; height: auto; } a:hover { cursor: pointer; } * { word-break: break-all; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .l-header { display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(0.2rem, 0.16rem + 0.96vw, 0.3rem); background-color: #ffffff; border-bottom: 0.01rem solid #ebebeb; position: fixed; width: 100%; z-index: 9999; min-height: 0.5rem; } @media screen and (max-width:1280px) { .l-header { min-height: 0.6rem; } } .l-header__logo { display: grid; grid-template-columns: 1fr; width: 2rem; } @media screen and (max-width:578px) { .l-header__logo { width: 1.4rem; } } .l-header__user { gap: 0.1rem; position: relative; } .l-header__user--name { display: flex; align-items: center; justify-content: flex-start; gap: 0.05rem; cursor: pointer; padding-inline-end: 0.2rem; } @media screen and (max-width:1280px) { .l-header__user--name { margin-inline-end: 0.3rem; } } .l-header__user--name::before { content: url("../img/icons/user.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } .l-header__user--name::after { margin-inline-start: 0.1rem; content: url("../img/icons/arrow-black.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } .l-header__user--name:hover + .l-header__user--menu { display: block; transition: 0.2s; } .l-header__user--menu { position: absolute; right: 0.3rem; border: 0.01rem solid #ebebeb; width: 1.5rem; background-color: #ffffff; filter: drop-shadow(1px 1px 10px rgba(41, 41, 41, 0.1)); border-radius: 0.05rem; display: none; transition: 0.2s; } .l-header__user--menu:hover { transition: 0.2s; display: block; } .l-header__user--menu .header-link { padding: 0.1rem; width: 100%; } .l-header__user--menu .header-link:hover { background-color: #ebebeb; } .l-header__hamburger { display: none; width: 0.25rem; } @media screen and (max-width:1280px) { .l-header__hamburger { display: grid; position: absolute; right: 0.2rem; grid-template-columns: 1fr; gap: 0.07rem; } } .l-header__hamburger--line { width: 100%; height: 0.02rem; border-radius: 0.02rem; display: block; background-color: #818181; transition: 0.2s; } .l-header__hamburger:is(.is-active) .l-header__hamburger--line { transition: 0.2s; position: absolute; top: 0; } .l-header__hamburger:is(.is-active) .l-header__hamburger--line:nth-child(1) { transform: rotate(45deg); } .l-header__hamburger:is(.is-active) .l-header__hamburger--line:nth-child(2) { display: none; } .l-header__hamburger:is(.is-active) .l-header__hamburger--line:nth-child(3) { transform: rotate(-45deg); } nav { position: fixed; z-index: 1000; left: 0; top: 0.5rem; height: 100%; overflow-y: auto; background-color: #3a4652; } @media screen and (max-width:1280px) { nav { transition: 0.2s; transform: translateX(-100%); top: 0.6rem; } } nav:is(.is-active) { transition: 0.2s; transform: translateX(0); } nav .l-sidemenu { width: 2.5rem; min-width: 2.5rem; color: #ffffff; font-size: 0.15rem; padding-block-end: 0.6rem; } nav .l-sidemenu__item { padding: 0.07rem; } nav .l-sidemenu__item:is(.current) { font-weight: bold; background-color: #01a654; } nav .l-sidemenu__item:hover .l-sidemenu__item--link { background-color: rgba(255, 255, 255, 0.2); } nav .l-sidemenu__item--link { display: flex; align-items: center; justify-content: flex-start; gap: 0.08rem; padding: 0.08rem 0.08rem 0.08rem 0.1rem; border-radius: 0.05rem; } nav .l-sidemenu__item--link:is(.top-icon)::before { content: url("../img/icons/top.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } nav .l-sidemenu__item--link:is(.project-list-icon)::before { content: url("../img/icons/project-list.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } nav .l-sidemenu__item--link:is(.project-create-icon)::before { content: url("../img/icons/project-create.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } nav .l-sidemenu__item--link:is(.report-list-icon)::before { content: url("../img/icons/report-list.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } nav .l-sidemenu__item--link:is(.request-list-icon)::before { content: url("../img/icons/request-list.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } nav .l-sidemenu__item--link:is(.report-create-icon)::before { content: url("../img/icons/report-create.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } nav .l-sidemenu__item--link:is(.flow-list-icon)::before { content: url("../img/icons/flow-list.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } nav .l-sidemenu__item--link:is(.flow-create-icon)::before { content: url("../img/icons/flow-create.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } nav .l-sidemenu__item--link:is(.user-list-icon)::before { content: url("../img/icons/user-list.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } nav .l-sidemenu__item--link:is(.user-create-icon)::before { content: url("../img/icons/user-create.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } nav .l-sidemenu__item--link:is(.fron-manage-icon)::before { content: url("../img/icons/fron-manage.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } .l-content { width: 100%; margin-block-end: clamp(0.4rem, 0.32rem + 1.92vw, 0.6rem); margin-inline: auto; padding-inline: clamp(0.2rem, 0.12rem + 1.92vw, 0.4rem); max-width: 15.5rem; } .l-content:after { visibility: hidden; opacity: 0; width: 0; height: 0; } .l-content:is(.hamburger-open) { overflow: hidden; height: calc(100vh - 1.2rem); } .l-content:is(.hamburger-open):after { transition: 0.2s; content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; inset: 0; visibility: visible; opacity: 1; } .l-content section + section { margin-block-start: clamp(0.2rem, 0.16rem + 0.96vw, 0.3rem); } .c-page-title { font-size: clamp(0.18rem, 0.17rem + 0.19vw, 0.2rem); font-weight: bold; margin-block: clamp(0.1rem, 0.06rem + 0.96vw, 0.2rem); } .c-sub-title { display: inline-block; font-size: clamp(0.16rem, 0.15rem + 0.19vw, 0.18rem); font-weight: bold; display: flex; align-items: center; justify-content: flex-start; gap: 0.08rem; } .c-sub-title:is(.flow-list-icon)::before { content: url("../img/icons/flow-list-green.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } .c-sub-title:is(.project-list-icon)::before { content: url("../img/icons/project-list-green.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } .c-sub-title:is(.report-create-icon)::before { content: url("../img/icons/report-create-green.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } .c-sub-title:is(.report-list-icon)::before { content: url("../img/icons/report-list-green.svg"); display: inline-block; width: 0.2rem; height: 0.2rem; } .c-nodata { background-color: #ebebeb; display: block; padding: 0.2rem; border-radius: 0.05rem; margin-block: 0.1rem; } .c-total-data { font-size: clamp(0.16rem, 0.15rem + 0.19vw, 0.18rem); } .c-table { margin-block: 0.15rem; overflow-x: auto; filter: drop-shadow(1px 0px 10px rgba(53, 53, 53, 0.1)); } .c-table table { font-size: 0.15rem; min-width: 11rem; width: 100%; border-radius: 0.05rem; } .c-table table:is(.table-small) { min-width: 6rem; } .c-table table thead { background-color: #ffffff; border-bottom: 0.02rem solid #01a654; } .c-table table thead th { border-right: 0.01rem solid #ebebeb; color: #01a654; font-weight: bold; padding: 0.08rem; text-align: center; } .c-table table tbody th { border-right: 0.01rem solid #ebebeb; color: #01a654; font-weight: bold; text-align: center; vertical-align: middle; padding: 0.08rem; } .c-table table tbody tr { background-color: #ffffff; border-bottom: 0.01rem solid #ebebeb; } .c-table table tbody tr:hover { cursor: default; } .c-table table tbody tr:hover td { background-color: #e8f6f1; } .c-table table tbody tr:has(input:checked) { background-color: rgba(176, 226, 201, 0.5); } .c-table table tbody tr:last-child { border-bottom: none; } .c-table table tbody tr td { border-right: 0.01rem solid #ebebeb; padding: clamp(0.03rem, 0.02rem + 0.29vw, 0.06rem); vertical-align: middle; } .c-table table tbody tr:has(td[rowspan]) + tr:hover td { background-color: #ffffff; } .c-table table tbody tr:has(td[rowspan]):hover + tr { background-color: #e8f6f1; } .c-table table tbody tr:is(.c-table__add-tr) { background-color: transparent; } .c-table table tbody tr:is(.c-table__add-tr):hover td { background-color: transparent; } .c-table table tbody tr:is(.c-table__add-tr) td { border-color: transparent; padding-inline: 0; padding-block-start: 0.1rem; } .c-table table tbody tr:is(.c-table__add-tr) .add-line { width: 2rem; filter: none; } .c-table table tbody tr:first-of-type .delete-line { visibility: hidden; } @media screen and (max-width:578px) { .c-table table tbody tr:first-of-type .delete-line { display: none; } } .c-table table tfoot { text-align: right; } .c-table table tfoot td { border-right: 0.01rem solid #ebebeb; padding: clamp(0.03rem, 0.02rem + 0.29vw, 0.06rem); vertical-align: middle; background-color: #ffffff; } .c-table table tfoot tr { border-top: 0.01rem solid #ebebeb; } .c-table table tfoot .total { border-top: 0.04rem double #01a654; font-weight: bold; } .c-pagination { display: flex; align-items: center; justify-content: center; gap: 0.05rem; } .c-pagination__item { background-color: #ffffff; font-weight: bold; width: 0.35rem; height: 0.35rem; color: #818181; border-radius: 0.05rem; transition: 0.2s; filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.15)); display: flex; align-items: center; justify-content: center; } .c-pagination__item:hover { cursor: pointer; transform: scale(1.15); } .c-pagination__item:is(.active) { color: #ffffff; transition: 0.2s; background-color: #01a654; } .c-pagination__item:first-child:before { content: ""; display: inline-block; width: 0.3rem; height: 0.3rem; background-image: url("../img/icons/breadcrumb.svg"); background-size: 0.15rem; background-position: center center; background-repeat: no-repeat; transform: rotate(180deg); } .c-pagination__item:last-child::before { content: ""; display: inline-block; width: 0.3rem; height: 0.3rem; background-image: url("../img/icons/breadcrumb.svg"); background-size: 0.15rem; background-position: center center; background-repeat: no-repeat; } .c-pagination__item:is(.inactive):hover { transform: scale(1); cursor: default; } .c-pagination__item:is(.inactive)::before { opacity: 0.3; } .c-pagination__dot { color: #818181; } .c-button { border-radius: 0.05rem; background-color: #01a654; color: #ffffff; padding: clamp(0.05rem, 0.04rem + 0.29vw, 0.08rem) clamp(0.05rem, 0.03rem + 0.48vw, 0.1rem); text-align: center; filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.15)); transition: 0.2s; font-size: clamp(0.15rem, 0.15rem + 0.1vw, 0.16rem); display: inline-block; } .c-button:hover { opacity: 0.8; transition: 0.2s; } .c-button:focus { outline: 2px solid #007BFF; outline-offset: 2px; } .c-button__gray { background-color: #818181; } .c-button__orange { background-color: #ed7b23; } .c-button__blue { background-color: #0093c1; } .c-button__bg-white { background-color: #ffffff; color: #01a654; border: 0.02rem solid #01a654; font-weight: bold; min-width: 1.5rem; } .c-button__bg-white:hover { filter: none; } .c-button__bg-white:is(.pdf) { display: flex; align-items: center; justify-content: center; gap: 0.05rem; min-width: 2rem; } .c-button__bg-white:is(.pdf)::before { content: ""; display: inline-block; width: 0.25rem; height: 0.25rem; background-image: url("../img/icons/pdf.svg"); background-size: cover; background-position: center center; background-repeat: no-repeat; } .c-button:is(.auth) { min-width: 3rem; display: block; } .c-button:is(.add-line) { font-size: 0.15rem; background-color: #ffffff; border: 0.01rem solid #01a654; color: #01a654; padding: 0.07rem clamp(0.05rem, 0.03rem + 0.48vw, 0.1rem); } @media screen and (max-width:578px) { .c-button:is(.add-line) { width: 100%; } } .c-button:is(.delete-line) { font-size: 0.15rem; background-color: #818181; border: 0.01rem solid #818181; padding: 0.07rem clamp(0.05rem, 0.03rem + 0.48vw, 0.1rem); word-break: keep-all; } @media screen and (max-width:578px) { .c-button:is(.delete-line) { width: 100%; } } .c-table-button { word-break: keep-all; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.05rem; font-weight: 400; } .c-table-button__item { border-radius: 0.05rem; background-color: #01a654; color: #ffffff; padding: 0.05rem clamp(0.03rem, 0.01rem + 0.48vw, 0.08rem); text-align: center; filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.15)); transition: 0.2s; font-size: clamp(0.13rem, 0.12rem + 0.19vw, 0.15rem); display: flex; align-items: center; justify-content: center; border: 0.01rem solid transparent; } .c-table-button__item:hover { opacity: 0.8; transition: 0.2s; } .c-table-button__item:is(.blue) { background-color: #0093c1; } .c-table-button__item:is(.bg-white) { color: #01a654; border-color: #01a654; background-color: #ffffff; } .c-table-button__item:is(.gray) { background-color: #818181; } .c-display-button { width: 100%; display: block; background-color: #ffffff; padding: 0.1rem; text-align: center; color: #01a654; text-decoration: underline; cursor: pointer; border-top: 0.02rem solid #ebebeb; border-bottom-left-radius: 0.05rem; border-bottom-right-radius: 0.05rem; transition: 0.2s; margin-block-start: -0.15rem; } .c-display-button:hover { text-decoration: none; border-color: #01a654; transition: 0.2s; } .c-cancel-button { text-decoration: underline; margin-block-start: clamp(0.1rem, 0.06rem + 0.96vw, 0.2rem); color: #818181; display: block; } .c-cancel-button:hover { opacity: 0.8; transition: 0.2s; } .c-button-flex { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.1rem; margin-block-start: 0.3rem; } @media screen and (max-width:769px) { .c-button-flex { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width:578px) { .c-button-flex { grid-template-columns: 1fr; } } .c-status { display: flex; align-items: center; justify-content: center; } .c-status__label { border-radius: 0.05rem; padding: 0.03rem clamp(0.03rem, 0rem + 0.67vw, 0.1rem); color: #ffffff; font-size: 0.14rem; text-align: center; max-width: 1rem; } .c-status__label:is(.waiting) { background-color: #ea1e1e; } .c-status__label:is(.cancel) { background-color: #818181; } .c-status__label:is(.return) { background-color: #ed7b23; } .c-status__label:is(.complete) { background-color: #0093c1; } .c-status__no-status { display: flex; align-items: center; justify-content: center; } .c-status__no-status::before { content: ""; display: inline-block; width: 0.1rem; height: 0.02rem; background-color: #cccccc; } .c-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(0.1rem, 0.08rem + 0.48vw, 0.15rem) clamp(0.1rem, 0.02rem + 1.92vw, 0.3rem); background-color: #ffffff; filter: drop-shadow(1px 1px 10px rgba(41, 41, 41, 0.1)); border-radius: 0.05rem; padding: clamp(0.15rem, 0.13rem + 0.48vw, 0.2rem) clamp(0.2rem, 0.12rem + 1.92vw, 0.4rem); } .c-form__button { margin-block-start: clamp(0.15rem, 0.13rem + 0.48vw, 0.2rem); width: 100%; letter-spacing: 0.02rem; max-width: 2.8rem; } @media screen and (max-width:578px) { .c-form__button { max-width: none; } } .c-input { position: relative; } .c-input__label { display: block; font-weight: bold; font-size: 0.14rem; word-break: keep-all; margin-block-end: 0.05rem; text-align: left; } .c-input__img { border: 0.01rem solid #ebebeb; width: 2.5rem; display: block; } @media screen and (max-width:578px) { .c-input__img { width: 100%; } } .c-input input, .c-input textarea, .c-input select { border: 0.01rem solid #ebebeb; border-radius: 0.05rem; width: 100%; font-weight: normal; background-color: #f7f8f9; padding: clamp(0.05rem, 0.04rem + 0.19vw, 0.07rem) clamp(0.07rem, 0.06rem + 0.29vw, 0.1rem); } .c-input input:focus, .c-input textarea:focus, .c-input select:focus { outline: 0.02rem solid #dedede; } .c-input input, .c-input select { height: 0.4rem; } .c-input input[readonly] { border: none; background-color: transparent; padding: 0; } .c-input input[readonly]:focus { outline: none; } .c-input__unit { width: 100%; display: flex; align-items: center; justify-content: flex-start; } .c-input__unit span { word-break: keep-all; margin-inline-start: 10px; } .c-input__select { position: relative; width: 100%; font-size: 0.14rem; } .c-input__select select { height: 100%; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; text-align: left; } .c-input__select select:invalid { color: #cccccc; } .c-input__select select option { color: #333333; } .c-input__select::after { content: ""; background-image: url("../img/icons/arrow-dark-gray.svg"); background-size: contain; background-repeat: no-repeat; display: inline-block; width: 15px; height: 15px; position: absolute; right: 0.05rem; top: 0.1rem; pointer-events: none; } .c-checkbox-button { cursor: pointer; color: #000000; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.03rem; width: 100%; font-size: 0.14rem; } @media screen and (max-width:1440px) { .c-checkbox-button { grid-template-columns: repeat(2, 1fr); } } .c-checkbox-button:is(.template-columns2) { grid-template-columns: repeat(2, 1fr); } @media screen and (max-width:1280px) { .c-checkbox-button:is(.template-columns2) { grid-template-columns: 1fr; } } .c-checkbox-button input { display: none; } .c-checkbox-button input:checked + label { background-color: rgba(1, 166, 84, 0.2); border-color: #01a654; color: #333333; font-weight: bold; } .c-checkbox-button__label { margin-block-end: 0; padding: 0.07rem 0.05rem; border: 0.01rem solid #ebebeb; background-color: #f7f8f9; color: #bfbfbf; border-radius: 5px; text-align: center; } .c-checkbox { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 0.1rem 0; } .c-checkbox__item { display: flex; align-items: center; justify-content: flex-start; gap: 0 5px; } .c-checkbox__item input { padding: 0; width: 0.25rem; height: 0.25rem; border-radius: 0.05rem; background-color: #cccccc; border: 0.01rem solid #ebebeb; display: flex; align-items: center; justify-content: center; } .c-checkbox__item input:checked { background-color: #01a654; border-color: #01a654; } .c-checkbox__item input:checked::before { content: ""; display: block; width: 0.14rem; height: 0.08rem; border-radius: 0.01rem; border-left: 0.03rem solid #ffffff; border-bottom: 0.03rem solid #ffffff; transform: rotate(-45deg); margin-block-end: 0.02rem; } .c-checkbox__item input:focus { outline: none; } .c-checkbox__item label { border-radius: 0.05rem; text-align: center; margin: 0; } .c-checkbox__item:not(:last-child) { margin-inline-end: 20px; } .c-file input[type=file] { all: revert; display: block; border-radius: 0.05rem; cursor: pointer; font-size: 0.14rem; font-family: "Noto Sans JP"; } .c-file input[type=file]::file-selector-button { cursor: pointer; font-size: 0.14rem; color: #686868; background-color: #f7f8f9; border-radius: 0.05rem; height: 0.4rem; padding-inline: 0.1rem; border: 0.01rem solid #cccccc; filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.15)); margin-inline-end: 0.1rem; font-family: "Noto Sans JP"; } .c-file__preview { margin-block-start: 0.1rem; position: relative; width: 2.5rem; } .c-file__preview img { border: 0.01rem solid #ebebeb; } @media screen and (max-width:578px) { .c-file__preview img { width: 100%; } } .c-file__preview--delete { position: absolute; top: -0.1rem; right: -0.1rem; } .c-file__preview--delete::after { content: "×"; display: flex; align-items: center; justify-content: center; font-size: 0.18rem; width: 0.3rem; height: 0.3rem; background-color: #ffffff; border: 0.01rem solid #818181; border-radius: 50%; font-weight: bold; color: #818181; transition: 0.2s; } .c-file__preview--delete:hover::after { color: #ffffff; background-color: #818181; transition: 0.2s; } .c-file__multiple { font-size: 0.14rem; font-weight: 500; } .c-file__multiple:not(:last-child) { margin-block-end: 0.2rem; } .c-file__multiple input[type=file] { margin-block-start: 0.05rem; } .c-file label { display: block; font-weight: bold; font-size: 0.15rem; word-break: keep-all; margin-block-end: 0.05rem; } .c-file:is(.c-table-button) { margin-inline: auto; } .c-file:is(.c-table-button) input[type=file] { text-align: center; width: 1.4rem; } .c-file:is(.c-table-button) input[type=file]::file-selector-button { height: 0.3rem; padding-inline: 0.1rem; display: block; font-size: 0.14rem; margin-inline: auto; margin-block-end: 0.05rem; } input[type=number] { text-align: right; } input[type=date] { position: relative; } input[type=date]::-webkit-calendar-picker-indicator { background: transparent; z-index: 1; cursor: pointer; } input[type=date]::after { content: ""; background-image: url("../img/icons/calendar.svg"); background-repeat: no-repeat; background-size: contain; background-position: 0 0; width: 18px; height: 18px; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); } input[type=time] { position: relative; } input[type=time]::-webkit-calendar-picker-indicator { background: transparent; z-index: 1; cursor: pointer; } input[type=time]::after { content: ""; background-image: url("../img/icons/clock.svg"); background-repeat: no-repeat; background-size: contain; background-position: 0 0; width: 18px; height: 18px; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); } .c-time-period { display: flex; align-items: center; justify-content: flex-start; gap: 0.05rem; width: 100%; } .c-input-flex { display: flex; align-items: center; justify-content: flex-start; gap: 0.08rem; } @media screen and (max-width:578px) { .c-input-flex { flex-wrap: wrap; } } .c-input-flex:first-of-type .delete-line { visibility: hidden; } @media screen and (max-width:578px) { .c-input-flex:first-of-type .delete-line { display: none; } } @media screen and (max-width:578px) { .c-input-flex { border-bottom: 0.01rem dotted #818181; padding-block-end: 0.1rem; } } .c-input-grid { display: grid; grid-template-columns: 1fr 0.5fr 0.7rem; align-items: center; gap: 0.05rem; width: 100%; } .c-input-grid input { height: 100%; } .c-input-grid:first-of-type .delete-line { visibility: hidden; } @media screen and (max-width:578px) { .c-input-grid:first-of-type .delete-line { display: none; } } .c-error input, .c-error textarea, .c-error select { background-color: #ffeeee; border: 0.01rem solid #ea1e1e; } .c-error:is(.c-file) input[type=file] { background-color: transparent; border: none; color: #ea1e1e; } .c-error:is(.c-file) input[type=file]::file-selector-button { color: #ea1e1e; background-color: #ffeeee; border-color: #ea1e1e; } .c-error__message { color: #ea1e1e; margin-block-start: 0.03rem; font-size: 0.14rem; } .l-content .multiselect input { border: none; } .l-content .multiselect .multiselect__select:before { top: 75%; } .c-breadcrumb { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 0.05rem 0.1rem; padding-block: 0.1rem; color: #818181; font-size: 0.14rem; width: 100%; border-bottom: 0.01rem solid #cccccc; margin-block-end: 0.1rem; } .c-breadcrumb .current { color: #01bf61; } .c-breadcrumb__item { display: flex; align-items: center; justify-content: flex-start; gap: 0.1rem; } .c-breadcrumb__item:not(:last-child)::after { content: url("../img/icons/breadcrumb.svg"); display: inline-block; width: 0.1rem; height: 0.1rem; display: flex; align-items: center; justify-content: center; } .c-breadcrumb a:hover { text-decoration: underline; } .p-top__menu-block--head { display: flex; align-items: center; justify-content: space-between; gap: 0.05rem; flex-wrap: wrap; } .p-top__menu-block--head .c-button { width: clamp(2.3rem, 2.22rem + 1.92vw, 2.5rem); } @media screen and (max-width:578px) { .p-top__menu-block--head { display: grid; } } .p-search .c-form__button { margin-inline: auto; } .p-auth { margin: auto; } .p-auth__head { margin-block-end: 0.25rem; text-align: center; } .p-auth__head--logo { display: block; max-width: 3.2rem; margin-inline: auto; } .p-auth__head--title { font-family: "M+PLUS+1p"; font-weight: 500; font-size: clamp(0.18rem, 0.16rem + 0.58vw, 0.24rem); margin-block-start: 0.1rem; } .p-auth .c-form { width: clamp(3.4rem, 2.4rem + 25vw, 6rem); padding: clamp(0.3rem, 0.22rem + 1.92vw, 0.5rem) clamp(0.2rem, 0.05rem + 3.85vw, 0.6rem); } .p-auth__button { margin: auto; text-align: center; display: block; } .p-auth__button .c-cancel-button { display: inline-block; } .p-photo-list__item { display: grid; grid-template-columns: 1fr 2fr; gap: 0.05rem 0.2rem; margin-block-start: 0.2rem; background-color: #ffffff; padding: clamp(0.2rem, 0.12rem + 1.92vw, 0.4rem) clamp(0.2rem, 0.08rem + 2.88vw, 0.5rem); position: relative; border-radius: 0.05rem; border: 0.02rem solid #ebebeb; } @media screen and (max-width:578px) { .p-photo-list__item { grid-template-columns: 1fr; } } .p-photo-list__item--img { border-radius: 0.05rem; max-width: 5rem; max-height: clamp(2rem, 1.81rem + 4.81vw, 2.5rem); -o-object-fit: cover; object-fit: cover; height: 100%; width: 100%; } .p-photo-list__item--text textarea { height: 100%; } .p-photo-list__item:has(input:checked) { background-color: #def0e9; border-color: #01a654; } .p-photo-list__item:has(input:checked) textarea { background-color: #ffffff; } .p-photo-list__item .c-checkbox { position: absolute; top: -0.02rem; left: 0; } .p-photo-list__item .c-checkbox input { width: 0.4rem; height: 0.4rem; } .p-photo-list__item .selection-order { display: none; position: absolute; top: 0.1rem; right: 0.1rem; width: 1.5em; height: 1.5em; background-color: #01a654; color: #ffffff; border-radius: 50%; align-items: center; justify-content: center; font-weight: bold; font-size: 0.14rem; z-index: 10; } .p-photo-list__item[data-selected="true"] .selection-order { display: flex; } .p-photo-list__item[data-dragging="true"] { opacity: 0.5; transform: scale(0.98); transition: opacity 0.2s, transform 0.2s; } .p-photo-list__item.drop-indicator-before { border-top: 3px solid #01a654; } .p-photo-list__item.drop-indicator-after { border-bottom: 3px solid #01a654; } .p-photo-list__buttons { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; flex-wrap: wrap; margin-block-start: 0.3rem; gap: 0.08rem 0.1rem; max-width: 10rem; } @media screen and (max-width:578px) { .p-photo-list__buttons { grid-template-columns: 1fr; } } body:has(.p-photo-add.is-active) { background-color: #ffffff; } main:has(.p-photo-add.is-active) { overflow-y: hidden; } .p-photo-add { display: flex; justify-content: center; align-items: flex-start; width: 100%; height: 100%; width: -webkit-fill-available; height: -webkit-fill-available; transition: all 1s; position: absolute; inset: 0; z-index: 10000; display: none; } .p-photo-add:is(.is-active) { display: block; } .p-photo-add__popup { background-color: #ffffff; padding: clamp(0.15rem, 0.13rem + 0.48vw, 0.2rem) clamp(0.2rem, 0.12rem + 1.92vw, 0.4rem); width: 100%; height: 100%; width: -webkit-fill-available; height: -webkit-fill-available; } .p-photo-add__popup--close { width: clamp(0.3rem, 0.22rem + 1.92vw, 0.5rem); height: clamp(0.3rem, 0.22rem + 1.92vw, 0.5rem); border: 0.01rem solid #818181; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; } .p-photo-add__popup--close:hover { background-color: #818181; } .p-photo-add__popup--close:hover .close-line { background-color: #ffffff; } .p-photo-add__popup--close .close-line { width: 60%; height: 0.02rem; border-radius: 0.02rem; position: absolute; top: 50%; background-color: #818181; transition: 0.2s; } .p-photo-add__popup--close .close-line:nth-child(1) { transform: rotate(45deg); } .p-photo-add__popup--close .close-line:nth-child(2) { transform: rotate(-45deg); } .p-photo-add__popup--text { font-size: clamp(0.14rem, 0.13rem + 0.19vw, 0.16rem); margin-block-end: 0.2rem; } .p-photo-add__popup--gallery { display: grid; align-items: center; grid-template-columns: repeat(10, 1fr); gap: clamp(0.01rem, 0rem + 0.19vw, 0.03rem); } @media screen and (max-width:1440px) { .p-photo-add__popup--gallery { grid-template-columns: repeat(8, 1fr); } } @media screen and (max-width:1280px) { .p-photo-add__popup--gallery { grid-template-columns: repeat(6, 1fr); } } @media screen and (max-width:769px) { .p-photo-add__popup--gallery { grid-template-columns: repeat(4, 1fr); } } @media screen and (max-width:578px) { .p-photo-add__popup--gallery { grid-template-columns: repeat(3, 1fr); } } .p-photo-add__popup--gallery li { overflow: hidden; position: relative; border: 0.01rem solid #ebebeb; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .p-photo-add__popup--gallery li .select-order { width: clamp(0.28rem, 0.23rem + 1.15vw, 0.4rem); height: clamp(0.28rem, 0.23rem + 1.15vw, 0.4rem); background-color: #ffffff; border: 0.01rem solid #cccccc; border-radius: 50%; position: absolute; right: 0.05rem; top: 0.05rem; display: flex; align-items: center; justify-content: center; font-weight: bold; z-index: 1; font-size: clamp(0.14rem, 0.13rem + 0.19vw, 0.16rem); } .p-photo-add__popup--gallery div:is(.selected) { border-color: #01a654; } .p-photo-add__popup--gallery div:is(.selected) .select-order { background-color: #01bf61; border-color: #ffffff; color: #ffffff; } .p-photo-add__popup--gallery div:is(.selected)::after { content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); position: absolute; inset: 0; } .p-photo-add__popup--gallery img { -o-object-fit: contain; object-fit: contain; } .p-photo-add__popup--button { display: block; margin: clamp(0.3rem, 0.22rem + 1.92vw, 0.5rem) auto; width: 100%; max-width: 4rem; } .p-photo-add .scroll-area { height: 100%; width: 100%; } .p-photo-add .scroll-area .scroll-inner { padding-block-end: clamp(0.3rem, 0.03rem + 6.73vw, 1rem); } .p-fron-manage__item { margin-block-end: clamp(0.2rem, 0.12rem + 1.92vw, 0.4rem); } .p-fron-manage__item .c-sub-title { border-left: 0.05rem solid #01a654; padding-inline-start: 0.08rem; margin-block-end: 0.1rem; } .p-fron-manage__item .c-button { min-width: 2rem; } .p-fron-manage__item--info .flex-info-items { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 0 0.2rem; } .p-fron-manage__item--info .info-item { font-size: 0.15rem; font-weight: bold; margin-block-end: 0.05rem; } .p-fron-manage__item--info .info-item .info-label { font-weight: normal; color: #818181; } .p-fron-manage__item--info .fron-status-wrapper { display: flex; align-items: center; justify-content: flex-start; gap: 0.1rem; } .p-fron-manage__item--info .fron-status-wrapper .c-checkbox { display: flex; align-items: center; justify-content: center; gap: 0.1rem; font-size: 0.15rem; } .p-fron-manage__item--info .fron-status-wrapper .c-checkbox__item { color: #818181; background-color: #ebebeb; border: 0.01rem solid #cccccc; border-radius: 0.05rem; margin: 0; } .p-fron-manage__item--info .fron-status-wrapper .c-checkbox__item label { display: flex; align-items: center; justify-content: center; padding: 0.05rem 0.2rem; gap: 0.05rem; } .p-fron-manage__item--info .fron-status-wrapper .c-checkbox__item input { border-radius: 50%; } .p-fron-manage__item--info .fron-status-wrapper .c-checkbox__item:has(input:checked) { color: #333333; background-color: rgba(1, 166, 84, 0.2); border-color: #01a654; } main:has(.p-request-create.is-active) { overflow-y: hidden; } .p-request-create { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; width: -webkit-fill-available; height: -webkit-fill-available; background-color: rgba(0, 0, 0, 0.4); transition: all 1s; position: fixed; inset: 0; z-index: 10000; display: none; } .p-request-create:is(.is-active) { display: flex; } .p-request-create__popup { width: 100%; width: -webkit-fill-available; max-width: 16rem; overflow: hidden; height: 90%; margin: clamp(0.2rem, 0.12rem + 1.92vw, 0.4rem); background-color: #f7f8f9; filter: drop-shadow(1px 1px 10px rgba(41, 41, 41, 0.1)); border-radius: 0.05rem; padding: clamp(0.2rem, 0.12rem + 1.92vw, 0.4rem); } .p-request-create__popup--close { width: clamp(0.3rem, 0.22rem + 1.92vw, 0.5rem); height: clamp(0.3rem, 0.22rem + 1.92vw, 0.5rem); border: 0.01rem solid #818181; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; } .p-request-create__popup--close:hover { background-color: #818181; } .p-request-create__popup--close:hover .close-line { background-color: #ffffff; } .p-request-create__popup--close .close-line { width: 60%; height: 0.02rem; border-radius: 0.02rem; position: absolute; top: 50%; background-color: #818181; transition: 0.2s; } .p-request-create__popup--close .close-line:nth-child(1) { transform: rotate(45deg); } .p-request-create__popup--close .close-line:nth-child(2) { transform: rotate(-45deg); } .p-request-create__popup--form .form { background-color: #ffffff; display: grid; grid-template-columns: 1fr 1fr; border-radius: 0.05rem; padding: 0.2rem; gap: clamp(0.1rem, 0.08rem + 0.48vw, 0.15rem) clamp(0.1rem, 0.02rem + 1.92vw, 0.3rem); } @media screen and (max-width:769px) { .p-request-create__popup--form .form { display: block; width: 100%; text-align: center; } .p-request-create__popup--form .form fieldset { margin-block-end: 0.1rem; } } .p-request-create__popup--form .form .request-button { grid-column: span 2; max-width: 3rem; display: block; width: 100%; margin-inline: auto; margin-block-start: 0.15rem; text-align: center; } .p-request-create__popup--form .form .request-button button { display: block; width: 100%; } .p-request-create__popup--table .c-checkbox { justify-content: center; } .p-request-create__popup--table .c-checkbox input { width: 0.3rem; height: 0.3rem; } .p-request-create__popup--button { display: block; margin: clamp(0.3rem, 0.22rem + 1.92vw, 0.5rem) auto; width: 100%; max-width: 4rem; } .p-request-create .scroll-area { height: 100%; width: 100%; overflow-y: auto; } .p-request-create .scroll-area .scroll-inner { margin-inline-end: 0.1rem; padding-block-end: clamp(0.3rem, 0.03rem + 6.73vw, 1rem); } main:has(.p-loading) { overflow: hidden; } .p-loading { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; width: -webkit-fill-available; height: -webkit-fill-available; background-color: rgba(0, 0, 0, 0.4); transition: all 1s; position: fixed; inset: 0; z-index: 10000; } .p-loading__loader { border-radius: 50%; width: 10em; height: 10em; margin: 60px auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 0.08rem solid #01d96e; border-right: 0.08rem solid #01d96e; border-bottom: 0.08rem solid #01d96e; border-left: 0.08rem solid #ffffff; transform: translateZ(0); animation: loading-animation 0.6s infinite linear; } .p-loading::after { border-radius: 50%; width: 10em; height: 10em; } @keyframes loading-animation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .p-flow__button-wrapper { display: flex; align-items: center; justify-content: space-between; } @media screen and (max-width:578px) { .p-flow__button-wrapper { display: block; } .p-flow__button-wrapper .c-button { width: 100%; margin-block-end: 0.1rem; } } .p-flow__button-wrapper--left { min-width: 1.5rem; } .p-flow__button-wrapper--right .return-button { min-width: 1rem; } .p-flow__button-wrapper--right .approval-button { min-width: 1.5rem; } .p-error__content { background-color: #ffffff; filter: drop-shadow(1px 1px 10px rgba(41, 41, 41, 0.1)); border-radius: 0.05rem; margin: auto; padding: clamp(0.3rem, 0.22rem + 1.92vw, 0.5rem) clamp(0.2rem, 0.12rem + 1.92vw, 0.4rem); text-align: center; } .p-error__content--message { margin-block-end: 0.3rem; } .p-error__content--button { width: 3rem; } /* a,button -------------------------------------*/ a { display: block; cursor: pointer; } button { cursor: pointer; } /* text-align -------------------------------------*/ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /* font-weight -------------------------------------*/ .font-bold { font-weight: bold; } .font-normal { font-weight: normal; } /* font-size -------------------------------------*/ .fs40 { font-size: 0.4rem; } .fs30 { font-size: 0.3rem; } .fs20 { font-size: 0.2rem; } .fs18 { font-size: 0.18rem; } .fs16 { font-size: 0.16rem; } .fs14 { font-size: 0.14rem; } .fs12 { font-size: 0.12rem; } .fs10 { font-size: 0.1rem; } .fs8 { font-size: 0.08rem; } /* margin -------------------------------------*/ .ma { margin: auto; } .mx-auto { margin-inline: auto; } .mt0 { margin-block-start: 0; } .mt5 { margin-block-start: 0.05rem; } .mt10 { margin-block-start: 0.1rem; } .mt15 { margin-block-start: 0.15rem; } .mt20 { margin-block-start: 0.2rem; } .mt25 { margin-block-start: 0.25rem; } .mt30 { margin-block-start: 0.3rem; } .mt35 { margin-block-start: 0.35rem; } .mt40 { margin-block-start: 0.4rem; } .mt45 { margin-block-start: 0.45rem; } .mt50 { margin-block-start: 0.5rem; } .mb0 { margin-block-end: 0; } .mb5 { margin-block-end: 0.05rem; } .mb10 { margin-block-end: 0.1rem; } .mb15 { margin-block-end: 0.15rem; } .mb20 { margin-block-end: 0.2rem; } .mb25 { margin-block-end: 0.25rem; } .mb30 { margin-block-end: 0.3rem; } .mb35 { margin-block-end: 0.35rem; } .mb40 { margin-block-end: 0.4rem; } .mb45 { margin-block-end: 0.45rem; } .mb50 { margin-block-end: 0.5rem; } .ml0 { margin-inline-start: 0; } .ml5 { margin-inline-start: 0.05rem; } .ml10 { margin-inline-start: 0.1rem; } .ml15 { margin-inline-start: 0.15rem; } .ml20 { margin-inline-start: 0.2rem; } .ml25 { margin-inline-start: 0.25rem; } .ml30 { margin-inline-start: 0.3rem; } .ml35 { margin-inline-start: 0.35rem; } .ml40 { margin-inline-start: 0.4rem; } .ml45 { margin-inline-start: 0.45rem; } .ml50 { margin-inline-start: 0.5rem; } .mr0 { margin-inline-end: 0; } .mr5 { margin-inline-end: 0.05rem; } .mr10 { margin-inline-end: 0.1rem; } .mr15 { margin-inline-end: 0.15rem; } .mr20 { margin-inline-end: 0.2rem; } .mr25 { margin-inline-end: 0.25rem; } .mr30 { margin-inline-end: 0.3rem; } .mr35 { margin-inline-end: 0.35rem; } .mr40 { margin-inline-end: 0.4rem; } .mr45 { margin-inline-end: 0.45rem; } .mr50 { margin-inline-end: 0.5rem; } /* padding -------------------------------------*/ .pt0 { padding-block-start: 0; } .pt5 { padding-block-start: 0.05rem; } .pt10 { padding-block-start: 0.1rem; } .pt15 { padding-block-start: 0.15rem; } .pt20 { padding-block-start: 0.2rem; } .pt25 { padding-block-start: 0.25rem; } .pt30 { padding-block-start: 0.3rem; } .pt35 { padding-block-start: 0.35rem; } .pt40 { padding-block-start: 0.4rem; } .pt45 { padding-block-start: 0.45rem; } .pt50 { padding-block-start: 0.5rem; } .pb0 { padding-block-end: 0; } .pb5 { padding-block-end: 0.05rem; } .pb10 { padding-block-end: 0.1rem; } .pb15 { padding-block-end: 0.15rem; } .pb20 { padding-block-end: 0.2rem; } .pb25 { padding-block-end: 0.25rem; } .pb30 { padding-block-end: 0.3rem; } .pb35 { padding-block-end: 0.35rem; } .pb40 { padding-block-end: 0.4rem; } .pb45 { padding-block-end: 0.45rem; } .pb50 { padding-block-end: 0.5rem; } .pl0 { padding-inline-start: 0px; } .pl5 { padding-inline-start: 0.05rem; } .pl10 { padding-inline-start: 0.1rem; } .pl15 { padding-inline-start: 0.15rem; } .pl20 { padding-inline-start: 0.2rem; } .pl25 { padding-inline-start: 0.25rem; } .pl30 { padding-inline-start: 0.3rem; } .pl35 { padding-inline-start: 0.35rem; } .pl40 { padding-inline-start: 0.4rem; } .pl45 { padding-inline-start: 0.45rem; } .pl50 { padding-inline-start: 0.5rem; } .pr0 { padding-inline-end: 0px; } .pr5 { padding-inline-end: 0.05rem; } .pr10 { padding-inline-end: 0.1rem; } .pr15 { padding-inline-end: 0.15rem; } .pr20 { padding-inline-end: 0.2rem; } .pr25 { padding-inline-end: 0.25rem; } .pr30 { padding-inline-end: 0.3rem; } .pr35 { padding-inline-end: 0.35rem; } .pr40 { padding-inline-end: 0.4rem; } .pr45 { padding-inline-end: 0.45rem; } .pr50 { padding-inline-end: 0.5rem; } /* width % -------------------------------------*/ .w5p { width: 5%; } .w10p { width: 10%; } .w15p { width: 15%; } .w20p { width: 20%; } .w25p { width: 25%; } .w30p { width: 30%; } .w35p { width: 35%; } .w40p { width: 40%; } .w50p { width: 50%; } .w60p { width: 60%; } .w70p { width: 70%; } .w80p { width: 80%; } .w90p { width: 90%; } .w100p { width: 100%; } /* width px -------------------------------------*/ .w100 { width: 100px; } .w200 { width: 200px; } .w300 { width: 300px; } .w400 { width: 400px; } .w500 { width: 500px; } /* white-space -------------------------------------*/ .whitespace-pre-wrap { white-space: pre-wrap; } .whitespace-nowrap { white-space: nowrap; } /* text-overflow -------------------------------------*/ .txt-of { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /* justify-content,align-items -------------------------------------*/ .justify-between { justify-content: space-between; } .justify-end { justify-content: end; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .items-center { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; align-items: center; } .items-end { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; align-items: end; } /* flex -------------------------------------*/ .flex { display: flex; } .inline-flex { display: inline-flex; } .block { display: block; } .hidden { display: none; } .block_center { margin-inline-start: auto; margin-inline-end: auto; display: block; } .pc-only { display: block; } .sp-only { display: none; } @media screen and (max-width: 768px) { .pc-only { display: none; } .sp-only { display: block; } } .row1 { grid-row: span 1; } .row2 { grid-row: span 2; } .row3 { grid-row: span 3; } .col1 { grid-column: span 1; } @media screen and (max-width:769px) { .col1 { grid-column: span 3; } } .col2 { grid-column: span 2; } @media screen and (max-width:769px) { .col2 { grid-column: span 3; } } .col3 { grid-column: span 3; } .col4 { grid-column: span 3; } .col-half { width: 50%; } @media screen and (max-width:769px) { .col-half { width: 100%; } } .col-quarter { width: 25%; } @media screen and (max-width:1280px) { .col-quarter { width: 50%; } } @media screen and (max-width:578px) { .col-quarter { width: 100%; } } .u-flex-between { display: flex; align-items: center; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.1rem; margin-block-end: 0.1rem; } .u-flex-start { display: flex; align-items: center; justify-content: flex-start; gap: 0.2rem; } .u-flex-end { display: flex; align-items: center; justify-content: flex-end; gap: 0.15rem; } .u-button-flow { display: grid; grid-template-columns: 2.5rem 1.3rem; gap: 0.1rem; } @media screen and (max-width:578px) { .u-button-flow { grid-template-columns: 1fr; } } .u-grid-3 { display: grid; grid-template-columns: 2fr 1fr; } .text-underline { text-decoration: underline; }/*# sourceMappingURL=style.css.map */