html { font-size: 62.5%; }
body {
  font-family: 'Outfit', 'Noto Sans JP', sans-serif; color: #ccc; background: #1a1a1a;
  font-feature-settings: "palt"; letter-spacing: 0.1rem;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.container { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }

/* --------------------------------------------------------------------------

Hero

-------------------------------------------------------------------------- */
.home-hero { position: relative; height: 100vh; }
.home-hero__img { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); }
.home-hero__video { position: relative; width: 60vw; padding-top: 56.25%; opacity: 0; transition: opacity .8s ease; }
.home-hero__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero__loading { position: absolute; font-size: 1.4rem; font-weight: 300; color: #808080; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1; transition: opacity .4s ease; }
.home-hero__text { position: absolute; left: 8%; top: 50%; transform: translateY(-50%); }
.home-hero__heading { font-size: 6.0vw; font-weight: 300; line-height: 1; letter-spacing: 0.5rem; margin-bottom: 4rem; }
.home-hero__lead { font-size: 1.4vw; letter-spacing: 0.6rem; padding-bottom: 1.4rem; }
.home-hero__name { font-size: 1.4vw; letter-spacing: 0.6rem; padding-bottom: 1.4rem; }

.home-hero__video.is-visible { opacity: 1; }
.home-hero__loading.is-hidden { opacity: 0; pointer-events: none; }

.scroll-indicator { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; z-index: 2; }
.scroll-indicator__txt { font-size: 1.2rem; letter-spacing: .3em; color: #fff; opacity: .8; text-transform: uppercase; }
.scroll-indicator__line { position: relative; width: 1px; height: 56px; background: rgba(255,255,255,.35); overflow: hidden; }
.scroll-indicator__line::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; opacity: 0; animation: scrollLine 1.8s ease-in-out infinite; }

@keyframes scrollLine { 0% { top: -40%; opacity: 0; } 15% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

@media (max-width: 900px) {
  .home-hero__img { right: initial; top: 20%; transform: none; }
  .home-hero__video { width: 100vw; }
  .home-hero__text { top: initial; left: 16px; bottom: 15%; transform: none; }
  .home-hero__heading { font-size: 5.6rem; margin-bottom: 2rem; }
  .home-hero__lead { font-size: 1.5rem; letter-spacing: 0.3rem; }
  .home-hero__name { font-size: 1.5rem; letter-spacing: 0.3rem; }
  .scroll-indicator { bottom: 16px; gap: 8px; }
  .scroll-indicator__txt { font-size: 1.1rem; letter-spacing: .25em; }
  .scroll-indicator__line { height: 44px; }
}

/* --------------------------------------------------------------------------

Section

-------------------------------------------------------------------------- */
.section { }
.section-title { font-size: 4.0rem; font-weight: 700; }
.section-title span { font-weight: 300; color: #808080; }
.section-lead { font-size: 1.4rem; font-weight: 700; margin-top: 16px; }

@media (max-width: 900px) {
  .section-title { font-size: 2.4rem; }
}

/* --------------------------------------------------------------------------

Summary

-------------------------------------------------------------------------- */
.section--summary { padding: 120px 0; }
.summary-intro { font-size: 1.6rem; line-height: 1.8; margin-top: 56px; }
.summary-intro p + p { margin-top: 16px; }
.summary-flex { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; margin-top: 64px; }
.summary-flex .summary-item { flex: 0 1 calc((100% - 40px) / 2); min-width: 280px; }
.summary-item { display: flex; align-items: flex-start; gap: 24px; min-width: 0; }
.summary-item__icon { width: 60px; height: 60px; flex: 0 0 auto; }
.summary-item__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 auto; }
.summary-item__title{ font-size: 1.6rem; line-height: 1.5; font-weight: 700; }
.summary-item__desc { font-size: 1.5rem; line-height: 1.5; }

@media (max-width: 900px) {
  .section--summary { padding-bottom: 40px; }
  .summary-item { gap: 16px; }
  .summary-flex .summary-item { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------

Profile

-------------------------------------------------------------------------- */
.profile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px; padding-bottom: 80px; }
.profile__photo { flex: 0 1 clamp(260px, 45%, 520px); aspect-ratio: 3 / 4; overflow: hidden; }
.profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.profile__text { flex: 1 1 300px; min-width: 260px; }
.profile__name { font-size: 2.4rem; }
.profile__name .en { font-size: 1.8rem; font-weight: 400; margin-left: 8px; }
.profile__role { font-size: 1.6rem; color: #808080; margin-top: 16px; }
.profile__desc { font-size: 1.6rem; line-height: 1.8; margin-top: 40px; }
.profile__desc--en { color:#808080; margin-top: 16px; }

@media (max-width: 900px) {
  .profile { flex-direction: column; }
  .profile__photo,
  .profile__text { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------

Accordion

-------------------------------------------------------------------------- */
.accordion { --acc-bg: transparent; background-color: var(--acc-bg); transition: .3s ease; }
.accordion:hover { --acc-bg: rgba(255,255,255,0.03); }
.accordion.is-open { --acc-bg: rgba(255,255,255,0.03); }
.accordion.is-exiting { --acc-bg: transparent; }
.accordion.is-exiting:hover { --acc-bg: transparent; }
:root { --scroll-top-offset: 0px; }
.accordion__head { scroll-margin-top: var(--scroll-top-offset); cursor: pointer; padding: 80px 0; position: relative; list-style: none; background: transparent; }
.accordion__head .container { position: relative; }
.accordion__head .container::after { content: ""; position: absolute; top: 50%; right: 16px; width: 18px; height: 18px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; transform: translateY(-50%) rotate(45deg); opacity: .9; transition: transform .28s ease, opacity .2s ease; pointer-events: none; }
.accordion:hover .accordion__head .container::after { opacity: 1; }
.accordion.is-open .accordion__head .container::after { transform: translateY(-50%) rotate(-135deg); }
.accordion__body { position: relative; overflow: hidden; height: 0; opacity: 0; overflow-anchor: auto; will-change: height, opacity; }
.accordion.is-open .accordion__body {
  height: auto;
  opacity: 1;
}
.accordion__spacer { height: 0; }
.work-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 24px; }
.work-title span { font-weight: 300; color: #808080; }
.work-rail { width: 100vw; margin-left: calc(50% - 50vw); }
.work-scroller {
  --rail-offset: max(16px, calc((100vw - 1200px)/2 + 16px));
  display: flex; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 120px;
  padding-right: 16px;
  padding-left: var(--rail-offset);
  -webkit-overflow-scrolling: touch;
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y; cursor: grab;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  scroll-snap-type: none !important;
}
body.is-dragging .work-scroller{ cursor: grabbing; }
.work-scroller::-webkit-scrollbar { display: none; }
.work-scroller::before { content: none; }
.work-card { cursor: default; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; scroll-snap-align: none !important; }
.work-card__media { display: inline-block; height: 300px; width: auto; overflow: visible; }
.work-scroller--400 .work-card__media { height: 400px; }
.work-card__media img { height: 100%; width: auto; max-width: none; object-fit: contain; object-position: center; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.work-card__caption { font-size: 1.4rem; color: #808080; padding-top: 12px; max-width: 100%; word-break: break-word; pointer-events: auto; }
.work-card__caption .work-link { display: inline-flex; align-items: center; gap: .5em; color: #fff; text-decoration: none; line-height: 1.2; transition: opacity .2s ease; position: relative; }
.work-card__caption .work-link::after { content: ""; width: 8px; height: 8px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; opacity: .9; transform: translateY(-1px) rotate(-45deg); pointer-events: none; transition: opacity .2s ease; }
.work-card__caption .work-link:hover { opacity: .8; }
.work-card__caption .work-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

body.is-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing !important; }

@media (max-width: 900px) {
  .accordion__head { padding: 56px 0; }
  .work-scroller { padding-bottom: 40px; }
}

/* --------------------------------------------------------------------------

Footer

-------------------------------------------------------------------------- */
.footer { margin: 60px 0 60px; }
.footer-flex { display: flex; }
.footer-flex-left { width: 50%; }
.footer-flex-right { width: 50%; }
.btn-contact a { position: relative; display: inline-block; font-size: 1.6rem; color: color: #808080; padding-right: 60px; transition: .3s; }
.btn-contact a:hover { color: #fff; }
.btn-contact a::before { content: ''; position: absolute; width: 30px; height: 1px; top: 8px; right: 20px; background-color: #808080; transition: .3s; }
.btn-contact a::after { content: ''; position: absolute; top: 5px; right: 12px; border: 4px solid transparent; border-top-width: 4px; border-bottom-width: 4px; border-left-color: #808080; transition: .3s; }
.btn-contact a:hover::before { width: 45px; right: 5px; }
.btn-contact a:hover::after { right: 0; }
.copyright { font-size: 1.4rem; color: #808080; text-align: right; }

/* ============== Lazy Loading indicator ============== */
.work-card__media,
.profile__photo { position: relative; }

.is-loading::after{
  content: "Now Loading...";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  font-weight: 300;
  color: #808080;
  pointer-events: none;
  opacity: .9;
}

/* ============== Animation ============== */
.reveal--up, .reveal--down, .reveal--fade { opacity: 0 !important; transition-timing-function: cubic-bezier(.2,.6,.2,1); }
.reveal--up   { transform: translate3d(0, 40px, 0);  transition: transform 1.0s, opacity 1.0s; }
.reveal--down { transform: translate3d(0, -40px, 0); transition: transform 1.0s, opacity 1.0s; }
.reveal--fade { transition: opacity 1.0s; }
.reveal--up.reveal--shown, .reveal--down.reveal--shown { transform: none; opacity: 1 !important; }
.reveal--fade.reveal--shown { opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal--up, .reveal--down, .reveal--fade { transition: none !important; opacity: 1 !important; transform: none !important; }
}