/* リーガルリクルート v2 — エディトリアル高級系 */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Noto+Sans+JP:wght@400;500;700&family=Zen+Old+Mincho:wght@400;500;700;900&display=swap'); :root { --ink: #0B1B2B; --ink-soft: #14273B; --paper: #F6F4EF; --white: #FFFFFF; --gold: #A8863C; --brass: #C2A45D; --line: #E2DCCE; --line-dark: rgba(255,255,255,0.18); --text: #22303D; --muted: #6E7468; --serif: 'Zen Old Mincho', 'Shippori Mincho B1', serif; --en: 'Cormorant Garamond', 'EB Garamond', serif; --sans: 'Noto Sans JP', sans-serif; /* 数値表示用: 判読性を優先し装飾セリフ(--en)は使わない */ --num: 'Noto Sans JP', sans-serif; /* ボタン内の矢印 (細線 / currentColor で着色) */ --arw: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 7'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='square'%3E%3Cpath d='M0 3.5h20'/%3E%3Cpath d='M16.6 0.7L19.7 3.5 16.6 6.3'/%3E%3C/g%3E%3C/svg%3E"); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--serif); color: var(--text); background: var(--white); line-height: 2; font-size: 15px; letter-spacing: 0.03em; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } ::selection { background: var(--brass); color: var(--ink); } .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; } /* Reveal on scroll */ .rv { opacity: 0; transform: translateY(26px); transition: opacity 0.9s cubic-bezier(.2,.6,.2,1), transform 0.9s cubic-bezier(.2,.6,.2,1); } .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rv { opacity: 1; transform: none; transition: none; } *, *::before, *::after { transition: none !important; animation: none !important; } } /* ===== Buttons ===== */ /* 面としてのボタン: 立体感 (影) + 矢印アフォーダンス + 押下感 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 16px; position: relative; isolation: isolate; font-family: var(--sans); font-weight: 700; letter-spacing: 0.1em; line-height: 1.4; text-align: center; cursor: pointer; border: 1px solid transparent; border-radius: 3px; transition: transform 0.28s cubic-bezier(.2,.6,.2,1), box-shadow 0.28s cubic-bezier(.2,.6,.2,1), background-color 0.28s, background-image 0.28s, color 0.28s, border-color 0.28s; } /* 矢印はCSSマスクで描画 (currentColor 追従 / 画像素材なし) */ .btn::after { content: ''; flex: none; width: 22px; height: 7px; background-color: currentColor; -webkit-mask: var(--arw) no-repeat center / contain; mask: var(--arw) no-repeat center / contain; transition: transform 0.32s cubic-bezier(.2,.6,.2,1); } .btn:hover::after { transform: translateX(5px); } .btn.no-arrow::after { display: none; } .btn.no-arrow { gap: 0; } .btn:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); transition-duration: 0.08s; } .btn-sm { font-size: 13px; padding: 13px 26px; min-height: 46px; } .btn-lg { font-size: 15px; padding: 20px 44px; min-height: 60px; } .btn-sm::after { width: 18px; } /* 主CTA: 真鍮のプレート */ .btn-gold { background-image: linear-gradient(180deg, #D2B675 0%, #C2A45D 52%, #AD8C41 100%); color: #14100A; border-color: rgba(96,73,22,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(88,66,18,0.35), 0 10px 26px -12px rgba(11,27,43,0.75), 0 2px 5px rgba(11,27,43,0.16); } .btn-gold:hover { background-image: linear-gradient(180deg, #DEC488 0%, #CDB067 52%, #B8974B 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(88,66,18,0.3), 0 18px 34px -14px rgba(11,27,43,0.8), 0 3px 8px rgba(11,27,43,0.18); } .btn-gold:active { background-image: linear-gradient(180deg, #B8974B 0%, #C2A45D 100%); box-shadow: inset 0 2px 5px rgba(84,62,16,0.45), 0 2px 6px -2px rgba(11,27,43,0.4); } /* 副CTA (白地): 濃紺のプレート */ .btn-ink { background-image: linear-gradient(180deg, #17324C 0%, #0B1B2B 100%); color: #fff; border-color: rgba(4,12,20,0.9); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 24px -12px rgba(11,27,43,0.85), 0 2px 5px rgba(11,27,43,0.18); } .btn-ink:hover { background-image: linear-gradient(180deg, #21456A 0%, #12293F 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 18px 32px -14px rgba(11,27,43,0.85), 0 3px 8px rgba(11,27,43,0.2); } .btn-ink:active { background-image: linear-gradient(180deg, #0B1B2B 0%, #14304E 100%); box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); } /* 副CTA (写真・濃紺地): 面を持たせて文字リンクに見せない */ .btn-ghost-light { background-color: rgba(11,27,43,0.42); color: #fff; border-color: rgba(255,255,255,0.75); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 24px -14px rgba(0,0,0,0.9); } .btn-ghost-light:hover { background-color: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 18px 32px -16px rgba(0,0,0,0.9); } .btn-ghost-light:active { background-color: #EDE9E0; box-shadow: inset 0 2px 6px rgba(11,27,43,0.25); } /* 副CTA (淡色地): 白いプレート */ .btn-ghost-dark { background-color: #fff; color: var(--ink); border-color: rgba(11,27,43,0.3); box-shadow: 0 6px 16px -10px rgba(11,27,43,0.55), 0 1px 2px rgba(11,27,43,0.06); } .btn-ghost-dark:hover { background-color: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 16px 28px -14px rgba(11,27,43,0.7); } .btn-ghost-dark:active { background-color: #12293F; box-shadow: inset 0 2px 6px rgba(0,0,0,0.4); } /* ヘッダー内CTAは幅を詰めるため矢印なし */ .header-cta .btn { gap: 0; } .header-cta .btn::after { display: none; } /* 全幅ボタンは文字と矢印を中央に寄せる */ .apply-card .btn, .drawer-cta .btn { justify-content: center; } /* 幅の狭いサイドバーでは折り返さないよう詰める */ .apply-card .btn-lg { font-size: 14px; padding-left: 18px; padding-right: 18px; gap: 12px; letter-spacing: 0.06em; white-space: nowrap; } .apply-card .btn-sm { letter-spacing: 0.06em; white-space: nowrap; } /* ===== Header (over hero) ===== */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 1px solid var(--line-dark); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 88px; gap: 24px; } .brand { display: flex; flex-direction: column; line-height: 1.25; } /* ロゴ (2026-09-18 CEO決定: r-agent型の単色ワードマークは維持しつつ、 書体を本文と同じ明朝系へ変更。角ゴシック(M PLUS 1 Black)は本文の Zen Old Mincho と世界観が合わないとの指摘で差し替えた。 字形は Shippori Mincho B1 ExtraBold (SIL OFL) をアウトライン化したもの (原本 assets/logo/wordmark.svg)。B1 は横画を太らせた設計のため、 16px 表示でも明朝特有の細い横画が潰れずに残る (Zen Old Mincho Black は 16px だと横画が消えたため不採用)。webフォントの読み込みには依存しない。 字面の縦横比は 9.47 : 1。 マスクは外部ファイル参照ではなく data URI で埋め込んである。file:// で開いたときに 別ファイルのマスクがブラウザに遮断され、ロゴが消えてしまうため。 span の中のテキストは読み上げと検索のために残し、表示だけマスクに差し替える。 マスク非対応のブラウザではこの素のテキストがそのまま出る。 */ .brand-logo { font-family: var(--serif); font-size: 24px; font-weight: 600; color: #fff; letter-spacing: 0.08em; } @supports ((-webkit-mask-image: url(#m)) or (mask-image: url(#m))) { .brand-logo { display: block; width: 152px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='227.0%20-839.0%208533.0%20901.0'%3E%3Cpath%20d='M228.0%2058.0Q228.0%2055.0%20232.5%2052.0Q237.0%2049.0%20244.0%2045.0Q387.0%20-25.0%20462.0%20-115.0Q537.0%20-205.0%20564.0%20-318.5Q591.0%20-432.0%20591.0%20-599.0Q591.0%20-619.0%20589.0%20-655.0Q588.0%20-675.0%20578.0%20-697.5Q568.0%20-720.0%20549.0%20-732.0Q541.0%20-737.0%20533.5%20-740.0Q526.0%20-743.0%20518.0%20-744.5Q510.0%20-746.0%20510.0%20-751.0Q510.0%20-759.0%20542.0%20-769.5Q574.0%20-780.0%20602.0%20-780.0Q617.0%20-780.0%20623.0%20-778.0Q665.0%20-766.0%20698.5%20-739.5Q732.0%20-713.0%20732.0%20-695.0Q732.0%20-686.0%20723.0%20-666.0Q713.0%20-644.0%20713.0%20-630.0Q713.0%20-614.0%20711.0%20-582.0Q709.0%20-554.0%20709.0%20-539.0Q709.0%20-407.0%20680.0%20-297.5Q651.0%20-188.0%20549.5%20-90.0Q448.0%208.0%20248.0%2059.0Q236.0%2062.0%20233.0%2062.0Q228.0%2062.0%20228.0%2058.0ZM295.0%20-347.0%20298.0%20-373.0Q299.0%20-380.0%20303.0%20-419.5Q307.0%20-459.0%20307.0%20-499.0Q307.0%20-537.0%20304.0%20-568.5Q301.0%20-600.0%20296.0%20-613.0Q288.0%20-634.0%20271.5%20-645.0Q255.0%20-656.0%20236.0%20-656.0Q232.0%20-656.0%20229.5%20-656.5Q227.0%20-657.0%20227.0%20-660.0Q227.0%20-665.0%20242.0%20-677.5Q257.0%20-690.0%20279.0%20-699.5Q301.0%20-709.0%20322.0%20-709.0Q332.0%20-709.0%20341.0%20-706.0Q389.0%20-692.0%20407.0%20-676.0Q425.0%20-660.0%20425.0%20-641.0Q425.0%20-632.0%20421.5%20-619.5Q418.0%20-607.0%20417.0%20-599.0Q414.0%20-580.0%20414.0%20-532.0Q414.0%20-479.0%20416.0%20-447.0L420.0%20-404.0Q425.0%20-366.0%20425.0%20-336.0Q425.0%20-308.0%20408.0%20-284.5Q391.0%20-261.0%20367.0%20-261.0Q353.0%20-261.0%20336.0%20-272.5Q319.0%20-284.0%20307.0%20-304.0Q295.0%20-324.0%20295.0%20-347.0Z%20M1138.0%20-291.0Q1116.0%20-308.0%201098.5%20-338.5Q1081.0%20-369.0%201081.0%20-393.0Q1081.0%20-408.0%201090.0%20-434.0Q1099.0%20-460.0%201111.0%20-460.0Q1116.0%20-460.0%201119.5%20-456.5Q1123.0%20-453.0%201127.0%20-445.0Q1142.0%20-410.0%201180.0%20-403.0Q1201.0%20-399.0%201255.0%20-399.0Q1298.0%20-399.0%201503.0%20-413.0Q1531.0%20-415.0%201543.0%20-415.0Q1729.0%20-427.0%201788.0%20-427.0Q1840.0%20-427.0%201878.0%20-414.5Q1916.0%20-402.0%201916.0%20-372.0Q1916.0%20-347.0%201888.0%20-330.5Q1860.0%20-314.0%201814.0%20-313.0Q1812.0%20-313.0%201796.5%20-313.5Q1781.0%20-314.0%201736.0%20-314.0Q1627.0%20-314.0%201488.0%20-310.0Q1431.0%20-308.0%201359.5%20-301.0Q1288.0%20-294.0%201242.0%20-283.0L1213.0%20-275.0Q1208.0%20-274.0%201199.5%20-271.5Q1191.0%20-269.0%201185.0%20-269.0Q1175.0%20-269.0%201164.5%20-274.0Q1154.0%20-279.0%201138.0%20-291.0Z%20M2985.0%20-747.0Q2985.0%20-723.0%202971.0%20-709.5Q2957.0%20-696.0%202937.0%20-696.0Q2923.0%20-696.0%202910.5%20-703.5Q2898.0%20-711.0%202890.0%20-724.0Q2868.0%20-760.0%202849.0%20-779.0Q2830.0%20-798.0%202804.0%20-813.0Q2795.0%20-817.0%202788.0%20-820.5Q2781.0%20-824.0%202776.5%20-826.5Q2772.0%20-829.0%202772.0%20-832.0Q2772.0%20-839.0%202823.0%20-839.0Q2888.0%20-839.0%202936.5%20-816.0Q2985.0%20-793.0%202985.0%20-747.0ZM2857.0%20-519.0Q2857.0%20-513.0%202852.5%20-506.0Q2848.0%20-499.0%202843.0%20-493.5Q2838.0%20-488.0%202834.0%20-483.0Q2820.0%20-464.0%202817.0%20-446.0Q2797.0%20-336.0%202780.0%20-276.0Q2763.0%20-216.0%202732.0%20-144.0Q2700.0%20-70.0%202660.5%20-35.5Q2621.0%20-1.0%202582.0%20-1.0Q2562.0%20-1.0%202544.5%20-11.5Q2527.0%20-22.0%202527.0%20-40.0Q2527.0%20-73.0%202525.5%20-83.5Q2524.0%20-94.0%202517.0%20-104.0Q2499.0%20-127.0%202473.0%20-150.5Q2447.0%20-174.0%202442.0%20-180.0Q2433.0%20-189.0%202433.0%20-193.0Q2433.0%20-197.0%202437.0%20-197.0Q2440.0%20-197.0%202450.0%20-192.0L2469.0%20-180.0Q2502.0%20-160.0%202526.5%20-148.5Q2551.0%20-137.0%202574.0%20-137.0Q2588.0%20-137.0%202602.0%20-147.5Q2616.0%20-158.0%202626.0%20-177.0Q2661.0%20-244.0%202680.5%20-310.5Q2700.0%20-377.0%202706.5%20-423.0Q2713.0%20-469.0%202713.0%20-484.0Q2713.0%20-497.0%202699.0%20-497.0Q2686.0%20-497.0%202558.0%20-483.0Q2541.0%20-482.0%202536.0%20-465.0Q2501.0%20-360.0%202445.0%20-264.0Q2411.0%20-205.0%202347.5%20-148.5Q2284.0%20-92.0%202214.0%20-49.0Q2144.0%20-6.0%202089.0%2016.0Q2080.0%2019.0%202076.0%2019.0Q2071.0%2019.0%202071.0%2016.0Q2071.0%2013.0%202083.0%204.0Q2187.0%20-74.0%202260.0%20-153.0Q2333.0%20-232.0%202378.0%20-331.0Q2403.0%20-388.0%202419.0%20-435.0Q2421.0%20-441.0%202421.0%20-444.0Q2421.0%20-452.0%202415.0%20-455.0Q2409.0%20-458.0%202399.0%20-456.0Q2362.0%20-447.0%202338.0%20-440.0Q2323.0%20-435.0%202297.0%20-424.0Q2285.0%20-418.0%202277.0%20-418.0Q2245.0%20-418.0%202216.5%20-444.5Q2188.0%20-471.0%202170.0%20-503.0Q2152.0%20-535.0%202152.0%20-544.0Q2152.0%20-550.0%202157.0%20-550.0Q2160.0%20-550.0%202181.0%20-542.0Q2211.0%20-530.0%202236.5%20-525.0Q2262.0%20-520.0%202297.0%20-520.0Q2357.0%20-520.0%202427.0%20-525.0Q2444.0%20-526.0%202449.0%20-545.0Q2461.0%20-605.0%202461.0%20-647.0Q2461.0%20-678.0%202450.0%20-696.5Q2439.0%20-715.0%202407.0%20-729.0Q2402.0%20-731.0%202395.5%20-734.0Q2389.0%20-737.0%202387.0%20-739.0Q2385.0%20-741.0%202385.0%20-744.0Q2385.0%20-753.0%202410.0%20-759.5Q2435.0%20-766.0%202458.0%20-766.0Q2492.0%20-766.0%202529.0%20-755.0Q2566.0%20-744.0%202591.0%20-726.5Q2616.0%20-709.0%202616.0%20-691.0Q2616.0%20-679.0%202604.0%20-661.0Q2595.0%20-647.0%202589.0%20-635.0Q2583.0%20-623.0%202576.0%20-598.0L2567.0%20-567.0Q2566.0%20-564.0%202566.0%20-559.0Q2566.0%20-551.0%202571.0%20-547.5Q2576.0%20-544.0%202586.0%20-545.0Q2613.0%20-549.0%202664.0%20-560.0Q2696.0%20-566.0%202723.0%20-589.0Q2736.0%20-602.0%202746.0%20-602.0Q2756.0%20-602.0%202783.5%20-585.0Q2811.0%20-568.0%202834.0%20-548.0Q2857.0%20-528.0%202857.0%20-519.0ZM2888.0%20-652.0Q2888.0%20-626.0%202873.0%20-613.0Q2858.0%20-600.0%202838.0%20-600.0Q2801.0%20-600.0%202785.0%20-634.0Q2769.0%20-667.0%202750.0%20-690.0Q2731.0%20-713.0%202702.0%20-738.0Q2694.0%20-744.0%202687.5%20-748.5Q2681.0%20-753.0%202681.0%20-755.0Q2681.0%20-760.0%202697.0%20-760.0Q2727.0%20-760.0%202772.5%20-749.0Q2818.0%20-738.0%202853.0%20-713.5Q2888.0%20-689.0%202888.0%20-652.0Z%20M3486.0%20-161.0Q3459.0%20-198.0%203459.0%20-223.0Q3459.0%20-229.0%203461.0%20-237.0Q3473.0%20-270.0%203476.0%20-299.0Q3477.0%20-309.0%203477.0%20-331.0V-363.0Q3477.0%20-381.0%203480.0%20-462.0Q3482.0%20-502.0%203482.0%20-513.0Q3482.0%20-552.0%203471.0%20-572.0Q3457.0%20-598.0%203440.5%20-605.5Q3424.0%20-613.0%203424.0%20-615.0Q3424.0%20-622.0%203441.0%20-628.0Q3458.0%20-634.0%203480.0%20-634.0Q3501.0%20-634.0%203533.0%20-624.0Q3565.0%20-614.0%203588.5%20-595.5Q3612.0%20-577.0%203612.0%20-553.0Q3612.0%20-544.0%203608.0%20-533.0Q3604.0%20-522.0%203598.0%20-510.0Q3576.0%20-464.0%203570.0%20-423.0Q3562.0%20-370.0%203559.5%20-344.0Q3557.0%20-318.0%203557.0%20-284.0Q3557.0%20-278.0%203557.5%20-273.5Q3558.0%20-269.0%203561.0%20-269.0Q3575.0%20-269.0%203631.0%20-295.5Q3687.0%20-322.0%203769.5%20-377.0Q3852.0%20-432.0%203943.0%20-515.0Q3958.0%20-529.0%203964.0%20-529.0Q3966.0%20-529.0%203966.0%20-526.0Q3966.0%20-519.0%203954.0%20-501.0Q3884.0%20-393.0%203822.0%20-332.5Q3760.0%20-272.0%203681.0%20-214.0Q3622.0%20-169.0%203600.0%20-149.0Q3574.0%20-124.0%203547.0%20-124.0Q3514.0%20-124.0%203486.0%20-161.0ZM3028.0%20-20.0Q3028.0%20-26.0%203037.0%20-33.0Q3134.0%20-116.0%203200.5%20-229.0Q3267.0%20-342.0%203286.0%20-465.0Q3290.0%20-485.0%203290.0%20-500.0Q3290.0%20-545.0%203253.0%20-570.0Q3249.0%20-573.0%203242.0%20-576.5Q3235.0%20-580.0%203235.0%20-582.0Q3235.0%20-586.0%203245.5%20-589.5Q3256.0%20-593.0%203275.0%20-593.0Q3298.0%20-593.0%203318.0%20-586.0Q3373.0%20-568.0%203399.5%20-545.5Q3426.0%20-523.0%203426.0%20-505.0Q3426.0%20-496.0%203421.0%20-488.0Q3416.0%20-480.0%203415.0%20-478.0Q3398.0%20-455.0%203389.0%20-422.0Q3357.0%20-308.0%203301.5%20-229.0Q3246.0%20-150.0%203183.0%20-103.0Q3120.0%20-56.0%203045.0%20-19.0Q3037.0%20-15.0%203034.0%20-15.0Q3028.0%20-15.0%203028.0%20-20.0Z%20M4228.0%2058.0Q4228.0%2055.0%204232.5%2052.0Q4237.0%2049.0%204244.0%2045.0Q4387.0%20-25.0%204462.0%20-115.0Q4537.0%20-205.0%204564.0%20-318.5Q4591.0%20-432.0%204591.0%20-599.0Q4591.0%20-619.0%204589.0%20-655.0Q4588.0%20-675.0%204578.0%20-697.5Q4568.0%20-720.0%204549.0%20-732.0Q4541.0%20-737.0%204533.5%20-740.0Q4526.0%20-743.0%204518.0%20-744.5Q4510.0%20-746.0%204510.0%20-751.0Q4510.0%20-759.0%204542.0%20-769.5Q4574.0%20-780.0%204602.0%20-780.0Q4617.0%20-780.0%204623.0%20-778.0Q4665.0%20-766.0%204698.5%20-739.5Q4732.0%20-713.0%204732.0%20-695.0Q4732.0%20-686.0%204723.0%20-666.0Q4713.0%20-644.0%204713.0%20-630.0Q4713.0%20-614.0%204711.0%20-582.0Q4709.0%20-554.0%204709.0%20-539.0Q4709.0%20-407.0%204680.0%20-297.5Q4651.0%20-188.0%204549.5%20-90.0Q4448.0%208.0%204248.0%2059.0Q4236.0%2062.0%204233.0%2062.0Q4228.0%2062.0%204228.0%2058.0ZM4295.0%20-347.0%204298.0%20-373.0Q4299.0%20-380.0%204303.0%20-419.5Q4307.0%20-459.0%204307.0%20-499.0Q4307.0%20-537.0%204304.0%20-568.5Q4301.0%20-600.0%204296.0%20-613.0Q4288.0%20-634.0%204271.5%20-645.0Q4255.0%20-656.0%204236.0%20-656.0Q4232.0%20-656.0%204229.5%20-656.5Q4227.0%20-657.0%204227.0%20-660.0Q4227.0%20-665.0%204242.0%20-677.5Q4257.0%20-690.0%204279.0%20-699.5Q4301.0%20-709.0%204322.0%20-709.0Q4332.0%20-709.0%204341.0%20-706.0Q4389.0%20-692.0%204407.0%20-676.0Q4425.0%20-660.0%204425.0%20-641.0Q4425.0%20-632.0%204421.5%20-619.5Q4418.0%20-607.0%204417.0%20-599.0Q4414.0%20-580.0%204414.0%20-532.0Q4414.0%20-479.0%204416.0%20-447.0L4420.0%20-404.0Q4425.0%20-366.0%204425.0%20-336.0Q4425.0%20-308.0%204408.0%20-284.5Q4391.0%20-261.0%204367.0%20-261.0Q4353.0%20-261.0%204336.0%20-272.5Q4319.0%20-284.0%204307.0%20-304.0Q4295.0%20-324.0%204295.0%20-347.0Z%20M5849.0%20-533.0Q5849.0%20-519.0%205840.5%20-510.0Q5832.0%20-501.0%205813.0%20-490.0Q5795.0%20-478.0%205783.5%20-469.0Q5772.0%20-460.0%205763.0%20-446.0Q5665.0%20-298.0%205557.5%20-204.5Q5450.0%20-111.0%205333.0%20-60.0Q5216.0%20-9.0%205071.0%2021.0L5060.0%2022.0Q5052.0%2022.0%205052.0%2017.0Q5052.0%2012.0%205065.0%207.0Q5470.0%20-163.0%205671.0%20-532.0Q5677.0%20-544.0%205677.0%20-550.0Q5677.0%20-558.0%205669.0%20-558.0Q5665.0%20-558.0%205657.0%20-555.0Q5622.0%20-540.0%205599.5%20-533.0Q5577.0%20-526.0%205560.0%20-526.0Q5546.0%20-526.0%205532.0%20-532.0Q5524.0%20-534.0%205520.0%20-534.0Q5510.0%20-534.0%205502.0%20-526.0Q5424.0%20-442.0%205337.5%20-385.5Q5251.0%20-329.0%205169.0%20-297.0Q5160.0%20-293.0%205155.0%20-293.0Q5151.0%20-293.0%205151.0%20-295.0Q5151.0%20-298.0%205166.0%20-309.0Q5247.0%20-369.0%205311.0%20-444.5Q5375.0%20-520.0%205411.0%20-584.0Q5447.0%20-648.0%205447.0%20-673.0Q5447.0%20-690.0%205432.5%20-702.0Q5418.0%20-714.0%205395.0%20-720.0Q5382.0%20-723.0%205382.0%20-727.0Q5382.0%20-731.0%205397.0%20-736.0Q5425.0%20-744.0%205450.0%20-744.0Q5480.0%20-744.0%205514.0%20-728.0Q5548.0%20-712.0%205571.0%20-689.5Q5594.0%20-667.0%205594.0%20-649.0Q5594.0%20-644.0%205590.5%20-637.5Q5587.0%20-631.0%205583.0%20-625.0L5569.0%20-606.0Q5564.0%20-600.0%205564.0%20-592.0Q5564.0%20-587.0%205567.0%20-584.0Q5570.0%20-581.0%205575.0%20-581.0Q5579.0%20-581.0%205585.0%20-584.0Q5612.0%20-595.0%205655.0%20-620.0Q5679.0%20-634.0%205692.5%20-639.5Q5706.0%20-645.0%205721.0%20-645.0Q5736.0%20-645.0%205768.0%20-625.5Q5800.0%20-606.0%205824.5%20-580.0Q5849.0%20-554.0%205849.0%20-533.0Z%20M6486.0%20-161.0Q6459.0%20-198.0%206459.0%20-223.0Q6459.0%20-229.0%206461.0%20-237.0Q6473.0%20-270.0%206476.0%20-299.0Q6477.0%20-309.0%206477.0%20-331.0V-363.0Q6477.0%20-381.0%206480.0%20-462.0Q6482.0%20-502.0%206482.0%20-513.0Q6482.0%20-552.0%206471.0%20-572.0Q6457.0%20-598.0%206440.5%20-605.5Q6424.0%20-613.0%206424.0%20-615.0Q6424.0%20-622.0%206441.0%20-628.0Q6458.0%20-634.0%206480.0%20-634.0Q6501.0%20-634.0%206533.0%20-624.0Q6565.0%20-614.0%206588.5%20-595.5Q6612.0%20-577.0%206612.0%20-553.0Q6612.0%20-544.0%206608.0%20-533.0Q6604.0%20-522.0%206598.0%20-510.0Q6576.0%20-464.0%206570.0%20-423.0Q6562.0%20-370.0%206559.5%20-344.0Q6557.0%20-318.0%206557.0%20-284.0Q6557.0%20-278.0%206557.5%20-273.5Q6558.0%20-269.0%206561.0%20-269.0Q6575.0%20-269.0%206631.0%20-295.5Q6687.0%20-322.0%206769.5%20-377.0Q6852.0%20-432.0%206943.0%20-515.0Q6958.0%20-529.0%206964.0%20-529.0Q6966.0%20-529.0%206966.0%20-526.0Q6966.0%20-519.0%206954.0%20-501.0Q6884.0%20-393.0%206822.0%20-332.5Q6760.0%20-272.0%206681.0%20-214.0Q6622.0%20-169.0%206600.0%20-149.0Q6574.0%20-124.0%206547.0%20-124.0Q6514.0%20-124.0%206486.0%20-161.0ZM6028.0%20-20.0Q6028.0%20-26.0%206037.0%20-33.0Q6134.0%20-116.0%206200.5%20-229.0Q6267.0%20-342.0%206286.0%20-465.0Q6290.0%20-485.0%206290.0%20-500.0Q6290.0%20-545.0%206253.0%20-570.0Q6249.0%20-573.0%206242.0%20-576.5Q6235.0%20-580.0%206235.0%20-582.0Q6235.0%20-586.0%206245.5%20-589.5Q6256.0%20-593.0%206275.0%20-593.0Q6298.0%20-593.0%206318.0%20-586.0Q6373.0%20-568.0%206399.5%20-545.5Q6426.0%20-523.0%206426.0%20-505.0Q6426.0%20-496.0%206421.0%20-488.0Q6416.0%20-480.0%206415.0%20-478.0Q6398.0%20-455.0%206389.0%20-422.0Q6357.0%20-308.0%206301.5%20-229.0Q6246.0%20-150.0%206183.0%20-103.0Q6120.0%20-56.0%206045.0%20-19.0Q6037.0%20-15.0%206034.0%20-15.0Q6028.0%20-15.0%206028.0%20-20.0Z%20M7138.0%20-291.0Q7116.0%20-308.0%207098.5%20-338.5Q7081.0%20-369.0%207081.0%20-393.0Q7081.0%20-408.0%207090.0%20-434.0Q7099.0%20-460.0%207111.0%20-460.0Q7116.0%20-460.0%207119.5%20-456.5Q7123.0%20-453.0%207127.0%20-445.0Q7142.0%20-410.0%207180.0%20-403.0Q7201.0%20-399.0%207255.0%20-399.0Q7298.0%20-399.0%207503.0%20-413.0Q7531.0%20-415.0%207543.0%20-415.0Q7729.0%20-427.0%207788.0%20-427.0Q7840.0%20-427.0%207878.0%20-414.5Q7916.0%20-402.0%207916.0%20-372.0Q7916.0%20-347.0%207888.0%20-330.5Q7860.0%20-314.0%207814.0%20-313.0Q7812.0%20-313.0%207796.5%20-313.5Q7781.0%20-314.0%207736.0%20-314.0Q7627.0%20-314.0%207488.0%20-310.0Q7431.0%20-308.0%207359.5%20-301.0Q7288.0%20-294.0%207242.0%20-283.0L7213.0%20-275.0Q7208.0%20-274.0%207199.5%20-271.5Q7191.0%20-269.0%207185.0%20-269.0Q7175.0%20-269.0%207164.5%20-274.0Q7154.0%20-279.0%207138.0%20-291.0Z%20M8505.0%20-479.0Q8612.0%20-473.0%208686.0%20-440.5Q8760.0%20-408.0%208760.0%20-339.0Q8760.0%20-311.0%208745.5%20-293.5Q8731.0%20-276.0%208708.0%20-276.0Q8674.0%20-276.0%208631.0%20-329.0Q8595.0%20-372.0%208567.5%20-399.5Q8540.0%20-427.0%208509.0%20-445.0Q8499.0%20-451.0%208491.5%20-451.5Q8484.0%20-452.0%208484.0%20-448.0Q8484.0%20-339.0%208486.0%20-285.0Q8490.0%20-172.0%208495.0%20-127.0Q8501.0%20-79.0%208501.0%20-51.0Q8501.0%20-21.0%208491.0%200.0Q8481.0%2021.0%208467.5%2031.0Q8454.0%2041.0%208442.0%2041.0Q8421.0%2041.0%208402.5%2012.5Q8384.0%20-16.0%208372.5%20-54.0Q8361.0%20-92.0%208361.0%20-114.0Q8361.0%20-132.0%208366.0%20-175.0Q8371.0%20-215.0%208375.0%20-271.0Q8382.0%20-361.0%208382.0%20-478.0L8381.0%20-613.0Q8381.0%20-668.0%208375.0%20-693.0Q8370.0%20-714.0%208359.5%20-727.0Q8349.0%20-740.0%208329.0%20-749.0Q8323.0%20-752.0%208318.0%20-753.5Q8313.0%20-755.0%208311.0%20-756.5Q8309.0%20-758.0%208309.0%20-760.0Q8309.0%20-771.0%208354.5%20-783.5Q8400.0%20-796.0%208425.0%20-796.0Q8445.0%20-796.0%208461.5%20-788.5Q8478.0%20-781.0%208497.0%20-763.0Q8513.0%20-747.0%208513.0%20-723.0Q8513.0%20-706.0%208505.0%20-685.0Q8490.0%20-648.0%208487.0%20-617.0Q8484.0%20-586.0%208484.0%20-499.0V-490.0Q8484.0%20-481.0%208505.0%20-479.0Z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='227.0%20-839.0%208533.0%20901.0'%3E%3Cpath%20d='M228.0%2058.0Q228.0%2055.0%20232.5%2052.0Q237.0%2049.0%20244.0%2045.0Q387.0%20-25.0%20462.0%20-115.0Q537.0%20-205.0%20564.0%20-318.5Q591.0%20-432.0%20591.0%20-599.0Q591.0%20-619.0%20589.0%20-655.0Q588.0%20-675.0%20578.0%20-697.5Q568.0%20-720.0%20549.0%20-732.0Q541.0%20-737.0%20533.5%20-740.0Q526.0%20-743.0%20518.0%20-744.5Q510.0%20-746.0%20510.0%20-751.0Q510.0%20-759.0%20542.0%20-769.5Q574.0%20-780.0%20602.0%20-780.0Q617.0%20-780.0%20623.0%20-778.0Q665.0%20-766.0%20698.5%20-739.5Q732.0%20-713.0%20732.0%20-695.0Q732.0%20-686.0%20723.0%20-666.0Q713.0%20-644.0%20713.0%20-630.0Q713.0%20-614.0%20711.0%20-582.0Q709.0%20-554.0%20709.0%20-539.0Q709.0%20-407.0%20680.0%20-297.5Q651.0%20-188.0%20549.5%20-90.0Q448.0%208.0%20248.0%2059.0Q236.0%2062.0%20233.0%2062.0Q228.0%2062.0%20228.0%2058.0ZM295.0%20-347.0%20298.0%20-373.0Q299.0%20-380.0%20303.0%20-419.5Q307.0%20-459.0%20307.0%20-499.0Q307.0%20-537.0%20304.0%20-568.5Q301.0%20-600.0%20296.0%20-613.0Q288.0%20-634.0%20271.5%20-645.0Q255.0%20-656.0%20236.0%20-656.0Q232.0%20-656.0%20229.5%20-656.5Q227.0%20-657.0%20227.0%20-660.0Q227.0%20-665.0%20242.0%20-677.5Q257.0%20-690.0%20279.0%20-699.5Q301.0%20-709.0%20322.0%20-709.0Q332.0%20-709.0%20341.0%20-706.0Q389.0%20-692.0%20407.0%20-676.0Q425.0%20-660.0%20425.0%20-641.0Q425.0%20-632.0%20421.5%20-619.5Q418.0%20-607.0%20417.0%20-599.0Q414.0%20-580.0%20414.0%20-532.0Q414.0%20-479.0%20416.0%20-447.0L420.0%20-404.0Q425.0%20-366.0%20425.0%20-336.0Q425.0%20-308.0%20408.0%20-284.5Q391.0%20-261.0%20367.0%20-261.0Q353.0%20-261.0%20336.0%20-272.5Q319.0%20-284.0%20307.0%20-304.0Q295.0%20-324.0%20295.0%20-347.0Z%20M1138.0%20-291.0Q1116.0%20-308.0%201098.5%20-338.5Q1081.0%20-369.0%201081.0%20-393.0Q1081.0%20-408.0%201090.0%20-434.0Q1099.0%20-460.0%201111.0%20-460.0Q1116.0%20-460.0%201119.5%20-456.5Q1123.0%20-453.0%201127.0%20-445.0Q1142.0%20-410.0%201180.0%20-403.0Q1201.0%20-399.0%201255.0%20-399.0Q1298.0%20-399.0%201503.0%20-413.0Q1531.0%20-415.0%201543.0%20-415.0Q1729.0%20-427.0%201788.0%20-427.0Q1840.0%20-427.0%201878.0%20-414.5Q1916.0%20-402.0%201916.0%20-372.0Q1916.0%20-347.0%201888.0%20-330.5Q1860.0%20-314.0%201814.0%20-313.0Q1812.0%20-313.0%201796.5%20-313.5Q1781.0%20-314.0%201736.0%20-314.0Q1627.0%20-314.0%201488.0%20-310.0Q1431.0%20-308.0%201359.5%20-301.0Q1288.0%20-294.0%201242.0%20-283.0L1213.0%20-275.0Q1208.0%20-274.0%201199.5%20-271.5Q1191.0%20-269.0%201185.0%20-269.0Q1175.0%20-269.0%201164.5%20-274.0Q1154.0%20-279.0%201138.0%20-291.0Z%20M2985.0%20-747.0Q2985.0%20-723.0%202971.0%20-709.5Q2957.0%20-696.0%202937.0%20-696.0Q2923.0%20-696.0%202910.5%20-703.5Q2898.0%20-711.0%202890.0%20-724.0Q2868.0%20-760.0%202849.0%20-779.0Q2830.0%20-798.0%202804.0%20-813.0Q2795.0%20-817.0%202788.0%20-820.5Q2781.0%20-824.0%202776.5%20-826.5Q2772.0%20-829.0%202772.0%20-832.0Q2772.0%20-839.0%202823.0%20-839.0Q2888.0%20-839.0%202936.5%20-816.0Q2985.0%20-793.0%202985.0%20-747.0ZM2857.0%20-519.0Q2857.0%20-513.0%202852.5%20-506.0Q2848.0%20-499.0%202843.0%20-493.5Q2838.0%20-488.0%202834.0%20-483.0Q2820.0%20-464.0%202817.0%20-446.0Q2797.0%20-336.0%202780.0%20-276.0Q2763.0%20-216.0%202732.0%20-144.0Q2700.0%20-70.0%202660.5%20-35.5Q2621.0%20-1.0%202582.0%20-1.0Q2562.0%20-1.0%202544.5%20-11.5Q2527.0%20-22.0%202527.0%20-40.0Q2527.0%20-73.0%202525.5%20-83.5Q2524.0%20-94.0%202517.0%20-104.0Q2499.0%20-127.0%202473.0%20-150.5Q2447.0%20-174.0%202442.0%20-180.0Q2433.0%20-189.0%202433.0%20-193.0Q2433.0%20-197.0%202437.0%20-197.0Q2440.0%20-197.0%202450.0%20-192.0L2469.0%20-180.0Q2502.0%20-160.0%202526.5%20-148.5Q2551.0%20-137.0%202574.0%20-137.0Q2588.0%20-137.0%202602.0%20-147.5Q2616.0%20-158.0%202626.0%20-177.0Q2661.0%20-244.0%202680.5%20-310.5Q2700.0%20-377.0%202706.5%20-423.0Q2713.0%20-469.0%202713.0%20-484.0Q2713.0%20-497.0%202699.0%20-497.0Q2686.0%20-497.0%202558.0%20-483.0Q2541.0%20-482.0%202536.0%20-465.0Q2501.0%20-360.0%202445.0%20-264.0Q2411.0%20-205.0%202347.5%20-148.5Q2284.0%20-92.0%202214.0%20-49.0Q2144.0%20-6.0%202089.0%2016.0Q2080.0%2019.0%202076.0%2019.0Q2071.0%2019.0%202071.0%2016.0Q2071.0%2013.0%202083.0%204.0Q2187.0%20-74.0%202260.0%20-153.0Q2333.0%20-232.0%202378.0%20-331.0Q2403.0%20-388.0%202419.0%20-435.0Q2421.0%20-441.0%202421.0%20-444.0Q2421.0%20-452.0%202415.0%20-455.0Q2409.0%20-458.0%202399.0%20-456.0Q2362.0%20-447.0%202338.0%20-440.0Q2323.0%20-435.0%202297.0%20-424.0Q2285.0%20-418.0%202277.0%20-418.0Q2245.0%20-418.0%202216.5%20-444.5Q2188.0%20-471.0%202170.0%20-503.0Q2152.0%20-535.0%202152.0%20-544.0Q2152.0%20-550.0%202157.0%20-550.0Q2160.0%20-550.0%202181.0%20-542.0Q2211.0%20-530.0%202236.5%20-525.0Q2262.0%20-520.0%202297.0%20-520.0Q2357.0%20-520.0%202427.0%20-525.0Q2444.0%20-526.0%202449.0%20-545.0Q2461.0%20-605.0%202461.0%20-647.0Q2461.0%20-678.0%202450.0%20-696.5Q2439.0%20-715.0%202407.0%20-729.0Q2402.0%20-731.0%202395.5%20-734.0Q2389.0%20-737.0%202387.0%20-739.0Q2385.0%20-741.0%202385.0%20-744.0Q2385.0%20-753.0%202410.0%20-759.5Q2435.0%20-766.0%202458.0%20-766.0Q2492.0%20-766.0%202529.0%20-755.0Q2566.0%20-744.0%202591.0%20-726.5Q2616.0%20-709.0%202616.0%20-691.0Q2616.0%20-679.0%202604.0%20-661.0Q2595.0%20-647.0%202589.0%20-635.0Q2583.0%20-623.0%202576.0%20-598.0L2567.0%20-567.0Q2566.0%20-564.0%202566.0%20-559.0Q2566.0%20-551.0%202571.0%20-547.5Q2576.0%20-544.0%202586.0%20-545.0Q2613.0%20-549.0%202664.0%20-560.0Q2696.0%20-566.0%202723.0%20-589.0Q2736.0%20-602.0%202746.0%20-602.0Q2756.0%20-602.0%202783.5%20-585.0Q2811.0%20-568.0%202834.0%20-548.0Q2857.0%20-528.0%202857.0%20-519.0ZM2888.0%20-652.0Q2888.0%20-626.0%202873.0%20-613.0Q2858.0%20-600.0%202838.0%20-600.0Q2801.0%20-600.0%202785.0%20-634.0Q2769.0%20-667.0%202750.0%20-690.0Q2731.0%20-713.0%202702.0%20-738.0Q2694.0%20-744.0%202687.5%20-748.5Q2681.0%20-753.0%202681.0%20-755.0Q2681.0%20-760.0%202697.0%20-760.0Q2727.0%20-760.0%202772.5%20-749.0Q2818.0%20-738.0%202853.0%20-713.5Q2888.0%20-689.0%202888.0%20-652.0Z%20M3486.0%20-161.0Q3459.0%20-198.0%203459.0%20-223.0Q3459.0%20-229.0%203461.0%20-237.0Q3473.0%20-270.0%203476.0%20-299.0Q3477.0%20-309.0%203477.0%20-331.0V-363.0Q3477.0%20-381.0%203480.0%20-462.0Q3482.0%20-502.0%203482.0%20-513.0Q3482.0%20-552.0%203471.0%20-572.0Q3457.0%20-598.0%203440.5%20-605.5Q3424.0%20-613.0%203424.0%20-615.0Q3424.0%20-622.0%203441.0%20-628.0Q3458.0%20-634.0%203480.0%20-634.0Q3501.0%20-634.0%203533.0%20-624.0Q3565.0%20-614.0%203588.5%20-595.5Q3612.0%20-577.0%203612.0%20-553.0Q3612.0%20-544.0%203608.0%20-533.0Q3604.0%20-522.0%203598.0%20-510.0Q3576.0%20-464.0%203570.0%20-423.0Q3562.0%20-370.0%203559.5%20-344.0Q3557.0%20-318.0%203557.0%20-284.0Q3557.0%20-278.0%203557.5%20-273.5Q3558.0%20-269.0%203561.0%20-269.0Q3575.0%20-269.0%203631.0%20-295.5Q3687.0%20-322.0%203769.5%20-377.0Q3852.0%20-432.0%203943.0%20-515.0Q3958.0%20-529.0%203964.0%20-529.0Q3966.0%20-529.0%203966.0%20-526.0Q3966.0%20-519.0%203954.0%20-501.0Q3884.0%20-393.0%203822.0%20-332.5Q3760.0%20-272.0%203681.0%20-214.0Q3622.0%20-169.0%203600.0%20-149.0Q3574.0%20-124.0%203547.0%20-124.0Q3514.0%20-124.0%203486.0%20-161.0ZM3028.0%20-20.0Q3028.0%20-26.0%203037.0%20-33.0Q3134.0%20-116.0%203200.5%20-229.0Q3267.0%20-342.0%203286.0%20-465.0Q3290.0%20-485.0%203290.0%20-500.0Q3290.0%20-545.0%203253.0%20-570.0Q3249.0%20-573.0%203242.0%20-576.5Q3235.0%20-580.0%203235.0%20-582.0Q3235.0%20-586.0%203245.5%20-589.5Q3256.0%20-593.0%203275.0%20-593.0Q3298.0%20-593.0%203318.0%20-586.0Q3373.0%20-568.0%203399.5%20-545.5Q3426.0%20-523.0%203426.0%20-505.0Q3426.0%20-496.0%203421.0%20-488.0Q3416.0%20-480.0%203415.0%20-478.0Q3398.0%20-455.0%203389.0%20-422.0Q3357.0%20-308.0%203301.5%20-229.0Q3246.0%20-150.0%203183.0%20-103.0Q3120.0%20-56.0%203045.0%20-19.0Q3037.0%20-15.0%203034.0%20-15.0Q3028.0%20-15.0%203028.0%20-20.0Z%20M4228.0%2058.0Q4228.0%2055.0%204232.5%2052.0Q4237.0%2049.0%204244.0%2045.0Q4387.0%20-25.0%204462.0%20-115.0Q4537.0%20-205.0%204564.0%20-318.5Q4591.0%20-432.0%204591.0%20-599.0Q4591.0%20-619.0%204589.0%20-655.0Q4588.0%20-675.0%204578.0%20-697.5Q4568.0%20-720.0%204549.0%20-732.0Q4541.0%20-737.0%204533.5%20-740.0Q4526.0%20-743.0%204518.0%20-744.5Q4510.0%20-746.0%204510.0%20-751.0Q4510.0%20-759.0%204542.0%20-769.5Q4574.0%20-780.0%204602.0%20-780.0Q4617.0%20-780.0%204623.0%20-778.0Q4665.0%20-766.0%204698.5%20-739.5Q4732.0%20-713.0%204732.0%20-695.0Q4732.0%20-686.0%204723.0%20-666.0Q4713.0%20-644.0%204713.0%20-630.0Q4713.0%20-614.0%204711.0%20-582.0Q4709.0%20-554.0%204709.0%20-539.0Q4709.0%20-407.0%204680.0%20-297.5Q4651.0%20-188.0%204549.5%20-90.0Q4448.0%208.0%204248.0%2059.0Q4236.0%2062.0%204233.0%2062.0Q4228.0%2062.0%204228.0%2058.0ZM4295.0%20-347.0%204298.0%20-373.0Q4299.0%20-380.0%204303.0%20-419.5Q4307.0%20-459.0%204307.0%20-499.0Q4307.0%20-537.0%204304.0%20-568.5Q4301.0%20-600.0%204296.0%20-613.0Q4288.0%20-634.0%204271.5%20-645.0Q4255.0%20-656.0%204236.0%20-656.0Q4232.0%20-656.0%204229.5%20-656.5Q4227.0%20-657.0%204227.0%20-660.0Q4227.0%20-665.0%204242.0%20-677.5Q4257.0%20-690.0%204279.0%20-699.5Q4301.0%20-709.0%204322.0%20-709.0Q4332.0%20-709.0%204341.0%20-706.0Q4389.0%20-692.0%204407.0%20-676.0Q4425.0%20-660.0%204425.0%20-641.0Q4425.0%20-632.0%204421.5%20-619.5Q4418.0%20-607.0%204417.0%20-599.0Q4414.0%20-580.0%204414.0%20-532.0Q4414.0%20-479.0%204416.0%20-447.0L4420.0%20-404.0Q4425.0%20-366.0%204425.0%20-336.0Q4425.0%20-308.0%204408.0%20-284.5Q4391.0%20-261.0%204367.0%20-261.0Q4353.0%20-261.0%204336.0%20-272.5Q4319.0%20-284.0%204307.0%20-304.0Q4295.0%20-324.0%204295.0%20-347.0Z%20M5849.0%20-533.0Q5849.0%20-519.0%205840.5%20-510.0Q5832.0%20-501.0%205813.0%20-490.0Q5795.0%20-478.0%205783.5%20-469.0Q5772.0%20-460.0%205763.0%20-446.0Q5665.0%20-298.0%205557.5%20-204.5Q5450.0%20-111.0%205333.0%20-60.0Q5216.0%20-9.0%205071.0%2021.0L5060.0%2022.0Q5052.0%2022.0%205052.0%2017.0Q5052.0%2012.0%205065.0%207.0Q5470.0%20-163.0%205671.0%20-532.0Q5677.0%20-544.0%205677.0%20-550.0Q5677.0%20-558.0%205669.0%20-558.0Q5665.0%20-558.0%205657.0%20-555.0Q5622.0%20-540.0%205599.5%20-533.0Q5577.0%20-526.0%205560.0%20-526.0Q5546.0%20-526.0%205532.0%20-532.0Q5524.0%20-534.0%205520.0%20-534.0Q5510.0%20-534.0%205502.0%20-526.0Q5424.0%20-442.0%205337.5%20-385.5Q5251.0%20-329.0%205169.0%20-297.0Q5160.0%20-293.0%205155.0%20-293.0Q5151.0%20-293.0%205151.0%20-295.0Q5151.0%20-298.0%205166.0%20-309.0Q5247.0%20-369.0%205311.0%20-444.5Q5375.0%20-520.0%205411.0%20-584.0Q5447.0%20-648.0%205447.0%20-673.0Q5447.0%20-690.0%205432.5%20-702.0Q5418.0%20-714.0%205395.0%20-720.0Q5382.0%20-723.0%205382.0%20-727.0Q5382.0%20-731.0%205397.0%20-736.0Q5425.0%20-744.0%205450.0%20-744.0Q5480.0%20-744.0%205514.0%20-728.0Q5548.0%20-712.0%205571.0%20-689.5Q5594.0%20-667.0%205594.0%20-649.0Q5594.0%20-644.0%205590.5%20-637.5Q5587.0%20-631.0%205583.0%20-625.0L5569.0%20-606.0Q5564.0%20-600.0%205564.0%20-592.0Q5564.0%20-587.0%205567.0%20-584.0Q5570.0%20-581.0%205575.0%20-581.0Q5579.0%20-581.0%205585.0%20-584.0Q5612.0%20-595.0%205655.0%20-620.0Q5679.0%20-634.0%205692.5%20-639.5Q5706.0%20-645.0%205721.0%20-645.0Q5736.0%20-645.0%205768.0%20-625.5Q5800.0%20-606.0%205824.5%20-580.0Q5849.0%20-554.0%205849.0%20-533.0Z%20M6486.0%20-161.0Q6459.0%20-198.0%206459.0%20-223.0Q6459.0%20-229.0%206461.0%20-237.0Q6473.0%20-270.0%206476.0%20-299.0Q6477.0%20-309.0%206477.0%20-331.0V-363.0Q6477.0%20-381.0%206480.0%20-462.0Q6482.0%20-502.0%206482.0%20-513.0Q6482.0%20-552.0%206471.0%20-572.0Q6457.0%20-598.0%206440.5%20-605.5Q6424.0%20-613.0%206424.0%20-615.0Q6424.0%20-622.0%206441.0%20-628.0Q6458.0%20-634.0%206480.0%20-634.0Q6501.0%20-634.0%206533.0%20-624.0Q6565.0%20-614.0%206588.5%20-595.5Q6612.0%20-577.0%206612.0%20-553.0Q6612.0%20-544.0%206608.0%20-533.0Q6604.0%20-522.0%206598.0%20-510.0Q6576.0%20-464.0%206570.0%20-423.0Q6562.0%20-370.0%206559.5%20-344.0Q6557.0%20-318.0%206557.0%20-284.0Q6557.0%20-278.0%206557.5%20-273.5Q6558.0%20-269.0%206561.0%20-269.0Q6575.0%20-269.0%206631.0%20-295.5Q6687.0%20-322.0%206769.5%20-377.0Q6852.0%20-432.0%206943.0%20-515.0Q6958.0%20-529.0%206964.0%20-529.0Q6966.0%20-529.0%206966.0%20-526.0Q6966.0%20-519.0%206954.0%20-501.0Q6884.0%20-393.0%206822.0%20-332.5Q6760.0%20-272.0%206681.0%20-214.0Q6622.0%20-169.0%206600.0%20-149.0Q6574.0%20-124.0%206547.0%20-124.0Q6514.0%20-124.0%206486.0%20-161.0ZM6028.0%20-20.0Q6028.0%20-26.0%206037.0%20-33.0Q6134.0%20-116.0%206200.5%20-229.0Q6267.0%20-342.0%206286.0%20-465.0Q6290.0%20-485.0%206290.0%20-500.0Q6290.0%20-545.0%206253.0%20-570.0Q6249.0%20-573.0%206242.0%20-576.5Q6235.0%20-580.0%206235.0%20-582.0Q6235.0%20-586.0%206245.5%20-589.5Q6256.0%20-593.0%206275.0%20-593.0Q6298.0%20-593.0%206318.0%20-586.0Q6373.0%20-568.0%206399.5%20-545.5Q6426.0%20-523.0%206426.0%20-505.0Q6426.0%20-496.0%206421.0%20-488.0Q6416.0%20-480.0%206415.0%20-478.0Q6398.0%20-455.0%206389.0%20-422.0Q6357.0%20-308.0%206301.5%20-229.0Q6246.0%20-150.0%206183.0%20-103.0Q6120.0%20-56.0%206045.0%20-19.0Q6037.0%20-15.0%206034.0%20-15.0Q6028.0%20-15.0%206028.0%20-20.0Z%20M7138.0%20-291.0Q7116.0%20-308.0%207098.5%20-338.5Q7081.0%20-369.0%207081.0%20-393.0Q7081.0%20-408.0%207090.0%20-434.0Q7099.0%20-460.0%207111.0%20-460.0Q7116.0%20-460.0%207119.5%20-456.5Q7123.0%20-453.0%207127.0%20-445.0Q7142.0%20-410.0%207180.0%20-403.0Q7201.0%20-399.0%207255.0%20-399.0Q7298.0%20-399.0%207503.0%20-413.0Q7531.0%20-415.0%207543.0%20-415.0Q7729.0%20-427.0%207788.0%20-427.0Q7840.0%20-427.0%207878.0%20-414.5Q7916.0%20-402.0%207916.0%20-372.0Q7916.0%20-347.0%207888.0%20-330.5Q7860.0%20-314.0%207814.0%20-313.0Q7812.0%20-313.0%207796.5%20-313.5Q7781.0%20-314.0%207736.0%20-314.0Q7627.0%20-314.0%207488.0%20-310.0Q7431.0%20-308.0%207359.5%20-301.0Q7288.0%20-294.0%207242.0%20-283.0L7213.0%20-275.0Q7208.0%20-274.0%207199.5%20-271.5Q7191.0%20-269.0%207185.0%20-269.0Q7175.0%20-269.0%207164.5%20-274.0Q7154.0%20-279.0%207138.0%20-291.0Z%20M8505.0%20-479.0Q8612.0%20-473.0%208686.0%20-440.5Q8760.0%20-408.0%208760.0%20-339.0Q8760.0%20-311.0%208745.5%20-293.5Q8731.0%20-276.0%208708.0%20-276.0Q8674.0%20-276.0%208631.0%20-329.0Q8595.0%20-372.0%208567.5%20-399.5Q8540.0%20-427.0%208509.0%20-445.0Q8499.0%20-451.0%208491.5%20-451.5Q8484.0%20-452.0%208484.0%20-448.0Q8484.0%20-339.0%208486.0%20-285.0Q8490.0%20-172.0%208495.0%20-127.0Q8501.0%20-79.0%208501.0%20-51.0Q8501.0%20-21.0%208491.0%200.0Q8481.0%2021.0%208467.5%2031.0Q8454.0%2041.0%208442.0%2041.0Q8421.0%2041.0%208402.5%2012.5Q8384.0%20-16.0%208372.5%20-54.0Q8361.0%20-92.0%208361.0%20-114.0Q8361.0%20-132.0%208366.0%20-175.0Q8371.0%20-215.0%208375.0%20-271.0Q8382.0%20-361.0%208382.0%20-478.0L8381.0%20-613.0Q8381.0%20-668.0%208375.0%20-693.0Q8370.0%20-714.0%208359.5%20-727.0Q8349.0%20-740.0%208329.0%20-749.0Q8323.0%20-752.0%208318.0%20-753.5Q8313.0%20-755.0%208311.0%20-756.5Q8309.0%20-758.0%208309.0%20-760.0Q8309.0%20-771.0%208354.5%20-783.5Q8400.0%20-796.0%208425.0%20-796.0Q8445.0%20-796.0%208461.5%20-788.5Q8478.0%20-781.0%208497.0%20-763.0Q8513.0%20-747.0%208513.0%20-723.0Q8513.0%20-706.0%208505.0%20-685.0Q8490.0%20-648.0%208487.0%20-617.0Q8484.0%20-586.0%208484.0%20-499.0V-490.0Q8484.0%20-481.0%208505.0%20-479.0Z'/%3E%3C/svg%3E") no-repeat center / contain; text-indent: -200vw; overflow: hidden; white-space: nowrap; } .brand { gap: 7px; } } .brand-tag { font-size: 10.5px; color: rgba(255,255,255,0.65); letter-spacing: 0.2em; } .global-nav { display: flex; align-items: center; gap: 34px; } .global-nav a { font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.9); letter-spacing: 0.1em; padding: 8px 0; position: relative; cursor: pointer; } .global-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: var(--brass); transition: right 0.3s; } .global-nav a:hover::after { right: 0; } .header-cta { display: flex; gap: 12px; } /* ===== Hero ===== */ .hero { position: relative; min-height: 640px; display: flex; align-items: center; background: var(--ink); color: #fff; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background-image: linear-gradient(100deg, rgba(8,20,33,0.94) 0%, rgba(8,20,33,0.82) 42%, rgba(8,20,33,0.46) 72%, rgba(8,20,33,0.3) 100%), url('https://images.unsplash.com/photo-1745015446589-7ee6f702d8c1?auto=format&fit=crop&w=2000&q=80'); background-size: cover; background-position: center 30%; } .hero-inner { position: relative; width: 100%; padding-top: 140px; padding-bottom: 170px; padding-right: 104px; } .hero-kicker { display: flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 500; letter-spacing: 0.3em; color: var(--brass); margin-bottom: 34px; } .hero-kicker::before { content: ''; width: 56px; height: 1px; background: var(--brass); } /* ヒーローの見出し。日本語の折り返しは font-size と max-width の組で決める。 放っておくと「弁護士専門エージ / ェント」のように小書き仮名が行頭に来る。 */ .hero-lead { font-family: var(--serif); font-size: clamp(16px, 1.5vw, 19px); font-weight: 500; line-height: 1.85; letter-spacing: 0.1em; color: rgba(255,255,255,0.78); margin: 0 0 20px; max-width: 32em; } /* 18文字 × 約1.02em (字間ぶみ) = 約18.4em。20em 確保して1行に収める。 収まらない幅では line-break: strict が行頭の小書き仮名と長音符を禁じる。 */ .hero h1 { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 46px); font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; color: #fff; margin: 0 0 26px; max-width: 20em; } .hero-sub { font-size: 15.5px; color: rgba(255,255,255,0.82); max-width: 34em; line-height: 1.95; margin-bottom: 0; } /* 日本語の禁則。行頭に ェ ー っ 等が落ちるのを止める。 word-break: auto-phrase は対応ブラウザでだけ効く (文節で折る)。 */ .hero-lead, .hero h1, .hero-sub { line-break: strict; word-break: auto-phrase; overflow-wrap: normal; text-wrap: pretty; } .hero-side { position: absolute; top: 130px; right: 40px; writing-mode: vertical-rl; font-family: var(--serif); font-size: 14px; letter-spacing: 0.42em; color: rgba(255,255,255,0.5); } /* ヒーローコピーの語強調。SVG defs の金グラデーション (#E6D49A→#A8863C) をテキストにも流用。 コアメッセージの語だけに絞り、多用しない。 */ .hero-em { background: linear-gradient(170deg, #E6D49A 15%, #A8863C 85%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } .hero-lead .hero-em { color: var(--brass); font-weight: 700; background: none; -webkit-background-clip: unset; background-clip: unset; } /* ===== Search bar (overlapping) ===== */ .search-wrap { position: relative; z-index: 10; margin-top: -78px; } .search-box { background: var(--white); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(11,27,43,0.18); padding: 34px 38px 30px; } .search-head { display: flex; align-items: center; gap: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.26em; color: var(--gold); margin-bottom: 18px; } .search-head::after { content: ''; flex: 1; height: 1px; background: var(--line); } .search-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 0; } .field { border-left: 1px solid var(--line); padding: 0 22px; } .field:first-child { border-left: none; padding-left: 0; } .field label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 4px; } .field input, .field select { width: 100%; min-height: 46px; border: none; border-bottom: 1px solid var(--line); font-size: 15px; font-family: var(--sans); color: var(--text); background: transparent; } .field input:focus, .field select:focus { outline: none; border-bottom: 2px solid var(--gold); } .search-submit { align-self: center; margin-left: 22px; } .search-tags { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; align-items: center; } .search-tags .lbl { font-size: 11.5px; letter-spacing: 0.14em; color: var(--muted); font-weight: 700; } .tag { display: inline-flex; align-items: center; font-size: 12.5px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 99px; padding: 7px 16px; text-decoration: none; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; } .tag:hover { background: rgba(194,164,93,0.12); border-color: var(--brass); color: var(--gold); } /* ===== Stats ===== */ .stats { padding: 64px 0 0; } .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { text-align: center; padding: 10px 8px; border-left: 1px solid var(--line); } .stat:first-child { border-left: none; } .stat .num { font-family: var(--en); font-size: 52px; font-weight: 500; color: var(--ink); line-height: 1.15; } .stat .num small { font-size: 17px; font-family: var(--sans); font-weight: 500; margin-left: 2px; } .stat .cap { font-size: 12px; letter-spacing: 0.18em; color: var(--muted); } /* ===== Section scaffolding ===== */ .section { padding: 110px 0; } .section.paper { background: var(--paper); } .section.dark { background: var(--ink); color: #fff; } .sec-grid { display: grid; grid-template-columns: 320px 1fr; gap: 70px; align-items: start; } /* 中身 (横スクロール等) がカラム幅を押し広げるのを防ぐ */ .sec-grid > * { min-width: 0; } .sec-side { position: sticky; top: 60px; } .sec-no { font-family: var(--en); font-size: 88px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--brass); display: flex; align-items: center; gap: 22px; margin-bottom: 22px; } .sec-no::after { content: ''; width: 64px; height: 1px; background: var(--brass); -webkit-text-stroke: 0; } .sec-title { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); color: var(--ink); line-height: 1.6; letter-spacing: 0.05em; } .section.dark .sec-title { color: #fff; } .sec-lead { font-size: 14px; color: var(--muted); margin-top: 20px; line-height: 2.1; } /* セクション → 各種ページへの遷移ボタン (白いプレート + 真鍮の底辺) */ .sec-more { display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; padding: 15px 30px; min-height: 52px; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink); background-color: #fff; border: 1px solid rgba(11,27,43,0.28); border-radius: 3px; box-shadow: 0 8px 18px -12px rgba(11,27,43,0.6), 0 1px 2px rgba(11,27,43,0.06); transition: transform 0.28s cubic-bezier(.2,.6,.2,1), box-shadow 0.28s cubic-bezier(.2,.6,.2,1), background-color 0.28s, color 0.28s, border-color 0.28s; } .sec-more::after { content: ''; flex: none; width: 20px; height: 7px; background-color: currentColor; -webkit-mask: var(--arw) no-repeat center / contain; mask: var(--arw) no-repeat center / contain; transition: transform 0.32s cubic-bezier(.2,.6,.2,1); } .sec-more:hover { color: #fff; background-color: var(--ink); border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 18px 30px -16px rgba(11,27,43,0.75); } .sec-more:hover::after { transform: translateX(5px); } .sec-more:active { transform: translateY(0); background-color: #12293F; box-shadow: inset 0 2px 6px rgba(0,0,0,0.4); transition-duration: 0.08s; } .sec-more:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; } /* ===== Job cards ===== */ .job-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; } .job-card { background: var(--white); border: 1px solid var(--line); padding: 30px 32px; display: flex; flex-direction: column; gap: 14px; transition: border-color 0.3s, box-shadow 0.3s; cursor: pointer; position: relative; } .job-card:hover { border-color: var(--brass); box-shadow: 0 18px 44px rgba(11,27,43,0.10); } .job-badges { display: flex; flex-wrap: wrap; gap: 8px; } .badge { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; padding: 4px 12px; } .badge.new { background: var(--brass); color: var(--ink); } .badge.type { background: var(--ink); color: #fff; } .badge.soft { border: 1px solid var(--line); color: var(--muted); } .job-card h3 { font-family: var(--serif); font-size: 18.5px; font-weight: 600; line-height: 1.75; color: var(--ink); letter-spacing: 0.03em; } .job-firm { font-size: 12.5px; color: var(--muted); letter-spacing: 0.06em; } .job-meta { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 13px; color: var(--text); } .job-meta .salary { font-weight: 700; color: var(--gold); } .job-meta .salary .n { font-family: var(--num); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } /* ===== Browse ===== */ .browse-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); } .browse-panel { padding: 36px 32px 40px; border-bottom: 1px solid var(--line); } .browse-panel + .browse-panel { border-left: 1px solid var(--line); } .browse-panel h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 22px; letter-spacing: 0.06em; display: flex; align-items: center; gap: 14px; } .browse-panel h3::after { content: ''; flex: 1; height: 1px; background: var(--line); } .chip-list { display: flex; flex-wrap: wrap; gap: 12px 26px; } .chip { font-size: 13.5px; color: var(--text); border-bottom: 1px solid transparent; padding-bottom: 2px; cursor: pointer; transition: color 0.2s, border-color 0.2s; } .chip:hover { color: var(--gold); border-bottom-color: var(--brass); } .chip small { color: var(--muted); font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 11px; margin-left: 5px; } /* ===== Reasons (dark editorial) ===== */ .reasons-grid { display: grid; grid-template-columns: 420px 1fr; gap: 80px; align-items: center; } .reasons-photo { position: relative; } .reasons-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: saturate(0.85); } .reasons-photo::after { content: ''; position: absolute; top: 22px; left: 22px; right: -22px; bottom: -22px; border: 1px solid rgba(194,164,93,0.5); pointer-events: none; } .reason-item { display: grid; grid-template-columns: 90px 1fr; gap: 26px; padding: 34px 0; border-bottom: 1px solid var(--line-dark); } .reason-item:first-child { padding-top: 0; } .reason-item:last-child { border-bottom: none; padding-bottom: 0; } .reason-no { font-family: var(--en); font-style: italic; font-size: 40px; color: var(--brass); line-height: 1; } .reason-item h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 10px; letter-spacing: 0.05em; } .reason-item p { font-size: 13.5px; color: rgba(255,255,255,0.68); line-height: 2.1; } /* ===== Columns ===== */ .column-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; } .column-card { cursor: pointer; } .column-thumb { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 20px; } .column-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 0.8s cubic-bezier(.2,.6,.2,1); } .column-card:hover .column-thumb img { transform: scale(1.05); } .column-body .cat { font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; color: var(--gold); } .column-body h3 { font-family: var(--serif); font-size: 16.5px; font-weight: 600; line-height: 1.8; margin: 10px 0 12px; color: var(--ink); transition: color 0.2s; } .column-card:hover h3 { color: var(--gold); } .column-body time { font-family: var(--en); font-size: 12.5px; letter-spacing: 0.14em; color: var(--muted); } /* ===== Flow ===== */ .flow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; margin-top: 10px; } .flow-step { counter-increment: step; padding: 6px 34px 0; border-left: 1px solid var(--line); position: relative; } .flow-step:first-child { border-left: none; padding-left: 0; } .flow-step::before { content: '0' counter(step); font-family: var(--en); font-size: 46px; color: transparent; -webkit-text-stroke: 1px var(--gold); display: block; line-height: 1; margin-bottom: 16px; } .flow-step h3 { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 10px; letter-spacing: 0.05em; } .flow-step p { font-size: 13px; color: var(--muted); line-height: 2; } /* ===== FAQ ===== */ .faq-list { border-top: 1px solid var(--line); } .faq-list details { border-bottom: 1px solid var(--line); } .faq-list summary { display: flex; gap: 22px; align-items: baseline; padding: 26px 8px; font-family: var(--serif); font-weight: 600; font-size: 16.5px; cursor: pointer; color: var(--ink); list-style: none; letter-spacing: 0.04em; transition: color 0.2s; } .faq-list summary:hover { color: var(--gold); } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::before { content: 'Q'; font-family: var(--en); font-style: italic; color: var(--brass); font-size: 24px; flex-shrink: 0; } .faq-a { padding: 0 8px 28px 52px; font-size: 14px; color: var(--muted); line-height: 2.1; } /* ===== CTA band ===== */ .cta-band { position: relative; color: #fff; text-align: center; padding: 130px 24px; background: var(--ink); overflow: hidden; } .cta-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(8,20,33,0.82), rgba(8,20,33,0.82)), url('https://images.unsplash.com/photo-1444723121867-7a241cacace9?auto=format&fit=crop&w=2000&q=80'); background-size: cover; background-position: center; } .cta-inner { position: relative; } .cta-band h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 3.4vw, 38px); margin-bottom: 18px; letter-spacing: 0.08em; line-height: 1.7; } .cta-band p { color: rgba(255,255,255,0.7); font-size: 14px; margin-bottom: 42px; } /* ===== Footer ===== */ .site-footer { background: #081420; color: #91A2B3; padding: 70px 0 30px; font-size: 13px; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; } .footer-brand .brand-logo { color: #fff; } .footer-brand-tag { display: block; margin-top: 9px; } .site-footer h2 { color: #fff; font-size: 13px; letter-spacing: 0.14em; margin-bottom: 18px; font-weight: 700; } .site-footer li { margin-bottom: 10px; } .site-footer a { transition: color 0.2s; cursor: pointer; } .site-footer a:hover { color: #fff; } .footer-note { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: #5F7186; letter-spacing: 0.06em; } .mock-note { background: #F3EEDF; border-top: 1px solid #E0D5B5; color: #7A6230; font-size: 12px; text-align: center; padding: 10px 16px; } /* ===== Responsive ===== */ @media (max-width: 1024px) { .sec-grid { grid-template-columns: 1fr; gap: 40px; } .sec-side { position: static; } .reasons-grid { grid-template-columns: 1fr; gap: 60px; } .column-grid { grid-template-columns: 1fr 1fr; } .flow-grid { grid-template-columns: 1fr 1fr; gap: 40px 0; } .footer-grid { grid-template-columns: 1fr 1fr; } .hero-side { display: none; } /* 縦書きを隠したので、そのために空けていた右の余白も戻す。 */ .hero-inner { padding-right: 32px; } } @media (max-width: 720px) { .global-nav { display: none; } .header-cta .btn-ghost-light { display: none; } .hero-inner { padding-top: 130px; padding-bottom: 140px; } .search-row { grid-template-columns: 1fr; gap: 14px; } .field { border-left: none; padding: 0; } .search-submit { margin-left: 0; width: 100%; } .stats-row { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { border-left: none; } .stat { padding: 20px 8px; } .job-grid, .column-grid, .browse-cols { grid-template-columns: 1fr; } .browse-panel + .browse-panel { border-left: none; } .flow-grid { grid-template-columns: 1fr; } .flow-step { border-left: none; padding: 0 0 34px; } .footer-grid { grid-template-columns: 1fr; } .section { padding: 70px 0; } .reason-item { grid-template-columns: 60px 1fr; } } /* ===== Subpages (v2) ===== */ .subpage-header { position: static; background: var(--ink); border-bottom: none; } .page-head { background: var(--paper); border-bottom: 1px solid var(--line); padding: 52px 0; } .breadcrumb { font-size: 12px; color: var(--muted); margin-bottom: 14px; letter-spacing: 0.06em; } .breadcrumb a:hover { color: var(--gold); } .page-head h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 3vw, 34px); color: var(--ink); letter-spacing: 0.05em; line-height: 1.6; } .page-head .count { font-size: 13.5px; color: var(--muted); margin-top: 10px; } .page-head .count b { color: var(--gold); font-size: 22px; font-family: var(--num); font-weight: 700; font-variant-numeric: tabular-nums; margin: 0 2px; } .jobs-layout { display: grid; grid-template-columns: 280px 1fr; gap: 48px; padding-top: 64px; padding-bottom: 100px; align-items: start; } .filter-panel { background: var(--white); border: 1px solid var(--line); padding: 30px 28px; position: sticky; top: 32px; } .filter-panel h2 { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: 20px; letter-spacing: 0.08em; } .filter-group { margin-bottom: 24px; } .filter-group h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--gold); margin-bottom: 12px; } .check-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; margin-bottom: 9px; cursor: pointer; } .check-item input { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; } .check-item small { color: var(--muted); font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 11px; } .job-list { display: flex; flex-direction: column; gap: 22px; } .job-row { background: var(--white); border: 1px solid var(--line); padding: 34px 38px; position: relative; transition: border-color 0.3s, box-shadow 0.3s; } .job-row:hover { border-color: var(--brass); box-shadow: 0 18px 44px rgba(11,27,43,0.10); } .job-row h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.7; color: var(--ink); margin-top: 12px; letter-spacing: 0.03em; } .job-row h3 a:hover { color: var(--gold); } .job-row .firm { font-size: 12.5px; color: var(--muted); margin-top: 6px; letter-spacing: 0.06em; } .job-row .meta-line { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; } .job-row .salary { font-weight: 700; color: var(--gold); } .job-row .salary .n { font-family: var(--num); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .job-row .desc { font-size: 13.5px; color: var(--muted); margin-top: 14px; line-height: 2; } .job-row .actions { display: flex; gap: 14px; margin-top: 20px; } /* カード全体をクリック範囲にする (タイトルのリンクを枠いっぱいに広げる) */ .job-card h3 a::after, .job-row h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; } .job-row .actions { position: relative; z-index: 2; } .job-row { cursor: pointer; } .sort-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; } .sort-bar .shown { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; } .sort-bar select { min-height: 42px; border: 1px solid var(--line); background: var(--white); padding: 6px 14px; font-family: var(--sans); font-size: 13px; } /* ページ送り: 1つ1つを押せるプレートに */ .pagination { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 52px; } .pagination a, .pagination .gap { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--en); font-size: 16px; border-radius: 3px; } .pagination a { background-color: #fff; color: var(--ink); border: 1px solid rgba(11,27,43,0.2); cursor: pointer; box-shadow: 0 6px 14px -10px rgba(11,27,43,0.55), 0 1px 2px rgba(11,27,43,0.05); transition: transform 0.24s cubic-bezier(.2,.6,.2,1), box-shadow 0.24s cubic-bezier(.2,.6,.2,1), background-color 0.24s, color 0.24s, border-color 0.24s; } .pagination a:hover { background-color: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 24px -14px rgba(11,27,43,0.75); } .pagination a:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(0,0,0,0.4); transition-duration: 0.08s; } .pagination a:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; } .pagination .current { background-image: linear-gradient(180deg, #17324C 0%, #0B1B2B 100%); color: #fff; border-color: rgba(4,12,20,0.9); cursor: default; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 18px -10px rgba(11,27,43,0.85); } .pagination .current:hover { transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 18px -10px rgba(11,27,43,0.85); } .pagination .gap { color: var(--muted); min-width: 24px; letter-spacing: 0.1em; } /* 「次へ」は矢印を描画して文字のシェブロンを置き換える */ .pagination .nav-next { min-width: 74px; gap: 0; } .pagination .nav-next::after { content: ''; width: 22px; height: 7px; background-color: currentColor; -webkit-mask: var(--arw) no-repeat center / contain; mask: var(--arw) no-repeat center / contain; transition: transform 0.3s cubic-bezier(.2,.6,.2,1); } .pagination .nav-next:hover::after { transform: translateX(4px); } .detail-layout { display: grid; grid-template-columns: 1fr 320px; gap: 56px; padding-top: 64px; padding-bottom: 100px; align-items: start; } .detail-main .job-title-block { border-bottom: 1px solid var(--ink); padding-bottom: 30px; margin-bottom: 44px; } .detail-main h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 3vw, 32px); color: var(--ink); line-height: 1.7; margin: 16px 0 12px; letter-spacing: 0.04em; } .detail-main .firm { color: var(--muted); font-size: 13.5px; letter-spacing: 0.04em; } .detail-sec { margin-bottom: 54px; } .detail-sec h2 { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 22px; letter-spacing: 0.06em; display: flex; align-items: center; gap: 16px; } .detail-sec h2::after { content: ''; flex: 1; height: 1px; background: var(--line); } .detail-sec p { font-size: 14.5px; margin-bottom: 14px; line-height: 2.1; } .detail-sec > ul:not([class]) { margin: 0 0 14px; padding: 0; list-style: none; } .detail-sec > ul:not([class]) li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 2.1; } .detail-sec > ul:not([class]) li + li { margin-top: 10px; } .detail-sec > ul:not([class]) li::before { content: ''; position: absolute; left: 2px; top: 0.95em; width: 6px; height: 6px; background: var(--gold); } .spec-table { width: 100%; border-collapse: collapse; font-size: 14px; border-top: 1px solid var(--line); } .spec-table th, .spec-table td { border-bottom: 1px solid var(--line); padding: 18px 6px 18px 0; text-align: left; vertical-align: top; } .spec-table th { color: var(--gold); width: 150px; font-weight: 700; font-size: 12.5px; letter-spacing: 0.14em; } .spec-table td ul { list-style: none; } .spec-table td li { margin-bottom: 6px; padding-left: 18px; position: relative; } .spec-table td li::before { content: ''; position: absolute; left: 0; top: 0.9em; width: 8px; height: 1px; background: var(--brass); } .apply-card { background: var(--ink); color: #fff; padding: 34px 30px; position: sticky; top: 32px; text-align: center; } .apply-card .salary-line { font-size: 11.5px; letter-spacing: 0.22em; color: var(--brass); margin-bottom: 6px; } .apply-card .salary-val { font-family: var(--serif); font-size: 28px; font-weight: 700; letter-spacing: 0.02em; color: #fff; margin-bottom: 22px; } .apply-card .salary-val small { font-family: var(--serif); font-weight: 600; font-size: 15px; } .apply-card .btn { width: 100%; margin-bottom: 12px; } .apply-card .note { font-size: 11.5px; color: rgba(255,255,255,0.6); line-height: 1.9; margin-top: 6px; } .related h2 { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 26px; letter-spacing: 0.06em; } @media (max-width: 1024px) { .jobs-layout { grid-template-columns: 1fr; } .filter-panel { position: static; } .detail-layout { grid-template-columns: 1fr; } .apply-card { position: static; } } @media (max-width: 720px) { .job-row { padding: 26px 22px; } .spec-table th { width: 110px; } } /* ===== v3 sections ===== */ .manifesto-statement { font-family: var(--serif); font-weight: 600; font-size: clamp(21px, 2.6vw, 32px); line-height: 2.1; letter-spacing: 0.08em; color: var(--ink); max-width: 800px; } .manifesto-body { font-size: 14.5px; color: var(--muted); line-height: 2.3; max-width: 680px; margin-top: 28px; } .principles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 64px; } .principle { padding: 36px 38px; border-left: 1px solid var(--line); } .principle:first-child { border-left: none; padding-left: 0; } .principle .p-no { font-family: var(--en); font-style: italic; font-size: 30px; color: var(--brass); display: block; margin-bottom: 14px; } .principle h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 10px; letter-spacing: 0.05em; } .principle p { font-size: 13px; color: var(--muted); line-height: 2; } .anatomy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; margin-top: 10px; } .sheet { background: var(--white); border: 1px solid var(--line); padding: 36px 38px; box-shadow: 0 18px 44px rgba(11,27,43,0.08); } .sheet-head { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); padding-bottom: 16px; border-bottom: 1px solid var(--ink); margin-bottom: 4px; letter-spacing: 0.05em; } .sheet-row { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .sheet-row:last-child { border-bottom: none; } .sheet-row .k { color: var(--gold); font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; width: 92px; flex-shrink: 0; } .sheet-row .v { flex: 1; line-height: 1.9; } .a-no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--brass); border-radius: 50%; font-family: var(--en); font-size: 13px; color: var(--gold); flex-shrink: 0; transform: translateY(3px); } .anno-list { margin-top: 6px; } .anno-item { display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); } .anno-item:first-child { padding-top: 0; } .anno-item .a-no { width: 30px; height: 30px; font-size: 14.5px; transform: none; } .anno-item h3 { font-family: var(--serif); font-size: 16.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; letter-spacing: 0.04em; } .anno-item p { font-size: 13px; color: var(--muted); line-height: 2; } .anatomy-note { margin-top: 26px; font-size: 12.5px; color: var(--muted); border-left: 2px solid var(--brass); padding-left: 16px; line-height: 2; } .doors { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 60px; } .door { padding: 8px 44px 0; border-left: 1px solid var(--line-dark); } .door:first-child { border-left: none; padding-left: 0; } .door .door-no { font-family: var(--en); font-style: italic; font-size: 38px; color: var(--brass); display: block; margin-bottom: 18px; } .door h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 14px; letter-spacing: 0.05em; line-height: 1.7; } .door p { font-size: 13px; color: rgba(255,255,255,0.66); line-height: 2.1; margin-bottom: 22px; } .door a { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--brass); border-bottom: 1px solid var(--brass); padding-bottom: 5px; transition: color 0.2s; } .door a:hover { color: #E0C88A; } .door a::after { content: '\2192'; font-family: var(--en); } .about-grid { display: grid; grid-template-columns: 1fr 380px; gap: 70px; align-items: start; } .about-copy { font-family: var(--serif); font-weight: 600; font-size: clamp(19px, 2.2vw, 26px); color: var(--ink); line-height: 2.1; letter-spacing: 0.06em; } .about-body { font-size: 14px; color: var(--muted); line-height: 2.3; margin-top: 24px; } .about-table { width: 100%; border-collapse: collapse; font-size: 13.5px; border-top: 1px solid var(--line); } .about-table th, .about-table td { border-bottom: 1px solid var(--line); padding: 15px 4px 15px 0; text-align: left; vertical-align: top; } .about-table th { color: var(--gold); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; width: 96px; } @media (max-width: 1024px) { .anatomy-grid { grid-template-columns: 1fr; gap: 44px; } .about-grid { grid-template-columns: 1fr; gap: 40px; } .doors { grid-template-columns: 1fr; gap: 44px; } .door { border-left: none; padding: 0; } } @media (max-width: 720px) { .principles { grid-template-columns: 1fr; } .principle { border-left: none; padding: 28px 0; border-bottom: 1px solid var(--line); } .principle:last-child { border-bottom: none; } } /* ===== v3 compare ===== */ .compare-scroll { overflow-x: auto; } .compare-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13.5px; background: var(--white); } .compare-table th, .compare-table td { border: 1px solid var(--line); padding: 16px 20px; text-align: center; vertical-align: middle; line-height: 1.8; } .compare-table thead th { font-family: var(--serif); font-size: 14.5px; font-weight: 600; color: var(--ink); background: var(--paper); letter-spacing: 0.04em; } .compare-table thead th.hl { background: var(--ink); color: #fff; border-top: 3px solid var(--brass); border-left: 2px solid var(--brass); border-right: 2px solid var(--brass); } .compare-table thead th.hl small { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 500; color: var(--brass); letter-spacing: 0.16em; margin-top: 4px; } .compare-table tbody th { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); background: var(--paper); text-align: left; width: 150px; } .compare-table tbody td.hl { background: #F5EEDC; font-weight: 700; color: var(--ink); border-left: 2px solid var(--brass); border-right: 2px solid var(--brass); } .compare-table tbody tr:last-child td.hl { border-bottom: 2px solid var(--brass); } .compare-table .mark { font-family: var(--serif); font-size: 17px; display: block; margin-bottom: 2px; color: var(--ink); } .compare-table td.hl .mark { color: var(--gold); } .compare-table td small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 4px; } .compare-note { margin-top: 30px; font-size: 13.5px; color: var(--muted); line-height: 2.2; border-left: 2px solid var(--brass); padding-left: 18px; max-width: 720px; } /* ===== v4 (No-Limit同一構成版) ===== */ .hero-ctas { display: flex; gap: 18px; margin-top: 34px; flex-wrap: wrap; } .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .case-card { background: var(--white); border: 1px solid var(--line); padding: 30px 32px; } .case-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 14px; display: block; } .case-move { font-family: var(--serif); font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.9; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; } .case-move .arr { color: var(--brass); font-family: var(--en); padding: 0 6px; } .case-card p { font-size: 13px; color: var(--muted); line-height: 2; } .case-card .who { font-size: 12px; color: var(--muted); margin-top: 14px; letter-spacing: 0.06em; } .case-up { color: var(--gold); font-weight: 700; } .advisor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; } .advisor { background: var(--white); border: 1px solid var(--line); padding: 34px; display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: start; } .advisor img { width: 160px; height: 200px; object-fit: cover; filter: saturate(0.85); } .advisor .en-name { font-family: var(--en); font-size: 12px; letter-spacing: 0.22em; color: var(--gold); display: block; margin-bottom: 6px; } .advisor h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 12px; letter-spacing: 0.06em; } .advisor p { font-size: 13px; color: var(--muted); line-height: 2.1; } .voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .voice { background: var(--white); border: 1px solid var(--line); padding: 32px; position: relative; } .voice::before { content: '\201C'; font-family: var(--en); font-size: 64px; line-height: 1; color: var(--brass); position: absolute; top: 18px; left: 24px; opacity: 0.5; } .voice p { font-size: 13.5px; line-height: 2.1; margin-top: 30px; } .voice .who { font-size: 12px; color: var(--muted); margin-top: 16px; letter-spacing: 0.06em; border-top: 1px solid var(--line); padding-top: 14px; } .trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; } .trend-item { display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 30px 0; border-bottom: 1px solid var(--line); } .trend-no { font-family: var(--en); font-size: 30px; color: transparent; -webkit-text-stroke: 1px var(--gold); line-height: 1.2; } .trend-item h3 { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: 0.04em; } .trend-item p { font-size: 13px; color: var(--muted); line-height: 2; } .knowhow-grid { display: grid; grid-template-columns: 300px 1fr; gap: 60px; align-items: start; } .cat-list { display: flex; flex-direction: column; } .cat-list a { display: flex; justify-content: space-between; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--text); transition: color 0.2s; } .cat-list a:hover { color: var(--gold); } .cat-list a::after { content: '\2192'; font-family: var(--en); color: var(--brass); } .article-list { display: flex; flex-direction: column; } .article-list a { display: grid; grid-template-columns: 100px 1fr; gap: 22px; padding: 17px 4px; border-bottom: 1px solid var(--line); font-size: 14px; align-items: baseline; transition: color 0.2s; } .article-list a:hover { color: var(--gold); } .article-list time { font-family: var(--en); font-size: 12.5px; color: var(--muted); letter-spacing: 0.08em; } .confidence { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; } .conf-item { padding: 8px 40px 0; border-left: 1px solid var(--line-dark); } .conf-item:first-child { border-left: none; padding-left: 0; } .conf-item h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 12px; letter-spacing: 0.05em; } .conf-item p { font-size: 13px; color: rgba(255,255,255,0.66); line-height: 2.1; } @media (max-width: 1024px) { .case-grid, .voice-grid { grid-template-columns: 1fr 1fr; } .advisor-grid { grid-template-columns: 1fr; } .trend-grid { grid-template-columns: 1fr; } .knowhow-grid { grid-template-columns: 1fr; gap: 36px; } .confidence { grid-template-columns: 1fr; gap: 36px; } .conf-item { border-left: none; padding: 0; } } @media (max-width: 720px) { .case-grid, .voice-grid { grid-template-columns: 1fr; } .advisor { grid-template-columns: 1fr; } .advisor img { width: 100%; height: 240px; } } /* ===== v4 rich ===== */ /* hero motion */ .hero-bg { animation: kenburns 16s cubic-bezier(.2,.5,.3,1) both; will-change: transform; } @keyframes kenburns { from { transform: scale(1.1) translateY(-8px); } to { transform: scale(1); } } .hero-lead, .hero h1 { animation: rise 1s 0.15s cubic-bezier(.2,.6,.2,1) both; } .hero-sub { animation: rise 1s 0.4s cubic-bezier(.2,.6,.2,1) both; } .hero-ctas { animation: rise 1s 0.65s cubic-bezier(.2,.6,.2,1) both; } .hero-side { animation: fadein 1.6s 1s both; } @keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* textures */ .section.paper { background-image: radial-gradient(rgba(11,27,43,0.05) 1px, transparent 1px); background-size: 22px 22px; } .section.dark { background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 14px), linear-gradient(160deg, #0B1B2B 0%, #10253C 100%); } .cta-band .cta-bg { background-attachment: fixed; } /* icons */ .p-ico, .flow-ico, .conf-ico { width: 58px; height: 58px; border: 1px solid var(--brass); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); margin-bottom: 18px; background: rgba(194,164,93,0.07); } .conf-ico { border-color: rgba(194,164,93,0.6); color: var(--brass); background: rgba(194,164,93,0.1); } /* card hover lift */ .job-card, .case-card, .voice, .advisor, .column-card { transition: transform 0.35s cubic-bezier(.2,.6,.2,1), box-shadow 0.35s, border-color 0.35s; } .job-card:hover, .case-card:hover, .voice:hover, .advisor:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(11,27,43,0.12); border-color: var(--brass); } .column-card:hover { transform: translateY(-5px); } /* gold corner ornament */ .advisor, .voice, .case-card { position: relative; } .advisor::after, .voice::after, .case-card::after { content: ''; position: absolute; top: -1px; left: -1px; width: 26px; height: 26px; border-top: 2px solid var(--brass); border-left: 2px solid var(--brass); pointer-events: none; } /* stagger reveal */ .job-grid .rv:nth-child(2), .principles .rv:nth-child(2), .case-grid .rv:nth-child(2), .voice-grid .rv:nth-child(2), .column-grid .rv:nth-child(2), .flow-grid .rv:nth-child(2) { transition-delay: 0.12s; } .job-grid .rv:nth-child(3), .principles .rv:nth-child(3), .case-grid .rv:nth-child(3), .voice-grid .rv:nth-child(3), .column-grid .rv:nth-child(3), .flow-grid .rv:nth-child(3) { transition-delay: 0.24s; } .job-grid .rv:nth-child(4), .flow-grid .rv:nth-child(4) { transition-delay: 0.36s; } /* photo band divider */ .photo-band { height: 340px; background-size: cover; background-position: center; background-attachment: fixed; position: relative; } .photo-band::after { content: ''; position: absolute; inset: 0; background: rgba(11,27,43,0.35); } .photo-band .caption { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; font-family: var(--serif); font-weight: 600; font-size: clamp(19px, 2.4vw, 28px); color: #fff; letter-spacing: 0.28em; text-shadow: 0 2px 18px rgba(11,27,43,0.6); white-space: nowrap; } /* marquee */ .marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 30px 0; background: var(--paper); } .marquee-track { display: flex; gap: 70px; width: max-content; animation: slide 38s linear infinite; } .marquee-track span { font-family: var(--serif); font-weight: 700; font-size: 34px; letter-spacing: 0.16em; color: var(--ink); white-space: nowrap; } .marquee-track span.fill { font-family: var(--en); color: var(--gold); letter-spacing: 0.1em; } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* buttons shine */ .btn-gold { position: relative; overflow: hidden; } .btn-gold::before { content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.38), transparent); transform: skewX(-20deg); transition: left 0.6s; pointer-events: none; } .btn-gold:hover::before { left: 130%; } /* section number pulse line */ .sec-no::after { transition: width 0.8s cubic-bezier(.2,.6,.2,1); } .rv.in .sec-no::after { width: 64px; } @media (max-width: 1024px) { .photo-band, .cta-band .cta-bg { background-attachment: scroll; } .photo-band { height: 220px; } .marquee-track span { font-size: 28px; } } @media (prefers-reduced-motion: reduce) { .hero-bg, .hero-lead, .hero h1, .hero-sub, .hero-ctas, .hero-side { animation: none; } .marquee-track { animation: none; } } /* ===== job tabs ===== */ .tabs { display: flex; gap: 34px; border-bottom: 1px solid var(--line); margin-bottom: 30px; } .tab-btn { font-family: var(--serif); font-weight: 600; font-size: 16.5px; letter-spacing: 0.06em; color: var(--muted); background: none; border: none; padding: 0 6px 16px; cursor: pointer; position: relative; transition: color 0.25s; } .tab-btn:hover { color: var(--ink); } .tab-btn:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; } .tab-btn::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -1px; height: 2px; background: var(--brass); transition: right 0.35s cubic-bezier(.2,.6,.2,1); } .tab-btn.active { color: var(--ink); } .tab-btn.active::after { right: 0; } .tab-panel { display: none; } .tab-panel.active { display: grid; animation: tabfade 0.5s cubic-bezier(.2,.6,.2,1); } @keyframes tabfade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ===== prefecture map ===== */ .map-panel h3 { margin-bottom: 18px; } .jp-map { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; } .jp-map path { fill: #E7E1D3; stroke: #FFFFFF; stroke-width: 0.8; cursor: pointer; transition: fill 0.2s; } .jp-map path:hover, .jp-map path:focus { fill: var(--brass); outline: none; } .map-info { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; } .map-pref { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: 0.06em; } .map-count { font-family: var(--en); font-size: 15px; color: var(--gold); } .map-count b { font-size: 22px; font-weight: 500; } .map-hint { font-size: 11.5px; color: var(--muted); margin-top: 10px; } /* ===== category tiles ===== */ .cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .cat-tile { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 8/5; cursor: pointer; transition: border-color 0.25s, box-shadow 0.3s; } .cat-tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8); transition: transform 0.7s cubic-bezier(.2,.6,.2,1); } .cat-tile .t-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(11,27,43,0.28), rgba(11,27,43,0.62)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: background-color 0.3s; } .cat-tile .t-label { font-family: var(--serif); font-size: 14px; font-weight: 600; color: #fff; letter-spacing: 0.08em; text-shadow: 0 1px 8px rgba(11,27,43,0.6); } .cat-tile .t-count { font-family: var(--en); font-size: 12.5px; color: var(--brass); } .cat-tile:hover { border-color: var(--brass); box-shadow: 0 14px 30px rgba(11,27,43,0.14); } .cat-tile:hover img { transform: scale(1.07); } @media (max-width: 720px) { .cat-grid { gap: 8px; } } /* ===== merit photo cards ===== */ .merit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .merit-card { background: var(--white); border: 1px solid var(--line); overflow: hidden; position: relative; transition: transform 0.35s cubic-bezier(.2,.6,.2,1), box-shadow 0.35s, border-color 0.35s; } .merit-card:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(11,27,43,0.12); border-color: var(--brass); } .merit-thumb { aspect-ratio: 16/9; overflow: hidden; position: relative; } .merit-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82); transition: transform 0.8s cubic-bezier(.2,.6,.2,1); } .merit-card:hover .merit-thumb img { transform: scale(1.06); } .merit-thumb .m-no { position: absolute; left: 16px; top: 12px; font-family: var(--en); font-style: italic; font-size: 40px; color: #fff; text-shadow: 0 2px 14px rgba(11,27,43,0.55); line-height: 1; } .merit-body { padding: 34px 28px 30px; } .merit-body h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 12px; letter-spacing: 0.05em; line-height: 1.7; } .merit-body p { font-size: 13.5px; color: var(--muted); line-height: 2.1; } @media (max-width: 1024px) { .merit-grid { grid-template-columns: 1fr; } } /* ===== merit rows (拡充版) ===== */ .merit-rows { display: flex; flex-direction: column; } .m-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; padding: 64px 0; border-bottom: 1px solid var(--line); } .m-row:first-child { padding-top: 12px; } .m-row:last-child { border-bottom: none; padding-bottom: 12px; } .m-row.rev .m-photo { order: 2; } .m-row.rev .m-copy { order: 1; } .m-photo { position: relative; } .m-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: saturate(0.85); display: block; } .m-photo::after { content: ''; position: absolute; top: 18px; left: 18px; right: -18px; bottom: -18px; border: 1px solid rgba(180,138,60,0.45); pointer-events: none; } .m-row.rev .m-photo::after { left: -18px; right: 18px; } .m-copy .m-num { font-family: var(--en); font-style: italic; font-size: 60px; color: transparent; -webkit-text-stroke: 1px var(--brass); line-height: 1; display: block; margin-bottom: 18px; } .m-copy h3 { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; color: var(--ink); line-height: 1.7; letter-spacing: 0.05em; margin-bottom: 18px; } .m-copy .m-lead { font-size: 14.5px; color: var(--text); line-height: 2.2; margin-bottom: 22px; } .m-list { display: flex; flex-direction: column; gap: 12px; } .m-list li { position: relative; padding-left: 26px; font-size: 13.5px; color: var(--muted); line-height: 1.9; } .m-list li::before { content: ''; position: absolute; left: 0; top: 0.85em; width: 14px; height: 1px; background: var(--brass); } @media (max-width: 1024px) { .m-row { grid-template-columns: 1fr; gap: 44px; padding: 48px 0; } .m-row.rev .m-photo { order: 0; } .m-row.rev .m-copy { order: 1; } } /* ===== case list (成功事例) ===== */ .case-list { border-top: 1px solid var(--line); } .case-row { display: grid; grid-template-columns: 190px 1.2fr 1fr; gap: 40px; padding: 36px 0; border-bottom: 1px solid var(--line); align-items: center; } .case-row .c-who .case-tag { margin-bottom: 8px; } .case-row .c-who .who { font-size: 12.5px; color: var(--muted); letter-spacing: 0.04em; line-height: 1.9; } .c-move .path { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.9; letter-spacing: 0.03em; } .c-move .path .arr { color: var(--brass); font-family: var(--en); padding: 0 10px; } .c-move .salary-change { margin-top: 10px; display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--num); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--gold); border-top: 1px solid var(--line); padding-top: 10px; } .c-move .salary-change .lbl { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--muted); } .case-row .c-desc { font-size: 13px; color: var(--muted); line-height: 2.1; } @media (max-width: 1024px) { .case-row { grid-template-columns: 1fr; gap: 14px; } } /* ===== voice carousel (弁護士の声) ===== */ .voice-slider { position: relative; max-width: 800px; margin: 0 auto; text-align: center; } .voice-slide { display: none; } .voice-slide.active { display: block; animation: tabfade 0.6s cubic-bezier(.2,.6,.2,1); } .voice-slide .q-mark { font-family: var(--en); font-size: 90px; line-height: 0.6; color: var(--brass); opacity: 0.55; display: block; margin-bottom: 26px; } .voice-slide blockquote { font-family: var(--serif); font-weight: 600; font-size: clamp(17px, 2vw, 21px); color: var(--ink); line-height: 2.2; letter-spacing: 0.05em; margin: 0 0 28px; } .voice-slide .who { font-size: 12.5px; color: var(--muted); letter-spacing: 0.12em; display: inline-flex; align-items: center; gap: 14px; } .voice-slide .who::before { content: ''; width: 34px; height: 1px; background: var(--brass); } .voice-dots { display: flex; justify-content: center; gap: 12px; margin-top: 38px; } .voice-dots button { width: 34px; height: 3px; border: none; background: var(--line); cursor: pointer; padding: 0; transition: background-color 0.3s; } .voice-dots button.active { background: var(--brass); } .voice-dots button:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } /* ===== case faces ===== */ .case-row { grid-template-columns: 240px 1.15fr 1fr; } .c-who { display: flex; gap: 16px; align-items: center; } .c-face { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; filter: saturate(0.85); border: 1px solid var(--brass); padding: 3px; background: var(--white); flex-shrink: 0; } /* ===== column feature layout (timepage型) ===== */ .col-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: start; } .col-main { cursor: pointer; } .col-main .main-thumb { aspect-ratio: 16/9; overflow: hidden; margin-bottom: 24px; } .col-main .main-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 0.8s cubic-bezier(.2,.6,.2,1); } .col-main:hover .main-thumb img { transform: scale(1.05); } .col-main .cat { font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; color: var(--gold); } .col-main h3 { font-family: var(--serif); font-size: clamp(19px, 2.1vw, 24px); font-weight: 600; line-height: 1.8; margin: 12px 0 14px; color: var(--ink); letter-spacing: 0.04em; transition: color 0.2s; } .col-main:hover h3 { color: var(--gold); } .col-main .excerpt { font-size: 13.5px; color: var(--muted); line-height: 2.1; margin-bottom: 14px; } .col-main time { font-family: var(--en); font-size: 12.5px; letter-spacing: 0.14em; color: var(--muted); } .col-side { display: flex; flex-direction: column; } .col-item { display: grid; grid-template-columns: 116px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: center; cursor: pointer; } .col-item:first-child { padding-top: 0; } .col-item .thumb { aspect-ratio: 4/3; overflow: hidden; } .col-item .thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 0.6s cubic-bezier(.2,.6,.2,1); } .col-item:hover .thumb img { transform: scale(1.08); } .col-item .cat { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--gold); } .col-item h4 { font-family: var(--serif); font-size: 14.5px; font-weight: 600; line-height: 1.75; color: var(--ink); margin: 5px 0 6px; letter-spacing: 0.03em; transition: color 0.2s; } .col-item:hover h4 { color: var(--gold); } .col-item time { font-family: var(--en); font-size: 11.5px; letter-spacing: 0.12em; color: var(--muted); } @media (max-width: 1024px) { .col-layout { grid-template-columns: 1fr; gap: 40px; } } /* ===== case wall (引用の壁) ===== */ .wall-wrap { max-width: 1360px; margin: 0 auto; padding: 0 24px; } .case-wall { column-count: 3; column-gap: 22px; } .wall-tile { break-inside: avoid; background: var(--white); border: 1px solid var(--line); padding: 26px 28px; margin-bottom: 22px; position: relative; transition: border-color 0.3s, box-shadow 0.3s; } .wall-tile:hover { border-color: var(--brass); box-shadow: 0 14px 32px rgba(11,27,43,0.1); } .wall-tile::after { content: ''; position: absolute; top: -1px; left: -1px; width: 22px; height: 22px; border-top: 2px solid var(--brass); border-left: 2px solid var(--brass); pointer-events: none; } .wall-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .wall-face { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; filter: saturate(0.85); border: 1px solid var(--brass); padding: 2px; background: var(--white); flex-shrink: 0; } .wall-who { font-size: 11.5px; color: var(--muted); letter-spacing: 0.05em; line-height: 1.7; } .wall-move { font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.8; } .wall-move .arr { color: var(--brass); font-family: var(--en); padding: 0 6px; } .wall-quote { font-size: 13px; color: var(--text); line-height: 2; margin-top: 12px; } .wall-quote::before { content: '\201C'; font-family: var(--en); color: var(--brass); font-size: 20px; margin-right: 4px; } .wall-gain { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--en); font-size: 14px; color: var(--gold); } .wall-gain .lbl { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--muted); margin-right: 8px; } @media (max-width: 1024px) { .case-wall { column-count: 2; } } @media (max-width: 720px) { .case-wall { column-count: 1; } } /* ===== case carousel (two-chairs型) ===== */ .case-hero { position: relative; max-width: 900px; margin: 0 auto 64px; text-align: center; padding: 0 70px; } .cs-slide { display: none; } .cs-slide.active { display: block; animation: tabfade 0.6s cubic-bezier(.2,.6,.2,1); } .cs-slide .wall-face { width: 76px; height: 76px; margin: 0 auto 16px; display: block; } .cs-slide .cs-who { font-size: 12px; color: var(--muted); letter-spacing: 0.1em; margin-bottom: 18px; } .cs-slide blockquote { font-family: var(--serif); font-weight: 600; font-size: clamp(18px, 2.2vw, 24px); color: var(--ink); line-height: 2; letter-spacing: 0.05em; margin: 0 0 22px; } .cs-slide blockquote::before { content: '\201C'; font-family: var(--en); color: var(--brass); font-size: 34px; margin-right: 6px; } .cs-slide .cs-move { font-family: var(--serif); font-size: 15.5px; font-weight: 600; color: var(--ink); } .cs-slide .cs-move .arr { color: var(--brass); font-family: var(--en); padding: 0 8px; } .cs-slide .cs-gain { display: inline-block; margin-top: 12px; font-family: var(--en); font-size: 16px; color: var(--gold); border-top: 1px solid var(--line); padding-top: 12px; } .cs-slide .cs-gain .lbl { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--muted); margin-right: 8px; } .cs-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--brass); background: var(--white); color: var(--gold); font-family: var(--en); font-size: 20px; cursor: pointer; transition: background-color 0.25s, color 0.25s; z-index: 2; } .cs-arrow:hover { background: var(--brass); color: var(--ink); } .cs-arrow:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; } .cs-arrow.prev { left: 0; } .cs-arrow.next { right: 0; } .cs-dots { display: flex; justify-content: center; gap: 12px; margin-top: 30px; } .cs-dots button { width: 34px; height: 3px; border: none; background: var(--line); cursor: pointer; padding: 0; transition: background-color 0.3s; } .cs-dots button.active { background: var(--brass); } .cs-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .cs-cat { background: var(--white); border: 1px solid var(--line); padding: 30px 32px; position: relative; transition: border-color 0.3s, box-shadow 0.3s; } .cs-cat::after { content: ''; position: absolute; top: -1px; left: -1px; width: 22px; height: 22px; border-top: 2px solid var(--brass); border-left: 2px solid var(--brass); pointer-events: none; } .cs-cat:hover { border-color: var(--brass); box-shadow: 0 14px 32px rgba(11,27,43,0.1); } .cs-cat h3 { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 10px; letter-spacing: 0.05em; } .cs-cat p { font-size: 13px; color: var(--muted); line-height: 2; margin-bottom: 16px; } .cs-cat a { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); border-bottom: 1px solid var(--brass); padding-bottom: 3px; transition: color 0.2s; } .cs-cat a:hover { color: var(--accent-dark); } @media (max-width: 720px) { .case-hero { padding: 0 8px 60px; } .cs-arrow { display: none; } .cs-cats { grid-template-columns: 1fr; } } /* ===== advisor M案 (大判セピア写真+ローマ字名) ===== */ .advisor.adv-final { padding: 0; overflow: hidden; grid-template-columns: 210px 1fr; gap: 0; border: 1px solid var(--line); } .advisor.adv-final::after { display: none; } .advisor.adv-final img { width: 210px; height: 100%; min-height: 250px; object-fit: cover; } .advisor.adv-final .txt { padding: 36px 34px; } .advisor.adv-final .en-name { font-size: 12px; letter-spacing: 0.26em; } .advisor.adv-final h3 { padding-bottom: 12px; border-bottom: 1px solid var(--brass); display: inline-block; margin-bottom: 14px; } @media (max-width: 720px) { .advisor.adv-final { grid-template-columns: 1fr; } .advisor.adv-final img { width: 100%; height: 220px; min-height: 0; } } /* ===== case entry grid (記事入口型) ===== */ .case-entries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .case-entry { display: block; background: var(--white); border: 1px solid var(--line); padding: 26px 28px; position: relative; transition: border-color 0.3s, box-shadow 0.3s, transform 0.35s cubic-bezier(.2,.6,.2,1); cursor: pointer; } .case-entry::after { content: ''; position: absolute; top: -1px; left: -1px; width: 22px; height: 22px; border-top: 2px solid var(--brass); border-left: 2px solid var(--brass); pointer-events: none; } .case-entry:hover { border-color: var(--brass); box-shadow: 0 18px 40px rgba(11,27,43,0.11); transform: translateY(-4px); } .ce-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .ce-face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--brass); padding: 2px; background: var(--white); flex-shrink: 0; } .ce-tags { display: flex; flex-wrap: wrap; gap: 6px; } .ce-tags span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; border: 1px solid var(--line); color: var(--muted); padding: 3px 10px; } .case-entry h3 { font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.8; color: var(--ink); letter-spacing: 0.03em; transition: color 0.2s; } .case-entry:hover h3 { color: var(--gold); } .ce-meta { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; } .ce-meta .who { font-size: 11.5px; color: var(--muted); letter-spacing: 0.04em; } .ce-meta .gain { font-family: var(--en); font-size: 13.5px; color: var(--gold); } .ce-more-wrap { text-align: center; margin-top: 44px; } @media (max-width: 1024px) { .case-entries { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .case-entries { grid-template-columns: 1fr; } } /* ===== case entry 誌面風 (案7採用版) ===== */ .case-entry.ce-mag { padding: 0; overflow: hidden; } .case-entry.ce-mag::after { display: none; } .ce-mag .ph { display: block; position: relative; aspect-ratio: 3/2; overflow: hidden; } .ce-mag .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(.2,.6,.2,1); } .ce-mag:hover .ph img { transform: scale(1.05); } .ce-mag .ph::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,0.55); pointer-events: none; } .ce-mag .ph .ce-tags { position: absolute; left: 18px; bottom: 14px; display: flex; flex-direction: row; gap: 6px; z-index: 1; } .ce-mag .ph .ce-tags span { background: rgba(11,27,43,0.72); border: none; color: #E8DDBE; } .ce-mag .body { display: block; padding: 24px 26px 26px; } .ce-mag .ce-meta { margin-top: 14px; } /* ===== voices エディトリアル (案2採用版) ===== */ .v-editorial { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: start; } .v-ed-main .q { font-family: var(--en); font-size: 84px; line-height: 0.6; color: var(--brass); opacity: 0.6; display: block; margin-bottom: 24px; } .v-ed-main blockquote { font-family: var(--serif); font-weight: 600; font-size: clamp(19px, 2.2vw, 25px); color: var(--ink); line-height: 2.1; letter-spacing: 0.05em; margin: 0 0 22px; } .v-ed-main .who { font-size: 12.5px; color: var(--muted); letter-spacing: 0.12em; display: inline-flex; align-items: center; gap: 14px; } .v-ed-main .who::before { content: ''; width: 34px; height: 1px; background: var(--brass); } .v-ed-side .item { border-top: 1px solid var(--line); padding: 22px 4px; } .v-ed-side .item:last-child { border-bottom: 1px solid var(--line); } .v-ed-side p { font-family: var(--serif); font-size: 14.5px; color: var(--text); line-height: 2; } .v-ed-side .who { display: block; margin-top: 10px; font-size: 11.5px; color: var(--muted); letter-spacing: 0.1em; } @media (max-width: 1024px) { .v-editorial { grid-template-columns: 1fr; gap: 40px; } } /* ===== 成功ポイント 縦タイムライン ===== */ .tl { position: relative; max-width: 860px; } .tl::before { content: ''; position: absolute; left: 31px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--brass), rgba(180,138,60,0.25)); } .tl-item { position: relative; display: grid; grid-template-columns: 96px 1fr; padding-bottom: 52px; } .tl-item:last-child { padding-bottom: 0; } .tl-no { position: relative; width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--brass); background: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--en); font-style: italic; font-size: 22px; color: var(--gold); z-index: 1; } .tl-body h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: 0.05em; line-height: 1.7; margin: 14px 0 12px; } .tl-body p { font-size: 14px; color: var(--muted); line-height: 2.15; max-width: 640px; } .tl-body .tl-tip { margin-top: 12px; font-size: 12.5px; color: var(--text); border-left: 2px solid var(--brass); padding-left: 14px; line-height: 2; } @media (max-width: 720px) { .tl::before { left: 23px; } .tl-item { grid-template-columns: 70px 1fr; padding-bottom: 40px; } .tl-no { width: 46px; height: 46px; font-size: 17px; } } /* ===== 動向 イラスト型 ===== */ .trend-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 60px; } .trend-card { display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: center; } .trend-ill { aspect-ratio: 17/13; display: flex; align-items: center; justify-content: center; } .trend-ill svg { width: 92%; height: auto; transition: transform 0.4s cubic-bezier(.2,.6,.2,1); } .trend-card:hover .trend-ill svg { transform: translateY(-3px); } .trend-txt h3 { font-family: var(--serif); font-size: 17.5px; font-weight: 600; color: var(--ink); letter-spacing: 0.04em; line-height: 1.7; margin-bottom: 8px; } .trend-txt p { font-size: 13px; color: var(--muted); line-height: 2.05; } @media (max-width: 1024px) { .trend-grid2 { grid-template-columns: 1fr; } } @media (max-width: 720px) { .trend-card { grid-template-columns: 120px 1fr; gap: 18px; } } /* ===== FAQ smooth accordion ===== */ .faq-list summary { position: relative; padding-right: 60px; } .faq-list .tgl { position: absolute; right: 26px; top: 50%; width: 11px; height: 11px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: translateY(-72%) rotate(45deg); transition: transform 0.45s cubic-bezier(.2,.6,.2,1), border-color 0.3s; } .faq-list details.is-open .tgl { transform: translateY(-28%) rotate(225deg); } .faq-list summary:hover .tgl { border-color: var(--accent-dark); } .faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(.2,.6,.2,1); } .faq-a-inner { overflow: hidden; } .faq-list details.is-open .faq-a-wrap { grid-template-rows: 1fr; } /* ===== サポートの流れ STEPカード ===== */ .step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .step-card { background: var(--white); border: 1px solid var(--line); padding: 26px 22px 28px; text-align: center; position: relative; display: flex; flex-direction: column; transition: border-color 0.3s, box-shadow 0.3s; } .step-card::after { content: ''; position: absolute; top: -1px; left: -1px; width: 22px; height: 22px; border-top: 2px solid var(--brass); border-left: 2px solid var(--brass); pointer-events: none; } .step-card:hover { border-color: var(--brass); box-shadow: 0 14px 32px rgba(11,27,43,0.08); } .step-badge { display: inline-flex; align-items: baseline; gap: 6px; align-self: center; background: var(--ink); color: #fff; font-family: var(--en); font-size: 11px; letter-spacing: 0.22em; padding: 6px 18px; border-radius: 99px; } .step-badge b { font-size: 15px; font-weight: 500; color: var(--brass); } .step-card h3 { font-family: var(--serif); font-size: 16.5px; font-weight: 600; color: var(--ink); letter-spacing: 0.04em; margin: 16px 0 6px; } .step-ill { height: 120px; display: flex; align-items: center; justify-content: center; margin: 10px 0 12px; } .step-ill svg { height: 100%; width: auto; } .step-card p { font-size: 12.5px; color: var(--muted); line-height: 2; text-align: left; } .step-time { display: inline-flex; align-items: center; align-self: center; margin-top: auto; padding: 7px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--gold); background: rgba(194,164,93,0.12); border-radius: 99px; } @media (max-width: 1024px) { .step-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .step-grid { grid-template-columns: 1fr; } } /* ===== 自信 番号リスト型 ===== */ .conf-list { max-width: 880px; margin-top: 48px; } .conf-item { display: grid; grid-template-columns: 130px 1fr; gap: 30px; padding: 40px 0; border-bottom: 1px solid var(--line-dark); align-items: start; } .conf-item:first-child { padding-top: 0; } .conf-item:last-child { border-bottom: none; padding-bottom: 0; } .conf-no { font-family: var(--en); font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--brass); } .conf-item h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; color: #fff; letter-spacing: 0.05em; margin-bottom: 12px; line-height: 1.7; } .conf-item p { font-size: 13.5px; color: rgba(255,255,255,0.68); line-height: 2.15; max-width: 640px; } .gold-hl { color: var(--brass); font-weight: 700; } @media (max-width: 720px) { .conf-item { grid-template-columns: 76px 1fr; gap: 18px; } .conf-no { font-size: 42px; } } /* ===== 自信 SERVICE型 (透かし+互い違い写真) ===== */ .svc-head { position: relative; text-align: center; margin-bottom: 80px; } .svc-wm { display: block; font-family: var(--en); font-size: clamp(64px, 9vw, 128px); line-height: 1; letter-spacing: 0.06em; color: rgba(255,255,255,0.07); user-select: none; } .svc-title { position: relative; margin-top: -0.9em; font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 2.4vw, 28px); color: #fff; letter-spacing: 0.08em; line-height: 1.7; } .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px 70px; padding-bottom: 110px; } .svc-item { position: relative; } .svc-item:nth-child(even) { transform: translateY(110px); } .svc-no { position: relative; z-index: 2; display: block; font-family: var(--en); font-style: italic; font-size: 58px; font-weight: 500; color: #FFFFFF; line-height: 1; margin: 0 0 -30px -6px; text-shadow: 0 2px 14px rgba(8,20,33,0.5); } .svc-ph { aspect-ratio: 16/10; overflow: hidden; } .svc-ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 0.8s cubic-bezier(.2,.6,.2,1); } .svc-item:hover .svc-ph img { transform: scale(1.05); } .svc-txt { margin-top: 26px; border-left: 2px solid rgba(194,164,93,0.7); padding-left: 22px; } .svc-txt h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; color: #fff; letter-spacing: 0.05em; margin-bottom: 10px; line-height: 1.7; } .svc-txt p { font-size: 13px; color: rgba(255,255,255,0.68); line-height: 2.15; } @media (max-width: 1024px) { .svc-grid { grid-template-columns: 1fr; gap: 56px; padding-bottom: 0; } .svc-item:nth-child(even) { transform: none; } } /* ===== 自信 Our Strengths型 (抽象画背景+線画ダイアグラム) ===== */ .strength-art { position: relative; background-color: #0A1526; background-image: linear-gradient(100deg, rgba(9,19,35,0.97) 0%, rgba(9,19,35,0.92) 45%, rgba(10,22,40,0.72) 100%), url('https://images.unsplash.com/photo-1541961017774-22349e4a1262?auto=format&fit=crop&w=2000&q=75&sat=-45'); background-size: cover; background-position: center; color: #fff; } .st-top { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; margin-bottom: 90px; } .st-en { font-family: var(--en); font-size: clamp(44px, 5vw, 72px); font-weight: 500; color: #fff; line-height: 1.1; } .st-sub { font-size: 12.5px; letter-spacing: 0.2em; color: rgba(255,255,255,0.75); margin-left: 18px; } .st-sub::before { content: '/ '; color: rgba(255,255,255,0.5); } .st-catch { font-family: var(--serif); font-weight: 600; font-size: clamp(21px, 2.4vw, 33px); line-height: 2; letter-spacing: 0.06em; color: #fff; margin-top: 44px; } .st-diagram { justify-self: center; width: 100%; max-width: 430px; } .st-diagram svg { width: 100%; height: auto; } .st-diagram text { font-family: var(--sans); fill: #fff; } .st-diagram .no { font-family: var(--en); font-size: 30px; } .st-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; } .st-col { border-top: 1px solid rgba(255,255,255,0.55); padding-top: 30px; } .st-col .head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; } .st-col .no { font-family: var(--en); font-size: 22px; color: #fff; } .st-col h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; color: #fff; letter-spacing: 0.05em; } .st-col p { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 2.2; } @media (max-width: 1024px) { .st-top { grid-template-columns: 1fr; gap: 50px; } .st-cols { grid-template-columns: 1fr; gap: 40px; } } /* ===== 書体格上げの調整 ===== */ .badge, .tag, .search-tags .lbl, .job-badges, .ce-tags span, .adv-d .tags span, .step-badge, .mock-note, .breadcrumb, .sort-bar, .filter-panel, .check-item, .field label, .field input, .field select { font-family: var(--sans); } h1, h2, h3, h4 { font-weight: 700; } /* ===== 生成りセクション: 実物の紙テクスチャ ===== */ .section.paper { background-color: var(--paper); background-image: linear-gradient(rgba(246,244,239,0.86), rgba(246,244,239,0.86)), url('https://images.unsplash.com/photo-1604147706283-d7119b5b822c?auto=format&fit=crop&w=1400&q=60'); background-size: auto, 1400px auto; background-repeat: repeat; } /* ========================================= スマートフォン最適化 (〜768px) ========================================= */ @media (max-width: 768px) { html, body { overflow-x: hidden; } .container { padding: 0 20px; } .section { padding: 56px 0; } /* ---- ヒーロー ---- */ .site-header { position: relative; background: var(--ink); } .header-inner { height: 66px; } .brand-logo { font-size: 21px; } @supports ((-webkit-mask-image: url(#m)) or (mask-image: url(#m))) { .brand-logo { width: 133px; height: 14px; } } .brand-tag { font-size: 9.5px; letter-spacing: 0.14em; } .header-cta .btn-sm { font-size: 11.5px; padding: 10px 14px; min-height: 40px; letter-spacing: 0.06em; } .hero { min-height: 0; } .hero-inner { padding-top: 56px; padding-bottom: 130px; } /* 上と同じ考え方。見出しだけを大きく、リードは小さく置く。 */ .hero-lead { font-size: 14.5px; line-height: 1.8; letter-spacing: 0.08em; margin-bottom: 12px; max-width: none; } .hero h1 { font-size: 27px; line-height: 1.55; letter-spacing: 0.01em; margin-bottom: 20px; max-width: none; } .hero-sub { font-size: 14px; line-height: 1.9; max-width: none; } .hero-ctas { margin-top: 30px; gap: 12px; } .hero-ctas .btn-lg { flex: 1 1 100%; font-size: 14px; padding: 17px 22px; min-height: 54px; gap: 12px; } /* 検索ボックス */ .search-wrap { margin-top: -100px; } .search-box { padding: 22px 20px 20px; } .search-row { gap: 16px; } .field { padding: 0; } .field label { font-size: 11px; } .field input, .field select { font-size: 15px; min-height: 44px; } .search-submit { margin-left: 0; width: 100%; min-height: 48px; } .search-tags { gap: 10px; margin-top: 18px; } .search-tags .lbl { flex: 1 1 100%; } .tag { font-size: 12px; padding: 6px 13px; } /* ---- 見出し系 ---- */ .sec-title { font-size: 22px; line-height: 1.7; } .sec-lead { font-size: 13.5px; margin-top: 14px; } .sec-grid { gap: 30px; } .sec-more { margin-top: 22px; font-size: 12.5px; padding: 14px 22px; min-height: 50px; width: 100%; } /* ---- 求人タブ・カード ---- */ .tabs { gap: 22px; margin-bottom: 22px; } .tab-btn { font-size: 15px; padding-bottom: 12px; } .job-grid { gap: 16px; } .job-card { padding: 22px 20px; gap: 10px; } .job-card h3 { font-size: 16px; line-height: 1.75; } .job-meta { gap: 4px 16px; font-size: 12.5px; } /* ---- 求人検索 (タイル+地図) ---- */ .browse-cols { border-top: none; } .browse-panel { padding: 28px 0 30px; } .browse-panel + .browse-panel { border-left: none; } .cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .cat-tile .t-label { font-size: 12.5px; } .jp-map { max-width: 320px; } .map-info { margin-top: 16px; padding-top: 12px; } /* ---- コラム ---- */ .col-main .main-thumb { margin-bottom: 18px; } .col-main h3 { font-size: 18px; line-height: 1.8; } .col-main .excerpt { font-size: 13px; } .col-item { grid-template-columns: 92px 1fr; gap: 14px; padding: 16px 0; } .col-item h4 { font-size: 13.5px; line-height: 1.7; } /* ---- メリット ---- */ .m-row { padding: 36px 0; gap: 26px; } .m-photo::after { display: none; } .m-copy .m-num { font-size: 42px; margin-bottom: 12px; } .m-copy h3 { font-size: 19px; margin-bottom: 14px; } .m-copy .m-lead { font-size: 13.5px; line-height: 2.05; } .m-list li { font-size: 12.5px; padding-left: 20px; } /* ---- 成功事例 (誌面風) ---- */ .case-entries { gap: 18px; } .ce-mag .body { padding: 20px 20px 22px; } .case-entry h3 { font-size: 15.5px; } .ce-meta { flex-direction: column; align-items: flex-start; gap: 6px; } .ce-mag .ph .ce-tags { left: 14px; bottom: 12px; } /* ---- 比較表 ---- */ .compare-scroll { margin: 0 -20px; padding: 0 20px; } .compare-table { min-width: 640px; font-size: 12.5px; } .compare-table th, .compare-table td { padding: 12px 14px; } .compare-table tbody th { width: 110px; font-size: 11px; } .compare-note { font-size: 12.5px; padding-left: 14px; } /* ---- アドバイザー ---- */ .advisor-grid { gap: 20px; } .advisor.adv-final .txt { padding: 26px 22px 28px; } .advisor.adv-final h3 { font-size: 19px; } /* ---- 声 ---- */ .v-ed-main .q { font-size: 60px; margin-bottom: 16px; } .v-ed-main blockquote { font-size: 18px; line-height: 2; } .v-ed-side .item { padding: 18px 0; } .v-ed-side p { font-size: 13.5px; } /* ---- 成功ポイント (タイムライン) ---- */ .tl-body h3 { font-size: 17.5px; margin: 8px 0 10px; } .tl-body p { font-size: 13.5px; line-height: 2.05; } .tl-body .tl-tip { font-size: 12px; } /* ---- 動向 ---- */ .trend-grid2 { gap: 32px; } .trend-card { grid-template-columns: 104px 1fr; gap: 16px; align-items: start; } .trend-txt h3 { font-size: 16px; } .trend-txt p { font-size: 12.5px; line-height: 1.95; } /* ---- FAQ ---- */ .faq-list summary { font-size: 14.5px; padding: 20px 46px 20px 4px; gap: 14px; } .faq-list summary::before { font-size: 19px; } .faq-list .tgl { right: 12px; } .faq-a { padding: 0 4px 20px 38px; font-size: 13px; } /* ---- 流れ ---- */ .step-grid { gap: 16px; } .step-card { padding: 22px 20px 24px; } .step-ill { height: 96px; } /* ---- 自信 (Strengths) ---- */ .st-top { margin-bottom: 44px; } .st-diagram { max-width: 300px; } .st-cols { gap: 32px; } .st-col { padding-top: 22px; } .st-col h3 { font-size: 17.5px; } .st-col p { font-size: 13px; line-height: 2.05; } /* ---- マーキー・CTA・フッター ---- */ .marquee { padding: 22px 0; } .marquee-track { gap: 40px; } .marquee-track span { font-size: 22px; letter-spacing: 0.1em; } .cta-band { padding: 72px 20px; } .cta-band h2 { font-size: 22px; line-height: 1.8; } .cta-band p { font-size: 13px; } .cta-band .btn-lg { width: 100%; } .site-footer { padding: 50px 0 24px; } .footer-grid { gap: 32px; margin-bottom: 34px; } .footer-note { flex-direction: column; gap: 6px; font-size: 11px; } /* ---- 下層: 求人一覧 ---- */ .page-head { padding: 32px 0; } .jobs-layout { padding-top: 36px; padding-bottom: 64px; gap: 28px; } .filter-panel { padding: 24px 20px; } .job-row { padding: 22px 20px; } .job-row h3 { font-size: 17px; } .job-row .meta-line { gap: 6px 16px; font-size: 12.5px; } .job-row .actions { flex-direction: column; } .job-row .actions .btn { width: 100%; } .sort-bar { flex-direction: column; align-items: flex-start; gap: 10px; } .pagination { gap: 6px; } .pagination a, .pagination .gap { min-width: 42px; min-height: 42px; font-size: 14px; } .pagination .nav-next { min-width: 58px; } /* ---- 下層: 求人詳細 ---- */ .detail-layout { padding-top: 36px; padding-bottom: 64px; gap: 34px; } .detail-main h1 { font-size: 21px; line-height: 1.75; } .spec-table { font-size: 13px; } .spec-table th, .spec-table td { display: block; width: 100%; padding: 12px 4px; } .spec-table th { border-bottom: none; padding-bottom: 4px; } .apply-card { padding: 26px 22px; } } /* ---- 小型端末 (〜380px) ---- */ @media (max-width: 380px) { .container { padding: 0 16px; } .hero-lead { font-size: 13.5px; } .hero h1 { font-size: 23px; } .cat-grid { grid-template-columns: 1fr; } .marquee-track span { font-size: 19px; } } /* 求人検索: 職種タイル / 地図の2カラム */ .browse-cols.is-search { grid-template-columns: 1fr 1.45fr; } @media (max-width: 1024px) { .browse-cols.is-search { grid-template-columns: 1fr; } } /* ===== モバイル: ハンバーガー / ドロワー ===== */ .nav-toggle { display: none; position: relative; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; margin-left: 4px; } .nav-toggle span { position: absolute; left: 10px; width: 24px; height: 1.4px; background: #fff; transition: transform 0.4s cubic-bezier(.2,.6,.2,1), opacity 0.3s; } .nav-toggle span:nth-child(1) { top: 15px; } .nav-toggle span:nth-child(2) { top: 22px; } .nav-toggle span:nth-child(3) { top: 29px; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-drawer { position: fixed; inset: 0; z-index: 90; background: linear-gradient(160deg, #0B1B2B 0%, #14304E 100%); display: flex; flex-direction: column; justify-content: center; padding: 0 32px; opacity: 0; visibility: hidden; transition: opacity 0.45s cubic-bezier(.2,.6,.2,1), visibility 0.45s; } body.nav-open .nav-drawer { opacity: 1; visibility: visible; } .nav-drawer a { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; color: #fff; letter-spacing: 0.1em; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.14); } .nav-drawer a .en { display: block; font-family: var(--en); font-size: 11.5px; letter-spacing: 0.24em; color: var(--brass); margin-top: 4px; } .nav-drawer .drawer-cta { margin-top: 34px; } .nav-drawer .drawer-cta .btn { width: 100%; } @media (max-width: 768px) { .nav-toggle { display: block; } .site-header { z-index: 100; } body.nav-open { overflow: hidden; } } @media (min-width: 769px) { .nav-drawer { display: none; } } /* 比較表: 横スクロールの明示 */ .scroll-hint { display: none; } @media (max-width: 768px) { .scroll-hint { display: block; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px; } .scroll-hint::before { content: '\2190\2192'; color: var(--gold); margin-right: 6px; } } /* モバイルヘッダーの整理 */ @media (max-width: 768px) { .header-inner { gap: 12px; } .brand-logo { white-space: nowrap; font-size: 17px; letter-spacing: 0.02em; } @supports ((-webkit-mask-image: url(#m)) or (mask-image: url(#m))) { .brand-logo { width: 123px; height: 13px; } } .brand-tag { white-space: nowrap; } .header-cta { display: none; } .nav-toggle { margin-left: auto; } } /* ========================================================= スマホ: 縦の圧縮 行間・余白の見直し + 一覧系セクションの横スワイプ化 ========================================================= */ @media (max-width: 768px) { body { line-height: 1.9; } .section { padding: 44px 0; } .sec-grid { gap: 24px; } .sec-more { margin-top: 18px; } /* ---- 一覧は縦積みをやめて横スワイプへ ---- */ .job-grid.tab-panel.active, .case-entries { display: flex; flex-wrap: nowrap; align-items: stretch; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 14px; margin: 0 -20px; padding: 2px 20px 12px; } .job-grid.tab-panel.active::-webkit-scrollbar, .case-entries::-webkit-scrollbar { display: none; } .job-grid.tab-panel.active > * { flex: 0 0 84%; scroll-snap-align: start; } .case-entries > * { flex: 0 0 78%; scroll-snap-align: start; } /* 横に隠れたカードが出てこないのを防ぐ (出現アニメを無効化) */ .job-grid .rv, .case-entries .rv { opacity: 1; transform: none; } .scroll-hint { margin-bottom: 12px; } /* ---- 求人検索 ---- */ .browse-panel { padding: 22px 0 24px; } .browse-panel h3 { margin-bottom: 16px; } .cat-grid { gap: 8px; } .cat-tile { aspect-ratio: 21/10; } .jp-map { max-width: 250px; } .map-info { margin-top: 12px; padding-top: 10px; } /* ---- コラム ---- */ .col-main .main-thumb { margin-bottom: 14px; } .col-main .excerpt { line-height: 1.95; } .col-item { padding: 12px 0; gap: 12px; } /* ---- メリット ---- */ .m-row { padding: 26px 0; gap: 18px; } .m-row:first-child { padding-top: 4px; } .m-photo img { aspect-ratio: 16/10; } .m-copy .m-num { font-size: 34px; margin-bottom: 8px; } .m-copy h3 { font-size: 18px; margin-bottom: 10px; } .m-copy .m-lead { line-height: 1.95; margin-bottom: 14px; } .m-list { gap: 8px; } .m-list li { line-height: 1.8; } /* ---- 成功事例 ---- */ .ce-mag .body { padding: 16px 16px 18px; } .case-entry h3 { line-height: 1.7; } .ce-more-wrap { margin-top: 22px; } /* ---- アドバイザー: 写真を横に置いて高さを詰める ---- */ .advisor-grid { gap: 14px; } .advisor.adv-final { grid-template-columns: 124px 1fr; } .advisor.adv-final img { width: 124px; height: 100%; min-height: 200px; } .advisor.adv-final .txt { padding: 18px 16px 20px; } .advisor.adv-final h3 { font-size: 17px; padding-bottom: 8px; margin-bottom: 10px; } .advisor.adv-final p { font-size: 12.5px; line-height: 1.95; } /* ---- 声 ---- */ .v-editorial { gap: 26px; } .v-ed-main .q { font-size: 46px; margin-bottom: 10px; } .v-ed-main blockquote { font-size: 17px; line-height: 1.95; margin-bottom: 14px; } .v-ed-side .item { padding: 14px 4px; } .v-ed-side p { line-height: 1.9; } /* ---- 成功ポイント ---- */ .tl-item { padding-bottom: 26px; } .tl-body h3 { margin: 6px 0 8px; } .tl-body p { line-height: 1.95; } .tl-body .tl-tip { margin-top: 8px; line-height: 1.85; } /* ---- 動向 ---- */ .trend-grid2 { gap: 22px; } .trend-card { grid-template-columns: 96px 1fr; gap: 14px; align-items: center; } .trend-txt p { line-height: 1.85; } /* ---- FAQ ---- */ .faq-list summary { padding: 16px 46px 16px 4px; } .faq-a { padding-bottom: 16px; line-height: 1.95; } /* ---- 流れ ---- */ .step-grid { gap: 12px; } .step-card { padding: 18px 18px 20px; } .step-card h3 { margin: 12px 0 4px; } .step-ill { height: 72px; margin: 6px 0 8px; } .step-card p { line-height: 1.85; } .step-time { margin-top: 12px; padding: 6px 14px; } /* ---- 自信 (Strengths) ---- */ .st-top { gap: 26px; margin-bottom: 30px; } .st-diagram { max-width: 260px; } .st-cols { gap: 22px; } .st-col { padding-top: 16px; } .st-col .head { margin-bottom: 10px; } .st-col p { line-height: 1.95; } /* ---- CTA・フッター ---- */ .marquee { padding: 18px 0; } .cta-band { padding: 56px 20px; } .cta-band h2 { margin-bottom: 12px; } .cta-band p { margin-bottom: 26px; } .site-footer { padding: 40px 0 20px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; margin-bottom: 26px; } .footer-brand { grid-column: 1 / -1; } .site-footer h2 { margin-bottom: 12px; } .site-footer li { margin-bottom: 7px; } /* ---- 下層ページ ---- */ .job-row { padding: 18px 18px 20px; } .filter-panel { padding: 20px 18px; } .detail-layout { gap: 26px; } .spec-table th, .spec-table td { padding: 9px 4px; } } /* 求人一覧への導線はカードの下に置く */ .jobs-more-wrap { margin-top: 32px; } .jobs-more-wrap .sec-more { margin-top: 0; } @media (max-width: 768px) { .jobs-more-wrap { margin-top: 12px; } }