@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zen-kaku-gothic-new-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zen-kaku-gothic-new-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zen-kaku-gothic-new-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@layer reset, base, utilities;

/* デザイントークン（色・余白・フォントの出所） */
:root {
  --font-base: "Zen Kaku Gothic New", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-size: 1rem;
  --line-height: 1.6;
  
  --color-white: #fff;
  --color-black: #333;
  --color-blue: #19b1c6;
  --color-red: #E76F6F;
  --color-yellow: #F6C85F;
  --color-glay: #ccc;
  --color-l-glay: #f1f1f1;
	
  --color-bg: var(--color-white);
  --color-text: var(--color-black);
  --color-border: var(--color-glay);
  --color-bg-box: var(--color-l-glay);
}

@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;
    }
  }
}

@layer base {
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: 400;
  }
  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: 1.0rem 2.0rem; margin-bottom: 2.0rem; background: var(--color-bg); }
    ol{ list-style: decimal outside; padding: 1.0rem 2.0rem; margin-bottom: 2.0rem; background: var(--color-bg); }
    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.95rem; 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; }
  }
}

#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; }
  }
}