@charset "UTF-8";
:root {
  --smt-color-dark: #263357;
}

.session-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  background: rgba(8, 27, 42, 0.8);
  padding: 4px 12px;
  color: #FFF;
}
@media print, screen and (min-width: 769px) {
  .session-date {
    padding: 4px 16px;
  }
}
@media (width >= 1200px) {
  .session-date {
    padding: 4px calc((100% - 1200px) / 2);
  }
}
.session-date .text {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.session-date .text h2 {
  margin: 0 0.5em 0 0;
  color: #FFF;
  font-family: "Oswald", sans-serif;
  font-size: 24px;
}
.session-date .text h2 span {
  font-size: 13px;
}
.session-date .text h2 span.time {
  font-family: "Oswald", sans-serif;
  font-weight: normal;
}
.session-date .text .special {
  margin-left: 0.5em;
  display: inline-block;
  position: relative;
  height: 24px; /*高さ*/
  line-height: 24px; /*高さ*/
  text-align: center;
  padding: 0 18px; /*文字の2左右の余白*/
  font-size: 13px; /*文字サイズ*/
  background: #d62136; /*背景色*/
  color: #FFF; /*文字色*/
  box-sizing: border-box;
}
.session-date .text .special:before, .session-date .text .special:after {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  z-index: 1;
}
.session-date .text .special:before {
  top: 0;
  left: 0;
  border-width: 12px 0px 12px 6px;
  border-color: transparent transparent transparent #394955;
  border-style: solid;
}
.session-date .text .special:after {
  top: 0;
  right: 0;
  border-width: 12px 6px 12px 0px;
  border-color: transparent #394955 transparent transparent;
  border-style: solid;
}
.session-date .status {
  background-color: #BC080B;
  color: #FFF;
  font-weight: bold;
  font-size: 12px !important;
  text-align: center;
  padding: 0.16em 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media print, screen and (min-width: 769px) {
  .session-date .status {
    height: 36px;
  }
}

.preview-message {
  padding: 1rem;
  background: #fdf4f4;
  text-align: center;
  color: red;
}

@media print, screen and (min-width: 769px) {
  .session-disp:not(:has(.session-modal-header)) .session-layout {
    display: grid;
    grid-template-columns: auto 300px;
    gap: 24px;
  }
}
.session-disp .session-layout {
  padding-top: 24px;
}
.session-disp .session-wrap {
  margin-bottom: 3em;
  position: relative;
  background: #FFF;
  border-radius: 8px;
  border: solid 1px #dadada;
  padding: 1em;
}
@media print, screen and (min-width: 769px) {
  .session-disp .session-wrap {
    padding: 36px;
  }
}
.session-disp .session-wrap.modal {
  margin: 0 auto;
  padding: 1em;
}
.session-disp .session-wrap.modal .session-body {
  padding: 2em 0;
}
@media only screen and (max-width: 768px) {
  .session-disp .session-wrap.modal .session-body {
    padding: 1em 0;
  }
}
.session-disp .session-body-header .icon-recommend {
  background-color: #efa118;
  color: #000000;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  font-size: 12px;
  width: 120px;
}
.session-disp .session-body-header p {
  font-size: 1rem;
  line-height: 160%;
}
@media print, screen and (min-width: 769px) {
  .session-disp .session-body-header p {
    font-size: 1.1428571429rem;
  }
}
.session-disp .session-footer {
  padding: 3em 0 0;
}
@media print, screen and (min-width: 769px) {
  .session-disp .session-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }
  .session-disp .session-footer a.uk-button {
    min-width: 180px;
    height: 48px;
    line-height: 48px;
  }
}

.session-header {
  position: relative;
  margin: 0 0 1em;
}
@media print, screen and (min-width: 769px) {
  .session-header {
    margin: 0 0 3em;
  }
}
.session-header .nhl-logo {
  margin-bottom: 3em;
  text-align: center;
}
.session-header .nhl-logo svg {
  max-height: 36px;
}
.session-header .ttl-area {
  margin-bottom: 1rem;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.session-header .ttl-area .ttl-num {
  margin-right: 12px;
  background: var(--smt-color-dark);
  color: #FFF;
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  min-width: 42px;
  height: 42px;
  line-height: 42px;
}
@media print, screen and (min-width: 769px) {
  .session-header .ttl-area .ttl-num {
    min-width: 64px;
    height: 64px;
    line-height: 64px;
  }
}
.session-header .ttl-area h1 {
  margin: 0;
  padding: 0;
  font-size: 2rem;
  font-weight: bold;
  line-height: 120%;
}
@media only screen and (max-width: 768px) {
  .session-header .ttl-area h1 {
    font-size: 1.2rem;
  }
}
.session-header .ttl-area h1 strong {
  margin-top: 6px;
  display: block;
  font-size: 14px;
  font-weight: bolder;
  color: #5A5A5A;
  line-height: 120%;
}

.copy-url-button {
  --message-bg-c: oklch(37.2% 0.044 257.287);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0 0.25em;
  appearance: none;
  margin: 0 0 2em auto;
  font-size: 0.8571428571rem;
  line-height: 156%;
  font-weight: 600;
  color: #263357;
  background-color: transparent;
}
.copy-url-button span {
  font-size: inherit;
  border-bottom: 1px solid currentColor;
  transition: border 0.25s ease;
}
.copy-url-button i {
  font-size: 1.1428571429rem;
}
.copy-url-button:hover span {
  border-bottom-color: transparent;
}
.copy-url-button.is-copied:before {
  content: attr(aria-label);
  position: absolute;
  right: 0;
  top: calc(-100% - 1em);
  min-width: 11em;
  padding: 0.25em 1em;
  white-space: nowrap;
  color: oklch(96.8% 0.007 247.896deg);
  background-color: var(--message-bg-c);
  border-radius: 0.25em;
  animation: copy-url 0.5s ease-in;
}
.copy-url-button.is-error {
  --message-bg-c: oklch(58.6% 0.253 17.585);
}

@keyframes copy-url {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.session-comment {
  margin: 2rem 0;
  display: grid;
  grid-template-columns: 20% 1fr;
  gap: 9px;
}
@media print, screen and (min-width: 769px) {
  .session-comment {
    grid-template-columns: 120px 1fr;
    gap: 18px;
  }
}
.session-comment .thum img {
  width: 100%;
  height: auto;
}
.session-comment .comment {
  padding: 1rem;
  border-radius: 8px;
  background: #fffaeb;
  position: relative;
}
@media print, screen and (min-width: 769px) {
  .session-comment .comment {
    padding: 2rem;
  }
}
.session-comment .comment:before {
  content: "";
  position: absolute;
  top: 20px;
  left: -35px;
  border: 18px solid transparent;
  border-right: 18px solid #fffaeb;
}
.session-comment .comment h3 {
  color: var(--comment-title, #0aa064);
  text-align: left;
  line-height: 160%;
  font-size: 12px;
}
.session-comment .comment h3 br {
  display: none;
}
@media print, screen and (min-width: 769px) {
  .session-comment .comment h3 {
    font-size: 18px;
  }
  .session-comment .comment h3 br {
    display: none;
  }
}
.session-comment .comment p {
  font-size: 0.9285714286rem;
}

.session-block {
  margin-top: 3em;
}
.session-block h2 {
  margin-bottom: 1em;
  padding: 8px;
  font-weight: bold;
  font-size: 0.9285714286rem;
  background: var(--smt-color-dark);
  color: #FFF;
  text-align: center;
}
@media print, screen and (min-width: 769px) {
  .session-block h2 {
    font-size: 1.1428571429rem;
  }
}
.session-block h3 {
  margin-block: 1.4285714286rem 0.5em;
  font-weight: bold;
  font-size: 1rem;
  color: var(--smt-color-dark);
}
.session-block h3 + p {
  margin-top: 0;
}
@media print, screen and (min-width: 769px) {
  .session-block h3 {
    font-size: 1.1428571429rem;
  }
}
.session-block p {
  font-size: 1rem;
  line-height: 160%;
}
@media print, screen and (min-width: 769px) {
  .session-block p {
    font-size: 1.1428571429rem;
  }
}
.session-block .uk-list-bullet {
  padding-left: 0;
}
.session-block .uk-list-bullet li {
  color: var(--smt-color-dark);
  font-size: 1.1428571429rem;
  font-weight: bold;
}
.session-block.tokuten p {
  font-weight: bold;
  font-size: 1.2rem;
  color: var(--smt-color-dark);
}

/* 講師紹介 */
.lecturer-wrap {
  margin-top: 2em;
  padding: 0 0.5em;
}
.lecturer-head {
  display: grid;
  grid-template-columns: min(20%, 6.8571428571rem) auto;
  gap: 0 1.1428571429rem;
  align-items: center;
}
.lecturer-head .pict {
  width: 100%;
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}
.lecturer-head .pict img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lecturer-head .prof h3 {
  margin: 0;
  color: #111111;
  font-size: 1rem;
  font-weight: bold;
}
.lecturer-info {
  margin-top: 1em;
}
.lecturer-info p {
  font-size: 0.8571428571rem;
  line-height: 160%;
}
@media print, screen and (min-width: 769px) {
  .lecturer-info p {
    font-size: 1rem;
  }
}

.session-category {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.session-category li {
  padding: 0.3em 1.2em;
  text-align: center;
  color: #333;
  background: rgb(252, 219, 122);
  border-radius: 48px;
  font-weight: bold;
  text-decoration: none;
  font-size: 13px;
  line-height: 13px;
  list-style: none;
}

.recommend-card {
  margin-bottom: 1.7142857143rem;
  padding: 1rem;
  border-radius: 8px;
  border: solid 1px #CCC;
}
.recommend-card a {
  text-decoration: none;
}
.recommend-card a .card-head {
  margin: 0 0 1em;
  font-size: 1rem;
}
.recommend-card a .card-head .num {
  display: inline-flex;
  padding: 0.35em 0.5em;
  color: #FFF;
  font-family: "Oswald", sans-serif;
  font-weight: normal;
  text-align: center;
  line-height: 1;
  background: var(--smt-color-dark);
}
@media print, screen and (min-width: 769px) {
  .recommend-card a .card-head .num {
    min-width: 40px;
  }
}
.recommend-card a .card-head .ses-time {
  margin: 0;
  color: #000;
}
.recommend-card a .card-head .ses-time strong.date {
  font-weight: bold;
  font-family: "Oswald", sans-serif;
  font-size: 16px;
}
.recommend-card a .card-body h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
}
.recommend-card a .card-body h2 strong {
  margin-top: 8px;
  display: block;
}
.recommend-card a .card-body h3 {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  color: #918f8f;
}
.recommend-card:hover {
  opacity: 0.6;
}

.smt-submit-btn {
  min-width: 160px;
  background-color: #e67e22;
  border: solid 1px #e67e22;
  color: #FFF;
}
.smt-submit-btn:hover {
  opacity: 0.75;
}
.smt-submit-btn.disabled {
  pointer-events: none;
  color: #333;
  background: #CCC;
  border-color: #CCC;
}
@media print, screen and (min-width: 959px) {
  .smt-submit-btn .smt-submit-btn {
    height: 54px;
    min-width: 240px;
  }
}

/*********************************************************************************
  FOOTER
--------------------------------------------------------------------------------*/
#FootMedia {
  padding: 1em 6px;
  text-align: center;
  background: #FFF;
}
#FootMedia strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 1.77em;
  margin: 0 auto 1.5em;
  white-space: nowrap;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.142857rem;
  font-weight: 700;
  text-align: center;
}
#FootMedia strong:before, #FootMedia strong:after {
  content: "";
  display: block;
  width: min(80%, 261px);
  height: 1px;
  background-color: #707070;
}
@media print, screen and (min-width: 769px) {
  #FootMedia strong {
    font-size: 1.571428rem;
  }
}
#FootMedia div.foot-special-banner {
  display: block;
}
@media print, screen and (min-width: 769px) {
  #FootMedia div.foot-special-banner {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
#FootMedia div.foot-special-banner div {
  margin: 0 0 1em;
  max-width: 100%;
}
@media print, screen and (min-width: 769px) {
  #FootMedia div.foot-special-banner div {
    margin: 0 5px;
    max-width: 33%;
  }
}
#FootMedia div.foot-special-banner div a:hover {
  opacity: 0.5;
}
#FootMedia .foot-media-partner {
  display: flex;
  justify-content: space-evenly;
}
#FootMedia .foot-media-partner div {
  width: 14%;
  text-align: center;
}

.event-session-footer {
  padding: 0 0 80px;
  text-align: center;
  clear: both;
  background-color: white;
}
.event-session-footer .copy {
  font-size: 1.1428571429rem;
  text-align: center;
}
.event-session-footer #FootLink {
  margin-bottom: 50px;
}
.event-session-footer #FootLink h3 {
  margin: 0;
  text-align: center;
  text-decoration: none;
  color: #000000;
  font-weight: bold;
  font-size: 1.1428571429rem;
}
.event-session-footer #FootLink .thum {
  margin-bottom: 10px;
}
.event-session-footer #FootLink .thum img {
  width: 100%;
  height: auto;
  max-width: 228px;
}
.event-session-footer p#FootPageTopBtn {
  position: relative;
  inset: unset;
  display: block;
  margin-bottom: 1.4285714286rem;
}
.event-session-footer p#FootPageTopBtn a.uk-button {
  min-width: 90px;
  padding: 0 1em;
  font-size: 16px;
  line-height: 38px;
  color: rgb(51, 51, 51);
  background-color: transparent;
}
.event-session-footer p#FootPageTopBtn a.uk-button i {
  font-size: inherit;
}

.session-detail-header {
  display: flex;
  flex-direction: column;
}
.session-detail-header .info-area {
  flex: auto;
}
.session-detail-header .status {
  margin-left: auto;
}
.session-detail-header:has(.user-action.conflicted) .status {
  color: #BE0000;
  background-color: #f4e6e7;
}
@media print, screen and (min-width: 769px) {
  .session-detail-header {
    flex-direction: row;
    align-items: center;
  }
  .session-detail-header .user-action {
    flex: none;
  }
}

.session-modal-header {
  position: sticky;
  z-index: 1;
  top: 0;
  margin: 0;
  padding-block: 1rem;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(5px);
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.05), 0 5px 16px 0 rgba(0, 0, 0, 0.16);
}
@media print, screen and (min-width: 769px) {
  .session-modal-header {
    padding-block: 0;
  }
}
.session-modal-header .info-area {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}
@media print, screen and (min-width: 769px) {
  .session-modal-header .info-area {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
.session-modal-header .info-area .special {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 24px;
  padding: 0 18px;
  color: #FFF;
  font-size: 13px;
  text-align: center;
  background-color: #d62136;
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%, 5px 50%);
}
.session-modal-header .info-area .date {
  margin: 0;
  font-size: 16px;
  font-family: "Oswald", sans-serif;
  font-weight: bold;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 0;
}
@media print, screen and (min-width: 769px) {
  .session-modal-header .info-area .date {
    gap: 12px;
    font-size: 24px;
  }
}
.session-modal-header .info-area .date .time {
  font-family: inherit;
  font-size: 0.75em;
}
.session-modal-header .info-area .status {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  padding: 0.5em 1em;
  min-width: 60px;
  color: #FFF;
  font-weight: bold;
  font-size: 12px !important;
  text-align: center;
  background-color: #BC080B;
}

.user-action {
  --color-apply: #15AD7C;
  --color-tick: white;
  --color-applied: #FFA830;
  --color-applied-bg: #fff2e0;
  --color-full: #BE0000;
  --color-full-bg: #f4e6e7;
  --border-radius: 1.1428571429rem;
  --pad: 1.1428571429rem;
  --fs-label: 1rem;
  --icon-tick: url('data:image/svg+xml,<svg viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.11429e-05 6.88985C1.11627e-05 6.43753 0.173152 5.98521 0.516229 5.64195C1.20559 4.95224 2.32139 4.95224 3.01075 5.64195L7.49961 10.1331L16.926 0.517301C17.6153 -0.172409 18.7311 -0.172409 19.4205 0.517301C20.1098 1.20701 20.1098 2.32338 19.4205 3.01309L7.49961 15.1247L0.516229 8.13774C0.173152 7.79449 1.11232e-05 7.34217 1.11429e-05 6.88985Z" fill="black"/></svg>');
  --icon-cross: url('data:image/svg+xml,<svg viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.756 10.752L0 9.996L4.592 5.376L0 0.756L0.756 0L5.348 4.62L9.912 0L10.668 0.756L6.076 5.376L10.668 9.996L9.912 10.752L5.348 6.16L0.756 10.752Z" fill="black"/></svg>');
  --icon-full: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.1171 0C14.5996 2.36587e-05 15.0821 0.184864 15.4482 0.550781C16.1838 1.28609 16.1839 2.47664 15.4482 3.21191L10.6611 7.99414L10.667 8L10.6621 8.00391L15.4482 12.7871C16.1839 13.5224 16.1838 14.7129 15.4482 15.4482C14.7125 16.1835 13.5218 16.1835 12.7861 15.4482L7.99996 10.665L3.21383 15.4492C2.84772 15.815 2.36516 16 1.88277 16C1.40039 15.9999 0.917778 15.8151 0.551716 15.4492C-0.183878 14.7139 -0.183932 13.5234 0.551716 12.7881L5.33785 8.00391L5.33297 7.99902L5.33687 7.99414L0.551716 3.21191C-0.183548 2.47666 -0.183628 1.28696 0.551716 0.551758C1.28738 -0.183531 2.47815 -0.183506 3.21383 0.551758L7.99898 5.33398L12.7861 0.550781C13.1522 0.184852 13.6347 -4.21779e-08 14.1171 0Z" fill="black"/></svg>');
  --icon-stop: url('data:image/svg+xml,<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="1.06066" y1="1.06043" x2="28.0607" y2="28.0604" stroke="black" stroke-width="3"/></svg>');
  --icon-bar: url('data:image/svg+xml,<svg viewBox="0 0 22 4" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="22" height="4" rx="2" fill="black"/></svg>');
}

.user-action-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: bold;
  color: currentColor;
}
.user-action-label span {
  font-size: inherit;
}

.user-action-icon {
  --icon-w: 2.5em;
  --icon-h: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-w);
  height: var(--icon-h);
  border-radius: 50%;
  border: 3px solid currentColor;
}
.user-action-icon::before {
  content: "";
  display: block;
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: currentColor;
}
.applied .user-action-icon::before {
  width: 1.25em;
  height: 1em;
  mask-image: var(--icon-tick);
}
.full .user-action-icon::before {
  width: 1em;
  height: 1em;
  mask-image: var(--icon-full);
}
.conflicted .user-action-icon::before {
  width: 1.875em;
  height: 1.875em;
  mask-image: var(--icon-stop);
}
.disabled .user-action-icon::before {
  width: 1.375em;
  height: 0.25em;
  mask-image: var(--icon-bar);
}

.user-action {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 15px var(--pad) 14px;
  color: var(--user-action-status, var(--color-apply));
  font-size: var(--fs-label);
  border-radius: var(--border-radius);
}
@media print, screen and (min-width: 769px) {
  .user-action {
    --fs-label: 1.1428571429rem;
    width: 160px;
  }
}
.user-action:has(input:disabled) {
  --user-action-status: #cccccc;
}
.user-action.applied {
  --user-action-status: var(--color-applied);
  --user-action-status-bg: var(--color-applied-bg);
}
.user-action.full, .user-action.disabled, .user-action.conflicted {
  --user-action-status: var(--color-full);
  --user-action-status-bg: var(--color-full-bg);
}
.user-action label {
  cursor: pointer;
}
.user-action input[type=checkbox] {
  background-color: white;
  border: solid 2px currentColor;
  border-radius: 4px;
  appearance: none;
}
.user-action input[type=checkbox]:checked {
  position: relative;
  background-color: currentColor;
}
.user-action input[type=checkbox]:checked:after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-tick);
  mask-image: var(--icon-tick);
  mask-repeat: no-repeat;
  mask-position: 0.59375em 0.8em;
  mask-size: 1.1975em 0.843125em;
}
.user-action input[type=checkbox]:disabled {
  --user-action-status: #cccccc;
}

.uk-lightbox-toolbar {
  background: transparent !important;
}

html {
  background: transparent;
}

.session-disp {
  background-color: #ffffff;
}
.session-disp * {
  box-sizing: border-box;
}