/* ========================================================
   羊カウンター — 共通スタイル（設計書 2.0 デザインシステム）
   ここに無い色・文字サイズ・余白・角丸を各画面で新しく作らない。
   ======================================================== */

:root{
  /* 地・面 */
  --bg:        #F6F2EA;
  --surface:   #FFFCF6;
  --sunken:    #EDE7DA;
  --rule:      #DDD5C6;

  /* 文字 */
  --ink:       #2E2A24;
  --ink-2:     #6B6255;

  /* 藍＝主アクセント */
  --accent:      #1F5B7A;
  --accent-fill: #1F5B7A;   /* ボタンの面。ダークだけ別値になる */
  --accent-ink:  #FFFFFF;
  --accent-deep: #143F55;
  --accent-soft: #E3EDF3;

  /* 茜＝祝いの色（換算・目標達成にだけ） */
  --joy:      #B0522E;
  --joy-soft: #F6E7DE;

  /* 意味の色 */
  --ok:     #3F6B45;
  --warn:   #8A6510;
  --danger: #B33A2B;

  --focus-ring: rgba(31,91,122,.35);
  --shadow-card: 0 1px 2px rgba(46,42,36,.10), 0 8px 20px rgba(46,42,36,.05);

  /* 余白・角丸 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --r-sm:8px; --r-md:16px; --r-pill:999px;

  /* 文字サイズ */
  --fs-display:34px;
  --fs-h1:24px;
  --fs-h2:19px;
  --fs-num:20px;
  --fs-body:17px;
  --fs-input:18px;
  --fs-note:14px;
}

/* 「文字を大きく」ON のときの値（切替は 2.9 のわたしの情報） */
:root[data-textsize="large"]{
  --fs-display:38px; --fs-h1:26px; --fs-h2:21px; --fs-num:22px;
  --fs-body:19px; --fs-input:20px; --fs-note:15px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#1A1714; --surface:#242019; --sunken:#141110; --rule:#3A3329;
    --ink:#F0EAE0; --ink-2:#A99E8D;
    --accent:#6FA8C9;
    --accent-fill:#2E6E90;
    --accent-ink:#FFFFFF; --accent-deep:#16394B; --accent-soft:#1E3543;
    --joy:#E4966B; --joy-soft:#2E2119;
    --ok:#7BB183; --warn:#D3A54A; --danger:#E0705C;
    --focus-ring: rgba(111,168,201,.40);
    --shadow-card: none;   /* ダークは面の明度差だけで分離する */
  }
}

*,*::before,*::after{ box-sizing:border-box; }

/* display を持つ部品でも hidden 属性を必ず効かせる */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans","BIZ UDPGothic",system-ui,sans-serif;
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.8;
}

.wrap{
  max-width:640px;
  margin:0 auto;
  padding:var(--sp-5) var(--sp-4) calc(var(--sp-7) + env(safe-area-inset-bottom));
}

/* 和文の折り返しは文節単位を優先する（対応していない環境では通常の折り返し） */
h1,h2{ margin:0; font-weight:700; line-height:1.4; text-wrap:balance; word-break:auto-phrase; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
p{ margin:0; }

a{ color:var(--accent); }

:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
}

/* ── 主題を示す一点（1画面に1つ・48px以上。2.0.6）────── */
.hero{
  display:block;
  font-size:64px;
  line-height:1;
  text-align:center;
  margin-bottom:var(--sp-4);
}

.title{ text-align:center; }
.title .sub{
  display:block;
  font-size:var(--fs-note);
  color:var(--ink-2);
  line-height:1.6;
  margin-top:var(--sp-1);
}

/* ── 文章 ────────────────────────────────────────── */
.lede{ margin-top:var(--sp-5); }
.note{ font-size:var(--fs-note); color:var(--ink-2); line-height:1.7; }
.stack-2 > * + *{ margin-top:var(--sp-2); }
.stack-3 > * + *{ margin-top:var(--sp-3); }
.stack-5 > * + *{ margin-top:var(--sp-5); }
.section{ margin-top:var(--sp-6); }
.group{ margin-top:var(--sp-5); }

hr.rule{
  border:0;
  height:1px;
  background:var(--rule);
  margin:var(--sp-6) 0;
}

/* ── カード・パネル（枠線を回さない。面と影で分離）──── */
.card{
  background:var(--surface);
  border-radius:var(--r-md);
  padding:var(--sp-4);
  box-shadow:var(--shadow-card);
}
.panel{
  background:var(--accent-soft);
  border-radius:var(--r-md);
  padding:var(--sp-4);
}
.panel-joy{
  background:var(--joy-soft);
  border-radius:var(--r-md);
  padding:var(--sp-4);
}

/* ── 入力欄 ──────────────────────────────────────── */
.field{ display:block; }
.field > .label{
  display:block;
  font-size:var(--fs-note);
  color:var(--ink-2);
  line-height:1.6;
  margin-bottom:var(--sp-2);
}
.input{
  display:block;
  width:100%;
  height:56px;
  padding:0 var(--sp-3);
  font-family:inherit;
  font-size:var(--fs-input);
  color:var(--ink);
  background:var(--sunken);
  border:2px solid var(--rule);
  border-radius:var(--r-sm);
}
.input::placeholder{ color:var(--ink-2); opacity:1; }
.input:focus{ border-color:var(--accent); }
.input[aria-invalid="true"]{ border-color:var(--danger); }

.field-foot{
  display:flex;
  justify-content:flex-end;
  font-size:var(--fs-note);
  color:var(--ink-2);
  margin-top:var(--sp-1);
}
.counter{ font-variant-numeric:tabular-nums; }

/* エラーは色だけに頼らず、印 + 文言で三重に伝える */
.field-error{
  display:none;
  margin-top:var(--sp-2);
  color:var(--danger);
  font-size:var(--fs-note);
  line-height:1.7;
}
.field-error[data-show="1"]{ display:block; }

/* 打ち間違いの疑い（2.1）— エラーではないので藍で出す */
.suggest{
  display:none;
  margin-top:var(--sp-2);
}
.suggest[data-show="1"]{ display:block; }
.suggest button{
  font-family:inherit;
  font-size:var(--fs-body);
  color:var(--accent);
  background:none;
  border:0;
  padding:var(--sp-2) 0;
  min-height:44px;
  text-align:left;
  text-decoration:underline;
  cursor:pointer;
}

/* ── ボタン（種類は2つだけ）──────────────────────── */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  font-family:inherit;
  font-weight:700;
  font-size:var(--fs-body);
  line-height:1.4;
  border-radius:var(--r-md);
  cursor:pointer;
  transition:transform 100ms ease-out, box-shadow 100ms ease-out;
}
a.btn{ text-decoration:none; }
.btn-primary{
  height:56px;
  color:var(--accent-ink);
  background:var(--accent-fill);
  border:0;
  box-shadow:0 4px 0 var(--accent-deep);
}
.btn-primary:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:0 1px 0 var(--accent-deep);
}
.btn-secondary{
  height:52px;
  color:var(--accent);
  background:var(--surface);
  border:2px solid var(--accent);
}
.btn:disabled{
  cursor:default;
  opacity:.55;
  box-shadow:none;
}

/* 文字リンク（補助動線）。最低44pxの当たり判定 */
.linklike{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-family:inherit;
  font-size:var(--fs-body);
  color:var(--accent);
  background:none;
  border:0;
  padding:0;
  text-decoration:underline;
  cursor:pointer;
}

/* ── 開閉ブロック（2.2）──────────────────────────── */
.disclosure{ margin-top:var(--sp-5); }
.disclosure > button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  width:100%;
  min-height:56px;
  padding:0 var(--sp-4);
  font-family:inherit;
  font-size:var(--fs-body);
  font-weight:700;
  color:var(--ink);
  text-align:left;
  background:var(--surface);
  border:0;
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  cursor:pointer;
}
.disclosure > button svg{ flex:none; transition:transform 180ms ease-out; }
.disclosure > button[aria-expanded="true"] svg{ transform:rotate(180deg); }
.disclosure .body{ display:none; padding:var(--sp-3) var(--sp-4) 0; }
.disclosure .body[data-open="1"]{ display:block; }
.disclosure ul{ margin:0; padding-left:1.2em; }
.disclosure li + li{ margin-top:var(--sp-2); }

/* ── イニシャル円（2.0.5）────────────────────────── */
.initial{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:40px;
  height:40px;
  border-radius:var(--r-pill);
  color:#FFFFFF;
  font-weight:700;
  font-size:var(--fs-body);
  line-height:1;
  background:var(--ink-2);
}
.identity{ display:flex; align-items:center; gap:var(--sp-3); }
.identity .name{ font-weight:700; word-break:break-word; }

/* ── 数値 ────────────────────────────────────────── */
.num{
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:var(--fs-num);
}

/* ── 帯（オフライン・ようこそ）──────────────────── */
.banner{
  display:none;
  padding:var(--sp-3) var(--sp-4);
  background:var(--sunken);
  color:var(--ink);
  font-size:var(--fs-note);
  line-height:1.7;
  text-align:center;
}
.banner[data-show="1"]{ display:block; }

/* ── 全体エラー（3点セット）──────────────────────── */
.alert{
  display:none;
  margin-top:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--danger);
  font-size:var(--fs-note);
  line-height:1.7;
  box-shadow:var(--shadow-card);
}
.alert[data-show="1"]{ display:block; }

/* 送信元の明示（5.4）*/
.from-card .addr{
  font-weight:700;
  word-break:break-all;
}

/* ── タブバー（2.0.5）──────────────────────────────── */
.tabbar{
  position:fixed;
  left:0; right:0; bottom:0;
  display:flex;
  background:var(--surface);
  border-top:1px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom);
  z-index:10;
}
.tabbar a{
  position:relative;
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  height:64px;
  color:var(--ink-2);
  text-decoration:none;
  font-size:var(--fs-note);
  line-height:1.2;
}
/* 現在地は色と上端のバーで二重に示す */
.tabbar a[aria-current="page"]{ color:var(--accent); font-weight:700; }
.tabbar a[aria-current="page"]::before{
  content:"";
  position:absolute;
  top:0; left:12px; right:12px;
  height:3px;
  background:var(--accent);
  border-radius:0 0 var(--r-pill) var(--r-pill);
}
.tabbar svg{ display:block; }
/* 「記録する」だけ塗り丸にして、隣の「記録帳」と形で区別する */
.tabbar .tab-write .mark{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:var(--r-pill);
  background:var(--accent-fill); color:var(--accent-ink);
}
.wrap.has-tabs{ padding-bottom:calc(64px + var(--sp-4) + env(safe-area-inset-bottom)); }

/* ── 画面ヘッダ（2.5）──────────────────────────────── */
.page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
}
.page-head .initial{ width:44px; height:44px; font-size:var(--fs-h2); }

/* ── 種目の行（累計・今月）──────────────────────────── */
.group-label{
  font-size:var(--fs-note);
  color:var(--ink-2);
  margin-bottom:var(--sp-2);
}
.stat-row{
  display:grid;
  grid-template-columns:1fr auto 1.6em 4.4em;
  align-items:baseline;
  gap:var(--sp-2);
  padding:var(--sp-1) 0;
}
.stat-row .unit{ font-size:var(--fs-note); color:var(--ink-2); }
.stat-row .num{ text-align:right; }
.badge-emoji{
  font-size:var(--fs-note);
  color:var(--joy);
  white-space:nowrap;
}

/* ── 進捗バー（目標）───────────────────────────────── */
.goal + .goal{ margin-top:var(--sp-3); }
.goal-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-2);
}
.goal-head .val{ font-size:var(--fs-note); color:var(--ink-2); }
.progress{
  height:12px;
  margin-top:var(--sp-1);
  background:var(--sunken);
  border-radius:var(--r-pill);
  overflow:hidden;
}
.progress > span{
  display:block;
  height:100%;
  background:var(--accent);
  border-radius:var(--r-pill);
}
.goal.done .progress > span{ background:var(--joy); }
/* 達成の瞬間だけ 400ms で満ちる（2.0.7 の唯一の祝祭）。
   動きを減らす設定では、冒頭の @media で 0ms になり結果だけが静止表示される */
.goal.celebrate .progress > span{ transition:width 400ms ease-out, background-color 400ms ease-out; }
.goal.done .goal-head .val{ color:var(--joy); font-weight:700; }

/* ── 活動のあしあと（2.5。22pxセル・gap4px・横スクロールなし）── */
.cal{
  display:grid;
  grid-template-columns:16px repeat(12, 22px);
  gap:4px;
  align-items:center;
}
.cal .dow{
  font-size:var(--fs-note);
  color:var(--ink-2);
  line-height:1;
  text-align:center;
}
.cal button{
  width:22px; height:22px;
  padding:0;
  border:0;
  border-radius:6px;
  background:var(--sunken);
  cursor:pointer;
}
/* 当たり判定を gap ぶん広げる（見た目は22pxのまま） */
.cal button::after{
  content:"";
  position:absolute;
  width:26px; height:26px;
  transform:translate(-2px,-2px);
}
.cal button{ position:relative; }
.cal .lv1{ background:color-mix(in srgb, var(--accent) 38%, var(--sunken)); }
.cal .lv2{ background:color-mix(in srgb, var(--accent) 58%, var(--sunken)); }
.cal .lv3{ background:var(--accent); }
.cal .future{ background:transparent; cursor:default; }
.cal-legend{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  margin-top:var(--sp-3);
  font-size:var(--fs-note);
  color:var(--ink-2);
}
.cal-legend i{ width:14px; height:14px; border-radius:4px; display:inline-block; background:var(--sunken); }
.cal-legend i.lv1{ background:color-mix(in srgb, var(--accent) 38%, var(--sunken)); }
.cal-legend i.lv2{ background:color-mix(in srgb, var(--accent) 58%, var(--sunken)); }
.cal-legend i.lv3{ background:var(--accent); }
.cal-picked{
  margin-top:var(--sp-2);
  font-size:var(--fs-note);
  color:var(--ink-2);
  min-height:1.7em;
}

/* ── 最近の記録 ───────────────────────────────────── */
.entry{ padding:var(--sp-3) 0; }
.entry + .entry{ border-top:1px solid var(--rule); }
.entry .date{ font-size:var(--fs-note); color:var(--ink-2); }
.entry .vals{ display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4); }
.entry .comment{
  margin-top:var(--sp-1);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ── チップ（種目の選択・活動日）─────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.chip-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
.chip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-1);
  min-height:48px;
  padding:0 var(--sp-3);
  font-family:inherit;
  font-size:var(--fs-body);
  font-weight:700;
  color:var(--ink);
  background:var(--surface);
  border:2px solid var(--rule);
  border-radius:var(--r-sm);
  cursor:pointer;
}
.chip[aria-pressed="true"]{
  color:var(--accent);
  background:var(--accent-soft);
  border-color:var(--accent);
}
.chip .check{ visibility:hidden; }
.chip[aria-pressed="true"] .check{ visibility:visible; }

/* ── 数値ステッパー（2.0.5）──────────────────────────── */
.stepper{ display:flex; align-items:center; gap:var(--sp-2); }
.stepper button{
  width:56px; height:56px;
  flex:none;
  font-family:inherit;
  font-size:22px;
  font-weight:700;
  color:var(--accent);
  background:var(--surface);
  border:2px solid var(--accent);
  border-radius:var(--r-sm);
  cursor:pointer;
}
.stepper button:disabled{
  color:var(--ink-2);
  border-color:var(--rule);
  background:var(--sunken);
  cursor:default;
}
.stepper input{
  flex:1 1 auto;
  min-width:0;
  height:56px;
  text-align:center;
  font-variant-numeric:tabular-nums;
  font-weight:700;
}
.stepper .unit{ flex:none; font-size:var(--fs-note); color:var(--ink-2); }

/* 単位つきの数値入力（重さ系） */
.input-unit{ position:relative; }
.input-unit .input{ padding-right:48px; text-align:right; font-variant-numeric:tabular-nums; }
.input-unit .suffix{
  position:absolute;
  right:var(--sp-3); top:50%;
  transform:translateY(-50%);
  font-size:var(--fs-note);
  color:var(--ink-2);
  pointer-events:none;
}

textarea.input{
  height:auto;
  min-height:96px;
  padding:var(--sp-3);
  line-height:1.8;
  resize:vertical;
}

/* ── 完了画面の増分（--fs-display はここだけ）───────────── */
.delta-line{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:var(--sp-3);
}
.delta-line .amount{
  font-size:var(--fs-display);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}
.joy-line{ color:var(--joy); font-weight:700; }

/* ── みんなの記録（2.8）─────────────────────────── */
.summary-panel > button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  width:100%;
  min-height:56px;
  padding:0;
  font-family:inherit;
  font-size:var(--fs-h2);
  font-weight:700;
  color:var(--ink);
  text-align:left;
  background:none;
  border:0;
  cursor:pointer;
}
.summary-panel > button svg{ flex:none; transition:transform 180ms ease-out; }
.summary-panel > button[aria-expanded="false"] svg{ transform:rotate(-90deg); }
.summary-body[hidden]{ display:none; }
.summary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-2) var(--sp-4);
  margin-top:var(--sp-3);
}
.summary-grid .cell{ display:flex; align-items:baseline; gap:var(--sp-1); flex-wrap:wrap; }
.summary-grid .cell .num{ font-size:var(--fs-body); }
.sum-main + .sum-main{ margin-top:var(--sp-3); }
.sum-main .line{ display:flex; align-items:baseline; gap:var(--sp-2); flex-wrap:wrap; }
.sum-main .conv{ color:var(--joy); font-size:var(--fs-note); }
.sum-delta{ color:var(--ink-2); font-size:var(--fs-note); }

.feed-card{
  position:relative;
  background:var(--surface);
  border-radius:var(--r-md);
  padding:var(--sp-4);
  box-shadow:var(--shadow-card);
}
.feed-card + .feed-card{ margin-top:var(--sp-3); }
/* 自分の投稿は左端に藍のライン（7.3） */
.feed-card.mine{ padding-left:calc(var(--sp-4) - 3px); border-left:3px solid var(--accent); }
.feed-head{ display:flex; align-items:center; gap:var(--sp-2); }
.feed-head .name{
  font-weight:700;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* 換算バッジと NEW は絶対に縮めない（2.8） */
.feed-head .conv, .feed-head .you, .feed-head .new{ flex:none; }
.feed-head .conv{ font-size:var(--fs-note); color:var(--joy); }
.feed-head .you{
  font-size:var(--fs-note);
  color:var(--accent);
  background:var(--accent-soft);
  border-radius:var(--r-pill);
  padding:2px var(--sp-2);
}
.feed-head .new{
  font-size:var(--fs-note);
  font-weight:700;
  color:var(--accent-ink);
  background:var(--joy);
  border-radius:var(--r-pill);
  padding:2px var(--sp-2);
}
.feed-card .when{ font-size:var(--fs-note); color:var(--ink-2); margin-top:var(--sp-1); }
.feed-card .vals{ margin-top:var(--sp-2); }
.feed-card .vals .num{ font-size:var(--fs-num); }
.feed-card .comment{ margin-top:var(--sp-2); }
.feed-card .comment.clamped{
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* タブの未読バッジ（7.5） */
.tabbar .badge{
  position:absolute;
  top:6px;
  left:calc(50% + 6px);
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:var(--r-pill);
  background:var(--danger);
  color:#FFFFFF;
  font-size:var(--fs-note);
  font-weight:700;
  line-height:20px;
  text-align:center;
}

/* 情報バー（公開範囲の告知。7.6） */
.infobar{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--accent-soft);
  border-radius:var(--r-md);
  font-size:var(--fs-note);
  line-height:1.7;
}
.infobar button{
  flex:none;
  min-width:44px;
  min-height:44px;
  margin:-10px -8px -10px 0;
  font-family:inherit;
  font-size:var(--fs-body);
  color:var(--accent);
  background:none;
  border:0;
  cursor:pointer;
}

/* ── わたしの情報（2.9）─────────────────────────── */
.divider-block{
  margin-top:var(--sp-6);
  padding-top:var(--sp-6);
  border-top:1px solid var(--rule);
}
/* ログアウトは他のボタンから 48px 以上離して隔離する（2.9） */
.logout-zone{ margin-top:var(--sp-7); }

/* 確認ダイアログ（2.9） */
dialog.confirm{
  width:min(100% - 32px, 480px);
  padding:var(--sp-5);
  border:0;
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--ink);
  font-family:inherit;
  font-size:var(--fs-body);
  line-height:1.8;
}
dialog.confirm::backdrop{ background:rgba(0,0,0,.45); }
dialog.confirm .actions{ margin-top:var(--sp-5); }
dialog.confirm .actions > * + *{ margin-top:var(--sp-3); }

/* ── 空状態のプレビュー ────────────────────────────── */
/* 「育つとこうなる」の薄い見本。実物と紛れないよう淡くする */
.preview-faint{ color:var(--rule); font-size:28px; line-height:1.4; letter-spacing:2px; opacity:.35; }

/* ── スケルトン（2.0.10）──────────────────────────── */
.sk{ background:var(--sunken); border-radius:var(--r-sm); }
.sk-line{ height:1em; margin:var(--sp-2) 0; }
.sk-w40{ width:40%; }
.sk-block-56{ height:56px; }
.sk-block-180{ height:180px; }

.align-right{ text-align:right; }
.ml-2{ margin-left:var(--sp-2); }

/* 入力欄が現れるときだけの控えめなフェードイン（2.7。位置は動かさない） */
@keyframes sc-fade{ from{ opacity:0 } to{ opacity:1 } }
.fade-in{ animation:sc-fade 180ms ease-out; }

.mt-2{ margin-top:var(--sp-2); }
.mt-3{ margin-top:var(--sp-3); }
.plain-list{ list-style:none; margin:var(--sp-3) 0 0; padding:0; }

.center{ text-align:center; }
.mail-address{
  font-size:var(--fs-input);
  font-weight:700;
  word-break:break-all;
  text-align:center;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0ms !important; transition-duration:0ms !important; }
}