/* ========================================================================== FUTURE PAGE（わたしたちが目指す未来） ========================================================================== */ .future-page { padding-top: 84px; background: var(--color-light-blue); } /* =========================== スクロールリビール共通部品（トップページ .js-reveal 系と同じ考え方） 軽いフェード＋ふわっと上がる程度に留め、演出過多にしない。 .js-anim（JS有効時のみに付与。functions.php参照）でJS無効環境の opacity:0残りを防ぐ。IntersectionObserverでの .is-inview 付与は future.js。 =========================== */ :root { --f-reveal-duration: 0.6s; --f-reveal-distance: 20px; --f-reveal-ease: cubic-bezier(0.19, 1, 0.22, 1); --f-stagger: 0.08s; } .js-anim .future-page .js-reveal { opacity: 0; transform: translateY(var(--f-reveal-distance)); transition: opacity var(--f-reveal-duration) ease, transform var(--f-reveal-duration) var(--f-reveal-ease); } .js-anim .future-page .js-reveal.is-inview { opacity: 1; transform: translateY(0); } .js-anim .future-page .js-reveal--fade { opacity: 0; transition: opacity calc(var(--f-reveal-duration) + 0.3s) ease; } .js-anim .future-page .js-reveal--fade.is-inview { opacity: 1; } .js-anim .future-page .js-reveal-group > * { opacity: 0; transform: translateY(var(--f-reveal-distance)); transition: opacity var(--f-reveal-duration) ease, transform var(--f-reveal-duration) var(--f-reveal-ease); } .js-anim .future-page .js-reveal-group.is-inview > * { opacity: 1; transform: translateY(0); } .future-page .js-reveal-group > *:nth-child(2) { transition-delay: calc(var(--f-stagger) * 1); } .future-page .js-reveal-group > *:nth-child(3) { transition-delay: calc(var(--f-stagger) * 2); } .future-page .js-reveal-group > *:nth-child(4) { transition-delay: calc(var(--f-stagger) * 3); } @media (prefers-reduced-motion: reduce) { .js-anim .future-page :is(.js-reveal, .js-reveal--fade, .js-reveal-group > *) { transition: none; } } /* =========================== 共通セクション見出し =========================== */ .future-section-head { margin-bottom: 4rem; } .future-section-head__en { font-family: var(--font-en); font-size: 2.5rem; font-weight: 400; letter-spacing: 0.25em; color: var(--color-black); margin-bottom: 0.5rem; } .future-section-head__ja { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 300; letter-spacing: 0.35em; color: var(--color-black); } .future-section-head--white .future-section-head__en, .future-section-head--white .future-section-head__ja { color: var(--color-white); } /* =========================== OPENING（1枚目） トップページ .top-opening と同じ仕組み：CSSアニメで表示→自動フェードアウトし、 future.js がスクロールロック(body.is-opening)とDOM除去だけを行う。 FUTUREロゴはトップ2枚目(mv-message)と同じグラデーション流しアニメーション （SVGをmaskの型にして、2倍幅の疑似要素をtransform:translateXでループ） =========================== */ :root { --anim-fop-logo-duration: 0.9s; /* ロゴのフェード時間 */ --anim-fop-logo-delay: 0.2s; /* ロゴが出始めるまで */ --anim-fop-hide-delay: 1.6s; /* フェードアウト開始（秒で指定。future.jsが自動で読む） */ --anim-fop-hide-duration: 0.6s; /* フェードアウトにかける時間 */ } body.is-opening { overflow: hidden; } .future-opening { position: fixed; inset: 0; z-index: 300; /* ヘッダー(100)・ドロワー(200)より上 */ display: flex; align-items: center; justify-content: center; background: var(--color-main) url('../images/top_animebg.png') no-repeat center center / cover; animation: future-opening-hide var(--anim-fop-hide-duration) ease var(--anim-fop-hide-delay) forwards; } .future-opening__logo { position: relative; width: min(430px, 30vw); aspect-ratio: 330 / 79; overflow: hidden; -webkit-mask: url('../images/top_animefuture.svg') no-repeat center / contain; mask: url('../images/top_animefuture.svg') no-repeat center / contain; opacity: 0; animation: future-opening-fade var(--anim-fop-logo-duration) ease var(--anim-fop-logo-delay) forwards; } .future-opening__logo::before { content: ''; position: absolute; inset: 0; width: 200%; height: 100%; background-image: linear-gradient(90deg, #F8DDEA 0%, #AAE4FF 50%, #F8DDEA 100%); background-size: 50% 100%; background-repeat: repeat-x; animation: future-anim-logo-shift 3s linear infinite; will-change: transform; } @keyframes future-anim-logo-shift { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes future-opening-fade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes future-opening-hide { to { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .future-opening__logo::before { animation: none; transform: translateX(-25%); } } /* =========================== TAGLINE（2枚目：画面いっぱい） =========================== */ .future-anim-tagline { background: var(--color-main) url('../images/top_animebg.png') no-repeat center center / cover; min-height: calc(100vh - 84px); /* 固定ヘッダー(84px)を除いた画面いっぱい */ display: flex; align-items: center; } .future-anim-tagline__text { font-family: var(--font-serif); font-size: max(3rem, 8.7vw); /* カンプ1100px幅で96px(6rem)指定。8.7vw=96/1100の比率。上限を設けず、改行位置(手動
)は変えずにブラウザ幅なりに大きくし続ける */ font-weight: 400; letter-spacing: 0.18em; line-height: 1.8; color: var(--color-white); padding-left: 7%; } /* 1行目→2行目の順に、左から徐々に見えるワイプ演出（clip-pathで右側を隠した状態から広げる） */ .future-anim-tagline__line { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1); } .js-anim .future-page .future-anim-tagline__text.is-inview .future-anim-tagline__line { clip-path: inset(0 0 0 0); } .future-anim-tagline__line:last-child { transition-delay: 1s; /* 1行目(1s)が完全に広がりきってから2行目が始まる */ } @media (prefers-reduced-motion: reduce) { .future-anim-tagline__line { transition: none; clip-path: inset(0 0 0 0); } } /* =========================== VIDEO STACK（3・4枚目） .future-video を sticky にして画面に留め、その間に .future-video-message が 下から迫り上がって上に重なる（トップページ .mv-stack と同じ考え方）。 PC専用の暫定実装のため高さは 200vh 固定（SP対応時はJSで可変にする想定） =========================== */ .future-video-stack { position: relative; height: 200vh; } .future-video { position: sticky; top: 0; width: 100%; height: 100vh; background: var(--color-black); overflow: hidden; z-index: 1; } .future-video__player { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; } .future-video-message { position: relative; z-index: 2; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: url('../images/future_overray.webp') no-repeat center center / cover; /* 書き出し済みのトーン画像。動画がうっすら透ける */ } /* inline-flexの縦積みにすると、コンテナ幅が一番長い行(2行目)に合わせて決まり、 align-items:stretch(初期値)で両方の行がその幅まで引き伸ばされる → 下線の長さが揃う */ .future-video-message__inner { display: inline-flex; flex-direction: column; max-width: 90vw; } /* 各行：テキストの下に細い白罫線（カンプではテキストより長い下線が行ごとに入る）。 border-bottomではなく::afterにして、スクロールで視界に入ったタイミングで 左から右へ伸びるアニメーションをtransform:scaleXで付けられるようにしている （future.jsがIntersectionObserverで.is-inviewを付与する） */ .future-video-message__line { position: relative; font-family: var(--font-serif); font-size: clamp(2.25rem, 5.09vw, 3.5rem); /* カンプ1100px幅で56px(3.5rem)指定。5.09vw=56/1100の比率 */ font-weight: 400; letter-spacing: 0.2em; line-height: 1.35; color: var(--color-white); text-align: center; white-space: nowrap; margin-bottom: 3rem; padding-bottom: 1.75rem; } .future-video-message__line:last-child { margin-bottom: 0; } /* SPでは「トップランカー」「になる」に行を分けて下線を行ごとに入れるため、 PC用行(--pc)とSP用行(--sp)をHTMLに両方置いて出し分ける */ .future-video-message__line--sp { display: none; } .future-video-message__line::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.85); transform: scaleX(0); transform-origin: left center; transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1); } .future-video-message__line.is-inview::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .future-video-message__line::after { transition: none; transform: scaleX(1); } } /* =========================== HERO（5枚目〜：背景画像＋白文字） =========================== */ .future-hero { background: var(--color-main) url('../images/future_bg.png') no-repeat center center / cover; padding: 120px 0 140px; } .future-hero__inner { max-width: 1100px; width: 90%; margin: 0 auto; } .future-hero__eyebrow { font-family: var(--font-serif); font-size: 0.9375rem; letter-spacing: 0.3em; color: var(--color-white); margin-bottom: 3.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-white); display: inline-block; } .future-hero__lead { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 400; letter-spacing: 0.2em; line-height: 1.9; color: var(--color-white); margin-bottom: 5rem; } /* 本文＋線画の2段組（1段目：本文左・ベン図右／2段目：円2つ左・本文右） */ .future-hero__row { display: flex; align-items: center; gap: 8%; margin-bottom: 6rem; } .future-hero__row:last-child { margin-bottom: 0; } .future-hero__row--second { gap: 14%; } .future-hero__body { flex: 0 0 52%; } .future-hero__row--second .future-hero__body { flex: 1; padding-left: 4%; } .future-hero__body p { font-family: var(--font-serif); font-size: 1.25rem; letter-spacing: 0.2em; line-height: 2.2; color: var(--color-white); margin-bottom: 2.5rem; } .future-hero__body p:last-child { margin-bottom: 0; } /* 「インフラ×AIのトップランカーになる」：本文より大きく */ .future-hero__quote { font-size: 1.625rem !important; letter-spacing: 0.2em; line-height: 1.9 !important; margin-bottom: 1.5rem !important; } /* 「エンジニアとお客様を笑顔にし、幸せなSIを増やしていきます。」：本文より大きく */ .future-hero__emphasis { font-size: 1.625rem !important; letter-spacing: 0.2em; line-height: 2 !important; } /* 線画（future_icon01.svg = ベン図3円／future_icon02.svg = 円2つ、いずれも1枚のSVGで書き出し済み） */ .future-hero__diagram { display: flex; justify-content: center; } .future-hero__diagram--venn { flex: 1; max-width: 420px; } .future-hero__diagram--duo { flex: 0 0 32%; max-width: 340px; padding-top: 1rem; } .future-hero__diagram img { width: 90%; height: auto; display: block; margin: 0 auto; } /* =========================== HERO PHOTOS（5枚目つづき） =========================== */ .future-hero-photos { position: relative; background: var(--color-white) url('../images/future_enpbg.webp') no-repeat top center / contain; overflow-x: hidden; /* 古いSafari向けフォールバック */ overflow-x: clip; } /* ENGINEER DRIVEN帯：窓越しに固定背景が見えるカーテン演出（参考: https://recruit.netbk.co.jp/） clip-path:inset(0) は position:fixed の子孫の描画もこの要素の範囲で切り抜くため、 fixedで画面に張り付いた画像が「窓」を通してだけ見える。スクロールしても画像は動かず、 前後のコンテンツ（写真グリッド・EXPECTATION）が静止した画像の上を通過していく見え方になる */ .future-hero-photos__band { position: relative; aspect-ratio: 2200 / 840; /* 窓の高さ＝画像(future_drivenimg.webp)の表示高さに一致させて余白を出さない */ clip-path: inset(0); } .future-hero-photos__band img { position: fixed; top: 50%; left: 0; transform: translateY(-50%); /* 画面の縦中央に固定。窓が中央を通過する時に画像がぴったり収まる */ width: 100%; height: 100%; object-fit: cover; } .future-hero-photos__inner { max-width: 1200px; width: 90%; margin: 0 auto; padding: 120px 0 100px; text-align: left; } /* FUTURE：トップページと同じグラデーション流しアニメーションのロゴ（top_animefuture.svgをmaskの型にする） */ .future-hero-photos__eyebrow { position: relative; width: min(250px, 30%); aspect-ratio: 330 / 79; overflow: hidden; margin-bottom: 2rem; -webkit-mask: url('../images/top_animefuture.svg') no-repeat center / contain; mask: url('../images/top_animefuture.svg') no-repeat center / contain; } .future-hero-photos__eyebrow::before { content: ''; position: absolute; inset: 0; width: 200%; height: 100%; background-image: linear-gradient(90deg, #F8DDEA 0%, #AAE4FF 50%, #F8DDEA 100%); background-size: 50% 100%; background-repeat: repeat-x; animation: future-anim-logo-shift 3s linear infinite; will-change: transform; } @media (prefers-reduced-motion: reduce) { .future-hero-photos__eyebrow::before { animation: none; transform: translateX(-25%); } } .future-hero-photos__title { font-family: var(--font-serif); font-size: 3.5rem; font-weight: 400; letter-spacing: 0.2em; line-height: 1.6; color: var(--color-main); margin-bottom: 45px; } /* 写真4枚：奇数を下げて互い違いに（カンプ準拠）。 各枠は独立したタイマーで、ランダムな写真へ・ランダムな方向（上下左右）のワイプで 切り替わる（future.js参照）。current/incomingの2枚を重ねておき、incomingを clip-pathで隠した状態から広げることでワイプを表現する */ .future-hero-photos__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-bottom: 48px; /* 奇数のずらし分を確保 */ } .future-hero-photos__item { position: relative; aspect-ratio: 536 / 812; border-radius: 12px; overflow: hidden; } .future-hero-photos__item:nth-child(odd) { margin-top: 48px; } .future-hero-photos__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .future-hero-photos__photo--current { z-index: 1; } .future-hero-photos__photo--incoming { z-index: 2; clip-path: inset(0 0 100% 0); /* 初期状態は完全に隠す（値はfuture.jsが方向ごとに書き換える） */ transition: clip-path 1s ease; } @media (prefers-reduced-motion: reduce) { .future-hero-photos__photo--incoming { transition: none; } } /* =========================== EXPECTATION =========================== */ .future-expectation { padding: 100px 0; background: var(--color-light-blue); } .future-expectation__inner { max-width: 1100px; width: 93%; margin: 0 auto; } .future-expectation__set { display: grid; grid-template-columns: 60% 36%; grid-template-rows: auto auto 1fr; column-gap: 4%; margin-bottom: 4rem; } .future-expectation__set:last-child { margin-bottom: 0; } .future-expectation__block-title { grid-column: 1; grid-row: 1; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; letter-spacing: 0.2em; line-height: 2; color: var(--color-black); padding-bottom: 2rem; } .future-expectation__divider { grid-column: 1 / -1; grid-row: 2; border-top: 2px solid #D3E3F3; width: 100%; margin-bottom: 1.5rem; } .future-expectation__block-body { grid-column: 1; grid-row: 3; font-size: 0.9375rem; letter-spacing: 0.2em; line-height: 2; text-align: justify; color: var(--color-black); align-self: start; } .future-expectation__set-img { grid-column: 2; grid-row: 3; align-self: start; } .future-expectation__set-img img { width: 95%; height: auto; object-fit: cover; display: block; border-radius: 16px; margin-left: auto; } /* =========================== CHALLENGE =========================== */ .future-challenge { padding: 100px 0 120px; background: var(--color-main); } .future-challenge__inner { max-width: 1100px; width: 93%; margin: 0 auto; } /* 白カード（テキスト＋写真＋ダイアグラムを1枚に） */ .future-challenge__card { background: var(--color-light-blue); border-radius: 20px; overflow: hidden; } /* カード上段：テキスト＋写真 */ .future-challenge__card-top { display: flex; gap: 3%; align-items: flex-start; width: 93%; max-width: 950px; margin: 40px auto; } .future-challenge__card-text { flex: 1 1 54%; } .future-challenge__title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; letter-spacing: 0.2em; line-height: 1.8; color: var(--color-black); margin: 60px 0 50px; } .future-challenge__body p { font-size: 0.9375rem; letter-spacing: 0.2em; line-height: 2; text-align: justify; color: var(--color-black); margin-bottom: 1.5rem; } .future-challenge__body p:last-child { margin-bottom: 0; } /* 右側：写真3枚縦並び */ .future-challenge__card-imgs { flex: 0 0 46%; display: flex; flex-direction: column; gap: 1.25rem; margin-top: 30px; } .future-challenge__card-imgs img { width: 100%; height: auto; border-radius: 10px; display: block; object-fit: cover; } /* カード下段：ダイアグラム */ .future-challenge__diagram { margin: 0 -60px; } .future-challenge__diagram-img { width: 93%; max-width: 950px; margin: 90px auto; } .future-challenge__diagram-img img { width: 100%; height: auto; display: block; margin: 0 auto; } /* =========================== MESSAGE（社長メッセージ） =========================== */ .future-message { background: var(--color-white); padding: 100px 0; border-radius: 40px 40px 0 0; margin-top: -60px; position: relative; z-index: 2; } .future-message__inner { max-width: 900px; width: 75%; margin: 0 auto; } .future-message__content { display: flex; gap: 6%; align-items: center; } .future-message__img { flex: 0 0 45%; border-radius: 16px; overflow: hidden; } .future-message__img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 16px; } .future-message__text { flex: 1; } .future-message__title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 300; letter-spacing: 0.3em; line-height: 1.8; color: var(--color-black); margin-bottom: 2rem; } .future-message__body { font-size: 0.9375rem; letter-spacing: 0.12em; line-height: 2.2; color: var(--color-black); margin-bottom: 3rem; text-align: justify; } /* section-head をテキスト列内に置いた場合の調整 */ .future-section-head--message { margin-bottom: 2rem; } .future-section-head--message .future-section-head__en { color: var(--color-black); } .future-section-head--message .future-section-head__ja { color: var(--color-black); } /* more__btn を白背景で使う場合の上書き */ .future-message__more { color: var(--color-main); border-color: var(--color-main); --btn-fill: var(--color-main); --btn-hover-text: var(--color-white); } /* =========================== JOIN OUR TEAM! の重なり量をfutureページだけ浅くする 共通CSS(.join-section)の margin-top:-110px は、トップページでは special-talk__cards （色付きの背景）の上に重なるので違和感がない。futureページには cards がなく hero写真がそのまま来るため、-110pxだと写真に深く食い込みすぎる。 → 角丸(border-radius)を隠すのに必要な分＋余裕だけ残し、浅く重ねる。 future.css はfutureページでしか読み込まれないため、このオーバーライドは 他ページ（トップ等）の .join-section には影響しない。 =========================== */ /* PCのみ適用（SPは common.css のSP指定＝hero 4:5比率・join -20px をそのまま使う） */ @media (min-width: 768px) { .join-section { margin-top: -50px; } /* =========================== SPECIAL TALK：futureページだけ高さと写真の見え方を調整 共通CSS(.special-talk__hero)は height:50vw / max-height:700px。futureページはここだけ60vwにする （max-heightの700pxキャップは共通CSSのものをそのまま流用）。 あわせて object-fit:cover のデフォルト(中央)だと人物の頭上に余白が出るため、 object-position で表示範囲をやや下寄りにして余白を減らす。 ただしこの画像(2200×1400)は60vwの箱に対して縦の余剰があまりないため、 object-positionだけでは頭上の余白を完全にはゼロにできない（詰めすぎると ワイドスクリーンで頭が切れる）。100%（下いっぱい）まで振り切って余白優先にしている。 =========================== */ .special-talk__hero { height: 60vw; } .special-talk__bg { object-position: center 100%; } } /* ========================================================================== MODAL: 社長メッセージ ========================================================================== */ .message-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 60px 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .message-modal-overlay.is-open { opacity: 1; pointer-events: auto; } .message-modal { position: relative; background: var(--color-white); width: 100%; max-width: 1200px; border-radius: 16px; overflow: hidden; transform: translateY(20px); transition: transform 0.3s ease; } .message-modal-overlay.is-open .message-modal { transform: translateY(0); } /* 閉じるボタン */ .message-modal__close { position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; font-size: 1.75rem; color: var(--color-main); line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 10; font-weight: 300; } /* プロフィール */ .message-modal__profile { display: flex; gap: 2.5rem; padding: 120px 40px; background: var(--color-white); align-items: flex-start; } .message-modal__profile-img { flex: 0 0 377px; aspect-ratio: 377 / 534; border-radius: 20px; overflow: hidden; } .message-modal__profile-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .message-modal__profile-text { flex: 1; padding-right: 3rem; } .message-modal__profile-title { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; letter-spacing: 0.2em; line-height: 1.8; color: var(--color-black); margin-bottom: 1rem; } .message-modal__profile-role { font-family: var(--font-serif); font-size: 1rem; letter-spacing: 0.2em; line-height: 1.6; color: var(--color-black); margin-bottom: 0.5rem; } /* 氏名：日英横並び */ .message-modal__profile-names { display: flex; align-items: baseline; gap: 1.5rem; margin-bottom: 1.5rem; } .message-modal__profile-name-ja { font-family: var(--font-serif); font-size: 2rem; font-weight: 400; letter-spacing: 0.2em; line-height: 1.8; color: var(--color-black); } .message-modal__profile-name-en { font-family: var(--font-serif); font-size: 1rem; font-weight: 400; letter-spacing: 0.2em; line-height: 1.8; color: var(--color-black); } .message-modal__profile-bio { font-size: 0.9375rem; letter-spacing: 0.1em; line-height: 2; text-align: justify; color: var(--color-black); } /* メッセージ本文 */ .message-modal__message { width: 70%; max-width: 800px; margin: auto; } .message-modal__message-label { font-family: var(--font-serif); font-size: 1.25rem; letter-spacing: 0.2em; color: var(--color-main); margin-bottom: 2rem; } .message-modal__message-body { display: flex; flex-direction: column; gap: 2.5rem; } .message-modal__section-heading { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 400; letter-spacing: 0.2em; line-height: 2; color: var(--color-black); margin-bottom: 1rem; } .message-modal__section p { font-family: var(--font-sans); font-size: 0.9375rem; letter-spacing: 0.2em; line-height: 2; text-align: justify; color: var(--color-black); } /* エンジニアの皆さんへ */ .message-modal__engineer { width: 70%; max-width: 800px; margin: 120px auto 0; } .message-modal__engineer p { font-size: 0.9375rem; letter-spacing: 0.2em; line-height: 2; text-align: justify; color: var(--color-black); margin-bottom: 1.25rem; } .message-modal__engineer p:last-child { margin-bottom: 0; } /* 下部：閉じるボタン */ .message-modal__back { display: flex; justify-content: center; padding: 80px 40px 120px; } /* ========================================================================== SP（〜768px） ========================================================================== */ @media (max-width: 767px) { .future-page { padding-top: 52px; } /* ─── 共通セクション見出し ─── */ .future-section-head { margin-bottom: 2.5rem; } .future-section-head__en { font-size: 2.25rem; } .future-section-head__ja { font-size: 1.3125rem; } /* 本文：14px相当に統一 */ .future-hero__body p, .future-expectation__block-body, .future-challenge__body p, .future-message__body, .message-modal__profile-bio, .message-modal__section p, .message-modal__engineer p { font-size: 0.875rem; } /* ─── OPENING ─── */ .future-opening__logo { width: 68vw; /* カンプ: FUTUREロゴ約510/750 */ } /* ─── TAGLINE（2枚目） ─── */ .future-anim-tagline { min-height: calc(100vh - 52px); /* SP固定ヘッダー52px */ } .future-anim-tagline__text { font-size: max(2.5rem, 14.93vw); /* 375px幅で56px（PCと同じletter-spacing 0.18emのまま「進化する。」が収まる大きさ）になる比率。 font-sizeもletter-spacing(em)も一緒にvwで拡縮するので、この比率のまま画面幅に応じて上限なく大きくなる */ line-height: 1.7; padding-left: 5.5%; } /* ─── VIDEO STACK（3・4枚目） ─── */ .future-video-message__line { font-size: 2.5rem; /* カンプ750px幅で80px → 実機375pxで40px */ margin-bottom: 2.5rem; padding-bottom: 1.25rem; } /* SPは「トップランカー」「になる」の行分け版に切り替える */ .future-video-message__line--pc { display: none; } .future-video-message__line--sp { display: block; } /* ─── HERO（わたしたちが目指す未来） ─── */ .future-hero { padding: 80px 0; } .future-hero__inner { width: 89%; } .future-hero__eyebrow { margin-bottom: 2.5rem; } .future-hero__lead { font-size: 2rem; /* カンプ750px幅で64px */ margin-bottom: 3rem; } .future-hero__row { flex-direction: column; align-items: stretch; gap: 48px; margin-bottom: 4rem; } /* 2段目はカンプでは本文→円2つの順（DOMは円→本文なので逆順にする） */ .future-hero__row--second { flex-direction: column-reverse; } .future-hero__body { flex: none; } .future-hero__body p { font-size: 0.875rem; margin-bottom: 2rem; } .future-hero__quote { font-size: 1.25rem !important; margin-bottom: 1rem !important; } .future-hero__emphasis { font-size: 1.625rem !important; } .future-hero__diagram--venn, .future-hero__diagram--duo { flex: none; width: 100%; max-width: none; padding-top: 0; } .future-hero__diagram img { width: 67%; /* カンプ: 約500/750 */ } /* ─── HERO PHOTOS ─── */ .future-hero-photos__inner { padding: 80px 0 60px; } .future-hero-photos__eyebrow { width: 49vw; /* カンプ: 約370/750 */ margin-bottom: 1.25rem; } .future-hero-photos__title { font-size: 2.25rem; /* カンプ750px幅で72px */ letter-spacing: 0.17em; /* PCの0.2emのままだと1行目が画面幅に収まらず折り返すため詰める。カンプも「、」の詰まりからPCより字間が狭い */ /* 「、」の半角化はcommon.cssのYakuHanMP（--font-serifの先頭に指定）で自動的に効く */ margin-bottom: 2.5rem; } /* 写真4枚：横一列のままビューポートより広くして左端フルブリード（右は見切れ、カンプ準拠） */ .future-hero-photos__grid { display: flex; align-items: flex-start; /* stretch(初期値)だとmargin-topが少ない枠が縦に伸びて下端が揃ってしまうため */ width: 134vw; /* 3枚目の右端がちょうど画面右端に収まる幅（4枚目は完全に画面外） */ margin-left: -5vw; /* inner(width:90%)の左インセットぶん引いて画面左端に付ける */ gap: 2vw; padding-bottom: 24px; } .future-hero-photos__item { flex: 1 0 0; } .future-hero-photos__item:nth-child(odd) { margin-top: 24px; } /* ENGINEER DRIVEN窓：SP書き出し画像(future_drivenimg_sp.webp 1500×2668)の比率に合わせる */ .future-hero-photos__band { aspect-ratio: 3 / 2; } /* ─── EXPECTATION（見出し→区切り線→本文→写真の順） ─── */ .future-expectation { padding: 60px 0; } .future-expectation__inner { width: 89%; } .future-expectation__set { display: block; margin-bottom: 3rem; } .future-expectation__block-title { font-size: 1.25rem; padding-bottom: 1.5rem; } .future-expectation__set-img { margin-top: 2rem; } .future-expectation__set-img img { width: 100%; margin-left: 0; } /* ─── CHALLENGE ─── */ .future-challenge { padding: 60px 0 120px; } .future-challenge__inner { width: 89%; } .future-challenge__card-top { flex-direction: column; width: 89%; margin: 24px auto; } .future-challenge__card-text { flex: none; width: 100%; } .future-challenge__title { font-size: 1.25rem; margin: 32px 0 24px; } .future-challenge__card-imgs { flex: none; width: 100%; margin-top: 60px; } .future-challenge__diagram { margin: 0; } .future-challenge__diagram-img { width: 90%; margin: 60px auto; } /* ─── MESSAGE（本文→写真の順） ─── */ .future-message { padding: 60px 0; border-radius: 24px 24px 0 0; margin-top: -30px; } .future-message__inner { width: 89%; } .future-message__content { flex-direction: column-reverse; gap: 2rem; } .future-message__img { flex: none; width: 100%; } .future-message__text { flex: none; width: 100%; } .future-message__title { font-size: 1.25rem; } /* ========================================================================== MODAL: 社長メッセージ ========================================================================== */ .message-modal-overlay { padding: 24px 16px; } .message-modal { border-radius: 16px; } .message-modal__close { top: 16px; right: 16px; width: 32px; height: 32px; font-size: 1.5rem; } .message-modal__profile-names { flex-direction: column; gap: 5px; } .message-modal__profile { flex-direction: column-reverse; gap: 2rem; padding: 70px 24px; } .message-modal__profile-img { flex: none; width: 100%; } .message-modal__profile-text { flex: none; width: 100%; padding-right: 0; } .message-modal__profile-title { font-size: 1.5rem; margin-bottom: 40px; } .message-modal__profile-name-ja { font-size: 1.5rem; } .message-modal__message { width: 90%; } .message-modal__section-heading{ font-size: 1.125rem; } .message-modal__engineer { width: 89%; margin: 60px auto 0; } .message-modal__back { padding: 60px 20px 60px; } } /* ========================================================================== ヘッダーがSP版になる帯（〜949px）: 固定ヘッダー高さ52pxに合わせる （common.css のヘッダー切替と同じ境界） ========================================================================== */ @media (max-width: 949px) { .future-page { padding-top: 52px; } }