
/*▼FCエリア▼*/

.fc_area{
      background-image: linear-gradient(90deg, #9d7dc5, #50c2c2 50%, #1f4ebd);
}
.fc_area .fc_btn{
    border:solid 2px #0071bc;
    border-radius:40px;
    background-image: linear-gradient(90deg, #101723, #0f315f 50%, #101723);

    padding:clamp(15px, 2vw, 30px);

    box-shadow:
        0 0 6px  rgba(80,194,194,.25),
        0 0 12px rgba(80,194,194,.15),
        0 0 20px rgba(80,194,194,.1),
        inset 0 0 6px rgba(80,194,194,.18),
        inset 0 0 12px rgba(80,194,194,.1);

    position: relative;
    overflow: hidden;
    z-index: 1;

    transition:
        background-position .8s cubic-bezier(.22,.61,.36,1),
        box-shadow .65s cubic-bezier(.22,.61,.36,1),
        transform .25s ease;
}

.fc_area .fc_btn::before{
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: radial-gradient(120% 100% at 50% 50%,
        rgba(80,194,194,.28) 0%,
        rgba(80,194,194,.16) 35%,
        rgba(80,194,194,0) 65%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
    transition: opacity .55s ease, transform .8s cubic-bezier(.22,.61,.36,1);
    z-index: 0;
}

.fc_area .fc_btn:hover{
    transform: translateY(-2px);
    background-position: 100% 50%;
    box-shadow:
        0 0 10px rgba(80,194,194,.70),
        0 0 22px rgba(80,194,194,.50),
        0 0 40px rgba(80,194,194,.30),
        inset 0 0 10px rgba(80,194,194,.50),
        inset 0 0 22px rgba(80,194,194,.30);
}
.fc_area .fc_btn:hover::before{
    opacity: 1;
    transform: scale(1.03);
}


:root{
  --laser-purple: #FFF;
  --laser-cyan:   #50c2c2;
  --laser-blue:   #FFF;
  --laser-thickness: 3px;   
  --laser-speed: 1.8s;      
}

.fc_area{
  position: relative;
  isolation: isolate;   
  overflow: hidden;    
}

.fc_area::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 120vw;                      
  height: var(--laser-thickness);
  background: linear-gradient(90deg,
              var(--laser-purple),
              var(--laser-cyan) 50%,
              var(--laser-blue));
  box-shadow:
    0 0 10px var(--laser-cyan),
    0 0 28px var(--laser-cyan);
  pointer-events: none;
  z-index: 0;
}

.fc_area::after{
  content: "";
  position: absolute;
  top: 50%;
  left: -25vw;
  transform: translateY(-50%);
  width: 22vw;
  height: var(--laser-thickness);
  background: linear-gradient(90deg, transparent, #fff, transparent);
  filter: drop-shadow(0 0 8px var(--laser-cyan))
          drop-shadow(0 0 22px var(--laser-cyan));
  mix-blend-mode: screen;
  animation: fc-sweep var(--laser-speed) linear infinite;
  pointer-events: none;
  z-index: 0;
}
.fc_area a {
    color:#FFF!important;
}


.be-fc {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  color: #fff;
  background: linear-gradient(90deg, #9d7dc5 0%, #50c2c2 48%, #1f4ebd 100%);
  padding: clamp(72px, 7vw, 96px) 16px;
}

.be-fc,
.be-fc * {
  box-sizing: border-box;
}

.be-fc__inner {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(1100px, 100%);
  margin: 0 auto;
}

.be-fc__link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(870px, 100%);
  min-height: 112px;
  padding: 0.9em 2em;
  color: #fff !important;
  text-align: center;
  text-decoration: none;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1.5;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0),
    0 0 14px rgba(80, 194, 194, 0),
    0 0 24px rgba(0, 113, 188, 0);
  background: rgba(5, 18, 34, 0.92);
  border: 2px solid #0071bc;
  border-radius: 36px;
  box-shadow:
    0 0 0 1px rgba(80, 194, 194, .28),
    0 0 16px rgba(0, 113, 188, .65),
    inset 0 0 14px rgba(0, 113, 188, .12);
  overflow: hidden;
  transition:
    transform .35s ease,
    filter .35s ease,
    box-shadow .55s ease,
    text-shadow .55s ease,
    background .55s ease;
}
.be-fc__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(80, 194, 194, .28) 0%,
      rgba(0, 113, 188, .18) 34%,
      rgba(5, 18, 34, 0) 72%);
  opacity: 0;
  transition: opacity .65s ease;
}

.be-fc__link:hover {
  color: #fff !important;
  text-shadow:
    0 0 6px rgba(255, 255, 255, .72),
    0 0 14px rgba(80, 194, 194, .72),
    0 0 24px rgba(0, 113, 188, .45);
  filter: brightness(1.08);
  background: rgba(8, 28, 52, 0.98);
  box-shadow:
    0 0 0 1px rgba(80, 194, 194, .5),
    0 0 24px rgba(0, 113, 188, .9),
    0 0 42px rgba(80, 194, 194, .35),
    inset 0 0 18px rgba(80, 194, 194, .28),
    inset 0 0 34px rgba(0, 113, 188, .26);
  transform: translateY(-2px);
}

.be-fc__link:hover::before {
  opacity: 1;
}

@media screen and (max-width: 959px) {
  .be-fc {
    padding: 38px 16px;
  }

  .be-fc__link {
  width: min(870px, 100%);
  min-height: 76px;
  padding: 0.9em 1.2em;
  border-radius: 26px;
  font-size: clamp(1rem, 5vw, 1.35rem);
}
}

@keyframes fc-sweep{
  to { left: 110vw; }
}

@media (prefers-reduced-motion: reduce){
  .fc_area::after{ animation: none; }
}
