@charset "UTF-8";

.message-section {
  display: flex;
  justify-content: space-between;
  gap: 10vw;
}
.message-section .message-content {
  margin-left: auto;
  margin-top: 96px;
}
.message-title {
  position: relative;
  font-size: 2.25rem;
  line-height: 1.6;
  color: var(--color-primary);
  width: fit-content;
}
.message-title::after {
  content: '';
  display: block;
  width: calc(100% + 64px);
  height: 28px;
  margin-top: 8px;
  margin-left: -32px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'><path d='M2,4 Q100,30 198,4' fill='none' stroke='black' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'><path d='M2,4 Q100,30 198,4' fill='none' stroke='black' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>") no-repeat center / 100% 100%;
}
.message-imgae {
  position: relative;
  overflow: hidden;
  width: calc(50vw - 180px);
  height: 800px;
}

.message-imgae .pan-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 115%; 
  object-fit: cover;
  opacity: 0;
  will-change: transform, opacity;
}
.mt-message-section {
  position: relative;
  margin-top: 200px;
}
.mt-message-section::before {
  content: '';
  position: absolute;
  left: -60px;
  top: -320px;
  display: block;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 600 / 314;
  background: url(/common/img/home/bg_03.svg) no-repeat left center / contain;
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  .message-imgae .pan-img {
    animation: none !important;
    transition: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .message-section .message-content {
    margin-left: 40px;
    max-width: 43vw;
  }
  .message-title {
    font-size: 3vw;
  }
  .message-title::after {
    width: 100%;
    height: 18px;
    margin: 12px 0 0;
  }
  .message-imgae {
    width: 42vw;
  }
  .mt-message-section::before {
    top: -240px;
    max-width: 580px;
  }
}
@media (max-width: 767px) {
  .message-title-wrap {
    display: grid;
    grid-template-columns: 7fr 3fr;
    align-items: center;
    background: var(--color-primary);
    margin-left: -16px;
    margin-right: -16px;
  }
  .message-title {
    color: var(--color-white);
    font-size: 4vw;
    padding: 24px 8px;
    margin: 0 auto;
  }
  .message-title::after {
    width: 100%;
    height: 18px;
    margin: 0;
  }
  .message-imgae-sp {
    width: 100%;
    height: 100%;  
  }
  .message-imgae-sp img{
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .default-content-base:has(.mt-message-section) {
    overflow: hidden;
  }
  .message-section .message-content {
    margin: 16px auto;
    width: 100%;
    padding: 0 16px;
    margin-bottom: 0;
  }
  .message-lead-wrap {
    max-width: 500px;
    margin: 0 auto;
  }
  .mt-message-section::before {
    left: 50%;
    top: -185px;
    width: 420px;
    max-width: none;
    transform: translateX(-50%);
  } 
}
@media (max-width: 480px) {
  .message-title-wrap {
    display: grid;
    grid-template-columns: 6fr 4fr;
  }
  .message-title {
    font-size: 6vw;
    padding: 24px 8px 24px 0;
  }
}