@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

.plan-page{
  font-family:"Noto Sans JP",system-ui,sans-serif;
  color:#3a4750;line-height:1.8;
  max-width:760px;margin:0 auto;padding:48px 20px 0;
  -webkit-font-smoothing:antialiased;
}
.plan-page *{box-sizing:border-box;}

/* プランカード */
.plan-card{
  max-width:300px;margin:0 auto;border-radius:16px;overflow:hidden;
  border:1px solid #eef0f2;box-shadow:0 14px 30px -18px rgba(80,80,120,.4);
}
.plan-card__head{
  background:linear-gradient(90deg,#5cc6ef,#cf7ad8 60%,#f48fc4);
  color:#fff;font-weight:900;font-size:22px;padding:14px 20px;
}
.plan-card__body{background:#fff;text-align:center;padding:30px 18px 28px;}
.plan-card__price{font-size:34px;font-weight:900;color:#3a4750;letter-spacing:-.01em;}
.plan-card__price small{font-size:15px;font-weight:700;margin-left:2px;}
.plan-card__note{color:#aab4ba;font-size:12px;margin-top:16px;}

/* クーポン */
.coupon{margin:26px 0 6px;font-size:15px;}
.coupon__after{
  display:inline-block;background:#ffb1c2;color:#3a4750;font-weight:900;
  padding:3px 10px;border-radius:4px;margin:4px 0;
}
.coupon__after b{color:#d6336c;}

/* 注意事項 */
.notice{background:#dcf3f7;border-radius:10px;padding:18px 22px 20px;margin:34px 0;}
.notice__head{
  display:inline-flex;align-items:center;gap:6px;background:#36b3c4;color:#fff;
  font-weight:700;font-size:14px;padding:6px 14px;border-radius:6px;margin-bottom:14px;
}
.notice ul{margin:0;padding-left:1.3em;}
.notice li{font-size:13.5px;color:#4a5860;margin:6px 0;}

/* 利用規約の行 */
.terms-line{text-align:center;margin:34px 0 8px;font-size:14px;}
.terms-line a{color:#1577c2;text-decoration:underline;text-underline-offset:3px;}

/* 申込みボタン */
.pay-wrap{text-align:center;padding:14px 0 10px;}
.pay-btn{
  min-height:74px;min-width:300px;max-width:100%;border-radius:40px;border:none;
  background-image:linear-gradient(90deg,#74d4f5,#b86ce5 50%,#f783ca);
  color:#fff;font-size:16px;font-weight:700;cursor:pointer;padding:0 28px;
  box-shadow:0 14px 28px -12px rgba(155,107,229,.6);transition:transform .15s ease;
}
.pay-btn:hover{transform:translateY(-2px);}

/* 紹介コードリンク */
.refcode-link{display:block;text-align:center;margin:34px 0;color:#1577c2;
  text-decoration:underline;text-underline-offset:3px;font-size:14px;}

/* フォーム */
.ref-form{max-width:440px;margin:24px auto 0;}
.ref-form .field{margin-bottom:18px;}
.ref-form label{display:block;font-weight:700;font-size:14px;margin-bottom:6px;color:#3a4750;}
.ref-form input[type=text]{
  width:100%;padding:13px 14px;border:1px solid #d7dde1;border-radius:10px;
  font-size:16px;font-family:inherit;
}
.ref-form input[type=text]:focus{outline:none;border-color:#b86ce5;box-shadow:0 0 0 3px rgba(184,108,229,.15);}
.ref-form .hint{color:#9aa4aa;font-size:12px;margin-top:4px;}

/* フッター */
.plan-footer{text-align:center;color:#9aa4aa;margin-top:54px;padding:32px 0 48px;}
.plan-footer .brand{font-weight:700;color:#8a98a0;font-size:15px;}
.plan-footer a{display:block;margin:16px 0;color:#8a98a0;text-decoration:none;font-size:14px;}
.plan-footer a:hover{color:#3a4750;text-decoration:underline;}

/* 期間カード（3か月／6か月／指名料 など） */
.dcard-wrap{text-align:center;padding-top:16px;}
.dcard-ribbon{display:inline-block;font-weight:700;font-size:12px;padding:5px 16px;border-radius:999px;
  color:#fff;position:relative;z-index:2;margin-bottom:-10px;box-shadow:0 8px 16px -6px rgba(0,0,0,.25);}
.dcard-ribbon--gold{background:linear-gradient(120deg,#E7CB70,#C2993B);}
.dcard{max-width:240px;margin:0 auto;border-radius:14px;overflow:hidden;
  box-shadow:0 18px 40px -20px rgba(100,80,50,.45);border:1px solid rgba(0,0,0,.05);}
.dcard__term{font-size:24px;font-weight:900;color:#fff;padding:16px 0 12px;}
.dcard__term small{font-size:15px;margin-left:1px;}
.dcard--gold .dcard__term{background:linear-gradient(120deg,#E7CB70,#C2993B);}
.dcard--teal .dcard__term{background:#2cb9cd;}
.dcard__body{padding:22px 18px 26px;background:#fff;}
.dcard--gold .dcard__body{background:linear-gradient(170deg,#FBF3DA,#F3E3B0);}
.dcard__badge{display:inline-block;color:#fff;font-weight:700;font-size:13px;padding:5px 12px;border-radius:6px;margin-bottom:14px;}
.dcard--gold .dcard__badge{background:linear-gradient(120deg,#E7CB70,#C2993B);}
.dcard--teal .dcard__badge{background:#3aa6bb;}
.dcard__price{font-size:42px;font-weight:900;color:#3a4750;line-height:1;}
.dcard--gold .dcard__price{color:#5b4410;}
.dcard__unit{font-size:13px;color:#8a98a0;font-weight:700;margin-top:6px;}
.dcard__total{font-size:16px;font-weight:700;color:#3a4750;margin-top:12px;}
.dcard--gold .dcard__total{color:#5b4410;}

/* ハイブリッド情報カード */
.plan-title{text-align:center;font-size:26px;font-weight:900;color:#3a4750;margin-bottom:24px;}
.info-card{border:1px solid #e6e9ec;border-radius:6px;max-width:760px;margin:0 auto;background:#fff;}
.info-card__top{display:flex;gap:18px;align-items:center;padding:20px 24px;border-bottom:1px solid #e6e9ec;}
.info-card__tag{background:#36b3c4;color:#fff;font-weight:700;font-size:14px;padding:8px 14px;border-radius:6px;white-space:nowrap;flex:none;}
.info-card__meta{font-size:16px;font-weight:700;color:#3a4750;line-height:1.7;}
.info-card__body{padding:20px 24px 24px;}
.info-card__prices{font-size:15px;color:#3a4750;margin-bottom:16px;}
.info-card__prices div{display:flex;padding:2px 0;}
.info-card__prices .lbl{width:6.5em;font-weight:700;}
.info-card__prices .v{font-weight:700;}
.info-card__desc{font-size:14px;color:#3a4750;line-height:1.9;}
.coupon-line{text-align:center;color:#e8638a;font-weight:700;margin:26px 0;font-size:15px;}

/* ゴールドカードの追加要素（その他費用・登録料/月会費） */
.dcard__lead{font-size:13px;color:#5b4410;font-weight:700;margin-bottom:2px;}
.dcard__sub{display:block;background:linear-gradient(120deg,#E7CB70,#C2993B);color:#fff;
  font-weight:700;font-size:13px;padding:6px 0;margin:18px -18px 12px;}
.dcard__fees{font-size:12.5px;color:#5b4410;line-height:1.8;text-align:left;padding:0 6px;}
.dcard__stack .dcard__badge{margin-top:10px;}
.dcard__stack .dcard__money{font-size:28px;font-weight:900;color:#5b4410;line-height:1;}

/* 取り消し線＋強調（法人割など） */
.hl{background:#ffc2cf;color:#d6336c;font-weight:700;padding:1px 5px;border-radius:3px;}

@media(max-width:520px){
  .pay-btn{min-width:0;width:100%;}
  .info-card__top{flex-direction:column;align-items:flex-start;}
}