@charset "UTF-8";
/* =========================================================
   page-work-office.css
   労働環境 > オフィス紹介 (/work-environment/office/)
   写真をふんだんに使ったフォトギャラリー型ページ
   ブランドトークン: --color-black #171717 / --color-yellow #FFFF00
   ========================================================= */

.page-wo{
  --wo-black:#171717;
  --wo-ink:#222;
  --wo-yellow:#FFFF00;
  --wo-gray:#666;
  --wo-line:#e4e4e4;
  --wo-soft:#f5f5f4;
  color:var(--wo-ink);
  font-family:var(--font-zen),var(--font-noto),sans-serif;
  overflow:hidden;
}
.page-wo img{display:block;width:100%;height:100%;object-fit:cover;}

.wo-inner{max-width:1280px;margin:0 auto;padding:0 40px;}

/* ---------- 共通見出し ---------- */
.wo-head{margin-bottom:48px;}
.wo-head__en{
  font-family:var(--font-futura),sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:var(--wo-gray);display:flex;align-items:center;gap:14px;margin:0 0 10px;
}
.wo-head__en::before{content:"";width:34px;height:3px;background:var(--wo-yellow);display:inline-block;}
.wo-head__jp{font-size:34px;font-weight:700;line-height:1.3;letter-spacing:.02em;margin:0;color:var(--wo-black);}
.wo-head--center{text-align:center;}
.wo-head--center .wo-head__en{justify-content:center;}
.wo-head--white .wo-head__jp{color:#fff;}
.wo-head--white .wo-head__en{color:rgba(255,255,255,.7);}

/* ====================== HERO ====================== */
.wo-hero{
  position:relative;min-height:88vh;max-height:820px;
  display:flex;align-items:flex-end;
  background:#0d0d0d center/cover no-repeat;
  color:#fff;
}
.wo-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.15) 0%,rgba(10,10,10,.05) 40%,rgba(10,10,10,.78) 100%);
}
.wo-hero__inner{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto;padding:0 40px 72px;}
.wo-hero__en{
  font-family:var(--font-futura),sans-serif;
  font-size:clamp(64px,11vw,150px);font-weight:600;line-height:.92;
  letter-spacing:.01em;text-transform:uppercase;margin:0;
}
.wo-hero__en small{display:block;font-size:.16em;letter-spacing:.4em;font-weight:500;margin-bottom:18px;color:var(--wo-yellow);}
.wo-hero__bar{width:62px;height:6px;background:var(--wo-yellow);margin:26px 0 22px;}
.wo-hero__jp{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:.06em;margin:0 0 16px;}
.wo-hero__lead{font-size:16px;line-height:2;max-width:640px;margin:0;color:rgba(255,255,255,.9);font-family:var(--font-noto);}
.wo-hero__anchor{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.wo-hero__anchor a{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 22px;border:1px solid rgba(255,255,255,.45);border-radius:999px;
  color:#fff;text-decoration:none;font-size:13px;letter-spacing:.04em;
  backdrop-filter:blur(2px);transition:.25s;
}
.wo-hero__anchor a::after{content:"";width:6px;height:6px;border-right:2px solid var(--wo-yellow);border-bottom:2px solid var(--wo-yellow);transform:rotate(45deg);}
.wo-hero__anchor a:hover{background:var(--wo-yellow);color:var(--wo-black);border-color:var(--wo-yellow);}
.wo-hero__anchor a:hover::after{border-color:var(--wo-black);}
.wo-hero__meta{
  position:absolute;top:32px;right:40px;z-index:2;text-align:right;
  font-family:var(--font-futura),sans-serif;font-size:12px;letter-spacing:.2em;
  color:rgba(255,255,255,.85);line-height:1.9;text-transform:uppercase;
}
.wo-hero__meta b{color:var(--wo-yellow);}

/* ====================== CONCEPT ====================== */
.wo-concept{padding:104px 0 96px;background:#fff;}
.wo-concept__lead{
  max-width:780px;margin:0 auto 56px;text-align:center;
  font-size:18px;line-height:2.1;color:#333;font-family:var(--font-noto);
}
.wo-concept__lead b{font-weight:700;color:var(--wo-black);background:linear-gradient(transparent 62%,rgba(255,255,0,.55) 62%);padding:0 2px;}
.wo-concept__photos{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:repeat(2,210px);gap:16px;}
.wo-concept__photos figure{margin:0;position:relative;overflow:hidden;border-radius:4px;}
.wo-concept__photos figure img{transition:transform .8s ease;}
.wo-concept__photos figure:hover img{transform:scale(1.06);}
.wo-cp-a{grid-row:1/3;}
.wo-cp-b{grid-column:2/4;grid-row:1/2;}
.wo-cp-c{grid-column:2/3;grid-row:2/3;}
.wo-cp-d{grid-column:3/4;grid-row:2/3;}
.wo-concept__wm{
  font-family:var(--font-futura),sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(40px,8vw,118px);line-height:1;letter-spacing:.04em;
  color:#f1f1ef;text-align:center;margin:40px 0 -18px;user-select:none;pointer-events:none;
}

/* ====================== AREAS ====================== */
.wo-areas{padding:96px 0 100px;background:var(--wo-soft);}
.wo-area{
  display:grid;grid-template-columns:1.18fr .82fr;align-items:center;gap:54px;
  margin-bottom:84px;
}
.wo-area:last-child{margin-bottom:0;}
.wo-area--rev{grid-template-columns:.82fr 1.18fr;}
.wo-area--rev .wo-area__text{order:-1;}
.wo-area__media{position:relative;}
.wo-area__photo{position:relative;overflow:hidden;border-radius:6px;aspect-ratio:16/10.4;box-shadow:0 24px 50px -28px rgba(0,0,0,.5);}
.wo-area__photo img{transition:transform .9s ease;}
.wo-area__media:hover .wo-area__photo img{transform:scale(1.05);}
.wo-area__sub{
  position:absolute;width:42%;aspect-ratio:4/3;overflow:hidden;border-radius:6px;
  bottom:-26px;right:-22px;border:5px solid #fff;box-shadow:0 16px 34px -16px rgba(0,0,0,.45);
}
.wo-area--rev .wo-area__sub{right:auto;left:-22px;}
.wo-area__no{
  font-family:var(--font-futura),sans-serif;font-weight:600;font-size:15px;letter-spacing:.28em;
  color:var(--wo-gray);display:flex;align-items:center;gap:12px;margin:0 0 14px;
}
.wo-area__no span{color:var(--wo-black);font-size:42px;line-height:1;}
.wo-area__no::before{content:"";width:30px;height:3px;background:var(--wo-yellow);}
.wo-area__title{font-size:27px;font-weight:700;line-height:1.4;letter-spacing:.02em;margin:0 0 18px;color:var(--wo-black);}
.wo-area__desc{font-size:15.5px;line-height:2.05;color:#444;font-family:var(--font-noto);margin:0;}
.wo-area__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.wo-area__tags span{font-size:12.5px;letter-spacing:.04em;color:#555;background:#fff;border:1px solid var(--wo-line);border-radius:999px;padding:6px 14px;}

/* ====================== GALLERY ====================== */
.wo-gallery{padding:100px 0 104px;background:var(--wo-black);}
.wo-gallery .wo-head__jp{color:#fff;}
.wo-gallery__grid{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:196px;gap:12px;grid-auto-flow:dense;
}
.wo-gallery__item{
  position:relative;overflow:hidden;border-radius:8px;background:#1b1b1b;
  box-shadow:0 16px 34px -22px rgba(0,0,0,.85);
}
.wo-gallery__item img{
  transition:transform 1.1s cubic-bezier(.2,.7,.15,1),filter .5s ease;
  filter:saturate(1.04) brightness(.95);
}
.wo-gallery__item:hover img{transform:scale(1.09);filter:saturate(1.14) brightness(1.05);}
/* 常時うっすら／ホバーで深まるグラデーション */
.wo-gallery__item::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,transparent 32%,transparent 58%,rgba(0,0,0,.55) 100%);
  opacity:.55;transition:opacity .45s ease;
}
.wo-gallery__item:hover::after{opacity:1;}
/* ホバーで伸びるイエローのアクセントバー */
.wo-gallery__item::before{
  content:"";position:absolute;z-index:2;left:16px;bottom:16px;width:0;height:3px;
  background:var(--wo-yellow);box-shadow:0 0 12px rgba(255,255,0,.6);
  transition:width .5s cubic-bezier(.2,.7,.15,1);
}
.wo-gallery__item:hover::before{width:40px;}
.wo-gallery__cap{
  position:absolute;left:14px;bottom:12px;z-index:2;color:#fff;font-size:12.5px;letter-spacing:.05em;
  opacity:0;transform:translateY(8px);transition:.3s;text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.wo-gallery__item:hover .wo-gallery__cap{opacity:1;transform:none;}
.wo-gallery__item--w2{grid-column:span 2;}
.wo-gallery__item--h2{grid-row:span 2;}
.wo-gallery__note{color:rgba(255,255,255,.55);font-size:12.5px;text-align:center;margin:34px 0 0;letter-spacing:.03em;}

/* ====================== ACCESS ====================== */
.wo-access{padding:96px 0;background:#fff;}
.wo-access__body{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:stretch;}
.wo-access__info{display:flex;flex-direction:column;justify-content:center;}
.wo-access__name{font-size:22px;font-weight:700;color:var(--wo-black);margin:0 0 18px;letter-spacing:.04em;}
.wo-access__row{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--wo-line);font-family:var(--font-noto);}
.wo-access__row:last-child{border-bottom:1px solid var(--wo-line);}
.wo-access__label{flex:0 0 78px;font-size:13px;font-weight:700;color:var(--wo-gray);letter-spacing:.06em;padding-top:2px;}
.wo-access__val{font-size:15px;line-height:1.95;color:#333;}
.wo-access__map{min-height:380px;border-radius:6px;overflow:hidden;border:1px solid var(--wo-line);}
.wo-access__map iframe{width:100%;height:100%;min-height:380px;border:0;display:block;}

/* ====================== CTA ====================== */
.wo-cta{position:relative;padding:108px 24px;text-align:center;color:#fff;background:#101010 center/cover no-repeat;}
.wo-cta::after{content:"";position:absolute;inset:0;background:rgba(8,8,8,.62);}
.wo-cta__inner{position:relative;z-index:2;max-width:760px;margin:0 auto;}
.wo-cta__en{font-family:var(--font-futura),sans-serif;font-size:14px;letter-spacing:.4em;color:var(--wo-yellow);text-transform:uppercase;margin:0 0 18px;}
.wo-cta__title{font-size:clamp(24px,3.4vw,34px);font-weight:700;line-height:1.5;letter-spacing:.04em;margin:0 0 18px;}
.wo-cta__lead{font-size:15px;line-height:2;color:rgba(255,255,255,.86);margin:0 0 34px;font-family:var(--font-noto);}
.wo-cta__btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.wo-cta__btn{
  display:inline-flex;align-items:center;gap:10px;min-width:230px;justify-content:center;
  padding:17px 30px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.04em;transition:.25s;
}
.wo-cta__btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);}
.wo-cta__btn--primary{background:var(--wo-yellow);color:var(--wo-black);}
.wo-cta__btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(255,255,0,.7);}
.wo-cta__btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6);}
.wo-cta__btn--ghost:hover{background:#fff;color:var(--wo-black);}

/* ====================== パンくず ====================== */
.page-wo .breadcrumb{background:#fff;padding:20px 40px;}
.page-wo .breadcrumb__list{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;font-size:12.5px;color:var(--wo-gray);}
.page-wo .breadcrumb__list li{display:flex;align-items:center;gap:8px;}
.page-wo .breadcrumb__list li:not(:last-child)::after{content:"›";color:#bbb;}
.page-wo .breadcrumb__list a{color:var(--wo-gray);text-decoration:none;}
.page-wo .breadcrumb__list a:hover{color:var(--wo-black);}

/* ====================== レスポンシブ ====================== */
@media (max-width:1024px){
  .wo-area{gap:36px;}
  .wo-gallery__grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:176px;}
}
@media (max-width:768px){
  .wo-inner{padding:0 22px;}
  .wo-hero{min-height:78vh;}
  .wo-hero__inner{padding:0 22px 54px;}
  .wo-hero__meta{display:none;}
  .wo-head__jp{font-size:26px;}
  .wo-concept{padding:64px 0 60px;}
  .wo-concept__lead{font-size:16px;margin-bottom:36px;}
  .wo-concept__photos{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,140px);gap:10px;}
  .wo-cp-a{grid-row:1/2;grid-column:1/3;}
  .wo-cp-b{grid-column:1/3;grid-row:2/3;}
  .wo-cp-c{grid-column:1/2;grid-row:3/4;}
  .wo-cp-d{grid-column:2/3;grid-row:3/4;}
  .wo-areas{padding:60px 0;}
  .wo-area,.wo-area--rev{grid-template-columns:1fr;gap:22px;margin-bottom:56px;}
  .wo-area--rev .wo-area__text{order:0;}
  .wo-area__sub{display:none;}
  .wo-area__photo{aspect-ratio:16/10;}
  .wo-area__title{font-size:22px;}
  .wo-gallery{padding:60px 0;}
  .wo-gallery__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:128px;gap:10px;}
  .wo-gallery__cap{opacity:1;transform:none;font-size:11px;}
  .wo-access{padding:60px 0;}
  .wo-access__body{grid-template-columns:1fr;gap:26px;}
  .wo-access__map{min-height:300px;}
  .wo-cta{padding:72px 22px;}
  .wo-cta__btn{min-width:0;width:100%;}
}