/* ========================================================================= Kaigai Renkei / 海外連携 — shared stylesheet for the multi-page site. Edit design tokens in :root. Bilingual text uses .t-en / .t-ja spans; the EN / 日本語 toggle adds/removes .lang-ja on . ========================================================================= */ :root{ --ink:#14181f; --indigo:#1e2a52; --indigo-2:#34407a; --vermilion:#e0492b; --paper:#f6f7f9; --card:#ffffff; --line:#e3e6ec; --muted:#5a6172; --display:"Schibsted Grotesk","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo","Zen Kaku Gothic New",-apple-system,system-ui,sans-serif; --body:"Newsreader","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo","Zen Kaku Gothic New",Georgia,serif; --mono:"Space Mono","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo","Zen Kaku Gothic New",ui-monospace,monospace; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:19px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .wrap{max-width:1120px;margin:0 auto;padding:0 28px;} a{color:inherit;} a:focus-visible,button:focus-visible{ outline:2.5px solid var(--vermilion); outline-offset:3px; border-radius:2px; } .eyebrow{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--indigo-2); display:inline-block; } .eyebrow .dot{color:var(--vermilion);} /* ---------- Language toggle / i18n ---------- */ .lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px; overflow:hidden;background:var(--card);flex:0 0 auto;} .lang-toggle button{font-family:var(--mono);font-size:.66rem;letter-spacing:.07em; text-transform:uppercase;border:0;background:transparent;color:var(--muted); padding:7px 12px;cursor:pointer;line-height:1;} .lang-toggle button.active{background:var(--indigo);color:#fff;} .lang-toggle button:not(.active):hover{color:var(--ink);} .t-ja{display:none;} .lang-ja .t-en{display:none;} .lang-ja .t-ja{display:inline;} /* ---------- Header + primary nav ---------- */ .site-head{ border-bottom:1px solid var(--line); position:sticky;top:0;z-index:20; background:rgba(246,247,249,.82); backdrop-filter:saturate(140%) blur(8px); } .site-head .row{ display:flex;align-items:center;justify-content:space-between; gap:14px 22px;padding:16px 0;flex-wrap:wrap; } .brand{display:flex;align-items:baseline;gap:.55rem;text-decoration:none;flex:0 0 auto;} .brand .kanji{font-family:var(--display);font-weight:700; font-size:1.18rem;letter-spacing:.02em;color:var(--ink);} .brand .roman{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em; text-transform:uppercase;color:var(--muted);} .brand .mark{width:7px;height:7px;border-radius:50%; background:var(--vermilion);display:inline-block;align-self:center;} .nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap;} .nav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em; text-transform:uppercase;text-decoration:none;color:var(--muted); padding-bottom:3px;border-bottom:1.5px solid transparent;white-space:nowrap; transition:color .2s ease,border-color .2s ease;} .nav a:hover{color:var(--ink);} .nav a.active{color:var(--ink);border-color:var(--vermilion);} /* ---------- Hero ---------- */ .hero{padding:96px 0 64px;} .hero h1{ font-family:var(--display);font-weight:700; font-size:clamp(2.5rem,6.4vw,4.6rem);line-height:1.02; letter-spacing:-.02em;margin:.55em 0 .42em;max-width:16ch;color:var(--ink); } .hero h1 .ind{color:var(--indigo);} .lede{ font-family:var(--body);font-size:clamp(1.12rem,2.1vw,1.42rem); line-height:1.5;color:var(--muted);max-width:50ch;margin:0; } /* ---------- Interior page header ---------- */ .phead{padding:74px 0 8px;} .phead h1{font-family:var(--display);font-weight:700; font-size:clamp(2.05rem,4.6vw,3.25rem);line-height:1.05;letter-spacing:-.02em; margin:.5rem 0 .35rem;color:var(--ink);max-width:20ch;} .phead h1 .ind{color:var(--indigo);} .phead .lede{margin:0;} /* ---------- Buttons ---------- */ .btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;} .btn{display:inline-block;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em; text-transform:uppercase;text-decoration:none;color:var(--indigo); border:1.5px solid var(--line);background:var(--card);padding:13px 20px;border-radius:8px; transition:border-color .2s ease,transform .2s ease,color .2s ease,background .2s ease;} .btn:hover{border-color:var(--vermilion);transform:translateY(-1px);} .btn.solid{background:var(--vermilion);color:#fff;border-color:var(--vermilion);} .btn.solid:hover{background:#cf3f23;} /* ---------- Signature: the link (Home hero) ---------- */ .linkblock{margin:62px 0 6px;} .link-svg{display:block;width:100%;height:auto;overflow:visible;} .link-path{fill:none;stroke:var(--vermilion);stroke-width:2.2;stroke-linecap:round;} .node{fill:var(--indigo);} .node-ring{fill:none;stroke:var(--indigo);stroke-width:1.4;opacity:.35;} .link-labels{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--mono); font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);} .link-labels b{color:var(--vermilion);font-weight:700;} .link-labels .jp{font-family:var(--body);font-size:.95rem;letter-spacing:.04em; text-transform:none;color:var(--muted);} /* ---------- About ---------- */ .about{padding:84px 0;border-top:1px solid var(--line);} .about-grid{display:grid;grid-template-columns:0.85fr 1.3fr;gap:48px;align-items:start;} .about h2{font-family:var(--display);font-weight:600; font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.12; letter-spacing:-.015em;margin:.5rem 0 0;color:var(--indigo);max-width:16ch;} .about p{margin:0 0 1.1rem;font-size:1.18rem;} .about p:last-child{margin-bottom:0;} /* ---------- Focus areas ---------- */ .focus{padding:56px 0 90px;} .focus-head{margin-bottom:42px;} .focus-head h2{font-family:var(--display);font-weight:600; font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.015em;margin:.5rem 0 0;color:var(--ink);} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;} .card{background:var(--card);padding:32px 28px 36px;display:flex;flex-direction:column;gap:14px;} .card .num{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--vermilion);} .card h3{font-family:var(--display);font-weight:600;font-size:1.24rem;margin:0;letter-spacing:-.01em;} .card p{margin:0;font-size:1.04rem;line-height:1.55;color:#3a4150;} a.card{text-decoration:none;color:inherit;transition:background .2s ease;} a.card:hover{background:#fbfcfe;} .card .more{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; color:var(--vermilion);margin-top:6px;} /* ---------- Experience marquee ---------- */ .exp{padding:62px 0;border-top:1px solid var(--line);} .exp-head{margin-bottom:30px;} .exp-head h2{font-family:var(--display);font-weight:600; font-size:clamp(1.55rem,2.7vw,2.05rem);letter-spacing:-.015em;margin:.5rem 0 0;color:var(--ink);} .marquee{position:relative;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);} .marquee + .marquee{margin-top:14px;} .mq-track{display:flex;width:max-content;gap:14px;will-change:transform; animation:mqLeft 48s linear infinite;} .mq-track.rev{animation:mqRight 54s linear infinite;} .marquee:hover .mq-track{animation-play-state:paused;} .chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px; background:var(--card);border:1px solid var(--line);border-radius:999px; padding:11px 19px;font-family:var(--display);font-weight:500;font-size:.95rem; color:var(--indigo);white-space:nowrap;} .chip::before{content:"";width:6px;height:6px;border-radius:50%; background:var(--vermilion);flex:0 0 auto;} @keyframes mqLeft{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}} @keyframes mqRight{from{transform:translateX(calc(-50% - 7px))}to{transform:translateX(0)}} /* ---------- How it works (steps) ---------- */ .steps{padding:64px 0 84px;} .steps-head{margin-bottom:46px;} .steps-head h2{font-family:var(--display);font-weight:600; font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.015em; margin:.5rem 0 .4rem;color:var(--indigo);max-width:20ch;} .steps-head p{margin:0;color:var(--muted);font-size:1.12rem;max-width:52ch;} .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;} .step{background:var(--card);border:1px solid var(--line);border-radius:12px; padding:26px 22px 28px;display:flex;flex-direction:column;gap:13px;position:relative;} .step .art{height:92px;display:flex;align-items:center;justify-content:flex-start;} .step .art svg{height:82px;width:auto;overflow:visible;} .step .snum{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em; text-transform:uppercase;color:var(--vermilion);} .step h3{font-family:var(--display);font-weight:600;font-size:1.14rem;margin:0; letter-spacing:-.01em;line-height:1.22;} .step p{margin:0;font-size:1rem;line-height:1.5;color:#3a4150;} .step p .hl{color:var(--vermilion);font-weight:600;font-family:var(--display);font-size:.97rem;} .flow .step:not(:last-child)::after{ content:"→";position:absolute;top:62px;right:-12px;z-index:2; font-family:var(--display);color:var(--vermilion);font-size:1.05rem;line-height:1;} /* ---------- Featured cases ---------- */ .cases{padding:64px 0 84px;} .cases-head{margin-bottom:40px;} .cases-head h2{font-family:var(--display);font-weight:600; font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.015em; margin:.5rem 0 .4rem;color:var(--indigo);max-width:26ch;} .cases-head p{margin:0;color:var(--muted);font-size:1.12rem;max-width:58ch;} .case{background:var(--card);border:1px solid var(--line);border-radius:16px; overflow:hidden;display:grid;grid-template-columns:0.92fr 1.08fr;} .case + .case{margin-top:20px;} .case-illus{background:linear-gradient(155deg,#eef1f8,#e4e8f4); border-right:1px solid var(--line);padding:30px; display:flex;align-items:center;justify-content:center;} .case-illus svg{width:100%;height:auto;max-height:252px;overflow:visible;} .case-body{padding:32px 32px 30px;display:flex;flex-direction:column;gap:13px;} .case .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em; text-transform:uppercase;color:var(--vermilion);} .case h3{font-family:var(--display);font-weight:600;font-size:1.32rem; line-height:1.22;letter-spacing:-.01em;margin:0;color:var(--ink);} .case .lead{margin:0;font-size:1rem;line-height:1.55;color:#3a4150;} .pains{display:flex;flex-wrap:wrap;gap:8px;margin:3px 0 2px;} .pain{display:inline-flex;align-items:center;gap:7px; border:1px solid var(--line);background:var(--paper);border-radius:999px; padding:7px 12px 7px 10px;font-family:var(--display);font-weight:500; font-size:.82rem;color:var(--indigo);line-height:1.1;} .pain svg{width:17px;height:17px;flex:0 0 auto;overflow:visible;display:block;} .case-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px;} .case .lbl{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px;} .case-cols p{margin:0;font-size:.96rem;line-height:1.5;color:#3a4150;} .case .detail{border-top:1px solid var(--line);padding-top:14px;} .case .detail p{margin:0;font-size:.97rem;line-height:1.62;color:#3a4150;} .case .metric{font-family:var(--display);font-weight:500;color:var(--indigo); font-size:.95rem;line-height:1.4;border-top:1px solid var(--line); padding-top:14px;margin:10px 0 0;} /* ---------- Success-fee strip (Home) ---------- */ .usp{padding:62px 0;border-top:1px solid var(--line);} .usp .inner{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;} .usp h2{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.7vw,1.95rem); letter-spacing:-.015em;margin:.4rem 0 0;color:var(--indigo);max-width:22ch;} .usp p{margin:.5rem 0 0;color:var(--muted);max-width:46ch;} .usp .hl{color:var(--vermilion);} /* ---------- Stance / commitment block ---------- */ .stance{margin-top:42px;border:1px solid var(--line);border-left:3px solid var(--vermilion); border-radius:12px;background:var(--card);padding:26px 30px;max-width:760px;} .stance .eyebrow{margin-bottom:10px;} .stance p{margin:0;font-size:1.06rem;line-height:1.62;color:#3a4150;} /* ---------- Company profile (会社概要) ---------- */ .company{padding:64px 0 84px;} .company-head{margin-bottom:34px;} .company-head h2{font-family:var(--display);font-weight:600; font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.015em;margin:.5rem 0 0;color:var(--ink);} .ctable{width:100%;border-collapse:collapse;max-width:780px;} .ctable th,.ctable td{text-align:left;vertical-align:top;padding:15px 0;border-bottom:1px solid var(--line);} .ctable th{font-family:var(--display);font-weight:500;font-size:.95rem; color:var(--muted);width:30%;padding-right:24px;} .ctable td{font-size:1.04rem;color:var(--ink);line-height:1.5;} /* ---------- Contact ---------- */ .contact{background:var(--indigo);color:#eef0f7;padding:96px 0;} .contact .eyebrow{color:#a9b3da;} .contact h2,.contact h1{font-family:var(--display);font-weight:600; font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.06;letter-spacing:-.02em; margin:.5rem 0 .5rem;color:#fff;max-width:20ch;} .contact p{font-size:1.18rem;color:#c5cbe4;max-width:48ch;margin:0 0 32px;} .mailbtn{display:inline-block;font-family:var(--mono);font-size:.92rem;letter-spacing:.04em; text-decoration:none;color:#fff;background:var(--vermilion);padding:16px 26px;border-radius:8px; transition:transform .2s ease,background .2s ease;} .mailbtn:hover{background:#cf3f23;transform:translateY(-2px);} .contact .meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:#8f99c6;margin-top:34px;} /* ---------- Footer ---------- */ footer{padding:40px 0;border-top:1px solid var(--line);} footer .row{display:flex;justify-content:space-between;align-items:center;gap:14px 26px;flex-wrap:wrap;} footer .fbrand{font-family:var(--display);font-weight:700;font-size:1rem;} footer .fmeta{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);} .fnav{display:flex;flex-wrap:wrap;gap:16px;} .fnav a{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; text-decoration:none;color:var(--muted);} .fnav a:hover{color:var(--ink);} /* ---------- Reveal animation ---------- */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease;} .reveal.in{opacity:1;transform:none;} /* ---------- Responsive ---------- */ @media (max-width:900px){ .flow{grid-template-columns:1fr 1fr;} .flow .step::after{display:none;} } @media (max-width:860px){ .nav{order:3;flex-basis:100%;margin-top:4px;gap:16px;} .case{grid-template-columns:1fr;} .case-illus{border-right:0;border-bottom:1px solid var(--line);padding:26px;} .case-illus svg{max-height:200px;} } @media (max-width:760px){ body{font-size:18px;} .hero{padding:70px 0 48px;} .about-grid{grid-template-columns:1fr;gap:22px;} .about h2{max-width:none;} .cards{grid-template-columns:1fr;} .brand .roman{display:none;} .contact{padding:74px 0;} .ctable th{width:40%;} } @media (max-width:560px){ .flow{grid-template-columns:1fr;} .exp{padding:50px 0;} .steps{padding:52px 0 64px;} } @media (max-width:540px){ .case-cols{grid-template-columns:1fr;gap:14px;} } @media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto;} .reveal{opacity:1;transform:none;transition:none;} .link-path{stroke-dashoffset:0 !important;transition:none !important;} .mailbtn:hover,.btn:hover{transform:none;} .mq-track{animation:none;} .marquee{overflow-x:auto;} } /* ---------- Accessibility tweaks (audit Tier 1) ---------- */ .card .num,.case .tag,.step .snum,.card .more{color:#c0371b;} .nav a{padding-top:8px;padding-bottom:8px;} .lang-toggle button{padding:11px 14px;} .btn{padding-top:15px;padding-bottom:15px;}