/* Origami Pixel — Creative V2 */ :root{ --brand-indigo:#243C56; --brand-turquoise: #009292; --brand-turquoise-light: #179999; --brand-navy:#0D2538; --brand-softwhite:#F8FAFB; --border:#E6EDF3; --gradient-accent:linear-gradient(135deg,#243C56 0%,#00B3B3 100%); --radius:16px; --shadow-sm:0 2px 10px rgba(13,37,56,.06); --shadow-md:0 8px 22px rgba(13,37,56,.10); --shadow-lg:0 12px 28px rgba(13,37,56,.16); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:Inter,"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--brand-navy); background: #F8FAFC; line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a{color:var(--brand-turquoise); text-decoration:none} a:hover{text-decoration:none} .container{width:min(1200px,92%); margin-inline:auto} /* Smooth scrolling & anchor offset */ html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} } /* Offset for sticky header when jumping to anchors */ section[id], [id].section{scroll-margin-top: 84px} @media (max-width:640px){ section[id], [id].section{scroll-margin-top: 64px} } /* Header */ header.site-header{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.85); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--border)} .nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0} .brand{display:flex; align-items:center; gap:12px; color:var(--brand-indigo); font-weight:600} .brand-logo img{width:28px; height:28px; display:block} nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0} nav a{color:var(--brand-navy); font-weight:600} nav a:hover{color:var(--brand-turquoise)} .lang-switch{display:flex; gap:8px} .lang-btn{position:relative; padding:.45rem .7rem; border:1px solid var(--border); background:#fff; color:var(--brand-navy); border-radius:10px; font-weight:700; cursor:pointer; transition:border-color .2s ease, color .2s ease; white-space:nowrap} .lang-btn.active{border-color:var(--brand-turquoise); color:var(--brand-turquoise)} .lang-btn::after{content:""; position:absolute; inset:0; border-radius:inherit; transform:scale(0); background:radial-gradient(circle at center, rgba(0,179,179,.2), transparent 60%); transition:transform .35s ease, opacity .4s ease; opacity:0} .lang-btn:active::after{transform:scale(2.5); opacity:1} /* Buttons */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; font-family:inherit; font-size:1rem; line-height:1.25; padding:.9rem 1.15rem; border-radius:12px; border:1px solid transparent; cursor:pointer; transition:all .3s ease} .btn-primary{background:var(--gradient-accent); color:#fff; box-shadow:inset 0 2px 0 rgba(255,255,255,.07); position:relative; overflow:hidden} .btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,179,179,.28)} .btn-primary::after{content:""; position:absolute; top:-50%; left:-30%; width:40%; height:200%; background:linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0)); transform:skewX(-20deg); opacity:0} .btn-primary:hover::after{animation:shine 1s ease; opacity:1} @keyframes shine{from{transform:translateX(-100%) skewX(-20deg)} to{transform:translateX(300%) skewX(-20deg)}} .btn-ghost{background:#fff; border:1px solid var(--border); color:var(--brand-indigo)} .btn-ghost:hover{border-color:var(--brand-turquoise); color:var(--brand-turquoise)} /* Link-style button for secondary actions in forms */ .btn-link{background:transparent; border:0; color:rgba(13,37,56,.7); padding:0; border-radius:0; box-shadow:none; text-decoration:none} .btn-link:hover{color:var(--brand-turquoise-light); text-decoration:none} .btn-link:focus{outline:2px solid var(--brand-turquoise-light); outline-offset:2px} /* Icon sizing inside buttons/links */ .btn .icon{width:18px; height:18px; display:inline-block} .btn .icon svg{display:block; width:100%; height:100%} /* Typography */ h1{font-weight:800; font-size:clamp(2.2rem,4.5vw,3.4rem); line-height:1.18; letter-spacing:-.01em; margin:0 0 .6rem} h2{font-weight:800; font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 .75rem; letter-spacing:-.01em} h3{font-weight:700; font-size:1.25rem; margin:.2rem 0 .5rem} p.lead{font-size:1.125rem; opacity:.92; margin:0 0 1.25rem} /* Utility: brand accent text color */ .accent-green{ color: var(--brand-turquoise) } /* Sections */ .section{padding:84px 0} @media (max-width:640px){ .section{padding:56px 0} } /* Nameplate */ .nameplate{position:absolute; left:2%; top:42px; z-index:2; writing-mode:vertical-rl; letter-spacing:.08em; font-weight:700; color:rgba(13,37,56,.5)} /* Show nameplate only on English version; hide for Japanese */ html[lang="ja"] .nameplate{display:none} .nameplate span{background:linear-gradient(180deg,#243C56,#00B3B3); -webkit-background-clip:text; color:transparent} @media (max-width:900px){ .nameplate{display:none} } /* Hero */ .hero{padding:35px 0 96px} .hero--origami{position:relative; overflow:hidden; isolation:isolate; background: radial-gradient(1200px 600px at 120% 120%, rgba(0,179,179,.06), transparent 60%), linear-gradient(to bottom, #ffffff 0%, #f7f9fa 100%)} .hero--origami::before, .hero--origami::after{ content:""; position:absolute; inset:auto auto 0 0; width:80%; height:55%; background: linear-gradient(135deg, rgba(36,60,86,.06), rgba(0,179,179,.05)); transform: translateY(calc(var(--scroll,0px)*.18)) skewY(-6deg) rotate(-1deg); filter: blur(.6px); border-radius: 14px; pointer-events:none; z-index:-1; } .hero--origami::before{ left:-12%; bottom:-28%; width:72%; height:50%; background: linear-gradient(135deg, rgba(0,179,179,.06), rgba(36,60,86,.04)); transform: translateY(calc(var(--scroll,0px)*.12)) skewY(7deg) rotate(1deg) } .hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center} @media (max-width:900px){ .hero-grid{grid-template-columns:1fr} .hero-visual{display:none} } .hero-visual{position:relative; min-height:260px; border-radius:20px; overflow:hidden; background:linear-gradient(135deg,#EAF6F6 0%, #F7FBFF 100%); box-shadow:var(--shadow-sm)} .hero-visual .origami{width:100%; height:100%} .fold{transform-origin:50% 50%} .f1{animation:float1 6s ease-in-out infinite} .f2{animation:float2 7s ease-in-out infinite} @keyframes float1{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}} @keyframes float2{0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)}} /* Soft sections with diagonal fold */ .section.soft{background:linear-gradient(135deg,#F8FAFB 0%,#FFFFFF 100%); position:relative; overflow:hidden} .section.soft::before{ content:""; position:absolute; left:-12%; bottom:-18%; width:70%; height:40%; background: linear-gradient(140deg, rgba(36,60,86,.05), rgba(0,179,179,.07)); transform: rotate(-6deg) skewY(-4deg); border-radius: 16px; } .section.soft::after{ content:""; position:absolute; right:-8%; top:8%; width:30%; height:50%; background: linear-gradient(155deg, rgba(0,179,179,.08), transparent 70%); transform: rotate(-4deg) skewY(-6deg); border-radius: 14px; filter: blur(.4px); } /* Clients */ .logo-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; align-items:center} @media (max-width:900px){ .logo-grid{grid-template-columns:repeat(2, minmax(0,1fr))} } .logo-item{display:flex; align-items:center; justify-content:center; padding:14px 10px; border:1px solid var(--border); border-radius:12px; background:#fff; color:#0D2538; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;} .logo-item:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#D9E5EC} .logo-item svg{width:100%; height:auto; max-width:220px; opacity:.9; filter:grayscale(100%);} .logo-item img{width:100%; height:auto; max-width:220px; opacity:.9; filter:grayscale(100%);} /* ensure raster logos scale consistently */ .logo-item:hover svg, .logo-item:hover img{filter:none; opacity:1} .clients-note{margin-top:10px; font-size:.9rem; color:rgba(13,37,56,.65); text-align:center} /* Grid & cards */ .grid{display:grid; gap:20px} .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-2{grid-template-columns:repeat(2,1fr)} @media (max-width:900px){ .grid.cols-3{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .grid.cols-3,.grid.cols-2{grid-template-columns:1fr} } .card{border:1px solid var(--border); border-radius:var(--radius); padding:24px; background:#fff; box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease; position:relative; overflow:hidden} .card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md)} .card .case-reveal{position:absolute; inset:0; background:linear-gradient(135deg, rgba(0,179,179,.10), rgba(36,60,86,.08)); transform:translateY(100%) skewY(-8deg); transition:transform .5s ease; pointer-events:none} .card:hover .case-reveal{transform:translateY(0) skewY(-8deg)} .stat{font-weight:800; letter-spacing:-.01em} /* Form */ .form--origami{border:1px solid #e8eef4; background:linear-gradient(180deg,#FFFFFF 0%,#F9FBFD 100%); box-shadow:0 8px 24px rgba(13,37,56,.06), 0 2px 8px rgba(13,37,56,.04); border-radius:20px; padding:22px} .form--origami{ background: #F3F7FB; /* 淡い背景色 */ border: 1px solid #D3E4F0; border-radius: 18px; } .input,textarea{width:100%; border:1px solid var(--border); border-radius:12px; padding:.9rem 1rem; outline:0; background:#fff; color:var(--brand-navy); transition: box-shadow .2s ease, border-color .2s ease; font:inherit} .input:focus,textarea:focus{border-color:var(--brand-turquoise); box-shadow:0 0 0 4px rgba(0,179,179,.15), 0 1px 0 #eef3f8 inset} .cta-ribbon{margin:-10px auto 16px; width:max-content; padding:.35rem .7rem; background:var(--gradient-accent); color:#fff; border-radius:999px; box-shadow:0 8px 20px rgba(0,179,179,.25); font-weight:800; font-size:.9rem} .input,textarea{ background: #FFFFFF; border: 1px solid #D5E2EE; /* 現在より少し濃い境界線 */ border-radius: 14px; font-size: 15px; } .input:focus, .textarea:focus { outline: none; border-color: var(--brand-turquoise); /* #009292 */ box-shadow: 0 0 0 2px rgba(0,146,146,0.12); } /* プレースホルダーの可読性を少し上げる */ ::placeholder { color: #A0AEC0; } /* Footer */ .site-footer{ background:#0E1A27; color:#D2DAE2; padding:48px 0 calc(64px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.06) } .site-footer a{ color:#B6E9E9 } .site-footer .brand{ color:#E9F4F4; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; column-gap:12px; } .site-footer .brand-logo{ flex:0 0 auto; margin-top:.18rem; } .site-footer .brand-logo img{display:block} .site-footer .footer-brand-text{ display:block; line-height:1.45; text-wrap:balance; overflow-wrap:anywhere; } .site-footer .footer-brand-nowrap{white-space:nowrap} .site-footer .row{ display:grid; gap:18px; grid-template-columns:1.3fr .7fr .7fr } @media (max-width:760px){ .site-footer .row{ grid-template-columns:1fr } } /* Footer fine type */ .site-footer #footer-copy, .site-footer .last-updated{ font-size: clamp(.78rem, 1.6vw, .92rem); line-height:1.4 } @media (min-width:761px){ .site-footer .footer-brand-text{ max-width:31ch; font-size:1.02rem; } } /* Reveal */ .reveal{opacity:0; transform:translateY(14px); will-change:transform, opacity} .reveal.animate{opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease} .reveal.delay-1{transition-delay:.1s} .reveal.delay-2{transition-delay:.2s} .reveal.delay-3{transition-delay:.3s} /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} } /* Header layout & mobile menu compatible with your header.html */ .site-header{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.85); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid #E6EDF3} .nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0} .nav-menu{display:flex; align-items:center} .nav-menu ul{display:flex; gap:18px; list-style:none; margin:0; padding:0} .nav-menu a{position:relative; display:inline-block; font-weight:600; font-size:1rem; line-height:1.1; padding:.8rem 1.2rem; color:#0D2538; transition: color .2s ease} .nav-menu a::after{content:""; position:absolute; left:1.2rem; right:1.2rem; bottom:.45rem; height:2px; background:#00B3B3; transform:scaleX(0); transform-origin:left center; transition:transform .3s ease} .nav-menu a:hover, .nav-menu a:focus-visible{color:#00B3B3} .nav-menu a:hover::after, .nav-menu a:focus-visible::after{transform:scaleX(1)} /* hamburger (exists in your header) */ .nav-toggle{display:none; width:40px; height:40px; border:1px solid #E6EDF3; border-radius:10px; background:#fff; align-items:center; justify-content:center; gap:3px; cursor:pointer; flex-direction:column; padding:0 8px; line-height:0; position:relative} .nav-toggle-bar{display:block; width:18px; height:2px; background:#0D2538; border-radius:1px; transition:transform .25s ease, opacity .2s ease; transform-origin:50% 50%} /* Morph to X when expanded */ .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform: translateY(5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0 } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg); } @media (max-width:900px){ .nav-toggle{display:inline-flex} .nav-menu{position:absolute; left:12px; right:12px; top:75px; border:1px solid #E6EDF3; transform:translateY(-8px); opacity:0; pointer-events:none; transition:transform .3s ease, opacity .3s ease; will-change:transform, opacity; border-radius:16px; overflow:hidden} .nav-menu.open{transform:translateY(0); opacity:1; pointer-events:auto; -webkit-backdrop-filter: saturate(120%) contrast(1.05) blur(18px); backdrop-filter: saturate(120%) contrast(1.05) blur(18px); background: rgba(255,255,255,0.95); box-shadow: 0 8px 30px rgba(0,0,0,0.08)} .nav-menu ul{flex-direction:column; gap:14px; padding:14px 6px} } /* Respect reduced motion for hamburger */ @media (prefers-reduced-motion: reduce){ .nav-toggle-bar{transition:none} } /* language switcher (exists in your header) */ .lang-switch{display:flex; gap:8px} .lang-btn{position:relative; padding:.45rem .7rem; border:1px solid #E6EDF3; background:#fff; color:#0D2538; border-radius:10px; font-weight:700; cursor:pointer; transition:border-color .2s ease, color .2s ease; white-space:nowrap} .lang-btn.active{border-color:#00B3B3; color:#00B3B3} .lang-btn::after{content:""; position:absolute; inset:0; border-radius:inherit; transform:scale(0); background:radial-gradient(circle at center, rgba(0,179,179,.2), transparent 60%); transition:transform .35s ease, opacity .4s ease; opacity:0} .lang-btn:active::after{transform:scale(2.5); opacity:1} /* CTA buttons inside service cards */ .card .btn{margin-top:10px} /* Mobile-only tweak: ensure JP button fits nicely on EN locale */ @media (max-width:640px){ html[lang="en"] .lang-switch .lang-btn[data-lang="ja"]{ display:inline-flex; align-items:center; justify-content:center; white-space:nowrap !important; font-size:.9rem; /* slightly smaller to avoid wrap */ padding:.42rem .6rem; /* a touch tighter */ letter-spacing:0; /* compact JP glyphs */ } } /* Hashtag badges */ .badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px} .badge{ position:relative; display:inline-flex; align-items:center; justify-content:center; padding:.38rem .7rem; border:1px solid var(--border); background:#fff; color:var(--brand-indigo); border-radius:999px; font-weight:700; letter-spacing:.01em; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .3s ease, border-color .2s ease, background .3s ease, color .2s ease; } .badge::before{ content:"#"; margin-right:.35em; color:var(--brand-turquoise); } .badge:hover{ transform:translateY(-2px); border-color:var(--brand-turquoise); box-shadow:0 10px 22px rgba(0,179,179,.18); background:linear-gradient(180deg,#FFFFFF 0%, #F7FBFF 100%); } .badge:active{transform:translateY(0)} /* Separate hero CTA buttons from hashtag badges so they don't blend */ .hero .badges{ margin-top:18px } /* Micro-proof under hero lead */ .micro-proof{ display:inline-flex; align-items:center; flex-wrap:nowrap; gap:.5rem; font-weight:800; letter-spacing:.01em; margin: -.4rem 0 .6rem; padding:.3rem .65rem; border:1px solid var(--border); border-radius:999px; background:#fff; box-shadow:var(--shadow-sm); white-space:normal; max-width:100%; overflow-wrap:anywhere; word-break:break-word; line-height:1.25; } .micro-proof::before{ content:"✓"; font-weight:900; opacity:.9; } /* Mobile adjustments: make contact ribbon slightly smaller so it fits one line */ @media (max-width:640px){ #contact .micro-proof{ font-size: clamp(.85rem, 3.6vw, .95rem); padding: .24rem .55rem; gap: .4rem; } html[lang="ja"] #contact .micro-proof{ letter-spacing: 0 } #contact .micro-proof::before{ font-size: .95em } } /* Flow mini-graphics: numbered step badges with connector line */ .flow-steps{ counter-reset: step; position: relative; } .flow-steps article{ position:relative; padding-top: 18px; /* space for badge */ } .flow-steps article::before{ counter-increment: step; content: counter(step); position:absolute; top:-6px; left:-6px; width:32px; height:32px; border-radius:50%; background: var(--gradient-accent); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-md); } /* connector line for desktop (subtle) */ @media (min-width:901px){ .flow-steps{ background: linear-gradient(90deg, rgba(0,179,179,.10), rgba(36,60,86,.10)) no-repeat; background-size: 100% 2px; background-position: 0 14px; /* passes behind badges */ } } /* mobile: stack without connector line */ @media (max-width:900px){ .flow-steps{ background:none; } } /* --- Brochure Modal (with animations) --- */ .modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:50; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .28s ease, visibility .28s ease; } .modal.is-open{ opacity:1; visibility:visible; pointer-events:auto } .modal__backdrop{ position:absolute; inset:0; background:rgba(13,37,56,.48); backdrop-filter:blur(2px); opacity:0; transition: opacity .28s ease; } .modal.is-open .modal__backdrop{ opacity:1 } .modal__dialog{ position:relative; z-index:1; width:min(560px,92%); background:#fff; color:#0D2538; border:1px solid var(--border); border-radius:16px; padding:20px 64px 20px 20px; box-shadow:var(--shadow-lg); transform: translateY(10px) scale(.98); opacity:0; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .28s ease; } .modal.is-open .modal__dialog{ transform: translateY(0) scale(1); opacity:1 } .modal__close{ position:absolute; top:10px; right:12px; width:36px; height:36px; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:20px; line-height:1; color:#0D2538; } .modal__title{margin:.2rem 0 .4rem; font-weight:800; font-size:1.25rem} .modal__lead{margin:0 0 .8rem; opacity:.92} .modal__form{display:grid; gap:12px; margin-top:.2rem} .modal__actions{display:flex; gap:10px; margin-top:4px} .modal__note{font-size:.9rem; opacity:.8; margin-top:10px} @media (prefers-reduced-motion: reduce){ .modal{ transition:none } .modal__backdrop, .modal__dialog{ transition:none } .modal__dialog{ transform:none; opacity:1 } } /* Mini industry badges strip under portfolio */ .mini-badges-strip{ margin-top:16px; padding:10px 0; border-top:1px solid var(--border); } .badges--mini{gap:6px; justify-content:center} .badges--mini .badge{padding:.28rem .6rem; font-size:.9rem; box-shadow:var(--shadow-sm)} .badges--mini .badge::before{content:none} /* Portfolio cards enhancements */ #portfolio .grid{ align-items:stretch } #portfolio .card{ display:flex; flex-direction:column; gap:8px } #portfolio .card > p{ max-width:85% } #portfolio .card .mini-head{ max-width:100% } #portfolio .card .mini-head{ margin:.45rem 0 .55rem; display:grid; gap:.35rem } #portfolio .card .mini-row{ display:flex; gap:12px; align-items:center; font-size:.98rem } #portfolio .mini-kicker{ display:inline-flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:.01em; border-radius:999px; padding:.12rem .5rem; line-height:1; flex:0 0 auto; } #portfolio .mini-kicker--problem{ background:rgba(107,114,128,.12); color:#374151; border:1px solid rgba(107,114,128,.25) } #portfolio .mini-kicker--approach{ background:linear-gradient(180deg,#F6F7F9 0%, #F1F5F9 100%); color:inherit; border:1px solid #E5E7EB; padding:.12rem .5rem; border-radius:999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 4px rgba(15,23,42,.08) } #portfolio .mini-kicker--result{ background:rgba(0,191,177,.10); color:var(--brand-turquoise, #00BFB1); border:1px solid rgba(0,191,177,.25) } #portfolio .mini-text{ opacity:.95; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis } #portfolio .accent-green{ color:var(--brand-turquoise) } #portfolio .card--prime{ padding:22px; } #portfolio .card--elevated{ position:relative; padding:24px; box-shadow: 0 10px 25px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.08); transform: translateY(0); transition: box-shadow .25s ease, transform .25s ease; } #portfolio .card--elevated::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; box-shadow: 0 18px 40px rgba(0,0,0,.14); opacity:.85; z-index:-1; } #portfolio .card--elevated:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.16), 0 6px 14px rgba(0,0,0,.10); } @media (min-width: 901px){ #portfolio .card--prime{ grid-column: span 2; padding:28px } #portfolio .card--prime h3{ font-size:1.35rem } } /* App Loader: visible until initial language is applied */ html.app-loading{ overflow:hidden } #app-loader{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column; gap:12px; background:#fff; color:var(--brand-navy); z-index:1000; } #app-loader .app-loader__spinner{ width:32px; height:32px; border-radius:50%; border:3px solid #E6EDF3; border-top-color: var(--brand-turquoise); animation: appSpin 1s linear infinite; } #app-loader .app-loader__label{ font-weight:800; opacity:.82; letter-spacing:.01em } @keyframes appSpin{ to{ transform: rotate(360deg) } } /* Mobile optimizations for Brochure PDF modal */ @media (max-width: 640px){ /* Keep dialog within viewport and avoid horizontal overflow */ .modal__dialog{ width: min(560px, 96%); padding:16px; /* symmetric padding */ overflow:hidden; /* clip any accidental overflow */ word-break:break-word; overflow-wrap:anywhere; } /* Keep the close button usable without reserving space in padding */ .modal__close{ top:8px; right:8px; width:32px; height:32px; border-radius:8px; } /* Keep actions in a single row on mobile (as requested) */ .modal__actions{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:8px; } .modal__actions .btn{ width:auto; /* no full-width buttons */ max-width:100%; white-space:nowrap; /* keep each on one line */ flex:0 1 auto; /* allow slight shrink if needed */ font-size:.95rem; padding:.55rem .8rem; } /* Ensure text inside the modal wraps safely */ .modal__title, .modal__lead, .modal__note{ word-break:break-word; overflow-wrap:anywhere; hyphens:auto; } } /* Japanese typography refinements inside the modal to avoid "shifted" look */ html[lang="ja"] .modal__title, html[lang="ja"] .modal__lead, html[lang="ja"] .modal__note{ letter-spacing: 0; /* do not spread kana/kanji on mobile */ /* Allow wrapping to prevent overflow even with long tokens or mixed-language strings */ word-break: break-word; overflow-wrap: anywhere; line-height: 1.6; /* improve readability and vertical rhythm */ } /* Utilities */ .nowrap{white-space:nowrap} /* Hero enhancements per design recommendations */ .headline-main{font-weight:800; letter-spacing:-.01em} .headline-sub{font-weight:800; letter-spacing:-.01em; color:var(--brand-indigo)} /* Smart, adaptive hero title with balanced wrapping */ .hero-title{ font-size: clamp(22px, 4.5vw, 36px); line-height: 1.3; text-wrap: balance; /* modern browsers: prettier line breaks */ } /* Prevent breaking of marked phrases inside hero title */ .hero-title .nowrap{ white-space: nowrap; word-break: keep-all } .lead-small{font-size:.98rem; opacity:.92; margin:.2rem 0 1rem} .proof-badge{ background:#E8F5E9; /* slightly lighter green */ border-radius:12px; padding:6px 10px; display:inline-block; font-weight:500; color:#1B5E20; /* dark green */ font-size:.9rem; margin-top:.8rem; border: 1px solid rgba(0,0,0,0.05); /* subtle achievement-like outline */ } .cta-wrap{display:flex; flex-direction:column; gap:.6rem; margin-top:1.5rem} .cta-primary{background:linear-gradient(90deg,#007B83,#00AFA1) !important; color:#fff !important; padding:14px 22px !important; border-radius:8px !important; text-align:center; font-weight:600; font-size:1rem} .cta-primary:active{ transform: scale(0.98); opacity: 0.9; transition: 0.1s; } .cta-secondary{border:1px solid #ccc; background:#fff; color:#333; padding:12px 20px; border-radius:8px; text-align:center; font-size:.95rem} .cta-secondary:hover{border-color:var(--brand-turquoise); color:var(--brand-turquoise)} /* Accent gradient for “Webマーケティング” in hero */ .hero h1 strong, .hero .gradient-text{ /* Brightened by ~8% for subtle depth */ background: linear-gradient(90deg, #008A92, #00BFB1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } @media (min-width: 901px){ /* Place hero CTA buttons in one row on desktop */ .cta-wrap{ flex-direction: row; flex-wrap: nowrap; gap: .8rem } .cta-wrap .btn{ width:auto } /* Tighten spacing for hero lead texts on desktop */ .hero .lead{ margin-bottom: .8rem; line-height: 1.55 } .hero .lead-small{ margin-top: .1rem; margin-bottom: .6rem; line-height: 1.55 } } /* Homepage hero hierarchy refinements */ .hero .hero-copy{ max-width:min(42rem, 100%); display:flex; flex-direction:column; align-items:flex-start; } .hero .headline-main, .hero .headline-sub{ display:block; } .hero .hero-title{ max-width:none; margin-bottom:.95rem; line-height:1.18; } .hero .hero-lead{ max-width:34rem; margin:0 0 1rem; font-size:clamp(1rem, 1.45vw, 1.1rem); line-height:1.72; color:rgba(13,37,56,.92); } .hero .hero-support{ max-width:31rem; margin:0 0 .74rem; font-size:clamp(.92rem, 1.1vw, .97rem); line-height:1.68; color:rgba(13,37,56,.66); } .hero .hero-proof{ margin-top:0; padding:.42rem .72rem; font-size:.81rem; line-height:1.4; border-radius:11px; box-shadow:0 6px 16px rgba(27,94,32,.08); } .hero .hero-reassurance{ margin:.48rem 0 0; display:inline-flex; align-items:center; gap:.5rem; max-width:28rem; font-size:.84rem; line-height:1.5; color:rgba(13,37,56,.58); } .hero .hero-reassurance::before{ content:""; width:6px; height:6px; border-radius:999px; background:rgba(0,179,179,.65); flex:0 0 auto; } .hero .hero-cta-wrap{ margin-top:1.05rem; gap:.65rem; } @media (min-width:901px){ .hero{padding:40px 0 94px} .hero-grid{gap:44px} .hero .hero-copy{padding-right:16px} .hero .headline-main{ white-space:nowrap; } .hero .headline-sub{ word-break:keep-all; } .hero .hero-title{ margin-bottom:1.05rem; line-height:1.14; } .hero .hero-lead{ max-width:33rem; margin-bottom:.92rem; } .hero .hero-support{ max-width:29rem; margin-bottom:.68rem; } .hero .hero-cta-wrap{ margin-top:1.18rem; gap:.75rem; } } @media (max-width:900px){ .hero{padding:30px 0 72px} .hero .hero-copy{max-width:100%} .hero .hero-title{ margin-bottom:.85rem; font-size:clamp(2.12rem, 8.4vw, 3rem); line-height:1.16; } .hero .hero-lead{ max-width:100%; margin-bottom:.74rem; font-size:1rem; line-height:1.67; } .hero .hero-support{ max-width:100%; margin-bottom:.64rem; font-size:.89rem; line-height:1.58; color:rgba(13,37,56,.6); } .hero .hero-proof{ padding:.34rem .58rem; font-size:.74rem; line-height:1.35; } .hero .hero-reassurance{ max-width:100%; margin-top:.34rem; gap:.42rem; font-size:.78rem; line-height:1.42; } .hero .hero-reassurance::before{ width:5px; height:5px; } .hero .hero-cta-wrap{ margin-top:.9rem; gap:.55rem; } } @media (max-width:640px){ .hero{padding:24px 0 62px} .hero .hero-title{ margin-bottom:.76rem; font-size:clamp(2.04rem, 10.6vw, 2.7rem); line-height:1.13; } .hero .hero-lead{ max-width:100%; margin-bottom:.64rem; font-size:.98rem; line-height:1.62; } .hero .hero-support{ max-width:100%; margin-bottom:.56rem; font-size:.84rem; line-height:1.54; } .hero .hero-proof{ padding:.3rem .54rem; font-size:.72rem; } .hero .hero-reassurance{ max-width:100%; margin-top:.26rem; font-size:.76rem; } .hero .hero-cta-wrap{ margin-top:.78rem; width:100%; align-items:flex-start; } .hero .hero-cta-wrap .btn{ width:auto; max-width:100%; min-width:0; } .hero .hero-cta-wrap .cta-primary{ padding:13px 20px !important; } .hero .hero-cta-wrap .cta-secondary{ padding:12px 18px; } } /* Clients images support */ .logo-item{min-height:84px} .logo-item img{display:block; max-width:100%; max-height:56px; width:auto; height:auto; opacity:.9; filter:grayscale(100%); object-fit:contain} .logo-item:hover img{filter:none; opacity:1} /* Scale down Toshiba logo inside the same tile */ .logo-item img.logo-img--toshiba{ max-height:24px } /* Scale down MeduPro logo inside the same tile */ .logo-item img.logo-img--medupro{ max-height:32px } /* Service cards — recommendation mini-block and separator */ #services .grid{align-items:stretch} #services .card{ display:flex; flex-direction:column; height:100%; } #services .rec-list{ margin-bottom:auto; } #services .card .btn{ margin-top:18px; align-self:flex-start; } .card-sep{ border:0; border-top:1px solid #F1F5F9; margin:.85rem 0 .7rem } .text-sm{ font-size:.95rem } .rec-list{ color:rgba(13,37,56,.75) } .rec-title{ font-weight:600; color:#243C56; margin:0 0 .35rem } .rec-list ul{ margin:0; padding-left:1.15rem; list-style:disc } .rec-list ul li{ margin:.25rem 0 } /* Services Hub grid and cards (desktop polish) */ .services-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:24px; margin-top:28px } @media (min-width: 992px){ .services-grid{ grid-template-columns: repeat(3, 1fr); gap:26px } } @media (min-width: 1280px){ .services-grid{ grid-template-columns: repeat(4, 1fr); gap:28px } } .service-card{ border:1px solid var(--border); border-radius:14px; background:#fff; padding:20px; display:flex; flex-direction:column; min-height:100%; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease } .service-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#DAE6EF } .service-title{ font-size:1.15rem; line-height:1.35; margin:.2rem 0 .5rem; letter-spacing:-.01em } .service-link{ color:var(--brand-navy) } .service-link:hover{ color:var(--brand-turquoise) } .service-excerpt{ margin:0 0 .9rem; opacity:.9 } /* Keep cards the same height by clamping text rows on desktop */ @supports (-webkit-line-clamp: 1) or (line-clamp: 1){ @media (min-width: 992px){ .service-excerpt{ display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; overflow:hidden } } } /* Pin CTA to the bottom for equal visual rhythm */ .service-card .btn{ margin-top:auto } /* Accessible focus states */ .service-card .btn:focus-visible, .service-link:focus-visible{ outline:2px solid var(--brand-turquoise); outline-offset:3px; border-radius:10px } /* Services Hub CTA */ .service-cta{ margin-top:44px; padding:28px; text-align:center; background:linear-gradient(135deg,#F8FAFB 0%,#FFFFFF 100%); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-sm) } .service-cta h2{ font-weight:800; font-size:clamp(1.4rem,2.6vw,2rem); margin:0 0 .4rem } .service-cta p{ margin:.2rem auto 1rem; opacity:.92 } .service-cta .cta-button{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:800; padding:.85rem 1.1rem; border-radius:12px; background:var(--gradient-accent); color:#fff; border:1px solid transparent; box-shadow: inset 0 2px 0 rgba(255,255,255,.07) } .service-cta .cta-button:hover{ transform:translateY(-1px); box-shadow: 0 10px 20px rgba(0,179,179,.28) } .service-cta .cta-button:focus-visible{ outline:2px solid var(--brand-turquoise); outline-offset:3px } @media (min-width: 992px){ .service-cta{ padding:34px } .service-cta p{ max-width:60ch } } .entry-content section{margin:28px 0} .entry-content h1{margin:0 0 18px} .entry-content h2{margin:24px 0 12px} .entry-content h3{margin:18px 0 8px} .entry-content p{margin:0 0 14px} .entry-content ul, .entry-content ol{margin:8px 0 16px; padding-left:1.2em} .entry-content ul{list-style:disc} .entry-content ol{list-style:decimal} .entry-content li{margin:4px 0} /* Definition lists (FAQ) */ .entry-content dl{margin:10px 0 20px} .entry-content dt{font-weight:700; margin-top:14px} .entry-content dd{margin:6px 0 10px 0} :root{ --scroll: 0px; } /* ===== Website Dev — Spec-compliant styles (FAQ, Price, Timeline, Services) ===== */ /* FAQ — Beautiful modern accordion (keep dl/dt/dd) */ .faq dl { border-top: 1px solid #E5E9F1; } .faq dt { font-weight: 700; padding: 24px 0; cursor: pointer; position: relative; font-size: 20px; } .faq dt::after { content: '+'; position: absolute; right: 0; top: 24px; font-size: 24px; color: #0E2F58; transition: transform .3s; } .faq dt.active::after { content: '-'; transform: rotate(180deg); } .faq dd { padding: 0 0 24px 0; font-size: 18px; line-height: 1.7; display: none; color: #333; } /* Price list —
  • as cards (keep original UL) */ .price-list ul { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .price-list ul { grid-template-columns: 1fr 1fr; } } .price-list li { background: #F8FAFC; padding: 24px; border-radius: 12px; border-left: 4px solid #0E2F58; box-shadow: 0 2px 6px rgba(0,0,0,0.05); font-size: 18px; } /* Timeline — vertical numbered steps (keep original OL) */ .timeline ol { counter-reset: step; list-style: none; padding: 0; } .timeline li { position: relative; padding-left: 48px; margin-bottom: 32px; font-size: 18px; } .timeline li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; background: #0E2F58; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; } /* Services sections — 4 big sections as cards (keep h3 + ul) */ .services-sections { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 900px) { .services-sections { grid-template-columns: 1fr 1fr; } } .services-sections div { background: #FFFFFF; border: 1px solid #E5E9F1; padding: 32px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .services-sections h3 { padding-left: 12px; border-left: 4px solid #0E2F58; margin-bottom: 16px; font-size: 22px; font-weight: 700; } /* Breadcrumbs — Website Dev page */ /* Scoped to .svc-webdev to ensure specificity and avoid overrides */ .breadcrumbs{margin:8px 0 4px; font-size:.72rem; line-height:1.4; color:rgba(0,179,179,.75)} .breadcrumbs .container{padding:0} /* New inline trail (no list) */ .breadcrumbs__trail{display:flex; align-items:baseline; flex-wrap:wrap; gap:.2rem} .breadcrumbs__link{color:rgba(0,179,179,.82); text-decoration:none; font-weight:600} .breadcrumbs__link:hover{color:rgba(0,179,179,.9); text-decoration:underline} .breadcrumbs__divider{margin:0 .3rem; color:rgba(0,179,179,.8)} .breadcrumbs__current{color:rgba(0,179,179,.78); font-weight:600} /* Keep legacy list styling for backward compatibility (if any other page uses
    1. ) */ .breadcrumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:.2rem; padding:0; margin:0; align-items:baseline} .breadcrumbs li{display:flex; align-items:baseline; color:rgba(0,179,179,.78)} .breadcrumbs li+li::before{content:"›"; margin:0 .3rem; color:rgba(0,179,179,.8)} .breadcrumbs [aria-current="page"]{color:rgba(0,179,179,.78); font-weight:600} @media (max-width: 640px){ .breadcrumbs{font-size:.68rem} } /* LP service: Benefits cards — make them cleaner and more polished without affecting other cards */ .svc-webdev .svc-benefits .svc-cards{ display:grid; gap:18px } .svc-webdev .svc-benefits .card{ border:1px solid #E6EDF3; background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFE 100%); border-radius:14px; padding:22px 24px; box-shadow: 0 4px 14px rgba(13,37,56,.05); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .svc-webdev .svc-benefits .card:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(13,37,56,.08); border-color:#D9E5EC; } .svc-webdev .svc-benefits .card h3{ margin:0 0 6px 0; font-size: clamp(1.05rem, 1.7vw, 1.22rem); line-height:1.3; letter-spacing:.01em; } .svc-webdev .svc-benefits .card p{ margin:0; color: rgba(13,37,56,.78); line-height:1.7; } /* Compact layout on mobile */ @media (max-width: 720px){ .svc-webdev .svc-benefits .card{ padding:18px 16px; border-radius:12px } } /* Soft-JP Combined Section (Japanese Soft Section) */ .soft-jp{background:#F7FAFC; border:1px solid #E1EBF2; border-radius:16px; padding:36px; box-shadow:0 8px 25px rgba(0,0,0,0.03)} @media (max-width:640px){ .soft-jp{padding:24px; border-radius:14px} } .soft-jp__title{color:#0AA5A5; font-weight:800; letter-spacing:.01em; margin:0 0 .6rem} .soft-jp__lead{margin:0 0 1.25rem; opacity:.9} .soft-jp__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:10px} @media (max-width:900px){ .soft-jp__grid{grid-template-columns:1fr} } .soft-jp__card{background:#fff; border:1px solid #E1EBF2; border-radius:14px; padding:22px; box-shadow:var(--shadow-sm)} .soft-jp__kicker{font-size:1.05rem; color:#0D2538; margin:0 0 .6rem; position:relative; padding-left:28px} /* Hide the leading emoji leaf visually */ .soft-jp__kicker::first-letter{ color:transparent } /* Thin turquoise line icon (leaf-like) */ .soft-jp__kicker::before{ content:""; position:absolute; left:0; top:.1rem; width:20px; height:20px; background-image:url('data:image/svg+xml;utf8,'); background-repeat:no-repeat; background-size:contain; opacity:.95; } .soft-jp__list{margin:.5rem 0 0; padding-left:1.2rem} .soft-jp__list li{margin:.4rem 0; line-height:1.78} .soft-jp__list li::marker{ color:#0D2538 } .soft-jp__list--icons{list-style:none; padding-left:0} .soft-jp__list--icons li{display:flex; align-items:flex-start; gap:.55rem; margin:.46rem 0; line-height:1.78} /* Monochrome thin turquoise check icon to avoid LINE-like saturated green */ .icon-check{width:18px; height:18px; display:inline-block; flex:0 0 18px; margin-top:.25rem; border:2px solid #0AA5A5; border-radius:50%; position:relative; background:none; box-shadow:none} .soft-jp__aside{font-size:.95rem; color:rgba(13,37,56,.8); margin:.8rem 0 0} .soft-jp__text{margin:.4rem 0 0} .soft-jp__note{margin:.6rem 0 0; font-size:.95rem; color:rgba(13,37,56,.85)} .soft-jp__micro{display:flex; flex-wrap:wrap; gap:8px; margin-top:.6rem} .soft-jp__micro .micro{font-size:.85rem; color:rgba(13,37,56,.75); background:#F3F8F8; border:1px solid #E1EBF2; padding:.25rem .5rem; border-radius:999px} .soft-jp__actions{display:flex; gap:12px; margin-top:36px; flex-wrap:wrap} .soft-jp__actions .btn{padding:14px 22px; border-radius:12px; font-weight:700} .soft-jp__actions .btn-primary{background:linear-gradient(135deg, #0AA5A5 0%, #00B3B3 100%); box-shadow:0 8px 20px rgba(0,146,146,.22); color:#fff} .soft-jp__actions .btn-primary:hover{box-shadow:0 10px 26px rgba(0,146,146,.28); transform:translateY(-2px)} .soft-jp__actions .btn-primary:active{transform:none} .soft-jp__actions .btn-ghost{background:#fff; border:1px solid #D6E6EE; color:#0D2538; box-shadow:0 6px 18px rgba(0,120,200,.16)} .soft-jp__actions .btn-ghost:hover{background:#FAFEFF; border-color:#CFE3EC} .soft-jp__actions .btn-ghost:active{background:#F2FAFF} /* === Footer CTA buttons (brand style) === */ :root{ --brand-navy: #0D2538; --brand-teal-1: #009292; --brand-teal-2: #00B3B3; /* Global tokens used by tables and subtle UI elements */ --border: #E1EBF2; /* light bluish gray border */ --shadow-sm: 0 2px 8px rgba(13,37,56,.06); /* gentle shadow for scroll wrappers */ } /* Generic reusable buttons */ .btn-primary{ background: linear-gradient(135deg, #009292 0%, #00B3B3 100%); color: #FFFFFF; padding: 14px 28px; font-weight: 600; font-size: 16px; border-radius: 12px; box-shadow: 0 4px 14px rgba(0, 146, 146, 0.25); transition: 0.25s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .btn-primary:hover{ box-shadow: 0 6px 20px rgba(0, 146, 146, 0.32); transform: translateY(-2px); } .btn-primary:active{ transform: translateY(0); box-shadow: 0 2px 10px rgba(0, 146, 146, 0.25); } .btn-secondary{ background: #FFFFFF; color: var(--brand-navy); padding: 14px 28px; font-weight: 600; font-size: 16px; border-radius: 12px; border: 1px solid #D7E9EC; transition: 0.25s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .btn-secondary:hover{ background:#F7FAFA; border-color:#C7DEE0; } .btn-secondary:active{ background:#EEF5F5; } /* Map footer buttons to the new styles without changing PHP (override inline styles) */ #footer-cta-trust .footer-cta{ gap: .6rem; flex-wrap: wrap; } #footer-cta-trust a[data-i18n="footer.cta_contact_btn"]{ background: linear-gradient(135deg, #009292 0%, #00B3B3 100%) !important; color: #FFFFFF !important; padding: 14px 28px !important; font-weight: 600 !important; font-size: 16px !important; border-radius: 12px !important; box-shadow: 0 4px 14px rgba(0, 146, 146, 0.25) !important; transition: 0.25s ease !important; border: none !important; text-decoration: none !important; } #footer-cta-trust a[data-i18n="footer.cta_contact_btn"]:hover{ box-shadow: 0 6px 20px rgba(0, 146, 146, 0.32) !important; transform: translateY(-2px) !important; } #footer-cta-trust a[data-i18n="footer.cta_contact_btn"]:active{ transform: translateY(0) !important; box-shadow: 0 2px 10px rgba(0, 146, 146, 0.25) !important; } #footer-cta-trust a[data-i18n="footer.cta_services_btn"]{ background: #FFFFFF !important; color: var(--brand-navy) !important; padding: 14px 28px !important; font-weight: 600 !important; font-size: 16px !important; border-radius: 12px !important; border: 1px solid #D7E9EC !important; transition: 0.25s ease !important; text-decoration: none !important; } #footer-cta-trust a[data-i18n="footer.cta_services_btn"]:hover{ background: #F7FAFA !important; border-color: #C7DEE0 !important; } #footer-cta-trust a[data-i18n="footer.cta_services_btn"]:active{ background: #EEF5F5 !important; } /* Premium look: subtle corner radius & shadow on container */ #footer-cta-trust{ border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.04) inset; } /* Ensure footer link color rule doesn't override button text colors */ #footer-cta-trust a.btn-primary{ color:#FFFFFF !important; } #footer-cta-trust a.btn-secondary{ color: var(--brand-navy) !important; } /* === CTA variants & accessibility tweaks === */ /* Motion sensitivity: reduce transforms and transitions if user prefers reduced motion */ @media (prefers-reduced-motion: reduce){ .btn-primary, .btn-secondary{ transition: none; } .btn-primary:hover, .btn-primary:active, .btn-secondary:hover, .btn-secondary:active{ transform: none; box-shadow: none; } } /* Softer gradient option */ .btn-primary--soft{ background: linear-gradient(135deg, #00A3A3 0%, #2BC9C9 100%); } /* Solid color option (no gradient) */ .btn-primary--solid{ background: #009292; } /* Ensure sufficient tap target on very small screens */ @media (max-width:480px){ #footer-cta-trust a[data-i18n="footer.cta_contact_btn"], #footer-cta-trust a[data-i18n="footer.cta_services_btn"]{ padding: 14px 22px !important; /* keep 44px+ height while saving horizontal space */ font-size: 15px !important; } } /* === Minimalist monochrome icons & soft separators (scoped additions) === */ /* Card separator as hairline */ hr.card-sep{ border:none; height:1px; background: linear-gradient(90deg, rgba(13,37,56,.06), rgba(13,37,56,.10), rgba(13,37,56,.06)); border-radius:1px; margin:14px 0 12px; } /* Services: recommended list rhythm */ .rec-list ul{ margin:.5rem 0 0; padding-left:1.15rem } .rec-list li{ line-height:1.78; margin:.35rem 0 } .rec-list li+li{ border-top:1px solid rgba(13,37,56,.08); padding-top:.35rem } /* Flow cards: copy readability */ .flow-steps .card p{ line-height:1.78 } /* Portfolio mini-kicker labels → thin monochrome line icons */ .mini-kicker{ position:relative; padding-left:26px; color:#0D2538 } .mini-kicker::before{ content:""; position:absolute; left:0; top:.1rem; width:18px; height:18px; background-repeat:no-repeat; background-size:contain; opacity:.95; } .mini-kicker--problem::before{ background-image:url('data:image/svg+xml;utf8,'); } .mini-kicker--approach::before{ background-image:url('data:image/svg+xml;utf8,'); } .mini-kicker--result::before{ background-image:url('data:image/svg+xml;utf8,'); } .mini-row .mini-kicker--problem::before{ background-image: none; } .mini-row .mini-kicker--result::before{ background-image: none; } .mini-row .mini-kicker--approach::before{ background-image: none; } /* Soft section separators between adjacent soft sections */ .section.soft + .section.soft{ border-top:1px solid rgba(13,37,56,.08); padding-top:28px; margin-top:28px; } /* Soft-JP lists: gentle dividers between items */ .soft-jp__list li+li{ border-top:1px solid rgba(13,37,56,.08); padding-top:.35rem } /* Related service cards: minimal arrow color */ .service-card .arrow{ color:#0AA5A5; opacity:.9 } /* Generic dense list helper */ ul.dense li+li{ border-top:1px solid rgba(13,37,56,.08); padding-top:.35rem } /* Neutralize any saturated green icons inside soft areas */ .soft [class*="icon-"]{ color:#0AA5A5 } /* Remove heavy icon backgrounds/shadows if any remained */ [class*="icon-"]{ box-shadow:none !important; background-image:none } /* Premium upgrade: Soft-JP Deluxe variant */ .soft-jp--deluxe{ position:relative; overflow:hidden; padding:42px 38px; border-radius:20px; border:1px solid #DDE8EF; background: radial-gradient(1200px 600px at 120% 20%, rgba(0,179,179,.06), transparent 55%), linear-gradient(180deg,#FFFFFF 0%, #F7FAFC 100%); box-shadow: 0 12px 30px rgba(13,37,56,.08), inset 0 1px 0 rgba(255,255,255,.8); } @media (max-width:640px){ .soft-jp--deluxe{ padding:26px 20px; border-radius:16px } } .soft-jp--deluxe .soft-jp__bg{ position:absolute; inset:-10% -6% -12% -6%; background: radial-gradient(400px 240px at 10% 0%, rgba(0,179,179,.08), transparent 60%), radial-gradient(360px 220px at 90% 100%, rgba(36,60,86,.06), transparent 55%), conic-gradient(from 180deg at 60% 40%, rgba(0,0,0,0) 0 70%, rgba(0,179,179,.04) 0 85%, rgba(0,0,0,0) 0 100%); filter: blur(10px); pointer-events:none; z-index:0; } .soft-jp--deluxe::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); pointer-events:none; } /* Asymmetric grid on desktop */ .soft-jp--deluxe .soft-jp__grid{ position:relative; z-index:1; grid-template-columns: 1.2fr .9fr .9fr; } @media (max-width:1100px){ .soft-jp--deluxe .soft-jp__grid{ grid-template-columns: repeat(3,1fr);} } @media (max-width:900px){ .soft-jp--deluxe .soft-jp__grid{ grid-template-columns:1fr; } } .soft-jp--deluxe .soft-jp__card:first-child{ grid-column: span 2; } @media (max-width:900px){ .soft-jp--deluxe .soft-jp__card:first-child{ grid-column:auto; } } /* Card premium hover + highlight */ .soft-jp__card{ position:relative; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .soft-jp__card:hover{ transform: translateY(-4px); box-shadow:0 12px 28px rgba(13,37,56,.12); border-color:#D6E3EA; } .soft-jp__card::after{ content:""; position:absolute; inset:0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)); opacity:0; transition:opacity .25s ease; pointer-events:none; } .soft-jp__card:hover::after{ opacity:.7; } /* Kicker underline interaction */ .soft-jp__kicker{ background: linear-gradient(to right, rgba(0,146,146,.35), rgba(0,146,146,0)) no-repeat 0 100% / 0 2px; transition: background-size .35s ease; } .soft-jp__card:hover .soft-jp__kicker, .soft-jp__card:focus-within .soft-jp__kicker{ background-size: 100% 2px; } /* Focus and a11y enhancements */ .soft-jp__card:focus-within{ outline: 2px solid rgba(0,179,179,.35); outline-offset: 2px; } .soft-jp__actions .btn:focus-visible{ outline:3px solid rgba(0,179,179,.35); outline-offset:2px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .soft-jp__card, .btn-primary, .soft-jp__kicker{ transition:none; } .soft-jp__card:hover{ transform:none; } } /* ================================ Assurance / Soft-JP Section ================================ */ /* ========= Assurance / Soft JP (Deluxe) ========= */ #assurance { position: relative; padding-block: clamp(4rem, 6vw, 5.5rem); } /* ルートブロック */ .soft-jp { position: relative; font-family: "Inter", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; color: #0f172a; } .soft-jp--deluxe { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(2.4rem, 4vw, 3rem) clamp(2rem, 3.5vw, 3rem); background: radial-gradient(circle at top left, rgba(45, 212, 191, 0.08), transparent 55%), radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.08), transparent 55%), #ffffff; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(148, 163, 184, 0.18); } /* 背景レイヤー */ .soft-jp__bg { position: absolute; inset: -40%; pointer-events: none; background: radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.16), transparent 55%), radial-gradient(circle at 90% 100%, rgba(56, 189, 248, 0.12), transparent 55%); opacity: 0.7; filter: blur(2px); z-index: 0; } .soft-jp__head, .soft-jp__grid, .soft-jp__actions { position: relative; z-index: 1; } /* 見出しとリード文 */ .soft-jp__head { max-width: 720px; margin-inline: auto; margin-bottom: clamp(2rem, 3vw, 2.5rem); text-align: left; } .soft-jp__title { font-size: clamp(1.6rem, 2.2vw, 1.9rem); font-weight: 800; letter-spacing: 0.04em; line-height: 1.4; margin-bottom: 0.75rem; } .soft-jp__lead { font-size: 0.96rem; line-height: 1.9; color: #4b5563; } /* カードのグリッド */ .soft-jp__grid { display: grid; gap: clamp(1.4rem, 2vw, 1.8rem); margin-bottom: clamp(2rem, 3vw, 2.5rem); } @media (min-width: 900px) { .soft-jp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* カード */ .soft-jp__card { position: relative; border-radius: 20px; padding: 1.5rem 1.6rem; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(148, 163, 184, 0.35); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out, background 180ms ease-out; } .soft-jp__card:hover { transform: translateY(-2px); border-color: rgba(45, 212, 191, 0.6); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(190, 242, 255, 0.65); background: rgba(255, 255, 255, 0.98); } /* サブ見出し（キッカー） */ .soft-jp__kicker { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 0.8rem; color: #0f172a; display: flex; align-items: center; gap: 0.4rem; } .soft-jp__kicker::before { content: ""; display: inline-block; width: 3px; height: 1.4em; border-radius: 999px; background: linear-gradient(180deg, #22c55e, #0ea5e9); } /* 本文テキスト */ .soft-jp__text { font-size: 0.93rem; line-height: 1.9; color: #4b5563; margin-bottom: 0.9rem; } .soft-jp__aside, .soft-jp__note { font-size: 0.82rem; line-height: 1.8; color: #6b7280; margin-top: 0.75rem; } /* リスト */ .soft-jp__list { list-style: none; margin: 0; padding: 0; } .soft-jp__list li { position: relative; padding-left: 1.2rem; font-size: 0.9rem; line-height: 1.85; color: #374151; } .soft-jp__list li::before { content: "・"; position: absolute; left: 0.15rem; top: 0; color: #10b981; } /* アイコン付きリスト */ .soft-jp__list--icons li { padding-left: 1.7rem; } .soft-jp__list--icons li::before { content: ""; } /* チェックアイコン */ .icon-check { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; margin-right: 0.4rem; border-radius: 999px; background: linear-gradient(135deg, #22c55e, #14b8a6); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); flex-shrink: 0; } .icon-check::before { content: "✓"; font-size: 0.7rem; color: #ffffff; transform: translateY(-0.5px); } /* Micro labels */ .soft-jp__micro { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; } .micro { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.78rem; line-height: 1.5; color: #0f172a; background: rgba(226, 232, 240, 0.6); border: 1px solid rgba(148, 163, 184, 0.6); backdrop-filter: blur(6px); } /* ボタン */ .soft-jp__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-start; } .soft-jp__actions .btn { min-width: 190px; justify-content: center; } .soft-jp__actions .btn-primary { border-radius: 999px; padding-inline: 1.5rem; font-weight: 600; box-shadow: 0 14px 35px rgba(5, 150, 105, 0.35); } .soft-jp__actions .btn-ghost { border-radius: 999px; border-width: 1px; border-style: solid; } /* 小画面向け調整 */ @media (max-width: 767px) { .soft-jp--deluxe { padding: 1.8rem 1.4rem 2.1rem; border-radius: 20px; } .soft-jp__head { text-align: left; } .soft-jp__actions { flex-direction: column; align-items: stretch; } .soft-jp__actions .btn { width: 100%; } } /* Assurance layout fix on homepage: desktop uses explicit 3-column composition, mobile unchanged */ @media (min-width: 901px) { #assurance .soft-jp--deluxe .soft-jp__head { max-width: min(920px, 100%); margin-inline: 0; } #assurance .soft-jp--deluxe .soft-jp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.4vw, 1.4rem); align-items: start; } #assurance .soft-jp--deluxe .soft-jp__card { padding: clamp(1.2rem, 1.6vw, 1.4rem) clamp(1.2rem, 1.7vw, 1.5rem); } #assurance .soft-jp--deluxe .soft-jp__card:first-child { grid-column: auto; grid-row: auto; } #assurance .soft-jp--deluxe .soft-jp__card:nth-child(2) { grid-column: auto; grid-row: auto; } #assurance .soft-jp--deluxe .soft-jp__card:nth-child(3) { grid-column: auto; grid-row: auto; } #assurance .soft-jp--deluxe .soft-jp__actions { margin-top: clamp(1.25rem, 2.2vw, 1.8rem); } } @media (min-width: 901px) and (max-width: 1280px) { #assurance .soft-jp--deluxe { padding: clamp(1.9rem, 3vw, 2.4rem) clamp(1.6rem, 2.6vw, 2.2rem); } #assurance .soft-jp--deluxe .soft-jp__grid { gap: clamp(.85rem, 1.2vw, 1.15rem); } #assurance .soft-jp--deluxe .soft-jp__card { padding: clamp(1.05rem, 1.4vw, 1.25rem) clamp(1.05rem, 1.5vw, 1.3rem); } #assurance .soft-jp--deluxe .soft-jp__kicker { font-size: .92rem; } } /* --------------------------------------------- Contact page scoped fixes (standalone /contact/) - Remove decorative Soft-section backgrounds that bleed - Normalize paddings and spacing - Keep changes strictly scoped to #contact-page ----------------------------------------------*/ #contact-page.section.soft::before, #contact-page.section.soft::after, #contact-page .section.soft::before, #contact-page .section.soft::after{content:none !important; display:none !important} /* Normalize vertical rhythm on the page wrapper */ #contact-page{padding-top:64px; padding-bottom:64px} @media (max-width:640px){ #contact-page{padding-top:48px; padding-bottom:48px} } /* Elevate the form card and ensure it doesn’t get under any backgrounds */ #contact-page .form--origami{position:relative; z-index:1; background:#fff; border:1px solid #D9E5EC; box-shadow:0 10px 22px rgba(13,37,56,.08), 0 2px 6px rgba(13,37,56,.05)} /* Two-column info → stack on mobile */ #contact-page .grid{grid-template-columns:1fr 1fr; gap:14px} @media (max-width:900px){ #contact-page .grid{grid-template-columns:1fr; gap:12px} } /* FAQ typography tweaks */ #contact-page dl.faq{margin:0} #contact-page dl.faq dt{font-weight:800; margin:.6rem 0 .25rem} #contact-page dl.faq dd{margin:0 0 .7rem; opacity:.95} /* --------------------------------------------- Global table styles (accessible + responsive) - Minimal, theme-aligned styles for all HTML tables - No PHP changes required; applies site-wide ----------------------------------------------*/ .table-responsive{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; box-shadow:var(--shadow-sm); background:transparent} .table-responsive > table{min-width:640px} /* Base table */ .table, table{border-collapse:separate; border-spacing:0; width:100%} .table, table{background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden} /* Header */ table thead th{position:sticky; top:0; z-index:1; background:#F1F5F9; color:var(--brand-navy); font-weight:800; text-align:left} /* Cells */ .table th, .table td, table th, table td{padding:.9rem 1rem; vertical-align:top; border-bottom:1px solid #E6EDF3} .table th:first-child, table th:first-child, .table td:first-child, table td:first-child{border-left:none} .table th:last-child, table th:last-child, .table td:last-child, table td:last-child{border-right:none} /* Row patterns + hover */ .table tbody tr:nth-child(odd), table tbody tr:nth-child(odd){background:#FAFCFE} .table tbody tr:hover, table tbody tr:hover{background:rgba(0,179,179,.06)} /* Caption */ .table caption, table caption{caption-side:top; text-align:left; padding:.6rem 0; font-weight:700; color:rgba(13,37,56,.7)} /* Density presets */ .table--compact th, .table--compact td{padding:.6rem .75rem} .table--spacious th, .table--spacious td{padding:1.1rem 1.25rem} /* Mobile tweaks */ @media (max-width: 640px){ .table-responsive > table{min-width:520px} .table th, .table td, table th, table td{padding:.75rem .75rem} table{border-radius:10px} } /* Print safety: prevent sticky positioning and ensure full width */ @media print{ .table-responsive{overflow:visible} .table-responsive > table{min-width:auto} table thead th{position:static} } /* --------------------------------------------- Homepage refresh: compact trust blocks + lower-friction contact ----------------------------------------------*/ .section--compact{padding:28px 0 40px} @media (max-width:640px){ .section--compact{padding:20px 0 28px} } .hero-micro-reassurance{ margin:.7rem 0 0; font-size:.96rem; line-height:1.6; color:rgba(13,37,56,.68); } .quick-offer-card{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:28px; align-items:center; padding:28px 30px; border:1px solid #DCE8EF; border-radius:22px; background: radial-gradient(600px 180px at 100% 0%, rgba(0,179,179,.08), transparent 60%), linear-gradient(180deg,#FFFFFF 0%,#F7FBFD 100%); box-shadow:0 14px 30px rgba(13,37,56,.08); } .quick-offer-copy .lead{ margin:0; max-width:60ch; font-size:1rem; } .quick-offer-actions{ display:grid; gap:14px; justify-items:start; } .quick-offer-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; } .quick-offer-list li{ position:relative; padding-left:1.35rem; font-weight:600; color:#183248; } .quick-offer-list li::before{ content:""; position:absolute; left:0; top:.48rem; width:8px; height:8px; border-radius:999px; background:linear-gradient(135deg,#243C56,#00B3B3); } .quick-offer-subnote{ margin:0; font-size:.92rem; line-height:1.65; color:rgba(13,37,56,.66); } @media (max-width:900px){ .quick-offer-card{grid-template-columns:1fr; padding:24px 22px} } .pain-routes-grid, .friction-grid, .mini-proof-grid{align-items:stretch} .knowledge-cluster-grid, .services-resource-grid{align-items:stretch} .knowledge-cluster-card, .service-resource-card{ display:flex; flex-direction:column; gap:14px; height:100%; } .knowledge-cluster-card{ background: linear-gradient(180deg, rgba(36,60,86,.035), rgba(36,60,86,0) 28%), #fff; } .knowledge-cluster-lead, .service-resource-lead{ margin:0; color:rgba(13,37,56,.74); } .knowledge-link-list, .service-resource-links{ margin:0; padding-left:1.1rem; display:grid; gap:10px; } .knowledge-link-list a, .service-resource-links a{ color:var(--brand-indigo); font-weight:700; text-decoration:none; } .knowledge-link-list a:hover, .service-resource-links a:hover{ color:var(--brand-turquoise); } .services-resource-hub{ margin-top:38px; padding-top:12px; } .pain-route-card, .friction-card, .mini-proof-card, .contact-next{ display:flex; flex-direction:column; height:100%; } .pain-route-card{ gap:12px; border-color:#DDE7EE; background: linear-gradient(180deg, rgba(0,179,179,.04), rgba(0,179,179,0) 28%), #fff; } .pain-route-card .btn{margin-top:auto; align-self:flex-start} .friction-grid{gap:18px} .friction-card{ gap:10px; padding:20px 22px; } .friction-card h3{ font-size:1.05rem; line-height:1.45; } .friction-card p{ margin:0; color:rgba(13,37,56,.75); } .mini-proof-card{ gap:16px; padding:22px; } .mini-proof-card h3{margin:0} .mini-proof-list{ display:grid; gap:12px; } .mini-proof-item{ padding-top:12px; border-top:1px solid rgba(13,37,56,.08); } .mini-proof-item:first-child{ padding-top:0; border-top:0; } .mini-proof-label{ margin:0 0 4px; font-size:.8rem; font-weight:800; letter-spacing:.04em; color:var(--brand-turquoise); } .mini-proof-item p:last-child{ margin:0; color:rgba(13,37,56,.82); } .section-cta{ margin-top:20px; display:flex; justify-content:center; } .contact-header{ max-width:760px; margin-bottom:18px; } #contact.section.soft::before, #contact.section.soft::after{ content:none; display:none; } .contact-micro-reassurance{ margin:0; font-size:.97rem; line-height:1.7; color:rgba(13,37,56,.7); } .contact-layout{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(300px,360px); gap:18px 24px; align-items:start; } .contact-form-card{ padding:24px 24px 22px; background:linear-gradient(180deg,#F6FAFD 0%,#F1F6FB 100%); } .contact-form-card form{ display:grid; gap:16px; } .contact-input-grid{ display:grid; gap:14px; grid-template-columns:1fr 1fr; } .contact-quick-choices-block{ display:grid; gap:10px; padding-top:2px; position:relative; z-index:2; } .contact-quick-choices-note{ margin:0; font-size:.9rem; line-height:1.6; color:rgba(13,37,56,.68); } .contact-quick-choices{ display:flex; flex-wrap:wrap; gap:10px; position:relative; z-index:2; } .contact-chip{ appearance:none; display:inline-flex; align-items:center; justify-content:center; position:relative; z-index:2; pointer-events:auto; border:1px solid #D5E2EE; background:#fff; color:#173246; border-radius:999px; padding:.55rem .85rem; font:inherit; font-size:.92rem; line-height:1.2; cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; } .contact-chip:hover, .contact-chip:focus-visible{ border-color:var(--brand-turquoise); color:var(--brand-turquoise); box-shadow:0 0 0 3px rgba(0,179,179,.12); outline:none; } .contact-chip.is-applied, .contact-chip[aria-pressed="true"]{ border-color:rgba(0,179,179,.35); background:rgba(0,179,179,.08); color:#0B6060; } .contact-privacy-reassurance{ margin:0; font-size:.86rem; line-height:1.65; color:rgba(13,37,56,.62); } #contact textarea.input, #contact textarea{ min-height:190px; resize:vertical; } .contact-submit-btn{ justify-self:start; width:auto; min-width:260px; margin-top:4px; } .contact-secondary-actions{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin-top:-2px; } .contact-secondary-actions .btn-link{ display:inline-flex; align-items:center; gap:.45rem; font-size:1rem; line-height:1.45; } .contact-reply-note{ margin:0; color:rgba(13,37,56,.7); } .contact-next{ height:auto; align-self:start; gap:16px; padding:22px 24px 20px; background:rgba(255,255,255,.94); } .contact-next:hover{transform:none; box-shadow:var(--shadow-sm)} .contact-next h3{margin:0} .contact-next-list{ list-style:none; margin:0; padding:0; counter-reset:contact-step; display:grid; gap:12px; } .contact-next-list li{ position:relative; padding-left:42px; min-height:32px; color:rgba(13,37,56,.84); } .contact-next-list li::before{ counter-increment:contact-step; content:counter(contact-step); position:absolute; left:0; top:-1px; width:28px; height:28px; border-radius:999px; background:rgba(0,179,179,.12); color:#0B6161; display:flex; align-items:center; justify-content:center; font-weight:800; } .contact-next-note{ margin:0; font-size:.92rem; line-height:1.7; color:rgba(13,37,56,.7); } @media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; gap:16px; } .contact-form-card{ padding:22px 20px 20px; } .contact-next{ padding:20px 20px 18px; } } @media (max-width:640px){ .contact-form-card{padding:20px} .contact-input-grid{grid-template-columns:1fr} .contact-submit-btn{ width:100%; min-width:0; } .contact-secondary-actions{flex-direction:column; align-items:flex-start} .contact-chip{width:100%; justify-content:flex-start} } /* Dark mode adjustments (if user prefers) */ @media (prefers-color-scheme: dark){ .table, table{background:#0E1A26; border-color:#1F3446} table thead th{background:#15283A; color:#E6EDF3} .table th, .table td, table th, table td{border-bottom-color:#1F3446; color:#E6EDF3} .table tbody tr:nth-child(odd), table tbody tr:nth-child(odd){background:#0B1622} .table tbody tr:hover, table tbody tr:hover{background:rgba(0,179,179,.12)} .table caption, table caption{color:#C9D5E1} } /* --------------------------------------------- Fallback styles for JSON-rendered tables without wrapper - Ensures tables inside content
      are styled even if no .table/.table-responsive is present - Keeps scope narrow to avoid affecting admin/editor UIs ----------------------------------------------*/ section table{display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; background:#fff; border:1px solid var(--border); border-radius:12px; border-collapse:separate; border-spacing:0} section table thead th{position:sticky; top:0; z-index:1; background:#F1F5F9; color:var(--brand-navy); font-weight:800; text-align:left} section table th, section table td{padding:.9rem 1rem; vertical-align:top; border-bottom:1px solid #E6EDF3} section table tbody tr:nth-child(odd){background:#FAFCFE} section table tbody tr:hover{background:rgba(0,179,179,.06)} @media (max-width:640px){ section table{min-width:520px} } @media print{ section table thead th{position:static} } @media (prefers-color-scheme: dark){ section table{background:#0E1A26; border-color:#1F3446} section table thead th{background:#15283A; color:#E6EDF3} section table th, section table td{border-bottom-color:#1F3446; color:#E6EDF3} section table tbody tr:nth-child(odd){background:#0B1622} section table tbody tr:hover{background:rgba(0,179,179,.12)} } /* --------------------------------------------- Media pages (/media/*) - Scoped layout for JSON-rendered announcements/news ----------------------------------------------*/ .media-page{ max-width: 980px; margin: 0 auto; } .media-page--hub{ max-width: 1040px; } .media-page > h1{ margin: 0 0 1.25rem; } .media-page .media-grid{ align-items: start; margin-top: 20px; } .media-page .media-card, .media-page .guide-summary{ padding: 24px 28px; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); } .media-page .guide-summary{ background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%); } .media-page .media-card h2, .media-page .guide-summary h2{ margin-top: 0; } .media-page .media-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .media-page .visual-explainer{ margin: 22px 0 28px; } .media-page .visual-explainer figure{ margin: 0; padding: 18px; width: clamp(280px, 78vw, 760px); max-width: 100%; margin-inline: auto; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%); box-shadow: var(--shadow-sm); } .media-page .visual-explainer img{ display: block; width: 100% !important; max-width: 100%; height: auto !important; margin: 0 auto; border-radius: 14px; object-fit: contain; } .media-page .visual-explainer figcaption{ margin-top: 12px; font-size: .95rem; line-height: 1.5; color: #5b7086; text-align: center; } .media-page .faq{ padding: 0; } .media-page .faq h2{ padding: 24px 28px 0; margin-bottom: 0; } .media-page .faq dl{ margin: 0; padding: 0 28px 24px; } .media-page .faq dt:first-of-type{ border-top: 0; } .media-page .faq dt{ border-top: 1px solid var(--border); } .media-page .faq dd{ color: #3b4958; } .media-page .media-cta{ background: linear-gradient(135deg, rgba(36,60,86,.04) 0%, rgba(0,179,179,.08) 100%); } .media-page .media-cta p:last-child{ margin-bottom: 0; } .media-page .card{ height: 100%; } .entry-content img{ max-width: 100%; height: auto; } @media (max-width: 640px){ .media-page .media-card, .media-page .guide-summary{ padding: 18px 18px; border-radius: 14px; } .media-page .visual-explainer figure{ padding: 12px; border-radius: 16px; } .media-page .faq h2{ padding: 18px 18px 0; } .media-page .faq dl{ padding: 0 18px 18px; } } .content-map-page .content-map-summary{ margin-top: 18px; } .content-map-batch-list{ list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .content-map-batch-card{ min-height: 100%; } .content-map-batch-card h3, .content-map-group h2{ margin-bottom: 10px; } .content-map-batch-meta, .content-map-page .lead-small{ color: rgba(12, 31, 51, 0.8); } .content-map-sample-links{ margin: 12px 0 0; padding-left: 18px; } .content-map-group + .content-map-group{ margin-top: 28px; } .content-map-link-columns{ margin: 0; padding-left: 18px; columns: 2 320px; column-gap: 32px; } .content-map-link-columns li{ break-inside: avoid; margin: 0 0 8px; } @media (max-width: 720px){ .content-map-link-columns{ columns: 1; } } .json-related-links{ margin-top: 28px; padding: 22px 24px; border: 1px solid rgba(12, 31, 51, 0.08); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(240,248,250,0.92) 100%); } .json-related-links h2{ margin-bottom: 10px; } .json-related-links p{ color: rgba(12, 31, 51, 0.82); } .json-related-links__list{ margin: 14px 0 0; padding-left: 18px; columns: 2 260px; column-gap: 28px; } .json-related-links__list li{ break-inside: avoid; margin: 0 0 8px; } .json-related-links__hubs{ margin: 16px 0 0; font-size: .95rem; } @media (max-width: 720px){ .json-related-links{ padding: 18px; } .json-related-links__list{ columns: 1; } } .topics-page .card--elevated{ padding: clamp(22px, 3vw, 34px); } .topics-industry-grid, .topics-intent-grid{ align-items: stretch; } .topics-card{ min-height: 100%; } .topics-card h2, .topics-siblings h2, .semantic-related-links h2{ margin-bottom: 10px; } .topics-card-meta, .topics-link-meta, .topics-page .lead-small{ color: rgba(12, 31, 51, 0.78); } .topics-mini-list, .semantic-related-links__list{ margin: 14px 0 0; padding-left: 18px; } .topics-mini-list li, .semantic-related-links__list li{ margin: 0 0 10px; } .topics-link-list{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .topics-link-card{ min-height: 100%; } .topics-link-card a{ display: block; font-weight: 700; color: var(--ink); text-decoration: none; } .topics-link-card a:hover{ color: var(--brand); } .topics-link-meta{ display: block; margin-top: 8px; font-size: .94rem; } .topics-siblings{ margin-top: 28px; padding: 22px 24px; border: 1px solid rgba(12, 31, 51, 0.08); border-radius: 18px; background: rgba(255,255,255,0.82); } .semantic-related-links{ margin-top: 28px; padding: 22px 24px; border: 1px solid rgba(12, 31, 51, 0.08); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(240,248,250,0.92) 100%); } .semantic-related-links__list{ columns: 2 260px; column-gap: 28px; } .semantic-related-links__list li{ break-inside: avoid; } .semantic-related-links__hubs{ margin: 16px 0 0; font-size: .95rem; } @media (max-width: 720px){ .topics-siblings, .semantic-related-links{ padding: 18px; } .topics-link-list{ grid-template-columns: 1fr; } .semantic-related-links__list{ columns: 1; } } /* Sticky bottom CTA (Plan 3.4 — long-page conversion) */ .stm-sticky-cta{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 14px env(safe-area-inset-bottom, 10px); background: rgba(255,255,255,0.96); border-top: 1px solid rgba(12, 31, 51, 0.08); backdrop-filter: saturate(140%) blur(8px); box-shadow: 0 -6px 20px rgba(12, 31, 51, 0.05); transform: translateY(100%); opacity: 0; transition: transform .3s ease, opacity .3s ease; pointer-events: none; } .stm-sticky-cta.is-visible{ transform: translateY(0); opacity: 1; pointer-events: auto; } .stm-sticky-cta.is-dismissed{ display: none; } .stm-sticky-cta__inner{ width: min(1200px, 94%); margin-inline: auto; display: flex; align-items: center; gap: 12px; } .stm-sticky-cta__text{ flex: 1; font-size: .92rem; color: #243C56; min-width: 0; } .stm-sticky-cta__trust{ display: inline-block; font-weight: 600; } .stm-sticky-cta__btn{ padding: .6rem 1.05rem; border-radius: 10px; font-size: .98rem; font-weight: 700; background: linear-gradient(135deg, #243C56 0%, #00B3B3 100%); color: #fff; white-space: nowrap; } .stm-sticky-cta__btn:hover{ filter: brightness(1.08); color: #fff; } .stm-sticky-cta__close{ background: transparent; border: 0; padding: 4px 8px; font-size: 1.4rem; line-height: 1; color: rgba(36, 60, 86, 0.55); cursor: pointer; } .stm-sticky-cta__close:hover{ color: #0D2538; } @media (max-width: 540px){ .stm-sticky-cta__text{ font-size: .85rem; } .stm-sticky-cta__btn{ padding: .55rem .9rem; font-size: .92rem; } } /* Trust-signal line before first CTA (Plan 3.6 — conversion) */ .stm-trust-line{ display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 18px 0 14px; padding: 10px 14px; border: 1px dashed rgba(0, 179, 179, 0.35); border-radius: 12px; background: rgba(0, 179, 179, 0.04); font-size: .94rem; color: #0D2538; } .stm-trust-line__item{ display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .stm-trust-line__item::before{ content: "✓"; color: #00B3B3; font-weight: 700; } /* Related pages navigation (Plan 2.1 — neighbour links) */ .stm-related-pages{ margin: 40px 0 0; padding: 22px 24px; border: 1px solid rgba(12, 31, 51, 0.08); border-radius: 18px; background: rgba(255,255,255,0.92); } .stm-related-pages__heading{ font-weight: 700; font-size: 1.02rem; color: #0D2538; margin-bottom: 12px; } .stm-related-pages__list{ list-style: none; padding: 0; margin: 0; columns: 2 280px; column-gap: 28px; } .stm-related-pages__list li{ break-inside: avoid; margin: 0 0 8px; line-height: 1.6; } .stm-related-pages__list a{ color: #00B3B3; font-weight: 500; } .stm-related-pages__list a:hover{ text-decoration: underline; } .stm-related-pages__hub{ margin: 14px 0 0; font-size: .94rem; color: rgba(36, 60, 86, 0.82); } @media (max-width: 720px){ .stm-related-pages{ padding: 18px; } .stm-related-pages__list{ columns: 1; } } /* Author byline block (E-E-A-T, Plan 2.5) */ .stm-author{ margin: 40px 0 0; padding: 20px 22px; border: 1px solid rgba(12, 31, 51, 0.10); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(241,247,249,0.92) 100%); } .stm-author__heading{ font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(36, 60, 86, 0.75); margin-bottom: 6px; } .stm-author__name{ font-weight: 700; font-size: 1.08rem; color: #0D2538; margin-bottom: 8px; } .stm-author__bio{ margin: 0 0 12px; font-size: .98rem; line-height: 1.7; color: #243C56; } .stm-author__links{ display: flex; gap: 14px; flex-wrap: wrap; } .stm-author__link{ font-weight: 600; font-size: .95rem; color: #00B3B3; } .stm-author__link:hover{ text-decoration: underline; } @media (max-width: 720px){ .stm-author{ padding: 16px 18px; } }