@charset "UTF-8";
/* ==========================================================================
   kaleidosxope Inc. — teaser

   PC  : デザイン基準幅 1500px（768px 以上）
   SP  : デザイン基準幅 375px（767px 以下）
         1u = 画面幅 / 375 として全体を比例させる（幅 563px で頭打ち）

   目次
     1. Tokens / Reset / Base
     2. 共通コンポーネント
     3. PC（768px〜）
     4. Tablet（768〜1023px）
     5. SP（〜767px）
     6. Motion
   ========================================================================== */

/* ==========================================================================
   1. Tokens / Reset / Base
   ========================================================================== */
:root {
  --c-text: #000;
  --c-rule: #b8b8b8;
  --c-strong: #231815;
  --c-placeholder: #808080;
  --c-border: #707070;
  --c-error: #b3261e;
  --c-bg: #fff;

  --font: "Noto Serif JP", "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, p, ul, figure, figcaption { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; border-radius: 0; }
small { font-size: inherit; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-weight: 400;
  font-feature-settings: "palt" 0;
  text-spacing-trim: space-all; /* 約物を詰めずデザインどおり全角で組む */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
  line-break: strict;
}

:focus-visible { outline: 1px solid var(--c-strong); outline-offset: 4px; }

.container {
  margin-inline: auto;
  padding-left: var(--pad-l);
  padding-right: var(--pad-r);
}

/* デザイン上の改行。幅が足りない画面では自然な折り返しに切り替える */
.br-lg, .br-md, .br-sp, .br-narrow { display: none; }

/* ==========================================================================
   2. 共通コンポーネント
   ========================================================================== */

/* ---------- Header（固定） ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.header.is-scrolled::before { opacity: 1; }
.header__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
}
.header__logo { flex: none; line-height: 0; }
.header__logo a { display: block; }
.header__logo img { height: auto; }
.header__category { line-height: 1; word-spacing: 0; white-space: nowrap; }

/* ---------- Link ---------- */
.intro__link { line-height: 0; }
.link {
  display: inline-block;
  border-bottom: solid var(--c-rule);
  word-spacing: 0;
  transition: border-color .4s var(--ease);
}
.link:hover, .link:focus-visible { border-bottom-color: var(--c-strong); }

/* ---------- Section ---------- */
.sec__title {
  writing-mode: vertical-rl;
  font-weight: 400;
  word-spacing: 0;
  white-space: nowrap;
}
.sec__title-main, .sec__title-sub { display: block; }
.sec__title-sub[hidden] { display: none; }
.wi { white-space: nowrap; }

/* ---------- SNS ---------- */
.sns a { display: block; transition: opacity .4s var(--ease); }
.sns a:hover { opacity: .55; }
.sns svg { width: 100%; height: 100%; fill: currentColor; }

/* ---------- Recent Works ---------- */
.work__imgs { display: grid; }
.work__imgs img { width: 100%; height: auto; aspect-ratio: 524 / 350; object-fit: cover; }
.work--logos .work__imgs img { border: 1px solid var(--c-border); }
.work__cap { word-spacing: 0; }
.work:last-child { min-height: 0; }
.work:last-child .work__cap { padding-bottom: 0; }

/* ---------- Contact ---------- */
.contact__lead { outline: none; }
.fields { border-bottom: solid var(--c-rule); }
.field {
  position: relative;
  display: grid;
  border-top: solid var(--c-rule);
}
/* 入力中の行は下の罫線を濃くする */
.field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: var(--c-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
  pointer-events: none;
}
.field:focus-within::after { transform: scaleX(1); }
.field__control { min-width: 0; }
.field__input {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.field__input::placeholder { color: var(--c-placeholder); opacity: 1; }
.field__input--area { resize: none; overflow: hidden; }
.field__value { display: none; white-space: pre-wrap; }
.field__error { color: var(--c-error); }
.field__error:empty { display: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact__status { color: var(--c-error); }
.contact__status:empty { display: none; }
.contact__actions { display: flex; flex-wrap: wrap; }
.btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity .4s var(--ease);
}
.btn:hover { opacity: .55; }
.btn[disabled] { opacity: .35; cursor: default; }
.btn__arrow { display: inline-block; margin-right: .45em; transition: transform .4s var(--ease); }
.btn:not([disabled]):hover .btn__arrow { transform: translateX(4px); }
.btn:not([disabled]):hover .btn__arrow--back { transform: translateX(-4px); }
.btn--back, .btn--send { display: none; }

/* 確認画面 */
.sec--contact:is([data-state="confirm"], [data-state="sending"]) :is(.field__input, .field__error, .field--confirm-only-input, .btn--confirm) { display: none; }
.sec--contact:is([data-state="confirm"], [data-state="sending"]) .field::after { display: none; }
.sec--contact:is([data-state="confirm"], [data-state="sending"]) .field__value { display: block; }
.sec--contact:is([data-state="confirm"], [data-state="sending"]) :is(.btn--back, .btn--send) { display: inline-block; }

/* 完了画面 */
.contact__done[hidden] { display: none; }
.contact__done-body { border-top: solid var(--c-rule); border-bottom: solid var(--c-rule); }
.sec--contact[data-state="done"] .contact__form { display: none; }

/* ==========================================================================
   3. PC（768px〜）
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    /* 1500px で左190 / 右150。1300px までは本文幅(1060px)を保ったまま余白だけが縮む */
    --pad-l: clamp(40px, calc(190px - (1500px - 100vw) * .6), 190px);
    --pad-r: clamp(40px, calc(150px - (1500px - 100vw) * .5), 150px);
    --title-col: 100px;
    --header-h: 88px; /* スクロール後のヘッダ高さ（アンカー位置の補正用） */
  }
  body {
    font-size: 14px;
    line-height: 25px;
    letter-spacing: .057em;
    word-spacing: .09em;
  }
  .container { max-width: 1500px; }

  /* Header */
  .header__inner { padding-top: 100px; padding-bottom: 28px; transition: padding .6s var(--ease); }
  .header.is-scrolled .header__inner { padding-top: 26px; padding-bottom: 22px; }
  .header__logo { margin-left: 1px; }
  .header__logo img { width: 142px; }
  .header__category { margin-left: 50px; font-size: 13px; letter-spacing: .085em; }

  /* Intro */
  main { padding-top: 235px; }
  .intro { display: grid; grid-template-columns: minmax(0, 610fr) minmax(0, 550fr); }
  .intro__text { line-height: 22px; }
  .intro__link { margin-top: 16px; }
  .link { padding-bottom: 1px; border-bottom-width: 2px; font-size: 17px; line-height: 20px; letter-spacing: .05em; }

  /* Section：左に縦組みタイトル、右に本文 */
  .sec {
    display: grid;
    grid-template-columns: var(--title-col) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head body" "sns body";
    margin-top: 114px;
    scroll-margin-top: calc(var(--header-h) + 24px);
  }
  .intro + .sec { margin-top: 117px; }
  .sec__head { grid-area: head; }
  .sec__body { grid-area: body; }
  .sec__title {
    width: 52px;
    margin-left: -5px;
    padding-top: var(--title-offset, 5px);
    margin-bottom: -20px; /* タイトルの長さで本文側の高さが変わらないようにする */
  }
  .sec__title-main, .sec__title-sub { line-height: 26px; }
  .sec__title-main { font-size: 19px; letter-spacing: .1em; }
  .sec__title-sub { font-size: 12px; letter-spacing: .15em; }

  .sec--works { margin-top: 110px; }
  .sec--recent { --title-offset: 0px; margin-top: 115px; }
  .sec--works .sec__title, .sec--recent .sec__title { margin-left: 3px; }
  .sec--recent .sec__title { margin-top: -2px; }

  .text p + p { margin-top: 25px; }

  .sns { grid-area: sns; margin-top: 60px; }
  .sns li + li { margin-top: 13px; }
  .sns a { width: 21px; height: 21px; }

  /* Recent Works */
  .work { min-height: 464.2px; }
  .work__imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .work__cap { padding-top: 14px; padding-bottom: 30px; letter-spacing: .04em; }
  .work__name { margin-right: 1em; }

  /* Contact */
  .sec--contact { --title-offset: 0px; margin-top: 118px; }
  .sec--contact .sec__title { margin-top: 40px; }
  .sec--contact .sec__title-sub { position: relative; left: 3px; font-size: 13px; letter-spacing: .07em; }
  .contact { max-width: 800px; }
  .fields { margin-top: 15px; border-bottom-width: 2px; }
  .field { grid-template-columns: 173px minmax(0, 1fr); min-height: 54px; border-top-width: 2px; }
  .field::after { bottom: -2px; height: 2px; }
  .field__label { padding: 13px 0; }
  .field__label-sub { font-size: 11px; letter-spacing: 0; }
  .field__input { height: 52px; padding: 13px 0; line-height: 25px; }
  .field__input--area { height: auto; min-height: 158px; }
  .field__value { padding: 13px 0; }
  .field__value--area { min-height: 158px; }
  .field__error { margin-top: -8px; padding-bottom: 10px; font-size: 12px; line-height: 18px; }
  .sec--contact:is([data-state="confirm"], [data-state="sending"]) .field__label::after { content: ":"; }

  .contact__status { margin-top: 16px; font-size: 12px; line-height: 20px; }
  .contact__actions { gap: 0 20px; margin-top: 22px; }
  .btn { line-height: 25px; }
  .contact__done-body { margin-top: 15px; padding: 38px 0 40px; border-width: 2px 0; }
  .contact__done-body p + p { margin-top: 25px; }

  /* Footer */
  .footer { margin-top: 152px; padding-bottom: 44px; text-align: right; }
  .footer__copy { font-size: 13px; line-height: 20px; letter-spacing: .15em; margin-right: -.15em; word-spacing: 0; }
}

@media (min-width: 1024px) { .br-md { display: inline; } }
@media (min-width: 1300px) { .br-lg { display: inline; } .ws--lg { display: none; } }
@media (max-width: 1299px) { .br-narrow { display: inline; } .intro { column-gap: 40px; } }

/* ==========================================================================
   4. Tablet（768〜1023px）
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --title-col: 76px; }
  .header__category { margin-left: 36px; }
  .field { grid-template-columns: 150px minmax(0, 1fr); }
}

/* ==========================================================================
   5. SP（〜767px）
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --u: calc(min(100vw, 563px) / 375);
    --pad-l: calc(var(--u) * 29.33);
    --pad-r: calc(var(--u) * 29.33);
    --header-h: calc(var(--u) * 70);
  }
  .br-sp { display: inline; }
  .ws--sp { display: none; }

  body {
    font-size: calc(var(--u) * 10.67);
    line-height: calc(var(--u) * 19.27);
    letter-spacing: .073em;
    word-spacing: .09em;
  }
  .container { max-width: 563px; }

  /* Header */
  .header__inner { justify-content: space-between; padding-top: calc(var(--u) * 29.33); padding-bottom: calc(var(--u) * 21); }
  .header__logo img { width: calc(var(--u) * 70.5); }
  .header__category { margin-right: calc(var(--u) * -1.9); font-size: calc(var(--u) * 7.33); letter-spacing: .124em; }

  /* Intro */
  main { padding-top: calc(var(--u) * 104); }
  .intro__col--old { display: none; }
  .intro__link { margin-top: calc(var(--u) * 9.6); }
  .link {
    padding-bottom: calc(var(--u) * 4.7);
    border-bottom-width: 1px;
    font-size: calc(var(--u) * 13.33);
    line-height: calc(var(--u) * 17);
    letter-spacing: .075em;
  }

  /* Section：タイトル → 本文の縦積み */
  .sec { margin-top: calc(var(--u) * 58); --body-gap: 32.67; scroll-margin-top: calc(var(--header-h) + var(--u) * 16); }
  .sec--person { margin-top: calc(var(--u) * 56); --body-gap: 33.33; }
  .sec--works { margin-top: calc(var(--u) * 59.3); --body-gap: 34; }
  .sec--recent { margin-top: calc(var(--u) * 55.3); --body-gap: 37.33; }
  .sec__title { display: inline-block; vertical-align: top; margin-left: calc(var(--u) * -3.5); }
  .sec__title-main, .sec__title-sub { line-height: calc(var(--u) * 20); }
  .sec__title-main { font-size: calc(var(--u) * 13.33); letter-spacing: .095em; }
  .sec__title-sub { font-size: calc(var(--u) * 10.67); letter-spacing: .1em; }
  .sec__body { margin-top: calc(var(--u) * var(--body-gap)); }
  .text p + p { margin-top: calc(var(--u) * 19.27); }

  .text--works p { font-size: calc(var(--u) * 10); line-height: calc(var(--u) * 15.79); letter-spacing: .06em; word-spacing: .055em; }
  .text--works p + p { margin-top: calc(var(--u) * 15.79); }

  .sns { display: flex; gap: calc(var(--u) * 15.3); margin-top: calc(var(--u) * 25); }
  .sns a { width: calc(var(--u) * 24.7); height: calc(var(--u) * 24.7); }

  /* Recent Works */
  .work { min-height: calc(var(--u) * 507.33); }
  .work__imgs { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 10.67); }
  .work__cap {
    padding-top: calc(var(--u) * 11.33);
    padding-bottom: calc(var(--u) * 6);
    font-size: calc(var(--u) * 11.33);
    line-height: calc(var(--u) * 18.67);
    letter-spacing: .08em;
  }
  .work__name, .work__role { display: block; }

  /* Contact */
  .sec--contact { margin-top: calc(var(--u) * 73); --body-gap: 32.5; }
  .sec--contact:not([data-state="input"]) .sec__title { margin-left: calc(var(--u) * -6.4); }
  .fields { margin-top: calc(var(--u) * 14); border-bottom-width: 1px; }
  .field { grid-template-columns: calc(var(--u) * 98.6) minmax(0, 1fr); min-height: calc(var(--u) * 50.25); border-top-width: 1px; }
  .field::after { bottom: -1px; height: 1px; }
  .field__label { padding: calc(var(--u) * 15) 0; }
  .field__label-sub { display: block; margin-left: -.5em; font-size: calc(var(--u) * 9); line-height: calc(var(--u) * 12); }
  .field--confirm-only-input .field__label { padding: calc(var(--u) * 9) 0; }
  .field__input { height: calc(var(--u) * 49.25); padding: calc(var(--u) * 15) 0; line-height: calc(var(--u) * 19.25); }
  .field__value { padding: calc(var(--u) * 15) 0; }
  .field__error { margin-top: calc(var(--u) * -9); padding-bottom: calc(var(--u) * 9); font-size: calc(var(--u) * 9.5); line-height: calc(var(--u) * 14); }

  .field--message { display: block; }
  .field--message .field__label { display: block; padding-bottom: 0; }
  .field--message .field__input,
  .field--message .field__value { padding-top: calc(var(--u) * 10.5); }
  .field__input--area, .field__value--area { height: auto; min-height: calc(var(--u) * 114.5); }

  .contact__status { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 9.5); line-height: calc(var(--u) * 15); }
  .contact__actions { gap: 0 calc(var(--u) * 21); margin-top: calc(var(--u) * 25); }
  .btn { font-size: calc(var(--u) * 12.7); line-height: calc(var(--u) * 20); }
  .contact__done-body { margin-top: calc(var(--u) * 14); padding: calc(var(--u) * 30) 0; border-width: 1px 0; }
  .contact__done-body p + p { margin-top: calc(var(--u) * 20); }

  /* Footer */
  .footer { margin-top: calc(var(--u) * 58); padding-bottom: calc(var(--u) * 26); }
  .footer__copy { font-size: calc(var(--u) * 8); line-height: calc(var(--u) * 12); letter-spacing: .1em; word-spacing: 0; }
}

/* ==========================================================================
   6. Motion
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease);
  transition-delay: calc(var(--reveal-delay, 0) * 140ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }
.js .header__logo, .js .header__category { opacity: 0; transition: opacity 1.2s var(--ease); }
.js .header.is-ready :is(.header__logo, .header__category) { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js .header__logo, .js .header__category { opacity: 1; transform: none; transition: none; }
  .header__inner, .header::before, .field::after, .btn__arrow { transition: none; }
}