:root{
  --bg:#f9f9fb;
  --card:#ffffff;
  --accent-1:#ff6b6b; /* 赤系 */
  --accent-2:#b927d6; /* 青系 */
  --accent-3:#28d436; /* 黄系 */
  --accent-4:#7affb0; /* 緑系 */
  --link:#0b66ff;    /* リンク青 */
  --text:#222;
  --muted:#666;
  --radius:12px;
  --shadow: 0 6px 18px rgba(20,20,30,0.06);
  --cute-1: #ffdce6; /* pastel pink */
  --cute-2: #fff6e6; /* pastel  */
  --cute-3: #fff6e0; /* pastel cream */
  --cute-4: #eafff0; /* pastel mint */
  --heading-glow: 0 6px 18px rgba(107,193,255,0.12);
}

/* Reset & basics */
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--bg);
  color:var(--text);
  -webkit-text-size-adjust:100%;
}

/* 全幅で両端を画面端に合わせる */
.container{
  width:100vw;
  max-width:100%;
  padding:14px; /* スマホ横でも左右14pxにしてほぼ端まで */
  margin:0 auto;
}

/* ヘッダー */
.header{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  margin-bottom:12px;
}

/* タイトル */
.site-title{
  display:block;
  padding:10px 8px;
  background:linear-gradient(90deg, rgba(255,107,107,0.12), rgba(107,193,255,0.08));
  border-radius:10px;
  box-shadow:var(--shadow);
}
.site-title h1{
  margin:0;
  font-size:20px;
  line-height:1.05;
  color:var(--accent-1);
  font-weight:800;
}
.site-title p{
  margin:6px 0 0 0;
  color:var(--muted);
  font-size:13px;
}

/* ボタン群 */
.controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.btn{
  border:0;
  cursor:pointer;
  padding:10px 12px;
  color:#fff;
  font-weight:700;
  font-size:14px;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.06);
}
.btn:active{transform:translateY(1px)}
.btn-random{background:linear-gradient(90deg,var(--accent-1),#ff9a6b)}
.btn-copy{background:linear-gradient(90deg,var(--accent-3),#32d164)}
.btn-png{background:linear-gradient(90deg,var(--accent-2),#b927d6)}
.share-btn{
  background:var(--accent-4);
  color:#033;
  padding:9px 10px;
  font-weight:700;
}

/* ソーシャル群を右寄せ（横幅のあるとき） */
.share-group{
  display:flex;
  gap:8px;
  margin-left:auto;
}

/* 文章自動作成の枠（大きく太字で表示） */
.auto-box{
  margin-top:10px;
  background:var(--card);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  width:100%;
}
#auto-text{
  font-weight:900;
  font-size:20px;
  line-height:1.4;
  color:var(--text);
  margin:0;
  min-height:68px;
  display:flex;
  align-items:center;
  word-break:break-word;
}

/* フラッシュ効果 */
#auto-text.flash{
  outline:3px solid rgba(107,193,255,0.3);
  transition:outline 0.4s ease;
}

/* 検索欄 */
.search-area{
  margin-top:14px;
  display:flex;
  gap:8px;
  align-items:center;
}
.search-input{
  flex:1;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #e6e9ee;
  font-size:15px;
  background:#fff;
}
.search-submit{
  padding:10px 12px;
  border-radius:10px;
  border:0;
  background:var(--link);
  color:#fff;
  font-weight:700;
}

/* SEO向けの長文エリア */
.seo-card{
  margin-top:18px;
  background:linear-gradient(180deg, #fff, #fcfcff);
  padding:18px;
  border-radius:10px;
  box-shadow:var(--shadow);
}
.seo-card h2{
  margin:0 0 8px 0;
  font-size:18px;
  color:var(--accent-2);
}
.seo-card p{
  color:var(--muted);
  line-height:1.75;
  margin:10px 0;
  font-size:14px;
}

/* 関連リンク */
.related{
  margin-top:14px;
  padding:12px;
  background:var(--card);
  border-radius:10px;
  box-shadow:var(--shadow);
}
.related a{ color:var(--link); text-decoration:none; font-weight:700; }

/* フッターリンク */
.footer-links{
  margin-top:14px;
  padding:12px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.footer-links a{ color:var(--link); text-decoration:none; }

/* リンク青を強調 */
a{ color:var(--link) }

/* マーク（ハイライト） */
mark{
  background:linear-gradient(90deg,#fff59d,#ffd36b);
  padding:0 4px;
  border-radius:4px;
}

/* トースト */
#toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:28px;
  background:rgba(20,20,30,0.9);
  color:#fff;
  padding:10px 14px;
  border-radius:20px;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
#toast.visible{ opacity:1; transform:translateX(-50%) translateY(-6px); }

/* レスポンシブ調整 */
@media(min-width:720px){
  .header{ flex-direction:row; align-items:center }
  .site-title{ flex:1 }
  .controls{ flex:2; justify-content:flex-end }
  #auto-text{ font-size:22px }
}

/* ===========================
   Cute heading styles for h2 and h3
   =========================== */

/* Base heading reset */
h2, h3 {
  margin:0;
  padding:10px 14px;
  border-radius:10px;
  display:inline-block;
  line-height:1.15;
  font-weight:800;
  letter-spacing:0.2px;
  color:var(--text);
  background:transparent;
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease;
}

/* Shared decorative pseudo-elements */
h2::before, h3::before {
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:10px;
  border-radius:50%;
  box-shadow:0 6px 14px rgba(20,20,30,0.06);
  opacity:0.95;
}

/* Cute h2: larger, soft gradient, little ribbon tag and confetti dot */
h2{
  font-size:20px;
  padding:12px 18px 12px 44px;
  background:linear-gradient(90deg, var(--cute-1), rgba(255,255,255,0.6));
  border:1px solid rgba(255,220,230,0.6);
  box-shadow: var(--heading-glow);
  color:#752d3f;
}
h2::before{
  background:linear-gradient(180deg, var(--accent-1), #ff9aaf);
  left:18px;
  width:14px;
  height:14px;
  top:50%;
  transform:translateY(-50%) rotate(25deg);
  border-radius:4px;
  box-shadow:0 6px 18px rgba(255,107,107,0.12);
}

/* Cute h3: compact, pastel underline and tiny star accent */
h3{
  font-size:16px;
  padding:8px 12px 8px 38px;
  background:linear-gradient(90deg, rgba(255, 106, 255, 0.12), rgba(254, 220, 255, 0.06));
  border:1px solid rgba(255, 107, 245, 0.12);
  color: #a40181;
}
h3::before{
  background:linear-gradient(180deg, var(--accent-2), #ff9bf8);
  left:12px;
  width:10px;
  height:10px;
  border-radius:50%;
  box-shadow:0 6px 12px rgba(107,193,255,0.12);
}

/* Underline styles for both headings (cute dashed underline) */
h2, h3 {
  background-repeat:no-repeat;
  background-position: left calc(100% - 8px);
}
h2 .underline, h3 .underline {
  display:block;
  margin-top:8px;
  height:6px;
  border-radius:6px;
  background:linear-gradient(90deg, rgba(255,107,107,0.18), rgba(107,193,255,0.15));
}

/* Hover / focus micro interactions */
h2:hover, h3:hover, h2:focus, h3:focus {
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(20,20,30,0.08);
  cursor:default;
}

/* Small variant classes for compact contexts */
.h2-small{
  font-size:16px;
  padding:8px 12px 8px 36px;
  border-radius:8px;
}
.h3-small{
  font-size:14px;
  padding:6px 10px 6px 32px;
  border-radius:8px;
}

/* Accessible focus ring for keyboard users */
h2:focus-visible, h3:focus-visible {
  outline:3px solid rgba(11,102,255,0.14);
  outline-offset:4px;
  border-radius:10px;
}

/* Decorative confetti near headings for larger screens */
@media(min-width:920px){
  h2::before, h3::before{
    transform:translateY(-50%) rotate(18deg);
  }
  h2::after{
    right:14px;
    width:10px;
    height:10px;
    border-radius:50%;
  }
  /* tiny confetti dots using box-shadow on an invisible pseudo */
  h2[data-confetti="true"]::marker,
  h3[data-confetti="true"]::marker { /* marker unused but safe fallback */
    content:"";
  }
}

/* Ensure headings are responsive */
@media(max-width:480px){
  h2{ padding:10px 12px 10px 42px; font-size:18px }
  h3{ padding:8px 10px 8px 36px; font-size:15px }
}

/* Keep original components visually consistent when headings used inside cards */
.seo-card h2, .related h3, .auto-box h2 {
  margin-bottom:10px;
  display:block;
}