@charset "UTF-8";
/** 共通項目 **/
:where([data-animation]:not([data-inview-stagger])):where(.in-view),
:where([data-animation][data-inview-stagger] > *):where(.in-view) {
  animation-name: var(--animation-name);
  animation-duration: var(--animation-duration, 1.75s);
  animation-fill-mode: var(--animation-fill-mode, forwards);
  animation-timing-function: var(--animation-timing-function, var(--ease-out-quint));
  animation-delay: var(--animation-delay, 0);
}
.pc{
  display: block;
}
.sp{
  display: none;
}
@media screen and (max-width: 768px) {
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
}
/** フェード系 **/
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-in-blur {
  0% {
    filter: blur(var(--blur));
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes fade-out-blur {
  0% {
    filter: blur(0);
    opacity: 1;
  }
  100% {
    filter: blur(var(--blur));
    opacity: 0;
  }
}
@keyframes fade-in-left {
  0% {
    opacity: 0;
    translate: var(--translate);
  }
  100% {
    opacity: 1;
    translate: 0;
  }
}
@keyframes fade-out-left {
  0% {
    opacity: 1;
    translate: 0;
  }
  100% {
    opacity: 0;
    translate: calc(var(--translate) * -1);
  }
}
@keyframes fade-in-left-blur {
  0% {
    filter: blur(var(--blur));
    opacity: 0;
    translate: var(--translate);
  }
  100% {
    filter: blur(0);
    opacity: 1;
    translate: 0;
  }
}
@keyframes fade-out-left-blur {
  0% {
    filter: blur(0);
    opacity: 1;
    translate: 0;
  }
  100% {
    filter: blur(var(--blur));
    opacity: 0;
    translate: calc(var(--translate) * -1);
  }
}
@keyframes fade-in-right {
  0% {
    opacity: 0;
    translate: calc(var(--translate) * -1);
  }
  100% {
    opacity: 1;
    translate: 0;
  }
}
@keyframes fade-out-right {
  0% {
    opacity: 1;
    translate: 0;
  }
  100% {
    opacity: 0;
    translate: var(--translate);
  }
}
@keyframes fade-in-right-blur {
  0% {
    filter: blur(var(--blur));
    opacity: 0;
    translate: calc(var(--translate) * -1);
  }
  100% {
    filter: blur(0);
    opacity: 1;
    translate: 0;
  }
}
@keyframes fade-out-right-blur {
  0% {
    filter: blur(0);
    opacity: 1;
    translate: 0;
  }
  100% {
    filter: blur(var(--blur));
    opacity: 0;
    translate: var(--translate);
  }
}
@keyframes fade-in-up {
  0% {
    opacity: 0;
    translate: 0 var(--translate);
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes fade-out-up {
  0% {
    opacity: 1;
    translate: 0 0;
  }
  100% {
    opacity: 0;
    translate: 0 calc(var(--translate) * -1);
  }
}
@keyframes fade-in-up-blur {
  0% {
    filter: blur(var(--blur));
    opacity: 0;
    translate: 0 var(--translate);
  }
  100% {
    filter: blur(0);
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes fade-out-up-blur {
  0% {
    filter: blur(0);
    opacity: 1;
    translate: 0 0;
  }
  100% {
    filter: blur(var(--blur));
    opacity: 0;
    translate: 0 calc(var(--translate) * -1);
  }
}
:where([data-animation^=fade-in]) {
  --translate: 0.5rem;
  --blur: 0.35rem;
  --animation-duration: 1.75s;
  --animation-timing-function: var(--ease-out-quint);
}

:where([data-animation^=fade-in]:not([data-inview-stagger])),
:where([data-animation^=fade-in][data-inview-stagger] > *) {
  opacity: 0;
}

:where([data-animation=fade-in]) {
  --animation-name: fade-in;
}

:where([data-animation=fade-in-blur]) {
  --animation-name: fade-in-blur;
}

:where([data-animation=fade-in-left]) {
  --animation-name: fade-in-left;
}

:where([data-animation=fade-in-left-blur]) {
  --animation-name: fade-in-left-blur;
}

:where([data-animation=fade-in-right]) {
  --animation-name: fade-in-right;
}

:where([data-animation=fade-in-right-blur]) {
  --animation-name: fade-in-right-blur;
}

:where([data-animation=fade-in-up]) {
  --animation-name: fade-in-up;
}

:where([data-animation=fade-in-up-blur]) {
  --animation-name: fade-in-up-blur;
}

/** 広がり系 **/
@keyframes expand-circle {
  0% {
    filter: blur(0.5rem);
    -webkit-mask-size: 0% 0%;
            mask-size: 0% 0%;
    opacity: var(--initial-opacity);
  }
  100% {
    filter: blur(0);
    -webkit-mask-size: var(--mask-size);
            mask-size: var(--mask-size);
    opacity: 1;
  }
}
:where([data-animation=expand-circle]) {
  --animation-name: expand-circle;
  --animation-duration: 2s;
  --animation-timing-function: var(--ease-out-quart);
  --edge-blur-size: 2.75rem;
  --mask-size: 200% 200%;
  --mask-position: center center;
  --initial-opacity: 0.5;
}

:where([data-animation=expand-circle]:not([data-inview-stagger])),
:where([data-animation=expand-circle][data-inview-stagger] > *) {
  -webkit-mask-image: radial-gradient(circle, #000 50%, transparent calc(50% + var(--edge-blur-size)));
          mask-image: radial-gradient(circle, #000 50%, transparent calc(50% + var(--edge-blur-size)));
  -webkit-mask-position: var(--mask-position);
          mask-position: var(--mask-position);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 0% 0%;
          mask-size: 0% 0%;
}

/** ゆらめき系 **/
@property --flick-gradient-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@keyframes flick-in {
  0% {
    --flick-gradient-position: 0%;
    filter: blur(0.5rem);
    opacity: 0;
    translate: var(--flick-translate);
  }
  100% {
    --flick-gradient-position: 100%;
    filter: blur(0);
    opacity: 1;
    translate: 0;
  }
}
:where([data-animation^=flick-in]) {
  --animation-name: flick-in;
  --animation-duration: 2.5s;
  --animation-timing-function: var(--ease-out-quart);
}

:where([data-animation=flick-in-right]) {
  --flick-gradient-deg: 115deg;
  --flick-translate: -0.4rem;
}

:where([data-animation=flick-in-left]) {
  --flick-gradient-deg: -115deg;
  --flick-translate: 0.4rem;
}

:where([data-animation=flick-in-up]) {
  --flick-gradient-deg: 160deg;
  --flick-translate: 0 0.5rem;
}

:where([data-animation=flick-in-down]) {
  --flick-gradient-deg: -160deg;
  --flick-translate: 0 -0.5rem;
}

:where([data-animation^=flick-in]:not([data-inview-stagger])),
:where([data-animation^=flick-in][data-inview-stagger] > *) {
  opacity: 0;
}
@supports (width: var(--flick-gradient-position)) {
  :where([data-animation^=flick-in]:not([data-inview-stagger])),
  :where([data-animation^=flick-in][data-inview-stagger] > *) {
    -webkit-mask-image: linear-gradient(var(--flick-gradient-deg), #000 var(--flick-gradient-position), transparent calc(var(--flick-gradient-position) + 4rem));
            mask-image: linear-gradient(var(--flick-gradient-deg), #000 var(--flick-gradient-position), transparent calc(var(--flick-gradient-position) + 4rem));
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
  }
}

/******************************
  フォント
******************************/
:root {
  --font-fallback: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-sans: "Noto Sans JP", var(--font-fallback);
  --font-serif: "Noto Serif JP", serif, var(--font-fallback);
  --font-heading: "FOT-筑紫Aオールド明朝 Pr6 L", var(--font-fallback);
  --font-number: "Shippori Mincho B1", var(--font-fallback);
  --font-icon: "icomoon";
}

:root {
  --font-weight-normal: 350;
  --font-weight-bold: 600;
}

/******************************
  イージング
******************************/
:root {
  /** sine **/
  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  /** quad **/
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  /** cubic **/
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  /** quart **/
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  /** quint **/
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  /** expo **/
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  /** circ **/
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  /** back **/
  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

:root {
  --vw: 1vw;
  --z-index-header: 3;
  --radius-md: 0.9rem;
  --radius-lg: 3.5rem;
  --border-md: 0.1rem;
  --sidemenu-width: 7.75rem;
  --sidemenu-sp-height: 7rem;
  --infinity: calc(infinity * 1px);
  --breakpoint-sm: 525;
  --breakpoint-sm-px: 525px;
  --breakpoint-md: 1024;
  --breakpoint-md-px: 1024px;
  --breakpoint-lg: 1440;
  --breakpoint-lg-px: 1440px;
  font-size: calc(var(--vw) / 1.44);
  font-weight: var(--font-weight-normal);
}
@media (max-width: 1440px) {
  :root {
    --sidemenu-width: 9.25rem;
  }
}
@media (max-width: 1024px) {
  :root {
    --sidemenu-width: 8.55rem;
    font-size: calc(var(--vw) / 0.768);
  }
}
@media (max-width: 525px) {
  :root {
    --sidemenu-width: 7.5rem;
    font-size: calc(var(--vw) / 0.375);
  }
}

/******************************
  セクション間隔
******************************/
:root {
  --section-gap-xs: 6rem;
  --section-gap-sm: 10rem;
  --section-gap-md: 15rem;
  --section-gap-lg: 20rem;
  --section-gap-xl: 24rem;
}
@media (max-width: 1024px) {
  :root {
    --section-gap-xs: 4rem;
    --section-gap-sm: 7rem;
    --section-gap-md: 11.5rem;
    --section-gap-lg: 16rem;
    --section-gap-xl: 20rem;
  }
}
@media (max-width: 525px) {
  :root {
    --section-gap-xs: 4.5rem;
    --section-gap-sm: 6rem;
    --section-gap-md: 8rem;
    --section-gap-lg: 12rem;
    --section-gap-xl: 16rem;
  }
}

/******************************
  フォントサイズ
******************************/
:root {
  --font-size-xs: 1.2rem;
  --font-size-sm: 1.42rem;
  --font-size-md: 1.5rem;
  --font-size-lg: 1.85rem;
  --font-size-xl: 2.25rem;
  --font-size-xxl: 2.75rem;
  --font-size-xxxl: 3.25rem;
}
@media (max-width: 1024px) {
  :root {
    --font-size-sm: 1.35rem;
    --font-size-md: 1.46rem;
    --font-size-lg: 1.75rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 2.5rem;
    --font-size-xxxl: 2.85rem;
  }
}
@media (max-width: 525px) {
  :root {
    --font-size-md: 1.46rem;
    --font-size-lg: 1.75rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 2.5rem;
    --font-size-xxxl: 2.85rem;
  }
}

/******************************
  カラーパレット
******************************/
:root {
  --color-charcoal: #333;
  --color-charcoal-rgb: 51 51 51;
  --color-green-black: #212321;
  --color-green-black-rgb: 33 35 33;
  --color-ash-brown: #6d6251;
  --color-ash-brown-rgb: 109 98 81;
  --color-silver: #949594;
  --color-silver-rgb: 148 149 148;
  --color-smoke: #f5f4f4;
  --color-smoke-rgb: 245 244 244;
  --color-white: #fff;
  --color-white-rgb: 255 255 255;
  --color-blue-gray-dark: #254a66;
  --color-blue-gray-dark-rgb: 37 74 102;
  --color-teal: #2f9bb1;
  --color-teal-rgb: 47 155 177;
  --color-medium-turquoise: #61c0e2;
  --color-medium-turquoise-rgb: 97 192 226;
  --color-sky-blue: #6cc0dd;
  --color-sky-blue-rgb: 108 192 221;
  --color-pale-blue-light: #c2e4f6;
  --color-pale-blue-light-rgb: 194 228 246;
  --color-powder-blue: #8dbbc1;
  --color-powder-blue-rgb: 141 187 193;
  --color-pale-blue-dark: #668295;
  --color-pale-blue-dark-rgb: 102 130 149;
  --color-duck-egg: #9dafb1;
  --color-duck-egg-rgb: 157 175 177;
  --color-beau-blue: #90b0c6;
  --color-beau-blue-rgb: 144 176 198;
  --color-mist-blue: #d9eff7;
  --color-mist-blue-rgb: 217 239 247;
  --color-blue-gray-light: #ddeaf1;
  --color-blue-gray-light-rgb: 221 234 241;
  --color-almond-green: #497d69;
  --color-almond-green-rgb: 73 125 105;
  --color-turquoise-green: #6d988a;
  --color-turquoise-green-rgb: 109 152 138;
  --color-android-green: #9fb86a;
  --color-android-green-rgb: 159 184 106;
  --color-yellow-green: #abcc64;
  --color-yellow-green-rgb: 171 204 100;
  --color-moss-green: #8cbe96;
  --color-moss-green-rgb: 140 190 150;
  --color-magic-mint: #b1e3c8;
  --color-magic-mint-rgb: 177 227 200;
  --color-tea-green: #ccf4d1;
  --color-tea-green-rgb: 204 244 209;
  --color-pale-green-light: #ddf1df;
  --color-pale-green-light-rgb: 221 241 223;
  --color-pale-mint: #e4efe7;
  --color-pale-mint-rgb: 228 239 231;
  --color-fawn: #9d927f;
  --color-fawn-rgb: 157 146 127;
  --color-sand: #b8a676;
  --color-sand-rgb: 184 166 118;
  --color-wheat: #c4a96e;
  --color-wheat-rgb: 196 169 110;
  --color-corn: #f3df6b;
  --color-corn-rgb: 243 223 107;
  --color-lime: #dae66c;
  --color-lime-rgb: 218 230 108;
  --color-cream: #fffadd;
  --color-cream-rgb: 255 250 221;
  --color-yellow-light: #f1fad2;
  --color-yellow-light-rgb: 241 250 210;
  --color-ivory: #eadfc6;
  --color-ivory-rgb: 234 223 198;
  --color-isabelline: #e9e5cd;
  --color-isabelline-rgb: 233 229 205;
  --color-floral-white: #efe8d8;
  --color-floral-white-rgb: 239 232 216;
  --color-pale-purple: #bc9fc0;
  --color-pale-purple-rgb: 188 159 192;
  --color-purple-gray-light: #aea1b0;
  --color-purple-gray-light-rgb: 174 161 176;
  --color-ghost-white: #f4edf5;
  --color-ghost-white-rgb: 244 237 245;
  --color-brand-facebook: #0866ff;
  --color-brand-facebook-rgb: 8 102 255;
  --color-brand-x: #000;
  --color-brand-x-rgb: 0 0 0;
}

/******************************
  テーマカラー
******************************/
body:where([data-theme-color=blue]) {
  --color-primary: var(--color-beau-blue);
  --color-primary-rgb: var(--color-beau-blue-rgb);
  --color-gradation01: var(--color-lime);
  --color-gradation01-rgb: var(--color-lime-rgb);
  --color-gradation02: var(--color-teal);
  --color-gradation02-rgb: var(--color-teal-rgb);
  --color-bg-base: var(--color-white);
  --color-bg-base-rgb: var(--color-white-rgb);
  --color-bg-primary: var(--color-blue-gray-light);
  --color-bg-primary-rgb: var(--color-blue-gray-light-rgb);
  --color-bg-secondary: var(--color-white);
  --color-bg-secondary-rgb: var(--color-white-rgb);
  --color-text-base: var(--color-charcoal);
  --color-text-base-rgb: var(--color-charcoal-rgb);
  --color-text-primary: var(--color-blue-gray-dark);
  --color-text-primary-rgb: var(--color-blue-gray-dark-rgb);
  --color-text-contrast: var(--color-white);
  --color-text-contrast-rgb: var(--color-white-rgb);
  --color-brand-line: var(--color-android-green);
  --color-brand-line-rgb: var(--color-android-green-rgb);
}

body:where([data-theme-color=green]) {
  --color-primary: var(--color-moss-green);
  --color-primary-rgb: var(--color-moss-green-rgb);
  --color-gradation01: var(--color-magic-mint);
  --color-gradation01-rgb: var(--color-magic-mint-rgb);
  --color-gradation02: var(--color-medium-turquoise);
  --color-gradation02-rgb: var(--color-medium-turquoise-rgb);
  --color-bg-base: var(--color-white);
  --color-bg-base-rgb: var(--color-white-rgb);
  --color-bg-primary: var(--color-pale-green-light);
  --color-bg-primary-rgb: var(--color-pale-green-light-rgb);
  --color-bg-secondary: var(--color-white);
  --color-bg-secondary-rgb: var(--color-white-rgb);
  --color-text-base: var(--color-charcoal);
  --color-text-base-rgb: var(--color-charcoal-rgb);
  --color-text-primary: var(--color-almond-green);
  --color-text-primary-rgb: var(--color-almond-green-rgb);
  --color-text-contrast: var(--color-white);
  --color-text-contrast-rgb: var(--color-white-rgb);
  --color-brand-line: var(--color-yellow-green);
  --color-brand-line-rgb: var(--color-yellow-green-rgb);
}

body:where([data-theme-color=beige]) {
  --color-primary: var(--color-wheat);
  --color-primary-rgb: var(--color-wheat-rgb);
  --color-gradation01: var(--color-isabelline);
  --color-gradation01-rgb: var(--color-isabelline-rgb);
  --color-gradation02: var(--color-sand);
  --color-gradation02-rgb: var(--color-sand-rgb);
  --color-bg-base: var(--color-white);
  --color-bg-base-rgb: var(--color-white-rgb);
  --color-bg-primary: var(--color-floral-white);
  --color-bg-primary-rgb: var(--color-floral-white-rgb);
  --color-bg-secondary: var(--color-white);
  --color-bg-secondary-rgb: var(--color-white-rgb);
  --color-text-base: var(--color-green-black);
  --color-text-base-rgb: var(--color-green-black-rgb);
  --color-text-primary: var(--color-ash-brown);
  --color-text-primary-rgb: var(--color-ash-brown-rgb);
  --color-text-contrast: var(--color-white);
  --color-text-contrast-rgb: var(--color-white-rgb);
  --color-brand-line: var(--color-android-green);
  --color-brand-line-rgb: var(--color-android-green-rgb);
}

body {
  --page-width: 100cqw;
  --page-half-width: 50cqw;
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: 1.7;
  color: var(--color-text-base);
  letter-spacing: 0.02em;
  background: var(--color-bg-base);
}

main {
  container-type: inline-size;
}

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}
/* 
.wow {
  animation-duration: 1.15s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}
.wow.fadeIn {
  opacity: 0;
} */

.slick-slide {
  outline: none;
}

.simplebar-content-wrapper {
  outline: none;
}

.simplebar-track {
  --scrollbar-size: 7px;
}
.simplebar-track.simplebar-vertical {
  width: var(--scrollbar-size);
}
.simplebar-track.simplebar-horizontal {
  height: var(--scrollbar-size);
}

.simplebar-scrollbar::before {
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
}

@keyframes c-bg-theme-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.75;
  }
}
.c-bg-theme {
  --blur-size: 10rem;
  position: relative;
  display: flow-root;
  isolation: isolate;
}
.c-bg-theme::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background-image: var(--bg-images);
  background-repeat: repeat-y;
  background-position: var(--bg-positions);
  background-size: 100% var(--total-height);
  opacity: 0;
  animation: c-bg-theme-fade-in 2s 0.85s ease forwards;
}
.c-bg-theme[data-bg-type=primary] {
  /******************************
  設定項目
  ******************************/
  --total-height: 120rem;
  /* --deco-color: var(--color-pale-blue-light); */
  --deco1-size: 35rem;
  --deco1-x-percent: 3;
  --deco1-y-percent: 3;
  --deco2-size: 35rem;
  --deco2-x-percent: 95;
  --deco2-y-percent: 20;
  --deco3-size: 60rem;
  --deco3-x-percent: 2;
  --deco3-y-percent: 55;
  --deco4-size: 44rem;
  --deco4-x-percent: 97;
  --deco4-y-percent: 70;
  background-color: var(--color-bg-primary);
  /******************************
  計算式
  ******************************/
  --half-height: calc(var(--total-height) / 2);
  --height-ratio: calc(var(--total-height) / 100);
  --deco1-radius: calc(var(--deco1-size) / 2);
  --deco1-position: left calc(var(--deco1-y-percent) * var(--height-ratio) - var(--half-height));
  --deco1-image: radial-gradient(
    var(--deco1-radius) var(--deco1-radius) at calc(var(--deco1-x-percent) * 1%),
    var(--deco-color) max(calc(100% - var(--blur-size)), 50%),
    transparent
  );
  --deco2-radius: calc(var(--deco2-size) / 2);
  --deco2-position: left calc(var(--deco2-y-percent) * var(--height-ratio) - var(--half-height));
  --deco2-image: radial-gradient(
    var(--deco2-radius) var(--deco2-radius) at calc(var(--deco2-x-percent) * 1%),
    var(--deco-color) max(calc(100% - var(--blur-size)), 50%),
    transparent
  );
  --deco3-radius: calc(var(--deco3-size) / 2);
  --deco3-position: left calc(var(--deco3-y-percent) * var(--height-ratio) - var(--half-height));
  --deco3-image: radial-gradient(
    var(--deco3-radius) var(--deco3-radius) at calc(var(--deco3-x-percent) * 1%),
    var(--deco-color) max(calc(100% - var(--blur-size)), 50%),
    transparent
  );
  --deco4-radius: calc(var(--deco4-size) / 2);
  --deco4-position: left calc(var(--deco4-y-percent) * var(--height-ratio) - var(--half-height));
  --deco4-image: radial-gradient(
    var(--deco4-radius) var(--deco4-radius) at calc(var(--deco4-x-percent) * 1%),
    var(--deco-color) max(calc(100% - var(--blur-size)), 50%),
    transparent
  );
  --bg-images: var(--deco1-image), var(--deco2-image), var(--deco3-image), var(--deco4-image);
  --bg-positions: var(--deco1-position), var(--deco2-position), var(--deco3-position), var(--deco4-position);
}
.c-bg-theme[data-bg-type=primary]:where(body[data-theme-color=green], body[data-theme-color=green] *) {
  --deco-color: var(--color-tea-green);
}
.c-bg-theme[data-bg-type=primary]:where(body[data-theme-color=beige], body[data-theme-color=beige] *) {
  --deco-color: var(--color-ivory);
}
@media (max-width: 525px) {
  .c-bg-theme[data-bg-type=primary] {
    --total-height: 220rem;
  }
}
.c-bg-theme[data-bg-type=secondary] {
  /******************************
  設定項目
  ******************************/
  --total-height: 200rem;
  --deco1-width: 55rem;
  --deco1-height: 43rem;
  --deco1-x-percent: 75;
  --deco1-y-percent: 4;
  --deco1-color: var(--color-yellow-light);
  --deco2-width: 50rem;
  --deco2-height: 26rem;
  --deco2-x-percent: 0;
  --deco2-y-percent: 35;
  --deco2-color: var(--color-yellow-light);
  --deco3-width: 43rem;
  --deco3-height: 26rem;
  --deco3-x-percent: 100;
  --deco3-y-percent: 60;
  --deco3-color: var(--color-pale-mint);
  --deco4-width: 40rem;
  --deco4-height: 40rem;
  --deco4-x-percent: 3;
  --deco4-y-percent: 80;
  --deco4-color: var(--color-pale-mint);
  background-color: var(--color-bg-secondary);
  /******************************
  計算式
  ******************************/
  --half-height: calc(var(--total-height) / 2);
  --height-ratio: calc(var(--total-height) / 100);
  --deco1-radius: calc(var(--deco1-size) / 2);
  --deco1-position: left calc(var(--deco1-y-percent) * var(--height-ratio) - var(--half-height));
  --deco1-image: radial-gradient(
    var(--deco1-width) var(--deco1-height) at calc(var(--deco1-x-percent) * 1%),
    var(--deco1-color) max(calc(100% - var(--blur-size)), 50%),
    transparent
  );
  --deco2-radius: calc(var(--deco2-size) / 2);
  --deco2-position: left calc(var(--deco2-y-percent) * var(--height-ratio) - var(--half-height));
  --deco2-image: radial-gradient(
    var(--deco2-width) var(--deco2-height) at calc(var(--deco2-x-percent) * 1%),
    var(--deco2-color) max(calc(100% - var(--blur-size)), 50%),
    transparent
  );
  --deco3-radius: calc(var(--deco3-size) / 2);
  --deco3-position: left calc(var(--deco3-y-percent) * var(--height-ratio) - var(--half-height));
  --deco3-image: radial-gradient(
    var(--deco3-width) var(--deco3-height) at calc(var(--deco3-x-percent) * 1%),
    var(--deco3-color) max(calc(100% - var(--blur-size)), 50%),
    transparent
  );
  --deco4-radius: calc(var(--deco4-size) / 2);
  --deco4-position: left calc(var(--deco4-y-percent) * var(--height-ratio) - var(--half-height));
  --deco4-image: radial-gradient(
    var(--deco4-width) var(--deco4-height) at calc(var(--deco4-x-percent) * 1%),
    var(--deco4-color) max(calc(100% - var(--blur-size)), 50%),
    transparent
  );
  --bg-images: var(--deco1-image), var(--deco2-image), var(--deco3-image), var(--deco4-image);
  --bg-positions: var(--deco1-position), var(--deco2-position), var(--deco3-position), var(--deco4-position);
}
.c-bg-theme[data-bg-type=secondary]:where(body[data-theme-color=green], body[data-theme-color=green] *) {
  --deco1-color: rgb(var(--color-mist-blue-rgb) / 85%);
  --deco2-color: var(--color-cream);
  --deco3-color: rgb(var(--color-tea-green-rgb) / 50%);
  --deco4-color: rgb(var(--color-mist-blue-rgb) / 85%);
}
.c-bg-theme[data-bg-type=secondary]:where(body[data-theme-color=beige], body[data-theme-color=beige] *) {
  --deco1-color: rgb(var(--color-cream-rgb) / 75%);
  --deco2-color: rgb(var(--color-ivory-rgb) / 50%);
  --deco3-color: rgb(var(--color-ivory-rgb) / 50%);
  --deco4-color: rgb(var(--color-cream-rgb) / 75%);
}
@media (max-width: 1024px) {
  .c-bg-theme[data-bg-type=secondary] {
    --total-height: 250rem;
  }
}
@media (max-width: 525px) {
  .c-bg-theme[data-bg-type=secondary] {
    --total-height: 300rem;
    --deco1-width: 26rem;
    --deco1-height: 24rem;
    --deco1-x-percent: 75;
    --deco1-y-percent: 4;
    --deco2-width: 50rem;
    --deco2-height: 26rem;
    --deco2-x-percent: 0;
    --deco2-y-percent: 35;
    --deco3-width: 38rem;
    --deco3-height: 23rem;
    --deco3-x-percent: 100;
    --deco3-y-percent: 60;
    --deco4-width: 35rem;
    --deco4-height: 35rem;
    --deco4-x-percent: 3;
    --deco4-y-percent: 80;
  }
}

.c-button01 {
  --border-width: 0.2rem;
  --button-color: var(--color-primary);
  --button-bg-color: var(--button-color);
  --button-text-color: var(--color-text-contrast);
  --button-border-color: var(--button-color);
  --button-hover-bg-color: var(--color-text-contrast);
  --button-hover-text-color: var(--button-color);
  --button-hover-border-color: var(--button-color);
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 7em;
  min-height: 3em;
  padding: 0.25em 1em;
  overflow: hidden;
  font-family: var(--font-serif);
  line-height: 1.2;
  color: var(--button-text-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--button-bg-color);
  border: var(--border-width) solid var(--button-border-color);
  border-radius: var(--infinity);
  transition: color 0.3s, border-color 0.3s;
}
.c-button01::before {
  position: absolute;
  top: 50%;
  z-index: -1;
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  content: "";
  background-color: var(--button-hover-bg-color);
  filter: blur(0.1rem);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.55s, scale 0s;
  transition-delay: 0s, 0.55s;
  scale: 0.1;
  translate: 0 -50%;
}
.c-button01:hover {
  color: var(--button-hover-text-color);
  border-color: var(--button-hover-border-color);
}
.c-button01:hover::before {
  opacity: 1;
  transition: opacity 0.5s, scale 1.35s var(--ease-out-expo);
  transition-delay: 0s;
  scale: 1.2;
}

@property --c-button02-blink-space-deg {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --c-button02-blink-position-deg {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.c-button02 {
  --color: var(--button-color, #9c9c9c);
  --glint-color: var(--color-white);
  --blank-height: 1.55em;
  --border-width: 1px;
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  min-width: 300px;
  padding: 1em 2em;
  font-family: var(--font-tit) !important;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.3;
  color: #3a3a3a;
  text-align: left;
  white-space: nowrap;
  border-radius: var(--infinity);
  transition: opacity 0.3s;
  background-color: #fff;
}

.c-button02:where([data-button-color=contrast]) {
  --color: var(--color-text-contrast);
}
.c-button02:where([data-button-size=sm]) {
  min-width: 10em;
  min-height: 3.5em;
  font-size: var(--font-size-xs);
}
.c-button02::before {
  --c-button02-blink-space-deg: 0deg;
  --c-button02-blink-position-deg: 90deg;
  --sqrt3: 1.732;
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background: conic-gradient(from var(--c-button02-blink-position-deg), transparent, var(--color) var(--c-button02-blink-space-deg), var(--color) calc(360deg - var(--c-button02-blink-space-deg)), transparent);
  background-clip: border-box;
  background-origin: border-box;
  border: var(--border-width) solid transparent;
  border-radius: var(--infinity);
          mask-image: conic-gradient(from 60deg at calc(100% - var(--blank-height) * var(--sqrt3) / 2) 50%, transparent 0deg, #000 0deg), linear-gradient(#000 0 0);
  -webkit-mask-clip: border-box, padding-box;
          mask-clip: border-box, padding-box;
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
}
@keyframes c-button02-blink {
  0% {
    --c-button02-blink-space-deg: 0deg;
    --c-button02-blink-position-deg: 35deg;
  }
  50% {
    --c-button02-blink-space-deg: 80deg;
  }
  100% {
    --c-button02-blink-space-deg: 0deg;
    --c-button02-blink-position-deg: -250deg;
  }
}
.c-button02::after {
  position: absolute;
  top: 50%;
  right: 30px;
  z-index: -1;
  width: 50px;
  background-image: url(../images/btn_arr.png);
  background-size: 100% auto;
  aspect-ratio: 102/57;
  content: "";
  /* background-color: var(--color); */
  transition: all 0.2s ease;
  translate: 0% -50%;
}
.c-button02:hover {
  opacity: 0.75;
}
@media (hover: hover) {
  .c-button02:hover::before {
    animation-name: c-button02-blink;
    animation-duration: 0.46s;
    animation-fill-mode: forwards;
  }
  .c-button02:hover::after {
    transition: all 0.55s 0.2s var(--ease-out-expo);
    translate: 60% -50%;
  }
}

:root {
  --c-button03-height-ratio: 0.915;
}

@keyframes toggle-button-fade-out {
  0% {
    filter: blur(0);
    opacity: 1;
    -webkit-mask-position: 0% center;
            mask-position: 0% center;
  }
  100% {
    filter: blur(0.75rem);
    opacity: 0;
    -webkit-mask-position: 0% center;
            mask-position: 0% center;
  }
}
@keyframes toggle-button-fade-in {
  0% {
    filter: blur(0.75rem);
    opacity: 0;
    translate: -0.12rem 0;
    -webkit-mask-position: 100% center;
            mask-position: 100% center;
  }
  100% {
    filter: blur(0);
    opacity: 1;
    translate: 0 0;
    -webkit-mask-position: 0% center;
            mask-position: 0% center;
  }
}
.c-button03 {
  --edge-blur-size: 3rem;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1/var(--c-button03-height-ratio);
  overflow: hidden;
  color: var(--button-text-color, var(--color-text-contrast));
  background-color: var(--button-color, var(--color-silver));
  isolation: isolate;
  container-type: size;
}
.c-button03::before {
  --farthest-corner: calc(hypot(100cqw, 100cqh) + var(--edge-blur-size) * 2);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 141.4cqw;
  width: var(--farthest-corner);
  height: 141.4cqh;
  height: var(--farthest-corner);
  aspect-ratio: 1/1;
  content: "";
  background-color: var(--button-shadow-color, currentcolor);
  filter: blur(var(--edge-blur-size));
  border-radius: var(--infinity);
  opacity: 0;
  transition: opacity 0.32s ease, scale 0s 0.32s, filter 0s 0.32s;
  scale: 0;
  translate: -50% -50%;
}
.c-button03:hover::before {
  filter: blur(0);
  opacity: 0.13;
  transition: opacity 0.35s ease, scale 0.85s var(--ease-out-quart), filter 0.35s;
  scale: 1;
}
.c-button03__inner {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  padding: 1.45rem 0.75rem;
  font-size: var(--font-size-sm);
}
@container (width <= 8rem) {
  .c-button03__inner {
    font-size: var(--font-size-xs);
  }
}
@media (max-width: 1024px) {
  .c-button03__inner {
    padding-block: 0.95rem;
  }
}
.c-button03__item {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-row: 1/2;
  grid-column: 1/2;
  row-gap: 0.2em;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.c-button03__item:where([data-button-type=toggle] *) {
  opacity: 0;
  -webkit-mask-image: linear-gradient(135deg, #000 calc(50% - var(--edge-blur-size) / 2), transparent calc(50% + var(--edge-blur-size) / 2));
          mask-image: linear-gradient(135deg, #000 calc(50% - var(--edge-blur-size) / 2), transparent calc(50% + var(--edge-blur-size) / 2));
  -webkit-mask-size: calc(300% + var(--edge-blur-size)) 100%;
          mask-size: calc(300% + var(--edge-blur-size)) 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0% center;
          mask-position: 0% center;
}
.c-button03__item:where([data-button-type=toggle] *):where(.c-button03:not([data-open]) [data-toggle-type=open]) {
  opacity: 1;
}
.c-button03__item:where([data-button-type=toggle] *):where(.c-button03[data-open=false] [data-toggle-type=open], .c-button03[data-open=true] [data-toggle-type=close]) {
  animation-name: toggle-button-fade-in;
  animation-duration: 1.25s;
  animation-timing-function: var(--ease-out-expo);
  animation-delay: 0.15s;
  animation-fill-mode: forwards;
}
.c-button03__item:where([data-button-type=toggle] *):where(.c-button03[data-open=true] [data-toggle-type=open], .c-button03[data-open=false] [data-toggle-type=close]) {
  animation-name: toggle-button-fade-out;
  animation-duration: 0.75s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
.c-button03__icon {
  margin-inline: auto;
  font-size: 2em;
}
.c-button03__text {
  font-family: var(--font-serif);
  line-height: 1;
  letter-spacing: 0.05em;
}

@keyframes c-button04-ripple {
  0% {
    filter: blur(0);
    opacity: 1;
    scale: 1;
  }
  100% {
    filter: blur(0.05rem);
    opacity: 0;
    scale: 1.7;
  }
}
.c-button04 {
  --edge-size: 0.75rem;
  --ripple-color: rgb(var(--color-primary-rgb) / 25%);
  position: static;
  display: grid;
}
.c-button04__ripple {
  z-index: -1;
  grid-row: 1/1;
  grid-column: 1/1;
  pointer-events: none;
  border: 0.1rem solid transparent;
  border-radius: var(--infinity);
  box-shadow: 0 0 1rem var(--ripple-color), 0 0 1rem var(--ripple-color) inset;
  opacity: 0;
  scale: 1;
}
@media not (hover: hover) {
  .c-button04__ripple {
    display: none;
  }
}
.c-button04__ripple.is-hovered {
  animation-name: c-button04-ripple;
  animation-duration: 3.5s;
  animation-timing-function: var(--ease-out-expo);
  animation-delay: 0.03s;
}
.c-button04__inner {
  position: relative;
  z-index: 0;
  display: flex;
  grid-row: 1/1;
  grid-column: 1/1;
  column-gap: 1em;
  align-items: center;
  min-height: 4.75em;
  padding: 1rem 2rem;
  color: var(--color-text-primary);
  border-radius: var(--infinity);
  container-type: inline-size;
}
.c-button04__inner::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-color: var(--color-smoke);
  border-radius: var(--infinity);
  box-shadow: 0 0 1rem rgb(var(--color-text-primary-rgb)/25%), inset 0 0 var(--edge-size) var(--edge-size) rgb(var(--color-white-rgb)/75%);
  transition: scale 0.35s var(--ease-out-cubic);
  scale: 1;
}
@media (hover: hover) {
  .c-button04__inner:hover::before {
    scale: 1.015;
  }
}
.c-button04__text {
  line-height: 1.35;
}

.c-career {
  --date-width: 4em;
  --row-gap: 0.5em;
  --left-gap: 0.85rem;
  container-type: inline-size;
}
.c-career__heading {
  position: relative;
  display: block;
  padding-bottom: 0.55em;
  padding-left: var(--left-gap);
  margin-bottom: 0.7em;
  font-family: var(--font-serif);
  font-size: calc(var(--font-size-lg) * 1.1);
  color: var(--color-text-primary);
  letter-spacing: 0.1em;
  border-bottom: var(--border-md) solid var(--color-text-base);
}
.c-career__list {
  padding-left: var(--left-gap);
  font-size: var(--font-size-sm);
}
.c-career__item {
  display: grid;
  grid-template-columns: auto 1fr;
  line-height: 1.7;
}
@container (width <= 31rem) {
  .c-career__item {
    display: block;
  }
}
.c-career__item:where(.c-career__item + *) {
  margin-top: var(--row-gap);
}
.c-career__date {
  grid-column: 1;
  min-width: var(--date-width);
  margin-right: 1em;
}
.c-career__content {
  display: block;
  grid-column: 2;
}

.c-detect-scroll {
  --gradation-size-y: 2.5em;
  --gradation-size-x: 1.5em;
  --top-gradation: 0%;
  --right-gradation: 0%;
  --bottom-gradation: 0%;
  --left-gradation: 0%;
}
.c-detect-scroll .simplebar-content-wrapper[data-scrollable*=y] {
  --top-gradation: var(--gradation-size-y);
  --bottom-gradation: var(--gradation-size-y);
}
.c-detect-scroll .simplebar-content-wrapper[data-scrollable*=y][data-scroll-state*=top] {
  --top-gradation: 0%;
}
.c-detect-scroll .simplebar-content-wrapper[data-scrollable*=y][data-scroll-state*=bottom] {
  --bottom-gradation: 0%;
}
.c-detect-scroll .simplebar-content-wrapper[data-scrollable*=x] {
  --right-gradation: var(--gradation-size-x);
  --left-gradation: var(--gradation-size-x);
}
.c-detect-scroll .simplebar-content-wrapper[data-scrollable*=x][data-scroll-state*=right] {
  --right-gradation: 0%;
}
.c-detect-scroll .simplebar-content-wrapper[data-scrollable*=x][data-scroll-state*=left] {
  --left-gradation: 0%;
}
.c-detect-scroll .simplebar-content-wrapper:is([data-scrollable*=x], [data-scrollable*=y]) {
  -webkit-mask-composite: source-out, source-over, source-over, source-over;
          mask-composite: subtract, add, add, add;
  -webkit-mask-image: linear-gradient(to right, #000, #000 100%), linear-gradient(to bottom, #000, transparent var(--top-gradation)), linear-gradient(to top, #000, transparent var(--bottom-gradation)), linear-gradient(to left, #000, transparent var(--right-gradation)), linear-gradient(to right, #000, transparent var(--left-gradation));
          mask-image: linear-gradient(to right, #000, #000 100%), linear-gradient(to bottom, #000, transparent var(--top-gradation)), linear-gradient(to top, #000, transparent var(--bottom-gradation)), linear-gradient(to left, #000, transparent var(--right-gradation)), linear-gradient(to right, #000, transparent var(--left-gradation));
}

.c-gradation-board {
  --gradation-color1: var(--color-gradation01);
  --gradation-color2: var(--color-gradation02);
  --gradation-deg: 135deg;
  --gradation-width: 2rem;
  --border-radius: var(--radius-md);
  --bg-color: var(--color-bg-secondary);
  --border-width: 0.45rem;
  position: relative;
  z-index: 0;
  background-color: var(--bg-color);
  border-radius: var(--border-radius);
}
.c-gradation-board::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-image: repeating-linear-gradient(var(--gradation-deg), var(--gradation-color2), var(--gradation-color1), var(--gradation-color2), var(--gradation-color1), var(--gradation-color2));
  background-clip: border-box;
  background-origin: border-box;
  border: var(--border-width) solid transparent;
  border-radius: inherit;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
          mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-clip: padding-box, border-box;
          mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.c-heading01 {
  --letter-spacing: 0.08em;
  position: relative;
  z-index: 0;
  font-size: 4rem;
  color: var(--color-text-primary);
  text-align: center;
}
@media (max-width: 1024px) {
  .c-heading01 {
    font-size: 3.5rem;
  }
}
@media (max-width: 525px) {
  .c-heading01 {
    font-size: 3.15rem;
  }
}
.c-heading01__main {
  position: relative;
  display: block;
  padding-bottom: 0.45em;
  padding-left: var(--letter-spacing);
  font-family: var(--font-heading);
  font-weight: bold;
  line-height: 1.35;
  letter-spacing: var(--letter-spacing);
}
.c-heading01__main::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 4.75rem;
  height: var(--border-md);
  content: "";
  background-color: currentcolor;
  translate: -50%;
}
.c-heading01__caption {
  display: block;
  padding-left: var(--letter-spacing);
  margin-top: 0.5em;
  font-family: var(--font-serif);
  font-size: 0.6em;
  letter-spacing: var(--letter-spacing);
}

.c-heading02 {
  --letter-spacing: 0.08em;
  position: relative;
  z-index: 0;
  padding-bottom: 0.45em;
  padding-left: var(--letter-spacing);
  font-family: var(--font-heading);
  font-size: 3.53rem;
  line-height: 1.35;
  color: var(--color-text-primary);
  text-align: center;
  letter-spacing: var(--letter-spacing);
}
@media (max-width: 1024px) {
  .c-heading02 {
    font-size: 3.15rem;
  }
}
@media (max-width: 525px) {
  .c-heading02 {
    font-size: 2.75rem;
  }
}
.c-heading02::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 4.75rem;
  height: var(--border-md);
  content: "";
  background-color: currentcolor;
  translate: -50%;
}

.c-heading03 {
  --gradation-color1: var(--color-gradation01);
  --gradation-color2: var(--color-gradation02);
  --gradation-deg: 135deg;
  --gradation-width: 2rem;
  --bg-color: var(--color-bg-secondary);
  --border-width: 0.45rem;
  --letter-spacing: 0.08em;
  --padding-inline: 2em;
  position: relative;
  z-index: 0;
  padding-block: 1em;
  padding-right: var(--padding-inline);
  padding-left: calc(var(--padding-inline) + var(--letter-spacing));
  font-family: var(--font-heading);
  font-size: var(--font-size-xxl);
  line-height: 1.35;
  color: var(--color-text-primary);
  text-align: center;
  letter-spacing: var(--letter-spacing);
  background-color: var(--color-bg-secondary);
  border-radius: var(--infinity);
}
.c-heading03::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-image: repeating-linear-gradient(var(--gradation-deg), var(--gradation-color2), var(--gradation-color1), var(--gradation-color2), var(--gradation-color1), var(--gradation-color2));
  background-clip: border-box;
  background-origin: border-box;
  border: inherit;
  border: var(--border-width) solid transparent;
  border-radius: inherit;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
          mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-clip: padding-box, border-box;
          mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

:root {
  --c-image-radius-lg: 8rem;
  --c-image-radius-md: 4rem;
  --c-image-radius-sm: 2rem;
  --c-image-radius-xs: 1rem;
}
@media (max-width: 1024px) {
  :root {
    --c-image-radius-lg: 5.75rem;
    --c-image-radius-md: 3.25rem;
    --c-image-radius-sm: 1.5rem;
    --c-image-radius-xs: 1rem;
  }
}
@media (max-width: 525px) {
  :root {
    --c-image-radius-lg: 5rem;
    --c-image-radius-md: 2.75rem;
    --c-image-radius-sm: 1.5rem;
    --c-image-radius-xs: 1rem;
  }
}

.c-image:where([data-image-width=full]) {
  width: 100%;
}
.c-image:where([data-image-width=cover]) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-image:where([data-image-radius=lg]) {
  border-radius: var(--c-image-radius-lg);
}
.c-image:where([data-image-radius=md]) {
  border-radius: var(--c-image-radius-md);
}
.c-image:where([data-image-radius=sm]) {
  border-radius: var(--c-image-radius-sm);
}
.c-image:where([data-image-radius=xs]) {
  border-radius: var(--c-image-radius-xs);
}

.c-keep-word {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.c-list {
  --prefix: "・";
  --prefix-color: currentcolor;
  --prefix-size: 1em;
  --padding: 1.3em;
  --row-gap: 0.17em;
  list-style: none;
}
.c-list[data-list-type*=note] {
  --prefix: "※";
}
.c-list[data-list-type*=circle] {
  --prefix: "";
}
.c-list[data-list-type*=ordered] {
  --prefix: counter(list) ".";
  counter-reset: list;
}
.c-list[data-list-type*=ordered]:where(.c-list[data-list-type*=note]) {
  --prefix: "※" counter(list);
  --padding: 2.3em;
}
.c-list[data-list-type*=check] {
  --prefix: "";
  --padding: 2em;
}
.c-list__item {
  position: relative;
  padding-left: var(--padding);
}
.c-list__item:where(.c-list[data-list-type*=ordered] > *) {
  counter-increment: list;
}
.c-list__item::before {
  position: absolute;
  top: 0.5lh;
  left: 0;
  font-size: var(--prefix-size);
  color: var(--prefix-color);
  content: var(--prefix);
  translate: 0 -50%;
}
.c-list__item:where([data-list-type*=circle] > *)::before {
  width: 0.65em;
  aspect-ratio: 1/1;
  background-color: var(--prefix-color);
  border-radius: 50%;
}
.c-list__item:where(.c-list[data-list-type*=check] > *)::before {
  font-family: var(--font-icon);
}
.c-list__item:where(:nth-of-type(n + 2)) {
  margin-top: var(--row-gap);
}

.c-paragraph {
  line-height: 2.1;
}
.c-paragraph--sparse {
  line-height: 2.5;
}
:where(.c-paragraph + .c-paragraph) {
  margin-top: 1em;
}

.c-signature {
  --position-size: 1.7rem;
  --name-size: var(--font-size-xxl);
  --ruby-size: 1rem;
  display: flex;
  flex-wrap: wrap;
  row-gap: 1.75rem;
  column-gap: var(--position-size);
  font-family: var(--font-serif);
  line-height: 1;
}
.c-signature--vertical {
  flex-direction: column;
}
.c-signature:not(.c-signature--vertical) {
  align-items: flex-end;
}
.c-signature__position {
  font-size: var(--position-size);
  letter-spacing: 0.15em;
}
.c-signature__name {
  display: flex;
  column-gap: 0.3em;
  align-items: flex-end;
  font-size: var(--name-size);
  letter-spacing: 0.15em;
}
.c-signature__name ruby {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 0.25em;
  align-items: center;
}
.c-signature__name ruby::before {
  font-size: 0.5em;
  font-size: var(--ruby-size);
  line-height: 1;
  letter-spacing: 0.3em;
  white-space: nowrap;
  content: attr(data-ruby);
}
.c-signature__name rt {
  display: none;
}

.c-term-list {
  display: grid;
  container-type: inline-size;
}
.c-term-list__item {
  display: grid;
  grid-template-columns: var(--term-width, 5.25em) 1fr;
  gap: 0.15em 3em;
  padding-top: 0.65em;
  padding-bottom: 0.65em;
}
@container (width < 500px) {
  .c-term-list__item {
    grid-template-columns: auto;
  }
}
.c-term-list__item:where([data-has-border=true] > *) {
  padding-top: 0.85em;
  padding-bottom: 0.9em;
  border-bottom: 1px solid var(--border-color, currentcolor);
}
.c-term-list__term {
  font-size: var(--term-font-size, 1em);
  font-weight: bold;
}
@container (width >= 500px) {
  .c-term-list__term {
    text-align-last: justify;
  }
}

.c-text-link {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
  transition: opacity 0.2s;
}
.c-text-link:hover {
  opacity: 0.65;
}
.c-text-link--no-border {
  text-decoration: none;
}

.c-tile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--row-gap, 1.5rem) var(--column-gap, 1.5rem);
}
.c-tile__item {
  --column-count: 4;
  --column-gap: 1.5rem;
  width: calc((100% - var(--column-gap, 1.5rem) * (var(--column-count, 3) - 1)) / var(--column-count, 3));
}

@media (max-width: 768px) {
  .c-tile__item {
    --column-count: 2;
  }
  
  .c-button04__text {
    font-size: 12px;
  }
}

.l-breadcrumb {
  margin-top: 2rem;
  font-size: var(--font-size-sm);
  color: rgb(var(--color-text-base-rgb)/70%);
}
.l-breadcrumb__list {
  display: flex;
  align-items: center;
  padding: 0.75em 0;
}
.l-breadcrumb__item:nth-child(n+2)::before {
  margin-inline: 1em;
  content: "/";
}
.l-breadcrumb__item > a {
  transition: color 0.23s;
}
.l-breadcrumb__item > a:hover {
  color: var(--color-primary);
}

.l-container {
  max-width: 110rem;
  margin-right: auto;
  margin-left: auto;
}
@media (max-width: 1024px) {
  .l-container {
    max-width: calc(85 * var(--vw));
  }
}
@media (max-width: 525px) {
  .l-container {
    max-width: calc(89 * var(--vw));
  }
}

.l-footer {
  padding-top: var(--section-gap-md);
  padding-bottom: 3rem;
}
@media (max-width: 1024px) {
  .l-footer {
    padding-bottom: calc(var(--sidemenu-width) + 2rem);
  }
}
@media (max-width: 525px) {
  .l-footer {
    padding-bottom: calc(var(--sidemenu-sp-height) + 2rem);
  }
}
.l-footer__logo {
  display: block;
  width: 100%;
  max-width: 50rem;
  max-height: 20rem;
  margin-inline: auto;
  transition: opacity 0.18s;
}
.l-footer__logo:hover {
  opacity: 0.8;
}
.l-footer__logo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.l-footer__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--section-gap-xs) 5rem;
  margin-inline: auto;
  margin-top: var(--section-gap-xs);
}
@media (min-width: 1025px) {
  .l-footer__main {
    width: 100rem;
  }
}
@media (max-width: 1024px) {
  .l-footer__main {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1024px) {
  .l-footer__reservation {
    width: fit-content;
    margin-inline: auto;
  }
}
.l-footer__tel {
  display: flex;
  align-items: baseline;
  width: fit-content;
  font-family: var(--font-serif);
  font-size: 4rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.l-footer__tel small {
  margin-right: 0.5em;
  font-size: 0.5em;
  text-transform: uppercase;
}
.l-footer__address {
  margin-top: 1.5rem;
}
.l-footer__box {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 2rem;
  align-items: center;
  margin-top: 2rem;
}
@media (max-width: 1024px) {
  .l-footer__box {
    flex-direction: column;
  }
}
.l-footer__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}
.l-footer__buttons__line {
  --button-color: var(--color-brand-line);
}
.l-footer__sns .l-sns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  font-size: 2.85rem;
}
.l-footer__sns .l-sns__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  aspect-ratio: 1/1;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  transition: all 0.2s;
}
.l-footer__sns .l-sns__link:hover {
  background-color: var(--color-smoke);
  box-shadow: 0 0 0.5rem rgb(var(--color-text-primary-rgb)/15%), inset 0 0 2rem 0.5rem var(--color-white);
}
.l-footer__sns .l-sns__icon:where([data-sns-brand=instagram] *) {
  color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  -webkit-background-clip: text;
          background-clip: text;
}
.l-footer__sns .l-sns__icon:where([data-sns-brand=facebook] *) {
  color: var(--color-brand-facebook);
}
.l-footer__sns .l-sns__icon:where([data-sns-brand=x] *) {
  color: var(--color-brand-x);
}
.l-footer__sns .l-sns__text {
  display: none;
}
.l-footer__map {
  margin-inline: calc(50% - 50 * var(--vw));
  margin-top: 6rem;
}
@media (max-width: 525px) {
  .l-footer__map {
    margin-top: 4rem;
  }
}
.l-footer__map iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 3.5/1;
}
@media (max-width: 1024px) {
  .l-footer__map iframe {
    aspect-ratio: 2.2/1;
  }
}
@media (max-width: 525px) {
  .l-footer__map iframe {
    aspect-ratio: 1.35/1;
  }
}
.l-footer__menu {
  margin-block: 5rem;
}
@media (max-width: 1024px) {
  .l-footer__menu {
    display: none;
  }
}
.l-footer__menu .l-menu {
  --column-gap: 6rem;
  column-gap: var(--column-gap);
  width: 100%;
  font-size: var(--font-size-sm);
  line-height: 1.22;
  column-count: 2;
}
.l-footer__menu .l-menu__item {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-bottom: 0.35em;
  border-bottom: var(--border-md) solid rgb(var(--color-text-base-rgb)/40%);
}
.js-has-pseudo [csstools-has-1a-30-19-2u-33-33-38-2t-36-2n-2n-31-2t-32-39-w-1a-30-19-31-2t-32-39-2n-2n-2x-38-2t-31-1m-2w-2p-37-14-1q-w-1a-30-19-31-2t-32-39-2n-2n-37-39-2q-15]:not(.does-not-exist):not(.does-not-exist) {
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: 3.5em;
}
.l-footer__menu .l-menu__item:has(> .l-menu__sub) {
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: 3.5em;
}
.l-footer__menu .l-menu__link {
  display: block;
  align-self: flex-end;
  height: fit-content;
  padding: 0.75em 0.65em;
  transition: color 0.23s;
}
.l-footer__menu .l-menu__link:hover {
  color: var(--color-primary);
}
.l-footer__menu .l-menu__text {
  font-weight: 460;
}
.l-footer__menu .l-menu__sub {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.14em 2em;
  padding-top: 0.45em;
  padding-bottom: 0.65em;
  font-size: 0.9em;
}
.l-footer__menu .l-menu__sub__item {
  height: fit-content;
}
.l-footer__menu .l-menu__sub__link {
  display: block;
  padding: 0.35em 0.5em;
  transition: color 0.23s;
}
.l-footer__menu .l-menu__sub__link:hover {
  color: var(--color-primary);
}
.l-footer__copyright {
  display: block;
  margin-top: 3rem;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  line-height: 1.3;
  text-align: center;
}
@media (max-width: 525px) {
  .l-footer__copyright {
    margin-top: 2rem;
  }
}

:root {
  --z-index-header: 100;
}

.l-header-lead {
  position: absolute;
  top: 0;
  right: var(--sidemenu-width);
  z-index: var(--z-index-header);
  padding-right: 1em;
  font-size: var(--font-size-xs);
  color: var(--color-text-contrast);
  opacity: 0.5;
}
@media (max-width: 1024px) {
  .l-header-lead {
    display: none;
  }
}

.l-header {
  position: fixed;
  z-index: var(--z-index-header);
  width: 100%;
}
.l-header__logo {
  position: absolute;
  top: 50%;
  left: 6rem;
  z-index: var(--z-index-header);
  display: block;
  width: fit-content;
  max-width: 100%;
  max-height: 100%;
  padding: 0.5rem;
  margin-right: calc(var(--sidemenu-width) + 3rem);
  transform: translateY(-50%);
}
@media (max-width: 1024px) {
  .l-header__logo {
    left: 3rem;
  }
}
@media (max-width: 525px) {
  .l-header__logo {
    left: 1rem;
  }
}
.l-header__logo > img {
  display: block;
  max-width: 38rem;
  max-height: 100%;
  filter: drop-shadow(0 0 0.1rem var(--color-text-contrast)) drop-shadow(0.1rem 0.1rem 0.2rem var(--color-text-contrast)) drop-shadow(0 0 0.3rem rgb(var(--color-text-contrast-rgb)/85%)) drop-shadow(0 0 0.4rem rgb(var(--color-text-contrast-rgb)/70%));
}
@media (max-width: 1024px) {
  .l-header__logo > img {
    filter: drop-shadow(0 0 0.05rem var(--color-text-contrast)) drop-shadow(0 0 0.1rem var(--color-text-contrast)) drop-shadow(0 0 0.2rem rgb(var(--color-text-contrast-rgb)/85%)) drop-shadow(0 0 0.3rem rgb(var(--color-text-contrast-rgb)/70%));
  }
}
@media (max-width: 525px) {
  .l-header__logo > img {
    max-width: 100%;
  }
}
.l-header__toggle {
  position: relative;
  z-index: var(--z-index-header);
  width: var(--sidemenu-width);
  margin-left: auto;
}
.l-header__menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--z-index-header) - 1);
  width: calc(100 * var(--vw));
  height: 100vh;
  height: 100dvh;
  padding-top: var(--sidemenu-width);
  visibility: hidden;
  background-color: rgb(var(--color-bg-secondary-rgb)/83%);
  -webkit-backdrop-filter: blur(0.65rem);
          backdrop-filter: blur(0.65rem);
  opacity: 0;
}

.l-header-toggle:where(body[data-theme-color=beige], body[data-theme-color=beige] *) {
  --button-color: var(--color-fawn);
}
.l-header-toggle__icon > span {
  display: block;
  height: 0.1rem;
  background-color: currentcolor;
}
.l-header-toggle__icon:where([data-toggle-type=open] > *) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 90%;
  aspect-ratio: 1/0.5;
}
.l-header-toggle__icon:where([data-toggle-type=close] > *) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
  aspect-ratio: 1/0.5;
}
.l-header-toggle__icon:where([data-toggle-type=close] > *) > span {
  position: relative;
  transform-origin: center center;
}
.l-header-toggle__icon:where([data-toggle-type=close] > *) > span:nth-child(1) {
  rotate: 45deg;
  translate: 0 50%;
}
.l-header-toggle__icon:where([data-toggle-type=close] > *) > span:nth-child(2) {
  rotate: -45deg;
  translate: 0 -50%;
}

.l-header-menu {
  height: 100%;
  padding-top: 7rem;
  padding-bottom: 10rem;
}
@media (max-width: 1024px) {
  .l-header-menu {
    padding-top: 5rem;
    padding-bottom: 6rem;
  }
}
.l-header-menu .simplebar-content-wrapper {
  overscroll-behavior: contain;
}
.l-header-menu__inner {
  display: grid;
  row-gap: 3rem;
}
@media (min-width: 1025px) {
  .l-header-menu .l-menu {
    --column-gap: 6rem;
    column-count: 2;
    column-gap: var(--column-gap);
    width: 100%;
    line-height: 1.5;
  }
  .l-header-menu .l-menu__item {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 0.65em;
    border-bottom: var(--border-md) solid rgb(var(--color-text-base-rgb)/50%);
  }
  .js-has-pseudo [csstools-has-1a-30-19-2w-2t-2p-2s-2t-36-19-31-2t-32-39-w-1a-30-19-31-2t-32-39-2n-2n-2x-38-2t-31-1m-2w-2p-37-14-1q-w-1a-30-19-31-2t-32-39-2n-2n-37-39-2q-15]:not(.does-not-exist):not(.does-not-exist) {
    display: inline-grid;
    grid-template-columns: auto auto;
    column-gap: 3.5em;
  }
  .l-header-menu .l-menu__item:has(> .l-menu__sub) {
    display: inline-grid;
    grid-template-columns: auto auto;
    column-gap: 3.5em;
  }
  .l-header-menu .l-menu__link {
    display: block;
    align-self: flex-end;
    height: fit-content;
    padding: 0.75em 0.65em;
    transition: color 0.23s;
  }
  .l-header-menu .l-menu__link:hover {
    color: var(--color-primary);
  }
  .l-header-menu .l-menu__text {
    font-weight: 560;
  }
  .l-header-menu .l-menu__sub {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.14em 2em;
    padding-top: 0.45em;
    padding-bottom: 0.65em;
    font-size: var(--font-size-sm);
  }
  .l-header-menu .l-menu__sub__item {
    height: fit-content;
  }
  .l-header-menu .l-menu__sub__link {
    display: block;
    padding: 0.35em 0.5em;
    transition: color 0.23s;
  }
  .l-header-menu .l-menu__sub__link:hover {
    color: var(--color-primary);
  }
}
@media (max-width: 1024px) {
  .l-header-menu .l-menu {
    display: grid;
  }
  .l-header-menu .l-menu__link {
    position: relative;
    display: block;
    padding: 1.15em 0.8rem;
    font-size: 1.05em;
    font-weight: 560;
    line-height: 1.3;
    text-align: center;
  }
  .l-header-menu .l-menu__link::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--border-md);
    content: "";
    background-color: currentcolor;
    opacity: 0.25;
  }
  .l-header-menu .l-menu__sub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.75rem;
    padding-inline: 1rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    font-size: var(--font-size-sm);
    line-height: 1.5;
  }
  .l-header-menu .l-menu__sub__link {
    display: block;
    padding: 0.5em 0;
    font-weight: 450;
    text-align: center;
    opacity: 0.75;
    transition: opacity 0.2s;
  }
  .l-header-menu .l-menu__sub__link:hover {
    opacity: 1;
  }
  .l-header-menu .l-menu__sub__text {
    position: relative;
  }
}
.l-header-menu__sub {
  margin-top: 5rem;
}
@media (max-width: 525px) {
  .l-header-menu__sub {
    margin-top: 3rem;
  }
}

.l-header-contact__heading {
  margin-bottom: 0.35em;
  font-family: var(--font-serif);
  font-size: calc((var(--font-size-md) + var(--font-size-lg)) * 0.55);
}
@media (max-width: 1024px) {
  .l-header-contact__heading {
    text-align: center;
  }
}
.l-header-contact__body {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 4rem;
  align-items: center;
}
@media (max-width: 1024px) {
  .l-header-contact__body {
    justify-content: center;
  }
}
.l-header-contact__tel {
  display: flex;
  align-items: baseline;
  width: fit-content;
  font-family: var(--font-serif);
  font-size: 4rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.l-header-contact__tel small {
  margin-right: 0.5em;
  font-size: 0.5em;
  text-transform: uppercase;
}
.l-header-contact__web-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}
@media (max-width: 1024px) {
  .l-header-contact__web-links {
    justify-content: center;
  }
}
.l-header-contact__reservations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.l-header-contact__line {
  --button-color: var(--color-brand-line);
}
.l-header-contact__sns .l-sns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  font-size: 2.85rem;
}
.l-header-contact__sns .l-sns__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  aspect-ratio: 1/1;
  overflow: hidden;
  background-color: var(--color-white);
  isolation: isolate;
  border-radius: var(--radius-md);
  box-shadow: 0.15rem 0.15rem 0.7rem rgb(var(--color-text-primary-rgb)/27%);
  transition: box-shadow 0.2s;
}
.l-header-contact__sns .l-sns__link::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background-color: var(--color-white);
  transition: background 0.2s;
}
.l-header-contact__sns .l-sns__link:hover {
  box-shadow: 0.12rem 0.12rem 0.68rem rgb(var(--color-text-primary-rgb)/20%);
}
.l-header-contact__sns .l-sns__link:hover::before {
  background-color: rgb(var(--color-primary-rgb)/5%);
}
.l-header-contact__sns .l-sns__icon {
  z-index: 2;
}
.l-header-contact__sns .l-sns__icon:where([data-sns-brand=instagram] *) {
  color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  -webkit-background-clip: text;
          background-clip: text;
}
.l-header-contact__sns .l-sns__icon:where([data-sns-brand=facebook] *) {
  color: var(--color-brand-facebook);
}
.l-header-contact__sns .l-sns__icon:where([data-sns-brand=x] *) {
  color: var(--color-brand-x);
}
.l-header-contact__sns .l-sns__text {
  display: none;
}
.l-header-contact__address {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  width: 100%;
  margin-top: 1rem;
}
@media (max-width: 1024px) {
  .l-header-contact__address {
    justify-content: center;
    text-align: center;
  }
}

.l-image-section {
  --direction: row;
  --align: flex-start;
  --image-width: 20rem;
  --row-gap: 4rem;
  --column-gap: 5cqw;
  container-type: inline-size;
  container-name: image-section;
}
.l-image-section--reverse {
  --direction: row-reverse;
}
.l-image-section[data-section-align=center] {
  --align: center;
}
.l-image-section__inner {
  position: relative;
  display: flex;
  flex-direction: var(--direction);
  gap: var(--row-gap) var(--column-gap);
  align-items: var(--align);
}
.l-image-section__inner:where(:not(.l-image-section--md, .l-image-section--sm, .l-image-section--xs) > *) {
  --image-width: min(54rem, 50%);
}
@container image-section (max-width: 82rem) {
  .l-image-section__inner:where(:not(.l-image-section--md, .l-image-section--sm, .l-image-section--xs) > *) {
    --image-width: min(50rem, 100%);
    --direction: column;
    --align: center;
  }
}
.l-image-section__inner:where(.l-image-section--md > *) {
  --image-width: min(48rem, 40%);
}
@container image-section (max-width: 76rem) {
  .l-image-section__inner:where(.l-image-section--md > *) {
    --image-width: min(42rem, 100%);
    --direction: column;
    --align: center;
  }
}
.l-image-section__inner:where(.l-image-section--sm > *) {
  --image-width: min(36rem, 40%);
}
@container image-section (max-width: 60rem) {
  .l-image-section__inner:where(.l-image-section--sm > *) {
    --image-width: min(36rem, 85%);
    --direction: column;
    --align: center;
  }
}
.l-image-section__inner:where(.l-image-section--xs > *) {
  --image-width: min(30rem, 36%);
}
@container image-section (max-width: 63rem) {
  .l-image-section__inner:where(.l-image-section--xs > *) {
    --image-width: min(33rem, 85%);
    --direction: column;
    --align: center;
  }
}
.l-image-section__main {
  flex: 1;
  order: 1;
  width: 100%;
}
.l-image-section__heading {
  margin-bottom: 1em;
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  color: var(--heading-color, var(--color-text-primary));
  letter-spacing: 0.05em;
}
.l-image-section__image {
  align-self: flex-start;
  order: -1;
  width: 100%;
  max-width: var(--image-width);
  margin-inline: auto;
}
.l-image-section__image__main {
  display: block;
  width: 80%;
}
.l-image-section__image__sub {
  display: block;
  width: 60%;
  margin-top: -16%;
  margin-left: auto;
}

@keyframes l-mv-fade-in {
  0% {
    -webkit-mask-size: 0% 0%;
            mask-size: 0% 0%;
    filter: blur(1rem);
    opacity: 0.15;
  }
  100% {
    filter: blur(0);
    -webkit-mask-size: var(--farthest-corner) var(--farthest-corner);
            mask-size: var(--farthest-corner) var(--farthest-corner);
    opacity: 1;
  }
}
@keyframes l-mv-zoom-out {
  0% {
    scale: 1.03;
  }
  100% {
    scale: 1;
  }
}
.l-mv {
  --height-ratio: 0.35;
  container-type: size;
  position: relative;
  aspect-ratio: 1/var(--height-ratio);
}
@media (min-width: 1025px) {
  .l-mv {
    margin-inline: var(--sidemenu-width);
  }
}
@media (max-width: 1024px) {
  .l-mv {
    --height-ratio: 0.81;
  }
}
.l-mv__bg {
  --diameter: calc(100cqw * (4 * (var(--height-ratio) * var(--height-ratio)) + 1) / (4 * var(--height-ratio)));
  --radius: calc(var(--diameter) / 2);
  --edge-blur-size: 5rem;
  --mask-size: calc(var(--diameter) + var(--edge-blur-size) * 2);
  --farthest-corner: calc(hypot(100cqw, 100cqh) + var(--edge-blur-size) * 2);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: circle(var(--radius) at 50% calc(var(--radius) * -1 + 100cqh));
  -webkit-mask-image: radial-gradient(circle closest-side, #000 calc(99.99% - var(--edge-blur-size)), transparent 100%);
          mask-image: radial-gradient(circle closest-side, #000 calc(99.99% - var(--edge-blur-size)), transparent 100%);
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: 0% 0%;
          mask-size: 0% 0%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: 0;
  animation-name: l-mv-fade-in;
  animation-duration: 3.15s;
  animation-timing-function: var(--ease-out-expo);
  animation-delay: 0.15s;
  animation-fill-mode: forwards;
}
.l-mv__image {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1;
  animation-name: l-mv-zoom-out;
  animation-duration: 2.25s;
  animation-timing-function: var(--ease-out-quart);
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
.l-mv__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
@media (min-width: 1025px) {
  .l-mv__inner {
    padding-bottom: 2rem;
  }
}
@media (max-width: 1024px) {
  .l-mv__inner {
    padding-top: 2rem;
  }
}
.l-mv__title {
  --translate: 0.25rem;
  animation-delay: 0.3s;
}

@media (min-width: 1025px) {
  .l-outline__nap {
    max-width: 72rem;
    margin-inline: auto;
  }
}
.l-outline__standard {
  margin-bottom: 0.35em;
}
.l-outline__box-list {
  --column-count: 3;
  --column-gap: 2.5rem;
  --row-gap: 2.25rem;
  justify-content: center;
  margin-top: var(--section-gap-xs);
}
@media (max-width: 1024px) {
  .l-outline__box-list {
    --column-count: 1;
  }
}
@media (max-width: 525px) {
  .l-outline__box-list {
    --column-count: 1;
  }
}

.l-outline-box {
  padding: 2em;
}
@media (min-width: 1025px) {
  .l-outline-box {
    flex: 1;
    max-width: 63%;
  }
}
.l-outline-box__heading {
  margin-bottom: 0.5em;
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  text-align: center;
}

.l-schedule {
  container-type: inline-size;
}
@media (max-width: 525px) {
  .l-schedule {
    font-size: var(--font-size-sm);
  }
}
.l-schedule > table {
  width: 100%;
}
.l-schedule > table th,
.l-schedule > table td {
  font-weight: normal;
  line-height: 1;
  text-align: center;
}
.l-schedule > table th:first-child,
.l-schedule > table td:first-child {
  width: 23%;
  white-space: nowrap;
}
.l-schedule > table thead th {
  padding: 1em 0.5em;
}
.l-schedule > table tbody th:first-child {
  text-align: left;
}
.l-schedule > table tbody tr {
  --padding-x: 0.5em;
  --padding-y: 0.8em;
}
.l-schedule > table tbody tr th,
.l-schedule > table tbody tr td {
  position: relative;
  padding: var(--padding-y) var(--padding-x);
}
.l-schedule > table tbody tr td {
  color: var(--accent-color, var(--color-primary));
}
.l-schedule > table tbody tr:is(:first-of-type, :last-of-type) th::before,
.l-schedule > table tbody tr:is(:first-of-type, :last-of-type) td::before {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background-color: var(--border-color, rgb(var(--color-text-base-rgb)/30%));
  transition: background 0.2s;
}
.l-schedule > table tbody tr:first-of-type th,
.l-schedule > table tbody tr:first-of-type td {
  padding-top: calc(var(--padding-y) * 1.5);
}
.l-schedule > table tbody tr:first-of-type th::before,
.l-schedule > table tbody tr:first-of-type td::before {
  top: 0;
}
.l-schedule > table tbody tr:last-of-type th,
.l-schedule > table tbody tr:last-of-type td {
  padding-bottom: calc(var(--padding-y) * 1.5);
}
.l-schedule > table tbody tr:last-of-type th::before,
.l-schedule > table tbody tr:last-of-type td::before {
  bottom: 0;
}
.l-schedule__note {
  padding: 0.5em;
}

.l-side {
  position: fixed;
  z-index: calc(var(--z-index-header) - 2);
}
@media (min-width: 1025px) {
  .l-side {
    top: calc(var(--sidemenu-width) * var(--c-button03-height-ratio));
    right: 0;
    display: grid;
  }
}
@media (max-width: 1024px) {
  .l-side {
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
}
@media (max-width: 525px) {
  .l-side {
    width: 100%;
  }
}
.l-side__item {
  position: relative;
}
@media (max-width: 1024px) {
  .l-side__item {
    animation-delay: 0.75s;
  }
}
@media (min-width: 526px) {
  .l-side__item {
    width: var(--sidemenu-width);
  }
}
@media (max-width: 525px) {
  .l-side__item {
    flex: 1;
  }
}
.l-side__item:where([data-item-type=tel]) {
  --button-color: var(--color-silver);
}
.l-side__item:where([data-item-type=tel]):where(body[data-theme-color=beige], body[data-theme-color=beige] *) {
  --button-color: var(--color-fawn);
}
@media (min-width: 1025px) {
  .l-side__item:where([data-item-type=tel]) {
    display: none;
  }
}
.l-side__item:where([data-item-type=web]) {
  --button-color: var(--color-primary);
}
.l-side__item:where([data-item-type=line]) {
  --button-color: var(--color-brand-line);
}
.l-side__item:where([data-item-type=access]) {
  --button-color: var(--color-duck-egg);
}
.l-side__item:where([data-item-type=access]):where(body[data-theme-color=green], body[data-theme-color=green] *) {
  --button-color: var(--color-powder-blue);
}
.l-side__item:where([data-item-type=schedule]) {
  --button-color: var(--color-purple-gray-light);
  z-index: 1;
  aspect-ratio: 1/var(--c-button03-height-ratio);
  container-type: size;
}
.l-side__item:where([data-item-type=schedule]):where(body[data-theme-color=green], body[data-theme-color=green] *) {
  --button-color: var(--color-pale-purple);
}
.l-side__item:where([data-item-type=top]) {
  --button-color: var(--color-white);
  --button-text-color: rgb(var(--color-text-base-rgb) / 80%);
  --button-shadow-color: rgb(var(--color-text-base-rgb) / 50%);
}
@media (min-width: 1025px) {
  .l-side__item:where([data-item-type=top]) {
    filter: drop-shadow(0.07rem 0.07rem 0.15rem rgb(var(--color-text-base-rgb)/18%));
  }
}
@media (max-width: 1024px) {
  .l-side__item:where([data-item-type=top]) {
    position: absolute;
    right: 0;
    bottom: 100%;
    padding: 1rem;
  }
}
@media (max-width: 525px) {
  .l-side__item:where([data-item-type=top]) {
    padding: 0.65rem;
  }
}
@media (max-width: 525px) {
  .l-side__button {
    height: var(--sidemenu-sp-height);
  }
}
@media (min-width: 1025px) {
  .l-side__button:where([data-item-type=top] *) {
    aspect-ratio: 1/1.05;
    border-bottom-right-radius: var(--infinity);
    border-bottom-left-radius: var(--infinity);
  }
  .l-side__button:where([data-item-type=top] *) > .c-button03__inner {
    padding-bottom: 2.75rem;
  }
}
@media (max-width: 1024px) {
  .l-side__button:where([data-item-type=top] *) {
    height: unset;
    aspect-ratio: 1/1;
    border-radius: var(--infinity);
  }
}
@media (max-width: 525px) {
  .l-side__button:where([data-item-type=top] *) {
    height: calc(var(--sidemenu-sp-height) * 0.9);
  }
}
.l-side__icon:where([data-item-type=schedule] [data-toggle-type=close] > *) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
  aspect-ratio: 1/0.5;
}
.l-side__icon:where([data-item-type=schedule] [data-toggle-type=close] > *) > span {
  position: relative;
  display: block;
  height: 0.1rem;
  background-color: currentcolor;
  transform-origin: center center;
}
.l-side__icon:where([data-item-type=schedule] [data-toggle-type=close] > *) > span:nth-child(1) {
  rotate: 45deg;
  translate: 0 50%;
}
.l-side__icon:where([data-item-type=schedule] [data-toggle-type=close] > *) > span:nth-child(2) {
  rotate: -45deg;
  translate: 0 -50%;
}
.l-side__schedule {
  --duration: 0.95s;
  position: absolute;
  transition: translate var(--duration) var(--ease-out-quint);
}
@media (min-width: 1025px) {
  .l-side__schedule {
    left: 100%;
  }
}
@media (max-width: 1024px) {
  .l-side__schedule {
    --duration: 0.75s;
    top: 100%;
    right: 0;
  }
}
@media (min-width: 1025px) {
  .js-has-pseudo [csstools-has-1a-30-19-37-2x-2s-2t-2n-2n-37-2r-2w-2t-2s-39-30-2t-1m-2w-2p-37-14-2j-2p-36-2x-2p-19-2t-3c-34-2p-32-2s-2t-2s-1p-38-36-39-2t-2l-15]:not(.does-not-exist) {
    translate: -100%;
  }
  .l-side__schedule:has([aria-expanded=true]) {
    translate: -100%;
  }
}
@media (max-width: 1024px) {
  .js-has-pseudo [csstools-has-1a-30-19-37-2x-2s-2t-2n-2n-37-2r-2w-2t-2s-39-30-2t-1m-2w-2p-37-14-2j-2p-36-2x-2p-19-2t-3c-34-2p-32-2s-2t-2s-1p-38-36-39-2t-2l-15]:not(.does-not-exist) {
    translate: 0 -100%;
  }
  .l-side__schedule:has([aria-expanded=true]) {
    translate: 0 -100%;
  }
}
.l-side__schedule__toggle {
  position: absolute;
  width: 100cqw;
}
@media (min-width: 1025px) {
  .l-side__schedule__toggle {
    top: 0;
    right: 100%;
  }
}
@media (max-width: 1024px) {
  .l-side__schedule__toggle {
    right: 0;
    bottom: 100%;
    animation-delay: 0.75s;
  }
}
.l-side__schedule__table {
  background-color: rgb(var(--color-bg-secondary-rgb)/85%);
  -webkit-backdrop-filter: blur(0.5rem);
          backdrop-filter: blur(0.5rem);
}
@media (min-width: 1025px) {
  .l-side__schedule__table {
    padding: 1.75rem 3rem 2rem;
    border-bottom-left-radius: var(--radius-md);
  }
}
@media (min-width: 526px) and (max-width: 1024px) {
  .l-side__schedule__table {
    padding: 1.5rem 3rem;
    border-top-left-radius: var(--radius-md);
  }
}
@media (min-width: 526px) {
  .l-side__schedule__table {
    min-width: 50rem;
  }
}
@media (max-width: 525px) {
  .l-side__schedule__table {
    width: calc(100 * var(--vw));
    padding: 1.5rem 2rem;
  }
}

.l-side-tel {
  --button-bg-color: var(--color-text-contrast);
  --button-text-color: var(--color-primary);
  --button-hover-bg-color: var(--color-primary);
  --button-hover-text-color: var(--color-text-contrast);
  --animation-delay: 0.15s;
  position: fixed;
  right: -0.5rem;
  bottom: 3.5rem;
  z-index: calc(var(--z-index-header) - 3);
  display: flex;
  column-gap: 0.25em;
  padding-block: 1.2em;
  padding-right: 1em;
  padding-left: 0.9em;
  font-size: 1.7rem;
  font-weight: 450;
  line-height: 1;
  letter-spacing: 0.07em;
  filter: drop-shadow(0.2rem 0.2rem 1rem rgb(var(--color-text-base-rgb)/12%));
  border-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
@media (max-width: 1024px) {
  .l-side-tel {
    display: none;
  }
}
.l-side-tel__icon {
  position: relative;
  translate: 0 0.1em;
}