@charset "UTF-8"; /* ============================================================ PEP Corporate – main.css (v6) 方針: 白基調 / ブラック / 朱寄りオレンジ（ブランド維持） ------------------------------------------------------------ v6での主な変更（2026ブラッシュアップ） 1) デザイントークン整備（色・書体・余白・角丸・影・モーション） 2) 流体タイポグラフィ（clamp）… スマホ用font-size上書きを大幅削減 3) Tablerアイコン/Webフォントを@importで読込（暫定。※下記注意） 4) ガラス調の追従ヘッダー、ホバー等のマイクロインタラクション 5) アクセシビリティ床上げ（:focus-visible / reduced-motion / touch配慮） ------------------------------------------------------------ ※ @import は暫定運用です。本番では functions.php で wp_enqueue_style により で読み込む方が高速です。 ============================================================ */ /* ── 外部リソース（暫定 @import。失敗しても他に影響しないよう分割） */ @import url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.44.0/dist/tabler-icons.min.css"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,600..800;1,600..800&display=swap"); /* ============================================================ Design Tokens ── 色・書体・サイズは原則ここだけ触ればサイト全体に反映されます ============================================================ */ :root{ /* Color */ --ink:#1a1a1c; --ink-deep:#0e0e10; --text:#3a3a36; --text-sub:#5f5e5a; --mute:#9a8e7e; --orange:#E85A1F; --orange-deep:#cf4c14; /* hover等の濃色 */ --orange-soft:#fff3e8; --orange-soft2:#faf0e6; --bg:#ffffff; --bg-cream:#faf8f3; --bg-light:#f5f3ed; --line:#ebe9e1; --line-soft:#f0eee5; /* Typography */ --font-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; --font-en:"Inter","Helvetica Neue",Arial,sans-serif; /* 英字ディスプレイ用 */ /* 流体タイプスケール（スマホ〜PCまで滑らかに可変） */ --fs-display:clamp(30px, 2.8vw + 20px, 52px); /* FV見出し */ --fs-title-lg:clamp(28px, 1.7vw + 22px, 42px); /* 大セクション見出し */ --fs-title:clamp(25px, 1.4vw + 20px, 36px); /* 標準セクション見出し */ --fs-title-sm:clamp(24px, .8vw + 21px, 30px); /* 小見出し級 */ /* Layout / Shape */ --wrap:1180px; --space-section:clamp(64px, 9vw, 120px); --radius:14px; --radius-lg:20px; --radius-pill:999px; /* Elevation（重ね影＝2026らしい柔らかい浮き） */ --shadow-sm:0 1px 2px rgba(26,26,28,.05), 0 4px 12px rgba(26,26,28,.05); --shadow-md:0 4px 10px rgba(26,26,28,.06), 0 16px 32px rgba(26,26,28,.10); --shadow-orange:0 10px 26px rgba(232,90,31,.35); /* Motion */ --ease:cubic-bezier(.22,.66,.28,1); --dur-1:.18s; --dur-2:.34s; } *{box-sizing:border-box;} html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip;} body{ margin:0; font-family:var(--font-jp); color:var(--text); font-size:16px; line-height:1.85; background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:clip; accent-color:var(--orange); } img{max-width:100%;height:auto;display:block;} a{color:inherit;text-decoration:none;transition:color var(--dur-1) var(--ease);} ul{list-style:none;margin:0;padding:0;} button{font-family:inherit;} ::selection{background:var(--orange);color:#fff;} /* キーボード操作時のみ表示するフォーカスリング（a11y床上げ） */ :focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px;} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;} .italic{font-style:italic;font-feature-settings:"palt";} /* ハイライト表現（オレンジマーカー） box-decoration-break:clone … 行をまたいでもマーカーが途切れない */ .hl{background:linear-gradient(transparent 65%,var(--orange) 65%);padding:0 6px;color:#fff;-webkit-box-decoration-break:clone;box-decoration-break:clone;} .hlo{background:linear-gradient(transparent 65%,rgba(232,90,31,.25) 65%);padding:0 2px;color:var(--orange);font-weight:700;-webkit-box-decoration-break:clone;box-decoration-break:clone;} /* eyebrow（小見出し） */ .eb{ font-size:11px;letter-spacing:.2em;font-weight:500; color:var(--ink);display:inline-flex;align-items:center;gap:8px; } .eb::before{content:"●";color:var(--orange);font-size:11px;} /* 主見出し */ .h-section{ font-size:var(--fs-title-lg);font-weight:700;line-height:1.45; color:var(--ink);letter-spacing:.01em; } /* 見出し共通：和文詰め＋行の折り返しバランス（対応ブラウザで自動最適化） */ .hero-title,.h-section,.about-title,.mission-text h2,.projects h2, .contact-text h2,.company h2,.service-section h2,.news-head h2, .biz-body h2,.page-hero h1,.message-quote{ font-feature-settings:"palt"; text-wrap:balance; } /* ボタン */ .btn{ display:inline-flex;align-items:center;gap:10px; font-size:14.5px;font-weight:500;border-radius:var(--radius-pill); padding:16px 28px; transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease); } .btn .ti{transition:transform var(--dur-1) var(--ease);} .btn:hover{transform:translateY(-2px);} .btn:hover .ti-arrow-right{transform:translateX(3px);} .btn:hover .ti-arrow-up-right{transform:translate(2px,-2px);} .btn:active{transform:translateY(0) scale(.98);} .btn--primary{background:var(--ink);color:#fff;} .btn--primary .ti{color:var(--orange);} .btn--primary:hover{box-shadow:var(--shadow-md);} .btn--orange{background:var(--orange);color:#fff;} .btn--orange:hover{background:var(--orange-deep);box-shadow:var(--shadow-orange);} .btn--line{ background:transparent;color:var(--ink); border-bottom:1.5px solid var(--ink);border-radius:0;padding:12px 4px; } .btn--outline{ background:#fff;color:var(--ink);border:1.5px solid var(--ink); } .btn--outline .ti{color:var(--orange);} .btn--outline:hover{background:var(--ink);color:#fff;} .btn--outline:hover .ti{color:var(--orange);} /* 共通リンク（>付き） */ .link-more{ display:inline-flex;align-items:center;gap:8px; font-size:14px;font-weight:500;color:var(--ink); } .link-more .ti{color:var(--orange);} /* 円ボタン */ .circ{ display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;background:var(--ink);color:#fff;border-radius:50%; } .circ .ti{color:var(--orange);} /* ============================================================ ヘッダー（ガラス調・追従） ※ backdrop-filter を .site-header 本体に当てると、配下の position:fixed（メニューの×・ロゴ固定）が壊れるため、 ::before 擬似要素にのみ適用しています。移動しないこと。 ============================================================ */ .site-header{ position:sticky;top:0;z-index:100;background:transparent; padding:18px 0;transition:box-shadow var(--dur-2) var(--ease); } .site-header::before{ content:"";position:absolute;inset:0;z-index:-1; background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px); border-bottom:1px solid transparent; transition:border-color var(--dur-2) var(--ease); } .site-header.is-scrolled{box-shadow:0 2px 14px rgba(0,0,0,.04);} .site-header.is-scrolled::before{border-bottom-color:var(--line);} .header-inner{ display:flex;align-items:center;justify-content:space-between;gap:30px; } .brand{display:flex;align-items:center;gap:12px;} .brand-name{ font-style:italic;font-size:22px;font-weight:500; letter-spacing:.02em;color:var(--ink); font-feature-settings:"palt"; } .brand-tag{ display:block;font-size:9px;letter-spacing:.16em; color:var(--mute);font-weight:500;margin-top:1px;font-style:normal; } .global-nav ul{display:flex;align-items:center;gap:30px;} .global-nav a{ font-size:13.5px;color:var(--ink);font-weight:500; } /* ホバー時：下線がスライドイン（PCナビ用マイクロインタラクション） */ .global-nav a:not(.header-cta){ padding-bottom:3px; background:linear-gradient(var(--orange),var(--orange)) left bottom / 0 2px no-repeat; transition:background-size var(--dur-2) var(--ease); } .global-nav a:not(.header-cta):hover{background-size:100% 2px;} .header-cta{ display:inline-flex;align-items:center;gap:6px; background:var(--orange);color:#fff; font-size:13px;font-weight:500;padding:11px 20px;border-radius:var(--radius-pill); transition:background-color var(--dur-1) var(--ease); } .header-cta:hover{background:var(--orange-deep);} /* ハンバーガー：アイコンフォント非依存。CSSで三本線を描き、開いた時は×に変形 */ .nav-toggle{ display:none;background:none;border:0;cursor:pointer;padding:0; position:relative;width:28px;height:18px; } /* 3本の線：上=::before / 中=.ti（グリフは隠して棒に転用） / 下=::after */ .nav-toggle .ti,.nav-toggle::before,.nav-toggle::after{ position:absolute;left:0;right:0;top:8px;height:2.5px; background:var(--ink);border-radius:2px; } .nav-toggle::before,.nav-toggle::after{content:"";transition:transform .25s var(--ease);} .nav-toggle::before{transform:translateY(-6px);} .nav-toggle::after{transform:translateY(6px);} .nav-toggle .ti{font-size:0;color:transparent;transition:opacity var(--dur-1) var(--ease);} /* メニューを開いている時（#global-nav.is-open の後ろにある .nav-toggle）：×へ */ .global-nav.is-open ~ .nav-toggle .ti{opacity:0;} .global-nav.is-open ~ .nav-toggle::before{transform:rotate(45deg);} .global-nav.is-open ~ .nav-toggle::after{transform:rotate(-45deg);} /* ============================================================ ① ファーストビュー（写真スライダー＋コピー重ね） ============================================================ */ .hero{position:relative;min-height:560px;overflow:hidden;background:#1a1a1c;display:flex;align-items:center;} .hero-slider{position:absolute;inset:0;z-index:1;} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;} .hero-slide.is-active{opacity:1;} .hero-slide img{width:100%;height:100%;object-fit:cover;} .hero-slide-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,.4);background:linear-gradient(135deg,#3a3f46,#23262b);} .hero-slide-ph .ti{font-size:60px;} .hero-slide-ph em{font-size:13px;font-style:normal;} .hero-slide:nth-child(2) .hero-slide-ph{background:linear-gradient(135deg,#5a4a42,#2d2420);} .hero-slide:nth-child(3) .hero-slide-ph{background:linear-gradient(135deg,#3d5245,#1f2d24);} .hero-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(20,20,22,.82) 0%,rgba(20,20,22,.6) 40%,rgba(20,20,22,.15) 75%,rgba(20,20,22,.3) 100%);pointer-events:none;} .hero .wrap{position:relative;z-index:3;width:100%;padding-top:88px;padding-bottom:96px;} .hero-content{max-width:780px;color:#fff;} .hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;font-weight:500;color:#fff;margin-bottom:24px;} .hero-eyebrow .bar{width:24px;height:1.5px;background:var(--orange);display:inline-block;} .hero-title{font-size:var(--fs-display);font-weight:700;line-height:1.4;letter-spacing:.01em;color:#fff;margin-bottom:24px;word-break:auto-phrase;overflow-wrap:break-word;} .hero-swap{display:inline-block;} .hero-swap-word{display:inline-block;transition:opacity .35s ease,transform .35s ease;} .hero-swap-word.is-out{opacity:0;transform:translateY(-8px);} .hero-lead{font-size:16px;line-height:1.9;color:rgba(255,255,255,.88);max-width:520px;margin-bottom:34px;} .hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;} .btn--line-w{background:transparent;color:#fff;border-radius:0;border-bottom:1.5px solid #fff;padding:12px 4px;} .btn--line-w .ti{color:#fff;} .hero-indicator{position:absolute;bottom:28px;right:56px;z-index:3;display:flex;align-items:center;gap:20px;color:#fff;} .hero-labels{font-size:12px;letter-spacing:.1em;opacity:.85;font-family:var(--font-en);} .hero-dots{display:flex;gap:7px;} .hero-dot{width:10px;height:4px;border-radius:4px;background:rgba(255,255,255,.5);border:0;padding:0;cursor:pointer;transition:width .3s var(--ease),background .3s var(--ease);} .hero-dot.is-active{width:26px;background:var(--orange);} /* ============================================================ ② ティッカー ============================================================ */ .ticker{background:var(--ink);color:#fff;padding:18px 0;overflow:hidden;} .ticker-track{ display:flex;align-items:center;gap:32px;white-space:nowrap; font-size:13.5px;font-weight:600;letter-spacing:.18em;font-style:italic; font-family:var(--font-en); animation:tickerMove 32s linear infinite; } .ticker-track .dot{color:var(--orange);} @keyframes tickerMove{ from{transform:translateX(0);} to{transform:translateX(-50%);} } /* ============================================================ ③ What is PEP（頭字語） ============================================================ */ .section{padding:var(--space-section) 0;background:#fff;position:relative;overflow:hidden;} .section--cream{background:var(--bg-cream);} .section--light{background:var(--bg-light);} .section--ink{background:var(--ink);color:#fff;} .section--orange{background:var(--orange);color:#fff;} .bg-text{ position:absolute;font-weight:700;letter-spacing:.02em;line-height:1; font-family:var(--font-en);font-style:italic; pointer-events:none;white-space:nowrap;margin:0; } .bg-text--wpep{ top:24px;right:40px;left:auto;font-size:40px;color:var(--ink);opacity:.06; } .bg-text--our{ top:38px;right:40px;font-size:34px;color:#fff;opacity:.18;padding:0; } .bg-text--co{ top:38px;right:40px;font-size:34px;color:#fff;opacity:.2;padding:0; } .about{position:relative;} .about-layout{ display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:start; } .about-head{min-width:220px;} .about-title{ font-size:var(--fs-title-sm);font-weight:700;line-height:1.5;color:var(--ink);margin-bottom:16px; } .about-sub{font-size:13px;color:var(--text-sub);line-height:1.9;} .about-text p{font-size:14.5px;line-height:2;color:var(--text);margin-bottom:18px;} .about-text p:last-child{margin-bottom:0;} .about-text{margin-top:24px;} .about-cta{margin-top:24px;} /* 罫線ベースの頭字語リスト */ .acronym{border-top:2px solid var(--ink);} .acronym-row{ display:flex;align-items:center;gap:22px; padding:22px 4px;border-bottom:1px solid var(--line); } .acronym-letter{ font-size:44px;font-weight:700;color:var(--orange);line-height:1; font-family:var(--font-en);font-style:italic; width:38px;flex-shrink:0;text-align:center; } .acronym-body{flex-grow:1;} .acronym-en{ font-size:11px;letter-spacing:.14em;color:var(--mute);font-weight:600;font-family:var(--font-en); } .acronym-jp{ font-size:17px;font-weight:700;margin-top:2px;color:var(--ink); } /* ============================================================ ④ Service（黒背景・罫線リスト） ============================================================ */ .service-section{background:var(--ink);color:#fff;padding:clamp(60px, 7vw, 96px) 0;position:relative;overflow:hidden;} .service-head{padding-bottom:36px;} .service-head .eb{color:#fff;} .service-head .eb::before{background:var(--orange);} .service-section h2{font-size:var(--fs-title);font-weight:700;line-height:1.5;margin-bottom:14px;color:#fff;} .service-lead{font-size:14.5px;line-height:1.95;color:#c7c7c0;margin-bottom:0;max-width:560px;} .svc-list{border-top:1px solid rgba(255,255,255,.16);} .svc-row{ display:grid;grid-template-columns:90px 1fr auto;gap:30px;align-items:center; padding:28px 4px;border-bottom:1px solid rgba(255,255,255,.16); text-decoration:none;transition:background var(--dur-2) var(--ease),padding-left var(--dur-2) var(--ease); } .svc-row:hover{background:rgba(255,255,255,.04);padding-left:16px;} .svc-row-num{ font-size:42px;font-weight:700;font-style:italic;color:var(--orange);line-height:1; font-family:var(--font-en); } .svc-row-body h3{ font-size:20px;font-weight:700;color:#fff;margin-bottom:6px; } .svc-row-en{ font-size:11px;color:#8a8a83;letter-spacing:.1em;font-weight:600;margin-left:8px;font-family:var(--font-en); } .svc-row-body p{ font-size:13.5px;color:#c7c7c0;line-height:1.85;margin:0; } .svc-row-go{ display:inline-flex;align-items:center;gap:7px;white-space:nowrap; border:1.5px solid #fff;color:#fff;font-size:13px;font-weight:500; padding:11px 22px;border-radius:var(--radius-pill); transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease); } .svc-row-go .ti{color:var(--orange);} .svc-row:hover .svc-row-go{background:var(--orange);border-color:var(--orange);color:#fff;} .svc-row:hover .svc-row-go .ti{color:#fff;} /* ============================================================ ⑤ Mission（地域・元気） ============================================================ */ .mission-inner{ display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center; } .mission-fig{position:relative;} .mission-fig svg{width:100%;height:auto;} .mission-badge{ position:absolute;bottom:-10px;left:20px; width:120px;height:120px;background:var(--orange);color:#fff; border-radius:50%;display:flex;align-items:center;justify-content:center; flex-direction:column;text-align:center;line-height:1.4; font-size:12.5px;font-weight:700;letter-spacing:.04em; } .mission-badge span:nth-child(2){font-size:14px;} .mission-text h2{ font-size:var(--fs-title-lg);font-weight:700;line-height:1.55;color:var(--ink);margin-bottom:28px; } .mission-text p{ font-size:15px;line-height:2.05;color:var(--text);margin-bottom:18px; } .mission-tags{display:flex;gap:18px;margin-top:30px;flex-wrap:wrap;} .mission-tag{ display:inline-flex;align-items:center;gap:8px; font-size:13px;font-weight:500;color:var(--ink); } .mission-tag::before{ content:"";width:10px;height:10px;background:var(--orange);border-radius:50%; } /* ============================================================ ⑥ Projects（実績） ============================================================ */ .projects h2{font-size:var(--fs-title-lg);font-weight:700;line-height:1.4;margin-bottom:14px;color:var(--ink);} .projects-lead{font-size:15px;line-height:1.95;color:var(--text);margin-bottom:48px;max-width:580px;} .projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .work-card{background:#fff;border-radius:var(--radius);overflow:hidden;transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);} .work-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);} .work-thumb{ aspect-ratio:16/10;display:flex;align-items:center;justify-content:center; position:relative;background:linear-gradient(135deg,#f5f3ed,#dcd9cf);overflow:hidden; } .work-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);} .work-card:hover .work-thumb img{transform:scale(1.05);} .work-thumb .ti{font-size:36px;color:var(--mute);} .work-thumb.is-oa{background:linear-gradient(135deg,#fff3e8,#fde4cf);} .work-thumb.is-oa .ti{color:var(--orange);} .work-tag{ position:absolute;top:14px;left:14px; display:inline-flex;align-items:center;gap:5px; padding:4px 10px;background:#fff;color:var(--ink); font-size:10.5px;font-weight:700;border-radius:var(--radius-pill);font-family:var(--font-en); } .work-tag.is-oa{background:var(--orange);color:#fff;} .work-body{padding:22px 24px 26px;} .work-body h3{ font-size:15.5px;font-weight:700;line-height:1.55; margin-bottom:14px;color:var(--ink); } .work-effects{padding-top:12px;border-top:1px dashed var(--line);} .work-effects dt{font-size:11px;letter-spacing:.1em;font-weight:500;color:#9a9a93;} .work-effects dt.is-effect{color:var(--orange);font-weight:700;} .work-effects dd{font-size:13px;color:var(--text);line-height:1.7;margin:3px 0 10px;} .work-effects dd.is-effect{color:var(--ink);font-weight:500;margin-bottom:0;} .projects-cta{text-align:center;margin-top:48px;} /* ============================================================ ⑦ NEWS（縦組大型英字） ============================================================ */ .news-section{padding:var(--space-section) 0;position:relative;overflow:hidden;} .news-vertical{ position:absolute;top:60px;left:30px; font-size:130px;font-weight:700;letter-spacing:.02em; color:var(--ink);line-height:.95;font-family:var(--font-en); writing-mode:vertical-rl;text-orientation:mixed; pointer-events:none;margin:0; } .news-inner{padding-left:180px;position:relative;} .news-head{ display:flex;justify-content:space-between;align-items:flex-end; margin-bottom:48px;flex-wrap:wrap;gap:18px; } .news-head h2{font-size:var(--fs-title);font-weight:700;line-height:1.4;color:var(--ink);margin-top:16px;} .news-list{display:flex;flex-direction:column;} .news-item{ display:grid;grid-template-columns:100px 140px 1fr;gap:24px;align-items:center; padding:22px 0;border-bottom:1px solid var(--line);transition:background var(--dur-1) var(--ease); } .news-item:hover{background:#fafaf6;} .news-item time{font-size:13.5px;color:var(--ink);font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;} .news-cat{ font-size:11px;background:var(--ink);color:#fff; padding:6px 0;text-align:center;font-weight:500; } .news-cat.is-works{background:var(--orange);} .news-item p{font-size:14.5px;color:var(--ink);margin:0;} /* ============================================================ ⑧ Company（オレンジ背景） ============================================================ */ .company{padding:0;color:#fff;} .company-head{padding-top:30px;padding-bottom:48px;} .company-head .eb::before{color:#fff;} .company h2{font-size:var(--fs-title-lg);font-weight:700;line-height:1.55;margin-bottom:0;color:#fff;} .company-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:14px; } .company-grid--main{max-width:none;} /* 関連サイト（別ドメインのグループ事業） */ .company-related{ margin-top:40px;padding-top:36px;border-top:1px solid rgba(255,255,255,.28);padding-bottom:100px; } .company-related-label{ font-size:14px;font-weight:700;color:#fff;margin-bottom:18px;display:flex;align-items:baseline;gap:12px; } .company-related-label span{font-size:11px;letter-spacing:.14em;font-weight:600;color:rgba(255,255,255,.7);font-style:italic;font-family:var(--font-en);} .related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:none;} .related-card{ background:#fff;border-radius:var(--radius);padding:20px 22px; display:flex;align-items:center;gap:16px;text-decoration:none; transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease); } .related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);} .related-ico{ width:48px;height:48px;border-radius:50%;background:var(--orange-soft); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .related-ico .ti{font-size:24px;color:var(--orange);} .related-body{flex-grow:1;display:flex;flex-direction:column;gap:3px;} .related-name{font-size:15px;font-weight:700;color:var(--ink);} .related-desc{font-size:11.5px;color:var(--text-sub);} .related-go .ti{font-size:18px;color:var(--orange);} .company-card{ background:#fff;color:var(--ink);border-radius:var(--radius);padding:26px 20px 22px; text-decoration:none;position:relative; display:flex;flex-direction:column;align-items:center;text-align:center; justify-content:center;min-height:190px; transition:transform var(--dur-1) var(--ease),background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease); } .company-card:hover{transform:translateY(-6px);background:var(--ink);box-shadow:var(--shadow-md);} .company-num{ position:absolute;top:16px;left:16px; display:flex;align-items:center;justify-content:center; width:38px;height:38px;background:var(--orange);color:#fff; border-radius:50%;font-size:13px;font-weight:700;font-family:var(--font-en); } .company-ico{ width:64px;height:64px;border-radius:50%;background:var(--orange-soft); display:flex;align-items:center;justify-content:center;margin:18px 0 16px; transition:background var(--dur-1) var(--ease); } .company-ico .ti{font-size:30px;color:var(--orange);} .company-card:hover .company-ico{background:rgba(232,90,31,.18);} .company-card h3{ font-size:15px;font-weight:700;color:var(--orange); padding-bottom:10px;position:relative; } .company-card h3::after{ content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%); width:28px;height:2px;background:var(--orange); } .company-card:hover h3{color:#fff;} .company-card .ext{ position:absolute;top:18px;right:16px; font-size:15px;color:var(--orange); } /* ============================================================ ⑨ Contact ============================================================ */ .contact-inner{ display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center; } .contact-text .eb::before{color:var(--orange);} .contact-text h2{ font-size:var(--fs-title-lg);font-weight:700;line-height:1.5;margin-bottom:24px;color:#fff; } .contact-text p{font-size:15px;line-height:1.95;color:#cfcec9;} .contact-actions{display:flex;flex-direction:column;gap:14px;} .contact-big{ display:flex;align-items:center;justify-content:space-between; padding:22px 28px;background:var(--orange);color:#fff; border-radius:var(--radius); transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease); } .contact-big:hover{background:var(--orange-deep);transform:translateY(-2px);box-shadow:var(--shadow-orange);} .contact-big > div{display:flex;align-items:center;gap:14px;} .contact-big .ti-mail{font-size:24px;} .contact-big .lbl{font-size:11px;letter-spacing:.08em;opacity:.85;} .contact-big .val{font-size:17px;font-weight:700;} .contact-big .ti-arrow-right{font-size:22px;} .contact-tel{ display:flex;align-items:center;justify-content:space-between; padding:22px 28px;background:rgba(255,255,255,.08);color:#fff; border-radius:var(--radius);border:1px solid rgba(255,255,255,.15); } .contact-tel .ti-phone{font-size:24px;color:var(--orange);} .contact-tel .lbl{font-size:11px;letter-spacing:.08em;color:#a8a89f;} .contact-tel .val{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;} .contact-types{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px; } .contact-type{ padding:12px 8px;background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);border-radius:10px; text-align:center;font-size:12px;color:#fff; transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease); } .contact-type:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);} .contact-type .ti{font-size:18px;color:var(--orange);display:block;margin-bottom:5px;} .contact-bg{position:absolute;bottom:-80px;right:60px;width:320px;opacity:.06;pointer-events:none;} /* ============================================================ フッター ============================================================ */ .site-footer{background:var(--ink-deep);color:#a8a89f;padding:60px 0 26px;} .footer-inner{ display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px; padding-bottom:34px;border-bottom:1px solid #2a2a2a; } .footer-brand .brand-name{color:#fff;} .footer-brand p{font-size:12.5px;line-height:1.95;margin:12px 0 0;} .footer-brand .address{font-size:12px;color:#6e6e66;margin-top:14px;line-height:1.85;} .footer-col h4{ font-size:12px;color:#fff;margin-bottom:14px;letter-spacing:.06em;font-weight:500; } .footer-col ul{display:flex;flex-direction:column;gap:8px;font-size:12.5px;} .footer-col a:hover{color:#fff;} .footer-bottom{ display:flex;justify-content:space-between;align-items:center; padding-top:18px;font-size:11px;color:#6e6e66; } /* スマホ固定CTA … 廃止（footer.php側のHTML削除も推奨） */ .mobile-cta{display:none;} /* ============================================================ 下層ページ ============================================================ */ .page-hero{ background:var(--ink);color:#fff;padding:80px 0 70px;position:relative;overflow:hidden; } .page-hero .en{ font-size:12px;letter-spacing:.2em;color:var(--orange);font-weight:500; display:inline-flex;align-items:center;gap:8px;font-family:var(--font-en); } .page-hero .en::before{content:"●";} .page-hero h1{font-size:clamp(28px, 1.35vw + 23px, 38px);font-weight:700;margin:14px 0 0;letter-spacing:.01em;} .page-hero-bg{ position:absolute;top:30px;right:-30px;font-size:160px;font-weight:700; letter-spacing:-.03em;color:#fff;opacity:.06;line-height:1; font-family:var(--font-en);font-style:italic;pointer-events:none;white-space:nowrap; } .breadcrumb{ font-size:12.5px;color:var(--text-sub);padding:14px 0;background:#fafaf6; border-bottom:1px solid var(--line); } .breadcrumb a:hover{color:var(--orange);} .breadcrumb span{margin:0 6px;color:#bdbcb4;} .entry{padding:72px 0;} .entry .wrap{max-width:840px;} .entry h1{font-size:26px;font-weight:700;color:var(--ink);line-height:1.6;} .entry-meta{font-size:13px;color:var(--text-sub);margin:10px 0 28px;} .entry-content h2{ font-size:21px;font-weight:700;color:var(--ink); margin:38px 0 14px;border-left:4px solid var(--orange);padding-left:12px; } .entry-content h3{ font-size:18px;font-weight:700;color:var(--ink);margin:28px 0 12px; } .entry-content p{margin:0 0 18px;} .entry-content img{border-radius:10px;margin:18px 0;} /* 事業内容ページ（番号パネル交互レイアウト） */ .biz-list{display:flex;flex-direction:column;} .biz-row{ display:grid;grid-template-columns:.85fr 1.15fr;gap:46px;align-items:center; padding:48px 0;border-bottom:1px solid var(--line); } .biz-row:last-child{border-bottom:0;} .biz-row.is-reverse{direction:rtl;} .biz-row.is-reverse > *{direction:ltr;} /* 黒の番号パネル */ .biz-panel{ position:relative;background:var(--ink);border-radius:var(--radius-lg); padding:44px 36px;overflow:hidden;min-height:300px; display:flex;flex-direction:column;justify-content:space-between;color:#fff; } .biz-panel-top{position:relative;z-index:1;} .biz-panel-num{font-size:80px;font-weight:700;color:var(--orange);line-height:1;display:block;font-family:var(--font-en);font-style:italic;} .biz-panel-en{font-size:12px;letter-spacing:.18em;color:#a8a89f;font-weight:700;margin-top:8px;font-family:var(--font-en);} .biz-panel-icons{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap;} .biz-panel-icons span{ width:50px;height:50px;border-radius:12px;background:rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center; } .biz-panel-icons .ti{font-size:24px;color:var(--orange);} .biz-panel-mark{position:absolute;bottom:-40px;right:-30px;width:200px;opacity:.1;} .biz-body h2{ font-size:var(--fs-title-sm);font-weight:700;color:var(--ink); margin:0 0 18px;border-bottom:3px solid var(--ink);padding-bottom:14px; } .biz-body p{font-size:15px;color:var(--text);line-height:2;margin:0 0 20px;} .biz-body .tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;} .biz-body .tags span{ font-size:12px;background:var(--bg-light);color:var(--text-sub); border-radius:6px;padding:6px 13px; } .biz-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;} /* 事業詳細ページ */ .svc-section{padding:64px 0;} .svc-section h2{ font-size:24px;font-weight:700;color:var(--ink); border-left:4px solid var(--orange);padding-left:13px;margin:0 0 22px; } .svc-features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .svc-feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:box-shadow var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);} .svc-feature:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px);} .svc-feature .ti{font-size:28px;color:var(--orange);} .svc-feature h3{font-size:16px;font-weight:700;color:var(--ink);margin:12px 0 8px;} .svc-feature p{font-size:14px;color:var(--text);line-height:1.85;margin:0;} .svc-flow{counter-reset:flow;display:flex;flex-direction:column;gap:14px;} .svc-flow li{ display:flex;gap:16px;align-items:flex-start; background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px; } .svc-flow li::before{ counter-increment:flow;content:counter(flow); flex-shrink:0;width:36px;height:36px;border-radius:50%; background:var(--orange);color:#fff;font-weight:700; display:flex;align-items:center;justify-content:center;font-size:15px;font-family:var(--font-en); } .svc-flow h3{font-size:15.5px;font-weight:700;color:var(--ink);margin:0 0 4px;} .svc-flow p{font-size:14px;color:var(--text);margin:0;line-height:1.8;} .svc-faq{display:flex;flex-direction:column;gap:12px;} .svc-faq details{ background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px; transition:border-color var(--dur-1) var(--ease); } .svc-faq details[open]{border-color:var(--orange);} .svc-faq summary{ font-size:15px;font-weight:700;color:var(--ink);cursor:pointer; list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px; } .svc-faq summary::-webkit-details-marker{display:none;} .svc-faq summary::after{content:"+";color:var(--orange);font-size:20px;flex-shrink:0;} .svc-faq details[open] summary::after{content:"−";} .svc-faq p{font-size:14px;color:var(--text);line-height:1.85;margin:12px 0 0;} .svc-cta{ background:var(--bg-cream);border-radius:var(--radius);padding:40px;text-align:center; } .svc-cta h2{border:0;padding:0;justify-content:center;} .svc-cta p{font-size:14.5px;color:var(--text-sub);margin:10px 0 22px;} /* 教育事業ページ専用 */ .edu-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;} .edu-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:36px 32px;display:flex;flex-direction:column; } .edu-card .ico{ width:64px;height:64px;border-radius:16px;background:var(--orange-soft); display:flex;align-items:center;justify-content:center;margin-bottom:18px; } .edu-card .ico .ti{font-size:32px;color:var(--orange);} .edu-card .en{font-size:11px;letter-spacing:.16em;color:var(--mute);font-weight:500;margin-bottom:6px;font-family:var(--font-en);} .edu-card h3{font-size:22px;font-weight:700;color:var(--ink);margin-bottom:14px;} .edu-card p{font-size:14.5px;color:var(--text);line-height:1.95;margin-bottom:20px;flex-grow:1;} .edu-card .btn{align-self:flex-start;} /* 会社概要テーブル */ .company-table{width:100%;border-collapse:collapse;} .company-table th,.company-table td{ text-align:left;padding:20px 8px;border-bottom:1px solid var(--line); font-size:15px;vertical-align:top; } .company-table th{width:180px;font-weight:700;color:var(--ink);} .company-table td{color:var(--text);} .company-map{ margin-top:36px;border-radius:var(--radius);overflow:hidden; aspect-ratio:16/7;background:var(--bg-light); } .company-map iframe{width:100%;height:100%;border:0;} /* お問い合わせフォーム */ .contact-form{max-width:680px;margin:0 auto;} .contact-intro{text-align:center;margin-bottom:40px;} .contact-intro p{font-size:15px;color:var(--text-sub);} .form-row{margin-bottom:24px;} .form-row label{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:8px;} .form-req{font-size:11px;background:var(--orange);color:#fff;border-radius:4px;padding:2px 7px;font-weight:700;} .form-any{font-size:11px;background:#e8e7e0;color:var(--text-sub);border-radius:4px;padding:2px 7px;font-weight:700;} .form-row input[type=text],.form-row input[type=email],.form-row input[type=tel], .form-row select,.form-row textarea{ width:100%;font-size:15px;font-family:inherit; border:1px solid #cfcdc4;border-radius:10px;padding:13px 14px; background:#fafaf8;color:var(--ink); transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease); } .form-row textarea{min-height:140px;resize:vertical;} .form-row input:focus,.form-row select:focus,.form-row textarea:focus{ outline:2px solid rgba(232,90,31,.35);border-color:var(--orange); } .form-privacy{ background:var(--bg-cream);border-radius:10px;padding:18px 20px; font-size:13px;color:var(--text-sub);line-height:1.8;margin-bottom:24px; } .form-submit{text-align:center;} .form-submit button{ background:var(--orange);color:#fff;border:0;cursor:pointer; font-size:16px;font-weight:700;border-radius:var(--radius-pill);padding:16px 56px; font-family:inherit; transition:transform var(--dur-1) var(--ease),background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease); } .form-submit button:hover{transform:translateY(-2px);background:var(--orange-deep);box-shadow:var(--shadow-orange);} .thanks{text-align:center;padding:80px 0;} .thanks .ti{font-size:56px;color:var(--orange);} .thanks h1{font-size:25px;font-weight:700;color:var(--ink);margin:18px 0 14px;} .thanks p{font-size:15px;color:var(--text-sub);line-height:1.95;} /* 代表メッセージ（魅せる構成） */ .message-hero{position:relative;background:var(--ink);color:#fff;padding:80px 0;overflow:hidden;} .message-hero-bg{ position:absolute;top:30px;right:-20px;font-size:150px;font-weight:700; color:rgba(232,90,31,.1);line-height:1;font-family:var(--font-en);font-style:italic; margin:0;pointer-events:none; } .message-hero-eyebrow{ position:relative;display:inline-flex;align-items:center;gap:9px; font-size:11px;letter-spacing:.2em;font-weight:700;color:var(--orange);margin-bottom:28px;font-family:var(--font-en); } .message-hero-eyebrow svg{width:20px;height:20px;} .message-quote{ position:relative;font-size:clamp(26px, 1.9vw + 19px, 40px);font-weight:700;line-height:1.55; letter-spacing:.01em;max-width:820px; } .message-quote .qmark{ color:var(--orange);font-family:"Noto Serif JP",serif;font-size:clamp(46px, 3vw + 34px, 70px); line-height:0;vertical-align:-.3em;margin-right:4px; } .message-quote .u{position:relative;white-space:nowrap;} .message-quote .u::after{ content:"";position:absolute;left:0;bottom:-8px;width:100%;height:8px; background:url("data:image/svg+xml;utf8,") no-repeat center/100% 100%; } .message-body-section{padding:64px 0;background:#fff;} .message-body-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:50px;align-items:start;max-width:1080px;} .message-body p{font-size:15px;line-height:2.05;color:var(--text);margin:0 0 24px;} .message-body p:last-child{margin-bottom:0;} .message-aside{position:sticky;top:100px;} .message-photo{ position:relative;aspect-ratio:3/4;background:linear-gradient(135deg,#3a3a36,#1a1a1c); border-radius:18px;display:flex;align-items:center;justify-content:center; flex-direction:column;gap:8px;color:#a8a89f; } .message-photo > .ti{font-size:46px;color:var(--orange);} .message-photo img{width:100%;height:100%;object-fit:cover;border-radius:18px;} .message-photo-deco{position:absolute;bottom:-14px;left:-14px;width:80px;height:80px;background:var(--orange);border-radius:14px;z-index:-1;} .message-photo-badge{ position:absolute;bottom:-16px;right:-10px;background:#fff; box-shadow:var(--shadow-md);border-radius:var(--radius);padding:14px 20px;text-align:left; } .message-photo-badge .role{display:block;font-size:10px;color:var(--mute);letter-spacing:.1em;font-weight:700;} .message-photo-badge .name{display:block;font-size:19px;font-weight:700;color:var(--ink);margin-top:2px;} /* アーカイブ共通 */ .archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .pagination{display:flex;gap:8px;justify-content:center;margin-top:48px;} .pagination .page-numbers{ border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-size:14px; transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease); } .pagination .page-numbers:hover{background:var(--bg-light);} .pagination .current{background:var(--ink);color:#fff;border-color:var(--ink);} /* ============================================================ 出現アニメ（スクロール連動・控えめなフェード＋微スライド） ============================================================ */ [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;} [data-reveal].is-visible{opacity:1;transform:translateY(0);} /* モーション低減設定の尊重（a11y） */ @media (prefers-reduced-motion:reduce){ [data-reveal]{opacity:1;transform:none;transition:none;} .ticker-track{animation:none;} .global-nav.is-open,.global-nav.is-open li{animation:none;opacity:1;transform:none;} } /* タッチ端末では「浮き」ホバーを無効化（スティッキーホバー対策） */ @media (hover:none){ .btn:hover,.work-card:hover,.related-card:hover,.company-card:hover, .contact-big:hover,.svc-feature:hover{transform:none;} } /* ============================================================ レスポンシブ ※ 文字サイズは原則 clamp（トークン）が担うため、 ここでは「レイアウト構造の変更」のみを行う ============================================================ */ @media (max-width:980px){ /* FV: スマホは写真の上にコピーを縦積み（高さは中身に追従） */ .hero{min-height:0;align-items:stretch;} .hero .wrap{padding-top:48px;padding-bottom:64px;} .hero-overlay{background:linear-gradient(180deg,rgba(20,20,22,.78) 0%,rgba(20,20,22,.62) 50%,rgba(20,20,22,.82) 100%);} .hero-content{max-width:none;} .hero-lead{max-width:none;font-size:13.5px;} .hero-cta{gap:12px;} .hero-cta .btn{justify-content:center;} .hero-cta .btn--orange{flex:1 1 100%;} .hero-indicator{position:static;margin-top:28px;right:auto;left:auto;justify-content:flex-start;} .hero-labels{display:none;} .hero-slide-ph em{display:none;} /* 差し替え案内テキストは本文と重なるため非表示 */ .global-nav,.header-cta{display:none;} .nav-toggle{display:block;} /* スマホ：フルスクリーン・ダークオーバーレイメニュー */ .global-nav.is-open{ display:flex;flex-direction:column;justify-content:center; position:fixed;inset:0;z-index:1; background:var(--ink); padding:96px 34px 48px;overflow-y:auto;overscroll-behavior:contain; animation:navOverlay .3s ease both; } .global-nav.is-open ul{ display:flex;flex-direction:column;gap:0; width:100%;max-width:440px;margin:0 auto; } .global-nav.is-open li{ border-bottom:1px solid rgba(255,255,255,.1); opacity:0;transform:translateY(14px); animation:navItem .45s cubic-bezier(.2,.7,.2,1) forwards; } .global-nav.is-open li:nth-child(1){animation-delay:.06s;} .global-nav.is-open li:nth-child(2){animation-delay:.12s;} .global-nav.is-open li:nth-child(3){animation-delay:.18s;} .global-nav.is-open li:nth-child(4){animation-delay:.24s;} .global-nav.is-open li:nth-child(5){animation-delay:.30s;} .global-nav.is-open li:nth-child(6){animation-delay:.36s;} .global-nav.is-open a{ display:flex;align-items:center;justify-content:space-between; padding:19px 2px;font-size:23px;font-weight:700;color:#fff; letter-spacing:.04em;line-height:1.25;background:none; } /* 右端に控えめなオレンジのシェブロン（タップの手がかり） */ .global-nav.is-open a:not(.header-cta)::after{ content:"";width:9px;height:9px;flex-shrink:0; border-right:2px solid var(--orange);border-top:2px solid var(--orange); transform:rotate(45deg);opacity:.9; } /* お問い合わせは独立したピルボタンに */ .global-nav.is-open li:last-child{border-bottom:0;margin-top:24px;} .global-nav.is-open a.header-cta{ justify-content:center;background:var(--orange);color:#fff; font-size:16px;padding:17px 28px;border-radius:var(--radius-pill);letter-spacing:.02em; box-shadow:var(--shadow-orange); } .global-nav.is-open a.header-cta .ti{display:none;} /* 開いている間：×を白＆「画面に固定」（スクロールしても消えない／:has非依存で確実に動く） */ .global-nav.is-open ~ .nav-toggle{position:fixed;top:26px;right:28px;z-index:2;} .global-nav.is-open ~ .nav-toggle::before, .global-nav.is-open ~ .nav-toggle::after{background:#fff;} /* ロゴも「画面に固定」＆白に＆背景スクロールロック（:has対応ブラウザ） */ html:has(.global-nav.is-open), body:has(.global-nav.is-open){overflow:hidden;} .site-header:has(.global-nav.is-open) .brand{position:fixed;top:18px;left:28px;z-index:2;} .site-header:has(.global-nav.is-open) .brand-name{color:#fff;} .site-header:has(.global-nav.is-open) .brand-tag{color:rgba(255,255,255,.55);} .about-layout{grid-template-columns:1fr;gap:28px;} .mission-inner,.contact-inner{grid-template-columns:1fr;gap:32px;} .about-head .about-sub br{display:none;} .projects-grid,.svc-features,.archive-grid{grid-template-columns:1fr;gap:14px;} .svc-row{grid-template-columns:auto 1fr;gap:16px 18px;padding:22px 2px;} .svc-row:hover{padding-left:2px;} .svc-row-num{font-size:34px;} .svc-row-body{grid-column:2;} .svc-row-go{grid-column:1 / -1;justify-self:start;margin-top:4px;} .company-grid{grid-template-columns:repeat(3,1fr);} .related-grid{grid-template-columns:1fr;} .news-vertical{display:none;} .news-inner{padding-left:0;} .news-item{grid-template-columns:90px 1fr;} .news-cat{grid-column:2;justify-self:start;padding:4px 12px;} .biz-row,.edu-cards{grid-template-columns:1fr;gap:24px;padding:44px 0;} .biz-row.is-reverse{direction:ltr;} .biz-panel{min-height:220px;} .biz-panel-num{font-size:60px;} /* 代表メッセージ：写真と名前バッジが崩れないよう調整 */ .message-body-grid{grid-template-columns:1fr;gap:36px;} .message-aside{position:static;width:100%;max-width:280px;margin:0 auto;} .message-photo{aspect-ratio:4/5;} .message-photo-deco{display:none;} /* 角のオレンジ装飾は省略 */ .message-photo-badge{ position:absolute;left:50%;right:auto;bottom:14px;transform:translateX(-50%); text-align:center;white-space:nowrap;padding:10px 18px; } .message-photo-badge .role, .message-photo-badge .name{white-space:nowrap;} /* 「島 拓真」を縦に折らない */ .footer-inner{grid-template-columns:1fr;} .page-hero-bg,.message-hero-bg{font-size:80px;} .bg-text--wpep,.bg-text--our,.bg-text--co{font-size:26px;} /* スマホ：会社概要テーブルを縦積み（ラベルの上に値）にして窮屈さを解消 */ .company-table tr{display:block;padding:14px 0;border-bottom:1px solid var(--line);} .company-table th,.company-table td{display:block;width:auto;padding:0;border:0;} .company-table th{font-size:13.5px;} .company-table td{margin-top:6px;} } @keyframes navOverlay{from{opacity:0;}to{opacity:1;}} @keyframes navItem{to{opacity:1;transform:none;}} @media (max-width:560px){ .company-grid{grid-template-columns:1fr;} .hero-cta{flex-direction:column;align-items:stretch;} .hero-cta .btn{justify-content:center;} }