@charset "UTF-8";
/* html */
/* Safariバージョン10.1~12.0対策 */
* {
  min-height: 0vw;
  min-height: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  min-inline-size: 0;
  border-width: 0;
  border-style: solid;
}

* {
  margin: 0;
}

:root {
  font-family: "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  line-height: 1.2;
  font-weight: 400;
  color: var(--body-fg);
  background-color: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-inline-size: 320px;
  min-block-size: 100svb;
  display: block grid;
  grid-template: "header" "contents" 1fr "footer";
  font-size: clamp(0.5625rem, 0.3294198895rem + 0.9944751381vw, 1.125rem);
}

/* リンク */
:where(:any-link) {
  background-color: unset;
  color: unset;
  text-decoration-line: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
}

ul,
ol {
  padding-inline-start: unset;
  list-style-type: "";
}

summary {
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}

/* 埋め込み要素 */
img,
picture,
video,
canvas,
svg {
  display: block;
  object-fit: cover;
}

/* ボタン */
button,
[type=button],
[type=reset],
[type=submit],
::file-selector-button {
  padding: unset;
  border: 1px solid transparent;
  border-radius: unset;
  background-color: unset;
  color: unset;
  font: unset;
  letter-spacing: unset;
  text-align: unset;
  text-transform: unset;
  vertical-align: middle;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
}

button,
[type=button],
[type=reset],
[type=submit],
[role=button],
::file-selector-button {
  cursor: pointer;
}

:disabled,
[aria-disabled=true] {
  cursor: default;
}

/* ダイアログ */
dialog {
  width: unset;
  max-width: unset;
  height: unset;
  max-height: unset;
  padding: unset;
  color: unset;
  background-color: unset;
  border: unset;
  overflow: unset;
}

/* モーダル時の背面スクロール抑制 */
:root:has(:modal) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* スクロール時にヘッダーの高さを考慮 */
:focus,
[id]:target {
  scroll-margin-block-start: calc(var(--header-block-size) + 1rem);
}

:root {
  --sp-layout-width: 393;
  --pc-layout-width: 1920;
  --main-color: #0086d1;
  --recruit-color: #4ac9e3;
  --body-fg: #333;
  --body-fg-light: #666;
  --main-bg: #ddf3ff;
  --accent-bg: #fff0ea;
  --service-bg: #ACE0F9;
  --footer-accent-color: #FFF;
  --recruit-accent-color: #56C1FD;
  --body-bg-gradient: linear-gradient(90deg, var(--accent-bg), var(--main-bg));
  --title_zone-bg-gradient: transparent linear-gradient(106deg, #FFF1EB 17%, #ACE0F9 100%) 0% 0% no-repeat padding-box;
  --service-bg-gradient: linear-gradient(112deg, var(--accent-bg) 20%, var(--service-bg) 92%);
  --horiz-bg-gradient: linear-gradient(90deg, var(--accent-bg), var(--main-bg));
  --vert-bg-gradient: linear-gradient(180deg, var(--accent-bg), var(--service-bg));
  --border-radius-sm: 10px;
  --border-radius-md: 20px;
  --half-leading: calc((1em - 1lh) / 2);
  /* 使用箇所は削除していってください、すみません
  // TODO これやっぱやめる
  --spacing-xs: .75rem; // 12px
  --spacing-sm: 1.25rem; // 20px
  */
  --yu-font-family:
    "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic",
    "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN";
  --serif-font-family:
    "Times New Roman",
    "ヒラギノ明朝 ProN", "Hiragino Mincho ProN",
    "游明朝", "Yu Mincho", "游明朝体", "YuMincho",
    "MS PMincho", serif;
}
@media (768px < width) {
  :root {
    /* 使わない
    --spacing-xs: 1.25rem; // 20px
    --spacing-sm: 2rem; // 32px
    --spacing-md: 2.5rem; // 40px
    --spacing-lg: 4rem; // 64px
    --spacing-xl: 5rem; // 80px
    --spacing-2xl: 6rem; // 96px
    --spacing-3xl: 8rem; // 128px
    */
  }
}

@font-face {
  font-family: "katyoubb";
  src: url("/font/kachoBB_web.woff2");
  src: url("/font/kachoBB_web.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@property --scrollbar-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
:root {
  --gt-outer: 20;
  --gt-inner: 25;
  --gutter-outer: calc(var(--gt-outer) / var(--sp-layout-width) * (100vw - var(--scrollbar-width)));
  --gutter-inner: calc(var(--gt-inner) / var(--sp-layout-width) * (100vw - var(--scrollbar-width)));
}
@media (768px < width) {
  :root {
    --gt-outer: 40;
    --gt-inner: 160;
    --gutter-outer: calc(var(--gt-outer) / var(--pc-layout-width) * (100vw - var(--scrollbar-width)));
    --gutter-inner: calc(var(--gt-inner) / var(--pc-layout-width) * (100vw - var(--scrollbar-width)));
  }
}

main.contents {
  grid-area: contents;
}

.container {
  display: block grid;
  justify-items: center;
  overflow-x: clip;
  overflow-y: unset;
}

:where(.container > *) {
  inline-size: calc(100% - var(--gutter-outer) * 2);
  max-inline-size: 100%;
}
@media (768px < width) {
  :where(.container > *) {
    inline-size: clamp(43rem, 4.375rem + 80.46875vw, 68.75rem);
    max-inline-size: min(1100px, 100%);
  }
}

.outermost_container {
  justify-items: center;
  overflow-x: hidden;
  overflow-y: auto;
}

:where(.outermost_container > *) {
  inline-size: 100%;
  max-inline-size: 100%;
}
@media (768px < width) {
  :where(.outermost_container > *) {
    inline-size: clamp(48rem, -60rem + 225vw, 120rem);
    max-inline-size: min(1920px, 100%);
  }
}

/* 見出し */
hgroup.hdg1 {
  display: block grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  color: var(--main-color);
  column-gap: 6px;
  grid-template-areas: "before ja" "en     en";
}
@media (768px < width) {
  hgroup.hdg1 {
    column-gap: 21px;
    grid-template-areas: "before en" "...... ja";
  }
}
hgroup.hdg1 h1,
hgroup.hdg1 h2,
hgroup.hdg1 h3 {
  grid-area: ja;
  color: var(--body-fg);
  font-size: clamp(0.5625rem, 0.2776243094rem + 1.2154696133vw, 1.25rem);
  font-weight: bold;
}
hgroup.hdg1 p[lang=en] {
  grid-area: en;
  font-size: clamp(1.8125rem, 1.0096685083rem + 3.4254143646vw, 3.75rem);
  font-weight: bold;
  text-transform: uppercase;
}
hgroup.hdg1::before {
  grid-area: before;
  content: "";
  background-color: currentColor;
  width: 20px;
  height: 1px;
}
@media (768px < width) {
  hgroup.hdg1::before {
    width: 40px;
    height: 2px;
  }
}

:root {
  --header-block-size: 48px;
}
@media (768px < width) {
  :root {
    --header-block-size: 120px;
  }
}

header.header {
  --_logo-block-size: 26px;
  --_header-nav-display: none;
  --_drawer-btn-display: block;
  grid-area: header;
  max-inline-size: 100%;
  width: 100%;
  block-size: var(--header-block-size);
  padding-block: clamp(0.75rem, 0.5428176796rem + 0.8839779006vw, 1.25rem);
  padding-inline: clamp(1.25rem, 0.9392265193rem + 1.3259668508vw, 2rem);
  display: block grid;
  align-items: center;
  position: sticky;
  inset-block-start: 0;
  background-color: #fff;
  z-index: 10000;
  margin: 0 auto;
}
@media (768px < width) {
  header.header {
    --_logo-block-size: 60px;
    --_header-nav-display: block grid;
    --_drawer-btn-display: none;
    --_header-nav-font-size: clamp(0.875rem, 0.5rem + 0.78125vw, 1.125rem);
    --_header-btn-block-size: 50px;
    --_header-btn-font-size: clamp(1rem, 0.8571428571rem + 0.2976190476vw, 1.125rem);
  }
}

.header-inner {
  display: block grid;
  grid-template-columns: max-content 1fr min-content;
  align-items: center;
  column-gap: clamp(3rem, 1.875rem + 2.34375vw, 3.75rem);
  justify-self: center;
  width: 100%;
  max-width: min(1920px, 100%);
}
@media (768px < width) {
  .header-inner {
    zoom: 0.75;
  }
}
@media (1024px < width) {
  .header-inner {
    zoom: 0.8;
  }
}
@media (1280px < width) {
  .header-inner {
    zoom: 0.8;
  }
}
@media (1440px < width) {
  .header-inner {
    zoom: 0.9;
  }
}
@media (1640px < width) {
  .header-inner {
    zoom: initial;
  }
}
@media (1920px <= width) {
  .header-inner {
    min-width: min(1920px, 100%);
  }
}

.header-inner .logo {
  height: var(--_logo-block-size);
  aspect-ratio: 304/59;
}
.header-inner .logo a img {
  block-size: 100%;
  inline-size: auto;
  object-fit: contain;
  object-position: center;
}

.header-nav {
  grid-column: span 2;
  display: var(--_header-nav-display);
  grid-template-columns: subgrid;
  align-items: center;
  column-gap: clamp(1.25rem, -0.625rem + 3.90625vw, 2.5rem);
}
.header-nav__list {
  display: block flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  column-gap: clamp(0.5625rem, 0rem + 1.171875vw, 0.9375rem);
}
.header-nav__list > li {
  display: inline flex;
  align-items: center;
}

a.header-nav__link {
  font-size: var(--_header-nav-font-size);
  font-weight: bold;
  padding-block: clamp(0.5rem, 0.3125rem + 0.390625vw, 0.78125rem);
  padding-inline: clamp(0.125rem, -0.2916666667rem + 0.8680555556vw, 0.75rem);
  border-radius: var(--border-radius-sm);
}
@media (any-hover: hover) {
  a.header-nav__link:hover {
    background-color: rgb(from var(--main-color) r g b/20%);
  }
}

.header-nav__btn-wrapper {
  display: block flex;
  flex-direction: column;
  row-gap: 12px;
  column-gap: clamp(0.75rem, 0rem + 1.5625vw, 1.25rem);
}
@media (1024px < width) {
  .header-nav__btn-wrapper {
    flex-direction: row;
  }
}

a.header-nav__btn {
  max-block-size: var(--_header-btn-block-size);
  font-size: var(--_header-btn-font-size);
  white-space: nowrap;
  align-content: center;
  display: block grid;
  grid-template: "text after"/1fr auto;
  align-items: center;
  padding: var(--_btn-pad-y) var(--_btn-pad-x-ed) var(--_btn-pad-y) var(--_btn-pad-x-st);
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border-radius: calc(infinity * 1px);
}
a.header-nav__btn.contact {
  max-width: 210px;
  --_btn-pad-x-st: clamp(0.90625rem, 0.65625rem + 0.5208333333vw, 1.125rem);
  --_btn-pad-x-ed: clamp(1.09375rem, 1.0580357143rem + 0.0744047619vw, 1.125rem);
  --_btn-pad-y: clamp(0.546875rem, 0.2790178571rem + 0.5580357143vw, 0.78125rem);
  --_prepend-spacing: clamp(0.390625rem, 0.2120535714rem + 0.3720238095vw, 0.546875rem);
  --_prepend-w: clamp(1.421875rem, 0.7254464286rem + 1.4508928571vw, 2.03125rem);
  --_prepend-h: clamp(0.953125rem, 0.4888392857rem + 0.9672619048vw, 1.359375rem);
  background: var(--main-color);
  color: #fff;
  transition: background-color 0.3s;
}
a.header-nav__btn.contact:disabled, a.header-nav__btn.contact[aria-disabled=true] {
  background-color: oklch(from var(--main-color) calc(l + 0.2) calc(c - 0.1) h);
}
@media (any-hover: hover) {
  a.header-nav__btn.contact:not(:disabled, [aria-disabled=true]):hover {
    background-color: color-mix(in srgb, var(--main-color) 70%, #fff);
  }
}
a.header-nav__btn.contact {
  grid-template: "before text after"/auto 1fr auto;
}
a.header-nav__btn.contact::before {
  grid-area: before;
  content: "";
  display: block flow;
  inline-size: var(--_prepend-w);
  block-size: var(--_prepend-h);
  margin-inline-end: var(--_prepend-spacing);
  background: url("/auc@2x.png") no-repeat center/contain;
}
a.header-nav__btn.recruit {
  max-width: 200px;
  --_btn-pad-x-st: clamp(1.0625rem, 0.5267857143rem + 1.1160714286vw, 1.53125rem);
  --_btn-pad-x-ed: clamp(1.375rem, 1.0892857143rem + 0.5952380952vw, 1.625rem);
  --_btn-pad-y: clamp(0.4921875rem, 0.2511160714rem + 0.5022321429vw, 0.703125rem);
  --_prepend-spacing: clamp(0.375rem, 0.0892857143rem + 0.5952380952vw, 0.625rem);
  --_prepend-w: clamp(1.203125rem, 0.6138392857rem + 1.2276785714vw, 1.71875rem);
  --_prepend-h: var(--_prepend-w);
  background: var(--recruit-color);
  color: #fff;
  transition: background-color 0.3s;
}
a.header-nav__btn.recruit:disabled, a.header-nav__btn.recruit[aria-disabled=true] {
  background-color: oklch(from var(--recruit-color) calc(l + 0.2) calc(c - 0.1) h);
}
@media (any-hover: hover) {
  a.header-nav__btn.recruit:not(:disabled, [aria-disabled=true]):hover {
    background-color: color-mix(in srgb, var(--recruit-color) 70%, #fff);
  }
}
a.header-nav__btn.recruit {
  grid-template: "before text after"/auto 1fr auto;
}
a.header-nav__btn.recruit::before {
  grid-area: before;
  content: "";
  display: block flow;
  inline-size: var(--_prepend-w);
  block-size: var(--_prepend-h);
  margin-inline-end: var(--_prepend-spacing);
  background: url("/atx@2x.png") no-repeat center/contain;
}

.drawer-btn__box {
  display: var(--_drawer-btn-display);
  grid-column: span 1/-1;
}

button#drawer-btn.drawer-btn {
  --_distance: 5px;
  --_thicknes: 3px;
  display: block grid;
  grid-template: var(--_thicknes)/24px;
  place-content: center;
  block-size: var(--header-block-size);
  aspect-ratio: 1;
  border: unset;
}
button#drawer-btn.drawer-btn .icon {
  display: block grid;
  grid-template-areas: "stack";
  align-self: stretch;
  background-color: var(--main-color);
  --_translate-y-abs: calc(var(--_distance) + var(--_thicknes));
}
button#drawer-btn.drawer-btn .icon::before, button#drawer-btn.drawer-btn .icon::after {
  content: "";
  grid-area: stack;
  background-color: inherit;
}
button#drawer-btn.drawer-btn .icon::before {
  translate: 0 calc(var(--_translate-y-abs) * -1);
}
button#drawer-btn.drawer-btn .icon::after {
  translate: 0 var(--_translate-y-abs);
}

dialog#drawer {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
dialog#drawer[data-active=true] {
  animation-name: drawer-container-appeared;
}
dialog#drawer[data-active=false] {
  animation-name: drawer-container-leaved;
}
dialog#drawer::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(0.25rem);
}
dialog#drawer .drawer-menu {
  background-color: #F5F7F8;
  block-size: 100%;
  inline-size: 80%;
  max-inline-size: 440px;
  min-inline-size: 280px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}
dialog#drawer .drawer-menu__container {
  margin-block-start: var(--header-block-size);
  margin-inline: var(--gutter-outer);
  max-inline-size: calc(100% - var(--gutter-outer) * 2);
}
dialog#drawer .drawer-menu__btn-wrapper {
  margin-block-end: 40px;
  font-size: clamp(0.875rem, 0.7714088398rem + 0.4419889503vw, 1.125rem);
  display: block grid;
  grid-auto-flow: column;
  gap: 1em;
}
@media (425px >= width) {
  dialog#drawer .drawer-menu__btn-wrapper {
    grid-auto-flow: row;
    grid-auto-rows: 1fr;
  }
}
dialog#drawer .drawer-menu__btn {
  --_btn-pad-x-st: clamp(0.90625rem, 0.5335162214rem + 1.5903307888vw, 1.296875rem);
  --_btn-pad-x-ed: clamp(1.09375rem, 0.6464694656rem + 1.9083969466vw, 1.5625rem);
  --_btn-pad-y: clamp(0.546875rem, 0.3232347328rem + 0.9541984733vw, 0.78125rem);
  white-space: nowrap;
  align-content: center;
  display: block grid;
  grid-template: "text after"/1fr auto;
  align-items: center;
  padding: var(--_btn-pad-y) var(--_btn-pad-x-ed) var(--_btn-pad-y) var(--_btn-pad-x-st);
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border-radius: calc(infinity * 1px);
}
dialog#drawer .drawer-menu__btn.recruit {
  --_prepend-spacing: clamp(0.5625rem, 0.3239503817rem + 1.0178117048vw, 0.8125rem);
  --_prepend-w: clamp(1.203125rem, 0.7111164122rem + 2.0992366412vw, 1.71875rem);
  --_prepend-h: var(--_prepend-w);
  background: var(--recruit-color);
  color: #fff;
  transition: background-color 0.3s;
}
dialog#drawer .drawer-menu__btn.recruit:disabled, dialog#drawer .drawer-menu__btn.recruit[aria-disabled=true] {
  background-color: oklch(from var(--recruit-color) calc(l + 0.2) calc(c - 0.1) h);
}
@media (any-hover: hover) {
  dialog#drawer .drawer-menu__btn.recruit:not(:disabled, [aria-disabled=true]):hover {
    background-color: color-mix(in srgb, var(--recruit-color) 70%, #fff);
  }
}
dialog#drawer .drawer-menu__btn.recruit {
  grid-template: "before text after"/auto 1fr auto;
}
dialog#drawer .drawer-menu__btn.recruit::before {
  grid-area: before;
  content: "";
  display: block flow;
  inline-size: var(--_prepend-w);
  block-size: var(--_prepend-h);
  margin-inline-end: var(--_prepend-spacing);
  background: url("/atx@2x.png") no-repeat center/contain;
}
dialog#drawer .drawer-menu__btn.contact {
  --_prepend-spacing: clamp(0.390625rem, 0.2415314885rem + 0.6361323155vw, 0.546875rem);
  --_prepend-w: clamp(1.421875rem, 0.8404103053rem + 2.4809160305vw, 2.03125rem);
  --_prepend-h: clamp(0.953125rem, 0.5654818702rem + 1.6539440204vw, 1.359375rem);
  background: var(--main-color);
  color: #fff;
  transition: background-color 0.3s;
}
dialog#drawer .drawer-menu__btn.contact:disabled, dialog#drawer .drawer-menu__btn.contact[aria-disabled=true] {
  background-color: oklch(from var(--main-color) calc(l + 0.2) calc(c - 0.1) h);
}
@media (any-hover: hover) {
  dialog#drawer .drawer-menu__btn.contact:not(:disabled, [aria-disabled=true]):hover {
    background-color: color-mix(in srgb, var(--main-color) 70%, #fff);
  }
}
dialog#drawer .drawer-menu__btn.contact {
  grid-template: "before text after"/auto 1fr auto;
}
dialog#drawer .drawer-menu__btn.contact::before {
  grid-area: before;
  content: "";
  display: block flow;
  inline-size: var(--_prepend-w);
  block-size: var(--_prepend-h);
  margin-inline-end: var(--_prepend-spacing);
  background: url("/auc@2x.png") no-repeat center/contain;
}
dialog#drawer .drawer-menu__list {
  margin-inline: calc(-1 * var(--gutter-outer));
  background-color: #fff;
  display: block flex;
  flex-direction: column;
}
dialog#drawer .drawer-menu__list-item {
  display: block flex;
  border-block-start: thin solid rgb(from #707070 r g b/20%);
  position: relative;
}
dialog#drawer .drawer-menu__list-item > a {
  font-size: clamp(0.875rem, 0.7714088398rem + 0.4419889503vw, 1.125rem);
  padding-block: 1em;
  padding-inline: var(--gutter-outer);
  inline-size: 100%;
}

@keyframes drawer-container-appeared {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes drawer-container-leaved {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
footer.footer {
  --_footer-btn-block-size: 70px;
  --_footer-btn-font-size: clamp(1.09375rem, 0.78125rem + 0.6510416667vw, 1.5625rem);
  --footer-bg-color-sp: #F5F7F8;
  grid-area: footer;
  max-inline-size: calc(100vw - var(--scrollbar-width));
  background-color: var(--main-color);
  color: var(--footer-accent-color);
  display: block grid;
}
@media (768px < width) {
  footer.footer {
    justify-items: center;
  }
}

.footer-inner {
  width: 100%;
  max-width: min(1920px, 100vw - var(--scrollbar-width));
}
@media (768px >= width) {
  .footer-inner.footer_pc {
    display: none;
  }
}
.footer-inner.footer_sp {
  color: var(--main-color);
  background-color: var(--footer-bg-color-sp);
}
@media (768px < width) {
  .footer-inner.footer_sp {
    display: none;
  }
}

.footer_pc {
  padding-block-start: 76px;
  inline-size: clamp(43rem, 4.375rem + 80.46875vw, 68.75rem);
  max-inline-size: min(1100px, 100vw - var(--scrollbar-width));
  display: block grid;
}
@media (768px < width <= 1520px) {
  .footer_pc {
    grid-template-columns: 5fr 4fr;
    column-gap: clamp(4rem, 1.9574468085rem + 4.2553191489vw, 6rem);
    row-gap: clamp(2.5rem, 0.9680851064rem + 3.1914893617vw, 4rem);
  }
  .footer_pc .footer-logo-col {
    grid-row: 1;
    grid-column: 1/span 1;
  }
  .footer_pc .footer-nav-col-group {
    display: contents;
  }
  .footer_pc .footer-nav-col-group .footer-nav-col:nth-child(2n-1) {
    grid-column: 2/span 1;
  }
  .footer_pc .footer-nav-col-group .footer-nav-col:nth-child(2n) {
    grid-column: 1/span 1;
  }
  .footer_pc .footer-nav-col-group .footer-nav-col:nth-child(1) {
    grid-row: 1/span 2;
    align-self: center;
  }
  .footer_pc .footer-btn-col {
    grid-row: 2/span 1;
    grid-column: 1/span 1;
  }
}
@media (1520px < width) {
  .footer_pc {
    inline-size: calc(100% - var(--gutter-outer) * 2);
    max-inline-size: min(1630px, 100vw - var(--scrollbar-width));
    grid-template-columns: 25fr 91fr 34fr;
    column-gap: clamp(2.5rem, -3.2rem + 6vw, 4rem);
  }
  .footer_pc .footer-nav-col-group {
    margin-inline-end: clamp(1.4375rem, -0.9375rem + 2.5vw, 2.0625rem);
    display: grid;
    grid-auto-flow: column;
  }
  .footer_pc .footer-nav-col-group .footer-nav-col {
    padding-inline: clamp(2.40625rem, -1.5125rem + 4.125vw, 3.4375rem);
  }
  .footer_pc .footer-nav-col-group .footer-nav-col:first-child {
    padding-inline-start: 0;
  }
  .footer_pc .footer-nav-col-group .footer-nav-col:last-child {
    padding-inline-end: 0;
  }
  .footer_pc .footer-nav-col-group .footer-nav-col:not(:last-child) {
    position: relative;
  }
  .footer_pc .footer-nav-col-group .footer-nav-col:not(:last-child)::before {
    content: "";
    display: block flow;
    block-size: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border-inline-end: 2px solid var(--footer-accent-color);
  }
}

.footer-nav__item {
  font-size: clamp(0.6875rem, 0.5062154696rem + 0.773480663vw, 1.125rem);
  font-weight: bold;
}
.footer-nav__item:not(:last-child) {
  margin-block-end: 26px;
}

li.footer-nav__nest-item {
  font-size: 14px;
}
li.footer-nav__nest-item:not(:last-child) {
  margin-block-end: 18px;
}

.footer__logo {
  margin-block-end: 39px;
  display: block flow;
  max-inline-size: 250px;
}
.footer__logo > img {
  inline-size: 100%;
}

.footer__address {
  padding-inline-start: 4px;
  font-size: clamp(0.84375rem, 0.6145833333rem + 0.4774305556vw, 1.1875rem);
  line-height: 1.5263157895;
}
.footer__address-label {
  margin-block-start: var(--half-leading);
  margin-block-end: 0.8947368421em;
  font-weight: bold;
}
.footer__address-body {
  margin-block-start: calc(var(--half-leading) * 2);
  font-style: normal;
}

a.footer-nav__btn {
  max-block-size: var(--_footer-btn-block-size);
  font-size: var(--_footer-btn-font-size);
  word-break: keep-all;
  overflow-wrap: anywhere;
  align-content: center;
  margin-block-end: clamp(2.40625rem, 1.71875rem + 1.4322916667vw, 3.4375rem);
  display: block grid;
  grid-template: "text after"/1fr auto;
  align-items: center;
  padding: var(--_btn-pad-y) var(--_btn-pad-x-ed) var(--_btn-pad-y) var(--_btn-pad-x-st);
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border-radius: calc(infinity * 1px);
}
a.footer-nav__btn.contact {
  max-width: 340px;
  --_btn-pad-x-st: clamp(1.3125rem, 0.9375rem + 0.78125vw, 1.875rem);
  --_btn-pad-x-ed: clamp(0.625rem, 0.4583333333rem + 0.3472222222vw, 0.875rem);
  --_btn-pad-y: clamp(0.875rem, 0.625rem + 0.5208333333vw, 1.25rem);
  --_append-spacing: clamp(0.6875rem, 0.4791666667rem + 0.4340277778vw, 1rem);
  --_arrow-size: clamp(0.875rem, 0.625rem + 0.5208333333vw, 1.25rem);
  --_circle-size: clamp(1.3125rem, 0.9375rem + 0.78125vw, 1.875rem);
  background: var(--footer-accent-color);
  color: var(--main-color);
  transition: background-color 0.3s;
}
a.footer-nav__btn.contact:disabled, a.footer-nav__btn.contact[aria-disabled=true] {
  background-color: oklch(from var(--footer-accent-color) calc(l + 0.2) calc(c - 0.1) h);
}
@media (any-hover: hover) {
  a.footer-nav__btn.contact:not(:disabled, [aria-disabled=true]):hover {
    background-color: color-mix(in srgb, var(--footer-accent-color) 70%, var(--main-color));
  }
}
a.footer-nav__btn.contact {
  text-align: revert;
}
a.footer-nav__btn.contact::after {
  grid-area: after;
  content: "";
  display: block flow;
  inline-size: var(--_circle-size);
  block-size: var(--_circle-size);
  margin-inline-start: var(--_append-spacing);
  border-radius: calc(infinity * 1px);
  background: var(--main-color) url("/image/arrow_right_white.png") no-repeat center/var(--_arrow-size);
}

.footer__banner {
  max-inline-size: 340px;
}
.footer__banner > img {
  inline-size: 100%;
}

.footer_sp {
  padding-block-start: 38px;
}
.footer_sp .footer-nav-col {
  padding-inline: calc(var(--gutter-outer) + var(--gutter-inner));
}
.footer_sp .footer-nav__item {
  margin-block-end: 21px;
}

.copylight {
  padding-block-start: clamp(1.5rem, 0.8780339806rem + 2.6537216828vw, 4.0625rem);
  margin-block-end: 22px;
}
.copylight small {
  font-size: 14px;
}
@media (768px < width) {
  .copylight {
    text-align: center;
  }
}
@media (768px >= width) {
  .copylight {
    padding-inline: calc(var(--gutter-outer) + var(--gutter-inner));
  }
}

/* .backToTop */
.backToTop {
  position: fixed;
  z-index: 50;
  right: clamp(0.625rem, -0.4109116022rem + 4.4198895028vw, 3.125rem);
  display: flex;
  flex-direction: column;
  width: clamp(3.125rem, 2.3221685083rem + 3.4254143646vw, 5.0625rem);
  opacity: 0;
  justify-content: space-between;
  align-items: center;
  aspect-ratio: 27/17;
}
.backToTop__img {
  width: 100%;
  height: 100%;
}
.backToTop__img img {
  width: 100%;
  height: 100%;
}