@charset "UTF-8";

:root{
  /* color */
  --base:rgba(250,245,240,1);

  --white:rgba(255,255,255,1);
  --black:rgba(50,50,50,1);
  --gray:rgba(210,210,210,1);
  --darkgray:rgba(175,175,175,1);
  --lightgray:rgba(211,211,211,1);
  --orange:rgba(230,75,15,1);
  --blue:rgba(25,140,225,1);
  --yellow:rgba(242,230,5,1);
  --green:rgba(15,165,80,1);
  --purple:rgba(95,10,165,1);
  --red:rgba(225,5,5,1);

  --white-97:rgba(255,255,255,.97);
  --black-97:rgba(50,50,50,.97);
  --gray-97:rgba(210,210,210,.97);
  --darkgray-97:rgba(140,140,140,.97);
  --orange-97:rgba(230,75,15,.97);
  --blue-97:rgba(25,140,225,.97);
  --yellow-97:rgba(242,230,5,.97);
  --green-97:rgba(15,165,80,.97);
  --purple-97:rgba(95,10,165,.97);
  --red-97:rgba(225,5,5,.97);

  --white-75:rgba(255,255,255,.75);
  --black-75:rgba(50,50,50,.75);
  --gray-75:rgba(210,210,210,.75);
  --darkgray-75:rgba(140,140,140,.75);
  --orange-75:rgba(230,75,15,.75);
  --blue-75:rgba(25,140,225,.75);
  --yellow-75:rgba(242,230,5,.75);
  --green-75:rgba(15,165,80,.75);
  --purple-75:rgba(95,10,165,.75);
  --red-75:rgba(225,5,5,.75);

  --white-50:rgba(255,255,255,.50);
  --black-50:rgba(50,50,50,.50);
  --gray-50:rgba(210,210,210,.50);
  --darkgray-50:rgba(140,140,140,.50);
  --orange-50:rgba(230,75,15,.50);
  --blue-50:rgba(25,140,225,.50);
  --yellow-50:rgba(242,230,5,.50);
  --green-50:rgba(15,165,80,.50);
  --purple-50:rgba(95,10,165,.50);
  --red-50:rgba(225,5,5,.50);

  --white-25:rgba(255,255,255,.25);
  --black-25:rgba(50,50,50,.25);
  --gray-25:rgba(210,210,210,.25);
  --darkgray-25:rgba(140,140,140,.25);
  --orange-25:rgba(230,75,15,.25);
  --blue-25:rgba(25,140,225,.25);
  --yellow-25:rgba(242,230,5,.25);
  --green-25:rgba(15,165,80,.25);
  --purple-25:rgba(95,10,165,.25);
  --red-25:rgba(225,5,5,.25);

  --white-10:rgba(255,255,255,.10);
  --black-10:rgba(50,50,50,.10);
  --gray-10:rgba(210,210,210,.10);
  --darkgray-10:rgba(140,140,140,.10);
  --orange-10:rgba(230,75,15,.10);
  --blue-10:rgba(25,140,225,.10);
  --yellow-10:rgba(242,230,5,.10);
  --green-10:rgba(15,165,80,.10);
  --purple-10:rgba(95,10,165,.10);
  --red-10:rgba(225,5,5,.10);

  --clear:rgba(255,255,255,0);

  --highlight:rgba(255,255,210,1);
  --lowlight:rgba(235,245,255,1);

}


* {
  color:var(--black);
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
  font-style:normal;
  font-weight:600;
  box-sizing:border-box;
  text-decoration:none;
}
body {
  font-size:12px;
  text-align:justify;
  line-height:2;
  margin:0;
  padding:0;
}
h1,h2,h3,h4,div,dl,dt,dd,ul,li,img,a,p,span,iframe,small,strong,figure,address,select,input,button,textarea,a,i,b,u,hr,em,sub,time,mark {
  margin:0;
  padding:0;
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  font-style:inherit;
  font-weight:inherit;
  list-style:none;
  text-align:justify;
  word-break:break-all;
  outline:none;
  background:none;
  border:none;
}
select,input,select,button {
  cursor:pointer;
  background:transparent;
  background-image:none;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}
picture {
  display:block;
}
br {
  line-height:1;
}
sub {
  bottom:initial;
}
svg {
  display:block;
}
small {
  font-size:93%;
}
img {
  display:block;
  width:100%;
}


/******** colors ********/
[data-color="base"] {
  background-color:var(--base);
}
[data-color="black"] {
  background-color:var(--black);
}
[data-color="orange"] {
  background-color:var(--orange);
}
[data-color="yellow"] {
  background-color:var(--yellow);
}
[data-color="blue"] {
  background-color:var(--blue);
}
[data-color="green"] {
  background-color:var(--green);
}
[data-color="purple"] {
  background-color:var(--purple);
}
[data-color="red"] {
  background-color:var(--red);
}

[data-state="general"] {
  background-color:var(--green);
}
[data-state="sbd"] {
  background-color:var(--purple);
}
[data-state="stop"] {
  background-color:var(--black);
}

[data-type="import"] {
  display:flex;
  align-items:center;
  width:100%;
  min-height:50px;
  padding:1em;
  background-color:var(--lowlight);
  border:1px solid var(--gray);
}


.bg{
  background-color:var(--base);
}


/******** loading ********/
body[data-state="loading"] * {
  animation-duration:0s!important;
  transition-duration:0s!important;
}

.curtain {
  position:fixed;
  z-index:100000;
  background-color:white;
  transition:opacity .8s ease-out, visibility .8s ease-out .8s;
  opacity:1;
  visibility:visible;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
[data-loaded="1"] .curtain {
  transition:opacity .4s ease-out .5s, visibility .9s ease-out .9s;
  opacity:0;
  visibility:hidden;
}
.donutSpinner {
  display:inline-block;
  border:1px solid var(--gray);
  border-left-color:var(--black);
  border-radius:50%;
  width:35px;
  height:35px;
  animation:donut-spin 1.2s linear infinite;
  transition:opacity .4s ease-out;
}
[data-loaded="1"] .donutSpinner {
  opacity:0;
}
@keyframes donut-spin {
  0% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
  }
}


/******** accordion ********/
.accordion{
  overflow:hidden;
  margin:0;
  padding:0;
}
.accordion[data-state="default"]{animation:close 0s forwards;}
.accordion[data-state="open"]{animation:open 0.3s forwards ease-in;}
.accordion[data-state="close"]{animation:close 0.3s forwards ease-out;}
@keyframes open{
  0%{height:0;}
  100%{height:none;}
}
@keyframes close{
  0%{height:none;}
  100%{height:0;}
}


/******** header ********/
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  height:40px;
  color:var(--white);
  font-size:90%;
  background:var(--black);
}
header img {
  display:block;
  aspect-ratio:1;
}
header h1 {
  display:inline-flex;
  align-items:center;
  padding:0 0 0 25px;
}
header i {
  margin:0 9px 0 0;
}
header h1 a {
  display:inline-flex;
  align-items:center;
}
header h1 a img {
  height:25px;
}
header h1 a b {
  margin:2px 0 0 0;
}
header h1 a > b + b:before {
  content:'／';
  margin:0 5px;
}
header ul {
  display:inline-flex;
  height:100%;
}
header ul li {
  height:100%;
  border-left:1px solid;
}
header ul li a {
  display:inline-flex;
  align-items:center;
  height:100%;
  padding:0 25px;
}
header ul li img {
  height:18px;
}


/******** footer ********/
footer{
  display:flex;
  justify-content:center;
  padding:90px 0 125px;
}
footer img{
  width:92px;
}


/******** current ********/
.current * {
  color:var(--orange);
}


/******** main ********/
main {
  display:flex;
}

main nav{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  width:110px;
  height:auto;
  min-height:100vh;
  min-height:100svh;
  padding:15px 0 25px;
  background-color:var(--base);
}
main nav a{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:90px;
  padding:20px 0 18px;
}
main nav a:not(:first-child){ border-top:1px solid var(--gray) }
main nav a > * {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  font-size:98%;
}
main nav i {
  width:32px;
  aspect-ratio:1;
}

main section{
  width:calc(100% - 110px);
  height:auto;
  padding:50px 30px 150px;
  position:relative;
}
.ttlicon {
  display:flex;
  align-items:center;
  font-size:13px;
  position:relative;
}
.ttlicon i {
  width:35px;
  aspect-ratio:1;
  margin:-3px 12px 0 0;
}
.ttlicon a {
  display:inline-flex;
  padding:5px 20px;
  color:var(--white);
  background-color:var(--blue);
  border-radius:2px;
  font-size:95%;
  position:absolute;
  top:50%;
  right:0;
  transform:translate(0,-50%);
}
.ttlicon a img {
  width:15px;
  aspect-ratio:1;
  margin:0 9px 0 0;
}

.dateview {
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:13px;
}
.dateview small {
  margin:2px 0 0 2px;
  font-size:75%;
}
.dateview i {
  display:inline-flex;
  align-items:center;
}
.dateview > i + i {
  margin:0 0 0 2px;
}
.dateview time {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:30px 60px;
}
.dateview .arrow {
  height:12px;
  aspect-ratio:.8 / 1;
  background-color:var(--black);
}
.dateview .arrow {
  clip-path:polygon(0 0, 0% 100%, 100% 50%);
}
.dateview .arrow.prev {
  transform:scaleX(-1);
}

.empty_message {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:125px;
  background-color:var(--lightgray);
  border:1px solid var(--gray);
}

.switch {
  display:flex;
  width:100%;
  margin:50px 0;
}
.innerSwicth .switch {
  margin:0;
}
.dateview + .switch {
  margin:0 0 50px 0;
}
.switch input {
  display:none;
}
.switch label {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:100%;
}
.switch label span {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:50px;
  border:solid 1px var(--gray);
  background-color:var(--white);
  white-space:nowrap;
  transition:color 0.2s,background 0.2s;
}
.switch label + label span {
  border-left:none;
}
.switch label :checked + span {
  color:var(--white);
  border-color:var(--black);
  background:var(--black);
}
.switch [data-color="orange"] :checked + span {
  border-color:var(--orange);
  background-color:var(--orange);
}
.switch [data-color="blue"] :checked + span {
  border-color:var(--blue);
  background-color:var(--blue);
}
.switch [data-color="green"] :checked + span {
  border-color:var(--green);
  background-color:var(--green);
}
.switch [data-color="gray"] :checked + span {
  border-color: var(--gray);
  background-color: var(--gray);
}

.switch u {
  width:22px;
  aspect-ratio:1;
  margin:0 5px 0 0;
  position:relative;
}
.switch img {
  width:100%;
  position:absolute;
  top:calc(50% - 11px);
  left:0;
}
.switch input + span .on {opacity:0;}
.switch input + span .off {opacity:1;}
.switch input:checked + span .on {opacity:1;}
.switch input:checked + span .off {opacity:0;}
.switch input[type="radio"] + span {
  margin:0;
  padding:0;
}
.switch input[type="radio"] + span:before {
  display:none;
}

.field .switch {
  margin:0;
}
.office_switch {
  margin:50px 0 0 0;
}

.tools {
  display:flex;
  position:absolute;
  top:45px;
  right:30px;
}
.tools .switch {
  margin:0;
}
.tools .switch label span {
  height:40px;
  padding:0 30px;
}
.tool_select {
  display:inline-flex;
  align-items:center;
}
.tool_select select {
  width:7em;
  min-height:40px;
  margin:0 5px;
}
.tool_search {
  display:flex;
  justify-content:center;
  width:100%;
  padding:0 0 50px 0;
  position:relative;
  z-index:2;
}
.tool_search select {
  width:20em;
  min-height:40px;
  font-size:95%;
}

.tool_button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:130px;
  height:40px;
  padding:0 0 0 15px;
  color:var(--white);
  font-size:95%;
  border-radius:2px;
  white-space:nowrap;
  position:relative;
}
.tool_button + .tool_button {
  margin:0 0 0 5px;
}
.tool_button:before {
  content:'';
  width:18px;
  aspect-ratio:1;
  position:absolute;
  top:50%;
  left:15px;
  transform:translate(0,-50%);
}
.tool_button.sort:before {
  background-image:url(/images/common/sort-wht.svg);
}
.tool_button.add:before {
  background-image:url(/images/common/plus-wht.svg);
}
.tool_button.back {
  width:115px;
  color:var(--black);
  border:1px solid var(--gray);
}
.tool_button.back:before {
  background-image:url(/images/common/arrow-blk.svg);
}

.sort_ignore {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:130px;
  aspect-ratio:1;
  color:var(--white);
  border-radius:50%;
  line-height:1.6;
  text-align:center;
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:10;
}

.wrapper{
  margin:50px 0 0 0;
}
.dateview + .wrapper{
  margin:0;
}

.tabgroup {
  display:none;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  animation:off 0s forwards;
}
.tabgroup > .dateview {
  margin:-50px 0 0 0;
}
.tabgroup > .tools {
  top:-140px;
  right:0;
}
.tabgroup[data-visible="on"] {
  display:block;
  position:relative;
  animation:on 0.5s forwards;
}
[data-visible="off"] {
  animation:off 0.3s forwards;
}
[data-visible="on"] {
  animation:on 0.3s forwards;
}
@keyframes off{
  0% {
    display:block;
    opacity:1;
    z-index:1;
  }
  99% {
    display:block;
    opacity:0;
    z-index:1;
  }
  100% {
    display:none;
    opacity:0;
    z-index:-1;
  }
}
@keyframes on{
  0% {
    display:none;
    opacity:0;
    z-index:-1;
  }
  1% {
    display:block;
    opacity:0;
    z-index:1;
  }
  100% {
    display:block;
    opacity:1;
    z-index:1;
  }
}
.wrapper .ttlicon {
  margin:40px 0 20px 0;
}
.wrapper .tool_search + .ttlicon,
.wrapper .ttlicon:first-child {
  margin-top:0;
}
.wrapper .ttlicon i {
  padding:3px;
}

.link_page {
  display:flex;
  justify-content:center;
}
.link_page > li + li {
  border-left:1px solid var(--darkgray);
}
.link_page a {
  padding:3px 20px;
  position:relative;
}
.link_page .current {
  color:var(--orange);
}
.link_page .current:before {
  content:'';
  width:9px;
  aspect-ratio:1 / .8;
  clip-path:polygon(0 0, 100% 0%, 50% 100%);
  background-color:var(--orange);
  position:absolute;
  bottom:-15px;
  left:calc(50% - 5px);
}
.link_page .disabled {
    color:var(--darkgray);
}
.tab_disabled {
    background-color:var(--lightgray) !important;
    cursor: not-allowed !important;
}

.upload_area {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:50px;
  margin:0 0 25px 0;
  color:var(--white);
  background:var(--blue);
  border-radius:2px;
  cursor:pointer;
}
.upload_area i {
  width:22px;
  aspect-ratio:1;
  margin:-3px 9px 0 0;
}
.upload_area[data-state="uploading"]{
  pointer-events:none;
}
.uploaded {
  display:flex;
  flex-wrap:wrap;
  width:100%;
  height:auto;
  margin:30px -5px 0 -5px;
}
.uploaded .photobox {
  width:calc(100% / 3);
  padding:5px;
  position:relative;
}
.uploaded .photobox p {
  display:flex;
  flex-direction:column;
  margin:10px 0;
  line-height:1.6;
}
.uploaded .photobox p > * {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.uploaded .photobox button {
  width:30px;
  aspect-ratio:1;
  background-color:var(--red-97);
  border-radius:50%;
  position:absolute;
  top:-3px;
  left:-3px;
}
.uploaded .photobox button hr {
  width:20px;
  height:1px;
  margin:initial;
  background-color:var(--white);
  position:absolute;
  top:50%;
  left:50%;
}
.uploaded .photobox button hr:first-child {
  transform:translate(-50%,-50%) rotate(45deg);
}
.uploaded .photobox button hr:last-child {
  transform:translate(-50%,-50%) rotate(-45deg);
}

.add_table {
  position:fixed;
  bottom:0;
  right:0;
  z-index:10;
}
.add_table a {
  display:inline-flex;
  align-items:center;
  height:50px;
  padding:0 65px 0 60px;
  border-radius:6px 0 0 0;
  background-color:var(--orange);
  color:var(--white);
}
.add_table a i {
  width:15px;
  aspect-ratio:1;
  margin:0 6px 0 0;
}

.registered {
  margin:50px 0 0 0;
}
.registered h2 {
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 0 50px 0;
}
.registered h2 i {
  width:22px;
  aspect-ratio:1;
  margin:0 9px 0 0;
}
.registered h2 b {}
.registered_item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:60px;
  border:1px solid var(--gray);
}
.registered_item + .registered_item {
  margin:9px 0 0 0;
}
.registered_item > * {}
.registered_item .item {
  padding:0 18px;
}
.registered_item .item i {
  display:inline-flex;
  align-items:center;
  height:100%;
}
.registered_item .item > i + i:before {
  content:'｜';
  margin:0 3px 0 0;
}
.registered_item .process {
  display:flex;
  height:100%;
}
.registered_item a,
.registered_item button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  height:100%;
  padding:0 15px;
  color:var(--white);
  border-left:2px solid;
}
.registered_item .edit {
  background-color:var(--blue);
}
.registered_item .confirm {
  background-color:var(--orange);
}
.registered_item .process i {
  width:20px;
  aspect-ratio:1;
  margin:0 6px 0 0;
  position:relative;
}
.registered_item .delete {
  background-color:var(--black);
}
.registered_item .delete hr {
  width:2px;
  height:85%;
  background-color:var(--white);
  position:absolute;
  top:50%;
  left:50%;
}
.registered_item .delete hr:first-child {
  transform:translate(-50%,-50%) rotate(45deg);
}
.registered_item .delete hr:last-child {
  transform:translate(-50%,-50%) rotate(-45deg);
}

.registered .entry_fee {
  display:flex;
  flex-direction:column;
  align-items:center;
}
.registered .entry_fee label {
  display:inline-flex;
  align-items:center;
  position:relative;
}
.registered .entry_fee i {
  width:22px;
  aspect-ratio:1;
  margin:0 6px 0 0;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-45px,-50%);
}
.registered .entry_fee .entry {
  width:17.5em;
}
.registered .entry_fee .entry input {
  text-align:center;
}
.registered .entry_fee .entry mark {
  position:absolute;
  top:50%;
  right:-20px;
  transform:translate(0,-50%);
}
.registered .entry_fee .confirm {
  width:17.5em;
  margin:15px 0 0 0;
}
.registered .entry_fee .confirm input {
  padding:0 0 0 25px;
  border-radius:2px;
}

.registered .export_fee {
  display:flex;
  justify-content:center;
  margin:50px 0 0 0;
}
.registered .export_fee i {}
.registered .export_fee > i + i:before {
  content:'｜';
  margin:0 5px;
}







/******** paginator ********/
.paginator{
  margin-top:30px;
  display:flex;
}
.paginator > *{
  display:flex;
  border:1px solid var(--gray);
  width:30px;
  height:30px;
  justify-content:center;
  align-items:center;
  margin-right:10px;
  font-size:var(--11pt);
}
.paginator  a{color:var(--black);}
.paginator  span{color:white;background:black}


/****************message and erroe box****************/
.has_session {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:auto;
  position:fixed;
  bottom:0;
  left:0;
  z-index:100;
  opacity:1;
  visibility:visible;
  transition:.2s ease-out;
}
.has_session.hidden_this {
  transform:translate(0,100%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.session_result {
  display:flex;
  flex-direction:column;
  width:100%;
  padding:100px;
  background-color:var(--orange-97);
  color:var(--white);
}
.session_result h2 {
  margin:0 0 12px 0;
  font-size:13px;
}
.session_result h2 i {
  display:inline-flex;
  align-items:center;
}
.session_result h2 hr {
  height:8px;
  aspect-ratio:1 / .8;
  margin:0 5px 0 0;
  clip-path:polygon(0% 0%, 100% 0%, 50% 100%);
  background-color:var(--white);
}
.session_result ul li {
  padding:0 0 0 25px;
  position:relative;
}
.session_result ul li:before {
  content:'';
  width:16px;
  aspect-ratio:1;
  background-image:url(/images/common/vmark-wht.svg);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  position:absolute;
  top:calc(50% - 8px);
  left:0;
}
.has_session.is_complete {
  border-top:1px solid var(--gray);
}
.has_session.is_complete .close hr {
  background-color:var(--black);
}
.has_session.is_complete .session_result {
  align-items:center;
  background-color:var(--white-97);
  color:var(--black);
}
.has_session.is_complete h2 {
  margin:0 0 5px 0;
  font-size:25px;
  letter-spacing:0;
}
.has_session.is_error {
  border-top:1px solid var(--orange);
}
.has_session.is_error .close hr {
  background-color:var(--white);
}
.has_session.is_error .session_result {
  background-color:var(--orange-97);
  color:var(--white);
}



.errorField {background-color:#ffba9b!important;}
.errorField::placeholder {color:#e24040!important;}