/* ============= Reset ============= */
 *, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body {
   background: #f3f7ff;
   font-family: 'RyoGothicPlusN-Medium', 'Ryo Gothic PlusN', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
   overflow-x: hidden;
 }

 /* ============= Layout ============= */
 .page {
   width: 100%;
   background: #f3f7ff;
 }

 .container {
   max-width: 1200px;
   width: 100%;
   margin: 0 auto;
   padding: 0 40px;
 }

 /* ============= Hero ============= */
 .hero {
   padding-top: 240px;
   padding-bottom: 120px;
 }

 .container-ttl {
   max-width: 1680px;
   margin-inline: auto;
   padding: 0 40px;
 }

 .hero-title-block {
   border-bottom: 1px solid rgba(20, 38, 63, 0.64);
   padding-bottom: 8px;
 }

 .hero-title-content {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 /* Category badge */
 .categories {
   display: flex;
   gap: 12px;
 }

 .category-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0 24px;
   border: 1px solid rgba(20, 38, 63, 0.64);
   border-radius: 18px;
   align-self: flex-start;
 }

 .category-text {
   font-family: 'Unbounded', sans-serif;
   font-weight: 600;
   font-size: 13px;
   color: #14263f;
   line-height: 1.8;
   letter-spacing: 1.5px;
   white-space: nowrap;
 }

 /* Title group */
 .title-group {
   display: flex;
   flex-direction: column;
   gap: 0;
 }

 .title-row {
   display: flex;
   gap: 12px;
   align-items: flex-start;
 }

 .title-dots {
   display: flex;
   flex-direction: column;
   gap: 4px;
   justify-content: center;
   padding-top: 14px;
   flex-shrink: 0;
 }

 .dot-green {
   width: 12px;
   height: 12px;
   background: #9fc707;
 }

 .dot-blue {
   width: 12px;
   height: 12px;
   background: #0798ed;
 }

 .title-ja {
   font-family: 'RyoGothicPlusN-Medium', 'Ryo Gothic PlusN', 'Noto Sans JP', sans-serif;
   font-weight: 600;
   font-style: normal;
   font-size: 32px;
   color: #14263f;
   line-height: 1.8;
   letter-spacing: 4px;
   white-space: nowrap;
 }

 .title-sub {
   font-family: 'Unbounded', sans-serif;
   font-weight: 600;
   font-size: 24px;
   color: #14263f;
   line-height: 1.8;
   letter-spacing: 2.4px;
 }

 /* Breadcrumb */
 .breadcrumb {
   display: flex;
   gap: 8px;
   align-items: center;
   justify-content: flex-end;
   padding: 16px 0;
 }

 .breadcrumb-text {
   font-family: 'RyoGothicPlusN-Medium', 'Ryo Gothic PlusN', 'Noto Sans JP', sans-serif;
   font-weight: 500;
   font-style: normal;
   font-size: 10px;
   color: #14263f;
   line-height: 1.8;
   letter-spacing: 1px;
   white-space: nowrap;
 }

 .breadcrumb-text.current {
   opacity: 0.64;
 }

 .breadcrumb-dot {
   width: 4px;
   height: 4px;
   background: #9fc707;
   flex-shrink: 0;
 }

 @media (max-width: 1180px) {

   .container,
   .container-ttl {
     padding: 0 10px;
   }

   /* Hero */
   .hero {
     padding-top: 160px;
     padding-bottom: 80px;
   }

   .hero-title-content {
     gap: 12px;
   }

   .category-badge {
     padding: 0 16px;
   }

   .category-text {
     font-size: 11px;
     letter-spacing: 1.1px;
   }

   .title-group {
     gap: 4px;
   }

   .title-row {
     gap: 8px;
   }

   .title-dots {
     gap: 2px;
     padding-top: 12px;
   }

   .dot-green,
   .dot-blue {
     width: 6px;
     height: 6px;
   }

   .title-ja {
     font-size: 24px;
     letter-spacing: 2.4px;
     line-height: 1.6;
     white-space: normal;
     word-break: break-word;
   }

   .title-sub {
     font-weight: 500;
     font-size: 12px;
     letter-spacing: 1.2px;
     padding-left: 14px;
   }

   .breadcrumb {
     justify-content: flex-end;
     flex-wrap: wrap;
     padding: 8px 0 0;
   }
 }