@charset "UTF-8";

/* ======================================================
 * company-service-image
====================================================== */

/* common.css は Noto Sans JP 400/700 のみ読込のため、本LPで使う 500/800/900 を追加読込 */
@import 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;800;900&display=swap';

/* ----- 変数 ----- */
:root {
  --company-service-image-color-heading: #002c45;
  --company-service-image-color-text: #333333;
  --company-service-image-color-text-sub: #666666;
  --company-service-image-color-accent: #dae000;
  --company-service-image-color-accent-pale: #f1f39c;
  --company-service-image-color-accent-light: #eef084;
  --company-service-image-color-bg-light: #e7edf3;
  --company-service-image-color-border: #dddddd;
  --company-service-image-kv-grad-from: #dae005;
  --company-service-image-kv-grad-to: rgb(218 224 5 / 0.8);
  --company-service-image-main-grad-from: rgb(218 224 0 / 0.3);
  --company-service-image-main-grad-to: rgb(255 255 255 / 0.3);
  --company-service-image-icon-blank: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6.857,32.857A.857.857,0,0,1,7.714,32h3.4a.878.878,0,0,1,.351.065,1.235,1.235,0,0,1,.279.184s0,0,0,0a.966.966,0,0,1,.249.6v3.431a.857.857,0,1,1-1.714,0V34.928L5.748,39.463a.856.856,0,0,1-1.211-1.211l4.535-4.537H7.714a.857.857,0,0,1-.857-.857ZM0,34.571a1.714,1.714,0,0,1,1.714-1.714H4.286a.857.857,0,0,1,0,1.714H1.714v7.714H9.429V39.714a.857.857,0,1,1,1.714,0v2.571A1.716,1.716,0,0,1,9.429,44H1.714A1.715,1.715,0,0,1,0,42.286Z" transform="translate(0 -32)" fill="white"/></svg>');
  --company-service-image-icon-blank-hover: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6.857,32.857A.857.857,0,0,1,7.714,32h3.4a.878.878,0,0,1,.351.065,1.235,1.235,0,0,1,.279.184s0,0,0,0a.966.966,0,0,1,.249.6v3.431a.857.857,0,1,1-1.714,0V34.928L5.748,39.463a.856.856,0,0,1-1.211-1.211l4.535-4.537H7.714a.857.857,0,0,1-.857-.857ZM0,34.571a1.714,1.714,0,0,1,1.714-1.714H4.286a.857.857,0,0,1,0,1.714H1.714v7.714H9.429V39.714a.857.857,0,1,1,1.714,0v2.571A1.716,1.716,0,0,1,9.429,44H1.714A1.715,1.715,0,0,1,0,42.286Z" transform="translate(0 -32)" fill="%23002c45"/></svg>');
}

/* ----- company-service-image-main ----- */
.company-service-image-main,
.company-service-image-main *,
.company-service-image-main *::before,
.company-service-image-main *::after {
  box-sizing: border-box;
}
.company-service-image-main {
  position: relative;
}
.company-service-image-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 1042px;
  background-image: linear-gradient(var(--company-service-image-main-grad-from), var(--company-service-image-main-grad-to));
}
@media (max-width: 767px) {
  .company-service-image-main::before {
    height: 793px;
  }
}

/* ----- company-service-image-visually-hidden ----- */
.company-service-image-visually-hidden {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ----- company-service-image-container ----- */
.company-service-image-container {
  margin: 0 auto;
  padding: 0 30px;
  max-width: calc(1200px + 30px * 2);
}
.company-service-image-container > *:first-child {
  margin-top: 0;
}
@media (min-width: 961px) {
  .company-service-image-container {
    margin-top: 47px;
  }
}
@media (max-width: 767px) {
  .company-service-image-container {
    padding: 0 15px;
  }
}

/* ----- company-service-image-text ----- */
.company-service-image-text,
.company-service-image-business__text {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--company-service-image-color-text);
}
@media (max-width: 767px) {
  .company-service-image-text,
  .company-service-image-business__text {
    margin-top: 14px;
    font-size: 14px;
  }
}

/* ----- company-service-image-kv ----- */
.company-service-image-kv__movie {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 0 0 0 30px;
}
.company-service-image-kv__movie iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.company-service-image-kv__contents {
  position: relative;
  z-index: 1;
  background-image: linear-gradient(to right, var(--company-service-image-kv-grad-from), var(--company-service-image-kv-grad-to));
}
.company-service-image-kv__lead {
  margin: 0;
  font-size: calc(34px + 8 * (100vw - 1260px) / 660);
  font-weight: 900;
  line-height: 1.4;
  color: var(--company-service-image-color-heading);
}
.company-service-image-kv__lead-v2 {
  margin: 30px 0 0;
  font-size: calc(23px + 5 * (100vw - 1260px) / 660);
  font-weight: 900;
  line-height: 1.4;
  color: var(--company-service-image-color-text);
}
.company-service-image-kv__text {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--company-service-image-color-text);
}
/* --- PC --- */
@media (min-width: 768px) {
  .company-service-image-kv__text {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}
@media (min-width: 961px) {
  .company-service-image-kv {
    display: grid;
  }
  .company-service-image-kv__movie {
    grid-area: 1 / 1;
    justify-self: end;
    align-self: start;
    width: calc(760px + 440 * (100vw - 1260px) / 660);
  }
  .company-service-image-kv__contents {
    grid-area: 1 / 1;
    justify-self: start;
    align-self: center;
    top: calc(7px - 8 * (100vw - 1260px) / 660);
    width: calc(560px + 220 * (100vw - 1260px) / 660);
    padding-block: calc(30px + 30 * (100vw - 1260px) / 660);
    padding-right: calc(80px + 20 * (100vw - 1260px) / 660);
    padding-left: max(30px, calc(30px + 70 * (100vw - 1260px) / 660));
    border-radius: 0 999px 999px 0;
  }
}
@media (max-width: 1259px) {
  .company-service-image-kv__lead {
    font-size: calc(28px + 6 * (100vw - 961px) / 460);
  }
}
@media (max-width: 960px) {
  .company-service-image-kv + .company-service-image-container {
    margin-top: 30px;
  }
  .company-service-image-kv__movie {
    border-radius: 0;
    z-index: 2;
  }
  .company-service-image-kv__contents {
    margin-top: -50px;
    padding: 70px 15px 30px;
    border-radius: 0 0 60px 0;
  }
}
/* --- SP --- */
@media (max-width: 767px) {
  .company-service-image-kv__lead {
    font-size: 24px;
  }
  .company-service-image-kv__lead-v2 {
    margin-top: 15px;
    font-size: 20px;
  }
  .company-service-image-kv__text {
    margin-top: 14px;
    font-size: 15px;
  }
}

/* ----- company-service-image-figure ----- */
.company-service-image-figure {
  display: flex;
  margin: 40px 0 0;
}
.company-service-image-figure__inner {
  width: 100%;
  margin: 0;
}
.company-service-image-figure__frame {
  display: inline-block;
  width: 100%;
}
.company-service-image-figure__frame img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .company-service-image-figure {
    margin-top: 20px;
  }
}

/* ----- company-service-image-business ----- */
.company-service-image-business {
  --company-service-image-business-card-height: 300px;
  --company-service-image-business-card-stop: 70%;
  margin-top: 55px;
}
.company-service-image-business + .company-service-image-business {
  margin-top: 60px;
}
.company-service-image-business:first-of-type {
  --company-service-image-business-card-height: 500px;
  --company-service-image-business-card-stop: 80%;
}
.company-service-image-business__heading__image {
  z-index: 1;
}
.company-service-image-business__heading__image img {
  display: block;
  max-width: 100%;
  height: auto;
}
.company-service-image-business__heading__title {
  margin: 0;
  padding: 30px 0;
  font-size: 50px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: var(--company-service-image-color-heading);
}
.company-service-image-business__heading[data-image="right"] .company-service-image-business__heading__title {
  border-radius: 999px 0 0 999px;
}
.company-service-image-business__heading[data-image="left"] .company-service-image-business__heading__title {
  border-radius: 0 999px 999px 0;
}
.company-service-image-business__body {
  position: relative;
}
.company-service-image-business__body::before {
  content: "";
  position: absolute;
  z-index: -1;
  height: var(--company-service-image-business-card-height);
  background-image: linear-gradient(var(--company-service-image-color-bg-light), rgb(231 237 243 / 0) var(--company-service-image-business-card-stop));
}
.company-service-image-business__lead {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--company-service-image-color-heading);
}
.company-service-image-business__media {
  display: flex;
}
.company-service-image-business__media__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
}
.company-service-image-business__video-wrap {
  display: flex;
  justify-content: center;
  margin: 34px 0 0;
}
.company-service-image-business__video {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 30px;
}
.company-service-image-business__video > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/* --- PC --- */
@media (min-width: 961px) {
  .company-service-image-business__heading {
    display: grid;
    min-height: 220px;
  }
  .company-service-image-business__heading__image {
    grid-area: 1 / 1;
    justify-self: start;
    align-self: start;
    max-width: calc(100% - 490px);
  }
  .company-service-image-business__heading[data-image="right"] .company-service-image-business__heading__image {
    justify-self: end;
  }
  .company-service-image-business__heading__title {
    grid-area: 1 / 1;
    align-self: center;
    display: grid;
    grid-template-columns: 450px;
  }
  .company-service-image-business__heading[data-image="right"] .company-service-image-business__heading__title {
    justify-content: start;
    padding-left: 40px;
    background-image: linear-gradient(to left, rgb(255 255 255 / 0), var(--company-service-image-color-accent-pale) 50%, var(--company-service-image-color-accent));
  }
  .company-service-image-business__heading[data-image="left"] .company-service-image-business__heading__title {
    justify-content: end;
    padding-right: 40px;
    background-image: linear-gradient(to right, rgb(255 255 255 / 0), var(--company-service-image-color-accent-pale) 50%, var(--company-service-image-color-accent));
  }
  .company-service-image-business__body {
    margin-top: -60px;
    padding: 40px 40px 0;
  }
  .company-service-image-business__body::before {
    top: -51px;
    right: -30px;
    left: -30px;
    border-radius: 40px 40px 0 0;
  }
  .company-service-image-business__media {
    align-items: flex-start;
    gap: 36px;
  }
  .company-service-image-business__media[data-image="left"] {
    flex-direction: row-reverse;
  }
  .company-service-image-business__media__content {
    flex: 1;
    padding-top: 40px;
  }
  .company-service-image-business__media__image {
    flex: 0 0 450px;
  }
}
@media (max-width: 960px) {
  .company-service-image-business__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .company-service-image-business__heading[data-image="right"] .company-service-image-business__heading__image {
    position: relative;
    left: 7px;
  }
  .company-service-image-business__heading__title {
    align-self: stretch;
    margin-top: -10px;
  }
  .company-service-image-business__heading[data-image="right"] .company-service-image-business__heading__title {
    margin-right: -30px;
    margin-left: 15px;
    background-image: linear-gradient(to left, var(--company-service-image-color-accent-light), var(--company-service-image-color-accent));
  }
  .company-service-image-business__heading[data-image="left"] .company-service-image-business__heading__title {
    margin-left: -30px;
    background-image: linear-gradient(to right, var(--company-service-image-color-accent-light), var(--company-service-image-color-accent));
  }
  .company-service-image-business__body {
    padding: 40px 40px 0;
  }
  .company-service-image-business__body::before {
    top: -55px;
    right: -30px;
    left: -30px;
    border-radius: 40px 40px 0 0;
  }
  .company-service-image-business__media {
    flex-direction: column;
  }
  .company-service-image-business__media__image {
    margin-top: 28px;
  }
}
/* --- SP --- */
@media (max-width: 767px) {
  .company-service-image-figure + .company-service-image-business {
    margin-top: 36px;
  }
  .company-service-image-business,
  .company-service-image-business:first-of-type {
    --company-service-image-business-card-height: 400px;
    --company-service-image-business-card-stop: 80%;
  }
  .company-service-image-business__heading__image {
    width: 280px;
  }
  .company-service-image-business__heading__title {
    padding: 15px 0;
    font-size: 30px;
  }
  .company-service-image-business__heading[data-image="right"] .company-service-image-business__heading__title {
    margin-right: -15px;
  }
  .company-service-image-business__heading[data-image="left"] .company-service-image-business__heading__title {
    margin-left: -15px;
  }
  .company-service-image-business__body {
    padding: 30px 0 0;
  }
  .company-service-image-business__body::before {
    top: -30px;
    right: -15px;
    left: -15px;
    border-radius: 20px 20px 0 0;
  }
  .company-service-image-business__lead {
    font-size: 18px;
  }
  .company-service-image-business__media__image img {
    border-radius: 15px;
  }
  .company-service-image-business__video-wrap {
    margin-top: 28px;
  }
  .company-service-image-business__video {
    border-radius: 15px;
  }
}

/* ----- company-service-image-section-column ----- */
.company-service-image-section-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin: 80px 0 0;
}
@media (max-width: 960px) {
  .company-service-image-section-column {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}
/* --- SP --- */
@media (max-width: 767px) {
  .company-service-image-section-column {
    margin-top: 60px;
  }
}

/* ----- company-service-image-heading2 ----- */
.company-service-image-heading2 {
  padding-top: 26px;
  border-top: 4px solid var(--company-service-image-color-heading);
}
.company-service-image-heading2__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--company-service-image-color-heading);
}
/* --- SP --- */
@media (max-width: 767px) {
  .company-service-image-heading2 {
    padding-top: 18px;
  }
  .company-service-image-heading2__title {
    font-size: 22px;
  }
}

/* ----- company-service-image-inquiry ----- */
.company-service-image-inquiry {
  margin-top: 76px;
  overflow: hidden;
  border: 1px solid var(--company-service-image-color-border);
  border-radius: 30px;
  background-color: #ffffff;
}
.company-service-image-inquiry__head {
  padding: 26px 29px;
  background-color: var(--company-service-image-color-bg-light);
}
.company-service-image-inquiry__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--company-service-image-color-text);
}
.company-service-image-inquiry__body {
  padding: 26px 29px 27px;
}
.company-service-image-inquiry__body > :first-child {
  margin-top: 0!important;
}
.company-service-image-inquiry__block__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--company-service-image-color-text);
}
.company-service-image-inquiry__button {
  display: flex;
  justify-content: center;
  margin: 16px 0 0;
}
.company-service-image-inquiry__button > [class*="__type"] {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--company-service-image-color-heading);
  border-radius: 999px;
  background-color: var(--company-service-image-color-heading);
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}
.company-service-image-inquiry__button__label {
  display: block;
  width: 100%;
  text-align: center;
}
.company-service-image-inquiry__button__type--blank .company-service-image-inquiry__button__label {
  padding-right: 24px;
  background-image: var(--company-service-image-icon-blank);
  background-repeat: no-repeat;
  background-position: center right;
}
.company-service-image-inquiry__text {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  color: var(--company-service-image-color-text);
}
/* --- PC --- */
@media (min-width: 768px) {
  .company-service-image-inquiry__button > [class*="__type"] {
    min-width: 552px;
    min-height: 62px;
    padding: 5px 22px;
  }
}
/* --- SP --- */
@media (max-width: 767px) {
  .company-service-image-inquiry {
    margin-top: 55px;
    border-radius: 15px;
  }
  .company-service-image-inquiry__head {
    padding: 17px 20px;
  }
  .company-service-image-inquiry__title {
    font-size: 17px;
  }
  .company-service-image-inquiry__body {
    padding: 17px 20px;
  }
  .company-service-image-inquiry__button {
    margin-top: 14px;
  }
  .company-service-image-inquiry__button > [class*="__type"] {
    width: 100%;
    min-height: 52px;
    padding: 5px 20px;
    font-size: 16px;
  }
  .company-service-image-inquiry__button__type--blank .company-service-image-inquiry__button__label {
    padding-right: 22px;
  }
  .company-service-image-inquiry__text {
    margin-top: 14px;
    font-size: 14px;
  }
}
/* --- hover --- */
@media (any-hover: hover) {
  .company-service-image-inquiry__button > [class*="__type"]:hover {
    background-color: #ffffff;
    color: var(--company-service-image-color-heading);
  }
  .company-service-image-inquiry__button__type--blank:hover .company-service-image-inquiry__button__label {
    background-image: var(--company-service-image-icon-blank-hover);
  }
}

/* ----- company-service-image-group ----- */
.company-service-image-group {
  margin-top: 60px;
  border-top: 2px solid var(--company-service-image-color-heading);
  padding: 38px 0 40px;
}
.company-service-image-group__inner {
  margin: 0 auto;
  padding: 0 30px;
  max-width: calc(1200px + 30px * 2);
}
.company-service-image-group__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--company-service-image-color-heading);
}
.company-service-image-group__lead {
  margin: 12px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--company-service-image-color-text);
}
.company-service-image-group__text {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  color: var(--company-service-image-color-text);
}
.company-service-image-group__logos {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.company-service-image-group__logos > li {
  display: flex;
  line-height: 1;
}
.company-service-image-group__logo {
  display: inline-block;
  transition: opacity 0.3s;
}
.company-service-image-group__logo img {
  display: block;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
/* --- PC --- */
@media (min-width: 961px) {
  .company-service-image-group__logos {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 30px;
  }
}
@media (max-width: 1259px) {
  .company-service-image-group__logos {
    justify-content: center;
  }
}
@media (max-width: 960px) {
  .company-service-image-group__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 35px;
  }
  .company-service-image-group__logos > li {
    width: calc((100% - 35px) / 2);
  }
}
/* --- SP --- */
@media (max-width: 767px) {
  .company-service-image-group {
    margin-top: 40px;
    padding-top: 28px;
  }
  .company-service-image-group__inner {
    padding: 0 15px;
  }
  .company-service-image-group__title {
    font-size: 18px;
    text-align: left;
  }
  .company-service-image-group__lead {
    font-size: 16px;
    text-align: left;
  }
  .company-service-image-group__text {
    font-size: 14px;
    text-align: left;
  }
  .company-service-image-group__logos {
    margin-top: 38px;
    padding: 0 5px;
  }
  .company-service-image-group__logo img {
    width: auto;
    height: 20px;
  }
}
/* --- hover --- */
@media (any-hover: hover) {
  .company-service-image-group__logo:hover {
    opacity: 0.7;
  }
}