@charset "UTF-8";
/* =========================================================
   みらい社保 SEO / Google広告「関連性」改修用 追加CSS
   style.css の「後」に読み込む（style.css は一切変更しない）

   サイズは元画像の実測値（2倍書き出し ÷2）に合わせてある。
   ex) resolve-graph.webp 1968x592 → 表示 984x296
   ========================================================= */

/* ---------------------------------------------------------
   1. h2 の上に乗せる小見出し（h2 タグ内にキーワードを持たせる）
      ※ .p-worries__title span には既存CSSで
         「圏点(radial-gradient)＋font-size:2.25rem」が当たっているため
         打ち消しが必要
   --------------------------------------------------------- */
.p-worries__title .c-eyebrow,
.p-reason__title .c-eyebrow,
.p-faq__title .c-eyebrow {
  display: block;
  font-size: 0.5em;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #3DC0B2;
  background-image: none;
  padding-top: 0;
  margin-bottom: 0.55em;
}
@media screen and (max-width: 767px) {
  .p-worries__title .c-eyebrow,
  .p-reason__title .c-eyebrow,
  .p-faq__title .c-eyebrow {
    font-size: 0.7em;
    margin-bottom: 0.5em;
  }
}

/* ---------------------------------------------------------
   2. 保険料比較グラフ
      resolve-graph.webp / sp_resolve-graph.webp のHTML化
   --------------------------------------------------------- */
.c-graph {
  --bar-w: 6.25rem;      /* 100px */
  --bar-gap: 0.625rem;   /* 10px  */
  --group-w: 26.875rem;  /* 430px */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2.3125rem;        /* 37px */
  width: 61.5rem;        /* 984px = 元画像と同じ */
  margin: 3.75rem auto 0;
}
@media screen and (max-width: 767px) {
  .c-graph {
    --bar-w: 5.0625rem;         /* 81px    */
    --bar-gap: 0.5416667rem;    /* 8.667px */
    --group-w: 21.875rem;       /* 350px   */
    display: block;
    width: 21.875rem;
    margin: 1.875rem auto 0;
  }
}

.c-graph__group {
  width: var(--group-w);
  flex: 0 0 var(--group-w);
}
@media screen and (max-width: 767px) {
  /* 間に svg が入るので隣接(+)ではなく後方(~)で指定する */
  .c-graph__group--after {
    margin-top: 4.6875rem; /* 75px */
  }
}

.c-graph__title {
  font-size: 1.34375rem; /* 21.5px */
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: #333333;
}
.c-graph__group--after .c-graph__title {
  color: #FF8A5D;
}
@media screen and (max-width: 767px) {
  .c-graph__title {
    font-size: 1.0625rem; /* 17px */
  }
  .c-graph__group--after .c-graph__title {
    font-size: 1.34375rem; /* 21.5px */
  }
}

.c-graph__bars {
  display: flex;
  align-items: flex-end;
  gap: var(--bar-gap);
  margin-top: 2.28125rem; /* 36.5px */
}
@media screen and (max-width: 767px) {
  .c-graph__bars {
    margin-top: 1.59375rem; /* 25.5px */
  }
  .c-graph__group--after .c-graph__bars {
    margin-top: 1.65625rem; /* 26.5px */
  }
}

.c-graph__col {
  width: var(--bar-w);
  flex: 0 0 var(--bar-w);
}

.c-graph__bar {
  display: flex;
  flex-direction: column;
}

.c-graph__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
  .c-graph__seg {
    font-size: 0.875rem; /* 14px */
  }
}
.c-graph__seg--pension {
  background: #3EC0B2;
  color: #FFFFFF;
}
.c-graph__seg--fee {
  background: #F8F8F8;
  color: #333333;
  margin-top: 0.0625rem;
}

.c-graph__zero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0.125rem dotted #333333;
  font-size: 1.125rem;
  font-weight: 600;
  color: #333333;
  background: transparent;
}
@media screen and (max-width: 767px) {
  .c-graph__zero {
    font-size: 1.0625rem;
  }
}

/* --- 棒の高さ：PC（元画像 resolve-graph.webp の実測値 ÷2）--- */
.c-graph__group--before .c-graph__col:nth-child(1) .c-graph__seg { height: 6.21875rem; }  /* 99.5px */
.c-graph__group--before .c-graph__col:nth-child(2) .c-graph__seg { height: 4.96875rem; }  /* 79.5px */
.c-graph__group--before .c-graph__col:nth-child(n+3) .c-graph__seg--fee { height: 5rem; } /* 80px  */
.c-graph__group--after  .c-graph__col:nth-child(1) .c-graph__seg { height: 6.21875rem; }
.c-graph__group--after  .c-graph__col:nth-child(2) .c-graph__zero { height: 9.96875rem; } /* 159.5px */
.c-graph__group--after  .c-graph__col:nth-child(n+3) .c-graph__zero { height: 4.96875rem; }

/* --- 棒の高さ：SP（元画像 sp_resolve-graph.webp の実測値 ÷2）--- */
@media screen and (max-width: 767px) {
  .c-graph__group--before .c-graph__col:nth-child(1) .c-graph__seg { height: 5.3125rem; }   /* 85px   */
  .c-graph__group--before .c-graph__col:nth-child(2) .c-graph__seg { height: 4.25rem; }     /* 68px   */
  .c-graph__group--before .c-graph__col:nth-child(n+3) .c-graph__seg--fee { height: 4.28125rem; } /* 68.5px */
  .c-graph__group--after  .c-graph__col:nth-child(1) .c-graph__seg { height: 6.1875rem; }   /* 99px   */
  .c-graph__group--after  .c-graph__col:nth-child(2) .c-graph__zero { height: 9.96875rem; }
  .c-graph__group--after  .c-graph__col:nth-child(n+3) .c-graph__zero { height: 4.96875rem; }
}

.c-graph__label {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: #333333;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
  .c-graph__label {
    margin-top: 0.90625rem;
    font-size: 0.9375rem;
  }
}

.c-graph__arrow {
  width: 3.125rem;        /* 50px   */
  height: 5.78125rem;     /* 92.5px */
  flex: 0 0 3.125rem;
  margin-top: 8.21875rem; /* 131.5px */
}
@media screen and (max-width: 767px) {
  .c-graph__arrow {
    display: none;
  }
}

/* ---------------------------------------------------------
   3. 「毎月コストを削減しながら〜」吹き出し
      resolve-bottom.webp / sp_resolve-bottom.webp のHTML化
   --------------------------------------------------------- */
.c-bubble {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 53.875rem; /* 862px = 元画像と同じ */
  margin: 3.75rem auto 0;
}
@media screen and (max-width: 767px) {
  .c-bubble {
    display: block;
    width: 21.875rem;
    margin: 1.25rem auto 0;
  }
}

.c-bubble__box {
  position: relative;
  width: 40.1875rem; /* 643px */
  flex: 0 0 40.1875rem;
  border: 0.1875rem solid #53B6AE;
  border-radius: 1.25rem;
  padding: 1rem 1.75rem;
  background: transparent;
  margin-bottom: 0.3125rem;
}
@media screen and (max-width: 767px) {
  .c-bubble__box {
    width: 100%;
    padding: 1.125rem 1.25rem 0.9375rem;
    margin-bottom: 0;
  }
}

/* 吹き出しのしっぽ（枠線をまたぐ斜線） */
.c-bubble__box::after {
  content: "";
  position: absolute;
  width: 2.9375rem;  /* 47px */
  height: 0.3125rem; /* 5px  */
  background: #3DC0B2;
  right: -1.90625rem;
  top: 53%;
  rotate: 38deg;
}
@media screen and (max-width: 767px) {
  .c-bubble__box::after {
    right: auto;
    left: 44%;
    top: auto;
    bottom: -0.0625rem;
    rotate: -54deg;
  }
}

.c-bubble__title {
  font-size: 1.84375rem; /* 29.5px */
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: 0.01em;
  color: #333333;
}
@media screen and (max-width: 767px) {
  .c-bubble__title {
    font-size: 1.1875rem; /* 19px */
    line-height: 1.46;
  }
}

.c-bubble__note {
  margin-top: 0.875rem;
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #333333;
}
@media screen and (max-width: 767px) {
  .c-bubble__note {
    margin-top: 0.75rem;
    font-size: 0.65625rem; /* 10.5px：元画像実測どおり。これ以上大きいと1行目が折り返す */
    line-height: 1.3;
    letter-spacing: 0;
  }
}

.c-bubble__img {
  width: 10.4375rem; /* 167px */
  flex: 0 0 10.4375rem;
  height: auto;
}
@media screen and (max-width: 767px) {
  /* SPでは <picture> 自体をブロック化して中央寄せする。
     picture はリセットCSSで inline-block のままなので、
     img に margin:auto を当てても中央に寄らない */
  .c-bubble picture {
    display: block;
    width: 6.75rem; /* 108px */
    margin: 1.4375rem auto 0;
  }
  .c-bubble__img {
    display: block;
    width: 100%;
    margin: 0;
  }
}

/* ---------------------------------------------------------
   4. 料金プランの「業界最安水準！」
      plan-bubble.webp / sp_plan-bubble.webp のHTML化
   --------------------------------------------------------- */
.c-tag {
  position: relative;
  display: block;
  width: 18.125rem;        /* 290px  */
  height: 3.71875rem;      /* 59.5px */
  line-height: 3.71875rem;
  margin: 3.375rem auto 0.9375rem; /* 下15px = 三角の高さ分 */
  background: #FF895D;
  color: #FFFFFF;
  font-size: 2rem;         /* 32px */
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .c-tag {
    width: 11.0625rem;      /* 177px  */
    height: 2.40625rem;     /* 38.5px */
    line-height: 2.40625rem;
    margin: 1.25rem auto 0.59375rem;
    font-size: 1.125rem;    /* 18px */
  }
}
.c-tag::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.9375rem;
  translate: -50%;
  border-style: solid;
  border-width: 0.9375rem 0.515625rem 0 0.515625rem; /* 15px / 底辺16.5px */
  border-color: #FF895D transparent transparent transparent;
}
@media screen and (max-width: 767px) {
  .c-tag::after {
    bottom: -0.59375rem;
    border-width: 0.59375rem 0.359375rem 0 0.359375rem; /* 9.5px / 底辺11.5px */
  }
}

/* ---------------------------------------------------------
   5. フッター（新設）
   --------------------------------------------------------- */
.l-footer {
  background: #3DC0B2;
  color: #FFFFFF;
  padding-block: 2.5rem 6.25rem; /* 追従CTAに隠れないよう下を厚く */
  text-align: center;
}
@media screen and (max-width: 767px) {
  .l-footer {
    padding-block: 1.875rem 5.625rem;
  }
}

.l-footer__logo {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  .l-footer__logo {
    font-size: 1.25rem;
  }
}

.l-footer__desc {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
}
@media screen and (max-width: 767px) {
  .l-footer__desc {
    font-size: 0.75rem;
  }
}

.l-footer__info {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .l-footer__info {
    display: block;
    margin-top: 1.125rem;
    font-size: 0.75rem;
  }
}
.l-footer__info dt {
  font-weight: 600;
}
.l-footer__info dt::after {
  content: "：";
}
@media screen and (max-width: 767px) {
  .l-footer__info dt,
  .l-footer__info dd {
    display: inline;
  }
  .l-footer__info dd::after {
    content: "";
    display: block;
  }
}

.l-footer__copy {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .l-footer__copy {
    margin-top: 1.125rem;
    font-size: 0.6875rem;
  }
}

.l-footer dl,
.l-footer dt,
.l-footer dd {
  margin: 0;
  padding: 0;
}


/* ---------------------------------------------------------
   6. LINE相談ボタン
      cta.webp / sp_cta.webp のHTML化
      ボタン面はCSS、右の女性イラストだけ切り出した画像を重ねる。
      面が単色 #FF895D なので継ぎ目は出ない。
      サイズは元画像の実測値（2倍書き出し ÷2）
      PC 611x111 / SP 350x118
   --------------------------------------------------------- */
.c-cta__btn {
  position: relative;
  display: flex;
  align-items: center;
  width: 21.875rem;      /* SP 350px */
  height: 7.375rem;      /* SP 118px */
  overflow: hidden;
  text-decoration: none;
}
@media (min-width: 768px) {
  .c-cta__btn {
    width: 38.1875rem;   /* PC 611px */
    height: 6.9375rem;   /* PC 111px */
  }
}

/* 影（濃いオレンジ） */
.c-cta__btn::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0.65625rem;       /* SP 10.5px */
  height: 6.6875rem;     /* SP 107px */
  background: #EC7F54;
  border-radius: 1.5rem; /* SP 24px */
}
@media (min-width: 768px) {
  .c-cta__btn::before {
    top: 0.21875rem;     /* PC 3.5px */
    border-radius: 1.8125rem; /* PC 29px */
  }
}

/* 面（明るいオレンジ） */
.c-cta__btn::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0.65625rem;       /* SP 10.5px */
  height: 6.1875rem;     /* 99px（PC/SP共通） */
  background: #FF895D;
  border-radius: 1.5rem;
}
@media (min-width: 768px) {
  .c-cta__btn::after {
    top: 0.21875rem;
    border-radius: 1.8125rem;
  }
}

/* 文字 */
.c-cta__btn-txt {
  position: relative;
  z-index: 2;
  display: block;
  top: -0.078125rem;          /* SP 微調整 -1.25px */
  padding-left: 2.15625rem;   /* SP 34.5px */
  color: #FFFFFF;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  font-size: 1.50625rem;      /* SP 24.1px */
  line-height: 1.595;
  letter-spacing: 0.01em;
  text-align: left;
}
.c-cta__btn-txt .now {
  font-size: 0.743em;         /* SP「今すぐ」は小さい */
}
@media (min-width: 768px) {
  .c-cta__btn-txt {
    top: -0.1875rem;          /* PC 微調整 -3px */
    padding-left: 5.5625rem;  /* PC 89px */
    font-size: 2rem;          /* PC 32px */
  }
  .c-cta__btn-txt .now { font-size: 1em; }
}

/* 右の女性イラスト（元画像から切り出し） */
.c-cta__btn > picture {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.c-cta__btn-fig {
  display: block;
  height: 100%;
  width: 8.5rem;    /* SP 136px：img の width/height 属性に依存させず固定 */
}
@media (min-width: 768px) {
  .c-cta__btn-fig { width: 11.625rem; }  /* PC 186px */
}

/* 追従CTAも同じボタンを使う。
   .c-cta__btn の position:relative が style.css の
   .c-cta__fixed{position:fixed} と同詳細度で競合するため、明示的に戻す */
.c-cta__fixed.c-cta__btn {
  position: fixed;
  width: 21.875rem;
}
@media (min-width: 768px) {
  .c-cta__fixed.c-cta__btn { width: 38.1875rem; }
}