:root {
   --unicef-blue: #1CABE2;
   --unicef-dark: #0058A3;
   --unicef-navy: #002F5F;
   --unicef-yellow: #FF6B1A;
   --unicef-light: #E8F5FB;
   --text-dark: #1A1A2E;
   --text-mid: #444;
   --white: #FFFFFF;
 }
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 html {
   scroll-behavior: smooth;
   scroll-padding-top: 90px;
 }
 body {
   font-family: 'Noto Sans JP', sans-serif;
   color: var(--text-dark);
   background: var(--white);
   overflow-x: hidden;
 }
 /* ── TOP BAR ── */
 .topbar {
   background: var(--unicef-navy);
   color: rgba(255, 255, 255, 0.7);
   font-size: 11px;
   font-family: 'DM Sans', sans-serif;
   letter-spacing: .12em;
   text-align: center;
   padding: 8px 16px;
 }
 /* ── HEADER ── */
 header {
   background: var(--white);
   border-bottom: 3px solid var(--unicef-blue);
   padding: 16px 40px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: sticky;
   top: 0;
   z-index: 100;
   box-shadow: 0 2px 12px rgba(0, 88, 163, .10);
 }
 .logo-wrap {
   display: flex;
   align-items: center;
   gap: 16px;
 }
 .logo-wrap img {
   width: 76px;
   height: 76px;
   object-fit: contain;
 }
 .logo-text {
   display: flex;
   flex-direction: column;
   line-height: 1.2;
 }
 .logo-text .org {
   font-family: 'DM Sans', sans-serif;
   font-weight: 800;
   font-size: 16px;
   letter-spacing: .04em;
 }
 .logo-text .sub {
   font-size: 10px;
   font-family: 'DM Sans', sans-serif;
   letter-spacing: .15em;
   font-weight: 600;
   text-transform: uppercase;
 }
 .header-cta {
   background: var(--unicef-yellow);
   color: var(--white);
   font-family: 'DM Sans', sans-serif;
   font-weight: 800;
   font-size: 13px;
   padding: 12px 28px;
   border: none;
   cursor: pointer;
   letter-spacing: .08em;
   text-decoration: none;
   transition: background .2s;
   border-radius: 50px;
 }
 .header-cta:hover {
   background: #e55a0d;
 }
 /* ── HERO ── */
 .hero {
   background: linear-gradient(135deg, var(--unicef-navy) 0%, var(--unicef-dark) 60%, var(--unicef-blue) 100%);
   color: var(--white);
   padding: 80px 40px 80px;
   position: relative;
   overflow: hidden;
   min-height: 600px;
 }
 .hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
     radial-gradient(ellipse at 80% 50%, rgba(28, 171, 226, .25) 0%, transparent 60%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 .hero-layout {
   max-width: 1200px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   align-items: center;
   position: relative;
   z-index: 1;
 }
 .hero-inner {
   position: relative;
   z-index: 1;
 }
 .hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(28, 171, 226, .25);
   border: 1px solid rgba(28, 171, 226, .5);
   border-radius: 2px;
   padding: 6px 14px;
   font-family: 'DM Sans', sans-serif;
   font-size: 11px;
   letter-spacing: .2em;
   font-weight: 700;
   color: #a8ddf5;
   margin-bottom: 28px;
   text-transform: uppercase;
 }
 .hero-date {
   font-family: 'DM Sans', sans-serif;
   font-size: 13px;
   font-weight: 600;
   color: var(--unicef-yellow);
   letter-spacing: .2em;
   margin-bottom: 16px;
   text-transform: uppercase;
 }
 .hero h1 {
   font-family: 'Noto Sans JP', sans-serif;
   font-weight: 900;
   font-size: clamp(28px, 4vw, 48px);
   line-height: 1.2;
   margin-bottom: 12px;
 }
 .hero h1 span {
   color: var(--unicef-yellow);
 }
 .hero-en {
   font-family: 'DM Sans', sans-serif;
   font-weight: 700;
   font-size: clamp(14px, 2vw, 20px);
   letter-spacing: .15em;
   color: rgba(255, 255, 255, .6);
   margin-bottom: 24px;
 }
 .hero-desc {
   font-size: 15px;
   line-height: 1.9;
   color: rgba(255, 255, 255, .85);
   max-width: 620px;
   margin-bottom: 20px;
 }
 .hero-target {
   display: inline-block;
   background: rgba(255, 255, 255, .1);
   border-left: 3px solid var(--unicef-yellow);
   padding: 10px 20px;
   font-size: 13px;
   color: rgba(255, 255, 255, .8);
   margin-bottom: 20px;
   letter-spacing: .05em;
 }
 .hero-btns {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
 }
 .hero-image-wrap {
   position: relative;
   align-self: center;
 }
 /* オーバーレイコピー */
 .hero-image-wrap {
   position: relative; /* ← 既にあればOK */
 }
 
 .hero-catch-overlay {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 60px 32px 32px;
   background: linear-gradient(180deg,
     rgba(0,47,95,0) 0%,
     rgba(0,47,95,.55) 50%,
     rgba(0,47,95,.85) 100%);
   border-radius: 0 0 12px 12px;
   z-index: 3;
   pointer-events: none;
 }
 
 .hero-catch {
   font-family: 'Noto Sans JP', sans-serif;
   font-weight: 900;
   font-size: clamp(22px, 3.6vw, 38px);
   line-height: 1.5;
   color: #fff;
   text-shadow: 0 2px 16px rgba(0,0,0,.35);
   margin: 0;
 }
 .hero-sub {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,.35);
    margin: 0;
  }

 
 /* スマホ調整 */
 @media (max-width: 768px) {
   .hero-catch-overlay {
     padding: 40px 10px 10px;
   }
   .hero-catch {
     font-size: 24px;
   }
   .hero-sub {
      font-size: 14px;
   }
   .hero-sub span {
      display: block;
   }
 }
 
 /* スマホ調整 */
  @media (max-width: 412px) {
    .hero-catch {
      font-size: 23px;
    }
  }
  
 .hero-image-wrap img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
   border-radius: 12px;
   box-shadow: 0 8px 40px rgba(0, 0, 0, .3);
 }
 .hero-image-wrap::before {
   content: '';
   position: absolute;
   top: -12px;
   left: -12px;
   width: 80px;
   height: 80px;
   border-top: 4px solid var(--unicef-blue);
   border-left: 4px solid var(--unicef-blue);
   border-radius: 4px 0 0 0;
   z-index: 2;
 }
 .hero-image-wrap::after {
   content: '';
   position: absolute;
   bottom: -12px;
   right: -12px;
   width: 80px;
   height: 80px;
   border-bottom: 4px solid var(--unicef-blue);
   border-right: 4px solid var(--unicef-blue);
   border-radius: 0 0 4px 0;
   z-index: 2;
 }
 .btn-primary {
   background: var(--unicef-yellow);
   color: var(--white);
   font-family: 'DM Sans', sans-serif;
   font-weight: 800;
   font-size: 14px;
   padding: 18px 40px;
   text-decoration: none;
   letter-spacing: .1em;
   transition: all .2s;
   display: inline-block;
   border: 2px solid var(--unicef-yellow);
   border-radius: 50px;
 }
 .btn-primary:hover {
   background: #e55a0d;
   border-color: #e55a0d;
   transform: translateY(-2px);
 }
 .btn-secondary {
   background: transparent;
   color: var(--white);
   font-family: 'DM Sans', sans-serif;
   font-weight: 700;
   font-size: 14px;
   padding: 18px 40px;
   text-decoration: none;
   letter-spacing: .1em;
   border: 2px solid rgba(255, 255, 255, .5);
   transition: all .2s;
   display: inline-block;
   border-radius: 50px;
 }
 .btn-secondary:hover {
   border-color: var(--white);
   background: rgba(255, 255, 255, .08);
 }
 /* ── STATS BAR ── */
 .stats-bar {
   background: var(--unicef-blue);
   padding: 28px 40px;
   display: flex;
   justify-content: center;
   gap: 60px;
   flex-wrap: wrap;
 }
 .stat-item {
   text-align: center;
   color: var(--white);
 }
 .stat-num {
   font-family: 'DM Sans', sans-serif;
   font-weight: 900;
   font-size: 48px;
   line-height: 1;
   margin-bottom: 4px;
   letter-spacing: .02em;
 }
 .stat-label {
   font-size: 11px;
   letter-spacing: .15em;
   opacity: .85;
 }
 /* ── SECTION ── */
 section {
   padding: 80px 40px;
 }
 .section-inner {
   max-width: 1100px;
   margin: 0 auto;
 }
 .section-eyebrow {
   font-family: 'DM Sans', sans-serif;
   font-weight: 700;
   font-size: 11px;
   letter-spacing: .3em;
   color: var(--unicef-blue);
   text-transform: uppercase;
   margin-bottom: 12px;
 }
 .section-title {
   font-weight: 900;
   font-size: clamp(26px, 3.5vw, 40px);
   line-height: 1.3;
   margin-bottom: 20px;
   color: var(--unicef-navy);
 }
 .section-title span {
   color: var(--unicef-blue);
 }
 .section-divider {
   width: 48px;
   height: 4px;
   background: var(--unicef-yellow);
   margin-bottom: 32px;
 }
 /* ── ABOUT ── */
 .about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
   margin-top: 48px;
 }
 .about-text p {
   font-size: 15px;
   line-height: 1.8;
   color: var(--text-mid);
   margin-bottom: 24px;
 }
 .about-skills {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 .skill-item {
   display: flex;
   align-items: center;
   gap: 16px;
   background: var(--unicef-light);
   border-left: 4px solid var(--unicef-blue);
   padding: 16px 20px;
 }
 .skill-icon {
   font-size: 24px;
   flex-shrink: 0;
 }
 .skill-label {
   font-weight: 700;
   font-size: 18px;
   color: var(--unicef-navy);
   letter-spacing: .04em;
 }
 /* ── FEATURES ── */
 .features-bg {
   background: var(--unicef-navy);
 }
 .features-bg .section-title {
   color: var(--white);
 }
 .features-bg .section-eyebrow {
   color: rgba(28, 171, 226, .9);
 }
 .features-layout {
   display: grid;
   grid-template-columns: 0.8fr 1.2fr;
   gap: 48px;
   margin-top: 48px;
   align-items: center;
 }
 .features-image-wrap {
   position: relative;
   border-radius: 8px;
 }
 .features-image-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   min-height: 380px;
   border-radius: 8px;
   margin-bottom: 10px;
 }
 .features-image-wrap::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 50%, rgba(0, 47, 95, .4) 100%);
   border-radius: 8px;
   pointer-events: none;
 }
 .features-image-caption {
   position: absolute;
   bottom: 20px;
   left: 20px;
   right: 20px;
   z-index: 2;
   font-family: 'DM Sans', sans-serif;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .15em;
   color: rgba(255, 255, 255, .8);
   text-transform: uppercase;
 }
 .features-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2px;
 }
 .feature-card {
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .08);
   padding: 20px 24px;
   transition: background .2s;
 }
 .feature-card:hover {
   background: rgba(28, 171, 226, .15);
 }
 .feature-num {
   font-family: 'DM Sans', sans-serif;
   font-weight: 700;
   font-size: 22px;
   color: rgba(28, 171, 226, .25);
   line-height: 1;
   margin-bottom: 5px;
   letter-spacing: .04em;
 }
 .feature-title {
   font-weight: 700;
   font-size: 20px;
   color: var(--white);
   margin-bottom: 10px;
 }
 .feature-text {
   font-size: 13px;
   line-height: 1.9;
   color: rgba(255, 255, 255, .65);
 }
 /* ============================================
    Online Seminar Section
 ============================================ */
 .seminar-bg {
   background: linear-gradient(180deg, #f6f8fb 0%, #eef2f7 100%);
   padding: 90px 0;
   position: relative;
 }
 
 .seminar-bg::before {
   content: "";
   position: absolute;
   top: 0; left: 0; right: 0;
   height: 4px;
   background: var(--unicef-blue);
   opacity: 0.15;
 }
 
 .seminar-intro {
   margin: 0 auto 56px;
   line-height: 2;
   color: #333;
   font-size: 15px;
 }
 
 .seminar-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
   margin-bottom: 32px;
 }
 
 .seminar-card {
   background: #fff;
   padding: 40px 30px 32px;
   border-top: 4px solid var(--unicef-blue);
   box-shadow: 0 4px 24px rgba(20, 40, 80, 0.06);
   display: flex;
   flex-direction: column;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   position: relative;
 }
 
 .seminar-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 12px 32px rgba(20, 40, 80, 0.12);
 }
 
 .seminar-num {
   font-family: 'DM Sans', sans-serif;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.2em;
   color: var(--unicef-blue);
   margin-bottom: 10px;
 }
 
 .seminar-topic {
   display: inline-block;
   background: #f0f4f9;
   color: #4a5568;
   font-family: 'DM Sans', sans-serif;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.15em;
   padding: 5px 12px;
   margin-bottom: 22px;
   width: fit-content;
 }
 
 .seminar-title {
   font-size: 19px;
   line-height: 1.55;
   font-weight: 700;
   color: #1a1a1a;
   margin-bottom: 18px;
 }
 
 .seminar-desc {
   font-size: 14px;
   line-height: 1.85;
   color: #555;
   margin-bottom: 26px;
   padding-bottom: 26px;
   border-bottom: 1px solid #e5e9ef;
   flex-grow: 1;
 }
 
 .seminar-lecturer {
   margin-top: auto;
 }
 
 .lecturer-role {
   font-family: 'DM Sans', sans-serif;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.15em;
   color: #888;
   margin-bottom: 6px;
 }
 
 .lecturer-name {
   font-size: 17px;
   font-weight: 700;
   color: #1a1a1a;
   margin-bottom: 4px;
 }
 
 .lecturer-title {
   font-size: 13px;
   color: #666;
   line-height: 1.6;
 }
 
 .seminar-note {
   text-align: center;
   font-size: 13px;
   color: #777;
   margin-top: 24px;
 }
 
 /* Responsive */
 @media (max-width: 960px) {
   .seminar-grid {
     grid-template-columns: 1fr;
     gap: 20px;
   }
   .seminar-bg {
     padding: 60px 20px
   }
   .seminar-title {
     font-size: 18px;
   }
 }
 
 /* ── OVERVIEW ── */
 .overview-table {
   margin-top: 48px;
   border: 1px solid #dce8f0;
   overflow: hidden;
 }
 .overview-row {
   display: grid;
   grid-template-columns: 200px 1fr;
   border-bottom: 1px solid #dce8f0;
 }
 .overview-row:last-child {
   border-bottom: none;
 }
 .overview-row.has-sub {
   grid-template-columns: 200px 1fr;
 }
 .ov-label {
   background: var(--unicef-light);
   padding: 20px 24px;
   font-weight: 700;
   font-size: 16px;
   color: var(--unicef-navy);
   display: flex;
   align-items: center;
   border-right: 3px solid var(--unicef-blue);
 }
 .ov-value {
   padding: 15px 24px;
   font-size: 18px;
   color: var(--text-dark);
   line-height: 1.5;
   background: var(--white);
 }
 .ov-value strong {
   color: var(--unicef-navy);
   font-weight: 700;
 }
 .ov-value .ov-sub-title {
   font-family: 'DM Sans', sans-serif;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: .12em;
   color: var(--unicef-blue);
   margin-bottom: 4px;
   text-transform: uppercase;
   display: block;
 }
 .ov-value .ov-sub-title:not(:first-child) {
   margin-top: 16px;
 }
 .ov-value .ov-note {
   font-size: 14px;
   color: var(--text-mid);
   line-height: 1.8;
 }
 .ov-highlight {
   display: inline-block;
   font-family: 'DM Sans', sans-serif;
   font-weight: 800;
   font-size: 13px;
   letter-spacing: .1em;
   color: var(--unicef-navy);
   background: var(--unicef-light);
   padding: 2px 10px;
   border-radius: 2px;
   margin-top: 2px;
 }
 /* ── FLOW ── */
 .flow-bg {
   background: var(--unicef-light);
 }
 .flow-steps {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 48px 40px;
   margin-top: 56px;
   position: relative;
 }
 .flow-steps::before {
   content: '';
   position: absolute;
   top: 28px;
   left: 16%;
   right: 16%;
   height: 1px;
   background: linear-gradient(90deg, var(--unicef-blue), rgba(28, 171, 226, .15));
   z-index: 0;
 }
 .flow-step {
   text-align: center;
   padding: 0 16px 36px;
   position: relative;
   z-index: 1;
   border-bottom: 2px solid #dce8f0;
   transition: border-color .2s;
 }
 .flow-step:hover {
   border-color: var(--unicef-blue);
 }
 .flow-num {
   width: 56px;
   height: 56px;
   background: var(--unicef-blue);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'DM Sans', sans-serif;
   font-weight: 700;
   font-size: 26px;
   color: var(--white);
   margin: 0 auto 20px;
   position: relative;
   z-index: 1;
   box-shadow: 0 4px 16px rgba(28, 171, 226, .3);
 }
 .flow-date {
   font-family: 'DM Sans', sans-serif;
   font-size: 11px;
   font-weight: 700;
   color: var(--unicef-blue);
   letter-spacing: .08em;
   margin-bottom: 12px;
   background: rgba(28, 171, 226, .1);
   display: inline-block;
   padding: 4px 12px;
   border-radius: 2px;
 }
 .flow-title {
   font-weight: 700;
   font-size: 16px;
   color: var(--unicef-navy);
   margin-bottom: 12px;
   line-height: 1.5;
 }
 .flow-text {
   font-size: 13px;
   line-height: 2.1;
   color: var(--text-mid);
 }
 
 
 /* ── VIDEO SECTION ── */
   .video-section {
     background: var(--unicef-navy);
     padding: 80px 40px;
   }
 
   .video-section .section-eyebrow {
     color: rgba(28,171,226,.9);
   }
 
   .video-section .section-title {
     color: var(--white);
   }
 
   .video-section .section-title span {
     color: var(--unicef-blue);
   }
 
   .video-desc {
     font-size: 15px;
     line-height: 2;
     color: rgba(255,255,255,.7);
     margin-bottom: 48px;
   }
 
   .video-wrapper {
     max-width: 800px;
     margin: 0 auto;
     position: relative;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 12px 48px rgba(0,0,0,.4);
   }
 
   .video-wrapper .video-ratio {
     position: relative;
     width: 100%;
     padding-bottom: 56.25%;
     background: #000;
   }
 
   .video-wrapper .video-ratio iframe,
   .video-wrapper .video-ratio video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: none;
   }
 
   .video-wrapper .video-placeholder {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, var(--unicef-dark) 0%, #001a33 100%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 16px;
     cursor: pointer;
     transition: background .3s;
   }
 
   .video-wrapper .video-placeholder:hover {
     background: linear-gradient(135deg, var(--unicef-blue) 0%, var(--unicef-dark) 100%);
   }
 
   .video-play-btn {
     width: 72px;
     height: 72px;
     border-radius: 50%;
     background: var(--unicef-yellow);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 24px rgba(255,107,26,.4);
     transition: transform .2s;
   }
 
   .video-placeholder:hover .video-play-btn {
     transform: scale(1.1);
   }
 
   .video-play-btn::after {
     content: '';
     display: block;
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 12px 0 12px 22px;
     border-color: transparent transparent transparent var(--white);
     margin-left: 4px;
   }
 
   .video-placeholder-text {
     font-family: 'DM Sans', sans-serif;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: .15em;
     color: rgba(255,255,255,.6);
     text-transform: uppercase;
   }
 
   @media (max-width: 768px) {
     .video-section { padding: 60px 20px; }
   }
   
 /* ── BENEFITS ── */
 .benefits-intro {
   font-size: 16px;
   line-height: 1.8;
   color: var(--text-mid);
   margin-bottom: 48px;
 }
 .benefits-intro strong {
   color: var(--unicef-navy);
   font-weight: 700;
 }
 .benefits-columns {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   margin-top: 0;
 }
 .benefits-block {
   background: var(--white);
   border: 1px solid #dce8f0;
   padding: 36px 32px;
   position: relative;
   overflow: hidden;
 }
 .benefits-block::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: var(--unicef-blue);
 }
 .benefits-block:nth-child(2)::before {
   background: var(--unicef-blue);
 }
 .benefits-block-title {
   font-weight: 900;
   font-size: 18px;
   color: var(--unicef-navy);
   margin-bottom: 20px;
   line-height: 1.4;
 }
 .benefits-list {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 .benefits-list li {
   font-size: 14px;
   line-height: 1.7;
   color: var(--text-dark);
   display: flex;
   align-items: baseline;
   gap: 10px;
   padding: 10px 14px;
   background: var(--unicef-light);
   border-radius: 4px;
 }
 .benefits-list li::before {
   content: '●';
   color: var(--unicef-blue);
   font-size: 8px;
   flex-shrink: 0;
   position: relative;
   top: 1px;
 }
 .benefits-list li .li-note {
   font-size: 12px;
   color: var(--text-mid);
 }
 .benefits-block-desc {
   font-size: 14px;
   line-height: 2;
   color: var(--text-mid);
   margin-bottom: 20px;
 }
 .benefits-skill-list {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-bottom: 24px;
 }
 .benefits-skill-list li {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 16px 18px;
   background: var(--unicef-light);
   border-left: 4px solid var(--unicef-blue);
   border-radius: 0 4px 4px 0;
 }
 .skill-en {
   font-family: 'DM Sans', sans-serif;
   font-weight: 800;
   font-size: 15px;
   color: var(--unicef-navy);
   letter-spacing: .02em;
 }
 .skill-jp {
   font-size: 14px;
   color: var(--text-mid);
 }
 .benefits-closing {
   font-size: 14px;
   line-height: 1.8;
   color: var(--text-mid);
 }
 /* ── PRICE ── */
 .price-section {
   background: var(--unicef-navy);
   text-align: center;
   padding: 80px 40px;
 }
 .price-section .section-eyebrow {
   color: rgba(28, 171, 226, .9);
 }
 .price-section .section-title {
   color: var(--white);
 }
 .price-card {
   display: inline-block;
   background: var(--white);
   padding: 48px 64px;
   margin: 40px auto 0;
   min-width: 360px;
   position: relative;
 }
 .price-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: var(--unicef-yellow);
 }
 .price-amount {
   font-family: 'DM Sans', sans-serif;
   font-weight: 900;
   font-size: 60px;
   color: var(--unicef-navy);
   line-height: 1;
   letter-spacing: .02em;
 }
 .price-unit {
   font-size: 20px;
   vertical-align: super;
   font-size: 22px;
   font-weight: 700;
   color: var(--unicef-blue);
 }
 .price-label {
   font-size: 15px;
   color: var(--text-mid);
   letter-spacing: .1em;
   margin-bottom: 28px;
 }
 .price-includes {
   list-style: none;
   text-align: left;
   margin-bottom: 32px;
 }
 .price-includes li {
   font-size: 14px;
   padding: 8px 0;
   border-bottom: 1px solid #eee;
   color: var(--text-dark);
   display: flex;
   align-items: center;
   gap: 10px;
 }
 .price-includes li::before {
   content: '✓';
   color: var(--unicef-blue);
   font-weight: 700;
   flex-shrink: 0;
 }
 /* ── PHOTO BREAK ── */
 .photo-break {
   width: 100%;
   height: 360px;
   overflow: hidden;
   position: relative;
 }
 .photo-break img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 15%;
   display: block;
 }
 .photo-break::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, transparent 30%, transparent 70%, rgba(28, 171, 226, .2) 100%);
   pointer-events: none;
 }
 @media (max-width: 768px) {
   .photo-break {
     height: 240px;
   }
 }
 
 
 /* ── JUDGES ── */
 .judges-intro {
   font-size: 16px;
   line-height: 1.8;
   color: var(--text-mid);
   margin-bottom: 48px;
 }
 .judges-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
 }
 .judge-card {
   background: var(--white);
   border: 1px solid #dce8f0;
   padding: 36px 24px 32px;
   text-align: center;
   position: relative;
   overflow: hidden;
   transition: border-color .2s, transform .2s, box-shadow .2s;
 }
 .judge-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: var(--unicef-blue);
 }
 .judge-card:hover {
   border-color: var(--unicef-blue);
   transform: translateY(-4px);
   box-shadow: 0 8px 24px rgba(0, 88, 163, .08);
 }
 .judge-photo-wrap {
   width: 120px;
   height: 120px;
   margin: 0 auto 20px;
   border-radius: 50%;
   overflow: hidden;
   border: 3px solid var(--unicef-light);
   background: var(--unicef-light);
 }
 .judge-photo-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
 .judge-name {
   font-weight: 900;
   font-size: 18px;
   color: var(--unicef-navy);
   letter-spacing: .04em;
   margin-bottom: 4px;
 }
 .judge-name-en {
   font-family: 'DM Sans', sans-serif;
   font-size: 11px;
   font-weight: 600;
   color: var(--unicef-blue);
   letter-spacing: .18em;
   text-transform: uppercase;
   margin-bottom: 14px;
 }
 .judge-title {
   display: inline-block;
   font-size: 12px;
   font-weight: 700;
   color: var(--unicef-navy);
   background: var(--unicef-light);
   padding: 6px 14px;
   border-radius: 2px;
   margin-bottom: 18px;
   line-height: 1.5;
   letter-spacing: .02em;
 }
 .judge-bio {
   font-size: 13px;
   line-height: 1.9;
   color: var(--text-mid);
   text-align: left;
 }
 
 /* ── JUDGES responsive ── */
 @media (max-width: 768px) {
   .judges-grid {
     grid-template-columns: 1fr;
     gap: 20px;
   }
   .judge-card {
     padding: 32px 20px 28px;
   }
   .judge-photo-wrap {
     width: 110px;
     height: 110px;
   }
 }
 
 
 /* ── CTA BANNER ── */
 .cta-banner {
   background: var(--unicef-blue);
   padding: 40px 40px;
   text-align: center;
   color: var(--white);
 }
 .cta-banner h2 {
   font-weight: 900;
   font-size: clamp(28px, 4vw, 48px);
   margin-bottom: 16px;
   line-height: 1.3;
 }
 .cta-banner p {
   font-size: 16px;
   opacity: .85;
   margin-bottom: 40px;
   line-height: 1.8;
 }
 /* ── FOOTER ── */
 footer {
   background: var(--unicef-navy);
   color: rgba(255, 255, 255, .6);
   padding: 60px 40px 40px;
 }
 .footer-inner {
   max-width: 1100px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   gap: 60px;
   margin-bottom: 40px;
 }
 .footer-brand .org {
   font-family: 'DM Sans', sans-serif;
   font-weight: 800;
   font-size: 16px;
   color: var(--white);
   letter-spacing: .08em;
   margin-bottom: 8px;
 }
 .footer-brand p {
   font-size: 13px;
   line-height: 1.8;
 }
 .footer-section h4 {
   font-family: 'DM Sans', sans-serif;
   font-weight: 700;
   font-size: 11px;
   letter-spacing: .2em;
   color: var(--unicef-blue);
   text-transform: uppercase;
   margin-bottom: 16px;
 }
 .footer-section p, .footer-section a {
   font-size: 13px;
   line-height: 2;
   color: rgba(255, 255, 255, .6);
   text-decoration: none;
   display: block;
 }
 .footer-section a:hover {
   color: var(--unicef-blue);
 }
 .footer-sponsors {
   max-width: 1100px;
   margin: 0 auto 48px;
   padding-bottom: 48px;
   border-bottom: 1px solid rgba(255, 255, 255, .1);
 }
 .footer-sponsors h4 {
   font-family: 'DM Sans', sans-serif;
   font-weight: 700;
   font-size: 11px;
   letter-spacing: .2em;
   color: var(--unicef-blue);
   text-transform: uppercase;
   margin-bottom: 24px;
   text-align: center;
 }
 .sponsor-logos {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 32px;
   flex-wrap: wrap;
 }
 .sponsor-logo {
   background: rgba(255, 255, 255, .06);
   
   display: flex;
   align-items: center;
   justify-content: center;
   width: 150px;
   height: 118px;
   transition: background .2s, border-color .2s;
   cursor: pointer;
 }
 .sponsor-logo img {
    width: 100%;
    border-radius: 6px;
 }
 .sponsor-logo:hover {
   background: rgba(255, 255, 255, .12);
   border-color: rgba(255, 255, 255, .25);
 }
 .sponsor-logo span {
   font-family: 'DM Sans', sans-serif;
   font-weight: 800;
   font-size: 13px;
   color: rgba(255, 255, 255, .45);
   letter-spacing: .08em;
   text-transform: uppercase;
 }
 .footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .1);
   padding-top: 24px;
   text-align: center;
   font-size: 15px;
   max-width: 1100px;
   margin: 0 auto;
 }
 /* ── FAQ ── */
 .faq-bg {
   background: var(--white);
 }
 .faq-list {
   margin-top: 48px;
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 .faq-item {
   border: 1px solid #dce8f0;
   overflow: hidden;
   transition: border-color .2s;
 }
 .faq-item.open {
   border-color: var(--unicef-blue);
 }
 .faq-question {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 24px 28px;
   cursor: pointer;
   gap: 16px;
   background: var(--white);
   transition: background .2s;
   user-select: none;
 }
 .faq-item.open .faq-question {
   background: var(--unicef-light);
 }
 .faq-question:hover {
   background: var(--unicef-light);
 }
 .faq-q-text {
   font-weight: 700;
   font-size: 15px;
   color: var(--unicef-navy);
   line-height: 1.5;
 }
 .faq-icon {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--unicef-blue);
   color: var(--white);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   font-weight: 300;
   flex-shrink: 0;
   transition: transform .3s, background .2s;
   line-height: 1;
 }
 .faq-item.open .faq-icon {
   transform: rotate(45deg);
   background: var(--unicef-yellow);
 }
 .faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height .35s ease, padding .35s ease;
   padding: 0 28px;
 }
 .faq-item.open .faq-answer {
   max-height: 300px;
   padding: 0 28px 24px;
 }
 .faq-answer p {
   font-size: 14px;
   line-height: 2;
   color: var(--text-mid);
   border-top: 1px solid #dce8f0;
   padding-top: 20px;
 }
 /* ── RESPONSIVE ── */
 @media (max-width: 768px) {
   header {
     padding: 10px 10px;
   }
   .logo-wrap {
       gap: 5px;
   }
   .logo-wrap img {
       width: 56px;
       height: 56px;
       object-fit: contain;
   }
   .header-cta {
      padding: 10px 15px;
      font-size: 10px;
   }
   .hero {
     padding: 60px 20px 0;
   }
   .hero-layout {
     grid-template-columns: 1fr;
     gap: 32px;
   }
   .hero-inner {
     padding-bottom: 40px;
   }
   .hero-image-wrap {
     order: -1;
   }
   .hero-image-wrap img {
     border-radius: 12px;
     min-height: unset;
   }
   .hero-image-wrap::before, .hero-image-wrap::after {
     display: none;
   }
   section {
     padding: 60px 20px;
   }
   .about-grid {
     grid-template-columns: 1fr;
     gap: 36px;
   }
   .features-layout {
     grid-template-columns: 1fr;
   }
   .features-image-wrap img {
     min-height: 280px;
   }
   .overview-row { grid-template-columns: 1fr; }
   .ov-label {
    padding: 13px 24px;
 }
   .overview-grid {
     grid-template-columns: repeat(2, 1fr);
   }
   .flow-steps {
     grid-template-columns: 1fr;
   }
   .flow-steps::before {
     display: none;
   }
   .benefits-columns { grid-template-columns: 1fr; }
   .benefits-grid {
     grid-template-columns: 1fr;
   }
   .benefits-block {
      padding: 30px 15px;
      margin-bottom: 20px;
   }
   .cta-banner {
       padding: 40px 10px;
   }
   .footer-inner {
     grid-template-columns: 1fr;
     gap: 32px;
   }
   .price-card {
     min-width: unset;
     width: 100%;
     padding: 36px 28px;
   }
   .stats-bar {
     gap: 32px;
   }
   .logo-text .org {
     font-size: 11px;
   }
 }
 /* ── ANIMATIONS ── */
 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(30px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
 .hero-inner > * {
   animation: fadeUp .7s ease both;
 }
 .hero-badge {
   animation-delay: 0s;
 }
 .hero-date {
   animation-delay: .1s;
 }
 .hero h1 {
   animation-delay: .2s;
 }
 .hero-en {
   animation-delay: .3s;
 }
 .hero-desc {
   animation-delay: .4s;
 }
 .hero-target {
   animation-delay: .5s;
 }
 .hero-btns {
   animation-delay: .6s;
 }
 .hero-image-wrap {
   animation: fadeUp .8s ease both;
   animation-delay: .3s;
 }
 
 
 /* セミナーカード ヘッダー（番号＋実施時期） */
 .seminar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
   flex-wrap: wrap;
   gap: 8px;
 }
 
 .seminar-date {
   font-family: "DM Sans", sans-serif;
   font-size: 12px;
   font-weight: 600;
   color: #fff;
   background: var(--unicef-blue);
   padding: 4px 10px;
   border-radius: 2px;
   letter-spacing: 0.05em;
   white-space: nowrap;
 }
 
 /* 講師ブロックを写真＋情報の横並びに */
 .seminar-lecturer {
   display: flex;
   align-items: center;
   gap: 14px;
 }
 
 .lecturer-photo-wrap {
   flex-shrink: 0;
   width: 64px;
   height: 64px;
   border-radius: 50%;
   overflow: hidden;
   background: #f0f0f0;
   border: 2px solid var(--unicef-blue);
 }
 
 .lecturer-photo-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
 
 .lecturer-info {
   flex: 1;
   min-width: 0;
 }
 
 /* スマホ対応 */
 @media (max-width: 600px) {
   .lecturer-photo-wrap {
     width: 56px;
     height: 56px;
   }
   .seminar-date {
     font-size: 11px;
   }
 }