@charset "utf-8";
/* =========================================================================
   SUWAクリスティ／MYSAON 掲載 ＋ トップ本文リフレッシュ（2026-08-26 本番反映）
   front-page.php のインライン <style>（test版 page-sctest0821.php）から移設。
   🔴 このファイルは functions.php の enqueue で「最後」に読み込むこと。
      top_recruit.css の末尾に足すと、後から読まれる common/css/contents.css:620
      の #top-visual{z-index:-0} に負けて KVバナーがスライドの下へ沈む。
   ========================================================================= */
/* --- 新規事業ブロック（SUWAクリスティ／MYSAON）--- */
.scx-biz{margin:10px 1% 40px;padding:46px 40px 38px;box-sizing:border-box;background:#fff;box-shadow:0 0 20px rgba(0,0,0,.1);color:#000}
.scx-biz__badge{display:inline-block;margin:0 0 12px;padding:4px 14px;border-radius:999px;background:#e8720c;color:#fff;font-size:12px;font-weight:700;letter-spacing:.1em;line-height:1.7}
.scx-biz__ttl{margin:0 0 28px;padding-left:16px;border-left:6px solid #e8720c;font-size:26px;font-weight:700;line-height:1.35;color:#052f83;text-align:left}
.scx-biz__grid{display:grid;grid-template-columns:1.06fr 1fr 1fr;gap:26px;align-items:start}
.scx-biz__lead p{margin:0 0 18px;font-size:14px;line-height:2}
.scx-biz__catch{font-size:17px!important;font-weight:700;line-height:1.9!important;color:#052f83}
.scx-biz__card{display:block;padding:22px 22px 24px;background:#f2f6fb;border-radius:8px;text-decoration:none;color:#000;transition:all .3s ease}
.scx-biz__card:hover{background:#e9f0fa;transform:translateY(-3px);box-shadow:0 8px 20px rgba(5,47,131,.12)}
.scx-biz__cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.scx-biz__cardttl{margin:0;padding-left:11px;border-left:4px solid #052f83;font-size:16px;font-weight:700;line-height:1.4;color:#052f83;text-align:left}
.scx-biz__cardttl span{display:block;font-size:11px;font-weight:400;letter-spacing:.06em;color:#6b7a8d}
.scx-biz__thumb{flex:0 0 128px;width:128px;line-height:0;border-radius:6px;overflow:hidden}
.scx-biz__thumb img{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;margin:0!important;border:0!important}
.scx-biz__cardtxt{margin:0;font-size:13px;line-height:1.95}
.scx-biz__cardtxt::after{content:" \2192";color:#052f83;font-weight:700}
.scx-biz__cta{display:flex;align-items:center;gap:30px;margin:34px 0 0;padding:28px 0 0;border-top:1px solid #dfe6ef}
.scx-biz__ctatxt{flex:1 1 auto;min-width:0}
.scx-biz__ctattl{margin:0 0 4px;font-size:17px;font-weight:700;line-height:1.5;color:#000}
.scx-biz__ctasub{margin:0;font-size:13px;color:#6b7a8d;line-height:1.7}
/* 電話：p のインライン ::before だと環境により番号の上へ回り込むため、
   p 自体を flex にして ::before を「左横に並ぶ独立したボックス」にする */
.scx-biz__tel{flex:0 0 auto;display:flex;align-items:center;gap:14px;margin:0;font-size:40px;font-weight:700;line-height:1.1;color:#052f83;white-space:nowrap}
.scx-biz__tel a{color:#052f83;text-decoration:none;line-height:1.1}
.scx-biz__tel::before{flex:0 0 auto;font-family:'Font Awesome 6 pro';font-weight:900;content:"\f095";font-size:30px;line-height:1}
.scx-biz__btn{flex:0 0 auto;display:inline-block;padding:20px 40px;border-radius:6px;background:#052f83;color:#fff!important;font-size:17px;font-weight:700;text-decoration:none;white-space:nowrap;transition:all .3s ease}
.scx-biz__btn::after{content:" \203A";margin-left:6px}
.scx-biz__btn:hover{background:#010e59}
@media only screen and (max-width:1100px){
.scx-biz{padding:36px 26px 30px}
.scx-biz__grid{grid-template-columns:1fr 1fr;gap:20px}
.scx-biz__lead{grid-column:1 / -1}
.scx-biz__ttl{font-size:23px}
.scx-biz__tel{font-size:33px;gap:11px}
.scx-biz__tel::before{font-size:25px}
.scx-biz__btn{padding:18px 30px;font-size:16px}
.scx-biz__cta{gap:20px}
}
@media only screen and (max-width:736px){
.scx-biz{margin:0 0 24px;padding:28px 20px 24px}
.scx-biz__grid{grid-template-columns:1fr}
.scx-biz__ttl{font-size:20px;margin-bottom:20px}
.scx-biz__cta{display:block;margin-top:26px;padding-top:22px}
.scx-biz__ctatxt{margin:0 0 14px}
.scx-biz__tel{margin:0 0 16px;justify-content:center;font-size:31px}
.scx-biz__btn{display:block;width:100%;text-align:center;padding:16px 0}
}
/* --- ヘッダーCTAボタン（求人情報の左） --- */
.snsArea .scx-hdbtn{position:relative;z-index:1;float:left;margin:0 10px 0 0;padding:13px;background:#e8720c}
.snsArea .scx-hdbtn ul{font-size:0;list-style:none;margin:0;padding:0}
.snsArea .scx-hdbtn ul li{display:inline-block;margin:0}
.snsArea .scx-hdbtn ul li a{position:relative;z-index:1;font-size:14px;width:100%;height:25px;display:block;color:#fff;text-decoration:none;white-space:nowrap}
.snsArea .scx-hdbtn ul li a:before{font-family:'Font Awesome 6 pro';content:"\f06d";padding-right:6px}
.snsArea .scx-hdbtn ul li a:after{position:absolute;bottom:-2%;left:0;z-index:2;width:100%;border-bottom:#fff 1px solid;transform-origin:right top;transform:scale(0,1);transition:transform .3s ease-in}
.snsArea .scx-hdbtn ul li a:hover:after{transform-origin:left top;transform:scale(1,1)}
@media only screen and (max-width:1240px){.snsArea .scx-hdbtn{display:none}}
/* --- メインビジュアル左下バナー --- */
/* bxSlider(mode:fade) はアクティブなスライドにインラインで z-index:51 を付ける（slideZIndex:50 +1）。
   バナー側の数値を上げるだけだと、今度は固定ヘッダー(z-index:10)より上に出てスクロール時に
   ヘッダーを横切ってしまう。そこで #top-visual 自身に stacking context を作り、
   「KVの中だけの重なり順」に閉じ込めたうえで、その中でスライドより上に置く。 */
#top-visual{z-index:1}
.scx-kvbnr{position:absolute;left:40px;bottom:56px;z-index:60;max-width:400px}
.scx-kvbnr a{display:flex;align-items:center;gap:14px;padding:14px 22px 14px 16px;background:rgba(255,255,255,.94);border-left:5px solid #e8720c;box-shadow:0 6px 24px rgba(0,0,0,.18);text-decoration:none;transition:all .3s ease}
.scx-kvbnr a:hover{background:#fff;transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.24)}
.scx-kvbnr__thumb{flex:0 0 64px;width:64px;line-height:0}
.scx-kvbnr__thumb img{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;margin:0!important;border:0!important}
.scx-kvbnr__body{flex:1 1 auto;min-width:0}
.scx-kvbnr__label{margin:0 0 2px;font-size:10px;font-weight:700;letter-spacing:.14em;color:#e8720c;line-height:1.4}
.scx-kvbnr__title{margin:0 0 3px;font-size:19px;font-weight:700;color:#052f83;line-height:1.3}
.scx-kvbnr__text{margin:0;font-size:12px;color:#33475e;line-height:1.6}
.scx-kvbnr__text::after{content:" \2192"}
@media only screen and (max-width:900px){.scx-kvbnr{left:20px;bottom:28px;max-width:330px}.scx-kvbnr__title{font-size:17px}}
@media only screen and (max-width:600px){.scx-kvbnr{left:12px;right:76px;bottom:16px;max-width:none}.scx-kvbnr a{padding:11px 14px;gap:11px}.scx-kvbnr__thumb{flex:0 0 48px;width:48px}.scx-kvbnr__title{font-size:16px}.scx-kvbnr__text{font-size:11px}}

/* =========================================================================
   トップ本文 今風リフレッシュ（2026-08-21）
   ・すべて .scx-modern（<main> に付与）配下に閉じ込める＝他ページに影響しない
   ・配色は現行のコーポレートカラー #052f83 を維持
   ========================================================================= */
/* --- 1. セクションのリズム（現行はブロック間30px。80〜120pxへ） --- */
/* 🔴 .topics の padding-bottom は theme 側の複数定義（style.css:889/965・top_recruit.css:931/1019）と
   競合して効きが読めなかったため、下余白は 0 に固定し、セクション間の間隔は
   #home_content の padding-top（ID セレクタ＝確実に効く）1か所に集約する。 */
#top_recruit section {
    padding: 60px 10px;
    color: #000;
    width: 100%;
}
.scx-modern .topics{background:#fff}
.scx-modern .topics .inner{max-width:1200px;margin:0 auto;padding:0 24px}
.scx-modern #home_content{padding:60px 0 8px;background:#fff}
/* お問合わせ帯：common/css/default.css:361 の .c-contact{margin-top:60px} を打ち消す */
.scx-modern .c-contact{margin-top:0}
.scx-modern #home_content .central{max-width:1200px;margin:0 auto;padding:0 24px}
.scx-modern .items{background:#f7f9fc;padding:0 !important}
.scx-modern #sub_works_area .central{max-width:1200px;margin:0 auto;padding:0 24px}

/* --- 2. セクション見出し --- */
.scx-modern .topics h2{margin:0 0 6px;font-size:42px;font-weight:700;letter-spacing:.06em;line-height:1.15;color:#052f83;text-align:center}
/* 🔴 products.css:4861 が「.quality h2:before,h2:after{position:absolute;top:0;content:'';width:8px;height:100%}」
   というカンマ区切りで、後半が裸の h2:after になっている＝全 h2 に効く。
   ここに content を足すと幅8pxの絶対配置ボックスに流し込まれて文字が縦積みになる。
   日本語サブタイトルは撤去し、疑似要素は明示的に殺す。 */
.scx-modern .topics h2::before,.scx-modern .topics h2::after{content:none;display:none}

/* --- 3. Topics カード（現行は枠線1px＋上部の青帯のみ） --- */
.scx-modern .topics__lists{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:46px 0 0;padding:0;list-style:none}
.scx-modern .topics__lists li{width:auto;margin:0;border:0;background:transparent}
.scx-modern .topics__lists li:hover{opacity:1}
.scx-modern .topics__lists li dl{display:flex;flex-direction:column;height:100%;margin:0}
.scx-modern .topics__lists li a{display:flex;flex-direction:column;height:100%;padding:30px 26px 26px;background:#fff;border:1px solid #e3e9f1;border-radius:14px;box-shadow:0 1px 2px rgba(5,47,131,.04);text-decoration:none;transition:all .3s cubic-bezier(.2,.7,.3,1)}
.scx-modern .topics__lists li a::before{display:none;content:none}
.scx-modern .topics__lists li a:hover{transform:translateY(-4px);border-color:#c3d5ef;box-shadow:0 14px 30px rgba(5,47,131,.13)}
.scx-modern .topics__lists li dt{margin:0 0 14px}
.scx-modern .topics__lists .date{display:inline-block;padding:5px 13px;border-radius:999px;background:#eef3fb;color:#3b5c96;font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1.6}
.scx-modern .topics__lists .title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:16px;font-weight:700;line-height:1.8;color:#16233a;margin:0}
.scx-modern .topics__lists .icon_arrow_news{display:block;margin-top:auto;padding-top:20px;background:none;width:auto;height:auto;color:#052f83;font-size:13px;font-weight:700;line-height:1}
.scx-modern .topics__lists .icon_arrow_news::after{content:"詳しく見る \2192";display:inline-block;transition:transform .3s}
.scx-modern .topics__lists li a:hover .icon_arrow_news::after{transform:translateX(5px)}
.scx-modern .scx-more{margin:48px 0 0;text-align:center}
.scx-modern .scx-more a{display:inline-block;padding:16px 46px;border:1.5px solid #052f83;border-radius:999px;color:#052f83;font-size:14px;font-weight:700;letter-spacing:.04em;text-decoration:none;transition:all .3s cubic-bezier(.2,.7,.3,1)}
.scx-modern .scx-more a::after{content:" \2192";margin-left:8px}
.scx-modern .scx-more a:hover{background:#052f83;color:#fff;box-shadow:0 8px 20px rgba(5,47,131,.24)}

/* --- 4. 製品ブロック（現行はテキスト30%／画像65%＝1行15文字で読みにくい） --- */
.scx-modern #home_content .flex_ns{display:grid;grid-template-columns:44% 1fr;gap:60px;align-items:center;margin:0 0 100px}
.scx-modern #home_content .flex_ns:nth-child(even){grid-template-columns:1fr 44%}
.scx-modern #home_content .flex_ns:nth-child(even) .home_content_text{order:2}
.scx-modern #home_content .flex_ns:nth-child(even) .home_content_img{order:1}
.scx-modern .home_content_text,.scx-modern .home_content_text:nth-child(even){flex:none;width:auto;margin:0;padding:0}
.scx-modern .home_content_img,.scx-modern .home_content_img:nth-child(even){flex:none;width:auto;padding:0}
.scx-modern .pro_info_top{padding:0;background:transparent;box-shadow:none}
/* 🔴 style.css:137 に「h2::before」だけのグローバル指定があり、content はコメントアウトされて
   眠っているが position:absolute + 147x3px の紺バー付き。ここに content を足すと起動して
   見出しの下中央に飛ぶ。よって英字ラベルは疑似要素ではなく実要素 .scx-eyebrow で出し、
   自サイト見出しの ::before / ::after は明示的に殺しておく。 */
.scx-modern .pro_info_top .title::before,.scx-modern .pro_info_top .title::after,
.scx-modern .scx-biz__ttl::before,.scx-modern .scx-biz__ttl::after,
.scx-modern .worksArea .worksBox .inner h2::before,.scx-modern .worksArea .worksBox .inner h2::after,
.scx-modern .worksArea .worksBox h2::before,.scx-modern .worksArea .worksBox h2::after,
.scx-modern .worksArea .worksBox h3::before,.scx-modern .worksArea .worksBox h3::after{content:none;display:none}
.scx-modern .scx-eyebrow{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.22em;line-height:1;color:#e8720c;text-align:left}
.scx-modern .pro_info_top .title{margin:0 0 24px;font-size:34px;font-weight:700;line-height:1.45;letter-spacing:.01em;color:#0b1b3a;text-align:left}
.scx-modern .pro_info_top .text{margin:0 0 34px;font-size:16px;line-height:2.1;color:#41506a;text-align:left}
.scx-modern .pro_info_top .btn01{display:inline-flex;align-items:center;justify-content:center;float:none;min-width:0;width:auto;padding:16px 40px;border-radius:999px;background:#052f83;font-size:15px;font-weight:700;letter-spacing:.04em;box-shadow:0 6px 18px rgba(5,47,131,.22);transition:all .3s cubic-bezier(.2,.7,.3,1)}
.scx-modern .pro_info_top .btn01::before{content:none;display:none}
.scx-modern .pro_info_top .btn01::after{content:"\2192";position:static;width:auto;height:auto;margin:0 0 0 12px;border:0;transform:none;font-size:16px;transition:transform .3s}
.scx-modern .pro_info_top a.btn01:hover{background:#0b1b3a;transform:translateY(-2px);box-shadow:0 12px 26px rgba(5,47,131,.3)}
.scx-modern .pro_info_top a.btn01:hover::after{transform:translateX(5px)}
.scx-modern .home_content_img img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 18px 42px rgba(11,27,58,.15)}

/* --- 5. 新規事業ブロックを新しいリズムに合わせる --- */
.scx-modern .scx-biz{margin:0 0 100px;padding:52px 48px 44px;border-radius:16px;box-shadow:0 2px 4px rgba(5,47,131,.05),0 18px 42px rgba(11,27,58,.09)}

/* --- 6. 下部4カード --- */
/* 🔴 company.css に既存指定が生きている：
     .worksArea .worksBox{background:#fff;border:1px solid #ddd}   → 角丸カードの外側に「四角い枠」
     .worksArea .worksBox:before{position:absolute;inset:0;content:""}
     .worksBox:hover{background:#071792;color:#fff}                → ホバーで濃紺塗り＋文字が白に
     .worksArea .worksBox .inner:hover h2 / h3 {color:#fff}        → 白背景に白文字＝文字が消える
   外側 .worksBox は素の入れ物に戻し、見た目とホバーは中の <a> だけで表現する。
   セレクタは既存（0,2,0〜0,4,1）を必ず上回る指定にする。 */
.scx-modern .worksArea{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:0}
.scx-modern .worksArea .worksBox{flex:none;width:auto;margin:0;padding:0;float:none;background:transparent;border:0;border-radius:14px;box-shadow:none}
.scx-modern .worksArea .worksBox::before,.scx-modern .worksArea .worksBox::after{content:none;display:none}
.scx-modern .worksArea .worksBox:hover{background:transparent}
.scx-modern .worksArea .worksBox a{display:block;height:100%;padding:30px 24px 28px;background:#fff;border:1px solid #e3e9f1;border-radius:14px;text-decoration:none;transition:all .3s cubic-bezier(.2,.7,.3,1)}
.scx-modern .worksArea .worksBox a:hover{background:#f7faff;border-color:#9fbdea;transform:translateY(-4px);box-shadow:0 14px 30px rgba(5,47,131,.14)}
.scx-modern .worksArea .worksBox .inner{width:auto;height:auto;margin:0;padding:0;background:none;border:0}
.scx-modern .worksArea .worksBox h2,
.scx-modern .worksArea .worksBox:hover h2,
.scx-modern .worksArea .worksBox .inner:hover h2{margin:0 0 4px;font-size:19px;font-weight:700;line-height:1.5;color:#0b1b3a;text-align:left}
.scx-modern .worksArea .worksBox h3,
.scx-modern .worksArea .worksBox:hover h3,
.scx-modern .worksArea .worksBox .inner:hover h3{margin:0 0 20px;font-size:11px;font-weight:600;letter-spacing:.16em;line-height:1.4;color:#8b9bb0;text-align:left}
.scx-modern .worksArea .worksBox .inner:hover{color:#0b1b3a}
.scx-modern .worksArea .worksBox a:hover h2{color:#052f83}
.scx-modern .worksArea .worksBox .imgArea{padding:0;background:none;border:0}
.scx-modern .worksArea .worksBox .imgArea img{display:block;width:auto;max-width:100%;max-height:96px;margin:0 auto}

/* --- 7. レスポンシブ --- */
@media only screen and (max-width:1100px){


.scx-modern .topics h2{font-size:34px}
.scx-modern #home_content .flex_ns,.scx-modern #home_content .flex_ns:nth-child(even){grid-template-columns:1fr;gap:28px;margin:0 0 72px}
.scx-modern #home_content .flex_ns:nth-child(even) .home_content_text,.scx-modern #home_content .flex_ns .home_content_text{order:2}
.scx-modern #home_content .flex_ns:nth-child(even) .home_content_img,.scx-modern #home_content .flex_ns .home_content_img{order:1}
.scx-modern .pro_info_top .title{font-size:27px}
.scx-modern .scx-biz{margin:0 0 72px;padding:36px 26px 30px}
.scx-modern .worksArea{grid-template-columns:repeat(2,1fr);padding:0}

}
@media only screen and (max-width:736px){


.scx-modern .topics .inner{padding:0 16px}
.scx-modern .scx-eyebrow{font-size:11px;letter-spacing:.18em;margin-bottom:10px}
.scx-modern .topics h2{font-size:29px}
.scx-modern .topics__lists{grid-template-columns:1fr;gap:16px;margin-top:32px}
.scx-modern .topics__lists li a{padding:24px 20px 22px}
.scx-modern #home_content .central,.scx-modern #sub_works_area .central{padding:0 16px}
.scx-modern #home_content .flex_ns,.scx-modern #home_content .flex_ns:nth-child(even){margin:0 0 56px;gap:22px}
.scx-modern .pro_info_top .title{font-size:23px;margin-bottom:18px}
.scx-modern .pro_info_top .text{font-size:15px;line-height:2;margin-bottom:26px}
.scx-modern .pro_info_top .btn01{width:100%;padding:15px 0}
.scx-modern .home_content_img img{border-radius:12px}
.scx-modern .scx-biz{margin:0 0 56px;border-radius:12px}
.scx-modern .worksArea{gap:14px;padding:0}
.scx-modern .worksArea .worksBox a{padding:22px 18px 20px}
.scx-modern .worksArea .worksBox h2,.scx-modern .worksArea .worksBox:hover h2,.scx-modern .worksArea .worksBox .inner:hover h2{font-size:17px}
.scx-modern .scx-more a{display:block;width:100%;padding:15px 0}
}