/* ===== Preloader (moved from inline ) ===== */ #preloader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;background:#050608;transition:opacity .7s ease,visibility .7s ease} #preloader.is-done{opacity:0;visibility:hidden;pointer-events:none} .pl__art{position:relative;width:230px;height:230px;display:grid;place-items:center} .pl__ring{position:absolute;inset:0;width:100%;height:100%;animation:plspin 8s linear infinite} .pl__spinner{position:absolute;inset:0;width:100%;height:100%;animation:plspin 1.5s cubic-bezier(.6,.15,.4,.85) infinite} .pl__word{font-family:"Shippori Mincho","Noto Serif JP",serif;font-weight:700;font-size:54px;letter-spacing:.14em;color:#fff;text-indent:.14em;opacity:0;animation:plword 1.1s ease .15s forwards} .pl__sub{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;font-size:12.5px;letter-spacing:.42em;text-indent:.42em;color:#7f8a9c;opacity:0;animation:plword 1.1s ease .4s forwards} .pl__en{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:13px;letter-spacing:.6em;text-indent:.6em;color:#566072;margin-top:-22px;opacity:0;animation:plword 1.1s ease .55s forwards} @keyframes plspin{to{transform:rotate(360deg)}} @keyframes plword{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.pl__ring,.pl__spinner{animation:none}.pl__word,.pl__sub,.pl__en{animation-duration:.01s}} /* ========================================================= 夢学科 LP – v2 Cinematic black + luminous orbs + mincho impact ========================================================= */ :root { --bg: #050608; --bg-2: #0a0d14; --bg-3: #11151f; --ink: #ffffff; --ink-soft: rgba(255,255,255,.78); --ink-mute: rgba(255,255,255,.55); --ink-dim: rgba(255,255,255,.38); --line: rgba(255,255,255,.10); --line-strong: rgba(255,255,255,.22); --glow-mint: #7dffba; --glow-blue: #5b9dff; --glow-purple: #b07bff; --glow-cyan: #6df2e9; --accent: #ff6024; /* CTA flame */ --accent-2: #ff8a4d; --hl: #c8ffde; /* highlight pale mint */ --font-mincho: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "YuMincho", serif; --font-jp-bold: "Zen Kaku Gothic New", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif; --font-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif; --font-en: "Inter", "Helvetica Neue", sans-serif; --font-en-serif: "Cormorant Garamond", "Times New Roman", serif; --pad-x: 22px; --pad-x-lg: 80px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.85; font-size: 14.5px; letter-spacing: .03em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; padding-bottom: 100px; /* sticky CTA space */ overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } em { font-style: normal; } strong { font-weight: 700; color: var(--ink); } .sp-only { display: inline; } @media (min-width: 720px) { .sp-only { display: none; } } .serif { font-family: var(--font-mincho); font-weight: 600; font-feature-settings: "palt"; } .hl { background: linear-gradient(transparent 65%, rgba(67,164,255,.42) 65%); padding: 0 .15em; font-weight: 700; } /* ============ ORBS / FX ============ */ .orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); opacity: .9; } .orb::before, .orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; } .orb::before { background: radial-gradient(circle at 50% 50%, transparent 58%, var(--glow-mint) 62%, var(--glow-blue) 67%, transparent 72%); filter: blur(3px); } .orb::after { background: radial-gradient(circle at 30% 30%, rgba(125,255,186,.06), transparent 65%); } .orb--1 { width: 130vw; height: 130vw; max-width: 1100px; max-height: 1100px; top: -20vw; left: 50%; transform: translateX(-50%); } .orb--2 { width: 90vw; height: 90vw; max-width: 800px; max-height: 800px; bottom: -45vw; right: -30vw; opacity: .55; } .orb--2::before { background: radial-gradient(circle at 50% 50%, transparent 58%, var(--glow-purple) 62%, var(--glow-blue) 67%, transparent 72%); } .orb--lg { width: 130vw; height: 130vw; max-width: 1200px; max-height: 1200px; opacity: .55; } .orb--green::before { background: radial-gradient(circle at 50% 50%, transparent 58%, var(--glow-mint) 62%, var(--glow-cyan) 67%, transparent 72%); } .orb--blue::before { background: radial-gradient(circle at 50% 50%, transparent 58%, var(--glow-blue) 62%, var(--glow-purple) 67%, transparent 72%); } .orb--xl { width: 180vw; height: 180vw; max-width: 1600px; max-height: 1600px; opacity: .45; } .grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 100% 70% at 50% 50%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 50%, #000 30%, transparent 75%); } .particles span { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; background: var(--glow-mint); border-radius: 50%; box-shadow: 0 0 8px var(--glow-mint), 0 0 16px var(--glow-blue); opacity: var(--s); animation: twinkle 3.4s ease-in-out infinite; animation-delay: var(--d); } @keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: var(--s, .8); transform: scale(1); } } /* ============ NAV ============ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad-x); background: rgba(5,6,8,.65); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); } .nav__brand { display: inline-flex; align-items: baseline; gap: 8px; } .nav__brand__jp { font-family: var(--font-mincho); font-weight: 700; font-size: 19px; letter-spacing: .04em; background: linear-gradient(180deg, #fff 50%, rgba(125,255,186,.85) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .nav__brand__en { font-family: var(--font-en); font-size: 9px; font-weight: 600; letter-spacing: .25em; color: var(--ink-mute); } .nav__cta { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; font-family: var(--font-jp-bold); font-weight: 700; font-size: 12px; padding: 10px 16px; border-radius: 999px; letter-spacing: .04em; transition: transform .15s, box-shadow .15s; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(255,96,36,.35); } .nav__cta:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 10px 24px rgba(255,96,36,.5); } @media (max-width: 380px) { .nav__cta span { font-size: 11px; } } /* ============ HERO ============ */ .hero { position: relative; min-height: 100svh; padding: 110px var(--pad-x) 70px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: var(--bg); } .hero__bg { position: absolute; inset: 0; pointer-events: none; } .hero__wave { position: absolute; left: 0; right: 0; bottom: 0; width: 200%; height: 60%; transform: translateX(-25%); } .hero__inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; width: 100%; } .hero__tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: 10.5px; font-weight: 600; letter-spacing: .25em; color: var(--ink-soft); padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255,255,255,.02); margin-bottom: 28px; } .hero__tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--glow-mint); box-shadow: 0 0 6px var(--glow-mint), 0 0 12px var(--glow-mint); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.85); } } .hero__pre { font-family: var(--font-body); font-size: 11.5px; letter-spacing: .12em; color: var(--ink-mute); margin-bottom: 18px; } .hero__title { font-family: var(--font-mincho); font-weight: 700; line-height: 1.05; margin-bottom: 28px; letter-spacing: .01em; } .hero__title__kicker { display: block; font-family: var(--font-mincho); font-weight: 500; font-size: clamp(17px, 4.8vw, 24px); letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.55; } .hero__title__kicker .glow-mint { background: linear-gradient(180deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } .hero__title__sub { display: block; font-family: var(--font-mincho); font-weight: 500; font-size: clamp(15px, 4vw, 20px); font-feature-settings: "palt"; color: var(--ink-mute); margin-top: 20px; letter-spacing: .08em; line-height: 1.7; } .hero__title__sub em { font-style: normal; font-weight: 700; background: linear-gradient(180deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.15em; } .hero__title__main { display: block; font-size: clamp(48px, 14vw, 110px); letter-spacing: .02em; font-weight: 700; white-space: nowrap; line-height: 1.1; } .hero__title__main .glow { display: inline-block; background: linear-gradient(180deg, #fff 0%, #fff 40%, var(--glow-mint) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 60px rgba(125,255,186,.55), 0 0 120px rgba(91,157,255,.35); filter: drop-shadow(0 0 30px rgba(125,255,186,.4)); } .hero__lead { display: none; } .hero__launch { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px; margin-bottom: 36px; border: 1px solid var(--line-strong); background: linear-gradient(135deg, rgba(125,255,186,.06), rgba(91,157,255,.04), rgba(176,123,255,.05)); border-radius: 16px; position: relative; overflow: hidden; } .hero__launch::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glow-mint), var(--glow-blue), var(--glow-purple), transparent); } .launch__chip, .launch__date { display: flex; flex-direction: column; gap: 6px; } .launch__en, .launch__date__en { font-family: var(--font-en); font-size: 9.5px; font-weight: 700; letter-spacing: .22em; color: var(--glow-mint); } .launch__date__en { color: var(--glow-blue); } .launch__jp, .launch__date__jp { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(17px, 5vw, 22px); color: var(--ink); line-height: 1.2; } .launch__jp em, .launch__date__jp em { font-style: normal; background: linear-gradient(180deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; } .hero__sub { font-size: 13.5px; line-height: 2.1; color: var(--ink-soft); margin-bottom: 36px; letter-spacing: .05em; } .hero__ctas { display: flex; flex-direction: column; gap: 12px; margin-bottom: 56px; } .hero__scroll { display: flex; align-items: center; gap: 14px; font-family: var(--font-en); font-size: 9.5px; letter-spacing: .3em; color: var(--ink-dim); } .hero__scroll__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); position: relative; } .hero__scroll__line::after { content: ""; position: absolute; left: 0; top: 0; width: 30%; height: 100%; background: linear-gradient(90deg, var(--glow-mint), transparent); animation: scrollDot 2.2s ease-in-out infinite; } @keyframes scrollDot { 0% { transform: translateX(-100%); } 100% { transform: translateX(333%); } } /* ============ BUTTONS ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-jp-bold); font-weight: 700; font-size: 14px; padding: 16px 24px; border-radius: 999px; letter-spacing: .06em; border: none; text-align: center; line-height: 1.3; transition: transform .2s, box-shadow .25s; position: relative; overflow: hidden; } .btn--primary { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 10px 28px rgba(255,96,36,.40), 0 0 40px rgba(255,96,36,.20); } .btn--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.20), transparent 40%); pointer-events: none; } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 14px 36px rgba(255,96,36,.55), 0 0 60px rgba(255,96,36,.30); } .btn--ghost { background: rgba(255,255,255,.02); color: var(--ink); border: 1px solid var(--line-strong); backdrop-filter: blur(8px); } .btn--ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.40); } .btn--lg { padding: 18px 28px; font-size: 15px; } .btn--xl { padding: 22px 32px; font-size: 17px; } .btn--block { display: flex; width: 100%; } /* ============ SECTION SHARED ============ */ section { padding: 100px var(--pad-x); position: relative; } .eyebrow { display: inline-block; font-family: var(--font-en); font-size: 10.5px; font-weight: 600; letter-spacing: .28em; color: var(--glow-mint); margin-bottom: 18px; } /* ============ EMPATHY ============ */ .empathy { background: var(--bg); } .empathy__head { margin-bottom: 48px; } .empathy__title { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(30px, 8vw, 48px); line-height: 1.35; letter-spacing: .03em; margin-bottom: 18px; } .empathy__title .serif { color: var(--glow-mint); text-shadow: 0 0 20px rgba(125,255,186,.4); } .empathy__lead { font-size: 14px; color: var(--ink-mute); line-height: 2; } .empathy__quotes { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 56px; } .quote { position: relative; padding: 22px 22px 22px 26px; background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform .25s, border-color .25s; } .quote::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(180deg, var(--glow-mint), var(--glow-blue)); opacity: .7; } .quote:hover { transform: translateX(2px); border-color: rgba(125,255,186,.30); } .quote__no { display: inline-block; font-family: var(--font-en-serif); font-style: italic; font-size: 14px; color: var(--glow-mint); margin-bottom: 6px; letter-spacing: .05em; } .quote blockquote { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(18px, 5.2vw, 22px); line-height: 1.55; color: var(--ink); letter-spacing: .04em; } .quote .hl { background: linear-gradient(transparent 65%, rgba(67,164,255,.38) 65%); } .empathy__pivot { text-align: center; padding-top: 48px; border-top: 1px dashed var(--line-strong); position: relative; } .empathy__pivot__small { font-family: var(--font-mincho); font-size: 15px; color: var(--ink-mute); margin-bottom: 14px; letter-spacing: .12em; } .empathy__pivot__big { font-family: var(--font-mincho); font-size: clamp(30px, 9vw, 52px); font-weight: 600; line-height: 1.35; letter-spacing: .04em; margin-bottom: 28px; color: var(--ink); } .empathy__pivot__big .serif { background: linear-gradient(180deg, #fff 40%, var(--glow-mint) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 20px rgba(125,255,186,.3)); } .empathy__pivot__copy { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(15px, 4.4vw, 19px); line-height: 2; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 36px; max-width: 32em; margin-left: auto; margin-right: auto; } .empathy__pivot__answer { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; padding: 20px 26px; background: linear-gradient(135deg, rgba(125,255,186,.10), rgba(91,157,255,.06)); border: 1px solid var(--line-strong); border-radius: 999px; position: relative; overflow: hidden; } .empathy__pivot__answer::before { content: ""; position: absolute; inset: -1px; border-radius: 999px; padding: 1px; background: linear-gradient(135deg, var(--glow-mint), var(--glow-blue), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .answer__line { display: inline-block; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--glow-mint)); } .answer__text { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(18px, 5vw, 24px); color: var(--ink); letter-spacing: .04em; } .answer__text em { background: linear-gradient(135deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; } /* ============ ABOUT ============ */ .about { background: var(--bg); position: relative; overflow: hidden; } .about__bg { position: absolute; inset: 0; pointer-events: none; } .about__bg .orb { top: 50%; left: 50%; transform: translate(-50%, -50%); } .about__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; } .about__title { font-family: var(--font-mincho); font-weight: 600; line-height: 1; margin-bottom: 48px; letter-spacing: .02em; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .jumbo { font-size: clamp(64px, 22vw, 180px); line-height: 1; letter-spacing: .04em; background: linear-gradient(180deg, #fff 30%, var(--glow-mint) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; filter: drop-shadow(0 0 40px rgba(125,255,186,.35)); white-space: nowrap; } .about__title__sub { display: block; font-size: clamp(20px, 5.5vw, 28px); font-weight: 500; color: var(--ink-soft); letter-spacing: .06em; } .about__body { display: flex; flex-direction: column; gap: 32px; } .about__manifesto { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(22px, 6vw, 32px); line-height: 1.6; color: var(--ink); letter-spacing: .03em; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .about__copy { font-family: var(--font-body); font-size: 15px; line-height: 2.1; color: var(--ink-soft); letter-spacing: .04em; } .about__copy--strong { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(20px, 5vw, 28px); line-height: 1.5; color: var(--ink); margin-top: 12px; } .about__copy--strong .serif { background: linear-gradient(135deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } /* ABOUT group photo */ .about__photo { position: relative; z-index: 2; max-width: 1080px; margin: 72px auto 0; padding: 0 24px; } .about__photo__frame { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); } .about__photo__frame img { display: block; width: 100%; height: auto; } .about__photo__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,12,0) 45%, rgba(5,7,12,.78) 100%); pointer-events: none; } .about__photo__cap { position: absolute; left: 32px; bottom: 26px; right: 32px; display: flex; flex-direction: column; gap: 6px; z-index: 2; } .about__photo__cap-en { font-family: var(--font-en-serif); font-style: italic; font-size: 13px; letter-spacing: .18em; color: var(--glow-mint); } .about__photo__cap-jp { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(16px, 3.6vw, 22px); letter-spacing: .05em; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.6); } @media (max-width: 720px) { .about__photo { margin-top: 48px; padding: 0 16px; } .about__photo__frame { border-radius: 14px; } .about__photo__cap { left: 18px; right: 18px; bottom: 18px; } } /* ===== ABOUT — light surface variant ===== */ .about--light { background: radial-gradient(120% 90% at 50% -10%, #ffffff, transparent 60%), linear-gradient(180deg, #eef0f4 0%, #e7eaef 100%); } .about--light .about__bg { display: none; } .about--light .eyebrow { color: #d2691a; } .about--light .about__title__tail { color: #11151d !important; } .about--light .gradient-text { background: linear-gradient(180deg, #1f9e6e 0%, #2f6fe0 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; filter: drop-shadow(0 2px 12px rgba(47,111,224,.16)) !important; } .about--light .about__copy { color: #2a2f3a !important; } .about--light .about__copy--strong { color: #11151d !important; } .about--light .about__copy--strong .serif { background: linear-gradient(135deg, #1f9e6e, #2f6fe0) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } .about--light .about__photo__frame { border-color: rgba(17,21,29,.10); box-shadow: 0 24px 60px rgba(17,21,29,.16); } /* ============ FEATURES ============ */ .features { background: var(--bg-2); } .features__head { margin-bottom: 64px; text-align: center; } .features__title { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(30px, 8vw, 48px); line-height: 1.3; letter-spacing: .04em; } .features__title .serif { background: linear-gradient(180deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.4em; margin: 0 .1em; } .feature { position: relative; padding: 36px 24px; margin-bottom: 28px; background: linear-gradient(160deg, rgba(255,255,255,.025), rgba(255,255,255,.005)); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; } .feature::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, transparent 5%, var(--glow-mint), var(--glow-blue), var(--glow-purple), transparent 95%); opacity: .8; } .feature::after { content: ""; position: absolute; top: -100px; right: -100px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(125,255,186,.10), transparent 70%); pointer-events: none; } .feature--alt::after { background: radial-gradient(circle, rgba(91,157,255,.10), transparent 70%); } .feature__head { margin-bottom: 28px; } .feature__no { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; } .feature__no__big { font-family: var(--font-en-serif); font-weight: 500; font-style: italic; font-size: 56px; line-height: .9; letter-spacing: -.02em; background: linear-gradient(180deg, #fff, var(--glow-mint)); -webkit-background-clip: text; background-clip: text; color: transparent; } .feature__no__en { font-family: var(--font-en); font-size: 9.5px; font-weight: 600; letter-spacing: .3em; color: var(--ink-dim); } .feature__kicker { font-family: var(--font-en); font-size: 10.5px; font-weight: 600; letter-spacing: .25em; color: var(--glow-mint); text-transform: uppercase; margin-bottom: 10px; } .feature--alt .feature__kicker { color: var(--glow-blue); } .feature__title { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(22px, 6.2vw, 30px); line-height: 1.5; letter-spacing: .03em; color: var(--ink); } .feature__title .serif { font-size: 1.1em; font-weight: 700; display: inline-block; } .feature__title .hl { background: linear-gradient(transparent 65%, rgba(67,164,255,.42) 65%); } .feature__body { display: flex; flex-direction: column; gap: 40px; } .feature__viz { background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 16px; padding: 22px; position: relative; z-index: 1; } .feature__desc { font-size: 14.5px; line-height: 2.1; color: var(--ink-soft); letter-spacing: .04em; position: relative; z-index: 1; } /* feature photo (real image fills the viz) */ .feature__viz--photo { padding: 0; overflow: hidden; } .feature__photo { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 15px; } /* feature 01 placeholder */ .viz-placeholder { position: relative; aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle at 50% 40%, rgba(125,255,186,.10), transparent 60%), repeating-linear-gradient(45deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 14px, rgba(125,255,186,.04) 14px, rgba(125,255,186,.04) 28px); border: 1px dashed rgba(125,255,186,.30); border-radius: 12px; color: var(--glow-mint); } .viz-placeholder__icon { width: 56px; height: 56px; opacity: .8; } .viz-placeholder__label { font-family: var(--font-en); font-size: 10.5px; font-weight: 700; letter-spacing: .25em; color: var(--glow-mint); } .viz-placeholder__note { font-family: var(--font-jp-bold); font-size: 11.5px; color: var(--ink-mute); letter-spacing: .04em; margin-top: -4px; } /* chat viz */ .chat { display: flex; flex-direction: column; gap: 10px; } .chat__row { display: flex; align-items: flex-end; gap: 8px; } .chat__row--out { flex-direction: row-reverse; } .chat__name { font-family: var(--font-en); font-size: 9px; letter-spacing: .15em; color: var(--ink-dim); padding-bottom: 8px; } .chat__bubble { font-family: var(--font-body); font-weight: 500; font-size: 13px; padding: 9px 14px; border-radius: 14px; max-width: 75%; line-height: 1.5; } .chat__row--in .chat__bubble { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); color: var(--ink); border-bottom-left-radius: 4px; } .chat__row--out .chat__bubble { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 4px 12px rgba(255,96,36,.3); } /* orbit viz */ .orbit-viz { position: relative; aspect-ratio: 1; max-width: 360px; margin: 0 auto; } .orbit-viz__center { position: absolute; inset: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: radial-gradient(circle, rgba(91,157,255,.4), rgba(91,157,255,.1) 60%, transparent); border: 1px solid var(--glow-blue); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 3; box-shadow: 0 0 30px rgba(91,157,255,.5), inset 0 0 20px rgba(125,255,186,.2); } .orbit-viz__center__jp { font-family: var(--font-mincho); font-weight: 700; font-size: 26px; color: #fff; line-height: 1; } .orbit-viz__center__en { font-family: var(--font-en-serif); font-style: italic; font-size: 11px; color: var(--glow-mint); letter-spacing: .08em; margin-top: 2px; } .orbit-viz__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255,255,255,.10); animation: spin 60s linear infinite; } .orbit-viz__ring--2 { inset: 15%; animation-duration: 40s; animation-direction: reverse; border-style: solid; border-color: rgba(125,255,186,.1); } @keyframes spin { to { transform: rotate(360deg); } } .orbit-viz__node { position: absolute; top: 50%; left: 50%; width: 96px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; transform: translate(-50%, -50%) rotate(calc(72deg * var(--i) - 90deg)) translateY(calc(min(38vw, 145px) * -1)) rotate(calc(72deg * var(--i) * -1 + 90deg)); z-index: 2; } .orbit-viz__node::before { content: ""; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle, rgba(125,255,186,.4), rgba(91,157,255,.15) 60%, transparent); border: 1.5px solid var(--glow-mint); margin-bottom: 4px; box-shadow: 0 0 16px rgba(125,255,186,.4); } .orbit-viz__node:nth-child(4)::before { border-color: var(--glow-purple); box-shadow: 0 0 16px rgba(176,123,255,.4); background: radial-gradient(circle, rgba(176,123,255,.4), transparent 70%); } .orbit-viz__node:nth-child(5)::before { border-color: var(--glow-blue); box-shadow: 0 0 16px rgba(91,157,255,.4); background: radial-gradient(circle, rgba(91,157,255,.4), transparent 70%); } .orbit-viz__node:nth-child(7)::before { border-color: var(--glow-cyan); box-shadow: 0 0 16px rgba(109,242,233,.4); background: radial-gradient(circle, rgba(109,242,233,.4), transparent 70%); } .orbit-viz__node:nth-child(8)::before { border-color: #ffb84d; box-shadow: 0 0 16px rgba(255,184,77,.4); background: radial-gradient(circle, rgba(255,184,77,.4), transparent 70%); } .orbit-viz__node__no { font-family: var(--font-en); font-size: 9px; font-weight: 700; color: var(--glow-mint); letter-spacing: .15em; } .orbit-viz__node__label { font-family: var(--font-jp-bold); font-weight: 700; font-size: 11px; color: var(--ink); line-height: 1.4; letter-spacing: .02em; } /* project viz */ .proj-viz { display: flex; flex-direction: column; gap: 10px; } .proj-step { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; position: relative; } .proj-step__no { font-family: var(--font-en); font-size: 9.5px; font-weight: 700; letter-spacing: .2em; color: var(--ink-dim); flex-shrink: 0; width: 64px; } .proj-step__label { font-family: var(--font-mincho); font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: .05em; } .proj-step--hot { background: linear-gradient(135deg, rgba(255,96,36,.18), rgba(255,138,77,.08)); border-color: rgba(255,96,36,.45); box-shadow: 0 0 24px rgba(255,96,36,.2); } .proj-step--hot .proj-step__no { color: var(--accent-2); } .proj-step--hot .proj-step__label { background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .proj-arrow { align-self: center; font-family: var(--font-en); font-size: 18px; color: var(--glow-mint); transform: rotate(90deg); margin: -4px 0; } /* Feature 02 - imgful layout (uses ref image directly) */ .feature--imgful .feature__head { margin-bottom: 28px; } .feature__image { margin: 0 -24px 24px; position: relative; z-index: 1; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; background: #000; } .feature__image img { width: 100%; height: auto; display: block; } /* ============ TOOLS (in feature 02) ============ */ .tools { position: relative; z-index: 1; margin-top: 36px; padding: 28px 22px; background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .tools::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, transparent 5%, var(--glow-mint), var(--glow-blue), var(--glow-purple), transparent 95%); opacity: .6; } .tools__head { margin-bottom: 24px; } .tools__kicker { display: block; font-family: var(--font-mincho); font-weight: 500; font-size: 12px; color: var(--glow-mint); letter-spacing: .1em; margin-bottom: 10px; } .tools__title { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(18px, 5vw, 26px); line-height: 1.55; color: var(--ink); letter-spacing: .03em; } .tools__title .serif { background: linear-gradient(180deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } .tools__grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .tool { --c: #fff; display: flex; align-items: center; gap: 12px; padding: 12px 12px; background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 12px; position: relative; overflow: hidden; transition: transform .2s, border-color .25s, background .25s; } .tool::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--c) 14%, transparent), transparent 60%); pointer-events: none; } .tool:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 50%, var(--line)); } .tool__mark { flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; background: color-mix(in srgb, var(--c) 18%, #000); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: 800; font-size: 16px; color: var(--c); letter-spacing: -.03em; position: relative; z-index: 1; } .tool__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; position: relative; z-index: 1; } .tool__name { font-family: var(--font-en); font-weight: 600; font-size: 12.5px; color: var(--ink); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tool__use { font-family: var(--font-jp-bold); font-weight: 500; font-size: 10.5px; color: var(--ink-mute); letter-spacing: .02em; } .tools__note { margin-top: 18px; font-size: 10.5px; color: var(--ink-dim); letter-spacing: .03em; } /* ============ TIMETABLE ============ */ .timetable { position: relative; margin-top: 36px; padding: 36px 0 0; border-top: 1px dashed var(--line-strong); } .timetable__head { text-align: center; margin-bottom: 32px; } .timetable__kicker { display: inline-block; font-family: var(--font-en); font-size: 10.5px; font-weight: 700; letter-spacing: .28em; color: var(--glow-blue); margin-bottom: 14px; text-transform: uppercase; } .timetable__title { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(26px, 7vw, 38px); line-height: 1.4; letter-spacing: .04em; margin-bottom: 12px; } .timetable__title .serif { background: linear-gradient(180deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } .timetable__lead { font-size: 13px; color: var(--ink-mute); line-height: 1.95; } .timetable__wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--pad-x) * -1); padding: 0 var(--pad-x) 4px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .timetable__wrap::-webkit-scrollbar { height: 6px; } .timetable__wrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; } .timetable__table { width: 100%; min-width: 580px; border-collapse: separate; border-spacing: 4px; font-family: var(--font-jp-bold); } .timetable__table thead th { padding: 0; } .timetable__table thead th:not(.tt-corner) { text-align: center; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: 8px; padding: 12px 6px; } .tt-day__num { display: block; font-family: var(--font-en); font-weight: 700; font-size: 10px; letter-spacing: .15em; color: var(--glow-mint); margin-bottom: 3px; } .tt-day__jp { display: block; font-family: var(--font-mincho); font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: .04em; } .tt-corner { background: transparent !important; border: none !important; } .tt-corner__en { display: inline-block; font-family: var(--font-en); font-size: 9px; font-weight: 700; letter-spacing: .2em; color: var(--ink-dim); writing-mode: horizontal-tb; padding: 8px; } .tt-period { width: 38px; background: transparent; text-align: center; vertical-align: middle; } .tt-period__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-family: var(--font-en-serif); font-style: italic; font-weight: 500; font-size: 18px; color: var(--glow-mint); border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(255,255,255,.02); } .tt-cell { --cat-color: var(--glow-mint); position: relative; padding: 0; background: radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--cat-color) 16%, transparent), transparent 70%), rgba(255,255,255,.025); border: 1px solid color-mix(in srgb, var(--cat-color) 25%, var(--line)); border-radius: 8px; text-align: center; vertical-align: middle; transition: transform .2s, border-color .25s; overflow: hidden; } .tt-cell::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cat-color), transparent); opacity: .7; } .tt-cell:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--cat-color) 50%, var(--line)); } .tt-cell__label { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 8px 6px; font-family: var(--font-jp-bold); font-weight: 700; font-size: 11px; line-height: 1.4; color: var(--ink); letter-spacing: .02em; } /* Category colors */ .tt-cell[data-cat="video"], .tt-cell[data-cat="movie"] { --cat-color: var(--glow-mint); } .tt-cell[data-cat="sns"] { --cat-color: #ff8ac4; } .tt-cell[data-cat="web"], .tt-cell[data-cat="seo"] { --cat-color: var(--glow-blue); } .tt-cell[data-cat="graphic"] { --cat-color: var(--glow-purple); } .tt-cell[data-cat="ai"] { --cat-color: var(--glow-cyan); } .tt-cell[data-cat="biz"] { --cat-color: #ffb84d; } .tt-cell[data-cat="dream"] { --cat-color: var(--accent); background: radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), rgba(255,96,36,.04); } .tt-cell[data-cat="dream"] .tt-cell__label { font-family: var(--font-mincho); color: #fff; } .timetable__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); } .timetable__legend li { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-jp-bold); font-weight: 500; font-size: 11px; color: var(--ink-mute); letter-spacing: .03em; } .legend__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--glow-mint)); box-shadow: 0 0 8px var(--c, var(--glow-mint)); } .timetable__legend li[data-cat="video"] .legend__dot { --c: var(--glow-mint); } .timetable__legend li[data-cat="sns"] .legend__dot { --c: #ff8ac4; } .timetable__legend li[data-cat="web"] .legend__dot { --c: var(--glow-blue); } .timetable__legend li[data-cat="graphic"] .legend__dot { --c: var(--glow-purple); } .timetable__legend li[data-cat="ai"] .legend__dot { --c: var(--glow-cyan); } .timetable__legend li[data-cat="biz"] .legend__dot { --c: #ffb84d; } .timetable__legend li[data-cat="dream"] .legend__dot { --c: var(--accent); } /* ============ STUDENTS ============ */ .students { background: var(--bg); position: relative; } .students__head { margin-bottom: 56px; text-align: center; } .students__title { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(28px, 7.5vw, 44px); line-height: 1.4; letter-spacing: .04em; margin-bottom: 16px; } .students__title .serif { background: linear-gradient(180deg, #fff, var(--glow-mint)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.3em; margin-right: .05em; } .students__lead { font-size: 13.5px; color: var(--ink-mute); line-height: 2; } .students__grid { display: grid; grid-template-columns: 1fr; gap: 24px; } .student { background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: transform .25s, border-color .25s; } .student:hover { transform: translateY(-3px); border-color: rgba(125,255,186,.25); } .student__photo { position: relative; aspect-ratio: 4/3; background: #0a0c12; overflow: hidden; } .student__photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85) saturate(.95); } .student__photo--ph { background: repeating-linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.025) 6px, rgba(255,255,255,.055) 6px, rgba(255,255,255,.055) 12px); display: flex; align-items: center; justify-content: center; } .student__photo--ph::after { content: attr(data-ph); font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--ink-dim); } .student__photo--alt { background: repeating-linear-gradient(45deg, rgba(91,157,255,.08), rgba(91,157,255,.08) 6px, rgba(91,157,255,.16) 6px, rgba(91,157,255,.16) 12px); } .student__badge { position: absolute; top: 14px; left: 14px; font-family: var(--font-jp-bold); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; padding: 5px 10px; background: rgba(0,0,0,.7); border: 1px solid var(--line-strong); color: var(--glow-mint); border-radius: 4px; backdrop-filter: blur(8px); } .student__badge--grad { color: var(--glow-purple); border-color: rgba(176,123,255,.35); } .student__body { padding: 24px 22px 26px; } .student__dream { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; padding: 14px 16px; background: rgba(125,255,186,.05); border-left: 2px solid var(--glow-mint); border-radius: 4px; } .student__dream__label { font-family: var(--font-en); font-size: 9.5px; font-weight: 700; letter-spacing: .28em; color: var(--glow-mint); } .student__dream__text { font-family: var(--font-mincho); font-weight: 600; font-size: 17px; color: var(--ink); line-height: 1.5; letter-spacing: .03em; } .student__name { font-family: var(--font-jp-bold); font-weight: 900; font-size: 22px; color: var(--ink); margin-bottom: 14px; letter-spacing: -.01em; } .student__name small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-mute); margin-top: 4px; letter-spacing: .08em; } .student__story { font-size: 13px; line-height: 2; color: var(--ink-soft); margin-bottom: 18px; } .student__kpis { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); } .student__kpis li { display: flex; flex-direction: column; gap: 4px; } .kpi__num { font-family: var(--font-en); font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: var(--ink); line-height: 1; } .kpi__num small { font-size: 11px; font-weight: 500; color: var(--ink-mute); margin-left: 2px; } .kpi__lbl { font-size: 10.5px; color: var(--ink-mute); letter-spacing: .08em; } .students__note { margin-top: 28px; text-align: center; font-size: 11px; color: var(--ink-dim); letter-spacing: .04em; } /* ============ STUDENTS — REVISED ============ */ .students__tab { display: flex; align-items: center; gap: 16px; margin: 0 0 36px; padding-top: 16px; } .students__tab__label { font-family: var(--font-en-serif); font-style: italic; font-size: 26px; font-weight: 500; background: linear-gradient(180deg, #fff, var(--glow-mint)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .02em; } .students__tab__jp { font-family: var(--font-mincho); font-weight: 700; font-size: 16px; letter-spacing: .12em; color: var(--ink); padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 4px; background: rgba(255,255,255,.02); } .students__tab__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); } .students__tab--grad { margin-top: 72px; } .students__tab--grad .students__tab__label { background: linear-gradient(180deg, #fff, var(--glow-purple)); -webkit-background-clip: text; background-clip: text; } .students__tab--grad .students__tab__jp { color: #fff; border-color: rgba(176,123,255,.4); background: rgba(176,123,255,.06); } /* Updated current student card */ .student .student__photo { aspect-ratio: 4/5; background: radial-gradient(ellipse at 50% 30%, rgba(91,157,255,.18), transparent 65%), radial-gradient(ellipse at 50% 100%, rgba(125,255,186,.12), transparent 70%), #0a0c14; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .student .student__photo img { width: auto; max-width: 92%; max-height: 96%; height: 96%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); } .student__photo__overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 35% at 50% 95%, rgba(125,255,186,.18), transparent 70%); pointer-events: none; } .student__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .student__course { display: inline-block; font-family: var(--font-jp-bold); font-weight: 700; font-size: 10.5px; letter-spacing: .08em; padding: 5px 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--ink-soft); border-radius: 4px; } .student__name { font-family: var(--font-mincho); font-weight: 700; font-size: 26px; letter-spacing: .04em; } .student__quote { margin-top: 16px; padding: 16px 18px; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 10px; font-family: var(--font-mincho); font-weight: 500; font-size: 13px; line-height: 1.95; color: var(--ink-soft); letter-spacing: .03em; position: relative; } .quote-mark { font-family: var(--font-en-serif); font-style: italic; font-weight: 500; font-size: 22px; color: var(--glow-mint); vertical-align: -.12em; margin-right: 2px; } .quote-mark--end { margin-left: 2px; margin-right: 0; } /* Graduate feature card */ .student-feature { position: relative; border: 1px solid var(--line-strong); border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, rgba(176,123,255,.06), rgba(91,157,255,.04)); isolation: isolate; } .student-feature::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, transparent 5%, var(--glow-purple), var(--glow-blue), transparent 95%); z-index: 2; } .student-feature__photos { display: grid; grid-template-columns: 1fr; gap: 4px; position: relative; } .student-feature__hero { position: relative; aspect-ratio: 3/2; overflow: hidden; background: #000; } .student-feature__hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .student-feature__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.5) 100%); pointer-events: none; } .student-feature__sub { position: relative; aspect-ratio: 5/3; overflow: hidden; background: #000; } .student-feature__sub img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.92); } .student-feature__badge { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-jp-bold); font-weight: 700; font-size: 11px; letter-spacing: .12em; padding: 7px 14px; background: rgba(0,0,0,.55); border: 1px solid rgba(176,123,255,.45); color: var(--glow-purple); border-radius: 4px; backdrop-filter: blur(12px); } .student-feature__body { padding: 32px 24px 36px; } .student-feature__course { display: inline-block; font-family: var(--font-en); font-size: 10px; font-weight: 700; letter-spacing: .22em; color: var(--glow-purple); margin-bottom: 12px; text-transform: uppercase; } .student-feature__dream { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; padding: 18px 20px; background: rgba(176,123,255,.06); border-left: 2px solid var(--glow-purple); border-radius: 4px; } .student-feature__dream__label { font-family: var(--font-en); font-size: 10px; font-weight: 700; letter-spacing: .28em; color: var(--glow-purple); } .student-feature__dream__text { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(20px, 5.5vw, 26px); color: var(--ink); line-height: 1.55; letter-spacing: .03em; } .student-feature__name { font-family: var(--font-mincho); font-weight: 700; font-size: 30px; letter-spacing: .04em; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 14px; } .student-feature__story { font-size: 13.5px; line-height: 2.1; color: var(--ink-soft); margin-bottom: 16px; letter-spacing: .03em; } .student-feature__story:last-of-type { margin-bottom: 24px; } .student-feature__story strong { color: var(--glow-mint); font-weight: 700; } .student-feature__kpis { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); } .student-feature__kpis li { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 8px; text-align: center; } .student-feature__kpis .kpi__num { font-family: var(--font-mincho); font-weight: 700; font-size: 18px; background: linear-gradient(180deg, #fff, var(--glow-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; } .student-feature__kpis .kpi__lbl { font-size: 9.5px; letter-spacing: .08em; } /* ============ MESSAGE ============ */ .message { background: var(--bg); position: relative; overflow: hidden; } .message__bg { position: absolute; inset: 0; pointer-events: none; } .message__bg .orb { top: 50%; left: -30%; transform: translateY(-50%); } .message__inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; } .message__from { font-family: var(--font-mincho); font-weight: 500; font-size: 13px; color: var(--ink-mute); letter-spacing: .1em; margin-bottom: 32px; } .message__layout { display: flex; flex-direction: column; gap: 28px; } .message__photo { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; max-width: 320px; margin: 0 auto; border: 1px solid var(--line-strong); } .message__photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.95) contrast(1.05); } .message__photo__caption { position: absolute; left: 16px; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: rgba(0,0,0,.55); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 8px; } .message__photo__role { font-family: var(--font-en); font-size: 9.5px; font-weight: 600; letter-spacing: .22em; color: var(--glow-mint); } .message__photo__name { font-family: var(--font-mincho); font-weight: 700; font-size: 18px; color: #fff; letter-spacing: .04em; } .message__title { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(28px, 8vw, 44px); line-height: 1.5; letter-spacing: .04em; margin-bottom: 32px; } .message__title .serif { background: linear-gradient(180deg, #fff 30%, var(--glow-blue) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 20px rgba(91,157,255,.3)); } .message__copy { display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; } .message__copy p { font-family: var(--font-mincho); font-weight: 500; font-size: 16px; line-height: 2; color: var(--ink-soft); letter-spacing: .05em; } .message__copy--strong { font-weight: 700 !important; font-size: 18px !important; color: var(--ink) !important; padding-top: 20px; border-top: 1px solid var(--line); } .message__sign { display: flex; flex-direction: column; gap: 4px; padding-top: 24px; border-top: 1px solid var(--line); } .message__sign__role { font-family: var(--font-en); font-size: 10px; font-weight: 600; letter-spacing: .22em; color: var(--ink-mute); } .message__sign__name { font-family: var(--font-mincho); font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: .04em; } /* ============ TEACHERS (blob style) ============ */ .teachers { background: var(--bg); position: relative; overflow: hidden; } .teachers__bg { position: absolute; inset: 0; pointer-events: none; } .teachers__head { position: relative; z-index: 2; margin-bottom: 64px; text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; } .teachers__title { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(26px, 7vw, 40px); line-height: 1.5; letter-spacing: .04em; margin-bottom: 18px; } .teachers__title .serif { background: linear-gradient(180deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } .teachers__lead { font-family: var(--font-mincho); font-weight: 500; font-size: 14px; line-height: 2; color: var(--ink-mute); letter-spacing: .05em; } /* ===== Group head ===== */ .t-group { position: relative; z-index: 2; margin-bottom: 72px; } .t-group:last-of-type { margin-bottom: 0; } .t-group__head { display: flex; align-items: center; gap: 18px; margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--line-strong); position: relative; } .t-group__head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 2px; background: linear-gradient(90deg, var(--glow-mint), var(--glow-blue), transparent); } .t-group--marketing .t-group__head::after { background: linear-gradient(90deg, var(--glow-purple), #ff8ac4, transparent); } .t-group--special .t-group__head::after { background: linear-gradient(90deg, var(--accent), #ffb84d, transparent); } .t-group__no { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--glow-mint), var(--glow-blue)); font-family: var(--font-mincho); font-weight: 700; font-size: 22px; color: #061018; box-shadow: 0 0 20px rgba(125,255,186,.35); } .t-group--marketing .t-group__no { background: linear-gradient(135deg, var(--glow-purple), #ff8ac4); color: #1a0a20; box-shadow: 0 0 20px rgba(176,123,255,.35); } .t-group--special .t-group__no { background: linear-gradient(135deg, var(--accent), #ffb84d); color: #1a0a05; box-shadow: 0 0 20px rgba(255,96,36,.35); } .t-group__no--star { font-size: 26px; } .t-group__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .t-group__en { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .28em; color: var(--glow-mint); text-transform: uppercase; } .t-group--marketing .t-group__en { color: var(--glow-purple); } .t-group--special .t-group__en { color: var(--accent-2); } .t-group__jp { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(22px, 6vw, 32px); letter-spacing: .04em; line-height: 1.3; color: var(--ink); display: flex; gap: 2px; flex-wrap: wrap; } .t-group__jp .serif:first-child::after { content: ""; display: inline-block; } /* ===== Teacher list ===== */ .t-group__list { display: flex; flex-direction: column; gap: 48px; } .t-card { position: relative; display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; } .t-card__visual { position: relative; width: 100%; aspect-ratio: 1; display: flex; align-items: flex-end; justify-content: center; overflow: visible; } .t-card__photo { position: relative; z-index: 3; height: 95%; width: auto; max-width: 92%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 16px 24px rgba(0,0,0,.4)); animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Blob shapes */ .blob { position: absolute; width: 86%; aspect-ratio: 1; border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; filter: blur(8px); opacity: .55; pointer-events: none; z-index: 1; animation: blobMorph 16s ease-in-out infinite; } .blob--small { width: 50%; opacity: .55; filter: blur(14px); animation-duration: 22s; animation-direction: reverse; z-index: 2; } @keyframes blobMorph { 0%, 100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; transform: translate(0,0) rotate(0deg); } 33% { border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%; transform: translate(4%, -3%) rotate(8deg); } 66% { border-radius: 70% 30% 50% 50% / 40% 70% 30% 60%; transform: translate(-3%, 4%) rotate(-6deg); } } .blob--mint { background: radial-gradient(circle at 30% 30%, #b9ffd9, var(--glow-mint) 40%, rgba(125,255,186,.35) 70%, transparent); top: 6%; left: 7%; } .blob--blue { background: radial-gradient(circle at 30% 30%, #b4d8ff, var(--glow-blue) 40%, rgba(91,157,255,.30) 70%, transparent); top: 6%; left: 7%; } .blob--purple { background: radial-gradient(circle at 30% 30%, #dfc8ff, var(--glow-purple) 40%, rgba(176,123,255,.30) 70%, transparent); top: 6%; left: 7%; } .blob--cyan { background: radial-gradient(circle at 30% 30%, #b8f7f3, var(--glow-cyan) 40%, rgba(109,242,233,.30) 70%, transparent); top: 6%; left: 7%; } .blob--pink { background: radial-gradient(circle at 30% 30%, #ffd6e7, #ff8ac4 40%, rgba(255,138,196,.30) 70%, transparent); top: 6%; left: 7%; } .blob--orange { background: radial-gradient(circle at 30% 30%, #ffdab0, #ffb84d 40%, rgba(255,184,77,.30) 70%, transparent); top: 6%; left: 7%; } .blob--small.blob--mint { top: 30%; left: 50%; } .blob--small.blob--blue { top: 30%; left: 50%; } .blob--small.blob--purple { top: 30%; left: 50%; } .blob--small.blob--cyan { top: 30%; left: 50%; } .blob--small.blob--pink { top: 30%; left: 50%; } .blob--small.blob--orange { top: 30%; left: 50%; } .blob-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff, 0 0 24px var(--glow-mint); top: 20%; right: 12%; z-index: 2; animation: sparkle 3s ease-in-out infinite; } @keyframes sparkle { 0%, 100% { transform: scale(.5); opacity: .3; } 50% { transform: scale(1); opacity: 1; } } /* Body */ .t-card__body { padding: 4px 12px 16px; text-align: center; } .t-card__no { display: inline-block; font-family: var(--font-en-serif); font-style: italic; font-weight: 500; font-size: 24px; background: linear-gradient(180deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.02em; margin-bottom: 6px; } .t-group--marketing .t-card__no { background: linear-gradient(180deg, var(--glow-purple), #ff8ac4); -webkit-background-clip: text; background-clip: text; } .t-card__field { display: inline-block; font-family: var(--font-jp-bold); font-weight: 700; font-size: 10.5px; letter-spacing: .15em; padding: 5px 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); color: var(--ink-soft); border-radius: 999px; margin-bottom: 16px; } .t-card__name { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(28px, 7vw, 38px); letter-spacing: .06em; line-height: 1.2; color: var(--ink); margin-bottom: 6px; } .t-card__name span { background: linear-gradient(180deg, #fff 30%, var(--glow-mint) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .t-group--marketing .t-card__name span { background: linear-gradient(180deg, #fff 30%, var(--glow-purple) 100%); -webkit-background-clip: text; background-clip: text; } .t-card__en { font-family: var(--font-en-serif); font-style: italic; font-size: 13px; letter-spacing: .08em; color: var(--ink-dim); margin-bottom: 16px; } .t-card__role { font-family: var(--font-mincho); font-weight: 500; font-size: 15px; line-height: 1.85; color: var(--ink-soft); letter-spacing: .04em; max-width: 24em; margin: 0 auto; } .t-card__role .hl { background: linear-gradient(transparent 65%, rgba(67,164,255,.38) 65%); font-weight: 700; } .t-group--marketing .t-card__role .hl { background: linear-gradient(transparent 65%, rgba(67,164,255,.38) 65%); } /* ===== Special guests grid ===== */ .t-special__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .t-special { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0; } .t-special__visual { position: relative; width: 100%; aspect-ratio: 1; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 12px; overflow: visible; } .t-special__visual .t-card__photo { height: 92%; } .t-special__visual .t-card__photo--full { height: 92%; max-width: none; } .t-special__ph { position: relative; z-index: 3; width: 60%; aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(255,255,255,.20); border-radius: 12px; background: rgba(255,255,255,.02); color: var(--ink-dim); } .t-special__ph svg { width: 40%; opacity: .5; } .t-special__body { padding: 4px 8px; } .t-special__tag { display: inline-block; font-family: var(--font-en); font-size: 9.5px; font-weight: 700; letter-spacing: .25em; color: var(--accent-2); margin-bottom: 8px; padding: 4px 10px; border: 1px solid rgba(255,96,36,.35); border-radius: 4px; background: rgba(255,96,36,.06); } .t-special__name { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(20px, 5vw, 26px); letter-spacing: .05em; line-height: 1.25; margin-bottom: 4px; background: linear-gradient(180deg, #fff 30%, var(--accent-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .t-special__name span { font-size: .7em; color: var(--ink-mute); font-weight: 500; } .t-special__en { font-family: var(--font-en-serif); font-style: italic; font-size: 11px; color: var(--ink-dim); letter-spacing: .06em; margin-bottom: 10px; } .t-special__role { font-size: 12px; line-height: 1.7; color: var(--ink-mute); } .t-special__placeholder { font-family: var(--font-en-serif); font-style: italic; font-size: 12px; color: var(--ink-dim); letter-spacing: .04em; } .blob--special { opacity: .45; width: 80%; } .teachers__note { position: relative; z-index: 2; margin-top: 48px; text-align: center; font-size: 11.5px; color: var(--ink-dim); letter-spacing: .04em; } /* ============ FOR WHO ============ */ .forwho { background: var(--bg-2); } .forwho__head { margin-bottom: 48px; text-align: center; } .forwho__title { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(28px, 8vw, 44px); line-height: 1.45; letter-spacing: .04em; } .forwho__title .serif { background: linear-gradient(180deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.15em; } .forwho__list { list-style: none; display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin: 0 auto 40px; } .forwho__item { position: relative; display: flex; align-items: center; gap: 26px; padding: 26px 30px; background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; } .forwho__check { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(150deg, var(--glow-blue), #2f8fff); box-shadow: 0 6px 18px rgba(47,143,255,.35), inset 0 1px 0 rgba(255,255,255,.25); color: #fff; } .forwho__check svg { width: 26px; height: 26px; display: block; } .forwho__item h3 { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(17px, 2.4vw, 21px); line-height: 1.6; color: var(--ink); margin: 0; letter-spacing: .04em; } .forwho__item p { font-size: 13px; line-height: 1.95; color: var(--ink-soft); } .forwho__counter { text-align: center; font-family: var(--font-mincho); font-weight: 600; font-size: clamp(18px, 5vw, 24px); line-height: 1.8; letter-spacing: .04em; color: var(--ink); padding: 32px; background: linear-gradient(135deg, rgba(125,255,186,.06), rgba(91,157,255,.04)); border: 1px solid var(--line-strong); border-radius: 16px; } /* ===== FOR WHO — light surface variant (breaks the all-black rhythm) ===== */ .forwho--light { background: radial-gradient(120% 90% at 50% -10%, #ffffff, transparent 60%), linear-gradient(180deg, #eef0f4 0%, #e7eaef 100%); } .forwho--light .eyebrow { color: #d2691a; } .forwho--light .forwho__title { color: #11151d; } .forwho--light .forwho__title .serif { background: linear-gradient(180deg, #1f9e6e, #2f6fe0); -webkit-background-clip: text; background-clip: text; color: transparent; } .forwho--light .forwho__item { background: #ffffff; border: 1px solid rgba(17,21,29,.08); box-shadow: 0 10px 30px rgba(17,21,29,.06); } .forwho--light .forwho__item h3 { color: #11151d; } .forwho--light .forwho__counter { color: #11151d; background: linear-gradient(135deg, rgba(31,158,110,.08), rgba(47,111,224,.06)); border: 1px solid rgba(17,21,29,.10); } .forwho--light .forwho__counter .hl { background: linear-gradient(transparent 62%, rgba(47,111,224,.22) 62%); color: #11151d; } /* ============ Q&A ============ */ .qa { background: var(--bg); } .qa__head { margin-bottom: 40px; text-align: center; } .qa__title { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(28px, 8vw, 44px); letter-spacing: .04em; } .qa__title .serif { background: linear-gradient(180deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.15em; } .qa__list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .qa__item { background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: border-color .25s; } .qa__item:has(.qa__q[aria-expanded="true"]) { border-color: rgba(125,255,186,.30); background: rgba(125,255,186,.03); } .qa__q { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: transparent; border: none; padding: 18px 20px; text-align: left; color: var(--ink); font-family: var(--font-mincho); } .qa__mark { font-family: var(--font-en-serif); font-style: italic; font-weight: 500; font-size: 22px; background: linear-gradient(180deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.02em; } .qa__mark--a { background: linear-gradient(180deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-right: 8px; font-size: 18px; } .qa__text { font-family: var(--font-mincho); font-weight: 600; font-size: 15px; line-height: 1.6; letter-spacing: .03em; } .qa__ico { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; transition: transform .25s, border-color .25s, background .25s; flex-shrink: 0; } .qa__ico::before, .qa__ico::after { content: ""; position: absolute; background: var(--ink); border-radius: 1px; } .qa__ico::before { left: 50%; top: 50%; width: 10px; height: 1.5px; transform: translate(-50%, -50%); } .qa__ico::after { left: 50%; top: 50%; width: 1.5px; height: 10px; transform: translate(-50%, -50%); transition: transform .25s, opacity .25s; } .qa__q[aria-expanded="true"] .qa__ico { background: var(--glow-mint); border-color: var(--glow-mint); transform: rotate(180deg); } .qa__q[aria-expanded="true"] .qa__ico::before, .qa__q[aria-expanded="true"] .qa__ico::after { background: #000; } .qa__q[aria-expanded="true"] .qa__ico::after { transform: translate(-50%, -50%) scaleY(0); } .qa__a { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .qa__a p { display: flex; padding: 4px 20px 22px 20px; font-family: var(--font-body); font-size: 13.5px; line-height: 2; color: var(--ink-soft); } /* ===== Q&A — light surface variant ===== */ .qa--light { background: radial-gradient(120% 90% at 50% -10%, #ffffff, transparent 60%), linear-gradient(180deg, #eef0f4 0%, #e7eaef 100%); } .qa--light .eyebrow { color: #d2691a; } .qa--light .qa__title { color: #11151d; } .qa--light .qa__title .serif { background: linear-gradient(180deg, #1f9e6e, #2f6fe0); -webkit-background-clip: text; background-clip: text; color: transparent; } .qa--light .qa__item { background: #ffffff; border: 1px solid rgba(17,21,29,.10); box-shadow: 0 8px 24px rgba(17,21,29,.05); } .qa--light .qa__item:has(.qa__q[aria-expanded="true"]) { border-color: rgba(31,158,110,.5); background: #ffffff; } .qa--light .qa__q { color: #11151d; } .qa--light .qa__text { color: #11151d; } .qa--light .qa__mark { background: linear-gradient(180deg, #2f6fe0, #1f9e6e); -webkit-background-clip: text; background-clip: text; color: transparent; } .qa--light .qa__mark--a { background: linear-gradient(180deg, #ff8a4d, #e0531a); -webkit-background-clip: text; background-clip: text; color: transparent; } .qa--light .qa__ico { border-color: rgba(17,21,29,.3); } .qa--light .qa__ico::before, .qa--light .qa__ico::after { background: #11151d; } .qa--light .qa__q[aria-expanded="true"] .qa__ico { background: linear-gradient(135deg, #1f9e6e, #2f6fe0); border-color: transparent; } .qa--light .qa__q[aria-expanded="true"] .qa__ico::before, .qa--light .qa__q[aria-expanded="true"] .qa__ico::after { background: #fff; } .qa--light .qa__a p { color: #3a4049 !important; } /* ============ SCHOOL ============ */ .school { background: var(--bg-2); } .school__head { margin-bottom: 40px; text-align: center; } .school__title { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(26px, 7vw, 40px); line-height: 1.45; letter-spacing: .04em; margin-bottom: 18px; } .school__title .serif { background: linear-gradient(180deg, #fff, var(--glow-mint)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.1em; } .school__lead { font-size: 13.5px; color: var(--ink-soft); line-height: 2.1; max-width: 640px; margin: 0 auto; } .school__lead strong { color: var(--glow-mint); font-weight: 700; } .school__grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 28px; } .school__photo { position: relative; aspect-ratio: 4/3; background: repeating-linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.025) 6px, rgba(125,255,186,.04) 6px, rgba(125,255,186,.04) 12px); border: 1px solid var(--line); border-radius: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .school__photo__note { font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--ink-dim); text-transform: uppercase; } .school__photo--sub { aspect-ratio: 4/3; } .school__photos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .school__info { background: linear-gradient(160deg, rgba(255,255,255,.03), rgba(255,255,255,.005)); border: 1px solid var(--line); border-radius: 16px; padding: 24px; } .info-list { display: flex; flex-direction: column; gap: 16px; } .info-list > div { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .info-list > div:last-child { border-bottom: 0; padding-bottom: 0; } .info-list dt { font-family: var(--font-jp-bold); font-weight: 700; font-size: 11.5px; letter-spacing: .14em; color: var(--glow-mint); padding-top: 4px; } .info-list dd { font-family: var(--font-jp-bold); font-weight: 500; font-size: 14px; color: var(--ink); line-height: 1.7; } .info-list dd small { display: block; font-size: 11px; color: var(--ink-mute); margin-top: 4px; font-weight: 500; } /* ============ APPLY ============ */ .apply { background: var(--bg); position: relative; overflow: hidden; padding: 110px var(--pad-x) 80px; } .apply__bg { position: absolute; inset: 0; pointer-events: none; } .apply__bg .orb { bottom: -60%; left: 50%; transform: translateX(-50%); } .apply__inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; text-align: center; } .apply__title { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(32px, 9vw, 56px); line-height: 1.35; letter-spacing: .04em; margin-bottom: 22px; } .apply__title__l1, .apply__title__l2 { display: block; text-align: center; /* cancel the trailing letter-spacing so glyphs sit truly centered */ margin-right: -.04em; } .apply__title .serif { background: linear-gradient(180deg, #fff 40%, var(--glow-mint) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(125,255,186,.35)); } .apply__lead { font-size: 13.5px; line-height: 2.1; color: var(--ink-soft); margin-bottom: 32px; } .apply__meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 36px; padding: 18px 12px; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 12px; } .apply__meta > div { display: flex; flex-direction: column; gap: 4px; } .apply__meta span { font-family: var(--font-en); font-size: 9px; font-weight: 600; letter-spacing: .15em; color: var(--ink-dim); } .apply__meta strong { font-family: var(--font-mincho); font-weight: 700; font-size: 13px; color: var(--ink); letter-spacing: .04em; } .dates { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; text-align: left; } .date { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid var(--line); border-radius: 14px; transition: transform .2s, border-color .25s; } .date:hover { transform: translateY(-2px); border-color: rgba(125,255,186,.30); } .date--ghost { opacity: .35; } .date--ghost:hover { transform: none; } .date__day { display: flex; flex-direction: column; align-items: center; line-height: 1; border-right: 1px solid var(--line); padding-right: 12px; } .date__m { font-family: var(--font-en); font-weight: 700; font-size: 11px; letter-spacing: .12em; color: var(--glow-mint); } .date__d { font-family: var(--font-en-serif); font-weight: 500; font-style: italic; font-size: 36px; color: var(--ink); letter-spacing: -.02em; margin: 2px 0; } .date__dow { font-family: var(--font-en); font-size: 9.5px; font-weight: 700; letter-spacing: .2em; color: var(--ink-mute); } .date__meta { display: flex; flex-direction: column; gap: 4px; } .date__time { font-family: var(--font-jp-bold); font-weight: 700; font-size: 14px; color: var(--ink); letter-spacing: .03em; } .date__place { font-size: 11px; color: var(--ink-mute); } .date__badge { font-family: var(--font-jp-bold); font-weight: 700; font-size: 10px; padding: 5px 10px; background: rgba(125,255,186,.12); color: var(--glow-mint); border: 1px solid rgba(125,255,186,.3); border-radius: 4px; white-space: nowrap; letter-spacing: .04em; } .date__badge--few { background: rgba(255,184,77,.12); color: #ffb84d; border-color: rgba(255,184,77,.3); } .date__badge--full { background: rgba(255,255,255,.04); color: var(--ink-dim); border-color: var(--line); } .apply__alt { margin-top: 22px; font-size: 13px; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; } .apply__alt .link { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.25); color: var(--ink-soft); } .apply__alt .link:hover { color: var(--glow-mint); text-decoration-color: var(--glow-mint); } .apply__alt .sep { color: var(--ink-dim); } .apply__note { margin-top: 14px; font-size: 11px; color: var(--ink-dim); letter-spacing: .05em; } /* ============ FOOTER ============ */ .foot { background: #000; padding: 48px var(--pad-x) 110px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 28px; } .foot__brand { display: flex; align-items: center; gap: 16px; } .foot__logo { font-size: 32px; font-weight: 700; background: linear-gradient(180deg, #fff, var(--glow-mint)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .04em; } .foot__org { font-size: 12px; color: var(--ink-mute); line-height: 1.7; } .foot__org small { display: block; font-size: 11px; color: var(--ink-dim); margin-top: 4px; } .foot__links { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 12px; color: var(--ink-mute); } .foot__links a:hover { color: var(--glow-mint); } .foot__copy { font-family: var(--font-en); font-size: 10px; letter-spacing: .08em; color: var(--ink-dim); } /* ============ CTA BAND (mid-page) ============ */ .cta-band { position: relative; background: radial-gradient(120% 140% at 50% 0%, rgba(255,96,36,.10), transparent 60%), var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 96px var(--pad-x); text-align: center; overflow: hidden; } .cta-band--alt { background: radial-gradient(120% 140% at 50% 0%, rgba(125,255,186,.08), transparent 60%), var(--bg); } .cta-band__inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .cta-band__kicker { font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: .32em; color: var(--accent); margin-bottom: 18px; } .cta-band__title { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(26px, 6vw, 40px); letter-spacing: .04em; color: #fff; line-height: 1.3; } .cta-band__title .serif { background: linear-gradient(135deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } .cta-band__lead { font-family: var(--font-mincho); font-size: clamp(14px, 3.6vw, 17px); line-height: 1.9; color: var(--ink-soft, rgba(255,255,255,.78)); margin-top: 16px; max-width: 30em; text-wrap: pretty; } .cta-band__chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0; padding: 0; } .cta-band__chips li { font-family: var(--font-jp); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.86); padding: 8px 16px; border: 1px solid var(--line-strong, rgba(255,255,255,.16)); border-radius: 999px; background: rgba(255,255,255,.03); } .cta-band__btn { margin-top: 30px; } .cta-band__dates { font-family: var(--font-en); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.7); margin-top: 18px; } .cta-band__dates span { font-family: var(--font-jp); font-size: 12px; color: var(--ink-mute); margin-left: 2px; } @media (max-width: 720px) { .cta-band { padding: 72px var(--pad-x); } .cta-band__chips { gap: 8px; } .cta-band__chips li { font-size: 11.5px; padding: 7px 13px; } .cta-band__btn { width: 100%; max-width: 360px; } } /* ============ PROOF TEASER ============ */ .proof-teaser { display: block; text-decoration: none; max-width: 980px; margin: 0 auto; padding: 96px var(--pad-x) 8px; position: relative; z-index: 3; } .proof-teaser__inner { position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line-strong, rgba(255,255,255,.16)); border-radius: 22px; background: radial-gradient(120% 160% at 100% 0%, rgba(125,255,186,.10), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); transition: transform .35s cubic-bezier(.16,.7,.3,1), border-color .35s ease, box-shadow .35s ease; } .proof-teaser:hover .proof-teaser__inner { transform: translateY(-3px); border-color: rgba(125,255,186,.4); box-shadow: 0 22px 54px rgba(0,0,0,.45); } .proof-teaser__photo { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; } .proof-teaser__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .proof-teaser__tag { position: absolute; left: 16px; bottom: 16px; font-family: var(--font-jp-bold); font-weight: 700; font-size: 11.5px; letter-spacing: .06em; color: #fff; padding: 7px 14px; border-radius: 999px; background: rgba(8,10,14,.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); } .proof-teaser__text { padding: 32px 30px 34px; } .proof-teaser__label { display: inline-block; font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: .26em; color: var(--glow-mint); margin-bottom: 14px; } .proof-teaser__quote { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(21px, 4.6vw, 30px); line-height: 1.45; color: #fff; letter-spacing: .03em; } .proof-teaser__sub { font-family: var(--font-mincho); font-size: clamp(13px, 3.2vw, 15px); line-height: 1.9; color: rgba(255,255,255,.76); margin-top: 14px; text-wrap: pretty; } .proof-teaser__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-family: var(--font-jp-bold); font-weight: 700; font-size: 14px; letter-spacing: .03em; color: var(--glow-mint); } .proof-teaser__link svg { transition: transform .3s ease; } .proof-teaser:hover .proof-teaser__link svg { transform: translateX(4px); } @media (min-width: 760px) { .proof-teaser__inner { flex-direction: row; align-items: stretch; } .proof-teaser__photo { width: 42%; aspect-ratio: auto; min-height: 300px; flex: 0 0 42%; } .proof-teaser__text { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px 40px; } } /* ============ STICKY CTA ============ */ .sticky-cta { position: fixed; bottom: 18px; left: 18px; right: 18px; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 22px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-family: var(--font-jp-bold); font-weight: 900; font-size: 15px; letter-spacing: .05em; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 12px 32px rgba(255,96,36,.45), 0 0 40px rgba(255,96,36,.25); transition: transform .2s, opacity .25s; } .sticky-cta:hover { transform: translateY(-2px); } .sticky-cta--hide { opacity: 0; transform: translateY(140%); pointer-events: none; } /* ============ DESKTOP ============ */ @media (min-width: 720px) { body { font-size: 15.5px; padding-bottom: 0; } section { padding: 140px var(--pad-x-lg); } /* tighten the gap specifically between STUDENTS and TEACHERS */ .students { padding-bottom: 80px; } .teachers { padding-top: 90px; } .nav { padding: 16px var(--pad-x-lg); } .nav__cta { font-size: 13px; padding: 11px 20px; } .hero { padding: 140px var(--pad-x-lg) 100px; } .hero__title__main { font-size: clamp(96px, 13vw, 180px); } .hero__title__kicker { font-size: clamp(20px, 2.5vw, 28px); } .hero__title__sub { font-size: clamp(17px, 1.6vw, 22px); } .hero__launch { padding: 32px 36px; } .hero__ctas { flex-direction: row; } .hero__sub { font-size: 15px; } .empathy__quotes { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 880px; } .feature { padding: 56px; } .feature__body { flex-direction: row; align-items: center; gap: 48px; } .feature__body > * { flex: 1; } .feature--alt .feature__body { flex-direction: row-reverse; } .feature__no__big { font-size: 84px; } .feature__title { font-size: clamp(26px, 3vw, 34px); } .students__grid { grid-template-columns: repeat(2, 1fr); } .student .student__photo { aspect-ratio: 4/5; } .student-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .student-feature__photos { display: grid; grid-template-columns: 1fr; grid-template-rows: 3fr 2fr; height: 100%; } .student-feature__hero { aspect-ratio: unset; } .student-feature__sub { aspect-ratio: unset; } .student-feature__body { padding: 48px 44px; align-self: center; } .student-feature__name { font-size: 38px; } .students__tab__label { font-size: 38px; } .students__tab__jp { font-size: 18px; padding: 6px 14px; } .teacher-lead { flex-direction: row; align-items: center; gap: 48px; padding: 48px; } .teacher-lead__photo { flex: 0 0 320px; max-width: 320px; aspect-ratio: 1; } .teacher-lead__body { text-align: left; } .teacher-lead__tags { justify-content: flex-start; } .teacher-lead__name { font-size: 56px; } .teacher-lead__copy { font-size: 16px; } /* ===== teacher cards (blob) desktop ===== */ .t-group__head { gap: 24px; margin-bottom: 64px; } .t-group__no { width: 56px; height: 56px; font-size: 26px; } .t-group__list { gap: 80px; } .t-card { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .t-card[data-side="left"] .t-card__visual { order: 1; } .t-card[data-side="left"] .t-card__body { order: 2; text-align: left; } .t-card[data-side="right"] .t-card__visual { order: 2; } .t-card[data-side="right"] .t-card__body { order: 1; text-align: right; } .t-card[data-side="right"] .t-card__role { margin-left: auto; margin-right: 0; } .t-card__role { font-size: 17px; line-height: 2; max-width: none; } .t-card__visual { aspect-ratio: 1; max-width: 480px; margin: 0 auto; } .t-special__grid { gap: 32px; } .t-special__visual { aspect-ratio: 1; max-width: 320px; margin-left: auto; margin-right: auto; } .feature--imgful .feature__head { margin-bottom: 32px; } .feature__image { margin: 0 -56px 32px; } .tools { padding: 36px 44px; margin-top: 48px; } .tools__grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } .tool { padding: 14px 14px; } .tool__name { font-size: 13.5px; } .timetable { margin-top: 56px; padding-top: 48px; } .timetable__wrap { margin: 0; padding: 0; } .timetable__table { min-width: unset; border-spacing: 6px; } .tt-cell__label { min-height: 70px; font-size: 13px; padding: 12px 8px; } .tt-day__jp { font-size: 18px; } .tt-period { width: 56px; } .tt-period__num { width: 36px; height: 36px; font-size: 22px; } .message__layout { flex-direction: row; align-items: center; gap: 56px; } .message__photo { flex: 0 0 320px; max-width: 320px; margin: 0; } .message__body { flex: 1; } .forwho__list { gap: 14px; } .forwho__item { padding: 20px 18px; gap: 18px; } .forwho__check { width: 40px; height: 40px; } .forwho__check svg { width: 22px; height: 22px; } .qa__list { max-width: 800px; margin: 0 auto; } .qa__text { font-size: 16px; } .school__grid { grid-template-columns: 1.2fr 1fr; gap: 40px; } .school__info { padding: 32px; } .apply { padding: 160px var(--pad-x-lg) 120px; } .dates { max-width: 640px; margin-left: auto; margin-right: auto; } .sticky-cta { display: flex; } .foot { flex-direction: row; align-items: center; justify-content: space-between; padding: 56px var(--pad-x-lg); } } @media (min-width: 1024px) { .empathy__quotes { grid-template-columns: repeat(3, 1fr); } } /* ============ TWEAKS PANEL ============ */ .tweaks { position: fixed; bottom: 100px; right: 18px; width: 280px; z-index: 100; background: rgba(10,13,20,.96); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); padding: 20px; display: none; backdrop-filter: blur(20px); } .tweaks.is-open { display: block; } .tweaks__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .tweaks__title { font-family: var(--font-mincho); font-weight: 700; font-size: 14px; color: var(--ink); letter-spacing: .05em; } .tweaks__close { background: transparent; border: none; font-size: 20px; color: var(--ink-mute); padding: 4px 8px; } .tweaks__close:hover { color: var(--ink); } .tweaks__group { margin-bottom: 16px; } .tweaks__label { display: block; font-family: var(--font-en); font-size: 10px; font-weight: 700; letter-spacing: .2em; color: var(--ink-mute); margin-bottom: 10px; text-transform: uppercase; } .tweaks__swatches { display: flex; gap: 8px; flex-wrap: wrap; } .tweaks__swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; background: transparent; border: none; padding: 4px; cursor: pointer; border-radius: 8px; } .tweaks__swatch__chip { display: flex; border-radius: 8px; overflow: hidden; width: 64px; height: 32px; border: 2px solid var(--line); transition: border-color .2s; } .tweaks__swatch__chip > span { flex: 1; } .tweaks__swatch.is-active .tweaks__swatch__chip { border-color: var(--glow-mint); } .tweaks__swatch__label { font-size: 10px; color: var(--ink-mute); } .tweaks__swatch.is-active .tweaks__swatch__label { color: var(--ink); } @media (min-width: 720px) { .tweaks { bottom: 20px; } } /* ============ HERO IMAGE (v3) ============ */ .hero { position: relative; min-height: 100svh; padding: 0 !important; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; } .hero__image { position: absolute; inset: 0; pointer-events: none; } .hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .hero__sr-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Invisible clickable overlay positioned over the CTA button in the image */ .hero__cta-overlay { position: absolute; /* The button in the image sits in the bottom-left area: roughly x: 3.5% - 38%, y: 80% - 92% */ left: 3.5%; bottom: 8%; width: 38%; height: 9%; background: transparent; border-radius: 999px; z-index: 3; transition: background .15s; } .hero__cta-overlay:hover { background: rgba(125,255,186,.08); box-shadow: 0 0 30px rgba(125,255,186,.3); } .hero__cta-overlay:focus-visible { outline: 2px solid var(--glow-mint); outline-offset: 4px; } .hero .hero__scroll { position: absolute; bottom: 20px; right: 20px; z-index: 2; width: auto; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.5); font-family: var(--font-en); font-size: 9px; letter-spacing: .3em; } .hero__scroll__line { width: 50px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4)); } /* Hide old hero stuff that may still get referenced */ .hero__bg, .hero__inner, .hero__title, .hero__launch, .hero__sub, .hero__ctas, .hero__tag, .hero__pre, .hero__ring { display: none !important; } @media (max-width: 720px) { .hero { min-height: auto; aspect-ratio: 3 / 4; } .hero__image img { object-position: center center; } .hero__cta-overlay { left: 4%; bottom: 7%; width: 50%; height: 7%; } } /* ============ Eyebrow simplified ============ */ .eyebrow { display: inline-block; font-family: var(--font-en); font-size: 10px; font-weight: 600; letter-spacing: .35em; color: rgba(255,255,255,.4); margin-bottom: 18px; } /* ============ ABOUT — title flipped (sub above jumbo) ============ */ .about__title { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .about__title__sub { display: block; font-family: var(--font-jp-bold); font-weight: 500; font-size: clamp(15px, 4vw, 22px); color: var(--ink-mute); letter-spacing: .12em; } .jumbo { font-size: clamp(64px, 14vw, 132px) !important; line-height: 1 !important; letter-spacing: .04em !important; filter: drop-shadow(0 0 30px rgba(125,255,186,.28)) !important; } .gradient-text { background: linear-gradient(180deg, #fff 25%, var(--glow-mint) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Hide the about manifesto if present */ .about__manifesto { display: none; } /* ============ TO YOU — 3 quotes layout ============ */ .empathy__quotes--3 { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 56px; } @media (min-width: 720px) { .empathy__quotes--3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .empathy__quotes--3 .quote { text-align: left; } .empathy__lead { display: none !important; } /* ============ STUDENTS — pair card ============ */ .students-pair { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.025), rgba(255,255,255,.005)); margin-bottom: 32px; } .students-pair__photo { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(ellipse 60% 50% at 50% 90%, rgba(125,255,186,.12), transparent 65%), radial-gradient(ellipse 40% 35% at 30% 30%, rgba(91,157,255,.08), transparent 65%), #0a0c14; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .students-pair__photo img { position: relative; z-index: 1; max-height: 96%; width: auto; max-width: 90%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 16px 36px rgba(0,0,0,.6)); } .students-pair__body { padding: 32px 24px; } .students-pair__eyebrow { font-family: var(--font-en); font-size: 10.5px; font-weight: 700; letter-spacing: .15em; color: var(--glow-mint); margin-bottom: 16px; } .students-pair__title { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(22px, 5.5vw, 32px); line-height: 1.5; letter-spacing: .04em; margin-bottom: 24px; } .students-pair__title .serif { background: linear-gradient(180deg, #fff 40%, var(--glow-mint) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .students-pair__people { list-style: none; display: flex; flex-direction: column; gap: 16px; } .students-pair__people > li { padding: 16px 18px; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 12px; } .sp-person__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; } .sp-person__name { font-family: var(--font-mincho); font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: .04em; } .sp-person__from { font-size: 11px; color: var(--ink-mute); letter-spacing: .04em; } .sp-person__dream { font-family: var(--font-mincho); font-weight: 500; font-size: 14.5px; line-height: 1.7; color: var(--glow-mint); letter-spacing: .03em; } @media (min-width: 880px) { .students-pair { grid-template-columns: 5fr 6fr; align-items: stretch; } .students-pair__photo { aspect-ratio: auto; height: 100%; min-height: 480px; } .students-pair__body { padding: 56px 48px; align-self: center; } } /* ============ JOURNEY (Feature 03 flow) ============ */ .journey { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0 0 28px; padding: 0; } .journey__step { --c: var(--glow-mint); position: relative; display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 16px; padding: 16px 18px; background: rgba(255,255,255,.025); border: 1px solid color-mix(in srgb, var(--c) 25%, var(--line)); border-radius: 14px; overflow: hidden; } .journey__step::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--c); opacity: .8; } .journey__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); flex-shrink: 0; } .journey__icon svg { width: 28px; height: 28px; } .journey__num { display: inline-block; font-family: var(--font-en-serif); font-style: italic; font-weight: 500; font-size: 13px; color: color-mix(in srgb, var(--c) 70%, var(--ink-mute)); letter-spacing: .05em; grid-row: 1; grid-column: 2; margin-bottom: -4px; } .journey__label { font-family: var(--font-mincho); font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: .04em; line-height: 1.3; grid-row: 2; grid-column: 2; } .journey__arrow { display: block; height: 16px; margin-left: 28px; border-left: 2px dashed rgba(255,255,255,.18); } .journey__step--hot { background: linear-gradient(135deg, rgba(255,96,36,.10), rgba(255,138,77,.05)); box-shadow: 0 0 32px rgba(255,96,36,.15); } @media (min-width: 880px) { .journey { flex-direction: row; align-items: stretch; gap: 0; } .journey__step { flex: 1; flex-direction: column; text-align: center; grid-template-columns: 1fr; gap: 10px; padding: 24px 12px; min-width: 0; } .journey__step::before { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 3px; } .journey__icon { margin: 0 auto; } .journey__num, .journey__label { grid-column: 1; } .journey__num { grid-row: 2; margin: 0; } .journey__label { grid-row: 3; } .journey__arrow { align-self: center; width: 24px; height: 2px; margin: 0; border-left: 0; background: linear-gradient(90deg, var(--line-strong), transparent); flex-shrink: 0; } } /* ============ TIMETABLE — flatten gradients ============ */ .timetable__lead { display: none; } .tt-cell { background: rgba(255,255,255,.025) !important; } .tt-cell::before { display: none; } .tt-cell[data-cat="dream"] { background: rgba(255,96,36,.10) !important; border-color: rgba(255,96,36,.35); } .tt-cell[data-cat="dream"] .tt-cell__label { color: #fff; } .tt-cell[data-cat="video"], .tt-cell[data-cat="movie"] { border-color: rgba(125,255,186,.30); } .tt-cell[data-cat="sns"] { border-color: rgba(255,138,196,.30); } .tt-cell[data-cat="web"], .tt-cell[data-cat="seo"] { border-color: rgba(91,157,255,.30); } .tt-cell[data-cat="graphic"] { border-color: rgba(176,123,255,.30); } .tt-cell[data-cat="ai"] { border-color: rgba(109,242,233,.30); } .tt-cell[data-cat="biz"] { border-color: rgba(255,184,77,.30); } /* ============ TEACHERS — hide descriptions per spec ============ */ .t-card__role { display: none !important; } .t-card__body { padding: 12px 14px 16px !important; } .t-card__field { margin-bottom: 10px !important; } .t-card__en { margin-bottom: 0 !important; font-size: 12px !important; } .t-special__intro { text-align: center; font-family: var(--font-mincho); font-weight: 500; font-size: 13.5px; line-height: 2; color: var(--ink-soft); letter-spacing: .04em; margin: 0 auto 40px; max-width: 36em; padding: 24px 24px; border-top: 1px dashed var(--line-strong); border-bottom: 1px dashed var(--line-strong); } /* Special guest extra emphasis */ .t-group--special { margin-top: 64px; padding-top: 56px; position: relative; } .t-group--special::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); } .t-group--special .t-card__field, .t-group--special .t-card__role { display: none; } .t-special { border: 1px solid rgba(255,96,36,.25); background: linear-gradient(160deg, rgba(255,96,36,.05), rgba(255,138,77,.02)); border-radius: 18px; padding: 20px 18px 24px; position: relative; } .t-special::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent); border-radius: 18px 18px 0 0; } /* ============ Side-alternating teacher cards reverted to 2-col grid (spec wants name-only) ============ */ @media (min-width: 720px) { .t-group__list { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; } .t-card { grid-template-columns: 1fr !important; gap: 0 !important; } .t-card[data-side="left"] .t-card__body, .t-card[data-side="right"] .t-card__body { order: unset !important; text-align: center !important; } .t-card[data-side="left"] .t-card__visual, .t-card[data-side="right"] .t-card__visual { order: unset !important; } .t-card[data-side="right"] .t-card__role { margin-left: 0 !important; } } @media (min-width: 1024px) { .t-group__list { grid-template-columns: repeat(3, 1fr) !important; } } /* ============ SCHOOL — real photos ============ */ .school__lead--hide { display: none !important; } .school__photo { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #0a0c14; } .school__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .school__photo__caption { position: absolute; left: 12px; bottom: 12px; font-family: var(--font-en); font-size: 10px; font-weight: 700; letter-spacing: .18em; color: rgba(255,255,255,.85); text-transform: uppercase; padding: 5px 10px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border-radius: 4px; } .school__photo--ph { background: repeating-linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.025) 6px, rgba(125,255,186,.04) 6px, rgba(125,255,186,.04) 12px); display: flex; align-items: center; justify-content: center; } .school__photo--ph .school__photo__caption { position: static; background: transparent; color: var(--ink-dim); border: 1px dashed rgba(255,255,255,.20); } /* ============ Global gradient/decoration tone-down ============ */ /* Soften orbs across non-hero sections */ .about .orb, .message .orb, .apply .orb, .teachers .orb { opacity: .25 !important; } .about__bg, .message__bg, .apply__bg, .teachers__bg { filter: saturate(.6) blur(2px); } /* Hide chat viz that we removed from feature 01 */ .feature__viz--01 .viz-placeholder { aspect-ratio: 4/3; } /* Remove old proj-viz since it's no longer used */ .proj-viz { display: none; } /* ============ HERO v3 — text overlay on image ============ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; background: #000; overflow: hidden; } .hero__image { position: absolute; inset: 0; pointer-events: none; } .hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; opacity: .55; } @media (min-width: 720px) { .hero__image img { opacity: .9; object-position: right center; } } .hero__overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 20% 50%, rgba(0,0,0,.85), rgba(0,0,0,.5) 50%, transparent 80%), linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.2) 40%, rgba(0,0,0,.55)); pointer-events: none; } @media (max-width: 720px) { .hero__overlay { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.3) 30%, rgba(0,0,0,.85) 100%); } } .hero__content { position: relative; z-index: 2; width: 100%; max-width: 720px; padding: 100px 26px 80px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; } @media (min-width: 720px) { .hero__content { padding: 80px 80px; max-width: 760px; } } .hero__title { font-family: var(--font-mincho); font-weight: 500; color: #fff; margin-bottom: 36px; } .hero__title__line { display: block; font-size: clamp(17px, 4.8vw, 26px); line-height: 1.65; letter-spacing: .06em; margin-bottom: 10px; } .hero__title__line:first-child { opacity: .9; } .hero__launch { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 40px; } .hero__launch__en { font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: .35em; color: rgba(255,255,255,.6); } .hero__launch__jp { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(56px, 16vw, 110px); line-height: 1; letter-spacing: .04em; margin: 6px 0; display: inline-flex; align-items: flex-end; } .hero__launch__jp .gradient-text { background: linear-gradient(180deg, #b3e0ff 0%, #5b9dff 45%, #7dffba 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(91,157,255,.35)); } .hero__launch__tail { font-size: .55em !important; margin-left: .12em; margin-bottom: .12em; } .hero__launch__date { font-family: var(--font-en); font-size: 13px; letter-spacing: .25em; color: rgba(125,255,186,.85); margin-top: 6px; } .hero__cta { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: #fff; font-family: var(--font-jp-bold); font-weight: 700; font-size: 15px; padding: 16px 26px; border-radius: 999px; letter-spacing: .04em; box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 10px 28px rgba(255,96,36,.40), 0 0 40px rgba(255,96,36,.18); transition: transform .2s, box-shadow .25s; text-decoration: none; } .hero__cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 14px 36px rgba(255,96,36,.55), 0 0 60px rgba(255,96,36,.30); } /* Hide previous overlay link */ .hero__cta-overlay, .hero__sr-title { display: none !important; } .hero__bg, .hero__inner, .hero__pre, .hero__tag, .hero__sub, .hero__ctas { display: none !important; } @media (max-width: 720px) { .hero { padding: 0; } .hero__content { padding: 96px 22px 70px; } } /* ============ ABOUT — inline とは ============ */ .about__title { flex-direction: row !important; align-items: baseline !important; flex-wrap: wrap; gap: 8px !important; } .about__title__tail { font-family: var(--font-jp-bold); font-weight: 700; font-size: clamp(32px, 8vw, 64px); color: var(--ink); letter-spacing: .04em; line-height: 1; } .about__title__sub { display: none; } /* ABOUT: tighten title→body gap on mobile (jumbo runs large) */ @media (max-width: 720px) { .about__title { margin-bottom: 22px !important; row-gap: 6px; } } /* ============ TEACHERS — show roles (with new titles) ============ */ .t-card__role { display: block !important; font-family: var(--font-jp-bold); font-weight: 500; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); letter-spacing: .03em; margin-top: 10px; text-align: center; } .t-card__role small { display: block; font-size: 11px; color: var(--ink-mute); margin-top: 4px; line-height: 1.55; } .t-special__role { display: block !important; font-family: var(--font-jp-bold); font-weight: 500; font-size: 12px; line-height: 1.7; color: var(--ink-soft); letter-spacing: .03em; margin-top: 6px; } /* ============ STUDENTS — accordion ============ */ .students__intro { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 32px; } .students__intro__eyebrow { font-family: var(--font-en); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; color: var(--glow-mint); } .students__intro__photo-wrap { width: 100%; max-width: 380px; aspect-ratio: 5 / 4; background: radial-gradient(ellipse 60% 50% at 50% 90%, rgba(125,255,186,.10), transparent 65%), #0a0c14; border-radius: 20px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border: 1px solid var(--line); } .students__intro__photo-wrap img { max-height: 96%; width: auto; max-width: 90%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 16px 32px rgba(0,0,0,.6)); } .student-acc { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .student-acc__item { background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .25s; } .student-acc__item:has(.student-acc__head[aria-expanded="true"]) { border-color: rgba(125,255,186,.30); } .student-acc__head { width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "meta meta" "name ico" "dream ico"; align-items: center; gap: 4px 16px; padding: 18px 20px; text-align: left; background: transparent; border: none; color: var(--ink); cursor: pointer; } .student-acc__meta { grid-area: meta; font-family: var(--font-en); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--glow-mint); margin-bottom: 6px; } .student-acc__name { grid-area: name; font-family: var(--font-mincho); font-weight: 700; font-size: 22px; letter-spacing: .04em; color: var(--ink); } .student-acc__dream { grid-area: dream; font-family: var(--font-mincho); font-weight: 500; font-size: 15px; line-height: 1.6; color: var(--ink-soft); letter-spacing: .03em; margin-top: 4px; } .student-acc__ico { grid-area: ico; align-self: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; transition: transform .25s, border-color .25s, background .25s; flex-shrink: 0; } .student-acc__ico::before, .student-acc__ico::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); border-radius: 1px; } .student-acc__ico::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); } .student-acc__ico::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); transition: transform .25s; } .student-acc__head[aria-expanded="true"] .student-acc__ico { background: var(--glow-mint); border-color: var(--glow-mint); transform: rotate(180deg); } .student-acc__head[aria-expanded="true"] .student-acc__ico::before, .student-acc__head[aria-expanded="true"] .student-acc__ico::after { background: #000; } .student-acc__head[aria-expanded="true"] .student-acc__ico::after { transform: translate(-50%, -50%) scaleY(0); } .student-acc__body { max-height: 0; overflow: hidden; transition: max-height .4s ease; } .student-acc__inner { padding: 4px 22px 24px; display: flex; flex-direction: column; gap: 14px; } .student-acc__inner p { font-family: var(--font-body); font-size: 13.5px; line-height: 2; color: var(--ink-soft); letter-spacing: .03em; } /* Hide old students-pair styles since the structure changed */ .students-pair { display: none; } /* ============ HERO v4 — ring-side, text-left ============ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: flex-start; background: #000; overflow: hidden; padding: 0 !important; } .hero__image, .hero__overlay { display: none !important; } .hero__ring { display: block !important; position: absolute; top: 50%; right: -8%; transform: translateY(-50%); width: 95%; max-width: 1100px; aspect-ratio: 3 / 2; z-index: 1; pointer-events: none; opacity: .95; } .hero__ring img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } @media (max-width: 720px) { .hero__ring { top: auto; bottom: -10%; right: -25%; transform: none; width: 130%; aspect-ratio: 1; opacity: .55; } } .hero__content { position: relative; z-index: 2; width: 100%; max-width: 760px; padding: 110px 28px 90px; display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 720px) { .hero__content { padding: 100px 80px; max-width: 800px; } } /* Top three lines */ .hero__title { font-family: var(--font-mincho); font-weight: 500; color: #fff; margin: 0 0 36px; } .hero__title__line { display: block; font-size: clamp(18px, 4.6vw, 26px); line-height: 1.7; letter-spacing: .06em; margin-bottom: 6px; color: #fff; } .hero__title__line:first-child { font-size: clamp(17px, 4.2vw, 24px); } /* Launch block: YUME GAKKA / 夢学科 誕生 / — 2026年4月開設 — */ .hero__launch { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 8px 0 36px; } .hero__launch__en { font-family: var(--font-en); font-size: clamp(11px, 1.4vw, 13px); font-weight: 600; letter-spacing: .42em; color: rgba(255,255,255,.45); margin-bottom: 4px; } .hero__launch__jp { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(56px, 15vw, 108px); line-height: 1; letter-spacing: .04em; margin: 6px 0 4px; display: inline-flex; align-items: flex-end; gap: .04em; } .hero__launch__jp .gradient-text { background: linear-gradient(180deg, #b3e0ff 0%, #5b9dff 50%, #7dffba 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(91,157,255,.35)); } .hero__launch__tail { font-family: var(--font-mincho); font-weight: 500; font-size: .42em; color: #fff; margin-left: .08em; margin-bottom: .12em; letter-spacing: .04em; } .hero__launch__date { font-family: var(--font-jp-bold); font-weight: 500; font-size: clamp(13px, 1.6vw, 16px); letter-spacing: .28em; color: #fff; margin-top: 14px; } /* CTA */ .hero__cta { display: inline-flex; align-items: center; gap: 14px; background: var(--accent); color: #fff; font-family: var(--font-jp-bold); font-weight: 700; font-size: clamp(14px, 1.6vw, 16px); padding: 18px 32px; border-radius: 999px; letter-spacing: .04em; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(255,96,36,.35), 0 0 50px rgba(255,96,36,.22); transition: transform .2s, box-shadow .25s; text-decoration: none; } .hero__cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 16px 38px rgba(255,96,36,.55), 0 0 60px rgba(255,96,36,.32); } .hero__cta svg { flex-shrink: 0; } .hero__scroll { position: absolute; bottom: 24px; right: 28px; z-index: 3; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.5); font-family: var(--font-en); font-size: 9.5px; letter-spacing: .32em; } .hero__scroll__line { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4)); } @media (max-width: 720px) { .hero__scroll { right: auto; left: 22px; bottom: 18px; } .hero__content { padding: 90px 22px 110px; } } /* ============ HERO v5 — full image with clickable CTA overlay ============ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; padding: 0 !important; } .hero__image { display: block !important; position: absolute; inset: 0; pointer-events: none; } .hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: 1; } .hero__overlay { display: none !important; } .hero__ring, .hero__content, .hero__title, .hero__launch, .hero__cta { display: none !important; } .hero__sr-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .hero__cta-overlay { display: block !important; position: absolute; left: 4.5%; bottom: 9%; width: 38%; height: 9%; background: transparent; border-radius: 999px; z-index: 5; cursor: pointer; transition: background .15s, box-shadow .25s; } .hero__cta-overlay:hover { background: rgba(255,255,255,.06); box-shadow: 0 0 40px rgba(255,96,36,.35); } .hero__cta-overlay:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 4px; } @media (max-width: 720px) { .hero { min-height: auto; aspect-ratio: 3 / 2; } .hero__image img { object-position: center; } .hero__cta-overlay { left: 5%; bottom: 10%; width: 48%; height: 8%; } } .hero__scroll { position: absolute; bottom: 20px; right: 20px; z-index: 4; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.5); font-family: var(--font-en); font-size: 9px; letter-spacing: .3em; } .hero__scroll__line { width: 50px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4)); } /* ============ HERO v6 — text-based, ring decoration on right ============ */ .hero--v6 { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: flex-start; background: #000; overflow: hidden; padding: 0 !important; } .hero--v6 .hero__image { display: none !important; } .hero--v6 .hero__cta-overlay { display: none !important; } .hero--v6 .hero__sr-title { display: none !important; } .hero--v6 .hero__ring { display: block !important; position: absolute; top: 50%; right: -8%; transform: translateY(-50%); width: 95%; max-width: 1100px; aspect-ratio: 3 / 2; z-index: 1; pointer-events: none; opacity: .95; } .hero--v6 .hero__ring img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } @media (max-width: 720px) { .hero--v6 .hero__ring { top: auto; bottom: -8%; right: -30%; transform: none; width: 140%; aspect-ratio: 1; opacity: .5; } } .hero--v6 .hero__content { display: flex !important; position: relative; z-index: 2; width: 100%; max-width: 760px; padding: 110px 28px 90px; flex-direction: column; align-items: flex-start; } @media (min-width: 720px) { .hero--v6 .hero__content { padding: 100px 80px; max-width: 820px; } } /* Three white mincho lines */ .hero--v6 .hero__title { display: block !important; font-family: var(--font-mincho); font-weight: 500; color: #fff; margin: 0 0 36px; } .hero--v6 .hero__title__line { display: block; font-size: clamp(18px, 4.4vw, 26px); line-height: 1.75; letter-spacing: .07em; margin-bottom: 6px; color: #fff; } /* Launch block */ .hero--v6 .hero__launch { display: flex !important; flex-direction: column; align-items: flex-start; gap: 0; margin: 8px 0 40px; } .hero--v6 .hero__launch__en { font-family: var(--font-en); font-size: clamp(11px, 1.4vw, 13px); font-weight: 600; letter-spacing: .42em; color: rgba(255,255,255,.42); margin-bottom: 6px; } .hero--v6 .hero__launch__jp { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(60px, 16vw, 116px); line-height: 1; letter-spacing: .04em; margin: 4px 0; display: inline-flex; align-items: flex-end; gap: .02em; } .hero--v6 .hero__launch__jp .gradient-text { background: linear-gradient(180deg, #b3e0ff 0%, #5b9dff 50%, #7dffba 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(91,157,255,.35)); } .hero--v6 .hero__launch__tail { font-family: var(--font-mincho); font-weight: 500; font-size: .42em; color: #fff; margin-left: .12em; margin-bottom: .12em; letter-spacing: .04em; background: none; -webkit-text-fill-color: #fff; } .hero--v6 .hero__launch__date { font-family: var(--font-jp-bold); font-weight: 500; font-size: clamp(13px, 1.5vw, 16px); letter-spacing: .3em; color: #fff; margin-top: 16px; } /* CTA — matches nav__cta orange but bigger, with full hover effects */ .hero--v6 .hero__cta { display: inline-flex !important; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: #fff; font-family: var(--font-jp-bold); font-weight: 700; font-size: clamp(14px, 1.5vw, 16px); padding: 18px 32px; border: none; border-radius: 999px; letter-spacing: .04em; text-decoration: none; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(255,96,36,.40), 0 0 50px rgba(255,96,36,.20); transition: transform .2s, box-shadow .25s; position: relative; overflow: hidden; } .hero--v6 .hero__cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 45%); pointer-events: none; } .hero--v6 .hero__cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 40px rgba(255,96,36,.55), 0 0 70px rgba(255,96,36,.30); } .hero--v6 .hero__cta:active { transform: translateY(0); } .hero--v6 .hero__cta svg { flex-shrink: 0; } .hero--v6 .hero__scroll { position: absolute; bottom: 24px; right: 28px; z-index: 3; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.5); font-family: var(--font-en); font-size: 9.5px; letter-spacing: .32em; } .hero--v6 .hero__scroll__line { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4)); } @media (max-width: 720px) { .hero--v6 .hero__scroll { right: auto; left: 22px; bottom: 18px; } .hero--v6 .hero__content { padding: 90px 22px 110px; } } /* ============ HERO v7 — pure-CSS ring + SVG waves (no baked image) ============ */ .hero--v7 { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: flex-start; background: #000; overflow: hidden; padding: 0 !important; } .hero--v7 .hero__image, .hero--v7 .hero__ring, .hero--v7 .hero__cta-overlay, .hero--v7 .hero__sr-title { display: none !important; } .hero__deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } /* The ring — large circle, blue→green conic glow */ .hero__ring-css { position: absolute; top: 50%; right: -22%; transform: translateY(-50%); width: 96vh; height: 96vh; max-width: 1000px; max-height: 1000px; min-width: 600px; min-height: 600px; border-radius: 50%; /* the ring stroke effect using conic gradient and mask */ background: conic-gradient( from 200deg, transparent 0deg, #2596ff 35deg, #5b9dff 80deg, #7dffba 165deg, #7dffba 220deg, #2596ff 280deg, transparent 340deg, transparent 360deg ); filter: drop-shadow(0 0 18px rgba(91,157,255,.45)) drop-shadow(0 0 36px rgba(125,255,186,.30)); } .hero__ring-css::before { content: ""; position: absolute; inset: 1.4%; border-radius: 50%; background: #000; } /* Inner faint glow */ .hero__ring-css::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 30% 80%, rgba(91,157,255,.10), transparent 55%), radial-gradient(circle at 70% 25%, rgba(125,255,186,.08), transparent 55%); } .ring-glow { position: absolute; inset: -4%; border-radius: 50%; background: radial-gradient(circle, rgba(91,157,255,.20) 30%, transparent 65%); filter: blur(12px); z-index: -1; } /* SVG wave lines — flowing through bottom-left and top-right */ .hero__waves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .85; } /* Twinkle particles */ .hero__particles span { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; background: #fff; border-radius: 50%; box-shadow: 0 0 8px #fff, 0 0 16px var(--glow-mint); opacity: .8; animation: heroTwinkle 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes heroTwinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .9; transform: scale(1); } } /* Responsive ring positioning */ @media (max-width: 720px) { .hero__ring-css { top: auto; bottom: -22%; right: -28%; transform: none; width: 130vw; height: 130vw; min-width: 0; min-height: 0; opacity: .8; } } /* Content layer */ .hero--v7 .hero__content { display: flex !important; position: relative; z-index: 2; width: 100%; max-width: 760px; padding: 110px 28px 90px; flex-direction: column; align-items: flex-start; } @media (min-width: 720px) { .hero--v7 .hero__content { padding: 100px 80px; max-width: 820px; } } .hero--v7 .hero__title { display: block !important; font-family: var(--font-mincho); font-weight: 500; color: #fff; margin: 0 0 36px; } .hero--v7 .hero__title__line { display: block; font-size: clamp(18px, 4.4vw, 26px); line-height: 1.75; letter-spacing: .07em; margin-bottom: 6px; color: #fff; } .hero--v7 .hero__launch { display: flex !important; flex-direction: column; align-items: flex-start; gap: 0; margin: 8px 0 40px; } .hero--v7 .hero__launch__en { font-family: var(--font-en); font-size: clamp(11px, 1.4vw, 13px); font-weight: 600; letter-spacing: .42em; color: rgba(255,255,255,.42); margin-bottom: 6px; } .hero--v7 .hero__launch__jp { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(60px, 16vw, 116px); line-height: 1; letter-spacing: .04em; margin: 4px 0; display: inline-flex; align-items: flex-end; gap: .02em; } .hero--v7 .hero__launch__jp .gradient-text { background: linear-gradient(180deg, #b3e0ff 0%, #5b9dff 50%, #7dffba 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(91,157,255,.35)); } .hero--v7 .hero__launch__tail { font-family: var(--font-mincho); font-weight: 500; font-size: .42em; color: #fff; margin-left: .12em; margin-bottom: .12em; letter-spacing: .04em; background: none; -webkit-text-fill-color: #fff; } .hero--v7 .hero__launch__date { font-family: var(--font-jp-bold); font-weight: 500; font-size: clamp(13px, 1.5vw, 16px); letter-spacing: .3em; color: #fff; margin-top: 16px; } .hero--v7 .hero__cta { display: inline-flex !important; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: #fff; font-family: var(--font-jp-bold); font-weight: 700; font-size: clamp(14px, 1.5vw, 16px); padding: 18px 32px; border: none; border-radius: 999px; letter-spacing: .04em; text-decoration: none; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(255,96,36,.40), 0 0 50px rgba(255,96,36,.20); transition: transform .2s, box-shadow .25s; position: relative; overflow: hidden; } .hero--v7 .hero__cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 45%); pointer-events: none; } .hero--v7 .hero__cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 40px rgba(255,96,36,.55), 0 0 70px rgba(255,96,36,.30); } .hero--v7 .hero__cta:active { transform: translateY(0); } .hero--v7 .hero__scroll { position: absolute; bottom: 24px; right: 28px; z-index: 3; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.5); font-family: var(--font-en); font-size: 9.5px; letter-spacing: .32em; } .hero--v7 .hero__scroll__line { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4)); } @media (max-width: 720px) { .hero--v7 .hero__scroll { right: auto; left: 22px; bottom: 18px; } .hero--v7 .hero__content { padding: 90px 22px 110px; } } /* ============ HERO v8 — SVG-only deco (matches reference) ============ */ .hero--v8 { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: flex-start; background: #000; overflow: hidden; padding: 0 !important; } .hero--v8 .hero__image, .hero--v8 .hero__ring, .hero--v8 .hero__deco, .hero--v8 .hero__ring-css, .hero--v8 .hero__waves, .hero--v8 .hero__particles, .hero--v8 .hero__cta-overlay, .hero--v8 .hero__sr-title { display: none !important; } .hero__deco-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } /* Bottom-right dot stippling */ .hero__dots { position: absolute; right: 0; bottom: 0; width: 28%; height: 22%; pointer-events: none; z-index: 1; background-image: radial-gradient(circle at 50% 50%, rgba(91,157,255,.55) 1px, transparent 1.5px), radial-gradient(circle at 50% 50%, rgba(125,255,186,.45) 1px, transparent 1.5px); background-size: 12px 12px, 16px 16px; background-position: 0 0, 6px 8px; mask-image: radial-gradient(ellipse at 100% 100%, #000 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 100% 100%, #000 10%, transparent 75%); opacity: .85; } @media (max-width: 720px) { .hero__dots { width: 55%; height: 14%; bottom: 0; right: -10%; } } .hero--v8 .hero__content { display: flex !important; position: relative; z-index: 2; width: 100%; max-width: 760px; padding: 110px 28px 90px; flex-direction: column; align-items: flex-start; } @media (min-width: 720px) { .hero--v8 .hero__content { padding: 100px 80px; max-width: 820px; } } .hero--v8 .hero__title { display: block !important; font-family: var(--font-mincho); font-weight: 500; color: #fff; margin: 0 0 36px; } .hero--v8 .hero__title__line { display: block; font-size: clamp(18px, 4.4vw, 26px); line-height: 1.75; letter-spacing: .07em; margin-bottom: 6px; color: #fff; } .hero--v8 .hero__launch { display: flex !important; flex-direction: column; align-items: flex-start; gap: 0; margin: 8px 0 40px; } .hero--v8 .hero__launch__en { font-family: var(--font-en); font-size: clamp(11px, 1.4vw, 13px); font-weight: 600; letter-spacing: .42em; color: rgba(255,255,255,.42); margin-bottom: 6px; } .hero--v8 .hero__launch__jp { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(60px, 16vw, 116px); line-height: 1; letter-spacing: .04em; margin: 4px 0; display: inline-flex; align-items: flex-end; gap: .02em; } .hero--v8 .hero__launch__jp .gradient-text { background: linear-gradient(180deg, #b3e0ff 0%, #5b9dff 50%, #7dffba 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(91,157,255,.35)); } .hero--v8 .hero__launch__tail { font-family: var(--font-mincho); font-weight: 500; font-size: .42em; color: #fff; margin-left: .12em; margin-bottom: .12em; letter-spacing: .04em; background: none; -webkit-text-fill-color: #fff; } .hero--v8 .hero__launch__date { font-family: var(--font-jp-bold); font-weight: 500; font-size: clamp(13px, 1.5vw, 16px); letter-spacing: .3em; color: #fff; margin-top: 16px; } .hero--v8 .hero__cta { display: inline-flex !important; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: #fff; font-family: var(--font-jp-bold); font-weight: 700; font-size: clamp(14px, 1.5vw, 16px); padding: 18px 32px; border: none; border-radius: 999px; letter-spacing: .04em; text-decoration: none; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(255,96,36,.40), 0 0 50px rgba(255,96,36,.20); transition: transform .2s, box-shadow .25s; position: relative; overflow: hidden; } .hero--v8 .hero__cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 45%); pointer-events: none; } .hero--v8 .hero__cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 40px rgba(255,96,36,.55), 0 0 70px rgba(255,96,36,.30); } .hero--v8 .hero__cta:active { transform: translateY(0); } .hero--v8 .hero__scroll { position: absolute; bottom: 24px; right: 28px; z-index: 3; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.5); font-family: var(--font-en); font-size: 9.5px; letter-spacing: .32em; } .hero--v8 .hero__scroll__line { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4)); } @media (max-width: 720px) { .hero--v8 .hero__scroll { right: auto; left: 22px; bottom: 18px; } .hero--v8 .hero__content { padding: 90px 22px 110px; } } /* ============ HERO v8 — layout tweaks to match reference ============ */ @media (min-width: 720px) { .hero--v8 .hero__content { padding: 0 0 0 8vw !important; max-width: 50% !important; align-self: center; } } .hero--v8 .hero__content { padding: 110px 22px 90px !important; } @media (max-width: 720px) { .hero--v8 .hero__content { padding: 96px 22px 110px !important; max-width: 100%; } } /* Tighten the title block — more vertical rhythm like the ref */ .hero--v8 .hero__title { margin-bottom: 30px; } .hero--v8 .hero__title__line { margin-bottom: 8px; line-height: 1.7; } .hero--v8 .hero__launch { margin: 4px 0 36px; } .hero--v8 .hero__launch__date { margin-top: 14px; } /* Make the ring/waves crisper — reposition the SVG so the ring sits roughly at right 30% center */ .hero__deco-svg { width: 110%; left: -2%; } @media (max-width: 720px) { .hero__deco-svg { width: 220%; left: 0; bottom: -10%; top: auto; height: 70%; } } /* Hide dot stippling on mobile so it doesn't crowd the content */ @media (max-width: 720px) { .hero__dots { display: none; } } /* ============ HERO FINAL — exact reference image, clickable button overlay ============ */ .hero--final { position: relative; width: 100%; background: #000; overflow: hidden; padding: 0 !important; min-height: 0; display: block; aspect-ratio: 1536 / 1024; max-height: 100svh; } .hero--final .hero__bake { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } .hero--final .hero__button { position: absolute; left: 7.5%; bottom: 13%; width: 33%; height: 8%; border-radius: 999px; z-index: 3; background: transparent; cursor: pointer; transition: background .2s, box-shadow .25s, transform .15s; } .hero--final .hero__button:hover { background: rgba(255,255,255,.08); box-shadow: 0 0 50px rgba(255,96,36,.45); transform: translateY(-1px); } .hero--final .hero__button:active { transform: translateY(1px); } .hero--final .hero__button:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 6px; } .hero--final .hero__scroll { position: absolute; right: 24px; bottom: 20px; z-index: 3; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.5); font-family: var(--font-en); font-size: 9.5px; letter-spacing: .32em; } .hero--final .hero__scroll__line { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4)); } @media (max-width: 720px) { .hero--final .hero__scroll { display: none; } } /* ============ HERO TEXT — selectable HTML text + ring side image ============ */ .hero--text { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: flex-start; background: #000; overflow: hidden; padding: 0 !important; } .hero--text .hero__deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; display: flex; align-items: center; justify-content: flex-end; } .hero--text .hero__deco__img { height: 100%; width: auto; max-width: 65%; object-fit: contain; object-position: right center; display: block; } @media (max-width: 720px) { .hero--text .hero__deco { inset: auto 0 0 0; align-items: flex-end; height: 55%; } .hero--text .hero__deco__img { width: 100%; max-width: 130%; height: auto; object-position: right center; transform: translateX(20%); opacity: .8; } } .hero--text .hero__content { display: flex !important; position: relative; z-index: 2; width: 100%; max-width: 760px; padding: 110px 28px 90px; flex-direction: column; align-items: flex-start; } @media (min-width: 720px) { .hero--text .hero__content { padding: 0 0 0 8vw; max-width: 50%; align-self: center; } } .hero--text .hero__title { display: block !important; font-family: var(--font-mincho); font-weight: 500; color: #fff; margin: 0 0 36px; } .hero--text .hero__title__line { display: block; font-size: clamp(18px, 4.4vw, 26px); line-height: 1.75; letter-spacing: .07em; margin-bottom: 6px; color: #fff; } .hero--text .hero__launch { display: flex !important; flex-direction: column; align-items: flex-start; gap: 0; margin: 8px 0 36px; } .hero--text .hero__launch__en { font-family: var(--font-en); font-size: clamp(11px, 1.4vw, 13px); font-weight: 600; letter-spacing: .42em; color: rgba(255,255,255,.42); margin-bottom: 6px; } .hero--text .hero__launch__jp { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(60px, 16vw, 116px); line-height: 1; letter-spacing: .04em; margin: 4px 0; display: inline-flex; align-items: flex-end; gap: .02em; } .hero--text .hero__launch__jp .gradient-text { background: linear-gradient(180deg, #b3e0ff 0%, #5b9dff 50%, #7dffba 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(91,157,255,.35)); } .hero--text .hero__launch__tail { font-family: var(--font-mincho); font-weight: 500; font-size: .42em; color: #fff; margin-left: .12em; margin-bottom: .12em; letter-spacing: .04em; background: none; -webkit-text-fill-color: #fff; } .hero--text .hero__launch__date { font-family: var(--font-jp-bold); font-weight: 500; font-size: clamp(13px, 1.5vw, 16px); letter-spacing: .3em; color: #fff; margin-top: 14px; } .hero--text .hero__cta { display: inline-flex !important; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: #fff; font-family: var(--font-jp-bold); font-weight: 700; font-size: clamp(14px, 1.5vw, 16px); padding: 18px 32px; border: none; border-radius: 999px; letter-spacing: .04em; text-decoration: none; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(255,96,36,.40), 0 0 50px rgba(255,96,36,.20); transition: transform .2s, box-shadow .25s; position: relative; overflow: hidden; } .hero--text .hero__cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 45%); pointer-events: none; } .hero--text .hero__cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 40px rgba(255,96,36,.55), 0 0 70px rgba(255,96,36,.30); } .hero--text .hero__scroll { position: absolute; bottom: 24px; right: 28px; z-index: 3; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.5); font-family: var(--font-en); font-size: 9.5px; letter-spacing: .32em; } .hero--text .hero__scroll__line { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4)); } @media (max-width: 720px) { .hero--text .hero__scroll { display: none; } .hero--text .hero__content { padding: 90px 22px 200px; } } /* ============ HERO TEXT — final layout cleanup ============ */ .hero { min-height: 100svh !important; } .hero--text { position: relative; min-height: 100svh; background: #000; overflow: hidden; display: grid; grid-template-columns: 1fr; align-items: center; } @media (min-width: 720px) { .hero--text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .hero--text .hero__deco { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; } .hero--text .hero__deco__img { height: 100%; width: auto; max-height: 100vh; object-fit: cover; object-position: right center; display: block; opacity: .9; } @media (max-width: 720px) { .hero--text .hero__deco { top: auto; left: 0; right: -30%; bottom: -5%; align-items: flex-end; height: 50%; width: 130%; } .hero--text .hero__deco__img { height: 100%; width: auto; opacity: .55; } } .hero--text .hero__content { position: relative; z-index: 2; display: flex !important; flex-direction: column; align-items: flex-start; padding: 110px 28px 90px; grid-column: 1; max-width: 100%; } @media (min-width: 720px) { .hero--text .hero__content { padding: 100px 24px 100px 8vw; max-width: 100%; } } @media (min-width: 1200px) { .hero--text .hero__content { padding-left: 10vw; } } /* Title block sizing fixes */ .hero--text .hero__title { margin: 0 0 32px; } .hero--text .hero__title__line { font-size: clamp(17px, 2.2vw, 24px) !important; line-height: 1.7; letter-spacing: .06em; margin-bottom: 8px; } .hero--text .hero__launch__jp { font-size: clamp(56px, 9.5vw, 110px) !important; } .hero--text .hero__launch { margin: 4px 0 32px; } .hero--text .hero__launch__date { margin-top: 12px; } .hero--text .hero__cta { padding: 16px 28px !important; font-size: clamp(13px, 1.4vw, 15px) !important; } /* Safer line break for narrow screens */ @media (max-width: 360px) { .hero--text .hero__launch__jp { font-size: 48px !important; } } /* ============ HERO FINAL — kicker + sub + main + CTA + date ============ */ .hero--text .hero__content > * { display: block; margin: 0; } .hero--text .hero__kicker { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(15px, 1.6vw, 18px); letter-spacing: .08em; color: rgba(255,255,255,.78); margin-bottom: 18px; } .hero--text .hero__sub { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(22px, 3.2vw, 32px); letter-spacing: .08em; line-height: 1.5; color: #fff; margin-bottom: 28px; } .hero--text .hero__main { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(64px, 11vw, 132px); line-height: 1; letter-spacing: .04em; margin: 0 0 36px; display: inline-flex; align-items: flex-end; gap: .02em; } .hero--text .hero__main .gradient-text { background: linear-gradient(180deg, #b3e0ff 0%, #5b9dff 50%, #7dffba 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(91,157,255,.35)); } .hero--text .hero__main__tail { font-family: var(--font-mincho); font-weight: 500; font-size: .42em; color: #fff; margin-left: .12em; margin-bottom: .14em; letter-spacing: .04em; } .hero--text .hero__cta { display: inline-flex !important; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: #fff; font-family: var(--font-jp-bold); font-weight: 700; font-size: clamp(13px, 1.4vw, 16px); padding: 18px 30px; border: none; border-radius: 999px; letter-spacing: .04em; text-decoration: none; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(255,96,36,.40), 0 0 50px rgba(255,96,36,.20); transition: transform .2s, box-shadow .25s; position: relative; overflow: hidden; margin: 0 !important; } .hero--text .hero__cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 45%); pointer-events: none; } .hero--text .hero__cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 40px rgba(255,96,36,.55), 0 0 70px rgba(255,96,36,.30); } .hero--text .hero__date { font-family: var(--font-jp-bold); font-weight: 500; font-size: clamp(12px, 1.3vw, 14px); letter-spacing: .28em; color: rgba(255,255,255,.7); margin-top: 24px !important; } /* Hide previous title/launch leftovers if any reappear */ .hero--text .hero__title, .hero--text .hero__launch { display: none !important; } /* ============ HERO NEO — full spec implementation ============ */ .hero--neo { position: relative; width: 100%; min-height: 100svh; background: radial-gradient(ellipse at 70% 50%, #050505 0%, #000 60%); overflow: hidden; display: grid; align-items: center; padding: 0 !important; font-family: var(--font-mincho); } .hero__neo-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } /* Neon ring */ .neo-ring { position: absolute; top: 50%; right: -8vw; transform: translateY(-50%); width: 78vh; height: 78vh; max-width: 780px; max-height: 780px; min-width: 540px; min-height: 540px; border-radius: 50%; background: conic-gradient( from 220deg, transparent 0deg, #1E90FF 30deg, #4ec6e8 95deg, #00FF99 175deg, #00FF99 230deg, #1E90FF 290deg, transparent 340deg ); filter: drop-shadow(0 0 14px rgba(30,144,255,.55)) drop-shadow(0 0 28px rgba(0,255,153,.35)); z-index: 1; } .neo-ring__inner { position: absolute; inset: 1.6%; border-radius: 50%; background: #000; } @media (max-width: 720px) { .neo-ring { top: auto; bottom: -32%; right: -38%; transform: none; width: 120vw; height: 120vw; min-width: 0; min-height: 0; opacity: .7; } } /* Waves at bottom */ .neo-waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 50%; pointer-events: none; z-index: 1; } /* Bottom-right dot particles */ .neo-dots { position: absolute; right: -2%; bottom: -2%; width: 38%; height: 36%; background-image: radial-gradient(circle at 50% 50%, rgba(0,255,153,.55) 1px, transparent 1.6px), radial-gradient(circle at 50% 50%, rgba(30,144,255,.45) 1px, transparent 1.6px); background-size: 14px 14px, 20px 20px; background-position: 0 0, 8px 10px; mask-image: radial-gradient(ellipse at 100% 100%, #000 5%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 100% 100%, #000 5%, transparent 70%); opacity: .8; pointer-events: none; z-index: 1; } @media (max-width: 720px) { .neo-dots { display: none; } } /* Left text column */ .hero__neo-content { position: relative; z-index: 2; width: 100%; max-width: 720px; padding: 90px 28px 90px; display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 720px) { .hero__neo-content { padding: 0 0 0 7vw; max-width: 56%; } } /* Three top lines */ .neo-line { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(17px, 2vw, 24px); line-height: 1.9; letter-spacing: .08em; color: #fff; margin: 0 0 4px; } .neo-line:nth-of-type(3) { margin-bottom: 36px; } /* Main block */ .neo-mainblock { display: flex; flex-direction: column; align-items: flex-start; margin: 8px 0 36px; } .neo-mainblock__en { font-family: var(--font-en); font-size: clamp(11px, 1.3vw, 13px); font-weight: 500; letter-spacing: .5em; color: rgba(255,255,255,.42); margin-bottom: 8px; } .neo-mainblock__jp { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(64px, 12vw, 132px); line-height: 1; letter-spacing: .04em; margin: 0 0 4px; display: inline-flex; align-items: flex-end; gap: .02em; } .neo-mainblock__jp .gradient-text { background: linear-gradient(180deg, #1E90FF 0%, #5BD9D2 50%, #00FF99 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(30,144,255,.35)); } .neo-mainblock__tail { font-family: var(--font-mincho); font-weight: 500; font-size: .42em; color: #fff; margin-left: .14em; margin-bottom: .14em; letter-spacing: .04em; } .neo-mainblock__date { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-jp-bold); font-weight: 500; font-size: clamp(13px, 1.4vw, 16px); letter-spacing: .32em; color: #fff; margin: 18px 0 0; } .neo-line-bit { display: inline-block; width: 18px; height: 1px; background: rgba(255,255,255,.55); } /* CTA on hero */ .neo-cta { display: inline-flex !important; align-items: center; gap: 14px; background: linear-gradient(135deg, #F5841F 0%, #FF8A4D 100%); color: #fff; font-family: var(--font-jp-bold); font-weight: 700; font-size: clamp(13px, 1.4vw, 16px); padding: 18px 30px; border: none; border-radius: 999px; letter-spacing: .04em; text-decoration: none; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(245,132,31,.4), 0 0 50px rgba(245,132,31,.2); transition: transform .2s, box-shadow .25s, filter .2s; position: relative; overflow: hidden; } .neo-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 45%); pointer-events: none; } .neo-cta:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 40px rgba(245,132,31,.55), 0 0 70px rgba(245,132,31,.3); } .hero--neo .hero__scroll { position: absolute; bottom: 24px; right: 28px; z-index: 3; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.5); font-family: var(--font-en); font-size: 9.5px; letter-spacing: .32em; } .hero--neo .hero__scroll__line { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4)); } @media (max-width: 720px) { .hero--neo .hero__scroll { display: none; } } /* Hide legacy hero internals */ .hero--neo .hero__deco, .hero--neo .hero__image, .hero--neo .hero__ring, .hero--neo .hero__bake, .hero--neo .hero__button { display: none !important; } /* ============ EMPATHY — long-form story ============ */ .empathy__story { max-width: 640px; margin: 0 auto 56px; display: flex; flex-direction: column; gap: 28px; } .empathy__story p { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(15px, 2vw, 18px); line-height: 2.1; color: var(--ink-soft); letter-spacing: .04em; text-align: left; } .empathy__story p .hl { background: linear-gradient(transparent 65%, rgba(67,164,255,.38) 65%); font-weight: 700; color: var(--ink); } .empathy__story__strong { font-family: var(--font-mincho) !important; font-weight: 700 !important; font-size: clamp(17px, 2.4vw, 21px) !important; color: var(--ink) !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0 !important; } .empathy__story__quote { font-family: var(--font-mincho) !important; font-weight: 700 !important; font-size: clamp(17px, 2.6vw, 22px) !important; color: var(--ink) !important; text-align: center !important; } .empathy__quotes--3 { display: none !important; } .empathy__pivot__small, .empathy__pivot__big, .empathy__pivot__copy { display: none !important; } .empathy__pivot { text-align: center; padding-top: 0; border-top: 0; } .empathy__pivot__answer { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; padding: 22px 28px; background: linear-gradient(135deg, rgba(125,255,186,.10), rgba(91,157,255,.06)); border: 1px solid var(--line-strong); border-radius: 999px; } .empathy__pivot__answer .answer__text { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(18px, 5vw, 24px); color: var(--ink); letter-spacing: .04em; } .empathy__pivot__answer .answer__text em { background: linear-gradient(135deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; } /* ============ 5 FIELDS DIAGRAM (CSS-built) ============ */ .feature__image--diagram { margin: 0 !important; padding: 40px 16px; background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(91,157,255,.08), transparent 70%), #000; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .five-fields { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 720px; margin: 0 auto; } @media (min-width: 720px) { .five-fields { grid-template-columns: repeat(6, 1fr); max-width: 900px; gap: 14px; } } .five-fields__node { --c: #fff; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px 14px; background: rgba(255,255,255,.03); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); border-radius: 16px; text-align: center; transition: transform .25s, border-color .25s; } .five-fields__node::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: .8; border-radius: 16px 16px 0 0; } .five-fields__node:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 55%, var(--line)); } .five-fields__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); } .five-fields__icon svg { width: 22px; height: 22px; } .five-fields__label { font-family: var(--font-jp-bold); font-weight: 700; font-size: 12.5px; line-height: 1.45; color: var(--ink); letter-spacing: .03em; } .five-fields__node--center { grid-column: 1 / -1; padding: 32px 14px; background: radial-gradient(circle at 50% 50%, rgba(251,214,73,.18), transparent 65%), rgba(255,255,255,.04); border-color: color-mix(in srgb, var(--c) 50%, var(--line)); box-shadow: 0 0 30px rgba(251,214,73,.15); order: -1; } @media (min-width: 720px) { .five-fields__node--center { grid-column: 3 / span 2; grid-row: 1; order: 0; } } .five-fields__center { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(34px, 5vw, 48px); line-height: 1; background: linear-gradient(180deg, #fff 50%, var(--c) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 16px rgba(251,214,73,.4)); } .five-fields__center-en { font-family: var(--font-en-serif); font-style: italic; font-size: 13px; letter-spacing: .15em; color: var(--c); margin-top: 4px; } /* ============ STEPS6 — 6-step horizontal flow (Feature 03) ============ */ .steps6 { margin: 0 0 28px; } .steps6__caption { text-align: center; font-family: var(--font-mincho); font-weight: 500; font-size: clamp(14px, 1.8vw, 17px); color: var(--ink-soft); letter-spacing: .04em; margin: 0 0 28px; } .steps6__caption strong { font-family: var(--font-mincho); font-weight: 700; font-size: 1.4em; background: linear-gradient(180deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 .05em; } .steps6__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 720px) { .steps6__list { grid-template-columns: repeat(6, 1fr); gap: 10px; } } .steps6__item { --c: #fff; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 14px 18px; background: rgba(255,255,255,.03); border: 1px solid color-mix(in srgb, var(--c) 28%, var(--line)); border-radius: 14px; transition: transform .25s, border-color .25s; } .steps6__item::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: linear-gradient(90deg, transparent, var(--c), transparent); border-radius: 14px 14px 0 0; } .steps6__item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 55%, var(--line)); } .steps6__no { font-family: var(--font-en-serif); font-style: italic; font-weight: 500; font-size: 22px; color: var(--c); letter-spacing: .02em; margin-bottom: 10px; } .steps6__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); margin-bottom: 14px; } .steps6__icon svg { width: 28px; height: 28px; } .steps6__title { font-family: var(--font-mincho); font-weight: 700; font-size: 14.5px; line-height: 1.5; color: var(--ink); letter-spacing: .03em; margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); width: 100%; } .steps6__desc { font-family: var(--font-jp-bold); font-weight: 500; font-size: 11.5px; line-height: 1.7; color: var(--ink-mute); letter-spacing: .02em; } /* Bottom flow recap */ .steps6__flow { list-style: none; margin: 32px 0 0; padding: 18px 16px; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 12px; background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 12px; } .steps6__flow li { font-family: var(--font-jp-bold); font-weight: 700; font-size: 13px; color: var(--ink-soft); letter-spacing: .04em; } .steps6__flow__arrow { color: var(--ink-dim) !important; font-weight: 400 !important; } .steps6__flow__pin { margin-left: 12px; padding-left: 14px; border-left: 1px dashed var(--line-strong); color: var(--ink) !important; position: relative; } .steps6__flow__pin .serif { font-family: var(--font-mincho); font-weight: 700; background: linear-gradient(180deg, #fff, var(--glow-mint)); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (max-width: 720px) { .steps6__flow { padding: 14px; gap: 6px 10px; } .steps6__flow li { font-size: 12px; } .steps6__flow__pin { margin: 8px 0 0; padding: 8px 0 0; border-left: 0; border-top: 1px dashed var(--line-strong); width: 100%; text-align: center; } } /* ============ feature__lead (description between title and visual) ============ */ .feature__lead { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(15px, 2vw, 18px); line-height: 2; color: var(--ink-soft); letter-spacing: .04em; text-align: center; margin: 28px auto 36px; max-width: 720px; padding: 0 18px; } .feature__lead .hl { background: linear-gradient(transparent 65%, rgba(67,164,255,.38) 65%); font-weight: 700; color: var(--ink); } /* Tighten the space between header and diagram for feature 04 (diagram) */ .feature--imgful .feature__head { margin-bottom: 0 !important; } .feature__image--diagram { margin-top: 0 !important; } /* ============ STEPS6 — 2-column layout (Feature 03) ============ */ .steps6__list--2col { grid-template-columns: 1fr !important; gap: 18px !important; } @media (min-width: 720px) { .steps6__list--2col { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; max-width: 980px; margin-left: auto; margin-right: auto; } .steps6__list--2col .steps6__item { flex-direction: row; align-items: center; text-align: left; gap: 22px; padding: 28px 28px; } .steps6__list--2col .steps6__no { margin: 0; font-size: 30px; flex-shrink: 0; } .steps6__list--2col .steps6__icon { margin: 0; flex-shrink: 0; width: 64px; height: 64px; } .steps6__list--2col .steps6__icon svg { width: 32px; height: 32px; } .steps6__list--2col .steps6__body { flex: 1; min-width: 0; } .steps6__list--2col .steps6__title { text-align: left; padding-bottom: 8px; margin-bottom: 6px; font-size: 17px; } .steps6__list--2col .steps6__desc { text-align: left; font-size: 12.5px; } } /* ============ HERO v9 — left-aligned, clean rhythm ============ */ .hero--neo .hero__neo-content { align-items: flex-start; text-align: left; } .hero--neo .neo-kicker { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(15px, 1.7vw, 19px); line-height: 1.8; letter-spacing: .12em; color: rgba(255,255,255,.78); margin: 0 0 18px; } .hero--neo .neo-sub { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.4; letter-spacing: .08em; color: #fff; margin: 0 0 32px; } .hero--neo .neo-sub__em { font-family: var(--font-mincho); font-weight: 700; background: linear-gradient(180deg, #b3e0ff 0%, #5BD9D2 50%, #7DFFBA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(91,157,255,.4)); letter-spacing: .04em; } .hero--neo .neo-main { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(64px, 12vw, 132px); line-height: .95; letter-spacing: .04em; margin: 0 0 40px; display: inline-flex; align-items: flex-end; gap: .02em; } .hero--neo .neo-main .gradient-text { background: linear-gradient(180deg, #1E90FF 0%, #5BD9D2 50%, #00FF99 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(30,144,255,.40)) drop-shadow(0 0 60px rgba(0,255,153,.18)); } .hero--neo .neo-main__tail { font-family: var(--font-mincho); font-weight: 500; font-size: .42em; color: #fff; margin-left: .14em; margin-bottom: .14em; letter-spacing: .04em; } .hero--neo .neo-cta { margin: 0 0 28px; } .hero--neo .neo-date { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-jp-bold); font-weight: 500; font-size: clamp(13px, 1.4vw, 16px); letter-spacing: .32em; color: rgba(255,255,255,.85); margin: 0; } .hero--neo .neo-line-bit { display: inline-block; width: 18px; height: 1px; background: rgba(255,255,255,.55); } /* Hide old elements if any remain */ .hero--neo .neo-line, .hero--neo .neo-mainblock { display: none !important; } /* Reflow padding so content sits a bit higher on tall screens */ @media (min-width: 720px) { .hero--neo .hero__neo-content { padding-top: 0; padding-bottom: 0; align-self: center; } } @media (max-width: 720px) { .hero--neo .neo-main { font-size: clamp(56px, 16vw, 92px); } } /* ============ HERO v10 — 5 fields inside the neon ring ============ */ .neo-orbit { position: absolute; inset: 6%; border-radius: 50%; z-index: 2; } .neo-orbit__center { position: absolute; inset: 50%; width: 38%; aspect-ratio: 1; margin: 0; transform: translate(-50%, -50%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; } .neo-orbit__center-dots { position: absolute; inset: -8%; border-radius: 50%; border: 1px dotted rgba(125,255,186,.32); pointer-events: none; } .neo-orbit__center-dots::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px dotted rgba(91,217,210,.28); } .neo-orbit__center-text { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(11px, 1.05vw, 14px); line-height: 1.7; letter-spacing: .08em; color: rgba(255,255,255,.88); margin: 0; position: relative; z-index: 1; } /* Each node sits on the inner ring */ .neo-node { --c: #5BD9D2; position: absolute; width: 18%; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--c); } .neo-node__circle { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 1.4px solid color-mix(in srgb, var(--c) 75%, transparent); background: radial-gradient(circle, rgba(0,0,0,.85) 50%, rgba(0,0,0,0)) , #000; box-shadow: 0 0 12px color-mix(in srgb, var(--c) 35%, transparent), inset 0 0 14px color-mix(in srgb, var(--c) 14%, transparent); display: flex; align-items: center; justify-content: center; } .neo-node__circle svg { width: 50%; height: 50%; } .neo-node__label { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(11px, 1.1vw, 14px); letter-spacing: .12em; color: rgba(255,255,255,.92); } /* Position each node around the ring */ .neo-node--top { top: -4%; left: 50%; transform: translateX(-50%); } .neo-node--right { top: 28%; right: -4%; } .neo-node--br { bottom: 4%; right: 14%; } .neo-node--bl { bottom: 4%; left: 14%; } .neo-node--left { top: 28%; left: -4%; } @media (max-width: 720px) { .neo-orbit__center-text { font-size: 10px; } .neo-node__label { font-size: 10px; } } /* ============ HERO v9 — date now above CTA ============ */ .hero--neo .neo-date { margin: 0 0 22px; } .hero--neo .neo-cta { margin: 0; } /* ============ HERO BLANK ============ */ .hero--blank { position: relative; min-height: 100svh; background: #000; padding: 0 !important; } /* ============ HERO FRESH — minimal, refined, aurora ribbon ============ */ .hero--fresh { position: relative; min-height: 100svh; width: 100%; background: radial-gradient(ellipse 80% 60% at 85% 50%, rgba(91,217,210,.05), transparent 70%), radial-gradient(ellipse 50% 40% at 10% 100%, rgba(30,144,255,.06), transparent 70%), #000; overflow: hidden; padding: 0 !important; display: flex; align-items: center; font-family: var(--font-mincho); } /* Thin top gradient line */ .fresh-topline { position: absolute; top: 64px; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(91,217,210,.18) 20%, rgba(125,255,186,.32) 60%, transparent 100% ); z-index: 1; } /* Aurora SVG decoration */ .fresh-aurora { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } /* Twinkling stars */ .fresh-stars { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .fresh-stars span { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; background: #fff; border-radius: 50%; box-shadow: 0 0 8px #fff, 0 0 16px var(--glow-mint); opacity: var(--s); animation: freshTwinkle 3.5s ease-in-out infinite; animation-delay: var(--d); } @keyframes freshTwinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: var(--s, .8); transform: scale(1); } } /* "2026" watermark — barely-there big number on far right */ .fresh-watermark { position: absolute; right: -3vw; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; font-family: var(--font-en-serif); font-style: italic; font-weight: 400; font-size: clamp(120px, 18vw, 220px); color: transparent; -webkit-text-stroke: 1px rgba(125,255,186,.12); letter-spacing: .04em; z-index: 1; pointer-events: none; user-select: none; white-space: nowrap; } @media (max-width: 720px) { .fresh-watermark { display: none; } } /* Content stack */ .fresh-content { position: relative; z-index: 3; width: 100%; max-width: 760px; padding: 120px 28px 90px; display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 720px) { .fresh-content { padding: 100px 0 100px 8vw; max-width: 60%; } } @media (min-width: 1200px) { .fresh-content { padding-left: 9vw; max-width: 55%; } } /* Eyebrow */ .fresh-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: clamp(10px, 1.1vw, 12px); font-weight: 600; letter-spacing: .35em; color: rgba(255,255,255,.55); padding: 7px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.02); margin-bottom: 40px; } .fresh-eyebrow__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--glow-mint); box-shadow: 0 0 6px var(--glow-mint), 0 0 12px var(--glow-mint); animation: freshPulse 1.8s ease-in-out infinite; } @keyframes freshPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } } /* Kicker */ .fresh-kicker { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(15px, 1.7vw, 19px); line-height: 1.8; letter-spacing: .14em; color: rgba(255,255,255,.82); margin: 0 0 22px; } /* Sub message */ .fresh-sub { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.5; letter-spacing: .08em; color: #fff; margin: 0 0 40px; } .fresh-sub__em { font-family: var(--font-mincho); font-weight: 700; background: linear-gradient(180deg, #b3e0ff 0%, #5BD9D2 50%, #7DFFBA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(91,157,255,.4)); } /* Main title */ .fresh-main { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(72px, 13vw, 144px); line-height: .95; letter-spacing: .04em; margin: 0 0 32px; display: inline-flex; align-items: flex-end; gap: .02em; } .fresh-main__brand { background: linear-gradient(180deg, #1E90FF 0%, #5BD9D2 50%, #00FF99 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 40px rgba(30,144,255,.40)) drop-shadow(0 0 80px rgba(0,255,153,.20)); letter-spacing: .03em; } .fresh-main__tail { font-family: var(--font-mincho); font-weight: 500; font-size: .42em; color: #fff; margin-left: .14em; margin-bottom: .14em; letter-spacing: .04em; } /* Date with horizontal lines */ .fresh-date { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 36px; } .fresh-date__line { display: inline-block; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55)); } .fresh-date__line:last-child { background: linear-gradient(90deg, rgba(255,255,255,.55), transparent); } .fresh-date__text { font-family: var(--font-jp-bold); font-weight: 500; font-size: clamp(13px, 1.45vw, 16px); letter-spacing: .32em; color: rgba(255,255,255,.92); } /* CTA — orange pill */ .fresh-cta { display: inline-flex; align-items: center; gap: 16px; padding: 18px 32px; background: linear-gradient(135deg, #F5841F 0%, #FF8A4D 100%); color: #fff; font-family: var(--font-jp-bold); font-weight: 700; font-size: clamp(14px, 1.45vw, 16px); letter-spacing: .06em; border-radius: 999px; text-decoration: none; border: none; box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 14px 32px rgba(245,132,31,.40), 0 0 60px rgba(245,132,31,.20); transition: transform .2s, box-shadow .25s, filter .2s; position: relative; overflow: hidden; } .fresh-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 45%); pointer-events: none; } .fresh-cta:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 20px 44px rgba(245,132,31,.55), 0 0 80px rgba(245,132,31,.32); } .fresh-cta__arrow { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.18); transition: transform .25s; } .fresh-cta:hover .fresh-cta__arrow { transform: translateX(3px); } .fresh-cta__arrow svg { width: 13px; height: 13px; } /* Scroll cue */ .fresh-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,.5); font-family: var(--font-en); font-size: 10px; letter-spacing: .35em; } .fresh-scroll__line { width: 1px; height: 36px; background: linear-gradient(180deg, rgba(255,255,255,.45), transparent); position: relative; overflow: hidden; } .fresh-scroll__line::after { content: ""; position: absolute; left: 0; top: -36px; width: 100%; height: 36px; background: linear-gradient(180deg, transparent, var(--glow-mint)); animation: freshScroll 2s ease-in-out infinite; } @keyframes freshScroll { 0% { top: -36px; } 100% { top: 36px; } } @media (max-width: 720px) { .fresh-scroll { left: 24px; transform: none; bottom: 20px; } .fresh-content { padding: 110px 22px 110px; max-width: 100%; } .fresh-sub { font-size: clamp(22px, 6vw, 32px); margin-bottom: 28px; } .fresh-main { font-size: clamp(60px, 16vw, 100px); margin-bottom: 24px; } .fresh-aurora { opacity: .85; } } /* Hide blank shell */ .hero--blank { display: none; } /* ============ HERO: force horizontal + left align ============ */ .fresh-content { align-items: flex-start !important; text-align: left !important; } .fresh-main { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: baseline !important; white-space: nowrap !important; width: auto !important; max-width: 100% !important; } .fresh-main__brand { display: inline-block !important; writing-mode: horizontal-tb !important; text-orientation: mixed !important; } .fresh-main__tail { display: inline-block !important; writing-mode: horizontal-tb !important; align-self: flex-end !important; } @media (max-width: 720px) { .fresh-main { font-size: clamp(54px, 16vw, 92px) !important; } } /* ============ FIELDS5 — floating cards (Feature 02) ============ */ .fields5 { margin: 24px 0 0; padding: 8px 0 20px; } .fields5__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (min-width: 720px) { .fields5__list { grid-template-columns: repeat(5, 1fr); gap: 18px; } } .fields5__card { --c: #5b9dff; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 18px 26px; background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%); border: 1px solid color-mix(in srgb, var(--c) 22%, rgba(255,255,255,.08)); border-radius: 20px; box-shadow: 0 24px 40px -20px rgba(0,0,0,.6), 0 8px 20px -10px color-mix(in srgb, var(--c) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.05); transition: transform .3s ease, box-shadow .3s ease, border-color .3s; } .fields5__card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -20px rgba(0,0,0,.7), 0 14px 28px -10px color-mix(in srgb, var(--c) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.08); border-color: color-mix(in srgb, var(--c) 45%, rgba(255,255,255,.10)); } .fields5__card:nth-child(odd) { animation: float5 6s ease-in-out infinite; } .fields5__card:nth-child(even) { animation: float5 6s ease-in-out -3s infinite; } @keyframes float5 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .fields5__icon { width: 108px; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%), rgba(255,255,255,.02); border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--c); box-shadow: 0 0 24px color-mix(in srgb, var(--c) 25%, transparent), inset 0 0 16px color-mix(in srgb, var(--c) 10%, transparent); margin-bottom: 22px; } .fields5__icon svg { width: 50%; height: 50%; } .fields5__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .fields5__title { font-family: var(--font-jp-bold); font-weight: 700; font-size: 14.5px; line-height: 1.55; color: var(--ink); letter-spacing: .04em; margin: 0 0 12px; min-height: 2.6em; display: flex; align-items: center; justify-content: center; } .fields5__divider { display: block; width: 26px; height: 2px; background: var(--c); border-radius: 2px; margin: 0 auto 12px; opacity: .85; } .fields5__sub { font-family: var(--font-jp-bold); font-weight: 500; font-size: 12px; line-height: 1.7; color: var(--ink-mute); letter-spacing: .03em; margin: 0; } /* Hide the old container/diagram styles when fields5 is used */ .feature__image--diagram { display: none !important; } /* ============ feature__lead left align ============ */ .feature__lead--left { text-align: left !important; margin-left: 0 !important; } /* ============ FLOW6 — 6-step card flow (reference style) ============ */ .flow6 { margin: 28px 0 0; } .flow6__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; } .flow6__arrow { display: none; } @media (min-width: 860px) { .flow6__list { display: flex; align-items: stretch; gap: 0; } .flow6__item { flex: 1; min-width: 0; } .flow6__arrow { display: flex; align-items: center; flex: 0 0 14px; align-self: center; } .flow6__arrow::before { content: ""; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 9px solid var(--ink-dim); margin: 0 2px; } } .flow6__item { --c: #3b7ddb; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 14px 24px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid color-mix(in srgb, var(--c) 25%, rgba(255,255,255,.08)); border-radius: 16px; border-top: 3px solid var(--c); box-shadow: 0 20px 36px -20px rgba(0,0,0,.6), 0 4px 14px -8px color-mix(in srgb, var(--c) 35%, transparent); transition: transform .25s, box-shadow .25s; } .flow6__item:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -20px rgba(0,0,0,.7), 0 8px 20px -8px color-mix(in srgb, var(--c) 50%, transparent); } .flow6__no { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px dotted color-mix(in srgb, var(--c) 70%, transparent); font-family: var(--font-en); font-weight: 700; font-size: 16px; color: var(--c); letter-spacing: .02em; margin-bottom: 16px; } .flow6__title { font-family: var(--font-jp-bold); font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--ink); letter-spacing: .03em; margin: 0 0 12px; } .flow6__desc { font-family: var(--font-jp-bold); font-weight: 500; font-size: 11.5px; line-height: 1.75; color: var(--ink-mute); letter-spacing: .02em; margin: 0 0 18px; flex: 1; } .flow6__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; color: var(--c); margin-top: auto; } .flow6__icon svg { width: 100%; height: 100%; } /* Ensure 5-fields cards never clip the 5th (AI) on desktop */ @media (min-width: 720px) { .fields5__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 719px) { .fields5__list { grid-template-columns: repeat(2, 1fr); } .fields5__card:last-child { grid-column: 1 / -1; } } /* ============ FIELDS5 — grouped frames (8 items in 3 groups) ============ */ .fields5 { display: flex; flex-direction: column; gap: 22px; margin: 24px 0 0; padding: 8px 0 20px; } .fields5__group { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.10); border-radius: 22px; padding: 22px 20px 24px; } .fields5__group__label { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-jp-bold); font-weight: 700; font-size: 13px; letter-spacing: .1em; color: #fff; margin-bottom: 18px; } .fields5__group__dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 8px currentColor; } .fields5__group .fields5__list { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 720px) { .fields5__group .fields5__list { grid-template-columns: repeat(3, 1fr); gap: 18px; } /* groups with 2 cards: keep cards left-aligned, not stretched across 3 cols */ .fields5__group:last-child .fields5__list { grid-template-columns: repeat(3, 1fr); } } .fields5__card { width: auto !important; min-width: 0; } /* ============ FLOW6 — 3 per row (override flex) ============ */ .flow6__list { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; } @media (min-width: 860px) { .flow6__list { grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; } } .flow6__arrow { display: none !important; } .flow6__item { flex: none !important; } /* ============ TEXT CONTRAST — make faint white solid ============ */ :root { --ink-soft: rgba(255,255,255,.92) !important; --ink-mute: rgba(255,255,255,.78) !important; } .empathy__story p, .feature__desc, .feature__lead, .fields5__sub, .flow6__desc, .t-card__role, .t-special__role, .qa__a p, .students-pair__people .sp-person__from, .student-acc__inner p, .school__lead, .apply__lead, .forwho__item p { color: rgba(255,255,255,.9) !important; } /* Empathy pivot left align */ .empathy__pivot--left { text-align: left !important; } .empathy__pivot--left .empathy__pivot__answer { justify-content: flex-start !important; } /* ============ FEATURE — light card variant (all 5 reasons, off-white) ============ */ .feature--light { background: radial-gradient(120% 120% at 100% 0%, #ffffff, transparent 55%), linear-gradient(165deg, #f1f3f6 0%, #e8ebf0 100%) !important; border-color: rgba(17,21,29,.10) !important; } .feature--light::after { opacity: .5; mix-blend-mode: multiply; } .feature--light .feature__no__big { background: linear-gradient(180deg, #2f6fe0, #1f9e6e) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } .feature--light .feature__no__en { color: rgba(17,21,29,.5) !important; } .feature--light .feature__kicker { color: #2f6fe0 !important; } .feature--light .feature__title { color: #11151d !important; } .feature--light .feature__desc, .feature--light .feature__lead { color: #2a2f3a !important; } .feature--light .feature__title .hl, .feature--light .feature__lead .hl, .feature--light .feature__desc .hl { background: linear-gradient(transparent 62%, rgba(47,111,224,.24) 62%) !important; } /* 04 diagram: inner translucent-white chips would wash out on light — make them solid */ .feature--light .fields5__group { background: rgba(17,21,29,.025) !important; border-color: rgba(17,21,29,.10) !important; } .feature--light .fields5__group__label { color: #11151d !important; } .feature--light .fields5__card { background: #ffffff !important; border-color: color-mix(in srgb, var(--c) 30%, rgba(17,21,29,.10)) !important; box-shadow: 0 18px 34px -20px rgba(17,21,29,.30), 0 6px 16px -10px color-mix(in srgb, var(--c) 35%, transparent) !important; } .feature--light .fields5__title { color: #11151d !important; } .feature--light .fields5__sub { color: #4a505c !important; } /* 04 tools tray: dark chips read fine on light; only the heading text needs darkening */ .feature--light .tools { background: rgba(17,21,29,.03) !important; border-color: rgba(17,21,29,.10) !important; } .feature--light .tools__title { color: #11151d !important; } .feature--light .tools__title .serif { background: linear-gradient(180deg, #1f9e6e, #2f6fe0) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } .feature--light .tools__title .hl { background: linear-gradient(transparent 62%, rgba(47,111,224,.24) 62%) !important; } .feature--light .tools__note { color: rgba(17,21,29,.55) !important; } /* 05 flow diagram: white-on-dark steps → solid light cards with dark text */ .feature--light .flow6__heading { color: #11151d !important; } .feature--light .flow6__item { background: #ffffff !important; border-color: color-mix(in srgb, var(--c) 28%, rgba(17,21,29,.10)) !important; box-shadow: 0 14px 28px -20px rgba(17,21,29,.30) !important; } .feature--light .flow6__desc { color: #4a505c !important; } .feature--light .flow6__arrow { color: rgba(17,21,29,.28) !important; } /* ============ FLOW6 — match reference (number circle + dashed flank + colored title) ============ */ .flow6__item { --c: #3b7ddb; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 18px 26px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid color-mix(in srgb, var(--c) 22%, rgba(255,255,255,.08)); border-bottom: 3px solid var(--c); border-radius: 16px; box-shadow: 0 18px 32px -20px rgba(0,0,0,.6); } .flow6__item::before { content: none; } .flow6__head { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-bottom: 14px; } .flow6__dash { flex: 1; height: 0; border-top: 1.5px dashed color-mix(in srgb, var(--c) 45%, transparent); max-width: 60px; } .flow6__no { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px dotted color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); font-family: var(--font-en); font-weight: 700; font-size: 18px; color: var(--c); flex-shrink: 0; margin: 0; } .flow6__title { font-family: var(--font-jp-bold); font-weight: 700; font-size: 16px; line-height: 1.45; color: var(--c) !important; letter-spacing: .03em; margin: 0 0 10px; } .flow6__desc { font-family: var(--font-jp-bold); font-weight: 500; font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.82) !important; letter-spacing: .02em; margin: 0 0 18px; flex: 1; } .flow6__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; color: var(--c); margin: 0; } .flow6__icon svg { width: 100%; height: 100%; } /* ============ FLOW6 — exact reference layout (left text, centered icon, chevrons) ============ */ .flow6__list { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; } @media (min-width: 860px) { .flow6__list { grid-template-columns: repeat(3, 1fr) !important; gap: 40px 30px !important; } } .flow6__item { align-items: stretch !important; text-align: left !important; padding: 22px 22px 24px !important; } .flow6__head { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-bottom: 16px; } .flow6__dash { max-width: none; } .flow6__title { text-align: left !important; margin: 0 0 8px !important; } .flow6__desc { text-align: left !important; margin: 0 0 16px !important; } .flow6__icon { align-self: center !important; width: 64px !important; height: 64px !important; margin-top: auto !important; } /* Chevron arrows between cards (desktop only) */ @media (min-width: 860px) { .flow6__item { position: relative; } .flow6__item:not(:nth-child(3n))::after { content: ""; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 11px solid rgba(255,255,255,.35); z-index: 2; } } /* ============ FLOW6 heading block ============ */ .flow6__head-block { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 36px; } .flow6__heading { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(24px, 4vw, 38px); letter-spacing: .06em; color: #fff; margin: 0; text-align: center; } .flow6__heading__num { background: linear-gradient(180deg, var(--glow-mint), var(--glow-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.2em; margin: 0 .05em; } .flow6__dots { display: inline-flex; align-items: center; gap: 12px; } .flow6__dots i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px currentColor; } /* ============ empathy quote — force left align ============ */ .empathy__story__quote { text-align: left !important; } /* ============ FLOW6 — refined redesign ============ */ .flow6 { margin: 8px 0 0; padding: 8px 0 0; } .flow6__list { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; counter-reset: none; } @media (min-width: 860px) { .flow6__list { grid-template-columns: repeat(3, 1fr) !important; gap: 44px 26px !important; } } .flow6__item { --c: #3b7ddb; position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 26px 24px 24px; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c) 9%, transparent), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)); border: 1px solid color-mix(in srgb, var(--c) 26%, rgba(255,255,255,.08)); border-radius: 18px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.7); overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; } .flow6__item::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); } .flow6__item:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c) 50%, rgba(255,255,255,.10)); box-shadow: 0 28px 50px -24px rgba(0,0,0,.8), 0 0 30px -12px color-mix(in srgb, var(--c) 50%, transparent); } /* number row: big watermark number + dashed flanks */ .flow6__head { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; margin-bottom: 18px; } .flow6__dash { flex: 1; height: 0; border-top: 1.5px dashed color-mix(in srgb, var(--c) 40%, transparent); } .flow6__no { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 12%, #000); box-shadow: 0 0 18px -4px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 12px -6px color-mix(in srgb, var(--c) 80%, transparent); font-family: var(--font-en); font-weight: 800; font-size: 19px; color: var(--c); flex-shrink: 0; } .flow6__title { font-family: var(--font-jp-bold); font-weight: 700; font-size: 17px; line-height: 1.5; color: var(--c) !important; letter-spacing: .03em; text-align: center; margin: 0 0 10px; } .flow6__desc { font-family: var(--font-jp-bold); font-weight: 500; font-size: 12.5px; line-height: 1.75; color: rgba(255,255,255,.85) !important; letter-spacing: .02em; text-align: center; margin: 0 0 20px; flex: 1; } .flow6__icon { align-self: center; width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); color: var(--c); margin-top: auto; } .flow6__icon svg { width: 30px; height: 30px; } /* chevron between cards on desktop */ @media (min-width: 860px) { .flow6__item:not(:nth-child(3n))::after { content: ""; position: absolute; right: -19px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid rgba(255,255,255,.4); z-index: 3; } } .flow6__arrow { display: none !important; } /* ============ FLOW6 — match reference: left-aligned text, centered icon ============ */ .flow6__title { text-align: left !important; } .flow6__desc { text-align: left !important; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); } .flow6__icon { align-self: center !important; } .flow6__head { margin-bottom: 16px; } /* ============ FLOW6 — guarantee 3-up rows (01-03 / 04-06) ============ */ @media (min-width: 700px) { .flow6__list { grid-template-columns: repeat(3, 1fr) !important; gap: 44px 26px !important; } .flow6__item:not(:nth-child(3n))::after { content: ""; position: absolute; right: -19px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid rgba(255,255,255,.4); z-index: 3; } } /* ============ feature lead after flow6 ============ */ .feature__lead--after { text-align: center !important; margin: 40px auto 0 !important; max-width: 720px; } @media (min-width: 720px) { .feature__lead--after { text-align: center !important; } } /* ============ HERO BG — image background + scrim + text on top ============ */ .hero--bg { position: relative; } .hero__bgmedia { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero__bgslot { display: block; width: 100%; height: 100%; } .hero__bgslot::part(image) { object-fit: cover; } /* scrim: darken left where text sits, lighter on the right */ .hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.66) 42%, rgba(0,0,0,.34) 75%, rgba(0,0,0,.5) 100%), linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.7) 100%); } @media (max-width: 720px) { .hero__scrim { background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.85) 100%); } } /* keep aurora subtle on top of photo, content above everything */ .hero--bg .fresh-aurora { z-index: 1; opacity: .5; mix-blend-mode: screen; } .hero--bg .fresh-stars { z-index: 1; } .hero--bg .fresh-watermark { z-index: 1; } .hero--bg .fresh-content { z-index: 3; } .hero--bg .fresh-topline { z-index: 2; } .hero--bg .fresh-scroll { z-index: 3; } /* ============ MOBILE FIXES (special teachers + students photo) ============ */ @media (max-width: 720px) { /* Special guest teachers: stack into single column, one full card each */ .t-special__grid { grid-template-columns: 1fr !important; gap: 16px !important; } .t-special { display: flex; flex-direction: row; align-items: center; gap: 18px; text-align: left; padding: 18px 20px; } .t-special__visual { flex: 0 0 140px; width: 140px; aspect-ratio: 1; margin: 0 !important; } .t-special__body { flex: 1; min-width: 0; text-align: left; } .t-special__name { justify-content: flex-start; font-size: 23px !important; } .t-special__en { font-size: 13px !important; } .t-special__role { font-size: 13px !important; line-height: 1.7 !important; } .t-special__tag { font-size: 10px !important; } /* School photo grid: 2x2 on mobile so tiles + captions don't cram/overlap */ .school__photos { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .school__photo--sub { aspect-ratio: 4 / 3; } .school__photo__caption { font-size: 9px !important; letter-spacing: .1em !important; padding: 4px 8px !important; left: 8px !important; bottom: 8px !important; } /* Students intro photo: show full bodies, not just feet */ .students__intro__photo-wrap { max-width: 100%; aspect-ratio: 3 / 4; } .students__intro__photo-wrap img { max-height: 100%; max-width: 100%; object-fit: contain; object-position: center bottom; } } /* ============ sp-br: line breaks only on mobile ============ */ .sp-br { display: none; } @media (max-width: 720px) { .sp-br { display: inline; } /* flow6: center-align cards on mobile + don't break the short descriptions */ .flow6__item { text-align: center !important; align-items: center !important; } .flow6__title, .flow6__desc { text-align: center !important; } .flow6__desc br { display: none; } /* students intro photo: show both students' full bodies */ .students__intro__photo-wrap { max-width: 100% !important; aspect-ratio: 3 / 4 !important; background: #0a0c14 !important; } .students__intro__photo-wrap img { max-height: 100% !important; max-width: 100% !important; width: auto !important; height: 100% !important; object-fit: contain !important; object-position: center center !important; } } /* ============ PREMIUM MOTION ============ */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16,.7,.3,1), transform .9s cubic-bezier(.16,.7,.3,1); will-change: opacity, transform; } .reveal--in { opacity: 1; transform: none; } } /* Refined CTA / card hover easing site-wide */ .btn, .hero__cta, .fresh-cta, .nav__cta, .sticky-cta, .fields5__card, .flow6__item, .t-card, .student-acc__item, .date, .qa__item, .tool { transition: transform .35s cubic-bezier(.16,.7,.3,1), box-shadow .35s cubic-bezier(.16,.7,.3,1), border-color .35s ease, background .35s ease; } /* Hero CTA: soft breathing glow to draw the eye */ @media (prefers-reduced-motion: no-preference) { .fresh-cta { animation: ctaBreath 3.6s ease-in-out infinite; } @keyframes ctaBreath { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 14px 32px rgba(245,132,31,.40), 0 0 40px rgba(245,132,31,.18); } 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 16px 38px rgba(245,132,31,.52), 0 0 64px rgba(245,132,31,.30); } } .fresh-cta:hover { animation-play-state: paused; } } /* Gentle shimmer sweep across the hero title gradient */ @media (prefers-reduced-motion: no-preference) { .fresh-main__brand { background-size: 100% 220%; animation: brandShimmer 7s ease-in-out infinite; } @keyframes brandShimmer { 0%, 100% { background-position: 50% 0%; } 50% { background-position: 50% 100%; } } } /* Section headings: underline-style accent wipes in when revealed */ .eyebrow { position: relative; } /* ============ MOBILE: one-line headings + flow6 06 ============ */ @media (max-width: 720px) { .students__title { font-size: clamp(22px, 6.4vw, 30px) !important; white-space: nowrap; } .teachers__title { font-size: clamp(22px, 6.4vw, 30px) !important; } .teachers__title br { display: none; } /* keep flow6 titles on one logical line where intended */ .flow6__title { white-space: nowrap; } } /* legend dot / cell color for 06 changed to purple — keep flow legends consistent */ /* ============ CLOSING SECTION ============ */ .closing { position: relative; padding: 140px 6vw 150px; overflow: hidden; background: radial-gradient(120% 90% at 50% -10%, rgba(67,164,255,.10), transparent 60%), linear-gradient(180deg, #04060a 0%, #060810 100%); border-top: 1px solid var(--line); } .closing__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .closing__orb { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); width: min(720px, 90vw); height: min(720px, 90vw); background: radial-gradient(circle, rgba(67,164,255,.18), rgba(123,255,186,.06) 45%, transparent 70%); filter: blur(20px); opacity: .8; } .closing__inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; text-align: center; } .closing__title { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(28px, 4vw, 48px); line-height: 1.5; letter-spacing: .02em; color: var(--ink); margin: 18px 0 46px; text-wrap: balance; } .closing__title-em { background: linear-gradient(100deg, #43a4ff 0%, #7bffba 55%, #43e4ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .closing__body { display: flex; flex-direction: column; gap: 26px; font-family: var(--font-mincho); font-size: clamp(15px, 1.45vw, 19px); line-height: 2.15; letter-spacing: .03em; color: rgba(255,255,255,.86); } .closing__body p { margin: 0; text-wrap: pretty; } .closing__lead { margin: 52px 0 0; font-family: var(--font-mincho); font-weight: 700; font-size: clamp(19px, 2.3vw, 30px); line-height: 1.8; letter-spacing: .04em; color: var(--ink); } .closing__lead-em { background: linear-gradient(180deg, #fff 0%, var(--glow-mint) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (max-width: 720px) { .closing { padding: 96px 7vw 104px; } .closing__body { gap: 20px; line-height: 2; } .closing__lead { margin-top: 40px; } } /* ============================================================ HERO — PHOTO VERSION (bright students photo + legible text) ============================================================ */ .hero--photo { position: relative; width: 100%; max-width: 100%; min-width: 0; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: #04060a; } .heroP__media { position: absolute; inset: 0; z-index: 0; } .heroP__slot { display: block; width: 100%; height: 100%; } .heroP__slot::part(image) { object-fit: cover; object-position: center center; } /* Legibility: dark wash anchored bottom-left, fading up & right */ .heroP__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, rgba(4,7,13,.92) 0%, rgba(4,7,13,.78) 26%, rgba(4,7,13,.30) 52%, rgba(4,7,13,0) 72%), linear-gradient(0deg, rgba(4,7,13,.75) 0%, rgba(4,7,13,.10) 30%, rgba(4,7,13,0) 55%); } .heroP__topline { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(67,164,255,.7) 30%, rgba(123,255,186,.7) 60%, transparent); opacity: .8; } .heroP__content { position: relative; z-index: 3; padding: 120px 5vw 120px 4vw; max-width: 820px; min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 1200px) { .heroP__content { padding-left: 4vw; } } .heroP__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 30px; padding: 9px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 100px; background: rgba(255,255,255,.06); backdrop-filter: blur(6px); } .heroP__eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: #7DFFBA; box-shadow: 0 0 10px #7DFFBA; } .heroP__eyebrow__text { font-family: var(--font-en-serif, serif); font-size: 12px; letter-spacing: .28em; font-weight: 500; color: rgba(255,255,255,.92); } .heroP__sub { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(18px, 2.1vw, 27px); line-height: 1.85; letter-spacing: .06em; color: #fff; margin: 0 0 26px; text-shadow: 0 2px 24px rgba(0,0,0,.6); } .heroP__title { margin: 0; line-height: 1; } .heroP__brand { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(44px, 7vw, 84px); letter-spacing: .05em; line-height: 1.15; background: linear-gradient(160deg, #6fb9ff 0%, #5BD9D2 48%, #7DFFBA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 40px rgba(67,164,255,.35)); display: inline-block; } .heroP__open { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(44px, 7vw, 84px); letter-spacing: .05em; line-height: 1.15; color: #fff; margin: 2px 0 30px; text-shadow: 0 2px 24px rgba(0,0,0,.55); } .nowrap { white-space: nowrap; } @media (max-width: 720px) { .heroP__open { font-size: clamp(30px, 8.6vw, 44px); white-space: nowrap; } } .heroP__badge { display: inline-block; font-family: var(--font-jp-bold, sans-serif); font-size: clamp(12px, 1.3vw, 15px); letter-spacing: .08em; color: #fff; background: rgba(6,9,16,.82); border: 1px solid rgba(255,255,255,.2); padding: 6px 18px; margin-bottom: 34px; backdrop-filter: blur(4px); } .heroP__cta { width: auto; padding: 0 30px; height: 56px; } .heroP__scroll { z-index: 3; } @media (max-width: 720px) { .hero--photo { align-items: flex-end; } .heroP__slot::part(image) { object-position: 64% center; } .heroP__scrim { background: linear-gradient(0deg, rgba(4,7,13,.94) 0%, rgba(4,7,13,.62) 36%, rgba(4,7,13,.18) 64%, rgba(4,7,13,0) 100%); } .heroP__content { padding: 120px 24px 120px; max-width: 100%; } .heroP__sub { white-space: normal; } .heroP__sub br { display: none; } .heroP__badge { white-space: normal; line-height: 1.6; } } /* ============ 3 text reason cards (01-03) ============ */ .reasons3 { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; } .reason3 { position: relative; background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 4px; padding: 30px 26px 28px; overflow: hidden; } .reason3::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, #43a4ff, #5be0d0); opacity: .75; } .reason3__no { display: block; font-family: var(--font-en-serif); font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: .04em; margin-bottom: 14px; background: linear-gradient(120deg, #6fb6ff, #5be0d0); -webkit-background-clip: text; background-clip: text; color: transparent; } .reason3__title { font-family: var(--font-mincho); font-weight: 600; font-size: 18px; line-height: 1.5; letter-spacing: .02em; color: #fff; margin: 0 0 12px; } .reason3__body { font-family: var(--font-mincho); font-size: 13.5px; line-height: 2.0; color: rgba(255,255,255,.74); margin: 0; text-wrap: pretty; } @media (min-width: 880px) { .reasons3 { grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 16px; } .reason3 { padding: 36px 30px 34px; } .reason3__no { font-size: 38px; margin-bottom: 18px; } .reason3__title { font-size: 20px; } .reason3__body { font-size: 14px; } }