/* invoice-issuing : TOKIUM請求書発行｜取引先ごとに違う「送付作業」を、まるごと引き受けます。（WordPress外の独立ページ版） - 全ルールを .issue-wrapper 配下にスコープ（共通ヘッダー/フッター・サイト共通CSSと干渉しない） - クラス名・id・@keyframes・CSS変数はすべて issue- / --issue- 接頭辞 - 本文フォントは Noto Sans JP（Google Fonts CDN・index.php の で読み込み） - @keyframes だけは仕様上セレクタ配下に置けないためトップレベル（名前を issue- で衝突回避） 生成: 20260730（文言エディタの部屋 請求書発行LP_v7.html（rev0） の最終HTMLから変換） */ /* ============================================================ TOKIUM 経理AIエージェント サービスサイトTOP LP PC専用 / 1440px 固定幅 (Figma 14512-11699 準拠) ============================================================ */ .issue-wrapper{ --issue-green:#008D97; --issue-light-green:#00CC99; --issue-black:#191414; --issue-text:#222229; --issue-note:rgba(34,34,41,.6); /* 注釈共通色 = #222229の60% */ --issue-orange:#F98938; --issue-white:#FFFFFF; --issue-gray:#F6F6F6; --issue-pale-blue:#EDF7F8; --issue-muted:#8C8989; --issue-line:#D1D0D0; --issue-card-line:#D1D0D0; --issue-tag-bg:#E2E2E2; --issue-tag-text:#757272; --issue-font:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN',sans-serif; /* 導入事例マーキー: カード幅+gap(=1枚分の送り幅) と 1セット(4枚)幅。SPで上書きする */ --issue-case-step:467px; /* 430 + 37 */ --issue-case-set:1868px; /* 467 × 4 */ } .issue-wrapper, .issue-wrapper *{margin:0;padding:0;box-sizing:border-box} .issue-wrapper{ background:#FFFFFF; /* 1440幅外側の余白（白） */ } /* PC設計は固定幅(1100〜1103px)。769px以上ではレイアウトを崩さず横スクロールさせる（SPブロックで0に戻す） */ .issue-wrapper{min-width:1140px} .issue-wrapper{ font-family:var(--issue-font); color:var(--issue-text); font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* 固定1440幅・センタリング */ .issue-wrapper{ width:100%; /* 全幅：色付きセクションの背景をウィンドウ左右端まで伸ばす。中身は各ブロックで中央寄せ */ margin:0 auto; background:var(--issue-white); overflow-x:clip; /* 横スクロール防止（sticky動作のためclip。hiddenだとスクロールコンテナ化しsticky無効） */ } /* 共通コンテンツ幅（左右170px） */ .issue-wrapper .issue-container{ width:1100px; margin:0 auto; } .issue-wrapper a{color:inherit;text-decoration:none} .issue-wrapper img{display:block;max-width:100%} .issue-wrapper .issue-sp-br{display:none} /* SP専用改行(768px以下でのみ有効化) */ .issue-wrapper .issue-sp-menu-btn{display:none} /* SP専用ハンバーガー */ /* ============ ヘッダー ============ */ .issue-wrapper .issue-header{ height:78px; width:1440px; margin:0 auto; background:var(--issue-white); display:flex; align-items:center; padding:0 22px 0 24px; border-bottom:1px solid #F0F0F0; } .issue-wrapper .issue-header__logo{height:28px;width:auto} .issue-wrapper .issue-header__logo svg, .issue-wrapper .issue-header__logo img{height:28px;width:auto;display:block} .issue-wrapper .issue-gnav{ display:flex; align-items:center; gap:34px; margin-left:64px; } .issue-wrapper .issue-gnav__item{ display:flex;align-items:center;gap:4px; font-size:14px;font-weight:500;color:var(--issue-black); cursor:pointer;white-space:nowrap; } .issue-wrapper .issue-gnav__item .issue-chev{width:9px;height:9px;opacity:.85} /* サービス一覧ドロップダウン（暫定・本番ヘッダーで差し替え予定） */ .issue-wrapper .issue-gnav__item--dd{position:relative} .issue-wrapper .issue-gnav__item--dd::before{content:"";position:absolute;left:-16px;right:-16px;top:100%;height:22px} /* hoverブリッジ */ .issue-wrapper .issue-gnav__dd{ position:absolute;left:-18px;top:calc(100% + 20px);z-index:300; min-width:188px;padding:8px 0; background:var(--issue-white);border:1px solid #EBEBEB;border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.10); opacity:0;visibility:hidden;transform:translateY(-4px); transition:opacity .2s ease,transform .2s ease,visibility .2s; } .issue-wrapper .issue-gnav__item--dd:hover .issue-gnav__dd{opacity:1;visibility:visible;transform:none} .issue-wrapper .issue-gnav__dd a{ display:block;padding:11px 20px; font-size:14px;font-weight:500;color:var(--issue-black);white-space:nowrap; transition:background .15s ease,color .15s ease; } .issue-wrapper .issue-gnav__dd a:hover{background:#F2F7F7;color:var(--issue-green)} .issue-wrapper .issue-header__right{ margin-left:auto; display:flex;align-items:center;gap:16px; } .issue-wrapper .issue-header__login{font-size:15px;font-weight:500;color:var(--issue-black);cursor:pointer} .issue-wrapper .issue-btn-sm{ min-width:80px;height:36px; display:inline-flex;align-items:center;justify-content:center; padding:0 14px;border-radius:16px; font-size:15px;font-weight:700;white-space:nowrap;cursor:pointer; } .issue-wrapper .issue-btn-sm--orange{background:var(--issue-orange);color:var(--issue-white)} .issue-wrapper .issue-btn-sm--ghost{background:var(--issue-white);color:var(--issue-black);border:1px solid #B2B7B8} /* ============ ヒーロー ============ */ .issue-wrapper .issue-hero{ width:1103px; margin:0 auto; padding-top:44px; display:flex;flex-direction:column; position:relative; } /* 背景: ドットフィールド（dots-fade.svg=26px幅の1列タイルを横リピート）。 左右はウインドウ幅に追従、上下はアニメ枠より100px大きい。上下端ほどドット径が小さい */ .issue-wrapper .issue-hero::before{ content:"";position:absolute;z-index:0; left:calc(50% - 50vw);width:100vw;top:179px;height:784px; background:url("../img/dots-column.svg") center top/16px 784px repeat-x; pointer-events:none; } /* ドット層より通常コンテンツを前面に */ .issue-wrapper .issue-hero>div{position:relative;z-index:1} /* FV右のトキうむん（両手下げポーズ・ふわふわ浮遊） 画像600×600中の実体bbox(x72-502,y8-586)から算出: 図の高さ132px・影の真上センター合わせ */ .issue-wrapper .issue-hero__chara{ position:absolute;right:-15px;top:95px; width:137px;height:auto;object-fit:contain; pointer-events:none;user-select:none; animation:issue-chara-float 3.8s ease-in-out infinite; will-change:transform; } /* キャラ足元の影。下辺はCTAボタン下辺(hero相対294px)に一致。浮遊と連動：下降時100%・上昇時70%濃度 */ .issue-wrapper .issue-hero__chara-shadow{ position:absolute;right:20px;top:243px; width:73px;height:6px;pointer-events:none; background:radial-gradient(ellipse at center, rgba(105,112,112,.55) 0%, rgba(105,112,112,0) 72%); animation:issue-chara-shadow 3.8s ease-in-out infinite; } @keyframes issue-chara-float{ 0%,100%{transform:translateY(0) rotate(-.75deg)} 50%{transform:translateY(-6px) rotate(.75deg)} } @keyframes issue-chara-shadow{ 0%,100%{opacity:1} 50%{opacity:.7} } @media (prefers-reduced-motion: reduce){ .issue-wrapper .issue-hero__chara, .issue-wrapper .issue-hero__chara-shadow{animation:none} .issue-wrapper .issue-btn-pill::after, .issue-wrapper .issue-btn-order::after{animation:none} } .issue-wrapper .issue-hero__head{display:flex;flex-direction:column;gap:5px} /* 「経理AIエージェント TOKIUM」＋キャッチコピーのセットのみ2px上へ（リード文以降の位置は据え置き） */ .issue-wrapper .issue-hero__eyebrow{margin-top:-2px} .issue-wrapper .issue-hero__sub{margin-top:2px} .issue-wrapper .issue-hero__eyebrow{font-size:20px;font-weight:500;color:var(--issue-black);line-height:1.2} /* 行間0.85倍(1.3→1.105)。 paltは仮名だけ強く詰まり行ごとに字間が不揃いになるため解除し、全文字を等間隔に。 約物(引用符・句読点)のみ .pt でpaltを効かせて詰める */ .issue-wrapper .issue-hero__title{ font-size:54px;font-weight:700;color:var(--issue-black);line-height:1.105; font-feature-settings:normal;letter-spacing:-1px; } .issue-wrapper .issue-hero__title .issue-pt{font-feature-settings:"palt" 1} .issue-wrapper .issue-hero__sub{font-size:16px;font-weight:400;color:var(--issue-black);line-height:1.6} /* 見出し〜CTAはひと塊に（間を詰める）、CTA〜アニメは広めに */ /* リード文下の業務別タグ (Figma 15229:18048) */ .issue-wrapper .issue-hero__tags{display:flex;flex-wrap:wrap;gap:20px;margin-top:20px} .issue-wrapper .issue-hero__tag{ width:100px;height:31px;flex:none; display:inline-flex;align-items:center;justify-content:center; background:#EFF1F1;border:1px solid #BAB9B9;border-radius:8.584px; font-size:13px;font-weight:400;color:var(--issue-text);line-height:1.19;white-space:nowrap; } /* 上余白: リード文は行ボックスに約5.4pxの余白を含むため、実体同士の下余白は25pxで見た目が揃う */ .issue-wrapper .issue-hero__cta{display:flex;align-items:center;gap:24px;margin-top:25px;margin-bottom:44px} .issue-wrapper .issue-hero .issue-topics{margin-top:32px} /* 丸角大ボタン (資料請求 / 対応業務を見る) */ .issue-wrapper .issue-btn-pill{ position:relative;overflow:hidden; width:240px;height:54px;border-radius:30px; /* 「料金表を受け取る」+右固定矢印が収まる幅に統一 */ display:inline-flex;align-items:center;justify-content:center; font-size:18px;text-align:center;cursor:pointer;white-space:nowrap; isolation:isolate; } .issue-wrapper .issue-btn-pill__label{position:relative;z-index:1;transition:color .35s ease} .issue-wrapper .issue-btn-pill::before{ content:"";position:absolute;inset:0;z-index:0; transform:translateX(-101%); transition:transform .35s ease; } .issue-wrapper .issue-btn-pill:hover::before{transform:translateX(0)} /* 共通: ホバー時にグラデが1回走る演出 */ .issue-wrapper .issue-btn-pill::after{ content:"";position:absolute;top:0;bottom:0;left:0;width:60%;z-index:0; transform:translateX(-170%) skewX(-18deg); pointer-events:none; } .issue-wrapper .issue-btn-pill:hover::after{ animation:issue-cta-shine .9s ease-out; } @keyframes issue-cta-shine{ 0%{transform:translateX(-170%) skewX(-18deg)} 100%{transform:translateX(300%) skewX(-18deg)} } .issue-wrapper .issue-btn-pill--fill{background:var(--issue-orange);color:var(--issue-white);font-weight:700} .issue-wrapper .issue-btn-pill--fill::before{background:#D4730F} .issue-wrapper .issue-btn-pill--fill::after, .issue-wrapper .issue-btn-pill--orange::after{ background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 100%); } .issue-wrapper .issue-btn-pill--outline{background:var(--issue-white);color:var(--issue-green);border:1px solid var(--issue-green);font-weight:500} /* 料金表ボタン: ホバーは薄いライトグリーンのグラデ走査のみ（塗り反転・文字色反転はしない） */ .issue-wrapper .issue-btn-pill--outline::before{content:none} .issue-wrapper .issue-btn-pill--outline::after, .issue-wrapper .issue-btn-pill--white::after{ background:linear-gradient(90deg, rgba(0,141,151,0) 0%, rgba(0,141,151,.14) 50%, rgba(0,141,151,0) 100%); } /* FVアニメ枠 (Rectangle 8553 : 1103×584) */ .issue-wrapper .issue-hero__movie{ width:1103px;height:584px; border-radius:12px;overflow:hidden; background:#F6F6F6; } .issue-wrapper .issue-hero__movie iframe{width:1103px;height:584px;border:0;display:block} /* 4トピック帯 */ .issue-wrapper .issue-topics{display:flex;gap:49px} .issue-wrapper .issue-topic{width:238px;display:flex;flex-direction:column;gap:10px} .issue-wrapper .issue-topic__t{font-size:18px;font-weight:500;color:#000;line-height:1.4} .issue-wrapper .issue-topic__d{font-size:14.5px;font-weight:300;color:#000;line-height:1.7} /* ============ 区切り線 ============ */ .issue-wrapper .issue-hero-divider{ width:793px;height:1px;background:var(--issue-line); margin:24px auto 0; } /* ============ ロゴ帯（マーキー） ============ */ .issue-wrapper .issue-logos{ width:100%; max-width:1440px; margin:24px auto 0; padding-top:0; overflow:hidden; } .issue-wrapper .issue-logos__head{ text-align:center; line-height:1.7; margin-bottom:14px; } .issue-wrapper .issue-logos__head .issue-lead{font-size:20px;font-weight:500;color:#000} .issue-wrapper .issue-logos__head .issue-num{font-size:32px;font-weight:700;color:var(--issue-green)} .issue-wrapper .issue-logos__head .issue-unit-g{font-size:28px;font-weight:500;color:var(--issue-green)} .issue-wrapper .issue-logos__head .issue-num-b{font-size:32px;font-weight:500;color:#000} .issue-wrapper .issue-logos__head .issue-unit-b{font-size:28px;font-weight:500;color:#000} .issue-wrapper .issue-logos__head .issue-small{font-size:16px;font-weight:400;color:#000} /* （上場企業250社以上）を70%サイズに縮小・ベースライン整合 */ .issue-wrapper .issue-logos__head .issue-paren{white-space:nowrap;vertical-align:baseline} .issue-wrapper .issue-logos__head .issue-paren .issue-small{font-size:11.2px} .issue-wrapper .issue-logos__head .issue-paren .issue-num-b{font-size:22.4px} .issue-wrapper .issue-logos__head .issue-paren .issue-unit-b{font-size:19.6px} .issue-wrapper .issue-logos__head .issue-note-inline{font-size:12px;font-weight:400;color:var(--issue-note);white-space:nowrap} .issue-wrapper .issue-marquee{ width:calc(100% - 56px);max-width:1100px;overflow:hidden;position:relative; margin:16px auto 0; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%); } .issue-wrapper .issue-marquee__track{ display:flex;align-items:center;width:max-content; animation:issue-marquee 70s linear infinite; } .issue-wrapper .issue-marquee__track .issue-logo-item{ height:52px;width:auto;flex:none; margin:0 30px; object-fit:contain; pointer-events:none;user-select:none; } @keyframes issue-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ============ セクション共通 ============ */ .issue-wrapper .issue-section{padding-top:80px} .issue-wrapper .issue-sec-title{display:flex;flex-direction:column;gap:8px;margin-bottom:40px} .issue-wrapper .issue-sec-title .issue-eyebrow{font-size:20px;font-weight:300;color:var(--issue-muted);letter-spacing:1px;line-height:1} .issue-wrapper .issue-sec-title h2{font-size:32px;font-weight:600;color:var(--issue-text);letter-spacing:1.6px;line-height:1.4} .issue-wrapper .issue-sec-title .issue-lead{font-size:16px;font-weight:400;color:var(--issue-text);letter-spacing:.8px;line-height:1.7} /* ============ Coverage 対応できる業務 ============ */ .issue-wrapper .issue-cov-grid{ display:grid;grid-template-columns:532px 532px;gap:34px; } .issue-wrapper .issue-cov-card{ width:532px;height:440px; background:linear-gradient(180deg,#FFFFFF 0%,#F1F1F1 100%); border-radius:4px; padding:16px 24px 0; cursor:pointer; transition:background .25s ease; position:relative;overflow:hidden; } /* ホバー: カード全体（画像含む）に極薄ティールのオーバーレイ＋右上アイコンを緑の四角＋白矢印に */ .issue-wrapper .issue-cov-card::after{ content:"";position:absolute;inset:0;z-index:1; background:rgba(0,141,151,.05); opacity:0;transition:opacity .25s ease; border-radius:4px;pointer-events:none; } .issue-wrapper .issue-cov-card:hover::after{opacity:1} .issue-wrapper .issue-cov-card__icon{transition:background .25s ease;border-radius:3px} .issue-wrapper .issue-cov-card__icon svg path{transition:stroke .25s ease} .issue-wrapper .issue-cov-card:hover .issue-cov-card__icon{background:var(--issue-green)} .issue-wrapper .issue-cov-card:hover .issue-cov-card__icon svg path{stroke:#fff} .issue-wrapper .issue-cov-card__head{ display:flex;align-items:center;justify-content:space-between; gap:25px;margin-bottom:8px; } .issue-wrapper .issue-cov-card__ttl{display:flex;align-items:center;gap:10px} .issue-wrapper .issue-cov-card__mark{width:56px;height:56px;flex:none;display:block} .issue-wrapper .issue-cov-card__name{font-size:28px;font-weight:500;color:var(--issue-green);letter-spacing:1.4px;line-height:1.7} /* カード下部いっぱいに敷くプロダクトビジュアル（Figma 2x書き出し。上段1059×523・下段1061×549） ※フェードマスクはUI・キャラの上端までボケるため廃止。 代わりにカードのグラデを「画像上端の焼き込み色(実測)」へ正確に接続して継ぎ目を消す */ .issue-wrapper .issue-cov-card__img{ position:absolute;left:0;right:0;bottom:0; aspect-ratio:1059/523; background:center/cover no-repeat; border-radius:0 0 4px 4px; pointer-events:none; } /* 画像上端色: cov_1=#F5F5F5 / cov_2=#F6F6F6 (top40.2%) / cov_3・cov_4=#F9F9F9 (top37.4%) */ .issue-wrapper .issue-cov-grid .issue-cov-card:nth-child(1){background:linear-gradient(180deg,#FFF 0%,#F5F5F5 40.2%,#EFEFEF 100%)} .issue-wrapper .issue-cov-grid .issue-cov-card:nth-child(2){background:linear-gradient(180deg,#FFF 0%,#F6F6F6 40.2%,#F0F0F0 100%)} .issue-wrapper .issue-cov-grid .issue-cov-card:nth-child(3){background:linear-gradient(180deg,#FFF 0%,#F9F9F9 37.4%,#F1F1F1 100%)} .issue-wrapper .issue-cov-grid .issue-cov-card:nth-child(4){background:linear-gradient(180deg,#FFF 0%,#F9F9F9 37.4%,#F1F1F1 100%)} .issue-wrapper .issue-cov-card__img--tall{aspect-ratio:1061/549} .issue-wrapper .issue-cov-card__icon{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center} .issue-wrapper .issue-cov-card__cols{display:flex;gap:20px} .issue-wrapper .issue-cov-card__cols ul{list-style:none} .issue-wrapper .issue-cov-card__cols li{ font-size:15px;color:#000;line-height:1.7;letter-spacing:.75px;white-space:nowrap; } .issue-wrapper .issue-cov-card__cols li::before{content:"▪";color:var(--issue-green);margin-right:4px;font-size:11px} /* オーダーメイド帯 */ .issue-wrapper .issue-cov-order{ margin-top:34px; width:1100px;height:319px; background:var(--issue-white);border:1px solid var(--issue-card-line);border-radius:4px; display:flex;align-items:center;justify-content:center; padding:24px 56px; position:relative; } /* ホバー: 導入事例カードと同じ #F6F6F6 乗算 */ .issue-wrapper .issue-cov-order::after{ content:"";position:absolute;inset:0;z-index:1; background:#F6F6F6;mix-blend-mode:multiply; opacity:0;transition:opacity .25s ease;pointer-events:none; border-radius:4px; } .issue-wrapper .issue-cov-order:hover::after{opacity:1} .issue-wrapper .issue-cov-order__inner{display:flex;align-items:center;gap:40px} .issue-wrapper .issue-cov-order__text{width:551px;display:flex;flex-direction:column;gap:16px;justify-content:center} .issue-wrapper .issue-cov-order__eyebrow{font-size:16px;font-weight:600;color:var(--issue-green);line-height:1.7} .issue-wrapper .issue-cov-order__title{font-size:24px;font-weight:400;color:#000;line-height:1.7;margin-top:-8px} .issue-wrapper .issue-cov-order__desc{font-size:16px;font-weight:400;color:#000;line-height:1.7} .issue-wrapper .issue-cov-order__img{ width:390px;height:219.375px;background:#D9D9D9;flex:none; border-radius:4px;overflow:hidden;display:block; } .issue-wrapper .issue-cov-order__video{width:100%;height:100%;object-fit:cover;display:block;border:0;pointer-events:none} .issue-wrapper .issue-btn-order{ position:relative;overflow:hidden; background:var(--issue-green);color:var(--issue-white);font-weight:700;font-size:16px; width:280px;height:48px;border-radius:24px; display:inline-flex;align-items:center;justify-content:center;cursor:pointer; } .issue-wrapper .issue-btn-order__label{position:relative;z-index:1} .issue-wrapper .issue-btn-order .issue-cta-arrow{color:var(--issue-white)} .issue-wrapper .issue-btn-order:hover .issue-cta-arrow{transform:translateY(-50%) translateX(4px)} /* ホバー: 料金表ボタンと同じ「グラデが1回走る」演出（ティール地で見えるようライトグリーン寄りの光沢） */ .issue-wrapper .issue-btn-order::after{ content:"";position:absolute;top:0;bottom:0;left:0;width:60%; background:linear-gradient(90deg, rgba(223,244,245,0) 0%, rgba(223,244,245,.45) 50%, rgba(223,244,245,0) 100%); transform:translateX(-170%) skewX(-18deg); pointer-events:none; } .issue-wrapper .issue-btn-order:hover::after{animation:issue-cta-shine .9s ease-out} /* ============ CTA再掲 ============ */ .issue-wrapper .issue-cta-recap{ display:flex;align-items:center;justify-content:center;gap:24px; padding-top:80px; } /* ============ Use Cases 導入事例 ============ */ .issue-wrapper .issue-cases-wrap{position:relative} /* ウィンドウ全幅ブリード・常時マーキー（左→右）＝カードが左右端まで見える */ .issue-wrapper .issue-cases-marquee{ width:100vw;margin-left:calc(50% - 50vw); overflow-x:clip;overflow-y:visible; } .issue-wrapper .issue-cases-offset{transition:transform .45s ease;will-change:transform} .issue-wrapper .issue-cases-track{ display:flex;gap:37px;width:max-content; animation:issue-cases-marquee 24s linear infinite; } .issue-wrapper .issue-cases-track:hover{animation-play-state:paused} /* 1セット幅=4枚×(430+37)=1868px(=--case-set)。-2SET→-1SETの区間を往復させ、左右に常に予備セットを残す */ @keyframes issue-cases-marquee{ from{transform:translateX(calc(-2 * var(--issue-case-set)))} to{transform:translateX(calc(-1 * var(--issue-case-set)))} } .issue-wrapper .issue-case-card{ width:430px;flex:none;background:var(--issue-white); /* 幅1.1倍(391→430)。文字領域343pxは維持し左右パディングで吸収 */ border:1px solid var(--issue-card-line);border-radius:4px;overflow:hidden; transition:box-shadow .25s ease; display:block;color:inherit;text-decoration:none;cursor:pointer; } /* ホバー: ドロップシャドウではなく #F6F6F6 をカード全体(写真含む)に乗算 */ .issue-wrapper .issue-case-card{position:relative} .issue-wrapper .issue-case-card::after{ content:"";position:absolute;inset:0;z-index:1; background:#F6F6F6;mix-blend-mode:multiply; opacity:0;transition:opacity .25s ease;pointer-events:none; } .issue-wrapper .issue-case-card:hover::after{opacity:1} .issue-wrapper .issue-case-card__img{height:258px;background:var(--issue-tag-bg) center/cover no-repeat} /* カード幅に比例(430×0.601) */ .issue-wrapper .issue-case-card__body{padding:26px 43.5px 30px} /* 文字領域=430-87=343px(従来と同じ) */ /* ロゴ行: 左=企業ロゴ / 右=遷移アイコン(Coverageと同作法) */ .issue-wrapper .issue-case-card__logohead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .issue-wrapper .issue-case-card__go{ width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center; border-radius:3px;transition:background .25s ease; } .issue-wrapper .issue-case-card__go svg path{transition:stroke .25s ease} .issue-wrapper .issue-case-card:hover .issue-case-card__go{background:var(--issue-green)} .issue-wrapper .issue-case-card:hover .issue-case-card__go svg path{stroke:#fff} /* 企業ロゴ: 4社共通スペース(高さ56px)。ロゴごとの実寸差はimg高さで視覚等価に揃える */ .issue-wrapper .issue-case-card__logo{height:56px;display:flex;align-items:center} .issue-wrapper .issue-case-card__logo img{display:block;width:auto} .issue-wrapper .issue-case-card__logo.issue-lg-1 img{height:46px} /* トヨタモビリティ神奈川(横型) */ .issue-wrapper .issue-case-card__logo.issue-lg-2 img{height:40px} /* シン・コーポレーション(ワイド横型) */ .issue-wrapper .issue-case-card__logo.issue-lg-5 img{height:22px} /* ENEOSトレーディング(細身ワードマーク) */ .issue-wrapper .issue-case-card__logo.issue-lg-6 img{height:30px} /* 三好不動産(マーク+横書き) */ .issue-wrapper .issue-case-card__meta{font-size:14px;font-weight:400;color:#5A6062;line-height:1.5;letter-spacing:.5px} /* 見出し2行構成: 1行目=通常、2行目=大きめ・時間テキスト(em)のみティール */ .issue-wrapper .issue-case-card__title{margin-top:10px;color:#000;letter-spacing:1px} .issue-wrapper .issue-case-card__t1{display:block;font-size:17px;font-weight:500;line-height:1.7} .issue-wrapper .issue-case-card__t2{display:block;font-size:23px;font-weight:500;line-height:1.6;margin-top:2px;letter-spacing:0} /* 幅80%化で最長見出しが収まるよう字間のみ詰める */ .issue-wrapper .issue-case-card__t2 em{font-style:normal;color:var(--issue-green);font-weight:600} /* ティール部のみ元のウエイト維持 */ .issue-wrapper .issue-case-card__tags{display:flex;gap:16px;margin-top:16px} .issue-wrapper .issue-tag{ background:#EFF1F1;color:var(--issue-tag-text); font-size:14px;font-weight:500; padding:6px 12px;border-radius:4px;line-height:1; } .issue-wrapper .issue-case-card__hr{height:1px;background:#E2E2E2;margin:20px 0 16px} .issue-wrapper .issue-case-card__service{font-size:14px;font-weight:400;color:#5A6062;line-height:1.5;letter-spacing:.5px} /* 業種／社名(meta)と同色・同サイズ */ /* カルーセル丸ボタン */ .issue-wrapper .issue-carousel-btn{ position:absolute;top:88px; /* 画像エリア(235px)の縦中央=カード上端+117px */ width:60px;height:60px;border-radius:50%; background:var(--issue-white);border:1px solid var(--issue-line); display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.06); z-index:2; } .issue-wrapper .issue-carousel-btn--prev{left:-36px} .issue-wrapper .issue-carousel-btn--next{right:-36px} .issue-wrapper .issue-carousel-btn svg{width:18px;height:18px} /* ============ Reason 選ばれる理由 ============ */ .issue-wrapper .issue-reason-grid{display:grid;grid-template-columns:repeat(3,338px);gap:36px;align-items:stretch} .issue-wrapper .issue-reason-card{ width:338px;background:var(--issue-gray);border-radius:4px; padding:26px 32px 33px 33px; /* 下パディングを左右と同等に */ cursor:pointer; transition:background-color .25s ease; } .issue-wrapper .issue-reason-card:hover{background:#EDEDEB} .issue-wrapper .issue-reason-card__inner{width:273px;display:flex;flex-direction:column;gap:15px} .issue-wrapper .issue-reason-card__title{font-size:20px;font-weight:400;color:#000;line-height:1.4} .issue-wrapper .issue-reason-card__num{color:var(--issue-green);font-weight:600;line-height:1;margin-top:2px;white-space:nowrap} .issue-wrapper .issue-reason-card__num .issue-big{font-size:42px} .issue-wrapper .issue-reason-card__num .issue-u{font-size:20px} .issue-wrapper .issue-reason-card__hr{height:1px;background:var(--issue-line);width:273px} .issue-wrapper .issue-reason-card__desc{font-size:16px;font-weight:400;color:#000;line-height:1.7} .issue-wrapper .issue-btn-more{ border:0.9px solid #A3A1A1;border-radius:21.5px; width:131px;height:43px;background:transparent; display:inline-flex;align-items:center;justify-content:center;gap:4px; font-size:12.84px;font-weight:700;color:var(--issue-text);cursor:pointer; transition:background-color .25s ease; } .issue-wrapper .issue-reason-card:hover .issue-btn-more{background:var(--issue-white)} /* ============ CTA矢印アイコン（資料請求 等） ============ */ /* 矢印はカプセル右端に固定配置・ラベルはカプセル全体に対してセンター */ .issue-wrapper .issue-cta-arrow{ width:15px;height:auto;flex:none;z-index:1; position:absolute;right:20px;top:50%;transform:translateY(-50%); transition:transform .25s ease; } .issue-wrapper .issue-btn-pill:hover .issue-cta-arrow{transform:translateY(-50%) translateX(4px)} .issue-wrapper .issue-btn-pill--outline .issue-cta-arrow{color:var(--issue-green)} /* ホバー時もティールのまま */ .issue-wrapper .issue-cta-arrow--sm{width:13px;right:12px} .issue-wrapper .issue-btn-sm--orange{position:relative;min-width:112px} .issue-wrapper .issue-btn-sm--orange:hover .issue-cta-arrow{transform:translateY(-50%) translateX(4px)} /* ============ Support データ化 ============ */ /* ペールブルー帯の上に白パネル1枚、その中に3列×2行（v9の構成） */ .issue-wrapper .issue-support-section{background:var(--issue-pale-blue);padding-bottom:80px;margin-top:80px} /* Reasonとの間は80px */ .issue-wrapper .issue-support-panel{ background:var(--issue-white);border-radius:12px; /* グレー枠線なし */ padding:48px; } /* 左右パディング・列間・行間をすべて48pxで統一（列は1frで残り幅を等分、画像/テキストは列いっぱいに） */ .issue-wrapper .issue-support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px} .issue-wrapper .issue-support-card{background:transparent;border:0;padding:0} .issue-wrapper .issue-support-card__head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px} /* 番号とタイトルはベースライン揃え */ .issue-wrapper .issue-support-card__num{ font-size:26px;font-weight:600;color:var(--issue-green);line-height:1;flex:none; /* 22→26 (120%) */ } .issue-wrapper .issue-support-card__title{font-size:16px;font-weight:600;color:var(--issue-text);line-height:1.5;letter-spacing:.3px;white-space:nowrap} .issue-wrapper .issue-support-card__img{ width:100%;aspect-ratio:589/295;border-radius:8px; background:center/cover no-repeat #F1F3F2; } .issue-wrapper .issue-support-card__desc{width:100%;font-size:14px;font-weight:400;color:#000;line-height:1.8;margin-top:16px} /* ============ Document お役立ち情報 ============ */ .issue-wrapper .issue-doc-section{background:var(--issue-pale-blue);padding:80px 0} .issue-wrapper .issue-doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .issue-wrapper .issue-doc-card{background:var(--issue-white);border-radius:10px;padding:34px 30px;text-align:center} .issue-wrapper .issue-doc-card__thumb{ width:336px;aspect-ratio:16/9;margin:0 auto; /* 280×1.2 */ background:#fff;border-radius:8px; } /* 資料カードのサムネイル（左=導入事例集 / 右=AI導入）。 左は16:9でない素材なので contain で全体を見せる。右は16:9ちょうどなので cover */ .issue-wrapper .issue-doc-card__thumb--case{ background-image:url("../img/doc-casestudy.png"); background-size:contain;background-position:center;background-repeat:no-repeat; } .issue-wrapper .issue-doc-card__thumb--ai{ background-image:url("../img/doc-ai-introduction.png"); background-size:cover;background-position:center;background-repeat:no-repeat; } .issue-wrapper .issue-doc-card__title{font-size:16px;font-weight:700;color:var(--issue-text);line-height:1.6;margin-top:22px} .issue-wrapper .issue-doc-dl{ display:inline-flex;align-items:center;gap:8px;margin-top:18px; border:1px solid #C9D2D3;background:var(--issue-white);color:#00727A; font-size:14px;font-weight:700;padding:12px 26px;border-radius:24px; cursor:pointer;transition:border-color .2s ease; } .issue-wrapper .issue-doc-dl svg{width:16px;height:16px} .issue-wrapper .issue-doc-dl:hover{border-color:var(--issue-green)} .issue-wrapper .issue-doc-more{text-align:center;margin-top:32px} /* 共通：ティール塗り「一覧を見る ›」リンク */ .issue-wrapper .issue-link-pill{ position:relative;overflow:hidden; display:inline-flex;align-items:center;justify-content:center; background:var(--issue-green);color:var(--issue-white); font-size:14px;font-weight:700;padding:15px 52px;border-radius:24px; cursor:pointer;transition:background-color .2s ease; } .issue-wrapper .issue-link-pill .issue-cta-arrow{color:var(--issue-white)} .issue-wrapper .issue-link-pill:hover .issue-cta-arrow{transform:translateY(-50%) translateX(4px)} .issue-wrapper .issue-link-pill:hover{background:#00727A} /* ============ NEWS / Q&A 共通（左タイトルsticky＋右コンテンツ） ============ */ .issue-wrapper .issue-split-section{padding:80px 0} .issue-wrapper .issue-split-section--qa{background:var(--issue-gray)} .issue-wrapper .issue-split-wrap{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start} .issue-wrapper .issue-split-side{position:sticky;top:32px} .issue-wrapper .issue-split-side .issue-sec-title{margin-bottom:0} /* NEWS 行リスト */ .issue-wrapper .issue-news-item{ display:grid;grid-template-columns:92px 104px 1fr;gap:20px;align-items:center; padding:18px 4px;border-bottom:1px solid #E6ECEC;color:var(--issue-text); transition:color .2s ease; } .issue-wrapper .issue-news-item:first-child{border-top:1px solid #E6ECEC} .issue-wrapper .issue-news-item:hover{color:var(--issue-green)} .issue-wrapper .issue-news-item__date{font-size:13px;color:#5A6062} .issue-wrapper .issue-news-item__cat{ display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--issue-white); border-radius:4px;padding:5px 0;line-height:1.3;text-align:center; } .issue-wrapper .issue-news-item__cat--pr{background:#00A5B0} .issue-wrapper .issue-news-item__cat--media{background:var(--issue-orange)} .issue-wrapper .issue-news-item__title{font-size:14.5px;line-height:1.6;letter-spacing:.4px} .issue-wrapper .issue-news-more{margin-top:28px} /* Q&A アコーディオン */ .issue-wrapper .issue-qa-list{display:flex;flex-direction:column;gap:14px} .issue-wrapper .issue-qa-item{background:var(--issue-white);border:1px solid #E4E6E6;border-radius:12px;overflow:hidden} .issue-wrapper .issue-qa-head{ width:100%;background:var(--issue-white);border:0;cursor:pointer;font-family:inherit; display:flex;align-items:center;gap:14px;padding:20px 22px;text-align:left; } .issue-wrapper .issue-qa-q{ width:26px;height:26px;border-radius:50%;background:var(--issue-green);color:var(--issue-white); display:grid;place-items:center;font-size:13px;font-weight:700;flex:none; } .issue-wrapper .issue-qa-qtext{flex:1;font-size:15px;font-weight:600;color:var(--issue-text);line-height:1.5} .issue-wrapper .issue-qa-icon{ width:26px;height:26px;border-radius:50%;background:#EDEEEE;color:var(--issue-green); display:grid;place-items:center;font-size:16px;font-weight:700;flex:none; } .issue-wrapper .issue-qa-body{max-height:0;overflow:hidden;transition:max-height .3s ease;background:#F7FAFA} .issue-wrapper .issue-qa-item.issue-open .issue-qa-body{max-height:500px} .issue-wrapper .issue-qa-inner{padding:8px 22px 22px;display:flex;gap:14px} /* 回答ブロック全体を少し下げる */ .issue-wrapper .issue-qa-a{font-size:15px;font-weight:700;color:#8A9092;flex:none;line-height:2;width:26px;text-align:center;padding-top:4px} /* Qの円と同幅にしてAのテキスト開始位置をQと揃える。回答1行目と揃うよう少し下げる */ .issue-wrapper .issue-qa-atext{font-size:13.5px;line-height:2;color:#33383A;padding-top:6px} /* 1行目のベースラインをAに揃える */ .issue-wrapper .issue-qa-detail{ display:inline-block;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--issue-text); border:1px solid #C9D2D3;border-radius:999px;padding:8px 18px;transition:border-color .2s ease,color .2s ease; } .issue-wrapper .issue-qa-detail:hover{border-color:var(--issue-green);color:var(--issue-green)} /* ============ クロージングCTA ============ */ .issue-wrapper .issue-closing-cta{background:#006E77;padding:84px 0} .issue-wrapper .issue-closing-cta .issue-container{text-align:center} .issue-wrapper .issue-closing-cta__title{font-size:32px;font-weight:700;line-height:1.5;color:var(--issue-white);letter-spacing:1px} .issue-wrapper .issue-closing-cta__sub{font-size:15px;color:rgba(255,255,255,.78);margin-top:14px} .issue-wrapper .issue-closing-cta__btns{display:flex;gap:20px;justify-content:center;margin-top:32px} .issue-wrapper .issue-btn-pill--auto{width:auto;padding:0 34px} .issue-wrapper .issue-btn-pill--white{background:var(--issue-white);color:#00636B;font-weight:700} .issue-wrapper .issue-btn-pill--white::before{background:#EDEDED} .issue-wrapper .issue-btn-pill--orange{background:var(--issue-orange);color:var(--issue-white);font-weight:700} .issue-wrapper .issue-btn-pill--orange::before{background:#D4730F} /* ============================================================ SP (〜768px) ・左右マージンは各28px（.container = calc(100% - 56px)） ・PCレイアウトには一切触れず、この中だけで上書きする ============================================================ */ @media (max-width:768px){ /* 固定幅の解除 & 事例マーキーの送り幅をSP寸法へ */ .issue-wrapper{min-width:0} .issue-wrapper{ --issue-case-step:340px; /* 320 + 20 */ --issue-case-set:1360px; /* 340 × 4 */ } /* ---- 共通 ---- */ .issue-wrapper .issue-container{width:calc(100% - 56px)} /* 左右28pxマージン */ .issue-wrapper .issue-section{padding-top:56px} .issue-wrapper .issue-sec-title{gap:6px;margin-bottom:24px} .issue-wrapper .issue-sec-title .issue-eyebrow{font-size:15px;letter-spacing:.8px} .issue-wrapper .issue-sec-title h2{font-size:23px;letter-spacing:.8px;line-height:1.5} .issue-wrapper .issue-sec-title .issue-lead{font-size:14px;letter-spacing:.4px;line-height:1.8} .issue-wrapper .issue-sec-title .issue-lead br{display:none} /* PC用改行を解除して自然に折り返す */ .issue-wrapper .issue-btn-pill{width:208px;height:50px;font-size:15px} /* ---- ヘッダー: 左ロゴ + 右ハンバーガー（挙動なし・後日差し替え予定） ---- */ .issue-wrapper .issue-header{width:auto;height:60px;padding:0 8px 0 16px;justify-content:space-between} .issue-wrapper .issue-gnav{display:none} .issue-wrapper .issue-header__right{display:none} .issue-wrapper .issue-header__logo, .issue-wrapper .issue-header__logo img{height:24px} .issue-wrapper .issue-sp-menu-btn{ display:block;width:48px;height:48px;flex:none; background:none;border:0;cursor:pointer;padding:0; } .issue-wrapper .issue-sp-menu-btn span{ display:block;width:26px;height:2px;margin:6px auto; background:var(--issue-black);border-radius:1px; } .issue-wrapper .issue-sp-br{display:inline} /* ---- ヒーロー ---- */ .issue-wrapper .issue-hero{width:auto;margin:0 28px;padding-top:28px} /* ドット背景: 左右は100vw追従のまま。上下位置はJSがアニメ枠から算出（未実行時は下記の既定値） */ .issue-wrapper .issue-hero::before{ top:var(--issue-dots-top,340px); height:var(--issue-dots-h,312px); background-size:16px var(--issue-dots-h,312px); } .issue-wrapper .issue-hero__head{gap:6px} .issue-wrapper .issue-hero__eyebrow{font-size:14px} .issue-wrapper .issue-hero__title{font-size:26px;line-height:1.4;letter-spacing:0;font-feature-settings:"palt" 1} /* 375px幅でも1行目「あらゆる経理"作業"から、」が折り返さないサイズ(実測297px≦304px)。SPは幅制約が厳しいためpaltを維持 */ /* リード文は右にキャラを置くぶん幅を狭めて3〜4行に */ .issue-wrapper .issue-hero__sub{font-size:14px;line-height:1.8;width:calc(100% - 110px);margin-top:4px} /* タグ: 固定100pxだと収まらないため文字量に応じた幅で折り返す */ .issue-wrapper .issue-hero__tags{gap:8px;margin-top:14px} .issue-wrapper .issue-hero__tag{width:auto;height:28px;padding:0 12px;font-size:12px} /* CTA2種は画面下部に固定して全ページ追従（AX VISIONと同作法） ※.hero>div{position:relative}より詳細度を上げるため.hero>.hero__ctaで指定 */ .issue-wrapper .issue-hero>.issue-hero__cta{ position:fixed;left:0;right:0;bottom:14px;z-index:150; flex-direction:row;justify-content:center;gap:10px; margin:0;padding:0 16px; } .issue-wrapper .issue-hero__cta .issue-btn-pill{ width:calc(50% - 5px);max-width:190px;height:48px; font-size:13.5px;padding-right:14px; box-shadow:0 8px 26px rgba(5,5,8,.22); } .issue-wrapper .issue-hero__cta .issue-btn-pill--outline{background:var(--issue-white)} .issue-wrapper .issue-hero__cta .issue-cta-arrow{width:12px;right:12px} /* 固定CTAに隠れないよう逃げ幅はページ末尾(フッター後ろ)へ。 ラッパーに付けるとCTA帯とパンくずの間に白帯が出るため body 側に移動（このCSSは当LP専用読み込みのため影響は当LPのみ） */ body{padding-bottom:78px} /* トキうむん: 0.7倍(137→96px)でリード文の右に。縦位置はJSがリード文上端から算出 */ .issue-wrapper .issue-hero__chara{width:96px;right:-6px;top:var(--issue-chara-top,150px)} .issue-wrapper .issue-hero__chara-shadow{width:51px;height:5px;right:19px;top:var(--issue-shadow-top,252px)} /* FVアニメ: 左右マージン0のフルブリード。iframeは1103×584固定のままJSでscale */ .issue-wrapper .issue-hero__movie{ width:auto;margin:24px -28px 0; height:calc(100vw * 584 / 1103); border-radius:0; } /* topics: 4カラム → 縦1列 */ .issue-wrapper .issue-hero .issue-topics{margin-top:28px} .issue-wrapper .issue-topics{flex-direction:column;gap:22px} .issue-wrapper .issue-topic{width:100%;gap:6px} .issue-wrapper .issue-topic__t{font-size:16px} .issue-wrapper .issue-topic__d{font-size:14px;line-height:1.8} /* ---- 区切り線 ---- */ .issue-wrapper .issue-hero-divider{width:auto;margin:18px 28px 0} /* ---- ロゴ帯 ---- */ .issue-wrapper .issue-logos{width:auto;margin-top:18px} .issue-wrapper .issue-logos__head{padding:0 28px;line-height:1.6;margin-bottom:10px} .issue-wrapper .issue-logos__head .issue-lead{font-size:15px} .issue-wrapper .issue-logos__head .issue-num{font-size:24px} .issue-wrapper .issue-logos__head .issue-unit-g{font-size:20px} .issue-wrapper .issue-logos__head .issue-num-b{font-size:24px} .issue-wrapper .issue-logos__head .issue-unit-b{font-size:20px} .issue-wrapper .issue-logos__head .issue-small{font-size:13px} .issue-wrapper .issue-logos__head .issue-paren .issue-small{font-size:10px} .issue-wrapper .issue-logos__head .issue-paren .issue-num-b{font-size:17px} .issue-wrapper .issue-logos__head .issue-paren .issue-unit-b{font-size:15px} .issue-wrapper .issue-logos__head .issue-note-inline{display:block;font-size:11px} /* 注釈は改行して単独行に */ .issue-wrapper .issue-marquee{ width:100%;margin-top:12px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%); } .issue-wrapper .issue-marquee__track .issue-logo-item{height:36px;margin:0 18px} /* ---- Coverage ---- */ .issue-wrapper .issue-cov-grid{grid-template-columns:1fr;gap:20px} .issue-wrapper .issue-cov-card{width:100%;height:auto;padding:16px 20px 0} .issue-wrapper .issue-cov-card__head{gap:12px;margin-bottom:6px} .issue-wrapper .issue-cov-card__mark{width:44px;height:44px} .issue-wrapper .issue-cov-card__name{font-size:22px;letter-spacing:.8px} /* リストはPC同様2列のまま。フォントを成り行きで縮小し、折り返しは▪にぶら下げ */ .issue-wrapper .issue-cov-card__cols{gap:12px} .issue-wrapper .issue-cov-card__cols ul{flex:1;min-width:0} .issue-wrapper .issue-cov-card__cols li{ white-space:normal;font-size:12.5px;letter-spacing:.2px;line-height:1.8; padding-left:12px;text-indent:-12px; } /* 下部画像をabsoluteから通常フローへ（上端フェードマスクは維持） */ .issue-wrapper .issue-cov-card__img, .issue-wrapper .issue-cov-card__img--tall{ position:static;width:auto;margin:14px -20px 0; border-radius:0 0 4px 4px; } /* オーダーメイド帯 */ .issue-wrapper .issue-cov-order{width:auto;height:auto;padding:24px 20px;margin-top:20px} .issue-wrapper .issue-cov-order__inner{flex-direction:column;align-items:stretch;gap:20px} .issue-wrapper .issue-cov-order__text{width:auto;gap:12px} .issue-wrapper .issue-cov-order__eyebrow{font-size:14px} .issue-wrapper .issue-cov-order__title{font-size:19px;margin-top:-4px} /* sp-br改行後の2行目が375pxで1行に収まるサイズ(実測251px≦262px) */ .issue-wrapper .issue-cov-order__desc{font-size:14px} .issue-wrapper .issue-cov-order__img{position:relative;width:100%;height:auto;aspect-ratio:16/9} .issue-wrapper .issue-cov-order__video{position:absolute;inset:0;width:100%;height:100%} .issue-wrapper .issue-btn-order{width:100%;max-width:280px;height:46px;font-size:15px} /* ---- CTA再掲 ---- */ .issue-wrapper .issue-cta-recap{flex-direction:column;gap:14px;padding-top:56px} /* ---- Use Cases 導入事例 ---- */ .issue-wrapper .issue-carousel-btn{display:none} .issue-wrapper .issue-cases-track{gap:20px} .issue-wrapper .issue-case-card{width:320px} .issue-wrapper .issue-case-card__img{height:192px} /* 320 × 0.601 */ .issue-wrapper .issue-case-card__body{padding:20px 18px 24px} /* 見出しは内側284pxに最長行が1行で収まるサイズ（t1最長306px@17px→15px / t2最長329px@23px→19px） */ .issue-wrapper .issue-case-card__t1{font-size:15px} .issue-wrapper .issue-case-card__t2{font-size:19px} /* ---- Reason ---- */ .issue-wrapper .issue-reason-grid{grid-template-columns:1fr;gap:16px} .issue-wrapper .issue-reason-card{width:100%;padding:24px 24px 28px} .issue-wrapper .issue-reason-card__inner{width:100%;gap:12px} .issue-wrapper .issue-reason-card__title{font-size:19px} .issue-wrapper .issue-reason-card__title br{display:none} .issue-wrapper .issue-reason-card__num .issue-big{font-size:38px} .issue-wrapper .issue-reason-card__num .issue-u{font-size:18px} .issue-wrapper .issue-reason-card__hr{width:100%} .issue-wrapper .issue-reason-card__desc{font-size:15px} /* ---- Support ---- */ .issue-wrapper .issue-support-section{margin-top:56px;padding-bottom:56px} /* sp-br改行後の2行目「電子化・AI活用を推進したい方へ」が375pxで1行に収まるサイズ(実測295px≦304px) */ .issue-wrapper .issue-support-section .issue-sec-title h2{font-size:20px} .issue-wrapper .issue-support-panel{padding:24px;border-radius:10px} .issue-wrapper .issue-support-grid{grid-template-columns:1fr;gap:32px} .issue-wrapper .issue-support-card__num{font-size:22px} .issue-wrapper .issue-support-card__title{font-size:15px;white-space:normal} .issue-wrapper .issue-support-card__desc{font-size:14px;margin-top:12px} /* ---- Document ---- */ .issue-wrapper .issue-doc-section{padding:56px 0} .issue-wrapper .issue-doc-grid{grid-template-columns:1fr;gap:16px} .issue-wrapper .issue-doc-card{padding:24px 20px} .issue-wrapper .issue-doc-card__thumb{width:100%;max-width:336px;height:auto;aspect-ratio:16/9} .issue-wrapper .issue-doc-card__title{font-size:15px;margin-top:18px} .issue-wrapper .issue-doc-more{margin-top:24px} /* ---- NEWS / Q&A 共通（左見出し＋右リスト → 縦積み） ---- */ .issue-wrapper .issue-split-section{padding:56px 0} .issue-wrapper .issue-split-wrap{grid-template-columns:1fr;gap:24px} .issue-wrapper .issue-split-side{position:static;top:auto} /* NEWS: 1段目=日付+カテゴリ、2段目=タイトル(全幅) */ .issue-wrapper .issue-news-item{grid-template-columns:78px 1fr;gap:8px 12px;padding:14px 2px} .issue-wrapper .issue-news-item__cat{justify-self:start;width:104px} .issue-wrapper .issue-news-item__title{grid-column:1 / -1;width:100%;font-size:14px;letter-spacing:.2px} .issue-wrapper .issue-news-more{margin-top:20px} /* Q&A */ .issue-wrapper .issue-qa-list{gap:12px} .issue-wrapper .issue-qa-head{padding:16px;gap:10px} .issue-wrapper .issue-qa-qtext{font-size:14px} .issue-wrapper .issue-qa-inner{padding:6px 16px 18px;gap:10px} .issue-wrapper .issue-qa-atext{font-size:13px;line-height:1.9} .issue-wrapper .issue-qa-item.issue-open .issue-qa-body{max-height:900px} /* SPは行数が増えるので上限を拡張 */ /* ---- クロージングCTA ---- */ .issue-wrapper .issue-closing-cta{padding:56px 0} .issue-wrapper .issue-closing-cta__title{font-size:23px;line-height:1.6;letter-spacing:.5px} .issue-wrapper .issue-closing-cta__sub{font-size:14px;margin-top:10px} .issue-wrapper .issue-closing-cta__btns{flex-direction:column;align-items:center;gap:14px;margin-top:24px} } /* ============================================================ TOKIUM経費精算LP（Figma 15210-69031 準拠 / PCのみ・制作中） ============================================================ */ /* ---- ヒーロー（Figma 15210:69312 準拠・右UIコラージュ） ---- */ .issue-wrapper .issue-keihi-hero{background:#fff;height:472px;position:relative;overflow:hidden} /* 右半分のドットフィールド: 上下左右の端ほどドット径が小さくなり、グロナビ境界と下端では完全に消える */ .issue-wrapper .issue-keihi-hero::before{ content:"";position:absolute;z-index:0; left:50%;width:800px;top:0;height:500px; background:url("../img/dots-field.svg") left top/800px 500px no-repeat; pointer-events:none; } .issue-wrapper .issue-keihi-hero__in{width:1103px;margin:0 auto;position:relative;height:100%} .issue-wrapper .issue-keihi-hero__copy{position:relative;z-index:1;padding-top:55px;display:flex;flex-direction:column;gap:24px;width:590px} .issue-wrapper .issue-keihi-hero__head{display:flex;flex-direction:column;gap:12px} .issue-wrapper .issue-keihi-hero__eyebrow{display:flex;align-items:center;gap:10px;font-size:28px;font-weight:400;color:var(--issue-green);letter-spacing:1.4px;line-height:1.2;margin-bottom:12px} /* h1内へ移設(SEO対応)に伴い、旧.issue-keihi-hero__headのflex gap:12pxを代替 */ .issue-wrapper .issue-keihi-hero__eyebrow img{width:27px;height:30px;display:block} .issue-wrapper .issue-keihi-hero__title{font-size:48px;font-weight:600;color:#191414;line-height:1.3;letter-spacing:.54px} .issue-wrapper .issue-keihi-hero__sub{font-size:18px;font-weight:400;color:#191414;line-height:1.6} .issue-wrapper .issue-keihi-hero__cta{display:flex;gap:24px} /* 右UIコラージュ(Figma 15222:71682 / パーツはassets/fvに1x書き出し・本番時2x差し替え可) */ .issue-wrapper .issue-keihi-hero__visual{ position:absolute;z-index:1;right:-37px;top:0;width:636px;height:475px; border-radius:0 0 4.8px 4.8px;overflow:hidden;pointer-events:none;user-select:none; } .issue-wrapper .issue-keihi-hero__visual img{position:absolute;display:block} /* 暫定FV画像(TOPセカンドビューのキャプチャ・追って差し替え) */ .issue-wrapper .issue-fvp-main{left:18px;top:50%;transform:translateY(-50%);width:604px;height:auto} /* tokiumun-3d.png(600px)は実体bbox(x72-502,y8-586)に余白があるため、実体がFigmaの103px枠に合うよう補正 */ .issue-wrapper .issue-fvp-chara{left:354px;top:93px;width:107px;animation:issue-chara-float 3.8s ease-in-out infinite;will-change:transform} .issue-wrapper .issue-keihi-hero__visual::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:96px; background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#FFF 72%); } /* ---- Tasks: 引き受ける4業務（2×2カード） ---- */ .issue-wrapper .issue-scopeacc{background:#fff;padding:56px 0 88px} .issue-wrapper .issue-scopeacc .issue-sec-title{margin-bottom:44px} .issue-wrapper .issue-svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .issue-wrapper .issue-svc-card{ background:#fff;border:1px solid #E5E5E5;border-radius:4px; padding:28px 30px 30px; } .issue-wrapper .issue-svc-card__title{font-size:20px;font-weight:600;color:#14171A;line-height:1.4;margin:0 0 18px} .issue-wrapper .issue-svc-card__list{display:flex;flex-direction:column;gap:12px} .issue-wrapper .issue-svc-card__list p{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.7;color:#33383A;margin:0} /* 担い手バッジ: AI・人 / AI / 人 の3種。幅は最長に合わせて統一 */ .issue-wrapper .issue-ic-badge{ flex:none;margin-top:2px; width:54px;height:20px;border-radius:10px;background:var(--issue-green); display:inline-flex;align-items:center;justify-content:center; font-size:11px;font-weight:700;color:#fff;letter-spacing:.02em;line-height:1; } .issue-wrapper .issue-ic-badge--none{background:transparent} /* ---- Scope 対応範囲 ---- */ .issue-wrapper .issue-map-note{margin-top:28px;font-size:12px;font-weight:400;color:var(--issue-note)} .issue-wrapper .issue-scope-sec{background:#fff;padding:64px 0 84px} .issue-wrapper .issue-scope-sec .issue-sec-title{margin-bottom:52px} .issue-wrapper .issue-scope-group{margin-top:40px} .issue-wrapper .issue-scope-group:first-of-type{margin-top:0} .issue-wrapper .issue-scope-group__label{font-size:20px;font-weight:700;color:var(--issue-green);letter-spacing:.6px} .issue-wrapper .issue-scope-boxes{margin-top:19px;display:flex;flex-wrap:wrap;gap:22px 20px;max-width:1060px} .issue-wrapper .issue-scope-box{ width:338px;height:80px;display:flex;align-items:center;padding:0 18px; background:#EFF1F1;border-radius:4px;opacity:0;transform:translateY(12px); font-size:16px;font-weight:500;color:#222229;white-space:nowrap; transition:opacity .4s ease,transform .4s ease; } .issue-wrapper .issue-scope-box.issue-in{opacity:.7;transform:none} /* ---- Before / After（レース演出） ---- */ .issue-wrapper .issue-ba-section{background:#F6F6F6;padding:58px 0 44px} .issue-wrapper .issue-ba-inner{width:1100px;margin:0 auto} .issue-wrapper .issue-ba-section .issue-sec-title{margin-bottom:24px} .issue-wrapper .issue-ba-box{ position:relative;width:1100px;height:526px; background:#fff;border-radius:4px; transition:opacity .5s ease; } .issue-wrapper .issue-ba-box.issue-fade{opacity:0} .issue-wrapper .issue-ba-row{position:absolute;left:27px;width:1048px} .issue-wrapper .issue-ba-row--before{top:41px} .issue-wrapper .issue-ba-row--after{top:303px} .issue-wrapper .issue-ba-rowhead{display:flex;align-items:center;gap:20px} .issue-wrapper .issue-ba-tag{ height:40px;padding:0 13px 4px;border-radius:20px;flex:none; /* 下4px=実質2px上げ(Noto Sans JPの下寄り補正) */ display:inline-flex;align-items:center;justify-content:center; color:#fff;font-size:15px;font-weight:500;white-space:nowrap; } .issue-wrapper .issue-ba-tag--before{background:#757272;width:151px} /* 経理AIエージェント側と幅を揃える */ .issue-wrapper .issue-ba-tag--after{background:var(--issue-green)} .issue-wrapper .issue-ba-rowlead{font-size:16px;color:var(--issue-text);line-height:1.5;white-space:nowrap} .issue-wrapper .issue-ba-rowlead em{font-style:normal;font-weight:700;color:#00707A} .issue-wrapper .issue-ba-rowlead--after{opacity:0;transform:translateX(10px);transition:opacity .5s ease,transform .5s ease} .issue-wrapper .issue-ba-rowlead--after.issue-on{opacity:1;transform:none} .issue-wrapper .issue-ba-flow{position:relative;height:122px;margin-top:20px} /* ライン: Figma準拠の太いグラデーションバー(高さ20px)+大きめの矢じり(Union 1047×36) */ .issue-wrapper .issue-ba-line{position:absolute;left:6px;top:84px;width:1007px;height:36px;pointer-events:none} /* 完走時: バー右端1040+矢じり27px=先端が右余白33px(左と同じ) */ .issue-wrapper .issue-ba-line__base{position:absolute;left:0;top:8px;width:100%;height:20px;background:#F1F2F2;border-radius:10px} .issue-wrapper .issue-ba-line__run{position:absolute;left:0;top:8px;height:20px;width:0;border-radius:10px 0 0 10px} .issue-wrapper .issue-ba-row--before .issue-ba-line__run{background:linear-gradient(90deg,#B2B7B8 0%,#DFE0E0 100%);color:#DFE0E0} .issue-wrapper .issue-ba-row--after .issue-ba-line__run{background:linear-gradient(90deg,#008D97 0%,#6BCAC5 100%);color:#6BCAC5} .issue-wrapper .issue-ba-line__run::after{ content:"";position:absolute;right:-27px;top:-8px; border-left:28px solid currentColor; border-top:18px solid transparent;border-bottom:18px solid transparent; opacity:0; /* width:0の待機中に矢じりだけ残らないよう、走行開始(.go)で表示 */ } .issue-wrapper .issue-ba-line__run.issue-go::after{opacity:1} .issue-wrapper .issue-ba-step{ position:absolute;left:var(--issue-x);top:0;width:192px; opacity:0;transform:translateY(8px); transition:opacity .35s ease,transform .35s ease; } .issue-wrapper .issue-ba-step.issue-on{opacity:1;transform:none} .issue-wrapper .issue-ba-card{ position:absolute;left:0;top:24px;width:192px;height:31px; border-radius:8.6px;font-size:13px;letter-spacing:.2px; display:flex;align-items:center;justify-content:center;white-space:nowrap; } .issue-wrapper .issue-ba-card--gray{background:#EFF1F1;border:1px solid #8C8989;color:var(--issue-text)} .issue-wrapper .issue-ba-card--goal{background:#EDF7F8;border:1px solid #00727A;color:var(--issue-green)} .issue-wrapper .issue-ba-card--ai{background:#fff;border:1px solid var(--issue-green);color:var(--issue-green)} /* 種明かしの最後に、AIが担う4カードだけがライトグリーンでふわっと一瞬光る */ @keyframes issue-ai-glow{ 0%{box-shadow:0 0 0 0 rgba(0,204,153,0)} 30%{box-shadow:0 0 16px 3px rgba(0,204,153,.65)} 100%{box-shadow:0 0 0 0 rgba(0,204,153,0)} } .issue-wrapper .issue-ba-step.issue-glow .issue-ba-card--ai{animation:issue-ai-glow 1.7s ease-out} /* 光彩のあと、AI工程は役目を終えて後景へ退く(残る作業は最終確認だけ) */ .issue-wrapper .issue-ba-step.issue-faded{opacity:.25;transition:opacity .8s ease} /* 請求書発行: 最初のお客さま工程(請求金額の確定)は1ステップ目として濃度を保つ */ .issue-wrapper .issue-ba-step#issue-stepFirst.issue-faded{opacity:1} /* 別バージョン: 最終承認（＝お客様の作業）をBefore側と同じグレーで見せる。 body.goal-gray で切り替え（?goal=gray） */ .issue-wrapper.issue-goal-gray #issue-stepGoal .issue-ba-card--goal{background:#EFF1F1;border-color:#8C8989;color:#222229} .issue-wrapper.issue-goal-gray #issue-stepGoal .issue-ba-minitag{background:#757272} .issue-wrapper.issue-goal-gray #issue-stepGoal .issue-ba-minitag .issue-ic-person{color:#D9D9D9} .issue-wrapper.issue-goal-gray #issue-stepGoal .issue-ba-node--teal b{background:#757272} .issue-wrapper.issue-goal-gray #issue-stepGoal .issue-ba-node i{background:#B9BDBD} .issue-wrapper .issue-ba-minitag{ position:absolute;left:12px;top:0;height:24px;padding:0 8px; border-radius:8.6px 8.6px 0 0; display:flex;align-items:center;gap:5px; font-size:11px;font-weight:700;color:#fff;white-space:nowrap; } .issue-wrapper .issue-ba-minitag--ai{background:var(--issue-green)} .issue-wrapper .issue-ba-minitag--system{background:#757272} /* タブ内アイコン: 人=下端揃え(Figma 14×17.5) / Tマーク=白丸16pxの中にTOKIUMシンボル */ .issue-wrapper .issue-ba-minitag .issue-ic-person{width:14px;height:17.5px;flex:none;display:block;align-self:flex-end} .issue-wrapper .issue-ba-minitag--system .issue-ic-person{color:#D9D9D9} .issue-wrapper .issue-ba-minitag--ai .issue-ic-person{color:#EDF7F8} .issue-wrapper .issue-ba-minitag .issue-ic-t{ width:16px;height:16px;flex:none;border-radius:9px;background:#fff; display:flex;align-items:center;justify-content:center; } .issue-wrapper .issue-ba-minitag .issue-ic-t svg{width:11.05px;height:9.2px;display:block} /* 85% */ .issue-wrapper .issue-ba-node{ position:absolute;left:76px;top:59px;width:40px; display:flex;flex-direction:column;align-items:center;gap:3px; } .issue-wrapper .issue-ba-node i{width:1px;height:20px;background:#B9BDBD;flex:none} .issue-wrapper .issue-ba-node b{ width:40px;height:40px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center; color:#fff;font-size:15px;font-weight:500; } .issue-wrapper .issue-ba-node--gray b{background:#757272} .issue-wrapper .issue-ba-node--teal b{background:var(--issue-green)} .issue-wrapper .issue-ba-row--after .issue-ba-node i{background:#9CCDD1} /* ナンバリング以外の●: ライン(20px)の85%=17pxでライン内に収める。縦線はナンバリング同様少し離す(円中心はライン中心y102) */ .issue-wrapper .issue-ba-node--dot{position:absolute;left:76px;top:59px;width:40px;display:flex;flex-direction:column;align-items:center;gap:3px} .issue-wrapper .issue-ba-node--dot i{width:1px;height:33.25px;background:#9CCDD1;flex:none} .issue-wrapper .issue-ba-node--dot s{width:13.5px;height:13.5px;border-radius:50%;background:#00CC99;text-decoration:none;flex:none} .issue-wrapper .issue-ba-note{margin-top:26px;text-align:center;font-size:12px;color:var(--issue-note);line-height:1.7} /* ---- 制作中プレースホルダー ---- */ .issue-wrapper .issue-wip{background:#fff;padding:56px 0;text-align:center} .issue-wrapper .issue-wip p{font-size:13px;color:var(--issue-note);letter-spacing:.5px} /* ============================================================ SP (max-width:768px) — keihi固有セクション 共通セクション(header/logos/Reason/Support/Document/QA/CTA)は style.css側のSPブロックが適用される。左右マージン28pxはTOPと同一 ============================================================ */ @media (max-width:768px){ /* ---- ヒーロー ---- */ .issue-wrapper .issue-keihi-hero{height:auto;padding-bottom:8px} .issue-wrapper .issue-keihi-hero::before{display:none} /* ドットはビジュアル側に敷き直す */ .issue-wrapper .issue-keihi-hero__in{width:auto;margin:0 28px;display:flex;flex-direction:column} .issue-wrapper .issue-keihi-hero__copy{order:1} .issue-wrapper .issue-keihi-hero__visual{order:2} .issue-wrapper .issue-keihi-hero__copy{width:auto;padding-top:28px;gap:0} .issue-wrapper .issue-keihi-hero__head{gap:6px} .issue-wrapper .issue-keihi-hero__eyebrow{font-size:16px;letter-spacing:.8px;gap:6px;margin-bottom:6px} .issue-wrapper .issue-keihi-hero__eyebrow img{width:16px;height:18px} .issue-wrapper .issue-keihi-hero__title{font-size:26px;line-height:1.4;letter-spacing:0} .issue-wrapper .issue-keihi-hero__sub{font-size:14px;line-height:1.8;margin-top:4px} .issue-wrapper .issue-keihi-hero__sub br{display:none} /* PC用の改行を解除して幅なりに折り返す */ /* CTA2種は画面下部に固定して全ページ追従（TOPと同作法。.page{padding-bottom:78px}は共通側） */ .issue-wrapper .issue-keihi-hero__cta{ position:fixed;left:0;right:0;bottom:14px;z-index:150; justify-content:center;gap:10px;margin:0;padding:0 16px; } .issue-wrapper .issue-keihi-hero__cta .issue-btn-pill{ width:calc(50% - 5px);max-width:190px;height:48px; font-size:13.5px;padding-right:14px; box-shadow:0 8px 26px rgba(5,5,8,.22); } .issue-wrapper .issue-keihi-hero__cta .issue-btn-pill--outline{background:var(--issue-white)} .issue-wrapper .issue-keihi-hero__cta .issue-cta-arrow{width:12px;right:12px} /* UIコラージュ: zoomでレイアウトごと縮小(636px→約318px)。ドットは背景として一緒に縮む */ .issue-wrapper .issue-keihi-hero__visual{ position:relative;right:auto;top:0;z-index:0; margin:16px auto 0;zoom:.5; background:url("../img/dots-field.svg") center top/800px 500px no-repeat; } /* ---- Tasks: 4カード → 1列 ---- */ .issue-wrapper .issue-scopeacc{padding:48px 0 56px} .issue-wrapper .issue-svc-grid{grid-template-columns:1fr;gap:14px} .issue-wrapper .issue-svc-card{padding:22px 20px 24px} .issue-wrapper .issue-svc-card__title{font-size:17px;margin-bottom:14px} .issue-wrapper .issue-svc-card__list{gap:10px} .issue-wrapper .issue-svc-card__list p{font-size:14px;line-height:1.7} .issue-wrapper .issue-svc-card__list p br{display:none} /* ---- Before / After: 縦型タイムライン ---- PCの横レース(ライン座標0〜1013)を nx(v)=v/2-8.5 で縦座標へ写像。 ステップは--x(PC値)のままCSSのcalcで縦位置に変換する */ .issue-wrapper .issue-ba-section{padding:48px 0 36px} .issue-wrapper .issue-ba-inner{width:calc(100% - 56px);margin:0 auto} .issue-wrapper .issue-ba-box{width:100%;height:auto;padding:22px 16px 40px;box-sizing:border-box} .issue-wrapper .issue-ba-row{position:static;width:auto} .issue-wrapper .issue-ba-rowhead{flex-wrap:wrap;gap:8px 12px} .issue-wrapper .issue-ba-tag{height:34px;font-size:13px} .issue-wrapper .issue-ba-tag--before{width:auto;padding:0 14px 4px} .issue-wrapper .issue-ba-rowlead{font-size:12px;white-space:normal;line-height:1.6} .issue-wrapper .issue-ba-row--after{margin-top:34px} .issue-wrapper .issue-ba-row--after .issue-ba-rowhead{margin-top:0} .issue-wrapper .issue-ba-flow{height:512px;margin-top:14px} /* ライン: 縦に伸びる(中心x=19px) */ .issue-wrapper .issue-ba-line{left:0;top:0;width:38px;height:506px} .issue-wrapper .issue-ba-line__base{left:9px;top:0;width:20px;height:479px;border-radius:10px} .issue-wrapper .issue-ba-line__run{left:9px;top:0;width:20px;height:0;border-radius:10px 10px 0 0} .issue-wrapper .issue-ba-row--before .issue-ba-line__run{background:linear-gradient(180deg,#B2B7B8 0%,#DFE0E0 100%)} .issue-wrapper .issue-ba-row--after .issue-ba-line__run{background:linear-gradient(180deg,#008D97 0%,#6BCAC5 100%)} .issue-wrapper .issue-ba-line__run::after{ right:auto;top:auto;left:-8px;bottom:-27px; border-left:18px solid transparent;border-right:18px solid transparent; border-top:28px solid currentColor;border-bottom:none; } /* ステップ: ラインの右にカードを縦積み */ .issue-wrapper .issue-ba-step{left:56px;right:0;width:auto;top:calc(var(--issue-x) / 2)} .issue-wrapper .issue-ba-card{width:auto;left:0;right:0;font-size:12px} /* ノード: 縦ライン上に円だけ載せる(接続線は非表示) */ .issue-wrapper .issue-ba-node{left:-57px;top:19.5px} .issue-wrapper .issue-ba-node i{display:none} .issue-wrapper .issue-ba-node--dot{left:-57px;top:32.75px} /* ●はwidth:40pxコンテナ内センタリングのためナンバリングと同じleftで中心が揃う */ .issue-wrapper .issue-ba-node--dot i{display:none} .issue-wrapper .issue-ba-note{font-size:11px;text-align:left} /* ---- Scope: カードを1列に ---- */ .issue-wrapper .issue-scope-sec{padding:48px 0 56px} .issue-wrapper .issue-scope-group{margin-top:28px} .issue-wrapper .issue-scope-group__label{font-size:17px} .issue-wrapper .issue-scope-boxes{margin-top:14px;gap:10px;max-width:none} .issue-wrapper .issue-scope-box{ width:100%;height:auto;min-height:52px;padding:14px 16px; font-size:14px;white-space:normal; } } /* ---- 元モックのインラインstyleをクラス化（ガイドライン4: インラインstyle禁止） ---- */ .issue-wrapper .issue-support-card__img{background-position:center;background-size:cover;background-repeat:no-repeat} .issue-wrapper .issue-support-card__img--1{background-image:url("../img/support-01.webp")} .issue-wrapper .issue-support-card__img--2{background-image:url("../img/support-02.png")} .issue-wrapper .issue-support-card__img--3{background-image:url("../img/support-03.webp")} .issue-wrapper .issue-support-card__img--4{background-image:url("../img/support-04.webp")} .issue-wrapper .issue-support-card__img--5{background-image:url("../img/support-05.webp")} .issue-wrapper .issue-support-card__img--6{background-image:url("../img/support-06.png")} .issue-wrapper .issue-cta-link{display:contents} .issue-wrapper .issue-ba-step--x0{--issue-x:0px} .issue-wrapper .issue-ba-step--x200{--issue-x:200px} .issue-wrapper .issue-ba-step--x400{--issue-x:400px} .issue-wrapper .issue-ba-step--x600{--issue-x:600px} .issue-wrapper .issue-ba-step--x800{--issue-x:800px} .issue-wrapper .issue-is-hidden{display:none}