/* =========================================================
   KOUBUN BUSINESS PAGE
   Design width: 1100px
   This file is page-specific. Do not add these rules to virtual.css.
   ========================================================= */

:root{
  --business-navy:#0b2147;
  --business-navy-2:#132b57;
  --business-blue:#0b56b7;
  --business-yellow:#f4bf18;
  --business-line:#d8dde6;
  --business-text:#10234b;
}

.business-page{
  color:var(--business-text);
  background:#fff;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

.business-page *,
.business-page *::before,
.business-page *::after{
  box-sizing:border-box;
}

.business-container{
  width:min(1100px,calc(100% - 48px));
  margin-inline:auto;
}

/* HERO */
.business-hero{
  position:relative;
  min-height:550px;
  overflow:hidden;
  background:#071b3c;
  color:#fff;
}

.business-hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.business-hero__inner{
  position:relative;
  z-index:1;
  min-height:550px;
  display:flex;
  align-items:center;
}

.business-hero__copy{
  width:52%;
  padding:38px 0 30px;
}

.business-hero h1{
  margin:0;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-size:clamp(36px,4.1vw,58px);
  line-height:1.5;
  font-weight:500;
  letter-spacing:.035em;
}

.business-hero__en{
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px 0 35px;
  font-size:11px;
  line-height:1.5;
  letter-spacing:.12em;
  white-space:nowrap;
}

.business-hero__en::before,
.business-hero__en::after{
  content:"";
  width:38px;
  height:2px;
  background:var(--business-yellow);
  flex:0 0 auto;
}

.business-hero__lead{
  margin:0;
  font-size:15px;
  line-height:2;
  font-weight:500;
}

.business-hero__brand{
  margin-top:50px;
}

.business-hero__brand strong{
  display:block;
  font-family:Arial,sans-serif;
  font-size:43px;
  line-height:1;
  font-weight:300;
  letter-spacing:.18em;
}

.business-hero__brand span{
  display:block;
  margin-top:11px;
  font-size:10px;
  letter-spacing:.28em;
}

/* OVERVIEW */
.business-overview{
  padding:42px 0 64px;
  background:linear-gradient(to bottom,#fff 0,#fff 56%,var(--business-navy) 56%,var(--business-navy) 100%);
}

.business-section-title{
  margin-bottom:25px;
}

.business-section-title > div{
  display:flex;
  align-items:flex-end;
  gap:24px;
  margin-bottom:17px;
}

.business-section-title h2{
  position:relative;
  margin:0;
  padding-bottom:10px;
  font-size:29px;
  line-height:1.2;
  font-weight:800;
  color:#111;
}

.business-section-title h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:40px;
  height:3px;
  background:var(--business-yellow);
}

.business-section-title span{
  padding-bottom:12px;
  font-size:11px;
  letter-spacing:.32em;
  color:#222;
}

.business-section-title p{
  margin:0;
  color:#111;
  font-size:13px;
  line-height:1.8;
}

.business-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.business-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  color:var(--business-text);
  text-decoration:none;
  background:#fff;
  border:1px solid #b9c1ce;
  box-shadow:0 2px 3px rgba(0,0,0,.08);
}

.business-card__head{
  position:relative;
  min-height:142px;
  padding:17px 18px 14px;
  color:#fff;
  background:linear-gradient(135deg,#071a3c,#0b2147);
  border-bottom:4px solid #1d62b7;
}

.business-card__head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:34px;
  height:13px;
  background:var(--business-navy);
  clip-path:polygon(0 0,100% 0,64% 100%,0 100%);
}

.business-card__number{
  font-family:Georgia,serif;
  font-size:43px;
  line-height:.9;
  font-weight:400;
}

.business-card__head small{
  position:absolute;
  right:14px;
  top:21px;
  font-size:7px;
  letter-spacing:.08em;
}

.business-card__head small::after{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-left:5px;
  background:var(--business-yellow);
}

.business-card__head span{
  display:block;
  margin-top:11px;
  font-size:8px;
  letter-spacing:.14em;
  color:#77b8ff;
}

.business-card__head h3{
  margin:7px 0 0;
  font-size:16px;
  line-height:1.35;
  font-weight:700;
}

.business-card__visual{
  display:flex;
  align-items:center;
  justify-content:center;
  height:190px;
  padding:9px 8px 2px;
  background:#fff;
}

.business-card__visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.business-card > p{
  flex:1;
  margin:0 18px;
  padding:16px 0 14px;
  border-top:1px solid #d5dae3;
  font-size:12px;
  line-height:1.75;
  color:#111;
}

.business-card__more{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 18px 18px;
  color:#0754ae;
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
}

.business-card__more b{
  font-size:22px;
  font-weight:400;
}

/* SERVICE BLOCKS */
.business-services{
  padding:16px 0 58px;
  background:#fff;
}

.business-service{
  margin-top:16px;
  padding:22px 28px 25px;
  border:1px solid #d8dce4;
  border-radius:3px;
  background:#fff;
}

.business-service__head{
  position:relative;
  display:flex;
  align-items:center;
  min-height:82px;
  padding-bottom:13px;
  border-bottom:1px solid #9aa8c0;
}

.business-service__number{
  flex:0 0 auto;
  margin-right:24px;
  font-family:Arial,sans-serif;
  font-size:68px;
  line-height:.85;
  font-weight:800;
  letter-spacing:-.06em;
  color:var(--business-navy);
}

.business-service__title small{
  display:block;
  margin-bottom:8px;
  color:#0754ae;
  font-size:9px;
  font-weight:700;
  text-decoration:underline;
}

.business-service__title h2{
  margin:0;
  font-size:31px;
  line-height:1.25;
  font-weight:800;
  color:var(--business-navy);
}

.business-service__label{
  margin-left:auto;
  padding-left:25px;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

.business-service__label::before{
  content:"";
  display:inline-block;
  width:22px;
  height:2px;
  margin:0 10px 3px 0;
  background:#0754ae;
}

.business-service__button{
  margin-left:auto;
  padding:11px 18px;
  min-width:220px;
  color:#fff;
  background:var(--business-navy);
  text-align:center;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
}

.business-service__button span{
  margin-left:16px;
  font-size:18px;
}

.business-service__grid{
  display:grid;
  margin-top:17px;
}

.business-service__grid--3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.business-service__grid--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.business-item{
  min-width:0;
  padding:0 26px;
  border-right:1px solid #d9dde5;
}

.business-item:first-child{
  padding-left:16px;
}

.business-item:last-child{
  padding-right:16px;
  border-right:0;
}

.business-item img{
  display:block;
  width:100%;
  height:155px;
  object-fit:contain;
  margin:0 auto 5px;
}

.business-service__grid--4 .business-item img{
  height:140px;
}

.business-item h3{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:5px 0 10px;
  color:var(--business-navy);
  font-size:15px;
  line-height:1.45;
  font-weight:800;
}

.business-item h3 b{
  flex:0 0 auto;
  color:#0b57b6;
  font-family:Georgia,serif;
  font-size:28px;
  line-height:1;
  font-weight:500;
}

.business-item p{
  margin:0;
  color:#111;
  font-size:12px;
  line-height:1.75;
  font-weight:500;
}

/* CONTACT */
.business-contact{
  padding:48px 0;
  color:#fff;
  background:linear-gradient(135deg,#0b2147 0%,#102a59 72%,#17376e 72%,#102a59 100%);
}

.business-contact__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.business-contact__message{
  display:flex;
  align-items:center;
  gap:25px;
}

.business-contact__icon{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:4px;
  font-size:31px;
}

.business-contact__message p{
  margin:0;
  font-size:25px;
  line-height:1.5;
  font-weight:700;
}

.business-contact__message p span{
  color:var(--business-yellow);
}

.business-contact__inner > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:355px;
  min-height:72px;
  padding:0 28px;
  color:#111;
  background:#ffc91a;
  border-radius:3px;
  text-decoration:none;
  font-size:19px;
  font-weight:700;
}

.business-contact__inner > a b{
  font-size:28px;
  font-weight:400;
}

/* TABLET */
@media (max-width:1024px){
  .business-container{
    width:min(100% - 40px,1100px);
  }

  .business-hero,
  .business-hero__inner{
    min-height:510px;
  }

  .business-hero__copy{
    width:58%;
  }

  .business-hero h1{
    font-size:42px;
  }

  .business-hero__lead{
    font-size:13px;
  }

  .business-cards{
    gap:10px;
  }

  .business-card__head{
    padding-inline:13px;
  }

  .business-card__head h3{
    font-size:14px;
  }

  .business-card > p{
    margin-inline:13px;
    font-size:11px;
  }

  .business-service{
    padding-inline:20px;
  }

  .business-item{
    padding-inline:18px;
  }

  .business-service__title h2{
    font-size:26px;
  }

  .business-contact__message p{
    font-size:21px;
  }

  .business-contact__inner > a{
    width:310px;
  }
}

/* MOBILE */
@media (max-width:767px){
  .business-container{
    width:calc(100% - 32px);
  }

  .business-hero{
    min-height:auto;
    padding-top:52vw;
    background:#071b3c;
  }

  .business-hero__bg{
    height:56vw;
    object-position:72% top;
  }

  .business-hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:36vw;
    height:22vw;
    background:linear-gradient(to bottom,rgba(7,27,60,0),#071b3c 78%);
  }

  .business-hero__inner{
    min-height:0;
    display:block;
  }

  .business-hero__copy{
    width:100%;
    padding:16px 0 42px;
  }

  .business-hero h1{
    font-size:clamp(29px,8vw,40px);
    line-height:1.45;
  }

  .business-hero__en{
    margin:17px 0 25px;
    font-size:8px;
    white-space:normal;
  }

  .business-hero__en::after{
    display:none;
  }

  .business-hero__lead{
    font-size:13px;
    line-height:1.9;
  }

  .business-hero__lead br{
    display:none;
  }

  .business-hero__brand{
    margin-top:35px;
  }

  .business-hero__brand strong{
    font-size:34px;
  }

  .business-overview{
    padding:35px 0 48px;
    background:linear-gradient(to bottom,#fff 0,#fff 20%,var(--business-navy) 20%,var(--business-navy) 100%);
  }

  .business-section-title > div{
    gap:14px;
  }

  .business-section-title h2{
    font-size:25px;
  }

  .business-section-title span{
    font-size:9px;
  }

  .business-section-title p{
    font-size:12px;
  }

  .business-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  .business-card__head{
    min-height:130px;
  }

  .business-card__visual{
    height:160px;
  }

  .business-services{
    padding-top:12px;
  }

  .business-service{
    width:calc(100% - 24px);
    padding:18px 16px 22px;
    margin-top:12px;
  }

  .business-service__head{
    flex-wrap:wrap;
    min-height:0;
  }

  .business-service__number{
    margin-right:14px;
    font-size:52px;
  }

  .business-service__title h2{
    font-size:22px;
  }

  .business-service__label{
    font-size:8px;
  }

  .business-service__button{
    width:100%;
    min-width:0;
    margin:14px 0 0;
  }

  .business-service__grid,
  .business-service__grid--3,
  .business-service__grid--4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .business-item,
  .business-item:first-child,
  .business-item:last-child{
    padding:18px 15px;
    border-right:0;
    border-bottom:1px solid #d9dde5;
  }

  .business-item:nth-child(odd){
    border-right:1px solid #d9dde5;
  }

  .business-item:nth-last-child(-n+2){
    border-bottom:0;
  }

  .business-service__grid--3 .business-item:last-child{
    grid-column:1 / -1;
    border-right:0;
    border-bottom:0;
  }

  .business-item img,
  .business-service__grid--4 .business-item img{
    height:135px;
  }

  .business-contact{
    padding:38px 0;
  }

  .business-contact__inner{
    display:block;
  }

  .business-contact__message{
    gap:15px;
  }

  .business-contact__icon{
    width:54px;
    height:54px;
    font-size:23px;
  }

  .business-contact__message p{
    font-size:18px;
  }

  .business-contact__inner > a{
    width:100%;
    min-height:62px;
    margin-top:25px;
    font-size:17px;
  }
}

/* SMALL MOBILE */
@media (max-width:480px){
  .business-container{
    width:calc(100% - 24px);
  }

  .business-hero{
    padding-top:61vw;
  }

  .business-hero__bg{
    height:65vw;
    object-position:74% top;
  }

  .business-hero h1{
    font-size:28px;
  }

  .business-cards{
    grid-template-columns:1fr;
  }

  .business-card__head{
    min-height:122px;
  }

  .business-card__visual{
    height:220px;
  }

  .business-service{
    width:calc(100% - 16px);
    padding-inline:12px;
  }

  .business-service__head{
    align-items:flex-start;
  }

  .business-service__number{
    font-size:46px;
  }

  .business-service__title{
    flex:1;
    min-width:0;
  }

  .business-service__title h2{
    font-size:19px;
  }

  .business-service__label{
    width:100%;
    margin:10px 0 0;
  }

  .business-service__grid,
  .business-service__grid--3,
  .business-service__grid--4{
    grid-template-columns:1fr;
  }

  .business-item,
  .business-item:first-child,
  .business-item:last-child,
  .business-item:nth-child(odd){
    grid-column:auto;
    padding:20px 8px;
    border-right:0;
    border-bottom:1px solid #d9dde5;
  }

  .business-item:last-child{
    border-bottom:0;
  }

  .business-item img,
  .business-service__grid--4 .business-item img{
    height:190px;
  }

  .business-item h3{
    font-size:15px;
  }

  .business-item p{
    font-size:13px;
  }

  .business-contact__message p{
    font-size:16px;
  }
}

/* =========================================================
   BUSINESS FINAL DETAIL OVERRIDE
   カンプ準拠：事業カードの切り欠き／詳細背景番号／SERVICE装飾
   ========================================================= */

/* ---------- 事業領域：紺ヘッダー下の「√」型ディテール ---------- */
.business-page .business-card{
  overflow:visible;
}

.business-page .business-card__head{
  position:relative;
  z-index:2;
  margin-bottom:14px;
  border-bottom:0;
  overflow:visible;
}

/* 青い下地。紺の切り欠きより2pxほど下へ見せる */
.business-page .business-card__head::before{
  content:"";
  position:absolute;
  z-index:0;
  left:-1px;
  right:-1px;
  bottom:-15px;
  height:18px;
  background:#1768c4;
  clip-path:polygon(
    0 0,
    100% 0,
    100% 4px,
    18% 4px,
    13% 18px,
    0 18px
  );
  pointer-events:none;
}

/* 紺色本体。左側だけ一段下がるカンプの切り欠き */
.business-page .business-card__head::after{
  content:"";
  position:absolute;
  z-index:1;
  left:-1px;
  right:-1px;
  bottom:-12px;
  width:auto;
  height:16px;
  background:#0b2147;
  clip-path:polygon(
    0 0,
    100% 0,
    100% 3px,
    18% 3px,
    13% 16px,
    0 16px
  );
  pointer-events:none;
}

.business-page .business-card__head > *{
  position:relative;
  z-index:2;
}

.business-page .business-card__visual{
  position:relative;
  z-index:1;
}

/* ---------- 詳細セクション：薄い巨大 01 / 02 / 03 / 04 ---------- */
.business-page .business-service{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.business-page .business-service::after{
  position:absolute;
  z-index:-1;
  right:18px;
  top:84px;
  color:rgba(11,33,71,.055);
  font-family:Arial,Helvetica,sans-serif;
  font-size:150px;
  line-height:.82;
  font-weight:700;
  letter-spacing:-.08em;
  pointer-events:none;
  user-select:none;
}

.business-page #service01::after{content:"01";}
.business-page #service02::after{content:"02";}
.business-page #service03::after{content:"03";}
.business-page #service04::after{content:"04";}

.business-page .business-service__head,
.business-page .business-service__grid{
  position:relative;
  z-index:1;
}

/* カンプの SERVICE 表記と横罫線 */
.business-page .business-service__head{
  border-bottom:1px solid #8fa0bc;
}

.business-page .business-service__label{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:0;
  color:#10234b;
  letter-spacing:.03em;
}

.business-page .business-service__label::before{
  width:24px;
  height:2px;
  margin:0;
  background:#0b56b7;
}

/* 03/04のボタンも同じ高さ・位置感に揃える */
.business-page .business-service__button{
  position:relative;
  z-index:2;
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .business-page .business-card__head::before{
    clip-path:polygon(0 0,100% 0,100% 4px,20% 4px,14% 18px,0 18px);
  }
  .business-page .business-card__head::after{
    clip-path:polygon(0 0,100% 0,100% 3px,20% 3px,14% 16px,0 16px);
  }

  .business-page .business-service::after{
    right:14px;
    top:80px;
    font-size:132px;
  }
}

@media (max-width:767px){
  .business-page .business-card__head{
    margin-bottom:13px;
  }

  .business-page .business-card__head::before{
    bottom:-14px;
    height:17px;
    clip-path:polygon(0 0,100% 0,100% 4px,22% 4px,15% 17px,0 17px);
  }

  .business-page .business-card__head::after{
    bottom:-11px;
    height:15px;
    clip-path:polygon(0 0,100% 0,100% 3px,22% 3px,15% 15px,0 15px);
  }

  .business-page .business-service::after{
    right:8px;
    top:76px;
    font-size:100px;
    color:rgba(11,33,71,.045);
  }
}

@media (max-width:480px){
  .business-page .business-card__head::before{
    clip-path:polygon(0 0,100% 0,100% 4px,18% 4px,12% 17px,0 17px);
  }

  .business-page .business-card__head::after{
    clip-path:polygon(0 0,100% 0,100% 3px,18% 3px,12% 15px,0 15px);
  }

  .business-page .business-service::after{
    right:4px;
    top:91px;
    font-size:78px;
  }
}


/* =========================================================
   BUSINESS FINAL DESIGN ADJUSTMENT
   2026-10-06
   ※ style.css / virtual.css は変更しない
   ※ このブロックを事業紹介ページの最終確定値とする
   ========================================================= */

/* ---------- HERO ---------- */
.business-page .business-hero,
.business-page .business-hero__inner{
  min-height:550px;
}

.business-page .business-hero__copy{
  width:64%;
  padding:34px 0 42px;
}

.business-page .business-hero h1{
  margin:0;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-size:50px;
  line-height:1.34;
  font-weight:500;
  letter-spacing:.025em;
  white-space:nowrap;
}

.business-page .business-hero__en{
  margin:20px 0 31px;
}

.business-page .business-hero__lead{
  line-height:1.9;
}

.business-page .business-hero__brand{
  margin-top:38px;
}

/* ---------- 事業領域 4 CARD ---------- */
.business-page .business-card__head{
  min-height:142px;
  padding:17px 18px 14px;
}

/* 数字は明朝。Times を先頭にしてブラウザ差を小さくする */
.business-page .business-card__number,
.business-page .business-service__number,
.business-page .business-item h3 b{
  font-family:"Times New Roman","Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-weight:400;
  font-variant-numeric:lining-nums;
}

/* カード内は座標を明示して共通CSSの影響を受けにくくする */
.business-page .business-card__number{
  position:relative;
  z-index:2;
  display:block;
  margin:0;
  font-size:43px;
  line-height:.9;
  letter-spacing:-.025em;
}

.business-page .business-card__head > small{
  position:absolute;
  z-index:2;
  top:20px;
  right:14px;
  margin:0;
  font-size:7px;
  line-height:1;
  letter-spacing:.08em;
  white-space:nowrap;
}

.business-page .business-card__head > span{
  position:relative;
  z-index:2;
  display:block;
  margin:12px 0 0;
  padding:0;
  font-size:8px;
  line-height:1.2;
  letter-spacing:.14em;
  color:#77b8ff;
  white-space:nowrap;
}

.business-page .business-card__head > h3{
  position:relative;
  z-index:2;
  margin:7px 0 0;
  padding:0;
  font-size:16px;
  line-height:1.35;
  font-weight:700;
}

/* ---------- SERVICE 01–04 ---------- */
.business-page .business-service{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

/* カンプの薄い背景数字。画像とは別レイヤーなので画像加工不要 */
.business-page .business-service::after{
  content:"";
  position:absolute;
  z-index:0;
  right:20px;
  top:83px;
  font-family:"Times New Roman","Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-size:118px;
  line-height:1;
  font-weight:400;
  letter-spacing:-.06em;
  color:rgba(11,33,71,.055);
  pointer-events:none;
}

.business-page #service01::after{ content:"01"; }
.business-page #service02::after{ content:"02"; }
.business-page #service03::after{ content:"03"; }
.business-page #service04::after{ content:"04"; }

.business-page .business-service__head,
.business-page .business-service__grid{
  position:relative;
  z-index:1;
}

.business-page .business-service__number{
  margin-right:24px;
  font-size:68px;
  line-height:.82;
  letter-spacing:-.045em;
  color:var(--business-navy);
}

.business-page .business-service__title h2{
  font-weight:800;
}

.business-page .business-item h3 b{
  font-size:28px;
  line-height:1;
  letter-spacing:-.02em;
}

/*
  詳細用PNGは現状の白背景のままでOK。
  背景数字はCSSレイヤーで右上に配置しているため透過化は必須ではない。
  将来、数字を画像の真後ろまで重ねる場合だけ透過PNG/WebP化する。
*/

/* ---------- TABLET ---------- */
@media (max-width:1024px){
  .business-page .business-hero__copy{
    width:66%;
  }

  .business-page .business-hero h1{
    font-size:42px;
  }

  .business-page .business-card__head > h3{
    font-size:14px;
  }

  .business-page .business-service::after{
    right:16px;
    top:80px;
    font-size:104px;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width:767px){
  .business-page .business-hero,
  .business-page .business-hero__inner{
    min-height:0;
  }

  .business-page .business-hero__copy{
    width:100%;
    padding:16px 0 40px;
  }

  .business-page .business-hero h1{
    font-size:clamp(29px,8vw,40px);
    line-height:1.4;
    white-space:normal;
  }

  .business-page .business-card__head > span{
    margin-top:10px;
  }

  .business-page .business-service__number{
    margin-right:14px;
    font-size:52px;
  }

  .business-page .business-service::after{
    right:10px;
    top:86px;
    font-size:82px;
  }
}

/* ---------- SMALL MOBILE ---------- */
@media (max-width:480px){
  .business-page .business-hero h1{
    font-size:28px;
  }

  .business-page .business-service__number{
    font-size:46px;
  }

  .business-page .business-service::after{
    right:8px;
    top:94px;
    font-size:70px;
  }
}


/* =========================================================
   BUSINESS SERVICE HEADER FINAL
   カンプ準拠：01〜04 / 英字見出し / ワイド罫線
   ========================================================= */

@media (min-width:768px){

  .business-page .business-service__head{
    display:grid;
    grid-template-columns:92px minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    column-gap:20px;
    row-gap:3px;
    align-items:end;
    position:relative;
    min-height:104px;
    padding:20px 18px 17px;
    border-bottom:0;
  }

  /* 見出し全幅の細い罫線 */
  .business-page .business-service__head::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:0;
    height:1px;
    background:rgba(25,73,139,.55);
    pointer-events:none;
  }

  /* 01〜04 */
  .business-page .business-service__number{
    grid-column:1;
    grid-row:1;
    align-self:end;
    margin:0;
    padding:0;
    font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP","Times New Roman",serif;
    font-size:66px;
    line-height:.78;
    font-weight:600;
    letter-spacing:-.055em;
    color:var(--business-navy);
  }

  /*
    HTMLでは英字見出しが .business-service__title 内にあるため、
    display:contents でグリッドの直接要素として配置する。
  */
  .business-page .business-service__title{
    display:contents;
  }

  /* IT CONSULTING 等を数字の真下へ */
  .business-page .business-service__title small{
    grid-column:1;
    grid-row:2;
    align-self:start;
    display:block;
    margin:4px 0 0;
    padding:0;
    color:#0758b5;
    font-size:9px;
    line-height:1.1;
    font-weight:700;
    letter-spacing:0;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:2px;
    white-space:nowrap;
  }

  /* 日本語事業名を数字の右へ */
  .business-page .business-service__title h2{
    grid-column:2;
    grid-row:1 / span 2;
    align-self:center;
    margin:0;
    padding:0 0 1px;
    font-size:28px;
    line-height:1.18;
    font-weight:800;
    letter-spacing:-.025em;
    color:var(--business-navy);
    white-space:nowrap;
  }

  /* SERVICE 01 / 02 */
  .business-page .business-service__label{
    grid-column:3;
    grid-row:1 / span 2;
    align-self:center;
    position:relative;
    top:auto;
    right:auto;
    margin:0;
    padding:0;
    font-size:10px;
    line-height:1;
    font-weight:700;
    white-space:nowrap;
  }

  .business-page .business-service__label::before{
    width:27px;
    margin-right:10px;
  }

  /* 03・04 の右ボタン */
  .business-page .business-service__button{
    grid-column:3;
    grid-row:1 / span 2;
    align-self:center;
    position:relative;
    top:auto;
    right:auto;
    margin:0;
  }
}

/* タブレットで日本語見出しが窮屈にならないよう調整 */
@media (min-width:768px) and (max-width:1024px){
  .business-page .business-service__head{
    grid-template-columns:82px minmax(0,1fr) auto;
    column-gap:16px;
  }

  .business-page .business-service__number{
    font-size:58px;
  }

  .business-page .business-service__title h2{
    font-size:24px;
  }
}

/* スマホは縦方向へ自然に再配置 */
@media (max-width:767px){
  .business-page .business-service__head{
    position:relative;
    display:grid;
    grid-template-columns:68px minmax(0,1fr);
    grid-template-rows:auto auto auto;
    column-gap:13px;
    row-gap:3px;
    align-items:end;
    padding-bottom:15px;
    border-bottom:0;
  }

  .business-page .business-service__head::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:rgba(25,73,139,.55);
  }

  .business-page .business-service__number{
    grid-column:1;
    grid-row:1;
    margin:0;
    font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP","Times New Roman",serif;
    font-size:50px;
    line-height:.8;
    font-weight:600;
  }

  .business-page .business-service__title{
    display:contents;
  }

  .business-page .business-service__title small{
    grid-column:1;
    grid-row:2;
    display:block;
    margin-top:3px;
    color:#0758b5;
    font-size:7px;
    line-height:1.1;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:2px;
    white-space:nowrap;
  }

  .business-page .business-service__title h2{
    grid-column:2;
    grid-row:1 / span 2;
    align-self:center;
    margin:0;
    font-size:20px;
    line-height:1.25;
    font-weight:800;
  }

  .business-page .business-service__label,
  .business-page .business-service__button{
    grid-column:1 / -1;
    grid-row:3;
    justify-self:end;
    position:relative;
    top:auto;
    right:auto;
    margin-top:8px;
  }
}


/* =========================================================
   BUSINESS SERVICE HEADER MICRO ADJUSTMENT
   カンプ比較による最終微調整
   ========================================================= */
@media (min-width:1025px){
  .business-page .business-service__head{
    grid-template-columns:90px minmax(0,1fr) auto;
    column-gap:12px;
  }

  .business-page .business-service__number{
    font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP","Times New Roman",serif;
    font-size:76px;
    line-height:.76;
    font-weight:600;
    letter-spacing:-.065em;
  }

  .business-page .business-service__title small{
    margin-top:5px;
    font-size:10px;
    line-height:1;
    font-weight:700;
    text-decoration-thickness:1px;
    text-underline-offset:2px;
  }

  .business-page .business-service__title h2{
    font-size:29px;
    line-height:1.15;
  }
}


/* =========================================================
   BUSINESS SERVICE EN LABEL / RULE ALIGNMENT
   英字ラベルを罫線の直上に配置
   ========================================================= */
@media (min-width:768px){
  .business-page .business-service__title small{
    align-self:end;
    margin:0 0 6px;
  }
}


/* =========================================================
   BUSINESS SERVICE EN LABEL / SINGLE WIDE RULE FINAL
   英字見出しの下線を消し、直下に全幅罫線を1本だけ配置
   ========================================================= */
@media (min-width:768px){
  .business-page .business-service__head{
    padding-bottom:10px;
  }

  .business-page .business-service__title small{
    margin:0 0 4px;
    text-decoration:none;
    border:0;
  }

  .business-page .business-service__head::after{
    bottom:0;
    height:1px;
    background:rgba(25,73,139,.55);
  }
}


/* =========================================================
   BUSINESS SERVICE EN LABEL / FINAL VERTICAL POSITION
   英字ラベルをワイド罫線ぎりぎりまで下げる
   ========================================================= */
@media (min-width:768px){
  .business-page .business-service__title small{
    position:relative;
    top:7px;
    margin:0;
  }
}


/* =========================================================
   BUSINESS HERO LEAD / LINE HEIGHT FINAL
   ヒーロー本文の行間を詰める
   ========================================================= */
@media (min-width:768px){
  .business-page .business-hero__lead{
    line-height:1.58;
  }
}


/* =========================================================
   BUSINESS HERO MOBILE INTEGRATION - 2026-11-04
   背景画像とコピーを一体化。PCレイアウトには影響させない。
   ========================================================= */
@media screen and (max-width:767px) {
  .business-page .business-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 690px;
    min-height: max(690px, 155vw);
    padding: 0 !important;
    overflow: hidden;
    background: #071b3c;
    isolation: isolate;
  }

  .business-page .business-hero__bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover;
    object-position: 65% center;
  }

  .business-page .business-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(7,27,60,.03) 0%,
      rgba(7,27,60,.18) 23%,
      rgba(7,27,60,.83) 48%,
      #071b3c 84%);
  }

  .business-page .business-hero__inner {
    position: relative;
    z-index: 2;
    display: block;
    width: calc(100% - 36px);
    min-height: 0 !important;
    margin: 0 auto;
    padding: 190px 0 38px;
  }

  .business-page .business-hero__copy {
    width: 100% !important;
    padding: 0 !important;
    color: #fff;
  }

  .business-page .business-hero h1 {
    margin: 0;
    font-size: clamp(27px, 7.1vw, 36px);
    line-height: 1.5;
    white-space: normal;
    text-shadow: 0 2px 12px rgba(0,0,0,.38);
  }

  .business-page .business-hero__en {
    margin: 16px 0 22px;
    font-size: 9px;
    line-height: 1.5;
    white-space: normal;
  }

  .business-page .business-hero__lead {
    margin: 0;
    font-size: 13px;
    line-height: 1.85;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .business-page .business-hero__lead br {
    display: none;
  }

  .business-page .business-hero__brand {
    margin-top: 24px;
  }

  .business-page .business-hero__brand span {
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
}

@media screen and (max-width:380px) {
  .business-page .business-hero {
    min-height: 720px;
  }
  .business-page .business-hero__inner {
    padding-top: 170px;
  }
}

/* =========================================================
   MOBILE HERO: solid navy, no background image (2026-11-04)
   PC/tablet >=768px unchanged.
   ========================================================= */
@media screen and (max-width:767px) {
  .business-page .business-hero {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    background: #071b3c !important;
    overflow: hidden;
  }
  .business-page .business-hero__bg {
    display: none !important;
  }
  .business-page .business-hero::before,
  .business-page .business-hero::after {
    content: none !important;
    display: none !important;
  }
  .business-page .business-hero__inner {
    display: block !important;
    width: calc(100% - 40px) !important;
    max-width: 560px;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 56px 0 52px !important;
  }
  .business-page .business-hero__copy {
    width: 100% !important;
    padding: 0 !important;
  }
  .business-page .business-hero h1 {
    margin: 0 !important;
    font-size: clamp(27px, 7vw, 36px) !important;
    line-height: 1.55 !important;
    font-weight: 500;
    text-shadow: none !important;
  }
  .business-page .business-hero__en {
    display: flex !important;
    flex-wrap: wrap;
    white-space: normal !important;
    gap: 9px !important;
    margin: 22px 0 26px !important;
    font-size: 9px !important;
    line-height: 1.6 !important;
    letter-spacing: .04em !important;
  }
  .business-page .business-hero__en::before {
    content: "" !important;
    display: block !important;
    width: 38px !important;
    flex: 0 0 38px !important;
    background: #f4bf18 !important;
  }
  .business-page .business-hero__en::after {
    content: none !important;
    display: none !important;
  }
  .business-page .business-hero__lead {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
    font-weight: 500;
    text-align: left !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .business-page .business-hero__lead br {
    display: none !important;
  }
  .business-page .business-hero__brand {
    margin-top: 30px !important;
  }
  .business-page .business-hero__brand span {
    font-size: 10px !important;
    letter-spacing: .15em;
  }
}

/* =========================================================
   MOBILE HERO: dedicated image (business_01_mobaile.png)
   Image path is relative to assets/css/business.css.
   Desktop layout is unchanged.
   ========================================================= */
@media screen and (max-width: 767px) {
  .business-page .business-hero {
    background-color: #071b3c !important;
    background-image:
      linear-gradient(180deg,
        rgba(3, 15, 38, .32) 0%,
        rgba(3, 15, 38, .66) 27%,
        rgba(3, 15, 38, .86) 58%,
        rgba(3, 15, 38, .96) 100%),
      url("../img/business/business_01_mobaile.png") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }
  .business-page .business-hero__bg {
    display: none !important;
  }
  .business-page .business-hero__inner {
    position: relative;
    z-index: 1;
  }
  .business-page .business-hero h1,
  .business-page .business-hero__en,
  .business-page .business-hero__lead,
  .business-page .business-hero__brand {
    color: #fff !important;
  }
}

/* iPad only: prevent the final character of business card titles wrapping */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .business-page .business-card__head {
    padding-left: 12px;
    padding-right: 12px;
  }
  .business-page .business-card__head > h3 {
    font-size: 13px;
    letter-spacing: -0.045em;
    line-height: 1.4;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* iPad narrow (768–900px): balance long card headings into natural lines */
@media screen and (min-width: 768px) and (max-width: 900px) {
  .business-page .business-card__head {
    padding-left: 10px;
    padding-right: 10px;
  }
  .business-page .business-card__head > h3 {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: -0.035em;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
  }
}