.top-wrap,.top-hero,.top-hero-l,.top-hero-r,.top-sec,.top-posts-grid,.top-news-grid,.top-hobby-grid,.top-kayoi-grid,.top-groups-pill-wrap,.top-cta-sec,.popup_content,.top-mq{box-sizing:border-box}

:root{
  --red:#8E2421; --red-s:rgba(142,36,33,.08);
  --grn:#81BF5C; --grn-d:#4e8a2b; --grn-s:rgba(129,191,92,.1);
  --wh:#fff; --cr:#F8F6F1; --st:#F1EFE9;
  --dk:#141414; --ink:#2c2c2c; --mid:#555; --mute:#999;
  --bd:#E4E2DC;
  --r:16px; --rl:24px;
  --ease:cubic-bezier(.22,1,.36,1);
}

body{font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:var(--wh);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}



/* ── SCROLL REVEAL ── */
.sr{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.sr.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ── WRAP ── */
.top-wrap{max-width:1200px;margin:0 auto;padding:0 48px}
.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:400;display:flex;align-items:center;gap:10px}
.kicker::before{content:'';width:24px;height:1px;background:var(--mute)}

/* ════════════════════════════════════
   HERO
════════════════════════════════════ */
.top-hero{
  position:relative;
  min-height:680px; height:auto; margin-top:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
}
.top-hero-l{
  background:var(--cr);
  padding:80px 64px 80px 80px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  z-index:1;
}
.top-hero-kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:32px;display:flex;align-items:center;gap:10px}
.top-hero-kicker::before{content:'';width:24px;height:1px;background:var(--mute)}
.top-hero-h1{
  font-family:'Noto Serif JP',serif;
  font-size:clamp(36px,4.2vw,64px);
  font-weight:700;
  line-height:1.2;
  color:var(--dk);
  margin-top:0;
  margin-bottom:24px;
}
.top-hero-h1 em{font-style:normal;color:var(--red)}
.top-hero-lead{
  font-size:16px;
  font-weight:300;
  color:var(--mid);
  line-height:2;
  margin-bottom:40px;
  max-width:440px;
}
.top-hero-stats{
  display:flex;
  gap:32px;
  margin-bottom:40px;
}
.top-stat{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.top-stat-num{
  font-family:'Noto Serif JP',serif;
  font-size:28px;
  font-weight:700;
  color:var(--dk);
  line-height:1;
}
.top-stat-num span{font-size:14px;font-weight:400;color:var(--mid);margin-left:2px}
.top-stat-label{font-size:11px;color:var(--mute);letter-spacing:.06em}
.top-hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--dk);color:#fff;
  font-size:14px;font-weight:600;
  padding:16px 32px;border-radius:50px;
  transition:opacity .2s;
}
.btn-primary:hover{opacity:.82}
.btn-secondary{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--dk);
  font-size:14px;font-weight:400;
  padding:16px 28px;border-radius:50px;
  border:1px solid var(--bd);
  transition:background .2s;
}
.btn-secondary:hover{background:var(--st)}

/* 右カラム：固定ヒーロー画像 */
.top-hero-r{
  position:relative;
  overflow:hidden;
  background-image:url('https://oshiruco.com/wp-content/themes/oshiruco-marche/images/hero.png');
  background-repeat:no-repeat;
  background-position:right center;
  background-size:cover;
}
.top-hero-slide-ov{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(248,246,241,.3) 0%,transparent 40%);
}

/* サイドバー（会員数・アプリDL） */
.top-hero-side{
  position:absolute;
  top:0;right:0;
  width:280px;
  z-index:10;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:24px;
  pointer-events:none;
}
.top-members-card{
  background:rgba(255,255,255,.95);
  border:1px solid var(--bd);
  border-radius:var(--r);
  padding:20px 24px;
  pointer-events:all;
  backdrop-filter:blur(8px);
}
.top-members-label{font-size:11px;color:var(--mute);letter-spacing:.08em;margin-bottom:6px}
.top-members-num{
  font-family:'Noto Serif JP',serif;
  font-size:32px;font-weight:700;color:var(--dk);line-height:1;
}
.top-members-num span{font-size:13px;font-weight:400;color:var(--mid);margin-left:4px}
.top-members-date{font-size:10px;color:var(--mute);margin-top:4px}
.top-app-badges{
  display:flex;flex-direction:column;gap:8px;
  pointer-events:all;
}
.top-app-badges a{
  display:block;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.1);
  transition:transform .2s;
}
.top-app-badges a:hover{transform:translateY(-2px)}
.top-app-badges img{width:100%;height:auto}

/* ════════════════════════════════════
   MARQUEE
════════════════════════════════════ */
.top-mq{
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
  overflow:hidden;padding:14px 0;
  background:var(--wh);
}
.top-mq-track{
  display:flex;
  animation:topmq 40s linear infinite;
  white-space:nowrap;width:max-content;
}
.top-mq-item{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12px;color:var(--mute);letter-spacing:.06em;
  padding:0 36px;border-right:1px solid var(--bd);flex-shrink:0;
}
.top-mq-dot{width:5px;height:5px;border-radius:50%;background:var(--grn);flex-shrink:0}
@keyframes topmq{to{transform:translateX(-50%)}}

/* ════════════════════════════════════
   SECTION COMMON
════════════════════════════════════ */
.top-sec{padding:88px 0}
.top-sec-head{margin-bottom:56px}
.top-sec-title{
  font-family:'Noto Serif JP',serif;
  font-size:clamp(26px,3vw,42px);
  font-weight:700;color:var(--dk);
  line-height:1.3;margin-top:16px;margin-bottom:0;
}
.top-sec-title em{font-style:normal;color:var(--red)}
.top-sec-more{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--grn-d);font-weight:600;
  letter-spacing:.06em;margin-top:20px;
  transition:gap .2s;
}
.top-sec-more:hover{gap:10px}
.top-sec-more::after{content:'→';font-size:14px}

/* ════════════════════════════════════
   NEWS SECTION
════════════════════════════════════ */
.top-news-sec{background:var(--wh)}
.top-news-grid{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:48px;
  align-items:start;
}
.top-news-list{list-style:none}
.top-news-item{
  border-bottom:1px solid var(--bd);
}
.top-news-item a{
  display:flex;align-items:baseline;gap:20px;
  padding:20px 0;
  transition:opacity .2s;
}
.top-news-item a:hover{opacity:.7}
.top-news-date{
  font-size:12px;color:var(--mute);
  white-space:nowrap;flex-shrink:0;letter-spacing:.04em;
}
.top-news-ttl{
  font-size:14px;font-weight:500;color:var(--dk);
  line-height:1.7;
}

/* 右サイドバー */
.top-sidebar{display:flex;flex-direction:column;gap:20px}
.top-biz-banner img{width:100%;border-radius:var(--r);display:block}
.top-biz-banner{
  border-radius:var(--r);overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  transition:transform .2s;
}
.top-biz-banner:hover{transform:translateY(-3px)}

/* ════════════════════════════════════
   TOKUNETA SECTION
════════════════════════════════════ */
.top-tok-sec{background:var(--cr)}
.top-posts-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--bd);
  border:1px solid var(--bd);
  border-radius:var(--r);
  overflow:hidden;
}
.top-post-card{
  background:var(--wh);
  cursor:pointer;
  transition:background .2s;
  position:relative;
}
.top-post-card:hover{background:var(--st)}
.top-post-img{
  aspect-ratio:3/2;
  overflow:hidden;
  position:relative;
}
.top-post-img img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.top-post-card:hover .top-post-img img{transform:scale(1.04)}
.top-post-body{padding:16px}
.top-post-date{font-size:11px;color:var(--mute);margin-bottom:6px}
.top-post-ttl{
  font-size:13px;font-weight:700;color:var(--dk);
  line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;
}
.top-post-card a.permalink{
  position:absolute;inset:0;
  font-size:0;
}
/* PR badge */
.top-post-pr{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;color:var(--mute);
  background:var(--st);
  padding:2px 8px;border-radius:50px;
  margin-top:8px;
}

/* ════════════════════════════════════
   GROUPS SECTION
════════════════════════════════════ */
.top-groups-sec{background:var(--wh)}
.top-groups-pill-wrap{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:32px;
}
.top-group-pill{
  font-size:12px;color:var(--ink);
  background:var(--st);
  border:1px solid var(--bd);
  padding:6px 14px;border-radius:50px;
  transition:background .2s,border-color .2s;
  cursor:pointer;
}
.top-group-pill:hover{background:var(--grn-s);border-color:rgba(78,138,43,.25)}
.top-groups-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--dk);color:#fff;
  font-size:13px;font-weight:600;
  padding:14px 28px;border-radius:50px;
  transition:opacity .2s;
}
.top-groups-cta:hover{opacity:.82}

/* ════════════════════════════════════
   HOBBY SHOW SECTION
════════════════════════════════════ */
.top-hobby-sec{background:var(--cr)}
.top-hobby-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--bd);
  border:1px solid var(--bd);
  border-radius:var(--r);overflow:hidden;
}
/* 同post-cardと共通スタイル適用 */

/* ════════════════════════════════════
   KAYOINOBA SECTION
════════════════════════════════════ */
.top-kayoi-sec{background:var(--wh)}
.top-kayoi-head{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.top-kayoi-logo{height:40px;width:auto}
.top-kayoi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--bd);
  border:1px solid var(--bd);
  border-radius:var(--r);overflow:hidden;
}

/* ════════════════════════════════════
   CTA SECTION
════════════════════════════════════ */
.top-cta-sec{
  background:var(--dk);
  padding:96px 0;
  text-align:center;
  position:relative;overflow:hidden;
}
.top-cta-sec::before{
  content:'';position:absolute;
  top:-100px;right:-100px;
  width:400px;height:400px;border-radius:50%;
  background:rgba(129,191,92,.06);pointer-events:none;
}
.top-cta-sec::after{
  content:'';position:absolute;
  bottom:-80px;left:-80px;
  width:320px;height:320px;border-radius:50%;
  background:rgba(142,36,33,.05);pointer-events:none;
}
.top-cta-k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:20px}
.top-cta-h{
  font-family:'Noto Serif JP',serif;
  font-size:clamp(24px,3vw,42px);
  font-weight:700;color:#fff;
  line-height:1.4;margin-top:0;margin-bottom:16px;
}
.top-cta-p{font-size:15px;font-weight:300;color:rgba(255,255,255,.6);line-height:2;margin-bottom:40px}
.top-cta-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.top-cta-btn-wh{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--dk);
  font-size:14px;font-weight:600;
  padding:16px 32px;border-radius:50px;
  transition:opacity .2s;
}
.top-cta-btn-wh:hover{opacity:.85}
.top-cta-btn-gw{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);color:#fff;
  font-size:14px;font-weight:400;
  padding:16px 28px;border-radius:50px;
  border:1px solid rgba(255,255,255,.2);
  transition:background .2s;
}
.top-cta-btn-gw:hover{background:rgba(255,255,255,.18)}
.top-cta-fine{font-size:12px;color:rgba(255,255,255,.3);letter-spacing:.06em}
.top-cta-apps{display:flex;justify-content:center;gap:16px;margin-top:32px;flex-wrap:wrap}
.top-cta-apps a{
  display:block;transition:transform .2s;
}
.top-cta-apps a:hover{transform:translateY(-2px)}
.top-cta-apps img{height:48px;width:auto;border-radius:8px}

/* ════════════════════════════════════
   BANNER STRIP
════════════════════════════════════ */
.top-banners{padding:0;background:var(--cr)}
.top-banner-list{display:flex;flex-direction:column;gap:0}
.top-banner-list a{display:block;transition:opacity .2s}
.top-banner-list a:hover{opacity:.85}
.top-banner-list img{width:100%;display:block}

/* ════════════════════════════════════
   POPUP（既存流用）
════════════════════════════════════ */
.popup_wrap input{display:none}
.popup_overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.5);z-index:9999;
  align-items:center;justify-content:center;
}
.popup_wrap input:checked ~ .popup_overlay{display:flex}
.popup_content{
  background:#fff;border-radius:var(--rl);
  padding:40px;text-align:center;
  max-width:360px;width:90%;
  position:relative;
}
.close_btn{
  position:absolute;top:16px;right:20px;
  font-size:20px;cursor:pointer;color:var(--mute);
}
.popup_content p{font-size:15px;font-weight:500;margin-bottom:20px;line-height:1.8;color:#141414}
.popup_content .qr{width:160px;margin:0 auto 24px;display:block}
.popup_content ul{list-style:none;display:flex;flex-direction:column;gap:12px;align-items:center}
.popup_content ul li a{display:block}
.popup_content ul li img{width:180px;height:auto;display:block}

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media(max-width:1024px){
  .top-hero{grid-template-columns:1fr;min-height:auto}
  .top-hero-l{padding:80px 32px 60px;min-height:auto}
  .top-hero-r{height:50vw;min-height:220px;background-position:right center}
  .top-hero-side{position:static;width:100%;padding:16px 32px;background:var(--cr);flex-direction:row;flex-wrap:wrap}
  .top-members-card{flex:1;min-width:200px}
  .top-app-badges{flex-direction:row;flex:1}
  .top-app-badges img{height:40px;width:auto}
  .top-news-grid{grid-template-columns:1fr}
  .top-sidebar{display:none}
  .top-posts-grid{grid-template-columns:repeat(2,1fr)}
  .top-hobby-grid{grid-template-columns:repeat(2,1fr)}
  .top-kayoi-grid{grid-template-columns:repeat(2,1fr)}
  .top-wrap{padding:0 24px}
  .top-sec{padding:64px 0}
}
@media(max-width:640px){
  .top-posts-grid{grid-template-columns:1fr 1fr}
  .top-hero-stats{gap:20px}
  .top-stat-num{font-size:22px}
  .top-cta-btns{flex-direction:column;align-items:center}
}

/* ══ master.css h1{display:none} 打ち消し（ロゴ表示） ══ */
header h1 {
  display: block!important;
  font-size: 0!important;
  line-height: 0!important;
  color: transparent!important;
}
#h-logo img {
  width:192px!important;
  height:66px!important;
  max-width:none!important;
  object-fit:unset!important;
  display:block!important;
}

/* 企業向けバナーカード */
.top-biz-cta-card{
  display:block;
  background:var(--dk);
  border-radius:var(--r);
  overflow:hidden;
  text-decoration:none;
  transition:opacity .2s;
}
.top-biz-cta-card:hover{opacity:.85}
.top-biz-cta-inner{padding:28px 24px}
.top-biz-cta-label{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:10px;
}
.top-biz-cta-title{
  font-family:'Noto Serif JP',serif;
  font-size:20px;font-weight:700;color:#fff;
  margin-bottom:10px;line-height:1.3;
}
.top-biz-cta-desc{
  font-size:12px;font-weight:300;color:rgba(255,255,255,.6);
  line-height:1.8;margin-bottom:16px;
}
.top-biz-cta-btn{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:600;
  color:var(--grn);letter-spacing:.04em;
}