/* =========================================================
   UNITE Custom Stylesheet
   Design Guidelines v1.0 準拠
   このファイル1つを WordPress の「追加CSS」または
   子テーマの assets/css/unite-custom.css として読み込みます。
   ========================================================= */

:root{
  --blue:#1D5FBF;
  --navy:#143A73;
  --white:#FFFFFF;
  --tint:#F7FBFF;
  --accent:#EAF4FF;
  --gray:#4C545C;
  --gray-bg:#F4F5F6;
  --line:#E7ECF0;
}

.unite-page *{ box-sizing:border-box; }
.unite-page{ background:var(--white); color:var(--navy); font-family:'Noto Sans JP', sans-serif; line-height:1.8; }
.unite-page a{ color:inherit; }
.unite-page img{ max-width:100%; display:block; }
.unite-page .label{ font-size:12px; letter-spacing:.14em; color:var(--gray); font-weight:500; }
.unite-page .wrap{ max-width:1120px; margin:0 auto; padding:0 40px; }
.unite-page .measure{ max-width:720px; }

.unite-page .reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.unite-page .reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .unite-page .reveal{ opacity:1; transform:none; transition:none; } }

.unite-page .btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 30px; font-weight:700; font-size:14px; text-decoration:none; border-radius:2px; background:var(--blue); color:#fff; transition:background .2s ease; }
.unite-page .btn:hover{ background:#164C9C; color:#fff; }
.unite-page .btn-outline{ background:none; border:1px solid var(--blue); color:var(--blue); }
.unite-page .btn-outline:hover{ background:var(--blue); color:#fff; }
.unite-page .tel-link{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; text-decoration:none; }
.unite-page .tel-link svg{ width:15px; height:15px; }

.unite-page .page-banner{ background:var(--tint); padding:72px 0; }
.unite-page .breadcrumb{ font-size:12px; color:var(--gray); margin-bottom:16px; }
.unite-page .breadcrumb a{ text-decoration:none; color:var(--gray); }
.unite-page .page-banner h1{ font-size:clamp(26px,3.2vw,36px); font-weight:900; margin:0 0 14px; }
.unite-page .page-banner p{ font-size:14px; color:var(--gray); max-width:640px; margin:0; line-height:2; }

.unite-page .photo-placeholder{
  position:relative;
  background:var(--tint);
  border:1px dashed #C7D6E2;
  display:flex; align-items:center; justify-content:center;
  border-radius:2px;
  overflow:hidden;
}
.unite-page .photo-placeholder .ph-note{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--gray); text-align:center; padding:20px;
}
.unite-page .photo-placeholder .ph-note svg{ width:28px; height:28px; opacity:.55; }
.unite-page .photo-placeholder .ph-note span{ font-size:12px; letter-spacing:.06em; }

.unite-page .section-head{ text-align:center; margin-bottom:64px; }
.unite-page .section-head .label{ margin-bottom:14px; }
.unite-page .section-head h2{ font-size:clamp(24px,3vw,32px); font-weight:900; margin:0 auto; max-width:600px; }

.unite-page .statement{ padding:88px 0; background:var(--white); text-align:center; }
.unite-page .statement .measure{ margin:0 auto; }
.unite-page .statement .label{ margin-bottom:18px; }
.unite-page .statement h2{ font-size:clamp(26px,3.4vw,38px); font-weight:900; line-height:1.7; margin:0 0 32px; }
.unite-page .statement p{ font-size:14.5px; color:var(--gray); line-height:2.1; margin:0; }
.unite-page .statement-photo{ margin-top:64px; aspect-ratio:16/8; border-radius:2px; overflow:hidden; }
.unite-page .statement-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.unite-page .statement-photo:hover img{ transform:scale(1.03); }

.unite-page .chips{ background:var(--tint); padding:0; }
.unite-page .chips-inner{ max-width:1120px; margin:0 auto; padding:56px 40px; display:flex; flex-wrap:wrap; }
.unite-page .chip{ flex:1; min-width:180px; padding:12px 24px; border-right:1px solid var(--line); }
.unite-page .chip:last-child{ border-right:none; }
.unite-page .chip .label{ margin-bottom:8px; }
.unite-page .chip .val{ font-size:16px; font-weight:700; color:var(--navy); }
@media (max-width:800px){ .unite-page .chip{ min-width:50%; border-right:none; padding:16px 24px; } }

.unite-page .services{ padding:88px 0; background:var(--white); }
.unite-page .service-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.unite-page .service-gallery > *:not(.service-item){ display:none !important; }
.unite-page .service-item figure{ margin:0; }
.unite-page .service-item .photo{ aspect-ratio:4/3; overflow:hidden; border-radius:2px; }
.unite-page .service-item .photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.unite-page .service-item:hover .photo img{ transform:scale(1.03); }
.unite-page .service-item figcaption{ margin-top:18px; }
.unite-page .service-item h3{ font-size:16px; font-weight:700; margin:0 0 8px; }
.unite-page .service-item p{ font-size:13.5px; color:var(--gray); line-height:1.95; margin:0; }
@media (max-width:860px){ .unite-page .service-gallery{ grid-template-columns:1fr; } }

.unite-page .works{ padding:88px 0; background:var(--gray-bg); }
.unite-page .filter-tabs{ display:flex; justify-content:center; gap:28px; margin-bottom:48px; flex-wrap:wrap; }
.unite-page .filter-btn{ background:none; border:none; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--gray); padding:6px 2px; cursor:pointer; border-bottom:2px solid transparent; }
.unite-page .filter-btn:hover{ color:var(--navy); }
.unite-page .filter-btn.is-active{ color:var(--blue); border-bottom-color:var(--blue); }
.unite-page .work-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
/* WordPressが自動挿入する空のp/brタグがグリッドのマスを占有して崩れるのを防ぐ */
.unite-page .work-gallery > *:not(.work-item){ display:none !important; }
.unite-page .work-item{
  display:block;
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:2px;
  text-decoration:none;
}
.unite-page .work-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.unite-page .work-item:hover img{ transform:scale(1.03); }
.unite-page .work-item .tag{ position:absolute; left:14px; bottom:14px; background:rgba(255,255,255,.94); color:var(--navy); font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:2px; }
.unite-page .work-item.is-hidden{ display:none; }
@media (max-width:700px){ .unite-page .work-gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .unite-page .work-gallery{ grid-template-columns:1fr; } }
.unite-page .works-more{ text-align:center; margin-top:48px; }

.unite-page .locations{ padding:88px 0; background:var(--white); }
.unite-page .site-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.unite-page .site-grid > *:not(.site-card){ display:none !important; }
.unite-page .site-card{ border:1px solid var(--line); padding:36px; border-radius:2px; }
.unite-page .site-card .label{ margin-bottom:14px; }
.unite-page .site-card h3{ font-size:19px; margin:0 0 12px; font-weight:700; }
.unite-page .site-card address{ font-style:normal; font-size:14px; line-height:2.15; color:var(--gray); }
@media (max-width:700px){ .unite-page .site-grid{ grid-template-columns:1fr; } }

.unite-page .recruit{ padding:88px 0; background:var(--tint); text-align:center; }
.unite-page .recruit .measure{ margin:0 auto; }
.unite-page .recruit h2{ font-size:clamp(24px,3vw,32px); font-weight:900; margin:16px 0 24px; }
.unite-page .recruit p{ font-size:14px; color:var(--gray); margin:0 0 36px; }
.unite-page .job-list{ display:grid; gap:20px; text-align:left; margin-top:56px; }
.unite-page .job-card{ background:#fff; border:1px solid var(--line); border-radius:2px; padding:28px 32px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.unite-page .job-card h3{ font-size:16px; margin:0 0 6px; font-weight:700; }
.unite-page .job-card p{ font-size:13.5px; color:var(--gray); margin:0; }

.unite-page .voices{ padding:88px 0; background:var(--white); }
.unite-page .voice-frame{ border:1px dashed var(--line); padding:56px 40px; text-align:center; border-radius:2px; max-width:720px; margin:0 auto; }
.unite-page .voice-frame p{ color:var(--gray); font-size:14px; margin:0; line-height:1.95; }

.unite-page .info-table{ width:100%; border-collapse:collapse; max-width:720px; }
.unite-page .info-table tr{ border-top:1px solid var(--line); }
.unite-page .info-table tr:last-child{ border-bottom:1px solid var(--line); }
.unite-page .info-table th{ text-align:left; font-size:13px; font-weight:700; color:var(--gray); padding:18px 24px 18px 0; width:160px; vertical-align:top; }
.unite-page .info-table td{ font-size:14px; padding:18px 0; vertical-align:top; }

.unite-page footer.site-footer{ background:var(--gray-bg); border-top:1px solid var(--line); padding:64px 0 0; }
.unite-page .footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; }
.unite-page .footer-col h4{ font-size:12px; letter-spacing:.1em; margin:0 0 16px; color:var(--gray); font-weight:700; }
.unite-page .footer-col address{ font-style:normal; font-size:14px; line-height:2.15; color:var(--gray); }
.unite-page .footer-col a{ display:block; font-size:14px; line-height:2.35; color:var(--gray); text-decoration:none; }
.unite-page .footer-col a:hover{ color:var(--blue); }
.unite-page .sns-row{ display:flex; gap:10px; margin-top:16px; }
.unite-page .sns-row a{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.unite-page .sns-row a:hover{ border-color:var(--blue); color:var(--blue); }
.unite-page .bottom-bar{ display:flex; justify-content:flex-end; align-items:center; padding:20px 0; font-size:13px; color:var(--gray); border-top:1px solid var(--line); flex-wrap:wrap; gap:10px; }
.unite-page .bottom-bar a{ text-decoration:none; color:var(--gray); }
@media (max-width:900px){ .unite-page .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .unite-page .wrap,.unite-page .chips-inner{ padding-left:20px; padding-right:20px; } .unite-page .footer-grid{ grid-template-columns:1fr; } }

.unite-page header.unite-header{ background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100; }
.unite-page .header-inner{ display:flex; align-items:center; justify-content:space-between; padding:20px 40px; max-width:1120px; margin:0 auto; }
.unite-page .logo{ font-weight:900; font-size:18px; letter-spacing:.01em; color:var(--navy); text-decoration:none; }
.unite-page nav.main-nav{ display:flex; align-items:center; gap:32px; }
.unite-page nav.main-nav a{ text-decoration:none; font-size:14px; font-weight:500; color:var(--navy); }
.unite-page nav.main-nav a:hover{ color:var(--blue); }
.unite-page nav.main-nav a.is-current{ color:var(--blue); }
.unite-page .header-tel{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--blue); text-decoration:none; }
.unite-page .header-tel svg{ width:14px; height:14px; }

/* ---------- ハンバーガーボタン(スマホのみ表示) ---------- */
.unite-page .nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  padding:0;
  background:none; border:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.unite-page .nav-toggle-bar{
  display:block;
  width:24px; height:2px;
  margin:0 auto;
  background:var(--navy);
  border-radius:2px;
  transition:transform .3s ease, opacity .2s ease;
}
.unite-page .nav-toggle.is-open .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.unite-page .nav-toggle.is-open .nav-toggle-bar:nth-child(2){ opacity:0; }
.unite-page .nav-toggle.is-open .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- スマホ用スライドメニュー ---------- */
.unite-page .mobile-nav{
  position:fixed;
  top:0; right:0;
  width:78%; max-width:320px; height:100%;
  background:var(--white);
  box-shadow:-8px 0 30px -12px rgba(20,41,61,.3);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  z-index:200;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.unite-page .mobile-nav.is-open{ transform:translateX(0); }
.unite-page .mobile-nav-inner{ display:flex; flex-direction:column; padding:88px 32px 40px; }
.unite-page .mobile-nav-inner a{
  text-decoration:none;
  font-size:16px; font-weight:700; color:var(--navy);
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.unite-page .mobile-nav-inner a.is-current{ color:var(--blue); }
.unite-page .mobile-nav-tel{
  display:flex; align-items:center; gap:8px;
  color:var(--blue) !important;
  margin-top:24px;
  border-bottom:none !important;
}
.unite-page .mobile-nav-tel svg{ width:18px; height:18px; }

/* オーバーレイ(メニュー背後の暗転) */
.unite-page .mobile-nav-overlay{
  position:fixed; inset:0;
  background:rgba(20,41,61,.45);
  opacity:0;
  transition:opacity .3s ease;
  z-index:190;
}
.unite-page .mobile-nav-overlay.is-open{ opacity:1; }

/* メニューが開いている間、背後のスクロールを固定 */
.unite-page.unite-nav-locked{ overflow:hidden; }

@media (max-width:900px){
  .unite-page nav.main-nav{ display:none; }
  .unite-page .nav-toggle{ display:flex; }
  .unite-page .header-inner{ padding:14px 20px; }
}
@media (min-width:901px){
  .unite-page .mobile-nav, .unite-page .mobile-nav-overlay{ display:none; }
}

.unite-page .hero{ position:relative; min-height:600px; display:flex; align-items:flex-end; overflow:hidden; color:#fff; }
.unite-page .hero img.hero-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:unite-hero-zoom 10s ease-out forwards;
  will-change:transform;
}
@keyframes unite-hero-zoom{
  from{ transform:scale(1); }
  to{ transform:scale(1.08); }
}
@media (prefers-reduced-motion:reduce){ .unite-page .hero img.hero-photo{ animation:none; } }
.unite-page .hero .overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,58,115,.72) 0%, rgba(20,58,115,.28) 55%, rgba(20,58,115,.04) 100%); }
.unite-page .hero-content{ position:relative; z-index:2; padding:0 40px 76px; max-width:1120px; margin:0 auto; width:100%; }
.unite-page .hero-content h1{ font-size:clamp(28px,3.6vw,42px); line-height:1.55; font-weight:700; margin:0 0 20px; max-width:640px; }
.unite-page .hero-content .hero-title .char{
  display:inline-block;
  opacity:0;
  transform:translateY(28px);
  filter:blur(5px);
  animation:unite-char-in .7s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes unite-char-in{
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}
@media (prefers-reduced-motion:reduce){
  .unite-page .hero-content .hero-title .char{ animation:none; opacity:1; transform:none; filter:none; }
}
.unite-page .hero-content p{ font-size:14.5px; line-height:2; color:#EDF2F8; max-width:520px; margin:0 0 34px; }
.unite-page .hero-ctas{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.unite-page .hero .tel-link{ color:#fff; }
.unite-page .hero .tel-link:hover{ color:var(--accent); }

/* ---------- Header logo image (Lightningデザイン設定のロゴ画像を使う場合) ---------- */
.unite-page .logo{ display:flex; align-items:center; }
.unite-page .logo img.unite-site-logo-img{ max-height:46px; width:auto; display:block; }

/* ---------- スマホ:ヒーローを画面ほぼいっぱいに(下に次の内容が少し覗く) ---------- */
@media (max-width:900px){
  /* ヘッダーの高さ(約64px)を差し引き、画面の約92%を確保 */
  .unite-page .hero{
    min-height:auto;
    height:calc(92vh - 64px);
    height:calc(92dvh - 64px); /* アドレスバー開閉に追従(対応ブラウザのみ) */
    max-height:820px;
  }
  .unite-page .hero-content{ padding:0 24px 48px; }
}