:root{
  --white:#F8F9FB; --text:#040000; --accent:#368061;
  --gray:#F2F4F6; /* CTA 背景 */
  /* 緑カード */
  --nb-green:#368061; --nb-panel:rgba(54, 128, 97, 0.2); --nb-ring:#A6D8C0; --nb-ink:#66A98A;
  --nb-shadow:0 8px 18px rgba(0,0,0,.16); --nb-text:#040000;
  /* メリット2列 */
  --ns-bg:#E9F3EC; --ns-term:#368061; --ns-text:#2B2B2B;
}

/* 共通 */
.newb{ color:var(--text); font-feature-settings:"palt"; }
.newb-container{ width:800px; margin:0 auto; }

/* HERO（背景画像＋h1） */
.newb-hero{
  position:relative; height:150px;
  display:flex;                      /* ← Flexで縦中央 */
  background:center/cover no-repeat url('../img/newbuisiness_hd.jpg');
  margin-bottom: 50px;
}

.newb-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.28) 75%, rgba(0,0,0,.44) 100%);
}
.newb-hero__inner{
  position:relative; z-index:1;
  height:100%; width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:0; text-align:center;
}

.newb-hero__title{ 
    display:block; margin:0; color:var(--white) !important; font-weight:800; font-size:2.1rem; text-shadow:0 2px 10px rgba(0,0,0,.25); letter-spacing: 0.15rem;
text-align: center;}

/* 市場導入（PC） */
.newb-market{ padding:28px 0 16px; }
.newb-market__title{
  margin:0 0 16px; font-weight:800; letter-spacing:.02em;
  font-size:24px; line-height:1.5; text-align:center;
}
.newb-market__title .em{ display:block; font-size:28px; }
.newb-market__lead{
  margin:10px auto 0; color:#2B2B2B;
 line-height:1.9; text-align:left;
 width: min(700px, 100%);
}





/* 緑カード（2〜7） */
.nb-block{ margin:20px 0 24px; color:var(--nb-text); display:grid; place-items:center; }
.nb-card{
  background:var(--nb-panel); border-radius:14px; box-shadow:var(--nb-shadow); overflow:hidden;
  width:min(700px, 100%); margin:0 auto; /* 幅を明示して中央寄せを確定 */
}



.nb-card__head{ background:var(--nb-green); height:64px; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 32px; }
.nb-card__title{ margin:0 auto; width:100%; color:var(--white); font-weight:800; font-size:22px; letter-spacing:.02em; text-align:center !important; }
.nb-card__body{ padding:28px 32px 26px; }

.nb-rows{ list-style:none; margin:0 auto 18px; padding:0; display:grid; row-gap:18px; width:70%; }
.nb-row{ display:grid; grid-template-columns:84px 1fr; align-items:center; }
.nb-row__text{ font-size:18px; text-align: left; margin-left: 1rem;}
.nb-mark{
  --mark-d: 64px;    /* 直径 */
  --ring-w: 8px;     /* 線の太さ */
  --gap: 60deg;      /* 右側の欠け角 */
   --gap-center: 90deg; 

  position: relative;
  width: var(--mark-d);
  height: var(--mark-d);
  margin-right: 3rem;
  overflow: visible; /* 文字をはみ出させる */
  background: none;  /* 枠は ::before で描く */
  border: 0;
  -webkit-mask: none; mask: none; /* ←親にはマスクを掛けない！ */
}
.nb-mark::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  /* リング（枠線） */
  border: var(--ring-w) solid var(--nb-green, #368061);
  border-radius: 50%;
  background: none;

  /* 欠け：中心＝--gap-center、幅＝--gap */
  -webkit-mask: conic-gradient(
    from calc(var(--gap-center) - var(--gap)/2),
    transparent 0 var(--gap),  /* ← ここが“穴” */
    #000 var(--gap) 360deg
  );
          mask: conic-gradient(
    from calc(var(--gap-center) - var(--gap)/2),
    transparent 0 var(--gap),
    #000 var(--gap) 360deg
  );
}



.nb-mark > span{
  position: relative; z-index: 1; /* ::before(z-index:0) より前面 */
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  font-weight:800; font-size:18px; letter-spacing:.02em; text-transform:lowercase;
  color: var(--nb-green);
  transform: translateX(14px); /* はみ出し量は 6〜14px で調整 */
}

/* ===== 緑カードの“逆三角＋まとめ文言” ===== */
.nb-tail{
  width:min(1120px, 100%);
  margin: 30px auto 50px;          /* カードとの間隔 / 下の余白 */
  text-align: center;
  color:#368061;
}
.nb-tail__tri{
  display:inline-block;
  width:0; height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:16px solid #368061;   /* ▼下向きは border-top に色 */
  margin-bottom:12px;
}
.nb-tail__text{
  margin:0;
  font-weight:800;
  font-size:28px;                   /* 見本サイズに近い太めの見出し */
  line-height:1.2;
  letter-spacing:.02em;
  color:#368061;                    /* 文字色：#368061 */
}

/* ===== nb-mark 反時計回りスイープ & テキストのスライドイン ===== */

/* 角度用カスタムプロパティ（スムーズにアニメさせるため） */
@property --sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
/*  */
/* アニメの基準：右の欠け角・太さは既存と揃える */
/* .nb-mark{ --gap:60deg; --ring-w:8px; }          SPは既に --ring-w:7px などで上書き済みならそのまま */

/* 右欠けを保ったまま、反時計回りに“描いていく” */
/* 中心角（--gap-center）＋欠け幅（--gap）を基準に、ギャップ直後から反時計回りに描く */
.nb-anim .nb-mark::before{
  border: 0;
  background:
    conic-gradient(
      from calc(var(--gap-center, 90deg) + var(--gap, 60deg)/2),
      var(--accent, #368061) 0 var(--sweep),
      transparent var(--sweep) 360deg
    );
  /* ドーナツ化（リング化）は維持 */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w)));
  animation: nb-mark-sweep 800ms ease-out both;
}


/* ギャップ直後(=0)から 360 - gap まで弧を伸ばす。transform回転は不要 */
@keyframes nb-mark-sweep{
  from { --sweep: 0deg; opacity:.001; }
  to   { --sweep: calc(360deg - var(--gap, 60deg)); opacity:1; }
}


/* テキスト：ふわっとスライドイン（右から） */
.nb-anim .nb-row__text{
  transform: translateX(10px);
  opacity: 0;
  animation: nb-text-slide 520ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes nb-text-slide{
  to { transform: translateX(0); opacity: 1; }
}

/* スタッガー（1行目→2行目→3行目…を少し遅らせる） */
.nb-anim .nb-row:nth-child(1) .nb-mark::before,
.nb-anim .nb-row:nth-child(1) .nb-row__text{ animation-delay: 0ms; }
.nb-anim .nb-row:nth-child(2) .nb-mark::before,
.nb-anim .nb-row:nth-child(2) .nb-row__text{ animation-delay: 120ms; }
.nb-anim .nb-row:nth-child(3) .nb-mark::before,
.nb-anim .nb-row:nth-child(3) .nb-row__text{ animation-delay: 240ms; }

/* ユーザー配慮：低速/無効（端末設定でReduce Motionの時） */
@media (prefers-reduced-motion: reduce){
  .nb-anim .nb-mark::before,
  .nb-anim .nb-row__text{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}



/* フォールバック（mask非対応：丸枠＋右を面で消して欠けに見せる） */
@supports not ((mask: radial-gradient(circle, #000 0 50%, transparent 51%)) or (-webkit-mask: radial-gradient(circle, #000 0 50%, transparent 51%))){
  .nb-mark{ border-radius:50%; border: var(--ring-w) solid var(--nb-green); }
  .nb-mark::before{
    background:none;
    -webkit-mask:none; mask:none;
    border-radius:50%;
    box-shadow: calc(var(--mark-d)/2) 0 0 0 var(--nb-panel); /* 右側を面で被せる */
  }
}
.nb-desc{ margin:8px 0 0; line-height:1.9; color:#2B2B2B; text-align: left; }

/* メリット（2列リスト版） */
.newb-summary{ background:var(--ns-bg); padding:50px 32px; margin:40px auto 0; }
.ns2-title{ margin:0; text-align:center; font-weight:800; font-size:36px; letter-spacing:.04em; color:#0B1B12; font-weight: 100; padding: 30px auto;}
.ns2-list{ list-style:none; padding:0; margin:40px auto 0; display:grid; row-gap:10px;  width:min(600px, 80%);font-size: 1.2rem;}
.ns2-row{ display:grid; grid-template-columns:140px 1fr; align-items:baseline; }
.ns2-term{ color:var(--ns-term); font-weight:800; letter-spacing:.04em; text-align:right; padding-right:20px; white-space:nowrap; }
.ns2-desc{ color:var(--ns-text);  line-height:1.9; text-align: left;}

/* CTA */
.newb-cta{ 
    background:linear-gradient(0deg, #fff 0%, var(--gray) 100%); padding:50px 0; text-align:center;
    color: #368061;
font-family:
  "BIZ UDMincho", "BIZ UDPMincho",   /* Win 10/11 のUD明朝 */
  "Yu Mincho", "YuMincho",           /* Win 8+ 遊明朝 */
  "Hiragino Mincho ProN", "Hiragino Mincho Pro", /* macOS/iOS */
  "Noto Serif JP", "Source Han Serif JP",        /* Android/汎用 */
  "MS PMincho", "MS Mincho",
  serif;
}
.newb-cta p{ margin:0; font-weight:700; line-height:1.7; font-size:36px; }

/* 画面幅768px以下でPCベースを上書き */
@media (max-width: 768px){

  /* コンテナ：共通ヘッダー余白は common.css/JS に任せる。幅だけ縮小 */
  .newb-container{ width:92vw; margin:0 auto; padding:0; }

  /* HERO：h1を縦横センター（body/htmlは編集しない） */
.newb-hero{
  height: 90px;                              /* 120 → 96 */
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 12px;                           /* 28 → 12 */
  background-position:center; background-size:cover;
}
.newb-hero__title{ font-size: 20px; letter-spacing:.06em; } /* 22 → 20 */

  .newb-hero__inner{
    height:100%; width:100%;
    display:flex; align-items:center; justify-content:center;
    padding:0; text-align:center;
  }

  /* 市場導入ブロック */
  .newb-market{ padding: 18px 0 10px; }
  .newb-market__title{ font-size: 18px; margin: 0 0 10px; }
  .newb-market__title .em{ font-size: 20px; }
  .newb-market__lead{ max-width:none; font-size: 14.5px; line-height:1.85; }

  /* 緑カード：中央寄せ + 全幅運用 */
  .nb-block{ margin:16px 0 20px; }
  .nb-card{ width:90%; margin:0 auto; border-radius:12px; }
  .nb-card__head{ height:auto; padding: 4% 14px; }
  .nb-card__title{ font-size: 18px; }
  .nb-card__body{ padding: 18px 14px; }

  /* 行レイアウト：SPは全幅で詰まりを解消 */
  .nb-rows{ width:100%; row-gap: 14px; margin: 0 0 12px; }
  .nb-row{ grid-template-columns: 64px 1fr; align-items:center; }
  .nb-row__text{ font-size: 15px; margin-left: .5rem; }

  /* C形リング（右欠け）＋英字はみ出し：SPサイズ */
  .nb-mark{ --mark-d:56px; --ring-w:7px; --gap:60deg; margin-right: 1.25rem; }

  .nb-mark > span{ font-size:16px; transform: translateX(8px); }

  /* 逆三角＋まとめ文言：カード幅に合わせて縮小 */
  .nb-tail{ width:100%; margin: 18px auto 24px; }
  .nb-tail__tri{
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:14px solid #368061;  /* ▼ 下向き */
    margin-bottom:10px;
  }
  .nb-tail__text{ font-size: 20px; line-height:1.5; }

  /* メリット（2列→1列） */
  .newb-summary{ padding: 30px 14px; margin: 18px auto 0; }
  .ns2-title{ font-size: 20px; margin: 0 0 12px; }
  .ns2-list{ row-gap: 8px; }
  .ns2-row{ grid-template-columns: 1fr; row-gap: 2px; }
  .ns2-term{ text-align: left; padding-right: 0; font-size: 16px; }
  .ns2-desc{ font-size: 15px; }

  /* CTA */
  .newb-cta{ padding: 28px 0 40px; }
  .newb-cta p{ font-size: 20px; }
}