@charset "UTF-8";
/* =======================================
   栄ビルサービス 共通スタイル（色・ヘッダー・フッター・共通パーツ）
   （統合版：エムダブ制作マニュアル準拠）
======================================== */


/* ---------------------------------------
   ▼ common_add.css
--------------------------------------- */

/* =======================================
   栄ビルサービス 追記スタイル（common.css 追記分）
    - サイト共通の色・文字・ボタン・ヘッダー・フッター
======================================== */

/* ---- カラー変数 ---- */
:root{
  --green:#3DA89E;        /* メインのティールグリーン */
  --green-dark:#2F8C83;
  --green-deep:#1F3A44;   /* 濃紺グリーン（お問い合わせ帯・フッター） */
  --green-light:#8ED4C8;  /* 採用情報ボタン用の明るいミント */
  --bg-mint:#EAF6F4;      /* 淡いミント背景 */
  --bg-mint2:#DCF0EC;
  --text:#333333;
  --text-light:#666666;
  --line:#E0E0E0;
  --white:#ffffff;
}

/* ---- ベース ---- */
body{
  color:var(--text);
  font-family:"Noto Sans JP","Helvetica Neue",Helvetica,Arial,"游ゴシック","Yu Gothic",Meiryo,sans-serif;
  line-height:1.8;
  font-size:16px;
}
a{ color:var(--text); text-decoration:none; transition:opacity .3s,background-color .3s,color .3s; }
a:hover{ opacity:.7; }
img{ max-width:100%; height:auto; }
ul,ol{ list-style:none; }
li{ list-style:none; }

/* 英字見出し用 */
.fE{ font-family:"Poppins",sans-serif; }

/* ---- 共通：セクション見出し ---- */
.secTtl{ text-align:center; margin-bottom:50px; }
.secTtl .en{
  display:block; color:var(--green); font-family:"Poppins",sans-serif;
  font-size:14px; letter-spacing:.1em; margin-bottom:10px;
}
.secTtl .en::before{ content:""; display:block; width:50px; height:9px; background-image:url(../img/deco_dots4.png); background-size:contain; background-repeat:no-repeat; margin:0 auto 8px; }
.secTtl .jp{ display:block; font-size:28px; font-weight:700; letter-spacing:.08em; }

/* ---- 共通：ボタン ---- */
.btnMore{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:280px; padding:16px 30px; background:var(--green); color:var(--white);
  border-radius:40px; font-size:15px; letter-spacing:.05em; position:relative;
}
.btnMore::after{
  content:""; width:8px; height:8px; border-top:2px solid #fff; border-right:2px solid #fff;
  transform:rotate(45deg); position:absolute; right:24px;
}
.btnMore:hover{ opacity:1; background:var(--green-dark); }

/* 丸い矢印ボタン（カード用） */
.arrowCircle{
  width:46px; height:46px; border-radius:50%; background:var(--green);
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.arrowCircle::after{
  content:""; width:8px; height:8px; border-top:2px solid #fff; border-right:2px solid #fff;
  transform:rotate(45deg); margin-left:-3px;
}

/* =======================================
   ヘッダー
======================================== */
.siteHeader{ background:var(--white); position:relative; z-index:100; }
.headInner{ display:flex; align-items:center; justify-content:space-between; padding:14px 30px; }
.logo img{ width:210px; }

/* ブランドロゴ（ドット装飾を含む全体を表示・円トリミングなし） */
.headerLogoImg, .footerLogoImg{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.headerLogoImg img, .footerLogoImg img{
  display:block; width:auto; height:100%; object-fit:contain;
}
.headerLogoImg{ height:64px; }
.footerLogoImg{ height:58px; }

.headRight{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.headInfo{ display:flex; align-items:center; gap:16px; }
.headTel{ display:grid; grid-template-columns:auto auto; column-gap:8px; align-items:center; }
.headTel .telIcon{ grid-row:1/3; }
.headTel .telNum{ grid-column:2; font-family:"Poppins",sans-serif; font-size:24px; font-weight:700; color:var(--text); letter-spacing:.02em; line-height:1.2; }
.headTel .telTime{ grid-column:2; font-size:12px; color:var(--text-light); }
.headTel .telIcon{ color:var(--green-deep); font-size:18px; }

.headBtns{ display:flex; gap:8px; }
.headBtns li{ width:150px; }
.headBtns a{ display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 10px; border-radius:8px; font-size:13.5px; font-weight:500; color:#fff; white-space:nowrap; width:100%; box-sizing:border-box; }
.headBtns svg{ width:18px; height:18px; flex-shrink:0; }
.btnRecruit a{ background:var(--green-light); }
.btnContact a{ background:var(--green); }
.btnFaq a{ background:var(--green-deep); }

/* グローバルナビ */
.gnavList{ display:flex; gap:26px; }
.gnavList > li{ position:relative; }
.gnavList > li > a{ font-size:15px; font-weight:500; padding:6px 0; display:block; }
.gnavList > li > a:hover{ color:var(--green); opacity:1; }

.hasChild .subNav{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:var(--white); box-shadow:0 6px 20px rgba(0,0,0,.1); border-radius:8px;
  padding:10px 0; min-width:200px; opacity:0; visibility:hidden; transition:.3s; z-index:50;
}
.hasChild:hover .subNav{ opacity:1; visibility:visible; }
.subNav li a{ display:block; padding:10px 20px; font-size:14px; white-space:nowrap; }
.subNav li a:hover{ background:var(--bg-mint); color:var(--green); opacity:1; }

/* ハンバーガーメニューボタン（PCでは非表示） */
.spMenuBtn{ display:none; }

/* =======================================
   ヘッダー：スマホ（900px以下）
======================================== */
@media (max-width:900px){
  .headInner{ padding:12px 16px; flex-wrap:nowrap; }
  .logo a > span{ font-size:14px !important; gap:6px !important; }
  .headerLogoImg{ height:40px !important; }

  /* PC用の電話・ボタン・ナビはまとめて畳んでおく */
  .headRight{
    position:absolute; top:100%; left:0; right:0;
    background:var(--white); flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .35s ease, opacity .3s ease;
    box-shadow:0 10px 20px rgba(0,0,0,.08);
  }
  .siteHeader.is-open .headRight{ max-height:80vh; overflow-y:auto; opacity:1; visibility:visible; }

  .headInfo{ flex-direction:column; align-items:stretch; gap:0; padding:16px; }
  .headTel{ justify-content:center; padding:10px 0; white-space:nowrap; }
  .headTel .telNum{ font-size:19px; }

  .headBtns{ flex-direction:row; flex-wrap:wrap; gap:6px; margin-top:10px; justify-content:center; }
  .headBtns li{ flex:0 1 auto; width:auto; }
  .headBtns a{ padding:9px 12px; border-radius:6px; font-size:11.5px; white-space:nowrap; width:auto; }
  .headBtns svg{ width:14px; height:14px; }

  .gnav{ border-top:1px solid var(--line); }
  .gnavList{ flex-direction:column; gap:0; }
  .gnavList > li > a{ padding:14px 20px; white-space:nowrap; border-bottom:1px solid var(--line); }

  .hasChild .subNav{
    position:static; transform:none; opacity:1; visibility:visible;
    box-shadow:none; border-radius:0; padding:0; min-width:0; background:var(--bg-mint);
  }
  .subNav li a{ padding:12px 20px 12px 34px; white-space:nowrap; border-bottom:1px solid rgba(0,0,0,.05); }

  /* ハンバーガーボタン本体 */
  .spMenuBtn{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:40px; height:40px; flex-shrink:0; background:none; border:none; cursor:pointer;
  }
  .spMenuBtn span{ display:block; width:24px; height:2px; background:var(--green-deep); transition:.3s; }
  .siteHeader.is-open .spMenuBtn span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .siteHeader.is-open .spMenuBtn span:nth-child(2){ opacity:0; }
  .siteHeader.is-open .spMenuBtn span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* =======================================
   フッター
======================================== */
.siteFooter{ background:var(--green-deep); color:#fff; padding:50px 30px 20px; }
.footInner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; max-width:1100px; margin:0 auto; }
.footLeft .footLogo{ width:auto; margin-bottom:16px; }
.footLeft address{ font-style:normal; font-size:13px; line-height:1.9; color:rgba(255,255,255,.85); }
.footLeft .addrLine{ display:block; margin-bottom:8px; }
.footLeft .addrLine:last-child{ margin-bottom:0; }
.footNav{ display:flex; gap:50px; font-size:13px; }
.footNav a{ color:rgba(255,255,255,.85); }
.footNav a:hover{ color:#fff; }
.footNav ul li{ margin-bottom:10px; }
.footNav .sub li{ padding-left:1em; font-size:12px; color:rgba(255,255,255,.6); }
.copyright{ text-align:center; font-size:11px; color:rgba(255,255,255,.5); margin-top:40px; }

/* =======================================
   フッター：スマホ（900px以下）
======================================== */
@media (max-width:900px){
  .siteFooter{ padding:40px 20px 20px; }
  .footInner{ flex-direction:column; gap:36px; }
  .footLeft address{ font-size:12.5px; }
  .footNav{ flex-direction:column; gap:28px; width:100%; }
  .footNav ul{ width:100%; }
}

/* =======================================
   スクロールで現れる動き（フェードアップ）
======================================== */
.fadeUp{ opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; }
.fadeUp.is-show{ opacity:1; transform:translateY(0); }



/* ---------------------------------------
   ▼ common_add2.css
--------------------------------------- */

/* =======================================
   栄ビルサービス 下層ページ共通スタイル
   （common.css 追記分・下層全ページで使い回す）
======================================== */

/* ---- ページ上部のタイトル帯（全下層共通） ---- */
.pageHead{
  position:relative;
  background:linear-gradient(180deg,#fff 0%,var(--bg-mint) 100%);
  padding:54px 30px 58px;
  text-align:center;
  overflow:hidden;
}
.pageHead .ttlJp{
  font-size:34px; font-weight:700; letter-spacing:.08em; position:relative; z-index:2;
}
.pageHead .ttlEn{
  display:block; font-family:"Poppins",sans-serif; color:var(--green);
  font-size:13px; letter-spacing:.2em; margin-top:10px; text-transform:uppercase; position:relative; z-index:2;
}
/* タイトル帯の薄いドット装飾 */
.pageHead::before{
  content:""; position:absolute; top:18px; right:8%;
  width:90px; height:60px;
  background-image:radial-gradient(var(--green) 2px,transparent 2px);
  background-size:13px 13px; opacity:.25; z-index:1;
}
.pageHead::after{
  content:""; position:absolute; bottom:14px; left:7%;
  width:70px; height:50px;
  background-image:radial-gradient(var(--green) 2px,transparent 2px);
  background-size:13px 13px; opacity:.2; z-index:1;
}

/* ---- パンくずリスト（全下層共通） ---- */
.breadcrumb{
  max-width:1100px; margin:0 auto; padding:14px 30px;
  font-size:12px; color:var(--text-light);
}
.breadcrumb a{ color:var(--text-light); }
.breadcrumb a:hover{ color:var(--green); }
.breadcrumb span{ margin:0 8px; color:var(--line); }

/* ---- 素材待ちのプレースホルダー枠（差し替え用の仮表示） ---- */
.ph-img{
  background:#EDEDED; display:flex; align-items:center; justify-content:center;
  color:#999; font-size:13px; text-align:center; line-height:1.6; border-radius:10px;
}
.ph-img span{ display:block; }


/* ============================================================
   よくあるご質問（FAQ）準備中の表示
   ※FAQは別会社が制作中。URL確定後は .is-prep クラスと
     <span class="prepTag">準備中</span> を外すだけでOK
   ============================================================ */
.is-prep > a{
  pointer-events:none;          /* クリック無効 */
  cursor:default;
  opacity:.55;                  /* 準備中とわかる薄さ */
}
.prepTag{
  display:inline-block;
  margin-left:6px;
  padding:1px 7px;
  font-size:10px;
  line-height:1.6;
  letter-spacing:.04em;
  color:#5c7480;
  background:#eef1f0;
  border:1px solid #dbe3e1;
  border-radius:10px;
  vertical-align:middle;
  white-space:nowrap;
}