@charset "utf-8";

.icon-light-src {
  filter: brightness(0);
}

.source-strengths-hero,
.source-strengths-list,
.source-strengths-detail {
  --green: #315b47;
  --green-deep: #244c3a;
  --orange: #b66a32;
  --cream: #f7f3eb;
  --paper: #fffefa;
  --body: #414b42;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--body);
}

.source-strengths-hero,
.source-strengths-hero *,
.source-strengths-list,
.source-strengths-list *,
.source-strengths-detail,
.source-strengths-detail * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---- hero ---- */

.source-strengths-hero {
  background: var(--cream);
}

.source-strengths-hero .hero {
  position: relative;
  height: min(41vw, 586px);
  min-height: 420px;
  overflow: hidden;
  background: var(--cream);
}

.source-strengths-hero .hero::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: var(--cream);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H20C22 12 30 20 40 28C50 36 53 42 50 50C47 58 49 65 51 72C52 82 52 92 52 100H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H20C22 12 30 20 40 28C50 36 53 42 50 50C47 58 49 65 51 72C52 82 52 92 52 100H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(2px 0 0 rgba(255, 255, 255, 0.92));
  pointer-events: none;
}

.source-strengths-hero .hero::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 14%;
  background: url("https://yoshiokaringyo.co.jp/system_panel/uploads/images/20260725133003693614.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

/*
 * 元の高解像度写真を使用し、Figmaの構図に合わせて右側へ配置する。
 */
.source-strengths-hero .hero-photo {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.source-strengths-hero .hero-panel {
  position: absolute;
  z-index: 4;
  inset: 0 auto 0 0;
  width: 40%;
  padding: 4vw 2vw 3vw 7.5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
}

.source-strengths-hero .hero-panel::before {
  content: none;
}

.source-strengths-hero .hero-title {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", "Noto Serif JP", serif;
  font-size: clamp(34px, 2.85vw, 41px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--green-deep);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.source-strengths-hero .hero-lead {
  margin-top: 1.7vw;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 2;
  letter-spacing: 0.02em;
  color: #34453a;
  white-space: nowrap;
}

/* ---- 7つの強み一覧 ---- */

.source-strengths-list {
  background: var(--cream);
  padding: 2.6vw 6.2vw 3.25vw;
}

.source-strengths-list .list-title {
  margin-bottom: 2.1vw;
  text-align: center;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(24px, 2.05vw, 30px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: var(--green-deep);
}

.source-strengths-list .cards {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1.8vw;
  row-gap: 1.8vw;
}

@media (min-width: 901px) {
  .source-strengths-list .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .source-strengths-list .card {
    grid-column: auto;
  }

  .source-strengths-list .card:last-child {
    grid-column: 2;
  }
}

.source-strengths-list .card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(50, 70, 57, 0.08);
  border-radius: 7px;
  background: var(--paper);
  box-shadow: 0 2px 9px rgba(35, 54, 43, 0.09);
  color: inherit;
  text-decoration: none;
}

.source-strengths-list .card-head {
  padding: 1.45vw 1.35vw 0;
  display: flex;
  align-items: flex-start;
  gap: 1.15vw;
}

.source-strengths-list .card .num {
  flex: 0 0 auto;
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: clamp(29px, 2.25vw, 34px);
  font-weight: 400;
  line-height: 1;
  color: var(--green);
}

.source-strengths-list .card h3 {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--green-deep);
}

.source-strengths-list .card p {
  min-height: 7.25vw;
  padding: 1.2vw 1.55vw 0;
  font-size: clamp(11.5px, 0.96vw, 14px);
  line-height: 1.85;
  color: var(--body);
}

.source-strengths-list .card-photo {
  width: 100%;
  aspect-ratio: 335 / 140;
  margin-top: auto;
  overflow: hidden;
  flex: 0 0 auto;
}

.source-strengths-list .card-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ---- 強み詳細セクション ---- */

.source-strengths-detail {
  min-height: 29.5vw;
  display: grid;
  align-items: stretch;
  background: var(--cream);
}

.source-strengths-detail.strength-layout-01 {
  grid-template-columns: 39.5% 60.5%;
  --photo-bottom-offset: 1.284vw;
}

.source-strengths-detail.strength-layout-02 {
  grid-template-columns: 57.9% 42.1%;
  --photo-bottom-offset: 0.767vw;
}

.source-strengths-detail.strength-layout-03 {
  grid-template-columns: 46.9% 53.1%;
  --photo-bottom-offset: 0.474vw;
}

.source-strengths-detail.strength-layout-04 {
  grid-template-columns: 53.7% 46.3%;
  --photo-bottom-offset: 0.893vw;
}

.source-strengths-detail.strength-layout-05 {
  grid-template-columns: 40.9% 59.1%;
  --photo-bottom-offset: 1.353vw;
}

.source-strengths-detail.strength-layout-06 {
  grid-template-columns: 60.3% 39.7%;
}

.source-strengths-detail.strength-layout-07 {
  grid-template-columns: 40.9% 59.1%;
  --photo-bottom-offset: 1.353vw;
}

.source-strengths-detail.detail-photo-right .photo {
  order: 2;
}

.source-strengths-detail .photo {
  width: 100%;
  height: 100%;
  min-height: 29.5vw;
  overflow: hidden;
}

.source-strengths-detail .photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (min-width: 901px) {
  .source-strengths-detail.strength-layout-01 .photo,
  .source-strengths-detail.strength-layout-02 .photo,
  .source-strengths-detail.strength-layout-03 .photo,
  .source-strengths-detail.strength-layout-04 .photo,
  .source-strengths-detail.strength-layout-05 .photo,
  .source-strengths-detail.strength-layout-07 .photo {
    height: calc(100% - var(--photo-bottom-offset));
    min-height: calc(29.5vw - var(--photo-bottom-offset));
    align-self: start;
  }

  .source-strengths-detail.strength-layout-01 .photo img {
    transform: rotate(-1.25deg) scale(1.045);
    transform-origin: center center;
  }
}

.source-strengths-detail .content {
  min-width: 0;
  padding: 2.6vw 4.4vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.source-strengths-detail.detail-photo-left .content {
  padding-right: 5.4vw;
}

.source-strengths-detail.detail-photo-right .content {
  padding-left: 4.4vw;
}

.source-strengths-detail .detail-heading {
  margin-bottom: 1.25vw;
  display: flex;
  align-items: baseline;
  gap: 1.65vw;
}

.source-strengths-detail .content .num {
  flex: 0 0 auto;
  font-family: "Yu Mincho", "YuMincho", serif;
  font-size: clamp(29px, 2.2vw, 34px);
  font-weight: 500;
  line-height: 1;
  color: var(--green);
}

.source-strengths-detail .content h3 {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(20px, 1.65vw, 25px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--green-deep);
}

.source-strengths-detail .content p {
  font-size: clamp(11.5px, 0.95vw, 14px);
  line-height: 1.9;
  letter-spacing: 0.015em;
  color: var(--body);
}

.source-strengths-detail .content p.note {
  width: 100%;
  margin-top: 0.45vw;
  padding-right: 0.15vw;
  font-size: clamp(10.5px, 0.82vw, 12px);
  color: #77736b;
  text-align: right;
}

.source-strengths-detail .content p.highlight {
  margin-top: 1vw;
  font-weight: 700;
  color: var(--green-deep);
}

.source-strengths-detail .flow-title,
.source-strengths-detail .badges-title,
.source-strengths-detail .equip-title,
.source-strengths-detail .tags-title,
.source-strengths-detail .steps-title {
  margin-top: 1.6vw;
  margin-bottom: 0.8vw;
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--green-deep);
}

.source-strengths-detail .flow {
  display: flex;
  align-items: center;
  gap: 0.55vw;
}

.source-strengths-detail .flow-step {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.75vw 0.45vw 1vw;
  border: 1px solid rgba(50, 70, 57, 0.08);
  border-radius: 5px;
  background: var(--paper);
  box-shadow: 0 2px 8px rgba(35, 54, 43, 0.07);
  text-align: center;
}

.source-strengths-detail .flow-step span {
  margin-bottom: 0.55vw;
  display: block;
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 500;
  color: var(--green-deep);
}

.source-strengths-detail .flow-step .svg-asset {
  width: clamp(30px, 2.8vw, 42px);
  height: clamp(30px, 2.8vw, 42px);
  margin: 0 auto;
  display: block;
  object-fit: contain;
}

.source-strengths-detail .flow-arrow {
  flex: 0 0 auto;
  color: var(--green);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 900;
}

.source-strengths-detail .badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7vw;
}

.source-strengths-detail.strength-layout-02 .badges {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.source-strengths-detail .badge {
  min-width: 0;
  padding: 0.65vw 0.55vw;
  display: flex;
  align-items: center;
  gap: 0.35vw;
  border: 1px solid rgba(50, 70, 57, 0.11);
  border-radius: 5px;
  background: var(--paper);
  box-shadow: 0 2px 7px rgba(35, 54, 43, 0.06);
  color: var(--green-deep);
  font-size: clamp(8px, 0.66vw, 10px);
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}

.source-strengths-detail .badge > div {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.source-strengths-detail .badge::before {
  content: "✓";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.3px solid var(--green);
  border-radius: 50%;
  color: var(--green);
  font-size: 8px;
}

.source-strengths-detail .equip-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1vw;
}

.source-strengths-detail .equip-card {
  min-width: 0;
  padding: 1.1vw 1.25vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8vw;
  border: 1px solid rgba(50, 70, 57, 0.09);
  border-radius: 5px;
  background: var(--paper);
  box-shadow: 0 2px 8px rgba(35, 54, 43, 0.07);
}

.source-strengths-detail .equip-card h4 {
  margin-bottom: 0.35vw;
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 700;
  color: var(--green-deep);
}

.source-strengths-detail .equip-card p {
  font-size: clamp(9.5px, 0.8vw, 12px);
  line-height: 1.55;
}

.source-strengths-detail .equip-card .svg-asset {
  width: clamp(52px, 5vw, 72px);
  height: clamp(40px, 4vw, 58px);
  flex: 0 0 auto;
  object-fit: contain;
}

.source-strengths-detail .tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9vw;
}

.source-strengths-detail .tag {
  min-width: 0;
  padding: 0.85vw 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55vw;
  border: 1px solid rgba(50, 70, 57, 0.1);
  border-radius: 5px;
  background: var(--paper);
  box-shadow: 0 2px 7px rgba(35, 54, 43, 0.06);
  color: var(--green-deep);
  font-size: clamp(10px, 0.88vw, 13px);
  font-weight: 700;
}

.source-strengths-detail .tag .svg-asset {
  width: clamp(24px, 2.15vw, 32px);
  height: clamp(24px, 2.15vw, 32px);
}

.source-strengths-detail.strength-layout-02 {
  --seam-left: 39.5%;
  --seam-width: 18.4%;
  --seam-angle: 4deg;
  --seam-origin: right center;
}

.source-strengths-detail.strength-layout-03 {
  --seam-left: 46.9%;
  --seam-width: 11%;
  --seam-angle: -4deg;
  --seam-origin: left center;
}

.source-strengths-detail.strength-layout-04 {
  --seam-left: 46.9%;
  --seam-width: 6.8%;
  --seam-angle: 4deg;
  --seam-origin: right center;
}

.source-strengths-detail.strength-layout-05 {
  --seam-left: 40.9%;
  --seam-width: 12.8%;
  --seam-angle: -4deg;
  --seam-origin: left center;
}

.source-strengths-detail.strength-layout-06 {
  --seam-left: 40.9%;
  --seam-width: 19.4%;
  --seam-angle: 4deg;
  --seam-origin: right center;
}

.source-strengths-detail.strength-layout-07 {
  --seam-left: 40.9%;
  --seam-width: 12.8%;
  --seam-angle: -4deg;
  --seam-origin: left center;
}

.source-strengths-detail.strength-layout-02,
.source-strengths-detail.strength-layout-03,
.source-strengths-detail.strength-layout-04,
.source-strengths-detail.strength-layout-05,
.source-strengths-detail.strength-layout-06,
.source-strengths-detail.strength-layout-07 {
  position: relative;
}

.source-strengths-detail.strength-layout-02::before,
.source-strengths-detail.strength-layout-03::before,
.source-strengths-detail.strength-layout-04::before,
.source-strengths-detail.strength-layout-05::before,
.source-strengths-detail.strength-layout-06::before,
.source-strengths-detail.strength-layout-07::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: var(--seam-left);
  width: var(--seam-width);
  height: 1px;
  background: rgba(68, 83, 72, 0.22);
  transform: rotate(var(--seam-angle));
  transform-origin: var(--seam-origin);
  pointer-events: none;
}

.source-strengths-detail .steps {
  display: flex;
  align-items: center;
  gap: 0.35vw;
}

.source-strengths-detail .step {
  min-width: 0;
  flex: 1 1 0;
  padding: 0.8vw 0.25vw;
  border: 1px solid rgba(50, 70, 57, 0.09);
  border-radius: 5px;
  background: var(--paper);
  box-shadow: 0 2px 7px rgba(35, 54, 43, 0.06);
  text-align: center;
}

.source-strengths-detail .step .svg-asset {
  width: clamp(23px, 2.1vw, 31px);
  height: clamp(23px, 2.1vw, 31px);
  margin: 0 auto 0.45vw;
  display: block;
  object-fit: contain;
}

.source-strengths-detail .step span {
  display: block;
  font-size: clamp(9px, 0.72vw, 10.5px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--green-deep);
}

.source-strengths-detail .steps-arrow {
  flex: 0 0 auto;
  color: var(--green);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 900;
}

.source-strengths-detail .cols {
  margin-top: 1.4vw;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15vw;
}

.source-strengths-detail .col {
  padding: 1.1vw 1.25vw;
  border: 1px solid rgba(50, 70, 57, 0.09);
  border-radius: 5px;
  background: var(--paper);
  box-shadow: 0 2px 8px rgba(35, 54, 43, 0.07);
}

.source-strengths-detail .col h4 {
  margin-bottom: 0.65vw;
  padding-bottom: 0.5vw;
  border-bottom: 1px solid rgba(50, 70, 57, 0.12);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
  color: var(--green-deep);
}

.source-strengths-detail .benefit-item {
  position: relative;
  padding-left: 1.25em;
  font-size: clamp(10px, 0.82vw, 12px);
  line-height: 1.8;
  color: var(--body);
}

.source-strengths-detail .benefit-item::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
}

@media (max-width: 900px) {
  .source-strengths-hero .hero {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .source-strengths-hero .hero::after {
    content: none;
  }

  .source-strengths-hero .hero::before {
    content: none;
  }

  .source-strengths-hero .hero-photo {
    position: relative;
    order: 1;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .source-strengths-hero .hero-panel {
    position: relative;
    order: 2;
    width: 100%;
    padding: 42px 32px 48px;
    background: var(--cream);
  }

  .source-strengths-hero .hero-title {
    font-size: clamp(28px, 5.2vw, 36px);
  }

  .source-strengths-hero .hero-lead {
    margin-top: 20px;
    font-size: 13px;
    white-space: normal;
  }

  .source-strengths-list {
    padding: 48px 32px 56px;
  }

  .source-strengths-list .list-title {
    margin-bottom: 30px;
  }

  .source-strengths-list .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .source-strengths-list .card-head {
    padding: 22px 20px 0;
    gap: 14px;
  }

  .source-strengths-list .card p {
    min-height: 100px;
    padding: 14px 20px 0;
  }

  .source-strengths-detail,
  .source-strengths-detail.strength-layout-01,
  .source-strengths-detail.strength-layout-02,
  .source-strengths-detail.strength-layout-03,
  .source-strengths-detail.strength-layout-04,
  .source-strengths-detail.strength-layout-05,
  .source-strengths-detail.strength-layout-06,
  .source-strengths-detail.strength-layout-07 {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .source-strengths-detail.strength-layout-02::before,
  .source-strengths-detail.strength-layout-03::before,
  .source-strengths-detail.strength-layout-04::before,
  .source-strengths-detail.strength-layout-05::before,
  .source-strengths-detail.strength-layout-06::before,
  .source-strengths-detail.strength-layout-07::before {
    content: none;
  }

  .source-strengths-detail.detail-photo-right .photo {
    order: -1;
  }

  .source-strengths-detail .photo {
    height: 56vw;
    min-height: 320px;
  }

  .source-strengths-detail .content,
  .source-strengths-detail.detail-photo-left .content,
  .source-strengths-detail.detail-photo-right .content {
    padding: 48px 36px 56px;
  }

  .source-strengths-detail .detail-heading {
    margin-bottom: 18px;
    gap: 18px;
  }

  .source-strengths-detail .flow-title,
  .source-strengths-detail .badges-title,
  .source-strengths-detail .equip-title,
  .source-strengths-detail .tags-title,
  .source-strengths-detail .steps-title {
    margin-top: 24px;
    margin-bottom: 12px;
  }

  .source-strengths-detail .badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .source-strengths-detail .badge,
  .source-strengths-detail .equip-card,
  .source-strengths-detail .tag,
  .source-strengths-detail .col {
    padding: 14px;
  }
}

@media (max-width: 640px) {
  .source-strengths-hero .hero {
    display: grid;
  }

  .source-strengths-hero .hero-photo {
    order: 2;
    height: 58vw;
    min-height: 218px;
    object-fit: cover;
    object-position: center center;
  }

  .source-strengths-hero .hero-panel {
    order: 1;
    padding: 34px 20px 30px;
  }

  .source-strengths-hero .hero-title {
    font-size: clamp(27px, 7.4vw, 31px);
    line-height: 1.5;
  }

  .source-strengths-hero .hero-lead {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.9;
  }

  .source-strengths-list {
    padding: 38px 18px 48px;
  }

  .source-strengths-list .list-title {
    margin-bottom: 24px;
    font-size: 24px;
  }

  .source-strengths-list .cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .source-strengths-list .card-head {
    padding: 20px 18px 0;
    gap: 12px;
  }

  .source-strengths-list .card .num {
    font-size: 28px;
  }

  .source-strengths-list .card h3 {
    font-size: 17px;
  }

  .source-strengths-list .card p {
    min-height: 0;
    padding: 12px 18px 18px;
    font-size: 12px;
    line-height: 1.8;
  }

  .source-strengths-detail .photo {
    height: 66vw;
    min-height: 240px;
  }

  .source-strengths-detail .content,
  .source-strengths-detail.detail-photo-left .content,
  .source-strengths-detail.detail-photo-right .content {
    padding: 34px 20px 44px;
  }

  .source-strengths-detail .detail-heading {
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 12px;
  }

  .source-strengths-detail .content .num {
    font-size: 27px;
  }

  .source-strengths-detail .content h3 {
    font-size: 19px;
    line-height: 1.55;
  }

  .source-strengths-detail .content p {
    font-size: 12px;
    line-height: 1.85;
  }

  .source-strengths-detail .flow-title,
  .source-strengths-detail .badges-title,
  .source-strengths-detail .equip-title,
  .source-strengths-detail .tags-title,
  .source-strengths-detail .steps-title {
    margin-top: 22px;
    margin-bottom: 10px;
  }

  .source-strengths-detail .flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 26px;
    row-gap: 30px;
  }

  .source-strengths-detail .flow-step {
    position: relative;
    padding: 14px 8px;
  }

  .source-strengths-detail .flow-step:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .source-strengths-detail .flow-step:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .source-strengths-detail .flow-step:nth-of-type(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .source-strengths-detail .flow-step:nth-of-type(4) {
    grid-column: 1;
    grid-row: 2;
  }

  .source-strengths-detail .flow-step::after,
  .source-strengths-detail .step::after {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    color: var(--green);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
  }

  .source-strengths-detail .flow-step:nth-of-type(1)::after {
    content: "→";
    top: 50%;
    right: -26px;
    width: 26px;
    transform: translateY(-50%);
  }

  .source-strengths-detail .flow-step:nth-of-type(2)::after {
    content: "↓";
    bottom: -30px;
    left: 50%;
    width: 26px;
    height: 30px;
    transform: translateX(-50%);
  }

  .source-strengths-detail .flow-step:nth-of-type(3)::after {
    content: "←";
    top: 50%;
    left: -26px;
    width: 26px;
    transform: translateY(-50%);
  }

  .source-strengths-detail .flow-arrow,
  .source-strengths-detail .steps-arrow {
    display: none;
  }

  .source-strengths-detail .badges,
  .source-strengths-detail.strength-layout-02 .badges,
  .source-strengths-detail .equip-cards,
  .source-strengths-detail .tags,
  .source-strengths-detail .cols {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .source-strengths-detail .badge {
    font-size: 12px;
    line-height: 1.6;
    padding: 10px 12px;
  }

  .source-strengths-detail .badge > div {
    word-break: normal;
  }

  .source-strengths-detail .tag {
    font-size: 13px;
  }

  .source-strengths-detail .steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 30px;
  }

  .source-strengths-detail .step {
    position: relative;
    min-width: 0;
    width: auto;
    flex: none;
    padding: 14px 6px;
  }

  .source-strengths-detail .step:nth-of-type(1) {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .source-strengths-detail .step:nth-of-type(2) {
    grid-column: 3 / 5;
    grid-row: 1;
  }

  .source-strengths-detail .step:nth-of-type(3) {
    grid-column: 5 / 7;
    grid-row: 1;
  }

  .source-strengths-detail .step:nth-of-type(4) {
    grid-column: 4 / 7;
    grid-row: 2;
  }

  .source-strengths-detail .step:nth-of-type(5) {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  .source-strengths-detail .step:nth-of-type(1)::after,
  .source-strengths-detail .step:nth-of-type(2)::after {
    content: "→";
    top: 50%;
    right: -16px;
    width: 16px;
    font-size: 15px;
    transform: translateY(-50%);
  }

  .source-strengths-detail .step:nth-of-type(3)::after {
    content: "↓";
    bottom: -30px;
    left: 50%;
    width: 16px;
    height: 30px;
    font-size: 15px;
    transform: translateX(-50%);
  }

  .source-strengths-detail .step:nth-of-type(4)::after {
    content: "←";
    top: 50%;
    left: -16px;
    width: 16px;
    font-size: 15px;
    transform: translateY(-50%);
  }
}

*{box-sizing:border-box}

@media (min-width:1281px){.source-strengths-hero.source-strengths-hero .hero-panel{padding-left:calc(0.5*(100vw - 1180px))}.source-strengths-list.source-strengths-list{padding-right:calc(0.5*(100vw - 1180px));padding-left:calc(0.5*(100vw - 1180px))}.source-strengths-detail.source-strengths-detail.detail-photo-left .content{padding-right:calc(0.5*(100vw - 1180px))}.source-strengths-detail.source-strengths-detail.detail-photo-right .content{padding-left:calc(0.5*(100vw - 1180px))}}

@media (max-width:900px){.source-strengths-list.source-strengths-list,.source-strengths-hero.source-strengths-hero .hero-panel,.source-strengths-detail.source-strengths-detail.detail-photo-left .content,.source-strengths-detail.source-strengths-detail.detail-photo-right .content{padding-right:24px;padding-left:24px}}

@media (max-width:768px){.source-strengths-hero.source-strengths-hero.source-strengths-hero h1,.source-strengths-list.source-strengths-list.source-strengths-list h1,.source-strengths-detail.source-strengths-detail.source-strengths-detail h1{font-size:28px}.source-strengths-hero.source-strengths-hero.source-strengths-hero h2,.source-strengths-list.source-strengths-list.source-strengths-list h2,.source-strengths-detail.source-strengths-detail.source-strengths-detail h2{font-size:24px}}

@media (max-width:1280px){.source-strengths-list.source-strengths-list{padding-right:24px;padding-left:24px}.source-strengths-hero.source-strengths-hero .hero-panel{padding-left:24px}.source-strengths-detail.source-strengths-detail.detail-photo-left .content{padding-right:24px}.source-strengths-detail.source-strengths-detail.detail-photo-right .content{padding-left:24px}}

*{box-sizing:border-box}

*{box-sizing:border-box}

.source-strengths-detail.strength-layout-02 .badge,.source-strengths-detail.strength-layout-06 .tag,.source-strengths-detail.strength-layout-07 .benefit-item{font-size:14px;overflow-wrap:anywhere;word-break:normal}

.source-strengths-detail.strength-layout-02 .badge>div,.source-strengths-detail.strength-layout-06 .tag>div{min-width:0;overflow-wrap:anywhere;word-break:normal;white-space:normal}

*{box-sizing:border-box}