@charset "UTF-8";
/* =====================================
	Global Settings
===================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  min-inline-size: 0;
  padding: 0;
  margin: 0;
  scrollbar-gutter: stable;
  border-style: solid;
  border-width: 0;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

/* =====================================
	Root Element Defaults
===================================== */
:where(:root) {
  scrollbar-gutter: stable;
  font-style: normal;
  overflow-wrap: anywhere;
  scroll-behavior: smooth;
  line-break: strict;
  text-rendering: optimizelegibility;
  -webkit-tap-highlight-color: transparent;
}

/* =====================================
	Body Element Defaults
===================================== */
:where(body) {
  min-block-size: 100svb;
}

/* =====================================
	Prefers Reduced Motion
===================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  ::backdrop {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    view-transition-name: none !important;
  }
}
/* =====================================
	Headings
===================================== */
/* :where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
} */
/* =====================================
	List Reset
===================================== */
:where(ul) {
  list-style: none;
}

/* =====================================
	Anchor Tag Defaults
===================================== */

/* =====================================
	Media Elements Reset
===================================== */
:where(img, svg, object) {
  display: block;
}

:where(img, picture, svg) {
  /* max-inline-size: 100%; */
  inline-size: 100%;
  block-size: auto;
}

:where(svg) {
  fill: currentcolor;
}

/* =====================================
	Form Element Reset
===================================== */
:where(input, button, textarea) {
  font: inherit;
  font-variation-settings: inherit;
  font-feature-settings: inherit;
  color: inherit;
  word-spacing: inherit;
  letter-spacing: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* =====================================
	Textarea Resize Control
===================================== */
:where(textarea) {
  resize: vertical;
  resize: block;
}

/* =====================================
	Clickable Elements Cursor
===================================== */
:where(
button,
[type=button],
[type=submit],
label[for],
summary,
[role=tab],
[role=button]) {
  cursor: pointer;
}
:where(
button,
[type=button],
[type=submit],
label[for],
summary,
[role=tab],
[role=button]) {
  cursor: pointer;
}

/* =====================================
	Table Reset
===================================== */

/* =====================================
	Dialog and Popover Reset
===================================== */
:where(dialog) {
  max-inline-size: unset;
  max-block-size: unset;
  margin: auto;
  color: inherit;
  background-color: transparent;
  background-color: initial;
  border-style: none;
}

:where(dialog:not([open], [popover])) {
  display: none;
}

/* =====================================
	Accessibility Enhancements
===================================== */
/* アクセシビリティ対応: フォーカス時の視覚効果を抑制 */

/* aria属性対応 */

:where([aria-controls]) {
  cursor: pointer;
}

/* hidden属性対応 */
:where([hidden]:not([hidden=until-found])) {
  display: none;
}
/* ==============================
  Initial Settings
============================== */
body {
  font-family: var(--font-base, system-ui, sans-serif);
  font-size: var(--fontSize-base, 16px);
  font-weight: var(--font-normal, 400);
  line-height: var(--leading-base, 1.5);
  color: var(--color-base, initial);
  letter-spacing: var(--base-letter-spacing, initial);
  color-scheme: var(--base-font-color-scheme, only light);
  background-color: var(--background-base, initial);
}

:root {
  /* Font Family */
  --font-base: "Noto Sans JP", sans-serif;
  /* Font Weight */
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-black: 900;
  /* Font Leading */
  --leading-relaxed: 2;
  --leading-base: 1.5;
  /* Font Color */
  --color-base: var(--color-dark);
  --color-accent: var(--color-navy);
  --color-placeholder: var(--color-grey-5);
  --color-error: var(--color-red);
  /* Background Color */
  --background-base: var(--color-light);
  --background-main: var(--color-grey-1);
  --background-main-dark: var(--color-grey-2);
  --background-main-darker: var(--color-grey-3);
  --background-accent: var(--color-navy);
  --background-dark: var(--color-dark);
  /* Border Color */
  --border-base: var(--color-grey-4);
  /* Other Color */
  /* Color Palette */
  --color-grey-1: #F2F2F2;
  --color-grey-2: #D0D0D0;
  --color-grey-3: #626262;
  --color-grey-4: #707070;
  --color-grey-5: #747474;
  --color-light: #fff;
  --color-dark: #000;
  --color-navy: #26455C;
  --color-red: #B36262;
}

:root {
  /* Unit Conversion */
  --base-font-size: 16; /* Root Font Size (px) */
  --px-to-rem: calc(1rem / var(--base-font-size, 16));
}

/* ==============================
  Clamp Base Size
============================== */
:root {
  /* Clamp Base Viewport */
  --viewport-min: 375;
  --viewport-max: 1440;
  /* Content */
  /* Gutter */
}

:root {
  /* Clamp Base Font Size */
  --fontSize-base-min: 15;
  --fontSize-base-max: 16;
}

:root {
  /* Border Radius */
  --radius-sm: 0.2em;
  --radius-base: 0.25em;
}

/* ==============================
  Easings
============================== */
:root {
  /* Sine */
  --ease-in-sine: cubic-bezier(0.12, 0, 0.39, 0);
  --ease-out-sine: cubic-bezier(0.61, 1, 0.88, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
  /* Cubic */
  --ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  /* Quint */
  --ease-in-quint: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  /* Circ */
  --ease-in-circ: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  /* Quad */
  --ease-in-quad: cubic-bezier(0.11, 0, 0.5, 0);
  --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
  --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1);
  /* Quart */
  --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  /* Expo */
  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  /* Back */
  --ease-in-back: cubic-bezier(0.36, 0, 0.66, -0.56);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* ==============================
  Universal Clamp
============================== */
body {
  /* Clamp Base Size */
  --clamp-viewport-min: var(--viewport-min);
  --clamp-viewport-max: var(--viewport-max);
  --clamp-min: var(--fontSize-base-min);
  --clamp-max: var(--fontSize-base-max);
}

*,
::before,
::after {
  /* Clamp Calculation */
  --clamp-root-font-size: 16;
  --clamp: clamp(
    calc(var(--clamp-min) / var(--clamp-root-font-size, 16) * 1rem),
    calc(
      (var(--clamp-min) / var(--clamp-root-font-size, 16) * 1rem) +
        (
          (var(--clamp-max) - var(--clamp-min)) /
            (var(--clamp-viewport-max) - var(--clamp-viewport-min))
        ) * (100vw - var(--clamp-viewport-min) * 1px)
    ),
    calc(var(--clamp-max) / var(--clamp-root-font-size, 16) * 1rem)
  );
}

html,
body {
  /* footerを常に画面最下部に表示を実現するために必要 */
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

body > footer {
  /* コンテンツが少ない場合も常にfooterを画面最下部に表示 */
  position: sticky;
  top: 100vh;
  top: 100svh;
  top: 100dvh;
}

body {
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}

.desktop-only {
  display: none;
}
@media screen and (min-width: 768px) {
  .desktop-only {
    display: revert;
  }
}

@media screen and (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}

.is-fixed {
  overflow: hidden;
}

/* Container幅をはみ出して全画面表示 */

/* 視覚的に非表示にするユーティリティクラス（スクリーンリーダー対応） */
:where(.visually-hidden:not(:focus-within, :active)) {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
}

.sp-nav {
  position: fixed;
  inset: 0;
  z-index: 9000;
  visibility: hidden;
  height: 100dvh;
  overflow-y: scroll;
  background-color: var(--background-main);
  opacity: 0;
  translate: 100% 0;
  transition: opacity 0.6s var(--ease-out-expo), visibility 0.6s var(--ease-out-expo), translate 0.6s var(--ease-out-expo);
}

.sp-nav__container.container {
  display: grid;
  place-content: center;
  min-height: 100%;
}

.sp-nav.is-active {
  visibility: visible;
  opacity: 1;
  translate: 0;
}

.sp-nav__items {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: calc(40 * var(--px-to-rem));
  row-gap: calc(40 * var(--px-to-rem));
  place-content: center;
  place-items: center;
  padding-block: 40px;
  padding-inline: 10px;
}

.sp-nav__item a {
  transition: color 0.3s var(--ease-out-quad);
}

.sp-nav__item a:focus-visible {
  color: color-mix(in srgb, var(--color-dark) 60%, var(--color-light));
}

@media (any-hover: hover) {
  .sp-nav__item a:hover {
    color: color-mix(in srgb, var(--color-dark) 60%, var(--color-light));
  }
}
.sp-nav__item a,
.sp-nav__contact a {
  font-size: calc(20 * var(--px-to-rem));
  font-weight: var(--font-medium);
}

.section-title {
  position: relative;
  display: flex;
  -moz-column-gap: 0.2142857143em;
       column-gap: 0.2142857143em;
  align-items: flex-start;
  font-size: calc(22 * var(--px-to-rem));
  font-weight: var(--font-bold);
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .section-title {
    font-size: calc(28 * var(--px-to-rem));
  }
}

.section-title::before {
  flex-shrink: 0;
  width: 1.9642857143em;
  aspect-ratio: 55/47;
  margin-top: -0.1em;
  content: "";
  background-image: url(../images/icon_section-title.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.section-title.section-title--light {
  color: var(--color-light);
}

.section-title.section-title--light::before {
  background-image: url(../images/icon_section-title_light.svg);
}

.pc-nav__items {
  --clamp-viewport-min: 768;
  --clamp-viewport-max: 1440;
  --clamp-min: 24;
  --clamp-max: 40;
  display: flex;
  -moz-column-gap: var(--clamp);
       column-gap: var(--clamp);
  align-items: center;
  justify-content: center;
}

.pc-nav__item a {
  display: inline-block;
  padding: calc(22 * var(--px-to-rem)) calc(4 * var(--px-to-rem));
  transition: color 0.3s var(--ease-out-quad);
}

.pc-nav__item a:focus-visible {
  color: color-mix(in srgb, var(--color-dark) 60%, var(--color-light));
}

@media (any-hover: hover) {
  .pc-nav__item a:hover {
    color: color-mix(in srgb, var(--color-dark) 60%, var(--color-light));
  }
}
.pc-nav__item a,
.pc-nav__contact a {
  font-size: calc(14 * var(--px-to-rem));
  font-weight: var(--font-bold);
  line-height: 1.4285714286;
}

body:has(.page) {
  background-color: var(--background-main);
}

.page {
  padding-top: calc(80 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page {
    padding-top: calc(100 * var(--px-to-rem));
  }
}

.page-title {
  font-size: calc(26 * var(--px-to-rem));
  font-weight: var(--font-bold);
  line-height: 2.1;
}
@media screen and (min-width: 768px) {
  .page-title {
    font-size: calc(32 * var(--px-to-rem));
  }
}

.loading {
  --loading-bg-opacity: 1;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.loading::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-color: var(--background-dark);
  opacity: var(--loading-bg-opacity, 1);
}

.loading__container {
  padding-inline: 5.3333333333vw;
}
@media screen and (min-width: 768px) {
  .loading__container {
    padding-inline: 6.1805555556vw;
  }
}

.loading__message {
  width: 100%;
  aspect-ratio: 2050/561;
}
@media screen and (min-width: 768px) {
  .loading__message {
    width: 71.1805555556vw;
    max-width: 1000px;
  }
}

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding-block: 12px;
  background-color: var(--background-base);
}
@media screen and (min-width: 768px) {
  .header {
    padding-block: initial;
  }
}

.header__container.container {
  max-width: 100%;
}

.header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  z-index: 9999;
  flex-shrink: 0;
  width: 150px;
}
@media screen and (min-width: 768px) {
  .header__logo {
    width: 174px;
  }
}

.header__logo a img {
  transition: opacity 0.3s var(--ease-out-quad);
}

.header__logo a:focus-visible {
  opacity: 0.7;
}

@media (any-hover: hover) {
  .header__logo a:hover img {
    opacity: 0.7;
  }
}
.hamburger {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
  height: 100%;
  aspect-ratio: 1;
  cursor: pointer;
  background-color: transparent;
  transition: all 0.3s var(--ease-in-out-quad);
}

.hamburger__line {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 30px;
  height: 2px;
  margin: auto;
  background-color: var(--color-dark);
  border-radius: 100vmax;
  translate: -50% -50%;
  transition: inherit;
}
.hamburger__line::before, .hamburger__line::after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background-color: inherit;
  border-radius: inherit;
  transition: inherit;
}
.hamburger__line::before {
  top: -8px;
  z-index: 2;
}
.hamburger__line::after {
  top: 8px;
  z-index: 1;
}

.hamburger[aria-expanded=true] .hamburger__line {
  background-color: transparent;
}
.hamburger[aria-expanded=true] .hamburger__line::before, .hamburger[aria-expanded=true] .hamburger__line::after {
  top: 0;
  background-color: var(--color-dark);
}
.hamburger[aria-expanded=true] .hamburger__line::before {
  transform: rotate(-45deg);
}
.hamburger[aria-expanded=true] .hamburger__line::after {
  transform: rotate(45deg);
}

.form :focus-visible {
  outline: 2px solid var(--color-dark);
  outline-offset: 2px;
}

.form__term {
  display: inline-flex;
  -moz-column-gap: calc(12 * var(--px-to-rem));
       column-gap: calc(12 * var(--px-to-rem));
  align-items: center;
  font-size: calc(16 * var(--px-to-rem));
  font-weight: var(--font-medium);
}
@media screen and (min-width: 768px) {
  .form__term {
    -moz-column-gap: calc(14 * var(--px-to-rem));
         column-gap: calc(14 * var(--px-to-rem));
    font-size: calc(18 * var(--px-to-rem));
  }
}

.form > p:has(.form__term):not(:first-of-type) {
  margin-top: calc(36 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .form > p:has(.form__term):not(:first-of-type) {
    margin-top: calc(44 * var(--px-to-rem));
  }
}

.form__term .required {
  padding: 0.375em 0.9375em;
  font-size: calc(14 * var(--px-to-rem));
  line-height: 1;
  color: var(--color-light);
  background-color: var(--background-dark);
  border-radius: 100vmax;
}
@media screen and (min-width: 768px) {
  .form__term .required {
    font-size: calc(16 * var(--px-to-rem));
  }
}

.form__textfield,
.form__textarea {
  width: 100%;
  padding: 0.5em 1em;
  margin-top: 0.3235294118em;
  font-size: calc(16 * var(--px-to-rem));
  background-color: var(--background-base);
  border: 1px solid var(--border-base);
}

.form__textarea {
  height: calc(360 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .form__textarea {
    height: calc(449 * var(--px-to-rem));
  }
}

.form__note {
  position: relative;
  padding-top: 4.8em;
  margin-top: 1.3em;
  font-size: calc(14 * var(--px-to-rem));
  line-height: var(--leading-relaxed);
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 768px) {
  .form__note {
    font-size: calc(16 * var(--px-to-rem));
  }
}

.form__note::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100px;
  aspect-ratio: 285/122;
  content: "";
  background-image: -webkit-image-set(url(../images/image_cross-center.webp) type("image/webp"), url(../images/image_cross-center.png) type("image/png"));
  background-image: image-set(url(../images/image_cross-center.webp) type("image/webp"), url(../images/image_cross-center.png) type("image/png"));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .form__note::before {
    width: 142px;
  }
}

.form__note a {
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.form__note a:focus-visible {
  color: color-mix(in srgb, var(--color-dark) 60%, var(--color-light));
}

@media (any-hover: hover) {
  .form__note a:hover {
    color: color-mix(in srgb, var(--color-dark) 60%, var(--color-light));
  }
}
label:has(.form__privacy) {
  display: flex;
  -moz-column-gap: 0.8em;
       column-gap: 0.8em;
  align-items: center;
  justify-content: center;
  margin-top: 0.5em;
  font-size: calc(14 * var(--px-to-rem));
  line-height: var(--leading-relaxed);
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  label:has(.form__privacy) {
    font-size: calc(16 * var(--px-to-rem));
  }
}

.form__privacy {
  position: relative;
  width: 1.4em;
  height: 1.25em;
  background-color: var(--color-light);
  border: 1px solid var(--border-base);
}

.form__privacy:checked::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(12 * var(--px-to-rem));
  aspect-ratio: 1;
  content: "";
  background-color: var(--color-dark);
  translate: -50% -50%;
}

.form__privacy:checked::after {
  clip-path: polygon(0 64%, 45% 100%, 100% 4%, 95% 0, 39% 82%, 6% 56%);
}

.form__button {
  margin-top: calc(28 * var(--px-to-rem));
  text-align: center;
}
@media screen and (min-width: 768px) {
  .form__button {
    margin-top: calc(36 * var(--px-to-rem));
  }
}

.form ::-moz-placeholder {
  color: var(--color-placeholder);
}

.form ::placeholder {
  color: var(--color-placeholder);
}

.form .is-invalid {
  background-color: color-mix(in srgb, var(--color-error) 5%, transparent);
  border: 1px solid var(--color-error);
}

.form__error {
  margin-top: 0.5em;
  font-size: calc(14 * var(--px-to-rem));
  color: var(--color-error);
}
@media screen and (min-width: 768px) {
  .form__error {
    font-size: calc(16 * var(--px-to-rem));
  }
}

.form__error.is-centered {
  text-align: center;
}

.footer {
  padding-block: calc(60 * var(--px-to-rem)) calc(20 * var(--px-to-rem));
  color: var(--color-light);
  background-color: var(--background-main-darker);
}
@media screen and (min-width: 768px) {
  .footer {
    padding-block: calc(28 * var(--px-to-rem));
  }
}

@media screen and (min-width: 768px) {
  .footer__container {
    display: flex;
    flex-direction: row-reverse;
    -moz-column-gap: calc(20 * var(--px-to-rem));
         column-gap: calc(20 * var(--px-to-rem));
    align-items: flex-end;
    justify-content: space-between;
  }
}

.footer__info {
  font-style: normal;
}

.footer__logo {
  width: 200px;
  margin-top: 60px;
}
@media screen and (min-width: 768px) {
  .footer__logo {
    width: 220px;
    margin-top: 0;
  }
}

.footer__logo a img {
  transition: filter 0.3s var(--ease-out-quad);
}

.footer__logo a:focus-visible img {
  filter: brightness(0.7);
}

@media (any-hover: hover) {
  .footer__logo a:hover img {
    filter: brightness(0.7);
  }
}
.footer__company {
  margin-top: 1.3333333333em;
  font-size: calc(14 * var(--px-to-rem));
  font-weight: var(--font-bold);
  line-height: var(--leading-relaxed);
}
@media screen and (min-width: 768px) {
  .footer__company {
    font-size: calc(15 * var(--px-to-rem));
  }
}

.footer__text {
  font-size: calc(12 * var(--px-to-rem));
  line-height: 1.6666666667;
}

.footer__text span {
  display: inline-block;
}

.footer__text:nth-child(1 of .footer__text) {
  margin-top: 0.2142857143em;
}

.footer__copy {
  margin-top: 1.4em;
  font-size: calc(10 * var(--px-to-rem));
}

.footer__copy small {
  font: inherit;
}

.footer__message {
  width: 80%;
  max-width: 300px;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .footer__message {
    width: 261px;
    margin: 0;
    margin: initial;
  }
}

.container {
  width: 100%;
  max-width: 640px;
  padding-inline: 20px;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .container {
    max-width: 1160px;
    padding-inline: 40px;
  }
}

.contact {
  padding-block: calc(50 * var(--px-to-rem)) calc(48 * var(--px-to-rem));
  background-color: var(--background-accent);
}
@media screen and (min-width: 768px) {
  .contact {
    padding-block: calc(64 * var(--px-to-rem)) calc(59 * var(--px-to-rem));
  }
}

.contact__text {
  color: var(--color-light);
}

.contact__wrapper {
  margin-top: calc(16 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .contact__wrapper {
    display: flex;
    -moz-column-gap: calc(20 * var(--px-to-rem));
         column-gap: calc(20 * var(--px-to-rem));
    align-items: flex-end;
    justify-content: space-between;
    margin-top: calc(14 * var(--px-to-rem));
  }
}

.contact__text {
  font-size: calc(14 * var(--px-to-rem));
  line-height: 1.75;
}
@media screen and (min-width: 768px) {
  .contact__text {
    font-size: calc(16 * var(--px-to-rem));
  }
}

.contact__button {
  margin-top: calc(32 * var(--px-to-rem));
  text-align: center;
}
@media screen and (min-width: 768px) {
  .contact__button {
    flex-shrink: 0;
    margin-top: 0;
  }
}

.contact__button a {
  display: inline-grid;
  place-items: center;
  padding: calc(17 * var(--px-to-rem)) calc(30 * var(--px-to-rem)) calc(20 * var(--px-to-rem)) calc(32 * var(--px-to-rem));
  font-size: calc(16 * var(--px-to-rem));
  font-weight: var(--font-bold);
  color: var(--background-accent);
  background-color: var(--color-light);
  border-radius: var(--radius-base);
  transition: all 0.3s var(--ease-out-quad);
}
@media screen and (min-width: 768px) {
  .contact__button a {
    font-size: calc(20 * var(--px-to-rem));
  }
}

.contact__button a span {
  position: relative;
  display: flex;
  -moz-column-gap: 0.75em;
       column-gap: 0.75em;
  align-items: flex-end;
  justify-content: center;
  transition: inherit;
}

.contact__button a span::before {
  width: 1.6em;
  aspect-ratio: 32/25;
  content: "";
  background-color: currentcolor;
  -webkit-mask-image: url(../images/icon_mail.svg);
          mask-image: url(../images/icon_mail.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  -webkit-mask-size: cover;
          mask-size: cover;
  transition: inherit;
}

.contact__button a:focus-visible {
  background-color: color-mix(in srgb, var(--background-base) 90%, var(--background-accent));
}

.contact__button a:focus-visible span::before {
  scale: 1.1;
  animation: shake 0.3s ease;
}

@media (any-hover: hover) {
  .contact__button a:hover {
    background-color: color-mix(in srgb, var(--background-base) 90%, var(--background-accent));
  }
  .contact__button a:hover span::before {
    scale: 1.1;
    animation: shake 0.3s ease;
  }
}
@keyframes shake {
  0% {
    rotate: 0deg;
    translate: 0 0;
  }
  20% {
    rotate: 2deg;
    translate: 1px 0;
  }
  40% {
    rotate: -2deg;
    translate: -1px 0;
  }
  60% {
    rotate: 1deg;
    translate: 1px 0;
  }
  80% {
    rotate: -1deg;
    translate: -1px 0;
  }
  100% {
    rotate: 0deg;
    translate: 0 0;
  }
}
.contact-button a,
.contact-button input[type=submit] {
  display: inline-grid;
  place-items: center;
  min-width: calc(240 * var(--px-to-rem));
  min-height: calc(52 * var(--px-to-rem));
  padding: 0.3043478261em 1.0434782609em;
  font-size: calc(18 * var(--px-to-rem));
  font-weight: var(--font-bold);
  color: var(--color-accent);
  background-color: var(--color-light);
  border: 4px solid var(--border-base);
  border-radius: 0.1739130435em;
  transition: background-color 0.3s var(--ease-out-quad);
}
@media screen and (min-width: 768px) {
  .contact-button a,
  .contact-button input[type=submit] {
    min-width: calc(309 * var(--px-to-rem));
    min-height: calc(66 * var(--px-to-rem));
    font-size: calc(22 * var(--px-to-rem));
  }
}

.contact-button a:focus-visible,
.contact-button input[type=submit]:focus-visible {
  background-color: color-mix(in srgb, var(--background-base) 90%, var(--background-accent));
}

@media (any-hover: hover) {
  .contact-button a:hover,
  .contact-button input[type=submit]:hover {
    background-color: color-mix(in srgb, var(--background-base) 90%, var(--background-accent));
  }
}
.button a {
  display: inline-grid;
  place-items: center;
  min-width: calc(169 * var(--px-to-rem));
  min-height: calc(36 * var(--px-to-rem));
  padding: 0.3529411765em 0.7058823529em;
  color: var(--color-light);
  background-color: var(--background-dark);
  border: 1px solid var(--color-dark);
  border-radius: 100vmax;
  transition: all 0.3s var(--ease-out-quad);
}

.button.button--large a {
  min-width: calc(200 * var(--px-to-rem));
  min-height: calc(44 * var(--px-to-rem));
}

.button a:focus-visible {
  color: var(--color-dark);
  background-color: transparent;
  border-color: currentcolor;
}

@media (any-hover: hover) {
  .button a:hover {
    color: var(--color-dark);
    background-color: transparent;
    border-color: currentcolor;
  }
}

.strengths {
  padding-block: calc(50 * var(--px-to-rem)) calc(44 * var(--px-to-rem));
  overflow-x: clip;
  background-color: var(--background-main);
}
@media screen and (min-width: 768px) {
  .strengths {
    padding-block: calc(64 * var(--px-to-rem)) calc(44 * var(--px-to-rem));
  }
}

.strengths__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: calc(40 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .strengths__items {
    margin-top: calc(21 * var(--px-to-rem));
  }
}
@media screen and (min-width: 1280px) {
  .strengths__items {
    justify-content: flex-start;
  }
}

.strengths__item {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: calc(64 * var(--px-to-rem)) calc(68 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .strengths__item {
    width: 100%;
    max-width: calc(686 * var(--px-to-rem));
    padding-block: calc(102 * var(--px-to-rem)) calc(108 * var(--px-to-rem));
  }
}

.strengths__item::before,
.strengths__item::after {
  position: absolute;
  left: 50%;
  width: 100px;
  aspect-ratio: 285/122;
  content: "";
  background-image: -webkit-image-set(url(../images/image_cross-top.webp) type("image/webp"), url(../images/image_cross-top.png) type("image/png"));
  background-image: image-set(url(../images/image_cross-top.webp) type("image/webp"), url(../images/image_cross-top.png) type("image/png"));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .strengths__item::before,
  .strengths__item::after {
    width: 142px;
  }
}

.strengths__item::before {
  top: 0;
}

.strengths__item::after {
  bottom: 0;
  transform: scale(1, -1) translateX(-50%);
}

@media screen and (min-width: 1280px) {
  .strengths__item:nth-child(even) {
    margin-left: auto;
  }
}

.strengths__item:not(:first-child) {
  margin-top: calc(40 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .strengths__item:not(:first-child) {
    margin-top: calc(60 * var(--px-to-rem));
  }
}
@media screen and (min-width: 1280px) {
  .strengths__item:not(:first-child) {
    margin-top: calc(-68 * var(--px-to-rem));
  }
}

.strengths__item-title {
  display: inline-block;
  height: calc(40 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .strengths__item-title {
    height: calc(46 * var(--px-to-rem));
  }
}

.strengths__item:nth-child(1) .strengths__item-title {
  aspect-ratio: 1212/155;
}

.strengths__item:nth-child(2) .strengths__item-title {
  aspect-ratio: 1066/156;
}

.strengths__item:nth-child(3) .strengths__item-title {
  aspect-ratio: 947/157;
}

.strengths__item:nth-child(4) .strengths__item-title {
  aspect-ratio: 997/156;
}

.strengths__text {
  margin-top: 0.5625em;
  font-size: calc(14 * var(--px-to-rem));
  line-height: 1.875;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 768px) {
  .strengths__text {
    font-size: calc(16 * var(--px-to-rem));
  }
}

.profile {
  padding-block: calc(50 * var(--px-to-rem)) calc(44 * var(--px-to-rem));
  overflow-x: clip;
  background-color: var(--background-main-dark);
}
@media screen and (min-width: 768px) {
  .profile {
    padding-block: calc(63 * var(--px-to-rem)) calc(56 * var(--px-to-rem));
  }
}

.profile__wrapper {
  display: grid;
  grid-template-areas: "title" "image" "bio";
  grid-template-rows: 1fr auto auto;
  grid-row-gap: calc(16 * var(--px-to-rem));
  row-gap: calc(16 * var(--px-to-rem));
  margin-top: calc(46 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .profile__wrapper {
    --clamp-viewport-min: 768;
    --clamp-viewport-max: 1440;
    --clamp-min: 16;
    --clamp-max: 63;
    grid-template-areas: "title image" "bio image";
    grid-template-rows: 1fr auto;
    grid-template-columns: auto 362px;
    -moz-column-gap: var(--clamp);
         column-gap: var(--clamp);
    align-items: center;
    margin-top: calc(59 * var(--px-to-rem));
  }
}

.profile__wrapper-title {
  grid-area: title;
  font-size: calc(20 * var(--px-to-rem));
  font-weight: var(--font-bold);
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .profile__wrapper-title {
    font-size: calc(24 * var(--px-to-rem));
  }
}

.profile__company {
  font-size: 0.75em;
}

.profile__post {
  display: inline-block;
  font-size: 0.5833333333em;
}

.profile__name {
  display: inline-block;
  margin-top: 0.0833333333em;
  font: inherit;
}

.profile__bio {
  grid-area: bio;
  font-size: calc(14 * var(--px-to-rem));
  line-height: 1.8571428571;
}

.profile__image {
  grid-area: image;
  aspect-ratio: 618/400;
}

.page-privacy {
  padding-bottom: calc(80 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-privacy {
    padding-bottom: calc(102 * var(--px-to-rem));
  }
}

.page-privacy__content {
  position: relative;
  padding-block: calc(88 * var(--px-to-rem)) calc(92 * var(--px-to-rem));
  margin-top: calc(64 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-privacy__content {
    padding-block: calc(126 * var(--px-to-rem)) calc(146 * var(--px-to-rem));
    margin-top: calc(82 * var(--px-to-rem));
  }
}

.page-privacy__content::before,
.page-privacy__content::after {
  position: absolute;
  left: 50%;
  width: 100px;
  aspect-ratio: 285/122;
  content: "";
  background-image: -webkit-image-set(url(../images/image_cross-top.webp) type("image/webp"), url(../images/image_cross-top.png) type("image/png"));
  background-image: image-set(url(../images/image_cross-top.webp) type("image/webp"), url(../images/image_cross-top.png) type("image/png"));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .page-privacy__content::before,
  .page-privacy__content::after {
    width: 142px;
  }
}

.page-privacy__content::before {
  top: 0;
}

.page-privacy__content::after {
  bottom: 0;
  transform: scale(1, -1) translateX(-50%);
}

.page-privacy__content dt {
  position: relative;
  font-size: calc(18 * var(--px-to-rem));
  font-weight: var(--font-bold);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 768px) {
  .page-privacy__content dt {
    font-size: calc(24 * var(--px-to-rem));
  }
}

.page-privacy__content dd {
  margin-top: calc(18 * var(--px-to-rem));
  font-size: calc(14 * var(--px-to-rem));
  line-height: var(--leading-relaxed);
}
@media screen and (min-width: 768px) {
  .page-privacy__content dd {
    margin-top: calc(24 * var(--px-to-rem));
    font-size: calc(16 * var(--px-to-rem));
  }
}

.page-privacy__content dd > * + * {
  margin-top: 2em;
}

.page-privacy__content dd + dt {
  padding-top: calc(94 * var(--px-to-rem));
  margin-top: calc(50 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-privacy__content dd + dt {
    padding-top: calc(128 * var(--px-to-rem));
    margin-top: calc(74 * var(--px-to-rem));
  }
}

.page-privacy__content dd + dt::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100px;
  aspect-ratio: 285/122;
  content: "";
  background-image: -webkit-image-set(url(../images/image_cross-center.webp) type("image/webp"), url(../images/image_cross-center.png) type("image/png"));
  background-image: image-set(url(../images/image_cross-center.webp) type("image/webp"), url(../images/image_cross-center.png) type("image/png"));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .page-privacy__content dd + dt::before {
    width: 142px;
  }
}

.page-privacy__content dd li {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.page-privacy__content dd li::before {
  flex-shrink: 0;
  content: "・";
}

.page-contact {
  padding-bottom: calc(100 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-contact {
    padding-bottom: calc(172 * var(--px-to-rem));
  }
}

.page-contact__container.container {
  max-width: calc(800 * var(--px-to-rem));
}

.page-contact__text {
  font-size: calc(14 * var(--px-to-rem));
  line-height: var(--leading-relaxed);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 768px) {
  .page-contact__text {
    font-size: calc(16 * var(--px-to-rem));
  }
}

p:nth-child(1 of .page-contact__text) {
  margin-top: 1.5em;
}

.page-contact__form {
  margin-top: calc(64 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-contact__form {
    margin-top: calc(80 * var(--px-to-rem));
  }
}

.page-contact__thanks-lead {
  margin-top: 1.5em;
  font-size: calc(18 * var(--px-to-rem));
  font-weight: var(--font-medium);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 768px) {
  .page-contact__thanks-lead {
    font-size: calc(20 * var(--px-to-rem));
  }
}

.page-contact__thanks-message {
  margin-top: 1.5em;
  font-size: calc(16 * var(--px-to-rem));
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.page-contact__button {
  margin-top: calc(48 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-contact__button {
    margin-top: calc(60 * var(--px-to-rem));
  }
}

.hero {
  --bg-scale: 1;
  --arrow-opacity: 1;
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 375/380;
  padding-top: 14.6666666667vw;
  overflow: clip;
}
@media screen and (min-width: 768px) {
  .hero {
    aspect-ratio: 1440/700;
    padding-top: 4.1666666667vw;
  }
}

.hero::before,
.hero::after {
  position: absolute;
  content: "";
}

.hero::before {
  inset: 0;
  z-index: -1;
  background-image: -webkit-image-set(url(../images/photo_hero-background.webp) type("image/webp"), url(../images/photo_hero-background.jpg) type("image/jpeg"));
  background-image: image-set(url(../images/photo_hero-background.webp) type("image/webp"), url(../images/photo_hero-background.jpg) type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: 30% 50%;
  background-size: cover;
  transform: scale(var(--bg-scale, 1));
}
@media screen and (min-width: 768px) {
  .hero::before {
    background-position: 50% 50%;
  }
}

.hero::after {
  bottom: 15px;
  left: 50%;
  z-index: 1;
  width: 12px;
  aspect-ratio: 16/25;
  background-image: url(../images/icon_down.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  opacity: var(--arrow-opacity, 1);
  translate: -50% 0;
}
@media screen and (min-width: 768px) {
  .hero::after {
    width: 16px;
  }
}

.hero__container {
  padding-inline: 5.3333333333vw;
}
@media screen and (min-width: 768px) {
  .hero__container {
    padding-inline: 8.3333333333vw;
  }
}

.hero__message {
  width: 100%;
  aspect-ratio: 2050/561;
}
@media screen and (min-width: 768px) {
  .hero__message {
    --clamp-viewport-min: 768;
    --clamp-viewport-max: 1440;
    --clamp-min: 300;
    --clamp-max: 600;
    width: var(--clamp);
  }
}

.business {
  padding-block: calc(50 * var(--px-to-rem)) calc(124 * var(--px-to-rem));
  overflow-x: clip;
}
@media screen and (min-width: 768px) {
  .business {
    padding-block: calc(64 * var(--px-to-rem)) calc(195 * var(--px-to-rem));
  }
}

.business__container {
  position: relative;
  container-name: business-container;
  container-type: inline-size;
}

.business__container::before,
.business__container::after {
  position: absolute;
  width: 40px;
  aspect-ratio: 59/60;
  content: "";
  background-image: -webkit-image-set(url(../images/image_business-decoration.webp) type("image/webp"), url(../images/image_business-decoration.png) type("image/png"));
  background-image: image-set(url(../images/image_business-decoration.webp) type("image/webp"), url(../images/image_business-decoration.png) type("image/png"));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  .business__container::before,
  .business__container::after {
    width: 59px;
  }
}

.business__container::before {
  top: calc(43 * var(--px-to-rem));
  right: 20px;
}
@media screen and (min-width: 768px) {
  .business__container::before {
    right: 40px;
  }
}

.business__container::after {
  bottom: calc(-86 * var(--px-to-rem));
  left: 20px;
  transform: scale(-1, -1);
}
@media screen and (min-width: 768px) {
  .business__container::after {
    bottom: calc(-146 * var(--px-to-rem));
    left: 40px;
  }
}

.business__items {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: calc(60 * var(--px-to-rem));
  row-gap: calc(60 * var(--px-to-rem));
  grid-column-gap: calc(60 * var(--px-to-rem));
  -moz-column-gap: calc(60 * var(--px-to-rem));
       column-gap: calc(60 * var(--px-to-rem));
  max-width: calc(400 * var(--px-to-rem));
  margin-inline: auto;
  margin-top: calc(80 * var(--px-to-rem));
  /* 56.25rem = 900px = 最小の各business__itemとgapの合計 */
}
@media screen and (min-width: 768px) {
  .business__items {
    margin-top: calc(118 * var(--px-to-rem));
  }
}
@container business-container (min-width: 56.25rem) {
  .business__items {
    grid-template-columns: repeat(auto-fit, minmax(min(260 * var(--px-to-rem), 100%), 1fr));
    max-width: calc(915 * var(--px-to-rem));
  }
}

.business__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  grid-row-gap: 0;
  row-gap: 0;
  place-items: center;
}

.business__item-title {
  font-size: calc(18 * var(--px-to-rem));
  font-weight: var(--font-bold);
  line-height: 1.1;
}
@media screen and (min-width: 768px) {
  .business__item-title {
    font-size: calc(22 * var(--px-to-rem));
  }
}

.business__image {
  width: 140px;
  aspect-ratio: 140/100;
  margin-top: calc(18 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .business__image {
    margin-top: calc(24 * var(--px-to-rem));
  }
}

.business__item-text {
  margin-top: 1.625em;
  font-size: calc(14 * var(--px-to-rem));
  line-height: 1.625;
}
@media screen and (min-width: 768px) {
  .business__item-text {
    font-size: calc(16 * var(--px-to-rem));
  }
}

.about {
  position: relative;
  z-index: 1;
  padding-block: calc(46 * var(--px-to-rem)) calc(76 * var(--px-to-rem));
  overflow-x: clip;
  background-color: var(--background-main);
}
@media screen and (min-width: 768px) {
  .about {
    padding-block: calc(64 * var(--px-to-rem)) calc(96 * var(--px-to-rem));
  }
}

.about::after {
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 767;
  --clamp-min: 174;
  --clamp-max: 194;
  position: absolute;
  top: var(--clamp);
  bottom: 40px;
  left: 0;
  z-index: -1;
  width: 96%;
  content: "";
  background-color: var(--background-base);
}
@media screen and (min-width: 768px) {
  .about::after {
    --clamp-viewport-min: 768;
    --clamp-viewport-max: 975;
    --clamp-min: 232;
    --clamp-max: 234;
  }
}
@media screen and (min-width: 1280px) {
  .about::after {
    max-width: 84.4444444444vw;
  }
}

.about__wrapper {
  max-width: calc(800 * var(--px-to-rem));
  margin-top: calc(46 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .about__wrapper {
    margin-top: calc(58 * var(--px-to-rem));
    margin-left: 9.7222222222vw;
  }
}

.about__message {
  width: 100%;
  max-width: calc(500 * var(--px-to-rem));
}

.about__text {
  font-size: calc(14 * var(--px-to-rem));
  line-height: 2.1333333333;
}
@media screen and (min-width: 768px) {
  .about__text {
    font-size: calc(15 * var(--px-to-rem));
  }
}

.about__text:nth-child(1 of .about__text) {
  margin-top: 3em;
}