@charset "UTF-8";
/* ============================================================
 * 合同会社センターライト コンセプト(事業思想型・フル幅・ハイモーション)
 * page-cl-concept.php 用 / v5.36.104
 * ============================================================ */

.cl-concept-page{
    --c-navy:#071327; --c-navy2:#0a1f44; --c-blue:#1f5eff; --c-sky:#eef5ff;
    --c-text:#101827; --c-muted:#5f6b7a; --c-line:#e8edf4; --c-gold:#e0b54a;
    color:var(--c-text);
}
/* 全幅の帯(100vw)を main の幅で切らないため、はみ出し防止は body 側で */
body.cl-fullwide-page{ overflow-x:hidden; }

/* 上部のコンセプト帯(CONCEPT/コンセプト)もフル幅に揃える */
.cl-concept-page .clw-page-head{
    width:100vw!important; max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important; margin-right:calc(50% - 50vw)!important;
}

/* ---------- フル幅バンド ---------- */
.cl-cpt-band{
    position:relative; width:100vw;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    box-sizing:border-box; overflow:hidden;
}
.cl-cpt-inner{
    position:relative; z-index:2;
    max-width:1160px; margin:0 auto;
    padding-left:24px; padding-right:24px; box-sizing:border-box;
}

/* ---------- 出現アニメ ---------- */
/* 下層(4領域/メッセージ/クロージング/CTA)はスクロールで出現(JS有効時のみ隠す) */
.cl-cpt-js [data-reveal]{
    opacity:0; transform:translateY(38px);
    transition:opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--d,0ms); will-change:opacity,transform;
}
.cl-cpt-js [data-reveal].is-in{ opacity:1; transform:none; }

/* ヒーロー内はページ読込時に必ず表示(JSやIOに依存しない) */
.cl-cpt-js .cl-cpt-hero [data-reveal]{
    animation:clCptUp 1s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--d,0ms);
}
@keyframes clCptUp{ from{ opacity:0; transform:translateY(38px); } to{ opacity:1; transform:translateY(0); } }

/* タグライン:マスクからの立ち上げ(読込時に必ず再生・必ず表示で終わる) */
.cl-cpt-line{ display:block; overflow:hidden; padding-bottom:.08em; }
.cl-cpt-mask{
    display:block;
    animation:clMaskUp 1.05s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--d,0ms);
}
@keyframes clMaskUp{ from{ transform:translateY(116%); } to{ transform:translateY(0); } }

@media (prefers-reduced-motion:reduce){
    .cl-cpt-js [data-reveal]{ opacity:1!important; transform:none!important; transition:none; }
    .cl-cpt-js .cl-cpt-hero [data-reveal], .cl-cpt-mask{ animation:none!important; opacity:1!important; transform:none!important; }
    .cl-cpt-orb, .cl-cpt-mesh, .cl-cpt-marquee-track, .cl-cpt-scrollcue-bar::after, .cl-cpt-closing-text em{ animation:none!important; }
}

/* ---------- 背景演出(メッシュ/オーブ/グリッド/ノイズ) ---------- */
.cl-cpt-hero-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.cl-cpt-mesh{
    position:absolute; inset:-25%;
    background:
        radial-gradient(38% 48% at 22% 30%, rgba(31,94,255,.55), transparent 60%),
        radial-gradient(34% 44% at 80% 24%, rgba(42,140,255,.5), transparent 60%),
        radial-gradient(46% 52% at 62% 82%, rgba(224,181,74,.24), transparent 60%);
    filter:blur(24px); animation:clMesh 22s ease-in-out infinite alternate;
}
@keyframes clMesh{ 0%{transform:rotate(0deg) scale(1)} 100%{transform:rotate(9deg) scale(1.12)} }
.cl-cpt-orb{ position:absolute; border-radius:50%; filter:blur(76px); will-change:transform; }
.cl-cpt-orb1{ width:480px; height:480px; background:#1f5eff; opacity:.5; top:-140px; left:-70px; animation:clOrbA 16s ease-in-out infinite; }
.cl-cpt-orb2{ width:400px; height:400px; background:#2a8cff; opacity:.42; bottom:-160px; right:-50px; animation:clOrbB 20s ease-in-out infinite; }
.cl-cpt-orb3{ width:320px; height:320px; background:#e0b54a; opacity:.2; top:40%; right:30%; animation:clOrbC 18s ease-in-out infinite; }
@keyframes clOrbA{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(46px,34px)} }
@keyframes clOrbB{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-44px,-32px)} }
@keyframes clOrbC{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(24px,-22px) scale(1.14)} }
.cl-cpt-grid{
    position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:52px 52px;
    -webkit-mask-image:radial-gradient(circle at 50% 38%,#000,transparent 72%);
    mask-image:radial-gradient(circle at 50% 38%,#000,transparent 72%);
}
.cl-cpt-noise{
    position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- ヒーロー ---------- */
.cl-cpt-hero{
    background:linear-gradient(160deg,#0a1a35 0%,var(--c-navy) 56%,var(--c-navy2) 100%);
    color:#fff; text-align:center;
    min-height:clamp(560px,88vh,920px);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:clamp(96px,14vw,160px) 0 clamp(80px,10vw,120px);
}
.cl-cpt-hero-inner{ max-width:940px; }
.cl-cpt-hero-eyebrow{
    display:inline-block; font-size:clamp(11px,1.8vw,13px); font-weight:800; letter-spacing:.26em;
    color:rgba(255,255,255,.7); margin-bottom:clamp(26px,4vw,40px);
    padding:9px 20px; border:1px solid rgba(255,255,255,.22); border-radius:999px;
    background:rgba(255,255,255,.04); backdrop-filter:blur(4px);
}
.cl-cpt-tagline{
    font-size:clamp(46px,10vw,104px); font-weight:800; line-height:1.12;
    letter-spacing:.07em; margin:0 0 clamp(36px,5vw,58px); text-shadow:0 8px 50px rgba(0,0,0,.3);
}
.cl-cpt-hero-narr{ margin:0 0 clamp(26px,4vw,40px); }
.cl-cpt-hero-narr p{ font-size:clamp(15px,2.6vw,19px); line-height:2.05; font-weight:600; color:rgba(255,255,255,.92); margin:0 0 .4em; }
.cl-cpt-hero-close{ position:relative; margin:0; padding-top:clamp(22px,4vw,30px); font-size:clamp(14px,2.3vw,16px); line-height:2.05; color:rgba(255,255,255,.74); }
.cl-cpt-hero-close::before{ content:""; display:block; width:46px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--c-blue),var(--c-gold)); margin:0 auto clamp(22px,4vw,30px); }
.cl-cpt-scrollcue{
    position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:2;
    color:rgba(255,255,255,.55); font-size:10px; letter-spacing:.3em; font-weight:700;
    display:flex; flex-direction:column; align-items:center; gap:10px;
}
.cl-cpt-scrollcue-bar{ width:1px; height:44px; background:rgba(255,255,255,.2); position:relative; overflow:hidden; }
.cl-cpt-scrollcue-bar::after{ content:""; position:absolute; top:0; left:0; width:1px; height:44px; background:linear-gradient(#fff,transparent); animation:clScroll 1.9s ease-in-out infinite; }
@keyframes clScroll{ 0%{transform:translateY(-100%)} 100%{transform:translateY(100%)} }

/* ---------- キーワードマーキー ---------- */
.cl-cpt-marquee{ position:relative; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); box-sizing:border-box; background:#060f22; padding:20px 0; overflow:hidden; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); }
.cl-cpt-marquee-track{ display:inline-flex; align-items:center; white-space:nowrap; animation:clMarquee 30s linear infinite; }
@keyframes clMarquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.cl-cpt-marquee-item{ color:#fff; font-weight:800; letter-spacing:.22em; font-size:clamp(13px,1.8vw,16px); padding:0 12px; opacity:.9; }
.cl-cpt-marquee-dot{ color:var(--c-gold); font-size:11px; padding:0 4px; }

/* ---------- 4領域 ---------- */
.cl-cpt-domain-band{ background:#fff; padding:clamp(60px,9vw,120px) 0; }
.cl-cpt-domain-band.is-alt{ background:linear-gradient(180deg,#f5f9ff 0%,#eef5ff 100%); }
.cl-cpt-domain{ max-width:1320px; display:flex; align-items:center; gap:clamp(40px,7vw,96px); }
.cl-cpt-domain.is-reverse{ flex-direction:row-reverse; }

.cl-cpt-visual{
    flex:0 0 50%; max-width:50%; aspect-ratio:5/4; border-radius:28px;
    position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
    color:#fff; box-shadow:0 26px 60px rgba(7,19,39,.20);
    transition:box-shadow .4s, transform .5s cubic-bezier(.22,1,.36,1);
    transform-style:preserve-3d; will-change:transform;
}
.cl-cpt-visual:hover{ box-shadow:0 38px 80px rgba(7,19,39,.30); }
.cl-cpt-visual svg{ width:40%; max-width:150px; height:auto; position:relative; z-index:2; opacity:.96; }
.cl-cpt-num{ position:absolute; top:20px; left:28px; z-index:2; font-size:clamp(50px,8vw,94px); font-weight:800; line-height:1; color:rgba(255,255,255,.16); }
.cl-cpt-visual::after{ content:""; position:absolute; inset:0; z-index:1; background-image:radial-gradient(circle at 78% 18%,rgba(255,255,255,.22),transparent 56%); }
.cl-cpt-visual-shine{ position:absolute; top:0; left:-70%; width:55%; height:100%; z-index:3; background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-18deg); transition:left .8s cubic-bezier(.22,1,.36,1); }
.cl-cpt-visual:hover .cl-cpt-visual-shine{ left:130%; }
.cl-cpt-visual[data-accent="infra"]{ background:linear-gradient(140deg,#0a1a35,#16386a); }
.cl-cpt-visual[data-accent="web"]{ background:linear-gradient(140deg,#143a8a,#1f5eff); }
.cl-cpt-visual[data-accent="design"]{ background:linear-gradient(140deg,#8a6a16,#e6bd57); }
.cl-cpt-visual[data-accent="expand"]{ background:linear-gradient(140deg,#0c4f4a,#15a18f); }

.cl-cpt-text{ flex:1 1 auto; }
.cl-cpt-en{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.3em; color:var(--c-blue); margin-bottom:12px; }
.cl-cpt-title{ font-size:clamp(27px,5vw,42px); font-weight:800; color:var(--c-navy); margin:0 0 8px; letter-spacing:.03em; }
.cl-cpt-key{ font-size:clamp(17px,3vw,22px); font-weight:700; color:var(--c-gold); margin:0 0 18px; letter-spacing:.08em; }
.cl-cpt-desc{ font-size:clamp(14px,2.4vw,16.5px); line-height:2.05; color:var(--c-muted); margin:0; max-width:48ch; }

/* ---------- メッセージ ---------- */
.cl-cpt-message{ background:#fff; padding:clamp(64px,10vw,124px) 0; }
.cl-cpt-message-inner{ max-width:880px; text-align:center; }
.cl-cpt-message-eyebrow{ display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.3em; color:var(--c-blue); margin-bottom:clamp(24px,4vw,38px); position:relative; padding-bottom:14px; }
.cl-cpt-message-eyebrow::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:34px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--c-blue),var(--c-gold)); }
.cl-cpt-message-body p{ font-size:clamp(14.5px,2.4vw,17px); line-height:2.2; color:var(--c-text); margin:0 0 1.6em; font-weight:500; }
.cl-cpt-message-body p:last-child{ margin-bottom:0; }
.cl-cpt-message-em{ font-weight:700!important; color:var(--c-navy)!important; font-size:clamp(15.5px,2.7vw,19px)!important; line-height:2.1!important; margin-top:clamp(24px,4vw,36px)!important; }

/* ---------- クロージング ---------- */
.cl-cpt-closing{ background:linear-gradient(160deg,#0a1a35 0%,var(--c-navy) 70%); color:#fff; text-align:center; padding:clamp(88px,14vw,160px) 0; }
.cl-cpt-closing-text{ margin:0; font-size:clamp(28px,6vw,58px); font-weight:800; line-height:1.5; letter-spacing:.09em; text-shadow:0 6px 40px rgba(0,0,0,.3); }
.cl-cpt-closing-text em{
    font-style:normal;
    background:linear-gradient(100deg,#7fb0ff 0%,#ffffff 35%,#ffe19e 60%,#7fb0ff 100%);
    background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:clShine 6s linear infinite;
}
@keyframes clShine{ to{ background-position:200% center; } }

/* ---------- CTA ---------- */
.cl-concept-cta{ background:linear-gradient(160deg,#0a1a35 0%,#071327 100%); padding:clamp(52px,8vw,84px) 0 clamp(60px,9vw,96px); }
.cl-concept-cta .cl-cpt-inner{ max-width:780px; text-align:center; }
.cl-concept-cta-h2{ font-size:clamp(21px,3.8vw,30px); font-weight:800; color:#fff; margin:0 0 16px; letter-spacing:.03em; }
.cl-concept-cta-text{ font-size:clamp(13px,2.3vw,15px); line-height:2; color:rgba(255,255,255,.78); margin:0 auto 32px; max-width:640px; }
.cl-concept-cta-buttons{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.cl-concept-cta-btn-primary:hover{ transform:translateY(-2px); }
.cl-concept-cta-btn-ghost:hover{ background:rgba(255,255,255,.12)!important; }

/* ---------- レスポンシブ ---------- */
@media (max-width:880px){
    .cl-cpt-domain, .cl-cpt-domain.is-reverse{ flex-direction:column; }
    .cl-cpt-visual{ flex:0 0 auto; width:100%; max-width:520px; aspect-ratio:16/10; }
    .cl-cpt-text{ text-align:center; width:100%; }
    .cl-cpt-desc{ max-width:none; }
}
@media (max-width:600px){
    .cl-cpt-hero{ min-height:78vh; }
    .cl-concept-cta-buttons{ flex-direction:column; }
    .cl-concept-cta-btn-primary, .cl-concept-cta-btn-ghost{ width:100%; justify-content:center; }
}