/* =========================
  明朗会計（lp-accounting）
========================= */
.lp-accounting{
  background:#fff;
}

.lp-accounting__inner{
  max-width:1100px;
  margin:0 auto;
  padding:64px 24px;
}

.lp-accounting__grid{
  display:flex;
  align-items:center;
  gap:56px;
}

/* 左（円）を「少し小さく」して右の幅を確保 */
.lp-accounting__left{
  flex:0 0 auto;
}

.lp-accounting__circlesImg{
  width:420px;       /* ★ここで大きさ調整（例：450→420に縮小） */
  max-width:100%;
  height:auto;
  display:block;
}

/* 右 */
.lp-accounting__right{
  flex:1 1 auto;
  min-width:0; /* flexの折返し計算を安定させる */
}

/* キャッチ周り */
.lp-accounting__catch{
  position:relative;
  padding-left:44px; /* デコの居場所 */
}

.lp-accounting__deco {
    position: absolute;
    left: -10px;
    top: -50px;
    width: 100px;
    height: auto;
}
/* 「トモクルは」 */
.lp-accounting__label{
  margin:0 0 8px;
  font-weight:700;
  font-size:30px; /* ★少し大きく */
  letter-spacing:.02em;
  color:#111;
}

/* メインキャッチ（改行させない） */
.lp-accounting__title{
  margin:0;
  font-weight:900;
  line-height:1.15;
  letter-spacing:.02em;
}

.lp-accounting__titleMain{
  display:inline-block;
  white-space:nowrap; /* ★ここで改行禁止 */
  font-size:clamp(30px, 3.2vw, 44px); /* ★全体を少し大きく */
  /* すでに黄色下線が別CSSならそれを優先。ここでは例で残すなら↓
  background:linear-gradient(transparent 62%, #f4e27a 62%);
  */
}

/* 本文 */
.lp-accounting__text{
  margin-top:18px;
  font-size:16px;
  line-height:1.9;
  color:#222;
}

/* ====== レスポンシブ ====== */
@media (max-width: 980px){
  .lp-accounting__grid{
    gap:32px;
  }
  .lp-accounting__circlesImg{
    width:380px; /* さらに少し縮めて右を確保 */
  }
}

@media (max-width: 768px){
  /* スマホ：コピー上、円下（要望通り） */
  .lp-accounting__grid{
    flex-direction:column;
    align-items:stretch;
  }

  .lp-accounting__catch{
    padding-left:20px;
  }

  /* スマホは画面が狭いので、nowrapを解除して自然改行にする方が安全
     （「スマホでも絶対1行」が要件ならこの2行は削除） */
  .lp-accounting__titleMain{
    white-space:normal;
  }

  .lp-accounting__circlesImg{
    width:min(420px, 100%);
    margin:18px auto 0;
  }
    .lp-accounting__deco {
        left: -10px;
        top: -30px;
        width: 60px;
    }
}

@media (max-width: 768px){
.lp-accounting__titleMain{
  position: relative;
  display: inline-block;
  white-space: nowrap;        /* PCで改行させない */
  font-weight: 900;
  font-size: 24px;
  line-height: 1.15;
  z-index: 0;
}

.lp-accounting__titleMain::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;             /* 文字に食い込む位置 */
  height: 0.38em;             /* 黄色帯の太さ */
  background: #f4e27a;        /* デザイン通りの黄色 */
  z-index: -1;
  border-radius: 2px;
}

.lp-accounting__label{
  margin:0;
  font-size:22px; /* ★少し大きく */
  color:#333;
}

}

/* ===== 明朗会計キャッチ：強調部分 ===== */
.lp-accounting__em{
  position: relative;
  display: inline-block;
  color: #1d2088;          /* ★ 指定の濃いネイビー */
  font-weight: 900;
  z-index: 0;
}

/* 黄色の強調線 */
.lp-accounting__em::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;          /* 文字に軽く被せる */
  height: 0.38em;          /* 下線の太さ */
  background: #f4e27a;     /* 既存デザインの黄色 */
  z-index: -1;
  border-radius: 2px;
}

/* タイトル全体（改行制御はここ） */
.lp-accounting__titleMain{
  white-space: nowrap;     /* PCで改行させない */
}