.hero__photo {
  
  background-image: url("../pageimg/youseikouza_on-line/images/hero-bg-online.webp");
}

@media (max-width: 767px) {

  

  
}

.si-obanner {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
}
.si-obanner::before {                                            
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 697px;
  max-width: 50%;
  background: url("../pageimg/youseikouza_on-line/images/banner-stripes-online.webp") left center / cover no-repeat;
  z-index: 0;
}
.si-obanner__photo {                                             
  position: absolute;
  right: 0; top: 0;
  width: 52%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.si-obanner__card {
  position: relative;
  z-index: 2;
  margin-left: 28px;
  width: 609px;
  max-width: calc(100% - 56px);
  box-sizing: border-box;
  background: #ffffff;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: flex-start;
}
.si-obanner__eyebrow {
  width: 100%;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 22px;
  line-height: 1.2;
  color: #131936;
  border-top: 1px solid #131936;
  border-bottom: 1px solid #131936;
  padding: var(--space-24) 0 27px;
}
.si-obanner__title {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 56px;
  line-height: 1.35;
  color: var(--c-accent-blue);                                   
}
.si-obanner__desc {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.6;
  color: #131936;
}

.si-oheading {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 30px;
  line-height: 1.6;
  color: #131936;
  text-align: center;
}
.si-oheading__hl { color: var(--c-accent-blue); }
.si-oreview__row { display: flex; gap: var(--space-48); align-items: center; }
.si-oreview__text {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-16);
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);
  font-size: 20px;
  line-height: 1.8;
  color: #131936;
}
.si-oreview__photo { flex: 0 1 574px; width: 574px; max-width: 48%; height: 484px; object-fit: cover; }

.si-merit {
  background: #e9edf4;
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-32);
}
.si-merit__title {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 28px;
  line-height: 1.6;
  color: #131936;
  text-align: center;
}
.si-check-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.si-check-card {
  display: flex; align-items: center; gap: var(--space-16);
  background: #ffffff;
  border: 1px solid #e5e9f0;
  border-radius: var(--radius-lg);
  padding: var(--space-24) var(--space-32);
}
.si-check-card__icon { flex: none; width: 48px; height: 48px; }
.si-check-card__text {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.6;
  color: #131936;
}

.si-osubhead {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 34px;
  line-height: 1.4;
  color: #131936;
  text-align: center;
}
.si-ocareer__row { display: flex; gap: var(--space-48); align-items: flex-start; }
.si-ocareer__photo { flex: 0 0 auto; width: 573px; max-width: 48%; height: 484px; object-fit: cover; }
.si-ocareer__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-16); }
.si-ocareer__title { font-family: var(--font-jp); font-weight: var(--fw-bold); font-size: 26px; line-height: 1.4; color: #131936; }
.si-ocareer__text { font-family: var(--font-jp); font-weight: var(--fw-regular); font-size: 20px; line-height: 1.8; color: #131936; }
.si-ocareer__list { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-16); }
.si-ocareer__list li {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.4;
  color: #131936;
}
.si-ocareer__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--c-accent-blue);
}

.si-outcomes__row { display: flex; gap: var(--space-16); align-items: stretch; }
.si-outcome {
  flex: 1 1 0; min-width: 0;
  background: #ffffff;
  padding: var(--space-32);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-24);
}
.si-outcome__title { font-family: var(--font-jp); font-weight: var(--fw-bold); font-size: 30px; line-height: 1.45; color: var(--c-accent-blue); text-align: center; }
.si-outcome__sub { font-family: var(--font-jp); font-weight: var(--fw-bold); font-size: 18px; line-height: 1.55; color: #131936; text-align: center; }
.si-outcome__note { margin-top: auto; font-family: var(--font-jp); font-size: var(--fs-body-sm); line-height: 1.4; color: #131936; text-align: center; }

.si-elements__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 192px 200px; gap: var(--space-24) var(--space-16); }  
.si-element { background: #ffffff; display: flex; gap: var(--space-10); align-items: flex-start; overflow: hidden; }  
.si-element__figure { flex: none; width: 205px; align-self: center; }
.si-element__figure img { width: 100%; height: auto; display: block; }
.si-element__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24) var(--space-16); min-height: 192px; }  
.si-element__title { font-family: var(--font-jp); font-weight: var(--fw-bold); font-size: 20px; line-height: 1.6; color: var(--c-accent-blue); }
.si-element__text { font-family: var(--font-jp); font-size: var(--fs-body); line-height: var(--lh-body); color: #131936; }

@media (max-width: 1023px) {
  
  .si-oheading { font-size: 26px; }
  .si-osubhead { font-size: 28px; }
  .si-merit__title { font-size: 24px; }
  
}

@media (max-width: 767px) {

  .cta-banner__note br { display: none; }

  .si-obanner { flex-direction: column; min-height: 0; align-items: stretch; }
  .si-obanner::before { width: 100%; max-width: none; height: 100%; }
  .si-obanner__photo { position: static; width: 100%; height: 220px; order: 2; }
  .si-obanner__card { width: auto; max-width: none; margin: 24px 16px; padding: 32px 20px; order: 1; }
  .si-obanner__title { font-size: 34px; line-height: 1.4; }
  .si-obanner__eyebrow { font-size: 16px; }
  .si-obanner__desc { font-size: 16px; }

  .si-oheading { font-size: 22px; }
  .si-oreview__row { flex-direction: column; align-items: stretch; }
  .si-oreview__text { font-size: 16px; line-height: 1.9; }
  .si-oreview__photo { width: 100%; max-width: none; height: 220px; }
  .si-merit { padding: var(--space-24); }
  .si-merit__title { font-size: var(--fs-h3-sp); }
  .si-check-grid { grid-template-columns: 1fr; }
  .si-check-card { padding: var(--space-20); }
  .si-check-card__text { font-size: 16px; }

  .si-osubhead { font-size: var(--fs-h2-sp); }
  .si-ocareer__row { flex-direction: column; align-items: stretch; }
  .si-ocareer__photo { width: 100%; max-width: none; height: 220px; }
  .si-ocareer__title { font-size: var(--fs-h3-sp); }
  .si-ocareer__text { font-size: 16px; line-height: 1.9; }
  .si-ocareer__list li { font-size: 16px; }

  .si-outcomes__row { flex-direction: column; }
  .si-outcome__title { font-size: 22px; }

  .si-elements__grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; }
  
  .si-element { flex-direction: column; align-items: center; padding-right: 0; overflow: visible; height: auto; }
  .si-element__figure { width: 130px; align-self: center; flex: none; }
  .si-element__body { flex: 0 0 auto; padding: 0 var(--space-16) var(--space-24); min-height: 0; align-items: center; text-align: left; }

}

@media (max-width: 767px) {

  

}

        

  

.si2-recruit { position: relative; overflow: hidden; }
.si2-recruit::before {                          
  content: "";
  position: absolute; top: 0; right: 0;
  width: 42%; height: 100%;
  background: var(--c-brand-900);               
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 767px) {

                  

  .si2-recruit::before { display: none; }

  

  

  
}

@media (min-width: 768px) and (max-width: 1365px) {
  .si-learn__panel { padding: 32px; }              
  .si-element__body { gap: 8px; }  
}