/*
 * Asupara Pop Redesign
 * Visual-only override inspired by the bright, playful campaign artwork.
 * Existing widgets / floating CTA markup and behavior are intentionally untouched.
 */

:root{
  --asp-sky:#6ecdf4;
  --asp-sky-soft:#e9f8ff;
  --asp-pink:#f9155b;
  --asp-red:#e6003d;
  --asp-yellow:#ffd83d;
  --asp-yellow-deep:#ffb900;
  --asp-ink:#2f3443;
  --asp-muted:#6e7787;
  --asp-white:#ffffff;
  --asp-line:#d9eff9;
  --asp-shadow:0 12px 28px rgba(58,130,170,.16);
  --asp-shadow-pop:0 8px 0 rgba(230,0,61,.12),0 18px 38px rgba(38,118,157,.16);
  --asp-radius:24px;
}

html{scroll-behavior:smooth}

body{
  color:var(--asp-ink);
  background:
    radial-gradient(circle at 7% 95px,rgba(255,255,255,.96) 0 58px,transparent 60px),
    radial-gradient(circle at 16% 120px,rgba(255,255,255,.88) 0 44px,transparent 46px),
    radial-gradient(circle at 88% 84px,rgba(255,255,255,.92) 0 64px,transparent 66px),
    linear-gradient(180deg,#86d7f7 0,#dff6ff 320px,#f8fcff 700px,#fff 1050px);
  background-repeat:no-repeat;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

/* Header */
.header-container{
  background:transparent!important;
  padding:22px 14px 8px;
}

#header{
  max-width:1256px;
  margin:0 auto;
  border:3px solid rgba(255,255,255,.95);
  border-radius:30px;
  background:
    radial-gradient(circle at 15% 0,rgba(255,255,255,.88) 0 42px,transparent 44px),
    radial-gradient(circle at 88% 100%,rgba(255,216,61,.28) 0 70px,transparent 72px),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.88));
  box-shadow:var(--asp-shadow-pop);
  overflow:hidden;
  position:relative;
}

#header::before,
#header::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  background:var(--asp-yellow);
  transform:rotate(45deg);
  border-radius:4px;
  box-shadow:0 0 0 6px rgba(255,216,61,.16);
  pointer-events:none;
}
#header::before{top:22px;right:52px}
#header::after{bottom:22px;left:46px;width:11px;height:11px;background:var(--asp-pink);box-shadow:0 0 0 5px rgba(249,21,91,.12)}

.header-in{padding:30px 42px!important}
.tagline{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  margin:0 0 8px;
  padding:7px 14px;
  border-radius:999px;
  background:var(--asp-sky-soft);
  color:#237da6;
  font-size:.86em;
  font-weight:800;
  letter-spacing:.03em;
}
.site-name-text{
  color:var(--asp-pink);
  font-size:clamp(28px,4vw,46px);
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.2;
  text-shadow:
    0 2px 0 #fff,
    0 4px 0 rgba(230,0,61,.12);
}
.site-name-text-link:hover .site-name-text{color:var(--asp-red)}

/* Desktop navigation */
@media screen and (min-width:835px){
  #navi{
    max-width:1256px;
    margin:12px auto 0;
    background:transparent!important;
  }
  #navi-in{background:transparent!important}
  #navi .menu-header{
    display:flex;
    gap:10px;
    justify-content:center;
    align-items:stretch;
  }
  #navi .menu-item>a{
    height:100%;
    margin:0;
    padding:12px 16px;
    border:2px solid rgba(255,255,255,.92);
    border-radius:16px;
    background:rgba(255,255,255,.94);
    color:#305466;
    box-shadow:0 5px 0 rgba(63,158,199,.12);
    font-weight:800;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease;
  }
  #navi .menu-item>a:hover{
    transform:translateY(-2px);
    border-color:var(--asp-yellow);
    color:var(--asp-pink);
    box-shadow:0 7px 0 rgba(255,216,61,.2);
  }
  #navi .sub-menu{
    border-radius:16px;
    overflow:hidden;
    box-shadow:var(--asp-shadow);
  }
}

/* Recommended cards */
.recommended{background:transparent!important;padding:12px 0 4px}
.recommended-in{gap:14px}
.recommended .navi-entry-card-link{
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  border:2px solid #fff;
  box-shadow:var(--asp-shadow);
  transition:transform .18s ease,box-shadow .18s ease;
}
.recommended .navi-entry-card-link:hover{
  transform:translateY(-4px) rotate(-.25deg);
  box-shadow:0 16px 34px rgba(45,124,164,.22);
}
.recommended .navi-entry-card-title{
  padding:10px 12px 12px;
  color:var(--asp-ink);
  font-weight:800;
  line-height:1.55;
}

/* Main layout surface */
#content{background:transparent!important}
#content-in{padding-top:22px}
.main{
  border-radius:28px;
  background:rgba(255,255,255,.72);
  box-shadow:0 0 0 1px rgba(255,255,255,.9);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

/* Post list cards */
.entry-card-wrap{
  margin:0 0 22px!important;
  border:2px solid #fff!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:var(--asp-shadow)!important;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.entry-card-wrap:hover{
  transform:translateY(-5px);
  border-color:#c9f0ff!important;
  box-shadow:0 17px 36px rgba(42,119,157,.22)!important;
}
.entry-card{padding:14px!important}
.entry-card-thumb{border-radius:17px;overflow:hidden}
.entry-card-thumb img{transition:transform .28s ease}
.entry-card-wrap:hover .entry-card-thumb img{transform:scale(1.035)}
.entry-card-title{
  color:var(--asp-ink)!important;
  font-size:1.16em!important;
  font-weight:900!important;
  line-height:1.55!important;
}
.entry-card-snippet{color:var(--asp-muted);line-height:1.8}
.entry-card-meta{color:#8a96a3}
.cat-label{
  border-radius:999px!important;
  border:2px solid #fff!important;
  box-shadow:0 3px 8px rgba(0,0,0,.12);
  font-weight:800!important;
}

/* Sidebar */
.sidebar .widget{
  margin-bottom:22px!important;
  padding:20px!important;
  border:2px solid #fff;
  border-radius:22px;
  background:rgba(255,255,255,.95);
  box-shadow:var(--asp-shadow);
}
.sidebar .widget-title{
  position:relative;
  margin:-4px 0 16px!important;
  padding:0 0 11px!important;
  border:0!important;
  background:transparent!important;
  color:var(--asp-ink)!important;
  font-size:1.05em!important;
  font-weight:900!important;
}
.sidebar .widget-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:58px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--asp-pink),var(--asp-yellow));
}
.sidebar .widget a{transition:color .15s ease}
.sidebar .widget a:hover{color:var(--asp-pink)}
.sidebar .author-thumb img{
  border:5px solid #fff;
  box-shadow:0 0 0 3px var(--asp-sky-soft),0 10px 22px rgba(55,123,156,.15);
}
.search-edit{
  border:2px solid #d8eef8!important;
  border-radius:999px!important;
  background:#f7fcff!important;
  padding-left:16px!important;
}
.search-edit:focus{border-color:var(--asp-sky)!important;box-shadow:0 0 0 4px rgba(110,205,244,.18)}
.search-submit{
  border-radius:50%!important;
  background:var(--asp-pink)!important;
  color:#fff!important;
}

/* Article */
.article{
  color:var(--asp-ink);
  font-size:1.01em;
}
.article h1.entry-title{
  color:var(--asp-ink);
  font-weight:900;
  line-height:1.4;
}
.article h2{
  padding:15px 19px!important;
  border:0!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,var(--asp-pink),var(--asp-red))!important;
  color:#fff!important;
  box-shadow:0 7px 0 rgba(177,0,46,.16);
  font-weight:900!important;
  letter-spacing:.02em;
}
.article h3{
  padding:13px 16px 13px 18px!important;
  border:2px solid #ffe484!important;
  border-left:8px solid var(--asp-yellow-deep)!important;
  border-radius:14px!important;
  background:#fffaf0!important;
  color:#3d3b33!important;
  font-weight:900!important;
}
.article h4{
  padding:10px 0 10px 14px!important;
  border:0!important;
  border-left:6px solid var(--asp-sky)!important;
  color:#255b73!important;
  font-weight:900!important;
}
.article a:not(.btn):not(.wp-block-button__link){
  text-decoration-color:rgba(249,21,91,.3);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.article a:not(.btn):not(.wp-block-button__link):hover{color:var(--asp-pink)}
.article blockquote,
.article .information-box,
.article .question-box,
.article .memo-box,
.article .alert-box{
  border-radius:18px!important;
  border-width:2px!important;
  box-shadow:0 8px 20px rgba(67,124,150,.08);
}
.article .toc{
  border:2px solid #cfeefe!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#fbfeff,#f0faff)!important;
  box-shadow:0 9px 22px rgba(60,134,169,.1);
}
.article .toc-title{color:#246f91;font-weight:900}

/* Buttons */
.btn-wrap a,
.wp-block-button__link,
.article .btn{
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,var(--asp-pink),#ff405e)!important;
  color:#fff!important;
  box-shadow:0 6px 0 #bd0033,0 12px 24px rgba(249,21,91,.2)!important;
  font-weight:900!important;
  transition:transform .16s ease,box-shadow .16s ease!important;
}
.btn-wrap a:hover,
.wp-block-button__link:hover,
.article .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 0 #bd0033,0 16px 30px rgba(249,21,91,.25)!important;
}

/* Breadcrumb + pagination */
.breadcrumb{
  color:#52788a;
  font-size:.88em;
}
.pagination .page-numbers{
  border:0!important;
  border-radius:999px!important;
  background:#fff!important;
  box-shadow:0 4px 12px rgba(52,121,151,.12);
}
.pagination .current{
  background:var(--asp-pink)!important;
  color:#fff!important;
}

/* Footer */
.footer{
  margin-top:46px;
  background:
    radial-gradient(circle at 10% 0,rgba(255,255,255,.18) 0 62px,transparent 64px),
    linear-gradient(135deg,#47bce9,#79d7f8)!important;
  color:#fff!important;
}
.footer a{color:#fff!important}
.footer-bottom{padding-top:22px;padding-bottom:28px}

/* Mobile polish */
@media screen and (max-width:834px){
  body{
    background:
      radial-gradient(circle at 10% 80px,rgba(255,255,255,.92) 0 42px,transparent 44px),
      linear-gradient(180deg,#86d7f7 0,#e9f8ff 300px,#fff 760px);
  }
  .header-container{padding:10px 10px 4px}
  #header{border-radius:22px}
  .header-in{padding:22px 20px!important}
  .tagline{font-size:.75em;padding:6px 10px}
  .site-name-text{font-size:28px}
  .main{border-radius:20px}
  .entry-card-wrap{border-radius:20px!important;margin-bottom:16px!important}
  .entry-card{padding:10px!important}
  .entry-card-title{font-size:1em!important}
  .sidebar .widget{border-radius:18px}
  .article h2{border-radius:15px!important;padding:13px 15px!important}
  .article h3{border-radius:12px!important}
}

/* Accessibility */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .entry-card-wrap,
  .entry-card-thumb img,
  .recommended .navi-entry-card-link,
  #navi .menu-item>a,
  .btn-wrap a,
  .wp-block-button__link,
  .article .btn{transition:none!important}
}

/* -------------------------------------------------
 * Refinement 2026-10-02
 * Header: cleaner / more editorial
 * Recommended fixed posts: never overlay title on image
 * ------------------------------------------------- */

/* Cleaner header */
.header-container{
  padding:14px 14px 4px!important;
}

#header{
  max-width:1256px;
  margin:0 auto;
  border:1px solid rgba(255,255,255,.9)!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 8px 24px rgba(38,118,157,.12)!important;
  overflow:hidden;
}

#header::before,
#header::after{
  display:none!important;
}

#header-in{
  position:relative;
  padding:18px 28px 20px 32px!important;
  text-align:left!important;
}

#header-in::before{
  content:"";
  position:absolute;
  left:16px;
  top:18px;
  bottom:18px;
  width:5px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--asp-pink),var(--asp-yellow));
}

.logo-header{
  margin:0!important;
  line-height:1.25!important;
}

.tagline{
  display:block!important;
  width:auto!important;
  margin:0 0 5px!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#4c7d93!important;
  font-size:.76em!important;
  font-weight:700!important;
  letter-spacing:.025em!important;
  line-height:1.5!important;
  text-shadow:none!important;
}

.site-name-text{
  color:#273746!important;
  font-size:clamp(24px,3vw,34px)!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  line-height:1.3!important;
  text-shadow:none!important;
}

.site-name-text-link:hover .site-name-text{
  color:var(--asp-pink)!important;
}

/* Recommended fixed posts: image and title are separate surfaces */
.recommended{
  padding:16px 0 8px!important;
}

.recommended .navi-entry-cards{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
}

.recommended .navi-entry-card-link{
  display:block!important;
  min-width:0!important;
  height:100%!important;
  border:1px solid rgba(215,237,247,.95)!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:#fff!important;
  box-shadow:0 8px 20px rgba(48,119,151,.11)!important;
}

.recommended .navi-entry-card{
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  min-height:0!important;
  border:0!important;
  background:#fff!important;
}

.recommended .navi-entry-card::before,
.recommended .navi-entry-card::after{
  display:none!important;
}

.recommended .navi-entry-card-thumb{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  float:none!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  aspect-ratio:16 / 9!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:#edf8fd!important;
}

.recommended .navi-entry-card-thumb::before,
.recommended .navi-entry-card-thumb::after{
  display:none!important;
}

.recommended .navi-entry-card-thumb img{
  position:static!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  object-fit:cover!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}

.recommended .navi-entry-card-content{
  position:static!important;
  inset:auto!important;
  display:block!important;
  flex:1 1 auto!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:11px 12px 13px!important;
  background:#fff!important;
  color:var(--asp-ink)!important;
  opacity:1!important;
  transform:none!important;
  text-shadow:none!important;
}

.recommended .navi-entry-card-title{
  position:static!important;
  inset:auto!important;
  display:-webkit-box!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  background:transparent!important;
  color:var(--asp-ink)!important;
  font-size:.88em!important;
  font-weight:800!important;
  line-height:1.5!important;
  text-shadow:none!important;
  opacity:1!important;
}

.recommended .navi-entry-card-link:hover{
  transform:translateY(-3px)!important;
  border-color:#bfeafb!important;
  box-shadow:0 13px 28px rgba(45,124,164,.18)!important;
}

/* Mobile: compact header + readable full-width 2x2 recommended grid */
@media screen and (max-width:834px){
  .header-container{
    padding:10px 10px 3px!important;
  }

  #header{
    border-radius:16px!important;
  }

  #header-in{
    padding:14px 16px 15px 24px!important;
  }

  #header-in::before{
    left:11px;
    top:14px;
    bottom:14px;
    width:4px;
  }

  .tagline{
    margin-bottom:3px!important;
    font-size:11px!important;
    white-space:normal!important;
  }

  .site-name-text{
    font-size:21px!important;
    line-height:1.28!important;
  }

  .recommended{
    padding:12px 10px 8px!important;
  }

  .recommended-in.wrap{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  .recommended .navi-entry-cards{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  .recommended .navi-entry-card-link{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    border-radius:16px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .recommended .navi-entry-card{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  .recommended .navi-entry-card-thumb{
    display:block!important;
    float:none!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    aspect-ratio:16 / 9!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .recommended .navi-entry-card-thumb img{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    margin:0!important;
    object-fit:cover!important;
  }

  .recommended .navi-entry-card-content{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:10px 10px 12px!important;
    box-sizing:border-box!important;
  }

  .recommended .navi-entry-card-title{
    display:-webkit-box!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
    color:var(--asp-ink)!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1.45!important;
    min-height:4.35em!important;
    word-break:break-word!important;
    letter-spacing:0!important;
    box-sizing:border-box!important;
  }
}