@charset "UTF-8";

/* ==========================================================================
   CSS ARCHITECTURE / DESIGN SYSTEM
   動物病院ホームページ向け スタイルシート
   --------------------------------------------------------------------------
   [目次]
   1. アニメーション設定 (Animation & Keyframes)
   2. 基本変数・ルート設定 (Variables & Base Setup)
   3. カラーパレット・テーマカラー (Colors & Themes)
   4. ベーススタイル・リセット (Base Styles)
   5. コンポーネント群 (Components / .c-*)
   6. レイアウトモジュール (Layouts / .l-*)
   7. 追記用スタイル (Utilities)
========================================================================== */


/* =========================================================
   1. アニメーション設定 (Animation & Keyframes)
========================================================= */

/* --- 共通項目（スクロールイン時の発火設定） --- */
: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);
}

/* --- フェード系アニメーション（透明度の変化と移動） --- */
@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%;
  }
}


/* =========================================================
   2. 基本変数・ルート設定 (Variables & Base Setup)
========================================================= */

/* --- フォント設定 --- */
: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: "Shippori Mincho B1", 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: var(--radius-lg);
  --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;
  }
}


/* =========================================================
   3. カラーパレット・テーマカラー (Colors & Themes)
========================================================= */

/* --- カラーパレット定義 --- */
: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 {
  --color-primary: var(--color-beau-blue);
  --color-primary-rgb: var(--color-beau-blue-rgb);
  
  --color-gradation01: var(--color-pale-blue-light);
  --color-gradation01-rgb: var(--color-pale-blue-light-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-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-sky-blue);
  --color-brand-line-rgb: var(--color-sky-blue-rgb);
}


/* =========================================================
   4. ベーススタイル・リセット (Base Styles)
========================================================= */

/* --- サイト全体の基本定義 --- */
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.js / Slick / Simplebar） --- */
.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);
}


/* =========================================================
   5. コンポーネント群 (Components / .c-*)
========================================================= */

/* --- 背景テーマ（.c-bg-theme） --- */
@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); }*/
/* --- テーマ別オーバーライド (Primary) --- */
.c-bg-theme[data-bg-type=primary] { 
  --deco-color: var(--color-pale-blue-light); 
}
@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〜4 のベースカラーを黄色(yellow-light)や薄緑(pale-mint)から、水色(mist-blue等)に変更 */
  --deco1-width: 55rem; --deco1-height: 43rem; --deco1-x-percent: 75; --deco1-y-percent: 4; 
  --deco1-color: rgb(var(--color-mist-blue-rgb) / 85%); 
  
  --deco2-width: 50rem; --deco2-height: 26rem; --deco2-x-percent: 0; --deco2-y-percent: 35; 
  --deco2-color: rgb(var(--color-pale-blue-light-rgb) / 60%);
  
  --deco3-width: 43rem; --deco3-height: 26rem; --deco3-x-percent: 100; --deco3-y-percent: 60; 
  --deco3-color: rgb(var(--color-blue-gray-light-rgb) / 70%);
  
  --deco4-width: 40rem; --deco4-height: 40rem; --deco4-x-percent: 3; --deco4-y-percent: 80; 
  --deco4-color: rgb(var(--color-mist-blue-rgb) / 85%);
  
  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);
}
@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〜04） --- */
.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, var(--color-text-primary));
  --glint-color: var(--color-white);
  --blank-height: 1.55em;
  --border-width: 1px;
  position: relative; z-index: 0; display: flex; align-items: center; justify-content: center;
  width: fit-content; min-width: 11.65em; min-height: 3.75em; padding: 0.5em 2em;
  font-family: var(--font-serif); font-size: var(--font-size-md); line-height: 1.3; color: var(--color);
  text-align: center; white-space: nowrap; border-radius: var(--infinity); transition: opacity 0.3s;
}
.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);
  -webkit-mask-image: conic-gradient(from 60deg at calc(100% - var(--blank-height) * var(--sqrt3) / 2) 50%, transparent 60deg, #000 60deg), linear-gradient(#000 0 0);
          mask-image: conic-gradient(from 60deg at calc(100% - var(--blank-height) * var(--sqrt3) / 2) 50%, transparent 60deg, #000 60deg), 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: 0; z-index: -1; width: 1.75em; height: var(--border-width);
  content: ""; background-color: var(--color); transition: all 0.2s ease; translate: 42% -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-teal));
  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__icon { flex-shrink: 0; font-size: 3.2em; }
.c-button04__text { line-height: 1.35; }

/* --- 経歴リストモジュール（.c-career） --- */
.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: inline-grid; grid-template-columns: auto 1fr; width: 100%; 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） --- */
.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） --- */
.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〜03） --- */
.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;
}

/* --- 画像モジュール（.c-image） --- */
: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, 3rem) var(--column-gap, 3rem); }
.c-tile__item { width: calc((100% - var(--column-gap, 3rem) * (var(--column-count, 3) - 1)) / var(--column-count, 3)); }


/* =========================================================
   6. レイアウトモジュール (Layouts / .l-*)
========================================================= */

/* --- パンくずリスト（.l-breadcrumb） --- */
.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） --- */
.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） --- */
.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; } }

/* --- ヘッダー（.l-header） --- */
: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） --- */
.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; }

/* --- メインビジュアル（.l-mv） --- */
@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 { --drop-shadow: 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-mv { --drop-shadow: drop-shadow(0 0 0.1rem 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 (min-width: 1025px) { .l-mv { margin-inline: var(--sidemenu-width); } }
@media (max-width: 1024px) { .l-mv { --height-ratio: 0.81; } }
.l-mv .c-heading01__main { filter: var(--drop-shadow); }
.l-mv .c-heading01__caption { filter: var(--drop-shadow); }
.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; }

/* --- 概要リスト（.l-outline） --- */
@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） --- */
.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 / .l-side-tel） --- */
.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-turquoise-green); }
.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-blue-gray-dark); }
.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; }


/* =========================================================
   7. 追記用スタイル (Utilities)
========================================================= */

/* --- マーカーハイライト装飾 --- */
.highlight {
  background-image: linear-gradient(0deg, rgb(var(--color-sky-blue-rgb) / 50%) 0.5em, transparent 0.5em);
}
.marker_verticle {
  background: linear-gradient(90deg, transparent 50%, rgb(var(--color-sky-blue-rgb) / 50%) 50%);
}

@media (max-width: 525px) {
  .marker_verticle {
    /* PC版と角度が異なり、デフォルトの180度(上から下)になります */
    background: linear-gradient(transparent 50%, rgb(var(--color-sky-blue-rgb) / 50%) 50%);
  }
}