@charset "utf-8";
/*全スタイル共通*/
html {
    font-family: 'Noto Serif JP', serif;
}

a {
    text-decoration: none;
    border: none;
}

li {
  text-align: justify;
}


p {
  font-size: 16px;
  text-align: center;
  margin: 60px auto 40px;
}

header img {
  width: 100%;
  height: auto;
}


main {
  width: 70%;
  max-width: 700px;
  margin: 1vw auto;
}

.breadcrumb-001 {
    display: flex;
    gap: 0 22px;
    list-style: none;
    padding: 0;
    margin-top: 6vw;
    font-size: .9em;
}

.breadcrumb-001 li {
    display: flex;
    align-items: center;
}

.breadcrumb-001 li:first-child::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}

.breadcrumb-001 li:not(:last-child)::after {
    display: inline-block;
    transform: rotate(45deg);
    width: .3em;
    height: .3em;
    margin-left: 10px;
    border-top: 1px solid #333333;
    border-right: 1px solid #333333;
    content: '';
}

.breadcrumb-001 a {
    color: #333333;
    text-decoration: none;
}

/* styles.css */
:root{
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #111827;
  --radius: 14px;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, "Yu Gothic", sans-serif;
}

.container{
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px 40px;
}

h1{
  font-size: clamp(22px, 2.5vw, 28px);
  padding-top: 1vw;
  margin: 0 0 18px;
  font-weight: 700;
  letter-spacing: .02em;
}

.spec-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.04);
}

.spec-table th,
.spec-table td{
  padding: 18px 20px;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  word-break: break-word;
}

.spec-table tr:last-child th,
.spec-table tr:last-child td{ border-bottom: none; }

.spec-table th{
  width: 240px;
  background: #f9fafb;
  text-align: left;
  font-weight: 600;
  color: #111827;
}

.spec-table td{ background: #fff; }

.spec-table a{
  color: var(--accent);
  text-align: justify;
  text-decoration: none;
  border-bottom: 1px solid rgba(17,24,39,.25);
}
.spec-table a:hover{ border-bottom-color: currentColor; }

.spec-table ul{
  margin: 0;
  padding-left: 1.2em;
}

.note{
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 14px;
}

#top_button {
    margin: 15% auto;
    width: fit-content;
}
#top_button a:link {
    color: #6d6d6d;
}
#top_button a:visited {
    color: #9d9d9d;
}
#top_button a:hover {
    color: #333;
}

/* Responsive */
@media (max-width: 720px){

  .breadcrumb-001 {
    margin-top: 16vw;
}

  h1 {
    padding-top: 3vw;
  }

  main {
    width: 90%;
    max-width: 700px;
    margin: 1vw auto;
  }

  .spec-table th, .spec-table td{
    display: block;
    width: 100%;
    border-right: none;
    padding: 14px 16px;
  }
  .spec-table tr{
    display: block;
    border-bottom: 1px solid var(--border);
  }
  .spec-table tr:last-child{
    border-bottom: none;
  }
  .spec-table th{
    background: #f9fafb;
    color: var(--muted);
    font-weight: 700;
    padding-bottom: 6px;
  }
}