/* ===== 20_site.css ===== */ /* ===== 20_site.css ===== 株式会社颯電（りゅうでん）受領デザインCSS（dc helmet統合・重複排除） 結合順: site(本CSS) → skin(40_skin.css) → override(50_override.css) */ /* ---------- ベース / リセット ---------- */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:#ffffff;color:#20272c;font-family:'Zen Kaku Gothic New',sans-serif;line-height:2.05;letter-spacing:.02em;font-weight:500;font-size:17px;text-wrap:pretty;-webkit-font-smoothing:antialiased} a{color:#1a86ad;text-decoration:none} a:hover{color:#20272c} img{max-width:100%;display:block} h1,h2,h3,p,ul,ol,table,figure{margin:0} ul{padding:0;list-style:none} .anton{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.01em} /* ---------- ヘッダー ---------- */ .rd-h-anton{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.01em} [data-rd-hroot]{display:contents} .sc-host:has(> [data-rd-hroot]){display:contents} .rd-navlink:hover{color:#1a86ad} .rd-navcta:hover{transform:translateY(-2px)} .rd-hasdrop{position:relative} .rd-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:14px;display:none;z-index:60} .rd-hasdrop:hover .rd-drop{display:block} .rd-drop-inner{background:#fff;border:1px solid #e7ebee;border-radius:12px;padding:8px;min-width:210px;box-shadow:0 16px 36px rgba(15,20,24,.14);display:flex;flex-direction:column;gap:2px} .rd-drop-inner a{padding:10px 14px;border-radius:8px;color:#20272c;font-weight:700;font-size:14px;white-space:nowrap} .rd-drop-inner a:hover{background:#f3f6f8;color:#1a86ad} .rd-mgroup summary{list-style:none;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2c353c;cursor:pointer} .rd-mgroup summary::-webkit-details-marker{display:none} .rd-mgroup summary a{color:#fff;font-weight:700;padding:15px 24px;flex:1;text-decoration:none} .rd-mgroup summary .chev{color:#8b959d;padding:0 22px;font-size:12px;transition:transform .2s} .rd-mgroup[open] summary .chev{transform:rotate(180deg)} .rd-msub{color:#cdd4da;font-weight:700;font-size:14px;padding:13px 24px 13px 40px;border-bottom:1px solid #2c353c;display:block} .rd-mgroup summary a:hover{color:#fccf00} .rd-msub:hover{color:#fccf00} aside nav>a:hover{color:#fccf00!important} /* デスクトップナビ/バーガーの出し分け（dcはJSで幅判定→CSS化） */ @media(min-width:1024px){[data-desktop-nav]{display:flex!important}[data-burger]{display:none!important}} /* ドロワー開閉（dcの{{drawerStyle}}/{{overlayStyle}}→[data-open]化。JSは属性トグルのみ） */ [data-drawer][data-open="true"]{transform:none!important;box-shadow:-20px 0 50px rgba(0,0,0,.4)} [data-drawer-overlay][data-open="true"]{opacity:1!important;pointer-events:auto!important} /* ---------- フッター ---------- */ .rd-f-anton{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.01em} @keyframes rd-f-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes rd-f-mesh{0%{background-position:0% 50%,100% 50%,50% 0%,50% 100%,50% 50%}50%{background-position:100% 40%,0% 60%,60% 100%,40% 0%,50% 50%}100%{background-position:0% 50%,100% 50%,50% 0%,50% 100%,50% 50%}} .rd-f-mesh-text{background-color:#20272c;background-image:radial-gradient(60% 60% at 20% 30%,rgba(64,199,237,.95),transparent 60%),radial-gradient(55% 55% at 80% 25%,rgba(252,207,0,.9),transparent 60%),radial-gradient(60% 60% at 70% 80%,rgba(64,199,237,.85),transparent 62%),radial-gradient(55% 55% at 25% 85%,rgba(252,207,0,.75),transparent 62%),radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.35),transparent 60%);background-size:180% 180%,180% 180%,180% 180%,180% 180%,180% 180%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:rd-f-mesh 9s ease-in-out infinite} .rd-btn:hover{transform:translateY(-2px)} .rd-lift3{transition:transform .2s ease}.rd-lift3:hover{transform:translateY(-3px)} .rd-lift4{transition:transform .2s ease}.rd-lift4:hover{transform:translateY(-4px)} .rd-fnav a:hover{color:#1a86ad} .rd-flink:hover{color:#20272c} .rd-ftel:hover{color:#1a86ad} @media(min-width:760px){.rd-froot{grid-template-columns:1.3fr 1fr}} /* ---------- TOP アニメーション系 ---------- */ @keyframes rd-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes rd-spark{0%,100%{opacity:1}45%{opacity:.35}} @keyframes rd-ring{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}} @keyframes rd-tilt{0%,100%{transform:rotateZ(-10deg) rotateX(-28deg) scale(1)}50%{transform:rotateZ(9deg) rotateX(22deg) scale(1.06)}} @keyframes rd-strip{from{transform:translateY(0)}to{transform:translateY(-50%)}} @keyframes rd-float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-24px) rotate(2.2deg)}} @keyframes rd-mesh{0%{background-position:0% 50%,100% 50%,50% 0%,50% 100%,50% 50%}50%{background-position:100% 40%,0% 60%,60% 100%,40% 0%,50% 50%}100%{background-position:0% 50%,100% 50%,50% 0%,50% 100%,50% 50%}} .rd-mesh-text{background-color:#20272c;background-image:radial-gradient(60% 60% at 20% 30%,rgba(64,199,237,.95),transparent 60%),radial-gradient(55% 55% at 80% 25%,rgba(252,207,0,.9),transparent 60%),radial-gradient(60% 60% at 70% 80%,rgba(64,199,237,.85),transparent 62%),radial-gradient(55% 55% at 25% 85%,rgba(252,207,0,.75),transparent 62%),radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.35),transparent 60%);background-size:180% 180%,180% 180%,180% 180%,180% 180%,180% 180%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:rd-mesh 9s ease-in-out infinite} @keyframes rd-lantern{0%,100%{opacity:.8;filter:brightness(1)}40%{opacity:1;filter:brightness(1.22)}68%{opacity:.88;filter:brightness(1.06)}} @keyframes rd-spin{to{transform:rotate(360deg)}} .rd-anim [data-marker]{background-image:linear-gradient(120deg,#fccf00,#ffe259);background-repeat:no-repeat;background-position:0 84%;background-size:0% 44%;padding:0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .85s cubic-bezier(.22,1,.3,1)} .rd-anim [data-reveal]:not(.rd-hidden) [data-marker]{background-size:100% 44%} .rd-anim [data-marker-d]{transition-delay:.5s} .rd-anim [data-reveal]{transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)} .rd-anim [data-reveal].rd-hidden{opacity:0;transform:translateY(30px)} .rd-anim [data-reveal-d]{transition-delay:.12s} .rd-anim [data-reveal-d2]{transition-delay:.24s} .rd-hero-gallery{flex:0 0 clamp(340px,63%,1040px);max-width:1040px} .rd-hero-copy{flex:1 1 auto} @media(max-width:820px){.rd-concept-h{white-space:normal!important;font-size:clamp(24px,6.5vw,44px)!important}} @media(min-width:821px) and (max-width:1024px){ .rd-hero-overlay{left:50px!important} .rd-hero-overlay h1{font-size:clamp(40px,7vw,80px)!important} .rd-hero-overlay p{font-size:clamp(15px,2vw,22px)!important} .rd-hero-gallery{flex:0 0 52%!important;max-width:600px!important} } @media (max-width: 820px){ .rd-hero-gallery{position:absolute!important;inset:0;flex:none;max-width:none;width:100%;opacity:1;filter:none} .rd-hero-copy{position:relative;z-index:3;width:100%;text-align:center!important} .rd-hero-copy h1{text-align:center!important} .rd-hero-overlay{left:0!important;right:0;z-index:8;align-items:center!important;text-align:center;padding:26px 22px!important;width:auto} .rd-hero-overlay h1{white-space:normal!important} .rd-hero-inner{background:#fccf00;backdrop-filter:none;-webkit-backdrop-filter:none;padding:22px 24px;display:inline-flex;flex-direction:column;align-items:center;gap:16px} .rd-ryuden{z-index:5!important;left:50%!important;transform:translateX(-50%) rotate(13deg)!important;opacity:.9} } @media (max-width: 760px){.rd-about-body{text-align:left!important}} @media (max-width: 760px){.rd-work-overlay{background:linear-gradient(0deg,rgba(20,25,30,.94) 0%,rgba(20,25,30,.78) 45%,rgba(20,25,30,.5) 100%)!important}} @media (max-width: 859px){.rd-partner-media{aspect-ratio:4/3;min-height:0!important}} @media (max-width: 920px){ .rd-recruit-media{padding-bottom:0!important} .rd-recruit-text{padding-top:clamp(8px,3vw,20px)!important} .rd-recruit-media{order:-1} } @media (prefers-reduced-motion: reduce){ [data-reveal]{opacity:1!important;transform:none!important;transition:none!important} .rd-marquee>*{animation:none!important} .rd-spark{animation:none!important} .rd-ring,.rd-tilt{animation:none!important} .rd-strip{animation:none!important} .rd-float{animation:none!important} } /* ---------- 下層ページ共通部品 ---------- */ .rd-stack{display:flex;gap:clamp(26px,4vw,60px);align-items:center} @media(max-width:860px){.rd-stack{flex-direction:column!important}.rd-stack>*{width:100%!important;flex:1 1 auto!important}} .rd-centertext{text-align:center} @media(max-width:640px){.rd-centertext{text-align:left!important}} .rd-2col{} @media(max-width:720px){.rd-2col{grid-template-columns:1fr!important}} .rd-noline{white-space:nowrap} @media(max-width:860px){.rd-noline{white-space:normal}} @media(max-width:560px){.rd-btnrow{grid-auto-flow:row!important}} /* あゆみ（沿革フロー） */ .rd-flow{position:relative;padding-left:34px} .rd-flow::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:#e2e8ec} .rd-flow-item{position:relative;padding-bottom:clamp(36px,5vw,56px)} .rd-flow-item:last-child{padding-bottom:0} .rd-flow-item::before{content:"";position:absolute;left:-34px;top:6px;width:20px;height:20px;border-radius:50%;background:#40c7ed;border:4px solid #fff;box-shadow:0 0 0 2px #40c7ed} .rd-flow-now::before{background:#fccf00;box-shadow:0 0 0 2px #fccf00} /* FAQ（Q&Aアコーディオン） */ .rd-qa{background:#20272c;padding:clamp(16px,2.4vw,22px) clamp(18px,2.6vw,28px);margin-bottom:12px} .rd-qa .q{display:flex;gap:12px;align-items:flex-start;font-weight:900;color:#ffffff;font-size:clamp(16px,2vw,19px);line-height:1.6;cursor:pointer;list-style:none} .rd-qa .q::-webkit-details-marker{display:none} .rd-qa .q::before{content:"Q";font-family:'Anton',sans-serif;color:#40c7ed;font-size:22px;line-height:1;flex:none} .rd-qa .q::after{content:"+";margin-left:auto;font-family:'Anton',sans-serif;color:#fccf00;font-size:22px;line-height:1;flex:none} .rd-qa[open] .q::after{content:"−"} .rd-qa .a{display:flex;gap:12px;color:#e7ecf0;font-weight:500;font-size:clamp(15px,1.8vw,17px);line-height:1.9;margin-top:12px} .rd-qa .a::before{content:"A";font-family:'Anton',sans-serif;color:#fccf00;font-size:22px;line-height:1;flex:none} /* 仕様テーブル（会社概要・募集要項など） */ .rd-spec th,.rd-spec td{vertical-align:middle!important} .rd-spec th{color:#fccf00!important;white-space:nowrap} @media(max-width:640px){.rd-spec tr{display:block;border-bottom:1px solid #e2e8ec;padding:6px 0}.rd-spec th,.rd-spec td{display:block;width:100%;border:none!important}.rd-spec th{background:#20272c!important;color:#fccf00!important;display:flex!important;align-items:center;min-height:44px;padding:10px 14px!important;width:100%!important;box-sizing:border-box}} .rd-qual li{display:flex;align-items:center;min-height:64px} @media(max-width:560px){.rd-qual{grid-template-columns:1fr!important}} /* インタビュー（求職者・未経験・経験者） */ .rd-intv-head{display:flex;gap:clamp(18px,3vw,32px);align-items:center;margin-bottom:18px} .rd-intv-head.rev{flex-direction:row-reverse} .rd-intv-photo{flex:0 0 clamp(120px,22vw,190px);width:clamp(120px,22vw,190px);aspect-ratio:1;border-radius:12px;overflow:hidden;background:#1c242c} .rd-intv-photo img{width:100%;height:100%;object-fit:cover;display:block} .rd-intv-qa p{font-size:14.5px!important;line-height:1.85!important} .rd-intv-qa p.q{font-size:14.5px!important;margin-top:12px!important} @media(max-width:600px){.rd-intv-head{flex-direction:column!important;text-align:center;align-items:center}.rd-intv-head.rev{flex-direction:column!important}} @media(max-width:640px){.rd-cards3{grid-template-columns:1fr!important}} /* 施工実績カード（静的部・instance導入） */ .rd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)} @media(max-width:900px){.rd-cards{grid-template-columns:repeat(2,1fr)!important}} @media(max-width:560px){.rd-cards{grid-template-columns:1fr!important}} .rd-thumb{width:100%;height:240px} .rd-cards>a{display:flex;flex-direction:column} .rd-cards>a .rd-thumb{order:-1;border-top:none} @media(max-width:900px){.rd-thumb{height:215px}} @media(max-width:560px){.rd-thumb{height:205px}} /* お問い合わせフォーム（静的意匠。実フォームはCueZillaパーツ） */ .rd-field{width:100%;border:1px solid #cbd3da;background:#fff;padding:14px 16px;font-family:inherit;font-size:16px;color:#20272c;border-radius:0} .rd-field:focus{outline:none;border-color:#40c7ed;box-shadow:0 0 0 3px rgba(64,199,237,.2)} .rd-lbl{display:block;font-weight:900;font-size:15px;margin-bottom:8px;color:#20272c} /* ブログ一覧（CueZilla parts131415_blog を受領CSSで pre-style／サイドバー付きレイアウト） */ [class*="parts131415_blog"] .container-lg{max-width:1300px;margin:0 auto;padding:0 clamp(16px,5vw,50px)} [class*="parts131415_blog"] .parts131415_blog_title_wrap{text-align:center;margin-bottom:clamp(28px,4vw,44px)} [class*="parts131415_blog"] .parts131415_blog_title_wrap h2{color:#20272c!important;font-family:'Anton',sans-serif;font-size:clamp(40px,8vw,68px);letter-spacing:.08em;line-height:1} [class*="parts131415_blog"] .row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);list-style:none;padding:0;margin:0} .rd-blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(24px,3vw,44px);align-items:start} .rd-blog-layout .row{grid-template-columns:repeat(2,1fr)!important;min-width:0} .rd-blog-layout .col{min-width:0} .rd-blog-aside h3{font-family:'Anton',sans-serif;font-size:15px;letter-spacing:.12em;color:#20272c;padding-bottom:10px;border-bottom:2px solid #40c7ed;margin-bottom:14px} .rd-blog-aside+.rd-blog-aside,.rd-blog-aside.rd-mt{margin-top:clamp(28px,4vw,40px)} .rd-blog-aside li a{display:block;color:#20272c;padding:11px 0;border-bottom:1px solid #e7ebee;font-weight:700;font-size:14px;line-height:1.5} .rd-blog-aside li a:hover{color:#1a86ad} .rd-blog-aside .rd-date{display:block;font-family:'Anton',sans-serif;font-size:12px;color:#8894a0;letter-spacing:.06em;margin-bottom:2px} @media(max-width:820px){.rd-blog-layout{grid-template-columns:1fr}.rd-blog-layout .row{grid-template-columns:repeat(2,1fr)!important}} @media(max-width:560px){.rd-blog-layout .row{grid-template-columns:1fr!important}} @media(max-width:900px){[class*="parts131415_blog"] .row{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){[class*="parts131415_blog"] .row{grid-template-columns:1fr}} [class*="parts131415_blog"] .card{display:block;background:#fff;border:1px solid #e7ebee!important;border-radius:0!important;color:#20272c;transition:transform .2s ease} [class*="parts131415_blog"] .card:hover{transform:translateY(-3px)} [class*="parts131415_blog"] .card-body{padding:clamp(20px,3vw,28px) clamp(18px,2.4vw,24px)} [class*="parts131415_blog"] .card-body a{display:block;color:inherit} [class*="parts131415_blog"] .card-title{text-align:center;color:#1a86ad;font-family:'Anton',sans-serif;font-size:13px;letter-spacing:.14em;margin-bottom:12px} [class*="parts131415_blog"] .card-text{text-align:center;font-weight:900;font-size:clamp(16px,2vw,19px);line-height:1.5;margin-bottom:16px;color:#20272c} [class*="parts131415_blog"] .parts131415_blog_thumbnail{height:240px;overflow:hidden} @media(max-width:900px){[class*="parts131415_blog"] .parts131415_blog_thumbnail{height:215px}} @media(max-width:560px){[class*="parts131415_blog"] .parts131415_blog_thumbnail{height:205px}} /* ===== 40_skin.css ===== */ /* ============================================================ ★★★ このファイルは【全案件共通の資産】です。案件では編集しないでください ★★★ ------------------------------------------------------------ （Claude Code / Claude Design / 手作業、いずれの経路でも同じです） ■ 案件ごとの調整は、必ず `override.css` に書いてください。 読み込み/結合順が … → style.css → cuezilla-skin.css → 【override.css】 なので、 override.css に書いた指定は本ファイルに打ち消されません。**案件の上書きが効く唯一の場所です。** （例: カード面を白にしたい → override.css に `:root{ --dyn-surface:#fff; }`） ■ なぜ編集してはいけないか 本ファイルを案件で書き換えた瞬間、その案件の skin は共通資産から切り離されます。 以後、共通側で直した修正（カード高さの不揃い／サイドバーの可読性／ フォーム送信ボタンの崩れ 等）が **その案件には二度と届きません**。 実際に S01189 で本ファイルの §0 が案件調整で書き換えられ、共通修正が届かなくなりました。 「毎案件おなじ崩れを直している」の原因はこれです。 ■ 共通で直すべき崩れを見つけたら 案件で握り込まず、正本 `skin/cuezilla-skin.css` へ還流してください（全案件に効きます）。 還流し忘れると、次の同期でその修正は消えます。 詳細は R-30（70_運用ルール/運用ルール集.md）。 ============================================================ */ /* ============================================================ CueZilla 動的パーツ スキンキット v1.0 ------------------------------------------------------------ 目的: ブログ/施工実績(blog-ex)/お問い合わせ/パンくず/ページヘッダー等の CueZilla 既定パーツを、サイトのトンマナ（ダーク/ライト・ブランド色・ フォント・角丸）に "自動で寄せる" 汎用CSS。案件ごとの調整を最小化する。 思想: (1) 色は CueZilla テーマ変数(--main-color 等)から自動連動 → サイトのテーマ設定がそのまま skin にも効く（色は一元管理） (2) フォント/角丸/グリッド幅はトークンで指定（テーマ変数に無いため） (3) partsNNN は採番が可変だが接尾辞は共通(_post_wrap 等) → 属性セレクタ [class*="_xxx"] で番号非依存に当てる（単一属性セレクタまで。積んで詳細度を稼がない） ★適用範囲と安全契約（重要・memory: cuezilla-css-safety-contract）: ・本skinは「CueZilla既定の動的パーツ」だけを寄せる。サイトのフリーコーディング設計には当てない （生成サイトCSSは変数非依存＋具体値＋自作接頭辞クラスで組む＝構造的に非衝突・skinと干渉しない）。 ・[class*=…]を積んで詳細度を同点/超過させる手法は禁止（脆い・過剰マッチ・アーマーレース）。 単一の番号非依存セレクタ＋!important1個で当てる（theme_defaultは非importantなので確定勝ち）。 ・!important可は「レイヤーで越えられない相手」＝theme_default／body内インライン／BSユーティリティ／ .partsNNN_blog_(0,3,0) のみ。後者(0,3,0)+!importantには詳細度で負けるため、 負けた時だけ §14 の手順で実採番(0,3,1)を【案件CSS】に足して勝つ（汎用skinには番号を書かない）。 ・変数の注意：実機は body内コンポ