[data-business-list][data-pattern] .business-item__title, [data-business-list][data-pattern] .business-item__text { position:relative; } /* ============ PATTERN 1: Gradient underline grow ============ */ [data-business-list][data-pattern="1"] .business-item__title::after { content:""; position:absolute; left:0; bottom:-6px; height:4px; width:0; background:linear-gradient(90deg,#0A84FF,#64D2FF); border-radius:4px; animation:bizLineGrow .9s .15s cubic-bezier(.68,-0.55,.27,1.55) forwards; } @keyframes bizLineGrow { to { width:140px; } } /* ============ PATTERN 2: Left bar slide ============ */ [data-business-list][data-pattern="2"] .business-item { border-left:6px solid transparent; } [data-business-list][data-pattern="2"] .business-item__title::before { content:""; position:absolute; left:-18px; top:0; width:6px; height:0; background:linear-gradient(#0A84FF,#64D2FF); border-radius:3px; animation:bizBarDown .8s .1s cubic-bezier(.19,1,.22,1) forwards; } @keyframes bizBarDown { to { height:100%; } } /* ============ PATTERN 3: Glass pill behind title & left border text ============ */ [data-business-list][data-pattern="3"] .business-item__title { padding:10px 20px 12px; backdrop-filter:blur(8px) saturate(160%); -webkit-backdrop-filter:blur(8px) saturate(160%); background:linear-gradient(90deg,rgba(255,255,255,.65),rgba(255,255,255,.35)); border-radius:40px; overflow:hidden; } [data-business-list][data-pattern="3"] .business-item__title::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 30%,rgba(10,132,255,.35),transparent 70%); mix-blend-mode:overlay; opacity:0; animation:bizFadeIn .9s .2s forwards; } [data-business-list][data-pattern="3"] .business-item__text { border-left:4px solid #0A84FF; padding-left:18px; } @keyframes bizFadeIn { to { opacity:1; } } /* ============ PATTERN 4: Large outline number background ============ */ [data-business-list][data-pattern="4"] .business-item { padding-top:34px; } [data-business-list][data-pattern="4"] .business-item__title::before { content:counter(biz, decimal-leading-zero); position:absolute; top:-34px; left:-14px; font-size:120px; font-weight:700; line-height:1; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px rgba(10,132,255,.25); opacity:0; transform:translateY(10px); animation:bizNumFloat .9s .15s cubic-bezier(.68,-0.55,.27,1.55) forwards; pointer-events:none; } @keyframes bizNumFloat { to { opacity:1; transform:translateY(0); } } /* ============ PATTERN 5: Title split bar & bullet squares for sentences ============ */ [data-business-list][data-pattern="5"] .business-item__title { padding-left:18px; } [data-business-list][data-pattern="5"] .business-item__title::before { content:""; position:absolute; left:0; top:6px; width:6px; height:0; background:#0A84FF; border-radius:3px; animation:bizBarDown .7s .12s cubic-bezier(.4,0,.2,1) forwards; } [data-business-list][data-pattern="5"] .business-item__text { position:relative; } [data-business-list][data-pattern="5"] .business-item__text::before { content:""; position:absolute; left:-14px; top:8px; width:8px; height:8px; background:linear-gradient(135deg,#0A84FF,#64D2FF); border-radius:2px; box-shadow:0 0 0 4px rgba(10,132,255,.15); animation:bizPulse 1.6s .3s infinite alternate; } @keyframes bizPulse { to { transform:scale(1.25); box-shadow:0 0 0 1px rgba(10,132,255,.4); } } /* ============ PATTERN 6: Timeline line & dot ============ */ [data-business-list][data-pattern="6"] .business-item { padding-left:54px; } [data-business-list][data-pattern="6"] .business-item::after { content:""; position:absolute; left:18px; top:0; bottom:0; width:3px; background:linear-gradient(#0A84FF,#64D2FF); opacity:.15; border-radius:3px; } [data-business-list][data-pattern="6"] .business-item__title::before { content:""; position:absolute; left:-36px; top:4px; width:18px; height:18px; border:3px solid #0A84FF; background:#fff; border-radius:50%; box-shadow:0 0 0 4px rgba(10,132,255,.15),0 4px 16px -6px rgba(0,0,0,.4); animation:bizDotIn .8s .1s cubic-bezier(.68,-0.55,.27,1.55) forwards; opacity:0; transform:scale(.4); } @keyframes bizDotIn { to { opacity:1; transform:scale(1); } } /* ============ PATTERN 7: Dark card already – add corner accents ============ */ [data-business-list][data-pattern="7"] .business-item__title { position:relative; padding-bottom:10px; } [data-business-list][data-pattern="7"] .business-item__title::after { content:""; position:absolute; left:0; bottom:0; width:0; height:3px; background:linear-gradient(90deg,#0A84FF,#64D2FF); animation:bizLineGrow 1s .2s cubic-bezier(.68,-0.55,.27,1.55) forwards; } [data-business-list][data-pattern="7"] .business-item__title::before { content:""; position:absolute; right:-8px; top:-8px; width:22px; height:22px; background:conic-gradient(from 90deg,#0A84FF,#64D2FF,#0A84FF); filter:blur(.5px); opacity:.65; border-radius:4px; transform:rotate(45deg) scale(.6); animation:bizCornerPop .9s .3s cubic-bezier(.68,-0.55,.27,1.55) forwards; } @keyframes bizCornerPop { to { transform:rotate(45deg) scale(1); opacity:.9; } } /* ============ PATTERN 8: Angled bar background ============ */ [data-business-list][data-pattern="8"] .business-item__title { padding:14px 22px 16px 28px; color:#fff; } [data-business-list][data-pattern="8"] .business-item__title::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,#0A84FF,#64D2FF); transform:skewX(-18deg) scaleX(.2); transform-origin:left center; border-radius:12px; animation:bizSkewReveal .85s .1s cubic-bezier(.68,-0.55,.27,1.55) forwards; z-index:-1; } @keyframes bizSkewReveal { to { transform:skewX(-18deg) scaleX(1); } } [data-business-list][data-pattern="8"] .business-item__text { padding-left:4px; } /* ============ PATTERN 9: Gradient moving text & dotted underline ============ */ [data-business-list][data-pattern="9"] .business-item__title { background:linear-gradient(90deg,#0A84FF,#64D2FF,#0A84FF); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:bizGradientMove 6s linear infinite; } @keyframes bizGradientMove { to { background-position:200% 0; } } [data-business-list][data-pattern="9"] .business-item__title::after { content:""; position:absolute; left:0; bottom:-8px; height:3px; width:100%; background:repeating-linear-gradient(90deg,#0A84FF 0 14px, transparent 14px 20px); opacity:.35; } [data-business-list][data-pattern="9"] .business-item__text { background:linear-gradient(180deg,rgba(10,132,255,.07),transparent 70%); padding:12px 16px 14px; border-radius:10px; } /* ============ PATTERN 10: Orbiting dots + shimmer bar under title ============ */ [data-business-list][data-pattern="10"] .business-item__title { padding-left:4px; } [data-business-list][data-pattern="10"] .business-item__title::before { content:""; position:absolute; left:-10px; top:50%; width:54px; height:54px; border:2px dashed rgba(10,132,255,.55); border-radius:50%; transform:translateY(-50%) rotate(0deg); animation:bizOrbit 14s linear infinite; } [data-business-list][data-pattern="10"] .business-item__title::after { content:""; position:absolute; left:0; bottom:-10px; height:6px; width:0; background:linear-gradient(90deg,#0A84FF,#64D2FF,#0A84FF); background-size:200% 100%; border-radius:4px; animation:bizShimmer 2.4s .25s cubic-bezier(.68,-0.55,.27,1.55) forwards, bizGradientMove 5s 1.2s linear infinite; } @keyframes bizOrbit { to { transform:translateY(-50%) rotate(360deg); } } @keyframes bizShimmer { to { width:170px; } } [data-business-list][data-pattern="10"] .business-item__text { position:relative; } [data-business-list][data-pattern="10"] .business-item__text::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 40%, rgba(255,255,255,0) 80%); mix-blend-mode:overlay; animation:bizSheen 3.4s 1.2s infinite; pointer-events:none; } @keyframes bizSheen { 0% { transform:translateX(-120%) skewX(-20deg); } 55% { transform:translateX(160%) skewX(-20deg);} 100% { transform:translateX(160%) skewX(-20deg);} } /* Resets / overrides for conflicts */ [data-business-list][data-pattern="8"] .business-item::after { opacity:.4; } [data-business-list][data-pattern="10"] .business-item::after { opacity:.5; } [data-business-list][data-pattern="8"] .business-item::after { opacity:.4; } [data-business-list][data-pattern="10"] .business-item::after { opacity:.5; } /* === 必要最小限に整理したCSS === */ /* グローバルオーバーフロー防止 */ html,body { overflow-x:hidden; } /* ファーストビュー全体 */ .fv { height:100vh; width:100%; position:relative; } .fv--img { width:100%; height:100%; position:absolute; inset:0; overflow:hidden; } .fv-zoom-wrap { position:absolute; inset:0; animation:fvZoom 16s linear infinite; } @keyframes fvZoom { 0%{transform:scale(1);} 100%{transform:scale(1.15);} } /* 画像上のオーバーレイ層（ドット / スラッシュ） */ .fv--dotlayer { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:1; transition:opacity .4s; background:radial-gradient(rgba(255,255,255,0.33) 2px,transparent 2px),radial-gradient(rgba(255,255,255,0.33) 2px,transparent 2px); background-size:18px 18px; background-position:0 0,9px 9px; } .fv--slashlayer { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .4s; background:repeating-linear-gradient(135deg,rgba(255,255,255,0.33) 0 2px,transparent 2px 12px); } /* テキストブロック */ .fv--text { position:absolute; left:5vw; bottom:6vh; color:#fff; z-index:10; font-family:'Noto Sans JP','Segoe UI','Meiryo',sans-serif; display:flex; flex-direction:column; align-items:flex-start; width:min(60vw,780px); text-align:left; } /* 見出し・サブタイトル 基本 */ .fv--title { font-size:clamp(42px,4.5vw,72px); font-weight:700; line-height:1.05; letter-spacing:.08em; margin:0 0 .35em; text-transform:uppercase; text-shadow:0 6px 24px rgba(0,0,0,.75),0 1px 0 #222; position:relative; } .fv--subtitle { font-size:clamp(15px,1.35vw,22px); font-weight:400; line-height:1.45; color:#d5d5d5; text-shadow:0 2px 10px rgba(0,0,0,.7); margin:0; } /* 固定採用: title-style-5 のみ保持 */ .fv--title[class*="title-style-"] { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif; -webkit-font-smoothing:antialiased; letter-spacing:.04em; font-weight:600; } .fv--title { padding-bottom:.35em; font-weight:500; } .fv--title::after { content:""; position:absolute; left:0; bottom:0; width:42%; height:3px; border-radius:2px; background:linear-gradient(90deg,#0A84FF,#64D2FF); box-shadow:0 2px 8px rgba(10,132,255,.45); } .business-panel__title.is-active::after { width: var(--biz-underline, 150px); } /* === END: 必要箇所のみ === */ /* ============================= Global Navigation (Glass Header) ============================= */ .site-header { position:fixed; top:14px; left:50%; transform:translateX(-50%); width:90%; max-width:1420px; z-index:100; --glass-base: 255,255,255; --glass-alpha: 0.18; /* ベース透明度下げ */ --glass-alpha-scroll: 0.26; --glass-accent1: 0.40; /* 先頭グラデ */ --glass-accent2: 0.14; /* 中間 */ --glass-accent3: 0.08; /* 終端 */ --glass-radial: 0.22; /* ライト斑点 */ --glass-overlay: 0.28; /* 上部ソフト膜 */ backdrop-filter: blur(24px) saturate(170%) contrast(102%); -webkit-backdrop-filter: blur(24px) saturate(170%) contrast(102%); background: linear-gradient(155deg, rgba(255,255,255,var(--glass-accent1)) 0%, rgba(255,255,255,var(--glass-accent2)) 44%, rgba(255,255,255,var(--glass-accent3)) 100%), radial-gradient(circle at 20% 14%, rgba(255,255,255,var(--glass-radial)), transparent 62%), linear-gradient(0deg, rgba(255,255,255,var(--glass-overlay)), rgba(255,255,255,var(--glass-overlay))) border-box; border-radius:14px; box-shadow: 0 6px 26px -14px rgba(0,0,0,0.36), 0 2px 5px -2px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.18) inset, 0 0 0 0.5px rgba(255,255,255,0.50); transition: background .6s cubic-bezier(.6,.05,.2,1), box-shadow .6s, border-color .6s; } .site-header.is-scrolled { --glass-accent1: 0.50; --glass-accent2: 0.20; --glass-accent3: 0.10; --glass-radial: 0.28; --glass-overlay: 0.34; box-shadow: 0 8px 30px -16px rgba(0,0,0,0.44), 0 3px 7px -2px rgba(0,0,0,0.26), 0 0 0 1px rgba(255,255,255,0.20) inset, 0 0 0 0.5px rgba(255,255,255,0.58); } .site-header__inner { width:100%; max-width:100%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding: clamp(6px,0.9vw,14px) clamp(18px,2.4vw,42px); gap:28px; box-sizing:border-box; } .site-logo img { height:40px; width:auto; display:block; filter:drop-shadow(0 1px 2px rgba(255,255,255,0.65)) drop-shadow(0 4px 12px rgba(0,0,0,0.25)); } .site-nav { position:relative; } .site-nav__list { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap: clamp(20px,2.2vw,54px); } .site-nav__list a { position:relative; display:inline-block; padding:.45em .25em .55em; font-size:15px; letter-spacing:.07em; font-weight:500; color:#20303a; text-decoration:none; text-transform:uppercase; transition:color .35s, text-shadow .45s; text-shadow:none; } .site-nav__list a::after { content:""; position:absolute; left:14%; bottom:6px; width:0; height:2px; background:linear-gradient(90deg,rgba(10,132,255,0.65),rgba(100,210,255,0.40)); border-radius:2px; transition:width .55s cubic-bezier(.68,-0.55,.27,1.55); box-shadow:0 0 6px -2px rgba(10,132,255,.45); } .site-nav__list a:hover::after, .site-nav__list a:focus-visible::after { width:70%; } .site-nav__list a:hover, .site-nav__list a:focus-visible { color:#0A84FF; text-shadow:0 1px 3px rgba(10,132,255,0.35); } /* contact-link 個別強調は撤去（共通リンクと同一扱い） */ /* Hamburger (mobile) */ .menu-toggle { position:relative; width:34px; height:30px; display:none; flex-direction:column; justify-content:center; gap:5px; background:transparent; border:none; border-radius:0; cursor:pointer; padding:0; box-shadow:none; transition:transform .45s; } .menu-toggle:hover { background:transparent; } .menu-toggle:focus-visible { outline:2px solid rgba(255,255,255,0.55); outline-offset:4px; } .menu-toggle__bar { display:block; width:34px; height:2.5px; background:#ffffff; border-radius:2px; transition:transform .55s cubic-bezier(.68,-0.55,.27,1.55), opacity .4s, width .4s; box-shadow:none; } .site-header[data-menu-state=open] .menu-toggle__bar:nth-child(1) { transform:translateY(9px) rotate(45deg); } .site-header[data-menu-state=open] .menu-toggle__bar:nth-child(2) { opacity:0; transform:translateX(12px); } .site-header[data-menu-state=open] .menu-toggle__bar:nth-child(3) { transform:translateY(-9px) rotate(-45deg); } /* Mobile layout */ @media (prefers-reduced-motion: reduce){ .site-nav__list a::after, .menu-toggle__bar, .site-header { transition:none !important; animation:none !important; } } @media (max-width: 860px) { .site-nav__list { position:fixed; top:82px; left:50%; right:auto; flex-direction:column; align-items:stretch; gap:16px; padding:34px clamp(30px,6vw,48px) 40px; width:90%; max-width:1420px; box-sizing:border-box; overflow-x:hidden; background: linear-gradient(155deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.14) 44%, rgba(255,255,255,0.08) 100%), radial-gradient(circle at 20% 16%, rgba(255,255,255,0.22), transparent 62%), linear-gradient(0deg, rgba(255,255,255,0.28), rgba(255,255,255,0.28)) border-box; border:none; border-radius:18px; box-shadow:0 18px 46px -16px rgba(0,0,0,0.48),0 0 0 1px rgba(255,255,255,0.16) inset; transform:translate(-50%, -18px) scale(.94); opacity:0; pointer-events:none; backdrop-filter:blur(30px) saturate(175%); -webkit-backdrop-filter:blur(30px) saturate(175%); transition:opacity .55s cubic-bezier(.6,.05,.2,1), transform .7s cubic-bezier(.68,-0.55,.27,1.55); } .site-header[data-menu-state=open] .site-nav__list { opacity:1; pointer-events:auto; transform:translate(-50%, 0) scale(1); } .site-nav__list a { font-size:15px; letter-spacing:.12em; } .menu-toggle { display:flex; } /* contact 個別スタイル不要 */ .site-nav__list a::after { left:10%; bottom:10px; } } /* Smaller height for very small devices */ @media (max-width:480px){ .site-header { top:10px; border-radius:12px; } .site-header__inner { padding:8px 20px; } .site-logo img { height:34px; } .site-nav__list { top:64px; } } /* ============================= About Section ============================= */ .section-about { position:relative; background:#fff; padding: clamp(80px,12vh,160px) 0 clamp(200px,22vh,300px); font-family: 'Noto Sans JP','Segoe UI',sans-serif; color:#333; } .section-about .about-bg-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; mix-blend-mode:normal; } .section-about__inner { width:100%; max-width:1420px; margin:0 auto; position:relative; z-index:2; padding:0 clamp(18px,5vw,64px); box-sizing:border-box; } .section-heading { text-align:center; margin:0 0 68px; position:relative; } .section-heading__title { font-size:clamp(30px,3vw,46px); font-weight:600; letter-spacing:.05em; margin:0; color:#3a3d40; } .section-heading__subtitle { margin:10px 0 0; font-size:clamp(14px,1.1vw,19px); letter-spacing:.12em; color:#555; } .about-body { max-width:960px; flex:1 1 54%; } .about-layout { display:flex; align-items:stretch; gap:6vw; } .about-figure { flex:1 1 46%; display:flex; align-items:center; justify-content:center; } .about-photo { width:100%; max-width:560px; aspect-ratio:16/10; border-radius:28px; overflow:hidden; position:relative; box-shadow:0 10px 38px -12px rgba(0,0,0,.25), 0 4px 18px -6px rgba(0,0,0,.18); } .about-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.35) 100%); mix-blend-mode:overlay; pointer-events:none; } .about-photo img { width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; filter:saturate(108%) contrast(102%); transition:transform 1.8s cubic-bezier(.68,-0.55,.27,1.55) 60ms; } .about-photo:hover img { transform:none; } @media (max-width: 980px){ .about-layout { flex-direction:column; } .about-figure { order:-1; } .about-photo { max-width:400px; margin:0 auto 34px; } /* 旧 .about-visual 削除 */ } .about-lead { font-size:clamp(26px,3vw,46px); line-height:1.25; font-weight:400; letter-spacing:.08em; margin:0 0 44px; } .about-lead__em { font-weight:600; } .about-text p { font-size:15px; line-height:1.9; letter-spacing:.07em; margin:0 0 28px; } .about-text p:last-child { margin-bottom:0; } /* pattern7 paragraph sequential reveal */ .about-lead { opacity:0; transform:translateY(30px); filter:blur(12px); transition:opacity 1s cubic-bezier(.68,-0.55,.27,1.55), transform 1s cubic-bezier(.68,-0.55,.27,1.55), filter 1s; } .about-lead.is-visible { opacity:1; transform:translateY(0); filter:blur(0); } .about-text p { opacity:0; transform:translateY(22px); filter:blur(8px); transition:opacity .75s cubic-bezier(.68,-0.55,.27,1.55), transform .9s cubic-bezier(.68,-0.55,.27,1.55), filter .9s; } .about-text p.is-visible { opacity:1; transform:translateY(0); filter:blur(0); } /* 右下階段型デコレーション */ /* Background pattern chooser */ @media (max-width: 860px){ .section-heading { margin-bottom:50px; } .about-lead { margin-bottom:44px; } .about-deco { width:62%; opacity:.5; } } @media (max-width:520px){ .about-lead { font-size:clamp(26px,8.2vw,44px); } .about-text p { font-size:14px; line-height:1.85; } .about-deco { width:80%; } } /* News list reveal */ .news-list .news-item { opacity:0; transform:translateY(14px); filter:blur(4px); transition:opacity .6s ease, transform .75s cubic-bezier(.68,-0.55,.27,1.55), filter .75s; } .news-list .news-item.is-visible { opacity:1; transform:translateY(0); filter:blur(0); } .news-list .news-item:nth-child(1) { transition-delay:.05s; } .news-list .news-item:nth-child(2) { transition-delay:.12s; } .news-list .news-item:nth-child(3) { transition-delay:.19s; } .news-list .news-item:nth-child(4) { transition-delay:.26s; } .news-list .news-item:nth-child(5) { transition-delay:.33s; } /* Animation chooser buttons */ /* Animation buttons removed */ /* Heading animation base */ .js-split-target { display:inline-block; position:relative; } /* Heading underline (single style kept) */ .section-heading { position:relative; padding-bottom:0; } .section-heading__title { position:relative; display:inline-block; margin:0; } .heading-divider { display:block; width:0; height:4px; margin:32px auto 28px; background:linear-gradient(90deg,#0A84FF,#64D2FF); border-radius:4px; box-shadow:0 0 18px -4px rgba(10,132,255,.55); opacity:0; transform:scaleX(.3); transform-origin:center center; } .heading-divider.is-animated { animation:hdCenterLine .9s cubic-bezier(.68,-0.55,.27,1.55) forwards; } @keyframes hdCenterLine { 0%{width:0; opacity:0; transform:scaleX(.3);} 55%{opacity:1;} 100%{width:220px; opacity:1; transform:scaleX(1);} } /* Removed multi-pattern decorative heading animations */ /* 初期状態（未発火） */ [data-anim] .js-split-target:not(.is-animated) .char { opacity:0; transform:translateY(.6em) scale(.94); filter:blur(4px); } /* パターン共通発火後の最終状態 */ .js-split-target.is-animated .char { opacity:1; transform:none; filter:none; } /* v1: 下→上 & ぼかし解除 */ [data-anim="v1"] .js-split-target.is-animated .char { animation:abtRise .9s cubic-bezier(.68,-0.55,.27,1.55) forwards; } @keyframes abtRise { 0%{opacity:0; transform:translateY(.9em) scale(.9); filter:blur(6px);} 60%{filter:blur(1px);} 100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0);} } /* v2: 斜めスライド & フェード */ [data-anim="v2"] .js-split-target.is-animated .char { animation:abtDiag .85s cubic-bezier(.6,.05,.2,1) forwards; } @keyframes abtDiag { 0%{opacity:0; transform:translate(-40%,60%) rotate(-8deg) scale(.85);} 70%{transform:translate(8%, -6%) rotate(1deg) scale(1.02);} 100%{opacity:1; transform:none;} } /* v3: Y軸フリップ */ [data-anim="v3"] .js-split-target.is-animated .char { transform-origin:50% 50% -20px; animation:abtFlip .8s cubic-bezier(.68,-0.55,.27,1.55) forwards; } @keyframes abtFlip { 0%{opacity:0; transform:rotateY(90deg) scale(.9);} 55%{opacity:1;} 100%{transform:rotateY(0) scale(1);} } /* v4: 波状バウンス */ [data-anim="v4"] .js-split-target.is-animated .char { animation:abtWave .45s cubic-bezier(.68,-0.55,.27,1.55) forwards; } @keyframes abtWave { 0%{opacity:0; transform:translateY(65%) scale(.8);} 55%{opacity:1;} 70%{transform:translateY(-20%) scale(1.05);} 84%{transform:translateY(8%) scale(1.015);} 100%{transform:translateY(0) scale(1);} } /* v5: ストレッチ+フェード */ [data-anim="v5"] .js-split-target.is-animated .char { animation:abtStretch .75s cubic-bezier(.68,-0.55,.27,1.55) forwards; } @keyframes abtStretch { 0%{opacity:0; transform:scaleX(.3) translateY(.6em);} 55%{opacity:1;} 100%{transform:scaleX(1) translateY(0);} } /* v6: 回転スピンイン */ [data-anim="v6"] .js-split-target.is-animated .char { animation:abtSpin .85s cubic-bezier(.68,-0.55,.27,1.55) forwards; } @keyframes abtSpin { 0%{opacity:0; transform:translateY(40%) rotate(-90deg) scale(.4);} 70%{opacity:1;} 100%{transform:translateY(0) rotate(0) scale(1);} } /* v7: スクランブル(ズレ→整列) */ [data-anim="v7"] .js-split-target.is-animated .char { animation:abtScramble .9s cubic-bezier(.68,-0.55,.27,1.55) forwards; } @keyframes abtScramble { 0%{opacity:0; transform:translate(var(--rx), var(--ry)) scale(.4) rotate(var(--rot)); filter:blur(8px);} 60%{opacity:1;} 100%{transform:none; filter:none;} } /* v8: グローしながらフェードイン */ [data-anim="v8"] .js-split-target.is-animated .char { animation:abtGlow .95s cubic-bezier(.6,.05,.2,1) forwards; } @keyframes abtGlow { 0%{opacity:0; transform:translateY(.8em); text-shadow:0 0 18px rgba(10,132,255,.9);} 55%{opacity:1;} 100%{transform:none; text-shadow:0 0 0 rgba(0,0,0,0);} } /* v9: マスクスライド(下→上クリップ) */ [data-anim="v9"] .js-split-target { overflow:hidden; } [data-anim="v9"] .js-split-target.is-animated .char { animation:abtMask .85s cubic-bezier(.68,-0.55,.27,1.55) forwards; } @keyframes abtMask { 0%{opacity:0; transform:translateY(110%);} 60%{opacity:1;} 100%{transform:translateY(0);} } /* v10: 打刻タイプ + 小シェイク */ [data-anim="v10"] .js-split-target.is-animated .char { animation:abtType .7s steps(8,end) forwards; } @keyframes abtType { 0%{opacity:0; transform:translateY(.5em) scale(.85);} 80%{opacity:1;} 100%{transform:none;} } /* 文字間ディレイ（全パターン共通） */ [data-anim] .js-split-target.is-animated .char { animation-delay:calc(var(--char-index) * 28ms); } [data-anim="v7"] .js-split-target.is-animated .char { animation-delay:calc(var(--char-index) * 22ms); } [data-anim="v10"] .js-split-target.is-animated .char { animation-delay:calc(var(--char-index) * 40ms); } /* ============================= Business Section (Horizontal Panels) ============================= */ .section-business { position:relative; background:#fff; padding-top: clamp(80px,14vh,160px); } /* === New Business section (simple like About) === */ .section-business { position:relative; background:#fff; padding: clamp(80px,12vh,160px) 0 clamp(160px,16vh,240px); font-family:'Noto Sans JP','Segoe UI',sans-serif; } .section-business__inner { width:100%; max-width:1420px; margin:0 auto; padding:0 clamp(18px,5vw,64px); box-sizing:border-box; } .section-business::before, .section-business::after { content:""; position:absolute; inset:0; pointer-events:none; } .section-business { --biz-bg1:#ffffff; --biz-bg2:#ffffff; background:#fff; overflow:hidden; } .section-business .bg-shapes-layer { position:absolute; inset:0; pointer-events:none; } @keyframes bgFloatA { 0%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-40px) rotate(6deg);} 100%{transform:translateY(0) rotate(0deg);} } @keyframes bgDrift { 0%{transform:translate3d(0,0,0);} 50%{transform:translate3d(40px,-30px,0);} 100%{transform:translate3d(0,0,0);} } @keyframes bgRotateSlow { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } @keyframes bgPulse { 0%{transform:scale(1); opacity:.35;} 50%{transform:scale(1.15); opacity:.55;} 100%{transform:scale(1); opacity:.35;} } @keyframes bgSlide { 0%{background-position:0 0,0 0;} 100%{background-position:400px 0, -400px 0;} } @keyframes bgMoveDiag { 0%{transform:translate(0,0);} 50%{transform:translate(-60px,40px);} 100%{transform:translate(0,0);} } /* Base gradient for all diagonal patterns (from before) remains */ /* Helper: band shape via conic-gradient mask clipped to diagonal */ @supports (mask:paint(id)) { /* skip fancy if unsupported */ } /* Each variant changes texture / edge / blur / accent overlay; width grows with --diag-p */ .section-business[data-bg-variant="21"]::after { background:linear-gradient(60deg, rgba(0,0,0,.08) calc(var(--diag-p)*40%), rgba(0,0,0,0) calc(var(--diag-p)*40% + 1px)); } .section-business[data-bg-variant="22"]::after { background:linear-gradient(60deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) calc(20% + var(--diag-p)*50%)); filter:blur(2px); } .section-business[data-bg-variant="23"]::after { background:linear-gradient(60deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) calc(15% + var(--diag-p)*55%)); box-shadow:0 0 40px -10px rgba(0,0,0,.12) inset; } .section-business[data-bg-variant="24"]::after { background:linear-gradient(60deg, rgba(0,0,0,.09) 0%, rgba(0,0,0,0) calc(10% + var(--diag-p)*60%)), repeating-linear-gradient(60deg,rgba(0,0,0,.05) 0 2px,transparent 2px 18px); mix-blend-mode:multiply; opacity:.9; } .section-business[data-bg-variant="25"]::after { background:linear-gradient(60deg, rgba(0,0,0,.11) 0%, rgba(0,0,0,0) calc(8% + var(--diag-p)*62%)), radial-gradient(circle at 70% 30%,rgba(0,0,0,.06),transparent 70%); } .section-business[data-bg-variant="26"]::after { background:linear-gradient(60deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,0) calc(6% + var(--diag-p)*64%)); filter:contrast(105%) brightness(1.02); } .section-business[data-bg-variant="27"]::after { background:linear-gradient(60deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) calc(5% + var(--diag-p)*65%)), repeating-linear-gradient(60deg,rgba(0,0,0,.055) 0 10px,transparent 10px 26px); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } .section-business[data-bg-variant="28"]::after { background:linear-gradient(60deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) calc(4% + var(--diag-p)*66%)), linear-gradient(60deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,0) calc(2% + var(--diag-p)*66%)); } .section-business[data-bg-variant="29"]::after { background:linear-gradient(60deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) calc(3% + var(--diag-p)*67%)); filter:saturate(.9); } .section-business[data-bg-variant="30"]::after { background:linear-gradient(60deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) calc(2% + var(--diag-p)*68%)), radial-gradient(circle at 20% 40%,rgba(0,0,0,.08),transparent 70%); mix-blend-mode:multiply; } .section-business[data-bg-variant="22"]::before { background:linear-gradient(160deg,#f4f6f8,#e7ebee); } /* Remove old static overrides for 23-30 ::after (kept dynamic ones above). Keep optional ::before accents if needed later. */ /* New Karakusa-inspired patterns (B31-B33) */ /* Shared helper variable for band width */ .section-business[data-bg-variant="31"], .section-business[data-bg-variant="32"], .section-business[data-bg-variant="33"] { --band-w: calc(8% + var(--diag-p)*64%); } /* B31: SVG唐草タイル + マスクで斜め帯 */ .section-business[data-bg-variant="31"]::after { --svg-k: url("data:image/svg+xml;utf8,"); background: var(--svg-k) repeat; background-size:120px 120px; -webkit-mask: linear-gradient(60deg,#000 0%,#000 var(--band-w),transparent calc(var(--band-w) + 1px)); mask: linear-gradient(60deg,#000 0%,#000 var(--band-w),transparent calc(var(--band-w) + 1px)); opacity:.9; } /* B32: タイル + ソフトグロー + 帯内部のみ表示 (少し淡め) */ .section-business[data-bg-variant="32"]::after { --svg-k: url("data:image/svg+xml;utf8,"); background: radial-gradient(circle at 70% 30%,rgba(0,0,0,.08),transparent 70%), var(--svg-k) repeat; background-size: 100% 100%,140px 140px; -webkit-mask: linear-gradient(60deg,#000 0%,#000 var(--band-w),transparent calc(var(--band-w) + 1px)); mask: linear-gradient(60deg,#000 0%,#000 var(--band-w),transparent calc(var(--band-w) + 1px)); opacity:.8; mix-blend-mode:multiply; } /* B33: 純CSS簡易“唐草風” (円/波紋パターン) */ .section-business[data-bg-variant="33"]::after { background: radial-gradient(circle at 20% 30%,rgba(0,0,0,.10) 0 6px,transparent 7px), radial-gradient(circle at 60% 70%,rgba(0,0,0,.08) 0 5px,transparent 6px), repeating-radial-gradient(circle at 0 0,rgba(0,0,0,.05) 0 2px,transparent 2px 14px); background-size:160px 160px,140px 140px,200px 200px; -webkit-mask: linear-gradient(60deg,#000 0%,#000 var(--band-w),transparent calc(var(--band-w) + 1px)); mask: linear-gradient(60deg,#000 0%,#000 var(--band-w),transparent calc(var(--band-w) + 1px)); opacity:.85; } .business-cards { display:grid; grid-template-columns: repeat(auto-fill,minmax(420px,1fr)); gap:70px 60px; margin-top:80px; } /* Business app solutions CTA (subtle link style) */ .solution-card__linkwrap { margin:16px 0 0; } .solution-card__more { display:inline-flex; align-items:center; gap:.45em; font-size:13px; letter-spacing:.08em; font-weight:500; color:#0A84FF; text-decoration:none; padding:0; background:none; border-radius:0; box-shadow:none; position:relative; line-height:1.4; transition:color .35s; } .solution-card__more::after { content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:currentColor; transform:scaleX(.35); transform-origin:left; transition:transform .45s cubic-bezier(.68,-0.55,.27,1.55), opacity .45s; opacity:.55; } .solution-card__more:hover,.solution-card__more:focus-visible { color:#086dd0; } .solution-card__more:hover::after,.solution-card__more:focus-visible::after { transform:scaleX(1); opacity:1; } /* background variant buttons */ .bg-variant-controls { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; } .bgv-btn { background:#fff; color:#4a545b; border:1px solid #d0d8dd; padding:6px 14px; border-radius:20px; font-size:12px; letter-spacing:.05em; cursor:pointer; transition:.4s; box-shadow:0 2px 5px -2px rgba(0,0,0,.08); } .bgv-btn:hover, .bgv-btn:focus-visible { background:#f1f5f7; outline:none; } .bgv-btn.is-active { background:linear-gradient(135deg,#5a6670,#87949e); color:#fff; border-color:transparent; box-shadow:0 6px 20px -8px rgba(0,0,0,.25); } /* heading variant buttons */ /* heading/layout variant controls removed */ /* heading variants removed -> unified style reuse from About */ /* layout variant 2 (vertical list) fixed */ #business[data-layout-variant="2"] .business-cards { display:flex; flex-direction:column; gap:90px; } #business[data-layout-variant="2"] .business-cards .solution-card { display:flex; flex-direction:row; align-items:stretch; gap:40px; } #business[data-layout-variant="2"] .business-cards .solution-card__media { flex:0 0 520px; aspect-ratio:auto; height:320px; } @media (max-width:900px){ #business[data-layout-variant="2"] .business-cards .solution-card { flex-direction:column; } #business[data-layout-variant="2"] .business-cards .solution-card__media { width:100%; height:auto; aspect-ratio:4/3; } } /* focus blur effect */ .business-cards.focus-mode .solution-card { filter:blur(2px) saturate(.85) brightness(.95); opacity:.75; transition:filter .8s, opacity .8s, transform .8s; } .business-cards.focus-mode .solution-card.is-focus { filter:none; opacity:1; } .business-cards.focus-mode .solution-card:not(.is-focus) .solution-card__media::after { content:""; position:absolute; inset:0; background:rgba(255,255,255,.25); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } .business-cards.focus-mode { perspective:1400px; } .business-cards.focus-mode .solution-card { transform:translateZ(-100px) scale(.95) rotateX(2deg); } .business-cards.focus-mode .solution-card.is-focus { transform:translateZ(0) scale(1.01) rotateX(0deg); } .business-cards.focus-mode .solution-card.is-focus .solution-card__title { position:relative; z-index:2; } .business-cards.focus-mode .solution-card:not(.is-focus) { pointer-events:none; } .business-cards .solution-card { margin:0; opacity:1; transform:none; filter:none; grid-template-columns:1fr; gap:26px; } .business-cards .solution-card__media { aspect-ratio:4/3; } .business-cards .solution-card__media { position:relative; overflow:hidden; } /* Title decoration variants (data-title-variant on .business-cards) */ [data-title-variant="1"] .solution-card__title { font-weight:600; position:relative; padding-bottom:10px; } [data-title-variant="1"] .solution-card__title::after { content:""; position:absolute; left:0; bottom:0; width:110px; height:4px; background:linear-gradient(90deg,#0A84FF,#64D2FF); border-radius:4px; box-shadow:0 4px 14px -4px rgba(10,132,255,.55); } [data-title-variant="2"] .solution-card__title { position:relative; padding-left:18px; } [data-title-variant="2"] .solution-card__title::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:6px; background:linear-gradient(#0A84FF,#64D2FF); border-radius:4px; } [data-title-variant="3"] .solution-card__title { background:linear-gradient(90deg,#0A84FF,#64D2FF,#0A84FF); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative; } [data-title-variant="3"] .solution-card__title::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%; background:linear-gradient(90deg,rgba(10,132,255,.5),rgba(100,210,255,.5)); opacity:.4; } [data-title-variant="4"] .solution-card__title { position:relative; padding:10px 22px 12px; border-radius:50px; background:linear-gradient(135deg,rgba(10,132,255,.15),rgba(100,210,255,.10)); backdrop-filter:blur(6px) saturate(160%); -webkit-backdrop-filter:blur(6px) saturate(160%); } [data-title-variant="4"] .solution-card__title::before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(160deg,rgba(255,255,255,.6),rgba(255,255,255,0)); mix-blend-mode:overlay; } [data-title-variant="5"] .solution-card__title { position:relative; padding-left:0; font-weight:650; } [data-title-variant="5"] .solution-card__title::before { content:counter(cardnum, decimal-leading-zero); counter-increment:cardnum; position:absolute; left:-70px; top:50%; transform:translateY(-50%); font-size:60px; font-weight:700; color:rgba(10,132,255,.08); letter-spacing:-.03em; } [data-title-variant="6"] .solution-card__title { position:relative; padding-left:34px; } [data-title-variant="6"] .solution-card__title::before { content:""; position:absolute; left:0; top:50%; width:22px; height:22px; transform:translateY(-50%); border:3px solid #0A84FF; border-radius:50%; box-shadow:0 0 0 4px rgba(10,132,255,.18),0 4px 16px -6px rgba(0,0,0,.35); } [data-title-variant="7"] .solution-card__title { position:relative; padding:14px 18px 16px 26px; color:#fff; } [data-title-variant="7"] .solution-card__title::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,#0A84FF,#64D2FF); border-radius:16px; box-shadow:0 14px 28px -10px rgba(10,132,255,.55); } [data-title-variant="7"] .solution-card__title span { position:relative; } [data-title-variant="8"] .solution-card__title { position:relative; font-weight:600; } [data-title-variant="8"] .solution-card__title::before { content:""; position:absolute; left:-14px; top:50%; width:54px; height:54px; transform:translateY(-50%); border:2px dashed rgba(10,132,255,.55); border-radius:50%; animation:bizOrbit 12s linear infinite; } [data-title-variant="8"] .solution-card__title::after { content:""; position:absolute; left:0; bottom:-12px; height:6px; width:170px; background:linear-gradient(90deg,#0A84FF,#64D2FF,#0A84FF); background-size:200% 100%; border-radius:4px; animation:bizGradientMove 5s linear infinite; opacity:.5; } [data-title-variant="9"] .solution-card__title { position:relative; padding-left:20px; } [data-title-variant="9"] .solution-card__title::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:10px; height:10px; background:linear-gradient(135deg,#0A84FF,#64D2FF); border-radius:3px; box-shadow:0 0 0 6px rgba(10,132,255,.18); animation:bizPulse 1.6s infinite alternate; } [data-title-variant="9"] .solution-card__title::after { content:""; position:absolute; left:0; bottom:-10px; height:4px; width:140px; background:linear-gradient(90deg,#0A84FF,#64D2FF); border-radius:4px; opacity:.55; } [data-title-variant="10"] .solution-card__title { position:relative; font-weight:620; } [data-title-variant="10"] .solution-card__title::before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(120deg,rgba(10,132,255,.18),rgba(255,255,255,0) 70%); pointer-events:none; mix-blend-mode:overlay; } [data-title-variant="10"] .solution-card__title::after { content:""; position:absolute; left:0; bottom:-8px; height:2px; width:100%; background:repeating-linear-gradient(90deg,#0A84FF 0 14px, transparent 14px 20px); opacity:.45; } /* Counter reset for variant 5 */ [data-title-variant="5"] { counter-reset:cardnum; } /* New Title Variants T11 - T20 */ [data-title-variant="11"] .solution-card__title { position:relative; font-weight:600; padding:14px 0 14px 28px; } [data-title-variant="11"] .solution-card__title::before { content:""; position:absolute; left:0; top:0; bottom:0; width:10px; background:linear-gradient(180deg,#0A84FF,#64D2FF); border-radius:8px; box-shadow:0 0 0 4px rgba(10,132,255,.18); } [data-title-variant="11"] .solution-card__title::after { content:""; position:absolute; left:14px; right:0; bottom:0; height:2px; background:linear-gradient(90deg,#0A84FF,#64D2FF); opacity:.4; } [data-title-variant="12"] .solution-card__title { position:relative; font-weight:650; letter-spacing:.04em; padding-bottom:14px; } [data-title-variant="12"] .solution-card__title::after { content:""; position:absolute; left:0; bottom:0; height:6px; width:0; background:linear-gradient(90deg,#0A84FF,#64D2FF); border-radius:6px; animation:t12Grow .9s cubic-bezier(.68,-0.55,.27,1.55) forwards; box-shadow:0 6px 18px -6px rgba(10,132,255,.55); } @keyframes t12Grow { to { width:160px; } } [data-title-variant="13"] .solution-card__title { position:relative; font-weight:600; padding:12px 24px 14px; border:1px solid rgba(10,132,255,.4); border-radius:18px; backdrop-filter:blur(8px) saturate(160%); -webkit-backdrop-filter:blur(8px) saturate(160%); } [data-title-variant="13"] .solution-card__title::before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0)); mix-blend-mode:overlay; } [data-title-variant="14"] .solution-card__title { position:relative; padding-left:40px; font-weight:600; } [data-title-variant="14"] .solution-card__title::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:32px; height:32px; background:conic-gradient(from 0deg,#0A84FF,#64D2FF,#0A84FF); border-radius:10px; filter:blur(.5px); box-shadow:0 10px 26px -12px rgba(10,132,255,.55); animation:t14Spin 10s linear infinite; } @keyframes t14Spin { to { transform:translateY(-50%) rotate(360deg); } } [data-title-variant="15"] .solution-card__title { position:relative; font-weight:650; padding:10px 0 12px; } [data-title-variant="15"] .solution-card__title::before { content:attr(data-title-en); position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:90px; font-weight:700; letter-spacing:.05em; color:#0a1115; opacity:.05; pointer-events:none; } [data-title-variant="15"] .solution-card__title { overflow:hidden; } [data-title-variant="16"] .solution-card__title { position:relative; padding-left:26px; } [data-title-variant="16"] .solution-card__title::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:14px; height:14px; background:linear-gradient(135deg,#0A84FF,#64D2FF); border-radius:4px; box-shadow:0 0 0 6px rgba(10,132,255,.2),0 0 0 12px rgba(10,132,255,.06); animation:t16Pulse 1.8s ease-in-out infinite; } @keyframes t16Pulse { 0%{transform:translateY(-50%) scale(.8);} 60%{transform:translateY(-50%) scale(1.2);} 100%{transform:translateY(-50%) scale(.8);} } [data-title-variant="17"] .solution-card__title { position:relative; padding:14px 26px 16px 34px; border-radius:18px; font-weight:600; color:#fff; } [data-title-variant="17"] .solution-card__title::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,#0A84FF,#64D2FF); border-radius:inherit; box-shadow:0 18px 40px -14px rgba(10,132,255,.6); } [data-title-variant="17"] .solution-card__title::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%); border-radius:inherit; mix-blend-mode:overlay; } [data-title-variant="18"] .solution-card__title { position:relative; font-weight:600; padding:12px 0 12px 0; } [data-title-variant="18"] .solution-card__title::before { content:""; position:absolute; left:0; bottom:0; width:100%; height:8px; background:linear-gradient(90deg,rgba(10,132,255,.6),rgba(100,210,255,.6)); filter:blur(8px); opacity:.7; } [data-title-variant="18"] .solution-card__title::after { content:""; position:absolute; left:0; bottom:0; height:3px; width:180px; background:linear-gradient(90deg,#0A84FF,#64D2FF); border-radius:4px; } [data-title-variant="19"] .solution-card__title { position:relative; padding:14px 0 14px 30px; } [data-title-variant="19"] .solution-card__title::before { content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(180deg,#0A84FF,#64D2FF); animation:t19Bar .9s cubic-bezier(.68,-0.55,.27,1.55) forwards; } @keyframes t19Bar { to { width:8px; } } [data-title-variant="19"] .solution-card__title::after { content:""; position:absolute; left:14px; bottom:0; height:2px; width:140px; background:linear-gradient(90deg,#0A84FF,#64D2FF); opacity:.4; } [data-title-variant="20"] .solution-card__title { position:relative; font-weight:620; padding:16px 26px 18px 30px; border:1px solid rgba(10,132,255,.3); border-radius:28px; background:linear-gradient(145deg,rgba(255,255,255,.65),rgba(255,255,255,.3)); backdrop-filter:blur(10px) saturate(170%); -webkit-backdrop-filter:blur(10px) saturate(170%); } [data-title-variant="20"] .solution-card__title::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%); mix-blend-mode:overlay; } [data-title-variant="20"] .solution-card__title::after { content:""; position:absolute; left:0; bottom:-10px; height:8px; width:100%; background:linear-gradient(90deg,#0A84FF,#64D2FF); filter:blur(16px); opacity:.35; } @media (max-width:820px){ .business-cards { grid-template-columns:1fr; gap:60px; } } /* === Mobile single-column center alignment === */ @media (max-width:640px){ /* About */ .about-layout { align-items:center; } .about-body { text-align:center; } .about-lead { text-align:center; line-height:1.18; } .about-text { text-align:center; } .about-text p br { display:none; } .about-lead { font-size:clamp(20px,6vw,30px); margin-bottom:30px; } /* Business cards */ #business[data-layout-variant="2"] .business-cards .solution-card { align-items:center; text-align:center; } #business .solution-card__body { text-align:center; } [data-title-variant="1"] .solution-card__title { text-align:center; } [data-title-variant="1"] .solution-card__title::after { left:50%; transform:translateX(-50%); } .solution-card__media { width:100%; aspect-ratio:16/10; } .solution-card__text { max-width:520px; margin:0 auto; } .solution-card__linkwrap { justify-content:center; display:flex; } /* Business media like About photo */ .solution-card__media { border-radius:28px; overflow:hidden; box-shadow:0 8px 30px -14px rgba(0,0,0,.22),0 4px 14px -8px rgba(0,0,0,.15); position:relative; } .solution-card__media::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.35) 100%); mix-blend-mode:overlay; pointer-events:none; } .solution-card__media img { width:100%; height:100%; object-fit:cover; object-position:center 45%; } /* Footer center */ .site-footer__inner, .site-footer__layout { align-items:center; text-align:center; } .site-footer__title, .company-info, .site-footer__copy { text-align:center; } .company-info__row { justify-content:center; } .company-info dt { flex:0 0 auto; min-width:90px; text-align:right; } .company-info dd { text-align:left; } .footer-map { max-width:300px; margin:10px auto 0; } /* Mobile-only: Business images match About size */ #business[data-layout-variant="2"] .business-cards .solution-card__media { aspect-ratio:16/10 !important; height:auto !important; flex:0 0 auto !important; width:100%; max-width:400px; margin:0 auto 20px; border-radius:28px; overflow:hidden; position:relative; box-shadow:0 10px 38px -12px rgba(0,0,0,.25),0 4px 18px -6px rgba(0,0,0,.18); } #business[data-layout-variant="2"] .business-cards .solution-card__media::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.35) 100%); mix-blend-mode:overlay; pointer-events:none; } #business[data-layout-variant="2"] .business-cards .solution-card__media img { width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; } } /* reuse variant styles on wrapper */ .business-cards[data-card-variant] .solution-card__media { transition: box-shadow .5s, transform .6s cubic-bezier(.68,-0.55,.27,1.55); } .business-cards .solution-card:hover .solution-card__media { transform:none; box-shadow:none; } /* Accessibility utility */ .visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; } /* removed counter / dots / bg variant controls */ /* heading block spacing */ .solutions-heading-block { margin-bottom:60px; } .solution-card__title, .solution-card__text { color:#27333a; } .solution-card__body { color:#4f5b62; } /* (旧 shape variant / stack 関連 CSS 削除済) */ /* (図形TOC削除済) */ /* Ensure left column truly fixed (no vertical push) */ .js-solutions-pin { will-change:transform; } .business-solutions-grid { width:90%; max-width:1420px; margin:0 auto; display:grid; grid-template-columns:minmax(340px,480px) 1fr; gap:6vw; } .solutions-left { position:relative; } .solutions-sticky { position:sticky; top:110px; display:flex; flex-direction:column; align-items:flex-start; gap:20px; } /* 固定化時 */ .solutions-sticky[data-fixed="1"] { position:fixed !important; top:110px; z-index:20; } /* 追加タイトル（存在する場合） */ .solutions-main-title { margin:0 0 10px; font-size:clamp(40px,3.8vw,62px); font-weight:600; line-height:1.06; letter-spacing:.04em; color:#1c252a; } .solutions-main-title small { display:block; font-size:.42em; margin-top:14px; letter-spacing:.14em; font-weight:500; color:#5c6b73; text-transform:uppercase; } /* === Diamond Stack 3D pyramid (isometric-ish 45deg top view) === */ .solutions-eyebrow { margin:0; font-size:14px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:#0A84FF; } .solutions-heading { margin:0; font-size:clamp(32px,3.2vw,52px); font-weight:600; line-height:1.1; letter-spacing:.04em; } .solutions-heading .line { display:block; } .solutions-heading .sub { font-size:0.62em; margin-top:10px; letter-spacing:.08em; color:#20303a; font-weight:500; } /* card variant placeholders */ [data-card-variant="1"] .solution-card__media { border-radius:22px; } [data-card-variant="2"] .solution-card__media { border-radius:0; clip-path:polygon(0 0,100% 0,100% 75%,0 100%); box-shadow:0 20px 60px -30px rgba(0,0,0,.35); } [data-card-variant="3"] .solution-card__media { border-radius:50%; aspect-ratio:1/1; overflow:hidden; box-shadow:0 10px 40px -18px rgba(10,132,255,.4); } [data-card-variant="4"] .solution-card__media { position:relative; border-radius:28px; overflow:hidden; } [data-card-variant="4"] .solution-card__media::before { content:""; position:absolute; inset:-2px; background:conic-gradient(from 0deg,#0A84FF,#64D2FF,#0A84FF); filter:blur(6px); opacity:.6; } [data-card-variant="5"] .solution-card__media { border-radius:24px; outline:3px solid #0A84FF; outline-offset:4px; } [data-card-variant="6"] .solution-card__media { border-radius:12px; transform:skewY(-6deg); overflow:hidden; box-shadow:0 16px 50px -24px rgba(0,0,0,.4); } [data-card-variant="7"] .solution-card__media { border-radius:0; clip-path:polygon(12% 0,88% 0,100% 20%,100% 80%,88% 100%,12% 100%,0 80%,0 20%); box-shadow:0 0 0 4px #fff,0 14px 50px -22px rgba(0,0,0,.4); } [data-card-variant="8"] .solution-card__media { border-radius:30px; background:linear-gradient(135deg,#0A84FF,#64D2FF); position:relative; } [data-card-variant="8"] .solution-card__media img { mix-blend-mode:luminosity; opacity:.9; } [data-card-variant="9"] .solution-card__media { border-radius:18px; filter:grayscale(100%) contrast(1.2); } [data-card-variant="10"] .solution-card__media { border-radius:20px; position:relative; } [data-card-variant="10"] .solution-card__media::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 6px,transparent 6px 12px); mix-blend-mode:overlay; } [data-card-variant="11"] .solution-card__media { border-radius:0 50px 0 50px; box-shadow:0 14px 60px -28px rgba(10,132,255,.5); overflow:hidden; } [data-card-variant="12"] .solution-card__media { border-radius:14px; border:4px solid transparent; background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#0A84FF,#64D2FF) border-box; } [data-card-variant="13"] .solution-card__media { border-radius:42px; background:radial-gradient(circle at 30% 30%,#64D2FF,#0A84FF); } [data-card-variant="14"] .solution-card__media { border-radius:16px; transform:rotate(-3deg); box-shadow:0 12px 50px -26px rgba(0,0,0,.45); } [data-card-variant="15"] .solution-card__media { border-radius:0; clip-path:polygon(0 15%,100% 0,100% 85%,0 100%); background:#0A84FF; } [data-card-variant="15"] .solution-card__media img { mix-blend-mode:screen; opacity:.85; } [data-card-variant="16"] .solution-card__media { border-radius:24px; background:#fff; box-shadow:0 0 0 8px rgba(10,132,255,.12),0 12px 44px -20px rgba(0,0,0,.35); } [data-card-variant="17"] .solution-card__media { border-radius:28px; position:relative; } [data-card-variant="17"] .solution-card__media::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.6),rgba(255,255,255,0)); mix-blend-mode:overlay; } [data-card-variant="18"] .solution-card__media { border-radius:18px; filter:saturate(180%) contrast(1.05); } [data-card-variant="19"] .solution-card__media { border-radius:18px; backdrop-filter:blur(8px); background:rgba(255,255,255,.35); overflow:hidden; } [data-card-variant="19"] .solution-card__media img { filter:blur(2px) brightness(1.2); } [data-card-variant="20"] .solution-card__media { border-radius:28px; border:2px dashed #0A84FF; padding:6px; background:linear-gradient(180deg,#f8fbff,#eef3f8); } [data-card-variant="20"] .solution-card__media img { border-radius:22px; } [data-card-variant] .solution-card__media img { mix-blend-mode:normal; } /* body accent variations */ [data-card-variant="2"] .solution-card__title::after { background:#0A84FF; } [data-card-variant="3"] .solution-card__title::after { background:#64D2FF; } [data-card-variant="4"] .solution-card__title::after { background:conic-gradient(from 0deg,#0A84FF,#64D2FF,#0A84FF); height:5px; } [data-card-variant="5"] .solution-card__title::after { background:linear-gradient(90deg,#64D2FF,#0A84FF); height:3px; } [data-card-variant="6"] .solution-card__title::after { background:linear-gradient(90deg,#0A84FF,#64D2FF,#0A84FF); } [data-card-variant="7"] .solution-card__title::after { background:#0A84FF; height:6px; } [data-card-variant="8"] .solution-card__title::after { background:#fff; } [data-card-variant="9"] .solution-card__title::after { background:#64D2FF; } [data-card-variant="10"] .solution-card__title::after { background:repeating-linear-gradient(90deg,#0A84FF 0 12px,#64D2FF 12px 24px); } [data-card-variant="11"] .solution-card__title::after { background:#0A84FF; } [data-card-variant="12"] .solution-card__title::after { background:linear-gradient(90deg,#0A84FF,#64D2FF); } [data-card-variant="13"] .solution-card__title::after { background:radial-gradient(circle,#64D2FF,#0A84FF); } [data-card-variant="14"] .solution-card__title::after { background:#64D2FF; } [data-card-variant="15"] .solution-card__title::after { background:#fff; } [data-card-variant="16"] .solution-card__title::after { background:linear-gradient(90deg,#64D2FF,#0A84FF); } [data-card-variant="17"] .solution-card__title::after { background:linear-gradient(90deg,#0A84FF,#64D2FF); } [data-card-variant="18"] .solution-card__title::after { background:linear-gradient(90deg,#0A84FF,#64D2FF,#0A84FF); } [data-card-variant="19"] .solution-card__title::after { background:#0A84FF; } [data-card-variant="20"] .solution-card__title::after { background:#64D2FF; } .solutions-dots .dot { width:14px; height:14px; border-radius:50%; background:#d0d8dd; border:none; cursor:pointer; position:relative; transition:background .4s, transform .5s cubic-bezier(.68,-0.55,.27,1.55); } .solutions-dots .dot.is-active { background:linear-gradient(135deg,#0A84FF,#64D2FF); transform:scale(1.4); box-shadow:0 0 0 4px rgba(10,132,255,.22); } .solutions-right { position:relative; } .solutions-list { position:relative; } .solution-card { display:grid; grid-template-columns: minmax(280px,420px) 1fr; gap:56px; align-items:center; margin:0 0 200px; opacity:.35; transform:translateY(40px) scale(.95); transition:opacity .8s, transform .9s cubic-bezier(.68,-0.55,.27,1.55), filter .8s; filter:blur(6px); } .solution-card.is-current { opacity:1; transform:translateY(0) scale(1); filter:none; } .solution-card__media { margin:0; border-radius:22px; overflow:hidden; position:relative; aspect-ratio:4/3; background:#ffffff; box-shadow:0 10px 28px -12px rgba(0,0,0,.15),0 6px 18px -10px rgba(0,0,0,.08); } .solution-card__media img { width:100%; height:100%; object-fit:cover; display:block; } .solution-card__body { font-size:15px; line-height:1.85; letter-spacing:.06em; } .solution-card__title { font-size:clamp(20px,1.6vw,28px); margin:0 0 18px; font-weight:600; letter-spacing:.05em; position:relative; } .solution-card__title::after { content:""; position:absolute; left:0; bottom:-8px; width:120px; height:4px; border-radius:4px; background:linear-gradient(90deg,#0A84FF,#64D2FF); box-shadow:0 0 14px -4px rgba(10,132,255,.6); } .solution-card__text { margin:0; } @media (max-width:1080px){ .business-solutions-grid { grid-template-columns:1fr; } .solutions-sticky { top:70px; margin-bottom:80px; } .solution-card { grid-template-columns:1fr; gap:30px; margin-bottom:160px; } } @media (max-width:600px){ .solution-card { margin-bottom:120px; } .solution-card__title { font-size:22px; } } .section-business.shape-mode { overflow:clip; } .shape-mode .business-new-layout { display:grid; grid-template-columns: minmax(320px,480px) 1fr; gap:6vw; align-items:start; width:90%; max-width:1420px; margin:0 auto; position:relative; } .shape-mode .business-shape-col { position:sticky; top:120px; height:calc(100vh - 160px); display:flex; align-items:center; justify-content:center; } .shape-mode .business-shape { position:relative; width:340px; height:480px; } .shape-mode .shape-piece { position:absolute; border-radius:28px; background:linear-gradient(135deg,#0A84FF,#64D2FF); box-shadow:0 20px 40px -18px rgba(10,132,255,.35),0 10px 26px -14px rgba(32,48,58,.35); opacity:.9; mix-blend-mode:normal; } .shape-mode .piece-a { inset:0 180px 200px 0; background:linear-gradient(140deg,#0A84FF,#3aa4ff); } .shape-mode .piece-b { inset:140px 0 40px 140px; background:linear-gradient(140deg,#56c6ff,#64D2FF); } .shape-mode .piece-c { inset:70px 110px 110px 30px; background:linear-gradient(140deg,#0A84FF,#64D2FF); filter:brightness(1.1); } .shape-mode .piece-d { inset:200px 160px 0 30px; background:linear-gradient(140deg,#2f9dff,#64D2FF); } .shape-mode .business-content-col { position:relative; } .shape-mode .biz-content-viewport { position:relative; } .shape-mode .biz-content-track { position:relative; } .shape-mode .business-list { position:relative; } .shape-mode .business-item { margin:0 0 160px; } .shape-mode .business-item:last-child { margin-bottom:40vh; } @media (max-width:1000px){ .shape-mode .business-new-layout { grid-template-columns:1fr; } .shape-mode .business-shape-col { order:2; position:relative; top:auto; height:auto; margin-top:60px; } .shape-mode .business-item:last-child { margin-bottom:200px; } } /* Merge animation states (added via JS) */ .shape-mode .business-shape.merge-step-1 .piece-b { transform:translate(60px,-40px) rotate(-8deg); } .shape-mode .business-shape.merge-step-1 .piece-c { transform:translate(-30px,40px) rotate(12deg); } .shape-mode .business-shape.merge-step-1 .piece-d { transform:translate(40px,30px) rotate(-6deg); } .shape-mode .business-shape.merge-step-2 .shape-piece { transition:transform 1s cubic-bezier(.68,-0.55,.27,1.55), border-radius 1s; } .shape-mode .business-shape.merge-step-2 .piece-a { transform:translate(40px,40px) scale(0.92); } .shape-mode .business-shape.merge-step-2 .piece-b { transform:translate(-20px,-20px) scale(0.9); } .shape-mode .business-shape.merge-step-2 .piece-c { transform:translate(10px,10px) scale(0.95); } .shape-mode .business-shape.merge-step-2 .piece-d { transform:translate(-10px,0) scale(0.9); } .shape-mode .business-shape.merge-final .shape-piece { transform:translate(0,0) rotate(0) scale(1) !important; border-radius:40px; } .shape-mode .business-shape.merge-final { animation:shapePulse 3s ease-in-out infinite alternate; } @keyframes shapePulse { 0%{ filter:brightness(1) drop-shadow(0 10px 30px rgba(10,132,255,.35)); } 100%{ filter:brightness(1.12) drop-shadow(0 14px 38px rgba(10,132,255,.48)); } } .section-business.is-seamless { padding-top: clamp(80px,14vh,150px); } .section-business.is-seamless .business-bg { position:absolute; inset:0; overflow:hidden; z-index:0; } .section-business.is-seamless .business-bg { background:#fff; } .section-business.is-seamless .business-bg::before, .section-business.is-seamless .business-bg::after { content:""; position:absolute; inset:0; } /* 背景パターン共通: カスタムプロパティで透明度など調整 */ .section-business.is-seamless[data-bg-pattern] .business-bg { --p-accent:#0A84FF; --p-accent2:#64D2FF; } /* P1: うっすらフェードするソフト円 (球体が流れる雰囲気) */ .section-business.is-seamless[data-bg-pattern="1"] .business-bg::before { background: radial-gradient(circle at calc(10% + var(--bg-shift,0%)) 30%, rgba(10,132,255,0.18), transparent 55%), radial-gradient(circle at calc(40% + var(--bg-shift,0%)) 70%, rgba(100,210,255,0.16), transparent 60%), radial-gradient(circle at calc(75% + var(--bg-shift,0%)) 45%, rgba(10,132,255,0.12), transparent 65%); filter:blur(12px) saturate(140%); transition:background .4s; } .section-business.is-seamless[data-bg-pattern="1"] .business-bg::after { display:none; } /* P2～P10: 球体バリエーション (色味/サイズ/数/ぼかし差異) */ .section-business.is-seamless[data-bg-pattern="1"] .business-bg { --sphere-color-a: rgba(10,132,255,0.55); --sphere-color-b: rgba(100,210,255,0.15); --sphere-size-scale:1; --sphere-blur-scale:1; } .section-business.is-seamless[data-bg-pattern="2"] .business-bg { --sphere-color-a: rgba(10,132,255,0.60); --sphere-color-b: rgba(64,180,255,0.18); --sphere-size-scale:1.05; --sphere-blur-scale:1.1; } .section-business.is-seamless[data-bg-pattern="3"] .business-bg { --sphere-color-a: rgba(10,132,255,0.50); --sphere-color-b: rgba(64,180,255,0.22); --sphere-size-scale:0.95; --sphere-blur-scale:1.2; } .section-business.is-seamless[data-bg-pattern="4"] .business-bg { --sphere-color-a: rgba(10,132,255,0.65); --sphere-color-b: rgba(64,180,255,0.20); --sphere-size-scale:1.15; --sphere-blur-scale:1.25; } .section-business.is-seamless[data-bg-pattern="5"] .business-bg { --sphere-color-a: rgba(10,132,255,0.58); --sphere-color-b: rgba(64,180,255,0.24); --sphere-size-scale:1.08; --sphere-blur-scale:1.3; } .section-business.is-seamless[data-bg-pattern="6"] .business-bg { --sphere-color-a: rgba(10,132,255,0.70); --sphere-color-b: rgba(64,180,255,0.26); --sphere-size-scale:1.22; --sphere-blur-scale:1.35; } .section-business.is-seamless[data-bg-pattern="7"] .business-bg { --sphere-color-a: rgba(10,132,255,0.48); --sphere-color-b: rgba(100,210,255,0.20); --sphere-size-scale:0.9; --sphere-blur-scale:1.1; } .section-business.is-seamless[data-bg-pattern="8"] .business-bg { --sphere-color-a: rgba(10,132,255,0.62); --sphere-color-b: rgba(64,180,255,0.22); --sphere-size-scale:1.12; --sphere-blur-scale:1.15; } .section-business.is-seamless[data-bg-pattern="9"] .business-bg { --sphere-color-a: rgba(10,132,255,0.54); --sphere-color-b: rgba(64,180,255,0.18); --sphere-size-scale:1.0; --sphere-blur-scale:1.4; } .section-business.is-seamless[data-bg-pattern="10"] .business-bg { --sphere-color-a: rgba(10,132,255,0.72); --sphere-color-b: rgba(64,180,255,0.28); --sphere-size-scale:1.28; --sphere-blur-scale:1.5; } .section-business.is-seamless[data-bg-pattern="2"] .business-bg::before { background: radial-gradient(circle at calc(15% + var(--bg-shift,0%)) 25%, rgba(10,132,255,0.22), transparent 58%), radial-gradient(circle at calc(55% + var(--bg-shift,0%)) 65%, rgba(100,210,255,0.20), transparent 62%), radial-gradient(circle at calc(85% + var(--bg-shift,0%)) 45%, rgba(10,132,255,0.14), transparent 68%), radial-gradient(circle at calc(30% + var(--bg-shift,0%)) 50%, rgba(10,132,255,0.10), transparent 70%); filter:blur(14px) saturate(150%); } .section-business.is-seamless[data-bg-pattern="2"] .business-bg::after { display:none; } .section-business.is-seamless[data-bg-pattern="3"] .business-bg::before { background: radial-gradient(circle at calc(8% + var(--bg-shift,0%)) 35%, rgba(10,132,255,0.20), transparent 55%), radial-gradient(circle at calc(32% + var(--bg-shift,0%)) 75%, rgba(64,180,255,0.18), transparent 60%), radial-gradient(circle at calc(58% + var(--bg-shift,0%)) 30%, rgba(10,132,255,0.16), transparent 58%), radial-gradient(circle at calc(82% + var(--bg-shift,0%)) 58%, rgba(100,210,255,0.18), transparent 60%), radial-gradient(circle at calc(50% + var(--bg-shift,0%)) 48%, rgba(10,132,255,0.10), transparent 65%); filter:blur(16px) saturate(150%); } .section-business.is-seamless[data-bg-pattern="3"] .business-bg::after { display:none; } .section-business.is-seamless[data-bg-pattern="4"] .business-bg::before { background: radial-gradient(circle at calc(12% + var(--bg-shift,0%)) 60%, rgba(10,132,255,0.20), transparent 55%), radial-gradient(circle at calc(45% + var(--bg-shift,0%)) 32%, rgba(100,210,255,0.24), transparent 58%), radial-gradient(circle at calc(70% + var(--bg-shift,0%)) 72%, rgba(10,132,255,0.14), transparent 60%); filter:blur(18px) saturate(150%); } .section-business.is-seamless[data-bg-pattern="4"] .business-bg::after { display:none; } .section-business.is-seamless[data-bg-pattern="5"] .business-bg::before { background: radial-gradient(circle at calc(18% + var(--bg-shift,0%)) 40%, rgba(10,132,255,0.24), transparent 55%), radial-gradient(circle at calc(52% + var(--bg-shift,0%)) 60%, rgba(100,210,255,0.20), transparent 58%), radial-gradient(circle at calc(80% + var(--bg-shift,0%)) 50%, rgba(10,132,255,0.18), transparent 60%), radial-gradient(circle at calc(34% + var(--bg-shift,0%)) 78%, rgba(64,180,255,0.16), transparent 62%), radial-gradient(circle at calc(66% + var(--bg-shift,0%)) 28%, rgba(10,132,255,0.10), transparent 60%); filter:blur(20px) saturate(160%); } .section-business.is-seamless[data-bg-pattern="5"] .business-bg::after { display:none; } .section-business.is-seamless[data-bg-pattern="6"] .business-bg::before { background: radial-gradient(circle at calc(10% + var(--bg-shift,0%)) 30%, rgba(10,132,255,0.30), transparent 50%), radial-gradient(circle at calc(46% + var(--bg-shift,0%)) 55%, rgba(100,210,255,0.24), transparent 55%), radial-gradient(circle at calc(78% + var(--bg-shift,0%)) 62%, rgba(10,132,255,0.22), transparent 58%), radial-gradient(circle at calc(28% + var(--bg-shift,0%)) 70%, rgba(64,180,255,0.18), transparent 60%), radial-gradient(circle at calc(60% + var(--bg-shift,0%)) 40%, rgba(10,132,255,0.14), transparent 62%), radial-gradient(circle at calc(90% + var(--bg-shift,0%)) 48%, rgba(100,210,255,0.16), transparent 60%); filter:blur(22px) saturate(170%); } .section-business.is-seamless[data-bg-pattern="6"] .business-bg::after { display:none; } .section-business.is-seamless[data-bg-pattern="7"] .business-bg::before { background: radial-gradient(circle at calc(14% + var(--bg-shift,0%)) 42%, rgba(10,132,255,0.22), transparent 55%), radial-gradient(circle at calc(40% + var(--bg-shift,0%)) 70%, rgba(64,180,255,0.20), transparent 60%), radial-gradient(circle at calc(66% + var(--bg-shift,0%)) 34%, rgba(10,132,255,0.20), transparent 60%), radial-gradient(circle at calc(88% + var(--bg-shift,0%)) 58%, rgba(100,210,255,0.18), transparent 60%); filter:blur(14px) saturate(150%); } .section-business.is-seamless[data-bg-pattern="7"] .business-bg::after { display:none; } .section-business.is-seamless[data-bg-pattern="8"] .business-bg::before { background: radial-gradient(circle at calc(12% + var(--bg-shift,0%)) 32%, rgba(10,132,255,0.24), transparent 54%), radial-gradient(circle at calc(52% + var(--bg-shift,0%)) 68%, rgba(64,180,255,0.22), transparent 60%), radial-gradient(circle at calc(74% + var(--bg-shift,0%)) 40%, rgba(10,132,255,0.20), transparent 60%), radial-gradient(circle at calc(34% + var(--bg-shift,0%)) 52%, rgba(100,210,255,0.18), transparent 60%), radial-gradient(circle at calc(90% + var(--bg-shift,0%)) 58%, rgba(10,132,255,0.14), transparent 62%); filter:blur(18px) saturate(160%); } .section-business.is-seamless[data-bg-pattern="8"] .business-bg::after { display:none; } .section-business.is-seamless[data-bg-pattern="9"] .business-bg::before { background: radial-gradient(circle at calc(8% + var(--bg-shift,0%)) 60%, rgba(10,132,255,0.26), transparent 55%), radial-gradient(circle at calc(48% + var(--bg-shift,0%)) 30%, rgba(64,180,255,0.20), transparent 55%), radial-gradient(circle at calc(72% + var(--bg-shift,0%)) 70%, rgba(10,132,255,0.18), transparent 58%), radial-gradient(circle at calc(28% + var(--bg-shift,0%)) 42%, rgba(100,210,255,0.16), transparent 58%), radial-gradient(circle at calc(90% + var(--bg-shift,0%)) 48%, rgba(10,132,255,0.12), transparent 60%); filter:blur(20px) saturate(165%); } .section-business.is-seamless[data-bg-pattern="9"] .business-bg::after { display:none; } .section-business.is-seamless[data-bg-pattern="10"] .business-bg::before { background: radial-gradient(circle at calc(10% + var(--bg-shift,0%)) 30%, rgba(10,132,255,0.30), transparent 50%), radial-gradient(circle at calc(38% + var(--bg-shift,0%)) 60%, rgba(64,180,255,0.26), transparent 56%), radial-gradient(circle at calc(68% + var(--bg-shift,0%)) 40%, rgba(10,132,255,0.22), transparent 58%), radial-gradient(circle at calc(88% + var(--bg-shift,0%)) 70%, rgba(100,210,255,0.20), transparent 60%), radial-gradient(circle at calc(58% + var(--bg-shift,0%)) 48%, rgba(10,132,255,0.16), transparent 60%); filter:blur(24px) saturate(170%); } .section-business.is-seamless[data-bg-pattern="10"] .business-bg::after { display:none; } /* P11: 浮遊スクエア (淡い角丸四角) */ .section-business.is-seamless[data-bg-pattern="11"] .business-bg { --poly-color-a:rgba(10,132,255,0.22); --poly-color-b:rgba(100,210,255,0.18); } .section-business.is-seamless[data-bg-pattern="11"] .business-bg::before { background: none; } .section-business.is-seamless[data-bg-pattern="11"] .business-bg::after { display:none; } /* P12: 六角形タイルグラデ (マスク) */ .section-business.is-seamless[data-bg-pattern="12"] .business-bg { --hex-line:rgba(140,140,140,0.18); } .section-business.is-seamless[data-bg-pattern="12"] .business-bg::before { background:none; opacity:0; } .section-business.is-seamless[data-bg-pattern="12"] .business-bg::after { background:none; opacity:0; } .section-business.is-seamless[data-bg-pattern="12"] .bg-hex .hx { background:linear-gradient(145deg, rgba(150,150,150,0.35), rgba(255,255,255,0)); border:1px solid rgba(180,180,180,0.55); filter:drop-shadow(0 8px 22px rgba(0,0,0,0.18)); } /* P2: 幾何学グリッド (六角形風) ─ 擬似タイルのマスク */ .section-business.is-seamless[data-bg-pattern="2"] .business-bg::before { background: repeating-linear-gradient(60deg, rgba(10,132,255,0.10) 0 2px, transparent 2px 90px), repeating-linear-gradient(-60deg, rgba(10,132,255,0.10) 0 2px, transparent 2px 90px), repeating-linear-gradient(0deg, rgba(10,132,255,0.06) 0 2px, transparent 2px 60px); mix-blend-mode:normal; opacity:.55; mask:linear-gradient(90deg,#000 70%,#0000); } .section-business.is-seamless[data-bg-pattern="2"] .business-bg::after { background:radial-gradient(circle at calc(50% + var(--bg-shift,0%)) 50%, rgba(100,210,255,0.18), transparent 70%); filter:blur(40px); opacity:.5; } /* P3: ノード接続風 (点+ライン) */ .section-business.is-seamless[data-bg-pattern="3"] .business-bg::before { background: radial-gradient(circle at calc(15% + var(--bg-shift,0%)) 25%, rgba(10,132,255,0.5) 0 3px, transparent 4px), radial-gradient(circle at calc(30% + var(--bg-shift,0%)) 60%, rgba(100,210,255,0.5) 0 3px, transparent 4px), radial-gradient(circle at calc(60% + var(--bg-shift,0%)) 40%, rgba(10,132,255,0.5) 0 3px, transparent 4px), radial-gradient(circle at calc(80% + var(--bg-shift,0%)) 70%, rgba(100,210,255,0.5) 0 3px, transparent 4px); background-repeat:no-repeat; } .section-business.is-seamless[data-bg-pattern="3"] .business-bg::after { background: linear-gradient( calc(8deg + var(--bg-shift,0%) * 0.2), rgba(10,132,255,0.25) 0 1px, transparent 1px), linear-gradient( calc(-12deg + var(--bg-shift,0%) * 0.2), rgba(100,210,255,0.25) 0 1px, transparent 1px); background-size:160px 160px, 180px 180px; opacity:.4; } /* P4: ソフト波レイヤー (縦方向固定・横スクロールで位相変化) */ .section-business.is-seamless[data-bg-pattern="4"] .business-bg::before { background: repeating-linear-gradient( to bottom, rgba(10,132,255,0.10) 0 2px, transparent 2px 54px ); opacity:.55; } .section-business.is-seamless[data-bg-pattern="4"] .business-bg::after { background: linear-gradient(120deg, rgba(10,132,255,0.12), rgba(100,210,255,0.0) 60%), radial-gradient(circle at calc(30% + var(--bg-shift,0%)) 60%, rgba(10,132,255,0.16), transparent 65%); mix-blend-mode:normal; filter:blur(22px); opacity:.45; } /* P5: フェードグリッド+粒子 */ .section-business.is-seamless[data-bg-pattern="5"] .business-bg::before { background: repeating-linear-gradient(90deg, rgba(10,132,255,0.09) 0 1px, transparent 1px 80px), repeating-linear-gradient(0deg, rgba(10,132,255,0.09) 0 1px, transparent 1px 80px); mask:linear-gradient(180deg,#000, #0000); opacity:.5; } .section-business.is-seamless[data-bg-pattern="5"] .business-bg::after { background: radial-gradient(circle at calc(20% + var(--bg-shift,0%)) 35%, rgba(10,132,255,0.22), transparent 60%), radial-gradient(circle at calc(55% + var(--bg-shift,0%)) 65%, rgba(100,210,255,0.18), transparent 62%), radial-gradient(circle at calc(85% + var(--bg-shift,0%)) 45%, rgba(10,132,255,0.18), transparent 62%); filter:blur(30px); mix-blend-mode:normal; opacity:.55; } .section-business.is-seamless .business-sticky { position:sticky; top:0; } .section-business.is-seamless .business-panels { position:relative; z-index:1; padding-top: clamp(30px,6vh,70px); } .section-business.is-seamless .business-panel { padding: 0 clamp(40px,6vw,120px); } .section-business.is-seamless .business-card { background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; gap: clamp(40px,6vw,80px); margin-top:0; } .section-business.is-seamless .business-card::after { display:none; } .section-business.is-seamless .business-panel__media { box-shadow:0 18px 60px -20px rgba(10,132,255,0.38),0 8px 26px -10px rgba(0,0,0,0.30); background:linear-gradient(135deg,#0a84ff15,#64d2ff10); } .section-business.is-seamless .business-panel__title { position:relative; } .section-business.is-seamless .business-panel__title::after { content:""; position:absolute; left:0; bottom:-14px; height:4px; border-radius:3px; background:linear-gradient(90deg,#0A84FF,#64D2FF); width:0; transition:width .7s cubic-bezier(.6,.05,.2,1); } .section-business.is-seamless .business-panel__title.is-active::after { width: clamp(140px,20vw,240px); } .section-business.is-seamless .business-panel__text { position:relative; } .section-business.is-seamless .business-panel__text::before { content:""; position:absolute; left:-22px; top:6px; bottom:6px; width:4px; background:linear-gradient(#0A84FF,#64D2FF); border-radius:3px; filter:drop-shadow(0 4px 10px rgba(10,132,255,0.4)); } .section-business.is-seamless #business[data-card-style] .business-panel__title { background:none; -webkit-background-clip:initial; background-clip:initial; color:#20303a; padding:0; border:none; } .section-business.is-seamless #business[data-card-style="6"] .business-panel__title { color:#fff; } .section-business.is-seamless #business[data-card-style="6"] .business-panel__text { color:#d4f0ff; } /* シームレス間仕切り: パネル間の細い垂直線 */ /* 縦線仕切り削除 (不要) */ .section-business.is-seamless .business-panel + .business-panel::before { display:none; } /* レスポンシブ調整 */ @media (max-width:960px){ .section-business.is-seamless .business-panel { padding:0 clamp(24px,5vw,60px); } .section-business.is-seamless .business-card { flex-direction:column; gap:34px; } .section-business.is-seamless .business-panel__media { max-width:100%; } .section-business.is-seamless .business-panel__text::before { left:-14px; } } @media (max-width:580px){ .section-business.is-seamless .business-panel { padding:0 clamp(18px,5vw,42px); } .section-business.is-seamless .business-card { gap:30px; } .section-business.is-seamless .business-panel__text::before { display:none; } } /* ===== 動的スクロールパターン (JS生成) ===== */ .bg-spheres, .bg-geo { position:absolute; inset:0; overflow:hidden; pointer-events:none; } .bg-spheres { mix-blend-mode:normal; } .bg-sphere { position:absolute; top:0; left:0; border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(10,132,255,0.55),rgba(100,210,255,0.15) 60%,rgba(10,132,255,0) 75%); will-change:transform,width,height,filter,opacity; transition:opacity .4s linear; } .bg-squares, .bg-hex { position:absolute; inset:0; pointer-events:none; overflow:hidden; } .bg-squares .sq { position:absolute; top:0; left:0; background:linear-gradient(135deg,rgba(10,132,255,0.35),rgba(100,210,255,0.15)); box-shadow:0 8px 24px -10px rgba(10,132,255,0.45),0 2px 8px -3px rgba(0,0,0,0.2); backdrop-filter:blur(4px) saturate(140%); -webkit-backdrop-filter:blur(4px) saturate(140%); border:1px solid rgba(255,255,255,0.5); mix-blend-mode:normal; will-change:transform,width,height,opacity; transition:opacity .4s linear; } /* 六角形背景（共通・グレー基調） */ .bg-hex .hx { position:absolute; top:0; left:0; width:120px; height:120px; background:linear-gradient(145deg, var(--hx-color, rgba(150,150,150,0.35)), rgba(255,255,255,0)); clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%); filter:drop-shadow(0 8px 22px rgba(0,0,0,0.18)); will-change:transform,width,height,opacity; transition:opacity .4s linear; border:1px solid rgba(180,180,180,0.55); } .bg-geo { position:absolute; inset:0; display:block; } .bg-geo .geo-seg { position:absolute; top:50%; left:50%; width:var(--seg-len,60vmin); height:var(--seg-thick,4px); background:linear-gradient(90deg,rgba(255,255,255,0.9),var(--seg-color, #0A84FF)); border-radius:4px; filter:drop-shadow(0 4px 12px rgba(10,132,255,0.35)); will-change:transform,opacity; transition:opacity .35s linear; } .section-business.is-seamless[data-bg-pattern="2"] .bg-geo { mix-blend-mode:normal; } .section-business.is-seamless[data-bg-pattern="1"] .bg-geo { display:none; } .section-business__inner { position:relative; width:100%; } .business-sticky { position:sticky; top:0; overflow:visible; width:100%; height:100vh; display:flex; flex-direction:column; } .business-panels { flex:1 1 auto; display:flex; transition:transform .6s cubic-bezier(.6,.05,.2,1); align-items:flex-start; justify-content:flex-start; padding:clamp(10px,4vh,46px) 0 40px; box-sizing:border-box; } .business-panel { flex:0 0 auto; padding: 8px clamp(34px,5.2vw,90px) 24px; box-sizing:border-box; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:40px; } .business-card { position:relative; display:flex; flex-direction:row; align-items:center; gap:40px; padding:34px clamp(28px,3.6vw,58px) 46px; border-radius:30px; background:rgba(255,255,255,0.72); box-shadow:0 10px 40px -18px rgba(10,132,255,0.28),0 4px 14px -6px rgba(0,0,0,0.16); backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%); } .business-card::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 1px rgba(255,255,255,0.5) inset; } /* カード上下余白: 下固定余白→上方向軽い余白に変更し下貼り付き感を軽減 */ .business-card { margin: clamp(4px,1.2vh,18px) 0 0; } /* 見出し下の余白を明示 */ .section-business .section-heading { margin:0 0 clamp(14px,3.8vh,54px); } .business-panel__media { flex:0 0 clamp(340px,42%,600px); margin:0; } .business-panel__content { flex:1 1 auto; max-width:720px; } /* 交互レイアウト解除 */ .business-panel__title { font-size:clamp(26px,3vw,40px); margin:0; font-weight:600; letter-spacing:.05em; color:#20303a; } .business-panel__title { font-size:clamp(26px,3vw,40px); margin:0 0 clamp(18px,2.4vw,38px); font-weight:600; letter-spacing:.05em; color:#20303a; line-height:1.15; } .business-panel__text { font-size:15px; line-height:1.9; letter-spacing:.05em; color:#3d4a53; max-width:780px; } .business-panel__media { margin:0 0 10px; width:100%; max-width:880px; aspect-ratio: 16 / 9; position:relative; overflow:hidden; border-radius:22px; background:#0a84ff0f; box-shadow:0 14px 48px -16px rgba(10,132,255,0.35),0 4px 18px -6px rgba(0,0,0,0.22); backdrop-filter:blur(4px) saturate(140%); } .business-panel__media img { width:100%; height:100%; object-fit:cover; display:block; filter:contrast(108%) saturate(110%); transition:transform 1.8s ease, filter .8s ease; } .business-panel__media::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(10,132,255,0.18),rgba(100,210,255,0.10) 45%,rgba(255,255,255,0) 70%); mix-blend-mode:overlay; pointer-events:none; } .business-panel__media:hover img { transform:scale(1.06); filter:contrast(112%) saturate(118%); } /* スクロール用スペーサー (#business 内末尾) */ #business .business-scroll-spacer { width:100%; pointer-events:none; } /* === Business / News 出現アニメーション (About と同様のフェード＋スライド) === */ .biz-anim, .news-anim { opacity:0; transform:translateY(28px); filter:blur(10px); transition:opacity .9s cubic-bezier(.68,-0.55,.27,1.55), transform .9s cubic-bezier(.68,-0.55,.27,1.55), filter .9s; } .biz-anim.is-visible, .news-anim.is-visible { opacity:1; transform:translateY(0); filter:blur(0); } /* 多少短い要素向け微調整 */ .biz-anim[data-fast], .news-anim[data-fast] { transition-duration:.65s; } /* ============================= Recruit Section ============================= */ .section-recruit { position:relative; min-height:80vh; display:flex; align-items:center; justify-content:center; padding: clamp(90px,18vh,160px) 0 clamp(120px,20vh,200px); color:#fff; font-family:'Noto Sans JP',sans-serif; text-align:center; overflow:hidden; } .section-recruit__bg { position:absolute; inset:0; background: linear-gradient(180deg,rgba(4,12,20,0.4),rgba(4,12,20,0.75)), url("../images/recruit/recruit-01.jpg") center/cover no-repeat fixed; } .section-recruit__inner { position:relative; width:100%; max-width:980px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap: clamp(34px,6vh,64px); padding:0 clamp(18px,5vw,56px); box-sizing:border-box; } /* Recruit heading: remove decorative frame */ .recruit-heading-box { position:relative; padding:0 0 34px; border:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } .recruit-heading-box::before, .recruit-heading-box::after { content:none; } /* Recruit 見出しは他セクションと統一: section-heading__title / __subtitle を上書き調整 */ #recruit .section-heading__title { color:#fff; letter-spacing:.05em; } #recruit .section-heading__subtitle { color:#fff; } /* Recruit は共通 .heading-divider アニメーションを使用 */ .recruit-lead { font-size:clamp(18px,1.6vw,26px); letter-spacing:.12em; line-height:1.75; margin:0; text-shadow:0 3px 18px rgba(0,0,0,0.55); } .recruit-cta { display:inline-block; padding:14px 36px; border:1px solid #fff; border-radius:6px; color:#fff; text-decoration:none; font-size:14px; letter-spacing:.1em; font-weight:500; transition:background .55s, color .55s, box-shadow .55s; background:rgba(255,255,255,0.06); backdrop-filter:blur(6px) saturate(140%); -webkit-backdrop-filter:blur(6px) saturate(140%); } .recruit-cta:hover, .recruit-cta:focus-visible { background:linear-gradient(90deg,#0A84FF,#64D2FF); color:#fff; box-shadow:0 6px 22px -8px rgba(10,132,255,0.55); } @media (max-width:640px){ .recruit-heading-box { padding:0 0 28px; } .recruit-lead { font-size:15px; } .recruit-cta { padding:12px 28px; } } /* ============================= Footer / Company Info ============================= */ .site-footer { background:#0b1620; color:#dce6ed; font-family:'Noto Sans JP',sans-serif; padding: clamp(80px,14vh,140px) 0 clamp(60px,10vh,120px); position:relative; overflow:hidden; } .site-footer__inner { width:100%; max-width:980px; margin:0 auto; position:relative; z-index:2; padding:0 clamp(18px,5vw,56px); box-sizing:border-box; } .site-footer__title { font-size:clamp(24px,2.6vw,40px); line-height:1.18; margin:0 0 40px; padding-bottom:6px; letter-spacing:.12em; font-weight:600; background:linear-gradient(90deg,#64D2FF,#0A84FF); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; } .site-footer__layout { display:flex; flex-wrap:wrap; gap:40px 60px; align-items:flex-start; } .company-info { max-width:720px; margin:0 auto; } .footer-map { max-width:720px; } .site-footer__col--info .company-info, .site-footer__col--map .footer-map { width:100%; max-width:100%; } .site-footer__col { flex:1 1 420px; min-width:320px; width:auto; } .site-footer__col--info { max-width:560px; width:auto; } .site-footer__col--map { position:relative; flex:1 1 420px; width:auto; } @media (min-width:961px){ .site-footer__inner { max-width:1200px; } .site-footer__layout { flex-wrap:nowrap; align-items:flex-start; } .site-footer__col { flex:1 1 50%; min-width:0; } .site-footer__col--info { max-width:none; } .site-footer__col--map { flex:1 1 50%; } } .footer-map { position:relative; width:100%; aspect-ratio:16/10; border-radius:8px; overflow:hidden; box-shadow:0 6px 28px -10px rgba(0,0,0,0.55); } .footer-map iframe { position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.1) contrast(1.05) brightness(.95); } .footer-map__link { position:absolute; inset:0; } @media (max-width:840px){ .site-footer__layout { flex-direction:column; } .footer-map { aspect-ratio:16/11; } } .company-info { margin:0 0 50px; padding:0; } .company-info__row { display:flex; flex-wrap:wrap; gap:14px 30px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.12); } .company-info__row:first-child { border-top:1px solid rgba(255,255,255,0.12); } .company-info dt { flex:0 0 120px; font-size:13px; letter-spacing:.15em; font-weight:600; color:#8fb6cc; } .company-info dd { flex:1 1 auto; margin:0; font-size:14px; letter-spacing:.06em; line-height:1.7; } .site-footer__copy { display:block; font-size:12px; letter-spacing:.14em; color:#7fa2b6; } @media (max-width:640px){ .company-info dt { flex:0 0 90px; font-size:12px; } .company-info dd { font-size:13px; } .site-footer__layout { flex-direction:column; } .site-footer__col, .site-footer__col--info, .site-footer__col--map { flex:1 1 100%; width:100%; min-width:0; } } @media (min-width:641px) and (max-width:960px){ /* 2列入らず折り返した場合でも各列を全幅に */ .site-footer__col { flex:1 1 100%; width:100%; min-width:0; } .site-footer__col--info { max-width:100%; } .site-footer__col--map { max-width:100%; } } /* Scroll driven card motion */ .business-item { will-change:transform; } .business-item[data-motion] { transition:transform .6s cubic-bezier(.19,1,.22,1), box-shadow .6s; } .business-item.is-in-view { box-shadow:0 20px 50px -18px rgba(10,132,255,.25),0 10px 28px -14px rgba(32,48,58,.28); } @media (prefers-reduced-motion: reduce){ .business-item[data-motion] { transition:none; } .business-dyn-bg::before, .business-dyn-bg::after { animation:none; } } /* === Dynamic BG variants (dbg 1-5) === */ #business[data-dbg="1"] .business-dyn-bg::before { animation-duration:40s; } #business[data-dbg="1"] .business-dyn-bg::after { animation-duration:55s; } #business[data-dbg="2"] .business-dyn-bg::before { background:radial-gradient(circle at 20% 40%,rgba(100,210,255,.45),rgba(100,210,255,0) 55%), radial-gradient(circle at 80% 60%,rgba(10,132,255,.35),rgba(10,132,255,0) 55%); animation-duration:26s; filter:blur(70px) saturate(190%); } #business[data-dbg="2"] .business-dyn-bg::after { opacity:.3; animation-duration:38s; } #business[data-dbg="3"] .business-dyn-bg::before { background:conic-gradient(from 0deg at 50% 50%, rgba(10,132,255,.4), rgba(100,210,255,0) 260deg); mix-blend-mode:screen; animation-duration:50s; } #business[data-dbg="3"] .business-dyn-bg::after { background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.2),rgba(255,255,255,0) 70%); filter:blur(120px); opacity:.25; } #business[data-dbg="4"] .business-dyn-bg::before { background:repeating-radial-gradient(circle at 50% 50%, rgba(10,132,255,.23) 0 14%, rgba(10,132,255,0) 14% 28%); animation:bizPulseRing 18s linear infinite; filter:blur(90px); } #business[data-dbg="4"] .business-dyn-bg::after { display:none; } #business[data-dbg="5"] .business-dyn-bg::before { background:linear-gradient(120deg,rgba(10,132,255,.55),rgba(100,210,255,.55)), repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0 3%, rgba(255,255,255,0) 3% 6%); mix-blend-mode:overlay; animation-duration:70s; filter:blur(110px); } #business[data-dbg="5"] .business-dyn-bg::after { background:linear-gradient(300deg,rgba(255,255,255,.2),rgba(255,255,255,0)); animation-duration:80s; } @keyframes bizPulseRing { to { transform:translate(-50%,-50%) rotate(360deg); } } /* === Motion pattern variants (page flip etc.) === */ #business[data-motion-pattern="2"] .business-item { transform-origin: left center; } #business[data-motion-pattern="2"] .business-item.is-in-view { animation:bizSkewIn .8s cubic-bezier(.68,-0.55,.27,1.55) both; } @keyframes bizSkewIn { from { opacity:0; transform:translateX(-60px) skewX(-12deg) scale(.9); } to { opacity:1; transform:translateX(0) skewX(0deg) scale(1); } } #business[data-motion-pattern="3"] .business-item { perspective:1200px; } #business[data-motion-pattern="3"] .business-item.is-in-view { animation:bizFlipIn .9s cubic-bezier(.19,1,.22,1) both; } @keyframes bizFlipIn { from { opacity:0; transform:rotateY(-70deg) translateY(40px) scale(.92); } to { opacity:1; transform:rotateY(0deg) translateY(0) scale(1); } } #business[data-motion-pattern="4"] .business-item { transform-style:preserve-3d; } #business[data-motion-pattern="4"] .business-item.is-in-view { animation:bizCardLift 1s cubic-bezier(.68,-0.55,.27,1.55) both; } @keyframes bizCardLift { from { opacity:0; transform:translateY(60px) rotateX(25deg) scale(.9); } to { opacity:1; transform:translateY(0) rotateX(0) scale(1); } } #business[data-motion-pattern="5"] .business-item.is-in-view { animation:bizMaskRise .85s cubic-bezier(.68,-0.55,.27,1.55) both; position:relative; } @keyframes bizMaskRise { 0% { clip-path:inset(100% 0 0 0); opacity:0; transform:translateY(40px); } 100% { clip-path:inset(0 0 0 0); opacity:1; transform:translateY(0); } } #business[data-motion-pattern="6"] .business-item.is-in-view { animation:bizRipple 1.1s cubic-bezier(.19,1,.22,1) both; } @keyframes bizRipple { 0% { opacity:0; transform:scale(.85); filter:blur(6px); } 50% { opacity:1; filter:blur(0); } 100% { transform:scale(1); filter:blur(0); } } #business[data-motion-pattern="7"] .business-item.is-in-view { animation:bizSlideStack .9s cubic-bezier(.68,-0.55,.27,1.55) both; } @keyframes bizSlideStack { 0% { opacity:0; transform:translate(-80px,40px) rotate(-6deg) scale(.9); } 100% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } } #business[data-motion-pattern="8"] .business-item.is-in-view { animation:bizTiltPop .85s cubic-bezier(.68,-0.55,.27,1.55) both; } @keyframes bizTiltPop { 0% { opacity:0; transform:translateY(60px) rotate(-8deg) scale(.92); } 70% { transform:translateY(-8px) rotate(2deg) scale(1.03); } 100% { opacity:1; transform:translateY(0) rotate(0deg) scale(1); } } #business[data-motion-pattern="9"] .business-item.is-in-view { animation:bizFlipPage 1s cubic-bezier(.68,-0.55,.27,1.55) both; transform-origin:left center; } @keyframes bizFlipPage { 0% { opacity:0; transform:rotateY(-120deg) translateX(-40px); } 60% { opacity:1; } 100% { transform:rotateY(0deg) translateX(0); } } #business[data-motion-pattern="10"] .business-item.is-in-view { animation:bizFoldIn 1s cubic-bezier(.68,-0.55,.27,1.55) both; transform-origin:top center; } #business[data-motion-pattern="11"] .business-list { position:relative; min-height:70vh; } #business[data-motion-pattern="11"] .business-item { position:sticky; top:calc(50vh - 260px); /* center approx */ transform-origin:left center; backface-visibility:hidden; box-shadow:none; } #business[data-motion-pattern="11"] .business-item + .business-item { margin-top:50vh; } #business[data-motion-pattern="11"] .business-item::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,132,255,0.08),rgba(100,210,255,0.05)); mix-blend-mode:overlay; opacity:0; pointer-events:none; transition:opacity .6s; } #business[data-motion-pattern="11"] .business-item { border-radius:18px; } #business[data-motion-pattern="11"] .business-item:is(.is-in-view) { box-shadow:0 30px 60px -20px rgba(10,132,255,.25),0 18px 40px -18px rgba(32,48,58,.35); } #business[data-motion-pattern="11"] .business-item.is-in-view { animation:none; } #business[data-motion-pattern="11"] .business-item.page-flip-active { animation:bizFixedFlip 1s cubic-bezier(.68,-0.55,.27,1.55) forwards; } @keyframes bizFixedFlip { 0% { transform:perspective(1600px) rotateY(-180deg); opacity:0; filter:blur(8px); } 55% { opacity:1; } 100% { transform:perspective(1600px) rotateY(0deg); opacity:1; filter:blur(0); } } #business[data-motion-pattern="11"] .business-item:not(.page-flip-active) { transform:perspective(1600px) rotateY(-170deg); opacity:0; } @keyframes bizFoldIn { 0% { opacity:0; transform:rotateX(-90deg) scale(.9); } 100% { opacity:1; transform:rotateX(0deg) scale(1); } } /* Controls styling for new groups */ .business-motion-controls, .business-dynbg-controls { display:flex; align-items:center; gap:18px; margin:-6px 0 36px; flex-wrap:wrap; } .business-motion-controls__btns, .business-dynbg-controls__btns { display:flex; flex-wrap:wrap; gap:8px; } .biz-motion-btn, .biz-dbg-btn { cursor:pointer; border:1px solid #cfd8e3; background:#fff; padding:4px 10px; min-width:34px; font-size:11px; letter-spacing:.05em; border-radius:4px; transition:.25s; font-weight:600; color:#4a5660; } .biz-motion-btn:hover, .biz-motion-btn:focus-visible, .biz-dbg-btn:hover, .biz-dbg-btn:focus-visible { background:#0A84FF; color:#fff; border-color:#0A84FF; } .biz-motion-btn.is-active, .biz-dbg-btn.is-active { background:#20303a; color:#fff; border-color:#20303a; } .business-pattern-controls { display:flex; align-items:center; gap:18px; margin:10px 0 40px; flex-wrap:wrap; } .business-pattern-controls__label { font-size:12px; letter-spacing:.2em; color:#69747c; font-weight:600; } .business-pattern-controls__btns { display:flex; flex-wrap:wrap; gap:8px; } .biz-pattern-btn { cursor:pointer; border:1px solid #cfd8e3; background:#fff; padding:6px 12px; min-width:38px; font-size:12px; letter-spacing:.05em; border-radius:4px; transition:.25s; font-weight:600; color:#4a5660; } .biz-pattern-btn:hover, .biz-pattern-btn:focus-visible { background:#0A84FF; color:#fff; border-color:#0A84FF; } .biz-pattern-btn.is-active { background:#20303a; color:#fff; border-color:#20303a; } .business-bg-controls { display:flex; align-items:center; gap:18px; margin:-10px 0 50px; flex-wrap:wrap; } .business-bg-controls__btns { display:flex; flex-wrap:wrap; gap:8px; } .biz-bg-btn { cursor:pointer; border:1px solid #d5dfe8; background:#fff; padding:4px 10px; min-width:34px; font-size:11px; letter-spacing:.05em; border-radius:30px; transition:.25s; font-weight:600; color:#46525b; position:relative; overflow:hidden; } .biz-bg-btn::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,#0A84FF,#64D2FF); opacity:0; transition:opacity .35s; } .biz-bg-btn:hover::before, .biz-bg-btn:focus-visible::before { opacity:.2; } .biz-bg-btn.is-active { background:#0A84FF; color:#fff; border-color:#0A84FF; } /* Background pattern container modifications */ #business { --biz-bg-accent:#0A84FF; } #business[data-bg="1"] { background:#f8fafc; } #business[data-bg="2"] { background:linear-gradient(180deg,#f2f7fb,#ffffff); } #business[data-bg="3"] { background:radial-gradient(circle at 20% 25%,#ffffff 0,#eef4fa 55%,#e2ecf5 100%); } #business[data-bg="4"] { background:linear-gradient(135deg,#0A84FF 0%,#64D2FF 100%); color:#fff; } #business[data-bg="4"] .business-item__title { color:#fff; } #business[data-bg="5"] { background:repeating-linear-gradient(45deg,#f5f9fc 0 22px,#e9f1f7 22px 44px); } #business[data-bg="6"] { background:linear-gradient(120deg,#e8f2fb,#e8f2fb 35%,#ffffff 35%,#ffffff 100%); } #business[data-bg="7"] { background:#101b23; color:#d0d9e0; } #business[data-bg="7"] .business-item__title { color:#fff; } #business[data-bg="7"] .business-item__text { color:#b9c6cf; } #business[data-bg="8"] { background:radial-gradient(circle at 50% 50%,rgba(10,132,255,.18),rgba(10,132,255,0) 60%), #0d1820; color:#d6e0e6; } #business[data-bg="8"] .business-item__title { color:#fff; } #business[data-bg="9"] { background:linear-gradient(180deg,#ffffff 0,#f2f7fb 45%,#e4eef6 100%); } #business[data-bg="10"] { background:linear-gradient(145deg,#0A84FF,#20303a 70%); color:#fff; } #business[data-bg="10"] .business-item__title { color:#fff; } /* Pattern-specific overlay ornaments */ #business[data-bg="2"]::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%,rgba(10,132,255,.2),transparent 60%); pointer-events:none; mix-blend-mode:multiply; } #business[data-bg="3"]::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 80%,rgba(100,210,255,.25),transparent 70%); pointer-events:none; } #business[data-bg="4"]::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,0)); mix-blend-mode:overlay; } #business[data-bg="5"]::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.4),rgba(255,255,255,0)); pointer-events:none; } #business[data-bg="6"]::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(10,132,255,.08) 0 2px, transparent 2px 6px); opacity:.35; pointer-events:none; } #business[data-bg="7"]::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%,rgba(10,132,255,.4),rgba(10,132,255,0) 60%); mix-blend-mode:screen; pointer-events:none; } #business[data-bg="8"]::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.08),transparent 60%), radial-gradient(circle at 70% 70%,rgba(255,255,255,.08),transparent 60%); mix-blend-mode:overlay; pointer-events:none; } #business[data-bg="9"]::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(10,132,255,.12),rgba(10,132,255,0) 65%); pointer-events:none; } #business[data-bg="10"]::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0)); pointer-events:none; } .business-list { display:grid; gap:50px; } .business-list.pattern-fade { animation:bizPatternFade .45s ease both; } @keyframes bizPatternFade { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:translateY(0);} } .business-item { display:grid; gap:26px; align-items:start; position:relative; counter-increment:biz; } .business-item::before { content: counter(biz, decimal-leading-zero); position:absolute; top:-10px; left:-10px; background:linear-gradient(135deg,#0A84FF,#64D2FF); color:#fff; font-size:12px; font-weight:600; letter-spacing:.1em; padding:6px 12px 6px 14px; border-radius:6px; box-shadow:0 6px 18px -6px rgba(10,132,255,.55); } .business-item::after { content:""; position:absolute; inset:0; border:1px solid rgba(10,132,255,.12); border-radius:16px; pointer-events:none; opacity:0; transition:opacity .5s; } .business-item:hover::after { opacity:1; } .business-item__media { position:relative; overflow:hidden; border-radius:10px; aspect-ratio: 16/9; background:#d9e2ec; } .business-item__media::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 25%, rgba(0,0,0,.35)); z-index:1; opacity:.55; mix-blend-mode:multiply; pointer-events:none; transition:opacity .6s; } .business-item__media img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); transition:transform 1.6s cubic-bezier(.19,1,.22,1); } .business-item:hover .business-item__media img { transform:scale(1.08); } .business-item:hover .business-item__media::before { opacity:.4; } .business-item__title { font-size:clamp(20px,1.9vw,30px); margin:0 0 14px; letter-spacing:.08em; font-weight:600; color:#20303a; } .business-item__text { margin:0; line-height:1.85; font-size:15px; letter-spacing:.04em; color:#33424c; } /* Reveal animation */ .biz-reveal { opacity:0; transform:translateY(40px) scale(.98); filter:blur(6px); transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1), filter 1s; } .biz-reveal.is-visible { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } .biz-reveal:nth-child(2){ transition-delay:.08s; } .biz-reveal:nth-child(3){ transition-delay:.16s; } /* Pattern transition soft layout change */ [data-business-list]{ transition:gap .5s ease; } [data-business-list] .business-item { transition:background .5s, box-shadow .5s; } [data-business-list] .business-item:hover { background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.55)); box-shadow:0 12px 40px -18px rgba(32,48,58,.3); } /* Slight variant styling for some patterns */ [data-business-list][data-pattern="7"] .business-item { background:#101b23; padding:34px 34px 40px; border-radius:18px; } [data-business-list][data-pattern="7"] .business-item__title { color:#fff; } [data-business-list][data-pattern="7"] .business-item__text { color:#cdd7de; } [data-business-list][data-pattern="7"] .business-item::after { border-color:rgba(255,255,255,.15); } [data-business-list][data-pattern="7"] .business-item::before { box-shadow:0 8px 26px -10px rgba(0,0,0,.6); } [data-business-list][data-pattern="10"] .business-item { background:linear-gradient(145deg,#fff,#f2f7fb); padding:34px 38px 46px; border-radius:26px; } [data-business-list][data-pattern="10"] .business-item::after { border-radius:26px; } /* Pattern base variations via [data-pattern] attribute */ [data-business-list][data-pattern="1"] .business-item { grid-template-columns: minmax(0,1fr); } [data-business-list][data-pattern="2"] .business-item { grid-template-columns: minmax(0,480px) minmax(0,1fr); } [data-business-list][data-pattern="2"] .business-item__media { aspect-ratio:4/3; } [data-business-list][data-pattern="3"] { gap:110px; } [data-business-list][data-pattern="3"] .business-item { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); } [data-business-list][data-pattern="3"] .business-item__media { aspect-ratio:3/2; } [data-business-list][data-pattern="4"] .business-item:nth-child(even) { grid-template-columns: minmax(0,1fr) minmax(0,480px); } [data-business-list][data-pattern="4"] .business-item:nth-child(even) .business-item__media { order:2; } [data-business-list][data-pattern="5"] .business-item { grid-template-columns: minmax(0,380px) minmax(0,1fr); align-items:center; } [data-business-list][data-pattern="5"] .business-item__media { aspect-ratio:1/1; } [data-business-list][data-pattern="6"] { grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); } [data-business-list][data-pattern="6"] .business-item { grid-template-columns:1fr; } [data-business-list][data-pattern="6"] .business-item__media { aspect-ratio:4/3; } [data-business-list][data-pattern="7"] .business-item { grid-template-columns: minmax(0,600px); } [data-business-list][data-pattern="7"] .business-item__media { aspect-ratio:21/9; } [data-business-list][data-pattern="8"] .business-item { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } [data-business-list][data-pattern="8"] .business-item__media { aspect-ratio:3/2; } [data-business-list][data-pattern="8"] .business-item__body { padding:10px 6% 0; } [data-business-list][data-pattern="9"] { gap:70px; } [data-business-list][data-pattern="9"] .business-item { grid-template-columns: minmax(0,420px) minmax(0,1fr); } [data-business-list][data-pattern="9"] .business-item__media { aspect-ratio:5/4; } [data-business-list][data-pattern="10"] .business-item { grid-template-columns: minmax(0,1fr); } [data-business-list][data-pattern="10"] .business-item__media { aspect-ratio:16/7; } [data-business-list][data-pattern="10"] .business-item__title { font-size:clamp(26px,2.4vw,38px); } @media (max-width:860px){ [data-business-list][data-pattern="2"] .business-item, [data-business-list][data-pattern="4"] .business-item, [data-business-list][data-pattern="5"] .business-item, [data-business-list][data-pattern="8"] .business-item, [data-business-list][data-pattern="9"] .business-item { grid-template-columns:1fr; } .business-item__media { order:0 !important; } [data-business-list] { gap:60px !important; } } @media (max-width:960px){ .business-panels { padding:24px 0 34px; align-items:flex-start; } .business-panel { padding: 12px clamp(20px,5vw,40px) 26px; flex-direction:column; gap:18px; } .business-card { flex-direction:column; gap:28px; padding:28px clamp(22px,5vw,40px) 38px; margin-top:24px; } .business-panel__media { width:100%; flex:0 0 auto; border-radius:18px; max-width:880px; } .business-panel__content { max-width:100%; } .business-panel__title { font-size:clamp(24px,6vw,34px); } .business-panel__text { font-size:14px; } } /* ===== Business 終了直後の余白圧縮 ===== */ /* Business の水平スクロール直後に News が続くケースで、間延びする縦ギャップを軽減 */ .section-business + .section-news { padding-top: clamp(40px,8vh,90px); } /* Business 内部の下余白をやや圧縮 (最後のパネル直後の空き減) */ .section-business .business-panels { padding-bottom: clamp(8px,2.2vh,24px); } @media (max-width:960px){ .section-business .business-panels { padding-bottom: 24px; } } @media (max-width:580px){ .business-panels { padding:20px 0 30px; } .business-panel { padding: 10px 16px 34px; gap:16px; } .business-card { padding:24px 20px 34px; gap:24px; margin-top:18px; } .business-panel__title { font-size:clamp(22px,7.4vw,30px); } .business-panel__text { font-size:13px; line-height:1.75; } .business-panel__media { border-radius:16px; aspect-ratio: 16 / 10; } } /* ============================= Business Style Switcher ============================= */ .business-style-switcher { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); display:flex; flex-wrap:wrap; gap:8px; padding:10px 14px; background:rgba(255,255,255,0.70); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); border-radius:14px; box-shadow:0 6px 24px -10px rgba(0,0,0,0.30),0 0 0 1px rgba(255,255,255,0.55) inset; z-index:420; } .business-style-btn { all:unset; cursor:pointer; width:36px; height:36px; display:grid; place-items:center; font-size:13px; font-weight:600; font-family:'Noto Sans JP',sans-serif; color:#195178; letter-spacing:.04em; background:linear-gradient(135deg,#ffffff,#dff1ff); border-radius:10px; position:relative; box-shadow:0 3px 8px -2px rgba(10,132,255,0.45),0 0 0 1px rgba(10,132,255,0.25) inset; transition:background .45s, color .45s, transform .45s; } .business-style-btn:hover { background:linear-gradient(135deg,#fff,#e8f7ff); color:#0a84ff; } .business-style-btn[data-active] { background:linear-gradient(135deg,#0A84FF,#64D2FF); color:#fff; box-shadow:0 4px 14px -2px rgba(10,132,255,0.55),0 0 0 1px rgba(255,255,255,0.6) inset; } .business-style-btn:focus-visible { outline:2px solid #0A84FF; outline-offset:2px; } /* カードスタイルスイッチャー */ .business-card-style-switcher { position:fixed; right:18px; bottom:22px; display:flex; flex-direction:column; gap:6px; padding:12px 10px; background:rgba(255,255,255,0.78); backdrop-filter:blur(18px) saturate(190%); -webkit-backdrop-filter:blur(18px) saturate(190%); border-radius:16px; box-shadow:0 8px 28px -12px rgba(0,0,0,0.32),0 0 0 1px rgba(255,255,255,0.55) inset; z-index:430; } .business-card-style-btn { all:unset; width:54px; height:34px; cursor:pointer; font-size:11px; font-weight:600; font-family:'Noto Sans JP',sans-serif; color:#14405c; letter-spacing:.05em; text-align:center; background:linear-gradient(135deg,#ffffff,#e8f6ff); border-radius:8px; box-shadow:0 3px 8px -2px rgba(10,132,255,0.4),0 0 0 1px rgba(10,132,255,0.25) inset; transition:background .45s,color .45s,transform .45s; } .business-card-style-btn:hover { background:linear-gradient(135deg,#ffffff,#f1faff); color:#0A84FF; } .business-card-style-btn[data-active] { background:linear-gradient(135deg,#0A84FF,#64D2FF); color:#fff; box-shadow:0 4px 14px -2px rgba(10,132,255,0.55),0 0 0 1px rgba(255,255,255,0.6) inset; } .business-card-style-btn:focus-visible { outline:2px solid #0A84FF; outline-offset:2px; } /* 背景パターン切替スイッチャー */ .business-pattern-switcher { position:fixed; left:18px; bottom:22px; display:flex; flex-direction:column; gap:6px; padding:12px 10px; background:rgba(255,255,255,0.78); backdrop-filter:blur(18px) saturate(190%); -webkit-backdrop-filter:blur(18px) saturate(190%); border-radius:16px; box-shadow:0 8px 28px -12px rgba(0,0,0,0.32),0 0 0 1px rgba(255,255,255,0.55) inset; z-index:430; } .business-pattern-btn { all:unset; width:54px; height:34px; cursor:pointer; font-size:11px; font-weight:600; font-family:'Noto Sans JP',sans-serif; color:#14405c; letter-spacing:.05em; text-align:center; background:linear-gradient(135deg,#ffffff,#e8f6ff); border-radius:8px; box-shadow:0 3px 8px -2px rgba(10,132,255,0.4),0 0 0 1px rgba(10,132,255,0.25) inset; transition:background .45s,color .45s,transform .45s; } .business-pattern-btn:hover { background:linear-gradient(135deg,#ffffff,#f1faff); color:#0A84FF; } .business-pattern-btn[data-active] { background:linear-gradient(135deg,#0A84FF,#64D2FF); color:#fff; box-shadow:0 4px 14px -2px rgba(10,132,255,0.55),0 0 0 1px rgba(255,255,255,0.6) inset; } .business-pattern-btn:focus-visible { outline:2px solid #0A84FF; outline-offset:2px; } /* カード10パターン */ #business[data-card-style="1"] .business-card { background:rgba(255,255,255,0.72); } #business[data-card-style="2"] .business-card { background:linear-gradient(125deg,#ffffff,#f2faff 60%,#e8f4ff); } #business[data-card-style="3"] .business-card { background:#ffffff; box-shadow:0 4px 14px -6px rgba(0,0,0,0.12),0 0 0 1px rgba(10,132,255,0.20); } #business[data-card-style="4"] .business-card { background:radial-gradient(circle at 30% 20%,rgba(10,132,255,0.18),rgba(100,210,255,0) 70%), #ffffffcc; } #business[data-card-style="5"] .business-card { background:linear-gradient(140deg,rgba(255,255,255,0.65),rgba(255,255,255,0.38)); backdrop-filter:blur(24px) saturate(200%); } #business[data-card-style="6"] .business-card { background:#041725; color:#e5f7ff; box-shadow:0 20px 44px -18px rgba(0,0,0,0.65); } #business[data-card-style="6"] .business-panel__title { color:#fff; } #business[data-card-style="7"] .business-card { background:#ffffff; border:2px solid #0A84FF; box-shadow:0 6px 24px -10px rgba(10,132,255,0.4); } #business[data-card-style="8"] .business-card { background:#fff; position:relative; } #business[data-card-style="8"] .business-card::before { content:""; position:absolute; inset:0; border-radius:inherit; background:repeating-linear-gradient(45deg,rgba(10,132,255,0.08) 0 12px,transparent 12px 24px); mix-blend-mode:overlay; } #business[data-card-style="9"] .business-card { background:linear-gradient(145deg,#ffffff,#f7fbff); box-shadow:0 18px 50px -22px rgba(10,132,255,0.32),0 6px 22px -10px rgba(0,0,0,0.22); } #business[data-card-style="10"] .business-card { background:#ffffff; box-shadow:0 0 0 1px rgba(10,132,255,0.30),0 0 0 6px rgba(10,132,255,0.08); } #business[data-card-style="10"] .business-card::after { box-shadow:0 0 0 1px rgba(255,255,255,0.6) inset,0 0 0 1px rgba(10,132,255,0.30); } /* === カードスタイル別 タイトル装飾変化 === */ /* 基本下線ベースを前提に追加/上書き */ #business[data-card-style] .business-panel__title { position:relative; } #business[data-card-style] .business-panel__title::after { content:""; position:absolute; left:0; bottom:-10px; height:3px; background:linear-gradient(90deg,#0A84FF,#64D2FF); border-radius:2px; width:0; transition:width .6s cubic-bezier(.6,.05,.2,1), background .6s; box-shadow:0 0 0 1px rgba(255,255,255,0.6) inset,0 4px 14px -6px rgba(10,132,255,0.55); } #business[data-card-style] .business-panel__title.is-active::after { width:140px; } /* 1: 標準 (そのまま) */ #business[data-card-style="1"] .business-panel__title::after { background:linear-gradient(90deg,#0A84FF,#64D2FF); } /* 2: マーカー(下地) */ #business[data-card-style="2"] .business-panel__title { display:inline-block; padding:4px 10px 6px; background:linear-gradient(90deg,rgba(10,132,255,0.18),rgba(100,210,255,0.10)); border-radius:10px; } #business[data-card-style="2"] .business-panel__title::after { bottom:-6px; height:4px; background:linear-gradient(90deg,#64D2FF,#0A84FF); } /* 3: 下線極細 + 前アイコン */ #business[data-card-style="3"] .business-panel__title { padding-left:42px; } #business[data-card-style="3"] .business-panel__title::before { content:"◆"; position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:18px; color:#0A84FF; text-shadow:0 2px 6px rgba(10,132,255,0.45); } #business[data-card-style="3"] .business-panel__title::after { height:2px; background:linear-gradient(90deg,#0A84FF,#64D2FF); } /* 4: 二重ライン */ #business[data-card-style="4"] .business-panel__title::after { height:5px; background:linear-gradient(90deg,#0A84FF,#64D2FF); box-shadow:none; } #business[data-card-style="4"] .business-panel__title.is-active::after { width:150px; } #business[data-card-style="4"] .business-panel__title::before { content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:#0A84FF; transition:width .6s cubic-bezier(.6,.05,.2,1); } #business[data-card-style="4"] .business-panel__title.is-active::before { width:160px; } /* 5: グロー縁取り */ #business[data-card-style="5"] .business-panel__title { text-shadow:0 0 0 rgba(0,0,0,0),0 0 18px rgba(100,210,255,0); transition:text-shadow .6s; } #business[data-card-style="5"] .business-panel__title.is-active { text-shadow:0 0 10px rgba(10,132,255,0.45),0 0 22px rgba(100,210,255,0.35); } #business[data-card-style="5"] .business-panel__title::after { background:linear-gradient(90deg,#64D2FF,#0A84FF,#64D2FF); height:3px; } /* 6: ダークカード用 反転 */ #business[data-card-style="6"] .business-panel__title { color:#fff; } #business[data-card-style="6"] .business-panel__title::after { background:linear-gradient(90deg,#fff,#64D2FF); box-shadow:0 0 0 1px rgba(10,132,255,0.5) inset,0 0 14px -4px rgba(10,132,255,0.8); } /* 7: 左縦棒 + 下線短め */ #business[data-card-style="7"] .business-panel__title { padding-left:18px; } #business[data-card-style="7"] .business-panel__title::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:5px; border-radius:4px; background:linear-gradient(#0A84FF,#64D2FF); } #business[data-card-style="7"] .business-panel__title::after { width:0; } #business[data-card-style="7"] .business-panel__title.is-active::after { width:120px; } /* 8: 背景ハイライトライン */ #business[data-card-style="8"] .business-panel__title { background:linear-gradient(110deg,rgba(10,132,255,0.18),rgba(100,210,255,0.10) 60%,rgba(10,132,255,0.18)); padding:6px 14px 10px; border-radius:16px; } #business[data-card-style="8"] .business-panel__title::after { bottom:-6px; height:4px; background:linear-gradient(90deg,#0A84FF,#64D2FF); box-shadow:none; } /* 9: アウトライン */ #business[data-card-style="9"] .business-panel__title { padding:8px 18px 12px; border:2px solid #0A84FF; border-radius:14px; } #business[data-card-style="9"] .business-panel__title::after { bottom:-8px; height:3px; background:#0A84FF; box-shadow:none; } /* 10: カプセル + マーカー風下線 */ #business[data-card-style="10"] .business-panel__title { padding:10px 20px 14px; background:linear-gradient(90deg,#0A84FF,#64D2FF); color:#fff; border-radius:40px; } #business[data-card-style="10"] .business-panel__title::after { background:linear-gradient(90deg,#64D2FF,#fff); height:2px; bottom:-10px; box-shadow:none; } #business[data-card-style="10"] .business-panel__title.is-active::after { width:190px; } /* 追加: タイトルと本文の視覚的分離強化 (下線とは別軸) */ .business-panel__title + .business-panel__text { --gap-line:0; } /* パターン別 余白 & 装飾 差別化強化 */ #business[data-card-style="2"] .business-panel__title { margin-bottom:clamp(22px,2.8vw,44px); } #business[data-card-style="3"] .business-panel__title { margin-bottom:clamp(20px,2.6vw,42px); } #business[data-card-style="4"] .business-panel__title { margin-bottom:clamp(24px,3vw,48px); } #business[data-card-style="5"] .business-panel__title { margin-bottom:clamp(22px,2.6vw,46px); background:linear-gradient(90deg,#0A84FF 0%,#64D2FF 55%,#9be4ff); -webkit-background-clip:text; background-clip:text; color:transparent; } #business[data-card-style="6"] .business-panel__title { margin-bottom:clamp(22px,2.5vw,44px); } #business[data-card-style="6"] .business-panel__text { color:#c6e9ff; } #business[data-card-style="7"] .business-panel__title { margin-bottom:clamp(18px,2.2vw,40px); } #business[data-card-style="8"] .business-panel__title { margin-bottom:clamp(26px,3vw,50px); } #business[data-card-style="9"] .business-panel__title { margin-bottom:clamp(24px,2.8vw,48px); } #business[data-card-style="10"] .business-panel__title { margin-bottom:clamp(26px,3vw,52px); } /* 角バッジ (パターン9のみ) */ #business[data-card-style="9"] .business-card::before { content:"SERVICE"; position:absolute; top:0; right:0; font-size:10px; font-weight:600; letter-spacing:.08em; padding:4px 10px 6px; background:linear-gradient(135deg,#0A84FF,#64D2FF); color:#fff; border-bottom-left-radius:12px; border-top-right-radius:30px; box-shadow:0 4px 12px -4px rgba(10,132,255,0.55); } /* 装飾強化: パターン3 追加細ライン (既存◆維持) */ #business[data-card-style="3"] .business-panel__title::after { box-shadow:none; } #business[data-card-style="3"] .business-panel__title.is-active::after { background:linear-gradient(90deg,#64D2FF,#0A84FF); } /* 装飾強化: パターン4 二重ライン濃淡 */ #business[data-card-style="4"] .business-panel__title::after { background:linear-gradient(90deg,#0A84FF,#64D2FF); } /* 装飾強化: パターン5 グロー時の下線色変化 */ #business[data-card-style="5"] .business-panel__title.is-active::after { background:linear-gradient(90deg,#0A84FF,#64D2FF,#0A84FF); } /* 装飾強化: パターン6 ダーク用下線コントラスト */ #business[data-card-style="6"] .business-panel__title::after { background:linear-gradient(90deg,#fff,#64D2FF); } /* 装飾強化: パターン8 ハイライト短め始動 */ #business[data-card-style="8"] .business-panel__title::after { background:linear-gradient(90deg,#0A84FF,#64D2FF); } /* 装飾強化: パターン10 カプセル下線短縮始動 */ #business[data-card-style="10"] .business-panel__title::after { width:0; } #business[data-card-style="10"] .business-panel__title.is-active::after { width:200px; } /* 背景 / タイトル強調 パターン (1-10) */ #business { background:var(--biz-bg,#fff); } #business[data-style="1"] { --biz-bg:#fff; } #business[data-style="1"] .business-panel__title::after { width:140px; } #business[data-style="2"] { --biz-bg:linear-gradient(140deg,#f3f9ff,#ffffff 50%,#f2faff); } #business[data-style="2"] .business-panel__title { color:#1d3645; } #business[data-style="2"] .business-panel__title::after { width:150px; background:linear-gradient(90deg,#64D2FF,#0A84FF); } #business[data-style="3"] { --biz-bg:linear-gradient(115deg,#ffffff 0 52%,#e6f5ff 52%); } #business[data-style="3"] .business-panel__title::after { width:170px; background:linear-gradient(90deg,#0A84FF,#64D2FF 60%,#9be4ff); } #business[data-style="4"] { --biz-bg:#ffffff; background-image:radial-gradient(circle at 4px 4px,rgba(10,132,255,0.16) 0 2px,transparent 3px); background-size:34px 34px; } #business[data-style="4"] .business-panel__title::after { width:130px; } #business[data-style="5"] .business-panel { background:rgba(255,255,255,0.65); border:1px solid rgba(10,132,255,0.18); border-radius:26px; box-shadow:0 10px 34px -16px rgba(10,132,255,0.26),0 4px 12px -6px rgba(0,0,0,0.14); } #business[data-style="5"] .business-panel__title::after { width:150px; } #business[data-style="6"] .business-panel__title { padding:10px 18px 14px; background:linear-gradient(90deg,#0A84FF,#64D2FF); color:#fff; border-radius:14px; box-shadow:0 6px 24px -10px rgba(10,132,255,0.55); } #business[data-style="6"] .business-panel__title::after { display:none; } #business[data-style="7"] .business-panel__content { position:relative; } #business[data-style="7"] .business-panel__content::before { content:""; position:absolute; left:-16px; top:4px; bottom:4px; width:5px; border-radius:4px; background:linear-gradient(#0A84FF,#64D2FF); box-shadow:0 0 0 1px rgba(255,255,255,0.6) inset; } #business[data-style="7"] .business-panel__title::after { width:120px; } #business[data-style="8"] { position:relative; } #business[data-style="8"]::after { content:""; position:absolute; left:0; right:0; bottom:0; height:120px; pointer-events:none; background:linear-gradient(0deg,#ffffff,rgba(255,255,255,0)); } #business[data-style="8"] .business-panel__title::after { width:160px; } #business[data-style="9"] { --biz-bg:rgba(255,255,255,0.55); backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%); } #business[data-style="9"] .business-panel__title { color:#1a2f3a; } #business[data-style="9"] .business-panel__title::after { width:150px; } #business[data-style="10"] .business-panel__title::after { height:2px; width:190px; background:linear-gradient(90deg,#64D2FF,#0A84FF); box-shadow:none; } /* === Hex Variant (S/M/L/Mix/Lite) 基本サイズ倍率はJSで width/height 設定時に --hx-scale を参照 === */ [data-hex-variant] .bg-hex .hx { --hx-scale:1; } [data-hex-variant="1"] .bg-hex .hx { --hx-scale:0.55; } [data-hex-variant="2"] .bg-hex .hx { --hx-scale:0.85; } [data-hex-variant="3"] .bg-hex .hx { --hx-scale:1.25; } [data-hex-variant="6"] .bg-hex .hx { --hx-scale:1.65; } [data-hex-variant="4"] .bg-hex .hx { --hx-scale:1; } [data-hex-variant="5"] .bg-hex .hx { --hx-scale:0.95; opacity:0.65; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.12)); } /* ============================= Center Split Layout (画像と説明を中央で50%分割) 大きな画面幅のみ適用。モバイル/タブレットは既存の縦積みを維持。 ============================= */ @media (min-width: 961px){ /* 画像サイズは既存定義を維持しつつ、カード内の縦中央揃えのみ強化 */ .section-business.is-seamless .business-card { display:flex; align-items:center; } /* 不要な余白詰めは行わず、既存の padding / radius / shadow を保持 */ /* テキスト側を縦中央 */ .section-business.is-seamless .business-panel__content { display:flex; flex-direction:column; justify-content:center; } /* 位置のみ軽微調整: 画像とテキスト間のギャップを縮めたい場合は gap 調整 */ .section-business.is-seamless .business-card { gap: clamp(34px,4vw,70px); } /* 中央分割風 (オプション): 画像右端を概ね画面中央に寄せたい場合 ↓ のコメントを解除 .section-business.is-seamless .business-panel__media { margin-right:auto; } .section-business.is-seamless .business-panel__content { margin-left:auto; } */ } /* === Center Split (画像サイズ保持) === */ @media (min-width: 1100px){ /* パネル左右余白を詰めて全幅扱い */ .section-business.is-seamless .business-panel { padding-left:0; padding-right:0; } /* カードの外側余白/影は維持、内部を中央分割用に調整 */ .section-business.is-seamless .business-card { position:relative; gap:0; padding:0; background:transparent; box-shadow:none; border-radius:0; } /* 左 50vw コンテナ: 右端=中央線。画像自身は自然サイズ (max 100%) */ .section-business.is-seamless .business-panel__media { flex:0 0 50vw; max-width:50vw; display:flex; justify-content:flex-end; align-items:center; padding:0 clamp(12px,1.2vw,24px) 0 0; margin:0; border-radius:0; box-shadow:none; background:transparent; aspect-ratio:auto; } .section-business.is-seamless .business-panel__media img { width:auto; max-width:100%; height:auto; object-fit:contain; border-radius:22px; box-shadow:0 14px 48px -16px rgba(10,132,255,0.35),0 4px 18px -6px rgba(0,0,0,0.22); } /* === 画像背景/線を除去 (リクエスト) === */ .section-business.is-seamless .business-panel__media { background:transparent !important; box-shadow:none !important; } .section-business.is-seamless .business-panel__media::after { display:none !important; } .section-business.is-seamless .business-panel__media img { box-shadow:none !important; background:transparent !important; } /* 画像を左半分内でさらに縮小 (右寄せ) */ .section-business.is-seamless .business-panel__media img { /* 調整しやすいようカスタムプロパティを利用 */ --biz-media-scale:65%; width:var(--biz-media-scale); max-width: clamp(260px, 32vw, 520px); /* 画面幅に応じた上限 */ height:auto; } /* 右 50vw コンテナ: 左端=中央線 */ .section-business.is-seamless .business-panel__content { flex:0 0 50vw; max-width:50vw; padding:clamp(40px,4vw,80px) clamp(50px,4.5vw,90px) clamp(46px,4.4vw,90px) clamp(30px,3vw,70px); box-sizing:border-box; } /* 見出し余白微調整 */ .section-business.is-seamless .business-panel__title { margin-bottom:clamp(20px,2vw,36px); } /* 中央ライン (必要なら表示) */ .section-business.is-seamless .business-card::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:linear-gradient(#ced6db,#b7c3ca); opacity:.65; pointer-events:none; } } /* ============================= News Section ============================= */ .section-news { background:#fff; padding: clamp(80px,14vh,160px) 0 clamp(120px,18vh,200px); font-family:'Noto Sans JP',sans-serif; color:#333; } .section-news__inner { width:100%; max-width:980px; margin:0 auto; padding:0 clamp(18px,5vw,56px); box-sizing:border-box; } .section-news .section-heading { margin:0 0 48px; } .news-list { list-style:none; margin:0; padding:0; border-top:1px solid #d9dee2; } .news-item { border-bottom:1px solid #d9dee2; } .news-item a { display:flex; gap:46px; align-items:flex-start; text-decoration:none; padding:18px clamp(10px,1.2vw,18px); color:#1d2f38; font-size:14px; line-height:1.6; letter-spacing:.05em; transition:background .35s, color .35s; } .news-item a:hover, .news-item a:focus-visible { background:#f4f8fb; color:#0A84FF; } .news-date { flex:0 0 140px; font-family:monospace; font-size:13px; letter-spacing:.08em; color:#4a5a63; line-height:1.6; } .news-title { flex:1 1 auto; display:block; } @media (max-width:640px){ .news-item a { flex-direction:column; gap:4px; padding:16px 8px; } .news-date { flex:0 0 auto; font-size:12px; } }