.zipfit-sns-section,
.zipfit-sns-section *{box-sizing:border-box}

.zipfit-sns-section{
  width:100%;
  max-width:1050px;
  margin:48px auto 24px;
}

.zipfit-sns-section-title{
  margin:0 0 24px!important;
  padding:0 0 12px!important;
  border:0!important;
  border-bottom:2px solid #1484c4!important;
  background:transparent!important;
  color:#1f3b63!important;
  text-align:center;
  font-size:clamp(24px,3vw,30px)!important;
  font-weight:800!important;
}
.zipfit-sns-section-title::before,
.zipfit-sns-section-title::after{display:none!important;content:none!important}

.zipfit-sns-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.zipfit-sns-layout-stacked .zipfit-sns-grid{grid-template-columns:1fr}

.zipfit-sns-banner{
  position:relative;
  display:flex;
  min-height:200px;
  padding:30px;
  overflow:hidden;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  border:0;
  border-radius:18px;
  background-position:center;
  background-size:cover;
  box-shadow:0 12px 30px rgba(25,46,73,.16);
  color:#fff!important;
  text-decoration:none!important;
  transition:transform .2s ease,box-shadow .2s ease;
}
.zipfit-sns-banner:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(25,46,73,.23);color:#fff!important}
.zipfit-sns-line{background-image:linear-gradient(135deg,#06c755,#009641)}
.zipfit-sns-instagram{background-image:linear-gradient(135deg,#833ab4,#c13584 48%,#fd1d1d 78%,#fcb045)}
.zipfit-sns-kicker{margin-bottom:7px;color:rgba(255,255,255,.85)!important;font-size:11px;font-weight:800;letter-spacing:.16em}
.zipfit-sns-title{margin-bottom:8px;color:#fff!important;font-size:clamp(22px,3vw,30px);font-weight:900;line-height:1.35}
.zipfit-sns-text{max-width:92%;margin-bottom:16px;color:#fff!important;font-size:14px;font-weight:600;line-height:1.7}
.zipfit-sns-button{display:inline-flex;min-height:40px;padding:9px 16px;align-items:center;justify-content:center;border-radius:999px;background:#fff;color:#17314d!important;font-size:13px;font-weight:800}

/* Floating */
.zipfit-context-floating{
  position:fixed;
  width:var(--zipfit-pc-width);
  max-width:calc(100vw - 20px);
  margin:0;
  z-index:var(--zipfit-z);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.zipfit-context-floating.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.zipfit-context-floating .zipfit-sns-banner{min-height:135px;padding:22px;border-radius:14px}
.zipfit-context-floating .zipfit-sns-title{font-size:23px}
.zipfit-context-floating .zipfit-sns-text{font-size:13px;margin-bottom:12px}
.zipfit-context-floating .zipfit-sns-button{min-height:36px;padding:8px 14px;font-size:12px}

.zipfit-sns-close{
  position:absolute;
  top:-12px;
  right:-12px;
  z-index:3;
  display:flex;
  width:34px;
  height:34px;
  padding:0;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
  border-radius:50%;
  background:#1f3b63;
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 5px 15px rgba(0,0,0,.22);
}

/* PC visibility */
.zipfit-context-inline-pc{display:block}
.zipfit-context-inline-mobile{display:none}
.zipfit-context-floating.zipfit-pc-mode-floating{display:block}
.zipfit-context-floating.zipfit-pc-mode-inline,
.zipfit-context-floating.zipfit-pc-mode-hidden{display:none}

/* PC positions */
.zipfit-pc-right-bottom{right:var(--zipfit-offset-x);bottom:var(--zipfit-offset-y)}
.zipfit-pc-left-bottom{left:var(--zipfit-offset-x);bottom:var(--zipfit-offset-y)}
.zipfit-pc-center-bottom{left:50%;bottom:var(--zipfit-offset-y);transform:translateX(-50%)}
.zipfit-pc-right-center{right:var(--zipfit-offset-x);top:50%;transform:translateY(-50%)}
.zipfit-pc-left-center{left:var(--zipfit-offset-x);top:50%;transform:translateY(-50%)}
.zipfit-pc-center{left:50%;top:50%;transform:translate(-50%,-50%)}
.zipfit-pc-center-top{left:50%;top:var(--zipfit-offset-y);transform:translateX(-50%)}

/* Animation */
.zipfit-animation-fade{transition:opacity .35s ease}
.zipfit-animation-slide-up{transition:opacity .35s ease,transform .35s ease}
.zipfit-animation-slide-left{transition:opacity .35s ease,transform .35s ease}
.zipfit-animation-slide-right{transition:opacity .35s ease,transform .35s ease}
.zipfit-animation-zoom{transition:opacity .35s ease,transform .35s ease}

.zipfit-context-floating.zipfit-animation-slide-up:not(.is-visible){transform:translateY(24px)}
.zipfit-context-floating.zipfit-animation-slide-left:not(.is-visible){transform:translateX(-24px)}
.zipfit-context-floating.zipfit-animation-slide-right:not(.is-visible){transform:translateX(24px)}
.zipfit-context-floating.zipfit-animation-zoom:not(.is-visible){transform:scale(.92)}

.zipfit-pc-center-bottom.zipfit-animation-slide-up:not(.is-visible){transform:translate(-50%,24px)}
.zipfit-pc-center-bottom.is-visible{transform:translateX(-50%)}
.zipfit-pc-right-center.is-visible,.zipfit-pc-left-center.is-visible{transform:translateY(-50%)}
.zipfit-pc-center.is-visible{transform:translate(-50%,-50%)}
.zipfit-pc-center-top.is-visible{transform:translateX(-50%)}

@media(max-width:767px){
  .zipfit-sns-grid{grid-template-columns:1fr}

  .zipfit-context-inline-pc{display:none}
  .zipfit-context-inline-mobile{display:block}

  .zipfit-context-floating.zipfit-pc-mode-floating{display:none}
  .zipfit-context-floating.zipfit-mobile-mode-floating{display:block}
  .zipfit-context-floating.zipfit-mobile-mode-inline,
  .zipfit-context-floating.zipfit-mobile-mode-hidden{display:none}

  .zipfit-context-floating{
    width:var(--zipfit-mobile-width);
    max-width:calc(100vw - 20px);
  }

  .zipfit-context-floating[style*="--zipfit-mobile-width:0px"]{width:auto}

  .zipfit-context-floating .zipfit-sns-banner{min-height:116px;padding:18px}
  .zipfit-context-floating .zipfit-sns-title{font-size:20px}
  .zipfit-context-floating .zipfit-sns-text{font-size:12px}

  .zipfit-mobile-bottom-center{
    left:10px!important;
    right:10px!important;
    bottom:var(--zipfit-offset-y)!important;
    top:auto!important;
    width:auto!important;
    transform:none!important;
  }
  .zipfit-mobile-right-bottom{
    right:var(--zipfit-offset-x)!important;
    left:auto!important;
    bottom:var(--zipfit-offset-y)!important;
    top:auto!important;
    transform:none!important;
  }
  .zipfit-mobile-left-bottom{
    left:var(--zipfit-offset-x)!important;
    right:auto!important;
    bottom:var(--zipfit-offset-y)!important;
    top:auto!important;
    transform:none!important;
  }
  .zipfit-mobile-top-center{
    left:10px!important;
    right:10px!important;
    top:var(--zipfit-offset-y)!important;
    bottom:auto!important;
    width:auto!important;
    transform:none!important;
  }
  .zipfit-mobile-center{
    left:50%!important;
    right:auto!important;
    top:50%!important;
    bottom:auto!important;
    transform:translate(-50%,-50%)!important;
  }
}


/* Ver.3.0.2 display reliability */
.zipfit-context-floating.is-visible{
  display:block;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.zipfit-context-inline-pc,
.zipfit-context-inline-mobile{
  opacity:1!important;
  visibility:visible!important;
}


/* Ver.3.1.0 SNSごとのPC・スマホ表示切替 */
@media (min-width:768px){
  .zipfit-sns-banner.zipfit-hide-pc{
    display:none!important;
  }

  .zipfit-sns-grid:has(.zipfit-sns-banner.zipfit-show-pc:only-child),
  .zipfit-sns-grid:has(.zipfit-sns-banner.zipfit-hide-mobile + .zipfit-sns-banner.zipfit-hide-pc){
    grid-template-columns:1fr;
  }
}

@media (max-width:767px){
  .zipfit-sns-banner.zipfit-hide-mobile{
    display:none!important;
  }
}

/* 片方のSNSだけが表示される場合も横幅いっぱいにする */
.zipfit-sns-layout-two-column .zipfit-sns-banner:only-child{
  grid-column:1 / -1;
}