@charset "UTF-8"; /*-------------------------------------------------------------- # 変数 # from _variables.scss --------------------------------------------------------------*/ /*-------------------------------------------------------------- # スペース --------------------------------------------------------------*/ /*-------------------------------------------------------------- # オプション # # Quickly modify global styling by enabling or disabling optional features. --------------------------------------------------------------*/ /*-------------------------------------------------------------- # カラーシステム --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Body # # Settings for the `` element. --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Links # # Style anchor elements. --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Grid columns # # Set the number of columns and specify the width of the gutters. --------------------------------------------------------------*/ .row.gutters-1 { margin-right: -1px; margin-left: -1px; } .row.gutters-1 > .col, .row.gutters-1 > [class*=col-] { padding-right: 1px; padding-left: 1px; } .row.gutters-2 { margin-right: -2px; margin-left: -2px; } .row.gutters-2 > .col, .row.gutters-2 > [class*=col-] { padding-right: 2px; padding-left: 2px; } .row.gutters-3 { margin-right: -3px; margin-left: -3px; } .row.gutters-3 > .col, .row.gutters-3 > [class*=col-] { padding-right: 3px; padding-left: 3px; } .row.gutters-4 { margin-right: -4px; margin-left: -4px; } .row.gutters-4 > .col, .row.gutters-4 > [class*=col-] { padding-right: 4px; padding-left: 4px; } .row.gutters-5 { margin-right: -5px; margin-left: -5px; } .row.gutters-5 > .col, .row.gutters-5 > [class*=col-] { padding-right: 5px; padding-left: 5px; } .row.gutters-6 { margin-right: -6px; margin-left: -6px; } .row.gutters-6 > .col, .row.gutters-6 > [class*=col-] { padding-right: 6px; padding-left: 6px; } .row.gutters-7 { margin-right: -7px; margin-left: -7px; } .row.gutters-7 > .col, .row.gutters-7 > [class*=col-] { padding-right: 7px; padding-left: 7px; } .row.gutters-8 { margin-right: -8px; margin-left: -8px; } .row.gutters-8 > .col, .row.gutters-8 > [class*=col-] { padding-right: 8px; padding-left: 8px; } .row.gutters-9 { margin-right: -9px; margin-left: -9px; } .row.gutters-9 > .col, .row.gutters-9 > [class*=col-] { padding-right: 9px; padding-left: 9px; } .row.gutters-10 { margin-right: -10px; margin-left: -10px; } .row.gutters-10 > .col, .row.gutters-10 > [class*=col-] { padding-right: 10px; padding-left: 10px; } .row.gutters-11 { margin-right: -11px; margin-left: -11px; } .row.gutters-11 > .col, .row.gutters-11 > [class*=col-] { padding-right: 11px; padding-left: 11px; } .row.gutters-12 { margin-right: -12px; margin-left: -12px; } .row.gutters-12 > .col, .row.gutters-12 > [class*=col-] { padding-right: 12px; padding-left: 12px; } .row.gutters-13 { margin-right: -13px; margin-left: -13px; } .row.gutters-13 > .col, .row.gutters-13 > [class*=col-] { padding-right: 13px; padding-left: 13px; } .row.gutters-14 { margin-right: -14px; margin-left: -14px; } .row.gutters-14 > .col, .row.gutters-14 > [class*=col-] { padding-right: 14px; padding-left: 14px; } /*-------------------------------------------------------------- # Navbar # # Color etc. --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Forms --------------------------------------------------------------*/ /*-------------------------------------------------------------- # btn --------------------------------------------------------------*/ .btn-base { border: none; } /*-------------------------------------------------------------- # フォント # # Font, line-height, and color for body text, headings, and more. --------------------------------------------------------------*/ /*-------------------------------------------------------------- # border --------------------------------------------------------------*/ .b-style-double.border-top { border-top-style: double !important; } .b-style-double.border-right { border-right-style: double !important; } .b-style-double.border-bottom { border-bottom-style: double !important; } .b-style-double.border-left { border-left-style: double !important; } .b-style-groove.border-top { border-top-style: groove !important; } .b-style-groove.border-right { border-right-style: groove !important; } .b-style-groove.border-bottom { border-bottom-style: groove !important; } .b-style-groove.border-left { border-left-style: groove !important; } .b-style-ridge.border-top { border-top-style: ridge !important; } .b-style-ridge.border-right { border-right-style: ridge !important; } .b-style-ridge.border-bottom { border-bottom-style: ridge !important; } .b-style-ridge.border-left { border-left-style: ridge !important; } .b-style-inset.border-top { border-top-style: inset !important; } .b-style-inset.border-right { border-right-style: inset !important; } .b-style-inset.border-bottom { border-bottom-style: inset !important; } .b-style-inset.border-left { border-left-style: inset !important; } .b-style-outset.border-top { border-top-style: outset !important; } .b-style-outset.border-right { border-right-style: outset !important; } .b-style-outset.border-bottom { border-bottom-style: outset !important; } .b-style-outset.border-left { border-left-style: outset !important; } .b-style-dashed.border-top { border-top-style: dashed !important; } .b-style-dashed.border-right { border-right-style: dashed !important; } .b-style-dashed.border-bottom { border-bottom-style: dashed !important; } .b-style-dashed.border-left { border-left-style: dashed !important; } .b-style-dotted.border-top { border-top-style: dotted !important; } .b-style-dotted.border-right { border-right-style: dotted !important; } .b-style-dotted.border-bottom { border-bottom-style: dotted !important; } .b-style-dotted.border-left { border-left-style: dotted !important; } .bw-1.border-top { border-top-width: 1px !important; } .bw-1.border-right { border-right-width: 1px !important; } .bw-1.border-bottom { border-bottom-width: 1px !important; } .bw-1.border-left { border-left-width: 1px !important; } .bw-2.border-top { border-top-width: 2px !important; } .bw-2.border-right { border-right-width: 2px !important; } .bw-2.border-bottom { border-bottom-width: 2px !important; } .bw-2.border-left { border-left-width: 2px !important; } .bw-3.border-top { border-top-width: 3px !important; } .bw-3.border-right { border-right-width: 3px !important; } .bw-3.border-bottom { border-bottom-width: 3px !important; } .bw-3.border-left { border-left-width: 3px !important; } .bw-4.border-top { border-top-width: 4px !important; } .bw-4.border-right { border-right-width: 4px !important; } .bw-4.border-bottom { border-bottom-width: 4px !important; } .bw-4.border-left { border-left-width: 4px !important; } .bw-5.border-top { border-top-width: 5px !important; } .bw-5.border-right { border-right-width: 5px !important; } .bw-5.border-bottom { border-bottom-width: 5px !important; } .bw-5.border-left { border-left-width: 5px !important; } .bw-6.border-top { border-top-width: 6px !important; } .bw-6.border-right { border-right-width: 6px !important; } .bw-6.border-bottom { border-bottom-width: 6px !important; } .bw-6.border-left { border-left-width: 6px !important; } .bw-7.border-top { border-top-width: 7px !important; } .bw-7.border-right { border-right-width: 7px !important; } .bw-7.border-bottom { border-bottom-width: 7px !important; } .bw-7.border-left { border-left-width: 7px !important; } .bw-8.border-top { border-top-width: 8px !important; } .bw-8.border-right { border-right-width: 8px !important; } .bw-8.border-bottom { border-bottom-width: 8px !important; } .bw-8.border-left { border-left-width: 8px !important; } .bw-9.border-top { border-top-width: 9px !important; } .bw-9.border-right { border-right-width: 9px !important; } .bw-9.border-bottom { border-bottom-width: 9px !important; } .bw-9.border-left { border-left-width: 9px !important; } .bw-10.border-top { border-top-width: 10px !important; } .bw-10.border-right { border-right-width: 10px !important; } .bw-10.border-bottom { border-bottom-width: 10px !important; } .bw-10.border-left { border-left-width: 10px !important; } .mw-25 { max-width: 25% !important; } .mw-50 { max-width: 50% !important; } .mw-75 { max-width: 75% !important; } .mw-100 { max-width: 100% !important; } .mw-auto { max-width: auto !important; } .mh-25 { max-height: 25% !important; } .mh-50 { max-height: 50% !important; } .mh-75 { max-height: 75% !important; } .mh-100 { max-height: 100% !important; } .mh-auto { max-height: auto !important; } /*-------------------------------------------------------------- # 各種変数 --------------------------------------------------------------*/ /*-------------------------------------------------------------- # 独自の変数 # _variables.scss --------------------------------------------------------------*/ .fs-1 { font-size: 0.0625rem !important; } .fs-2 { font-size: 0.125rem !important; } .fs-3 { font-size: 0.1875rem !important; } .fs-4 { font-size: 0.25rem !important; } .fs-5 { font-size: 0.3125rem !important; } .fs-6 { font-size: 0.375rem !important; } .fs-7 { font-size: 0.4375rem !important; } .fs-8 { font-size: 0.5rem !important; } .fs-9 { font-size: 0.5625rem !important; } .fs-10 { font-size: 0.625rem !important; } .fs-11 { font-size: 0.6875rem !important; } .fs-12 { font-size: 0.75rem !important; } .fs-13 { font-size: 0.8125rem !important; } .fs-14 { font-size: 0.875rem !important; } .fs-15 { font-size: 0.9375rem !important; } .fs-16 { font-size: 1rem !important; } .fs-17 { font-size: 1.0625rem !important; } .fs-18 { font-size: 1.125rem !important; } .fs-19 { font-size: 1.1875rem !important; } .fs-20 { font-size: 1.25rem !important; } .fs-21 { font-size: 1.3125rem !important; } .fs-22 { font-size: 1.375rem !important; } .fs-23 { font-size: 1.4375rem !important; } .fs-24 { font-size: 1.5rem !important; } .fs-25 { font-size: 1.5625rem !important; } .fs-26 { font-size: 1.625rem !important; } .fs-27 { font-size: 1.6875rem !important; } .fs-28 { font-size: 1.75rem !important; } .fs-29 { font-size: 1.8125rem !important; } .fs-30 { font-size: 1.875rem !important; } .fs-31 { font-size: 1.9375rem !important; } .fs-32 { font-size: 2rem !important; } .fs-33 { font-size: 2.0625rem !important; } .fs-34 { font-size: 2.125rem !important; } .fs-35 { font-size: 2.1875rem !important; } .fs-36 { font-size: 2.25rem !important; } .fs-37 { font-size: 2.3125rem !important; } .fs-38 { font-size: 2.375rem !important; } .fs-39 { font-size: 2.4375rem !important; } .fs-40 { font-size: 2.5rem !important; } .lh-10 { line-height: 1; } .lh-11 { line-height: 1.1; } .lh-12 { line-height: 1.2; } .lh-13 { line-height: 1.3; } .lh-14 { line-height: 1.4; } .lh-15 { line-height: 1.5; } .lh-16 { line-height: 1.6; } .lh-17 { line-height: 1.7; } .lh-18 { line-height: 1.8; } .lh-19 { line-height: 1.9; } .lh-20 { line-height: 2; } .ls-1 { letter-spacing: 1px; } .ls-2 { letter-spacing: 2px; } .ls-3 { letter-spacing: 3px; } .ls-4 { letter-spacing: 4px; } .ls-5 { letter-spacing: 5px; } .ls-6 { letter-spacing: 6px; } .ls-7 { letter-spacing: 7px; } .ls-8 { letter-spacing: 8px; } .ls-9 { letter-spacing: 9px; } .ls-10 { letter-spacing: 10px; } /*-------------------------------------------------------------- # 独自のミックスイン # _mixins.scss --------------------------------------------------------------*/ /*-------------------------------------------------------------- # よく使う便利なクラスの詰め合わせ --------------------------------------------------------------*/ /*-------------------------------------------------------------- # よく使う便利なクラスの詰め合わせ --------------------------------------------------------------*/ /*-------------------------------------------------------------- # 文字 --------------------------------------------------------------*/ .fa_style, .wpcf7 .wpcf7-response-output:before, .fa-sup:before, .fa-sup:after, .btn-arrow::after { display: inline-block; font: normal normal normal 14px/1 "Font Awesome 5 Pro"; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cleartype { -webkit-transform-origin: 0 0; -webkit-transform: scale(1, 1.01); -moz-transform-origin: 0 0; -moz-transform: scale(1, 1.01); -ms-transform-origin: 0 0; -ms-transform: scale(1, 1.02); /* IE9だけ1.02 */ -o-transform-origin: 0 0; -o-transform: scale(1, 1.01); } .text-stroke-white { text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; } .text-stroke-black { text-shadow: 0 1px 0 #000, 1px 0 0 #000, 0 -1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } /*-------------------------------------------------------------- # ボタン --------------------------------------------------------------*/ .btn-solid { border-radius: 0; } .btn-pill { border-radius: 50em; } .btn-arrow { text-align: left; white-space: normal; } .btn-arrow::after { float: right; content: ""; padding: 0 0 0 2rem; margin: 0; font-size: 1.25em; opacity: 0.9; } /*-------------------------------------------------------------- # バッジ --------------------------------------------------------------*/ .badge-solid { border-radius: 0; } /*-------------------------------------------------------------- # 画像 --------------------------------------------------------------*/ .img-full { width: 100%; height: auto; display: block; } .bg-cover-center { background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; } .bg-cover-right { background-position: right center; background-size: cover; background-repeat: no-repeat; } .bg-cover-left { background-position: left center; background-size: cover; background-repeat: no-repeat; } .img-border { border: 4px solid #BCC0D1; } /*-------------------------------------------------------------- # リスト --------------------------------------------------------------*/ /* .list-bordered ------------------------------------- */ .list-bordered { padding-left: 0; list-style-position: inside; } .list-bordered li { padding-bottom: 0.25em; border-bottom: 1px solid #BCC0D1; padding-left: 0.25em; margin-top: 0.5em; } /* .dl-bordered ------------------------------------- */ .dl-bordered dd { border-bottom: 1px solid #BCC0D1; } /* .dl-bordered ------------------------------------- */ /*-------------------------------------------------------------- # テーブル --------------------------------------------------------------*/ /*-------------------------------------------------------------- # ボーダー --------------------------------------------------------------*/ /*-------------------------------------------------------------- # アイコン --------------------------------------------------------------*/ .before-caret-right:before, .before-caret-up:before, .before-caret-down:before, .before-angle-right:before { padding-right: 0.5em; } .before-caret-right:after, .before-caret-up:after, .before-caret-down:after, .before-angle-right:after { padding-left: 0.5em; } .before-caret-right:before, .after-caret-right:after { content: ""; } .before-caret-up:before, .after-caret-up:after { content: ""; } .before-caret-down:before, .after-caret-down:after { content: ""; } .before-angle-right:before, .after-angle-right:after { content: ""; } /*-------------------------------------------------------------- # 共通パーツ --------------------------------------------------------------*/ .row-bordered { padding-left: 15px; padding-right: 15px; } .row-bordered.no-gutters { padding-left: 0; padding-right: 0; } .row-bordered > [class*=col] { border-bottom: 1px solid #e9ecef; padding-bottom: 0.8rem; padding-top: 0.4rem; margin-bottom: 0; margin-top: 0.4rem; } .row-bordered dt { font-weight: bold; } .row-bordered dd { font-weight: normal; } .vertical-center:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; margin-right: -0.5%; } .vertical-center-content { display: inline-block; vertical-align: middle; } /* 画像を全画面に表示 ------------------------------------- * 使い方の例：

SECTION TITLE

LEAD TEXT

Button

*/ body > * { background-size: cover; background-repeat: none; background-position: center; } .cover .container, .cover .container-fluid { min-height: 100% !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* 画像を要素にフィット ------------------------------------- * 使い方の例：

投稿タイトルが入ります

この文章はダミーテキストです。文字の大きさ・字間・行間などを確認するために入れています。
この文章はダミーテキストです。文字の大きさ・字間・行間などを確認するために入れています。
この文章はダミーテキストです。文字の大きさ・字間・行間などを確認するために入れています。

詳細を見る

投稿タイトルが入ります

詳細を見る

*/ .image-fill { position: relative; display: block; background-color: transparent; } .image-fill a:hover { opacity: 0.8; } .image-fill-background-image { z-index: 1; position: relative; background-image: none; } /* filter overlay */ .image-fill-opaque-dark { color: inherit; } @media (min-width: 992px) { .image-fill-height { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .image-fill-background-image { z-index: -1; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: inherit; background-size: cover; background-position: center; } .image-fill-background-image.fixed { background-attachment: fixed; } .image-fill-background-video-wrapper { overflow: hidden; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } .image-fill-background-video-wrapper .video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* filter overlay */ .image-fill-opaque-dark { background-color: rgba(0, 0, 0, 0.7) !important; color: white; } .image-fill-opaque-dark a { color: white; } .image-fill-opaque-light { background-color: rgba(255, 255, 255, 0.7) !important; } } .section-fill-height { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .section-fill-height .background-image { z-index: -1; position: absolute; top: 0px; left: 0px; width: 100%; height: 68vw; background-image: inherit; background-size: cover; background-position: center; } @media (min-width: 992px) { .section-fill-height .background-image { background-size: 992px; background-repeat: no-repeat; height: 100%; background-color: #000; } } body.home .section-fill-height .background-image { height: 100%; } .section-opaque-light { background-color: rgba(255, 255, 255, 0.8); } .section-opaque-dark { background-color: rgba(0, 0, 0, 0.25); } .section-opaque-black { background-color: rgba(0, 0, 0, 0.5); } /*-------------------------------------------------------------- # PLUGIN: Contact Form 7 --------------------------------------------------------------*/ .wpcf7 { margin-top: 3em; } .wpcf7 .wpcf7-response-output:before { font-size: 1.25em; line-height: 1.25; } .wpcf7 .wpcf7-mail-sent-ok:before { content: " "; } .wpcf7 .wpcf7-mail-sent-ng:before { content: " "; } .wpcf7 .wpcf7-validation-errors:before { content: " "; } .wpcf7 .has-error .form-control { border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .wpcf7 .has-error .checkbox, .wpcf7 .has-error .checkbox-inline, .wpcf7 .has-error .control-label, .wpcf7 .has-error .form-control-feedback, .wpcf7 .has-error .help-block, .wpcf7 .has-error .radio, .wpcf7 .has-error .radio-inline, .wpcf7 .has-error.checkbox label, .wpcf7 .has-error.checkbox-inline label, .wpcf7 .has-error.radio label, .wpcf7 .has-error.radio-inline label { color: #a94442; } .wpcf7 .help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; } .wpcf7 .wpcf7-response-output { padding: 15px; margin-bottom: 20px; margin: 2em 0; border: 1px solid transparent; border-radius: 4px; } .wpcf7 .wpcf7-validation-errors { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .wpcf7 .wpcf7-mail-sent-ok { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .wpcf7 .required { font-size: 0.85em; font-weight: normal; } .wpcf7 label { font-weight: 700; padding: 0.5rem 0.75rem; } .wpcf7 .radio label, .wpcf7 .checkbox label { font-weight: inherit; } .wpcf7 img.ajax-loader { display: none; } .wpcf7 .wpcf7-form .form-group:last-child { margin-bottom: 0; } .wpcf7 .wpcf7-not-valid-tip { color: #a94442; font-size: 0.9rem; } .wpcf7 .wpcf7-list-item { margin-left: 0; margin-right: 0.5em; } .wpcf7 .contact__form__checkbox { padding: 0.5rem 0.75rem; } .wpcf7 .wpcf7-form-control.wpcf7-acceptance { margin-top: 0; } /*-------------------------------------------------------------- # container-full --------------------------------------------------------------*/ .container-full { width: 100vw; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media (max-width: 991.98px) { .container-full-sm { width: 100vw; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media (max-width: 991.98px) { .container-full-md { width: 100vw; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .selectWrap { position: relative; } .selectWrap::after { position: absolute; right: 1rem; top: 0; bottom: 0; font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; margin: auto; height: 1.5rem; } .selectWrap select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0 8px; height: calc(1.75rem + 2px); } /*offcanvas*/ .offcanvas-collapse { position: fixed; top: 56px; /* Height of navbar */ bottom: 0; left: 100%; width: 100%; overflow-y: auto; visibility: hidden; background-color: #343a40; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: left, visibility; transition-property: left, visibility; } .offcanvas-collapse.open { left: 0; visibility: visible; } .nav-scroller { position: relative; z-index: 2; height: 2.75rem; overflow-y: hidden; } .nav-scroller .nav { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding-bottom: 1rem; margin-top: -1px; overflow-x: auto; color: rgba(255, 255, 255, 0.75); text-align: center; white-space: nowrap; -webkit-overflow-scrolling: touch; } .nav-underline .nav-link { padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: 0.875rem; color: #6c757d; } .nav-underline .nav-link::hover { color: #007bff; } .nav-underline .nav-link .active { font-weight: 500; color: #343a40; } .text-white-50 { color: rgba(255, 255, 255, 0.5); } .lh-100 { line-height: 1; } .lh-125 { line-height: 1.25; } .lh-150 { line-height: 1.5; } .keyword input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; border: 0; min-height: 36px; padding: 0 15px; } /*-------------------------------------------------------------- # 各ページ用 --------------------------------------------------------------*/ /*-------------------------------------------------------------- # 各ページで使う定義 --------------------------------------------------------------*/ /*-------------------------------------------------------------- # 各ページ : home # body.home --------------------------------------------------------------*/ body.home { background: -webkit-gradient(linear, left top, right top, from(#005ECC), to(#004290)); background: linear-gradient(to right, #005ECC, #004290); } body.home div[class*=link-icon] a { display: block; padding-top: 2.5rem; padding-bottom: 1.625rem; margin-top: 1rem; margin-bottom: 1rem; color: #fff; font-size: 1.0714285714rem; } body.home div[class*=link-icon] a i[class*=fa-] { display: block; font-size: 2.75rem; margin: 0 auto 0.75rem; position: relative; } body.home div[class*=link-icon] .badge { font-size: 12px; font-weight: bold; min-width: 25px; height: 25px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; z-index: 1; top: -10px; left: 55%; } body.home .link-icon01 a i[class*=fa-] { color: #C9E2FF; } body.home .link-icon02 a i[class*=fa-] { color: #FFB8AF; } body.home .link-icon03 a i[class*=fa-] { color: #FFD45F; } body.home .link-icon04 a i[class*=fa-] { color: #1CA30A; } body.home .link-icon05 a i[class*=fa-] { color: #6EEFFF; } body.home .link-icon06 a i[class*=fa-] { color: #D6ACD6; } body.home .link-icon07 a i[class*=fa-] { color: #FFFBA2; } body.home .link-icon08 a i[class*=fa-] { color: #ABFFA8; } body.home .link-icon09 a i[class*=fa-] { color: #C9E2FF; } /*-------------------------------------------------------------- # 各ページ : login # body.login --------------------------------------------------------------*/ body.login .login-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100vh; } body.login .login-content form { margin-top: 3.125rem; } body.login .login-content form .btn { margin-top: 1.875rem; } /*-------------------------------------------------------------- # 各ページ : 経営指標閲覧見込系失注 # body.cancel --------------------------------------------------------------*/ body.cancel .expected-total .expected-status { color: #979797; } body.cancel .table-style1 th { background-color: rgba(208, 214, 221, 0.99); } /*-------------------------------------------------------------- # 各ページ : 経営指標閲覧見込残未処理 # body.incomplete --------------------------------------------------------------*/ body.incomplete .expected-total { color: #C70000; } body.incomplete .expected-total .expected-status { color: #C70000; } body.incomplete h6 .text-red { color: #C70000 !important; } body.incomplete .table-style1 th { background-color: rgba(252, 95, 95, 0.5); } body.incomplete .table-style1 tbody th { border-bottom: 5px solid #fff; font-size: 1.2857142857rem; } body.incomplete .table-style1 tbody td { background-color: #ffeaea; color: #C70000; } body.incomplete .table-style1 tbody td a { color: #C70000; -webkit-filter: none; filter: none; } body.incomplete .table-style1 tbody td.active { background-color: rgba(252, 95, 95, 0.5); } /*-------------------------------------------------------------- # 各ページ : XXXXX # body.page-XXXXX --------------------------------------------------------------*/ /*-------------------------------------------------------------- # ベース --------------------------------------------------------------*/ /*-------------------------------------------------------------- # ベース --------------------------------------------------------------*/ /*------------------------------------------------------------- # 基本設定 -------------------------------------------------------------*/ body { font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Helvetica Neue", Helvetica, Arial, sans-serif, "游ゴシック", YuGothic, "メイリオ", "Meiryo"; overflow-y: scroll; color: #3A3A3A; background: #fff; } body img { max-width: 100%; } @media (min-width: 992px) { body { font-size: 1.125rem; } } a { color: #0058FF; text-decoration: none; } a:focus, a:hover { color: #003eb3; text-decoration: none; } a:focus img, a:hover img { opacity: 0.8; } a.disabled { pointer-events: none; color: #E6E6E6; } a:hover { opacity: 0.8; } p { line-height: 1.25; } span.yen { color: #3A3A3A; font-weight: normal !important; } .selected-date { color: #888; font-weight: bold; font-size: 0.7142857143rem; } a.warning { display: block; font-size: 1.2142857143rem; font-weight: bold; color: #F60D0D; } .modal { z-index: 99999; } /*-------------------------------------------------------------- # 見出し --------------------------------------------------------------*/ h3 { font-size: 1.1428571429rem; font-family: "HiraKakuProN-W6", "ヒラギノ角ゴ ProN W6", sans-serif; margin-bottom: 1.5rem; } h4 { font-size: 1.0714285714rem; overflow: hidden; text-align: center; margin-bottom: 1rem; } h4 span { position: relative; display: inline-block; margin: 0 2.5em; padding: 0 1em; text-align: left; } h4 span::before, h4 span::after { position: absolute; top: 50%; content: ""; width: 400%; height: 2px; background-color: rgba(136, 136, 136, 0.3); } h4 span::before { right: 100%; } h4 span::after { left: 100%; } h5 { font-size: 1.0714285714rem; } h6 { font-size: 1.1428571429rem; font-weight: bold; } .headding-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .headding-wrapper h1, .headding-wrapper h2, .headding-wrapper h3, .headding-wrapper h4, .headding-wrapper h5, .headding-wrapper h6 { margin-bottom: 0; } .expected-total { font-size: 1.2142857143rem; margin-bottom: 1.5rem; font-weight: bold; text-align: center; } .expected-total > span { padding-bottom: 0.25rem; border-bottom: 1px solid #707070; padding-left: 0.5rem; padding-right: 0.5rem; } .expected-total .expected-status { color: #2F6E19; } .expected-total .yen { font-size: 0.8571428571rem; } /*-------------------------------------------------------------- # font --------------------------------------------------------------*/ .font-montserrat, .collapse-wh button .amount { font-family: "Montserrat", sans-serif; } .font-noto, .handle-block .sub-handle.active .deleteBtn, .handle-block .sub-handle.active .mainBtn, .client-block .sub-client.active .deleteBtn, .handle-block .sub-client.active .deleteBtn, .client-block .sub-client.active .mainBtn, .handle-block .sub-client.active .mainBtn, .details-block, .task-block a, .emergency-block a .matter-title, .emergency-block a { font-family: "Noto Sans JP", sans-serif; } /*-------------------------------------------------------------- # ボタン --------------------------------------------------------------*/ button { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; border: none; background: transparent; } .btn { border-radius: 26px; padding-top: 0.75rem; padding-bottom: 0.75rem; } .btn-grad { background: -webkit-gradient(linear, left top, right top, from(#005ECC), to(#004290)); background: linear-gradient(to right, #005ECC, #004290); color: #fff; } .btn-collapse { margin: auto; display: block; text-align: center; -moz-appearance: none; appearance: none; -webkit-appearance: none; border: none; background-color: transparent; font-size: 0.8571428571rem; } .btn-collapse i[class*=fa-] { display: block; color: #0059C1; margin: 0.5rem auto; } .btn-back { width: 30px; height: 30px; background: -webkit-gradient(linear, right top, left top, from(#005ECC), to(#004290)); background: linear-gradient(to left, #005ECC, #004290); border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .btn-back.disabled { background: #EBEBEB; } .btn-back i[class*=fa-] { color: #fff; font-size: 0.9285714286rem; } .btn.text-left { position: relative; } .btn.text-left::after { position: absolute; font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; top: 0; bottom: 0; right: 1rem; margin: auto; height: 1.5rem; color: #979797; } .btn-sm { border-radius: 6px; padding: 0.25rem; font-weight: normal; font-size: 0.8571428571rem; } .btn-cancel { color: #fff; background: #D6D6D6; border-color: #D6D6D6; } button[aria-expanded=false]::after { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #0059C1; padding: 0 0.25rem; } button[aria-expanded=true]::after { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #0059C1; padding: 0 0.25rem; } .contact-history button::after { display: block; } /*-------------------------------------------------------------- # 全体レイアウト --------------------------------------------------------------*/ .section { padding-top: 2rem; padding-bottom: 2rem; } /*-------------------------------------------------------------- # リスト --------------------------------------------------------------*/ ul[class*=list-style].mp-0 li { margin-bottom: 0 !important; padding-bottom: 0 !important; } ul[class*=list-style].mp-1 li { margin-bottom: 0.25rem !important; padding-bottom: 0.25rem !important; } ul[class*=list-style].mp-2 li { margin-bottom: 0.5rem !important; padding-bottom: 0.5rem !important; } ul[class*=list-style].mp-3 li { margin-bottom: 1rem !important; padding-bottom: 1rem !important; } ul[class*=list-style].mp-4 li { margin-bottom: 1.5rem !important; padding-bottom: 1.5rem !important; } ul[class*=list-style].mp-5 li { margin-bottom: 3rem !important; padding-bottom: 3rem !important; } ul[class*=list-style].list-wrap li { -ms-flex-wrap: wrap; flex-wrap: wrap; } ul[class*=list-style].list-wrap li .collapse { width: 100%; } ul[class*=list-style].solid li { border-bottom-style: solid; } ul[class*=list-style] li .parts { padding: 0 1rem; } ul[class*=list-style] li .flex-pats { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; width: 40%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } ul[class*=list-style] li .negotiation-introducer .icon-introducer { text-align: center; padding: 0 0.5rem; } ul[class*=list-style] li .negotiation-introducer .icon-introducer i[class*=fa-] { font-size: 1rem; color: #980023; } ul[class*=list-style] li .negotiation-introducer .icon-introducer::after { content: "紹介者"; font-size: 0.625rem; display: block; } ul[class*=list-style] li .negotiation-introducer .introducer { font-size: 1rem; } ul[class*=list-style] li .negotiation-introducer .honorific { font-size: 0.8571428571rem; font-weight: bold; padding-left: 0.125rem; display: inline-block; margin-top: -2px; } ul[class*=list-style] li .negotiation-staff .icon-staff { text-align: center; padding: 0 0.5rem; } ul[class*=list-style] li .negotiation-staff .icon-staff i[class*=fa-] { font-size: 1rem; color: #0059C1; } ul[class*=list-style] li .negotiation-staff .icon-staff::after { content: "担当者"; font-size: 0.625rem; display: block; } ul[class*=list-style] li .negotiation-staff .staff { font-size: 1rem; } ul[class*=list-style] li > span { padding: 0 1rem; } ul[class*=list-style] li > span[class*=icon-] { width: 50px; text-align: center; } ul[class*=list-style] li > span[class*=icon-] i[class*=fa-] { color: #0059C1; } ul[class*=list-style] li .secound-line { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } ul[class*=list-style] li .matter { padding-left: 1.65rem; font-size: 1.0714285714rem; } ul[class*=list-style] li .right-style { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-left: auto; width: 100%; } ul[class*=list-style] li .right-style > .right-block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } ul[class*=list-style] li .right-style > .right-block a, ul[class*=list-style] li .right-style > .right-block span { width: 33.3333333%; } ul[class*=list-style] li .collapse-inner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0; margin-top: 0.75rem; display: -webkit-box; display: -ms-flexbox; display: flex; opacity: 1; } ul[class*=list-style] li .collapse-inner > span { padding: 0 1rem; } ul[class*=list-style] li .collapse-inner > span[class*=icon-] { width: 50px; text-align: center; } ul[class*=list-style] li .collapse-inner > span[class*=icon-] i[class*=fa-] { color: #0059C1; } ul.list-style { padding-top: 1rem; padding-left: 0; margin-bottom: 0; list-style: none; } ul.list-style li button, ul.list-style li .icon-grad, ul.list-style li .approval-block .approval-link i[class*=fa-], .approval-block .approval-link ul.list-style li i[class*=fa-], ul.list-style li .pagination .arrow, .pagination ul.list-style li .arrow { width: 23px; height: 23px; padding: 0; } ul.list-style > li { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; border-bottom: 1px solid #dee2e6; margin-bottom: 1rem; padding-bottom: 1rem; } ul.list-style > li:last-of-type { margin-bottom: 0; } ul.list-style > li > span { padding: 0; } ul.list-style > li > span:first-of-type { -webkit-box-flex: 0; -ms-flex: 0 1 31%; flex: 0 1 31%; } ul.list-style > li > button, ul.list-style > li > .icon-grad, .approval-block .approval-link ul.list-style > li > i[class*=fa-], .pagination ul.list-style > li > .arrow { position: absolute; right: 0; top: 1px; } ul.list-style > li ul { width: 100%; margin-top: 1rem; border-top: 1px dashed #dee2e6; padding-top: 1rem; padding-left: 0; list-style: none; } ul.list-style > li ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 0.5rem; } ul.list-style > li ul li:not(:last-of-type) { border-bottom: 1px dashed #dee2e6; margin-bottom: 1rem; padding-bottom: 1rem; } .list-style2 { margin-bottom: 0; } .list-style2 li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .list-style2 li:not(:last-of-type) { margin-bottom: 0.75rem; border-bottom: 1px dashed #dee2e6; padding-bottom: 0.75rem; } .list-style3 li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0.75rem; border-bottom: 1px dashed #dee2e6; padding-bottom: 0.75rem; } .list-style4 li { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 0.75rem; border-bottom: 1px dashed #dee2e6; padding-bottom: 0.75rem; } .list-result li { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 0.5rem; border-bottom: 1px solid #dee2e6; padding-bottom: 0.5rem; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .list-result li div { width: 100%; } .list-result li .first { font-weight: bold; font-size: 1.0714285714rem; } .list-result li .first a { color: #3A3A3A; } .list-result li .secound { font-family: "Roboto Condensed", "Helvetica Neue", Verdana, Arial, sans-serif; font-weight: bold; font-size: 1.4285714286rem; color: #0059C1; margin-left: auto; letter-spacing: 1px; line-height: 1; } .list-result li .secound .yen { letter-spacing: 1px; } .list-result li .third { font-size: 1.0714285714rem; font-family: "Roboto Condensed", "Helvetica Neue", Verdana, Arial, sans-serif; width: 65px; text-align: right; letter-spacing: 1px; margin-left: 1rem; } .list-result li .third > div { display: -webkit-box; display: -ms-flexbox; display: flex; } .list-result li .third > div span:first-of-type { width: 40px; margin-right: 1rem; } .list-result li .third > div span:last-of-type { margin-left: auto; } .list-result li .third > div span:last-of-type.red { color: #980023; } .list-result li .third > div span:last-of-type.green { color: #009835; } .list-result li .third135 { font-size: 1.0714285714rem; font-family: "Roboto Condensed", "Helvetica Neue", Verdana, Arial, sans-serif; width: 135px; text-align: right; letter-spacing: 1px; margin-left: 1rem; } .list-result li .third135 > div { display: -webkit-box; display: -ms-flexbox; display: flex; } .list-result li .third135 > div span:first-of-type { width: 40px; margin-right: 1rem; } .list-result li .third135 > div span:last-of-type { margin-left: auto; } .list-result li .third135 > div span:last-of-type.red { color: #980023; } .list-result li .third135 > div span:last-of-type.green { color: #009835; } .list-workcase { padding-left: 0; list-style: none; } .list-workcase li { display: -webkit-box; display: -ms-flexbox; display: flex; background-color: rgba(208, 214, 221, 0.1); margin-bottom: 0.5rem; -webkit-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.1); box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.1); padding-left: 1rem; padding-right: 1rem; } .list-workcase li > * { padding: 1rem; text-align: center; } .list-workcase li .list-workcase-title { -webkit-box-flex: 0; -ms-flex: 0 0 30%; flex: 0 0 30%; } .list-workcase li .list-workcase-work { -webkit-box-flex: 0; -ms-flex: 0 0 70%; flex: 0 0 70%; color: #3A3A3A; } .list-workcase li.warning { background-color: rgba(252, 95, 95, 0.1); position: relative; } .list-workcase li.warning::after { position: absolute; content: ""; background-image: url(../img/warning.png); display: block; width: 32px; height: 27px; right: 28px; top: 0; bottom: 0; margin: auto; } .list-approval li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0.75rem; padding-bottom: 0.75rem; } .list-approval li .approval-ico { font-size: 2rem; padding: 0 0.5rem; } .list-approval li .approval-contents { line-height: 1.4; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-right: 0.5rem; font-size: 0.9285714286rem; } .list-approval li .approval-contents span:not(:first-of-type) { padding-left: 0.5rem; } .list-approval li .approval-contents span.approval-num { font-family: "Noto Sans JP", sans-serif; } .list-approval li .approval-contents span.approval-date { font-family: "Noto Sans JP", sans-serif; color: #888; } .list-approval li .approval-contents .approval-title { width: 100%; } .list-approval li:not(:last-of-type) { border-bottom: 1px dashed #dee2e6; } .approval-flow-status input { max-width: 70%; } .approval-flow-status .input-fixed { margin-left: 30px; } .approval-flow-status .list-flow-status { list-style: none; padding-left: 0; margin-top: 1rem; } .approval-flow-status .list-flow-status li { margin-bottom: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .approval-flow-status .list-flow-status .btns { display: -webkit-box; display: -ms-flexbox; display: flex; } .approval-flow-status .list-flow-status .btns .btn-add, .approval-flow-status .list-flow-status .btns .btn-delete { padding-left: 0.5rem; } .approval-flow-status .list-flow-status .btns .btn-add i, .approval-flow-status .list-flow-status .btns .btn-delete i { font-size: 2rem; } .approval-flow-status .list-flow-status .btns .btn-add { color: #1ec7fb; } .approval-flow-status .list-flow-status .btns .btn-delete { color: #C70000; } .list-statement li:not(.add-list) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; padding-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px dashed #dee2e6; } .list-statement li:not(.add-list):first-of-type { border-top: 1px dashed #dee2e6; } .list-statement li:not(.add-list) .statement-order { -webkit-box-flex: 0; -ms-flex: 0 0 48px; flex: 0 0 48px; padding-right: 0.75rem; } .list-statement li:not(.add-list) .statement-order .statement-num { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; background: #F7F7F7; margin: 8px auto; } .list-statement li:not(.add-list) .statement-order .statement-delete { text-align: center; font-size: 2rem; color: #C70000; } .list-statement li:not(.add-list) .statement-details { width: 100%; } .list-statement li:not(.add-list) .statement-details .form-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0; } .list-statement li:not(.add-list) .statement-details .form-group label { white-space: nowrap; margin-right: 0.25rem; margin-bottom: 0; } .list-statement li:not(.add-list) .statement-details-bottoms { margin-top: 0.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .list-statement li:not(.add-list) .statement-details-bottoms > div { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .list-statement li:not(.add-list) .statement-details-bottoms > div:not(:first-of-type) { padding-left: 0.5rem; } .list-statement li:not(.add-list) .statement-details-bottoms > div:last-of-type { -webkit-box-flex: 0; -ms-flex: 0 0 22%; flex: 0 0 22%; } .add-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .add-list .statement-add { -webkit-box-flex: 0; -ms-flex: 0 0 48px; flex: 0 0 48px; text-align: center; font-size: 2rem; color: #D4E5FA; margin-right: 0.25rem; } .amount-money { padding-top: 2rem; padding-bottom: 1rem; width: 80%; margin-left: auto; } .amount-money .form-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .amount-money .form-group > .d-flex { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } .amount-money label { text-align: right; margin-right: 0.5rem; } .amount-money label small { font-size: 0.7142857143rem; display: block; } .file-up { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -5px; margin-right: -5px; } .file-up > div { -webkit-box-flex: 0; -ms-flex: 0 0 22%; flex: 0 0 22%; margin: 5px; height: 20vw; } @media (min-width: 992px) { .file-up > div { height: 13vw; -webkit-box-flex: 0; -ms-flex: 0 0 24%; flex: 0 0 24%; } } .file-up .file-view { position: relative; background-repeat: no-repeat; background-size: contain; background-position: center center; border: 1px solid; } .file-up .file-view.file-excel { background-image: url(../img/file_excel.svg); background-size: 50%; } .file-up .file-view.file-word { background-image: url(../img/file_word.svg); background-size: 50%; } .file-up .file-view.file-powerpoint { background-image: url(../img/file_powerpoint.svg); background-size: 50%; } .file-up .file-view.file-video { background-image: url(../img/file_video.svg); background-size: 50%; } .file-up .file-view.file-other { background-image: url(../img/file_other.svg); background-size: 50%; } .file-up .file-view .file-dalete { position: absolute; right: 0; top: 0; line-height: 1; padding: 0.125rem; font-size: 1.5rem; color: #4E4F52; } .file-up .file-view .file-dalete:hover { cursor: pointer; opacity: 0.8; -webkit-transition: all 0.3s; transition: all 0.3s; } .file-up .file-input { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .file-up .file-input label:hover { cursor: pointer; } .file-up .file-input label::before { font-family: "Font Awesome 5 Pro"; font-weight: 400; content: ""; color: #4E4F52; font-size: 5rem; } .file-up .file-input input { display: none; } .top-topics, .top-alert { max-height: 286px; background: #fff; border-radius: 6px; overflow-y: scroll; } .top-topics ul, .top-alert ul { list-style: none; padding-left: 1rem; padding-right: 1rem; margin-bottom: 0; } .top-topics ul li, .top-alert ul li { padding-top: 0.625rem; padding-bottom: 0.625rem; font-size: 0.9285714286rem; } .top-topics ul li:not(:last-of-type), .top-alert ul li:not(:last-of-type) { border-bottom: 1px solid #707070; } .top-topics ul li h4, .top-alert ul li h4 { margin-bottom: 0; text-align: left; font-weight: bold; } .top-topics ul li p, .top-alert ul li p { margin-top: 0.625rem; margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .top-alert { border: 1px solid #980023; background: url(../img/alert-bg.png) center right 1rem no-repeat #fff; } .top-alert .alert-title::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #980023; margin-right: 0.25rem; } .top-alert .alert-excerpt { display: block; color: #3A3A3A; margin-top: 0.625rem; margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; margin-left: 1.25rem; font-size: 1.0714285714rem; position: relative; padding-right: 1rem; } .top-alert .alert-excerpt::after { position: absolute; right: 0; font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #004290; margin-left: 1.25rem; } .list-summary, .list-personal { list-style: none; padding-left: 0; font-size: 1.0714285714rem; } .list-summary li, .list-personal li { margin-bottom: 0.75rem; border-bottom: 1px solid #dee2e6; padding-bottom: 0.75rem; } .list-summary .value > div, .list-personal .value > div { font-size: 0.8571428571rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .list-summary .value > div > span:first-of-type, .list-personal .value > div > span:first-of-type { -webkit-box-flex: 0; -ms-flex: 0 1 38%; flex: 0 1 38%; } .list-summary .value > div > span.amount, .list-personal .value > div > span.amount { -webkit-box-flex: 0; -ms-flex: 0 1 32%; flex: 0 1 32%; text-align: right; } .list-summary .value > div > span:last-of-type, .list-personal .value > div > span:last-of-type { margin-left: auto; } .list-summary .value > div .num, .list-personal .value > div .num { font-weight: bold; color: #049938; font-family: "Montserrat", sans-serif; font-size: 1.4285714286rem; } .list-summary .value > div .num.zero, .list-personal .value > div .num.zero { color: #004698; } .list-contact { list-style: none; padding-left: 0; font-size: 1.0714285714rem; } .list-contact li { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 1px dashed #dee2e6; margin-bottom: 0.75rem; padding-bottom: 0.75rem; } .list-contact li .status { margin-left: auto; } .list-contact li .status.checked { color: #C70000; } .list-contact li .has-comment { margin-top: 0.5rem; width: 100%; font-size: 0.8571428571rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list-personal .value > div > span.amount { -webkit-box-flex: 0; -ms-flex: 0 1 40%; flex: 0 1 40%; } .list-personal .value > div .num.dark { color: #747474; } .list-personal .list-contact li { border-bottom: none; margin-bottom: 0; padding-bottom: 0; border-top: 1px dashed #dee2e6; margin-top: 0.75rem; padding-top: 0.75rem; } .list-application .status.approval { color: #2F6E19; } .list-application .status.remand { color: #C70000; } .list-application .status.consider { color: #C18100; } /*-------------------------------------------------------------- # テーブル --------------------------------------------------------------*/ .table-res th, .table-res td { white-space: nowrap; font-weight: bold; text-align: center; vertical-align: middle; } .table-res th { border-right-style: double; border-right-width: 3px; } .table-style1 th, .table-style1 td { font-weight: normal; padding: 0.75rem 0; } .table-style1 th a, .table-style1 td a { color: #000; } .table-style1 th { background-color: rgba(0, 255, 160, 0.5); border-right: 2px solid #fff; } .table-style1 thead th, .table-style1 thead td { border-bottom: 3.5px solid #fff; font-size: 1.2142857143rem; } .table-style1 tbody th { border-bottom: 5px solid #fff; font-size: 1.2857142857rem; } .table-style1 tbody td { background-color: #EBEBEB; text-align: right; -webkit-filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.13)); filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.13)); border-bottom: 5px solid transparent; border-right: 2px solid transparent; } .table-style1 tbody td.amount { position: relative; } .table-style1 tbody td.amount::after { position: absolute; right: 4px; bottom: 2px; display: block; content: "円"; width: 100%; font-size: 0.8571428571rem; font-family: "Noto Sans JP", sans-serif; text-align: right; } .table-style1 tbody td.active { background-color: rgba(151, 151, 151, 0.43); -webkit-filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.16)); filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.16)); border-bottom: 5px solid transparent; border-right: 2px solid transparent; } .table-style1 tbody tr.limit td { background-color: #ffeaea; color: #C70000; } .table-style1 tbody tr.limit td a { color: #C70000; -webkit-filter: none; filter: none; } .table-style1.table-style-primary { width: 100%; } .table-style1.table-style-primary th, .table-style1.table-style-primary td { font-size: 1.0714285714rem; } .table-style1.table-style-primary th { background-color: rgba(0, 123, 255, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-primary td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-primary td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-primary td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-secondary { width: 100%; } .table-style1.table-style-secondary th, .table-style1.table-style-secondary td { font-size: 1.0714285714rem; } .table-style1.table-style-secondary th { background-color: rgba(108, 117, 125, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-secondary td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-secondary td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-secondary td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-success { width: 100%; } .table-style1.table-style-success th, .table-style1.table-style-success td { font-size: 1.0714285714rem; } .table-style1.table-style-success th { background-color: rgba(40, 167, 69, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-success td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-success td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-success td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-info { width: 100%; } .table-style1.table-style-info th, .table-style1.table-style-info td { font-size: 1.0714285714rem; } .table-style1.table-style-info th { background-color: rgba(23, 162, 184, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-info td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-info td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-info td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-warning { width: 100%; } .table-style1.table-style-warning th, .table-style1.table-style-warning td { font-size: 1.0714285714rem; } .table-style1.table-style-warning th { background-color: rgba(255, 193, 7, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-warning td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-warning td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-warning td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-danger { width: 100%; } .table-style1.table-style-danger th, .table-style1.table-style-danger td { font-size: 1.0714285714rem; } .table-style1.table-style-danger th { background-color: rgba(220, 53, 69, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-danger td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-danger td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-danger td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-light { width: 100%; } .table-style1.table-style-light th, .table-style1.table-style-light td { font-size: 1.0714285714rem; } .table-style1.table-style-light th { background-color: rgba(248, 249, 250, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-light td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-light td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-light td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-dark { width: 100%; } .table-style1.table-style-dark th, .table-style1.table-style-dark td { font-size: 1.0714285714rem; } .table-style1.table-style-dark th { background-color: rgba(52, 58, 64, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-dark td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-dark td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-dark td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-base { width: 100%; } .table-style1.table-style-base th, .table-style1.table-style-base td { font-size: 1.0714285714rem; } .table-style1.table-style-base th { background-color: rgba(0, 66, 144, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-base td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-base td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-base td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-sub { width: 100%; } .table-style1.table-style-sub th, .table-style1.table-style-sub td { font-size: 1.0714285714rem; } .table-style1.table-style-sub th { background-color: rgba(0, 94, 204, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-sub td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-sub td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-sub td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-dark-yellow { width: 100%; } .table-style1.table-style-dark-yellow th, .table-style1.table-style-dark-yellow td { font-size: 1.0714285714rem; } .table-style1.table-style-dark-yellow th { background-color: #C18100; line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-dark-yellow td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-dark-yellow td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-dark-yellow td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-blue { width: 100%; } .table-style1.table-style-blue th, .table-style1.table-style-blue td { font-size: 1.0714285714rem; } .table-style1.table-style-blue th { background-color: rgba(0, 89, 193, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-blue td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-blue td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-blue td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-red { width: 100%; } .table-style1.table-style-red th, .table-style1.table-style-red td { font-size: 1.0714285714rem; } .table-style1.table-style-red th { background-color: rgba(152, 0, 35, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-red td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-red td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-red td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-pink { width: 100%; } .table-style1.table-style-pink th, .table-style1.table-style-pink td { font-size: 1.0714285714rem; } .table-style1.table-style-pink th { background-color: rgba(252, 95, 95, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-pink td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-pink td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-pink td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-light-pink { width: 100%; } .table-style1.table-style-light-pink th, .table-style1.table-style-light-pink td { font-size: 1.0714285714rem; } .table-style1.table-style-light-pink th { background-color: rgba(229, 207, 195, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-light-pink td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-light-pink td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-light-pink td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-mint { width: 100%; } .table-style1.table-style-mint th, .table-style1.table-style-mint td { font-size: 1.0714285714rem; } .table-style1.table-style-mint th { background-color: rgba(28, 242, 228, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-mint td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-mint td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-mint td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-green { width: 100%; } .table-style1.table-style-green th, .table-style1.table-style-green td { font-size: 1.0714285714rem; } .table-style1.table-style-green th { background-color: rgba(0, 255, 160, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-green td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-green td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-green td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-purple { width: 100%; } .table-style1.table-style-purple th, .table-style1.table-style-purple td { font-size: 1.0714285714rem; } .table-style1.table-style-purple th { background-color: rgba(203, 192, 192, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-purple td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-purple td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-purple td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-black { width: 100%; } .table-style1.table-style-black th, .table-style1.table-style-black td { font-size: 1.0714285714rem; } .table-style1.table-style-black th { background-color: rgba(0, 0, 0, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-black td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-black td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-black td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-grey { width: 100%; } .table-style1.table-style-grey th, .table-style1.table-style-grey td { font-size: 1.0714285714rem; } .table-style1.table-style-grey th { background-color: rgba(35, 47, 62, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-grey td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-grey td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-grey td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-white { width: 100%; } .table-style1.table-style-white th, .table-style1.table-style-white td { font-size: 1.0714285714rem; } .table-style1.table-style-white th { background-color: rgba(255, 255, 255, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-white td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-white td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-white td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-grey-deep { width: 100%; } .table-style1.table-style-grey-deep th, .table-style1.table-style-grey-deep td { font-size: 1.0714285714rem; } .table-style1.table-style-grey-deep th { background-color: rgba(60, 60, 60, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-grey-deep td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-grey-deep td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-grey-deep td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-grey-light { width: 100%; } .table-style1.table-style-grey-light th, .table-style1.table-style-grey-light td { font-size: 1.0714285714rem; } .table-style1.table-style-grey-light th { background-color: rgba(187, 200, 216, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-grey-light td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-grey-light td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-grey-light td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-grey-middle { width: 100%; } .table-style1.table-style-grey-middle th, .table-style1.table-style-grey-middle td { font-size: 1.0714285714rem; } .table-style1.table-style-grey-middle th { background-color: rgba(116, 116, 116, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-grey-middle td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-grey-middle td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-grey-middle td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-grey-base { width: 100%; } .table-style1.table-style-grey-base th, .table-style1.table-style-grey-base td { font-size: 1.0714285714rem; } .table-style1.table-style-grey-base th { background-color: rgba(151, 151, 151, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-grey-base td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-grey-base td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-grey-base td.amount { padding-left: 1rem; padding-right: 1rem; } .table-style1.table-style-brown { width: 100%; } .table-style1.table-style-brown th, .table-style1.table-style-brown td { font-size: 1.0714285714rem; } .table-style1.table-style-brown th { background-color: rgba(113, 50, 17, 0.5); line-height: 1.2; text-align: center; padding: 0.45rem 0.75rem; } .table-style1.table-style-brown td { text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } .table-style1.table-style-brown td.date { font-size: 1rem; padding: 0; } .table-style1.table-style-brown td.amount { padding-left: 1rem; padding-right: 1rem; } .table-colors th, .table-colors td { font-weight: bold; font-size: 1.0714285714rem; } .table-colors td { text-align: center; } .table-colors thead tr { background: rgba(212, 229, 250, 0.4); } .table-colors tbody tr { background: rgba(235, 235, 235, 0.4); } .table-colors tbody tr:nth-of-type(even) { background: rgba(212, 229, 250, 0.4); } .table-colors tbody tr.limit { background: rgba(252, 95, 95, 0.2); } .table-colors.table-colors-border th, .table-colors.table-colors-border td { padding: 0.25rem 0.75rem; vertical-align: middle; height: 39px; } .table-colors.table-colors-border thead th { white-space: nowrap; } .table-colors.table-colors-border thead th:not(:first-child) { border-left: 4px solid #fff; text-align: center; } .table-colors.table-colors-border thead th, .table-colors.table-colors-border thead td { border-bottom: 2px solid #fff; } .table-colors.table-colors-border tbody tr td { border-left: 4px solid #fff; } .table-colors.table-colors-border tbody tr:not(:last-of-type) th, .table-colors.table-colors-border tbody tr:not(:last-of-type) td { border-bottom: 2px solid #fff; } .table-colors.table-colors-border tbody td:nth-child(2) { font-size: 0.9285714286rem; } .table-colors.table-colors-border tbody td:nth-child(3) { font-size: 0.7142857143rem; } .table-orders { table-layout: fixed; background: #f5f5f5; } .table-orders th, .table-orders td { padding-top: 0.25rem; padding-bottom: 0.25rem; } .table-orders th { text-align: center; color: #fff; background: -webkit-gradient(linear, right top, left top, from(#005ECC), to(#004290)); background: linear-gradient(to left, #005ECC, #004290); font-size: 1.0714285714rem; width: 35%; } .table-orders th.ex-b { background: #009835; } .table-orders th.ex-c { background: #979797; } .table-orders th a { color: #fff; } .table-orders th a::after { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; font-size: 0.8571428571rem; margin-left: 0.25rem; } .table-orders td { text-align: right; font-size: 0.9285714286rem; } .table-orders td:not(.land) { font-weight: bold; padding-right: 1rem; } .table-orders td:not(.land) span { font-weight: normal; } .table-orders td.land { color: #009835; } .table-orders td.land span { color: #3A3A3A; } .table-mk th, .block-mk-alert th, .table-mk-alert th { font-size: 1.0714285714rem; } .table-mk thead, .block-mk-alert thead, .table-mk-alert thead { background: -webkit-gradient(linear, right top, left top, from(#005ECC), to(#004290)); background: linear-gradient(to left, #005ECC, #004290); color: #fff; font-weight: bold; } .table-mk thead th, .block-mk-alert thead th, .table-mk-alert thead th { padding-top: 0.25rem; padding-bottom: 0.25rem; } .table-mk tbody tr, .block-mk-alert tbody tr, .table-mk-alert tbody tr { background: rgba(235, 235, 235, 0.4); } .table-mk tbody tr:nth-of-type(even), .block-mk-alert tbody tr:nth-of-type(even), .table-mk-alert tbody tr:nth-of-type(even) { background: rgba(212, 229, 250, 0.4); } .table-mk tbody tr th, .block-mk-alert tbody tr th, .table-mk-alert tbody tr th, .table-mk tbody tr td, .block-mk-alert tbody tr td, .table-mk-alert tbody tr td { font-weight: bold; vertical-align: middle; padding-left: 0.25rem; padding-right: 0.25rem; min-height: 64px; } .table-mk tbody tr td, .block-mk-alert tbody tr td, .table-mk-alert tbody tr td { font-size: 0.9285714286rem; text-align: center; } .table-mk tbody i[class*=fa-], .block-mk-alert tbody i[class*=fa-], .table-mk-alert tbody i[class*=fa-] { font-size: 0.8571428571rem; margin-right: 0.5rem; } .table-mk-alert thead { background: #980023; } .table-mk-alert tbody tr:nth-of-type(even) { background: rgba(252, 95, 95, 0.2); } .table-summary { font-weight: bold; border-top: 1px solid #ccc; width: 100%; table-layout: fixed; } .table-summary tr { border-bottom: 1px solid #ccc; } .table-summary th, .table-summary td { padding: 0.25rem; text-align: center; } .table-summary th { font-size: 1.0714285714rem; background: -webkit-gradient(linear, right top, left top, from(#005ECC), to(#004290)); background: linear-gradient(to left, #005ECC, #004290); color: white; width: 45%; } .table-summary td { font-size: 0.9285714286rem; background: #F5F5F5; } .table-summary td .unit { font-weight: normal; padding-left: 0.25rem; font-size: 0.5714285714rem; } .table-summary.col2 th { width: 32%; } .table-summary input { width: 50%; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #707070; border-radius: 0.25rem; } /*-------------------------------------------------------------- # アイコン --------------------------------------------------------------*/ .client-section span { display: inline-block; min-width: 22px; text-align: center; } .client-section span:not(:first-of-type) { padding-left: 0.25rem; } .client-section span i[class*=fa-] { color: #CCCCCC; } .client-section span.active.client-bridal i[class*=fa-] { color: #FC5F5F; } .client-section span.active.client-home i[class*=fa-] { color: #2F6E19; } .client-section span.active.client-stone i[class*=fa-] { color: #000000; } .client-section.status span.ongoing i[class*=fa-] { color: #2F6E19; } .client-section.status span.finish i[class*=fa-] { color: #C70000; } .icon-grad, .approval-block .approval-link i[class*=fa-], .pagination .arrow { background: -webkit-gradient(linear, right top, left top, from(#005ECC), to(#004290)); background: linear-gradient(to left, #005ECC, #004290); border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .icon-grad.disabled, .approval-block .approval-link i.disabled[class*=fa-], .pagination .disabled.arrow { background: #EBEBEB; } .icon-grad i[class*=fa-], .approval-block .approval-link i[class*=fa-] i[class*=fa-], .pagination .arrow i[class*=fa-] { color: #fff; font-size: 0.9285714286rem; } .icon-grad.wh-10, .approval-block .approval-link i.wh-10[class*=fa-], .pagination .wh-10.arrow { width: 10px; height: 10px; } .icon-grad.wh-11, .approval-block .approval-link i.wh-11[class*=fa-], .pagination .wh-11.arrow { width: 11px; height: 11px; } .icon-grad.wh-12, .approval-block .approval-link i.wh-12[class*=fa-], .pagination .wh-12.arrow { width: 12px; height: 12px; } .icon-grad.wh-13, .approval-block .approval-link i.wh-13[class*=fa-], .pagination .wh-13.arrow { width: 13px; height: 13px; } .icon-grad.wh-14, .approval-block .approval-link i.wh-14[class*=fa-], .pagination .wh-14.arrow { width: 14px; height: 14px; } .icon-grad.wh-15, .approval-block .approval-link i.wh-15[class*=fa-], .pagination .wh-15.arrow { width: 15px; height: 15px; } .icon-grad.wh-16, .approval-block .approval-link i.wh-16[class*=fa-], .pagination .wh-16.arrow { width: 16px; height: 16px; } .icon-grad.wh-17, .approval-block .approval-link i.wh-17[class*=fa-], .pagination .wh-17.arrow { width: 17px; height: 17px; } .icon-grad.wh-18, .approval-block .approval-link i.wh-18[class*=fa-], .pagination .wh-18.arrow { width: 18px; height: 18px; } .icon-grad.wh-19, .approval-block .approval-link i.wh-19[class*=fa-], .pagination .wh-19.arrow { width: 19px; height: 19px; } .icon-grad.wh-20, .approval-block .approval-link i.wh-20[class*=fa-], .pagination .wh-20.arrow { width: 20px; height: 20px; } .icon-grad.wh-21, .approval-block .approval-link i.wh-21[class*=fa-], .pagination .wh-21.arrow { width: 21px; height: 21px; } .icon-grad.wh-22, .approval-block .approval-link i.wh-22[class*=fa-], .pagination .arrow { width: 22px; height: 22px; } .icon-grad.wh-23, .approval-block .approval-link i.wh-23[class*=fa-], .pagination .wh-23.arrow { width: 23px; height: 23px; } .icon-grad.wh-24, .approval-block .approval-link i.wh-24[class*=fa-], .pagination .wh-24.arrow { width: 24px; height: 24px; } .icon-grad.wh-25, .approval-block .approval-link i.wh-25[class*=fa-], .pagination .wh-25.arrow { width: 25px; height: 25px; } .icon-grad.wh-26, .approval-block .approval-link i.wh-26[class*=fa-], .pagination .wh-26.arrow { width: 26px; height: 26px; } .icon-grad.wh-27, .approval-block .approval-link i.wh-27[class*=fa-], .pagination .wh-27.arrow { width: 27px; height: 27px; } .icon-grad.wh-28, .approval-block .approval-link i.wh-28[class*=fa-], .pagination .wh-28.arrow { width: 28px; height: 28px; } .icon-grad.wh-29, .approval-block .approval-link i.wh-29[class*=fa-], .pagination .wh-29.arrow { width: 29px; height: 29px; } .icon-grad.wh-30, .approval-block .approval-link i.wh-30[class*=fa-], .pagination .wh-30.arrow { width: 30px; height: 30px; } .icon-grad.wh-31, .approval-block .approval-link i.wh-31[class*=fa-], .pagination .wh-31.arrow { width: 31px; height: 31px; } .icon-grad.wh-32, .approval-block .approval-link i.wh-32[class*=fa-], .pagination .wh-32.arrow { width: 32px; height: 32px; } .icon-grad.wh-33, .approval-block .approval-link i.wh-33[class*=fa-], .pagination .wh-33.arrow { width: 33px; height: 33px; } .icon-grad.wh-34, .approval-block .approval-link i.wh-34[class*=fa-], .pagination .wh-34.arrow { width: 34px; height: 34px; } .icon-grad.wh-35, .approval-block .approval-link i.wh-35[class*=fa-], .pagination .wh-35.arrow { width: 35px; height: 35px; } .icon-grad.wh-36, .approval-block .approval-link i.wh-36[class*=fa-], .pagination .wh-36.arrow { width: 36px; height: 36px; } .icon-grad.wh-37, .approval-block .approval-link i.wh-37[class*=fa-], .pagination .wh-37.arrow { width: 37px; height: 37px; } .icon-grad.wh-38, .approval-block .approval-link i.wh-38[class*=fa-], .pagination .wh-38.arrow { width: 38px; height: 38px; } .icon-grad.wh-39, .approval-block .approval-link i.wh-39[class*=fa-], .pagination .wh-39.arrow { width: 39px; height: 39px; } .icon-grad.wh-40, .approval-block .approval-link i.wh-40[class*=fa-], .pagination .wh-40.arrow { width: 40px; height: 40px; } #datepicker { padding: 0.25rem 0.5rem; height: calc(1em + 0.5rem + 2px); font-weight: bold; border-color: #0059C1; font-size: 1.0714285714rem; } #datepicker + .ui-datepicker-trigger { width: 19px; height: auto; } #ui-datepicker-div { z-index: 999999 !important; } /*-------------------------------------------------------------- # datepicker --------------------------------------------------------------*/ .datepicker .table-condensed th, .datepicker .table-condensed td { width: 35px; height: 30px; } .datepicker .table-condensed .class-sunday { color: red !important; } .datepicker .table-condensed .class-saturday { color: blue !important; } /*-------------------------------------------------------------- # pagination --------------------------------------------------------------*/ .pagination { font-size: 0.9285714286rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .pagination .page { padding-left: 1rem; padding-right: 1rem; } .pagination .page-num { padding-left: 0.25rem; } .pagination .prev, .pagination .next { color: #3A3A3A; } .pagination .arrow { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 0.25rem; } /*-------------------------------------------------------------- # フォーム --------------------------------------------------------------*/ form .form-control { padding-top: 0.75rem; padding-bottom: 0.75rem; } form .form-control.bg-color { background-color: #D4E5FA; } form .form-control[class*=bg-] { border: none; } form .form-control::-webkit-input-placeholder { font-weight: bold; color: rgba(58, 58, 58, 0.52); } form .form-control::-moz-placeholder { font-weight: bold; color: rgba(58, 58, 58, 0.52); } form .form-control:-ms-input-placeholder { font-weight: bold; color: rgba(58, 58, 58, 0.52); } form .form-control::-ms-input-placeholder { font-weight: bold; color: rgba(58, 58, 58, 0.52); } form .form-control::placeholder { font-weight: bold; color: rgba(58, 58, 58, 0.52); } form input.form-control { height: calc(1.5em + 1.5rem); } form select.form-control { font-weight: bold; color: rgba(58, 58, 58, 0.52); height: calc(1.5rem + 1.5rem); } form input[type=text], form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } form label { font-size: 1.0714285714rem; font-weight: bold; } form .custom-file { display: none; } form .custom-file + label { color: #3A3A3A; margin-bottom: 0; } form .select-wrap, form .user-edit, form .date-edit { position: relative; } form .select-wrap::after, form .user-edit::after, form .date-edit::after { position: absolute; font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; top: 0; bottom: 0; right: 1rem; margin: auto; height: 1.5rem; color: #979797; pointer-events: none; } form .select-wrap.col-lg-6::after, form .col-lg-6.user-edit::after, form .col-lg-6.date-edit::after { right: 2rem; } form .date-edit::after { content: ""; } form .user-edit::after { content: ""; } form .form-note { font-family: "Noto Sans JP", sans-serif; font-size: 1.0714285714rem; color: #333; } form input.add_input { -webkit-transition: all 0.5s; transition: all 0.5s; opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; } form input.add_input.open { opacity: 1; height: calc(1.5em + 1.5rem); padding-top: 0.75rem; padding-bottom: 0.75rem; margin-bottom: 1rem; } form .sel02, form .sel03 { display: none; } .my-form .form-control:not(.white) { border: none; background-color: #D4E5FA; } .my-form .form-control.required { background: #F8DAF0; } .my-select { padding: 0.125rem; height: calc(1em + 0.5rem + 2px); font-weight: bold; border-color: #0059C1; font-size: 1.0714285714rem; background: transparent; } @-webkit-keyframes show { from { opacity: 0; } to { opacity: 1; } } @keyframes show { from { opacity: 0; } to { opacity: 1; } } .edit-txt { padding: 0; display: none; } .edit-txt.open { display: block; -webkit-animation: show 1s linear 0s; animation: show 1s linear 0s; padding: 0.5rem; padding: 0.75rem; } /*-------------------------------------------------------------- # プログレスバー --------------------------------------------------------------*/ .progress-block .progress-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0.5rem; } .progress-block .progress-top .result-block { font-size: 0.9285714286rem; } .progress-block .progress-top .result-block .result { font-size: 2.2857142857rem; font-weight: bold; font-family: "Montserrat", sans-serif; color: #0059C1; letter-spacing: 3px; } .progress-block .progress-top .build-block { padding-left: 1rem; font-size: 0.9285714286rem; } .progress-block .progress-top .build-block .build { font-size: 2.2857142857rem; font-weight: bold; font-family: "Montserrat", sans-serif; color: #0059C1; letter-spacing: 3px; } .progress-block .progress-top .build-block .unit { color: #3A3A3A; font-weight: normal !important; } .progress-block .progress-top .yoy-block { margin-left: auto; text-align: right; } .progress-block .progress-top .yoy-block p { font-size: 0.8571428571rem; font-family: "HiraKakuProN-W6", "ヒラギノ角ゴ ProN W6", sans-serif; } .progress-block .progress-top .yoy-block .yoy-num { font-size: 1.0714285714rem; font-family: "Montserrat", sans-serif; letter-spacing: 1px; } .progress-block .progress-top .yoy-block .yoy-num.red { color: #980023; } .progress-block .progress-top .yoy-block .yoy-num.green { color: #009835; } .progress-block .progress { position: relative; } .progress-block .progress .progress-bar { position: absolute; left: 0; height: 100%; } .progress-block .progress .progress-bar:nth-of-type(1) { z-index: 150; } .progress-block .progress .progress-bar:nth-of-type(2) { z-index: 75; } .progress-block .progress .progress-bar:nth-of-type(3) { z-index: 50; } .progress-block .progress .bar-result { background: #0059C1; } .progress-block .progress .bar-previous { background: #980023; } .progress-block .progress .bar-objective { background: #009835; } .progress-block .progress.over { width: calc(100vw - 20px); } .progress-block .progress.over::after { position: absolute; content: ""; width: 10px; height: 16px; background-color: #009835; right: 0; z-index: 101; } .progress-block .progress-bottom { margin-top: 0.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; } .progress-block .progress-bottom .objective-amount, .progress-block .progress-bottom .objective-rate { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .progress-block .progress-bottom .objective-amount span, .progress-block .progress-bottom .objective-rate span { font-size: 0.8571428571rem; font-family: "HiraKakuProN-W6", "ヒラギノ角ゴ ProN W6", sans-serif; } .progress-block .progress-bottom .objective-amount span:first-of-type, .progress-block .progress-bottom .objective-rate span:first-of-type { margin-right: 0.25rem; } .progress-block .progress-bottom .objective-amount .objective, .progress-block .progress-bottom .objective-amount .rate, .progress-block .progress-bottom .objective-amount .per, .progress-block .progress-bottom .objective-amount .build, .progress-block .progress-bottom .objective-rate .objective, .progress-block .progress-bottom .objective-rate .rate, .progress-block .progress-bottom .objective-rate .per, .progress-block .progress-bottom .objective-rate .build { font-family: "Montserrat", sans-serif; font-size: 1.0714285714rem; } .progress-block .progress-bottom .objective-amount { color: #009835; min-width: 50%; } .progress-block .progress-bottom .objective-amount .objective { color: #009835; margin-left: auto; letter-spacing: 2px; } .progress-block .progress-bottom .objective-amount .build { color: #009835; margin-left: 0.625rem; letter-spacing: 2px; } .progress-block .progress-bottom .objective-rate { color: #0059C1; margin-left: auto; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .progress-block .progress-bottom .objective-rate .rate { margin-left: 0.5rem; } .progress-block .progress-bottom .objective-rate .rate, .progress-block .progress-bottom .objective-rate .per { color: #0059C1; letter-spacing: 1px; } .progress-block .progress-bottom .objective-rate.green .rate, .progress-block .progress-bottom .objective-rate.green .per { color: #009835; } /*-------------------------------------------------------------- # ブロック --------------------------------------------------------------*/ .client-info { font-weight: bold; position: relative; } .client-info .client-addr { font-size: 0.8571428571rem; margin-bottom: 0.5rem; } .client-info .client-furi { font-size: 0.8571428571rem; margin-bottom: 0.5rem; } .client-info .client-name { font-size: 1.2857142857rem; font-family: "Noto Sans JP", sans-serif; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; } .client-info .client-name .sex-0 { display: none; } .client-info .client-name .sex-1::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #0059C1; } .client-info .client-name .sex-2::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #FC5F5F; } .client-info .client-name .honorific { font-size: 0.9285714286rem; padding-left: 0; } .client-info .mention-button { position: absolute; right: 15px; top: 0; } .client-info .mention-button button { width: 37px; height: 37px; border-radius: 50%; background: #FFCE00; } .client-info .mention-button button i[class*=fa-] { color: #FF0000; } .client-tel .tel { font-family: "Montserrat", sans-serif; font-weight: bold; } .client-addr .addr { font-size: 0.8571428571rem; font-weight: bold; } .client-mail .email { font-family: "Montserrat", sans-serif; font-weight: bold; font-size: 0.9285714286rem; } .contact-date { font-size: 0.7142857143rem; font-weight: bold; color: #888; padding-left: 0; padding-right: 0; font-family: "HiraKakuProN-W6", "ヒラギノ角ゴ ProN W6", sans-serif; } .contact-status { font-size: 0.8571428571rem; font-family: "小塚ゴシック Pro", "Kozuka Gothic Pro", sans-serif; font-weight: 500; } .collapse-block { padding: 1.25rem 0; } .collapse-block button { line-height: 1; height: 54px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -moz-appearance: none; appearance: none; -webkit-appearance: none; border: none; background: -webkit-gradient(linear, right top, left top, from(#005ECC), to(#004290)); background: linear-gradient(to left, #005ECC, #004290); color: #fff; position: relative; text-align: left; padding: 1rem; font-size: 1.0714285714rem; } .collapse-block button i[class*=fa-] { font-size: 1.1428571429rem; margin-right: 0.5rem; } .collapse-block button::after { position: absolute; right: 0; top: 0; bottom: 0; margin: auto 1rem; height: 0.5rem; font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; font-size: 0.8571428571rem; color: #fff; } .collapse-block button.open::after { content: ""; } .collapse-block.warning button { background: #980023; } .collapse-block.warning li > span:last-of-type { font-weight: bold; } .collapse-block.warning .matter { font-weight: bold; } .collapse-block.warning .right-style > span { font-weight: bold; } .collapse-wh { padding: 1.25rem 0; } .collapse-wh button { background: #fff; border-top: 1px solid #dee2e6; border-bottom: 1px dashed #dee2e6; color: #333333; line-height: 1; height: 54px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -moz-appearance: none; appearance: none; -webkit-appearance: none; border-left: none; border-right: none; position: relative; text-align: left; padding: 1rem; font-size: 1.0714285714rem; } .collapse-wh button i[class*=fa-] { font-size: 1.1428571429rem; margin-right: 0.5rem; } .collapse-wh button::after { position: absolute; right: 0; top: 0; bottom: 0; margin: auto 1rem; height: 0.5rem; font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; font-size: 0.8571428571rem; color: #0058FF; } .collapse-wh button.open::after { content: ""; } .collapse-wh button .status { width: 30%; } .collapse-wh button .amount { font-weight: bold; color: #747474; font-size: 1.4285714286rem; } .nav-block .nav { display: -webkit-box; display: -ms-flexbox; display: flex; } .nav-block .nav li { -webkit-box-flex: 1; -ms-flex: 1 0 33.3333%; flex: 1 0 33.3333%; } .nav-block .nav li a { display: block; text-align: center; font-family: "Montserrat", sans-serif; padding: 1rem 0; line-height: 1; } .nav-block .nav li a.active { font-weight: bold; position: relative; } .nav-block .nav li a.active::after { position: absolute; bottom: -1px; left: 0; content: ""; display: block; width: 100%; height: 2.5px; margin: 0; } .report-block .nav { background-color: rgba(0, 88, 255, 0.75); } .report-block li a { color: #D0D6DD; border-bottom: 1px solid #E2E2E2; } .report-block li a.active { color: #fff; } .report-block li a.active::after { background-color: #fff; } .status-block .nav { background-color: rgba(0, 66, 144, 0.1); } .status-block li a { color: #6C7B8A; border-bottom: 1px solid #E2E2E2; } .status-block li a.active { color: #140F26; } .status-block li a.active::after { background-color: #140F26; } .section-block .nav { background-color: rgba(0, 66, 144, 0.04); } .section-block li a { color: rgba(20, 15, 38, 0.45); border-bottom: 1px solid rgba(108, 123, 138, 0.08); } .section-block li a.active { color: #140F26; } .section-block li a.active::after { background-color: #140F26; } .section-block li a.back { color: #6C7B8A; } .section-block li .dropdown-menu { min-width: 5.125rem; left: 50% !important; -webkit-transform: translate3d(-50%, 38px, 0px) !important; transform: translate3d(-50%, 38px, 0px) !important; } .section-block li .dropdown-menu a { padding: 0.5rem; border-bottom: none; font-weight: bold; -webkit-transition: all 0.3s; transition: all 0.3s; font-size: 1.0714285714rem; color: #000000; } .section-block li .dropdown-menu a:hover { background-color: rgba(203, 192, 192, 0.34); color: #4d4d4d; } .staff-block > div { padding-left: 1.5rem; padding-right: 1.5rem; } .staff-block .staff-sales { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; } .staff-block .staff-sales::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-sales.png); background-position: center right; background-repeat: no-repeat; margin-right: 0.5rem; } .staff-block .staff-designers { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; } .staff-block .staff-designers::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-designers.png); background-position: center right; background-repeat: no-repeat; margin-right: 0.5rem; } .staff-block .staff-technician { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; } .staff-block .staff-technician::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-technician.png); background-position: center right; background-repeat: no-repeat; margin-right: 0.5rem; } .staff-block .staff-field { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; } .staff-block .staff-field::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-field.png); background-position: center right; background-repeat: no-repeat; margin-right: 0.5rem; } .staff-block .staff-coordinator { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; } .staff-block .staff-coordinator::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-coordinator.png); background-position: center right; background-repeat: no-repeat; margin-right: 0.5rem; } .staff-block .staff-planner { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; } .staff-block .staff-planner::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-planner.png); background-position: center right; background-repeat: no-repeat; margin-right: 0.5rem; } .matter-info-block .matter-info-inner { padding: 3rem 0; position: relative; } .matter-info-block .matter-info-inner::before { position: absolute; font-size: 11.25rem; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: rgba(0, 88, 255, 0.2); top: 0; font-weight: bold; } .matter-info-block .matter-info-inner#error::before { color: rgba(253, 182, 174, 0.2); } .matter-info-block#complete .matter-info-inner::before { content: "完"; } .matter-info-block#unfinished .matter-info-inner::before { content: "着"; } .matter-info-block#tentative .matter-info-inner::before { content: "仮"; color: rgba(225, 4, 210, 0.3); } .matter-info-block#order .matter-info-inner::before { content: "受"; color: rgba(225, 4, 210, 0.3); } .matter-info-block#expected-a .matter-info-inner::before { content: "A"; color: rgba(0, 255, 160, 0.3); } .matter-info-block#expected-b .matter-info-inner::before { content: "B"; color: rgba(0, 255, 160, 0.3); } .matter-info-block#expected-c .matter-info-inner::before { content: "C"; color: rgba(0, 255, 160, 0.3); } .matter-info-block .matter-status { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .matter-info-block .matter-status::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-status.png); background-position: center; background-repeat: no-repeat; margin-right: 3.5rem; } .matter-info-block .matter-status.progress-link { position: relative; } .matter-info-block .matter-status.progress-link .link-progress { position: absolute; right: -32px; } .matter-info-block .matter-status.matter-error { color: #C70000; position: relative; } .matter-info-block .matter-status.matter-error .warning { position: absolute; right: -32px; } .matter-info-block .matter-product_home { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .matter-info-block .matter-product_home::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-product_home.png); background-position: center; background-repeat: no-repeat; margin-right: 3.5rem; } .matter-info-block .matter-product_home.progress-link { position: relative; } .matter-info-block .matter-product_home.progress-link .link-progress { position: absolute; right: -32px; } .matter-info-block .matter-product_home.matter-error { color: #C70000; position: relative; } .matter-info-block .matter-product_home.matter-error .warning { position: absolute; right: -32px; } .matter-info-block .matter-product_stone { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .matter-info-block .matter-product_stone::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-product_stone.png); background-position: center; background-repeat: no-repeat; margin-right: 3.5rem; } .matter-info-block .matter-product_stone.progress-link { position: relative; } .matter-info-block .matter-product_stone.progress-link .link-progress { position: absolute; right: -32px; } .matter-info-block .matter-product_stone.matter-error { color: #C70000; position: relative; } .matter-info-block .matter-product_stone.matter-error .warning { position: absolute; right: -32px; } .matter-info-block .matter-product_bridal { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .matter-info-block .matter-product_bridal::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-product_bridal.png); background-position: center; background-repeat: no-repeat; margin-right: 3.5rem; } .matter-info-block .matter-product_bridal.progress-link { position: relative; } .matter-info-block .matter-product_bridal.progress-link .link-progress { position: absolute; right: -32px; } .matter-info-block .matter-product_bridal.matter-error { color: #C70000; position: relative; } .matter-info-block .matter-product_bridal.matter-error .warning { position: absolute; right: -32px; } .matter-info-block .matter-product_architectural_stone { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .matter-info-block .matter-product_architectural_stone::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-product_architectural_stone.png); background-position: center; background-repeat: no-repeat; margin-right: 3.5rem; } .matter-info-block .matter-product_architectural_stone.progress-link { position: relative; } .matter-info-block .matter-product_architectural_stone.progress-link .link-progress { position: absolute; right: -32px; } .matter-info-block .matter-product_architectural_stone.matter-error { color: #C70000; position: relative; } .matter-info-block .matter-product_architectural_stone.matter-error .warning { position: absolute; right: -32px; } .matter-info-block .matter-product_hotel { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .matter-info-block .matter-product_hotel::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-product_hotel.png); background-position: center; background-repeat: no-repeat; margin-right: 3.5rem; } .matter-info-block .matter-product_hotel.progress-link { position: relative; } .matter-info-block .matter-product_hotel.progress-link .link-progress { position: absolute; right: -32px; } .matter-info-block .matter-product_hotel.matter-error { color: #C70000; position: relative; } .matter-info-block .matter-product_hotel.matter-error .warning { position: absolute; right: -32px; } .matter-info-block .matter-product_tourism { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .matter-info-block .matter-product_tourism::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-product_tourism.png); background-position: center; background-repeat: no-repeat; margin-right: 3.5rem; } .matter-info-block .matter-product_tourism.progress-link { position: relative; } .matter-info-block .matter-product_tourism.progress-link .link-progress { position: absolute; right: -32px; } .matter-info-block .matter-product_tourism.matter-error { color: #C70000; position: relative; } .matter-info-block .matter-product_tourism.matter-error .warning { position: absolute; right: -32px; } .matter-info-block .matter-product_sw { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .matter-info-block .matter-product_sw::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-product_sw.png); background-position: center; background-repeat: no-repeat; margin-right: 3.5rem; } .matter-info-block .matter-product_sw.progress-link { position: relative; } .matter-info-block .matter-product_sw.progress-link .link-progress { position: absolute; right: -32px; } .matter-info-block .matter-product_sw.matter-error { color: #C70000; position: relative; } .matter-info-block .matter-product_sw.matter-error .warning { position: absolute; right: -32px; } .matter-info-block .matter-amount { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .matter-info-block .matter-amount::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-amount.png); background-position: center; background-repeat: no-repeat; margin-right: 3.5rem; } .matter-info-block .matter-amount.progress-link { position: relative; } .matter-info-block .matter-amount.progress-link .link-progress { position: absolute; right: -32px; } .matter-info-block .matter-amount.matter-error { color: #C70000; position: relative; } .matter-info-block .matter-amount.matter-error .warning { position: absolute; right: -32px; } .matter-info-block .matter-provisional { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .matter-info-block .matter-provisional::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-provisional.png); background-position: center; background-repeat: no-repeat; margin-right: 3.5rem; } .matter-info-block .matter-provisional.progress-link { position: relative; } .matter-info-block .matter-provisional.progress-link .link-progress { position: absolute; right: -32px; } .matter-info-block .matter-provisional.matter-error { color: #C70000; position: relative; } .matter-info-block .matter-provisional.matter-error .warning { position: absolute; right: -32px; } .matter-info-block .matter-start { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .matter-info-block .matter-start::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-start.png); background-position: center; background-repeat: no-repeat; margin-right: 3.5rem; } .matter-info-block .matter-start.progress-link { position: relative; } .matter-info-block .matter-start.progress-link .link-progress { position: absolute; right: -32px; } .matter-info-block .matter-start.matter-error { color: #C70000; position: relative; } .matter-info-block .matter-start.matter-error .warning { position: absolute; right: -32px; } .matter-info-block .matter-complete { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .matter-info-block .matter-complete::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-complete.png); background-position: center; background-repeat: no-repeat; margin-right: 3.5rem; } .matter-info-block .matter-complete.progress-link { position: relative; } .matter-info-block .matter-complete.progress-link .link-progress { position: absolute; right: -32px; } .matter-info-block .matter-complete.matter-error { color: #C70000; position: relative; } .matter-info-block .matter-complete.matter-error .warning { position: absolute; right: -32px; } .matter-info-block .matter-deposit { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .matter-info-block .matter-deposit::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-deposit.png); background-position: center; background-repeat: no-repeat; margin-right: 3.5rem; } .matter-info-block .matter-deposit.progress-link { position: relative; } .matter-info-block .matter-deposit.progress-link .link-progress { position: absolute; right: -32px; } .matter-info-block .matter-deposit.matter-error { color: #C70000; position: relative; } .matter-info-block .matter-deposit.matter-error .warning { position: absolute; right: -32px; } .matter-info-block .matter-payday { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .matter-info-block .matter-payday::before { content: ""; display: inline-block; width: 49px; height: 39px; background-image: url(../img/icon-payday.png); background-position: center; background-repeat: no-repeat; margin-right: 3.5rem; } .matter-info-block .matter-payday.progress-link { position: relative; } .matter-info-block .matter-payday.progress-link .link-progress { position: absolute; right: -32px; } .matter-info-block .matter-payday.matter-error { color: #C70000; position: relative; } .matter-info-block .matter-payday.matter-error .warning { position: absolute; right: -32px; } @media (max-width: 991.98px) { .matter-info-block .matter-info-inner { max-width: 70%; margin: 0 auto; } } .client-block > div, .handle-block > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: bold; border-bottom: 1px solid #ccc; height: 56px; } .client-block > div:first-of-type, .handle-block > div:first-of-type { border-top: 1px solid #ccc; } .client-block .main-client::before, .handle-block .main-client::before, .client-block .handle-details-block::before, .handle-block .handle-details-block::before, .client-block .client-details-block::before, .handle-block .client-details-block::before, .client-block .handle-block::before, .handle-block .handle-block::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #0059C1; width: 20px; margin-right: 0.5rem; display: inline-block; } .client-block .sub-client, .handle-block .sub-client { -webkit-transition: all 0.3s; transition: all 0.3s; } .client-block .sub-client::before, .handle-block .sub-client::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #A7A7A7; width: 20px; margin-right: 0.5rem; display: inline-block; } .handle-block > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: bold; border-bottom: 1px solid #ccc; height: 56px; } .handle-block > div:first-of-type { border-top: 1px solid #ccc; } .handle-block .main-handle::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #0059C1; width: 20px; margin-right: 0.5rem; display: inline-block; } .handle-block .sub-handle { -webkit-transition: all 0.3s; transition: all 0.3s; } .handle-block .sub-handle::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #A7A7A7; width: 20px; margin-right: 0.5rem; display: inline-block; } .handle-block .coust-handle { -webkit-transition: all 0.3s; transition: all 0.3s; } .handle-block .coust-handle::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #0059C1; width: 20px; margin-right: 0.5rem; display: inline-block; } .client-details-block > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: bold; margin-bottom: 0.75rem; } .client-details-block .main-client::before, .client-details-block .handle-details-block::before, .client-details-block .handle-block::before, .client-details-block .client-details-block::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #0059C1; width: 20px; margin-right: 0.5rem; display: inline-block; } .client-details-block .sub-client { -webkit-transition: all 0.3s; transition: all 0.3s; } .client-details-block .sub-client::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #A7A7A7; width: 20px; margin-right: 0.5rem; display: inline-block; } .handle-details-block > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: bold; margin-bottom: 0.75rem; } .handle-details-block .main-handle::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #0059C1; width: 20px; margin-right: 0.5rem; display: inline-block; } .handle-details-block .sub-handle { -webkit-transition: all 0.3s; transition: all 0.3s; } .handle-details-block .sub-handle::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #A7A7A7; width: 20px; margin-right: 0.5rem; display: inline-block; } .handle-details-block .coust-handle { -webkit-transition: all 0.3s; transition: all 0.3s; } .handle-details-block .coust-handle::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; color: #0059C1; width: 20px; margin-right: 0.5rem; display: inline-block; } .chart-block .chart-contents { border: 1px solid #1A1311; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 0.7142857143rem; } .chart-block .chart-contents > div { padding: 0.125rem 0.35rem; } .chart-block .chart-contents .chart-label { -webkit-box-flex: 1; -ms-flex: 1 0 40%; flex: 1 0 40%; max-width: 40%; border-right: 1px solid #1A1311; color: #fff; background-color: #909192; } .chart-block .chart-contents .chart-per { -webkit-box-flex: 1; -ms-flex: 1 0 25%; flex: 1 0 25%; max-width: 25%; position: relative; } .chart-block .chart-contents .chart-per::after { content: "/"; position: absolute; right: 0; } .chart-block .chart-contents .chart-amount { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; text-align: right; } .chart-block .chart-data > div:nth-of-type(1) .chart-label { background-color: #BB5179; color: #fff; } .chart-block .chart-data > div:nth-of-type(2) .chart-label { background-color: #D7785D; color: #fff; } .chart-block .chart-data > div:nth-of-type(3) .chart-label { background-color: #FAFF67; color: #000; } .chart-block .chart-data > div:nth-of-type(4) .chart-label { background-color: #8DC254; color: #fff; } .chart-block .chart-data > div:nth-of-type(5) .chart-label { background-color: #58A27C; color: #fff; } .chart-block .chart-data > div:nth-of-type(6) .chart-label { background-color: #3C00FF; color: #fff; } .chart-block .chart-data > div:nth-of-type(7) .chart-label { background-color: #1abc9c; color: #fff; } .chart-block .chart-data > div:nth-of-type(8) .chart-label { background-color: #2ecc71; color: #fff; } .chart-block .chart-data > div:nth-of-type(9) .chart-label { background-color: #3498db; color: #fff; } .chart-block .chart-data > div:nth-of-type(10) .chart-label { background-color: #9b59b6; color: #fff; } .chart-block .chart-data > div:nth-of-type(11) .chart-label { background-color: #58A27C; color: #fff; } .chart-block .chart-data > div:nth-of-type(12) .chart-label { background-color: #34495e; color: #fff; } .chart-block .chart-data > div:nth-of-type(13) .chart-label { background-color: #16a085; color: #fff; } .chart-block .chart-data > div:nth-of-type(14) .chart-label { background-color: #27ae60; color: #fff; } .chart-block .chart-data > div:nth-of-type(15) .chart-label { background-color: #2980b9; color: #fff; } .chart-block .chart-data > div:nth-of-type(16) .chart-label { background-color: #8e44ad; color: #fff; } .chart-block .chart-data > div:nth-of-type(17) .chart-label { background-color: #2c3e50; color: #fff; } .chart-block .chart-data > div:nth-of-type(18) .chart-label { background-color: #f1c40f; color: #000; } .chart-block .chart-data > div:nth-of-type(19) .chart-label { background-color: #e67e22; color: #fff; } .chart-block .chart-data > div:nth-of-type(20) .chart-label { background-color: #e74c3c; color: #fff; } .chart-block .chart-data > div:nth-of-type(21) .chart-label { background-color: #ecf0f1; color: #000; } .chart-block .chart-data > div:nth-of-type(22) .chart-label { background-color: #95a5a6; color: #fff; } .chart-block .chart-data > div:nth-of-type(23) .chart-label { background-color: #f39c12; color: #fff; } .chart-block .chart-data > div:nth-of-type(24) .chart-label { background-color: #d35400; color: #fff; } .chart-block .chart-data > div:nth-of-type(25) .chart-label { background-color: #c0392b; color: #fff; } .chart-block .chart-data > div:nth-of-type(26) .chart-label { background-color: #FFC312; color: #000; } .chart-block .chart-data > div:nth-of-type(27) .chart-label { background-color: #C4E538; color: #000; } .chart-block .chart-data > div:nth-of-type(28) .chart-label { background-color: #12CBC4; color: #fff; } .chart-block .chart-data > div:nth-of-type(29) .chart-label { background-color: #FDA7DF; color: #000; } .chart-block .chart-data > div:nth-of-type(30) .chart-label { background-color: #ED4C67; color: #fff; } .chart-block .chart-data > div:nth-of-type(31) .chart-label { background-color: #F79F1F; color: #fff; } .chart-block .chart-data > div:nth-of-type(32) .chart-label { background-color: #A3CB38; color: #fff; } .chart-block .chart-data > div:nth-of-type(33) .chart-label { background-color: #1289A7; color: #fff; } .chart-block .chart-data > div:nth-of-type(34) .chart-label { background-color: #B53471; color: #fff; } .chart-block .chart-data > div:nth-of-type(35) .chart-label { background-color: #EE5A24; color: #fff; } .chart-block .chart-data > div:nth-of-type(36) .chart-label { background-color: #009432; color: #fff; } .chart-block .chart-data > div:nth-of-type(37) .chart-label { background-color: #0652DD; color: #fff; } .chart-block .chart-data > div:nth-of-type(38) .chart-label { background-color: #9980FA; color: #fff; } .chart-block .chart-data > div:nth-of-type(39) .chart-label { background-color: #833471; color: #fff; } .chart-block .chart-data > div:nth-of-type(40) .chart-label { background-color: #EA2027; color: #fff; } .emergency-block { background: -webkit-gradient(linear, left top, right top, from(#FF0000), to(#800000)); background: linear-gradient(to right, #FF0000, #800000); border-radius: 6px; margin-bottom: 1rem; } .emergency-block a { display: block; padding: 0.875rem; color: #fff; } .emergency-block a:hover { color: #d9d9d9; } .emergency-block a .matter-title { font-size: 1.2857142857rem; font-weight: normal; } .emergency-block a .const-status { font-size: 1.0714285714rem; font-weight: bold; margin-bottom: 0.5rem; } .emergency-block a .main-client, .emergency-block a .handle-block, .emergency-block a .client-details-block, .emergency-block a .handle-details-block { font-size: 0.8571428571rem; } .emergency-block a .next-task { font-size: 0.8571428571rem; font-weight: bold; margin-bottom: 0.25rem; } .emergency-block a .next-task-day { font-size: 0.8571428571rem; font-weight: bold; letter-spacing: 2px; margin-bottom: 0.25rem; } .emergency-block a .timeline { font-size: 1.2857142857rem; font-weight: bold; color: #FFEB00; letter-spacing: 2px; } .emergency-block a .const-timeline, .emergency-block a .memorial-day, .emergency-block a .clean-timeline { font-size: 1.0714285714rem; letter-spacing: 2px; } .emergency-block a .const-timeline::before, .emergency-block a .memorial-day::before, .emergency-block a .clean-timeline::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; margin-right: 0.25rem; } .emergency-block a .const-timeline::before { content: ""; } .emergency-block a .memorial-day::before { content: ""; } .emergency-block a .clean-timeline::before { content: ""; } .task-block { border-radius: 6px; border: 1px solid #CCCCCC; margin-bottom: 1rem; } .task-block a { display: block; color: #3A3A3A; } .task-block a > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .task-block p { margin-bottom: 0; padding: 0.5rem 0.75rem; } .task-block .task-header { border-bottom: 1px solid #CCCCCC; background: #EBEBEB; } .task-block .task-header .task-matter { font-size: 1.0714285714rem; } .task-block .task-header .task-client { font-size: 0.8571428571rem; margin-left: auto; } .task-block .task-content { border-bottom: 1px solid #CCCCCC; } .task-block .task-content p { padding-top: 0.75rem; padding-bottom: 0.75rem; } .task-block .task-content .task-status { font-size: 0.8571428571rem; font-weight: bold; } .task-block .task-content .task-next { margin-left: auto; font-size: 0.8571428571rem; font-weight: bold; display: -webkit-box; display: -ms-flexbox; display: flex; } .task-block .task-content .task-next .task-next-status { color: #004BA4; } .task-block .task-content .task-next .task-next-day { letter-spacing: 2px; padding-left: 0; } .task-block .task-footer > p { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } .task-block .task-footer > p:first-of-type { border-right: 1px solid #ccc; } .task-block .task-footer .const-timeline, .task-block .task-footer .memorial-day, .task-block .task-footer .clean-timeline { font-size: 0.9285714286rem; letter-spacing: 2px; } .task-block .task-footer .const-timeline::before, .task-block .task-footer .memorial-day::before, .task-block .task-footer .clean-timeline::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; margin-right: 0.25rem; } .task-block .task-footer .const-timeline::before { content: ""; } .task-block .task-footer .memorial-day::before { content: ""; } .task-block .task-footer .clean-timeline::before { content: ""; } .details-block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .details-block > div { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; text-align: center; } .details-block > div:last-of-type { border-left: 3px dotted #CCCCCC; } .details-block .details-type { color: #004BA4; } .details-block .details-type span { font-size: 0.8571428571rem; display: block; margin-bottom: 0.25rem; } .details-block .details-type i[class*=fa-] { font-size: 2.2857142857rem; } .details-block .details-block-date { font-size: 1.0714285714rem; letter-spacing: 2px; margin-top: 0.25rem; margin-bottom: 0; } .details-matter-block { background: -webkit-gradient(linear, left top, right top, from(#005ECC), to(#004290)); background: linear-gradient(to right, #005ECC, #004290); padding: 2.25rem 0; text-align: center; color: #fff; } .details-matter-block i[class*=fa-] { font-size: 3.8571428571rem; margin-bottom: 2rem; } .details-matter-block .details-matter-name { font-size: 1.4285714286rem; margin-bottom: 0.5rem; } .details-matter-block .details-matter-status { font-size: 2.0714285714rem; margin-bottom: 0; } .comment-block { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #dee2e6; } .comment-block > div { padding-left: 5px; padding-right: 5px; padding-top: 0.5rem; padding-bottom: 0.75rem; } .comment-image { -webkit-box-flex: 0; -ms-flex: 0 0 48px; flex: 0 0 48px; } .comment-image img { margin-top: 9px; } .comment-date, .comment-name { color: #888888; font-size: 0.7142857143rem; } .comment-name { padding-left: 1rem; } .comment-text { font-size: 0.9285714286rem; margin-bottom: 0; } .block-personal .person { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #dee2e6; padding-bottom: 0.75rem; } .block-personal .person > div { padding-left: 1rem; padding-right: 1rem; } .block-personal .person .person-call { margin-left: auto; } .block-personal .value > div { font-size: 0.8571428571rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 1rem; padding-right: 1rem; border-bottom: 1px dashed #dee2e6; padding-top: 0.75rem; padding-bottom: 0.75rem; } .block-personal .value > div > span.amount { margin-left: 1rem; text-align: right; } .block-personal .value > div > span:last-of-type { margin-left: auto; } .block-personal .value > div .num { font-weight: bold; color: #049938; font-family: "Montserrat", sans-serif; font-size: 1.4285714286rem; } .block-personal .value > div .num.zero { color: #004698; } .block-personal .value > div .num.dark { color: #747474; } .block-mk th { font-size: 1.0714285714rem; } .block-mk .tr { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .block-mk-left { -webkit-box-flex: 0; -ms-flex: 0 1 48%; flex: 0 1 48%; } .block-mk-center { -webkit-box-flex: 0; -ms-flex: 0 1 26%; flex: 0 1 26%; text-align: center; } .block-mk-right { -webkit-box-flex: 0; -ms-flex: 0 1 26%; flex: 0 1 26%; text-align: center; } .block-mk-comment { -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; font-size: 0.8571428571rem; padding: 0.5rem 0.25rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .block-mk-title { background: -webkit-gradient(linear, right top, left top, from(#005ECC), to(#004290)); background: linear-gradient(to left, #005ECC, #004290); color: #fff; font-weight: bold; } .block-mk-title > div { padding-top: 0.25rem; padding-bottom: 0.25rem; text-align: center; } .block-mk-contents .tr { background: rgba(235, 235, 235, 0.4); border-bottom: 1px solid #dee2e6; padding-top: 1rem; padding-bottom: 1rem; } .block-mk-contents .tr:nth-of-type(even) { background: rgba(212, 229, 250, 0.4); } .block-mk-contents .tr > div:not(.block-mk-comment) { font-weight: bold; padding-left: 0.25rem; padding-right: 0.25rem; } .block-mk-contents .tr .block-mk-center, .block-mk-contents .tr .block-mk-right { font-size: 0.9285714286rem; } .block-mk-contents i[class*=fa-] { font-size: 0.8571428571rem; margin-right: 0.5rem; } .block-mk-alert thead { background: #980023; } .block-mk-alert tbody tr:nth-of-type(even) { background: rgba(252, 95, 95, 0.2); } .approval-block .approval-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #3A3A3A; } .approval-block .approval-link i[class*=fa-] { width: 20px; height: 20px; font-size: 0.8571428571rem; color: #fff; margin-right: 0.5rem; } .status-block { border-bottom: 2px solid #dee2e6; margin-bottom: 1rem; } .status-block .status-block-status, .status-block .status-block-btn { margin-left: -5px; margin-right: -5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .status-block .status-block-status > div, .status-block .status-block-btn > div { padding-left: 5px; padding-right: 5px; } .status-block .status-block-status > div:first-of-type, .status-block .status-block-btn > div:first-of-type { -webkit-box-flex: 0; -ms-flex: 0 0 45%; flex: 0 0 45%; } .status-block .status-block-status > div:last-of-type, .status-block .status-block-btn > div:last-of-type { -webkit-box-flex: 0; -ms-flex: 0 0 55%; flex: 0 0 55%; } .status-block .status-block-status .form-group, .status-block .status-block-btn .form-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .status-block .status-block-status .form-group .select-wrap, .status-block .status-block-status .form-group form .date-edit, form .status-block .status-block-status .form-group .date-edit, .status-block .status-block-status .form-group form .user-edit, form .status-block .status-block-status .form-group .user-edit, .status-block .status-block-btn .form-group .select-wrap, .status-block .status-block-btn .form-group form .date-edit, form .status-block .status-block-btn .form-group .date-edit, .status-block .status-block-btn .form-group form .user-edit, form .status-block .status-block-btn .form-group .user-edit { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; } .status-block .status-block-status .form-group .btns, .status-block .status-block-btn .form-group .btns { -webkit-box-flex: 1; -ms-flex: 1 0 43px; flex: 1 0 43px; } .status-block .status-block-status .select-wrap, .status-block .status-block-status form .date-edit, form .status-block .status-block-status .date-edit, .status-block .status-block-status form .user-edit, form .status-block .status-block-status .user-edit, .status-block .status-block-btn .select-wrap, .status-block .status-block-btn form .date-edit, form .status-block .status-block-btn .date-edit, .status-block .status-block-btn form .user-edit, form .status-block .status-block-btn .user-edit { width: 100%; } .status-block .status-block-status { border-bottom: 1px dashed #dee2e6; } .status-block .status-block-btn { padding-top: 1rem; } .status-block .status-block-btn .status-btn i { font-size: 1.25rem; color: #C18100; padding-left: 10px; } .status-block .btns { display: -webkit-box; display: -ms-flexbox; display: flex; } .status-block .btns .btn-add, .status-block .btns .btn-delete { padding-left: 0.25rem; } .status-block .btns .btn-add i, .status-block .btns .btn-delete i { font-size: 1.25rem; } .status-block .btns .btn-add { color: #1ec7fb; } .status-block .btns .btn-delete { color: #C70000; } /*-------------------------------------------------------------- # スワイプ --------------------------------------------------------------*/ .swipe ul, .active-schedule ul { list-style: none; padding-left: 0; } .swipe li, .active-schedule li { background: rgba(235, 235, 235, 0.4); display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #CCCCCC; } .swipe li:nth-of-type(odd), .active-schedule li:nth-of-type(odd) { background: rgba(212, 229, 250, 0.4); } .swipe li.limit, .active-schedule li.limit { background: rgba(252, 95, 95, 0.2); } .swipe li > *, .active-schedule li > * { padding: 0.75rem; font-weight: bold; /*font-size: 0.9375rem;*/ } .swipe li .th, .active-schedule li .th { -webkit-box-flex: 0; -ms-flex: 0 0 65%; flex: 0 0 65%; } .swipe li .td, .active-schedule li .td { -webkit-box-flex: 0; -ms-flex: 0 0 35%; flex: 0 0 35%; text-align: center; } .swipe li .td input:not(.form-control), .active-schedule li .td input:not(.form-control), .swipe li .td select:not(.form-control), .active-schedule li .td select:not(.form-control) { border: none; width: 100%; background: transparent; text-align: center; font-weight: bold; } .swipe li .td select:not(.form-control), .active-schedule li .td select:not(.form-control) { font-size: 0.9285714286rem; } .swipe .swipeleft, .swipe .my-comment, .swipe .matter-schedule .swipe-matter, .matter-schedule .swipe .swipe-matter, .active-schedule .swipeleft, .active-schedule .my-comment, .active-schedule .matter-schedule .swipe-matter, .matter-schedule .active-schedule .swipe-matter, .active-schedule .swipe-active { -webkit-transition: all 0.3s; transition: all 0.3s; } .swipe .swipeleft .deleteBtn, .swipe .my-comment .deleteBtn, .swipe .matter-schedule .swipe-matter .deleteBtn, .matter-schedule .swipe .swipe-matter .deleteBtn, .active-schedule .swipeleft .deleteBtn, .active-schedule .my-comment .deleteBtn, .active-schedule .matter-schedule .swipe-matter .deleteBtn, .matter-schedule .active-schedule .swipe-matter .deleteBtn, .active-schedule .swipe-active .deleteBtn, .swipe .swipeleft .addBtn, .swipe .my-comment .addBtn, .swipe .matter-schedule .swipe-matter .addBtn, .matter-schedule .swipe .swipe-matter .addBtn, .active-schedule .swipeleft .addBtn, .active-schedule .my-comment .addBtn, .active-schedule .matter-schedule .swipe-matter .addBtn, .matter-schedule .active-schedule .swipe-matter .addBtn, .active-schedule .swipe-active .addBtn { display: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .swipe .swipeleft.active, .swipe .active.my-comment, .swipe .matter-schedule .active.swipe-matter, .matter-schedule .swipe .active.swipe-matter, .active-schedule .swipeleft.active, .active-schedule .active.my-comment, .active-schedule .matter-schedule .active.swipe-matter, .matter-schedule .active-schedule .active.swipe-matter, .active-schedule .active.swipe-active { width: 100%; margin-left: -28%; } @media (min-width: 576px) { .swipe .swipeleft.active, .swipe .active.my-comment, .swipe .matter-schedule .active.swipe-matter, .matter-schedule .swipe .active.swipe-matter, .active-schedule .swipeleft.active, .active-schedule .active.my-comment, .active-schedule .matter-schedule .active.swipe-matter, .matter-schedule .active-schedule .active.swipe-matter, .active-schedule .active.swipe-active { max-width: 540px; } } @media (min-width: 768px) { .swipe .swipeleft.active, .swipe .active.my-comment, .swipe .matter-schedule .active.swipe-matter, .matter-schedule .swipe .active.swipe-matter, .active-schedule .swipeleft.active, .active-schedule .active.my-comment, .active-schedule .matter-schedule .active.swipe-matter, .matter-schedule .active-schedule .active.swipe-matter, .active-schedule .active.swipe-active { max-width: 720px; } } @media (min-width: 992px) { .swipe .swipeleft.active, .swipe .active.my-comment, .swipe .matter-schedule .active.swipe-matter, .matter-schedule .swipe .active.swipe-matter, .active-schedule .swipeleft.active, .active-schedule .active.my-comment, .active-schedule .matter-schedule .active.swipe-matter, .matter-schedule .active-schedule .active.swipe-matter, .active-schedule .active.swipe-active { max-width: 960px; } } @media (min-width: 1200px) { .swipe .swipeleft.active, .swipe .active.my-comment, .swipe .matter-schedule .active.swipe-matter, .matter-schedule .swipe .active.swipe-matter, .active-schedule .swipeleft.active, .active-schedule .active.my-comment, .active-schedule .matter-schedule .active.swipe-matter, .matter-schedule .active-schedule .active.swipe-matter, .active-schedule .active.swipe-active { max-width: 1140px; } } .swipe .swipeleft.active .th, .swipe .active.my-comment .th, .swipe .matter-schedule .active.swipe-matter .th, .matter-schedule .swipe .active.swipe-matter .th, .active-schedule .swipeleft.active .th, .active-schedule .active.my-comment .th, .active-schedule .matter-schedule .active.swipe-matter .th, .matter-schedule .active-schedule .active.swipe-matter .th, .active-schedule .active.swipe-active .th { -webkit-box-flex: 0; -ms-flex: 0 0 55%; flex: 0 0 55%; } .swipe .swipeleft.active .td, .swipe .active.my-comment .td, .swipe .matter-schedule .active.swipe-matter .td, .matter-schedule .swipe .active.swipe-matter .td, .active-schedule .swipeleft.active .td, .active-schedule .active.my-comment .td, .active-schedule .matter-schedule .active.swipe-matter .td, .matter-schedule .active-schedule .active.swipe-matter .td, .active-schedule .active.swipe-active .td { -webkit-box-flex: 0; -ms-flex: 0 0 22%; flex: 0 0 22%; } .swipe .swipeleft.active .belowBtn, .swipe .active.my-comment .belowBtn, .swipe .matter-schedule .active.swipe-matter .belowBtn, .matter-schedule .swipe .active.swipe-matter .belowBtn, .active-schedule .swipeleft.active .belowBtn, .active-schedule .active.my-comment .belowBtn, .active-schedule .matter-schedule .active.swipe-matter .belowBtn, .matter-schedule .active-schedule .active.swipe-matter .belowBtn, .active-schedule .active.swipe-active .belowBtn, .swipe .swipeleft.active .deleteBtn, .swipe .active.my-comment .deleteBtn, .swipe .matter-schedule .active.swipe-matter .deleteBtn, .matter-schedule .swipe .active.swipe-matter .deleteBtn, .active-schedule .swipeleft.active .deleteBtn, .active-schedule .active.my-comment .deleteBtn, .active-schedule .matter-schedule .active.swipe-matter .deleteBtn, .matter-schedule .active-schedule .active.swipe-matter .deleteBtn, .active-schedule .active.swipe-active .deleteBtn, .swipe .swipeleft.active .editBtn, .swipe .active.my-comment .editBtn, .swipe .matter-schedule .active.swipe-matter .editBtn, .matter-schedule .swipe .active.swipe-matter .editBtn, .active-schedule .swipeleft.active .editBtn, .active-schedule .active.my-comment .editBtn, .active-schedule .matter-schedule .active.swipe-matter .editBtn, .matter-schedule .active-schedule .active.swipe-matter .editBtn, .active-schedule .active.swipe-active .editBtn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 0; -ms-flex: 0 0 17%; flex: 0 0 17%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; white-space: nowrap; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.7142857143rem; } .swipe .swipeleft.active .belowBtn::before, .swipe .active.my-comment .belowBtn::before, .swipe .matter-schedule .active.swipe-matter .belowBtn::before, .matter-schedule .swipe .active.swipe-matter .belowBtn::before, .active-schedule .swipeleft.active .belowBtn::before, .active-schedule .active.my-comment .belowBtn::before, .active-schedule .matter-schedule .active.swipe-matter .belowBtn::before, .matter-schedule .active-schedule .active.swipe-matter .belowBtn::before, .active-schedule .active.swipe-active .belowBtn::before, .swipe .swipeleft.active .deleteBtn::before, .swipe .active.my-comment .deleteBtn::before, .swipe .matter-schedule .active.swipe-matter .deleteBtn::before, .matter-schedule .swipe .active.swipe-matter .deleteBtn::before, .active-schedule .swipeleft.active .deleteBtn::before, .active-schedule .active.my-comment .deleteBtn::before, .active-schedule .matter-schedule .active.swipe-matter .deleteBtn::before, .matter-schedule .active-schedule .active.swipe-matter .deleteBtn::before, .active-schedule .active.swipe-active .deleteBtn::before, .swipe .swipeleft.active .editBtn::before, .swipe .active.my-comment .editBtn::before, .swipe .matter-schedule .active.swipe-matter .editBtn::before, .matter-schedule .swipe .active.swipe-matter .editBtn::before, .active-schedule .swipeleft.active .editBtn::before, .active-schedule .active.my-comment .editBtn::before, .active-schedule .matter-schedule .active.swipe-matter .editBtn::before, .matter-schedule .active-schedule .active.swipe-matter .editBtn::before, .active-schedule .active.swipe-active .editBtn::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 1.1428571429rem; } .swipe .swipeleft.active .belowBtn, .swipe .active.my-comment .belowBtn, .swipe .matter-schedule .active.swipe-matter .belowBtn, .matter-schedule .swipe .active.swipe-matter .belowBtn, .active-schedule .swipeleft.active .belowBtn, .active-schedule .active.my-comment .belowBtn, .active-schedule .matter-schedule .active.swipe-matter .belowBtn, .matter-schedule .active-schedule .active.swipe-matter .belowBtn, .active-schedule .active.swipe-active .belowBtn { background-color: #D4E5FA; } .swipe .swipeleft.active .belowBtn::before, .swipe .active.my-comment .belowBtn::before, .swipe .matter-schedule .active.swipe-matter .belowBtn::before, .matter-schedule .swipe .active.swipe-matter .belowBtn::before, .active-schedule .swipeleft.active .belowBtn::before, .active-schedule .active.my-comment .belowBtn::before, .active-schedule .matter-schedule .active.swipe-matter .belowBtn::before, .matter-schedule .active-schedule .active.swipe-matter .belowBtn::before, .active-schedule .active.swipe-active .belowBtn::before { content: ""; color: #0059C1; } .swipe .swipeleft.active .deleteBtn, .swipe .active.my-comment .deleteBtn, .swipe .matter-schedule .active.swipe-matter .deleteBtn, .matter-schedule .swipe .active.swipe-matter .deleteBtn, .active-schedule .swipeleft.active .deleteBtn, .active-schedule .active.my-comment .deleteBtn, .active-schedule .matter-schedule .active.swipe-matter .deleteBtn, .matter-schedule .active-schedule .active.swipe-matter .deleteBtn, .active-schedule .active.swipe-active .deleteBtn { background-color: #FFA3A3; color: #3A3A3A; } .swipe .swipeleft.active .deleteBtn::before, .swipe .active.my-comment .deleteBtn::before, .swipe .matter-schedule .active.swipe-matter .deleteBtn::before, .matter-schedule .swipe .active.swipe-matter .deleteBtn::before, .active-schedule .swipeleft.active .deleteBtn::before, .active-schedule .active.my-comment .deleteBtn::before, .active-schedule .matter-schedule .active.swipe-matter .deleteBtn::before, .matter-schedule .active-schedule .active.swipe-matter .deleteBtn::before, .active-schedule .active.swipe-active .deleteBtn::before { content: ""; color: #980023; } .swipe .swipeleft.active .editBtn, .swipe .active.my-comment .editBtn, .swipe .matter-schedule .active.swipe-matter .editBtn, .matter-schedule .swipe .active.swipe-matter .editBtn, .active-schedule .swipeleft.active .editBtn, .active-schedule .active.my-comment .editBtn, .active-schedule .matter-schedule .active.swipe-matter .editBtn, .matter-schedule .active-schedule .active.swipe-matter .editBtn, .active-schedule .active.swipe-active .editBtn { background-color: #C4F5DB; } .swipe .swipeleft.active .editBtn::before, .swipe .active.my-comment .editBtn::before, .swipe .matter-schedule .active.swipe-matter .editBtn::before, .matter-schedule .swipe .active.swipe-matter .editBtn::before, .active-schedule .swipeleft.active .editBtn::before, .active-schedule .active.my-comment .editBtn::before, .active-schedule .matter-schedule .active.swipe-matter .editBtn::before, .matter-schedule .active-schedule .active.swipe-matter .editBtn::before, .active-schedule .active.swipe-active .editBtn::before { content: ""; color: #2C7950; } .client-block .main-client .deleteBtn, .handle-block .main-client .deleteBtn, .client-block .handle-block .deleteBtn, .handle-block .handle-block .deleteBtn, .client-block .client-details-block .deleteBtn, .handle-block .client-details-block .deleteBtn, .client-block .handle-details-block .deleteBtn, .handle-block .handle-details-block .deleteBtn, .client-block .main-client .mainBtn, .handle-block .main-client .mainBtn, .client-block .handle-block .mainBtn, .handle-block .handle-block .mainBtn, .client-block .client-details-block .mainBtn, .handle-block .client-details-block .mainBtn, .client-block .handle-details-block .mainBtn, .handle-block .handle-details-block .mainBtn { display: none; } .client-block .sub-client.active, .handle-block .sub-client.active { background: #F4F4F4; width: 100vw; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding-left: 1rem; } .client-block .sub-client.active .deleteBtn, .handle-block .sub-client.active .deleteBtn, .client-block .sub-client.active .mainBtn, .handle-block .sub-client.active .mainBtn { display: inline-block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; text-align: center; padding: 0.5rem 0; font-size: 0.7142857143rem; } .client-block .sub-client.active .deleteBtn::before, .handle-block .sub-client.active .deleteBtn::before, .client-block .sub-client.active .mainBtn::before, .handle-block .sub-client.active .mainBtn::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; width: 20px; display: block; margin: 0 auto; font-size: 1.1428571429rem; } .client-block .sub-client.active .mainBtn, .handle-block .sub-client.active .mainBtn { border-left: 2px solid #fff; margin-left: auto; background: #FFEBB4; } .client-block .sub-client.active .mainBtn::before, .handle-block .sub-client.active .mainBtn::before { content: ""; color: #0059C1; } .client-block .sub-client.active .deleteBtn, .handle-block .sub-client.active .deleteBtn { background: #FFA3A3; } .client-block .sub-client.active .deleteBtn::before, .handle-block .sub-client.active .deleteBtn::before { content: ""; color: #980023; } .handle-block .sub-handle.active { background: #F4F4F4; width: 100vw; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding-left: 1rem; } .handle-block .sub-handle.active .deleteBtn, .handle-block .sub-handle.active .mainBtn { display: inline-block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; text-align: center; padding: 0.5rem 0; font-size: 0.7142857143rem; } .handle-block .sub-handle.active .deleteBtn::before, .handle-block .sub-handle.active .mainBtn::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; width: 20px; display: block; margin: 0 auto; font-size: 1.1428571429rem; } .handle-block .sub-handle.active .mainBtn { border-left: 2px solid #fff; margin-left: auto; background: #FFEBB4; } .handle-block .sub-handle.active .mainBtn::before { content: ""; color: #0059C1; } .handle-block .sub-handle.active .deleteBtn { background: #FFA3A3; } .handle-block .sub-handle.active .deleteBtn::before { content: ""; color: #980023; } .active-schedule ul { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .active-schedule ul { max-width: 540px; } } @media (min-width: 768px) { .active-schedule ul { max-width: 720px; } } @media (min-width: 992px) { .active-schedule ul { max-width: 960px; } } @media (min-width: 1200px) { .active-schedule ul { max-width: 1140px; } } .active-schedule li .th { -webkit-box-flex: 0; -ms-flex: 0 0 62%; flex: 0 0 62%; } .active-schedule li .td { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; } .active-schedule .swipe-active { position: relative; padding-left: 2.75rem; -ms-flex-wrap: wrap; flex-wrap: wrap; } .active-schedule .swipe-active .fa-bars { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 1rem; } .active-schedule .swipe-active .th, .active-schedule .swipe-active .td { padding-left: 0; padding-right: 0; } .active-schedule .swipe-active .th .form-control, .active-schedule .swipe-active .td .form-control { padding-top: 0.5rem; padding-bottom: 0.5rem; height: calc(1.5em + 1rem); } .active-schedule .swipe-active .th input, .active-schedule .swipe-active .td input { width: 80% !important; text-align: left !important; } .active-schedule .swipe-active .th { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; padding-bottom: 0.65rem; border-bottom: 1px dotted #CCCCCC; } .active-schedule .swipe-active .td { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; padding-top: 0.65rem; } .active-schedule .swipe-active.active { max-height: 96.78px; position: relative; width: auto; right: 0; margin-left: -23%; } .active-schedule .swipe-active.active .th { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .active-schedule .swipe-active.active .td { -webkit-box-flex: 0; -ms-flex: 0 0 30%; flex: 0 0 30%; } .active-schedule .swipe-active.active .swipeBtn { position: absolute; top: 0; right: 0; padding: 0; width: 30%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-transition: all 0.3s; transition: all 0.3s; } .active-schedule .swipe-active.active .belowBtn, .active-schedule .swipe-active.active .deleteBtn, .active-schedule .swipe-active.active .editBtn, .active-schedule .swipe-active.active .compBtn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; white-space: nowrap; padding-top: 0.28rem; padding-bottom: 0.28rem; font-size: 0.7142857143rem; } .active-schedule .swipe-active.active .belowBtn::before, .active-schedule .swipe-active.active .deleteBtn::before, .active-schedule .swipe-active.active .editBtn::before, .active-schedule .swipe-active.active .compBtn::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 1.1428571429rem; } .active-schedule .swipe-active.active .belowBtn { background-color: #D4E5FA; } .active-schedule .swipe-active.active .belowBtn::before { content: ""; color: #0059C1; } .active-schedule .swipe-active.active .deleteBtn { background-color: #FFA3A3; color: #3A3A3A; } .active-schedule .swipe-active.active .deleteBtn::before { content: ""; color: #980023; } .active-schedule .swipe-active.active .editBtn { background-color: #C4F5DB; } .active-schedule .swipe-active.active .editBtn::before { content: ""; color: #2C7950; } .active-schedule .swipe-active.active .compBtn { background-color: #0059C1; color: #fff; } .active-schedule .swipe-active.active .compBtn button { color: #fff; } .active-schedule .swipe-active.active .compBtn::before { content: ""; color: #fff; } .matter-schedule ul { list-style: none; padding-left: 0; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; overflow: hidden; } @media (min-width: 576px) { .matter-schedule ul { max-width: 540px; } } @media (min-width: 768px) { .matter-schedule ul { max-width: 720px; } } @media (min-width: 992px) { .matter-schedule ul { max-width: 960px; } } @media (min-width: 1200px) { .matter-schedule ul { max-width: 1140px; } } .matter-schedule li { background: rgba(235, 235, 235, 0.4); display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #CCCCCC; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .matter-schedule li > * { padding: 0.5rem 0.75rem; } .matter-schedule li .th { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; font-weight: bold; font-size: 1rem; } .matter-schedule li .th .handle { display: block; font-size: 0.9285714286rem; } .matter-schedule li .th .handle::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; margin-right: 0.25rem; margin-top: 0.125rem; } .matter-schedule li .td { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; font-size: 0.9285714286rem; } .matter-schedule li .td input:not(.form-control) { border: none; width: 100%; background: transparent; font-weight: bold; } .matter-schedule li .td::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; margin-right: 0.25rem; content: ""; } .matter-schedule li .td:first-of-type { content: ""; } .matter-schedule li.matter-title { background: -webkit-gradient(linear, right top, left top, from(#005ECC), to(#004290)); background: linear-gradient(to left, #005ECC, #004290); color: #fff; } .matter-schedule li.done-matter { display: none; } .matter-schedule li.next-task { background: #FFF500; } .matter-schedule li.my-task { background: #EEF5FD; } .matter-schedule.active li.done-matter { display: -webkit-box; display: -ms-flexbox; display: flex; color: #AAAAAA; } .matter-schedule.active li.done-matter input:not(.form-control) { color: #AAAAAA; } .matter-schedule .swipe-matter { -webkit-transition: all 0.15s; transition: all 0.15s; } .matter-schedule .swipe-matter .th .form-control, .matter-schedule .swipe-matter .td .form-control { padding-top: 0.5rem; padding-bottom: 0.5rem; height: calc(1.5em + 1rem); } .matter-schedule .swipe-matter.active { width: calc(100% + 62px); position: relative; /* left: 50%; */ -webkit-transform: translateX(-88px); transform: translateX(-88px); right: 0; margin-left: -15px; } .matter-schedule .swipe-matter.active .td { display: none; } .matter-schedule .swipe-matter.active .belowBtn, .matter-schedule .swipe-matter.active .deleteBtn, .matter-schedule .swipe-matter.active .editBtn, .matter-schedule .swipe-matter.active .compBtn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-flex: 0; -ms-flex: 0 0 15%; flex: 0 0 15%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; white-space: nowrap; padding: 0.5125rem 0; font-size: 0.7142857143rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .matter-schedule .swipe-matter.active .belowBtn::before, .matter-schedule .swipe-matter.active .deleteBtn::before, .matter-schedule .swipe-matter.active .editBtn::before, .matter-schedule .swipe-matter.active .compBtn::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 1.1428571429rem; } .matter-schedule .swipe-matter.active .belowBtn { background-color: #D4E5FA; } .matter-schedule .swipe-matter.active .belowBtn::before { content: ""; color: #0059C1; } .matter-schedule .swipe-matter.active .deleteBtn { background-color: #FFA3A3; color: #3A3A3A; } .matter-schedule .swipe-matter.active .deleteBtn::before { content: ""; color: #980023; } .matter-schedule .swipe-matter.active .editBtn { background-color: #C4F5DB; } .matter-schedule .swipe-matter.active .editBtn::before { content: ""; color: #2C7950; } .matter-schedule .swipe-matter.active .compBtn { background-color: #0059C1; color: #fff; } .matter-schedule .swipe-matter.active .compBtn::before { content: ""; color: #fff; } .my-comment { -webkit-transition: all 0.15s; transition: all 0.15s; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .my-comment.active { width: calc(100% + 62px); position: relative; -webkit-transform: translateX(-32px); transform: translateX(-32px); right: 0; margin-left: -15px; } .my-comment.active .deleteBtn, .my-comment.active .editBtn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-flex: 0; -ms-flex: 0 0 15%; flex: 0 0 15%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; white-space: nowrap; padding: 0.5125rem 0; font-size: 0.7142857143rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .my-comment.active .deleteBtn::before, .my-comment.active .editBtn::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 1.1428571429rem; } .my-comment.active .deleteBtn { background-color: #FFA3A3; color: #3A3A3A; } .my-comment.active .deleteBtn::before { content: ""; color: #980023; } .my-comment.active .editBtn { background-color: #C4F5DB; } .my-comment.active .editBtn::before { content: ""; color: #2C7950; } /*-------------------------------------------------------------- # ヘッダ用 --------------------------------------------------------------*/ #header { background: -webkit-gradient(linear, left top, right top, from(#005ECC), to(#004290)); background: linear-gradient(to right, #005ECC, #004290); z-index: 9999; } #header a, #header button { color: #fff; } #header .navbar-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); } #header #navbarNav { background: -webkit-gradient(linear, left top, right top, from(#005ECC), to(#004290)); background: linear-gradient(to right, #005ECC, #004290); color: #fff; top: 55px; } #header #navbarNav.offcanvas-right { left: auto; right: 100%; -webkit-transition-property: right, visibility; transition-property: right, visibility; } #header #navbarNav.offcanvas-right.open { right: 0; } #header .navbar-brand { font-family: "Noto Sans JP", sans-serif; font-size: 0.9285714286rem; font-weight: 600; letter-spacing: 1.5px; margin-right: 0; line-height: 1.2; } #header .navbar-brand span { font-family: "Montserrat", sans-serif; font-size: 0.8571428571rem; color: #BDCADB; letter-spacing: 0; } #header .nav-item { border-bottom: 1px dashed #fff; } #header .nav-item .nav-link { padding: 0.75rem 1.75rem; font-size: 1.2857142857rem; } #header .nav-item .nav-link i[class*=fa-] { margin-right: 1rem; } #header .nav-item .link-icon01 a i[class*=fa-] { color: #C9E2FF; } #header .nav-item .link-icon02 a i[class*=fa-] { color: #FFB8AF; } #header .nav-item .link-icon03 a i[class*=fa-] { color: #FFD45F; } #header .nav-item .link-icon04 a i[class*=fa-] { color: #ABFFA8; } #header .nav-item .link-icon05 a i[class*=fa-] { color: #6EEFFF; } #header .nav-item .link-icon06 a i[class*=fa-] { color: #D6ACD6; } #header .nav-item .link-icon07 a i[class*=fa-] { color: #FFFBA2; } #header #navbarMenu { background-color: #fff; top: 55px; } #header #navbarMenu a { color: #3A3A3A; } .breadcrumbs { padding: 0.625rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #dee2e6 !important; } .breadcrumbs i[class*=fa-] { font-size: 1.7142857143rem; color: #4A3C3C; } .breadcrumbs ul { margin-left: 0.625rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0.9285714286rem; font-family: "HiraKakuProN-W6", "ヒラギノ角ゴ ProN W6", sans-serif; font-weight: bold; margin-bottom: 0; } .breadcrumbs ul li { margin-bottom: 0; } .breadcrumbs ul li a { margin-right: 0.3125rem; color: #3A3A3A; } .breadcrumbs ul li a::after { font-family: "Font Awesome 5 Pro"; font-weight: 400; content: ""; margin-left: 0.3125rem; } .breadcrumbs .apply { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: auto; font-size: 0.9285714286rem; font-family: "HiraKakuProN-W6", "ヒラギノ角ゴ ProN W6", sans-serif; font-weight: bold; } .breadcrumbs .apply i[class*=fa-] { font-size: 1.7142857143rem; color: #4A3C3C; margin-right: 0.625rem; } /*-------------------------------------------------------------- # フッタ用 --------------------------------------------------------------*/