@font-face {
  font-family: colfax;
  src: url("font/ColfaxWebLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: colfax;
  src: url("font/ColfaxWebRegular.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

html,
body,
div,
span,
h1,
ul,
li,
a {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: colfax, sans-serif;
  -webkit-text-size-adjust: none;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #666;
  background: #fff;
  font: 13px/1.231 colfax, sans-serif;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
}

body::before {
  z-index: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.022) 1px, transparent 1px),
    radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.075) 0 0.45px, transparent 0.7px);
  background-size: 10px 10px, 10px 10px, 5px 5px;
  opacity: 0.2;
  mix-blend-mode: multiply;
}

body::after {
  z-index: 0;
  background:
    repeating-linear-gradient(
      96deg,
      rgba(48, 48, 48, 0.018) 0,
      rgba(48, 48, 48, 0.018) 1px,
      transparent 1px,
      transparent 16px
    );
  opacity: 0.05;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.en {
  font-family: colfax, sans-serif;
  font-weight: 400;
}

.ja {
  font-family: colfax, sans-serif;
  font-weight: 400;
}

.en.textBlack,
.en .textBlack,
.en.textBlack a,
.en .textBlack a {
  color: #7d7d7d;
}

.mac .en.textBlack,
.mac .en .textBlack,
.mac .en.textBlack a,
.mac .en .textBlack a {
  color: #666;
}

.ja.textBlack,
.ja .textBlack,
.ja.textBlack a,
.ja .textBlack a {
  color: #858585;
}

.mac .ja.textBlack,
.mac .ja .textBlack,
.mac .ja.textBlack a,
.mac .ja .textBlack a {
  color: #7f7f7f;
}

.en.text105 {
  font-size: 80.769230769%;
  letter-spacing: 0.01em;
}

.ja.text105 {
  font-size: 76.923076923%;
  letter-spacing: 0.01em;
}

.en.text12 {
  font-size: 111.53846%;
  letter-spacing: 0.01em;
}

.ja.text12 {
  font-size: 92.30769%;
  letter-spacing: 0.01em;
}

#container {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.site-name {
  position: fixed;
  top: 60px;
  left: 80px;
  z-index: 1000;
  display: block;
  color: #000;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.32em;
  white-space: nowrap;
  -webkit-text-stroke: 0.22px #000;
  text-shadow: 0.24px 0 0 #000;
}

#listContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#list {
  position: fixed;
  bottom: 27px;
  left: 80px;
}

#list .group {
  position: absolute;
  width: 370px;
}

#list.col3 .group {
  width: 292px;
}

#list .group.photography,
#list .group.stories,
#list .group.about {
  left: 0;
}

#list .group.vibe,
#list .group.data {
  left: 430px;
}

#list.col3 .group.stories,
#list.col3 .group.vibe {
  left: 352px;
}

#list.col3 .group.data,
#list.col3 .group.about {
  left: 704px;
}

#list .group .title {
  position: absolute;
  top: 5px;
  right: -1px;
  color: #7d7d7d;
  font-weight: 400;
}

.mac #list .group .title {
  color: #666;
}

#list .group ul {
  padding-bottom: 1.7241379em;
  margin-left: -1px;
  line-height: 173%;
}

#list .group ul.en li {
  position: relative;
}

#list .group ul.en li.theme-break {
  margin-top: 13px;
}

#list .group ul.en li a {
  position: relative;
  color: #7d7d7d;
}

.mac #list .group ul.en li a {
  color: #666;
}

#list .group ul.ja li a {
  color: #999;
}

.mac #list .group ul.ja li a {
  color: #939393;
}

#list .group ul li a hr {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  width: 100%;
  height: 0;
  padding: 0;
  margin: 0;
  margin-top: -1px;
  border: 0;
  border-top: 1px solid #999;
}

#list .group ul li a:hover hr,
#list .group ul li a.over hr {
  display: block;
}

.w {
  display: inline;
}

.w.hiding {
  visibility: hidden;
}

@media (max-width: 720px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow: auto;
  }

  .site-name {
    top: 50px;
    left: 60px;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0.28em;
    max-width: calc(100vw - 120px);
  }

  #listContainer {
    position: static;
    height: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  #list {
    position: absolute;
    top: 298px;
    bottom: auto;
    left: 60px;
    width: calc(100vw - 120px);
  }

  #list,
  #list.col3 {
    display: block;
  }

  #list .group,
  #list.col3 .group {
    position: relative;
    left: 0;
    width: 100%;
  }

  #list .group .title {
    top: 11px;
    right: -3px;
    color: #262626;
  }

  #list .group ul {
    margin-left: -3px;
  }

  .en.text105,
  .ja.text105 {
    font-size: 161.53846%;
  }

  .en.text12 {
    font-size: 223.076923%;
  }

  .ja.text12 {
    font-size: 192.3076923%;
  }
}