/* ============================================================
   AIRDROP SPRITE PRO — MAIN STYLESHEET
   ブロガー女子のための最強テーマ
   ============================================================ */

/* --- CSS Variables --- */
:root {
  --c-primary: #5B8A72;
  --c-primary-l: #7BAF98;
  --c-primary-d: #3D6B54;
  --c-accent: #E8A87C;
  --c-accent-l: #F2C4A0;
  --c-accent-d: #D4845A;
  --c-warm: #F5E6D3;
  --c-warm-l: #FFF8F0;
  --c-text: #2D2D2D;
  --c-text-l: #666;
  --c-text-m: #999;
  --c-bg: #FAFAF7;
  --c-card: #fff;
  --c-border: #E8E4DE;
  --c-border-l: #F0ECE6;
  --font: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-h: "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --lh: 1.9;
  --r: 12px;
  --r-s: 8px;
  --r-l: 20px;
  --shadow: 0 4px 12px rgba(0,0,0,.08);
  --shadow-s: 0 1px 3px rgba(0,0,0,.06);
  --shadow-h: 0 8px 25px rgba(91,138,114,.15);
  --ease: cubic-bezier(.4,0,.2,1);
  --header-h: 64px;
}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;font-family:var(--font);font-size:16px;line-height:var(--lh);letter-spacing:.03em;color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased}
a{color:var(--c-primary);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--c-primary-d)}
img{max-width:100%;height:auto;vertical-align:middle}
h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.4}
p{margin:0 0 1.5em}
ul,ol{padding-left:1.5em}

/* ============================================================
   HEADER
   ============================================================ */
.asp-header{
  position:sticky;top:0;z-index:1000;
  background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-d) 100%);
  box-shadow:0 2px 20px rgba(61,107,84,.15);
  height:var(--header-h);
}
.asp-header-in{
  max-width:1200px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
  height:100%;
}
.asp-logo{min-width:0;flex-shrink:1;overflow:hidden}
.asp-logo a{
  font-family:var(--font-h);font-size:1.2rem;font-weight:700;
  color:#fff!important;letter-spacing:.05em;
  text-shadow:0 1px 2px rgba(0,0,0,.1);
  display:block;overflow:hidden;
}
.asp-logo .asp-tagline{
  display:block;font-family:var(--font);font-size:.65rem;font-weight:400;
  color:rgba(255,255,255,.7);letter-spacing:.02em;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;
}

/* Desktop Nav */
.asp-nav{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.asp-nav li a{
  color:rgba(255,255,255,.9)!important;font-size:.85rem;font-weight:500;
  padding:8px 14px;border-radius:var(--r-s);transition:all .2s var(--ease);
}
.asp-nav li a:hover{background:rgba(255,255,255,.15);color:#fff!important}

/* Mobile Menu Toggle */
.asp-menu-toggle{
  display:none;background:none;border:none;color:#fff;font-size:1.5rem;
  cursor:pointer;padding:8px;line-height:1;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.asp-wrap{
  max-width:1200px;margin:0 auto;padding:32px 20px;
  display:grid;grid-template-columns:1fr 340px;gap:32px;
}
.asp-wrap.full-width{grid-template-columns:1fr}
.asp-main{min-width:0}
.asp-sidebar{position:sticky;top:calc(var(--header-h) + 20px);align-self:start}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.asp-breadcrumb{
  max-width:1200px;margin:0 auto;padding:12px 20px;
  font-size:.8rem;color:var(--c-text-m);
}
.asp-breadcrumb a{color:var(--c-text-m)}
.asp-breadcrumb a:hover{color:var(--c-primary)}
.asp-breadcrumb span.sep{margin:0 6px;color:var(--c-border)}

/* ============================================================
   ENTRY CARDS — 記事一覧
   ============================================================ */
.asp-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.asp-card{
  background:var(--c-card);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-s);border:1px solid var(--c-border-l);
  transition:all .3s var(--ease);display:flex;flex-direction:column;
}
.asp-card:hover{box-shadow:var(--shadow-h);transform:translateY(-3px);border-color:var(--c-primary-l)}

.asp-card-thumb{overflow:hidden;aspect-ratio:16/9;position:relative}
.asp-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.asp-card:hover .asp-card-thumb img{transform:scale(1.05)}
.asp-card-cat{
  position:absolute;top:0;left:0;background:var(--c-primary);color:#fff;
  font-size:.7rem;font-weight:600;padding:4px 12px;
  border-radius:0 0 var(--r-s) 0;letter-spacing:.05em;
}

.asp-card-body{padding:16px;flex:1;display:flex;flex-direction:column}
.asp-card-title{
  font-family:var(--font-h);font-size:1rem;font-weight:700;
  line-height:1.5;color:var(--c-text);margin:0 0 8px;flex:1;
}
.asp-card-title a{color:inherit}
.asp-card-title a:hover{color:var(--c-primary)}
.asp-card-excerpt{font-size:.82rem;color:var(--c-text-l);line-height:1.6;margin:0 0 12px}
.asp-card-meta{font-size:.75rem;color:var(--c-text-m);display:flex;gap:12px;margin-top:auto}

/* ============================================================
   SINGLE ARTICLE — 記事本文
   ============================================================ */
.asp-article{
  background:var(--c-card);border-radius:var(--r-l);
  box-shadow:var(--shadow);padding:40px;
}

/* Title */
.asp-article-title{
  font-family:var(--font-h);font-size:1.8rem;font-weight:800;
  line-height:1.45;color:var(--c-text);margin:0 0 16px;
  padding-bottom:16px;border-bottom:3px solid var(--c-primary);
  position:relative;
}
.asp-article-title::after{
  content:'';position:absolute;bottom:-3px;left:0;
  width:80px;height:3px;background:var(--c-accent);
}

/* Meta */
.asp-article-meta{
  display:flex;gap:16px;align-items:center;
  font-size:.8rem;color:var(--c-text-m);margin-bottom:24px;
}
.asp-reading-time{
  background:var(--c-warm);color:var(--c-text-l);
  padding:3px 10px;border-radius:50px;font-size:.75rem;
}

/* Eye catch */
.asp-eyecatch{margin:0 0 32px;border-radius:var(--r);overflow:hidden}
.asp-eyecatch img{width:100%;display:block}

/* Content */
.asp-content{font-size:1rem;line-height:2}

.asp-content h2{
  font-family:var(--font-h);font-size:1.4rem;font-weight:700;
  color:var(--c-primary-d);margin:3rem 0 1.2rem;
  padding:.8rem 1.2rem;
  background:linear-gradient(135deg,var(--c-warm-l),var(--c-warm));
  border-left:5px solid var(--c-primary);
  border-radius:0 var(--r-s) var(--r-s) 0;
}

.asp-content h3{
  font-family:var(--font-h);font-size:1.15rem;font-weight:700;
  color:var(--c-text);margin:2rem 0 .8rem;
  padding:.3rem 0 .3rem .8rem;
  border-left:4px solid var(--c-accent);
  border-bottom:1px dashed var(--c-border);
}

.asp-content h4{
  font-size:1.05rem;font-weight:700;color:var(--c-primary-d);
  margin:1.5rem 0 .5rem;padding-left:.8rem;
  border-left:3px solid var(--c-border);
}

.asp-content p{line-height:2;margin-bottom:1.5em}
.asp-content p strong{
  color:var(--c-primary-d);font-weight:700;
  background:linear-gradient(transparent 60%,var(--c-accent-l) 60%);
  padding:0 2px;
}

.asp-content ul,.asp-content ol{
  background:var(--c-warm-l);border:1px solid var(--c-border-l);
  border-radius:var(--r);padding:1.2rem 1.2rem 1.2rem 2.5rem;
  margin:1rem 0 1.5rem;
}
.asp-content li{padding:4px 0;line-height:1.8}

.asp-content blockquote{
  background:var(--c-warm-l);border-left:5px solid var(--c-primary-l);
  border-radius:0 var(--r) var(--r) 0;
  padding:1.2rem;margin:1.5rem 0;font-style:italic;color:var(--c-text-l);
}

.asp-content table{
  width:100%;border-collapse:separate;border-spacing:0;
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s);margin:1.5rem 0;
}
.asp-content th{background:var(--c-primary);color:#fff;font-weight:600;padding:12px 16px;font-size:.9rem}
.asp-content td{padding:12px 16px;border-bottom:1px solid var(--c-border-l);font-size:.9rem}
.asp-content tr:nth-child(even) td{background:var(--c-warm-l)}

.asp-content hr{border:none;height:2px;background:linear-gradient(90deg,transparent,var(--c-border),transparent);margin:2.5rem 0}

.asp-content img{border-radius:var(--r-s)}

/* Code */
.asp-content code{
  background:#f4f4f4;padding:2px 6px;border-radius:4px;
  font-size:.9em;color:var(--c-accent-d);
}
.asp-content pre{
  background:#2D2D2D;color:#f4f4f4;border-radius:var(--r);
  padding:1.2rem;overflow-x:auto;font-size:.85rem;line-height:1.6;
}

/* ============================================================
   CTA BUTTON
   ============================================================ */
.asp-btn,.wp-block-button__link,a.asp-btn{
  display:inline-block;
  background:linear-gradient(135deg,var(--c-accent),var(--c-accent-d));
  color:#fff!important;font-weight:700;font-size:1.05rem;
  padding:16px 36px;border-radius:50px;border:none;
  box-shadow:0 4px 15px rgba(232,168,124,.4);
  transition:all .3s var(--ease);text-align:center;
  letter-spacing:.05em;cursor:pointer;
}
.asp-btn:hover,.wp-block-button__link:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 25px rgba(232,168,124,.5);
  background:linear-gradient(135deg,var(--c-accent-d),#C5704A);
}
@keyframes asp-pulse{
  0%,100%{box-shadow:0 4px 15px rgba(232,168,124,.4)}
  50%{box-shadow:0 4px 25px rgba(232,168,124,.6)}
}
.asp-cta-area .asp-btn{animation:asp-pulse 2s infinite}

/* ============================================================
   TOC — 目次
   ============================================================ */
.asp-toc{
  background:var(--c-warm-l);border:2px solid var(--c-border);
  border-radius:var(--r);padding:20px;margin:24px 0;
}
.asp-toc-title{
  font-family:var(--font-h);font-size:1rem;font-weight:700;
  color:var(--c-primary-d);text-align:center;margin-bottom:12px;
  cursor:pointer;
}
.asp-toc-title::before{content:'\1F4D6 '}
.asp-toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.asp-toc ol li{counter-increment:toc;padding:4px 0}
.asp-toc ol li::before{
  content:counter(toc) '. ';color:var(--c-primary);font-weight:700;
}
.asp-toc a{color:var(--c-text);font-size:.9rem;border-bottom:1px dashed transparent}
.asp-toc a:hover{color:var(--c-primary);border-bottom-color:var(--c-primary-l)}

/* ============================================================
   AUTHOR CARD
   ============================================================ */
.asp-author{
  display:flex;align-items:flex-start;gap:20px;
  background:var(--c-warm-l);border-radius:var(--r);
  padding:24px;margin:40px 0;border:1px solid var(--c-border);
}
.asp-author img{
  width:80px;height:80px;border-radius:50%;object-fit:cover;
  border:3px solid var(--c-primary-l);flex-shrink:0;
}
.asp-author-info h4{margin:0 0 4px;font-family:var(--font-h);color:var(--c-primary-d);font-size:1rem}
.asp-author-info p{margin:0;font-size:.85rem;color:var(--c-text-l);line-height:1.6}

/* ============================================================
   SIDEBAR
   ============================================================ */
.asp-widget{
  background:var(--c-card);border-radius:var(--r);
  padding:20px;margin-bottom:20px;
  box-shadow:var(--shadow-s);border:1px solid var(--c-border-l);
}
.asp-widget-title{
  font-family:var(--font-h);font-size:.95rem;font-weight:700;
  color:var(--c-primary-d);padding-bottom:8px;
  border-bottom:2px solid var(--c-primary);margin-bottom:12px;
  position:relative;
}
.asp-widget-title::after{
  content:'';position:absolute;bottom:-2px;left:0;
  width:40px;height:2px;background:var(--c-accent);
}

/* ============================================================
   FOOTER
   ============================================================ */
.asp-footer{
  background:linear-gradient(135deg,var(--c-primary-d),#2A4F3D);
  color:rgba(255,255,255,.85);padding:48px 0 24px;
}
.asp-footer-in{
  max-width:1200px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
}
.asp-footer-col h4{
  color:#fff;font-size:.9rem;font-weight:700;margin:0 0 12px;
  padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.15);
}
.asp-footer-col ul{list-style:none;padding:0;margin:0}
.asp-footer-col li{padding:4px 0}
.asp-footer-col a{color:rgba(255,255,255,.7);font-size:.85rem}
.asp-footer-col a:hover{color:var(--c-accent-l)}

.asp-footer-bottom{
  max-width:1200px;margin:0 auto;padding:24px 20px 0;
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.75rem;color:rgba(255,255,255,.4);
}
.asp-footer-nav{display:flex;gap:16px;list-style:none;padding:0;margin:0}
.asp-footer-nav a{color:rgba(255,255,255,.5);font-size:.75rem}
.asp-footer-nav a:hover{color:var(--c-accent-l)}

/* ============================================================
   PAGINATION
   ============================================================ */
.asp-pagination{display:flex;justify-content:center;gap:8px;margin:40px 0}
.asp-pagination a,.asp-pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;font-weight:600;font-size:.9rem;
  border:2px solid var(--c-border);color:var(--c-text-l);
  background:var(--c-card);transition:all .2s var(--ease);
}
.asp-pagination a:hover,.asp-pagination .current{
  background:var(--c-primary);border-color:var(--c-primary);color:#fff;
}

/* ============================================================
   READING PROGRESS BAR
   ============================================================ */
#asp-progress{
  position:fixed;top:0;left:0;height:3px;
  background:linear-gradient(90deg,var(--c-primary),var(--c-accent));
  z-index:9999;width:0;transition:width .1s ease;
}

/* ============================================================
   SNS SHARE
   ============================================================ */
.asp-share{margin:32px 0;text-align:center}
.asp-share-title{font-size:.85rem;color:var(--c-text-m);margin-bottom:12px}
.asp-share-btns{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.asp-share-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;color:#fff;
  font-size:1.1rem;transition:all .2s var(--ease);
}
.asp-share-btn:hover{transform:translateY(-2px);opacity:.85;color:#fff!important}
.asp-share-btn.x{background:#000}
.asp-share-btn.fb{background:#1877F2}
.asp-share-btn.line{background:#06C755}
.asp-share-btn.hatena{background:#00A4DE}
.asp-share-btn.pocket{background:#EF3F56}
.asp-share-btn.copy{background:var(--c-text-l)}

/* ============================================================
   BOXES — ブロガー向け装飾ブロック
   ============================================================ */
.asp-box{padding:1.2rem;border-radius:var(--r-s);margin:1.5rem 0}
.asp-box-info{background:#EBF5FF;border-left:5px solid #4A90D9}
.asp-box-warning{background:#FFF8E6;border-left:5px solid #F5A623}
.asp-box-success{background:#E8F5E9;border-left:5px solid var(--c-primary)}
.asp-box-danger{background:#FFEBEE;border-left:5px solid #E53935}
.asp-box-title{font-weight:700;margin-bottom:8px;font-size:.95rem}

/* Speech bubble */
.asp-speech{display:flex;gap:16px;align-items:flex-start;margin:1.5rem 0}
.asp-speech-icon{flex-shrink:0;text-align:center}
.asp-speech-icon img{width:60px;height:60px;border-radius:50%;border:2px solid var(--c-border)}
.asp-speech-icon span{display:block;font-size:.7rem;color:var(--c-text-m);margin-top:4px}
.asp-speech-text{
  background:var(--c-warm-l);border-radius:var(--r);padding:16px;
  position:relative;flex:1;border:1px solid var(--c-border-l);
}
.asp-speech-text::before{
  content:'';position:absolute;left:-8px;top:20px;
  border:8px solid transparent;border-right-color:var(--c-border-l);
}

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
.asp-totop{
  position:fixed;bottom:24px;right:24px;
  width:48px;height:48px;border-radius:50%;
  background:var(--c-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;box-shadow:var(--shadow);
  cursor:pointer;transition:all .3s var(--ease);
  opacity:0;pointer-events:none;border:none;
}
.asp-totop.visible{opacity:1;pointer-events:auto}
.asp-totop:hover{background:var(--c-primary-d);transform:translateY(-3px)}

/* ============================================================
   404
   ============================================================ */
.asp-404{text-align:center;padding:80px 20px}
.asp-404 h1{font-family:var(--font-h);font-size:6rem;color:var(--c-primary-l);margin:0}
.asp-404 p{font-size:1.1rem;color:var(--c-text-l);margin:16px 0 32px}

/* ============================================================
   SEARCH FORM
   ============================================================ */
.asp-search{display:flex;gap:8px}
.asp-search input[type="text"]{
  flex:1;border:2px solid var(--c-border);border-radius:50px;
  padding:10px 20px;font-size:.9rem;outline:none;
  transition:border-color .2s var(--ease);
}
.asp-search input[type="text"]:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(91,138,114,.1)}
.asp-search button{
  background:var(--c-primary);color:#fff;border:none;border-radius:50px;
  padding:10px 20px;cursor:pointer;font-size:.9rem;font-weight:600;
  transition:background .2s var(--ease);
}
.asp-search button:hover{background:var(--c-primary-d)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* --- Tablet --- */
@media(max-width:1024px){
  .asp-wrap{grid-template-columns:1fr;gap:24px}
  .asp-sidebar{position:static}
  .asp-footer-in{grid-template-columns:1fr 1fr}
}

/* --- Mobile --- */
@media(max-width:768px){
  :root{--header-h:56px}
  body{font-size:15px}

  /* Mobile menu toggle */
  .asp-menu-toggle{display:block}
  .asp-nav{
    display:none;position:absolute;top:var(--header-h);left:0;right:0;
    background:var(--c-primary-d);flex-direction:column;padding:8px 0;
    box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:999;
  }
  .asp-nav.open{display:flex}
  .asp-nav li{border-bottom:1px solid rgba(255,255,255,.08)}
  .asp-nav li:last-child{border-bottom:none}
  .asp-nav li a{padding:14px 20px;border-radius:0;display:block;font-size:.95rem}
  /* Sub menu */
  .asp-nav .sub-menu{padding-left:16px;background:rgba(0,0,0,.1)}
  .asp-nav .sub-menu li a{padding:10px 20px;font-size:.85rem}

  /* Cards */
  .asp-cards{grid-template-columns:1fr}

  /* Article */
  .asp-article{padding:20px 16px;border-radius:var(--r)}
  .asp-article-title{font-size:1.3rem}
  .asp-article-meta{flex-wrap:wrap;gap:8px}
  .asp-content h2{font-size:1.15rem;padding:.6rem 1rem}
  .asp-content h3{font-size:1.02rem}
  .asp-content ul,.asp-content ol{padding:1rem 1rem 1rem 2rem}
  .asp-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Buttons — full width on mobile */
  .asp-btn,.wp-block-button__link{font-size:.95rem;padding:14px 24px;width:100%;display:block;text-align:center}

  /* Author */
  .asp-author{flex-direction:column;align-items:center;text-align:center;gap:12px}

  /* Footer */
  .asp-footer-in{grid-template-columns:1fr}
  .asp-footer-bottom{flex-direction:column;gap:12px;text-align:center}

  /* Share */
  .asp-share-btn{width:42px;height:42px;font-size:1rem}

  /* TOC */
  .asp-toc{padding:16px}

  /* Breadcrumb */
  .asp-breadcrumb{padding:8px 16px;font-size:.75rem;overflow-x:auto;white-space:nowrap}

  /* Pagination */
  .asp-pagination{gap:6px}
  .asp-pagination a,.asp-pagination span{width:36px;height:36px;font-size:.8rem}
}

/* --- Small mobile --- */
@media(max-width:480px){
  .asp-article-title{font-size:1.15rem}
  .asp-content h2{font-size:1.05rem}
  .asp-wrap{padding:12px 10px}
  .asp-eyecatch{margin:0 -16px 24px;border-radius:0}
  .asp-card-body{padding:12px}
  .asp-card-title{font-size:.9rem}
  .asp-logo a{font-size:.95rem}
  .asp-logo .asp-tagline{display:none}
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .asp-header,.asp-footer,.asp-sidebar,.asp-trust,.asp-share,
  .asp-totop,#asp-progress,.asp-cta-area,.asp-toc{display:none!important}
  body{background:#fff;color:#000}
  .asp-article{box-shadow:none;padding:0}
  .asp-content h2{background:none;border-left:3px solid #333}
}

/* ============================================================
   ANIMATION
   ============================================================ */
/* Screen reader only (hidden visually, accessible to SEO/screen readers) */
.asp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.asp-fade{opacity:0;transform:translateY(20px);transition:all .6s var(--ease)}
.asp-fade.visible{opacity:1;transform:translateY(0)}