/* Generic article styles (renamed from checklist.css for reuse across article pages) */
.article-card { background:#fff; border-radius:8px; 
  padding:24px; 
  box-shadow:0 1px 0 rgba(0,0,0,0.04);
@media(max-width:768px){
  flex-wrap: wrap;
    flex-direction: column;
    display: flex;
}
}
.article-meta { 
    display: block;
    gap: 12px;
    margin-bottom: 16px;
    max-width: calc(100% - 13rem);
    @media(max-width:768px){
      max-width: 100%;
    }
}
.article-card{ position:relative; background:#fff; border-radius:8px; padding:24px; box-shadow:0 1px 0 rgba(0,0,0,0.04); }
.article-title{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.article-title h1{ 
color: #0A0A0A;
font-family: Inter;
font-size: 1.44444rem;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.01733rem;
@media(max-width:768px){
  font-size: 1.2rem;
  }
}
.article-sub{ color:#4b6b63; margin:8px 0 6px;
  @media(max-width:768px){
  font-size: 0.8rem;
  }
 }
.review-date{ color:#6b776f; font-size:13px; margin-top:6px }
.tool-badge{ 
  background:#e6f3ea; color:var(--ene-green); padding:6px 10px; border-radius:18px; font-weight:700;
  @media(max-width:768px){
    display: none;
  }
}
.supervisor-card{ position:absolute; right:18px; top:18px; background:#fff; border:1px solid #dfeee3; padding:12px 14px; border-radius:12px; box-shadow:0 8px 20px rgba(16,24,20,0.06); 
@media(max-width:768px){
  position: static;
    margin: 1rem 0;
font-size: 0.7rem;
display: flex;
        flex-wrap: wrap;
  }
}
.supervisor-card .sc-label{ color:#2f6f6a; font-weight:700;
  @media(max-width:768px){
  font-size: 0.8rem;
  margin-top: 0;
  margin-right: 0.5rem ;

  }
 }
.supervisor-card .sc-name{ margin-top:6px; font-weight:700 ;
@media(max-width:768px){
  font-size: 0.8rem;
  margin-top: 0;
  margin-right: 0.5rem ;
  }
}
.supervisor-card .sc-date{ margin-top:6px; color:#6b776f; font-size:13px;
@media(max-width:768px){
  font-size: 0.6rem;
  margin-top: .5rem;
  width: 100%;
  }
}
.article-feature { width:100%; max-height:260px; overflow:hidden; border-radius:6px; }
.article-feature img{width:100%; height:auto; display:block}
.article-section + .article-section{ margin-top:22px; border-top:1px solid #eee; padding-top:18px }
.note-box{ background:#f4ece0; padding:16px; border-radius:6px; }

/* flow boxes (question blocks at top of section 3) */
.flow-box{ background:#fff; border-radius:12px; padding:16px; border:1px solid #e6e6e6; box-shadow:0 6px 18px rgba(16,24,20,0.03); margin-bottom:12px }
.flow-box p{ margin:0; line-height:1.6 }

/* subsection small headings */
.article-section h6{ margin:12px 0 8px; font-size:1rem; font-weight:700; color:#0b513f }

/* mini check box style (blue) */
.mini-check-box{ margin-top:12px; padding:16px; border-radius:8px; background:#eef7ff; border:1px solid #d7ecff; color:#0b3b66 }
.mini-check-box h6{ margin:0 0 10px; font-size:1.05rem }
.mini-check-box .checklist{ margin:0; padding:0 }
.mini-check-box .checklist li{ border-bottom:none; padding:8px 0; display:flex; align-items:flex-start }
.mini-check-box .checklist input[type=checkbox]{ width:18px; height:18px; margin-right:12px; margin-top:3px }

/* route requirement colored cards: tighten spacing and headings */
.card .checklist.full-list{ margin:0; padding:0 }
.card .checklist.full-list li{ padding:6px 0; border-bottom:none }

/* Persist checkbox state using localStorage */
.checklist input[type="checkbox"]{ cursor:pointer }

/* checklist and layout */
.checklist { list-style:none; padding:0; margin:0; }
.checklist li { padding:10px 0; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; gap:12px;
  label {
    display: flex;
    align-items: center;
  }
 }
.checklist input[type=checkbox]{ width:18px; height:18px; margin-right: 0.5rem; }
.card{ 
  background:#fff; border-radius:12px; padding:18px; box-shadow:0 8px 20px rgba(16,24,20,0.04); border:1px solid rgba(0,0,0,0.03); 
  @media(max-width:768px){
    box-shadow: none;
    border:none;
    padding:1rem 0;
  }
h5 {
  font-size: 1.1rem;
  font-weight: 700;
  @media(max-width:768px){
    font-size: .9rem;
  }
}
h3,h4,h5,h6,p {
  margin-bottom: .5rem;
}
}
.card-title{ 
  font-size:1.3rem; font-weight:700; margin:0 0 12px;
  @media(max-width:768px){
    font-size: 1rem;
  }
 }
.checklist.full-list li{ padding:14px 0; border-bottom:1px solid #eee }

.final-box{ background:#efe5da; padding:20px; border-radius:12px; }
.final-box .checklist li{ border-bottom: none; padding:8px 0 }

/* section boxes used in '提出に必要なもの' */
.section-box{ background:#fff; border-radius:12px; padding:18px; box-shadow:0 6px 18px rgba(16,24,20,0.03); border:1px solid #eee; margin-bottom:18px }
.section-box h5{ margin-top:0; margin-bottom:12px; font-weight:700 }
.section-box .doc-list{ list-style:none; margin:0; padding:0 }
.section-box .doc-list li{ display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid #f2f4f6 }
.section-box .doc-list li:last-child{ border-bottom:none }
.section-box .doc-list .doc-icon{ color:#7a7f85; width:22px; display:inline-flex; align-items:center; justify-content:center }

/* yellow highlight box for parallel procedures */
.section-box--highlight{ background:#fff8e6; border:1px solid #f1e4c8 }
.section-box--highlight p{ margin:0; padding:12px 0 }

/* numbered steps with blue circle */
.steps{ list-style:none; margin:0; padding:0 }
.steps li{ display:flex; align-items:flex-start; gap:12px; padding:12px 0 }
.steps .step-no{ width:34px; height:34px; border-radius:50%; background:#e6f2ff; color:#1f6fd6; display:inline-flex; align-items:center; justify-content:center; font-weight:700 }
.steps span{ line-height:1.6 }

/* small yellow notice box used under steps */
.notice-yellow{ margin-top:12px; padding:12px; border-radius:8px; background:#fff9e6; border:1px solid #efe3c4; color:#5a4630 }
.notice-yellow p{ margin:0 }

/* intro list with check icons */
.intro-list{ list-style:none; margin:0; padding:0 }
.intro-list li{ display:flex; gap:12px; align-items:flex-start; padding:12px 0 }
.intro-icon{ width:36px; height:36px; border-radius:50%; background:#e6f2ff; color:#1f6fd6; display:inline-flex; align-items:center; justify-content:center; font-weight:700; border:2px solid rgba(31,111,214,0.12) }
.intro-list .text{ line-height:1.6; color:#1f2d33;    width: calc(100% - 36px - 1rem); }

/* light-blue intro card used for article intros (matches design) */
.intro-card{ background: linear-gradient(180deg, #f3f9ff 0%, #ffffff 100%); border-radius:12px; padding:18px; border:1px solid #dfeeff; box-shadow: 0 8px 20px rgba(31,111,214,0.04); color:#133a66 }
.intro-card p{ margin:0; line-height:1.7; font-size:1rem }

/* misunderstandings: styled pair of wrong / correct labels */
.mis-list{ display:flex; flex-direction:column; gap:12px }
.mis-item{ padding:12px; border-radius:8px; background:transparent }
.mis-label{ display:inline-block; padding:6px 10px; border-radius:10px; font-weight:700; color:#fff; font-size:0.95rem }
.mis-label.mis-wrong{ background:#e06060 }
.mis-label.mis-right{ background:#38a87c }
.mis-item .mis-text{ margin-top:8px; color:#27323a; line-height:1.6 }

/* definition cards list: icon at left + content */
.def-list{ display:flex; flex-direction:column; gap:14px }
.def-item{ display:flex; gap:14px; align-items:flex-start; padding:18px; border-radius:10px }
.def-item .def-icon{ width:48px; height:48px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:#fff; flex:0 0 48px; font-size:18px }
.def-item .def-content{ flex:1 }
.def-item h5{ margin:0 0 6px }
.def-item p{ margin:0; color:#27323a; line-height:1.6 }

/* specific color tokens for items (fallback if inline bg not provided) */
.def-item.zeb{ background:#e8f9ee; border:1px solid #cfeee0 }
.def-item.nearly{ background:#eef6ff; border:1px solid #d7e9ff }
.def-item.ready{ background:#fff7ed; border:1px solid #f2dec6 }
.def-item.oriented{ background:#f7eefb; border:1px solid #ecdff5 }
.def-item.zeb .def-icon{ background:#2f9a63 }
.def-item.nearly .def-icon{ background:#3b82f6 }
.def-item.ready .def-icon{ background:#f59e0b }
.def-item.oriented .def-icon{ background:#9b6bd1 }


.toc-card { background:#f6f2ea; border-radius:6px; padding:16px; }
.toc-card ul{ list-style:none; padding:0; margin:0 }
.toc-card li{ padding:10px 0; border-bottom:1px solid rgba(0,0,0,0.05) }
@media(min-width:1024px){ .toc-card{ position:sticky; top:120px } }
/* Mobile: move sidebar below content and make full width */
@media(max-width:1023px){
  .toc-card{ position:static; top:auto; width:100%; margin-top:18px }
  aside.column.is-3{ flex-basis:100%; max-width:100%; }
  /* make toc items compact for mobile */
  .toc-card h4{ font-size:1rem; margin-bottom:8px }
  .toc-card ul li{ padding:8px 0; }
}

/* helper classes to replace inline styles in HTML */
.article-body{ 
  margin-top:20px;
  @media(max-width:768px){
    font-size: 0.9rem;
  }
}
.meta-right{ margin-left:auto; text-align:right }
.tag-download{ margin-top:8px }
.toc-card h4, .toc-title{ margin-top:0 }
.spaced{ margin-top:18px }
.inner-list{ margin:0; padding-left:18px }
.review-date{ margin-top:6px }


.faq-section .faq-list {
  margin-bottom: 3rem ;
}

.more_detail {
border-radius: 0.55556rem;
border: 1px solid #E0E7EC;
background: #F9FAFB;
p {
color: #364153;
font-family: Inter;
font-size: 0.9rem;
font-style: normal;
font-weight: 600;
padding: 1rem 1.33333rem;
strong {
  font-weight: 700; 
color: #38A87C;
}
}
}

.link-list {
  list-style: none;
  margin: 2rem auto;
  padding: 0;
  li {
    margin-bottom: 0.75rem;
  }
}

.external-link {
  color: #111;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
}