/*----------------------------------------------------------- 全体に影響があるもの -----------------------------------------------------------*/ .mrgT5 { margin-top: 5px; } .mrgT10 { margin-top: 10px; } .mrgT15 { margin-top: 15px; } .mrgT20 { margin-top: 20px; } .mrgT25 { margin-top: 25px; } .mrgT30 { margin-top: 30px; } .mrgT40 { margin-top: 40px; } .mrgT50 { margin-top: 50px; } .mrgT60 { margin-top: 60px; } .mrgT70 { margin-top: 70px; } .mrgT80 { margin-top: 80px; } .mrgT90 { margin-top: 90px; } .mrgT100 { margin-top: 100px; } .mrgB0 { margin-bottom: 0 !important;} .mrgB5 { margin-bottom: 5px !important; } .mrgB10 { margin-bottom: 10px !important; } .mrgB15 { margin-bottom: 15px !important; } .mrgB20 { margin-bottom: 20px !important; } .mrgB25 { margin-bottom: 25px !important; } .mrgB30 { margin-bottom: 30px !important; } .mrgB40 { margin-bottom: 40px !important; } .mrgB50 { margin-bottom: 50px !important; } .mrgB60 { margin-bottom: 60px !important; } .mrgB70 { margin-bottom: 70px !important; } .mrgB80 { margin-bottom: 80px !important; } .mrgB90 { margin-bottom: 90px !important; } .mrgB100 { margin-bottom: 100px !important; } .mrgR5 { margin-right: 5px; } .mrgR10 { margin-right: 10px; } .mrgR15 { margin-right: 15px; } .mrgR20 { margin-right: 20px; } .mrgR25 { margin-right: 25px; } .mrgR30 { margin-right: 30px; } .w120 { width: 100%; max-width: 120px;} .w140 { width: 100%; max-width: 140px;} .w150 { width: 100%; max-width: 150px;} .w200 { width: 100%; max-width: 200px;} .w400 { width: 100%; max-width: 400px;} .btn-default { color: #5d4972;} .btn-primary { background-color: #7791ce; border: none;} .btn-success { background-color: #7db299; border: none;} .btn-danger { background-color: #dd6262; border: none;} .btn-warning { background-color: #ddb162; border: none; } .btn-success:hover { background-color: #50aa75; } .hide:not(.on) { display: none !important;} .btn { white-space: nowrap;} .btn-outline-success { color: #7db299; border-color: #7db299;} .btn-outline-success:hover { background-color: #7db299; border-color: #7db299;} #app #reportPlus, #app .reportDel { padding: 0; width: 30px; height: 30px; line-height: 30px; } #app #reportPlus i, #app .reportDel i { font-size: 25px; font-weight: bolder; } .align-m { align-items: center; -webkit-align-items: center; } /*----------------------------------------------------------- ヘッダー -----------------------------------------------------------*/ header { border-bottom: 4px solid #8456a3; height: 94px; line-height: 90px; overflow: hidden;} header .navbar { padding: 0;} header #headLogo { line-height: 90px; padding-left: 0;} header #headLogo img { max-width: 342px; vertical-align: middle; cursor: pointer;} header #headText { text-align: right; font-weight: bold; margin-bottom: 0;} #headNav { border: 1px solid transparent; background-color: #f8f8f8; border-color: #e7e7e7; } #headNav .navbar { min-height: inherit; /*height: 40px; line-height: 40px; margin-bottom: 50px;*/} #headNav [class^='col-'] { padding: 0;} #headNav [class^='col-'] a { color: #8456a3; font-size: 14px;} #headNav [class^='col-']:first-child {} #headNav [class^='col-']:nth-child(2) {} #headNav [class^='col-']:last-child {} #login #headNav { display: none;} @media (max-width: 768px) { } @media (max-width: 480px) { } /*----------------------------------------------------------- フッター -----------------------------------------------------------*/ footer { background-color: #5d4972; height: 36px; color: #fff; font-size: 12px; text-align: center; line-height: 36px; } /*----------------------------------------------------------- login -----------------------------------------------------------*/ #login {} #login main { min-height: 662px; background: url(/cms/assets/img/mainBg.png) repeat-x left top; } #login form button[type="submit"] { background-color: #8456a3; width: 100%;} #login .card { border: none; border-radius: 12px; overflow: hidden; } #login .card .card-header { background-color: #fff; border-bottom: none; font-size: 28px; padding-top: 15px;} #login .card .card-header i { color: #8456a3; font-size: 36px; vertical-align: -2px; margin-right: 8px;} #login .card .card-body { padding: 0 39px 30px; } #login .card .card-body label { font-size: 16px; margin-bottom: 0;} #loginInner { margin-top: 160px; padding-left: 0; padding-right: 0;} #loginInner .form-control { border-color: #8456a3;} @media (min-width: 769px) { #loginInner { flex: 0 0 33.33%;} } @media (max-width: 768px) { } @media (max-width: 480px) { } /*----------------------------------------------------------- -----------------------------------------------------------*/ .invalid-feedback { font-size: 14px;} /*----------------------------------------------------------- -----------------------------------------------------------*/ .delWrap.hide { display: none;} .inputWrap.hide { display: none;} /*----------------------------------------------------------- -----------------------------------------------------------*/ .page-title { background-color: #fff; font-size: 22px; color: #5d4972; border-bottom: 3px solid #ccc; padding-bottom: 4px; margin-bottom: 20px; padding-left: 0;} .page-title i { margin-right: 5px; font-size: 28px; vertical-align: -2px; } @media (min-width: 769px) { } @media (max-width: 768px) { } @media (max-width: 480px) { } /*----------------------------------------------------------- dashboard / index -----------------------------------------------------------*/ .dashboard {} .dashboard .card.index .card-header { background-color: #e5e2eb; border-bottom: none; color: #8456a3; font-size: 20px; padding: 0 5px 5px;} .dashboard .card.index .card-header i { font-size: 22px; margin-right: 5px;} .card.index { border: 6px solid #e5e2eb; margin-bottom: 30px; border-radius: 0;} .card.index .card-body { padding: 25px;} .card.index .card-body ul { list-style-type: none; padding-left: 0; margin-bottom: 0;} .card.index .card-body ul li:not(:last-child) { margin-bottom: 10px;} .card.index .card-body ul li a { background-color: #8456a3; border: none; color: #fff; font-size: 18px; padding: 12px 5px; } .card.index .card-body ul li a:active { background-color: #8456a3; border-color: transparent;} @media (min-width: 769px) { .dashboard { margin-bottom: 260px;} div:not(.dashboard) > .card.index { margin-bottom: 260px; } div:not(.dashboard) > .card.index .card-body { padding: 40px;} .card.index .card-body ul li a { width: 95%; margin-left: auto; margin-right: auto; max-width: 480px;} .card.index .card-body ul li a:hover { opacity: 0.8;} } @media (max-width: 768px) { .dashboard { margin-bottom: 120px;} div:not(.dashboard) > .card.index { margin-bottom: 120px; } } @media (max-width: 480px) { } /*----------------------------------------------------------- form -----------------------------------------------------------*/ select.form-control { display: inline-block; } .btn-default { color: #5d4972; border-color: #ccc; background-color: #fff;} .sub-title1 { color: #8456a3; border: 1px solid #8456a3; font-size: 18px; position: relative; padding-left: 22px; height: 40px; line-height: 40px; font-weight: bold; margin-bottom: 15px; margin-left: -15px; margin-right: -15px;} .sub-title1:before { content: ''; left: 5px; top: calc(50% - 5px); bottom: auto; width: 10px; margin: auto; height: 10px; border-top: 3px solid #8456a3; border-right: 3px solid #8456a3; -webkit-transform: rotate(45deg); transform: rotate(45deg); display: block; position: absolute; } .sub-title2 { color: #fff; border: 1px solid #8456a3; background-color: #8456a3; font-size: 18px; position: relative; padding-left: 22px; height: 40px; line-height: 40px; font-weight: bold; margin-bottom: 15px; margin-left: -15px; margin-right: -15px; } .sub-title2:before { content: ''; left: 5px; top: calc(50% - 5px); bottom: auto; width: 10px; margin: auto; height: 10px; border-top: 3px solid #fff; border-right: 3px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); display: block; position: absolute; } #inputForm {} #inputForm select.form-control { width: auto;} #inputForm .form-group > label { background-color: #efefef; border-right: 4px solid #8456a3; text-align: left; font-size: 15px; padding: 8px 10px 7px; min-height: 36px; font-weight: bold;} #inputForm .form-group .dayset { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #inputForm .form-group .dayset label i { font-size: 24px; color: #8456a3; vertical-align: -6px; margin-left: 5px; margin-right: 5px;} #inputForm .row .row { margin-left: 0; margin-right: 0;} #inputForm .row .row .form-group > label { background-color: #fff; border: none; padding: 0; min-height: auto; font-weight: normal;} #inputForm .img { width: 136px; height: 136px; margin: auto; border: 6px solid #ddd; background-color: #f6f6f6; overflow: hidden;} #inputForm .img + div { width: calc(100% - (136px + 30px));} #inputForm .img img { width: 100%; height: auto;} #inputForm .btnInfo2 { background-color: #e5e2eb; padding: 5px 10px; margin-left: -15px; margin-right: -15px; } #inputForm .btnInfo2 .btn { color: #fff;} #inputForm .colorlist { list-style-type: none; padding: 0; margin-bottom: 0;} #inputForm .colorlist li { width: 65px; padding-left: 25px; margin-right: 20px; } .wysiwygInner { padding-top: 15px;} #fixedHead { position: fixed; left: 0; bottom: 0; width: 100%; background-color: #fff; border-top: 1px solid #dfdfdf; } #fixedHead .container { margin: auto auto 0;} #fixedHead .btn-secondary {} #fixedHead #preview {} #fixedHead button[type='submit'] { min-width: 180px;} /*#fixedHead .btn-success { border: 1px solid #7db299;}*/ .card.important { margin-bottom: 20px;} .card.important .card-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 3px; border-top-left-radius: 3px; color: #333; background-color: #f5f5f5; border-color: #ddd; } .card.important .card-body {} .card.important .card-body .list-group-item { padding: 10px 15px;} .card.important .card-body .btn-danger.btn-sm { font-size: 12px; padding: 2px 5px; margin-left: 5px;} .card.important .card-footer {} .card.important .card-footer .btn { font-size: 14px;} @media (min-width: 769px) { } @media (max-width: 768px) { } @media (max-width: 480px) { } /*----------------------------------------------------------- operation -----------------------------------------------------------*/ #operation {} #operation > .col-2 {} #operation > .col-2 .btn { margin-bottom: 0; font-size: 18px; width: 100%; max-width: 120px;} #operation > .col-10 { justify-content: flex-end; -webkit-justify-content: flex-end; } #operation > .col-10 .row { padding: 0; margin: 0; -ms-flex-wrap: nowrap; flex-wrap: nowrap; align-items: center; -webkit-align-items: center;} #operation > .col-10 span { white-space: nowrap; margin-right: 5px;} #catlist {} #operation > .col-10 input[name="search_text"] { margin-right: 5px;} #operation > .col-10 input[name="search_text"] + .btn { width: 80px;} @media (min-width: 769px) { #operation { margin-bottom: 25px;} #operation > .col-2 {} #operation > .col-2 .btn {} #operation > .col-10 {} #operation > .col-10 .row {} #operation > .col-10 .row:last-child { margin-left: 25px;} #operation > .col-10 span {} #catlist {} #operation > .col-10 input[name="search_text"] {} #operation > .col-10 input[name="search_text"] + .btn {} } @media (max-width: 768px) { #operation { margin-bottom: 20px;} #operation > .col-2 {} #operation > .col-2 .btn {} #operation > .col-10 {} #operation > .col-10 .row {} #operation > .col-10 span {} #catlist {} #operation > .col-10 input[name="search_text"] {} #operation > .col-10 input[name="search_text"] + .btn {} } @media (max-width: 480px) { #operation {} #operation > .col-2 {} #operation > .col-2 .btn {} #operation > .col-10 {} #operation > .col-10 .row {} #operation > .col-10 span {} #catlist {} #operation > .col-10 input[name="search_text"] {} #operation > .col-10 input[name="search_text"] + .btn {} } /*----------------------------------------------------------- return -----------------------------------------------------------*/ .return.btn { font-size: 18px; width: 100%; max-width: 120px;} @media (min-width: 769px) { } @media (max-width: 768px) { } @media (max-width: 480px) { } /*----------------------------------------------------------- table -----------------------------------------------------------*/ table.table { margin: 20px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } table.table th , table.table td { border: none;} table.table th { color: #666; font-size: 14px; font-weight: normal; background-color: #fff; height: 50px; vertical-align: middle;} table.table td { font-size: 16px; vertical-align: middle;} table.table tr:nth-child(odd) td { background-color: #f7f4ef;} table.table td.small , table.table td.date { font-size: 12px; width: 100px;} @media (min-width: 769px) { } @media (max-width: 768px) { } @media (max-width: 480px) { } /*----------------------------------------------------------- checkbox -----------------------------------------------------------*/ .checkbox { position: relative; display: inline-block; vertical-align: top; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 17px; line-height: 24px; padding-left: 5px; margin-bottom: 0; } .checkbox__checkmark { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding-box; background-clip: padding-box; position: relative; display: inline-block; vertical-align: top; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 17px; position: relative; overflow: hidden; height: 24px; pointer-events: none; } .checkbox__input { position: absolute; overflow: hidden; right: 0px; top: 0px; left: 0px; bottom: 0px; padding: 0; border: 0; opacity: 0.001; z-index: 1; vertical-align: top; outline: none; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; appearance: none; } .checkbox__input:checked { background: rgba(24,103,194,0.81); } .checkbox__input:checked + .checkbox__checkmark:before { background-color: #8456a3; border: 1px solid #5d4972; } .checkbox__input:checked + .checkbox__checkmark:after { opacity: 1; } .checkbox__checkmark:before { content: ''; position: absolute; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding-box; background-clip: padding-box; width: 24px; height: 24px; background-color: #fff; border: 1px solid #5d4972; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: none; box-shadow: none; left: 0; } .checkbox__checkmark { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding-box; background-clip: padding-box; position: relative; display: inline-block; vertical-align: top; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 17px; position: relative; overflow: hidden; width: 24px; height: 24px; } .checkbox__checkmark:after { content: ''; position: absolute; top: 7px; left: 6px; width: 12px; height: 8px; background: transparent; border: 3px solid #fff; border-width: 3px; border-top: none; border-right: none; -webkit-border-radius: 0px; border-radius: 0px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } .checkbox__input:focus + .checkbox__checkmark:before { -webkit-box-shadow: none; box-shadow: none; } .checkbox__input:disabled + .checkbox__checkmark { opacity: 0.3; cursor: default; pointer-events: none; } .checkbox__input:disabled:active + .checkbox__checkmark:before { background: transparent; -webkit-box-shadow: none; box-shadow: none; } @media (min-width: 769px) { } @media (max-width: 768px) { } @media (max-width: 480px) { } /*----------------------------------------------------------- modal -----------------------------------------------------------*/ .modal-content {} .modal-content .page-title { width: 100%; margin-bottom: 0;} .modal-content iframe { border: none;} #imgWrap .sub-title1 { margin-left: 0; margin-right: 0; font-size: 16px; height: 30px; line-height: 30px; } #imgWrap #upload { border: 6px solid #e5e2eb; padding: 15px; margin-bottom: 30px;} #imgWrap #upload form { width: 100%;} #imgWrap #upload .form-group { margin-bottom: 0; margin-left: 0; margin-right: 0; justify-content: space-between; -webkit-justify-content: space-between;} #imgList {} #imgList .img { width: 80px; height: 80px; margin: 0;} #imgList .img img { width: 100%; height: auto;} #imgList thead { display: none;} #imgList th , #imgList td { height: auto; line-height: normal; padding: 0; } #imgList tr td:last-child , #imgList tr td:nth-last-child(2) , #imgList tr td:nth-last-child(3) { width: 65px; text-align: center;} #imgList .btn-warning { color: #fff;} @media (min-width: 769px) { } @media (max-width: 768px) { } @media (max-width: 480px) { } /*----------------------------------------------------------- ページング -----------------------------------------------------------*/ .pagination { justify-content: center; -webkit-justify-content: center; } .pagination a { color: #8456a3;} .pagination .active a { background-color: #8456a3; border-color: #8456a3} .pagination .active a:hover { background-color: #8456a3; border-color: #8456a3;} .pagination .page-item.active .page-link { background-color: #8456a3; border-color: #8456a3;} .pagination .page-link:hover { color: #8456a3;} /*----------------------------------------------------------- sort list -----------------------------------------------------------*/ .sortable { margin-left: 15px; margin-right: 15px;} .sortable li { background-color: #fff; border-left: none; border-right: none; border-top: none; border-bottom: 1px solid #ddd; padding: 8px;} .sortable li:nth-child(odd) { background-color: #f7f4ef;} .sortable li > div:first-child { padding: 0;} .sortable li > div:last-child { padding: 0;} .sortable li .btn-primary { color: #fff;} .sortable li .btn-danger {} .sortable li > .public { width: 50px;} .sortable li > .date { font-size: 12px;} @media (min-width: 769px) { .sortable {} .sortable li {} .sortable li > div:first-child {} .sortable li > div:last-child {} .sortable li .btn-primary {} .sortable li .btn-danger {} } @media (max-width: 768px) { .sortable {} .sortable li {} .sortable li > div:first-child {} .sortable li > div:last-child {} .sortable li .btn-primary {} .sortable li .btn-danger {} } @media (max-width: 480px) { .sortable {} .sortable li {} .sortable li > div:first-child {} .sortable li > div:last-child {} .sortable li .btn-primary {} .sortable li .btn-danger {} } /*----------------------------------------------------------- breadcrumb -----------------------------------------------------------*/ ol.breadcrumb { background-color: transparent; padding: 0; margin: 0;} ol.breadcrumb li {} ol.breadcrumb li a {} ol.breadcrumb li.active { font-size: 14px;} @media (min-width: 769px) { } @media (max-width: 768px) { } @media (max-width: 480px) { } /*----------------------------------------------------------- -----------------------------------------------------------*/ #destroy_btn:disabled { background-color: #ccc;} @media (min-width: 769px) { } @media (max-width: 768px) { } @media (max-width: 480px) { } /*----------------------------------------------------------- -----------------------------------------------------------*/ .end_date_btn {} .end_date_more { display: none;} .end_date_more.active { display: flex;} @media (min-width: 769px) { } @media (max-width: 768px) { } @media (max-width: 480px) { }