/* @import "assets/fonts/font.css";
@import "assets/css/common/base.css";
@import "assets/css/common/header.css";
@import "assets/css/common/footer.css";
@import "assets/css/common/button.css";
@import "assets/css/common/layout.css";
@import "assets/css/pages/top2/metrics.css";
@import "assets/css/pages/top2/cta.css";
@import "assets/css/pages/top2/services-v3.css";
@import "assets/css/common/text-scale-lg.css"; */
.docs .section-sub{ background: var(--bg-sub); }
.plan-sec-head{ margin: 0 0 20px; }
.plan-sec-head .sec-lead{
  color: var(--text-sub);
  font-size: 15px;
  line-height: 1.95;
  margin: 18px 0 0;
  max-width: 720px;
}

.top-section{ padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 52px); }

.sub-section{padding: clamp(10px, 4vw, 10px) 0;}

.h-H{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 18px;
  background: #fff;
  border-radius: 12px;
  padding: 16px 22px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.02),
    0 12px 28px -16px rgba(15,23,42,0.18),
    0 2px 6px -2px rgba(15,23,42,0.06);
  border: 1px solid #EEF0F2;
  position: relative;
  overflow: hidden;
  margin: 0;
}
.h-H::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent) 0%, #8a0014 100%);
  border-radius: 12px 0 0 12px;
}
.h-H .num{
  font-family: "JetBrains Mono JP", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--text);
  letter-spacing: 0.02em;
  padding-right: 18px;
  border-right: 1px solid var(--line-strong);
}
.h-H .body .meta{
  display: block;
  font-family: "JetBrains Mono JP", "Noto Sans JP", sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-sub);
  text-transform: uppercase;
  margin-bottom: 3px;
  font-weight: 600;
}
.h-H .body h2{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
}

    

    

    .card {
      background: #fff;
      border-radius: 12px;
      padding: 20px 28px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

.hero{
  position: relative;
  
  
  
  overflow: hidden;
  isolation: isolate;
}
.hero .hero-bg,
.hero .hero-overlay{
  display: none;
}
.hero .hero-bg{
  position: absolute; inset: 0;
  background: url("assets/img/first_view_bg.jpg") right center / cover no-repeat;
  
  filter: brightness(0.8) saturate(1.1);
  transform: scale(1);
  z-index: 0;
}
.hero .hero-overlay{
  position: absolute; inset: 0;
  
  background:
    radial-gradient(120% 80% at 30% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%),
    linear-gradient(90deg, rgba(17,24,39,0.45) 0%, rgba(17,24,39,0.10) 60%);
  z-index: 1;
}
.hero-inner{ position: relative; z-index: 2; }
.hero .crumbs{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-sub);
}
.hero .crumbs a{
  color: inherit;
  text-decoration: none;
}
.hero .crumbs a:hover{
  color: var(--accent);
}
.hero .crumbs .sep{
  color: currentColor;
  opacity: 0.55;
}
.hero .crumbs .cur{
  color: var(--text);
}
.hero h1{
  font-size: var(--fs-hero);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
  
  color: black;
  text-wrap: balance;
}
.hero h1 em{
  font-style: normal;
  background: linear-gradient(transparent 65%, rgba(230,0,35,0.5) 65%);
  padding: 0 2px;
}
.hero-sub{
  max-width: 750px;
  
  color: black;
  font-size: 16px;
  line-height: 1.9;
  margin: 0 0 10px;
  
}
body.hero-visual-on .hero .hero-bg,
body.hero-visual-on .hero .hero-overlay{
  display: block;
}

body.hero-visual-black .hero .hero-bg,
body.hero-visual-black .hero .hero-overlay{
  display: none;
}

body.hero-visual-on .hero h1,
body.hero-visual-on .hero-sub{
  color: #fff;
}
body.hero-visual-on .hero .crumbs{
  color: rgba(255,255,255,0.78);
}
body.hero-visual-on .hero .crumbs .cur,
body.hero-visual-on .hero .crumbs a:hover{
  color: #fff;
}

body.hero-visual-black .hero-sub{
  color: var(--text-mute);
}

body.hero-visual-black .hero{
  background: #111827;
}

body.hero-visual-image-6 .hero .hero-bg{
  background-image: url("assets/img/first_view_bg.jpg");
  background-position-y: 42%;
}

body.hero-visual-blur .hero .hero-bg{
  filter: brightness(0.8) saturate(1.1) blur(3px);
  transform: scale(1.08);
}
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; }

.hero .btn.btn-ghost{
  background: #ffffff;
  color: #1f2937;
  border-color: #d1d5db;
}
.hero .btn.btn-ghost:hover{
  background: #e5e7eb;
  color: #111827;
  border-color: #9ca3af;
}

  
  

    .industry-links {
      margin-top: 24px;
    }

    .industry-links h2 {
      margin: 0 0 8px;
      font-size: 22px;
    }

    .industry-links .lead {
      margin: 0 0 18px;
      color: #555;
    }

    .industry-group {
      
    }

    .industry-filter-form {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      .industry-filter-form details {
        margin-top: 0.5rem;
        border: 1px solid #d6d9df;
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
      }

      .industry-filter-form summary {
        cursor: pointer;
        color: #374151;
        font-weight: 700;
        list-style: none;
        padding: 14px 18px;
        background: #fff;
      }

      .industry-filter-form summary::-webkit-details-marker {
        display: none;
      }

      .industry-filter-form summary::after {
        content: "";
        margin-left: 0.5rem;
        color: #6b7280;
      }

      .industry-filter-form details[open] summary::after {
        content: "";
      }

      .industry-filter-form details[open] summary {
        border-bottom: 1px solid #d6d9df;
      }

      .industry-filter-form details .search-box {
        
        padding: 18px 18px 0 18px;
        background: #fff;
      }

    .industry-group-title {
      
      margin:0;
      font-size: 18px;
      color: #4b5563;
      font-weight: bold;
    }

    .industry-tag-list {
      display: flex;
      flex-wrap: wrap;
      
      gap:5px;
    }

    .industry-tag {
      display: inline-flex;
      align-items: center;
      
      gap:0.25rem;
      padding: 8px 14px;
      
      
      color: #374151;
      font-size: 14px;
      font-weight: bold;
      
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .industry-tag.secondary {
      
      
      
      color: #374151;

    }

    .industry-tag input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: #4b5563;
    }

    .industry-tag:hover {
      background: #e5e7eb;
      border-color: #9ca3af;
    }

    .industry-tag:has(input:checked) {
      background: #d1d5db;
      border-color: #6b7280;
      color: #111827;
    }

    .industry-filter-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 0.75rem;
      padding: 0 12px 12px;
    }

    .industry-filter-actions .btn {
      padding: 10px 20px;
      min-height: 0;
      font-size: 14px;
      width: auto;
      justify-content: center;
    }

.paging-area {
  margin-top: 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  justify-content: initial;
  align-items: center;
  gap: 16px;
}

  .paging-area {
    display: grid;
    grid-template-columns: auto 1fr auto;
    justify-content: initial;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
  }

  .pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-column: 2;
    justify-self: center;
    margin-inline: auto;
  }

  .pagination button {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid #d9dfeb;
    background: #fff;
    color: #172033;
    cursor: pointer;
  }

  .pagination .active {
    background: #172033;
    border-color: #172033;
    color: #fff;
  }

  .result-count {
    font-size: 14px;
    color: #6d7686;
    grid-column: 3;
    justify-self: end;
    white-space: nowrap;
  }

  .result-year-select {
    min-width: 120px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #d9dfeb;
    border-radius: 10px;
    background: #fff;
    color: #172033;
    font-size: 14px;
    grid-column: 1;
    justify-self: start;
  }

  .search-paging-area {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 18px;
  }

  .search-paging-area .result-year-select,
  .search-paging-area .pagination,
  .search-paging-area .result-count {
    grid-row: 1;
  }

  body.paging-order-year-first .paging-area {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    justify-content: initial;
  }

  body.paging-order-year-first .pagination {
    grid-column: 2;
    justify-self: center;
    margin-inline: auto;
  }

  body.paging-order-year-first .result-year-select {
    grid-column: 1;
    justify-self: start;
  }

  body.paging-order-year-first .result-count {
    grid-column: 3;
    justify-self: end;
    white-space: nowrap;
  }

  @media (max-width: 767px) {
    .paging-area {
      grid-template-columns: 1fr auto;
      gap: 10px;
    }

    .search-paging-area {
      grid-template-columns: 1fr auto;
      row-gap: 10px;
      column-gap: 10px;
    }

    .pagination {
      grid-column: 1 / -1;
      justify-self: center;
      margin-inline: auto;
      gap: 4px;
    }

    .result-count {
      white-space: normal;
      font-size: 14px;
      line-height: 1.4;
      text-align: right;
    }

    .pagination button {
      width: 36px;
      height: 36px;
      border-radius: 8px;
    }

    .search-paging-area .pagination {
      grid-column: 1;
      grid-row: 2;
      justify-self: start;
      margin-inline: 0;
    }

    .search-paging-area .result-count {
      grid-column: 2;
      grid-row: 2;
      justify-self: end;
    }

    .result-count-range {
      display: none;
    }

    .result-year-select {
      grid-column: 1 / -1;
      grid-row: 1;
      justify-self: stretch;
      width: 100%;
    }

    .search-paging-area .result-year-select {
      grid-column: 1 / -1;
      grid-row: 1;
      justify-self: stretch;
      width: 100%;
    }

    body.paging-order-year-first .paging-area {
      grid-template-columns: 1fr auto;
      gap: 10px;
    }

    body.paging-order-year-first .pagination {
      grid-column: 1 / -1;
      grid-row: auto;
      justify-self: center;
      margin-inline: auto;
      gap: 4px;
    }

    body.paging-order-year-first .search-paging-area .result-year-select {
      grid-column: 1 / -1;
      grid-row: 1;
      justify-self: stretch;
      width: 100%;
    }

    body.paging-order-year-first .search-paging-area .pagination {
      grid-column: 1;
      grid-row: 2;
      justify-self: start;
      margin-inline: 0;
      gap: 4px;
    }

    body.paging-order-year-first .search-paging-area .result-count {
      grid-column: 2;
      grid-row: 2;
      justify-self: end;
      white-space: normal;
      font-size: 14px;
      line-height: 1.4;
      text-align: right;
    }

    body.paging-order-year-first .pagination button {
      width: 36px;
      height: 36px;
      border-radius: 8px;
    }
  }

    .works-list {
      margin-top: 0;
      padding-top: 0.5rem !important;
    }

    .works-list .paging-area {
      margin-top: 0;
    }

    .search-accordion {
      padding-bottom: 0 !important;
    }
      

    .works-list {
      display: flex;
      flex-direction: column;
      gap: var(--works-list-gap);
    }

    .works-list > .container {
      display: flex;
      flex-direction: column;
      gap: var(--works-list-gap);
    }

    .work-card {
      background: white;
      border-radius: 12px;
      padding: 30px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .work-header {
      display: flex;
      gap: 20px;
      align-items: flex-start;
    }

    .work-icon {
      width: 72px;
      height: 72px;
      border-radius: 12px;
      background: #e6edf5;
      flex-shrink: 0;
    }

    .work-title-area h2 {
      margin: 0;
      font-size: 28px;
      line-height: 1.5;
    }

    .work-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .tag {
      background: #edf4fb;
      color: #1f4e79;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 13px;
    }

    .work-content {
      display: grid;
      gap: 22px;
      margin-top: 28px;
    }

    .content-block {
      border-left: 4px solid #1f4e79;
      padding-left: 16px;
    }

    .content-block h3 {
      margin: 0 0 10px;
      font-size: 18px;
    }

    .content-block p {
      margin: 0;
    }

.work-item {
  background: #fff;
  border: 1px solid #cfd9e8;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}

.work-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent) 0%, #8a0014 100%);
  border-radius: 12px 0 0 12px;
}

.work-category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--work-category-top-space);
  margin-bottom: 0;
}

.work-category-tags span {
  background: #fff;
  color: #111827;
  padding: 1px 5px;
  border: 1px solid #111827;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.5;
  font-family: "JetBrains Mono", monospace;
  font-weight: 350;
  
  

}

.work-title {
  margin: 0;
  font-size: var(--work-title-font-size, 26px);
  line-height: 1.3;
}

.work-body {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 28px;
  margin-top: var(--work-body-top-space, 8px);
  padding-top: var(--work-body-top-space, 8px);
}

.work-summary h3,
.work-tech h3 {
  margin: 0 0 var(--work-content-title-margin-bottom, 10px);
  font-size: var(--work-content-title-font-size, 16px);
  color: #4b5563;
}

.work-tech h3 {
  
}

:root{
  --tech-group-gap: 14px;
  --sp-accent-color: #ff3d3d;
}

.work-tech-groups {
  display: grid;
  gap: var(--tech-group-gap, 14px);
  position: relative;
  padding-left: 16px;
}

.work-tech-groups::before {
  
  
  
}

.work-tech-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.work-tech-group h4 {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  
  font-weight: 500;
  flex: 0 0 7rem;
  padding-top: var(--work-tech-kind-top-space);
}

.work-tech-group .tech-tags {
  flex: 1 1 240px;
  min-width: 0;
}

@media (min-width: 768px) {
  .work-tech-group {
    flex-wrap: nowrap;
  }

  .work-tech-group h4 {
    flex: 0 0 7rem;
  }

  .work-tech-group .tech-tags {
    flex: 1 1 auto;
  }
}

.work-summary p {
  margin: 0;
  font-family: var(--work-summary-font-family, "Zen Kaku Gothic New", "Noto Sans JP", sans-serif);
  font-weight: 400;
}

.work-scale {
  margin-top: 14px !important;
  font-weight: bold;
  color: #4b5563;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-tags span {
  background: #fff;
  color: #111827;
  border: 1px solid #111827;
  padding: 1px 5px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 767px) {
  html,
  body{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .docs,
  .container{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .hero{
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .hero h1{
    margin-bottom: 10px;
  }

  .hero-sub{
    font-size: 14px;
    line-height: 1.75;
  }

  .hero .hero-bg,
  .hero .hero-overlay{
    inset: 0;
    width: auto;
    min-width: 0;
  }

  .site-header{
    width: 100%;
  }

  .site-header .header-inner{
    min-width: 0;
    height: 60px;
    gap: 12px;
    padding-inline: 16px;
  }

  .site-header .brand{
    min-width: 0;
    flex: 1 1 auto;
    gap: 8px;
  }

  .site-header .brand-name{
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
  }

  .site-header .brand-name span{
    margin-left: 4px;
  }

  .site-header .nav{
    display: none;
  }

  .site-header .menu-btn{
    display: grid;
    place-items: center;
    flex: 0 0 40px;
  }

  .work-body {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.variant-archive .work-body {
    gap: 8px;
  }
}

    

    .search-box {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .search-box .text-input {
      height: 44px;
      
      padding: 0 12px 0 5px;
      border: 1px solid #ccc;
      border-radius: 6px;
      min-width: 220px;
      width: min(420px, 100%);
    }

    .detail-filter-group {
        display: flex;
        flex-direction: column;
        
      }

      .keyword-inline {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .keyword-inline .industry-group-title {
        flex: 0 0 auto;
      }

      .detail-filter-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }

    .detail-filter-actions .btn {
      padding: 11px 20px;
      min-height: 0;
      font-size: 14px;
    }

  .v-link{
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.v-link .arrow{ display: inline-block; transition: transform .15s; }
.v-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.32);
}

.works-h3{
  color: var(--accent);
}

body.variant-archive .docs{
  background: #f4f6f8;
}
body.variant-archive .hero{
  background:
    
    #ffffff;
  border-bottom: 1px solid #d9dee7;
}
body.variant-archive.hero-visual-black .hero{
  background: #111827;
  border-bottom-color: #111827;
}
body.variant-archive .hero h1{
  letter-spacing: 0.08em;
}
body.variant-archive .hero h1::before{
  
}
body.variant-archive .section-sub{
  background: var(--filter-section-bg);
  border-top: 1px solid #d8dee8;
  border-bottom: 1px solid #d8dee8;
}
body.variant-archive{
  --line-accent: #172033;
  --line-accent-dark: #172033;
  --filter-section-bg: #eef1f5;
  --work-card-bg: #ffffff;
  --mono-title-color: #20394f;
  --work-summary-font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --work-card-padding-y: 10px;
  --work-card-padding-top-mobile: 10px;
  --work-title-font-size: 26px;
  --work-body-top-space: 8px;
  --work-content-title-font-size: 16px;
  --work-content-title-margin-bottom: 10px;
  --work-title-row-bottom-space: 10px;
  --work-title-row-margin-bottom: 14px;
  --work-category-top-space: 14px;
  --work-content-heading-bottom-space: 7px;
  --work-tech-kind-top-space: 2px;
  --works-list-gap: 18px;
  --sp-work-card-padding-x: 20px;
  --sp-works-list-gap: 18px;
  --sp-work-title-row-margin-bottom: 7px;
  --sp-work-body-top-space: 6px;
  --sp-summary-margin-bottom: 5px;
  --sp-content-indent: 0.5rem;
  --sp-mono-category-color: rgb(65, 65, 65);
  --sp-mono-category-border-color: rgb(65, 65, 65);
  --sp-mono-content-title-color: rgb(120, 120, 120);
  --sp-mono-content-border-color: rgb(160, 160, 160);
  --sp-mono-summary-body-color: rgb(65, 65, 65);
  --sp-mono-tech-kind-color: rgb(120, 120, 120);
  --sp-mono-tech-tag-color: rgb(65, 65, 65);
  --sp-mono-tech-tag-border-color: rgb(65, 65, 65);
  --sp-border-color: rgb(160, 160, 160);
  --sp-work-title-font-size: 20px;
  --sp-heading-font-size: 16px;
  --sp-subheading-font-size: 15px;
  --sp-tag-font-size: 12px;
  --sp-summary-font-size: 14px;
}
body.variant-archive .industry-filter-form details{
  border-radius: 12px;
  border-color: #bfc7d4;
}
body.variant-archive .search-box .text-input{
  border-radius: 6px;
  border-color: #bfc7d4;
}
body.variant-archive .industry-filter-form summary{
  background: #fbfcfd;
}
body.variant-archive.hide-works-divider .section-sub{
  border-bottom: 0;
}
body.variant-archive .industry-tag{
  border: 1px solid transparent;
}
body.variant-archive .works-list{
  counter-reset: worksArchive 40;
  background: #fff;
}
body.variant-archive .work-item{
  counter-increment: worksArchive;
  border: 1px solid #c5cedb;
  border-radius: 2px;
  box-shadow: 0 10px 26px -22px rgba(15,23,42,0.55);
  background: var(--work-card-bg);
  padding: var(--work-card-padding-y) 30px var(--work-card-padding-y) 30px;
  line-height: 1.3;
  
}
body.variant-archive .work-item::before{
  
  width: 10px;
  border-radius: 0;
  background: var(--line-accent);
}
body.variant-archive .work-item::after{
  
  position: absolute;
  left: 16px;
  top: 30px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "JetBrains Mono JP", "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: #fff;
  font-weight: 700;
}
body.variant-archive .work-title{
  padding-bottom: 10px;
  border-bottom: 2px solid #172033;
}
body.variant-archive .work-title::before{
  
  font-family: "JetBrains Mono JP", "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: #6b7280;
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}
body.variant-archive .work-category-tags span{
  border-radius: 3px;
  border-color: #7b8491;
  
  background:#fff;
  font-family: "JetBrains Mono", monospace;
}
body.variant-archive .work-body{
  gap: 34px;
}
body.variant-archive .work-summary,
body.variant-archive .work-tech{
  position: relative;
}
body.variant-archive .work-summary h3,
body.variant-archive .work-tech h3{
  font-family: "JetBrains Mono", "Noto Sans JP", sans-serif;
  font-size: var(--work-content-title-font-size, 16px);
  letter-spacing: 0.08em;
  color: #172033;
  border-bottom: 1px solid #d8dee8;
  padding-bottom: var(--work-content-heading-bottom-space);
}
body.variant-archive .tech-tags span{
  border-radius: 3px;
  border-color: #9aa3af;
  background: #fff;
  font-family: "JetBrains Mono JP", "Noto Sans JP", sans-serif;
}
body.variant-archive .pagination button{
  border-radius: 3px;
}

@media (max-width: 767px){
  body.variant-archive .work-item{
    padding-right: var(--sp-work-card-padding-x, 25px);
    padding-left: var(--sp-work-card-padding-x, 25px);
    padding-top: var(--work-card-padding-top-mobile);
    padding-bottom: var(--work-card-padding-y);
  }
  body.variant-archive .work-item::before{
    display: none;
  }
  body.sp-card-accent-on.variant-archive .work-item::before{
    display: block;
    width: 5px;
    background: var(--sp-accent-color, #ff3d3d);
  }
  body.line-width-medium.sp-card-accent-on.variant-archive .work-item::before,
  body.line-width-small.sp-card-accent-on.variant-archive .work-item::before,
  body.line-width-none.sp-card-accent-on.variant-archive .work-item::before{
    display: block;
    width: 5px;
  }
  body.variant-archive .work-item::after{
    left: 18px;
    top: 14px;
    writing-mode: horizontal-tb;
  }
}

.plan-sec-head h2 {
  margin: 0
}

.work-title-row{
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding-bottom: var(--work-title-row-bottom-space);
  margin-bottom: var(--work-title-row-margin-bottom, 14px);
  position: relative;
}

.work-title-row::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #172033;
}

.work-title{
  margin-top: 0;
  font-size: var(--work-title-font-size, 26px);
  line-height: 1.3;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
}

.work-year{
  display: inline-block;
  color: #8a94a6;
  font-family: "JetBrains Mono JP", "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  white-space: nowrap;
}

body.year-tone-strong .work-year{
  color: #4b5563;
}

body.year-pos-1 .work-title-row{
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
}

body.year-pos-1 .work-year{
  order: 1;
}

body.year-pos-1 .work-title{
  order: 2;
}

body.year-pos-2 .work-title-row{
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
}

body.year-pos-2 .work-year{
  order: 1;
}

body.year-pos-2 .work-title{
  order: 2;
}

body.year-pos-3 .work-title-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 16px;
}

body.year-pos-3 .work-title{
  order: 1;
}

body.year-pos-3 .work-year{
  order: 2;
  justify-self: end;
}

body.year-pos-hidden .work-year{
  display: none;
}

body.search-button-left .industry-filter-actions{
  justify-content: flex-start;
}

body.search-button-right .industry-filter-actions{
  justify-content: flex-end;
}

body.variant-archive .work-title{
  font-size: var(--work-title-font-size, 26px);
  line-height: 1.3;
  color: var(--mono-title-color, #20394f);
}

body .work-title-row::after{
  background: var(--mono-title-line-color, #172033);
}

body.hide-title-line .work-title-row::after{
  display: none;
}

body.variant-archive .work-category-tags span{
  color: var(--mono-category-color, #172033);
  border-color: var(--mono-category-border-color, #7b8491);
}

body.variant-archive .work-summary h3,
body.variant-archive .work-tech h3{
  color: var(--mono-content-title-color, #172033);
  border-bottom-color: var(--mono-content-title-border-color, #d8dee8);
}

body.variant-archive.hide-content-headings .work-summary h3,
body.variant-archive.hide-content-headings .work-tech h3{
  display: none;
}

body.variant-archive .work-item{
  border-color: var(--mono-content-border-color, #c5cedb);
}

body .work-summary p{
  color: var(--mono-summary-body-color, inherit);
}

body .work-tech-group h4{
  color: var(--mono-tech-kind-color, #6b7280);
}

body.variant-archive .tech-tags span{
  color: var(--mono-tech-tag-color, #111827);
  border-color: var(--mono-tech-tag-border-color, #9aa3af);
}

body.line-width-medium.variant-archive .work-item::before{
  width: 5px;
}

body.line-width-small.variant-archive .work-item::before{
  width: 1px;
}

body.line-width-none.variant-archive .work-item::before{
  display: none;
}

@media (max-width: 767px){
  .industry-filter-actions .btn {
    width: 100%;
  }

  .work-title-row{
    margin-bottom: var(--sp-work-title-row-margin-bottom, 0);
  }

  body.variant-archive .work-body{
    gap: 8px;
    margin-top: var(--sp-work-body-top-space, 3px);
    padding-top: var(--sp-work-body-top-space, 3px);
  }

  body.variant-archive .works-list,
  body.variant-archive .works-list > .container{
    gap: var(--sp-works-list-gap, 18px);
  }

  body.variant-archive .work-item{
    border-color: var(--sp-mono-content-border-color, #c5cedb);
  }

  body.variant-archive .work-category-tags span{
    color: var(--sp-mono-category-color, #172033);
    border-color: var(--sp-mono-category-border-color, #7b8491);
  }

  body.variant-archive .work-summary h3,
  body.variant-archive .work-tech h3{
    color: rgb(90,90,90);
    
  }

  body .work-summary p{
    color: var(--sp-mono-summary-body-color, inherit);
  }

  body .work-tech-group h4{
    color: var(--sp-mono-tech-kind-color, #6b7280);
  }

  body.variant-archive .tech-tags span{
    color: var(--sp-mono-tech-tag-color, #111827);
    border-color: var(--sp-mono-tech-tag-border-color, #9aa3af);
  }

  .work-title{
    font-size: var(--sp-work-title-font-size, 21px) !important;
  }

  .work-summary h3,
  .work-tech h3,
  body.variant-archive .work-summary h3,
  body.variant-archive .work-tech h3{
    font-size: var(--sp-heading-font-size, 14px) !important;
  }

  .work-tech-group h4{
    font-size: var(--sp-subheading-font-size, 13px) !important;
  }

  .work-category-tags span,
  .tech-tags span{
    font-size: var(--sp-tag-font-size, 12px) !important;
  }

  .work-summary p{
    font-size: var(--sp-summary-font-size, 12px) !important;
  }

  .work-summary{
    margin-bottom: var(--sp-summary-margin-bottom, 8px);
  }

  .work-summary p{
    padding-left: var(--sp-content-indent, 0.5rem);
  }

  .work-tech-groups{
    padding-left: var(--sp-content-indent, 0.5rem);
  }

	.work-tech-group{
	    flex-direction: column;
	    gap: 4px;
	  }

	  .work-tech-group h4{
	    flex: 0 1 auto;
	    display: none;
	  }

	  .work-tech-group .tech-tags{
	    flex: 0 1 auto;
	    padding-left: 0;
	  }

	  body.sp-tech-tags-inline .work-tech-groups{
	    display: flex;
	    flex-wrap: wrap;
	    gap: 8px;
	  }

	  body.sp-tech-tags-inline .work-tech-group,
	  body.sp-tech-tags-inline .work-tech-group .tech-tags{
	    display: contents;
	  }

	  body.sp-tech-tags-inline .tech-tags span{
	    margin: 0;
	  }

	  body.sp-tech-tags-grouped .work-tech-groups{
	    display: grid;
	    gap: var(--tech-group-gap, 14px);
	  }

	  body.sp-tech-tags-grouped .work-tech-group{
	    display: flex;
	    flex-direction: column;
	    gap: 4px;
	  }

	  body.sp-tech-tags-grouped .work-tech-group .tech-tags{
	    display: flex;
	    flex: 0 1 auto;
	    padding-left: 0;
	  }

	  body.sp-year-accent-on .work-year{
	    color: var(--sp-accent-color, #ff3d3d) !important;
	  }

	  body.sp-card-accent-on.variant-archive .work-item::before{
	    background: var(--sp-accent-color, #ff3d3d);
	  }

	  .work-title-row::after{
	    display: none;
	  }

  body.sp-title-border-on .work-title-row::after{
    display: block;
    background: var(--sp-border-color, #d8dee8);
  }

  body.sp-category-border-on .work-category-tags{
    border-bottom: 1px solid var(--sp-border-color, #d8dee8);
    padding-bottom: 6px;
  }

  body.sp-summary-border-on .work-summary{
    border-bottom: 1px solid var(--sp-border-color, #d8dee8);
    padding-bottom: 8px;
  }

  .work-summary h3,
  .work-tech h3,
  body.variant-archive .work-summary h3,
  body.variant-archive .work-tech h3{
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.year-pos-1 .work-title-row,
  body.year-pos-2 .work-title-row,
  body.year-pos-3 .work-title-row{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 2px;
  }

  body.year-pos-1 .work-year,
  body.year-pos-2 .work-year,
  body.year-pos-3 .work-year{
    order: 1;
    justify-self: start;
  }

  body.year-pos-1 .work-title,
  body.year-pos-2 .work-title,
  body.year-pos-3 .work-title{
    order: 2;
    width: 100%;
  }
}
body.variant-archive {
  --line-accent: #ff3d3d;
  --line-accent-dark: #ff3d3d;
  --filter-section-bg: #ffffff;
  --work-card-bg: #ffffff;
  --mono-title-color: #20394f;
  --mono-category-color: rgb(120, 120, 120);
  --mono-category-border-color: rgb(120, 120, 120);
  --mono-content-title-color: rgb(65, 65, 65);
  --mono-content-title-border-color: rgb(200, 200, 200);
  --mono-content-border-color: rgb(120, 120, 120);
  --mono-summary-body-color: rgb(65, 65, 65);
  --mono-tech-kind-color: rgb(160, 160, 160);
  --mono-tech-tag-color: rgb(120, 120, 120);
  --mono-tech-tag-border-color: rgb(120, 120, 120);
  --work-summary-font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --work-card-padding-y: 10px;
  --work-card-padding-top-mobile: 10px;
  --work-title-font-size: 21px;
  --work-body-top-space: 3px;
  --work-content-title-font-size: 14px;
  --work-content-title-margin-bottom: 4px;
  --work-title-row-bottom-space: 1px;
  --work-title-row-margin-bottom: 0px;
  --work-category-top-space: 6px;
  --work-content-heading-bottom-space: 3px;
  --work-tech-kind-top-space: 0px;
  --works-list-gap: 18px;
  --tech-group-gap: 5px;
  --sp-accent-color: #ff3d3d;
  --sp-work-card-padding-x: 20px;
  --sp-works-list-gap: 18px;
  --sp-work-title-row-margin-bottom: 7px;
  --sp-work-body-top-space: 6px;
  --sp-summary-margin-bottom: 5px;
  --sp-content-indent: 0.5rem;
  --sp-mono-category-color: rgb(65, 65, 65);
  --sp-mono-category-border-color: rgb(65, 65, 65);
  --sp-mono-content-title-color: rgb(120, 120, 120);
  --sp-mono-content-border-color: rgb(160, 160, 160);
  --sp-mono-summary-body-color: rgb(65, 65, 65);
  --sp-mono-tech-kind-color: rgb(120, 120, 120);
  --sp-mono-tech-tag-color: rgb(65, 65, 65);
  --sp-mono-tech-tag-border-color: rgb(65, 65, 65);
  --sp-border-color: rgb(160, 160, 160);
  --sp-work-title-font-size: 20px;
  --sp-heading-font-size: 16px;
  --sp-subheading-font-size: 15px;
  --sp-tag-font-size: 12px;
  --sp-summary-font-size: 14px;
}

body.variant-archive .work-title {
  font-size: var(--work-title-font-size, 21px) !important;
  line-height: 1.3 !important;
}

body.variant-archive .work-summary h3,
body.variant-archive .work-tech h3 {
  font-size: var(--work-content-title-font-size, 14px) !important;
}

  /* CTA */
  .cta{
  background: var(--bg-cta);
  color: #fff;
  padding: clamp(64px, 8vw, 96px) 0;
}
.cta-inner{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.cta-inner > :first-child{ min-width: 0; }
.cta-inner > :last-child{
  display: flex;
  align-items: center;
}
.cta h2{
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.cta p{
  color: var(--text-mute);
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  max-width: 560px;
}

/* ===== レスポンシブ（≤ 767px） =====
   1列化＋ボタン全幅（ドロワー内CTAと整合） */
@media (max-width: 767px){
  .cta-inner{ grid-template-columns: 1fr; gap: 24px; }
  .cta-inner > div:last-child{ display: flex; }
  .cta .btn{ width: 100%; justify-content: center; min-height: 52px; }
}

.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: all .15s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover{ background: var(--accent-hover); transform: translateY(-1px); }
.btn-ghost{
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover{ border-color: var(--text); }
.btn-lg{ padding: 18px 36px; font-size: 15px; }
.btn .arrow{ display: inline-block; transition: transform .15s; }
.btn:hover .arrow{ transform: translateX(3px); }

.btn:disabled,
.btn[aria-busy="true"]{
  opacity: 0.7;
  cursor: not-allowed;
}
.btn:disabled:hover,
.btn[aria-busy="true"]:hover{
  transform: none;
}
.btn-primary:disabled:hover,
.btn-primary[aria-busy="true"]:hover{
  background: var(--accent);
}
.btn[aria-busy="true"]::before{
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .work-title,
  body.variant-archive .work-title {
    font-size: var(--sp-work-title-font-size, 20px) !important;
    line-height: 1.3 !important;
  }

  .work-summary h3,
  .work-tech h3,
  body.variant-archive .work-summary h3,
  body.variant-archive .work-tech h3 {
    font-size: var(--sp-heading-font-size, 16px) !important;
  }
}

body.sp-menu-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.sp-menu-open .sp-drawer-panel {
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}