:root {
  --disp-w: 700px;	   /* 最大表示幅 */

  --color-bg: #fafafa;
  --color-ink: #222222;
  --color-card: #ffffff;  
  --color-muted: #6b7280;
  --color-border: #e5e7eb;

  --color-brand: #47a89c;
  --color-brand-deep: #145750;
  --color-brand-light: #e0f4f1;

  --font-color-h3: #4d4d4d;

  
  /* Font Size ：16px基準。実体はremで＝ユーザー拡大に追従 */
  --font-xs: 0.75rem;   /* 12px相当 */
  --font-sm: 0.875rem;  /* 14px相当 */
  --font-md: 1rem;      /* 16px */
  --font-lg: 1.125rem;  /* 18px */
  --font-xl: 1.25rem;   /* 20px */
  
  --font-h1: clamp(40px, 5vw, 60px);
  --font-h2: clamp(16px,2.4vw,20px);
  --font-h3: clamp(16px,2.4vw,20px);

  
  /* 「続きを読む」 */
  --rm-bg: #f7f9fb;
  --rm-fg: #445c77;          /* 鉄紺寄りのブルーグレー */
  --rm-border: #d5dde5;
  --rm-bg-active: #eef3f7;
  --rm-border-active: #c4ced8;
  --rm-focus: #4d7ea8;       /* フォーカスリングはやや明るめ青 */
}


/* modern-normalize v2 ベースの要点 + 端末差の小修正（MIT相当） */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;tab-size:4}
body{margin:0;line-height:1.5}
h1,h2,h3,h4,h5,h6{margin:0.67em 0;line-height:1.25}
p,ul,ol,dl{margin:0}
ul,ol{padding-left:1.2em}
img,video{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;padding:0}
a{text-decoration:none;color:inherit}
table{border-collapse:collapse;border-spacing:0}
:focus-visible{outline:2px solid #7ec3b5;outline-offset:2px}
/* iOSフォームズレ緩和 */
input[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}
/* メディアのデフォルトblock化 */
img,svg,video,canvas{display:block}
/* prefers-reduced-motion に配慮（後でアニメ入れても安全） */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important;scroll-behavior:auto!important}
}


html,body{
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: -apple-system, "Segoe UI", Roboto,"Hiragino Kaku Gothic ProN", "Yu Gothic Medium","Noto Sans JP", Meiryo, sans-serif;
  }

h1{
  font-size: var(--font-h1);
  font-weight: 500;
  letter-spacing: .5px;
  margin: 0;
}

h2{
  font-size: var(--font-h2);
  font-weight: 600;
  margin: 24px 0 12px;
  padding-bottom: 8px;
}

h3{
  border-bottom: 1px solid var(--color-border);
  color: var(--font-color-h3);
  font-size: var(--font-h3);
  font-weight: 600;
  margin: 10px 0;
  padding: 0 0 10px 0;
}

.container{
  margin: 40px auto;
  max-width: var(--disp-w);
  padding: 0 16px
}

header{
  margin: 0 auto 50px auto;
  text-align: center;
}

.lead{
  font-size: var(--font-md);
  margin: 30px 0;
}

.yearnav{
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 14px 0 6px;
  display: flex;
  justify-content: center;
}
.yearnav a{
  background: var(--color-card);
  border: 1px solid var(--color-brand); 
  border-radius: 999px;
  color: var(--color-brand);
  display: inline-block;
  font-size: var(--font-sm);
  font-weight: 700;
  padding: 5px 7px;
  text-decoration: none;
}
.yearnav a.active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-card);
}

.note{
  color: var(--color-muted);
  font-size: var(--font-sm);
  margin: 0 0 40px 0;
  text-align:center;
}

.entry{
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  margin: 20px 0;
  padding: 1rem 2rem;
}
.entry-head{
  align-items: center;
  gap: 10px;
}

.date{
  color: var(--color-brand);
  font-size: var(--font-lg);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.title{
  font-size:clamp(16px,2.4vw,20px);
  font-weight:800
}

.content{
  font-size: var(--font-md);
  line-height: 1.2;
  margin-top: 20px;
}

.content-img{
  margin: 16px;
  width: 330px;
}

.goto-top{
  font-size: 90%;
  margin-left: auto;
  padding:1em 1.5em;
  text-align: right;
}

.readmore{
  display: flex;
  justify-content: flex-start;
  margin-top: 1.5rem;
}

.rm-btn{
  align-items: center;
  background: var(--rm-bg);
  border-radius: 9999px;
  border: 1px solid var(--rm-border);
  color: var(--rm-fg);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--font-sm);
  font-weight: 600;
  justify-content: center;
  line-height: 1;
  padding: .5rem .9rem;
  transition: color .18s ease, transform .08s ease;
}

.rm-btn:hover{
  color: #2d3f55; /* 濃いブルーグレー */
}

/* activeでわずかに押し込む */
.rm-btn:active{
  transform: translateY(1px);
}

.rm-btn:focus-visible{
  outline: 2px solid var(--rm-focus);
  outline-offset: 2px;
}

/* ▼矢印アイコン */
.rm-btn::after{
  content: "⏷"; /* 下向きシェブロン */
  font-size: .9em;
  line-height: 1;
  margin-left: .3em;
  transform-origin: center;
  transition: transform .18s ease;
}

/* 展開中（閉じる表示中）は矢印だけ反転 */
.rm-btn[aria-expanded="true"]::after{
  transform: rotate(180deg);
}

/* Footer
-------------------------------------------------- */
footer {
  border-color: var(--color-border);
  border-style: solid;
  border-width: 1px 0 0 0;
  font-size: var(--font-sm);
  margin: 0 auto 20px;
  max-width: var(--disp-w);
  padding: 10px 0;
  text-align: center;
}