@layer reset, base, utilities;

/* デザイントークン（色・余白・フォントの出所） */
:root {
  --color-bg: #f7f7f7;
  --color-text: #333;
  --color-border: #ccc;
  --color-muted: #6b7280;
  --color-accent: #0abab5;
  --color-surface: #ffffff;
  --color-strong: #FCF16E;
  --color-cancel: #888;

  --font-sans:
    -apple-system, BlinkMacSystemFont,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --font-size: 1rem;
  --line-height: 1.7;

  --gap: 24px;
  --card-min: 260px;
}

@font-face { font-display:swap; font-family:'Afacad'; font-style:normal; font-weight:700; src:url(../webfonts/afacad-v2-latin-700.woff2) format('woff2')}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; border: none; }
  ul, ol { list-style: none; margin: 0; padding: 0 }
  table { border-collapse: collapse; border-spacing: 0; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size);
  line-height: var(--line-height);
}
a { color: var(--color-accent); text-decoration: none;}
h1, h2, h3 { line-height: 1.2; }
.mb20 { margin-bottom: 20px; }


:where(#post-container) {
  p{ display: block; margin-bottom: 2.0rem; }
  ul{ list-style: square outside; padding: 20px 30px 20px 50px; margin-bottom: 2.0rem; background: var(--color-bg); }
  ol{ list-style: decimal outside; padding: 20px 30px 20px 50px; margin-bottom: 2.0rem; background: var(--color-bg); }
  li{ margin-bottom: 10px;
    &:last-child { margin-bottom: 0; }
  }
  b, strong { background: linear-gradient(transparent 0%, transparent 50%, var(--color-strong) 50%, var(--color-strong) 100%); font-weight: 700; }
  table {
    width: 100%;
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    margin-bottom: 2.0rem;
	  
    th, td { text-align: left; font-size: 0.875rem; padding: 5px 10px; border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); width: auto; vertical-align: top; }
    th { background: var(--color-accent); color: var(--color-surface); }
  }
  img { display: block; margin-bottom: 2.0rem; }
  img[width="1"][height="1"] { width: 1px; height: 1px; margin: 0; padding: 0; }
  a > img { margin: 0 auto 2.0rem; }
  a:has(> picture) { display: block; line-height: 0; }
  
  @media (max-width: 430px) {
	& {
  
      ul { padding: 20px 15px 20px 30px; }
      ol { padding: 20px 15px 20px 30px; }
    }
  }  
}


#container {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 50px;
    
  @media (max-width: 1024px) {
    & { width: 95%; grid-template-columns: 1fr; }   
  }
}

#container > main {
  min-width: 0;
}
  
#post-container {
  position: relative;
  background: var(--color-surface);
  padding: 50px;
  
  @media (max-width: 430px) {
    & { padding: 50px 20px; }
  }
}

.sp { 
  display: none;
  
  @media (max-width: 430px) {
    & { display: block; }
  }
}

ins.adsbygoogle {
  display: block;
  max-width: 100%;
  overflow: hidden;
}