/* ======================================
style_casestudy.cssは事例の詳細ページ・一覧・タクソノミーのページ用CSS（新デザインのみ）です。制御はfunctions.phpで行っています。
対象テンプレート：single-casestudy-ver2.php、archive-casestudy.php
====================================== */

body {
  background-color: var(--color-white-bg);
}
.tc-case {
  max-width: 1920px;
  overflow: hidden;
  margin-block-start: 88px;
  margin-inline: auto;
}
@media screen and (max-width: 840px) {
  .tc-case {
    margin-block-start: 60px;
  }
}
/* ============================================================================
archive
============================================================================ */
/* ==========================================================================
   事例一覧
========================================================================== */

.case-archive {
  background-color: #fff;
}

.case-archive-hero {
  padding-block: 120px 110px;
  color: #fff;
  background: linear-gradient(135deg, #e6002d 0%, #e6002d 56%, #ef304e 100%);
}

.case-archive-hero__content {
  max-width: 980px;
}

.case-archive-hero__label,
.case-archive-heading__label,
.case-archive-cta__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.case-archive-hero__title {
  margin-top: 15px;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.4;
  font-weight: 900;
}

.case-archive-hero__text {
  margin-top: 30px;
  line-height: 1.8;
}

.case-archive-pickup {
  position: relative;
  overflow: hidden;
  padding-block: 53px 130px;
  background: linear-gradient(90deg, #fdf3f3 0%, #fffbfb 100%);
}
.case-archive-pickup:after {
  content: "";

  position: absolute;
  width: 1000px;
  height: 1000px;
  left: 1300px;
  top: -100px;

  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(255, 191, 199, 0.4) 0%,
    rgba(255, 204, 209, 0) 100%
  );
}

.case-archive-heading {
  display: flex;
  gap: 50px;
  align-items: center;
  margin-bottom: 50px;
}

.case-archive-heading__title-wrap {
  flex-shrink: 0;
}

.case-archive-heading__label {
  color: var(--color-red);
}

.case-archive-heading__title {
  position: relative;
  margin-top: 8px;
  padding-left: 25px;
  color: var(--color-red);
  font-size: 28px;
  font-weight: 900;
}

.case-archive-heading__title::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
  content: "";
  background-color: var(--color-red);
  transform: skewX(-18deg);
}

.case-archive-heading__text {
  line-height: 1.8;
}

.case-archive-feature {
  display: grid;
  grid-template-columns: minmax(0, 43%) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 15px 35px rgb(68 20 30 / 12%);
  margin-block-start: 56px;
  position: relative;
  z-index: 1;
}

.case-archive-feature__image img {
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
}

.case-archive-feature__body {
  padding: 45px;
  text-align: left;
}

.case-archive-feature__label {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.case-archive-feature__label:after {
  content: "";
  width: 100%;
  height: 8px;
  display: block;
  position: absolute;
  bottom: -6px;
  left: 0;
  background-image: url(/_pack/img/renew/decoration-balloon.svg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.case-archive-feature__title {
  margin-top: 15px;
  font-size: 30px;
  line-height: 1.5;
  font-feature-settings: "palt";
  font-weight: 900;
}

.case-archive-card__meta {
  font-size: 12px;
  font-weight: 500;
  color: #6b6b70;
}
.case-archive-feature__lead {
  font-size: 15px;
  margin-top: 12px;
  color: #0074d9;
  font-weight: 500;
}
.case-archive-feature__list {
  display: grid;
  gap: 12px;
  margin-block: 25px 30px;
}

.case-archive-feature__item {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: "plat";
}

.case-archive-feature__item::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-red);
  content: "✓";
  font-weight: 900;
}

.case-archive-feature__text {
  margin-block: 25px 30px;
  line-height: 1.8;
}
.case-archive-feature__button {
  font-size: 15px;
  max-width: 170px;
}

.case-archive-related {
  margin-top: 65px;
  position: relative;
  z-index: 1;
}

.case-archive-related__title {
  font-size: 18px;
  font-weight: 700;
}

.case-archive-card-list {
  display: grid;
  margin-block-start: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 20px;
}

.case-archive-card {
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 9px 22px rgb(50 50 50 / 10%);
}

.case-archive-card__anchor {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.case-archive-card__image {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  aspect-ratio: 409 / 267;
  overflow: hidden;
  background: #f5f5f7;
  align-content: center;
  flex-shrink: 0;
}

.case-archive-card__image img {
  /* width: 100%;
  height: 100%;
  object-fit: cover; */
  transition: transform 0.3s ease;
}

.case-archive-card__anchor:hover .case-archive-card__image img {
  transform: scale(1.04);
}

.case-archive-card__body {
  display: flex;
  height: 100%;
  padding-block: 40px;
  padding-inline: 22px;
  flex-direction: column;
  gap: 10px;
}

.case-archive-card__title {
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
}

.case-archive-card__text {
  font-size: 13px;
  line-height: 1.7;
}

.case-archive-card__link {
  font-size: 15px;
}

.case-archive-card__link {
  margin-top: auto;
  padding-top: 20px;
  color: var(--color-red);
  font-size: 13px;
  font-weight: 700;
}

.case-archive-card__link::after {
  margin-left: 10px;
  content: "→";
}

.case-archive-list-section {
  position: relative;
  padding-block: 83px 117px;
  overflow: hidden;
  max-width: 1920px;
  margin-inline: auto;
}

.case-archive-list-section::before {
  position: absolute;
  top: 0;
  right: 190px;
  color: #f6f6f8;
  content: "CASE";
  font-family: var(--font-family-mon);
  font-size: clamp(64px, calc(14.86vw + 6.06px), 220px);
  line-height: 1;
  font-weight: 900;
  pointer-events: none;
}

.case-archive-list-section .l-container {
  position: relative;
  z-index: 1;
}

.case-archive-list-head {
  display: flex;
  gap: 15px;
  align-items: baseline;
  margin-bottom: 25px;
  border-bottom: solid 1px #e5e3e3;
}

.case-archive-list-head__title {
  font-size: 22px;
  font-weight: 700;
}

.case-archive-list-head__count {
  color: #777;
  font-size: 13px;
}

.case-archive-pagination {
  margin-top: 60px;
}

.case-archive-cta {
  padding-bottom: 100px;
}

.case-archive-cta__inner {
  display: flex;
  padding: 50px 70px;
  border-radius: 18px;
  align-items: center;
  justify-content: space-between;
  background-color: #fffafb;
  box-shadow: 0 10px 25px rgb(51 17 25 / 5%);
}

.case-archive-cta__label {
  color: var(--color-red);
}

.case-archive-cta__title {
  margin-top: 12px;
  font-size: 25px;
  font-weight: 700;
}

.case-archive-cta__text {
  margin-top: 15px;
  line-height: 1.7;
}

.case-archive-cta__button {
  min-width: 210px;
  padding: 18px 30px;
  border-radius: 100px;
  color: #fff;
  background-color: var(--color-red);
  text-align: center;
  font-weight: 700;
  transition: .3s ease;
}

.case-archive-cta__button:hover{
  transform: translateY(-10px);
}
@media (max-width: 840px) {
  .case-archive-hero {
    padding-block: 75px 65px;
  }

  .case-archive-heading {
    display: block;
  }

  .case-archive-heading__text {
    margin-top: 25px;
  }

  .case-archive-feature {
    grid-template-columns: 1fr;
  }

  .case-archive-feature__image img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .case-archive-feature__body {
    padding: 25px 20px 30px;
  }

  .case-archive-feature__title {
    font-size: 21px;
  }

  .case-archive-card-list {
    grid-template-columns: 1fr;
  }

  .case-archive-list-section::before {
    top: 16px;
  }

  .case-archive-cta__inner {
    display: block;
    padding: 35px 25px;
  }

  .case-archive-cta__button {
    display: block;
    margin-top: 30px;
  }
}

/* ============================================================================
single
============================================================================ */

/* ============================================================================
事例概要
============================================================================ */
.tc-case-about {
  position: relative;
  overflow: hidden;
  padding: 26px 0 0;
  color: var(--color-black);
  background-color: var(--color-white-bg);
}

@media screen and (max-width: 840px) {
  .tc-case-about {
    padding-top: 32px;
  }
}

/* 右側の装飾 */
/* .tc-case-about::after {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: min(310px, 20vw);
  height: 100%;
  background: url("/_pack/img/renew/tc-case-about-bg.webp") bottom right /
    contain no-repeat;
  content: "";
  pointer-events: none;
}

@media screen and (max-width: 840px) {
  .tc-case-about::after {
    width: 130px;
    opacity: 0.45;
  }
} */

.tc-case-about__inner {
  position: relative;
  z-index: 1;
}

/* タイトル
------------------------------------- */

.tc-case-about__title {
  width: min(100% - 40px, 1620px);
  color: var(--color-black);
  font-size: clamp(32px, calc(2.67vw + 21.6px), 60px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  font-family: var(--font-family-zen);
  position: relative;
  font-feature-settings: "halt";
}

@media screen and (max-width: 840px) {
  .tc-case-about__title {
    width: min(100% - 32px, 1620px);
    margin-top: 26px;
    line-height: 1.45;
  }
}

.tc-case-about__label {
  display: block;
  margin: 0 0 12px;
  color: var(--color-red);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  content: "Big Issue";
}

@media screen and (max-width: 840px) {
  .tc-case-about__label {
    margin-bottom: 10px;
    font-size: 13px;
  }
}
.tc-case-about__title:after {
  content: "";
  width: 100px;
  height: 3px;
  display: block;
  background-color: var(--color-black);
  position: absolute;
  top: 50%;
  left: -124px;
  transform: translateY(-50%);
}
@media screen and (max-width: 840px) {
  .tc-case-about__title:after {
    display: none;
  }
}
.tc-case-about__title-emphasis {
  color: var(--color-red);
}
.tc-case-about__subtitle {
  width: min(100% - 40px, 1620px);
  color: var(--color-black);
  font-size: clamp(26px, 2.1vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  font-feature-settings: "halt";
  font-family: var(--font-family-zen);
}

@media screen and (max-width: 840px) {
  .tc-case-about__subtitle {
    width: min(100% - 32px, 1620px);
    margin-top: 18px;
    font-size: 21px;
  }
}

.tc-case-about__company {
  width: min(100% - 40px, 1620px);
  color: var(--color-black);
  font-size: 14px;
  font-weight: 700;
}

@media screen and (max-width: 840px) {
  .tc-case-about__company {
    width: min(100% - 32px, 1620px);
    margin-top: 10px;
    font-size: 12px;
  }
}

/* メインレイアウト
------------------------------------- */
.tc-case-about__movie {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.tc-case-about__movie iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.tc-case-about__layout {
  display: grid;
  grid-template-columns: minmax(0, 49%) minmax(0, 1fr);
  gap: clamp(40px, 3.5vw, 68px);
  align-items: start;
  margin-top: 30px;
  position: relative;
}

@media screen and (max-width: 840px) {
  .tc-case-about__layout {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 30px;
  }
}

/* メイン画像
------------------------------------- */

.tc-case-about__image {
  position: relative;
  width: 100%;
  aspect-ratio: 931 / 589;
  overflow: visible;
}
.tc-case-about__image-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  align-content: center;
  z-index: 2;
}

.tc-case-about__image-file {
  display: block;
  /* width: 100%;
  height: 100%;
  object-fit: cover; */
}

.tc-case-about__image-frame__staff {
  margin-inline-start: 26px;
  margin-block-start: 13px;
}
.tc-case-about__bg {
  position: absolute;
  right: calc(100% - 100vw);
  bottom: 0;
  width: clamp(220px, 32vw, 447px);
  pointer-events: none;
}

@media screen and (max-width: 840px) {
  .tc-case-about__bg {
    width: 110px;
    top: -183px;
    bottom: auto;
  }
}

.tc-case-about__bg img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 840px) {
  .tc-case-about__image {
    aspect-ratio: 4 / 3;
  }
}

/* .tc-case-about__image-file {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tc-case-about__image-file[src=""] {
  display: none;
} */

/* 右側コンテンツ
------------------------------------- */

.tc-case-about__content {
  min-width: 0;
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 840px) {
  .tc-case-about__content {
    padding-inline: 16px;
  }
}

/* Before / After
------------------------------------- */

.tc-case-before-after {
  max-width: 760px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tc-case-before-after__item {
  position: relative;
  margin: 0;
}

.tc-case-before-after__item--before {
  padding-bottom: 68px;
}

@media screen and (max-width: 840px) {
  .tc-case-before-after__item--before {
    padding-bottom: 64px;
  }
}

.tc-case-before-after__item--before::before {
  display: table;
  margin-bottom: 18px;
  padding: 4px 12px;
  color: var(--color-white);
  background-color: var(--color-black);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  content: "BEFORE";
}

@media screen and (max-width: 840px) {
  .tc-case-before-after__item--before::before {
    margin-bottom: 14px;
    font-size: 13px;
  }
}

.tc-case-before-after__item--before::after {
  position: absolute;
  bottom: 18px;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 16px solid var(--color-black);
  border-right: 22px solid transparent;
  border-left: 22px solid transparent;
  content: "";
  transform: translateX(-50%);
}

.tc-case-before-after__item--after::before {
  display: table;
  margin-bottom: 18px;
  padding: 7px 16px;
  color: var(--color-white);
  background-color: var(--color-red);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  content: "AFTER";
}

@media screen and (max-width: 840px) {
  .tc-case-before-after__item--after::before {
    margin-bottom: 14px;
    font-size: 13px;
  }
}

.tc-case-before-after__title {
  margin: 0;
  color: var(--color-black);
  font-size: clamp(22px, 1.5vw, 30px);
  font-weight: 700;
  line-height: 1.5;
  font-family: var(--font-family-zen);
}

@media screen and (max-width: 840px) {
  .tc-case-before-after__title {
    font-size: 21px;
  }
}

.tc-case-before-after__item--after .tc-case-before-after__title {
  color: var(--color-red);
}

.tc-case-before-after__text {
  margin: 14px 0 0;
  color: var(--color-black);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

@media screen and (max-width: 840px) {
  .tc-case-before-after__text {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.8;
  }
}

/* 解決サービス
------------------------------------- */
.tc-case-solution-service-slide {
  position: relative;
  overflow: visible;
}

.tc-case-solution-service-slide__item {
  height: auto;
}

.tc-case-solution-service-slide__item .tc-case-solution-service {
  height: 100%;
}

/* ナビゲーション */
.tc-case-solution-service-slide__navigation {
  position: absolute;
  z-index: 10;
  top: 53%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* prev / next 共通 */
.tc-case-solution-service-slide__prev,
.tc-case-solution-service-slide__next {
  position: absolute;
  top: 50%;
  z-index: 11;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;
  padding: 0;

  border: none;
  border-radius: 50%;
  background: #ef002f;

  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto;
}

/* 左右位置 */
.tc-case-solution-service-slide__prev {
  left: 0;
}

.tc-case-solution-service-slide__next {
  right: 16px;
}
@media screen and (max-width: 840px) {
  .tc-case-solution-service-slide__next {
    right: 0;
  }
}

/* 白矢印 */
.tc-case-solution-service-slide__prev::before,
.tc-case-solution-service-slide__next::before {
  content: "";
  display: block;

  width: 5px;
  height: 5px;

  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

/* ← */
.tc-case-solution-service-slide__prev::before {
  transform: rotate(-135deg);
  margin-left: 2px;
}

/* → */
.tc-case-solution-service-slide__next::before {
  transform: rotate(45deg);
  margin-right: 2px;
}

.tc-case-solution-service-slide__prev.is-first,
.tc-case-solution-service-slide__next.swiper-button-disabled {
  background-color: #ccc;
}
.tc-case-solution-service-slide__pagination.swiper-pagination {
  position: static;
  width: auto;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tc-case-solution-service-slide__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;

  background-color: #ccc;
  opacity: 1;
}

.tc-case-solution-service-slide__pagination .swiper-pagination-bullet-active {
  background-color: #ef002f;
}
.single-casestudy .swiper-wrapper {
  padding-bottom: 26px;
}
.tc-case-solution-service {
  /* position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  grid-template-areas:
    "logo name"
    "button position"; */
  margin-inline: 12px;
  max-width: 870px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  gap: 12px 30px;
  max-width: 870px;
  margin-top: 66px;
  padding: 30px;
  border: 1px solid var(--color-red);
  background: rgba(255, 255, 255, 0.75);
}

@media screen and (max-width: 840px) {
  .tc-case-solution-service {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "name"
      "button"
      "position";
    gap: 18px;
    flex-direction: column-reverse;

    margin-top: 56px;
    padding: 38px 20px 24px;
  }
}

.tc-case-solution-service__label {
  position: absolute;
  top: 0;
  left: 14px;
  margin: 0;
  padding: 7px 24px;
  border: 1px solid var(--color-red);
  border-radius: 100px;
  color: var(--color-red);
  background-color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
}

@media screen and (max-width: 840px) {
  .tc-case-solution-service__label {
    left: 50%;
    width: max-content;
    max-width: calc(100% - 24px);
    padding-inline: 18px;
    font-size: 12px;
    transform: translate(-50%, -50%);
  }
}

.tc-case-solution-service__logo {
  grid-area: logo;
  align-self: center;
}

.tc-case-solution-service__button {
  flex-shrink: 0;
  min-width: 186px;
}

.tc-case-solution-service__logo-image {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
  object-fit: contain;
  margin-block-end: 20px;
}

@media screen and (max-width: 840px) {
  .tc-case-solution-service__logo-image {
    max-width: 210px;
    margin-inline: auto;
  }
}

.tc-case-solution-service__logo-image[src=""] {
  display: none;
}

.tc-case-solution-service__button {
  grid-area: button;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 38px 8px 20px;
  border-radius: 100px;
  color: var(--color-white);
  background-color: var(--color-red);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.3s, background-color 0.3s;
}

.tc-case-solution-service__button:hover {
  color: var(--color-red);
  background-color: var(--color-white);
  outline: 1px solid var(--color-red);
}

.tc-case-solution-service__button::after {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
  content: "";
  transform: translateY(-50%);
}

.tc-case-solution-service__name {
  grid-area: name;
  align-self: center;
  margin: 0;
  color: var(--color-black);
  font-size: 19px;
  font-weight: 700;

  line-height: 1.5;
}

@media screen and (max-width: 840px) {
  .tc-case-solution-service__name {
    font-size: 16px;
    text-align: center;
  }
}

.tc-case-solution-service__text {
  font-size: 15px;
  font-weight: 500;
}
.tc-case-solution-service__detail {
  display: block;
}

/* 対象者層
------------------------------------- */

.tc-case-service-position {
  grid-area: position;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}

@media screen and (max-width: 840px) {
  .tc-case-service-position {
    justify-content: center;
  }
}

.tc-case-service-position__label {
  margin: 0;
  padding: 5px 10px;
  border: 1px solid var(--color-red);
  color: var(--color-red);
  font-size: 13px;
  line-height: 1;
}

.tc-case-service-position__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 840px) {
  .tc-case-service-position__list {
    justify-content: center;
    gap: 8px 14px;
  }
}

.tc-case-service-position__item {
  position: relative;
  margin: 0;
  padding-left: 12px;
  color: var(--color-black);
  font-size: 14px;
  font-weight: 700;
}

.tc-case-service-position__item::before {
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-red);
  content: "";
  transform: translateY(-50%);
}
/* ============================================================================
企業プロフィール
============================================================================ */

.tc-case-company {
  padding: 80px 0 100px;
  color: var(--color-black);
  background-color: var(--color-white-bg);
}

@media screen and (max-width: 840px) {
  .tc-case-company {
    padding: 56px 0 72px;
  }
}

/* 見出し
------------------------------------- */

.tc-case-company .tc-case-section-label {
  margin: 0;
  color: var(--color-black);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

@media screen and (max-width: 840px) {
  .tc-case-company .tc-case-section-label {
    font-size: 12px;
  }
}

.tc-case-company .tc-case-section-title {
  margin: 26px 0 0;
  color: var(--color-red);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.4;
  font-family: var(--font-family-zen);
  text-align: center;
}

@media screen and (max-width: 840px) {
  .tc-case-company .tc-case-section-title {
    margin-top: 16px;
    font-size: 28px;
  }
}

/* レイアウト
------------------------------------- */

.tc-case-company__layout {
  display: grid;
  grid-template-columns: minmax(300px, 407px) minmax(0, 1fr);
  gap: clamp(50px, 6vw, 76px);
  align-items: center;
  margin-top: 62px;
}

@media screen and (max-width: 840px) {
  .tc-case-company__layout {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
  }
}

/* 企業ロゴ
------------------------------------- */

.tc-case-company__image {
  aspect-ratio: 407 / 265;
  overflow: hidden;
  outline: solid 1px #878787;
}

@media screen and (max-width: 840px) {
  .tc-case-company__image {
    max-width: 500px;
    margin-inline: auto;
  }
}

.tc-case-company__image-file {
  object-fit: cover;
}

.tc-case-company__image-file[src=""] {
  display: none;
}

/* 企業情報
------------------------------------- */

.tc-case-company__content {
  min-width: 0;
}

.tc-case-company__data {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  margin: 0;
}

@media screen and (max-width: 840px) {
  .tc-case-company__data {
    grid-template-columns: 90px minmax(0, 1fr);
  }
}

.tc-case-company__term,
.tc-case-company__description {
  margin: 0;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-black);
  color: var(--color-black);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.9;
}

@media screen and (max-width: 840px) {
  .tc-case-company__term,
  .tc-case-company__description {
    padding: 18px 0;
    font-size: 14px;
    line-height: 1.8;
  }
}

.tc-case-company__term {
  padding-right: 24px;
}

@media screen and (max-width: 840px) {
  .tc-case-company__term {
    padding-right: 16px;
  }
}

.tc-case-company__description {
  overflow-wrap: anywhere;
}

.tc-case-company__term:first-child,
.tc-case-company__term:first-child + .tc-case-company__description {
  padding-top: 12px;
}
/* ============================================================================
現場の現状
============================================================================ */
.tc-case-situation {
  padding: 80px 0 100px;
  color: var(--color-black);
  background-color: var(--color-white-bg);
}

@media screen and (max-width: 840px) {
  .tc-case-situation {
    padding: 56px 0 72px;
  }
}

.tc-case-situation__inner {
  width: 100%;
}

/* 見出し
------------------------------------- */

.tc-case-situation .tc-case-section-title--small {
  margin: 0;
  color: var(--color-black);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

@media screen and (max-width: 840px) {
  .tc-case-situation .tc-case-section-title--small {
    font-size: 26px;
  }
}

/* リスト
------------------------------------- */

.tc-case-situation__list {
  display: flex;
  gap: 32px;
  margin: 60px 0 0;
  justify-content: center;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 840px) {
  .tc-case-situation__list {
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 48px;
    margin-top: 52px;
  }
}

/* 項目
------------------------------------- */

.tc-case-situation__item {
  position: relative;
  width: calc(100% / 3);
  min-height: 108px;
  margin: 0;
  padding: 24px 0 18px;
  border: 3px solid var(--color-black);
  color: var(--color-black);
  background-color: var(--color-white);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  outline: 2px solid #878787;
  box-shadow: 10px 10px 0px #000000;
}

@media screen and (max-width: 840px) {
  .tc-case-situation__item {
    min-height: 110px;
    padding: 26px 16px 20px;
    border-width: 2px;
    font-size: 17px;
    width: 100%;
  }
}

.tc-case-situation__item::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 46px;
  height: 46px;
  background: url("/_pack/img/renew/icon-check-circle-red.svg") center / contain
    no-repeat;
  content: "";
  transform: translate(-50%, -55%);
}

@media screen and (max-width: 840px) {
  .tc-case-situation__item::before {
    width: 42px;
    height: 42px;
  }
}

/* 強調文字
------------------------------------- */

.tc-case-situation__emphasis {
  color: var(--color-red);
}
/* ============================================================================
課題解決へのアプローチ
============================================================================ */

.tc-case-story__content {
  margin-block: 55px 150px;
}
.tc-case-story__content .wp-block-group {
  max-width: 1260px;
  margin-inline: auto;
}
.tc-case-story__content .wp-block-group + .wp-block-group {
  margin-block-start: 70px;
}

.tc-case-story__layout {
  align-items: flex-start;
}
@media screen and (max-width: 840px) {
  .tc-case-story__layout {
    flex-direction: column;
    padding-inline: 16px;
  }
}
.tc-case-story {
  counter-reset: tc-case-story-heading;
}
.tc-case-story__layout .wp-block-image {
  width: 50%;
  flex-shrink: 0;
}
@media screen and (max-width: 840px) {
  .tc-case-story__layout .wp-block-image {
    width: 100%;
    max-width: 500px;
  }
}

.tc-case-story__layout p {
  padding-inline-end: 34px;
  font-size: 16px;
  line-height: 2;
}
@media screen and (max-width: 840px) {
  .tc-case-story__layout p {
    padding-inline-end: 0;
  }
}

.tc-case-story__layout .has-vivid-green-cyan-color {
  color: #00b590 !important;
}

.tc-case-story__layout .has-vivid-cyan-blue-color {
  color: #2a66c5 !important;
}
.tc-case-story__layout .has-vivid-red-color {
  color: var(--color-red) !important;
}

/* 連番を01から開始 */
.tc-case-story__content {
  counter-reset: tc-case-story-heading;
}

/* 見出し */
.tc-case-story h2.wp-block-heading {
  counter-increment: tc-case-story-heading;
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 35px;
  color: var(--color-red);
  font-size: 25px;
  font-weight: 700;
  line-height: 2;
}

@media screen and (max-width: 840px) {
  .tc-case-story h2.wp-block-heading {
    gap: 10px;
    margin-bottom: 20px;
    font-size: 18px;
    padding-inline: 16px;
    line-height: 1.5;
  }
}
.tc-case-story .has-vivid-red-color {
  font-weight: 700;
}

/* 斜線＋01、02 */
.tc-case-story h2.wp-block-heading::before {
  content: counter(tc-case-story-heading, decimal-leading-zero);

  display: flex;
  flex-shrink: 0;
  align-items: center;

  min-height: 52px;
  padding-left: 44px;

  background-image: url("/_pack/img/renew/icon-slash-red.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;

  color: var(--color-red);
  font-size: 25px;
  font-family: var(--font-family-futura);
  font-weight: 700;
  line-height: 1;
}

@media screen and (max-width: 840px) {
  .tc-case-story h2.wp-block-heading::before {
    min-height: 34px;
    padding-left: 20px;
    background-size: 16px 34px;
    font-size: 16px;
  }
}

/* 横線 */
.tc-case-story h2.wp-block-heading::after {
  content: "";

  flex: 1;
  min-width: 30px;
  height: 1px;
  margin-left: 4px;

  background-color: var(--color-red);
}

/* 5個目から右寄せ */
@media screen and (min-width: 841px) {
  .tc-case-story__content
    > .wp-block-group:nth-of-type(n + 5)
    > .wp-block-group__inner-container
    > h2.wp-block-heading {
    display: grid;
    grid-template-columns: minmax(30px, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    text-align: right;
  }

  /* 斜線＋連番 */
  .tc-case-story__content
    > .wp-block-group:nth-of-type(n + 5)
    > .wp-block-group__inner-container
    > h2.wp-block-heading::before {
    grid-column: 2;
    grid-row: 1;
  }

  /* 左側へ伸びる横線 */
  .tc-case-story__content
    > .wp-block-group:nth-of-type(n + 5)
    > .wp-block-group__inner-container
    > h2.wp-block-heading::after {
    grid-column: 1;
    grid-row: 1;

    width: 100%;
    margin: 0 4px 0 0;
  }
}
/* ============================================================================
その問題を解決したのはこれ！
============================================================================ */
.tc-case-service-placement {
  background-color: var(--color-beige);
  padding-block-end: 100px;
  margin-block: clamp(60px, calc(8.57vw + 26.57px), 150px);
}
.tc-case-service-placement__inner {
  padding-block-start: 100px;
  position: relative;
}

.tc-case-service-placement__inner:before {
  position: absolute;
  top: -44px;
  left: -84px;
  z-index: 0;
  width: min(170px, 20vw);
  height: 274px;
  background: url(/_pack/img/renew/tc-case-service-placement-bg-01.webp) top
    right / contain no-repeat;
  content: "";
  pointer-events: none;
}
.tc-case-service-placement__head {
  background-color: var(--color-white);
  text-align: center;
}
.tc-case-service-placement__title {
  position: relative;
  align-items: center;
  justify-content: center;
  padding-block-end: 53px;
  display: flex;
  gap: 27px;
}
@media screen and (max-width: 840px) {
  .tc-case-service-placement__title {
    gap: 10px;
    padding-block-end: 30px;
  }
}
.tc-case-service-placement__title h2 {
  font-size: 30px;
  font-weight: 900;
  font-family: var(--font-family-zen);
  line-height: 1.5;
  letter-spacing: 0.1rem;
}

@media screen and (max-width: 840px) {
  .tc-case-service-placement__title h2 {
    font-size: 24px;
  }
}

.tc-case-service-placement__title h2 .tc-case-service-placement__title-small {
  font-size: 25px;
}
@media screen and (max-width: 840px) {
  .tc-case-service-placement__title h2 .tc-case-service-placement__title-small {
    font-size: 16px;
  }
}
.tc-case-service-placement__title h2 .tc-case-service-placement__title-accent {
  color: var(--color-red);
}

.tc-case-service-placement__title:after {
  content: "";
  width: 123px;
  height: 37px;
  background-color: var(--color-white);
  position: absolute;
  bottom: -35px;

  clip-path: polygon(50% 100%, 100% 0, 0 0);
  left: 50%;
  transform: translateX(-50%);
}

.tc-case-service-placement__decoration {
  display: block;
  max-width: 67px;
}

@media screen and (max-width: 840px) {
  .tc-case-service-placement__decoration {
    max-width: 37px;
  }
}

.tc-case-service-placement__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 840px) {
  .tc-case-service-placement__layout {
    display: block;
  }
}
.tc-case-service-about {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media screen and (max-width: 840px) {
  .tc-case-service-about {
    margin-block-start: 20px;
  }
}
.tc-case-service-about__logo {
  max-width: 370px;
}

.tc-case-service-about__target {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: flex-start;
}
@media screen and (max-width: 840px) {
  .tc-case-service-about__target {
    flex-direction: column;
    align-items: flex-start;
  }
}

.tc-case-service-about__target-label {
  color: var(--color-red);
  outline: solid 1px var(--color-red);
  font-size: 16px;
  background-color: var(--color-white);
  text-align: center;
  line-height: 1.5;
  padding-inline: 10px;
  padding-block: 2px;
}

.tc-case-service-about__target-list {
  display: flex;
  gap: 10px;
}
.tc-case-service-about__target-item {
  line-height: 1.5;
  font-size: 16px;
  font-weight: 700;
  position: relative;
}

.tc-case-service-about__target-item:before {
  content: "・";
  color: var(--color-red);
}

.tc-case-service-about__title {
  line-height: 1.5;
  font-size: 20px;
  font-weight: 700;
}

.tc-case-service-about__text {
  line-height: 1.5;
  font-size: 16px;
  font-weight: 500;
  margin-block: 30px;
}

.tc-case-service-about__link {
  margin-inline: auto;
}
.tc-case-service-placement__image {
  text-align: center;
  align-content: center;
}

.tc-case-service-placement__image .tc-case-service-placement__image-file {
  width: 80%;
  display: inline-block;
}
.tc-case-service-placement .tc-fce {
  background-color: var(--color-white);
  position: relative;
  margin-block-start: 56px;
}

.tc-case-service-placement .tc-fce:after {
  position: absolute;
  bottom: 48px;
  right: -134px;
  z-index: 0;
  width: min(273px, 20vw);
  height: 384px;
  background: url(/_pack/img/renew/tc-case-service-placement-bg-02.webp) bottom
    right / contain no-repeat;
  content: "";
  pointer-events: none;
}

.tc-case-service-placement .tc-fce__inner {
  display: flex;
  gap: 55px;
  align-items: center;
  justify-content: center;
  padding-block: 42px;
}
@media screen and (max-width: 840px) {
  .tc-case-service-placement .tc-fce__inner {
    flex-direction: column;
    padding-inline: 16px;
  }
}
.tc-case-service-placement .tc-fce-logo {
  min-width: 250px;
  flex-shrink: 0;
  text-align: center;
}

.tc-fce-logo__label {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.1rem;
  color: #9f9f9f;
  margin-block-end: 15px;
  text-align: center;
}

.tc-fce__label {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.1rem;
}
@media screen and (max-width: 840px) {
  .tc-fce__label {
    text-align: center;
  }
}

.tc-fce__text {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.1rem;
  margin-block: 15px 25px;
}

.tc-fce__link {
  color: var(--color-white);
  background-color: var(--color-red);
  text-align: center;
  display: inline-block;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  padding-inline: 15px;
  padding-block: 4px;
  transition: 0.3s ease;
  letter-spacing: 0.1rem;
}
@media screen and (max-width: 840px) {
  .tc-fce__link {
    display: block;
  }
}
.tc-fce__link:hover {
  opacity: 0.5;
}

.tc-fce__content {
  max-width: 607px;
  text-align: left;
}
/* ============================================================================
解決へのプロセス
============================================================================ */
/* =====================================
   Case Study - Solution Process
===================================== */

.tc-case-solution {
  margin-block: 150px;
  position: relative;
  padding: 94px 40px 160px;
  outline: 1px solid var(--color-black);
  background-color: var(--color-gray);
}

@media screen and (max-width: 840px) {
  .tc-case-solution {
    padding: 64px 16px 96px;
  }
}

.tc-case-solution__border {
  border-bottom: solid 1px #000;
}

.tc-case-solution::after {
  position: absolute;
  bottom: -31px;
  left: 50%;
  width: 58px;
  height: 31px;
  background-color: var(--color-black);
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  content: "";
  transform: translateX(-50%);
}

@media screen and (max-width: 840px) {
  .tc-case-solution::after {
    bottom: -22px;
    width: 42px;
    height: 22px;
  }
}

.tc-case-solution__inner {
  width: min(100%, 1140px);
  margin-inline: auto;
}

/* 見出し
------------------------------------- */

.tc-case-solution .tc-case-section-label {
  margin: 0;
  color: var(--color-black);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

@media screen and (max-width: 840px) {
  .tc-case-solution .tc-case-section-label {
    font-size: 12px;
  }
}

.tc-case-solution__title {
  margin: 26px 0 0;
  color: var(--color-red);
  font-family: var(--font-family-zen);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

@media screen and (max-width: 840px) {
  .tc-case-solution__title {
    margin-top: 16px;
    font-size: 28px;
  }
}

.tc-case-solution .tc-case-section-lead {
  margin: 30px 0 0;
  color: var(--color-black);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

@media screen and (max-width: 840px) {
  .tc-case-solution .tc-case-section-lead {
    margin-top: 24px;
    font-size: 15px;
  }
}

/* カードレイアウト
------------------------------------- */

.tc-case-solution__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  margin-top: 86px;
}

@media screen and (max-width: 840px) {
  .tc-case-solution__layout {
    grid-template-columns: 1fr;
    gap: 58px;
    margin-top: 64px;
  }
}

/* カード
------------------------------------- */

.tc-case-solution-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 80px 46px 36px;
  background-color: var(--color-white);
  border: 2px solid #878787;
  box-shadow: 4px 7px 0px #000000;
}

@media screen and (max-width: 840px) {
  .tc-case-solution-item {
    padding: 64px 20px 28px;
    border-width: 1px;
  }
}

/* BEFORE・AFTERラベル */
.tc-case-solution-item::before {
  position: absolute;
  top: 14px;
  left: -22px;
  display: flex;
  align-items: center;
  width: 122px;
  height: 42px;
  padding: 0 24px;
  clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

@media screen and (max-width: 840px) {
  .tc-case-solution-item::before {
    top: 12px;
    left: -10px;
    width: 108px;
    height: 38px;
    padding-inline: 18px;
    font-size: 15px;
  }
}

.tc-case-solution-item--before::before {
  background-color: var(--color-black);
  content: "BEFORE";
}

.tc-case-solution-item--after::before {
  background-color: var(--color-red);
  content: "AFTER";
}

/* カード見出し
------------------------------------- */

.tc-case-solution-item__title {
  align-self: center;
  margin: 0;
  padding: 0 10px 5px;
  border-bottom: 1px solid currentColor;
  color: var(--color-black);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

@media screen and (max-width: 840px) {
  .tc-case-solution-item__title {
    padding-inline: 0;
    font-size: 17px;
  }
}

.tc-case-solution-item--after .tc-case-solution-item__title {
  color: var(--color-red);
}

/* カード画像
------------------------------------- */

.tc-case-solution-item__image {
  display: block;
  width: 100%;
  height: 205px;
  margin: 14px auto 20px;
  object-fit: contain;
}

@media screen and (max-width: 840px) {
  .tc-case-solution-item__image {
    height: auto;
    max-height: 190px;
    margin: 18px auto 22px;
  }
}

.tc-case-solution-item__image[src=""] {
  visibility: hidden;
}

/* 本文
------------------------------------- */

.tc-case-solution-item__text {
  margin: 0;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.85;
  text-align: left;
}

@media screen and (max-width: 840px) {
  .tc-case-solution-item__text {
    font-size: 14px;
    line-height: 1.8;
  }
}
/* ============================================================================
この組織課題解決をお手伝いできること
============================================================================ */
.tc-case-support {
  padding: 96px 0 120px;
  color: var(--color-black);
  background-color: var(--color-white-bg);
}

@media screen and (max-width: 840px) {
  .tc-case-support {
    padding: 64px 0 80px;
  }
}

.tc-case-support__inner {
  width: 100%;
}

/* 見出し
------------------------------------- */

.tc-case-support .tc-case-section-label {
  margin: 0;
  color: var(--color-black);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

@media screen and (max-width: 840px) {
  .tc-case-support .tc-case-section-label {
    font-size: 12px;
  }
}

.tc-case-support__title {
  margin: 24px 0 0;
  color: var(--color-red);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  font-family: var(--font-family-zen);
}

@media screen and (max-width: 840px) {
  .tc-case-support__title {
    margin-top: 16px;
    font-size: 27px;
  }
}

.tc-case-support .tc-case-section-lead {
  max-width: 760px;
  margin: 28px auto 0;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
  text-align: center;
}

@media screen and (max-width: 840px) {
  .tc-case-support .tc-case-section-lead {
    margin-top: 22px;
    font-size: 14px;
    text-align: left;
  }
}

/* サービス一覧
------------------------------------- */

.tc-case-support-service {
  margin: 70px 0 0;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 840px) {
  .tc-case-support-service {
    margin-top: 52px;
  }
}

.tc-case-support-service__item {
  margin: 0;
}

.tc-case-support-service__item + .tc-case-support-service__item {
  margin-top: 64px;
}

@media screen and (max-width: 840px) {
  .tc-case-support-service__item + .tc-case-support-service__item {
    margin-top: 52px;
  }
}

/* カテゴリ見出し
------------------------------------- */

.tc-case-support-service__title {
  position: relative;
  padding-left: 28px;
  color: var(--color-red);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.5;
}

@media screen and (max-width: 840px) {
  .tc-case-support-service__title {
    padding-left: 22px;
    font-size: 18px;
  }
}

.tc-case-support-service__title::before {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 12px;
  height: 12px;
  border-top: 4px solid var(--color-black);
  border-right: 4px solid var(--color-black);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

@media screen and (max-width: 840px) {
  .tc-case-support-service__title::before {
    left: 2px;
    width: 10px;
    height: 10px;
    border-width: 3px;
  }
}

.tc-case-support-service__title:after {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background-color: #000;
  position: absolute;
  bottom: -15px;
  left: 0;
}

/* カード一覧
------------------------------------- */

.tc-case-support-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-block-start: 81px;
}

@media screen and (max-width: 840px) {
  .tc-case-support-card {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* カード
------------------------------------- */

.tc-case-support-card__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  border: 2px solid var(--color-black);
  background-color: var(--color-white);
  cursor: pointer;
  transition: 0.3s ease;
  border: 2px solid #878787;
  box-shadow: 4px 7px 0px #000000;
}
.tc-case-support-card__item:hover {
  transform: translateY(-20px);
}

.tc-case-support-card__item a {
  padding: 28px 27px 34px;
}

@media screen and (max-width: 840px) {
  .tc-case-support-card__item {
    padding: 20px 20px 26px;
    border-width: 1px;
  }
}

/* カード画像
------------------------------------- */

.tc-case-support-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 270 / 143;
  height: auto;
  background-color: var(--color-gray);
  object-fit: cover;
}

.tc-case-support-card__image[src=""] {
  color: transparent;
}

/* カードラベル
------------------------------------- */

.tc-case-support-card__label {
  align-self: flex-start;
  margin: 12px 0 0;
  padding: 4px 7px;
  color: var(--color-black);
  background-color: var(--color-gray);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  display: inline-block;
}

@media screen and (max-width: 840px) {
  .tc-case-support-card__label {
    font-size: 13px;
  }
}

/* カード本文
------------------------------------- */

.tc-case-support-card__text {
  margin: 16px 0 0;
  color: var(--color-black);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}

@media screen and (max-width: 840px) {
  .tc-case-support-card__text {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.7;
  }
}