@font-face {
  font-family: "Klee One";
  src: url("../fonts/klee-one-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  ascent-override: 94.5%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Klee One";
  src: url("../fonts/klee-one-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  ascent-override: 94.5%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Xanh Mono";
  src: url("../fonts/xanh-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("../fonts/zen-maru-gothic-107-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range:
    U+23, U+3c, U+2192, U+4e45, U+4efb, U+4f50, U+4f8b, U+4fc2, U+5024, U+5150,
    U+5272, U+5370, U+53bb, U+542b, U+56db, U+56e3, U+57ce, U+5bc4, U+5bcc,
    U+5f71, U+60aa, U+6238, U+6280, U+629c, U+6539, U+66ff, U+670d, U+677e-677f,
    U+6839, U+69cb, U+6b4c, U+6bb5, U+6e96, U+6f14, U+72ec, U+7389, U+7814,
    U+79cb, U+79d1, U+79fb, U+7a0e, U+7d0d, U+85e4, U+8d64, U+9632, U+96e2,
    U+9805, U+99ac, U+ff1e;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("../fonts/zen-maru-gothic-111-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range:
    U+2b, U+d7, U+300e-300f, U+4e07, U+4e8c, U+512a, U+5149, U+518d, U+5236,
    U+52b9, U+52d9, U+5468, U+578b, U+57fa, U+5b8c, U+5ba2, U+5c02, U+5de5,
    U+5f37, U+5f62, U+623b, U+63d0, U+652f, U+672a, U+6848, U+6d41, U+7136,
    U+7537, U+754c, U+76f4, U+79c1, U+7ba1, U+7d44, U+7d4c, U+7dcf, U+7dda,
    U+7de8, U+82b1, U+897f, U+8ca9, U+8cfc, U+904e, U+9664, U+982d, U+9858,
    U+98a8, U+9a13, U+ff13, U+ff5c;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("../fonts/zen-maru-gothic-113-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range:
    U+26, U+5f, U+2026, U+203b, U+4e09, U+4eac, U+4ed5, U+4fa1, U+5143, U+5199,
    U+5207, U+539f, U+53e3, U+53f7, U+5411, U+5473, U+5546, U+55b6, U+5929,
    U+597d, U+5bb9, U+5c11, U+5c4b, U+5ddd, U+5f97, U+5fc5, U+6295, U+6301,
    U+6307, U+671b, U+76f8, U+78ba, U+795e, U+7d30, U+7d39, U+7d9a, U+89e3,
    U+8a00, U+8a73, U+8a8d, U+8a9e, U+8aad, U+8abf, U+8cea, U+8eca, U+8ffd,
    U+904b, U+9650, U+ff11-ff12;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("../fonts/zen-maru-gothic-114-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range:
    U+3e, U+3005, U+4e0d, U+4e88, U+4ecb, U+4ee3, U+4ef6, U+4fdd, U+4fe1,
    U+500b, U+50cf, U+5186, U+5316, U+53d7, U+540c, U+544a, U+54e1, U+5728,
    U+58f2, U+5973, U+5b89, U+5c71, U+5e02, U+5e97, U+5f15, U+5fc3, U+5fdc,
    U+601d, U+611b, U+611f, U+671f, U+6728, U+6765, U+683c, U+6b21, U+6ce8,
    U+6d3b, U+6d77, U+7530, U+7740, U+7acb, U+7d50, U+826f, U+8f09, U+8fbc,
    U+9001, U+9053, U+91ce, U+9762, U+98df;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("../fonts/zen-maru-gothic-116-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range:
    U+a9, U+3010-3011, U+30e2, U+4e0b, U+4eca, U+4ed6, U+4ed8, U+4f53, U+4f5c,
    U+4f7f, U+53d6, U+540d, U+54c1, U+5730, U+5916, U+5b50, U+5c0f, U+5f8c,
    U+624b, U+6570, U+6587, U+6599, U+691c, U+696d, U+6cd5, U+7269, U+7279,
    U+7406, U+767a-767b, U+77e5, U+7d04, U+7d22, U+8005, U+80fd, U+81ea, U+8868,
    U+8981, U+89a7, U+901a, U+9023, U+90e8, U+91d1, U+9332, U+958b, U+96c6,
    U+9ad8, U+ff1a, U+ff1f;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("../fonts/zen-maru-gothic-117-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range:
    U+4e, U+a0, U+3000, U+300c-300d, U+4e00, U+4e0a, U+4e2d, U+4e8b, U+4eba,
    U+4f1a, U+5165, U+5168, U+5185, U+51fa, U+5206, U+5229, U+524d, U+52d5,
    U+5408, U+554f, U+5831, U+5834, U+5927, U+5b9a, U+5e74, U+5f0f, U+60c5,
    U+65b0, U+65b9, U+6642, U+6700, U+672c, U+682a, U+6b63, U+6c17, U+7121,
    U+751f, U+7528, U+753b, U+76ee, U+793e, U+884c, U+898b, U+8a18, U+9593,
    U+95a2, U+ff01, U+ff08-ff09;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("../fonts/zen-maru-gothic-118-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range:
    U+21-22, U+27-2a, U+2c-3b, U+3f, U+41-4d, U+4f-5d, U+61-7b, U+7d, U+ab,
    U+ae, U+b2-b3, U+b7, U+bb, U+c9, U+cd, U+d6, U+d8, U+dc, U+e0-e5, U+e7-ed,
    U+ef, U+f1-f4, U+f6, U+f8, U+fa, U+fc-fd, U+103, U+14d, U+1b0, U+300-301,
    U+1ebf, U+1ec7, U+2013-2014, U+201c-201d, U+2039-203a, U+203c, U+2048-2049,
    U+2113, U+2122, U+65e5, U+6708, U+70b9;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("../fonts/zen-maru-gothic-119-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range:
    U+20, U+2027, U+3001-3002, U+3041-307f, U+3081-308f, U+3091-3093,
    U+3099-309a, U+309d-309e, U+30a1-30e1, U+30e3-30ed, U+30ef-30f0,
    U+30f2-30f4, U+30fb-30fe, U+ff0c, U+ff0e;
}

/* ROOT */
:root {
  --cream: #f6f1e6;
  --cream-2: #f9f5ed;
  --card: #faf6ef;
  --line: #e8e0d1;
  --ink: #3a2f26;
  --ink-soft: #6a5d50;
  --brown: #6b4c34;
  --green: #455a3d;
  --dark: #333433;
  --head:
    "Klee One", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic",
    "Noto Sans CJK JP", sans-serif;
  --body: "Xanh Mono", "Zen Maru Gothic", "Courier New", monospace;
  --pad: 1.25rem;
}
/* RESET */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
  -webkit-text-size-adjust: 100%;
}
html,
body {
  max-width: 100%;
  overflow-x: clip;
}
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--head);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
ul,
ol {
  list-style: none;
}
button {
  font: inherit;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
img {
  display: block;
  max-width: 100%;
}
:focus-visible {
  outline: 0.15rem solid var(--brown);
  outline-offset: 0.15rem;
}

.ph {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.deco {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.ico {
  display: block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.mask {
  display: inline-block;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--m) center/contain no-repeat;
  mask: var(--m) center/contain no-repeat;
}
.i-arrow {
  --m: url("../assets/icons/ui/arrow-right.svg");
  width: 1.1rem;
  height: 0.9rem;
}
.i-left {
  --m: url("../assets/icons/ui/chevron-left.svg");
  width: 1.75rem;
  height: 1.75rem;
}
.i-right {
  --m: url("../assets/icons/ui/chevron-right.svg");
  width: 1.75rem;
  height: 1.75rem;
}
.i-smile {
  --m: url("../assets/icons/ui/smile.svg");
}

/* NAV */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 var(--pad);
  background: var(--cream);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
}
.brand-mark {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  flex: none;
}
.brand-name {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  -webkit-text-stroke: 0.02em currentColor;
  white-space: nowrap;
}
.nav > .pill {
  margin-left: auto;
}

/* BOTTOM BAR */
.nav-links {
  display: flex;
  justify-content: space-around;
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 30;
  padding: 0.4rem 0.3rem;
  background: rgba(250, 246, 239, 0.96);
  -webkit-backdrop-filter: blur(0.6rem);
  backdrop-filter: blur(0.6rem);
  border: 0.06rem solid var(--line);
  border-radius: 1.4rem;
  box-shadow: 0 0.5rem 1.4rem rgba(80, 60, 40, 0.14);
}
.nav-links a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 3.6rem;
  padding: 0.45rem 0.3rem;
  border-radius: 1rem;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  color: #6a5d50;
  transition:
    background 0.2s,
    color 0.2s;
}
.nav-links a.active {
  background: #ecdfcc;
  color: var(--ink);
}
.nav-ic {
  width: 1.45rem;
  height: 1.45rem;
}
.ni-home {
  --m: url("../assets/icons/ui/nav-home.svg");
}
.ni-services {
  --m: url("../assets/icons/ui/nav-services.svg");
}
.ni-skills {
  --m: url("../assets/icons/ui/nav-skills.svg");
}
.ni-portfolio {
  --m: url("../assets/icons/ui/nav-portfolio.svg");
}
.ni-about {
  --m: url("../assets/icons/ui/nav-about.svg");
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: 99rem;
  font-family: var(--head);
  font-size: 1rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition:
    filter 0.2s,
    transform 0.2s;
}
.pill:hover {
  filter: brightness(1.1);
}
.pill-brown {
  background: var(--brown);
  color: #fff;
}
.pill-outline {
  border: 0.07rem solid #8a7664;
  color: var(--ink);
}
.pill-sm {
  height: 2.4rem;
  padding: 0 1rem;
  font-size: 0.9rem;
}

/* SECTIONS */
.section {
  position: relative;
  background: var(--cream-2);
}
.wrap {
  position: relative;
  padding: 0 var(--pad);
}
.sec-head small {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: #4a3f35;
  font-weight: 700;
}
.sec-head h2 {
  -webkit-text-stroke: 0.03em currentColor;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-family: var(--head);
  margin-top: 0.2rem;
  line-height: 1.15;
}
.squig {
  display: block;
  width: 2.6rem;
  height: 0.3rem;
  margin-top: 0.6rem;
  border-bottom: 0.15rem solid #3a2f26;
  border-radius: 50%/0 0 70% 40%;
  transform: rotate(-1.5deg);
}
.note,
.deco {
  display: none;
}
.smile {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
}

/* FOOTER */
.foot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 2rem var(--pad) 5.5rem;
  text-align: center;
  overflow: hidden;
}
.foot-art {
  display: block;
  width: calc(100% + 2 * var(--pad));
  max-width: none;
  height: auto;
  margin: 0.5rem calc(-1 * var(--pad)) 0;
  pointer-events: none;
}
.brand-foot .brand-mark {
  width: 2.25rem;
  height: 2.25rem;
}
.brand-foot .brand-name {
  font-size: 1rem;
}
.foot-mid {
  font-family: var(--body);
  font-size: 0.85rem;
  color: #4a3f35;
}
.foot-mail {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-family: var(--body);
  font-size: 0.85rem;
  color: #4a3f35;
  word-break: break-all;
}
.foot-mail .ico {
  width: 1.15rem;
  height: 1rem;
}

/* DESKTOP */
@media (min-width: 761px) {
  /* NAV */
  .nav {
    position: relative;
    z-index: 5;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5rem 0 5.2rem;
    background: var(--cream);
  }
  .brand {
    display: flex;
    align-items: center;
  }
  .brand-mark {
    width: 4rem;
    height: 4rem;
    object-fit: contain;
  }
  .brand-name {
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    font-weight: 600;
    -webkit-text-stroke: 0.02em currentColor;
  }
  .nav-links {
    position: absolute;
    left: 24.6rem;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: #5a4e43;
  }
  .nav-links a {
    position: relative;
    padding: 0.6rem 0;
  }
  .nav-links a.active {
    color: var(--ink);
  }
  .nav-links a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.2rem;
    height: 0.1rem;
    background: var(--ink);
  }
  .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    border-radius: 99rem;
    font-family: var(--head);
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    transition:
      filter 0.2s,
      transform 0.2s;
  }
  .pill:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
  }
  .pill-brown {
    background: var(--brown);
    color: #fff;
  }
  .pill-outline {
    border: 0.1rem solid #8a7664;
    color: var(--ink);
  }
  .pill-sm {
    height: 2.3rem;
    padding: 0 1.5rem;
    font-size: 1rem;
  }
  .i-arrow {
    --m: url("../assets/icons/ui/arrow-right.svg");
    width: 1.2rem;
    height: 1rem;
  }
  .i-left {
    --m: url("../assets/icons/ui/chevron-left.svg");
    width: 2rem;
    height: 2rem;
  }
  .i-right {
    --m: url("../assets/icons/ui/chevron-right.svg");
    width: 2rem;
    height: 2rem;
  }
  .i-smile {
    --m: url("../assets/icons/ui/smile.svg");
  }

  /* SECTIONS */
  .section {
    position: relative;
    background: var(--cream-2);
  }
  .wrap {
    position: relative;
    width: 69.2rem;
    margin: 0 0 0 5.5rem;
  }
  .sec-head small {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: #4a3f35;
  }
  .sec-head h2 {
    -webkit-text-stroke: 0.03em currentColor;
    font-size: 2.05rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    font-family: var(--head);
    margin-top: 0.3rem;
    line-height: 1.1;
  }
  .squig {
    display: block;
    width: 3.2rem;
    height: 0.35rem;
    margin-top: 0.8rem;
    border-bottom: 0.2rem solid #3a2f26;
    border-radius: 50%/0 0 70% 40%;
    transform: rotate(-1.5deg);
  }
  .note {
    position: absolute;
    font-family: var(--head);
    font-size: 1.15rem;
    line-height: 1.5rem;
    color: #5f5448;
    transform: rotate(-10deg);
    white-space: nowrap;
  }
  .smile {
    position: absolute;
    right: -2.2rem;
    bottom: -1.2rem;
    width: 1.9rem;
    height: 1.9rem;
    transform: rotate(10deg);
  }

  /* FOOTER */
  .foot {
    position: relative;
    min-height: 10.4rem;
    overflow: hidden;
  }
  .foot-art {
    width: 100%;
    margin: 0;
  }
  .foot > *:not(.foot-art) {
    position: absolute;
    z-index: 2;
  }
  .brand-foot {
    left: 5.7rem;
    top: 1.9rem;
  }
  .brand-foot .brand-mark {
    width: 3.5rem;
    height: 3.5rem;
  }
  .brand-foot .brand-name {
    font-size: 1rem;
  }
  .foot-mid {
    left: 0;
    right: 0;
    top: 3.2rem;
    text-align: center;
    font-family: var(--body);
    font-size: 0.84rem;
    color: #4a3f35;
  }
  .foot-mail {
    right: 5.7rem;
    top: 3.1rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-family: var(--body);
    font-size: 0.86rem;
    color: #4a3f35;
  }
  .foot-mail .ico {
    width: 1.4rem;
    height: 1.2rem;
  }

  /* RESETS */
  body {
    line-height: normal;
  }
  html {
    font-size: clamp(10px, 1.2547vw, 19px);
    scroll-padding-top: 0;
  }
  :root {
    --pad: 0;
  }
  .nav {
    top: auto;
    gap: 0;
    border-bottom: 0;
  }
  .nav > .pill {
    margin-left: 0;
    display: inline-flex;
  }
  .nav-links {
    right: auto;
    bottom: auto;
    justify-content: flex-start;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    flex-direction: row;
    z-index: auto;
  }
  .nav-links a {
    display: block;
    color: inherit;
    flex-direction: row;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: inherit;
    line-height: normal;
    gap: 0;
  }
  .nav-links a.active {
    background: none;
  }
  .nav-ic {
    display: none;
  }
  .wrap {
    padding: 0;
  }
  .note {
    display: block;
  }
  .deco {
    display: block;
  }
  .smile {
    width: 1.9rem;
    height: 1.9rem;
  }
  .foot {
    display: block;
    padding: 0;
    gap: 0;
    text-align: left;
  }
}

.cta small,
.hero-jp {
  font-weight: 700;
}

/* REVEAL */
html.reveal-ready [data-reveal] {
  opacity: 0;
}
html.reveal-ready [data-reveal].is-revealed {
  animation: reveal 0.8s cubic-bezier(0.22, 0.7, 0.2, 1) var(--rd, 0ms) both;
}
@keyframes reveal {
  from {
    opacity: 0;
    filter: blur(0.75rem);
    translate: 0 1rem;
  }
  to {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
  }
}