@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

html {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
}

body {
  word-wrap: break-word;
  background-color: white !important;
  color: #333 !important;
  font-size: 1.0rem;
  padding: 1rem;
  /* Simulate the .container padding/margin */
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.35;
  text-decoration: none;
  padding-bottom: 0.3rem;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

h4 {
  font-size: 1.0rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

h5 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

h6 {
  font-size: 0.85rem;
  font-weight: 600;
  color: #666;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

div {
  font-size: 1.0rem;
  margin: 0;
}

p {
  font-size: 1.0rem;
  color: #333333;
  text-indent: 1rem;
  line-height: 1.5;
  letter-spacing: 0.1rem;
  margin-bottom: 1.5rem;
  text-align: justify;
}

/* Lists */
ul,
ol {
  padding-left: 1.5rem !important;
  margin-left: 0 !important;
  margin-bottom: 1rem !important;
}

ul {
  list-style-type: disc !important;
}

ol {
  list-style-type: decimal !important;
}

ul ul,
ol ol,
ul ol,
ol ul {
  margin-bottom: 0 !important;
  padding-left: 1.5rem !important;
}

li {
  line-height: 1.6;
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
}

li::marker {
  font-weight: normal;
}

/* Quotes */
blockquote {
  border-left: 4px solid #ccc;
  padding-left: 1rem;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1rem;
  color: #555;
  font-style: italic;
  background-color: #f9f9f9;
  padding: 1rem 1rem 1rem 1.5rem;
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.5rem;
}

th,
td {
  border: 1px solid #ddd;
  padding: 0.75rem;
}

th {
  background-color: #f5f5f5;
  font-weight: 600;
}

/* Media */
img {
  width: 100%;
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

figure {
  margin: 1rem 0;
}

figcaption {
  text-align: center;
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.5rem;
}

/* Inline Elements */
a {
  color: #0066cc;
  text-decoration: underline;
}

a:hover {
  color: #004499;
}

strong,
b {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

u {
  text-decoration: underline;
}

s {
  text-decoration: line-through;
}

pre,
code {
  font-family: 'Courier New', Courier, monospace;
  background-color: #f4f4f4;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-size: 0.9em;
}

pre {
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1rem;
}


/* ── Template layout classes ─────────────────────────────────── */

/* Reset: cancel the global `div { margin-bottom:1rem }` for ALL
   template layout elements. Only .tpl-row / .tpl-row-lg carry
   intentional outer margin via the rules below. */
[class^="tpl-"] {
  margin-bottom: 0;
}

.tpl-row {
  clear: both;
  overflow: hidden;
  /* contain floated children */
}

.tpl-row-lg {
  clear: both;
  overflow: hidden;
  /* contain floated children */
}

.tpl-row + *,
.tpl-row-lg + * {
  clear: both;
}

.tpl-col-num {
  float: left;
  width: 2rem;
}

.tpl-col-body {
  float: left;
  width: calc(100% - 2rem);
  overflow: hidden;
  /* contain child floats */
}

.tpl-col-art {
  float: left;
  width: 4rem;
}

.tpl-col-art-body {
  float: left;
  width: calc(100% - 4rem);
  overflow: hidden;
  /* contain child floats */
}

.tpl-col-art-body2 {
  float: left;
  width: calc(100% - 4rem);
  margin-left: 4rem;
}

.tpl-col-rev-label {
  float: left;
  font-size: 0.7rem;
  width: 3rem;
}

.tpl-col-rev-date1 {
  float: left;
  font-size: 0.7rem;
  width: 7rem;
}

.tpl-col-rev-date2 {
  float: left;
  font-size: 0.7rem;
  width: 10rem;
  text-align: right;
}

.tpl-col-rev-date2-left {
  float: left;
  font-size: 0.7rem;
  width: 10rem;
  text-align: left;
}

.tpl-right {
  float: right;
  font-size: 1rem;
  overflow: hidden;
  /* contain inner tpl-col-rev-* floats */
}

.tpl-clear {
  clear: both;
}


/* ── Custom bullet lists ─────────────────────────────────────────── */
/* Usage: <ul class="tpl-ul tpl-ul-circle"> <li>item</li> </ul>      */
.tpl-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tpl-ul li {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.tpl-ul li::before {
  flex-shrink: 0;
  width: 1.5rem;
}

/* Bullet variants */
.tpl-ul.tpl-ul-circle li::before {
  content: "●";
}

.tpl-ul.tpl-ul-arrow li::before {
  content: "▶";
  font-size: 0.75em;
  margin-top: 0.2em;
}

.tpl-ul.tpl-ul-check li::before {
  content: "✓";
}

.tpl-ul.tpl-ul-dash li::before {
  content: "－";
}

/* ── Inline span helpers ─────────────────────────────────────────── */
/* <span class="tpl-tab"> : 1rem spacer (stackable for deeper indent) */
/* <span class="tpl-bullet">●</span> : 2rem inline bullet holder     */
.tpl-tab {
  display: inline-block;
  width: 1rem;
}

.tpl-bullet {
  display: inline-block;
  width: 2rem;
}

.tpl-bullet-lg {
  display: inline-block;
  width: 4rem;
}

ul.numbered {
  font-size: 1.0rem;
  color: #333333;
  line-height: 1.5;
  letter-spacing: 0.1rem;
  margin-bottom: 1.5rem;
  list-style: decimal outside;
  padding-left: 3rem;
}

ul.dots {
  font-size: 1.0rem;
  color: #333333;
  line-height: 1.5;
  letter-spacing: 0.1rem;
  margin-bottom: 1.5rem;
  list-style: disc outside;
  padding-left: 3rem;
}