@charset "UTF-8";
@font-face {
  font-family: "Sentinel Test";
  src: url("../fonts/Sentinel-Book.otf") format("opentype");
  font-display: swap;
  font-weight: 400; }
@font-face {
  font-family: "Sentinel Test";
  src: url("../fonts/Sentinel-Light.otf") format("opentype");
  font-display: swap;
  font-weight: 300; }
@font-face {
  font-family: "Sentinel Test";
  src: url("../fonts/Sentinel-LightItalic.otf") format("opentype");
  font-display: swap;
  font-weight: 300;
  font-style: italic; }
@font-face {
  font-family: "Sentinel Test";
  src: url("../fonts/Sentinel-Bold.otf") format("opentype");
  font-display: swap;
  font-weight: 600;
  font-style: normal; }
i {
  font-style: inherit; }

i.on {
  border-radius: 50%;
  background-color: white;
  color: transparent; }

i {
  position: relative; }

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-size: 24px;
  scroll-behavior: smooth; }

@-moz-document url-prefix() {
  body {
    font-weight: lighter !important; } }
body {
  background: black;
  color: white;
  font-family: "Sentinel Test", "Sentinel A", "Sentinel B";
  margin: 20px;
  font-weight: 300; }

ul {
  list-style-type: none;
  padding: 0px; }

#intro {
  min-height: calc(100vh - 20px); }

#intro a {
  text-decoration: none;
  color: #757575;
  display: inline-block;
  margin-right: 15px; }
  #intro a i.on {
    background: #757575; }

#fixed {
  margin-bottom: 15px;
  position: sticky;
  top: 20px;
  left: 20px;
  z-index: 2; }
  #fixed button {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.2rem;
    line-height: 1;
    background: black;
    border-radius: 50%;
    transition: opacity 300ms;
    opacity: 1; }
  #fixed button.active, #fixed button:hover, #fixed button:focus {
    color: white; }
  #fixed button:focus {
    outline: none; }
  #fixed button:active {
    transform: scale(0.95); }
  #fixed i.on {
    background: transparent;
    color: inherit;
    border-radius: inherit; }
  #fixed svg {
    width: 26px;
    position: relative;
    top: 4px;
    transform: rotate(0deg); }
    #fixed svg path {
      fill: #737373; }
  #fixed svg:hover path {
    fill: white; }
  #fixed svg.rotated {
    transform: rotate(180deg); }

button {
  background: transparent;
  padding: 0px;
  color: white;
  border: 0px;
  font-family: "Sentinel Test", "Sentinel A", "Sentinel B";
  font-size: 1rem;
  cursor: pointer;
  color: #757575; }
  button i.on {
    background: #757575; }

h1, h2 {
  font-size: 5.6vh;
  margin: 0px;
  font-weight: 300;
  line-height: 1;
  cursor: default;
  display: inline-block; }

@media (max-aspect-ratio: 1320 / 1000) {
  h1, h2 {
    font-size: 4.26vw; }

  h1, h2 {
    font-size: calc(4.68vw - 5px); } }
h3, h4 {
  font-size: 1rem;
  font-weight: normal;
  margin: 0px; }

h3, h4 {
  color: #757575; }
  h3 i.on, h4 i.on {
    background: #757575; }

h2 {
  margin: 80px 0px 30px; }

h2.h2_2021 {
  margin: 0;
  font-size: inherit; }

span.name {
  /* color:grey; */ }

a.name {
  position: fixed;
  color: white;
  /* background:black; */
  text-decoration: none; }

#info {
  padding-bottom: 100px; }
  #info .d3container {
    display: inline-block; }
  #info button {
    width: 100%;
    text-align: left; }
  #info button:hover {
    color: white; }
    #info button:hover i.on {
      background: white; }
  #info button:focus {
    outline: none; }
  #info button:after {
    content: ' +';
    display: inline; }
  #info button.view-more:after {
    content: " –"; }

#work li > div {
  display: flex; }
#work li > div div {
  flex: 1;
  margin: 20px 7px; }
#work li > div div:first-child {
  margin-left: 0px; }
#work li > div div:last-child {
  margin-right: 0px; }
#work li > div div.title {
  flex: 2; }
#work img {
  width: 100%;
  border: 0.5px solid #333333;
  background: #111111;
  color: transparent; }
#work a {
  text-decoration: none;
  color: white; }
#work .recognition a:hover {
  color: #757575; }
  #work .recognition a:hover i.on {
    background: #757575; }
#work h2 span {
  display: none; }
#work a:hover h2 span, #work .image:hover + .title h2 span,
#work a:focus h2 span, #work .image:focus + .title h2 span {
  display: inline; }
#work .title a {
  display: inline-block;
  height: 100%;
  width: 100%; }
#work .recognition {
  position: relative; }
#work .recognition a:before {
  content: '★';
  position: absolute;
  left: -25px;
  margin-top: 4px;
  display: block;
  font-size: 0.6rem; }
#work .recognition a {
  display: inline-block; }
#work li .more {
  display: none;
  width: 100%;
  pointer-events: none; }
  #work li .more img {
    height: 200px;
    width: auto;
    margin-right: 20px;
    margin-bottom: 20px; }
#work li:hover .more, #work li:focus .more {
  display: block; }
#work video {
  width: 100%;
  border: 0.5px solid #333333; }
#work .disabled, #work .disabled * {
  cursor: default; }

#info .more {
  display: none; }
#info button.view-more + .less {
  display: none; }
#info button.view-more + .less + .more {
  display: block; }
#info .more a {
  color: white;
  text-decoration: none;
  display: inline-block; }
#info .more a:hover {
  color: #757575; }
  #info .more a:hover i.on {
    background: #757575; }
#info .more {
  padding-bottom: 40px; }
#info .less, #info .more {
  margin-top: 0px; }

#intro a span:not(.letter) {
  display: none;
  pointer-events: none; }

#intro a:hover span:not(.letter), #intro a:focus span:not(.letter) {
  display: block;
  position: absolute;
  left: 15px;
  color: white; }

#footer {
  padding-top: 100px;
  color: #757575; }
  #footer a {
    text-decoration: none;
    margin-left: 10px;
    display: inline-block;
    color: #757575; }
  #footer a:hover {
    color: white; }

.table {
  font-size: 15px;
  width: 100%;
  margin-bottom: 40px; }

.table h5 {
  font-size: 15px;
  font-weight: 300;
  margin-bottom: 10px; }

.table .td, .table .th {
  vertical-align: top;
  padding: 3px 50px 3px 0px; }

.table a {
  text-decoration: none;
  color: white; }

.table a:hover * {
  color: #737373; }

.tag {
  font-size: 10px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  border: 0.5px solid grey;
  padding: 2px 5px;
  border-radius: 12px; }

.tags {
  margin-bottom: 10px; }

.watch {
  position: relative; }

.watch::before {
  content: url('data:image/svg+xml;utf8,<svg width="13" height="13" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 24V10L27 16.4615L11 24Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 32.6667C25.8763 32.6667 32.6667 25.8763 32.6667 17.5C32.6667 9.12368 25.8763 2.33333 17.5 2.33333C9.12368 2.33333 2.33333 9.12368 2.33333 17.5C2.33333 25.8763 9.12368 32.6667 17.5 32.6667ZM17.5 35C27.165 35 35 27.165 35 17.5C35 7.83502 27.165 0 17.5 0C7.83502 0 0 7.83502 0 17.5C0 27.165 7.83502 35 17.5 35Z" fill="white"/></svg>');
  position: absolute;
  left: -20px;
  top: 5px; }

.watch:hover::before {
  content: url('data:image/svg+xml;utf8,<svg width="13" height="13" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 24V10L27 16.4615L11 24Z" fill="%23737373"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 32.6667C25.8763 32.6667 32.6667 25.8763 32.6667 17.5C32.6667 9.12368 25.8763 2.33333 17.5 2.33333C9.12368 2.33333 2.33333 9.12368 2.33333 17.5C2.33333 25.8763 9.12368 32.6667 17.5 32.6667ZM17.5 35C27.165 35 35 27.165 35 17.5C35 7.83502 27.165 0 17.5 0C7.83502 0 0 7.83502 0 17.5C0 27.165 7.83502 35 17.5 35Z" fill="%23737373"/></svg>'); }

.tbd {
  color: #757575; }

.italics {
  font-style: italic; }

.normal {
  font-style: normal; }

.press-items {
  display: flex;
  flex-wrap: wrap; }

.press a {
  width: 20%; }

.press-item {
  width: 230px;
  margin-right: 20px;
  margin-bottom: 40px; }

.press .label:not(.visible) {
  visibility: hidden; }

.press-image {
  border: 1px solid #303030;
  width: 100%;
  height: 130px;
  object-fit: cover;
  object-position: center;
  margin-bottom: 8px; }

.press-item p {
  margin-bottom: 8px;
  margin-top: 0px; }

.press-logo {
  height: 13px;
  margin-bottom: 6px;
  filter: invert(100%); }

.press-project {
  color: #737373; }

@media screen and (min-width: 1300px) {
  .table {
    font-size: 1.153vw; }

  .press-item {
    width: 14.8vw;
    width: 15.8vw; }

  .press-image {
    height: 9.5vw; } }
.tr {
  display: flex; }

.th {
  color: #737373; }

.title-description {
  display: flex;
  flex: 5; }

.time-place {
  display: flex;
  flex: 2; }

.title-description > div:first-child {
  flex: 1; }

.title-description > div:nth-child(2) {
  flex: 2; }

.time-place > div {
  flex: 1; }

.title-description > div, .time-place > div {
  padding: 3px 50px 3px 0px; }

@media screen and (max-width: 700px) {
  html {
    font-size: 18px; }

  body {
    margin: 10px; }

  .dt {
    display: none; }

  h1, h2 {
    font-size: 38.4px; }

  #intro a:hover span:not(.letter), #intro a:focus span:not(.letter) {
    position: static;
    display: inline-block;
    margin-left: 10px; }

  #intro a {
    display: block; }

  #intro {
    padding-bottom: 100px; }

  #intro {
    min-height: calc(100vh - 120px); }

  #work li > div {
    display: block;
    padding-bottom: 20px; }

  .recognition {
    width: calc(100% - 30px);
    padding-left: 30px; }

  #work .recognition a:before {
    left: 0px; }

  #work li > div div {
    margin: 5px 0px; }

  #work li > div div:first-child {
    margin-top: 15px; } }
@media screen and (max-width: 500px) {
  h1, h2 {
    font-size: 24px; }

  #fixed {
    display: none; }

  #intro a:hover span, #intro a:focus span {
    display: none; } }
@media screen and (max-width: 1100px) {
  .table .tr {
    padding-bottom: 5px; }

  .time-place {
    display: block;
    flex: 1; }

  .time-place > * {
    padding-bottom: 0px; } }
@media screen and (max-width: 950px) {
  .title-description {
    display: block;
    flex: 2; }

  .title-description > * {
    padding-bottom: 0px; }

  .title-description > div, .time-place > div {
    padding-bottom: 0px;
    padding-top: 0px; }

  .tr {
    margin-bottom: 0.85em; }

  .watch {
    left: 20px; }

  .watch::before {
    top: 2px; }

  #info {
    overflow-x: hidden; } }
@media screen and (max-width: 700px) {
  .title-description {
    flex: 3; } }
@media screen and (max-width: 550px) {
  .tr {
    display: block; }

  .title-description > div:first-child {
    font-weight: bold; }

  .time-place > div {
    display: inline-block;
    padding-right: 0px; }

  .time-place > div:nth-child(2)::before {
    content: "— "; }

  .press-item {
    width: calc(50% - 20px); }

  .press-image {
    height: 25vw; } }
@media screen and (max-width: 550px) {
  .tr {
    display: block;
    margin-bottom: 1em; }

  .table .td {
    width: 100%;
    padding: 0px; }

  .table .td:nth-child(3), .table .td:nth-child(4) {
    display: inline-block;
    width: auto; }

  .table .td:nth-child(4):before {
    content: "— "; } }