:root {
  /* 最優秀賞 */
  --color-award-grand-50: #FFF8E5;
  --color-award-grand-500: #8A6500;

  /* SNS発信部門賞 */
  --color-award-sns-50: #FFF0F3;
  --color-award-sns-500: #A83F5B;

  /* 就職活動部門賞 */
  --color-award-job-50: #EDF6FF;
  --color-award-job-500: #2F6FA8;

  /* キャリアチェンジ部門賞 */
  --color-award-career-50: #F4F0FF;
  --color-award-career-500: #6A4BA3;

  /* ビジネス活用部門賞 */
  --color-award-business-50: #ECFBD7;
  --color-award-business-500: #557C22;

  /* 生涯学習部門賞 */
  --color-award-learning-50: #EAF8F5;
  --color-award-learning-500: #24766A;

  /* 大学部門賞 */
  --color-award-university-50: #FFF2EA;
  --color-award-university-500: #BA4C0D;
}

.l-success-main h1 {
  position: relative;
  line-height: 1.5 !important;
  text-align: center;
  width: fit-content;
  margin: 0 auto;
  padding: 0 14rem;
}

.l-success-main h1::before,
.l-success-main h1::after {
  content: "";
  position: absolute;
  background-image: url(/success-story/img/kanmuri.svg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  aspect-ratio: 1 / 1;
  top: 50%;
}

.l-success-main h1::before {
  left: 0;
  transform: translateY(-50%);
}

.l-success-main h1::after {
  right: 0;
  transform: translateY(-50%) scaleX(-1);
}

.l-success-main h1 .c-head-sub {
  margin-top: var(--size-02);
}

h2.l-head-line {
  align-items: center;
  gap: var(--size-01);

}

h2.l-head-line::after {
  content: "";
  width:  3em;
  height: var(--size-005);
  border-radius: 100rem;
  background-color: var(--color-primary-500);
}

.l-story-nav {
  padding-bottom: clamp(var(--size-05), 5vw, var(--size-10));
}

.l-story-nav-li li {
  border-bottom: 1px solid var(--color-gray-100);
}

.l-story-nav-li a {
  display: block;
  position: relative;
  padding: var(--size-015) var(--size-03) var(--size-015) var(--size-02);
  line-height: 1.6;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.l-story-nav-li a::after {
  content: "";
  position: absolute;
  right: var(--size-01);
  top: 50%;
  transform: translateY(-50%);
  width: 1.8rem;
  height: 1.8rem;
  mask-image: url(/common/assets/img/arrow.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 1.8rem 1.8rem;
  -webkit-mask-image: url(/common/assets/img/arrow.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.l-story-nav-li a.l-li-grad::after {
  background-color: var(--color-award-grand-500);
}

.l-story-nav-li a.l-li-sns::after {
  background-color: var(--color-award-sns-500);
}

.l-story-nav-li a.l-li-job::after {
  background-color: var(--color-award-job-500);
}

.l-story-nav-li a.l-li-career::after {
  background-color: var(--color-award-career-500);
}

.l-story-nav-li a.l-li-business::after {
  background-color: var(--color-award-business-500);
}

.l-story-nav-li a.l-li-learning::after {
  background-color: var(--color-award-learning-500);
}

.l-story-nav-li a.l-li-university::after {
  background-color: var(--color-award-university-500);
}

@media (any-hover: hover) {
  .l-story-nav-li a.l-li-grad:hover {
    color: var(--color-award-grand-500);
    background-color: var(--color-award-grand-50);
  }

  .l-story-nav-li a.l-li-sns:hover {
    color: var(--color-award-sns-500);
    background-color: var(--color-award-sns-50);
  }

  .l-story-nav-li a.l-li-job:hover {
    color: var(--color-award-job-500);
    background-color: var(--color-award-job-50);
  }

  .l-story-nav-li a.l-li-career:hover {
    color: var(--color-award-career-500);
    background-color: var(--color-award-career-50);
  }

  .l-story-nav-li a.l-li-business:hover {
    color: var(--color-award-business-500);
    background-color: var(--color-award-business-50);
  }

  .l-story-nav-li a.l-li-learning:hover {
    color: var(--color-award-learning-500);
    background-color: var(--color-award-learning-50);
  }

  .l-story-nav-li a.l-li-university:hover {
    color: var(--color-award-university-500);
    background-color: var(--color-award-university-50);
  }
}

.l-award-section {
  border-radius: var(--size-01);
}

#sec-grand {
  background-color: var(--color-award-grand-50);
}

#sec-sns {
  background-color: var(--color-award-sns-50);
}

#sec-job {
  background-color: var(--color-award-job-50);
}

#sec-career {
  background-color: var(--color-award-career-50);
}

#sec-business {
  background-color: var(--color-award-business-50);
}

#sec-learning {
  background-color: var(--color-award-learning-50);
}

#sec-university {
  background-color: var(--color-award-university-50);
}

.l-award-section .c-contents {
  display: flex;
  flex-direction: column;
  gap: var(--size-03);
}


.l-award-section h3 {
  position: relative;
  padding: 0 var(--size-06);
  width: fit-content;
  margin: 0 auto;
}

#sec-grand.l-award-section h3 {
  padding: 0 var(--size-08);
}

.l-award-section h3::before,
.l-award-section h3::after {
  content: "";
  mask-image: url(/success-story/img/kanmuri.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url(/success-story/img/kanmuri.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  position: absolute;
  opacity: 1;
  top: 55%;
  transition: transform 0.2s ease;
  height: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-primary-500);
}


.l-award-section h3::before {
  left: 0;
  transform: translateY(-50%);
}

.l-award-section h3::after {
  right: 0;
  transform: translateY(-50%) scaleX(-1);
}


#sec-grand.l-award-section h3::before,
#sec-grand.l-award-section h3::after {
  background-color: var(--color-award-grand-500);
}

#sec-sns.l-award-section h3::before,
#sec-sns.l-award-section h3::after {
  background-color: var(--color-award-sns-500);
}

#sec-job.l-award-section h3::before,
#sec-job.l-award-section h3::after {
  background-color: var(--color-award-job-500);
}

#sec-career.l-award-section h3::before,
#sec-career.l-award-section h3::after {
  background-color: var(--color-award-career-500);
}

#sec-business.l-award-section h3::before,
#sec-business.l-award-section h3::after {
  background-color: var(--color-award-business-500);
}

#sec-learning.l-award-section h3::before,
#sec-learning.l-award-section h3::after {
  background-color: var(--color-award-learning-500);
}

#sec-university.l-award-section h3::before,
#sec-university.l-award-section h3::after {
  background-color: var(--color-award-university-500);
}

#sec-grand h3.c-head {
  color: var(--color-award-grand-500);
}

#sec-sns h3.c-head {
  color: var(--color-award-sns-500);
}

#sec-job h3.c-head {
  color: var(--color-award-job-500);
}

#sec-career h3.c-head {
  color: var(--color-award-career-500);
}

#sec-business h3.c-head {
  color: var(--color-award-business-500);
}

#sec-learning h3.c-head {
  color: var(--color-award-learning-500);
}

#sec-university h3.c-head {
  color: var(--color-award-university-500);
}

.l-award-inner {
  padding: var(--size-05) var(--size-06);
  border-radius: var(--size-01);
}

.l-award-ttl {
  position: relative;
  padding: var(--size-02) 0 var(--size-02) var(--size-14);
}

.l-award-ttl::before {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  aspect-ratio: 4 / 3;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 0;
}

#sec-grand .l-award-ttl::before {
  background-image: url(/success-story/img/2026/label_grand.png);
}

#sec-sns .l-award-ttl::before {
  background-image: url(/success-story/img/2026/label_sns.png);
}

#sec-job .l-award-ttl::before {
  background-image: url(/success-story/img/2026/label_job.png);
}

#sec-career .l-award-ttl::before {
  background-image: url(/success-story/img/2026/label_career.png);
}

#sec-business .l-award-ttl::before {
  background-image: url(/success-story/img/2026/label_business.png);
}

#sec-learning .l-award-ttl::before {
  background-image: url(/success-story/img/2026/label_learning.png);
}

#sec-university .l-award-ttl::before {
  background-image: url(/success-story/img/2026/label_university.png);
}

.l-award-ttl h4 {
  line-height: 1.5;
}

.l-badge-box {
  padding: var(--size-03) var(--size-04);
}

.l-badge-box h5 {
  position: relative;
  padding-left: 1em;
}

.l-badge-box h5::before {
  content: "";
  display: block;
  position: absolute;
  width: 3px;
  height: 1lh;
  left: 0;
}

#sec-grand .l-badge-box h5::before {
  background-color: var(--color-award-grand-500);
}

#sec-sns .l-badge-box h5::before {
  background-color: var(--color-award-sns-500);
}

#sec-job .l-badge-box h5::before {
  background-color: var(--color-award-job-500);
}

#sec-career .l-badge-box h5::before {
  background-color: var(--color-award-career-500);
}

#sec-business .l-badge-box h5::before {
  background-color: var(--color-award-business-500);
}

#sec-learning .l-badge-box h5::before {
  background-color: var(--color-award-learning-500);
}

#sec-university .l-badge-box h5::before {
  background-color: var(--color-award-university-500);
}

#sec-grand .l-badge-box {
  background-color: var(--color-award-grand-50);
}

.l-badge-inner {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  column-gap: var(--size-04);
  align-items: center;
  padding: var(--size-03) 0;
  border-bottom: 1px dashed var(--color-gray-500);
}

.l-badge-inner:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.l-badge-img {
  width: 100%;
  max-width: 15rem;
}

.l-badge-info {
  min-width: 0;
}

h6.l-badge-name {
  position: relative;
  border-bottom: 2px solid var(--color-gray-200);
  padding-bottom: var(--size-005);
}

h6.l-badge-name::before {
  content: "";
  width: 6em;
  height: 2px;
  position: absolute;
  top: 100%;
  left: 0;
}

#sec-grand h6.l-badge-name::before {
  background-color: var(--color-award-grand-500);
}

#sec-sns h6.l-badge-name::before {
  background-color: var(--color-award-sns-500);
}

#sec-job h6.l-badge-name::before {
  background-color: var(--color-award-job-500);
}

#sec-career h6.l-badge-name::before {
  background-color: var(--color-award-career-500);
}

#sec-business h6.l-badge-name::before {
  background-color: var(--color-award-business-500);
}

#sec-learning h6.l-badge-name::before {
  background-color: var(--color-award-learning-500);
}

#sec-university h6.l-badge-name::before {
  background-color: var(--color-award-university-500);
}

.l-badge-issue {
  display: flex;
  gap: var(--size-02);
  margin: var(--size-02) 0;
}

.l-badge-issue dt {
  flex: 0 0 10rem;
  width: 10rem;
  text-align: center;
  border-radius: 100rem;
  padding: var(--size-005) 0;
  height: fit-content;
}

.l-badge-issue dd {
  padding-top: var(--size-005);
}

#sec-archive h2 {
  align-items: center;
}

#sec-archive .c-btn {
  max-width: 100% !important;
}

@media screen and (max-width: 1024px) {
  .l-award-ttl {
    padding: var(--size-015) 0 var(--size-015) var(--size-11);
  }
}

@media screen and (max-width: 768px) {
  .l-success-main h1 {
    padding: 0 10rem;
  }

  .l-badge-inner {
    grid-template-columns: 10rem minmax(0, 1fr);
  }

  .l-badge-img {
    max-width: 10rem;
  }
}

@media screen and (max-width: 520px) {
  .l-success-main h1 {
    padding: 0;
  }

  .l-success-main h1::before,
  .l-success-main h1::after {
    display: none;
  }

  .l-award-inner {
    padding: var(--size-03) var(--size-04);
  }

  .l-award-ttl {
    padding: var(--size-015) 0 var(--size-015) var(--size-09);
  }

  .l-award-ttl::before {
    width: 5.5rem;
    top: var(--size-02);
    transform: translateY(0);
  }

  .l-badge-box {
    padding: var(--size-03);
  }

  .l-badge-inner {
    grid-template-columns: 1fr;
    row-gap: var(--size-02);
  }

  .l-badge-img {
    margin: 0 auto;
  }

}