@charset "UTF-8";
/* ===============================
	ポップ強化（joke.css の上に重ねる）
=============================== */
:root {
  --j-pink: #ff3d8b;
  --j-purple: #8a5cff;
  --j-sky: #3ec6ff;
  --j-yellow: #ffd23f;
  --j-mint: #2ee6a6;
  --j-ink: #2b2350;
}
body {
  background-color: #fffaf2;
  background-image:
    radial-gradient(circle at 20px 20px, rgba(255, 61, 139, .22) 5px, transparent 6px),
    radial-gradient(circle at 70px 60px, rgba(62, 198, 255, .22) 7px, transparent 8px),
    radial-gradient(circle at 110px 25px, rgba(255, 210, 63, .35) 4px, transparent 5px),
    radial-gradient(circle at 40px 100px, rgba(138, 92, 255, .18) 6px, transparent 7px);
  background-size: 140px 130px;
}

/* ヘッダー：虹のライン＋カラフルなナビ */
#header { border-bottom: 0; position: relative; }
#header:after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; z-index: 6;
  background: linear-gradient(90deg, var(--j-pink), var(--j-yellow), var(--j-mint), var(--j-sky), var(--j-purple), var(--j-pink));
  background-size: 200% 100%; animation: j-slide 6s linear infinite;
}
#gNavi > ul > li > a { padding: 6px 14px !important; margin: 2px; color: #fff !important; text-shadow: 0 2px 0 rgba(0, 0, 0, .15); box-shadow: 0 4px 0 rgba(0, 0, 0, .12); transition: transform .15s; }
#gNavi > ul > li:nth-child(1) > a { background: var(--j-pink); }
#gNavi > ul > li:nth-child(2) > a { background: var(--j-sky); }
#gNavi > ul > li:nth-child(3) > a { background: var(--j-purple); }
#gNavi > ul > li:nth-child(4) > a { background: #19c48a; }
#gNavi > ul > li:nth-child(5) > a { background: #ff8a3d; }
#gNavi > ul > li > a:hover, #gNavi > ul > li > a:focus { transform: translateY(-3px) rotate(-3deg); }
#gNavi > ul > li > a:after { display: none !important; }
#header-fixed { border-bottom: 0; box-shadow: 0 4px 0 var(--j-yellow); }

/* テロップ */
.pop-ticker { overflow: hidden; background: var(--j-ink); color: #fff; font-family: var(--j-pop); font-size: 15px; white-space: nowrap; position: relative; z-index: 5; }
.pop-ticker-track { display: inline-flex; gap: 32px; padding: 8px 0; animation: j-ticker 28s linear infinite; }
.pop-ticker-track span:nth-child(5n+1) { color: var(--j-yellow); }
.pop-ticker-track span:nth-child(5n+2) { color: #ff8fc0; }
.pop-ticker-track span:nth-child(5n+3) { color: #8be8ff; }
.pop-ticker-track span:nth-child(5n+4) { color: #b9f7df; }

/* メインビジュアル */
#mainvisual.joke-mv { background: linear-gradient(160deg, #3a1fa8 0%, #8a5cff 30%, #ff3d8b 65%, #ffb03d 100%); }
.mv-title {
  color: #fff; -webkit-text-stroke: 2px var(--j-ink); paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--j-pink), 8px 8px 0 var(--j-yellow), 0 14px 24px rgba(43, 35, 80, .5);
}
.mv-title .wobble { display: inline-block; animation: j-wobble 2.4s ease-in-out infinite; }
.mv-title .wobble.w2 { animation-delay: .3s; }
.mv-kicker { display: inline-block; background: var(--j-yellow); color: var(--j-ink) !important; padding: 4px 14px; border-radius: 999px; transform: rotate(-3deg); box-shadow: 0 4px 0 #e0a800; }
.mv-confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: j-fall 7s linear infinite; z-index: 1; }
.mv-confetti i:nth-child(5n+1) { background: var(--j-yellow); }
.mv-confetti i:nth-child(5n+2) { background: var(--j-mint); }
.mv-confetti i:nth-child(5n+3) { background: #fff; }
.mv-confetti i:nth-child(5n+4) { background: var(--j-sky); }
.mv-confetti i:nth-child(5n+5) { background: #ff8fc0; }
.mv-confetti i:nth-child(1) { left: 4%; animation-delay: 0s; }
.mv-confetti i:nth-child(2) { left: 11%; animation-delay: 1.8s; }
.mv-confetti i:nth-child(3) { left: 18%; animation-delay: 3.6s; }
.mv-confetti i:nth-child(4) { left: 25%; animation-delay: .9s; }
.mv-confetti i:nth-child(5) { left: 33%; animation-delay: 4.5s; }
.mv-confetti i:nth-child(6) { left: 40%; animation-delay: 2.7s; }
.mv-confetti i:nth-child(7) { left: 48%; animation-delay: 5.4s; }
.mv-confetti i:nth-child(8) { left: 56%; animation-delay: .4s; }
.mv-confetti i:nth-child(9) { left: 63%; animation-delay: 3.1s; }
.mv-confetti i:nth-child(10) { left: 70%; animation-delay: 6.2s; }
.mv-confetti i:nth-child(11) { left: 77%; animation-delay: 1.3s; }
.mv-confetti i:nth-child(12) { left: 84%; animation-delay: 4s; }
.mv-confetti i:nth-child(13) { left: 91%; animation-delay: 2.2s; }
.mv-confetti i:nth-child(14) { left: 97%; animation-delay: 5s; }
.mascot .say {
  position: relative; margin-bottom: 6px; font-family: var(--j-pop); font-size: 14px; color: var(--j-ink); white-space: nowrap;
  background: #fff; border: 3px solid var(--j-ink); border-radius: 16px; padding: 4px 10px; box-shadow: 3px 3px 0 var(--j-ink);
  animation: j-pop-in 2.4s ease-in-out infinite;
}
.mascot .say:after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 12px; height: 12px; background: #fff; border-right: 3px solid var(--j-ink); border-bottom: 3px solid var(--j-ink); transform: translateX(-50%) rotate(45deg); }
.mv-pipe .say { animation-delay: 1.2s; }

/* 下層の見出し帯 */
.main_ttl, body.drainage .main_ttl, body.company .main_ttl, body.contact .main_ttl {
  background:
    radial-gradient(circle at 15% 30%, rgba(255, 255, 255, .25) 0 18px, transparent 19px),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .2) 0 26px, transparent 27px),
    linear-gradient(120deg, #8a5cff, #ff3d8b 55%, #ffb03d);
}
.main_ttl h2 .en { -webkit-text-stroke: 2px var(--j-ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--j-yellow); }

/* 見出しをステッカー風に */
.hh_ttl_a, .hh_style_a {
  display: table !important; margin-left: auto !important; margin-right: auto !important;
  background: #fff; border: 3px solid var(--j-ink); border-radius: 18px;
  padding: 6px 22px !important; box-shadow: 5px 5px 0 var(--j-yellow); transform: rotate(-1.5deg);
}
.hh_ttl_a:before, .hh_style_a:before, .hh_style_a:after { display: none !important; }

/* 写真をかたむけたカード風に */
.figure_image { transition: transform .2s; }
.figure_image img { border: 6px solid #fff !important; box-shadow: 6px 6px 0 var(--j-sky) !important; }
.row > div:nth-child(odd) .figure_image { transform: rotate(-2deg); }
.row > div:nth-child(even) .figure_image { transform: rotate(2deg); }
.row > div:nth-child(3n) .figure_image img { box-shadow: 6px 6px 0 var(--j-pink) !important; }
.row > div:nth-child(3n+2) .figure_image img { box-shadow: 6px 6px 0 var(--j-yellow) !important; }
.figure_image:hover { transform: rotate(0) scale(1.05); }

/* トップの業務カード */
.home_business .in_box .columns .home_figures { transition: transform .2s; border-width: 6px; }
.home_business .in_box .columns:nth-child(1) .home_figures { border-color: var(--j-yellow); transform: rotate(-2deg); box-shadow: 8px 8px 0 var(--j-pink); }
.home_business .in_box .columns:nth-child(2) .home_figures { border-color: var(--j-mint); transform: rotate(2deg); box-shadow: -8px 8px 0 var(--j-sky); }
.home_business .in_box .columns .home_figures:hover { transform: rotate(0) scale(1.04); }

/* ボタン */
.btn-primary { background: var(--j-pink); border: 3px solid var(--j-ink) !important; box-shadow: 4px 4px 0 var(--j-ink); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--j-purple); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--j-ink); }
.btn-warning { border: 3px solid var(--j-ink) !important; box-shadow: 4px 4px 0 var(--j-ink); }

/* フッター：波の上辺 */
#footer { background: linear-gradient(180deg, #8a5cff, #3a1fa8); }
#footer .footnavi { border-top: 0; box-shadow: inset 0 -6px 0 var(--j-yellow); }
#footer .footcontent { padding-top: 56px; }
#footer .footcontent:before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 24px;
  background: radial-gradient(circle at 20px -6px, #fff 22px, transparent 23px) repeat-x;
  background-size: 40px 24px;
}

/* クリックのキラキラ */
.pop-spark { position: fixed; z-index: 9999; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); animation: j-spark .7s ease-out forwards; }

@keyframes j-slide { to { background-position: 200% 0; } }
@keyframes j-ticker { to { transform: translateX(-50%); } }
@keyframes j-wobble { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.04); } }
@keyframes j-fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(700px) rotate(720deg); opacity: .2; } }
@keyframes j-pop-in { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.1) rotate(3deg); } }
@keyframes j-spark { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; } }
@media (max-width: 767px) {
  .mascot .say { font-size: 11px; padding: 3px 7px; }
  .pop-ticker { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
}