@charset "UTF-8";
/* =======================================
   栄ビルサービス スマホ用スタイル（900px以下）全ページ統合
   （統合版：エムダブ制作マニュアル準拠）
======================================== */


/* ---------------------------------------
   ▼ sp_add_mv.css
--------------------------------------- */

/* =======================================
   栄ビルサービス TOP メインビジュアル（スマホ・900px以下）
======================================== */
@media (max-width:900px){

  .mv{ padding:0 0 20px; position:relative; }
  .mvInner{ padding:0 20px; }

  /* キャッチコピーだけ画像の余白部分に重ねる（.mv基準で絶対配置） */
  .mvCopy{
    position:static !important;
    top:auto; left:auto;
    width:100%;
    margin-bottom:20px;
  }
  .mvCopy h1, .mvCopy h2{
    position:absolute;
    top:calc(30px + 8vw);
    left:20px;
    display:inline;
    font-size:22px; line-height:1.7; z-index:6;
    background:rgba(255,255,255,.82);
    padding:6px 10px;
    border-radius:6px;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
  }
  .mvCopy .lead{ font-size:13.5px; }

  .mvAnniv{ margin-top:20px; gap:10px; }
  .mvAnniv .num b{ font-size:38px; }
  .mvAnniv .num sup{ font-size:14px; }
  .mvAnniv .num small{ font-size:9px; }
  .mvAnniv .annivTxt{ font-size:11px; padding-left:10px; }

  .mvFullImage{ width:100%; position:relative; z-index:1; }

}



/* ---------------------------------------
   ▼ sp_add_sections.css
--------------------------------------- */

/* =======================================
   栄ビルサービス TOP セクション群（スマホ・900px以下）
======================================== */
@media (max-width:900px){

  .secInner{ padding:0 20px; }

  /* ---- 私たちの想い（TOP内テキスト） ---- */
  .philoSec{ padding:50px 0; }
  .philoSec .lead{ line-height:2; font-size:14px; }
  .philoSec::before{ width:150px; height:140px; opacity:.6 !important; }

  /* ---- 事業案内：画像を上、文字を下に積む ---- */
  .serviceSec{ padding:50px 0; }
  .serviceSec::before{ width:160px; height:150px; top:10px; }
  .serviceList{ gap:18px; }
  .serviceCard{
    flex-direction:column; align-items:stretch; gap:16px;
    padding:18px; position:relative;
  }
  .serviceCard .thumb{ width:100%; height:180px; }
  .serviceCard .body h3{ font-size:18px; }
  .serviceCard .body p{ font-size:13px; }
  .serviceCard .arrowCircle{ position:absolute; top:18px; right:18px; width:32px; height:32px; }

  /* ---- 採用・協力会社募集 ---- */
  .joinSec{ padding:50px 0; }
  .joinSec .secLead{ font-size:13px; margin-bottom:26px; }
  .joinPhoto{ position:relative; top:auto; width:80%; margin:0 auto 18px; }
  .joinPhoto img{ width:100%; height:auto; }
  .joinPhoto.left, .joinPhoto.right{ left:auto; right:auto; }
  .joinPhoto .dotGrid{ display:none; }
  .joinCards{ flex-direction:column; gap:20px; max-width:none; }
  .joinCard{ flex-direction:row; padding:24px 20px; }
  .joinIco{ width:56px; height:56px; }
  .joinIco img{ width:30px; height:30px; }
  .joinBody .ttl{ font-size:17px; }
  .joinTxt{ font-size:12.5px; }

  /* ---- 会社案内・ESG：縦積み ---- */
  .aboutSec{ padding:0 0 50px; }
  .aboutCards{ flex-direction:column; gap:20px; max-width:none; }
  .aboutCard .cardImg{ height:180px; }

  /* ---- お問い合わせ ---- */
  .contactSec{ padding:50px 0; }
  .contactSec .secLead{ font-size:13px; }
  .contactBox{ padding:30px 22px; }
  .contactTop{ flex-direction:column; gap:30px; }
  .contactTel{ padding-right:0; border-right:none; padding-bottom:24px; border-bottom:1px solid var(--line); }
  .contactTel .num{ font-size:30px; }
  .contactArea h3, .contactArea p{ padding-right:0; }
  .mapImg{ position:relative; top:auto; right:auto; width:140px; height:140px; margin:16px auto 0; }
  .contactBottom{ flex-direction:column; align-items:flex-start; gap:20px; }
  .btnContactForm{ width:100%; min-width:0; }

  /* お問い合わせの背景装飾：小さく畳んで文字と被らないように */
  .contactDeco{ transform:scale(.55); }
  .contactDeco.d1{ top:6px; left:6px; }
  .contactDeco.d2{ display:none; }
  .contactDeco.d3{ top:6px; right:6px; }
  .contactDeco.sq1, .contactDeco.sq2, .contactDeco.sq3{ display:none; }

}



/* ---------------------------------------
   ▼ sp_company.css
--------------------------------------- */

/* =======================================
   栄ビルサービス「会社案内」専用（スマホ・900px以下）
======================================== */
@media (max-width:900px){

  .companyPage .secInner{ padding:0 20px; }
  .cpNav{ gap:8px; margin:32px 20px 0; }
  .cpNav a{ padding:8px 16px; font-size:12px; }

  .cpSec{ padding:44px 0; }
  .cpTtl{ margin-bottom:28px; }
  .cpTtl .jp{ font-size:20px; }

  .cpTable th, .cpTable td{ display:block; width:auto; padding:12px 16px; }
  .cpTable th{ border-bottom:none; }
  .cpTable td{ border-top:none; padding-top:6px; }

  .cpTlItem{ flex-direction:column; gap:6px; padding:16px 0; }
  .cpTlItem .date{ width:auto; font-size:13.5px; }
  .cpTlItem .detail{ font-size:13px; }

  .cpPending{ padding:36px 20px; font-size:13px; }

  /* 組織図（画像） */
  .cpOrgImg{ max-width:100%; }

  .cpAccessRow{ flex-direction:column; gap:24px; }
  .cpAccessInfo{ width:100%; }
  .cpMapBox iframe{ height:260px; }

}



/* ---------------------------------------
   ▼ sp_contact.css
--------------------------------------- */

/* =======================================
   栄ビルサービス「お問い合わせ」専用（スマホ・900px以下）
======================================== */
@media (max-width:900px){

  .contactPage .secInner{ padding:34px 20px 70px; }

  .ctLead{ margin-bottom:28px; }
  .ctLead p{ font-size:13.5px; text-align:left; }

  .ctTelBox{ padding:22px 24px; margin-bottom:26px; gap:16px; }
  .ctTelBody .num{ font-size:22px; }
  .ctMailLabel{ font-size:14.5px; margin-bottom:18px; }

  .ctFormNote{ font-size:12px; padding:14px 16px; margin-bottom:26px; }

  .ctForm{ gap:20px; }
  .ctRow input, .ctRow select, .ctRow textarea{ font-size:13.5px; padding:12px 14px; }
  .ctForm input[type="text"], .ctForm input[type="tel"], .ctForm input[type="email"],
  .ctForm textarea, .ctForm select{ font-size:14px; padding:12px 14px; }
  .ctForm label{ font-size:14px; }
  .ctForm .wpcf7-submit{ width:100%; padding:15px; justify-content:center; }

  .ctSubmit button{ width:100%; padding:15px; justify-content:center; }

}



/* ---------------------------------------
   ▼ sp_esg.css
--------------------------------------- */

/* =======================================
   栄ビルサービス「ESGの取り組み」専用（スマホ・900px以下）
======================================== */
@media (max-width:900px){

  /* PCと同じ三角形の重なり配置を、スマホ幅に縮小して再現 */
  .esgPillars{ position:relative !important; width:350px; max-width:100%; height:305px !important; margin:36px auto 0; display:block !important; padding:0; }
  .esgPillarBadge{ position:absolute !important; width:172px !important; height:172px !important; }
  .esgPillarBadge.pb-env{ top:0 !important; left:89px !important; right:auto !important; z-index:3; }
  .esgPillarBadge.pb-social{ top:132px !important; left:16px !important; right:auto !important; z-index:2; }
  .esgPillarBadge.pb-gov{ top:132px !important; left:162px !important; right:auto !important; z-index:1; }
  .esgPillarBadge .bgCircle{ position:absolute; inset:0; width:100%; height:100%; border-radius:50%; }
  .esgPillarBadge .content{ padding:10px; }
  .esgPillarBadge .en{ font-size:16px; margin-bottom:2px; }
  .esgPillarBadge .en b{ font-size:18px; }
  .esgPillarBadge .jp{ font-size:10px; margin-bottom:5px; }
  .esgPillarBadge .tagline{ font-size:10px; line-height:1.4; }

  .esgIntro{ padding:40px 20px; }
  .esgIntro h3{ font-size:19px; margin-bottom:16px; }
  .esgIntro p{ font-size:13.5px; text-align:left; line-height:1.95; }

  .esgWorkTtl{ font-size:19px; padding-top:40px; }

  .esgPage .secInner{ padding:0 20px; }
  .esgPillarSec{ padding:36px 0; }

  .esgPillarHead{ flex-direction:column; gap:16px; margin-bottom:24px; align-items:flex-start; }
  .esgPillarHead .headTxt{ text-align:left; }
  .esgPillarHead .headTxt .jp{ font-size:20px; }
  .esgSdgsRow{ gap:8px; }
  .esgSdgsRow img{ width:48px; height:48px; }

  .esgItemGrid{ flex-direction:column; gap:16px; }
  .esgItem{ padding:22px 22px; }
  .esgItem .itemImg .imgBox{ height:150px; }
  .esgItem .itemBody{ padding:18px 20px 22px; }

}



/* ---------------------------------------
   ▼ sp_event.css
--------------------------------------- */

/* =======================================
   栄ビルサービス「イベント企画・運営」専用（スマホ・900px以下）
======================================== */
@media (max-width:900px){

  .eventLead{ font-size:14px; line-height:2; padding:38px 20px 6px; text-align:left; }
  .eventPage .secInner{ padding:0 20px; }

  .evtNav{ gap:8px; margin:20px 20px 0; }
  .evtNav a{ padding:8px 16px; font-size:12px; }

  .evtProvided{ padding:0 20px; margin-top:30px; }
  .evtProvided .provLabel{ left:20px; font-size:13px; padding:8px 16px; }
  .evtProvidedRow img{ width:140px; height:140px; }
  .evtProvArrow{ display:none; }

  .evtIntroTtl{ font-size:19px; margin:44px 0 4px; }

  .evtSec{ padding:44px 0; }
  .evtTtl{ margin-bottom:24px; }
  .evtTtl .jp{ font-size:20px; }
  .evtSec .secLead{ font-size:13.5px; margin-bottom:24px; }

  .evtFeature{ flex-direction:column; gap:18px; }
  .evtFeature .mainImg{ width:100%; max-width:420px; margin:0 auto; }
  .evtFeature .mainImg img{ height:220px; }
  .evtFeature .body p{ font-size:13.5px; }

  .evtCircleWrap{ margin-top:22px; }
  .evtCircleRow{ gap:20px; }
  .evtCircleItem{ width:114px; }
  .evtCircleItem .circle{ width:92px; height:92px; border:2px solid var(--green); }
  .evtCircleItem .label{ font-size:11.5px; }

  .evtPoint{ padding:30px 22px; border-radius:12px; }
  .evtPoint h4{ font-size:18px; }
  .evtPoint p{ font-size:13.5px; }
  .evtPointTags span{ font-size:12.5px; padding:7px 14px; }

  .evtInsta{ padding:40px 0; }

  .evtFaq{ padding:10px 0 50px; }

}



/* ---------------------------------------
   ▼ sp_finishing.css
--------------------------------------- */

/* =======================================
   栄ビルサービス「美装・仕上げ清掃」専用（スマホ・900px以下）
======================================== */
@media (max-width:900px){

  .finishLead{ font-size:14px; line-height:2; padding:38px 20px 6px; text-align:left; }
  .finishPage .secInner{ padding:0 20px; }

  /* アンカーナビ */
  .finNav{ gap:8px; margin:20px 20px 0; }
  .finNav a{ padding:8px 16px; font-size:12px; }

  .finTtl{ margin-bottom:28px; }
  .finTtl .jp{ font-size:22px; }

  .finSec{ padding:48px 0; }
  .finSec .secLead{ font-size:13.5px; margin-bottom:26px; }

  /* 2カラム→1列 */
  .finPair{ grid-template-columns:1fr; gap:20px; }
  .finPairItem img{ height:200px; }

  /* 横並び→縦積み */
  .finRow,
  .finRow.reverse{ flex-direction:column; gap:20px; }
  .finRowImg{ width:100%; max-width:420px; margin:0 auto; }
  .finRowImg img{ min-height:0; height:220px; }
  .finRowBody h4{ font-size:17px; }

  /* チェックリスト：2列 */
  .finCheckList{ grid-template-columns:1fr 1fr; }
  .finCheckList--house{ grid-template-columns:1fr; justify-content:start; gap:10px 0; }
  .finCheckList--house li{ white-space:normal; }
  .finCheck{ padding:16px 18px; }

  /* 協力会社募集 */
  .finPartner{ padding:40px 0; }
  .finPartner .inner{ flex-direction:column; gap:22px; text-align:center; padding:0 20px; }
  .finPartner .pImg{ width:100%; max-width:320px; }
  .finPartner .pBody h4{ font-size:18px; }

  .finFaq{ padding:40px 0 50px; }

}



/* ---------------------------------------
   ▼ sp_maintenance.css
--------------------------------------- */

/* =======================================
   栄ビルサービス「メンテナンス清掃」専用（スマホ・900px以下）
======================================== */
@media (max-width:900px){

  .maintLead{ font-size:14px; line-height:2; padding:38px 20px 6px; text-align:left; }
  .maintPage .secInner{ padding:0 20px; }

  .maintTtl{ margin-bottom:28px; }
  .maintTtl .jp{ font-size:22px; }
  .subHead{ font-size:18px; }

  /* 主な対応施設：2列 */
  .facilitySec{ padding:44px 0; }
  .facilityGrid{ grid-template-columns:1fr 1fr; gap:14px; }
  .facilityCard .ph{ height:110px; }

  /* サービス大セクション */
  .svcSec{ padding:48px 0; }
  .svcNav{ gap:8px; margin-top:20px; }
  .svcNav a{ padding:8px 16px; font-size:12px; }

  /* 横並び→縦積み */
  .svcRow,
  .svcRow.reverse{ flex-direction:column; gap:20px; margin-top:28px; }
  .svcRowImg{ width:100%; max-width:420px; margin:0 auto; }
  .svcRowImg img{ min-height:0; height:220px; }
  .pageHead .ttlJp .brSp{ display:block; }
  .svcRowBody h4{ font-size:17px; }

  /* チェックリスト：2列 */
  .checkList{ grid-template-columns:1fr 1fr; }
  .checkBox{ padding:16px 18px; }

  /* 小2カラム→1列 */
  .svcPair{ grid-template-columns:1fr; gap:20px; margin-top:26px; }
  .svcPairItem img{ height:200px; }

  /* 比較表：横スクロール可 */
  .compareBox{ padding:22px 18px; }
  .compareBox .cTtl .big{ font-size:16px; }
  .compareTableWrap{ overflow-x:auto; }
  .compareTable{ min-width:460px; }
  .compareTable tbody th{ width:auto; }

  /* 環境衛生：1列 */
  .envGrid{ grid-template-columns:1fr; gap:18px; margin-top:26px; }
  .envItem img{ height:200px; }

  /* 協力会社募集 */
  .partnerBand{ padding:40px 0; }
  .partnerBand .inner{ flex-direction:column; gap:22px; text-align:center; }
  .partnerBand .pImg{ width:100%; max-width:320px; }
  .partnerBand .pBody h4{ font-size:18px; }

  .faqLink{ padding:40px 0 50px; }

}
@media (max-width:900px){
  .moldImgs{ grid-template-columns:1fr; gap:14px; }
  .moldImgs img{ height:200px; }
}



/* ---------------------------------------
   ▼ sp_news.css
--------------------------------------- */

/* =======================================
   栄ビルサービス「新着情報」専用（スマホ・900px以下）
======================================== */
@media (max-width:900px){

  .newsPage .secInner{ padding:34px 20px 60px; }

  .nwTabs{ gap:8px; margin-bottom:26px; }
  .nwTabs a{ padding:8px 18px; font-size:12.5px; }

  .nwItem{ padding:24px 2px; }
  .nwTitle{ font-size:15px; }
  .nwExcerpt{ font-size:13px; }

  .nwPager{ margin-top:34px; }

  .nwArticleTitle{ font-size:18.5px; margin:12px 0 26px; }
  .nwBody{ font-size:13.5px; }

  .nwPrevNext{ font-size:12.5px; padding:22px 0; margin-top:30px; }

  .nwBackList{ margin-top:30px; }
  .nwBackList a{ padding:11px 32px; }

}



/* ---------------------------------------
   ▼ sp_partner.css
--------------------------------------- */

/* =======================================
   栄ビルサービス「協力会社募集」専用（スマホ・900px以下）
======================================== */
@media (max-width:900px){

  .partnerLead{ padding:38px 20px 6px; }
  .partnerLead h3{ font-size:19px; }
  .partnerLead p{ font-size:13.5px; text-align:left; }
  .partnerPage .secInner{ padding:0 20px; }

  .ptnNav{ gap:8px; margin:22px 20px 0; }
  .ptnNav a{ padding:8px 16px; font-size:12px; }

  .ptnSec{ padding:48px 0; }
  .ptnTtl{ margin-bottom:30px; }
  .ptnTtl .jp{ font-size:20px; }

  .ptnReasons{ grid-template-columns:1fr; gap:32px; }
  .ptnReasonItem .circle{ width:96px; height:96px; margin-bottom:16px; }
  .ptnReasonItem .circle svg{ width:38px; height:38px; }

  .ptnPersonRow{ flex-direction:column; gap:24px; }
  .ptnPersonImg{ width:100%; max-width:420px; margin:0 auto; }
  .ptnPersonImg img{ height:220px; }
  .ptnPersonBody p{ font-size:13.5px; }

  .ptnWelcome{ padding:24px 22px; margin-top:30px; }
  .ptnWelcome h5{ font-size:14.5px; }
  .ptnWelcome li{ font-size:13px; }

  .ptnTable th, .ptnTable td{ display:block; width:auto; padding:14px 16px; }
  .ptnTable th{ border-bottom:none; }
  .ptnTable td{ border-top:none; padding-top:8px; }

  .ptnCta{ padding:44px 0; }
  .ptnCta .ctaBtn a{ padding:14px 34px; font-size:14px; }

}



/* ---------------------------------------
   ▼ sp_philosophy.css
--------------------------------------- */

/* =======================================
   栄ビルサービス 下層ページ スマホ用（sp_contents.css 追記分）
   ＠media (max-width:900px)
======================================== */
@media (max-width:900px){

  /* ---- ページタイトル帯 ---- */
  .pageHead{ padding:38px 20px 42px; }
  .pageHead .ttlJp{ font-size:25px; }
  .pageHead .ttlEn{ font-size:11px; }

  .breadcrumb{ padding:10px 20px; font-size:11px; }

  /* ---- 共通見出し ---- */
  .philoTtl{ margin-bottom:30px; }
  .philoTtl .jp{ font-size:22px; }
  .philoTtl .sub{ font-size:17px; }
  .philoPage .secInner{ padding:0 20px; }

  /* ---- 代表挨拶 ---- */
  .greetingSec{ padding:50px 0; }
  .greetingBox{ flex-direction:column; gap:26px; }
  .greetingPhoto{ width:100%; max-width:300px; margin:0 auto; }
  .greetingPhoto .ph-img{ height:320px; }
  .greetingBody h3{ font-size:20px; }
  .greetingBody p{ font-size:14.5px; line-height:2; }

  /* ---- 経営理念 ---- */
  .creedSec{ padding:54px 0; }
  .creedSec .creedLead{ font-size:14.5px; line-height:2.2; text-align:left; }
  .creedSec .creedLead br{ display:none; }

  /* ---- 大切にしていること ---- */
  .valuesSec{ padding:54px 0 60px; }
  .valuesSec .valuesLead{ margin-bottom:36px; text-align:left; }
  .valueRow,
  .valueRow.reverse{ flex-direction:column; gap:20px; margin-bottom:40px; }
  .valueRowImg{ width:100%; max-width:340px; margin:0 auto; }
  .valueRowBody h3{ font-size:19px; }

}



/* ---------------------------------------
   ▼ sp_privacy.css
--------------------------------------- */

/* =======================================
   栄ビルサービス「プライバシーポリシー」専用（スマホ・900px以下）
======================================== */
@media (max-width:900px){

  .privacyPage .secInner{ padding:34px 20px 70px; }
  .pvBlock{ margin-bottom:40px; }
  .pvBlock h3{ font-size:15px; }
  .pvBlock p, .pvBlock li{ font-size:13px; }

}



/* ---------------------------------------
   ▼ sp_recruit.css
--------------------------------------- */

/* =======================================
   栄ビルサービス「採用情報」専用（スマホ・900px以下）
======================================== */
@media (max-width:900px){

  .rcLead{ padding:38px 20px 6px; }
  .rcLead h3{ font-size:19px; }
  .rcLead p{ font-size:13.5px; text-align:left; }
  .recruitPage .secInner{ padding:0 20px; }

  .rcNav{ gap:8px; margin:22px 20px 0; }
  .rcNav a{ padding:8px 16px; font-size:12px; }

  .rcSec{ padding:48px 0; }
  .rcTtl{ margin-bottom:30px; }
  .rcTtl .jp{ font-size:20px; }

  .rcCharms{ grid-template-columns:1fr; gap:32px; }
  .rcCharmItem .circle{ width:96px; height:96px; margin-bottom:16px; }
  .rcCharmItem .circle svg{ width:38px; height:38px; }

  .rcPersonRow{ flex-direction:column; gap:24px; }
  .rcPersonImg{ width:100%; max-width:420px; margin:0 auto; }
  .rcPersonImg img{ height:220px; }
  .rcPersonBody p{ font-size:13.5px; }

  .rcWelcome{ padding:24px 22px; margin-top:30px; }
  .rcWelcome h5{ font-size:14.5px; }
  .rcWelcome li{ font-size:13px; }

  .rcPending{ padding:36px 20px; font-size:13px; }

  .rcCta{ padding:44px 20px 54px; }
  .rcCta .ctaBtn a{ padding:14px 34px; font-size:14px; }

}



/* ---------------------------------------
   ▼ sp_thanks.css
--------------------------------------- */

/* =======================================
   栄ビルサービス「お問い合わせ完了（THANK YOU）」専用（スマホ・900px以下）
======================================== */
@media (max-width:900px){

  .thanksPage{ padding:60px 20px 80px; }
  .thanksIcon{ width:70px; height:70px; margin-bottom:22px; }
  .thanksTtl{ font-size:20px; margin-bottom:20px; }
  .thanksLead{ font-size:13.5px; text-align:left; margin-bottom:28px; }
  .thanksNote{ padding:20px 22px; margin-bottom:34px; text-align:left; }
  .thanksBtn{ width:100%; justify-content:center; padding:15px; }
  .spOnly{ display:inline; }

}