/* ============================================================ 兵庫中央事業協同組合 — style.css (v2 / Blue Brand) 地域企業と外国人材をつなぐ、信頼と未来のブルー - 落ち着いたネイビー × ブルー × シアン - GLP的な大きな余白・余韻のある動き - 既存クラス/変数名は維持し、全ページを一括リブランド ============================================================ */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { /* --- Brand (new) --- */ --brand-navy: #0B1F3A; --brand-blue: #005BAC; --brand-sky: #00A8E8; --brand-light-blue: #EAF6FC; --brand-deep: #071827; --accent-cyan: #25C7E8; --accent-gold: #C8A24A; --pale-blue: #F1F7FB; /* --- Legacy names re-mapped to blue (keeps every subpage on-brand) --- */ --base: #F2F8FC; --base-alt: #E8F2FA; --white: #FFFFFF; --off-white: #F7FAFC; --dark: #0B1F3A; /* navy */ --dark-mid: #0B4F8A; /* deep blue */ --muted: #5B7A93; /* blue-grey */ --green-muted: #2E8B72; /* solution / positive */ --amber: #C8A24A; /* gold — used very sparingly */ --amber-light: #D8B768; --text: #102030; --text-sub: #4A5A6B; --text-muted: #7A8794; --border: #DBE6EF; --border-light:#EAF1F7; --shadow-sm: 0 1px 4px rgba(11,31,58,0.08); --shadow-md: 0 8px 28px rgba(11,31,58,0.10); --shadow-lg: 0 20px 60px rgba(11,31,58,0.16); --shadow-blue: 0 18px 50px rgba(0,91,172,0.22); /* --- Type --- */ --sans: 'Noto Sans JP', sans-serif; --serif: 'Noto Serif JP', serif; --en: 'Inter', 'Noto Sans JP', sans-serif; /* --- Layout --- */ --max-w: 1200px; --gutter: 2rem; --radius: 14px; --radius-sm: 8px; --ease: 0.4s cubic-bezier(0.22,0.61,0.36,1); --ease-out: 0.7s cubic-bezier(0.16,1,0.3,1); --header-h: 76px; } /* ============================================================ 2. RESET ============================================================ */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { font-family: var(--sans); color: var(--text); background: var(--white); line-height: 1.85; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img,svg { max-width:100%; height:auto; display:block; } a { color:inherit; text-decoration:none; } ul,ol { list-style:none; } button { cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; } input,select,textarea { font-family:inherit; } address { font-style:normal; } ::selection { background: var(--brand-sky); color:#fff; } /* Skip link */ .skip-link { position:absolute; left:-9999px; top:0; z-index:200; background:var(--brand-navy); color:#fff; padding:0.6rem 1rem; border-radius:0 0 8px 0; } .skip-link:focus { left:0; } /* ============================================================ 3. UTILITIES ============================================================ */ .container { max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter); } .container--narrow { max-width: 880px; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .section { padding:clamp(64px,9vw,128px) 0; position:relative; } .section--sm { padding:64px 0; } .section--white{ background:var(--white); } .section--base { background:var(--base); } .section--alt { background:var(--base-alt); } .section--pale { background:var(--pale-blue); } .section--navy { background:var(--brand-navy); color:#fff; } /* English label (Inter, sky) */ .label-en { display:inline-flex; align-items:center; gap:0.6rem; font-family:var(--en); font-size:0.72rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--brand-blue); margin-bottom:1rem; } .label-en::before { content:''; width:26px; height:1.5px; background:var(--brand-sky); display:inline-block; } .section--navy .label-en, .cta-section .label-en { color:var(--brand-sky); } .section--navy .label-en::before, .cta-section .label-en::before { background:var(--brand-sky); } .sec-title { font-family:var(--serif); font-size:clamp(1.6rem, 3.2vw, 2.5rem); font-weight:600; color:var(--brand-navy); line-height:1.5; letter-spacing:0.02em; } .sec-title--lg { font-size:clamp(1.9rem, 4vw, 3rem); } .section--navy .sec-title, .cta-section .sec-title { color:#fff; } .sec-lead { font-size:1rem; color:var(--text-sub); line-height:2.1; max-width:640px; margin-top:1.25rem; } .section--navy .sec-lead { color:rgba(255,255,255,0.82); } .sec-head { margin-bottom:clamp(2.5rem,5vw,4.5rem); } .sec-head--center { text-align:center; } .sec-head--center .label-en { justify-content:center; } .sec-head--center .sec-lead { margin-left:auto; margin-right:auto; } /* ============================================================ 4. REVEAL ANIMATIONS ============================================================ */ .fade-up, [data-reveal] { opacity:0; transform:translateY(34px); transition:opacity var(--ease-out), transform var(--ease-out); will-change:opacity, transform; } .fade-up.from-left, [data-reveal="left"] { transform:translateX(-44px); } .fade-up.from-right,[data-reveal="right"] { transform:translateX(44px); } .fade-up.zoom, [data-reveal="zoom"] { transform:scale(0.94); } .fade-up.visible, [data-reveal].is-visible { opacity:1; transform:none; } .delay-1 { transition-delay:0.10s; } .delay-2 { transition-delay:0.20s; } .delay-3 { transition-delay:0.30s; } .delay-4 { transition-delay:0.40s; } .delay-5 { transition-delay:0.50s; } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } .fade-up,[data-reveal] { opacity:1 !important; transform:none !important; } } /* ============================================================ 5. BUTTONS ============================================================ */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:0.6rem; padding:0.95rem 2rem; border-radius:999px; font-size:0.92rem; font-weight:600; letter-spacing:0.04em; line-height:1.2; transition:transform var(--ease), box-shadow var(--ease), background var(--ease), color var(--ease), border-color var(--ease); cursor:pointer; position:relative; } .btn--primary { background:linear-gradient(135deg, #0B2C50 0%, var(--brand-blue) 70%, #0A6FC0 100%); color:#fff; border:1.5px solid transparent; box-shadow:var(--shadow-blue); } .btn--primary:hover { transform:translateY(-3px); box-shadow:0 24px 60px rgba(0,91,172,0.34); } .btn--outline { background:transparent; color:var(--brand-navy); border:1.5px solid rgba(11,31,58,0.28); } .btn--outline:hover { background:var(--brand-navy); color:#fff; border-color:var(--brand-navy); transform:translateY(-3px); } .btn--light { background:#fff; color:var(--brand-navy); border:1.5px solid #fff; } .btn--light:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); } .btn--ghost-light { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.5); } .btn--ghost-light:hover { background:rgba(255,255,255,0.12); border-color:#fff; transform:translateY(-3px); } /* amber/sky accent button → cyan-sky gradient (blue brand) */ .btn--amber { background:linear-gradient(135deg, var(--brand-sky), var(--accent-cyan)); color:#fff; border:1.5px solid transparent; box-shadow:0 14px 40px rgba(0,168,232,0.28); } .btn--amber:hover { transform:translateY(-3px); box-shadow:0 22px 54px rgba(0,168,232,0.4); } .btn--ghost { color:var(--brand-blue); padding:0; font-size:0.9rem; font-weight:600; letter-spacing:0.04em; gap:0.45rem; border-radius:0; border-bottom:1.5px solid transparent; align-items:center; } .btn--ghost:hover { color:var(--brand-sky); } .btn-arrow { display:inline-block; transition:transform var(--ease); font-size:0.85rem; } .btn:hover .btn-arrow, .btn--ghost:hover .btn-arrow { transform:translateX(5px); } .btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--brand-sky); outline-offset:3px; } /* ============================================================ 6. TAGS ============================================================ */ .tag { display:inline-block; font-size:0.7rem; padding:0.25rem 0.75rem; border-radius:999px; letter-spacing:0.05em; font-weight:600; } .tag--dark { background:var(--brand-navy); color:#fff; } .tag--muted { background:var(--muted); color:#fff; } .tag--amber { background:var(--brand-blue); color:#fff; } .tag--green { background:var(--green-muted); color:#fff; } .tag--outline{ background:var(--pale-blue); border:1px solid var(--border); color:var(--brand-blue); } /* ============================================================ 7. HEADER ============================================================ */ #site-header { position:fixed; top:0; left:0; right:0; z-index:100; background:transparent; transition:background var(--ease), box-shadow var(--ease), border-color var(--ease); border-bottom:1px solid transparent; } #site-header.scrolled, #site-header.solid { background:rgba(255,255,255,0.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 6px 30px rgba(11,31,58,0.08); border-bottom-color:var(--border-light); } .header-inner { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter); } .site-logo { display:flex; align-items:center; gap:0.7rem; flex-shrink:0; } .site-logo img { height:44px; width:auto; object-fit:contain; } .site-logo-text { display:flex; flex-direction:column; line-height:1.15; } .site-logo-text .en { font-family:var(--en); font-size:0.6rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color:var(--muted); } .site-logo-text .jp { font-family:var(--sans); font-size:1rem; font-weight:700; color:var(--brand-navy); letter-spacing:0.06em; } /* On transparent hero header: white logo text */ #site-header:not(.scrolled):not(.solid) .site-logo-text .en { color:rgba(255,255,255,0.75); } #site-header:not(.scrolled):not(.solid) .site-logo-text .jp { color:#fff; } /* Global nav */ .global-nav { display:flex; align-items:center; gap:0.15rem; } .global-nav > li { position:relative; } .global-nav > li > a { display:block; padding:0.6rem 0.95rem; font-size:0.88rem; font-weight:500; letter-spacing:0.03em; color:var(--text); border-radius:999px; transition:color var(--ease), background var(--ease); } .global-nav > li > a:hover { color:var(--brand-blue); background:rgba(0,91,172,0.07); } #site-header:not(.scrolled):not(.solid) .global-nav > li > a { color:rgba(255,255,255,0.92); } #site-header:not(.scrolled):not(.solid) .global-nav > li > a:hover { color:#fff; background:rgba(255,255,255,0.14); } /* Dropdown */ .dropdown { position:absolute; top:calc(100% + 8px); left:50%; background:#fff; border:1px solid var(--border-light); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); min-width:210px; padding:0.5rem; opacity:0; visibility:hidden; transform:translateX(-50%) translateY(-8px); transition:opacity var(--ease), visibility var(--ease), transform var(--ease); } .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .dropdown li a { display:block; padding:0.6rem 0.9rem; font-size:0.85rem; color:var(--text-sub); border-radius:6px; transition:background var(--ease), color var(--ease); white-space:nowrap; } .dropdown li a:hover { background:var(--pale-blue); color:var(--brand-blue); } /* Nav CTA */ .nav-cta { margin-left:0.6rem; padding:0.6rem 1.4rem !important; background:linear-gradient(135deg,#0B2C50,var(--brand-blue)) !important; color:#fff !important; border-radius:999px !important; font-size:0.85rem !important; font-weight:600 !important; box-shadow:0 10px 26px rgba(0,91,172,0.28); } .nav-cta:hover { transform:translateY(-2px); } #site-header:not(.scrolled):not(.solid) .nav-cta { background:#fff !important; color:var(--brand-navy) !important; box-shadow:0 10px 26px rgba(0,0,0,0.18); } /* Hamburger */ .hamburger { display:none; flex-direction:column; gap:6px; width:42px; height:42px; align-items:center; justify-content:center; border-radius:50%; transition:background var(--ease); } .hamburger span { display:block; width:24px; height:2px; background:var(--brand-navy); border-radius:2px; transition:transform var(--ease), opacity var(--ease), background var(--ease); } #site-header:not(.scrolled):not(.solid) .hamburger span { background:#fff; } .hamburger[aria-expanded="true"] span { background:var(--brand-navy); } .hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(8px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); } /* Mobile menu */ .mobile-menu { position:fixed; inset:0; top:0; background:#fff; z-index:99; padding:calc(var(--header-h) + 1.5rem) var(--gutter) 3rem; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity var(--ease), visibility var(--ease), transform var(--ease); } .mobile-menu.is-open { opacity:1; visibility:visible; transform:none; } .mobile-menu > ul > li > a { display:block; padding:1rem 0; font-size:1.15rem; font-weight:600; color:var(--brand-navy); border-bottom:1px solid var(--border-light); } .mobile-menu > ul > li > ul { padding:0.5rem 0 0.9rem 1rem; border-bottom:1px solid var(--border-light); } .mobile-menu > ul > li > ul > li > a { display:block; padding:0.55rem 0; font-size:0.92rem; color:var(--text-sub); } .mobile-menu > ul > li > ul > li > a::before { content:'— '; color:var(--brand-sky); } .mobile-menu .mobile-cta { margin-top:2rem; } /* ============================================================ 8. HOME — HERO ============================================================ */ .hero { position:relative; min-height:100svh; display:flex; align-items:center; color:#fff; overflow:hidden; isolation:isolate; } .hero-bg { position:absolute; inset:0; z-index:-2; } .hero-bg img { width:100%; height:100%; object-fit:cover; animation:kenburns 18s ease-out infinite alternate; } @keyframes kenburns { from { transform:scale(1.06) translate(0,0);} to { transform:scale(1.16) translate(-1.5%,-1.5%);} } .hero-overlay { position:absolute; inset:0; z-index:-1; background: linear-gradient(105deg, rgba(7,24,39,0.92) 0%, rgba(11,31,58,0.78) 42%, rgba(0,91,172,0.45) 100%), radial-gradient(120% 120% at 80% 10%, rgba(0,168,232,0.28), transparent 55%); } /* faint giant logo shape */ .hero::after { content:''; position:absolute; z-index:-1; right:-8%; top:50%; transform:translateY(-50%); width:min(60vw,720px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(37,199,232,0.16), transparent 62%); pointer-events:none; } .hero-inner { max-width:var(--max-w); margin:0 auto; padding:calc(var(--header-h) + 3rem) var(--gutter) 7rem; width:100%; } .hero-kicker { display:inline-flex; align-items:center; gap:0.65rem; font-family:var(--en); font-size:0.74rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:#fff; padding:0.5rem 1.1rem; border:1px solid rgba(255,255,255,0.35); border-radius:999px; background:rgba(255,255,255,0.08); backdrop-filter:blur(4px); margin-bottom:2rem; } .hero-kicker .dot { width:7px; height:7px; border-radius:50%; background:var(--brand-sky); box-shadow:0 0 12px var(--brand-sky); } .hero-catch { font-family:var(--serif); font-weight:700; font-size:clamp(1.95rem, 7.2vw, 5rem); line-height:1.3; letter-spacing:0.02em; margin-bottom:1.8rem; text-shadow:0 4px 40px rgba(0,0,0,0.25); } .hero-catch .accent { background:linear-gradient(100deg, var(--accent-cyan), var(--brand-sky)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero-sub { font-size:clamp(1rem,1.4vw,1.18rem); line-height:2; max-width:620px; color:rgba(255,255,255,0.92); margin-bottom:1rem; font-weight:500; } .hero-note { font-size:0.9rem; line-height:1.9; max-width:560px; color:rgba(255,255,255,0.72); margin-bottom:2.6rem; } .hero-cta { display:flex; gap:1rem; flex-wrap:wrap; } /* hero entrance */ .hero-kicker, .hero-catch, .hero-sub, .hero-note, .hero-cta, .hero-stats { opacity:0; transform:translateY(30px); transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); } body.loaded .hero-kicker { opacity:1; transform:none; transition-delay:0.15s; } body.loaded .hero-catch { opacity:1; transform:none; transition-delay:0.30s; } body.loaded .hero-sub { opacity:1; transform:none; transition-delay:0.50s; } body.loaded .hero-note { opacity:1; transform:none; transition-delay:0.62s; } body.loaded .hero-cta { opacity:1; transform:none; transition-delay:0.74s; } body.loaded .hero-stats { opacity:1; transform:none; transition-delay:0.88s; } @media (prefers-reduced-motion: reduce) { .hero-bg img { animation:none; } .hero-kicker,.hero-catch,.hero-sub,.hero-note,.hero-cta,.hero-stats { opacity:1 !important; transform:none !important; } } /* hero stats strip */ .hero-stats { display:flex; flex-wrap:wrap; gap:2.5rem; margin-top:3.5rem; padding-top:2.2rem; border-top:1px solid rgba(255,255,255,0.18); } .hero-stat .num { font-family:var(--en); font-size:1.9rem; font-weight:700; line-height:1; letter-spacing:0.01em; } .hero-stat .num small { font-size:0.9rem; font-weight:600; margin-left:0.15rem; } .hero-stat .lbl { font-size:0.76rem; color:rgba(255,255,255,0.7); margin-top:0.5rem; letter-spacing:0.04em; } /* scroll cue */ .hero-scroll { position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:0.5rem; font-family:var(--en); font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color:rgba(255,255,255,0.7); } .hero-scroll .line { width:1px; height:48px; background:rgba(255,255,255,0.4); position:relative; overflow:hidden; } .hero-scroll .line::after { content:''; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--brand-sky); animation:scrolldrop 2s ease-in-out infinite; } @keyframes scrolldrop { 0%{top:-50%;} 60%,100%{top:100%;} } /* ============================================================ 9. HOME — PURPOSE ============================================================ */ .purpose { position:relative; overflow:hidden; } .purpose .container { position:relative; z-index:1; } .purpose-grid { display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(2rem,5vw,5rem); align-items:center; } .purpose-title { font-family:var(--serif); font-weight:600; font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:1.55; color:var(--brand-navy); letter-spacing:0.02em; } .purpose-body p { font-size:1rem; line-height:2.2; color:var(--text-sub); } .purpose-body p + p { margin-top:1.3rem; } .purpose-mark { position:absolute; right:-6%; top:-10%; width:min(46vw,520px); opacity:0.05; z-index:0; pointer-events:none; } /* ============================================================ 10. HOME — ABOUT (re-used by union too) ============================================================ */ .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; } .about-img { border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:var(--base-alt); position:relative; box-shadow:var(--shadow-md); } .about-img::after { content:''; position:absolute; inset:0; background:linear-gradient(160deg, transparent 55%, rgba(0,91,172,0.18)); } .about-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.8s var(--ease-out); } .about-img:hover img { transform:scale(1.05); } .about-list { margin-top:2rem; display:flex; flex-direction:column; } .about-list-item { display:flex; align-items:flex-start; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--border-light); } .about-list-item:first-child { border-top:1px solid var(--border-light); } .about-list-item img { object-fit:contain; } .about-list-item-body h4 { font-size:0.98rem; font-weight:700; color:var(--brand-navy); margin-bottom:0.25rem; } .about-list-item-body p { font-size:0.86rem; color:var(--text-sub); line-height:1.8; } /* mini cards (about strengths on home) */ .mini-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:3rem; } .mini-card { background:#fff; border:1px solid var(--border-light); border-radius:var(--radius); padding:1.75rem; transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease); } .mini-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; } .mini-card .mc-num { font-family:var(--en); font-size:0.75rem; font-weight:700; color:var(--brand-sky); letter-spacing:0.1em; } .mini-card h4 { font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--brand-navy); margin:0.5rem 0 0.6rem; } .mini-card p { font-size:0.85rem; color:var(--text-sub); line-height:1.8; } /* ============================================================ 11. HOME — SERVICE CARDS ============================================================ */ .svc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; } .svc-card { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--border-light); border-radius:var(--radius); padding:2.25rem 1.75rem; overflow:hidden; transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease); } .svc-card::before { content:''; position:absolute; left:0; top:0; height:4px; width:100%; background:linear-gradient(90deg,var(--brand-blue),var(--brand-sky)); transform:scaleX(0); transform-origin:left; transition:transform var(--ease); } .svc-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; } .svc-card:hover::before { transform:scaleX(1); } .svc-num { font-family:var(--en); font-size:2.6rem; font-weight:700; line-height:1; color:var(--brand-light-blue); letter-spacing:0.02em; transition:color var(--ease); } .svc-card:hover .svc-num { color:var(--brand-sky); } .svc-ico { width:46px; height:46px; margin:0.7rem 0 1.3rem; object-fit:contain; transition:transform var(--ease); } .svc-card:hover .svc-ico { transform:translateY(-4px) scale(1.05); } .svc-card h3 { font-family:var(--serif); font-size:1.12rem; font-weight:600; color:var(--brand-navy); margin-bottom:0.7rem; line-height:1.5; } .svc-card p { font-size:0.85rem; color:var(--text-sub); line-height:1.85; flex:1; } .svc-card .svc-link { margin-top:1.4rem; font-family:var(--en); font-size:0.78rem; font-weight:600; letter-spacing:0.06em; color:var(--brand-blue); display:flex; align-items:center; gap:0.4rem; } .svc-card:hover .svc-link .btn-arrow { transform:translateX(5px); } /* ============================================================ 12. HOME — STRENGTH (big numbers) ============================================================ */ .strength-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .strength-item { background:#fff; padding:2.5rem 2rem; transition:background var(--ease); } .strength-item:hover { background:var(--pale-blue); } .strength-no { font-family:var(--en); font-size:1rem; font-weight:700; color:var(--brand-sky); letter-spacing:0.08em; } .strength-no span { font-size:2.6rem; } .strength-item h3 { font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--brand-navy); margin:1rem 0 0.7rem; line-height:1.55; } .strength-item p { font-size:0.86rem; color:var(--text-sub); line-height:1.85; } /* ============================================================ 13. FLOW TIMELINE (home + service detail) ============================================================ */ .flow-grid { display:grid; grid-template-columns:420px 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; } .flow-img { border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4; background:var(--base-alt); position:sticky; top:100px; box-shadow:var(--shadow-md); } .flow-img img { width:100%; height:100%; object-fit:cover; } .flow-timeline { display:flex; flex-direction:column; position:relative; z-index:0; } .flow-timeline::before { content:''; position:absolute; left:23px; top:8px; bottom:8px; width:2px; background:var(--border); z-index:-1; } .flow-timeline::after { /* animated progress line — must sit behind the number badges */ content:''; position:absolute; left:23px; top:8px; width:2px; height:var(--flow-progress,0%); background:linear-gradient(var(--brand-sky),var(--brand-blue)); transition:height 1.1s ease; z-index:-1; } .flow-step { display:flex; gap:1.5rem; padding-bottom:2.4rem; position:relative; } .flow-step:last-child { padding-bottom:0; } .flow-step-num { flex-shrink:0; width:48px; height:48px; border-radius:50%; background:#fff; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--en); font-size:1rem; font-weight:700; color:var(--brand-navy); position:relative; z-index:1; transition:all var(--ease); } .flow-step:hover .flow-step-num, .flow-step.is-visible .flow-step-num { background:linear-gradient(135deg,var(--brand-blue),var(--brand-sky)); border-color:transparent; color:#fff; box-shadow:0 8px 22px rgba(0,91,172,0.3); } .flow-step-body { padding-top:0.5rem; flex:1; } .flow-step-body h3 { font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--brand-navy); margin-bottom:0.4rem; } .flow-step-body p { font-size:0.86rem; color:var(--text-sub); line-height:1.8; } .flow-step-tag { display:inline-flex; align-items:center; gap:0.4rem; font-family:var(--en); font-size:0.68rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--brand-sky); margin-bottom:0.3rem; } .flow-step-tag img { width:18px; height:18px; } /* ============================================================ 14. SYSTEM COMPARISON TABLE ============================================================ */ .system-intro { display:grid; grid-template-columns:1fr 440px; gap:clamp(2rem,4vw,3.5rem); align-items:start; margin-bottom:3rem; } .system-intro-img { border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; background:var(--base-alt); box-shadow:var(--shadow-md); } .system-intro-img img { width:100%; height:100%; object-fit:cover; } .comparison-table { width:100%; border-collapse:separate; border-spacing:0; font-size:0.86rem; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); } .comparison-table thead th { background:var(--brand-navy); color:#fff; font-weight:600; padding:1.1rem 1rem; text-align:center; font-size:0.85rem; letter-spacing:0.03em; } .comparison-table thead th:first-child { background:var(--brand-deep); text-align:left; width:150px; } .comparison-table thead th .th-icon { display:flex; flex-direction:column; align-items:center; gap:0.45rem; } .comparison-table thead th .th-icon img { width:26px; height:26px; object-fit:contain; filter:brightness(0) invert(1); margin:0 auto; } .comparison-table tbody tr { border-bottom:1px solid var(--border-light); } .comparison-table tbody tr:nth-child(even) td { background:var(--base); } .comparison-table tbody td { padding:0.9rem 1rem; color:var(--text-sub); font-size:0.84rem; vertical-align:middle; line-height:1.7; text-align:center; background:#fff; } .comparison-table tbody td:first-child { font-weight:700; color:var(--brand-navy); font-size:0.82rem; background:var(--base-alt) !important; text-align:left; } .check { color:var(--green-muted); font-weight:700; } .check::before { content:'● '; } .partial { color:var(--amber); } .system-cards-mobile { display:none; } .system-card-m { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:1rem; box-shadow:var(--shadow-sm); } .system-card-m-head { background:var(--brand-navy); color:#fff; padding:1rem 1.25rem; display:flex; align-items:center; gap:0.7rem; } .system-card-m-head img { width:24px; height:24px; filter:brightness(0) invert(1); } .system-card-m-head h3 { font-size:0.95rem; font-weight:600; } .system-card-m-body { padding:1rem 1.25rem; background:#fff; } .system-card-m-row { padding:0.6rem 0; border-bottom:1px solid var(--border-light); font-size:0.84rem; } .system-card-m-row:last-child { border-bottom:none; } .system-card-m-row .label { font-size:0.72rem; color:var(--brand-blue); font-weight:600; margin-bottom:0.2rem; } /* ============================================================ 15. SUPPORT (challenge vs solution) ============================================================ */ .support-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:2.5rem; box-shadow:var(--shadow-md); } .support-col { padding:clamp(1.75rem,3vw,2.75rem); } .support-col--challenge { background:var(--base-alt); border-right:1px solid var(--border); } .support-col--solution { background:#fff; } .support-col-title { display:flex; align-items:center; gap:0.55rem; font-family:var(--en); font-size:0.74rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--brand-blue); margin-bottom:1.4rem; } .support-item { display:flex; gap:0.8rem; align-items:flex-start; padding:0.8rem 0; border-bottom:1px solid var(--border-light); } .support-item:last-child { border-bottom:none; } .support-dot { flex-shrink:0; width:7px; height:7px; border-radius:50%; margin-top:0.6rem; } .support-dot--red { background:#D9534F; } .support-dot--green { background:var(--green-muted); } .support-item p { font-size:0.88rem; color:var(--text-sub); line-height:1.75; } .support-img { border-radius:var(--radius); overflow:hidden; aspect-ratio:16/6; background:var(--base-alt); box-shadow:var(--shadow-md); } .support-img img { width:100%; height:100%; object-fit:cover; } /* ============================================================ 16. TRUST INFO BOARD ============================================================ */ .trust-board { display:grid; grid-template-columns:1fr 380px; gap:clamp(2rem,4vw,3.5rem); align-items:start; } .trust-info-row { display:flex; align-items:flex-start; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--border-light); font-size:0.9rem; } .trust-info-row:first-child { border-top:1px solid var(--border-light); } .trust-info-label { flex-shrink:0; width:150px; color:var(--muted); font-size:0.8rem; font-weight:600; display:flex; align-items:center; gap:0.5rem; } .trust-info-label img { width:22px; height:22px; } .trust-info-value { color:var(--text); font-weight:500; line-height:1.6; } .trust-info-value a { color:var(--brand-blue); } .trust-links { display:flex; flex-direction:column; gap:0.75rem; background:var(--brand-navy); border-radius:var(--radius); padding:2rem; height:fit-content; } .trust-links-title { font-family:var(--en); font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--brand-sky); margin-bottom:0.6rem; } .trust-link-item { display:flex; align-items:center; justify-content:space-between; padding:0.9rem 1.1rem; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-sm); font-size:0.88rem; color:#fff; transition:background var(--ease), transform var(--ease); } .trust-link-item img { filter:brightness(0) invert(1); opacity:0.85; } .trust-link-item:hover { background:rgba(255,255,255,0.14); transform:translateX(4px); } .trust-link-arrow { color:var(--brand-sky); transition:transform var(--ease); } .trust-link-item:hover .trust-link-arrow { transform:translateX(4px); } /* ============================================================ 17. NEWS / REPORT (home dual list) ============================================================ */ .news-section-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); } .news-block-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:1.5rem; padding-bottom:0.9rem; border-bottom:2px solid var(--brand-navy); } .news-block-head h3 { display:flex; align-items:center; gap:0.6rem; font-family:var(--en); font-size:0.85rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--brand-navy); } .news-block-head h3 img { width:22px; height:22px; } .news-list-item { display:grid; grid-template-columns:108px 1fr; gap:0.8rem; align-items:baseline; padding:1rem 0; border-bottom:1px solid var(--border-light); transition:background var(--ease); } .news-list-item:hover { background:var(--pale-blue); } .news-meta { display:flex; flex-direction:column; gap:0.35rem; } .news-date { font-family:var(--en); font-size:0.78rem; font-weight:600; color:var(--brand-blue); letter-spacing:0.04em; } .news-title-link { font-size:0.9rem; color:var(--text); line-height:1.65; transition:color var(--ease); } .news-title-link:hover { color:var(--brand-blue); } /* Home report cards */ .post-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; } .post-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border-light); border-radius:var(--radius); overflow:hidden; transition:transform var(--ease), box-shadow var(--ease); } .post-card:hover { transform:translateY(-7px); box-shadow:var(--shadow-lg); } .post-thumb { aspect-ratio:16/10; overflow:hidden; background:var(--base-alt); } .post-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s var(--ease-out); } .post-card:hover .post-thumb img { transform:scale(1.07); } .post-body { padding:1.5rem; display:flex; flex-direction:column; flex:1; } .post-meta { display:flex; align-items:center; gap:0.7rem; margin-bottom:0.7rem; } .post-date { font-family:var(--en); font-size:0.78rem; font-weight:600; color:var(--brand-blue); } .post-card h3 { font-family:var(--serif); font-size:1.02rem; font-weight:600; color:var(--brand-navy); line-height:1.6; margin-bottom:0.6rem; } .post-card p { font-size:0.84rem; color:var(--text-sub); line-height:1.8; flex:1; } .post-card .post-link { margin-top:1.1rem; font-family:var(--en); font-size:0.76rem; font-weight:600; color:var(--brand-blue); display:flex; align-items:center; gap:0.4rem; } @media (max-width:1024px){ .post-cards { grid-template-columns:1fr; max-width:520px; margin-inline:auto; } } /* ============================================================ 17b. SNS / QR SECTION ============================================================ */ .sns-section { background:linear-gradient(180deg, #fff 0%, var(--pale-blue) 100%); } .sns-qr-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; max-width:760px; margin:0 auto; } .sns-qr-card { display:flex; flex-direction:column; align-items:center; text-align:center; background:#fff; border:1px solid var(--border); border-radius:22px; padding:2.75rem 2rem; box-shadow:var(--shadow-md); transition:transform var(--ease), box-shadow var(--ease); } .sns-qr-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); } .sns-qr-ico { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--pale-blue); color:var(--brand-blue); margin-bottom:1.1rem; } .sns-qr-card h3 { font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--brand-navy); margin-bottom:0.5rem; } .sns-qr-card > p { color:var(--text-sub); line-height:1.85; font-size:0.9rem; margin-bottom:1.6rem; max-width:300px; } .sns-qr-img { padding:14px; background:#fff; border:1px solid var(--border-light); border-radius:16px; margin-bottom:1.6rem; line-height:0; box-shadow:var(--shadow-sm); } .sns-qr-img img { width:200px; max-width:100%; height:auto; display:block; } .sns-qr-card .btn { margin-top:auto; } @media (max-width:768px) { .sns-qr-grid { grid-template-columns:1fr; gap:1.5rem; max-width:420px; } .sns-qr-card { padding:2.25rem 1.5rem; } .sns-qr-img img { width:190px; } } /* footer SNS links */ .footer-sns { display:flex; gap:0.75rem; margin-top:1.25rem; } .footer-sns a { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:rgba(255,255,255,0.85); transition:background var(--ease), transform var(--ease), color var(--ease); } .footer-sns a:hover { background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; transform:translateY(-3px); } /* ============================================================ 18. CTA SECTION (navy) ============================================================ */ .cta-section { position:relative; overflow:hidden; background:linear-gradient(120deg, var(--brand-deep), var(--brand-navy) 55%, #0A3766); color:#fff; padding:clamp(64px,8vw,110px) 0; isolation:isolate; } .cta-section::before { content:''; position:absolute; z-index:-1; right:-6%; top:-30%; width:min(50vw,560px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 40% 40%, rgba(0,168,232,0.3), transparent 60%); } .cta-inner { display:grid; grid-template-columns:1fr auto; gap:clamp(2rem,4vw,4rem); align-items:center; } .cta-message { max-width:620px; } .cta-message h2 { font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.3rem); font-weight:600; color:#fff; margin-bottom:1rem; line-height:1.55; } .cta-message p { font-size:0.95rem; color:rgba(255,255,255,0.82); line-height:2; } .cta-actions { display:flex; flex-direction:column; gap:0.85rem; align-items:stretch; min-width:300px; } .cta-tel { display:flex; align-items:center; gap:0.8rem; padding:1rem 1.5rem; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:var(--radius-sm); transition:background var(--ease); } .cta-tel:hover { background:rgba(255,255,255,0.14); } .cta-tel img { filter:brightness(0) invert(1); } .cta-tel-num { font-family:var(--en); font-size:1.5rem; font-weight:700; color:#fff; letter-spacing:0.04em; line-height:1; display:block; } .cta-tel-label { font-size:0.72rem; color:rgba(255,255,255,0.65); display:block; margin-top:0.3rem; } .cta-mail { display:flex; align-items:center; gap:0.6rem; font-size:0.86rem; color:rgba(255,255,255,0.8); justify-content:center; } .cta-mail img { filter:brightness(0) invert(1); opacity:0.8; } .cta-mail a { color:#fff; } /* ============================================================ 19. PAGE HERO (inner pages) ============================================================ */ .page-hero { position:relative; padding-top:var(--header-h); } .page-hero-img { height:clamp(240px,38vw,420px); overflow:hidden; position:relative; background:var(--brand-navy); } .page-hero-img img { width:100%; height:100%; object-fit:cover; opacity:0.55; animation:kenburns 16s ease-out infinite alternate; } .page-hero-img::after { content:''; position:absolute; inset:0; background:linear-gradient(110deg, rgba(7,24,39,0.85), rgba(11,31,58,0.55) 60%, rgba(0,91,172,0.4)); } .page-hero-overlaytext { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:center; max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter); color:#fff; } .page-hero-overlaytext .label-en { color:var(--brand-sky); } .page-hero-overlaytext .label-en::before { background:var(--brand-sky); } .page-hero-overlaytext .page-hero-title { color:#fff; } .page-hero-overlaytext .page-hero-sub { color:rgba(255,255,255,0.85); } .page-hero-body { background:#fff; padding:1.25rem 0; border-bottom:1px solid var(--border-light); } .breadcrumb ol { display:flex; align-items:center; gap:0.45rem; flex-wrap:wrap; } .breadcrumb { font-size:0.78rem; color:var(--text-muted); } .breadcrumb li { display:flex; align-items:center; gap:0.45rem; } .breadcrumb li + li::before { content:'/'; opacity:0.5; } .breadcrumb a { color:var(--text-muted); transition:color var(--ease); } .breadcrumb a:hover { color:var(--brand-blue); } .page-hero-title { font-family:var(--serif); font-size:clamp(1.8rem,4vw,2.8rem); font-weight:600; color:var(--brand-navy); letter-spacing:0.03em; line-height:1.4; } .page-hero-sub { font-size:0.95rem; color:var(--text-sub); margin-top:0.6rem; max-width:680px; } /* ============================================================ 20. INFO TABLE / OUTLINE ============================================================ */ .info-table { width:100%; border-collapse:collapse; font-size:0.92rem; } .info-table tr { border-bottom:1px solid var(--border-light); } .info-table th { width:170px; padding:1.1rem 1.25rem 1.1rem 0; color:var(--muted); font-weight:600; vertical-align:top; white-space:nowrap; } .info-table td { padding:1.1rem 1rem 1.1rem 1.5rem; color:var(--text); line-height:1.85; border-left:2px solid var(--brand-light-blue); } .info-table a { color:var(--brand-blue); } /* ============================================================ 21. HISTORY TIMELINE ============================================================ */ .history-timeline { position:relative; padding-left:2.75rem; } .history-timeline::before { content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--border); } .history-item { position:relative; padding-bottom:2.75rem; } .history-item:last-child { padding-bottom:0; } .history-item::before { content:''; position:absolute; left:-2.75rem; top:5px; width:16px; height:16px; border-radius:50%; background:var(--brand-sky); border:3px solid #fff; box-shadow:0 0 0 2px var(--brand-sky); } .history-year { font-family:var(--en); font-size:0.82rem; font-weight:700; color:var(--brand-blue); letter-spacing:0.06em; margin-bottom:0.4rem; } .history-item h3 { font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--brand-navy); margin-bottom:0.4rem; } .history-item p { font-size:0.9rem; color:var(--text-sub); line-height:1.85; } /* ============================================================ 22. SERVICE DETAIL ============================================================ */ .service-intro-2col, .detail-2col { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center; } .detail-2col { align-items:start; margin-bottom:3.5rem; } .service-intro-img, .detail-img { border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:var(--base-alt); box-shadow:var(--shadow-md); } .service-intro-img img, .detail-img img { width:100%; height:100%; object-fit:cover; } .point-list { margin-top:1.5rem; display:flex; flex-direction:column; } .point-item { display:flex; gap:1rem; align-items:flex-start; padding:1rem 0; border-bottom:1px solid var(--border-light); } .point-item:first-child { border-top:1px solid var(--border-light); } .point-icon-wrap { flex-shrink:0; width:34px; height:34px; background:transparent; display:flex; align-items:flex-start; justify-content:center; } .point-icon-wrap img { width:24px; height:24px; } .point-item-body h4 { font-size:0.95rem; font-weight:700; color:var(--brand-navy); margin-bottom:0.25rem; } .point-item-body p { font-size:0.86rem; color:var(--text-sub); line-height:1.8; } .toku-compare { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2rem; } .toku-card { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); } .toku-card-head { background:var(--brand-navy); color:#fff; padding:1.1rem 1.25rem; font-family:var(--serif); font-size:1rem; font-weight:600; } .toku-card-body { padding:1.25rem; background:#fff; } .toku-row { padding:0.65rem 0; border-bottom:1px solid var(--border-light); font-size:0.85rem; } .toku-row:last-child { border-bottom:none; } .toku-row .lbl { font-size:0.72rem; color:var(--brand-blue); font-weight:600; margin-bottom:0.15rem; } .toku-row .val { color:var(--text); } /* ============================================================ 23. MESSAGE PAGE ============================================================ */ .message-layout { display:grid; grid-template-columns:1fr 380px; gap:clamp(2.5rem,5vw,5rem); align-items:start; } .message-body { max-width:600px; } .message-body p { font-size:0.98rem; color:var(--text-sub); line-height:2.2; margin-bottom:1.5rem; } .message-body strong { color:var(--brand-navy); } .message-signature { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border-light); } .message-signature p { font-size:0.85rem; color:var(--text-sub); margin-bottom:0.25rem; } .message-signature strong { font-family:var(--serif); font-size:1.2rem; color:var(--brand-navy); } .message-img { border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4; background:var(--base-alt); position:sticky; top:100px; box-shadow:var(--shadow-md); } .message-img img { width:100%; height:100%; object-fit:cover; } /* ============================================================ 24. CONTACT FORM ============================================================ */ .contact-layout { display:grid; grid-template-columns:1fr 320px; gap:clamp(2rem,4vw,4rem); align-items:start; } .contact-intro-img { border-radius:var(--radius); overflow:hidden; aspect-ratio:16/5; background:var(--base-alt); margin-bottom:2.5rem; box-shadow:var(--shadow-md); } .contact-intro-img img { width:100%; height:100%; object-fit:cover; } .form-row { margin-bottom:1.6rem; } .form-label { display:flex; align-items:center; gap:0.5rem; font-size:0.86rem; font-weight:600; color:var(--brand-navy); margin-bottom:0.5rem; } .form-req { font-size:0.65rem; background:#D9534F; color:#fff; padding:0.12rem 0.45rem; border-radius:4px; letter-spacing:0.04em; } .form-opt { font-size:0.65rem; border:1px solid var(--border); color:var(--text-muted); padding:0.12rem 0.45rem; border-radius:4px; } .form-input, .form-select, .form-textarea { width:100%; padding:0.85rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:0.92rem; color:var(--text); background:#fff; transition:border-color var(--ease), box-shadow var(--ease); outline:none; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--brand-sky); box-shadow:0 0 0 4px rgba(0,168,232,0.14); } .form-input::placeholder, .form-textarea::placeholder { color:var(--text-muted); } .form-textarea { min-height:170px; resize:vertical; line-height:1.7; } .form-select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23005BAC' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem; } .radio-group { display:flex; gap:1.5rem; flex-wrap:wrap; } .radio-item { display:flex; align-items:center; gap:0.5rem; cursor:pointer; font-size:0.9rem; } .radio-item input { width:18px; height:18px; accent-color:var(--brand-blue); } .form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .privacy-box { background:var(--pale-blue); border:1px solid var(--border-light); border-radius:var(--radius-sm); padding:1.1rem 1.4rem; font-size:0.84rem; color:var(--text-sub); line-height:1.85; margin-bottom:1.75rem; } .privacy-box a { color:var(--brand-blue); text-decoration:underline; } .agree-row { display:flex; align-items:center; gap:0.6rem; margin-bottom:1.75rem; font-size:0.9rem; cursor:pointer; } .agree-row input { width:18px; height:18px; accent-color:var(--brand-blue); } .contact-sidebar-info { background:var(--brand-navy); color:#fff; border-radius:var(--radius); padding:2rem; position:sticky; top:100px; } .contact-sidebar-info h3 { font-family:var(--en); font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--brand-sky); margin-bottom:1.4rem; padding-bottom:0.9rem; border-bottom:1px solid rgba(255,255,255,0.15); } .contact-info-item { display:flex; align-items:flex-start; gap:0.75rem; padding:0.95rem 0; border-bottom:1px solid rgba(255,255,255,0.12); font-size:0.85rem; } .contact-info-item:last-child { border-bottom:none; } .contact-info-item img { filter:brightness(0) invert(1); opacity:0.85; } .contact-info-item-text p { font-size:0.72rem; color:rgba(255,255,255,0.6); margin-bottom:0.15rem; } .contact-info-item-text strong { color:#fff; } .contact-info-item-text a { color:#fff; } .contact-info-item-text a:hover { color:var(--brand-sky); } .contact-hours { margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,0.15); font-size:0.82rem; color:rgba(255,255,255,0.78); line-height:2; } .contact-hours strong { color:#fff; } /* ============================================================ 25. NEWS / REPORT LIST PAGES ============================================================ */ .news-page-layout { display:grid; grid-template-columns:1fr 280px; gap:clamp(2rem,4vw,3.5rem); align-items:start; } .news-list-full-item { padding:1.5rem 0; border-bottom:1px solid var(--border-light); display:grid; grid-template-columns:130px 1fr; gap:1rem; align-items:start; transition:background var(--ease); } .news-list-full-item:first-child { border-top:1px solid var(--border-light); } .news-list-full-item:hover { background:var(--pale-blue); } .news-list-full-date { font-family:var(--en); font-size:0.82rem; font-weight:600; color:var(--brand-blue); letter-spacing:0.04em; padding-top:0.15rem; } .news-list-full-body h3 { font-size:0.98rem; font-weight:600; color:var(--brand-navy); margin-bottom:0.4rem; line-height:1.6; } .news-list-full-body p { font-size:0.86rem; color:var(--text-sub); line-height:1.8; } .news-sidebar-block { margin-bottom:2.25rem; } .news-sidebar-block h3 { font-family:var(--en); font-size:0.78rem; font-weight:700; color:var(--brand-navy); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:0.9rem; padding-bottom:0.6rem; border-bottom:2px solid var(--brand-navy); } .cat-btn { display:flex; justify-content:space-between; align-items:center; width:100%; padding:0.7rem 0.9rem; font-size:0.86rem; color:var(--text-sub); border-radius:var(--radius-sm); transition:background var(--ease), color var(--ease); text-align:left; } .cat-btn:hover, .cat-btn.active { background:var(--brand-navy); color:#fff; } .cat-count { font-size:0.72rem; opacity:0.6; } .page-nav { display:flex; gap:0.5rem; margin-top:2.5rem; } .page-btn { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:var(--en); font-size:0.88rem; font-weight:600; color:var(--text-sub); background:#fff; transition:all var(--ease); } .page-btn:hover, .page-btn.current { background:var(--brand-navy); color:#fff; border-color:var(--brand-navy); } /* ============================================================ 26. FOOTER ============================================================ */ .site-footer { background:var(--brand-deep); color:rgba(255,255,255,0.8); padding:clamp(56px,7vw,84px) 0 0; position:relative; overflow:hidden; } .site-footer::before { content:''; position:absolute; left:-5%; bottom:-40%; width:min(40vw,440px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(0,91,172,0.22), transparent 65%); } .footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,4vw,3.5rem); padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,0.1); position:relative; } .footer-brand .footer-logo { display:flex; align-items:center; gap:0.85rem; margin-bottom:1.25rem; } .footer-brand .footer-logo img { height:54px; width:auto; object-fit:contain; } .footer-brand .footer-logo-text .en { font-family:var(--en); font-size:0.62rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.55); display:block; } .footer-brand .footer-logo-text .jp { font-family:var(--sans); font-size:1.1rem; font-weight:700; color:#fff; letter-spacing:0.06em; } .footer-address { font-size:0.82rem; color:rgba(255,255,255,0.62); line-height:2; margin-top:0.5rem; } .footer-address a { color:rgba(255,255,255,0.62); } .footer-address a:hover { color:#fff; } .footer-nav-col h3 { font-family:var(--en); font-size:0.72rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--brand-sky); margin-bottom:1.1rem; } .footer-nav-col ul { display:flex; flex-direction:column; gap:0.6rem; } .footer-nav-col ul li a { font-size:0.86rem; color:rgba(255,255,255,0.68); transition:color var(--ease), padding var(--ease); } .footer-nav-col ul li a:hover { color:#fff; padding-left:0.3rem; } .footer-license { font-size:0.74rem; color:rgba(255,255,255,0.42); letter-spacing:0.04em; padding:1.4rem 0; border-bottom:1px solid rgba(255,255,255,0.08); position:relative; } .footer-copy { font-size:0.74rem; color:rgba(255,255,255,0.4); padding:1.2rem 0; text-align:center; font-family:var(--en); letter-spacing:0.04em; } /* ============================================================ 27. ICON IMAGE ADJUSTMENTS ============================================================ */ .about-list-item img[src*="icons/"], .point-item img[src*="icons/"], .support-col-title img[src*="icons/"], .trust-info-label img[src*="icons/"], .contact-info-item img[src*="icons/"], .cta-tel img[src*="icons/"], .cta-mail img[src*="icons/"], .news-block-head img[src*="icons/"], .flow-step-tag img[src*="icons/"], .svc-ico img[src*="icons/"] { object-fit:contain; } .th-icon img[src*="icons/"], .system-card-m-head img[src*="icons/"], .toku-card-head img[src*="icons/"] { object-fit:contain; } .service-nav-item img[src*="icons/"], .trust-link-item img[src*="icons/"] { object-fit:contain; } .footer-logo img { object-fit:contain; } /* ============================================================ 28. RESPONSIVE ============================================================ */ @media (max-width: 1024px) { :root { --gutter:1.5rem; } .purpose-grid { grid-template-columns:1fr; gap:2rem; } .about-grid { grid-template-columns:1fr; gap:2.5rem; } .svc-grid { grid-template-columns:1fr 1fr; } .mini-cards { grid-template-columns:1fr; } .system-intro { grid-template-columns:1fr; } .flow-grid { grid-template-columns:1fr; } .flow-img { position:static; aspect-ratio:16/9; } .trust-board { grid-template-columns:1fr; } .news-section-grid { grid-template-columns:1fr; gap:2.5rem; } .cta-inner { grid-template-columns:1fr; gap:2rem; } .cta-actions { min-width:0; } .service-intro-2col, .detail-2col { grid-template-columns:1fr; gap:2rem; } .contact-layout { grid-template-columns:1fr; } .contact-sidebar-info { position:static; } .news-page-layout { grid-template-columns:1fr; } .message-layout { grid-template-columns:1fr; } .message-img { position:static; aspect-ratio:16/9; max-width:480px; } .toku-compare { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr 1fr; } .comparison-table { display:none; } .system-cards-mobile { display:block; } .support-grid { grid-template-columns:1fr; } .support-col--challenge { border-right:none; border-bottom:1px solid var(--border); } } @media (max-width: 860px) { .global-nav { display:none; } .hamburger { display:flex; } } @media (max-width: 720px) { .svc-grid { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr; gap:2rem; } .form-grid-2 { grid-template-columns:1fr; } .news-list-item { grid-template-columns:1fr; gap:0.4rem; } .news-list-full-item { grid-template-columns:1fr; gap:0.5rem; } .trust-info-row { flex-direction:column; gap:0.4rem; } .trust-info-label { width:auto; } .hero-stats { gap:1.75rem; } .cta-message h2 { font-size:1.5rem; } } @media (max-width: 480px) { :root { --gutter:1.2rem; } .btn { padding:0.85rem 1.6rem; font-size:0.88rem; } .hero-cta { flex-direction:column; align-items:stretch; } .hero-cta .btn { width:100%; } .hero-stat .num { font-size:1.6rem; } .site-logo img { height:38px; width:auto; } .site-logo-text .jp { font-size:0.88rem; } .site-logo-text .en { font-size:0.52rem; } .history-timeline { padding-left:2.25rem; } } /* ============================================================ 29. SVG MASK ICONS (.ico — currentColor) ============================================================ */ .ico { display:inline-block; flex-shrink:0; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .ico--xs { width:20px; height:20px; } .ico--sm { width:28px; height:28px; } .ico--md { width:40px; height:40px; } .ico-dark { color:var(--brand-navy); } .ico-muted { color:var(--muted); } .ico-blue { color:var(--brand-blue); } .ico-sky { color:var(--brand-sky); } .ico-white { color:#fff; } /* ============================================================ 30. TYPOGRAPHY REFINEMENTS (改行・折り返しの品質) ============================================================ */ /* 日本語にやさしい折り返し：英単語を途中で割らず、句読点の孤立を減らす */ body { word-break: normal; overflow-wrap: break-word; line-break: strict; } /* 見出し：複数行のバランスを整え、1〜2文字の泣き別れを防ぐ */ h1, h2, h3, .hero-catch, .purpose-title, .sec-title, .page-hero-title, .cta-message h2, .sns-qr-card h3, .svc-card h3, .strength-item h3, .flow-step-body h3, .mini-card h4, .about-list-item-body h4, .post-card h3, .news-list-full-body h3 { text-wrap: balance; } /* 本文：最終行に単語・句読点だけが落ちるのを防ぐ */ p, li, dd, .sec-lead, .hero-sub, .hero-note, .purpose-body p { text-wrap: pretty; } /* 英字ラベル等は単語の途中で折り返さない */ .label-en, .hero-kicker, .footer-nav-col h3, .trust-links-title, .news-block-head h3, .contact-sidebar-info h3, .news-sidebar-block h3 { overflow-wrap: normal; word-break: keep-all; } /* 短いラベルのボタン・リンクは改行させない（長文ボタンは折り返し可のまま＝はみ出し防止） */ .btn--ghost, .nav-cta, .svc-link, .post-link, .hero-scroll { white-space: nowrap; } /* 許可番号・電話番号など、途中で割れてはいけない値 */ .hero-stat .num, .cta-tel-num, .news-date, .post-date, .history-year { white-space: nowrap; overflow-wrap: normal; } /* PC/スマホ 改行出し分けヘルパー */ .sp-br { display: none; } @media (max-width: 768px) { .pc-br { display: none; } /* スマホではPC用の強制改行を解除（balanceで自然折り返し） */ .sp-br { display: inline; } } /* 読みやすい行長 */ .sec-lead { max-width: 680px; } /* スマホの本文・行間の底上げ */ @media (max-width: 768px) { .sec-lead { line-height: 2; } .svc-card p, .strength-item p, .mini-card p, .post-card p { line-height: 1.9; } .hero-sub { font-size: 1rem; } .hero-note { font-size: 0.9rem; } } /* PHASE4-PAGE-STYLES */ /* 下層ページの旧 inline