/* ========================================================================== pages/about.css — Figma 2922:5971（地球防衛隊7-17）実データ写経 2026-07-19 全面突合（ABOUT US〜メンバー）。数値は get_design_context 実値。 Yu Gothic ウェイト: B=Bold(700) / D=Demibold(≈600)。 ========================================================================== */ /* ===== 導入ヒーロー（FV） ===== */ .p-about-hero { padding: 128px 0 0; text-align: center; position: relative; } /* column/case と同じ高さ */ .p-about-hero > .l-inner { position: relative; z-index: 2; } /* テキストをFV画像より前面に */ .p-about-hero__en { /* ABOUT US 2922:7208 */ font-family: var(--font-en); font-weight: 700; font-size: 48px; line-height: 64px; letter-spacing: 4.8px; color: var(--color-main); } .p-about-hero__label { /* 2922:7209 */ font-family: var(--font-jp); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; color: var(--color-main); margin-top: 18px; /* column sub と同じ間隔 */ } .p-about-hero__title { /* 2922:7530 */ font-family: var(--font-jp); font-weight: 700; font-size: 32px; /* 0831修正・私たちについて1「もう少し、文字間を開けてもらえますか？」1.6 → 2.4px */ line-height: 56px; letter-spacing: 2.4px; color: var(--color-ink); margin-top: 12px; } .p-about-hero__lead { /* 2922:7529 = B(700)18px */ font-family: var(--font-jp); font-weight: 700; font-size: 18px; /* 0831修正・私たちについて1（同上）0.9 → 1.7px */ line-height: 32px; letter-spacing: 1.7px; color: var(--color-ink); margin-top: 14px; } .p-about-hero__img { /* 🔴 2026-08-24 前田社長指示「単純に下に表示エリアを広くとって・Figma準拠しなくていい・PCだけ」。 821px → 960px（+139px）。あわせて hero.jpg を **013 の全フレーム（トリミング一切なし）** に差し替えた。 箱を高くするだけだと cover が横を切って逆に寄るので、写真側の比率も 1.5 に合わせる必要がある。 原本013 = 8074×5383（比1.4999） → hero.jpg 2048×1365（比1.5004） → 1440幅での箱 = 959.8px 人物の大きさは変わらない（横は従来どおり全幅が入る）。増えたのは天井 +68px と脚 +71px。 ⚠️ これが013で取り得る限界。フレーム下端がふくらはぎなので、これ以上は足元が存在しない。 Figmaの枠は 1440×814 なので**意図的に逸脱**している（前田社長判断）。SPは別画像・別比率なので影響なし。 🔴 2026-08-24 追加修正：**高さ固定をやめて写真と同じ比率にした**（前田社長「013の下部分を全部表示して」）。 960px 固定だと箱の比率が画面幅で変わるため、cover が幅ごとに別の切り方をしていた（実測）: 1280 → 左右が計160px切れる ／ 1440 → ちょうど ／ 1920 → 上下が25%切れる ／ 2560 → 上下が44%切れて**頭が飛ぶ** `aspect-ratio` で箱を写真と同比にすると、**どの画面幅でも上下左右いっさい切れない**。 代わりに広い画面ほど縦に伸びる。これは意図した挙動。 🔴 2026-08-24 さらに調整：**上を原本の10%だけカット**（前田社長「PCだけ上部分を少しカットして」）。 hero.jpg を 013 の `x0 y538 8074×4845` から書き出し＝`2048×1229`（比1.6664）。 **切ったのは天井だけで、下端は 013 のフレーム末端のまま**（脚の見え方は変わらない）。 箱の比率も写真に合わせて更新する（合わせないと cover が幅ごとに別の切り方をする＝上の失敗の再来）。 1440→864px ／ 1920→1152px ／ 2560→1536px。 */ width: 100%; height: auto; aspect-ratio: 2048 / 1229; /* 🔴 2026-08-21 修正：リード文に画像が被らないようにする（前田社長指示）。 旧実装は margin-top:-16px でリード2行目の中心に画像上端を重ねていた（2026-07-19 の指示）。 当時はグレーダミーだったため目立たなかったが、実写真を入れて被りが顕在化した。 本番Figma(QqeZ)の about.png を画素実測 → リード文の下端 y442 / 画像上端 y480 ＝ 余白38px。 lead の margin-bottom 相当がないので、ここで 38px を確保する。 */ margin-top: 38px; position: relative; z-index: 1; /* 2026-08-21 実写真化。本番Figma の `NZ8_1010 1`（社員集合写真）を配置（EXIF除去済）。 */ /* 🔴 2026-08-24 `center` → `bottom` に変更（前田社長「013の下部分を全部表示して・上はそのままでいい・PCだけ」）。 高さが 960px 固定なので、**画面幅が 1440 を超えると cover の倍率が上がって上下が切れていた**（実測）: 1280/1366/1440 → 100% 見える ／ 1536 → 93.8% ／ 1728 → 83.4% ／ 1920 → 75.0% ／ 2560 → 56.3% `bottom` で下端を箱の下端に固定すると、どの画面幅でも**写真の下端は必ず出る**（切れるのは上だけ）。 SPは箱 375×560 と hero-sp.jpg 750×1120 が同比 0.670 で**切り取りが発生しない**ため、この指定の影響を受けない。 */ background: var(--color-gray180) url('../../images/about/hero.jpg') center bottom/cover no-repeat; transition: opacity .6s ease; } /* 🔴 2026-08-22 前田社長指示：ページを開いた時／F5 の直後に画像が一瞬見えるのを止める。 旧実装は JS（boot＝DOMContentLoaded）で is-hidden を「後から」付けていたため、 初回ペイント〜boot の間だけ画像が opacity:1 で描かれていた＝チラつきの正体。 既定を非表示にして、JS がステガー完了後に is-shown を付けて出す（ヘッダーと同じ .js ゲート方式）。 */ .js .p-about-hero__img { opacity: 0; } .js .p-about-hero__img.is-shown { opacity: 1; } /* reduce-motion では JS がステガーごと降りる＝出す側が動かないので、CSSで最初から見せる。 */ @media (prefers-reduced-motion: reduce) { .js .p-about-hero__img { opacity: 1; } } .p-about-hero__img.is-floating { animation: p-about-hero-float 3.6s ease-in-out infinite; } @keyframes p-about-hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* FV 導入: ラベル→大見出し→リードを1字ずつステガー（§★B-1・JS時のみ） */ .js .p-about-hero [data-splittext] .char { display: inline-block; opacity: 0; transform: translateY(.4em); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1); } .js .p-about-hero [data-splittext].is-in .char { opacity: 1; transform: none; } .p-about-hero .char--space { width: .4em; } /* ===== 共通セクション見出し（Yu Gothic B 24px lh32 緑・letter-spacing はセクション毎） ===== */ .p-about-h2 { font-family: var(--font-jp); font-weight: 700; font-size: 24px; line-height: 32px; color: var(--color-main); } /* ===== NENGO地球防衛隊とは（中央揃え・幅621） ===== */ .p-about-intro2 { padding: 96px 0; text-align: center; } .p-about-intro2 .p-about-h2 { letter-spacing: 4.8px; } /* 2922:7537 */ .p-about-intro2__body { /* 2922:7538 = D16px lh30 ls0.8 中央 */ font-family: var(--font-jp); font-weight: 600; font-size: 16px; line-height: 30px; letter-spacing: 0.8px; color: var(--color-ink); max-width: 621px; margin: 28px auto 0; text-align: center; } .p-about-intro2__body p { margin: 0 0 30px; } /* 段落間の空行（30px＝1行分） */ .p-about-intro2__body p:last-child { margin-bottom: 0; } /* ===== なぜ、この考え方に至ったのか（左テキスト+右コラージュ・もっと読む） ===== */ /* コラージュを画面右端まで届かせるため、内側1100からの食い出しを許してセクション側で切る */ .p-about-why { padding: 8px 0 96px; overflow-x: clip; } .p-about-why__grid { display: grid; grid-template-columns: 530px minmax(0, 1fr); gap: 62px; align-items: start; /* Figma: テキスト x170 w530／コラージュ x762〜1438。内側(1100)の右端を越えて画面右端まで伸ばす */ margin-right: calc(50% - 50vw); } .p-about-why .p-about-h2 { letter-spacing: 1.2px; text-align: left; } /* 2931:9506 左 */ .p-about-why__body { /* 2922:7563 = D15px lh26 ls0.75 左 */ font-family: var(--font-jp); font-weight: 600; font-size: 15px; line-height: 26px; letter-spacing: 0.75px; color: var(--color-ink); margin-top: 24px; } .p-about-why__body p { margin: 0 0 26px; } /* 段落間の空行 */ .p-about-why__body p:last-child { margin-bottom: 0; } /* 写真コラージュ ＝ 2段の自動スライド（2026-08-21 作り替え／2026-08-22 写真・高さを修正） 使う写真は about フレームの外（等倍 y7751 / y7976）に置かれた6枚。各 h225・幅 366/310/310。 フレーム内に描かれていた4枚（main-1〜4・h291）は差し替え前の写真なので使わない。 右カラムは x762〜1438 で、内側1100の右端(1270)を越えて画面右端まで到達する。 指示文 3292:220「上は、左から右。下は、右から左へ」＝上段のみ逆再生。 */ /* 高さは 584px 固定（2026-08-22 前田社長指示）。 左テキスト3段落目の最終行「…重ねてきました。」の行box下端が 2397、コラージュ上端が 1821 なので 576 + 8px ＝ スライダーが“ほんの少しだけ下に出る”。 ⚠️ aspect-ratio で持つと画面幅でコラージュの高さが変わり、この関係が1440幅でしか成立しない。 左カラムは 530px 固定でテキストの高さも一定なので、高さも固定で持つのが正しい。 */ .p-about-collage { width: 100%; min-width: 0; height: 584px; display: flex; flex-direction: column; } .p-about-collage__row { flex: 1 1 50%; min-height: 0; overflow: hidden; } .p-about-collage__track { display: flex; height: 100%; width: max-content; animation: p-about-marquee 40s linear infinite; will-change: transform; } /* 上段＝左から右（0 → -50% を逆再生）。開始位置が -50%＝2周目の先頭になるので、 止まって見えるときの並びは Figma と同じ「1枚目 → 2枚目 → 3枚目」から始まる。 */ .p-about-collage__row--top .p-about-collage__track { animation-direction: reverse; } .p-about-collage__row--bot .p-about-collage__track { animation-duration: 48s; } .p-about-collage__tile { flex: 0 0 auto; height: 100%; width: auto; display: block; object-fit: cover; } /* Figma のワイヤー外6枚は 366x225 / 310x225。切り取らずそのままの比率で高さ292に合わせる */ .p-about-collage__tile--w366 { aspect-ratio: 366 / 225; } .p-about-collage__tile--w310 { aspect-ratio: 310 / 225; } @keyframes p-about-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .p-about-collage__track, .p-about-brand__track { animation: none; } } /* もっと読む: details でクランプ→展開 */ .p-about-clamp > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; /* 0831修正・私たちについて2「文字大きさを小さく、13PTに。書体もワンウエイト下げる」15px/700 → 13px/600 */ margin-top: 16px; font-family: var(--font-jp); font-weight: 600; font-size: 13px; letter-spacing: 1px; color: var(--color-main); } .p-about-clamp > summary::-webkit-details-marker { display: none; } .p-about-clamp > summary::after { content: "＋"; font-weight: 700; } .p-about-clamp[open] > summary::after { content: "－"; } .p-about-clamp[open] > summary .p-about-clamp__label-closed { display: none; } .p-about-clamp:not([open]) > summary .p-about-clamp__label-open { display: none; } /* ===== ブランドメッセージ（MESSAGE） ===== */ .p-about-brand { padding: 88px 0; text-align: center; } .p-about-brand__en { /* 2922:7577 = Montserrat700 40px ls4 */ font-family: var(--font-en); font-weight: 700; font-size: 40px; line-height: 64px; letter-spacing: 4px; color: var(--color-main); } .p-about-brand__label { /* 2922:7578 = 14px ls1.4 */ font-family: var(--font-jp); font-weight: 700; font-size: 14px; line-height: 16px; letter-spacing: 1.4px; color: var(--color-main); margin-top: 6px; } .p-about-brand__copy { /* 2922:7580 = B700 40px lh56 ls2 */ font-family: var(--font-jp); font-weight: 700; font-size: 40px; line-height: 56px; letter-spacing: 2px; color: var(--color-ink); margin-top: 20px; } .p-about-brand__sub { /* 2922:7579 = B700 24px lh44 ls1.2 緑 */ font-family: var(--font-jp); font-weight: 700; font-size: 24px; line-height: 44px; letter-spacing: 1.2px; color: var(--color-main); margin-top: 16px; } .p-about-brand__body { /* 2922:7582 = D16px lh30 ls0.8・中央（前田社長指示） */ font-family: var(--font-jp); font-weight: 600; font-size: 16px; line-height: 30px; letter-spacing: 0.8px; color: var(--color-ink); max-width: 938px; margin: 28px auto 0; text-align: center; } .p-about-brand__body p { margin: 0 0 30px; } .p-about-brand__body p:last-child { margin-bottom: 0; } /* MESSAGE下の写真ストリップ ＝ 1段の自動スライド（2026-08-21） 本番Figma 実測（等倍）: 薄グレー帯 x0 y3522 w986 h380 #F5F5F5 ／ 写真7枚 y3632 h160・x0から連続。 写真は帯の右端(986)を越えて x1274 まで置かれているが、前田社長の指示 「グレーの背景の所でスライドは切れてほしい」により帯でクリップする。 帯の上端から写真までの余白 110px（3632-3522）＝下も110pxで、写真は帯の天地中央に来る。 🔴 2026-08-22 修正（前田社長指示・ここはFigmaではなく金谷さんの口頭指示が正）: ・写真は帯の高さいっぱい（380px）に置く。**写真で帯が隠れて見えなくなるのが正解** ・右端は本文最終行「…つながると考えています。」の「つ」の位置で終わる。 本文は max-width 938 の中央寄せなので、画面中央から 236px 右＝ calc(50% + 236px)。 画面幅が変わっても「つ」との関係が保たれる（68.5%固定だと幅ごとにズレる）。 */ .p-about-brand__band { position: relative; overflow: hidden; width: calc(50% + 236px); height: 380px; margin-top: 70px; /* 本文下端 3452 → 帯上端 3522 */ background: #F5F5F5; /* 写真が出るまでの下地。通常は写真で覆われる */ } .p-about-brand__track { position: absolute; left: 0; top: 0; height: 100%; display: flex; width: max-content; /* 0831修正・私たちについて3「スライド、もう少し、気持ちゆっくりに」40s → 60s（1.5倍） */ animation: p-about-marquee 60s linear infinite; will-change: transform; } .p-about-brand__tile { flex: 0 0 auto; height: 100%; width: auto; display: block; object-fit: cover; } .p-about-brand__tile--s { aspect-ratio: 130.7 / 160; } .p-about-brand__tile--m { aspect-ratio: 200 / 160; } .p-about-brand__tile--l { aspect-ratio: 206.2 / 160; } /* ===== 各サービスに対する私たちの考え方（クリーム帯・写真左右交互のジグザグ） ===== */ .p-about-stance { width: 100%; background: var(--color-bg-soft); padding: 80px 0; } .p-about-stance .p-about-h2 { letter-spacing: 1.2px; } /* 2922:7977 */ .p-about-stance__head { text-align: center; margin-bottom: 40px; } /* 見出しと最初の緑線の余白 */ /* 各サービスの上下・間に緑1px横線（Figma node 7978-7981 = #50694B 幅1100）＝行のborderで再現 */ .p-about-stance__list { display: grid; gap: 0; } .p-about-stance__row { display: grid; grid-template-columns: 1fr 246px; gap: 48px; align-items: start; border-top: 1px solid var(--color-main); padding: 34px 0; } .p-about-stance__row:last-child { border-bottom: 1px solid var(--color-main); } /* grid-row:1 を両方に明示＝rev行で列入替時に画像が次行へ回り込む(sparse auto-placement)のを防ぐ */ .p-about-stance__textwrap { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: max-content 1fr; gap: 28px; align-items: start; } .p-about-stance__img { grid-column: 2; grid-row: 1; width: 246px; max-width: 100%; height: auto; display: block; } .p-about-stance__row--rev { grid-template-columns: 246px 1fr; } .p-about-stance__row--rev .p-about-stance__textwrap { grid-column: 2; } .p-about-stance__row--rev .p-about-stance__img { grid-column: 1; } .p-about-stance__label { /* 2922:8018 = B700 20px ls4 緑 */ font-family: var(--font-jp); font-weight: 700; font-size: 20px; line-height: 32px; letter-spacing: 4px; color: var(--color-main); white-space: nowrap; } .p-about-stance__text { /* 2922:8020 = D15px lh26 */ font-family: var(--font-jp); font-weight: 600; font-size: 15px; /* 0831修正・私たちについて4「もう少し、文字間を開けてもらえますか？　文字が多いんだよね」 */ line-height: 26px; letter-spacing: .8px; color: var(--color-ink); } /* ===== メンバー（4列7枚の散らし配置・緑ネームプレート・ホバーbio） ===== */ .p-about-members { padding: 88px 0; } .p-about-members .p-about-h2 { letter-spacing: 4.8px; } /* 2922:8052 */ .p-about-members__head { text-align: center; margin-bottom: 40px; } .p-about-members__intro { /* 2922:8053 = D16px lh30 ls0.8 中央 */ font-family: var(--font-jp); font-weight: 600; font-size: 16px; line-height: 30px; letter-spacing: 0.8px; color: var(--color-ink); margin-top: 14px; text-align: center; } /* 4列 × 各列は縦積み（2026-08-22）。 1つのグリッドに6枚を直接流すと**行の高さを共有する**ため、佐々木様のホバーで北宮様まで下がってしまう。 列を独立させると、伸びた列の下にあるカードだけが押し下げられる。 列1=佐々木/小宮山 列2=服部/北宮 列3=牧野 列4=石川 下段2枚の並び（小宮山を北宮の左・同じ段）は 2026-08-21 前田社長指示のまま。 ⚠️ 本番Figma は 5枚目 y+336 / 6枚目 y+694 の階段状だが、指示により同じ段に揃えている。 */ .p-about-members__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; align-items: start; } .p-about-members__col { display: flex; flex-direction: column; gap: 40px; } /* 2026-08-22 前田社長指示: ホバーで本文を「写真の下」に出す（旧実装は写真の上に被せていた）。 さらに同日の追加指示で、本文は ・カードと同じ幅（当初は Figma 実測の 幅223＝カード−23 にしていた） ・浮かせて重ねるのではなく、**下段のカード（小宮山・北宮）が下に避ける** 写真そのものの大きさは変えない＝ホバーを外せば元の見た目に戻る。 そのため、写真＋プレートは __figure に閉じ込め（ここだけ aspect-ratio と切り抜きを持つ）、 本文は __figure の「下」に通常のフローで積む。カードが縦に伸びる＝グリッドの行が伸びる。 */ .c-member { position: relative; } .c-member__figure { position: relative; aspect-ratio: 245 / 306; overflow: hidden; isolation: isolate; background: var(--color-gray180) center/cover no-repeat; color: var(--color-white); } .c-member__plate { /* 下部のネームプレート */ /* 2026-08-21 Figma実測に合わせて 高さ57px 固定（旧実装は padding で可変になっており、 役職ありの2枚だけ厚くなっていた）。牧野様＝役職なしの見え方に全員を揃える。 */ /* 2026-08-23: SPでFigma準拠の「写真の横に氏名」を作るため、プレートを figure の外（兄弟）へ移した。 PCの見た目は変えない＝負マージンで写真の下端57pxにそのまま重ねる（旧: figure内の absolute）。 */ position: relative; z-index: 2; margin-top: -57px; height: 57px; box-sizing: border-box; padding: 0 8px; display: flex; flex-direction: column; justify-content: center; background: var(--color-main); /* 🔴 2026-08-24 修正。文字色は __figure の color:白 を継承していたが、8/23 にプレートを __figure の外（兄弟）へ移した時点で継承が切れ、**6枚とも #373737 の黒字**になっていた。 Figma pc-about.png のプレート帯を画素実測 → 文字 rgb(255,255,255) / 地 rgb(77,99,73)。 */ color: var(--color-white); } /* プレート色は緑とベージュの市松（2026-08-21 Figma実測: #50694B / #9E9B7C）。 列と段の合計が偶数＝緑／奇数＝ベージュ。見た目は 2026-08-21 版と同じ （佐々木=緑 服部=ベージュ 牧野=緑 石川=ベージュ 北宮=緑 小宮山=ベージュ）。 */ .p-about-members__col:nth-child(odd) .c-member:nth-child(even) .c-member__plate, .p-about-members__col:nth-child(even) .c-member:nth-child(odd) .c-member__plate { background: #9E9B7C; } /* 0831修正・私たちについて5「【現場で大切にしていること】と丸数字を各キーカラーに合わせる」 プレートの市松と同じ配色を変数に持たせ、bio の見出しと丸数字に流し込む。 プレートの背景色とこの変数は必ず同じ条件で切り替える（片方だけ直すと色が食い違う）。 */ .c-member { --member-key: var(--color-main); } .p-about-members__col:nth-child(odd) .c-member:nth-child(even), .p-about-members__col:nth-child(even) .c-member:nth-child(odd) { --member-key: #9E9B7C; } .c-member__role { font-family: var(--font-jp); font-weight: 700; font-size: 10px; line-height: 10px; letter-spacing: 1px; } .c-member__nameline { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; } /* 氏名は折り返さない。横並び(flex)のローマ字と取り合いになると「佐々木　孝／幸」のように 氏名が途中で改行される（2026-08-21 実測・6名中5名で発生）。溢れる分はローマ字側で折る。 */ .c-member__name { font-family: var(--font-jp); font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: 0.6px; white-space: nowrap; } /* ローマ字は改行させず1行で出す（2026-08-21 前田社長指示）。 実名は Figma のダミー「山本太郎/yamamoto taro」より長いため、プレート幅226px に収まるよう 字送りを詰める。氏名側も nowrap なので、溢れる場合はここを先に削る。 */ .c-member__romaji { font-family: var(--font-en); font-weight: 600; font-size: 11px; line-height: 11px; letter-spacing: 0; white-space: nowrap; } /* 本文はフローに乗せたまま高さ0で畳んでおく。ホバーで開くと、その分だけカードが縦に伸び、 グリッドの1行目が高くなる＝2行目（小宮山・北宮）が下へ避ける。 （高さ auto は transition できないので max-height で開閉する。中身より十分大きい値を上限に取る） */ .c-member__bio { max-height: 0; overflow: hidden; color: var(--color-ink); transition: max-height .38s ease; } .c-member__bio-inner { padding: 13px 0 0; /* Figma 2922:8628 実測＝カード下端から13px下 */ /* 0831修正・私たちについて5「文字大きさを13PTにして」12px → 13px */ font-family: var(--font-jp); font-weight: 600; font-size: 13px; line-height: 24px; opacity: 0; transition: opacity .25s ease .06s; } .c-member__bio b { font-weight: 700; color: var(--member-key); } /* 0831修正・私たちについて5「丸数字が飛び出すようにインデントを入れてください」＝ぶら下げ */ .c-member__li { display: block; padding-left: 1.15em; text-indent: -1.15em; } .c-member__li > i { font-style: normal; color: var(--member-key); } /* 「もっと読む」はSP専用（PCはホバーで開く）。 */ .c-member__more { display: none; } /* ⚠️ この展開はPC専用。SPに漏らすと「閉じる」が効かなくなる（2026-08-24 実測）。 SPは「もっと読む／閉じる」ボタンで開閉する（.is-open）。ボタンを押すとカードが :focus-within になるため、この2行がメディアクエリ無しだと (0,3,0) で SP側の .c-member__bio (0,1,0) を上書きし、is-open を外しても max-height:460px のまま開き続ける。 */ @media (min-width: 768px) { .c-member:hover .c-member__bio, .c-member:focus-within .c-member__bio { max-height: 460px; } .c-member:hover .c-member__bio-inner, .c-member:focus-within .c-member__bio-inner { opacity: 1; } } /* 配置＝1234 / 567（前田社長指示・4列自然フロー・左詰め） */ /* ===== INFORMATION（4枚横） ===== */ .p-about-info { width: 100%; background: var(--color-bg-soft); padding: 72px 0; } .p-about-info__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .p-about-info__cell { display: block; aspect-ratio: 1; background: var(--color-white) center/cover no-repeat; transition: opacity .3s ease; } .p-about-info__cell:hover, .p-about-info__cell:focus-visible { opacity: .8; } .p-about-info__cell:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; } /* ===== レスポンシブ ===== */ @media (max-width: 900px) { .p-about-info__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .p-about-hero { padding-top: 126px; } /* Figma実測: ヘッダー下端→字面 35px（column/case と同値） */ /* Figma SPフレーム実測（1x・2026-08-23）: ABOUT US 字面26・ink幅222 → 36px（PCは48px） 大見出し 字面20・行送り33.5・中央 → 22px/lh33.5。改行は「はじめまして、／NENGO地球防衛隊です」 リード 字面14・行送り26・左端20.5 → 15px/lh26 「NENGO地球防衛隊とは」 字面18.5・x22 → **20px・左揃え**（中央ではない） intro2本文 字面14・行送り26・段落間52 → 15px/lh26・段落間26 */ .p-about-hero__en { font-size: 36px; line-height: 48px; letter-spacing: 3.6px; } .p-about-hero__title { font-size: 22px; line-height: 33.5px; letter-spacing: 1.1px; } .p-about-hero__lead { font-size: 15px; line-height: 26px; letter-spacing: .75px; } .p-about-intro2 { padding: 40px 0; } /* Figma SP実測: 共通見出し .p-about-h2 は **20px が基本**（PCは24px）。 NENGO地球防衛隊とは 字面18.5 → 20px なぜ、この考え方に至ったのか 字面19.5・左揃え → 20px NENGO地球防衛隊メンバー 字面18.5・1行 → 20px stance だけ 22px（下で個別指定）。 */ .p-about-h2 { font-size: 20px; line-height: 30px; } .p-about-intro2 .p-about-h2 { letter-spacing: 2px; } .p-about-why .p-about-h2 { letter-spacing: 2.6px; } .p-about-intro2__body { font-size: 15px; line-height: 26px; margin-top: 22px; } .p-about-intro2__body p { margin-bottom: 26px; } /* PCは写真をリード文に少し食い込ませるが、SPはリードが3行になり文字と重なる（実測・2026-08-23）。 Figma SPフレームでもリード下端と写真の間に約30pxの余白があるので食い込みをやめる。 */ /* ✅ 2026-08-24 解決。金谷さん受領の `260728_014.jpg`＝**縦位置の集合写真（別カット）**を SP専用として配置した（`about/hero-sp.jpg` 750×1120）。 Figma SPフレーム `sp-about.png` を画素実測 → 枠は x0..373（全幅）・y409..968＝**375×560（比0.670）**。 受領原本の比は 0.667 で、この枠のために撮られた縦カットだった。 （旧実装は横カット 2048×1167 を敷いており、375幅で高さを上げると cover で左右が切れて 5人中3人しか写らないため、比率を寝かせて逃げていた。縦カットの支給で不要になった。） */ .p-about-hero__img { height: auto; aspect-ratio: 375 / 560; margin-top: 30px; background-image: url('../../images/about/hero-sp.jpg'); } /* Figma SPフレーム実測: 見出しは中央のまま、**本文は左揃え**（x=20 始まり）。 PCの中央揃えのままだと1行ごとに行頭がずれて読みにくい。 */ .p-about-hero__lead, .p-about-intro2 .p-about-h2, .p-about-intro2__body, .p-about-brand__body, .p-about-members__intro { text-align: left; } .p-about-hero__lead br, .p-about-intro2__body br { display: none; } /* PC用の改行指定はSPでは効かせない */ .p-about-intro2__body, .p-about-brand__body { max-width: 100%; } .p-about-why__grid { grid-template-columns: 1fr; gap: 28px; margin-right: 0; } /* SPは食い出さない */ .p-about-collage { max-width: 460px; margin: 0 auto; height: 380px; } /* PCの584固定はSPでは高すぎる */ /* MESSAGEストリップ: SP_about(3085:4613) 実測＝グレー帯なし・写真は画面全幅・高さ260 */ .p-about-brand__band { width: 100%; height: 260px; background: none; margin-top: 48px; } /* Figma SP実測: コピーは字面30・各行8文字でink幅256 → 32px・2行「最小限の施しで、／最大限の恩恵を。」 その下のサブは x20.5 始まりの **左揃え**（中央ではない）・字面19 → 20px */ .p-about-brand__copy { font-size: 32px; line-height: 46px; letter-spacing: .3px; } .p-about-brand__sub { font-size: 20px; line-height: 34px; text-align: left; } .p-about-brand__sub br { display: none; } /* stance: 縦積み（画像を下） */ /* 🔴 PCは「文章|写真」の2カラムで、写真に grid-row:1 を明示している。 SPで1カラムにしたとき grid-row:1 が残ると**文章と写真が同じ行に重なる**（実測・2026-08-23）。 行の自動配置に戻して縦積みにする。 */ .p-about-stance__row, .p-about-stance__row--rev { grid-template-columns: 1fr; gap: 16px; } .p-about-stance__textwrap { grid-column: 1 !important; grid-row: auto !important; grid-template-columns: 1fr; gap: 8px; } .p-about-stance__img { grid-column: 1 !important; grid-row: auto !important; width: 246px; /* Figma SPフレームも原寸246を中央置き（16:9に潰さない） */ margin: 12px auto 0; } .p-about-stance__label { white-space: normal; } /* members: 2列フロー */ /* Figma SPフレーム実測: 見出しのサイズがセクションごとに違う（PCは一律24px/ls4.8） 各サービスに対する私たちの考え方 = 字面20.5・2行「各サービスに対する／私たちの考え方」 → 22px/ls2 NENGO地球防衛隊メンバー = 字面18.5・ink幅303・**1行** → 20px/ls3.7 （24px のままだと「…メン／バー」で割れる） */ .p-about-stance .p-about-h2 { font-size: 22px; letter-spacing: 2px; line-height: 32px; } .p-about-members .p-about-h2 { letter-spacing: 3.7px; } .p-about-members__grid { grid-template-columns: repeat(2, 1fr); } .p-about-info__grid { grid-template-columns: repeat(2, 1fr); } /* ネームプレート: PCの「和名＋ローマ字を1行」はSP幅（カード約160px）に収まらず切れる。 ローマ字を次の行に落とす（実測・2026-08-23）。 */ /* ===== メンバー: Figma SPフレーム準拠の「互い違い（ジグザグ）」1列 ===== 実測(1x): 写真 144×179 ／ 行ピッチ209（＝間隔30） 1・3・5人目 → 写真 x19..163（左）・テキスト右 2・4・6人目 → 写真 x210..354（右）・テキスト左 緑のネームプレートは**無く**、写真の横に 役職／氏名／ローマ字／本文／もっと読む が並ぶ。 PCの4列構造（ホバーで its列だけ下に伸びる仕組み）は display:contents で解体して1列に流す。 */ .p-about-members__grid { display: block; } .p-about-members__col { display: contents; } .c-member { display: grid; grid-template-columns: 144px minmax(0, 1fr); column-gap: 30px; align-items: start; margin-bottom: 30px; } .c-member__figure { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 144 / 179; } .c-member__plate { grid-column: 2; grid-row: 1; position: static; margin-top: 0; height: auto; padding: 0; display: block; background: none; color: var(--color-main); } /* 市松の背景（緑／ベージュ）はSPでは使わない */ .p-about-members__col:nth-child(odd) .c-member:nth-child(even) .c-member__plate, .p-about-members__col:nth-child(even) .c-member:nth-child(odd) .c-member__plate { background: none; } .c-member__nameline { flex-wrap: wrap; row-gap: 2px; align-items: baseline; margin-top: 2px; } .c-member__role { font-size: 11px; line-height: 16px; } .c-member__name { font-size: 18px; line-height: 26px; letter-spacing: .9px; } .c-member__romaji { font-size: 11px; line-height: 16px; letter-spacing: .5px; } /* 本文は既定で4行ぶんだけ見せ、「もっと読む」で全部開く（PCはホバーのまま） */ .c-member__bio { grid-column: 2; grid-row: 2; max-height: 109px; } .c-member__bio-inner { opacity: 1; padding-top: 10px; } .c-member.is-open .c-member__bio { max-height: 900px; } .c-member__more { grid-column: 2; grid-row: 3; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0; background: none; border: 0; cursor: pointer; font-family: var(--font-jp); font-weight: 600; font-size: 12px; color: var(--color-main); justify-self: start; } .c-member__more::before { content: "＞"; font-size: 11px; } /* 偶数番目（2・4・6人目）は写真を右・テキストを左に入れ替える。 PCの列割り（列1=佐々木/小宮山 列2=服部/北宮 列3=牧野 列4=石川）を1列に流した通し番号で判定する。 */ /* 列幅も入れ替える（入れ替えないと写真が 1fr 側に入って161×200に伸びる） */ .p-about-members__col:nth-child(1) .c-member:nth-child(2), .p-about-members__col:nth-child(2) .c-member:nth-child(2), .p-about-members__col:nth-child(4) .c-member:nth-child(1) { grid-template-columns: minmax(0, 1fr) 144px; } .p-about-members__col:nth-child(1) .c-member:nth-child(2) .c-member__figure, .p-about-members__col:nth-child(2) .c-member:nth-child(2) .c-member__figure, .p-about-members__col:nth-child(4) .c-member:nth-child(1) .c-member__figure { grid-column: 2; } .p-about-members__col:nth-child(1) .c-member:nth-child(2) > :not(.c-member__figure), .p-about-members__col:nth-child(2) .c-member:nth-child(2) > :not(.c-member__figure), .p-about-members__col:nth-child(4) .c-member:nth-child(1) > :not(.c-member__figure) { grid-column: 1; } /* INFORMATION の「インスタグラムへ」は TOP と同じく一覧の下・右寄せ（Figma SPフレーム）。 about は top.css を読み込まないので、ここに同じ規則を持つ。 */ .p-about-info .l-inner { display: flex; flex-direction: column; } .p-about-info .p-sec-head, .p-about-info .p-sec-head__titleline { display: contents; } .p-about-info .p-sec-head__heading { order: 1; } .p-about-info .p-sec-head__body { order: 2; } .p-about-info__grid { order: 3; margin-top: 36px; } .p-about-info .p-sec-head__link { order: 4; align-self: flex-end; width: 249px; margin-top: 26px; text-align: left; } /* 🔴 2026-08-23 修正: 2層（短い矢印＋長い線）で重なって見えていたので249px専用アセット1枚に */ .p-about-info .p-sec-head__link::after { width: 249px; background: url('../../images/nengo/arrows/vec-link-underline-arrow-sp.svg') no-repeat left top / 249px 5.4px; } }