/********************************************************

setting

********************************************************/
:root {
  --margin-block: 200px; }

@media (min-width: 1101px) and (max-width: 1280px) {
  :root {
    --margin-block: 120px; } }
@media (min-width: 641px) and (max-width: 1100px) {
  :root {
    --margin-block: 90px; } }
@media (max-width: 640px) {
  :root {
    --margin-block: 70px; } }
/* -------------------------------------------------------

block_plan-btns

------------------------------------------------------- */
.section_plan-btns {
  width: min(90%, 1400px);
  margin: 0 auto;
  padding: 0 0 clamp(100px, 12.5vw, 200px) 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px; }
  @media screen and (max-width: 750px) {
    .section_plan-btns {
      justify-content: space-between;
      gap: 0; } }
  .section_plan-btns .plan-btn {
    width: min(32.5%, 450px); }
    @media screen and (max-width: 750px) {
      .section_plan-btns .plan-btn {
        width: 47%; } }
    @media screen and (max-width: 600px) {
      .section_plan-btns .plan-btn {
        width: 90%;
        margin: 0 auto 20px; } }
    .section_plan-btns .plan-btn a {
      transition: transform 0.3s ease, filter 0.3s ease; }
      .section_plan-btns .plan-btn a img {
        display: block;
        max-width: 100%;
        height: auto;
        pointer-events: none;
        transition: transform 0.3s ease, filter 0.3s ease;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25)); }
      .section_plan-btns .plan-btn a:hover img {
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); }