:root{
  --tools-pink:#ff4f98;
  --tools-orange:#ff9a3c;
  --tools-yellow:#ffd93d;
  --tools-green:#6bcb77;
  --tools-teal:#0eb8b2;
  --tools-blue:#2478ff;
  --tools-purple:#7c4dff;
  --tools-navy:#10234d;
  --tools-muted:#53627f;
  --tools-line:#dbeaff;
}

.asobiba-tools-header,
.asobiba-tools-footer{
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}

/* ===== 共通ヘッダー ===== */
.asobiba-tools-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(36,120,255,.10);
  box-shadow:0 8px 22px rgba(28,62,120,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.asobiba-tools-header__inner{
  max-width:1365px;
  min-height:72px;
  margin:0 auto;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.asobiba-tools-logo{
  display:inline-flex;
  align-items:center;
  gap:0;
  text-decoration:none;
}

.asobiba-tools-logo__text{
  font-weight:900;
  font-size:clamp(24px,3.3vw,42px);
  line-height:1;
  letter-spacing:-.055em;
  white-space:nowrap;
  background:linear-gradient(90deg,#0eb8b2 0%,#2478ff 42%,#7c4dff 82%,#ff4f98 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.95));
}

.asobiba-tools-header__nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.asobiba-tools-header__nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  border-radius:999px;
  border:2px solid #e5efff;
  background:#fff;
  color:#304263;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  box-shadow:0 5px 13px rgba(36,120,255,.06);
  transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
}

.asobiba-tools-header__nav a:hover{
  background:#f8fbff;
  border-color:#cfe0ff;
  transform:translateY(-1px);
}

.asobiba-tools-header__nav a.is-active{
  background:linear-gradient(90deg,#0eb8b2,#2478ff);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 18px rgba(36,120,255,.20);
}

.asobiba-tools-header__nav a.is-world:hover{
  background:linear-gradient(90deg,#ff4f98 0%,#ff8a00 24%,#6bcb77 50%,#19a7ff 76%,#5146d8 100%);
  color:#fff;
  border-color:transparent;
}

/* ===== 共通フッター ===== */
.asobiba-tools-footer{
  margin-top:70px;
  padding:38px 20px 28px;
  color:#8a96ad;
  font-size:12px;
  background:
    radial-gradient(circle at 12% 20%,rgba(36,120,255,.10),transparent 20%),
    radial-gradient(circle at 88% 18%,rgba(255,79,152,.10),transparent 20%),
    linear-gradient(180deg,#ffffff 0%,#eef6ff 100%);
  border-top:1px solid #dbe8ff;
}

.asobiba-tools-footer__inner{
  max-width:1365px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:24px;
}

.asobiba-tools-footer__main{
  text-align:left;
}

.asobiba-tools-footer__brand{
  display:inline-block;
  margin-bottom:8px;
  text-decoration:none;
}

.asobiba-tools-footer__brand span{
  display:inline-block;
  font-family:"Fredoka","Zen Maru Gothic",sans-serif;
  font-size:30px;
  line-height:1;
  font-weight:700;
  background:linear-gradient(90deg,#ff4f98 0%,#ff8a00 24%,#6bcb77 50%,#19a7ff 76%,#5146d8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.95));
}

.asobiba-tools-footer__main p{
  line-height:1.8;
  margin:0;
}

.asobiba-tools-footer__links{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  text-align:right;
}

.asobiba-tools-footer__links a{
  color:#53627f;
  font-weight:800;
  font-size:12px;
  text-decoration:none;
  white-space:nowrap;
}

.asobiba-tools-footer__links a:hover{
  color:#2478ff;
}

/* ===== コンテンツページ共通の雰囲気寄せ ===== */
.asobiba-tools-page{
  background:
    radial-gradient(circle at 8% 12%,rgba(14,184,178,.12),transparent 22%),
    radial-gradient(circle at 90% 12%,rgba(36,120,255,.10),transparent 24%),
    linear-gradient(180deg,#ffffff 0%,#f4fbff 45%,#ffffff 100%);
  color:#10234d;
}

.asobiba-tools-page-title{
  font-family:"Zen Maru Gothic",sans-serif;
  font-size:clamp(30px,5vw,48px);
  font-weight:900;
  text-align:center;
  letter-spacing:-.04em;
}

.asobiba-tools-page-title__emoji{
  color:initial;
  -webkit-text-fill-color:initial;
  margin-right:.12em;
  filter:none;
}

.asobiba-tools-page-title__text{
  display:inline-block;
  background:linear-gradient(90deg,#0eb8b2 0%,#2478ff 45%,#7c4dff 78%,#ff4f98 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.95));
}

.asobiba-tools-local-title{
  max-width:1100px;
  margin:34px auto 18px;
  padding:0 16px;
  text-align:center;
}

.asobiba-tools-page-guide{
  max-width:900px;
  margin:18px auto;
  padding:14px 18px;
  border:2px solid #dbeaff;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  color:#425273;
  box-shadow:0 10px 24px rgba(26,73,135,.07);
  line-height:1.75;
}

.asobiba-tools-page-guide h2{
  margin:0 0 5px;
  color:#10234d;
  font-size:16px;
  font-weight:900;
}

.asobiba-tools-page-guide p{margin:0;font-size:13px;font-weight:700}

@media(max-width:900px){
  .asobiba-tools-header__inner{
    flex-direction:column;
    align-items:stretch;
    min-height:auto;
    padding:12px 18px;
  }

  .asobiba-tools-header__nav{
    justify-content:center;
  }

  .asobiba-tools-header__nav a{
    padding:7px 11px;
    font-size:12px;
  }
}

@media(max-width:760px){
  .asobiba-tools-footer__inner{
    grid-template-columns:1fr;
    text-align:center;
  }

  .asobiba-tools-footer__main{
    text-align:center;
  }

  .asobiba-tools-footer__links{
    justify-content:center;
    text-align:center;
    gap:14px;
  }
}

/* ============================================================
   共通広告枠：ツール個別ページ用
   - tools-header.html の下にヘッダー下広告
   - tools-footer.html の上にフッター上広告
============================================================ */
.asobiba-tools-ad{
  width:100%;
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  padding:0 16px;
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}

.asobiba-tools-ad--header{
  margin-top:18px;
  margin-bottom:18px;
}

.asobiba-tools-ad--footer{
  margin-top:34px;
  margin-bottom:22px;
}

.asobiba-tools-ad__inner{
  min-height:90px;
  border-radius:22px;
  border:2px dashed #cfe2ff;
  background:
    radial-gradient(circle at 18% 20%, rgba(14,184,178,.09), transparent 26%),
    radial-gradient(circle at 82% 22%, rgba(36,120,255,.08), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,251,255,.96));
  box-shadow:
    0 8px 0 rgba(36,120,255,.035),
    0 16px 28px rgba(26,73,135,.08);
  display:grid;
  place-items:center;
  text-align:center;
  color:#738098;
  font-size:12px;
  font-weight:900;
}

.asobiba-tools-ad__inner span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  margin-bottom:5px;
  border-radius:999px;
  background:#eef8ff;
  color:#53627f;
  font-size:11px;
}

.asobiba-tools-ad__inner strong{
  display:block;
  color:#53627f;
  font-size:13px;
}

.asobiba-tools-ad__inner--live{
  min-height:90px;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.asobiba-tools-banner-ad-frame{
  display:block;
  width:728px;
  height:90px;
  border:0;
}

/* ページ側で不要な場合は body に .hide-tools-header-ad / .hide-tools-footer-ad を付与 */
.hide-tools-header-ad .asobiba-tools-ad--header,
.hide-tools-footer-ad .asobiba-tools-ad--footer{
  display:none !important;
}

@media(max-width:775px){
  .asobiba-tools-ad{
    width:320px;
    max-width:100vw;
    padding:0;
  }

  .asobiba-tools-ad--header .asobiba-tools-ad__inner--live{
    min-height:50px;
    height:50px;
  }

  .asobiba-tools-ad--footer .asobiba-tools-ad__inner--live{
    min-height:100px;
    height:100px;
  }

  .asobiba-tools-banner-ad-frame{
    width:320px;
    max-width:none;
    height:100px;
  }

  .asobiba-tools-ad--header .asobiba-tools-banner-ad-frame{
    height:50px;
  }
}

@media(max-width:760px){
  .asobiba-tools-ad{
    max-width:100vw;
    padding:0;
  }

  .asobiba-tools-ad--header{
    margin-top:14px;
    margin-bottom:14px;
  }

  .asobiba-tools-ad--footer{
    margin-top:28px;
    margin-bottom:18px;
  }

  .asobiba-tools-ad--header .asobiba-tools-ad__inner{
    min-height:50px;
  }

  .asobiba-tools-ad--footer .asobiba-tools-ad__inner{
    min-height:100px;
    border-radius:16px;
  }
}

/* ============================================================
   共通左右広告枠：ツール個別ページ用
   - common/tools-side-ads.html を tools-layout.js で読み込み
   - PCの広い画面のみ表示
   - 追従なし。ページ内のメインコンテンツ上部に合わせて静的配置
============================================================ */
.asobiba-tools-side-ads{
  display:block;
}

.asobiba-tools-side-ad{
  position:absolute;
  top:var(--asobiba-tools-side-ad-top, 190px);
  z-index:20;
  width:160px;
  min-height:600px;
  border-radius:22px;
  border:2px dashed #cfe2ff;
  background:
    radial-gradient(circle at 30% 18%, rgba(14,184,178,.08), transparent 28%),
    radial-gradient(circle at 70% 82%, rgba(36,120,255,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,251,255,.96));
  box-shadow:
    0 8px 0 rgba(36,120,255,.035),
    0 16px 28px rgba(26,73,135,.08);
  display:grid;
  place-items:center;
  text-align:center;
  color:#738098;
  font-size:12px;
  font-weight:900;
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}

.asobiba-tools-side-ad--left{
  left:max(12px, calc((100vw - 1500px) / 2));
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.asobiba-tools-side-ad-frame{
  display:block;
  width:160px;
  height:600px;
  border:0;
}

.asobiba-tools-side-ad--right{
  right:max(12px, calc((100vw - 1500px) / 2));
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.asobiba-tools-side-ad span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  margin-bottom:5px;
  border-radius:999px;
  background:#eef8ff;
  color:#53627f;
  font-size:11px;
}

.asobiba-tools-side-ad strong{
  display:block;
  color:#53627f;
  font-size:13px;
}

.asobiba-tools-side-ad{
  top:calc(var(--asobiba-tools-side-ad-top, 190px) + 190px);
}

/*
  メイン幅1100px + 左右160px + 余白を確保できない画面では非表示。
  ツールページのメイン幅は多くが max-width:1100px のため、1500px前後から表示。
*/
@media(max-width:1500px){
  .asobiba-tools-side-ads{
    display:none !important;
  }
}

/* ページ側で不要な場合 */
.hide-tools-side-ads .asobiba-tools-side-ads{
  display:none !important;
}

/* ============================================================
   Common shell quality refresh
   Kidsと同じ情報設計を、Tools向けの青緑デザインで展開。
============================================================ */
.asobiba-tools-header,
.asobiba-tools-header *,
.asobiba-tools-footer,
.asobiba-tools-footer *{
  box-sizing:border-box;
}

#tools-header:empty{
  display:block;
  min-height:232px;
}

.asobiba-tools-header{
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  overflow:visible !important;
  color:var(--tools-navy) !important;
  background:
    radial-gradient(circle at 8% 14%,rgba(14,184,178,.10),transparent 23%),
    radial-gradient(circle at 92% 10%,rgba(36,120,255,.10),transparent 24%),
    rgba(255,255,255,.97) !important;
  border:0 !important;
  border-bottom:1px solid rgba(210,228,247,.96) !important;
  box-shadow:0 10px 30px rgba(33,61,101,.09) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif !important;
}

.asobiba-tools-header::before{
  content:"";
  position:absolute;
  inset:auto 0 0;
  z-index:1;
  height:3px;
  background:linear-gradient(90deg,#0eb8b2 0%,#2478ff 38%,#7c4dff 70%,#ff4f98 100%);
  opacity:.88;
}

.asobiba-tools-header::after{
  content:"";
  position:absolute;
  top:9px;
  right:4%;
  width:82px;
  height:82px;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,217,61,.15),transparent 69%);
}

.asobiba-tools-header__inner{
  position:relative;
  z-index:2;
  width:min(100%,1280px) !important;
  max-width:1280px !important;
  min-height:106px !important;
  height:auto !important;
  margin:0 auto !important;
  padding:15px 24px 17px !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:30px !important;
}

.asobiba-tools-header__brand-row{
  flex:0 0 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:16px;
}

.asobiba-tools-brand-stack{
  min-width:0;
  display:grid;
  gap:5px;
}

.asobiba-tools-brand-actions{
  display:flex;
  align-items:center;
  gap:9px;
}

.asobiba-tools-language{
  display:inline-flex;
  align-items:center;
  padding:3px;
  border:1px solid #cddcef;
  border-radius:999px;
  background:#eef4fb;
  box-shadow:inset 0 1px 2px rgba(36,67,105,.08);
}

.asobiba-tools-language a{
  min-height:32px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#8a97aa !important;
  text-decoration:none !important;
  font-family:"Fredoka","Zen Maru Gothic",sans-serif;
  font-size:10px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  transition:color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
}

.asobiba-tools-language a:hover{
  color:#167983 !important;
}

.asobiba-tools-language a[aria-current="page"],
.asobiba-tools-language a[aria-current="true"]{
  color:#fff !important;
  background:linear-gradient(135deg,#147bdc,#3158d8) !important;
  box-shadow:0 5px 12px rgba(36,120,255,.32),inset 0 1px 0 rgba(255,255,255,.28);
  transform:translateY(-1px);
}

.asobiba-tools-language a[aria-current="page"]::before,
.asobiba-tools-language a[aria-current="true"]::before{
  content:"✓";
  width:15px;
  height:15px;
  margin-right:4px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#185fd1;
  background:#fff;
  font-size:9px;
  font-weight:900;
  line-height:1;
}

.asobiba-tools-language a:focus-visible{
  outline:3px solid rgba(36,120,255,.28);
  outline-offset:2px;
}

.asobiba-tools-logo{
  display:inline-flex !important;
  align-items:center !important;
  gap:0 !important;
  color:inherit !important;
  text-decoration:none !important;
}

.asobiba-tools-logo__copy{
  display:grid;
  gap:2px;
}

.asobiba-tools-logo__eyebrow{
  color:#2499a4;
  font-family:"Fredoka","Zen Maru Gothic",sans-serif;
  font-size:8px;
  font-weight:700;
  line-height:1;
  letter-spacing:.17em;
}

.asobiba-tools-logo__text{
  display:inline-block !important;
  color:transparent !important;
  background:linear-gradient(90deg,#0aaea9 0%,#2478ff 43%,#7c4dff 78%,#ff4f98 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.98));
  font-family:"Fredoka","Zen Maru Gothic",sans-serif !important;
  font-size:clamp(29px,3vw,39px) !important;
  font-weight:700 !important;
  line-height:.98 !important;
  letter-spacing:-.055em !important;
  white-space:nowrap;
}

.asobiba-tools-logo__tagline{
  margin:0 0 0 2px !important;
  color:#66758f !important;
  font-size:9px !important;
  font-weight:800 !important;
  line-height:1.35 !important;
  letter-spacing:.03em;
}

.asobiba-tools-home-link{
  min-height:42px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:2px solid #bfe8e2;
  border-radius:999px;
  color:#167983 !important;
  background:linear-gradient(180deg,#fff,#f0fcfa);
  box-shadow:0 7px 15px rgba(14,184,178,.10),inset 0 1px 0 #fff;
  text-decoration:none !important;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.asobiba-tools-home-link:hover{
  border-color:#76d7cd;
  box-shadow:0 10px 18px rgba(14,184,178,.16),inset 0 1px 0 #fff;
  transform:translateY(-2px);
}

.asobiba-tools-home-link__icon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg,#0eb8b2,#2478ff);
  box-shadow:0 4px 9px rgba(36,120,255,.20);
  font-size:14px;
  line-height:1;
}

.asobiba-tools-header__nav{
  flex:1 1 auto !important;
  min-width:0;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:9px !important;
}

.asobiba-tools-header__nav a{
  flex:0 1 auto;
  min-width:0 !important;
  min-height:54px !important;
  margin:0 !important;
  padding:7px 12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  border:2px solid #e4edf8 !important;
  border-radius:16px !important;
  color:#415371 !important;
  background:rgba(255,255,255,.90) !important;
  box-shadow:0 7px 16px rgba(52,79,116,.06),inset 0 1px 0 #fff !important;
  text-decoration:none !important;
  font-size:11px !important;
  font-weight:900 !important;
  line-height:1.25 !important;
  white-space:nowrap;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease !important;
}

.asobiba-tools-header__nav a:hover{
  color:#274467 !important;
  transform:translateY(-3px) !important;
  box-shadow:0 12px 21px rgba(52,79,116,.11),inset 0 1px 0 #fff !important;
}

.asobiba-tools-header__nav a.world:hover{border-color:#bce4fb !important;background:#f2fbff !important;}
.asobiba-tools-header__nav a.games:hover{border-color:#d8ccff !important;background:#f8f5ff !important;}
.asobiba-tools-header__nav a.kids:hover{border-color:#ffd0e2 !important;background:#fff5f9 !important;}
.asobiba-tools-header__nav a.news:hover{border-color:#ccd9ff !important;background:#f5f7ff !important;}

.asobiba-tools-nav-icon{
  flex:0 0 30px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  font-size:14px;
  line-height:1;
}

.asobiba-tools-nav-icon.world{background:#e9f7ff;}
.asobiba-tools-nav-icon.games{background:#f1ecff;}
.asobiba-tools-nav-icon.kids{background:#fff0f6;}
.asobiba-tools-nav-icon.news{background:#eef3ff;}

.asobiba-tools-nav-label{
  display:inline-flex;
  white-space:nowrap;
}

.asobiba-tools-nav-prefix{
  margin-right:.05em;
}

/* ===== 高品質フッター ===== */
.asobiba-tools-footer{
  position:relative !important;
  overflow:hidden !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:72px 0 0 !important;
  padding:0 !important;
  display:block !important;
  color:var(--tools-navy) !important;
  background:
    radial-gradient(circle at 8% 13%,rgba(14,184,178,.14),transparent 22%),
    radial-gradient(circle at 91% 15%,rgba(124,77,255,.11),transparent 24%),
    linear-gradient(180deg,#f8fcff 0%,#edf7ff 56%,#f8fbff 100%) !important;
  border:0 !important;
  border-top:1px solid #d8e8f7 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96) !important;
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif !important;
  text-align:left !important;
}

.asobiba-tools-footer::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,#0eb8b2 0%,#2478ff 38%,#7c4dff 70%,#ff4f98 100%);
}

.asobiba-tools-footer::after{
  content:"";
  position:absolute;
  top:28px;
  left:4%;
  width:92px;
  height:92px;
  pointer-events:none;
  border:18px solid rgba(36,120,255,.045);
  border-radius:50%;
}

.asobiba-tools-footer__inner{
  position:relative;
  z-index:1;
  width:min(100%,1280px) !important;
  max-width:1280px !important;
  margin:0 auto !important;
  padding:50px 24px 25px !important;
  display:block !important;
}

.asobiba-tools-footer__main{
  display:grid !important;
  grid-template-columns:minmax(300px,.82fr) minmax(570px,1.18fr) !important;
  align-items:start !important;
  gap:48px !important;
  padding-bottom:38px;
}

.asobiba-tools-footer__brand-block{
  min-width:0;
}

.asobiba-tools-footer__eyebrow{
  display:block;
  margin-bottom:10px;
  color:#318f9e;
  font-family:"Fredoka","Zen Maru Gothic",sans-serif;
  font-size:9px;
  font-weight:700;
  line-height:1;
  letter-spacing:.2em;
}

.asobiba-tools-footer__brand{
  display:inline-block !important;
  margin:0 0 12px !important;
  color:inherit !important;
  text-decoration:none !important;
}

.asobiba-tools-footer__brand-text{
  display:inline-block;
  color:transparent !important;
  background:linear-gradient(90deg,#ff4f98 0%,#ff8a00 24%,#6bcb77 50%,#19a7ff 76%,#5146d8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.98));
  font-family:"Fredoka","Zen Maru Gothic",sans-serif;
  font-size:clamp(29px,3vw,40px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.05em;
}

.asobiba-tools-footer__message{
  margin:0 !important;
  color:#61718b !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1.85 !important;
}

.asobiba-tools-footer__tools-home{
  min-height:38px;
  margin-top:18px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:2px solid #bfe8e2;
  border-radius:999px;
  color:#167983 !important;
  background:rgba(255,255,255,.84);
  box-shadow:0 7px 15px rgba(14,184,178,.09);
  text-decoration:none !important;
  font-size:10px;
  font-weight:900;
}

.asobiba-tools-footer__tools-home:hover{
  border-color:#76d7cd;
  background:#fff;
  transform:translateY(-2px);
}

.asobiba-tools-footer__links{
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  text-align:left !important;
}

.asobiba-tools-footer__links a{
  min-width:0;
  min-height:92px;
  margin:0 !important;
  padding:15px !important;
  display:grid !important;
  grid-template-columns:45px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  border:2px solid #dbe8f5;
  border-radius:20px;
  color:#334b6d !important;
  background:rgba(255,255,255,.86);
  box-shadow:0 9px 18px rgba(43,70,107,.07),inset 0 1px 0 #fff;
  text-decoration:none !important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.asobiba-tools-footer__links a:hover{
  color:#263f62 !important;
  transform:translateY(-4px);
  box-shadow:0 15px 27px rgba(43,70,107,.12),inset 0 1px 0 #fff;
}

.asobiba-tools-footer__links a.world{border-color:#bfe4f8;background:rgba(244,251,255,.94);}
.asobiba-tools-footer__links a.games{border-color:#d9ceff;background:rgba(249,247,255,.94);}
.asobiba-tools-footer__links a.kids{border-color:#ffd0e2;background:rgba(255,247,251,.94);}
.asobiba-tools-footer__links a.news{border-color:#ccd9ff;background:rgba(246,248,255,.94);}

.asobiba-tools-footer__link-icon{
  width:45px;
  height:45px;
  display:grid !important;
  place-items:center;
  border-radius:15px;
  background:rgba(255,255,255,.88);
  box-shadow:0 6px 13px rgba(67,89,124,.09);
  font-size:21px !important;
  line-height:1;
}

.asobiba-tools-footer__link-copy{
  min-width:0;
  display:grid;
  gap:4px;
}

.asobiba-tools-footer__link-copy strong{
  overflow:hidden;
  color:#2f4566 !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.asobiba-tools-footer__link-copy small{
  overflow:hidden;
  color:#78869c !important;
  font-size:9px !important;
  font-weight:800 !important;
  line-height:1.45;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.asobiba-tools-footer__link-arrow{
  width:25px;
  height:25px;
  display:grid !important;
  place-items:center;
  border-radius:50%;
  color:#60738f !important;
  background:rgba(255,255,255,.84);
  font-size:19px !important;
  line-height:1;
}

.asobiba-tools-footer__bottom{
  min-height:54px;
  padding-top:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid rgba(102,128,164,.20);
  color:#7b899e;
}

.asobiba-tools-footer__bottom > small{
  font-size:10px;
  font-weight:800;
}

.asobiba-tools-footer__sub{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
  flex-wrap:wrap;
}

.asobiba-tools-footer__sub a{
  color:#62728c !important;
  text-decoration:none !important;
  font-size:10px !important;
  font-weight:800 !important;
}

.asobiba-tools-footer__sub a:hover{
  color:#2478ff !important;
  text-decoration:underline !important;
}

@media (min-width:1121px){
  .asobiba-tools-page > .sticky-top{
    top:106px !important;
  }
}

@media (max-width:1120px){
  #tools-header:empty{
    min-height:292px;
  }

  .asobiba-tools-header{
    position:relative !important;
  }

  .asobiba-tools-header__inner{
    min-height:0 !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:13px !important;
  }

  .asobiba-tools-header__brand-row{
    width:100%;
    justify-content:space-between;
  }

  .asobiba-tools-header__nav{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .asobiba-tools-header__nav a{
    width:100% !important;
  }

  .asobiba-tools-page > .sticky-top{
    top:0 !important;
  }

  .asobiba-tools-footer__main{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
}

@media (max-width:775px){
  #tools-header:empty{
    min-height:184px;
  }
}

@media (max-width:720px){
  .asobiba-tools-header__inner{
    padding:12px 11px 13px !important;
    gap:11px !important;
  }

  .asobiba-tools-header__brand-row{
    gap:10px;
  }

  .asobiba-tools-brand-actions{
    gap:6px;
  }

  .asobiba-tools-language{
    padding:2px;
  }

  .asobiba-tools-language a{
    min-height:31px;
    padding:0 7px;
    font-size:9px;
  }

  .asobiba-tools-brand-stack{
    gap:4px;
  }

  .asobiba-tools-logo{
    gap:0 !important;
  }

  .asobiba-tools-logo__eyebrow{
    font-size:6px;
  }

  .asobiba-tools-logo__text{
    font-size:clamp(25px,7.7vw,34px) !important;
  }

  .asobiba-tools-logo__tagline{
    margin-left:2px !important;
    font-size:7px !important;
  }

  .asobiba-tools-home-link{
    min-height:35px;
    padding:0 10px;
    gap:5px;
    font-size:9px;
  }

  .asobiba-tools-home-link__icon{
    width:19px;
    height:19px;
    font-size:12px;
  }

  .asobiba-tools-header__nav{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .asobiba-tools-header__nav a{
    min-height:45px !important;
    padding:6px 9px !important;
    border-radius:14px !important;
    font-size:10px !important;
  }

  .asobiba-tools-nav-icon{
    flex-basis:28px;
    width:28px;
    height:28px;
    border-radius:9px;
    font-size:13px;
  }

  .asobiba-tools-footer{
    margin-top:52px !important;
  }

  .asobiba-tools-footer__inner{
    padding:38px 14px 20px !important;
  }

  .asobiba-tools-footer__main{
    gap:27px !important;
    padding-bottom:28px;
  }

  .asobiba-tools-footer__brand-text{
    font-size:clamp(28px,10vw,37px);
  }

  .asobiba-tools-footer__message{
    font-size:10px !important;
  }

  .asobiba-tools-footer__links{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  .asobiba-tools-footer__links a{
    min-height:88px;
    padding:11px !important;
    grid-template-columns:38px minmax(0,1fr) auto;
    gap:8px;
    border-radius:17px;
  }

  .asobiba-tools-footer__link-icon{
    width:38px;
    height:38px;
    border-radius:12px;
    font-size:18px !important;
  }

  .asobiba-tools-footer__link-copy strong{
    font-size:10px !important;
  }

  .asobiba-tools-footer__link-copy small{
    font-size:8px !important;
  }

  .asobiba-tools-footer__link-arrow{
    width:21px;
    height:21px;
    font-size:16px !important;
  }
}

@media (max-width:500px){
  .asobiba-tools-logo__eyebrow,
  .asobiba-tools-logo__tagline{
    display:none;
  }

  .asobiba-tools-logo__text{
    font-size:clamp(24px,7.5vw,31px) !important;
  }

  .asobiba-tools-home-link{
    padding-inline:8px;
  }

  .asobiba-tools-home-link > span:last-child{
    font-size:0;
  }

  .asobiba-tools-home-link > span:last-child::after{
    content:"一覧";
    font-size:9px;
  }

  .asobiba-tools-nav-prefix{
    display:none;
  }

  .asobiba-tools-footer__links{
    grid-template-columns:1fr !important;
  }

  .asobiba-tools-footer__links a{
    min-height:78px;
    padding-inline:13px !important;
  }

  .asobiba-tools-footer__bottom{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }

  .asobiba-tools-footer__sub{
    justify-content:flex-start;
    gap:12px 16px;
  }
}

/* ===== 個別ツール共通UI部品 =====
   ファイル処理系のツールでは、この名前空間付きクラスを優先して使用する。 */
.asobiba-tool-local-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border:2px solid #cfeee9;
  border-radius:16px;
  background:#f0fffb;
  color:#35646c;
  font-size:12px;
  font-weight:800;
  line-height:1.7;
}

.asobiba-tool-local-note::before{
  content:"🔒";
  flex:0 0 auto;
  font-size:18px;
  line-height:1.4;
}

.asobiba-tool-media-preview{
  display:block;
  width:100%;
  max-height:460px;
  border:2px solid var(--tools-line);
  border-radius:18px;
  background:#0f172a;
}

.asobiba-tool-media-preview[hidden],
.asobiba-tool-result-link[hidden],
.asobiba-tool-progress[hidden]{
  display:none !important;
}

.asobiba-tool-progress{
  width:100%;
  height:14px;
  overflow:hidden;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:999px;
  background:#e8f1ff;
  accent-color:var(--tools-blue);
}

.asobiba-tool-progress::-webkit-progress-bar{
  border-radius:999px;
  background:#e8f1ff;
}

.asobiba-tool-progress::-webkit-progress-value{
  border-radius:999px;
  background:linear-gradient(90deg,var(--tools-teal),var(--tools-blue));
}

.asobiba-tool-progress::-moz-progress-bar{
  border-radius:999px;
  background:linear-gradient(90deg,var(--tools-teal),var(--tools-blue));
}

.asobiba-tool-progress-track{
  width:100%;
  height:var(--asobiba-tool-progress-height,6px);
  overflow:hidden;
  border-radius:999px;
  background:var(--asobiba-tool-progress-track,#e8f1ff);
}

.asobiba-tool-progress-fill{
  display:block;
  width:var(--asobiba-tool-progress-value,0%);
  height:100%;
  border-radius:inherit;
  background:var(--asobiba-tool-progress-fill,linear-gradient(90deg,var(--tools-teal),var(--tools-blue)));
  transition:width var(--asobiba-tool-progress-duration,.2s) ease;
}

.asobiba-tool-file-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:var(--asobiba-tool-file-list-height,330px);
  overflow:auto;
  overscroll-behavior:contain;
}

.asobiba-tool-file-list--cards{
  --asobiba-tool-file-list-height:500px;
  padding:14px;
  border:2px solid var(--tools-line);
  border-radius:18px;
  background:rgba(255,255,255,.88);
}

.asobiba-tool-file-list--compact{
  --asobiba-tool-file-list-height:360px;
}

.asobiba-tool-file-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:2px solid var(--tools-line);
  border-radius:14px;
  background:#fff;
  color:var(--tools-muted);
  font-size:12px;
  font-weight:800;
}

.asobiba-tool-file-card{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto auto auto;
  align-items:center;
  gap:12px;
  padding:10px;
  border:2px solid var(--tools-line);
  border-radius:14px;
  background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease;
}

.asobiba-tool-file-card.done{
  border-color:#a7e4c8;
}

.asobiba-tool-file-card.error{
  border-color:#ffc2ca;
}

.asobiba-tool-file-card:hover{
  box-shadow:0 8px 18px rgba(36,120,255,.08);
}

.asobiba-tool-file-thumb{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background-color:#eef6ff;
  background-position:center;
  background-size:cover;
  font-size:22px;
}

.asobiba-tool-file-info{
  min-width:0;
}

.asobiba-tool-file-name{
  overflow:hidden;
  color:var(--tools-navy);
  font-size:13px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.asobiba-tool-file-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:3px;
  color:var(--tools-muted);
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:11px;
}

.asobiba-tool-file-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.asobiba-tool-file-row button,
.asobiba-tool-file-row .btn,
.asobiba-tool-file-action{
  padding:6px 10px;
  border:2px solid var(--tools-line);
  border-radius:999px;
  background:#fff;
  color:var(--tools-muted);
  font-family:inherit;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .15s ease,color .15s ease,opacity .15s ease;
}

.asobiba-tool-file-action:hover:not(.pending):not(:disabled){
  border-color:var(--tools-blue);
  color:var(--tools-blue);
}

.asobiba-tool-file-action.pending,
.asobiba-tool-file-action:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.asobiba-tool-file-direction,
.asobiba-tool-file-size{
  color:var(--tools-muted);
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:12px;
  white-space:nowrap;
}

.asobiba-tool-file-size{
  color:#087f6c;
  font-weight:900;
}

.asobiba-tool-file-size.bad{
  color:#c03245;
}

.asobiba-tool-file-size.pending{
  color:#8793aa;
}

.asobiba-tool-file-status{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#eef3ff;
  color:var(--tools-muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
}

.asobiba-tool-file-status.pending{background:#eef3ff;color:#6d7890;}
.asobiba-tool-file-status.decoding{background:#fff8d8;color:#8d6900;}
.asobiba-tool-file-status.encoding{background:#f2edff;color:#7044cf;}
.asobiba-tool-file-status.done{background:#e8faef;color:#087f6c;}
.asobiba-tool-file-status.error{background:#fff0f2;color:#c03245;}

.asobiba-tool-file-progress{
  width:100%;
  height:4px;
  overflow:hidden;
  margin-top:6px;
  border-radius:999px;
  background:#e8f1ff;
}

.asobiba-tool-file-progress > span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--tools-teal),var(--tools-blue));
  transition:width .15s ease;
}

.asobiba-tool-range-output{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--tools-blue);
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:12px;
  font-weight:900;
}

.asobiba-tool-canvas-preview{
  display:block;
  width:100%;
  max-height:420px;
  object-fit:contain;
}

.asobiba-tool-status--success{color:#087f6c !important;}
.asobiba-tool-status--warning{color:#a65b00 !important;}
.asobiba-tool-status--error{color:#c03245 !important;}

.asobiba-tools-breadcrumb{
  width:min(1100px,calc(100% - 32px));
  margin:14px auto 0;
  color:var(--tools-muted,#60708f);
  font-size:12px;
  font-weight:800;
}

.asobiba-tools-breadcrumb ol{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin:0;
  padding:9px 13px;
  list-style:none;
  border:2px solid var(--tools-line,#dbeaff);
  border-radius:14px;
  background:rgba(255,255,255,.82);
  box-shadow:0 8px 22px rgba(36,120,255,.07);
}

.asobiba-tools-breadcrumb a{
  color:var(--tools-blue,#2478ff);
  text-decoration:none;
}

.asobiba-tools-breadcrumb a:hover{
  text-decoration:underline;
}

.asobiba-tools-breadcrumb [aria-current="page"]{
  min-width:0;
  overflow:hidden;
  color:var(--tools-navy,#10234d);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.asobiba-tools-breadcrumb__separator{
  color:#9aa8c2;
}

.asobiba-tool-faq{
  display:grid;
  gap:10px;
}

.asobiba-tool-faq details{
  padding:12px 14px;
  border:2px solid var(--tools-line);
  border-radius:16px;
  background:#fff;
  color:var(--tools-muted);
  font-size:13px;
  line-height:1.8;
}

.asobiba-tool-faq summary{
  color:var(--tools-navy);
  font-weight:900;
  cursor:pointer;
}

.asobiba-tool-faq p{
  margin:8px 0 0;
}

.asobiba-tool-audio-meter{
  width:100%;
  height:120px;
  border:2px solid var(--tools-line);
  border-radius:18px;
  background:#0f172a;
}

@media (max-width:680px){
  .asobiba-tools-breadcrumb{
    width:calc(100% - 20px);
    margin-top:9px;
    font-size:11px;
  }

  .asobiba-tools-breadcrumb ol{
    flex-wrap:nowrap;
    gap:5px;
    padding:8px 10px;
  }

  .asobiba-tools-breadcrumb li:first-child,
  .asobiba-tools-breadcrumb li:first-child + .asobiba-tools-breadcrumb__separator{
    display:none;
  }

  .asobiba-tool-file-row{
    grid-template-columns:1fr;
  }

  .asobiba-tool-file-actions{
    justify-content:flex-start;
  }

  .asobiba-tool-file-card{
    grid-template-columns:44px minmax(0,1fr) auto;
    gap:8px;
  }

  .asobiba-tool-file-thumb{
    width:44px;
    height:44px;
  }

  .asobiba-tool-file-direction,
  .asobiba-tool-file-size{
    grid-column:2;
  }

  .asobiba-tool-file-action{
    grid-column:3;
    grid-row:1 / span 3;
  }
}