@charset "utf-8";

/* === Remedies === */
*,::before,::after{box-sizing:border-box}html{line-sizing:normal}body{margin:0}[hidden]{display:none}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.17rem}h4{font-size:1.00rem}h5{font-size:0.83rem}h6{font-size:0.67rem}h1{margin:0.67em 0}pre{white-space:pre-wrap}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;max-width:100%}audio:not([controls]){display:none}picture{display:contents}source{display:none}img,svg,video,canvas{height:auto}audio{width:100%}img{border-style:none}svg{overflow:hidden}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}[type='checkbox'],[type='radio']{box-sizing:border-box;padding:0}

/* === Define vars === */
:root {

  /* --- Base color --- */
  --mainColor: #76b8ee;
  --mainColorLight: color-mix(in srgb, var(--mainColor),white 50%);
  --mainColorDark: color-mix(in srgb, var(--mainColor),black 70%);
  --linkColor: var(--mainColorDark);
  --textColor: var(--mainColorDark);
  --textColorWhite: #eeeeee;
  --lineColor: #dddddd;
  --errorColor: #e70045;

  /* --- background --- */
  --barBackground: linear-gradient(65deg, #00aac5 0%, #03559b 80%);

  /* --- Side bar show --- */
  --sideMenuDisplay: none;

  /* --- Base sizing --- */
  --HeaderHeight: 100px;
  --contentMaxWidth: 1500px;
  --opacity: .5;

  /* --- Break points --- */
  /* Can't use variables in media queries yet...
  --bp-sm: 400px;
  --bp-md: 768px;
  --bp-mm: 977px;
  --bp-lg: 1000px;
  --bp-xl: 1200px;
   */

  /* --- Font --- */
  --font-roboto: 'Roboto', sans-serif;
  --font-awesome: 'Font Awesome 5 Free';

}

/* === Styling === */

html {
  min-width: 320px;
  height: 100%;
  font-family: var(--font-roboto);
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  & ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  & h1, & h2, & h3, & h4, & h5, & h6 {
    margin: 0;
  }
  & a {
    &:link    { color: var(--linkColor); }
    &:visited { color: var(--linkColor); }
    &:hover   { color: color-mix(in srgb, var(--mainColor) 30%, white 70%); }
    &:active  { color: var(--linkColor); }
  }
}

header {
  background: var(--barBackground);
  background-size: cover;
  height: var(--HeaderHeight);
  font-size: 0.8rem;
  box-shadow: 0 3px 25px 10px rgba(0, 0, 0, 0.16);

  .inner {
    width: 100%;
    display: flex;
    height: 100px;
    max-width: 1500px;
    margin: 0px auto;

    #cap {
      display: flex;
      align-items: center;
      .logo {
        /* width: 150px;
        padding-left: 20px; */
      }
      .title {
        padding-left: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        & * {
          color: white;
          font-weight: bold;
          white-space: nowrap;
        }
        & h1 {
          font-size: clamp(1.0rem, 10 / 320 * 100vw, 1.5em);
          .site-title {
            font-size: 0.8em;
            font-weight: normal;
          }
          .system-title {
            font-size: 1.3em;
          }
          .system-sub-title {
            font-weight: 300;
            font-size: 12px;
            margin-top: 3px;
            border-top: solid 1px #ddd;
            padding-top: 3px;
            max-width: 500px;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        .logo {
          /* background-color: #fff3; */
          width: 70px;
          height: 70px;
          margin-right: 15px;
        }
      }
    }

    & nav#global-menu {
      padding: 0 20px;
      flex-grow: 1;
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-end;
      & > ul {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        & li {
          flex-grow: 1;
          min-width: 65px;
          max-width: 80px;
          & a {
            width: 100%;
            padding-bottom: 10px;
            display: block;
            text-align: center;
            line-height: 1;
            text-decoration: none !important;
            border-bottom: solid 7px transparent;
            color: rgba(255, 255, 255, var(--opacity)) !important;
            transition: border-color .1s, color .1s, background .1s;
            padding-top: 15px;
            & i {
              display: block !important;
              margin-bottom: 10px;
              font-size: 2.5rem;
            }
          }
          &:hover a {
            border-bottom: solid 7px white;
            color: white !important;
            transition: border-color .1s, color .1s, background .1s;
            background: rgba(255, 255, 255, .2);
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
          }
          & span {
            display: none;
          }
          & ul.sub-menu {
            display: none;
          }
        }
        & li.active {
          & > a {
            border-bottom: solid 7px white;
            color: white !important;
            background: rgba(0, 0, 0, .5);
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
          }
        }
        & li.godmode a {
          color: #f5f3ad !important;
        }
        & li.godmode.active {
          & a {
            border-bottom: solid 7px #c8c9a6;
            background: #c8c9a644;
          }
        }
        & li.godmode a:hover {
          border-bottom: solid 7px #c8c9a6;
          background: #c8c9a644;
        }
      }
      & > button#menu-sw {
        display: none;
        border: none;
        background: transparent;
        color: var(--textColorWhite);
        font-size: 2.5rem;
        /* background: red; */
        padding: 20px;
        cursor: pointer;
      }
      & .drop {
        background: white;
        box-shadow: 4px 4px 9px 0px #5858587a;
        width: auto;
        border-radius: 10px;
        overflow: hidden;
        > a.dlink {
          box-sizing: border-box;
          padding-left: 15px;
          padding-right: 15px;
          border: none !important;
          background: none !important;
          color: #525252 !important;
          border-radius: 0;
          &:hover {
            background: #ececec !important;
          }
          i {
            display: inline !important;
            font-size: 15px;
            margin-right: 7px;
          }
        }
        a.dlink + a.dlink {
          border-top: solid 1px #ededed !important;
        }
      }
      /* @media screen and (max-width: var(--bp-mm)) { */
      @media screen and (max-width: 977px) {
        flex-direction: row-reverse;
        align-items: center;
        /* padding-right: 30px; */
        & > ul {
          display: none;
        }
        & > button#menu-sw {
          display: block;
        }
      }
    }
  }
}

main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  & nav#side-menu {
    display: var(--sideMenuDisplay);
    box-shadow: -10px 0 25px 0px rgba(0, 0, 0, 0.1) inset;
    & > div {
      position: sticky;
      top: -10px;
      padding: 0;
      & a {
        display: block;
        padding: 10px 20px;
        text-decoration: underline;
      }
      & > ul {
        margin-top: 20px;
        & > li {
          border-bottom: solid 1px var(--lineColor);
          padding: 10px 0;
          & > a {
            font-weight: bold;
          }
          & > ul {
            & > li {
              & a {
                padding: 2px 20px 2px 20px;
                font-size: 0.9rem;
              }
              &:first-child { padding-top: 0px; }
              /* & > a:hover {
                color: var(--mainColor);
                background: color-mix(in srgb, var(--mainColor), transparent 90%);
              }
              &.active > a {
                color: var(--mainColor);
                background: color-mix(in srgb, var(--mainColor), transparent 30%);
              } */
            }
          }
          & > a:hover {
            background: color-mix(in srgb, var(--mainColor), transparent 80%);
            color: var(--mainColorDark);
          }
          &.active > a {
            background: color-mix(in srgb, var(--mainColor), transparent 50%);
            color: var(--mainColorDark);
          }
          & .drop {
            display: none !important;
          }
        }
      }
      & li {
        white-space: nowrap;
      }
      & i {
        font-size: 1.5rem;
        margin-right: 5px;
        vertical-align: middle;
        & ~ span {
          vertical-align: middle;
        }
      }
      & button.uk-offcanvas-close {
        border: none;
        background: none;
        color: var(--textColor);
      }
    }
    & > .uk-offcanvas-bar {
      background: white;
      box-shadow: 25px 0 25px -25px rgba(0,0,0,0.5) inset;
    }
    /* @media screen and (max-width: var(--bp-mm)) { */
    @media screen and (max-width: 977px) {
      & > div {
        position: inherit;
        top: 0;
        & > ul {
          margin-top: 0;
        }
      }
    }
  }
  & .wrap {
    display: flex;
    padding: 0 40px;
    max-width: min(calc(100vw - 20px), var(--contentMaxWidth));
    margin: 40px auto;
  }
  & #content {
    width: 100vw;
    & > section.title {
      margin-bottom: 40px;
      & h1 {
        font-size: 2.5rem;
        border-bottom: solid 1px var(--lineColor);
        padding-bottom: 20px;
        & i {
          margin-right: 10px;
        }
      }
      & a {
        text-decoration: underline;
      }
      & ul ~ h1 {
        margin-top: 10px;
      }
    }
  }
}

footer {
  position: relative;
  z-index: 100;
  clear: both;
  background: var(--barBackground);
  background-size: cover;
  color: var(--textColorWhite);
  padding: 20px;
  text-align: center;
  & > small {
    font-style: italic;
  }
}

.uk-offcanvas-bar {
  width: 200px;
}
.uk-offcanvas-flip .uk-offcanvas-bar {
  left: auto;
  right: -200px;
}
.uk-offcanvas-flip.uk-offcanvas-container-animation {
  left: -200px;
}

.uk-table-hover tbody tr.disabled,
.uk-table-hover > tr:hover {
  background-size: auto auto;
  background-color: rgba(255, 255, 255, 1);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(238, 238, 238, 1) 5px, rgba(238, 238, 238, 1) 10px );
}
.uk-table-hover tbody tr.disabled:hover,
.uk-table-hover>tr:hover {
  background-size: auto auto;
  background-color: rgba(255, 255, 200, 1);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(238, 238, 200, 1) 5px, rgba(238, 238, 238, 1) 10px );
}

#submit-buttons {
  visibility: hidden;
}

.cancel-button-block {
  visibility: hidden;
}
.cancel-button-block.cancel-button-show {
  visibility: visible;
}
button.cancel-button {
  background: rgba(255, 255, 255, .5);
  padding: 5px 10px;
  font-weight: bold;
  font-size: 12px;
  color: #008;
}
.clear-both {
  clear: both;
}
.req::before {
  content: '必須';
  float: right;
  padding: 3px 5px;
  font-size: 12px;
  letter-spacing: 1.1px;
  background: rgba(255, 0, 0, .1);
  color: red;
  font-weight: bold;
  white-space: nowrap;
  border-radius: 3px;
  margin-left: 5px;
}
.opt::before {
  content: '任意';
  float: right;
  padding: 3px 5px;
  font-size: 12px;
  letter-spacing: 1.1px;
  background: rgba(0, 0, 0, .2);
  color: #fff;
  font-weight: 400;
  white-space: nowrap;
  border-radius: 3px;
  margin-left: 5px;
}
#content.login {
  width: auto;
  margin-top: 50px;
  & > section {
    max-width: 640px;
  }
}
#content a {
  text-decoration: underline !important;
  color: inherit;
}

/* content preview in confirm */
.content-preview {
  border: dashed 2px #ccc;
  padding: 30px !important;
  & img {
    display: inline;
  }
}

#tab-type-entry ,
#tab-type-pdf ,
#tab-type-url {
  display: none;
}
.show {
  display: block !important;
}

.pdf-filelink {
  background: #eee;
  border: solid 1px #e5e5e5;
  margin: 0;
  padding: 3px 10px;
  border-bottom: none;
}

#content .uk-pagination > li {
  padding: 0;
  margin: 0 1px;
  & > a {
    padding: 5px 10px;
    &:hover {
      background-color: #ffd;
      outline: solid 1px orange !important;
    }
    &.uk-active {
      font-size: 1.1rem;
      text-decoration: none !important;
      outline: solid 1px #eee;
    }
  }
}

.table-scroll {
  overflow: auto;
  white-space: nowrap;
  max-width: calc(100vw - 80px);
}

/* === Login form styles === */
main.login {
  & section {
    & form {
      & button[type=submit] {
        & i {
          margin-left: 10px;
        }
      }
    }
  }
}

/* === Error page === */
main.error #content section.title {
  & h1 {
    color: var(--errorColor);
    font-weight: bold;
    font-style: italic;
    text-shadow: 2px 2px 2px color-mix(in srgb, var(--errorColor), transparent 70%);
    border-bottom: solid 1px var(--errorColor);
  }
  & h2 {
    color: var(--errorColor);
    margin-top: 20px;
  }
}

button.uk-button-gold {
  background: gold
}

table.uk-table {
  td {
    white-space: initial;
  }
  td.state {
    white-space: nowrap;
    text-align: center;
    font-weight: bold;
    small {
      font-weight: normal;
    }
  }
  td.title { min-width: 200px; }
  td.label { min-width: 200px; }
  td.category { font-size: 0.8rem; }
  td.date { font-size: 0.8rem; white-space: nowrap; }
  td.sponsor_name { font-size: 0.8rem; }
  td.nowrap { white-space: nowrap; }
}

.uk-button-green {
  background: #31b11b;
  color: white;
}
.uk-button:disabled {
  color: #ddd;
}
select option.active {
  background: rgb(255, 255, 164);
}

.method-list-item {
  margin-top: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  & > button {
    background: none;;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    i {
      font-size: 20px;
      color: #888;
      &:hover {
        color: rgb(136, 60, 60);
      }
    }
  }
  option[disabled] {
    background: #feffcd;
  }
}
button.add {
  border: none;
  background: none;
  color: #1e87f0;
  text-decoration: underline;
  padding: 5px 10px;
  font-size: 15px;
  cursor: pointer;
  &:hover {
    background-color: #eee;
  }
}

i.topics {
	color: #eb9a00;
}

table.schedule {

  tbody.odd {
    background: #fafafa;
  }
  tbody:hover {
    background: #ffd !important;
    .date {
      color: #000;
    }
  }
  tr:hover {
    background: #ff8;
    td {
      color: #000;
    }
  }
  td {
    height: 70px;
    text-align: center;
    button {
      padding: 5px 20px;
      cursor: pointer;
    }
  }
  th.date {
    text-align: center;
    vertical-align: middle;
    font-size: 1.0rem;
    font-weight: bold;
    span.num {
      font-size: 1.5rem;
    }
  }
  thead {
    tr:hover {
      background: none;
    }
  }
  button.stat-button {
    &.changed {
      border: solid 4px #1e87f0;
      border-radius: 3px;
    }
    img {
      width: 30px;
    }
  }
}

[v-cloak] {
  display: none;
}

div#content.submitting {
  opacity: 0.2;
  transition: opacity 0.5s;
  pointer-events: none;
}

#information-box {
	width: 200px;
	min-width: 200px;
	padding-right: 20px;
	margin-right: 30px;
	box-sizing: content-box;
	border-right: solid 1px var(--lineColor);
	& > div {
		position: sticky;
		top: 40px;
	}
	.box {
		border: solid 3px gray;
		h3 {
			padding: 5px 10px;
			text-align: center;
			background: gray;
			color: #fff;
			font-size: 1rem;
			font-weight: bold;
		}
		ul {
			margin: 15px;
			li {
				a {
					display: flex;
					gap: 10px;
					align-items: center;
					.icon {
						img {
							max-width: initial;
						}
					}
					.text {
						font-size: 0.8rem;
						color: blue;
						text-decoration: underline;
						word-break: break-word;
						line-height: 1.1;
					}
					&:hover {
						background: color-mix(in srgb, var(--mainColor), transparent 80%);
					}
				}
				& + li {
					margin-top: 10px;
				}
			}
		}
		& + .box {
			margin-top: 20px;
		}
	}
	.box-navy {
		border-color:navy;
		h3 {
			background: navy;
		}
	}
	.box-blue {
		border-color:rgb(0, 110, 255);
		h3 {
			background: rgb(0, 110, 255);;
		}
	}
	&.hide, .hide {
		display: none;
	}
}
@media (max-width: 639px) {
	main {
		flex-direction: column-reverse;
		#information-box {
			width: 100%;
		}
	}
}

button.sent {
	position: relative;
	overflow: hidden;
	background: #a9b1a8;
	&.sent::before {
		content: '済';
		display: block;
		position: absolute;
		font-weight: bold;
		color: #f00a;
		font-size: 1.7rem;
		right: 0;
		transform: rotate(-20deg);
		margin-right: 2px;
		margin-top: 1px;
	}
}

.filters {
	display: flex;
	background :#eee;
	padding: 15px 20px;
	align-items: center;
	gap: 20px;
	> div:last-child {
		flex-grow: 1;
		text-align: right;
	}
}
@media (max-width: 768px) {
	.filters {
		display: block;
	}
}

hr {
	margin: 10px 0;
}

.uk-form-horizontal {
	.uk-form-label {
		width: 220px;
		float: left;
		font-weight: 500;
	}
	.uk-form-controls {
		margin-left: 250px;
	}
}
@media (max-width: 639px) {
	.uk-form-horizontal {
		.uk-form-label {
			width: auto;
			float: initial;
			margin-bottom: 12px;
			margin-top: 0px;
		}
		.uk-form-controls {
			margin-left: 0;
		}
	}
	hr {
		margin: 20px 0;
	}
}

.error {
	color: red;
	padding: 4px 0;
	font-size: 0.9rem;
	font-weight: bold;
	animation: customBlink 1.4s infinite;
}
@keyframes customBlink {
	0% { opacity: 1; }          /* 開始時: 完全表示 */
	71.43% { opacity: 1; }      /* 1秒間: 完全表示を維持 (1s/1.4s ≈ 71.43%) */
	85.71% { opacity: 0.3; }    /* 0.2秒で半透明に (1.2s/1.4s ≈ 85.71%) */
	100% { opacity: 1; }        /* 0.2秒で完全表示に戻る */
}

.pw-sw {
	margin-left: -40px;
}

.uk-form-horizontal .uk-form-controls-text {
	padding-top: 7px;
}

kz-file span.button-caution {
	position: absolute;
	margin-left: 15px;
}

.empty {
	color: #ccc;
	font-size: 0.9rem;
	line-height: 1.9rem;
}

progress {
	height: 20px;
	vertical-align: middle;
}

#content section.title {
	ul.tab {
		display: flex;
		align-items: flex-end;
		position: absolute;
		bottom: 0;
		right: 20px;
		li {
			a {
				font-size: 0.8rem;
				display: inline-block;
				padding: 10px 20px;
			}
		}
		li.active {
			a {
				font-size: 1.0rem;
				color: #338 !important;
				padding-bottom: 5px;
				text-decoration: none !important;
				font-weight: bold;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				border-bottom: solid 1px #fff !important;
				border-left: solid 1px var(--lineColor);
				border-right: solid 1px var(--lineColor);
				border-top: solid 1px var(--lineColor);
			}
		}
	}
}

.boxes {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
	fieldset {
		border-radius: 5px;
		background: #fafafa;
		margin: 0;
		legend {
			padding: 0 10px;
			margin-bottom: 5px;
		}
	}
}

ul.sent-histories {
	min-height: 100px;
	max-height: 214px;
	overflow-y: scroll;
	background: #fff;
	color: #222;
	font-size: 0.8rem;
	padding: 5px 10px;
	margin-left: 13px;
	border: solid 1px var(--lineColor);
}

ul.menu a {
  position: relative;
}
.badge {
  position: absolute;
  display: inline-block !important;
  right: 5px;
  top: 5px;
  background: #e4ff05;
  padding: 3px 5px;
  border-radius: 10px;
  color: #ff0081;
  font-size: 10px;
  font-weight: 700;
}
.dlink {
  .badge {
    right: 2px;
    top: 2px;
  }
}
.uk-table th {
  vertical-align: middle;
}

p.caution {
  color: darkred;
  font-size: 0.9rem;
  margin: 5px 0;
  white-space: normal;
}

p.notice {
  background: #ffa;
  padding: 15px 20px;
  color: #800;
  font-weight: 500;
}

h2.midashi {
  border-left: solid 5px navy;
  padding: 5px 10px;
  margin-top: 60px !important;
  margin-bottom: 30px !important;
  & + div > table {
    border-top: solid 1px #e5e5e5;
  }
}
.youtube-account {
	background: #eee;
	padding: 10px 20px;
	margin-top: 10px;
	line-height: 2.0;
	box-shadow: 10px 10px #0003;
	display: inline-block;
	margin-bottom: 10px;
  h3 {
    font-size: 15px;
    font-weight: bold;
    white-space: normal;
  }
  ul li {
    list-style: disc;
    margin-left: 40px;
    font-size: 14px;
    line-height: 1.2;
    a {
      white-space: normal;
    }
    & + li {
      margin-top: 5px;
    }
  }
}
.uk-select option:disabled {
  color: rgba(0, 0, 0, 0.3) !important;
  background-color: #eee;
}

.judge-ok    { font-size: 20px; color: rgb(0, 89, 255); }
.judge-ng    { font-size: 20px; color: orangered; }
.judge-empty { font-size: 0.8rem; color: #888; }

label.judge-item {
  background: #eee;
  padding: 5px 10px;
  display: inline-block;
  width: 95px;
  border-top:    solid 1px #fff;
  border-right:  solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  border-left:   solid 1px #fff;
  cursor: pointer;
  &:hover {
    background: #ff8;
  }
  input {
    margin-right: 10px;
  }
  i, span {
    vertical-align: middle;
  }
  & + label {
    margin-top: 3px;
    margin-left: 5px;
  }
  &:has(input:checked) {
    border-top:    solid 1px #ccc;
    border-right:  solid 1px #fff;
    border-bottom: solid 1px #fff;
    border-left:   solid 1px #ccc;
    background: #d0eaff;
  }
}

.uk-table-bordered {
  th, td {
    border: solid 1px #ddd;
  }
  th {
    background: #f5f5f5;
    font-weight: bold;
  }
}