:root{
  --paper:#fffaf2;--paper2:#fef2e4;--paper3:#fbe8d6;
  --ink:#5b4636;--ink2:#8a7460;--ink3:#b7a48f;--outline:#593823;   /* 2026-08-26 原画実測値に合わせて #6b4a38 から変更 */
  --coral:#f25257;--coral-d:#d83b45;--coral-l:#ffe0df;
  --pink:#f9b8cd;--pink-d:#ee6d92;--pink-l:#ffeaf1;
  --orange:#f5a623;--orange-l:#ffe6bd;--yellow:#ffd23b;--yellow-l:#fff3c9;
  --sky:#bfe0ef;--mint:#bfe6d4;
  --disp:"Zen Maru Gothic",sans-serif;--body:"M PLUS Rounded 1c",sans-serif;--latin:"Fredoka",sans-serif;
  --sh:drop-shadow(2px 5px 3px rgba(91,70,54,.22));--card-sh:0 8px 0 -3px var(--paper3),0 12px 26px -10px rgba(91,70,54,.28);
}.zbr-front, .zbr-front *{box-sizing:border-box;margin:0;padding:0}.zbr-front{font-family:var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}.zbr-front img{max-width:100%}
/* home screen icon demo */
.zbr-front .homeicon{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,#a8c8e8,#c9b8e0);border-radius:22px;padding:20px;margin-bottom:16px;position:relative}
/* ===== phone frame ===== */
.zbr-front .phone{width:390px;flex:none;background:#1e1a17;border-radius:52px;padding:12px;box-shadow:0 30px 60px -20px rgba(91,70,54,.5),0 0 0 2px rgba(0,0,0,.1);position:relative}
/* mobile app header */
.zbr-front .mhead{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  padding:14px 18px 12px;display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--coral-l)}.zbr-front .mhead .mlogo{font-family:var(--latin);font-weight:700;font-size:22px;color:var(--coral);display:flex;align-items:center;gap:8px}.zbr-front .mhead .mlogo .f{width:34px;height:34px;border-radius:11px;overflow:hidden;border:2px solid var(--coral-l);background:#fff}.zbr-front .mhead .mlogo .f img{width:106%;margin-top:2px}.zbr-front .mhead .login{margin-left:auto;font-family:var(--disp);font-weight:700;font-size:14px;color:var(--coral);border:2px solid var(--coral);border-radius:20px;padding:6px 16px}
/* hero mobile */
.zbr-front .mhero{padding:26px 20px 30px;text-align:center;position:relative;
  background:radial-gradient(ellipse at 50% 30%,var(--pink-l),transparent 70%),linear-gradient(180deg,#fff,var(--coral-l))}.zbr-front .mkicker{font-family:var(--disp);font-weight:700;color:var(--coral);font-size:16px;background:#fff;display:inline-block;padding:7px 20px;border-radius:20px;box-shadow:2px 2px 0 var(--pink);margin-bottom:14px}.zbr-front .mhero h1{font-family:var(--disp);font-weight:900;font-size:34px;line-height:1.4;letter-spacing:.01em}.zbr-front .mhero h1 em{font-style:normal;color:var(--coral);position:relative;white-space:nowrap}.zbr-front .mhero h1 em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:2px;height:12px;background:var(--yellow);z-index:-1;border-radius:6px}.zbr-front .mhero .cat{width:220px;margin:6px auto -6px;filter:drop-shadow(3px 8px 5px rgba(91,70,54,.22))}.zbr-front .mhero p{font-size:16px;color:var(--ink2);font-weight:500;margin:8px 0 20px;line-height:1.9}.zbr-front .bigbtn{display:block;width:100%;font-family:var(--disp);font-weight:900;font-size:20px;color:#fff;background:var(--coral);
  border:none;border-radius:18px;padding:18px;box-shadow:0 6px 0 var(--coral-d);text-decoration:none;text-align:center;margin-bottom:12px}.zbr-front .ghostbtn{display:block;width:100%;font-family:var(--disp);font-weight:900;font-size:17px;color:var(--coral);background:#fff;
  border:2.5px solid var(--pink);border-radius:18px;padding:15px;box-shadow:0 5px 0 var(--pink);text-decoration:none;text-align:center}.zbr-front .mhero .note{font-size:13.5px;color:var(--ink3);margin-top:14px;font-weight:600}
/* section mobile */
.zbr-front .msec{padding:34px 20px}.zbr-front .msec.tint{background:linear-gradient(180deg,var(--pink-l),var(--paper))}.zbr-front .msec-h{text-align:center;margin-bottom:22px}.zbr-front .msec-h .en{font-family:var(--latin);font-weight:600;color:var(--pink-d);font-size:13px;letter-spacing:.12em;text-transform:uppercase}.zbr-front .msec-h h2{font-family:var(--disp);font-weight:900;font-size:26px;margin-top:2px;position:relative;display:inline-block}.zbr-front .msec-h h2 .u{position:absolute;left:0;right:0;bottom:1px;height:10px;background:var(--yellow);z-index:-1;border-radius:5px}.zbr-front .msec-h p{font-size:15px;color:var(--ink2);font-weight:500;margin-top:10px;line-height:1.8}
/* points (3) mobile stacked */
.zbr-front .mpt{background:#fff;border-radius:20px;padding:20px 20px;box-shadow:var(--card-sh);display:flex;gap:16px;align-items:center;margin-bottom:14px;position:relative;border:2px solid #fff}.zbr-front .mpt .ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-size:32px;flex:none}.zbr-front .mpt:nth-child(1) .ic{background:var(--coral-l)}.zbr-front .mpt:nth-child(2) .ic{background:var(--yellow-l)}.zbr-front .mpt:nth-child(3) .ic{background:var(--pink-l)}.zbr-front .mpt h3{font-family:var(--disp);font-weight:900;font-size:19px;margin-bottom:3px}.zbr-front .mpt p{font-size:14.5px;color:var(--ink2);font-weight:500;line-height:1.7}
/* zubo-katsu 2x2 mobile */
.zbr-front .mplay{display:grid;grid-template-columns:1fr 1fr;gap:14px}.zbr-front .mplay .g{background:#fff;border-radius:20px;padding:22px 12px;text-align:center;box-shadow:var(--card-sh);border:2.5px dashed var(--pink);position:relative}.zbr-front .mplay .g .tag{position:absolute;top:-10px;right:10px;background:var(--mint);color:#2f7a5e;font-size:11px;font-weight:800;padding:3px 10px;border-radius:12px}.zbr-front .mplay .g .e{font-size:46px;display:block;margin-bottom:8px}.zbr-front .mplay .g h4{font-family:var(--disp);font-weight:900;font-size:17px}.zbr-front .mplay .g p{font-size:12.5px;color:var(--ink2);font-weight:500;margin-top:3px}.zbr-front .mkatsu-bar{margin-top:16px;background:#fff;border:3px solid var(--yellow);border-radius:18px;padding:16px 18px;text-align:center}.zbr-front .mkatsu-bar p{font-size:15px;font-weight:500;line-height:1.7;margin-bottom:12px}.zbr-front .mkatsu-bar b{font-family:var(--disp);color:var(--coral-d);font-weight:900}
/* events mobile: horizontal scroll cards */
.zbr-front .mev-scroll{display:flex;gap:14px;overflow-x:auto;padding:4px 20px 8px;margin:0 -20px;scrollbar-width:none}.zbr-front .mev-scroll::-webkit-scrollbar{display:none}.zbr-front .mev{flex:none;width:230px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--card-sh);border:2px solid #fff}.zbr-front .mev .ph{height:120px;background:linear-gradient(135deg,var(--sky),var(--mint));position:relative;display:grid;place-items:center}.zbr-front .mev .ph .imgnote{color:rgba(91,70,54,.5);font-size:12px;font-weight:700}.zbr-front .mev .ph .d{position:absolute;top:8px;left:8px;background:#fff;border-radius:12px;padding:5px 12px;text-align:center;box-shadow:1px 2px 5px rgba(0,0,0,.14)}.zbr-front .mev .ph .d b{font-family:var(--latin);font-size:20px;color:var(--coral);display:block;line-height:1}.zbr-front .mev .ph .d span{font-size:10px;color:var(--ink2);font-weight:700}.zbr-front .mev .ph .st{position:absolute;top:8px;right:8px;background:var(--coral);color:#fff;font-size:10px;font-weight:900;font-family:var(--disp);padding:3px 10px;border-radius:12px}.zbr-front .mev .bd{padding:14px}.zbr-front .mev .bd .cat{font-size:11px;font-weight:700;color:var(--pink-d);background:var(--pink-l);padding:2px 9px;border-radius:10px}.zbr-front .mev .bd h4{font-family:var(--disp);font-weight:700;font-size:15px;margin-top:8px;line-height:1.5}.zbr-front .mev .bd .oneclick{margin-top:10px;display:block;text-align:center;background:var(--coral);color:#fff;font-family:var(--disp);font-weight:900;font-size:14px;padding:10px;border-radius:12px;text-decoration:none}
/* columns mobile */
.zbr-front .mcol{display:flex;gap:14px;background:#fff;border-radius:18px;padding:12px;box-shadow:var(--card-sh);margin-bottom:12px;align-items:center}.zbr-front .mcol .th{width:66px;height:66px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:30px}.zbr-front .mcol:nth-child(1) .th{background:var(--coral-l)}.zbr-front .mcol:nth-child(2) .th{background:var(--yellow-l)}.zbr-front .mcol:nth-child(3) .th{background:var(--pink-l)}.zbr-front .mcol .tx .cat{font-size:11px;font-weight:700;color:var(--orange)}.zbr-front .mcol .tx h4{font-family:var(--disp);font-weight:700;font-size:15px;line-height:1.5;margin-top:2px}
/* ===== app-like fixed bottom tab bar ===== */
.zbr-front .tabbar{position:absolute;left:0;right:0;bottom:0;z-index:55;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:2px solid var(--coral-l);display:flex;padding:8px 6px 14px;box-shadow:0 -6px 20px -8px rgba(91,70,54,.25)}.zbr-front .tab{flex:1;text-align:center;text-decoration:none;color:var(--ink3);font-family:var(--disp);font-weight:700;font-size:11px;padding:4px 0}.zbr-front .tab .ti{font-size:24px;display:block;line-height:1;margin-bottom:3px}.zbr-front .tab.on{color:var(--coral)}.zbr-front .tab.center{position:relative}.zbr-front .tab.center .ti{width:52px;height:52px;margin:-22px auto 3px;background:var(--coral);border-radius:50%;display:grid;place-items:center;
  box-shadow:0 6px 14px -3px rgba(242,82,87,.6);border:3px solid #fff;font-size:26px;color:#fff}.zbr-front .tabbar-space{height:88px}.zbr-front .mfoot{background:var(--outline);color:#fff;padding:26px 20px 30px;text-align:center}.zbr-front .mfoot .cp{font-size:12px;color:#d8c6b4;line-height:1.8}

@media(max-width:820px){.stage{flex-direction:column-reverse;align-items:center}.side{max-width:390px}}
/* ===== ずぼにゃんオリジナルアイコン（2026-08-25 絵文字から差し替え） ===== */
.zbr-front .zi{display:inline-block;width:1em;height:1em;vertical-align:-.14em}
/* =====================================================================
   ここから下：実装時に追加したレイヤー（モックには無い）
   モックはスマホ単体で作られているため、PC幅の指定が存在しない。
   ・スマホ表示はモックのまま（8割がスマホのため、こちらを正とする）
   ・768px以上で中身を中央に寄せ、主要ブロックを段組みにする
   ===================================================================== */

/* SWELL本体のリンク色（青＋下線）を打ち消す。
   モックでは a に個別指定していたが、実装ではSWELLの既定が効いてしまうため。 */
.zbr-front a{color:inherit;text-decoration:none}
.zbr-front a:hover{text-decoration:none}

/* アイコン共通 */
.zbr-front .zi{display:inline-block;width:1em;height:1em;vertical-align:-.14em}
/* ★ vector-effect:non-scaling-stroke は入れないこと（24pxで塗り潰される） */

/* 固定タブバーはスマホのみ */
@media (min-width:768px){
  .zbr-front .tabbar{display:none}
  .zbr-front .tabbar-space{display:none}
}

@media (min-width:768px){
  /* セクションの背景は全幅のまま、中身だけ中央に寄せる */
  .zbr-front .mhero,
  .zbr-front .msec,
  .zbr-front .mfoot{padding-left:max(24px,calc((100% - 1040px)/2));
                    padding-right:max(24px,calc((100% - 1040px)/2))}
  .zbr-front .mhead{padding-left:max(24px,calc((100% - 1040px)/2));
                    padding-right:max(24px,calc((100% - 1040px)/2))}

  /* ヒーロー：コピーと猫を横並びに */
  .zbr-front .mhero{display:grid;grid-template-columns:1fr 380px;align-items:center;
                    column-gap:40px;text-align:left;padding-top:56px;padding-bottom:60px}
  .zbr-front .mhero .mkicker{grid-column:1;justify-self:start}
  .zbr-front .mhero h1{grid-column:1;font-size:52px}
  .zbr-front .mhero p{grid-column:1;text-align:left}
  .zbr-front .mhero .bigbtn,
  .zbr-front .mhero .ghostbtn{grid-column:1;max-width:340px}
  .zbr-front .mhero .note{grid-column:1}
  .zbr-front .mhero .cat{grid-column:2;grid-row:1 / span 7;width:100%;max-width:380px;margin:0}

  /* 見出し */
  .zbr-front .msec{padding-top:70px;padding-bottom:70px}
  .zbr-front .msec-h h2{font-size:34px}

  /* ズボ連ってなに？＝3カラム */
  .zbr-front .mpt{display:block;text-align:center;margin-bottom:0}
  .zbr-front .mpt .ic{margin:0 auto 14px}
  .zbr-front .msec .mpt{width:100%}
  .zbr-front .mpt-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

  /* ズボ活＝4カラム */
  .zbr-front .mplay{grid-template-columns:repeat(4,1fr)}

  /* イベント＝横スクロールをやめて3カラム */
  .zbr-front .mev-scroll{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;overflow:visible}
  .zbr-front .mev{width:auto;flex:initial}

  /* コラム＝2カラム */
  .zbr-front .mcol-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .zbr-front .mcol{margin-bottom:0}

  /* 会員登録バー */
  .zbr-front .mkatsu-bar .bigbtn{max-width:420px;margin-left:auto;margin-right:auto}
}

@media (min-width:1100px){
  .zbr-front .mhero h1{font-size:60px}
}

/* =====================================================================
   文字・アイコンの拡大（2026-08-26）
   40〜60代の主婦が主対象。浅倉さんフィードバックA1「文字をもっと大きく」を
   モック反映時よりさらに一段上げたもの。スマホ・PC両方。
   ※ 元の値に戻したくなったら、このブロックごと消せば戻る
   ===================================================================== */

/* --- 実装時に見つかった不具合の修正 --------------------------------
   モックのタブバーはスマホ枠の中に置く前提で position:absolute だった。
   実機だと「画面下に固定」ではなく「文書の末尾」に置かれてしまうため fixed にする。 */
.zbr-front .tabbar{position:fixed}

/* --- ヘッダー --- */
.zbr-front .mhead .mlogo{font-size:24px}
.zbr-front .mhead .mlogo .f{width:38px;height:38px}
.zbr-front .mhead .login{font-size:16px;padding:7px 18px}

/* --- ヒーロー --- */
.zbr-front .mkicker{font-size:17.5px;padding:8px 22px}
.zbr-front .mhero h1{font-size:38px}
.zbr-front .mhero p{font-size:18px}
.zbr-front .mhero .note{font-size:15px}
.zbr-front .bigbtn{font-size:22px;padding:20px}
.zbr-front .ghostbtn{font-size:19px}

/* --- セクション見出し --- */
.zbr-front .msec-h .en{font-size:14px}
.zbr-front .msec-h h2{font-size:31px}
.zbr-front .msec-h p{font-size:17px}

/* --- ズボ連ってなに？ --- */
.zbr-front .mpt .ic{width:80px;height:80px;font-size:46px;border-radius:22px}
.zbr-front .mpt h3{font-size:22px}
.zbr-front .mpt p{font-size:16.5px}

/* --- ズボ活（おみくじ等）★ここが一番小さかった --- */
.zbr-front .mplay .g .e{font-size:64px;margin-bottom:10px}
.zbr-front .mplay .g h4{font-size:20px}
.zbr-front .mplay .g p{font-size:14.5px}
.zbr-front .mplay .g .tag{font-size:12.5px;padding:4px 12px}
.zbr-front .mkatsu-bar p{font-size:17px}

/* --- イベント --- */
.zbr-front .mev{width:250px}
.zbr-front .mev .ph .d b{font-size:23px}
.zbr-front .mev .ph .d span{font-size:12px}
.zbr-front .mev .ph .st{font-size:12px}
.zbr-front .mev .bd .cat{font-size:13px}
.zbr-front .mev .bd h4{font-size:18px}
.zbr-front .mev .bd .oneclick{font-size:16px;padding:12px}

/* --- コラム --- */
.zbr-front .mcol .th{width:80px;height:80px;font-size:44px;border-radius:18px}
.zbr-front .mcol .tx .cat{font-size:13px}
.zbr-front .mcol .tx h4{font-size:17.5px}

/* --- タブバー --- */
.zbr-front .tab{font-size:12.5px}
.zbr-front .tab .ti{font-size:28px;margin-bottom:4px}
.zbr-front .tab.center .ti{width:58px;height:58px;font-size:32px;margin:-24px auto 4px}
.zbr-front .tabbar-space{height:96px}

/* --- フッター --- */
.zbr-front .mfoot .cp{font-size:13.5px}

/* --- PC --- */
@media (min-width:768px){
  .zbr-front .mhero h1{font-size:58px}
  .zbr-front .mhero p{font-size:20px}
  .zbr-front .msec-h h2{font-size:42px}
  .zbr-front .msec-h p{font-size:19px}

  .zbr-front .mpt{padding:26px 22px}
  .zbr-front .mpt .ic{width:112px;height:112px;font-size:66px;border-radius:26px}
  .zbr-front .mpt h3{font-size:26px}
  .zbr-front .mpt p{font-size:18.5px}

  .zbr-front .mplay .g{padding:26px 14px}
  .zbr-front .mplay .g .e{font-size:90px}
  .zbr-front .mplay .g h4{font-size:25px}
  .zbr-front .mplay .g p{font-size:16px}
  .zbr-front .mplay .g .tag{font-size:13px}
  .zbr-front .mkatsu-bar p{font-size:19px}

  .zbr-front .mev .bd h4{font-size:21px}
  .zbr-front .mev .bd .oneclick{font-size:18px}
  .zbr-front .mev .bd .cat{font-size:14px}

  .zbr-front .mcol{padding:16px}
  .zbr-front .mcol .th{width:96px;height:96px;font-size:58px}
  .zbr-front .mcol .tx h4{font-size:21px}
  .zbr-front .mcol .tx .cat{font-size:14px}
  .zbr-front .bigbtn{font-size:24px}
  .zbr-front .mhead .mlogo{font-size:26px}
  .zbr-front .mhead .login{font-size:17px}
}
@media (min-width:1100px){
  .zbr-front .mhero h1{font-size:68px}
}