/*
Theme Name: VoiceCraft News
Theme URI: https://example.com/
Author: You
Description: ガジェット系・白基調（黄・水色アクセント）のニュース風テーマ。VoiceCraft誘導強め。
Version: 0.1.0
Text Domain: voicecraft-news
*/

:root{
  --bg: #ffffff;
  --text: #0f172a;     /* slate-900 */
  --muted:#64748b;     /* slate-500 */
  --line:#e2e8f0;      /* slate-200 */
  --card:#ffffff;

  --accent-yellow:#fbbf24; /* amber-400 */
  --accent-sky:#38bdf8;    /* sky-400 */
  --accent-sky-weak:#e0f2fe;

  --shadow: 0 10px 24px rgba(2,6,23,.08);
  --radius: 14px;

  --container: 1120px;
  --gap: 18px;

  --sidebar: 340px;   /* 右カラム固定気味 */
  --main: 1fr;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 70% -100px, var(--accent-sky-weak), transparent 70%),
              linear-gradient(#fff, #fff);
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
img{max-width:100%; height:auto; display:block}

.vc-container{
  width:min(var(--container), calc(100% - 32px));
  margin-inline:auto;
}

.vc-header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.vc-header-inner{
  display:flex; align-items:center; gap:16px;
  padding:14px 0;
}
.vc-brand{
  font-weight:800; letter-spacing:.02em;
  display:flex; align-items:center; gap:10px;
}
.vc-logo{
  width:34px; height:34px; border-radius:10px;
  background: conic-gradient(from 180deg, var(--accent-sky), var(--accent-yellow), var(--accent-sky));
  box-shadow: 0 10px 20px rgba(56,189,248,.25);
}
.vc-nav{
  margin-left:auto;
  display:flex; align-items:center; gap:14px;
}
.vc-nav a{
  font-weight:700; color:#0b1220;
  padding:10px 10px;
  border-radius:10px;
}
.vc-nav a:hover{background: #f8fafc}
.vc-search{
  margin-left:8px;
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
}
.vc-search input{
  border:0; outline:0; background:transparent;
  width:180px; font-size:14px;
}
.vc-search button{
  border:0; background:transparent; cursor:pointer;
  font-size:14px; color:var(--muted);
}

.vc-hero{
  margin:18px 0 22px;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(226,232,240,.9);
  background:
    linear-gradient(120deg, rgba(56,189,248,.18), rgba(251,191,36,.18)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop stop-color='%2338bdf8' stop-opacity='.32'/%3E%3Cstop offset='1' stop-color='%23fbbf24' stop-opacity='.25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='400' fill='url(%23g)'/%3E%3Ccircle cx='900' cy='120' r='140' fill='%23ffffff' fill-opacity='.18'/%3E%3Ccircle cx='280' cy='300' r='200' fill='%23000000' fill-opacity='.04'/%3E%3C/svg%3E");
  background-size: cover;
}
.vc-hero-inner{
  padding:28px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:end;
}
.vc-hero h1{
  margin:0 0 8px;
  font-size:42px;
  letter-spacing:.01em;
}
.vc-hero p{margin:0; color:rgba(15,23,42,.78); line-height:1.7}
.vc-hero .vc-cta{
  display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;
}
.vc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:12px;
  font-weight:800;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
}
.vc-btn.primary{
  border:0;
  background: linear-gradient(135deg, var(--accent-yellow), #ffd966);
  box-shadow: 0 10px 18px rgba(251,191,36,.28);
}
.vc-btn.sky{
  border:0;
  background: linear-gradient(135deg, var(--accent-sky), #8be0ff);
  box-shadow: 0 10px 18px rgba(56,189,248,.22);
}

.vc-layout{
  display:grid;
  grid-template-columns: minmax(0, var(--main)) var(--sidebar);
  gap: var(--gap);
  align-items:start;
  margin-bottom: 40px;
}
.vc-main{min-width:0}
.vc-sidebar{position:sticky; top:86px}

.vc-section-title{
  display:flex; align-items:center; gap:10px;
  margin:0 0 12px;
  font-size:14px; letter-spacing:.08em;
  color:var(--muted);
  text-transform:uppercase;
}
.vc-section-title::before{
  content:"";
  width:18px; height:10px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent-sky), var(--accent-yellow));
}

.vc-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.vc-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 10px 18px rgba(2,6,23,.05);
}
.vc-card .thumb{
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, rgba(56,189,248,.22), rgba(251,191,36,.22));
}
.vc-card .body{padding:14px}
.vc-meta{display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:12px}
.vc-card h3{margin:8px 0 6px; font-size:18px; line-height:1.35}
.vc-excerpt{margin:0; color:rgba(15,23,42,.74); line-height:1.65; font-size:14px}

.vc-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px; font-weight:800;
  background:#f8fafc;
  border:1px solid var(--line);
}
.vc-chip.tool{background: rgba(56,189,248,.15); border-color: rgba(56,189,248,.30)}
.vc-chip.game{background: rgba(251,191,36,.18); border-color: rgba(251,191,36,.35)}
.vc-chip.video{background: rgba(125,211,252,.18); border-color: rgba(125,211,252,.35)}

.vc-widget{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: 0 10px 18px rgba(2,6,23,.05);
  margin-bottom:14px;
}
.vc-widget-title{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--muted);
  text-transform:uppercase;
}
.vc-support{
  border-radius: var(--radius);
  padding:14px;
  border:1px solid rgba(251,191,36,.35);
  background: linear-gradient(135deg, rgba(251,191,36,.25), rgba(56,189,248,.12));
}
.vc-support .vc-btn{width:100%}

.vc-post{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:20px;
  box-shadow: var(--shadow);
}
.vc-post h1{margin:0 0 10px; font-size:32px}
.vc-post .vc-meta{margin-bottom:14px}
.vc-content{line-height:1.9}
.vc-content p{margin:0 0 14px}
.vc-content a{color:#0369a1; text-decoration:underline}

.vc-footer{
  border-top:1px solid var(--line);
  padding:22px 0;
  color:var(--muted);
  font-size:13px;
}

@media (max-width: 980px){
  :root{ --sidebar: 320px; }
  .vc-hero-inner{grid-template-columns:1fr}
  .vc-hero .vc-cta{justify-content:flex-start}
}
@media (max-width: 820px){
  .vc-layout{grid-template-columns:1fr}
  .vc-sidebar{position:static}
  .vc-search input{width:120px}
}
@media (max-width: 520px){
  .vc-grid-2{grid-template-columns:1fr}
  .vc-hero h1{font-size:34px}
}
/* VoiceCraft CF7 */
.vc-cf7 { max-width: 720px; }
.vc-label { margin: 14px 0 6px; font-weight: 700; }
.vc-hr { border: 0; border-top: 1px solid rgba(0,0,0,.12); margin: 18px 0; }
.vc-h4 { margin: 0 0 6px; font-size: 16px; }
.vc-type .wpcf7-list-item { margin-right: 14px; }
.vc-block { padding: 12px; border: 1px solid rgba(0,0,0,.12); border-radius: 12px; background: rgba(0,0,0,.03); }
.vc-privacy { margin-top: 10px; }
.vc-submit { padding: 12px 16px; border-radius: 12px; }


/* X button */
.vc-xbtn{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(56,189,248,.14), rgba(251,191,36,.12)),
    #fff;
  box-shadow: 0 10px 18px rgba(2,6,23,.05);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.vc-xbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(56,189,248,.35);
  box-shadow: 0 14px 26px rgba(2,6,23,.09);
}

.vc-xbtn:active{
  transform: translateY(0px);
}

.vc-xbtn-icon{
  width:40px;
  height:40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#0f172a;
  background: linear-gradient(135deg, rgba(15,23,42,.08), rgba(15,23,42,.02));
  border:1px solid rgba(15,23,42,.10);
}

.vc-xbtn-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.vc-xbtn-label{
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vc-xbtn-sub{
  font-size:12px;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vc-xbtn-arrow{
  margin-left:auto;
  font-weight:900;
  color: rgba(15,23,42,.55);
}
.thumb{
  display:block;
  width:100%;
  max-height:200px;
  height:auto;
  object-fit:cover; /* 高さ制限で切り取りたいなら */
}

/* Works list in sidebar */
.vc-works-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.vc-works-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(56,189,248,.10), rgba(251,191,36,.08)),
    #fff;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.vc-works-item:hover{
  transform: translateY(-1px);
  border-color: rgba(56,189,248,.30);
  box-shadow: 0 14px 26px rgba(2,6,23,.08);
}

.vc-works-item:active{ transform: translateY(0px); }

.vc-works-badge{
  flex:0 0 auto;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#f8fafc;
  color:#0f172a;
}

.vc-works-badge.tool{
  background: rgba(56,189,248,.16);
  border-color: rgba(56,189,248,.30);
}
.vc-works-badge.game{
  background: rgba(251,191,36,.18);
  border-color: rgba(251,191,36,.35);
}
.vc-works-badge.video{
  background: rgba(125,211,252,.18);
  border-color: rgba(125,211,252,.35);
}
.vc-works-badge.sky{
  background: rgba(56,189,248,.12);
  border-color: rgba(56,189,248,.22);
}

.vc-works-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.vc-works-title{
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vc-works-desc{
  font-size:12px;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vc-works-arrow{
  margin-left:auto;
  font-weight:900;
  color: rgba(15,23,42,.55);
}

.vc-works-note{
  margin-top:10px;
  font-size:12px;
  color: var(--muted);
}