@charset "UTF-8";

:root {
  /* インナー幅と余白設定 */
  --inner-value: 1100;
  --inner: 1100px;
  --padding-pc: 25px;
  --padding-sp: 16px;
  /* 計算式 */
  --rem: 1rem / 16;
  --em: 1em / 16;
  --cqi: 375 * 100cqi;
}

@media screen and (max-width: 767px) {
  :root {
    --cqi: 1440 * 100cqi;
  }
}

:root {
  /* フォント設定 */
  --base-font: "Zen Kaku Gothic New", sans-serif;
  --sub-font: "Noto Sans JP", sans-serif;
  --robot-font: "Roboto", sans-serif;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;
  /* 色の指定 */
  --color-black: #000;
  --color-white: #fff;
  --color-primary: #2c83c6;
  --color-primary-dark: #1f5b82;
  --color-primary-light: #74afcd;
  --color-main-text: #333;
  --color-bg-main: #fff;
  --color-blue: #4b95ce;
  --color-green: #71b397;
  --color-light-blue: #e0edf3;
  --color-yellow: #d7b859;
  --color-orange: #e38d51;
  --color-pink: #d18897;
  --color-pale-blue: #ebeff3;
  --color-pale-beige: #f3eace;
  /* z-indexの指定 */
  --z-index-hamburger: 100;
  --z-index-header: 100;
  --z-index-drawer: 90;
  /* グローバルスタイル */
  --header-height: calc(60 * var(--rem));
  --scrollbar-width: 0;
}

@property --scrollbar {
  inherits: true;
  initial-value: 0;
  syntax: "<length>";
}

:root:has(:modal[open], .is-scroll-lock) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--base-font);
  font-weight: var(--fw-medium);
  line-height: 1.5625;
  color: var(--color-main-text, #333);
  background-color: var(--color-bg-main, #fff);
  container-type: inline-size;
}

/* ---------- reset ---------- */
:where(h1) {
  margin: initial;
}

picture {
  display: block;
}

img {
  display: block;
}

button {
  padding: unset;
  border: none;
}

input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

:where(:focus-visible) {
  outline: 2px solid var(--color-main);
  outline-offset: unset;
}

html {
  font-size: 16px;
}

@media (max-width: 1100px) {
  html {
    font-size: calc(16 / var(--inner-value) * 100vw);
  }
}

@media (max-width: 767px) {
  html {
    font-size: 16px;
  }
}

.inner {
  width: 100%;
  max-width: calc(var(--inner) + var(--padding-pc) * 2);
  margin-inline: auto;
  padding-inline: var(--padding-pc);
}

@media screen and (max-width: 767px) {
  .inner {
    max-width: 600px;
    padding-inline: var(--padding-sp);
  }
}

/* ---------- レイアウト調整用 ---------- */
.layout-common {
  padding-block: 1.5rem;
}

@media screen and (max-width: 767px) {
  .layout-common {
    padding-block: 2.5rem 4.375rem;
  }
}

.pc-only {
  display: block;
}

@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
}

.sp-only {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp-only {
    display: block;
  }
}

/* ---------- 本文 ---------- */
.text {
  font-size: max(16px, 1rem);
  line-height: 1.5;
}

.text-loose {
  font-size: max(16px, 1rem);
  font-weight: var(--fw-medium);
  line-height: 1.75;
}

.text-md-bold {
  font-family: var(--sub-font);
  font-size: max(16px, 1.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .text-md-bold {
    font-size: 1.125rem;
  }
}

.text-lg-bold {
  font-family: var(--sub-font);
  font-size: max(16px, 1.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .text-lg-bold {
    font-size: 1.25rem;
  }
}

/* ---------- テキスト内マーカー ---------- */
.marker {
  padding-inline: 0.375rem;
  font-weight: var(--fw-bold);
  background-color: color-mix(in srgb, var(--color-yellow) 70%, transparent);
  border-radius: 1.5rem 2rem 1.5rem 2rem;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

@media screen and (max-width: 767px) {
  .about-lead .marker {
    line-height: 1.8;
  }
}

@media screen and (max-width: 767px) {
  .belief-texts .marker {
    padding-inline: 0.25rem;
    line-height: 1.6;
  }
}

.belief-text .marker:nth-of-type(1) {
  padding-inline: initial;
}

.belief-text .marker:nth-of-type(2) {
  padding-right: initial;
  padding-left: 0.625rem;
}

/* ---------- テキスト点線 ---------- */
.dotted-line {
  --_offset: 5px;
  position: relative;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  text-underline-offset: var(--_offset);
  text-decoration-thickness: 2px;
}

.dotted-line[data-punctuation=bracket] {
  clip-path: inset(0 0.5em calc(-1 * var(--_offset)));
}

.hover-default {
  transition: opacity 0.3s ease-out;
}

@media (any-hover: hover) {
  .hover-default:hover {
    opacity: 0.7;
  }
}
/* ---------- セクションヘッダー ---------- */
.section-header {
  padding: 1.25rem 3.125rem;
  background-color: var(--color-white);
}

@media screen and (max-width: 767px) {
  .section-header {
    padding: 1.25rem;
  }
}

.section-en-title {
  font-family: var(--robot-font);
  font-size: 1.25rem;
  font-weight: var(--fw-black);
  line-height: 1.15;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

@media screen and (max-width: 767px) {
  .section-en-title {
    font-size: 0.875rem;
    line-height: 1.1428571429;
  }
}

.section-subtitle {
  margin-top: 0.5rem;
  font-size: 1.3125rem;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .section-subtitle {
    font-size: 1rem;
  }
}

.section-title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 2.5rem;
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--color-main-text);
}

@media screen and (max-width: 767px) {
  .section-title {
    gap: 0.25rem;
    font-size: 1.25rem;
    line-height: 1.45;
    word-break: keep-all;
  }
}

.section-header:has(.section-subtitle) .section-title {
  margin-top: 0.5rem;
}

.section-title-img {
  display: inline-block;
  width: 3.375em;
}

@media screen and (max-width: 767px) {
  .section-title-img {
    width: 3.7em;
  }
}

.section-title-img img {
  width: 100%;
  aspect-ratio: 135/53;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ---------- セクション（すりガラス） ---------- */
.section {
  --_gradient-start-color: rgb(255 255 255 / 48%);
  --_gradient-end-color: rgb(255 255 255 / 24%);
  position: relative;
  padding-top: 1.875rem;
  background-image: linear-gradient(104deg, var(--_gradient-start-color) 0%, var(--_gradient-end-color) 100%);
  border-radius: 1.25rem;
  box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
}

@media screen and (max-width: 767px) {
  .section {
    padding-top: 1.875rem;
  }
}

.section-inner {
  padding: 1.8125rem 3.125rem 3.125rem;
}

@media screen and (max-width: 767px) {
  .section-inner {
    padding: 1.25rem 0.875rem 3.125rem;
  }
}

/* ---------- CTAボタン ---------- */
.button-cta {
  display: grid;
  gap: 1em;
  place-items: center;
  grid-template-columns: minmax(1.625rem, 1fr) auto minmax(2.875rem, 1fr);
  grid-template-areas: ". text icon";
  padding: 0.75rem 0.875rem;
  background-color: var(--color-primary-light);
  border-radius: 999em;
  transition: filter 0.3s ease-out;
}

@media screen and (max-width: 767px) {
  .button-cta {
    grid-template-columns: 2.75rem minmax(0, 1fr) 3.375rem;
    padding-top: 1rem;
  }
}

@media (max-width: 375px) {
  .button-cta {
    gap: 0.5em;
    grid-template-columns: 2.375rem minmax(0, 1fr) 3rem;
  }
}

.button-cta-text {
  display: flex;
  -moz-column-gap: 0.3125rem;
       column-gap: 0.3125rem;
  align-items: center;
  grid-area: text;
  font-size: max(16px, 1.125rem);
  font-weight: var(--fw-bold);
  line-height: 1.4444444444;
  color: var(--color-white);
}

.button-cta-img {
  width: 5.4444444444em;
  filter: brightness(0) invert(1);
}

@media screen and (max-width: 767px) {
  .button-cta-img {
    margin-top: -0.1875rem;
  }
}

.button-cta-img img {
  width: 100%;
  aspect-ratio: 98/41;
  -o-object-fit: contain;
     object-fit: contain;
}

.button-cta-icon {
  justify-self: end;
  grid-area: icon;
  width: 2.875rem;
}

.button-cta-icon img {
  width: 100%;
  aspect-ratio: 1;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ---------- ボタン ---------- */
.button {
  --_bg-color: var(--color-primary);
  --_padding-left: 1em;
  --_padding-right: var(--_padding-left);
  --_font-size: max(16px, calc(18 * var(--rem)));
  position: relative;
  display: grid;
  place-items: center;
  grid-template-columns: minmax(0, 1fr);
  min-height: 4.375rem;
  padding-block: 0.75rem;
  padding-inline: var(--_padding-left) var(--_padding-right);
  text-align: center;
  background-color: var(--_bg-color);
  border-radius: 999em;
  transition: filter 0.3s ease-out;
}

@media screen and (max-width: 767px) {
  .button {
    --_padding-left: calc(40 * var(--rem));
    --_padding-right: calc(var(--_padding-left) + 20px);
  }
}

.button[data-type=dl] {
  --_padding-left: calc(24 * var(--rem));
  --_padding-right: calc(68 * var(--rem));
}

@media screen and (max-width: 767px) {
  .button[data-type=dl] {
    --_padding-left: calc(40 * var(--rem));
    --_padding-right: calc(var(--_padding-left) + 20px);
  }
}

.button[data-type=dl-light] {
  --_bg-color: var(--color-primary-light);
  --_padding-left: calc(48 * var(--rem));
  --_padding-right: calc(68 * var(--rem));
}

.button[data-type=mail] {
  --_padding-left: calc(50 * var(--rem));
  --_padding-right: calc(76 * var(--rem));
}

.button[data-type=mail-light] {
  --_bg-color: var(--color-primary-light);
  --_padding-left: calc(48 * var(--rem));
  --_padding-right: calc(var(--_padding-left) + 20px);
}

@media screen and (max-width: 767px) {
  .button[data-type=mail-light] {
    --_padding-left: calc(48 * var(--rem));
  }
}

.button[data-type=long] {
  --_padding-left: calc(70 * var(--rem));
}

.button[data-type=tel] {
  --_bg-color: var(--color-primary-light);
  --_padding-left: calc(70 * var(--rem));
  --_padding-right: var(--_padding-left);
  --_font-size: max(16px, calc(22 * var(--rem)));
}

@media screen and (max-width: 767px) {
  .button[data-type=tel] {
    --_padding-left: calc(48 * var(--rem));
    --_padding-right: calc(var(--_padding-left) + 20px);
    --_font-size: calc(18 * var(--rem));
  }
}

.button-text {
  font-size: var(--_font-size);
  font-weight: var(--fw-bold);
  line-height: 1.4444444444;
  text-align: center;
  color: var(--color-white);
}

.button-icon {
  position: absolute;
  right: 0.875rem;
  width: 2.875rem;
}

.button-icon img {
  width: 100%;
  aspect-ratio: 1;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ---------- 矢印ボタン ---------- */
.button-arrow {
  --_bg-color: var(--color-green);
  --_arrow-size: calc(22 * var(--rem));
  --_font-size: max(15px, (18 * var(--rem)));
  display: grid;
  gap: 0.5em;
  place-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: ". text icon";
  padding: 1.0625rem 1.75rem;
  background-color: var(--_bg-color, var(--color-primary));
  border-radius: 3.75rem;
  transition: filter 0.3s ease-out;
}

.button-arrow[data-dir=prev] {
  --_arrow-size: calc(18 * var(--rem));
  gap: 1px;
}

@media screen and (max-width: 767px) {
  .button-arrow[data-dir=prev] {
    --_arrow-size: calc(16 * var(--rem));
    --_font-size: calc(16 * var(--rem));
  }
}

.button-arrow[data-dir=next] {
  --_arrow-size: calc(18 * var(--rem));
  gap: 1px;
}

@media screen and (max-width: 767px) {
  .button-arrow[data-dir=next] {
    --_arrow-size: calc(16 * var(--rem));
    --_font-size: calc(16 * var(--rem));
  }
}

.button-arrow[data-color=primary] {
  --_bg-color: var(--color-primary);
}

.button-arrow[data-color=blue] {
  --_bg-color: var(--color-blue);
}

.button-arrow[data-color=green] {
  --_bg-color: var(--color-green);
}

.button-arrow[data-color=yellow] {
  --_bg-color: var(--color-yellow);
}

.button-arrow[data-color=orange] {
  --_bg-color: var(--color-orange);
}

.button-arrow[data-color=pink] {
  --_bg-color: var(--color-pink);
}

.button-arrow::after {
  content: "";
  justify-self: end;
  grid-area: icon;
  width: var(--_arrow-size);
  aspect-ratio: 21/14;
  background-color: var(--color-white);
  transition: translate 0.3s ease-out;
  -webkit-mask-image: url("../images/icon_arrow.svg?v=202603311607");
          mask-image: url("../images/icon_arrow.svg?v=202603311607");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.button-arrow-text {
  grid-area: text;
  font-size: var(--_font-size);
  font-weight: var(--fw-bold);
  line-height: 1.4444444444;
  color: var(--color-white);
}

.button-arrow[data-dir=prev] {
  grid-template-areas: "icon text .";
}

.button-arrow[data-dir=prev]::after {
  justify-self: start;
  rotate: 180deg;
}

@media (any-hover: hover) {
  .button:hover,
  .button-arrow:hover,
  .button-cta:hover {
    filter: saturate(150%);
  }
  .button-arrow:hover::after {
    translate: 0.625rem;
  }
  .button-arrow[data-dir=prev]:hover::after {
    translate: -0.625rem;
  }
}
/* ---------- ヘッダー ---------- */
.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-index-header);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);
  padding-left: 1.25rem;
  background-color: rgba(255, 255, 255, 0.9);
}

@media screen and (max-width: 767px) {
  .header {
    padding-left: 0.875rem;
  }
}

.header-logo {
  display: block;
  flex-shrink: 0;
  width: 13.9375rem;
}

.header-logo img {
  width: 100%;
  aspect-ratio: 223/47;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ---------- ハンバーガーボタン ---------- */
.header-hamburger {
  position: relative;
  z-index: var(--z-index-hamburger);
  display: grid;
  place-content: center;
  place-items: center;
  width: 3.75rem;
  height: 100%;
  padding-bottom: 1rem;
  background-color: var(--color-white);
  background-image: linear-gradient(0deg, #6bb1e8 0%, #74afcd 100%);
  backdrop-filter: blur(4px);
}

.header-hamburger-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-white);
  opacity: 0;
  backdrop-filter: blur(4px);
  transition: opacity 0.2s ease-out;
}

.header-hamburger[data-open] .header-hamburger-inner::before {
  opacity: 1;
}

.header-hamburger-line {
  --_line-color: var(--color-white);
  --_line-color-open: var(--color-main-text);
  --_line-width: calc(32 * var(--rem));
  --_line-width-open: calc(36 * var(--rem));
  --_line-height: 2px;
  --_line-deg: 29deg;
  --_line-gap: calc(7 * var(--rem));
  --_duration: 0.5s;
  position: relative;
  display: grid;
  width: var(--_line-width);
  height: var(--_line-height);
  background-color: var(--_line-color);
  border-radius: 999em;
  transition: width var(--_duration) ease;
}

.header-hamburger[data-open] .header-hamburger-line {
  width: var(--_line-width-open);
  background-color: var(--_line-color-open);
}

.header-hamburger-line::before,
.header-hamburger-line::after {
  content: "";
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--_line-color);
  border-radius: 999em;
  transform-origin: center;
  transition: top var(--_duration) ease-out, background-color var(--_duration) ease-out;
}

.header-hamburger-line::before {
  top: calc(var(--_line-gap) * -1 - 1px);
}

.header-hamburger-line::after {
  top: var(--_line-gap);
}

.header-hamburger[data-open] .header-hamburger-line::before,
.header-hamburger[data-open] .header-hamburger-line::after {
  background-color: var(--_line-color-open);
}

.header-hamburger[data-open] .header-hamburger-line::before {
  top: calc(var(--_line-gap) * -1 + 2px);
}

/* ---------- 閉じるアニメーション（data-open解除後） ---------- */
.header-hamburger[data-animated] .header-hamburger-line {
  animation: hamburger-line-close var(--_duration) forwards;
}

.header-hamburger[data-animated] .header-hamburger-line::before {
  animation: hamburger-before-close var(--_duration) forwards;
}

.header-hamburger[data-animated] .header-hamburger-line::after {
  animation: hamburger-after-close var(--_duration) forwards;
}

/* ---------- 開くアニメーション ---------- */
.header-hamburger[data-open] .header-hamburger-line {
  animation: hamburger-line-open var(--_duration) forwards;
}

.header-hamburger[data-open] .header-hamburger-line::before {
  animation: hamburger-before-open var(--_duration) forwards;
}

.header-hamburger[data-open] .header-hamburger-line::after {
  animation: hamburger-after-open var(--_duration) forwards;
}

.header-hamburger::before,
.header-hamburger::after {
  position: absolute;
  bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--color-white);
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out, color 0.2s ease-out;
}

.header-hamburger::before {
  content: "MENU";
}

.header-hamburger::after {
  content: "CLOSE";
  visibility: hidden;
  color: var(--_line-color-open);
  opacity: 0;
}

.header-hamburger[data-open]::before {
  visibility: hidden;
  opacity: 0;
}

.header-hamburger[data-open]::after {
  visibility: visible;
  opacity: 1;
}

/* ---------- キーフレーム定義 ---------- */
@keyframes hamburger-before-open {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(var(--_line-gap)) rotate(0);
  }
  100% {
    transform: translateY(var(--_line-gap)) rotate(var(--_line-deg));
  }
}

@keyframes hamburger-after-open {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(calc(var(--_line-gap) * -1)) rotate(0);
  }
  100% {
    transform: translateY(calc(var(--_line-gap) * -1)) rotate(calc(var(--_line-deg) * -1));
  }
}

@keyframes hamburger-line-open {
  0%, 49% {
    background-color: var(--color-white);
  }
  50%, 100% {
    background-color: transparent;
  }
}

@keyframes hamburger-before-close {
  0% {
    transform: translateY(var(--_line-gap)) rotate(var(--_line-deg));
  }
  50% {
    transform: translateY(var(--_line-gap)) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes hamburger-after-close {
  0% {
    transform: translateY(calc(var(--_line-gap) * -1)) rotate(calc(var(--_line-deg) * -1));
  }
  50% {
    transform: translateY(calc(var(--_line-gap) * -1)) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes hamburger-line-close {
  0%, 49% {
    background-color: transparent;
  }
  50%, 100% {
    background-color: var(--color-white);
  }
}
/* ---------- ドロワーメニュー ---------- */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-index-drawer);
  visibility: hidden;
  overflow-y: auto;
  width: 18.5rem;
  height: calc(100svh - 2.5rem);
  background-color: var(--color-white);
  border-radius: 0 0 0 0.625rem;
  backdrop-filter: blur(4px);
  transform: translateX(100%);
  transition: transform 0.2s ease-out, visibility 0.2s ease-out;
}

.drawer[aria-hidden=false] {
  visibility: visible;
  transform: translateX(0);
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-index-drawer) - 1);
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.drawer-overlay[data-open] {
  visibility: visible;
  opacity: 1;
}

.drawer-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding-block: 3.75rem;
}

.drawer-list {
  display: flex;
  flex-direction: column;
}

.drawer-link {
  display: grid;
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.4375;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

.drawer-link-text {
  display: block;
}

.drawer-link-sub {
  font-size: 0.75rem;
  line-height: 1.5833333333;
}

@media (any-hover: hover) {
  .drawer-link:hover {
    color: var(--color-primary);
    background-color: var(--color-pale-blue);
  }
}
/* ---------- フッター（濃紺） ---------- */
.footer {
  position: relative;
  z-index: 1;
}

.footer-main {
  padding-block: 1.875rem;
  background-color: var(--color-primary-dark);
}

@media screen and (max-width: 767px) {
  .footer-main {
    padding-block: 2.625rem 3.125rem;
  }
}

.footer-inner.inner {
  --inner: 1340px;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, max(470px, 36.8125rem));
}

@media screen and (max-width: 767px) {
  .footer-inner.inner {
    --padding-sp: 14px;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
  }
}

.footer-nav {
  display: grid;
  gap: 2px;
}

@media screen and (max-width: 767px) {
  .footer-nav {
    gap: 1.125rem;
    padding-inline: 0.625rem;
  }
}

.footer-nav-link {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  min-height: max(36px, 2.625rem);
  color: var(--color-white);
  transition: color 0.3s ease-out, filter 0.3s ease-out;
}

@media screen and (max-width: 767px) {
  .footer-nav-link {
    min-height: initial;
  }
}

.footer-nav-link::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  aspect-ratio: 8/14;
  background-color: currentcolor;
  -webkit-mask-image: url("../images/icon_chevron.svg?v=202603311607");
          mask-image: url("../images/icon_chevron.svg?v=202603311607");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

@media (any-hover: hover) {
  .footer-nav-link:hover {
    color: var(--color-primary-light);
    filter: saturate(180%);
  }
}

.footer-nav-text {
  font-size: max(14px, 1rem);
  line-height: 1.4375;
}

@media screen and (max-width: 767px) {
  .footer-nav-text {
    font-size: 1rem;
  }
}

.footer-nav-sub-text {
  display: block;
  font-size: max(10px, 0.75rem);
  line-height: 1.5833333333;
}

.footer-cta {
  display: grid;
  gap: 2.5rem 5px;
  align-content: start;
  margin-top: 0.625rem;
}

@media screen and (max-width: 767px) {
  .footer-cta {
    gap: 0 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 1.5625rem;
  }
}

.footer-buttons {
  display: grid;
  -moz-column-gap: 1.5625rem;
       column-gap: 1.5625rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media screen and (max-width: 767px) {
  .footer-buttons {
    display: contents;
  }
}

@media screen and (max-width: 767px) {
  .footer-buttons .button:first-child {
    grid-column: 1/-1;
  }
}

@media screen and (max-width: 767px) {
  .footer-buttons .button:not(:first-child),
  .footer-tel .button {
    margin-top: 1.875rem;
  }
}

.footer-note {
  grid-column: 1/-1;
  margin-top: 5px;
  font-size: max(12px, 1rem);
  line-height: 1.5;
  text-align: center;
  color: var(--color-white);
}

@media screen and (max-width: 767px) {
  .footer-note {
    justify-self: center;
  }
}

@media screen and (max-width: 767px) {
  .footer-buttons .footer-note {
    grid-row-start: 2;
    padding-inline: 1.75rem;
    text-align: left;
  }
}

@media screen and (max-width: 767px) {
  .footer-tel {
    display: contents;
  }
}

@media screen and (max-width: 767px) {
  .footer-tel .footer-note {
    padding-inline: 2.25rem;
    text-align: left;
  }
}

.footer-bottom {
  padding-block: 1.75rem 0.9375rem;
  background-color: var(--color-white);
}

@media screen and (max-width: 767px) {
  .footer-bottom {
    padding-block: 1.875rem;
  }
}

.footer-bottom-inner.inner {
  --inner: 1340px;
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .footer-bottom-inner.inner {
    --padding-sp: 40px;
    flex-direction: column;
    gap: 1.875rem;
  }
}

.footer-catchphrase {
  flex: 1;
  padding-bottom: 1.25rem;
  font-size: 2rem;
  font-weight: var(--fw-bold);
  line-height: 1.4375;
}

@media screen and (max-width: 767px) {
  .footer-catchphrase {
    position: relative;
    padding-bottom: 2rem;
    font-size: 1.5rem;
    line-height: 1.4583333333;
  }
}

@media screen and (max-width: 767px) {
  .footer-catchphrase::before {
    content: "";
    position: absolute;
    inset-inline: calc(50% - 50cqi);
    bottom: 0;
    height: 1px;
    background-color: var(--color-primary-dark);
  }
}

@media screen and (max-width: 767px) {
  .footer-catchphrase-first {
    padding-left: 0.5em;
  }
}

@media screen and (max-width: 767px) {
  .footer-catchphrase .inline-block {
    margin-top: 4px;
  }
}

.footer-brand {
  display: grid;
  justify-items: end;
}

@media screen and (max-width: 767px) {
  .footer-brand {
    justify-items: center;
  }
}

.footer-logo {
  display: block;
  width: 16.75rem;
}

@media screen and (max-width: 767px) {
  .footer-logo {
    width: 15.4375rem;
  }
}

.footer-logo img {
  width: 100%;
  aspect-ratio: 268/56;
  -o-object-fit: contain;
     object-fit: contain;
}

.footer-copyright {
  display: inline-block;
  margin-top: 1.8125rem;
  font-size: max(10px, 0.75rem);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-black);
}

@media screen and (max-width: 767px) {
  .footer-copyright {
    margin-top: 1rem;
    font-size: 0.6875rem;
  }
}

/* ---------- Index Stacking Context ---------- */
.index {
  position: relative;
  isolation: isolate;
}

/* ---------- 背景メッシュグラデーション ---------- */
.bg-mesh {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, #f0f7ff 0%, #e2e9ef 100%);
  filter: blur(80px);
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
}

.bg-blob[data-blob="1"] {
  top: 15%;
  left: 30%;
  width: 75vw;
  height: 75vw;
  background: rgba(44, 131, 198, 0.22);
  animation: bg-flow-1 15s infinite alternate ease-in-out;
}

.bg-blob[data-blob="2"] {
  right: -5%;
  bottom: -10%;
  width: 85vw;
  height: 85vh;
  background: rgba(185, 215, 235, 0.5);
  animation: bg-flow-2 18s infinite alternate ease-in-out;
}

.bg-blob[data-blob="3"] {
  top: 45%;
  left: 5%;
  width: 65vw;
  height: 65vw;
  background: rgba(130, 170, 200, 0.25);
  animation: bg-flow-3 22s infinite alternate ease-in-out;
}

.bg-blob-white {
  position: absolute;
  top: 10%;
  right: 15%;
  width: 50vw;
  height: 50vw;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  mix-blend-mode: overlay;
  animation: bg-flow-white 12s infinite alternate ease-in-out;
}

.bg-noise {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 48.2638888889%;
}

@media screen and (max-width: 767px) {
  .bg-noise {
    width: 80%;
  }
}

.bg-noise img {
  width: 100%;
  aspect-ratio: 695/703;
  -o-object-fit: contain;
     object-fit: contain;
}

@keyframes bg-flow-1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(25vw, 15vh) scale(1.1);
  }
}

@keyframes bg-flow-2 {
  0% {
    transform: translate(0, 0) scale(1.1);
  }
  100% {
    transform: translate(-30vw, -15vh) scale(1);
  }
}

@keyframes bg-flow-3 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(35vw, -15vh);
  }
}

@keyframes bg-flow-white {
  0% {
    opacity: 0.2;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0.6;
    transform: translate(-25vw, 20vh);
  }
}
/* ---------- MV ---------- */
.mv {
  position: relative;
  z-index: 1;
  align-items: center;
  padding-block-start: calc(var(--header-height) + 50px);
  padding-block-end: 20px;
}

@media screen and (max-width: 767px) {
  .mv {
    padding-block: calc(var(--header-height) + 2.125rem) 1.875rem;
  }
}

.mv-inner.inner {
  --inner: 1107px;
  display: grid;
  grid-template-columns: minmax(0, 30.875rem) minmax(0, 1fr) minmax(0, 27.0625rem);
  grid-template-areas: "contents . illust";
}

@media screen and (max-width: 767px) {
  .mv-inner.inner {
    --padding-sp: 25px;
    place-items: center;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "contents" "illust";
  }
}

.mv-contents {
  grid-area: contents;
}

@media screen and (max-width: 767px) {
  .mv-contents {
    width: min(100%, 25rem);
  }
}

.mv-logo img {
  width: 100%;
  aspect-ratio: 494/150;
  -o-object-fit: contain;
     object-fit: contain;
}

.mv-body {
  position: relative;
  margin-top: 1.875rem;
  padding-left: 0.25rem;
}

@media screen and (max-width: 767px) {
  .mv-body {
    margin-top: 1rem;
    padding-left: initial;
  }
}

.mv-text {
  position: relative;
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  line-height: 1.7083333333;
  color: var(--color-primary-dark);
}

@media screen and (max-width: 767px) {
  .mv-text {
    font-size: 1.25rem;
    line-height: 1.5;
    word-break: keep-all;
  }
}

.mv-text .bracket {
  margin-inline-start: -0.5em;
  margin-inline-end: -0.4em;
}

.mv-mark {
  float: right;
  width: 4.625rem;
  padding-top: 0.3125rem;
}

@media screen and (max-width: 767px) {
  .mv-mark {
    position: absolute;
    right: 0;
    bottom: -0.625rem;
    float: none;
    width: 4.625rem;
    padding-top: initial;
  }
}

.mv-mark img {
  width: 100%;
  aspect-ratio: 74/65;
  -o-object-fit: contain;
     object-fit: contain;
}

.mv-illust {
  grid-area: illust;
  margin-top: 3.375rem;
}

@media screen and (max-width: 767px) {
  .mv-illust {
    width: min(84.7058823529%, 25rem);
    margin-top: 1.5rem;
  }
}

.mv-illust img {
  width: 100%;
  aspect-ratio: 433/340;
  -o-object-fit: contain;
     object-fit: contain;
}

@media screen and (min-width: 768px) {
  .mv-illust img {
    transform: scale(0.8);
  }
}

/* ---------- Contents ---------- */
.contents {
  display: grid;
  gap: 50px;
  padding-bottom: 8.625rem;
}

@media screen and (max-width: 767px) {
  .contents {
    padding-bottom: 5rem;
  }
}

/* ---------- about ---------- */
.about-body.section-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2.9375rem 5px;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .about-body.section-inner {
    gap: initial;
  }
}

.about-lead {
  width: 100%;
}

.about-solution {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-left: -0.75rem;
}

@media screen and (max-width: 767px) {
  .about-solution {
    flex-direction: column;
    justify-content: center;
    margin-top: 6.5rem;
    margin-left: -3rem;
  }
}

@media (max-width: 375px) {
  .about-solution {
    margin-left: initial;
  }
}

.about-solution-head {
  position: absolute;
  top: 1.125rem;
  left: 0;
  padding: 0.625rem;
  font-size: max(20px, 1.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.4583333333;
  color: var(--color-white);
  background-color: var(--color-yellow);
  rotate: -8.634deg;
}

@media screen and (max-width: 767px) {
  .about-solution-head {
    top: -3.375rem;
    left: calc(50% - min(36.9230769231vw, 160px));
    padding: 0.5rem 2.3125rem;
    font-size: 1.25rem;
    line-height: 1.45;
    white-space: nowrap;
    rotate: -6deg;
  }
}

@media (max-width: 375px) {
  .about-solution-head {
    padding-inline: 0.625rem;
  }
}

.about-solution-text {
  padding: 3.9375em 2.0625em 3.5em 1.25em;
  font-size: max(16px, 1rem);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  text-align: center;
  color: var(--color-main-text);
  background-image: -webkit-image-set(url("../images/image_bubble_01.avif?v=202603311607") type("image/avif"), url("../images/image_bubble_01.png?v=202603311607") type("image/png"));
  background-image: image-set(url("../images/image_bubble_01.avif?v=202603311607") type("image/avif"), url("../images/image_bubble_01.png?v=202603311607") type("image/png"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.about-solution-text[data-index="1"] {
  margin-top: 4.5rem;
}

@media screen and (max-width: 767px) {
  .about-solution-text[data-index="1"] {
    margin-top: initial;
  }
}

.about-solution-text[data-index="2"] {
  margin-left: -2rem;
  padding: 5.125em 4em 5.3125em 3.5em;
  background-image: -webkit-image-set(url("../images/image_bubble_02.avif?v=202603311607") type("image/avif"), url("../images/image_bubble_02.png?v=202603311607") type("image/png"));
  background-image: image-set(url("../images/image_bubble_02.avif?v=202603311607") type("image/avif"), url("../images/image_bubble_02.png?v=202603311607") type("image/png"));
}

@media screen and (max-width: 767px) {
  .about-solution-text[data-index="2"] {
    margin-top: -2.8125rem;
    margin-left: initial;
  }
}

.about-solution-img {
  position: absolute;
  bottom: 0.75rem;
  left: 52%;
  width: 64px;
}

@media screen and (max-width: 767px) {
  .about-solution-img {
    right: calc(50% - min(41.5384615385vw, 162px));
    bottom: 3.75rem;
    left: initial;
    width: 4.625rem;
  }
}

.about-solution-img img {
  width: 100%;
  aspect-ratio: 64/117;
  -o-object-fit: cover;
     object-fit: cover;
}

.about-actions {
  display: grid;
  gap: 1.875rem 1.5625rem;
  place-content: center;
  grid-template-columns: repeat(auto-fit, minmax(237px, 1fr));
  max-width: max(400px, 31.25rem);
}

@media screen and (max-width: 767px) {
  .about-actions {
    gap: 1.25rem;
    max-width: initial;
    margin-top: -0.5rem;
  }
}

.about-cta {
  grid-column: 1/-1;
}

@media screen and (max-width: 767px) {
  .about-cta {
    gap: 0.5rem;
  }

  .about-cta .button-cta-text {
    flex-direction: column;
  }
}

.about-cta .button-cta-row {
  display: flex;
  align-items: center;
  column-gap: 0.3125rem;
  margin-top: 0.25rem;
}

@media screen and (min-width: 768px) {
  .about-cta .button-cta-row {
    gap: 0.2rem;
  }
}

/* ---------- belief ---------- */
.belief-body.section-inner {
  padding-bottom: 4.375rem;
  container-type: inline-size;
}

@media screen and (max-width: 767px) {
  .belief-body.section-inner {
    padding-bottom: 3.125rem;
  }
}

.belief-texts {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
}

@media screen and (max-width: 767px) {
  .belief-texts {
    gap: 1lh;
  }
}

.belief-text strong {
  font-size: 1.25rem;
}

.belief-illust {
  position: absolute;
  right: 0;
  bottom: 1.75rem;
  width: 26.6cqi;
}

@media screen and (max-width: 767px) {
  .belief-illust {
    bottom: 2.5rem;
    width: 10rem;
  }
}

.belief-illust img {
  width: 100%;
  aspect-ratio: 266/200;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ---------- solution ---------- */
.solution-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 3.4375rem;
}

@media screen and (max-width: 767px) {
  .solution-grid {
    gap: 3.75rem;
    grid-template-columns: minmax(0, 1fr);
  }
}

.solution-panel {
  position: relative;
  display: grid;
  place-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: max(48px, 3.375rem) 3.125rem 2.5rem;
  background-color: var(--color-white);
  border-radius: 0.3125rem;
}

@media screen and (max-width: 767px) {
  .solution-panel {
    padding: 3.375rem 1.25rem 2.5rem;
  }
}

.solution-panel-title {
  position: absolute;
  top: -1.625rem;
  width: calc(100% - 2.5rem);
  padding: 1.0625rem;
  font-size: max(16px, 1.125rem);
  font-weight: var(--fw-bold);
  line-height: 1.4444444444;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-blue);
  border-radius: 5px;
}

.solution-panel-title-button {
  cursor: pointer;
}

.solution-panel-buttons {
  display: grid;
  gap: 1.25rem;
  justify-content: center;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

@media screen and (max-width: 767px) {
  .solution-panel-buttons {
    grid-template-columns: minmax(0, 400px);
  }
}

.solution-panel-buttons[data-width=narrow] {
  grid-template-columns: minmax(0, 330px);
}

.solution-note {
  margin-top: 0.625rem;
  font-size: max(16px, 1rem);
  line-height: 1.5;
  text-align: right;
}

@media screen and (max-width: 767px) {
  .solution-note {
    font-size: 0.875rem;
  }
}

/* ---------- voices ---------- */
.voices-body.section-inner {
  padding-block: 3.3125rem 4.5rem;
}

.voices-grid {
  display: grid;
  gap: 0 8.2%;
  place-content: center;
  place-items: center;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
}

@media screen and (max-width: 767px) {
  .voices-grid {
    gap: 3.125rem 1.875rem;
  }
}

.voices-button {
  --_icon-top-position: 0;
  --_icon-left-position: 0;
  --_icon-size: calc(118 * var(--rem));
  --_padding-left: calc(100 * var(--rem));
  --_padding-right: var(--_padding-left);
  position: relative;
  display: grid;
  place-items: center;
  min-height: 6.0625rem;
  padding-block: 1rem;
  padding-inline: var(--_padding-left) var(--_padding-right);
  font-size: 1.25rem;
  color: var(--color-primary-dark);
  background-color: var(--color-white);
  border-radius: 999em;
}

@media screen and (max-width: 767px) {
  .voices-button {
    --_padding-inline: calc(80 * var(--rem));
    --_icon-size-sp: calc(96 * var(--rem));
    min-width: min(17.5rem, 100%);
    min-height: 4.75rem;
    padding-inline: var(--_padding-inline);
    font-size: 1.125rem;
  }
}

.voices-button::after {
  content: "";
  position: absolute;
  right: 1.6666666667em;
  width: 1.3333333333em;
  aspect-ratio: 1;
  background-color: currentcolor;
  transition: translate 0.3s ease-out;
  -webkit-mask-image: url("../images/icon_arrow.svg?v=202603311607");
          mask-image: url("../images/icon_arrow.svg?v=202603311607");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

@media (any-hover: hover) {
  .voices-button:hover::after {
    translate: 0.625rem;
  }
}

.voices-button:nth-child(1) {
  --_icon-top-position: calc(-16 * var(--rem));
  --_icon-left-position: calc(-20 * var(--rem));
  grid-column: 1/-1;
}

.voices-button:nth-child(2) {
  --_icon-top-position: calc(-28 * var(--rem));
  --_icon-left-position: calc(-17 * var(--rem));
  --_icon-size: calc(131 * var(--rem));
  --_padding-left: calc(104 * var(--rem));
  --_padding-right: calc(96 * var(--rem));
  justify-self: start;
}

@media screen and (max-width: 767px) {
  .voices-button:nth-child(2) {
    --_icon-top-position: calc(-16 * var(--rem));
    justify-self: center;
  }
}

.voices-button:nth-child(3) {
  --_icon-top-position: calc(-22 * var(--rem));
  --_icon-left-position: calc(-12 * var(--rem));
  --_icon-size: calc(123 * var(--rem));
  --_padding-left: calc(114 * var(--rem));
  --_padding-right: calc(106 * var(--rem));
  justify-self: end;
}

@media screen and (max-width: 767px) {
  .voices-button:nth-child(3) {
    --_icon-top-position: calc(-16 * var(--rem));
    justify-self: center;
  }
}

.voices-button:nth-child(4) {
  --_icon-top-position: calc(-16 * var(--rem));
  --_icon-left-position: calc(-41 * var(--rem));
  --_icon-size: calc(119 * var(--rem));
  --_padding-left: calc(94 * var(--rem));
  --_padding-right: calc(86 * var(--rem));
  justify-self: end;
  margin-top: 3.25rem;
}

@media screen and (max-width: 767px) {
  .voices-button:nth-child(4) {
    --_icon-left-position: calc(-24 * var(--rem));
    justify-self: center;
    margin-top: initial;
  }
}

.voices-button:nth-child(5) {
  --_icon-top-position: calc(-6 * var(--rem));
  --_icon-left-position: calc(-12 * var(--rem));
  --_icon-size: calc(106 * var(--rem));
  --_padding-left: calc(114 * var(--rem));
  --_padding-right: calc(106 * var(--rem));
  justify-self: start;
  margin-top: 3.25rem;
}

@media screen and (max-width: 767px) {
  .voices-button:nth-child(5) {
    --_icon-top-position: calc(-16 * var(--rem));
    justify-self: center;
    margin-top: initial;
  }
}

.voices-button-icon {
  position: absolute;
  top: var(--_icon-top-position);
  left: var(--_icon-left-position);
  width: var(--_icon-size);
}

@media screen and (max-width: 767px) {
  .voices-button-icon {
    width: var(--_icon-size-sp);
  }
}

.voices-button-icon img {
  width: 100%;
  aspect-ratio: 1;
  -o-object-fit: contain;
     object-fit: contain;
}

.voices-button-label {
  font-weight: var(--fw-bold);
  line-height: 1.45;
}

/* ---------- merit ---------- */
.merit-body.section-inner {
  padding-top: 3.625rem;
}

.merit-list {
  display: grid;
  gap: 3.125rem 1.875rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-left: 1.25rem;
}

@media screen and (max-width: 767px) {
  .merit-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.merit-card {
  position: relative;
  display: grid;
  gap: 1rem;
  align-content: start;
  min-height: 10.625rem;
  padding-block: 2.5rem;
  padding-inline: 24px 20px;
  background-color: var(--color-white);
  border-radius: 5px;
}

@media screen and (max-width: 767px) {
  .merit-card {
    align-content: center;
    min-height: 9.375rem;
    padding: 1.875rem 1.5rem;
  }
}

.merit-num {
  position: absolute;
  top: -1.625rem;
  left: -1.25rem;
  display: grid;
  place-items: center;
  width: 4.375rem;
  aspect-ratio: 1;
  font-size: 2rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-white);
  background-color: var(--color-primary-light);
  border-radius: 50%;
}

@media screen and (max-width: 767px) {
  .merit-num {
    width: 3.5rem;
    font-size: 1.5rem;
  }
}

.merit-title {
  font-size: max(20px, 1.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.4583333333;
  color: var(--color-primary-dark);
}

@media screen and (max-width: 767px) {
  .merit-title {
    font-size: 1.375rem;
  }
}

.merit-text {
  font-size: max(14px, 1rem);
  line-height: 1.5;
}

.merit-dotted {
  font-size: max(16px, 1.125rem);
  font-weight: var(--fw-bold);
  line-height: 1.4444444444;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

.merit-cta {
  margin-top: 3.125rem;
  text-align: center;
}

.merit-cta-text {
  font-size: max(16px, 1.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.45;
  color: var(--color-primary);
}

@media screen and (max-width: 767px) {
  .merit-cta-text {
    font-size: 1rem;
  }
}

.merit-cta-button {
  width: min(25rem, 100%);
  margin-inline: auto;
  margin-top: 5px;
}

/* ---------- faq ---------- */
.faq-body.section-inner {
  padding-top: 4.875rem;
}

@media screen and (max-width: 767px) {
  .faq-body.section-inner {
    padding-top: 4rem;
  }
}

.faq-list {
  display: grid;
  gap: 4.375rem;
}

@media screen and (max-width: 767px) {
  .faq-list {
    gap: 3.75rem;
  }
}

.faq-item {
  position: relative;
  padding: 1.625rem 2.5rem;
  background-color: var(--color-white);
  border-radius: 5px;
}

@media screen and (max-width: 767px) {
  .faq-item {
    padding: 1.25rem;
  }
}

.faq-item::before {
  content: "";
  position: absolute;
  top: -3.9375rem;
  left: -1.125rem;
  z-index: 1;
  width: 5.75rem;
  aspect-ratio: 1;
  background-image: url("../images/figure_faq-q.svg?v=202603311607");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media screen and (max-width: 767px) {
  .faq-item::before {
    top: -3rem;
    left: -0.875rem;
    width: 4.375rem;
  }
}

.faq-item::after {
  content: "";
  position: absolute;
  right: -0.3125rem;
  bottom: -0.1875rem;
  z-index: 1;
  width: 5.875rem;
  aspect-ratio: 1;
  background-image: url("../images/figure_faq-a.svg?v=202603311607");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media screen and (max-width: 767px) {
  .faq-item::after {
    width: 4.375rem;
  }
}

.faq-wrap {
  display: grid;
  gap: 2px;
  clip-path: inset(0 round 5px);
}

:where(.faq-question, .faq-answer) {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  grid-template-columns: max-content minmax(0, 1fr);
  padding: 0.875rem 1.25rem;
}

@media screen and (max-width: 767px) {
  :where(.faq-question, .faq-answer) {
    gap: 0.75rem;
  }
}

.faq-question {
  background-color: var(--color-pale-blue);
}

.faq-question::before {
  content: "Q";
  font-family: var(--robot-font);
  font-size: 2.5em;
  font-weight: var(--fw-medium);
  line-height: 0.6;
  color: var(--color-primary);
}

.faq-answer {
  background-color: var(--color-pale-beige);
}

.faq-answer::before {
  content: "A";
  font-family: var(--robot-font);
  font-size: 2.5em;
  font-weight: var(--fw-medium);
  line-height: 0.6;
  color: var(--color-yellow);
}

/* ---------- other ---------- */
.other-body.section-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  align-items: start;
  padding-top: 2.5rem;
}

.other-card {
  width: calc(50% - 1.25rem);
  background-color: var(--color-white);
  border-radius: 5px;
}

@media screen and (max-width: 767px) {
  .other-card {
    width: 100%;
  }
}

.other-trigger {
  display: grid;
  gap: 1em;
  align-items: center;
  grid-template-columns: minmax(84px, 6.25rem) minmax(0, 1fr) auto;
  grid-template-areas: "tags title arrow";
  width: 100%;
  min-height: 5.1875rem;
  padding-block: 0.625rem;
  padding-inline: 0.625rem 1.5rem;
}

@media screen and (max-width: 767px) {
  .other-trigger {
    grid-template-columns: 5.25rem minmax(0, 1fr) auto;
  }
}

.other-trigger::before,
.other-trigger::after {
  content: "";
  grid-area: arrow;
  width: 0.75rem;
  aspect-ratio: 12/21;
  background-color: var(--color-primary-dark);
  rotate: 90deg;
  transition: opacity 0.3s ease;
  -webkit-mask-image: url("../images/icon_chevron.svg?v=202603311607");
          mask-image: url("../images/icon_chevron.svg?v=202603311607");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

@media screen and (max-width: 767px) {
  .other-trigger::before,
  .other-trigger::after {
    width: 0.625rem;
  }
}

.other-trigger::after {
  opacity: 0;
  rotate: -90deg;
}

.other-card[data-state=open] .other-trigger::before {
  opacity: 0;
}

.other-card[data-state=open] .other-trigger::after {
  opacity: 1;
}

.other-tags {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  grid-area: tags;
}

.other-tag {
  display: grid;
  padding: 0.3125rem 0.5rem;
  font-size: max(12px, 0.875rem);
  line-height: 1;
  text-align: center;
  color: var(--color-white);
  border-radius: 2px;
  text-box: trim-both cap alphabetic;
}

@media screen and (max-width: 767px) {
  .other-tag {
    font-size: 0.6875rem;
  }
}

.other-tag[data-color=primary] {
  background-color: var(--color-primary);
}

.other-tag[data-color=pink] {
  background-color: var(--color-pink);
}

.other-tag[data-color=green] {
  background-color: var(--color-green);
}

.other-tag[data-color=orange] {
  background-color: var(--color-orange);
}

.other-tag[data-color=yellow] {
  background-color: var(--color-yellow);
}

.other-card-title {
  grid-area: title;
  min-width: min(100%, 16.5rem);
  margin-left: auto;
  font-size: max(16px, 1.125rem);
  font-weight: var(--fw-bold);
  line-height: 1.4444444444;
}

@media screen and (max-width: 767px) {
  .other-card-title {
    min-width: unset;
    margin-left: unset;
    font-size: 1rem;
  }
}

.other-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.other-card[data-state=open] .other-panel {
  grid-template-rows: 1fr;
}

.other-panel-inner {
  overflow: hidden;
  padding-inline: 0.625rem 1.25rem;
}

.other-panel-content {
  min-height: 3rem;
  padding-block: 0.25rem 0.625rem;
}

/* ---------- workshop ---------- */
.workshop-body.section-inner {
  position: relative;
  display: grid;
  place-items: center;
  padding-top: 72px;
}

@media screen and (max-width: 767px) {
  .workshop-body.section-inner {
    overflow: clip;
    padding-top: 5.625rem;
  }
}

.workshop-head {
  position: absolute;
  top: 3.375rem;
  left: 3.375rem;
  z-index: 1;
  padding: 0.625rem;
  font-size: max(20px, 1.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.4583333333;
  color: var(--color-white);
  background-color: var(--color-yellow);
  rotate: -8.63deg;
}

@media screen and (max-width: 767px) {
  .workshop-head {
    top: 2.5rem;
    left: calc(50% - min(40vw, 210px));
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    rotate: -6deg;
  }
}

.workshop-question {
  position: relative;
  margin-left: -3.75rem;
  padding: 1.8125em 1.5625em 2.875em 2.9375em;
  background-image: -webkit-image-set(url("../images/image_bubble_03.avif?v=202603311607") type("image/avif"), url("../images/image_bubble_03.png?v=202603311607") type("image/png"));
  background-image: image-set(url("../images/image_bubble_03.avif?v=202603311607") type("image/avif"), url("../images/image_bubble_03.png?v=202603311607") type("image/png"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

@media screen and (max-width: 767px) {
  .workshop-question {
    margin-left: 3.125rem;
    padding-inline: 2.5em 2.25em;
  }
}

.workshop-question-icon {
  position: absolute;
  bottom: -4.8125rem;
  left: -6.125rem;
  width: 6.8125rem;
}

@media screen and (max-width: 767px) {
  .workshop-question-icon {
    bottom: -0.625rem;
    left: -2rem;
    width: 4.75rem;
  }
}

.workshop-question-icon img {
  width: 100%;
  aspect-ratio: 109/143;
  -o-object-fit: contain;
     object-fit: contain;
}

.workshop-answer {
  position: relative;
  max-width: 430px;
  margin-top: 1.375rem;
  margin-left: 1.875rem;
  padding: 1.4375em 3.375em 1.4375em 2.5em;
  background-image: -webkit-image-set(url("../images/image_bubble_04.avif?v=202603311607") type("image/avif"), url("../images/image_bubble_04.png?v=202603311607") type("image/png"));
  background-image: image-set(url("../images/image_bubble_04.avif?v=202603311607") type("image/avif"), url("../images/image_bubble_04.png?v=202603311607") type("image/png"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

@media screen and (max-width: 767px) {
  .workshop-answer {
    max-width: 364px;
    margin-right: 1.5rem;
    margin-left: initial;
    padding-block: 1em;
    padding-inline: 1.625em 2.25em;
    word-break: keep-all;
  }
}

.text.workshop-question-text {
  word-break: keep-all;
}

@media screen and (max-width: 767px) {
  .text.workshop-question-text {
    font-size: 0.875rem;
  }
}

.workshop-answer-icon {
  position: absolute;
  right: -5.25rem;
  bottom: 0.625rem;
  width: 4.75rem;
}

@media screen and (max-width: 767px) {
  .workshop-answer-icon {
    right: -1.25rem;
    bottom: 0;
    width: 3.75rem;
  }
}

.workshop-answer-icon img {
  width: 100%;
  aspect-ratio: 76/124;
  -o-object-fit: contain;
     object-fit: contain;
}

.workshop-answer-text {
  font-size: max(16px, 1rem);
  font-weight: var(--fw-medium);
  line-height: 1.625;
}

@media screen and (max-width: 767px) {
  .workshop-answer-text {
    font-size: 0.875rem;
  }
}

.workshop-marker {
  font-size: max(18px, 1.375rem);
  line-height: 1.4545454545;
}

@media screen and (max-width: 767px) {
  .workshop-marker {
    font-size: 1.125rem;
    line-height: 1.8;
  }
}

.text.workshop-note {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .text.workshop-note {
    font-size: 0.875rem;
    text-align: left;
  }
}

.workshop-caption {
  margin-top: 5px;
  font-family: var(--base-font);
  font-size: max(12px, 0.75rem);
  font-weight: var(--fw-medium);
  line-height: 2.5;
}

@media screen and (max-width: 767px) {
  .workshop-caption {
    line-height: 1.8;
    text-align: left;
  }
}

.workshop-bottom {
  margin-top: 3.25rem;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .workshop-bottom {
    margin-top: 1.25rem;
  }
}

/* ---------- closing ---------- */
.closing.section {
  padding-block: 3.125rem;
}

.closing-inner {
  padding-block: 6.5625rem;
  text-align: center;
  background-image: -webkit-image-set(url("../images/bg_closing.avif?v=202603311607") type("image/avif"), url("../images/bg_closing.jpg?v=202603311607") type("image/jpeg"));
  background-image: image-set(url("../images/bg_closing.avif?v=202603311607") type("image/avif"), url("../images/bg_closing.jpg?v=202603311607") type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .closing-inner {
    padding-block: 3.125rem;
  }
}

.closing-title {
  font-size: 2rem;
  font-weight: var(--fw-bold);
  line-height: 1.4375;
  color: var(--color-primary);
}

@media screen and (max-width: 767px) {
  .closing-title {
    font-size: 1.625rem;
    text-align: center;
    word-break: keep-all;
  }
}

.closing-text {
  max-width: 624px;
  margin-inline: auto;
  margin-top: 1.5rem;
  font-size: max(14px, 1rem);
  line-height: 1.875;
  word-break: keep-all;
}

@media screen and (max-width: 767px) {
  .closing-text {
    font-size: 0.875rem;
  }
}

/* ---------- Modal 共通（機能・表示切替） ---------- */
.modal {
  display: flex;
  overflow: clip auto;
  justify-content: center;
  align-items: center;
  margin: auto;
  opacity: 0;
  transition: display 0.3s allow-discrete, overlay 0.3s allow-discrete, opacity 0.3s ease;
  block-size: 100%;
  inline-size: 100%;
}

.modal[open] {
  opacity: 1;
  transition: opacity 0.3s ease;
}

@starting-style {
  .modal[open] {
    opacity: 0;
  }
}

.modal::backdrop {
  background-color: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: display 0.3s allow-discrete, overlay 0.3s allow-discrete, opacity 0.3s ease;
}

.modal[open]::backdrop {
  opacity: 1;
  transition: opacity 0.3s ease;
}

@starting-style {
  .modal[open]::backdrop {
    opacity: 0;
  }
}

.modal-container {
  display: grid;
  grid-template-rows: 3rem auto 3rem;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
}

.modal-container > * {
  grid-row-start: 2;
}

.modal-close {
  position: fixed;
  top: 1.875rem;
  right: 1.875rem;
  z-index: 2;
  width: 1.25rem;
  aspect-ratio: 1;
}

@media screen and (max-width: 767px) {
  .modal-close {
    top: 1rem;
    right: 1rem;
  }
}

/* ---------- 機能概要 ---------- */
.modal-solution {
  overflow: hidden;
  width: 100%;
  background-color: unset;
}

.modal-solution .swiper {
  overflow: visible;
  height: min(75svh, max(450px, 34.375rem));
  min-height: 400px;
  margin-top: 1.875rem;
}

.modal-solution-title {
  display: flex;
  gap: 2px;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: var(--fw-bold);
  line-height: 1.4375;
  color: var(--color-white);
}

@media screen and (max-width: 767px) {
  .modal-solution-title {
    font-size: 1.5rem;
  }
}

.modal-solution-title-img {
  display: inline-block;
  width: 4.1875em;
  filter: brightness(0) invert(1);
}

.modal-solution-title-img img {
  width: 100%;
  aspect-ratio: 134/53;
  -o-object-fit: contain;
     object-fit: contain;
}

.modal-solution .swiper-slide {
  --_bg-head-color: var(--color-blue);
  --_bg-solution-head-color: var(--color-blue);
  width: max(43.75rem, 48.6111111111vw);
  height: 100%;
  background-color: var(--color-white);
  clip-path: inset(0 round 5px);
}

@media screen and (max-width: 767px) {
  .modal-solution .swiper-slide {
    width: min(82.0512820513vw, 500px);
  }
}

.modal-slide-head {
  display: grid;
  place-items: center;
  padding: 0.625rem 1rem;
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  line-height: 1.4583333333;
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-blue);
}

@media screen and (max-width: 767px) {
  .modal-slide-head {
    font-size: 1.125rem;
  }
}

.modal-solution .swiper-slide[data-tone=green] {
  --_bg-solution-head-color: var(--color-green);
}

.modal-solution .swiper-slide[data-tone=yellow] {
  --_bg-solution-head-color: var(--color-yellow);
}

.modal-solution .swiper-slide[data-tone=orange] {
  --_bg-solution-head-color: var(--color-orange);
}

.modal-solution .swiper-slide[data-tone=pink] {
  --_bg-solution-head-color: var(--color-pink);
}

.modal-solution-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: calc(100% - 3.4375rem);
  padding: 1.5625rem 3.125rem 1.5rem;
}

@media screen and (max-width: 767px) {
  .modal-solution-content {
    padding: 1.25rem 1.25rem 1rem;
  }
}

.modal-solution-text {
  font-size: max(16px, 1rem);
  line-height: 1.625;
}

.modal-solution-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
  margin-bottom: 1.5rem;
}

.modal-solution-head {
  padding: 0.3125rem 1rem;
  font-size: max(18px, 1.25rem);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  text-align: center;
  color: var(--color-white);
  background-color: var(--_bg-solution-head-color);
}

@media screen and (max-width: 767px) {
  .modal-solution-head {
    font-size: 1.125rem;
  }
}

.modal-solution-text + .modal-solution-head {
  margin-top: 1.25rem;
}

.modal-solution-head + .modal-solution-text {
  margin-top: 1.25rem;
}

.modal-example {
  display: grid;
  gap: 4px;
  margin-top: 2.5rem;
}

@media screen and (max-width: 767px) {
  .modal-example {
    margin-top: 1.875rem;
  }
}

.modal-example-label {
  width: -moz-fit-content;
  width: fit-content;
  padding: 1px 3px;
  border: 1px solid;
}

.modal-example-list {
  display: grid;
  gap: 0.625rem;
}

.modal-example-item {
  position: relative;
  padding-left: 1em;
}

.modal-example-item::before {
  content: "・";
  position: absolute;
  left: 0;
}

.modal-example-strong {
  font-size: max(18px, 1.125rem);
  font-weight: var(--fw-bold);
  line-height: 1.5555555556;
}

.modal-solution-slide:not(.swiper-slide-active) .modal-solution-nav {
  visibility: hidden;
  pointer-events: none;
}

.modal-solution-nav {
  position: relative;
  bottom: 0;
  display: grid;
  gap: 1.25rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  flex-shrink: 0;
}

@media (max-width: 604px) {
  .modal-solution-nav {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
  }
}

/* ---------- 社内の声モーダル ---------- */
.modal-voices {
  width: 100%;
  background-color: unset;
  overflow: hidden;
}

.modal-voices-inner.inner {
  --inner: calc(853 * var(--rem));
  padding-bottom: 3.125rem;
}

.modal-voices-title {
  font-size: max(26px, 2rem);
  font-weight: var(--fw-bold);
  line-height: 1.4375;
  text-align: center;
  color: var(--color-white);
}

@media screen and (max-width: 767px) {
  .modal-voices-title {
    font-size: 1.5rem;
  }
}

.modal-voices-container {
  margin-top: 1.875rem;
}

.modal-voices .swiper {
  overflow: visible;
}

.modal-voices-content {
  position: relative;
  height: min(25.625rem, 80svh);
  min-height: 300px;
  padding: 1.25rem;
  background-color: var(--color-white);
  border-radius: 3.125rem;
}

@media screen and (max-width: 767px) {
  .modal-voices-content {
    border-radius: 2.5rem;
  }
}

.modal-voices-scroll {
  overflow-y: auto;
  height: 100%;
  padding-block: 1.875rem 1.75rem;
  padding-inline: 1.875rem;
}

@media screen and (max-width: 767px) {
  .modal-voices-scroll {
    padding: 1rem 0.5rem;
  }
}

.modal-voices-body {
  width: 86.3213811421%;
  margin-inline: auto;
}

.modal-voices-role {
  display: flex;
  gap: 0.625rem;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: var(--fw-medium);
  line-height: 1.4583333333;
  text-align: center;
  color: var(--color-primary-dark);
}

@media screen and (max-width: 767px) {
  .modal-voices-role {
    font-size: 1.5rem;
    line-height: 1.45;
  }
}

.modal-voices-role-bracket {
  font-size: max(16px, 1rem);
  line-height: 1.5;
}

.modal-voices-heading {
  margin-top: 1.875rem;
  font-size: max(20px, 1.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.45;
  text-align: center;
  color: var(--color-primary);
}

@media screen and (max-width: 767px) {
  .modal-voices-heading {
    margin-top: 1.25rem;
    word-break: keep-all;
  }
}

.modal-voices-texts {
  display: grid;
  gap: 1lh;
  margin-top: 1.25rem;
  color: var(--color-black);
}

.modal-voices-nav {
  display: grid;
  gap: 1.25rem;
  justify-content: end;
  grid-template-columns: repeat(2, minmax(0, 190px));
  margin-top: 1rem;
}

@media screen and (max-width: 767px) {
  .modal-voices-nav {
    justify-content: center;
  }
}

.modal-voices-nav .button-arrow {
  padding-inline: 1.5rem;
}

.modal-voices-figure {
  position: absolute;
  bottom: var(--_figure-block-position);
  left: var(--_figure-inline-position);
  width: 11.875rem;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .modal-voices-figure {
    width: 5.625rem;
  }
}

.modal-voices-figure[data-figure=ceo] {
  --_figure-inline-position: calc(-92 * var(--rem));
  --_figure-block-position: calc(-42 * var(--rem));
}

@media screen and (max-width: 767px) {
  .modal-voices-figure[data-figure=ceo] {
    --_figure-inline-position: calc(-20 * var(--rem));
    --_figure-block-position: calc(-12 * var(--rem));
  }
}

.modal-voices-figure[data-figure=driver] {
  --_figure-inline-position: calc(-100 * var(--rem));
  --_figure-block-position: calc(-47 * var(--rem));
}

@media screen and (max-width: 767px) {
  .modal-voices-figure[data-figure=driver] {
    --_figure-inline-position: calc(-20 * var(--rem));
    --_figure-block-position: calc(-12 * var(--rem));
  }
}

.modal-voices-figure[data-figure=sales] {
  --_figure-inline-position: calc(-91 * var(--rem));
  --_figure-block-position: calc(-30 * var(--rem));
}

@media screen and (max-width: 767px) {
  .modal-voices-figure[data-figure=sales] {
    --_figure-inline-position: calc(-20 * var(--rem));
    --_figure-block-position: calc(-12 * var(--rem));
  }
}

.modal-voices-figure[data-figure=system] {
  --_figure-inline-position: calc(-107 * var(--rem));
  --_figure-block-position: calc(-32 * var(--rem));
}

@media screen and (max-width: 767px) {
  .modal-voices-figure[data-figure=system] {
    --_figure-inline-position: calc(-20 * var(--rem));
    --_figure-block-position: calc(-12 * var(--rem));
  }
}

.modal-voices-figure[data-figure=office] {
  --_figure-inline-position: calc(-93 * var(--rem));
  --_figure-block-position: calc(-32 * var(--rem));
}

@media screen and (max-width: 767px) {
  .modal-voices-figure[data-figure=office] {
    --_figure-inline-position: calc(-20 * var(--rem));
    --_figure-block-position: calc(-12 * var(--rem));
  }
}

.modal-voices-figure img {
  width: 100%;
  height: auto;
}

.inline-block {
  display: inline-block;
}