html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: #ECF0F2; }
body { padding-top: env(safe-area-inset-top, 0px); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.site footer a { color: inherit; }
.site footer .fl { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; }
/* ================= site mockup (palette A, wa-modern) ================= */
@property --h { syntax: "<number>"; inherits: false; initial-value: 250; }
@property --pos { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.site {
  --base: #ECF0F2; --card: #FFFFFF; --ink: #21313F; --gray: #566776; --hair: #D7DEE3;
  --c-design: #4C7EA9; --c-school: #94B979; --c-comm: #D5A781;
  --t-design: #4978A2; --t-school: #5C7F43; --t-comm: #A46837;
  /* vivid companions in OKLCH for gradients and sparkles */
  --v-design: oklch(0.62 0.13 245); --v-school: oklch(0.74 0.15 135); --v-comm: oklch(0.80 0.12 65);
  --btn-bg: #21313F; --btn-fg: #FFFFFF; --body: #4F5F6D; --hA: 248; --hB: 62; --fl: 0.52; --fc: 0.13; --orb: .5;
  --o1: oklch(0.93 0.05 245); --o2: oklch(0.94 0.07 135); --o3: oklch(0.94 0.06 65);
  --seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cg fill='%23ECF0F2' stroke='%23CCD6DD' stroke-width='1'%3E%3Cpath d='M-20 10a20 20 0 0 1 40 0zM20 10a20 20 0 0 1 40 0z'/%3E%3Cpath fill='none' d='M-14 10a14 14 0 0 1 28 0M-8 10a8 8 0 0 1 16 0M26 10a14 14 0 0 1 28 0M32 10a8 8 0 0 1 16 0'/%3E%3Cpath d='M0 20a20 20 0 0 1 40 0z'/%3E%3Cpath fill='none' d='M6 20a14 14 0 0 1 28 0M12 20a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E");
  --shippo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cg fill='none' stroke='white' stroke-opacity='.3' stroke-width='1.2'%3E%3Ccircle r='14'/%3E%3Ccircle cx='28' r='14'/%3E%3Ccircle cy='28' r='14'/%3E%3Ccircle cx='28' cy='28' r='14'/%3E%3Ccircle cx='14' cy='14' r='14'/%3E%3C/g%3E%3C/svg%3E");
  --kanoko: radial-gradient(rgba(255,255,255,.32) 2px, transparent 2.6px) 0 0 / 14px 14px, radial-gradient(rgba(255,255,255,.32) 2px, transparent 2.6px) 7px 7px / 14px 14px;
  --ichimatsu: conic-gradient(rgba(255,255,255,.16) 25%, transparent 0 50%, rgba(255,255,255,.16) 0 75%, transparent 0) 0 0 / 22px 22px;
  container-type: inline-size; overflow-x: clip; position: relative;
  background: var(--base); color: var(--ink);
  font-family: "Noto Sans JP", sans-serif; font-size: 15px; line-height: 1.9;
}
.site * { box-sizing: border-box; }
.site h1, .site h2, .site h3, .site p, .site dl, .site dd { margin: 0; }
.site .in { max-width: 1080px; margin: 0 auto; padding-inline: clamp(18px, 5cqi, 56px); }
.site a { color: inherit; }
.site .deco { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; }
.site .disp { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; }
.site .lat { font-family: "Outfit", "Noto Sans JP", sans-serif; }
.site .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site .ch { display: inline-block; white-space: pre; }
.site section, .site .hero { scroll-margin-top: 80px; }
/* fill patterns per division */

/* header */
.site .hd { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--base) 86%, transparent); backdrop-filter: blur(10px); }
.site .hd::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg in oklch, var(--v-design), var(--v-school), var(--v-comm), var(--v-design)) var(--pos) 0 / 200% 100%; animation: flowLine 24s linear infinite; }
@keyframes flowLine { to { --pos: 200%; } }
.site .hdin { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 15px; }
.site .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; }
.site .logo i { display: grid; grid-template-columns: repeat(3, 8px); gap: 3px; align-items: end; height: 22px; }
.site .logo i s { width: 8px; height: 22px; border-radius: 4px; display: block; background: var(--c); transform-origin: bottom; animation: eq 2.6s ease-in-out infinite; animation-delay: calc(var(--k) * -.8s); }
@keyframes eq { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.7); } }
.site nav.pc { display: flex; gap: 24px; font-size: .84rem; font-weight: 700; align-items: center; }
.site nav.pc a { text-decoration: none; cursor: pointer; position: relative; }
.site nav.pc a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--c); transform: scaleX(0); transition: transform .4s cubic-bezier(.22,1,.36,1); }
.site nav.pc a:hover::after { transform: scaleX(1); }
.site .cta { background: var(--btn-bg); color: var(--btn-fg); padding: 8px 20px; border-radius: 999px; cursor: pointer; border: 0; font: inherit; font-weight: 700; }
.site .burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--btn-bg); cursor: pointer; position: relative; }
.site .burger span { position: absolute; left: 14px; width: 18px; height: 2px; border-radius: 2px; background: var(--btn-fg); transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .2s; }
.site .burger span:nth-child(1) { top: 16px; } .site .burger span:nth-child(2) { top: 22px; width: 12px; } .site .burger span:nth-child(3) { top: 28px; }
.site .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.site .burger:focus-visible, .site .fab:focus-visible, .site .cta:focus-visible, .site .btn:focus-visible, .site nav.pc a:focus-visible { outline: 3px solid var(--c-comm); outline-offset: 3px; }
.site .drawer { position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); background: var(--card); border-radius: 16px; padding: 14px; box-shadow: 0 18px 40px rgba(33,49,63,.18); display: grid; gap: 4px; transform-origin: top right; animation: openSoft .5s cubic-bezier(.22,1,.36,1) both; overflow: hidden; }
.site .drawer a { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; font-weight: 700; text-decoration: none; cursor: pointer; animation: rollRow .6s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
.site .drawer a:hover { background: var(--base); }
.site .drawer a i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.site .drawer .cta { position: relative; text-align: center; margin-top: 6px; padding: 12px; }
@keyframes openSoft { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rollRow { from { transform: translateX(18px) rotate(2deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* hero */
.site .hero { padding-block: clamp(48px, 8cqi, 100px) clamp(48px, 8cqi, 96px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; position: relative; }
.site .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.site .orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: var(--orb); animation: drift 22s ease-in-out infinite alternate; }
.site .orb.o1 { width: 280px; height: 280px; right: 4%; top: 8%; background: radial-gradient(circle at 35% 35%, var(--o1), transparent 70%); }
.site .orb.o2 { width: 200px; height: 200px; right: 30%; bottom: 4%; background: radial-gradient(circle at 40% 40%, var(--o2), transparent 70%); animation-delay: -8s; }
.site .orb.o3 { width: 160px; height: 160px; left: 2%; top: 4%; background: radial-gradient(circle at 40% 40%, var(--o3), transparent 70%); animation-delay: -14s; }
@keyframes drift { 0% { transform: translate(0, 0); } 100% { transform: translate(-24px, 18px); } }
.site .hero > div:not(.hero-bg) { position: relative; z-index: 1; }
.site .hero h1 { font-size: clamp(2.2rem, 6.2cqi, 4.4rem); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.site .hero p { margin-top: 22px; color: var(--gray); font-size: 1.05rem; display: inline-flex; align-items: center; gap: 12px; }
.site .hero p::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg in oklch, var(--v-design), var(--v-comm)); flex: none; }
.site .tiles { display: grid; gap: 14px; }
.site .tile { border-radius: 16px; padding: 20px 24px; background-color: var(--c); color: #FFFFFF; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; position: relative; cursor: pointer; transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s; box-shadow: 0 8px 18px rgba(33,49,63,.10); animation: tileIn 1.2s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--k) * 140ms + 300ms); }
.site .tile:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(33,49,63,.16); }
.site .tile .mon { display: none; }
@keyframes turn { to { transform: rotate(360deg); } }
.site .tile b { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.site .tile span.ja { font-size: .85rem; text-align: right; line-height: 1.6; }
@keyframes tileIn { 0% { transform: translateX(28px) rotate(4deg); } 100% { transform: none; } }

/* section heading ornament */
.site .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); }
.site .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg in oklch, var(--v-design), var(--v-comm)); }
.site .h2 { font-weight: 700; margin-top: 10px; display: grid; gap: 10px; justify-items: start; }
.site .h2::after { content: ""; width: 44px; height: 2px; border-radius: 2px; background: linear-gradient(90deg in oklch, var(--v-design), var(--v-school), var(--v-comm)); }
.site section { padding-block: clamp(56px, 9cqi, 100px); position: relative; }

/* mission */
.site .mission-card { background: var(--card); border-radius: 24px; padding: clamp(28px, 6cqi, 64px); position: relative; overflow: hidden; }
.site .mission-card > * { position: relative; }
.site .mission-card h2 { font-size: clamp(1.6rem, 3.6cqi, 2.3rem); }
.site .statement { margin-top: 24px; display: grid; gap: 16px; font-size: clamp(1.02rem, 2cqi, 1.2rem); max-width: 40em; }
.site .values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.site .values > div { background: var(--base); border-radius: 14px; padding: 22px 20px; min-width: 0; position: relative; }
.site .values h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.site .values p { font-size: .88rem; color: var(--gray); }

/* business */
.site .biz > .in > .h2 { font-size: clamp(1.7rem, 3.8cqi, 2.5rem); margin-bottom: 34px; }
.site .band { background: var(--card); border-radius: 20px; overflow: hidden; margin-bottom: 20px; display: grid; grid-template-columns: 220px minmax(0, 1fr); box-shadow: 0 6px 16px rgba(33,49,63,.06); }
.site .band-head { background-color: var(--c); color: #FFFFFF; padding: 26px 24px; display: grid; align-content: space-between; gap: 18px; position: relative; }
.site .band-head b { font-size: 1.7rem; font-weight: 800; line-height: 1.05; }
.site .band-head span { font-size: .95rem; font-weight: 700; }
.site .band-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.site .item { padding: 20px 22px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.site .item h3 { font-size: 1.02rem; font-weight: 700; }
.site .item h3 a { text-decoration: none; color: var(--t); }
.site .item p { font-size: .86rem; color: var(--gray); }
.site .st { justify-self: start; font-size: .72rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; background: var(--base); color: var(--gray); }
.site .st-open { background: var(--c); color: #FFFFFF; }
.site .st-build { background: color-mix(in oklch, var(--c) 18%, var(--card)); color: var(--t); }

/* company + contact */
.site .company { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.site .company > div { background: var(--card); border-radius: 20px; padding: 32px; display: grid; gap: 12px; align-content: start; position: relative; overflow: hidden; }
.site .company .h2 { font-size: 1.45rem; }
.site .company dl { display: grid; gap: 10px; }
.site .company dt { font-size: .75rem; color: var(--gray); }
.site .note { font-size: .78rem; color: var(--gray); }
.site .company p { color: var(--gray); }
.site .btn { justify-self: start; display: inline-block; background: var(--btn-bg); color: var(--btn-fg); padding: 13px 30px; border-radius: 999px; font-weight: 700; text-decoration: none; position: relative; z-index: 1; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.site .btn:hover { transform: translateY(-2px); }
.site footer { padding-block: 34px 96px; font-size: .78rem; color: var(--gray); position: relative; }
.site .foot-wave { height: 1px; margin-inline: clamp(18px, 5cqi, 56px); background: linear-gradient(90deg in oklch, var(--v-design), var(--v-school), var(--v-comm)); opacity: .5; }

/* flowing colour on headings: hue moves slowly blue -> green -> sand in OKLCH (no grey midpoint) */
.site .flow .ch { color: oklch(var(--fl) var(--fc) var(--h)); }
@keyframes hueFlow { 0%, 100% { --h: var(--hA); } 50% { --h: var(--hB); } }
/* gentle "korokoro" entrances */
@keyframes rollSoft { 0% { transform: translateY(.25em) rotate(-35deg); } 100% { transform: none; } }
@keyframes rollCard { 0% { transform: translateY(14px); } 100% { transform: none; } }
@keyframes spinSoft { to { transform: rotate(360deg); } }
.site .flow .ch { animation: rollSoft 1.2s cubic-bezier(.22,1,.36,1) both, hueFlow 18s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms), calc(var(--i) * -.4s); }
.site .rv.seen { animation: rollCard 1s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--d, 0) * 90ms); }
/* touch sparkles */
.site .spark { position: absolute; z-index: 50; pointer-events: none; width: var(--s); height: var(--s); background: var(--col); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: spark .9s ease-out forwards; }
@keyframes spark { 0% { transform: translate(-50%, -50%) translate(0, 0) scale(0) rotate(0); opacity: 1; } 40% { transform: translate(-50%, -50%) translate(calc(var(--dx) * .6), calc(var(--dy) * .6)) scale(1) rotate(80deg); opacity: 1; } 100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0) rotate(160deg); opacity: 0; } }

/* mobile floating window */
.site .fabwrap { position: sticky; bottom: env(safe-area-inset-bottom, 0px); height: 0; z-index: 40; display: none; }
.site .fab { position: absolute; right: 16px; bottom: 16px; height: 56px; padding: 0 20px 0 14px; border-radius: 999px; border: 0; background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 26px rgba(33,49,63,.3); cursor: pointer; }
.site .fab .ic { width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(from 0deg in oklch, var(--v-design), var(--v-school), var(--v-comm), var(--v-design)); position: relative; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.site .fab .ic::before, .site .fab .ic::after { content: ""; position: absolute; left: 9px; top: 13px; width: 10px; height: 2px; background: #FFFFFF; border-radius: 2px; }
.site .fab .ic::after { transform: rotate(90deg); }
.site .fab[aria-expanded="true"] .ic { transform: rotate(135deg); }
.site .fabwin { position: absolute; right: 16px; bottom: 84px; width: min(320px, calc(100cqi - 32px)); background: var(--card); border-radius: 18px; padding: 22px 20px 20px; box-shadow: 0 20px 44px rgba(33,49,63,.24); display: grid; gap: 12px; transform-origin: bottom right; animation: openSoft .5s cubic-bezier(.22,1,.36,1) both; overflow: hidden; }
.site .fabwin h2 { font-size: 1.2rem; }
.site .fabwin p { font-size: .84rem; color: var(--gray); }
.site .fabwin .btn { justify-self: stretch; text-align: center; }
.site .fabwin .links { display: flex; gap: 8px; flex-wrap: wrap; }
.site .fabwin .links a { font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--c); color: #FFFFFF; text-decoration: none; cursor: pointer; }

/* ---- refinement: strong weight contrast (900 vs 200–300) and generous whitespace ---- */
.site { font-weight: 300; letter-spacing: .04em; line-height: 2.05; }
.site .in { max-width: 1140px; padding-inline: clamp(24px, 7cqi, 104px); }
.site .hdin { padding-block: 22px; }
.site .logo { font-weight: 900; letter-spacing: .01em; }
.site nav.pc { gap: 40px; font-weight: 300; letter-spacing: .14em; }
.site .cta, .site .btn, .site .fab { font-weight: 700; letter-spacing: .08em; }
.site .hero { padding-block: clamp(80px, 13cqi, 176px) clamp(80px, 12cqi, 160px); gap: clamp(48px, 8cqi, 104px); }
.site .hero h1 { font-weight: 900; font-size: clamp(2.4rem, 7cqi, 5.2rem); line-height: 1.22; letter-spacing: -.02em; }
.site .hero p { margin-top: 36px; font-weight: 200; font-size: 1.12rem; letter-spacing: .16em; }
.site .tiles { gap: 16px; }
.site .tile { padding: 26px 30px; }
.site .tile b { font-weight: 900; font-size: 1.65rem; letter-spacing: -.01em; }
.site .tile span.ja { font-weight: 300; letter-spacing: .1em; }
.site section { padding-block: clamp(96px, 14cqi, 184px); }
.site .eyebrow { font-weight: 300; letter-spacing: .32em; font-size: .72rem; }
.site .h2 { font-weight: 900; margin-top: 18px; gap: 18px; letter-spacing: -.01em; }
.site .mission-card { padding: clamp(40px, 9cqi, 112px); }
.site .mission-card h2 { font-size: clamp(1.8rem, 4cqi, 2.6rem); }
.site .statement { margin-top: 48px; gap: 28px; font-weight: 300; line-height: 2.15; }
/* values: no boxes; a heavy keyword over a thin, wide-tracked remainder, separated by whitespace only */
.site .values { margin-top: clamp(72px, 11cqi, 128px); gap: clamp(56px, 8cqi, 72px) clamp(40px, 6cqi, 72px); }
.site .values > div { background: none; border-radius: 0; padding: 0; }
.site .values h3 { display: grid; gap: 10px; margin-bottom: 22px; }
.site .values .vk { font-size: clamp(2.5rem, 6.2cqi, 3.4rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; color: color-mix(in oklch, var(--ink) 72%, var(--card)); }
.site .values .vr { font-size: .9rem; font-weight: 400; letter-spacing: .2em; color: var(--body); }
.site .values p { font-weight: 400; font-size: .92rem; line-height: 2.05; max-width: 22em; color: var(--body); letter-spacing: .03em; }
.site .biz > .in > .h2 { font-size: clamp(1.9rem, 4.4cqi, 2.9rem); margin-bottom: 64px; }
.site .band { margin-bottom: 36px; grid-template-columns: 260px minmax(0, 1fr); }
.site .band-head { padding: 34px 30px; }
.site .band-head b { font-weight: 900; font-size: 1.9rem; letter-spacing: -.01em; }
.site .band-head span { font-weight: 300; letter-spacing: .1em; }
.site .band-items { padding: clamp(16px, 3cqi, 28px); gap: 8px 40px; }
.site .item { padding: clamp(18px, 3cqi, 28px) clamp(10px, 2cqi, 20px); gap: 12px; }
.site .item h3 { font-weight: 900; font-size: 1.06rem; }
.site .item p { font-weight: 300; line-height: 2; }
.site .st { font-weight: 400; letter-spacing: .08em; }
.site .company { gap: 28px; }
.site .company > div { padding: clamp(32px, 6cqi, 56px); gap: 18px; }
.site .company .h2 { font-size: 1.7rem; }
.site .company dl { gap: 18px; }
.site .company dt { font-weight: 300; letter-spacing: .2em; }
.site .company dd { font-weight: 400; }
.site .btn { padding: 16px 38px; }
.site footer { padding-block: 40px 104px; font-weight: 300; letter-spacing: .12em; }
@container (max-width: 820px) {
  .site .band { grid-template-columns: 1fr; }
  .site .band-head { align-content: start; gap: 6px; padding: 28px clamp(22px, 5cqi, 30px); }
}
@container (max-width: 760px) {
  .site nav.pc { display: none; }
  .site .burger { display: block; }
  .site .fabwrap { display: block; }
  .site .hero, .site .company { grid-template-columns: 1fr; }
    .site .values, .site .band-items { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after, .site .flow .ch { animation: none !important; transition: none !important; }
  
}

/* privacy policy page */
.site .policy h1 { font-size: clamp(1.8rem, 4cqi, 2.6rem); margin-bottom: 48px; }
.site .policy-body { display: grid; gap: 18px; max-width: 46em; color: var(--body); font-weight: 400; }
.site .policy-body h2 { font-size: 1.15rem; font-weight: 900; color: var(--ink); margin-top: 28px; }
.site .policy-body .end { text-align: right; margin-top: 24px; }