/* ========================================================================= custom.css ✏️ 自由に触ってOK（あなたの作業ファイル） ------------------------------------------------------------------------- ・ここに書いたスタイルは about-us.css の「後」に読み込まれるので、 同じセレクタを書けば上書き（後勝ち）できます。 ・about-us.css（ベース）はできるだけ直接編集せず、変更はこの custom.css に 書いてください。→ 戻すときに「何を変えたか」が一目で分かります。 ・新しいクラスを追加するのもOKです。 ------------------------------------------------------------------------- ▼ 今回の調整方針（参考画像 = MotionVFX 風 / ダーク + 紫〜青の控えめグラデ） 1. Hero：集合写真を大きなヘッダー画像として使用（黒グラデで馴染ませる） 左に OUR TEAM / Meet the Team / 説明文 2. Team：黒ベース + 控えめな紫〜青グラデ。見出しは左寄せでシンプルに 3. Member Card：白黒ポートレート前提・薄い枠線・控えめな角丸とホバー 4. Get in Touch：他セクションと馴染む上品なグラデパネル + 白ボタン ・色は紫(#8b5cf6 系)〜青(#3b82f6 系)を薄く使用。 ========================================================================= */ /* 英数フォント = Inter / 和文 = Noto Sans JP（Interと相性の良いヒューマニスト系サンセリフ）。 は触らず、既存の Google Fonts CDN から custom.css 内で読み込み。 ※ @import はCSS仕様上、他ルールより前に置く必要があるためファイル先頭付近に記述。 ※ 最終提出時は dev 側で Inter をテーマに enqueue 推奨。 */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ========================================================================= 共通トーン ========================================================================= */ .about-us { background: #050505; /* 文字を読みやすく：基準色を少しだけ落ち着かせる */ color: #f2f2f4; /* 英数 = Inter、和文 = Noto Sans JP（Interが持たないCJKを担当） */ font-family: "Inter", "Noto Sans JP", sans-serif; } /* 巨大な V / P 装飾は可読性優先で「背景」に退避（構造は残す） ・mix-blend-mode: exclusion は文字に重なると白文字を反転させ可読性を落とすため解除 ・z-index を下げて本文(.inner=z2)の背後に置く */ .about-deco { -webkit-text-stroke: 1px rgba(255, 255, 255, 0.045); mix-blend-mode: normal; z-index: 0; opacity: 0.7; } /* ========================================================================= 1. Hero Section — 集合写真ヘッダー ========================================================================= */ .about-hero { /* 幅に応じて高さも伸ばし、ワイド画面での上下トリミングを抑える（下限660px / 上限900px）。 ~1435px までは実質660px、それ以上で徐々に高くなり 900px で頭打ち。 */ height: clamp(660px, 46vw, 900px); min-height: 0; } /* 背景グラデ blob：紫〜青の控えめなグロー（左のテキスト側に寄せる） */ .about-hero__gradient { z-index: 0; } .about-hero__blob--blue { width: 620px; height: 520px; background: rgba(99, 60, 200, 0.28); /* 紫 */ filter: blur(140px); top: 180px; left: -160px; } .about-hero__blob--pink { width: 460px; height: 460px; background: rgba(59, 130, 246, 0.18); /* 青 */ filter: blur(130px); top: 280px; left: -40px; } .about-hero__blob--purple { width: 520px; height: 420px; background: rgba(139, 92, 246, 0.20); /* バイオレット */ filter: blur(140px); top: 120px; left: 120px; } /* 集合写真：右側に大きく配置（ヘッダー画像のように） ※ レイヤー順：blob/photo(z0) → 黒オーバーレイ(z1) → テキスト(.inner=z2) */ .about-hero__images { z-index: 0; } .about-hero__img--main { /* 横幅いっぱい：左右＆上下までブリードさせて全幅ヘッダー画像化 calc は .inner の中央寄せ余白(最大)＋左右padding(80px)を打ち消す量 */ width: auto; left: calc(-1 * (max((100vw - 1200px) / 2, 0px) + 80px)); right: calc(-1 * (max((100vw - 1200px) / 2, 0px) + 80px)); top: 0; bottom: 0; height: auto; border-radius: 0; box-shadow: none; z-index: 1; } /* 集合写真は中央フレーミング。下基点で約7%ズームして画像の上側(天井)をカット（足元は維持） */ .about-hero__img--main img { transform: scale(1.07); transform-origin: center bottom; } /* ヘッダー写真のパララックス（about-hero.js のマウス追従／スクロール移動）を無効化。 js は 🔒 触れないため、ラッパーの transform を CSS で固定して動きを止める （!important で JS が付与するインライン style に勝たせる）。 ※ scale はラッパーではなく中の img に掛けているため、右寄せフレーミングは維持される。 */ .about-hero__img { transform: none !important; transition: none !important; } .about-hero__img--main img { object-position: center 55%; /* 集合写真：上の余白を減らし、全体を上に詰める */ filter: grayscale(12%) contrast(1.02) brightness(0.92); } /* コラージュのサブ画像は新デザインでは非表示（DOM/JSは温存） */ .about-hero__img--sub1, .about-hero__img--sub2, .about-hero__img--sub3, .about-hero__img--circle { display: none; } /* 写真を黒に馴染ませる縦方向オーバーレイ ・上：OUR TEAM＋リードを読みやすく暗く ・中：顔まわりはクリアに見せる ・下：Don't think.〜の重ね＆次セクション(黒)へ自然に繋ぐ */ .about-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5, 5, 5, 0.85) 0%, rgba(5, 5, 5, 0.35) 14%, rgba(5, 5, 5, 0) 34%, rgba(5, 5, 5, 0) 50%, rgba(5, 5, 5, 0.45) 66%, rgba(5, 5, 5, 0.92) 100%); } /* 斜めの切り替わり：メッセージ側の暗い背景(#050505)を Hero 下部へ斜めに食い込ませる。 ・参考デザイン（東和電気）風に、写真の下端を斜めにカットしたように見せる。 ・色は既存の地色 #050505 のまま（新しい色は足さない）。写真・文言も変更なし。 ・z-index:2 = 写真(--main:1)/オーバーレイ(::after:1) より前、Heroテキスト(z-index:3) より後ろ。 → テキストはウェッジの上に残り隠れない。 ・height を vw 基準にして、画面幅が変わっても傾き角を約12°で一定に保つ。 ・clip-path は「左下→右上」へ上がる斜線（GROW WITH US 風）。ウェッジは右側ほど深く被さる。 */ .about-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 21vw; max-height: 360px; background: #050505; clip-path: polygon(0 100%, 100% 0, 100% 100%); z-index: 2; pointer-events: none; /* 斜辺に沿って既存パレット（紫→青）の細い光るラインを乗せる。 drop-shadow はクリップ後の形状（=斜辺）に沿って影を落とすので、斜めの境界が際立つ。 色は既存アクセント（このセクションのグロー等で使用済み）と同系。 */ filter: drop-shadow(0 -1px 0 rgba(179, 155, 255, 0.95)) drop-shadow(0 -3px 12px rgba(139, 92, 246, 0.55)) drop-shadow(0 -6px 22px rgba(59, 130, 246, 0.35)); } /* テキストブロック：左下寄せ（OUR TEAM＋リード）。リードを一行に収めるため幅を広げる */ .about-hero__text { top: auto; bottom: 48px; transform: none; left: 0; max-width: 760px; z-index: 3; } .about-hero__label { font-size: 14px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #b39bff; /* 控えめな紫 */ margin-bottom: 18px; } .about-hero__title { font-size: 76px; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; color: #fff; margin-bottom: 22px; } .about-hero__lead { font-size: 19px; line-height: 1.8; color: rgba(255, 255, 255, 0.78); font-weight: 400; } /* ========================================================================= 2. Vision Message（独立セクションをやめ、Creative Team の導入コピーとして統合） ========================================================================= */ /* 独立した帯として浮かないよう、Team セクションの一部（見出しの上の導入文）として配置。 専用の背景は持たせず、セクション全体に敷いたぼんやりした光（.about-team__blob）に馴染ませる。 */ .about-vision__block { position: relative; z-index: 1; text-align: center; margin-bottom: 72px; } /* 見出し：中央寄せ・存在感のあるサイズに戻す。 「Don't think.」は白、「Just edit.」だけ青→紫グラデーション */ .about-vision__title { font-size: 44px; font-weight: 700; letter-spacing: -0.01em; color: #fff; } .about-vision__title-accent { background: linear-gradient(100deg, #3b82f6 0%, #8b5cf6 62%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .about-vision__text { font-size: 16px; color: rgba(255, 255, 255, 0.6); margin-top: 12px; } /* ========================================================================= 3. Team Sections — 黒ベース + 控えめな紫〜青グラデ ========================================================================= */ .about-team { background: #050505; position: relative; overflow: hidden; } /* 上部の区切りライン（::before）と見出しの距離を詰める （.about-us .sec の padding-top:100px に勝つよう同等の詳細度で指定） */ .about-us .about-team { padding-top: 56px; } /* セクション区切りライン：Hero↔Team の境目にだけ残す */ .about-team::before { width: 100%; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.55), rgba(59, 130, 246, 0.45), transparent); z-index: 5; } /* CTA（Get in Touch）と同じ手法：ぼんやり滲んだ丸い光を、Creative/Development それぞれの 見出し文字の裏あたりに1つずつ置く。Creative と Development を1つの section にまとめたことで、 間に overflow:hidden の境界が生まれず、切れ目なく繋がる。 */ .about-team__gradient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .about-team__blob { position: absolute; border-radius: 50%; width: 460px; height: 380px; left: 4%; filter: blur(130px); } /* Creative Team：導入メッセージ分、見出しの位置がやや下にあるため top を深めに */ .about-team__blob--creative { top: 170px; background: rgba(139, 92, 246, 0.15); } /* Development Team：Creative の画像グリッドに掛からないよう、見出しの少し上あたりまで下げる */ .about-team__blob--development { top: 760px; background: rgba(59, 130, 246, 0.13); } .about-team .inner { position: relative; z-index: 1; } /* Development Team ブロック：Creative Team のグリッドと少し間隔を空ける */ .about-team__group { margin-top: 96px; } /* 見出し：左寄せ・main と sub を横並びにシンプル整理 */ .about-team__title { text-align: left; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 48px; } .about-team__title .main { margin-bottom: 0; font-size: 34px; letter-spacing: -0.01em; } .about-team__title .sub { font-size: 14px; color: rgba(255, 255, 255, 0.45); } /* ========================================================================= 4. Member Card — 白黒ポートレート前提・薄枠・控えめホバー ========================================================================= */ /* 5人以上に対応：横スクロール（カルーセル）。grid → flex 横並び＋スクロールスナップ。 ※ クリック式の左右ボタンは「新規JSの追加」がCLAUDE.mdで禁止のため不可。 代わりにドラッグ／スワイプ／トラックパッド／横スクロールバーで移動できる方式にしています。 ※ .about-team__grid は 🔒keep。クラス名・内部構造は変えず、CSSの表示方法だけ変更。 */ .about-team__grid { grid-template-columns: none; /* about-us.css の grid 列指定を無効化 */ display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding: 10px 0 16px; /* ホバーで浮くカードの上余白＋スクロールバー用の下余白 */ } /* PCは5枚ぴったり収まるサイズに。6枚目以降は横スクロールで表示 */ .about-team__grid > .member-card { flex: 0 0 calc((100% - 28px * 4) / 5); scroll-snap-align: start; } /* 横スクロールバーを控えめに装飾（移動できることのアフォーダンス） */ .about-team__grid::-webkit-scrollbar { height: 8px; } .about-team__grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 4px; } .about-team__grid::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 4px; } .about-team__grid::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.38); } .member-card { background: #0d0d10; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; box-shadow: none; /* 高さを揃え、SNSアイコンを常に下端へ */ display: flex; flex-direction: column; transition: transform 0.35s ease, border-color 0.35s ease, background-color 0.35s ease; } .member-card:hover { transform: translateY(-6px); background: #131318; border-color: rgba(255, 255, 255, 0.18); } /* 写真：白黒で統一。高さを抑えて画像を小さく（3/4 → 1/1 で約25%低く） */ .member-card__photo { aspect-ratio: 1 / 1; } .member-card__photo img { object-position: center top; filter: grayscale(100%) contrast(1.03) brightness(0.95); transition: filter 0.4s ease, transform 0.5s ease; } /* ホバー：少しだけ明るく（白黒は維持） */ .member-card:hover .member-card__photo img { filter: grayscale(100%) contrast(1.05) brightness(1.08); transform: scale(1.03); } .member-card__info { padding: 20px 20px 0; } .member-card__name { font-size: 17px; font-weight: 600; letter-spacing: 0.01em; } .member-card__role { font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.45); } .member-card__description p { color: rgba(255, 255, 255, 0.6); } /* カードは写真・名前・役職のみ表示。説明文は非表示にして小型化 （HTML構造は残したまま custom.css で非表示＝戻し込み時に復元しやすい） */ .member-card__description { display: none; } /* 説明・SNSを消したぶん、役職の下に余白（16px）を確保する */ .member-card__info { padding: 18px 18px 24px; } /* SNS：白〜グレーで主張させない（常にカード下端へ）。役職との隙間を詰めるため上paddingを縮小 */ .member-card__sns { padding: 6px 20px 18px; margin-top: auto; } .member-card__sns a { opacity: 0.5; } .member-card__sns a:hover { opacity: 1; } /* ========================================================================= 5. Get in Touch（CTA）— 上品なグラデパネル + 白ボタン ========================================================================= */ /* 前後のセクションと地続きにする：箱（パネル）をやめ、暗背景＋ごく控えめな紫〜青の環境光だけ残す */ .about-cta { background: #050505; padding: 100px 0; } /* 他セクション（.about-team）と同じ、上端のグラデーション仕切り線 （.about-cta__gradient が z-index:1 のため、線は z-index:3 で前面に） */ .about-cta::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.45), rgba(59, 130, 246, 0.35), transparent); z-index: 3; } /* blob：パネルを外したので、セクション全体に薄く広がる"環境光"として弱める （チームセクションのグローと同程度の控えめさにして、CTAだけ浮かないようにする） */ .about-cta__blob--blue { background: rgba(99, 60, 200, 0.14); /* 紫 */ filter: blur(150px); } .about-cta__blob--orange { background: rgba(59, 130, 246, 0.09); /* 青 */ filter: blur(150px); } .about-cta__blob--purple { background: rgba(139, 92, 246, 0.10); /* バイオレット */ filter: blur(150px); } /* パネル廃止：枠線・角丸・箱背景・内側パディングをなくし、文字とボタンを地の上に直接置く＝前後と一体化。 横余白は通常の .inner（レスポンシブ）に委ねる。 */ .about-cta .inner { background: none; border: none; border-radius: 0; overflow: visible; } .about-cta__title { font-size: 44px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 18px; } .about-cta__text { color: rgba(255, 255, 255, 0.72); margin-bottom: 36px; } /* ボタン：白ベースで視認性高く。ホバーで紫→青 */ .about-cta__btn { border-radius: 10px; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); } .about-cta__btn:hover { background: linear-gradient(90deg, #8b5cf6, #3b82f6); color: #fff; box-shadow: 0 8px 30px rgba(139, 92, 246, 0.35); } /* ========================================================================= レスポンシブ調整（PC=4 / タブレット=2 / スマホ=1 カラム） ========================================================================= */ /* --- タブレット（横並びだと写真とテキストが重なるため、写真は全面背景＋テキスト重ね） --- */ @media screen and (max-width: 1024px) { .about-hero { height: 720px; /* 縦長Hero（写真主役・下にVisionを重ねる） */ min-height: 0; } /* 写真を全面に敷く（.inner の左右padding 60px を打ち消して画面端までブリード） タブレット/スマホは全幅なので、PC用の左端フェードは解除 */ .about-hero__img--main { width: auto; left: -60px; right: -60px; top: 0; bottom: 0; height: auto; -webkit-mask-image: none; mask-image: none; } .about-hero__img--main img { object-position: center 55%; transform: scale(1.07); /* 上側を約7%カット（下基点ズーム） */ transform-origin: center bottom; } /* オーバーレイは base の縦方向グラデ（上下を暗く）をそのまま使用 */ .about-hero__text { top: auto; bottom: 40px; transform: none; max-width: 100%; } .about-hero__title { font-size: 56px; } .about-hero__lead { font-size: 17px; } /* タブレット以下：横スクロール(カルーセル)をやめ、2カラムで折り返す */ .about-team__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; overflow: visible; scroll-snap-type: none; } .about-cta__title { font-size: 34px; } } /* --- スマホ：1カラム / 集合写真は上部フルワイドのヘッダーに --- */ @media screen and (max-width: 767px) { .about-hero { /* 集合写真の縦横比(≒3:2)に高さを合わせ、cover でも左右が切れないようにする */ height: 66vw; min-height: 0; } /* 写真を全面に敷き、テキストは従来どおり上に重ねる（padding 24px を打ち消して画面端まで） */ .about-hero__img--main { width: auto; height: auto; top: 0; bottom: 0; left: -24px; right: -24px; border-radius: 0; } .about-hero__img--main img { object-position: center; /* 中央基準（高さを比率に合わせたので左右は切れない） */ transform: none; /* PC用の上7%カットズームを解除して全体表示 */ } /* オーバーレイは base の縦方向グラデ（上下を暗く）をそのまま使用 */ .about-hero__text { top: auto; bottom: 28px; transform: none; max-width: 100%; } .about-hero__label { font-size: 12px; margin-bottom: 12px; } .about-hero__title { font-size: 40px; margin-bottom: 14px; } .about-hero__lead { font-size: 14px; line-height: 1.7; } /* Vision：スマホは左寄せ。見出しは「Don't think.」/「Just edit.」の2行に */ .about-vision__block { text-align: left; } .about-vision__title-accent { display: block; } /* Team：スマホも2カラム（列数は ≤1024 の grid 指定を継承し、gap だけ詰める） */ .about-team__grid { gap: 16px; } .about-team__title { margin-bottom: 28px; gap: 6px 14px; } .about-team__title .main { font-size: 26px; } /* 1カラムでは写真が縦に伸びすぎないよう調整 */ .member-card__photo { aspect-ratio: 16 / 11; } .member-card__photo img { object-position: center 25%; } .member-card__info { padding: 18px 18px 24px; } .member-card__name { font-size: 17px; } .member-card__role { font-size: 12px; } .member-card__description p { font-size: 13px; line-height: 1.8; } .member-card__sns { padding: 16px 18px 18px; } .member-card__sns img { width: 18px; height: 18px; } /* CTA：ボタンは押しやすい全幅（パネル廃止のため余白は通常の .inner に委ねる） */ .about-cta__title { font-size: 28px; } .about-cta__btn { width: 100%; height: 54px; } } /* --- 450px 未満：Hero テキストを写真に被せず、写真の下の帯に置く --- */ @media screen and (max-width: 450px) { .about-hero { /* 写真帯(比率どおり) ＋ 下のテキスト帯 160px */ height: calc(66.67vw + 160px); } /* 写真は上帯のみ（下いっぱいまで伸ばさず、集合写真を比率どおり全体表示） */ .about-hero__img--main { bottom: auto; height: 66.67vw; } /* テキストは写真の下の帯へ（写真に被せない） */ .about-hero__text { top: calc(66.67vw + 24px); bottom: auto; } }