@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@800;900&family=Noto+Sans+JP:wght@400;500;700&family=Poppins:wght@500;600&display=swap');

/* ============================================================
   development (システム開発支援) — SWELLネイティブ再構築 v3
   本番(Elementor)の算出スタイル実測値に基づくフル書き直し
   scope: #development-page  / namespace: .wkdv-
   ============================================================ */

#development-page{
  --orange:#E98212; --orange-d:#d8760f;
  --ink:#2B323B;        /* 見出し */
  --text:#4B4F58;       /* 本文 */
  --dark:#141414;       /* ダーク背景(本番 rgb(20,20,20)) */
  --bg:#f6f7f9;         /* ライトグレー背景 */
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --en:"Manrope","Noto Sans JP",sans-serif;
  --num:"Poppins","Noto Sans JP",sans-serif;
  font-family:var(--jp); color:var(--text); font-size:16px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
#development-page *{box-sizing:border-box;}
#development-page img{max-width:100%;height:auto;display:block;}
#development-page h1,#development-page h2,#development-page h3,#development-page h4,#development-page p{margin:0;}
#development-page section{padding:100px 24px;}
#development-page .wkdv-inner{max-width:1140px;margin:0 auto;}

/* ---- 共通セクション見出し（巨大Manrop英字ウォーターマーク + 51.2px日本語） ---- */
#development-page .wkdv-secttl{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin-bottom:60px;min-height:128px;}
#development-page .wkdv-secttl__en{position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);font-family:var(--en);font-size:128px;font-weight:900;line-height:1;letter-spacing:.04em;color:rgba(43,50,59,.06);white-space:nowrap;z-index:0;pointer-events:none;user-select:none;}
#development-page .wkdv-secttl__ja{position:relative;z-index:1;font-size:51.2px;font-weight:700;line-height:1.3;color:var(--ink);}
#development-page .wkdv-secttl__ja .wkdv-num{color:var(--orange);}

/* ---- ボタン ---- */
#development-page .wkdv-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--orange);color:#fff;font-weight:700;font-size:16px;text-decoration:none;padding:16px 36px;border-radius:4px;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:none;}
#development-page .wkdv-btn:hover{background:var(--orange-d);transform:translateY(-2px);}
#development-page .wkdv-btn--ghost{background:transparent;color:#2C333B;border:1px solid #2C333B;border-radius:4px;box-shadow:none;}
#development-page .wkdv-btn--ghost:hover{background:#2C333B;color:#fff;}
#development-page .wkdv-media--dark .wkdv-btn--ghost{color:#fff;border-color:#fff;}
#development-page .wkdv-media--dark .wkdv-btn--ghost:hover{background:#fff;color:#2C333B;}

/* ---- ヒーロー ---- */
#development-page .wkdv-hero{background:linear-gradient(rgba(0,0,0,.90),rgba(0,0,0,.78)),url("https://walker-s.co.jp/wp-content/uploads/2024/05/building-scaled.jpeg") 100% 50%/cover no-repeat;color:#fff;text-align:center;padding:200px 24px 170px;min-height:1080px;box-sizing:border-box;margin-top:-68px;}
#development-page .wkdv-hero__inner{max-width:1240px;margin:0 auto;}
#development-page .wkdv-hero__title{font-weight:700;color:#fff;letter-spacing:.2px;margin-bottom:52px;}
#development-page .wkdv-hero__line{display:block;font-size:62px;line-height:1.6;}
#development-page .wkdv-hero__big{display:block;font-size:110px;line-height:1.05;margin:8px 0;background:linear-gradient(90deg,rgb(252,172,52) 0%,rgb(235,134,21) 30%,rgb(114,56,0) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
#development-page .wkdv-hero__leads{font-size:17px;font-weight:400;line-height:2;color:#fff;margin-bottom:52px;}
#development-page .wkdv-hero__leads p{margin-bottom:14px;}
#development-page .wkdv-hero__leads p:last-child{margin-bottom:0;}
#development-page .wkdv-hero__cta{margin-top:8px;}
#development-page .wkdv-btn--pill{background:#F58700;color:#fff;border-radius:999px;font-weight:700;font-size:15px;padding:17px 52px 16px;box-shadow:0 6px 18px rgba(245,135,0,.35);}
#development-page .wkdv-btn--pill:hover{background:#fff;color:#F58700;transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.25);}

/* ページトップ（右下スクロールボタン）を非表示：このCSSは開発ページのみ読込のためページ限定 */
.p-fixBtnWrap,#pagetop{display:none !important;}

/* ---- 動画 ---- */
#development-page .wkdv-video{background:var(--dark);color:#fff;text-align:center;}
#development-page .wkdv-video__head{font-size:36px;font-weight:700;line-height:1.3;margin-bottom:44px;color:#fff;}
#development-page .wkdv-video__en{display:block;font-size:18px;font-weight:700;color:#fff;margin-bottom:10px;letter-spacing:.02em;}
#development-page .wkdv-video__frame{position:relative;width:100%;max-width:717px;margin:0 auto;aspect-ratio:16/9;border-radius:16px;overflow:hidden;box-shadow:none;}
#development-page .wkdv-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
#development-page .wkdv-video__cta{margin-top:48px;}

/* ---- desktop非表示（本番 elementor-hidden-desktop 準拠） ---- */
#development-page .wkdv-mobile-only{display:none;}
#development-page .wkdv-sma{display:none;}

/* ---- 悩み（モバイルのみ） ---- */
#development-page .wkdv-solution{background:var(--bg);text-align:center;}
#development-page .wkdv-solution__head{font-size:30px;font-weight:700;line-height:1.5;margin-bottom:8px;color:var(--ink);}
#development-page .wkdv-solution__head span{color:var(--orange);}
#development-page .wkdv-solution__sub{font-size:22px;font-weight:700;color:var(--orange);margin-bottom:40px;}
#development-page .wkdv-solution__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1080px;margin:0 auto;}
#development-page .wkdv-scard{background:#fff;border-radius:16px;padding:32px 24px;box-shadow:0 6px 24px rgba(43,50,59,.08);}
#development-page .wkdv-scard img{width:120px;margin:0 auto 20px;}
#development-page .wkdv-scard h3{font-size:19px;font-weight:700;line-height:1.6;margin-bottom:14px;color:var(--ink);}
#development-page .wkdv-scard h3 strong{color:var(--orange);}
#development-page .wkdv-scard p{font-size:14px;color:var(--text);text-align:left;}
#development-page .wkdv-solution__cta{margin-top:44px;}

/* ---- REASON（ダーク背景・左右交互・38.4pxタイトル） ---- */
#development-page .wkdv-reason{background:#000;color:#fff;}
#development-page .wkdv-reason .wkdv-secttl{margin-bottom:64px;}
#development-page .wkdv-reason .wkdv-secttl__ja{font-size:32px;color:#fff;}
#development-page .wkdv-reason .wkdv-secttl__ja .wkdv-num{font-size:51.2px;color:var(--orange);}
#development-page .wkdv-reason .wkdv-secttl__en{color:rgba(255,255,255,.08);}
#development-page .wkdv-reason__blocks{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:100px;}
#development-page .wkdv-rblock{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
#development-page .wkdv-rblock--rev .wkdv-rblock__text{order:2;}
#development-page .wkdv-rblock__no{font-family:var(--num);font-size:16px;font-weight:400;letter-spacing:.14em;color:var(--text);margin-bottom:16px;}
#development-page .wkdv-rblock__no span{font-size:16px;color:var(--text);}
#development-page .wkdv-rblock__ttl{font-size:38.4px;font-weight:700;line-height:1.45;margin-bottom:22px;color:#fff;}
#development-page .wkdv-rblock__ttl span{color:var(--orange);}
#development-page .wkdv-rblock__txt{font-size:15px;line-height:1.9;color:#cfd3d9;}
#development-page .wkdv-rblock__img{background:#fff;border-radius:16px;padding:24px;box-shadow:none;max-width:541px;margin:0 auto;width:100%;}
#development-page .wkdv-rblock__img img{display:block;height:360px;width:100%;object-fit:contain;border-radius:0;}
#development-page .wkdv-rblock__img--photo{background:rgba(255,255,255,.08);border-radius:24px;padding:24px;max-width:589px;}
#development-page .wkdv-rblock__img--photo img{object-fit:cover;border-radius:16px;}
#development-page .wkdv-reason__cta{max-width:900px;margin:64px auto 0;text-align:center;}
#development-page .wkdv-reason__note{font-size:15px;line-height:1.9;color:#cfd3d9;margin-bottom:32px;}

/* ---- COMPANY / TOOL（単一画像） ---- */
#development-page .wkdv-company{background:var(--bg);text-align:center;}
#development-page .wkdv-company__note{font-size:13px;color:var(--text);margin-bottom:26px;}
#development-page .wkdv-company__img,#development-page .wkdv-tool__img{max-width:1080px;margin:0 auto;}
#development-page .wkdv-tool{text-align:center;}
#development-page .wkdv-tool__cta{margin-top:44px;}

/* ---- リード文（共通） ---- */
#development-page .wkdv-lead,
#development-page .wkdv-example__lead,#development-page .wkdv-voice__lead,
#development-page .wkdv-member__lead,#development-page .wkdv-flow__lead,
#development-page .wkdv-media__lead{max-width:780px;margin:0 auto 44px;text-align:center;font-size:16px;line-height:1.9;color:var(--text);}

/* ---- EXAMPLE ---- */
#development-page .wkdv-example__grid,#development-page .wkdv-voice__grid,#development-page .wkdv-media__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1140px;margin:0 auto;}
#development-page .wkdv-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 6px 22px rgba(43,50,59,.09);}
#development-page .wkdv-card__img{aspect-ratio:16/10;overflow:hidden;background:#eef0f3;}
#development-page .wkdv-card__img img{width:100%;height:100%;object-fit:cover;}
#development-page .wkdv-card__ttl{font-size:15px;font-weight:700;line-height:1.55;padding:18px 20px;color:var(--ink);}
#development-page .wkdv-example__cta,#development-page .wkdv-voice__cta,#development-page .wkdv-media__cta,#development-page .wkdv-faq__cta{margin-top:48px;text-align:center;}

/* ---- VOICE ---- */
#development-page .wkdv-voice{background:#f6f6f6;}
#development-page .wkdv-vcard{background:transparent;border-radius:0;overflow:visible;box-shadow:none;display:flex;flex-direction:column;padding:10px;}
#development-page .wkdv-vcard__img{aspect-ratio:16/9;overflow:hidden;background:#eef0f3;border-radius:4px;}
#development-page .wkdv-vcard__img img{width:100%;height:100%;object-fit:cover;}
#development-page .wkdv-vcard__txt{font-size:14px;line-height:1.7;padding:14px 0 6px;flex:1;color:var(--text);}
#development-page .wkdv-vcard__name{font-size:13px;font-weight:700;color:var(--orange);padding:0 0 4px;}
/* カードをクリック可能に（リンク化対応） */
#development-page a.wkdv-card,#development-page a.wkdv-vcard{text-decoration:none;color:inherit;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;}
#development-page a.wkdv-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(43,50,59,.16);}
#development-page a.wkdv-vcard:hover .wkdv-vcard__img img{transform:scale(1.04);}
#development-page a.wkdv-vcard .wkdv-vcard__img img{transition:transform .3s ease;}


/* ---- MEMBERS（黒背景・横並び小アバター） ---- */
#development-page .wkdv-member{background:#000;color:#fff;}
#development-page .wkdv-member .wkdv-secttl__en{color:rgba(255,255,255,.08);}
#development-page .wkdv-member .wkdv-secttl__ja{color:#fff;}
#development-page .wkdv-member__lead{color:#cfd3d9;}
#development-page .wkdv-member__grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px;row-gap:52px;max-width:1280px;margin:0 auto;}
#development-page .wkdv-mcard{display:grid;grid-template-columns:92px 1fr;column-gap:18px;background:transparent;box-shadow:none;border-radius:0;overflow:visible;align-items:center;}
#development-page .wkdv-mcard__photo{grid-row:1 / span 2;width:92px;height:92px;border-radius:8px;overflow:hidden;background:#1c1c1c;align-self:center;}
#development-page .wkdv-mcard__photo img{width:100%;height:100%;object-fit:cover;}
#development-page .wkdv-mcard__name{grid-column:2;grid-row:1;align-self:end;font-size:18px;font-weight:700;color:#fff;padding:0;margin:0;}
#development-page .wkdv-mcard__role{grid-column:2;grid-row:2;align-self:start;font-size:14px;font-weight:700;color:#fff;padding:0;margin:2px 0 0;}
#development-page .wkdv-mcard__bio{grid-column:1 / -1;grid-row:3;font-size:14px;line-height:1.6;color:#fff;padding:16px 0 0;margin:0;}

/* ---- FLOW（奇数:黒カード / 偶数:透明・交互） ---- */
#development-page .wkdv-flow{background:var(--bg);}
#development-page .wkdv-flow__list{list-style:none;max-width:780px;margin:0 auto;padding:0;}
#development-page .wkdv-flow__list li{display:grid;grid-template-columns:64px 1fr;column-gap:28px;align-items:center;border-radius:8px;padding:22px 30px;margin-bottom:14px;background:transparent;box-shadow:none;}
#development-page .wkdv-flow__list li:nth-child(odd){background:#000;}
#development-page .wkdv-flow__step{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--num);color:var(--text);line-height:1;}
#development-page .wkdv-flow__step small{font-size:11px;font-weight:500;letter-spacing:.12em;}
#development-page .wkdv-flow__step b{font-size:30px;font-weight:600;margin-top:4px;}
#development-page .wkdv-flow__ttl{font-size:20px;font-weight:700;margin:0 0 4px;color:var(--ink);}
#development-page .wkdv-flow__txt{font-size:14px;line-height:1.7;color:var(--text);margin:0;}
#development-page .wkdv-flow__list li:nth-child(odd) .wkdv-flow__ttl{color:#fff;}
#development-page .wkdv-flow__list li:nth-child(odd) .wkdv-flow__txt{color:#e3e5e9;}

/* ---- FAQ ---- */
#development-page .wkdv-faq{background:var(--bg);}
#development-page .wkdv-faq__list{max-width:840px;margin:0 auto;}
#development-page .wkdv-faq__item{background:transparent;border:none;border-radius:0;padding:0;margin-bottom:34px;box-shadow:none;}
#development-page .wkdv-faq__q{position:relative;font-size:20px;font-weight:600;padding-left:42px;margin-bottom:14px;color:#333;}
#development-page .wkdv-faq__q::before{content:"Q";position:absolute;left:0;top:-1px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--orange);color:#fff;font-family:var(--num);font-size:16px;font-weight:600;border-radius:8px;}
#development-page .wkdv-faq__a{position:relative;font-size:14px;color:var(--text);padding-left:42px;line-height:1.8;}
#development-page .wkdv-faq__a::before{content:"A";position:absolute;left:0;top:-1px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--orange);font-family:var(--num);font-size:16px;font-weight:600;border-radius:8px;}

/* ---- MEDIA / YOUTUBE（カード枠なし・画像+白/黒キャプション） ---- */
#development-page .wkdv-media--alt{background:var(--bg);}
#development-page .wkdv-media--gray{background:var(--bg);}
#development-page .wkdv-media--dark{background:#000;color:#fff;}
#development-page .wkdv-media--dark .wkdv-secttl__en{color:rgba(255,255,255,.08);}
#development-page .wkdv-media--dark .wkdv-secttl__ja{color:#fff;}
#development-page .wkdv-media--dark .wkdv-media__lead{color:#cfd3d9;}
#development-page .wkdv-mediacard{display:flex;flex-direction:column;background:transparent;border-radius:0;overflow:visible;box-shadow:none;text-decoration:none;color:var(--ink);transition:transform .2s;}
#development-page .wkdv-mediacard:hover{transform:translateY(-4px);}
#development-page .wkdv-mediacard__img{aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#1c1c1c;}
#development-page .wkdv-mediacard__img img{width:100%;height:100%;object-fit:cover;}
#development-page .wkdv-mediacard__ttl{font-size:16px;font-weight:500;line-height:1.6;padding:14px 2px 0;color:var(--ink);}
#development-page .wkdv-media--dark .wkdv-mediacard__ttl{color:#fff;}

/* ---- ACTION ---- */
#development-page .wkdv-action{background:#fff;padding:72px 24px;}
#development-page .wkdv-action__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;max-width:1280px;margin:0 auto;}
#development-page .wkdv-acard{background:transparent;border-radius:0;padding:0;text-align:left;display:block;}
#development-page .wkdv-acard__ttl{font-size:24px;font-weight:700;margin-bottom:14px;color:#2C333B;}
#development-page .wkdv-acard__txt{font-size:14px;color:var(--text);margin-bottom:18px;line-height:1.9;}
#development-page .wkdv-acard__link{font-size:16px;font-weight:700;color:#FF9717;text-decoration:none;display:inline-block;}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media(max-width:1100px){
  #development-page .wkdv-secttl__ja{font-size:42px;}
  #development-page .wkdv-secttl__en{font-size:104px;}
  #development-page .wkdv-rblock__ttl{font-size:32px;}
}
/* ヒーロー見出し：本番Elementorのレスポンシブ実測値に一致（4em→3.12em→24px相当） */
@media(max-width:834px){
  #development-page .wkdv-hero__big{font-size:79px;}
  #development-page .wkdv-hero__line{font-size:41px;}
}
@media(max-width:600px){
  #development-page .wkdv-hero__big{font-size:38.4px;}
  #development-page .wkdv-hero__line{font-size:18px;}
}
@media(max-width:980px){
  #development-page section{padding:76px 22px;}
  #development-page .wkdv-rblock{grid-template-columns:1fr;gap:30px;}
  #development-page .wkdv-rblock--rev .wkdv-rblock__text{order:0;}
  #development-page .wkdv-rblock__img{max-width:560px;margin:0 auto;}
  #development-page .wkdv-rblock__img img{height:auto;width:100%;}
  #development-page .wkdv-reason__blocks{gap:64px;}
  #development-page .wkdv-example__grid,#development-page .wkdv-voice__grid,#development-page .wkdv-media__grid,#development-page .wkdv-member__grid,#development-page .wkdv-solution__grid,#development-page .wkdv-action__grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  #development-page section{padding:60px 16px;}
  #development-page .wkdv-hero__leads{font-size:14px;line-height:1.95;max-width:22em;margin-left:auto;margin-right:auto;text-wrap:balance;line-break:strict;word-break:normal;}
  #development-page .wkdv-nb{white-space:nowrap;}
  #development-page .wkdv-hero__leads p{margin-bottom:20px;}
  #development-page .wkdv-hero__leads br{display:none;}
  #development-page .wkdv-hero{padding:110px 16px 72px;min-height:auto;}
  #development-page .wkdv-hero__title{margin-bottom:28px;}
  #development-page .wkdv-video__head{font-size:24px;}
  #development-page .wkdv-secttl{margin-bottom:40px;min-height:72px;}
  #development-page .wkdv-secttl__en{font-size:60px;}
  #development-page .wkdv-secttl__ja{font-size:28px;}
  #development-page .wkdv-reason .wkdv-secttl__ja{font-size:24px;}
  #development-page .wkdv-reason .wkdv-secttl__ja .wkdv-num{font-size:38px;}
  #development-page .wkdv-rblock__ttl{font-size:26px;}
  #development-page .wkdv-solution__head{font-size:22px;}
  #development-page .wkdv-faq__q{font-size:17px;}
  #development-page .wkdv-example__grid,#development-page .wkdv-voice__grid,#development-page .wkdv-media__grid,#development-page .wkdv-member__grid,#development-page .wkdv-solution__grid,#development-page .wkdv-action__grid{grid-template-columns:1fr;}
}

/* ---- 出現アニメーション（本番Elementor fadeIn/fadeInUp・1.25s再現） ---- */
@keyframes wkdv-fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes wkdv-fadeInUp{from{opacity:0;transform:translate3d(0,100%,0);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:no-preference){
  #development-page .wkdv-anim{visibility:hidden;}
  #development-page .wkdv-anim.wkdv-in{visibility:visible;animation:wkdv-fadeIn 1.25s;}
  #development-page .wkdv-anim--up.wkdv-in{animation:wkdv-fadeInUp 1.25s;}
}

/* ---- ハンバーガーメニューの「お問い合わせ」をオレンジボタンで強調 ---- */
#sp_menu .c-spnav .menu-item a[href*="contact"]{background:#E98212;color:#fff;font-weight:700;text-align:center;border:0;border-radius:8px;margin:12px 16px;padding:15px 16px;box-shadow:0 4px 14px rgba(233,130,18,.32);}
#sp_menu .c-spnav .menu-item a[href*="contact"]:hover{background:#d8760f;color:#fff;}

/* ---- ハンバーガーメニュー(walkers-menu)の「お問い合わせ」をオレンジボタンで強調 ---- */
@media screen and (max-width:834px){
  .walkers-nav.is-active .walkers-menu .menu-item a[href*="contact"]{background:#E98212;color:#fff !important;font-weight:700;text-align:center;border-radius:8px;margin:12px 16px;padding:15px 16px;box-shadow:0 4px 14px rgba(233,130,18,.32);}
  .walkers-nav.is-active .walkers-menu .menu-item a[href*="contact"]:hover{background:#d8760f;color:#fff !important;}
}