/* ==========================================================================
   26taroworks — Theme Stylesheet (Pop / Colorful Direction)
   同じブロック構造・クラス名のまま、配色・タイポグラフィ・質感を刷新。
   ========================================================================== */

:root{
  --bg:#FFF8EF;
  --ink:#1E1A2E;
  --ink-soft:#726A8A;
  --border:#F2E4CE;

  --coral:#FF5A3C;
  --coral-deep:#E8431F;
  --blue:#2D6CF6;
  --yellow:#FFC53D;
  --pink:#FF3D9A;

  --night:#170F2E;
  --paper-on-night:#F5F3ED;

  --side: clamp(24px, 8vw, 140px);
  --section-y: clamp(80px, 13vw, 180px);
  --text-width: 720px;
  --content-width: 1400px;

  --display: "Fredoka", "Zen Maru Gothic", sans-serif;
  --body-font: "Plus Jakarta Sans", "Zen Kaku Gothic New", sans-serif;

  --r-sm: 16px;
  --r-md: 24px;
  --r-lg: 32px;
  --r-pill: 999px;

  --fast: .2s;
  --normal: .45s;
  --slow: .75s;
  --ease: cubic-bezier(.34,1.56,.64,1); /* ちょっとバウンドする、ポップな戻り方 */
  --ease-smooth: cubic-bezier(.16,1,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--bg); }
body{
  background:var(--bg);
  color:var(--ink);
  font-family: var(--body-font);
  font-size:18px;
  line-height:1.75;
  letter-spacing:0.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.tw-custom-cursor{ cursor:none; }
@media (max-width:900px){ body.tw-custom-cursor{ cursor:auto; } }

::selection{ background:var(--coral); color:#fff; }
a{ color:inherit; text-decoration:none; }
img,video{ max-width:100%; display:block; }

.eyebrow{
  font-family: var(--body-font);
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--coral-deep);
  font-weight:700;
}

.section{ padding: var(--section-y) var(--side); position:relative; }
.split{ overflow:hidden; display:inline-block; }
.char{ display:inline-block; will-change:transform, opacity, filter; }

/* ---------- custom cursor ---------- */
#cursor{
  position:fixed; top:0; left:0; width:14px; height:14px;
  border-radius:50%; pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition: width var(--fast) var(--ease), height var(--fast) var(--ease), background var(--fast) var(--ease);
  background:var(--coral);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; letter-spacing:.06em; color:#fff; font-weight:700;
  box-shadow:0 0 0 4px rgba(255,90,60,.18);
}
@media (max-width:900px){ #cursor{ display:none; } }

/* ---------- loader ---------- */
#loader{
  position:fixed; inset:0; background:var(--bg); z-index:9998;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:18px;
}
#loader .mark{
  font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:.02em;
  color:var(--coral);
}
#loader .line{ width:3px; height:0; background:linear-gradient(180deg, var(--coral), var(--blue)); border-radius:2px; }

/* ---------- header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 var(--side); height:92px;
  transition: height var(--normal) var(--ease-smooth), background var(--normal) var(--ease-smooth), box-shadow var(--normal) var(--ease-smooth);
}
header.solid{
  height:72px; background:rgba(255,248,239,.88);
  backdrop-filter: blur(16px); box-shadow:0 4px 24px rgba(30,26,46,.06);
}
.logo{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:.01em; color:var(--ink); }
.logo--image{ display:flex; align-items:center; }
.logo--image img{ max-height:40px; width:auto; display:block; }
header.solid .logo--image img{ max-height:32px; transition: max-height var(--normal) var(--ease-smooth); }
header nav ul{ list-style:none; display:flex; gap:36px; }
header nav a{
  font-size:14px; font-weight:600; letter-spacing:.01em; position:relative;
  padding:8px 4px;
}
header nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:3px; border-radius:2px;
  background:var(--coral); transition:width var(--normal) var(--ease);
}
header nav a:hover::after{ width:100%; }
@media (max-width:900px){ header nav{ display:none; } }

/* ---------- hero ---------- */
.tw-hero{
  height:100svh; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
}
.tw-hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(55% 45% at 12% 18%, rgba(255,90,60,.55), transparent 70%),
    radial-gradient(50% 45% at 88% 12%, rgba(45,108,246,.45), transparent 70%),
    radial-gradient(55% 50% at 80% 90%, rgba(255,197,61,.5), transparent 70%),
    radial-gradient(45% 40% at 10% 90%, rgba(255,61,154,.4), transparent 70%),
    var(--bg);
  filter: blur(0px);
  transform:scale(1.08);
}
.tw-hero__grain{
  position:absolute; inset:0; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tw-hero__content{ position:relative; z-index:2; text-align:center; color:var(--ink); padding:0 24px; }
.tw-hero #hero-title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(48px, 10vw, 128px); line-height:0.98; letter-spacing:-0.01em;
}
.tw-hero #hero-title span{ display:block; }
.tw-hero #hero-title span:nth-child(1){ color:var(--coral); }
.tw-hero #hero-title span:nth-child(2){ color:var(--ink); }
.tw-hero #hero-title span:nth-child(3){ color:var(--blue); }
.tw-hero__sub{
  margin-top:28px; font-size:clamp(15px,1.6vw,19px);
  color:var(--ink-soft); letter-spacing:.01em; font-weight:600;
}
#scroll-ind{
  position:absolute; right:var(--side); bottom:40px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--ink-soft); font-size:11px; font-weight:700; letter-spacing:.14em;
}
#scroll-ind .stem{ width:3px; height:0; background:var(--coral); border-radius:2px; }

/* ---------- question ---------- */
.tw-question{
  background:var(--bg); text-align:center; min-height:70vh;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:26px; padding: var(--section-y) var(--side);
}
.tw-question .q1{ font-family:var(--display); font-weight:700; font-size:clamp(28px,4.6vw,52px); line-height:1.25; max-width:900px; }
.tw-question .q2{ font-family:var(--display); font-weight:700; color:var(--coral); font-size:clamp(28px,4.6vw,52px); line-height:1.25; max-width:900px; }
.tw-question .q3{ font-size:clamp(16px,2vw,20px); color:var(--ink-soft); max-width:560px; font-weight:600; }

/* ---------- what we solve ---------- */
.tw-solve{ background:#fff; }
.tw-solve .head{ max-width:var(--text-width); margin-bottom:56px; }
.tw-solve .head h2{ font-family:var(--display); font-weight:700; font-size:clamp(28px,4vw,44px); }
.solve-list{ display:flex; flex-direction:column; }
.solve-item{
  border-top:2px dashed var(--border); padding:32px 20px; display:flex; align-items:baseline; justify-content:space-between;
  border-radius:var(--r-sm); transition: background var(--normal) var(--ease);
}
.solve-list .solve-item:last-child{ border-bottom:2px dashed var(--border); }
.solve-item:hover{ background:#FFF3EC; }
.solve-item .label{
  font-family:var(--display); font-weight:700; font-size:clamp(22px,3.6vw,40px);
  transition: transform var(--normal) var(--ease), color var(--normal) var(--ease); transform-origin:left center;
}
.solve-item:nth-child(4n+1):hover .label{ transform:translateX(14px) rotate(-1deg); color:var(--coral); }
.solve-item:nth-child(4n+2):hover .label{ transform:translateX(14px) rotate(-1deg); color:var(--blue); }
.solve-item:nth-child(4n+3):hover .label{ transform:translateX(14px) rotate(-1deg); color:var(--pink); }
.solve-item:nth-child(4n+4):hover .label{ transform:translateX(14px) rotate(-1deg); color:var(--coral-deep); }
.solve-item .num{ font-size:13px; color:var(--ink-soft); letter-spacing:.06em; font-weight:700; }

/* ---------- who we are ---------- */
.tw-who{ background:var(--bg); }
.tw-who .visual{
  height:56vh; border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:linear-gradient(135deg, #FFD8A8 0%, #FF9E7A 45%, #FF5A9E 100%);
  margin-bottom:56px; background-size:cover; background-position:center;
  box-shadow:0 24px 48px -16px rgba(255,90,60,.35);
}
.tw-who .body{ max-width:var(--text-width); }
.tw-who .body h2{ font-family:var(--display); font-weight:700; font-size:clamp(26px,3.6vw,40px); margin-bottom:22px; }
.tw-who .body p{ color:var(--ink-soft); font-size:19px; margin-bottom:6px; font-weight:500; }
.tw-who .body p.em{ color:var(--ink); font-weight:700; margin-top:18px; }

/* ---------- framework ---------- */
.tw-framework{ background:#fff; }
.tw-framework .head{ margin-bottom:88px; }
.tw-framework .head .eyebrow{ margin-bottom:14px; }
.tw-framework .head h2{ font-family:var(--display); font-weight:700; font-size:clamp(28px,4vw,44px); max-width:600px; }
.fw-track{ position:relative; max-width:var(--content-width); margin:0 auto; }
.fw-line-bg{ position:absolute; top:16px; left:0; right:0; height:3px; background:var(--border); border-radius:2px; }
.fw-line-fg{
  position:absolute; top:16px; left:0; height:3px; width:0%; border-radius:2px;
  background:linear-gradient(90deg, var(--coral), var(--pink), var(--blue), var(--yellow));
}
.fw-steps{ display:grid; gap:24px; position:relative; }
.fw-step{ display:flex; flex-direction:column; gap:18px; opacity:.4; transition:opacity var(--normal) var(--ease), transform var(--normal) var(--ease); }
.fw-step.active{ opacity:1; transform:translateY(-4px); }
.fw-dot{
  width:34px; height:34px; border-radius:50%; background:#fff; border:3px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--ink-soft);
  transition: background var(--normal) var(--ease), border-color var(--normal) var(--ease), color var(--normal) var(--ease);
}
.fw-step:nth-child(5n+1) .fw-dot.active,.fw-step.active:nth-child(5n+1) .fw-dot{ background:var(--coral); border-color:var(--coral); color:#fff; }
.fw-step.active .fw-dot{ background:var(--coral); border-color:var(--coral); color:#fff; }
.fw-step h3{ font-family:var(--display); font-weight:700; font-size:clamp(19px,2.2vw,26px); }
.fw-step p{ font-size:14px; color:var(--ink-soft); line-height:1.7; font-weight:500; }
@media (max-width:900px){
  .fw-steps{ grid-template-columns:1fr !important; gap:44px; }
  .fw-line-bg,.fw-line-fg{ display:none; }
}

/* ---------- case study ---------- */
.tw-case-study{ background:var(--bg); }
.tw-case-study .head{ max-width:var(--text-width); margin-bottom:80px; }
.tw-case-study .head h2{ font-family:var(--display); font-weight:700; font-size:clamp(28px,4vw,44px); }
.case-item{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; max-width:var(--content-width); margin:0 auto 128px; }
.case-item:last-child{ margin-bottom:0; }
.case-item--reverse{ direction:rtl; }
.case-item--reverse > *{ direction:ltr; }
.case-visual{
  aspect-ratio:4/5; border-radius:var(--r-lg); position:relative; overflow:hidden; background-size:cover; background-position:center;
  box-shadow:0 24px 48px -20px rgba(30,26,46,.25);
}
.case-item:nth-child(odd) .case-visual{ background:linear-gradient(150deg,#FFD8A8,#FF5A3C); }
.case-item:nth-child(even) .case-visual{ background:linear-gradient(150deg,#A8C8FF,#2D6CF6); }
.case-visual img{ width:100%; height:100%; object-fit:cover; }
.case-info .eyebrow{ margin-bottom:14px; }
.case-info h3{ font-family:var(--display); font-weight:700; font-size:clamp(24px,3vw,36px); line-height:1.3; margin-bottom:32px; }
.case-info h3 a:hover{ color:var(--coral); }
.case-facts{ display:flex; flex-direction:column; gap:18px; margin-bottom:28px; }
.case-facts dt{ font-size:12px; letter-spacing:.08em; color:var(--coral-deep); font-weight:700; margin-bottom:4px; }
.case-facts dd{ font-size:16px; color:var(--ink); font-weight:500; }
.case-voice{
  font-style:normal; color:var(--ink); font-size:15px; font-weight:600;
  background:#FFF3EC; border-radius:var(--r-sm); padding:14px 18px; margin-bottom:28px;
}
.case-link{
  font-size:14px; font-weight:700; letter-spacing:.01em; display:inline-block;
  background:var(--ink); color:#fff; padding:12px 22px; border-radius:var(--r-pill);
  transition: background var(--normal) var(--ease), transform var(--normal) var(--ease);
}
.case-link:hover{ background:var(--coral); transform:translateY(-2px); }
@media (max-width:900px){
  .case-item, .case-item--reverse{ grid-template-columns:1fr; direction:ltr; gap:28px; margin-bottom:88px; }
}

/* ---------- numbers ---------- */
.tw-numbers{ background:var(--night); color:#fff; position:relative; overflow:hidden; }
.tw-numbers::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(40% 50% at 10% 20%, rgba(255,90,60,.35), transparent 70%),
    radial-gradient(40% 50% at 90% 80%, rgba(45,108,246,.35), transparent 70%);
}
.num-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; max-width:var(--content-width); margin:0 auto; position:relative; z-index:1; }
.num-item{ text-align:left; }
.num-item:nth-child(4n+1) .val{ color:var(--coral); }
.num-item:nth-child(4n+2) .val{ color:var(--yellow); }
.num-item:nth-child(4n+3) .val{ color:var(--blue); }
.num-item:nth-child(4n+4) .val{ color:var(--pink); }
.num-item .val{ font-family:var(--display); font-weight:700; font-size:clamp(38px,5.6vw,76px); }
.num-item .cap{ font-size:12px; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.6); margin-top:8px; }
@media (max-width:900px){ .num-grid{ grid-template-columns:repeat(2,1fr); gap:44px 24px; } }

/* ---------- magazine ---------- */
.tw-magazine{ background:#fff; }
.mag-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; max-width:var(--content-width); margin:0 auto 48px; }
.mag-head h2{ font-family:var(--display); font-weight:700; font-size:clamp(28px,4vw,44px); }
.mag-cats{ display:flex; gap:14px; flex-wrap:wrap; }
.mag-cats span a{
  font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--ink-soft);
  background:var(--bg); border-radius:var(--r-pill); padding:6px 14px; display:inline-block;
  transition: background var(--normal) var(--ease), color var(--normal) var(--ease);
}
.mag-cats span a:hover{ background:var(--coral); color:#fff; }
.mag-scroll{ display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; max-width:var(--content-width); margin:0 auto; scrollbar-width:none; }
.mag-scroll::-webkit-scrollbar{ display:none; }
.mag-card{ flex:0 0 280px; scroll-snap-align:start; display:block; }
.mag-card .thumb{
  aspect-ratio:4/5; border-radius:var(--r-md); margin-bottom:18px; overflow:hidden;
  transition: transform var(--normal) var(--ease); background-size:cover; background-position:center;
  box-shadow:0 16px 32px -16px rgba(30,26,46,.25);
}
.mag-card:nth-child(5n+1) .thumb{ background:linear-gradient(160deg,#FFD8A8,#FF5A3C); }
.mag-card:nth-child(5n+2) .thumb{ background:linear-gradient(160deg,#A8C8FF,#2D6CF6); }
.mag-card:nth-child(5n+3) .thumb{ background:linear-gradient(160deg,#FFE28A,#FFC53D); }
.mag-card:nth-child(5n+4) .thumb{ background:linear-gradient(160deg,#FFB8DD,#FF3D9A); }
.mag-card:nth-child(5n+5) .thumb{ background:linear-gradient(160deg,#D8C8FF,#7A5CF0); }
.mag-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.mag-card:hover .thumb{ transform:scale(1.04) rotate(-1deg); }
.mag-card .cat{ font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--coral-deep); margin-bottom:6px; }
.mag-card h3{ font-family:var(--display); font-weight:600; font-size:19px; line-height:1.4; }

/* ---------- testimonial ---------- */
.tw-voices{ background:var(--bg); text-align:center; }
.voices-eyebrow{ display:block; margin-bottom:36px; }
.voices-quote{ font-family:var(--display); font-weight:700; font-size:clamp(24px,3.6vw,42px); line-height:1.5; max-width:900px; margin:0 auto 44px; }
.voices-person{ display:flex; align-items:center; justify-content:center; gap:16px; }
.voices-photo{
  width:56px; height:56px; border-radius:50%; background:linear-gradient(160deg,var(--coral),var(--pink));
  background-size:cover; background-position:center; box-shadow:0 0 0 4px #fff, 0 0 0 6px var(--border);
}
.voices-name{ font-size:15px; font-weight:700; text-align:left; }
.voices-role{ font-size:13px; color:var(--ink-soft); text-align:left; font-weight:500; }

/* ---------- contact / cta ---------- */
.tw-contact{ background:var(--night); color:#fff; text-align:center; position:relative; overflow:hidden; padding-top: calc(var(--section-y) * 0.7); }
.tw-contact::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(45% 55% at 85% 15%, rgba(255,197,61,.3), transparent 70%),
    radial-gradient(45% 55% at 15% 85%, rgba(255,61,154,.3), transparent 70%);
}
.tw-contact h2{ font-family:var(--display); font-weight:700; font-size:clamp(38px,7.5vw,104px); line-height:0.98; position:relative; z-index:1; }
.tw-contact .lead{ max-width:520px; margin:28px auto 0; color:rgba(255,255,255,.7); font-size:17px; font-weight:500; position:relative; z-index:1; }
.cta-row{ display:flex; gap:16px; justify-content:center; margin-top:44px; flex-wrap:wrap; position:relative; z-index:1; }
.cta-line{
  border:none; padding:16px 32px; font-size:14px; font-weight:700; letter-spacing:.02em;
  border-radius:var(--r-pill); display:inline-block; background:var(--coral); color:#fff;
  transition: background var(--normal) var(--ease), transform var(--normal) var(--ease);
}
.cta-line:hover{ background:var(--pink); transform:translateY(-3px) scale(1.03); color:#fff; }

/* ---------- contact form (conversational) ---------- */
.tw-contact-form{ background:var(--night); color:#fff; position:relative; overflow:hidden; }
.tw-contact-form::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(50% 60% at 50% 0%, rgba(45,108,246,.25), transparent 70%);
}
.tw-form-heading{
  font-family:var(--display); font-weight:700; font-size:clamp(24px,3.4vw,38px);
  max-width:var(--text-width); margin:0 auto 48px; text-align:center; position:relative; z-index:1;
}
.tw-form{ max-width:560px; margin:0 auto; position:relative; min-height:180px; z-index:1; }
.tw-hp-wrap{ position:absolute; left:-9999px; top:-9999px; }
.tw-step{
  display:none; flex-direction:column; gap:20px;
  animation: tw-step-in var(--slow) var(--ease);
}
.tw-step.is-active{ display:flex; }
@keyframes tw-step-in{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
.tw-step label{ font-size:14px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.7); }
.tw-step input,
.tw-step textarea{
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.15); border-radius:var(--r-sm);
  color:#fff; font-size:20px; font-family:var(--body-font); font-weight:500; padding:14px 16px;
  outline:none; transition:border-color var(--normal) var(--ease); resize:vertical;
}
.tw-step input:focus,
.tw-step textarea:focus{ border-color:var(--coral); }
.tw-step input[aria-invalid="true"],
.tw-step textarea[aria-invalid="true"]{ border-color:var(--pink); }
.tw-step button{ align-self:flex-start; margin-top:4px; cursor:pointer; }
.tw-form-error{ color:#FFB4D4; font-size:13px; margin-top:20px; font-weight:600; }
.tw-form-thanks{ max-width:560px; margin:0 auto; text-align:center; font-family:var(--display); font-weight:700; font-size:clamp(22px,3vw,32px); position:relative; z-index:1; }

/* ---------- footer ---------- */
footer{ background:var(--night); color:#fff; padding: 88px var(--side) 44px; position:relative; overflow:hidden; }
footer::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(45% 55% at 50% 100%, rgba(255,90,60,.25), transparent 70%);
}
footer .foot-head{ font-family:var(--display); font-weight:700; font-size:clamp(30px,5vw,60px); position:relative; z-index:1; }
.foot-links{ display:flex; gap:28px; margin-top:48px; font-size:13px; font-weight:700; letter-spacing:.02em; color:rgba(255,255,255,.65); flex-wrap:wrap; list-style:none; position:relative; z-index:1; }
.foot-links ul{ display:flex; gap:28px; flex-wrap:wrap; list-style:none; padding:0; margin:0; }
.foot-links a{ position:relative; }
.foot-links a::after{ content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; border-radius:2px; background:var(--coral); transition:width var(--normal) var(--ease); }
.foot-links a:hover{ color:#fff; }
.foot-links a:hover::after{ width:100%; }
.foot-bottom{ margin-top:52px; font-size:12px; color:rgba(255,255,255,.3); position:relative; z-index:1; }

/* ---------- generic pages (page.php / single.php / archive.php) ---------- */
.tw-page{ min-height:60vh; }
.tw-prose p{ margin-bottom:24px; color:var(--ink); }
.tw-prose a{ color:var(--coral); text-decoration:underline; text-underline-offset:3px; }
.tw-prose h2{ font-family:var(--display); font-weight:700; font-size:28px; margin:48px 0 16px; }
.tw-prose img{ border-radius:var(--r-md); margin:24px 0; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}