:root {
  --font-NotoSans: "Noto Sans", sans-serif;
  --font-NotoSansJP: "Noto Sans JP", sans-serif;
  --font-StyleScript: "Style Script", cursive;
  --font-ShareTechMono: "Share Tech Mono", monospace;
  --color-main: #000;
  --color-point: #FF8CE0;
  --color-white: #fff;
}
*, *::before, *::after {
  box-sizing: border-box;
}
body, h1, h2, h3, h4, p, a, figure, blockquote, ul, li, dl, dd {
  margin: 0;
  padding: 0;
  color: var(--color-main);
  font-family: var(--font-NotoSans);
  font-style: normal;
  text-decoration: none;
  line-height: 1;
  list-style: none;
}
ul[role=list], ol[role=list] {
  list-style: none;
}
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
img, picture {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
input, button, textarea, select {
  font: inherit;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  position: relative;
  min-height: 100vh;
  background: rgb(248, 245, 239);
  overflow-anchor: none;
}

/* header */
.header{
  width: 68%;
  margin: 0 auto;
  padding-top: 4vh;
}
.header .main-title{
  display: flex;
  align-items: center;
  font-size: clamp(20px, 1.40625vw, 40px);
  letter-spacing: 0.06em;
}
.header .main-title span{
  margin-top: 0.2%;
}
.header .main-title .arrow{
  margin-left: 1em;
  font-size: clamp(16px, 1.25vw, 32px);
}
.header .main-title .occupation{
  margin-left: 0.5em;
  font-family: var(--font-StyleScript);
  font-size: clamp(16px, 1.25vw, 32px);
  font-weight: 100;
  letter-spacing: 0.04em;
}
/* wrapper */
.wrapper{
  width: 65%;
  margin-inline: auto;
  padding-bottom: 3%;
}
/* main */
.main{
  margin-top: 8vh;
}
.main .section-box{
  margin-top: 6vh;
} 
.main .section-title{
  display: flex;
  align-items: center;
  font-family: var(--font-ShareTechMono);
  font-size: clamp(12px, 0.9375vw, 24px);
  font-weight: 100;
}
.main .section-title .text{
  display: block;
  width: fit-content;
  margin-right: 1em;
  margin-bottom: 0.4em;
  padding: 0.1% 0.5% 0;
  font-family: var(--font-NotoSans);
  font-size: clamp(16px, 1.25vw, 32px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: capitalize;
}
.main .section-title .point{
  color: var(--color-point);
  margin: 0 0.5em;
}
/* section-box */
.section-box .list{
  margin-top: 1%;
  margin-left: 3%;
}
.section-box .list .detail{
  display: flex;
  align-items: center;
  height: 2em;
  margin-top: 0.3%;
  font-size: clamp(10px, 0.78125vw, 20px);
  overflow: hidden;
}
.section-box .list .detail::before{
  content: "";
  display: block;
  width: 0.7em;
  height: 0.7em;
  background: var(--color-main);
  border-radius: 0.2em;
}
.section-box .list .detail .link{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0.7em;
  font-family: var(--font-NotoSansJp);
  font-size: clamp(10px, 0.78125vw, 20px);
  letter-spacing: 0.04em;
  translate: 0 0;
  transition: 0.1s ease;
}
.section-box .list .detail .link:hover{
  translate: 0 -0.9em;
}
.section-box .list .detail .text{
  display: flex;
  align-items: center;
}
.section-box .list .detail .text .notes{
  font-size: clamp(8px, 0.625vw, 16px);
  margin-left: 1em;
}
.section-box .list .detail .soft{
  font-size: clamp(8px, 0.625vw, 16px);
  margin-left: 1em;
}
.section-box .list .detail .link .url{
  position: relative;
  display: none;
  margin-top: 1em;
  padding-right: 3em;
}
.section-box .list .detail .link:hover .url{
  display: block;
}
.section-box .list .detail .link .url .color{
  position: relative;
  margin-left: 1em;
  color: var(--color-point);
  font-family: var(--font-ShareTechMono);
  font-size: clamp(10px, 0.78125vw, 20px);
  letter-spacing: 0em;
  text-transform: capitalize;
}
/* contact */
.contact{
  position: relative;
  width: fit-content;
  margin-top: 6%;
  margin-left: 3%;
}
.contact .link{
  color: var(--color-point);
  font-family: var(--font-ShareTechMono);
  font-size: clamp(14px, 1.09375vw, 28px);
}
.contact .link::after{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-point);
  position: absolute;
  bottom: 0;
  left: 0;
}
.contact .link:hover{
  opacity: 0.6;
}
/* footer */
.footer{
  position: absolute;
  bottom: 2%;
  width: 100%;
}
.footer .copyright{
  text-align: center;
  font-size: clamp(8px, 0.625vw, 16px);
  letter-spacing: 0.04em;
}

@media (max-width: 768px),
only screen and (min-device-width: 769px) and (max-device-width: 1024px) and (orientation: portrait) {
  .header{
    width: 92%;
    padding-top: 6%;
  }
  .header .main-title{
    font-size: calc(20 / 375 * 100vw);
  }
  .header .main-title .arrow{
    font-size: calc(16 / 375 * 100vw);
  }
  .header .main-title .occupation{
    font-size: calc(16 / 375 * 100vw);
  }
  .wrapper{
    width: 94%;
    margin-left: 6%;
    padding-bottom: 5%;
  }
  /* main */
  .main{
    margin-top: 0;
  }
  .main .section-box{
    margin-top: 12%;
  }
  .main .section-title{
    flex-direction: column;
    align-items: flex-start;
    font-size: calc(13 / 375 * 100vw);
  }
  .main .section-title .text{
    font-size: calc(17 / 375 * 100vw);
  }
  .main .section-title .type{
    margin: 1% auto 0 0.5em;
  }
  /* section-box */
  .section-box .list{
    margin-top: 4%;
  }
  .section-box .list .detail{
    align-items: flex-start;
    height: auto;
    margin-top: 3%;
    font-size: calc(11 / 375 * 100vw);
  }
  .section-box .list .detail::before{
    margin-top: 0.2em;
  }
  .section-box .list .detail .text .notes{
    font-size: calc(8 / 375 * 100vw);
  }
  .section-box .list .detail .link{
    padding-left: 0.5em;
    font-size: calc(11 / 375 * 100vw);
  }
  .section-box .list .detail .link:hover{
      translate: 0 0;
  }
  .section-box .list .detail .link .url{
    display: block;
    margin-top: 1%;
  }
  .section-box .list .detail .link .bottom-space{
    padding-bottom: 1px;
  }
  .coder .list .detail .link .url .url-text{
    display: none;
  }
  .coder .list .detail .link .url .color{
    display: block;
    margin-top: 3%;
    margin-left: 0.5em;
  }
  .section-box .list .detail .soft{
    font-size: calc(9 / 375 * 100vw);
  }
  .section-box .list .detail .link .url .color{
    font-size: calc(11 / 375 * 100vw);
  }
  .contact{
    margin-top: 10%;
  }
  .contact .link{
    font-size: calc(15 / 375 * 100vw);
  }
  .footer{
    position: relative;
    margin-top: 3%;
    margin-bottom: 3%;
  }
  .footer .copyright{
    font-size: calc(9 / 375 * 100vw);
  }
}