#overview {
  --color: rgba(200, 200, 200, 0.1);
  position: relative;
  font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  color: var(--color);
  font-weight: bold;
  padding: calc(var(--section-margin) * 2) var(--side-padding);
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.01);
}

#overview.deep1 {
  --color: rgba(17, 7, 7, 0.2);
}

#overview.deep2 {
  --color: rgba(200, 200, 200, 0.3);
}

#overview ::selection {
  background: #000;
  color: #fff;
}

#overview ::-moz-selection {
  background: #000;
  color: #fff;
}

#overview .inner {}

#overview .inner>*:not(:last-child) {
  margin: 0 auto 2em;
}

#overview h1 {}

#overview h1 svg {
  fill: var(--color);
  pointer-events: auto;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.05));
}

#overview .issue {
  font-size: min(4vw, 32px);
  font-weight: bold;
  margin: 8em auto !important;
}

#overview .issue p {}

#overview .issue p span {
  display: inline-block;
  font-size: 2em;
}

#overview .code {
  width: 90%;
  max-width: 500px;
  padding: 1em;
  box-shadow: 0 0 10px rgba(200, 200, 200, 0.1);
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
}

#overview .company {}

#overview .company .large {
  font-size: 2em;
}

#overview .line {}

#overview .box {
  padding: 1em;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
}

#overview .box h2 {
  margin: 0 auto 0.5em;
  white-space: nowrap;
}

#overview .box h2 span {
  display: inline-block;
  color: #fff;
  background: var(--color);
  padding: 0.25em 0.3em;
  margin: 0 0.2em 0 0;
}

#overview .box p {
  padding: 0 0 0 1.5em;
}

#overview .text {
  padding: 0 0 0 1.5em;
}

#overview .text p {}

#overview .last {
  margin: 10em auto 0;
}

#overview .last .company {
  margin: 0 auto 2em;
}

#switch {
  padding: var(--section-margin) var(--side-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  overflow: visible;
}

#switch .inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#switch .octahedron-container {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  overflow: visible;
}

#switch .octahedron-wrapper {
  list-style: none;
  margin: 200px auto;
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center center;
  /* JavaScriptでアニメーション制御 */
}

#switch .octahedron-face {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -86.6025px;
  opacity: 1;
  cursor: pointer;
  transition: opacity 0.3s ease;
  backface-visibility: visible;
  transform-style: preserve-3d;
  pointer-events: auto;
}

#switch .octahedron-face:hover {
  opacity: 0.9;
}

#switch .octahedron-face a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  position: relative;
  z-index: 2;
  backface-visibility: visible;
}

#switch .octahedron-face span {
  font-size: 30px;
  color: rgba(200, 200, 200, 0.8);
  line-height: 3.75em;
  text-align: center;
  text-shadow: 1px 0 5px rgba(200, 200, 200, 0.5), 0 1px 5px rgba(200, 200, 200, 0.5), -1px 0 5px rgba(200, 200, 200, 0.5), 0 -1px 5px rgba(200, 200, 200, 0.5);
  width: 100%;
  position: absolute;
  z-index: 2;
  transition: color 0.3s ease;
  backface-visibility: visible;
}

#switch .octahedron-face:hover span {
  color: rgba(200, 200, 200, 1);
}

#switch .octahedron-face::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  border-width: 0 50px 86.6025px 50px;
  transition: filter 0.3s ease;
  backface-visibility: visible;
}

#switch .octahedron-face:hover::after {
  filter: brightness(1.2) drop-shadow(0 0 10px rgba(200, 200, 200, 0.5));
}

/* 上部4面 - 中心を基準に配置 */
#switch .face-1 {
  transform-origin: top center;
  transform: rotateX(35deg);
}

#switch .face-1::after {
  border-color: transparent transparent rgba(200, 200, 200, 0.1) transparent;
}

#switch .face-2 {
  transform-origin: top center;
  transform: rotateY(90deg) rotateX(35deg);
}

#switch .face-2::after {
  border-color: transparent transparent rgba(200, 200, 200, 0.15) transparent;
}

#switch .face-3 {
  transform-origin: top center;
  transform: rotateY(180deg) rotateX(35deg);
}

#switch .face-3::after {
  border-color: transparent transparent rgba(200, 200, 200, 0.2) transparent;
}

#switch .face-4 {
  transform-origin: top center;
  transform: rotateY(-90deg) rotateX(35deg);
}

#switch .face-4::after {
  border-color: transparent transparent rgba(200, 200, 200, 0.25) transparent;
}

/* 下部4面 - 中心を基準に配置 */
#switch .face-5 {
  transform-origin: top center;
  transform: rotateZ(180deg) rotateX(-35deg) translate3d(0px, -117px, -82px);
}

#switch .face-5::after {
  border-color: transparent transparent rgba(200, 200, 200, 0.1) transparent;
}

#switch .face-5 span {
  transform: rotateY(180deg);
  backface-visibility: visible;
}

#switch .face-6 {
  transform-origin: top center;
  transform: rotateZ(180deg) rotateY(90deg) rotateX(-35deg) translate3d(0px, -117px, -82px);
}

#switch .face-6::after {
  border-color: transparent transparent rgba(200, 200, 200, 0.25) transparent;
}

#switch .face-6 span {
  transform: rotateY(180deg);
  backface-visibility: visible;
}

#switch .face-7 {
  transform-origin: top center;
  transform: rotateZ(180deg) rotateY(180deg) rotateX(-35deg) translate3d(0px, -117px, -82px);
}

#switch .face-7::after {
  border-color: transparent transparent rgba(200, 200, 200, 0.2) transparent;
}

#switch .face-7 span {
  transform: rotateY(180deg);
  backface-visibility: visible;
}

#switch .face-8 {
  transform-origin: top center;
  transform: rotateZ(180deg) rotateY(-90deg) rotateX(-35deg) translate3d(0px, -117px, -82px);
}

#switch .face-8::after {
  border-color: transparent transparent rgba(200, 200, 200, 0.15) transparent;
}

#switch .face-8 span {
  transform: rotateY(180deg);
  backface-visibility: visible;
}

/* ランダムリンク用の色クラス */
.random-link {
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.random-link:hover {
  text-shadow: 0 0 3px currentColor;
  /* transform: scale(1.2); */
}

.link-color-1 {
  color: rgba(255, 180, 180, 0.9);
}

/* パステル赤 */
.link-color-2 {
  color: rgba(255, 200, 160, 0.9);
}

/* パステルオレンジ */
.link-color-3 {
  color: rgba(255, 240, 180, 0.9);
}

/* パステル黄 */
.link-color-4 {
  color: rgba(180, 240, 200, 0.9);
}

/* パステル緑 */
.link-color-5 {
  color: rgba(180, 220, 255, 0.9);
}

/* パステル青 */
.link-color-6 {
  color: rgba(210, 190, 255, 0.9);
}

/* パステル紫 */
.link-color-7 {
  color: rgba(255, 190, 220, 0.9);
}

/* パステルピンク */
.link-color-8 {
  color: rgba(200, 200, 200, 0.9);
}

/* パステルグレー */

@media screen and (max-width: 768px) {
  #switch .octahedron-wrapper {
    width: 160px;
    margin: 150px auto;
  }

  #switch .octahedron-face {
    width: 80px;
    height: 80px;
  }

  #switch .octahedron-face::after {
    border-width: 0 40px 69.282px 40px;
  }

  #switch .octahedron-face span {
    font-size: 24px;
    line-height: 3.75em;
  }

  #switch .face-5,
  #switch .face-6,
  #switch .face-7,
  #switch .face-8 {
    transform: rotateZ(180deg) rotateX(-35deg) translate3d(0px, -94px, -66px);
  }

  #switch .face-2 {
    transform: rotateY(90deg) rotateX(35deg);
  }

  #switch .face-6 {
    transform: rotateZ(180deg) rotateY(90deg) rotateX(-35deg) translate3d(0px, -94px, -66px);
  }

  #switch .face-4 {
    transform: rotateY(-90deg) rotateX(35deg);
  }

  #switch .face-8 {
    transform: rotateZ(180deg) rotateY(-90deg) rotateX(-35deg) translate3d(0px, -94px, -66px);
  }

  #overview .box {
    padding: 1em 0em;
  }

  #overview .box h2 {
    font-size: 1.2em;
  }
}