@charset "utf-8";
/*base*/
:focus{outline: 3px solid var(--hover-orange); border-radius: var(--round-min);}
.inputCase input:focus, .inputCase textarea:focus, input[type="radio"]:focus, .modaIconCase:focus, .menu a:focus{outline: none;}
input[type="radio"]:focus-visible, .menu a:focus-visible{outline: 3px solid var(--hover-orange);}
.time-select-radio-wrap:has(input[type="radio"]:focus-visible) {outline: 2px solid var(--hover-orange); outline-offset: 3px; z-index: 2; border-radius: var(--round-min);}

.letterLowering{text-indent: -1em !important; padding-left: 1em !important; display: block !important;}

.spOnly {display: none;}	
.pcOnly {display: block;}
.pointer-spOnly{pointer-events: none;}

/*-----all-----*/
/*-btn-*/
.search-btn, .register-btn, .cancel-btn, .output-btn{border-radius: var(--round-min); font-weight: 500; display: flex; align-items: center; justify-content: center; transition: all var(--trans-btn);}
.search-btn:hover, .register-btn:hover, .cancel-btn:hover, .output-btn:hover{transition: all var(--trans-btn);}
.search-btn{width: 230px; height: 43px; background-color: var(--search-green); color: var(--white); font-size: 18px; font-weight: 400; letter-spacing: 2px; border-bottom: solid 4px var(--search-green-s); margin: 10px auto 0; position: relative;}
.search-btn:hover{background-color: var(--search-green-h);}
.search-btn svg{fill: var(--white); width: 22px; margin: 1px 0 0 0; position: absolute; top: 50%; left: 65px; transform: translate(-50%, -50%);}
.register-btn{width: 200px; height: 45px; background-color: var(--main-blue); color: var(--white); border-bottom: 4px solid var(--main-blue-s); font-size: 18px; letter-spacing: 1px;}
.register-btn:hover{background-color: var(--main-blue-h);}
.register-btn:active{border-bottom: none;}
.cancel-btn{width: 160px; height: 43px; background-color: var(--light-gray); color: var(--gray); border: 2px solid var(--gray); font-size: 17px; box-shadow: 0 2px 0 var(--gray);}
.cancel-btn:hover{background-color: var(--white);}
.cancel-btn:active{height: 45px; border-bottom: none;}
.output-btn{width: 120px; height: 35px; font-size: 15px; font-weight: 400; letter-spacing: 1px; background-color: var(--sub-blue); color: var(--white); border-bottom: solid 4px var(--sub-blue-s); margin: var(--btn-mar) auto 0;}
.output-btn:hover{background-color: var(--sub-blue-h);}

.new-btn, .detail-btn, .edit-btn, .copy-btn, .delete-btn, .sort-btn{border-radius: var(--round-min); display: flex; align-items: center; justify-content: center; transition: all var(--trans-btn);}
.new-btn:hover, .detail-btn:hover, .edit-btn:hover, .copy-btn:hover, .delete-btn:hover, .sort-btn:hover{transition: all var(--trans-btn);}
.new-btn{width: 120px; height: var(--input-hei); font-size: 16px; background-color: var(--main-blue); color: var(--white); border-bottom: solid 3px var(--main-blue-s); cursor: pointer; padding-top: 2px;}
.new-btn:hover{background-color: var(--main-blue-h);}
.detail-btn{display: flex; align-items: center; justify-content: space-between; width: 190px; height: var(--input-hei); background-color: var(--gray); color: var(--white); border: 2px solid var(--gray); border-bottom: 3px solid var(--dark-gray); position: absolute; top: var(--inner-pad); right: var(--inner-pad); cursor: pointer; padding: 0 10px;}
.detail-btn:hover{background-color: var(--gray-h); border: 2px solid var(--gray-h); border-bottom: 3px solid var(--dark-gray);}
.detail-btn span.icons, .release-btn span{width: 20px; height: 20px;}
.detail-btn span{}
.detail-btn span.icons{position: relative; margin-left: 10px; margin-top: -1px;}
.detail-btn span.icons svg{width: 110%; position: absolute; top: 0; left: 0; fill: var(--white);}
.detail-btn span.icons .plus-icon{display: block;}
.detail-btn span.icons .minus-icon{display: none;}
.detail-btn.active{height: 28px; box-shadow: 0 1px 0 var(--gray); color: var(--gray); background-color: var(--white); border-bottom: 2px solid var(--gray);}
.detail-btn.active:hover{background-color: var(--light-gray); border: 2px solid var(--gray);}
.detail-btn.active:active{height: 30px; border-bottom: none;}
.detail-btn.active span{}
.detail-btn.active span.icons .plus-icon{display: none;}
.detail-btn.active span.icons .minus-icon{display: block; fill: var(--gray);}
.detail-btn.active{}
.release-btn{display: flex; align-items: center; width: fit-content; height: 25px; font-size: 16px; color: var(--gray); border-bottom: 1px solid var(--gray); position: absolute; bottom: var(--inner-pad); right: var(--inner-pad); padding-bottom: 3px; transition: all var(--trans-btn);}
.release-btn:hover{color: var(--trash-red); border-bottom: 2px solid var(--trash-red); transition: all var(--trans-btn);}

.file-btn{display: flex; justify-content: center; align-items: center; width: 150px; height: 30px; border-radius: var(--round-min); background-color: var(--gray); color: var(--white); transition: all var(--trans-btn); border: none; border-bottom: solid 3px var(--dark-gray); cursor: pointer; padding-top: 1px;}
.file-btn:hover{background-color: var(--gray-h); transition: all var(--trans-btn);}

.sort-btn{width: 25px; height: 18px; background-color: var(--white); margin-left: 10px; margin-top: 1px;}
.sort-btn svg{width: 20px; fill: var(--table-blue02); margin-top: -1px;}

.edit-btn, .copy-btn, .delete-btn{width: 40px; height: 30px; display: flex; align-items: center; justify-content: center; transition: all var(--trans-btn);}
.edit-btn:hover, .copy-btn:hover, .delete-btn:hover {transition: all var(--trans-btn);}
.edit-btn, .copy-btn{background-color: var(--main-blue); border-bottom: 3px solid var(--main-blue-s);}
.edit-btn:hover, .copy-btn:hover{background-color: var(--main-blue-h);}
/*.copy-btn{background-color: var(--text-blue); border-bottom: 3px solid var(--text-blue-s);}
.copy-btn:hover{background-color: var(--text-blue-h);}*/
.delete-btn{background-color: var(--trash-red); border-bottom: 3px solid var(--trash-red-s);}
.delete-btn:hover{background-color: var(--trash-red-h);}
.edit-btn svg, .copy-btn svg, .delete-btn svg{fill: var(--white); width: 20px; margin-top: 2px;}

.search-btn:active, .register-btn:active, .output-btn:active, .new-btn:active, .detail-btn:active, .edit-btn:active, .copy-btn:active, .delete-btn:active, .edit-btn:active, .copy-btn:active, .delete-btn:active, .file-btn:active{border-bottom: none; transition: all var(--trans-btn);}
.detail-btn.active:active{border-bottom: 2px solid var(--gray);}

.m-btnL{width: 180px; height: 45px;}
.m-btnM{width: 150px; height: 45px;}
.m-btnS{width: 100px; height: 30px;}

.btn-flex{display: flex; align-items: center; justify-content: center; position:relative; z-index:10}
.btn-flex button:first-child{margin-right: 15px;}
.btn-flex button:last-child{margin-left: 15px;}

.file-link{color: var(--pale-blue); border-bottom: 2px solid transparent; font-weight: 500; line-height: 1.2; padding-top: 2px; transition: all var(--trans-normal);}
.file-link:hover{border-bottom: 2px solid var(--pale-blue); transition: all var(--trans-normal);}

/*-page-ttl-*/
.page-ttl{display: flex; align-items: center;}
.page-ttl .icon{width: 31px; height: 31px; margin-right: 10px;}
.page-ttl .icon svg{fill: var(--ttl-blue);}
.page-ttl h1{font-size: 23px; font-weight: 600; letter-spacing: 1px; line-height: 1; white-space: nowrap; color: var(--ttl-blue);}

/*-input-box-*/
.input-small{width: 100%; position: relative; padding: var(--inner-pad);}

.input-wrapper{display: flex; align-items: center;}

.inputBox{display: flex; /*align-items: center;*/ margin: 0 40px var(--inner-mar) 0;}
.input-small .inputBox{max-width: 650px;}
/*.inputBox .input-ttl{color: var(--text-blue); border-bottom: 1px solid var(--text-blue); white-space: nowrap; margin-right: 10px; line-height: 1.3; padding: 0 1px;}*/
.inputBox .input-ttl{color: var(--white); border-radius: var(--round-min); white-space: nowrap; margin-right: 10px; line-height: 1.3; padding: 0 10px; position: relative; height: auto; min-height: 32.8px; display: flex; flex-direction: column; justify-content: center; background-color: var(--table-blue02);}
.inputCase{width: 100%; min-height: var(--input-hei); border: 1px solid var(--main-blue); border-radius: var(--round-min); display: flex; align-items: center; padding: 1px; position: relative;}
.inputCase:has(input:focus)::before{content: ""; width: 102%; height: 108%; display: block; border-radius: var(--round-min); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 3px solid var(--hover-orange); pointer-events: none; z-index: 2;}
.inputCase:has(textarea:focus)::before{content: ""; width: 102%; height: 104%; display: block; border-radius: var(--round-min); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 3px solid var(--hover-orange); pointer-events: none; z-index: 2;}

.inputCase.white{background-color: var(--white);}
.inputCase.gray{background-color: var(--light-gray);}
.inputCase.error{background-color: #f8d7da !important;}
.inputCase.inputLL{max-width: 270px;}
.inputCase.inputL{max-width: 230px;}
.inputCase.inputM{max-width: 200px;}
.inputCase.inputS{max-width: 180px;}
.inputCase.inputSS{max-width: 130px;}
.inputCase.ym{width: 100px;}
.inputCase.normal{width: 100%;}
.inputCase input, .inputCase textarea{width: 100%; border-radius: var(--round-min); border: none; padding: 3px 5px;}
.inputCase.white input, .inputCase.white textarea{background-color: var(--white);}
.inputCase.write-r input{text-align: right;}
.inputCase.gray input{background-color: var(--light-gray);}
.inputCase.error input, .inputCase.error textarea {
	background-color: #f8d7da !important;
}

.inputCase .modaIconCase{width: 25px; height: 25px; display: flex; align-items: center; margin-right: 2px;}
.inputCase .modaIconCase .icon{width: 25px; height: 25px; display: flex; margin-top: 1.5px; border-radius: var(--round-min); transition: all var(--trans-btn);}
.inputCase .modaIconCase .icon svg{fill: var(--text-blue); transition: all var(--trans-btn);}
.inputCase .modaIconCase:hover .icon svg{fill: var(--pale-blue); transition: all var(--trans-btn);}

.radioCase{margin-bottom: -2px; display: flex; flex-wrap: wrap;}
.radioCase label{display: inline-flex; align-items: center; column-gap: 8px; font-size: 17px; font-weight: 500; cursor: pointer; color: var(--main-blue); white-space: nowrap;}
.radioCase label:not(:last-of-type){margin-right: 15px;}
.radioCase input{appearance: none; position: relative; width: 20px; height: 20px; border-radius: 9999px; background-color: var(--white); cursor: pointer;}
.radioCase input:checked{border: 6px solid var(--main-blue);}

.input-p{display: flex; align-items: center; color: var(--text-blue); line-height: 1; margin: 0 5px;}

/*-----login-----*/
body.login{height: 100%; padding-right: 0;}
#loginPage{height: 100%; display: flex;}
#loginPage .block.left {position: relative; width: 60vw; max-width: 750px; padding: 60px; display: flex; align-items: center; background-color: var(--text-blue); border-radius: var(--round-mid); overflow: hidden;}
.block.left::before {content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2872ad+80,2872ad+100&0+80,1+100 */
  background: linear-gradient(to bottom, rgba(40, 114, 173, 0) 80%, rgb(40, 114, 173) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
.block.left::after { content: ""; display: block; width: 60%; aspect-ratio: 1/1; background-image: url("../images/bg-bearing.png"); background-size: 100%; position: absolute; bottom: 0; right: 0; opacity: 0.1; transform: translate(17%, 14%);}
#loginPage .block.left .cont {position: relative; z-index: 10;}
#loginPage .block.left .logo {min-width: 175px; width: 35vw; max-width: 245px; position: absolute; top: 20px; left: 20px;}
#loginPage .block.left .siteTitle {font-size: 50px; line-height: 1.4; font-weight: 600; color: var(--white);}

#loginPage main{width: 100%; margin:auto; z-index: 10}
#loginPage main .loginBlock{width: calc(100% - 120px); max-width: 400px; margin: 0 auto 30px auto; }

#loginPage main .loginBlock .loginBox{display: flex; align-items: center; margin-bottom: 20px;}
#loginPage main .loginBlock .loginBox .icon{width: 40px; height: 40px; flex-shrink: 0; margin-right: 15px;}
#loginPage main .loginBlock .loginBox .icon svg{fill: var(--main-blue);}
#loginPage main .loginBlock .loginBox input{width: 100%; height: 60px; font-size: 20px; border-radius: var(--round-min); border: 2px solid var(--main-blue); padding: 10px 15px;}
#loginPage main .loginBlock #loginBtn{width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; color: var(--white); background-color: var(--text-blue); border-radius: var(--round-min); border-bottom: solid 3px var(--text-blue-s); transition: all var(--trans-btn);}
#loginPage main .loginBlock #loginBtn:hover{color: var(--hover-orange); transition: all var(--trans-normal);}
#loginPage main .loginBlock #loginBtn:active{border-bottom: none; transition: all var(--trans-btn);}
#loginPage main .loginBlock #loginBtn p{margin-top: 3px;}
#loginPage main .loginBlock #loginBtn .icon{width: 25px; height: 25px; margin-right: 15px;}
#loginPage main .loginBlock #loginBtn .icon svg{fill: var(--white); transition: all var(--trans-btn);}
#loginPage main .loginBlock #loginBtn:hover .icon svg{fill: var(--hover-orange); transition: all var(--trans-btn);}
#loginPage main .loginBlock #loginBtn .title{font-size: 22px; line-height: 1;}
#loginPage main .loginBlock .text{width: fit-content; color: var(--dark-gray); line-height: 1.3; margin: 10px auto 0;}

#loginPage main .infoBlock{width: calc(100% - 120px); max-width: 920px; margin: 0 auto; }
#loginPage main .infoBlock .info-ttl{display: flex; align-items: center; margin-bottom: 10px;}
#loginPage main .infoBlock .info-ttl .icon{width: 20px; height: 20px; margin-right: 10px;}
#loginPage main .infoBlock .info-ttl .icon svg{fill: var(--gray);}
#loginPage main .infoBlock .info-ttl .title{font-size: 18px; color: var(--gray); line-height: 1;}
#loginPage main .infoBlock .commentBox{min-height: 100px; max-height: 180px; background-color: var(--white); padding: var(--inner-pad); margin-bottom: 30px; overflow-y:auto;}
#loginPage main .infoBlock .commentBox .topic{display: flex; color: var(--gray);}
#loginPage main .infoBlock .commentBox .topic::before{content: ""; display: block; width: 12px; height: 12px; background-color: var(--gray); margin: 7.5px 5px 0 0; flex-shrink: 0;}
#loginPage main .infoBlock .commentBox .topic .daytime{margin-right: 10px;}
#loginPage main .infoBlock .commentBox .topic .text{}
#loginPage main .infoBlock .copy.sysver{text-align: center; font-size: 14px; color: var(--gray);}

/*-----list-----*/
#search{width: 100%; position: relative; padding: var(--inner-pad);}
#search .search-bg{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--cont-blue); border-radius: var(--round-mid); mix-blend-mode: multiply; z-index: -1;}

#search .form-wrapper{width: calc(100% - 190px); display: flex; align-items: flex-start; flex-wrap: wrap;}
.input #search .form-wrapper{width: 100%;}

#search .detail-wrapper{}
#search .detail-wrapper .detail-inner{width: 100%; max-height: 0; overflow: hidden;}
#search .detail-wrapper.active{}
#search .detail-wrapper.active .detail-inner{max-height: fit-content; overflow: unset;}
/*#search .detail-wrapper .inputBox{margin-bottom: 0;}*/

#result, #result.check-result .c-result-wrapper{width: 100%; position: relative; padding: var(--inner-pad);}
#result.check-result{padding: 0;}
#result .result-bg{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--result-blue); mix-blend-mode: multiply; z-index: -1; border-radius: var(--round-mid);}
#result .result-ttl{display: flex; align-items: center; position: relative;}
#result .result-ttl .result-num{line-height: 1; color: var(--text-blue); font-weight: 500; margin-right: 25px;}
#result.check-result .result-num{font-size: 20px;}
#result .result-ttl .result-num span{font-size: 28px; font-weight: 600; padding: 0 3px;}

#result .table-wrapper{width: calc(100% + 4px); overflow: auto; margin-left: -2px;}
.list-table{width: 100%; height: 100%; margin-top: 6px; border-collapse: separate; border-spacing: 2.5px 0px;}
.list-table.fit-width{width: unset; max-width: 100%;}

.list-table th{height: 100%; color: var(--white); line-height: 1; text-align: center; padding: 0; white-space: nowrap;}
.list-table th.edit-th{width: 60px;}
.list-table th.choice-th{width: 80px;}
.list-table th.small-th{min-width: 115px;}
.list-table th.mid-th{min-width: 180px;}
.list-table th.long-th{min-width: 220px;}
.list-table th.max-th{min-width: 300px;}
.list-table th div{width: 100%; min-height: 30px; height: 100%; display: flex; align-items: center; justify-content: center; padding: 5px 10px; margin-bottom: 2px;}
.list-table th.normal-th div{background-color: var(--table-blue02); transition: all var(--trans-btn); cursor: pointer;}
.list-table th.normal-th div:hover{background-color: var(--sub-blue-h); transition: all var(--trans-btn);}
.list-table th.normal-th div.no-sort{cursor: default !important;}
.list-table th.normal-th div.no-sort:hover{background-color: var(--table-blue02) !important; transition: all var(--trans-btn) !important;}
.list-table th.edit-th div, .list-table th.choise-th div{background-color: var(--table-blue02);}
.list-table th div .sort-btn{display: none;}
.list-table th div.sort-up .sort-btn{display: block;}
.list-table th div.sort-down .sort-btn{display: block;}
.list-table th div.sort-down .sort-btn svg{transform: rotate(180deg);}

.list-table td{height: 100%; color: var(--text-black); padding: 3px 0 0; white-space: nowrap;}
.list-table tr.tr-2n td, #result .list-table tr.tr-2n-1 td{padding: 0;}
.list-table td div, .list-table.o-clock td label, .list-table.minutes td label{display: flex; align-items: center; height: 100%; background-color: var(--white); padding: 3px 10px; margin: 0px;}
.list-table.o-clock td label, .list-table.minutes td label{color: var(--text-black); transition: all var(--trans-btn); cursor: pointer; position: relative;}
.list-table.o-clock td label input, .list-table.minutes td label input{position: absolute; top: 0; left: 0; opacity: 0;}
.list-table.o-clock td label:hover, .list-table.minutes td label:hover{background-color: #d6d6d6; transition: all var(--trans-btn);}
.list-table.o-clock td label:has(input[type="radio"]:checked), .list-table.minutes td label:has(input[type="radio"]:checked){background-color: #d6d6d6;}
.list-table tr.tr-2n td div{background-color: var(--light-gray);}
.list-table td.td-center div{justify-content: center;}
.list-table td.td-right div{justify-content: flex-end;}

.pagination{display: flex; justify-content: center; align-items: center; margin-top: var(--table-mar);}
.pagination a{display: flex; justify-content: center; align-items: center; min-width: 30px; width: fit-content; height: 30px; border-radius: var(--round-min); font-size: 18px; color: var(--main-blue); background-color: var(--bg-blue); margin: 0 5px; transition: all var(--trans-btn);}
.pagination a:first-child{margin-left: 0;}
.pagination a:last-child{margin-right: 0;}
.pagination a:hover{background-color: var(--bg-blue-h); transition: all var(--trans-btn);}
.pagination a p{margin-top: -2px; padding: 0 7px;}
.pagination a svg{height: 20px; fill: var(--main-blue); margin-top: 1px;}
.pagination a.current{background-color: var(--main-blue); color: var(--bg-blue);}
.pagination.top{display: flex; align-items: center; margin-top: 0; position: absolute; top: 0; right: 0;}

/*-----input-----*/
/*--diary--*/
.diary.input #search{padding-bottom: 0;}
/*.diary.input #search .inputBox{margin: 0 40px 0 0;}*/
.diary.input #search .inputBox:last-of-type{margin-right: 0;}

#diary-input{position: relative; z-index: 3;}
#diary-input .input-grid{width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 10px; overflow: auto;}

#diary-input .input-grid .grid-column{display: grid; grid-template-rows: repeat(11, auto); gap: 3px;}
#diary-input .input-grid .grid-column .column-ttl{width: 260px; height: 30px; display: flex; align-items: center; justify-content: center; position: relative;}
#diary-input .input-grid .grid-column:nth-of-type(2n-1) .column-ttl{background-color: var(--table-blue02);}
#diary-input .input-grid .grid-column:nth-of-type(2n) .column-ttl{background-color: var(--table-blue01);}
#diary-input .input-grid .grid-column .column-ttl label{color: var(--white); font-size: 16px;}
#diary-input .input-grid .grid-column .column-ttl .input-x-btn{width: 25px; height: 22px; background-color: var(--trash-red); position: absolute; top: 50%; right: 5px; transform: translate(0, -50%); border-radius: 2px; border: 2px solid var(--white); display: flex; align-items: center; justify-content: center; transition: all var(--trans-btn);}
#diary-input .input-grid .grid-column .column-ttl .input-x-btn:hover{background-color: var(--trash-red-h); transition: all var(--trans-btn);}
#diary-input .input-grid .grid-column .column-ttl .input-x-btn svg{width: 18px; height: 18px; fill: var(--white);}

#diary-input .input-grid .input-flex{display: flex; align-items: center;}
#diary-input .input-flex:first-child{height: 30px; margin-bottom: 7px;}
#diary-input .input-grid .input-flex .grid-labels{width: 180px; height: 100%; margin-right: 10px;}
#diary-input .input-grid .grid-column:not(:first-of-type) .input-flex .grid-labels{display: none;}
#diary-input .input-grid .input-flex .grid-labels{color: var(--text-blue); font-size: 16px; min-height: 40px; display: flex; align-items: center; padding: 5px 15px;}
#diary-input .input-grid .grid-column .input-flex:nth-of-type(2n-1) .grid-labels{background-color: var(--list-blue02);}
#diary-input .input-grid .input-flex:nth-of-type(2n) .grid-labels{background-color: var(--list-blue01);}
#diary-input .input-grid .input-flex:first-child .grid-labels:first-child{background-color: unset; min-height: unset;}

#diary-input .input-grid .grid-column .input-wrapper{width: 260px; min-height: 40px; padding: 5px;}
#diary-input .input-grid .grid-column .input-flex:nth-of-type(2n-1) .input-wrapper{background-color: var(--diary-input02);}
#diary-input .input-grid .grid-column .input-flex:nth-of-type(2n) .input-wrapper{background-color: var(--diary-input01);}

#diary-input .input-grid .grid-column .input-wrapper .inputCase{width: 100%;}
#diary-input .input-grid .grid-column .input-wrapper .inputCase.downtime{width: 100px;}
#diary-input .input-grid .grid-column .input-wrapper input{width: 100%;}
#diary-input .input-grid .grid-column .input-wrapper textarea{width: 100%; height: 100%;}

/*--normal--*/
#normal-input{position: relative;}
#normal-input .input-bg{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--cont-blue); border-radius: var(--round-mid); mix-blend-mode: multiply; z-index: -1;}

#normal-input.input-small .inputBox{margin-right: 0;}
#normal-input.input-small .inputBox:last-of-type{margin-bottom: 0;}
#normal-input.input-small .inputBox .input-ttl{width: 150px; flex-shrink: 0;}

#normal-input .form-input{width: 100%;}
#normal-input .input-form-file-area{border-radius: var(--round-min); position: relative; margin-bottom: var(--inner-mar);}
#normal-input .input-form-file-area input{display: none;}
#normal-input .input-form-file-area .input-form-file-drag-area{display: block; border-radius: var(--round-min); border: 2px dashed var(--main-blue); padding: 25px 20px;}
#normal-input .input-form-file-area .input-form-file-drag-area .drag-area-p{text-align: center; color: var(--main-blue); font-size: 14px; font-weight: 500; line-height: 1.2; margin-bottom: 40px;}
#normal-input .input-form-file-area .file-btn{position: absolute; bottom: 25px; left: 50%; transform: translate(-50%, 0);}

#normal-input .form-input .file-message{color: var(--text-blue); font-size: 15px; margin: 0 0 3px;}

#normal-input .form-input #errmsgFile{}
#normal-input .form-input #file_list{}
#normal-input .form-input #file_list .file-wrapper{display: flex; align-items: center; margin-top: 5px;}
#normal-input .form-input #file_list .file-wrapper:first-of-type{margin-top: 0;}
#normal-input .form-input #file_list .file-wrapper .delete-btn{width: 35px; height: 25px; margin-left: 10px;}


#btn-sec{position: relative; margin-top: 50px;}
.register-date{position: absolute; bottom: -5px; left: 0; z-index: -1;}
.register-date label{color: var(--ttl-blue);}

/*-----stock-----*/
/*--output--*/
main.stock.output .output-sec{max-width: 450px;}
main.stock.output .output-sec .output-bg{border-radius: var(--round-mid);}
main.stock.output .output-sec:nth-last-of-type(2n-1) .output-bg{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--cont-blue); mix-blend-mode: multiply; z-index: -1;}
main.stock.output .output-sec:nth-last-of-type(2n) .output-bg{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--result-blue); mix-blend-mode: multiply; z-index: -1;}

.output-sec .output-ttl{font-size: 17px; font-weight: 500; color: var(--text-blue); margin-bottom: 10px;}

@media screen and (max-width: 1500px) {

/*-----login-----*/
#loginPage .block.left{padding: 40px;}
#loginPage .block.left .siteTitle{font-size: 40px;}
#loginPage main .infoBlock{width: calc(100% - 80px);}
	
}




/* ラベル */
.checkOnly {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 元checkbox非表示 */
.checkOnly input {
    display: none;
}

/* チェックボックス本体（大きめ） */
.checkBox {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--main-blue);
    border-radius: 4px;
    background: #fff;
    position: relative;
    transition: all 0.2s ease;
}

/* ホバー（軽め） */
.checkOnly:hover .checkBox {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.12);
}

/* チェック時 */
.checkOnly input:checked + .checkBox {
    background: var(--main-blue);
    border-color: var(--main-blue);
}

/* チェックマーク */
.checkOnly input:checked + .checkBox::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 7px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}