/* ========================================================================== PLUS ALPHA CO., LTD. — plus-alp.jp Tokens are derived from the actual brand assets: sumi #231916 ... ground colour inside the UKIYOZA logo artwork kin #C09858 ... gold used on the PLUS ALPHA business card kon #2F2D6A ... navy used in the UKIYOZA COFFEE logo ========================================================================== */ :root { --sumi: #231916; --sumi-soft: #4a3d38; --kin: #c09858; --kon: #2f2d6a; --paper: #ffffff; --paper-2: #f4f2ee; --hai: #8d857f; --line: #e2ded8; --latin: "Jost", "Helvetica Neue", Arial, sans-serif; --jp: "Noto Sans JP", sans-serif; --jp-serif: "Shippori Mincho", serif; /* 1i「基線」: ヒーロー4要素が乗るベースライン。間隔と行送りの両方を兼ねる */ --rhythm: 2.5rem; --gut: clamp(1.5rem, 6vw, 6rem); --sec: clamp(6rem, 14vh, 11rem); --max: 1140px; } /* language-specific families, set per ------------------------ */ html[lang="zh-Hans"] { --jp: "Noto Sans SC", sans-serif; --jp-serif: "Noto Serif SC", serif; } html[lang="zh-Hant"] { --jp: "Noto Sans TC", sans-serif; --jp-serif: "Noto Serif TC", serif; } html[lang="en"] { --jp: "Jost", sans-serif; --jp-serif: "Jost", sans-serif; } /* base ------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--sumi); font-family: var(--jp); font-weight: 300; font-size: 16px; line-height: 2; letter-spacing: 0.04em; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } ::selection { background: var(--kin); color: var(--paper); } :focus-visible { outline: 1px solid var(--kin); outline-offset: 4px; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); } .eyebrow { font-family: var(--latin); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--hai); margin: 0 0 2.25rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* header ----------------------------------------------------------------- */ .masthead { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem var(--gut); background: rgba(255,255,255,0.86); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .4s ease, background .4s ease; } .masthead[data-scrolled="true"] { border-bottom-color: var(--line); } .masthead__brand { display: flex; align-items: center; gap: 0.7rem; font-family: var(--latin); font-weight: 300; font-size: 0.75rem; letter-spacing: 0.34em; text-transform: uppercase; } .masthead__brand img { width: 15px; height: auto; } .langs { display: flex; align-items: center; gap: 0.9rem; } .langs a { font-family: var(--latin); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.2em; color: var(--hai); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color .3s ease, border-color .3s ease; } .langs a:hover { color: var(--sumi); } .langs a[aria-current="true"] { color: var(--sumi); border-bottom-color: var(--kin); } /* hero ------------------------------------------------------------------- */ .hero { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 8rem var(--gut) 6rem; } .hero__mark { width: clamp(46px, 7vw, 68px); height: auto; margin-inline: auto; } .hero__name { font-family: var(--latin); font-weight: 200; font-size: clamp(1.5rem, 4.6vw, 2.75rem); letter-spacing: 0.5em; /* cancel the trailing letter-space so the centred wordmark is optically centred */ margin: var(--rhythm) -0.5em 0 0; line-height: var(--rhythm); } .hero__script { width: clamp(84px, 11vw, 116px); height: auto; margin: var(--rhythm) auto 0; } .hero__tagline { font-family: var(--latin); font-weight: 300; font-size: clamp(0.8125rem, 1.5vw, 1rem); letter-spacing: 0.14em; line-height: var(--rhythm); color: var(--sumi-soft); margin: var(--rhythm) auto 0; /* ch ignores letter-spacing; 30ch measured 278px against a line that needs 288px, which broke "senses" onto a third line and overrode the authored
. */ max-width: 34ch; } /* the arc — lifted from the base of the UKIYOZA mark, used as the rule that separates every section instead of a straight line ------------------ */ .arc { display: block; width: 76px; height: 20px; margin-inline: auto; overflow: visible; } .arc path { fill: none; stroke: var(--kin); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 92; stroke-dashoffset: 92; transition: stroke-dashoffset 1.4s cubic-bezier(.22,.61,.36,1) .15s; } .reveal.is-in .arc path, .arc.is-in path { stroke-dashoffset: 0; } /* philosophy ------------------------------------------------------------- */ .philosophy { padding: var(--sec) 0; text-align: center; } .philosophy__catch { font-family: var(--jp-serif); font-weight: 500; font-size: clamp(1.5rem, 4.4vw, 2.5rem); line-height: 1.85; letter-spacing: 0.09em; margin: 2.75rem 0 0; } html[lang="en"] .philosophy__catch { font-weight: 200; letter-spacing: 0.12em; } .philosophy__body { margin: 2.75rem auto 0; max-width: 46ch; font-size: 0.9375rem; line-height: 2.3; color: var(--sumi-soft); } .philosophy__body p { margin: 0 0 0.4rem; } /* brands (dark band) ------------------------------------------------------ */ .brands { background: var(--sumi); color: var(--paper); padding: var(--sec) 0; } .brands .eyebrow { color: rgba(255,255,255,.44); } .slots { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.13); } .slot { background: var(--sumi); padding: clamp(2.25rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.25rem); min-height: 340px; display: flex; flex-direction: column; } .slot--live { justify-content: space-between; } .slot__logo { width: clamp(122px, 15vw, 150px); color: var(--paper); } .slot__logo img { width: 100%; height: auto; } .slot__status { font-family: var(--latin); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--kin); margin: 2.5rem 0 0; } .slot__addr { font-size: 0.8125rem; line-height: 2; color: rgba(255,255,255,.62); margin: 0.75rem 0 0; } .slot__link { display: inline-flex; align-items: center; gap: 0.55rem; align-self: flex-start; margin-top: 1.75rem; font-family: var(--latin); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid rgba(192,152,88,.5); color: var(--paper); transition: border-color .35s ease, color .35s ease; } .slot__link:hover { color: var(--kin); border-bottom-color: var(--kin); } .slot__link svg { width: 14px; height: 14px; } /* empty slots: the "+" of PLUS ALPHA holds the space for the IP to come */ .slot--open { align-items: center; justify-content: center; gap: 1.75rem; } /* 1b「起筆」: セクション区切りの弧と同じストローク描画を流用し、縦→横の順に 「＋」が書かれる。モーション語彙を増やさずに、席が用意されていく時間を見せる。 */ .slot--open .plus { width: 26px; height: 26px; overflow: visible; } .slot--open .plus line { stroke: var(--kin); stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 26; animation: paDraw 7s cubic-bezier(.22,.61,.36,1) infinite, paDrawFade 7s linear infinite; } /* 横線を 0.5s 遅らせ、縦→横という筆順をつくる */ .slot--open .plus line:nth-child(2) { animation-delay: .5s, .5s; } /* 2枠目はさらに 1.2s ずらし、2つの空席の筆致が揃わないようにする */ .slots .slot--open:last-child .plus line:nth-child(1) { animation-delay: 1.2s, 1.2s; } .slots .slot--open:last-child .plus line:nth-child(2) { animation-delay: 1.7s, 1.7s; } @keyframes paDraw { 0% { stroke-dashoffset: 26; } 38% { stroke-dashoffset: 0; } 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 26; } } @keyframes paDrawFade { 0% { opacity: 0; } 20% { opacity: .6; } 88% { opacity: .6; } 100% { opacity: 0; } } .slot__await { font-family: var(--latin); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,.38); margin: 0; text-align: center; } /* company ---------------------------------------------------------------- */ .company { padding: var(--sec) 0; } .facts { border-top: 1px solid var(--line); margin: 0; } .facts > div { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 0 clamp(1rem, 4vw, 3rem); padding: 1.35rem 0; border-bottom: 1px solid var(--line); } .facts dt { font-family: var(--latin); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hai); line-height: 2.6; } .facts dd { margin: 0; font-size: 0.9375rem; line-height: 2; } /* careers + contact ------------------------------------------------------- */ .duo { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .duo > section { background: var(--paper); padding: var(--sec) clamp(0rem, 3vw, 2.5rem); } .duo > section:first-child { padding-left: 0; } .duo > section:last-child { padding-right: 0; } .duo p { margin: 0 0 2rem; font-size: 0.9375rem; max-width: 34ch; color: var(--sumi-soft); } .mail { display: inline-block; font-family: var(--latin); font-weight: 300; font-size: clamp(1rem, 2.2vw, 1.375rem); letter-spacing: 0.06em; padding-bottom: 6px; background-image: linear-gradient(var(--kin), var(--kin)); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%; transition: background-size .45s cubic-bezier(.22,.61,.36,1), color .35s ease; } .mail:hover { color: var(--kin); background-size: 0% 1px; } /* footer ----------------------------------------------------------------- */ .foot { padding: 3.5rem 0 4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--latin); font-size: 0.6875rem; font-weight: 300; letter-spacing: 0.18em; color: var(--hai); } /* scroll reveal ----------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s ease, transform 1s cubic-bezier(.22,.61,.36,1); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .arc path { stroke-dashoffset: 0; transition: none; } .mail { transition: none; } .slot--open .plus line { animation: none; stroke-dashoffset: 0; opacity: .55; } } /* small screens ----------------------------------------------------------- */ @media (max-width: 640px) { /* 基線は保ったまま一段詰める（間隔の均一さが 1i の要点） */ :root { --rhythm: 2rem; } .facts > div { grid-template-columns: 1fr; gap: 0.15rem; padding: 1.15rem 0; } .facts dt { line-height: 2; } .duo > section { padding-inline: 0; } .slot { min-height: 280px; } .hero__name { letter-spacing: 0.3em; margin-right: -0.3em; } }