/* =========================================================
   トップページ
   ========================================================= */

/* ---------- hero（動画） ---------- */
.hero{position:relative;width:100%;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:#333;color:#fff}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;animation:heroZoom 12s ease-out both}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.06) 80%),linear-gradient(0deg,rgba(0,0,0,.18),transparent 45%)}
.hero-copy{position:absolute;left:7%;right:7%;top:52%;transform:translateY(-42%);animation:heroIn .9s .15s cubic-bezier(.2,.7,.2,1) both}
.hero-kicker{margin-bottom:15px;font:600 10px var(--font-en);letter-spacing:.18em}
.hero-main-copy{width:auto;margin:0 0 17px;font-size:clamp(24px,6.6vw,34px);line-height:1.55;letter-spacing:.07em}
.hero-main-copy span{display:block;white-space:normal}
.hero-scroll{position:absolute;bottom:20px;right:20px;font:500 7px var(--font-en);letter-spacing:.15em;writing-mode:vertical-rl}
.hero-scroll i{display:inline-block;height:38px;margin-top:8px;border-left:1px solid #fff}
@keyframes heroIn{from{opacity:0;transform:translateY(-32%) translateX(-18px)}to{opacity:1;transform:translateY(-42%) translateX(0)}}
@keyframes heroZoom{from{transform:scale(1.045)}to{transform:scale(1)}}
@media(max-width:959px){
  .hero{min-height:600px}
}
@media(min-width:960px){
  .hero{min-height:700px}
  .hero-copy{left:15%;right:auto;top:50%;width:auto;max-width:900px}
  .hero-kicker{font-size:12px}
  .hero-main-copy{width:max-content;font-size:clamp(30px,2.25vw,44px)}
  .hero-main-copy span{white-space:nowrap}
  .hero-scroll{right:45px;bottom:35px}
}

/* ---------- 事業内容 ---------- */
.services{background:#f7f7f7}
.services .section-title{margin-bottom:35px}
.service-list{display:grid;gap:18px}
.service-card{padding:15px;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.06);transition:transform .35s ease,box-shadow .35s ease}
.service-card:hover{transform:translateY(-5px);box-shadow:0 12px 35px rgba(0,0,0,.10)}
.service-card figure{height:230px;overflow:hidden}
.service-card figure img{height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.service-card:hover figure img{transform:scale(1.035)}
.service-body{padding:24px 6px 8px}
.service-no{color:#9c9c9c;font:600 9px var(--font-en);letter-spacing:.12em}
.service-body h3{margin:8px 0 2px;font-size:26px}
.service-body h4{margin-bottom:14px;font-size:14px}
.service-body>p:not(.service-no){margin-bottom:20px;font-size:13px;line-height:1.95}
.type-visual{display:flex;align-items:center;justify-content:center;height:100%;background:#ece7df;color:#7c6d60;font:700 30px/1.2 var(--font-en);letter-spacing:.06em;text-align:center}
.type-visual em{font-size:15px}
.type-visual.dark{background:#333;color:#fff}
@media(min-width:960px){
  .services .section-title{margin-bottom:50px}
  .service-list{gap:24px}
  .service-card{display:grid;grid-template-columns:46% 54%;min-height:360px;padding:25px}
  .service-card figure{height:310px}
  .service-body{padding:35px 40px}
  .service-no{font-size:10px}
  .service-body h3{font-size:33px}
  .service-body h4{margin-bottom:17px;font-size:16px}
  .service-body>p:not(.service-no){max-width:470px;font-size:14px;line-height:2}
}

/* ---------- 目指す街づくり ---------- */
.world{position:relative;min-height:560px;padding:80px 0;overflow:hidden}
.world-bg{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)),url('../img/top/mian-2-04.jpg') center/cover no-repeat;filter:saturate(.45);transition:transform 1.5s ease}
.world.is-inview .world-bg{transform:scale(1.025)}
.world-content{position:relative;z-index:1}
.world-label{font-size:13px;font-weight:700;text-align:center}
.world-content>h2{margin:10px 0 35px;font-size:31px;line-height:1.55;text-align:center}
.world-panels{display:grid;gap:10px;max-width:730px;margin:auto}
.world-panel{padding:28px;background:rgba(255,255,255,.94);box-shadow:0 4px 15px rgba(0,0,0,.07)}
.world-panel.dark{background:rgba(34,34,34,.96);color:#fff}
.world-panel small{font:600 9px var(--font-en);letter-spacing:.14em}
.world-panel h3{margin:6px 0 16px;font-size:18px;line-height:1.7}
.world-panel span{font-size:11px;font-weight:700}
@media(min-width:960px){
  .world{min-height:620px;padding:105px 0}
  .world-label{font-size:14px}
  .world-content>h2{font-size:42px}
  .world-panels{grid-template-columns:1fr}
  .world-panel{display:grid;grid-template-columns:130px 1fr auto;align-items:center;padding:30px 38px}
  .world-panel small{font-size:10px}
  .world-panel h3{margin:0;font-size:20px}
}

/* ---------- プロジェクト ---------- */
.topics{background:#fff}
.topics .section-title{margin-bottom:28px}
.topic-grid{display:grid;gap:28px}
.topic{transition:transform .35s ease,box-shadow .35s ease}
.topic:hover{transform:translateY(-4px)}
.topic-img{aspect-ratio:1.45;margin-bottom:13px;background-size:cover;background-position:center;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.topic:hover .topic-img{transform:scale(1.035)}
.t1{background-image:linear-gradient(135deg,rgba(0,0,0,.05),rgba(0,0,0,.3)),url('../img/project/case01-1.jpg')}
.t2{background-image:linear-gradient(135deg,rgba(0,0,0,.03),rgba(0,0,0,.25)),url('../img/project/case02-4.jpg')}
.t3{background-image:linear-gradient(135deg,rgba(0,0,0,.03),rgba(0,0,0,.25)),url('../img/project/reform01-01.jpg')}
.topic small{color:#999;font:600 9px var(--font-en)}
.topic h3{margin-top:4px;font-size:15px;line-height:1.65}
@media(min-width:960px){
  .topic-grid{grid-template-columns:repeat(3,1fr)}
  .topic small{font-size:10px}
  .topic h3{font-size:16px;line-height:1.7}
}

/* ---------- ニュース ---------- */
.news-section{padding:90px 0 100px;background:#f8f8f8}
.news-inner{width:min(88%,1200px);margin:0 auto}
.news-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:46px}
.news-heading .section-en{display:block;margin-bottom:13px;color:#7b7b7b;font:500 12px/1.2 var(--font-en);letter-spacing:.08em}
.news-heading h2{margin:0;font-size:30px;line-height:1.25;letter-spacing:.04em}
.news-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:190px;
  height:48px;
  padding:0 27px;
  border:1px solid var(--jbi-accent);
  border-radius:999px;
  background:var(--jbi-accent);
  color:#fff;
  font-size:13px;
  font-weight:700;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.news-more:hover{transform:translateY(-2px);background:#fff;color:var(--jbi-accent);box-shadow:0 8px 20px rgba(var(--jbi-accent-rgb),.18)}
.news-list{display:grid;gap:14px;background:#fff;box-shadow:0 3px 15px rgba(0,0,0,.05)}
.news-item{
  display:grid;
  grid-template-columns:80px 72px 1fr 20px;
  align-items:center;
  gap:5px;
  min-height:82px;
  padding:15px 13px;
  border:1px solid transparent;
  border-bottom-color:#eee;
  border-radius:9px;
  background:#fff;
  box-shadow:0 9px 28px rgba(0,0,0,.055);
  font-size:12px;
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.news-item:hover{padding-left:18px;border-color:rgba(var(--jbi-accent-rgb),.18);background:#f7f7f7;box-shadow:0 10px 26px rgba(0,0,0,.075)}
.news-item time{color:#747474;font:500 12px/1.5 var(--font-en);letter-spacing:.02em}
.news-categories{display:flex;flex-wrap:wrap;gap:4px;padding-right:14px}
.news-categories span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  min-height:24px;
  padding:3px 10px;
  border:1px solid #222;
  border-radius:5px;
  color:#111;
  font-size:10px;
  font-weight:700;
  line-height:1.2;
}
.news-item p{margin:0;color:#111;font-size:14px;font-weight:600;line-height:1.75}
.news-item time,.news-item p,.news-categories span{transition:color .25s ease,border-color .25s ease}
.news-item:hover p{color:var(--jbi-accent)}
@media(max-width:767px){
  .news-section{padding:70px 0 78px}
  .news-inner{width:86%}
  .news-heading-row{align-items:flex-start;margin-bottom:32px}
  .news-heading h2{font-size:27px}
  .news-more{min-width:auto;height:40px;padding:0 17px;font-size:11px}
  .news-list{gap:12px}
  .news-item{min-height:0;border-radius:8px}
  .news-categories{padding:0}
  .news-item p{line-height:1.7}
}
@media(min-width:960px){
  .news-section{padding:118px 0 125px}
  .news-inner{width:min(72%,1200px)}
  .news-heading-row{margin-bottom:54px}
  .news-heading h2{font-size:34px}
  .news-list{gap:15px}
  .news-item{grid-template-columns:110px 90px 1fr 25px;min-height:92px;padding:19px 20px;font-size:13px}
  .news-item p{font-size:15px}
}

/* ---------- 会社情報（スライダー） ---------- */
.company-band{padding:70px 0;background:#292929;color:#fff}
.company-copy small{color:#aaa;font:600 9px var(--font-en);letter-spacing:.12em}
.company-copy h2{margin:10px 0 20px;font-size:27px;line-height:1.65}
.about-center-slider{width:min(100%,720px);min-width:0}
.about-center-viewport{width:100%;padding:34px 0;overflow:hidden}
.about-center-track{display:flex;align-items:center;gap:18px;width:max-content;will-change:transform}
.about-center-slide{
  flex:0 0 205px;
  width:205px;
  height:250px;
  overflow:hidden;
  background:#e9e9e9;
  opacity:.68;
  transform:scale(.90);
  transform-origin:center;
  transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity .7s ease,filter .7s ease;
}
.about-center-slide.is-center{z-index:2;opacity:1;transform:scale(1.12)}
.about-center-slide img{display:block;width:100%;height:100%;object-fit:cover}
.about-center-slide.is-logo{display:flex;align-items:center;justify-content:center;background:#ededed}
.about-center-logo{color:#222;font-size:22px;font-weight:800;line-height:1.05;letter-spacing:-.03em}
.about-slider-dots{display:flex;justify-content:flex-end;gap:7px;margin-top:14px}
@media(max-width:767px){
  .about-center-slider{width:100%}
  .about-center-viewport{padding:28px 0}
  .about-center-track{gap:12px}
  .about-center-slide{flex-basis:58vw;width:58vw;max-width:230px;height:235px}
  .about-center-slide.is-center{transform:scale(1.06)}
}
@media(min-width:960px){
  .company-band{padding:95px 0}
  .company-band .wrap{display:grid;grid-template-columns:1fr 1.5fr;align-items:center;gap:70px}
  .company-copy small{font-size:10px}
  .company-copy h2{font-size:34px}
}
@media(min-width:1200px){
  .about-center-slide{flex-basis:220px;width:220px;height:265px}
}

/* ---------- 取り組み ---------- */
.column{background:#fff}
.column-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}
.column-grid{display:grid;gap:28px}
.column-grid>a{transition:transform .35s ease,box-shadow .35s ease}
.column-grid>a:hover{transform:translateY(-4px)}
.column-visual{display:grid;place-content:center;aspect-ratio:1.55;margin-bottom:12px;font:700 28px var(--font-en);letter-spacing:.08em}
.cv1{background:#e8e0d7}
.cv2{background:#dce5dc}
.cv3{background:#e0e4e8}
.column-grid small{color:#999;font:500 9px var(--font-en)}
.column-grid h3{margin-top:3px;font-size:14px}
@media(min-width:960px){
  .column-grid{grid-template-columns:repeat(3,1fr)}
  .column-grid small{font-size:10px}
  .column-grid h3{font-size:15px}
}

/* ---------- お問い合わせ ---------- */
.contact{padding:65px 0 75px;background:#fafafa}
.contact-box{padding:38px 20px;background:#f1f1f1;text-align:center}
.contact-box h2{margin-bottom:8px;font-size:23px}
.contact-box p{margin-bottom:20px;font-size:12px}
.contact-box>div{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.contact-box>small{display:block;margin-top:13px;color:#888;font-size:9px}
@media(min-width:960px){
  .contact{padding:90px 0}
  .contact-box{padding:50px}
  .contact-box h2{font-size:28px}
  .contact-box p{font-size:13px}
  .contact-box>small{font-size:10px}
}

@media(prefers-reduced-motion:reduce){
  .about-center-track,.about-center-slide{transition:none!important}
}