/* * レターイントロ（LP流入時のエモ演出オーバーレイ）。 * LP本体（styles.css / index.html の .lp）には一切依存せず、この CSS と * letter-intro.js だけで完結する。表示条件の判定は index.html の * インラインゲートスクリプト（window.__wcIntroShow）。 * * 視覚言語は welcome.careers のレター（クリーム #faf7f2 / Caveat / Zen Kurenaido） * に合わせ、LP のオレンジは CTA だけに使う（イントロ→LP の橋渡し）。 */ /* ゲート判定後〜オーバーレイ描画までの間、LP のフラッシュを防ぐ。 （インラインゲートの 3.5s タイムアウトが保険で解除する） */ html.wc-intro-hold { background: #faf7f2; } html.wc-intro-hold .lp { visibility: hidden; } /* イントロ表示中は背景の LP をスクロールさせない */ html.wc-intro-open, html.wc-intro-open body { overflow: hidden; } .wc-intro { --wc-cream: #faf7f2; --wc-cream-card: #fffdf8; --wc-cream-line: #efe7da; --wc-cream-panel: #f7f2e9; --wc-ink: #0f172a; /* slate-900 */ --wc-text: #475569; /* slate-600 */ --wc-soft: #94a3b8; /* slate-400 */ --wc-orange: #f56500; --wc-orange-deep: #e95a00; --wc-script: "Caveat", "Segoe Script", "Apple Chancery", cursive; --wc-hand: "Zen Kurenaido", "Hiragino Kaku Gothic ProN", sans-serif; position: fixed; inset: 0; z-index: 2147483000; overflow-y: auto; overflow-x: hidden; background: radial-gradient(circle at 18% 12%, rgba(245, 101, 0, 0.05), transparent 42%), radial-gradient(circle at 85% 88%, rgba(214, 178, 108, 0.10), transparent 46%), var(--wc-cream); color: var(--wc-ink); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif; font-feature-settings: "palt"; -webkit-font-smoothing: antialiased; opacity: 1; transition: opacity 0.55s ease; } .wc-intro.is-leaving { opacity: 0; pointer-events: none; } /* ---- スキップ ---- */ .wc-intro-skip { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 18px; z-index: 10; padding: 8px 14px; border: 1px solid var(--wc-cream-line); border-radius: 999px; background: rgba(255, 253, 248, 0.85); color: var(--wc-soft); font-size: 12px; letter-spacing: 0.04em; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .wc-intro-skip:hover { color: var(--wc-text); border-color: #ddd0bd; } /* ---- ステージ共通 ---- */ .wc-intro-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 56px 22px 44px; } /* ---- 1+2. 導入の一言 ＋ 封筒（同時に見せる） ---- 待ち時間を短くするため、導入の一言と封筒が開く演出は同じタイミングで始める。 一言を上・封筒を下に縦積みし、便箋がせり上がる分の高さは封筒側の padding で確保する。 */ .wc-intro-opening { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 2.2vh, 28px); padding: 0 28px; pointer-events: none; } .wc-intro-prologue { margin: 0; max-width: 620px; text-align: center; font-family: var(--wc-hand); font-size: clamp(17px, 2.6vw, 24px); line-height: 2; letter-spacing: 0.06em; color: var(--wc-text); opacity: 0; transform: translateY(10px); transition: opacity 0.9s ease, transform 0.9s ease; } .wc-intro.is-prologue .wc-intro-prologue { opacity: 1; transform: translateY(0); } /* 導入の一言は「消えてから」次の画面を出す（訴求コピーと文字が重なって見えるのを避ける）。 is-closing でまず退場し、消え切ってから JS が is-letter を付ける */ .wc-intro.is-closing .wc-intro-prologue, .wc-intro.is-letter .wc-intro-prologue { opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease; } /* ---- 2. 封筒 ---- */ .wc-intro-envelope { display: flex; align-items: center; justify-content: center; /* .wc-env-paper が封筒の上へ 72px せり上がるので、その分の余白を上に確保する */ padding-top: 66px; opacity: 0; pointer-events: none; } .wc-intro.is-envelope .wc-intro-envelope { opacity: 1; } .wc-intro.is-closing .wc-intro-envelope, .wc-intro.is-letter .wc-intro-envelope { opacity: 0; transition: opacity 0.3s ease; } .wc-env { position: relative; width: 240px; height: 156px; opacity: 0; transform: translateY(26px) scale(0.94); } .wc-intro.is-envelope .wc-env { animation: wc-env-pop 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes wc-env-pop { to { opacity: 1; transform: translateY(0) scale(1); } } /* 開いたフラップ（封筒上に立ち上がった状態を静的に描く） */ .wc-env-flap { position: absolute; left: 16px; right: 16px; bottom: 84px; height: 96px; background: linear-gradient(180deg, #efe3cd, #e6d7bc); clip-path: polygon(0 100%, 50% 0, 100% 100%); border-radius: 6px; z-index: 1; } .wc-env-back { position: absolute; inset: 0; background: linear-gradient(180deg, #eee1c9, #e8dabe); border-radius: 10px; box-shadow: 0 18px 40px rgba(85, 55, 15, 0.16); z-index: 2; } /* 便箋（封筒の中から上へせり上がる） 初期位置は前面ポケットに完全に隠れ、アニメーションで封筒の上へ顔を出す */ .wc-env-paper { position: absolute; left: 28px; right: 28px; bottom: 14px; height: 130px; background: var(--wc-cream-card); border: 1px solid var(--wc-cream-line); border-radius: 6px 6px 0 0; box-shadow: 0 -8px 20px rgba(85, 55, 15, 0.10); transform: translateY(46px); z-index: 3; overflow: hidden; } .wc-intro.is-envelope .wc-env-paper { animation: wc-paper-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards; } @keyframes wc-paper-rise { to { transform: translateY(-72px); } } .wc-env-paper::before { /* 封筒から出てくる便箋。このあとスマホに映るレターと揃える */ content: "Offer Letter"; position: absolute; top: 12px; left: 0; right: 0; text-align: center; font-family: var(--wc-script); font-size: 22px; font-weight: 600; color: var(--wc-ink); } .wc-env-paper::after { content: ""; position: absolute; top: 46px; left: 24px; right: 24px; height: 60px; background: linear-gradient(var(--wc-cream-line) 2px, transparent 2px) 0 0 / 100% 16px; opacity: 0.9; } /* 封筒前面ポケット */ .wc-env-front { position: absolute; inset: 0; background: linear-gradient(200deg, #f3e8d3 0%, #ecdfc5 55%, #e6d6b8 100%); clip-path: polygon(0 0, 50% 34%, 100% 0, 100% 100%, 0 100%); border-radius: 10px; z-index: 4; } .wc-env-seal { position: absolute; left: 50%; bottom: 74px; width: 30px; height: 30px; transform: translateX(-50%); background: radial-gradient(circle at 35% 30%, #ff8a3d, var(--wc-orange-deep)); border-radius: 50%; box-shadow: 0 3px 8px rgba(233, 90, 0, 0.35); z-index: 5; } .wc-env-seal::after { content: ""; position: absolute; inset: 6px; border: 1.5px solid rgba(255, 247, 240, 0.75); border-radius: 50%; } /* ---- 3. スマホ（LPのFVと同じレター画面） + 4. 訴求コピー ---- */ .wc-intro-main { display: none; width: 100%; max-width: 1120px; align-items: center; justify-content: center; gap: 34px 64px; } .wc-intro.is-letter .wc-intro-main { display: grid; grid-template-columns: minmax(0, 300px); justify-items: center; } @media (min-width: 900px) { .wc-intro.is-letter .wc-intro-main { /* 訴求コピー2段目をPCで1行に収めるため右列を広げる。 左列（スマホ）はLPのFVと同じ384pxを上限にする（384+64+660=1108 ≦ max-width 1120） */ grid-template-columns: minmax(0, 384px) minmax(0, 660px); justify-items: stretch; } } /* スマホ本体。LPのFV（.hero-letter-phone）と同じ枠画像・同じスクリーン比率・ 同じ下端クロップ（マスクはLPに無く、描画不具合の元になるため使わない） */ .wc-intro-phone { position: relative; width: 100%; /* 縦の狭いウィンドウでスマホ下端が切れないよう、使える高さに合わせて幅を頭打ちにする （aspect-ratio が高さを追従。937/1421 ≒ 0.6594）。100vh はsvh非対応ブラウザ向けの保険 */ max-width: calc((100vh - 130px) * 937 / 1421); max-width: calc((100svh - 130px) * 937 / 1421); aspect-ratio: 937 / 1421; overflow: hidden; filter: drop-shadow(0 22px 34px rgba(15, 15, 15, 0.18)); transform: translateY(20px); opacity: 0; } .wc-intro.is-letter .wc-intro-phone { animation: wc-letter-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* 登場アニメ完了後は fill 状態を持ち越さない（filter付きコンテナで composited layer の再描画が止まる環境があるため、静的な最終状態に固定する） */ .wc-intro.is-letter .wc-intro-phone.is-settled { opacity: 1; transform: none; animation: none; } @keyframes wc-letter-in { to { opacity: 1; transform: translateY(0); } } /* 退場アニメ（is-settled の解除規則より後に置き、同詳細度の後勝ちで確実に動かす） */ .wc-intro.is-leaving .wc-intro-phone, .wc-intro.is-leaving .wc-intro-phone.is-settled { animation: wc-letter-out 0.55s ease forwards; } @keyframes wc-letter-out { to { opacity: 0; transform: translateY(-34px) rotate(-1.2deg); } } .wc-phone-frame { position: absolute; inset: 0 0 auto; z-index: 3; pointer-events: none; } .wc-phone-frame img { display: block; width: 100%; height: auto; } /* 端末スクリーン領域（枠画像の開口部に合わせた比率。LPの .hero-letter-live と同値） */ .wc-phone-screen { position: absolute; z-index: 2; top: calc(102 / 1421 * 100%); left: 6.189968%; width: 87.726788%; height: calc((1421 - 102) / 1421 * 100%); overflow: hidden; background: #faf9f8; /* ノートiframeのナビカードをタップ可能にする（枠画像は pointer-events:none で透過） */ pointer-events: auto; /* 画面上端は端末の直線部（角丸の下）にあり、四角い角でも黒フレームが覆うため 白い出っ張りは出ない。上部内側を角丸にすると逆に不自然なので角丸なしにする。 */ border-radius: 0; } /* ノート本体（iframe・約2.8MB）が届くまでの下敷き。LPのFVと同じ静止画を使う。 演出は時間で進むため、これが無いと低速回線でスクリーンが白い板になる */ .wc-phone-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } /* 実データ版デモノート（iframe）。375px幅で描画し、JSが画面開口部へ scale 配置する。 背景を透明にし、load（CSS・フォント・非lazy画像まで到着）してから不透明にする。 不透明のまま先に重ねると、下敷きのポスターを覆って白画面に見える */ .wc-phone-doc { position: absolute; top: 0; left: 0; border: 0; transform-origin: top left; background: transparent; opacity: 0; transition: opacity 420ms ease; } .wc-phone-doc.is-loaded { opacity: 1; } /* 訴求コピー */ .wc-intro-pitch { width: 100%; max-width: 470px; text-align: center; } @media (min-width: 900px) { .wc-intro-pitch { max-width: 660px; text-align: left; } } .wc-intro-pitch > * { opacity: 0; transform: translateY(14px); transition: opacity 0.8s ease, transform 0.8s ease; } .wc-intro.is-pitch .wc-intro-pitch > * { opacity: 1; transform: translateY(0); } /* 1行目（面接のあとに〜）は「最初から表示されている」前提。フェードも動きも付けず、 スマホと同じフレームで即座に見えている状態にする（後から現れる演出にしない）。 2行目（あとらくは〜）だけ、1行目を読む余韻をひと呼吸置いてから出す。CTAはスマホと同時。 */ .wc-intro-pitch > .wc-pitch-line1 { opacity: 1; transform: none; transition: none; } .wc-intro.is-pitch .wc-intro-pitch > :nth-child(2) { transition-delay: 1.2s; } .wc-intro.is-pitch .wc-intro-pitch > :nth-child(3) { transition-delay: 0.1s; } .wc-pitch-line1 { margin: 0; font-family: var(--wc-hand); font-size: clamp(15px, 4.3vw, 22px); line-height: 2; letter-spacing: 0.04em; color: var(--wc-ink); } @media (min-width: 900px) { .wc-pitch-line1 { font-size: clamp(17px, 2.2vw, 22px); } } .wc-pitch-line1 strong { font-weight: 400; background: linear-gradient(transparent 66%, rgba(245, 101, 0, 0.26) 66%); } /* 2段目のハイライト。スマホでは2行に折り返すため box-decoration-break で各行に付ける */ .wc-pitch-line2 strong { font-weight: 400; background: linear-gradient(transparent 66%, rgba(245, 101, 0, 0.26) 66%); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .wc-pitch-line2 { margin: 16px 0 0; /* 重要メッセージのため1段目（.wc-pitch-line1）と同じ書体・サイズ・文字色にする */ font-family: var(--wc-hand); font-size: clamp(15px, 4.3vw, 22px); line-height: 2; letter-spacing: 0.04em; color: var(--wc-ink); } /* PCでは2段落（キャッチ／サービス説明）の間隔を大きく取り、別セクションと分かるようにする */ @media (min-width: 900px) { .wc-pitch-line2 { margin-top: 56px; font-size: clamp(17px, 2.2vw, 22px); } } /* スマホ専用の改行（PC ≥900px では消して2行にする） */ .wc-br-sp { display: inline; } @media (min-width: 900px) { .wc-br-sp { display: none; } } .wc-pitch-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 15px 34px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #ff7a1a, var(--wc-orange)); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 14px 30px rgba(245, 101, 0, 0.32); transition: transform 0.25s ease, box-shadow 0.25s ease; } .wc-pitch-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(245, 101, 0, 0.38); } .wc-pitch-cta-arrow { font-weight: 400; transition: transform 0.25s ease; } .wc-pitch-cta:hover .wc-pitch-cta-arrow { transform: translateX(4px); } /* ---- スマホ調整 ---- */ @media (max-width: 899px) { .wc-intro-stage { padding: 64px 20px 40px; } .wc-intro.is-letter .wc-intro-main { grid-template-columns: minmax(0, 440px); } /* スマホだけ幅を絞り、訴求コピーは列幅いっぱいを使う */ .wc-intro-phone { width: min(72vw, 280px); } .wc-env { transform-origin: center; scale: 0.86; } } /* ---- モーション低減設定 ---- JS 側で prefers-reduced-motion 時はタイムラインを飛ばして is-letter / is-pitch を即時付与する。動きは殺し、フェードのみ残す。 */ @media (prefers-reduced-motion: reduce) { .wc-intro *, .wc-intro *::before, .wc-intro *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.2s !important; transition-delay: 0s !important; transform: none !important; } }