#mainContents {
  font-family: "Noto Sans JP", sans-serif;
}

@media screen and (min-width: 769px) {
  #mainContents .sp-only {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {

  #mainContents .pc-only {
    display: none !important;
  }
}

.Case_Detail_HeroVisual {
  position: relative;
  display: grid;
  place-items: center;
  background: linear-gradient(45deg, #ffffff 0%, #e5f3fd 100%);
  aspect-ratio: 1366 / 210;
}

.Case_Detail_HeroVisual::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(9.938rem, 4.663rem + 22.5vw, 23.875rem);
  height: 100%;
  background: url(../img/header_detail.webp) no-repeat top left / contain;
}

.Case_Detail_HeroVisual_Title {
  position: relative;
  display: grid;
  align-items: center;
  gap: 14px;
  color: #0041C0;
  text-align: center;
}

.Case_Detail_HeroVisual_Title em {
  font-size: clamp(1.375rem, 0.902rem + 2.02vw, 2.625rem);
  font-style: normal;
  line-height: 1.45454545;
}

.Case_Detail_HeroVisual_Title span {
  font-size: clamp(0.875rem, 0.78rem + 0.4vw, 1.125rem);
}

.Case_Detail_Inner {
  width: calc(100% - 40px);
  max-width: 840px;
  margin-inline: auto;
}

.Case_Detail_Outline {
  display: grid;
  grid-template: auto / clamp(5.688rem, 4.694rem + 4.24vw, 8.313rem) 1fr;
  margin-block-start: 40px;
}

.Case_Detail_Outline dt,
.Case_Detail_Outline dd {
  padding-block: 22px 20px;
  border-top: 1px solid #CCCCCC;
  font-size: clamp(0.875rem, 0.78rem + 0.4vw, 1.125rem);
  line-height: 1.75;
}

.Case_Detail_Outline dt:last-of-type,
.Case_Detail_Outline dd:last-of-type {
  border-bottom: 1px solid #CCCCCC;
}

.Case_Detail_Outline dt {
  color: #0041C0;
  padding-inline: 10px clamp(1.5rem, 0.885rem + 2.62vw, 3.125rem);
  font-weight: 700;
}

.Case_Detail_Summary {
  display: grid;
  gap: 12px;
  margin-block-start: 40px;
}

.Case_Detail_Summary_Main {
  font-size: clamp(1.125rem, 1.078rem + 0.2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.6;
}

.Case_Detail_Summary_Sub {
  font-size: 16px;
  line-height: 2;
}

.Case_Detail_Images {
  margin-block-start: 40px;
}

.Case_Detail_Images_List {
  display: flex;
  gap: 10px;
}

.Case_Detail_Images_List+.Case_Detail_Images_List {
  margin-block-start: 10px;
}

.Case_Detail_Images_Item {
  flex: 1 1 0;
}

.Case_Detail_Images_Item img {
  max-width: 100%;
  height: auto;
}

.Case_Detail_Contact {
  display: grid;
  margin-block-start: 80px;
  padding-block: 60px;
  background: linear-gradient(135deg, #017cda 0%, #0040c0 42%, #0f4fa6 100%);
}

.Case_Detail_Contact_Txt {
  color: #ffffff;
  font-size: clamp(1rem, 0.858rem + 0.61vw, 1.375rem);
  letter-spacing: .05em;
  line-height: 1.45454545;
  text-align: center;
}

.Case_Detail_Contact_Btn {
  margin-block-start: 19px;
  text-align: center;
}

.Case_Detail_Contact_Btn a {
  position: relative;
  display: inline-block;
  border: 1px solid #ffffff;
  color: #0041c0;
  padding: 1.25em clamp(4.375rem, 2.719rem + 7.06vw, 8.75rem);
  min-width: 300px;
  border-radius: 2em;
  background: #fff;
  background-size: .5em;
  margin: 0 auto;
  font-size: clamp(1rem, 0.811rem + 0.81vw, 1.5rem);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.4;
}

.Case_Detail_Contact_Btn a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: clamp(1.25rem, 1.013rem + 1.01vw, 1.875rem);
  transform: translateY(-50%);
  display: block;
  width: .5em;
  height: .5em;
  background: #0041C0;
  mask: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20fill%3D%22%23fff%22%20stroke%3D%22%23707070%22%20d%3D%22M0%200h12v12H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22%230041c0%22%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20d%3D%22M11.334%205.999a.67.67%200%200%201-.195.472l-5.334%205.334a.667.667%200%200%201-.938-.943l5.329-5.329a.667.667%200%200%201%201.137.471Z%22%2F%3E%3Cpath%20d%3D%22M11.334%205.999a.666.666%200%200%201-1.137.472l-5.33-5.334a.667.667%200%201%201%20.938-.938l5.334%205.329a.67.67%200%200%201%20.195.471%22%2F%3E%3Cpath%20d%3D%22M9.334%206.666H.667a.667.667%200%200%201%200-1.333h8.667a.667.667%200%200%201%200%201.333%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat right center / contain;
}

.Case_Detail_Contact_Btn a:hover {
  background: #0041C0;
  color: #ffffff;
  opacity: 1;
}

.Case_Detail_Contact_Btn a:hover::after {
  background: #ffffff;
}

.Case_Detail_Back {
  padding-block: 80px;
}

.Case_Detail_Back_Btn {
  display: block;
  max-width: 340px;
  width: 100%;
  margin-inline: auto;
  padding-block: 11px;
  color: #383B40;
  border: 1px solid #666666;
  font-size: 16px;
  line-height: 2;
  text-align: center;
}

#mainContents+.l-breadcrumbs {
  margin-block-start: 0;
}


@media screen and (max-width: 768px) {

  .Case_Detail_HeroVisual {
    aspect-ratio: 375 / 150;
  }

  .Case_Detail_HeroVisual::before {
    background-image: url(../img/header_detail_sp.webp);
  }

  .Case_Detail_HeroVisual_Title {
    gap: 5px;
  }

  .Case_Detail_Outline {
    margin-block-start: 20px;
  }

  .Case_Detail_Outline dt,
  .Case_Detail_Outline dd {
    padding-block: 14px 16px;
  }

  .Case_Detail_Summary {
    margin-block-start: 32px;
  }

  .Case_Detail_Summary_Main {
    line-height: 1.77777778;
  }

  .Case_Detail_Summary_Sub {
    line-height: 1.6875;
  }

  .Case_Detail_Images {
    margin-block-start: 30px;
  }

  .Case_Detail_Images_List {
    gap: 4px;
  }

  .Case_Detail_Images_List+.Case_Detail_Images_List {
    margin-block-start: 4px;
  }

  .Case_Detail_Contact {
    margin-block-start: 40px;
    padding-block: 30px 40px;
  }

  .Case_Detail_Contact_Txt {
    line-height: 1.6875;
  }

  .Case_Detail_Contact_Btn {
    margin-block-start: 16px;
  }

  .Case_Detail_Back {
    padding-block: 70px 60px;
  }
}