@charset "UTF-8";
/* -------------------------------
	ポップ版：ポップなおとぎ話テーマ
	（既存の screen.css / module.css の上に重ねる）
-------------------------------- */
:root {
  --j-pink: #ff5d8f;
  --j-pink-soft: #ffe1ec;
  --j-purple: #7c4dff;
  --j-lav: #efe6ff;
  --j-sky: #4cc9f0;
  --j-sky-soft: #e3f7ff;
  --j-yellow: #ffd166;
  --j-ink: #2b2350;
  --j-pop: "Mochiy Pop One", "Kosugi Maru", sans-serif;
  --j-round: "Kosugi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}

body {
  font-family: var(--j-round);
  color: var(--j-ink);
  background-color: #fff;
  background-image:
    radial-gradient(circle at 20px 20px, rgba(255, 209, 102, .35) 2px, transparent 3px),
    radial-gradient(circle at 60px 50px, rgba(124, 77, 255, .18) 2px, transparent 3px);
  background-size: 80px 80px;
}
h1, h2, h3, h4, h5, .h3, .h4, .h5 { font-family: var(--j-pop); font-weight: 400; letter-spacing: .02em; }
a { color: var(--j-purple); }

.sample-banner {
  position: relative; z-index: 1000;
  background: linear-gradient(90deg, #ffe1ec, #efe6ff, #e3f7ff);
  color: var(--j-ink); text-align: center; font-size: 13px; padding: 6px 12px;
}

/* ロゴ */
.pop-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.pop-logo .pl-icon { width: 44px; height: auto; animation: j-bob 3s ease-in-out infinite; }
.pop-logo .pl-text { display: flex; flex-direction: column; line-height: 1.1; }
.pop-logo .pl-sub { font-family: var(--j-round); font-size: 12px; color: var(--j-purple); letter-spacing: .2em; }
.pop-logo .pl-main {
  font-family: var(--j-pop); font-size: 26px; letter-spacing: .04em;
  background: linear-gradient(90deg, var(--j-pink), var(--j-purple) 55%, var(--j-sky));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(2px 2px 0 #fff) drop-shadow(0 3px 0 rgba(124, 77, 255, .25));
}
#header .head_pc h1 { margin: 6px 0; }
#header-fixed .logo { line-height: 1; padding-top: 5px; width: auto; }
#header-fixed .pop-logo .pl-icon { width: 30px; }
#header-fixed .pop-logo .pl-sub { font-size: 9px; }
#header-fixed .pop-logo .pl-main { font-size: 17px; }

/* ヘッダー・ナビ */
#header { background: #fff; border-bottom: 4px dotted var(--j-pink); }
#gNavi ul li a { font-family: var(--j-pop); color: var(--j-ink); border-radius: 999px; }
#gNavi ul li a:hover, #gNavi ul li a:focus { color: var(--j-pink); }
#gNavi ul li a:after { background: var(--j-pink) !important; }
#gNavi ul .child ul { border-radius: 16px; overflow: hidden; box-shadow: 0 8px 20px rgba(124, 77, 255, .2); }
#gNavi ul .child ul li a { background: #fff; color: var(--j-ink); border-radius: 0; }
#gNavi ul .child ul li a:hover { background: var(--j-lav); }
#header-fixed { border-bottom: 3px dotted var(--j-pink); }

/* トップのメインビジュアル */
#mainvisual.joke-mv {
  position: relative; overflow: hidden;
  height: auto; min-height: 420px;
  background: linear-gradient(180deg, #2b2a7a 0%, #6b4fd8 38%, #ff9ec4 78%, #ffe1ec 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px 140px;
}
@media (min-width: 1070px) { #mainvisual.joke-mv { height: 620px; } }
.mv-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 10% 20%, #fff, transparent),
    radial-gradient(2px 2px at 30% 10%, #fff, transparent),
    radial-gradient(3px 3px at 55% 25%, #fff59d, transparent),
    radial-gradient(2px 2px at 75% 12%, #fff, transparent),
    radial-gradient(2px 2px at 88% 30%, #fff, transparent),
    radial-gradient(3px 3px at 18% 40%, #fff59d, transparent),
    radial-gradient(2px 2px at 65% 45%, #fff, transparent),
    radial-gradient(2px 2px at 42% 35%, #fff, transparent);
  animation: j-twinkle 3s ease-in-out infinite alternate;
}
.mv-rainbow {
  position: absolute; left: 50%; bottom: -220px; width: 900px; height: 560px; transform: translateX(-50%);
  border-radius: 50%;
  border: 22px solid transparent;
  box-shadow: 0 0 0 18px rgba(255, 93, 143, .55), 0 0 0 36px rgba(255, 209, 102, .55), 0 0 0 54px rgba(76, 201, 240, .5), 0 0 0 72px rgba(124, 77, 255, .4);
  opacity: .8;
}
.mv-tower { position: absolute; bottom: 0; left: 4%; width: 220px; max-width: 34%; opacity: .95; }
.mv-copy { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 640px; }
.mv-kicker { font-family: var(--j-pop); font-size: 15px; letter-spacing: .2em; color: #fff59d; margin-bottom: 10px; }
.mv-title {
  font-family: var(--j-pop); font-size: clamp(34px, 7vw, 68px); line-height: 1.2; margin: 0 0 16px;
  color: #fff; text-shadow: 0 4px 0 var(--j-pink), 0 8px 18px rgba(43, 35, 80, .45);
}
.mv-lead { font-size: 16px; line-height: 1.9; text-shadow: 0 2px 6px rgba(43, 35, 80, .5); }
.mv-drop { position: absolute; z-index: 3; right: 20%; bottom: 8px; width: 130px; max-width: 26%; }
.mv-pipe { position: absolute; z-index: 3; right: 4%; bottom: 8px; width: 150px; max-width: 28%; }
.mv-pipe img { animation-delay: .4s; }
.mv-bubbles i {
  position: absolute; bottom: -30px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, rgba(255, 255, 255, .25) 60%, rgba(255, 255, 255, 0));
  border: 1px solid rgba(255, 255, 255, .7);
  animation: j-rise 9s linear infinite;
}
.mv-bubbles i:nth-child(1) { left: 12%; animation-delay: 0s; }
.mv-bubbles i:nth-child(2) { left: 28%; width: 14px; height: 14px; animation-delay: 2s; }
.mv-bubbles i:nth-child(3) { left: 46%; width: 30px; height: 30px; animation-delay: 4s; }
.mv-bubbles i:nth-child(4) { left: 63%; animation-delay: 1s; }
.mv-bubbles i:nth-child(5) { left: 78%; width: 16px; height: 16px; animation-delay: 5s; }
.mv-bubbles i:nth-child(6) { left: 90%; width: 26px; height: 26px; animation-delay: 3s; }
@media (max-width: 767px) {
  #mainvisual.joke-mv { min-height: 460px; padding-bottom: 150px; }
  .mv-tower { width: 120px; left: 2%; }
  .mv-drop { width: 90px; right: 30%; }
  .mv-pipe { width: 100px; right: 3%; }
  .mv-rainbow { width: 620px; height: 420px; bottom: -200px; }
}

/* マスコット（名前付き） */
.mascot { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mascot img { width: 100%; height: auto; animation: j-bob 2.8s ease-in-out infinite; }
.mascot figcaption {
  font-family: var(--j-pop); font-size: 13px; line-height: 1; white-space: nowrap;
  color: var(--j-ink); background: #fff; border: 2px solid var(--j-pink);
  border-radius: 999px; padding: 5px 10px 4px; box-shadow: 0 3px 0 var(--j-pink-soft);
}
.mascot-pipe figcaption { border-color: var(--j-yellow); box-shadow: 0 3px 0 #ffe9b0; }
.mascot-pipe img { animation-delay: .5s; }

/* 下層ページの見出し帯 */
.main_ttl, body.drainage .main_ttl, body.company .main_ttl, body.contact .main_ttl {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #6b4fd8, #ff7aa8 60%, #ffc46b);
}
.ttl-drop, .ttl-pipe { position: absolute; bottom: 8px; z-index: 1; }
.ttl-drop { left: 6%; width: 80px; }
.ttl-pipe { right: 6%; width: 90px; }
@media (max-width: 767px) {
  .ttl-drop { width: 50px; left: 2%; }
  .ttl-pipe { width: 56px; right: 2%; }
  .ttl-drop figcaption, .ttl-pipe figcaption { font-size: 9px; padding: 3px 6px 2px; }
  .mv-drop figcaption, .mv-pipe figcaption { font-size: 11px; padding: 4px 8px 3px; }
}
.main_ttl h2 { position: relative; z-index: 1; text-shadow: 0 3px 0 rgba(124, 77, 255, .6); }
.main_ttl h2 .en { font-family: var(--j-pop); letter-spacing: .08em; }

/* トップの業務内容 */
.home_business { background: linear-gradient(180deg, var(--j-sky-soft), var(--j-lav)); }
.home_business .in_box .columns .home_figures { border-radius: 28px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 10px 0 var(--j-pink-soft), 0 14px 26px rgba(124, 77, 255, .25); }
.home_business .in_box .columns .home_figures figcaption h3 { font-family: var(--j-pop); text-shadow: 0 3px 0 var(--j-pink); }
.home_business .in_box .columns .home_figures:hover figcaption { background-color: rgba(255, 93, 143, .45); }
.home_recruit { background: linear-gradient(180deg, #fff, var(--j-pink-soft)); }
.home_recruit .en { font-family: var(--j-pop); color: var(--j-pink); }

/* 見出しと写真 */
.hh_ttl_a, .hh_style_a, .hh_ttl_c { color: var(--j-purple) !important; }
.hh_style_a:before, .hh_style_a:after, .hh_style_a.blue:before, .hh_style_a.blue:after, .hh_ttl_a:before { background: var(--j-pink) !important; border-color: var(--j-pink) !important; }
.figure_image img, .storage_wake .images img, img.aligncenter { border-radius: 20px; border: 4px solid #fff; box-shadow: 0 6px 0 var(--j-lav); }
.figure_image figcaption { font-family: var(--j-pop); color: var(--j-purple); }
.text-primary { color: var(--j-pink) !important; }

/* ボタン */
.btn { border-radius: 999px !important; font-family: var(--j-pop); letter-spacing: .04em; }
.btn-primary { background: linear-gradient(90deg, var(--j-pink), var(--j-purple)); border: 0; box-shadow: 0 5px 0 #4b2bb3; }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(90deg, var(--j-purple), var(--j-pink)); transform: translateY(1px); }
.btn-warning { background: var(--j-yellow); border: 0; color: var(--j-ink); box-shadow: 0 5px 0 #e09f00; }
.btn-default { box-shadow: 0 5px 0 #ccc; }

/* フォーム・表 */
.contactform table, .table { border-radius: 16px; overflow: hidden; }
.contactform table th { background: var(--j-lav) !important; }
.form-control { border-radius: 14px; border: 2px solid var(--j-lav); }
.form-control:focus { border-color: var(--j-pink); box-shadow: 0 0 0 3px var(--j-pink-soft); }
.box-padding-a.policy { background: var(--j-sky-soft); }
.contact_tel { background: linear-gradient(120deg, #4b2bb3, #7c4dff 55%, #ff5d8f) !important; color: #fff; }
.contact_tel h3, .contact_tel li, .contact_tel small { color: #fff !important; }

/* フッター */
#footer { background: linear-gradient(180deg, #6b4fd8, #2b2a7a); position: relative; }
#footer .footnavi { background: #fff; border-top: 4px dotted var(--j-pink); }
#footer .footnavi a { font-family: var(--j-pop); color: var(--j-purple); }
#footer .footcontent { position: relative; }
.foot-mascots { display: flex; justify-content: center; gap: 28px; margin-bottom: 18px; }
.foot-mascots .mascot { width: 80px; }
#footer .footcontent h3 { font-family: var(--j-pop); color: #fff59d; }
#pagetop img { filter: hue-rotate(250deg) saturate(1.4); }

@keyframes j-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes j-twinkle { from { opacity: .55; } to { opacity: 1; } }
@keyframes j-rise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-560px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; }
}