/* ===== pricing ===== */
body{
    font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
    color:#333333;
    -webkit-font-smoothing:antialiased;
  }
/* ===== Section ===== */
.pricing{
    position:relative;
    background:var(--sub);
    padding:100px 24px;
    overflow:hidden;
  }
/* blue banner behind header + top of cards */
.pricing-banner{
    position:absolute;
    top:0;left:0;right:0;
    height:440px;
    background:var(--blue);
    overflow:hidden;
    z-index:0;
  }
.pricing-banner .cloud{
    position:absolute;
    width:34vw;              /* Figma相当の大きな雲（1440時 約490px）。画面幅に追従 */
    max-width:520px;
    opacity:.14;
    filter:brightness(0) invert(1);
  }
.pricing-banner .cloud.c1{top:70px;left:-2%}
.pricing-banner .cloud.c2{top:6px;left:33%;width:31vw;max-width:470px}
.pricing-banner .cloud.c3{top:70px;right:-2%}
.pricing-inner{
    position:relative;
    z-index:1;
    max-width:1280px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:56px;
  }
/* ===== Cards ===== */
.pricing-cards{
    width:100%;
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:32px;
  }
.plan{
    position:relative;
    flex:0 1 396px;
    background:var(--white);
    border:2px solid #f7f9fb;
    border-radius:16px;
    padding:40px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:32px;
    box-shadow:0 10px 30px rgba(31,41,55,.06);
    overflow:visible;            /* リボンをカード角の外へ飛び出させる */
  }
.plan.featured{
    border-color:var(--sky);
    box-shadow:0 16px 40px rgba(0,133,255,.18);
  }
/* ===== カードのホバー拡大 =====
   transformはカード全体(.plan)に適用。内部要素（リボン含む）は一括で拡大される。
   実寸・レイアウトは不変（transformのみ）。ホバー中は前面へ（リボン・影の重なり対策） */
.plan{
    transition:transform .35s ease-out, box-shadow .35s ease-out;
    transform-origin:center center;
  }
.plan:hover{z-index:3}
/* PC（カード横並び時）：少し持ち上げつつ拡大＋影を強める */
@media (min-width:861px){
.plan:hover{
      transform:translateY(-6px) scale(1.025);
      box-shadow:0 16px 36px rgba(20,84,220,.18);
    }
.plan.featured:hover{box-shadow:0 20px 44px rgba(0,133,255,.26)}
}
/* SP（縦積み時）：控えめに拡大のみ・上移動なし */
@media (max-width:860px){
.plan{transition-duration:.25s}
.plan:hover{transform:scale(1.015)}
}
@media (prefers-reduced-motion:reduce){
.plan{transition:none}
.plan:hover{transform:none;box-shadow:0 10px 30px rgba(31,41,55,.06)}
.plan.featured:hover{box-shadow:0 16px 40px rgba(0,133,255,.18)}
}
.plan-top{
    display:flex;
    flex-direction:column;
    gap:32px;
    align-items:center;
  }
.plan-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-align:center;
  }
.plan-name{
    font-size:24px;
    font-weight:700;
    color:#333333;
    line-height:1.3;
  }
.plan-header .bar{
    width:20px;height:2px;border-radius:2px;background:var(--blue);
  }
.plan-price{
    display:flex;
    align-items:flex-end;
    gap:2px;
  }
.plan-price .amount{
    font-size:36px;
    font-weight:900;
    line-height:40px;
    color:#333333;
  }
.plan-price .amount.sm{font-size:30px}
.plan-price .unit{
    font-size:14px;
    font-weight:500;
    color:#9ca3af;
    line-height:20px;
  }
.plan-features{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:0 8px;
  }
.plan-features li{
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:14px;
    font-weight:400;
    line-height:1.45;
    color:#333333;
    list-style:none;
  }
.plan-features li i{
    color:var(--blue);
    font-size:14px;
    margin-top:2px;
    flex-shrink:0;
  }
.plan-features li.strong{font-weight:700}
.plan-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:50px;
    border-radius:10px;
    border:1px solid var(--blue-deep);
    font-size:18px;
    font-weight:700;
    white-space:nowrap;
    transition:filter .2s ease, transform .2s ease;
  }
.plan-btn:hover{transform:translateY(-2px)}
.plan-btn.ghost{
    background:rgba(29,78,219,.12);
    color:var(--blue);
  }
.plan-btn.ghost:hover{background:rgba(29,78,219,.2)}
.plan-btn.solid{
    background:rgba(29,78,219,.85);
    color:var(--white);
  }
.plan-btn.solid:hover{filter:brightness(1.08)}
/* ribbon 一番人気（Figma Group 47/48 のSVGをそのまま使用。
   帯=約39°の四辺形（左端は上辺の少し上で水平カット、右端は右辺の4px外で垂直カット）
   ＋両端に小さな折り返し三角(#D97706)。テキストのみHTMLで重ねる） */
.plan .ribbon{
    position:absolute;
    top:-30px;right:-23px;        /* Figma: グループはカード上辺の30px上・右端の23px外まで */
    width:135.477px;height:120.932px;
    background:url('../../images/ribbon_ninki.svg') no-repeat 0 0 / 100% 100%;
    z-index:2;
    pointer-events:none;
  }
.plan .ribbon span{
    position:absolute;
    left:69.69px;top:59.98px;     /* Figma: テキスト中心の座標（グループ基準） */
    transform:translate(-50%,-50%) rotate(40deg);
    color:var(--white);
    font-size:18px;
    font-weight:700;
    letter-spacing:0;
    line-height:1;
    white-space:nowrap;
  }
/* ===== Responsive ===== */
@media (max-width:1040px){
.pricing-cards{gap:20px}
.plan{padding:32px 24px}
.plan-price .amount{font-size:32px}
.plan-price .amount.sm{font-size:26px}
}
@media (max-width:860px){
.pricing-banner{height:360px}
.pricing-cards{
      flex-direction:column;
      align-items:center;
      gap:24px;
    }
.plan{
      flex:0 0 auto;
      width:100%;
      max-width:420px;
    }
}
@media (max-width:480px){
.pricing{padding:72px 20px}
.plan{padding:28px 22px}
/* SP: リボンはグループ右側の余白のみが画面外に出るため位置調整不要
   （帯の実描画はカード右端+4px までで 375px 幅にも収まる） */
/* SP: 雲を小さく3つ（左下・中央上・右下）に整列して崩れを解消 */
.pricing-banner{height:320px}
.pricing-banner .cloud{width:150px;opacity:.14}
.pricing-banner .cloud.c1{top:58px;left:0;right:auto}
.pricing-banner .cloud.c2{top:16px;left:31%;width:150px}
.pricing-banner .cloud.c3{top:66px;right:0;left:auto}
}