/* Theme Name: Minato SR Theme URI: https://example.com/ Description: 東京都社会保険労務士会 港支部 公式サイト用オリジナルテーマ。Manus 製 React サイトを WordPress 自作テーマへ移植した雛形です。TOP ページ・共通ヘッダー/フッター・お知らせ（投稿）連携を実装しています。 Author: Media Rise Version: 0.1.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: minato-sr */ /* ========================================================================= Minimal reset (Tailwind の preflight 相当を最小限で置き換え) 元サイトは Tailwind に依存していましたが、公開ページは自作クラスのみを 使っているため、必要なリセットだけを移植して依存を無くしています。 ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } address { font-style: normal; } /* ========================================================================= Design system ── 元 index.css をそのまま移植 ========================================================================= */ :root { --navy:#183f78; --navy-2:#0f3266; --blue:#4165a0; --mist:#dceaf5; --paper:#f7f9fc; --ink:#1e2733; --muted:#687586; --gold:#ea9900; --gold-deep:#d98b00; --line:#d8e0e9; --white:#fff; --radius:22px; --shell:1120px; --ease:cubic-bezier(.23,1,.32,1); } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans JP",sans-serif; font-size:15px; line-height:1.9; overflow-x:hidden; } button,a { font:inherit; } a { color:inherit; text-decoration:none; } button { cursor:pointer; background:none; border:0; } img { max-width:100%; display:block; } :focus-visible { outline:3px solid var(--gold); outline-offset:4px; } .shell,.shell--narrow,.shell--article { width:min(calc(100% - 64px),var(--shell)); margin:0 auto; } .eyebrow { margin:0 0 2px; color:var(--navy); font:800 13px/1.25 "Plus Jakarta Sans","Noto Sans JP",sans-serif; letter-spacing:.13em; } .eyebrow--light { color:#fff; } /* 見出しブロックは幅を制限しない。以前は max-width:850px が掛かっており、 同じセクション内でカード(.point-grid 等＝shell幅1120px)より狭い位置で h2 が折り返してしまい、下のコンテンツと右端が揃わず不揃いに見えていた。 ただしリード文（見出し下の本文）は長いと読みづらいので、そこだけ従来の 850px を残す＝リード文の見え方は今までと変わらない。 */ .section-heading { margin-bottom:44px; } .section-heading h2 { margin:0; color:var(--ink); font-size:clamp(25px,3vw,36px); letter-spacing:.02em; line-height:1.55; font-weight:800; } .section-heading > p:not(.eyebrow) { max-width:850px; color:#435268; margin:13px 0 0; } .section-heading--light h2,.section-heading--light > p:not(.eyebrow) { color:#fff; } .section-heading--center { text-align:center; margin-inline:auto; } /* 中央寄せの場合、リード文の 850px も中央に置く（従来と同じ見え方を維持）。 */ .section-heading--center > p:not(.eyebrow) { margin-inline:auto; } .content-section { position:relative; padding:116px 0; } .section-white { background:#fff; } .section-mist { background:var(--mist); } .site-header { position:sticky; top:0; z-index:50; background:var(--navy); color:#fff; transition:box-shadow .25s var(--ease),background .25s var(--ease); } .site-header.is-scrolled { box-shadow:0 7px 25px rgba(8,31,72,.2); background:rgba(24,63,120,.97); } .site-header__inner { width:min(calc(100% - 48px),1360px); height:87px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:28px; } .brand { display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:18px; font-weight:700; white-space:nowrap; line-height:1.35; } .brand img { width:34px; height:34px; object-fit:contain; } .brand strong { font-weight:800; } .desktop-nav { display:flex; align-items:center; gap:26px; font-size:13px; font-weight:600; } .desktop-nav > a:not(.header-cta) { position:relative; padding:8px 0; } .desktop-nav > a:not(.header-cta)::after { position:absolute; right:0; bottom:1px; left:0; height:1px; background:#fff; content:""; transform:scaleX(0); transform-origin:right; transition:transform .22s var(--ease); } .desktop-nav > a:hover::after,.desktop-nav > a.is-active::after { transform:scaleX(1); transform-origin:left; } .header-cta,.gold-button { display:inline-flex; align-items:center; justify-content:center; gap:11px; background:var(--gold); color:#fff; font-weight:800; border-radius:999px; transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease); } .header-cta { padding:12px 19px; } .header-cta:hover,.gold-button:hover { background:var(--gold-deep); transform:translateY(-2px); box-shadow:0 12px 22px rgba(153,99,0,.23); } .header-cta:active,.gold-button:active { transform:scale(.97); } .mobile-menu-trigger,.mobile-nav { display:none; } /* ハンバーガーアイコンの中央寄せ ＆ ×への切り替えアニメーション */ .mobile-menu-trigger { position:relative; } .mobile-menu-trigger span { position:absolute; inset:0; display:grid; place-items:center; transition:opacity .28s var(--ease),transform .28s var(--ease); } .mobile-menu-trigger svg { display:block; } .mobile-menu-trigger [data-icon-menu] { opacity:1; transform:none; } .mobile-menu-trigger [data-icon-close] { opacity:0; transform:rotate(-90deg) scale(.55); } .mobile-menu-trigger[aria-expanded="true"] [data-icon-menu] { opacity:0; transform:rotate(90deg) scale(.55); } .mobile-menu-trigger[aria-expanded="true"] [data-icon-close] { opacity:1; transform:none; } .site-footer { background:#f5f7fb; } .site-footer__main { position:relative; min-height:312px; padding:66px 0 55px; display:grid; grid-template-columns:1.15fr 1fr auto; gap:70px; align-items:start; } .brand--footer { color:var(--ink); font-size:18px; } .footer-identity address { margin:20px 0 0; color:#465264; font-style:normal; font-size:12px; line-height:2; } .footer-nav { display:grid; grid-template-columns:repeat(3,max-content); gap:13px 56px; padding-top:8px; font-size:12px; line-height:1.6; } .footer-nav a:hover { color:var(--gold-deep); } .page-top { margin-top:83px; padding:0; border:0; background:transparent; display:flex; align-items:center; gap:10px; color:#374457; font-size:11px; } .page-top i { width:40px; height:40px; display:grid; place-items:center; border:1px solid #1e2938; border-radius:50%; font-style:normal; transition:background .2s,color .2s; } .page-top:hover i { color:white; background:var(--navy); } .site-footer__bar { padding:8px 20px; background:var(--navy); color:#fff; text-align:center; font-size:10px; font-weight:600; } .page-hero { position:relative; min-height:512px; overflow:hidden; isolation:isolate; background:var(--navy); color:#fff; display:flex; align-items:center; } .page-hero__image,.page-hero__veil { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .page-hero__image { opacity:.66; z-index:-3; } .page-hero__veil { z-index:-2; background:linear-gradient(90deg,rgba(15,50,102,.92) 0%,rgba(24,63,120,.78) 45%,rgba(24,63,120,.38) 100%); } .page-hero__orb { position:absolute; z-index:-1; width:48vw; height:48vw; border:1px solid rgba(219,235,255,.17); border-radius:50%; } .page-hero__orb--one { right:-23vw; top:-22vw; } .page-hero__orb--two { right:-14vw; bottom:-34vw; background:rgba(137,172,219,.11); } .page-hero__content { padding-top:64px; padding-bottom:105px; } .breadcrumb { margin:0 0 51px; color:rgba(255,255,255,.82); font-size:11px; letter-spacing:.04em; } .breadcrumb b { font-weight:400; padding:0 10px; opacity:.65; } .page-hero h1 { margin:6px 0 19px; max-width:850px; font-size:clamp(36px,5vw,60px); line-height:1.26; letter-spacing:.03em; font-weight:800; } .page-hero__lead { max-width:790px; margin:0; font-size:15px; font-weight:500; line-height:2; text-shadow:0 1px 2px rgba(0,0,0,.12); } /* 下層ヒーロー下端の波。こちらも px 固定の clip-path をやめてマスクに統一。 */ .page-hero__wave { position: absolute; z-index: 0; right: 0; bottom: -1px; left: 0; height: 82px; background: #fff; clip-path: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2200 130' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 66 C 300 10 630 102 1000 56 S 1740 11 2200 52 L 2200 130 L 0 130 Z'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2200 130' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 66 C 300 10 630 102 1000 56 S 1740 11 2200 52 L 2200 130 L 0 130 Z'/%3E%3C/svg%3E") no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } @media (max-width:767px) { .page-hero__wave { -webkit-mask:none; mask:none; } } .member-cta { position:relative; min-height:350px; isolation:isolate; overflow:hidden; background:var(--navy); padding:73px 0; } .member-cta__city { position:absolute; inset:0; z-index:-2; background:linear-gradient(rgba(18,58,112,.86),rgba(18,58,112,.92)),url("https://images.unsplash.com/photo-1493780474015-ba834fd0ce2f?auto=format&fit=crop&w=2200&q=85") center/cover; } .member-cta__card { padding:36px 58px 41px; background:#fff; border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.1); } .member-cta h2 { margin:0 0 24px; text-align:center; font-size:clamp(27px,2.9vw,37px); line-height:1.5; } .member-cta__body { display:grid; grid-template-columns:1fr 1.03fr; align-items:center; gap:70px; } .member-cta p:not(.eyebrow) { margin:0; max-width:630px; font-size:13px; line-height:1.9; } .gold-button { min-height:76px; padding:17px 21px; border-radius:10px; font-size:16px; } .gold-button > i { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--gold); font-style:normal; } .reveal { opacity:0; transform:translateY(22px); transition:opacity .65s var(--ease),transform .65s var(--ease); } .reveal.is-visible { opacity:1; transform:none; } .home-hero { position:relative; overflow:hidden; min-height:660px; display:flex; color:#fff; background-color:#0c204a; background-size:cover; background-position:center; background-repeat:no-repeat; } .home-hero__inner { display:flex; flex-direction:column; padding:120px 0 48px; } .home-hero__copy { position:relative; z-index:2; max-width:560px; } .home-hero__eyebrow { margin:0 0 14px; display:inline-flex; align-items:center; gap:13px; color:#c5daf2; font:700 11px/1.2 "Plus Jakarta Sans"; letter-spacing:.16em; } .home-hero__eyebrow::before { content:""; width:38px; height:1px; background:currentColor; opacity:.75; } /* MV の CTA。ヘッダーの CTA（.header-cta）と同じゴールドに統一する。 同じ文言・同じアイコン・同じ色にして「別々の行き先」に見えないようにする狙い。 */ .home-hero__cta { margin-top:26px; display:inline-flex; align-items:center; gap:11px; padding:15px 30px; background:var(--gold); color:#fff; font-weight:800; font-size:15px; border-radius:6px; transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease); } .home-hero__cta svg { width:18px; height:18px; } .home-hero__cta:hover { background:var(--gold-deep); transform:translateY(-2px); box-shadow:0 12px 22px rgba(153,99,0,.23); } .home-hero h1 { margin:0 0 17px; font-size:clamp(36px,4vw,58px); line-height:1.34; letter-spacing:.035em; } .home-hero__copy > p:not(.home-hero__eyebrow) { max-width:540px; margin:0; font-size:14px; line-height:1.95; } /* 数字パネル。デザイン指定色は #3C82B1 だが、その明るさのまま半透明にすると 背後の写真（特に SP の明るい空）で白文字のコントラストが 2.4:1 まで落ちて読めない。 そこで**同系色のまま暗くした #1D4A6E = rgb(29,74,110) を 65%** で使う。 実測コントラスト（白文字）: PC の街並みの上 6.74:1 ／ SP の空の上 4.62:1 ＝どちらも WCAG AA(4.5:1) を満たす。透け感は 35% 残る。 明るくしたいなら色を #22557C 寄りに、透け感を増やすなら .65 を下げる （.55 まで下げると SP で 3.85:1＝大きい数字のみ基準クリア）。 上との間隔は padding ではなく margin で取る（padding はパネル内側の余白になるため）。 */ .hero-stats { position:relative; z-index:2; margin-top:auto; align-self:flex-start; display:flex; flex-direction:column; padding:18px 10px; background:rgba(29,74,110,.65); border:1px solid rgba(255,255,255,.5); } /* 上段＝全会員数。下層ページの数字カードと同じく、内訳より一段大きく見せる。 */ .hero-stats__total { padding:0 22px 12px; margin-bottom:12px; text-align:center; border-bottom:1px solid rgba(255,255,255,.34); } /* 内訳側の .hero-stats strong より後ろに来る指定があるため、詳細度を上げて確実に効かせる。 */ .hero-stats .hero-stats__total strong { font-size:40px; } /* 下段＝内訳（開業／法人／勤務／その他）。 */ .hero-stats__row { display:flex; justify-content:center; } /* 更新日を入れる場合は、その分だけパネルの下側を空ける。 更新日は絶対配置（＝パネルの幅に影響させない）ので、余白は自前で確保する必要がある。 */ .hero-stats--dated { padding-bottom:32px; } .hero-stats__row > div { padding:0 22px; text-align:center; } .hero-stats__row > div:first-child { text-align:center; } .hero-stats__row > div + div { border-left:1px solid rgba(255,255,255,.4); } .hero-stats span { display:block; font-size:12px; font-weight:700; margin-bottom:6px; } .hero-stats strong { font:800 33px/1 "Plus Jakarta Sans"; } .hero-stats small { font:700 13px "Noto Sans JP"; margin-left:2px; } /* 更新日（ACF「会員数」の member-update）。パネル内の右下に絶対配置する。 フレックスアイテムのままだと、折り返し時の最大幅計算に日付の幅が加算されて パネルが横に広がってしまうため（実測 +129px）、レイアウトから外している。 */ .hero-stats-note { position:absolute; right:12px; bottom:8px; margin:0; color:rgba(255,255,255,.92); font-size:11px; font-weight:700; letter-spacing:.02em; white-space:nowrap; } .news-preview { position:relative; padding:113px 0 144px; overflow:hidden; } .news-list { overflow:hidden; background:#fff; border-radius:12px; box-shadow:0 12px 30px rgba(57,92,138,.08); transition:box-shadow .3s var(--ease); } .news-list:hover { box-shadow:0 19px 37px rgba(57,92,138,.14); } .news-row { padding:21px 31px; display:grid; grid-template-columns:100px 110px 1fr 20px; align-items:center; gap:14px; border-bottom:1px solid var(--line); font-size:13px; transition:background .22s var(--ease),padding-left .22s var(--ease),color .22s var(--ease); } .news-row:last-child { border-bottom:none; } .news-row:hover { padding-left:38px; background:#f7faff; color:var(--navy); } .news-row svg { color:var(--navy); opacity:0; transform:translateX(-6px); transition:.18s var(--ease); } .news-row:hover svg { opacity:1; transform:none; } .tag { display:inline-grid; place-items:center; width:max-content; min-width:83px; padding:3px 10px; border-radius:999px; color:white; background:#4978ad; font-size:11px; font-weight:700; line-height:1.5; transition:transform .2s var(--ease),box-shadow .2s var(--ease); } .news-row:hover .tag { transform:scale(1.04); box-shadow:0 5px 12px rgba(34,69,119,.16); } .tag--gold { background:var(--gold); } .news-empty { margin:0; padding:34px 31px; color:var(--muted); font-size:14px; } .text-arrow { width:max-content; margin:27px 0 0 auto; display:flex; align-items:center; gap:10px; color:var(--navy); font-size:13px; font-weight:800; transition:color .2s var(--ease); } .text-arrow i { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--navy); color:white; font-style:normal; transition:.2s var(--ease); } .text-arrow:hover { color:var(--gold-deep); } .text-arrow:hover i { transform:translateX(4px); background:var(--gold); } .text-arrow--gold { color:var(--gold-deep); } .text-arrow--gold i { background:var(--gold); } .text-arrow--light { color:#fff; } .text-arrow--light i { background:#fff; color:var(--navy); } .bottom-wave { position:absolute; right:0; bottom:-1px; left:0; height:79px; } /* 波は SVG マスクで切り抜く。clip-path:path() は座標が px 固定のため、 ビューポートが path の座標系（1920px）を超えると形が途切れて四角くなる。 preserveAspectRatio="none" のマスクなら画面幅にそのまま追従する。 */ .bottom-wave--white { background: #fff; clip-path: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 59 C 244 7 566 123 932 61 S 1528 2 1920 47 L 1920 100 L 0 100 Z'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 59 C 244 7 566 123 932 61 S 1528 2 1920 47 L 1920 100 L 0 100 Z'/%3E%3C/svg%3E") no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .bottom-wave--mist { background: var(--mist); clip-path: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 62 C 300 6 620 117 1000 53 S 1630 8 1920 51 L 1920 100 L 0 100 Z'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 62 C 300 6 620 117 1000 53 S 1630 8 1920 51 L 1920 100 L 0 100 Z'/%3E%3C/svg%3E") no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } @media (max-width:767px) { .bottom-wave--white,.bottom-wave--mist { -webkit-mask:none; mask:none; } } .home-section-heading { margin:0; } .home-section-heading p { margin:0; color:#24569d; font:800 clamp(28px,3vw,44px)/1 "Plus Jakarta Sans"; letter-spacing:-.035em; } .home-section-heading h2 { margin:5px 0 0; color:#1b2737; font-size:clamp(21px,2vw,28px); line-height:1.2; } .home-section-heading--news { margin-bottom:52px; } .home-section-heading--sr { margin-bottom:71px; } .intro-split { position:relative; overflow:hidden; padding:115px 0 140px; } .intro-split--sr { background:#fff; } .intro-split__circle { position:absolute; top:25px; left:-105px; width:530px; height:530px; border-radius:50%; background:#eef3fa; } .intro-split__grid { position:relative; z-index:1; display:grid; grid-template-columns:.86fr 1.14fr; gap:69px; align-items:center; } .intro-split__copy { max-width:500px; } .intro-split__copy > p:not(.eyebrow) { margin:0; font-size:14px; line-height:2.1; } .intro-split__copy--sr { padding-top:42px; } .intro-photo-stack { height:374px; position:relative; } .intro-photo-stack img { position:absolute; object-fit:cover; border-radius:12px; box-shadow:0 17px 30px rgba(28,53,86,.13); } .intro-photo-stack img:first-child { width:60%; height:258px; left:0; top:0; } .intro-photo-stack img:last-child { width:49%; height:220px; right:0; bottom:0; } .intro-split--branch { color:white; background:linear-gradient(#315992 0%,#91b1d8 100%); overflow:hidden; } .intro-split__orb-clip { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; } .intro-split--branch .home-branch { position:relative; z-index:2; } .intro-split__orb { position:absolute; top:-300px; right:-85px; width:590px; height:590px; border:1px solid rgba(255,255,255,.16); border-radius:50%; background:rgba(101,134,187,.42); } .home-branch { position:relative; z-index:1; } .home-section-heading--branch { text-align:center; margin-bottom:54px; } .home-section-heading--branch p,.home-section-heading--branch h2 { color:#fff; } .home-branch__grid { display:grid; grid-template-columns:1.04fr .92fr; gap:80px; align-items:center; } .intro-photo-single img { width:100%; height:360px; object-fit:cover; border-radius:22px; box-shadow:0 17px 30px rgba(28,53,86,.12); } .intro-split__copy--light > p { color:#fff; font-size:16px; font-weight:700; line-height:2.08; } .minato-map { display:block; width:270px; max-width:100%; height:auto; margin:26px 0 12px; } .archive-section { padding:100px 0 135px; } .filter-row { margin-bottom:29px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .filter-row span,.filter-row button { min-width:82px; padding:7px 14px; border-radius:999px; border:1px solid #9db2c9; background:#fff; color:var(--navy); font-size:12px; font-weight:700; } .filter-row span { color:#fff; background:var(--navy); border-color:var(--navy); text-align:center; } .filter-row button:hover { color:#fff; background:var(--gold); border-color:var(--gold); } .archive-list { border-top:1px solid #2e527f; } .archive-card { position:relative; min-height:116px; padding:31px 74px 28px 0; display:grid; grid-template-columns:109px 105px 1fr; gap:12px; align-items:start; border-bottom:1px solid var(--line); transition:padding-left .2s var(--ease); } .archive-card h2 { margin:0; font-size:16px; line-height:1.7; } .archive-card time { color:#576477; font:700 12px "Plus Jakarta Sans"; } .archive-card i { position:absolute; right:4px; top:50%; width:38px; height:38px; display:grid; place-items:center; color:white; background:var(--navy); border-radius:50%; font-style:normal; transform:translateY(-50%); transition:.2s var(--ease); } .archive-card:hover { padding-left:10px; } .archive-card:hover i { background:var(--gold); transform:translate(4px,-50%); } .article { padding:100px 0 130px; } .article__header { padding-bottom:36px; border-bottom:1px solid var(--navy); } .article__header > div { display:flex; align-items:center; gap:14px; } .article__header time { font:700 13px "Plus Jakarta Sans"; color:#556579; } .article__header h1 { margin:19px 0 0; font-size:clamp(25px,3vw,39px); line-height:1.65; } .article__body { padding:45px 0 52px; font-size:15px; line-height:2.3; } .article__nav { padding-top:29px; display:flex; justify-content:space-between; border-top:1px solid var(--line); } .article__nav a { display:flex; align-items:center; gap:8px; color:var(--navy); font-size:13px; font-weight:800; } .article__nav a:hover { color:var(--gold-deep); } .greeting-section { padding-bottom:132px; } .greeting-grid { display:grid; grid-template-columns:350px 1fr; gap:86px; align-items:start; } .greeting-grid--single { grid-template-columns:1fr; } .chair-portrait { position:sticky; top:112px; margin:0; } .chair-portrait img { width:100%; height:432px; object-fit:cover; border-radius:13px; box-shadow:0 16px 30px rgba(35,62,99,.13); } .chair-portrait figcaption { margin-top:10px; color:#738096; font-size:11px; text-align:center; } .greeting-copy h3 { margin:0 0 25px; padding-bottom:22px; border-bottom:2px solid var(--navy); font-size:clamp(23px,2.7vw,32px); line-height:1.65; } .greeting-copy p { margin:0 0 22px; line-height:2.2; } .signature { margin-top:34px !important; text-align:right; font-size:13px; } .signature strong { display:inline-block; margin-top:6px; font-size:20px; letter-spacing:.13em; } .activities-section { padding-bottom:154px; } .activity-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .activity-card { height:100%; overflow:hidden; border-radius:14px; background:#fff; box-shadow:0 11px 23px rgba(36,65,108,.08); } .activity-card > img { width:100%; height:155px; object-fit:cover; } .activity-card > div { position:relative; padding:20px 20px 26px; } .activity-card span { display:block; color:var(--gold-deep); font:800 11px "Plus Jakarta Sans"; letter-spacing:.1em; } .activity-card h3 { margin:3px 0 10px; font-size:18px; } .activity-card p { margin:0; font-size:12px; line-height:1.9; } .numbers-section { position:relative; overflow:hidden; padding:118px 0 110px; isolation:isolate; background:linear-gradient(135deg,#173c74,#6688ba); color:#fff; } .numbers-section__arc { position:absolute; z-index:-1; top:-340px; right:-120px; width:710px; height:710px; border:1px solid rgba(255,255,255,.2); border-radius:50%; } .numbers-card { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; background:#fff; color:var(--ink); border-radius:12px; box-shadow:0 20px 38px rgba(13,40,83,.15); } .numbers-card > div { min-height:172px; padding:36px 25px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:1px solid var(--line); } .numbers-card > div:last-child { border:0; } .numbers-card .numbers-card__total { grid-column:1/-1; min-height:170px; background:#f8fafc; border-right:0; border-bottom:1px solid var(--line); } .numbers-card span { font-size:12px; font-weight:700; } .numbers-card strong { margin-top:6px; font:800 51px/1 "Plus Jakarta Sans"; letter-spacing:-.04em; } .numbers-card strong small { margin-left:5px; font:700 14px "Noto Sans JP"; letter-spacing:0; } .numbers-card__total strong { font-size:68px; } .numbers-note { margin:13px 0 0; color:#fff; font-size:11px; } .overview-section { padding-top:122px; } .overview-table { margin:0; border-top:2px solid var(--navy); } .overview-table > div { display:grid; grid-template-columns:190px 1fr; border-bottom:1px solid var(--line); } .overview-table dt,.overview-table dd { margin:0; padding:19px 24px; font-size:14px; } .overview-table dt { background:#edf3f9; color:#1d3f73; font-weight:800; } .overview-table dd { background:#fff; } /* 本文の幅制限は撤去（ユーザー判断）。同じセクション内の見出し・カードが shell 幅 1120px なので、本文だけ 780px だと右端が揃わず不揃いに見えたため。 1行が長くなるぶんは line-height:2.2 の広めの行間で読みやすさを補っている。 ※POINT04 は 2 カラム（.regulation-grid の 1fr 側＝約613px）の中にあるので、 元々この指定は効いておらず、今回の変更でも見え方は変わらない。 */ .rich-copy { max-width:none; } .rich-copy p { margin:0 0 20px; font-size:15px; line-height:2.2; } .point-grid { margin-top:47px; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--navy); } .point-grid article { min-height:255px; padding:26px 28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .point-grid article:first-child { border-left:1px solid var(--line); } .point-grid span { color:var(--gold-deep); font:800 11px "Plus Jakarta Sans"; letter-spacing:.1em; } .point-grid h3 { margin:6px 0 12px; font-size:19px; } .point-grid p { margin:0; color:#4d5c70; font-size:12px; line-height:1.9; } .duties-section { position:relative; overflow:hidden; padding-bottom:162px; background:linear-gradient(135deg,#183f78,#5d80b5); color:#fff; } .duty-grid { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; background:#fff; color:var(--ink); border-radius:12px; box-shadow:0 17px 30px rgba(14,36,73,.14); } .duty-grid article { min-height:332px; padding:31px 28px; border-right:1px solid var(--line); } .duty-grid article:last-child { border:0; } .duty-number { display:flex; align-items:baseline; gap:5px; color:var(--navy); font:800 38px/1 "Plus Jakarta Sans"; } .duty-number small { font:700 13px "Noto Sans JP"; } .duty-subtitle { min-height:22px; margin:7px 0 8px !important; color:var(--gold-deep); font-weight:800; font-size:11px !important; } .duty-grid h3 { margin:0 0 12px; font-size:20px; } .duty-grid p { margin:0; color:#4e5c70; font-size:12px; line-height:1.9; } .exclusive-section { padding-top:123px; } .check-list { list-style:none; padding:0; margin:37px 0 0; } .check-list--two { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 45px; } .check-list li { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.8; } .check-list svg { flex:0 0 auto; width:20px; height:20px; padding:4px; border-radius:50%; color:#fff; background:#5f89bb; margin-top:3px; } .regulations-section { padding-block:130px; } .regulation-grid { display:grid; grid-template-columns:1fr .72fr; gap:66px; align-items:center; } .regulations-image { width:100%; height:369px; border-radius:14px; object-fit:cover; box-shadow:0 18px 34px rgba(28,53,86,.14); } .regulation-tags { margin-top:53px; display:flex; flex-wrap:wrap; gap:9px; } .regulation-tags span { padding:8px 16px; color:var(--navy); background:#edf4fa; border-radius:999px; font-size:12px; font-weight:700; } .hr-section { background:linear-gradient(160deg,#163a70,#4772ad); color:#fff; } .topic-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(255,255,255,.2); } .topic-grid article { min-height:245px; padding:29px 27px; background:rgba(16,52,102,.58); transition:background .22s var(--ease),transform .22s var(--ease); } .topic-grid article:hover { background:rgba(15,43,85,.88); transform:translateY(-4px); } .topic-grid span { color:#f4b02e; font:800 12px "Plus Jakarta Sans"; letter-spacing:.1em; } .topic-grid h3 { margin:5px 0 10px; font-size:18px; line-height:1.55; } .topic-grid p { margin:0; color:rgba(255,255,255,.82); font-size:12px; line-height:1.9; } .checks-section { padding-block:130px; } .check-list--large { gap:18px 68px; } .check-list--large li { font-size:15px; } .checks-note { margin:38px 0 0; color:#405168; font-size:14px; } /* ネイビーの波（→ 数字で見る港支部 の境界）。数字セクションと同じグラデーションを SVG マスクで波形に切り抜く（画面幅に追従）。 【地続きに見せるための 2 点】 1) グラデーションの描画サイズを 780px（＝数字セクションのおおよその高さ。実測765px）にする。 波の高さ 79px のまま描くと 135deg のグラデーションが 79px で終端まで到達し、 右側で数字セクションより明るくなって横一直線の継ぎ目が出る。 同じ縦幅で描いてその上端 79px だけを見せることで、色が繋がる。 2) 数字セクションの網目（.numbers-section__grid）を ::before で波にも敷く。 縦位置は 20px ずらして、波の下端でちょうど格子線がセクション側と揃うようにする （波の高さ79px・下端は1px 食い込む・格子 58px → 78 - 58 = 20px）。 斜めのフェードは箱の高さで角度が変わるため、セクション側の上辺の見え方に 近くなる 110deg / 42% で近似している。 */ .bottom-wave--navy { clip-path: none; background-image: linear-gradient(135deg,#173c74,#6688ba); background-size: 100% 780px; background-repeat: no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 59 C 244 7 566 123 932 61 S 1528 2 1920 47 L 1920 100 L 0 100 Z'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 59 C 244 7 566 123 932 61 S 1528 2 1920 47 L 1920 100 L 0 100 Z'/%3E%3C/svg%3E") no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .bottom-wave--navy::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.75) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.75) 1px,transparent 1px); background-size: 58px 58px; background-position: 0 20px; -webkit-mask-image: linear-gradient(110deg,transparent 0%,black 42%,black 100%); mask-image: linear-gradient(110deg,transparent 0%,black 42%,black 100%); } @media (max-width:767px) { .bottom-wave--navy { -webkit-mask: none; mask: none; background-image: linear-gradient(135deg,#173c74,#6688ba); background-size: 100% 780px; } .bottom-wave--navy::before { display: none; } } /* 波（社労士とは → 港支部について の境界）。 ABOUT US（青）セクションの先頭に「白いフタ」を置き、波の“上側”だけを白で覆う方式。 青を上へ被せる方式だと、装飾オーブ（半透明の円）を不透明な青で塗り潰してしまい、 フタの下端に横一直線の色段差が出る（＝上で切れて見える）。白フタ方式なら 波より下は青のグラデ＋オーブがそのまま連続するので段差が出ない。 オーブの上端カット位置(セクション上端=0px)は波の最上部(約14px)より上にあるため白フタで隠れる。 */ .bottom-wave--branch { top: 0; bottom: auto; height: 100px; z-index: 1; clip-path: none; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 59 C 244 7 566 123 932 61 S 1528 2 1920 47 L 1920 0 L 0 0 Z'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 59 C 244 7 566 123 932 61 S 1528 2 1920 47 L 1920 0 L 0 0 Z'/%3E%3C/svg%3E") no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* モバイルはマスク非対応環境を考慮して角丸で代用（白ブロックの下端を丸める）。 .bottom-wave の共通モバイル指定より後勝ちさせるため詳細度を上げる。 */ @media (max-width:767px) { .intro-split--branch .bottom-wave--branch { -webkit-mask: none; mask: none; height: 44px; background: #fff; border-radius: 0 0 50% 50% / 0 0 100% 100%; } } /* エディター本文（the_content の出力）の共通タイポグラフィ。 このテーマのリセットは h1〜h6 の font-size/font-weight を inherit にし、 見出し・段落・リストの margin も 0 にしている（Tailwind preflight 相当）。 そのため管理画面で付けた見出しや箇条書きは、ここで明示的に指定しないと 本文と同じ見た目のままになる。固定ページ(.page-content)と お知らせ詳細(.article__body)の両方に同じ指定を当てる。 */ .page-content { max-width:820px; margin:0 auto; font-size:15px; line-height:2; color:var(--ink); } .page-content > *:first-child,.article__body > *:first-child { margin-top:0; } .page-content > *:last-child,.article__body > *:last-child { margin-bottom:0; } .page-content h2,.article__body h2 { margin:46px 0 16px; color:var(--navy); font-size:clamp(20px,2.4vw,25px); font-weight:800; line-height:1.55; } .page-content h3,.article__body h3 { margin:34px 0 12px; font-size:18px; font-weight:800; line-height:1.6; } .page-content h4,.article__body h4 { margin:26px 0 10px; font-size:16px; font-weight:800; } .page-content h5,.article__body h5 { margin:22px 0 8px; font-size:15px; font-weight:800; } .page-content h6,.article__body h6 { margin:20px 0 8px; color:var(--muted); font-size:14px; font-weight:800; } .page-content p,.article__body p { margin:0 0 20px; } .page-content ul,.page-content ol,.article__body ul,.article__body ol { margin:0 0 22px; padding-left:1.5em; } .page-content ul,.article__body ul { list-style:disc; } .page-content ol,.article__body ol { list-style:decimal; } .page-content li,.article__body li { margin:0 0 9px; line-height:1.9; } .page-content li::marker,.article__body li::marker { color:var(--blue); } .page-content a,.article__body a { color:var(--navy); text-decoration:underline; } .page-content a:hover,.article__body a:hover { color:var(--gold-deep); } .page-content strong,.article__body strong { font-weight:800; } .page-content em,.article__body em { font-style:italic; } .page-content img,.article__body img { max-width:100%; height:auto; border-radius:10px; } .page-content figure,.article__body figure { margin:0 0 24px; } .page-content figcaption,.article__body figcaption { margin-top:8px; color:var(--muted); font-size:13px; line-height:1.8; text-align:center; } .page-content blockquote,.article__body blockquote { margin:0 0 24px; padding:4px 0 4px 20px; border-left:3px solid var(--mist); color:#41506a; } .page-content blockquote > *:last-child,.article__body blockquote > *:last-child { margin-bottom:0; } .page-content hr,.article__body hr { margin:38px 0; border:0; border-top:1px solid var(--line); } .page-content table,.article__body table { width:100%; margin:0 0 24px; border-collapse:collapse; } .page-content th,.page-content td,.article__body th,.article__body td { padding:12px 14px; border:1px solid var(--line); text-align:left; font-size:14px; } .page-content th,.article__body th { background:#edf3f9; color:#1d3f73; font-weight:800; } /* 横に長い表はブロックごと横スクロール（スマホでレイアウトを壊さない） */ .page-content .wp-block-table,.article__body .wp-block-table { margin:0 0 24px; overflow-x:auto; } .page-content .wp-block-table table,.article__body .wp-block-table table { margin:0; } /* 画像の回り込み（クラシックエディター由来のクラス） */ .page-content .aligncenter,.article__body .aligncenter { display:block; margin-inline:auto; } .page-content .alignright,.article__body .alignright { float:right; margin:0 0 16px 22px; } .page-content .alignleft,.article__body .alignleft { float:left; margin:0 22px 16px 0; } /* 複数ページに分割した記事のページ送り（wp_link_pages） */ .page-links { margin:8px 0 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; font-weight:700; } .page-links a { display:inline-block; padding:4px 11px; border:1px solid var(--line); border-radius:6px; color:var(--navy); text-decoration:none; } .page-links a:hover { color:#fff; background:var(--navy); border-color:var(--navy); } /* 回り込み解除（フロート画像が次のセクションへはみ出さないように） */ .page-content::after,.article__body::after { content:""; display:block; clear:both; } @media (max-width:767px) { .page-content .alignright,.article__body .alignright, .page-content .alignleft,.article__body .alignleft { float:none; margin:0 0 16px; } .page-content h2,.article__body h2 { margin-top:36px; } .page-content h3,.article__body h3 { margin-top:28px; } } /* ========================================================================= スクリーンリーダー専用テキスト the_posts_pagination() は「投稿ナビゲーション」「固定ページ」といった 読み上げ用テキストを .screen-reader-text で出力する。テーマ側にこの ユーティリティが無いと、その文字がそのまま画面に表示されてしまう。 ========================================================================= */ .screen-reader-text { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .screen-reader-text:focus { z-index:100; top:8px; left:8px; width:auto; height:auto; margin:0; padding:12px 20px; clip:auto; clip-path:none; background:#fff; color:var(--navy); font-size:14px; font-weight:700; border-radius:6px; box-shadow:0 6px 18px rgba(15,43,85,.2); } /* ========================================================================= ページネーション（the_posts_pagination の出力） お知らせ一覧 archive-news.php ／ 汎用一覧 index.php で使用。 意匠は一覧のカテゴリーボタン(.filter-row)と矢印(.archive-card i)に合わせ、 現在地＝ネイビー塗り、ホバー＝ゴールド塗り。 ========================================================================= */ .pagination { margin-top:58px; } .pagination .nav-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; } .pagination .page-numbers { min-width:44px; height:44px; padding:0 15px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #9db2c9; border-radius:999px; background:#fff; color:var(--navy); font:700 13px/1 "Plus Jakarta Sans","Noto Sans JP",sans-serif; letter-spacing:.02em; transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease); } .pagination a.page-numbers:hover { color:#fff; background:var(--gold); border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 16px rgba(153,99,0,.2); } .pagination .page-numbers.current { color:#fff; background:var(--navy); border-color:var(--navy); } .pagination .page-numbers.dots { min-width:0; padding:0 4px; border-color:transparent; background:transparent; color:var(--muted); } .pagination .prev,.pagination .next { font-weight:800; } @media (max-width:767px) { .pagination { margin-top:40px; } .pagination .nav-links { gap:6px; } .pagination .page-numbers { min-width:38px; height:38px; padding:0 12px; font-size:12px; } .pagination .page-numbers.dots { min-width:0; padding:0 2px; } } /* 404 ページ */ .notfound { text-align:center; } .notfound .section-heading { margin-inline:auto; } .notfound__code { margin:0 0 6px; color:#24569d; font:800 clamp(64px,10vw,120px)/1 "Plus Jakarta Sans"; letter-spacing:-.03em; } .notfound__links { margin:40px 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:14px; } .notfound__links .gold-button { min-height:60px; padding:15px 26px; font-size:15px; } .notfound__links .text-arrow { margin:0; } @media (max-width:1000px) { .desktop-nav { gap:14px; font-size:12.5px; }.brand { font-size:16px; }.header-cta span { display:none; }.home-hero__copy { margin-left:0; }.hero-stats strong { font-size:28px; }.greeting-grid { grid-template-columns:280px 1fr; gap:48px; }.activity-grid,.topic-grid { grid-template-columns:repeat(2,1fr); }.regulation-grid { gap:42px; }.site-footer__main { grid-template-columns:1fr 1fr; gap:38px; }.page-top { margin-top:0; justify-self:end; }.footer-nav { gap:13px 25px; } } @media (max-width:767px) { body { font-size:14px; }.shell,.shell--narrow,.shell--article { width:min(calc(100% - 36px),var(--shell)); }.site-header__inner { width:calc(100% - 36px); height:72px; }.brand { font-size:13px; gap:7px; }.brand img { width:30px; height:30px; }.desktop-nav { display:none; }.mobile-menu-trigger { display:grid; place-items:center; width:39px; height:39px; padding:0; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.58); border-radius:50%; }.mobile-nav { position:absolute; top:72px; right:0; left:0; padding:17px 18px 21px; display:flex; flex-direction:column; gap:2px; background:#fff; color:var(--ink); box-shadow:0 13px 25px rgba(15,43,85,.18); transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s .28s; }.mobile-nav.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s 0s; }.mobile-nav > a:not(.mobile-nav__cta) { padding:10px 5px; border-bottom:1px solid var(--line); font-weight:700; }.mobile-nav__cta { margin-top:10px; padding:13px 15px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:7px; background:var(--gold); color:#fff; font-weight:800; }.page-hero { min-height:464px; }.page-hero__content { padding-top:54px; padding-bottom:88px; }.breadcrumb { margin-bottom:33px; }.page-hero h1 { font-size:35px; }.page-hero__lead { font-size:13px; line-height:1.9; }.page-hero__wave { height:42px; clip-path:none; border-radius:50% 50% 0 0/100% 100% 0 0; }.content-section { padding:78px 0; }.section-heading { margin-bottom:30px; }.section-heading h2 { font-size:25px; }.member-cta { padding:42px 0; }.member-cta__card { padding:30px 25px; grid-template-columns:1fr; gap:25px; border-radius:10px; }.gold-button { min-height:64px; font-size:13px; }.home-hero__copy > p:not(.home-hero__eyebrow) { font-size:12px; line-height:1.85; }.hero-stats__row > div { padding:0 14px; }.hero-stats span { font-size:10px; }.hero-stats strong { font-size:24px; }.hero-stats small { font-size:10px; }.news-preview { padding:77px 0 112px; }.news-row { padding:15px; grid-template-columns:1fr max-content; gap:6px 10px; font-size:12px; }.news-row time { grid-column:1; }.news-row .tag { grid-column:2; grid-row:1; }.news-row > span:nth-of-type(2) { grid-column:1/-1; }.news-row svg { display:none; }.intro-split { padding:79px 0 95px; }.intro-split__grid,.intro-split__grid--reverse,.regulation-grid { grid-template-columns:1fr; gap:34px; }.intro-split__circle { width:340px; height:340px; left:-185px; top:35px; }.intro-photo-stack { height:275px; }.intro-photo-stack img:first-child { height:198px; }.intro-photo-stack img:last-child { height:150px; }.intro-photo-single img { height:235px; }.intro-split__grid--reverse > :first-child { order:2; }.intro-split__copy h2 { font-size:29px; }.archive-section,.article { padding:72px 0 85px; }.archive-card { min-height:0; padding:20px 47px 20px 0; display:flex; flex-wrap:wrap; gap:7px 10px; }.archive-card h2 { flex-basis:100%; font-size:14px; }.archive-card i { width:31px; height:31px; }.article__header h1 { font-size:24px; }.article__body { font-size:14px; }.article__nav { gap:18px; }.greeting-grid { grid-template-columns:1fr; gap:36px; }.chair-portrait { position:static; width:70%; max-width:285px; }.chair-portrait img { height:342px; }.greeting-copy h3 { font-size:23px; }.activity-grid,.topic-grid,.point-grid,.duty-grid { grid-template-columns:1fr; }.activity-card > img { height:190px; }.numbers-section { padding:76px 0; }.numbers-card { grid-template-columns:repeat(3,1fr); }.numbers-card > div { min-height:125px; padding:18px 9px; }.numbers-card .numbers-card__total { min-height:141px; }.numbers-card strong { font-size:27px; }.numbers-card__total strong { font-size:51px; }.numbers-card span { font-size:10px; }.overview-table > div { grid-template-columns:109px 1fr; }.overview-table dt,.overview-table dd { padding:14px 11px; font-size:12px; line-height:1.7; }.point-grid article,.duty-grid article { min-height:0; border-left:1px solid var(--line); }.duty-grid article:last-child { border-bottom:1px solid var(--line); }.check-list--two { grid-template-columns:1fr; gap:12px; }.regulations-image { height:260px; }.topic-grid article { min-height:0; }.site-footer__main { min-height:0; padding:48px 0 36px; grid-template-columns:1fr; gap:30px; }.footer-nav { grid-template-columns:repeat(2,max-content); gap:12px 30px; }.page-top { justify-self:start; }.brand--footer { font-size:15px; }.bottom-wave { height:41px; clip-path:none; border-radius:50% 50% 0 0/100% 100% 0 0; } } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; }.reveal { opacity:1; transform:none; } } /* TOP scroll motion: decorative elements travel subtly with the viewport while copy stays stable and readable. */ @media (prefers-reduced-motion: no-preference) { [data-home-motion] { --scroll-offset:0px; } .news-preview .section-heading { transform:translateY(calc(var(--scroll-offset) * -.52)); will-change:transform; } .news-preview .news-list { transform:translateY(calc(var(--scroll-offset) * .34)); will-change:transform; } .intro-split--sr .intro-split__circle { transform:translate(calc(var(--scroll-offset) * -.72),calc(var(--scroll-offset) * .32)); will-change:transform; } .intro-split--sr .intro-photo-stack { transform:translateY(calc(var(--scroll-offset) * .55)); will-change:transform; } .intro-split--branch .intro-split__orb { transform:translateY(calc(var(--scroll-offset) * -.62)); will-change:transform; } .intro-split--branch .intro-photo-single { transform:translateY(calc(var(--scroll-offset) * .46)); will-change:transform; } .home-cta-motion .member-cta__card { transform:translateY(calc(var(--scroll-offset) * .38)); will-change:transform; } .intro-photo-stack img,.intro-photo-single img { transition:transform .38s var(--ease),box-shadow .38s var(--ease),filter .38s var(--ease); } .intro-photo-stack img:hover { transform:translateY(-8px) scale(1.025); filter:saturate(1.08); box-shadow:0 25px 40px rgba(28,53,86,.22); } .intro-photo-single:hover img { transform:translateY(-7px) scale(1.018); filter:saturate(1.06); box-shadow:0 27px 42px rgba(28,53,86,.23); } .member-cta__card { transition:box-shadow .32s var(--ease),transform .32s var(--ease); } .member-cta__card:hover { box-shadow:0 27px 54px rgba(0,0,0,.18); } } /* Refined page rhythm: official information pages retain the same arc, mist and proof-color language as the primary sections. */ .archive-section { position:relative; isolation:isolate; padding-bottom:108px; overflow:hidden; } .archive-section__arc { position:absolute; z-index:-1; right:-190px; bottom:-270px; width:590px; height:590px; border:60px solid #edf4fa; border-radius:50%; } .filter-row button { transition:.18s var(--ease); } .filter-row button:hover,.filter-row button.is-selected { color:#fff; background:var(--navy); border-color:var(--navy); } .filter-row button.is-selected::after { content:""; width:5px; height:5px; display:inline-block; margin:0 0 2px 6px; background:var(--gold); border-radius:50%; } .article { position:relative; isolation:isolate; overflow:hidden; padding-bottom:106px; } .article__arc { position:absolute; z-index:-1; top:58px; left:-230px; width:460px; height:460px; border:42px solid #f0f5fa; border-radius:50%; } .numbers-section__grid { position:absolute; inset:0; z-index:-1; opacity:.12; background-image:linear-gradient(rgba(255,255,255,.75) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.75) 1px,transparent 1px); background-size:58px 58px; mask-image:linear-gradient(120deg,transparent 0%,black 36%,black 100%); } .numbers-card { border:1px solid rgba(234,153,0,.62); } .numbers-card .numbers-card__total { background:linear-gradient(100deg,#fff8ea,#f8fafc 56%); border-bottom-color:rgba(234,153,0,.38); } .numbers-card__total strong { color:var(--gold-deep); text-shadow:0 2px 0 rgba(255,255,255,.85); } @media (max-width:767px) { .archive-section,.article { padding-bottom:72px; }.archive-section__arc { right:-220px; bottom:-280px; }.article__arc { top:30px; left:-260px; } } @media (max-width:767px) { .member-cta__card { padding:29px 24px 31px; } .member-cta h2 { margin-bottom:20px; font-size:26px; } .member-cta__body,.home-branch__grid { grid-template-columns:1fr; gap:27px; } .home-section-heading--news { margin-bottom:34px; } .home-section-heading--sr { margin-bottom:40px; } .intro-split__copy--sr { padding-top:22px; } .home-section-heading--branch { margin-bottom:32px; } .intro-photo-single img { height:245px; border-radius:14px; } .intro-split__copy--light > p { font-size:14px; line-height:1.95; } .minato-map { width:210px; } } /* ========================================================================= MV（メインビジュアル）PC：画像を切らないためのサイズ設計 ------------------------------------------------------------------------- branch-mv.jpg は 1920×1003（約 1.914:1）。左＝東京タワー＋空＋街、 右＝斜めのコラージュ、という 1 枚の完成画。上端も下端も一様な色ではないので、 SP のように「足りない分を単色で埋める」手は使えず、 ・枠の比率を画像に合わせる（＝切らない） ・合わせられない幅では、切る側を選ぶ の 2 段構えにする。 min-height: max(660px, 100vw × 1003/1920) ・幅 1263px 以上 … 枠の比率＝画像の比率になるので cover でも一切切れない。 4K でも下が切れず、画像全体が出る（3840px なら高さ 2006px）。 16:9 の画面では概ね画面高の 93% に収まる。 ・幅 1263px 未満 … コンテンツの実測高さ（最大 647px）が入らないため 660px を下限にする。この帯だけは横方向に切れる。 background-position: left center 上記の「切れる帯」で、切る側を必ず右にするための指定。中央基準だと 左端の東京タワーから削られてしまう（ノートPC・タブレットで発生していた不具合）。 .home-hero__inner の padding-left 背景を左寄せにするとタワーがコピーの真下に来るため、コピーと数字を タワーの右へ逃がす。max(0px, min(143px, 584px - 38vw)) は 「タワー右端 ＋ 余白 24px − shell の左端」を 1 本の式にしたもので、 幅 1537px 以上では 0＝従来どおり（1920px のデザインは変わらない）。 ========================================================================= */ @media (min-width:768px) { .home-hero { min-height: calc(100vw * 1003 / 1920); background-size: cover; background-position: left center; } .home-hero__inner { /* 上下の余白を画面幅に連動させ、狭い幅ではコンテンツ高さを縮める。 コンテンツが低いほど枠を画像比率に近づけられる＝横の切れ量が減る。 7.71vw / 2.81vw は 1920px でちょうど 148px / 54px になる係数なので、 1920px のデザインは従来と 1px も変わらない。 */ padding-top: clamp(96px, 8.85vw, 170px); padding-bottom: clamp(16px, 2.81vw, 54px); /* コピーの左端をヘッダーのロゴに合わせる。.shell（最大1120px / 左右64px）ではなく .site-header__inner と同じ枠（最大1360px / 左右48px）を使う。 */ width: min(calc(100% - 48px), 1360px); /* ただし枠の左端が東京タワーに掛かる幅ではコピーをタワーの右へ逃がす。 ＝ max(0, タワー右端(230/1920=11.98vw) + 余白16px − 枠の左端)。 枠の左端は W<1408px で 24px、それ以上で (W-1360)/2。 **1832px 以上ではパディング 0 ＝ ヘッダーと完全に揃う**（1920px も 0）。 */ padding-left: max(0px, min(calc(11.98vw - 2px), calc(702px - 38.02vw))); } /* コピーの横幅を「空の帯」に収める。画像右側のコラージュは 原寸で x = 1080 - 0.2425y の直線で斜めに入ってくる（実測）。 幅が狭いほどこの線が左に寄るため、max-width を画面幅に連動させないと リード文が写真に重なって読めなくなる。1600px 以上は 560px（従来値）。 */ .home-hero__copy { max-width: min(560px, calc(38.4vw - 72px)); } /* 数字は CTA ボタンの直下に置く（＝コピーの一部として流す）。 以前は margin-top:auto で枠の下端に固定していたが、画像比率で高さを決めると 4K では枠が 2000px 超になり、数字がはるか下に離れてしまうため。 SP（767px 以下）は従来どおりコラージュの直上に固定する。 */ .hero-stats { margin-top: clamp(26px, 2.08vw, 40px); padding: clamp(13px, 1.05vw, 20px) clamp(4px, 0.42vw, 10px); } .hero-stats--dated { padding-bottom: clamp(34px, 2.6vw, 40px); } /* 数字もコラージュに掛からないよう画面幅に連動（1920px で従来値 22px / 12px / 33px / 13px）。 */ .hero-stats__row > div { padding: 0 clamp(10px, 1.0vw, 22px); } .hero-stats__total { padding-bottom: clamp(8px, .8vw, 12px); margin-bottom: clamp(8px, .8vw, 12px); } .hero-stats .hero-stats__total strong { font-size: clamp(26px, 2.1vw, 40px); } .hero-stats span { font-size: clamp(10px, 0.63vw, 12px); } .hero-stats strong { font-size: clamp(21px, 1.72vw, 33px); } .hero-stats small { font-size: clamp(10px, 0.68vw, 13px); } } /* コピー可読性のためのオーバーレイ。左端は濃く、60% で完全に透明へ抜けるので 右側のコラージュは素の色のまま残る（従来は右端まで .12 が乗って全体が暗かった）。 .home-hero__copy / .hero-stats は z-index:2 のため、この層より前面に出る。 */ .home-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; } .home .site-header, body:has(.home-hero) .site-header { background: transparent; box-shadow: none; } /* MV の上にヘッダーが重なるときの視認性確保。 実測すると、ロゴ付近は明るい空の上で白文字のコントラストが 2.58:1 しかなく、 ナビ付近も赤坂の夜景写真のネオン部分で 1.10:1 まで落ちる箇所があった。 ベタの背景色を敷くと MV の見栄えを損なうため、 「上が濃く・下へ抜ける暗幕（スクリム）」を敷く。 高さは **スクロール後の帯とぴったり同じ**（＝ヘッダーの箱そのもの / inset:0）にしてある。 はみ出させるとスクロールで帯に切り替わる瞬間に高さが変わって見えるため。 文字は箱の高さの中央にあるので、50% 地点の不透明度が実効値になる（0.34）。 ロゴ付近 2.58:1 → 4.8:1（通常文字の AA 4.5:1 を満たす最小限）。 一度 0.52 まで濃くしたが「帯が暗すぎる」との指摘で 0.34 まで戻した。 上端も .72 → .46 に下げ、濃い帯に見えないようにしている。 下げたぶんはネオンの白飛び部で効きが弱くなるので、文字影をやや強めて補う。 */ .home .site-header::before, body:has(.home-hero) .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(6,22,48,.46) 0%, rgba(6,22,48,.34) 50%, rgba(6,22,48,.14) 82%, rgba(6,22,48,0) 100%); transition: opacity .25s var(--ease); } /* スクリムだけでは拾いきれない一点（ネオンの白飛び等）に備えて、 透過状態のときだけ文字に薄い影を敷く。スクロール後は不要なので外す。 */ .home .site-header:not(.is-scrolled) .brand, .home .site-header:not(.is-scrolled) .desktop-nav > a:not(.header-cta), .home .site-header:not(.is-scrolled) .mobile-menu-trigger, body:has(.home-hero) .site-header:not(.is-scrolled) .brand, body:has(.home-hero) .site-header:not(.is-scrolled) .desktop-nav > a:not(.header-cta), body:has(.home-hero) .site-header:not(.is-scrolled) .mobile-menu-trigger { text-shadow: 0 1px 3px rgba(4,18,42,.72); } .home .site-header.is-scrolled, body:has(.home-hero) .site-header.is-scrolled { background: rgba(24,63,120,.97); box-shadow: 0 7px 25px rgba(8,31,72,.2); } .home .site-header.is-scrolled::before, body:has(.home-hero) .site-header.is-scrolled::before { opacity: 0; } /* MV をヘッダーの高さぶん引き上げて、ヘッダーの下に潜り込ませる。 ヘッダーは sticky（＝通常フローを占有）のままなので、その占有ぶんを 負マージンで打ち消すことで重なりを作る。ヘッダーは z-index:50 のため MV より前面に描画される。この指定は .home-hero にのみ効くので、 body のクラス（.home）の有無に左右されず、下層ページにも影響しない。 */ .home-hero { margin-top: -87px; } @media (max-width:767px) { .home-hero { margin-top: -72px; } } /* MV 背景：PC / SP で画像を出し分ける。 front-page.php のインライン style から --mv-pc / --mv-sp の 2 つの URL を受け取り、 どちらを使うかはここのメディアクエリで決める。インライン style に background-image を直接書くと詳細度で CSS 側から上書きできないため、 変数だけを渡して切り替えの判断を CSS に持たせている。 --mv-sp が未定義の場合は --mv-pc にフォールバックするので、 SP 用画像を置いていない環境でも背景が消えることはない。 */ .home-hero { background-image: var(--mv-pc); } @media (max-width:767px) { .home-hero { background-image: var(--mv-sp, var(--mv-pc)); } } /* PC では英字ラベルを 1 行で出す（SP だけ 2 行に折り返す）。 display:none の要素はフレックスアイテムにならないので gap も増えない。 */ .home-hero__eyebrow br { display:none; } /* MV（PC）タブレット〜小型ノート（768〜1142px）: この幅では画像の自然な高さ（幅×1003/1920）よりコンテンツの方が高く、 その差のぶんだけ画像が横に拡大されて右が切れる。文字サイズと余白を詰めて 枠を低くし、切れ量を減らす。上限 1142px は「詰めない状態のコンテンツ高さ(597px) × 1.914 = 1142px」＝ここから上は詰めなくても切れないため。 */ @media (min-width:768px) and (max-width:1142px) { /* 左パディング: この帯では画像が縮むぶんタワーも小さくなるので、 固定 143px では空けすぎ＝コピーが右のコラージュへ押し出されていた。 タワー右端（原寸 x=230）＝ 230 × 高さ/1003 に連動させる。 */ .home-hero__inner { padding-top: 88px; padding-bottom: 10px; } .home-hero__copy { max-width: calc(21.5vw + 100px); } .home-hero__eyebrow { margin-bottom: 8px; font-size: 10px; letter-spacing: .12em; } .home-hero__eyebrow::before { width: 20px; } .home-hero h1 { margin-bottom: 12px; font-size: clamp(24px, 2.9vw, 32px); line-height: 1.4; } .home-hero__copy > p:not(.home-hero__eyebrow) { font-size: 12px; line-height: 1.85; } .home-hero__cta { margin-top: 13px; padding: 11px 18px; font-size: 13px; } .hero-stats { margin-top: 13px; } .hero-stats-note { right:9px; bottom:6px; } /* この帯は「MV の高さ＝コンテンツの高さ」で決まるうえ、コピーを置ける空の幅も 約255px しかない（右はコラージュの斜め線）。合計を追加すると ・1行5列にする → パネルが幅280px超になりコラージュに重なる ・2段のまま → 高さが+70px 増えて画像の右の切れが 11%→24% に悪化 のどちらかになるため、2段を維持したうえで余白と文字を限界まで詰めて 高さの増加を最小化する（切れ量 約17%）。 */ .hero-stats { padding: 6px 5px; } .hero-stats--dated { padding-bottom: 24px; } .hero-stats__total { padding: 0 8px 5px; margin-bottom: 5px; } .hero-stats .hero-stats__total strong { font-size: 20px; } .hero-stats__row > div { padding: 0 7px; } .hero-stats span { margin-bottom: 1px; } /* 更新日はこの帯だけ詰める（枠が高くなるとその分だけ画像の右が切れるため）。 */ .hero-stats-note { font-size: 10px; line-height: 1.4; } .hero-stats span { margin-bottom: 2px; } } /* ========================================================================= MV（メインビジュアル）SP：画像を「全部見せる」ためのサイズ設計 ------------------------------------------------------------------------- branch-mv-sp.jpg は 767×1691 の縦長で、 ・上 64.16%（y=0〜1085）… 空＋東京タワー ＝ コピーを載せる領域 ・下 35.84%（y=1085〜1691）… 写真コラージュ ＝ 必ず見せたい領域 という構成。従来は min-height:560px ＋ background-size:cover だったため、 高さが画像比率と合わずコラージュがほぼ切り落とされていた。 1) min-height を画像比率（100vw × 1691/767）にして画像全体が収まる高さを確保する。 ただし 950px を上限にする（min()）。この上限が無いと、幅が広がるほど「空の帯」 だけが伸びて、ボタンと数字（margin-top:auto でコラージュ直前に固定）の間に 巨大な空白ができる（425〜767px で顕著）。950px は最大級のスマホ幅 430px でも 画像全体が入る値（430 × 1691/767 = 948px）なので、実機スマホでは従来どおり 画像がまるごと見え、それより広い幅では画像の上端（空とタワー先端）が 少しずつ切れて高さが詰まる。 ※固定 height ではなく min-height なので、文字量が増えたときは下に切れずに伸びる 2) padding-bottom でコラージュ帯を確保し、コピーを空の部分だけに閉じ込める 606/767 =「コラージュの高さ ÷ 画像の幅」。% パディングは幅基準なのでこの式。 3) 背景は下端揃え。文字量やフォント差でセクションが縦に伸びても、 伸びた分は上（空）に足され、コラージュは常に下端に残る。 background-color は画像最上部の空の色 #53a4eb なので継ぎ目が見えない。 4) min-height:min-content は overflow:hidden で中身が切れるのを防ぐ保険。 ========================================================================= */ @media (max-width:767px) { .home-hero { min-height: min(calc(100vw * 1691 / 767), 950px); padding-bottom: calc(100% * 606 / 767); background-color: #53a4eb; background-size: 100% auto; background-position: center bottom; } .home-hero__inner { padding: 82px 0 24px; } /* SP は中央寄せ（送付いただいた SP カンプに合わせる）。 空の上に白文字を置くため、可読性の担保に薄い影を敷く。 */ .home-hero__copy { max-width:100%; text-align:center; text-shadow:0 1px 3px rgba(9,38,84,.32); } .home-hero__eyebrow { display:block; margin-bottom:12px; color:#fff; font-size:12.5px; letter-spacing:.2em; line-height:1.7; } .home-hero__eyebrow::before { content:none; } /* 先頭の横ラインは SP では出さない */ .home-hero__eyebrow br { display:revert; } /* PC では display:none（＝2行にしない） */ .home-hero h1 { margin-bottom:16px; max-width:none; font-size:clamp(28px,8.6vw,36px); letter-spacing:.09em; line-height:1.5; } .home-hero__copy > p:not(.home-hero__eyebrow) { max-width:none; font-size:clamp(12.5px,3.4vw,14px); line-height:1.9; } .home-hero__cta { display:flex; width:min(72%,260px); margin:20px auto 0; justify-content:center; padding:14px 18px; text-shadow:none; } .hero-stats { align-self:center; justify-content:center; margin-top:20px; padding:14px 6px; text-shadow:none; } .hero-stats--dated { padding-bottom:34px; } .hero-stats-note { right:10px; } .hero-stats__row > div { padding:0 9px; text-align:center; } .hero-stats__total { padding:0 8px 9px; margin-bottom:9px; } .hero-stats .hero-stats__total strong { font-size:30px; } .hero-stats-note { font-size:10.5px; } .hero-stats span { font-size:11px; } .hero-stats strong { font-size:26px; } .hero-stats small { font-size:11px; } } /* 数字カードの列数。「その他」など ACF の入力数に応じて PHP 側が .numbers-card--cols-N を付ける（N＝全会員数を除いたセル数）。 共通のモバイル指定（repeat(3,1fr)）より後ろに置いて後勝ちさせる。 */ .numbers-card--cols-1 { grid-template-columns:1fr; } .numbers-card--cols-2 { grid-template-columns:repeat(2,1fr); } .numbers-card--cols-4 { grid-template-columns:repeat(4,1fr); } @media (max-width:767px) { .numbers-card--cols-4 { grid-template-columns:repeat(4,1fr); } .numbers-card--cols-4 > div { padding:16px 4px; } .numbers-card--cols-4 strong { font-size:22px; } .numbers-card--cols-4 strong small { margin-left:2px; font-size:11px; } .numbers-card--cols-4 span { font-size:9px; } }