:root{
  --blue:#3369e7;
  --pink:#fb00c0;
  --lavender:#8f7cff;
  --text:#31507e;
  --white:#fff;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--text);
  font-family:
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  background:#fff;
}

a{
  color:inherit;
  text-decoration:none;
}


/* =========================================================
   HEADER
========================================================= */

.site-header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:50;
  padding:22px 28px;
}

.header-inner{
  width:min(1180px,100%);
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.site-brand{
  display:flex;
  align-items:center;
  gap:9px;
  color:#fff;
  font-size:21px;
  font-weight:800;
  letter-spacing:.06em;
  text-shadow:0 2px 12px rgba(70,90,170,.25);
}

.brand-star{
  color:#ffe27a;
  font-size:23px;
  text-shadow:
    0 0 6px #fff,
    0 0 15px rgba(255,220,90,.9);
}

.global-nav{
  display:flex;
  align-items:center;
  gap:27px;
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
}

.global-nav a{
  transition:opacity .25s ease,transform .25s ease;
}

.global-nav a:hover{
  opacity:.72;
  transform:translateY(-2px);
}

.global-nav .ripue-link{
  padding:11px 18px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
}

.menu-button{
  display:none;
}


/* =========================================================
   HERO
========================================================= */

.hero{
  position:relative;
  min-height:760px;
  height:100svh;
  overflow:hidden;
  display:flex;
  align-items:center;
  isolation:isolate;
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:-5;
  background-image:url("/assets/images/hero-user-dog-v41.jpg");
  background-size:cover;
  background-position:center center;
  transform:scale(1.015);
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:-4;
  background:
    linear-gradient(
      90deg,
      rgba(105,143,229,.28) 0%,
      rgba(159,151,233,.15) 42%,
      rgba(255,188,226,.08) 100%
    );
}

.hero-glow{
  position:absolute;
  width:700px;
  height:700px;
  left:-250px;
  top:50%;
  transform:translateY(-50%);
  z-index:-3;
  border-radius:50%;
  background:rgba(181,214,255,.24);
  filter:blur(65px);
}

.hero-content{
  width:min(1180px,calc(100% - 56px));
  margin:auto;
  position:relative;
  z-index:10;
  padding-top:50px;
}

.hero-kicker{
  display:flex;
  align-items:center;
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:.24em;
  margin-bottom:19px;
  text-shadow:0 2px 15px rgba(73,90,160,.2);
}

.hero h1{
  margin:0;
  color:#fff;
  font-size:clamp(48px,6vw,82px);
  line-height:1.22;
  letter-spacing:.06em;
  font-weight:800;
  text-shadow:0 3px 24px rgba(81,102,173,.18);
}

.hero-message{
  margin:28px 0 0;
  color:#fff;
  font-size:17px;
  line-height:2;
  letter-spacing:.08em;
  font-weight:600;
  text-shadow:0 2px 13px rgba(69,89,155,.22);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  margin-top:36px;
}

.button-primary,
.button-ripue{
  min-width:205px;
  padding:15px 22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  transition:transform .25s ease,box-shadow .25s ease;
}

.button-primary{
  color:var(--blue);
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 30px rgba(72,103,178,.16);
}

.button-ripue{
  color:#fff;
  border:1px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(12px);
}

.button-primary:hover,
.button-ripue:hover{
  transform:translateY(-3px);
}


/* =========================================================
   CRESCENT MOON
========================================================= */

.hero-moon{
  display:inline-block;
  position:relative;
  flex:0 0 auto;
  width:34px;
  height:34px;
  margin-right:9px;
  pointer-events:none;
  filter:drop-shadow(0 0 7px rgba(255,244,180,.82));
  animation:moon-breathe 6.5s ease-in-out infinite;
}

.moon-crescent{
  position:absolute;
  inset:2px;
  border-radius:50%;
  background:
    radial-gradient(
      circle at 35% 32%,
      #fffef2 0 18%,
      #fff5bd 45%,
      #f7dc78 75%,
      #fff2aa 100%
    );
  box-shadow:
    0 0 9px rgba(255,244,170,.9),
    0 0 20px rgba(255,238,155,.58);
}

.moon-crescent::after{
  content:"";
  position:absolute;
  width:28px;
  height:28px;
  top:-4px;
  left:9px;
  border-radius:50%;
  background:rgba(245,242,255,.98);
}

@keyframes moon-breathe{
  0%,100%{
    opacity:.48;
    transform:scale(.92);
  }
  50%{
    opacity:1;
    transform:scale(1.08);
  }
}


/* =========================================================
   ROTATING STAR SHAPE
========================================================= */

.hero-star-path{
  position:absolute;
  left:76%;
  top:57%;
  width:132px;
  height:132px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:6;
}

.star-shape{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  animation:star-orbit-spin 12s linear infinite;
  transform-origin:50% 50%;
}

.star-shape polygon{
  fill:none;
  stroke:rgba(255,255,255,.82);
  stroke-width:1.7;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.75));
}

.path-star{
  position:absolute;
  width:18px;
  height:18px;
  margin:-9px 0 0 -9px;
  display:block;
  font-family:Arial,sans-serif;
  font-size:18px;
  line-height:18px;
  text-align:center;
  font-weight:700;
  z-index:7;
  animation:path-star-twinkle 1.8s ease-in-out infinite;
  text-shadow:
    0 0 4px #fff,
    0 0 11px currentColor;
}

.ps1{left:50%;top:4%;color:#ff4fa3;}
.ps2{left:91%;top:34%;color:#47d9ff;}
.ps3{left:76%;top:85%;color:#ffd83d;}
.ps4{left:24%;top:85%;color:#b47cff;}
.ps5{left:9%;top:34%;color:#43e6a8;}
.ps6{left:50%;top:50%;color:#ff8a55;}

@keyframes star-orbit-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes path-star-twinkle{
  0%,100%{
    opacity:.55;
    filter:brightness(1);
  }
  50%{
    opacity:1;
    filter:brightness(1.8);
  }
}


/* =========================================================
   FLOATING YELLOW STARS
========================================================= */

.yellow-star{
  position:absolute;
  z-index:7;
  color:#ffe28a;
  pointer-events:none;
  line-height:1;
  text-shadow:
    0 0 5px #fff,
    0 0 12px rgba(255,211,89,.95),
    0 0 22px rgba(255,211,89,.55);
  animation:yellow-twinkle 2.2s ease-in-out infinite;
}

.yellow-star-1{
  right:7%;
  top:39%;
  font-size:20px;
}

.yellow-star-2{
  right:17%;
  top:24%;
  font-size:12px;
  animation-delay:-1.1s;
}

@keyframes yellow-twinkle{
  0%,100%{
    opacity:.65;
    transform:scale(.9);
  }
  50%{
    opacity:1;
    transform:scale(1.15);
  }
}


/* =========================================================
   SCROLL
========================================================= */

.scroll-guide{
  position:absolute;
  left:50%;
  bottom:27px;
  transform:translateX(-50%);
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  color:#fff;
}

.scroll-guide span{
  font-size:9px;
  letter-spacing:.28em;
  font-weight:700;
}

.scroll-guide i{
  display:block;
  width:1px;
  height:38px;
  background:rgba(255,255,255,.75);
  animation:scroll-line 2s ease-in-out infinite;
  transform-origin:top;
}

@keyframes scroll-line{
  0%{transform:scaleY(.2);opacity:.2;}
  50%{transform:scaleY(1);opacity:1;}
  100%{transform:scaleY(.2);opacity:.2;}
}


/* =========================================================
   INTRO
========================================================= */

.intro{
  position:relative;
  padding:18px 24px 70px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 20%,rgba(190,221,255,.22),transparent 30%),
    radial-gradient(circle at 80% 70%,rgba(255,192,230,.18),transparent 30%),
    #fff;
}

.section-inner{
  width:min(920px,100%);
  margin:auto;
}

.section-kicker{
  display:block;
  margin-bottom:15px;
  color:var(--pink);
  font-size:11px;
  font-weight:800;
  letter-spacing:.28em;
}

.intro h2{
  margin:0;
  color:var(--blue);
  font-size:clamp(34px,5vw,54px);
  letter-spacing:.05em;
}

.intro p{
  margin:27px 0 0;
  font-size:16px;
  line-height:2.2;
  letter-spacing:.05em;
}


/* =========================================================
   REVEAL
========================================================= */

.reveal-on-scroll{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .75s ease,
    transform .75s ease;
  will-change:opacity,transform;
}

.reveal-on-scroll.is-visible{
  opacity:1;
  transform:translateY(0);
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:760px){

  .site-header{
    padding:18px 18px;
  }

  .site-brand{
    font-size:17px;
  }

  .global-nav{
    display:none;
  }

  .menu-button{
    width:42px;
    height:42px;
    padding:10px;
    border:1px solid rgba(255,255,255,.65);
    border-radius:50%;
    background:rgba(255,255,255,.13);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
  }

  .menu-button span{
    width:18px;
    height:1.5px;
    background:#fff;
    border-radius:10px;
  }

  .hero{
    min-height:700px;
  }

  .hero-bg{
    background-position:center center;
  }

  .hero-content{
    width:calc(100% - 36px);
    padding-top:80px;
  }

  .hero-kicker{
    font-size:12px;
    letter-spacing:.18em;
  }

  .hero h1{
    font-size:clamp(40px,12vw,57px);
    line-height:1.25;
  }

  .hero-message{
    margin-top:22px;
    font-size:14px;
    line-height:1.9;
  }

  .hero-actions{
    margin-top:28px;
    gap:10px;
  }

  .button-primary,
  .button-ripue{
    min-width:0;
    padding:13px 17px;
    font-size:11px;
  }

  .hero-moon{
    width:31px;
    height:31px;
    margin-right:7px;
  }

  .moon-crescent::after{
    width:25px;
    height:25px;
    left:8px;
    top:-4px;
  }

  .hero-star-path{
    left:76%;
    top:57%;
    width:132px;
    height:132px;
  }

  .path-star{
    font-size:15px;
    width:16px;
    height:16px;
    line-height:16px;
    margin:-8px 0 0 -8px;
  }

  .yellow-star-1{
    right:5%;
    top:40%;
    font-size:16px;
  }

  .yellow-star-2{
    right:12%;
    top:27%;
    font-size:10px;
  }

  .intro{
    padding:85px 22px 95px;
  }

  .intro p{
    font-size:14px;
    line-height:2;
  }

  .pc-only{
    display:none;
  }
}


@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }

  .reveal-on-scroll{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* =========================================================
   FLOWING STAR FIELD
   旧 Star polygon サイトから移植
========================================================= */

.star-stream {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
}

.star-stream span {
    position: absolute;
    top: -30px;
    color: #fff;
    text-shadow:
        0 0 8px rgba(120, 164, 235, .75),
        0 0 16px rgba(239, 116, 177, .45);
    opacity: 0;
    animation: star-fall linear infinite;
    will-change: transform, opacity;
}

.star-stream span:nth-child(1) {
    left: 5%;
    font-size: 10px;
    animation-duration: 9s;
    animation-delay: 0s;
}

.star-stream span:nth-child(2) {
    left: 13%;
    font-size: 14px;
    animation-duration: 12s;
    animation-delay: 2s;
}

.star-stream span:nth-child(3) {
    left: 22%;
    font-size: 8px;
    animation-duration: 10s;
    animation-delay: 5s;
}

.star-stream span:nth-child(4) {
    left: 31%;
    font-size: 12px;
    animation-duration: 14s;
    animation-delay: 1s;
}

.star-stream span:nth-child(5) {
    left: 42%;
    font-size: 9px;
    animation-duration: 11s;
    animation-delay: 6s;
}

.star-stream span:nth-child(6) {
    left: 54%;
    font-size: 14px;
    animation-duration: 13s;
    animation-delay: 3s;
}

.star-stream span:nth-child(7) {
    left: 66%;
    font-size: 8px;
    animation-duration: 10s;
    animation-delay: 7s;
}

.star-stream span:nth-child(8) {
    left: 76%;
    font-size: 12px;
    animation-duration: 15s;
    animation-delay: 4s;
}

.star-stream span:nth-child(9) {
    left: 87%;
    font-size: 9px;
    animation-duration: 11s;
    animation-delay: 8s;
}

.star-stream span:nth-child(10) {
    left: 94%;
    font-size: 13px;
    animation-duration: 13s;
    animation-delay: 1s;
}

@keyframes star-fall {
    0% {
        transform: translate3d(0, -30px, 0) rotate(0deg) scale(.6);
        opacity: 0;
    }

    12% {
        opacity: .75;
    }

    55% {
        opacity: .9;
    }

    100% {
        transform: translate3d(35px, 110vh, 0) rotate(180deg) scale(1);
        opacity: 0;
    }
}

/* =========================================================
   FLOWING STAR FIELD - PRODUCTION VISUAL
========================================================= */

.star-stream span {
    font-size: clamp(17px, 2vw, 30px) !important;
    font-weight: 700;
    text-shadow:
        0 0 7px currentColor,
        0 0 15px currentColor,
        0 0 24px rgba(255,255,255,.7);
    opacity: .9;
}

.star-stream span:nth-child(1)  { left:3%;  color:#79a9ff; animation-duration:10s; animation-delay:0s; }
.star-stream span:nth-child(2)  { left:9%;  color:#ff82bd; animation-duration:12s; animation-delay:2s; }
.star-stream span:nth-child(3)  { left:16%; color:#ffd86b; animation-duration:9s;  animation-delay:4s; }
.star-stream span:nth-child(4)  { left:23%; color:#9d8cff; animation-duration:13s; animation-delay:1s; }
.star-stream span:nth-child(5)  { left:30%; color:#65d9ff; animation-duration:11s; animation-delay:6s; }
.star-stream span:nth-child(6)  { left:38%; color:#ff9bd1; animation-duration:14s; animation-delay:3s; }
.star-stream span:nth-child(7)  { left:46%; color:#ffe26f; animation-duration:10s; animation-delay:7s; }
.star-stream span:nth-child(8)  { left:54%; color:#7db5ff; animation-duration:13s; animation-delay:4s; }
.star-stream span:nth-child(9)  { left:62%; color:#c28cff; animation-duration:9s;  animation-delay:8s; }
.star-stream span:nth-child(10) { left:70%; color:#ff82b7; animation-duration:12s; animation-delay:2s; }
.star-stream span:nth-child(11) { left:78%; color:#69dfff; animation-duration:11s; animation-delay:5s; }
.star-stream span:nth-child(12) { left:86%; color:#ffd66e; animation-duration:14s; animation-delay:1s; }
.star-stream span:nth-child(13) { left:93%; color:#a48dff; animation-duration:10s; animation-delay:6s; }
.star-stream span:nth-child(14) { left:98%; color:#ff91c7; animation-duration:13s; animation-delay:3s; }

.star-stream span:nth-child(15) { left:7%;  color:#8ab6ff; animation-duration:11s; animation-delay:3s; }
.star-stream span:nth-child(16) { left:19%; color:#ff9acb; animation-duration:14s; animation-delay:7s; }
.star-stream span:nth-child(17) { left:28%; color:#ffe27a; animation-duration:10s; animation-delay:2s; }
.star-stream span:nth-child(18) { left:35%; color:#b19aff; animation-duration:12s; animation-delay:8s; }
.star-stream span:nth-child(19) { left:49%; color:#72dcff; animation-duration:15s; animation-delay:5s; }
.star-stream span:nth-child(20) { left:59%; color:#ff8fbd; animation-duration:11s; animation-delay:9s; }
.star-stream span:nth-child(21) { left:72%; color:#ffd96e; animation-duration:13s; animation-delay:4s; }
.star-stream span:nth-child(22) { left:82%; color:#a991ff; animation-duration:10s; animation-delay:6s; }


/* =========================================================
   HERO STAR ORBIT - PRODUCTION SIZE
========================================================= */

@media (min-width: 701px) {
    .sp-hero-star-path {
        left: 76% !important;
        top: 55% !important;
        width: 190px !important;
        height: 190px !important;
    }

    .sp-path-star {
        width: 23px !important;
        height: 23px !important;
        margin: -11.5px 0 0 -11.5px !important;
        font-size: 22px !important;
        line-height: 23px !important;
    }

    .sp-ps1 { left: 50% !important; top: 1% !important; }
    .sp-ps2 { left: 94% !important; top: 31% !important; }
    .sp-ps3 { left: 78% !important; top: 92% !important; }
    .sp-ps4 { left: 22% !important; top: 92% !important; }
    .sp-ps5 { left: 6% !important; top: 31% !important; }
    .sp-ps6 { left: 50% !important; top: 50% !important; }
}


/* =========================================================
   HOME HERO - PRODUCTION PROPORTION
========================================================= */

.hero {
    min-height: 475px !important;
    height: 475px !important;
    background: linear-gradient(180deg,#fff,#f7fbff);
}

.hero-bg {
    background-size: cover !important;
    background-position: 54% 48% !important;
    transform: none !important;
}

.hero-overlay {
    background:
        radial-gradient(
            circle at 72% 38%,
            rgba(255,226,240,.28),
            transparent 28%
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.97) 0%,
            rgba(255,255,255,.86) 29%,
            rgba(255,255,255,.25) 52%,
            rgba(255,255,255,.02) 75%
        ) !important;
}

@media (max-width: 900px) {
    .hero-bg {
        background-position: 55% 47% !important;
    }
}

@media (max-width: 560px) {
    .hero {
        min-height: 0 !important;
        height: clamp(390px, 92vw, 500px) !important;
    }

    .hero-bg {
        background-size: cover !important;
        background-position: 55% 34% !important;
        transform: none !important;
    }
}


/* =========================================================
   HOME HERO - COPY PRODUCTION BALANCE
========================================================= */

.hero-content {
    padding-top: 0 !important;
}

.hero h1 {
    font-size: clamp(40px, 4.1vw, 59px) !important;
    line-height: 1.25 !important;
}

.hero h1 span {
    color: #fb00c0;
}

.hero-message {
    margin-top: 22px !important;
    font-size: 12px !important;
    line-height: 1.85 !important;
}

.hero-actions {
    margin-top: 24px !important;
}

@media (max-width: 900px) {
    .hero-content {
        align-self: stretch;
        padding-top: 44px !important;
        padding-bottom: 45px !important;
    }
}

@media (max-width: 560px) {
    .hero-content {
        width: calc(100% - 32px) !important;
        padding-top: 25px !important;
        padding-bottom: 30px !important;
    }

    .hero h1 {
        font-size: 33px !important;
    }

    .hero-message {
        font-size: 11px !important;
        line-height: 1.75 !important;
    }
}


/* =========================================================
   HOME HERO - PRODUCTION WAVES
========================================================= */

.wave {
    position: absolute;
    left: -5%;
    width: 110%;
    height: 92px;
    bottom: -31px;
    z-index: 20;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
}

.wave-one {
    background:
        linear-gradient(
            90deg,
            rgba(133,197,244,.95),
            rgba(216,240,255,.8),
            rgba(255,255,255,.8),
            rgba(255,206,229,.92)
        );
    transform: rotate(-2deg);
}

.wave-two {
    bottom: -43px;
    height: 68px;
    background: rgba(255,255,255,.76);
    transform: rotate(2deg);
}

.wave-one::before,
.wave-two::before,
.wave-one::after,
.wave-two::after {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.wave-one::before,
.wave-two::before {
    content: "✦   ✦   ˚   ✧   ˚   ☆   ✦   ✦";
    font-size: clamp(9px,1.25vw,16px);
    letter-spacing: clamp(4px,1vw,12px);
    opacity: .68;
    text-shadow:
        0 0 7px rgba(255,255,255,.9),
        0 0 14px rgba(255,164,207,.5);
}

.wave-one::before {
    top: 18%;
    color: #fff;
}

.wave-two::before {
    top: 43%;
    color: #d9caff;
}

.wave-one::after,
.wave-two::after {
    content: "✦  ˚  ✧  ˚  ☆  ˚  ✦  ˚  ✧";
    font-size: clamp(10px,1.4vw,18px);
    letter-spacing: clamp(5px,1.5vw,16px);
    text-shadow:
        0 0 6px rgba(255,255,255,.95),
        0 0 13px rgba(142,185,255,.6);
    opacity: .85;
}

.wave-one::after {
    top: 34%;
    color: #fff;
}

.wave-two::after {
    top: 58%;
    color: #ffd6ea;
    opacity: .7;
    transform: translateX(10px);
}

@media (max-width:560px) {
    .wave-one::before,
    .wave-two::before {
        font-size: 9px;
        letter-spacing: 3px;
    }

    .wave-one::after,
    .wave-two::after {
        font-size: 10px;
        letter-spacing: 5px;
    }
}


/* =========================================================
   HEADER + HERO TYPOGRAPHY - PRODUCTION BALANCE
========================================================= */

/* Header */
.site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    background: rgba(255,255,255,.97) !important;
    border-bottom: 1px solid rgba(89,116,165,.10);
    box-shadow: 0 2px 12px rgba(70,94,140,.04);
}

.header-inner {
    min-height: 76px;
}

.site-brand {
    color: #315f9f !important;
}

.brand-star {
    color: #fb00c0 !important;
}

.global-nav a {
    color: #46566d !important;
    text-shadow: none !important;
}

.global-nav .ripue-link {
    color: #3369e7 !important;
    border-color: rgba(51,105,231,.30) !important;
    background: rgba(255,255,255,.82) !important;
}

/* Hero copy */
.hero-kicker {
    color: #3369e7 !important;
    text-shadow: none !important;
}

.hero h1 {
    color: #3369e7 !important;
    text-shadow: none !important;
}

.hero h1 span {
    color: #f04b98 !important;
}

.hero-message {
    color: #536782 !important;
    text-shadow: none !important;
}

/* Buttons */
.button-primary {
    color: #fff !important;
    background: linear-gradient(90deg,#3478df,#2e63c3) !important;
}

.button-ripue {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(90deg,#ef5b9e,#e93682) !important;
}

/* Scroll guide is unnecessary on the compact production hero */
.scroll-guide {
    display: none !important;
}

@media (max-width: 900px) {
    .header-inner {
        min-height: 68px;
    }
}


/* =========================================================
   HEADER POSITION - RESTORE OVER HERO
========================================================= */

.site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.header-inner {
    min-height: 88px !important;
}

.site-brand {
    color: #fff !important;
}

.brand-star {
    color: #ffe36e !important;
}

.global-nav a {
    color: #fff !important;
    text-shadow: 0 1px 8px rgba(61,75,120,.18) !important;
}

.global-nav .ripue-link {
    color: #fff !important;
    border-color: rgba(255,255,255,.75) !important;
    background: rgba(255,255,255,.08) !important;
}

@media (max-width: 900px) {
    .header-inner {
        min-height: 76px !important;
    }
}


/* =========================================================
   HEADER BRAND - HIDE ON HOME HERO
========================================================= */

.site-brand {
    visibility: hidden !important;
}


/* =========================================================
   COMMON HEADER v1
   New PHP site / shared header
   Hero design is intentionally untouched.
========================================================= */

.site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:58px !important;
  padding:0 20px !important;
  z-index:10000 !important;
  background:rgba(255,255,255,.94) !important;
  border-bottom:1px solid rgba(89,116,165,.10) !important;
  box-shadow:0 2px 12px rgba(70,94,140,.06) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.site-header .header-inner{
  width:min(1180px,100%) !important;
  height:58px !important;
  min-height:58px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
}

.site-header .site-brand{
  visibility:visible !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  color:#315f9f !important;
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:.04em !important;
  text-shadow:none !important;
  white-space:nowrap;
}

.site-header .brand-star{
  color:#fb00c0 !important;
  font-size:18px !important;
  text-shadow:none !important;
}

.site-header .global-nav{
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
  color:#46566d !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
}

.site-header .global-nav a{
  color:#46566d !important;
  text-shadow:none !important;
  transition:opacity .2s ease,transform .2s ease;
}

.site-header .global-nav a:hover{
  opacity:.65;
  transform:none;
}

.site-header .global-nav .ripue-link{
  padding:7px 13px !important;
  color:#3369e7 !important;
  border:1px solid rgba(51,105,231,.28) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.8) !important;
}

.site-header .menu-button{
  display:none;
  width:38px;
  height:38px;
  padding:7px;
  margin:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.site-header .menu-button span{
  display:block;
  width:22px;
  height:2px;
  margin:5px auto;
  border-radius:999px;
  background:#3369e7;
  transition:transform .25s ease,opacity .25s ease;
}

@media(max-width:768px){

  .site-header{
    height:54px !important;
    padding:0 12px !important;
  }

  .site-header .header-inner{
    height:54px !important;
    min-height:54px !important;
  }

  .site-header .site-brand{
    font-size:14px !important;
  }

  .site-header .brand-star{
    font-size:17px !important;
  }

  .site-header .global-nav{
    display:none !important;
  }

  .site-header .menu-button{
    display:block !important;
  }

  .site-header .global-nav.is-open{
    display:flex !important;
    position:absolute !important;
    top:54px !important;
    left:10px !important;
    right:10px !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:8px !important;
    background:rgba(255,255,255,.98) !important;
    border:1px solid #e1e8f4 !important;
    border-radius:14px !important;
    box-shadow:0 14px 32px rgba(61,93,148,.12) !important;
  }

  .site-header .global-nav.is-open a{
    display:block !important;
    padding:12px 13px !important;
    border-bottom:1px solid #edf1f6 !important;
    color:#46566d !important;
  }

  .site-header .global-nav.is-open a:last-child{
    border-bottom:0 !important;
  }

  .site-header .global-nav.is-open .ripue-link{
    margin-top:5px;
    text-align:center;
    border:1px solid rgba(51,105,231,.25) !important;
  }

}


/* =========================================================
   HOME HERO NAV - STICKY TEST
========================================================= */

.home-page .site-header{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  z-index:1000 !important;
}

.home-page .header-inner{
  min-height:0 !important;
  height:48px !important;
  padding:0 28px !important;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.home-page .site-brand,
.home-page .global-nav a{
  color:#fff !important;
}

.home-page .global-nav .ripue-link{
  color:#fff !important;
  border-color:rgba(255,255,255,.65) !important;
  background:rgba(255,255,255,.10) !important;
}

.home-page .site-header.home-sticky{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  background:rgba(255,255,255,.10) !important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

@media(max-width:900px){
  .home-page .header-inner{
    height:46px !important;
    padding:0 18px !important;
  }
}


/* =========================================================
   STAR POLYGON FIXED NAV STAR
   RIPUE運営スター演出をStar polygon用に調整
========================================================= */

.home-page .brand-star{
  display:inline-block;
  font-weight:900;
  line-height:1;
  background:
    linear-gradient(
      90deg,
      #ff4fb8,
      #a855f7,
      #3369e7,
      #38bdf8,
      #facc15,
      #ff4fb8
    );
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  filter:
    drop-shadow(0 0 2px rgba(168,85,247,.55))
    drop-shadow(0 0 4px rgba(56,189,248,.35));
  animation:
    star-polygon-rainbow 4s linear infinite,
    star-polygon-twinkle 2.4s ease-in-out infinite;
}

@keyframes star-polygon-rainbow{
  0%{
    background-position:0% 50%;
  }
  100%{
    background-position:300% 50%;
  }
}

@keyframes star-polygon-twinkle{
  0%,100%{
    transform:scale(1);
    filter:
      drop-shadow(0 0 2px rgba(168,85,247,.45))
      drop-shadow(0 0 4px rgba(56,189,248,.25));
  }
  50%{
    transform:scale(1.14);
    filter:
      drop-shadow(0 0 3px rgba(251,0,192,.65))
      drop-shadow(0 0 7px rgba(51,105,231,.55));
  }
}

@media(prefers-reduced-motion:reduce){
  .home-page .brand-star{
    animation:none;
  }
}


/* =========================================================
   COMPANY PAGE
========================================================= */

.company-page{
  background:
    linear-gradient(
      180deg,
      #fbfcff 0%,
      #ffffff 34%,
      #fbf8ff 100%
    );
  color:#53617a;
  overflow:hidden;
}

.company-container{
  width:min(1120px, calc(100% - 48px));
  margin:0 auto;
}


/* HERO
--------------------------------------------------------- */

.company-hero{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 78% 28%,
      rgba(255,221,237,.72),
      transparent 26%
    ),
    radial-gradient(
      circle at 18% 72%,
      rgba(194,225,255,.78),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      #eef7ff 0%,
      #f7efff 52%,
      #fff5fb 100%
    );
}

.company-hero::after{
  content:"";
  position:absolute;
  width:460px;
  height:460px;
  right:-110px;
  bottom:-220px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.78),
      rgba(255,255,255,0) 68%
    );
}

.company-hero-inner{
  position:relative;
  z-index:3;
  padding:110px 0 90px;
}

.company-kicker,
.company-label{
  margin:0 0 12px;
  color:#6f83b6;
  font-size:11px;
  font-weight:900;
  letter-spacing:.22em;
}

.company-hero h1{
  margin:0;
  color:#315fa7;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(34px,4vw,52px);
  font-weight:500;
  line-height:1.12;
}

.company-hero-lead{
  margin:25px 0 18px;
  color:#ef5b9b;
  font-size:clamp(23px,3vw,37px);
  font-weight:800;
  line-height:1.45;
}

.company-hero-lead span{
  color:#6f69b7;
}

.company-hero-copy{
  margin:0;
  color:#53617a;
  font-size:15px;
  line-height:2.05;
}

.company-hero-stars{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.company-hero-stars span{
  position:absolute;
  color:#fff3a8;
  font-size:24px;
  text-shadow:
    0 0 8px #fff,
    0 0 18px rgba(255,203,83,.65);
  animation:company-twinkle 3.8s ease-in-out infinite;
}

.company-hero-stars span:nth-child(1){
  top:21%;
  left:73%;
}

.company-hero-stars span:nth-child(2){
  top:35%;
  left:86%;
  color:#9bc8ff;
  animation-delay:.7s;
}

.company-hero-stars span:nth-child(3){
  top:62%;
  left:78%;
  color:#ff9dcc;
  animation-delay:1.5s;
}

.company-hero-stars span:nth-child(4){
  top:71%;
  left:91%;
  animation-delay:2.1s;
}

.company-hero-stars span:nth-child(5){
  top:48%;
  left:68%;
  color:#b9a6ff;
  animation-delay:2.8s;
}

@keyframes company-twinkle{
  0%,100%{
    transform:scale(.85) rotate(0deg);
    opacity:.45;
  }

  50%{
    transform:scale(1.2) rotate(12deg);
    opacity:1;
  }
}


/* INTRO
--------------------------------------------------------- */

.company-intro{
  padding:100px 0;
  background:#fff;
}

.company-intro-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  align-items:start;
}

.company-intro h2,
.company-section-head h2,
.company-profile-title h2{
  margin:0;
  color:#315fa7;
  font-size:clamp(23px,2.8vw,34px);
  line-height:1.55;
}

.company-intro-copy p{
  margin:0 0 24px;
  font-size:14px;
  line-height:2.15;
}


/* COMMON SECTION
--------------------------------------------------------- */

.company-values,
.company-business,
.company-profile,
.company-history{
  padding:95px 0;
}

.company-section-head{
  margin-bottom:45px;
}

.company-section-head h2{
  line-height:1.4;
}


/* VALUES
--------------------------------------------------------- */

.company-values{
  background:
    linear-gradient(
      135deg,
      #f5f9ff,
      #fff7fc
    );
}

.company-value-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.company-value-card{
  padding:38px 30px;
  border:1px solid rgba(132,153,210,.18);
  border-radius:24px;
  background:rgba(255,255,255,.86);
  box-shadow:
    0 16px 45px rgba(85,105,170,.08);
}

.company-value-card > span{
  display:block;
  margin-bottom:18px;
  color:#f2bf48;
  font-size:27px;
  text-shadow:
    0 0 8px rgba(255,224,108,.75);
}

.company-value-card:nth-child(2) > span{
  color:#ef83b8;
}

.company-value-card:nth-child(3) > span{
  color:#729ee9;
}

.company-value-card h3{
  margin:0 0 14px;
  color:#486aaa;
  font-size:18px;
}

.company-value-card p{
  margin:0;
  font-size:12px;
  line-height:2;
}


/* BUSINESS
--------------------------------------------------------- */

.company-business{
  background:#fff;
}

.company-business-grid{
  display:grid;
  grid-template-columns:minmax(0,520px);
}

.company-business-card{
  position:relative;
  padding:40px;
  overflow:hidden;
  border:1px solid rgba(118,140,205,.18);
  border-radius:26px;
  background:
    linear-gradient(
      135deg,
      #f4f8ff,
      #fff4fb
    );
  box-shadow:
    0 18px 50px rgba(86,105,169,.10);
}

.company-business-card::after{
  content:"✦";
  position:absolute;
  right:28px;
  top:20px;
  color:rgba(111,105,183,.12);
  font-size:100px;
}

.company-business-icon{
  margin-bottom:20px;
  color:#f0bd47;
  font-size:30px;
}

.company-business-type{
  margin:0 0 8px;
  color:#8a9ac2;
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
}

.company-business-card h3{
  margin:0 0 15px;
  color:#4e64b3;
  font-size:25px;
}

.company-business-card > p:not(.company-business-type){
  max-width:390px;
  margin:0 0 24px;
  font-size:13px;
  line-height:2;
}

.company-business-card a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#3369e7;
  font-size:13px;
  font-weight:800;
}


/* PROFILE
--------------------------------------------------------- */

.company-profile{
  background:
    linear-gradient(
      180deg,
      #fbfcff,
      #f7f8ff
    );
}

.company-profile-title{
  margin-bottom:42px;
}

.company-profile-table{
  overflow:hidden;
  border-top:1px solid #dfe5f1;
}

.company-profile-table > div{
  display:grid;
  grid-template-columns:190px 1fr;
  border-bottom:1px solid #dfe5f1;
}

.company-profile-table dt,
.company-profile-table dd{
  margin:0;
  padding:22px 20px;
}

.company-profile-table dt{
  color:#6178ae;
  font-size:12px;
  font-weight:800;
}

.company-profile-table dd{
  color:#4f5b70;
  font-size:13px;
  line-height:1.8;
}


/* HISTORY
--------------------------------------------------------- */

.company-history{
  background:#fff;
}

.company-history-note{
  margin:14px 0 0;
  font-size:13px;
}

.company-history-list{
  position:relative;
  max-width:800px;
  margin-top:45px;
}

.company-history-list::before{
  content:"";
  position:absolute;
  top:5px;
  bottom:5px;
  left:122px;
  width:1px;
  background:
    linear-gradient(
      #91b6ee,
      #dd9cd2
    );
}

.company-history-item{
  position:relative;
  display:grid;
  grid-template-columns:95px 55px 1fr;
  min-height:74px;
  align-items:start;
}

.company-history-item time{
  padding-top:1px;
  color:#6682bc;
  font-size:12px;
  font-weight:800;
}

.company-history-dot{
  position:relative;
  z-index:2;
  width:11px;
  height:11px;
  margin:3px auto 0;
  border:3px solid #fff;
  border-radius:50%;
  background:#779de0;
  box-shadow:
    0 0 0 2px rgba(119,157,224,.22);
}

.company-history-item:nth-child(even) .company-history-dot{
  background:#df88bb;
  box-shadow:
    0 0 0 2px rgba(223,136,187,.20);
}

.company-history-item p{
  margin:0;
  color:#53617a;
  font-size:13px;
  line-height:1.8;
}


/* MESSAGE
--------------------------------------------------------- */

.company-message{
  padding:110px 0 120px;
  text-align:center;
  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(255,255,255,.96),
      rgba(255,255,255,.25) 36%,
      transparent 65%
    ),
    linear-gradient(
      135deg,
      #eef7ff,
      #f7efff 52%,
      #fff5fb
    );
}

.company-message-star{
  display:block;
  margin-bottom:16px;
  color:#f0c34f;
  font-size:31px;
  text-shadow:
    0 0 8px #fff,
    0 0 18px rgba(255,207,75,.65);
}

.company-message h2{
  margin:0 0 20px;
  color:#315fa7;
  font-size:clamp(24px,3vw,37px);
}

.company-message p:not(.company-label){
  margin:0 0 34px;
  font-size:13px;
  line-height:2.1;
}


/* INNER PAGE HEADER
--------------------------------------------------------- */

.inner-page .site-header{
  position:sticky !important;
  top:0 !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  padding:0 28px !important;
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid rgba(115,135,190,.12) !important;
  box-shadow:0 4px 18px rgba(77,97,155,.05) !important;
  z-index:1000 !important;
}

.inner-page .header-inner{
  min-height:0 !important;
  height:48px !important;
}

.inner-page .site-brand{
  visibility:visible !important;
  color:#4f68a8 !important;
  text-shadow:none !important;
}

.inner-page .brand-star{
  color:#f0c34f !important;
}

.inner-page .global-nav a{
  color:#53699f !important;
  text-shadow:none !important;
}

.inner-page .global-nav .ripue-link{
  color:#3369e7 !important;
  border-color:rgba(51,105,231,.30) !important;
  background:rgba(51,105,231,.04) !important;
}


/* MOBILE
--------------------------------------------------------- */

@media(max-width:900px){

  .company-container{
    width:min(100% - 36px,1120px);
  }

  .company-hero{
    min-height:0;
  }

  .company-hero-inner{
    padding:76px 0 70px;
  }

  .company-intro{
    padding:72px 0;
  }

  .company-intro-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .company-values,
  .company-business,
  .company-profile,
  .company-history{
    padding:72px 0;
  }

  .company-value-grid{
    grid-template-columns:1fr;
  }

  .company-business-grid{
    grid-template-columns:1fr;
  }

  .inner-page .site-header{
    padding:0 18px !important;
  }

}

@media(max-width:560px){

  .company-hero-inner{
    padding:58px 0 62px;
  }

  .company-hero h1{
    font-size:30px;
  }

  .company-hero-lead{
    font-size:22px;
  }

  .company-hero-copy{
    font-size:13px;
  }

  .company-profile-table > div{
    grid-template-columns:1fr;
  }

  .company-profile-table dt{
    padding:18px 10px 4px;
  }

  .company-profile-table dd{
    padding:6px 10px 18px;
  }

  .company-history-list::before{
    left:91px;
  }

  .company-history-item{
    grid-template-columns:68px 45px 1fr;
  }

  .company-value-card,
  .company-business-card{
    padding:30px 24px;
  }

}


/* =========================================================
   INNER PAGE - STAR POLYGON BRAND
========================================================= */

.inner-page .site-brand > span:last-child{
  background:linear-gradient(
    90deg,
    #3369e7 0%,
    #766de8 48%,
    #FB00C0 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  font-weight:800;
}

.inner-page .brand-star{
  display:inline-block;
  font-weight:900;
  background:linear-gradient(
    90deg,
    #ff4fb8,
    #a855f7,
    #3369e7,
    #38bdf8,
    #facc15,
    #ff4fb8
  );
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  filter:
    drop-shadow(0 0 2px rgba(168,85,247,.55))
    drop-shadow(0 0 4px rgba(56,189,248,.35));
  animation:
    star-polygon-rainbow 4s linear infinite,
    star-polygon-twinkle 2.4s ease-in-out infinite;
}



/* =========================================================
   COMPANY PAGE - ORIGINAL DESIGN ALIGNMENT
========================================================= */

/* HERO */

.company-page .company-hero{
  min-height:560px;
}

.company-page .company-hero-inner{
  padding:95px 0 105px;
}

.company-page .company-hero h1{
  font-size:clamp(28px,3.6vw,46px);
}

.company-page .company-hero-stars span:nth-child(1){
  left:65%;
  top:17%;
}

.company-page .company-hero-stars span:nth-child(2){
  left:79%;
  top:32%;
  font-size:16px;
}

.company-page .company-hero-stars span:nth-child(3){
  left:88%;
  top:16%;
  font-size:30px;
}

.company-page .company-hero-stars span:nth-child(4){
  left:72%;
  top:65%;
  font-size:18px;
}

.company-page .company-hero-stars span:nth-child(5){
  left:91%;
  top:57%;
  font-size:14px;
}

.company-page .company-hero-stars span:nth-child(6){
  left:56%;
  top:78%;
  font-size:17px;
}

.company-page .company-hero-stars span:nth-child(7){
  left:83%;
  top:76%;
  font-size:20px;
}

.company-page .company-hero-stars span:nth-child(8){
  left:47%;
  top:22%;
  font-size:13px;
}

.company-orbit{
  position:absolute;
  width:430px;
  height:430px;
  right:-120px;
  top:65px;
  border:1px solid rgba(120,126,203,.18);
  border-radius:50%;
  box-shadow:
    0 0 0 45px rgba(255,255,255,.12),
    0 0 0 90px rgba(255,255,255,.08);
}


/* ABOUT */

.company-page .company-intro{
  padding:100px 0;
}

.company-page .company-intro h2{
  color:#293b61;
  font-size:clamp(23px,2.8vw,36px);
  line-height:1.45;
  letter-spacing:.02em;
}

.company-page .company-intro h2 span{
  color:#e75d98;
}

.company-page .company-intro-text{
  color:#5c687d;
  font-size:15px;
  line-height:2.15;
}

.company-page .company-intro-text p{
  margin:0 0 22px;
}


/* SECTION HEAD */

.company-page .company-section-head{
  margin-bottom:48px;
  text-align:center;
}

.company-page .company-section-head h2{
  color:#293b61;
  font-size:clamp(23px,2.8vw,34px);
  line-height:1.45;
  letter-spacing:.02em;
}

.company-page .company-section-head > p:last-child{
  margin:12px 0 0;
  color:#778197;
  font-size:13px;
}


/* VALUES */

.company-page .company-values{
  padding:100px 0;
  background:
    linear-gradient(
      180deg,
      #f7fbff,
      #fff8fc
    );
}

.company-page .company-value-grid{
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.company-page .company-value-card{
  position:relative;
  min-height:275px;
  padding:38px 32px;
  border:0;
  border-radius:26px;
  background:#fff;
  box-shadow:
    0 15px 40px rgba(73,91,145,.10);
  overflow:hidden;
}

.company-page .company-value-card::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-75px;
  bottom:-75px;
  border-radius:50%;
  background:rgba(235,241,255,.55);
}

.company-page .value-blue{
  border-top:4px solid #77b8ef;
}

.company-page .value-pink{
  border-top:4px solid #ef8fbc;
}

.company-page .value-lav{
  border-top:4px solid #a999e6;
}

.company-page .value-number{
  color:#aab7cf;
  font:italic 15px Georgia,serif;
  letter-spacing:.1em;
}

.company-page .value-star{
  position:absolute;
  right:27px;
  top:24px;
  color:#ffe18a;
  font-size:25px;
  text-shadow:
    0 0 10px rgba(255,210,85,.45);
}

.company-page .company-value-card h3{
  margin:28px 0 12px;
  color:#33466e;
  font-size:18px;
}

.company-page .company-value-card p{
  position:relative;
  z-index:2;
  margin:0;
  color:#68748a;
  font-size:11px;
  line-height:2;
}


/* BUSINESS */

.company-page .company-business{
  padding:100px 0;
  background:#fff;
}

.company-page .company-business-current{
  display:grid;
  grid-template-columns:minmax(280px,360px);
  justify-content:center;
}

.company-page .business-ripue{
  min-height:310px;
  padding:34px;
  color:#fff;
  text-decoration:none;
  background:
    linear-gradient(
      145deg,
      #6fa8ed,
      #a68ddd 55%,
      #ed8fbd
    );
}

.company-page .business-ripue .business-icon{
  color:#fff;
  font-size:34px;
}

.company-page .business-ripue small{
  display:block;
  margin-top:24px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  opacity:.85;
}

.company-page .business-ripue h3{
  margin:12px 0;
  color:#fff;
  font-size:19px;
  line-height:1.45;
}

.company-page .business-ripue p{
  margin:0;
  color:#fff;
  font-size:11px;
  line-height:1.8;
  opacity:.92;
}

.company-page .business-ripue b{
  position:relative;
  z-index:2;
  margin-top:auto;
  color:#fff;
  font-size:12px;
}


/* PROFILE */

.company-page .company-profile{
  padding:100px 0;
  background:
    linear-gradient(
      135deg,
      #f7fbff,
      #fcf5ff
    );
}

.company-page .company-profile-inner{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:80px;
  align-items:center;
}

.company-page .company-profile-title h2{
  color:#293b61;
  font-size:clamp(23px,2.8vw,34px);
  line-height:1.45;
}

.company-page .company-profile-title p:last-child{
  color:#738098;
  font-size:13px;
  line-height:1.9;
}

.company-page .company-profile-table{
  overflow:hidden;
  border:0;
  border-radius:24px;
  background:#fff;
  box-shadow:
    0 15px 40px rgba(71,91,142,.09);
}

.company-page .company-profile-table > div{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:24px;
  padding:20px 26px;
  border-bottom:1px solid #edf0f6;
  font-size:13px;
}

.company-page .company-profile-table > div:last-child{
  border-bottom:0;
}

.company-page .company-profile-table span{
  color:#7b879b;
}

.company-page .company-profile-table strong{
  color:#33466e;
  line-height:1.9;
}

.company-page .company-profile-table a{
  color:#3d72c5;
}


/* HISTORY */

.company-page .company-history{
  padding:100px 0;
  background:#fff;
}

.company-page .company-timeline{
  max-width:850px;
  margin:0 auto;
  padding-left:32px;
  border-left:2px solid #dce7f6;
}

.company-page .company-timeline > div{
  position:relative;
  display:grid;
  grid-template-columns:125px 1fr;
  gap:24px;
  padding:18px 0 18px 8px;
  border-bottom:1px solid #edf0f6;
}

.company-page .company-timeline > div::before{
  content:"";
  position:absolute;
  left:-41px;
  top:28px;
  width:13px;
  height:13px;
  border:3px solid #8fb8e9;
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 0 0 5px rgba(143,184,233,.10);
}

.company-page .company-timeline span{
  color:#6f83b6;
  font:600 15px Georgia,serif;
}

.company-page .company-timeline strong{
  color:#34486f;
  font-size:15px;
}


/* MESSAGE */

.company-page .company-message{
  position:relative;
  padding:115px 0;
  overflow:hidden;
  text-align:center;
  background:
    linear-gradient(
      135deg,
      #edf7ff 0%,
      #f8efff 55%,
      #fff2f8 100%
    );
}

.company-page .company-message::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  left:-250px;
  top:-260px;
  border:1px solid rgba(110,133,193,.16);
  border-radius:50%;
  box-shadow:
    0 0 0 55px rgba(255,255,255,.15),
    0 0 0 110px rgba(255,255,255,.10);
}

.company-page .company-message-star{
  display:block;
  margin-bottom:18px;
  color:#ffe18a;
  font-size:36px;
  text-shadow:
    0 0 10px #fff,
    0 0 25px rgba(255,210,85,.55);
}

.company-page .company-message h2{
  margin:0;
  color:#33466e;
  font-size:clamp(24px,3vw,37px);
  line-height:1.65;
}

.company-page .company-message > div > p:not(.company-label){
  margin:18px 0 0;
  color:#68748a;
  font-size:14px;
}

.company-page .company-back-home{
  display:inline-block;
  margin-top:30px;
  padding:12px 22px;
  border-radius:999px;
  background:#fff;
  color:#4c70b0;
  font-size:12px;
  font-weight:800;
  box-shadow:
    0 8px 22px rgba(73,92,144,.10);
}


/* MOBILE */

@media(max-width:900px){

  .company-page .company-intro-grid,
  .company-page .company-profile-inner{
    grid-template-columns:1fr;
    gap:38px;
  }

  .company-page .company-value-grid{
    grid-template-columns:1fr;
  }

  .company-page .company-value-card{
    min-height:auto;
  }

  .company-page .company-profile{
    padding:75px 0;
  }

}

@media(max-width:560px){

  .company-page .company-hero{
    min-height:0;
    padding-top:58px;
    padding-bottom:58px;
  }

  .company-page .company-hero-inner{
    padding:0;
  }

  .company-page .company-hero h1{
    font-size:30px;
  }

  .company-page .company-intro,
  .company-page .company-values,
  .company-page .company-business,
  .company-page .company-profile,
  .company-page .company-history{
    padding:70px 0;
  }

  .company-page .company-section-head{
    margin-bottom:32px;
  }

  .company-page .company-value-card{
    padding:30px 25px;
  }

  .company-page .company-profile-table > div{
    grid-template-columns:88px 1fr;
    gap:14px;
    padding:17px 18px;
    font-size:12px;
  }

  .company-page .company-timeline{
    padding-left:23px;
  }

  .company-page .company-timeline > div{
    grid-template-columns:1fr;
    gap:4px;
    padding-left:4px;
  }

  .company-page .company-timeline > div::before{
    left:-32px;
  }

  .company-page .company-message{
    padding:82px 0;
  }

  .company-page .company-message h2{
    font-size:25px;
  }

  .company-page .pc-only{
    display:none;
  }

}


/* =========================================================
   COMPANY ABOUT - POSITION ALIGNMENT
========================================================= */

.company-page .company-intro-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  align-items:start;
}

.company-page .company-intro-title{
  padding-top:0;
}

.company-page .company-intro-text{
  padding-top:2px;
}

@media(max-width:900px){

  .company-page .company-intro-grid{
    grid-template-columns:1fr;
    gap:38px;
  }

}

@media(max-width:560px){

  .company-page .company-intro-grid{
    gap:28px;
  }

}

/* =========================================================
   COMPANY - VERTICAL SPACE ADJUSTMENT
========================================================= */

@media(min-width:561px){

  .company-page .company-hero{
    min-height:430px;
  }

  .company-page .company-hero-inner{
    padding:72px 0 78px;
  }

  .company-page .company-intro{
    padding:70px 0;
  }

}

/* =========================================================
   COMPANY BUSINESS - RIPUE / STAPALIX
========================================================= */

.company-page .company-business-current{
  display:grid;
  grid-template-columns:repeat(2,minmax(280px,360px));
  justify-content:center;
  gap:22px;
}

.company-page .company-business-card{
  min-height:310px;
}

.company-page .business-stapalix{
  padding:34px;
  color:#fff;
  background:
    linear-gradient(
      145deg,
      #69b8e8 0%,
      #8caeea 48%,
      #b29ce3 100%
    );
}

.company-page .business-stapalix .business-icon{
  color:#fff;
  font-size:34px;
}

.company-page .business-stapalix small{
  display:block;
  margin-top:24px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  opacity:.85;
}

.company-page .business-stapalix h3{
  margin:12px 0;
  color:#fff;
  font-size:19px;
  line-height:1.45;
}

.company-page .business-stapalix p{
  margin:0;
  color:#fff;
  font-size:11px;
  line-height:1.8;
  opacity:.92;
}

.company-page .business-stapalix b{
  position:relative;
  z-index:2;
  margin-top:auto;
  color:#fff;
  font-size:12px;
}

@media(max-width:700px){

  .company-page .company-business-current{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   HOME NEWS
========================================================= */

.home-news{
  position:relative;
  padding:105px 24px 115px;
  background:
    radial-gradient(circle at 10% 20%,rgba(190,221,255,.20),transparent 28%),
    radial-gradient(circle at 90% 75%,rgba(255,192,230,.16),transparent 30%),
    #fbfcff;
}

.home-news-inner{
  width:min(1000px,100%);
  margin:auto;
}

.home-news-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:38px;
}

.home-news-heading .section-kicker{
  margin-bottom:12px;
}

.home-news-heading h2{
  margin:0;
  color:var(--blue);
  font-size:clamp(32px,5vw,48px);
  line-height:1.2;
  letter-spacing:.04em;
}

.home-news-more{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--blue);
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  letter-spacing:.04em;
  transition:
    gap .25s ease,
    opacity .25s ease;
}

.home-news-more:hover{
  gap:15px;
  opacity:.75;
}

.home-news-more span{
  color:var(--pink);
  font-size:17px;
}

.home-news-list{
  border-top:1px solid rgba(51,105,231,.13);
}

.home-news-item{
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 30px;
  align-items:center;
  gap:24px;
  min-height:88px;
  padding:18px 8px;
  border-bottom:1px solid rgba(51,105,231,.13);
  color:inherit;
  text-decoration:none;
  transition:
    transform .25s ease,
    background .25s ease;
}

.home-news-item:hover{
  transform:translateX(5px);
  background:rgba(255,255,255,.55);
}

.home-news-meta{
  display:flex;
  align-items:center;
  gap:14px;
}

.home-news-meta time{
  color:#7c8ba9;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.home-news-meta span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  min-height:27px;
  padding:4px 11px;
  border-radius:999px;
  background:rgba(51,105,231,.08);
  color:var(--blue);
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}

.home-news-item p{
  margin:0;
  color:#40547d;
  font-size:14px;
  font-weight:700;
  line-height:1.8;
}

.home-news-item i{
  color:var(--pink);
  font-size:18px;
  font-style:normal;
  text-align:right;
  transition:transform .25s ease;
}

.home-news-item:hover i{
  transform:translateX(4px);
}

.home-news-empty{
  padding:45px 20px;
  border-top:1px solid rgba(51,105,231,.13);
  border-bottom:1px solid rgba(51,105,231,.13);
  color:#7c8ba9;
  font-size:14px;
  text-align:center;
}

.home-news-more-mobile{
  display:none;
}


/* =========================================================
   HOME NEWS MOBILE
========================================================= */

@media(max-width:760px){

  .home-news{
    padding:78px 20px 86px;
  }

  .home-news-heading{
    margin-bottom:28px;
  }

  .home-news-more-pc{
    display:none;
  }

  .home-news-item{
    grid-template-columns:minmax(0,1fr) 22px;
    gap:9px 12px;
    min-height:0;
    padding:20px 4px;
  }

  .home-news-meta{
    grid-column:1;
    grid-row:1;
    gap:10px;
  }

  .home-news-item p{
    grid-column:1;
    grid-row:2;
    font-size:13px;
    line-height:1.7;
  }

  .home-news-item i{
    grid-column:2;
    grid-row:1 / 3;
    align-self:center;
  }

  .home-news-meta span{
    min-width:0;
    min-height:25px;
    padding:3px 9px;
  }

  .home-news-more-mobile{
    display:inline-flex;
    margin-top:28px;
  }

}


/* =========================================================
   HOME CONNECT
   NEWS + SNS + CONTACT
========================================================= */

.home-connect{
  position:relative;
  padding:28px 24px 70px;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%,rgba(190,221,255,.20),transparent 28%),
    radial-gradient(circle at 88% 76%,rgba(255,192,230,.16),transparent 30%),
    #fff;
}

.home-connect-inner{
  width:min(1120px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
  gap:16px;
}


/* =========================================================
   NEWS PANEL
========================================================= */

.home-connect-news{
  position:relative;
  min-height:300px;
  padding:22px 26px;
  overflow:hidden;
  border:1px solid rgba(51,105,231,.16);
  border-radius:18px;
  background:rgba(255,255,255,.82);
}

.home-connect-news-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(51,105,231,.13);
}

.home-connect-news-heading .section-kicker{
  margin-bottom:9px;
  color:var(--blue);
  font-size:10px;
}

.home-connect-news-heading h2{
  margin:0;
  color:#3d70ad;
  font-size:27px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.05em;
}

.home-connect-news-heading > a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding-bottom:4px;
  color:#6687b4;
  font-size:11px;
  text-decoration:none;
  white-space:nowrap;
  transition:
    gap .25s ease,
    color .25s ease;
}

.home-connect-news-heading > a:hover{
  gap:9px;
  color:var(--blue);
}

.home-connect-news-list{
  position:relative;
  z-index:2;
}

.home-connect-news-item{
  display:grid;
  grid-template-columns:105px minmax(0,1fr) 20px;
  align-items:center;
  gap:12px;
  min-height:48px;
  border-bottom:1px solid rgba(51,105,231,.12);
  color:inherit;
  text-decoration:none;
  transition:
    transform .2s ease,
    background .2s ease;
}

.home-connect-news-item:hover{
  transform:translateX(3px);
  background:rgba(245,249,255,.6);
}

.home-connect-news-item time{
  color:#8191ad;
  font-size:11px;
  white-space:nowrap;
}

.home-connect-news-title{
  min-width:0;
  overflow:hidden;
  color:#586984;
  font-size:12px;
  line-height:1.6;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.home-connect-arrow{
  color:#7198c9;
  font-size:15px;
  text-align:right;
  transition:transform .2s ease;
}

.home-connect-news-item:hover .home-connect-arrow{
  transform:translateX(3px);
}

.home-connect-news-empty{
  padding:55px 10px;
  color:#8191ad;
  font-size:13px;
  text-align:center;
}


/* =========================================================
   RIGHT CARDS
========================================================= */

.home-connect-links{
  position:relative;
  display:grid;
  grid-template-rows:1fr 1fr 1fr;
  gap:10px;
}

.home-connect-card{
  position:relative;
  display:flex;
  align-items:center;
  min-height:88px;
  padding:12px 58px 12px 20px;
  overflow:hidden;
  border:1px solid rgba(80,105,150,.12);
  border-radius:17px;
  color:inherit;
  text-decoration:none;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.home-connect-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(62,91,140,.08);
}

.home-connect-line{
  background:#f0fbf5;
}

.home-connect-instagram{
  background:#fff3f7;
}

.home-connect-contact{
  background:#f6f2ff;
}

.home-connect-icon{
  flex:0 0 42px;
  width:42px;
  height:42px;
  margin-right:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:rgba(255,255,255,.9);
  font-size:11px;
  font-weight:900;
}

.home-connect-line .home-connect-icon{
  color:#06b755;
}

.home-connect-instagram .home-connect-icon{
  color:#fb4f91;
  font-size:20px;
}

.home-connect-contact .home-connect-icon{
  color:#7657dc;
  font-size:18px;
}

.home-connect-card-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.home-connect-card-text strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  font-weight:500;
  line-height:1.25;
}

.home-connect-line .home-connect-card-text strong{
  color:#159954;
}

.home-connect-instagram .home-connect-card-text strong{
  color:#ed4f83;
}

.home-connect-contact .home-connect-card-text strong{
  color:#7657dc;
}

.home-connect-card-text small{
  margin-top:3px;
  color:#75829b;
  font-size:10px;
}

.home-connect-card-arrow{
  position:absolute;
  right:20px;
  top:50%;
  color:#678ab8;
  font-size:18px;
  transform:translateY(-50%);
  transition:transform .25s ease;
}

.home-connect-card:hover .home-connect-card-arrow{
  transform:translate(4px,-50%);
}


/* =========================================================
   DECORATION
========================================================= */

.home-connect-star{
  position:absolute;
  pointer-events:none;
  line-height:1;
  animation:home-connect-twinkle 3s ease-in-out infinite;
}

.home-connect-news .star-blue{
  left:28px;
  bottom:72px;
  color:#8ec6ff;
  font-size:17px;
}

.home-connect-news .star-yellow{
  right:44%;
  top:18px;
  color:#ffd96a;
  font-size:13px;
  animation-delay:.8s;
}

.home-connect-links .star-pink{
  right:56%;
  top:-10px;
  color:#ff9cd3;
  font-size:12px;
  animation-delay:1.4s;
}

@keyframes home-connect-twinkle{
  0%,100%{
    opacity:.35;
    transform:scale(.8) rotate(0deg);
  }

  50%{
    opacity:1;
    transform:scale(1.2) rotate(20deg);
  }
}


/* =========================================================
   HOME CONNECT MOBILE
========================================================= */

@media(max-width:760px){

  .home-connect{
    padding:78px 18px 88px;
  }

  .home-connect-inner{
    grid-template-columns:1fr;
    gap:14px;
  }

  .home-connect-news{
    min-height:0;
    padding:24px 20px;
  }

  .home-connect-news-heading{
    align-items:flex-end;
  }

  .home-connect-news-heading h2{
    font-size:25px;
  }

  .home-connect-news-item{
    grid-template-columns:86px minmax(0,1fr) 18px;
    gap:8px;
    min-height:54px;
  }

  .home-connect-news-item time{
    font-size:10px;
  }

  .home-connect-news-title{
    font-size:11px;
  }

  .home-connect-links{
    grid-template-rows:none;
    gap:10px;
  }

  .home-connect-card{
    min-height:82px;
    padding:10px 52px 10px 16px;
  }

  .home-connect-icon{
    flex-basis:40px;
    width:40px;
    height:40px;
    margin-right:13px;
  }

}

/* =========================================================
   SOCIAL QR MODAL
   ========================================================= */

body.social-qr-modal-open{
  overflow:hidden !important;
}

.social-qr-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
}

.social-qr-modal.is-open{
  display:flex !important;
}

.social-qr-modal-backdrop{
  position:absolute !important;
  inset:0 !important;
  background:rgba(35,45,75,.35) !important;
  backdrop-filter:blur(3px) !important;
  -webkit-backdrop-filter:blur(3px) !important;
}

.social-qr-modal-dialog{
  position:relative !important;
  z-index:1 !important;
  width:min(360px,92vw) !important;
  padding:28px 26px 24px !important;
  border-radius:24px !important;
  background:#fff !important;
  box-shadow:0 18px 60px rgba(50,65,100,.22) !important;
  text-align:center !important;
}

.social-qr-modal-close{
  position:absolute !important;
  top:8px !important;
  right:12px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  font-size:28px !important;
  line-height:1 !important;
  color:#8993a5 !important;
  cursor:pointer !important;
}

.social-qr-modal-title{
  font-size:22px !important;
  font-weight:800 !important;
  color:#263c79 !important;
}

.social-qr-modal-subtitle{
  margin-top:4px !important;
  font-size:12px !important;
  color:#7a869a !important;
}

.social-qr-modal-image{
  display:block !important;
  width:220px !important;
  height:220px !important;
  object-fit:contain !important;
  margin:16px auto 10px !important;
}

.social-qr-modal-note{
  margin:0 0 15px !important;
  font-size:11px !important;
  color:#7b8595 !important;
}

.social-qr-modal-action{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:170px !important;
  min-height:40px !important;
  padding:8px 18px !important;
  border-radius:999px !important;
  text-decoration:none !important;
  font-size:12px !important;
  font-weight:800 !important;
  color:#fff !important;
  background:#3f79d9 !important;
}

.social-qr-modal-action[hidden]{
  display:none !important;
}

@media(max-width:560px){

  .social-qr-modal-dialog{
    width:min(390px,94vw) !important;
    padding:30px 20px 22px !important;
  }

  .social-qr-modal-image{
    width:min(280px,78vw) !important;
    height:min(280px,78vw) !important;
    margin-top:18px !important;
  }

  .social-qr-modal-note{
    font-size:12px !important;
  }

}

/* =========================================================
   HOME CONNECT - QR thumbnail
   ========================================================= */

.home-connect-card .home-connect-qr{
  display:block;
  flex:0 0 64px;
  width:64px;
  height:64px;
  margin-left:auto;
  margin-right:28px;
  padding:3px;
  border-radius:8px;
  background:#fff;
  object-fit:contain;
  box-shadow:0 3px 12px rgba(60,80,120,.08);
}

@media(max-width:560px){

  .home-connect-card .home-connect-qr{
    flex-basis:58px;
    width:58px;
    height:58px;
    margin-right:22px;
  }

}


/* ==========================================================================
   HOME SOCIAL
   Instagram / Threads
   ========================================================================== */

.home-social {
    position: relative;
    padding: 72px 24px 82px;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 18%, rgba(180, 218, 255, .22), transparent 28%),
        radial-gradient(circle at 92% 82%, rgba(255, 190, 229, .18), transparent 30%),
        #fff;
}

.home-social-inner {
    width: min(820px, 100%);
    margin: 0 auto;
}

.home-social-heading {
    margin-bottom: 26px;
    text-align: center;
}

.home-social-heading h2 {
    margin: 6px 0 8px;
    color: #34466f;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.3;
}

.home-social-heading p {
    margin: 0;
    color: #7b879c;
    font-size: 13px;
    line-height: 1.8;
}

.home-social-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.home-social-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid #e1e8f4;
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            rgba(251, 253, 255, .98),
            rgba(255, 247, 252, .98)
        );
    box-shadow: 0 10px 28px rgba(61, 93, 148, .08);
}

.home-social-panel-heading {
    margin: 0 0 15px;
    text-align: center;
}

.home-social-panel-heading span {
    display: block;
    color: #8b91ad;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}

.home-social-panel-heading h3 {
    margin: 4px 0 0;
    color: #34466f;
    font-size: 18px;
}


/* Instagram carousel */

.sp-ig-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
}

.sp-ig-track {
    display: flex;
    transition: transform .38s ease;
    will-change: transform;
}

.sp-ig-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

.sp-ig-post-link {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #f4f6fa;
}

.sp-ig-post-media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.sp-ig-post-meta {
    padding: 11px 5px 2px;
}

.sp-ig-post-meta time {
    display: block;
    color: #8b91ad;
    font-size: 10px;
    letter-spacing: .08em;
}

.sp-ig-post-meta p {
    display: -webkit-box;
    margin: 6px 0 0;
    overflow: hidden;
    color: #59677d;
    font-size: 12px;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.sp-ig-prev,
.sp-ig-next {
    position: absolute;
    top: 38%;
    z-index: 4;
    display: flex;
    width: 34px;
    height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 3px 12px rgba(30, 50, 90, .16);
    color: #536d99;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.sp-ig-prev {
    left: 10px;
}

.sp-ig-next {
    right: 10px;
}

.sp-ig-dots {
    display: flex;
    margin-top: 13px;
    justify-content: center;
    gap: 7px;
}

.sp-ig-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ccd5e5;
    cursor: pointer;
    transition:
        transform .2s ease,
        background .2s ease;
}

.sp-ig-dots button.is-active {
    background: #708bb8;
    transform: scale(1.3);
}


/* Threads */

.home-threads-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-thread-card {
    position: relative;
    display: block;
    padding: 15px 16px;
    border: 1px solid #e6eaf2;
    border-radius: 15px;
    background: rgba(255, 255, 255, .9);
    color: inherit;
    text-decoration: none;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.home-thread-card:hover {
    transform: translateY(-2px);
    border-color: #d5ddec;
    box-shadow: 0 7px 18px rgba(61, 93, 148, .09);
}

.home-thread-card time {
    display: block;
    margin-bottom: 6px;
    color: #8b91ad;
    font-size: 9px;
    letter-spacing: .08em;
}

.home-thread-card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #536176;
    font-size: 12px;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.home-thread-open {
    display: block;
    margin-top: 8px;
    color: #708bb8;
    font-size: 10px;
    font-weight: 700;
    text-align: right;
}

.home-social-empty {
    margin: 20px 0;
    color: #8b91ad;
    font-size: 12px;
    text-align: center;
}


/* Mobile */

@media (max-width: 700px) {

    .home-social {
        padding: 56px 18px 66px;
    }

    .home-social-heading {
        margin-bottom: 20px;
    }

    .home-social-heading h2 {
        font-size: 25px;
    }

    .home-social-heading p {
        font-size: 12px;
    }

    .home-social-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .home-social-panel {
        padding: 14px;
        border-radius: 19px;
    }

    .sp-ig-prev,
    .sp-ig-next {
        width: 31px;
        height: 31px;
        font-size: 22px;
    }

    .home-thread-card {
        padding: 14px;
    }
}


/* HOME SOCIAL desktop compact */
@media (min-width: 701px) {

    .home-social {
        padding-top: 54px;
        padding-bottom: 60px;
    }

    .home-social-heading {
        margin-bottom: 20px;
    }

    .home-social-panel {
        padding: 14px;
    }

    .home-social-panel-heading {
        margin-bottom: 11px;
    }

    .sp-ig-post-meta {
        padding-top: 8px;
    }

    .sp-ig-post-meta p {
        font-size: 11px;
        line-height: 1.55;
        -webkit-line-clamp: 2;
    }

    .home-threads-list {
        gap: 7px;
    }

    .home-thread-card {
        padding: 11px 13px;
    }

    .home-thread-card time {
        margin-bottom: 4px;
    }

    .home-thread-card p {
        font-size: 11px;
        line-height: 1.55;
        -webkit-line-clamp: 2;
    }

    .home-thread-open {
        margin-top: 5px;
        font-size: 9px;
    }
}


/* ==========================================================================
   HOME CLOSING MESSAGE
   ========================================================================== */

.home-closing {
    position: relative;
    padding: 105px 24px 110px;
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(circle at 12% 30%, rgba(125, 190, 255, .22), transparent 32%),
        radial-gradient(circle at 88% 68%, rgba(255, 151, 218, .22), transparent 34%),
        linear-gradient(
            135deg,
            #eef7ff 0%,
            #f6f1ff 48%,
            #fff0f8 100%
        );
}

.home-closing::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 25% 20%, rgba(255,255,255,.95) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 28%, rgba(255,255,255,.85) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 18% 78%, rgba(255,255,255,.8) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 84% 82%, rgba(255,255,255,.9) 0 2px, transparent 3px);
}

.home-closing-inner {
    position: relative;
    z-index: 2;
    width: min(760px, 100%);
    margin: 0 auto;
}

.home-closing-kicker {
    display: block;
    margin-bottom: 18px;
    color: #7d8eae;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .28em;
}

.home-closing h2 {
    margin: 0 0 30px;
    font-size: clamp(29px, 4vw, 43px);
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: .04em;
}

.home-closing h2 span {
    display: block;
    background: linear-gradient(
        90deg,
        #3369e7 0%,
        #806ee8 48%,
        #fb00c0 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-closing p {
    margin: 8px 0 0;
    color: #687790;
    font-size: 13px;
    line-height: 2;
    letter-spacing: .03em;
}

.home-closing-star {
    position: absolute;
    z-index: 1;
    line-height: 1;
    pointer-events: none;
    animation: homeClosingTwinkle 3.4s ease-in-out infinite;
}

.home-closing-star-1 {
    top: 21%;
    left: 11%;
    color: #5b8ff0;
    font-size: 25px;
}

.home-closing-star-2 {
    top: 33%;
    right: 13%;
    color: #f47ac4;
    font-size: 31px;
    animation-delay: .8s;
}

.home-closing-star-3 {
    bottom: 20%;
    left: 19%;
    color: #9b82e9;
    font-size: 17px;
    animation-delay: 1.5s;
}

.home-closing-star-4 {
    right: 22%;
    bottom: 16%;
    color: #6aa7ed;
    font-size: 20px;
    animation-delay: 2.1s;
}

@keyframes homeClosingTwinkle {
    0%,
    100% {
        opacity: .35;
        transform: scale(.85) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.18) rotate(10deg);
    }
}

@media (max-width: 700px) {

    .home-closing {
        padding: 78px 22px 84px;
    }

    .home-closing-kicker {
        margin-bottom: 15px;
        font-size: 9px;
    }

    .home-closing h2 {
        margin-bottom: 24px;
        font-size: 27px;
        line-height: 1.7;
    }

    .home-closing p {
        font-size: 12px;
        line-height: 1.9;
    }

    .home-closing-star-1 {
        left: 6%;
    }

    .home-closing-star-2 {
        right: 6%;
    }

    .home-closing-star-3 {
        left: 9%;
    }

    .home-closing-star-4 {
        right: 10%;
    }
}


/* HOME CLOSING compact final */
.home-closing {
    padding: 54px 24px 58px;
}

.home-closing-kicker {
    display: none;
}

.home-closing h2 {
    display: flex;
    margin: 0 0 14px;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 .55em;
    font-size: clamp(20px, 2.2vw, 27px);
    line-height: 1.5;
    letter-spacing: .03em;
}

.home-closing h2 span {
    display: inline;
}

.home-closing p {
    margin: 2px 0 0;
    font-size: 10px;
    line-height: 1.65;
}

@media (max-width: 700px) {

    .home-closing {
        padding: 52px 20px 56px;
    }

    .home-closing h2 {
        display: block;
        margin-bottom: 18px;
        font-size: 23px;
        line-height: 1.65;
    }

    .home-closing h2 span {
        display: block;
    }

    .home-closing p {
        font-size: 10px;
        line-height: 1.75;
    }
}


/* ==========================================================================
   SITE FOOTER
   ========================================================================== */

.site-footer {
    padding: 20px 24px 22px;
    border-top: 1px solid rgba(210, 220, 238, .55);
    background: #fff;
    text-align: center;
}

.site-footer p {
    margin: 0;
    color: #9aa6b8;
    font-size: 9px;
    line-height: 1.6;
    letter-spacing: .02em;
}

@media (max-width: 700px) {

    .site-footer {
        padding: 18px 16px 20px;
    }

    .site-footer p {
        font-size: 8px;
    }
}


/* ==========================================================================
   HOME ABOUT US - FINAL
   ========================================================================== */

.intro {
    position: relative;
    padding: 42px 24px 68px;
    overflow: hidden;
}

.intro .section-inner {
    position: relative;
    z-index: 2;
    width: min(760px, 100%);
}

.intro .section-kicker {
    margin-bottom: 8px;
    font-size: 9px;
}

.intro h2 {
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.25;
}

.intro-lead {
    margin: 20px 0 0 !important;
    color: #3369e7;
    font-size: clamp(20px, 2.5vw, 27px) !important;
    font-weight: 700;
    line-height: 1.7 !important;
    letter-spacing: .04em;
}

.intro-lead span {
    background: linear-gradient(
        90deg,
        #3369e7 0%,
        #8b72e8 48%,
        #fb00c0 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.intro-text {
    margin: 15px 0 0 !important;
    color: #69778d;
    font-size: 12px !important;
    line-height: 1.9 !important;
}

.intro-button {
    display: inline-flex;
    margin-top: 24px;
    padding: 11px 18px;
    align-items: center;
    gap: 14px;
    border: 1px solid #dbe4f2;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 5px 16px rgba(61,93,148,.06);
    color: #536d99;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.intro-button span {
    color: #fb00c0;
    transition: transform .2s ease;
}

.intro-button:hover {
    transform: translateY(-2px);
    border-color: #cbd9ed;
    box-shadow: 0 8px 20px rgba(61,93,148,.1);
}

.intro-button:hover span {
    transform: translateX(3px);
}

.intro-star {
    position: absolute;
    pointer-events: none;
    line-height: 1;
    animation: introStarTwinkle 3.6s ease-in-out infinite;
}

.intro-star-blue {
    top: 26%;
    left: 12%;
    color: #6697ef;
    font-size: 19px;
}

.intro-star-pink {
    right: 13%;
    bottom: 25%;
    color: #ef75bd;
    font-size: 24px;
    animation-delay: 1.3s;
}

@keyframes introStarTwinkle {
    0%,
    100% {
        opacity: .3;
        transform: scale(.85) rotate(0deg);
    }

    50% {
        opacity: .9;
        transform: scale(1.15) rotate(9deg);
    }
}

@media (max-width: 760px) {

    .intro {
        padding: 40px 20px 58px;
    }

    .intro h2 {
        font-size: 30px;
    }

    .intro-lead {
        margin-top: 18px !important;
        font-size: 20px !important;
        line-height: 1.65 !important;
    }

    .intro-text {
        margin-top: 13px !important;
        font-size: 11px !important;
        line-height: 1.85 !important;
    }

    .intro-button {
        margin-top: 21px;
        padding: 10px 16px;
        font-size: 10px;
    }

    .intro-star-blue {
        top: 19%;
        left: 6%;
        font-size: 15px;
    }

    .intro-star-pink {
        right: 7%;
        bottom: 19%;
        font-size: 18px;
    }
}


/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.contact-page {
    min-height: 100vh;
    background: #fff;
}


/* HERO
   -------------------------------------------------------------------------- */

.contact-hero {
    position: relative;
    padding: 78px 24px 58px;
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(circle at 15% 30%, rgba(190,221,255,.26), transparent 28%),
        radial-gradient(circle at 85% 70%, rgba(255,192,230,.20), transparent 30%),
        #fff;
}

.contact-hero-inner {
    position: relative;
    z-index: 2;
    width: min(760px, 100%);
    margin: 0 auto;
}

.contact-hero .section-kicker {
    margin-bottom: 9px;
}

.contact-hero h1 {
    margin: 0;
    background: linear-gradient(
        90deg,
        #3369e7 0%,
        #786fe9 50%,
        #fb00c0 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.3;
    letter-spacing: .05em;
}

.contact-hero p {
    margin: 16px 0 0;
    color: #718097;
    font-size: 12px;
    line-height: 1.9;
}

.contact-hero-star {
    position: absolute;
    line-height: 1;
    pointer-events: none;
    animation: contactStarTwinkle 3.6s ease-in-out infinite;
}

.contact-hero-star-1 {
    top: 36%;
    left: 13%;
    color: #6f9ff0;
    font-size: 18px;
}

.contact-hero-star-2 {
    right: 14%;
    bottom: 24%;
    color: #ef75bd;
    font-size: 23px;
    animation-delay: 1.2s;
}

@keyframes contactStarTwinkle {
    0%,
    100% {
        opacity: .3;
        transform: scale(.85) rotate(0deg);
    }

    50% {
        opacity: .9;
        transform: scale(1.15) rotate(10deg);
    }
}


/* CONTENT
   -------------------------------------------------------------------------- */

.contact-content {
    padding: 12px 24px 82px;
    background:
        radial-gradient(circle at 8% 55%, rgba(206,226,255,.16), transparent 24%),
        radial-gradient(circle at 92% 78%, rgba(255,205,235,.13), transparent 25%),
        #fff;
}

.contact-form-wrap {
    width: min(720px, 100%);
    margin: 0 auto;
    padding: 30px 34px 34px;
    border: 1px solid #e5ebf4;
    border-radius: 22px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 36px rgba(62,88,133,.07);
}


/* GUIDE
   -------------------------------------------------------------------------- */

.contact-guide {
    margin-bottom: 27px;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf1f7;
}

.contact-guide p {
    margin: 0;
    color: #68778e;
    font-size: 11px;
    line-height: 1.8;
}

.contact-guide .contact-required-note {
    margin-top: 6px;
    color: #9aa5b5;
    font-size: 9px;
}

.contact-required-note span {
    color: #fb00c0;
    font-weight: 700;
}


/* FIELDS
   -------------------------------------------------------------------------- */

.contact-field {
    margin-top: 22px;
}

.contact-field:first-of-type {
    margin-top: 0;
}

.contact-field label {
    display: flex;
    margin-bottom: 8px;
    align-items: center;
    gap: 8px;
    color: #4f6078;
    font-size: 11px;
    font-weight: 700;
}

.contact-required,
.contact-optional {
    display: inline-flex;
    padding: 2px 7px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 8px;
    line-height: 1.5;
}

.contact-required {
    background: rgba(251,0,192,.07);
    color: #e500af;
}

.contact-optional {
    background: #f2f5f9;
    color: #8793a5;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dfe6f0;
    border-radius: 11px;
    outline: none;
    background: #fbfcfe;
    color: #42516a;
    font: inherit;
    font-size: 12px;
    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.contact-field input,
.contact-field select {
    height: 44px;
    padding: 0 13px;
}

.contact-field textarea {
    min-height: 160px;
    padding: 12px 13px;
    line-height: 1.8;
    resize: vertical;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: rgba(51,105,231,.48);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(51,105,231,.06);
}


/* AGREEMENT
   -------------------------------------------------------------------------- */

.contact-agree {
    margin-top: 25px;
    padding: 15px 17px;
    border-radius: 11px;
    background: #f8faff;
}

.contact-agree label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.contact-agree input {
    width: 15px;
    height: 15px;
    margin: 2px 0 0;
    accent-color: #3369e7;
    flex: 0 0 auto;
}

.contact-agree span {
    color: #68778e;
    font-size: 10px;
    line-height: 1.7;
}


/* SUBMIT
   -------------------------------------------------------------------------- */

.contact-submit {
    margin-top: 28px;
    text-align: center;
}

.contact-submit button {
    display: inline-flex;
    min-width: 210px;
    padding: 12px 21px;
    border: 1px solid #d7e1f0;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(61,93,148,.07);
    color: #526d9c;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.contact-submit button span {
    color: #fb00c0;
    transition: transform .2s ease;
}

.contact-submit button:hover {
    transform: translateY(-2px);
    border-color: #c5d5eb;
    box-shadow: 0 9px 23px rgba(61,93,148,.11);
}

.contact-submit button:hover span {
    transform: translateX(3px);
}


/* MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {

    .contact-hero {
        padding: 62px 20px 44px;
    }

    .contact-hero h1 {
        font-size: 29px;
    }

    .contact-hero p {
        margin-top: 13px;
        font-size: 11px;
    }

    .contact-hero-star-1 {
        left: 7%;
        font-size: 14px;
    }

    .contact-hero-star-2 {
        right: 8%;
        font-size: 17px;
    }

    .contact-content {
        padding: 8px 16px 58px;
    }

    .contact-form-wrap {
        padding: 24px 18px 27px;
        border-radius: 17px;
    }

    .contact-guide {
        margin-bottom: 23px;
    }

    .contact-field {
        margin-top: 20px;
    }

    .contact-field input,
    .contact-field select {
        height: 46px;
        font-size: 13px;
    }

    .contact-field textarea {
        min-height: 180px;
        font-size: 13px;
    }

    .contact-submit button {
        width: 100%;
        min-height: 46px;
    }
}



/*
|--------------------------------------------------------------------------
| CONTACT - ERROR / CONFIRM
|--------------------------------------------------------------------------
*/

.contact-error {
    margin: 7px 2px 0;
    color: #e44886;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
}

.contact-error-agree {
    margin-top: -4px;
    margin-bottom: 16px;
}


/* CONFIRM */

.contact-confirm {
    width: 100%;
}

.contact-confirm-heading {
    margin-bottom: 24px;
    text-align: center;
}

.contact-confirm-heading h2 {
    margin: 0;
    color: #3369e7;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}

.contact-confirm-heading p {
    margin: 8px 0 0;
    color: #7c899d;
    font-size: 11px;
    line-height: 1.8;
}

.contact-confirm-list {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(205, 217, 236, .85);
    border-radius: 18px;
    background: #fff;
}

.contact-confirm-row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    margin: 0;
    border-bottom: 1px solid rgba(218, 226, 239, .75);
}

.contact-confirm-row:last-child {
    border-bottom: 0;
}

.contact-confirm-row dt,
.contact-confirm-row dd {
    margin: 0;
    padding: 15px 18px;
    font-size: 11px;
    line-height: 1.8;
}

.contact-confirm-row dt {
    display: flex;
    align-items: center;
    color: #53647d;
    font-weight: 700;
    background:
        linear-gradient(
            135deg,
            rgba(230, 240, 255, .55),
            rgba(255, 232, 247, .38)
        );
}

.contact-confirm-row dd {
    min-width: 0;
    color: #526077;
    overflow-wrap: anywhere;
}

.contact-confirm-message dd {
    white-space: normal;
}

.contact-confirm-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}

.contact-confirm-actions form {
    margin: 0;
}

.contact-back-button,
.contact-send-button {
    min-height: 42px;
    padding: 0 20px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.contact-back-button {
    border: 1px solid rgba(192, 205, 225, .95);
    color: #6e7d92;
    background: #fff;
}

.contact-send-button {
    border: 0;
    color: #fff;
    background:
        linear-gradient(
            100deg,
            #3369e7 0%,
            #7867e9 52%,
            #e85ab6 100%
        );
    box-shadow: 0 8px 22px rgba(90, 102, 210, .18);
}

.contact-back-button:hover,
.contact-send-button:hover {
    transform: translateY(-2px);
}

.contact-send-button span {
    margin-left: 7px;
}


/* MOBILE */

@media (max-width: 700px) {

    .contact-confirm-heading {
        margin-bottom: 20px;
    }

    .contact-confirm-heading h2 {
        font-size: 18px;
    }

    .contact-confirm-row {
        display: block;
    }

    .contact-confirm-row dt {
        padding: 10px 14px;
    }

    .contact-confirm-row dd {
        padding: 12px 14px 15px;
    }

    .contact-confirm-actions {
        flex-direction: column-reverse;
        gap: 9px;
        margin-top: 22px;
    }

    .contact-confirm-actions form {
        width: 100%;
    }

    .contact-back-button,
    .contact-send-button {
        width: 100%;
    }
}


/*
|--------------------------------------------------------------------------
| CONTACT - COMPLETE
|--------------------------------------------------------------------------
*/

.contact-complete {
    position: relative;
    padding: 26px 18px 12px;
    text-align: center;
}

.contact-complete-star {
    display: inline-block;
    margin-bottom: 10px;
    color: #e85ab6;
    font-size: 22px;
    animation: contactCompleteTwinkle 2.4s ease-in-out infinite;
}

.contact-complete h2 {
    margin: 0;
    background:
        linear-gradient(
            100deg,
            #3369e7 0%,
            #7867e9 52%,
            #e85ab6 100%
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .03em;
}

.contact-complete-lead {
    margin: 18px 0 0;
    color: #53647d;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
}

.contact-complete-text {
    margin: 10px 0 0;
    color: #7c899d;
    font-size: 10px;
    line-height: 1.9;
}

.contact-complete-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 24px;
    padding: 0 24px;
    border: 1px solid rgba(190, 204, 226, .9);
    border-radius: 999px;
    background: #fff;
    color: #53647d;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.contact-complete-home span {
    margin-left: 8px;
    color: #e85ab6;
}

.contact-complete-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(77, 101, 160, .12);
}

@keyframes contactCompleteTwinkle {
    0%,
    100% {
        opacity: .45;
        transform: scale(.85) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.15) rotate(8deg);
    }
}


/* SPAM HONEYPOT */

.contact-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


@media (max-width: 700px) {

    .contact-complete {
        padding: 20px 4px 8px;
    }

    .contact-complete h2 {
        font-size: 22px;
    }

    .contact-complete-home {
        width: 100%;
        margin-top: 22px;
    }
}