リソース

<!-- CSS は下の <style> か外部 CSS に配置してください -->
<style>
.fours-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.25px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background-color 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.fours-signin__mark {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Light（明るい背景向け） */
.fours-signin--light {
  background: #ffffff;
  border-color: #747775;
  color: #1f1f1f;
}
.fours-signin--light:hover {
  background: #f7f8f8;
}

/* Dark（暗い背景向け） */
.fours-signin--dark {
  background: #131314;
  border-color: #444746;
  color: #e3e3e3;
}
.fours-signin--dark:hover {
  background: #1f2020;
  border-color: #5c5f61;
}

/* バリエーション: 角丸 / アイコンのみ */
.fours-signin--pill {
  border-radius: 20px;
}
.fours-signin--icon {
  width: 40px;
  padding: 0;
  gap: 0;
}
.fours-signin--icon span {
  display: none;
}
</style>

<!-- href はあなたのアプリのログイン開始 URL（/oauth/authorize へリダイレクトする経路）に置き換える -->
<a class="fours-signin fours-signin--light" href="/api/auth/login">
  <svg class="fours-signin__mark" viewBox="0 0 60 85" aria-hidden="true">
    <path fill="#1AD861" d="M57.1092 7.29955C55.7578 4.95867 53.8554 3.1337 51.6612 1.89394C49.4663 0.654176 46.9787 -0.000364697 44.4565 1.52446e-07C41.981 1.52446e-07 39.4712 0.630826 37.1734 1.95778L11.8959 16.5518C4.91557 20.5815 2.52398 29.5072 6.55411 36.4875C7.30498 37.7882 8.22622 38.9298 9.27298 39.9C9.58748 44.5927 12.1604 49.0475 16.5393 51.5759L16.7955 51.7237L7.2995 57.2063C0.319194 61.236 -2.0724 70.1617 1.95774 77.1417C4.66091 81.8242 9.56595 84.4412 14.61 84.4412C17.0855 84.4412 19.5953 83.8104 21.8935 82.4838L47.171 67.8898C54.151 63.8597 56.5426 54.934 52.5128 47.954C51.7568 46.6442 50.8286 45.4964 49.7735 44.5226C49.4535 39.8365 46.8813 35.3904 42.5082 32.8657L42.262 32.7234L51.7674 27.2353C58.7473 23.2052 61.1389 14.2799 57.1092 7.29955ZM15.2419 36.1628C15.2419 36.0169 15.2591 35.875 15.2919 35.7392C15.4678 35.2726 15.683 34.8169 15.9373 34.3765L15.9464 34.3605C16.7622 32.9543 17.9345 31.7927 19.3377 30.9998C20.7117 30.2238 22.2722 29.8133 23.8502 29.8133H23.8509C24.6313 29.8133 25.4081 29.914 26.1601 30.1129C26.9372 30.3183 27.6899 30.6295 28.3969 31.0378L31.3161 32.7234L23.7535 37.0895C23.0464 37.4978 22.2937 37.809 21.5162 38.0144C20.7639 38.2133 19.9868 38.3143 19.2064 38.3143C18.3012 38.3143 17.4018 38.1793 16.5401 37.9174V37.901C15.7885 37.6744 15.2419 36.9819 15.2419 36.1628ZM47.85 52.8014C48.0277 52.4939 48.193 52.1823 48.3458 51.8674C49.077 53.6866 49.2007 55.6841 48.6844 57.6116C48.054 59.9649 46.5446 61.9318 44.4347 63.15L19.1571 77.744C18.45 78.1523 17.6974 78.4635 16.9199 78.6689C16.1675 78.8678 15.3908 78.9685 14.61 78.9685C13.032 78.9685 11.4716 78.5584 10.0975 77.7823C8.68922 76.9866 7.5133 75.8191 6.69713 74.4053C5.4789 72.2954 5.15528 69.8374 5.78611 67.4841C6.41657 65.1308 7.92595 63.1639 10.0359 61.9457L19.7507 56.3368V56.3481C20.5067 55.9508 21.3678 55.7261 22.281 55.7261C23.1942 55.7261 24.0129 55.9402 24.7561 56.3197C24.7568 56.32 24.7579 56.3208 24.7587 56.3211L27.9142 58.1432C30.2128 59.4702 32.7215 60.1006 35.1977 60.1006C40.2411 60.1006 45.1472 57.4832 47.85 52.8014ZM43.8089 48.2591C43.8089 48.4145 43.79 48.5652 43.7535 48.7089L43.7531 48.7096C43.578 49.1737 43.3635 49.6269 43.1106 50.0651L43.1015 50.0811C42.2857 51.4872 41.1134 52.6489 39.7102 53.4414C38.3358 54.2178 36.7754 54.6279 35.1977 54.6279C34.417 54.6279 33.6398 54.5272 32.8879 54.3287C32.1108 54.1229 31.3581 53.8117 30.6506 53.4034L27.7409 51.7237L35.3134 47.3517C36.0201 46.9434 36.7728 46.6322 37.5507 46.4268C38.3026 46.2279 39.0798 46.1272 39.8605 46.1272H39.8613C40.8496 46.1272 41.8307 46.2881 42.7636 46.5994H42.764C43.3821 46.8934 43.8089 47.5261 43.8089 48.2591ZM43.1653 41.0328C42.0854 40.7826 40.9762 40.6545 39.8602 40.6545C37.3847 40.6545 34.8749 41.2853 32.577 42.6119L24.6083 47.2127C24.6083 47.2127 24.6076 47.2134 24.6069 47.2134C23.8994 47.5458 23.1095 47.7311 22.2759 47.7311C21.4422 47.7311 20.5862 47.5301 19.8569 47.1718C19.8558 47.1714 19.8551 47.1711 19.8544 47.1703L19.2757 46.8361C17.8334 46.0032 16.6718 44.8207 15.8797 43.4036C16.9666 43.6572 18.083 43.7871 19.2064 43.7871C21.6819 43.7871 24.1917 43.1559 26.4899 41.8293L34.3349 37.3001C34.3349 37.3001 34.336 37.2993 34.3363 37.2993C35.0722 36.9327 35.9026 36.7265 36.7812 36.7265C37.7174 36.7265 38.5985 36.9604 39.3691 37.3723C39.3731 37.3745 39.3767 37.3767 39.3804 37.3785L39.7719 37.6051C41.2127 38.4369 42.3732 39.618 43.1653 41.0328ZM49.031 22.4955L39.0969 28.231C38.4019 28.5524 37.628 28.7316 36.8126 28.7316C35.8508 28.7316 34.9471 28.482 34.1623 28.0442V28.0471L31.1333 26.2984C28.8351 24.9711 26.3261 24.3406 23.8502 24.3406C18.8065 24.341 13.9007 26.9584 11.1976 31.6401C11.0239 31.9411 10.8623 32.2454 10.7123 32.553C9.98845 30.7397 9.86768 28.7498 10.3821 26.8296C11.0129 24.4763 12.5223 22.5094 14.6323 21.2912L39.9098 6.69718C40.6165 6.28892 41.3692 5.97806 42.147 5.77229C42.899 5.57381 43.6761 5.47275 44.4569 5.47275H44.4573C46.0352 5.47275 47.5953 5.8832 48.9694 6.65924C50.3762 7.45388 51.5507 8.61994 52.3669 10.0312L52.3694 10.0359C53.5876 12.1459 53.9113 14.6038 53.2808 16.9571C52.65 19.3104 51.141 21.2777 49.031 22.4955Z" />
  </svg>
  <span>4S でログイン</span>
</a>

<!-- ダーク背景向け -->
<a class="fours-signin fours-signin--dark" href="/api/auth/login">
  <svg class="fours-signin__mark" viewBox="0 0 60 85" aria-hidden="true">
    <path fill="#1AD861" d="M57.1092 7.29955C55.7578 4.95867 53.8554 3.1337 51.6612 1.89394C49.4663 0.654176 46.9787 -0.000364697 44.4565 1.52446e-07C41.981 1.52446e-07 39.4712 0.630826 37.1734 1.95778L11.8959 16.5518C4.91557 20.5815 2.52398 29.5072 6.55411 36.4875C7.30498 37.7882 8.22622 38.9298 9.27298 39.9C9.58748 44.5927 12.1604 49.0475 16.5393 51.5759L16.7955 51.7237L7.2995 57.2063C0.319194 61.236 -2.0724 70.1617 1.95774 77.1417C4.66091 81.8242 9.56595 84.4412 14.61 84.4412C17.0855 84.4412 19.5953 83.8104 21.8935 82.4838L47.171 67.8898C54.151 63.8597 56.5426 54.934 52.5128 47.954C51.7568 46.6442 50.8286 45.4964 49.7735 44.5226C49.4535 39.8365 46.8813 35.3904 42.5082 32.8657L42.262 32.7234L51.7674 27.2353C58.7473 23.2052 61.1389 14.2799 57.1092 7.29955ZM15.2419 36.1628C15.2419 36.0169 15.2591 35.875 15.2919 35.7392C15.4678 35.2726 15.683 34.8169 15.9373 34.3765L15.9464 34.3605C16.7622 32.9543 17.9345 31.7927 19.3377 30.9998C20.7117 30.2238 22.2722 29.8133 23.8502 29.8133H23.8509C24.6313 29.8133 25.4081 29.914 26.1601 30.1129C26.9372 30.3183 27.6899 30.6295 28.3969 31.0378L31.3161 32.7234L23.7535 37.0895C23.0464 37.4978 22.2937 37.809 21.5162 38.0144C20.7639 38.2133 19.9868 38.3143 19.2064 38.3143C18.3012 38.3143 17.4018 38.1793 16.5401 37.9174V37.901C15.7885 37.6744 15.2419 36.9819 15.2419 36.1628ZM47.85 52.8014C48.0277 52.4939 48.193 52.1823 48.3458 51.8674C49.077 53.6866 49.2007 55.6841 48.6844 57.6116C48.054 59.9649 46.5446 61.9318 44.4347 63.15L19.1571 77.744C18.45 78.1523 17.6974 78.4635 16.9199 78.6689C16.1675 78.8678 15.3908 78.9685 14.61 78.9685C13.032 78.9685 11.4716 78.5584 10.0975 77.7823C8.68922 76.9866 7.5133 75.8191 6.69713 74.4053C5.4789 72.2954 5.15528 69.8374 5.78611 67.4841C6.41657 65.1308 7.92595 63.1639 10.0359 61.9457L19.7507 56.3368V56.3481C20.5067 55.9508 21.3678 55.7261 22.281 55.7261C23.1942 55.7261 24.0129 55.9402 24.7561 56.3197C24.7568 56.32 24.7579 56.3208 24.7587 56.3211L27.9142 58.1432C30.2128 59.4702 32.7215 60.1006 35.1977 60.1006C40.2411 60.1006 45.1472 57.4832 47.85 52.8014ZM43.8089 48.2591C43.8089 48.4145 43.79 48.5652 43.7535 48.7089L43.7531 48.7096C43.578 49.1737 43.3635 49.6269 43.1106 50.0651L43.1015 50.0811C42.2857 51.4872 41.1134 52.6489 39.7102 53.4414C38.3358 54.2178 36.7754 54.6279 35.1977 54.6279C34.417 54.6279 33.6398 54.5272 32.8879 54.3287C32.1108 54.1229 31.3581 53.8117 30.6506 53.4034L27.7409 51.7237L35.3134 47.3517C36.0201 46.9434 36.7728 46.6322 37.5507 46.4268C38.3026 46.2279 39.0798 46.1272 39.8605 46.1272H39.8613C40.8496 46.1272 41.8307 46.2881 42.7636 46.5994H42.764C43.3821 46.8934 43.8089 47.5261 43.8089 48.2591ZM43.1653 41.0328C42.0854 40.7826 40.9762 40.6545 39.8602 40.6545C37.3847 40.6545 34.8749 41.2853 32.577 42.6119L24.6083 47.2127C24.6083 47.2127 24.6076 47.2134 24.6069 47.2134C23.8994 47.5458 23.1095 47.7311 22.2759 47.7311C21.4422 47.7311 20.5862 47.5301 19.8569 47.1718C19.8558 47.1714 19.8551 47.1711 19.8544 47.1703L19.2757 46.8361C17.8334 46.0032 16.6718 44.8207 15.8797 43.4036C16.9666 43.6572 18.083 43.7871 19.2064 43.7871C21.6819 43.7871 24.1917 43.1559 26.4899 41.8293L34.3349 37.3001C34.3349 37.3001 34.336 37.2993 34.3363 37.2993C35.0722 36.9327 35.9026 36.7265 36.7812 36.7265C37.7174 36.7265 38.5985 36.9604 39.3691 37.3723C39.3731 37.3745 39.3767 37.3767 39.3804 37.3785L39.7719 37.6051C41.2127 38.4369 42.3732 39.618 43.1653 41.0328ZM49.031 22.4955L39.0969 28.231C38.4019 28.5524 37.628 28.7316 36.8126 28.7316C35.8508 28.7316 34.9471 28.482 34.1623 28.0442V28.0471L31.1333 26.2984C28.8351 24.9711 26.3261 24.3406 23.8502 24.3406C18.8065 24.341 13.9007 26.9584 11.1976 31.6401C11.0239 31.9411 10.8623 32.2454 10.7123 32.553C9.98845 30.7397 9.86768 28.7498 10.3821 26.8296C11.0129 24.4763 12.5223 22.5094 14.6323 21.2912L39.9098 6.69718C40.6165 6.28892 41.3692 5.97806 42.147 5.77229C42.899 5.57381 43.6761 5.47275 44.4569 5.47275H44.4573C46.0352 5.47275 47.5953 5.8832 48.9694 6.65924C50.3762 7.45388 51.5507 8.61994 52.3669 10.0312L52.3694 10.0359C53.5876 12.1459 53.9113 14.6038 53.2808 16.9571C52.65 19.3104 51.141 21.2777 49.031 22.4955Z" />
  </svg>
  <span>4S でログイン</span>
</a>