/* =========================================================
   DAIICHI BUSSAN / BUSINESS v129 COMPACT
   ABOUT v86 のデザイン言語を引き継ぎながら、
   AMUSEMENT / FOOD の二本柱を大きな写真で見せる。
   ========================================================= */

.business-page .sub-hero::before{
  z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.91) 0%,rgba(255,255,255,.71) 38%,rgba(255,255,255,.60) 100%);
}
.business-hero-visuals{
  position:absolute;z-index:-2;inset:0 14.8vw 0 0;display:grid;grid-template-columns:1fr 1fr;
}
.business-hero-photo{
  background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:grayscale(1) contrast(.76) brightness(1.13);
  opacity:.34;
}
.business-hero-photo-amusement{background-image:url("assets/business/amusement.webp");background-position:42% center}
.business-hero-photo-food{background-image:url("assets/business/food.webp");background-position:56% center}
.business-page .sub-hero-bgword{
  z-index:1;
  top:43%;
  font-size:clamp(120px,16vw,285px);
  color:rgba(15,15,15,.40);
  font-weight:900;
  letter-spacing:-0.05em;
}
.business-page .sub-hero-inner{z-index:4}

.business-page .sub-hero h1{
  font-family:"Helvetica Neue",Arial,-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:300;
  letter-spacing:-.045em;
}
.business-page .sub-hero-red{z-index:2;background:var(--omega-red)}
.business-page .sub-hero-mark{z-index:3}

.business-local-nav{
  position:relative;z-index:10;width:min(100% - 9vw,1280px);margin:-1px auto 0;
  display:grid;grid-template-columns:repeat(2,1fr);background:#fff;
  box-shadow:0 16px 45px rgba(0,0,0,.09)
}
.business-local-nav a{
  position:relative;min-height:112px;padding:27px 64px 24px 72px;
  border-right:1px solid #ddd;display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;
  align-content:center;transition:.25s ease
}
.business-local-nav a:last-child{border-right:0}
.business-local-nav a::after{content:"↗";position:absolute;right:24px;top:25px;color:#aaa;font-size:16px;transition:.25s ease}
.business-local-nav a:hover{background:#f7f7f5}
.business-local-nav a:hover::after{color:var(--omega-red);transform:translate(3px,-3px)}
.business-local-nav span{grid-row:1/3;color:#aaa;font-size:9px;font-weight:800;letter-spacing:.12em;padding-top:3px}
.business-local-nav b{font-size:clamp(18px,1.45vw,24px);letter-spacing:.025em}
.business-local-nav small{margin-top:5px;color:#777;font-size:10px}

.business-intro{padding-top:clamp(92px,9vw,150px);padding-bottom:clamp(110px,10vw,170px)}
.business-intro-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:clamp(50px,8vw,130px);align-items:end}
.business-intro-title .section-en{margin:0 0 22px;color:var(--omega-red);font-size:10px;font-weight:850;letter-spacing:.24em}
.business-intro-title h2{margin:0;font-size:clamp(42px,4.4vw,74px);line-height:1.17;letter-spacing:-.045em;font-weight:900}
.business-intro-copy{padding-bottom:5px;border-top:2px solid var(--omega-red)}
.business-intro-copy p{margin:25px 0 0;font-size:clamp(15px,1.05vw,18px);line-height:2;color:#555;font-weight:550}

.business-gateway{
  background:#f4f4f2;
}
.business-gateway-inner{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,2.6vw,42px);
  padding-top:clamp(72px,7vw,105px);
  padding-bottom:clamp(82px,8vw,120px);
}
.business-gateway-card{
  min-width:0;
}
.business-gateway-card>a{
  display:block;
  height:100%;
  background:#fff;
  border:1px solid #ddd;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.business-gateway-card>a:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(0,0,0,.08);
  border-color:#d0d0ce;
}
.business-gateway-image{
  position:relative;
  height:clamp(260px,24vw,390px);
  margin:0;
  overflow:hidden;
  background:#e8e8e6;
}
.business-gateway-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.25,1);
}
.business-gateway-card>a:hover .business-gateway-image img{
  transform:scale(1.025);
}
.business-gateway-no{
  position:absolute;
  right:24px;
  bottom:-.16em;
  color:rgba(255,255,255,.26);
  font-size:clamp(94px,9vw,150px);
  line-height:.8;
  font-weight:950;
  letter-spacing:-.07em;
}
.business-gateway-body{
  min-height:300px;
  padding:clamp(30px,3vw,44px);
  display:block;
}
.business-gateway-heading{max-width:600px}
.business-gateway-heading small{
  display:block;
  margin-bottom:13px;
  color:var(--omega-red);
  font-size:9px;
  font-weight:850;
  letter-spacing:.23em;
}
.business-gateway-heading h2{
  margin:0;
  font-size:clamp(38px,3.75vw,62px);
  line-height:.9;
  letter-spacing:-.06em;
  font-weight:950;
  white-space:nowrap;
}
.business-gateway-heading p{
  margin:16px 0 0;
  color:#202020;
  font-size:14px;
  font-weight:800;
  letter-spacing:.04em;
}
.business-gateway-copy{
  max-width:560px;
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #bbb;
}
.business-gateway-copy>p{
  margin:0;
  color:#555;
  font-size:clamp(14px,1vw,16px);
  line-height:1.9;
}
.business-gateway-more{
  width:max-content;
  margin-top:30px;
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 0 9px;
  border-bottom:1px solid #202020;
  color:#202020;
  font-size:9px;
  font-weight:850;
  letter-spacing:.22em;
  transition:.25s ease;
}
.business-gateway-more b{
  font-size:15px;
  font-weight:400;
  transition:.25s ease;
}
.business-gateway-card>a:hover .business-gateway-more{
  color:var(--omega-red);
  border-bottom-color:var(--omega-red);
}
.business-gateway-card>a:hover .business-gateway-more b{
  transform:translate(3px,-3px);
}

.business-next{background:#fff}
.business-next a{position:relative;width:min(100% - 9vw,1540px);min-height:190px;margin:0 auto;padding:46px 70px;display:grid;grid-template-columns:60px 1fr auto;align-items:center;border-left:1px solid #ddd;border-right:1px solid #ddd;overflow:hidden}
.business-next a::before{content:"";position:absolute;inset:0;background:var(--omega-red);transform:translateY(101%);transition:transform .38s cubic-bezier(.2,.7,.25,1)}
.business-next a:hover::before{transform:none}
.business-next a>*{position:relative;z-index:2;transition:color .25s ease}
.business-next a:hover>*{color:#fff}
.business-next-no{color:var(--omega-red);font-size:10px;font-weight:850}
.business-next small{display:block;margin-bottom:7px;color:#888;font-size:8px;letter-spacing:.2em}
.business-next strong{font-size:clamp(28px,2.5vw,42px);letter-spacing:-.02em}
.business-next p{margin:5px 0 0;color:#777;font-size:11px}
.business-next b{font-size:24px;font-weight:400}

@media(max-width:980px){
  .business-hero-visuals{inset:0 17vw 0 0}
  .business-intro-grid{grid-template-columns:1fr;gap:42px}
  .business-intro-copy{max-width:680px}
  .business-gateway-body{grid-template-columns:1fr;gap:26px;min-height:330px}
}

@media(max-width:760px){
  .business-gateway-inner{grid-template-columns:1fr}
  .business-gateway-body{min-height:0}
}

@media(max-width:640px){
  .business-hero-visuals{inset:0 19vw 0 0;grid-template-columns:1fr}
  .business-hero-photo-food{display:none}
  .business-page .sub-hero-bgword{font-size:23vw}
  .business-local-nav{width:calc(100% - 24px);grid-template-columns:1fr}
  .business-local-nav a{min-height:76px;padding:17px 42px 14px 50px;border-right:0;border-bottom:1px solid #e5e5e5;grid-template-columns:34px 1fr}
  .business-local-nav a:last-child{border-bottom:0}
  .business-local-nav a::after{right:16px;top:18px}
  .business-intro{padding-top:76px;padding-bottom:82px}
  .business-intro-title h2{font-size:38px}
  .business-gateway-inner{padding-top:58px;padding-bottom:72px}
  .business-gateway-image{height:250px}
  .business-gateway-body{padding:28px 24px 30px}
  .business-gateway-heading h2{font-size:45px}
  .business-next a{width:calc(100% - 24px);min-height:150px;padding:32px 26px;grid-template-columns:42px 1fr auto}
  .business-next strong{font-size:28px}
}