テキスト
※::afterで複製を生成 (B) wrap/track構造: .n26_en_02_wrap > .n26_en_02_track > ×2 **/ /* --- (A) 単体構造 --- */ .col-lg-12:has(> .n26_en_02) { overflow: hidden; width: 100%; } .n26_en_02 { display: inline-block; white-space: nowrap; padding-right: 100px; animation: n26_marquee_scroll 22s linear infinite !important; will-change: transform; } .n26_en_02::after { content: attr(data-text); display: inline-block; padding-left: 100px; } @media (max-width: 767px) { .n26_en_02 { animation-duration: 14s !important; padding-right: 60px; } .n26_en_02::after { padding-left: 60px; } } /* --- (B) wrap/track構造（単体構造のルールを上書き） --- */ .n26_en_02_wrap { overflow: hidden; width: 100%; } .n26_en_02_track { display: flex; white-space: nowrap; animation: n26_marquee_scroll 22s linear infinite !important; will-change: transform; } .n26_en_02_track .n26_en_02 { animation: none !important; display: inline-block; flex: 0 0 auto; padding-right: 100px; } .n26_en_02_track .n26_en_02::after { content: none; } @keyframes n26_marquee_scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 767px) { .n26_en_02_track { animation-duration: 14s !important; } .n26_en_02_track .n26_en_02 { padding-right: 60px; } } /** Discussion.02 写真グリッド（大きい写真＋下段2枚の千鳥配置） **/ .n26_disc2_photos { flex: 0 0 48%; max-width: 48%; display: flex; flex-direction: column; gap: 20px; } .n26_disc2_photo_top { width: 100%; height: auto; display: block; } .n26_disc2_photo_row { display: flex; gap: 2px; align-items: flex-start; } .n26_disc2_photo_bl, .n26_disc2_photo_br { flex: 1 1 0; min-width: 0; width: 100%; height: auto; display: block; } @media (min-width: 992px) { .n26_disc_row_rev .n26_disc2_photos { order: 2; } .n26_disc_row_rev .n26_disc_content { order: 1; } } @media (max-width: 991px) { .n26_disc2_photos { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } } /** Discussion.03 写真2枚並び＋プロフィール2カラムグリッド **/ .n26_disc3_photos { display: flex; flex-direction: row; gap: 4px; } .n26_disc3_photos img { flex: 1 1 0; min-width: 0; width: 100%; height: auto; display: block; } .n26_disc3_profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 60px; } .n26_disc3_profiles .n26_disc_profile { margin-top: 0; } @media (min-width: 992px) { .n26_disc3_profiles { grid-template-columns: 1fr; } } @media (max-width: 991px) { .n26_disc3_photos { flex-direction: column; } .n26_disc3_profiles { grid-template-columns: 1fr; gap: 30px; } } /** 参加者紹介（画像＋部署・氏名テキスト） **/ .n26_participants2 { display: flex; gap: 40px; } .n26_participants2_item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .n26_participants2_avatar { width: 100%; max-width: 220px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; } .n26_participants2_avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .n26_participants2_item:nth-child(1) .n26_participants2_avatar { background: #8DC79B; } .n26_participants2_item:nth-child(2) .n26_participants2_avatar { background: #F2C185; } .n26_participants2_item:nth-child(3) .n26_participants2_avatar { background: #A9D6EA; } .n26_participants2_item:nth-child(4) .n26_participants2_avatar { background: #F3B8C8; } .n26_participants2_dept { margin-top: 20px; } .n26_participants2_name { margin-top: 4px; font-size: 20px; font-weight: 700; letter-spacing: 0.05em; font-family: "Noto Sans JP", sans-serif; } @media (max-width: 991px) { .n26_participants2 { flex-wrap: wrap; row-gap: 40px; column-gap: 20px; } .n26_participants2_item { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); } } @media (max-width: 575px) { .n26_participants2_avatar { max-width: 160px; } .n26_participants2_dept { font-size: 13px; } .n26_participants2_name { font-size: 17px; } } /** ヒーロー画像（グローバルナビ分の余白を確保） **/ .n26_hero2 { position: relative; overflow: hidden; margin-top: 100px; } .n26_hero2_media img { width: 100%; height: auto; vertical-align: top; } @media (max-width: 991px) { .n26_hero2 { margin-top: 0; } } /** 「たちの仕事」ボックスと本文の横幅を常に一致させる **/ .n26_hi_matchwidth { display: grid; grid-template-columns: max-content; } .n26_hi_matchwidth > p { width: 100%; box-sizing: border-box; } .n26_hi_matchwidth .n26_hi_03 span { display: block; width: 100%; box-sizing: border-box; } /** .n26_hi_04 の width をブレークポイント間で滑らかに可変させる **/ @media (min-width: 2560.02px) { .n26_hi_04 { width: 18%; } } @media (max-width: 2560px) and (min-width: 1920.02px) { .n26_hi_04 { width: calc(24% + (-6) * (100vw - 1920px) / (640px) * 1%); } } @media (max-width: 1920px) and (min-width: 1799.02px) { .n26_hi_04 { width: calc(26% + (-2) * (100vw - 1799px) / (121px) * 1%); } } @media (max-width: 1799px) and (min-width: 1600.02px) { .n26_hi_04 { width: calc(29% + (-3) * (100vw - 1600px) / (199px) * 1%); } } @media (max-width: 1599.98px) and (min-width: 1400.0px) { .n26_hi_04 { width: calc(28% + (-4) * (100vw - 1399.98px) / (200px) * 1%); } } @media (max-width: 1399.98px) and (min-width: 1200.02px) { .n26_hi_04 { width: calc(32% + (-4) * (100vw - 1200px) / (199.98px) * 1%); } } @media (max-width: 1200px) and (min-width: 1199.02px) { .n26_hi_04 { width: calc(42% + (-10) * (100vw - 1199px) / (1px) * 1%); } } @media (max-width: 1199px) and (min-width: 992.02px) { .n26_hi_04 { width: calc(52% + (-10) * (100vw - 992px) / (207px) * 1%); } } @media (max-width: 992px) and (min-width: 991.02px) { .n26_hi_04 { width: calc(41% + (11) * (100vw - 991px) / (1px) * 1%); } } @media (max-width: 991px) and (min-width: 820.02px) { .n26_hi_04 { width: calc(47% + (-6) * (100vw - 820px) / (171px) * 1%); } } @media (max-width: 820px) { .n26_hi_04 { width: 47%; } } @media (max-width: 767px) { .n26_hi_04 { width: 110%; } } @media (max-width: 390px) { .n26_hi_04 { width: 110%; } } /** ヒーロー画像下部の流れるアウトラインテキスト（The Work of Professionals） **/ .n26_hero2_marquee { position: absolute; left: 0; width: 100%; overflow: hidden; pointer-events: none; /* PC: フォントの行送り（グリフ下の余白）分を打ち消して、画像最下部にピッタリ合わせる */ bottom: calc(var(--n26-marquee-fs, 260px) * -0.15); } .n26_hero2_marquee_text { display: inline-block; white-space: nowrap; margin: 0; padding-right: clamp(30px, 6vw, 120px); font-family: "Poppins", sans-serif; font-weight: 500; line-height: 1; letter-spacing: 0.00em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55); text-stroke: 1.5px rgba(255, 255, 255, 0.55); animation: n26_hero2_marquee_scroll 26s linear infinite !important; will-change: transform; font-size: var(--n26-marquee-fs, 260px); } .n26_hero2_marquee_text::after { content: attr(data-text); display: inline-block; padding-left: clamp(30px, 6vw, 120px); } @keyframes n26_hero2_marquee_scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 767px) and (min-width: 575.02px) { .n26_hero2_marquee_text { animation-duration: 18s; } .n26_hero2_marquee { bottom: auto; top: calc(51.5% + (1.1) * (100vw - 575px) / (192px) * 1%); } } @media (max-width: 575px) and (min-width: 390.02px) { .n26_hero2_marquee_text { animation-duration: 18s; } .n26_hero2_marquee { bottom: auto; top: calc(51.5% + (2.0) * (100vw - 390px) / (185px) * 1%); } } @media (max-width: 390px) { .n26_hero2_marquee_text { animation-duration: 18s; } .n26_hero2_marquee { bottom: auto; top: 52.5%; } } /** font-size をブレークポイント間で滑らかに可変させる（--n26-marquee-fs に統一） **/ @media (min-width: 2560.02px) { .n26_hero2_marquee { --n26-marquee-fs: 340px; } } @media (max-width: 2560px) and (min-width: 1920.02px) { .n26_hero2_marquee { --n26-marquee-fs: calc(12.5vw + 20px); } } @media (max-width: 1920px) and (min-width: 1600.0px) { .n26_hero2_marquee { --n26-marquee-fs: calc(14.583464vw + -20.0025px); } } @media (max-width: 1599.98px) and (min-width: 1199.02px) { .n26_hero2_marquee { --n26-marquee-fs: calc(11.638984vw + 27.1086px); } } @media (max-width: 1199px) and (min-width: 991.02px) { .n26_hero2_marquee { --n26-marquee-fs: calc(22.432692vw + -102.308px); } } @media (max-width: 991px) and (min-width: 767.02px) { .n26_hero2_marquee { --n26-marquee-fs: calc(7.142857vw + 49.2143px); } } @media (max-width: 767px) and (min-width: 575.02px) { .n26_hero2_marquee { --n26-marquee-fs: calc(8.333333vw + 40.0833px); } } @media (max-width: 575px) and (min-width: 390.02px) { .n26_hero2_marquee { --n26-marquee-fs: calc(8.648649vw + 38.2703px); } } @media (max-width: 390px) { .n26_hero2_marquee { --n26-marquee-fs: 72px; } } /** ========================================================= * CrossTalk後編（/recruit/symposium/part-2/）専用 * ヒーローのコピー位置を右揃えに変更 * ※ .n26_hero2_r を付与したページのみに適用され、 * 前編（/recruit/symposium/part-1/）の n26_hi_00 等の * 既存スタイルには影響しません。 * ========================================================= **/ .n26_hero2_r .n26_hi_00 { padding: 0 12.5% 0 0; text-align: right; } .n26_hero2_r .n26_hi_04 { margin-left: auto; margin-right: 0; } /** n26_hi_02（後編バッジ）は left:15px の相対オフセットで右へ15pxはみ出す仕様のため、 * タイトル（n26_hi_03）と本文（n26_hi_04）の右端もそれに合わせて15px右へずらす **/ .n26_hero2_r .n26_hi_03 { margin-right: -15px; } .n26_hero2_r .n26_hi_04 { margin-right: -15px; } @media (max-width: 991px) { .n26_hero2_r .n26_hi_00 { padding: 0 0% 0 0; text-align: right; } } /** 767px以下（スマートフォン表示）のみ前編と同じ左揃えレイアウトに戻す * （768px〜991pxのタブレット幅は右揃えを維持） **/ @media (max-width: 767px) { .n26_hero2_r .n26_hi_00 { padding: 0 4%; text-align: left; } .n26_hero2_r .n26_hi_04 { margin-left: 0; margin-right: 0; } .n26_hero2_r .n26_hi_03 { margin-right: 0; } } /** ========================================================= * Discussion.05（CrossTalk後編 /recruit/symposium/part-2/ 専用） * min-width:992px のとき、右カラムの画像の右端を常にブラウザ右端に接するようにする * ※ .n26_disc2_photos_b / .n26_pl_215b という専用クラスにのみ適用され、 * 前編（/recruit/symposium/part-1/）の Discussion.02・04 等が使う * .n26_disc2_photos / .n26_pl_215 には一切影響しません。 * * 【重要】このCSSだけでは効きません。HTML側の画像ラッパーdivに * クラス "n26_disc2_photos_b" を追加する必要があります（下記参照）。 *