:root {
    --color-primary: #f17b1b;
    --color-orange: #ff7400;
    --color-green: #4aa614;
    --color-dark: #333;
    --fw-bold: 700;
    --fw-black: 900;
  }

  #top .title { padding-bottom: 0; }
  #top .points .point.trouble-highlight {
    position: relative;
    overflow: hidden;
    margin: 0 15px;
  }
  #top .points .point.trouble-highlight::after {
    content: "";
    position: absolute;
    top: 0;
    right: -5%;
    width: 32%;
    height: 105%;
    background: #e5c99e linear-gradient(150deg, #f1d5aa 25%, transparent 25%, transparent 75%, #f1d5aa 75%, #f1d5aa),
      linear-gradient(150deg, #f1d5aa 25%, transparent 25%, transparent 75%, #f1d5aa 75%, #f1d5aa);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    clip-path: polygon(60% 0%, 100% 0%, 95% 100%, 5% 100%);
    border-left: 1px solid rgba(249, 201, 79, 0.65);
    z-index: 0;
    pointer-events: none;
  }
  #top .points .point.trouble-highlight > * { position: relative; z-index: 1; }
  #top .points .point.trouble-highlight .left {
    background: linear-gradient(#e04444, #3f0057);
    color: #fff;
    width: 90px;
    font-weight: bold;
  }
  #top .points .point.trouble-highlight .right { width: calc(100% - 90px); }
  #top .points .point.trouble-highlight .trouble-highlight__label { font-size: 24px; display: inline-block; }
  #top .points .point.trouble-highlight .trouble-highlight__number { font-size: 75px; display: inline-block; line-height: 1.2; }

  @media (min-width: 992px) {
    #top .title { position: relative; }
    #top .title .catchphrase { transform: translateY(-20px); }
    #top .title .image {
      position: relative;
      left: -100px;
      margin-right: -100px;
      width: auto !important;
      max-width: none;
    }
    #top .title .image img { width: auto; height: auto; max-width: none; display: block; }
  }

  .funding-guide-box {
    border: 6px solid var(--color-orange);
    border-radius: 4px;
    background-image: url("../images/bg_pattern.png");
    margin: 60px -35px 120px;
  }
  .funding-header {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    padding: 15px 30px;
    background: linear-gradient(#1375ca, #3c669c);
  }
  .funding-header i { margin-right: 15px; }
  .funding-content { padding: 30px 20px; }
  .funding-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    color: var(--color-dark);
    border-bottom: 3px solid #f60;
    padding-bottom: 10px;
  }
  .funding-title .highlight { color: #f60; }
  .funding-option {
    border: 5px solid;
    border-radius: 8px;
    margin: 20px 0;
    overflow: hidden;
    background-color: #fff;
    font-family: Meiryo, メイリオ, sans-serif;
  }
  .orange-box { border-color: #f8b551; }
  .green-box { border-color: var(--color-green); }
  .option-header {
    padding: 8px 24px;
    font-weight: bold;
    color: #fff;
    font-size: 30px;
    border-radius: 24px;
    margin: 24px auto 10px;
    display: block;
    text-align: center;
    width: fit-content;
    line-height: 1;
  }
  .orange-box .option-header { background-color: var(--color-orange); }
  .green-box .option-header { background-color: var(--color-green); }
  .combined-funding {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding: 30px 20px 0;
    color: var(--color-dark);
  }
  .amount-display { text-align: center; padding: 20px; font-size: 18px; color: var(--color-dark); }
  .amount { font-size: 68px; font-weight: bold; color: var(--color-dark); margin: 0 5px; }
  .amount-display strong { font-size: 40px; font-weight: bold; }
  .warning-icon-large { flex-shrink: 0; margin-right: 15px; width: 60px; height: 60px; align-self: center; }
  .warning-note { display: flex; align-items: flex-start; margin: 20px 0; padding: 15px; }
  .warning-icon { flex-shrink: 0; margin-right: 15px; width: 30px; height: 30px; }
  .warning-text { font-size: 18px; line-height: 1.6; color: var(--color-dark); }

  #charge .charge-visual { position: relative; max-width: 900px; margin: 40px auto; }
  #charge .charge-visual .charge-main { display: block; width: 100%; height: auto; }
  #charge .charge-visual .charge-badge { position: absolute; top: -30px; right: -30px; width: 30%; max-width: 280px; height: auto; }

  @media (max-width: 768px) {
    .funding-title { font-size: 20px; }
    .amount { font-size: 36px; }
    .option-header { font-size: 16px; }
    .combined-funding { font-size: 18px; }
    .funding-content { padding: 20px 15px; }
    #charge .charge-visual { margin: 20px auto 10px; }
    #charge .charge-visual .charge-badge { position: static; display: block; margin: 15px auto 0; width: 60%; max-width: 220px; }
  }

  @media (min-width: 768px) {
    #chance .box-b .row { display: flex; align-items: center; flex-wrap: wrap; }
    #chance .box-b .row > [class*="col-"] {
      float: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }
    #chance .box-b .row > [class*="col-"]:last-child { align-items: center; }
  }

  #charge h2.h1 { color: var(--color-primary); font-weight: var(--fw-bold); letter-spacing: 0.05em; }
  #charge .charge-wrapper {
    border: 4px solid #f28a1c;
    border-radius: 8px;
    background-color: #fff;
    margin: 60px -35px 80px;
    padding: 45px 30px 50px;
  }
  .charge-heading { font-size: clamp(32px, 5vw, 54px); font-weight: var(--fw-bold); margin-bottom: 38px; color: var(--color-dark); text-align: center; }
  .charge-plan {
    border: 5px solid #f5b16a;
    border-radius: 8px;
    padding: 32px 24px;
    margin-bottom: 32px;
    background-color: transparent;
    text-align: center;
    position: relative;
  }
  .charge-plan-option { border-color: #f28a1c; }
  .charge-plan-label { font-size: 30px; font-weight: var(--fw-bold); margin-bottom: 18px; }
  .charge-plan-option .charge-plan-label { font-size: 34px; }
  .charge-plan-label--secondary {
    color: #c1272d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-image: linear-gradient(transparent 0, transparent 60%, #fdd6aa 60%, #fdd6aa 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 4px 10px 0px;
    border-radius: 6px;
    margin-bottom:30px;
  }
  .charge-plan-label__icon {
    width: 37px;
    height: 37px;
    display: inline-block;
    background: url("../images/red-arrow.png") no-repeat;
    background-size: cover;
    flex-shrink: 0;
  }
  .charge-plan-label__text { display: inline-block; }
  .charge-plan-fee { font-size: 28px; margin-bottom: 12px; color: var(--color-dark); }
  .charge-plan-option .charge-plan-fee { font-size: 34px; }
  .charge-plan-lead { margin-right: 4px; }

  .charge-plan-amount, .charge-plan-rate {
    font-size: 60px;
    font-weight: var(--fw-black);
    line-height: 1;
    display: inline-block;
  }
  .charge-plan-amount { color: var(--color-primary); margin-right: 6px; }
  .charge-plan-rate { color: var(--color-dark); margin-right: 4px; }
  .charge-plan-option .charge-plan-amount, .charge-plan-option .charge-plan-rate {
    font-size: 118px;
    color: #fff;
    margin: 0;
  }

  .charge-plan-plus { margin: 0 6px; font-size: 30px; font-weight: var(--fw-bold); }
  .charge-plan-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    background-color: #ff7401;
    color: #fff;
    padding: 5px;
    line-height: 1;
    margin-right: 8px;
  }
  .charge-plan-chip .charge-plan-amount, .charge-plan-chip .charge-plan-per, .charge-plan-chip .charge-plan-rate {
    color: inherit;
    margin: 0;
    display: inline-block;
  }
  .charge-plan-chip__inline { display: inline-flex; align-items: baseline; gap: 8px; }
  .charge-plan-chip--stacked { flex-direction: column; align-items: end; padding: 5px; margin-right: 0; gap: 6px; }
  .charge-plan-note--chip { font-size: 16px; color: inherit; display: block; text-align: center; }
  .charge-plan-text { margin-right: 4px; }

  .charge-plan-per {
    font-size: 36px;
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    margin-right: 6px;
    display: inline-block;
  }
  .charge-plan-option .charge-plan-per { font-size: 60px; color: #fff; margin: 0; }
  .charge-plan-note { font-size: 16px; }
  .charge-plan-primary .charge-plan-rate, .charge-plan-primary .charge-plan-note { color: var(--color-primary); }
  .charge-plan-note--stack { display: block; margin-top: 12px; }
  .charge-plan-min { font-size: 30px; color: var(--color-dark); margin-bottom: 0; }
  .charge-plan-min-value {
    font-size: 60px;
    font-weight: var(--fw-black);
    color: var(--color-primary);
    margin-left: 6px;
    line-height: 1;
    display: inline-block;
  }
  .charge-plan-badge { position: absolute; top: -56px; right: 24px; max-width: 130px; width: 38%; }
  .charge-divider { margin: 35px auto; text-align: center; position: relative; max-width: 80%; }
  .charge-divider span {
    display: inline-block;
    padding: 0 18px;
    background-color: #fff;
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    position: relative;
    z-index: 2;
    font-size: 36px;
  }
  .charge-period { text-align: center; margin-top: 35px; }
  .charge-period-heading {
    font-size: clamp(28px, 5vw, 54px);
    font-weight: var(--fw-bold);
    letter-spacing: 0.05em;
    margin-bottom: 24px;
    color: var(--color-dark);
    text-align: center;
  }
  .charge-period-value { text-align: center; color: var(--color-primary); }
  .charge-period-lead { font-size: 30px; font-weight: var(--fw-bold); color: var(--color-dark); margin-right: 12px; display: inline-block; }
  .charge-period-number {
    font-size: 60px;
    font-weight: var(--fw-black);
    color: var(--color-primary);
    margin-right: 8px;
    line-height: 1;
    display: inline-block;
  }
  .charge-period-unit { font-size: 36px; font-weight: var(--fw-bold); color: var(--color-primary); display: inline-block; }
  .charge-footnote { text-align: center; font-size: 24px; color: var(--color-dark); margin-top: 16px; }

  /* 実績テキスト */
  #intro {
    position: relative;
  }
  #intro .bg-left .bg-right {
    padding: 90px 0;
  }
  .achievement-text {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    font-weight: bold;
    line-height: 1.4;
    white-space: nowrap;
  }
  .achievement-text .slash,
  .achievement-text .small-text,
  .achievement-text .large-text {
    font-size: 36px;
    color: #000;
    text-shadow:
      -2px -2px 0 #fff,
      2px -2px 0 #fff,
      -2px 2px 0 #fff,
      2px 2px 0 #fff;
  }
  .achievement-text .small-text {
    font-size: 30px;
  }
  .achievement-text .highlight {
    color: #e60012;
  }

  /* 5つの理由のh3内spanを上下中央揃え（PCのみ） */
  @media (min-width: 768px) {
    #reason .frame .h2 {
      display: block !important;
      position: relative;
      min-height: 100px;
      display: flex !important;
      align-items: center !important;
    }
    #reason .frame .h2 span {
      position: absolute !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      left: -60px;
    }
  }

  @media (max-width: 767px) {
    #top .points { margin-top: 30px; }
    #top .custom-margin-top { margin-top: 10px; }
    .funding-guide-box {
      margin: 30px 0 60px;
    }
    #charge .charge-wrapper { margin: 30px 0 60px; padding: 35px 20px 40px; }
    .charge-plan-primary, .charge-plan-option { max-width: 100%; }
    .charge-plan { padding: 24px 16px; margin-bottom: 24px; }
    .charge-plan-label { font-size: 22px; margin-bottom: 12px; }
    .charge-plan-option .charge-plan-label { font-size: 24px; }
    .charge-plan-label--secondary {
      background-image: none;
      text-decoration: underline;
      text-decoration-color: #fdd6aa;
      text-decoration-thickness: 8px;
      text-underline-offset: 2px;
    }
    .charge-plan-fee { font-size: 22px; }
    .charge-plan-option .charge-plan-fee { font-size: 24px; }
    .charge-plan-amount { font-size: 40px; margin-right: 4px; }
    .charge-plan-option .charge-plan-amount { font-size: 48px; }
    .charge-plan-rate { font-size: 40px; }
    .charge-plan-option .charge-plan-rate { font-size: 54px; }
    .charge-plan-per { font-size: 26px; margin-right: 4px; }
    .charge-plan-option .charge-plan-per { font-size: 30px; }
    .charge-plan-chip { padding: 6px 16px; margin-right: 6px; gap: 6px; }
    .charge-plan-chip__inline { gap: 6px; }
    .charge-plan-chip--stacked { padding: 8px 20px; gap: 4px; margin-right: 0; }
    .charge-plan-plus { font-size: 24px; }
    .charge-plan-min { font-size: 22px; }
    .charge-plan-min-value { font-size: 32px; margin-left: 4px; }
    .charge-plan-badge { position: static; margin: 20px auto 0; max-width: 140px; width: 45%; display: block; }
    .charge-divider span { font-size: 24px; }
    .charge-period-lead { font-size: 20px; margin-right: 8px; }
    .charge-period-number { font-size: 36px; margin-right: 6px; }
    .charge-period-unit { font-size: 24px; }
    .charge-footnote { font-size: 18px; margin-top: 12px; }
    .achievement-text {
      top: 75px;
      white-space: nowrap;
      max-width: 100%;
      padding: 0 10px;
    }
    .achievement-text .slash,
    .achievement-text .small-text,
    .achievement-text .large-text {
      font-size: 5.5vw;
    }
    .achievement-text .small-text {
      font-size: 4.5vw;
    }
  }
</style>