@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;
}
:where(:root):has(:where(:modal)) {
  overflow: hidden;
}

/* =====================================
	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, ol) {
  list-style: none;
}

/* =====================================
	Anchor Tag Defaults
===================================== */
:where(:-moz-any-link) {
  color: inherit;
  text-decoration-skip-ink: auto;
}
:where(:any-link) {
  color: inherit;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* =====================================
	Media Elements Reset
===================================== */
:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

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

:where(svg) {
  fill: currentcolor;
}

/* =====================================
	Form Element Reset
===================================== */
:where(input, button, select, textarea, optgroup) {
  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(:-moz-any-link,
button,
[type=button],
[type=reset],
[type=submit],
label[for],
select,
summary,
[role=tab],
[role=button]) {
  cursor: pointer;
}
:where(:any-link,
button,
[type=button],
[type=reset],
[type=submit],
label[for],
select,
summary,
[role=tab],
[role=button]) {
  cursor: pointer;
}

/* =====================================
	Table Reset
===================================== */
:where(table) {
  border-collapse: collapse;
}

:where(caption, th) {
  text-align: start;
}

:where(th) {
  font-weight: 700;
}

/* =====================================
	Dialog and Popover Reset
===================================== */
:where(dialog, [popover]) {
  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]), [popover]:not(:popover-open)) {
  display: none;
}

/* =====================================
	Accessibility Enhancements
===================================== */
/* アクセシビリティ対応: フォーカス時の視覚効果を抑制 */
:focus:not(:focus-visible) {
  outline: none;
}

/* aria属性対応 */
:where([aria-disabled=true]) {
  cursor: not-allowed;
}

:where([aria-busy=true]) {
  cursor: progress;
}

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

:where([aria-hidden=false][hidden]) {
  display: inline;
  display: initial;
}

:where([aria-hidden=false][hidden]):not(:focus) {
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* 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);
}

:root {
  /* Container Width */
  --container-max-width-md: 600px;
  --container-max-width-lg: 1080px;
  /* Container Inline Gutter */
  --gutter-md: 20px;
  --gutter-lg: 40px;
  /* Header Height */
  --header-height: 0; /* JSで動的に設定 */
}

:root {
  /* Font Family */
  --font-base: "Lora","Shippori Mincho B1", serif;
  --font-display: "Sawarabi Mincho", serif;
  /* Font Weight */
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-black: 900;
  /* Font Leading */
  --leading-relaxed: 2;
  --leading-base: 1.5;
  --leading-tight: 1.2;
  /* Font Color */
  --color-base: var(--color-dark);
  --color-main: var(--color-navy);
  --color-accent: var(--color-brown);
  --color-placeholder: var(--color-grey-5);
  --color-error: var(--color-red);
  /* Background Color */
  --background-base: var(--color-light);
  --background-grey-1: var(--color-grey-6);
  --background-grey-2: var(--color-grey-7);
  --background-dark: var(--color-dark);
  /* Other Color */
  --color-border-base: var(--color-grey-1);
  --color-border-sub: var(--color-grey-2);
  --color-arrow-base: var(--color-grey-2);
  --color-shadow-base: var(--color-grey-4);
  --color-shadow-base-rgb: var(--color-grey-4-rgb);
  --color-shadow-sub: var(--color-grey-3);
  /* Color Palette */
  --color-grey-1: #ddd;
  --color-grey-2: #666;
  --color-grey-3: #96a6bb;
  --color-grey-4: #b3bdcc;
  --color-grey-4-rgb: 179 189 204;
  --color-grey-5: #999;
  --color-grey-6: #e5e9ee;
  --color-grey-7: #eee;
  --color-light: #fff;
  --color-dark: #333;
  --color-navy: #025;
  --color-brown: #A36200;
  --color-red: #A30041;
}

:root {
  /* Unit Conversion */
  /* px to rem */
  --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 {
  /* Base Font Size */
  --fontSize-xs: 10;
  --fontSize-sm: 12;
  --fontSize-base: 14;
  --fontSize-md: 16;
  --fontSize-lg: 18;
  --fontSize-xl: 20;
  --fontSize-2xl: 24;
  --fontSize-3xl: 28;
}
@media screen and (min-width: 768px) {
  :root {
    --fontSize-xs: 12;
    --fontSize-sm: 14;
    --fontSize-base: 16;
    --fontSize-md: 18;
    --fontSize-lg: 20;
    --fontSize-xl: 22;
    --fontSize-2xl: 28;
    --fontSize-3xl: 34;
  }
}

:root {
  /* Base Space */
  --space-xxs: 4;
  --space-xs: 6;
  --space-sm: 8;
  --space-md: 12;
  --space-lg: 16;
  --space-xl: 20;
  --space-2xl: 28;
  --space-3xl: 40;
  --space-4xl: 60;
  --space-5xl: 80;
  --space-6xl: 100;
  --space-7xl: 120;
}
@media screen and (min-width: 768px) {
  :root {
    --space-xxs: 4;
    --space-xs: 8;
    --space-sm: 12;
    --space-md: 16;
    --space-lg: 20;
    --space-xl: 28;
    --space-2xl: 40;
    --space-3xl: 60;
    --space-4xl: 80;
    --space-5xl: 120;
    --space-6xl: 160;
    --space-7xl: 180;
  }
}

:root {
  /* Border Radius */
  --radius-sm: 0.2em;
  --radius-base: 0.5em;
  --radius-md: 1em;
  --radius-lg: 2em;
}

/* ==============================
  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)
  );
}

/* ==============================
  For Trim Half-leading
============================== */
:root {
  /* デザインカンプとブラウザの描画でハーフレディングの値が異なる場合に調整する */
  /* ハーフレディング：line-height（行高）によって生じる上下の余白 */
  --trim-half-leading: calc((1em - 1lh) / 2);
}
@supports not (top: 1lh) {
  :root {
    /* 1lh 単位をサポートしていないブラウザ（古い環境）では機能をオフにする */
    --trim-half-leading: 0;
  }
}

.trim-half-leading {
  /* ハーフレディングの除去 */
  /* 疑似要素を使用する要素には使用不可 */
}
.trim-half-leading::before, .trim-half-leading::after {
  display: block;
  width: 0;
  height: 1px;
  content: "";
}
.trim-half-leading::before {
  margin-top: var(--trim-half-leading);
}
.trim-half-leading::after {
  margin-bottom: var(--trim-half-leading);
}
body {
  position: relative;
}

body::before,
body::after {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 6px;
  height: 100dvh;
  pointer-events: none;
  content: "";
  background-color: var(--color-main);
}

body::before {
  left: 0;
}

body::after {
  right: 0;
}

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;
}

.uppercase {
  text-transform: uppercase;
}

/* Container幅をはみ出して全画面表示 */
.overflow-container {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.overflow-container-left {
  margin-inline: calc(50% - 50vw) 0;
}

.overflow-container-right {
  margin-inline: 0 calc(50% - 50vw);
}

/* 視覚的に非表示にするユーティリティクラス（スクリーンリーダー対応） */
: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;
  border: 0 !important;
  clip-path: inset(50%) !important;
}

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

::-moz-selection {
  color: var(--color-light);
  background-color: color-mix(in srgb, var(--color-base) 50%, var(--color-light));
}

::selection {
  color: var(--color-light);
  background-color: color-mix(in srgb, var(--color-base) 50%, var(--color-light));
}
.works-items {
  display: grid;
  grid-gap: calc(36 * var(--px-to-rem));
  gap: calc(36 * var(--px-to-rem));
  max-width: 924px;
}
@media screen and (min-width: 768px) {
  .works-items {
    --clamp-viewport-min: 768;
    --clamp-viewport-max: 1200;
    --clamp-min: 24;
    --clamp-max: 72;
    flex-grow: 1;
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: clamp(var(--clamp-min) * 1px, var(--clamp-min) * 1px + (var(--clamp-max) - var(--clamp-min)) * (100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)), var(--clamp-max) * 1px);
         column-gap: clamp(var(--clamp-min) * 1px, var(--clamp-min) * 1px + (var(--clamp-max) - var(--clamp-min)) * (100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)), var(--clamp-max) * 1px);
    row-gap: calc(40 * var(--px-to-rem));
  }
}

.works-items__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  grid-gap: 0;
  gap: 0;
}

/* 作品追加時に削除 */
.works-items__title {
  margin-top: 1.375em;
}

.works-items__author {
  margin-top: 0.5em;
}

.works-items__title,
.works-items__author {
  font-size: calc(14 * var(--px-to-rem));
  font-weight: var(--font-medium);
}
@media screen and (min-width: 768px) {
  .works-items__title,
  .works-items__author {
    font-size: calc(16 * var(--px-to-rem));
  }
}

.works-items__image {
  order: -1;
  aspect-ratio: 260/340;
}

.works-items__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.works-items__image:has(.no-image) {
  display: grid;
  place-content: center;
  place-items: center;
  background-color: var(--background-grey-1);
}

.works-items__image .no-image {
  font-size: calc(16 * var(--px-to-rem));
  text-transform: capitalize;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .works-items__image .no-image {
    font-size: calc(18 * var(--px-to-rem));
  }
}

.sub-page {
  padding-block: calc(160 * var(--px-to-rem)) calc(100 * var(--px-to-rem));
  background-image: -webkit-image-set(url(../images/image_common-background.webp) type("image/webp"), url(../images/image_common-background.png) type("image/png"));
  background-image: image-set(url(../images/image_common-background.webp) type("image/webp"), url(../images/image_common-background.png) type("image/png"));
  background-repeat: repeat;
  background-position: 50% 50%;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  .sub-page {
    padding-block: calc(240 * var(--px-to-rem)) calc(160 * var(--px-to-rem));
  }
}

.sp-nav {
  position: fixed;
  inset: 0;
  z-index: 9000;
  visibility: hidden;
  height: 100dvh;
  overflow-y: scroll;
  background-color: var(--color-main);
  background-image: -webkit-image-set(url(../images/image_common-background.webp) type("image/webp"), url(../images/image_common-background.png) type("image/png"));
  background-image: image-set(url(../images/image_common-background.webp) type("image/webp"), url(../images/image_common-background.png) type("image/png"));
  background-repeat: repeat;
  background-position: 50% 50%;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.3s var(--ease-in-out-quad), visibility 0.3s var(--ease-in-out-quad);
}

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

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

.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 {
  font-size: calc(20 * var(--px-to-rem));
  font-weight: var(--font-medium);
  color: var(--color-light);
  transition: 0.3s color var(--ease-out-quad);
}

.sp-nav__item:not(.sp-nav__item--button) a:focus-visible {
  color: color-mix(in srgb, var(--color-main) 20%, var(--color-light));
}

@media (any-hover: hover) {
  .sp-nav__item:not(.sp-nav__item--button) a:hover {
    color: color-mix(in srgb, var(--color-main) 20%, var(--color-light));
  }
}
.sp-nav__item.sp-nav__item--button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: 50px;
  padding: calc(15 * var(--px-to-rem));
  background-color: var(--color-accent);
  transition: 0.3s filter var(--ease-out-quad);
}

.sp-nav__item.sp-nav__item--button a:focus-visible {
  filter: brightness(1.2) contrast(0.8);
}

@media (any-hover: hover) {
  .sp-nav__item.sp-nav__item--button a:hover {
    filter: brightness(1.2) contrast(0.8);
  }
}
.section {
  border-bottom: 1px solid var(--color-border-base);
}

.section-title {
  display: inline-block;
  padding-inline: 1.3em;
  font-size: calc(26 * var(--px-to-rem));
  font-weight: var(--font-medium);
  border-inline: 1px solid currentcolor;
}
@media screen and (min-width: 768px) {
  .section-title {
    padding: 0.3076923077em 0.1923076923em;
    font-size: calc(52 * var(--px-to-rem));
    border-block: 1px solid currentcolor;
    border-inline: none;
    writing-mode: vertical-rl;
  }
}

.page-title span {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding-inline: 0.4em;
  font-size: calc(28 * var(--px-to-rem));
  font-weight: var(--font-medium);
  color: var(--color-main);
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .page-title span {
    font-size: calc(36 * var(--px-to-rem));
  }
}

.page-title span::before,
.page-title span::after {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 100%;
  content: "";
  background-color: currentcolor;
  translate: 0 -50%;
}

.page-title span::before {
  left: 0;
}

.page-title span::after {
  right: 0;
}

.news-title span {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding-inline: 1.3em;
  font-size: calc(26 * var(--px-to-rem));
  font-weight: var(--font-medium);
  color: var(--color-main);
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .news-title span {
    font-size: calc(32 * var(--px-to-rem));
  }
}

.news-title span::before,
.news-title span::after {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 1.3125em;
  content: "";
  background-color: currentcolor;
  translate: 0 -50%;
}

.news-title span::before {
  left: 0;
}

.news-title span::after {
  right: 0;
}

.news-contents {
  width: 100%;
  max-width: 728px;
  margin-top: calc(40 * var(--px-to-rem));
  border-block: 1px solid var(--color-border-base);
}
@media screen and (min-width: 768px) {
  .news-contents {
    margin-top: 0;
  }
}

.news-content + .news-content {
  border-top: 1px solid var(--color-border-base);
}

.news-content:not(:has(a)),
.news-content a {
  position: relative;
  display: flex;
  -moz-column-gap: calc(24 * var(--px-to-rem));
       column-gap: calc(24 * var(--px-to-rem));
  align-items: center;
  justify-content: flex-start;
  padding-block: calc(22 * var(--px-to-rem));
  padding-inline: 0 calc(56 * var(--px-to-rem));
  transition: background-color 0.3s var(--ease-out-quad);
}
@media screen and (min-width: 768px) {
  .news-content:not(:has(a)),
  .news-content a {
    -moz-column-gap: calc(30 * var(--px-to-rem));
         column-gap: calc(30 * var(--px-to-rem));
    padding-block: calc(27 * var(--px-to-rem));
  }
}

.news-content a:focus-visible {
  background-color: color-mix(in srgb, var(--color-main) 10%, var(--color-light));
}
.news-content a:focus-visible::before, .news-content a:focus-visible::after {
  right: 18px;
}

@media (any-hover: hover) {
  .news-content a:hover {
    background-color: color-mix(in srgb, var(--color-main) 10%, var(--color-light));
  }
  .news-content a:hover::before, .news-content a:hover::after {
    right: 18px;
  }
}
.news-content a::before,
.news-content a::after {
  position: absolute;
  right: 21px;
  height: 1px;
  content: "";
  background-color: var(--color-arrow-base);
  transition: right 0.3s var(--ease-out-quad);
}

.news-content a::before {
  top: 54%;
  width: 26px;
  translate: 0 -50%;
}

.news-content a::after {
  top: calc(54% + 1px);
  width: 12px;
  transform-origin: 100% 100%;
  rotate: 21deg;
  translate: 0 -50%;
}

.news-content__date {
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

.news-content__date,
.news-content__text {
  font-size: calc(14 * var(--px-to-rem));
  font-weight: var(--font-medium);
}
@media screen and (min-width: 768px) {
  .news-content__date,
  .news-content__text {
    font-size: calc(16 * var(--px-to-rem));
  }
}

.more-button a {
  --arrow-stretch: 12px;
  position: relative;
  padding: 0 1em 0.5em 0.5em;
  margin-right: var(--arrow-stretch);
  font-size: calc(16 * var(--px-to-rem));
  color: var(--color-main);
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .more-button a {
    min-width: 376px;
    min-height: 80px;
    font-size: calc(18 * var(--px-to-rem));
  }
}

.more-button a:focus-visible::before {
  width: calc(100% + var(--arrow-stretch));
}
.more-button a:focus-visible::after {
  right: calc(-1 * var(--arrow-stretch));
}

@media (any-hover: hover) {
  .more-button a:hover::before {
    width: calc(100% + var(--arrow-stretch));
  }
  .more-button a:hover::after {
    right: calc(-1 * var(--arrow-stretch));
  }
}
.more-button a::before,
.more-button a::after {
  position: absolute;
  bottom: 0;
  height: 1px;
  content: "";
  background-color: var(--color-arrow-base);
}

.more-button a::before {
  left: 0;
  width: 100%;
  translate: 0 -50%;
  transition: width 0.3s var(--ease-out-quad);
}

.more-button a::after {
  right: 0;
  width: 12px;
  transform-origin: 100% 100%;
  rotate: 21deg;
  translate: 0 -50%;
  transition: right 0.3s var(--ease-out-quad);
}

.more-button.more-button--reverse a {
  padding: 0 0.5em 0.5em 1em;
}

.more-button.more-button--reverse a::before {
  right: 0;
  left: auto;
  left: initial;
}

.more-button.more-button--reverse a::after {
  right: auto;
  right: initial;
  left: 0;
  transform-origin: 0% 100%;
  rotate: -21deg;
  transition: left 0.3s var(--ease-out-quad);
}

.more-button.more-button--reverse a:focus-visible::after {
  left: calc(-1 * var(--arrow-stretch));
}

@media (any-hover: hover) {
  .more-button.more-button--reverse a:hover::after {
    left: calc(-1 * var(--arrow-stretch));
  }
}
.main-navigation {
  display: flex;
}

.main-navigation__item:not(:last-child) {
  border-left: 1px solid var(--color-border-base);
}

.main-navigation__item:nth-child(3 of .main-navigation__item) {
  border-right: 1px solid var(--color-border-base);
}

.main-navigation__item a {
  min-height: 7.7777777778em;
  padding: 0.3em 0.6em;
  font-size: calc(16 * var(--px-to-rem));
  font-weight: var(--font-medium);
  writing-mode: vertical-lr;
  transition: 0.3s background-color var(--ease-out-quad);
}
@media screen and (min-width: 768px) {
  .main-navigation__item a {
    font-size: calc(18 * var(--px-to-rem));
  }
}

.main-navigation__item:not(.main-navigation__item--button) a:focus-visible {
  background-color: color-mix(in srgb, var(--color-main) 10%, var(--color-light));
}

@media (any-hover: hover) {
  .main-navigation__item:not(.main-navigation__item--button) a:hover {
    background-color: color-mix(in srgb, var(--color-main) 10%, var(--color-light));
  }
}
.main-navigation__item.main-navigation__item--button {
  margin-inline: 1.1em 10px;
}

.main-navigation__item {
  display: flex;
}

.main-navigation__item.main-navigation__item--button a {
  padding: 0.4em;
  color: var(--color-light);
  background-color: var(--color-main);
  transition: 0.3s background-color var(--ease-out-quad);
}

.main-navigation__item.main-navigation__item--button a:focus-visible {
  background-color: color-mix(in srgb, var(--color-main) 80%, var(--color-light));
}

@media (any-hover: hover) {
  .main-navigation__item.main-navigation__item--button a:hover {
    background-color: color-mix(in srgb, var(--color-main) 80%, var(--color-light));
  }
}
.header {
  position: sticky;
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  padding-block: 16px;
  pointer-events: none;
  background-color: transparent;
}
@media screen and (min-width: 768px) {
  .header {
    padding-block: 28px;
  }
}

.header a {
  display: block;
}

.header a,
.header button {
  pointer-events: auto;
}

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

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

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

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

.header__logo a:focus-visible {
  filter: brightness(1.5) contrast(0.5);
}

@media (any-hover: hover) {
  .header__logo a:hover {
    filter: brightness(1.5) contrast(0.5);
  }
}
.header__logo img {
  transition: filter 0.3s var(--ease-out-quad);
}

.header.is-active .header__logo img {
  filter: contrast(0) brightness(2);
}

.header__pc-nav {
  margin-top: 1.4em;
}

.hamburger {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
  height: 100%;
  aspect-ratio: 1;
  cursor: pointer;
  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-main);
  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: var(--color-main);
  border-radius: inherit;
  transition: inherit;
}
.hamburger__line::before {
  top: -10px;
  z-index: 2;
}
.hamburger__line::after {
  top: 10px;
  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-light);
}
.hamburger[aria-expanded=true] .hamburger__line::before {
  transform: rotate(-45deg);
}
.hamburger[aria-expanded=true] .hamburger__line::after {
  transform: rotate(45deg);
}

.hamburger__text {
  position: absolute;
  bottom: 14px;
  left: 50%;
  visibility: visible;
  width: 100%;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-main);
  letter-spacing: -0.02em;
  opacity: 1;
  translate: -50% 0;
  transition: opacity 0.3s var(--ease-in-out-quad);
}

.hamburger__text.is-hidden {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}

.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(--color-main);
}
@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.7058823529em;
  font-size: calc(16 * var(--px-to-rem));
  background-color: var(--background-base);
  border: 1px solid var(--color-border-base);
}

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

.form__note {
  position: relative;
  padding-top: 4.8em;
  margin-top: 1.3em;
  font-size: calc(14 * var(--px-to-rem));
  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 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: 1.2em;
  font-size: calc(14 * var(--px-to-rem));
  font-weight: var(--font-medium);
  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.2em;
  height: 1.2em;
  background-color: var(--color-light);
  border: 1px solid var(--color-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-main);
  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));
  background-image: -webkit-image-set(url(../images/image_footer-background.webp) type("image/webp"), url(../images/image_footer-background.png) type("image/png"));
  background-image: image-set(url(../images/image_footer-background.webp) type("image/webp"), url(../images/image_footer-background.png) type("image/png"));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  .footer {
    padding-block: calc(85 * var(--px-to-rem)) calc(61 * var(--px-to-rem));
  }
}

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

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

@media screen and (min-width: 768px) {
  .footer__nav {
    --clamp-viewport-min: 768;
    --clamp-viewport-max: 1200;
    --clamp-min: 0;
    --clamp-max: 20;
    margin-right: var(--clamp);
  }
}

.footer__info-block {
  display: flex;
  -moz-column-gap: calc(40 * var(--px-to-rem));
       column-gap: calc(40 * var(--px-to-rem));
  align-items: center;
}
@media screen and (min-width: 768px) {
  .footer__info-block {
    -moz-column-gap: calc(70 * var(--px-to-rem));
         column-gap: calc(70 * var(--px-to-rem));
    --clamp-viewport-min: 768;
    --clamp-viewport-max: 1200;
    --clamp-min: 10;
    --clamp-max: 40;
    margin-left: var(--clamp);
  }
}

.footer__logo {
  flex-shrink: 0;
  width: 84px;
  aspect-ratio: 106/144;
}
@media screen and (min-width: 768px) {
  .footer__logo {
    width: 106px;
  }
}

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

.footer__logo a:focus-visible {
  filter: brightness(1.5) contrast(0.5);
}

@media (any-hover: hover) {
  .footer__logo a:hover {
    filter: brightness(1.5) contrast(0.5);
  }
}
.footer__address {
  font-style: normal;
}

.footer__company {
  font-size: calc(16 * var(--px-to-rem));
  font-weight: var(--font-medium);
  line-height: 1.5238095238;
}
@media screen and (min-width: 768px) {
  .footer__company {
    font-size: calc(21 * var(--px-to-rem));
  }
}

.footer__address-text {
  margin-top: 1.8333333333em;
  font-size: calc(12 * var(--px-to-rem));
  line-height: 1.6666666667;
}

.footer__copyright {
  display: block;
  margin-top: 1.5em;
  font-size: calc(12 * var(--px-to-rem));
  line-height: 1.6666666667;
  letter-spacing: 0.05em;
}

.cta-button input,
.cta-button a {
  display: inline-grid;
  place-content: center;
  min-width: 300px;
  min-height: 74px;
  font-size: calc(16 * var(--px-to-rem));
  color: var(--color-light);
  letter-spacing: 0.05em;
  background-color: var(--color-main);
  box-shadow: 10px 20px 40px rgba(var(--color-shadow-base-rgb)/1);
  transition: background-color 0.3s var(--ease-out-quad);
}
@media screen and (min-width: 768px) {
  .cta-button input,
  .cta-button a {
    min-width: 376px;
    min-height: 80px;
    font-size: calc(20 * var(--px-to-rem));
  }
}

.cta-button input:focus-visible,
.cta-button a:focus-visible {
  background-color: color-mix(in srgb, var(--color-main) 80%, var(--color-light));
}

@media (any-hover: hover) {
  .cta-button input:hover,
  .cta-button a:hover {
    background-color: color-mix(in srgb, var(--color-main) 80%, var(--color-light));
  }
}
.cta-button.cta-button--secondary input,
.cta-button.cta-button--secondary a {
  color: var(--color-main);
  background-color: var(--color-light);
  border: 1px solid currentcolor;
}

.cta-button.cta-button--secondary input:focus-visible,
.cta-button.cta-button--secondary a:focus-visible {
  background-color: color-mix(in srgb, var(--color-main) 10%, var(--color-light));
}

@media (any-hover: hover) {
  .cta-button.cta-button--secondary input:hover,
  .cta-button.cta-button--secondary a:hover {
    background-color: color-mix(in srgb, var(--color-main) 10%, var(--color-light));
  }
}
.container {
  width: 100%;
  max-width: calc(var(--container-max-width-md) + var(--gutter-md) * 2);
  padding-inline: var(--gutter-md);
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .container {
    max-width: calc(var(--container-max-width-lg) + var(--gutter-lg) * 2);
    padding-inline: var(--gutter-lg);
  }
}

.about-content {
  padding: 80px 64px;
  writing-mode: vertical-rl;
}
@media screen and (min-width: 768px) {
  .about-content {
    padding: 100px 94px;
  }
}

.about-content__lead {
  font-size: calc(26 * var(--px-to-rem));
  font-weight: var(--font-medium);
}
@media screen and (min-width: 768px) {
  .about-content__lead {
    font-size: calc(32 * var(--px-to-rem));
  }
}

.about-content__lead span {
  display: inline-block;
  width: 1px;
  height: 2.1875em;
  background-color: var(--color-border-sub);
}

.about-content__text {
  font-size: calc(16 * var(--px-to-rem));
  font-weight: var(--font-medium);
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .about-content__text {
    font-size: calc(18 * var(--px-to-rem));
  }
}

.about-content__text--break {
  margin-right: 1lh;
}

.about-content__lead + .about-content__text {
  margin-right: calc(46 * var(--px-to-rem));
  text-indent: 1em;
}
@media screen and (min-width: 768px) {
  .about-content__lead + .about-content__text {
    margin-right: calc(70 * var(--px-to-rem));
  }
}

.works {
  padding-block: calc(80 * var(--px-to-rem));
  background-image: -webkit-image-set(url(../images/image_works-background.webp) type("image/webp"), url(../images/image_works-background.png) type("image/png"));
  background-image: image-set(url(../images/image_works-background.webp) type("image/webp"), url(../images/image_works-background.png) type("image/png"));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  .works {
    padding-block: calc(120 * var(--px-to-rem)) calc(143 * var(--px-to-rem));
  }
}

@media screen and (min-width: 768px) {
  .works__wrapper {
    display: flex;
    -moz-column-gap: 40px;
         column-gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
  }
}

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

.works__items {
  margin-top: calc(40 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .works__items {
    margin-top: 0;
  }
}

.service {
  position: relative;
  padding-block: calc(80 * var(--px-to-rem));
  background-image: -webkit-image-set(url(../images/image_common-background.webp) type("image/webp"), url(../images/image_common-background.png) type("image/png"));
  background-image: image-set(url(../images/image_common-background.webp) type("image/webp"), url(../images/image_common-background.png) type("image/png"));
  background-repeat: repeat;
  background-position: 50% 50%;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  .service {
    padding-block: calc(145 * var(--px-to-rem)) calc(129 * var(--px-to-rem));
  }
}

@media screen and (min-width: 768px) {
  .service__wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
  }
}

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

.service__items {
  width: 100%;
  max-width: 728px;
  margin-top: calc(40 * var(--px-to-rem));
  border-block: 1px solid var(--color-border-base);
}
@media screen and (min-width: 768px) {
  .service__items {
    margin-top: 0;
  }
}

.service__item {
  padding-block: calc(16 * var(--px-to-rem)) calc(18 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .service__item {
    padding-block: calc(19 * var(--px-to-rem)) calc(21 * var(--px-to-rem));
  }
}

.service__item + .service__item {
  border-top: 1px solid var(--color-border-base);
}

.service-item__title {
  display: flex;
  -moz-column-gap: 0.6em;
       column-gap: 0.6em;
  align-items: center;
  font-size: calc(22 * var(--px-to-rem));
  font-weight: var(--font-medium);
  text-wrap: balance;
}
@media screen and (min-width: 768px) {
  .service-item__title {
    font-size: calc(28 * var(--px-to-rem));
  }
}

.service-item__title .number {
  display: inline-grid;
  flex-shrink: 0;
  place-content: center;
  place-items: center;
  width: 2.125em;
  aspect-ratio: 1;
  font-size: 0.5714285714em;
  font-weight: var(--font-normal);
  color: var(--color-light);
  letter-spacing: 0.025em;
  background-color: var(--color-main);
  border-radius: 50%;
}

.service-item__lists {
  padding-left: 3.2em;
  margin-top: 0.7em;
  font-size: calc(14 * var(--px-to-rem));
  font-weight: var(--font-medium);
  line-height: 1.75;
}
@media screen and (min-width: 768px) {
  .service-item__lists {
    font-size: calc(16 * var(--px-to-rem));
  }
}

.service-item__list::before {
  content: "◉";
}

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

.service__decoration {
  position: absolute;
  top: 0;
  left: 50%;
  min-width: min(1080px, 90%);
  box-shadow: 4px 8px 8px rgba(var(--color-shadow-base-rgb)/0.5);
  translate: -50% -50%;
}

.representative {
  position: relative;
  padding-block: calc(160 * var(--px-to-rem));
  background-image: -webkit-image-set(url(../images/image_common-background.webp) type("image/webp"), url(../images/image_common-background.png) type("image/png"));
  background-image: image-set(url(../images/image_common-background.webp) type("image/webp"), url(../images/image_common-background.png) type("image/png"));
  background-repeat: repeat;
  background-position: 50% 50%;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  .representative {
    padding-block: calc(247 * var(--px-to-rem)) calc(261 * var(--px-to-rem));
  }
}

.representative__wrapper {
  display: flex;
  flex-direction: column-reverse;
  row-gap: calc(40 * var(--px-to-rem));
  align-items: center;
}
@media screen and (min-width: 768px) {
  .representative__wrapper {
    flex-direction: row-reverse;
    -moz-column-gap: 40px;
         column-gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 850px;
    margin-inline: auto;
  }
}

@media screen and (min-width: 768px) {
  .representative__text-content {
    flex: 1;
    max-width: 430px;
  }
}

.representative__title {
  font-size: calc(26 * var(--px-to-rem));
  font-weight: var(--font-medium);
}
@media screen and (min-width: 768px) {
  .representative__title {
    font-size: calc(32 * var(--px-to-rem));
  }
}

.representative__title .small {
  display: block;
  font-size: 0.5625em;
}

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

.representative__title + .representative__text {
  margin-top: 1.2em;
}

.representative__image {
  width: min(320px, 100%);
}
@media screen and (min-width: 768px) {
  .representative__image {
    margin-top: calc(100 * var(--px-to-rem));
  }
}

.representative__decoration {
  --top: calc(80 * var(--px-to-rem));
  --bottom: calc(80 * var(--px-to-rem));
  --inline-position: max(20px, calc(50% - 540px));
  position: absolute;
  width: 24px;
  aspect-ratio: 1;
  border-right: 1px solid var(--color-grey-5);
  border-bottom: 1px solid var(--color-grey-5);
}
@media screen and (min-width: 768px) {
  .representative__decoration {
    --top: calc(120 * var(--px-to-rem));
    --bottom: calc(120 * var(--px-to-rem));
    width: 30px;
  }
}

div:nth-child(1 of .representative__decoration) {
  top: var(--top);
  left: var(--inline-position);
}

div:nth-child(2 of .representative__decoration) {
  top: var(--top);
  right: var(--inline-position);
  scale: -1 1;
}

div:nth-child(3 of .representative__decoration) {
  bottom: var(--bottom);
  left: var(--inline-position);
  scale: 1 -1;
}

div:nth-child(4 of .representative__decoration) {
  right: max(20px, 50% - 580px);
  bottom: var(--bottom);
  scale: -1 -1;
}

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

.page-privacy__content dt {
  font-size: calc(18 * var(--px-to-rem));
  font-weight: var(--font-medium);
  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));
}
@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 {
  margin-top: calc(50 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-privacy__content dd + dt {
    margin-top: calc(64 * var(--px-to-rem));
  }
}

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

.page-news .nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.page-news .page-numbers {
  display: grid;
  place-content: center;
  min-width: 1.2lh;
  height: 1.2lh;
  padding-inline: 0.2em;
  font-size: calc(14 * var(--px-to-rem));
  font-weight: var(--font-medium);
  transition: filter 0.3s var(--ease-out-quad);
}
@media screen and (min-width: 768px) {
  .page-news .page-numbers {
    font-size: calc(16 * var(--px-to-rem));
  }
}
@media screen and (min-width: 768px) {
  .page-news .page-numbers {
    font-size: calc(16 * var(--px-to-rem));
  }
}
.page-news .page-numbers.current {
  color: var(--color-light);
  background-color: var(--color-main);
}
.page-news .page-numbers.prev,
.page-news .page-numbers.next {
  position: relative;
}
.page-news .page-numbers.prev::after,
.page-news .page-numbers.next::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  aspect-ratio: 1;
  content: "";
  background-color: var(--color-main);
  clip-path: polygon(40% 0, 90% 50%, 40% 100%, 30% 90%, 70% 50%, 30% 10%);
  translate: -50% -50%;
}
.page-news .page-numbers.prev::after {
  scale: -1 1;
}
.page-news .page-numbers:not(.current):focus-visible {
  filter: brightness(1.5) contrast(0.5);
}
@media (any-hover: hover) {
  .page-news .page-numbers:not(.current):hover {
    filter: brightness(1.5) contrast(0.5);
  }
}

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

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  word-wrap: normal !important;
  border: 0;
  clip-path: inset(50%);
}

.page-news-detail__date {
  font-size: calc(14 * var(--px-to-rem));
  text-align: right;
}
@media screen and (min-width: 768px) {
  .page-news-detail__date {
    font-size: calc(16 * var(--px-to-rem));
  }
}

.page-news-detail__title {
  padding-bottom: 0.5em;
  font-size: calc(24 * var(--px-to-rem));
  font-weight: var(--font-medium);
  color: var(--color-main);
  border-bottom: 1px solid currentcolor;
}
@media screen and (min-width: 768px) {
  .page-news-detail__title {
    font-size: calc(32 * var(--px-to-rem));
  }
}

.page-news-detail__date + .page-news-detail__title {
  margin-top: 0.5em;
}

.page-news-detail__content {
  margin-top: calc(36 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-news-detail__content {
    margin-top: calc(48 * var(--px-to-rem));
  }
}
.page-news-detail__content * + *:not(li, figcaption) {
  margin-top: 1lh;
}
.page-news-detail__content .wp-block-columns > * + * {
  margin-top: 0;
}
.page-news-detail__content h1,
.page-news-detail__content h2,
.page-news-detail__content h3,
.page-news-detail__content h4,
.page-news-detail__content h5 {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding-inline: 1.3em;
  font-weight: var(--font-medium);
  color: var(--color-main);
  border-inline: 1px solid currentcolor;
}
.page-news-detail__content h1 {
  font-size: calc(22 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-news-detail__content h1 {
    font-size: calc(28 * var(--px-to-rem));
  }
}
.page-news-detail__content h2 {
  font-size: calc(20 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-news-detail__content h2 {
    font-size: calc(24 * var(--px-to-rem));
  }
}
.page-news-detail__content h3 {
  font-size: calc(18 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-news-detail__content h3 {
    font-size: calc(22 * var(--px-to-rem));
  }
}
.page-news-detail__content h4 {
  font-size: calc(16 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-news-detail__content h4 {
    font-size: calc(20 * var(--px-to-rem));
  }
}
.page-news-detail__content h5 {
  font-size: calc(16 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-news-detail__content h5 {
    font-size: calc(18 * var(--px-to-rem));
  }
}
.page-news-detail__content p,
.page-news-detail__content a,
.page-news-detail__content li,
.page-news-detail__content figcaption {
  font-size: calc(14 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-news-detail__content p,
  .page-news-detail__content a,
  .page-news-detail__content li,
  .page-news-detail__content figcaption {
    font-size: calc(16 * var(--px-to-rem));
  }
}
.page-news-detail__content a:not(.wp-block-button__link) {
  color: var(--color-main);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: filter 0.3s var(--ease-out-quad);
}
.page-news-detail__content a:focus-visible {
  filter: brightness(1.5) contrast(0.5);
}
@media (any-hover: hover) {
  .page-news-detail__content a:hover {
    filter: brightness(1.5) contrast(0.5);
  }
}
.page-news-detail__content img {
  width: auto;
  max-width: 100%;
  height: auto;
}
.page-news-detail__content ul li {
  position: relative;
  padding-left: 1em;
}
.page-news-detail__content ul li::before {
  position: absolute;
  top: 0.35lh;
  left: 0;
  width: 0.3em;
  aspect-ratio: 1;
  content: "";
  background-color: var(--color-main);
  border-radius: 50%;
}
.page-news-detail__content ol li {
  position: relative;
  padding-left: 1.2em;
  counter-increment: num;
}
.page-news-detail__content ol li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: counter(num, decimal) ".";
}
.page-news-detail__content table {
  width: 100%;
  max-width: 800px;
  table-layout: auto;
}
.page-news-detail__content table,
.page-news-detail__content td,
.page-news-detail__content th {
  border-collapse: collapse;
  border: 1px solid var(--color-border-sub);
}
.page-news-detail__content td,
.page-news-detail__content th {
  padding: 0.5em;
}
.page-news-detail__content th {
  background-color: var(--background-grey-2);
}
.page-news-detail__content td {
  background-color: var(--color-light);
}

.page-news-detail__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  margin-inline: auto;
  margin-top: calc(80 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-news-detail__buttons {
    gap: 64px;
    margin-top: calc(100 * var(--px-to-rem));
  }
}

.wp-block-button__link {
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  font-size: 1.125em;
  color: #fff;
  text-decoration: none;
  background-color: #32373c;
  border-radius: 9999px;
  box-shadow: none;
}

.wp-block-button__link {
  box-sizing: border-box;
  display: inline-block;
  align-content: center;
  height: 100%;
  text-align: center;
  word-break: break-word;
  cursor: pointer;
}

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

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

.page-contact__text.page-contact__text--error {
  color: var(--color-error);
}

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

.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: 2em;
  font-size: calc(20 * var(--px-to-rem));
  font-weight: var(--font-medium);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 768px) {
  .page-contact__thanks-lead {
    font-size: calc(24 * var(--px-to-rem));
  }
}

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

.page-contact__button {
  margin-top: calc(100 * var(--px-to-rem));
  text-align: center;
}
@media screen and (min-width: 768px) {
  .page-contact__button {
    margin-top: calc(120 * var(--px-to-rem));
  }
}

.page-contact__button-area {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--px-to-rem));
  align-items: center;
  justify-content: center;
  margin-top: calc(64 * var(--px-to-rem));
}
@media screen and (min-width: 768px) {
  .page-contact__button-area {
    gap: calc(24 * var(--px-to-rem));
    margin-top: calc(80 * var(--px-to-rem));
  }
}

.page-contact table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
}
.page-contact table td,
.page-contact table th {
  padding: 10px;
  border: none;
}
.page-contact table th {
  width: 30%;
  min-width: 160px;
  font-weight: var(--font-bold);
  vertical-align: top;
  text-align: left;
}

.not-found__code {
  margin-left: 0.3em;
  font-size: calc(96 * var(--px-to-rem));
  font-weight: var(--font-bold);
  line-height: 1.2;
  color: var(--color-main);
  text-align: center;
  letter-spacing: 0.3em;
}
@media screen and (min-width: 768px) {
  .not-found__code {
    font-size: calc(120 * var(--px-to-rem));
  }
}

.not-found__text {
  font-size: calc(46 * var(--px-to-rem));
  font-weight: var(--font-medium);
  line-height: 1.2;
  color: var(--color-main);
  text-align: center;
  text-transform: capitalize;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .not-found__text {
    font-size: calc(60 * var(--px-to-rem));
  }
}

.not-found__text + .not-found__description {
  margin-top: 4em;
}

.not-found__description {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}

.not-found__description-text {
  font-size: calc(14 * var(--px-to-rem));
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media screen and (min-width: 768px) {
  .not-found__description-text {
    font-size: calc(16 * var(--px-to-rem));
  }
}

.not-found__button {
  margin-top: calc(60 * var(--px-to-rem));
  text-align: center;
}
@media screen and (min-width: 768px) {
  .not-found__button {
    margin-top: calc(80 * var(--px-to-rem));
  }
}

.news {
  padding-block: calc(80 * var(--px-to-rem));
  background-image: -webkit-image-set(url(../images/image_common-background.webp) type("image/webp"), url(../images/image_common-background.png) type("image/png"));
  background-image: image-set(url(../images/image_common-background.webp) type("image/webp"), url(../images/image_common-background.png) type("image/png"));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  .news {
    padding-block: calc(100 * var(--px-to-rem));
  }
}

@media screen and (min-width: 768px) {
  .news-layout {
    display: flex;
    flex-wrap: wrap;
    gap: calc(60 * var(--px-to-rem));
    align-items: flex-start;
    justify-content: space-between;
  }
}

@media screen and (min-width: 768px) {
  .news-layout__title {
    flex-shrink: 0;
  }
}

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

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: max(600px, 100svh);
  padding-block: 30.4347826087svh 26.0869565217svh;
  background-image: -webkit-image-set(url(../images/image_hero-background.webp) type("image/webp"), url(../images/image_hero-background.png) type("image/png"));
  background-image: image-set(url(../images/image_hero-background.webp) type("image/webp"), url(../images/image_hero-background.png) type("image/png"));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.hero__message {
  display: grid;
  place-content: center;
  place-items: center;
  width: 100%;
  writing-mode: vertical-rl;
}

.hero__message-line {
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1440;
  --clamp-min: 36;
  --clamp-max: 63;
  display: block;
  min-height: 6.36em;
  padding: 0.18em 0;
  font-size: clamp(var(--clamp-min) * 1px, var(--clamp-min) * 1px + (var(--clamp-max) - var(--clamp-min)) * (100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)), var(--clamp-max) * 1px);
  line-height: 1.7142857143;
  border-right: 1px solid var(--color-border-base);
}

.hero__message-line:last-child {
  border-left: 1px solid var(--color-border-base);
}

.about {
  padding-block: calc(80 * var(--px-to-rem));
  background-image: -webkit-image-set(url(../images/image_common-background.webp) type("image/webp"), url(../images/image_common-background.png) type("image/png"));
  background-image: image-set(url(../images/image_common-background.webp) type("image/webp"), url(../images/image_common-background.png) type("image/png"));
  background-repeat: repeat;
  background-position: 50% 50%;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  .about {
    padding-block: calc(114 * var(--px-to-rem)) calc(184 * var(--px-to-rem));
  }
}

.about__title {
  position: relative;
  z-index: 10;
  text-align: center;
}

.about__title span {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding-inline: 0.7em;
  font-size: calc(32 * var(--px-to-rem));
  font-weight: var(--font-normal);
  color: var(--color-main);
}
@media screen and (min-width: 768px) {
  .about__title span {
    font-size: calc(52 * var(--px-to-rem));
  }
}

.about__title span::before,
.about__title span::after {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 1.3461538462em;
  content: "";
  background-color: currentcolor;
  translate: 0 -50%;
}

.about__title span::before {
  left: 0;
}

.about__title span::after {
  right: 0;
}

.about__wrapper {
  height: 500px;
  margin-top: calc(-20 * var(--px-to-rem));
  background-image: -webkit-image-set(url(../images/image_about-content-background.webp) type("image/webp"), url(../images/image_about-content-background.png) type("image/png"));
  background-image: image-set(url(../images/image_about-content-background.webp) type("image/webp"), url(../images/image_about-content-background.png) type("image/png"));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  box-shadow: 6px 20px 40px rgba(var(--color-shadow-base-rgb)/0.4);
}
@media screen and (min-width: 768px) {
  .about__wrapper {
    height: 760px;
    margin-top: calc(-34 * var(--px-to-rem));
  }
}

.about__scroll-container {
  height: inherit;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.about__scroll-container.is-dragging {
  cursor: grabbing;
}

.about__scroll-container::-webkit-scrollbar {
  display: none;
}

.about__wrapper {
  position: relative;
}

.about__wrapper::before,
.about__wrapper::after {
  position: absolute;
  top: 0;
  width: 15.625%;
  height: 100%;
  pointer-events: none;
  content: "";
  opacity: 0;
  transition: opacity 0.5s var(--ease-in-out-sine);
}
@media screen and (min-width: 768px) {
  .about__wrapper::before,
  .about__wrapper::after {
    width: 27.7777777778%;
  }
}

.about__wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--color-shadow-sub) 10%, transparent);
}

.about__wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--color-shadow-sub) 10%, transparent);
}

.about__wrapper:has(.about__scroll-container.is-shadow-left)::before {
  opacity: 1;
}

.about__wrapper:has(.about__scroll-container.is-shadow-right)::after {
  opacity: 1;
}

.about__content {
  height: 100%;
}