@charset "UTF-8";
/* FVの3つの強みバッジ　デザイン案（pattern1〜3.html で使用） */

/* ---------- 共通：丸いバッジ3つを横並び ---------- */
.bp .fv-laurel{width:660px;gap:22px;margin-top:30px}
.bp .fv-laurel li,.bp .fv-laurel li:first-child{flex:1 1 0;min-width:0;height:auto;aspect-ratio:1/1;border-radius:50%;padding:0;text-shadow:none}
.bp .fv-laurel li::before,.bp .fv-laurel li::after{content:none}
.bp .lt{font-size:21px;font-weight:600;letter-spacing:.08em}
.bp .lt-sm{font-size:16px;letter-spacing:.04em}
.bp .ln{font-size:42px;font-weight:700}
.bp .ln small{font-size:18px}
.bp .ln-txt{font-size:28px;line-height:1.25;letter-spacing:.06em}
.bp .lnote{font-size:11px;margin-top:4px;line-height:1.35;text-align:center}

/* ---------- パターン1：金の立体メダル ---------- */
.bp1 .fv-laurel li{color:#1c3566;background:radial-gradient(circle at 32% 26%,#fff6d6 0%,#f1d98f 26%,#d6b25e 58%,#b48a35 85%,#9c7428 100%);box-shadow:0 8px 18px rgba(0,0,0,.4),inset 0 0 0 3px rgba(255,255,255,.45),inset 0 -8px 16px rgba(110,78,20,.35)}
.bp1 .fv-laurel li::before{content:"";position:absolute;inset:9px;width:auto;border-radius:50%;border:1px solid rgba(120,88,28,.75);background:none;transform:none}
.bp1 .ln small,.bp1 .lnote{color:#2a3f66}

/* ---------- パターン2：紺×金の縁取り ---------- */
.bp2 .fv-laurel li{color:#fff;border:4px solid transparent;background:radial-gradient(circle at 35% 28%,#3a63a8 0%,#22437e 55%,#142c5a 100%) padding-box,linear-gradient(135deg,#fbecbb 0%,#d2ab57 35%,#a07a2c 60%,#f3dc9a 100%) border-box;box-shadow:0 8px 18px rgba(0,0,0,.45)}
.bp2 .fv-laurel li::before{content:"";position:absolute;inset:6px;width:auto;border-radius:50%;border:1px solid rgba(216,191,124,.85);background:none;transform:none}
.bp2 .ln{background:linear-gradient(180deg,#fff3c9 0%,#e5c677 50%,#c79b45 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.bp2 .lt{color:#f4e3b5}

/* ---------- パターン3：白×金の月桂冠メダル ---------- */
.bp3 .fv-laurel{gap:34px;width:680px}
.bp3 .fv-laurel li{color:#1c3566;border:4px solid transparent;background:radial-gradient(circle at 40% 30%,#ffffff 0%,#fbf6ea 55%,#efe3c6 100%) padding-box,linear-gradient(135deg,#f7e3a3 0%,#c99f48 45%,#9c7428 70%,#ecd28b 100%) border-box;box-shadow:0 8px 18px rgba(0,0,0,.4)}
.bp3 .fv-laurel li::before,.bp3 .fv-laurel li::after{content:"";position:absolute;top:10%;bottom:6%;width:22%;transform:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 120'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f7e3a3'/%3E%3Cstop offset='.5' stop-color='%23d1a84f'/%3E%3Cstop offset='1' stop-color='%23a07a2c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Cpath d='M30 118C10 100 6 60 18 8l2 1C9 60 13 98 32 116z'/%3E%3Cellipse cx='9' cy='100' rx='9' ry='4' transform='rotate(-40 9 100)'/%3E%3Cellipse cx='7' cy='84' rx='9' ry='4' transform='rotate(-55 7 84)'/%3E%3Cellipse cx='6' cy='68' rx='9' ry='4' transform='rotate(-65 6 68)'/%3E%3Cellipse cx='7' cy='52' rx='9' ry='4' transform='rotate(-75 7 52)'/%3E%3Cellipse cx='9' cy='36' rx='9' ry='4' transform='rotate(-85 9 36)'/%3E%3Cellipse cx='14' cy='21' rx='8' ry='3.6' transform='rotate(-95 14 21)'/%3E%3Cellipse cx='22' cy='104' rx='9' ry='4' transform='rotate(20 22 104)'/%3E%3Cellipse cx='20' cy='88' rx='9' ry='4' transform='rotate(10 20 88)'/%3E%3Cellipse cx='19' cy='72' rx='9' ry='4' transform='rotate(0 19 72)'/%3E%3Cellipse cx='20' cy='56' rx='9' ry='4' transform='rotate(-10 20 56)'/%3E%3Cellipse cx='22' cy='40' rx='8' ry='3.6' transform='rotate(-20 22 40)'/%3E%3Cellipse cx='25' cy='25' rx='7' ry='3.2' transform='rotate(-30 25 25)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.bp3 .fv-laurel li::before{left:-17%}
.bp3 .fv-laurel li::after{right:-17%;transform:scaleX(-1)}
.bp3 .ln{color:#8a6420}
.bp3 .ln small{color:#1c3566}
.bp3 .lnote{color:#4a5a78}

/* タブレット */
@media (max-width:1100px){
  .bp .fv-laurel{width:600px;gap:18px}
  .bp3 .fv-laurel{width:600px;gap:30px}
  .bp .ln{font-size:38px}
  .bp .ln-txt{font-size:25px}
}

/* スマホ */
@media (max-width:767px){
  .bp .fv-laurel{width:100%;gap:8px;margin-top:16px}
  .bp3 .fv-laurel{gap:18px;padding:0 8px}
  .bp .fv-laurel li,.bp .fv-laurel li:first-child{padding:0}
  .bp .lt{font-size:13px;letter-spacing:.04em}
  .bp .lt-sm{font-size:11px;letter-spacing:0}
  .bp .ln{font-size:23px}
  .bp .ln small{font-size:11px}
  .bp .ln-txt{font-size:16px;letter-spacing:.04em}
  .bp .lnote{font-size:10px;line-height:1.25;margin-top:2px;white-space:normal;transform:none}
  .bp1 .fv-laurel li::before{inset:5px}
  .bp2 .fv-laurel li{border-width:3px}
  .bp2 .fv-laurel li::before{inset:4px}
  .bp3 .fv-laurel li{border-width:3px}
  .bp3 .fv-laurel li::before{left:-14%;width:19%}
  .bp3 .fv-laurel li::after{right:-14%;width:19%}
  .bp3 .ln{font-size:21px}
  .bp3 .ln-txt{font-size:15px}
}

/* タブレット（768〜1100px）：右の修了証と重ならないよう幅を詰める */
@media (min-width:768px) and (max-width:1100px){
  .bp .fv-laurel,.bp3 .fv-laurel,.bs3 .fv-laurel{width:530px;gap:14px}
  .bp .ln,.bs3 .ln{font-size:33px}
  .bp .ln-txt,.bs3 .ln-txt{font-size:23px}
}