@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');


* {
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin: 0;

  /* font-family: "Noto Sans JP", sans-serif; */

  font-feature-settings: "palt";
  
  --bk: #222;
  --wh: #fffff8;

  --gr: #888;
  line-height: 1.5rem;

  /* --tx: var(--bk);
  --bg: var(--wh);
  color-scheme: light; */
}

html[lang="ja"] * {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  /* font-weight: 400; */
  font-style: normal;
}

html[lang="en"] * {
  font-family: "Inter Tight", sans-serif;
  font-optical-sizing: auto;
  /* font-weight: 400; */
  font-style: normal;
}

@media (prefers-color-scheme: light) {
  * {
    --tx: var(--bk);
    --bg: var(--wh);
    color-scheme: light;
  }
  html:has(.ld[open]) * {
    --tx: var(--wh);
    --bg: var(--bk);
    color-scheme: dark;
  }
}

@media (prefers-color-scheme: dark) {
  * {
    --tx: var(--wh);
    --bg: var(--bk);
    color-scheme: dark;
  }
  html:has(.ld[open]) * {
    --tx: var(--bk);
    --bg: var(--wh);
    color-scheme: light;
  }
}

body {
  background-color: var(--bg);
  transition: .3s;
}

* {
  color: var(--tx);
}

body {
  position: relative;
  margin: 0;
  width: 100%;
  text-align: center;
}

.header {
  height: calc(100vh - 10.5rem);
  min-height: 16rem;
  display: flex;
  align-items: center;
  .tateD {
    display: block;
    max-width: 12rem;
    max-height: 80%;
    /* max-height: calc(100vh - 11.5rem); */
    margin: auto;
    transition: .3s;
  }
}

main {
  margin: 1rem 1rem 1rem 1rem;
  height: auto;
  & h2 {
    font-weight: 600;
    font-size: 2rem;
    margin-bottom: 1rem;
    line-height: 3rem;
  }
}

.space {
  height: 2rem;
}

.c {
  text-align: right;
}

.ld {
  position: absolute;
  bottom: 0;
  left: 1rem;
}

.sns {
  position: relative;
  
  border: 1px solid light-dark(var(--bk), #333);
  box-sizing: border-box;
  
  display: flex;
  justify-content: center;
  width: 100%;
  height: 3rem;
  max-width: 24rem;
  background-color: light-dark(var(--wh), #333);
  margin: 0 auto 0.5rem auto;
  transition: .3s;
  text-decoration: none;
  z-index: 0;
  box-shadow: 0rem 0.125rem 0.125rem -0.0625rem light-dark(var(--bk), var(--bk));
  line-height: calc(3rem - 2px);
  font-size: 0;
  .pl {
    width: 2rem;
    height: 2rem;
    
    display: block;
    
    padding: calc(0.5rem - 1px) 0.5rem;
    z-index: 2;
    &:before {
      content: "";
      display: block;
      transform-origin: top left;
      transition: .3s;
      background-color: light-dark(inherit, (--tx)) !important;
    }
    
  }

  span {
    /* background-color: #ff0033; */
    line-height: calc(3rem - 2px);
    font-size: 1rem;
    padding: 0;
    color: var(--tx);
    transition: .3s;
    display: inline-block;
  }

  span:nth-of-type(1) {
    width: 6rem;
    /* text-align: left; */
  }

  span:nth-of-type(2) {
    width: 8rem;
    text-align: left;
  }

  &:hover {
    opacity: 1;
    background-color: #bbb;
    color: var(--wh);
    box-shadow: 0 0 0 #000;
    .pl:before {
      background-color: var(--wh) !important;
    }
    span {
      color: var(--wh);
    }
    
  }
}

.github {
  &:before {
    width: 1.5rem;
    height: 1.5rem;
    background-color: light-dark(#0a0c10, var(--wh));
    clip-path: path("M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.127-1.554-.385-.207-.936-.715-.014-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.448-.275-5.005-1.224-5.005-5.432 0-1.196.426-2.186 1.128-2.956-.111-.275-.496-1.402.11-2.915 0 0 .921-.288 3.024 1.128a10.193 10.193 0 0 1 2.75-.371c.936 0 1.871.123 2.75.371 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.221 2.64.111 2.915.701.77 1.127 1.747 1.127 2.956 0 4.222-2.571 5.157-5.019 5.432.399.344.743 1.004.743 2.035 0 1.471-.014 2.654-.014 3.025 0 .289.206.632.756.522C19.851 20.979 23 16.854 23 12c0-6.077-4.922-11-11-11Z");
    transform: scale(calc(2rem / 1.5rem));
    
  }
}

.zenn {
  &:before {
    width: 88.3px;
    height: 88.3px;
    background-color: #3EA8FF;
    clip-path: path("M2.4 83.3h17c.9 0 1.7-.5 2.2-1.2L68.4 5.2C69 4.2 68.3 3 67.1 3H51c-.8 0-1.5.4-1.9 1.1L1.6 81.9C1.3 82.5 1.7 83.3 2.4 83.3zM61 82.1l22.1-35.5c.7-1.1-.1-2.5-1.4-2.5H65.7c-.6 0-1.2.3-1.5.8L41.5 81.2c-.6.9.1 2.1 1.2 2.1h16.3C59.8 83.3 60.6 82.9 61 82.1z");
    transform: scale(calc(2rem / 88.3px));
  }
}

.twitter {
  &:before {
    width: 24px;
    height: 24px;
    background-color: #1d9bf0;
    clip-path: path("M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z");
    transform: scale(calc(2rem / 24px));
  }
}

.bsky {
  /* padding: calc(0.5rem - 1px) inherit; */
  &:before {
    width: 64px;
    height: 57px;
    background-color: #1d9bf0;
    clip-path: content-box path("M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z");
    transform: scale(calc(2rem / 64px));
    padding: 3.5px 0;
  }
}

.tube {
  &:before {
    width: 160px;
    height: 110px;
    background-color: #ff0033;
    clip-path: content-box path("M154.3,17.5c-1.8-6.7-7.1-12-13.8-13.8c-12.1-3.3-60.8-3.3-60.8-3.3S31,0.5,18.9,3.8 c-6.7,1.8-12,7.1-13.8,13.8C1.9,29.7,1.9,55,1.9,55s0,25.3,3.3,37.5c1.8,6.7,7.1,12,13.8,13.8c12.1,3.3,60.8,3.3,60.8,3.3 s48.7,0,60.8-3.3c6.7-1.8,12-7.1,13.8-13.8c3.3-12.1,3.3-37.5,3.3-37.5S157.6,29.7,154.3,17.5z M64.2,78.4  64.2,31.6 104.6,55 64.2,78.4Z");
    transform: scale(calc(2rem / 160px));
    padding: 25px 0;
  }
}

.x {
    &:before {
    width: 1200px;
    height: 1277px;
    background-color: #000;
    clip-path: content-box path("M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z");
    transform: scale(calc(2rem / 1277px));
    padding: 0 38.5px;
  }
}