※最後の列はタグの幅プラス1px必要っぽい「=100px =101px
*/
.list-box .tbl-th { text-align: center; font-size: 0; }
.list-box .tbl-th div.inner-box div {
display: inline-block;
text-align: center;
vertical-align: middle;
background-color: #3085d6;
font-size: 16px;
font-weight: bold;
color: #fff;
padding: 10px;
}
.list-box .tbl-th div.inner-box div div { display: block; border: none; padding: 0; }
.list-box .tbl-th div.inner-box div div.g-row { display: grid; display: -ms-grid; }
.tbl-th div:empty:before { content: ' '; }
.list-box .tbl-outer {
/* -ms-overflow-style: none;
scrollbar-width: none; */
max-height: calc(100vh - 50px);
border-bottom: 1px solid #e5e5e5;
}
.list-box .tbl-outer::-webkit-scrollbar { display: none; }
.list-box table tr:last-child td { border-bottom: none; }
.list-box .tbl-outer table thead { display: none; }
/* .list-box .tbl-outer table tr td:first-child { border-left: 1px solid transparent; } */
/** リスト→詳細 css */
/** version 20.12.23 */
#l2d-slider { overflow: auto; -ms-overflow-style: none; scrollbar-width: none; }
#l2d-slider::-webkit-scrollbar { display:none; }
.l2d-content {
width: 500px;
height: 0;
transform: translate(1300px, 0);
}
#l2d-slider.show .l2d-content {
height: auto;
-webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
transform: translate(50px, 0);
}
/* 編集時に編集不可のinput項目用ラベル */
.l2d-inplbl { padding: 0 5px; font-size: 15px; }
.l2d-back { margin-bottom: 10px; }
/** ファイルアップロード css */
/** version 21.07.14 */
.fileupload-box:not(.box-disabled) .dropzone:hover {
opacity: 0.8;
cursor: var(--cur-dwl);
}
.fileupload-box.box-disabled {
background-color: #ddd;
}
.fileupload-box.box-disabled .open-finder,
.fileupload-box.box-disabled .dropzone {
cursor: var(--cur-ban);
}
.fileupload-box input[type="file"] {
display: none !important;
height: 0 !important;
line-height: 0 !important;
padding: 0 !important;
border: 0 !important;
margin: 0 !important;
position: absolute;
}
/** app css */
body { background-color: ghostwhite; }
a { text-decoration: none; }
.content {
margin: 0 auto;
max-width: 1200px;
min-height: calc(100vh - 1px);
/* padding: 5px; */
background-color: #fff;
}
.content-body { padding: 45px 0 30px 0; }
/* メッセージ */
.msgbox-outer {
position: fixed;
top: 70px;
left: 50%;
transform: translateX(-50%);
}
.msgbox-cmp {
background-color: rgb(233, 255, 238, 0.8);
padding: 10px 20px;
text-align: center;
border: 1px solid #259a42;
color: #358c35;
font-size: 16px;
border-radius: 7px;
letter-spacing: 0.1em;
min-width: 350px;
}
.msg-box { margin-left: 50px; padding: 0 10px; max-width: 620px; }
/** （何かと使えるかも）計算したら点滅 */
.calc-calc { -webkit-animation: calc-calc 1.5s; animation: calc-calc 1.5s; }
@-webkit-keyframes calc-calc {
0% { background-color: #ffc1c1; }
/* 33% { background-color: unset; } */
66% { background-color: #ffc1c1; }
/* 100% { background-color: unset; } */
}
@keyframes calc-calc {
0% { background-color: #ffc1c1; }
/* 33% { background-color: unset; } */
66% { background-color: #ffc1c1; }
/* 100% { background-color: unset; } */
}
/** ヘッダーCSS */
#header-box {
width: 100%;
position: fixed;
display: block;
top: 0;
z-index: 88;
max-width: 1200px; /* .contentと同じ */
/* height: 46px; */
background-color: rgba(98, 79, 187, 0.9);
}
.header-inner {
max-width: 1200px; /* いらなそうだけど無いとダメになるブラウザがあったような... */
margin: 0 auto;
/* 範囲選択不可 */
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
position: relative;
overflow: visible;
}
#header-box.no-logo .header-inner {
/* grid-template-columns: 0 1fr 200px; */
/* ms-grid-columns: 0 1fr 200px; */
grid-template-columns: 0 1fr 300px;
}
i { width: 22px; text-align: center; display: inline-block; margin-right: 0.3em; }
.header-inner a:hover { text-decoration: none; }
/* ロゴ */
.logo-box { display: inline-block; position: relative; padding-left: 20px; }
.logo-box img { height: 39px; }
/* .app-var { display: inline-block; color: #c5b6ea; font-size: 11px; position: relative; top: -68px; left: 140px; height: 1px; line-height: 1px; z-index: -1; } */
/* .app-ver { display: inline-block; color: #c4bbf0; position: absolute; text-align: right; line-height: 1px; overflow: initial; top: 35px; right: 5px; font-size: 13px; } */
.logo-box.hid { padding-left: 0; width: 0; }
/* END ロゴ */
/* リンクメニュー */
.link-list { padding: 0 20px; }
.link-box {
display: table-cell;
width: 120px;
position: relative;
overflow: visible;
color: #fff;
border-radius: 5px 5px 0 0;
}
.link-box:hover,.link-box.actv:hover .link-ttl { background-color: var(--cattleya-br); color: #fff; }
.link-box.actv .link-ttl { background-color: #fff; color: var(--cattleya-br); }
.link-box.no-dropdown { border-radius: 5px; }
.link-box.no-dropdown .link-ttl { padding: 0 15px; cursor: pointer; }
.link-box.no-dropdown .link-ttl label { cursor: pointer; }
.link-ttl { width: 120px; height: 46px; line-height: 43px; text-align: center; vertical-align: middle; font-weight: bold; border-radius: 5px 5px 0 0; }
.link-ttl.actv { background: #fff; color: var(--cattleya); }
.link-ttl label,.name-box .clm1 { font-size: 15px; }
.link-ttl:before,.link-dropdown div i:before { font-weight: 900; font-family: "Font Awesome 5 Free"; }
/* スマホ・タブレット */
@media screen and (max-width: 1150px) {
.link-box { width: 48px; }
.link-ttl { width: 48px; }
.link-dropdown { width: 48px; }
.link-dropdown div { width: 48px; }
.link-ttl label { display: none; }
}
.link-dropdown { display: none; }
.link-box:not(.close-drop):hover .link-dropdown { position: absolute; width: 180px; display: block; z-index: 1; }
.link-box:not(.close-drop):hover .link-dropdown div { width: 180px; z-index: 1; }
.link-dropdown div {
background-color: var(--cattleya-br);
width: 120px;
height: 40px;
line-height: 38px;
padding: 0 10px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.link-dropdown div:first-child { border-radius: 0 5px 0 0; }
.link-dropdown div:last-child { border-bottom: none; border-radius: 0 0 5px 5px; }
.link-dropdown label { cursor: pointer; }
.name-box { color: #fff; padding-right: 20px; }
.name-box a { color: #fff; }
.name-box .clm1 { height: 46px; line-height: 43px; text-align: center; cursor: pointer; padding: 0 5px; border-radius: 5px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.name-box .clm1 i { font-weight: 900; font-family: "Font Awesome 5 Free"; margin-right: 0.4em; }
.name-box .clm1 label { font-size: 13px; margin-left: 0.1em; }
.name-box .clm1 label:before { content: '（'; } .name-box .clm1 label:after { content: '）'; }
.name-box .clm2 div {
padding: 0 4px;
height: calc(46px / 2);
line-height: 22px;
text-align: center;
font-weight: 900;
font-family: "Font Awesome 5 Free";
cursor: pointer;
border-radius: 5px;
font-size: 14px;
}
.name-box.no-menulink .clm2 div {
height: calc(46px / 1);
line-height: 42px;
}
.name-box .clm2 i { margin-right: 0; }
.name-box div.clm1:hover, .name-box div.clm2 div:hover { background-color: var(--cattleya-br); }
.name-box div.clm1.no-link { cursor: default; }
.name-box div.clm1.no-link:hover { background-color: unset; }
.name-box div.clm1.no-link:after { display: none; }
.link-dropdown div:hover:after,.name-box .clm1:hover:after,.name-box .clm2 div:hover:after,.link-box.no-dropdown .link-ttl:hover:after { width: 100%; }
.link-dropdown div:after,.name-box .clm1:after,.name-box .clm2 div:after,.link-box.no-dropdown .link-ttl:after {
text-align: center;
display: block;
content: '';
width: 0;
height: 1px;
background-color: #ffffff;
margin: -7px 0 0 0;
transition: .25s ease-out;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
-ms-transition: .25s ease-out;
}
.name-box .clm2 div:after { margin: -3px 0 0 0; }
/* ■■■■■ APP ■■■■■ */
/* ヘッダーアイコン */
.link-ttl:before { margin-right: 0.3em; vertical-align: middle; }
#menu_mypage .link-ttl:before { content: '\f2bd'; }
#menu_regist .link-ttl:before { content: '\f058'; }
#menu_result .link-ttl:before { content: '\f518'; }
#menu_claim .link-ttl:before { content: '\f0e7'; }
#menu_sales .link-ttl:before { content: '\f080'; }
#menu_quality .link-ttl:before { content: '\f005'; }
#menu_salesman .link-ttl:before { content: '\f507'; }
#menu_setting .link-ttl:before { content: '\f013'; }
.fstrow { padding: 0 50px; }
.fstrow .clm2 { text-align: right; }
.fstrow .link-box { display: inline-block; text-align: left; width: auto; }
.fstrow .link-ttl { width: max-content; }
/* スマホ・タブレット */
@media screen and (max-width: 1150px) {
.link-box { width: 48px; }
.link-ttl { width: 48px; }
.link-dropdown { width: 48px; }
.link-dropdown div { width: 48px; }
.link-ttl label { display: none; }
}
/* スマホ */
@media screen and (max-width: 449px) {
.header-inner {
max-width: 100vw;
margin: 0 auto;
/* grid-template-columns: 0 1fr 180px; ms-grid-columns: 0 1fr 180px; */
}
#header-box.no-logo .header-inner { grid-template-columns: 0 1fr 180px; }
.link-list { padding: 0 10px; }
.name-box { padding-right: 0; }
.only-pc { display: none; }
}