@charset "utf-8";
/* CSS Document */
  :root{
    --orange:#F08300;
    --pricing-diagram-blue:#1B4E9B;
    --grey-bg:#EDEFF2;
    --dark:#1A1A1A;
    --text:#222;
  }
  .pricing-diagram *{box-sizing:border-box;}
  .pricing-diagram{
    margin:0;
    padding:24px 12px;
    /* font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; */
    background:#fff;
    color:var(--text);
  }
  .l-pricing-diagram{
    max-width:760px;
    margin:0 auto;
  }
  .pricing-diagram-block{
    background:var(--grey-bg);
    border-radius:4px;
    padding:28px 20px;
    margin-bottom:0;
  }
  .label-tag{
    display:inline-block;
    background:var(--dark);
    color:#fff;
    font-weight:bold;
    font-size:15px;
    padding:8px 20px;
    border-radius:2px;
    margin: 0 auto 24px;
  }
  .label-row{
    text-align:center;
  }
  .operator{
    text-align:center;
    font-size:28px;
    font-weight:bold;
    color:#333;
    padding:10px 0;
  }
  .operator.vertical span, .equal-sign.vertical span{
    display:inline-block;
    transform:rotate(90deg);
  }
  .two-col{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .box-orange, .box-blue{
    flex:1 1 220px;
    border-radius:2px;
    color:#fff;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .box-orange{
    background:var(--orange);
    text-align:center;
    min-height:280px;
  }
  .box-orange .title{
    font-size:17px;
    font-weight:bold;
    margin-bottom:16px;
  }
  .box-orange .amount{
    font-size:22px;
    font-weight:bold;
  }
  .box-blue{
    background:var(--pricing-diagram-blue);
    min-height:280px;
  }
  .box-blue .title{
    font-size:17px;
    font-weight:bold;
    text-align:center;
    margin-bottom:16px;
  }
  .tier{
    margin-bottom:12px;
  }
  .tier-badge{
    background:#fff;
    color:var(--pricing-diagram-blue);
    font-weight:bold;
    font-size:13px;
    text-align:center;
    border-radius:2px;
    padding:6px 0;
    margin-bottom:6px;
  }
  .tier-calc{
    text-align:center;
    font-size:14px;
    font-weight:bold;
  }
  .total-block{
    text-align:center;
    padding:32px 20px;
  }
  .total-amount{
    font-size:32px;
    font-weight:bold;
    margin:8px 0;
  }
  .total-note{
    font-size:12px;
    color:#666;
  }
  .fuel-block, .kafuka-block{
    text-align:center;
    padding:32px 20px;
  }
  .fuel-calc{
    font-size:22px;
    font-weight:bold;
  }
  .equal-sign{
    text-align:center;
    font-size:28px;
    font-weight:bold;
    padding:10px 0;
  }
  .final-title{
    text-align:center;
    font-size:20px;
    font-weight:bold;
    padding:20px 0 4px;
  }
  .final-sub{
    text-align:center;
    font-size:12px;
    color:#666;
    padding-bottom:16px;
  }
  .final-block{
    background:var(--grey-bg);
    padding:32px 20px;
    text-align:center;
  }
  .pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--pricing-diagram-blue);
    color:#fff;
    font-weight:bold;
    font-size:16px;
    padding:12px 28px;
    border-radius:30px;
    margin-bottom:24px;
  }
  .pill .num{
    font-size:22px;
  }
  .donation-line{
    font-size:18px;
    color:#1B4E9B;
  }
  .donation-line .num{
    font-size:36px;
    font-weight:bold;
    margin:0 6px;
  }

  @media (max-width:600px){
    .two-col{flex-direction:column;}
    .box-orange, .box-blue{min-height:auto;}
    .total-amount{font-size:26px;}
    .fuel-calc{font-size:18px;}
    .final-title{font-size:17px;}
    .donation-line{font-size:15px;}
    .donation-line .num{font-size:28px;}
    .pill{font-size:14px; padding:10px 18px;}
  }